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:T32ce,"use client"; import { useEffect, useId, useRef, useState } from "react"; // --------------------------------------------------------------------------- // BimetalTrip — a data-driven threshold indicator built like a thermostat's // bimetallic strip. One SVG quadratic-bezier path is fixed at two mounting // posts; only its control point moves, offset upward as `value` climbs // toward `tripAt` — straight at the bottom of the range, closing in on (but // deliberately never quite touching) the contact pad as it nears the trip // point, so there is always a real gap left for the latch to snap shut. That // crossing LATCHES: the strip stays pinned at full bow (heavier --foreground // stroke, filled contact pad — never // --ns-accent, latching is data state, not interaction) regardless of value // wobbling anywhere between `clearAt` and `tripAt`. It only relaxes back // once value falls below `clearAt`, the lower re-arm mark — that gap between // where it trips and where it clears is hysteresis made visible, not implied // by a color. The snap into contact is a 320ms CSS `d`-transition on a // back-out curve (~12% overshoot, no JS spring loop); the re-arm relax is a // slow 600ms ease-out-expo settle; ordinary climbing between ticks gets a // quick, non-overshooting ease. A muted hairline band under the strip spans // clearAt..tripAt on the same x-domain as the strip's own mounts, with a // live position marker and Geist Mono 'clears N / trips N' captions, so the // two thresholds are legible from a single still frame. Every stroke/fill is // a token class (text-foreground/text-ns-muted/text-border) — no hex, no // canvas. DOM+SVG+CSS only. // --------------------------------------------------------------------------- export interface BimetalTripProps { /** the live metric being watched */ value: number; /** the upper threshold — crossing it latches the strip against the contact */ tripAt: number; /** the lower re-arm mark — the strip only relaxes once value falls below this */ clearAt: number; /** domain floor for the visual scale (default 0) */ min?: number; /** domain ceiling for the visual scale (default 100) */ max?: number; /** unit suffix for readouts, e.g. "%", "ms", "req/s" (default "%") */ unit?: string; /** what's being watched, shown above the strip, e.g. "CPU temp" */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } // geometry, SVG viewBox units const VIEW_W = 320; const VIEW_H = 150; const ANCHOR_L_X = 40; const ANCHOR_R_X = 280; const MID_X = (ANCHOR_L_X + ANCHOR_R_X) / 2; const BASE_Y = 62; const MAX_CONTROL_OFFSET = 46; // control-point y-offset at full bow (bowFrac 1) const PEAK_OFFSET = MAX_CONTROL_OFFSET / 2; // a quadratic's true peak sits at half the control offset const CONTACT_Y = BASE_Y - PEAK_OFFSET; // where the strip's tip meets the pad, fully latched const POST_TOP_Y = CONTACT_Y - 18; const PAD_W = 16; const PAD_H = 5; const BAND_Y = 112; const BAND_H = 6; const TICK_H = 10; // the unlatched approach curve's ceiling — kept below 1 (full/latched bow) so // there is always a real geometric gap left against the contact pad for the // latch's snap to close; see the bowFrac comment below for why this matters. const UNLATCHED_BOW_CEILING = 0.75; type TransitionKind = "climb" | "snap" | "rearm"; function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } function fmt(n: number) { if (!Number.isFinite(n)) return "0"; const abs = Math.abs(n); if (Number.isInteger(n) || abs >= 100) return Math.round(n).toString(); return n.toFixed(1); } function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } function transitionStyle(kind: TransitionKind, reduced: boolean) { // The strip's curvature IS the reading (latched vs. clear) — a 0ms jump // removes the only passive signal that value crossed a threshold. Keep a // short, non-overshooting linear settle instead of the full snap/rearm // spring curves. if (reduced) return { transitionDuration: "140ms", transitionTimingFunction: "linear" }; if (kind === "snap") { return { transitionDuration: "320ms", transitionTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)", }; } if (kind === "rearm") { return { transitionDuration: "600ms", transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", }; } return { transitionDuration: "260ms", transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", }; } export function BimetalTrip({ value, tripAt, clearAt, min = 0, max = 100, unit = "%", label = "Threshold", className = "", }: BimetalTripProps) { const uid = useId(); const reduced = useReducedMotion(); // latched is derived data state, initialized once from the mounting value // so a demo/dashboard that mounts already past tripAt renders latched with // no spurious snap animation on first paint. const [latched, setLatched] = useState(() => value >= tripAt); const [transitionKind, setTransitionKind] = useState("climb"); const [announce, setAnnounce] = useState(""); const mountedRef = useRef(false); useEffect(() => { if (!mountedRef.current) { mountedRef.current = true; return; } if (!latched && value >= tripAt) { setLatched(true); setTransitionKind("snap"); setAnnounce( `Latched — ${fmt(value)}${unit} crossed trip at ${fmt(tripAt)}${unit}. Holds until it falls below ${fmt(clearAt)}${unit}.` ); } else if (latched && value < clearAt) { setLatched(false); setTransitionKind("rearm"); setAnnounce(`Re-armed — ${fmt(value)}${unit} fell below clear mark ${fmt(clearAt)}${unit}.`); } else { setTransitionKind("climb"); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, tripAt, clearAt]); // BUG FIX: bowFrac must never let the *unlatched* approach curve reach the // same numeric value as the *latched* pinned bow (1). It used to — clamp() // saturated the unlatched formula to exactly 1 the instant value reached // tripAt, which is the same value the latch pins to, so by the time the // `latched` effect actually flipped (one tick later) the path's `d` hadn't // changed at all: no delta for the CSS transition to animate, so the // signature 320ms back-out "snap into contact" never played — the strip // just silently arrived already fully bowed. Capping the unlatched // approach short of 1 keeps a real, persistent gap against the contact pad // (matching "closes a visible gap" below) so crossing tripAt always leaves // genuine distance for the snap to close, regardless of step size. const safeTripAt = tripAt > min ? tripAt : min + 1e-6; const approachFrac = clamp((value - min) / (safeTripAt - min), 0, 1); const bowFrac = latched ? 1 : approachFrac * UNLATCHED_BOW_CEILING; const controlY = BASE_Y - bowFrac * MAX_CONTROL_OFFSET; const stripD = `M ${ANCHOR_L_X} ${BASE_Y} Q ${MID_X} ${controlY} ${ANCHOR_R_X} ${BASE_Y}`; const stripStyle = transitionStyle(transitionKind, reduced); const domain = Math.max(1e-6, max - min); const xFor = (v: number) => ANCHOR_L_X + (clamp(v, min, max) - min) / domain * (ANCHOR_R_X - ANCHOR_L_X); const xClear = xFor(clearAt); const xTrip = xFor(tripAt); const xValue = xFor(value); const labelId = `${uid}-label`; const descId = `${uid}-desc`; const liveId = `${uid}-live`; const valueText = `${fmt(value)}${unit}, ${latched ? "latched" : "clear"}, trips at ${fmt(tripAt)}${unit}, clears at ${fmt(clearAt)}${unit}`; const stateWord = latched ? "LATCHED" : "CLEAR"; const description = latched ? `Latched at ${fmt(value)}${unit} — trips at ${fmt(tripAt)}${unit}, will re-arm below ${fmt(clearAt)}${unit}.` : `Clear at ${fmt(value)}${unit} — trips at ${fmt(tripAt)}${unit}, clears at ${fmt(clearAt)}${unit}.`; return (

{label.toUpperCase()} {stateWord}

{fmt(value)} {unit}

clears {fmt(clearAt)} {unit} trips {fmt(tripAt)} {unit}

{description}

{announce}

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