@omiron33/omi-neuron-web 0.2.24 → 0.2.26

package/dist/{NeuronWebExplorer-XMtk_7z-.d.ts → NeuronWebExplorer-BBTb828y.d.ts}

@@ -109,6 +109,12 @@ interface TreeLayoutOptions {
     rootNodeId?: string;
     /** Direction the tree grows: 'down'/'up' for vertical, 'left'/'right' for horizontal (default: 'down') */
     direction?: 'down' | 'up' | 'left' | 'right';
+    /**
+     * When true, reverses edge interpretation: edge.from becomes child and edge.to becomes parent.
+     * Use this if your edges point from child to parent (e.g., "derives from" relationships).
+     * Default: false (edges point from parent to child)
+     */
+    reverseEdgeDirection?: boolean;
 }
 interface NeuronLayoutOptions {
     mode?: NeuronLayoutMode;
@@ -320,6 +326,32 @@ interface NeuronWebProps {
     onEdgeClick?: (edge: NeuronEdge) => void;
     onBackgroundClick?: () => void;
     onCameraChange?: (position: [number, number, number]) => void;
+    /**
+     * Enable node dragging for manual arrangement.
+     * - `true` or `{ enabled: true }`: Enable dragging, constrain to XY plane in tree mode
+     * - `{ enabled: true, constrainToPlane: 'xy' | 'xz' | 'yz' }`: Constrain to specific plane
+     */
+    draggable?: boolean | {
+        enabled: boolean;
+        constrainToPlane?: 'xy' | 'xz' | 'yz';
+    };
+    /** Called continuously while a node is being dragged. */
+    onNodeDrag?: (node: NeuronNode, position: [number, number, number]) => void;
+    /** Called when a node drag operation completes. */
+    onNodeDragEnd?: (node: NeuronNode, position: [number, number, number]) => void;
+    /**
+     * Enable keyboard controls for camera movement:
+     * - WASD: Pan camera
+     * - Q/E: Zoom in/out
+     * This frees the mouse for node interaction.
+     */
+    keyboardControls?: boolean | {
+        enabled: boolean;
+        /** Pan speed multiplier (default: 1) */
+        panSpeed?: number;
+        /** Zoom speed multiplier (default: 1) */
+        zoomSpeed?: number;
+    };
     /** When set, plays a story beat by id using the built-in study path player. */
     activeStoryBeatId?: string | null;
     /** Optional override for story beat step duration (ms). */
@@ -405,7 +437,7 @@ interface NeuronWebExplorerProps {
     renderLoadingState?: () => React__default.ReactNode;
 }
 
-declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, selectedNode, focusNodeSlug, onFocusConsumed, visibleNodeSlugs, renderEmptyState, renderLoadingState, ariaLabel, theme, domainColors, layout, cameraFit, cardsMode, clickCard, clickZoom, studyPathRequest, onStudyPathComplete, renderNodeHover, renderNodeDetail, hoverCard, hoverCardSlots, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onEdgeClick, onBackgroundClick, onCameraChange, performanceMode, density, rendering, activeStoryBeatId, storyBeatStepDurationMs, onStoryBeatComplete, }: NeuronWebProps): React__default.ReactElement;
+declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, selectedNode, focusNodeSlug, onFocusConsumed, visibleNodeSlugs, renderEmptyState, renderLoadingState, ariaLabel, theme, domainColors, layout, cameraFit, cardsMode, clickCard, clickZoom, studyPathRequest, onStudyPathComplete, renderNodeHover, renderNodeDetail, hoverCard, hoverCardSlots, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onEdgeClick, onBackgroundClick, onCameraChange, draggable, onNodeDrag, onNodeDragEnd, keyboardControls, performanceMode, density, rendering, activeStoryBeatId, storyBeatStepDurationMs, onStoryBeatComplete, }: NeuronWebProps): React__default.ReactElement;
 
 declare function NeuronWebExplorer(props: NeuronWebExplorerProps): React__default.ReactElement;
 

