@ai-matrx/context-menu 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,6 +1,28 @@
 "use client";
 
 // src/design/model.ts
+var MENU_TONES = [
+  "default",
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "destructive",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "fuchsia",
+  "rose",
+  "orange",
+  "amber",
+  "lime",
+  "emerald",
+  "teal",
+  "cyan",
+  "slate"
+];
+var UNAVAILABLE_MODES = ["disable", "hide", "required"];
 var MENU_SURFACES = [
   "text-selection",
   "editable-field",
@@ -312,54 +334,92 @@ function slotOptions(fills, placed) {
 }
 
 // src/design/MenuPreview.tsx
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, 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 searchable(node) {
+  if (node.kind === "divider" || node.kind === "search") return "";
+  const hint = node.kind === "item" || node.kind === "submenu" ? node.hint ?? "" : "";
+  return [node.label, hint, ...node.keywords ?? []].join(" ").toLowerCase();
 }
-function flatten(nodes, q, out = []) {
+function searchMenu(nodes, q, trail = [], out = []) {
+  const words = q.split(/\s+/).filter(Boolean);
   for (const n of nodes) {
-    if (n.kind === "item" && matches(n, q)) out.push(n);
-    else if (isContainer(n)) flatten(n.children, q, out);
+    if (n.kind === "item") {
+      const text = `${searchable(n)} ${trail.join(" ").toLowerCase()}`;
+      if (words.every((w) => text.includes(w))) out.push({ node: n, path: trail.join(" \u203A ") });
+    } else if (isContainer(n)) {
+      searchMenu(n.children, q, n.kind === "submenu" ? [...trail, n.label] : n.label ? [...trail, n.label] : trail, out);
+    }
   }
   return out;
 }
-function MenuPreview({ design, renderIcon, highlightId, onSelectNode, onPick, className, style }) {
+function MenuPreview({ design, renderIcon, highlightId, onSelectNode, onPick, availability = "available", 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 })
-      ]
-    }
-  );
+  const ctx = { design, renderIcon, highlightId, onSelectNode, onPick, placed, availability, query, setQuery };
+  const searchAt = design.nodes.findIndex((n) => n.kind === "search");
+  const topSearch = searchAt < 0 && look.search ? { id: "look-search", kind: "search", placeholder: "Type to filter\u2026", autofocus: true } : null;
+  const hits = useMemo(() => q ? searchMenu(design.nodes, q) : null, [design.nodes, q]);
+  const above = searchAt >= 0 ? design.nodes.slice(0, searchAt) : [];
+  return /* @__PURE__ */ jsxs("div", { role: "menu", "data-density": look.density, className: `cm-menu ${className ?? ""}`, style: { width: look.width, ...style }, children: [
+    topSearch && /* @__PURE__ */ jsx(SearchBox, { node: topSearch, ctx }),
+    design.nodes.length === 0 && !topSearch ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "Empty menu \u2014 drag options in" }) : hits ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Nodes, { nodes: above, ctx }),
+      searchAt >= 0 && /* @__PURE__ */ jsx(SearchBox, { node: design.nodes[searchAt], ctx }),
+      hits.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cm-empty", children: "No matches" }) : hits.map((h) => /* @__PURE__ */ jsx(Item, { node: h.node, ctx, path: h.path }, h.node.id))
+    ] }) : /* @__PURE__ */ jsx(Nodes, { nodes: design.nodes, ctx })
+  ] });
+}
+function SearchBox({ node, ctx }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (node.autofocus) ref.current?.focus({ preventScroll: true });
+  }, [node.autofocus]);
+  return /* @__PURE__ */ jsxs("div", { className: `cm-search ${ctx.highlightId === node.id ? "cm-hl" : ""}`, onClick: () => ctx.onSelectNode?.(node.id), children: [
+    ctx.renderIcon("Search", "cm-icon"),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        value: ctx.query,
+        onChange: (e) => ctx.setQuery(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && ctx.query) {
+            e.stopPropagation();
+            ctx.setQuery("");
+          }
+        },
+        placeholder: node.placeholder || "Type to filter\u2026",
+        "aria-label": "Filter menu"
+      }
+    )
+  ] });
+}
+function shown(node, ctx) {
+  if (ctx.availability === "available" || !node.unavailableWhen) {
+    return { hidden: false, greyed: node.kind === "item" && Boolean(node.disabled) };
+  }
+  const mode = node.unavailable ?? "disable";
+  if (mode === "hide") return { hidden: true, greyed: false };
+  if (mode === "required") return { hidden: false, greyed: false };
+  return { hidden: false, greyed: true };
 }
 function Nodes({ nodes, ctx }) {
   return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((n) => {
+    if (shown(n, ctx).hidden) return null;
     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);
+    if (n.kind === "slot") return n.shape === "feature" ? /* @__PURE__ */ jsx(FeatureSlot, { node: n, ctx }, n.id) : /* @__PURE__ */ jsx(Slot, { node: n, ctx }, n.id);
+    if (n.kind === "search") return /* @__PURE__ */ jsx(SearchBox, { node: n, ctx }, n.id);
     return /* @__PURE__ */ jsx(Section, { node: n, ctx }, n.id);
   }) });
 }
