@particle-academy/fancy-flow 0.35.0 → 0.37.0

package/dist/chunk-5UCWY7G3.js

@@ -0,0 +1,593 @@
+import { NoteNode, createConnectionValidator, buildNodeTypes } from './chunk-UX65ML3J.js';
+import { Handle, Position, reconnectEdge, index, BackgroundVariant, Background, Controls, MiniMap, ViewportPortal } from './chunk-OWENS2H5.js';
+import { getNodeKind, categoryAccent } from './chunk-PVROYW7C.js';
+import { memo, useMemo, useRef, useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function NodeShellInner({
+  node,
+  accent,
+  tag,
+  icon,
+  showInputs = true,
+  showOutputs = true,
+  children
+}) {
+  const data = node.data;
+  const status = data.status ?? "idle";
+  const inputs = data.inputs ?? defaultInputs(showInputs);
+  const outputs = data.outputs ?? defaultOutputs(showOutputs);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ff-node", `ff-node--status-${status}`, node.selected ? "ff-node--selected" : ""].filter(Boolean).join(" "),
+      style: { borderColor: node.selected ? accent : void 0 },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "ff-node__header", style: { background: accent }, children: [
+          /* @__PURE__ */ jsx("span", { className: "ff-node__icon", "aria-hidden": true, children: icon ?? null }),
+          /* @__PURE__ */ jsx("span", { className: "ff-node__tag", children: tag }),
+          /* @__PURE__ */ jsx("span", { className: "ff-node__label", children: data.label }),
+          status !== "idle" && /* @__PURE__ */ jsx(StatusDot, { status })
+        ] }),
+        data.description && /* @__PURE__ */ jsx("p", { className: "ff-node__desc", children: data.description }),
+        children && /* @__PURE__ */ jsx("div", { className: "ff-node__body", children }),
+        data.statusText && /* @__PURE__ */ jsx("p", { className: "ff-node__status-text", children: data.statusText }),
+        inputs.map((p, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            id: p.id,
+            style: portStyle(i, inputs.length),
+            title: p.label ?? p.id
+          },
+          p.id
+        )),
+        outputs.map((p, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Right,
+            id: p.id,
+            style: portStyle(i, outputs.length),
+            title: p.label ?? p.id
+          },
+          p.id
+        ))
+      ]
+    }
+  );
+}
+var NodeShell = memo(NodeShellInner);
+function defaultInputs(show) {
+  return show ? [{ id: "in" }] : [];
+}
+function defaultOutputs(show) {
+  return show ? [{ id: "out" }] : [];
+}
+function portStyle(i, total) {
+  if (total <= 1) return {};
+  const slot = 100 / (total + 1) * (i + 1);
+  return { top: `${slot}%` };
+}
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsx("span", { className: `ff-node__dot ff-node__dot--${status}`, "aria-label": `status ${status}` });
+}
+function TriggerNodeInner(props) {
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#10b981", tag: "TRIGGER", icon: "\u26A1", showInputs: false });
+}
+var TriggerNode = memo(TriggerNodeInner);
+function ActionNodeInner(props) {
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#3b82f6", tag: "ACTION", icon: "\u25B8" });
+}
+var ActionNode = memo(ActionNodeInner);
+var DEFAULT_BRANCHES = [
+  { id: "true", label: "true" },
+  { id: "false", label: "false" }
+];
+function DecisionNodeInner(props) {
+  if (!props.data.outputs) {
+    props = { ...props, data: { ...props.data, outputs: DEFAULT_BRANCHES } };
+  }
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#f59e0b", tag: "DECISION", icon: "\u25C7" });
+}
+var DecisionNode = memo(DecisionNodeInner);
+function OutputNodeInner(props) {
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#a855f7", tag: "OUTPUT", icon: "\u25CF", showOutputs: false });
+}
+var OutputNode = memo(OutputNodeInner);
+function SubgraphNodeInner(props) {
+  const data = props.data;
+  const childCount = data.childIds?.length ?? 0;
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#0ea5e9", tag: "SUBGRAPH", icon: "\u2750", children: /* @__PURE__ */ jsxs("div", { className: "ff-subgraph__meta", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      childCount,
+      " node",
+      childCount === 1 ? "" : "s"
+    ] }),
+    /* @__PURE__ */ jsx("span", { children: data.collapsed === false ? "expanded" : "collapsed" })
+  ] }) });
+}
+var SubgraphNode = memo(SubgraphNodeInner);
+
+// src/components/nodes/index.ts
+var defaultNodeTypes = {
+  trigger: TriggerNode,
+  action: ActionNode,
+  decision: DecisionNode,
+  output: OutputNode,
+  note: NoteNode,
+  subgraph: SubgraphNode
+};
+
+// src/components/FlowEditor/graph-ops.ts
+function removeNodes(graph, ids) {
+  if (ids.length === 0) return graph;
+  const doomed = new Set(ids);
+  return {
+    nodes: graph.nodes.filter((n) => !doomed.has(n.id)),
+    edges: graph.edges.filter((e) => !doomed.has(e.source) && !doomed.has(e.target))
+  };
+}
+function removeEdges(edges, ids) {
+  if (ids.length === 0) return edges;
+  const doomed = new Set(ids);
+  return edges.filter((e) => !doomed.has(e.id));
+}
+function setEdgeLabel(edges, id, label) {
+  const next = label?.trim();
+  return edges.map((e) => {
+    if (e.id !== id) return e;
+    if (!next) {
+      const { label: _drop, ...rest } = e;
+      return rest;
+    }
+    return { ...e, label: next };
+  });
+}
+function duplicateNode(node, id, offset = 40) {
+  return {
+    ...node,
+    id,
+    position: { x: node.position.x + offset, y: node.position.y + offset },
+    // Deep copy so the clone's config edits don't mutate the original.
+    data: JSON.parse(JSON.stringify(node.data ?? {}))
+  };
+}
+function cloneSubgraph(nodes, edges, opts) {
+  const offset = opts.offset ?? 40;
+  const idMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) idMap.set(n.id, opts.makeId());
+  const clonedNodes = nodes.map((n) => {
+    const cloned = duplicateNode(n, idMap.get(n.id), offset);
+    const parentId = n.parentId;
+    if (parentId && idMap.has(parentId)) cloned.parentId = idMap.get(parentId);
+    else if (parentId) delete cloned.parentId;
+    return cloned;
+  });
+  const clonedEdges = edges.filter((e) => idMap.has(e.source) && idMap.has(e.target)).map((e) => ({ ...e, id: opts.makeId(), source: idMap.get(e.source), target: idMap.get(e.target) }));
+  return { nodes: clonedNodes, edges: clonedEdges, idMap };
+}
+function reconnectEdge2(edges, oldEdge, newConnection) {
+  return reconnectEdge(oldEdge, newConnection, edges, { shouldReplaceId: false });
+}
+var nodeW = (n) => n.width ?? n.measured?.width ?? 0;
+var nodeH = (n) => n.height ?? n.measured?.height ?? 0;
+function alignNodes(nodes, edge) {
+  if (nodes.length < 2) return nodes;
+  const minL = Math.min(...nodes.map((n) => n.position.x));
+  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 cx2 = (minL + maxR) / 2;
+  const cy = (minT + maxB) / 2;
+  return nodes.map((n) => {
+    let { x, y } = n.position;
+    if (edge === "left") x = minL;
+    else if (edge === "right") x = maxR - nodeW(n);
+    else if (edge === "hcenter") x = 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;
+    return { ...n, position: { x, y } };
+  });
+}
+function sortNodesParentFirst(nodes) {
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  const visit = (n) => {
+    if (seen.has(n.id)) return;
+    const pid = n.parentId;
+    if (pid && byId.has(pid) && !seen.has(pid)) visit(byId.get(pid));
+    seen.add(n.id);
+    out.push(n);
+  };
+  for (const n of nodes) visit(n);
+  return out;
+}
+function absolutePosition(node, nodes) {
+  const pid = node.parentId;
+  if (!pid) return node.position;
+  const parent = nodes.find((n) => n.id === pid);
+  return parent ? { x: node.position.x + parent.position.x, y: node.position.y + parent.position.y } : node.position;
+}
+function assignToLane(nodes, nodeId, laneId) {
+  if (nodeId === laneId) return nodes;
+  const node = nodes.find((n) => n.id === nodeId);
+  const lane = nodes.find((n) => n.id === laneId);
+  if (!node || !lane) return nodes;
+  const abs = absolutePosition(node, nodes);
+  const laneAbs = absolutePosition(lane, nodes);
+  const rel = { x: abs.x - laneAbs.x, y: abs.y - laneAbs.y };
+  return nodes.map((n) => n.id === nodeId ? { ...n, parentId: laneId, extent: "parent", position: rel } : n);
+}
+function removeFromLane(nodes, nodeId) {
+  const node = nodes.find((n) => n.id === nodeId);
+  if (!node || !node.parentId) return nodes;
+  const abs = absolutePosition(node, nodes);
+  return nodes.map((n) => {
+    if (n.id !== nodeId) return n;
+    const { parentId: _p, extent: _e, ...rest } = n;
+    return { ...rest, position: abs };
+  });
+}
+function distributeNodes(nodes, axis) {
+  if (nodes.length < 3) return nodes;
+  const size = (n) => axis === "h" ? nodeW(n) : nodeH(n);
+  const coord = (n) => axis === "h" ? n.position.x : n.position.y;
+  const sorted = [...nodes].sort((a, b) => coord(a) - coord(b));
+  const start = coord(sorted[0]);
+  const last = sorted[sorted.length - 1];
+  const end = coord(last) + size(last);
+  const totalSize = sorted.reduce((s, n) => s + size(n), 0);
+  const gap = (end - start - totalSize) / (sorted.length - 1);
+  const posById = /* @__PURE__ */ new Map();
+  let cursor = start;
+  for (const n of sorted) {
+    posById.set(n.id, cursor);
+    cursor += size(n) + gap;
+  }
+  return nodes.map((n) => {
+    const p = posById.get(n.id);
+    return { ...n, position: axis === "h" ? { ...n.position, x: p } : { ...n.position, y: p } };
+  });
+}
+
+// src/components/canvas/helper-lines.ts
+var w = (n) => n.width ?? n.measured?.width ?? 0;
+var h = (n) => n.height ?? n.measured?.height ?? 0;
+function getHelperLines(change, nodes, distance = 6) {
+  const result = { snapPosition: { x: void 0, y: void 0 } };
+  const a = nodes.find((n) => n.id === change.id);
+  if (!a || !change.position) return result;
+  const A = {
+    left: change.position.x,
+    right: change.position.x + w(a),
+    top: change.position.y,
+    bottom: change.position.y + h(a),
+    width: w(a),
+    height: h(a)
+  };
+  let vDist = distance;
+  let hDist = distance;
+  for (const b of nodes) {
+    if (b.id === a.id) continue;
+    const B = { left: b.position.x, right: b.position.x + w(b), top: b.position.y, bottom: b.position.y + h(b) };
+    const ll = Math.abs(A.left - B.left);
+    if (ll < vDist) {
+      result.snapPosition.x = B.left;
+      result.vertical = B.left;
+      vDist = ll;
+    }
+    const rr = Math.abs(A.right - B.right);
+    if (rr < vDist) {
+      result.snapPosition.x = B.right - A.width;
+      result.vertical = B.right;
+      vDist = rr;
+    }
+    const lr = Math.abs(A.left - B.right);
+    if (lr < vDist) {
+      result.snapPosition.x = B.right;
+      result.vertical = B.right;
+      vDist = lr;
+    }
+    const rl = Math.abs(A.right - B.left);
+    if (rl < vDist) {
+      result.snapPosition.x = B.left - A.width;
+      result.vertical = B.left;
+      vDist = rl;
+    }
+    const tt = Math.abs(A.top - B.top);
+    if (tt < hDist) {
+      result.snapPosition.y = B.top;
+      result.horizontal = B.top;
+      hDist = tt;
+    }
+    const bb = Math.abs(A.bottom - B.bottom);
+    if (bb < hDist) {
+      result.snapPosition.y = B.bottom - A.height;
+      result.horizontal = B.bottom;
+      hDist = bb;
+    }
+    const tb = Math.abs(A.top - B.bottom);
+    if (tb < hDist) {
+      result.snapPosition.y = B.bottom;
+      result.horizontal = B.bottom;
+      hDist = tb;
+    }
+    const bt = Math.abs(A.bottom - B.top);
+    if (bt < hDist) {
+      result.snapPosition.y = B.top - A.height;
+      result.horizontal = B.top;
+      hDist = bt;
+    }
+  }
+  return result;
+}
+function HelperLines({ horizontal, vertical }) {
+  if (horizontal === void 0 && vertical === void 0) return null;
+  return /* @__PURE__ */ jsxs(ViewportPortal, { children: [
+    vertical !== void 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ff-helper-line",
+        style: { position: "absolute", transform: `translateX(${vertical}px)`, top: -5e3, height: 1e4, width: 1, pointerEvents: "none" }
+      }
+    ),
+    horizontal !== void 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ff-helper-line",
+        style: { position: "absolute", transform: `translateY(${horizontal}px)`, left: -5e3, width: 1e4, height: 1, pointerEvents: "none" }
+      }
+    )
+  ] });
+}
+function preventScrollWhileZooming(event) {
+  if (event.shiftKey) event.preventDefault();
+}
+function wheelZoomProps(zoomOnWheel) {
+  return zoomOnWheel ? { zoomActivationKeyCode: null, preventScrolling: true } : {
+    zoomActivationKeyCode: "Shift",
+    preventScrolling: false,
+    onWheelCapture: preventScrollWhileZooming
+  };
+}
+var DEFAULT_FIT_VIEW = { padding: 0.2 };
+var DEFAULT_EDGE_OPTIONS = {
+  type: "smoothstep",
+  animated: false
+};
+function FlowCanvas({
+  nodes,
+  edges,
+  background = BackgroundVariant.Dots,
+  showControls = true,
+  showMinimap = false,
+  height = 600,
+  validateConnections = true,
+  isValidConnection,
+  colorMode,
+  showHelperLines = false,
+  zoomOnWheel = true,
+  onNodesChange,
+  toolbar,
+  nodeTypes,
+  edgeTypes,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedNodeTypes = useMemo(
+    () => ({ ...defaultNodeTypes, ...nodeTypes ?? {} }),
+    [nodeTypes]
+  );
+  const nodesRef = useRef(nodes);
+  nodesRef.current = nodes;
+  const builtinValidator = useMemo(
+    () => validateConnections === false ? void 0 : createConnectionValidator(
+      () => nodesRef.current,
+      validateConnections === true ? void 0 : validateConnections
+    ),
+    [validateConnections]
+  );
+  const resolvedIsValidConnection = isValidConnection ?? builtinValidator;
+  const mergedEdgeTypes = useMemo(
+    () => edgeTypes ? { ...edgeTypes } : void 0,
+    [edgeTypes]
+  );
+  const orderedNodes = useMemo(() => sortNodesParentFirst(nodes), [nodes]);
+  const [helperLines, setHelperLines] = useState({});
+  const handleNodesChange = useCallback(
+    (changes) => {
+      if (showHelperLines) {
+        const pos = changes.filter((c) => c.type === "position" && c.position);
+        if (pos.length === 1 && pos[0].dragging) {
+          const lines = getHelperLines(pos[0], nodesRef.current);
+          if (lines.snapPosition.x !== void 0) pos[0].position.x = lines.snapPosition.x;
+          if (lines.snapPosition.y !== void 0) pos[0].position.y = lines.snapPosition.y;
+          setHelperLines({ horizontal: lines.horizontal, vertical: lines.vertical });
+        } else {
+          setHelperLines({});
+        }
+      }
+      onNodesChange?.(changes);
+    },
+    [showHelperLines, onNodesChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "ff-canvas",
+        // colorMode drives BOTH react-flow's chrome (below) and our `ff-` styles
+        // via the shared `.dark` class / light opt-out — one theme signal.
+        colorMode === "dark" ? "dark" : "",
+        colorMode === "light" ? "ff-canvas--light" : "",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style: { height, ...style },
+      children: [
+        toolbar && /* @__PURE__ */ jsx("div", { className: "ff-canvas__toolbar", children: toolbar }),
+        /* @__PURE__ */ jsx("div", { className: "ff-canvas__surface", children: /* @__PURE__ */ jsxs(
+          index,
+          {
+            nodes: orderedNodes,
+            edges,
+            onNodesChange: handleNodesChange,
+            colorMode,
+            nodeTypes: mergedNodeTypes,
+            edgeTypes: mergedEdgeTypes,
+            fitView: true,
+            fitViewOptions: DEFAULT_FIT_VIEW,
+            defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+            proOptions: { hideAttribution: true },
+            ...wheelZoomProps(zoomOnWheel),
+            isValidConnection: resolvedIsValidConnection,
+            ...rest,
+            children: [
+              background !== "none" && /* @__PURE__ */ jsx(Background, { variant: background, gap: 20, size: 1, color: "rgba(0,0,0,0.18)" }),
+              showControls && /* @__PURE__ */ jsx(Controls, { className: "ff-controls", position: "bottom-right" }),
+              showMinimap && /* @__PURE__ */ jsx(MiniMap, { className: "ff-minimap", pannable: true, zoomable: true }),
+              showHelperLines && /* @__PURE__ */ jsx(HelperLines, { horizontal: helperLines.horizontal, vertical: helperLines.vertical })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+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,
+  empty
+}) {
+  const nodeTypes = useMemo(() => buildNodeTypes(), []);
+  const rows = 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__ */ jsx("div", { className: cx("ff-viewer ff-viewer--empty", className, classNames.root), style, children: empty ?? /* @__PURE__ */ jsx("span", { className: "ff-viewer__empty", children: "This flow has no nodes." }) });
+  }
+  if (variant === "list") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("ff-viewer ff-viewer--list", className, classNames.root),
+        style,
+        "data-flow-viewer": "list",
+        children: /* @__PURE__ */ jsx("ol", { className: cx("ff-viewer__list", classNames.list), children: rows.map(({ node, index: index2, title, description, accent, status }) => {
+          const selected = node.id === selectedNodeId;
+          const Row = onSelectNode ? "button" : "div";
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            Row,
+            {
+              ...onSelectNode ? { type: "button", onClick: () => onSelectNode(node) } : {},
+              className: cx(
+                "ff-viewer__row",
+                selected && "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": selected || void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx("ff-viewer__index", classNames.rowIndex),
+                    style: { backgroundColor: accent },
+                    "aria-hidden": true,
+                    children: index2 + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "ff-viewer__body", children: [
+                  /* @__PURE__ */ jsx("span", { className: cx("ff-viewer__title", classNames.rowTitle), children: title }),
+                  description && /* @__PURE__ */ jsx("span", { className: cx("ff-viewer__desc", classNames.rowDescription), children: description })
+                ] }),
+                status && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "ff-viewer__status",
+                      `ff-viewer__status--${status}`,
+                      classNames.rowStatus
+                    ),
+                    children: STATUS_LABEL[status]
+                  }
+                )
+              ]
+            }
+          ) }, node.id);
+        }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("ff-viewer ff-viewer--canvas", className, classNames.root),
+      style,
+      "data-flow-viewer": "canvas",
+      children: /* @__PURE__ */ 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 ? (_, node) => onSelectNode(node) : void 0,
+          fitView: true
+        }
+      )
+    }
+  );
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, assignToLane, cloneSubgraph, defaultNodeTypes, distributeNodes, duplicateNode, reconnectEdge2 as reconnectEdge, removeEdges, removeFromLane, removeNodes, setEdgeLabel };
+//# sourceMappingURL=chunk-5UCWY7G3.js.map
+//# sourceMappingURL=chunk-5UCWY7G3.js.map