@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/dropdown-menu.cjs

@@ -34,32 +34,71 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = void 0;
+exports.DropdownMenuClose = exports.DropdownMenuBack = exports.DropdownMenuOptionItem = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = void 0;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuSearch = DropdownMenuSearch;
+exports.DropdownMenuSection = DropdownMenuSection;
+exports.DropdownMenuSelectionGroup = DropdownMenuSelectionGroup;
+exports.DropdownMenuPage = DropdownMenuPage;
+exports.DropdownMenuHeader = DropdownMenuHeader;
+exports.DropdownMenuTitle = DropdownMenuTitle;
+exports.DropdownMenuEmpty = DropdownMenuEmpty;
+exports.DropdownMenuLoading = DropdownMenuLoading;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * DropdownMenu — the ONE compound menu, native to @hanzo/gui.
  *
  * @hanzogui/menu already ships the whole compound surface (Root/Trigger/Portal/
  * Content/Group/Label/Item/CheckboxItem/RadioGroup/RadioItem/ItemIndicator/
- * Separator/Sub/SubTrigger/SubContent) with the a11y, roving focus, popper
- * placement and dismiss behaviour. This file only FLATTENS `Menu.X` into the 15
- * `DropdownMenuX` names and dresses them in the Hanzo tokens, so there is one
- * menu component rather than two shapes of the same idea.
+ * Separator/Sub/SubTrigger/SubContent) with the a11y, roving focus, typeahead,
+ * popper placement and dismiss behaviour. This file FLATTENS `Menu.X` into the
+ * `DropdownMenuX` names, dresses them in the Hanzo tokens, and adds the parts a
+ * record surface needs on top of gui's — so there is one menu component rather
+ * than two shapes of the same idea.
  *
  * Cross-platform: gui style props only — no Tailwind class strings, no Radix, no
- * DOM APIs. Rows are 32px tall (the design density) and `touch()` lifts the real
- * tap target to 44px — on web and Tauri as well as native.
+ * DOM APIs outside `isWeb`. Rows are 32px tall (the design density) and
+ * `touch()` lifts the real tap target to 44px — on web and Tauri as well as
+ * native.
  *
  * `DropdownMenuContent` mounts its OWN `Menu.Portal`, so callers never wrap it —
