@pyreon/flow 0.5.0

package/lib/types/index.d.ts

@@ -0,0 +1,2342 @@
+import { r as __toESM } from "./chunk.js";
+import { batch, 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
+  };
+}
+function normalizeChildren(children) {
+  for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
+  return children;
+}
+function flattenChildren(children) {
+  const result = [];
+  for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));else result.push(child);
+  return result;
+}
+/**
+* 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]));
+}
+//#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})`
+    })]
+  });
+}
+
+//#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, "%"]
+      })]
+    });
+  };
+}
+
+//#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
+  };
+}
+/**
+* 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
+  };
+}
+/**
+* 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
+      };
+  }
+}
+/**
+* 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
+  };
+}
+/**
+* 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
+  };
+}
+/**
+* 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
+  };
+}
+/**
+* Calculate a step edge path — right-angle segments with no rounding.
+*/
+function getStepPath(params) {
+  return getSmoothStepPath({
+    ...params,
+    borderRadius: 0
+  });
+}
+/**
+* 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
+  };
+}
+/**
+* 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
+      });
+  }
+}
+
+//#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
+  });
+}
+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"
+      })]
+    });
+  };
+}
+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);
+      })
+    });
+  };
+}
+/**
+* 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
+        })]
+      });
+    }]
+  });
+}
+
+//#endregion
+//#region src/components/handle.tsx
+
+/**
+* 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
+  });
+}
+
+//#endregion
+//#region src/components/minimap.tsx
+/**
+* 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"
+        })]
+      })
+    });
+  };
+}
+
+//#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);
+    })
+  });
+}
+
+//#endregion
+//#region src/components/node-toolbar.tsx
+
+/**
+* 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
+  });
+}
+
+//#endregion
+//#region src/components/panel.tsx
+
+/**
+* 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
+  });
+}
+
+//#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]
+    }))
+  };
+}
+/**
+* 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
+    }
+  }));
+}
+
+//#endregion
+//#region src/flow.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}`;
+}
+/**
+* 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
+  };
+}
+
+//#endregion
+//#region src/styles.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)
+* ```
+*/
+
+//#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