@particle-academy/fancy-flow 0.36.0 → 0.37.0

package/dist/index.js

@@ -1,9 +1,11 @@
+import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-5UCWY7G3.js';
+export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-5UCWY7G3.js';
 import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-A6RFLGWV.js';
 export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-A6RFLGWV.js';
 export { runCohort } from './chunk-QZTGV3ZL.js';
-import { buildNodeTypes, FlowEditorProvider, registerBuiltinKinds, NoteNode, createConnectionValidator } from './chunk-UX65ML3J.js';
+import { buildNodeTypes, FlowEditorProvider, registerBuiltinKinds } from './chunk-UX65ML3J.js';
 export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, NoteNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds, useFlowEditor, useFlowEditorOptional } from './chunk-UX65ML3J.js';
-import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, reconnectEdge, index, BackgroundVariant, Background, Controls, MiniMap, ViewportPortal } from './chunk-OWENS2H5.js';
+import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle } from './chunk-OWENS2H5.js';
 export { LEGACY_PAUSE_PREFIXES, PAUSE_PREFIX, decodePause, encodePause, isPause, pauseForHuman } from './chunk-UEOE6B52.js';
 import './chunk-USL4FMFU.js';
 export { runFlow } from './chunk-VLATLVGH.js';
@@ -14,463 +16,9 @@ import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, valid
 export { categoryAccent, clearNodeKindOverrides, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, overrideNodeKind, registerNodeKind, validateConfig } from './chunk-PVROYW7C.js';
 import { getRichInputAdapter } from './chunk-F5RPRB7A.js';
 export { RichInputPreview, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerRichInputAdapter } from './chunk-F5RPRB7A.js';
-import { memo, forwardRef, useState, useMemo, useEffect, useCallback, useRef, useImperativeHandle, useId } from 'react';
+import { forwardRef, useState, useMemo, useEffect, useCallback, useRef, useImperativeHandle, useId, memo } from 'react';
 import { jsx, jsxs, Fragment } 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 CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "layout", "annotation", "custom"];
 var CATEGORY_LABELS = {
   trigger: "Triggers",
@@ -1487,7 +1035,7 @@ function FlowEditorInner({
     [flow]
   );
   const onReconnect = useCallback(
-    (oldEdge, conn) => flow.setEdges((eds) => reconnectEdge2(eds, oldEdge, conn)),
+    (oldEdge, conn) => flow.setEdges((eds) => reconnectEdge(eds, oldEdge, conn)),
     [flow]
   );
   const isLaneNode = useCallback(
@@ -1498,10 +1046,10 @@ function FlowEditorInner({
     (orientation = "horizontal", title) => {
       const vertical = orientation === "vertical";
       const lanes = flow.nodes.filter(isLaneNode);
-      const w2 = vertical ? 280 : 680;
-      const h2 = vertical ? 480 : 168;
+      const w = vertical ? 280 : 680;
+      const h = vertical ? 480 : 168;
       const end = lanes.reduce(
-        (m, l) => Math.max(m, vertical ? l.position.x + (l.width ?? w2) : l.position.y + (l.height ?? h2)),
+        (m, l) => Math.max(m, vertical ? l.position.x + (l.width ?? w) : l.position.y + (l.height ?? h)),
         0
       );
       const id = newNodeId();
@@ -1510,8 +1058,8 @@ function FlowEditorInner({
         id,
         type: "@particle-academy/lane",
         position: vertical ? { x: lanes.length ? end + 12 : 0, y: 0 } : { x: 0, y: lanes.length ? end + 12 : 0 },
-        width: w2,
-        height: h2,
+        width: w,
+        height: h,
         data: { kind: "@particle-academy/lane", label: name, config: { title: name, orientation } }
       };
       flow.setNodes((all) => [...all, node]);
@@ -1927,135 +1475,6 @@ 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,
-  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(" ");
-}
 function defineNode(render) {
   function Wrapped(props) {
     return render({
@@ -2090,6 +1509,6 @@ function NodePort({ side, type, id, style, title, className }) {
 // src/index.ts
 registerBuiltinKinds();
 
-export { ActionNode, ConfigFieldRenderer, DecisionNode, FlowCanvas, FlowEditor, FlowRunControls, FlowRunFeed, FlowViewer, NodeConfigPanel, NodePalette, NodePort, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge2 as reconnectEdge };
+export { ConfigFieldRenderer, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, defineNode, paletteDropHandlers };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map