@pyreon/flow 0.6.0 → 0.7.0

package/lib/types/index.d.ts

@@ -1,2342 +1,708 @@
-import { r as __toESM } from "./chunk.js";
-import { batch, computed, signal } from "@pyreon/reactivity";
+import { VNodeChild } from "@pyreon/core";
+import { Computed, Signal } from "@pyreon/reactivity";
 
-//#region ../../node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js
-/** Marker for fragment nodes — renders children without a wrapper element */
-
-function h(type, props, ...children) {
-  return {
-    type,
-    props: props ?? EMPTY_PROPS,
-    children: normalizeChildren(children),
-    key: props?.key ?? null
-  };
+//#region src/types.d.ts
+interface XYPosition {
+  x: number;
+  y: number;
 }
-function normalizeChildren(children) {
-  for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
-  return children;
+interface Dimensions {
+  width: number;
+  height: number;
 }
-function flattenChildren(children) {
-  const result = [];
-  for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));else result.push(child);
-  return result;
+interface Rect extends XYPosition, Dimensions {}
+interface Viewport {
+  x: number;
+  y: number;
+  zoom: number;
 }
-/**
-* JSX automatic runtime.
-*
-* When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
-* rewrites JSX to imports from this file automatically:
-*   <div class="x" />  →  jsx("div", { class: "x" })
-*/
-function jsx(type, props, key) {
-  const {
-    children,
-    ...rest
-  } = props;
-  const propsWithKey = key != null ? {
-    ...rest,
-    key
-  } : rest;
-  if (typeof type === "function") return h(type, children !== void 0 ? {
-    ...propsWithKey,
-    children
-  } : propsWithKey);
-  return h(type, propsWithKey, ...(children === void 0 ? [] : Array.isArray(children) ? children : [children]));
+type HandleType = 'source' | 'target';
+declare enum Position {
+  Top = "top",
+  Right = "right",
+  Bottom = "bottom",
+  Left = "left"
 }
-//#endregion
-//#region src/components/background.tsx
-/**
-* Background pattern for the flow canvas.
-* Renders dots, lines, or cross patterns that move with the viewport.
-*
-* @example
-* ```tsx
-* <Flow instance={flow}>
-*   <Background variant="dots" gap={20} />
-* </Flow>
-* ```
-*/
-function Background(props) {
-  const {
-    variant = "dots",
-    gap = 20,
-    size = 1,
-    color = "#ddd"
-  } = props;
-  const patternId = `flow-bg-${variant}`;
-  if (variant === "dots") return /* @__PURE__ */jsxs("svg", {
-    role: "img",
-    "aria-label": "background pattern",
-    class: "pyreon-flow-background",
-    style: "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;",
-    children: [/* @__PURE__ */jsx("defs", {
-      children: /* @__PURE__ */jsx("pattern", {
-        id: patternId,
-        x: "0",
-        y: "0",
-        width: String(gap),
-        height: String(gap),
-        patternUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsx("circle", {
-          cx: String(size),
-          cy: String(size),
-          r: String(size),
-          fill: color
-        })
-      })
-    }), /* @__PURE__ */jsx("rect", {
-      width: "100%",
-      height: "100%",
-      fill: `url(#${patternId})`
-    })]
-  });
-  if (variant === "lines") return /* @__PURE__ */jsxs("svg", {
-    role: "img",
-    "aria-label": "background pattern",
-    class: "pyreon-flow-background",
-    style: "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;",
-    children: [/* @__PURE__ */jsx("defs", {
-      children: /* @__PURE__ */jsxs("pattern", {
-        id: patternId,
-        x: "0",
-        y: "0",
-        width: String(gap),
-        height: String(gap),
-        patternUnits: "userSpaceOnUse",
-        children: [/* @__PURE__ */jsx("line", {
-          x1: "0",
-          y1: String(gap),
-          x2: String(gap),
-          y2: String(gap),
-          stroke: color,
-          "stroke-width": String(size)
-        }), /* @__PURE__ */jsx("line", {
-          x1: String(gap),
-          y1: "0",
-          x2: String(gap),
-          y2: String(gap),
-          stroke: color,
-          "stroke-width": String(size)
-        })]
-      })
-    }), /* @__PURE__ */jsx("rect", {
-      width: "100%",
-      height: "100%",
-      fill: `url(#${patternId})`
-    })]
-  });
-  return /* @__PURE__ */jsxs("svg", {
-    role: "img",
-    "aria-label": "background pattern",
-    class: "pyreon-flow-background",
-    style: "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;",
-    children: [/* @__PURE__ */jsx("defs", {
-      children: /* @__PURE__ */jsxs("pattern", {
-        id: patternId,
-        x: "0",
-        y: "0",
-        width: String(gap),
-        height: String(gap),
-        patternUnits: "userSpaceOnUse",
-        children: [/* @__PURE__ */jsx("line", {
-          x1: String(gap / 2 - size * 2),
-          y1: String(gap / 2),
-          x2: String(gap / 2 + size * 2),
-          y2: String(gap / 2),
-          stroke: color,
-          "stroke-width": String(size)
-        }), /* @__PURE__ */jsx("line", {
-          x1: String(gap / 2),
-          y1: String(gap / 2 - size * 2),
-          x2: String(gap / 2),
-          y2: String(gap / 2 + size * 2),
-          stroke: color,
-          "stroke-width": String(size)
-        })]
-      })
-    }), /* @__PURE__ */jsx("rect", {
-      width: "100%",
-      height: "100%",
-      fill: `url(#${patternId})`
-    })]
-  });
+interface HandleConfig {
+  id?: string;
+  type: HandleType;
+  position: Position;
 }
-
-//#endregion
-//#region src/components/controls.tsx
-
-/**
-* Zoom and viewport controls for the flow canvas.
-* Shows zoom in, zoom out, fit view, and optional lock button.
-*
-* @example
-* ```tsx
-* <Flow instance={flow}>
-*   <Controls />
-* </Flow>
-* ```
-*/
-function Controls(props) {
-  const {
-    showZoomIn = true,
-    showZoomOut = true,
-    showFitView = true,
-    showLock = false,
-    position = "bottom-left",
-    instance
-  } = props;
-  if (!instance) return null;
-  const baseStyle = `position: absolute; ${positionStyles$2[position] ?? positionStyles$2["bottom-left"]} display: flex; flex-direction: column; gap: 2px; z-index: 5; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);`;
-  const btnStyle = "width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: #555; padding: 0;";
-  return () => {
-    const zoomPercent = Math.round(instance.zoom() * 100);
-    return /* @__PURE__ */jsxs("div", {
-      class: "pyreon-flow-controls",
-      style: baseStyle,
-      children: [showZoomIn && /* @__PURE__ */jsx("button", {
-        type: "button",
-        style: btnStyle,
-        title: "Zoom in",
-        onClick: () => instance.zoomIn(),
-        children: /* @__PURE__ */jsx(ZoomInIcon, {})
-      }), showZoomOut && /* @__PURE__ */jsx("button", {
-        type: "button",
-        style: btnStyle,
-        title: "Zoom out",
-        onClick: () => instance.zoomOut(),
-        children: /* @__PURE__ */jsx(ZoomOutIcon, {})
-      }), showFitView && /* @__PURE__ */jsx("button", {
-        type: "button",
-        style: btnStyle,
-        title: "Fit view",
-        onClick: () => instance.fitView(),
-        children: /* @__PURE__ */jsx(FitViewIcon, {})
-      }), showLock && /* @__PURE__ */jsx("button", {
-        type: "button",
-        style: btnStyle,
-        title: "Lock/unlock",
-        onClick: () => {},
-        children: /* @__PURE__ */jsx(LockIcon, {})
-      }), /* @__PURE__ */jsxs("div", {
-        style: "font-size: 10px; text-align: center; color: #999; padding: 2px 0; user-select: none;",
-        title: "Current zoom level",
-        children: [zoomPercent, "%"]
-      })]
-    });
-  };
+interface FlowNode<TData = Record<string, unknown>> {
+  id: string;
+  type?: string;
+  position: XYPosition;
+  data: TData;
+  width?: number;
+  height?: number;
+  /** Whether the node can be dragged */
+  draggable?: boolean;
+  /** Whether the node can be selected */
+  selectable?: boolean;
+  /** Whether the node can be connected to */
+  connectable?: boolean;
+  /** Custom class name */
+  class?: string;
+  /** Custom style */
+  style?: string;
+  /** Source handles */
+  sourceHandles?: HandleConfig[];
+  /** Target handles */
+  targetHandles?: HandleConfig[];
+  /** Parent node id for grouping */
+  parentId?: string;
+  /** Whether this node is a group */
+  group?: boolean;
 }
-
-//#endregion
-//#region src/types.ts
-
-//#endregion
-//#region src/edges.ts
-/**
-* Auto-detect the best handle position based on relative node positions.
-* If the node has configured handles, uses those. Otherwise picks the
-* closest edge (top/right/bottom/left) based on direction to the other node.
-*/
-function getSmartHandlePositions(sourceNode, targetNode) {
-  const sw = sourceNode.width ?? 150;
-  const sh = sourceNode.height ?? 40;
-  const tw = targetNode.width ?? 150;
-  const th = targetNode.height ?? 40;
-  const dx = targetNode.position.x + tw / 2 - (sourceNode.position.x + sw / 2);
-  const dy = targetNode.position.y + th / 2 - (sourceNode.position.y + sh / 2);
-  const sourceHandle = sourceNode.sourceHandles?.[0];
-  const targetHandle = targetNode.targetHandles?.[0];
-  return {
-    sourcePosition: sourceHandle ? sourceHandle.position : Math.abs(dx) > Math.abs(dy) ? dx > 0 ? Position.Right : Position.Left : dy > 0 ? Position.Bottom : Position.Top,
-    targetPosition: targetHandle ? targetHandle.position : Math.abs(dx) > Math.abs(dy) ? dx > 0 ? Position.Left : Position.Right : dy > 0 ? Position.Top : Position.Bottom
-  };
+type EdgeType = 'bezier' | 'smoothstep' | 'straight' | 'step';
+interface FlowEdge {
+  id?: string;
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
+  type?: EdgeType;
+  label?: string;
+  animated?: boolean;
+  class?: string;
+  style?: string;
+  /** Custom data attached to the edge */
+  data?: Record<string, unknown>;
+  /** Waypoints — intermediate points the edge passes through */
+  waypoints?: XYPosition[];
 }
-/**
-* Get the center point between source and target positions.
-*/
-function getCenter(source, target) {
-  return {
-    x: (source.x + target.x) / 2,
-    y: (source.y + target.y) / 2
-  };
+interface Connection {
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
 }
-/**
-* Get the handle position offset for a given position (top/right/bottom/left).
-*/
-function getHandlePosition(position, nodeX, nodeY, nodeWidth, nodeHeight, _handleId) {
-  switch (position) {
-    case Position.Top:
-      return {
-        x: nodeX + nodeWidth / 2,
-        y: nodeY
-      };
-    case Position.Right:
-      return {
-        x: nodeX + nodeWidth,
-        y: nodeY + nodeHeight / 2
-      };
-    case Position.Bottom:
-      return {
-        x: nodeX + nodeWidth / 2,
-        y: nodeY + nodeHeight
-      };
-    case Position.Left:
-      return {
-        x: nodeX,
-        y: nodeY + nodeHeight / 2
-      };
-  }
+type ConnectionRule = Record<string, {
+  outputs: string[];
+}>;
+type NodeChange = {
+  type: 'position';
+  id: string;
+  position: XYPosition;
+} | {
+  type: 'dimensions';
+  id: string;
+  dimensions: Dimensions;
+} | {
+  type: 'select';
+  id: string;
+  selected: boolean;
+} | {
+  type: 'remove';
+  id: string;
+};
+interface EdgePathResult {
+  path: string;
+  labelX: number;
+  labelY: number;
 }
-/**
-* Calculate a cubic bezier edge path between two points.
-*
-* @example
-* ```ts
-* const { path, labelX, labelY } = getBezierPath({
-*   sourceX: 0, sourceY: 0, sourcePosition: Position.Right,
-*   targetX: 200, targetY: 100, targetPosition: Position.Left,
-* })
-* // path = "M0,0 C100,0 100,100 200,100"
-* ```
-*/
-function getBezierPath(params) {
-  const {
-    sourceX,
-    sourceY,
-    sourcePosition = Position.Bottom,
-    targetX,
-    targetY,
-    targetPosition = Position.Top,
-    curvature = .25
-  } = params;
-  const distX = Math.abs(targetX - sourceX);
-  const distY = Math.abs(targetY - sourceY);
-  const offset = Math.sqrt(distX * distX + distY * distY) * curvature;
-  let sourceControlX = sourceX;
-  let sourceControlY = sourceY;
-  let targetControlX = targetX;
-  let targetControlY = targetY;
-  switch (sourcePosition) {
-    case Position.Top:
-      sourceControlY = sourceY - offset;
-      break;
-    case Position.Bottom:
-      sourceControlY = sourceY + offset;
-      break;
-    case Position.Left:
-      sourceControlX = sourceX - offset;
-      break;
-    case Position.Right:
-      sourceControlX = sourceX + offset;
-      break;
-  }
-  switch (targetPosition) {
-    case Position.Top:
-      targetControlY = targetY - offset;
-      break;
-    case Position.Bottom:
-      targetControlY = targetY + offset;
-      break;
-    case Position.Left:
-      targetControlX = targetX - offset;
-      break;
-    case Position.Right:
-      targetControlX = targetX + offset;
-      break;
-  }
-  const center = getCenter({
-    x: sourceX,
-    y: sourceY
-  }, {
-    x: targetX,
-    y: targetY
-  });
-  return {
-    path: `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-    labelX: center.x,
-    labelY: center.y
-  };
+interface FlowConfig {
+  nodes?: FlowNode[];
+  edges?: FlowEdge[];
+  /** Default edge type */
+  defaultEdgeType?: EdgeType;
+  /** Min zoom level — default: 0.1 */
+  minZoom?: number;
+  /** Max zoom level — default: 4 */
+  maxZoom?: number;
+  /** Snap to grid */
+  snapToGrid?: boolean;
+  /** Grid size for snapping — default: 15 */
+  snapGrid?: number;
+  /** Connection rules — which node types can connect */
+  connectionRules?: ConnectionRule;
+  /** Whether nodes are draggable by default — default: true */
+  nodesDraggable?: boolean;
+  /** Whether nodes are connectable by default — default: true */
+  nodesConnectable?: boolean;
+  /** Whether nodes are selectable by default — default: true */
+  nodesSelectable?: boolean;
+  /** Whether to allow multi-selection — default: true */
+  multiSelect?: boolean;
+  /** Drag boundaries for nodes — [[minX, minY], [maxX, maxY]] */
+  nodeExtent?: [[number, number], [number, number]];
+  /** Whether panning is enabled — default: true */
+  pannable?: boolean;
+  /** Whether zooming is enabled — default: true */
+  zoomable?: boolean;
+  /** Fit view on initial render — default: false */
+  fitView?: boolean;
+  /** Padding for fitView — default: 0.1 */
+  fitViewPadding?: number;
 }
-/**
-* Calculate a smoothstep edge path — horizontal/vertical segments with rounded corners.
-*/
-function getSmoothStepPath(params) {
-  const {
-    sourceX,
-    sourceY,
-    sourcePosition = Position.Bottom,
-    targetX,
-    targetY,
-    targetPosition = Position.Top,
-    borderRadius = 5,
-    offset = 20
-  } = params;
-  const isHorizontalSource = sourcePosition === Position.Left || sourcePosition === Position.Right;
-  const isHorizontalTarget = targetPosition === Position.Left || targetPosition === Position.Right;
-  const sourceOffsetX = sourcePosition === Position.Right ? offset : sourcePosition === Position.Left ? -offset : 0;
-  const sourceOffsetY = sourcePosition === Position.Bottom ? offset : sourcePosition === Position.Top ? -offset : 0;
-  const targetOffsetX = targetPosition === Position.Right ? offset : targetPosition === Position.Left ? -offset : 0;
-  const targetOffsetY = targetPosition === Position.Bottom ? offset : targetPosition === Position.Top ? -offset : 0;
-  const sX = sourceX + sourceOffsetX;
-  const sY = sourceY + sourceOffsetY;
-  const tX = targetX + targetOffsetX;
-  const tY = targetY + targetOffsetY;
-  const center = getCenter({
-    x: sourceX,
-    y: sourceY
-  }, {
-    x: targetX,
-    y: targetY
-  });
-  const midX = (sX + tX) / 2;
-  const midY = (sY + tY) / 2;
-  const r = borderRadius;
-  let path;
-  if (isHorizontalSource && !isHorizontalTarget) {
-    const cornerY = tY;
-    path = `M${sourceX},${sourceY} L${sX},${sY} L${sX},${cornerY > sY ? cornerY - r : cornerY + r} Q${sX},${cornerY} ${sX + (tX > sX ? r : -r)},${cornerY} L${tX},${cornerY} L${targetX},${targetY}`;
-  } else if (!isHorizontalSource && isHorizontalTarget) {
-    const cornerX = tX;
-    path = `M${sourceX},${sourceY} L${sX},${sY} L${cornerX > sX ? cornerX - r : cornerX + r},${sY} Q${cornerX},${sY} ${cornerX},${sY + (tY > sY ? r : -r)} L${cornerX},${tY} L${targetX},${targetY}`;
-  } else if (isHorizontalSource && isHorizontalTarget) path = `M${sourceX},${sourceY} L${sX},${sourceY} L${midX},${sourceY} Q${midX},${sourceY} ${midX},${midY} L${midX},${targetY} L${tX},${targetY} L${targetX},${targetY}`;else path = `M${sourceX},${sourceY} L${sourceX},${sY} L${sourceX},${midY} Q${sourceX},${midY} ${midX},${midY} L${targetX},${midY} L${targetX},${tY} L${targetX},${targetY}`;
-  return {
-    path,
-    labelX: center.x,
-    labelY: center.y
+interface FlowInstance {
+  /** All nodes — reactive */
+  nodes: Signal<FlowNode[]>;
+  /** All edges — reactive */
+  edges: Signal<FlowEdge[]>;
+  /** Viewport state — reactive */
+  viewport: Signal<Viewport>;
+  /** Current zoom level — computed */
+  zoom: Computed<number>;
+  /** Selected node ids — computed */
+  selectedNodes: Computed<string[]>;
+  /** Selected edge ids — computed */
+  selectedEdges: Computed<string[]>;
+  /** Container dimensions — updated by the Flow component via ResizeObserver */
+  containerSize: Signal<{
+    width: number;
+    height: number;
+  }>;
+  /** Get a single node by id */
+  getNode: (id: string) => FlowNode | undefined;
+  /** Add a node */
+  addNode: (node: FlowNode) => void;
+  /** Remove a node and its connected edges */
+  removeNode: (id: string) => void;
+  /** Update a node's properties */
+  updateNode: (id: string, update: Partial<FlowNode>) => void;
+  /** Update a node's position */
+  updateNodePosition: (id: string, position: XYPosition) => void;
+  /** Get a single edge by id */
+  getEdge: (id: string) => FlowEdge | undefined;
+  /** Add an edge */
+  addEdge: (edge: FlowEdge) => void;
+  /** Remove an edge */
+  removeEdge: (id: string) => void;
+  /** Check if a connection is valid (based on rules) */
+  isValidConnection: (connection: Connection) => boolean;
+  /** Select a node */
+  selectNode: (id: string, additive?: boolean) => void;
+  /** Deselect a node */
+  deselectNode: (id: string) => void;
+  /** Select an edge */
+  selectEdge: (id: string, additive?: boolean) => void;
+  /** Clear all selection */
+  clearSelection: () => void;
+  /** Select all nodes */
+  selectAll: () => void;
+  /** Delete selected nodes/edges */
+  deleteSelected: () => void;
+  /** Fit view to show all nodes */
+  fitView: (nodeIds?: string[], padding?: number) => void;
+  /** Set zoom level */
+  zoomTo: (zoom: number) => void;
+  /** Zoom in */
+  zoomIn: () => void;
+  /** Zoom out */
+  zoomOut: () => void;
+  /** Pan to position */
+  panTo: (position: XYPosition) => void;
+  /** Check if a node is visible in the current viewport */
+  isNodeVisible: (id: string) => boolean;
+  /** Apply auto-layout using elkjs */
+  layout: (algorithm?: LayoutAlgorithm, options?: LayoutOptions) => Promise<void>;
+  /** Batch multiple operations */
+  batch: (fn: () => void) => void;
+  /** Get edges connected to a node */
+  getConnectedEdges: (nodeId: string) => FlowEdge[];
+  /** Get incoming edges for a node */
+  getIncomers: (nodeId: string) => FlowNode[];
+  /** Get outgoing edges from a node */
+  getOutgoers: (nodeId: string) => FlowNode[];
+  /** Called when a connection is made */
+  onConnect: (callback: (connection: Connection) => void) => () => void;
+  /** Called when nodes change */
+  onNodesChange: (callback: (changes: NodeChange[]) => void) => () => void;
+  /** Called when a node is clicked */
+  onNodeClick: (callback: (node: FlowNode) => void) => () => void;
+  /** Called when an edge is clicked */
+  onEdgeClick: (callback: (edge: FlowEdge) => void) => () => void;
+  /** Called when a node starts being dragged */
+  onNodeDragStart: (callback: (node: FlowNode) => void) => () => void;
+  /** Called when a node stops being dragged */
+  onNodeDragEnd: (callback: (node: FlowNode) => void) => () => void;
+  /** Called when a node is double-clicked */
+  onNodeDoubleClick: (callback: (node: FlowNode) => void) => () => void;
+  /** Copy selected nodes and their edges to clipboard */
+  copySelected: () => void;
+  /** Paste clipboard contents with offset */
+  paste: (offset?: XYPosition) => void;
+  /** Save current state to undo history */
+  pushHistory: () => void;
+  /** Undo last change */
+  undo: () => void;
+  /** Redo last undone change */
+  redo: () => void;
+  /** Move all selected nodes by dx/dy */
+  moveSelectedNodes: (dx: number, dy: number) => void;
+  /** Get snap guide lines for a dragged node */
+  getSnapLines: (dragNodeId: string, position: XYPosition, threshold?: number) => {
+    x: number | null;
+    y: number | null;
+    snappedPosition: XYPosition;
   };
-}
-/**
-* Calculate a straight edge path — direct line between two points.
-*/
-function getStraightPath(params) {
-  const {
-    sourceX,
-    sourceY,
-    targetX,
-    targetY
-  } = params;
-  const center = getCenter({
-    x: sourceX,
-    y: sourceY
-  }, {
-    x: targetX,
-    y: targetY
-  });
-  return {
-    path: `M${sourceX},${sourceY} L${targetX},${targetY}`,
-    labelX: center.x,
-    labelY: center.y
+  /** Get child nodes of a group node */
+  getChildNodes: (parentId: string) => FlowNode[];
+  /** Get absolute position of a node (accounting for parent offsets) */
+  getAbsolutePosition: (nodeId: string) => XYPosition;
+  /** Add a waypoint (bend point) to an edge */
+  addEdgeWaypoint: (edgeId: string, point: XYPosition, index?: number) => void;
+  /** Remove a waypoint from an edge */
+  removeEdgeWaypoint: (edgeId: string, index: number) => void;
+  /** Update a waypoint position */
+  updateEdgeWaypoint: (edgeId: string, index: number, point: XYPosition) => void;
+  /** Reconnect an edge to a new source/target */
+  reconnectEdge: (edgeId: string, newConnection: {
+    source?: string;
+    target?: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+  }) => void;
+  /** Find the nearest unconnected node within threshold distance */
+  getProximityConnection: (nodeId: string, threshold?: number) => Connection | null;
+  /** Get nodes that overlap with the given node */
+  getOverlappingNodes: (nodeId: string) => FlowNode[];
+  /** Push overlapping nodes apart */
+  resolveCollisions: (nodeId: string, spacing?: number) => void;
+  /** Set drag boundaries for all nodes — [[minX, minY], [maxX, maxY]] or null to remove */
+  setNodeExtent: (extent: [[number, number], [number, number]] | null) => void;
+  /** Clamp a position to the current node extent */
+  clampToExtent: (position: XYPosition, nodeWidth?: number, nodeHeight?: number) => XYPosition;
+  /** Find nodes matching a predicate */
+  findNodes: (predicate: (node: FlowNode) => boolean) => FlowNode[];
+  /** Find nodes by label text (case-insensitive) */
+  searchNodes: (query: string) => FlowNode[];
+  /** Focus viewport on a specific node (pan + optional zoom) */
+  focusNode: (nodeId: string, zoom?: number) => void;
+  /** Export the flow as a JSON-serializable object */
+  toJSON: () => {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    viewport: Viewport;
+  };
+  /** Import flow state from a JSON object */
+  fromJSON: (data: {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    viewport?: Viewport;
+  }) => void;
+  /** Animate viewport to a new position/zoom */
+  animateViewport: (target: Partial<Viewport>, duration?: number) => void;
+  /** @internal */
+  _emit: {
+    nodeDragStart: (node: FlowNode) => void;
+    nodeDragEnd: (node: FlowNode) => void;
+    nodeDoubleClick: (node: FlowNode) => void;
+    nodeClick: (node: FlowNode) => void;
+    edgeClick: (edge: FlowEdge) => void;
   };
+  /** The flow configuration */
+  config: FlowConfig;
+  /** Dispose all listeners and clean up */
+  dispose: () => void;
 }
-/**
-* Calculate a step edge path — right-angle segments with no rounding.
-*/
-function getStepPath(params) {
-  return getSmoothStepPath({
-    ...params,
-    borderRadius: 0
-  });
+type LayoutAlgorithm = 'layered' | 'force' | 'stress' | 'tree' | 'radial' | 'box' | 'rectpacking';
+interface LayoutOptions {
+  /** Layout direction — default: 'DOWN' */
+  direction?: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
+  /** Spacing between nodes — default: 50 */
+  nodeSpacing?: number;
+  /** Spacing between layers — default: 80 */
+  layerSpacing?: number;
+  /** Edge routing — default: 'orthogonal' */
+  edgeRouting?: 'orthogonal' | 'splines' | 'polyline';
+  /** Whether to animate the layout transition — default: true */
+  animate?: boolean;
+  /** Animation duration in ms — default: 300 */
+  animationDuration?: number;
 }
-/**
-* Calculate an edge path that passes through waypoints.
-* Uses line segments with optional smoothing.
-*/
-function getWaypointPath(params) {
-  const {
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    waypoints
-  } = params;
-  if (waypoints.length === 0) return getStraightPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY
-  });
-  const path = `M${[{
-    x: sourceX,
-    y: sourceY
-  }, ...waypoints, {
-    x: targetX,
-    y: targetY
-  }].map(p => `${p.x},${p.y}`).join(" L")}`;
-  const midPoint = waypoints[Math.floor(waypoints.length / 2)] ?? {
-    x: (sourceX + targetX) / 2,
-    y: (sourceY + targetY) / 2
-  };
-  return {
-    path,
-    labelX: midPoint.x,
-    labelY: midPoint.y
-  };
+interface FlowProps {
+  instance: FlowInstance;
+  style?: string;
+  class?: string;
+  children?: VNodeChild;
 }
-/**
-* Get the edge path for a given edge type.
-*/
-function getEdgePath(type, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition) {
-  switch (type) {
-    case "smoothstep":
-      return getSmoothStepPath({
-        sourceX,
-        sourceY,
-        sourcePosition,
-        targetX,
-        targetY,
-        targetPosition
-      });
-    case "straight":
-      return getStraightPath({
-        sourceX,
-        sourceY,
-        targetX,
-        targetY
-      });
-    case "step":
-      return getStepPath({
-        sourceX,
-        sourceY,
-        sourcePosition,
-        targetX,
-        targetY,
-        targetPosition
-      });
-    default:
-      return getBezierPath({
-        sourceX,
-        sourceY,
-        sourcePosition,
-        targetX,
-        targetY,
-        targetPosition
-      });
-  }
+interface BackgroundProps {
+  variant?: 'dots' | 'lines' | 'cross';
+  gap?: number;
+  size?: number;
+  color?: string;
 }
-
-//#endregion
-//#region src/components/flow-component.tsx
-/**
-* Default node renderer — simple labeled box.
-*/
-function DefaultNode(props) {
-  return /* @__PURE__ */jsx("div", {
-    style: `padding: 8px 16px; background: white; border: 2px solid ${props.selected ? "#3b82f6" : "#ddd"}; border-radius: 6px; font-size: 13px; min-width: 80px; text-align: center; cursor: ${props.dragging ? "grabbing" : "grab"}; user-select: none;`,
-    children: props.data?.label ?? props.id
-  });
+interface MiniMapProps {
+  style?: string;
+  class?: string;
+  nodeColor?: string | ((node: FlowNode) => string);
+  maskColor?: string;
+  width?: number;
+  height?: number;
 }
-function EdgeLayer(props) {
-  const {
-    instance,
-    connectionState,
-    edgeTypes
-  } = props;
-  return () => {
-    const nodes = instance.nodes();
-    const edges = instance.edges();
-    const nodeMap = new Map(nodes.map(n => [n.id, n]));
-    const conn = connectionState();
-    return /* @__PURE__ */jsxs("svg", {
-      role: "img",
-      "aria-label": "flow edges",
-      class: "pyreon-flow-edges",
-      style: "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;",
-      children: [/* @__PURE__ */jsx("defs", {
-        children: /* @__PURE__ */jsx("marker", {
-          id: "flow-arrowhead",
-          markerWidth: "10",
-          markerHeight: "7",
-          refX: "10",
-          refY: "3.5",
-          orient: "auto",
-          children: /* @__PURE__ */jsx("polygon", {
-            points: "0 0, 10 3.5, 0 7",
-            fill: "#999"
-          })
-        })
-      }), edges.map(edge => {
-        const sourceNode = nodeMap.get(edge.source);
-        const targetNode = nodeMap.get(edge.target);
-        if (!sourceNode || !targetNode) return /* @__PURE__ */jsx("g", {}, edge.id);
-        const sourceW = sourceNode.width ?? 150;
-        const sourceH = sourceNode.height ?? 40;
-        const targetW = targetNode.width ?? 150;
-        const targetH = targetNode.height ?? 40;
-        const {
-          sourcePosition,
-          targetPosition
-        } = getSmartHandlePositions(sourceNode, targetNode);
-        const sourcePos = getHandlePosition(sourcePosition, sourceNode.position.x, sourceNode.position.y, sourceW, sourceH);
-        const targetPos = getHandlePosition(targetPosition, targetNode.position.x, targetNode.position.y, targetW, targetH);
-        const {
-          path,
-          labelX,
-          labelY
-        } = edge.waypoints?.length ? getWaypointPath({
-          sourceX: sourcePos.x,
-          sourceY: sourcePos.y,
-          targetX: targetPos.x,
-          targetY: targetPos.y,
-          waypoints: edge.waypoints
-        }) : getEdgePath(edge.type ?? "bezier", sourcePos.x, sourcePos.y, sourcePosition, targetPos.x, targetPos.y, targetPosition);
-        const selectedEdges = instance.selectedEdges();
-        const isSelected = edge.id ? selectedEdges.includes(edge.id) : false;
-        const CustomEdge = edge.type && edgeTypes?.[edge.type];
-        if (CustomEdge) return /* @__PURE__ */jsx("g", {
-          onClick: () => edge.id && instance.selectEdge(edge.id),
-          children: /* @__PURE__ */jsx(CustomEdge, {
-            edge,
-            sourceX: sourcePos.x,
-            sourceY: sourcePos.y,
-            targetX: targetPos.x,
-            targetY: targetPos.y,
-            selected: isSelected
-          })
-        }, edge.id);
-        return /* @__PURE__ */jsxs("g", {
-          children: [/* @__PURE__ */jsx("path", {
-            d: path,
-            fill: "none",
-            stroke: isSelected ? "#3b82f6" : "#999",
-            "stroke-width": isSelected ? "2" : "1.5",
-            "marker-end": "url(#flow-arrowhead)",
-            class: edge.animated ? "pyreon-flow-edge-animated" : "",
-            style: `pointer-events: stroke; cursor: pointer; ${edge.style ?? ""}`,
-            onClick: () => {
-              if (edge.id) instance.selectEdge(edge.id);
-              instance._emit.edgeClick(edge);
-            }
-          }), edge.label && /* @__PURE__ */jsx("text", {
-            x: String(labelX),
-            y: String(labelY),
-            "text-anchor": "middle",
-            "dominant-baseline": "central",
-            style: "font-size: 11px; fill: #666; pointer-events: none;",
-            children: edge.label
-          })]
-        }, edge.id);
-      }), conn.active && /* @__PURE__ */jsx("path", {
-        d: getEdgePath("bezier", conn.sourceX, conn.sourceY, conn.sourcePosition, conn.currentX, conn.currentY, Position.Left).path,
-        fill: "none",
-        stroke: "#3b82f6",
-        "stroke-width": "2",
-        "stroke-dasharray": "5,5"
-      })]
-    });
-  };
+interface ControlsProps {
+  showZoomIn?: boolean;
+  showZoomOut?: boolean;
+  showFitView?: boolean;
+  showLock?: boolean;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
-function NodeLayer(props) {
-  const {
-    instance,
-    nodeTypes,
-    draggingNodeId,
-    onNodePointerDown,
-    onHandlePointerDown
-  } = props;
-  return () => {
-    const nodes = instance.nodes();
-    const selectedIds = instance.selectedNodes();
-    const dragId = draggingNodeId();
-    return /* @__PURE__ */jsx(Fragment, {
-      children: nodes.map(node => {
-        const isSelected = selectedIds.includes(node.id);
-        const isDragging = dragId === node.id;
-        const NodeComponent = node.type && nodeTypes[node.type] || nodeTypes.default;
-        return /* @__PURE__ */jsx("div", {
-          class: `pyreon-flow-node ${node.class ?? ""} ${isSelected ? "selected" : ""} ${isDragging ? "dragging" : ""}`,
-          style: `position: absolute; transform: translate(${node.position.x}px, ${node.position.y}px); z-index: ${isDragging ? 1e3 : isSelected ? 100 : 0}; ${node.style ?? ""}`,
-          "data-nodeid": node.id,
-          onClick: e => {
-            e.stopPropagation();
-            instance.selectNode(node.id, e.shiftKey);
-            instance._emit.nodeClick(node);
-          },
-          onDblclick: e => {
-            e.stopPropagation();
-            instance._emit.nodeDoubleClick(node);
-          },
-          onPointerdown: e => {
-            const handle = e.target.closest(".pyreon-flow-handle");
-            if (handle) {
-              const hType = handle.getAttribute("data-handletype") ?? "source";
-              const hId = handle.getAttribute("data-handleid") ?? "source";
-              const hPos = handle.getAttribute("data-handleposition") ?? Position.Right;
-              onHandlePointerDown(e, node.id, hType, hId, hPos);
-              return;
-            }
-            if (node.draggable !== false && instance.config.nodesDraggable !== false) onNodePointerDown(e, node);
-          },
-          children: /* @__PURE__ */jsx(NodeComponent, {
-            id: node.id,
-            data: node.data,
-            selected: isSelected,
-            dragging: isDragging
-          })
-        }, node.id);
-      })
-    });
-  };
+interface PanelProps {
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  style?: string;
+  class?: string;
+  children?: VNodeChild;
 }
-/**
-* The main Flow component — renders the interactive flow diagram.
-*
-* Supports node dragging, connection drawing, custom node types,
-* pan/zoom, and all standard flow interactions.
-*
-* @example
-* ```tsx
-* const flow = createFlow({
-*   nodes: [...],
-*   edges: [...],
-* })
-*
-* <Flow instance={flow} nodeTypes={{ custom: CustomNode }}>
-*   <Background />
-*   <MiniMap />
-*   <Controls />
-* </Flow>
-* ```
-*/
-function Flow(props) {
-  const {
-    instance,
-    children,
-    edgeTypes
-  } = props;
-  const nodeTypes = {
-    default: DefaultNode,
-    input: DefaultNode,
-    output: DefaultNode,
-    ...props.nodeTypes
-  };
-  const dragState = signal({
-    ...emptyDrag
-  });
-  const connectionState = signal({
-    ...emptyConnection
-  });
-  const selectionBox = signal({
-    ...emptySelectionBox
-  });
-  const helperLines = signal({
-    x: null,
-    y: null
-  });
-  const draggingNodeId = () => dragState().active ? dragState().nodeId : "";
-  const handleNodePointerDown = (e, node) => {
-    e.stopPropagation();
-    const selected = instance.selectedNodes();
-    const startPositions = /* @__PURE__ */new Map();
-    startPositions.set(node.id, {
-      ...node.position
-    });
-    if (selected.includes(node.id)) for (const nid of selected) {
-      if (nid === node.id) continue;
-      const n = instance.getNode(nid);
-      if (n) startPositions.set(nid, {
-        ...n.position
-      });
-    }
-    instance.pushHistory();
-    dragState.set({
-      active: true,
-      nodeId: node.id,
-      startX: e.clientX,
-      startY: e.clientY,
-      startPositions
-    });
-    instance.selectNode(node.id, e.shiftKey);
-    instance._emit.nodeDragStart(node);
-    const container = e.currentTarget.closest(".pyreon-flow");
-    if (container) container.setPointerCapture(e.pointerId);
-  };
-  const handleHandlePointerDown = (e, nodeId, _handleType, handleId, position) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const node = instance.getNode(nodeId);
-    if (!node) return;
-    const w = node.width ?? 150;
-    const h = node.height ?? 40;
-    const handlePos = getHandlePosition(position, node.position.x, node.position.y, w, h);
-    connectionState.set({
-      active: true,
-      sourceNodeId: nodeId,
-      sourceHandleId: handleId,
-      sourcePosition: position,
-      sourceX: handlePos.x,
-      sourceY: handlePos.y,
-      currentX: handlePos.x,
-      currentY: handlePos.y
-    });
-    const container = e.target.closest(".pyreon-flow");
-    if (container) container.setPointerCapture(e.pointerId);
-  };
-  const handleWheel = e => {
-    if (instance.config.zoomable === false) return;
-    e.preventDefault();
-    const delta = -e.deltaY * .001;
-    const newZoom = Math.min(Math.max(instance.viewport.peek().zoom * (1 + delta), instance.config.minZoom ?? .1), instance.config.maxZoom ?? 4);
-    const rect = e.currentTarget.getBoundingClientRect();
-    const mouseX = e.clientX - rect.left;
-    const mouseY = e.clientY - rect.top;
-    const vp = instance.viewport.peek();
-    const scale = newZoom / vp.zoom;
-    instance.viewport.set({
-      x: mouseX - (mouseX - vp.x) * scale,
-      y: mouseY - (mouseY - vp.y) * scale,
-      zoom: newZoom
-    });
-  };
-  let isPanning = false;
-  let panStartX = 0;
-  let panStartY = 0;
-  let panStartVpX = 0;
-  let panStartVpY = 0;
-  const handlePointerDown = e => {
-    if (instance.config.pannable === false) return;
-    const target = e.target;
-    if (target.closest(".pyreon-flow-node")) return;
-    if (target.closest(".pyreon-flow-handle")) return;
-    if (e.shiftKey && instance.config.multiSelect !== false) {
-      const container = e.currentTarget;
-      const rect = container.getBoundingClientRect();
-      const vp = instance.viewport.peek();
-      const flowX = (e.clientX - rect.left - vp.x) / vp.zoom;
-      const flowY = (e.clientY - rect.top - vp.y) / vp.zoom;
-      selectionBox.set({
-        active: true,
-        startX: flowX,
-        startY: flowY,
-        currentX: flowX,
-        currentY: flowY
-      });
-      container.setPointerCapture(e.pointerId);
-      return;
-    }
-    isPanning = true;
-    panStartX = e.clientX;
-    panStartY = e.clientY;
-    const vp = instance.viewport.peek();
-    panStartVpX = vp.x;
-    panStartVpY = vp.y;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    instance.clearSelection();
-  };
-  const handlePointerMove = e => {
-    const drag = dragState.peek();
-    const conn = connectionState.peek();
-    const sel = selectionBox.peek();
-    if (sel.active) {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const vp = instance.viewport.peek();
-      const flowX = (e.clientX - rect.left - vp.x) / vp.zoom;
-      const flowY = (e.clientY - rect.top - vp.y) / vp.zoom;
-      selectionBox.set({
-        ...sel,
-        currentX: flowX,
-        currentY: flowY
-      });
-      return;
-    }
-    if (drag.active) {
-      const vp = instance.viewport.peek();
-      const dx = (e.clientX - drag.startX) / vp.zoom;
-      const dy = (e.clientY - drag.startY) / vp.zoom;
-      const primaryStart = drag.startPositions.get(drag.nodeId);
-      if (!primaryStart) return;
-      const rawPos = {
-        x: primaryStart.x + dx,
-        y: primaryStart.y + dy
-      };
-      const snap = instance.getSnapLines(drag.nodeId, rawPos);
-      helperLines.set({
-        x: snap.x,
-        y: snap.y
-      });
-      const actualDx = snap.snappedPosition.x - primaryStart.x;
-      const actualDy = snap.snappedPosition.y - primaryStart.y;
-      instance.nodes.update(nds => nds.map(n => {
-        const start = drag.startPositions.get(n.id);
-        if (!start) return n;
-        return {
-          ...n,
-          position: {
-            x: start.x + actualDx,
-            y: start.y + actualDy
-          }
-        };
-      }));
-      return;
-    }
-    if (conn.active) {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const vp = instance.viewport.peek();
-      const flowX = (e.clientX - rect.left - vp.x) / vp.zoom;
-      const flowY = (e.clientY - rect.top - vp.y) / vp.zoom;
-      connectionState.set({
-        ...conn,
-        currentX: flowX,
-        currentY: flowY
-      });
-      return;
-    }
-    if (isPanning) {
-      const dx = e.clientX - panStartX;
-      const dy = e.clientY - panStartY;
-      instance.viewport.set({
-        ...instance.viewport.peek(),
-        x: panStartVpX + dx,
-        y: panStartVpY + dy
-      });
-    }
-  };
-  const handlePointerUp = e => {
-    const drag = dragState.peek();
-    const conn = connectionState.peek();
-    const sel = selectionBox.peek();
-    if (sel.active) {
-      const minX = Math.min(sel.startX, sel.currentX);
-      const minY = Math.min(sel.startY, sel.currentY);
-      const maxX = Math.max(sel.startX, sel.currentX);
-      const maxY = Math.max(sel.startY, sel.currentY);
-      instance.clearSelection();
-      for (const node of instance.nodes.peek()) {
-        const w = node.width ?? 150;
-        const h = node.height ?? 40;
-        const nx = node.position.x;
-        const ny = node.position.y;
-        if (nx + w > minX && nx < maxX && ny + h > minY && ny < maxY) instance.selectNode(node.id, true);
-      }
-      selectionBox.set({
-        ...emptySelectionBox
-      });
-      return;
-    }
-    if (drag.active) {
-      const node = instance.getNode(drag.nodeId);
-      if (node) instance._emit.nodeDragEnd(node);
-      dragState.set({
-        ...emptyDrag
-      });
-      helperLines.set({
-        x: null,
-        y: null
-      });
-    }
-    if (conn.active) {
-      const handle = e.target.closest(".pyreon-flow-handle");
-      if (handle) {
-        const targetNodeId = handle.closest(".pyreon-flow-node")?.getAttribute("data-nodeid") ?? "";
-        const targetHandleId = handle.getAttribute("data-handleid") ?? "target";
-        if (targetNodeId && targetNodeId !== conn.sourceNodeId) {
-          const connection = {
-            source: conn.sourceNodeId,
-            target: targetNodeId,
-            sourceHandle: conn.sourceHandleId,
-            targetHandle: targetHandleId
-          };
-          if (instance.isValidConnection(connection)) instance.addEdge({
-            source: connection.source,
-            target: connection.target,
-            sourceHandle: connection.sourceHandle,
-            targetHandle: connection.targetHandle
-          });
-        }
-      }
-      connectionState.set({
-        ...emptyConnection
-      });
-    }
-    isPanning = false;
-  };
-  const handleKeyDown = e => {
-    if (e.key === "Delete" || e.key === "Backspace") {
-      const target = e.target;
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
-      instance.pushHistory();
-      instance.deleteSelected();
-    }
-    if (e.key === "Escape") {
-      instance.clearSelection();
-      connectionState.set({
-        ...emptyConnection
-      });
-    }
-    if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      instance.selectAll();
-    }
-    if (e.key === "c" && (e.metaKey || e.ctrlKey)) instance.copySelected();
-    if (e.key === "v" && (e.metaKey || e.ctrlKey)) instance.paste();
-    if (e.key === "z" && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
-      e.preventDefault();
-      instance.undo();
-    }
-    if (e.key === "z" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
-      e.preventDefault();
-      instance.redo();
-    }
-  };
-  let lastTouchDist = 0;
-  let lastTouchCenter = {
-    x: 0,
-    y: 0
-  };
-  const handleTouchStart = e => {
-    if (e.touches.length === 2) {
-      e.preventDefault();
-      const t1 = e.touches[0];
-      const t2 = e.touches[1];
-      lastTouchDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-      lastTouchCenter = {
-        x: (t1.clientX + t2.clientX) / 2,
-        y: (t1.clientY + t2.clientY) / 2
-      };
-    }
-  };
-  const handleTouchMove = e => {
-    if (e.touches.length === 2 && instance.config.zoomable !== false) {
-      e.preventDefault();
-      const t1 = e.touches[0];
-      const t2 = e.touches[1];
-      const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-      const center = {
-        x: (t1.clientX + t2.clientX) / 2,
-        y: (t1.clientY + t2.clientY) / 2
-      };
-      const vp = instance.viewport.peek();
-      const scaleFactor = dist / lastTouchDist;
-      const newZoom = Math.min(Math.max(vp.zoom * scaleFactor, instance.config.minZoom ?? .1), instance.config.maxZoom ?? 4);
-      const rect = e.currentTarget.getBoundingClientRect();
-      const mouseX = center.x - rect.left;
-      const mouseY = center.y - rect.top;
-      const scale = newZoom / vp.zoom;
-      const panDx = center.x - lastTouchCenter.x;
-      const panDy = center.y - lastTouchCenter.y;
-      instance.viewport.set({
-        x: mouseX - (mouseX - vp.x) * scale + panDx,
-        y: mouseY - (mouseY - vp.y) * scale + panDy,
-        zoom: newZoom
-      });
-      lastTouchDist = dist;
-      lastTouchCenter = center;
-    }
-  };
-  let resizeObserver = null;
-  const containerRef = el => {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-      resizeObserver = null;
-    }
-    if (!el) return;
-    const updateSize = () => {
-      const rect = el.getBoundingClientRect();
-      instance.containerSize.set({
-        width: rect.width,
-        height: rect.height
-      });
-    };
-    updateSize();
-    resizeObserver = new ResizeObserver(updateSize);
-    resizeObserver.observe(el);
-  };
-  const containerStyle = `position: relative; width: 100%; height: 100%; overflow: hidden; outline: none; touch-action: none; ${props.style ?? ""}`;
-  return /* @__PURE__ */jsxs("div", {
-    ref: containerRef,
-    class: `pyreon-flow ${props.class ?? ""}`,
-    style: containerStyle,
-    tabIndex: 0,
-    onWheel: handleWheel,
-    onPointerdown: handlePointerDown,
-    onPointermove: handlePointerMove,
-    onPointerup: handlePointerUp,
-    onTouchstart: handleTouchStart,
-    onTouchmove: handleTouchMove,
-    onKeydown: handleKeyDown,
-    children: [children, () => {
-      const vp = instance.viewport();
-      return /* @__PURE__ */jsxs("div", {
-        class: "pyreon-flow-viewport",
-        style: `position: absolute; transform-origin: 0 0; transform: translate(${vp.x}px, ${vp.y}px) scale(${vp.zoom});`,
-        children: [/* @__PURE__ */jsx(EdgeLayer, {
-          instance,
-          connectionState: () => connectionState(),
-          edgeTypes
-        }), () => {
-          const sel = selectionBox();
-          if (!sel.active) return null;
-          return /* @__PURE__ */jsx("div", {
-            class: "pyreon-flow-selection-box",
-            style: `position: absolute; left: ${Math.min(sel.startX, sel.currentX)}px; top: ${Math.min(sel.startY, sel.currentY)}px; width: ${Math.abs(sel.currentX - sel.startX)}px; height: ${Math.abs(sel.currentY - sel.startY)}px; border: 1px dashed #3b82f6; background: rgba(59, 130, 246, 0.08); pointer-events: none; z-index: 10;`
-          });
-        }, () => {
-          const lines = helperLines();
-          if (!lines.x && !lines.y) return null;
-          return /* @__PURE__ */jsxs("svg", {
-            role: "img",
-            "aria-label": "helper lines",
-            style: "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5;",
-            children: [lines.x !== null && /* @__PURE__ */jsx("line", {
-              x1: String(lines.x),
-              y1: "-10000",
-              x2: String(lines.x),
-              y2: "10000",
-              stroke: "#3b82f6",
-              "stroke-width": "0.5",
-              "stroke-dasharray": "4,4"
-            }), lines.y !== null && /* @__PURE__ */jsx("line", {
-              x1: "-10000",
-              y1: String(lines.y),
-              x2: "10000",
-              y2: String(lines.y),
-              stroke: "#3b82f6",
-              "stroke-width": "0.5",
-              "stroke-dasharray": "4,4"
-            })]
-          });
-        }, /* @__PURE__ */jsx(NodeLayer, {
-          instance,
-          nodeTypes,
-          draggingNodeId,
-          onNodePointerDown: handleNodePointerDown,
-          onHandlePointerDown: handleHandlePointerDown
-        })]
-      });
-    }]
-  });
+interface HandleProps {
+  type: HandleType;
+  position: Position;
+  id?: string;
+  style?: string;
+  class?: string;
 }
