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:T2d55,"use client"; import { useEffect, useRef } from "react"; // GrindingChatterLobes — a card-scale loader substitute built on regenerative // chatter in cylindrical (OD) grinding (Tobias/Merritt theory as applied to // grinding-process control): the wheel re-cuts the wavy profile its own // previous pass left on the workpiece, and under the right speed ratio that // wave self-amplifies into a stable N-lobed pattern before saturating against // contact stiffness. A dress event clears the regenerative memory and a new // lobe count begins. Canvas 2D, DPR clamp 2, direct-DOM rAF, sleeps for // nothing (the loop is unbounded by design — this stands in for "busy"). // The rim profile is recomputed from a coefficient (N, amplitude, phase) // every frame, never accumulated pixel history, so cost stays flat. const TWO_PI = Math.PI * 2; const DEG = Math.PI / 180; const LOBE_COUNTS = [5, 6, 7, 8, 9, 10, 11]; const WORKPIECE_REV_PER_S = 0.15; // slowed from real 1-5 rev/s wheelhead speeds const RADIUS_RATIO = 0.38; // disc radius = 0.38 * min(w, h) const AMAX_RATIO = 0.06; // Amax = 0.06 * radius const GROWTH_S = 40; // dress event every 40s const DRESS_MS = 1200; // lobes fade to a smooth circle over 1.2s const PERIOD_S = GROWTH_S + DRESS_MS / 1000; // logistic center + rate chosen so amplitude visibly ramps ~5% -> ~95% of // Amax over the first 6s of a growth cycle, then plateaus (self-limiting // saturation against contact stiffness, not unbounded growth). const LOGISTIC_CENTER_S = 3; const LOGISTIC_RATE = Math.log(19) / 3; const BOOST_WINDOW_RAD = 15 * DEG; // half-width of the 30deg pointer window const BOOST_MULT = 1.5; // local amplitude growth boost while pointer is near const BOOST_TAU_MS = 500 / 3; // ~3 tau to settle within the spec's 500ms decay // reduced-motion freeze frame: a static mid-growth profile, not tied to the // live logistic curve's exact constants — deliberately the most structured // single frame, named explicitly per the round 9 rule. const FREEZE_PHASE = "lobe-70pct"; const FREEZE_AMPLITUDE_RATIO = 0.7; const FREEZE_LOBE_COUNT = 8; const FREEZE_ROTATION_RAD = -20 * DEG; const BINS = 360; function wrapPi(a: number) { a = ((a + Math.PI) % TWO_PI + TWO_PI) % TWO_PI; return a - Math.PI; } 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; }; } function logisticAmplitude(t: number, amax: number) { const f = 1 / (1 + Math.exp(-LOGISTIC_RATE * (t - LOGISTIC_CENTER_S))); return f * amax; } function easeOutCubic(x: number) { const inv = 1 - x; return 1 - inv * inv * inv; } export interface GrindingChatterLobesProps { /** accessible status text announced to assistive tech */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function GrindingChatterLobes({ label = "Loading", className = "", }: GrindingChatterLobesProps) { 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; let disposed = false; let visible = true; let raf = 0; let w = 0; let h = 0; let dpr = 1; let radius = 0; let fgColor = "#171717"; let bgColor = "#ffffff"; let mutedRGBA = "rgba(140,140,140,0.55)"; // -- token read: no paint happens before this runs at least once. ----- const deriveColors = () => { const cs = getComputedStyle(document.documentElement); const fg = cs.getPropertyValue("--foreground").trim(); const bg = cs.getPropertyValue("--background").trim(); const muted = cs.getPropertyValue("--ns-muted").trim(); if (fg) fgColor = fg; if (bg) bgColor = bg; if (muted) { const probe = document.createElement("canvas").getContext("2d"); if (probe) { probe.fillStyle = muted; const [r, g, b] = probe.fillStyle.match(/\d+/g)?.map(Number) ?? []; // alpha 0.55 compresses the gradient's contrast so scalloping // stays legible in light theme without approaching border-adjacent // values (checked against --border #ebebeb at the light tokens). if (r !== undefined) mutedRGBA = `rgba(${r},${g},${b},0.55)`; } } }; // -- per-cycle state, reseeded from the mount clock so a phase-desynced // start (not always t=0) means any two page loads show different // states, per spec. -------------------------------------------------- const seedBase = Math.floor(Date.now()) >>> 0; const mountOffsetS = (Date.now() / 1000) % PERIOD_S; const startPerf = performance.now(); let cycleIndex = -1; let lobeCount = LOBE_COUNTS[0]!; let basePhase = 0; const loadCycle = (idx: number) => { if (idx === cycleIndex) return; cycleIndex = idx; const rand = mulberry32(seedBase + idx * 0x9e3779b1); lobeCount = LOBE_COUNTS[Math.floor(rand() * LOBE_COUNTS.length)]!; basePhase = rand() * TWO_PI; }; let rotationAngle = 0; // -- pointer boost: locally applied contact pressure. Angle is tracked // in screen space (the contact point stays put while the disc spins // under it), decays to 0 over ~500ms after the pointer leaves. Never // touches the global dress-event clock. -------------------------------- let pointerActive = false; let pointerAngleScreen = 0; let boostEnvelope = 0; const build = () => { const rect = container.getBoundingClientRect(); w = Math.round(rect.width); h = Math.round(rect.height); if (w < 2 || h < 2) return; dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = w * dpr; canvas.height = h * dpr; radius = RADIUS_RATIO * Math.min(w, h); }; const localAmpMult = (thetaLocal: number, pointerAngleLocal: number) => { if (boostEnvelope <= 0.001) return 1; const d = Math.abs(wrapPi(thetaLocal - pointerAngleLocal)); if (d >= BOOST_WINDOW_RAD) return 1; const falloff = 0.5 * (1 + Math.cos((Math.PI * d) / BOOST_WINDOW_RAD)); return 1 + (BOOST_MULT - 1) * boostEnvelope * falloff; }; const drawRim = ( amplitude: number, lobes: number, phase: number, rotation: number, pointerAngleLocal: number ) => { const cx = w / 2; const cy = h / 2; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); ctx.save(); ctx.translate(cx, cy); ctx.rotate(rotation); ctx.beginPath(); for (let i = 0; i <= BINS; i++) { const theta = (i % BINS) * DEG; const mult = localAmpMult(theta, pointerAngleLocal); const r = radius + amplitude * Math.cos(lobes * theta + phase) * mult; const x = r * Math.cos(theta); const y = r * Math.sin(theta); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); const grad = ctx.createRadialGradient( 0, 0, 0, 0, 0, radius * (1 + AMAX_RATIO) ); grad.addColorStop(0, bgColor); grad.addColorStop(1, mutedRGBA); ctx.fillStyle = grad; ctx.fill(); ctx.lineWidth = 1.5; ctx.strokeStyle = fgColor; ctx.stroke(); ctx.restore(); }; // -- static reduced-motion frame: freeze on the named, deliberately // chosen most-structured frame, not t0. No loop, no listeners beyond // resize/theme so colours still stay correct. ------------------------- const drawReduced = () => { if (w < 2 || h < 2 || radius <= 0) return; const amax = AMAX_RATIO * radius; drawRim( FREEZE_AMPLITUDE_RATIO * amax, FREEZE_LOBE_COUNT, 0, FREEZE_ROTATION_RAD, 0 ); }; let last = 0; 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; rotationAngle = (rotationAngle + TWO_PI * WORKPIECE_REV_PER_S * dt) % TWO_PI; boostEnvelope += ((pointerActive ? 1 : 0) - boostEnvelope) * (1 - Math.exp(-dt * 1000 / BOOST_TAU_MS)); const elapsed = (now - startPerf) / 1000 + mountOffsetS; const idx = Math.floor(elapsed / PERIOD_S); const tc = elapsed - idx * PERIOD_S; loadCycle(idx); const amax = AMAX_RATIO * radius; let amplitude: number; if (tc < GROWTH_S) { amplitude = logisticAmplitude(tc, amax); } else { const plateau = logisticAmplitude(GROWTH_S, amax); const dressT = Math.min(1, (tc - GROWTH_S) / (DRESS_MS / 1000)); amplitude = plateau * (1 - easeOutCubic(dressT)); } const pointerAngleLocal = wrapPi(pointerAngleScreen - rotationAngle); if (w >= 2 && h >= 2 && radius > 0) { drawRim(amplitude, lobeCount, basePhase, rotationAngle, pointerAngleLocal); } raf = requestAnimationFrame(loop); }; const startLoop = () => { if (!raf && !reduced) { last = 0; raf = requestAnimationFrame(loop); } }; const pointerAngleFromEvent = (e: PointerEvent) => { const r = container.getBoundingClientRect(); return Math.atan2( e.clientY - (r.top + r.height / 2), e.clientX - (r.left + r.width / 2) ); }; const onPointerMove = (e: PointerEvent) => { pointerActive = true; pointerAngleScreen = pointerAngleFromEvent(e); }; const onPointerLeave = () => { pointerActive = false; }; 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}

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