@ai-matrx/alchemy 0.6.2 → 0.8.2

package/dist/react-overflow.js

@@ -0,0 +1,571 @@
+"use client";
+
+// src/react/overflow.tsx
+import * as React4 from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, TooltipProvider } from "@ai-matrx/design-system";
+
+// src/menu/layouts.ts
+var INLINE_SECTION_MAX = 3;
+function sectionLabel(section) {
+  return section.label ?? null;
+}
+function fold(section) {
+  return {
+    kind: "submenu",
+    id: `${section.id}:fold`,
+    label: section.label,
+    ...section.icon !== void 0 ? { icon: section.icon } : {},
+    children: section.nodes
+  };
+}
+function rowCount(nodes) {
+  return nodes.filter((n) => n.kind !== "separator" && n.kind !== "label").length;
+}
+function foldNamed(sections) {
+  return sections.map(
+    (s) => s.label && !s.primary && rowCount(s.nodes) > INLINE_SECTION_MAX ? { id: s.id, group: s.group, nodes: [fold({ ...s, label: s.label })] } : s
+  );
+}
+function overflow(model) {
+  return foldNamed(model.sections);
+}
+
+// src/react/engine.tsx
+import * as React2 from "react";
+
+// src/declare/sensitivity.ts
+var DEFAULT_SENSITIVITY = Object.freeze({
+  exportable: true,
+  classification: "ordinary",
+  includedByDefault: true
+});
+function resolveSensitivity(value) {
+  return {
+    exportable: value.sensitivity?.exportable ?? DEFAULT_SENSITIVITY.exportable,
+    classification: value.sensitivity?.classification ?? DEFAULT_SENSITIVITY.classification,
+    includedByDefault: value.sensitivity?.includedByDefault ?? DEFAULT_SENSITIVITY.includedByDefault
+  };
+}
+
+// src/actions/projection.ts
+function toJson(value) {
+  if (value === void 0 || typeof value === "function" || typeof value === "symbol") return void 0;
+  if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "bigint") return value.toString();
+  if (value instanceof Date) return value.toISOString();
+  if (Array.isArray(value)) return value.map((v) => toJson(v) ?? null);
+  if (typeof value === "object") {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      const j = toJson(v);
+      if (j !== void 0) out[k] = j;
+    }
+    return out;
+  }
+  return void 0;
+}
+function projectValues(raw, declared, pathPrefix = "") {
+  const byName = new Map(declared.map((d) => [d.name, d]));
+  const values = {};
+  const omissions = [];
+  for (const [name, value] of Object.entries(raw)) {
+    const path = pathPrefix ? `${pathPrefix}.${name}` : name;
+    const decl = byName.get(name);
+    if (!decl) {
+      omissions.push({ path, reason: "filtered" });
+      continue;
+    }
+    const sensitivity = resolveSensitivity(decl);
+    if (sensitivity.classification !== "ordinary") {
+      omissions.push({ path, reason: "excluded", classification: sensitivity.classification });
+      continue;
+    }
+    if (!sensitivity.exportable) {
+      omissions.push({ path, reason: "excluded" });
+      continue;
+    }
+    const json = toJson(value);
+    if (json === void 0) continue;
+    values[name] = json;
+  }
+  return { values, omissions };
+}
+function createProjectedReads(source) {
+  return {
+    async values(signal) {
+      if (!source.surface || !source.declaration) return { values: {}, omissions: [] };
+      const raw = await source.surface.readValues(signal);
+      const screenValues = source.declaration.values;
+      return projectValues(raw, screenValues);
+    },
+    async item(signal) {
+      const item = source.item;
+      if (!item || !source.declaration) return null;
+      const type = source.declaration.itemTypes?.find((t) => t.name === item.itemType);
+      if (!type) return { values: {}, omissions: [{ path: item.itemType, reason: "filtered" }] };
+      const raw = await item.readValues(signal);
+      return projectValues(raw, type.values, item.itemType);
+    },
+    async live(signal) {
+      if (!source.surface?.readLive) return {};
+      return source.surface.readLive(signal);
+    }
+  };
+}
+
+// src/actions/run.ts
+async function runAction(action, target, options) {
+  const { ports } = options;
+  if (action.requiresAuth && !target.auth.authenticated) {
+    if (!ports.auth) {
+      ports.diagnostics.capture(new Error(`requiresAuth action "${action.id}" ran signed out with no auth port`), {
+        area: "actions",
+        detail: { actionId: action.id }
+      });
+      return { status: "failed", error: new Error("sign-in unavailable") };
+    }
+    ports.auth.signInThenResume({ actionId: action.id, contentFingerprint: options.contentFingerprint ?? action.id });
+    return { status: "auth-pending" };
+  }
+  const reads = createProjectedReads(options.source ?? { surface: null, declaration: target.declaration, item: null });
+  const signal = options.signal ?? new AbortController().signal;
+  try {
+    const outcome = await action.run(target, { reads, ports, signal });
+    return { status: "ran", outcome };
+  } catch (error) {
+    ports.diagnostics.capture(error, { area: "actions", detail: { actionId: action.id, stage: "run" } });
+    const label = typeof action.label === "string" ? action.label : action.id;
+    ports.notify?.error(`${label} did not finish.`, "Try again; if it keeps failing, report it from the feedback button.");
+    return { status: "failed", error };
+  }
+}
+
+// src/menu/model.ts
+var CATEGORY_GROUP = {
+  clipboard: "clipboard",
+  copy: "transfer",
+  export: "transfer",
+  save: "document",
+  share: "document",
+  edit: "editable",
+  history: "history",
+  ai: "ai",
+  ask: "ai",
+  listen: "tools",
+  study: "tools",
+  app: "tools",
+  feedback: "quick",
+  creator: "admin",
+  admin: "admin",
+  "surface-info": "surface-info"
+};
+var GROUP_ORDER = [
+  "clipboard",
+  "editable",
+  "transfer",
+  "document",
+  "history",
+  "ai",
+  "tools",
+  "quick",
+  "surface",
+  "admin",
+  "surface-info"
+];
+var CATEGORY_ORDER = [
+  "clipboard",
+  "edit",
+  "copy",
+  "export",
+  "save",
+  "share",
+  "history",
+  "ask",
+  "ai",
+  "listen",
+  "study",
+  "app",
+  "feedback",
+  "creator",
+  "admin",
+  "surface-info"
+];
+function translate(i18n, key, fallback) {
+  if (!i18n) return fallback;
+  try {
+    return i18n.t(key, fallback);
+  } catch {
+    return fallback;
+  }
+}
+function actionToNode(resolved, target, options = {}) {
+  const { action, eligibility } = resolved;
+  const rawLabel = typeof action.label === "function" ? action.label(target) : action.label;
+  const label = translate(options.i18n, action.labelKey ?? action.id, rawLabel);
+  const base = {
+    id: action.id,
+    actionId: action.id,
+    ...action.icon !== void 0 ? { icon: action.icon } : {},
+    ...action.placement !== void 0 ? { placement: action.placement } : {}
+  };
+  if (action.expand) {
+    const node = {
+      ...base,
+      kind: "submenu",
+      label,
+      lazy: true,
+      loading: false,
+      children: [],
+      ...action.emptyLabel !== void 0 ? { emptyLabel: action.emptyLabel } : {}
+    };
+    return node;
+  }
+  if (action.href !== void 0) {
+    const href = typeof action.href === "function" ? action.href(target) : action.href;
+    return { ...base, kind: "link", label, href };
+  }
+  if (action.toggle) {
+    return {
+      ...base,
+      kind: "checkbox",
+      label,
+      checked: action.pressed?.(target) ?? false,
+      ...action.description !== void 0 ? { description: action.description } : {}
+    };
+  }
+  const state = action.stateIcon?.(target) ?? null;
+  const pressed = action.pressed?.(target);
+  const hint = action.hint !== void 0 ? translate(options.i18n, action.hintKey ?? `${action.id}.hint`, action.hint) : void 0;
+  return {
+    ...base,
+    kind: "item",
+    label,
+    ...action.iconTone !== void 0 ? { iconTone: action.iconTone } : {},
+    ...state ? { stateIcon: state } : {},
+    ...action.description !== void 0 ? { description: action.description } : {},
+    ...hint !== void 0 ? { hint } : {},
+    ...pressed !== void 0 ? { pressed } : {},
+    ...action.destructive ? { destructive: true } : {},
+    ...action.preserveSelection ? { preserveSelection: true } : {},
+    ...eligibility.status === "unavailable-verb" ? { unavailable: { sentence: eligibility.sentence } } : {}
+  };
+}
+function buildMenuModel(target, resolved, options = {}) {
+  const ordered = resolved.map((r, index) => ({ r, index })).sort((a, b) => {
+    const ca = CATEGORY_ORDER.indexOf(a.r.action.category);
+    const cb = CATEGORY_ORDER.indexOf(b.r.action.category);
+    if (ca !== cb) return ca - cb;
+    const oa = a.r.action.order ?? 0;
+    const ob = b.r.action.order ?? 0;
+    if (oa !== ob) return oa - ob;
+    return a.index - b.index;
+  }).map((x) => x.r);
+  const sections = /* @__PURE__ */ new Map();
+  const roles = {};
+  const explicit = /* @__PURE__ */ new Map();
+  resolved.forEach((r, index) => {
+    const sec = r.action.section;
+    if (!sec) return;
+    const entry = explicit.get(sec.id) ?? { group: CATEGORY_GROUP[r.action.category], rows: [] };
+    entry.rows.push({ r, index });
+    explicit.set(sec.id, entry);
+  });
+  const placed = /* @__PURE__ */ new Set();
+  for (const r of ordered) {
+    const sec = r.action.section;
+    if (sec && placed.has(sec.id)) continue;
+    const group = sec ? explicit.get(sec.id)?.group ?? CATEGORY_GROUP[r.action.category] : CATEGORY_GROUP[r.action.category];
+    const sectionId = sec ? `section:${sec.id}` : group;
+    let section = sections.get(sectionId);
+    if (!section) {
+      section = {
+        id: sectionId,
+        group,
+        nodes: [],
+        ...sec ? { label: translate(options.i18n, sec.labelKey ?? `section.${sec.id}`, sec.label) } : {},
+        ...sec?.icon !== void 0 ? { icon: sec.icon } : {},
+        ...sec?.primary ? { primary: true } : {}
+      };
+      sections.set(sectionId, section);
+    }
+    const rows = sec ? (explicit.get(sec.id)?.rows ?? []).sort((x, y) => (x.r.action.order ?? 0) - (y.r.action.order ?? 0) || x.index - y.index).map((x) => x.r) : [r];
+    if (sec) placed.add(sec.id);
+    for (const row of rows) {
+      section.nodes.push(actionToNode(row, target, options));
+      if (row.action.verb) roles[row.action.verb] = row.action.id;
+    }
+  }
+  const list = [...sections.values()].sort((a, b) => {
+    if (Boolean(a.primary) !== Boolean(b.primary)) return a.primary ? -1 : 1;
+    return GROUP_ORDER.indexOf(a.group) - GROUP_ORDER.indexOf(b.group);
+  });
+  const selected = target.selection?.text?.trim();
+  const content = options.content?.trim();
+  const header = selected ? { label: "Selected", text: target.selection?.text ?? "" } : content ? { label: "Content", text: options.content ?? "" } : null;
+  return { header, sections: list, roles };
+}
+function withExpandedChildren(model, nodeId, children) {
+  const visit = (nodes) => nodes.map((n) => {
+    if (n.kind !== "submenu") return n;
+    if (n.id === nodeId) {
+      return children === "loading" ? { ...n, loading: true } : { ...n, lazy: false, loading: false, children };
+    }
+    return { ...n, children: visit(n.children) };
+  });
+  return { ...model, sections: model.sections.map((s) => ({ ...s, nodes: visit(s.nodes) })) };
+}
+function findNode(nodes, id) {
+  for (const n of nodes) {
+    if (n.id === id) return n;
+    if (n.kind === "submenu") {
+      const hit = findNode(n.children, id);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+// src/react/context.ts
+import * as React from "react";
+var KEY = /* @__PURE__ */ Symbol.for("ai-matrx.alchemy.actions-context");
+var AlchemyActionsContext = globalThis[KEY] ??= React.createContext(null);
+function useAlchemyActions() {
+  const value = React.useContext(AlchemyActionsContext);
+  if (!value) throw new Error("Alchemy actions: render inside <AlchemyActionsProvider> (@ai-matrx/alchemy/react/host).");
+  return value;
+}
+
+// src/react/engine.tsx
+import { jsx } from "react/jsx-runtime";
+function useMenuEngine(target, options = {}) {
+  const { registry, ports } = useAlchemyActions();
+  const [resolved, setResolved] = React2.useState([]);
+  const [model, setModel] = React2.useState(null);
+  const [tick, setTick] = React2.useState(0);
+  const expanded = React2.useRef(/* @__PURE__ */ new Map());
+  const active = options.active ?? true;
+  const optionsRef = React2.useRef(options);
+  optionsRef.current = options;
+  React2.useEffect(() => registry.subscribe(() => setTick((t) => t + 1)), [registry]);
+  React2.useEffect(() => {
+    if (!target || !active) return;
+    let live = true;
+    void registry.resolve(target, optionsRef.current.restrict).then((list) => {
+      if (!live) return;
+      expanded.current.clear();
+      setResolved(list);
+      setModel(buildMenuModel(target, list, { ...ports.i18n ? { i18n: ports.i18n } : {}, content: optionsRef.current.content ?? null }));
+    });
+    return () => {
+      live = false;
+    };
+  }, [registry, ports, target, active, tick, options.revision]);
+  React2.useEffect(() => {
+    if (!target) return;
+    const offs = resolved.map((r) => r.action.subscribe?.(() => setTick((t) => t + 1), target)).filter((off) => typeof off === "function");
+    return () => offs.forEach((off) => off());
+  }, [resolved, target]);
+  const findAction = React2.useCallback(
+    (id) => resolved.find((r) => r.action.id === id)?.action ?? expanded.current.get(id),
+    [resolved]
+  );
+  const run = React2.useCallback(
+    async (nodeId) => {
+      if (!target || !model) return null;
+      const node = model.sections.map((s) => findNode(s.nodes, nodeId)).find(Boolean) ?? null;
+      const action = findAction(node && "actionId" in node && node.actionId ? node.actionId : nodeId);
+      if (!action) return null;
+      const o = optionsRef.current;
+      const result = await runAction(action, target, {
+        ports,
+        ...o.source ? { source: o.source } : {},
+        ...o.contentFingerprint ? { contentFingerprint: o.contentFingerprint } : {}
+      });
+      o.onRan?.(nodeId, result);
+      return result;
+    },
+    [target, model, findAction, ports]
+  );
+  const expand = React2.useCallback(
+    async (nodeId) => {
+      const action = findAction(nodeId);
+      if (!target || !action?.expand) return;
+      setModel((m) => m ? withExpandedChildren(m, nodeId, "loading") : m);
+      try {
+        const children = await action.expand(target, new AbortController().signal);
+        const nodes = children.map((child) => {
+          expanded.current.set(child.id, child);
+          return actionToNode({ action: child, eligibility: { status: "available" } }, target, ports.i18n ? { i18n: ports.i18n } : {});
+        });
+        setModel((m) => m ? withExpandedChildren(m, nodeId, nodes) : m);
+      } catch (error) {
+        ports.diagnostics.capture(error, { area: "menu", detail: { nodeId, stage: "expand" } });
+        setModel((m) => m ? withExpandedChildren(m, nodeId, []) : m);
+      }
+    },
+    [findAction, target, ports]
+  );
+  const icon = React2.useCallback(
+    (key, tone) => {
+      if (!key || !ports.icons) return null;
+      const Resolved = ports.icons.resolve(key);
+      return Resolved ? /* @__PURE__ */ jsx(Resolved, { className: `h-4 w-4 shrink-0 ${tone ?? ""}`, "aria-hidden": true }) : null;
+    },
+    [ports.icons]
+  );
+  return { model, resolved, run, expand, icon };
+}
+
+// src/react/dropdown-nodes.tsx
+import * as React3 from "react";
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "@ai-matrx/design-system";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function NodeList({ nodes, engine }) {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: nodes.map((node) => /* @__PURE__ */ jsx2(MenuNodeView, { node, engine }, node.id)) });
+}
+function SectionList({
+  sections,
+  engine
+}) {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: sections.map((section, index) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+    index > 0 ? /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}) : null,
+    sectionLabel(section) ? /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground", children: sectionLabel(section) }) : null,
+    /* @__PURE__ */ jsx2(NodeList, { nodes: section.nodes, engine })
+  ] }, section.id)) });
+}
+function iconOf(node, engine) {
+  if (node.kind === "item" && node.stateIcon) {
+    const glyph = engine.icon(node.stateIcon.icon);
+    return node.stateIcon.spin ? /* @__PURE__ */ jsx2("span", { className: "inline-flex animate-spin", children: glyph }) : glyph;
+  }
+  if (!("icon" in node)) return null;
+  return engine.icon(node.icon, node.kind === "item" ? node.iconTone : void 0);
+}
+function MenuNodeView({ node, engine }) {
+  switch (node.kind) {
+    case "separator":
+      return /* @__PURE__ */ jsx2(DropdownMenuSeparator, {});
+    case "label":
+      return /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground", children: node.label });
+    case "submenu":
+      return /* @__PURE__ */ jsxs(
+        DropdownMenuSub,
+        {
+          onOpenChange: (open) => {
+            if (open && node.lazy && !node.loading) void engine.expand(node.id);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { "data-alchemy-node": node.id, className: "gap-2", children: [
+              iconOf(node, engine),
+              /* @__PURE__ */ jsx2("span", { className: "truncate", children: node.label })
+            ] }),
+            /* @__PURE__ */ jsx2(DropdownMenuSubContent, { className: "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", children: node.loading ? /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Loading\u2026" }) : node.children.length === 0 && !node.lazy ? /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: node.emptyLabel ?? "Nothing here yet" }) : /* @__PURE__ */ jsx2(NodeList, { nodes: node.children, engine }) })
+          ]
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsxs(
+        DropdownMenuCheckboxItem,
+        {
+          "data-alchemy-node": node.id,
+          checked: node.checked,
+          onSelect: () => void engine.run(node.id),
+          className: "gap-2",
+          children: [
+            iconOf(node, engine),
+            /* @__PURE__ */ jsx2("span", { className: "truncate", children: node.label })
+          ]
+        }
+      );
+    case "link":
+      return /* @__PURE__ */ jsx2(DropdownMenuItem, { asChild: true, "data-alchemy-node": node.id, children: /* @__PURE__ */ jsxs("a", { href: node.href, target: node.target, className: "gap-2", children: [
+        iconOf(node, engine),
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: node.label })
+      ] }) });
+    case "item":
+      return /* @__PURE__ */ jsx2(LeafItem, { node, engine });
+  }
+}
+function LeafItem({ node, engine }) {
+  const row = /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      "data-alchemy-node": node.id,
+      "aria-disabled": node.unavailable ? true : void 0,
+      "aria-pressed": node.pressed,
+      onSelect: (event) => {
+        if (node.unavailable) {
+          event.preventDefault();
+          return;
+        }
+        void engine.run(node.id);
+      },
+      className: `gap-2 ${node.unavailable ? "opacity-50" : ""} ${node.destructive ? "text-destructive" : ""}`,
+      children: [
+        iconOf(node, engine),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx2("span", { className: "truncate", children: node.label }),
+          node.description ? /* @__PURE__ */ jsx2("span", { className: "truncate text-xs text-muted-foreground", children: node.description }) : null
+        ] }),
+        node.hint ? /* @__PURE__ */ jsx2("span", { className: "ml-auto text-xs text-muted-foreground", children: node.hint }) : null
+      ]
+    }
+  );
+  if (!node.unavailable) return row;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: row }),
+    /* @__PURE__ */ jsx2(TooltipContent, { children: node.unavailable.sentence })
+  ] });
+}
+
+// src/react/overflow.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function OverflowMenu({ target, trigger, align = "end", eager = false, ...options }) {
+  const [open, setOpen] = React4.useState(false);
+  const [opened, setOpened] = React4.useState(eager);
+  const engine = useMenuEngine(target, { ...options, active: opened || open });
+  return /* @__PURE__ */ jsxs2(
+    DropdownMenu,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (next) setOpened(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More actions",
+            "data-alchemy-trigger": "overflow",
+            className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "text-base leading-none", children: "\u22EF" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(DropdownMenuContent, { align, className: "w-64 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", children: /* @__PURE__ */ jsx3(OverflowSections, { engine }) })
+      ]
+    }
+  );
+}
+function OverflowSections({ engine }) {
+  if (!engine.model) return /* @__PURE__ */ jsx3("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsx3(SectionList, { sections: overflow(engine.model), engine }) });
+}
+export {
+  OverflowMenu,
+  OverflowSections
+};
+//# sourceMappingURL=react-overflow.js.map