+function toneAttrs(tone, toneLabel) {
+  return tone && tone !== "default" ? { "data-tone": tone, ...toneLabel ? { "data-tone-label": "" } : {} } : {};
+}
 function Section({ node, ctx }) {
   const [open, setOpen] = useState(!node.collapsible);
   const layout = node.layout ?? "list";
@@ -381,11 +441,12 @@ function Section({ node, ctx }) {
       }
     ),
     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)
+      (c) => shown(c, ctx).hidden ? null : c.kind === "item" ? /* @__PURE__ */ jsx(Tile, { node: c, ctx }, c.id) : /* @__PURE__ */ jsx(Nodes, { nodes: [c], ctx }, c.id)
     ) })
   ] });
 }
 function Tile({ node, ctx }) {
+  const { greyed } = shown(node, ctx);
   return (
     // ui-exception: a menu row of the menu component itself
     /* @__PURE__ */ jsx(
@@ -394,7 +455,8 @@ function Tile({ node, ctx }) {
         type: "button",
         role: "menuitem",
         title: node.label + (node.shortcut ? `  ${node.shortcut}` : ""),
-        disabled: node.disabled,
+        disabled: greyed,
+        ...toneAttrs(node.tone, node.toneLabel),
         className: `cm-tile ${node.danger ? "cm-danger" : ""} ${node.ai ? "cm-ai" : ""} ${ctx.highlightId === node.id ? "cm-hl" : ""}`,
         onClick: () => {
           ctx.onSelectNode?.(node.id);
@@ -405,31 +467,37 @@ function Tile({ node, ctx }) {
     )
   );
 }
-function Item({ node, ctx }) {
+function Item({ node, ctx, path }) {
   const { look } = ctx.design;
-  const [checked, setChecked] = useState(false);
+  const [checked, setChecked] = useState(Boolean(node.defaultOn));
+  useEffect(() => setChecked(Boolean(node.defaultOn)), [node.defaultOn]);
+  const { greyed } = shown(node, ctx);
+  const settable = node.toggle || node.switch;
+  const hint = path || (look.showHints ? node.hint : void 0);
   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,
+        role: settable ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": settable ? checked : void 0,
+        disabled: greyed,
+        ...toneAttrs(node.tone, node.toneLabel),
         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);
+          if (settable) 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 })
+            hint && /* @__PURE__ */ jsx("span", { className: "cm-hint", children: hint })
           ] }),
-          look.showShortcuts && node.shortcut && /* @__PURE__ */ jsx("kbd", { className: "cm-shortcut", children: node.shortcut })
+          look.showShortcuts && node.shortcut && !node.switch && /* @__PURE__ */ jsx("kbd", { className: "cm-shortcut", children: node.shortcut }),
+          node.switch && /* @__PURE__ */ jsx("span", { className: "cm-switch", "data-on": checked ? "" : void 0, "aria-hidden": "true" })
         ]
       }
     )
