@viax.io/uxm 4.36.0

package/dist/ui/menu/menu-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/menu-preview.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\n\nimport { Menu, type MenuEntry } from './menu';\n\nimport type { CSSProperties } from 'react';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto its CSS custom property. Names follow\n * `--uxm-menu-{kebab(key)}` — matches what generate-css's kebab fallback\n * path produces, so no PER_COMPONENT_MAPPING entry is needed (only a\n * PER_COMPONENT_SELECTOR so the portaled panel carries the saved vars).\n *\n * These vars feed BOTH the inline static showcase (where they cascade\n * naturally) AND the live `<Menu>`'s portaled panel (injected via\n * `panelStyle` so live tuning reflects before any save).\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-menu-panel-bg': styles.panelBg as string,\n    '--uxm-menu-panel-border': styles.panelBorder as string,\n    '--uxm-menu-panel-radius': `${styles.panelRadius}px`,\n    '--uxm-menu-panel-max-height': `${styles.panelMaxHeight}px`,\n\n    // Shadow composed from Color / Blur / Offset Y (mirrors the Calendar\n    // atom's decomposed shadow knobs).\n    '--uxm-menu-shadow-color': styles.shadowColor as string,\n    '--uxm-menu-shadow-blur': `${styles.shadowBlur}px`,\n    '--uxm-menu-shadow-offset-y': `${styles.shadowOffsetY}px`,\n\n    '--uxm-menu-item-padding-x': `${styles.itemPaddingX}px`,\n    '--uxm-menu-item-padding-y': `${styles.itemPaddingY}px`,\n    '--uxm-menu-item-font-size': `${styles.itemFontSize}px`,\n    '--uxm-menu-item-radius': `${styles.itemRadius}px`,\n    '--uxm-menu-item-color': styles.itemColor as string,\n    '--uxm-menu-item-active-bg': styles.itemActiveBg as string,\n    '--uxm-menu-item-active-color': styles.itemActiveColor as string,\n    '--uxm-menu-item-disabled-opacity':\n      styles.itemDisabledOpacity != null ? String(styles.itemDisabledOpacity) : undefined,\n    '--uxm-menu-item-danger-color': styles.itemDangerColor as string,\n    '--uxm-menu-item-danger-active-bg': styles.itemDangerActiveBg as string,\n    '--uxm-menu-item-icon-color': styles.itemIconColor as string,\n\n    // Current row (a switcher's active entry) — weight + checkmark only; the\n    // colour deliberately comes from `itemColor` / the danger tone.\n    '--uxm-menu-item-current-bg': styles.itemCurrentBg as string,\n    '--uxm-menu-item-current-font-weight': styles.itemCurrentFontWeight as string,\n\n    // Trailing hint (shortcut echo).\n    '--uxm-menu-item-hint-font-size': `${styles.itemHintFontSize}px`,\n    '--uxm-menu-item-hint-color': styles.itemHintColor as string,\n\n    // Two-line (headline + subtitle) rows.\n    '--uxm-menu-item-subtitle-font-size': `${styles.itemSubtitleFontSize}px`,\n    '--uxm-menu-item-subtitle-color': styles.itemSubtitleColor as string,\n    '--uxm-menu-item-subtitle-gap': `${styles.itemSubtitleGap}px`,\n\n    '--uxm-menu-separator-color': styles.separatorColor as string,\n  } as CSSProperties;\n}\n\n/**\n * Demo data for the LIVE instance — the atom's TWO shapes, kept apart and\n * chosen by the `shape` variant.\n *\n * They were once a single list: row actions with a `current` workspace row\n * wedged in. That row stuck out precisely because the list told two stories at\n * once. But collapsing to only the switcher hid the other shape entirely, so\n * neither \"one mixed list\" nor \"one shape\" is right — which shape you're\n * looking at is a choice, and a choice belongs to a variant picker.\n *\n * Both are legitimately `Menu`. The switcher especially: it CONTAINS a command\n * (\"New workspace\") below a separator, which `role=\"listbox\"` has no legal way\n * to hold — that is half the argument for why a switcher is not a `Select`.\n *\n * Each shape keeps ONE disabled row, because that is the one thing with unique\n * live BEHAVIOUR: arrow-key navigation must skip it. Only the action shape\n * carries a `danger` row — nothing destructive belongs in a switcher, and\n * danger has no behaviour of its own beyond its paint, which the static row's\n * Row State picker already covers.\n *\n * Neither carries `iconColor`. The atom supports per-row tints, but a tinted\n * glyph here silently ignores the **Icon → Color** knob beside it — the panel\n * would read \"Text Strong\" while one row stayed pink, which looks like a broken\n * knob rather than a per-row override. It is row DATA, not theme; the README's\n * switcher example is where it belongs.\n */\ntype DemoRow = {\n  key: string;\n  label: string;\n  subtitle: string;\n  icon: string;\n  hint?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  current?: boolean;\n};\n// Shape 1 — row actions: every row is a command, the destructive one last.\nconst ACTION_ROWS: DemoRow[] = [\n  { key: 'edit', label: 'Edit', subtitle: 'Rename and change fields', icon: 'pencil', hint: '⌘E' },\n  { key: 'duplicate', label: 'Duplicate', subtitle: 'Create a copy in this folder', icon: 'copy', hint: '⌘D' },\n  { key: 'archive', label: 'Archive', subtitle: 'Move out of the active list', icon: 'archive-x', disabled: true },\n];\nconst DANGER_ROW: DemoRow = {\n  key: 'delete',\n  label: 'Delete',\n  subtitle: 'Remove permanently',\n  icon: 'trash',\n  hint: '⌫',\n  danger: true,\n};\n// Shape 2 — a context switcher: sibling contexts, one of them current.\nconst WORKSPACE_ROWS: DemoRow[] = [\n  { key: 'default', label: 'default', subtitle: 'Shared starting point', icon: 'product', hint: '⌘1' },\n  { key: 'order-processing', label: 'order-processing', subtitle: 'Fulfilment and returns', icon: 'product', hint: '⌘2' },\n  { key: 'pilot-2025', label: 'pilot-2025', subtitle: 'No access', icon: 'product', disabled: true },\n  { key: 'support-triage', label: 'support-triage', subtitle: 'Current workspace', icon: 'product', hint: '⌘3', current: true },\n];\n// The command half of the switcher, below the separator — the row that makes it\n// a Menu rather than a Select.\nconst COMMAND_ROW: DemoRow = {\n  key: 'new',\n  label: 'New workspace',\n  subtitle: 'Start from an empty scope',\n  icon: 'plus',\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Static showcase — ONE row inside panel chrome, state-driven by variant\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Hand-rendered (not the real `<Menu>`) so we can FORCE a row state\n * regardless of pointer / keyboard, and so the panel renders inline (the live\n * atom's panel is `position: fixed` + portaled). Uses the exact DOM + classes\n * the atom emits, so production CSS — and any saved `.uxm-menu__panel` tuning\n * — exercises against it identically.\n *\n * ONE row, not a whole menu. Matches `Listbox`'s showcase: the row states are\n * exclusive, so a four-row mock could only ever paint the picked state on one\n * of them and left the other three as noise competing for attention. The\n * composition of a real menu — several rows, a separator between groups — is\n * what the live instance below is for.\n *\n * Everything is shown AT REST. No state is forced on top of another: painting\n * the highlight over the `current` pick made the showcase contradict its own\n * knobs (`itemCurrentBg` defaults to `transparent`) and read as \"current has a\n * background\". The knobs that only exist in combination — the danger tone's\n * Hover Background, the separator's colour — are exercised by hovering /\n * opening the live menu.\n *\n * `pointer-events: none` + `tabIndex={-1}` keep it inert, so hovering can't\n * paint `:hover` over the forced state the user picked.\n */\nfunction StaticShowcase({\n  state,\n  withIcons,\n  withSubtitles,\n  withHints,\n}: {\n  state: string;\n  withIcons: boolean;\n  withSubtitles: boolean;\n  withHints: boolean;\n}) {\n  const isDisabled = state === 'disabled';\n  const isCurrent = state === 'current';\n\n  return (\n    <div\n      className=\"uxm-menu__panel\"\n      style={{\n        width: 260,\n        // Override the live atom's `position: fixed` / `overflow: hidden` —\n        // the showcase renders inline, not portaled, and without these the\n        // panel collapses to zero size.\n        position: 'static',\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }}\n    >\n      <div className=\"uxm-menu__list\" style={{ overflowY: 'visible' }}>\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          disabled={isDisabled || undefined}\n          className={cn(\n            'uxm-menu__item',\n            // The atom's class is `--active` because it covers mouse hover AND\n            // keyboard highlight (they paint identically); the workbench calls\n            // it \"Hover\" because that's the designers' word. Keep in sync.\n            state === 'hover' && 'uxm-menu__item--active',\n            isDisabled && 'uxm-menu__item--disabled',\n            state === 'danger' && 'uxm-menu__item--danger',\n            isCurrent && 'uxm-menu__item--current',\n          )}\n        >\n          {withIcons && <Icon glyph=\"user\" size={16} className=\"uxm-menu__item-icon\" />}\n          {withSubtitles ? (\n            <span className=\"uxm-menu__item-text\">\n              <span className=\"uxm-menu__item-label\">Sample row — {state}</span>\n              <span className=\"uxm-menu__item-subtitle\">Supporting line beneath</span>\n            </span>\n          ) : (\n            <span className=\"uxm-menu__item-label\">Sample row — {state}</span>\n          )}\n          {withHints && <span className=\"uxm-menu__item-hint\">⌘E</span>}\n          {isCurrent && (\n            <span className=\"uxm-menu__item-checkmark\" aria-hidden=\"true\">\n              <Icon glyph=\"check\" size={14} />\n            </span>\n          )}\n        </button>\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Entry — static showcase + a live ⋮ menu (real atom)\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport function MenuPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = (variants.state as string) ?? 'default';\n  const withIcons = (variants.withIcons ?? 'yes') === 'yes';\n  const withSeparator = (variants.withSeparator ?? 'yes') === 'yes';\n  const withSubtitles = (variants.withSubtitles ?? 'no') === 'yes';\n  const withHints = (variants.withHints ?? 'no') === 'yes';\n  const shape = ((variants.shape as string) ?? 'actions') as 'actions' | 'switcher';\n\n  const cssVars = buildVars(styles);\n\n  // Live items — the real atom. Exercises what the single-row showcase above\n  // cannot: the portaled panel, arrow-key nav skipping the disabled row,\n  // `aria-current` + the trailing ✓, the separator between rows, and the\n  // `--current` × `--active` composition when you hover the current row.\n  // `panelStyle={cssVars}` pushes live knob values onto the portaled panel.\n  const toItem = (r: DemoRow) => ({\n    key: r.key,\n    label: r.label,\n    icon: withIcons ? r.icon : undefined,\n    subtitle: withSubtitles ? r.subtitle : undefined,\n    hint: withHints ? r.hint : undefined,\n    disabled: r.disabled,\n    danger: r.danger,\n    current: r.current,\n  });\n  const separator = withSeparator ? ([{ separator: true, key: 'sep' }] as MenuEntry[]) : [];\n  const liveItems: MenuEntry[] =\n    shape === 'switcher'\n      ? [...WORKSPACE_ROWS.map(toItem), ...separator, toItem(COMMAND_ROW)]\n      : [...ACTION_ROWS.map(toItem), ...separator, toItem(DANGER_ROW)];\n\n  // The live panel is portaled and `position: fixed`, and `Popover` only\n  // recomputes on open, on scroll and on window resize — never on the content\n  // ABOVE the anchor changing height. Held open, that makes it go stale: turning\n  // Subtitles on grows the static row above and the panel drifts (measured -5px,\n  // i.e. overlapping upwards) until something scrolls or resizes. Nudge the\n  // listener Popover already has rather than remounting, which would flash the\n  // panel on every knob drag. Keyed on a serialised signature so it fires on\n  // real changes only.\n  const layoutSignature = JSON.stringify([shape, variants, styles]);\n  useEffect(() => {\n    window.dispatchEvent(new Event('resize'));\n  }, [layoutSignature]);\n\n  const sectionLabel: CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase',\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase\n          state={state}\n          withIcons={withIcons}\n          withSubtitles={withSubtitles}\n          withHints={withHints}\n        />\n      </div>\n\n      {/* The real atom, HELD OPEN. Requiring a click made the section useless\n          for tuning: the panel is portaled and dismisses on outside click, so\n          it closed again the moment the user touched a knob in the properties\n          panel. `open` is pinned true and `onOpenChange` deliberately ignores\n          close requests, which means Escape / outside-click are NOT exercised\n          here — they belong to `Popover`'s own contract and its own entry.\n          What this section does exercise is everything the hand-rendered\n          showcase above cannot: the real portaled panel, `renderTrigger` +\n          `triggerProps` wiring (`aria-expanded`, `aria-controls`), arrow-key\n          navigation, `aria-current`, the separator between rows, and the\n          `--current` × `--active` composition when you hover the current row.\n          Rows stay clickable and never dismiss. */}\n      {/* `display: flex` is load-bearing, not cosmetic. `.uxm-menu` is\n          `inline-flex`, and the anchor inside it is zero-height — so in a block\n          container it still generates a 24px line box and baseline alignment\n          pushes the panel ~18px further down than the label's own margin.\n          Blockifying it as a flex item removes the line box entirely. */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          borderTop: '1px solid var(--color-border)',\n          paddingTop: 16,\n        }}\n      >\n        <div style={sectionLabel}>Live {shape === 'switcher' ? 'switcher' : 'action menu'}</div>\n        <Menu\n          // Remount on a shape change. The panel is held open, so `open` never\n          // flips and the atom's open-transition effect would not re-run —\n          // the highlight would carry over from the previous shape, hiding the\n          // very rule this section should show (a menu WITH a `current` row\n          // opens with nothing highlighted; one without still lights row one).\n          key={shape}\n          items={liveItems}\n          aria-label={shape === 'switcher' ? 'Switch workspace' : 'Row actions'}\n          open\n          onOpenChange={() => {}}\n          // `bottom-start`, overriding the atom's `bottom-end` default. That\n          // default is right for a real ⋮ at a row's trailing edge (the panel\n          // grows leftwards, staying inside the container), but here the anchor\n          // sits at the canvas's left edge and the panel is portaled\n          // `position: fixed` — held open, it painted straight over the\n          // studio's own sidebar. Preview framing only; the atom's default is\n          // unchanged.\n          placement=\"bottom-start\"\n          panelStyle={cssVars}\n          renderTrigger={({ triggerProps }) => (\n            // An invisible anchor, not a ⋮ button. With the panel held open the\n            // trigger has nothing left to do for the user — a kebab that opens\n            // nothing is dead UI — but `Popover` measures against it, so it has\n            // to stay in the DOM. Zero height, full width so the panel lands at\n            // the section's left edge.\n            //\n            // Only `ref` is taken from `triggerProps`, not the whole spread:\n            // the click / key handlers are inert here (nothing to toggle) and\n            // `aria-haspopup` / `aria-expanded` / `aria-controls` would describe\n            // a control this element no longer is. Better to not claim them\n            // than to spread them and paper over it with `aria-hidden`.\n            <span\n              ref={triggerProps.ref}\n              aria-hidden=\"true\"\n              style={{ display: 'block', width: '100%', height: 0 }}\n            />\n          )}\n        />\n      </div>\n\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/menu/menu.cjs

