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:T71c,"use client"; import { useEffect, useRef, type KeyboardEvent, type PointerEvent } from "react"; /** Press once, then repeat after a pause and speed up while the pointer is held. */ export function useHoldStep(step: () => void) { const stepRef = useRef(step); useEffect(() => { stepRef.current = step; }, [step]); const timers = useRef([]); const fromPointer = useRef(false); function clear() { for (const id of timers.current) window.clearTimeout(id); timers.current = []; } useEffect(() => { const onEnd = () => { for (const id of timers.current) window.clearTimeout(id); timers.current = []; }; window.addEventListener("pointerup", onEnd); window.addEventListener("pointercancel", onEnd); return () => { window.removeEventListener("pointerup", onEnd); window.removeEventListener("pointercancel", onEnd); onEnd(); }; }, []); function arm(wait: number, gap: number) { const id = window.setTimeout(() => { stepRef.current(); arm(gap, Math.max(40, Math.round(gap * 0.8))); }, wait); timers.current.push(id); } return { onPointerDown(event: PointerEvent) { if (event.button !== 0) return; fromPointer.current = true; try { event.currentTarget.setPointerCapture(event.pointerId); } catch { /* The pointer can already be gone. */ } clear(); stepRef.current(); arm(400, 150); }, onPointerUp: clear, onPointerCancel: clear, onKeyUp(event: KeyboardEvent) { if (event.key === " " || event.key === "Enter") clear(); }, onClick() { if (fromPointer.current) { fromPointer.current = false; return; } stepRef.current(); }, }; } 54:T217c,"use client"; import { Minus, Plus } from "lucide-react"; import { useId, useRef, useState, type KeyboardEvent } from "react"; import { useHoldStep } from "./lib/hold-step"; import { Label } from "./label"; import { cn } from "./lib/cn"; import { RollingValue } from "./rolling-value"; import "./number-field.css"; function places(step: number) { const text = String(step); const dot = text.indexOf("."); return dot < 0 ? 0 : text.length - dot - 1; } function clean(value: number, step: number) { return Number(value.toFixed(places(step))); } function textOf(value: number, prefix: string, suffix: string) { return `${prefix}${value}${suffix}`; } export function NumberField({ label, value, defaultValue, min = 0, max = 100, step = 1, prefix = "", suffix, scrub = false, disabled, name, id, onValueChange, className, }: { label: string; value?: number; defaultValue?: number; min?: number; max?: number; step?: number; prefix?: string; suffix?: string | ((value: number) => string); scrub?: boolean; disabled?: boolean; name?: string; id?: string; onValueChange?: (value: number) => void; className?: string; }) { const generated = useId(); const fieldId = id ?? generated; const lower = Math.min(min, max); const upper = Math.max(min, max); const initial = clean(Math.min(upper, Math.max(lower, defaultValue ?? lower)), step); const [local, setLocal] = useState(initial); const current = value ?? local; const [draft, setDraft] = useState(null); const [focused, setFocused] = useState(false); const [direction, setDirection] = useState<"up" | "down" | "none">("none"); const [strain, setStrain] = useState<"min" | "max" | null>(null); const [hint, setHint] = useState(""); const hintTimer = useRef(null); const strainTimer = useRef(null); const scrubOrigin = useRef<{ x: number; value: number } | null>(null); const suffixText = typeof suffix === "function" ? suffix(current) : (suffix ?? ""); const shown = draft ?? current.toFixed(places(step)); const parsed = Number(shown); const outside = shown !== "" && Number.isFinite(parsed) && (parsed < lower || parsed > upper); function note(edge: "min" | "max") { const limit = edge === "max" ? upper : lower; const end = typeof suffix === "function" ? suffix(limit) : (suffix ?? ""); setHint(edge === "max" ? `Maximum is ${textOf(limit, prefix, end)}` : `Minimum is ${textOf(limit, prefix, end)}`); if (hintTimer.current) window.clearTimeout(hintTimer.current); hintTimer.current = window.setTimeout(() => setHint(""), 1500); } function push(edge: "min" | "max") { if (!matchMedia("(prefers-reduced-motion: reduce)").matches) { setStrain(edge); if (strainTimer.current) window.clearTimeout(strainTimer.current); strainTimer.current = window.setTimeout(() => setStrain(null), 180); } note(edge); } function commit(next: number, way: "up" | "down" | "none") { const clamped = clean(Math.min(upper, Math.max(lower, next)), step); if (clamped === current) { if (next < lower || next > upper) push(next > upper ? "max" : "min"); setDraft(null); return clamped; } setDirection(way); setDraft(null); if (value == null) setLocal(clamped); onValueChange?.(clamped); return clamped; } function move(way: 1 | -1) { const next = clean(current + way * step, step); if (next > upper || next < lower || next === current) push(way > 0 ? "max" : "min"); else commit(next, way > 0 ? "up" : "down"); } const decrease = useHoldStep(() => move(-1)); const increase = useHoldStep(() => move(1)); function onKeyDown(event: KeyboardEvent) { if (event.key === "ArrowUp") { event.preventDefault(); move(1); } else if (event.key === "ArrowDown") { event.preventDefault(); move(-1); } else if (event.key === "Home") { event.preventDefault(); commit(lower, "down"); } else if (event.key === "End") { event.preventDefault(); commit(upper, "up"); } else if (event.key === "Enter") { event.currentTarget.blur(); } } return (

{ if (!scrub || disabled || event.button !== 0) return; scrubOrigin.current = { x: event.clientX, value: current }; event.currentTarget.setPointerCapture(event.pointerId); }} onPointerMove={(event) => { const origin = scrubOrigin.current; if (!origin) return; const steps = Math.round((event.clientX - origin.x) / 12); commit(origin.value + steps * step, steps >= 0 ? "up" : "down"); }} onPointerUp={() => { scrubOrigin.current = null; }} > {label}

{hint}

{prefix ? {prefix} : null}

setFocused(true)} onBlur={() => { setFocused(false); const next = Number(draft ?? current); if (!Number.isFinite(next)) { setDraft(null); return; } commit(next, next > current ? "up" : next < current ? "down" : "none"); }} onChange={(event) => setDraft(event.currentTarget.value)} onKeyDown={onKeyDown} /> {!focused ? ( ) : null}

