Push Menu

1'use client'
2 
3import React from 'react'
4 
5import { cn } from '@/lib/utils'
6 
7import { Button } from '@/components/button'
8import { Link } from '@/components/link'
9import { IconChevronRight } from '@/icons/chevron-right'
10import { IconClose } from '@/icons/close'
11import { IconWest } from '@/icons/west'
12 
13/**
14 * Default slide duration for level transitions, in milliseconds — the default
15 * of the `durationMs` prop.
16 *
17 * COUPLING: `durationMs` drives BOTH the `--push-menu-duration` custom
18 * property (set inline on the root, read by the CSS transition) and the state
19 * machine's `setTimeout`s (which settle the animation state, pop levels, and
20 * schedule focus restoration). Do not override the custom property directly —
21 * that changes only the visual duration while the state machine still settles
22 * on `durationMs`, desyncing the two; pass `durationMs` instead. Under
23 * `prefers-reduced-motion` the slide is skipped (the transition is applied
24 * under `motion-safe:` only) but the state machine still waits the full
25 * duration; the menu is simply "settled early" for those users, never broken.
26 */
27const PUSH_MENU_DURATION_MS = 300
28 
29/** A node in the menu tree. Items with `links` drill in; items with `href` navigate. */
30type PushMenuItem = {
31  /** Unique across the whole tree — level ids and focus restoration track items by id. */
32  id: string
33  /** Visible label. */
34  title: string
35  /** Navigation target for leaf items. Ignored for drilling when `links` is non-empty. */
36  href?: string
37  /** Child items. A non-empty array makes this item a drill-in button, not a link. */
38  links?: PushMenuItem[]
39}
40 
41/** One entry in the level stack — the root level plus one per drill-in. */
42type PushMenuLevel = {
43  id: string
44  title: string
45  /** 1 for the root level, incrementing per drill-in. */
46  depth: number
47  items: PushMenuItem[]
48  /** The item whose activation opened this level. Absent on the root level. */
49  parentItem?: PushMenuItem
50}
51 
52type PushMenuAnimationState = 'idle' | 'sliding-forward' | 'sliding-backward'
53 
54function buildLevelId(path: string[]): string {
55  return `level-${path.length > 0 ? path.join('--') : 'root'}`
56}
57 
58/**
59 * Truncates to at most `maxLength` UTF-16 units, ellipsis included in the
60 * budget.
61 *
62 * Iterates CODE POINTS (`for…of` over a string) rather than slicing by index:
63 * a plain `slice` can cut between the two halves of a surrogate pair, leaving
64 * a lone surrogate that renders as U+FFFD (an emoji in a level title was
65// … truncated