@@ -0,0 +1,257 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var menu_exports = {};
+__export(menu_exports, {
+  Menu: () => Menu
+});
+module.exports = __toCommonJS(menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_cn = require("../../helpers/cn.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_popover = require("../popover/index.cjs");
+function isSeparator(entry) {
+  return entry.separator === true;
+}
+function Menu({
+  items,
+  renderTrigger,
+  placement = "bottom-end",
+  open: openProp,
+  onOpenChange,
+  minWidth,
+  maxWidth,
+  matchAnchorWidth = false,
+  "aria-label": ariaLabel,
+  className,
+  panelClassName,
+  panelStyle
+}) {
+  const anchorTied = matchAnchorWidth !== false;
+  const resolvedMinWidth = minWidth ?? (anchorTied ? void 0 : 160);
+  const resolvedMaxWidth = maxWidth ?? (anchorTied ? void 0 : 280);
+  const triggerRef = (0, import_react.useRef)(null);
+  const itemRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const panelId = (0, import_react.useId)();
+  const [openInternal, setOpenInternal] = (0, import_react.useState)(false);
+  const open = openProp ?? openInternal;
+  const setOpen = (0, import_react.useCallback)(
+    (next) => {
+      if (openProp === void 0) setOpenInternal(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const focusableIndices = (0, import_react.useMemo)(() => {
+    const idx = [];
+    items.forEach((entry, i) => {
+      if (!isSeparator(entry) && !entry.disabled) idx.push(i);
+    });
+    return idx;
+  }, [items]);
+  const hasCurrent = (0, import_react.useMemo)(
+    () => items.some((entry) => !isSeparator(entry) && entry.current),
+    [items]
+  );
+  const [active, setActive] = (0, import_react.useState)(0);
+  const listRef = (0, import_react.useRef)(null);
+  const openedByKeyboard = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!open) {
+      openedByKeyboard.current = false;
+      return;
+    }
+    setActive(openedByKeyboard.current || !hasCurrent ? 0 : -1);
+    openedByKeyboard.current = false;
+    const t = setTimeout(() => listRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    if (!open || active < 0) return;
+    const itemIndex = focusableIndices[active];
+    if (itemIndex == null) return;
+    const entry = items[itemIndex];
+    if (isSeparator(entry)) return;
+    itemRefs.current.get(entry.key)?.scrollIntoView({ block: "nearest" });
+  }, [active, open, items, focusableIndices]);
+  const select = (0, import_react.useCallback)(
+    (item) => {
+      if (item.disabled) return;
+      item.onSelect?.();
+      setOpen(false);
+    },
+    [setOpen]
+  );
+  const onPanelKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      const n = focusableIndices.length;
+      if (n === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((i) => i < 0 ? 0 : (i + 1) % n);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((i) => i < 0 ? n - 1 : (i - 1 + n) % n);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActive(n - 1);
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (active < 0) return;
+        const itemIndex = focusableIndices[active];
+        const entry = itemIndex != null ? items[itemIndex] : void 0;
+        if (entry && !isSeparator(entry)) select(entry);
+      }
+    },
+    [active, focusableIndices, items, select]
+  );
+  const onTriggerKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        e.preventDefault();
+        openedByKeyboard.current = true;
+        setOpen(true);
+      }
+    },
+    [setOpen]
+  );
+  const triggerProps = (0, import_react.useMemo)(
+    () => ({
+      ref: (el) => {
+        triggerRef.current = el;
+      },
+      onClick: () => setOpen(!open),
+      onKeyDown: onTriggerKeyDown,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : void 0
+    }),
+    [open, onTriggerKeyDown, panelId, setOpen]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("uxm-menu", className), children: [
+    renderTrigger({ open, triggerProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_popover.Popover,
+      {
+        open,
+        onOpenChange: setOpen,
+        anchor: triggerRef,
+        placement,
+        minWidth: resolvedMinWidth,
+        maxWidth: resolvedMaxWidth,
+        matchAnchorWidth,
+        initialFocus: listRef,
+        role: "menu",
+        "aria-label": ariaLabel,
+        id: panelId,
+        className: (0, import_cn.cn)("uxm-menu__panel", panelClassName),
+        style: panelStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: listRef,
+            className: "uxm-menu__list",
+            tabIndex: -1,
+            onKeyDown: onPanelKeyDown,
+            children: items.map((entry, i) => {
+              if (isSeparator(entry)) {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "uxm-menu__separator",
+                    role: "separator"
+                  },
+                  entry.key ?? `__sep_${i}`
+                );
+              }
+              const isActive = active >= 0 && focusableIndices[active] === i;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  ref: (el) => {
+                    if (el) itemRefs.current.set(entry.key, el);
+                    else itemRefs.current.delete(entry.key);
+                  },
+                  type: "button",
+                  role: "menuitem",
+                  "aria-current": entry.current ? "true" : void 0,
+                  "aria-disabled": entry.disabled || void 0,
+                  disabled: entry.disabled || void 0,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    select(entry);
+                  },
+                  onMouseEnter: () => {
+                    if (entry.disabled) return;
+                    const flatIdx = focusableIndices.indexOf(i);
+                    if (flatIdx >= 0) setActive(flatIdx);
+                  },
+                  className: (0, import_cn.cn)(
+                    "uxm-menu__item",
+                    isActive && "uxm-menu__item--active",
+                    entry.disabled && "uxm-menu__item--disabled",
+                    entry.danger && "uxm-menu__item--danger",
+                    entry.current && "uxm-menu__item--current"
+                  ),
+                  children: [
+                    entry.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_icon.Icon,
+                      {
+                        glyph: entry.icon,
+                        size: 16,
+                        className: "uxm-menu__item-icon",
+                        style: entry.iconColor ? { color: entry.iconColor } : void 0
+                      }
+                    ),
+                    entry.subtitle != null ? (
+                      // Two-line row: headline + subtitle stacked in a column so
+                      // the label keeps its ellipsis and the trailing hint still
+                      // right-aligns against the block.
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-menu__item-text", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-label", children: entry.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-subtitle", children: entry.subtitle })
+                      ] })
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-label", children: entry.label }),
+                    entry.hint != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-hint", children: entry.hint }),
+                    entry.current && // Trailing ✓, after any hint. It needs NO `margin-left:
+                    // auto` — the label / text column already carries `flex: 1`
+                    // and eats the free space. Adding one would split that space
+                    // with the hint's own auto margin and float the hint
+                    // mid-row. `aria-current` on the row already carries the
+                    // meaning, so the glyph stays out of the a11y tree.
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "check", size: 14 }) })
+                  ]
+                },
+                entry.key
+              );
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menu
+});
+//# sourceMappingURL=menu.cjs.map

