5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 61:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T2e63,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; // Below this the press is a click on the label (which focuses the field), // not the start of a scrub. const DRAG_THRESHOLD = 3; // Spacing of the tape's minor ticks; majors land every fifth. const TICK = 6; type Scrub = { id: number; startX: number; lastX: number; // Unrounded running value, so slow fine drags accumulate instead of // rounding every sub-step away. raw: number; start: number; sent: number; moved: boolean; }; function decimalsOf(n: number) { const s = String(n); const dot = s.indexOf("."); return dot < 0 ? 0 : s.length - dot - 1; } // Shift is a coarse gear, Alt/Option a fine one, like Figma. function gear(e: { shiftKey: boolean; altKey: boolean }) { return e.shiftKey ? 10 : e.altKey ? 0.1 : 1; } export function ScrubInput({ label, name, value, onChange, min = -Infinity, max = Infinity, step = 1, // One more decimal than the step, so the fine gear has room to land. precision = decimalsOf(step) + 1, pixelsPerStep = 1, suffix = "", lockPointer = false, className, }: { label: React.ReactNode; name: string; value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number; precision?: number; pixelsPerStep?: number; suffix?: string; // Opt-in: browsers announce pointer lock with a banner, which is too loud // for a quick nudge but worth it for long scrubs past the screen edge. lockPointer?: boolean; className?: string; }) { const id = useId(); const labelRef = useRef(null); const inputRef = useRef(null); const scrub = useRef(null); const suppressClick = useRef(false); const skipCommit = useRef(false); const selectNext = useRef(false); const [scrubbing, setScrubbing] = useState(false); // What the user is typing; null means the field shows the live value. const [draft, setDraft] = useState(null); // The tape pattern repeats every major tick, so only the remainder // matters, which also keeps huge values from losing precision. const period = TICK * 5; const tape = ((((value / step) * pixelsPerStep) % period) + period) % period; const clamp = (n: number) => Math.min(Math.max(n, min), max); const round = (n: number) => Number(n.toFixed(precision)); const format = (n: number) => `${round(n)}${suffix}`; const parse = (text: string) => { const trimmed = (suffix ? text.replace(suffix, "") : text).trim(); const n = Number(trimmed); return trimmed === "" || Number.isNaN(n) ? null : clamp(round(n)); }; // Re-selects after React writes the new value, which would otherwise // drop the caret at the end. useLayoutEffect(() => { if (!selectNext.current) return; selectNext.current = false; inputRef.current?.select(); }, [draft]); const endScrub = () => { if (document.pointerLockElement === labelRef.current) { document.exitPointerLock(); } document.documentElement.style.removeProperty("cursor"); suppressClick.current = scrub.current?.moved ?? false; scrub.current = null; setScrubbing(false); }; // Escape mid-scrub puts the value back where the drag started. Only // subscribed while scrubbing. useEffect(() => { if (!scrubbing) return; const onKey = (e: KeyboardEvent) => { if (e.key !== "Escape" || !scrub.current) return; onChange(scrub.current.start); endScrub(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }); useEffect( () => () => { if (!scrub.current) return; if (document.pointerLockElement) document.exitPointerLock(); document.documentElement.style.removeProperty("cursor"); }, [], ); const commit = () => { if (draft === null) return value; const next = parse(draft); if (next !== null && next !== value) onChange(next); return next ?? value; }; const stepBy = (delta: number) => { const base = draft === null ? value : (parse(draft) ?? value); const next = clamp(round(base + delta)); if (next !== value) onChange(next); selectNext.current = true; setDraft(format(next)); }; return (

{/* A tape measure surfaces along the bottom edge while scrubbing and runs under a fixed needle, higher values arriving from the right, like the dial on a lens. One step of value is one pixel of tape (at the normal gear), so the ticks travel exactly as far as the pointer does: the number changing is visibly the tape moving. */} { // Ignores a second finger rather than letting it hijack the drag. if (e.button !== 0 || scrub.current) return; // Keeps the press from selecting text or moving focus yet. e.preventDefault(); let start = value; if (document.activeElement === inputRef.current) { start = commit(); skipCommit.current = true; inputRef.current?.blur(); } e.currentTarget.setPointerCapture(e.pointerId); scrub.current = { id: e.pointerId, startX: e.clientX, lastX: e.clientX, raw: start, start, sent: start, moved: false, }; }} onPointerMove={(e) => { const s = scrub.current; if (!s || e.pointerId !== s.id) return; if (!s.moved) { if (Math.abs(e.clientX - s.startX) < DRAG_THRESHOLD) return; s.moved = true; setScrubbing(true); // Keeps the resize cursor once the pointer leaves the label. document.documentElement.style.cursor = "ew-resize"; if (lockPointer && e.pointerType === "mouse") { // Older browsers return nothing, newer ones a promise that // rejects when lock is refused. Either way the captured // pointer below keeps scrubbing. Promise.resolve(e.currentTarget.requestPointerLock?.()).catch( () => {}, ); } } // A locked pointer stays put, so only movementX reports travel. const locked = document.pointerLockElement === e.currentTarget; const dx = locked ? e.movementX : e.clientX - s.lastX; s.lastX = e.clientX; s.raw = clamp(s.raw + (dx / pixelsPerStep) * step * gear(e)); const next = round(s.raw); // Renders only when the shown number changes, not every pixel. if (next === s.sent) return; s.sent = next; onChange(next); }} onPointerUp={(e) => { if (scrub.current?.id === e.pointerId) endScrub(); }} onPointerCancel={(e) => { if (scrub.current?.id === e.pointerId) endScrub(); }} onClick={(e) => { // The click that ends a scrub shouldn't also drop you into typing. if (suppressClick.current) e.preventDefault(); suppressClick.current = false; }} > {label} { setDraft(format(value)); e.currentTarget.select(); }} onChange={(e) => setDraft(e.target.value)} onBlur={() => { if (!skipCommit.current) commit(); skipCommit.current = false; setDraft(null); }} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); // Stays in the field with the result selected, so the next // edit is one keystroke away. const next = commit(); selectNext.current = true; setDraft(format(next)); } else if (e.key === "Escape") { skipCommit.current = true; e.currentTarget.blur(); } else if (e.key === "ArrowUp" || e.key === "ArrowDown") { e.preventDefault(); stepBy((e.key === "ArrowUp" ? step : -step) * gear(e)); } }} />

); } function AngleIcon() { return ( ); } export default function ScrubInputDemo() { const [x, setX] = useState(120); const [y, setY] = useState(48); const [rotation, setRotation] = useState(0); return ( // 18px outer radius over 10px padding keeps the 8px fields concentric.

Transform

} name="Rotation" value={rotation} onChange={setRotation} min={-180} max={180} suffix="°" />

); } 5e:["$","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":[null,["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/scrub-input.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]