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:T3b29,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // RollerBreakReduce — an ambient multi-stage pipeline indicator built as a // flour mill's break system: grain passes through a sequence of paired // corrugated rollers (B1..B4), each pair spinning at a 2.5:1 differential // (fast roll over slow roll) so the nip SHEARS the stock rather than // crushing it. Every stage narrows the roll gap; every pass through a nip // reduces particle size by ~35% and is drawn as a 150ms compression, never // an instant swap. This is a continuous ambient stream (no query, no // gravity/mesh threshold) — distinct from a sieve's pass/fail aperture gate. // // Rollers are plain DOM + CSS transform (fixed geometry, cheap to rotate); // the particle stream is a single 2D canvas overlay. Stage count and roller // diameter derive from the container's smaller dimension so the mechanism // still reads at card scale. Colours used on the canvas are read once via // getComputedStyle on the documentElement and re-read on a MutationObserver // watching its class — no canvas paint happens before that first read. DOM // roller/hairline colour comes straight from CSS var() tokens. // --------------------------------------------------------------------------- export interface RollerBreakReduceProps { /** Highlights one stage's corrugation via a luminance boost (never accent). */ activeStage?: number; className?: string; } const FEED_RATE = 3; // particles / second entering at the left edge const BASE_DIAM_MIN = 8; // px, coarse entry particle const BASE_DIAM_MAX = 10; const REDUCTION = 0.65; // ~35% size loss per break stage const SEG_MS = 900; // inter-stage travel time const NIP_MS = 150; // compression window at each nip crossing const POP_CAP = 35; // steady-state on-screen ceiling (spec: 25-35) const SLOW_REV_S = 0.6; // slow roll rev/s const FAST_REV_S = 1.5; // fast roll rev/s (2.5:1 differential, matches the real ratio) const RIDGE_COUNT = 60; // corrugation ridges per roller rim (fine pitch) interface Particle { id: number; segIndex: number; // which travel segment [0 .. stageCount] the particle is in segStart: number; // ms timestamp the current segment began yOffset: number; // px scatter around the nip centreline while travelling baseDiameter: number; // px, at spawn (before any break stage) } interface Layout { w: number; h: number; stageCount: number; rollerDiameter: number; nipGaps: number[]; // px, one per stage — narrows stage to stage boundaryX: number[]; // [0, nip0, nip1, ..., width], length stageCount + 2 centerY: number; jitterAmp: number; } function lerp(a: number, b: number, t: number) { return a + (b - a) * t; } function clamp01(t: number) { return t < 0 ? 0 : t > 1 ? 1 : t; } function easeInOutCubic(t: number) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } function computeLayout(w: number, h: number): Layout { const minDim = Math.min(w, h); const stageCount = minDim < 280 ? 3 : 4; const rollerDiameter = minDim * 0.14; const marginX = w * 0.08; const usableW = Math.max(1, w - marginX * 2); const boundaryX: number[] = [0]; for (let i = 0; i < stageCount; i++) { boundaryX.push(marginX + (usableW * (i + 0.5)) / stageCount); } boundaryX.push(w); const nipGaps: number[] = []; for (let i = 0; i < stageCount; i++) { // each break stage narrows the gap nipGaps.push(Math.max(rollerDiameter * 0.05, rollerDiameter * (0.22 - i * 0.045))); } return { w, h, stageCount, rollerDiameter, nipGaps, boundaryX, centerY: h / 2, jitterAmp: rollerDiameter * 0.55, }; } export function RollerBreakReduce({ activeStage, className = "" }: RollerBreakReduceProps) { const rootRef = useRef(null); const canvasRef = useRef(null); const stageRefs = useRef<(HTMLDivElement | null)[]>([]); const fastRefs = useRef<(HTMLDivElement | null)[]>([]); const slowRefs = useRef<(HTMLDivElement | null)[]>([]); const hairlineRefs = useRef<(HTMLDivElement | null)[]>([]); const activeStageRef = useRef(activeStage); activeStageRef.current = activeStage; // keep the luminance-boost highlight in sync even when the main rAF loop // isn't running (reduced motion's frozen frame, or an off-screen pause). useEffect(() => { for (let i = 0; i < stageRefs.current.length; i++) { const el = stageRefs.current[i]; if (el) el.style.filter = activeStage === i ? "brightness(1.4)" : ""; } }, [activeStage]); 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; let layout: Layout = computeLayout(1, 1); let dpr = 1; let particles: Particle[] = []; let idCounter = 0; let spawnAcc = 0; let fastAngle = 0; let slowAngle = 0; let raf = 0; let last = 0; let visible = true; let sized = false; // -- colour: read once via getComputedStyle, re-read only on a class // mutation (theme flip). No canvas paint happens before this first read. let fg = ""; const readColors = () => { const cs = getComputedStyle(document.documentElement); fg = cs.getPropertyValue("--foreground").trim() || fg; }; readColors(); const mo = new MutationObserver(readColors); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const applyRollerStyles = () => { const sc = layout.stageCount; for (let i = 0; i < stageRefs.current.length; i++) { const stageEl = stageRefs.current[i]; const hairEl = hairlineRefs.current[i]; if (i >= sc) { if (stageEl) stageEl.style.display = "none"; if (hairEl) hairEl.style.display = "none"; continue; } const fastEl = fastRefs.current[i]; const slowEl = slowRefs.current[i]; if (!stageEl || !fastEl || !slowEl) continue; stageEl.style.display = ""; if (hairEl) hairEl.style.display = ""; const x = layout.boundaryX[i + 1] ?? 0; const gap = layout.nipGaps[i] ?? 0; const r = layout.rollerDiameter; stageEl.style.left = `${x}px`; stageEl.style.top = `${layout.centerY}px`; stageEl.style.width = `${r}px`; stageEl.style.filter = activeStageRef.current === i ? "brightness(1.4)" : ""; fastEl.style.width = `${r}px`; fastEl.style.height = `${r}px`; fastEl.style.transform = `translate(-50%, calc(-100% - ${gap / 2}px)) rotate(${fastAngle}deg)`; slowEl.style.width = `${r}px`; slowEl.style.height = `${r}px`; slowEl.style.transform = `translate(-50%, ${gap / 2}px) rotate(${slowAngle}deg)`; if (hairEl) { hairEl.style.left = `${x}px`; } } }; const draw = (now: number) => { const { boundaryX, stageCount, centerY, w, h } = layout; ctx.clearRect(0, 0, w, h); ctx.fillStyle = fg; for (const p of particles) { const segFrac = clamp01((now - p.segStart) / SEG_MS); const ease = easeInOutCubic(segFrac); const x = lerp(boundaryX[p.segIndex] ?? 0, boundaryX[p.segIndex + 1] ?? w, ease); const passingNipAhead = p.segIndex < stageCount; let compressT = 0; if (passingNipAhead && segFrac >= 1 - NIP_MS / SEG_MS) { compressT = (segFrac - (1 - NIP_MS / SEG_MS)) / (NIP_MS / SEG_MS); } const squish = Math.sin(Math.PI * clamp01(compressT)) * 0.45; const diamPre = p.baseDiameter * Math.pow(REDUCTION, Math.min(p.segIndex, stageCount)); const diamPost = p.baseDiameter * Math.pow(REDUCTION, Math.min(p.segIndex + 1, stageCount)); const diameter = passingNipAhead ? lerp(diamPre, diamPost, compressT) : diamPre; const rx = Math.max(0.5, (diameter / 2) * (1 + squish * 0.6)); const ry = Math.max(0.5, (diameter / 2) * (1 - squish)); const yOffsetNow = passingNipAhead ? lerp(p.yOffset, 0, compressT) : p.yOffset; const y = centerY + yOffsetNow; ctx.beginPath(); ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2); ctx.fill(); } }; const step = (now: number, dt: number) => { const { stageCount, jitterAmp } = layout; const totalSegs = stageCount + 1; spawnAcc += dt; const spawnInterval = 1000 / FEED_RATE; while (spawnAcc >= spawnInterval && particles.length < POP_CAP * 2) { spawnAcc -= spawnInterval; particles.push({ id: idCounter++, segIndex: 0, segStart: now, yOffset: (Math.random() * 2 - 1) * jitterAmp, baseDiameter: BASE_DIAM_MIN + Math.random() * (BASE_DIAM_MAX - BASE_DIAM_MIN), }); } const next: Particle[] = []; for (const p of particles) { const segFrac = (now - p.segStart) / SEG_MS; if (segFrac >= 1) { const crossedNip = p.segIndex < stageCount; const overshoot = (segFrac - 1) * SEG_MS; const newSegIndex = p.segIndex + 1; if (newSegIndex >= totalSegs) continue; // exited the pipeline p.segIndex = newSegIndex; p.segStart = now - overshoot; if (crossedNip && next.length < POP_CAP) { // a kernel breaks into fragments: 1:2 split, capped at steady state next.push({ ...p, id: idCounter++, yOffset: (Math.random() * 2 - 1) * jitterAmp, }); } } next.push(p); } particles = next; fastAngle = (fastAngle + FAST_REV_S * 360 * (dt / 1000)) % 360; slowAngle = (slowAngle + SLOW_REV_S * 360 * (dt / 1000)) % 360; }; const loop = (now: number) => { raf = 0; if (!visible || !sized) return; if (last === 0) last = now; const dt = Math.min(100, now - last); last = now; step(now, dt); applyRollerStyles(); draw(now); raf = requestAnimationFrame(loop); }; // -- reduced motion: freeze on a deliberately chosen non-t0 frame — mid // nip at stage 2, with the full size-reduction gradient already visible // across the rest of the pipeline. No rAF loop is ever started. ------- const renderReducedFrame = () => { const { stageCount, jitterAmp } = layout; fastAngle = 132; slowAngle = 47; const frameParticles: Particle[] = []; // one particle resting mid-segment for every travel segment... for (let seg = 0; seg <= stageCount; seg++) { frameParticles.push({ id: seg, segIndex: seg, segStart: -SEG_MS * 0.45, yOffset: (seg % 2 === 0 ? 1 : -1) * jitterAmp * 0.4, baseDiameter: (BASE_DIAM_MIN + BASE_DIAM_MAX) / 2, }); } // ...except stage index 1 ("stage 2"), caught mid-compression in its nip. if (stageCount >= 2) { frameParticles[1] = { id: 99, segIndex: 1, segStart: -(SEG_MS - NIP_MS / 2), yOffset: 0, baseDiameter: (BASE_DIAM_MIN + BASE_DIAM_MAX) / 2, }; } particles = frameParticles; applyRollerStyles(); draw(0); }; const resize = () => { const rect = root.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) { sized = false; return; } layout = computeLayout(rect.width, rect.height); dpr = Math.min(2, window.devicePixelRatio || 1); canvas.style.width = `${rect.width}px`; canvas.style.height = `${rect.height}px`; canvas.width = Math.round(rect.width * dpr); canvas.height = Math.round(rect.height * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); sized = true; if (reduced) { renderReducedFrame(); return; } last = 0; if (!raf) raf = requestAnimationFrame(loop); }; const ro = new ResizeObserver(resize); ro.observe(root); resize(); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced && sized && !raf) { last = 0; raf = requestAnimationFrame(loop); } }); io.observe(root); const onVis = () => { visible = document.visibilityState === "visible"; if (visible && !reduced && sized && !raf) { last = 0; raf = requestAnimationFrame(loop); } }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); raf = 0; ro.disconnect(); io.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVis); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // stage count is not known until measured; render a fixed max of 4 stage // shells (the effect only ever writes styles onto however many the // current layout uses, the rest stay display:none via the loop below — // but since stageCount is derived from the same measurement the effect // uses, we just always mount 4 and let unused ones sit off in width 0). const stageSlots = [0, 1, 2, 3]; return (

{stageSlots.map((i) => (

{ hairlineRefs.current[i] = el; }} /> ))} {stageSlots.map((i) => (

{ stageRefs.current[i] = el; }} className="absolute" aria-hidden="true" >

{ fastRefs.current[i] = el; }} className="absolute left-0 top-0 rounded-full" style={{ background: "var(--ns-muted)", backgroundImage: `repeating-conic-gradient(from 0deg, var(--foreground) 0deg ${ 360 / RIDGE_COUNT / 2 }deg, transparent ${360 / RIDGE_COUNT / 2}deg ${360 / RIDGE_COUNT}deg)`, opacity: 0.92, }} />

{ slowRefs.current[i] = el; }} className="absolute left-0 top-0 rounded-full" style={{ background: "var(--ns-muted)", backgroundImage: `repeating-conic-gradient(from 0deg, var(--foreground) 0deg ${ 360 / RIDGE_COUNT / 2 }deg, transparent ${360 / RIDGE_COUNT / 2}deg ${360 / RIDGE_COUNT}deg)`, opacity: 0.92, }} />

))}

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