- * and re-applies the trigger's resolved theme inside the portal via `PortalTheme`
- * (gui portals re-root the subtree, so React theme context does not flow).
+ * and re-applies, inside the portal, what React context cannot carry across it:
+ * the trigger's resolved theme (`PortalTheme`), its density (`Density`) and the
+ * menu's page history. gui portals re-root the subtree, so none of the three
+ * flows by itself.
+ *
+ * THE RECORD PARTS (twenty-ui's Dropdown, MIT, NOTICE), re-expressed on gui's
+ * Menu rather than on base-ui's:
+ *
+ *   Search            a borderless field at the top; the app filters. Typing
+ *                     stays in the field (gui's typeahead would otherwise take
+ *                     the keys), ArrowDown enters the list, ArrowUp from the
+ *                     first row comes back, Enter runs the first row.
+ *   Section           a padded group with an optional band label, `scrollable`
+ *                     capping it at 176px.
+ *   SelectionGroup +  single or multiple choice: a radio group of
+ *   OptionItem        `menuitemradio`, or `menuitemcheckbox` rows that stay
+ *                     open; the indicator a trailing check, a leading box or
+ *                     none (the row tints).
+ *   Page / Back /     screens inside one popup: only the current page renders,
+ *   Header / Title /  an item with `page` opens one, Back returns, and the
+ *   Close             history resets when the menu closes.
+ *   Empty / Loading   status lines announced politely.
+ *   Item `actions`    trailing controls beside a row, shown under the pointer
+ *                     or focus (always on touch).
+ *
+ * Typeahead is gui's own, and its buffer is gui's 1000ms where twenty-ui used
+ * 500ms: behaviour comes from the primitive, so the difference is recorded, not
+ * reimplemented.
  */
 const React = __importStar(require("react"));
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const gesture_1 = require("./gesture.cjs");
+const ink_1 = require("./ink.cjs");
+const density_1 = require("./density.cjs");
+const MenuRow_1 = require("../../product/MenuRow.cjs");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 // ── Geometry — literal px on the 8-grid; a 32px row expands to a 44px tap ──────
 const ROW_H = 32;
@@ -70,52 +109,86 @@ const MIN_W = 200;
 const INSET_PL = 32;
 const INDICATOR_SLOT = 14;
 const ICON = 16;
+/** The panel's own inset; a band, a separator and a header bleed back over it. */
+const PAD = 4;
+/** A scrollable section's ceiling: five and a half rows, so the cut shows there is more. */
+const SCROLL_H = 176;
+/** The search row and the header row, as twenty-ui draws them. */
+const SEARCH_H = 36;
+const HEADER_H = 33;
+const BAND_H = 20;
 const panel = {
     bg: "$panel",
     borderColor: "$borderColor",
     borderWidth: 1,
     rounded: "$4",
-    p: 4,
+    p: PAD,
     minW: MIN_W,
     overflow: "hidden",
     shadowColor: "rgba(0,0,0,0.45)",
     shadowRadius: 20,
     shadowOffset: { width: 0, height: 10 },
 };
+/**
+ * A row. The corner is 4 — the panel's 8 less its 4px inset — so a highlighted
+ * row is concentric with the panel it sits in instead of rounder than it; and
+ * the highlight is the hover rung, with the press one rung darker.
+ */
 const row = {
     items: "center",
     gap: ROW_PX,
     px: ROW_PX,
     minH: ROW_H,
-    rounded: "$3",
+    rounded: "$xs",
     select: "none",
     cursor: "pointer",
     ...(0, gesture_1.touch)(ROW_H, TAP_MIN, "y"),
-    hoverStyle: { bg: "$raised" },
-    focusStyle: { bg: "$raised" },
-    pressStyle: { bg: "$rim" },
+    hoverStyle: { bg: "$hover" },
+    focusStyle: { bg: "$hover" },
+    pressStyle: { bg: "$raised" },
 };
 /** Left indicator well shared by checkbox + radio rows. */
 const Indicator = ({ children }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", l: ROW_PX, width: INDICATOR_SLOT, height: INDICATOR_SLOT, items: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(gui_1.Menu.ItemIndicator, { children: children }) }));
-// ── Root — owns popper geometry ─────────────────────────────────────────────────
+// ── Root — owns popper geometry and the page history ───────────────────────────
 // gui puts `offset` on the Popper ROOT; the compound API puts `sideOffset` on
 // Content. One value, one owner: the root holds it, Content publishes into it.
 const OffsetContext = /* @__PURE__ */ React.createContext(null);
 const AlignContext = /* @__PURE__ */ React.createContext(null);
-const DEFAULT_OFFSET = 4;
-function DropdownMenu({ offset = DEFAULT_OFFSET, trigger, items, minWidth = MIN_W, maxHeight, children, ...props }) {
-    const [current, setOffset] = React.useState(offset);
+const PagesContext = /* @__PURE__ */ React.createContext(null);
+/**
+ * The trigger's offset: 4 on a regular surface, 8 on a compact one — a record
+ * menu hangs a little clear of the 32px control it opens from (twenty-front's
+ * menus sit 8 below their trigger).
+ */
+const offsetFor = (density) => (density === "compact" ? 8 : 4);
+function DropdownMenu({ offset, trigger, items, minWidth = MIN_W, maxHeight, defaultPage, onOpenChange, children, ...props }) {
+    const density = (0, density_1.useDensity)();
+    const initial = offset ?? offsetFor(density);
+    const [current, setOffset] = React.useState(initial);
     const [placement, setPlacement] = React.useState(undefined);
-    React.useEffect(() => setOffset(offset), [offset]);
-    return ((0, jsx_runtime_1.jsx)(OffsetContext.Provider, { value: setOffset, children: (0, jsx_runtime_1.jsx)(AlignContext.Provider, { value: setPlacement, children: (0, jsx_runtime_1.jsxs)(gui_1.Menu, { offset: current, ...(placement ? { placement } : null), ...props, children: [trigger ? ((0, jsx_runtime_1.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger })) : null, items ? ((0, jsx_runtime_1.jsx)(DropdownMenuContent, { minW: minWidth, maxH: maxHeight, children: items.map(renderSpec) })) : null, children] }) }) }));
+    React.useEffect(() => setOffset(initial), [initial]);
+    const [stack, setStack] = React.useState(defaultPage ? [defaultPage] : []);
+    const pages = React.useMemo(() => ({
+        page: stack[stack.length - 1] ?? null,
+        depth: stack.length,
+        go: (id) => setStack((s) => [...s, id]),
+        back: () => setStack((s) => (s.length > 1 ? s.slice(0, -1) : s)),
+    }), [stack]);
+    const changed = React.useCallback((open) => {
+        // A menu opens where it was meant to: the history is for one visit.
+        if (!open)
+            setStack(defaultPage ? [defaultPage] : []);
+        onOpenChange?.(open);
+    }, [defaultPage, onOpenChange]);
+    return ((0, jsx_runtime_1.jsx)(OffsetContext.Provider, { value: setOffset, children: (0, jsx_runtime_1.jsx)(AlignContext.Provider, { value: setPlacement, children: (0, jsx_runtime_1.jsx)(PagesContext.Provider, { value: defaultPage ? pages : null, children: (0, jsx_runtime_1.jsxs)(gui_1.Menu, { offset: current, ...(placement ? { placement } : null), onOpenChange: changed, ...props, children: [trigger ? ((0, jsx_runtime_1.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger })) : null, items ? ((0, jsx_runtime_1.jsx)(DropdownMenuContent, { minW: minWidth, maxH: maxHeight, children: items.map(renderSpec) })) : null, children] }) }) }) }));
 }
-/** One spec row -> the matching compound part. Never a second row renderer. */
+/** One spec row -> the matching compound part, drawn by the one row anatomy. */
 const renderSpec = (spec, i) => {
     if (spec.type === "separator")
         return (0, jsx_runtime_1.jsx)(DropdownMenuSeparator, {}, spec.key ?? `sep-${i}`);
     if (spec.type === "label")
         return ((0, jsx_runtime_1.jsx)(DropdownMenuLabel, { children: spec.label }, spec.key ?? `label-${i}`));
-    return ((0, jsx_runtime_1.jsxs)(DropdownMenuItem, { disabled: spec.disabled, variant: spec.destructive ? "destructive" : "default", onSelect: spec.onSelect, children: [spec.icon ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: ICON, height: ICON, items: "center", justify: "center", shrink: 0, children: spec.icon })) : null, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: spec.label }), spec.description ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$quiet", numberOfLines: 1, children: spec.description })) : null] }), spec.shortcut ? ((0, jsx_runtime_1.jsx)(DropdownMenuShortcut, { children: spec.shortcut })) : null, spec.selected ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: ICON - 2, ml: "auto" }) : null, spec.hasSubmenu ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: ICON - 2, ml: "auto", opacity: 0.6 })) : null] }, spec.key));
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuItem, { disabled: spec.disabled, variant: spec.destructive ? "destructive" : "default", onSelect: spec.onSelect, ...(spec.closeOnSelect === false ? { preventCloseOnSelect: true } : null), children: (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRowContent, { label: spec.label, sub: spec.description, icon: spec.icon ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: ICON, height: ICON, items: "center", justify: "center", shrink: 0, children: spec.icon })) : undefined, shortcut: spec.shortcut ? (0, jsx_runtime_1.jsx)(DropdownMenuShortcut, { children: spec.shortcut }) : undefined, check: !!spec.selected, submenu: !!spec.hasSubmenu }) }, spec.key));
 };
 // ── Passthroughs — the gui part already IS the part ─────────────────────────────
 const DropdownMenuTrigger = gui_1.Menu.Trigger;