@@ -439,35 +507,46 @@ 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 }) })
-  ] });
+  const { greyed } = shown(node, ctx);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cm-sub",
+      onMouseEnter: (e) => {
+        if (greyed) return;
+        setSide(flyoutSide(e.currentTarget, look.width));
+        setOpen(true);
+      },
+      onMouseLeave: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            disabled: greyed,
+            ...toneAttrs(node.tone, node.toneLabel),
+            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();
@@ -476,37 +555,42 @@ function flyoutSide(row, width) {
   if (r.left - width - 8 >= bounds.left) return "left";
   return "below";
 }
-function Slot({ node, ctx }) {
+function SlotRow({ node, ctx, label, icon, count, more, onOpen }) {
   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 = (
+  return (
     // 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,
+        "aria-haspopup": more ? "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);
+          onOpen?.();
         },
         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")
+          look.showIcons && /* @__PURE__ */ jsx("span", { className: "cm-icon-slot", children: ctx.renderIcon(icon, "cm-icon") }),
+          /* @__PURE__ */ jsx("span", { className: "cm-text", children: /* @__PURE__ */ jsx("span", { className: "cm-label", children: label }) }),
+          count && /* @__PURE__ */ jsx("span", { className: "cm-count", children: count }),
+          more && ctx.renderIcon("ChevronRight", "cm-icon cm-chev")
         ]
       }
     )
   );
-  if (node.shape === "items") return row;
+}
+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 icon = node.icon ?? source?.icon ?? "Ellipsis";
+  const count = source?.runtime ? "live" : String(options.length);
+  if (node.shape === "items") return /* @__PURE__ */ jsx(SlotRow, { node, ctx, label: node.label, icon, count });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -517,24 +601,60 @@ function Slot({ node, ctx }) {
       },
       onMouseLeave: () => setOpen(false),
       children: [
-        row,
+        /* @__PURE__ */ jsx(SlotRow, { node, ctx, label: node.label, icon, count, more: true, onOpen: () => setOpen(true) }),
         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)) })
+        ] }) : 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
+        )) })
       ]
     }
   );
 }
+function FeatureSlot({ node, ctx }) {
+  const { look } = ctx.design;
+  const n = Math.max(0, Math.min(12, node.featureItems ?? 4));
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState("right");
+  return /* @__PURE__ */ jsxs("div", { className: `cm-section ${ctx.highlightId === node.id ? "cm-hl" : ""}`, "data-layout": "list", children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: "cm-section-label cm-slot-label", onClick: () => ctx.onSelectNode?.(node.id), children: node.label || "This feature" }),
+    /* @__PURE__ */ jsxs("div", { className: "cm-section-body", children: [
+      Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx(SlotRow, { node, ctx, label: `Feature option ${i + 1}`, icon: "Circle" }, i)),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cm-sub",
+          onMouseEnter: (e) => {
+            setSide(flyoutSide(e.currentTarget, look.width));
+            setOpen(true);
+          },
+          onMouseLeave: () => setOpen(false),
+          children: [
+            /* @__PURE__ */ jsx(SlotRow, { node, ctx, label: "More", icon: "Ellipsis", more: true, onOpen: () => setOpen(true) }),
+            open && /* @__PURE__ */ jsx("div", { role: "menu", className: "cm-menu cm-flyout", "data-side": side, "data-density": look.density, style: { width: look.width }, children: /* @__PURE__ */ jsx("div", { className: "cm-runtime", children: "The rest of this feature's options, filled at runtime" }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
 export {
   CATALOG,
   CATALOG_GROUPS,
   DEFAULT_LOOK,
   DESIGN_FORMAT,
   MENU_SURFACES,
+  MENU_TONES,
   MenuPreview,
   SLOT_SOURCES,
   TEMPLATES,
+  UNAVAILABLE_MODES,
   canMove,
   catalogOption,
   catalogUseCounts,