@ai-matrx/context-menu 0.1.0 → 0.1.2

package/dist/builder.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { M as MenuDesign } from './model-BdF0TqZ3.cjs';
+import { M as MenuDesign } from './model-CkLCR6WY.cjs';
 import { DesignStore } from './design-store.cjs';
 import '@ai-matrx/records/typed-table';
 import '@ai-matrx/records/core';

package/dist/builder.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { M as MenuDesign } from './model-BdF0TqZ3.js';
+import { M as MenuDesign } from './model-CkLCR6WY.js';
 import { DesignStore } from './design-store.js';
 import '@ai-matrx/records/typed-table';
 import '@ai-matrx/records/core';

package/dist/builder.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/builder/MenuBuilder.tsx
-import { useCallback, useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+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 });
@@ -143,6 +143,25 @@ var TEMPLATES = [
   { 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";
@@ -176,6 +195,20 @@ function emptyDesign(name = "Untitled menu") {
 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);
@@ -199,7 +232,7 @@ function contains(node, id) {
 function countItems(nodes) {
   let n = 0;
   for (const node of nodes) {
-    if (node.kind === "item") n += 1;
+    if (node.kind === "item" || node.kind === "slot") n += 1;
     else if (isContainer(node)) n += countItems(node.children) + (node.kind === "submenu" ? 1 : 0);
   }
   return n;
@@ -289,7 +322,7 @@ 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") return node.label.toLowerCase().includes(q);
+  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 = []) {
@@ -304,6 +337,8 @@ function MenuPreview({ design: design2, renderIcon, highlightId, onSelectNode, o
   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",
     {
@@ -316,7 +351,7 @@ function MenuPreview({ design: design2, renderIcon, highlightId, onSelectNode, o
           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: { design: design2, renderIcon, highlightId, onSelectNode, onPick } }, 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: { design: design2, renderIcon, highlightId, onSelectNode, onPick } })
+        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 })
       ]
     }
   );
@@ -326,6 +361,7 @@ function Nodes({ nodes, ctx }) {
     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);
   }) });
 }
@@ -409,8 +445,7 @@ function Submenu({ node, ctx }) {
   const [open, setOpen] = useState(false);
   const [side, setSide] = useState("right");
   const show = (el) => {
-    const r = el.getBoundingClientRect();
-    setSide(r.right + look.width + 8 > window.innerWidth ? "left" : "right");
+    setSide(flyoutSide(el, look.width));
     setOpen(true);
   };
   return /* @__PURE__ */ jsxs("div", { className: "cm-sub", onMouseEnter: (e) => show(e.currentTarget), onMouseLeave: () => setOpen(false), children: [
@@ -439,6 +474,63 @@ function Submenu({ node, ctx }) {
     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) {
@@ -965,6 +1057,7 @@ var SURFACE_LABELS = {
   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);
@@ -1040,6 +1133,8 @@ function nodeFromPayload(p) {
     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;
@@ -1193,7 +1288,7 @@ function MenuBuilder({ store, storeLabel, initialDesign, accountSlot }) {
     for (const v of versions ?? []) byId.set(v.designId, [...byId.get(v.designId) ?? [], v]);
     return [...byId.values()];
   }, [versions]);
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-dvh flex-col bg-background text-foreground", children: [
+  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 })) }),
@@ -1316,7 +1411,7 @@ function MenuBuilder({ store, storeLabel, initialDesign, accountSlot }) {
         children: dnd.ghost.label
       }
     )
-  ] });
+  ] }) });
 }
 function Panel({ title, children, right }) {
   return /* @__PURE__ */ jsxs2("section", { className: "border-b border-border p-3", children: [
@@ -1335,7 +1430,9 @@ function Palette({ onAdd, startDrag, click }) {
     const n = nodeFromPayload(p);
     if (n) onAdd(n);
   };
-  const Option = ({ p, icon, label, end }) => /* @__PURE__ */ jsx3(
+  const design2 = useContext(DesignContext);
+  const uses = useMemo2(() => catalogUseCounts(design2?.nodes ?? []), [design2?.nodes]);
+  const Option = ({ p, icon, label, end, dimmed }) => /* @__PURE__ */ jsx3(
     Tile2,
     {
       layout: "row",
@@ -1343,6 +1440,7 @@ function Palette({ onAdd, startDrag, click }) {
       icon: renderLucide(icon),
       title: label,
       end,
+      dimmed: dimmed === true,
       onPointerDown: (e) => startDrag(e, p, label),
       onClick: click(() => add(p))
     }
@@ -1355,14 +1453,27 @@ function Palette({ onAdd, startDrag, click }) {
           /* @__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: "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 items = CATALOG.filter((c) => c.group === g && shown(c));
+        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, ...c.status === "proposed" ? { end: /* @__PURE__ */ jsx3(Badge, { children: "new" }) } : {} }, c.id)) }, g);
+        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);
       })
     ] })
   ] });
@@ -1394,7 +1505,7 @@ function Rows(props) {
     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 === "section" ? "Rows3" : "Minus";
+    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",
@@ -1420,6 +1531,7 @@ function Rows(props) {
             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: [
@@ -1522,6 +1634,7 @@ function Stage({ design: design2, selected, onSelect }) {
       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(
@@ -1572,9 +1685,10 @@ var FLAGS = [
 ];
 function Inspector({ node, onChange }) {
   const catalog = node.catalogId ? catalogOption(node.catalogId) : void 0;
-  return /* @__PURE__ */ jsxs2(Panel, { title: `Selected ${node.kind}`, right: catalog ? /* @__PURE__ */ jsx3(Badge, { children: catalog.id }) : void 0, children: [
+  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 }) }) })
@@ -1591,6 +1705,37 @@ function Inspector({ node, onChange }) {
     /* @__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 }),