entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/NodeGraph/useNodeGraph.js

@@ -0,0 +1,207 @@
+"use client";
+import { useState, useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { edgesConnectedToPort, duplicateNodes } from './nodeGraphActions.js';
+import { generateNodeId, generateEdgeId } from './nodeGraphIds.js';
+import { applyCascadeDelete } from './nodeGraphMath.js';
+
+const EMPTY_SELECTION = {
+    nodes: [],
+    edges: [],
+    groups: [],
+};
+/**
+ * Own a node graph's state (nodes / edges / groups / selection) plus the
+ * mutations every editor re-implements — add / remove (with edge cascade) /
+ * duplicate / connect / group. Spread `bind` onto `<NodeGraph>` and call the
+ * actions from your toolbar / context menu:
+ *
+ * ```tsx
+ * const graph = useNodeGraph({ nodes: initialNodes, edges: initialEdges });
+ * return (
+ *   <NodeGraph {...graph.bind} renderNode={renderNode}>
+ *     <NodeGraph.Background />
+ *   </NodeGraph>
+ * );
+ * // graph.addNode(...), graph.removeSelection(), graph.duplicateNodes(), ...
+ * ```
+ *
+ * Uncontrolled by design — the hook owns the state. For controlled state
+ * (Redux / Zustand / external store) wire the four `onChange` props yourself.
+ */
+function useNodeGraph(options) {
+    const [nodes, setNodes] = useState(() => options?.nodes ?? []);
+    const [edges, setEdges] = useState(() => options?.edges ?? []);
+    const [groups, setGroups] = useState(() => options?.groups ?? []);
+    const [selection, setSelection] = useState(() => options?.selection ?? EMPTY_SELECTION);
+    // Snapshot refs so multi-slice actions read a consistent view without
+    // re-creating the callbacks on every state change.
+    const nodesRef = useLatest(nodes);
+    const edgesRef = useLatest(edges);
+    const groupsRef = useLatest(groups);
+    const selectionRef = useLatest(selection);
+    const addNode = useCallback((node) => {
+        const id = node.id ?? generateNodeId('node');
+        const next = { ...node, id };
+        setNodes(prev => [...prev, next]);
+        return id;
+    }, []);
+    const removeNodes = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        const removed = new Set(ids);
+        const result = applyCascadeDelete({
+            nodes: nodesRef.current,
+            edges: edgesRef.current,
+            groups: groupsRef.current,
+        }, { nodes: ids, edges: [], groups: [] });
+        setNodes(result.nodes);
+        setEdges(result.edges);
+        const sel = selectionRef.current;
+        const keptEdgeIds = new Set(result.edges.map(e => e.id));
+        const dropsNode = sel.nodes.some(nodeId => removed.has(nodeId));
+        const dropsEdge = sel.edges.some(edgeId => !keptEdgeIds.has(edgeId));
+        if (dropsNode || dropsEdge) {
+            setSelection({
+                nodes: sel.nodes.filter(nodeId => !removed.has(nodeId)),
+                edges: sel.edges.filter(edgeId => keptEdgeIds.has(edgeId)),
+                groups: sel.groups,
+            });
+        }
+    }, [nodesRef, edgesRef, groupsRef, selectionRef]);
+    const removeEdges = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        const removed = new Set(ids);
+        setEdges(prev => prev.filter(e => !removed.has(e.id)));
+        const sel = selectionRef.current;
+        if (sel.edges.some(edgeId => removed.has(edgeId))) {
+            setSelection({
+                nodes: sel.nodes,
+                edges: sel.edges.filter(edgeId => !removed.has(edgeId)),
+                groups: sel.groups,
+            });
+        }
+    }, [selectionRef]);
+    const disconnectPort = useCallback((node, port) => {
+        removeEdges(edgesConnectedToPort(edgesRef.current, { node, port }));
+    }, [edgesRef, removeEdges]);
+    const removeSelection = useCallback(() => {
+        const sel = selectionRef.current;
+        if (sel.nodes.length === 0 &&
+            sel.edges.length === 0 &&
+            sel.groups.length === 0) {
+            return;
+        }
+        const result = applyCascadeDelete({
+            nodes: nodesRef.current,
+            edges: edgesRef.current,
+            groups: groupsRef.current,
+        }, sel);
+        setNodes(result.nodes);
+        setEdges(result.edges);
+        setGroups(result.groups);
+        setSelection(EMPTY_SELECTION);
+    }, [nodesRef, edgesRef, groupsRef, selectionRef]);
+    const duplicateNodes$1 = useCallback((ids, duplicateOptions) => {
+        const targetIds = ids ?? selectionRef.current.nodes;
+        const copies = duplicateNodes(nodesRef.current, targetIds, duplicateOptions);
+        if (copies.length === 0)
+            return [];
+        setNodes(prev => [...prev, ...copies]);
+        const newIds = copies.map(n => n.id);
+        setSelection({ nodes: newIds, edges: [], groups: [] });
+        return newIds;
+    }, [nodesRef, selectionRef]);
+    const connect = useCallback((source, target, data) => {
+        const existing = edgesRef.current.find(e => e.source.node === source.node &&
+            e.source.port === source.port &&
+            e.target.node === target.node &&
+            e.target.port === target.port);
+        if (existing)
+            return existing.id;
+        const id = generateEdgeId(source, target);
+        const edge = {
+            id,
+            source,
+            target,
+            ...(data !== undefined ? { data } : {}),
+        };
+        setEdges(prev => [...prev, edge]);
+        return id;
+    }, [edgesRef]);
+    const addGroup = useCallback((bounds, groupOptions) => {
+        const id = groupOptions?.id ?? generateNodeId('group');
+        const group = {
+            id,
+            bounds,
+            ...(groupOptions?.label !== undefined
+                ? { label: groupOptions.label }
+                : {}),
+            ...(groupOptions?.color !== undefined
+                ? { color: groupOptions.color }
+                : {}),
+        };
+        setGroups(prev => [...prev, group]);
+        return id;
+    }, []);
+    const removeGroups = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        const removed = new Set(ids);
+        setGroups(prev => prev.filter(g => !removed.has(g.id)));
+        const sel = selectionRef.current;
+        if (sel.groups.some(groupId => removed.has(groupId))) {
+            setSelection({
+                nodes: sel.nodes,
+                edges: sel.edges,
+                groups: sel.groups.filter(groupId => !removed.has(groupId)),
+            });
+        }
+    }, [selectionRef]);
+    const clearSelection = useCallback(() => {
+        setSelection(EMPTY_SELECTION);
+    }, []);
+    const bind = useMemo(() => ({
+        nodes,
+        edges,
+        groups,
+        selection,
+        onNodesChange: setNodes,
+        onEdgesChange: setEdges,
+        onGroupsChange: setGroups,
+        onSelectionChange: setSelection,
+    }), [nodes, edges, groups, selection]);
+    return {
+        nodes,
+        edges,
+        groups,
+        selection,
+        setNodes,
+        setEdges,
+        setGroups,
+        setSelection,
+        addNode,
+        removeNodes,
+        removeEdges,
+        disconnectPort,
+        removeSelection,
+        duplicateNodes: duplicateNodes$1,
+        connect,
+        addGroup,
+        removeGroups,
+        clearSelection,
+        bind,
+    };
+}
+
+export { useNodeGraph };
+//# sourceMappingURL=useNodeGraph.js.map

