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:T230e,"use client"; import { useEffect, useId, useRef } from "react"; // --------------------------------------------------------------------------- // SteamTrapBatchFlush — an inline sync-status glyph modelled on a // float-and-thermostatic steam trap: condensate (locally-buffered pending // events) collects in a small chamber until a float trips a discharge valve // open, the chamber blows down fast, and it starts refilling immediately. // The read is entirely motion + fill level, no colour swap, no icon change. // // Real numbers from the spec: fill takes 3.2s to go from empty (0%) to the // trip line (88% of chamber height) — that sets a constant fill rate of // 0.88/3.2 = 0.275 fraction/s, applied continuously whenever the chamber is // filling, including the post-blowdown refill that resumes from 6% rather // than 0%. Blowdown itself is 340ms, fraction falling 88% -> 6% on an // eased-out curve (fast, front-loaded — the real mechanical blowdown is far // quicker than the fill it releases). The float rides the top of the fill // and overshoots 2 (viewBox) units below the falling fill line during // blowdown before settling back onto the new level over a short damped // window — the mechanical snap-back read that separates this from a plain // sawtooth reset. // // Because refill resumes from 6% (not 0%) at the same constant rate, the // steady-state loop is genuinely periodic: fill 6% -> 88% takes // (0.88-0.06)/0.275 ~= 2.98s, plus the 340ms blowdown, for a full cycle of // ~3.32s — close to the spec's "~3.6s", the difference being that a // constant, spec-derived fill rate is preserved exactly rather than padding // the cycle to hit the round number. // --------------------------------------------------------------------------- const TRIP_FRACTION = 0.88; const LOW_FRACTION = 0.06; const FILL_DURATION_MS = 3200; // empty (0) -> trip (0.88), sets the rate const FILL_RATE = TRIP_FRACTION / (FILL_DURATION_MS / 1000); // fraction / s const BLOWDOWN_MS = 340; const OVERSHOOT_UNITS = 2; // viewBox units the float dips past the settled line const OVERSHOOT_SETTLE_MS = 180; // chamber geometry, 24x24 viewBox const CHAMBER = { x: 5, y: 3, w: 14, h: 18, rx: 2 }; const FILL_X = 6; const FILL_W = 12; const FILL_BOTTOM = 20; // chamber inner floor const FILL_TOP_MAX = 4; // chamber inner ceiling (fraction = 1) const FILL_SPAN = FILL_BOTTOM - FILL_TOP_MAX; // 16 units of usable height const FLOAT_CX = FILL_X + FILL_W / 2; const FLOAT_R = 1.4; const STROKE_WIDTH = 1.25; // physical px via non-scaling-stroke, floors > 1px function fractionToY(fraction: number): number { return FILL_BOTTOM - fraction * FILL_SPAN; } function easeOutCubic(t: number): number { const u = 1 - t; return 1 - u * u * u; } function clamp01(t: number): number { return t < 0 ? 0 : t > 1 ? 1 : t; } export interface SteamTrapBatchFlushProps { /** glyph size in px, meant to sit inline beside a text label. legible 24-64. */ size?: number; /** accessible label for the static role="img" description */ label?: string; /** * renders as a focusable button that forces an early blowdown on press — * omit for the pure ambient/status read (default). The forced blowdown * reuses the exact same 340ms eased-out curve and never changes the trip * threshold; it just starts blowdown from whatever fraction the chamber * is currently at instead of waiting for the 88% trip. */ interactive?: boolean; /** called once a forced or natural blowdown starts, only when interactive */ onFlush?: () => void; /** extra classes merged onto the rendered root element */ className?: string; } export function SteamTrapBatchFlush({ size = 24, label = "Syncing", interactive = false, onFlush, className = "", }: SteamTrapBatchFlushProps) { const clipId = useId(); const fillRef = useRef(null); const floatRef = useRef(null); const rootRef = useRef(null); const forceFlushRef = useRef<() => void>(() => {}); useEffect(() => { const fillEl = fillRef.current; const floatEl = floatRef.current; const root = rootRef.current; if (!fillEl || !floatEl || !root) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const applyFrame = (fraction: number, overshoot: number) => { const y = fractionToY(fraction); fillEl.setAttribute("y", y.toFixed(2)); fillEl.setAttribute("height", Math.max(0, FILL_BOTTOM - y).toFixed(2)); floatEl.setAttribute("cy", (y + overshoot).toFixed(2)); }; if (reduced) { // TRIP_POINT freeze frame: fill at 88%, float at its highest point, // the instant before blowdown — the most information-dense frame, // showing the full chamber, the trip threshold and the float at once. applyFrame(TRIP_FRACTION, 0); return; } let disposed = false; let visible = true; let raf = 0; type Phase = "filling" | "blowdown"; let phase: Phase = "filling"; let fraction = LOW_FRACTION + Math.random() * (TRIP_FRACTION - LOW_FRACTION); let blowdownStart = 0; let blowdownFrom = TRIP_FRACTION; let settleStart = -Infinity; let settleFrom = 0; let last = 0; const startBlowdown = (now: number, from: number) => { phase = "blowdown"; blowdownStart = now; blowdownFrom = from; onFlush?.(); }; forceFlushRef.current = () => { if (phase !== "filling") return; startBlowdown(performance.now(), fraction); }; const tick = (now: number) => { raf = 0; if (!visible) return; if (last === 0) last = now; const dt = Math.min(100, now - last) / 1000; last = now; let overshoot = 0; if (phase === "filling") { fraction = Math.min(TRIP_FRACTION, fraction + FILL_RATE * dt); if (fraction >= TRIP_FRACTION) startBlowdown(now, TRIP_FRACTION); } else { const t = clamp01((now - blowdownStart) / BLOWDOWN_MS); const eased = easeOutCubic(t); fraction = blowdownFrom + (LOW_FRACTION - blowdownFrom) * eased; overshoot = OVERSHOOT_UNITS * eased; if (t >= 1) { phase = "filling"; settleStart = now; settleFrom = OVERSHOOT_UNITS; } } if (now - settleStart < OVERSHOOT_SETTLE_MS) { const st = clamp01((now - settleStart) / OVERSHOOT_SETTLE_MS); overshoot = settleFrom * (1 - easeOutCubic(st)); } applyFrame(fraction, overshoot); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !raf) { last = 0; raf = requestAnimationFrame(tick); } }); io.observe(root); return () => { disposed = true; void disposed; cancelAnimationFrame(raf); raf = 0; io.disconnect(); forceFlushRef.current = () => {}; }; }, [onFlush]); const glyph = ( ); if (interactive) { return ( ); } return ( } role="img" aria-label={label} className={`inline-flex shrink-0 items-center justify-center ${className}`} style={{ width: size, height: size }} > {glyph} ); } 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/steam-trap-batch-flush/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/steam-trap-batch-flush.tsx"}],"className":"h-[70svh] min-h-80"}]]}]