@particle-academy/fancy-flow 0.20.0 → 0.22.0

package/dist/index.d.cts

@@ -3,17 +3,17 @@ import { ReactNode, CSSProperties, ComponentType } from 'react';
 import { ReactFlowProps, Edge, BackgroundVariant, Connection, NodeProps, NodeTypes } from '@xyflow/react';
 import { ConnectionValidatorOptions } from './registry/index.cjs';
 export { ANY_PORT_TYPE, BUILTIN_KINDS, PortCompatibility, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, categoryAccent, createConnectionValidator, defaultConfigFor, defaultPortCompatibility, getNodeKind, getRichInputAdapter, isRichInputEnabled, listNodeKinds, onNodeKindsChanged, onRichInputAdapterChanged, registerBuiltinKinds, registerNodeKind, registerRichInputAdapter, resolveNodePorts, resolvePortSpec, validateConfig } from './registry/index.cjs';
-import { b as FlowNode, F as FlowGraph, e as NodeRunStatus, E as ExecutorRegistry } from './types-sOmpCitB.cjs';
-export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, a as FlowEdge, c as FlowNodeData, d as FlowNodeKind, N as NodeExecutor, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-sOmpCitB.cjs';
+import { a as FlowNode, F as FlowGraph, e as NodeRunStatus, E as ExecutorRegistry } from './types-CMSrWVYM.cjs';
+export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, b as FlowEdge, c as FlowNodeData, d as FlowNodeKind, N as NodeExecutor, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-CMSrWVYM.cjs';
 import { WorkflowSchema, WorkflowMetadata } from './schema/index.cjs';