package/dist/{NeuronWebExplorer-OYEmP22R.d.cts → NeuronWebExplorer-C7WGF5kT.d.cts}

@@ -109,6 +109,12 @@ interface TreeLayoutOptions {
     rootNodeId?: string;
     /** Direction the tree grows: 'down'/'up' for vertical, 'left'/'right' for horizontal (default: 'down') */
     direction?: 'down' | 'up' | 'left' | 'right';
+    /**
+     * When true, reverses edge interpretation: edge.from becomes child and edge.to becomes parent.
+     * Use this if your edges point from child to parent (e.g., "derives from" relationships).
+     * Default: false (edges point from parent to child)
+     */
+    reverseEdgeDirection?: boolean;
 }
 interface NeuronLayoutOptions {
     mode?: NeuronLayoutMode;
@@ -320,6 +326,32 @@ interface NeuronWebProps {
     onEdgeClick?: (edge: NeuronEdge) => void;
     onBackgroundClick?: () => void;
     onCameraChange?: (position: [number, number, number]) => void;
+    /**
+     * Enable node dragging for manual arrangement.
+     * - `true` or `{ enabled: true }`: Enable dragging, constrain to XY plane in tree mode
+     * - `{ enabled: true, constrainToPlane: 'xy' | 'xz' | 'yz' }`: Constrain to specific plane
+     */
+    draggable?: boolean | {
+        enabled: boolean;
+        constrainToPlane?: 'xy' | 'xz' | 'yz';
+    };
+    /** Called continuously while a node is being dragged. */
+    onNodeDrag?: (node: NeuronNode, position: [number, number, number]) => void;
+    /** Called when a node drag operation completes. */
+    onNodeDragEnd?: (node: NeuronNode, position: [number, number, number]) => void;
+    /**
+     * Enable keyboard controls for camera movement:
+     * - WASD: Pan camera
+     * - Q/E: Zoom in/out
+     * This frees the mouse for node interaction.
+     */
+    keyboardControls?: boolean | {
+        enabled: boolean;
+        /** Pan speed multiplier (default: 1) */
+        panSpeed?: number;
+        /** Zoom speed multiplier (default: 1) */
+        zoomSpeed?: number;
+    };
     /** When set, plays a story beat by id using the built-in study path player. */
     activeStoryBeatId?: string | null;
     /** Optional override for story beat step duration (ms). */
@@ -405,7 +437,7 @@ interface NeuronWebExplorerProps {
     renderLoadingState?: () => React__default.ReactNode;
 }
 
-declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, selectedNode, focusNodeSlug, onFocusConsumed, visibleNodeSlugs, renderEmptyState, renderLoadingState, ariaLabel, theme, domainColors, layout, cameraFit, cardsMode, clickCard, clickZoom, studyPathRequest, onStudyPathComplete, renderNodeHover, renderNodeDetail, hoverCard, hoverCardSlots, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onEdgeClick, onBackgroundClick, onCameraChange, performanceMode, density, rendering, activeStoryBeatId, storyBeatStepDurationMs, onStoryBeatComplete, }: NeuronWebProps): React__default.ReactElement;
+declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, selectedNode, focusNodeSlug, onFocusConsumed, visibleNodeSlugs, renderEmptyState, renderLoadingState, ariaLabel, theme, domainColors, layout, cameraFit, cardsMode, clickCard, clickZoom, studyPathRequest, onStudyPathComplete, renderNodeHover, renderNodeDetail, hoverCard, hoverCardSlots, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onEdgeClick, onBackgroundClick, onCameraChange, draggable, onNodeDrag, onNodeDragEnd, keyboardControls, performanceMode, density, rendering, activeStoryBeatId, storyBeatStepDurationMs, onStoryBeatComplete, }: NeuronWebProps): React__default.ReactElement;
 
 declare function NeuronWebExplorer(props: NeuronWebExplorerProps): React__default.ReactElement;
 