-
+type NodeComponentProps<TData = Record<string, unknown>> = {
+  id: string;
+  data: TData;
+  selected: boolean;
+  dragging: boolean;
+};
 //#endregion
-//#region src/components/handle.tsx
-
+//#region src/components/background.d.ts
 /**
-* Connection handle — attachment point on a node where edges connect.
-* Place inside custom node components.
-*
-* @example
-* ```tsx
-* function CustomNode({ data }: NodeComponentProps) {
-*   return (
-*     <div class="custom-node">
-*       <Handle type="target" position={Position.Left} />
-*       <span>{data.label}</span>
-*       <Handle type="source" position={Position.Right} />
-*     </div>
-*   )
-* }
-* ```
-*/
-function Handle(props) {
-  const {
-    type,
-    position,
-    id,
-    style = ""
-  } = props;
-  const baseStyle = `position: absolute; ${positionOffset[position] ?? positionOffset.bottom} width: 8px; height: 8px; background: #555; border: 2px solid white; border-radius: 50%; cursor: crosshair; z-index: 1; ${style}`;
-  return /* @__PURE__ */jsx("div", {
-    class: `pyreon-flow-handle pyreon-flow-handle-${type} ${props.class ?? ""}`,
-    style: baseStyle,
-    "data-handletype": type,
-    "data-handleid": id ?? type,
-    "data-handleposition": position
-  });
-}
-
+ * Background pattern for the flow canvas.
+ * Renders dots, lines, or cross patterns that move with the viewport.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <Background variant="dots" gap={20} />
+ * </Flow>
+ * ```
+ */
+declare function Background(props: BackgroundProps): VNodeChild;
 //#endregion
-//#region src/components/minimap.tsx
+//#region src/components/controls.d.ts
 /**
-* Miniature overview of the flow diagram showing all nodes
-* and the current viewport position. Click to navigate.
-*
-* @example
-* ```tsx
-* <Flow instance={flow}>
-*   <MiniMap nodeColor={(n) => n.type === 'error' ? 'red' : '#ddd'} />
-* </Flow>
-* ```
-*/
-function MiniMap(props) {
-  const {
-    width = 200,
-    height = 150,
-    nodeColor = "#e2e8f0",
-    maskColor = "rgba(0, 0, 0, 0.08)",
-    instance
-  } = props;
-  if (!instance) return null;
-  const containerStyle = `position: absolute; bottom: 10px; right: 10px; width: ${width}px; height: ${height}px; border: 1px solid #ddd; background: white; border-radius: 4px; overflow: hidden; z-index: 5; cursor: pointer;`;
-  return () => {
-    const nodes = instance.nodes();
-    if (nodes.length === 0) return /* @__PURE__ */jsx("div", {
-      class: "pyreon-flow-minimap",
-      style: containerStyle
-    });
-    let minX = Number.POSITIVE_INFINITY;
-    let minY = Number.POSITIVE_INFINITY;
-    let maxX = Number.NEGATIVE_INFINITY;
-    let maxY = Number.NEGATIVE_INFINITY;
-    for (const node of nodes) {
-      const w = node.width ?? 150;
-      const h = node.height ?? 40;
-      minX = Math.min(minX, node.position.x);
-      minY = Math.min(minY, node.position.y);
-      maxX = Math.max(maxX, node.position.x + w);
-      maxY = Math.max(maxY, node.position.y + h);
-    }
-    const padding = 40;
-    const graphW = maxX - minX + padding * 2;
-    const graphH = maxY - minY + padding * 2;
-    const scale = Math.min(width / graphW, height / graphH);
-    const vp = instance.viewport();
-    const cs = instance.containerSize();
-    const vpLeft = (-vp.x / vp.zoom - minX + padding) * scale;
-    const vpTop = (-vp.y / vp.zoom - minY + padding) * scale;
-    const vpWidth = cs.width / vp.zoom * scale;
-    const vpHeight = cs.height / vp.zoom * scale;
-    const handleClick = e => {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
-      const clickY = e.clientY - rect.top;
-      const flowX = clickX / scale + minX - padding;
-      const flowY = clickY / scale + minY - padding;
-      instance.viewport.set({
-        ...vp,
-        x: -(flowX * vp.zoom) + cs.width / 2,
-        y: -(flowY * vp.zoom) + cs.height / 2
-      });
-    };
-    return /* @__PURE__ */jsx("div", {
-      class: "pyreon-flow-minimap",
-      style: containerStyle,
-      onClick: handleClick,
-      children: /* @__PURE__ */jsxs("svg", {
-        role: "img",
-        "aria-label": "minimap",
-        width: String(width),
-        height: String(height),
-        children: [/* @__PURE__ */jsx("rect", {
-          width: String(width),
-          height: String(height),
-          fill: maskColor
-        }), nodes.map(node => {
-          const w = (node.width ?? 150) * scale;
-          const h = (node.height ?? 40) * scale;
-          const x = (node.position.x - minX + padding) * scale;
-          const y = (node.position.y - minY + padding) * scale;
-          const color = typeof nodeColor === "function" ? nodeColor(node) : nodeColor;
-          return /* @__PURE__ */jsx("rect", {
-            x: String(x),
-            y: String(y),
-            width: String(w),
-            height: String(h),
-            fill: color,
-            rx: "2"
-          }, node.id);
-        }), /* @__PURE__ */jsx("rect", {
-          x: String(Math.max(0, vpLeft)),
-          y: String(Math.max(0, vpTop)),
-          width: String(Math.min(vpWidth, width)),
-          height: String(Math.min(vpHeight, height)),
-          fill: "none",
-          stroke: "#3b82f6",
-          "stroke-width": "1.5",
-          rx: "2"
-        })]
-      })
-    });
-  };
-}
-
+ * Zoom and viewport controls for the flow canvas.
+ * Shows zoom in, zoom out, fit view, and optional lock button.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <Controls />
+ * </Flow>
+ * ```
+ */
+declare function Controls(props: ControlsProps & {
+  instance?: FlowInstance;
+}): VNodeChild;
 //#endregion
-//#region src/components/node-resizer.tsx
-
-/**
-* Node resize handles. Place inside a custom node component
-* to allow users to resize the node by dragging corners or edges.
-*
-* Uses pointer capture for clean event handling — no document listener leaks.
-*
-* @example
-* ```tsx
-* function ResizableNode({ id, data, selected }: NodeComponentProps) {
-*   return (
-*     <div style="min-width: 100px; min-height: 50px; position: relative;">
-*       {data.label}
-*       <NodeResizer nodeId={id} instance={flow} />
-*     </div>
-*   )
-* }
-* ```
-*/
-function NodeResizer(props) {
-  const {
-    nodeId,
-    instance,
-    minWidth = 50,
-    minHeight = 30,
-    handleSize = 8,
-    showEdgeHandles = false
-  } = props;
-  const directions = showEdgeHandles ? ["nw", "ne", "sw", "se", "n", "s", "e", "w"] : ["nw", "ne", "sw", "se"];
-  const createHandler = dir => {
-    let startX = 0;
-    let startY = 0;
-    let startWidth = 0;
-    let startHeight = 0;
-    let startNodeX = 0;
-    let startNodeY = 0;
-    let zoomAtStart = 1;
-    const onPointerDown = e => {
-      e.stopPropagation();
-      e.preventDefault();
-      const node = instance.getNode(nodeId);
-      if (!node) return;
-      startX = e.clientX;
-      startY = e.clientY;
-      startWidth = node.width ?? 150;
-      startHeight = node.height ?? 40;
-      startNodeX = node.position.x;
-      startNodeY = node.position.y;
-      zoomAtStart = instance.viewport.peek().zoom;
-      e.currentTarget.setPointerCapture(e.pointerId);
-    };
-    const onPointerMove = e => {
-      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
-      const dx = (e.clientX - startX) / zoomAtStart;
-      const dy = (e.clientY - startY) / zoomAtStart;
-      let newW = startWidth;
-      let newH = startHeight;
-      let newX = startNodeX;
-      let newY = startNodeY;
-      if (dir === "e" || dir === "se" || dir === "ne") newW = Math.max(minWidth, startWidth + dx);
-      if (dir === "w" || dir === "sw" || dir === "nw") {
-        newW = Math.max(minWidth, startWidth - dx);
-        newX = startNodeX + startWidth - newW;
-      }
-      if (dir === "s" || dir === "se" || dir === "sw") newH = Math.max(minHeight, startHeight + dy);
-      if (dir === "n" || dir === "ne" || dir === "nw") {
-        newH = Math.max(minHeight, startHeight - dy);
-        newY = startNodeY + startHeight - newH;
-      }
-      instance.updateNode(nodeId, {
-        width: newW,
-        height: newH,
-        position: {
-          x: newX,
-          y: newY
-        }
-      });
-    };
-    const onPointerUp = e => {
-      const el = e.currentTarget;
-      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
-    };
-    return {
-      onPointerDown,
-      onPointerMove,
-      onPointerUp
-    };
-  };
-  const size = `${handleSize}px`;
-  const baseStyle = `position: absolute; width: ${size}; height: ${size}; background: white; border: 1.5px solid #3b82f6; border-radius: 2px; z-index: 2;`;
-  return /* @__PURE__ */jsx(Fragment, {
-    children: directions.map(dir => {
-      const handler = createHandler(dir);
-      return /* @__PURE__ */jsx("div", {
-        class: `pyreon-flow-resizer pyreon-flow-resizer-${dir}`,
-        style: `${baseStyle} ${directionPositions[dir]} cursor: ${directionCursors[dir]};`,
-        onPointerdown: handler.onPointerDown,
-        onPointermove: handler.onPointerMove,
-        onPointerup: handler.onPointerUp
-      }, dir);
-    })
-  });
+//#region src/components/flow-component.d.ts
+type NodeTypeMap = Record<string, (props: NodeComponentProps<any>) => VNodeChild>;
+type EdgeTypeMap = Record<string, (props: {
+  edge: FlowEdge;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  selected: boolean;
+}) => VNodeChild>;
+interface FlowComponentProps {
+  instance: FlowInstance;
+  /** Custom node type renderers */
+  nodeTypes?: NodeTypeMap;
+  /** Custom edge type renderers */
+  edgeTypes?: EdgeTypeMap;
+  style?: string;
+  class?: string;
+  children?: VNodeChild;
 }
