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:T2c74,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // ScrollFineRegister — a divider/footer band whose "content is streaming // past" cue is built from the two cooperating registers a tilemap PPU // (NES/SNES-class hardware) actually scrolls with, not a plain translateX // tween. A COARSE register steps the visible window one whole tile at a // time by swapping which tile glyph is addressed; a FINE register sweeps // 0..cellPx-1 sub-pixel offsets within the current tile before the coarse // register ticks over. What reads as smooth pixel-by-pixel motion is a // sawtooth (fine ramping up then snapping to 0) gating a stepped counter // (coarse incrementing once per sawtooth cycle) — and both registers are // exposed as a live numeric readout so the mechanism is legible, not just // its resulting motion. // // One totalSteps integer (in px) is the single source of truth: fine = // totalSteps % cellPx, coarse = floor(totalSteps / cellPx) % tileCount. A // fixed-rate accumulator ticks totalSteps by 1 every (480ms / cellPx) — // so a full tile's worth of fine steps always takes exactly 480ms, // regardless of how many discrete px steps cellPx works out to. // // tileCount (24-40) is the COARSE WRAP PERIOD — the pattern of tile // glyphs repeats every tileCount cells and totalSteps wraps at // tileCount*cellPx. That is deliberately kept separate from how many // cells are actually rendered: renderCount = ceil(width/cellPx) + // tileCount cells are painted (glyph = pattern[j % tileCount]), a // full period wider than the viewport, so the strip never runs dry as // totalSteps sweeps across an entire wrap cycle — a doubled-strip trick // only covers a translate range up to one strip width, this covers the // whole period. // // The glyph sequence itself is not a short repeating ramp: a fixed-seed // mulberry32 PRNG draws `tileCount` glyph choices once per build, so the // visual texture's true repeat period is the full tileCount*cellPx wrap // (11.5-19.2s), not some short arithmetic cycle — otherwise the strip // would loop every couple of seconds while only the readout kept counting. // // A single marker — an absolutely positioned overlay, not a strip cell — // tracks `MARKER_LEAD` tiles ahead of the live coarse register at screen // x = MARKER_LEAD*cellPx - fine, so it visibly slides left by cellPx px // over the 480ms sweep and snaps back at the next coarse tick: the // sawtooth made literally visible on the one thing a viewer's eye // follows. Drawn as a full-height --foreground bracket (border-left + // border-right only, cellPx wide) so it stays legible on top of every // glyph underneath it, including the solid block. // // Geometry is derived from the container's smaller dimension (almost // always height, for a horizontal band): cellPx = clamp(round(minDim/24), // 8, 16). Translation is written directly to the track's transform and // the readout's textContent every tick — no React state on the hot path. // Pure DOM, zero colour literals: ink is `text-foreground` / // `text-ns-muted`; `border-border` is used only for the band's own // dividing rules, never as the marker's paint. // --------------------------------------------------------------------------- export interface ScrollFineRegisterProps { /** extra classes merged onto the rendered root element */ className?: string; } const MIN_CELL = 8; const MAX_CELL = 16; const CELL_DIVISOR = 24; const SWEEP_MS = 480; // one full fine-register sweep (0..cellPx-1) = one coarse tick const MIN_TILES = 24; const MAX_TILES = 40; const MARKER_LEAD = 4; // marker sits this many tiles ahead of the coarse index const FROZEN_COARSE_FALLBACK = 12; // reduced-motion freeze target: mid-strip, tile-aligned // A small "tile ROM" restricted to shading blocks — these are solid // rectangles in every monospace face, so they read cleanly as tile // pixels even at an 8px cell where a glyph with descenders/gaps would not. const GLYPHS = "░▒▓█"; function mulberry32(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } /** One glyph choice per tile index, 0..tileCount-1 — the true visual * repeat period, not a short arithmetic ramp. */ function buildPattern(tileCount: number): string[] { const rand = mulberry32(0x5f3a11); const pattern: string[] = []; for (let i = 0; i < tileCount; i++) { pattern.push(GLYPHS[Math.floor(rand() * GLYPHS.length)]!); } return pattern; } export function ScrollFineRegister({ className = "" }: ScrollFineRegisterProps) { const rootRef = useRef(null); const trackRef = useRef(null); const markerRef = useRef(null); const probeRef = useRef(null); const coarseRef = useRef(null); const fineRef = useRef(null); useEffect(() => { const root = rootRef.current; const track = trackRef.current; const marker = markerRef.current; const probe = probeRef.current; if (!root || !track || !marker || !probe) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let cellPx = MIN_CELL; let tileCount = MIN_TILES; // coarse wrap period, in tiles let renderCount = MIN_TILES; // cells actually painted, >= period + viewport let stepMs = SWEEP_MS / cellPx; let totalSteps = 0; // px units; fine = totalSteps % cellPx, coarse = floor(totalSteps/cellPx) % tileCount let acc = 0; let last = 0; let raf = 0; let visible = true; let pattern: string[] = []; const paint = () => { const fine = totalSteps % cellPx; const coarse = Math.floor(totalSteps / cellPx) % tileCount; track.style.transform = `translate3d(${-totalSteps}px, 0, 0)`; marker.style.width = `${cellPx}px`; marker.style.transform = `translate3d(${MARKER_LEAD * cellPx - fine}px, 0, 0)`; marker.style.visibility = "visible"; if (coarseRef.current) coarseRef.current.textContent = String(coarse).padStart(2, "0"); if (fineRef.current) fineRef.current.textContent = String(fine); }; // -- (re)build the tile strip for the current geometry. renderCount is // one full coarse period wider than the viewport so every reachable // translate offset within a period still fully covers the track. ------ const build = () => { const rect = root.getBoundingClientRect(); const minDim = Math.min(rect.width, rect.height); cellPx = Math.min(MAX_CELL, Math.max(MIN_CELL, Math.round(minDim / CELL_DIVISOR))); stepMs = SWEEP_MS / cellPx; const visibleTiles = Math.ceil(rect.width / Math.max(1, cellPx)); tileCount = Math.min(MAX_TILES, Math.max(MIN_TILES, visibleTiles)); renderCount = visibleTiles + tileCount + MARKER_LEAD + 1; pattern = buildPattern(tileCount); // measure the real glyph advance at this cellPx (monospace advance // is well under 1em) and scale the font so a glyph's rendered width // fills the cell — otherwise adjacent tiles read as separated bars, // not a contiguous tilemap. probe.style.fontSize = `${cellPx}px`; const advance = probe.getBoundingClientRect().width || cellPx * 0.6; const glyphFontPx = Math.max(6, Math.round(cellPx * Math.min(2.5, cellPx / advance))); track.textContent = ""; for (let j = 0; j < renderCount; j++) { const span = document.createElement("span"); span.setAttribute("aria-hidden", "true"); span.style.display = "inline-flex"; span.style.alignItems = "center"; span.style.justifyContent = "center"; span.style.width = `${cellPx}px`; span.style.height = `${cellPx}px`; span.style.overflow = "hidden"; span.style.fontSize = `${glyphFontPx}px`; span.style.lineHeight = "1"; span.style.flexShrink = "0"; span.style.boxSizing = "border-box"; span.className = "text-foreground"; span.textContent = pattern[j % tileCount]!; track.appendChild(span); } totalSteps = ((totalSteps % (tileCount * cellPx)) + tileCount * cellPx) % (tileCount * cellPx); }; const freeze = () => { const frozenCoarse = Math.min(tileCount - 1, FROZEN_COARSE_FALLBACK); totalSteps = frozenCoarse * cellPx; // fine === 0 exactly — a tile boundary flush with the viewport edge paint(); }; const loop = (now: number) => { raf = 0; if (!visible) return; if (last === 0) last = now; const dt = Math.min(100, now - last); last = now; acc += dt; while (acc >= stepMs) { acc -= stepMs; totalSteps += 1; if (totalSteps >= tileCount * cellPx) totalSteps -= tileCount * cellPx; } paint(); raf = requestAnimationFrame(loop); }; build(); if (reduced) { freeze(); } else { // start a few steps into the sweep so t0 already reads as // "mid-motion", not a just-ticked-over frame. totalSteps = 3; last = 0; raf = requestAnimationFrame(loop); } let resizeTimer = 0; const onResize = () => { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(() => { if (disposed) return; build(); if (reduced) freeze(); else paint(); }, 120); }; const ro = new ResizeObserver(onResize); ro.observe(root); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced && !raf) { last = 0; raf = requestAnimationFrame(loop); } }); io.observe(root); document.fonts?.ready?.then(() => { if (!disposed) onResize(); }); return () => { disposed = true; cancelAnimationFrame(raf); window.clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); }; }, []); return (

C 00 F 0

); } 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"}]]}]]}],["$","$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)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/scroll-fine-register/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/scroll-fine-register.tsx"}],"className":"h-[70svh] min-h-80"}]]}]