package/dist/esm/components/editor/NodeGraph/useNodeGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraph.js","sources":["src/components/editor/NodeGraph/useNodeGraph.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport {\n  duplicateNodes as duplicateNodesImpl,\n  edgesConnectedToPort,\n} from './nodeGraphActions';\nimport { generateEdgeId, generateNodeId } from './nodeGraphIds';\nimport { applyCascadeDelete } from './nodeGraphMath';\n\nimport type {\n  NodeGraphEdge,\n  NodeGraphGroup,\n  NodeGraphNode,\n  NodeGraphPortRef,\n  NodeGraphSelection,\n} from './NodeGraph.types';\nimport type { DuplicateNodesOptions } from './nodeGraphActions';\nimport type { WorldRect } from '@/components/primitives/viewport';\nimport type { Dispatch, SetStateAction } from 'react';\n\nconst EMPTY_SELECTION: NodeGraphSelection = {\n  nodes: [],\n  edges: [],\n  groups: [],\n};\n\n/** A node accepted by `addNode` — the `id` is generated when omitted. */\nexport type NodeGraphNodeInput = Omit<NodeGraphNode, 'id'> & { id?: string };\n\nexport interface UseNodeGraphOptions {\n  /** Initial nodes. @default [] */\n  nodes?: NodeGraphNode[];\n  /** Initial edges. @default [] */\n  edges?: NodeGraphEdge[];\n  /** Initial groups. @default [] */\n  groups?: NodeGraphGroup[];\n  /** Initial selection. @default { nodes: [], edges: [], groups: [] } */\n  selection?: NodeGraphSelection;\n}\n\nexport interface AddGroupOptions {\n  /** Group id. Generated when omitted. */\n  id?: string;\n  label?: string;\n  color?: string;\n}\n\n/** The four controlled props + change handlers, ready to spread. */\nexport interface NodeGraphBind {\n  nodes: NodeGraphNode[];\n  edges: NodeGraphEdge[];\n  groups: NodeGraphGroup[];\n  selection: NodeGraphSelection;\n  onNodesChange: (nodes: NodeGraphNode[]) => void;\n  onEdgesChange: (edges: NodeGraphEdge[]) => void;\n  onGroupsChange: (groups: NodeGraphGroup[]) => void;\n  onSelectionChange: (selection: NodeGraphSelection) => void;\n}\n\nexport interface UseNodeGraphReturn {\n  nodes: NodeGraphNode[];\n  edges: NodeGraphEdge[];\n  groups: NodeGraphGroup[];\n  selection: NodeGraphSelection;\n\n  setNodes: Dispatch<SetStateAction<NodeGraphNode[]>>;\n  setEdges: Dispatch<SetStateAction<NodeGraphEdge[]>>;\n  setGroups: Dispatch<SetStateAction<NodeGraphGroup[]>>;\n  setSelection: Dispatch<SetStateAction<NodeGraphSelection>>;\n\n  /** Append a node (generating an id when omitted). Returns the node id. */\n  addNode: (node: NodeGraphNodeInput) => string;\n  /**\n   * Cascade-delete the given nodes — removes them, drops any edge touching\n   * them, and prunes them from the selection.\n   */\n  removeNodes: (ids: ReadonlyArray<string>) => void;\n  /** Remove the given edges and prune them from the selection. */\n  removeEdges: (ids: ReadonlyArray<string>) => void;\n  /** Remove every edge connected to a port — \"detach all\" for one socket. */\n  disconnectPort: (node: string, port: string) => void;\n  /**\n   * Cascade-delete the current selection (nodes + edges + groups) and clear\n   * it — the programmatic equivalent of pressing Delete.\n   */\n  removeSelection: () => void;\n  /**\n   * Clone nodes (defaults to the current selection), append the copies, and\n   * select them. Returns the new node ids.\n   */\n  duplicateNodes: (\n    ids?: ReadonlyArray<string>,\n    options?: DuplicateNodesOptions\n  ) => string[];\n  /**\n   * Add an edge between two ports, de-duplicating identical endpoints.\n   * Returns the new (or existing) edge id.\n   */\n  connect: (\n    source: NodeGraphPortRef,\n    target: NodeGraphPortRef,\n    data?: unknown\n  ) => string;\n  /** Append a group. Returns the group id. */\n  addGroup: (bounds: WorldRect, options?: AddGroupOptions) => string;\n  /** Remove the given groups and prune them from the selection. */\n  removeGroups: (ids: ReadonlyArray<string>) => void;\n  /** Clear the selection. */\n  clearSelection: () => void;\n\n  /** Spread onto `<NodeGraph {...bind} />` to wire all four controlled props. */\n  bind: NodeGraphBind;\n}\n\n/**\n * Own a node graph's state (nodes / edges / groups / selection) plus the\n * mutations every editor re-implements — add / remove (with edge cascade) /\n * duplicate / connect / group. Spread `bind` onto `<NodeGraph>` and call the\n * actions from your toolbar / context menu:\n *\n * ```tsx\n * const graph = useNodeGraph({ nodes: initialNodes, edges: initialEdges });\n * return (\n *   <NodeGraph {...graph.bind} renderNode={renderNode}>\n *     <NodeGraph.Background />\n *   </NodeGraph>\n * );\n * // graph.addNode(...), graph.removeSelection(), graph.duplicateNodes(), ...\n * ```\n *\n * Uncontrolled by design — the hook owns the state. For controlled state\n * (Redux / Zustand / external store) wire the four `onChange` props yourself.\n */\nexport function useNodeGraph(\n  options?: UseNodeGraphOptions\n): UseNodeGraphReturn {\n  const [nodes, setNodes] = useState<NodeGraphNode[]>(\n    () => options?.nodes ?? []\n  );\n  const [edges, setEdges] = useState<NodeGraphEdge[]>(\n    () => options?.edges ?? []\n  );\n  const [groups, setGroups] = useState<NodeGraphGroup[]>(\n    () => options?.groups ?? []\n  );\n  const [selection, setSelection] = useState<NodeGraphSelection>(\n    () => options?.selection ?? EMPTY_SELECTION\n  );\n\n  // Snapshot refs so multi-slice actions read a consistent view without\n  // re-creating the callbacks on every state change.\n  const nodesRef = useLatest(nodes);\n  const edgesRef = useLatest(edges);\n  const groupsRef = useLatest(groups);\n  const selectionRef = useLatest(selection);\n\n  const addNode = useCallback((node: NodeGraphNodeInput): string => {\n    const id = node.id ?? generateNodeId('node');\n    const next: NodeGraphNode = { ...node, id };\n    setNodes(prev => [...prev, next]);\n    return id;\n  }, []);\n\n  const removeNodes = useCallback(\n    (ids: ReadonlyArray<string>): void => {\n      if (ids.length === 0) return;\n      const removed = new Set(ids);\n      const result = applyCascadeDelete(\n        {\n          nodes: nodesRef.current,\n          edges: edgesRef.current,\n          groups: groupsRef.current,\n        },\n        { nodes: ids, edges: [], groups: [] }\n      );\n      setNodes(result.nodes as NodeGraphNode[]);\n      setEdges(result.edges as NodeGraphEdge[]);\n      const sel = selectionRef.current;\n      const keptEdgeIds = new Set(\n        (result.edges as NodeGraphEdge[]).map(e => e.id)\n      );\n      const dropsNode = sel.nodes.some(nodeId => removed.has(nodeId));\n      const dropsEdge = sel.edges.some(edgeId => !keptEdgeIds.has(edgeId));\n      if (dropsNode || dropsEdge) {\n        setSelection({\n          nodes: sel.nodes.filter(nodeId => !removed.has(nodeId)),\n          edges: sel.edges.filter(edgeId => keptEdgeIds.has(edgeId)),\n          groups: sel.groups,\n        });\n      }\n    },\n    [nodesRef, edgesRef, groupsRef, selectionRef]\n  );\n\n  const removeEdges = useCallback(\n    (ids: ReadonlyArray<string>): void => {\n      if (ids.length === 0) return;\n      const removed = new Set(ids);\n      setEdges(prev => prev.filter(e => !removed.has(e.id)));\n      const sel = selectionRef.current;\n      if (sel.edges.some(edgeId => removed.has(edgeId))) {\n        setSelection({\n          nodes: sel.nodes,\n          edges: sel.edges.filter(edgeId => !removed.has(edgeId)),\n          groups: sel.groups,\n        });\n      }\n    },\n    [selectionRef]\n  );\n\n  const disconnectPort = useCallback(\n    (node: string, port: string): void => {\n      removeEdges(edgesConnectedToPort(edgesRef.current, { node, port }));\n    },\n    [edgesRef, removeEdges]\n  );\n\n  const removeSelection = useCallback((): void => {\n    const sel = selectionRef.current;\n    if (\n      sel.nodes.length === 0 &&\n      sel.edges.length === 0 &&\n      sel.groups.length === 0\n    ) {\n      return;\n    }\n    const result = applyCascadeDelete(\n      {\n        nodes: nodesRef.current,\n        edges: edgesRef.current,\n        groups: groupsRef.current,\n      },\n      sel\n    );\n    setNodes(result.nodes as NodeGraphNode[]);\n    setEdges(result.edges as NodeGraphEdge[]);\n    setGroups(result.groups as NodeGraphGroup[]);\n    setSelection(EMPTY_SELECTION);\n  }, [nodesRef, edgesRef, groupsRef, selectionRef]);\n\n  const duplicateNodes = useCallback(\n    (\n      ids?: ReadonlyArray<string>,\n      duplicateOptions?: DuplicateNodesOptions\n    ): string[] => {\n      const targetIds = ids ?? selectionRef.current.nodes;\n      const copies = duplicateNodesImpl(\n        nodesRef.current,\n        targetIds,\n        duplicateOptions\n      );\n      if (copies.length === 0) return [];\n      setNodes(prev => [...prev, ...copies]);\n      const newIds = copies.map(n => n.id);\n      setSelection({ nodes: newIds, edges: [], groups: [] });\n      return newIds;\n    },\n    [nodesRef, selectionRef]\n  );\n\n  const connect = useCallback(\n    (\n      source: NodeGraphPortRef,\n      target: NodeGraphPortRef,\n      data?: unknown\n    ): string => {\n      const existing = edgesRef.current.find(\n        e =>\n          e.source.node === source.node &&\n          e.source.port === source.port &&\n          e.target.node === target.node &&\n          e.target.port === target.port\n      );\n      if (existing) return existing.id;\n      const id = generateEdgeId(source, target);\n      const edge: NodeGraphEdge = {\n        id,\n        source,\n        target,\n        ...(data !== undefined ? { data } : {}),\n      };\n      setEdges(prev => [...prev, edge]);\n      return id;\n    },\n    [edgesRef]\n  );\n\n  const addGroup = useCallback(\n    (bounds: WorldRect, groupOptions?: AddGroupOptions): string => {\n      const id = groupOptions?.id ?? generateNodeId('group');\n      const group: NodeGraphGroup = {\n        id,\n        bounds,\n        ...(groupOptions?.label !== undefined\n          ? { label: groupOptions.label }\n          : {}),\n        ...(groupOptions?.color !== undefined\n          ? { color: groupOptions.color }\n          : {}),\n      };\n      setGroups(prev => [...prev, group]);\n      return id;\n    },\n    []\n  );\n\n  const removeGroups = useCallback(\n    (ids: ReadonlyArray<string>): void => {\n      if (ids.length === 0) return;\n      const removed = new Set(ids);\n      setGroups(prev => prev.filter(g => !removed.has(g.id)));\n      const sel = selectionRef.current;\n      if (sel.groups.some(groupId => removed.has(groupId))) {\n        setSelection({\n          nodes: sel.nodes,\n          edges: sel.edges,\n          groups: sel.groups.filter(groupId => !removed.has(groupId)),\n        });\n      }\n    },\n    [selectionRef]\n  );\n\n  const clearSelection = useCallback((): void => {\n    setSelection(EMPTY_SELECTION);\n  }, []);\n\n  const bind = useMemo<NodeGraphBind>(\n    () => ({\n      nodes,\n      edges,\n      groups,\n      selection,\n      onNodesChange: setNodes,\n      onEdgesChange: setEdges,\n      onGroupsChange: setGroups,\n      onSelectionChange: setSelection,\n    }),\n    [nodes, edges, groups, selection]\n  );\n\n  return {\n    nodes,\n    edges,\n    groups,\n    selection,\n    setNodes,\n    setEdges,\n    setGroups,\n    setSelection,\n    addNode,\n    removeNodes,\n    removeEdges,\n    disconnectPort,\n    removeSelection,\n    duplicateNodes,\n    connect,\n    addGroup,\n    removeGroups,\n    clearSelection,\n    bind,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AACE;AACA;AACA;;AA2FF;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAGJ;AAGA;AAGA;AAGA;;;AAMA;AACA;AACA;AACA;AAEA;;;AAGE;AACA;;AAGF;AAEI;;AACA;;;;;AAMG;AAGH;AACA;AACA;;AAIA;;AAEA;AACE;AACE;AACA;;AAED;;;AAMP;AAEI;;AACA;;AAEA;AACA;AACE;;AAEE;;AAED;;AAEL;;AAME;AACF;AAIF;AACE;AACA;AAEE;AACA;;;;;;;;AAYF;AACA;AACA;;;;;AAUE;AAKA;AAAyB;AACzB;AACA;AACA;AACA;AACF;;;AAaM;AACA;;AAGJ;;;AAEA;;;;AAIE;;AAEF;AACA;AACF;;;AAOE;;;AAGE;AACE;;AAEF;AACE;;;AAGJ;AACA;;AAKJ;AAEI;;AACA;;AAEA;AACA;AACE;;;AAGE;AACD;;AAEL;AAIF;;;AAIA;;;;;AAMI;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;AA0BN;;"}

package/dist/esm/components/editor/NodeGraph/useNodeGraphConnection.js

@@ -0,0 +1,334 @@
+"use client";
+import { useRef, useEffect, useCallback } from 'react';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { screenToWorld } from '../../primitives/viewport/viewportCoords.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { generateEdgeId } from './nodeGraphIds.js';
+
+/** Pointer travel (screen px) before a reconnect grab counts as a drag. */
+const RECONNECT_DRAG_THRESHOLD_PX = 4;
+/**
+ * Read the port id/node id encoded in `data-*` attributes of an element
+ * (or its ancestors). Returns null when the element isn't a port handle.
+ */
+function readPortRefFromElement(el) {
+    let cursor = el;
+    while (cursor) {
+        const node = cursor.getAttribute('data-node-id');
+        const port = cursor.getAttribute('data-port-id');
+        if (node && port)
+            return { node, port };
+        cursor = cursor.parentElement;
+    }
+    return null;
+}
+/**
+ * Build the validation info object passed to `isValidConnection`. Looks up
+ * the per-port side + dataType in the store so the consumer doesn't have
+ * to maintain a parallel port index.
+ */
+function buildValidationInfo(store, source, target) {
+    const src = store.getPortPosition(source.node, source.port);
+    const tgt = store.getPortPosition(target.node, target.port);
+    const sideCombo = src && tgt ? `${src.side}->${tgt.side}` : 'unknown';
+    return {
+        sameNode: source.node === target.node,
+        sideCombo,
+        ...(src?.dataType !== undefined ? { sourceDataType: src.dataType } : {}),
+        ...(tgt?.dataType !== undefined ? { targetDataType: tgt.dataType } : {}),
+    };
+}
+/**
+ * Connection-drag controller. Owns the lifecycle from `pointerdown` (on a
+ * port for a new edge, or near an edge endpoint for a reconnect) through
+ * document-level `pointermove` / `pointerup` to the eventual edge emission.
+ *
+ * Document listeners are attached only while a drag is in flight — outside
+ * of a gesture there is zero pointermove cost. Move events are coalesced
+ * to one hit-test per animation frame so `document.elementFromPoint`
+ * doesn't force a layout flush on every pointer poll.
+ */
+function useNodeGraphConnection(options) {
+    const { viewportRef, store, getTransform, isValidConnection, onConnectStart, onConnectEnd, emitEdgesChange, emitSelectionChange, } = options;
+    const isValidRef = useLatest(isValidConnection);
+    const onConnectStartRef = useLatest(onConnectStart);
+    const onConnectEndRef = useLatest(onConnectEnd);
+    const emitEdgesChangeRef = useLatest(emitEdgesChange);
+    const emitSelectionChangeRef = useLatest(emitSelectionChange);
+    const teardownRef = useRef(null);
+    // If the component unmounts mid-drag, release the document listeners so
+    // we don't leak handlers attached to the page.
+    useEffect(() => {
+        return () => {
+            teardownRef.current?.();
+            teardownRef.current = null;
+        };
+    }, []);
+    const screenPointToWorld = useCallback((clientX, clientY) => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return { x: 0, y: 0 };
+        const rect = viewport.getBoundingClientRect();
+        return screenToWorld({ x: clientX - rect.left, y: clientY - rect.top }, getTransform());
+    }, [viewportRef, getTransform]);
+    // Whether a connection from `source` to `candidate` is allowed: defers to
+    // the consumer's `isValidConnection` when provided, otherwise the built-in
+    // rule of "any port but one on the same node". Shared by the live-hover
+    // preview and both drop paths (create + reconnect) so the accept/reject
+    // verdict can never drift between them.
+    const isAcceptable = useCallback((source, candidate) => {
+        const info = buildValidationInfo(store, source, candidate);
+        const validator = isValidRef.current;
+        return validator ? validator(source, candidate, info) : !info.sameNode;
+    }, [store, isValidRef]);
+    // Shared drag lifecycle for both modes. `source` is the fixed endpoint the
+    // preview draws from and the one passed to `isValidConnection` as the
+    // source argument.
+    const beginDrag = useCallback((params) => {
+        const { source, startClientX, startClientY, mode } = params;
+        // If a previous gesture didn't tear down for some reason, clean it now.
+        teardownRef.current?.();
+        const startWorld = screenPointToWorld(startClientX, startClientY);
+        store.setInteraction({
+            kind: 'connect',
+            source,
+            currentWorld: startWorld,
+            candidate: null,
+            invalid: false,
+            ...(mode.kind === 'reconnect'
+                ? { reconnectEdgeId: mode.edgeId, reconnectEnd: mode.end }
+                : {}),
+        });
+        if (mode.kind === 'create') {
+            onConnectStartRef.current?.({ source, worldPoint: startWorld });
+        }
+        let pendingPoint = null;
+        let rafId = 0;
+        let didMove = false;
+        const runMove = () => {
+            rafId = 0;
+            const point = pendingPoint;
+            pendingPoint = null;
+            if (!point)
+                return;
+            const state = store.getInteraction();
+            if (state.kind !== 'connect')
+                return;
+            const currentWorld = screenPointToWorld(point.x, point.y);
+            const candidate = document.elementFromPoint(point.x, point.y);
+            const candidateRef = readPortRefFromElement(candidate);
+            let nextCandidate = null;
+            let invalid = false;
+            if (candidateRef) {
+                if (candidateRef.node === state.source.node &&
+                    candidateRef.port === state.source.port) {
+                    // Hovering back over the fixed endpoint — treat as no candidate.
+                    nextCandidate = null;
+                }
+                else {
+                    nextCandidate = candidateRef;
+                    invalid = !isAcceptable(state.source, candidateRef);
+                }
+            }
+            store.setInteraction({
+                kind: 'connect',
+                source: state.source,
+                currentWorld,
+                candidate: nextCandidate,
+                invalid,
+                ...(mode.kind === 'reconnect'
+                    ? { reconnectEdgeId: mode.edgeId, reconnectEnd: mode.end }
+                    : {}),
+            });
+        };
+        const handleMove = (e) => {
+            if (!didMove) {
+                const dx = e.clientX - startClientX;
+                const dy = e.clientY - startClientY;
+                if (Math.hypot(dx, dy) >= RECONNECT_DRAG_THRESHOLD_PX)
+                    didMove = true;
+            }
+            pendingPoint = { x: e.clientX, y: e.clientY };
+            if (rafId === 0) {
+                rafId = requestAnimationFrame(runMove);
+            }
+        };
+        const teardown = () => {
+            if (rafId !== 0) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+            document.removeEventListener('pointermove', handleMove);
+            document.removeEventListener('pointerup', handleUp);
+            document.removeEventListener('pointercancel', handleCancel);
+            teardownRef.current = null;
+        };
+        const resolveCandidate = (clientX, clientY) => {
+            const dropEl = document.elementFromPoint(clientX, clientY);
+            const finalCandidate = readPortRefFromElement(dropEl);
+            return finalCandidate &&
+                !(finalCandidate.node === source.node &&
+                    finalCandidate.port === source.port)
+                ? finalCandidate
+                : null;
+        };
+        const dropPoint = (clientX, clientY) => {
+            const viewport = viewportRef.current;
+            const rect = viewport?.getBoundingClientRect();
+            const screenPoint = rect
+                ? { x: clientX - rect.left, y: clientY - rect.top }
+                : { x: clientX, y: clientY };
+            return {
+                worldPoint: screenPointToWorld(clientX, clientY),
+                screenPoint,
+            };
+        };
+        function handleUp(e) {
+            teardown();
+            const state = store.getInteraction();
+            store.setInteraction({ kind: 'idle' });
+            if (state.kind !== 'connect')
+                return;
+            const candidate = resolveCandidate(e.clientX, e.clientY);
+            const drop = dropPoint(e.clientX, e.clientY);
+            if (mode.kind === 'reconnect') {
+                // A grab that never moved is a click — select the edge, keep it.
+                if (!didMove) {
+                    emitSelectionChangeRef.current?.({
+                        nodes: [],
+                        edges: [mode.edgeId],
+                        groups: [],
+                    });
+                    onConnectEndRef.current?.({
+                        source,
+                        target: null,
+                        cancelled: true,
+                        ...drop,
+                    });
+                    return;
+                }
+                const accepted = candidate ? isAcceptable(source, candidate) : false;
+                if (candidate && accepted) {
+                    const next = store
+                        .getData()
+                        .edges.map(edge => edge.id === mode.edgeId
+                        ? mode.end === 'source'
+                            ? { ...edge, source: candidate }
+                            : { ...edge, target: candidate }
+                        : edge);
+                    emitEdgesChangeRef.current(next);
+                    onConnectEndRef.current?.({
+                        source,
+                        target: candidate,
+                        cancelled: false,
+                        ...drop,
+                    });
+                }
+                else {
+                    // Dropped on empty space or an invalid port → detach (delete).
+                    emitEdgesChangeRef.current(store.getData().edges.filter(edge => edge.id !== mode.edgeId));
+                    onConnectEndRef.current?.({
+                        source,
+                        target: null,
+                        cancelled: true,
+                        ...drop,
+                    });
+                }
+                return;
+            }
+            // Create mode.
+            let cancelled = !candidate;
+            if (candidate) {
+                const accepted = isAcceptable(source, candidate);
+                if (!accepted) {
+                    cancelled = true;
+                }
+                else {
+                    const newEdge = {
+                        id: generateEdgeId(source, candidate),
+                        source,
+                        target: candidate,
+                    };
+                    emitEdgesChangeRef.current([...store.getData().edges, newEdge]);
+                }
+            }
+            onConnectEndRef.current?.({
+                source,
+                target: cancelled ? null : (candidate ?? null),
+                cancelled,
+                ...drop,
+            });
+        }
+        function handleCancel(e) {
+            teardown();
+            const state = store.getInteraction();
+            store.setInteraction({ kind: 'idle' });
+            if (state.kind !== 'connect')
+                return;
+            onConnectEndRef.current?.({
+                source,
+                target: null,
+                cancelled: true,
+                ...dropPoint(e.clientX, e.clientY),
+            });
+        }
+        teardownRef.current = teardown;
+        document.addEventListener('pointermove', handleMove);
+        document.addEventListener('pointerup', handleUp);
+        document.addEventListener('pointercancel', handleCancel);
+    }, [
+        store,
+        viewportRef,
+        screenPointToWorld,
+        onConnectStartRef,
+        onConnectEndRef,
+        emitEdgesChangeRef,
+        emitSelectionChangeRef,
+        isAcceptable,
+    ]);
+    const onPortPointerDown = useCallback((event, nodeId, portId) => {
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        // Bail when the port hasn't measured yet — without a registered
+        // position the preview curve has no anchor.
+        if (!store.getPortPosition(nodeId, portId))
+            return;
+        beginDrag({
+            source: { node: nodeId, port: portId },
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            mode: { kind: 'create' },
+        });
+    }, [store, beginDrag]);
+    const onEdgeReconnectStart = useCallback((edgeId, end, clientX, clientY) => {
+        const edge = store.getData().edges.find(e => e.id === edgeId);
+        if (!edge)
+            return;
+        // The fixed endpoint is the *other* end — that's what the preview
+        // anchors to and what the dragged end validates against.
+        const fixed = end === 'source' ? edge.target : edge.source;
+        beginDrag({
+            source: fixed,
+            startClientX: clientX,
+            startClientY: clientY,
+            mode: { kind: 'reconnect', edgeId, end },
+        });
+    }, [store, beginDrag]);
+    return { onPortPointerDown, onEdgeReconnectStart };
+}
+
+export { useNodeGraphConnection };
+//# sourceMappingURL=useNodeGraphConnection.js.map