-
+/**
+ * The main Flow component — renders the interactive flow diagram.
+ *
+ * Supports node dragging, connection drawing, custom node types,
+ * pan/zoom, and all standard flow interactions.
+ *
+ * @example
+ * ```tsx
+ * const flow = createFlow({
+ *   nodes: [...],
+ *   edges: [...],
+ * })
+ *
+ * <Flow instance={flow} nodeTypes={{ custom: CustomNode }}>
+ *   <Background />
+ *   <MiniMap />
+ *   <Controls />
+ * </Flow>
+ * ```
+ */
+declare function Flow(props: FlowComponentProps): VNodeChild;
 //#endregion
-//#region src/components/node-toolbar.tsx
-
+//#region src/components/handle.d.ts
 /**
-* Floating toolbar that appears near a node, typically when selected.
-* Place inside a custom node component.
-*
-* @example
-* ```tsx
-* function EditableNode({ id, data, selected }: NodeComponentProps) {
-*   return (
-*     <div class="node">
-*       {data.label}
-*       <NodeToolbar selected={selected}>
-*         <button onClick={() => duplicate(id)}>Duplicate</button>
-*         <button onClick={() => remove(id)}>Delete</button>
-*       </NodeToolbar>
-*     </div>
-*   )
-* }
-* ```
-*/
-function NodeToolbar(props) {
-  const {
-    position = "top",
-    offset = 8,
-    showOnSelect = true,
-    selected = false,
-    children
-  } = props;
-  if (showOnSelect && !selected) return null;
-  const baseStyle = `position: absolute; ${positionStyles$1[position] ?? positionStyles$1.top} ${position === "top" ? `margin-bottom: ${offset}px;` : position === "bottom" ? `margin-top: ${offset}px;` : position === "left" ? `margin-right: ${offset}px;` : `margin-left: ${offset}px;`} z-index: 10; display: flex; gap: 4px; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); ${props.style ?? ""}`;
-  return /* @__PURE__ */jsx("div", {
-    class: `pyreon-flow-node-toolbar ${props.class ?? ""}`,
-    style: baseStyle,
-    children
-  });
-}
-
+ * Connection handle — attachment point on a node where edges connect.
+ * Place inside custom node components.
+ *
+ * @example
+ * ```tsx
+ * function CustomNode({ data }: NodeComponentProps) {
+ *   return (
+ *     <div class="custom-node">
+ *       <Handle type="target" position={Position.Left} />
+ *       <span>{data.label}</span>
+ *       <Handle type="source" position={Position.Right} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function Handle(props: HandleProps): VNodeChild;
 //#endregion
-//#region src/components/panel.tsx
-
+//#region src/components/minimap.d.ts
 /**
-* Positioned overlay panel for custom content inside the flow canvas.
-*
-* @example
-* ```tsx
-* <Flow instance={flow}>
-*   <Panel position="top-right">
-*     <SearchBar />
-*   </Panel>
-* </Flow>
-* ```
-*/
-function Panel(props) {
-  const {
-    position = "top-left",
-    style = "",
-    children
-  } = props;
-  const baseStyle = `position: absolute; ${positionStyles[position] ?? positionStyles["top-left"]} z-index: 5; ${style}`;
-  return /* @__PURE__ */jsx("div", {
-    class: `pyreon-flow-panel ${props.class ?? ""}`,
-    style: baseStyle,
-    children
-  });
-}
-
+ * Miniature overview of the flow diagram showing all nodes
+ * and the current viewport position. Click to navigate.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <MiniMap nodeColor={(n) => n.type === 'error' ? 'red' : '#ddd'} />
+ * </Flow>
+ * ```
+ */
+declare function MiniMap(props: MiniMapProps & {
+  instance?: FlowInstance;
+}): VNodeChild;
 //#endregion
