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:T35db,"use client"; import { useEffect, useId, useRef, useState, type CSSProperties, } from "react"; // --------------------------------------------------------------------------- // LitmusWick — inline per-field validation where the field's bottom border // behaves like litmus paper. A validator either resolves synchronously // ("definitely wrong", fast decisive soak) or returns a Promise ("still // checking", slow tentative soak that pulses while pending). Either way the // error tint doesn't flash on as a flat colored border — it diffuses in from // the exact x-position of the character that broke the pattern (measured via // an off-screen mirror span) and, once fixed, wicks back out and converges // on that same point. Two registered custom properties (--validation-inline-wick-left/ // -right, percentages) drive the stop positions of the wick div's own // mask-image, so a CSS transition on those properties genuinely animates the // diffusion front with real easing rather than a border-color crossfade — // unregistered custom properties can't be transitioned at all, which is // exactly why @property is load-bearing here, not decorative. // // The wick is pure decoration (aria-hidden): the real, assistive-tech-facing // surface is a plain native with aria-invalid and an aria-describedby // message naming the position ("Character 4: space not allowed"), living in // one aria-live=polite paragraph that also carries async "still checking" / // resolution announcements. Keyboard flow is an untouched plain input — no // key interception anywhere. // // Deliberately unlike approval-inline-diff: this is per-field and positional (the tint // originates under the offending character and the field stays live/editable // the whole time), not a form-level approve/deny gate that collapses once // and never reopens. // --------------------------------------------------------------------------- export type LitmusOutcome = | { valid: true } | { valid: false; index: number; reason: string }; export type LitmusStatus = "idle" | "checking" | "valid" | "invalid"; export interface LitmusWickProps { /** field label, rendered above the input and bound to it via htmlFor */ label: string; /** name for the underlying ``, for native form submission */ name?: string; /** id for the underlying ``. Auto-generated when omitted. */ id?: string; /** placeholder text for the field */ placeholder?: string; /** uncontrolled initial value */ defaultValue?: string; /** controlled value; omit for uncontrolled */ value?: string; /** called on every keystroke with the raw input value */ onValueChange?: (value: string) => void; /** * Return synchronously for an instantly-known rule ("definitely wrong" — * fast, decisive diffusion) or return a Promise for anything that has to * ask elsewhere first (uniqueness, server-side rules — "still checking", * slower, tentative, pulsing diffusion until it settles). */ validate?: (value: string) => LitmusOutcome | Promise; /** ms after the last keystroke before validate runs. Default 260. */ debounceMs?: number; /** marks the underlying `` as `required` for native form validation */ required?: boolean; /** blocks the underlying `` */ disabled?: boolean; /** passed straight through to the underlying `` */ autoComplete?: string; /** extra classes merged onto the rendered root element */ className?: string; } // ease-out-expo-shaped — same curve approval-inline-diff's collapse and truncation-taper-fade's // spring both use, kept consistent across the registry rather than inventing // a new feel for the same "settle" grammar. const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; const CHECK_HALF_SPAN = 16; // % either side of origin while "still checking" function isPromiseLike(v: unknown): v is Promise { return ( !!v && (typeof v === "object" || typeof v === "function") && typeof (v as { then?: unknown }).then === "function" ); } // Measures where the offending character sits, in percent of the input's // own box, using a hidden mirror span that copies the input's real computed // font — the only reliable way to turn a character index into an x position // without a canvas. function measureOriginPercent( input: HTMLInputElement, mirror: HTMLSpanElement, text: string, index: number ): number { const cs = getComputedStyle(input); mirror.style.font = cs.font; mirror.style.letterSpacing = cs.letterSpacing; const clamped = Math.max(0, Math.min(index, text.length)); mirror.textContent = text.slice(0, clamped); const prefixWidth = mirror.offsetWidth; mirror.textContent = text.slice(0, clamped) + (text[clamped] ?? " "); const throughWidth = mirror.offsetWidth; const charWidth = Math.max(1, throughWidth - prefixWidth); const paddingLeft = parseFloat(cs.paddingLeft) || 0; const total = input.clientWidth || 1; const centerPx = paddingLeft + prefixWidth + charWidth / 2; return Math.max(0, Math.min(100, (centerPx / total) * 100)); } export function LitmusWick({ label, name, id, placeholder, defaultValue = "", value, onValueChange, validate, debounceMs = 260, required, disabled, autoComplete, className = "", }: LitmusWickProps) { const uid = useId(); const inputId = id ?? `litmus-${uid}`; const msgId = `litmus-msg-${uid}`; const inputRef = useRef(null); const mirrorRef = useRef(null); const requestIdRef = useRef(0); const debounceRef = useRef | null>(null); const isControlled = value !== undefined; const [inner, setInner] = useState(defaultValue); const current = isControlled ? (value as string) : inner; const [status, setStatus] = useState("idle"); const [message, setMessage] = useState(""); const [origin, setOrigin] = useState(50); useEffect(() => { return () => { if (debounceRef.current) clearTimeout(debounceRef.current); }; }, []); function settle( id: number, text: string, outcome: LitmusOutcome, wasAsync: boolean ) { // A newer keystroke already superseded this in-flight check — a stale // async result must never overwrite what the user is looking at now. if (id !== requestIdRef.current) return; if (outcome.valid) { setStatus("valid"); // Only the async path gets an explicit "it's fine" announcement — // that's the one case where the user was genuinely waiting on a // result. A sync rule quietly clearing on every valid keystroke would // just be aria-live noise while someone types normally. setMessage(wasAsync ? "Looks good." : ""); return; } const input = inputRef.current; const mirror = mirrorRef.current; if (input && mirror) { setOrigin(measureOriginPercent(input, mirror, text, outcome.index)); } setStatus("invalid"); setMessage(`Character ${outcome.index + 1}: ${outcome.reason}`); } function runValidate(text: string) { const id = ++requestIdRef.current; if (!validate) return; const result = validate(text); if (isPromiseLike(result)) { // Origin while pending: the end of what's currently typed — an async // check (uniqueness, server rule) judges the value as a whole, not one // character, so the tentative blot grows from the caret's neighborhood // rather than claiming to already know where a fault is. const input = inputRef.current; const mirror = mirrorRef.current; if (input && mirror) { setOrigin(measureOriginPercent(input, mirror, text, text.length)); } setStatus("checking"); setMessage("Checking…"); result.then( (o) => settle(id, text, o, true), () => settle( id, text, { valid: false, index: Math.max(0, text.length - 1), reason: "check failed" }, true ) ); } else { settle(id, text, result, false); } } function handleChange(next: string) { if (!isControlled) setInner(next); onValueChange?.(next); if (debounceRef.current) clearTimeout(debounceRef.current); if (next === "") { requestIdRef.current++; // invalidates any in-flight async check setStatus("idle"); setMessage(""); return; } debounceRef.current = setTimeout(() => runValidate(next), debounceMs); } const left = status === "invalid" ? 0 : status === "checking" ? Math.max(0, origin - CHECK_HALF_SPAN) : origin; const right = status === "invalid" ? 100 : status === "checking" ? Math.min(100, origin + CHECK_HALF_SPAN) : origin; const wickStyle = { "--validation-inline-wick-left": `${left}%`, "--validation-inline-wick-right": `${right}%`, backgroundColor: "var(--error, #ea001d)", } as CSSProperties; const messageStyle: CSSProperties | undefined = status === "invalid" ? { color: "var(--error, #ea001d)" } : undefined; return (

