@ai-matrx/context-menu 0.0.0 → 0.1.1

package/dist/index.js

@@ -0,0 +1,561 @@
+"use client";
+
+// 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(design) {
+  return JSON.stringify({ format: DESIGN_FORMAT, design });
+}
+
+// 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";
+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, renderIcon, highlightId, onSelectNode, onPick, className, style }) {
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const { look } = design;
+  const results = useMemo(() => q ? flatten(design.nodes, q) : null, [design.nodes, q]);
+  const placed = useMemo(() => placedCatalogIds(design.nodes), [design.nodes]);
+  const ctx = { design, 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)) : design.nodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "Empty menu \u2014 drag options in" }) : /* @__PURE__ */ jsx(Nodes, { nodes: design.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)) })
+      ]
+    }
+  );
+}
+export {
+  CATALOG,
+  CATALOG_GROUPS,
+  DEFAULT_LOOK,
+  DESIGN_FORMAT,
+  MENU_SURFACES,
+  MenuPreview,
+  SLOT_SOURCES,
+  TEMPLATES,
+  canMove,
+  catalogOption,
+  catalogUseCounts,
+  cloneNode,
+  contains,
+  countItems,
+  duplicateNode,
+  emptyDesign,
+  insertNode,
+  isContainer,
+  locate,
+  moveNode,
+  newId,
+  parseDesign,
+  placedCatalogIds,
+  removeNode,
+  serializeDesign,
+  slotOptions,
+  slotSource,
+  unwrapNode,
+  updateNode,
+  wrapNode
+};
+//# sourceMappingURL=index.js.map