@omiron33/omi-neuron-web 0.1.4 → 0.1.6

package/dist/{chunk-KC7V76I3.cjs → chunk-U7K7KQZG.cjs}

@@ -36,7 +36,7 @@ var DEFAULT_THEME = {
     edgeActive: "#c6d4ff",
     edgeSelected: "#ffffff",
     labelText: "#ffffff",
-    labelBackground: "rgba(0, 0, 0, 0.8)"
+    labelBackground: "rgba(5, 6, 31, 0.8)"
   },
   typography: {
     labelFontFamily: "system-ui, sans-serif",
@@ -55,8 +55,8 @@ var DEFAULT_THEME = {
     edgeFlowSpeed: 1.2,
     fogEnabled: true,
     fogColor: "#020314",
-    fogNear: 32,
-    fogFar: 180
+    fogNear: 24,
+    fogFar: 160
   },
   animation: {
     focusDuration: 800,
@@ -74,8 +74,8 @@ var SceneManager = class {
     this.container = container;
     this.config = config;
     this.scene = new THREE__namespace.Scene();
-    this.camera = new THREE__namespace.PerspectiveCamera(60, 1, 0.1, 2e3);
-    this.renderer = new THREE__namespace.WebGLRenderer({ antialias: true });
+    this.camera = new THREE__namespace.PerspectiveCamera(config.cameraFov ?? 52, 1, 0.1, 220);
+    this.renderer = new THREE__namespace.WebGLRenderer({ antialias: true, alpha: true });
     this.labelRenderer = new CSS2DRenderer_js.CSS2DRenderer();
     this.controls = new OrbitControls_js.OrbitControls(this.camera, this.renderer.domElement);
   }
@@ -92,6 +92,7 @@ var SceneManager = class {
   ambientLight = null;
   keyLight = null;
   fillLight = null;
+  resizeObserver = null;
   initialize() {
     const { cameraPosition, cameraTarget, backgroundColor } = this.config;
     this.scene.background = new THREE__namespace.Color(backgroundColor);
@@ -106,9 +107,14 @@ var SceneManager = class {
     this.controls.update();
     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, this.config.pixelRatioCap));
     this.renderer.outputColorSpace = THREE__namespace.SRGBColorSpace;
-    this.renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping;
-    this.renderer.toneMappingExposure = 1.05;
+    this.renderer.toneMapping = THREE__namespace.NoToneMapping;
+    this.renderer.toneMappingExposure = 1;
     this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+    this.renderer.domElement.style.position = "absolute";
+    this.renderer.domElement.style.top = "0";
+    this.renderer.domElement.style.left = "0";
+    this.renderer.domElement.style.width = "100%";
+    this.renderer.domElement.style.height = "100%";
     this.labelRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
     this.labelRenderer.domElement.style.position = "absolute";
     this.labelRenderer.domElement.style.top = "0";
@@ -123,11 +129,17 @@ var SceneManager = class {
       this.initStarfield();
     }
     window.addEventListener("resize", this.resize);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.resize());
+      this.resizeObserver.observe(this.container);
+    }
     this.startAnimationLoop();
   }
   dispose() {
     this.stopAnimationLoop();
     window.removeEventListener("resize", this.resize);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
     this.renderer.dispose();
     this.scene.clear();
     this.container.innerHTML = "";
@@ -165,6 +177,7 @@ var SceneManager = class {
   resize = () => {
     const width = this.container.clientWidth;
     const height = this.container.clientHeight;
+    if (!width || !height) return;
     this.camera.aspect = width / height;
     this.camera.updateProjectionMatrix();
     this.renderer.setSize(width, height);
@@ -219,20 +232,17 @@ var SceneManager = class {
     const geometry = new THREE__namespace.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);
+      positions[i * 3] = THREE__namespace.MathUtils.randFloatSpread(70);
+      positions[i * 3 + 1] = THREE__namespace.MathUtils.randFloatSpread(70);
+      positions[i * 3 + 2] = THREE__namespace.MathUtils.randFloatSpread(70);
     }
     geometry.setAttribute("position", new THREE__namespace.BufferAttribute(positions, 3));
     const material = new THREE__namespace.PointsMaterial({
       color: this.config.starfieldColor,
-      size: 0.6,
+      size: 0.22,
       sizeAttenuation: true,
       transparent: true,
-      opacity: 0.45,
+      opacity: 0.5,
       depthWrite: false
     });
     this.starfield = new THREE__namespace.Points(geometry, material);
@@ -273,38 +283,53 @@ var NodeRenderer = class {
     this.scene = scene;
     this.config = config;
     this.scene.add(this.group);
+    this.glowTexture = this.createGlowTexture();
+    if (config.labelOffset) {
+      this.labelOffset.set(...config.labelOffset);
+    }
   }
   group = new THREE__namespace.Group();
   nodeStates = /* @__PURE__ */ new Map();
   hoveredNodeId = null;
   selectedNodeId = null;
+  glowTexture = null;
+  labelOffset = new THREE__namespace.Vector3(0, 0.65, 0);
   renderNodes(nodes) {
     this.clear();
+    const shouldRenderLabels = this.config.maxVisibleLabels > 0 && this.config.labelDistance > 0;
     nodes.forEach((node) => {
       const color = new THREE__namespace.Color(
         this.config.domainColors[node.domain] ?? this.config.defaultColor
       );
-      const geometry = new THREE__namespace.SphereGeometry(this.config.baseScale, 18, 18);
-      const material = new THREE__namespace.MeshStandardMaterial({
+      const material = new THREE__namespace.SpriteMaterial({
+        map: this.glowTexture ?? void 0,
         color,
-        roughness: 0.45,
-        metalness: 0.1,
-        emissive: color.clone().multiplyScalar(this.config.glowIntensity * 0.4),
-        emissiveIntensity: 1
+        transparent: true,
+        opacity: 0.78,
+        depthWrite: false
       });
-      const mesh = new THREE__namespace.Mesh(geometry, material);
+      const sprite = new THREE__namespace.Sprite(material);
       const position = new THREE__namespace.Vector3();
       if (node.position) {
         position.set(...node.position);
       }
-      mesh.position.copy(position);
+      sprite.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);
+      sprite.scale.setScalar(baseScale);
+      sprite.userData = { nodeId: node.id, nodeSlug: node.slug };
+      this.group.add(sprite);
+      let labelObject = null;
+      if (shouldRenderLabels) {
+        const labelElement = this.createLabelElement(node, color);
+        labelObject = new CSS2DRenderer_js.CSS2DObject(labelElement);
+        labelObject.position.copy(sprite.position).add(this.labelOffset);
+        this.scene.add(labelObject);
+      }
       this.nodeStates.set(node.id, {
-        mesh,
+        sprite,
+        material,
+        label: labelObject,
         basePosition: position.clone(),
         baseScale,
         phase: Math.random() * Math.PI * 2,
@@ -320,7 +345,7 @@ var NodeRenderer = class {
     if (!state) return;
     if (updates.position) {
       state.basePosition.set(...updates.position);
-      state.mesh.position.set(...updates.position);
+      state.sprite.position.set(...updates.position);
     }
     if (updates.tier) {
       const tierScale = this.config.tierScales[updates.tier] ?? 1;
@@ -331,18 +356,24 @@ var NodeRenderer = class {
         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);
+      state.material.color = color;
     }
   }
   removeNode(nodeId) {
     const state = this.nodeStates.get(nodeId);
     if (!state) return;
-    this.group.remove(state.mesh);
+    if (state.label) {
+      this.scene.remove(state.label);
+    }
+    this.group.remove(state.sprite);
     this.nodeStates.delete(nodeId);
   }
   clear() {
+    this.nodeStates.forEach((state) => {
+      if (state.label) {
+        this.scene.remove(state.label);
+      }
+    });
     this.group.clear();
     this.nodeStates.clear();
     this.hoveredNodeId = null;
@@ -350,29 +381,130 @@ var NodeRenderer = class {
   }
   showNodes(nodeIds) {
     nodeIds.forEach((id) => {
-      const obj = this.nodeObjects.get(id);
-      if (obj) obj.visible = true;
+      const state = this.nodeStates.get(id);
+      if (state) state.sprite.visible = true;
     });
   }
   hideNodes(nodeIds) {
     nodeIds.forEach((id) => {
-      const obj = this.nodeObjects.get(id);
-      if (obj) obj.visible = false;
+      const state = this.nodeStates.get(id);
+      if (state) state.sprite.visible = false;
     });
   }
   setVisibleNodes(nodeIds) {
     if (!nodeIds) {
       this.nodeStates.forEach((state) => {
-        state.mesh.visible = true;
+        state.sprite.visible = true;
       });
       return;
     }
     const visibleSet = new Set(nodeIds);
     this.nodeStates.forEach((state, id) => {
-      state.mesh.visible = visibleSet.has(id);
+      state.sprite.visible = visibleSet.has(id);
     });
   }
-  updateLabelVisibility() {
+  updateLabelVisibility(camera) {
+    if (this.config.maxVisibleLabels <= 0 || this.config.labelDistance <= 0) {
+      this.nodeStates.forEach((state) => {
+        if (state.label) state.label.visible = false;
+      });
+      return;
+    }
+    const entries = [];
+    this.nodeStates.forEach((state) => {
+      if (!state.label) return;
+      if (!state.sprite.visible) {
+        state.label.visible = false;
+        return;
+      }
+      const distance = camera.position.distanceTo(state.sprite.position);
+      entries.push({ state, distance });
+    });
+    entries.sort((a, b) => a.distance - b.distance);
+    entries.forEach((entry, index) => {
+      const visible = entry.distance <= this.config.labelDistance && index < this.config.maxVisibleLabels;
+      entry.state.label.visible = visible;
+    });
+  }
+  createLabelElement(node, accent) {
+    const wrapper = document.createElement("div");
+    wrapper.style.borderRadius = "10px";
+    wrapper.style.border = "1px solid rgba(255, 255, 255, 0.12)";
+    wrapper.style.background = this.config.labelBackground;
+    wrapper.style.color = this.config.labelTextColor;
+    wrapper.style.fontFamily = this.config.labelFontFamily;
+    wrapper.style.fontSize = `${this.config.labelFontSize}px`;
+    wrapper.style.fontWeight = this.config.labelFontWeight;
+    wrapper.style.padding = "6px 8px";
+    wrapper.style.boxShadow = "0 10px 30px rgba(5, 10, 20, 0.35)";
+    wrapper.style.backdropFilter = "blur(10px)";
+    wrapper.style.pointerEvents = "none";
+    wrapper.style.maxWidth = "220px";
+    const isInsight = node.tier === "insight" || node.domain === "insight";
+    if (isInsight) {
+      const accentBright = accent.clone().lerp(new THREE__namespace.Color("#ffffff"), 0.35);
+      wrapper.style.border = `1px solid ${this.toRgba(accentBright, 0.6)}`;
+      wrapper.style.background = this.toRgba(accent, 0.2);
+      wrapper.style.color = this.toRgba(accentBright, 0.95);
+    }
+    const badgeRow = document.createElement("div");
+    badgeRow.style.display = "flex";
+    badgeRow.style.flexWrap = "wrap";
+    badgeRow.style.gap = "4px";
+    badgeRow.style.marginBottom = "4px";
+    const makeBadge = (text, tone) => {
+      const badge = document.createElement("span");
+      badge.textContent = text;
+      badge.style.display = "inline-flex";
+      badge.style.alignItems = "center";
+      badge.style.gap = "4px";
+      badge.style.borderRadius = "999px";
+      badge.style.padding = "2px 6px";
+      badge.style.fontSize = "0.6rem";
+      badge.style.fontWeight = "600";
+      badge.style.textTransform = "uppercase";
+      badge.style.letterSpacing = "0.2em";
+      if (tone === "accent") {
+        badge.style.border = `1px solid ${this.toRgba(accent, 0.6)}`;
+        badge.style.background = this.toRgba(accent, 0.4);
+        badge.style.color = "#f5f7ff";
+      } else {
+        badge.style.border = "1px solid rgba(255, 255, 255, 0.2)";
+        badge.style.background = "rgba(255, 255, 255, 0.08)";
+        badge.style.color = "rgba(255, 255, 255, 0.8)";
+      }
+      return badge;
+    };
+    if (isInsight) {
+      badgeRow.appendChild(makeBadge("Insight", "accent"));
+      const statusRaw = node.metadata?.status ?? node.metadata?.draftNodeStatus ?? node.metadata?.studyPathStatus;
+      if (statusRaw) {
+        const formatted = statusRaw.replace(/[_-]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+        badgeRow.appendChild(makeBadge(formatted, "muted"));
+      }
+    }
+    if (badgeRow.childElementCount > 0) {
+      wrapper.appendChild(badgeRow);
+    }
+    const title = document.createElement("div");
+    title.textContent = node.label;
+    title.style.fontSize = "0.8rem";
+    title.style.fontWeight = "600";
+    wrapper.appendChild(title);
+    if (node.ref) {
+      const reference = document.createElement("div");
+      reference.textContent = node.ref;
+      reference.style.fontSize = "0.65rem";
+      reference.style.opacity = "0.7";
+      wrapper.appendChild(reference);
+    }
+    return wrapper;
+  }
+  toRgba(color, alpha) {
+    const r = Math.round(color.r * 255);
+    const g = Math.round(color.g * 255);
+    const b = Math.round(color.b * 255);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }
   highlightNode(nodeId) {
     this.setHoveredNode(nodeId);
@@ -387,14 +519,14 @@ var NodeRenderer = class {
   }
   getNodePosition(nodeId) {
     const state = this.nodeStates.get(nodeId);
-    return state ? state.mesh.position.clone() : null;
+    return state ? state.sprite.position.clone() : null;
   }
   getNodeObject(nodeId) {
     const state = this.nodeStates.get(nodeId);
-    return state?.mesh ?? null;
+    return state?.sprite ?? null;
   }
   getNodeObjects() {
-    return Array.from(this.nodeStates.values()).map((state) => state.mesh);
+    return Array.from(this.nodeStates.values()).map((state) => state.sprite);
   }
   setHoveredNode(nodeId) {
     if (this.hoveredNodeId === nodeId) return;
@@ -432,13 +564,16 @@ var NodeRenderer = class {
         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.sprite.position.set(
           state.basePosition.x + driftX,
           state.basePosition.y + drift,
           state.basePosition.z + driftZ
         );
       } else {
-        state.mesh.position.copy(state.basePosition);
+        state.sprite.position.copy(state.basePosition);
+      }
+      if (state.label) {
+        state.label.position.copy(state.sprite.position).add(this.labelOffset);
       }
       const hoverScale = state.hovered ? this.config.hoverScale : 1;
       const selectedScale = state.selected ? this.config.selectedScale : 1;
@@ -452,17 +587,42 @@ var NodeRenderer = class {
         }
       }
       const targetScale = state.baseScale * hoverScale * selectedScale * (1 + pulseScale);
-      const currentScale = state.mesh.scale.x;
+      const currentScale = state.sprite.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);
+      state.sprite.scale.setScalar(nextScale);
+      const material = state.material;
+      const baseOpacity = 0.78;
+      const hoverOpacity = Math.min(0.95, baseOpacity + 0.12);
+      const selectedOpacity = 1;
+      material.opacity = state.selected ? selectedOpacity : state.hovered ? hoverOpacity : baseOpacity;
+      material.color.copy(state.baseColor);
+      if (state.selected) {
+        material.color.lerp(new THREE__namespace.Color("#ffffff"), 0.25);
+      }
     });
   }
   dispose() {
     this.clear();
     this.scene.remove(this.group);
+    this.glowTexture?.dispose();
+    this.glowTexture = null;
+  }
+  createGlowTexture() {
+    const size = 256;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    const gradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+    gradient.addColorStop(0, "rgba(255,255,255,0.95)");
+    gradient.addColorStop(0.4, "rgba(255,255,255,0.45)");
+    gradient.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, size, size);
+    const texture = new THREE__namespace.CanvasTexture(canvas);
+    texture.colorSpace = THREE__namespace.SRGBColorSpace;
+    return texture;
   }
 };
 var EdgeRenderer = class {
@@ -586,6 +746,35 @@ var EdgeRenderer = class {
 
 // src/visualization/layouts/fuzzy-layout.ts
 var GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+var ATLAS_POSITION_OVERRIDES = {
+  uap: [6, 2, 2],
+  ez1: [2, 4, 0],
+  neph: [-3, 3, 2],
+  jude6: [-1, 1.5, 2.5],
+  "2p24": [1.2, 0.3, 2.6],
+  aiimg: [4.6, -1.6, 1.8],
+  rev13: [2.7, -2.8, 0.6],
+  xhuman: [0.4, -3.4, -1.8],
+  dan243: [-1.6, -2.1, -2.9],
+  llm: [3.4, 0.3, -2.4],
+  babel: [0.9, 1.4, -3.4],
+  warfare: [-4.6, 0.4, -1.5],
+  eph612: [-5.5, -1.7, 0.5],
+  berea: [-0.2, 4.6, -1.3],
+  pharm: [-3.1, -2.4, 1.2],
+  testsp: [5.4, 3.2, 1.6]
+};
+function generateSpherePosition(index, total, radius) {
+  if (total <= 1) {
+    return [0, 0, 0];
+  }
+  const offset = 2 / total;
+  const increment = Math.PI * (3 - Math.sqrt(5));
+  const y = 1 - index * offset;
+  const r = Math.sqrt(Math.max(0, 1 - y * y));
+  const phi = index * increment;
+  return [Math.cos(phi) * r * radius, y * radius, Math.sin(phi) * r * radius];
+}
 function hashString(input) {
   let hash = 2166136261;
   for (let i = 0; i < input.length; i += 1) {
@@ -607,17 +796,53 @@ function buildSeed(baseSeed, nodeKey) {
   return mulberry32(hashString(`${baseSeed}:${nodeKey}`));
 }
 function applyFuzzyLayout(nodes, options = {}) {
-  const mode = options.mode ?? "auto";
+  const mode = options.mode ?? "atlas";
   if (mode === "positioned") {
     return nodes;
   }
-  const needsLayout = mode === "fuzzy" || nodes.some((node) => !node.position);
-  if (!needsLayout) {
+  const needsLayout = nodes.some((node) => !node.position);
+  if (mode === "auto" && !needsLayout) {
     return nodes;
   }
+  const spread = options.spread ?? 1;
+  const overrides = { ...ATLAS_POSITION_OVERRIDES, ...options.overrides ?? {} };
+  if (mode === "atlas" || mode === "auto") {
+    const baseRadius2 = (options.radius ?? 12) * spread;
+    const insightRadius = (options.insightRadius ?? Math.max(5, baseRadius2 * 0.4)) * spread;
+    const canonicalNodes = nodes.filter(
+      (node) => node.tier !== "insight" && node.domain !== "insight"
+    );
+    const insightNodes = nodes.filter(
+      (node) => node.tier === "insight" || node.domain === "insight"
+    );
+    const canonicalPositions = /* @__PURE__ */ new Map();
+    const insightPositions = /* @__PURE__ */ new Map();
+    canonicalNodes.forEach((node, index) => {
+      canonicalPositions.set(
+        node.id,
+        generateSpherePosition(index, canonicalNodes.length, baseRadius2)
+      );
+    });
+    insightNodes.forEach((node, index) => {
+      insightPositions.set(
+        node.id,
+        generateSpherePosition(index, insightNodes.length || 1, insightRadius)
+      );
+    });
+    return nodes.map((node) => {
+      const override = overrides[node.id] ?? overrides[node.slug];
+      if (node.position && !override) {
+        return node;
+      }
+      if (override) {
+        return { ...node, position: [...override] };
+      }
+      const fallback = (node.tier === "insight" || node.domain === "insight" ? insightPositions.get(node.id) : canonicalPositions.get(node.id)) ?? [0, 0, 0];
+      return { ...node, position: fallback };
+    });
+  }
   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;
@@ -820,6 +1045,8 @@ function NeuronWeb({
   graphData,
   className,
   style,
+  fullHeight,
+  isFullScreen,
   isLoading,
   error,
   renderEmptyState,
@@ -859,17 +1086,18 @@ function NeuronWeb({
   }, [performanceMode, graphData.nodes.length]);
   const sceneManager = useSceneManager(containerRef, {
     backgroundColor: resolvedTheme.colors.background,
+    cameraFov: 52,
     cameraPosition: [4, 8, 20],
     cameraTarget: [0, 0, 0],
     minZoom: 4,
     maxZoom: 42,
     enableStarfield: resolvedTheme.effects.starfieldEnabled,
-    starfieldCount: 1200,
+    starfieldCount: resolvedPerformanceMode === "normal" ? 1200 : 700,
     starfieldColor: resolvedTheme.effects.starfieldColor,
     pixelRatioCap: 2,
-    ambientLightIntensity: 0.7,
-    keyLightIntensity: 1.1,
-    fillLightIntensity: 0.6,
+    ambientLightIntensity: 0.9,
+    keyLightIntensity: 0.6,
+    fillLightIntensity: 0.4,
     fogEnabled: resolvedTheme.effects.fogEnabled,
     fogColor: resolvedTheme.effects.fogColor,
     fogNear: resolvedTheme.effects.fogNear,
@@ -880,16 +1108,22 @@ function NeuronWeb({
     return new NodeRenderer(sceneManager.scene, {
       domainColors: resolvedTheme.colors.domainColors,
       defaultColor: resolvedTheme.colors.defaultDomainColor,
-      baseScale: 0.4,
+      baseScale: 1.15,
       tierScales: {
-        primary: 1.6,
-        secondary: 1.2,
-        tertiary: 1,
-        insight: 1
+        primary: 1.25,
+        secondary: 1.1,
+        tertiary: 0.95,
+        insight: 1.05
       },
       glowIntensity: resolvedTheme.effects.glowEnabled ? resolvedTheme.effects.glowIntensity : 0,
-      labelDistance: 20,
-      maxVisibleLabels: 50,
+      labelDistance: resolvedPerformanceMode === "normal" ? 26 : 0,
+      maxVisibleLabels: resolvedPerformanceMode === "normal" ? 80 : 0,
+      labelOffset: [0, 0.65, 0],
+      labelFontFamily: resolvedTheme.typography.labelFontFamily,
+      labelFontSize: resolvedTheme.typography.labelFontSize,
+      labelFontWeight: resolvedTheme.typography.labelFontWeight,
+      labelTextColor: resolvedTheme.colors.labelText,
+      labelBackground: resolvedTheme.colors.labelBackground,
       ambientMotionEnabled: resolvedTheme.effects.ambientMotionEnabled && resolvedPerformanceMode === "normal",
       ambientMotionAmplitude: resolvedTheme.effects.ambientMotionAmplitude,
       ambientMotionSpeed: resolvedTheme.effects.ambientMotionSpeed,
@@ -905,7 +1139,7 @@ function NeuronWeb({
       defaultColor: resolvedTheme.colors.edgeDefault,
       activeColor: resolvedTheme.colors.edgeActive,
       selectedColor: resolvedTheme.colors.edgeSelected,
-      baseOpacity: 0.5,
+      baseOpacity: 0.45,
       strengthOpacityScale: true,
       edgeFlowEnabled: resolvedTheme.effects.edgeFlowEnabled && resolvedPerformanceMode === "normal",
       edgeFlowSpeed: resolvedTheme.effects.edgeFlowSpeed
@@ -986,6 +1220,7 @@ function NeuronWeb({
     if (!sceneManager || !nodeRenderer || !edgeRenderer) return;
     return sceneManager.addFrameListener((delta, elapsed) => {
       nodeRenderer.update(delta, elapsed);
+      nodeRenderer.updateLabelVisibility(sceneManager.camera);
       edgeRenderer.update(delta, elapsed);
       animationController?.update();
       if (hoverCardRef.current && hoveredNodeId) {
@@ -1106,14 +1341,30 @@ function NeuronWeb({
   if (!resolvedNodes.length) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, "aria-label": ariaLabel, children: renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No data" }) });
   }
+  const resolvedStyle = {
+    position: isFullScreen ? "fixed" : "relative",
+    inset: isFullScreen ? 0 : void 0,
+    width: isFullScreen ? "100vw" : "100%",
+    height: isFullScreen ? "100vh" : "100%",
+    minHeight: !isFullScreen && fullHeight ? "100vh" : void 0,
+    overflow: "hidden",
+    background: resolvedTheme.colors.background,
+    ...style
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className,
-      style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", ...style },
+      style: resolvedStyle,
       "aria-label": ariaLabel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: containerRef,
+            style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
+          }
+        ),
         hoverCardEnabled && hoveredNode && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1216,5 +1467,5 @@ exports.NeuronWeb = NeuronWeb;
 exports.SceneManager = SceneManager;
 exports.ThemeEngine = ThemeEngine;
 exports.applyFuzzyLayout = applyFuzzyLayout;
-//# sourceMappingURL=chunk-KC7V76I3.cjs.map
-//# sourceMappingURL=chunk-KC7V76I3.cjs.map
+//# sourceMappingURL=chunk-U7K7KQZG.cjs.map
+//# sourceMappingURL=chunk-U7K7KQZG.cjs.map