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:T39ee,"use client"; import { useEffect, useRef } from "react"; import type { ReactNode } from "react"; // --------------------------------------------------------------------------- // ArcLadderClimb — a full-bleed section-divider background modelled on a // Jacob's ladder: two bare rails diverge upward at a fixed angle from a // narrow gap at the bottom-center. The field is always strongest at that // gap, so an arc always strikes there first; buoyancy plus the widening // rail geometry drags it upward, and the climbing gap eventually exceeds // what the "supply" can sustain, so the arc dies and a fresh one restrikes // at the base almost immediately. One continuous rAF loop drives a single // arc through a climbing/dark phase machine — never a per-frame random // reset — so the SAME cycle logic used for the live frame also produces the // reduced-motion freeze and survives a background tab's dropped frames by // catching up through however many completed phases elapsed, exactly like // plasma-filament-wander's advanceFilament. // // The arc's own polyline jitter is resampled from a hashed pseudo-random // function keyed on a 24Hz time-bucket (~41.7ms), not the 60Hz paint clock // — the round-9 aliasing lesson: a real HV arc flickers near mains // frequency, so it is deliberately decoupled from 1:1 frame-rate rendering // rather than driving the redraw off it. A short trail of 2-3 previously // sampled climb heights is kept alongside the live arc and drawn underneath // it at falling opacity, reading as heated air rather than a static rung. // --------------------------------------------------------------------------- const HALF_ANGLE_DEG = 7; const HALF_ANGLE_TAN = Math.tan((HALF_ANGLE_DEG * Math.PI) / 180); const BASE_GAP_FRAC = 0.014; // of minDim const CLIMB_START_PX = 4; // scaled const CLIMB_MAX_FRAC = 0.85; // of container height const CLIMB_EASE = 2; // easeInQuad const PERIOD_MIN_MS = 1600; const PERIOD_MAX_MS = 2200; const CLIMB_FRAC_OF_PERIOD = 0.78; const DARK_MIN_MS = 120; const DARK_MAX_MS = 220; const JITTER_BUCKET_MS = 1000 / 24; // 24Hz, decoupled from the 60Hz paint loop const JITTER_MIN_PX = 3; const JITTER_MAX_PX = 7; const VERTS_MIN = 5; const VERTS_MAX = 7; const TRAIL_SAMPLE_MS = 130; const TRAIL_MAX = 3; const TRAIL_FADE_MS = 400; const TRAIL_STEP_ALPHA = 0.55; // per trail segment const CORE_WIDTH_MIN_PX = 2; const CORE_WIDTH_MAX_PX = 3; const HALO_BLUR_PX = 6; const REF_DIM = 640; const SCALE_MIN = 0.6; const SCALE_MAX = 1.6; const STATIC_FREEZE_FRAC = 0.55; // reduced-motion: 55% climb height interface Tokens { fg: string; muted: string; } function readTokens(): Tokens | null { if (typeof document === "undefined") return null; const cs = getComputedStyle(document.documentElement); const fg = cs.getPropertyValue("--foreground").trim(); const muted = cs.getPropertyValue("--ns-muted").trim(); if (!fg || !muted) return null; // not loaded yet — no paint before this return { fg, muted }; } 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; }; } /** deterministic hashed pseudo-random in [-1, 1], keyed on rank + time-bucket + vertex — * gives a discretely-resampled jitter with no persisted per-frame state. */ function hashJitter(rank: number, bucket: number, vertex: number): number { let h = Math.imul((rank + 1) * 0x9e3779b9, 0x85ebca6b); h ^= Math.imul((bucket + vertex * 7349) ^ h, 0xc2b2ae35); h ^= h >>> 16; return ((h >>> 0) / 4294967296) * 2 - 1; } function easeInQuad(t: number): number { const c = Math.max(0, Math.min(1, t)); return c * c; } interface Geo { W: number; H: number; minDim: number; cx: number; scale: number; baseGapHalf: number; maxClimb: number; } function computeGeo(W: number, H: number): Geo { const minDim = Math.min(W, H); const scale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, minDim / REF_DIM)); return { W, H, minDim, cx: W / 2, scale, baseGapHalf: (minDim * BASE_GAP_FRAC) / 2, maxClimb: H * CLIMB_MAX_FRAC, }; } /** x-offset from center at a given climb height (distance risen from the base) */ function railOffsetAt(geo: Geo, ch: number): number { return geo.baseGapHalf + ch * HALF_ANGLE_TAN; } interface ArcState { phase: "climbing" | "dark"; phaseStartMs: number; phaseDurMs: number; vertCount: number; rank: number; // varies the jitter hash between successive arcs trail: { ch: number; capturedAt: number }[]; lastTrailSampleMs: number; } function randPeriod(rand: () => number) { return PERIOD_MIN_MS + rand() * (PERIOD_MAX_MS - PERIOD_MIN_MS); } function randDark(rand: () => number) { return DARK_MIN_MS + rand() * (DARK_MAX_MS - DARK_MIN_MS); } function randVerts(rand: () => number) { return VERTS_MIN + Math.floor(rand() * (VERTS_MAX - VERTS_MIN + 1)); } function buildArcState(rand: () => number): ArcState { return { phase: "climbing", phaseStartMs: 0, phaseDurMs: randPeriod(rand) * CLIMB_FRAC_OF_PERIOD, vertCount: randVerts(rand), rank: 0, trail: [], lastTrailSampleMs: -Infinity, }; } /** walks the arc's climbing/dark phase machine forward to nowMs, catching up * through as many completed phases as have elapsed — a fresh climb duration * or dark gap is only ever rolled at the instant the arc's OWN phase ends. */ function advanceArc(state: ArcState, nowMs: number, rand: () => number) { for (let guard = 0; guard < 64; guard++) { const phaseEndMs = state.phaseStartMs + state.phaseDurMs; if (nowMs < phaseEndMs) return; if (state.phase === "climbing") { state.phase = "dark"; state.phaseStartMs = phaseEndMs; state.phaseDurMs = randDark(rand); } else { state.phase = "climbing"; state.phaseStartMs = phaseEndMs; state.phaseDurMs = randPeriod(rand) * CLIMB_FRAC_OF_PERIOD; state.vertCount = randVerts(rand); state.rank += 1; } } } function climbHeightAt(geo: Geo, t: number): number { const eased = easeInQuad(t); return CLIMB_START_PX * geo.scale + (geo.maxClimb - CLIMB_START_PX * geo.scale) * eased; } function drawRails(ctx: CanvasRenderingContext2D, geo: Geo, tokens: Tokens) { const topOffset = railOffsetAt(geo, geo.H); const baseOffset = geo.baseGapHalf; ctx.save(); ctx.strokeStyle = tokens.muted; ctx.lineWidth = 1.25 * geo.scale; ctx.lineCap = "round"; ctx.globalAlpha = 0.8; ctx.beginPath(); ctx.moveTo(geo.cx - baseOffset, geo.H); ctx.lineTo(geo.cx - topOffset, 0); ctx.moveTo(geo.cx + baseOffset, geo.H); ctx.lineTo(geo.cx + topOffset, 0); ctx.stroke(); ctx.restore(); } function arcVertices(geo: Geo, ch: number, vertCount: number, rank: number, bucket: number, jittering: boolean) { const y = geo.H - ch; const halfSpan = railOffsetAt(geo, ch); const leftX = geo.cx - halfSpan; const rightX = geo.cx + halfSpan; const jitterMag = (JITTER_MIN_PX + ((rank * 0.61803) % 1) * (JITTER_MAX_PX - JITTER_MIN_PX)) * geo.scale; const pts: { x: number; y: number }[] = []; for (let i = 0; i < vertCount; i++) { const t = i / (vertCount - 1); const x = leftX + (rightX - leftX) * t; if (!jittering || i === 0 || i === vertCount - 1) { pts.push({ x, y }); continue; } const taper = Math.sin(Math.PI * t); // pinned at both rail contact points const j = hashJitter(rank, bucket, i) * jitterMag * taper; pts.push({ x, y: y + j }); } return pts; } function drawArcPath(ctx: CanvasRenderingContext2D, geo: Geo, tokens: Tokens, pts: { x: number; y: number }[], alpha: number, withHalo: boolean) { const first = pts[0]; if (!first) return; ctx.save(); ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.strokeStyle = tokens.fg; ctx.globalAlpha = alpha; if (withHalo) { ctx.shadowColor = tokens.fg; ctx.shadowBlur = HALO_BLUR_PX * geo.scale; } ctx.lineWidth = (CORE_WIDTH_MIN_PX + ((geo.scale + 0.37) % 1) * (CORE_WIDTH_MAX_PX - CORE_WIDTH_MIN_PX)) * geo.scale; ctx.beginPath(); ctx.moveTo(first.x, first.y); for (let i = 1; i < pts.length; i++) { const p = pts[i]; if (p) ctx.lineTo(p.x, p.y); } ctx.stroke(); ctx.restore(); } export interface ArcLadderClimbProps { /** content rendered over the field (headline, section label, etc.) */ children?: ReactNode; /** extra classes merged onto the rendered root element */ className?: string; } export function ArcLadderClimb({ children, className = "" }: ArcLadderClimbProps) { const rootRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; if (!root || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const seed = 0x4c1b7a; const rand = mulberry32(seed ^ 0x2545f4); let disposed = false; let tokens: Tokens | null = null; let dpr = 1; let geo: Geo = computeGeo(1, 1); let sized = false; let visible = true; let state: ArcState = buildArcState(rand); let startMs = 0; let raf = 0; let tokenWaitRaf = 0; const fitCanvas = () => { canvas.width = Math.max(1, Math.round(geo.W * dpr)); canvas.height = Math.max(1, Math.round(geo.H * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; const render = (nowMs: number) => { if (!tokens || !sized) return; advanceArc(state, nowMs, rand); ctx.clearRect(0, 0, geo.W, geo.H); drawRails(ctx, geo, tokens); const bucket = Math.floor(nowMs / JITTER_BUCKET_MS); const climbing = state.phase === "climbing"; const elapsed = nowMs - state.phaseStartMs; const liveCh = climbing ? climbHeightAt(geo, elapsed / state.phaseDurMs) : geo.maxClimb; if (climbing && nowMs - state.lastTrailSampleMs >= TRAIL_SAMPLE_MS) { state.trail.push({ ch: liveCh, capturedAt: nowMs }); if (state.trail.length > TRAIL_MAX) state.trail.shift(); state.lastTrailSampleMs = nowMs; } // afterglow trail: older samples first, so the live arc paints last (on top) for (let i = 0; i < state.trail.length; i++) { const s = state.trail[i]; if (!s) continue; const age = nowMs - s.capturedAt; if (age >= TRAIL_FADE_MS || age < 0) continue; const ageAlpha = 1 - age / TRAIL_FADE_MS; const rankAlpha = Math.pow(TRAIL_STEP_ALPHA, state.trail.length - i); const pts = arcVertices(geo, s.ch, state.vertCount, state.rank, bucket, true); drawArcPath(ctx, geo, tokens, pts, ageAlpha * rankAlpha * 0.9, false); } if (climbing) { const pts = arcVertices(geo, liveCh, state.vertCount, state.rank, bucket, true); drawArcPath(ctx, geo, tokens, pts, 0.95, true); } }; const resizeAll = () => { if (!tokens) return; const rect = root.getBoundingClientRect(); if (rect.width < 4 || rect.height < 4) { sized = false; return; } dpr = Math.min(window.devicePixelRatio || 1, 2); geo = computeGeo(rect.width, rect.height); fitCanvas(); sized = true; }; const loop = (nowRaf: number) => { if (disposed) return; if (!visible) { raf = 0; // IntersectionObserver re-arms this on re-entering view return; } raf = requestAnimationFrame(loop); if (!sized || !tokens) return; if (startMs === 0) startMs = nowRaf; render(nowRaf - startMs); }; const buildReducedFrame = () => { if (!tokens || !sized) return; ctx.clearRect(0, 0, geo.W, geo.H); drawRails(ctx, geo, tokens); const ch = geo.maxClimb * STATIC_FREEZE_FRAC; const vertCount = VERTS_MIN + Math.floor((VERTS_MAX - VERTS_MIN) / 2); // static afterglow: two fixed steps below the frozen arc, no timers — // jitter uses a fixed bucket (0) so the shape is deterministic and // never redrawn, but still visibly jagged rather than a flat line. const ghost1 = arcVertices(geo, ch * 0.86, vertCount, 1, 0, true); const ghost2 = arcVertices(geo, ch * 0.7, vertCount, 2, 0, true); drawArcPath(ctx, geo, tokens, ghost2, 0.16, false); drawArcPath(ctx, geo, tokens, ghost1, 0.32, false); const live = arcVertices(geo, ch, vertCount, 0, 0, true); drawArcPath(ctx, geo, tokens, live, 0.95, true); }; let started = false; const kick = () => { if (started || disposed || !tokens || !sized) return; started = true; if (reduced) { buildReducedFrame(); return; // no rAF loop, no timers, no observers driving motion } raf = requestAnimationFrame(loop); }; const start = () => { if (disposed) return; tokens = readTokens(); if (!tokens) { tokenWaitRaf = requestAnimationFrame(start); return; } resizeAll(); kick(); }; const ro = new ResizeObserver(() => { if (!tokens) return; resizeAll(); if (reduced) buildReducedFrame(); kick(); }); ro.observe(root); const mo = new MutationObserver(() => { tokens = readTokens(); if (tokens) { resizeAll(); if (reduced) buildReducedFrame(); kick(); } }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const io = new IntersectionObserver((entries) => { const wasVisible = visible; visible = entries[0]?.isIntersecting ?? true; if (visible && !wasVisible && !reduced && tokens && !raf) { tokens = readTokens() ?? tokens; // pick up any theme flip that happened while hidden resizeAll(); raf = requestAnimationFrame(loop); } }); io.observe(root); start(); return () => { disposed = true; cancelAnimationFrame(raf); cancelAnimationFrame(tokenWaitRaf); ro.disconnect(); mo.disconnect(); io.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

); } 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/loud/arc-ladder-climb/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/arc-ladder-climb.tsx"}],"className":"h-[70svh] min-h-80"}]]}]