package/dist/{chunk-FROPRJSB.js → chunk-QKCKZYLH.js}

@@ -1080,6 +1080,14 @@ var NodeRenderer = class {
     const state = this.nodeStates.get(nodeId);
     return state ? state.object.position.clone() : null;
   }
+  /** Updates a node's position during drag operations */
+  updateNodePosition(nodeId, position) {
+    const state = this.nodeStates.get(nodeId);
+    if (!state) return;
+    state.basePosition.copy(position);
+    state.object.position.copy(position);
+    state.positionTween = null;
+  }
   getNodeObject(nodeId) {
     const state = this.nodeStates.get(nodeId);
     return state?.object ?? null;
@@ -2266,6 +2274,7 @@ function applyTreeLayout(nodes, edges, options = {}) {
   const verticalSpacing = treeOptions.verticalSpacing ?? 4;
   const direction = treeOptions.direction ?? "down";
   const rootNodeId = treeOptions.rootNodeId;
+  const reverseEdgeDirection = treeOptions.reverseEdgeDirection ?? false;
   const nodeById = /* @__PURE__ */ new Map();
   const nodeBySlug = /* @__PURE__ */ new Map();
   for (const node of nodes) {
@@ -2280,8 +2289,8 @@ function applyTreeLayout(nodes, edges, options = {}) {
     const fromNode = nodeBySlug.get(edge.from) ?? nodeById.get(edge.from);
     const toNode = nodeBySlug.get(edge.to) ?? nodeById.get(edge.to);
     if (!fromNode || !toNode) continue;
-    const parentId = fromNode.id;
-    const childId = toNode.id;
+    const parentId = reverseEdgeDirection ? toNode.id : fromNode.id;
+    const childId = reverseEdgeDirection ? fromNode.id : toNode.id;
     if (!parentMap.has(childId)) {
       parentMap.set(childId, parentId);
       const siblings = childrenMap.get(parentId) ?? [];
@@ -2557,6 +2566,15 @@ var InteractionManager = class {
   lastHoverId = null;
   lastClickTime = 0;
   lastClickId = null;
+  // Drag state
+  isDragging = false;
+  dragNode = null;
+  dragPlane = new THREE.Plane();
+  dragOffset = new THREE.Vector3();
+  dragIntersection = new THREE.Vector3();
+  pointerDownPosition = new THREE.Vector2();
+  dragThreshold = 5;
+  // pixels
   onNodeHover = () => {
   };
   onNodeClick = () => {
@@ -2567,9 +2585,45 @@ var InteractionManager = class {
   };
   onBackgroundClick = () => {
   };
+  /** Called when pointer-down occurs on a node (before drag threshold). Use to disable controls. */
+  onNodePointerDown = () => {
+  };
+  /** Called when pointer-up occurs without a drag. Use to re-enable controls. */
+  onNodePointerUp = () => {
+  };
+  onNodeDragStart = () => {
+  };
+  onNodeDrag = () => {
+  };
+  onNodeDragEnd = () => {
+  };
   onPointerMove(event) {
-    if (!this.config.enableHover) return;
     this.updatePointer(event);
+    if (this.config.enableDrag && this.dragNode) {
+      if (!this.isDragging) {
+        const dx = (this.pointer.x - this.pointerDownPosition.x) * this.renderer.domElement.clientWidth;
+        const dy = (this.pointer.y - this.pointerDownPosition.y) * this.renderer.domElement.clientHeight;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance > this.dragThreshold) {
+          this.isDragging = true;
+          const nodeObject = this.nodeObjects.find(
+            (obj) => obj.userData?.nodeId === this.dragNode.id
+          );
+          if (nodeObject) {
+            this.onNodeDragStart(this.dragNode, nodeObject.position.clone());
+          }
+        }
+      }
+      if (this.isDragging) {
+        this.raycaster.setFromCamera(this.pointer, this.camera);
+        if (this.raycaster.ray.intersectPlane(this.dragPlane, this.dragIntersection)) {
+          const newPosition = this.dragIntersection.clone().add(this.dragOffset);
+          this.onNodeDrag(this.dragNode, newPosition);
+        }
+        return;
+      }
+    }
+    if (!this.config.enableHover) return;
     const node = this.getIntersectedNode(this.pointer);
     if (this.hoverTimeout) {
       window.clearTimeout(this.hoverTimeout);
@@ -2581,11 +2635,59 @@ var InteractionManager = class {
       }
     }, this.config.hoverDelay);
   }
-  onPointerDown() {
+  onPointerDown(event) {
+    if (!this.config.enableDrag) return;
+    this.updatePointer(event);
+    this.pointerDownPosition.copy(this.pointer);
+    const node = this.getIntersectedNode(this.pointer);
+    if (node) {
+      this.onNodePointerDown(node);
+      const nodeObject = this.nodeObjects.find(
+        (obj) => obj.userData?.nodeId === node.id
+      );
+      if (nodeObject) {
+        const normal = this.getPlaneNormal();
+        this.dragPlane.setFromNormalAndCoplanarPoint(normal, nodeObject.position);
+        this.raycaster.setFromCamera(this.pointer, this.camera);
+        if (this.raycaster.ray.intersectPlane(this.dragPlane, this.dragIntersection)) {
+          this.dragOffset.copy(nodeObject.position).sub(this.dragIntersection);
+          this.dragNode = node;
+        }
+      }
+    }
+  }
+  getPlaneNormal() {
+    switch (this.config.dragConstrainPlane) {
+      case "xz":
+        return new THREE.Vector3(0, 1, 0);
+      case "yz":
+        return new THREE.Vector3(1, 0, 0);
+      case "xy":
+      default:
+        return new THREE.Vector3(0, 0, 1);
+    }
+  }
+  /** Returns true if currently dragging a node */
+  get dragging() {
+    return this.isDragging;
   }
   onPointerUp(event) {
-    if (!this.config.enableClick) return;
     this.updatePointer(event);
+    if (this.isDragging && this.dragNode) {
+      this.raycaster.setFromCamera(this.pointer, this.camera);
+      if (this.raycaster.ray.intersectPlane(this.dragPlane, this.dragIntersection)) {
+        const finalPosition = this.dragIntersection.clone().add(this.dragOffset);
+        this.onNodeDragEnd(this.dragNode, finalPosition);
+      }
+      this.isDragging = false;
+      this.dragNode = null;
+      return;
+    }
+    if (this.dragNode) {
+      this.onNodePointerUp();
+      this.dragNode = null;
+    }
+    if (!this.config.enableClick) return;
     const node = this.getIntersectedNode(this.pointer);
     if (node) {
       const now = performance.now();
@@ -2662,8 +2764,6 @@ var InteractionManager = class {
     this.pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
   }
 };
-
-// src/visualization/animations/animation-controller.ts
 var AnimationController = class {
   constructor(camera, controls, config) {
     this.camera = camera;
@@ -2672,8 +2772,13 @@ var AnimationController = class {
   }
   focusTween = null;
   focusOnNode(position, callback) {
-    const direction = this.camera.position.clone().sub(this.controls.target).normalize();
     const distance = this.camera.position.distanceTo(this.controls.target);
+    let direction;
+    if (this.config.constrainTo2D) {
+      direction = new THREE.Vector3(0, 0, 1);
+    } else {
+      direction = this.camera.position.clone().sub(this.controls.target).normalize();
+    }
     const targetPosition = position.clone().add(direction.multiplyScalar(distance));
     this.focusOnPosition(targetPosition, position, callback);
   }
@@ -2841,6 +2946,10 @@ function NeuronWeb({
   onEdgeClick,
   onBackgroundClick,
   onCameraChange,
+  draggable,
+  onNodeDrag,
+  onNodeDragEnd,
+  keyboardControls,
   performanceMode,
   density,
   rendering,
@@ -3270,24 +3379,106 @@ function NeuronWeb({
     };
   }, [clusterRenderer]);
   const doubleClickEnabled = false;
+  const dragConfig = useMemo(() => {
+    if (!draggable) return { enabled: false, constrainToPlane: "xy" };
+    if (draggable === true) {
+      return { enabled: true, constrainToPlane: "xy" };
+    }
+    return {
+      enabled: draggable.enabled,
+      constrainToPlane: draggable.constrainToPlane ?? "xy"
+    };
+  }, [draggable]);
+  const keyboardControlsConfig = useMemo(() => {
+    if (!keyboardControls) return { enabled: false, panSpeed: 1, zoomSpeed: 1 };
+    if (keyboardControls === true) {
+      return { enabled: true, panSpeed: 1, zoomSpeed: 1 };
+    }
+    return {
+      enabled: keyboardControls.enabled,
+      panSpeed: keyboardControls.panSpeed ?? 1,
+      zoomSpeed: keyboardControls.zoomSpeed ?? 1
+    };
+  }, [keyboardControls]);
+  const pressedKeysRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (!keyboardControlsConfig.enabled || !sceneManager) return;
+    const basePanSpeed = 0.15 * keyboardControlsConfig.panSpeed;
+    const baseZoomSpeed = 0.5 * keyboardControlsConfig.zoomSpeed;
+    const handleKeyDown2 = (e) => {
+      const key = e.key.toLowerCase();
+      if (["w", "a", "s", "d", "q", "e"].includes(key)) {
+        pressedKeysRef.current.add(key);
+        e.preventDefault();
+      }
+    };
+    const handleKeyUp = (e) => {
+      const key = e.key.toLowerCase();
+      pressedKeysRef.current.delete(key);
+    };
+    let animationFrameId;
+    const animate = () => {
+      const keys = pressedKeysRef.current;
+      if (keys.size > 0) {
+        const camera = sceneManager.camera;
+        const controls = sceneManager.controls;
+        const right = new THREE.Vector3();
+        const up = new THREE.Vector3();
+        camera.getWorldDirection(up);
+        right.crossVectors(camera.up, up).normalize();
+        up.copy(camera.up);
+        let dx = 0, dy = 0, dz = 0;
+        if (keys.has("a")) dx -= basePanSpeed;
+        if (keys.has("d")) dx += basePanSpeed;
+        if (keys.has("w")) dy += basePanSpeed;
+        if (keys.has("s")) dy -= basePanSpeed;
+        if (keys.has("q")) dz += baseZoomSpeed;
+        if (keys.has("e")) dz -= baseZoomSpeed;
+        const panOffset = right.multiplyScalar(dx).add(up.multiplyScalar(dy));
+        camera.position.add(panOffset);
+        controls.target.add(panOffset);
+        if (dz !== 0) {
+          const direction = new THREE.Vector3();
+          camera.getWorldDirection(direction);
+          const distance = camera.position.distanceTo(controls.target);
+          const newDistance = Math.max(controls.minDistance, Math.min(controls.maxDistance, distance - dz));
+          camera.position.copy(controls.target).add(direction.multiplyScalar(-newDistance));
+        }
+        controls.update();
+      }
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    window.addEventListener("keydown", handleKeyDown2);
+    window.addEventListener("keyup", handleKeyUp);
+    animationFrameId = requestAnimationFrame(animate);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown2);
+      window.removeEventListener("keyup", handleKeyUp);
+      cancelAnimationFrame(animationFrameId);
+      pressedKeysRef.current.clear();
+    };
+  }, [keyboardControlsConfig, sceneManager]);
   const interactionManager = useMemo(() => {
     if (!sceneManager) return null;
     return new InteractionManager(sceneManager.scene, sceneManager.camera, sceneManager.renderer, {
       enableHover: true,
       enableClick: true,
       enableDoubleClick: doubleClickEnabled,
+      enableDrag: dragConfig.enabled,
       hoverDelay: Math.max(40, resolvedTheme.animation.hoverCardFadeDuration * 0.6),
-      doubleClickDelay: 280
+      doubleClickDelay: 280,
+      dragConstrainPlane: dragConfig.constrainToPlane
     });
-  }, [sceneManager, resolvedTheme.animation.hoverCardFadeDuration, doubleClickEnabled]);
+  }, [sceneManager, resolvedTheme.animation.hoverCardFadeDuration, doubleClickEnabled, dragConfig]);
   const animationController = useMemo(() => {
     if (!sceneManager) return null;
     return new AnimationController(sceneManager.camera, sceneManager.controls, {
       focusDuration: resolvedAnimationConfig.focusDurationMs,
       transitionDuration: resolvedAnimationConfig.transitionDurationMs,
-      easing: resolvedAnimationConfig.easing
+      easing: resolvedAnimationConfig.easing,
+      constrainTo2D: isTreeLayout
     });
-  }, [sceneManager, resolvedAnimationConfig]);
+  }, [sceneManager, resolvedAnimationConfig, isTreeLayout]);
   const rippleEnabled = resolvedAnimationConfig.enableSelectionRipple && resolvedPerformanceMode !== "fallback";
   const selectionRipple = useMemo(() => {
     if (!sceneManager || !rippleEnabled) return null;
@@ -3504,6 +3695,16 @@ function NeuronWeb({
   const focusOnNodePosition = useCallback(
     (nodePosition, callback) => {
       if (!animationController && !sceneManager) return;
+      const getCameraDirection = () => {
+        if (isTreeLayout) {
+          return new THREE.Vector3(0, 0, 1);
+        }
+        const direction = sceneManager.camera.position.clone().sub(sceneManager.controls.target);
+        if (direction.lengthSq() < 1e-4) {
+          direction.set(0, 0, 1);
+        }
+        return direction.normalize();
+      };
       if (Array.isArray(clickZoomOffset) && clickZoomOffset.length === 3) {
         const offset = new THREE.Vector3(...clickZoomOffset);
         const targetPosition = nodePosition.clone().add(offset);
@@ -3524,11 +3725,7 @@ function NeuronWeb({
           }
           return;
         }
-        const direction = sceneManager.camera.position.clone().sub(sceneManager.controls.target);
-        if (direction.lengthSq() < 1e-4) {
-          direction.set(0, 0, 1);
-        }
-        direction.normalize();
+        const direction = getCameraDirection();
         const targetPosition = nodePosition.clone().add(direction.multiplyScalar(clickZoomDistance));
         if (cameraTweenEnabled && animationController) {
           animationController.focusOnPosition(targetPosition, nodePosition, callback);
@@ -3543,11 +3740,7 @@ function NeuronWeb({
       if (cameraTweenEnabled && animationController) {
         animationController.focusOnNode(nodePosition, callback);
       } else if (sceneManager) {
-        const direction = sceneManager.camera.position.clone().sub(sceneManager.controls.target);
-        if (direction.lengthSq() < 1e-4) {
-          direction.set(0, 0, 1);
-        }
-        direction.normalize();
+        const direction = getCameraDirection();
         const distance = sceneManager.camera.position.distanceTo(sceneManager.controls.target);
         const targetPosition = nodePosition.clone().add(direction.multiplyScalar(distance));
         sceneManager.camera.position.copy(targetPosition);
@@ -3556,7 +3749,7 @@ function NeuronWeb({
         if (callback) callback();
       }
     },
-    [animationController, clickZoomOffset, clickZoomDistance, sceneManager, cameraTweenEnabled]
+    [animationController, clickZoomOffset, clickZoomDistance, sceneManager, cameraTweenEnabled, isTreeLayout]
   );
   const handleKeyDown = useCallback(
     (event) => {
@@ -3783,11 +3976,16 @@ function NeuronWeb({
     const hFov = 2 * Math.atan(Math.tan(vFov / 2) * aspect);
     const targetFov = Math.min(vFov, hFov);
     const distance = radius * (1 + padding) / Math.tan(targetFov * viewportFraction / 2);
-    const direction = camera.position.clone().sub(sceneManager.controls.target);
-    if (direction.lengthSq() < 1e-4) {
-      direction.set(0, 0, 1);
+    let direction;
+    if (isTreeLayout) {
+      direction = new THREE.Vector3(0, 0, 1);
+    } else {
+      direction = camera.position.clone().sub(sceneManager.controls.target);
+      if (direction.lengthSq() < 1e-4) {
+        direction.set(0, 0, 1);
+      }
+      direction.normalize();
     }
-    direction.normalize();
     const targetPosition = sphere.center.clone().add(direction.multiplyScalar(distance));
     if (cameraTweenEnabled) {
       animationController.focusOnPosition(targetPosition, sphere.center.clone());
@@ -3804,7 +4002,8 @@ function NeuronWeb({
     displayNodes,
     fitSignature,
     cameraFitSuspended,
-    cameraTweenEnabled
+    cameraTweenEnabled,
+    isTreeLayout
   ]);
   useEffect(() => {
     if (!sceneManager) return;
@@ -4058,6 +4257,34 @@ function NeuronWeb({
         onEdgeClick(edge);
       }
     };
+    if (dragConfig.enabled) {
+      interactionManager.onNodePointerDown = () => {
+        if (sceneManager) {
+          sceneManager.controls.enabled = false;
+        }
+      };
+      interactionManager.onNodePointerUp = () => {
+        if (sceneManager) {
+          sceneManager.controls.enabled = true;
+        }
+      };
+      interactionManager.onNodeDragStart = () => {
+      };
+      interactionManager.onNodeDrag = (node, position) => {
+        nodeRenderer.updateNodePosition(node.id, position);
+        if (onNodeDrag) {
+          onNodeDrag(node, [position.x, position.y, position.z]);
+        }
+      };
+      interactionManager.onNodeDragEnd = (node, position) => {
+        if (sceneManager) {
+          sceneManager.controls.enabled = true;
+        }
+        if (onNodeDragEnd) {
+          onNodeDragEnd(node, [position.x, position.y, position.z]);
+        }
+      };
+    }
   }, [
     interactionManager,
     nodeRenderer,
@@ -4076,6 +4303,10 @@ function NeuronWeb({
     onBackgroundClick,
     applyFocusEdges,
     selectionRipple,
+    dragConfig,
+    sceneManager,
+    onNodeDrag,
+    onNodeDragEnd,
     selectionControlled,
     doubleClickEnabled
   ]);
@@ -4628,5 +4859,5 @@ function dedupePreserveOrder(values) {
 }
 
 export { DEFAULT_RENDERING_OPTIONS, DEFAULT_STATUS_COLORS, DEFAULT_THEME, NeuronContext, NeuronWeb, NeuronWebExplorer, SceneManager, ThemeEngine, applyFuzzyLayout, applyTreeLayout, createStoryBeat, createStudyPathFromBeat, createStudyPathFromNodeIds, getAutoPerformanceMode, normalizeStoryBeat, useNeuronContext, useNeuronGraph, validateStoryBeat };
-//# sourceMappingURL=chunk-FROPRJSB.js.map
-//# sourceMappingURL=chunk-FROPRJSB.js.map
+//# sourceMappingURL=chunk-QKCKZYLH.js.map
+//# sourceMappingURL=chunk-QKCKZYLH.js.map