@omiron33/omi-neuron-web 0.2.25 → 0.2.26

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

@@ -339,6 +339,19 @@ interface NeuronWebProps {
     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). */
@@ -424,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, draggable, onNodeDrag, onNodeDragEnd, 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-rAKqX6sf.d.cts → NeuronWebExplorer-C7WGF5kT.d.cts}

@@ -339,6 +339,19 @@ interface NeuronWebProps {
     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). */
@@ -424,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, draggable, onNodeDrag, onNodeDragEnd, 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-XQ7UTBAR.js → chunk-QKCKZYLH.js}

@@ -2585,6 +2585,12 @@ 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 = () => {
@@ -2635,6 +2641,7 @@ var InteractionManager = class {
     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
       );
@@ -2676,7 +2683,10 @@ var InteractionManager = class {
       this.dragNode = null;
       return;
     }
-    this.dragNode = null;
+    if (this.dragNode) {
+      this.onNodePointerUp();
+      this.dragNode = null;
+    }
     if (!this.config.enableClick) return;
     const node = this.getIntersectedNode(this.pointer);
     if (node) {
@@ -2939,6 +2949,7 @@ function NeuronWeb({
   draggable,
   onNodeDrag,
   onNodeDragEnd,
+  keyboardControls,
   performanceMode,
   density,
   rendering,
@@ -3378,6 +3389,75 @@ function NeuronWeb({
       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, {
@@ -4178,11 +4258,18 @@ function NeuronWeb({
       }
     };
     if (dragConfig.enabled) {
-      interactionManager.onNodeDragStart = () => {
+      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) {
@@ -4772,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-XQ7UTBAR.js.map
-//# sourceMappingURL=chunk-XQ7UTBAR.js.map
+//# sourceMappingURL=chunk-QKCKZYLH.js.map
+//# sourceMappingURL=chunk-QKCKZYLH.js.map