Button Retry Backoff

1"use client";
2 
3import { useEffect, useId, useRef, useState } from "react";
4 
5// TorsionRetry — a retry button that is honest about its rate limit. Idle and
6// charged are the only pressable states; a failure winds a torsion spring: a
7// 1.5px --foreground arc grows 0->360deg around the icon's --border track on
8// LINEAR timing matched exactly to the real backoff delay (no fake easing —
9// the visual duration IS the enforced cooldown), while the refresh glyph
10// rotates slowly backward as if under tension. Reaching full wind snaps the
11// button to "charged": the icon pops with one damped-spring overshoot, the
12// glyph un-tenses 5deg forward (a permanent correction, not a bounce-back),
13// and the button gains --accent text/border as its one legitimate accent use.
14// Every failure also drops a permanent 2px --muted notch tick at a fixed
15// angular slot on the ring (1st failure always the same slot, 2nd always the
16// next, etc.) — a live history of the episode, not just its current backoff.
17// A successful retry resolves the episode: notches and attempt count reset,
18// the ring goes fully quiet. Hot-path values (arc offset, glyph rotation,
19// settle-spring) are written directly to refs every frame; React state only
20// carries status/attempt/caption, so re-renders stay coarse. Under
21// prefers-reduced-motion the arc advances in discrete steps with no glyph
22// rotation and no overshoot. Zero dependencies, DOM + SVG + CSS only.
23 
24export interface TorsionRetryProps {
25  /** called when the user presses Retry once idle/charged; resolve/return
26   *  false (or throw) to report failure, anything else counts as success */
27  onRetry?: () => Promise<boolean> | boolean;
28  /** wind duration for the first failure, ms (default 4000 — a real cooldown) */
29  baseDelayMs?: number;
30  /** multiplier applied per additional consecutive failure (default 2) */
31  factor?: number;
32  /** upper bound on wind duration regardless of attempt count (default 60000) */
33  maxDelayMs?: number;
34  /** fixed angular slots the ring can notch before saturating (default 8) —
35   *  the attempt count in the text description is never capped, only the ring */
36  maxNotches?: number;
37  /** button label in the idle/charged state (default "Retry") */
38  label?: string;
39  className?: string;
40}
41 
42type Status = "idle" | "checking" | "winding" | "charged";
43 
44const SIZE = 28;
45const CENTER = SIZE / 2;
46const TRACK_R = 10.5;
47const CIRCUMFERENCE = 2 * Math.PI * TRACK_R;
48const NOTCH_INNER = 11.25;
49// … truncated