symbiote-ui 0.3.0-alpha.21 → 0.3.0-alpha.22

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to `symbiote-ui` will be documented in this file.
 
 ## Unreleased
 
+## [0.3.0-alpha.22] - 2026-06-08
+
+### Added
+
+- Added `canvas-graph` multi-node focus via `fitNodes()`, `flyToNodes()`,
+  and `focusNodes()`, including WebMCP/discovery metadata for
+  `canvas_graph_focus_nodes`.
+- Extended `createGraphViewModeController().focusNode()` with `flatNodeIds` so
+  flat graph demos can fit several visible nodes without drilling into a parent
+  group.
+- Added a main-thread `ForceLayout` fallback so bundled hosts still render
+  `canvas-graph` when the standalone worker file is not served.
+
+### Fixed
+
+- Kept flat graph selection emphasis scoped to the selected node by default so
+  multi-node focus does not fan out repeated pulse waves across every fitted
+  neighbor.
+- Refreshed cached `canvas-graph` drawing colors on `cascade-theme-change` and
+  root/component theme mutations so flat canvas nodes, edges, and backgrounds
+  inherit the active cascade theme without host-local redraw hacks.
+
 ## [0.3.0-alpha.20] - 2026-06-08
 
 ### Changed

package/README.md

@@ -130,7 +130,7 @@ editor.addNode(node);
 let canvas = document.querySelector('node-canvas');
 canvas.setEditor(editor);
 canvas.setPathStyle('pcb');