{label}

handleChange(e.target.value)} aria-invalid={status === "invalid"} aria-describedby={msgId} // `focus-visible:ring-*`, not `focus-visible:outline-*`: the previous // pair set `outline-none` (which is `outline-style: none`) and then // only a focus WIDTH and COLOR — never a style — so the outline had // nothing to draw and this input rendered no visible focus state at // all. It went unnoticed because the gate's interaction block only // looked for `button, a, [role=button]`, and this component exposes // neither, so focus was never checked here. Ring is what the rest of // the codebase uses and it composes with `outline-none`. className="w-full bg-transparent px-0 py-2 text-sm text-foreground outline-none placeholder:text-ns-muted disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ns-accent" /> {/* baseline border — the field's resting bottom edge */}

{/* the wick — decorative only, masked to the diffused span */}

{/* off-screen mirror: measures the x-position of a given character index against the input's real computed font. Never read by AT (empty at rest, visibility hidden, not part of layout flow). */}

{message}

); } 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","error",{"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":["--","error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ea001d"}]]}]]}],["$","$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"}]]}],["$","div","error",{"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":["--","error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ff6369"}]]}]]}],["$","$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)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/validation-inline-wick/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/validation-inline-wick.tsx"}],"className":"h-[70svh] min-h-80"}]]}]