@viax.io/uxm 4.36.0

package/dist/ui/loader/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/loader/loader.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport type { HTMLAttributes } from 'react';\n\nexport type LoaderVariant = 'spinner' | 'dots' | 'bar';\nexport type LoaderLayout = 'stacked' | 'inline';\n\nexport interface LoaderProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: LoaderVariant;\n  layout?: LoaderLayout;\n  /** Single message, or `|`-separated to cycle. */\n  message?: string;\n  /** Cycle interval in ms. */\n  messageInterval?: number;\n  /**\n   * Accessible name for the `role=\"status\"` element when no `message` is\n   * showing. Default `\"Loading\"`. With a message, the message IS the name.\n   */\n  loadingLabel?: string;\n}\n\nexport function Loader({\n  variant = 'spinner',\n  layout = 'stacked',\n  message = '',\n  messageInterval = 1500,\n  loadingLabel = 'Loading',\n  className,\n  ...rest\n}: LoaderProps) {\n  const messages = useMemo(\n    () => message.split('|').map((s) => s.trim()).filter(Boolean),\n    [message],\n  );\n  const [idx, setIdx] = useState(0);\n  // Restart the cycle from the first message whenever the `message` prop\n  // changes — otherwise a swap mid-rotation would show some interior\n  // message first. Render-phase reset (React's \"storing information from\n  // previous renders\" pattern) instead of an effect so there's no extra\n  // render after the swap.\n  const [prevMessage, setPrevMessage] = useState(message);\n  if (prevMessage !== message) {\n    setPrevMessage(message);\n    setIdx(0);\n  }\n  useEffect(() => {\n    if (messages.length < 2) return;\n    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);\n    return () => clearInterval(id);\n  }, [messages, messageInterval]);\n\n  const currentMessage = messages.length === 0 ? '' : messages[idx % messages.length];\n\n  return (\n    <div className={cn('uxm-loader', `uxm-loader--${layout}`, className)} {...rest}>\n      {variant === 'spinner' && (\n        <div className=\"uxm-loader__spinner\" role=\"status\" aria-label={currentMessage || loadingLabel} />\n      )}\n      {variant === 'dots' && (\n        <div className=\"uxm-loader__dots\" role=\"status\" aria-label={currentMessage || loadingLabel}>\n          <span />\n          <span />\n          <span />\n        </div>\n      )}\n      {variant === 'bar' && (\n        <div className=\"uxm-loader__bar\" role=\"status\" aria-label={currentMessage || loadingLabel}>\n          <span />\n        </div>\n      )}\n      {currentMessage && (\n        <span className=\"uxm-loader__message\">\n          {messages.length > 1 ? (\n            <span key={idx} className=\"uxm-loader__message-fade\">\n              {currentMessage}\n            </span>\n          ) : (\n            currentMessage\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA0DQ,cAGA,YAHA;AA1DR,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,UAAU;AAqBZ,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,WAAW;AAAA,IACf,MAAM,QAAQ,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,OAAO;AAAA,IAC5D,CAAC,OAAO;AAAA,EACV;AACA,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAMhC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO;AACtD,MAAI,gBAAgB,SAAS;AAC3B,mBAAe,OAAO;AACtB,WAAO,CAAC;AAAA,EACV;AACA,YAAU,MAAM;AACd,QAAI,SAAS,SAAS,EAAG;AACzB,UAAM,KAAK,YAAY,MAAM,OAAO,CAAC,OAAO,IAAI,KAAK,SAAS,MAAM,GAAG,eAAe;AACtF,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,QAAM,iBAAiB,SAAS,WAAW,IAAI,KAAK,SAAS,MAAM,SAAS,MAAM;AAElF,SACE,qBAAC,SAAI,WAAW,GAAG,cAAc,eAAe,MAAM,IAAI,SAAS,GAAI,GAAG,MACvE;AAAA,gBAAY,aACX,oBAAC,SAAI,WAAU,uBAAsB,MAAK,UAAS,cAAY,kBAAkB,cAAc;AAAA,IAEhG,YAAY,UACX,qBAAC,SAAI,WAAU,oBAAmB,MAAK,UAAS,cAAY,kBAAkB,cAC5E;AAAA,0BAAC,UAAK;AAAA,MACN,oBAAC,UAAK;AAAA,MACN,oBAAC,UAAK;AAAA,OACR;AAAA,IAED,YAAY,SACX,oBAAC,SAAI,WAAU,mBAAkB,MAAK,UAAS,cAAY,kBAAkB,cAC3E,8BAAC,UAAK,GACR;AAAA,IAED,kBACC,oBAAC,UAAK,WAAU,uBACb,mBAAS,SAAS,IACjB,oBAAC,UAAe,WAAU,4BACvB,4BADQ,GAEX,IAEA,gBAEJ;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/menu/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var menu_exports = {};
+module.exports = __toCommonJS(menu_exports);
+__reExport(menu_exports, require("./menu.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./menu.cjs")
+});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/index.ts"],"sourcesContent":["export * from './menu';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,mBAAd;","names":[]}

