avoid-nodes-edge 0.1.0

package/README.md

@@ -0,0 +1,501 @@
+# avoid-nodes-edge
+
+Orthogonal edge routing for [React Flow](https://reactflow.dev/) — edges automatically route around nodes using [libavoid-js](https://github.com/nicknisi/libavoid-js) (WASM). All WASM and routing computation runs exclusively in a **Web Worker**, keeping the main thread free and your UI smooth.
+
+## Features
+
+- Orthogonal (right-angle) edge routing that avoids overlapping nodes
+- WASM routing engine runs entirely in a Web Worker — zero main-thread jank
+- Incremental updates: dragging a node only re-routes affected edges
+- Parallel edge support with automatic offset
+- Configurable spacing, rounding, and grid snapping
+- ER relationship labels (one-to-one, one-to-many, etc.)
+- Fallback rendering (smooth-step/straight paths) while the worker loads
+- Works with React Flow v12+
+
+## Install
+
+```bash
+npm install avoid-nodes-edge
+```
+
+```bash
+yarn add avoid-nodes-edge
+```
+
+```bash
+pnpm add avoid-nodes-edge
+```
+
+### Peer Dependencies
+
+| Package | Version |
+|---|---|
+| `react` | >= 18.0.0 |
+| `react-dom` | >= 18.0.0 |
+| `@xyflow/react` | >= 12.0.0 |
+| `zustand` | >= 4.0.0 |
+
+## Quick Start
+
+### 1. Serve the WASM binary
+
+The routing engine uses a WebAssembly binary from `libavoid-js`. Copy it to your `public/` directory so it's served at `/libavoid.wasm`:
+
+```bash
+cp node_modules/libavoid-js/dist/libavoid.wasm public/libavoid.wasm
+```
+
+Or automate it with a postinstall script in your `package.json`:
+
+```json
+{
+  "scripts": {
+    "postinstall": "node scripts/copy-libavoid-wasm.cjs"
+  }
+}
+```
+
+Create `scripts/copy-libavoid-wasm.cjs`:
+
+```js
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+// Search both local and hoisted (monorepo) node_modules
+const candidates = [
+  path.join(__dirname, "..", "node_modules", "libavoid-js", "dist", "libavoid.wasm"),
+  path.join(__dirname, "..", "..", "..", "node_modules", "libavoid-js", "dist", "libavoid.wasm"),
+];
+
+const src = candidates.find((p) => fs.existsSync(p));
+const dest = path.join(__dirname, "..", "public", "libavoid.wasm");
+
+if (!src) {
+  console.warn("[copy-libavoid-wasm] libavoid.wasm not found — run npm install first");
+  process.exit(0);
+}
+
+const publicDir = path.dirname(dest);
+if (!fs.existsSync(publicDir)) {
+  fs.mkdirSync(publicDir, { recursive: true });
+}
+
+fs.copyFileSync(src, dest);
+console.log("[copy-libavoid-wasm] Copied libavoid.wasm to public/");
+```
+
+This script handles both flat and hoisted `node_modules` layouts (npm workspaces, monorepos).
+
+### 2. Configure your bundler
+
+#### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  worker: {
+    format: 'es',
+  },
+  optimizeDeps: {
+    exclude: ['avoid-nodes-edge'],
+  },
+});
+```
+
+#### Next.js / Webpack
+
+Web Workers with ES modules require additional webpack configuration. Ensure your bundler supports the `new URL(..., import.meta.url)` pattern for worker resolution.
+
+### 3. Add to your React Flow app
+
+```tsx
+import { useState, useCallback } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
+  type Node,
+  type Edge,
+  type NodeChange,
+  type EdgeChange,
+  type Connection,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { AvoidNodesEdge } from 'avoid-nodes-edge/edge';
+import { useAvoidNodesRouterFromWorker } from 'avoid-nodes-edge';
+
+// Register the custom edge type
+const edgeTypes = { avoidNodes: AvoidNodesEdge };
+
+const initialNodes: Node[] = [
+  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
+  { id: '2', position: { x: 300, y: 0 }, data: { label: 'Node 2' } },
+  { id: '3', position: { x: 150, y: 150 }, data: { label: 'Node 3' } },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', type: 'avoidNodes' },
+];
+
+function Flow() {
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+  // Set up the worker-based router
+  const { updateRoutingOnNodesChange, resetRouting } =
+    useAvoidNodesRouterFromWorker(nodes, edges, {
+      edgeToNodeSpacing: 12,
+      edgeToEdgeSpacing: 10,
+      edgeRounding: 8,
+    });
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange<Node>[]) => {
+      setNodes((nds) => applyNodeChanges(changes, nds));
+      updateRoutingOnNodesChange(changes);
+    },
+    [updateRoutingOnNodesChange]
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange<Edge>[]) => {
+      setEdges((eds) => applyEdgeChanges(changes, eds));
+      const needsReset = changes.some((c) => c.type === 'add' || c.type === 'remove');
+      if (needsReset) requestAnimationFrame(() => resetRouting());
+    },
+    [resetRouting]
+  );
+
+  const onConnect = useCallback(
+    (params: Connection) => {
+      setEdges((eds) => addEdge({ ...params, type: 'avoidNodes' }, eds));
+      requestAnimationFrame(() => resetRouting());
+    },
+    [resetRouting]
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      edgeTypes={edgeTypes}
+      defaultEdgeOptions={{ type: 'avoidNodes' }}
+      fitView
+    />
+  );
+}
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <Flow />
+    </ReactFlowProvider>
+  );
+}
+```
+
+> **Important:** Edges must have `type: "avoidNodes"` to be processed by the router.
+
+## API Reference
+
+### `useAvoidNodesRouterFromWorker(nodes, edges, options?)`
+
+The main hook. Manages the Web Worker lifecycle and routes edges around nodes.
+
+```ts
+import { useAvoidNodesRouterFromWorker } from 'avoid-nodes-edge';
+
+const { updateRoutingOnNodesChange, resetRouting, refreshRouting, updateRoutingForNodeIds } =
+  useAvoidNodesRouterFromWorker(nodes, edges, options);
+```
+
+#### Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `edgeToNodeSpacing` | `number` | `8` | Buffer distance (px) between edges and node boundaries |
+| `edgeToEdgeSpacing` | `number` | `10` | Distance (px) between parallel edge segments |
+| `edgeRounding` | `number` | `0` | Corner radius (px) for rounded orthogonal bends |
+| `diagramGridSize` | `number` | `0` | Snap edge waypoints to a grid of this size (0 = no grid) |
+| `shouldSplitEdgesNearHandle` | `boolean` | `undefined` | Split edges near connection handles |
+
+#### Return Value
+
+| Property | Type | Description |
+|---|---|---|
+| `updateRoutingOnNodesChange` | `(changes: NodeChange[]) => void` | Call from `onNodesChange`. Handles incremental updates on drag/resize and full resets on add/remove. |
+| `resetRouting` | `() => void` | Force a full re-route of all edges |
+| `refreshRouting` | `() => void` | Re-route using current node/edge state |
+| `updateRoutingForNodeIds` | `(nodeIds: string[]) => void` | Incrementally re-route edges for specific nodes |
+
+---
+
+### `AvoidNodesEdge`
+
+Custom React Flow edge component that renders the routed path.
+
+```tsx
+import { AvoidNodesEdge } from 'avoid-nodes-edge/edge';
+
+const edgeTypes = { avoidNodes: AvoidNodesEdge };
+```
+
+Falls back to a smooth-step or straight path while the worker is loading WASM. Once loaded, renders the computed orthogonal route.
+
+#### Edge Data Properties
+
+Customize individual edges via the `data` property:
+
+```ts
+const edges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'avoidNodes',
+    data: {
+      label: 'connects to',
+      strokeColor: '#3b82f6',
+      strokeWidth: 2,
+      strokeDasharray: '5,5',
+      flowDirection: 'mono',      // 'mono' | 'bi' | 'none'
+      erRelation: 'one-to-many',  // ER relationship label
+      connectorType: 'default',   // 'default' | 'straight' | 'smoothstep' | 'step'
+    },
+  },
+];
+```
+
+| Data Property | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | `""` | Text label displayed at the edge midpoint |
+| `strokeColor` | `string` | `"#94a3b8"` | Edge stroke color |
+| `strokeWidth` | `number` | `1.5` | Edge stroke width (px) |
+| `strokeDasharray` | `string` | `undefined` | SVG dash pattern (e.g. `"5,5"`) |
+| `flowDirection` | `"mono" \| "bi" \| "none"` | `"mono"` | Arrow direction: one-way, bidirectional, or none |
+| `markerEnd` | `string` | `undefined` | Custom SVG marker at the end |
+| `markerStart` | `string` | `undefined` | Custom SVG marker at the start |
+| `erRelation` | `string` | `null` | ER relationship: `"one-to-one"`, `"one-to-many"`, `"many-to-one"`, `"many-to-many"` |
+| `connectorType` | `string` | `"default"` | Path shape for parallel offsets |
+
+---
+
+### `useAvoidNodesPath(params)`
+
+Low-level hook that reads the routed path for a single edge from the store. Used internally by `AvoidNodesEdge` — useful if you're building a custom edge component.
+
+```ts
+import { useAvoidNodesPath } from 'avoid-nodes-edge';
+
+const [path, labelX, labelY, wasRouted] = useAvoidNodesPath({
+  id: 'edge-1',
+  sourceX: 100,
+  sourceY: 50,
+  targetX: 400,
+  targetY: 200,
+  sourcePosition: 'right',
+  targetPosition: 'left',
+});
+```
+
+| Parameter | Type | Description |
+|---|---|---|
+| `id` | `string` | Edge ID to look up in the routes store |
+| `sourceX/Y` | `number` | Source handle coordinates |
+| `targetX/Y` | `number` | Target handle coordinates |
+| `sourcePosition` | `"left" \| "right" \| "top" \| "bottom"` | Source handle side |
+| `targetPosition` | `"left" \| "right" \| "top" \| "bottom"` | Target handle side |
+| `borderRadius` | `number` | Fallback smooth-step border radius |
+| `offset` | `number` | Fallback smooth-step offset |
+
+Returns `[path, labelX, labelY, wasRouted]` — `wasRouted` is `false` while the worker is loading.
+
+---
+
+### `useAvoidRoutesStore`
+
+Zustand store holding the computed routes from the worker.
+
+```ts
+import { useAvoidRoutesStore } from 'avoid-nodes-edge';
+
+// Read routes
+const routes = useAvoidRoutesStore((s) => s.routes);
+const loaded = useAvoidRoutesStore((s) => s.loaded);
+
+// Check a specific edge
+const edgeRoute = useAvoidRoutesStore((s) => s.routes['edge-1']);
+// => { path: "M 100 50 L 100 200 L 400 200", labelX: 250, labelY: 200 }
+```
+
+| Property | Type | Description |
+|---|---|---|
+| `routes` | `Record<string, AvoidRoute>` | Map of edge ID to `{ path, labelX, labelY }` |
+| `loaded` | `boolean` | Whether the WASM worker has finished loading |
+| `setRoutes` | `(routes) => void` | Update routes (called by worker listener) |
+| `setLoaded` | `(loaded) => void` | Update loaded state |
+
+---
+
+### `useAvoidRouterActionsStore`
+
+Zustand store holding imperative routing actions. Useful for triggering re-routes from outside the component that owns the router.
+
+```ts
+import { useAvoidRouterActionsStore } from 'avoid-nodes-edge';
+
+const { resetRouting, updateRoutesForNodeId } =
+  useAvoidRouterActionsStore((s) => s.actions);
+
+// Force full re-route
+resetRouting();
+
+// Re-route edges for a specific node
+updateRoutesForNodeId('node-1');
+```
+
+---
+
+### `useAvoidWorker(options?)`
+
+Low-level hook that creates and manages the Web Worker. Used internally by `useAvoidNodesRouterFromWorker` — useful if you need direct control over the worker.
+
+```ts
+import { useAvoidWorker } from 'avoid-nodes-edge';
+
+const { workerLoaded, post, close } = useAvoidWorker({
+  create: true,
+  onLoaded: (success) => console.log('WASM loaded:', success),
+  onRouted: (routes) => console.log('Routes computed:', routes),
+});
+
+// Send a command to the worker
+post({ command: 'reset', nodes, edges, options });
+```
+
+---
+
+### Constants
+
+Configurable constants exported from the package:
+
+```ts
+import {
+  DEBOUNCE_ROUTING_MS,        // 0 — debounce before routing (ms)
+  EDGE_BORDER_RADIUS,         // 0 — default corner radius (px)
+  SHOULD_START_EDGE_AT_HANDLE_BORDER,  // true
+  DEV_LOG_WEB_WORKER_MESSAGES,         // false
+} from 'avoid-nodes-edge';
+```
+
+---
+
+### Types
+
+All types are exported for TypeScript users:
+
+```ts
+import type {
+  // Router
+  AvoidRoute,
+  AvoidRouterOptions,
+  HandlePosition,
+
+  // Hooks
+  UseAvoidNodesRouterOptions,
+  UseAvoidNodesRouterResult,
+  UseAvoidWorkerOptions,
+  UseAvoidWorkerResult,
+  UseAvoidNodesPathParams,
+  Position,
+
+  // Stores
+  AvoidRoutesState,
+  AvoidRouterActions,
+
+  // Worker messages
+  AvoidRouterWorkerCommand,
+  AvoidRouterWorkerResponse,
+} from 'avoid-nodes-edge';
+```
+
+## Architecture
+
+```
+Main Thread                              Worker Thread
+───────────                              ─────────────
+                                         avoid-router.worker.js
+useAvoidNodesRouterFromWorker ─────────► loads libavoid WASM
+  posts commands:                        runs routeAll()
+  • reset (full graph)                   computes orthogonal paths
+  • updateNodes (incremental)            ◄──────────────────────
+  • route (one-shot)                     posts { routed, routes }
+
+useAvoidRoutesStore ◄──────────────────
+  stores routes map
+
+AvoidNodesEdge
+  reads route from store
+  renders SVG path
+```
+
+### Why WASM never loads on the main thread
+
+The `libavoid-js` WASM binary (~200KB) and the routing algorithm are computationally expensive. Loading and running them on the main thread would cause frame drops during initial load and every re-route. By running everything in a Web Worker:
+
+- **Initial load**: WASM downloads and compiles in the background
+- **Routing**: Heavy graph computation doesn't block React renders
+- **Dragging**: Incremental updates keep the UI at 60fps
+- **Fallback**: Edges render immediately as straight/smooth-step paths, then snap to routed paths once the worker responds
+
+### Worker Message Protocol
+
+| Command | Direction | Description |
+|---|---|---|
+| `reset` | Main -> Worker | Send full graph for re-routing |
+| `updateNodes` | Main -> Worker | Send changed nodes for incremental routing |
+| `change` | Main -> Worker | Update a single node or edge |
+| `add` | Main -> Worker | Add a node or edge |
+| `remove` | Main -> Worker | Remove a node or edge by ID |
+| `route` | Main -> Worker | One-shot route (doesn't update internal state) |
+| `close` | Main -> Worker | Shut down the worker |
+| `loaded` | Worker -> Main | WASM load result (`{ success: boolean }`) |
+| `routed` | Worker -> Main | Computed routes (`{ routes: Record<string, AvoidRoute> }`) |
+
+## Troubleshooting
+
+### Worker fails to load (MIME type error)
+
+If you see `Failed to load module script: The server responded with a non-JavaScript MIME type`, make sure:
+
+1. Your Vite config includes `worker: { format: 'es' }`
+2. Your Vite config includes `optimizeDeps: { exclude: ['avoid-nodes-edge'] }`
+3. Clear the Vite cache: `rm -rf node_modules/.vite`
+
+### WASM not found
+
+If the worker loads but WASM fails, ensure `libavoid.wasm` is served at `/libavoid.wasm` from your `public/` directory.
+
+### Edges render as straight lines
+
+This is the expected fallback while the worker loads WASM. Once loaded, edges will snap to routed paths. If they stay straight, check the browser console for worker errors.
+
+### Edges don't route around a node
+
+Make sure the node has `type` set to something other than `"group"`. Group nodes are treated as containers, not obstacles.
+
+## License
+
+MIT

package/dist/chunk-TO34Q3ID.cjs

@@ -0,0 +1,87 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/store.ts
+var _zustand = require('zustand');
+var useAvoidRoutesStore = _zustand.create.call(void 0, (set) => ({
+  loaded: false,
+  routes: {},
+  setLoaded: (loaded) => set({ loaded }),
+  setRoutes: (routes) => set({ routes })
+}));
+var noop = () => {
+};
+var noopId = (_nodeId) => {
+};
+var useAvoidRouterActionsStore = _zustand.create.call(void 0, (set) => ({
+  actions: { resetRouting: noop, updateRoutesForNodeId: noopId },
+  setActions: (actions) => set({ actions })
+}));
+
+// src/constants.ts
+var DEV_LOG_WEB_WORKER_MESSAGES = false;
+var DEBOUNCE_ROUTING_MS = 0;
+var SHOULD_START_EDGE_AT_HANDLE_BORDER = true;
+var EDGE_BORDER_RADIUS = 0;
+
+// src/useAvoidNodesPath.ts
+var _react = require('react');
+var _react3 = require('@xyflow/react');
+var RF_POS = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom"
+};
+function useAvoidNodesPath(params) {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    offset
+  } = params;
+  const loaded = useAvoidRoutesStore((s) => s.loaded);
+  const route = useAvoidRoutesStore((s) => s.routes[id]);
+  return _react.useMemo.call(void 0, () => {
+    if (loaded && route) {
+      return [route.path, route.labelX, route.labelY, true];
+    }
+    if (sourcePosition && targetPosition) {
+      const [smoothPath, sLabelX, sLabelY] = _react3.getSmoothStepPath.call(void 0, {
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition: RF_POS[sourcePosition],
+        targetPosition: RF_POS[targetPosition],
+        borderRadius: _nullishCoalesce(params.borderRadius, () => ( EDGE_BORDER_RADIUS)),
+        offset: _nullishCoalesce(offset, () => ( 20))
+      });
+      return [smoothPath, sLabelX, sLabelY, false];
+    }
+    const [straightPath, labelX, labelY] = _react3.getStraightPath.call(void 0, {
+      sourceX,
+      sourceY,
+      targetX,
+      targetY
+    });
+    return [straightPath, labelX, labelY, false];
+  }, [loaded, route, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, offset, params.borderRadius]);
+}
+
+
+
+
+
+
+
+
+
+
+exports.__publicField = __publicField; exports.useAvoidRoutesStore = useAvoidRoutesStore; exports.useAvoidRouterActionsStore = useAvoidRouterActionsStore; exports.DEV_LOG_WEB_WORKER_MESSAGES = DEV_LOG_WEB_WORKER_MESSAGES; exports.DEBOUNCE_ROUTING_MS = DEBOUNCE_ROUTING_MS; exports.SHOULD_START_EDGE_AT_HANDLE_BORDER = SHOULD_START_EDGE_AT_HANDLE_BORDER; exports.EDGE_BORDER_RADIUS = EDGE_BORDER_RADIUS; exports.useAvoidNodesPath = useAvoidNodesPath;
+//# sourceMappingURL=chunk-TO34Q3ID.cjs.map

package/dist/chunk-TO34Q3ID.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/awaisshah228/Documents/coding/ai-diagram-generator/avoid-nodes-pro-example/packages/avoid-nodes-edge/dist/chunk-TO34Q3ID.cjs","../src/store.ts","../src/constants.ts","../src/useAvoidNodesPath.ts"],"names":[],"mappings":"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","file":"/Users/awaisshah228/Documents/coding/ai-diagram-generator/avoid-nodes-pro-example/packages/avoid-nodes-edge/dist/chunk-TO34Q3ID.cjs","sourcesContent":[null,"import { create } from \"zustand\";\nimport type { AvoidRoute } from \"./router\";\n\nexport interface AvoidRoutesState {\n  loaded: boolean;\n  routes: Record<string, AvoidRoute>;\n  setLoaded: (loaded: boolean) => void;\n  setRoutes: (routes: Record<string, AvoidRoute>) => void;\n}\n\nexport const useAvoidRoutesStore = create<AvoidRoutesState>((set) => ({\n  loaded: false,\n  routes: {},\n  setLoaded: (loaded) => set({ loaded }),\n  setRoutes: (routes) => set({ routes }),\n}));\n\nexport interface AvoidRouterActions {\n  resetRouting: () => void;\n  updateRoutesForNodeId: (nodeId: string) => void;\n}\n\nconst noop = () => {};\nconst noopId = (_nodeId: string) => {};\n\nexport const useAvoidRouterActionsStore = create<{\n  actions: AvoidRouterActions;\n  setActions: (a: AvoidRouterActions) => void;\n}>((set) => ({\n  actions: { resetRouting: noop, updateRoutesForNodeId: noopId },\n  setActions: (actions) => set({ actions }),\n}));\n","/** Log web worker / routing messages in development. */\nexport const DEV_LOG_WEB_WORKER_MESSAGES = false;\n\n/**\n * Debounce (ms) before routing runs after diagram changes.\n * 10 ms merges drag events into a single update.\n * For larger diagrams (500+ nodes) use ~50-100 ms.\n */\nexport const DEBOUNCE_ROUTING_MS = 0;\n\n/** Whether edges start at handle border (true) or center (false). */\nexport const SHOULD_START_EDGE_AT_HANDLE_BORDER = true;\n\n/** Default border radius (px) for routed path corners. */\nexport const EDGE_BORDER_RADIUS = 0;\n","import { useMemo } from \"react\";\nimport { getStraightPath, getSmoothStepPath, Position as RFPosition } from \"@xyflow/react\";\nimport { useAvoidRoutesStore } from \"./store\";\nimport { EDGE_BORDER_RADIUS } from \"./constants\";\n\nexport type Position = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nconst RF_POS: Record<Position, RFPosition> = {\n  left: \"left\" as RFPosition,\n  right: \"right\" as RFPosition,\n  top: \"top\" as RFPosition,\n  bottom: \"bottom\" as RFPosition,\n};\n\nexport interface UseAvoidNodesPathParams {\n  id: string;\n  sourceX: number;\n  sourceY: number;\n  targetX: number;\n  targetY: number;\n  sourcePosition?: Position;\n  targetPosition?: Position;\n  points?: { x: number; y: number }[];\n  borderRadius?: number;\n  offset?: number;\n}\n\n/**\n * Returns [path, labelX, labelY, wasRouted] for an avoid-nodes edge.\n * Reads from the avoid store (set by the worker); falls back to straight/smooth-step.\n */\nexport function useAvoidNodesPath(\n  params: UseAvoidNodesPathParams\n): [path: string, labelX: number, labelY: number, wasRouted: boolean] {\n  const {\n    id,\n    sourceX,\n    sourceY,\n    targetX,\n    targetY,\n    sourcePosition,\n    targetPosition,\n    offset,\n  } = params;\n\n  const loaded = useAvoidRoutesStore((s) => s.loaded);\n  const route = useAvoidRoutesStore((s) => s.routes[id]);\n\n  return useMemo(() => {\n    if (loaded && route) {\n      return [route.path, route.labelX, route.labelY, true];\n    }\n\n    if (sourcePosition && targetPosition) {\n      const [smoothPath, sLabelX, sLabelY] = getSmoothStepPath({\n        sourceX,\n        sourceY,\n        targetX,\n        targetY,\n        sourcePosition: RF_POS[sourcePosition],\n        targetPosition: RF_POS[targetPosition],\n        borderRadius: params.borderRadius ?? EDGE_BORDER_RADIUS,\n        offset: offset ?? 20,\n      });\n      return [smoothPath, sLabelX, sLabelY, false];\n    }\n\n    const [straightPath, labelX, labelY] = getStraightPath({\n      sourceX,\n      sourceY,\n      targetX,\n      targetY,\n    });\n    return [straightPath, labelX, labelY, false];\n  }, [loaded, route, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, offset, params.borderRadius]);\n}\n"]}

package/dist/chunk-VPHZVUPR.js

@@ -0,0 +1,87 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/store.ts
+import { create } from "zustand";
+var useAvoidRoutesStore = create((set) => ({
+  loaded: false,
+  routes: {},
+  setLoaded: (loaded) => set({ loaded }),
+  setRoutes: (routes) => set({ routes })
+}));
+var noop = () => {
+};
+var noopId = (_nodeId) => {
+};
+var useAvoidRouterActionsStore = create((set) => ({
+  actions: { resetRouting: noop, updateRoutesForNodeId: noopId },
+  setActions: (actions) => set({ actions })
+}));
+
+// src/constants.ts
+var DEV_LOG_WEB_WORKER_MESSAGES = false;
+var DEBOUNCE_ROUTING_MS = 0;
+var SHOULD_START_EDGE_AT_HANDLE_BORDER = true;
+var EDGE_BORDER_RADIUS = 0;
+
+// src/useAvoidNodesPath.ts
+import { useMemo } from "react";
+import { getStraightPath, getSmoothStepPath } from "@xyflow/react";
+var RF_POS = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom"
+};
+function useAvoidNodesPath(params) {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    offset
+  } = params;
+  const loaded = useAvoidRoutesStore((s) => s.loaded);
+  const route = useAvoidRoutesStore((s) => s.routes[id]);
+  return useMemo(() => {
+    if (loaded && route) {
+      return [route.path, route.labelX, route.labelY, true];
+    }
+    if (sourcePosition && targetPosition) {
+      const [smoothPath, sLabelX, sLabelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition: RF_POS[sourcePosition],
+        targetPosition: RF_POS[targetPosition],
+        borderRadius: params.borderRadius ?? EDGE_BORDER_RADIUS,
+        offset: offset ?? 20
+      });
+      return [smoothPath, sLabelX, sLabelY, false];
+    }
+    const [straightPath, labelX, labelY] = getStraightPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY
+    });
+    return [straightPath, labelX, labelY, false];
+  }, [loaded, route, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, offset, params.borderRadius]);
+}
+
+export {
+  __publicField,
+  useAvoidRoutesStore,
+  useAvoidRouterActionsStore,
+  DEV_LOG_WEB_WORKER_MESSAGES,
+  DEBOUNCE_ROUTING_MS,
+  SHOULD_START_EDGE_AT_HANDLE_BORDER,
+  EDGE_BORDER_RADIUS,
+  useAvoidNodesPath
+};
+//# sourceMappingURL=chunk-VPHZVUPR.js.map