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:T33ae,"use client"; import { useEffect, useId, useRef, useState, type ReactNode } from "react"; // --------------------------------------------------------------------------- // HeatSoak — a rate-limited button whose own body is the thermometer. A // scalar `h` ("heat") accumulates +0.34 per press and decays exponentially // (half-life 2.5s) in a single rAF loop, written straight onto the button as // a `--heat` CSS custom property. All visual layers read that one property // (clamped to 1 via CSS `min()` as `--h`, plus a `--warm` ramp that's 0 below // h=0.7 and climbs 0->1 across 0.7-1.0): letter-spacing, scale and // border-color dilate the button itself; a bottom-up fill layer reads --h // directly so the accumulated heat has an actual gauge to point at, not just // a swelling border; a soft haze band sweeps the surface at an opacity gated // to --warm, so it's only visible once the button is genuinely close to (or // still cooling from) the limit — never at rest. No progress bar, no digit: // the fill and the shimmer *are* the gauge. // // Past a duty cycle (h >= 1.0) it "soaks": the flag latches (hysteresis — // re-arms only once h decays back to <= 0.05, i.e. genuinely cooled, not // merely below the limit again, so one press right after re-arming can't // instantly punch it back over SOAK_AT and the lockout holds for the whole // cooldown, not a sliver of it), the fill grows a diagonal hazard hatch and // breathes gently — a distinct, unmissable "dead" read, not just the same // warm tone held longer — // and the label itself dims toward --ns-muted. Further presses no-op the actual // action, instead getting a flat, dead 1px translateY dip that eases back // with no spring overshoot — an "overdamped" non-response, not a bigger // animation (the hazard breathing is a separate, deliberately ambient loop, // not the dip's feedback). aria-disabled (never the native `disabled` // attribute) keeps the button in the tab order and clickable the whole time; // a visible Geist Mono caption under the button duplicates every thermal cue // in words ("heat 62%", then "cooling down, ready in about 4s") so nothing // here rides on motion alone, and a separate sr-only aria-live=polite span // announces only the two discrete transitions (entered soak / re-armed) // rather than re-reading a ticking countdown. // // The same fill and haze double as the cooldown display: nothing resets when // soak ends, --h and --warm just keep draining as h decays, so the gauge // that filled up on the way to the limit is the same gauge visibly emptying // back out afterward. // // The countdown text recomputes from the live decay math (t = ln(h/REARM_AT)/k) // but only commits to the DOM at most once a second, per the brief — the // `--heat` variable itself still updates every rAF frame underneath it, so // the visual swelling stays smooth while the words update at a sane pace. // // Reduced motion is a pure CSS override (`transform: none`, `letter-spacing: // 0`, haze `display: none`, hazard breathing frozen at full opacity, all // under the media query, `!important`) — synchronous at first paint, no JS // race with a `matchMedia` effect. The fill and border stay fully legible // without any motion; the caption and aria-live text are identical either // way, already the non-motion channel for this state. // // Every color is a token: --border, --foreground and --ns-muted only, mixed // with `color-mix()` — never --ns-accent (interaction-only, reserved for the // focus ring), no hex, no canvas. DOM+CSS only. // --------------------------------------------------------------------------- const HEAT_PER_PRESS = 0.34; const HALF_LIFE_S = 2.5; const DECAY_K = Math.LN2 / HALF_LIFE_S; // per second const SOAK_AT = 1.0; // Re-arm near fully cooled, not near the limit: at 0.7 a single subsequent // press (+0.34) instantly punched back over SOAK_AT, so the lockout was // only ever honored for ~1.4s of an ~11s decay — a click "during cooldown" // looked like it refilled because functionally it did. 0.05 forces the // button to actually finish cooling (and keeps showing the soaked/hazard // visual the whole time, since that reads off the same flag) before a press // can do anything again. const REARM_AT = 0.05; const DIP_FALL_S = 0.18; // linear, no bounce — "overdamped" const CAPTION_MIN_INTERVAL_MS = 1000; function clampDt(dt: number) { // guards against a huge dt after a backgrounded tab / dropped frames return Math.max(0, Math.min(dt, 0.1)); } function etaSeconds(h: number) { if (h <= REARM_AT) return 0; return Math.max(1, Math.ceil(Math.log(h / REARM_AT) / DECAY_K)); } function captionFor(h: number, soaked: boolean) { if (soaked) return `cooling down, ready in about ${etaSeconds(h)}s`; if (h <= 0.01) return "ready"; return `heat ${Math.round(Math.min(h, 1) * 100)}%`; } export interface HeatSoakProps { /** Visible label — also the button's accessible name. */ children: ReactNode; /** Fires on every press that isn't soaked — the actual rate-limited action. */ onPress?: () => void; /** extra classes merged onto the rendered root element */ className?: string; } export function HeatSoak({ children, onPress, className = "" }: HeatSoakProps) { const uid = useId(); const btnRef = useRef(null); const hRef = useRef(0); const dipRef = useRef(0); const soakedRef = useRef(false); const rafRef = useRef(0); const lastTsRef = useRef(0); const lastCaptionTsRef = useRef(0); const wakeRef = useRef<() => void>(() => {}); const [soaked, setSoaked] = useState(false); const [caption, setCaption] = useState("ready"); const [announce, setAnnounce] = useState(""); const descId = `${uid}-desc`; // -- rAF loop: decays h and the dip, writes --heat/--dip, watches the // re-arm edge, and throttles the caption's own re-renders. Sleeps once // both scalars settle and the flag is clear, exactly like this registry's // other rAF-driven scalars (toast-undo-fuse's ember spring, etc). useEffect(() => { const tick = (now: number) => { const dt = clampDt((now - lastTsRef.current) / 1000); lastTsRef.current = now; let h = hRef.current; if (h > 0) { h = h * Math.exp(-DECAY_K * dt); if (h < 1e-3) h = 0; } hRef.current = h; let d = dipRef.current; if (d > 0) { d = Math.max(0, d - dt / DIP_FALL_S); dipRef.current = d; } const btn = btnRef.current; if (btn) { btn.style.setProperty("--heat", h.toFixed(4)); btn.style.setProperty("--dip", d.toFixed(4)); } if (soakedRef.current && h <= REARM_AT) { soakedRef.current = false; setSoaked(false); setAnnounce("Re-armed — ready to press again."); lastCaptionTsRef.current = now; setCaption(captionFor(h, false)); } else if (now - lastCaptionTsRef.current >= CAPTION_MIN_INTERVAL_MS) { lastCaptionTsRef.current = now; setCaption((prev) => { const next = captionFor(h, soakedRef.current); return next === prev ? prev : next; }); } if (h > 0 || d > 0 || soakedRef.current) { rafRef.current = requestAnimationFrame(tick); } else { rafRef.current = 0; } }; wakeRef.current = () => { if (!rafRef.current) { lastTsRef.current = performance.now(); rafRef.current = requestAnimationFrame(tick); } }; return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); rafRef.current = 0; }; }, []); const wakeLoop = () => wakeRef.current(); const handleClick = () => { if (soakedRef.current) { // dead press: flat feedback only, no heat, no action dipRef.current = 1; wakeLoop(); return; } hRef.current += HEAT_PER_PRESS; onPress?.(); if (hRef.current >= SOAK_AT) { soakedRef.current = true; setSoaked(true); setAnnounce( `Soaked — cooling down, ready in about ${etaSeconds(hRef.current)}s.` ); } lastCaptionTsRef.current = 0; // force an immediate caption refresh wakeLoop(); }; return (

{caption}

{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/button-cooldown-heat/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/button-cooldown-heat.tsx"}],"className":"h-[70svh] min-h-80"}]]}]