Unlimited Nested Menu

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useId,
7  useLayoutEffect,
8  useRef,
9  useState,
10  type CSSProperties,
11  type KeyboardEvent,
12  type ReactNode,
13} from "react";
14import {
15  AnimatePresence,
16  MotionConfig,
17  animate,
18  motion,
19  useIsPresent,
20  useReducedMotion,
21} from "motion/react";
22 
23// Unlimited nested menu - iOS-style stacked drill-down.
24//
25// The main dropdown never changes. Click a branch item and its children open as
26// a NEW panel anchored right under that item, laid OVER the menu below it - the
27// clicked item's name becomes the new panel's title (its header sits exactly
28// where the item was, so the row appears to turn into the title). Do it again
29// and the grandchildren stack the same way. There is no depth limit; parents
30// stay visible and dimmed behind, and clicking one pops back to it.
31//
32// Motion (motion/react):
33//   - Opening the MENU: the root panel reveals from the trigger, scale + fade.
34//   - Drilling a branch: a shared-element morph - the child panel mounts clipped
35//     to just its header, which sits EXACTLY where the clicked row is and keeps
36//     the row's own icon, then opens - the clip expands downward while the
37//     title's weight crossfades plain -> bold (a measured, imperative animate()
38//     sequence, since the morph targets depend on the clicked row's geometry).
39//   - Any close (pop a level, or close the whole menu): AnimatePresence fades
40//     the leaving panel (or the whole stack) in place - shorter than the enter,
41//     no drift - with none of the exit-snapshot bookkeeping.
42//
43// Positioning is JS-measured against the popup origin, with a viewport-edge
44// correction (--nm-shift-x) so a full-width panel near the screen edge slides to
45// stay on-screen. Requires the lab-theme tokens. Fully Tailwind, no CSS files.
46 
47const EASE = [0.22, 1, 0.36, 1] as const;
48const POP_S = 0.22; // per-panel enter
49const EXIT_S = 0.15; // exits are quicker + quieter than the enter
50 
51// Panel shadows: the front panel owns the stack's elevation; panels behind it
52// collapse to a crisp hairline so shadows don't compound with depth.
53const SHADOW_ELEV =
54  "shadow-[0_0_0_1px_rgba(0,0,0,0.07),0_14px_34px_-10px_rgba(0,0,0,0.26),0_5px_14px_-6px_rgba(0,0,0,0.12)]";
55const SHADOW_BEHIND = "shadow-[0_0_0_1px_rgba(0,0,0,0.05),0_1px_2px_-1px_rgba(0,0,0,0.08)]";
56 
57export interface NestedMenuItem {
58  id?: string;
59  label: string;
60  icon?: ReactNode;
61  hint?: string;
62  danger?: boolean;
63  disabled?: boolean;
64  items?: NestedMenuItem[];
65// … truncated