reactflow-edge-routing 0.1.1

package/src/use-edge-routing.ts

@@ -0,0 +1,303 @@
+/**
+ * useEdgeRouting
+ * ---------------------------------------------------------------------------
+ * Routes edges around nodes using a Web Worker running libavoid WASM.
+ *
+ * Pins stay fixed at their exact SVG anchor positions. Routes go around nodes.
+ * Each node is enriched with _handlePins before sending to the worker.
+ */
+
+import { useCallback, useEffect, useRef } from "react";
+import type { Node, NodeChange, Edge } from "@xyflow/react";
+import { useEdgeRoutingStore, useEdgeRoutingActionsStore } from "./edge-routing-store";
+import { DEBOUNCE_ROUTING_MS } from "./constants";
+import type { AvoidRouterOptions, FlowNode, FlowEdge, ConnectorType } from "./routing-core";
+import { useRoutingWorker } from "./use-routing-worker";
+
+export interface UseEdgeRoutingOptions {
+  // --- Core spacing ---
+  edgeToEdgeSpacing?: number;
+  edgeToNodeSpacing?: number;
+  /** Spacing (px) between edges at shared handles. Should be >= edgeToEdgeSpacing for a fan-out effect. */
+  handleSpacing?: number;
+
+  // --- libavoid routing parameters ---
+  /** Penalty for each segment beyond the first. MUST be >0 for nudging. Default: 10 */
+  segmentPenalty?: number;
+  /** Penalty for tight bends (polyline routing). Default: 0 */
+  anglePenalty?: number;
+  /** Penalty for crossing other connectors. EXPERIMENTAL. Default: 0 */
+  crossingPenalty?: number;
+  /** Penalty for crossing cluster boundaries. EXPERIMENTAL. Default: 0 */
+  clusterCrossingPenalty?: number;
+  /** Penalty for shared paths with fixed connectors. EXPERIMENTAL. Default: 0 */
+  fixedSharedPathPenalty?: number;
+  /** Penalty for port selection outside visibility cone. EXPERIMENTAL. Default: 0 */
+  portDirectionPenalty?: number;
+  /** Penalty when connector travels opposite from destination. Default: 0 */
+  reverseDirectionPenalty?: number;
+
+  // --- libavoid routing options ---
+  /** Nudge final segments attached to shapes. Default: true */
+  nudgeOrthogonalSegmentsConnectedToShapes?: boolean;
+  /** Nudge intermediate segments at common endpoints. Default: true */
+  nudgeSharedPathsWithCommonEndPoint?: boolean;
+  /** Unify/center segments before nudging (better quality, slower). Default: true */
+  performUnifyingNudgingPreprocessingStep?: boolean;
+  /** Nudge colinear segments touching at ends apart. Default: false */
+  nudgeOrthogonalTouchingColinearSegments?: boolean;
+  /** Improve hyperedge routes by moving junctions. Default: true */
+  improveHyperedgeRoutesMovingJunctions?: boolean;
+  /** Penalize shared orthogonal paths at junctions/pins. EXPERIMENTAL. Default: false */
+  penaliseOrthogonalSharedPathsAtConnEnds?: boolean;
+  /** Improve hyperedges by adding/removing junctions. Default: false */
+  improveHyperedgeRoutesMovingAddingAndDeletingJunctions?: boolean;
+
+  // --- Connector settings ---
+  /** Edge path style: "orthogonal" (default), "polyline", or "bezier". */
+  connectorType?: ConnectorType;
+  /** If true, connectors try to avoid crossings (longer paths). Default: false */
+  hateCrossings?: boolean;
+  /** Inside offset (px) for pins — pushes connector start inside shape boundary. Default: 0 */
+  pinInsideOffset?: number;
+
+  // --- Rendering / layout ---
+  edgeRounding?: number;
+  diagramGridSize?: number;
+  /** When true, edges spread out along the node border near handles. When false, edges converge to exact handle point. Default: true */
+  shouldSplitEdgesNearHandle?: boolean;
+  /** Length (px) of the stub segment when shouldSplitEdgesNearHandle is off. Default: 20 */
+  stubSize?: number;
+  autoBestSideConnection?: boolean;
+  debounceMs?: number;
+
+  /** If true, re-route in real time while dragging instead of on drag stop. Default: false */
+  realTimeRouting?: boolean;
+  /** Enrich a node with _handlePins and _extraHeight before sending to worker */
+  enrichNode?: (node: Node) => Node;
+}
+
+export interface UseEdgeRoutingResult {
+  updateRoutingOnNodesChange: (changes: NodeChange<Node>[]) => void;
+  resetRouting: () => void;
+  refreshRouting: () => void;
+  updateRoutingForNodeIds: (nodeIds: string[]) => void;
+}
+
+const DEFAULT_OPTIONS: UseEdgeRoutingOptions = {
+  edgeRounding: 8,
+  edgeToEdgeSpacing: 10,
+  edgeToNodeSpacing: 8,
+  handleSpacing: 2,
+  diagramGridSize: 0,
+  shouldSplitEdgesNearHandle: true,
+  autoBestSideConnection: false,
+  debounceMs: 0,
+};
+
+function toRouterOptions(opts?: UseEdgeRoutingOptions): AvoidRouterOptions {
+  return {
+    // Core spacing
+    idealNudgingDistance: opts?.edgeToEdgeSpacing ?? DEFAULT_OPTIONS.edgeToEdgeSpacing,
+    shapeBufferDistance: opts?.edgeToNodeSpacing ?? DEFAULT_OPTIONS.edgeToNodeSpacing,
+    handleNudgingDistance: opts?.handleSpacing ?? DEFAULT_OPTIONS.handleSpacing,
+
+    // Routing parameters
+    segmentPenalty: opts?.segmentPenalty,
+    anglePenalty: opts?.anglePenalty,
+    crossingPenalty: opts?.crossingPenalty,
+    clusterCrossingPenalty: opts?.clusterCrossingPenalty,
+    fixedSharedPathPenalty: opts?.fixedSharedPathPenalty,
+    portDirectionPenalty: opts?.portDirectionPenalty,
+    reverseDirectionPenalty: opts?.reverseDirectionPenalty,
+
+    // Routing options
+    nudgeOrthogonalSegmentsConnectedToShapes: opts?.nudgeOrthogonalSegmentsConnectedToShapes,
+    nudgeSharedPathsWithCommonEndPoint: opts?.nudgeSharedPathsWithCommonEndPoint,
+    performUnifyingNudgingPreprocessingStep: opts?.performUnifyingNudgingPreprocessingStep,
+    nudgeOrthogonalTouchingColinearSegments: opts?.nudgeOrthogonalTouchingColinearSegments,
+    improveHyperedgeRoutesMovingJunctions: opts?.improveHyperedgeRoutesMovingJunctions,
+    penaliseOrthogonalSharedPathsAtConnEnds: opts?.penaliseOrthogonalSharedPathsAtConnEnds,
+    improveHyperedgeRoutesMovingAddingAndDeletingJunctions: opts?.improveHyperedgeRoutesMovingAddingAndDeletingJunctions,
+
+    // Connector settings
+    connectorType: opts?.connectorType ?? "orthogonal",
+    hateCrossings: opts?.hateCrossings,
+    pinInsideOffset: opts?.pinInsideOffset,
+
+    // Rendering
+    edgeRounding: opts?.edgeRounding ?? DEFAULT_OPTIONS.edgeRounding,
+    diagramGridSize: opts?.diagramGridSize ?? DEFAULT_OPTIONS.diagramGridSize,
+    shouldSplitEdgesNearHandle: opts?.shouldSplitEdgesNearHandle ?? DEFAULT_OPTIONS.shouldSplitEdgesNearHandle,
+    stubSize: opts?.stubSize,
+    autoBestSideConnection: opts?.autoBestSideConnection ?? DEFAULT_OPTIONS.autoBestSideConnection,
+    debounceMs: opts?.debounceMs ?? DEFAULT_OPTIONS.debounceMs,
+  };
+}
+
+export function useEdgeRouting(
+  nodes: Node[],
+  edges: Edge[],
+  options?: UseEdgeRoutingOptions
+): UseEdgeRoutingResult {
+  const nodesRef = useRef<Node[]>(nodes);
+  const edgesRef = useRef<Edge[]>(edges);
+  const opts = toRouterOptions(options);
+  const optsRef = useRef<AvoidRouterOptions>(opts);
+  const enrichNodeRef = useRef(options?.enrichNode);
+  const realTimeRoutingRef = useRef(options?.realTimeRouting ?? false);
+
+  nodesRef.current = nodes;
+  edgesRef.current = edges;
+  optsRef.current = opts;
+  enrichNodeRef.current = options?.enrichNode;
+  realTimeRoutingRef.current = options?.realTimeRouting ?? false;
+
+  const setRoutes = useEdgeRoutingStore((s) => s.setRoutes);
+  const setConnectorType = useEdgeRoutingStore((s) => s.setConnectorType);
+  const setDraggingNodeIds = useEdgeRoutingStore((s) => s.setDraggingNodeIds);
+  const setActions = useEdgeRoutingActionsStore((s) => s.setActions);
+
+  // Keep store in sync with current connector type
+  const connType = opts.connectorType ?? "orthogonal";
+  if (connType) setConnectorType(connType);
+
+  const { post, workerLoaded } = useRoutingWorker({ create: true });
+
+  const didResetRef = useRef(false);
+  const nodesMeasuredRef = useRef(false);
+
+  const sendReset = useCallback(() => {
+    if (!workerLoaded) return;
+    const nodes = nodesRef.current;
+    // Wait until all non-group nodes are measured (groups expand from children)
+    const nonGroupNodes = nodes.filter((n) => n.type !== "group");
+    const hasMeasured = nonGroupNodes.length === 0 || nonGroupNodes.every((n) => n.measured?.width != null || (n.style as { width?: number } | undefined)?.width != null);
+    if (!hasMeasured) return;
+    nodesMeasuredRef.current = true;
+    const edges = edgesRef.current;
+    if (edges.length === 0) {
+      setRoutes({});
+      return;
+    }
+    // Enrich nodes with _handlePins and _extraHeight on main thread
+    const enrich = enrichNodeRef.current;
+    const enrichedNodes = enrich ? nodes.map(enrich) : nodes;
+    post({
+      command: "reset",
+      nodes: enrichedNodes as unknown as FlowNode[],
+      edges: edges as unknown as FlowEdge[],
+      options: optsRef.current,
+    });
+    didResetRef.current = true;
+  }, [post, setRoutes, workerLoaded]);
+
+  // Full reset on position changes — nodesRef.current must have updated positions
+  // by the time this fires (ensured by the debounce + rAF delay).
+  const sendIncrementalChanges = useCallback(
+    (_nodeIds: string[]) => { sendReset(); },
+    [sendReset]
+  );
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingChangeIdsRef = useRef<Set<string>>(new Set());
+
+  const resetRouting = useCallback(() => { sendReset(); }, [sendReset]);
+  const refreshRouting = useCallback(() => { sendReset(); }, [sendReset]);
+  const updateRoutingForNodeIds = useCallback(
+    (nodeIds: string[]) => { sendIncrementalChanges(nodeIds); },
+    [sendIncrementalChanges]
+  );
+
+  const updateRoutingOnNodesChange = useCallback(
+    (changes: NodeChange<Node>[]) => {
+      if (!workerLoaded) return;
+
+      let hasPosition = false;
+      let hasDimensions = false;
+      let hasAddOrRemove = false;
+      let isDragging = false;
+      const draggingNodeIds: string[] = [];
+
+      for (const c of changes) {
+        if (c.type === "position") {
+          hasPosition = true;
+          pendingChangeIdsRef.current.add(c.id);
+          if ((c as { dragging?: boolean }).dragging) {
+            isDragging = true;
+            draggingNodeIds.push(c.id);
+          }
+        } else if (c.type === "dimensions") {
+          hasDimensions = true;
+          pendingChangeIdsRef.current.add(c.id);
+        } else if (c.type === "add" || c.type === "remove") {
+          hasAddOrRemove = true;
+        }
+      }
+
+      if (!hasPosition && !hasDimensions && !hasAddOrRemove) return;
+
+      // Track which nodes are being dragged so useRoutedEdgePath shows fallback
+      if (isDragging) {
+        setDraggingNodeIds(new Set(draggingNodeIds));
+      } else if (hasPosition) {
+        // Position change without dragging = drag ended
+        setDraggingNodeIds(new Set());
+      }
+
+      const realTime = realTimeRoutingRef.current;
+
+      const needsFullReset = hasAddOrRemove || (hasDimensions && !nodesMeasuredRef.current);
+
+      if (needsFullReset) {
+        if (debounceRef.current) { clearTimeout(debounceRef.current); debounceRef.current = null; }
+        pendingChangeIdsRef.current.clear();
+        debounceRef.current = setTimeout(() => {
+          debounceRef.current = null;
+          requestAnimationFrame(() => sendReset());
+        }, DEBOUNCE_ROUTING_MS);
+        return;
+      }
+
+      if (!didResetRef.current) return;
+
+      // Without real-time: skip re-routing while dragging, wait for drag end
+      if (isDragging && !realTime) return;
+
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        debounceRef.current = null;
+        requestAnimationFrame(() => {
+          const ids = Array.from(pendingChangeIdsRef.current);
+          pendingChangeIdsRef.current.clear();
+          if (ids.length > 0) {
+            sendIncrementalChanges(ids);
+          }
+        });
+      }, DEBOUNCE_ROUTING_MS);
+    },
+    [workerLoaded, sendReset, sendIncrementalChanges]
+  );
+
+  useEffect(() => {
+    setActions({
+      resetRouting,
+      updateRoutesForNodeId: (nodeId) => updateRoutingForNodeIds([nodeId]),
+    });
+    return () => setActions({ resetRouting: () => {}, updateRoutesForNodeId: () => {} });
+  }, [resetRouting, updateRoutingForNodeIds, setActions]);
+
+  // Re-route when options change. We serialize to JSON for stable comparison.
+  const optsJson = JSON.stringify(opts);
+  useEffect(() => {
+    if (workerLoaded) sendReset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workerLoaded, nodes.length, edges.length, optsJson, sendReset]);
+
+  return {
+    updateRoutingOnNodesChange,
+    resetRouting,
+    refreshRouting,
+    updateRoutingForNodeIds,
+  };
+}

