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:T4ff7,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // RollerOcclusion — a determinate-feel "something is being pumped" ambient, // drawn as a real peristaltic (roller-head) pump: a three-roller rotor spins // above a horizontal tube, each roller's ORBITAL POSITION projected onto the // tube's x-axis (rollerX = pivotX + rotorRadius*cos(angle)) so the pinch it // makes visibly travels along the tube as the rotor turns, rather than // squeezing one fixed spot. Occlusion depth is governed by a ±70° // contact window centred on the roller's closest approach to the tube // (angle = 90°, i.e. straight down from the rotor pivot): the lumen closes // over a fixed 60ms as a roller enters that window, holds fully flat for the // remainder, then releases over a fixed 90ms as it exits — real numbers for // tube-wall viscoelastic response, held constant in wall-clock time // regardless of rotor speed (a material property, not a pump-speed one). // Three rollers at 120° spacing with a 140°-wide window each mean windows // overlap ~20°, so exactly one roller is ever ≥95% occluding — flow reads as // quasi-continuous, the standard justification for choosing a roller pump // over a piston pump. // // A fluid slug (length = rotor circumference / 3, one per roller gap) is // painted as a repeating sawtooth luminance ramp along the tube's lumen — // leading edge brightest, fading linearly to the trailing edge over the // slug's own length — advancing at 1.08 tube-lengths per rotor revolution. // That 1.08 is deliberately NOT 1: an integer ratio would make the slug // pattern land on the exact same tube pixels every revolution and the loop // would read as freezing every ~5s (kill criterion). Both the rotor angle // and the slug offset are unwrapped, monotonically increasing values, so the // resting loop is genuinely different at every point in time and only // approximately repeats after many revolutions. // // Every ink (--foreground, --ns-muted, --border, --background) is read once // via getComputedStyle(document.documentElement) before the first paint and // re-read on a MutationObserver watching documentElement's class — no canvas // draw call ever runs before that first read completes. Hover/focus over the // component nudges rotor speed to 1.6x for the duration (a "spinning up" // read, luminance/speed only, never the fluid's colour) and decays back to // 1x over 400ms on release; it never pauses the rotor and never recolors // anything with --ns-accent — the whole component avoids the accent token // entirely, since nothing here is interaction chrome. // --------------------------------------------------------------------------- const IDLE_RPM = 12; // rotor speed at rest — mid-range for a lab peristaltic pump const IDLE_DEG_PER_SEC = (IDLE_RPM / 60) * 360; const HOVER_MULT = 1.6; const RELEASE_MS = 400; // decay of the hover speed bump back to 1x const ROLLER_COUNT = 3; const ROLLER_STEP_DEG = 360 / ROLLER_COUNT; const CONTACT_HALF_DEG = 70; // ±70° = 140° contact arc per roller const CLOSE_MS = 60; // wall-clock lumen close time, entering contact const OPEN_MS = 90; // wall-clock lumen release time, exiting contact const MIN_LUMEN_FRAC = 0.04; // fully-occluded lumen, 4% of open width const TUBE_LEN_FRAC = 0.7; // of the container's smaller dimension const TUBE_DIAM_FRAC = 0.18; // of the container's smaller dimension const ROTOR_RADIUS_MULT = 1.4; // x tube diameter // The spec's "12% of tube diameter" reads as a typo against its own "sized // to visibly flatten the tube" — a roller that small could never reach the // lumen centreline. Sized here so the roller circle actually overlaps and // fully closes the tube at closest approach, per that same clause. const ROLLER_RADIUS_MULT = 0.62; // x tube diameter const SLUG_ADVANCE_RATIO = 1.08; // tube-lengths advanced per rotor revolution const COLS = 96; // tube cross-section samples per frame const DEG2RAD = Math.PI / 180; function clamp(n: number, lo: number, hi: number): number { return Math.min(hi, Math.max(lo, n)); } function smoothstep(t: number): number { const x = clamp(t, 0, 1); return x * x * (3 - 2 * x); } type RGB = { r: number; g: number; b: number }; function parseHex(raw: string): RGB | null { const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim()); if (!m) return null; let h = m[1]!; if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const n = parseInt(h, 16); return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }; } function mix(a: RGB, b: RGB, t: number): RGB { const k = clamp(t, 0, 1); return { r: a.r + (b.r - a.r) * k, g: a.g + (b.g - a.g) * k, b: a.b + (b.b - a.b) * k, }; } function rgbStr(c: RGB, alpha = 1): string { return `rgba(${c.r.toFixed(1)},${c.g.toFixed(1)},${c.b.toFixed(1)},${alpha})`; } // wraps to (-180, 180] function wrapDelta(deg: number): number { let d = deg % 360; if (d > 180) d -= 360; if (d <= -180) d += 360; return d; } /** occlusion 0..1 for a roller at angular distance `raw` degrees from the * contact centre (90°, straight down from the pivot), given the rotor's * current speed in degrees/second. Close/open durations are fixed wall-clock * ms, converted to an angular fraction of the current window using that * speed — a material property held constant regardless of rotor RPM. */ function occlusionFor(raw: number, degPerSec: number): number { if (Math.abs(raw) > CONTACT_HALF_DEG) return 0; const localT = (raw + CONTACT_HALF_DEG) / (CONTACT_HALF_DEG * 2); // 0..1 const windowMs = ((CONTACT_HALF_DEG * 2) / Math.max(1, degPerSec)) * 1000; const fIn = CLOSE_MS / windowMs; const fOut = OPEN_MS / windowMs; if (localT < fIn) return smoothstep(localT / Math.max(1e-6, fIn)); if (localT > 1 - fOut) return 1 - smoothstep((localT - (1 - fOut)) / Math.max(1e-6, fOut)); return 1; } export interface RollerOcclusionProps { /** accessible label for the ambient region. Default "Data pump active" */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function RollerOcclusion({ label = "Data pump active", className = "" }: RollerOcclusionProps) { 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 mq = window.matchMedia("(prefers-reduced-motion: reduce)"); // ---- token inks: read before anything paints, re-read live ----------- let fg: RGB = { r: 23, g: 23, b: 23 }; let mutedC: RGB = { r: 77, g: 77, b: 77 }; let borderC: RGB = { r: 235, g: 235, b: 235 }; let bgC: RGB = { r: 255, g: 255, b: 255 }; let isDark = false; const readTokens = () => { const cs = getComputedStyle(document.documentElement); fg = parseHex(cs.getPropertyValue("--foreground")) ?? fg; mutedC = parseHex(cs.getPropertyValue("--ns-muted")) ?? mutedC; borderC = parseHex(cs.getPropertyValue("--border")) ?? borderC; bgC = parseHex(cs.getPropertyValue("--background")) ?? bgC; isDark = document.documentElement.classList.contains("dark"); }; readTokens(); let w = 0; let h = 0; let dpr = 1; let sized = false; let visible = true; let tubeLeft = 0; let tubeLen = 0; let tubeRadius = 0; let rotorRadius = 0; let rollerRadius = 0; let pivotX = 0; let rotorCenterY = 0; let tubeCenterY = 0; const measure = () => { const rect = root.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) { sized = false; return; } w = rect.width; h = rect.height; 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)); canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; const minDim = Math.min(w, h); tubeLen = minDim * TUBE_LEN_FRAC; const tubeDiam = minDim * TUBE_DIAM_FRAC; tubeRadius = tubeDiam / 2; rotorRadius = tubeDiam * ROTOR_RADIUS_MULT; rollerRadius = tubeDiam * ROLLER_RADIUS_MULT; pivotX = w / 2; tubeCenterY = h / 2 + rotorRadius - tubeRadius / 2; rotorCenterY = tubeCenterY - rotorRadius; tubeLeft = pivotX - tubeLen / 2; sized = true; }; measure(); const slugPeriod = () => (2 * Math.PI * rotorRadius) / ROLLER_COUNT; // ---- hover/focus speed bump: 1x <-> 1.6x, snap up, 400ms decay ------- let hoverActive = false; let mult = 1; let releaseFrom = 1; let releaseStart = 0; const applyHover = (active: boolean) => { if (active && !hoverActive) { hoverActive = true; mult = HOVER_MULT; } else if (!active && hoverActive) { hoverActive = false; releaseFrom = mult; releaseStart = performance.now(); } wake(); }; const tickMult = (now: number) => { if (hoverActive) { mult = HOVER_MULT; return; } if (releaseStart) { const t = clamp((now - releaseStart) / RELEASE_MS, 0, 1); mult = releaseFrom + (1 - releaseFrom) * smoothstep(t); if (t >= 1) releaseStart = 0; } else { mult = 1; } }; // ---- state: unwrapped rotor angle + slug offset ----------------------- // t0: roller 0 sits at 90° (dead-bottom, fully occluding); a slug // boundary sits at the tube midpoint. let rotorDeg = 90; let slugOffset = 0; // px, unwrapped let sizedOnce = false; const draw = () => { if (!sized) return; if (!sizedOnce) { slugOffset = tubeLen / 2; sizedOnce = true; } ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); const rollerXs: number[] = []; const rollerOcc: number[] = []; for (let i = 0; i < ROLLER_COUNT; i++) { const angle = rotorDeg + i * ROLLER_STEP_DEG; const raw = wrapDelta(angle - 90); const occ = occlusionFor(raw, IDLE_DEG_PER_SEC * mult); const rad = angle * DEG2RAD; rollerXs.push(pivotX + Math.cos(rad) * rotorRadius); rollerOcc.push(occ); } const sigma = rollerRadius * 0.9; const period = slugPeriod(); const colW = tubeLen / COLS + 0.6; for (let c = 0; c < COLS; c++) { const frac = c / (COLS - 1); const x = tubeLeft + frac * tubeLen; let occAtX = 0; for (let i = 0; i < ROLLER_COUNT; i++) { const dx = x - rollerXs[i]!; const g = Math.exp(-(dx * dx) / (2 * sigma * sigma)); const contribution = rollerOcc[i]! * g; if (contribution > occAtX) occAtX = contribution; } const wallHalf = tubeRadius * Math.max(MIN_LUMEN_FRAC, 1 - occAtX * (1 - MIN_LUMEN_FRAC)); const lumenHalf = wallHalf * 0.6; // wall: dark theme is a flat --ns-muted fill; light theme ramps // --background -> --ns-muted across the tube so the pinch point // never nearly vanishes against a light page (checked first, not // as an afterthought — the documented failure mode). const wallColor = isDark ? mutedC : mix(bgC, mutedC, 0.35 + 0.5 * frac); ctx.fillStyle = rgbStr(wallColor, isDark ? 0.85 : 1); ctx.fillRect(x - colW / 2, tubeCenterY - wallHalf, colW, wallHalf * 2); // fluid slug: sawtooth luminance ramp, leading edge brightest, // fading to the trailing edge over the slug's own length — a // gradient in colour, never in opacity, so it composites correctly // under both themes. const local = (((x - slugOffset) % period) + period) % period; const leadFrac = 1 - local / period; const leadColor = fg; const fluidColor = mix(mutedC, leadColor, leadFrac); ctx.fillStyle = rgbStr(fluidColor, 0.95); ctx.fillRect(x - colW / 2, tubeCenterY - lumenHalf, colW, lumenHalf * 2); } // outline: a border-token stroke only, traced along the same wall // envelope used above — never a fill, per the separator-token rule. ctx.beginPath(); for (let c = 0; c < COLS; c++) { const frac = c / (COLS - 1); const x = tubeLeft + frac * tubeLen; let occAtX = 0; for (let i = 0; i < ROLLER_COUNT; i++) { const dx = x - rollerXs[i]!; const g = Math.exp(-(dx * dx) / (2 * sigma * sigma)); const contribution = rollerOcc[i]! * g; if (contribution > occAtX) occAtX = contribution; } const wallHalf = tubeRadius * Math.max(MIN_LUMEN_FRAC, 1 - occAtX * (1 - MIN_LUMEN_FRAC)); if (c === 0) ctx.moveTo(x, tubeCenterY - wallHalf); else ctx.lineTo(x, tubeCenterY - wallHalf); } for (let c = COLS - 1; c >= 0; c--) { const frac = c / (COLS - 1); const x = tubeLeft + frac * tubeLen; let occAtX = 0; for (let i = 0; i < ROLLER_COUNT; i++) { const dx = x - rollerXs[i]!; const g = Math.exp(-(dx * dx) / (2 * sigma * sigma)); const contribution = rollerOcc[i]! * g; if (contribution > occAtX) occAtX = contribution; } const wallHalf = tubeRadius * Math.max(MIN_LUMEN_FRAC, 1 - occAtX * (1 - MIN_LUMEN_FRAC)); ctx.lineTo(x, tubeCenterY + wallHalf); } ctx.closePath(); ctx.lineWidth = 1; ctx.strokeStyle = rgbStr(borderC, isDark ? 0.9 : 1); ctx.stroke(); // rotor + rollers, a light structural read above the tube ctx.beginPath(); ctx.arc(pivotX, rotorCenterY, rotorRadius, 0, Math.PI * 2); ctx.strokeStyle = rgbStr(mutedC, 0.3); ctx.lineWidth = 1; ctx.stroke(); for (let i = 0; i < ROLLER_COUNT; i++) { const angle = (rotorDeg + i * ROLLER_STEP_DEG) * DEG2RAD; const rx = pivotX + Math.cos(angle) * rotorRadius; const ry = rotorCenterY + Math.sin(angle) * rotorRadius; ctx.beginPath(); ctx.arc(rx, ry, rollerRadius, 0, Math.PI * 2); const t = rollerOcc[i]!; ctx.fillStyle = rgbStr(mix(mutedC, fg, t * 0.5), 0.22 + t * 0.35); ctx.fill(); ctx.strokeStyle = rgbStr(mutedC, 0.55); ctx.stroke(); } ctx.beginPath(); ctx.arc(pivotX, rotorCenterY, Math.max(1.5, rotorRadius * 0.06), 0, Math.PI * 2); ctx.fillStyle = rgbStr(mutedC, 0.5); ctx.fill(); }; // ---- reduced-motion: one deliberately chosen structured frame -------- // FREEZE_PHASE = 35deg-into-occlusion: roller 0 sits 35° into its 140° // contact arc (raw = -35, i.e. angle = 55°), tube ~60% occluded there — // mid-motion, not fully pinched, not fully open — with a slug boundary // parked at the tube's 1/3 mark. const drawReduced = () => { if (!sized) return; rotorDeg = 55; const savedOcclusion = 0.6; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); const rollerXs: number[] = []; const rollerOcc: number[] = [0, 0, 0]; rollerOcc[0] = savedOcclusion; for (let i = 0; i < ROLLER_COUNT; i++) { const angle = (rotorDeg + i * ROLLER_STEP_DEG) * DEG2RAD; rollerXs.push(pivotX + Math.cos(angle) * rotorRadius); } const sigma = rollerRadius * 0.9; const period = slugPeriod(); const colW = tubeLen / COLS + 0.6; const boundaryOffset = tubeLeft + tubeLen / 3; // slug boundary at the 1/3 mark for (let c = 0; c < COLS; c++) { const frac = c / (COLS - 1); const x = tubeLeft + frac * tubeLen; let occAtX = 0; for (let i = 0; i < ROLLER_COUNT; i++) { const dx = x - rollerXs[i]!; const g = Math.exp(-(dx * dx) / (2 * sigma * sigma)); const contribution = rollerOcc[i]! * g; if (contribution > occAtX) occAtX = contribution; } const wallHalf = tubeRadius * Math.max(MIN_LUMEN_FRAC, 1 - occAtX * (1 - MIN_LUMEN_FRAC)); const lumenHalf = wallHalf * 0.6; const wallColor = isDark ? mutedC : mix(bgC, mutedC, 0.35 + 0.5 * frac); ctx.fillStyle = rgbStr(wallColor, isDark ? 0.85 : 1); ctx.fillRect(x - colW / 2, tubeCenterY - wallHalf, colW, wallHalf * 2); const local = (((x - boundaryOffset) % period) + period) % period; const leadFrac = 1 - local / period; const fluidColor = mix(mutedC, fg, leadFrac); ctx.fillStyle = rgbStr(fluidColor, 0.95); ctx.fillRect(x - colW / 2, tubeCenterY - lumenHalf, colW, lumenHalf * 2); } ctx.beginPath(); ctx.arc(pivotX, rotorCenterY, rotorRadius, 0, Math.PI * 2); ctx.strokeStyle = rgbStr(mutedC, 0.3); ctx.lineWidth = 1; ctx.stroke(); for (let i = 0; i < ROLLER_COUNT; i++) { const angle = (rotorDeg + i * ROLLER_STEP_DEG) * DEG2RAD; const rx = pivotX + Math.cos(angle) * rotorRadius; const ry = rotorCenterY + Math.sin(angle) * rotorRadius; ctx.beginPath(); ctx.arc(rx, ry, rollerRadius, 0, Math.PI * 2); const t = rollerOcc[i]!; ctx.fillStyle = rgbStr(mix(mutedC, fg, t * 0.5), 0.22 + t * 0.35); ctx.fill(); ctx.strokeStyle = rgbStr(mutedC, 0.55); ctx.stroke(); } }; let raf = 0; let last = 0; const loop = (now: number) => { raf = 0; if (!visible || document.hidden || !sized) { last = 0; return; } const dt = last === 0 ? 1 / 60 : Math.min(0.05, (now - last) / 1000); last = now; tickMult(now); const degPerSec = IDLE_DEG_PER_SEC * mult; rotorDeg += degPerSec * dt; slugOffset += SLUG_ADVANCE_RATIO * tubeLen * (degPerSec / 360) * dt; draw(); raf = requestAnimationFrame(loop); }; const wake = () => { if (mq.matches) { drawReduced(); return; } if (!raf) { last = 0; raf = requestAnimationFrame(loop); } }; if (mq.matches) { drawReduced(); } else { wake(); } const onMq = () => { if (mq.matches) { cancelAnimationFrame(raf); raf = 0; drawReduced(); } else { wake(); } }; mq.addEventListener("change", onMq); const ro = new ResizeObserver(() => { measure(); if (mq.matches) drawReduced(); else wake(); }); ro.observe(root); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !mq.matches) wake(); }); io.observe(root); const mo = new MutationObserver(() => { readTokens(); if (mq.matches) drawReduced(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); const onEnter = () => applyHover(true); const onLeave = () => applyHover(false); root.addEventListener("pointerenter", onEnter); root.addEventListener("pointerleave", onLeave); root.addEventListener("focus", onEnter); root.addEventListener("blur", onLeave); return () => { cancelAnimationFrame(raf); raf = 0; mq.removeEventListener("change", onMq); ro.disconnect(); io.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVis); root.removeEventListener("pointerenter", onEnter); root.removeEventListener("pointerleave", onLeave); root.removeEventListener("focus", onEnter); root.removeEventListener("blur", onLeave); }; }, []); return (

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