@particle-academy/fancy-flow 0.34.0 → 0.36.0

package/dist/index.cjs

@@ -1724,6 +1724,7 @@ var init_layout = __esm({
 var kinds = /* @__PURE__ */ new Map();
 var aliases = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
+var overrides = /* @__PURE__ */ new Map();
 function registerNodeKind(definition) {
   kinds.set(definition.name, definition);
   for (const alias of definition.aliases ?? []) aliases.set(alias, definition.name);
@@ -1743,15 +1744,41 @@ function resolveKindId(id2) {
   const canonical = aliases.get(id2);
   return canonical && kinds.has(canonical) ? canonical : null;
 }
+function overrideNodeKind(name, patch) {
+  const canonical = resolveKindId(name) ?? name;
+  const previous = overrides.get(canonical);
+  overrides.set(canonical, { ...previous, ...patch });
+  notify();
+  return () => {
+    if (previous) {
+      overrides.set(canonical, previous);
+    } else {
+      overrides.delete(canonical);
+    }
+    notify();
+  };
+}
+function clearNodeKindOverrides() {
+  if (overrides.size === 0) return;
+  overrides.clear();
+  notify();
+}
+function withOverride(kind) {
+  if (!kind) return null;
+  const patch = overrides.get(kind.name);
+  return patch ? { ...kind, ...patch } : kind;
+}
 function getNodeKind(name) {
   const canonical = resolveKindId(name);
-  return canonical ? kinds.get(canonical) ?? null : null;
+  return canonical ? withOverride(kinds.get(canonical)) : null;
 }
 function kindIds(kind) {
   return [kind.name, ...kind.aliases ?? []];
 }
 function listNodeKinds(category) {
-  const all = Array.from(kinds.values());
+  const all = Array.from(kinds.values()).map(
+    (k2) => withOverride(k2)
+  );
   return category ? all.filter((k2) => k2.category === category) : all;
 }
 function onNodeKindsChanged(listener) {
@@ -12384,13 +12411,13 @@ function alignNodes(nodes, edge) {
   const maxR = Math.max(...nodes.map((n) => n.position.x + nodeW(n)));
   const minT = Math.min(...nodes.map((n) => n.position.y));
   const maxB = Math.max(...nodes.map((n) => n.position.y + nodeH(n)));
-  const cx = (minL + maxR) / 2;
+  const cx2 = (minL + maxR) / 2;
   const cy = (minT + maxB) / 2;
   return nodes.map((n) => {
     let { x: x2, y } = n.position;
     if (edge === "left") x2 = minL;
     else if (edge === "right") x2 = maxR - nodeW(n);
-    else if (edge === "hcenter") x2 = cx - nodeW(n) / 2;
+    else if (edge === "hcenter") x2 = cx2 - nodeW(n) / 2;
     else if (edge === "top") y = minT;
     else if (edge === "bottom") y = maxB - nodeH(n);
     else if (edge === "vcenter") y = cy - nodeH(n) / 2;
@@ -14668,6 +14695,135 @@ function EdgeLabelEditor({
     }
   );
 }
+var STATUS_LABEL = {
+  ok: "ok",
+  running: "running",
+  failed: "failed",
+  skipped: "skipped",
+  pending: "pending"
+};
+function FlowViewer({
+  graph,
+  variant = "canvas",
+  height = 480,
+  showMinimap = false,
+  showControls = true,
+  statuses,
+  selectedNodeId = null,
+  onSelectNode,
+  className,
+  classNames = {},
+  style: style2,
+  empty: empty2
+}) {
+  const nodeTypes = ReactExports.useMemo(() => buildNodeTypes(), []);
+  const rows = ReactExports.useMemo(
+    () => graph.nodes.map((node, index2) => {
+      const kind = getNodeKind(node.data?.kind ?? node.type ?? "");
+      return {
+        node,
+        index: index2,
+        title: kind?.label ?? node.data?.label ?? node.data?.kind ?? node.id,
+        description: kind?.description ?? null,
+        accent: kind?.accent ?? categoryAccent(kind?.category ?? "custom"),
+        status: statuses?.[node.id] ?? null
+      };
+    }),
+    [graph.nodes, statuses]
+  );
+  if (graph.nodes.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("ff-viewer ff-viewer--empty", className, classNames.root), style: style2, children: empty2 ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-viewer__empty", children: "This flow has no nodes." }) });
+  }
+  if (variant === "list") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx("ff-viewer ff-viewer--list", className, classNames.root),
+        style: style2,
+        "data-flow-viewer": "list",
+        children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cx("ff-viewer__list", classNames.list), children: rows.map(({ node, index: index2, title, description, accent, status }) => {
+          const selected2 = node.id === selectedNodeId;
+          const Row = onSelectNode ? "button" : "div";
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Row,
+            {
+              ...onSelectNode ? { type: "button", onClick: () => onSelectNode(node) } : {},
+              className: cx(
+                "ff-viewer__row",
+                selected2 && "ff-viewer__row--selected",
+                onSelectNode && "ff-viewer__row--interactive",
+                classNames.row
+              ),
+              "data-flow-viewer-node": node.id,
+              "data-flow-viewer-status": status ?? void 0,
+              "aria-current": selected2 || void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cx("ff-viewer__index", classNames.rowIndex),
+                    style: { backgroundColor: accent },
+                    "aria-hidden": true,
+                    children: index2 + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ff-viewer__body", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("ff-viewer__title", classNames.rowTitle), children: title }),
+                  description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("ff-viewer__desc", classNames.rowDescription), children: description })
+                ] }),
+                status && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "ff-viewer__status",
+                      `ff-viewer__status--${status}`,
+                      classNames.rowStatus
+                    ),
+                    children: STATUS_LABEL[status]
+                  }
+                )
+              ]
+            }
+          ) }, node.id);
+        }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx("ff-viewer ff-viewer--canvas", className, classNames.root),
+      style: style2,
+      "data-flow-viewer": "canvas",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        FlowCanvas,
+        {
+          nodes: graph.nodes,
+          edges: graph.edges,
+          nodeTypes,
+          height,
+          showControls,
+          showMinimap,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          nodesFocusable: Boolean(onSelectNode),
+          edgesFocusable: false,
+          elementsSelectable: Boolean(onSelectNode),
+          deleteKeyCode: null,
+          selectionKeyCode: null,
+          multiSelectionKeyCode: null,
+          connectOnClick: false,
+          zoomOnScroll: false,
+          onNodeClick: onSelectNode ? (_2, node) => onSelectNode(node) : void 0,
+          fitView: true
+        }
+      )
+    }
+  );
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
 function defineNode(render) {
   function Wrapped(props) {
     return render({
@@ -14761,6 +14917,7 @@ exports.FlowCanvas = FlowCanvas;
 exports.FlowEditor = FlowEditor;
 exports.FlowRunControls = FlowRunControls;
 exports.FlowRunFeed = FlowRunFeed;
+exports.FlowViewer = FlowViewer;
 exports.LEGACY_PAUSE_PREFIXES = LEGACY_PAUSE_PREFIXES;
 exports.LaneNode = LaneNode;
 exports.NodeConfigPanel = NodeConfigPanel;
@@ -14781,6 +14938,7 @@ exports.applyOutputsToNodes = applyOutputsToNodes;
 exports.applyStatusesToNodes = applyStatusesToNodes;
 exports.buildNodeTypes = buildNodeTypes;
 exports.categoryAccent = categoryAccent;
+exports.clearNodeKindOverrides = clearNodeKindOverrides;
 exports.cloneSubgraph = cloneSubgraph;
 exports.createConnectionValidator = createConnectionValidator;
 exports.createHistory = createHistory;
@@ -14801,6 +14959,7 @@ exports.listNodeKinds = listNodeKinds;
 exports.migrateSchema = migrateSchema;
 exports.onNodeKindsChanged = onNodeKindsChanged;
 exports.onRichInputAdapterChanged = onRichInputAdapterChanged;
+exports.overrideNodeKind = overrideNodeKind;
 exports.paletteDropHandlers = paletteDropHandlers;
 exports.pauseForHuman = pauseForHuman;
 exports.reconnectEdge = reconnectEdge3;