package/src/use-routed-edge-path.ts

@@ -0,0 +1,99 @@
+import { useMemo } from "react";
+import { getStraightPath, getSmoothStepPath, getBezierPath, Position as RFPosition } from "@xyflow/react";
+import { useEdgeRoutingStore } from "./edge-routing-store";
+import { EDGE_BORDER_RADIUS } from "./constants";
+import type { ConnectorType } from "./routing-core";
+
+export type Position = "left" | "right" | "top" | "bottom";
+
+const RF_POS: Record<Position, RFPosition> = {
+  left: "left" as RFPosition,
+  right: "right" as RFPosition,
+  top: "top" as RFPosition,
+  bottom: "bottom" as RFPosition,
+};
+
+export interface UseRoutedEdgePathParams {
+  id: string;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  sourcePosition?: Position;
+  targetPosition?: Position;
+  borderRadius?: number;
+  offset?: number;
+  connectorType?: ConnectorType;
+  source?: string;
+  target?: string;
+}
+
+function getFallback(
+  sourceX: number, sourceY: number,
+  targetX: number, targetY: number,
+  sourcePosition: Position | undefined,
+  targetPosition: Position | undefined,
+  connectorType: ConnectorType | undefined,
+  borderRadius: number | undefined,
+  offset: number | undefined,
+): [string, number, number, ...unknown[]] {
+  if (sourcePosition && targetPosition) {
+    const srcPos = RF_POS[sourcePosition];
+    const tgtPos = RF_POS[targetPosition];
+
+    if (connectorType === "bezier") {
+      return getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition: srcPos, targetPosition: tgtPos });
+    }
+
+    return getSmoothStepPath({
+      sourceX, sourceY, targetX, targetY,
+      sourcePosition: srcPos, targetPosition: tgtPos,
+      borderRadius: borderRadius ?? EDGE_BORDER_RADIUS,
+      offset: offset ?? 20,
+    });
+  }
+
+  return getStraightPath({ sourceX, sourceY, targetX, targetY });
+}
+
+/**
+ * Returns [path, labelX, labelY, wasRouted] for a routed edge.
+ *
+ * - While a connected node is being dragged → dashed fallback
+ * - If a routed path exists for this edge → solid routed path
+ * - No route yet (worker hasn't responded) → dashed fallback
+ */
+export function useRoutedEdgePath(
+  params: UseRoutedEdgePathParams
+): [path: string, labelX: number, labelY: number, wasRouted: boolean] {
+  const {
+    id, sourceX, sourceY, targetX, targetY,
+    sourcePosition, targetPosition,
+    offset, connectorType, source, target,
+  } = params;
+
+  const route = useEdgeRoutingStore((s) => s.routes[id]);
+  const draggingNodeIds = useEdgeRoutingStore((s) => s.draggingNodeIds);
+
+  return useMemo(() => {
+    // If a connected node is being dragged, show fallback
+    const isDragging =
+      draggingNodeIds.size > 0 &&
+      ((source != null && draggingNodeIds.has(source)) ||
+       (target != null && draggingNodeIds.has(target)));
+
+    if (isDragging) {
+      const [path, lx, ly] = getFallback(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, connectorType, params.borderRadius, offset);
+      return [path, lx, ly, false];
+    }
+
+    // If we have a routed path, use it (no stale check — trust the router)
+    if (route?.path) {
+      return [route.path, route.labelX, route.labelY, true];
+    }
+
+    // No route yet — show fallback
+    const [path, lx, ly] = getFallback(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, connectorType, params.borderRadius, offset);
+    return [path, lx, ly, false];
+  }, [route, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, offset, connectorType, params.borderRadius, source, target, draggingNodeIds]);
+}