@@ -135,21 +208,123 @@ const placementFor = (side, align) => {
     const base = (side?.split('-')[0] ?? 'bottom');
     return (align === 'center' ? base : `${base}-${align}`);
 };
-const DropdownMenuContent = /* @__PURE__ */ React.forwardRef(function DropdownMenuContent({ sideOffset = DEFAULT_OFFSET, align, children, ...props }, ref) {
+/** The rows a person can reach in one panel, in order: its own, never a submenu's. */
+const reachable = (panelEl) => [...panelEl.querySelectorAll('[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]')].filter((el) => el.closest('[data-hanzogui-menu-content]') === panelEl && el.getAttribute('aria-disabled') !== 'true' && !el.hasAttribute('data-disabled'));
+/** The search field of a panel, when it has one. */
+const searchOf = (panelEl) => panelEl.querySelector('[data-slot="dropdown-menu-search"] input');
+const DropdownMenuContent = /* @__PURE__ */ React.forwardRef(function DropdownMenuContent({ sideOffset, align, children, onKeyDown, ...props }, ref) {
     const themeName = (0, portal_theme_1.useThemeName)();
+    const density = (0, density_1.useDensity)();
+    const pages = React.useContext(PagesContext);
     const setOffset = React.useContext(OffsetContext);
     const setPlacement = React.useContext(AlignContext);
-    React.useEffect(() => setOffset?.(sideOffset), [setOffset, sideOffset]);
+    const offset = sideOffset ?? offsetFor(density);
+    React.useEffect(() => setOffset?.(offset), [setOffset, offset]);
     React.useEffect(() => setPlacement?.(placementFor(undefined, align)), [setPlacement, align]);
-    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Portal, { children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Menu.Content, { ref: ref, "data-slot": "dropdown-menu-content", ...panel, ...props, children: children }) }) }));
+    // ArrowUp on the first row hands focus back to the search field above it —
+    // gui's roving focus stops at the first row and knows nothing of the field.
+    const keys = (e) => {
+        ;
+        onKeyDown?.(e);
+        if (!gui_1.isWeb || e.key !== 'ArrowUp')
+            return;
+        const panelEl = e.target?.closest?.('[data-hanzogui-menu-content]');
+        if (!panelEl)
+            return;
+        const rows = reachable(panelEl);
+        const field = searchOf(panelEl);
+        if (field && rows[0] && rows[0] === document.activeElement) {
+            e.preventDefault();
+            field.focus();
+        }
+    };
+    const body = framed(children);
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Portal, { children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(density_1.Density, { value: density, children: (0, jsx_runtime_1.jsx)(PagesContext.Provider, { value: pages, children: (0, jsx_runtime_1.jsx)(gui_1.Menu.Content, { ref: ref, "data-slot": "dropdown-menu-content", ...panel, ...(body.framed ? { role: 'dialog', 'aria-orientation': undefined, 'data-framed': '' } : null), ...(gui_1.isWeb ? { onKeyDown: keys } : null), ...props, children: (0, jsx_runtime_1.jsx)(Paged, { page: pages?.page ?? null, children: body.children }) }) }) }) }) }));
 });
 exports.DropdownMenuContent = DropdownMenuContent;
