Accordion Latch

1"use client";
2 
3import { useId, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from "react";
4 
5// ---------------------------------------------------------------------------
6// HaspFold — an accordion whose sections latch shut with a visible hasp.
7// Each closed header shows a small SVG hasp-and-staple on its right edge:
8// a fixed U-shaped staple bracket and a hinged strap+loop that, at rest,
9// hooks down over it. The whole open/close choreography is staged with
10// plain CSS transitions keyed off one `data-state="open"|"closed"`
11// attribute per stage (hasp / lid / content-rows) — no rAF loop, no
12// per-frame React state — each stage just carries its own duration and
13// transition-delay so the same state flip plays four moments in order:
14//   open:  hasp swings up off the staple (spring overshoot, 0ms delay)
15//          -> the header ("lid") lifts 2px (starts as the hasp is
16//          settling) -> the content unfolds via the codebase's
17//          grid-template-rows 0fr->1fr trick, ease-out-expo, fading
18//          upward 4px (starts as the lid finishes lifting).
19//   close: reverse order — content folds first, then the lid drops,
20//          then the hasp drops back over the staple with a bouncier
21//          cubic-bezier so it reads as a settle rather than a snap.
22// Hover on a closed header slides the hasp 1px via a plain CSS :hover
23// rule (no JS) — "testing the latch." Single-open by default (opening
24// one closes any other); `multiple` allows independent panels. Headers
25// are real <button> elements with a roving tabindex (only the active
26// header is in the tab sequence; ArrowUp/Down/Home/End move focus,
27// matching the dropdown-drape pattern), aria-expanded + aria-controls, and
28// a <div role="region" aria-labelledby> panel per the standard
29// disclosure pattern. prefers-reduced-motion collapses every stage's
30// duration/delay to zero, so open/close still happens (nothing gets
31// stuck) but as a single instant snap, hasp included.
32// ---------------------------------------------------------------------------
33 
34export interface HaspFoldItem {
35  id: string;
36  title: ReactNode;
37  content: ReactNode;
38}
39 
40export interface HaspFoldProps {
41  items: HaspFoldItem[];
42  /** Allow more than one section open at once. Default false (single-open). */
43  multiple?: boolean;
44  /** Initially open item ids. */
45  defaultOpen?: string[];
46  className?: string;
47}
48 
49function HaspIcon({ open }: { open: boolean }) {
50  return (
51    <svg
52// … truncated