-export { ImportIssue, ImportOptions, ImportResult, WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, WorkflowSchemaEdge, WorkflowSchemaNode, exportWorkflow, importWorkflow, workflowToBlob } from './schema/index.cjs';
-import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-D_jOR3Z2.cjs';
-export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-D_jOR3Z2.cjs';
+export { ImportIssue, ImportOptions, ImportResult, WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, WorkflowSchemaEdge, WorkflowSchemaNode, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './schema/index.cjs';
+import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-DneUoivl.cjs';
+export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-DneUoivl.cjs';
 import { FlowRunFeedEntry } from './runtime/index.cjs';
 export { HistoryController, UseFlowHistoryReturn, UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './runtime/index.cjs';
-export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-VKm57Hcj.cjs';
+export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-AXzOR-Wq.cjs';
 export { L as LEGACY_PAUSE_PREFIXES, a as PAUSE_PREFIX, P as PauseAwaiting, b as PauseSignal, d as decodePause, e as encodePause, i as isPause, p as pauseForHuman } from './pause-9iT4tCEV.cjs';
-import './capabilities-ChE3Xi8R.cjs';
+import './capabilities-exVeADXz.cjs';
 
 type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" | "height"> & {
     nodes: FlowNode[];
@@ -136,6 +136,12 @@ type FlowEditorApi = {
     alignSelected: (edge: AlignEdge) => void;
     /** Evenly distribute the multi-selection's gaps along an axis (needs 3+). */
     distributeSelected: (axis: "h" | "v") => void;
+    /** Add a swimlane, stacked with existing lanes. Returns the new lane id. */
+    addLane: (orientation?: "horizontal" | "vertical", title?: string) => string | null;
+    /** Put a node inside a lane (sets parentId + a lane-relative position). */
+    assignToLane: (nodeId: string, laneId: string) => void;
+    /** Remove a node from its lane (restores its absolute position). */
+    removeFromLane: (nodeId: string) => void;
     /** Copy the current selection to the editor clipboard. */
     copy: () => void;
     /** Copy then delete the current selection. */
@@ -192,6 +198,8 @@ type FlowEditorBuiltins = {
     delete?: boolean;
     /** Undo/redo toolbar buttons. Default true. */
     history?: boolean;
+    /** "Add lane" toolbar button. Default true. */
+    addLane?: boolean;
     /** Right-click a node for Delete / Duplicate. Default true. */
     contextMenu?: boolean;
     /** Right-click a connection for Label / Delete. Default true. */
@@ -426,6 +434,15 @@ declare const NoteNode: react.MemoExoticComponent<typeof NoteNodeInner>;
 declare function SubgraphNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const SubgraphNode: react.MemoExoticComponent<typeof SubgraphNodeInner>;
 
+/**
+ * LaneNode — a resizable swimlane band. A portless container: child nodes are
+ * parented into it (`parentId` + `extent:'parent'`) and render on top, so this
+ * node is just the titled background. Wired as the `@particle-academy/lane`
+ * kind's `component`, so `buildNodeTypes` uses it instead of the default card.
+ */
+declare function LaneNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
+declare const LaneNode: react.MemoExoticComponent<typeof LaneNodeInner>;
+
 type NodeShellProps = {
     /** Required: the xyflow node this is rendering. */
     node: NodeProps<FlowNode>;
@@ -522,4 +539,4 @@ type FlowRunFeedProps = {
 /** FlowRunFeed — scrolling log panel. Auto-scrolls to bottom on new entries. */
 declare function FlowRunFeed({ entries, className, style }: FlowRunFeedProps): react.JSX.Element;
 
-export { ActionNode, type AlignEdge, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, type AlignEdge, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };

package/dist/index.d.ts

@@ -3,17 +3,17 @@ import { ReactNode, CSSProperties, ComponentType } from 'react';
 import { ReactFlowProps, Edge, BackgroundVariant, Connection, NodeProps, NodeTypes } from '@xyflow/react';
 import { ConnectionValidatorOptions } from './registry/index.js';
 export { ANY_PORT_TYPE, BUILTIN_KINDS, PortCompatibility, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, categoryAccent, createConnectionValidator, defaultConfigFor, defaultPortCompatibility, getNodeKind, getRichInputAdapter, isRichInputEnabled, listNodeKinds, onNodeKindsChanged, onRichInputAdapterChanged, registerBuiltinKinds, registerNodeKind, registerRichInputAdapter, resolveNodePorts, resolvePortSpec, validateConfig } from './registry/index.js';
-import { b as FlowNode, F as FlowGraph, e as NodeRunStatus, E as ExecutorRegistry } from './types-sOmpCitB.js';
-export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, a as FlowEdge, c as FlowNodeData, d as FlowNodeKind, N as NodeExecutor, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-sOmpCitB.js';
+import { a as FlowNode, F as FlowGraph, e as NodeRunStatus, E as ExecutorRegistry } from './types-CMSrWVYM.js';
+export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, b as FlowEdge, c as FlowNodeData, d as FlowNodeKind, N as NodeExecutor, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-CMSrWVYM.js';
 import { WorkflowSchema, WorkflowMetadata } from './schema/index.js';
-export { ImportIssue, ImportOptions, ImportResult, WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, WorkflowSchemaEdge, WorkflowSchemaNode, exportWorkflow, importWorkflow, workflowToBlob } from './schema/index.js';
-import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-NerkPtHS.js';
-export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-NerkPtHS.js';
+export { ImportIssue, ImportOptions, ImportResult, WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, WorkflowSchemaEdge, WorkflowSchemaNode, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './schema/index.js';
+import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-CFEtuRWJ.js';
+export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-CFEtuRWJ.js';
 import { FlowRunFeedEntry } from './runtime/index.js';
 export { HistoryController, UseFlowHistoryReturn, UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './runtime/index.js';
-export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-ChBi6q-W.js';
+export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-9U-gaYVF.js';
 export { L as LEGACY_PAUSE_PREFIXES, a as PAUSE_PREFIX, P as PauseAwaiting, b as PauseSignal, d as decodePause, e as encodePause, i as isPause, p as pauseForHuman } from './pause-9iT4tCEV.js';
-import './capabilities-DUhAc-EJ.js';
+import './capabilities-85Mjn4uW.js';
 
 type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" | "height"> & {
     nodes: FlowNode[];
@@ -136,6 +136,12 @@ type FlowEditorApi = {
     alignSelected: (edge: AlignEdge) => void;
     /** Evenly distribute the multi-selection's gaps along an axis (needs 3+). */
     distributeSelected: (axis: "h" | "v") => void;
+    /** Add a swimlane, stacked with existing lanes. Returns the new lane id. */
+    addLane: (orientation?: "horizontal" | "vertical", title?: string) => string | null;
+    /** Put a node inside a lane (sets parentId + a lane-relative position). */
+    assignToLane: (nodeId: string, laneId: string) => void;
+    /** Remove a node from its lane (restores its absolute position). */
+    removeFromLane: (nodeId: string) => void;
     /** Copy the current selection to the editor clipboard. */
     copy: () => void;
     /** Copy then delete the current selection. */
@@ -192,6 +198,8 @@ type FlowEditorBuiltins = {
     delete?: boolean;
     /** Undo/redo toolbar buttons. Default true. */
     history?: boolean;
+    /** "Add lane" toolbar button. Default true. */
+    addLane?: boolean;
     /** Right-click a node for Delete / Duplicate. Default true. */
     contextMenu?: boolean;
     /** Right-click a connection for Label / Delete. Default true. */
@@ -426,6 +434,15 @@ declare const NoteNode: react.MemoExoticComponent<typeof NoteNodeInner>;
 declare function SubgraphNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const SubgraphNode: react.MemoExoticComponent<typeof SubgraphNodeInner>;
 
+/**
+ * LaneNode — a resizable swimlane band. A portless container: child nodes are
+ * parented into it (`parentId` + `extent:'parent'`) and render on top, so this
+ * node is just the titled background. Wired as the `@particle-academy/lane`
+ * kind's `component`, so `buildNodeTypes` uses it instead of the default card.
+ */
+declare function LaneNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
+declare const LaneNode: react.MemoExoticComponent<typeof LaneNodeInner>;
+
 type NodeShellProps = {
     /** Required: the xyflow node this is rendering. */
     node: NodeProps<FlowNode>;
@@ -522,4 +539,4 @@ type FlowRunFeedProps = {
 /** FlowRunFeed — scrolling log panel. Auto-scrolls to bottom on new entries. */
 declare function FlowRunFeed({ entries, className, style }: FlowRunFeedProps): react.JSX.Element;
 
-export { ActionNode, type AlignEdge, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, type AlignEdge, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };

package/dist/index.js

@@ -1,15 +1,15 @@
-import { useFlowState, useFlowRun, useFlowHistory, applyStatusesToNodes } from './chunk-KI4RI2N3.js';
-export { applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-KI4RI2N3.js';
-import { buildNodeTypes, registerBuiltinKinds, createConnectionValidator } from './chunk-AW2QUEL2.js';
-export { ANY_PORT_TYPE, BUILTIN_KINDS, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds } from './chunk-AW2QUEL2.js';
-import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, reconnectEdge, index, BackgroundVariant, Background, Controls, MiniMap } from './chunk-XETAGLH6.js';
+import { useFlowState, useFlowRun, useFlowHistory, applyStatusesToNodes } from './chunk-O7F6SGV4.js';
+export { applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-O7F6SGV4.js';
+import { buildNodeTypes, registerBuiltinKinds, createConnectionValidator } from './chunk-YZTBRXBZ.js';
+export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds } from './chunk-YZTBRXBZ.js';
+import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, reconnectEdge, index, BackgroundVariant, Background, Controls, MiniMap } from './chunk-ZB4HHQMR.js';
 export { LEGACY_PAUSE_PREFIXES, PAUSE_PREFIX, decodePause, encodePause, isPause, pauseForHuman } from './chunk-UEOE6B52.js';
-export { runFlow } from './chunk-L4AX73Q6.js';
-import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-D6W5FMCT.js';
-export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, workflowToBlob } from './chunk-D6W5FMCT.js';
+export { runFlow } from './chunk-KDHLKBL2.js';
+import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-OHVSEHDC.js';
+export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './chunk-OHVSEHDC.js';
 export { resolveNodePorts, resolvePortSpec } from './chunk-TITD5W4Y.js';
-import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-U5F22BHV.js';
-export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-U5F22BHV.js';
+import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-YXRLIV7A.js';
+export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-YXRLIV7A.js';
 import { getRichInputAdapter } from './chunk-F5RPRB7A.js';
 export { RichInputPreview, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerRichInputAdapter } from './chunk-F5RPRB7A.js';
 import './chunk-USL4FMFU.js';
@@ -139,6 +139,140 @@ var defaultNodeTypes = {
   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 cx = (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 = cx - 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 } };
+  });
+}
 var DEFAULT_FIT_VIEW = { padding: 0.2 };
 var DEFAULT_EDGE_OPTIONS = {
   type: "smoothstep",
@@ -178,12 +312,13 @@ function FlowCanvas({
     () => edgeTypes ? { ...edgeTypes } : void 0,
     [edgeTypes]
   );
+  const orderedNodes = useMemo(() => sortNodesParentFirst(nodes), [nodes]);
   return /* @__PURE__ */ jsxs("div", { className: ["ff-canvas", 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,
+        nodes: orderedNodes,
         edges,
         nodeTypes: mergedNodeTypes,
         edgeTypes: mergedEdgeTypes,
@@ -204,7 +339,7 @@ function FlowCanvas({
     ) })
   ] });
 }
-var CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "custom"];
+var CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "layout", "custom"];
 var CATEGORY_LABELS = {
   trigger: "Triggers",
   logic: "Logic",
@@ -213,6 +348,7 @@ var CATEGORY_LABELS = {
   io: "Connectors",
   human: "Human",
   output: "Output",
+  layout: "Layout",
   custom: "Custom"
 };
 function NodePalette({ categories, onPick, className, style }) {
@@ -804,100 +940,6 @@ function formatTime(at) {
   const d = new Date(at);
   return `${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}.${Math.floor(d.getMilliseconds() / 100)}`;
 }
-
-// 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 cx = (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 = cx - 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 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 } };
-  });
-}
 var FlowEditorContext = createContext(null);
 var FlowEditorProvider = FlowEditorContext.Provider;
 function useFlowEditor() {
@@ -1128,6 +1170,49 @@ function FlowEditorInner({
     (oldEdge, conn) => flow.setEdges((eds) => reconnectEdge2(eds, oldEdge, conn)),
     [flow]
   );
+  const isLaneNode = useCallback(
+    (n) => getNodeKind(n.data?.kind ?? n.type)?.category === "layout",
+    []
+  );
+  const addLane = useCallback(
+    (orientation = "horizontal", title) => {
+      const vertical = orientation === "vertical";
+      const lanes = flow.nodes.filter(isLaneNode);
+      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 ?? w) : l.position.y + (l.height ?? h)),
+        0
+      );
+      const id = newNodeId();
+      const name = title ?? `Lane ${lanes.length + 1}`;
+      const node = {
+        id,
+        type: "@particle-academy/lane",
+        position: vertical ? { x: lanes.length ? end + 12 : 0, y: 0 } : { x: 0, y: lanes.length ? end + 12 : 0 },
+        width: w,
+        height: h,
+        data: { kind: "@particle-academy/lane", label: name, config: { title: name, orientation } }
+      };
+      flow.setNodes((all) => [...all, node]);
+      setSelectedId(id);
+      return id;
+    },
+    [flow, isLaneNode]
+  );
+  const handleNodeDragStop = useCallback(
+    (_e, node) => {
+      if (isLaneNode(node)) return;
+      const overLane = rf.getIntersectingNodes(node).find((n) => isLaneNode(n));
+      const currentParent = node.parentId;
+      if (overLane && overLane.id !== currentParent) {
+        flow.setNodes((all) => assignToLane(all, node.id, overLane.id));
+      } else if (!overLane && currentParent) {
+        flow.setNodes((all) => removeFromLane(all, node.id));
+      }
+    },
+    [rf, flow, isLaneNode]
+  );
   useEffect(() => {
     const onKey = (e) => {
       const t = e.target;
@@ -1191,6 +1276,9 @@ function FlowEditorInner({
         deleteNodes(selectedIds);
       },
       paste: pasteClipboard,
+      addLane,
+      assignToLane: (nodeId, laneId) => flow.setNodes((all) => assignToLane(all, nodeId, laneId)),
+      removeFromLane: (nodeId) => flow.setNodes((all) => removeFromLane(all, nodeId)),
       run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
       cancel: runner.cancel,
       reset: runner.reset,
@@ -1203,7 +1291,7 @@ function FlowEditorInner({
       canUndo: hist.canUndo,
       canRedo: hist.canRedo
     };
-  }, [flow, selectedId, selected, selectedEdgeId, selectedEdge, selectedIds, selectedNodes, runner, executors, metadata, addNode, deleteNodes, deleteEdges, duplicateSelected, alignSelected, distributeSelected, copySelection, pasteClipboard, hist, rf]);
+  }, [flow, selectedId, selected, selectedEdgeId, selectedEdge, selectedIds, selectedNodes, runner, executors, metadata, addNode, deleteNodes, deleteEdges, duplicateSelected, alignSelected, distributeSelected, copySelection, pasteClipboard, addLane, hist, rf]);
   useImperativeHandle(apiRef, () => api, [api]);
   const dropHandlers = paletteDropHandlers((kindName, evt) => {
     const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
@@ -1239,6 +1327,10 @@ function FlowEditorInner({
         }
       )
     ] }),
+    builtins.addLane !== false && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
+      /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "add-lane", title: "Add a swimlane", onClick: () => api.addLane(), children: "\u25A4 Lane" })
+    ] }),
     (builtins.export !== false || builtins.import !== false) && /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
     builtins.export !== false && /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "export", onClick: api.exportWorkflow, children: "\u2193 Export" }),
     builtins.import !== false && /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "import", onClick: api.importWorkflow, children: "\u2191 Import" }),
@@ -1266,6 +1358,7 @@ function FlowEditorInner({
           onReconnect,
           edgesReconnectable: true,
           onNodeDragStart: hist.onNodeDragStart,
+          onNodeDragStop: handleNodeDragStop,
           onNodeClick: handleNodeClick,
           onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
           onEdgeClick: handleEdgeClick,