+/** The parts a `menu` may not own: a field and the live status lines. */
+const isFree = (c) => React.isValidElement(c) && (c.type === DropdownMenuSearch || c.type === DropdownMenuEmpty || c.type === DropdownMenuLoading);
+/**
+ * A panel holding a search field or a status line is not a bare menu.
+ *
+ * A `menu` owns items, groups and separators and nothing else, and axe holds
+ * the whole subtree to that (`aria-required-children`): a field or a live
+ * region inside it fails. So such a panel becomes what it is — a popup with a
+ * field, one or more menus of rows, and its status lines — the frame a `dialog`
+ * still labelled by its trigger, each run of rows its own `role="menu"`. A panel
+ * of rows alone keeps gui's structure untouched. Read off the direct children,
+ * the place a Search, an Empty and a Loading belong.
+ */
+function framed(children) {
+    const parts = React.Children.toArray(children);
+    if (!parts.some(isFree))
+        return { framed: false, children };
+    const out = [];
+    let run = [];
+    const close = () => {
+        if (!run.length)
+            return;
+        out.push((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "menu", "aria-orientation": "vertical", "data-slot": "dropdown-menu-list", children: run }, `menu-${out.length}`));
+        run = [];
+    };
+    for (const part of parts) {
+        if (isFree(part)) {
+            close();
+            out.push(part);
+        }
+        else
+            run.push(part);
+    }
+    close();
+    return { framed: true, children: out };
+}
+/**
+ * Moving between pages takes the focus with it: the row that was pressed is
+ * gone, and focus left on a removed node falls to the document. The new page's
+ * first row (or its search) takes it.
+ */
+function Paged({ page, children }) {
+    const anchor = React.useRef(null);
+    const first = React.useRef(true);
+    React.useEffect(() => {
+        if (first.current) {
+            first.current = false;
+            return;
+        }
+        if (!gui_1.isWeb)
+            return;
+        const panelEl = anchor.current?.closest?.('[data-hanzogui-menu-content]');
+        if (!panelEl)
+            return;
+        const frame = requestAnimationFrame(() => (searchOf(panelEl) ?? reachable(panelEl)[0])?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [page]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [gui_1.isWeb ? (0, jsx_runtime_1.jsx)("span", { ref: anchor, hidden: true, "data-slot": "dropdown-menu-anchor" }) : null, children] }));
+}
 const DropdownMenuSubContent = /* @__PURE__ */ React.forwardRef(function DropdownMenuSubContent(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.SubContent, { ref: ref, "data-slot": "dropdown-menu-sub-content", ...panel, ...props }));