package/dist/ui/menu/menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/menu.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\n\nimport { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\nimport { Popover, type PopoverPlacement } from '../popover';\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Types\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * One actionable row in the menu. Selecting it fires `onSelect` and\n * closes the menu — menus are about INVOKING an action, not holding a\n * selected value (that's Listbox/Select): pick → act → dismiss.\n *\n * `current` is not a counter-example. It marks where the user already IS\n * (the workspace they're in), which the menu reflects rather than owns —\n * there is still no value the menu holds, no `aria-selected`, and nothing\n * the atom mutates on pick. Reach for Listbox/Select the moment the panel\n * is supposed to OWN the chosen value.\n */\nexport interface MenuItem {\n  /** Stable identity — used as React key and for keyboard focus tracking. */\n  key: string;\n  /** Row content. A plain string renders as the label; pass a node for richer rows. */\n  label: ReactNode;\n  /**\n   * Optional secondary line rendered beneath `label`, turning the row into a\n   * two-line item: `label` is the headline, `subtitle` the supporting text\n   * (e.g. a description or the current value). Single-line rows omit it.\n   */\n  subtitle?: ReactNode;\n  /** Optional leading icon glyph (see icons.ts). */\n  icon?: string;\n  /**\n   * Per-row colour for the leading glyph, applied inline — overrides the\n   * shared `--uxm-menu-item-icon-color` for THIS row only. For icons that\n   * carry identity rather than decoration: a workspace's own colour, a\n   * status tint.\n   *\n   * Prefer a token reference (`'var(--color-category-composite)'`) so MODO\n   * re-tinting still reaches it. A raw hex is only legitimate when the\n   * colour is entity DATA from a backend, not a brand choice — otherwise it\n   * punches a hole in the two-layer theming model.\n   *\n   * Being inline it wins over the `color: inherit` that `--active` /\n   * `--danger` rows apply to the glyph. Deliberate — an identity colour\n   * should survive highlighting — but it also means a `danger` row keeps\n   * this colour instead of folding to the danger tone.\n   */\n  iconColor?: string;\n  /** Optional trailing hint (e.g. a keyboard shortcut \"⌘C\"). */\n  hint?: ReactNode;\n  /** Invoked on click / Enter / Space. The menu closes afterward. */\n  onSelect?: () => void;\n  /** Greyed + non-interactive; skipped by keyboard nav. */\n  disabled?: boolean;\n  /** Destructive styling (danger color) — e.g. Delete. */\n  danger?: boolean;\n  /**\n   * Marks the row the user is currently ON — the workspace they're in, the\n   * view they're looking at. Renders a trailing ✓ plus a heavier label, and\n   * sets `aria-current=\"true\"`.\n   *\n   * Named `current`, NOT `active`: `--active` already means \"the row under\n   * the keyboard cursor\" throughout this atom. The two compose — `--current`\n   * contributes weight + ✓, `--active` contributes the highlight surface —\n   * so a row that is both reads as both.\n   *\n   * Deliberately not `aria-selected` (invalid on `menuitem`) and not\n   * `role=\"menuitemradio\"` + `aria-checked`, even though the latter is the\n   * canonical ARIA answer for \"one of a set is checked in a menu\": a radio\n   * set requires EVERY member to carry `aria-checked`, which a flat\n   * `MenuEntry[]` cannot infer. Consumers would have to pass `current:\n   * false` on every sibling, and forgetting one leaves a lone radio with no\n   * set — worse than no role at all. `aria-current` is also already this\n   * repo's idiom for \"where you are\" (sidebar-nav-item, breadcrumb,\n   * calendar). Revisit `menuitemradio` if one panel ever needs TWO\n   * independent switcher sets.\n   */\n  current?: boolean;\n}\n\n/** A non-interactive divider between groups of items. */\nexport interface MenuSeparator {\n  separator: true;\n  /** Optional key; falls back to positional. */\n  key?: string;\n}\n\nexport type MenuEntry = MenuItem | MenuSeparator;\n\nfunction isSeparator(entry: MenuEntry): entry is MenuSeparator {\n  return (entry as MenuSeparator).separator === true;\n}\n\n/**\n * Props spread onto the consumer's trigger element. Mirrors Listbox's\n * trigger contract — the consumer owns the trigger entirely (an\n * IconButton ⋮, a Button, anything) and the menu wires open/close +\n * ARIA through these. Do NOT add your own onClick / aria-expanded /\n * aria-haspopup — they would override the menu's wiring.\n */\nexport interface MenuTriggerProps {\n  ref: (el: HTMLElement | null) => void;\n  onClick: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  'aria-haspopup': 'menu';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface MenuProps {\n  /** Menu entries — actionable items + separators, in display order. */\n  items: MenuEntry[];\n  /** Render the trigger. Spread `triggerProps` onto your interactive element. */\n  renderTrigger: (api: { open: boolean; triggerProps: MenuTriggerProps }) => ReactNode;\n  /** Preferred placement. Flips if it would clip. Default `bottom-end` (menus typically align to a trailing ⋮). */\n  placement?: PopoverPlacement;\n  /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */\n  open?: boolean;\n  /** Called whenever the menu wants to open/close. Required if `open` is passed. */\n  onOpenChange?: (open: boolean) => void;\n  /** Minimum panel width in px. Default 160 — unless `matchAnchorWidth` is set; see there. */\n  minWidth?: number;\n  /** Maximum panel width in px — long labels truncate beyond it. Default 280 — unless `matchAnchorWidth` is set; see there. */\n  maxWidth?: number;\n  /**\n   * Tie the panel width to the trigger: `true` makes it equal, `'min'` makes\n   * the trigger width a floor the panel may grow past. Default `false` —\n   * width from content, clamped by `minWidth` / `maxWidth`.\n   *\n   * Which is right follows from what the trigger IS. A field-like trigger\n   * that DISPLAYS a value (a workspace switcher, a scope picker) wants the\n   * panel tied to it — the native `<select>` convention, where the panel\n   * reads as a continuation of the control rather than a separate floating\n   * card; `'min'` is the forgiving choice there, since user-authored labels\n   * outgrow a fixed width. An icon-only or ⋮ trigger must NOT match, or you\n   * get a 32px panel — which is exactly why the default is `false` and\n   * `placement` is `bottom-end`: content width, aligned to the trailing\n   * edge the ⋮ sits on.\n   *\n   * Setting this also drops the default 160/280 clamp. Popover applies\n   * `maxWidth` unconditionally, so leaving 280 in place would paint a panel\n   * NARROWER than a trigger wider than 280.\n   *\n   * On restoring bounds, mind the asymmetry — `Popover` treats the two\n   * differently (popover.tsx: `minWidth: matchAnchorWidth === 'min' ?\n   * anchorWidth : minWidth`):\n   *   - `maxWidth` is always honoured, in either mode.\n   *   - `minWidth` is honoured with `true`, but **ignored with `'min'`** — that\n   *     mode makes the measured anchor width the floor and discards whatever\n   *     you pass. So you cannot demand a floor WIDER than the trigger in\n   *     `'min'` mode; use `true` plus an explicit `minWidth` if you need that.\n   */\n  matchAnchorWidth?: boolean | 'min';\n  /** Accessible name for the menu panel. */\n  'aria-label'?: string;\n  /** Class on the in-page wrapper around the trigger. */\n  className?: string;\n  /** Class on the portaled panel. */\n  panelClassName?: string;\n  /** Style merged onto the portaled panel (after computed position). */\n  panelStyle?: CSSProperties;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Menu\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Action / dropdown menu — a list of commands invoked from a\n * consumer-owned trigger. Built on the headless `Popover` (positioning,\n * portal, outside-click, Escape) with proper menu semantics\n * (`role=\"menu\"` / `menuitem` / `separator`), arrow-key navigation that\n * skips separators + disabled rows, separators, leading icons, trailing\n * hints, destructive (danger) items, and a `current` row for switchers.\n *\n * Distinct from Listbox by design: a menu holds NO value — picking a row\n * runs its action and closes. Reach for Listbox/Select when the panel must\n * OWN the chosen value (`role=listbox`, `aria-selected`); reach for Menu\n * for row ⋮ actions, overflow menus, command lists, and context switchers\n * (`role=menu`). A switcher marks where you are with `current`\n * (`aria-current` + a trailing ✓) — a reflection of state that lives\n * elsewhere, not a value the menu keeps.\n *\n * Trigger ownership stays with the consumer (`renderTrigger` + spread\n * `triggerProps`) so an IconButton ⋮, a Button, or any surface works\n * without renderProp acrobatics — same contract as Listbox.\n */\nexport function Menu({\n  items,\n  renderTrigger,\n  placement = 'bottom-end',\n  open: openProp,\n  onOpenChange,\n  minWidth,\n  maxWidth,\n  matchAnchorWidth = false,\n  'aria-label': ariaLabel,\n  className,\n  panelClassName,\n  panelStyle,\n}: MenuProps) {\n  // Content-width defaults apply only while the panel is NOT tied to the\n  // anchor. Popover always forwards `maxWidth`, so keeping 280 alongside\n  // `matchAnchorWidth` would clamp a wide trigger's panel to less than the\n  // trigger itself; the symmetric trap is a 160 floor making the panel wider\n  // than a narrow trigger. An explicit `maxWidth` still wins either way; an\n  // explicit `minWidth` wins with `true` but is discarded by Popover under\n  // `'min'`, which always uses the measured anchor width as the floor.\n  const anchorTied = matchAnchorWidth !== false;\n  const resolvedMinWidth = minWidth ?? (anchorTied ? undefined : 160);\n  const resolvedMaxWidth = maxWidth ?? (anchorTied ? undefined : 280);\n\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const itemRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const panelId = useId();\n\n  // Open state — controlled if `open` is provided, else internal.\n  const [openInternal, setOpenInternal] = useState(false);\n  const open = openProp ?? openInternal;\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setOpenInternal(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  // Flat list of indices into `items` that are focusable (enabled\n  // actionable rows) — separators + disabled rows are skipped by\n  // keyboard nav. `active` is an index INTO this array, not into `items`.\n  const focusableIndices = useMemo(() => {\n    const idx: number[] = [];\n    items.forEach((entry, i) => {\n      if (!isSeparator(entry) && !entry.disabled) idx.push(i);\n    });\n    return idx;\n  }, [items]);\n\n  // A switcher already says where you are — the `current` row carries the ✓ and\n  // the heavier label. Lighting a SECOND row on open then competes with it, and\n  // because hover and keyboard highlight share one `--active` class, that row is\n  // indistinguishable from \"your pointer is here\". So a menu that has a\n  // `current` row opens with NOTHING highlighted (`active = -1`).\n  //\n  // Scoped to `current` on purpose: a plain action menu has no other way to say\n  // \"start here\", so it keeps lighting row one exactly as before — no existing\n  // consumer changes behaviour, since none of them pass `current` yet.\n  const hasCurrent = useMemo(\n    () => items.some((entry) => !isSeparator(entry) && entry.current),\n    [items],\n  );\n\n  const [active, setActive] = useState(0);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  // Set by the trigger's key handler just before it opens, read once by the open\n  // effect. A ref, not state — it has to be readable in the same commit that\n  // flips `open`, without a render of its own. A keyboard-opened menu always\n  // takes a position, `current` row or not: otherwise ArrowDown-to-open would\n  // need a SECOND ArrowDown just to enter the list.\n  const openedByKeyboard = useRef(false);\n\n  // Reset highlight to the first item each time the menu opens, and move\n  // focus into the panel so arrow keys navigate the menu (WAI-ARIA\n  // menu-button pattern). The panel list is `tabIndex=-1` and owns the\n  // keyboard handler — focusing it is what routes keys there.\n  //\n  // The focus is deferred to a macrotask: Popover mounts the panel\n  // `visibility: hidden` and only flips it visible once it has measured +\n  // positioned it, and `focus()` on a `visibility: hidden` element is a\n  // no-op. A `setTimeout(0)` lands after that position-settle re-render\n  // (and, unlike rAF, still fires when the tab is backgrounded). We own\n  // this rather than leaning on Popover's `initialFocus` (which we still\n  // pass, for focus restoration on close) — the menu's keyboard contract\n  // is the atom's own responsibility.\n  useEffect(() => {\n    if (!open) {\n      // Also clear on close, not only after a successful open. In CONTROLLED\n      // mode a consumer's `onOpenChange` may decline to flip `open` (gating it\n      // behind async state), and without this the flag would survive to\n      // mis-attribute a later pointer-open as a keyboard one.\n      openedByKeyboard.current = false;\n      return;\n    }\n    setActive(openedByKeyboard.current || !hasCurrent ? 0 : -1);\n    openedByKeyboard.current = false;\n    const t = setTimeout(() => listRef.current?.focus(), 0);\n    return () => clearTimeout(t);\n    // `hasCurrent` is read here but deliberately left OUT of the deps: this is a\n    // one-shot reset for the open transition. Re-running it because the item set\n    // gained or lost a `current` row mid-interaction would yank the highlight\n    // and re-steal focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- see above\n  }, [open]);\n\n  // Keep the highlighted row scrolled into view after arrow nav.\n  useEffect(() => {\n    if (!open || active < 0) return;\n    const itemIndex = focusableIndices[active];\n    if (itemIndex == null) return;\n    const entry = items[itemIndex];\n    if (isSeparator(entry)) return;\n    itemRefs.current.get(entry.key)?.scrollIntoView({ block: 'nearest' });\n  }, [active, open, items, focusableIndices]);\n\n  const select = useCallback(\n    (item: MenuItem) => {\n      if (item.disabled) return;\n      item.onSelect?.();\n      setOpen(false);\n    },\n    [setOpen],\n  );\n\n  // Panel keyboard nav — the panel itself is focused on open (tabIndex\n  // -1) so arrows work without any text input. Wraps at both ends, like\n  // Listbox.\n  const onPanelKeyDown = useCallback(\n     \n    (e: React.KeyboardEvent) => {\n      const n = focusableIndices.length;\n      if (n === 0) return;\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        // From \"nothing highlighted\" the first press lands on the FIRST row,\n        // not the second.\n        setActive((i) => (i < 0 ? 0 : (i + 1) % n));\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setActive((i) => (i < 0 ? n - 1 : (i - 1 + n) % n));\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        setActive(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        setActive(n - 1);\n      } else if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        if (active < 0) return;\n        const itemIndex = focusableIndices[active];\n        const entry = itemIndex != null ? items[itemIndex] : undefined;\n        if (entry && !isSeparator(entry)) select(entry);\n      }\n      // Escape is handled globally by Popover.\n    },\n    [active, focusableIndices, items, select],\n  );\n\n  // Trigger keyboard — Enter/Space/ArrowDown open the menu, matching the\n  // WAI-ARIA menu-button pattern.\n  const onTriggerKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        openedByKeyboard.current = true;\n        setOpen(true);\n      }\n    },\n    [setOpen],\n  );\n\n  // Memoised so a single `{...triggerProps}` spread doesn't hand the\n  // consumer a fresh `ref` callback every render — React would call the\n  // old callback with `null` then the new one with the element on each\n  // cycle, briefly nulling `triggerRef.current` (which Popover reads to\n  // position the panel). Mirrors the Listbox implementation.\n  const triggerProps: MenuTriggerProps = useMemo(\n    () => ({\n      ref: (el: HTMLElement | null) => {\n        triggerRef.current = el;\n      },\n      onClick: () => setOpen(!open),\n      onKeyDown: onTriggerKeyDown,\n      'aria-haspopup': 'menu',\n      'aria-expanded': open,\n      'aria-controls': open ? panelId : undefined,\n    }),\n    [open, onTriggerKeyDown, panelId, setOpen],\n  );\n\n  return (\n    <div className={cn('uxm-menu', className)}>\n      {/* eslint-disable-next-line react-hooks/refs -- triggerProps contains a ref-setter callback; the rule flags the pattern but the callback is the React-blessed way to wire a ref through a consumer-rendered element (same as Listbox) */}\n      {renderTrigger({ open, triggerProps })}\n      <Popover\n        open={open}\n        onOpenChange={setOpen}\n        anchor={triggerRef}\n        placement={placement}\n        minWidth={resolvedMinWidth}\n        maxWidth={resolvedMaxWidth}\n        matchAnchorWidth={matchAnchorWidth}\n        initialFocus={listRef as RefObject<HTMLElement | null>}\n        role=\"menu\"\n        aria-label={ariaLabel}\n        id={panelId}\n        className={cn('uxm-menu__panel', panelClassName)}\n        style={panelStyle}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the panel carries role=\"menu\" (set on the Popover above); this inner list is the focus target + key-router for WAI-ARIA menu nav, with full keyboard support via onKeyDown */}\n        <div\n          ref={listRef}\n          className=\"uxm-menu__list\"\n          tabIndex={-1}\n          onKeyDown={onPanelKeyDown}\n        >\n          {items.map((entry, i) => {\n            if (isSeparator(entry)) {\n              return (\n                <div\n                  key={entry.key ?? `__sep_${i}`}\n                  className=\"uxm-menu__separator\"\n                  role=\"separator\"\n                />\n              );\n            }\n            const isActive = active >= 0 && focusableIndices[active] === i;\n            return (\n              <button\n                key={entry.key}\n                ref={(el) => {\n                  if (el) itemRefs.current.set(entry.key, el);\n                  else itemRefs.current.delete(entry.key);\n                }}\n                type=\"button\"\n                role=\"menuitem\"\n                aria-current={entry.current ? 'true' : undefined}\n                aria-disabled={entry.disabled || undefined}\n                disabled={entry.disabled || undefined}\n                // mousedown (not click) so focus stays on the panel and a\n                // pointer pick doesn't blur-then-reopen.\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  select(entry);\n                }}\n                onMouseEnter={() => {\n                  if (entry.disabled) return;\n                  const flatIdx = focusableIndices.indexOf(i);\n                  if (flatIdx >= 0) setActive(flatIdx);\n                }}\n                className={cn(\n                  'uxm-menu__item',\n                  isActive && 'uxm-menu__item--active',\n                  entry.disabled && 'uxm-menu__item--disabled',\n                  entry.danger && 'uxm-menu__item--danger',\n                  entry.current && 'uxm-menu__item--current',\n                )}\n              >\n                {entry.icon && (\n                  <Icon\n                    glyph={entry.icon}\n                    size={16}\n                    className=\"uxm-menu__item-icon\"\n                    style={entry.iconColor ? { color: entry.iconColor } : undefined}\n                  />\n                )}\n                {entry.subtitle != null ? (\n                  // Two-line row: headline + subtitle stacked in a column so\n                  // the label keeps its ellipsis and the trailing hint still\n                  // right-aligns against the block.\n                  <span className=\"uxm-menu__item-text\">\n                    <span className=\"uxm-menu__item-label\">{entry.label}</span>\n                    <span className=\"uxm-menu__item-subtitle\">{entry.subtitle}</span>\n                  </span>\n                ) : (\n                  <span className=\"uxm-menu__item-label\">{entry.label}</span>\n                )}\n                {entry.hint != null && (\n                  <span className=\"uxm-menu__item-hint\">{entry.hint}</span>\n                )}\n                {entry.current && (\n                  // Trailing ✓, after any hint. It needs NO `margin-left:\n                  // auto` — the label / text column already carries `flex: 1`\n                  // and eats the free space. Adding one would split that space\n                  // with the hint's own auto margin and float the hint\n                  // mid-row. `aria-current` on the row already carries the\n                  // meaning, so the glyph stays out of the a11y tree.\n                  <span className=\"uxm-menu__item-checkmark\" aria-hidden=\"true\">\n                    <Icon glyph=\"check\" size={14} />\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      </Popover>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqagB;AArahB,mBAUO;AAEP,gBAAmB;AACnB,kBAAqB;AACrB,qBAA+C;AAwF/C,SAAS,YAAY,OAA0C;AAC7D,SAAQ,MAAwB,cAAc;AAChD;AAgGO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAAc;AAQZ,QAAM,aAAa,qBAAqB;AACxC,QAAM,mBAAmB,aAAa,aAAa,SAAY;AAC/D,QAAM,mBAAmB,aAAa,aAAa,SAAY;AAE/D,QAAM,iBAAa,qBAA2B,IAAI;AAClD,QAAM,eAAW,qBAAuC,oBAAI,IAAI,CAAC;AACjE,QAAM,cAAU,oBAAM;AAGtB,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AACtD,QAAM,OAAO,YAAY;AACzB,QAAM,cAAU;AAAA,IACd,CAAC,SAAkB;AACjB,UAAI,aAAa,OAAW,iBAAgB,IAAI;AAChD,qBAAe,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAKA,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,UAAM,MAAgB,CAAC;AACvB,UAAM,QAAQ,CAAC,OAAO,MAAM;AAC1B,UAAI,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,SAAU,KAAI,KAAK,CAAC;AAAA,IACxD,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAWV,QAAM,iBAAa;AAAA,IACjB,MAAM,MAAM,KAAK,CAAC,UAAU,CAAC,YAAY,KAAK,KAAK,MAAM,OAAO;AAAA,IAChE,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,CAAC;AACtC,QAAM,cAAU,qBAA8B,IAAI;AAMlD,QAAM,uBAAmB,qBAAO,KAAK;AAerC,8BAAU,MAAM;AACd,QAAI,CAAC,MAAM;AAKT,uBAAiB,UAAU;AAC3B;AAAA,IACF;AACA,cAAU,iBAAiB,WAAW,CAAC,aAAa,IAAI,EAAE;AAC1D,qBAAiB,UAAU;AAC3B,UAAM,IAAI,WAAW,MAAM,QAAQ,SAAS,MAAM,GAAG,CAAC;AACtD,WAAO,MAAM,aAAa,CAAC;AAAA,EAM7B,GAAG,CAAC,IAAI,CAAC;AAGT,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS,EAAG;AACzB,UAAM,YAAY,iBAAiB,MAAM;AACzC,QAAI,aAAa,KAAM;AACvB,UAAM,QAAQ,MAAM,SAAS;AAC7B,QAAI,YAAY,KAAK,EAAG;AACxB,aAAS,QAAQ,IAAI,MAAM,GAAG,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,EACtE,GAAG,CAAC,QAAQ,MAAM,OAAO,gBAAgB,CAAC;AAE1C,QAAM,aAAS;AAAA,IACb,CAAC,SAAmB;AAClB,UAAI,KAAK,SAAU;AACnB,WAAK,WAAW;AAChB,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAKA,QAAM,qBAAiB;AAAA,IAErB,CAAC,MAA2B;AAC1B,YAAM,IAAI,iBAAiB;AAC3B,UAAI,MAAM,EAAG;AACb,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AAGjB,kBAAU,CAAC,MAAO,IAAI,IAAI,KAAK,IAAI,KAAK,CAAE;AAAA,MAC5C,WAAW,EAAE,QAAQ,WAAW;AAC9B,UAAE,eAAe;AACjB,kBAAU,CAAC,MAAO,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,CAAE;AAAA,MACpD,WAAW,EAAE,QAAQ,QAAQ;AAC3B,UAAE,eAAe;AACjB,kBAAU,CAAC;AAAA,MACb,WAAW,EAAE,QAAQ,OAAO;AAC1B,UAAE,eAAe;AACjB,kBAAU,IAAI,CAAC;AAAA,MACjB,WAAW,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAC7C,UAAE,eAAe;AACjB,YAAI,SAAS,EAAG;AAChB,cAAM,YAAY,iBAAiB,MAAM;AACzC,cAAM,QAAQ,aAAa,OAAO,MAAM,SAAS,IAAI;AACrD,YAAI,SAAS,CAAC,YAAY,KAAK,EAAG,QAAO,KAAK;AAAA,MAChD;AAAA,IAEF;AAAA,IACA,CAAC,QAAQ,kBAAkB,OAAO,MAAM;AAAA,EAC1C;AAIA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAAwC;AACvC,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,OAAO,EAAE,QAAQ,aAAa;AAC/D,UAAE,eAAe;AACjB,yBAAiB,UAAU;AAC3B,gBAAQ,IAAI;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAOA,QAAM,mBAAiC;AAAA,IACrC,OAAO;AAAA,MACL,KAAK,CAAC,OAA2B;AAC/B,mBAAW,UAAU;AAAA,MACvB;AAAA,MACA,SAAS,MAAM,QAAQ,CAAC,IAAI;AAAA,MAC5B,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB,OAAO,UAAU;AAAA,IACpC;AAAA,IACA,CAAC,MAAM,kBAAkB,SAAS,OAAO;AAAA,EAC3C;AAEA,SACE,6CAAC,SAAI,eAAW,cAAG,YAAY,SAAS,GAErC;AAAA,kBAAc,EAAE,MAAM,aAAa,CAAC;AAAA,IACrC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAc;AAAA,QACd,QAAQ;AAAA,QACR;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,IAAI;AAAA,QACJ,eAAW,cAAG,mBAAmB,cAAc;AAAA,QAC/C,OAAO;AAAA,QAGP;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAU;AAAA,YACV,UAAU;AAAA,YACV,WAAW;AAAA,YAEV,gBAAM,IAAI,CAAC,OAAO,MAAM;AACvB,kBAAI,YAAY,KAAK,GAAG;AACtB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAU;AAAA,oBACV,MAAK;AAAA;AAAA,kBAFA,MAAM,OAAO,SAAS,CAAC;AAAA,gBAG9B;AAAA,cAEJ;AACA,oBAAM,WAAW,UAAU,KAAK,iBAAiB,MAAM,MAAM;AAC7D,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,KAAK,CAAC,OAAO;AACX,wBAAI,GAAI,UAAS,QAAQ,IAAI,MAAM,KAAK,EAAE;AAAA,wBACrC,UAAS,QAAQ,OAAO,MAAM,GAAG;AAAA,kBACxC;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,gBAAc,MAAM,UAAU,SAAS;AAAA,kBACvC,iBAAe,MAAM,YAAY;AAAA,kBACjC,UAAU,MAAM,YAAY;AAAA,kBAG5B,aAAa,CAAC,MAAM;AAClB,sBAAE,eAAe;AACjB,2BAAO,KAAK;AAAA,kBACd;AAAA,kBACA,cAAc,MAAM;AAClB,wBAAI,MAAM,SAAU;AACpB,0BAAM,UAAU,iBAAiB,QAAQ,CAAC;AAC1C,wBAAI,WAAW,EAAG,WAAU,OAAO;AAAA,kBACrC;AAAA,kBACA,eAAW;AAAA,oBACT;AAAA,oBACA,YAAY;AAAA,oBACZ,MAAM,YAAY;AAAA,oBAClB,MAAM,UAAU;AAAA,oBAChB,MAAM,WAAW;AAAA,kBACnB;AAAA,kBAEC;AAAA,0BAAM,QACL;AAAA,sBAAC;AAAA;AAAA,wBACC,OAAO,MAAM;AAAA,wBACb,MAAM;AAAA,wBACN,WAAU;AAAA,wBACV,OAAO,MAAM,YAAY,EAAE,OAAO,MAAM,UAAU,IAAI;AAAA;AAAA,oBACxD;AAAA,oBAED,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIjB,6CAAC,UAAK,WAAU,uBACd;AAAA,oEAAC,UAAK,WAAU,wBAAwB,gBAAM,OAAM;AAAA,wBACpD,4CAAC,UAAK,WAAU,2BAA2B,gBAAM,UAAS;AAAA,yBAC5D;AAAA,wBAEA,4CAAC,UAAK,WAAU,wBAAwB,gBAAM,OAAM;AAAA,oBAErD,MAAM,QAAQ,QACb,4CAAC,UAAK,WAAU,uBAAuB,gBAAM,MAAK;AAAA,oBAEnD,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOL,4CAAC,UAAK,WAAU,4BAA2B,eAAY,QACrD,sDAAC,oBAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA;AAAA;AAAA,gBA5DG,MAAM;AAAA,cA8Db;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/menu/menu.css

@@ -0,0 +1,216 @@
+@charset "UTF-8";
+/* ── menu ─────────────────────────────────────────────────────────────────────
+   Action / dropdown menu — a list of commands invoked from a consumer-owned
+   trigger. The `.uxm-menu` wrapper lives in-page around the trigger; the
+   `.uxm-menu__panel` portals to document.body (positioned by Popover), so the
+   studio emits saved vars on BOTH selectors (PER_COMPONENT_SELECTOR) and the
+   panel carries them no matter where it mounts. Picking a row runs its action
+   and dismisses — no selected-value state (that's Listbox). A switcher marks
+   where the user already is with `--current` (weight + a trailing ✓), which
+   reflects state owned elsewhere rather than holding a value here.
+   ──────────────────────────────────────────────────────────────────────────── */
+.uxm-menu {
+  display: inline-flex;
+}
+
+.uxm-menu__panel {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--uxm-menu-panel-max-height, 360px);
+  overflow: hidden;
+  background-color: var(--uxm-menu-panel-bg, var(--color-card));
+  border: 1px solid var(--uxm-menu-panel-border, var(--color-border));
+  border-radius: var(--uxm-menu-panel-radius, 8px);
+  /* Composed from the Color / Blur / Offset Y knobs (same pattern as the
+     Calendar atom) rather than a single box-shadow string. */
+  box-shadow: 0 var(--uxm-menu-shadow-offset-y, 6px) var(--uxm-menu-shadow-blur, 20px) var(--uxm-menu-shadow-color, rgba(0, 0, 0, 0.1));
+}
+
+.uxm-menu__list {
+  overflow-y: auto;
+  padding: var(--uxm-menu-list-padding, 4px);
+  outline: none;
+}
+
+.uxm-menu__item {
+  /* width: 100% + own padding → border-box, or rows overflow the portaled
+     panel in a reset-less host (ui.css ships no reset). */
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--uxm-menu-item-gap, 10px);
+  text-align: left;
+  padding: var(--uxm-menu-item-padding-y, 7px) var(--uxm-menu-item-padding-x, 10px);
+  font-size: calc(var(--uxm-menu-item-font-size, 13px) * var(--type-scale, 1));
+  color: var(--uxm-menu-item-color, var(--color-text));
+  background-color: transparent;
+  border: none;
+  border-radius: var(--uxm-menu-item-radius, 4px);
+  cursor: pointer;
+  transition: background-color 0.1s, color 0.1s;
+}
+
+/* The row the user is currently on (a switcher's active workspace). Weight
+   + the trailing checkmark ONLY — no colour of its own, so `itemColor` and
+   the danger tone keep reaching this row, and the ✓ inherits whatever the
+   row paints.
+
+   Position matters: this sits BEFORE `--active` deliberately. Both are
+   single-class selectors, so source order decides, and the keyboard/hover
+   highlight must win the surface — a current row under the cursor has to
+   read as BOTH (weight + ✓ from here, background from `--active`). Move this
+   below `--active` and the current row stops highlighting.
+
+   `background-color` defaults to `transparent`: a resting tint was tried and
+   collided with the hover surface, whose own default is the obvious
+   `--color-surface-alt`. The knob stays so MODO can opt into one; the rule
+   order above means hover still covers it. */
+.uxm-menu__item--current {
+  background-color: var(--uxm-menu-item-current-bg, transparent);
+  font-weight: var(--uxm-menu-item-current-font-weight, 600);
+}
+
+/* Active = keyboard-highlighted via arrow nav OR pointer hover. The
+   atom's onMouseEnter applies `--active` so keyboard + pointer paint the
+   same modifier class; the `:hover` selector is a defensive fallback. */
+.uxm-menu__item--active,
+.uxm-menu__item:hover:not(:disabled) {
+  background-color: var(--uxm-menu-item-active-bg, var(--color-surface-alt));
+  color: var(--uxm-menu-item-active-color, var(--color-text));
+}
+
+.uxm-menu__item--disabled {
+  opacity: var(--uxm-menu-item-disabled-opacity, 0.4);
+  cursor: not-allowed;
+}
+
+/* Destructive items — e.g. Delete. Danger text at rest; danger-tinted
+   surface + colour when highlighted. The `--danger.--active` rule comes
+   AFTER the shared `--active` rule so it wins by source order. */
+.uxm-menu__item--danger {
+  color: var(--uxm-menu-item-danger-color, var(--color-danger-text));
+}
+
+.uxm-menu__item--danger.uxm-menu__item--active,
+.uxm-menu__item--danger:hover:not(:disabled) {
+  background-color: var(--uxm-menu-item-danger-active-bg, var(--color-danger-bg));
+  color: var(--uxm-menu-item-danger-color, var(--color-danger-text));
+}
+
+/* `--color-text-strong`, NOT `--color-text-subtle`. Subtle measures 1.48:1
+   on `--color-card` in the light theme and 2.85:1 in dark — below even the
+   3:1 non-text floor, and in practice FAINTER than a disabled row (which
+   multiplies `--color-text` by 0.4), so a live glyph read as switched off.
+   Strong measures 8.86:1 / 11.76:1 and still sits a clear step below the
+   label. Same token the subtitle uses, for the same reason. */
+.uxm-menu__item-icon {
+  flex-shrink: 0;
+  color: var(--uxm-menu-item-icon-color, var(--color-text-strong));
+}
+
+/* Icon tracks the row's text colour while active / danger so it never
+   reads as a separate accent against the highlighted row. */
+.uxm-menu__item--active .uxm-menu__item-icon,
+.uxm-menu__item--danger .uxm-menu__item-icon {
+  color: inherit;
+}
+
+.uxm-menu__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Two-line row: headline + subtitle stacked in a column. The wrapper owns
+   the row growth (flex: 1) so the trailing hint still right-aligns; inside
+   it the label no longer needs to grow. */
+.uxm-menu__item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--uxm-menu-item-subtitle-gap, 2px);
+}
+
+.uxm-menu__item-text .uxm-menu__item-label {
+  flex: 0 0 auto;
+}
+
+/* `--color-text-strong`, NOT `--color-text-muted`, is the resting subtitle
+   colour. Muted is the obvious pick for a supporting line and it is what the
+   hint uses — but a hint is a terse, redundant echo, whereas a subtitle
+   carries real information ("Currently in Inbox", "Remove permanently") at
+   11px. Muted measures 2.54:1 on `--color-card` in the light theme, under
+   even the 3:1 large-text floor, and Principle IV requires AA for text.
+   Strong measures 8.86:1 light / 11.76:1 dark and still reads a clear step
+   below `--color-text`, so the hierarchy survives without the contrast
+   failure. Recheck with `contrastRatio()` if this default ever moves. */
+.uxm-menu__item-subtitle {
+  overflow: hidden;
+  /* AA floor: 11px is the documented minimum at which this subtitle keeps 4.5:1
+     as body text — a global --type-scale below 1 must not shrink it further.
+     max() floors the SCALE only; growth (scale > 1) passes through. */
+  font-size: max(11px, var(--uxm-menu-item-subtitle-font-size, 11px) * var(--type-scale, 1));
+  color: var(--uxm-menu-item-subtitle-color, var(--color-text-strong));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* On a hover-highlighted or destructive row the subtitle folds to the row's
+   own (full-strength) text colour — like the icon and hint do — so it stays
+   legible against the highlight / danger surface and reads as part of the
+   row. Hierarchy comes from the smaller subtitle font, NOT a dimming
+   opacity: an `opacity` multiplier would composite the 11px text toward the
+   surface and can drop it below WCAG AA (measured: danger-text stays ~7.6:1
+   at full strength but ~0.75 opacity erodes that; Principle IV). */
+.uxm-menu__item--active .uxm-menu__item-subtitle,
+.uxm-menu__item--danger .uxm-menu__item-subtitle {
+  color: inherit;
+}
+
+/* `--color-text-muted` — 2.54:1 on `--color-card` in the LIGHT theme, below
+   the 4.5:1 AA floor for text (dark measures 5.70:1 and passes). A
+   deliberate, narrow exception, then, not the oversight it
+   looks like next to the subtitle note above. A hint is a redundant shortcut
+   echo ("⌘C"): the row is fully identified by its label without it, nothing
+   is lost if it goes unread, and it is the one slot here carrying no
+   content. The subtitle is the opposite — it carries information, which is
+   exactly why it refuses muted and takes `--color-text-strong`. Do not
+   "fix" this by unifying the two; they differ on purpose. If a hint ever
+   starts carrying meaning the label lacks, move it to strong. */
+.uxm-menu__item-hint {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: 12px;
+  /* AA floor — same reasoning as the subtitle's 11px, at this hint's 12px. */
+  font-size: max(12px, var(--uxm-menu-item-hint-font-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-menu-item-hint-color, var(--color-text-muted));
+}
+
+.uxm-menu__item--active .uxm-menu__item-hint {
+  color: inherit;
+}
+
+/* Trailing ✓ on the current row, after any hint. No `margin-left: auto`
+   here on purpose: the label / text column already carries `flex: 1` and
+   consumes the free space, so the ✓ lands on the trailing edge anyway — and
+   a second auto margin would SPLIT that space with the hint's own, floating
+   the hint mid-row. Colour inherits the row (Listbox's checkmark does the
+   same), so tuning a row's text tunes its ✓. */
+.uxm-menu__item-checkmark {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding-left: 12px;
+  color: inherit;
+}
+
+.uxm-menu__separator {
+  height: 1px;
+  margin: var(--uxm-menu-separator-margin, 4px) 0;
+  background-color: var(--uxm-menu-separator-color, var(--color-border));
+}