Button Cooldown Heat

1"use client";
2 
3import { useEffect, useId, useRef, useState, type ReactNode } from "react";
4 
5// ---------------------------------------------------------------------------
6// HeatSoak — a rate-limited button whose own body is the thermometer. A
7// scalar `h` ("heat") accumulates +0.34 per press and decays exponentially
8// (half-life 2.5s) in a single rAF loop, written straight onto the button as
9// a `--heat` CSS custom property. All visual layers read that one property
10// (clamped to 1 via CSS `min()` as `--h`, plus a `--warm` ramp that's 0 below
11// h=0.7 and climbs 0->1 across 0.7-1.0): letter-spacing, scale and
12// border-color dilate the button itself; a bottom-up fill layer reads --h
13// directly so the accumulated heat has an actual gauge to point at, not just
14// a swelling border; a soft haze band sweeps the surface at an opacity gated
15// to --warm, so it's only visible once the button is genuinely close to (or
16// still cooling from) the limit — never at rest. No progress bar, no digit:
17// the fill and the shimmer *are* the gauge.
18//
19// Past a duty cycle (h >= 1.0) it "soaks": the flag latches (hysteresis —
20// re-arms only once h decays back to <= 0.05, i.e. genuinely cooled, not
21// merely below the limit again, so one press right after re-arming can't
22// instantly punch it back over SOAK_AT and the lockout holds for the whole
23// cooldown, not a sliver of it), the fill grows a diagonal hazard hatch and
24// breathes gently — a distinct, unmissable "dead" read, not just the same
25// warm tone held longer —
26// and the label itself dims toward --muted. Further presses no-op the actual
27// action, instead getting a flat, dead 1px translateY dip that eases back
28// with no spring overshoot — an "overdamped" non-response, not a bigger
29// animation (the hazard breathing is a separate, deliberately ambient loop,
30// not the dip's feedback). aria-disabled (never the native `disabled`
31// attribute) keeps the button in the tab order and clickable the whole time;
32// a visible Geist Mono caption under the button duplicates every thermal cue
33// in words ("heat 62%", then "cooling down, ready in about 4s") so nothing
34// here rides on motion alone, and a separate sr-only aria-live=polite span
35// announces only the two discrete transitions (entered soak / re-armed)
36// rather than re-reading a ticking countdown.
37//
38// The same fill and haze double as the cooldown display: nothing resets when
39// … truncated