{suffixText ? {suffixText} : null}

); } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n return (\n \n );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/lib/hold-step.ts","content":"$53","type":"registry:ui","target":"components/ui/lib/hold-step.ts"},{"path":"ui/number-field.tsx","content":"$54","type":"registry:ui","target":"components/ui/number-field.tsx"},{"path":"ui/rolling-value.tsx","content":"\"use client\";\n\nimport { useState } from \"react\";\nimport \"./rolling-value.css\";\n\nexport function RollingValue({\n value,\n direction,\n}: {\n value: string;\n direction: \"up\" | \"down\" | \"none\";\n}) {\n const [frame, setFrame] = useState({ value, prior: value });\n if (frame.value !== value) setFrame({ value, prior: frame.value });\n const prior = frame.prior;\n const glyphs = [...value];\n\n return (\n \n {glyphs.map((glyph, index) => {\n const changed = prior.length !== glyphs.length || prior[index] !== glyph;\n return (\n \n \n {glyph === \" \" ? \"\\u00A0\" : glyph}\n \n \n );\n })}\n \n );\n}\n","type":"registry:ui","target":"components/ui/rolling-value.tsx"},{"path":"ui/number-field.css","content":"/* number-field.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"number-field\"] {\n transition: translate var(--duration-normal) var(--ease-settle);\n }\n [data-slot=\"number-field\"][data-strain=\"min\"] {\n translate: -3px 0;\n }\n [data-slot=\"number-field\"][data-strain=\"max\"] {\n translate: 3px 0;\n }\n}\n","type":"registry:file","target":"components/ui/number-field.css"},{"path":"ui/rolling-value.css","content":"/* rolling-value.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in 400ms var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down 400ms var(--ease-showcase);\n }\n }\n}\n\n@keyframes caliper-digit-down {\n from {\n transform: translateY(70%);\n }\n to {\n transform: translateY(0);\n }\n}\n","type":"registry:file","target":"components/ui/rolling-value.css"}],"className":"h-[70svh] min-h-80"}]]}]