Confirm Dial Align

1"use client";
2 
3import { useEffect, useRef, useState, type ReactNode } from "react";
4 
5// TumblerGate — a destructive-action confirm gated on ACCURACY, the third
6// axis besides confirm-hold-ink's time and confirm-slide-shatter's distance. An
7// SVG dial carries one rotating notch; it must be turned (drag, wheel, or
8// arrow keys) until the notch sits within 3deg of the fixed index mark and
9// HELD there for a 400ms dwell — leaving the band before the dwell completes
10// is a failed catch: the dial springs out to +8deg like a safe tumbler that
11// almost caught and slipped. Completing the dwell spring-snaps to exact
12// zero, both ticks thicken to --foreground, and the destructive button arms
13// (its one legitimate use of --accent). Because fine-motor precision is
14// hostile to some users, an always-visible "type to confirm" disclosure
15// offers an equivalent path, and two failed catches auto-expand it. Direct-
16// DOM writes on the drag/spring hot path, React state only at the rare
17// armed/failed/fallback transitions. Zero deps.
18 
19const TOL = 3; // deg — dwell capture band around the index mark
20const DWELL_MS = 400;
21const STEP = 2; // deg per wheel tick / arrow key
22const FRICTION = 0.6; // drag angular delta damping
23const SLIP_TARGET = 8; // deg — where a failed catch springs out to
24const SNAP_K = 260;
25const SNAP_ZETA = 0.85; // one tiny overshoot settling to exact zero
26const SLIP_K = 380;
27const SLIP_ZETA = 0.55; // stiffer, snappier "give"
28const SETTLE_EPS = 0.05; // deg
29const V_EPS = 0.3; // deg/s
30const FORCE_SETTLE_MS = 700;
31 
32function wrapDeg(a: number) {
33  let r = a % 360;
34  if (r > 180) r -= 360;
35  if (r <= -180) r += 360;
36  return r;
37}
38 
39export function TumblerGate({
40  destructiveLabel = "Delete organization",
41  doneLabel = "Deleted",
42  confirmWord = "delete",
43  initialAngle = 150,
44  onConfirm,
45  className = "",
46}: {
47  destructiveLabel?: ReactNode;
48  doneLabel?: ReactNode;
49  /** word the type-to-confirm fallback checks against, case-insensitive */
50  confirmWord?: string;
51  /** starting dial offset in degrees from the index mark */
52  initialAngle?: number;
53  onConfirm?: () => void;
54  className?: string;
55}) {
56  const knobRef = useRef<HTMLDivElement>(null);
57  const inputRef = useRef<HTMLInputElement>(null);
58  const notchGroupRef = useRef<SVGGElement>(null);
59  const notchLineRef = useRef<SVGLineElement>(null);
60  const indexLineRef = useRef<SVGLineElement>(null);
61 
62  const [armed, setArmed] = useState(false);
63// … truncated