@omiron33/omi-neuron-web 0.2.21 → 0.2.22

package/dist/{chunk-5SZ37JXQ.cjs → chunk-HOW2F2KP.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,299 @@ 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/fuzzy-layout.ts
 var GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
@@ -2674,6 +2987,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 +3092,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;
@@ -3203,7 +3538,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 +4472,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;
@@ -4141,5 +4488,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-HOW2F2KP.cjs.map
+//# sourceMappingURL=chunk-HOW2F2KP.cjs.map