+    const density = (0, density_1.useDensity)();
+    return ((0, jsx_runtime_1.jsx)(density_1.Density, { value: density, children: (0, jsx_runtime_1.jsx)(gui_1.Menu.SubContent, { ref: ref, "data-slot": "dropdown-menu-sub-content", ...panel, ...props }) }));
 });
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
-const DropdownMenuItem = /* @__PURE__ */ React.forwardRef(function DropdownMenuItem({ inset, variant = "default", disabled, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Item, { ref: ref, "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, disabled: disabled, ...row, pl: inset ? INSET_PL : ROW_PX, theme: variant === "destructive" ? "red" : undefined, opacity: disabled ? 0.5 : 1, cursor: disabled ? "default" : "pointer", ...props }));
+const DropdownMenuItem = /* @__PURE__ */ React.forwardRef(function DropdownMenuItem({ inset, variant = "default", disabled, page, actions, actionsVisibility = "hover", onSelect, children, ...props }, ref) {
+    const pages = React.useContext(PagesContext);
+    const [shown, setShown] = React.useState(false);
+    const opens = page !== undefined && pages !== null;
+    const item = ((0, jsx_runtime_1.jsx)(gui_1.Menu.Item, { ref: ref, "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, disabled: disabled, ...row, pl: inset ? INSET_PL : ROW_PX, theme: variant === "destructive" ? "red" : undefined, opacity: disabled ? 0.5 : 1, cursor: disabled ? "default" : "pointer", ...(actions ? { flex: 1, onFocus: () => setShown(true), onBlur: () => setShown(false) } : null), onSelect: (e) => {
+            if (page !== undefined && pages) {
+                e.preventDefault?.();
+                pages.go(page);
+            }
+            onSelect?.(e);
+        }, ...props, children: opens ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, ink_1.ink)(children, gui_1.Text, { fontSize: '$2' }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: ICON - 2, ml: "auto", color: "$hush" })] })) : ((0, ink_1.ink)(children, gui_1.Text, { fontSize: '$2' })) }));
+    if (!actions)
+        return item;
+    const visible = actionsVisibility === "always" || shown;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "data-slot": "dropdown-menu-item-row", items: "center", gap: ROW_PX, onHoverIn: () => setShown(true), onHoverOut: () => setShown(false), children: [item, (0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "dropdown-menu-item-actions", 
+                // A menu owns groups, not buttons: the controls beside a row are a group.
+                role: "group", shrink: 0, items: "center", gap: 2, opacity: visible ? 1 : 0, $touchable: { opacity: 1 }, animation: "75ms", children: React.Children.map(actions, (a) => React.isValidElement(a) && a.props.role == null
+                    ? React.cloneElement(a, { role: "menuitem" })
+                    : a) })] }));
 });
 exports.DropdownMenuItem = DropdownMenuItem;
 const DropdownMenuCheckboxItem = /* @__PURE__ */ React.forwardRef(function DropdownMenuCheckboxItem({ children, checked, ...props }, ref) {
@@ -164,13 +339,168 @@ const DropdownMenuSubTrigger = /* @__PURE__ */ React.forwardRef(function Dropdow
     return ((0, jsx_runtime_1.jsxs)(gui_1.Menu.SubTrigger, { ref: ref, "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, ...row, pl: inset ? INSET_PL : ROW_PX, ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: ICON, ml: "auto", opacity: 0.6 })] }));
 });
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
-// ── Static rows ─────────────────────────────────────────────────────────────────
-const DropdownMenuLabel = /* @__PURE__ */ React.forwardRef(function DropdownMenuLabel({ inset, ...props }, ref) {
+const SelectionContext = /* @__PURE__ */ React.createContext(null);
+const asList = (v) => (v == null ? [] : Array.isArray(v) ? v : [v]);
+function DropdownMenuSelectionGroup({ value, defaultValue = null, onValueChange, multiple = false, closeOnSelect, children, }) {
+    const [own, setOwn] = React.useState(() => asList(defaultValue));
+    const chosen = value !== undefined ? asList(value) : own;
+    const set = (next) => {
+        if (value === undefined)
+            setOwn(next);
+        onValueChange?.(multiple ? next : (next[0] ?? null));
+    };
+    const ctx = {
+        multiple,
+        closeOnSelect: closeOnSelect ?? !multiple,
+        has: (v) => chosen.includes(v),
+        toggle: (v) => set(multiple ? (chosen.includes(v) ? chosen.filter((c) => c !== v) : [...chosen, v]) : [v]),
+    };
+    return ((0, jsx_runtime_1.jsx)(SelectionContext.Provider, { value: ctx, children: multiple ? ((0, jsx_runtime_1.jsx)(gui_1.Menu.Group, { "data-slot": "dropdown-menu-selection-group", children: children })) : ((0, jsx_runtime_1.jsx)(gui_1.Menu.RadioGroup, { "data-slot": "dropdown-menu-selection-group", value: chosen[0] ?? '', onValueChange: (v) => set(v ? [v] : []), children: children })) }));
+}
+/** The leading box of a multiple choice: a picture of a checkbox, not a control inside the row. */
+const Box = ({ on }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: INDICATOR_SLOT, height: INDICATOR_SLOT, shrink: 0, rounded: "$xs", borderWidth: 1, borderColor: on ? "var(--primary)" : "$bound", bg: on ? "var(--primary)" : "transparent", items: "center", justify: "center", children: on ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 12, strokeWidth: 3, color: "var(--primary-foreground)" }) : null }));
+const DropdownMenuOptionItem = /* @__PURE__ */ React.forwardRef(function DropdownMenuOptionItem({ value, indicator, closeOnSelect, onSelect, children, disabled, ...props }, ref) {
+    const group = React.useContext(SelectionContext);
+    const multiple = group?.multiple ?? false;
+    const on = group?.has(value) ?? false;
+    const mark = indicator ?? (multiple ? "checkbox" : "check");
+    const closes = closeOnSelect ?? group?.closeOnSelect ?? !multiple;
+    const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mark === "checkbox" ? (0, jsx_runtime_1.jsx)(Box, { on: on }) : null, typeof children === "string" ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$aside", numberOfLines: 1, flex: 1, minW: 0, children: children })) : (children), mark === "check" && on ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: ICON, strokeWidth: 2, ml: "auto" }) : null] }));
+    const shared = {
+        ref,
+        "data-slot": "dropdown-menu-option-item",
+        "data-indicator": mark,
+        disabled,
+        ...row,
+        ...(mark === "none" && on ? { bg: "$hover" } : null),
+        opacity: disabled ? 0.5 : 1,
+        preventCloseOnSelect: !closes,
+        onSelect,
+        ...props,
+    };
+    if (multiple)
+        return ((0, jsx_runtime_1.jsx)(gui_1.Menu.CheckboxItem, { ...shared, checked: on, onCheckedChange: () => group?.toggle(value), children: body }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.RadioItem, { ...shared, value: value, children: body }));
+});
+exports.DropdownMenuOptionItem = DropdownMenuOptionItem;
+/**
+ * The search row. The keys a field needs stay in it — gui's typeahead listens on
+ * the whole panel and would move focus to a matching row on the first letter —
+ * and the three that belong to the list leave it: ArrowDown enters the list,
+ * Enter runs the first row (respecting an open IME composition), Escape closes.
+ */
+function DropdownMenuSearch({ value, defaultValue, onValueChange, placeholder = "Search", autoFocus = true, "aria-label": label, }) {
+    const field = React.useRef(null);
+    React.useEffect(() => {
+        if (!autoFocus || !gui_1.isWeb)
+            return;
+        // After gui's own open focus, which lands on the panel a frame after mount.
+        const frame = requestAnimationFrame(() => {
+            const t = setTimeout(() => field.current?.focus(), 0);
+            cleanup = () => clearTimeout(t);
+        });
+        let cleanup = () => { };
+        return () => {
+            cancelAnimationFrame(frame);
+            cleanup();
+        };
+    }, [autoFocus]);
+    const keys = (e) => {
+        if (e.key === "Escape" || e.key === "Tab")
+            return;
+        const panelEl = e.currentTarget.closest("[data-hanzogui-menu-content]");
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            e.stopPropagation();
+            if (panelEl)
+                reachable(panelEl)[0]?.focus();
+            return;
+        }
+        if (e.key === "Enter") {
+            e.stopPropagation();
+            if (e.nativeEvent.isComposing)
+                return;
+            e.preventDefault();
+            if (panelEl)
+                reachable(panelEl)[0]?.click();
+            return;
+        }
+        // Everything else is typing: the field's, not the menu's.
+        e.stopPropagation();
+    };
+    // A direct child of the content, so `framed` seats it beside the rows' menu.
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "dropdown-menu-search", minH: SEARCH_H, items: "center", px: ROW_PX, mx: -PAD, mt: -PAD, mb: PAD, borderBottomWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(gui_1.Input, { ref: field, unstyled: true, flex: 1, minW: 0, height: 20, p: 0, borderWidth: 0, bg: "transparent", color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$1", "aria-label": label ?? placeholder, placeholder: placeholder, ...(value !== undefined ? { value } : { defaultValue }), onChangeText: (t) => onValueChange?.(t), ...(gui_1.isWeb ? { onKeyDown: keys } : null), style: { outlineStyle: "none" } }) }));
+}
+function DropdownMenuSection({ label, scrollable = false, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Menu.Group, { "data-slot": "dropdown-menu-section", ...(typeof label === "string" ? { "aria-label": label } : null), children: [label ? (0, jsx_runtime_1.jsx)(DropdownMenuLabel, { variant: "band", children: label }) : null, (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: 2, ...(scrollable
+                    ? { maxH: SCROLL_H, style: { overflowY: "auto", overscrollBehavior: "contain" } }
+                    : null), ...props, children: children })] }));
+}
+// ── Pages ───────────────────────────────────────────────────────────────────────
+/** One screen of a paged menu. Only the current page renders. */
+function DropdownMenuPage({ id, children }) {
+    const pages = React.useContext(PagesContext);
+    if (!pages || pages.page !== id)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-slot": "dropdown-menu-page", "data-page": id, children: children }));
+}
+const header = {
+    minH: HEADER_H,
+    items: "center",
+    gap: ROW_PX,
+    px: ROW_PX,
+    mx: -PAD,
+    mt: -PAD,
+    mb: PAD,
+    borderBottomWidth: 1,
+    borderColor: "$borderColor",
+};
+/** A static title bar over the page. */
+function DropdownMenuHeader({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "dropdown-menu-header", ...header, ...props, children: children }));
+}
+function DropdownMenuTitle({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { "data-slot": "dropdown-menu-title", fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, flex: 1, ...props, children: children }));
+}
+/** The icon-only close in a header. It is a menu item, so choosing it closes as any row does. */
+const DropdownMenuClose = /* @__PURE__ */ React.forwardRef(function DropdownMenuClose(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Item, { ref: ref, "data-slot": "dropdown-menu-close", width: 24, height: 24, rounded: "$xs", items: "center", justify: "center", cursor: "pointer", ...(0, gesture_1.touch)(24), hoverStyle: { bg: "$hover" }, focusStyle: { bg: "$hover" }, ...props, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: ICON, color: "$aside" }) }));
+});
+exports.DropdownMenuClose = DropdownMenuClose;
+/** The header row that returns to the page before. */
+const DropdownMenuBack = /* @__PURE__ */ React.forwardRef(function DropdownMenuBack({ children, onSelect, ...props }, ref) {
+    const pages = React.useContext(PagesContext);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Menu.Item, { ref: ref, "data-slot": "dropdown-menu-back", ...header, rounded: 0, cursor: "pointer", hoverStyle: { bg: "$hover" }, focusStyle: { bg: "$hover" }, preventCloseOnSelect: true, onSelect: (e) => {
+            pages?.back();
+            onSelect?.(e);
+        }, ...props, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronLeft, { size: ICON, color: "$aside" }), typeof children === "string" ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, flex: 1, children: children })) : (children)] }));
+});
+exports.DropdownMenuBack = DropdownMenuBack;
+// ── Status lines ────────────────────────────────────────────────────────────────
+/**
+ * A live line. Placed as a direct child of the content, it sits beside the rows'
+ * menu rather than inside it (see `framed`), where a live region may be.
+ */
+function Status({ slot, children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": slot, role: "status", "aria-live": "polite", items: "center", gap: ROW_PX, p: ROW_PX, children: children }));
+}
+/** No row matched, said once and politely. */
+function DropdownMenuEmpty({ children = "No results" }) {
+    return ((0, jsx_runtime_1.jsx)(Status, { slot: "dropdown-menu-empty", children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$aside", children: children }) }));
+}
+/** Rows are on their way. */
+function DropdownMenuLoading({ children = "Loading" }) {
+    return ((0, jsx_runtime_1.jsxs)(Status, { slot: "dropdown-menu-loading", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", maxW: 14, maxH: 14 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$quiet", children: children })] }));
+}
+const DropdownMenuLabel = /* @__PURE__ */ React.forwardRef(function DropdownMenuLabel({ inset, variant = "default", ...props }, ref) {
+    if (variant === "band")
+        return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Label, { ref: ref, "data-slot": "dropdown-menu-label", "data-variant": "band", height: BAND_H, lineHeight: BAND_H, mx: -PAD, px: ROW_PX, py: 0, bg: "$hover", fontSize: "$1", fontWeight: "400", color: "$hint", select: "none", ...props }));
     return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Label, { ref: ref, "data-slot": "dropdown-menu-label", "data-inset": inset, px: ROW_PX, py: 4, pl: inset ? INSET_PL : ROW_PX, fontSize: "$2", fontWeight: "500", color: "$ink", select: "none", ...props }));
 });
 exports.DropdownMenuLabel = DropdownMenuLabel;
+/** A hairline between sections, bled to the panel's edges as twenty-ui draws it. */
 const DropdownMenuSeparator = /* @__PURE__ */ React.forwardRef(function DropdownMenuSeparator(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Separator, { ref: ref, "data-slot": "dropdown-menu-separator", height: 1, bg: "$borderColor", mx: 4, my: 4, ...props }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.Menu.Separator, { ref: ref, "data-slot": "dropdown-menu-separator", height: 1, bg: "$borderColor", mx: -PAD, my: PAD, ...props }));
 });
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
 /** Right-aligned shortcut hint. gui `Text`, not a raw `<span>`, so it renders on native. */