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:T3e88,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // GlutenWindowpane — the baker's windowpane test as a background-task // progress indicator: a dough membrane is stretched, held, and released on a // repeating 4-cycle knead loop, going from opaque/jittery-stranded (cycle 1) // to translucent/straight-stranded (cycle 4) as kneading "develops" the // gluten. Strand geometry (count, angular jitter off the horizontal stretch // axis) and membrane translucency are fixed per cycle — what animates within // a cycle is the stretch itself: scaleX 1 -> 1.6 over 1800ms, a 600ms hold // at full stretch, an 800ms snap-back, 3200ms per cycle. After cycle 4 the // membrane rests fully developed for 1500ms before a fresh dough test // begins (full loop 14.3s). Translucency is genuine canvas alpha: the // membrane's own dough-tinted fill is painted at (1 - translucency) opacity // over a transparent canvas, so the real page --background underneath shows // through more as kneading progresses — no painted background layer. The // radial "light passes through most" highlight is the same fill pushed // toward whichever of --background/--foreground is the lighter of the two // (computed by luminance, never hardcoded), so it reads as a bright glow in // dark theme and, in light theme, as the surrounding membrane leaning // slightly toward the darker token so the near-white highlight still has // something to contrast against. // --------------------------------------------------------------------------- type RGB = [number, number, number]; function parseColor(raw: string): RGB | null { const probe = parseColor.ctx ?? (parseColor.ctx = document.createElement("canvas").getContext("2d")); if (!probe) return null; probe.fillStyle = "#000"; try { probe.fillStyle = raw; } catch { return null; } const m = probe.fillStyle.match(/\d+/g); if (!m || m.length < 3) return null; return [Number(m[0]), Number(m[1]), Number(m[2])]; } parseColor.ctx = null as CanvasRenderingContext2D | null; function luminance([r, g, b]: RGB): number { return 0.2126 * r + 0.7152 * g + 0.0722 * b; } function mix(a: RGB, b: RGB, t: number): RGB { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; } function rgbaStr(c: RGB, a: number): string { return `rgba(${c[0].toFixed(0)},${c[1].toFixed(0)},${c[2].toFixed(0)},${a.toFixed(3)})`; } 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; }; } const easeInOut = (t: number) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2); interface CycleParams { count: number; jitterDeg: number; alpha: number; } // real numbers: strand count 8 -> 14 -> 22 -> 34, jitter +-35deg -> +-4deg, // membrane alpha (translucency, 0 = opaque) 0.05 -> 0.62 const CYCLES: CycleParams[] = [ { count: 8, jitterDeg: 35, alpha: 0.05 }, { count: 14, jitterDeg: 22, alpha: 0.18 }, { count: 22, jitterDeg: 11, alpha: 0.35 }, { count: 34, jitterDeg: 4, alpha: 0.62 }, ]; const STRETCH_MS = 1800; const HOLD_MS = 600; const SNAP_MS = 800; const CYCLE_MS = STRETCH_MS + HOLD_MS + SNAP_MS; // 3200 const POST_REST_MS = 1500; const LOOP_MS = CYCLE_MS * CYCLES.length + POST_REST_MS; // 14300 const MAX_STRANDS = CYCLES[CYCLES.length - 1]!.count; const MEMBRANE_TINT = 0.22; // how far the dough fill leans off the lighter token toward the darker one (by luminance, not a fixed --background/--foreground direction) // Midpoint-subdivision activation order over the 34 strand slots: any // prefix of this order is itself evenly spread across the full slot range, // so raising strand count only ever ADDS a strand between two that already // exist — a slot, once occupied, never moves or vacates. This is what lets // a strand keep its own jitter/position identity as count climbs within a // stretch (5 -> 34 across the whole loop) instead of every strand // reshuffling on each integer step. function buildSlotOrder(n: number): number[] { const order = [0, n - 1]; const queue: [number, number][] = [[0, n - 1]]; while (queue.length) { const [lo, hi] = queue.shift()!; if (hi - lo < 2) continue; const mid = (lo + hi) >> 1; order.push(mid); queue.push([lo, mid], [mid, hi]); } return order; } const SLOT_ORDER = buildSlotOrder(MAX_STRANDS); interface FrameState { count: number; jitterDeg: number; alpha: number; scaleX: number; thin: number; // 0..1, how "thinned" (stretched) the membrane is right now } // a synthetic "cycle -1" baseline the first cycle's stretch departs from, so // cycle 1 also shows a within-cycle develop, not just a pop to its target const BASELINE: CycleParams = { count: 5, jitterDeg: 45, alpha: 0.02 }; function lerp(a: number, b: number, t: number): number { return a + (b - a) * t; } function frameState(tMs: number): FrameState { const loopT = ((tMs % LOOP_MS) + LOOP_MS) % LOOP_MS; if (loopT >= CYCLE_MS * CYCLES.length) { // post-cycle-4 rest: fully developed, relaxed, no active stretch const p = CYCLES[CYCLES.length - 1]!; return { count: p.count, jitterDeg: p.jitterDeg, alpha: p.alpha * 0.85, scaleX: 1, thin: 0 }; } const cycleIdx = Math.min(CYCLES.length - 1, Math.floor(loopT / CYCLE_MS)); const local = loopT - cycleIdx * CYCLE_MS; const from = cycleIdx === 0 ? BASELINE : CYCLES[cycleIdx - 1]!; const to = CYCLES[cycleIdx]!; let scaleX: number; let thin: number; // develop: the ONE thing a viewer follows — opaque/jittery -> translucent/ // aligned across the 1800ms stretch, holding its arrival through hold+snap let develop: number; if (local < STRETCH_MS) { const f = easeInOut(local / STRETCH_MS); scaleX = 1 + 0.6 * f; thin = f; develop = f; } else if (local < STRETCH_MS + HOLD_MS) { scaleX = 1.6; thin = 1; develop = 1; } else { const f = easeInOut((local - STRETCH_MS - HOLD_MS) / SNAP_MS); scaleX = 1.6 - 0.6 * f; thin = 1 - f; develop = 1; } const count = lerp(from.count, to.count, develop); const jitterDeg = lerp(from.jitterDeg, to.jitterDeg, develop); const alpha = lerp(from.alpha, to.alpha, develop) * (0.85 + 0.15 * thin); return { count, jitterDeg, alpha, scaleX, thin }; } // reduced-motion freeze: cycle 4's own 600ms hold, mid-point — max // translucency, tightest strand alignment, full stretch, the most // structured frame (never t0). const REDUCED_FREEZE_MS = CYCLE_MS * (CYCLES.length - 1) + STRETCH_MS + HOLD_MS / 2; export interface GlutenWindowpaneProps { /** accessible label for the status region */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function GlutenWindowpane({ label = "Processing", className = "", }: GlutenWindowpaneProps) { const containerRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const rand = mulberry32(0x9a10a9); // stable per-strand jitter/spread seed let disposed = false; let visible = true; let raf = 0; let w = 0; let h = 0; let dpr = 1; // -- token read: no paint happens before this runs at least once. ----- let lightColor: RGB = [255, 255, 255]; let darkColor: RGB = [23, 23, 23]; let isDarkTheme = false; const deriveColors = () => { const cs = getComputedStyle(document.documentElement); const bg = parseColor(cs.getPropertyValue("--background").trim()) ?? lightColor; const fg = parseColor(cs.getPropertyValue("--foreground").trim()) ?? darkColor; isDarkTheme = luminance(bg) < luminance(fg); lightColor = isDarkTheme ? fg : bg; darkColor = isDarkTheme ? bg : fg; }; // per-strand stable jitter angle sign/magnitude and perpendicular spread // slot, precomputed once so a given strand index keeps its identity as // count grows across cycles (34 slots, subsets used at lower counts) const strandJitterUnit = new Float32Array(MAX_STRANDS); for (let i = 0; i < MAX_STRANDS; i++) strandJitterUnit[i] = (rand() - 0.5) * 2; // pointer-driven stretch-center bias (springed, decays to container // center when idle) — luminance-only highlight, never accent-tinted let centerX = 0; let centerY = 0; let targetX = 0; let targetY = 0; const build = () => { const rect = container.getBoundingClientRect(); w = rect.width; h = rect.height; if (w < 2 || h < 2) return; 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)); centerX = w / 2; centerY = h / 2; targetX = centerX; targetY = centerY; }; const draw = (state: FrameState) => { if (w < 2 || h < 2) return; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); const minDim = Math.min(w, h); const baseLen = minDim * 0.8; const patchHalfW = (baseLen / 2) * state.scaleX; const patchHalfH = minDim * 0.34; // clip to the membrane patch ellipse — translucency and highlight only // ever apply within the dough itself, never the surrounding card ctx.save(); ctx.beginPath(); ctx.ellipse(centerX, centerY, patchHalfW * 1.05, patchHalfH * 1.05, 0, 0, Math.PI * 2); ctx.clip(); // dough base fill: a fixed tint off the lighter token toward the // darker one, painted at (1 - translucency) so more of the real page // --background shows through the transparent canvas as alpha climbs const doughColor = mix(lightColor, darkColor, MEMBRANE_TINT); ctx.fillStyle = rgbaStr(doughColor, Math.max(0, 1 - state.alpha)); ctx.fillRect(centerX - patchHalfW * 1.1, centerY - patchHalfH * 1.1, patchHalfW * 2.2, patchHalfH * 2.2); // radial light-through highlight: pushes further toward the LIGHTER // token at the hotspot, fading back to the dough tint — brightness // only, never var(--ns-accent) const hotR = Math.max(patchHalfW, patchHalfH) * (0.35 + 0.25 * state.thin); const grad = ctx.createRadialGradient(targetX, targetY, 0, targetX, targetY, hotR); const hotColor = mix(doughColor, lightColor, 0.9); grad.addColorStop(0, rgbaStr(hotColor, 0.16 + 0.5 * state.alpha)); grad.addColorStop(1, rgbaStr(hotColor, 0)); ctx.fillStyle = grad; ctx.fillRect(centerX - patchHalfW * 1.1, centerY - patchHalfH * 1.1, patchHalfW * 2.2, patchHalfH * 2.2); // strands: thin --foreground lines, angle jitter around the // horizontal stretch axis, evenly spread across the patch height. // Strands activate in SLOT_ORDER (fixed, midpoint-subdivided) rather // than by live index into `count`, so a slot once drawn keeps its own // jitter/position for the rest of the loop — raising count only adds // strands between the ones already there, never reshuffles them. The // newest (fractional) strand fades in by alpha instead of popping. const drawCount = Math.min(MAX_STRANDS, Math.ceil(state.count)); const jitterRad = (state.jitterDeg * Math.PI) / 180; // floor kept well above the "invisible at dpr-scaled subpixel" line const lineWidth = Math.max(0.85, 1.9 - drawCount * 0.03); // strands read as --foreground: the darker-reading token carries ink const strandColor = isDarkTheme ? lightColor : darkColor; ctx.lineWidth = lineWidth; ctx.lineCap = "round"; for (let i = 0; i < drawCount; i++) { const slotIdx = SLOT_ORDER[i] ?? Math.floor(MAX_STRANDS / 2); const slot = slotIdx / (MAX_STRANDS - 1) - 0.5; const unit = strandJitterUnit[slotIdx] ?? 0; const angle = unit * jitterRad; const len = baseLen * state.scaleX * (0.92 + 0.08 * Math.abs(unit)); const dx = Math.cos(angle); const dy = Math.sin(angle); const px = -dy; // perpendicular for spread offset const py = dx; const spread = slot * patchHalfH * 1.7; const ox = centerX + px * spread; const oy = centerY + py * spread; const fade = Math.max(0, Math.min(1, state.count - i)); ctx.strokeStyle = rgbaStr(strandColor, 0.82 * fade); ctx.beginPath(); ctx.moveTo(ox - (dx * len) / 2, oy - (dy * len) / 2); ctx.lineTo(ox + (dx * len) / 2, oy + (dy * len) / 2); ctx.stroke(); } ctx.restore(); }; let last = 0; const startPerf = performance.now(); // phase-desync the mount so any two page loads show different states const mountOffsetMs = Date.now() % LOOP_MS; const loop = (now: number) => { if (disposed || !visible) { raf = 0; return; } const dt = last === 0 ? 1 / 60 : Math.min(0.05, (now - last) / 1000); last = now; const springRate = 1 - Math.exp(-dt * 10); centerX += (targetX - centerX) * springRate; centerY += (targetY - centerY) * springRate; const elapsedMs = now - startPerf + mountOffsetMs; draw(frameState(elapsedMs)); raf = requestAnimationFrame(loop); }; const startLoop = () => { if (!raf && !reduced) { last = 0; raf = requestAnimationFrame(loop); } }; const drawReduced = () => { draw(frameState(REDUCED_FREEZE_MS)); }; const onPointerMove = (e: PointerEvent) => { const rect = container.getBoundingClientRect(); const px = e.clientX - rect.left; const py = e.clientY - rect.top; // shift toward the cursor, clamped to a modest fraction of the patch // so the stretch center never leaves the dough itself const maxShift = Math.min(w, h) * 0.18; targetX = w / 2 + Math.max(-maxShift, Math.min(maxShift, px - w / 2)) * 0.6; targetY = h / 2 + Math.max(-maxShift, Math.min(maxShift, py - h / 2)) * 0.6; }; const onPointerLeave = () => { targetX = w / 2; targetY = h / 2; }; deriveColors(); build(); if (reduced) { drawReduced(); } else { startLoop(); } const ro = new ResizeObserver(() => { build(); if (reduced) drawReduced(); }); ro.observe(container); const mo = new MutationObserver(() => { deriveColors(); if (reduced) drawReduced(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced) startLoop(); }); io.observe(container); if (!reduced) { container.addEventListener("pointermove", onPointerMove); container.addEventListener("pointerleave", onPointerLeave); } return () => { disposed = true; cancelAnimationFrame(raf); raf = 0; ro.disconnect(); mo.disconnect(); io.disconnect(); container.removeEventListener("pointermove", onPointerMove); container.removeEventListener("pointerleave", onPointerLeave); }; }, []); return (

{label}

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