51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T483f,"use client"; import { Button } from "@/components/ui/button"; import { blur, duration, ease, spring, swap } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { MinusIcon, PlusIcon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ComponentProps, type KeyboardEvent, type MouseEvent, type PointerEvent, useEffect, useId, useRef, useState, } from "react"; /* * Number Input: a number field with step buttons (owner, 2026-10-16). It follows the WAI-ARIA spinbutton * pattern: a text input with role="spinbutton", ArrowUp/ArrowDown step, PageUp/PageDown take a big step, * Home/End go to min/max. Typed text is read when you leave the field or press Enter, then clamped and * formatted; a value in range also updates as you type. * - Motion (.agents/rules/motion.md): when a step changes the number, it rolls like an odometer. Each digit * that changed rolls a whole line: the old one travels out of the field as the new one travels in from the * other edge (up for up, down for down) on spring.snappy, sharpening through the blur over duration.slow so * the roll reads smooth rather than flickering (owner, 2026-10-21: "more noticeable"). Places set off 0.05s * apart from the right, so 19 → 20 turns the ones, then the tens. The field's top and bottom edges fade, so * digits roll in and out of sight softly. The others stay put; typing doesn't animate. While it rolls, the * input's own text is transparent and a copy is drawn over it, character by character, with tabular figures * so nothing jiggles; then the input's text shows again. With reduced motion the number just changes. * - The step buttons are our ghost icon Buttons inside the field. They aren't in the tab order (the keys do * the same) and don't take focus. Press and hold steps once, then repeats. * - Formatting is optional, through Intl.NumberFormat (`format`, `locale`). A form gets the plain number * through a hidden input. * - The field looks like Input: control heights, Input's border, its focus ring around the whole field. */ /** Press and hold: one step at once, then after `duration.slower`, one every `duration.instant` */ const HOLD_DELAY = duration.slower * 1000; const HOLD_REPEAT = duration.instant * 1000; /** Places set off one after another from the right: motion.md's list stagger */ const STAGGER = 0.05; /** * After this long without another step, the rolling copy hands back to the input's own text: the roll's * blur (duration.slow) plus room for the spring to land and a few places' stagger */ const ROLL_MS = duration.slow * 2 * 1000; /** The roller's top and bottom edges fade, so digits roll in and out of sight */ const ROLL_FADE = "linear-gradient(to bottom, transparent, black 30%, black 70%, transparent)"; const numberInputVariants = cva( [ "relative flex w-full min-w-0 items-center rounded-lg border border-input bg-transparent px-1 text-sm text-foreground shadow-xs", "transition duration-(--duration-fast) ease-out", // The ring goes round the whole field while its input has focus, the way Input's does "outline-ring has-focus-visible:border-ring has-focus-visible:outline-(length:--focus-ring-width) has-focus-visible:outline-offset-(--focus-ring-offset)", "data-invalid:border-destructive data-invalid:outline-destructive", "data-disabled:cursor-not-allowed data-disabled:opacity-(--opacity-disabled)", ], { variants: { size: { sm: "h-(--size-control-sm) rounded-md", md: "h-(--size-control-md)", lg: "h-(--size-control-lg)", }, }, defaultVariants: { size: "md" }, }, ); // The buttons sit 3px inside the field's border at every size const buttonSizes = { sm: "size-6", md: "size-7", lg: "size-8" } as const; const iconSizes = { sm: "size-(--size-icon-sm)", md: "size-(--size-icon-md)", lg: "size-(--size-icon-md)" }; /** Decimal places in a number, so 0.1 + 0.2 steps to 0.3 */ function decimalsOf(value: number) { const [, fraction = "", exponent] = /^-?\d*\.?(\d*)(?:e([+-]\d+))?$/.exec(String(value)) ?? []; return Math.max(0, fraction.length - Number(exponent ?? 0)); } /** * Reads typed text in the field's locale: group separators, currency signs and spaces are ignored. Empty * text is null, and text with no digits is NaN (so the field goes back to the last number). */ function parseNumber(text: string, locale: string | undefined, format: Intl.NumberFormatOptions | undefined) { const trimmed = text.trim(); if (!trimmed) return null; // Without a format the field shows plain numbers (1234.5), so it reads them the same way const parts = new Intl.NumberFormat(format ? locale : "en-US").formatToParts(-12345.6); const group = parts.find((part) => part.type === "group")?.value ?? ","; const decimal = parts.find((part) => part.type === "decimal")?.value ?? "."; // A minus sign anywhere (-$5, $-5, 5-, the typographic −) or accounting brackets, (5.00), is negative const negative = /[-−]/.test(trimmed) || /^$.*$$/.test(trimmed); const digits = trimmed .split(group) .join("") .split(decimal) .join(".") .replace(/[^\d.]/g, ""); if (!/\d/.test(digits)) return Number.NaN; let number = Number(digits); if (!Number.isFinite(number)) return Number.NaN; if (negative) number = -number; // A percent field shows 25% for 0.25 if (format?.style === "percent") number /= 100; return number; } type Roll = { direction: 1 | -1; animate: boolean }; /** A digit at rest, and one a whole line above or below it, blurred */ const rest = { y: "0%", opacity: 1, filter: blur.shown }; const away = (side: 1 | -1) => ({ y: `${side * 100}%`, opacity: 0, filter: blur.hidden }); /** Going up, the new digit comes from below and the old one leaves upwards; going down, the other way */ const rollVariants = { enter: ({ direction, animate }: Roll) => (animate ? away(direction) : swap.animate), center: rest, exit: ({ direction, animate }: Roll) => animate ? // The element's own transition: the old digit leaves with the same stagger the new one arrives on away(direction === 1 ? -1 : 1) : { opacity: 0, transition: { duration: 0 } }, }; /** The roll for a place: the travel on spring.snappy, the blur and fade on a smooth duration.slow, staggered */ const rollTransition = (place: number) => { const delay = Math.max(0, place) * STAGGER; return { duration: duration.slow, ease: ease.out, delay, y: { ...spring.snappy, delay } }; }; /** * The rolling copy of the field's text. Places are counted from the right, so 19 → 20 rolls both digits * and 20 → 21 only the last. Each place stacks the old and new character in one cell while they swap. */ function Roller({ text, roll }: { text: string; roll: Roll | null }) { const custom = roll ?? { direction: 1, animate: false }; const chars = Array.from(text); return ( {/* A place that goes (21 → 9) pops out of the row so the rest settle at once */} {chars.map((char, index) => { const place = chars.length - 1 - index; return ( {char} ); })} ); } export type NumberInputProps = Omit< ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "type" | "size" | "min" | "max" | "step" > & VariantProps & { /** The number, when you control it; null when the field is empty */ value?: number | null; /** The number at first */ defaultValue?: number | null; /** Called with the new number, or null when the field is emptied */ onValueChange?: (value: number | null) => void; /** The lowest number; Home goes here */ min?: number; /** The highest number; End goes here */ max?: number; /** How much ArrowUp, ArrowDown and the buttons change it */ step?: number; /** How much PageUp and PageDown change it; ten steps if left out */ largeStep?: number; /** Intl.NumberFormat options, for example { style: "currency", currency: "USD" } */ format?: Intl.NumberFormatOptions; /** The locale to format and read numbers in; the browser's if left out */ locale?: string; /** The increment button's accessible name */ incrementLabel?: string; /** The decrement button's accessible name */ decrementLabel?: string; }; /** * A number field with step buttons. `className` styles the field; other props, including `id` and `ref`, * go to its input. Give it a visible label (``). */ function NumberInput({ className, size, value, defaultValue, onValueChange, min, max, step = 1, largeStep, format, locale, incrementLabel = "Increase", decrementLabel = "Decrease", id, name, form, disabled = false, readOnly = false, "aria-invalid": ariaInvalid, onKeyDown, onBlur, ...props }: NumberInputProps) { const fallbackId = useId(); const inputId = id ?? fallbackId; // Mirror the value, controlled or not, so stepping and the buttons always start from the latest number const [uncontrolled, setUncontrolled] = useState(defaultValue ?? null); const current = value === undefined ? uncontrolled : value; // The text while the user types; null shows the formatted number const [draft, setDraft] = useState(null); const [roll, setRoll] = useState<{ direction: 1 | -1; count: number } | null>(null); const reduce = useReducedMotion() ?? false; const latest = useRef(current); latest.current = current; const formatter = format ? new Intl.NumberFormat(locale, format) : null; const display = (number: number | null) => number === null ? "" : formatter ? formatter.format(number) : String(number); const text = draft ?? display(current); const clamp = (number: number) => Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, number)); const invalid = ariaInvalid === true || ariaInvalid === "true"; function change(next: number | null) { if (Object.is(next, latest.current)) return; latest.current = next; if (value === undefined) setUncontrolled(next); onValueChange?.(next); } /** A change made by stepping, which rolls the number. Returns false when nothing changed (at a bound). */ function stepTo(next: number, direction: 1 | -1) { setDraft(null); if (next === latest.current) return false; if (!reduce) setRoll((last) => ({ direction, count: (last?.count ?? 0) + 1 })); change(next); return true; } function stepBy(direction: 1 | -1, amount = step) { if (disabled || readOnly) return false; const typed = draft === null ? null : parseNumber(draft, locale, format); const base = typed === null || Number.isNaN(typed) ? latest.current : typed; // From empty, the first step shows 0 (or the nearest bound) if (base === null) return stepTo(clamp(0), direction); const places = Math.max(decimalsOf(base), decimalsOf(amount)); return stepTo(clamp(Number((base + direction * amount).toFixed(places))), direction); } function goTo(target: number) { if (disabled || readOnly) return; const from = latest.current ?? target; stepTo(target, target >= from ? 1 : -1); } /** Reads what was typed: clamped and formatted, or back to the last number when it isn't one */ function commit() { if (draft === null) return; const typed = parseNumber(draft, locale, format); setDraft(null); if (typed === null) change(null); else if (!Number.isNaN(typed)) change(clamp(typed)); } // The rolling copy hands back to the input's own text once the steps stop useEffect(() => { if (!roll) return; const timer = setTimeout(() => setRoll(null), ROLL_MS); return () => clearTimeout(timer); }, [roll]); // Press and hold. The timers call the latest stepBy, so each repeat starts from the latest number. const stepRef = useRef(stepBy); stepRef.current = stepBy; const hold = useRef | undefined>(undefined); const pointerStep = useRef(false); const stopHold = () => clearTimeout(hold.current); useEffect(() => () => clearTimeout(hold.current), []); function startHold(direction: 1 | -1) { stopHold(); if (!stepRef.current(direction)) return; const repeat = (wait: number) => { hold.current = setTimeout(() => { if (stepRef.current(direction)) repeat(HOLD_REPEAT); }, wait); }; repeat(HOLD_DELAY); } const atMin = current !== null && min !== undefined && current <= min; const atMax = current !== null && max !== undefined && current >= max; const stepButton = (direction: 1 | -1) => ({ variant: "ghost" as const, size: "icon-sm" as const, // The keys do the same, so the buttons stay out of the tab order (WAI-ARIA spinbutton) tabIndex: -1, "aria-label": direction > 0 ? incrementLabel : decrementLabel, "aria-controls": inputId, disabled: disabled || readOnly || (direction > 0 ? atMax : atMin), className: cn("text-muted-foreground hover:text-foreground", buttonSizes[size ?? "md"]), // Pressing doesn't take focus from the input onMouseDown: (event: MouseEvent) => event.preventDefault(), onPointerDown: (event: PointerEvent) => { if (event.button !== 0) return; event.preventDefault(); pointerStep.current = true; startHold(direction); }, onPointerUp: stopHold, onPointerLeave: stopHold, onPointerCancel: stopHold, onClick: (event: MouseEvent) => { // A pointer already stepped on press; a click from the keyboard or a screen reader steps here if (event.detail === 0 || !pointerStep.current) stepRef.current(direction); pointerStep.current = false; }, }); return (

{ const next = event.target.value; setDraft(next); setRoll(null); // A number in range updates as you type; anything else waits until you leave the field const typed = parseNumber(next, locale, format); if (typed === null) change(null); else if (!Number.isNaN(typed) && typed === clamp(typed)) change(typed); }} onKeyDown={(event: KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || disabled || readOnly) return; const big = largeStep ?? step * 10; switch (event.key) { case "ArrowUp": stepBy(1); break; case "ArrowDown": stepBy(-1); break; case "PageUp": stepBy(1, big); break; case "PageDown": stepBy(-1, big); break; case "Home": if (min === undefined) return; goTo(min); break; case "End": if (max === undefined) return; goTo(max); break; case "Enter": // Read the typed number before the form submits commit(); return; default: return; } event.preventDefault(); }} onBlur={(event) => { commit(); onBlur?.(event); }} className={cn( "size-full min-w-0 bg-transparent px-2 text-center tabular-nums outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed", roll && !reduce && "text-transparent", )} {...props} />

{name ? ( ) : null}

); } export { NumberInput, numberInputVariants }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","lucide-react@^1.52.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.52.0"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^14.0.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json","https://ui.fewtone.com/r/button.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/fewtone/ui/number-input.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]