package/dist/esm/components/editor/NodeGraph/useNodeGraphConnection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraphConnection.js","sources":["src/components/editor/NodeGraph/useNodeGraphConnection.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { screenToWorld } from '@/components/primitives/viewport';\nimport { useLatest } from '@/hooks';\n\nimport { generateEdgeId } from './nodeGraphIds';\n\nimport type {\n  NodeGraphEdge,\n  NodeGraphPortRef,\n  NodeGraphSelection,\n  NodeGraphConnectStartInfo,\n  NodeGraphConnectEndInfo,\n  NodeGraphConnectionValidationInfo,\n} from './NodeGraph.types';\nimport type { NodeGraphStore } from './NodeGraphStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type { ViewportTransform } from '@/components/primitives/viewport';\nimport type React from 'react';\n\n/** Pointer travel (screen px) before a reconnect grab counts as a drag. */\nconst RECONNECT_DRAG_THRESHOLD_PX = 4;\n\n/**\n * What a connection drag is doing: creating a brand-new edge from a port, or\n * re-dragging one endpoint of an existing edge (which on drop moves the\n * endpoint, deletes the edge, or — with no drag — selects it).\n */\ntype ConnectMode =\n  | { kind: 'create' }\n  | { kind: 'reconnect'; edgeId: string; end: 'source' | 'target' };\n\ninterface UseNodeGraphConnectionOptions {\n  viewportRef: React.RefObject<HTMLDivElement | null>;\n  store: NodeGraphStore;\n  getTransform: () => ViewportTransform;\n  isValidConnection?: (\n    source: NodeGraphPortRef,\n    target: NodeGraphPortRef,\n    info: NodeGraphConnectionValidationInfo\n  ) => boolean;\n  onConnectStart?: (info: NodeGraphConnectStartInfo) => void;\n  onConnectEnd?: (info: NodeGraphConnectEndInfo) => void;\n  emitEdgesChange: (next: NodeGraphEdge[]) => void;\n  /** Used to select an edge when a reconnect grab ends as a plain click. */\n  emitSelectionChange?: (next: NodeGraphSelection) => void;\n}\n\ninterface UseNodeGraphConnectionReturn {\n  /**\n   * Handler attached to each `<NodeGraph.Port>` slot. Starts a connection\n   * drag (create mode) and wires up document-level pointer listeners until\n   * the drag terminates.\n   */\n  onPortPointerDown: (\n    event: React.PointerEvent<HTMLElement>,\n    nodeId: string,\n    portId: string\n  ) => void;\n  /**\n   * Start re-dragging one endpoint of an existing edge. Invoked by the\n   * parent when the pointer grabs near an edge endpoint on the background.\n   */\n  onEdgeReconnectStart: (\n    edgeId: string,\n    end: 'source' | 'target',\n    clientX: number,\n    clientY: number\n  ) => void;\n}\n\n/**\n * Read the port id/node id encoded in `data-*` attributes of an element\n * (or its ancestors). Returns null when the element isn't a port handle.\n */\nfunction readPortRefFromElement(el: Element | null): NodeGraphPortRef | null {\n  let cursor: Element | null = el;\n  while (cursor) {\n    const node = cursor.getAttribute('data-node-id');\n    const port = cursor.getAttribute('data-port-id');\n    if (node && port) return { node, port };\n    cursor = cursor.parentElement;\n  }\n  return null;\n}\n\n/**\n * Build the validation info object passed to `isValidConnection`. Looks up\n * the per-port side + dataType in the store so the consumer doesn't have\n * to maintain a parallel port index.\n */\nfunction buildValidationInfo(\n  store: NodeGraphStore,\n  source: NodeGraphPortRef,\n  target: NodeGraphPortRef\n): NodeGraphConnectionValidationInfo {\n  const src = store.getPortPosition(source.node, source.port);\n  const tgt = store.getPortPosition(target.node, target.port);\n  const sideCombo = src && tgt ? `${src.side}->${tgt.side}` : 'unknown';\n  return {\n    sameNode: source.node === target.node,\n    sideCombo,\n    ...(src?.dataType !== undefined ? { sourceDataType: src.dataType } : {}),\n    ...(tgt?.dataType !== undefined ? { targetDataType: tgt.dataType } : {}),\n  };\n}\n\n/**\n * Connection-drag controller. Owns the lifecycle from `pointerdown` (on a\n * port for a new edge, or near an edge endpoint for a reconnect) through\n * document-level `pointermove` / `pointerup` to the eventual edge emission.\n *\n * Document listeners are attached only while a drag is in flight — outside\n * of a gesture there is zero pointermove cost. Move events are coalesced\n * to one hit-test per animation frame so `document.elementFromPoint`\n * doesn't force a layout flush on every pointer poll.\n */\nexport function useNodeGraphConnection(\n  options: UseNodeGraphConnectionOptions\n): UseNodeGraphConnectionReturn {\n  const {\n    viewportRef,\n    store,\n    getTransform,\n    isValidConnection,\n    onConnectStart,\n    onConnectEnd,\n    emitEdgesChange,\n    emitSelectionChange,\n  } = options;\n\n  const isValidRef = useLatest(isValidConnection);\n  const onConnectStartRef = useLatest(onConnectStart);\n  const onConnectEndRef = useLatest(onConnectEnd);\n  const emitEdgesChangeRef = useLatest(emitEdgesChange);\n  const emitSelectionChangeRef = useLatest(emitSelectionChange);\n\n  const teardownRef = useRef<(() => void) | null>(null);\n\n  // If the component unmounts mid-drag, release the document listeners so\n  // we don't leak handlers attached to the page.\n  useEffect(() => {\n    return () => {\n      teardownRef.current?.();\n      teardownRef.current = null;\n    };\n  }, []);\n\n  const screenPointToWorld = useCallback(\n    (clientX: number, clientY: number): Point2D => {\n      const viewport = viewportRef.current;\n      if (!viewport) return { x: 0, y: 0 };\n      const rect = viewport.getBoundingClientRect();\n      return screenToWorld(\n        { x: clientX - rect.left, y: clientY - rect.top },\n        getTransform()\n      );\n    },\n    [viewportRef, getTransform]\n  );\n\n  // Whether a connection from `source` to `candidate` is allowed: defers to\n  // the consumer's `isValidConnection` when provided, otherwise the built-in\n  // rule of \"any port but one on the same node\". Shared by the live-hover\n  // preview and both drop paths (create + reconnect) so the accept/reject\n  // verdict can never drift between them.\n  const isAcceptable = useCallback(\n    (source: NodeGraphPortRef, candidate: NodeGraphPortRef): boolean => {\n      const info = buildValidationInfo(store, source, candidate);\n      const validator = isValidRef.current;\n      return validator ? validator(source, candidate, info) : !info.sameNode;\n    },\n    [store, isValidRef]\n  );\n\n  // Shared drag lifecycle for both modes. `source` is the fixed endpoint the\n  // preview draws from and the one passed to `isValidConnection` as the\n  // source argument.\n  const beginDrag = useCallback(\n    (params: {\n      source: NodeGraphPortRef;\n      startClientX: number;\n      startClientY: number;\n      mode: ConnectMode;\n    }): void => {\n      const { source, startClientX, startClientY, mode } = params;\n\n      // If a previous gesture didn't tear down for some reason, clean it now.\n      teardownRef.current?.();\n\n      const startWorld = screenPointToWorld(startClientX, startClientY);\n      store.setInteraction({\n        kind: 'connect',\n        source,\n        currentWorld: startWorld,\n        candidate: null,\n        invalid: false,\n        ...(mode.kind === 'reconnect'\n          ? { reconnectEdgeId: mode.edgeId, reconnectEnd: mode.end }\n          : {}),\n      });\n      if (mode.kind === 'create') {\n        onConnectStartRef.current?.({ source, worldPoint: startWorld });\n      }\n\n      let pendingPoint: { x: number; y: number } | null = null;\n      let rafId = 0;\n      let didMove = false;\n\n      const runMove = (): void => {\n        rafId = 0;\n        const point = pendingPoint;\n        pendingPoint = null;\n        if (!point) return;\n        const state = store.getInteraction();\n        if (state.kind !== 'connect') return;\n\n        const currentWorld = screenPointToWorld(point.x, point.y);\n        const candidate = document.elementFromPoint(point.x, point.y);\n        const candidateRef = readPortRefFromElement(candidate);\n\n        let nextCandidate: NodeGraphPortRef | null = null;\n        let invalid = false;\n        if (candidateRef) {\n          if (\n            candidateRef.node === state.source.node &&\n            candidateRef.port === state.source.port\n          ) {\n            // Hovering back over the fixed endpoint — treat as no candidate.\n            nextCandidate = null;\n          } else {\n            nextCandidate = candidateRef;\n            invalid = !isAcceptable(state.source, candidateRef);\n          }\n        }\n\n        store.setInteraction({\n          kind: 'connect',\n          source: state.source,\n          currentWorld,\n          candidate: nextCandidate,\n          invalid,\n          ...(mode.kind === 'reconnect'\n            ? { reconnectEdgeId: mode.edgeId, reconnectEnd: mode.end }\n            : {}),\n        });\n      };\n\n      const handleMove = (e: PointerEvent): void => {\n        if (!didMove) {\n          const dx = e.clientX - startClientX;\n          const dy = e.clientY - startClientY;\n          if (Math.hypot(dx, dy) >= RECONNECT_DRAG_THRESHOLD_PX) didMove = true;\n        }\n        pendingPoint = { x: e.clientX, y: e.clientY };\n        if (rafId === 0) {\n          rafId = requestAnimationFrame(runMove);\n        }\n      };\n\n      const teardown = (): void => {\n        if (rafId !== 0) {\n          cancelAnimationFrame(rafId);\n          rafId = 0;\n        }\n        document.removeEventListener('pointermove', handleMove);\n        document.removeEventListener('pointerup', handleUp);\n        document.removeEventListener('pointercancel', handleCancel);\n        teardownRef.current = null;\n      };\n\n      const resolveCandidate = (\n        clientX: number,\n        clientY: number\n      ): NodeGraphPortRef | null => {\n        const dropEl = document.elementFromPoint(clientX, clientY);\n        const finalCandidate = readPortRefFromElement(dropEl);\n        return finalCandidate &&\n          !(\n            finalCandidate.node === source.node &&\n            finalCandidate.port === source.port\n          )\n          ? finalCandidate\n          : null;\n      };\n\n      const dropPoint = (\n        clientX: number,\n        clientY: number\n      ): { worldPoint: Point2D; screenPoint: Point2D } => {\n        const viewport = viewportRef.current;\n        const rect = viewport?.getBoundingClientRect();\n        const screenPoint = rect\n          ? { x: clientX - rect.left, y: clientY - rect.top }\n          : { x: clientX, y: clientY };\n        return {\n          worldPoint: screenPointToWorld(clientX, clientY),\n          screenPoint,\n        };\n      };\n\n      function handleUp(e: PointerEvent): void {\n        teardown();\n        const state = store.getInteraction();\n        store.setInteraction({ kind: 'idle' });\n        if (state.kind !== 'connect') return;\n        const candidate = resolveCandidate(e.clientX, e.clientY);\n        const drop = dropPoint(e.clientX, e.clientY);\n\n        if (mode.kind === 'reconnect') {\n          // A grab that never moved is a click — select the edge, keep it.\n          if (!didMove) {\n            emitSelectionChangeRef.current?.({\n              nodes: [],\n              edges: [mode.edgeId],\n              groups: [],\n            });\n            onConnectEndRef.current?.({\n              source,\n              target: null,\n              cancelled: true,\n              ...drop,\n            });\n            return;\n          }\n          const accepted = candidate ? isAcceptable(source, candidate) : false;\n          if (candidate && accepted) {\n            const next = store\n              .getData()\n              .edges.map(edge =>\n                edge.id === mode.edgeId\n                  ? mode.end === 'source'\n                    ? { ...edge, source: candidate }\n                    : { ...edge, target: candidate }\n                  : edge\n              );\n            emitEdgesChangeRef.current(next);\n            onConnectEndRef.current?.({\n              source,\n              target: candidate,\n              cancelled: false,\n              ...drop,\n            });\n          } else {\n            // Dropped on empty space or an invalid port → detach (delete).\n            emitEdgesChangeRef.current(\n              store.getData().edges.filter(edge => edge.id !== mode.edgeId)\n            );\n            onConnectEndRef.current?.({\n              source,\n              target: null,\n              cancelled: true,\n              ...drop,\n            });\n          }\n          return;\n        }\n\n        // Create mode.\n        let cancelled = !candidate;\n        if (candidate) {\n          const accepted = isAcceptable(source, candidate);\n          if (!accepted) {\n            cancelled = true;\n          } else {\n            const newEdge: NodeGraphEdge = {\n              id: generateEdgeId(source, candidate),\n              source,\n              target: candidate,\n            };\n            emitEdgesChangeRef.current([...store.getData().edges, newEdge]);\n          }\n        }\n        onConnectEndRef.current?.({\n          source,\n          target: cancelled ? null : (candidate ?? null),\n          cancelled,\n          ...drop,\n        });\n      }\n\n      function handleCancel(e: PointerEvent): void {\n        teardown();\n        const state = store.getInteraction();\n        store.setInteraction({ kind: 'idle' });\n        if (state.kind !== 'connect') return;\n        onConnectEndRef.current?.({\n          source,\n          target: null,\n          cancelled: true,\n          ...dropPoint(e.clientX, e.clientY),\n        });\n      }\n\n      teardownRef.current = teardown;\n      document.addEventListener('pointermove', handleMove);\n      document.addEventListener('pointerup', handleUp);\n      document.addEventListener('pointercancel', handleCancel);\n    },\n    [\n      store,\n      viewportRef,\n      screenPointToWorld,\n      onConnectStartRef,\n      onConnectEndRef,\n      emitEdgesChangeRef,\n      emitSelectionChangeRef,\n      isAcceptable,\n    ]\n  );\n\n  const onPortPointerDown = useCallback(\n    (\n      event: React.PointerEvent<HTMLElement>,\n      nodeId: string,\n      portId: string\n    ): void => {\n      if (event.button !== 0) return;\n      event.stopPropagation();\n      event.preventDefault();\n      // Bail when the port hasn't measured yet — without a registered\n      // position the preview curve has no anchor.\n      if (!store.getPortPosition(nodeId, portId)) return;\n      beginDrag({\n        source: { node: nodeId, port: portId },\n        startClientX: event.clientX,\n        startClientY: event.clientY,\n        mode: { kind: 'create' },\n      });\n    },\n    [store, beginDrag]\n  );\n\n  const onEdgeReconnectStart = useCallback(\n    (\n      edgeId: string,\n      end: 'source' | 'target',\n      clientX: number,\n      clientY: number\n    ): void => {\n      const edge = store.getData().edges.find(e => e.id === edgeId);\n      if (!edge) return;\n      // The fixed endpoint is the *other* end — that's what the preview\n      // anchors to and what the dragged end validates against.\n      const fixed = end === 'source' ? edge.target : edge.source;\n      beginDrag({\n        source: fixed,\n        startClientX: clientX,\n        startClientY: clientY,\n        mode: { kind: 'reconnect', edgeId, end },\n      });\n    },\n    [store, beginDrag]\n  );\n\n  return { onPortPointerDown, onEdgeReconnectStart };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;AACA;AAkDA;;;AAGG;AACH;;;;;;AAKsB;AAClB;;AAEF;AACF;AAEA;;;;AAIG;AACH;AAKE;AACA;;;AAGE;;;;;AAKJ;AAEA;;;;;;;;;AASG;AACG;AAGJ;AAWA;AACA;AACA;AACA;AACA;AAEA;;;;AAKE;AACE;AACA;AACF;;;AAKE;AACA;;AACA;;AAKF;;;;;;;;AAYE;AACA;AACF;;;;AAOF;;;AAUI;;;AAIE;;AAEA;AACA;AACA;AACA;AACE;;AAEH;AACD;AACE;;;;;;;;;AAWA;;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;;;;;AAkBE;;;AAGA;;AAEA;AACE;;AAEH;AACH;AAEA;;AAEI;AACA;;;;AAGF;AACA;AACE;;AAEJ;;AAGE;;;;AAIA;AACA;AACA;AACA;AACF;AAEA;;AAKE;AACA;AACE;AAEE;AAEF;;AAEJ;AAEA;AAIE;AACA;;AAEE;;;AAGA;;;AAGJ;;AAGE;AACA;;AAEA;;AACA;AACA;AAEA;;;;AAIM;AACA;AACA;AACD;;;AAGC;AACA;AACA;AACD;;;AAGH;AACA;;AAEK;AACA;AAEG;;;;AAKN;;;AAGE;AACA;AACA;AACD;;;;;;;AAQC;AACA;AACA;AACD;;;;;AAML;;;;;;;AAMI;AACE;;AAEA;;AAEF;;;;;AAKF;;AAEA;AACD;;;AAID;AACA;;AAEA;;;;AAGE;AACA;;AAED;;AAGH;AACA;AACA;AACA;AACF;;;;;;;;;AAUC;;AASC;;;;;;;;AAMA;;;;AAIE;AACD;AACH;AAIF;;AAQI;;;;AAGA;AACA;AACE;AACA;AACA;;AAED;AACH;AAIF;AACF;;"}