Copy Field Crimp

1"use client";
2 
3import { useCallback, useEffect, useId, useRef, useState, type CSSProperties } from "react";
4 
5// ---------------------------------------------------------------------------
6// CrimpCopy — a copy-to-clipboard field where the confirmation happens inside
7// the type itself, not in a toast bolted onto the corner of the screen.
8//
9// MECHANISM: the value renders as one span per character, each carrying a
10// `--cc-delay` custom property. Activating copy computes an origin character
11// index — the one nearest the pointer for a click, or index 0 for a keyboard
12// activation (native <button> click events fire with `detail === 0` when
13// triggered by Enter/Space, which is how the two are told apart without a
14// separate keydown handler) — and every character's delay becomes its
15// distance from that origin times ~18ms. A CSS keyframe animation
16// (`letter-spacing: 0 -> -0.06em -> 0`, with a hair of positive overshoot on
17// the way back out) then plays per character at its own delay, so the string
18// visibly crimps shut in a wave from the touched point and springs back
19// open — a wire getting a ferrule, not a flash of color. Characters remount
20// (keyed by an incrementing run id) on every activation so the animation
21// always plays from its start, repeat clicks included.
22//
23// Once the wave finishes sweeping outward, a small inline check (stroked in
24// --foreground) scales into the icon slot with an ease-out-expo curve, holds
25// for 1.2s, and fades back out to the idle copy glyph (--muted) — no toast,
26// no green flash, no layout shift, because the icon slot is reserved space
27// that never changes size.
28//
29// A11Y: the field is a real <button> whose accessible name is an explicit
30// `aria-label` (default derived from `label`, never from `value`) — the
31// character spans and both icons are aria-hidden, so a masked or unmasked
32// value never leaks into the accessible name either way. A visually-hidden
33// `aria-live="polite"` region announces "Copied" (cleared and reset each
34// activation so repeat copies re-announce). `prefers-reduced-motion` drops
35// the letter-spacing wave and icon transitions to near-instant but keeps the
36// check appearing and holding — the confirmation still reads, it just isn't
37// animated.
38// ---------------------------------------------------------------------------
39 
40const DELAY_PER_CHAR_MS = 18;
41const CRIMP_DURATION_MS = 420;
42const HOLD_MS = 1200;
43const MASK_CHAR = "•";
44 
45export interface CrimpCopyProps {
46// … truncated