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:T2d24,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // GlyphScrubTicker — a marquee that is an instrument, not a loop. Unlike a // plain auto-scrolling ticker, the tape is GRABBABLE: pointerdown+drag scrubs // it directly under the cursor (1:1, no easing while held), release throws it // with momentum that decays under friction, and — the mechanic no sibling // ticker has — per-character LEGIBILITY IS A FUNCTION OF INSTANTANEOUS SPEED. // Below a resolve threshold (ambient auto-scroll speed, and the tail of every // fling) each character renders its real glyph. Above it (an active scrub or // the fast part of a fling) visible cells swap to a churning noise charset, // re-rolled every couple of frames — the tape reads as blurred motion, then // snaps back into focus the instant it slows down. One direct-DOM rAF loop // drives position + per-cell textContent; no React state on the hot path. // The real string is always exposed via aria-label per item (role=listitem, // roving tabindex); the glyph cells themselves are aria-hidden, so a screen // reader always hears the resolved value regardless of what's on screen. // --------------------------------------------------------------------------- export interface GlyphScrubTickerProps { /** items rendered in order, looped end to end */ items: string[]; /** glyph placed between items, including at the wrap seam */ separator?: string; /** ambient auto-scroll speed in px/s while untouched and unpaused */ speed?: number; /** px/s above which cells blur into noise glyphs (ambient speed should sit under this) */ resolveThreshold?: number; /** extra classes merged onto the rendered root element */ className?: string; } const NOISE_CHARSET = "░▒▓#%&@*+=-:."; const FRICTION = 0.94; // per-frame velocity decay after release (~60fps) const MIN_FLING_V = 40; // px/s below which a release doesn't fling at all const CELL_PROBE_CHAR = "0"; export function GlyphScrubTicker({ items, separator = "/", speed = 34, resolveThreshold = 260, className = "", }: GlyphScrubTickerProps) { const uid = useId().replace(/:/g, ""); const containerRef = useRef(null); const trackRef = useRef(null); const probeRef = useRef(null); const [reduced, setReduced] = useState(false); const [paused, setPaused] = useState(false); const tape = useMemo(() => { if (items.length === 0) return ""; return ` ${items.join(` ${separator} `)} ${separator} `; }, [items, separator]); const label = useMemo(() => items.join(", "), [items]); const pausedRef = useRef(paused); pausedRef.current = paused; 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); }, []); useEffect(() => { const container = containerRef.current; const track = trackRef.current; const probe = probeRef.current; if (!container || !track || !probe || tape.length === 0) return; let cellWidth = probe.getBoundingClientRect().width || 8; let cells: HTMLSpanElement[] = []; let offset = 0; // fractional tape position, in characters let velocity = 0; // characters/sec, signed (negative = feeding forward) let raf = 0; let last = 0; let dragging = false; let dragLastX = 0; let dragLastT = 0; let hovering = false; let focused = false; const charAt = (absIndex: number) => tape[((Math.floor(absIndex) % tape.length) + tape.length) % tape.length] ?? " "; const rebuild = () => { cellWidth = probe.getBoundingClientRect().width || cellWidth; const w = container.getBoundingClientRect().width; const count = Math.max(1, Math.ceil(w / cellWidth) + 1); track.textContent = ""; cells = []; for (let i = 0; i < count; i++) { const span = document.createElement("span"); span.setAttribute("aria-hidden", "true"); span.style.display = "inline-block"; span.style.width = `${cellWidth}px`; span.style.textAlign = "center"; span.style.flexShrink = "0"; track.appendChild(span); cells.push(span); } paint(0); }; // paints every visible cell from the current offset + a resolved-vs-noise // decision driven by |speedPxPerSec|. Cells always keep a stable-width // monospace glyph (real char or a noise charset member) — never blank — // so nothing reflows. const paint = (speedPxPerSec: number) => { const blurred = Math.abs(speedPxPerSec) > resolveThreshold; for (let i = 0; i < cells.length; i++) { const idx = offset + i; if (blurred) { cells[i]!.textContent = NOISE_CHARSET[Math.floor(Math.random() * NOISE_CHARSET.length)]!; } else { cells[i]!.textContent = charAt(idx); } } }; if (reduced) { rebuild(); const ro = new ResizeObserver(rebuild); ro.observe(container); return () => ro.disconnect(); } rebuild(); const loop = (now: number) => { const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60; last = now; if (dragging) { // 1:1 scrub — position and velocity both come straight from pointer // deltas in onMove; nothing to integrate here. } else { const stopped = pausedRef.current || hovering || focused; const target = stopped ? 0 : -speed / cellWidth; if (Math.abs(velocity) > MIN_FLING_V / cellWidth || Math.abs(target) > 0.001) { // momentum decay toward the ambient target speed velocity += (target - velocity) * (1 - Math.pow(FRICTION, dt * 60)); } else { velocity = target; } offset += velocity * dt; } paint(velocity * cellWidth); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); const clientXToCharDelta = (dx: number) => -dx / cellWidth; const onPointerDown = (e: PointerEvent) => { dragging = true; dragLastX = e.clientX; dragLastT = performance.now(); velocity = 0; container.setPointerCapture(e.pointerId); }; const onPointerMove = (e: PointerEvent) => { if (!dragging) return; const now = performance.now(); const dtMs = Math.max(1, now - dragLastT); const dx = e.clientX - dragLastX; const charDelta = clientXToCharDelta(dx); offset += charDelta; velocity = (charDelta / dtMs) * 1000; // chars/sec, feeds the resolve check dragLastX = e.clientX; dragLastT = now; paint(velocity * cellWidth); }; const endDrag = () => { if (!dragging) return; dragging = false; if (Math.abs(velocity * cellWidth) < MIN_FLING_V) velocity = 0; }; container.addEventListener("pointerdown", onPointerDown); container.addEventListener("pointermove", onPointerMove); container.addEventListener("pointerup", endDrag); container.addEventListener("pointercancel", endDrag); // Named, not inline: this effect re-runs on every `speed` / // `resolveThreshold` / reduced-motion change, and anonymous handlers // cannot be removed below — a consumer driving `speed` from state piled // four more onto the same node per change. const onPointerEnter = () => { hovering = true; }; const onPointerLeave = () => { hovering = false; }; const onFocusIn = () => { focused = true; }; const onFocusOut = () => { focused = false; }; container.addEventListener("pointerenter", onPointerEnter); container.addEventListener("pointerleave", onPointerLeave); container.addEventListener("focusin", onFocusIn); container.addEventListener("focusout", onFocusOut); // Arrow keys nudge the scrub position directly (fast enough repeats // briefly cross the resolve threshold so keyboard users can feel the // same blur-then-settle the pointer path gets). const onKeyDown = (e: KeyboardEvent) => { if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return; e.preventDefault(); const dir = e.key === "ArrowRight" ? 1 : -1; offset += dir * 3; velocity = dir * (resolveThreshold / cellWidth) * 1.4; paint(velocity * cellWidth); }; container.addEventListener("keydown", onKeyDown); const ro = new ResizeObserver(rebuild); ro.observe(container); return () => { cancelAnimationFrame(raf); ro.disconnect(); container.removeEventListener("pointerdown", onPointerDown); container.removeEventListener("pointermove", onPointerMove); container.removeEventListener("pointerup", endDrag); container.removeEventListener("pointercancel", endDrag); container.removeEventListener("keydown", onKeyDown); container.removeEventListener("pointerenter", onPointerEnter); container.removeEventListener("pointerleave", onPointerLeave); container.removeEventListener("focusin", onFocusIn); container.removeEventListener("focusout", onFocusOut); }; }, [tape, speed, resolveThreshold, reduced]); return (

{reduced ? (

{items.map((it, i) => ( {it} ))}

) : (

)}

); } 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-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"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null,["$","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-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/marquee-ticker-glyph/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/marquee-ticker-glyph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]