-//#region src/layout.ts
-
-async function getELK() {
-  if (elkInstance) return elkInstance;
-  if (elkPromise) return elkPromise;
-  elkPromise = import("./elk.bundled.d.ts").then(m => /* @__PURE__ */__toESM(m.default, 1)).then(mod => {
-    elkInstance = new (mod.default || mod)();
-    return elkInstance;
-  });
-  return elkPromise;
-}
-function toElkGraph(nodes, edges, algorithm, options) {
-  const layoutOptions = {
-    "elk.algorithm": ELK_ALGORITHMS[algorithm] ?? ELK_ALGORITHMS.layered
-  };
-  if (options.direction) layoutOptions["elk.direction"] = ELK_DIRECTIONS[options.direction] ?? "DOWN";
-  if (options.nodeSpacing !== void 0) layoutOptions["elk.spacing.nodeNode"] = String(options.nodeSpacing);
-  if (options.layerSpacing !== void 0) layoutOptions["elk.layered.spacing.nodeNodeBetweenLayers"] = String(options.layerSpacing);
-  if (options.edgeRouting) layoutOptions["elk.edgeRouting"] = {
-    orthogonal: "ORTHOGONAL",
-    splines: "SPLINES",
-    polyline: "POLYLINE"
-  }[options.edgeRouting] ?? "ORTHOGONAL";
-  return {
-    id: "root",
-    layoutOptions,
-    children: nodes.map(node => ({
-      id: node.id,
-      width: node.width ?? 150,
-      height: node.height ?? 40
-    })),
-    edges: edges.map((edge, i) => ({
-      id: edge.id ?? `e-${i}`,
-      sources: [edge.source],
-      targets: [edge.target]
-    }))
-  };
+//#region src/components/node-resizer.d.ts
+interface NodeResizerProps {
+  nodeId: string;
+  instance: FlowInstance;
+  /** Minimum width — default: 50 */
+  minWidth?: number;
+  /** Minimum height — default: 30 */
+  minHeight?: number;
+  /** Handle size in px — default: 8 */
+  handleSize?: number;
+  /** Also show edge (non-corner) resize handles — default: false */
+  showEdgeHandles?: boolean;
 }
 /**
-* Compute a layout for the given nodes and edges using elkjs.
-* Returns an array of { id, position } for each node.
-*
-* elkjs is lazy-loaded — zero bundle cost until this function is called.
-*
-* @example
-* ```ts
-* const positions = await computeLayout(nodes, edges, 'layered', {
-*   direction: 'RIGHT',
-*   nodeSpacing: 50,
-*   layerSpacing: 100,
-* })
-* // positions: [{ id: '1', position: { x: 0, y: 0 } }, ...]
-* ```
-*/
-async function computeLayout(nodes, edges, algorithm = "layered", options = {}) {
-  const elk = await getELK();
-  const graph = toElkGraph(nodes, edges, algorithm, options);
-  return ((await elk.layout(graph)).children ?? []).map(child => ({
-    id: child.id,
-    position: {
-      x: child.x ?? 0,
-      y: child.y ?? 0
-    }
-  }));
+ * Node resize handles. Place inside a custom node component
+ * to allow users to resize the node by dragging corners or edges.
+ *
+ * Uses pointer capture for clean event handling — no document listener leaks.
+ *
+ * @example
+ * ```tsx
+ * function ResizableNode({ id, data, selected }: NodeComponentProps) {
+ *   return (
+ *     <div style="min-width: 100px; min-height: 50px; position: relative;">
+ *       {data.label}
+ *       <NodeResizer nodeId={id} instance={flow} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function NodeResizer(props: NodeResizerProps): VNodeChild;
+//#endregion
+//#region src/components/node-toolbar.d.ts
+interface NodeToolbarProps {
+  /** Position relative to node — default: 'top' */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /** Offset from node in px — default: 8 */
+  offset?: number;
+  /** Only show when node is selected — default: true */
+  showOnSelect?: boolean;
+  /** Whether the node is currently selected */
+  selected?: boolean;
+  style?: string;
+  class?: string;
+  children?: VNodeChild;
 }
-
+/**
+ * Floating toolbar that appears near a node, typically when selected.
+ * Place inside a custom node component.
+ *
+ * @example
+ * ```tsx
+ * function EditableNode({ id, data, selected }: NodeComponentProps) {
+ *   return (
+ *     <div class="node">
+ *       {data.label}
+ *       <NodeToolbar selected={selected}>
+ *         <button onClick={() => duplicate(id)}>Duplicate</button>
+ *         <button onClick={() => remove(id)}>Delete</button>
+ *       </NodeToolbar>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function NodeToolbar(props: NodeToolbarProps): VNodeChild;
 //#endregion
-//#region src/flow.ts
+//#region src/components/panel.d.ts
 /**
-* Generate a unique edge id from source/target.
-*/
-function edgeId(edge) {
-  if (edge.id) return edge.id;
-  const sh = edge.sourceHandle ? `-${edge.sourceHandle}` : "";
-  const th = edge.targetHandle ? `-${edge.targetHandle}` : "";
-  return `e-${edge.source}${sh}-${edge.target}${th}`;
-}
+ * Positioned overlay panel for custom content inside the flow canvas.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <Panel position="top-right">
+ *     <SearchBar />
+ *   </Panel>
+ * </Flow>
+ * ```
+ */
+declare function Panel(props: PanelProps): VNodeChild;
+//#endregion
+//#region src/edges.d.ts
+/**
+ * Auto-detect the best handle position based on relative node positions.
+ * If the node has configured handles, uses those. Otherwise picks the
+ * closest edge (top/right/bottom/left) based on direction to the other node.
+ */
+declare function getSmartHandlePositions(sourceNode: FlowNode, targetNode: FlowNode): {
+  sourcePosition: Position;
+  targetPosition: Position;
+};
+/**
+ * Get the handle position offset for a given position (top/right/bottom/left).
+ */
+declare function getHandlePosition(position: Position, nodeX: number, nodeY: number, nodeWidth: number, nodeHeight: number, _handleId?: string): XYPosition;
+/**
+ * Calculate a cubic bezier edge path between two points.
+ *
+ * @example
+ * ```ts
+ * const { path, labelX, labelY } = getBezierPath({
+ *   sourceX: 0, sourceY: 0, sourcePosition: Position.Right,
+ *   targetX: 200, targetY: 100, targetPosition: Position.Left,
+ * })
+ * // path = "M0,0 C100,0 100,100 200,100"
+ * ```
+ */
+declare function getBezierPath(params: {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+  curvature?: number;
+}): EdgePathResult;
 /**
-* Create a reactive flow instance — the core state manager for flow diagrams.
-*
-* All state is signal-based. Nodes, edges, viewport, and selection are
-* reactive and update the UI automatically when modified.
-*
-* @param config - Initial configuration with nodes, edges, and options
-* @returns A FlowInstance with signals and methods for managing the diagram
-*
-* @example
-* ```tsx
-* const flow = createFlow({
-*   nodes: [
-*     { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
-*     { id: '2', position: { x: 200, y: 100 }, data: { label: 'End' } },
-*   ],
-*   edges: [{ source: '1', target: '2' }],
-* })
-*
-* flow.nodes()          // reactive node list
-* flow.viewport()       // { x: 0, y: 0, zoom: 1 }
-* flow.addNode({ id: '3', position: { x: 400, y: 0 }, data: { label: 'New' } })
-* flow.layout('layered', { direction: 'RIGHT' })
-* ```
-*/
-function createFlow(config = {}) {
-  const {
-    nodes: initialNodes = [],
-    edges: initialEdges = [],
-    defaultEdgeType = "bezier",
-    minZoom = .1,
-    maxZoom = 4,
-    snapToGrid = false,
-    snapGrid = 15,
-    connectionRules
-  } = config;
-  const edgesWithIds = initialEdges.map(e => ({
-    ...e,
-    id: edgeId(e),
-    type: e.type ?? defaultEdgeType
-  }));
-  const nodes = signal([...initialNodes]);
-  const edges = signal(edgesWithIds);
-  const viewport = signal({
-    x: 0,
-    y: 0,
-    zoom: 1
-  });
-  const containerSize = signal({
-    width: 800,
-    height: 600
-  });
-  const selectedNodeIds = signal(/* @__PURE__ */new Set());
-  const selectedEdgeIds = signal(/* @__PURE__ */new Set());
-  const zoom = computed(() => viewport().zoom);
-  const selectedNodes = computed(() => [...selectedNodeIds()]);
-  const selectedEdges = computed(() => [...selectedEdgeIds()]);
-  const connectListeners = /* @__PURE__ */new Set();
-  const nodesChangeListeners = /* @__PURE__ */new Set();
-  const nodeClickListeners = /* @__PURE__ */new Set();
-  const edgeClickListeners = /* @__PURE__ */new Set();
-  const nodeDragStartListeners = /* @__PURE__ */new Set();
-  const nodeDragEndListeners = /* @__PURE__ */new Set();
-  const nodeDoubleClickListeners = /* @__PURE__ */new Set();
-  function emitNodeChanges(changes) {
-    for (const cb of nodesChangeListeners) cb(changes);
-  }
-  function getNode(id) {
-    return nodes.peek().find(n => n.id === id);
-  }
-  function addNode(node) {
-    nodes.update(nds => [...nds, node]);
-  }
-  function removeNode(id) {
-    batch(() => {
-      nodes.update(nds => nds.filter(n => n.id !== id));
-      edges.update(eds => eds.filter(e => e.source !== id && e.target !== id));
-      selectedNodeIds.update(set => {
-        const next = new Set(set);
-        next.delete(id);
-        return next;
-      });
-    });
-    emitNodeChanges([{
-      type: "remove",
-      id
-    }]);
-  }
-  function updateNode(id, update) {
-    nodes.update(nds => nds.map(n => n.id === id ? {
-      ...n,
-      ...update
-    } : n));
-  }
-  function updateNodePosition(id, position) {
-    let pos = snapToGrid ? {
-      x: Math.round(position.x / snapGrid) * snapGrid,
-      y: Math.round(position.y / snapGrid) * snapGrid
-    } : position;
-    const node = getNode(id);
-    pos = clampToExtent(pos, node?.width, node?.height);
-    nodes.update(nds => nds.map(n => n.id === id ? {
-      ...n,
-      position: pos
-    } : n));
-    emitNodeChanges([{
-      type: "position",
-      id,
-      position: pos
-    }]);
-  }
-  function getEdge(id) {
-    return edges.peek().find(e => e.id === id);
-  }
-  function addEdge(edge) {
-    const newEdge = {
-      ...edge,
-      id: edgeId(edge),
-      type: edge.type ?? defaultEdgeType
-    };
-    if (edges.peek().some(e => e.id === newEdge.id)) return;
-    edges.update(eds => [...eds, newEdge]);
-    const connection = {
-      source: edge.source,
-      target: edge.target,
-      sourceHandle: edge.sourceHandle,
-      targetHandle: edge.targetHandle
-    };
-    for (const cb of connectListeners) cb(connection);
-  }
-  function removeEdge(id) {
-    edges.update(eds => eds.filter(e => e.id !== id));
-    selectedEdgeIds.update(set => {
-      const next = new Set(set);
-      next.delete(id);
-      return next;
-    });
-  }
-  function isValidConnection(connection) {
-    if (!connectionRules) return true;
-    const sourceNode = getNode(connection.source);
-    if (!sourceNode) return false;
-    const rule = connectionRules[sourceNode.type ?? "default"];
-    if (!rule) return true;
-    const targetNode = getNode(connection.target);
-    if (!targetNode) return false;
-    const targetType = targetNode.type ?? "default";
-    return rule.outputs.includes(targetType);
-  }
-  function selectNode(id, additive = false) {
-    selectedNodeIds.update(set => {
-      const next = additive ? new Set(set) : /* @__PURE__ */new Set();
-      next.add(id);
-      return next;
-    });
-    if (!additive) selectedEdgeIds.set(/* @__PURE__ */new Set());
-  }
-  function deselectNode(id) {
-    selectedNodeIds.update(set => {
-      const next = new Set(set);
-      next.delete(id);
-      return next;
-    });
-  }
-  function selectEdge(id, additive = false) {
-    selectedEdgeIds.update(set => {
-      const next = additive ? new Set(set) : /* @__PURE__ */new Set();
-      next.add(id);
-      return next;
-    });
-    if (!additive) selectedNodeIds.set(/* @__PURE__ */new Set());
-  }
-  function clearSelection() {
-    batch(() => {
-      selectedNodeIds.set(/* @__PURE__ */new Set());
-      selectedEdgeIds.set(/* @__PURE__ */new Set());
-    });
-  }
-  function selectAll() {
-    selectedNodeIds.set(new Set(nodes.peek().map(n => n.id)));
-  }
-  function deleteSelected() {
-    batch(() => {
-      const nodeIdsToRemove = selectedNodeIds.peek();
-      const edgeIdsToRemove = selectedEdgeIds.peek();
-      if (nodeIdsToRemove.size > 0) {
-        nodes.update(nds => nds.filter(n => !nodeIdsToRemove.has(n.id)));
-        edges.update(eds => eds.filter(e => !nodeIdsToRemove.has(e.source) && !nodeIdsToRemove.has(e.target) && !edgeIdsToRemove.has(e.id)));
-      } else if (edgeIdsToRemove.size > 0) edges.update(eds => eds.filter(e => !edgeIdsToRemove.has(e.id)));
-      selectedNodeIds.set(/* @__PURE__ */new Set());
-      selectedEdgeIds.set(/* @__PURE__ */new Set());
-    });
-  }
-  function fitView(nodeIds, padding = config.fitViewPadding ?? .1) {
-    const targetNodes = nodeIds ? nodes.peek().filter(n => nodeIds.includes(n.id)) : nodes.peek();
-    if (targetNodes.length === 0) return;
-    let minX = Number.POSITIVE_INFINITY;
-    let minY = Number.POSITIVE_INFINITY;
-    let maxX = Number.NEGATIVE_INFINITY;
-    let maxY = Number.NEGATIVE_INFINITY;
-    for (const node of targetNodes) {
-      const w = node.width ?? 150;
-      const h = node.height ?? 40;
-      minX = Math.min(minX, node.position.x);
-      minY = Math.min(minY, node.position.y);
-      maxX = Math.max(maxX, node.position.x + w);
-      maxY = Math.max(maxY, node.position.y + h);
-    }
-    const graphWidth = maxX - minX;
-    const graphHeight = maxY - minY;
-    const {
-      width: containerWidth,
-      height: containerHeight
-    } = containerSize.peek();
-    const zoomX = containerWidth / (graphWidth * (1 + padding * 2));
-    const zoomY = containerHeight / (graphHeight * (1 + padding * 2));
-    const newZoom = Math.min(Math.max(Math.min(zoomX, zoomY), minZoom), maxZoom);
-    const centerX = (minX + maxX) / 2;
-    const centerY = (minY + maxY) / 2;
-    viewport.set({
-      x: containerWidth / 2 - centerX * newZoom,
-      y: containerHeight / 2 - centerY * newZoom,
-      zoom: newZoom
-    });
-  }
-  function zoomTo(z) {
-    viewport.update(v => ({
-      ...v,
-      zoom: Math.min(Math.max(z, minZoom), maxZoom)
-    }));
-  }
-  function zoomIn() {
-    viewport.update(v => ({
-      ...v,
-      zoom: Math.min(v.zoom * 1.2, maxZoom)
-    }));
-  }
-  function zoomOut() {
-    viewport.update(v => ({
-      ...v,
-      zoom: Math.max(v.zoom / 1.2, minZoom)
-    }));
-  }
-  function panTo(position) {
-    viewport.update(v => ({
-      ...v,
-      x: -position.x * v.zoom,
-      y: -position.y * v.zoom
-    }));
-  }
-  function isNodeVisible(id) {
-    const node = getNode(id);
-    if (!node) return false;
-    const v = viewport.peek();
-    const w = node.width ?? 150;
-    const h = node.height ?? 40;
-    const screenX = node.position.x * v.zoom + v.x;
-    const screenY = node.position.y * v.zoom + v.y;
-    const screenW = w * v.zoom;
-    const screenH = h * v.zoom;
-    const {
-      width: cw,
-      height: ch
-    } = containerSize.peek();
-    return screenX + screenW > 0 && screenX < cw && screenY + screenH > 0 && screenY < ch;
-  }
-  async function layout(algorithm = "layered", options = {}) {
-    const currentNodes = nodes.peek();
-    const positions = await computeLayout(currentNodes, edges.peek(), algorithm, options);
-    const animate = options.animate !== false;
-    const duration = options.animationDuration ?? 300;
-    if (!animate) {
-      batch(() => {
-        nodes.update(nds => nds.map(node => {
-          const pos = positions.find(p => p.id === node.id);
-          return pos ? {
-            ...node,
-            position: pos.position
-          } : node;
-        }));
-      });
-      return;
-    }
-    const startPositions = new Map(currentNodes.map(n => [n.id, {
-      ...n.position
-    }]));
-    const targetPositions = new Map(positions.map(p => [p.id, p.position]));
-    const startTime = performance.now();
-    const animateFrame = () => {
-      const elapsed = performance.now() - startTime;
-      const t = Math.min(elapsed / duration, 1);
-      const eased = 1 - (1 - t) ** 3;
-      batch(() => {
-        nodes.update(nds => nds.map(node => {
-          const start = startPositions.get(node.id);
-          const end = targetPositions.get(node.id);
-          if (!start || !end) return node;
-          return {
-            ...node,
-            position: {
-              x: start.x + (end.x - start.x) * eased,
-              y: start.y + (end.y - start.y) * eased
-            }
-          };
-        }));
-      });
-      if (t < 1) requestAnimationFrame(animateFrame);
-    };
-    requestAnimationFrame(animateFrame);
-  }
-  function batchOp(fn) {
-    batch(fn);
-  }
-  function getConnectedEdges(nodeId) {
-    return edges.peek().filter(e => e.source === nodeId || e.target === nodeId);
-  }
-  function getIncomers(nodeId) {
-    const incomingEdges = edges.peek().filter(e => e.target === nodeId);
-    const sourceIds = new Set(incomingEdges.map(e => e.source));
-    return nodes.peek().filter(n => sourceIds.has(n.id));
-  }
-  function getOutgoers(nodeId) {
-    const outgoingEdges = edges.peek().filter(e => e.source === nodeId);
-    const targetIds = new Set(outgoingEdges.map(e => e.target));
-    return nodes.peek().filter(n => targetIds.has(n.id));
-  }
-  function onConnect(callback) {
-    connectListeners.add(callback);
-    return () => connectListeners.delete(callback);
-  }
-  function onNodesChange(callback) {
-    nodesChangeListeners.add(callback);
-    return () => nodesChangeListeners.delete(callback);
-  }
-  function onNodeClick(callback) {
-    nodeClickListeners.add(callback);
-    return () => nodeClickListeners.delete(callback);
-  }
-  function onEdgeClick(callback) {
-    edgeClickListeners.add(callback);
-    return () => edgeClickListeners.delete(callback);
-  }
-  function onNodeDragStart(callback) {
-    nodeDragStartListeners.add(callback);
-    return () => nodeDragStartListeners.delete(callback);
-  }
-  function onNodeDragEnd(callback) {
-    nodeDragEndListeners.add(callback);
-    return () => nodeDragEndListeners.delete(callback);
-  }
-  function onNodeDoubleClick(callback) {
-    nodeDoubleClickListeners.add(callback);
-    return () => nodeDoubleClickListeners.delete(callback);
-  }
-  let clipboard = null;
-  function copySelected() {
-    const selectedNodeSet = selectedNodeIds.peek();
-    if (selectedNodeSet.size === 0) return;
-    const copiedNodes = nodes.peek().filter(n => selectedNodeSet.has(n.id));
-    const nodeIdSet = new Set(copiedNodes.map(n => n.id));
-    clipboard = {
-      nodes: copiedNodes,
-      edges: edges.peek().filter(e => nodeIdSet.has(e.source) && nodeIdSet.has(e.target))
-    };
-  }
-  function paste(offset = {
-    x: 50,
-    y: 50
-  }) {
-    if (!clipboard) return;
-    const idMap = /* @__PURE__ */new Map();
-    const newNodes = [];
-    for (const node of clipboard.nodes) {
-      const newId = `${node.id}-copy-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-      idMap.set(node.id, newId);
-      newNodes.push({
-        ...node,
-        id: newId,
-        position: {
-          x: node.position.x + offset.x,
-          y: node.position.y + offset.y
-        }
-      });
-    }
-    const newEdges = clipboard.edges.map(e => ({
-      ...e,
-      id: void 0,
-      source: idMap.get(e.source) ?? e.source,
-      target: idMap.get(e.target) ?? e.target
-    }));
-    batch(() => {
-      for (const node of newNodes) addNode(node);
-      for (const edge of newEdges) addEdge(edge);
-      selectedNodeIds.set(new Set(newNodes.map(n => n.id)));
-      selectedEdgeIds.set(/* @__PURE__ */new Set());
-    });
-  }
-  const undoStack = [];
-  const redoStack = [];
-  const maxHistory = 50;
-  function pushHistory() {
-    undoStack.push({
-      nodes: structuredClone(nodes.peek()),
-      edges: structuredClone(edges.peek())
-    });
-    if (undoStack.length > maxHistory) undoStack.shift();
-    redoStack.length = 0;
-  }
-  function undo() {
-    const prev = undoStack.pop();
-    if (!prev) return;
-    redoStack.push({
-      nodes: structuredClone(nodes.peek()),
-      edges: structuredClone(edges.peek())
-    });
-    batch(() => {
-      nodes.set(prev.nodes);
-      edges.set(prev.edges);
-      clearSelection();
-    });
-  }
-  function redo() {
-    const next = redoStack.pop();
-    if (!next) return;
-    undoStack.push({
-      nodes: structuredClone(nodes.peek()),
-      edges: structuredClone(edges.peek())
-    });
-    batch(() => {
-      nodes.set(next.nodes);
-      edges.set(next.edges);
-      clearSelection();
-    });
-  }
-  function moveSelectedNodes(dx, dy) {
-    const selected = selectedNodeIds.peek();
-    if (selected.size === 0) return;
-    nodes.update(nds => nds.map(n => {
-      if (!selected.has(n.id)) return n;
-      return {
-        ...n,
-        position: {
-          x: n.position.x + dx,
-          y: n.position.y + dy
-        }
-      };
-    }));
-  }
-  function getSnapLines(dragNodeId, position, threshold = 5) {
-    const dragNode = getNode(dragNodeId);
-    if (!dragNode) return {
-      x: null,
-      y: null,
-      snappedPosition: position
-    };
-    const w = dragNode.width ?? 150;
-    const h = dragNode.height ?? 40;
-    const dragCenterX = position.x + w / 2;
-    const dragCenterY = position.y + h / 2;
-    let snapX = null;
-    let snapY = null;
-    let snappedX = position.x;
-    let snappedY = position.y;
-    for (const node of nodes.peek()) {
-      if (node.id === dragNodeId) continue;
-      const nw = node.width ?? 150;
-      const nh = node.height ?? 40;
-      const nodeCenterX = node.position.x + nw / 2;
-      const nodeCenterY = node.position.y + nh / 2;
-      if (Math.abs(dragCenterX - nodeCenterX) < threshold) {
-        snapX = nodeCenterX;
-        snappedX = nodeCenterX - w / 2;
-      }
-      if (Math.abs(position.x - node.position.x) < threshold) {
-        snapX = node.position.x;
-        snappedX = node.position.x;
-      }
-      if (Math.abs(position.x + w - (node.position.x + nw)) < threshold) {
-        snapX = node.position.x + nw;
-        snappedX = node.position.x + nw - w;
-      }
-      if (Math.abs(dragCenterY - nodeCenterY) < threshold) {
-        snapY = nodeCenterY;
-        snappedY = nodeCenterY - h / 2;
-      }
-      if (Math.abs(position.y - node.position.y) < threshold) {
-        snapY = node.position.y;
-        snappedY = node.position.y;
-      }
-      if (Math.abs(position.y + h - (node.position.y + nh)) < threshold) {
-        snapY = node.position.y + nh;
-        snappedY = node.position.y + nh - h;
-      }
-    }
-    return {
-      x: snapX,
-      y: snapY,
-      snappedPosition: {
-        x: snappedX,
-        y: snappedY
-      }
-    };
-  }
-  function getChildNodes(parentId) {
-    return nodes.peek().filter(n => n.parentId === parentId);
-  }
-  function getAbsolutePosition(nodeId) {
-    const node = getNode(nodeId);
-    if (!node) return {
-      x: 0,
-      y: 0
-    };
-    if (node.parentId) {
-      const parentPos = getAbsolutePosition(node.parentId);
-      return {
-        x: parentPos.x + node.position.x,
-        y: parentPos.y + node.position.y
-      };
-    }
-    return node.position;
-  }
-  function reconnectEdge(targetEdgeId, newConnection) {
-    edges.update(eds => eds.map(e => {
-      if (e.id !== targetEdgeId) return e;
-      return {
-        ...e,
-        source: newConnection.source ?? e.source,
-        target: newConnection.target ?? e.target,
-        sourceHandle: newConnection.sourceHandle ?? e.sourceHandle,
-        targetHandle: newConnection.targetHandle ?? e.targetHandle
-      };
-    }));
-  }
-  function addEdgeWaypoint(edgeIdentifier, point, index) {
-    edges.update(eds => eds.map(e => {
-      if (e.id !== edgeIdentifier) return e;
-      const waypoints = [...(e.waypoints ?? [])];
-      if (index !== void 0) waypoints.splice(index, 0, point);else waypoints.push(point);
-      return {
-        ...e,
-        waypoints
-      };
-    }));
-  }
-  function removeEdgeWaypoint(edgeIdentifier, index) {
-    edges.update(eds => eds.map(e => {
-      if (e.id !== edgeIdentifier) return e;
-      const waypoints = [...(e.waypoints ?? [])];
-      waypoints.splice(index, 1);
-      return {
-        ...e,
-        waypoints: waypoints.length > 0 ? waypoints : void 0
-      };
-    }));
-  }
-  function updateEdgeWaypoint(edgeIdentifier, index, point) {
-    edges.update(eds => eds.map(e => {
-      if (e.id !== edgeIdentifier) return e;
-      const waypoints = [...(e.waypoints ?? [])];
-      if (index >= 0 && index < waypoints.length) waypoints[index] = point;
-      return {
-        ...e,
-        waypoints
-      };
-    }));
-  }
-  function getProximityConnection(nodeId, threshold = 50) {
-    const node = getNode(nodeId);
-    if (!node) return null;
-    const w = node.width ?? 150;
-    const h = node.height ?? 40;
-    const centerX = node.position.x + w / 2;
-    const centerY = node.position.y + h / 2;
-    let closest = null;
-    for (const other of nodes.peek()) {
-      if (other.id === nodeId) continue;
-      if (edges.peek().some(e => e.source === nodeId && e.target === other.id || e.source === other.id && e.target === nodeId)) continue;
-      const ow = other.width ?? 150;
-      const oh = other.height ?? 40;
-      const ocx = other.position.x + ow / 2;
-      const ocy = other.position.y + oh / 2;
-      const dist = Math.hypot(centerX - ocx, centerY - ocy);
-      if (dist < threshold && (!closest || dist < closest.dist)) closest = {
-        nodeId: other.id,
-        dist
-      };
-    }
-    if (!closest) return null;
-    const connection = {
-      source: nodeId,
-      target: closest.nodeId
-    };
-    return isValidConnection(connection) ? connection : null;
-  }
-  function getOverlappingNodes(nodeId) {
-    const node = getNode(nodeId);
-    if (!node) return [];
-    const w = node.width ?? 150;
-    const h = node.height ?? 40;
-    const ax1 = node.position.x;
-    const ay1 = node.position.y;
-    const ax2 = ax1 + w;
-    const ay2 = ay1 + h;
-    return nodes.peek().filter(other => {
-      if (other.id === nodeId) return false;
-      const ow = other.width ?? 150;
-      const oh = other.height ?? 40;
-      const bx1 = other.position.x;
-      const by1 = other.position.y;
-      const bx2 = bx1 + ow;
-      const by2 = by1 + oh;
-      return ax1 < bx2 && ax2 > bx1 && ay1 < by2 && ay2 > by1;
-    });
-  }
-  function resolveCollisions(nodeId, spacing = 10) {
-    const overlapping = getOverlappingNodes(nodeId);
-    if (overlapping.length === 0) return;
-    const node = getNode(nodeId);
-    if (!node) return;
-    const w = node.width ?? 150;
-    const h = node.height ?? 40;
-    for (const other of overlapping) {
-      const ow = other.width ?? 150;
-      const oh = other.height ?? 40;
-      const overlapX = Math.min(node.position.x + w - other.position.x, other.position.x + ow - node.position.x);
-      const overlapY = Math.min(node.position.y + h - other.position.y, other.position.y + oh - node.position.y);
-      if (overlapX < overlapY) {
-        const dx = node.position.x < other.position.x ? -(overlapX + spacing) / 2 : (overlapX + spacing) / 2;
-        updateNodePosition(other.id, {
-          x: other.position.x - dx,
-          y: other.position.y
-        });
-      } else {
-        const dy = node.position.y < other.position.y ? -(overlapY + spacing) / 2 : (overlapY + spacing) / 2;
-        updateNodePosition(other.id, {
-          x: other.position.x,
-          y: other.position.y - dy
-        });
-      }
-    }
-  }
-  function setNodeExtent(extent) {
-    nodeExtent = extent;
-  }
-  let nodeExtent = config.nodeExtent ?? null;
-  function clampToExtent(position, nodeWidth = 150, nodeHeight = 40) {
-    if (!nodeExtent) return position;
-    return {
-      x: Math.min(Math.max(position.x, nodeExtent[0][0]), nodeExtent[1][0] - nodeWidth),
-      y: Math.min(Math.max(position.y, nodeExtent[0][1]), nodeExtent[1][1] - nodeHeight)
-    };
-  }
-  function findNodes(predicate) {
-    return nodes.peek().filter(predicate);
-  }
-  function searchNodes(query) {
-    const q = query.toLowerCase();
-    return nodes.peek().filter(n => {
-      return (n.data?.label ?? n.id).toLowerCase().includes(q);
-    });
-  }
-  function focusNode(nodeId, focusZoom) {
-    const node = getNode(nodeId);
-    if (!node) return;
-    const w = node.width ?? 150;
-    const h = node.height ?? 40;
-    const centerX = node.position.x + w / 2;
-    const centerY = node.position.y + h / 2;
-    const z = focusZoom ?? viewport.peek().zoom;
-    const {
-      width: cw,
-      height: ch
-    } = containerSize.peek();
-    animateViewport({
-      x: -centerX * z + cw / 2,
-      y: -centerY * z + ch / 2,
-      zoom: z
-    });
-    selectNode(nodeId);
-  }
-  function toJSON() {
-    return {
-      nodes: structuredClone(nodes.peek()),
-      edges: structuredClone(edges.peek()),
-      viewport: {
-        ...viewport.peek()
-      }
-    };
-  }
-  function fromJSON(data) {
-    batch(() => {
-      nodes.set(data.nodes);
-      edges.set(data.edges.map(e => ({
-        ...e,
-        id: e.id ?? edgeId(e),
-        type: e.type ?? defaultEdgeType
-      })));
-      if (data.viewport) viewport.set(data.viewport);
-      clearSelection();
-    });
-  }
-  function animateViewport(target, duration = 300) {
-    const start = {
-      ...viewport.peek()
-    };
-    const end = {
-      x: target.x ?? start.x,
-      y: target.y ?? start.y,
-      zoom: target.zoom ?? start.zoom
-    };
-    const startTime = performance.now();
-    const frame = () => {
-      const elapsed = performance.now() - startTime;
-      const t = Math.min(elapsed / duration, 1);
-      const eased = 1 - (1 - t) ** 3;
-      viewport.set({
-        x: start.x + (end.x - start.x) * eased,
-        y: start.y + (end.y - start.y) * eased,
-        zoom: start.zoom + (end.zoom - start.zoom) * eased
-      });
-      if (t < 1) requestAnimationFrame(frame);
-    };
-    requestAnimationFrame(frame);
-  }
-  function dispose() {
-    connectListeners.clear();
-    nodesChangeListeners.clear();
-    nodeClickListeners.clear();
-    edgeClickListeners.clear();
-    nodeDragStartListeners.clear();
-    nodeDragEndListeners.clear();
-    nodeDoubleClickListeners.clear();
-  }
-  if (config.fitView) fitView();
-  return {
-    nodes,
-    edges,
-    viewport,
-    zoom,
-    containerSize,
-    selectedNodes,
-    selectedEdges,
-    getNode,
-    addNode,
-    removeNode,
-    updateNode,
-    updateNodePosition,
-    getEdge,
-    addEdge,
-    removeEdge,
-    isValidConnection,
-    selectNode,
-    deselectNode,
-    selectEdge,
-    clearSelection,
-    selectAll,
-    deleteSelected,
-    fitView,
-    zoomTo,
-    zoomIn,
-    zoomOut,
-    panTo,
-    isNodeVisible,
-    layout,
-    batch: batchOp,
-    getConnectedEdges,
-    getIncomers,
-    getOutgoers,
-    onConnect,
-    onNodesChange,
-    onNodeClick,
-    onEdgeClick,
-    onNodeDragStart,
-    onNodeDragEnd,
-    onNodeDoubleClick,
-    _emit: {
-      nodeDragStart: node => {
-        for (const cb of nodeDragStartListeners) cb(node);
-      },
-      nodeDragEnd: node => {
-        for (const cb of nodeDragEndListeners) cb(node);
-      },
-      nodeDoubleClick: node => {
-        for (const cb of nodeDoubleClickListeners) cb(node);
-      },
-      nodeClick: node => {
-        for (const cb of nodeClickListeners) cb(node);
-      },
-      edgeClick: edge => {
-        for (const cb of edgeClickListeners) cb(edge);
-      }
-    },
-    copySelected,
-    paste,
-    pushHistory,
-    undo,
-    redo,
-    moveSelectedNodes,
-    getSnapLines,
-    getChildNodes,
-    getAbsolutePosition,
-    addEdgeWaypoint,
-    removeEdgeWaypoint,
-    updateEdgeWaypoint,
-    reconnectEdge,
-    getProximityConnection,
-    getOverlappingNodes,
-    resolveCollisions,
-    setNodeExtent,
-    clampToExtent,
-    findNodes,
-    searchNodes,
-    focusNode,
-    toJSON,
-    fromJSON,
-    animateViewport,
-    config,
-    dispose
+ * Calculate a smoothstep edge path — horizontal/vertical segments with rounded corners.
+ */
+declare function getSmoothStepPath(params: {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+  borderRadius?: number;
+  offset?: number;
+}): EdgePathResult;
+/**
+ * Calculate a straight edge path — direct line between two points.
+ */
+declare function getStraightPath(params: {
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+}): EdgePathResult;
+/**
+ * Calculate a step edge path — right-angle segments with no rounding.
+ */
+declare function getStepPath(params: {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+}): EdgePathResult;
+/**
+ * Calculate an edge path that passes through waypoints.
+ * Uses line segments with optional smoothing.
+ */
+declare function getWaypointPath(params: {
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  waypoints: XYPosition[];
+}): EdgePathResult;
+/**
+ * Get the edge path for a given edge type.
+ */
+declare function getEdgePath(type: string, sourceX: number, sourceY: number, sourcePosition: Position, targetX: number, targetY: number, targetPosition: Position): EdgePathResult;
+//#endregion
+//#region src/flow.d.ts
+/**
+ * Create a reactive flow instance — the core state manager for flow diagrams.
+ *
+ * All state is signal-based. Nodes, edges, viewport, and selection are
+ * reactive and update the UI automatically when modified.
+ *
+ * @param config - Initial configuration with nodes, edges, and options
+ * @returns A FlowInstance with signals and methods for managing the diagram
+ *
+ * @example
+ * ```tsx
+ * const flow = createFlow({
+ *   nodes: [
+ *     { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
+ *     { id: '2', position: { x: 200, y: 100 }, data: { label: 'End' } },
+ *   ],
+ *   edges: [{ source: '1', target: '2' }],
+ * })
+ *
+ * flow.nodes()          // reactive node list
+ * flow.viewport()       // { x: 0, y: 0, zoom: 1 }
+ * flow.addNode({ id: '3', position: { x: 400, y: 0 }, data: { label: 'New' } })
+ * flow.layout('layered', { direction: 'RIGHT' })
+ * ```
+ */
+declare function createFlow(config?: FlowConfig): FlowInstance;
+//#endregion
+//#region src/layout.d.ts
+/**
+ * Compute a layout for the given nodes and edges using elkjs.
+ * Returns an array of { id, position } for each node.
+ *
+ * elkjs is lazy-loaded — zero bundle cost until this function is called.
+ *
+ * @example
+ * ```ts
+ * const positions = await computeLayout(nodes, edges, 'layered', {
+ *   direction: 'RIGHT',
+ *   nodeSpacing: 50,
+ *   layerSpacing: 100,
+ * })
+ * // positions: [{ id: '1', position: { x: 0, y: 0 } }, ...]
+ * ```
+ */
+declare function computeLayout(nodes: FlowNode[], edges: FlowEdge[], algorithm?: LayoutAlgorithm, options?: LayoutOptions): Promise<Array<{
+  id: string;
+  position: {
+    x: number;
+    y: number;
   };
-}
-
+}>>;
 //#endregion
-//#region src/styles.ts
+//#region src/styles.d.ts
 /**
-* Default CSS styles for the flow diagram.
-* Inject via `<style>` tag or import in your CSS.
-*
-* @example
-* ```tsx
-* import { flowStyles } from '@pyreon/flow'
-*
-* // Inject once at app root
-* const style = document.createElement('style')
-* style.textContent = flowStyles
-* document.head.appendChild(style)
-* ```
-*/
-
+ * Default CSS styles for the flow diagram.
+ * Inject via `<style>` tag or import in your CSS.
+ *
+ * @example
+ * ```tsx
+ * import { flowStyles } from '@pyreon/flow'
+ *
+ * // Inject once at app root
+ * const style = document.createElement('style')
+ * style.textContent = flowStyles
+ * document.head.appendChild(style)
+ * ```
+ */
+declare const flowStyles = "\n/* \u2500\u2500 Animated edges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-edge-animated {\n  stroke-dasharray: 5;\n  animation: pyreon-flow-edge-dash 0.5s linear infinite;\n}\n\n@keyframes pyreon-flow-edge-dash {\n  to {\n    stroke-dashoffset: -10;\n  }\n}\n\n/* \u2500\u2500 Node states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-node {\n  transition: box-shadow 0.15s ease;\n}\n\n.pyreon-flow-node.dragging {\n  opacity: 0.9;\n  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));\n  cursor: grabbing;\n}\n\n.pyreon-flow-node.selected {\n  filter: drop-shadow(0 0 0 2px rgba(59, 130, 246, 0.3));\n}\n\n/* \u2500\u2500 Handles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-handle {\n  transition: transform 0.1s ease, background 0.1s ease;\n}\n\n.pyreon-flow-handle:hover {\n  transform: scale(1.4);\n  background: #3b82f6 !important;\n}\n\n.pyreon-flow-handle-target:hover {\n  background: #22c55e !important;\n  border-color: #22c55e !important;\n}\n\n/* \u2500\u2500 Resizer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-resizer {\n  transition: background 0.1s ease, transform 0.1s ease;\n}\n\n.pyreon-flow-resizer:hover {\n  background: #3b82f6 !important;\n  transform: scale(1.2);\n}\n\n/* \u2500\u2500 Selection box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-selection-box {\n  pointer-events: none;\n  border-radius: 2px;\n}\n\n/* \u2500\u2500 MiniMap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-minimap {\n  transition: opacity 0.2s ease;\n}\n\n.pyreon-flow-minimap:hover {\n  opacity: 1 !important;\n}\n\n/* \u2500\u2500 Node toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-node-toolbar {\n  animation: pyreon-flow-toolbar-enter 0.15s ease;\n}\n\n@keyframes pyreon-flow-toolbar-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n/* \u2500\u2500 Controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-controls button:hover {\n  background: #f3f4f6 !important;\n}\n\n.pyreon-flow-controls button:active {\n  background: #e5e7eb !important;\n}\n";
 //#endregion
-export { Background, Controls, Flow, Handle, MiniMap, NodeResizer, NodeToolbar, Panel, Position, computeLayout, createFlow, flowStyles, getBezierPath, getEdgePath, getHandlePosition, getSmartHandlePositions, getSmoothStepPath, getStepPath, getStraightPath, getWaypointPath };
-//# sourceMappingURL=index.d.ts.map
+export { Background, type BackgroundProps, type Connection, type ConnectionRule, Controls, type ControlsProps, type Dimensions, type EdgePathResult, type EdgeType, Flow, type FlowComponentProps, type FlowConfig, type FlowEdge, type FlowInstance, type FlowNode, type FlowProps, Handle, type HandleConfig, type HandleProps, type HandleType, type LayoutAlgorithm, type LayoutOptions, MiniMap, type MiniMapProps, type NodeChange, type NodeComponentProps, NodeResizer, type NodeResizerProps, NodeToolbar, type NodeToolbarProps, Panel, type PanelProps, Position, type Rect, type Viewport, type XYPosition, computeLayout, createFlow, flowStyles, getBezierPath, getEdgePath, getHandlePosition, getSmartHandlePositions, getSmoothStepPath, getStepPath, getStraightPath, getWaypointPath };
+//# sourceMappingURL=index2.d.ts.map