-canvas.setFlowLayout({ nodeIds: [node.id], direction: 'vertical', scroll: true });
+canvas.applyLayout({ algorithm: 'flow', nodeIds: [node.id], direction: 'vertical', scroll: true });
 
 let graphView = createGraphViewModeController({
   shell: document.querySelector('graph-explorer-shell'),
@@ -144,9 +144,21 @@ let graphView = createGraphViewModeController({
 });
 
 graphView.setMode(new URLSearchParams(location.search).get('mode'));
-graphView.focusNode({ nodeId: 'generated-view' });
+graphView.focusNode({ nodeId: 'generated-view', flatNodeIds: ['generated-view'] });
 ```
 
+For flat overview demos, keep the nodes that should be visible together at the
+root of the `canvas-graph` model and pass `flatNodeIds` to
+`focusNode()`. The older `flatNodeId` field focuses a single node and may enter
+that node's parent group when the model is hierarchical.
+
+`node-canvas.applyLayout()` is the agent-facing layout entrypoint. Use
+`algorithm: 'auto'` for grouped graph auto-layout, `algorithm: 'tree'` for
+structured directory/tree layouts, and `algorithm: 'flow'` for document-like
+previews. Flat graph seed positions from `computeInitialGraphPositions()` are
+stable by default; pass `random: Math.random` only when a non-deterministic demo
+is intentional.
+
 `panel-layout` owns reusable split and panel behavior only. Product routes,
 transport, persistence, and permission checks remain host policy:
 

package/canvas/AutoLayout.js

@@ -414,7 +414,6 @@ export function computeAutoLayout(editor, options = {}) {
     for (let r = 0; r < maxR; r += step) {
       for (let delta = 0; delta <= M_PI; delta += angularStep) {
         for (const sign of [1, -1]) {
-          cycleCount++;
           let a = prefAngle + delta * sign;
           let x = Math.round(Math.cos(a) * r);
           let y = Math.round(Math.sin(a) * r);

package/canvas/CanvasGraph/CanvasGraph.js

@@ -16,6 +16,7 @@ import {
 } from './CanvasGraphGeometry.js';
 import { GRAPH_TYPE_COLOR_TOKENS } from '../../graph/theme-contract.js';
 import {
+  CANVAS_GRAPH_LAYER_TARGETS,
   getDepthGroupsFrame,
   getLayerAnimationFrame,
   getNextPulseQueue,
@@ -48,6 +49,19 @@ const DEFAULT_MENU_ITEMS = Object.freeze([
   { action: 'view-code', label: 'View Code', path: 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z' },
 ]);
 
+function normalizeFocusNodeIds(nodeIds) {
+  let ids = Array.isArray(nodeIds) ? nodeIds : [nodeIds];
+  let normalized = [];
+  let seen = new Set();
+  for (let id of ids) {
+    let normalizedId = String(id || '').trim();
+    if (!normalizedId || seen.has(normalizedId)) continue;
+    seen.add(normalizedId);
+    normalized.push(normalizedId);
+  }
+  return normalized;
+}
+
 function toRgba(rgb, alpha = 1) {
   return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
 }
@@ -94,6 +108,15 @@ function readThemeRgb(source, token, fallback) {
   return resolveCanvasColor(value, fallback);
 }
 
+function scheduleFrame(callback) {
+  if (typeof globalThis.requestAnimationFrame === 'function') {
+    let id = globalThis.requestAnimationFrame(callback);
+    return () => globalThis.cancelAnimationFrame?.(id);
+  }
+  let id = setTimeout(callback, 0);
+  return () => clearTimeout(id);
+}
+
 export class CanvasGraph extends Symbiote {
   init$ = {
     // These defaults will be updated from external controller if needed
@@ -185,6 +208,8 @@ export class CanvasGraph extends Symbiote {
     this._visualDragDeltaY = 0;
     this._dragWorldTransform = null;
     this._layoutSnapshot = null;
+    this._themeSyncQueued = false;
+    this._cancelThemeSync = null;
 
     // Info panel state (typewriter HUD to the right of active node)
     this._infoPanel = {
@@ -218,12 +243,7 @@ export class CanvasGraph extends Symbiote {
       4: { scale: 1, opacity: 1, parallax: 0 }
     };
 
-    this.LAYER_TARGETS = {
-      scale:    [1.12, 1.0,  0.95, 0.88, 0.78],
-      opacity:  [1.0,  0.9,  0.55, 0.06, 0.03],
-      blur:     [0,    0,    1,    3,    5],
-      parallax: [0,    0,    0.02, 0.04, 0.07]
-    };
+    this.LAYER_TARGETS = CANVAS_GRAPH_LAYER_TARGETS;
 
     this.depthGroups = {
       0: { edges: [], nodes: [] },
@@ -238,6 +258,7 @@ export class CanvasGraph extends Symbiote {
     this.resizeCanvas();
 
     this.bindEvents();
+    this._bindThemeSync();
 
     this._wakeLoop();
 
@@ -249,12 +270,16 @@ export class CanvasGraph extends Symbiote {
       });
     }
 
-    setTimeout(() => this.syncCanvasTheme(), 100);
+    this._scheduleCanvasThemeSync();
   }
 
   disconnectedCallback() {
     this._loopRunning = false;
     if (this._animationFrame) cancelAnimationFrame(this._animationFrame);
+    this._cancelThemeSync?.();
+    this._cancelThemeSync = null;
+    this.ownerDocument?.removeEventListener?.('cascade-theme-change', this._themeChangeHandler);
+    this._themeObserver?.disconnect();
     if (this.worker) this.worker.stop();
   }
 
@@ -284,6 +309,53 @@ export class CanvasGraph extends Symbiote {
     this.fitView();
   }
 
+  _getVisibleFocusFrame(nodeId, { fallbackToParent = true } = {}) {
+    let id = String(nodeId || '').trim();
+    if (!id) return null;
+
+    let node = this.nodeMap?.get(id);
+    if (!node && fallbackToParent) {
+      let graphNode = this.graphDB?.nodes?.get(id);
+      let parentId = graphNode?.parentId;
+      while (parentId && !node) {
+        node = this.nodeMap?.get(parentId);
+        if (node) {
+          id = parentId;
+          break;
+        }
+        parentId = this.graphDB?.nodes?.get(parentId)?.parentId;
+      }
+    }
+    if (!node) return null;
+
+    let pos = this.getSmooth(id) || this.nodePositions.get(id);
+    if (!pos) return null;
+
+    if (this.renderMode === 'dots') {
+      let connections = this.adjMap?.get(id)?.size || 0;
+      let radius = getNodeRadius(node, connections);
+      return {
+        id,
+        node,
+        minX: pos.x - radius,
+        minY: pos.y - radius,
+        maxX: pos.x + radius,
+        maxY: pos.y + radius,
+      };
+    }
+
+    let width = Number.isFinite(node.w) ? node.w : 160;
+    let height = Number.isFinite(node.h) ? node.h : 40;
+    return {
+      id,
+      node,
+      minX: pos.x,
+      minY: pos.y,
+      maxX: pos.x + width,
+      maxY: pos.y + height,
+    };
+  }
+
   fitView(padding = 60, animate = true) {
     if (!this.nodePositions.size) return;
     const rect = this.canvas.getBoundingClientRect();
@@ -327,12 +399,90 @@ export class CanvasGraph extends Symbiote {
     this._wakeLoop();
   }
 
-  pulseNode(nodeId, durationMs = 1500) {
+  fitNodes(nodeIds, options = {}) {
+    let ids = normalizeFocusNodeIds(nodeIds);
+    if (ids.length === 0) return false;
+
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+
+    let frames = ids
+      .map((id) => this._getVisibleFocusFrame(id, { fallbackToParent: options.fallbackToParent !== false }))
+      .filter(Boolean);
+    if (frames.length === 0) return false;
+
+    let minX = Math.min(...frames.map((frame) => frame.minX));
+    let minY = Math.min(...frames.map((frame) => frame.minY));
+    let maxX = Math.max(...frames.map((frame) => frame.maxX));
+    let maxY = Math.max(...frames.map((frame) => frame.maxY));
+    let graphW = maxX - minX || 1;
+    let graphH = maxY - minY || 1;
+    let cx = (minX + maxX) / 2;
+    let cy = (minY + maxY) / 2;
+    let padding = Number.isFinite(options.padding) ? options.padding : 80;
+    let minZoom = Number.isFinite(options.minZoom) ? options.minZoom : 0.02;
+    let maxZoom = Number.isFinite(options.maxZoom) ? options.maxZoom : 2.0;
+    let newZoom = Math.max(minZoom, Math.min(
+      (rect.width - padding * 2) / graphW,
+      (rect.height - padding * 2) / graphH,
+      maxZoom
+    ));
+    let newPanX = rect.width / 2 - cx * newZoom;
+    let newPanY = rect.height / 2 - cy * newZoom;
+
+    let animate = options.animate !== false;
+    this._zoomAnchor = null;
+    if (animate) {
+      this._targetZoom = newZoom;
+      this._targetPanX = newPanX;
+      this._targetPanY = newPanY;
+    } else {
+      this.zoom = newZoom;
+      this._targetZoom = newZoom;
+      this.panX = newPanX;
+      this.panY = newPanY;
+      this._targetPanX = null;
+      this._targetPanY = null;
+    }
+
+    let selectedId = null;
+    if (typeof options.select === 'string') {
+      selectedId = options.select;
+    } else if (options.select === true) {
+      selectedId = frames[0]?.id || null;
+    }
+    if (selectedId && this.nodeMap?.has(selectedId)) {
+      this.activeNode = this.nodeMap.get(selectedId);
+      this.deactivating = false;
+      this.updateInteractionDepths();
+    }
+
+    this.needsDraw = true;
+    this._wakeLoop();
+    return true;
+  }
+
+  flyToNodes(nodeIds, options = {}) {
+    return this.fitNodes(nodeIds, options);
+  }
+
+  focusNodes(nodeIds, options = {}) {
+    let ids = normalizeFocusNodeIds(nodeIds);
+    if (ids.length === 0) return false;
+    if (!Array.isArray(nodeIds) && ids.length === 1 && options.fit !== true) {
+      this.flyToNode(ids[0], options);
+      return true;
+    }
+    return this.fitNodes(ids, options);
+  }
+
+  pulseNode(nodeId, durationMs = 1500, options = {}) {
     this._pulses = getNextPulseQueue({
       pulses: this._pulses || [],
       nodeId,
       startTime: performance.now(),
       duration: durationMs,
+      waves: Number.isFinite(options.waves) ? options.waves : 1,
     });
     this.needsDraw = true;
     this._wakeLoop();
@@ -756,6 +906,38 @@ export class CanvasGraph extends Symbiote {
     return `rgb(${rr},${gg},${bbb})`;
   }
 
+  _bindThemeSync() {
+    this._themeChangeHandler = () => this._scheduleCanvasThemeSync();
+    this.ownerDocument?.addEventListener?.('cascade-theme-change', this._themeChangeHandler);
+
+    if (typeof globalThis.MutationObserver !== 'function') return;
+    this._themeObserver = new MutationObserver(() => this._scheduleCanvasThemeSync());
+    let themeSources = [
+      this.ownerDocument?.documentElement,
+      this.ownerDocument?.body,
+      this.parentElement,
+      this,
+    ].filter(Boolean);
+    let seen = new Set();
+    for (let source of themeSources) {
+      if (seen.has(source)) continue;
+      seen.add(source);
+      this._themeObserver.observe(source, { attributes: true, attributeFilter: ['class', 'style'] });
+    }
+  }
+
+  _scheduleCanvasThemeSync() {
+    if (this._themeSyncQueued) return;
+    this._themeSyncQueued = true;
+    this._cancelThemeSync = scheduleFrame(() => {
+      this._themeSyncQueued = false;
+      this._cancelThemeSync = null;
+      this.syncCanvasTheme();
+      this.needsDraw = true;
+      this._wakeLoop();
+    });
+  }
+
   syncCanvasTheme() {
     this._bgRgb = readThemeRgb(this, '--sn-bg', this._bgRgb);
     this._edgeRgb = readThemeRgb(this, '--sn-conn-color', this._edgeRgb);
@@ -1004,6 +1186,8 @@ export class CanvasGraph extends Symbiote {
           fillStyle = this.blendBg(fromTC[0], fromTC[1], fromTC[2], 0.35);
         }
 
+        currentCtx.save();
+        currentCtx.globalAlpha *= edge.aAlpha;
         currentCtx.fillStyle = fillStyle;
         currentCtx.beginPath();
         const midX = from.x + dx * 0.5, midY = from.y + dy * 0.5;
@@ -1018,6 +1202,7 @@ export class CanvasGraph extends Symbiote {
         currentCtx.arc(from.x, from.y, wFrom, ang - Math.PI/2, ang - Math.PI * 1.5, true);
         currentCtx.closePath();
         currentCtx.fill();
+        currentCtx.restore();
       }
 
       // Nodes
@@ -1133,7 +1318,8 @@ export class CanvasGraph extends Symbiote {
           const pos = this.getSmooth(p.id) || this.nodePositions.get(p.id);
           if (!pos) return false;
           const progress = elapsed / p.duration;
-          const pulsePhase = (progress * 3) % 1;
+          const waves = Number.isFinite(p.waves) ? Math.max(1, p.waves) : 1;
+          const pulsePhase = (progress * waves) % 1;
           const r = 20 + (pulsePhase * 80);
           const opacity = 1 - pulsePhase;
           mainCtx.beginPath();

package/canvas/CanvasGraph/CanvasGraphDrawState.js

@@ -45,13 +45,20 @@ export function resolveViewportAnimation(options) {
   return next;
 }
 
-export function getNextPulseQueue({ pulses = [], nodeId, startTime, duration }) {
+export function getNextPulseQueue({ pulses = [], nodeId, startTime, duration, waves = 1 }) {
   return [
     ...pulses.filter((pulse) => pulse.id !== nodeId),
-    { id: nodeId, startTime, duration },
+    { id: nodeId, startTime, duration, waves },
   ];
 }
 
+export const CANVAS_GRAPH_LAYER_TARGETS = Object.freeze({
+  scale: Object.freeze([1.14, 0.96, 0.88, 0.78, 0.68]),
+  opacity: Object.freeze([1, 0.52, 0.24, 0.07, 0.02]),
+  blur: Object.freeze([0, 0.4, 1.6, 3.5, 6]),
+  parallax: Object.freeze([0, 0.02, 0.045, 0.075, 0.11]),
+});
+
 export function resolveGroupOrbitRotationFrame(options) {
   let {
     rotation = 0,