package/dist/ui/menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './menu.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/ui/menu/index.js

@@ -0,0 +1,2 @@
+export * from "./menu.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/index.ts"],"sourcesContent":["export * from './menu';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/menu/menu-preview.cjs

@@ -0,0 +1,251 @@
+"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_preview_exports = {};
+__export(menu_preview_exports, {
+  MenuPreview: () => MenuPreview
+});
+module.exports = __toCommonJS(menu_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_menu = require("./menu.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-menu-panel-bg": styles.panelBg,
+    "--uxm-menu-panel-border": styles.panelBorder,
+    "--uxm-menu-panel-radius": `${styles.panelRadius}px`,
+    "--uxm-menu-panel-max-height": `${styles.panelMaxHeight}px`,
+    // Shadow composed from Color / Blur / Offset Y (mirrors the Calendar
+    // atom's decomposed shadow knobs).
+    "--uxm-menu-shadow-color": styles.shadowColor,
+    "--uxm-menu-shadow-blur": `${styles.shadowBlur}px`,
+    "--uxm-menu-shadow-offset-y": `${styles.shadowOffsetY}px`,
+    "--uxm-menu-item-padding-x": `${styles.itemPaddingX}px`,
+    "--uxm-menu-item-padding-y": `${styles.itemPaddingY}px`,
+    "--uxm-menu-item-font-size": `${styles.itemFontSize}px`,
+    "--uxm-menu-item-radius": `${styles.itemRadius}px`,
+    "--uxm-menu-item-color": styles.itemColor,
+    "--uxm-menu-item-active-bg": styles.itemActiveBg,
+    "--uxm-menu-item-active-color": styles.itemActiveColor,
+    "--uxm-menu-item-disabled-opacity": styles.itemDisabledOpacity != null ? String(styles.itemDisabledOpacity) : void 0,
+    "--uxm-menu-item-danger-color": styles.itemDangerColor,
+    "--uxm-menu-item-danger-active-bg": styles.itemDangerActiveBg,
+    "--uxm-menu-item-icon-color": styles.itemIconColor,
+    // Current row (a switcher's active entry) — weight + checkmark only; the
+    // colour deliberately comes from `itemColor` / the danger tone.
+    "--uxm-menu-item-current-bg": styles.itemCurrentBg,
+    "--uxm-menu-item-current-font-weight": styles.itemCurrentFontWeight,
+    // Trailing hint (shortcut echo).
+    "--uxm-menu-item-hint-font-size": `${styles.itemHintFontSize}px`,
+    "--uxm-menu-item-hint-color": styles.itemHintColor,
+    // Two-line (headline + subtitle) rows.
+    "--uxm-menu-item-subtitle-font-size": `${styles.itemSubtitleFontSize}px`,
+    "--uxm-menu-item-subtitle-color": styles.itemSubtitleColor,
+    "--uxm-menu-item-subtitle-gap": `${styles.itemSubtitleGap}px`,
+    "--uxm-menu-separator-color": styles.separatorColor
+  };
+}
+const ACTION_ROWS = [
+  { key: "edit", label: "Edit", subtitle: "Rename and change fields", icon: "pencil", hint: "\u2318E" },
+  { key: "duplicate", label: "Duplicate", subtitle: "Create a copy in this folder", icon: "copy", hint: "\u2318D" },
+  { key: "archive", label: "Archive", subtitle: "Move out of the active list", icon: "archive-x", disabled: true }
+];
+const DANGER_ROW = {
+  key: "delete",
+  label: "Delete",
+  subtitle: "Remove permanently",
+  icon: "trash",
+  hint: "\u232B",
+  danger: true
+};
+const WORKSPACE_ROWS = [
+  { key: "default", label: "default", subtitle: "Shared starting point", icon: "product", hint: "\u23181" },
+  { key: "order-processing", label: "order-processing", subtitle: "Fulfilment and returns", icon: "product", hint: "\u23182" },
+  { key: "pilot-2025", label: "pilot-2025", subtitle: "No access", icon: "product", disabled: true },
+  { key: "support-triage", label: "support-triage", subtitle: "Current workspace", icon: "product", hint: "\u23183", current: true }
+];
+const COMMAND_ROW = {
+  key: "new",
+  label: "New workspace",
+  subtitle: "Start from an empty scope",
+  icon: "plus"
+};
+function StaticShowcase({
+  state,
+  withIcons,
+  withSubtitles,
+  withHints
+}) {
+  const isDisabled = state === "disabled";
+  const isCurrent = state === "current";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "uxm-menu__panel",
+      style: {
+        width: 260,
+        // Override the live atom's `position: fixed` / `overflow: hidden` —
+        // the showcase renders inline, not portaled, and without these the
+        // panel collapses to zero size.
+        position: "static",
+        overflow: "visible",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-menu__list", style: { overflowY: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          disabled: isDisabled || void 0,
+          className: (0, import_helpers.cn)(
+            "uxm-menu__item",
+            // The atom's class is `--active` because it covers mouse hover AND
+            // keyboard highlight (they paint identically); the workbench calls
+            // it "Hover" because that's the designers' word. Keep in sync.
+            state === "hover" && "uxm-menu__item--active",
+            isDisabled && "uxm-menu__item--disabled",
+            state === "danger" && "uxm-menu__item--danger",
+            isCurrent && "uxm-menu__item--current"
+          ),
+          children: [
+            withIcons && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "user", size: 16, className: "uxm-menu__item-icon" }),
+            withSubtitles ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-menu__item-text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-menu__item-label", children: [
+                "Sample row \u2014 ",
+                state
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-subtitle", children: "Supporting line beneath" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-menu__item-label", children: [
+              "Sample row \u2014 ",
+              state
+            ] }),
+            withHints && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-hint", children: "\u2318E" }),
+            isCurrent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-menu__item-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 14 }) })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function MenuPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const withIcons = (variants.withIcons ?? "yes") === "yes";
+  const withSeparator = (variants.withSeparator ?? "yes") === "yes";
+  const withSubtitles = (variants.withSubtitles ?? "no") === "yes";
+  const withHints = (variants.withHints ?? "no") === "yes";
+  const shape = variants.shape ?? "actions";
+  const cssVars = buildVars(styles);
+  const toItem = (r) => ({
+    key: r.key,
+    label: r.label,
+    icon: withIcons ? r.icon : void 0,
+    subtitle: withSubtitles ? r.subtitle : void 0,
+    hint: withHints ? r.hint : void 0,
+    disabled: r.disabled,
+    danger: r.danger,
+    current: r.current
+  });
+  const separator = withSeparator ? [{ separator: true, key: "sep" }] : [];
+  const liveItems = shape === "switcher" ? [...WORKSPACE_ROWS.map(toItem), ...separator, toItem(COMMAND_ROW)] : [...ACTION_ROWS.map(toItem), ...separator, toItem(DANGER_ROW)];
+  const layoutSignature = JSON.stringify([shape, variants, styles]);
+  (0, import_react.useEffect)(() => {
+    window.dispatchEvent(new Event("resize"));
+  }, [layoutSignature]);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StaticShowcase,
+        {
+          state,
+          withIcons,
+          withSubtitles,
+          withHints
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          borderTop: "1px solid var(--color-border)",
+          paddingTop: 16
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+            "Live ",
+            shape === "switcher" ? "switcher" : "action menu"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_menu.Menu,
+            {
+              items: liveItems,
+              "aria-label": shape === "switcher" ? "Switch workspace" : "Row actions",
+              open: true,
+              onOpenChange: () => {
+              },
+              placement: "bottom-start",
+              panelStyle: cssVars,
+              renderTrigger: ({ triggerProps }) => (
+                // An invisible anchor, not a ⋮ button. With the panel held open the
+                // trigger has nothing left to do for the user — a kebab that opens
+                // nothing is dead UI — but `Popover` measures against it, so it has
+                // to stay in the DOM. Zero height, full width so the panel lands at
+                // the section's left edge.
+                //
+                // Only `ref` is taken from `triggerProps`, not the whole spread:
+                // the click / key handlers are inert here (nothing to toggle) and
+                // `aria-haspopup` / `aria-expanded` / `aria-controls` would describe
+                // a control this element no longer is. Better to not claim them
+                // than to spread them and paper over it with `aria-hidden`.
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    ref: triggerProps.ref,
+                    "aria-hidden": "true",
+                    style: { display: "block", width: "100%", height: 0 }
+                  }
+                )
+              )
+            },
+            shape
+          )
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuPreview
+});
+//# sourceMappingURL=menu-preview.cjs.map

