64: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"] 65: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"] 66: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"] 67: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"] 68: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"] 69:T2f5c,"use client"; import { useCallback, useEffect, useId, useRef, useState, type CSSProperties, } from "react"; // --------------------------------------------------------------------------- // CarbonFlimsy — a primary text field with a "carbon copy" derived field // stacked underneath it. Every keystroke in the primary is transformed // (default: slugified) and stamped onto the flimsy sheet: each newly-arrived // character mounts fresh and plays a short pressure-jitter keyframe // (translate 0.4px, font-weight 600 -> 400), staggered ~15ms apart when // several characters land at once (paste, or a full re-stamp). The flimsy // sheet sits visually offset 4px down-right from the primary, like a second // page peeking out from underneath — while linked its border and background // read as a thin under-sheet (color-mix toward --ns-muted). // // Editing the flimsy directly detaches it: the offset springs back to zero, // the border firms to --foreground at 30%, mirroring stops, and the value // becomes independently editable. A "Relink" button (only rendered while // detached) restores the coupling and replays a full re-stamp sweep across // the freshly-derived value. // // Both fields are real, independently labelled elements — the only // decorative-only layer is the stamp overlay, an aria-hidden row of spans // painted exactly over the flimsy input while its own text is transparent // (caret-color kept so a real caret still shows). The flimsy input always // carries the accessible value; the overlay never diverges from it. Detach // and relink each fire one polite live-region announcement. Reduced motion // drops the jitter and the spring transition; nothing about legibility or // operability depends on either. // --------------------------------------------------------------------------- type Vars = CSSProperties & Record<`--${string}`, string | number>; const CHAR_STAGGER_MS = 15; function defaultTransform(value: string): string { return value .toLowerCase() .trim() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, ""); } function commonPrefixLength(a: string, b: string): number { const n = Math.min(a.length, b.length); let i = 0; while (i < n && a[i] === b[i]) i++; return i; } function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } interface Stamp { text: string; /** per-character "batch" id — a span's React key includes this, so only * characters whose gen just changed remount and replay the jitter. */ gen: number[]; /** index the current batch's newly-stamped run starts at, for stagger delay. */ from: number; } export interface CarbonFlimsyProps { /** Accessible label for the primary field, e.g. "Project title". */ label: string; /** Accessible label for the derived flimsy field, e.g. "Slug". */ derivedLabel: string; /** Controlled primary value. */ value?: string; /** Initial primary value when uncontrolled. @default "" */ defaultValue?: string; /** called with the new primary value on every keystroke */ onValueChange?: (value: string) => void; /** Fires whenever the derived value changes, with whether it's still linked. */ onDerivedChange?: (value: string, linked: boolean) => void; /** Transforms the primary value into the derived one. @default slugify */ transform?: (value: string) => string; /** placeholder for the primary field */ placeholder?: string; /** Shown in the flimsy field while its value is empty. @default "auto-generated" */ derivedPlaceholder?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function CarbonFlimsy({ label, derivedLabel, value, defaultValue = "", onValueChange, onDerivedChange, transform = defaultTransform, placeholder, derivedPlaceholder = "auto-generated", className = "", }: CarbonFlimsyProps) { const isControlled = value !== undefined; const [internalPrimary, setInternalPrimary] = useState(defaultValue); const primary = isControlled ? (value as string) : internalPrimary; const [linked, setLinked] = useState(true); const [stamp, setStamp] = useState(() => { const t = transform(defaultValue); return { text: t, gen: Array.from(t, () => 0), from: 0 }; }); const [live, setLive] = useState(""); const reducedMotion = useReducedMotion(); const stampGenRef = useRef(0); const prevPrimaryRef = useRef(primary); const uid = useId(); const primaryId = `${uid}-primary`; const derivedId = `${uid}-derived`; const hintId = `${uid}-hint`; const stampDerived = useCallback((next: string, full = false) => { setStamp((prev) => { const prefixLen = full ? 0 : commonPrefixLength(prev.text, next); stampGenRef.current += 1; const gen = stampGenRef.current; return { text: next, gen: Array.from(next, (_, i) => (i < prefixLen ? (prev.gen[i] ?? 0) : gen)), from: prefixLen, }; }); }, []); // Re-derive whenever the primary value actually changes while linked — // covers both the uncontrolled onChange path and an externally controlled // `value` update, without duplicating the derivation logic in either handler. useEffect(() => { if (!linked) { prevPrimaryRef.current = primary; return; } if (primary === prevPrimaryRef.current) return; prevPrimaryRef.current = primary; const next = transform(primary); stampDerived(next); onDerivedChange?.(next, true); // eslint-disable-next-line react-hooks/exhaustive-deps }, [primary, linked]); const handlePrimaryChange = (e: React.ChangeEvent) => { const next = e.target.value; if (!isControlled) setInternalPrimary(next); onValueChange?.(next); }; const handleFlimsyChange = (e: React.ChangeEvent) => { const next = e.target.value; setStamp((prev) => ({ ...prev, text: next })); if (linked) { setLinked(false); setLive(`Detached. ${derivedLabel} no longer follows ${label}.`); } onDerivedChange?.(next, false); }; const handleRelink = () => { const next = transform(primary); setLinked(true); stampDerived(next, true); setLive(`Relinked. ${derivedLabel} restored from ${label}.`); onDerivedChange?.(next, true); }; return (

{label}

{derivedLabel} {!linked && ( )}

{linked && ( )}

Auto-generated from {label}. Editing detaches it.

{live}

); } 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",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":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"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":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"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":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}],["$","div","ns-accent-hover",{"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":["--","ns-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0059d1"}]]}]]}],["$","$L67",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":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"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":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",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":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"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":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"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":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}],["$","div","color-ns-accent-hover",{"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":["--","color-ns-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent-hover)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/slug-field-mirror/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/slug-field-mirror.tsx"}],"className":"h-[70svh] min-h-80"}]]}]