@omiron33/omi-neuron-web 0.1.0 → 0.1.2

package/dist/chunk-GPDX3O37.js

@@ -0,0 +1,1194 @@
+import { useRef, useState, useMemo, useEffect } from 'react';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/visualization/constants.ts
+var DEFAULT_THEME = {
+  colors: {
+    background: "#020314",
+    domainColors: {},
+    defaultDomainColor: "#c0c5ff",
+    edgeDefault: "#4d4d55",
+    edgeActive: "#c6d4ff",
+    edgeSelected: "#ffffff",
+    labelText: "#ffffff",
+    labelBackground: "rgba(0, 0, 0, 0.8)"
+  },
+  typography: {
+    labelFontFamily: "system-ui, sans-serif",
+    labelFontSize: 12,
+    labelFontWeight: "500"
+  },
+  effects: {
+    starfieldEnabled: true,
+    starfieldColor: "#ffffff",
+    glowEnabled: true,
+    glowIntensity: 0.6,
+    ambientMotionEnabled: true,
+    ambientMotionSpeed: 0.6,
+    ambientMotionAmplitude: 0.25,
+    edgeFlowEnabled: true,
+    edgeFlowSpeed: 1.2,
+    fogEnabled: true,
+    fogColor: "#020314",
+    fogNear: 32,
+    fogFar: 180
+  },
+  animation: {
+    focusDuration: 800,
+    transitionDuration: 650,
+    easing: "easeInOut",
+    hoverScale: 1.12,
+    selectedScale: 1.4,
+    selectionPulseScale: 0.35,
+    selectionPulseDuration: 520,
+    hoverCardFadeDuration: 160
+  }
+};
+var SceneManager = class {
+  constructor(container, config) {
+    this.container = container;
+    this.config = config;
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera(60, 1, 0.1, 2e3);
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.labelRenderer = new CSS2DRenderer();
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+  }
+  scene;
+  camera;
+  renderer;
+  labelRenderer;
+  controls;
+  animationId = null;
+  lastFrameTime = 0;
+  elapsedTime = 0;
+  frameListeners = /* @__PURE__ */ new Set();
+  starfield = null;
+  ambientLight = null;
+  keyLight = null;
+  fillLight = null;
+  initialize() {
+    const { cameraPosition, cameraTarget, backgroundColor } = this.config;
+    this.scene.background = new THREE.Color(backgroundColor);
+    if (this.config.fogEnabled) {
+      const fogColor = this.config.fogColor ?? backgroundColor;
+      this.scene.fog = new THREE.Fog(fogColor, this.config.fogNear ?? 32, this.config.fogFar ?? 200);
+    }
+    this.camera.position.set(...cameraPosition);
+    this.controls.target.set(...cameraTarget);
+    this.controls.minDistance = this.config.minZoom;
+    this.controls.maxDistance = this.config.maxZoom;
+    this.controls.update();
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, this.config.pixelRatioCap));
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    this.renderer.toneMappingExposure = 1.05;
+    this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+    this.labelRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
+    this.labelRenderer.domElement.style.position = "absolute";
+    this.labelRenderer.domElement.style.top = "0";
+    this.labelRenderer.domElement.style.left = "0";
+    this.labelRenderer.domElement.style.pointerEvents = "none";
+    this.labelRenderer.domElement.style.width = "100%";
+    this.labelRenderer.domElement.style.height = "100%";
+    this.container.appendChild(this.renderer.domElement);
+    this.container.appendChild(this.labelRenderer.domElement);
+    this.initLights();
+    if (this.config.enableStarfield) {
+      this.initStarfield();
+    }
+    window.addEventListener("resize", this.resize);
+    this.startAnimationLoop();
+  }
+  dispose() {
+    this.stopAnimationLoop();
+    window.removeEventListener("resize", this.resize);
+    this.renderer.dispose();
+    this.scene.clear();
+    this.container.innerHTML = "";
+    this.frameListeners.clear();
+    this.starfield = null;
+    this.ambientLight = null;
+    this.keyLight = null;
+    this.fillLight = null;
+  }
+  startAnimationLoop() {
+    const loop = (time = performance.now()) => {
+      if (!this.lastFrameTime) {
+        this.lastFrameTime = time;
+      }
+      const delta = (time - this.lastFrameTime) / 1e3;
+      this.lastFrameTime = time;
+      this.elapsedTime += delta;
+      this.frameListeners.forEach((listener) => listener(delta, this.elapsedTime));
+      this.render();
+      this.animationId = requestAnimationFrame(loop);
+    };
+    loop();
+  }
+  stopAnimationLoop() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+  render() {
+    this.controls.update();
+    this.renderer.render(this.scene, this.camera);
+    this.labelRenderer.render(this.scene, this.camera);
+  }
+  resize = () => {
+    const width = this.container.clientWidth;
+    const height = this.container.clientHeight;
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height);
+    this.labelRenderer.setSize(width, height);
+  };
+  updateBackground(color) {
+    this.scene.background = new THREE.Color(color);
+    if (this.scene.fog && this.config.fogEnabled) {
+      this.scene.fog.color = new THREE.Color(this.config.fogColor ?? color);
+    }
+    if (this.starfield) {
+      this.starfield.material.color = new THREE.Color(
+        this.config.starfieldColor
+      );
+    }
+  }
+  updateCamera(position) {
+    this.camera.position.set(...position);
+  }
+  addFrameListener(listener) {
+    this.frameListeners.add(listener);
+    return () => this.frameListeners.delete(listener);
+  }
+  getWorldPosition(screenX, screenY) {
+    return this.screenToWorld(screenX, screenY);
+  }
+  screenToWorld(x, y) {
+    const rect = this.container.getBoundingClientRect();
+    const ndc = new THREE.Vector3(
+      (x - rect.left) / rect.width * 2 - 1,
+      -((y - rect.top) / rect.height) * 2 + 1,
+      0.5
+    );
+    ndc.unproject(this.camera);
+    return ndc;
+  }
+  worldToScreen(position) {
+    const vector = position.clone().project(this.camera);
+    const rect = this.container.getBoundingClientRect();
+    return {
+      x: (vector.x * 0.5 + 0.5) * rect.width + rect.left,
+      y: (-vector.y * 0.5 + 0.5) * rect.height + rect.top
+    };
+  }
+  onContextLost = () => {
+  };
+  onContextRestored = () => {
+  };
+  initStarfield() {
+    const count = Math.max(0, this.config.starfieldCount);
+    if (!count) return;
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(count * 3);
+    for (let i = 0; i < count; i += 1) {
+      const radius = 180 + Math.random() * 120;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
+      positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
+      positions[i * 3 + 2] = radius * Math.cos(phi);
+    }
+    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    const material = new THREE.PointsMaterial({
+      color: this.config.starfieldColor,
+      size: 0.6,
+      sizeAttenuation: true,
+      transparent: true,
+      opacity: 0.45,
+      depthWrite: false
+    });
+    this.starfield = new THREE.Points(geometry, material);
+    this.starfield.name = "neuron-starfield";
+    this.scene.add(this.starfield);
+  }
+  initLights() {
+    const ambientIntensity = this.config.ambientLightIntensity ?? 0.65;
+    const keyIntensity = this.config.keyLightIntensity ?? 1;
+    const fillIntensity = this.config.fillLightIntensity ?? 0.45;
+    this.ambientLight = new THREE.AmbientLight("#ffffff", ambientIntensity);
+    this.keyLight = new THREE.DirectionalLight("#b6c6ff", keyIntensity);
+    this.keyLight.position.set(12, 18, 16);
+    this.fillLight = new THREE.PointLight("#5c7aff", fillIntensity, 120, 2.2);
+    this.fillLight.position.set(-18, -6, 10);
+    this.scene.add(this.ambientLight, this.keyLight, this.fillLight);
+  }
+};
+
+// src/visualization/hooks/useSceneManager.ts
+function useSceneManager(containerRef, config) {
+  const [manager, setManager] = useState(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const sceneManager = new SceneManager(container, config);
+    sceneManager.initialize();
+    setManager(sceneManager);
+    return () => {
+      sceneManager.dispose();
+      setManager(null);
+    };
+  }, [containerRef, config.backgroundColor]);
+  return manager;
+}
+var NodeRenderer = class {
+  constructor(scene, config) {
+    this.scene = scene;
+    this.config = config;
+    this.scene.add(this.group);
+  }
+  group = new THREE.Group();
+  nodeStates = /* @__PURE__ */ new Map();
+  hoveredNodeId = null;
+  selectedNodeId = null;
+  renderNodes(nodes) {
+    this.clear();
+    nodes.forEach((node) => {
+      const color = new THREE.Color(
+        this.config.domainColors[node.domain] ?? this.config.defaultColor
+      );
+      const geometry = new THREE.SphereGeometry(this.config.baseScale, 18, 18);
+      const material = new THREE.MeshStandardMaterial({
+        color,
+        roughness: 0.45,
+        metalness: 0.1,
+        emissive: color.clone().multiplyScalar(this.config.glowIntensity * 0.4),
+        emissiveIntensity: 1
+      });
+      const mesh = new THREE.Mesh(geometry, material);
+      const position = new THREE.Vector3();
+      if (node.position) {
+        position.set(...node.position);
+      }
+      mesh.position.copy(position);
+      const tierScale = node.tier ? this.config.tierScales[node.tier] ?? 1 : 1;
+      const baseScale = this.config.baseScale * tierScale;
+      mesh.scale.setScalar(baseScale);
+      mesh.userData = { nodeId: node.id, nodeSlug: node.slug };
+      this.group.add(mesh);
+      this.nodeStates.set(node.id, {
+        mesh,
+        basePosition: position.clone(),
+        baseScale,
+        phase: Math.random() * Math.PI * 2,
+        baseColor: color,
+        hovered: false,
+        selected: false,
+        pulseStart: null
+      });
+    });
+  }
+  updateNode(nodeId, updates) {
+    const state = this.nodeStates.get(nodeId);
+    if (!state) return;
+    if (updates.position) {
+      state.basePosition.set(...updates.position);
+      state.mesh.position.set(...updates.position);
+    }
+    if (updates.tier) {
+      const tierScale = this.config.tierScales[updates.tier] ?? 1;
+      state.baseScale = this.config.baseScale * tierScale;
+    }
+    if (updates.domain) {
+      const color = new THREE.Color(
+        this.config.domainColors[updates.domain] ?? this.config.defaultColor
+      );
+      state.baseColor = color;
+      const material = state.mesh.material;
+      material.color = color;
+      material.emissive = color.clone().multiplyScalar(this.config.glowIntensity * 0.4);
+    }
+  }
+  removeNode(nodeId) {
+    const state = this.nodeStates.get(nodeId);
+    if (!state) return;
+    this.group.remove(state.mesh);
+    this.nodeStates.delete(nodeId);
+  }
+  clear() {
+    this.group.clear();
+    this.nodeStates.clear();
+    this.hoveredNodeId = null;
+    this.selectedNodeId = null;
+  }
+  showNodes(nodeIds) {
+    nodeIds.forEach((id) => {
+      const obj = this.nodeObjects.get(id);
+      if (obj) obj.visible = true;
+    });
+  }
+  hideNodes(nodeIds) {
+    nodeIds.forEach((id) => {
+      const obj = this.nodeObjects.get(id);
+      if (obj) obj.visible = false;
+    });
+  }
+  setVisibleNodes(nodeIds) {
+    if (!nodeIds) {
+      this.nodeStates.forEach((state) => {
+        state.mesh.visible = true;
+      });
+      return;
+    }
+    const visibleSet = new Set(nodeIds);
+    this.nodeStates.forEach((state, id) => {
+      state.mesh.visible = visibleSet.has(id);
+    });
+  }
+  updateLabelVisibility() {
+  }
+  highlightNode(nodeId) {
+    this.setHoveredNode(nodeId);
+  }
+  unhighlightNode(nodeId) {
+    if (this.hoveredNodeId === nodeId) {
+      this.setHoveredNode(null);
+    }
+  }
+  clearHighlights() {
+    this.setHoveredNode(null);
+  }
+  getNodePosition(nodeId) {
+    const state = this.nodeStates.get(nodeId);
+    return state ? state.mesh.position.clone() : null;
+  }
+  getNodeObject(nodeId) {
+    const state = this.nodeStates.get(nodeId);
+    return state?.mesh ?? null;
+  }
+  getNodeObjects() {
+    return Array.from(this.nodeStates.values()).map((state) => state.mesh);
+  }
+  setHoveredNode(nodeId) {
+    if (this.hoveredNodeId === nodeId) return;
+    if (this.hoveredNodeId) {
+      const prev = this.nodeStates.get(this.hoveredNodeId);
+      if (prev) prev.hovered = false;
+    }
+    this.hoveredNodeId = nodeId;
+    if (nodeId) {
+      const next = this.nodeStates.get(nodeId);
+      if (next) next.hovered = true;
+    }
+  }
+  setSelectedNode(nodeId) {
+    if (this.selectedNodeId === nodeId) return;
+    if (this.selectedNodeId) {
+      const prev = this.nodeStates.get(this.selectedNodeId);
+      if (prev) prev.selected = false;
+    }
+    this.selectedNodeId = nodeId;
+    if (nodeId) {
+      const next = this.nodeStates.get(nodeId);
+      if (next) next.selected = true;
+    }
+  }
+  pulseNode(nodeId) {
+    const state = this.nodeStates.get(nodeId);
+    if (!state) return;
+    state.pulseStart = performance.now() / 1e3;
+  }
+  update(_, elapsed) {
+    const now = performance.now() / 1e3;
+    this.nodeStates.forEach((state) => {
+      if (this.config.ambientMotionEnabled) {
+        const drift = Math.sin(elapsed * this.config.ambientMotionSpeed + state.phase) * this.config.ambientMotionAmplitude;
+        const driftX = Math.cos(elapsed * this.config.ambientMotionSpeed * 0.6 + state.phase) * this.config.ambientMotionAmplitude * 0.45;
+        const driftZ = Math.sin(elapsed * this.config.ambientMotionSpeed * 0.4 + state.phase) * this.config.ambientMotionAmplitude * 0.35;
+        state.mesh.position.set(
+          state.basePosition.x + driftX,
+          state.basePosition.y + drift,
+          state.basePosition.z + driftZ
+        );
+      } else {
+        state.mesh.position.copy(state.basePosition);
+      }
+      const hoverScale = state.hovered ? this.config.hoverScale : 1;
+      const selectedScale = state.selected ? this.config.selectedScale : 1;
+      let pulseScale = 0;
+      if (state.pulseStart !== null) {
+        const progress = (now - state.pulseStart) / this.config.pulseDuration;
+        if (progress >= 1) {
+          state.pulseStart = null;
+        } else {
+          pulseScale = Math.sin(progress * Math.PI) * this.config.pulseScale;
+        }
+      }
+      const targetScale = state.baseScale * hoverScale * selectedScale * (1 + pulseScale);
+      const currentScale = state.mesh.scale.x;
+      const nextScale = currentScale + (targetScale - currentScale) * 0.18;
+      state.mesh.scale.setScalar(nextScale);
+      const material = state.mesh.material;
+      const emissiveBoost = state.selected ? 0.65 : state.hovered ? 0.45 : 0.25;
+      material.emissive = state.baseColor.clone().multiplyScalar(this.config.glowIntensity * emissiveBoost);
+    });
+  }
+  dispose() {
+    this.clear();
+    this.scene.remove(this.group);
+  }
+};
+var EdgeRenderer = class {
+  constructor(scene, config) {
+    this.scene = scene;
+    this.config = config;
+    this.scene.add(this.group);
+  }
+  group = new THREE.Group();
+  edgeStates = /* @__PURE__ */ new Map();
+  focusEdges = /* @__PURE__ */ new Set();
+  renderEdges(edges, nodePositions) {
+    this.clear();
+    edges.forEach((edge) => {
+      const from = nodePositions.get(edge.from);
+      const to = nodePositions.get(edge.to);
+      if (!from || !to) return;
+      const geometry = new THREE.BufferGeometry().setFromPoints([from, to]);
+      const opacity = this.config.strengthOpacityScale ? edge.strength : this.config.baseOpacity;
+      const material = new THREE.LineBasicMaterial({
+        color: this.config.defaultColor,
+        transparent: true,
+        opacity,
+        depthWrite: false
+      });
+      const line = new THREE.Line(geometry, material);
+      line.userData = { edgeId: edge.id };
+      this.group.add(line);
+      this.edgeStates.set(edge.id, {
+        line,
+        baseOpacity: opacity,
+        phase: Math.random() * Math.PI * 2
+      });
+    });
+  }
+  updateEdge(edgeId, updates) {
+    const state = this.edgeStates.get(edgeId);
+    if (!state) return;
+    if (updates.strength !== void 0) {
+      const opacity = this.config.strengthOpacityScale ? updates.strength : this.config.baseOpacity;
+      state.baseOpacity = opacity;
+      state.line.material.opacity = opacity;
+    }
+  }
+  removeEdge(edgeId) {
+    const state = this.edgeStates.get(edgeId);
+    if (!state) return;
+    this.group.remove(state.line);
+    this.edgeStates.delete(edgeId);
+  }
+  clear() {
+    this.group.clear();
+    this.edgeStates.clear();
+    this.focusEdges.clear();
+  }
+  filterByStrength(minStrength) {
+    this.edgeStates.forEach((state) => {
+      state.line.visible = state.line.material.opacity >= minStrength;
+    });
+  }
+  filterByType() {
+  }
+  highlightEdge(edgeId) {
+    this.setFocusEdges([edgeId]);
+  }
+  highlightEdgesForNode() {
+  }
+  unhighlightEdge(edgeId) {
+    if (this.focusEdges.has(edgeId)) {
+      this.focusEdges.delete(edgeId);
+    }
+  }
+  clearHighlights() {
+    this.focusEdges.clear();
+  }
+  showEdges(edgeIds) {
+    edgeIds.forEach((id) => {
+      const state = this.edgeStates.get(id);
+      if (state) state.line.visible = true;
+    });
+  }
+  hideEdges(edgeIds) {
+    edgeIds.forEach((id) => {
+      const state = this.edgeStates.get(id);
+      if (state) state.line.visible = false;
+    });
+  }
+  setFocusEdges(edgeIds) {
+    this.focusEdges = new Set(edgeIds ?? []);
+  }
+  update(_, elapsed) {
+    const hasFocus = this.focusEdges.size > 0;
+    this.edgeStates.forEach((state, id) => {
+      const material = state.line.material;
+      const isFocused = this.focusEdges.has(id);
+      let opacity = state.baseOpacity;
+      if (hasFocus) {
+        if (isFocused) {
+          const pulse = this.config.edgeFlowEnabled ? Math.sin(elapsed * this.config.edgeFlowSpeed + state.phase) * 0.25 + 0.75 : 1;
+          opacity = Math.min(1, state.baseOpacity + pulse * 0.4);
+          material.color = new THREE.Color(this.config.activeColor);
+        } else {
+          opacity = Math.max(0.05, state.baseOpacity * 0.2);
+          material.color = new THREE.Color(this.config.defaultColor);
+        }
+      } else {
+        if (this.config.edgeFlowEnabled) {
+          const pulse = Math.sin(elapsed * this.config.edgeFlowSpeed + state.phase) * 0.15 + 0.85;
+          opacity = Math.min(1, state.baseOpacity * pulse);
+        }
+        material.color = new THREE.Color(this.config.defaultColor);
+      }
+      material.opacity = opacity;
+    });
+  }
+  dispose() {
+    this.clear();
+    this.scene.remove(this.group);
+  }
+};
+
+// src/visualization/layouts/fuzzy-layout.ts
+var GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+function hashString(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i += 1) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function mulberry32(seed) {
+  let t = seed;
+  return () => {
+    t += 1831565813;
+    let r = Math.imul(t ^ t >>> 15, t | 1);
+    r ^= r + Math.imul(r ^ r >>> 7, r | 61);
+    return ((r ^ r >>> 14) >>> 0) / 4294967296;
+  };
+}
+function buildSeed(baseSeed, nodeKey) {
+  return mulberry32(hashString(`${baseSeed}:${nodeKey}`));
+}
+function applyFuzzyLayout(nodes, options = {}) {
+  const mode = options.mode ?? "auto";
+  if (mode === "positioned") {
+    return nodes;
+  }
+  const needsLayout = mode === "fuzzy" || nodes.some((node) => !node.position);
+  if (!needsLayout) {
+    return nodes;
+  }
+  const baseSeed = options.seed ?? "omi-neuron-web";
+  const count = Math.max(nodes.length, 1);
+  const spread = options.spread ?? 1.2;
+  const baseRadius = (options.radius ?? Math.max(4, Math.sqrt(count) * 2.4)) * spread;
+  const jitter = (options.jitter ?? baseRadius * 0.12) * spread;
+  const zSpread = (options.zSpread ?? baseRadius * 0.6) * spread;
+  return nodes.map((node, index) => {
+    const shouldApply = mode === "fuzzy" || !node.position;
+    if (!shouldApply) {
+      return node;
+    }
+    const nodeKey = node.slug || node.id || String(index);
+    const rand = buildSeed(baseSeed, nodeKey);
+    const angle = rand() * Math.PI * 2 + index * GOLDEN_ANGLE * 0.05;
+    const radius = baseRadius * Math.sqrt(rand());
+    const jitterOffset = (rand() - 0.5) * jitter;
+    const r = Math.max(0.6, radius + jitterOffset);
+    const x = Math.cos(angle) * r;
+    const y = Math.sin(angle) * r;
+    const z = (rand() - 0.5) * zSpread;
+    return { ...node, position: [x, y, z] };
+  });
+}
+var InteractionManager = class {
+  constructor(scene, camera, renderer, config) {
+    this.scene = scene;
+    this.camera = camera;
+    this.renderer = renderer;
+    this.config = config;
+  }
+  raycaster = new THREE.Raycaster();
+  pointer = new THREE.Vector2();
+  nodeObjects = [];
+  edgeObjects = [];
+  nodeLookup = /* @__PURE__ */ new Map();
+  edgeLookup = /* @__PURE__ */ new Map();
+  hoverTimeout = null;
+  lastHoverId = null;
+  lastClickTime = 0;
+  lastClickId = null;
+  onNodeHover = () => {
+  };
+  onNodeClick = () => {
+  };
+  onNodeDoubleClick = () => {
+  };
+  onEdgeClick = () => {
+  };
+  onBackgroundClick = () => {
+  };
+  onPointerMove(event) {
+    if (!this.config.enableHover) return;
+    this.updatePointer(event);
+    const node = this.getIntersectedNode(this.pointer);
+    if (this.hoverTimeout) {
+      window.clearTimeout(this.hoverTimeout);
+    }
+    this.hoverTimeout = window.setTimeout(() => {
+      if (node?.id !== this.lastHoverId) {
+        this.lastHoverId = node?.id ?? null;
+        this.onNodeHover(node);
+      }
+    }, this.config.hoverDelay);
+  }
+  onPointerDown() {
+  }
+  onPointerUp(event) {
+    if (!this.config.enableClick) return;
+    this.updatePointer(event);
+    const node = this.getIntersectedNode(this.pointer);
+    if (node) {
+      const now = performance.now();
+      const isDouble = this.config.enableDoubleClick && now - this.lastClickTime < this.config.doubleClickDelay && this.lastClickId === node.id;
+      this.lastClickTime = now;
+      this.lastClickId = node.id;
+      if (isDouble) {
+        this.onNodeDoubleClick(node);
+      } else {
+        this.onNodeClick(node);
+      }
+    } else {
+      this.onBackgroundClick();
+    }
+  }
+  onKeyDown() {
+  }
+  onPointerLeave() {
+    if (!this.config.enableHover) return;
+    if (this.hoverTimeout) {
+      window.clearTimeout(this.hoverTimeout);
+    }
+    this.hoverTimeout = window.setTimeout(() => {
+      if (this.lastHoverId !== null) {
+        this.lastHoverId = null;
+        this.onNodeHover(null);
+      }
+    }, Math.max(0, this.config.hoverDelay));
+  }
+  getIntersectedNode(point) {
+    this.raycaster.setFromCamera(point, this.camera);
+    const intersects = this.raycaster.intersectObjects(this.nodeObjects, true);
+    if (!intersects.length) return null;
+    const hit = intersects[0].object;
+    if (!hit.userData?.nodeId) return null;
+    return this.nodeLookup.get(hit.userData.nodeId) ?? null;
+  }
+  getIntersectedEdge() {
+    return null;
+  }
+  dispose() {
+    if (this.hoverTimeout) {
+      window.clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+  }
+  setTargets(nodeObjects, nodeLookup, edgeObjects, edgeLookup) {
+    this.nodeObjects = nodeObjects;
+    this.nodeLookup = nodeLookup;
+    this.edgeObjects = edgeObjects ?? [];
+    this.edgeLookup = edgeLookup ?? /* @__PURE__ */ new Map();
+  }
+  updatePointer(event) {
+    const rect = this.renderer.domElement.getBoundingClientRect();
+    this.pointer.x = (event.clientX - rect.left) / rect.width * 2 - 1;
+    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;
+    this.controls = controls;
+    this.config = config;
+  }
+  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);
+    const targetPosition = position.clone().add(direction.multiplyScalar(distance));
+    this.focusOnPosition(targetPosition, position, callback);
+  }
+  focusOnPosition(position, target, callback) {
+    const now = performance.now();
+    this.focusTween = {
+      startTime: now,
+      duration: this.config.focusDuration,
+      startPosition: this.camera.position.clone(),
+      startTarget: this.controls.target.clone(),
+      endPosition: position.clone(),
+      endTarget: target.clone(),
+      onComplete: callback
+    };
+  }
+  resetCamera() {
+    this.controls.reset();
+  }
+  animateNodeAppear() {
+  }
+  animateNodeDisappear() {
+  }
+  animateNodesFilter() {
+  }
+  animatePath() {
+  }
+  stopPathAnimation() {
+  }
+  pause() {
+  }
+  resume() {
+  }
+  update() {
+    if (!this.focusTween) return;
+    const now = performance.now();
+    const elapsed = Math.min(1, (now - this.focusTween.startTime) / this.focusTween.duration);
+    const eased = this.applyEasing(elapsed);
+    this.camera.position.lerpVectors(
+      this.focusTween.startPosition,
+      this.focusTween.endPosition,
+      eased
+    );
+    this.controls.target.lerpVectors(
+      this.focusTween.startTarget,
+      this.focusTween.endTarget,
+      eased
+    );
+    this.controls.update();
+    if (elapsed >= 1) {
+      const completion = this.focusTween.onComplete;
+      this.focusTween = null;
+      if (completion) completion();
+    }
+  }
+  dispose() {
+  }
+  applyEasing(value) {
+    if (this.config.easing === "linear") return value;
+    if (this.config.easing === "easeOut") return 1 - Math.pow(1 - value, 2);
+    return value < 0.5 ? 2 * value * value : 1 - Math.pow(-2 * value + 2, 2) / 2;
+  }
+};
+function NeuronWeb({
+  graphData,
+  className,
+  style,
+  isLoading,
+  error,
+  renderEmptyState,
+  renderLoadingState,
+  ariaLabel,
+  theme,
+  layout,
+  renderNodeHover,
+  hoverCard,
+  onNodeHover,
+  onNodeClick,
+  onNodeDoubleClick,
+  onNodeFocused,
+  onBackgroundClick,
+  performanceMode
+}) {
+  const containerRef = useRef(null);
+  const hoverCardRef = useRef(null);
+  const [hoveredNodeId, setHoveredNodeId] = useState(null);
+  const [selectedNodeId, setSelectedNodeId] = useState(null);
+  const resolvedTheme = useMemo(
+    () => ({
+      ...DEFAULT_THEME,
+      colors: { ...DEFAULT_THEME.colors, ...theme?.colors ?? {} },
+      typography: { ...DEFAULT_THEME.typography, ...theme?.typography ?? {} },
+      effects: { ...DEFAULT_THEME.effects, ...theme?.effects ?? {} },
+      animation: { ...DEFAULT_THEME.animation, ...theme?.animation ?? {} }
+    }),
+    [theme]
+  );
+  const resolvedPerformanceMode = useMemo(() => {
+    if (performanceMode && performanceMode !== "auto") return performanceMode;
+    const count = graphData.nodes.length;
+    if (count > 360) return "fallback";
+    if (count > 180) return "degraded";
+    return "normal";
+  }, [performanceMode, graphData.nodes.length]);
+  const sceneManager = useSceneManager(containerRef, {
+    backgroundColor: resolvedTheme.colors.background,
+    cameraPosition: [4, 8, 20],
+    cameraTarget: [0, 0, 0],
+    minZoom: 4,
+    maxZoom: 42,
+    enableStarfield: resolvedTheme.effects.starfieldEnabled,
+    starfieldCount: 1200,
+    starfieldColor: resolvedTheme.effects.starfieldColor,
+    pixelRatioCap: 2,
+    ambientLightIntensity: 0.7,
+    keyLightIntensity: 1.1,
+    fillLightIntensity: 0.6,
+    fogEnabled: resolvedTheme.effects.fogEnabled,
+    fogColor: resolvedTheme.effects.fogColor,
+    fogNear: resolvedTheme.effects.fogNear,
+    fogFar: resolvedTheme.effects.fogFar
+  });
+  const nodeRenderer = useMemo(() => {
+    if (!sceneManager) return null;
+    return new NodeRenderer(sceneManager.scene, {
+      domainColors: resolvedTheme.colors.domainColors,
+      defaultColor: resolvedTheme.colors.defaultDomainColor,
+      baseScale: 0.4,
+      tierScales: {
+        primary: 1.6,
+        secondary: 1.2,
+        tertiary: 1,
+        insight: 1
+      },
+      glowIntensity: resolvedTheme.effects.glowEnabled ? resolvedTheme.effects.glowIntensity : 0,
+      labelDistance: 20,
+      maxVisibleLabels: 50,
+      ambientMotionEnabled: resolvedTheme.effects.ambientMotionEnabled && resolvedPerformanceMode === "normal",
+      ambientMotionAmplitude: resolvedTheme.effects.ambientMotionAmplitude,
+      ambientMotionSpeed: resolvedTheme.effects.ambientMotionSpeed,
+      hoverScale: resolvedTheme.animation.hoverScale,
+      selectedScale: resolvedTheme.animation.selectedScale,
+      pulseScale: resolvedTheme.animation.selectionPulseScale,
+      pulseDuration: resolvedTheme.animation.selectionPulseDuration / 1e3
+    });
+  }, [sceneManager, resolvedTheme, resolvedPerformanceMode]);
+  const edgeRenderer = useMemo(() => {
+    if (!sceneManager) return null;
+    return new EdgeRenderer(sceneManager.scene, {
+      defaultColor: resolvedTheme.colors.edgeDefault,
+      activeColor: resolvedTheme.colors.edgeActive,
+      selectedColor: resolvedTheme.colors.edgeSelected,
+      baseOpacity: 0.5,
+      strengthOpacityScale: true,
+      edgeFlowEnabled: resolvedTheme.effects.edgeFlowEnabled && resolvedPerformanceMode === "normal",
+      edgeFlowSpeed: resolvedTheme.effects.edgeFlowSpeed
+    });
+  }, [sceneManager, resolvedTheme, resolvedPerformanceMode]);
+  const interactionManager = useMemo(() => {
+    if (!sceneManager) return null;
+    return new InteractionManager(sceneManager.scene, sceneManager.camera, sceneManager.renderer, {
+      enableHover: true,
+      enableClick: true,
+      enableDoubleClick: true,
+      hoverDelay: Math.max(40, resolvedTheme.animation.hoverCardFadeDuration * 0.6),
+      doubleClickDelay: 280
+    });
+  }, [sceneManager, resolvedTheme.animation.hoverCardFadeDuration]);
+  const animationController = useMemo(() => {
+    if (!sceneManager) return null;
+    return new AnimationController(sceneManager.camera, sceneManager.controls, {
+      focusDuration: resolvedTheme.animation.focusDuration,
+      transitionDuration: resolvedTheme.animation.transitionDuration,
+      easing: resolvedTheme.animation.easing
+    });
+  }, [sceneManager, resolvedTheme]);
+  const resolvedNodes = useMemo(
+    () => applyFuzzyLayout(graphData.nodes, layout),
+    [graphData.nodes, layout]
+  );
+  const nodeMap = useMemo(
+    () => new Map(resolvedNodes.map((node) => [node.id, node])),
+    [resolvedNodes]
+  );
+  const nodeSlugById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    resolvedNodes.forEach((node) => map.set(node.id, node.slug));
+    return map;
+  }, [resolvedNodes]);
+  const edgesBySlug = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    graphData.edges.forEach((edge) => {
+      const add = (slug) => {
+        const list = map.get(slug);
+        if (list) list.push(edge.id);
+        else map.set(slug, [edge.id]);
+      };
+      add(edge.from);
+      add(edge.to);
+    });
+    return map;
+  }, [graphData.edges]);
+  const hoveredNode = hoveredNodeId ? nodeMap.get(hoveredNodeId) ?? null : null;
+  const hoverCardEnabled = (hoverCard?.enabled ?? true) && resolvedPerformanceMode !== "fallback";
+  const hoverCardOffset = hoverCard?.offset ?? [18, 18];
+  const hoverCardWidth = hoverCard?.width ?? 240;
+  useEffect(() => {
+    if (!sceneManager || !nodeRenderer || !edgeRenderer) return;
+    nodeRenderer.renderNodes(resolvedNodes);
+    const positions = /* @__PURE__ */ new Map();
+    resolvedNodes.forEach((node) => {
+      if (!node.position) return;
+      positions.set(node.slug, new THREE.Vector3(...node.position));
+    });
+    edgeRenderer.renderEdges(graphData.edges, positions);
+  }, [resolvedNodes, graphData.edges, sceneManager, nodeRenderer, edgeRenderer]);
+  useEffect(() => {
+    if (!sceneManager) return;
+    sceneManager.updateBackground(resolvedTheme.colors.background);
+  }, [sceneManager, resolvedTheme.colors.background]);
+  useEffect(() => {
+    if (!sceneManager) return;
+    sceneManager.controls.enableDamping = true;
+    sceneManager.controls.dampingFactor = 0.08;
+  }, [sceneManager]);
+  useEffect(() => {
+    if (!sceneManager) return;
+    sceneManager.renderer.domElement.style.cursor = hoveredNodeId ? "pointer" : "grab";
+  }, [sceneManager, hoveredNodeId]);
+  useEffect(() => {
+    if (!sceneManager || !nodeRenderer || !edgeRenderer) return;
+    return sceneManager.addFrameListener((delta, elapsed) => {
+      nodeRenderer.update(delta, elapsed);
+      edgeRenderer.update(delta, elapsed);
+      animationController?.update();
+      if (hoverCardRef.current && hoveredNodeId) {
+        const position = nodeRenderer.getNodePosition(hoveredNodeId);
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (position && rect) {
+          const screen = sceneManager.worldToScreen(position);
+          const cardWidth = hoverCardRef.current.offsetWidth;
+          const cardHeight = hoverCardRef.current.offsetHeight;
+          const rawX = screen.x - rect.left + hoverCardOffset[0];
+          const rawY = screen.y - rect.top + hoverCardOffset[1];
+          const maxX = Math.max(8, rect.width - cardWidth - 8);
+          const maxY = Math.max(8, rect.height - cardHeight - 8);
+          const x = Math.min(Math.max(rawX, 8), maxX);
+          const y = Math.min(Math.max(rawY, 8), maxY);
+          hoverCardRef.current.style.transform = `translate(${x}px, ${y}px)`;
+        }
+      }
+    });
+  }, [
+    sceneManager,
+    nodeRenderer,
+    edgeRenderer,
+    animationController,
+    hoveredNodeId,
+    hoverCardOffset
+  ]);
+  useEffect(() => {
+    if (!interactionManager || !nodeRenderer) return;
+    interactionManager.setTargets(nodeRenderer.getNodeObjects(), nodeMap);
+  }, [interactionManager, nodeRenderer, nodeMap]);
+  useEffect(() => {
+    if (!interactionManager || !nodeRenderer || !edgeRenderer) return;
+    interactionManager.onNodeHover = (node) => {
+      const nodeId = node?.id ?? null;
+      setHoveredNodeId(nodeId);
+      nodeRenderer.setHoveredNode(nodeId);
+      if (nodeId) {
+        const slug = nodeSlugById.get(nodeId);
+        edgeRenderer.setFocusEdges(slug ? edgesBySlug.get(slug) ?? [] : []);
+      } else {
+        const selectedSlug = selectedNodeId ? nodeSlugById.get(selectedNodeId) : null;
+        if (selectedSlug) {
+          edgeRenderer.setFocusEdges(edgesBySlug.get(selectedSlug) ?? []);
+        } else {
+          edgeRenderer.setFocusEdges(null);
+        }
+      }
+      if (onNodeHover) {
+        onNodeHover(node ? node : null);
+      }
+    };
+    interactionManager.onNodeClick = (node) => {
+      setSelectedNodeId(node.id);
+      nodeRenderer.setSelectedNode(node.id);
+      nodeRenderer.pulseNode(node.id);
+      const slug = nodeSlugById.get(node.id);
+      edgeRenderer.setFocusEdges(slug ? edgesBySlug.get(slug) ?? [] : []);
+      if (onNodeClick) {
+        onNodeClick(node);
+      }
+    };
+    interactionManager.onNodeDoubleClick = (node) => {
+      const nodePosition = nodeRenderer.getNodePosition(node.id);
+      if (nodePosition) {
+        animationController?.focusOnNode(nodePosition, () => {
+          if (onNodeFocused) onNodeFocused(node);
+        });
+      }
+      if (onNodeDoubleClick) {
+        onNodeDoubleClick(node);
+      }
+    };
+    interactionManager.onBackgroundClick = () => {
+      setSelectedNodeId(null);
+      nodeRenderer.setSelectedNode(null);
+      if (!hoveredNodeId) {
+        edgeRenderer.setFocusEdges(null);
+      }
+      if (onBackgroundClick) onBackgroundClick();
+    };
+  }, [
+    interactionManager,
+    nodeRenderer,
+    edgeRenderer,
+    nodeSlugById,
+    edgesBySlug,
+    animationController,
+    hoveredNodeId,
+    selectedNodeId,
+    onNodeHover,
+    onNodeClick,
+    onNodeDoubleClick,
+    onNodeFocused,
+    onBackgroundClick
+  ]);
+  useEffect(() => {
+    if (!sceneManager || !interactionManager) return;
+    const element = sceneManager.renderer.domElement;
+    const handleMove = (event) => interactionManager.onPointerMove(event);
+    const handleUp = (event) => interactionManager.onPointerUp(event);
+    const handleLeave = () => interactionManager.onPointerLeave();
+    element.addEventListener("pointermove", handleMove);
+    element.addEventListener("pointerup", handleUp);
+    element.addEventListener("pointerleave", handleLeave);
+    return () => {
+      element.removeEventListener("pointermove", handleMove);
+      element.removeEventListener("pointerup", handleUp);
+      element.removeEventListener("pointerleave", handleLeave);
+    };
+  }, [sceneManager, interactionManager]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, style, "aria-label": ariaLabel, children: renderLoadingState ? renderLoadingState() : /* @__PURE__ */ jsx("div", { children: "Loading\u2026" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className, style, "aria-label": ariaLabel, children: renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsx("div", { children: error }) });
+  }
+  if (!resolvedNodes.length) {
+    return /* @__PURE__ */ jsx("div", { className, style, "aria-label": ariaLabel, children: renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsx("div", { children: "No data" }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", ...style },
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
+        hoverCardEnabled && hoveredNode && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: hoverCardRef,
+            style: {
+              position: "absolute",
+              width: hoverCardWidth,
+              pointerEvents: "none",
+              padding: "12px 14px",
+              borderRadius: 12,
+              background: "linear-gradient(135deg, rgba(11, 15, 35, 0.95) 0%, rgba(20, 24, 52, 0.9) 100%)",
+              border: "1px solid rgba(120, 140, 255, 0.35)",
+              boxShadow: "0 18px 45px rgba(5, 10, 30, 0.55)",
+              color: resolvedTheme.colors.labelText,
+              fontFamily: resolvedTheme.typography.labelFontFamily,
+              fontSize: 12,
+              zIndex: 4,
+              opacity: 0.98,
+              transition: `opacity ${resolvedTheme.animation.hoverCardFadeDuration}ms ease`,
+              transform: `translate(${hoverCardOffset[0]}px, ${hoverCardOffset[1]}px)`
+            },
+            children: renderNodeHover ? renderNodeHover(hoveredNode) : /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, marginBottom: 6 }, children: hoveredNode.label }),
+              /* @__PURE__ */ jsx("div", { style: { opacity: 0.75 }, children: typeof hoveredNode.metadata?.summary === "string" ? hoveredNode.metadata.summary : "Click to focus this node and explore connections." })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/visualization/themes/theme-engine.ts
+var ThemeEngine = class {
+  theme;
+  onThemeChange = () => {
+  };
+  constructor(initialTheme) {
+    this.theme = this.mergeTheme(DEFAULT_THEME, initialTheme);
+  }
+  getTheme() {
+    return this.theme;
+  }
+  setTheme(theme) {
+    this.theme = this.mergeTheme(this.theme, theme);
+    this.onThemeChange(this.theme);
+  }
+  resetTheme() {
+    this.theme = { ...DEFAULT_THEME };
+    this.onThemeChange(this.theme);
+  }
+  setDomainColor(domain, color) {
+    this.theme.colors.domainColors[domain] = color;
+    this.onThemeChange(this.theme);
+  }
+  setBackground(color) {
+    this.theme.colors.background = color;
+    this.onThemeChange(this.theme);
+  }
+  setLabelStyle(style) {
+    this.theme.typography = { ...this.theme.typography, ...style };
+    this.onThemeChange(this.theme);
+  }
+  applyPreset(preset) {
+    if (preset === "light") {
+      this.theme = this.mergeTheme(DEFAULT_THEME, {
+        colors: { background: "#f7f7fb", labelText: "#111" }
+      });
+    } else if (preset === "dark") {
+      this.theme = { ...DEFAULT_THEME };
+    }
+    this.onThemeChange(this.theme);
+  }
+  saveToStorage() {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem("omi-neuron-theme", JSON.stringify(this.theme));
+  }
+  loadFromStorage() {
+    if (typeof window === "undefined") return;
+    const stored = window.localStorage.getItem("omi-neuron-theme");
+    if (stored) {
+      this.theme = this.mergeTheme(this.theme, JSON.parse(stored));
+    }
+  }
+  mergeTheme(base, next) {
+    if (!next) return { ...base };
+    return {
+      ...base,
+      ...next,
+      colors: { ...base.colors, ...next.colors ?? {} },
+      typography: { ...base.typography, ...next.typography ?? {} },
+      effects: { ...base.effects, ...next.effects ?? {} },
+      animation: { ...base.animation, ...next.animation ?? {} }
+    };
+  }
+};
+
+export { DEFAULT_THEME, NeuronWeb, SceneManager, ThemeEngine, applyFuzzyLayout };
+//# sourceMappingURL=chunk-GPDX3O37.js.map
+//# sourceMappingURL=chunk-GPDX3O37.js.map