package/dist/ui/menu/menu-preview.cjs.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-preview.d.ts

@@ -0,0 +1,5 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function MenuPreview({ styles, variants }: PreviewProps & {
+    componentId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menu-preview.d.ts.map

package/dist/ui/menu/menu-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/menu-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAgOrD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CAqIvF"}

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

@@ -0,0 +1,227 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/index.js";
+import { Menu } from "./menu.js";
+function buildVars(styles) {
+  return {
+    "--uxm-menu-panel-bg": styles.panelBg,
+    "--uxm-menu-panel-border": styles.panelBorder,
+    "--uxm-menu-panel-radius": `${styles.panelRadius}px`,
+    "--uxm-menu-panel-max-height": `${styles.panelMaxHeight}px`,
+    // Shadow composed from Color / Blur / Offset Y (mirrors the Calendar
+    // atom's decomposed shadow knobs).
+    "--uxm-menu-shadow-color": styles.shadowColor,
+    "--uxm-menu-shadow-blur": `${styles.shadowBlur}px`,
+    "--uxm-menu-shadow-offset-y": `${styles.shadowOffsetY}px`,
+    "--uxm-menu-item-padding-x": `${styles.itemPaddingX}px`,
+    "--uxm-menu-item-padding-y": `${styles.itemPaddingY}px`,
+    "--uxm-menu-item-font-size": `${styles.itemFontSize}px`,
+    "--uxm-menu-item-radius": `${styles.itemRadius}px`,
+    "--uxm-menu-item-color": styles.itemColor,
+    "--uxm-menu-item-active-bg": styles.itemActiveBg,
+    "--uxm-menu-item-active-color": styles.itemActiveColor,
+    "--uxm-menu-item-disabled-opacity": styles.itemDisabledOpacity != null ? String(styles.itemDisabledOpacity) : void 0,
+    "--uxm-menu-item-danger-color": styles.itemDangerColor,
+    "--uxm-menu-item-danger-active-bg": styles.itemDangerActiveBg,
+    "--uxm-menu-item-icon-color": styles.itemIconColor,
+    // Current row (a switcher's active entry) — weight + checkmark only; the
+    // colour deliberately comes from `itemColor` / the danger tone.
+    "--uxm-menu-item-current-bg": styles.itemCurrentBg,
+    "--uxm-menu-item-current-font-weight": styles.itemCurrentFontWeight,
+    // Trailing hint (shortcut echo).
+    "--uxm-menu-item-hint-font-size": `${styles.itemHintFontSize}px`,
+    "--uxm-menu-item-hint-color": styles.itemHintColor,
+    // Two-line (headline + subtitle) rows.
+    "--uxm-menu-item-subtitle-font-size": `${styles.itemSubtitleFontSize}px`,
+    "--uxm-menu-item-subtitle-color": styles.itemSubtitleColor,
+    "--uxm-menu-item-subtitle-gap": `${styles.itemSubtitleGap}px`,
+    "--uxm-menu-separator-color": styles.separatorColor
+  };
+}
+const ACTION_ROWS = [
+  { key: "edit", label: "Edit", subtitle: "Rename and change fields", icon: "pencil", hint: "\u2318E" },
+  { key: "duplicate", label: "Duplicate", subtitle: "Create a copy in this folder", icon: "copy", hint: "\u2318D" },
+  { key: "archive", label: "Archive", subtitle: "Move out of the active list", icon: "archive-x", disabled: true }
+];
+const DANGER_ROW = {
+  key: "delete",
+  label: "Delete",
+  subtitle: "Remove permanently",
+  icon: "trash",
+  hint: "\u232B",
+  danger: true
+};
+const WORKSPACE_ROWS = [
+  { key: "default", label: "default", subtitle: "Shared starting point", icon: "product", hint: "\u23181" },
+  { key: "order-processing", label: "order-processing", subtitle: "Fulfilment and returns", icon: "product", hint: "\u23182" },
+  { key: "pilot-2025", label: "pilot-2025", subtitle: "No access", icon: "product", disabled: true },
+  { key: "support-triage", label: "support-triage", subtitle: "Current workspace", icon: "product", hint: "\u23183", current: true }
+];
+const COMMAND_ROW = {
+  key: "new",
+  label: "New workspace",
+  subtitle: "Start from an empty scope",
+  icon: "plus"
+};
+function StaticShowcase({
+  state,
+  withIcons,
+  withSubtitles,
+  withHints
+}) {
+  const isDisabled = state === "disabled";
+  const isCurrent = state === "current";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "uxm-menu__panel",
+      style: {
+        width: 260,
+        // Override the live atom's `position: fixed` / `overflow: hidden` —
+        // the showcase renders inline, not portaled, and without these the
+        // panel collapses to zero size.
+        position: "static",
+        overflow: "visible",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "uxm-menu__list", style: { overflowY: "visible" }, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          disabled: isDisabled || void 0,
+          className: cn(
+            "uxm-menu__item",
+            // The atom's class is `--active` because it covers mouse hover AND
+            // keyboard highlight (they paint identically); the workbench calls
+            // it "Hover" because that's the designers' word. Keep in sync.
+            state === "hover" && "uxm-menu__item--active",
+            isDisabled && "uxm-menu__item--disabled",
+            state === "danger" && "uxm-menu__item--danger",
+            isCurrent && "uxm-menu__item--current"
+          ),
+          children: [
+            withIcons && /* @__PURE__ */ jsx(Icon, { glyph: "user", size: 16, className: "uxm-menu__item-icon" }),
+            withSubtitles ? /* @__PURE__ */ jsxs("span", { className: "uxm-menu__item-text", children: [
+              /* @__PURE__ */ jsxs("span", { className: "uxm-menu__item-label", children: [
+                "Sample row \u2014 ",
+                state
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-subtitle", children: "Supporting line beneath" })
+            ] }) : /* @__PURE__ */ jsxs("span", { className: "uxm-menu__item-label", children: [
+              "Sample row \u2014 ",
+              state
+            ] }),
+            withHints && /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-hint", children: "\u2318E" }),
+            isCurrent && /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14 }) })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function MenuPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const withIcons = (variants.withIcons ?? "yes") === "yes";
+  const withSeparator = (variants.withSeparator ?? "yes") === "yes";
+  const withSubtitles = (variants.withSubtitles ?? "no") === "yes";
+  const withHints = (variants.withHints ?? "no") === "yes";
+  const shape = variants.shape ?? "actions";
+  const cssVars = buildVars(styles);
+  const toItem = (r) => ({
+    key: r.key,
+    label: r.label,
+    icon: withIcons ? r.icon : void 0,
+    subtitle: withSubtitles ? r.subtitle : void 0,
+    hint: withHints ? r.hint : void 0,
+    disabled: r.disabled,
+    danger: r.danger,
+    current: r.current
+  });
+  const separator = withSeparator ? [{ separator: true, key: "sep" }] : [];
+  const liveItems = shape === "switcher" ? [...WORKSPACE_ROWS.map(toItem), ...separator, toItem(COMMAND_ROW)] : [...ACTION_ROWS.map(toItem), ...separator, toItem(DANGER_ROW)];
+  const layoutSignature = JSON.stringify([shape, variants, styles]);
+  useEffect(() => {
+    window.dispatchEvent(new Event("resize"));
+  }, [layoutSignature]);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(
+        StaticShowcase,
+        {
+          state,
+          withIcons,
+          withSubtitles,
+          withHints
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          borderTop: "1px solid var(--color-border)",
+          paddingTop: 16
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+            "Live ",
+            shape === "switcher" ? "switcher" : "action menu"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              items: liveItems,
+              "aria-label": shape === "switcher" ? "Switch workspace" : "Row actions",
+              open: true,
+              onOpenChange: () => {
+              },
+              placement: "bottom-start",
+              panelStyle: cssVars,
+              renderTrigger: ({ triggerProps }) => (
+                // An invisible anchor, not a ⋮ button. With the panel held open the
+                // trigger has nothing left to do for the user — a kebab that opens
+                // nothing is dead UI — but `Popover` measures against it, so it has
+                // to stay in the DOM. Zero height, full width so the panel lands at
+                // the section's left edge.
+                //
+                // Only `ref` is taken from `triggerProps`, not the whole spread:
+                // the click / key handlers are inert here (nothing to toggle) and
+                // `aria-haspopup` / `aria-expanded` / `aria-controls` would describe
+                // a control this element no longer is. Better to not claim them
+                // than to spread them and paper over it with `aria-hidden`.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ref: triggerProps.ref,
+                    "aria-hidden": "true",
+                    style: { display: "block", width: "100%", height: 0 }
+                  }
+                )
+              )
+            },
+            shape
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MenuPreview
+};
+//# sourceMappingURL=menu-preview.js.map