symbiote-ui 0.3.0-alpha.65 → 0.3.0-alpha.67

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to `symbiote-ui` will be documented in this file.
 
 ## Unreleased
 
+## [0.3.0-alpha.67] - 2026-07-19
+
+### Fixed
+
+- The narrow `symbiote-ui/canvas/node-canvas` entrypoint now self-registers its internal `graph-node` dependency and re-exports `configureMaterialSymbols`, so composition-only hosts get fully upgraded graph nodes without importing the full UI bundle.
+- A connected `node-canvas` now installs the system token cascade (`ensureSystemCascade`), so node card visuals (surface, border, radius, shadow) resolve on pages that never call `applyTheme`; the cascade stays visually inert on already-themed surfaces.
+
+## [0.3.0-alpha.66] - 2026-07-18
+
+### Added
+
+- Added Node-safe sharing codec (`encodeCascadeThemeShare`, `decodeCascadeThemeShare`) and insert-only user preset store helpers (`insertCascadeThemeUserPreset`, `getCascadeThemeUserPreset`, `listCascadeThemeUserPresets`) to `symbiote-ui` root entrypoint.
+- Added `<sn-theme-import-dialog>` (`CascadeThemeImportDialog`) component for browser hosts to preview, cancel, and apply shared theme tokens with zero-storage previews and rollback support.
+- Added theme share actions and `share-label`/`shareLabel` properties to `cascade-theme-widget` and `cascade-theme-editor`, which dispatch a composed, bubbling `cascade-theme-share-request` event containing the detached theme state snapshot.
+
 ## [0.3.0-alpha.65] - 2026-07-18
 
 ### Fixed

package/canvas/NodeCanvas/NodeCanvas.js

@@ -23,6 +23,7 @@ import { Selector } from '../../interactions/Selector.js';
 import { SnapGrid } from '../../interactions/SnapGrid.js';
 import { isNodeInMarquee, isEdgeIntersectingRect } from '../../interactions/SelectionGeometry.js';
 import { applyTheme } from '../../themes/Theme.js';
+import { ensureSystemCascade } from '../../themes/system-cascade.js';
 import { applyPalette } from '../../themes/Palette.js';
 import { applySkin } from '../../themes/Skin.js';
 import { NodeViewManager } from '../NodeViewManager.js';
@@ -120,6 +121,8 @@ function baseFlowMenuActions({ running = false, flowing = false, hasConnections
 }
 
 export class NodeCanvas extends Symbiote {
+  static observedAttributes = ['presentation'];
+
   init$ = {
     zoom: 1,
     panX: 0,
@@ -128,6 +131,7 @@ export class NodeCanvas extends Symbiote {
     minimapToggleTitle: translate('nodeCanvas.toggleMinimap'),
     '+contentTransform': () =>
       `translate(${this.$.panX}px, ${this.$.panY}px) scale(${this.$.zoom})`,
+    presentation: false,
   };
 
   /** @type {import('../../core/Editor.js').NodeEditor|null} */
@@ -679,6 +683,35 @@ export class NodeCanvas extends Symbiote {
     this._viewManager?.setSnapEnabled(enabled);
   }
 
+  get presentation() {
+    return this.connectedOnce ? this.$.presentation : this.init$.presentation;
+  }
+
+  set presentation(val) {
+    const boolVal = !!val;
+    if (this.connectedOnce) {
+      this.$.presentation = boolVal;
+    } else {
+      this.init$.presentation = boolVal;
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === 'presentation') {
+      this.presentation = newValue !== null;
+    } else {
+      super.attributeChangedCallback?.(name, oldValue, newValue);
+    }
+  }
+
+  setPresentationMode(enabled) {
+    this.setReadonly(enabled);
+    this.setChrome(!enabled);
+    this.setPanels(!enabled);
+    this.setViewportLocked(enabled);
+  }
+
   /**
    * Enable/disable readonly mode
    * @param {boolean} enabled
@@ -2440,6 +2473,20 @@ export class NodeCanvas extends Symbiote {
   }
 
   renderCallback() {
+    ensureSystemCascade(this.ownerDocument ?? globalThis.document);
+
+    let initialPresentationRun = true;
+    this.sub('presentation', (value) => {
+      this.toggleAttribute('presentation', !!value);
+      if (initialPresentationRun) {
+        initialPresentationRun = false;
+        if (!value) {
+          return;
+        }
+      }
+      this.setPresentationMode(!!value);
+    });
+
     ensureMaterialSymbols(['map', 'play_arrow', 'stop', 'timeline']);
     this.addEventListener('panel-menu-action', this._onPanelMenuAction);
 
@@ -2728,6 +2775,15 @@ export class NodeCanvas extends Symbiote {
     this._clearConnectionSettleRefresh();
     this._disconnectNodeResizeObserver();
     this._hideFocusTransitionMarker();
+    this._clearScheduledConnectionUpdates();
+    if (this._suppressedResizeFlushTimer) {
+      clearTimeout(this._suppressedResizeFlushTimer);
+      this._suppressedResizeFlushTimer = 0;
+    }
+    if (this._panAnimFrame) {
+      cancelAnimationFrame(this._panAnimFrame);
+      this._panAnimFrame = null;
+    }
     if (this._viewport) this._viewport.clear();
     if (this._drag) this._drag.destroy();
     if (this._zoom) this._zoom.destroy();

package/canvas/node-canvas.js

@@ -0,0 +1,6 @@
+import { NodeCanvas } from './NodeCanvas/NodeCanvas.js';
+import '../node/GraphNode/GraphNode.js';
+
+export { NodeCanvas };
+export { configureMaterialSymbols } from '../icons/MaterialSymbols.js';
+export default NodeCanvas;