@ai-matrx/context-menu 0.0.0 → 0.1.1

package/dist/builder.js

@@ -0,0 +1,1795 @@
+"use client";
+
+// src/builder/MenuBuilder.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+
+// src/design/catalog.ts
+var o = (id, label, icon, group, extra = {}) => ({ id, label, icon, group, status: "live", ...extra });
+var CATALOG = [
+  // Clipboard — the verb strip
+  o("cm:copy", "Copy", "Copy", "Clipboard", { shortcut: "\u2318C" }),
+  o("cm:cut", "Cut", "Scissors", "Clipboard", { shortcut: "\u2318X" }),
+  o("cm:paste", "Paste", "ClipboardPaste", "Clipboard", { shortcut: "\u2318V" }),
+  o("cm:undo", "Undo", "Undo2", "Clipboard", { shortcut: "\u2318Z" }),
+  o("cm:redo", "Redo", "Redo2", "Clipboard", { shortcut: "\u21E7\u2318Z" }),
+  o("cm:find", "Find & Replace", "Search", "Clipboard", { shortcut: "\u2318F" }),
+  o("cm:select-all", "Select All", "TextSelect", "Clipboard", { shortcut: "\u2318A" }),
+  o("cm:copy-as", "Copy as\u2026", "CopyPlus", "Clipboard"),
+  o("cm:json", "Copy as JSON", "Braces", "Clipboard"),
+  o("copy-html-page", "Copy as HTML page", "FileCode", "Clipboard"),
+  o("cm:insert-reference", "Insert / Copy reference\u2026", "AtSign", "Clipboard"),
+  // Edit
+  o("cm:save", "Save", "Save", "Edit", { shortcut: "\u2318S" }),
+  o("duplicate", "Duplicate", "CopyPlus", "Edit"),
+  o("rename", "Rename", "PenLine", "Edit"),
+  o("edit", "Edit", "Pencil", "Edit"),
+  o("favorite", "Add to favorites", "Star", "Edit"),
+  o("archive", "Archive", "Archive", "Edit", { danger: true }),
+  o("cm:delete", "Delete", "Trash2", "Edit", { danger: true }),
+  // AI
+  o("cm:chat", "Chat about this", "MessageSquare", "AI", { ai: true }),
+  o("cm:quick-actions", "Quick Actions", "Zap", "AI", { ai: true }),
+  o("cm:placement:ai-action", "AI Actions", "Sparkles", "AI", { ai: true }),
+  o("cm:placement:content-block", "Content blocks", "Blocks", "AI", { ai: true }),
+  o("cm:placement:organization-tool", "Org Items", "Building2", "AI", { ai: true }),
+  o("cm:placement:user-tool", "My Items", "User", "AI", { ai: true }),
+  o("cm:placement:quick-action", "Quick actions (placement)", "Zap", "AI", { ai: true }),
+  o("cm:placement:bound-agent", "Agents", "Bot", "AI", { ai: true }),
+  o("send-to-agent", "Send to agent\u2026", "Send", "AI", { ai: true }),
+  o("continue-in-chat", "Continue in chat", "MessagesSquare", "AI", { ai: true }),
+  o("regenerate-response", "Regenerate", "RefreshCw", "AI", { ai: true }),
+  o("code-block-chart", "Make a chart", "ChartColumn", "AI", { ai: true }),
+  o("ai-improve", "Improve writing", "Wand2", "AI", { ai: true, status: "proposed" }),
+  o("ai-summarize", "Summarize", "ListCollapse", "AI", { ai: true, status: "proposed" }),
+  o("ai-explain", "Explain", "Lightbulb", "AI", { ai: true, status: "proposed" }),
+  o("ai-translate", "Translate\u2026", "Languages", "AI", { ai: true, status: "proposed" }),
+  // Save & export
+  o("cm:export", "Export", "FileOutput", "Save & export"),
+  o("cm:convert", "Convert to\u2026", "ArrowRightLeft", "Save & export"),
+  o("save-as-file", "Save as file", "FileDown", "Save & export"),
+  o("download-pdf", "Download PDF", "FileText", "Save & export"),
+  o("download-docx", "Download Word", "FileType", "Save & export"),
+  o("download-html", "Download HTML", "FileCode2", "Save & export"),
+  o("print", "Print", "Printer", "Save & export", { shortcut: "\u2318P" }),
+  // Share & publish
+  o("cm:share", "Share\u2026", "Share2", "Share & publish"),
+  o("share-link", "Copy share link", "Link", "Share & publish"),
+  o("send-google-doc", "Send to Google Docs", "FileUp", "Share & publish"),
+  o("email-to-me", "Email to me", "Mail", "Share & publish"),
+  o("html-preview", "Preview as web page", "Eye", "Share & publish"),
+  o("share-webpage", "Publish as web page", "Globe", "Share & publish"),
+  // Organize
+  o("cm:attach", "Attach to\u2026", "Paperclip", "Organize"),
+  o("set-context-value", "Set as context", "Pin", "Organize"),
+  o("pin-message", "Pin", "Pin", "Organize"),
+  o("notes-and-comments", "Notes & comments", "StickyNote", "Organize"),
+  o("move", "Move to folder\u2026", "FolderInput", "Organize"),
+  o("tags", "Tags\u2026", "Tags", "Organize"),
+  // History & compare
+  o("cm:view-history", "View history", "History", "History & compare"),
+  o("edit-history", "Edit history", "GitCommitVertical", "History & compare"),
+  o("fork-at-message", "Fork from here", "GitBranch", "History & compare"),
+  o("cm:compare", "Compare\u2026", "GitCompareArrows", "History & compare"),
+  o("compare-with-clipboard", "Compare with clipboard", "ClipboardList", "History & compare"),
+  o("set-compare-base", "Set as compare base", "Flag", "History & compare"),
+  // Listen
+  o("cm:speak", "Read aloud", "Volume2", "Listen"),
+  o("cm:listen", "Dictate", "Mic", "Listen"),
+  o("tts-voice-settings", "Voice settings", "AudioLines", "Listen"),
+  // Page rows: notes
+  o("notes:close-tab", "Close tab", "X", "Page: notes"),
+  o("notes:close-others", "Close other tabs", "PanelTopClose", "Page: notes"),
+  o("notes:export-md", "Export as Markdown", "FileDown", "Page: notes"),
+  o("notes:share-clipboard", "Copy to clipboard", "ClipboardCopy", "Page: notes"),
+  o("notes:convert-artifacts", "Convert to artifacts", "Shapes", "Page: notes"),
+  o("notes:trash", "Move to Trash", "Trash2", "Page: notes", { danger: true }),
+  // Page rows: a record (quiz row, table row)
+  o("row:open", "Open", "SquareArrowOutUpRight", "Page: record"),
+  o("row:open-tab", "Open in new tab", "ExternalLink", "Page: record"),
+  o("row:take", "Take", "Play", "Page: record"),
+  o("row:results", "Results", "ChartBar", "Page: record"),
+  o("row:manage", "Manage", "Settings2", "Page: record"),
+  o("row:restore", "Restore", "ArchiveRestore", "Page: record"),
+  // Page rows: chat message
+  o("regenerate-latest", "Regenerate latest", "RotateCcw", "Page: chat message", { ai: true }),
+  o("fork-and-regenerate", "Fork and regenerate", "GitFork", "Page: chat message", { ai: true }),
+  o("feedback-up", "Good response", "ThumbsUp", "Page: chat message"),
+  o("feedback-down", "Bad response", "ThumbsDown", "Page: chat message"),
+  // Tools & admin
+  o("cm:x:surface", "This page (location, context, agents)", "MapPin", "Tools & admin"),
+  o("cm:admin", "Admin tools", "Shield", "Tools & admin"),
+  o("feedback", "Send feedback", "MessageSquareWarning", "Tools & admin"),
+  o("keyboard-shortcuts", "Keyboard shortcuts", "Keyboard", "Tools & admin", { status: "proposed" })
+];
+var CATALOG_GROUPS = [...new Set(CATALOG.map((c) => c.group))];
+function catalogOption(id) {
+  return CATALOG.find((c) => c.id === id);
+}
+var seq = 0;
+var tid = (p) => `${p}_t${Date.now().toString(36)}${(seq++).toString(36)}`;
+function itemFrom(id) {
+  const c = catalogOption(id);
+  return {
+    id: tid("i"),
+    kind: "item",
+    catalogId: id,
+    label: c?.label ?? id,
+    icon: c?.icon ?? "Circle",
+    ...c?.shortcut ? { shortcut: c.shortcut } : {},
+    ...c?.danger ? { danger: true } : {},
+    ...c?.ai ? { ai: true } : {}
+  };
+}
+var strip = (label, ids) => ({
+  id: tid("s"),
+  kind: "section",
+  label,
+  layout: "row",
+  children: ids.map(itemFrom)
+});
+var sub = (label, icon, ids) => ({
+  id: tid("m"),
+  kind: "submenu",
+  label,
+  icon,
+  children: ids.map(itemFrom)
+});
+var TEMPLATES = [
+  { id: "strip-thing", label: "Icon strip \u2014 a thing", icon: "Rows2", build: () => strip("", ["cm:copy", "cm:share", "duplicate", "favorite", "save-as-file", "archive"]) },
+  { id: "strip-edit", label: "Icon strip \u2014 editable text", icon: "Rows2", build: () => strip("", ["cm:cut", "cm:copy", "cm:paste", "cm:undo", "cm:redo", "cm:find"]) },
+  { id: "strip-read", label: "Icon strip \u2014 read-only text", icon: "Rows2", build: () => strip("", ["cm:copy", "cm:speak", "cm:find", "cm:share"]) },
+  { id: "sub-intelligence", label: "Intelligence \u25B8", icon: "Sparkles", build: () => sub("Intelligence", "Sparkles", ["cm:chat", "cm:placement:ai-action", "cm:placement:bound-agent", "send-to-agent"]) },
+  { id: "sub-save-share", label: "Save & share \u25B8", icon: "Share2", build: () => sub("Save & share", "Share2", ["cm:copy-as", "save-as-file", "cm:convert", "share-webpage", "cm:share"]) },
+  { id: "sub-organize", label: "Organize \u25B8", icon: "Tags", build: () => sub("Organize", "Tags", ["cm:attach", "pin-message", "cm:view-history", "cm:compare"]) },
+  { id: "sub-tools", label: "Tools \u25B8", icon: "Wrench", build: () => sub("Tools", "Wrench", ["cm:speak", "cm:quick-actions", "feedback", "cm:x:surface", "cm:admin"]) }
+];
+var SLOT_SOURCES = [
+  { id: "any", label: "Everything not placed", phrase: "Everything else", icon: "Ellipsis" },
+  { id: "agents", label: "Agents & shortcuts (library)", phrase: "All other agents", icon: "Bot", runtime: true },
+  { id: "page-rows", label: "This page's own rows", phrase: "All of this page's actions", icon: "PanelTop", runtime: true },
+  ...CATALOG_GROUPS.map((g) => ({
+    id: `group:${g}`,
+    label: g,
+    phrase: g === "AI" ? "All other AI items" : `All other ${g.toLowerCase()} options`,
+    icon: CATALOG.find((c) => c.group === g)?.icon ?? "Circle"
+  }))
+];
+function slotSource(id) {
+  return SLOT_SOURCES.find((s) => s.id === id);
+}
+function slotOptions(fills, placed) {
+  if (fills === "agents" || fills === "page-rows") return [];
+  const pool = fills === "any" ? CATALOG : CATALOG.filter((c) => `group:${c.group}` === fills);
+  return pool.filter((c) => !placed.has(c.id));
+}
+
+// src/design/MenuPreview.tsx
+import { useMemo, useState } from "react";
+
+// src/design/model.ts
+var MENU_SURFACES = [
+  "text-selection",
+  "editable-field",
+  "table-row",
+  "page",
+  "chat-message",
+  "file",
+  "anywhere"
+];
+var DEFAULT_LOOK = {
+  density: "comfortable",
+  width: 280,
+  showIcons: true,
+  showShortcuts: true,
+  showHints: false,
+  search: false
+};
+var DESIGN_FORMAT = 1;
+function newId(prefix = "n") {
+  const rnd = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID().slice(0, 8) : Math.random().toString(36).slice(2, 10);
+  return `${prefix}_${rnd}`;
+}
+function emptyDesign(name = "Untitled menu") {
+  return { designId: newId("d"), name, surface: "anywhere", look: { ...DEFAULT_LOOK }, nodes: [], notes: "" };
+}
+function isContainer(node) {
+  return node.kind === "section" || node.kind === "submenu";
+}
+function placedCatalogIds(nodes, out = /* @__PURE__ */ new Set()) {
+  for (const n of nodes) {
+    if (n.catalogId) out.add(n.catalogId);
+    if (isContainer(n)) placedCatalogIds(n.children, out);
+  }
+  return out;
+}
+function catalogUseCounts(nodes, out = /* @__PURE__ */ new Map()) {
+  for (const n of nodes) {
+    if (n.catalogId) out.set(n.catalogId, (out.get(n.catalogId) ?? 0) + 1);
+    if (isContainer(n)) catalogUseCounts(n.children, out);
+  }
+  return out;
+}
+function cloneNode(node) {
+  const copy = { ...node, id: newId(node.kind[0]) };
+  if (isContainer(copy)) copy.children = copy.children.map(cloneNode);
+  return copy;
+}
+function locate(nodes, id, parentId = null, depth = 0) {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.id === id) return { node, parentId, index: i, depth };
+    if (isContainer(node)) {
+      const inner = locate(node.children, id, node.id, depth + 1);
+      if (inner) return inner;
+    }
+  }
+  return null;
+}
+function contains(node, id) {
+  if (node.id === id) return true;
+  return isContainer(node) && node.children.some((c) => contains(c, id));
+}
+function countItems(nodes) {
+  let n = 0;
+  for (const node of nodes) {
+    if (node.kind === "item" || node.kind === "slot") n += 1;
+    else if (isContainer(node)) n += countItems(node.children) + (node.kind === "submenu" ? 1 : 0);
+  }
+  return n;
+}
+function mapChildren(nodes, parentId, fn) {
+  if (parentId === null) return fn([...nodes]);
+  return nodes.map((node) => {
+    if (!isContainer(node)) return node;
+    if (node.id === parentId) return { ...node, children: fn([...node.children]) };
+    return { ...node, children: mapChildren(node.children, parentId, fn) };
+  });
+}
+function insertNode(nodes, parentId, index, node) {
+  return mapChildren(nodes, parentId, (list) => {
+    list.splice(Math.max(0, Math.min(index, list.length)), 0, node);
+    return list;
+  });
+}
+function removeNode(nodes, id) {
+  return nodes.filter((n) => n.id !== id).map((n) => isContainer(n) ? { ...n, children: removeNode(n.children, id) } : n);
+}
+function updateNode(nodes, id, patch) {
+  return nodes.map((n) => {
+    if (n.id === id) return { ...n, ...patch, id: n.id, kind: n.kind };
+    if (isContainer(n)) return { ...n, children: updateNode(n.children, id, patch) };
+    return n;
+  });
+}
+function canMove(nodes, id, parentId) {
+  const from = locate(nodes, id);
+  return Boolean(from) && (parentId === null || !contains(from.node, parentId));
+}
+function moveNode(nodes, id, parentId, index) {
+  const from = locate(nodes, id);
+  if (!from) return nodes;
+  if (parentId !== null && contains(from.node, parentId)) return nodes;
+  let target = index;
+  if (from.parentId === parentId && from.index < index) target -= 1;
+  return insertNode(removeNode(nodes, id), parentId, target, from.node);
+}
+function duplicateNode(nodes, id) {
+  const at = locate(nodes, id);
+  if (!at) return [...nodes];
+  return insertNode(nodes, at.parentId, at.index + 1, cloneNode(at.node));
+}
+function wrapNode(nodes, id, kind) {
+  const at = locate(nodes, id);
+  if (!at) return [...nodes];
+  const wrapper = kind === "section" ? { id: newId("s"), kind: "section", label: "New section", children: [at.node] } : { id: newId("m"), kind: "submenu", label: "More", icon: "ChevronRight", children: [at.node] };
+  return insertNode(removeNode(nodes, id), at.parentId, at.index, wrapper);
+}
+function unwrapNode(nodes, id) {
+  const at = locate(nodes, id);
+  if (!at || !isContainer(at.node)) return [...nodes];
+  let out = removeNode(nodes, id);
+  at.node.children.forEach((child, i) => {
+    out = insertNode(out, at.parentId, at.index + i, child);
+  });
+  return out;
+}
+function parseDesign(raw) {
+  let value = raw;
+  if (typeof raw === "string") {
+    try {
+      value = JSON.parse(raw);
+    } catch {
+      return emptyDesign("Unreadable design");
+    }
+  }
+  const v = value ?? {};
+  const d = v.design ?? v;
+  return {
+    designId: typeof d.designId === "string" ? d.designId : newId("d"),
+    name: typeof d.name === "string" ? d.name : "Untitled menu",
+    surface: MENU_SURFACES.includes(d.surface) ? d.surface : "anywhere",
+    look: { ...DEFAULT_LOOK, ...d.look ?? {} },
+    nodes: Array.isArray(d.nodes) ? d.nodes : [],
+    notes: typeof d.notes === "string" ? d.notes : ""
+  };
+}
+function serializeDesign(design2) {
+  return JSON.stringify({ format: DESIGN_FORMAT, design: design2 });
+}
+
+// src/design/MenuPreview.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function matches(node, q) {
+  if (!q) return true;
+  if (node.kind === "divider") return false;
+  if (node.kind === "item" || node.kind === "slot") return node.label.toLowerCase().includes(q);
+  return node.label.toLowerCase().includes(q) || node.children.some((c) => matches(c, q));
+}
+function flatten(nodes, q, out = []) {
+  for (const n of nodes) {
+    if (n.kind === "item" && matches(n, q)) out.push(n);
+    else if (isContainer(n)) flatten(n.children, q, out);
+  }
+  return out;
+}
+function MenuPreview({ design: design2, renderIcon, highlightId, onSelectNode, onPick, className, style }) {
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const { look } = design2;
+  const results = useMemo(() => q ? flatten(design2.nodes, q) : null, [design2.nodes, q]);
+  const placed = useMemo(() => placedCatalogIds(design2.nodes), [design2.nodes]);
+  const ctx = { design: design2, renderIcon, highlightId, onSelectNode, onPick, placed };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "menu",
+      "data-density": look.density,
+      className: `cm-menu ${className ?? ""}`,
+      style: { width: look.width, ...style },
+      children: [
+        look.search && /* @__PURE__ */ jsxs("div", { className: "cm-search", children: [
+          renderIcon("Search", "cm-icon"),
+          /* @__PURE__ */ jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Type to filter\u2026", "aria-label": "Filter menu" })
+        ] }),
+        results ? results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "No matches" }) : results.map((n) => /* @__PURE__ */ jsx(Item, { node: n, ctx }, n.id)) : design2.nodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "Empty menu \u2014 drag options in" }) : /* @__PURE__ */ jsx(Nodes, { nodes: design2.nodes, ctx })
+      ]
+    }
+  );
+}
+function Nodes({ nodes, ctx }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((n) => {
+    if (n.kind === "divider") return /* @__PURE__ */ jsx("div", { role: "separator", className: "cm-divider" }, n.id);
+    if (n.kind === "item") return /* @__PURE__ */ jsx(Item, { node: n, ctx }, n.id);
+    if (n.kind === "submenu") return /* @__PURE__ */ jsx(Submenu, { node: n, ctx }, n.id);
+    if (n.kind === "slot") return /* @__PURE__ */ jsx(Slot, { node: n, ctx }, n.id);
+    return /* @__PURE__ */ jsx(Section, { node: n, ctx }, n.id);
+  }) });
+}
+function Section({ node, ctx }) {
+  const [open, setOpen] = useState(!node.collapsible);
+  const layout = node.layout ?? "list";
+  return /* @__PURE__ */ jsxs("div", { className: `cm-section ${ctx.highlightId === node.id ? "cm-hl" : ""}`, "data-layout": layout, children: [
+    node.label && // ui-exception: a menu row of the menu component itself
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "cm-section-label",
+        onClick: () => {
+          ctx.onSelectNode?.(node.id);
+          if (node.collapsible) setOpen((o2) => !o2);
+        },
+        children: [
+          node.label,
+          node.collapsible && /* @__PURE__ */ jsx("span", { className: "cm-caret", children: open ? "\u25BE" : "\u25B8" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "cm-section-body", children: layout === "list" ? /* @__PURE__ */ jsx(Nodes, { nodes: node.children, ctx }) : node.children.map(
+      (c) => c.kind === "item" ? /* @__PURE__ */ jsx(Tile, { node: c, ctx }, c.id) : /* @__PURE__ */ jsx(Nodes, { nodes: [c], ctx }, c.id)
+    ) })
+  ] });
+}
+function Tile({ node, ctx }) {
+  return (
+    // ui-exception: a menu row of the menu component itself
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        title: node.label + (node.shortcut ? `  ${node.shortcut}` : ""),
+        disabled: node.disabled,
+        className: `cm-tile ${node.danger ? "cm-danger" : ""} ${node.ai ? "cm-ai" : ""} ${ctx.highlightId === node.id ? "cm-hl" : ""}`,
+        onClick: () => {
+          ctx.onSelectNode?.(node.id);
+          ctx.onPick?.(node);
+        },
+        children: ctx.renderIcon(node.icon ?? "Circle", "cm-icon")
+      }
+    )
+  );
+}
+function Item({ node, ctx }) {
+  const { look } = ctx.design;
+  const [checked, setChecked] = useState(false);
+  return (
+    // ui-exception: a menu row of the menu component itself
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: node.toggle ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": node.toggle ? checked : void 0,
+        disabled: node.disabled,
+        className: `cm-item ${node.danger ? "cm-danger" : ""} ${node.ai ? "cm-ai" : ""} ${ctx.highlightId === node.id ? "cm-hl" : ""}`,
+        onClick: () => {
+          ctx.onSelectNode?.(node.id);
+          if (node.toggle) setChecked((c) => !c);
+          ctx.onPick?.(node);
+        },
+        children: [
+          look.showIcons && /* @__PURE__ */ jsx("span", { className: "cm-icon-slot", children: node.toggle ? checked ? ctx.renderIcon("Check", "cm-icon") : null : node.icon ? ctx.renderIcon(node.icon, "cm-icon") : null }),
+          /* @__PURE__ */ jsxs("span", { className: "cm-text", children: [
+            /* @__PURE__ */ jsx("span", { className: "cm-label", children: node.label }),
+            look.showHints && node.hint && /* @__PURE__ */ jsx("span", { className: "cm-hint", children: node.hint })
+          ] }),
+          look.showShortcuts && node.shortcut && /* @__PURE__ */ jsx("kbd", { className: "cm-shortcut", children: node.shortcut })
+        ]
+      }
+    )
+  );
+}
+function Submenu({ node, ctx }) {
+  const { look } = ctx.design;
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState("right");
+  const show = (el) => {
+    setSide(flyoutSide(el, look.width));
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cm-sub", onMouseEnter: (e) => show(e.currentTarget), onMouseLeave: () => setOpen(false), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        className: `cm-item ${ctx.highlightId === node.id ? "cm-hl" : ""}`,
+        onClick: () => {
+          ctx.onSelectNode?.(node.id);
+          setOpen(true);
+        },
+        children: [
+          look.showIcons && /* @__PURE__ */ jsx("span", { className: "cm-icon-slot", children: node.icon ? ctx.renderIcon(node.icon, "cm-icon") : null }),
+          /* @__PURE__ */ jsxs("span", { className: "cm-text", children: [
+            /* @__PURE__ */ jsx("span", { className: "cm-label", children: node.label }),
+            look.showHints && node.hint && /* @__PURE__ */ jsx("span", { className: "cm-hint", children: node.hint })
+          ] }),
+          ctx.renderIcon("ChevronRight", "cm-icon cm-chev")
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { role: "menu", className: "cm-menu cm-flyout", "data-side": side, "data-density": look.density, style: { width: look.width }, children: node.children.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "Empty submenu" }) : /* @__PURE__ */ jsx(Nodes, { nodes: node.children, ctx }) })
+  ] });
+}
+function flyoutSide(row, width) {
+  const r = row.getBoundingClientRect();
+  const bounds = row.closest("[data-menu-bounds]")?.getBoundingClientRect() ?? { left: 0, right: window.innerWidth };
+  if (r.right + width + 8 <= bounds.right) return "right";
+  if (r.left - width - 8 >= bounds.left) return "left";
+  return "below";
+}
+function Slot({ node, ctx }) {
+  const { look } = ctx.design;
+  const source = slotSource(node.fills);
+  const options = slotOptions(node.fills, ctx.placed);
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState("right");
+  const count = source?.runtime ? "live" : String(options.length);
+  const row = (
+    // ui-exception: a menu row of the menu component itself
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": node.shape === "submenu" ? "menu" : void 0,
+        title: source ? `Placeholder: ${source.label}` : "Placeholder",
+        className: `cm-item cm-slot ${ctx.highlightId === node.id ? "cm-hl" : ""}`,
+        onClick: () => {
+          ctx.onSelectNode?.(node.id);
+          if (node.shape === "submenu") setOpen(true);
+        },
+        children: [
+          look.showIcons && /* @__PURE__ */ jsx("span", { className: "cm-icon-slot", children: ctx.renderIcon(node.icon ?? source?.icon ?? "Ellipsis", "cm-icon") }),
+          /* @__PURE__ */ jsx("span", { className: "cm-text", children: /* @__PURE__ */ jsx("span", { className: "cm-label", children: node.label }) }),
+          /* @__PURE__ */ jsx("span", { className: "cm-count", children: count }),
+          node.shape === "submenu" && ctx.renderIcon("ChevronRight", "cm-icon cm-chev")
+        ]
+      }
+    )
+  );
+  if (node.shape === "items") return row;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cm-sub",
+      onMouseEnter: (e) => {
+        setSide(flyoutSide(e.currentTarget, look.width));
+        setOpen(true);
+      },
+      onMouseLeave: () => setOpen(false),
+      children: [
+        row,
+        open && /* @__PURE__ */ jsx("div", { role: "menu", className: "cm-menu cm-flyout", "data-side": side, "data-density": look.density, style: { width: look.width }, children: source?.runtime ? /* @__PURE__ */ jsxs("div", { className: "cm-runtime", children: [
+          "Filled at runtime: ",
+          source.label
+        ] }) : options.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "Nothing left \u2014 every option of this kind is placed" }) : options.map((o2) => /* @__PURE__ */ jsx(Item, { node: { id: `slot-${node.id}-${o2.id}`, kind: "item", label: o2.label, icon: o2.icon, catalogId: o2.id, ...o2.shortcut ? { shortcut: o2.shortcut } : {}, ...o2.ai ? { ai: true } : {}, ...o2.danger ? { danger: true } : {} }, ctx }, o2.id)) })
+      ]
+    }
+  );
+}
+
+// src/design/starters.ts
+function maker(slug) {
+  let n = 0;
+  const nid = () => `${slug}-${++n}`;
+  const clean = (o2) => JSON.parse(JSON.stringify(o2));
+  const item = (catalogId, extra = {}) => {
+    const c = catalogOption(catalogId);
+    if (!c) throw new Error(`starters: no catalog row ${catalogId}`);
+    return clean({
+      id: nid(),
+      kind: "item",
+      catalogId,
+      label: c.label,
+      icon: c.icon,
+      ...c.shortcut ? { shortcut: c.shortcut } : {},
+      ...c.danger ? { danger: true } : {},
+      ...c.ai ? { ai: true } : {},
+      ...extra
+    });
+  };
+  const own = (label, icon, extra = {}) => clean({ id: nid(), kind: "item", label, icon, ...extra });
+  const section = (label, children, layout = "list") => ({
+    id: nid(),
+    kind: "section",
+    label,
+    layout,
+    children
+  });
+  const strip2 = (children) => section("", children, "row");
+  const sub2 = (label, icon, children, extra = {}) => clean({ id: nid(), kind: "submenu", label, icon, ...extra, children });
+  const divider = () => ({ id: nid(), kind: "divider" });
+  return { item, own, section, strip: strip2, sub: sub2, divider };
+}
+function design(slug, name, surface, notes, nodes, look = {}) {
+  return { designId: `starter-${slug}`, name, surface, look: { ...DEFAULT_LOOK, ...look }, nodes, notes };
+}
+var RUNTIME = "Filled from the agent library at runtime.";
+function aiPlacements(m) {
+  return [
+    m.item("cm:placement:ai-action", {
+      note: `${RUNTIME} Live: a submenu of AI actions (agent shortcuts) that fit the selection.`
+    }),
+    m.item("cm:placement:content-block", { note: "Filled at runtime with the content blocks that can be inserted here." }),
+    m.item("cm:placement:user-tool", { note: "Filled at runtime with this person's own shortcuts." }),
+    m.item("cm:placement:organization-tool", { note: "Filled at runtime with the organization's shared shortcuts." }),
+    m.item("cm:placement:bound-agent", { note: "Filled at runtime with the agents bound to this page." })
+  ];
+}
+function intelligence(m) {
+  return m.sub("Intelligence", "Sparkles", [
+    m.item("cm:chat"),
+    m.item("cm:placement:ai-action", { note: RUNTIME }),
+    m.item("cm:placement:bound-agent", { note: RUNTIME }),
+    m.item("cm:placement:user-tool", { note: RUNTIME }),
+    m.item("cm:placement:organization-tool", { note: RUNTIME }),
+    m.item("cm:placement:content-block", { note: RUNTIME })
+  ], { note: "Every AI entry in one row, on every menu." });
+}
+function saveShare(m) {
+  return m.sub("Save & share", "Share2", [
+    m.item("cm:copy-as", { note: "Copy block: every form the content can land on the clipboard in." }),
+    m.divider(),
+    m.item("cm:export", { label: "Download", icon: "Download", note: "Download block: PDF, Word, HTML, Markdown, print." }),
+    m.divider(),
+    m.item("cm:convert", { label: "Convert to\u2026", note: "Convert block: becomes a new thing in the app (note, task, document\u2026)." }),
+    m.divider(),
+    m.item("share-webpage", { label: "Publish", icon: "Globe", note: "Publish block: public web page." }),
+    m.divider(),
+    m.item("cm:share", { label: "Share", note: "Share block: people and places. Copy link folds into this dialog." })
+  ]);
+}
+function organize(m) {
+  return m.sub("Organize", "FolderTree", [
+    m.item("cm:attach"),
+    m.item("pin-message", { label: "Pin" }),
+    m.item("cm:view-history", { label: "History" }),
+    m.item("cm:compare", { label: "Compare" })
+  ]);
+}
+function tools(m) {
+  return m.sub("Tools", "Wrench", [
+    m.item("cm:speak", { label: "Read aloud" }),
+    m.item("cm:quick-actions"),
+    m.item("feedback", { label: "Feedback" }),
+    m.item("cm:x:surface", { label: "This page" }),
+    m.item("cm:admin", { label: "Admin", note: "Admins only." })
+  ]);
+}
+var TIER_STRIP = (m) => m.strip([m.item("cm:copy"), m.item("cm:cut"), m.item("cm:paste"), m.item("cm:undo"), m.item("cm:redo"), m.item("cm:find")]);
+function liveEditableField() {
+  const m = maker("live-editable-field");
+  return design(
+    "live-editable-field",
+    "Editable text field (selection in a textarea)",
+    "editable-field",
+    "Live today: the right-click menu on an editable field. Source: engine/ContextMenuV3, command layout (platform default since 2026-08-22).",
+    [
+      TIER_STRIP(m),
+      m.item("cm:select-all"),
+      m.divider(),
+      m.item("cm:chat"),
+      ...aiPlacements(m),
+      m.item("cm:quick-actions", { note: "A submenu of quick tools." }),
+      m.divider(),
+      m.item("cm:listen"),
+      m.item("cm:speak"),
+      m.item("cm:copy-as"),
+      m.item("cm:insert-reference"),
+      m.divider(),
+      m.sub("History", "History", [m.item("cm:undo"), m.item("cm:redo"), m.item("cm:view-history"), m.item("cm:compare")], {
+        note: "In the tiered and command layouts History groups these four."
+      }),
+      m.item("cm:export"),
+      m.item("cm:convert"),
+      m.item("cm:share"),
+      m.item("cm:attach"),
+      m.divider(),
+      m.item("cm:x:surface"),
+      m.item("cm:admin", { note: "Admins only." })
+    ],
+    { search: true }
+  );
+}
+function liveReadOnlyMessage() {
+  const m = maker("live-chat-message");
+  return design(
+    "live-chat-message",
+    "Read-only text / chat message",
+    "chat-message",
+    "Live today: right-click on read-only text and on a chat message. Source: engine/NonEditableContextMenu plus the chat message rows.",
+    [
+      m.strip([m.item("cm:copy"), m.item("cm:find"), m.item("cm:speak", { label: "Read aloud" })]),
+      m.item("cm:select-all"),
+      m.divider(),
+      m.section("Message", [
+        m.item("regenerate-response", { note: "Assistant messages only." }),
+        m.item("fork-at-message"),
+        m.item("continue-in-chat"),
+        m.item("pin-message"),
+        m.item("feedback-up"),
+        m.item("feedback-down")
+      ]),
+      m.divider(),
+      m.item("cm:chat"),
+      ...aiPlacements(m),
+      m.item("cm:quick-actions"),
+      m.divider(),
+      m.item("cm:copy-as"),
+      m.item("cm:json"),
+      m.item("cm:export"),
+      m.item("cm:convert"),
+      m.item("cm:share"),
+      m.item("cm:attach"),
+      m.divider(),
+      m.item("cm:x:surface"),
+      m.item("cm:admin", { note: "Admins only." })
+    ]
+  );
+}
+function liveNotesEditor() {
+  const m = maker("live-notes-editor");
+  return design(
+    "live-notes-editor",
+    "Notes editor",
+    "editable-field",
+    "Live today: right-click in a note. Source: features/notes/agent-context/notesEditorExtraSections (the Note section) on top of the standard editable menu.",
+    [
+      TIER_STRIP(m),
+      m.item("cm:select-all"),
+      m.divider(),
+      m.item("cm:chat"),
+      ...aiPlacements(m),
+      m.item("cm:quick-actions"),
+      m.divider(),
+      m.section("Note", [
+        m.item("cm:save", { hint: "Greyed when the note has no unsaved changes." }),
+        m.item("duplicate"),
+        m.item("notes:export-md"),
+        m.item("share-link", { label: "Share link\u2026" }),
+        m.item("notes:share-clipboard"),
+        m.item("notes:convert-artifacts", { label: "Convert blocks to artifacts", note: "Only on notes that can be saved." }),
+        m.sub("Move to folder\u2026", "FolderInput", [
+          m.own("Inbox", "FolderClosed", { note: "One row per folder the person has; the current folder is greyed." }),
+          m.own("Projects", "FolderClosed"),
+          m.divider(),
+          m.own("New folder\u2026", "FolderPlus"),
+          m.own("Choose folder\u2026", "FolderInput")
+        ]),
+        m.sub("Tabs", "X", [
+          m.item("notes:close-tab", { label: "Close Tab" }),
+          m.own("Close Other Tabs", "X", { note: "Greyed with one tab open." }),
+          m.own("Close All Tabs", "X")
+        ]),
+        m.divider(),
+        m.item("notes:trash", { note: "Always last, red." })
+      ]),
+      m.divider(),
+      m.item("cm:copy-as"),
+      m.item("cm:export"),
+      m.item("cm:convert"),
+      m.item("cm:share"),
+      m.item("cm:attach"),
+      m.item("cm:x:surface"),
+      m.item("cm:admin", { note: "Admins only." })
+    ],
+    { search: true }
+  );
+}
+function liveQuizRow() {
+  const m = maker("live-quiz-row");
+  return design(
+    "live-quiz-row",
+    "Quiz row",
+    "table-row",
+    "Live today: a quiz / practice-test row. Source: features/education/assessment/components/home/useAssessmentRowActions.",
+    [
+      m.section("", [m.item("row:open"), m.item("row:open-tab")]),
+      m.section("Quiz", [
+        m.item("row:take", { note: "Greyed when archived or the quiz has no questions." }),
+        m.item("edit", { label: "Edit questions", note: "Only where the person may edit." }),
+        m.item("row:results", { note: "Only once the person has a result." })
+      ]),
+      m.section("Manage", [
+        m.item("archive", { note: "Shows Restore (ArchiveRestore) instead when the quiz is archived. Only for editors." })
+      ])
+    ]
+  );
+}
+function liveTableRow() {
+  const m = maker("live-table-row");
+  return design(
+    "live-table-row",
+    "Data table row (/data)",
+    "table-row",
+    "Live today: a row on the Data home. Source: /demos/context-menu-designs TableRowsPanel, the 'today' side.",
+    [
+      m.section("", [m.item("row:open"), m.item("row:open-tab")]),
+      m.section("", [m.item("favorite")])
+    ]
+  );
+}
+function regroupDesign() {
+  const m = maker("proposal-grouped");
+  return design(
+    "proposal-grouped",
+    "Grouped by what you get (13 groups)",
+    "text-selection",
+    "Proposal: /demos/context-menu-regroup, PROPOSED_MENU_GROUPING v2. Strip and universal verbs stay on top; everything else is filed under 13 outcome submenus.",
+    [
+      TIER_STRIP(m),
+      m.item("cm:select-all"),
+      m.item("cm:quick-actions"),
+      m.item("cm:save", { note: "An editor's own Save / Delete stay one click away." }),
+      m.item("cm:delete"),
+      m.divider(),
+      m.sub("Edit", "Pencil", [
+        m.item("edit"),
+        m.own("Replace selection", "Replace"),
+        m.own("Insert below", "ArrowDownToLine"),
+        m.item("rename")
+      ], { hint: "Change this item where it is." }),
+      m.sub("Copy", "Copy", [
+        m.item("cm:copy-as"),
+        m.item("cm:json"),
+        m.item("copy-html-page"),
+        m.item("cm:insert-reference")
+      ], { hint: "Lands on your clipboard." }),
+      m.sub("Download", "Download", [
+        m.item("cm:export"),
+        m.item("save-as-file"),
+        m.item("download-pdf"),
+        m.item("download-docx"),
+        m.item("download-html"),
+        m.item("print")
+      ], { hint: "Becomes a file outside the app." }),
+      m.sub("Convert to", "ArrowRightLeft", [
+        m.item("cm:convert", { label: "Convert to\u2026" }),
+        m.own("Note", "StickyNote"),
+        m.own("Document", "FileText"),
+        m.own("Task", "SquareCheck"),
+        m.own("Flashcards", "Layers"),
+        m.own("Quiz", "CircleHelp")
+      ], { hint: "Becomes a new thing inside the app." }),
+      m.sub("Publish", "Globe", [m.item("html-preview"), m.item("share-webpage")], { hint: "Goes out to the world." }),
+      m.sub("Share", "Share2", [m.item("cm:share"), m.item("send-google-doc"), m.item("email-to-me")], {
+        hint: "Goes to specific people or places."
+      }),
+      m.sub("Organize", "Tags", [
+        m.item("cm:attach"),
+        m.item("set-context-value"),
+        m.item("pin-message", { label: "Pin" }),
+        m.item("notes-and-comments")
+      ], { hint: "Filed, not changed." }),
+      m.sub("History", "History", [m.item("cm:view-history"), m.item("edit-history"), m.item("fork-at-message")], {
+        hint: "Earlier versions."
+      }),
+      m.sub("AI", "Bot", [
+        m.item("cm:chat"),
+        ...aiPlacements(m),
+        m.item("send-to-agent"),
+        m.item("continue-in-chat"),
+        m.item("regenerate-response"),
+        m.item("code-block-chart")
+      ], { hint: "An AI works on it." }),
+      m.sub("Read aloud", "Volume2", [m.item("cm:speak"), m.item("cm:listen"), m.item("tts-voice-settings")], { hint: "You hear it." }),
+      m.sub("Compare", "GitCompareArrows", [m.item("cm:compare"), m.item("compare-with-clipboard"), m.item("set-compare-base")], {
+        hint: "Side by side."
+      }),
+      m.sub("Feedback", "ThumbsUp", [m.item("feedback-up"), m.item("feedback-down"), m.item("feedback")], { hint: "Tell us how it went." }),
+      m.sub("Admin", "Shield", [m.item("cm:admin")], { hint: "Admins only." }),
+      m.divider(),
+      m.item("cm:x:surface")
+    ]
+  );
+}
+function objectFirstThing() {
+  const m = maker("proposal-object-thing");
+  return design(
+    "proposal-object-thing",
+    "Object-first: a thing (data table row)",
+    "table-row",
+    "Proposal: /demos/context-menu-designs, proposed-arrangement for a clicked thing (the data-table row on that page).",
+    [
+      m.strip([
+        m.item("cm:copy"),
+        m.item("cm:share"),
+        m.item("duplicate"),
+        m.item("favorite", { label: "Favorite" }),
+        m.item("save-as-file", { label: "Download", icon: "Download" }),
+        m.item("archive")
+      ]),
+      m.item("row:open"),
+      m.item("row:open-tab"),
+      m.item("rename"),
+      m.item("move", { label: "Move to\u2026" }),
+      m.sub("More table options", "Ellipsis", [
+        m.own("Add column", "Columns3"),
+        m.own("Import", "Upload"),
+        m.own("Settings", "Settings"),
+        m.item("cm:view-history")
+      ], { note: "The thing's own rows beyond the first four." }),
+      intelligence(m),
+      saveShare(m),
+      organize(m),
+      tools(m)
+    ],
+    { search: true }
+  );
+}
+function objectFirstEditable() {
+  const m = maker("proposal-object-editable");
+  return design(
+    "proposal-object-editable",
+    "Object-first: editable text",
+    "editable-field",
+    "Proposal: /demos/context-menu-designs, proposed-arrangement for editable text (Cut, Copy, Paste, Undo, Redo, Find on top).",
+    [
+      TIER_STRIP(m),
+      m.item("cm:select-all"),
+      m.item("cm:save"),
+      m.item("cm:delete"),
+      m.item("edit"),
+      intelligence(m),
+      saveShare(m),
+      organize(m),
+      tools(m)
+    ],
+    { search: true }
+  );
+}
+function objectFirstReadOnly() {
+  const m = maker("proposal-object-readonly");
+  return design(
+    "proposal-object-readonly",
+    "Object-first: read-only text",
+    "text-selection",
+    "Proposal: /demos/context-menu-designs, proposed-arrangement for read-only text (Copy, Read aloud, Find, Share on top).",
+    [
+      m.strip([m.item("cm:copy"), m.item("cm:speak", { label: "Read aloud" }), m.item("cm:find"), m.item("cm:share")]),
+      intelligence(m),
+      saveShare(m),
+      organize(m),
+      tools(m)
+    ],
+    { search: true }
+  );
+}
+function notesRows(m) {
+  return [
+    m.item("cm:select-all"),
+    m.item("cm:chat"),
+    ...aiPlacements(m),
+    m.item("cm:quick-actions"),
+    m.item("cm:listen"),
+    m.item("cm:speak"),
+    m.item("cm:copy-as"),
+    m.item("cm:json"),
+    m.item("cm:export"),
+    m.item("cm:convert"),
+    m.item("cm:share"),
+    m.item("cm:attach"),
+    m.item("cm:save"),
+    m.item("duplicate"),
+    m.item("notes:export-md"),
+    m.item("share-link", { label: "Share link\u2026" }),
+    m.item("notes:share-clipboard"),
+    m.item("move", { label: "Move to folder\u2026" }),
+    m.item("notes:close-tab", { label: "Tabs" }),
+    m.item("notes:trash"),
+    m.item("cm:x:surface"),
+    m.item("cm:admin")
+  ];
+}
+function layoutCompact() {
+  const m = maker("proposal-layout-compact");
+  return design(
+    "proposal-layout-compact",
+    "Layout: Classic, compact rows",
+    "editable-field",
+    "Proposal: /demos/context-menu/layouts panel 2. Classic structure (every row at the top level), tighter rows and icons.",
+    [
+      m.item("cm:copy"),
+      m.item("cm:cut"),
+      m.item("cm:paste"),
+      m.item("cm:undo"),
+      m.item("cm:redo"),
+      m.item("cm:find"),
+      m.item("cm:view-history"),
+      m.item("cm:compare"),
+      m.divider(),
+      ...notesRows(m)
+    ],
+    { density: "compact", width: 260 }
+  );
+}
+function tieredNodes(m) {
+  return [
+    TIER_STRIP(m),
+    m.sub("History", "History", [m.item("cm:undo"), m.item("cm:redo"), m.item("cm:view-history"), m.item("cm:compare")], {
+      note: "The one grouping the tiered layout adds; every other row keeps its Classic name and place."
+    }),
+    m.divider(),
+    ...notesRows(m).filter((n) => n.kind !== "item" || n.label !== "Tabs"),
+    m.sub("Tabs", "X", [m.item("notes:close-tab", { label: "Close Tab" }), m.item("notes:close-others")])
+  ];
+}
+function layoutTiered() {
+  const m = maker("proposal-layout-tiered");
+  return design(
+    "proposal-layout-tiered",
+    "Layout: Tiered (icon strip, nothing lost)",
+    "editable-field",
+    "Proposal: /demos/context-menu/layouts panel 3. Icon strip on top, every other row keeps its Classic name; History groups Undo / Redo / View History / Compare.",
+    tieredNodes(m)
+  );
+}
+function layoutCommand() {
+  const m = maker("proposal-layout-command");
+  return design(
+    "proposal-layout-command",
+    "Layout: Command (tiered + type to filter)",
+    "editable-field",
+    "Proposal: /demos/context-menu/layouts panel 4, the platform default. Tiered plus a filter box that flattens every action into one ranked list.",
+    tieredNodes(m),
+    { search: true }
+  );
+}
+var STARTER_DESIGNS = [
+  { id: "live-editable-field", group: "Live today", source: "Engine ContextMenuV3 \u2014 editable text field", design: liveEditableField() },
+  { id: "live-chat-message", group: "Live today", source: "Engine NonEditableContextMenu \u2014 read-only text and chat message", design: liveReadOnlyMessage() },
+  { id: "live-notes-editor", group: "Live today", source: "/notes \u2014 notesEditorExtraSections", design: liveNotesEditor() },
+  { id: "live-quiz-row", group: "Live today", source: "/education/quizzes \u2014 useAssessmentRowActions", design: liveQuizRow() },
+  { id: "live-table-row", group: "Live today", source: "/data row \u2014 /demos/context-menu-designs TableRowsPanel (today)", design: liveTableRow() },
+  { id: "proposal-grouped", group: "Proposal", source: "/demos/context-menu-regroup \u2014 grouped by what you get", design: regroupDesign() },
+  { id: "proposal-object-thing", group: "Proposal", source: "/demos/context-menu-designs \u2014 a thing", design: objectFirstThing() },
+  { id: "proposal-object-editable", group: "Proposal", source: "/demos/context-menu-designs \u2014 editable text", design: objectFirstEditable() },
+  { id: "proposal-object-readonly", group: "Proposal", source: "/demos/context-menu-designs \u2014 read-only text", design: objectFirstReadOnly() },
+  { id: "proposal-layout-compact", group: "Proposal", source: "/demos/context-menu/layouts \u2014 compact", design: layoutCompact() },
+  { id: "proposal-layout-tiered", group: "Proposal", source: "/demos/context-menu/layouts \u2014 tiered", design: layoutTiered() },
+  { id: "proposal-layout-command", group: "Proposal", source: "/demos/context-menu/layouts \u2014 command", design: layoutCommand() }
+];
+
+// src/builder/MenuBuilder.tsx
+import {
+  Badge,
+  Button,
+  ControlRow,
+  DisclosureHeader,
+  EmptyState,
+  Field,
+  NumberStepper,
+  RegionSkeleton,
+  RowGroup,
+  SearchField,
+  SegmentedControl,
+  Select,
+  SettingRow,
+  Switch,
+  Textarea,
+  Tile as Tile2
+} from "@ai-matrx/design-system/controls";
+
+// src/builder/icons.tsx
+import * as Lucide from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var table = Lucide;
+var ICON_NAMES = Object.keys(table).filter((k) => /^[A-Z]/.test(k) && !k.endsWith("Icon") && !k.startsWith("Lucide") && k !== "Icon" && k !== "createLucideIcon").sort();
+function renderLucide(name, className) {
+  const Found = table[name];
+  const Icon = typeof Found === "function" || typeof Found === "object" && Found !== null ? Found : table.CircleHelp;
+  return /* @__PURE__ */ jsx2(Icon, { className, strokeWidth: 1.75 });
+}
+
+// src/builder/MenuBuilder.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SURFACE_LABELS = {
+  "text-selection": "Opens on selected text",
+  "editable-field": "Opens in an editable field",
+  "table-row": "Opens on a table row",
+  page: "Opens on the page",
+  "chat-message": "Opens on a chat message",
+  file: "Opens on a file",
+  anywhere: "Opens anywhere"
+};
+var SURFACE_OPTIONS = MENU_SURFACES.map((value) => ({ value, label: SURFACE_LABELS[value] }));
+var DesignContext = createContext(null);
+var DRAFT_KEY = "matrx.context-menu.builder.draft.v1";
+function usePointerDrag(onDrop) {
+  const [ghost, setGhost] = useState2(null);
+  const [over, setOver] = useState2(null);
+  const suppressClick = useRef(false);
+  const start = (e, payload, label) => {
+    if (e.button !== 0) return;
+    const x0 = e.clientX;
+    const y0 = e.clientY;
+    let active = false;
+    let current = null;
+    const move = (ev) => {
+      if (!active && Math.hypot(ev.clientX - x0, ev.clientY - y0) < 4) return;
+      if (!active) {
+        active = true;
+        document.body.style.userSelect = "none";
+        document.body.style.cursor = "grabbing";
+      }
+      setGhost({ label, x: ev.clientX, y: ev.clientY });
+      const el = document.elementFromPoint(ev.clientX, ev.clientY)?.closest("[data-drop]");
+      if (!el) {
+        current = null;
+      } else if (el.dataset.drop === "root") {
+        current = { id: null, pos: "after" };
+      } else {
+        const r = el.getBoundingClientRect();
+        const y = (ev.clientY - r.top) / r.height;
+        const pos = el.dataset.container ? y < 0.28 ? "before" : y > 0.72 ? "after" : "inside" : y < 0.5 ? "before" : "after";
+        current = { id: el.dataset.drop ?? null, pos };
+      }
+      setOver(current);
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      if (active) {
+        suppressClick.current = true;
+        setTimeout(() => suppressClick.current = false, 0);
+        if (current) onDrop(payload, current);
+      }
+      setGhost(null);
+      setOver(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  };
+  const click = (fn) => () => {
+    if (!suppressClick.current) fn();
+  };
+  return { start, click, ghost, over };
+}
+function nodeFromPayload(p) {
+  if (p.type === "catalog") {
+    const c = catalogOption(p.id);
+    if (!c) return null;
+    return {
+      id: newId("i"),
+      kind: "item",
+      catalogId: c.id,
+      label: c.label,
+      icon: c.icon,
+      ...c.shortcut ? { shortcut: c.shortcut } : {},
+      ...c.danger ? { danger: true } : {},
+      ...c.ai ? { ai: true } : {}
+    };
+  }
+  if (p.type === "template") return TEMPLATES.find((t) => t.id === p.id)?.build() ?? null;
+  if (p.type === "new") {
+    if (p.kind === "section") return { id: newId("s"), kind: "section", label: "New section", children: [] };
+    if (p.kind === "submenu") return { id: newId("m"), kind: "submenu", label: "More", icon: "Ellipsis", children: [] };
+    if (p.kind === "divider") return { id: newId("d"), kind: "divider" };
+    if (p.kind === "slot-items") return { id: newId("p"), kind: "slot", shape: "items", fills: "any", label: "Everything else" };
+    if (p.kind === "slot-menu") return { id: newId("p"), kind: "slot", shape: "submenu", fills: "any", label: "More", icon: "Ellipsis" };
+    return { id: newId("i"), kind: "item", label: "New option", icon: "Circle" };
+  }
+  return null;
+}
+function readDraft() {
+  try {
+    const raw = globalThis.localStorage?.getItem(DRAFT_KEY);
+    return raw ? parseDesign(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function useHistory(initial) {
+  const [state, setState] = useState2({ past: [], present: initial, future: [] });
+  const set = useCallback((next, opts) => {
+    setState((s) => {
+      const value = typeof next === "function" ? next(s.present) : next;
+      if (value === s.present) return s;
+      if (opts?.replace) return { past: [], present: value, future: [] };
+      return { past: [...s.past.slice(-99), s.present], present: value, future: [] };
+    });
+  }, []);
+  const undo = useCallback(() => setState((s) => s.past.length ? { past: s.past.slice(0, -1), present: s.past[s.past.length - 1], future: [s.present, ...s.future] } : s), []);
+  const redo = useCallback(() => setState((s) => s.future.length ? { past: [...s.past, s.present], present: s.future[0], future: s.future.slice(1) } : s), []);
+  return { design: state.present, set, undo, redo, canUndo: state.past.length > 0, canRedo: state.future.length > 0 };
+}
+function MenuBuilder({ store, storeLabel, initialDesign, accountSlot }) {
+  const { design: design2, set, undo, redo, canUndo, canRedo } = useHistory(initialDesign ?? readDraft() ?? emptyDesign());
+  const [selected, setSelected] = useState2(null);
+  const [versions, setVersions] = useState2(null);
+  const [status, setStatus] = useState2(null);
+  const [saving, setSaving] = useState2(false);
+  const [note, setNote] = useState2("");
+  const [lastSaved, setLastSaved] = useState2(null);
+  const designRef = useRef(design2);
+  designRef.current = design2;
+  useEffect(() => {
+    try {
+      globalThis.localStorage?.setItem(DRAFT_KEY, serializeDesign(design2));
+    } catch {
+    }
+  }, [design2]);
+  const refresh = useCallback(async () => {
+    try {
+      const all = await store.list();
+      setVersions(all);
+      const now = serializeDesign(designRef.current);
+      setLastSaved(all.some((v) => serializeDesign(v.design) === now) ? now : null);
+    } catch (e) {
+      setStatus({ tone: "error", text: `Could not read saved designs: ${e instanceof Error ? e.message : String(e)}` });
+    }
+  }, [store]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  const dirty = lastSaved !== serializeDesign(design2);
+  const save = async () => {
+    setSaving(true);
+    try {
+      const saved = await store.save(design2, note.trim());
+      setLastSaved(serializeDesign(design2));
+      setNote("");
+      setStatus({ tone: "ok", text: `Saved \u201C${saved.name}\u201D v${saved.version}` });
+      await refresh();
+    } catch (e) {
+      setStatus({ tone: "error", text: `Save failed: ${e instanceof Error ? e.message : String(e)}` });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const open = (v) => {
+    set(v.design);
+    setLastSaved(serializeDesign(v.design));
+    setSelected(null);
+    setStatus({ tone: "info", text: `Opened \u201C${v.name}\u201D v${v.version}${dirty ? " \u2014 \u2318Z brings back your unsaved changes" : ""}` });
+  };
+  const addNode = (node) => {
+    set((d) => {
+      const sel = selected ? locate(d.nodes, selected) : null;
+      const nests = sel && isContainer(sel.node) && !isContainer(node);
+      if (sel && nests && isContainer(sel.node)) return { ...d, nodes: insertNode(d.nodes, sel.node.id, sel.node.children.length, node) };
+      if (sel) return { ...d, nodes: insertNode(d.nodes, sel.parentId, sel.index + 1, node) };
+      return { ...d, nodes: [...d.nodes, node] };
+    });
+    setSelected(node.id);
+  };
+  const drop = (p, { id: targetId, pos }) => {
+    if (p.type === "move" && p.id === targetId) return;
+    if (p.type === "move" && targetId) {
+      const at = locate(design2.nodes, targetId);
+      const parentId = at ? pos === "inside" && isContainer(at.node) ? at.node.id : at.parentId : null;
+      if (!canMove(design2.nodes, p.id, parentId)) {
+        setStatus({ tone: "error", text: "Can't move a section or submenu inside itself" });
+        return;
+      }
+    }
+    const fresh = p.type === "move" ? null : nodeFromPayload(p);
+    set((d) => {
+      let parentId = null;
+      let index = d.nodes.length;
+      if (targetId) {
+        const at = locate(d.nodes, targetId);
+        if (!at) return d;
+        if (pos === "inside" && isContainer(at.node)) {
+          parentId = at.node.id;
+          index = at.node.children.length;
+        } else {
+          parentId = at.parentId;
+          index = at.index + (pos === "after" ? 1 : 0);
+        }
+      }
+      if (p.type === "move") return { ...d, nodes: moveNode(d.nodes, p.id, parentId, index) };
+      return fresh ? { ...d, nodes: insertNode(d.nodes, parentId, index, fresh) } : d;
+    });
+    if (fresh) setSelected(fresh.id);
+    else if (p.type === "move") setSelected(p.id);
+  };
+  const dnd = usePointerDrag(drop);
+  const remove = (id) => {
+    set((d) => ({ ...d, nodes: removeNode(d.nodes, id) }));
+    if (selected === id) setSelected(null);
+  };
+  useEffect(() => {
+    const onKey = (e) => {
+      const typing = e.target instanceof HTMLElement && /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName);
+      const mod = e.metaKey || e.ctrlKey;
+      if (mod && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        void save();
+        return;
+      }
+      if (typing) return;
+      if (mod && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (e.shiftKey) redo();
+        else undo();
+      } else if (mod && e.key.toLowerCase() === "d" && selected) {
+        e.preventDefault();
+        set((d) => ({ ...d, nodes: duplicateNode(d.nodes, selected) }));
+      } else if ((e.key === "Delete" || e.key === "Backspace") && selected) {
+        e.preventDefault();
+        remove(selected);
+      } else if (e.key === "Escape") setSelected(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+  const selectedNode = selected ? locate(design2.nodes, selected)?.node ?? null : null;
+  const designs = useMemo2(() => {
+    const byId = /* @__PURE__ */ new Map();
+    for (const v of versions ?? []) byId.set(v.designId, [...byId.get(v.designId) ?? [], v]);
+    return [...byId.values()];
+  }, [versions]);
+  return /* @__PURE__ */ jsx3(DesignContext.Provider, { value: design2, children: /* @__PURE__ */ jsxs2("div", { className: "flex h-dvh flex-col bg-background text-foreground", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "flex flex-wrap items-center gap-y-1 border-b border-border px-3 py-2", children: [
+      /* @__PURE__ */ jsxs2(ControlRow, { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx3(Field, { "aria-label": "Design name", width: "lg", value: design2.name, onChange: (e) => set((d) => ({ ...d, name: e.target.value })) }),
+        /* @__PURE__ */ jsx3(
+          Select,
+          {
+            "aria-label": "Where this menu opens",
+            value: design2.surface,
+            options: SURFACE_OPTIONS,
+            onValueChange: (surface) => set((d) => ({ ...d, surface }))
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Badge, { children: [
+          countItems(design2.nodes),
+          " options"
+        ] }),
+        /* @__PURE__ */ jsx3(Button, { variant: "quiet", icon: renderLucide("Undo2"), "aria-label": "Undo (\u2318Z)", title: "Undo (\u2318Z)", onClick: undo, disabled: !canUndo }),
+        /* @__PURE__ */ jsx3(Button, { variant: "quiet", icon: renderLucide("Redo2"), "aria-label": "Redo (\u21E7\u2318Z)", title: "Redo (\u21E7\u2318Z)", onClick: redo, disabled: !canRedo }),
+        /* @__PURE__ */ jsx3(
+          Button,
+          {
+            variant: "quiet",
+            icon: renderLucide("FilePlus2"),
+            onClick: () => {
+              set(emptyDesign(), { replace: true });
+              setLastSaved(null);
+              setSelected(null);
+            },
+            children: "New"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Button,
+          {
+            variant: "quiet",
+            icon: renderLucide("CopyPlus"),
+            title: "Keep this menu as a separate design",
+            onClick: () => set((d) => ({ ...d, designId: newId("d"), name: `${d.name} (copy)` })),
+            children: "Save as new design"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Button,
+          {
+            variant: "quiet",
+            icon: renderLucide("Braces"),
+            onClick: () => {
+              void navigator.clipboard?.writeText(serializeDesign(design2));
+              setStatus({ tone: "info", text: "Design JSON copied" });
+            },
+            children: "Copy JSON"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(ControlRow, { children: [
+        accountSlot ?? /* @__PURE__ */ jsx3(Badge, { children: storeLabel }),
+        /* @__PURE__ */ jsx3(Field, { "aria-label": "Version note", width: "md", placeholder: "Version note", value: note, onChange: (e) => setNote(e.target.value) }),
+        /* @__PURE__ */ jsx3(Button, { variant: "primary", icon: renderLucide("Save"), meta: "\u2318S", onClick: () => void save(), disabled: saving || !dirty, children: saving ? "Saving\u2026" : dirty ? "Save version" : "Saved" })
+      ] })
+    ] }),
+    status && /* @__PURE__ */ jsx3("div", { className: `border-b border-border px-3 py-1 text-xs ${status.tone === "error" ? "text-destructive" : "text-muted-foreground"}`, children: status.text }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_minmax(0,1fr)_minmax(0,1.1fr)]", children: [
+      /* @__PURE__ */ jsx3(Palette, { onAdd: addNode, startDrag: dnd.start, click: dnd.click }),
+      /* @__PURE__ */ jsx3(
+        Structure,
+        {
+          nodes: design2.nodes,
+          selected,
+          onSelect: setSelected,
+          startDrag: dnd.start,
+          click: dnd.click,
+          over: dnd.over,
+          onRemove: remove,
+          onDuplicate: (id) => set((d) => ({ ...d, nodes: duplicateNode(d.nodes, id) })),
+          onWrap: (id, kind) => set((d) => ({ ...d, nodes: wrapNode(d.nodes, id, kind) })),
+          onUnwrap: (id) => set((d) => ({ ...d, nodes: unwrapNode(d.nodes, id) })),
+          versions: versions === null ? null : designs,
+          currentDesignId: design2.designId,
+          onOpen: open,
+          onStart: (st) => {
+            const copy = { ...st.design, designId: newId("d") };
+            set(copy);
+            setLastSaved(null);
+            setSelected(null);
+            setStatus({ tone: "info", text: `Started from \u201C${st.design.name}\u201D${dirty ? " \u2014 \u2318Z brings back your unsaved changes" : ""}` });
+          },
+          onArchive: (v) => {
+            void store.remove(v.rowId).then(refresh).then(() => setStatus({ tone: "info", text: `Archived \u201C${v.name}\u201D v${v.version}` })).catch((e) => setStatus({ tone: "error", text: `Archive failed: ${e instanceof Error ? e.message : String(e)}` }));
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs2("aside", { className: "flex min-h-0 min-w-0 flex-col overflow-x-hidden overflow-y-auto border-l border-border", children: [
+        /* @__PURE__ */ jsx3(Stage, { design: design2, selected, onSelect: setSelected }),
+        selectedNode ? /* @__PURE__ */ jsx3(
+          Inspector,
+          {
+            node: selectedNode,
+            onChange: (patch) => set((d) => ({ ...d, nodes: updateNode(d.nodes, selectedNode.id, patch) }))
+          },
+          selectedNode.id
+        ) : /* @__PURE__ */ jsx3(Panel, { title: "Notes for the build", children: /* @__PURE__ */ jsx3(
+          Textarea,
+          {
+            "aria-label": "Notes for the build",
+            value: design2.notes,
+            onChange: (e) => set((d) => ({ ...d, notes: e.target.value })),
+            rows: 4,
+            autoGrow: true,
+            placeholder: "Anything the builder of this menu should know"
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(Look, { design: design2, onChange: (look) => set((d) => ({ ...d, look })) })
+      ] })
+    ] }),
+    dnd.ghost && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "pointer-events-none fixed z-50 rounded-md border border-primary bg-popover px-2 py-1 text-sm shadow-lg",
+        style: { left: dnd.ghost.x + 12, top: dnd.ghost.y + 8 },
+        children: dnd.ghost.label
+      }
+    )
+  ] }) });
+}
+function Panel({ title, children, right }) {
+  return /* @__PURE__ */ jsxs2("section", { className: "border-b border-border p-3", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "type-meta uppercase", children: title }),
+      right
+    ] }),
+    children
+  ] });
+}
+function Palette({ onAdd, startDrag, click }) {
+  const [q, setQ] = useState2("");
+  const query = q.trim().toLowerCase();
+  const shown = (c) => !query || c.label.toLowerCase().includes(query) || c.id.toLowerCase().includes(query) || c.group.toLowerCase().includes(query);
+  const add = (p) => {
+    const n = nodeFromPayload(p);
+    if (n) onAdd(n);
+  };
+  const design2 = useContext(DesignContext);
+  const uses = useMemo2(() => catalogUseCounts(design2?.nodes ?? []), [design2?.nodes]);
+  const Option = ({ p, icon, label, end, dimmed }) => /* @__PURE__ */ jsx3(
+    Tile2,
+    {
+      layout: "row",
+      variant: "quiet",
+      icon: renderLucide(icon),
+      title: label,
+      end,
+      dimmed: dimmed === true,
+      onPointerDown: (e) => startDrag(e, p, label),
+      onClick: click(() => add(p))
+    }
+  );
+  return /* @__PURE__ */ jsxs2("aside", { className: "flex min-h-0 flex-col border-r border-border", children: [
+    /* @__PURE__ */ jsx3("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx3(SearchField, { "aria-label": "Search options", placeholder: "Search options", value: q, onChange: (e) => setQ(e.target.value) }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", children: [
+      !query && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2(RowGroup, { title: "Building blocks", children: [
+          /* @__PURE__ */ jsx3(Option, { p: { type: "new", kind: "section" }, icon: "Rows3", label: "Section" }),
+          /* @__PURE__ */ jsx3(Option, { p: { type: "new", kind: "submenu" }, icon: "ChevronsRight", label: "Submenu" }),
+          /* @__PURE__ */ jsx3(Option, { p: { type: "new", kind: "divider" }, icon: "Minus", label: "Divider" }),
+          /* @__PURE__ */ jsx3(Option, { p: { type: "new", kind: "item" }, icon: "Plus", label: "Custom option" }),
+          /* @__PURE__ */ jsx3(Option, { p: { type: "new", kind: "slot-items" }, icon: "ListPlus", label: "Placeholder \u2014 items" }),
+          /* @__PURE__ */ jsx3(Option, { p: { type: "new", kind: "slot-menu" }, icon: "FolderPlus", label: "Placeholder \u2014 submenu" })
+        ] }),
+        /* @__PURE__ */ jsx3(RowGroup, { title: "Ready-made", children: TEMPLATES.map((t) => /* @__PURE__ */ jsx3(Option, { p: { type: "template", id: t.id }, icon: t.icon, label: t.label }, t.id)) })
+      ] }),
+      CATALOG_GROUPS.map((g) => {
+        const matching = CATALOG.filter((c) => c.group === g && shown(c));
+        const items = [...matching.filter((c) => !uses.has(c.id)), ...matching.filter((c) => uses.has(c.id))];
+        if (items.length === 0) return null;
+        return /* @__PURE__ */ jsx3(RowGroup, { title: g, children: items.map((c) => /* @__PURE__ */ jsx3(
+          Option,
+          {
+            p: { type: "catalog", id: c.id },
+            icon: c.icon,
+            label: c.label,
+            dimmed: uses.has(c.id),
+            ...uses.has(c.id) ? { end: /* @__PURE__ */ jsx3(Badge, { children: (uses.get(c.id) ?? 0) > 1 ? `used \xD7${uses.get(c.id)}` : "used" }) } : c.status === "proposed" ? { end: /* @__PURE__ */ jsx3(Badge, { children: "new" }) } : {}
+          },
+          c.id
+        )) }, g);
+      })
+    ] })
+  ] });
+}
+function Structure(props) {
+  const rootOver = props.over !== null && props.over.id === null;
+  return /* @__PURE__ */ jsxs2("main", { className: "flex min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 border-b border-border px-3 py-2", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "type-meta shrink-0 uppercase", children: "Structure" }),
+      /* @__PURE__ */ jsx3("span", { className: "type-meta min-w-0 truncate", children: "Drag to reorder \xB7 drop on a section or submenu to nest" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", onClick: (e) => e.target === e.currentTarget && props.onSelect(null), children: [
+      /* @__PURE__ */ jsx3(Rows, { ...props, list: props.nodes, depth: 0 }),
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          "data-drop": "root",
+          className: `mt-1 flex h-14 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground ${rootOver ? "border-primary bg-primary/5" : "border-border"}`,
+          children: props.nodes.length === 0 ? "Drag options here to start the menu" : "Drop here to add at the end"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(Versions, { versions: props.versions, currentDesignId: props.currentDesignId, onOpen: props.onOpen, onArchive: props.onArchive, onStart: props.onStart })
+  ] });
+}
+function Rows(props) {
+  const { list, depth, over, selected, onSelect, startDrag, click } = props;
+  return /* @__PURE__ */ jsx3(Fragment2, { children: list.map((node) => {
+    const container = isContainer(node);
+    const isOver = over?.id === node.id;
+    const label = node.kind === "divider" ? "\u2500\u2500\u2500\u2500 divider \u2500\u2500\u2500\u2500" : node.label || (node.kind === "section" ? "(unlabelled section)" : "(no label)");
+    const icon = node.kind === "item" || node.kind === "submenu" ? node.icon : node.kind === "slot" ? node.icon ?? slotSource(node.fills)?.icon ?? "Ellipsis" : node.kind === "section" ? "Rows3" : "Minus";
+    return /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "data-drop": node.id,
+          ...container ? { "data-container": "1" } : {},
+          onPointerDown: (e) => {
+            if (e.target.closest("button")) return;
+            startDrag(e, { type: "move", id: node.id }, label);
+          },
+          onClick: click(() => onSelect(node.id)),
+          style: { marginLeft: depth * 18 },
+          className: [
+            "group relative flex h-8 cursor-grab touch-none items-center gap-2 rounded-md border px-2 text-sm",
+            selected === node.id ? "border-primary bg-primary/5" : "border-transparent hover:bg-accent",
+            isOver && over?.pos === "inside" ? "ring-2 ring-primary" : "",
+            container ? "font-medium" : ""
+          ].join(" "),
+          children: [
+            isOver && over?.pos === "before" && /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-x-0 -top-px h-0.5 rounded bg-primary" }),
+            isOver && over?.pos === "after" && /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-x-0 -bottom-px h-0.5 rounded bg-primary" }),
+            /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: "\u22EE\u22EE" }),
+            icon && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: renderLucide(icon, "size-4") }),
+            /* @__PURE__ */ jsx3("span", { className: `min-w-0 flex-1 truncate ${node.kind === "divider" ? "text-xs text-muted-foreground" : ""}`, children: label }),
+            node.kind === "submenu" && /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-muted-foreground", children: "submenu" }),
+            node.kind === "slot" && /* @__PURE__ */ jsx3(Badge, { children: node.shape === "submenu" ? "placeholder submenu" : "placeholder" }),
+            node.kind === "section" && /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-muted-foreground", children: node.layout && node.layout !== "list" ? `${node.layout} section` : "section" }),
+            node.kind === "item" && node.shortcut && /* @__PURE__ */ jsx3("kbd", { className: "text-[10px] text-muted-foreground", children: node.shortcut }),
+            /* @__PURE__ */ jsxs2("span", { className: "hidden items-center gap-0.5 group-hover:flex", children: [
+              /* @__PURE__ */ jsx3(RowAction, { title: "Duplicate", onClick: () => props.onDuplicate(node.id), icon: "CopyPlus" }),
+              container ? /* @__PURE__ */ jsx3(RowAction, { title: "Unwrap (keep its options)", onClick: () => props.onUnwrap(node.id), icon: "Ungroup" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                /* @__PURE__ */ jsx3(RowAction, { title: "Put in a new section", onClick: () => props.onWrap(node.id, "section"), icon: "Rows3" }),
+                /* @__PURE__ */ jsx3(RowAction, { title: "Put in a new submenu", onClick: () => props.onWrap(node.id, "submenu"), icon: "ChevronsRight" })
+              ] }),
+              /* @__PURE__ */ jsx3(RowAction, { title: "Delete", onClick: () => props.onRemove(node.id), icon: "Trash2" })
+            ] })
+          ]
+        }
+      ),
+      container && /* @__PURE__ */ jsx3(Fragment2, { children: node.children.length === 0 ? /* @__PURE__ */ jsxs2("div", { style: { marginLeft: (depth + 1) * 18 }, className: "my-0.5 rounded-md border border-dashed border-border px-2 py-1 text-[11px] text-muted-foreground", children: [
+        "Empty \u2014 drop options onto \u201C",
+        node.label || "section",
+        "\u201D"
+      ] }) : /* @__PURE__ */ jsx3(Rows, { ...props, list: node.children, depth: depth + 1 }) })
+    ] }, node.id);
+  }) });
+}
+function RowAction({ title, onClick, icon }) {
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      variant: "quiet",
+      icon: renderLucide(icon),
+      "aria-label": title,
+      title,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      }
+    }
+  );
+}
+function Versions({
+  versions,
+  currentDesignId,
+  onOpen,
+  onArchive,
+  onStart
+}) {
+  const [openId, setOpenId] = useState2(null);
+  const [startersOpen, setStartersOpen] = useState2(false);
+  return /* @__PURE__ */ jsxs2("div", { className: "max-h-[45%] min-h-0 overflow-y-auto border-t border-border p-2", children: [
+    /* @__PURE__ */ jsx3(DisclosureHeader, { open: startersOpen, onClick: () => setStartersOpen((o2) => !o2), title: "Starting points", meta: `${STARTER_DESIGNS.length}` }),
+    startersOpen && ["Live today", "Proposal"].map((group) => /* @__PURE__ */ jsx3(RowGroup, { title: group, children: STARTER_DESIGNS.filter((st) => st.group === group).map((st) => /* @__PURE__ */ jsx3(Tile2, { layout: "row", variant: "quiet", icon: renderLucide(group === "Live today" ? "Radio" : "Lightbulb"), title: st.design.name, line: st.source, onClick: () => {
+      onStart(st);
+      setStartersOpen(false);
+    } }, st.id)) }, group)),
+    /* @__PURE__ */ jsxs2(RowGroup, { title: "Saved designs", children: [
+      versions === null && /* @__PURE__ */ jsx3(RegionSkeleton, { shape: "rows" }),
+      versions?.length === 0 && /* @__PURE__ */ jsx3(EmptyState, { icon: renderLucide("Save"), title: "Nothing saved yet", line: "\u2318S saves a version" }),
+      (versions ?? []).map((group) => {
+        const latest = group[0];
+        const expanded = openId === latest.designId;
+        return /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3(
+            DisclosureHeader,
+            {
+              open: expanded,
+              onClick: () => setOpenId(expanded ? null : latest.designId),
+              title: latest.name,
+              meta: `${group.length} version${group.length === 1 ? "" : "s"}${latest.designId === currentDesignId ? " \xB7 open" : ""}`
+            }
+          ),
+          expanded && group.map((v) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center pl-5", children: [
+            /* @__PURE__ */ jsx3(
+              Tile2,
+              {
+                className: "min-w-0 flex-1",
+                layout: "row",
+                variant: "quiet",
+                title: `v${v.version}${v.note ? ` \u2014 ${v.note}` : ""}`,
+                line: v.savedAt ? new Date(v.savedAt).toLocaleString() : void 0,
+                onClick: () => onOpen(v)
+              }
+            ),
+            /* @__PURE__ */ jsx3(RowAction, { title: "Archive this version", onClick: () => onArchive(v), icon: "Archive" })
+          ] }, v.rowId))
+        ] }, latest.designId);
+      })
+    ] })
+  ] });
+}
+function Stage({ design: design2, selected, onSelect }) {
+  const [at, setAt] = useState2(null);
+  const [picked, setPicked] = useState2(null);
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx3(Panel, { title: "Live menu", right: /* @__PURE__ */ jsx3("span", { className: "text-[11px] text-muted-foreground", children: "Right-click the grey area to open it there" }), children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      onContextMenu: (e) => {
+        e.preventDefault();
+        const r = ref.current?.getBoundingClientRect();
+        if (r) setAt({ x: Math.max(8, Math.min(e.clientX - r.left, r.width - design2.look.width - 8)), y: Math.max(8, Math.min(e.clientY - r.top, r.height - (ref.current?.querySelector(".cm-menu")?.getBoundingClientRect().height ?? 160) - 8)) });
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) setAt(null);
+      },
+      "data-menu-bounds": "",
+      className: "relative min-h-[300px] overflow-visible rounded-lg bg-muted/60 p-4",
+      children: [
+        at ? /* @__PURE__ */ jsx3(
+          MenuPreview,
+          {
+            design: design2,
+            renderIcon: renderLucide,
+            highlightId: selected,
+            onSelectNode: onSelect,
+            onPick: (i) => setPicked(i.label),
+            style: { position: "absolute", left: at.x, top: at.y, zIndex: 20 }
+          }
+        ) : /* @__PURE__ */ jsx3(MenuPreview, { design: design2, renderIcon: renderLucide, highlightId: selected, onSelectNode: onSelect, onPick: (i) => setPicked(i.label) }),
+        picked && /* @__PURE__ */ jsxs2("div", { className: "absolute right-3 bottom-2 text-xs text-muted-foreground", children: [
+          "Picked: ",
+          picked
+        ] })
+      ]
+    }
+  ) });
+}
+var DENSITY_OPTIONS = [
+  { value: "comfortable", label: "Comfortable" },
+  { value: "compact", label: "Compact" }
+];
+function Look({ design: design2, onChange }) {
+  const look = design2.look;
+  const toggle = (k, label) => /* @__PURE__ */ jsx3(SettingRow, { label, children: /* @__PURE__ */ jsx3(Switch, { "aria-label": label, checked: look[k], onCheckedChange: (v) => onChange({ ...look, [k]: v }) }) });
+  return /* @__PURE__ */ jsxs2(Panel, { title: "Look", right: /* @__PURE__ */ jsx3(Button, { variant: "quiet", onClick: () => onChange({ ...DEFAULT_LOOK }), children: "Reset" }), children: [
+    /* @__PURE__ */ jsx3(SettingRow, { label: "Density", children: /* @__PURE__ */ jsx3(SegmentedControl, { "aria-label": "Density", value: look.density, data: DENSITY_OPTIONS, onValueChange: (density) => onChange({ ...look, density }) }) }),
+    /* @__PURE__ */ jsx3(SettingRow, { label: "Width", children: /* @__PURE__ */ jsx3(NumberStepper, { value: look.width, min: 180, max: 420, step: 10, onChange: (width) => onChange({ ...look, width }) }) }),
+    toggle("showIcons", "Icons"),
+    toggle("showShortcuts", "Shortcuts"),
+    toggle("showHints", "Hints"),
+    toggle("search", "Search box")
+  ] });
+}
+var LAYOUT_OPTIONS = [
+  { value: "list", label: "List" },
+  { value: "row", label: "Icon row" },
+  { value: "grid", label: "Icon grid" }
+];
+var FLAGS = [
+  ["ai", "AI"],
+  ["danger", "Destructive"],
+  ["toggle", "Checkbox"],
+  ["disabled", "Disabled"]
+];
+function Inspector({ node, onChange }) {
+  const catalog = node.catalogId ? catalogOption(node.catalogId) : void 0;
+  return /* @__PURE__ */ jsxs2(Panel, { title: `Selected ${node.kind === "slot" ? "placeholder" : node.kind}`, right: catalog ? /* @__PURE__ */ jsx3(Badge, { children: catalog.id }) : void 0, children: [
+    node.kind === "divider" ? /* @__PURE__ */ jsx3("p", { className: "type-secondary", children: "A divider has no settings." }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Labelled, { label: "Label", children: /* @__PURE__ */ jsx3(Field, { "aria-label": "Label", value: node.label, onChange: (e) => onChange({ label: e.target.value }) }) }),
+      node.kind === "slot" && /* @__PURE__ */ jsx3(SlotSettings, { node, onChange }),
+      (node.kind === "item" || node.kind === "submenu") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Labelled, { label: "Icon", children: /* @__PURE__ */ jsx3(IconPicker, { value: node.icon ?? "", onChange: (icon) => onChange({ icon }) }) }),
+        /* @__PURE__ */ jsx3(Labelled, { label: "Hint", children: /* @__PURE__ */ jsx3(Field, { "aria-label": "Hint", value: node.hint ?? "", onChange: (e) => onChange({ hint: e.target.value }) }) })
+      ] }),
+      node.kind === "item" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Labelled, { label: "Shortcut", children: /* @__PURE__ */ jsx3(Field, { "aria-label": "Shortcut", value: node.shortcut ?? "", placeholder: "\u2318K", onChange: (e) => onChange({ shortcut: e.target.value }) }) }),
+        FLAGS.map(([k, label]) => /* @__PURE__ */ jsx3(SettingRow, { label, children: /* @__PURE__ */ jsx3(Switch, { "aria-label": label, checked: Boolean(node[k]), onCheckedChange: (v) => onChange({ [k]: v }) }) }, k))
+      ] }),
+      node.kind === "section" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(SettingRow, { label: "Layout", children: /* @__PURE__ */ jsx3(SegmentedControl, { "aria-label": "Layout", value: node.layout ?? "list", data: LAYOUT_OPTIONS, onValueChange: (layout) => onChange({ layout }) }) }),
+        /* @__PURE__ */ jsx3(SettingRow, { label: "Starts folded", children: /* @__PURE__ */ jsx3(Switch, { "aria-label": "Starts folded", checked: Boolean(node.collapsible), onCheckedChange: (v) => onChange({ collapsible: v }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(Labelled, { label: "Note for the build", children: /* @__PURE__ */ jsx3(Textarea, { "aria-label": "Note for the build", rows: 2, autoGrow: true, value: node.note ?? "", onChange: (e) => onChange({ note: e.target.value }) }) })
+  ] });
+}
+var SLOT_SHAPES = [
+  { value: "items", label: "Rows here" },
+  { value: "submenu", label: "One submenu" }
+];
+var SLOT_OPTIONS = SLOT_SOURCES.map((src) => ({ value: src.id, label: src.label }));
+function SlotSettings({ node, onChange }) {
+  const source = slotSource(node.fills);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Labelled, { label: "Holds", children: /* @__PURE__ */ jsx3(
+      Select,
+      {
+        "aria-label": "What this placeholder holds",
+        value: node.fills,
+        options: SLOT_OPTIONS,
+        onValueChange: (fills) => {
+          const relabel = !node.label || node.label === source?.phrase || node.label === "Everything else" || node.label === "More";
+          onChange({ fills, ...relabel ? { label: slotSource(fills)?.phrase ?? node.label } : {} });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(SettingRow, { label: "Shows as", children: /* @__PURE__ */ jsx3(SegmentedControl, { "aria-label": "Shows as", value: node.shape, data: SLOT_SHAPES, onValueChange: (shape) => onChange({ shape }) }) }),
+    /* @__PURE__ */ jsx3(SlotContents, { fills: node.fills })
+  ] });
+}
+function SlotContents({ fills }) {
+  const source = slotSource(fills);
+  const design2 = useContext(DesignContext);
+  const left = useMemo2(() => design2 ? slotOptions(fills, placedCatalogIds(design2.nodes)) : [], [design2, fills]);
+  if (source?.runtime) return /* @__PURE__ */ jsx3("p", { className: "type-secondary mt-2", children: "Filled by the live menu at runtime." });
+  return /* @__PURE__ */ jsx3("p", { className: "type-secondary mt-2", children: left.length === 0 ? "Nothing left \u2014 every option of this kind is already placed." : `Holds ${left.length}: ${left.slice(0, 6).map((o2) => o2.label).join(", ")}${left.length > 6 ? "\u2026" : ""}` });
+}
+function Labelled({ label, children }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-2 grid gap-1", children: [
+    /* @__PURE__ */ jsx3("span", { className: "type-meta", children: label }),
+    children
+  ] });
+}
+function IconPicker({ value, onChange }) {
+  const [q, setQ] = useState2("");
+  const [open, setOpen] = useState2(false);
+  const shown = useMemo2(() => {
+    const s = q.trim().toLowerCase();
+    return (s ? ICON_NAMES.filter((n) => n.toLowerCase().includes(s)) : ICON_NAMES).slice(0, 96);
+  }, [q]);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx3(
+      Button,
+      {
+        variant: "outline",
+        icon: value ? renderLucide(value) : void 0,
+        iconEnd: renderLucide("ChevronDown"),
+        "aria-expanded": open,
+        onClick: () => setOpen((o2) => !o2),
+        children: value || "No icon"
+      }
+    ),
+    open && /* @__PURE__ */ jsxs2("div", { className: "absolute z-30 mt-1 w-full rounded-md border border-border bg-popover p-2 shadow-lg", children: [
+      /* @__PURE__ */ jsx3(SearchField, { autoFocus: true, "aria-label": "Search icons", placeholder: `Search ${ICON_NAMES.length} icons`, value: q, onChange: (e) => setQ(e.target.value) }),
+      /* @__PURE__ */ jsxs2("div", { className: "mt-2 grid max-h-56 grid-cols-8 overflow-y-auto", children: [
+        /* @__PURE__ */ jsx3(Button, { variant: "quiet", icon: renderLucide("Ban"), "aria-label": "No icon", title: "No icon", pressed: !value, onClick: () => {
+          onChange("");
+          setOpen(false);
+        } }),
+        shown.map((n) => /* @__PURE__ */ jsx3(
+          Button,
+          {
+            variant: "quiet",
+            icon: renderLucide(n),
+            "aria-label": n,
+            title: n,
+            pressed: n === value,
+            onClick: () => {
+              onChange(n);
+              setOpen(false);
+            }
+          },
+          n
+        ))
+      ] })
+    ] })
+  ] });
+}
+export {
+  ICON_NAMES,
+  MenuBuilder,
+  renderLucide
+};
+//# sourceMappingURL=builder.js.map