package/src/use-routing-worker.ts

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { EdgeRoutingWorkerCommand } from "./worker-messages";
+import type { AvoidRoute } from "./routing-core";
+import { attachWorkerListener } from "./worker-listener";
+
+export interface UseRoutingWorkerOptions {
+  create?: boolean;
+  onRouted?: (routes: Record<string, AvoidRoute>) => void;
+  onLoaded?: (success: boolean) => void;
+}
+
+export interface UseRoutingWorkerResult {
+  workerLoaded: boolean;
+  post: (cmd: EdgeRoutingWorkerCommand) => void;
+  close: () => void;
+}
+
+/**
+ * Creates the edge-routing Web Worker and waits for it to load WASM.
+ * WASM loads exclusively in the worker thread — never on the main thread.
+ */
+export function useRoutingWorker(options?: UseRoutingWorkerOptions): UseRoutingWorkerResult {
+  const workerRef = useRef<Worker | null>(null);
+  const [workerLoaded, setWorkerLoaded] = useState(false);
+  const onRoutedRef = useRef(options?.onRouted);
+  const onLoadedRef = useRef(options?.onLoaded);
+  useEffect(() => {
+    onRoutedRef.current = options?.onRouted;
+    onLoadedRef.current = options?.onLoaded;
+  });
+
+  const createWorker = options?.create !== false;
+
+  useEffect(() => {
+    if (!createWorker) {
+      console.log("[edge-routing] createWorker=false, skipping");
+      workerRef.current = null;
+      setWorkerLoaded(false);
+      return;
+    }
+    console.log("[edge-routing] Creating worker...");
+    let worker: Worker;
+    try {
+      worker = new Worker(
+        new URL("./edge-routing.worker.ts", import.meta.url),
+        { type: "module" },
+      );
+      console.log("[edge-routing] Worker created successfully (inline URL)");
+      console.log("[edge-routing] Worker created successfully");
+    } catch (e) {
+      console.error("[edge-routing] Failed to create worker:", e);
+      return;
+    }
+
+    workerRef.current = worker;
+
+    worker.addEventListener("error", (e) => {
+      console.error("[edge-routing] Worker error event:", e.message, e);
+    });
+
+    worker.addEventListener("messageerror", (e) => {
+      console.error("[edge-routing] Worker messageerror:", e);
+    });
+
+    const cleanup = attachWorkerListener(worker, {
+      onRouted: (routes) => {
+        const keys = Object.keys(routes);
+        console.log("[edge-routing] Routed", keys.length, "edges, ids:", keys, "sample path:", routes[keys[0]]?.path?.substring(0, 80));
+        onRoutedRef.current?.(routes);
+      },
+      onLoaded: (success) => {
+        console.log("[edge-routing] Worker WASM loaded:", success);
+        setWorkerLoaded(success);
+        onLoadedRef.current?.(success);
+      },
+    });
+
+    const onBeforeUnload = () => {
+      worker.postMessage({ command: "close" } as EdgeRoutingWorkerCommand);
+      worker.terminate();
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      cleanup();
+      worker.postMessage({ command: "close" } as EdgeRoutingWorkerCommand);
+      worker.terminate();
+      workerRef.current = null;
+      setWorkerLoaded(false);
+    };
+  }, [createWorker]);
+
+  const post = useCallback((cmd: EdgeRoutingWorkerCommand) => {
+    if (workerRef.current) {
+      workerRef.current.postMessage(cmd);
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    if (workerRef.current) {
+      workerRef.current.postMessage({ command: "close" } as EdgeRoutingWorkerCommand);
+      workerRef.current.terminate();
+      workerRef.current = null;
+      setWorkerLoaded(false);
+    }
+  }, []);
+
+  return { workerLoaded, post, close };
+}

package/src/worker-listener.ts

@@ -0,0 +1,48 @@
+/**
+ * Listener for edge-routing Web Worker messages.
+ * Syncs "loaded" / "routed" into the edge routing store.
+ */
+
+import type { AvoidRoute } from "./routing-core";
+import type { EdgeRoutingWorkerResponse } from "./worker-messages";
+import { useEdgeRoutingStore } from "./edge-routing-store";
+
+export interface AttachWorkerListenerOptions {
+  onRouted?: (routes: Record<string, AvoidRoute>) => void;
+  onLoaded?: (success: boolean) => void;
+}
+
+export function attachWorkerListener(
+  worker: Worker,
+  options: AttachWorkerListenerOptions = {}
+): () => void {
+  const { onRouted, onLoaded } = options;
+  const setLoaded = useEdgeRoutingStore.getState().setLoaded;
+  const setRoutes = useEdgeRoutingStore.getState().setRoutes;
+
+  const handler = (e: MessageEvent<EdgeRoutingWorkerResponse>) => {
+    const msg = e.data;
+    if (!msg || typeof msg !== "object" || !("command" in msg)) return;
+
+    switch (msg.command) {
+      case "loaded":
+        setLoaded(msg.success);
+        onLoaded?.(msg.success);
+        break;
+      case "routed": {
+        // Merge new routes with existing ones so edges that failed
+        // to route this cycle keep their last good path
+        const prev = useEdgeRoutingStore.getState().routes;
+        const merged = { ...prev, ...msg.routes };
+        setRoutes(merged);
+        onRouted?.(merged);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  worker.addEventListener("message", handler);
+  return () => worker.removeEventListener("message", handler);
+}

package/src/worker-messages.ts

@@ -0,0 +1,21 @@
+/**
+ * Message types for the edge-routing Web Worker.
+ * Main thread posts commands; worker posts back 'loaded' and 'routed'.
+ */
+
+import type { AvoidRoute, AvoidRouterOptions, FlowNode, FlowEdge } from "./routing-core";
+
+/** Commands the main thread can send to the worker */
+export type EdgeRoutingWorkerCommand =
+  | { command: "reset"; nodes: FlowNode[]; edges: FlowEdge[]; options?: AvoidRouterOptions }
+  | { command: "change"; cell: FlowNode | FlowEdge }
+  | { command: "remove"; id: string }
+  | { command: "add"; cell: FlowNode | FlowEdge }
+  | { command: "route"; nodes: FlowNode[]; edges: FlowEdge[]; options?: AvoidRouterOptions }
+  | { command: "updateNodes"; nodes: FlowNode[] }
+  | { command: "close" };
+
+/** Messages the worker sends back to the main thread */
+export type EdgeRoutingWorkerResponse =
+  | { command: "loaded"; success: boolean }
+  | { command: "routed"; routes: Record<string, AvoidRoute> };

package/src/worker-polyfill.ts

@@ -0,0 +1,8 @@
+/**
+ * Polyfill for Web Worker: `window` is not available in workers, only `self`.
+ * Some libraries (e.g. libavoid-js, Emscripten WASM) reference `window` directly.
+ * This must be imported FIRST in any worker that loads such libraries.
+ */
+if (typeof window === "undefined" && typeof self !== "undefined") {
+  (self as unknown as Record<string, unknown>).window = self;
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2017", "DOM"],
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}