@ai-matrx/alchemy 0.6.2 → 0.8.2

package/dist/react-menu.cjs

@@ -0,0 +1,735 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react-menu.ts
+var react_menu_exports = {};
+__export(react_menu_exports, {
+  ContextMenuPanel: () => ContextMenuPanel
+});
+module.exports = __toCommonJS(react_menu_exports);
+
+// src/react/menu.tsx
+var React4 = __toESM(require("react"), 1);
+var import_design_system2 = require("@ai-matrx/design-system");
+
+// src/menu/layouts.ts
+var INLINE_SECTION_MAX = 3;
+function sectionLabel(section) {
+  return section.label ?? null;
+}
+function isLeaf(node) {
+  return node.kind === "item" || node.kind === "checkbox" || node.kind === "link";
+}
+function fold(section) {
+  return {
+    kind: "submenu",
+    id: `${section.id}:fold`,
+    label: section.label,
+    ...section.icon !== void 0 ? { icon: section.icon } : {},
+    children: section.nodes
+  };
+}
+function rowCount(nodes) {
+  return nodes.filter((n) => n.kind !== "separator" && n.kind !== "label").length;
+}
+function stripOf(model) {
+  const clipboard = model.sections.find((s) => s.group === "clipboard" && !s.primary);
+  return clipboard ? clipboard.nodes.filter(isLeaf) : [];
+}
+function clipboardRest(model) {
+  const clipboard = model.sections.find((s) => s.group === "clipboard" && !s.primary);
+  return clipboard ? clipboard.nodes.filter((n) => !isLeaf(n) && n.kind === "submenu") : [];
+}
+function classic(model) {
+  return { strip: [], sections: model.sections, filterable: false };
+}
+function tiered(model, filterable) {
+  const strip = stripOf(model);
+  const hierarchical = model.sections.some((s) => s.primary);
+  const sections = [];
+  const rest = clipboardRest(model);
+  for (const s of model.sections) {
+    if (s.group === "clipboard" && !s.primary) {
+      if (rest.length) sections.push({ ...s, nodes: rest });
+      continue;
+    }
+    if (s.primary) {
+      sections.push(s);
+      continue;
+    }
+    if (!s.label || s.group === "surface-info" || rowCount(s.nodes) <= INLINE_SECTION_MAX) {
+      if (hierarchical) sections.push(s);
+      else {
+        const { label: _label, ...unlabelled } = s;
+        sections.push(unlabelled);
+      }
+      continue;
+    }
+    sections.push({ id: s.id, group: s.group, nodes: [fold({ ...s, label: s.label })] });
+  }
+  return { strip, sections, filterable };
+}
+function context(model, arrangement) {
+  if (arrangement === "classic") return classic(model);
+  return tiered(model, arrangement === "command");
+}
+function palette(model) {
+  const leaves = [];
+  const walk = (nodes, trail) => {
+    for (const n of nodes) {
+      if (isLeaf(n)) leaves.push({ node: n, breadcrumb: trail });
+      else if (n.kind === "submenu") {
+        if (n.lazy) leaves.push({ node: n, breadcrumb: trail });
+        else walk(n.children, [...trail, n.label]);
+      }
+    }
+  };
+  for (const s of model.sections) walk(s.nodes, s.label ? [s.label] : []);
+  return { leaves };
+}
+function filterPalette(arranged, query) {
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return arranged;
+  return {
+    leaves: arranged.leaves.filter((l) => {
+      const hay = `${l.node.label} ${l.breadcrumb.join(" ")}`.toLowerCase();
+      return words.every((w) => hay.includes(w));
+    })
+  };
+}
+
+// src/react/engine.tsx
+var React2 = __toESM(require("react"), 1);
+
+// src/declare/sensitivity.ts
+var DEFAULT_SENSITIVITY = Object.freeze({
+  exportable: true,
+  classification: "ordinary",
+  includedByDefault: true
+});
+function resolveSensitivity(value) {
+  return {
+    exportable: value.sensitivity?.exportable ?? DEFAULT_SENSITIVITY.exportable,
+    classification: value.sensitivity?.classification ?? DEFAULT_SENSITIVITY.classification,
+    includedByDefault: value.sensitivity?.includedByDefault ?? DEFAULT_SENSITIVITY.includedByDefault
+  };
+}
+
+// src/actions/projection.ts
+function toJson(value) {
+  if (value === void 0 || typeof value === "function" || typeof value === "symbol") return void 0;
+  if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "bigint") return value.toString();
+  if (value instanceof Date) return value.toISOString();
+  if (Array.isArray(value)) return value.map((v) => toJson(v) ?? null);
+  if (typeof value === "object") {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      const j = toJson(v);
+      if (j !== void 0) out[k] = j;
+    }
+    return out;
+  }
+  return void 0;
+}
+function projectValues(raw, declared, pathPrefix = "") {
+  const byName = new Map(declared.map((d) => [d.name, d]));
+  const values = {};
+  const omissions = [];
+  for (const [name, value] of Object.entries(raw)) {
+    const path = pathPrefix ? `${pathPrefix}.${name}` : name;
+    const decl = byName.get(name);
+    if (!decl) {
+      omissions.push({ path, reason: "filtered" });
+      continue;
+    }
+    const sensitivity = resolveSensitivity(decl);
+    if (sensitivity.classification !== "ordinary") {
+      omissions.push({ path, reason: "excluded", classification: sensitivity.classification });
+      continue;
+    }
+    if (!sensitivity.exportable) {
+      omissions.push({ path, reason: "excluded" });
+      continue;
+    }
+    const json = toJson(value);
+    if (json === void 0) continue;
+    values[name] = json;
+  }
+  return { values, omissions };
+}
+function createProjectedReads(source) {
+  return {
+    async values(signal) {
+      if (!source.surface || !source.declaration) return { values: {}, omissions: [] };
+      const raw = await source.surface.readValues(signal);
+      const screenValues = source.declaration.values;
+      return projectValues(raw, screenValues);
+    },
+    async item(signal) {
+      const item = source.item;
+      if (!item || !source.declaration) return null;
+      const type = source.declaration.itemTypes?.find((t) => t.name === item.itemType);
+      if (!type) return { values: {}, omissions: [{ path: item.itemType, reason: "filtered" }] };
+      const raw = await item.readValues(signal);
+      return projectValues(raw, type.values, item.itemType);
+    },
+    async live(signal) {
+      if (!source.surface?.readLive) return {};
+      return source.surface.readLive(signal);
+    }
+  };
+}
+
+// src/actions/run.ts
+async function runAction(action, target, options) {
+  const { ports } = options;
+  if (action.requiresAuth && !target.auth.authenticated) {
+    if (!ports.auth) {
+      ports.diagnostics.capture(new Error(`requiresAuth action "${action.id}" ran signed out with no auth port`), {
+        area: "actions",
+        detail: { actionId: action.id }
+      });
+      return { status: "failed", error: new Error("sign-in unavailable") };
+    }
+    ports.auth.signInThenResume({ actionId: action.id, contentFingerprint: options.contentFingerprint ?? action.id });
+    return { status: "auth-pending" };
+  }
+  const reads = createProjectedReads(options.source ?? { surface: null, declaration: target.declaration, item: null });
+  const signal = options.signal ?? new AbortController().signal;
+  try {
+    const outcome = await action.run(target, { reads, ports, signal });
+    return { status: "ran", outcome };
+  } catch (error) {
+    ports.diagnostics.capture(error, { area: "actions", detail: { actionId: action.id, stage: "run" } });
+    const label = typeof action.label === "string" ? action.label : action.id;
+    ports.notify?.error(`${label} did not finish.`, "Try again; if it keeps failing, report it from the feedback button.");
+    return { status: "failed", error };
+  }
+}
+
+// src/menu/model.ts
+var CATEGORY_GROUP = {
+  clipboard: "clipboard",
+  copy: "transfer",
+  export: "transfer",
+  save: "document",
+  share: "document",
+  edit: "editable",
+  history: "history",
+  ai: "ai",
+  ask: "ai",
+  listen: "tools",
+  study: "tools",
+  app: "tools",
+  feedback: "quick",
+  creator: "admin",
+  admin: "admin",
+  "surface-info": "surface-info"
+};
+var GROUP_ORDER = [
+  "clipboard",
+  "editable",
+  "transfer",
+  "document",
+  "history",
+  "ai",
+  "tools",
+  "quick",
+  "surface",
+  "admin",
+  "surface-info"
+];
+var CATEGORY_ORDER = [
+  "clipboard",
+  "edit",
+  "copy",
+  "export",
+  "save",
+  "share",
+  "history",
+  "ask",
+  "ai",
+  "listen",
+  "study",
+  "app",
+  "feedback",
+  "creator",
+  "admin",
+  "surface-info"
+];
+function translate(i18n, key, fallback) {
+  if (!i18n) return fallback;
+  try {
+    return i18n.t(key, fallback);
+  } catch {
+    return fallback;
+  }
+}
+function actionToNode(resolved, target, options = {}) {
+  const { action, eligibility } = resolved;
+  const rawLabel = typeof action.label === "function" ? action.label(target) : action.label;
+  const label = translate(options.i18n, action.labelKey ?? action.id, rawLabel);
+  const base = {
+    id: action.id,
+    actionId: action.id,
+    ...action.icon !== void 0 ? { icon: action.icon } : {},
+    ...action.placement !== void 0 ? { placement: action.placement } : {}
+  };
+  if (action.expand) {
+    const node = {
+      ...base,
+      kind: "submenu",
+      label,
+      lazy: true,
+      loading: false,
+      children: [],
+      ...action.emptyLabel !== void 0 ? { emptyLabel: action.emptyLabel } : {}
+    };
+    return node;
+  }
+  if (action.href !== void 0) {
+    const href = typeof action.href === "function" ? action.href(target) : action.href;
+    return { ...base, kind: "link", label, href };
+  }
+  if (action.toggle) {
+    return {
+      ...base,
+      kind: "checkbox",
+      label,
+      checked: action.pressed?.(target) ?? false,
+      ...action.description !== void 0 ? { description: action.description } : {}
+    };
+  }
+  const state = action.stateIcon?.(target) ?? null;
+  const pressed = action.pressed?.(target);
+  const hint = action.hint !== void 0 ? translate(options.i18n, action.hintKey ?? `${action.id}.hint`, action.hint) : void 0;
+  return {
+    ...base,
+    kind: "item",
+    label,
+    ...action.iconTone !== void 0 ? { iconTone: action.iconTone } : {},
+    ...state ? { stateIcon: state } : {},
+    ...action.description !== void 0 ? { description: action.description } : {},
+    ...hint !== void 0 ? { hint } : {},
+    ...pressed !== void 0 ? { pressed } : {},
+    ...action.destructive ? { destructive: true } : {},
+    ...action.preserveSelection ? { preserveSelection: true } : {},
+    ...eligibility.status === "unavailable-verb" ? { unavailable: { sentence: eligibility.sentence } } : {}
+  };
+}
+function buildMenuModel(target, resolved, options = {}) {
+  const ordered = resolved.map((r, index) => ({ r, index })).sort((a, b) => {
+    const ca = CATEGORY_ORDER.indexOf(a.r.action.category);
+    const cb = CATEGORY_ORDER.indexOf(b.r.action.category);
+    if (ca !== cb) return ca - cb;
+    const oa = a.r.action.order ?? 0;
+    const ob = b.r.action.order ?? 0;
+    if (oa !== ob) return oa - ob;
+    return a.index - b.index;
+  }).map((x) => x.r);
+  const sections = /* @__PURE__ */ new Map();
+  const roles = {};
+  const explicit = /* @__PURE__ */ new Map();
+  resolved.forEach((r, index) => {
+    const sec = r.action.section;
+    if (!sec) return;
+    const entry = explicit.get(sec.id) ?? { group: CATEGORY_GROUP[r.action.category], rows: [] };
+    entry.rows.push({ r, index });
+    explicit.set(sec.id, entry);
+  });
+  const placed = /* @__PURE__ */ new Set();
+  for (const r of ordered) {
+    const sec = r.action.section;
+    if (sec && placed.has(sec.id)) continue;
+    const group = sec ? explicit.get(sec.id)?.group ?? CATEGORY_GROUP[r.action.category] : CATEGORY_GROUP[r.action.category];
+    const sectionId = sec ? `section:${sec.id}` : group;
+    let section = sections.get(sectionId);
+    if (!section) {
+      section = {
+        id: sectionId,
+        group,
+        nodes: [],
+        ...sec ? { label: translate(options.i18n, sec.labelKey ?? `section.${sec.id}`, sec.label) } : {},
+        ...sec?.icon !== void 0 ? { icon: sec.icon } : {},
+        ...sec?.primary ? { primary: true } : {}
+      };
+      sections.set(sectionId, section);
+    }
+    const rows = sec ? (explicit.get(sec.id)?.rows ?? []).sort((x, y) => (x.r.action.order ?? 0) - (y.r.action.order ?? 0) || x.index - y.index).map((x) => x.r) : [r];
+    if (sec) placed.add(sec.id);
+    for (const row of rows) {
+      section.nodes.push(actionToNode(row, target, options));
+      if (row.action.verb) roles[row.action.verb] = row.action.id;
+    }
+  }
+  const list = [...sections.values()].sort((a, b) => {
+    if (Boolean(a.primary) !== Boolean(b.primary)) return a.primary ? -1 : 1;
+    return GROUP_ORDER.indexOf(a.group) - GROUP_ORDER.indexOf(b.group);
+  });
+  const selected = target.selection?.text?.trim();
+  const content = options.content?.trim();
+  const header = selected ? { label: "Selected", text: target.selection?.text ?? "" } : content ? { label: "Content", text: options.content ?? "" } : null;
+  return { header, sections: list, roles };
+}
+function withExpandedChildren(model, nodeId, children) {
+  const visit = (nodes) => nodes.map((n) => {
+    if (n.kind !== "submenu") return n;
+    if (n.id === nodeId) {
+      return children === "loading" ? { ...n, loading: true } : { ...n, lazy: false, loading: false, children };
+    }
+    return { ...n, children: visit(n.children) };
+  });
+  return { ...model, sections: model.sections.map((s) => ({ ...s, nodes: visit(s.nodes) })) };
+}
+function findNode(nodes, id) {
+  for (const n of nodes) {
+    if (n.id === id) return n;
+    if (n.kind === "submenu") {
+      const hit = findNode(n.children, id);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+// src/react/context.ts
+var React = __toESM(require("react"), 1);
+var KEY = /* @__PURE__ */ Symbol.for("ai-matrx.alchemy.actions-context");
+var AlchemyActionsContext = globalThis[KEY] ??= React.createContext(null);
+function useAlchemyActions() {
+  const value = React.useContext(AlchemyActionsContext);
+  if (!value) throw new Error("Alchemy actions: render inside <AlchemyActionsProvider> (@ai-matrx/alchemy/react/host).");
+  return value;
+}
+
+// src/react/engine.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function useMenuEngine(target, options = {}) {
+  const { registry, ports } = useAlchemyActions();
+  const [resolved, setResolved] = React2.useState([]);
+  const [model, setModel] = React2.useState(null);
+  const [tick, setTick] = React2.useState(0);
+  const expanded = React2.useRef(/* @__PURE__ */ new Map());
+  const active = options.active ?? true;
+  const optionsRef = React2.useRef(options);
+  optionsRef.current = options;
+  React2.useEffect(() => registry.subscribe(() => setTick((t) => t + 1)), [registry]);
+  React2.useEffect(() => {
+    if (!target || !active) return;
+    let live = true;
+    void registry.resolve(target, optionsRef.current.restrict).then((list) => {
+      if (!live) return;
+      expanded.current.clear();
+      setResolved(list);
+      setModel(buildMenuModel(target, list, { ...ports.i18n ? { i18n: ports.i18n } : {}, content: optionsRef.current.content ?? null }));
+    });
+    return () => {
+      live = false;
+    };
+  }, [registry, ports, target, active, tick, options.revision]);
+  React2.useEffect(() => {
+    if (!target) return;
+    const offs = resolved.map((r) => r.action.subscribe?.(() => setTick((t) => t + 1), target)).filter((off) => typeof off === "function");
+    return () => offs.forEach((off) => off());
+  }, [resolved, target]);
+  const findAction = React2.useCallback(
+    (id) => resolved.find((r) => r.action.id === id)?.action ?? expanded.current.get(id),
+    [resolved]
+  );
+  const run = React2.useCallback(
+    async (nodeId) => {
+      if (!target || !model) return null;
+      const node = model.sections.map((s) => findNode(s.nodes, nodeId)).find(Boolean) ?? null;
+      const action = findAction(node && "actionId" in node && node.actionId ? node.actionId : nodeId);
+      if (!action) return null;
+      const o = optionsRef.current;
+      const result = await runAction(action, target, {
+        ports,
+        ...o.source ? { source: o.source } : {},
+        ...o.contentFingerprint ? { contentFingerprint: o.contentFingerprint } : {}
+      });
+      o.onRan?.(nodeId, result);
+      return result;
+    },
+    [target, model, findAction, ports]
+  );
+  const expand = React2.useCallback(
+    async (nodeId) => {
+      const action = findAction(nodeId);
+      if (!target || !action?.expand) return;
+      setModel((m) => m ? withExpandedChildren(m, nodeId, "loading") : m);
+      try {
+        const children = await action.expand(target, new AbortController().signal);
+        const nodes = children.map((child) => {
+          expanded.current.set(child.id, child);
+          return actionToNode({ action: child, eligibility: { status: "available" } }, target, ports.i18n ? { i18n: ports.i18n } : {});
+        });
+        setModel((m) => m ? withExpandedChildren(m, nodeId, nodes) : m);
+      } catch (error) {
+        ports.diagnostics.capture(error, { area: "menu", detail: { nodeId, stage: "expand" } });
+        setModel((m) => m ? withExpandedChildren(m, nodeId, []) : m);
+      }
+    },
+    [findAction, target, ports]
+  );
+  const icon = React2.useCallback(
+    (key, tone) => {
+      if (!key || !ports.icons) return null;
+      const Resolved = ports.icons.resolve(key);
+      return Resolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Resolved, { className: `h-4 w-4 shrink-0 ${tone ?? ""}`, "aria-hidden": true }) : null;
+    },
+    [ports.icons]
+  );
+  return { model, resolved, run, expand, icon };
+}
+
+// src/react/dropdown-nodes.tsx
+var React3 = __toESM(require("react"), 1);
+var import_design_system = require("@ai-matrx/design-system");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function NodeList({ nodes, engine }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuNodeView, { node, engine }, node.id)) });
+}
+function SectionList({
+  sections,
+  engine
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+    index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuSeparator, {}) : null,
+    sectionLabel(section) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground", children: sectionLabel(section) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NodeList, { nodes: section.nodes, engine })
+  ] }, section.id)) });
+}
+function iconOf(node, engine) {
+  if (node.kind === "item" && node.stateIcon) {
+    const glyph = engine.icon(node.stateIcon.icon);
+    return node.stateIcon.spin ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-flex animate-spin", children: glyph }) : glyph;
+  }
+  if (!("icon" in node)) return null;
+  return engine.icon(node.icon, node.kind === "item" ? node.iconTone : void 0);
+}
+function MenuNodeView({ node, engine }) {
+  switch (node.kind) {
+    case "separator":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuSeparator, {});
+    case "label":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground", children: node.label });
+    case "submenu":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        import_design_system.DropdownMenuSub,
+        {
+          onOpenChange: (open) => {
+            if (open && node.lazy && !node.loading) void engine.expand(node.id);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.DropdownMenuSubTrigger, { "data-alchemy-node": node.id, className: "gap-2", children: [
+              iconOf(node, engine),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: node.label })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuSubContent, { className: "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", children: node.loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Loading\u2026" }) : node.children.length === 0 && !node.lazy ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: node.emptyLabel ?? "Nothing here yet" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NodeList, { nodes: node.children, engine }) })
+          ]
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        import_design_system.DropdownMenuCheckboxItem,
+        {
+          "data-alchemy-node": node.id,
+          checked: node.checked,
+          onSelect: () => void engine.run(node.id),
+          className: "gap-2",
+          children: [
+            iconOf(node, engine),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: node.label })
+          ]
+        }
+      );
+    case "link":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.DropdownMenuItem, { asChild: true, "data-alchemy-node": node.id, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: node.href, target: node.target, className: "gap-2", children: [
+        iconOf(node, engine),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: node.label })
+      ] }) });
+    case "item":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafItem, { node, engine });
+  }
+}
+function LeafItem({ node, engine }) {
+  const row = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_design_system.DropdownMenuItem,
+    {
+      "data-alchemy-node": node.id,
+      "aria-disabled": node.unavailable ? true : void 0,
+      "aria-pressed": node.pressed,
+      onSelect: (event) => {
+        if (node.unavailable) {
+          event.preventDefault();
+          return;
+        }
+        void engine.run(node.id);
+      },
+      className: `gap-2 ${node.unavailable ? "opacity-50" : ""} ${node.destructive ? "text-destructive" : ""}`,
+      children: [
+        iconOf(node, engine),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: node.label }),
+          node.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: node.description }) : null
+        ] }),
+        node.hint ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-auto text-xs text-muted-foreground", children: node.hint }) : null
+      ]
+    }
+  );
+  if (!node.unavailable) return row;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.TooltipTrigger, { asChild: true, children: row }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.TooltipContent, { children: node.unavailable.sentence })
+  ] });
+}
+function LeafButton({
+  node,
+  engine,
+  showLabel
+}) {
+  if (node.kind !== "item" && node.kind !== "checkbox" && node.kind !== "link") return null;
+  const unavailable = node.kind === "item" ? node.unavailable : void 0;
+  const pressed = node.kind === "item" ? node.pressed : node.kind === "checkbox" ? node.checked : void 0;
+  const glyph = iconOf(node, engine);
+  const button = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      "data-alchemy-node": node.id,
+      "aria-label": node.label,
+      "aria-disabled": unavailable ? true : void 0,
+      "aria-pressed": pressed,
+      onMouseDown: (e) => {
+        if (node.kind === "item" && node.preserveSelection) e.preventDefault();
+      },
+      onClick: () => {
+        if (unavailable) return;
+        if (node.kind === "link") {
+          window.location.assign(node.href);
+          return;
+        }
+        void engine.run(node.id);
+      },
+      className: `inline-flex h-7 min-w-7 items-center justify-center gap-1.5 rounded-md px-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground ${unavailable ? "cursor-default opacity-50 hover:bg-transparent" : ""} ${pressed ? "text-foreground" : ""}`,
+      children: [
+        glyph,
+        showLabel || !glyph ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: node.label }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system.Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system.TooltipContent, { children: unavailable ? unavailable.sentence : node.label })
+  ] });
+}
+
+// src/react/menu.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ContextMenuPanel({
+  target,
+  point,
+  open,
+  onOpenChange,
+  arrangement = "command",
+  density = "comfortable",
+  ...options
+}) {
+  const engine = useMenuEngine(target, { ...options, onRan: (id, r) => {
+    options.onRan?.(id, r);
+    onOpenChange(false);
+  } });
+  const [query, setQuery] = React4.useState("");
+  const arranged = engine.model ? context(engine.model, arrangement) : null;
+  const filtered = engine.model && query.trim() ? filterPalette(palette(engine.model), query) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.DropdownMenu, { open, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, style: { position: "fixed", left: point.x, top: point.y, width: 0, height: 0 } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_design_system2.DropdownMenuContent,
+      {
+        align: "start",
+        "data-alchemy-layout": `context-${arrangement}`,
+        onPointerUpCapture: (event) => {
+          if (event.button === 2) event.preventDefault();
+        },
+        className: `w-72 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto ${density === "compact" ? "text-xs" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.TooltipProvider, { children: [
+          engine.model?.header ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.DropdownMenuLabel, { className: "truncate text-xs font-normal text-muted-foreground", title: engine.model.header.text, children: [
+            engine.model.header.label,
+            ": ",
+            engine.model.header.text
+          ] }) : null,
+          !arranged ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: "Loading\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            arranged.strip.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "toolbar", "aria-label": "Clipboard", className: "flex items-center gap-0.5 px-1 py-1", children: arranged.strip.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LeafButton, { node, engine, showLabel: false }, node.id)) }) : null,
+            arranged.filterable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                "aria-label": "Filter actions",
+                placeholder: "Type to filter\u2026",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown: (e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter" && filtered?.leaves[0]) void engine.run(filtered.leaves[0].node.id);
+                },
+                className: "h-7 w-full rounded-md border border-border bg-transparent px-2 text-sm outline-none"
+              }
+            ) }) : null,
+            (arranged.strip.length || arranged.filterable) && arranged.sections.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.DropdownMenuSeparator, {}) : null,
+            filtered ? filtered.leaves.length ? filtered.leaves.map(({ node, breadcrumb }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              import_design_system2.DropdownMenuItem,
+              {
+                "data-alchemy-node": node.id,
+                onSelect: () => {
+                  if (node.kind === "submenu") void engine.expand(node.id);
+                  else void engine.run(node.id);
+                },
+                className: "flex-col items-start gap-0",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: node.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-muted-foreground", children: breadcrumb.join(" \u203A ") })
+                ]
+              },
+              node.id
+            )) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: [
+              "No action matches \u201C",
+              query,
+              "\u201D."
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionList, { sections: arranged.sections, engine })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=react-menu.cjs.map