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:T4fe4,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties, ReactNode } from "react"; // --------------------------------------------------------------------------- // RoastFirstCrack — a full-bleed ambient background modeling first crack in // a rotating coffee-roaster drum. Beans tumble continuously (carried up the // drum wall by rotation, then cascading back down across the exposed pile // face once they pass their repose angle — a real cataracting mixing // regime, not a rigid spin of the whole population). As internal steam // pressure builds, individual beans crack open at an irregular, clustered // cadence: a fissure appears instantly and a fleck of chaff (silverskin) // peels off the fissure edge, curls through an arc, detaches, and drifts // free while fading. Not every bean cracks at once — first crack is a // stochastic process the roaster listens for over a window of minutes, and // this loop never exhausts its supply: cracked beans reset to uncracked // after 8-12s so the drum keeps offering fresh beans to crack forever. // // TUMBLE MODEL. Each bean carries an angle (theta, standard math convention, // "down" = -PI/2, a FIXED gravity reference the rotating drum wall sweeps // past) and a radius from drum center. In "carry" state the wall drags the // bean forward in theta at the drum's angular rate; once the bean's ascent // past the down point exceeds its own per-bean repose angle (~100-140deg, // jittered), it "topples" into a brief fall state — theta eases back toward // the down point (plus scatter) and radius eases toward a new mid-pile // depth over 400-800ms, simulating a slide down the exposed cascading // face — then resumes carry from there. This two-state loop is what makes // individual beans visibly desynchronize from each other and from the // drum's own slow rotation, which must itself stay perceptible against // their motion (kill criterion). // // CRACK MODEL. A single Poisson-ish scheduler (exponential inter-arrival, // mean 1.4s, floor 700ms so events never blur) cracks one random uncracked // bean at a time. The fissure is a straight --foreground hairline at full // contrast, drawn across the bean for as long as it stays cracked (8-12s, // then it resets so the visible population is never a monotonically // filling one). 1-2 chaff flecks spawn per crack: each is a curling // silverskin peel, NOT a free particle — the free end sweeps a ~70deg arc // away from its hinge over 400ms (attached, curling), then detaches and // drifts a further 200ms (15px/s, fading), 600ms total. This is the // deliberate distinction from a lateral-crosswind chaff drift: this chaff // peels FROM a surface before it is airborne, so the curl (not a straight // drift) is the readable motion. // // TOKENS. Beans are filled --ns-muted ellipses (never --border, which is a // ~1.1:1 separator token and would vanish as a fill). Fissures are // --foreground at full opacity. Chaff is --foreground at ~40% opacity, // bumped in light theme if that falls under a 3:1 contrast ratio against // --background. --ns-accent never appears — there is no interaction here. // Read via getComputedStyle(documentElement), re-read on a class // MutationObserver, with every paint path (rAF start, ResizeObserver, // IntersectionObserver resume) gated behind a `ready` flag set only after // the first token read. // --------------------------------------------------------------------------- type RGB = [number, number, number]; function parseColor(raw: string): RGB | null { const s = raw.trim(); if (!s) return null; if (s.startsWith("#")) { const hex = s.slice(1); if (hex.length === 3) { const r = parseInt(hex[0] + hex[0], 16); const g = parseInt(hex[1] + hex[1], 16); const b = parseInt(hex[2] + hex[2], 16); return Number.isNaN(r + g + b) ? null : [r / 255, g / 255, b / 255]; } if (hex.length >= 6) { 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 / 255, g / 255, b / 255]; } return null; } const m = s.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/); return m ? [Number(m[1]) / 255, Number(m[2]) / 255, Number(m[3]) / 255] : null; } function relLum(c: RGB): number { const lin = (u: number) => (u <= 0.03928 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4)); return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]); } function contrastRatio(a: RGB, b: RGB): number { const la = relLum(a); const lb = relLum(b); const lighter = Math.max(la, lb); const darker = Math.min(la, lb); return (lighter + 0.05) / (darker + 0.05); } function mixRGB(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 mulberry32(seed: number) { let a = seed >>> 0; return () => { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } const DOWN = -Math.PI / 2; // fixed gravity reference, screen-space math angle const DRUM_REV_PER_S = 0.15; // slow decoupled sweep, see spec's round-9 note const OMEGA = DRUM_REV_PER_S * Math.PI * 2; const CRACK_MEAN_MS = 1400; const CRACK_FLOOR_MS = 700; const RESET_MIN_MS = 8000; const RESET_MAX_MS = 12000; const CURL_MS = 400; const DRIFT_MS = 200; const CHAFF_TOTAL_MS = CURL_MS + DRIFT_MS; const CURL_ARC = (70 * Math.PI) / 180; const DRIFT_PX_PER_S = 15; const AREA_PER_BEAN = 900; // px^2 const BEAN_MIN = 40; const BEAN_MAX = 90; interface Bean { theta: number; wallRadius: number; // fraction of drum radius, current carry depth fallState: "carry" | "fall"; fallFrom: number; fallTo: number; fallFromR: number; fallToR: number; fallStart: number; fallDur: number; reposeAngle: number; omegaMul: number; sizeR: number; // bean ellipse half-length, px fraction of drum radius aspect: number; wobblePhase: number; wobbleFreq: number; wobbleAmp: number; cracked: boolean; crackAt: number; resetAt: number; fissureAngle: number; } interface Chaff { beanIdx: number; hingeX: number; hingeY: number; tangentAngle: number; // direction the peel curls toward, radians spawnAt: number; } export interface RoastFirstCrackProps { /** freeze on the reduced-motion tableau. @default false */ paused?: boolean; children?: ReactNode; className?: string; style?: CSSProperties; } export function RoastFirstCrack({ paused = false, children, className = "", style }: RoastFirstCrackProps) { 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; // token strings start empty and are only ever assigned from // getComputedStyle — no literal color fallback anywhere. Every path // that could paint is gated behind `ready`. let bg = ""; let mutedStr = ""; let fgStr = ""; let bgRGB: RGB | null = null; let fgRGB: RGB | null = null; let chaffAlpha = 0.4; const readTokens = () => { const cs = getComputedStyle(document.documentElement); bg = cs.getPropertyValue("--background").trim(); mutedStr = cs.getPropertyValue("--ns-muted").trim(); fgStr = cs.getPropertyValue("--foreground").trim(); bgRGB = parseColor(bg); fgRGB = parseColor(fgStr); chaffAlpha = 0.4; if (bgRGB && fgRGB) { // effective color of foreground-at-alpha composited over background const composited = mixRGB(bgRGB, fgRGB, chaffAlpha); if (contrastRatio(composited, bgRGB) < 3) { for (let a = 0.4; a <= 0.85; a += 0.05) { const c = mixRGB(bgRGB, fgRGB, a); if (contrastRatio(c, bgRGB) >= 3) { chaffAlpha = a; break; } chaffAlpha = a; } } } }; let dpr = 1; let width = 0; let height = 0; let cx = 0; let cy = 0; let drumR = 0; let sized = false; let ready = false; let disposed = false; let visible = true; let raf = 0; let last = 0; let simTime = 0; // ms let nextCrackAt = 0; let drumRotation = 0; const rand = mulberry32(0x1a5c00de); let beans: Bean[] = []; let chaffs: Chaff[] = []; const beanPos = (b: Bean) => ({ x: cx + Math.cos(b.theta) * b.wallRadius * drumR, y: cy - Math.sin(b.theta) * b.wallRadius * drumR, }); const makeBean = (): Bean => ({ theta: DOWN + (rand() - 0.5) * 0.6, wallRadius: 0.25 + rand() * 0.65, fallState: "carry", fallFrom: 0, fallTo: 0, fallFromR: 0, fallToR: 0, fallStart: 0, fallDur: 0, reposeAngle: ((100 + rand() * 40) * Math.PI) / 180, omegaMul: 0.85 + rand() * 0.3, sizeR: 0.05 + rand() * 0.022, aspect: 0.72 + rand() * 0.22, wobblePhase: rand() * Math.PI * 2, wobbleFreq: 0.3 + rand() * 0.35, wobbleAmp: 0.02 + rand() * 0.02, cracked: false, crackAt: -1e9, resetAt: -1e9, fissureAngle: rand() * Math.PI * 2, }); const spawnChaff = (beanIdx: number, at: number) => { const b = beans[beanIdx]; const p = beanPos(b); const outward = Math.atan2(p.y - cy, p.x - cx); // outward + a bias toward "up" on screen, the direction a lofted // silverskin flake actually curls and drifts const tangentAngle = Math.atan2(Math.sin(outward) - 0.5, Math.cos(outward)); chaffs.push({ beanIdx, hingeX: p.x, hingeY: p.y, tangentAngle, spawnAt: at }); }; const crackBean = (idx: number, at: number) => { const b = beans[idx]; b.cracked = true; b.crackAt = at; b.resetAt = at + RESET_MIN_MS + rand() * (RESET_MAX_MS - RESET_MIN_MS); b.fissureAngle = rand() * Math.PI * 2; spawnChaff(idx, at); if (rand() < 0.45) spawnChaff(idx, at + rand() * 40); }; const buildField = () => { drumR = Math.min(width, height) * 0.42; cx = width / 2; cy = height / 2; const drumArea = Math.PI * drumR * drumR; const count = Math.max(BEAN_MIN, Math.min(BEAN_MAX, Math.floor(drumArea / AREA_PER_BEAN))); beans = []; for (let i = 0; i < count; i++) beans.push(makeBean()); chaffs = []; simTime = 0; drumRotation = 0; nextCrackAt = CRACK_FLOOR_MS + Math.max(0, -Math.log(1 - rand()) * CRACK_MEAN_MS); }; const step = (dtMs: number) => { simTime += dtMs; drumRotation = (drumRotation + OMEGA * (dtMs / 1000)) % (Math.PI * 2); // crack scheduler — one at a time, floor enforced by construction // since nextCrackAt is only ever advanced forward from `now` if (simTime >= nextCrackAt) { const pool: number[] = []; for (let i = 0; i < beans.length; i++) if (!beans[i].cracked) pool.push(i); if (pool.length > 0) crackBean(pool[Math.floor(rand() * pool.length)], simTime); nextCrackAt = simTime + CRACK_FLOOR_MS + Math.max(0, -Math.log(1 - rand()) * (CRACK_MEAN_MS - CRACK_FLOOR_MS)); } for (const b of beans) { if (b.cracked && simTime >= b.resetAt) { b.cracked = false; b.crackAt = -1e9; b.resetAt = -1e9; } if (b.fallState === "carry") { b.theta += OMEGA * b.omegaMul * (dtMs / 1000); const ascent = ((b.theta - DOWN) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2); if (ascent > b.reposeAngle) { b.fallState = "fall"; b.fallStart = simTime; b.fallDur = 400 + rand() * 400; b.fallFrom = b.theta; b.fallTo = DOWN + (rand() - 0.5) * 0.9; b.fallFromR = b.wallRadius; b.fallToR = 0.2 + rand() * 0.62; } } else { const t = Math.min(1, (simTime - b.fallStart) / b.fallDur); const e = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; // easeInOutQuad b.theta = b.fallFrom + (b.fallTo - b.fallFrom) * e; b.wallRadius = b.fallFromR + (b.fallToR - b.fallFromR) * e; if (t >= 1) { b.fallState = "carry"; b.wallRadius = b.fallToR; } } } chaffs = chaffs.filter((c) => simTime - c.spawnAt < CHAFF_TOTAL_MS); }; const draw = () => { if (!sized) return; ctx.fillStyle = bg; ctx.fillRect(0, 0, width, height); // drum boundary — a --ns-muted hairline ring, low alpha so it reads // as containment rather than a UI seam ctx.strokeStyle = mutedStr; ctx.globalAlpha = 0.3; ctx.lineWidth = Math.max(1, drumR * 0.01); ctx.beginPath(); ctx.arc(cx, cy, drumR, 0, Math.PI * 2); ctx.stroke(); // a single spoke marks drum rotation so the slow sweep stays // perceptible against the beans' own faster tumble ctx.globalAlpha = 0.22; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + Math.cos(drumRotation) * drumR, cy - Math.sin(drumRotation) * drumR); ctx.stroke(); for (const b of beans) { const wobble = Math.sin(simTime / 1000 * b.wobbleFreq * Math.PI * 2 + b.wobblePhase) * b.wobbleAmp; const rEff = Math.max(0.06, b.wallRadius + wobble) * drumR; const px = cx + Math.cos(b.theta) * rEff; const py = cy - Math.sin(b.theta) * rEff; const rx = b.sizeR * drumR; const ry = rx * b.aspect; ctx.save(); ctx.translate(px, py); ctx.rotate(-b.theta + Math.PI / 2); ctx.globalAlpha = 1; ctx.fillStyle = mutedStr; ctx.beginPath(); ctx.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2); ctx.fill(); if (b.cracked) { ctx.globalAlpha = 1; ctx.strokeStyle = fgStr; ctx.lineWidth = Math.max(0.8, rx * 0.14); ctx.beginPath(); const fx = Math.cos(b.fissureAngle) * rx * 0.75; const fy = Math.sin(b.fissureAngle) * ry * 0.75; ctx.moveTo(-fx, -fy); ctx.lineTo(fx, fy); ctx.stroke(); } ctx.restore(); } // chaff — curling silverskin peels, attached-then-drifting ctx.lineCap = "round"; for (const c of chaffs) { const t = simTime - c.spawnAt; const rx = beans[c.beanIdx]?.sizeR ?? 0.055; const len = rx * drumR * 0.9; let curlT: number; let driftPx = 0; let alpha: number; if (t <= CURL_MS) { curlT = t / CURL_MS; curlT = 1 - Math.pow(1 - curlT, 3); // easeOutCubic alpha = Math.min(1, curlT * 3) * chaffAlpha; } else { curlT = 1; const dt = t - CURL_MS; driftPx = (DRIFT_PX_PER_S * dt) / 1000; alpha = (1 - dt / DRIFT_MS) * chaffAlpha; } if (alpha <= 0) continue; const arcAngle = c.tangentAngle + curlT * CURL_ARC; const hx = c.hingeX + Math.cos(c.tangentAngle) * driftPx; const hy = c.hingeY + Math.sin(c.tangentAngle) * driftPx; const tx = hx + Math.cos(arcAngle) * len; const ty = hy + Math.sin(arcAngle) * len; ctx.globalAlpha = alpha; ctx.strokeStyle = fgStr; ctx.lineWidth = Math.max(0.8, len * 0.16); ctx.beginPath(); ctx.moveTo(hx, hy); // a slight curve so the peel reads as curling, not a straight pin const midAngle = c.tangentAngle + curlT * CURL_ARC * 0.5; const mx = hx + Math.cos(midAngle) * len * 0.55; const my = hy + Math.sin(midAngle) * len * 0.55; ctx.quadraticCurveTo(mx, my, tx, ty); ctx.stroke(); } ctx.globalAlpha = 1; }; // reduced-motion / paused: freeze the instant just after a crack fires — // fissure fully visible on one bean, its chaff mid-drift (elapsed // ~500ms into the 600ms lifecycle: past the curl, partway through the // fade, not yet gone) — the single frame showing population, tumble // state and the full crack lifecycle (fissure + departing chaff) at once. const drawStaticFreeze = () => { if (!sized) return; buildField(); for (let i = 0; i < 90; i++) step(1000 / 30); // deterministic warm tumble const pool: number[] = []; for (let i = 0; i < beans.length; i++) if (!beans[i].cracked) pool.push(i); const idx = pool[Math.floor(pool.length * 0.4)] ?? 0; crackBean(idx, simTime); for (let i = 0; i < 15; i++) step(1000 / 30); // ~500ms further: mid-drift, mid-fade draw(); }; const resize = () => { const rect = root.getBoundingClientRect(); const w = Math.round(rect.width); const h = Math.round(rect.height); if (w < 2 || h < 2) { sized = false; return; } width = w; height = h; dpr = Math.min(window.devicePixelRatio || 1, 1.5); canvas.width = Math.max(1, Math.round(width * dpr)); canvas.height = Math.max(1, Math.round(height * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); buildField(); sized = true; }; const warmStart = () => { for (let i = 0; i < 60; i++) step(1000 / 30); }; const loop = (now: number) => { if (!visible) return; const dt = last ? Math.min(50, now - last) : 1000 / 60; last = now; step(dt); draw(); raf = requestAnimationFrame(loop); }; let resizeTimer: ReturnType | null = null; const onResize = () => { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { resizeTimer = null; resize(); if (!sized) return; if (reduced || paused) { drawStaticFreeze(); } else { warmStart(); ready = true; draw(); if (visible && !raf) { last = 0; raf = requestAnimationFrame(loop); } } }, 150); }; const ro = new ResizeObserver(onResize); ro.observe(root); const io = new IntersectionObserver( (entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && ready && !reduced && !paused) { last = 0; raf = requestAnimationFrame(loop); } else { cancelAnimationFrame(raf); raf = 0; } }, { threshold: 0 } ); io.observe(root); const onVis = () => { if (document.hidden) { cancelAnimationFrame(raf); raf = 0; } else if (visible && ready && !reduced && !paused) { last = 0; raf = requestAnimationFrame(loop); } }; document.addEventListener("visibilitychange", onVis); const mo = new MutationObserver(() => { readTokens(); if (reduced || paused) drawStaticFreeze(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); document.fonts.ready.then(() => { if (disposed) return; readTokens(); resize(); if (!sized) { ready = true; return; } if (reduced || paused) { drawStaticFreeze(); ready = true; } else { warmStart(); ready = true; draw(); raf = requestAnimationFrame(loop); } }); return () => { disposed = true; cancelAnimationFrame(raf); if (resizeTimer) clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, [paused]); return (

); } RoastFirstCrack.displayName = "RoastFirstCrack"; 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"}]]}],["$","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"}]]}]}]]}],["$","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)"}]]}],["$","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/loud/roast-first-crack/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/roast-first-crack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]