@omiron33/omi-neuron-web 0.2.21 → 0.2.23

package/dist/{chunk-5SZ37JXQ.cjs → chunk-A5KXAYKG.cjs}

@@ -32,11 +32,26 @@ function _interopNamespace(e) {
 var THREE3__namespace = /*#__PURE__*/_interopNamespace(THREE3);
 
 // src/visualization/constants.ts
+var DEFAULT_STATUS_COLORS = {
+  default: "#c0c5ff",
+  // Same as defaultDomainColor (lavender)
+  draft: "#9ca3af",
+  // Gray
+  active: "#4ade80",
+  // Green
+  complete: "#60a5fa",
+  // Blue
+  blocked: "#f87171",
+  // Red
+  archived: "#6b7280"
+  // Dark gray
+};
 var DEFAULT_THEME = {
   colors: {
     background: "#020314",
     domainColors: {},
     defaultDomainColor: "#c0c5ff",
+    statusColors: DEFAULT_STATUS_COLORS,
     edgeDefault: "#4d4d55",
     edgeActive: "#c6d4ff",
     edgeSelected: "#ffffff",
@@ -505,9 +520,14 @@ var NodeRenderer = class {
     const shouldRenderLabels = labelVisibility !== "none" && (labelVisibility === "interaction" || this.config.maxVisibleLabels > 0 && this.config.labelDistance > 0);
     const resolveNode = (node) => {
       const tier = node.tier ?? "tertiary";
-      const baseColor = new THREE3__namespace.Color(
-        this.config.domainColors[node.domain] ?? this.config.defaultColor
-      );
+      let baseColor;
+      if (node.status && this.config.statusColors?.[node.status]) {
+        baseColor = new THREE3__namespace.Color(this.config.statusColors[node.status]);
+      } else {
+        baseColor = new THREE3__namespace.Color(
+          this.config.domainColors[node.domain] ?? this.config.defaultColor
+        );
+      }
       const position = new THREE3__namespace.Vector3();
       if (node.position) {
         position.set(...node.position);
@@ -1952,6 +1972,458 @@ var EdgeRenderer = class {
     arrow.quaternion.setFromUnitVectors(new THREE3__namespace.Vector3(0, 1, 0), direction);
   }
 };
+function computeConvexHull2D(points) {
+  if (points.length < 3) {
+    return points.map((p) => new THREE3__namespace.Vector2(p.x, p.y));
+  }
+  const points2D = points.map((p) => new THREE3__namespace.Vector2(p.x, p.y));
+  let minIdx = 0;
+  for (let i = 1; i < points2D.length; i++) {
+    if (points2D[i].y < points2D[minIdx].y || points2D[i].y === points2D[minIdx].y && points2D[i].x < points2D[minIdx].x) {
+      minIdx = i;
+    }
+  }
+  [points2D[0], points2D[minIdx]] = [points2D[minIdx], points2D[0]];
+  const pivot = points2D[0];
+  const rest = points2D.slice(1).sort((a, b) => {
+    const angleA = Math.atan2(a.y - pivot.y, a.x - pivot.x);
+    const angleB = Math.atan2(b.y - pivot.y, b.x - pivot.x);
+    if (angleA !== angleB) return angleA - angleB;
+    return a.distanceTo(pivot) - b.distanceTo(pivot);
+  });
+  const hull = [pivot];
+  for (const point of rest) {
+    while (hull.length > 1) {
+      const top = hull[hull.length - 1];
+      const nextToTop = hull[hull.length - 2];
+      const cross = (top.x - nextToTop.x) * (point.y - nextToTop.y) - (top.y - nextToTop.y) * (point.x - nextToTop.x);
+      if (cross <= 0) {
+        hull.pop();
+      } else {
+        break;
+      }
+    }
+    hull.push(point);
+  }
+  return hull;
+}
+function expandHull(hull, padding) {
+  if (hull.length < 3 || padding <= 0) return hull;
+  const centroid = new THREE3__namespace.Vector2(0, 0);
+  for (const p of hull) {
+    centroid.add(p);
+  }
+  centroid.divideScalar(hull.length);
+  return hull.map((p) => {
+    const dir = new THREE3__namespace.Vector2().subVectors(p, centroid).normalize();
+    return new THREE3__namespace.Vector2(p.x + dir.x * padding, p.y + dir.y * padding);
+  });
+}
+var ClusterRenderer = class {
+  constructor(scene, config = {}) {
+    this.scene = scene;
+    this.config = {
+      defaultColor: config.defaultColor ?? "#4a5568",
+      fillOpacity: config.fillOpacity ?? 0.08,
+      strokeOpacity: config.strokeOpacity ?? 0.25,
+      strokeWidth: config.strokeWidth ?? 1.5,
+      labelFontFamily: config.labelFontFamily ?? "system-ui, sans-serif",
+      labelFontSize: config.labelFontSize ?? 11,
+      labelTextColor: config.labelTextColor ?? "#ffffff",
+      labelBackground: config.labelBackground ?? "rgba(0, 0, 0, 0.6)",
+      transitionsEnabled: config.transitionsEnabled ?? true,
+      transitionDurationMs: config.transitionDurationMs ?? 300,
+      zOffset: config.zOffset ?? -0.5,
+      hullPadding: config.hullPadding ?? 1.2
+    };
+    this.scene.add(this.group);
+  }
+  group = new THREE3__namespace.Group();
+  clusterStates = /* @__PURE__ */ new Map();
+  config;
+  /**
+   * Render clusters with convex hull boundaries
+   */
+  renderClusters(clusters, nodePositions) {
+    const currentIds = new Set(clusters.map((c) => c.id));
+    for (const [id, state] of this.clusterStates) {
+      if (!currentIds.has(id)) {
+        this.removeClusterState(state);
+        this.clusterStates.delete(id);
+      }
+    }
+    for (const cluster of clusters) {
+      const memberPositions = this.getMemberPositions(cluster.nodeIds, nodePositions);
+      if (memberPositions.length < 1) {
+        continue;
+      }
+      let state = this.clusterStates.get(cluster.id);
+      if (!state) {
+        state = this.createClusterState(cluster);
+        this.clusterStates.set(cluster.id, state);
+      }
+      this.updateClusterGeometry(state, cluster, memberPositions);
+    }
+  }
+  /**
+   * Update cluster positions when nodes move (e.g., ambient motion)
+   */
+  updatePositions(nodePositions) {
+    for (const [clusterId, state] of this.clusterStates) {
+      let hasChanged = false;
+      for (const [nodeId, lastPos] of state.lastNodePositions) {
+        const currentPos = nodePositions.get(nodeId);
+        if (currentPos && !currentPos.equals(lastPos)) {
+          hasChanged = true;
+          break;
+        }
+      }
+      if (hasChanged) {
+        const nodeIds = Array.from(state.lastNodePositions.keys());
+        const memberPositions = this.getMemberPositions(nodeIds, nodePositions);
+        if (memberPositions.length > 0) {
+          this.updateClusterGeometry(state, { id: clusterId, label: "", nodeIds }, memberPositions);
+        }
+      }
+    }
+  }
+  /**
+   * Update method called each frame
+   */
+  update(_delta, _elapsed) {
+  }
+  /**
+   * Clear all clusters
+   */
+  clear() {
+    for (const state of this.clusterStates.values()) {
+      this.removeClusterState(state);
+    }
+    this.clusterStates.clear();
+  }
+  /**
+   * Dispose of all resources
+   */
+  dispose() {
+    this.clear();
+    this.scene.remove(this.group);
+  }
+  getMemberPositions(nodeIds, nodePositions) {
+    const positions = [];
+    for (const nodeId of nodeIds) {
+      const pos = nodePositions.get(nodeId);
+      if (pos) {
+        positions.push(pos.clone());
+      }
+    }
+    return positions;
+  }
+  createClusterState(cluster) {
+    const color = new THREE3__namespace.Color(cluster.color ?? this.config.defaultColor);
+    const labelElement = document.createElement("div");
+    labelElement.className = "neuron-cluster-label";
+    labelElement.style.cssText = `
+      font-family: ${this.config.labelFontFamily};
+      font-size: ${this.config.labelFontSize}px;
+      font-weight: 500;
+      color: ${this.config.labelTextColor};
+      background: ${this.config.labelBackground};
+      padding: 4px 10px;
+      border-radius: 12px;
+      white-space: nowrap;
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.85;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    `;
+    labelElement.textContent = cluster.label;
+    const label = new CSS2DRenderer_js.CSS2DObject(labelElement);
+    label.position.set(0, 0, 0);
+    this.group.add(label);
+    return {
+      id: cluster.id,
+      mesh: null,
+      outline: null,
+      label,
+      labelElement,
+      color,
+      centroid: new THREE3__namespace.Vector3(),
+      lastNodePositions: /* @__PURE__ */ new Map()
+    };
+  }
+  updateClusterGeometry(state, cluster, memberPositions) {
+    if (cluster.color) {
+      state.color.set(cluster.color);
+    }
+    if (state.labelElement && cluster.label) {
+      state.labelElement.textContent = cluster.label;
+    }
+    state.lastNodePositions.clear();
+    for (let i = 0; i < cluster.nodeIds.length; i++) {
+      if (memberPositions[i]) {
+        state.lastNodePositions.set(cluster.nodeIds[i], memberPositions[i].clone());
+      }
+    }
+    state.centroid.set(0, 0, 0);
+    for (const pos of memberPositions) {
+      state.centroid.add(pos);
+    }
+    state.centroid.divideScalar(memberPositions.length);
+    if (cluster.position) {
+      state.centroid.set(cluster.position.x, cluster.position.y, cluster.position.z);
+    }
+    if (state.label) {
+      state.label.position.copy(state.centroid);
+      state.label.position.y += 1.5;
+    }
+    if (memberPositions.length < 3) {
+      this.removeClusterMesh(state);
+      return;
+    }
+    const hull2D = computeConvexHull2D(memberPositions);
+    const expandedHull = expandHull(hull2D, this.config.hullPadding ?? 1.2);
+    if (expandedHull.length < 3) {
+      this.removeClusterMesh(state);
+      return;
+    }
+    const shape = new THREE3__namespace.Shape(expandedHull);
+    const geometry = new THREE3__namespace.ShapeGeometry(shape);
+    const avgZ = memberPositions.reduce((sum, p) => sum + p.z, 0) / memberPositions.length + (this.config.zOffset ?? -0.5);
+    if (state.mesh) {
+      state.mesh.geometry.dispose();
+      state.mesh.geometry = geometry;
+      state.mesh.position.z = avgZ;
+      state.mesh.material.color.copy(state.color);
+    } else {
+      const material = new THREE3__namespace.MeshBasicMaterial({
+        color: state.color,
+        transparent: true,
+        opacity: this.config.fillOpacity,
+        side: THREE3__namespace.DoubleSide,
+        depthWrite: false
+      });
+      state.mesh = new THREE3__namespace.Mesh(geometry, material);
+      state.mesh.position.z = avgZ;
+      state.mesh.renderOrder = -1;
+      this.group.add(state.mesh);
+    }
+    const outlinePoints = [...expandedHull, expandedHull[0]].map(
+      (p) => new THREE3__namespace.Vector3(p.x, p.y, avgZ + 0.01)
+    );
+    if (state.outline) {
+      state.outline.geometry.dispose();
+      state.outline.geometry = new THREE3__namespace.BufferGeometry().setFromPoints(outlinePoints);
+      state.outline.material.color.copy(state.color);
+    } else {
+      const outlineGeometry = new THREE3__namespace.BufferGeometry().setFromPoints(outlinePoints);
+      const outlineMaterial = new THREE3__namespace.LineBasicMaterial({
+        color: state.color,
+        transparent: true,
+        opacity: this.config.strokeOpacity,
+        linewidth: this.config.strokeWidth
+      });
+      state.outline = new THREE3__namespace.Line(outlineGeometry, outlineMaterial);
+      state.outline.renderOrder = -1;
+      this.group.add(state.outline);
+    }
+  }
+  removeClusterMesh(state) {
+    if (state.mesh) {
+      state.mesh.geometry.dispose();
+      state.mesh.material.dispose();
+      this.group.remove(state.mesh);
+      state.mesh = null;
+    }
+    if (state.outline) {
+      state.outline.geometry.dispose();
+      state.outline.material.dispose();
+      this.group.remove(state.outline);
+      state.outline = null;
+    }
+  }
+  removeClusterState(state) {
+    this.removeClusterMesh(state);
+    if (state.label) {
+      if (state.labelElement?.parentNode) {
+        state.labelElement.parentNode.removeChild(state.labelElement);
+      }
+      this.group.remove(state.label);
+    }
+  }
+  /**
+   * Get cluster visibility state for external use
+   */
+  getClusterIds() {
+    return Array.from(this.clusterStates.keys());
+  }
+  /**
+   * Get centroid position for a cluster
+   */
+  getClusterCentroid(clusterId) {
+    const state = this.clusterStates.get(clusterId);
+    return state ? state.centroid.clone() : null;
+  }
+};
+
+// src/visualization/layouts/tree-layout.ts
+function applyTreeLayout(nodes, edges, options = {}) {
+  if (nodes.length === 0) return nodes;
+  const treeOptions = options.tree ?? {};
+  const horizontalSpacing = treeOptions.horizontalSpacing ?? 3;
+  const verticalSpacing = treeOptions.verticalSpacing ?? 4;
+  const direction = treeOptions.direction ?? "down";
+  const rootNodeId = treeOptions.rootNodeId;
+  const nodeById = /* @__PURE__ */ new Map();
+  const nodeBySlug = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    nodeById.set(node.id, node);
+    if (node.slug) {
+      nodeBySlug.set(node.slug, node);
+    }
+  }
+  const parentMap = /* @__PURE__ */ new Map();
+  const childrenMap = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    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;
+    if (!parentMap.has(childId)) {
+      parentMap.set(childId, parentId);
+      const siblings = childrenMap.get(parentId) ?? [];
+      siblings.push(childId);
+      childrenMap.set(parentId, siblings);
+    }
+  }
+  let roots;
+  if (rootNodeId) {
+    const rootNode = nodeBySlug.get(rootNodeId) ?? nodeById.get(rootNodeId);
+    roots = rootNode ? [rootNode.id] : [];
+  } else {
+    roots = nodes.filter((n) => !parentMap.has(n.id)).map((n) => n.id);
+  }
+  if (roots.length === 0 && nodes.length > 0) {
+    roots = [nodes[0].id];
+  }
+  const treeNodes = /* @__PURE__ */ new Map();
+  function calculateWidth(nodeId, depth) {
+    const children = childrenMap.get(nodeId) ?? [];
+    let width;
+    if (children.length === 0) {
+      width = 1;
+    } else {
+      width = 0;
+      for (const childId of children) {
+        width += calculateWidth(childId, depth + 1);
+      }
+    }
+    treeNodes.set(nodeId, {
+      id: nodeId,
+      children,
+      width,
+      depth,
+      x: 0
+    });
+    return width;
+  }
+  let totalWidth = 0;
+  for (const rootId of roots) {
+    totalWidth += calculateWidth(rootId, 0);
+  }
+  function assignPositions(nodeId, leftBound) {
+    const treeNode = treeNodes.get(nodeId);
+    if (!treeNode) return;
+    const children = treeNode.children;
+    if (children.length === 0) {
+      treeNode.x = leftBound + 0.5;
+    } else {
+      let childLeft = leftBound;
+      for (const childId of children) {
+        assignPositions(childId, childLeft);
+        const childNode = treeNodes.get(childId);
+        if (childNode) {
+          childLeft += childNode.width;
+        }
+      }
+      const firstChild = treeNodes.get(children[0]);
+      const lastChild = treeNodes.get(children[children.length - 1]);
+      if (firstChild && lastChild) {
+        treeNode.x = (firstChild.x + lastChild.x) / 2;
+      }
+    }
+  }
+  let currentLeft = 0;
+  for (const rootId of roots) {
+    assignPositions(rootId, currentLeft);
+    const rootTree = treeNodes.get(rootId);
+    if (rootTree) {
+      currentLeft += rootTree.width;
+    }
+  }
+  const positions = /* @__PURE__ */ new Map();
+  const centerOffset = totalWidth / 2;
+  const isHorizontal = direction === "left" || direction === "right";
+  for (const [nodeId, treeNode] of treeNodes) {
+    const siblingPos = (treeNode.x - centerOffset) * horizontalSpacing;
+    let depthPos;
+    switch (direction) {
+      case "up":
+        depthPos = treeNode.depth * verticalSpacing;
+        break;
+      case "left":
+        depthPos = -treeNode.depth * verticalSpacing;
+        break;
+      case "right":
+        depthPos = treeNode.depth * verticalSpacing;
+        break;
+      case "down":
+      default:
+        depthPos = -treeNode.depth * verticalSpacing;
+        break;
+    }
+    const x = isHorizontal ? depthPos : siblingPos;
+    const y = isHorizontal ? siblingPos : depthPos;
+    positions.set(nodeId, [x, y, 0]);
+  }
+  const positionedIds = new Set(positions.keys());
+  const orphans = nodes.filter((n) => !positionedIds.has(n.id));
+  if (orphans.length > 0) {
+    const maxDepth = Math.max(...Array.from(treeNodes.values()).map((t) => t.depth), 0);
+    const orphanDepth = (maxDepth + 2) * verticalSpacing;
+    const orphanSpread = (orphans.length - 1) * horizontalSpacing / 2;
+    orphans.forEach((orphan, index) => {
+      const siblingPos = -orphanSpread + index * horizontalSpacing;
+      let depthPos;
+      switch (direction) {
+        case "up":
+          depthPos = orphanDepth;
+          break;
+        case "left":
+          depthPos = -orphanDepth;
+          break;
+        case "right":
+          depthPos = orphanDepth;
+          break;
+        case "down":
+        default:
+          depthPos = -orphanDepth;
+          break;
+      }
+      const x = isHorizontal ? depthPos : siblingPos;
+      const y = isHorizontal ? siblingPos : depthPos;
+      positions.set(orphan.id, [x, y, 0]);
+    });
+  }
+  return nodes.map((node) => {
+    const position = positions.get(node.id);
+    if (position) {
+      return { ...node, position };
+    }
+    return node;
+  });
+}
 
 // src/visualization/layouts/fuzzy-layout.ts
 var GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
@@ -2004,11 +2476,14 @@ function mulberry32(seed) {
 function buildSeed(baseSeed, nodeKey) {
   return mulberry32(hashString(`${baseSeed}:${nodeKey}`));
 }
-function applyFuzzyLayout(nodes, options = {}) {
+function applyFuzzyLayout(nodes, options = {}, edges) {
   const mode = options.mode ?? "atlas";
   if (mode === "positioned") {
     return nodes;
   }
+  if (mode === "tree") {
+    return applyTreeLayout(nodes, edges ?? [], options);
+  }
   const needsLayout = nodes.some((node) => !node.position);
   if (mode === "auto" && !needsLayout) {
     return nodes;
@@ -2674,6 +3149,7 @@ function NeuronWeb({
     const transitionsEnabled = resolvedPerformanceMode === "normal" && !prefersReducedMotion && profileAllowsContinuous && resolvedAnimationConfig.transitionDurationMs > 0;
     return new NodeRenderer(sceneManager.scene, {
       domainColors: resolvedTheme.colors.domainColors,
+      statusColors: resolvedTheme.colors.statusColors,
       defaultColor: resolvedTheme.colors.defaultDomainColor,
       baseScale: 1.15,
       tierScales: {
@@ -2778,6 +3254,27 @@ function NeuronWeb({
       edgeRenderer?.dispose();
     };
   }, [edgeRenderer]);
+  const clusterRenderer = react.useMemo(() => {
+    if (!sceneManager) return null;
+    if (!graphData.clusters?.length) return null;
+    return new ClusterRenderer(sceneManager.scene, {
+      defaultColor: resolvedTheme.colors.defaultDomainColor,
+      fillOpacity: 0.08,
+      strokeOpacity: 0.25,
+      strokeWidth: 1.5,
+      labelFontFamily: resolvedTheme.typography.labelFontFamily,
+      labelFontSize: resolvedTheme.typography.labelFontSize - 1,
+      labelTextColor: resolvedTheme.colors.labelText,
+      labelBackground: resolvedTheme.colors.labelBackground,
+      zOffset: -0.5,
+      hullPadding: 1.2
+    });
+  }, [sceneManager, graphData.clusters?.length, resolvedTheme]);
+  react.useEffect(() => {
+    return () => {
+      clusterRenderer?.dispose();
+    };
+  }, [clusterRenderer]);
   const doubleClickEnabled = false;
   const interactionManager = react.useMemo(() => {
     if (!sceneManager) return null;
@@ -2820,8 +3317,8 @@ function NeuronWeb({
     [layout, resolvedDensity.spread]
   );
   const resolvedNodes = react.useMemo(
-    () => applyFuzzyLayout(workingGraph.nodes, layoutOptions),
-    [workingGraph.nodes, layoutOptions]
+    () => applyFuzzyLayout(workingGraph.nodes, layoutOptions, workingGraph.edges),
+    [workingGraph.nodes, workingGraph.edges, layoutOptions]
   );
   const displayNodes = react.useMemo(() => {
     if (!selectedNodeId || !resolvedDensity.focusExpansion) return resolvedNodes;
@@ -3203,7 +3700,18 @@ function NeuronWeb({
     nodeRenderer.renderNodes(displayNodes);
     const positions = nodeRenderer.getNodePositionsBySlug(/* @__PURE__ */ new Map());
     edgeRenderer.renderEdges(workingGraph.edges, positions);
-  }, [displayNodes, workingGraph.edges, sceneManager, nodeRenderer, edgeRenderer]);
+    if (clusterRenderer && graphData.clusters?.length) {
+      const nodePositionsById = /* @__PURE__ */ new Map();
+      for (const node of displayNodes) {
+        const pos = nodeRenderer.getNodePosition(node.id);
+        if (pos) {
+          nodePositionsById.set(node.id, pos);
+          nodePositionsById.set(node.slug, pos);
+        }
+      }
+      clusterRenderer.renderClusters(graphData.clusters, nodePositionsById);
+    }
+  }, [displayNodes, workingGraph.edges, graphData.clusters, sceneManager, nodeRenderer, edgeRenderer, clusterRenderer]);
   react.useEffect(() => {
     if (!sceneManager) return;
     sceneManager.updateBackground(resolvedTheme.colors.background);
@@ -4126,6 +4634,7 @@ function dedupePreserveOrder(values) {
 }
 
 exports.DEFAULT_RENDERING_OPTIONS = DEFAULT_RENDERING_OPTIONS;
+exports.DEFAULT_STATUS_COLORS = DEFAULT_STATUS_COLORS;
 exports.DEFAULT_THEME = DEFAULT_THEME;
 exports.NeuronContext = NeuronContext;
 exports.NeuronWeb = NeuronWeb;
@@ -4133,6 +4642,7 @@ exports.NeuronWebExplorer = NeuronWebExplorer;
 exports.SceneManager = SceneManager;
 exports.ThemeEngine = ThemeEngine;
 exports.applyFuzzyLayout = applyFuzzyLayout;
+exports.applyTreeLayout = applyTreeLayout;
 exports.createStoryBeat = createStoryBeat;
 exports.createStudyPathFromBeat = createStudyPathFromBeat;
 exports.createStudyPathFromNodeIds = createStudyPathFromNodeIds;
@@ -4141,5 +4651,5 @@ exports.normalizeStoryBeat = normalizeStoryBeat;
 exports.useNeuronContext = useNeuronContext;
 exports.useNeuronGraph = useNeuronGraph;
 exports.validateStoryBeat = validateStoryBeat;
-//# sourceMappingURL=chunk-5SZ37JXQ.cjs.map
-//# sourceMappingURL=chunk-5SZ37JXQ.cjs.map
+//# sourceMappingURL=chunk-A5KXAYKG.cjs.map
+//# sourceMappingURL=chunk-A5KXAYKG.cjs.map