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:T5d37,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties, ReactNode } from "react"; // --------------------------------------------------------------------------- // TonerFuseStreak — a loader / progress surface that "prints in" content the // way a laser printer images a page, rather than spinning or fading: charge, // a top-to-bottom expose/develop wipe, toner catching behind it, then a fuse // flash locking it down. Two real xerographic failure artifacts ride along // (source: standard charge/expose/develop/transfer/fuse cycle + print-shop // service literature) and ARE the identity, not garnish: // - edge deletion: fringing-field effects thin toner right at small-feature // boundaries (hairline rules, serifs) for the first 400ms after the wipe // passes, then it fills to full density. // - toner starvation: a large solid fill area locally depletes the toner // cloud faster than it replenishes, leaving a persistent lighter streak // band toward the trailing edge of the fill. // // Shape source: `children`, if passed, is mounted off-screen (visibility // hidden, never displayed) purely to donate a silhouette — text lines become // thin bars via Range.getClientRects() (exact per-line boxes, no manual // wrap math), leaf elements with a visible background/border/media tag // become filled blocks. No children -> a built-in placeholder (heading + // three text lines + one wide media block) that alone is enough to trigger // both artifacts, so this ships as `core` without ever requiring a caller // snapshot. The traced silhouette is rasterized ONCE per layout into a // luminance mask on an offscreen canvas, then downsampled to one toner cell // per ~3 mask px (grid: ~140 cells across the container's smaller // dimension) — everything the visible canvas draws is that per-cell grid, // never the real glyphs, so caller content never actually appears; only its // shape does. // // The wipe cadence (900ms) is deliberately decoupled from and far slower // than the real xerographic engine (>20ppm, well under a second per page) — // this is the ONE followable event per round-9 legibility rule, and 900ms // top-to-bottom is slow enough that a viewer's eye can track the wipe // position at any instant. // // Colour is --border (unresolved shape whisper) and --foreground (toned // ink and the luminance-only wipe/fuse highlights) only, read via // getComputedStyle(document.documentElement) at mount and re-read on a // MutationObserver watching documentElement's class — no paint before that // first read. --ns-accent never appears; this is a passive loading state // with no interaction. // --------------------------------------------------------------------------- export interface TonerFuseStreakProps { /** Real content used only to derive the printed silhouette's shape — never * displayed. Omit to use the built-in heading/text/media placeholder. */ children?: ReactNode; /** extra classes merged onto the rendered root element */ className?: string; /** inline styles merged onto the root element */ style?: CSSProperties; } type RGB = [number, number, number]; function parseColor(raw: string): RGB | null { const s = raw.trim(); if (s.startsWith("#")) { let hex = s.slice(1); if (hex.length === 3) hex = hex.split("").map((c) => c + c).join(""); if (hex.length < 6) return null; const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); return Number.isNaN(r + g + b) ? null : [r, g, b]; } const m = s.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/); return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null; } // deterministic per-cell/per-region hash — never Math.random, so the streak // layout a caller sees is reproducible across a rebuild with the same shape function hash01(n: number): number { const h = Math.sin(n * 12.9898 + 78.233) * 43758.5453; return h - Math.floor(h); } const CELLS_ACROSS = 140; // ~120-160 cells span the container's smaller dim const SS = 3; // mask supersample factor: one toner cell per ~3 mask px const WIPE_MS = 900; const HOLD_MS = 1500; const RESET_MS = 200; const CYCLE_MS = WIPE_MS + HOLD_MS + RESET_MS; // 2600 const RAMP_IN_MS = 150; // toner visibly "catching" behind the wipe line const EDGE_MS = 400; // edge-deletion under-tone window const EDGE_FILL_MS = 150; // then eases up to full density const STREAK_FADE_MS = 400; const FUSE_DELAY_MS = 220; // after the wipe completes const FUSE_SWEEP_MS = 300; const FUSE_DECAY_MS = 180; const FUSE_BRIGHTEN = 0.08; const WIPE_BAND_BOOST = 0.06; const EDGE_RADIUS = 2; // cells — "gradient over <2 cells" test window const FILL_THRESH = 0.6; // a cell counts as solid fill for region-finding const INK_THRESH = 0.15; // a cell counts as "has ink" at all const STARVE_WIDTH_FRAC = 0.18; // of the smaller grid dimension // most-structured non-t0 frame: full density, both artifacts settled, well // clear of the transient fuse flash (which decays by ~1600ms) const FREEZE_MS = 1700; interface StreakBand { x0: number; x1: number; y0: number; y1: number; reduction: number; // 0..1 opacity reduction at full fade-in } interface Mask { cols: number; rows: number; density: Float32Array; // 0..1 ink coverage per cell isEdge: Uint8Array; // 1 where a mask edge (gradient over <2 cells) sits bands: StreakBand[]; } function deriveMask(density: Float32Array, cols: number, rows: number): Mask { const isEdge = new Uint8Array(cols * rows); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const i = y * cols + x; if (density[i] <= INK_THRESH) continue; let edge = false; for (let dy = -EDGE_RADIUS; dy <= EDGE_RADIUS && !edge; dy++) { const ny = y + dy; if (ny < 0 || ny >= rows) continue; for (let dx = -EDGE_RADIUS; dx <= EDGE_RADIUS; dx++) { const nx = x + dx; if (nx < 0 || nx >= cols) continue; if (density[ny * cols + nx] <= INK_THRESH) { edge = true; break; } } } if (edge) isEdge[i] = 1; } } // flood-fill contiguous solid-fill regions (4-connectivity) to find // toner-starvation candidates const visited = new Uint8Array(cols * rows); const bands: StreakBand[] = []; const stackX = new Int32Array(cols * rows); const stackY = new Int32Array(cols * rows); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const start = y * cols + x; if (visited[start] || density[start] <= FILL_THRESH) continue; let sp = 0; stackX[sp] = x; stackY[sp] = y; sp++; visited[start] = 1; let minX = x, maxX = x, minY = y, maxY = y; const seed = start; while (sp > 0) { sp--; const cx = stackX[sp]; const cy = stackY[sp]; if (cx < minX) minX = cx; if (cx > maxX) maxX = cx; if (cy < minY) minY = cy; if (cy > maxY) maxY = cy; const neighbors: [number, number][] = [ [cx - 1, cy], [cx + 1, cy], [cx, cy - 1], [cx, cy + 1], ]; for (const [nx, ny] of neighbors) { if (nx < 0 || nx >= cols || ny < 0 || ny >= rows) continue; const ni = ny * cols + nx; if (visited[ni] || density[ni] <= FILL_THRESH) continue; visited[ni] = 1; stackX[sp] = nx; stackY[sp] = ny; sp++; } } const width = maxX - minX + 1; const smaller = Math.min(cols, rows); if (width >= STARVE_WIDTH_FRAC * smaller) { const h = maxY - minY + 1; const trailStart = minY + Math.round(0.7 * h); const trailEnd = maxY; const trailSpan = Math.max(1, trailEnd - trailStart + 1); const r1 = hash01(seed * 1.7 + 3.1); const r2 = hash01(seed * 2.3 + 9.7); const r3 = hash01(seed * 3.9 + 1.3); const r4 = hash01(seed * 5.1 + 6.6); const bandHeight = Math.max(1, Math.min(trailSpan, Math.round(1 + r1 * (trailSpan - 1)))); const bandY0 = trailStart + Math.floor(r2 * Math.max(0, trailSpan - bandHeight)); const bandW = Math.max(1, Math.round(width * (0.5 + r3 * 0.4))); const bandX0 = minX + Math.floor(r4 * Math.max(0, width - bandW)); bands.push({ x0: bandX0, x1: Math.min(maxX, bandX0 + bandW - 1), y0: bandY0, y1: Math.min(maxY, bandY0 + bandHeight - 1), reduction: 0.18 + hash01(seed * 7.7 + 2.2) * 0.12, }); } } } return { cols, rows, density, isEdge, bands }; } // Built-in placeholder: a heading bar, three text lines, one wide media // block — the media block alone clears the 18%-of-smaller-dimension // starvation threshold, so the component never depends on caller content. function placeholderDensity(cols: number, rows: number): Float32Array { const density = new Float32Array(cols * rows); const fillRect = (x0f: number, y0f: number, x1f: number, y1f: number) => { const x0 = Math.max(0, Math.floor(x0f * cols)); const x1 = Math.min(cols, Math.ceil(x1f * cols)); const y0 = Math.max(0, Math.floor(y0f * rows)); const y1 = Math.min(rows, Math.ceil(y1f * rows)); for (let y = y0; y < y1; y++) { for (let x = x0; x < x1; x++) density[y * cols + x] = 1; } }; fillRect(0.06, 0.08, 0.52, 0.15); // heading fillRect(0.06, 0.24, 0.9, 0.29); // text line 1 fillRect(0.06, 0.34, 0.82, 0.39); // text line 2 fillRect(0.06, 0.44, 0.66, 0.49); // text line 3 (short, paragraph end) fillRect(0.06, 0.58, 0.86, 0.92); // wide media block — starvation source return density; } // Rasterize `host`'s children into a cols x rows density grid. Text nodes // become thin bars from their exact per-line boxes (Range.getClientRects — // real wrap geometry, no layout simulation); leaf elements carrying a // visible fill (background, border, or media tag) become filled blocks. function domDensity(host: HTMLElement, hostRect: DOMRect, cols: number, rows: number): Float32Array | null { const maskW = cols * SS; const maskH = rows * SS; if (maskW <= 0 || maskH <= 0) return null; const off = document.createElement("canvas"); off.width = maskW; off.height = maskH; const octx = off.getContext("2d"); if (!octx) return null; const scale = maskW / Math.max(1, hostRect.width); octx.fillStyle = "#000"; let painted = false; const paintRect = (r: DOMRect) => { const x = (r.left - hostRect.left) * scale; const y = (r.top - hostRect.top) * scale; const w = r.width * scale; const h = r.height * scale; if (w <= 0 || h <= 0) return; octx.fillRect(x, y, w, h); painted = true; }; const walker = document.createTreeWalker(host, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT); let node: Node | null = walker.currentNode; while (node) { if (node.nodeType === Node.TEXT_NODE) { const text = node.textContent ?? ""; if (text.trim().length > 0) { const range = document.createRange(); range.selectNodeContents(node); const rects = range.getClientRects(); for (let i = 0; i < rects.length; i++) { const r = rects[i]; // a thin bar within the line box — cap-height-ish, trimmed short // of full width the way a set line of prose rarely fills to the // pixel — this is what donates the fine "serif" edge feature const y = r.top + r.height * 0.15; const h = r.height * 0.55; const w = r.width * 0.92; paintRect(new DOMRect(r.left, y, w, h)); } } } else if (node.nodeType === Node.ELEMENT_NODE) { const el = node as Element; if (el.children.length === 0) { const tag = el.tagName; const isMedia = tag === "IMG" || tag === "SVG" || tag === "CANVAS" || tag === "VIDEO"; let filled = isMedia; if (!filled) { const cs = getComputedStyle(el); const bg = parseColorAlpha(cs.backgroundColor); const borderW = parseFloat(cs.borderTopWidth) || 0; filled = bg > 0.05 || borderW > 0; } if (filled) { const r = el.getBoundingClientRect(); if (r.width > 0 && r.height > 0) paintRect(r); } } } node = walker.nextNode(); } if (!painted) return null; const img = octx.getImageData(0, 0, maskW, maskH).data; const density = new Float32Array(cols * rows); for (let cy = 0; cy < rows; cy++) { for (let cx = 0; cx < cols; cx++) { let sum = 0; for (let sy = 0; sy < SS; sy++) { const py = cy * SS + sy; for (let sx = 0; sx < SS; sx++) { const px = cx * SS + sx; sum += img[(py * maskW + px) * 4 + 3]; // alpha channel = coverage } } density[cy * cols + cx] = sum / (SS * SS * 255); } } return density; } function parseColorAlpha(raw: string): number { const m = raw.match(/rgba?$[^)]+,\s*([\d.]+)$/); if (m) return Number(m[1]); if (/^rgb\(/.test(raw)) return 1; return raw === "transparent" ? 0 : 1; } export function TonerFuseStreak({ children, className = "", style }: TonerFuseStreakProps) { const rootRef = useRef(null); const canvasRef = useRef(null); const measureRef = useRef(null); const rebuildRef = useRef<(() => void) | null>(null); useEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; const measure = measureRef.current; if (!root || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let disposed = false; const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; let fg: RGB | null = null; let border: RGB | null = null; let dark = true; const derive = () => { dark = document.documentElement.classList.contains("dark"); const cs = getComputedStyle(document.documentElement); fg = parseColor(cs.getPropertyValue("--foreground")) ?? fg; border = parseColor(cs.getPropertyValue("--border")) ?? border; }; derive(); let w = 0; let h = 0; let dpr = 1; let cellSize = 8; let cols = 0; let rows = 0; let mask: Mask | null = null; let raf = 0; let visible = true; let startedAt = performance.now(); const buildMask = () => { if (cols <= 0 || rows <= 0) { mask = null; return; } let density: Float32Array | null = null; if (measure && measure.childElementCount > 0) { const hostRect = root.getBoundingClientRect(); density = domDensity(measure, hostRect, cols, rows); } if (!density) density = placeholderDensity(cols, rows); mask = deriveMask(density, cols, rows); }; const draw = (nowMs: number) => { if (!fg || !border || !mask || w <= 0 || h <= 0) return; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); const elapsed = reduced ? FREEZE_MS : nowMs - startedAt; const t = ((elapsed % CYCLE_MS) + CYCLE_MS) % CYCLE_MS; const wipeProgress = Math.min(1, Math.max(0, t / WIPE_MS)); const wipeLineY = wipeProgress * h; const inReset = t >= WIPE_MS + HOLD_MS; const resetFrac = inReset ? (t - WIPE_MS - HOLD_MS) / RESET_MS : 0; const fullAlpha = dark ? 0.95 : 0.85; const { cols: c, rows: r, density, isEdge, bands } = mask; const buckets: (Path2D | null)[] = new Array(101).fill(null); const addCell = (alpha: number, cx: number, cy: number, size: number) => { if (alpha <= 0.003) return; const bi = Math.min(100, Math.max(1, Math.round(alpha * 100))); let path = buckets[bi]; if (!path) { path = new Path2D(); buckets[bi] = path; } path.rect(cx - size / 2, cy - size / 2, size, size); }; const cellDot = cellSize * 0.84; for (let cy = 0; cy < r; cy++) { const rowTop = cy * cellSize; const rowY = rowTop + cellSize / 2; for (let cx = 0; cx < c; cx++) { const d = density[cy * c + cx]; if (d <= 0.01) continue; const colX = cx * cellSize + cellSize / 2; const passed = rowTop < wipeLineY; const sincePass = passed ? wipeLineY - rowTop : -1; let alpha: number; if (!passed) { // un-toned: a whisper of the shape in --border, not invisible alpha = 0.04 * d; ctx.save(); ctx.fillStyle = `rgba(${border[0]},${border[1]},${border[2]},${alpha})`; ctx.fillRect(colX - cellDot / 2, rowY - cellDot / 2, cellDot, cellDot); ctx.restore(); continue; } // wipe passed this row's cadence-position ago: toner catches in, // then edge-deletion under-tones thin features, then a // toner-starvation streak (if any) fades its dip in and holds const rampIn = Math.min(1, sincePass / RAMP_IN_MS); let cellAlpha = d * fullAlpha * rampIn; const i = cy * c + cx; if (isEdge[i]) { const under = 0.15 + hash01(i * 4.13 + 0.7) * 0.1; // 15-25% let edgeFactor: number; if (sincePass < EDGE_MS) edgeFactor = 1 - under; else { const easeT = Math.min(1, (sincePass - EDGE_MS) / EDGE_FILL_MS); edgeFactor = 1 - under * (1 - easeT); } cellAlpha *= edgeFactor; } for (let b = 0; b < bands.length; b++) { const band = bands[b]; if (cx >= band.x0 && cx <= band.x1 && cy >= band.y0 && cy <= band.y1) { const fadeT = Math.min(1, sincePass / STREAK_FADE_MS); cellAlpha *= 1 - band.reduction * fadeT; break; } } // reset phase: fade this cycle's toned frame back to the un-toned // baseline before the next cycle's wipe begins at t=0 if (inReset) { const baseline = 0.04 * d; cellAlpha = cellAlpha + (baseline - cellAlpha) * resetFrac; } addCell(cellAlpha, colX, rowY, cellDot); } } ctx.fillStyle = `rgb(${fg[0]},${fg[1]},${fg[2]})`; for (let bi = 1; bi <= 100; bi++) { const path = buckets[bi]; if (!path) continue; ctx.globalAlpha = bi / 100; ctx.fill(path); } ctx.globalAlpha = 1; // the ONE followable event: a soft band riding the wipe line, ~6% // luminance over its surroundings, never --ns-accent if (!inReset && t < WIPE_MS) { const bandH = Math.max(cellSize * 2.5, h * 0.03); const grad = ctx.createLinearGradient(0, wipeLineY - bandH, 0, wipeLineY + bandH); grad.addColorStop(0, `rgba(${fg[0]},${fg[1]},${fg[2]},0)`); grad.addColorStop(0.5, `rgba(${fg[0]},${fg[1]},${fg[2]},${WIPE_BAND_BOOST})`); grad.addColorStop(1, `rgba(${fg[0]},${fg[1]},${fg[2]},0)`); ctx.fillStyle = grad; ctx.fillRect(0, wipeLineY - bandH, w, bandH * 2); } // fuse flash: one soft pass at the nip roller's implied contact line, // FUSE_DELAY_MS after the wipe completes, decaying over FUSE_DECAY_MS const fuseStart = WIPE_MS + FUSE_DELAY_MS; const sinceFuse = t - fuseStart; if (sinceFuse >= 0 && sinceFuse < FUSE_SWEEP_MS + FUSE_DECAY_MS) { const nipY = Math.min(1, sinceFuse / FUSE_SWEEP_MS) * h; const decayT = Math.max(0, sinceFuse - FUSE_SWEEP_MS) / FUSE_DECAY_MS; const intensity = FUSE_BRIGHTEN * (1 - Math.min(1, decayT)); if (intensity > 0.002) { const bandH = Math.max(cellSize * 4, h * 0.05); const grad = ctx.createLinearGradient(0, nipY - bandH, 0, nipY + bandH); grad.addColorStop(0, `rgba(${fg[0]},${fg[1]},${fg[2]},0)`); grad.addColorStop(0.5, `rgba(${fg[0]},${fg[1]},${fg[2]},${intensity})`); grad.addColorStop(1, `rgba(${fg[0]},${fg[1]},${fg[2]},0)`); ctx.fillStyle = grad; ctx.fillRect(0, Math.max(0, nipY - bandH), w, bandH * 2); } } }; const loop = (now: number) => { draw(now); if (!reduced && visible) raf = requestAnimationFrame(loop); else raf = 0; }; const wake = () => { if (raf === 0 && !reduced && visible) raf = requestAnimationFrame(loop); }; const resize = () => { const rect = root.getBoundingClientRect(); w = rect.width; h = rect.height; if (measure) measure.style.width = `${w}px`; dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.max(1, Math.round(w * dpr)); canvas.height = Math.max(1, Math.round(h * dpr)); const smaller = Math.min(w, h); cellSize = smaller > 0 ? smaller / CELLS_ACROSS : 8; cols = cellSize > 0 ? Math.max(1, Math.round(w / cellSize)) : 0; rows = cellSize > 0 ? Math.max(1, Math.round(h / cellSize)) : 0; buildMask(); draw(performance.now()); }; rebuildRef.current = () => { buildMask(); draw(performance.now()); }; resize(); if (!reduced) wake(); const ro = new ResizeObserver(resize); ro.observe(root); const mo = new MutationObserver(() => { derive(); draw(performance.now()); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const onReducedChange = () => { reduced = mq.matches; if (reduced) { cancelAnimationFrame(raf); raf = 0; draw(performance.now()); } else { startedAt = performance.now() - ((performance.now() - startedAt) % CYCLE_MS); wake(); } }; mq.addEventListener("change", onReducedChange); const onVisibility = () => { visible = document.visibilityState === "visible"; if (visible) wake(); else { cancelAnimationFrame(raf); raf = 0; } }; document.addEventListener("visibilitychange", onVisibility); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible) wake(); else { cancelAnimationFrame(raf); raf = 0; } }); io.observe(root); document.fonts.ready.then(() => { if (!disposed) resize(); }); return () => { disposed = true; cancelAnimationFrame(raf); ro.disconnect(); mo.disconnect(); io.disconnect(); mq.removeEventListener("change", onReducedChange); document.removeEventListener("visibilitychange", onVisibility); rebuildRef.current = null; }; }, []); // children changed: rebuild the silhouette once layout settles useEffect(() => { let raf1 = 0; let raf2 = 0; raf1 = requestAnimationFrame(() => { raf2 = requestAnimationFrame(() => rebuildRef.current?.()); }); return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); }; }, [children]); return (

); } TonerFuseStreak.displayName = "TonerFuseStreak"; export default TonerFuseStreak; 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/toner-fuse-streak/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/toner-fuse-streak.tsx"}],"className":"h-[70svh] min-h-80"}]]}]