pmx-canvas 0.1.1 → 0.1.3

package/src/client/canvas/CanvasNode.tsx

@@ -143,9 +143,10 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const autoFitPersistTimer = useRef<number | null>(null);
   const AUTO_FIT_MAX = 600;
   const TITLEBAR_HEIGHT = 37;
+  const isExtAppNode = node.type === 'mcp-app' && node.data.mode === 'ext-app';
 
   useEffect(() => {
-    if (hasAutoFit.current || node.collapsed || node.dockPosition || node.type === 'group') return;
+    if (hasAutoFit.current || node.collapsed || node.dockPosition || node.type === 'group' || isExtAppNode) return;
     const body = bodyRef.current;
     if (!body) return;
 
@@ -180,7 +181,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         autoFitPersistTimer.current = null;
       }
     };
-  }, [node.id, node.type, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
+  }, [node.id, node.type, isExtAppNode, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
 
   const isPinned = node.pinned;
   const isTrace = node.type === 'trace';

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -15,6 +15,7 @@ import {
   contextPinnedNodeIds,
   expandedNodeId,
   nodes,
+  pendingExpandedNodeCloseId,
   toggleContextPin,
 } from '../state/canvas-store';
 import { TYPE_LABELS } from '../types';
@@ -115,6 +116,7 @@ export function ExpandedNodeOverlay() {
   const words = wordCount(textContent);
   const isCtxPinned = nodeId ? contextPinnedNodeIds.value.has(nodeId) : false;
   const hasText = textContent.length > 0;
+  const pendingClose = pendingExpandedNodeCloseId.value === nodeId;
 
   return (
     <div
@@ -130,6 +132,7 @@ export function ExpandedNodeOverlay() {
         alignItems: 'stretch',
         justifyContent: 'center',
         padding: '32px',
+        pointerEvents: pendingClose ? 'none' : 'auto',
       }}
     >
       <div
@@ -217,7 +220,9 @@ export function ExpandedNodeOverlay() {
             )}
           </div>
 
-          <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>Esc to close</span>
+          <span style={{ fontSize: '10px', color: pendingClose ? 'var(--c-warn)' : 'var(--c-muted)' }}>
+            {pendingClose ? 'Saving edits...' : 'Esc to close'}
+          </span>
           <button
             type="button"
             onClick={handleClose}

package/src/client/nodes/ExtAppFrame.tsx

@@ -2,6 +2,7 @@ import type { CallToolResult, ListToolsResult, RequestId, Tool } from '@modelcon
 import { ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { AppBridge, PostMessageTransport, buildAllowAttribute } from '@modelcontextprotocol/ext-apps/app-bridge';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { extAppToolResultsMatch } from '../../shared/ext-app-tool-result.js';
 import {
   canvasTheme,
   collapseExpandedNode,
@@ -19,6 +20,11 @@ type IframeLoadTarget = Pick<
 
 type ExtAppBridgeNotifications = Pick<AppBridge, 'sendToolInput' | 'sendToolResult'>;
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
+const DEFAULT_EXT_APP_SANDBOX = 'allow-scripts allow-popups allow-popups-to-escape-sandbox';
+
+interface ExtAppHostDimensionsTarget {
+  getBoundingClientRect(): Pick<DOMRectReadOnly, 'width' | 'height'>;
+}
 
 async function postJson<T>(url: string, body: Record<string, unknown>): Promise<T> {
   const response = await fetch(url, {
@@ -96,6 +102,33 @@ export async function sendExtAppBootstrapState(
   }
 }
 
+export function resolveExtAppSandbox(value: unknown): string {
+  return typeof value === 'string' && value.trim().length > 0
+    ? value.trim()
+    : DEFAULT_EXT_APP_SANDBOX;
+}
+
+function positiveDimension(value: number, fallback: number): number {
+  if (Number.isFinite(value) && value > 0) return Math.round(value);
+  if (Number.isFinite(fallback) && fallback > 0) return Math.round(fallback);
+  return 1;
+}
+
+export function resolveExtAppContainerDimensions(
+  target: ExtAppHostDimensionsTarget | null | undefined,
+  fallback: { width: number; height: number },
+): { width: number; height: number } {
+  const rect = target?.getBoundingClientRect();
+  return {
+    width: positiveDimension(rect?.width ?? 0, fallback.width),
+    height: positiveDimension(rect?.height ?? 0, fallback.height),
+  };
+}
+
+export function shouldApplyExtAppSizeChange(height: unknown, isExpanded: boolean): height is number {
+  return typeof height === 'number' && Number.isFinite(height) && height > 0 && !isExpanded;
+}
+
 export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const bridgeRef = useRef<AppBridge | null>(null);
@@ -103,6 +136,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const latestToolInputRef = useRef<Record<string, unknown>>({});
   const latestToolResultRef = useRef<CallToolResult | undefined>(undefined);
   const toolResultSentRef = useRef(false);
+  const lastSentToolResultRef = useRef<CallToolResult | undefined>(undefined);
   const toolResultSendingRef = useRef<Promise<void> | null>(null);
   const bridgeReadyRef = useRef(false);
   const themeUnsubRef = useRef<(() => void) | null>(null);
@@ -120,7 +154,10 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   const rawToolCallId = node.data.toolCallId;
   const toolCallId: RequestId | undefined =
     typeof rawToolCallId === 'string' || typeof rawToolCallId === 'number' ? rawToolCallId : undefined;
-  const resourceMeta = node.data.resourceMeta as { permissions?: Record<string, unknown> } | undefined;
+  const resourceMeta = node.data.resourceMeta as {
+    csp?: Record<string, unknown>;
+    permissions?: Record<string, unknown>;
+  } | undefined;
   const sessionStatus = node.data.sessionStatus as string | undefined;
   const sessionError = node.data.sessionError as string | undefined;
   const maxHeight = node.size.height;
@@ -140,13 +177,33 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
 
   const flushToolResult = (bridge: AppBridge | null): Promise<void> | null => {
     const pendingToolResult = latestToolResultRef.current;
-    if (!bridge || !bridgeReadyRef.current || !pendingToolResult || toolResultSentRef.current) {
+    if (!bridge || !bridgeReadyRef.current || !pendingToolResult) {
+      return null;
+    }
+    // Skip when the content is unchanged. Updates from callServerTool
+    // (e.g. Excalidraw saving edits) produce a new reference via SSE and
+    // must be forwarded to keep other clients in sync — but SSE layout
+    // updates *also* mint new references when nothing in the tool result
+    // has actually changed (e.g. after the widget's own updateModelContext
+    // call), which would echo the result back and cause the widget to
+    // re-render mid-interaction (see: Counter fixture click instability).
+    // Deep-equality via structural compare handles both cases: new content
+    // is forwarded, unchanged content is suppressed.
+    if (lastSentToolResultRef.current === pendingToolResult) {
+      return null;
+    }
+    if (
+      lastSentToolResultRef.current &&
+      extAppToolResultsMatch(lastSentToolResultRef.current, pendingToolResult)
+    ) {
+      lastSentToolResultRef.current = pendingToolResult;
       return null;
     }
     if (toolResultSendingRef.current) return toolResultSendingRef.current;
     const sendPromise = bridge
       .sendToolResult(pendingToolResult)
       .then(() => {
+        lastSentToolResultRef.current = pendingToolResult;
         toolResultSentRef.current = true;
         setStatus('done');
       })
@@ -169,7 +226,10 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     if (!iframe) return;
     let disposed = false;
     let fallbackTimer: ReturnType<typeof setTimeout> | null = null;
+    let hostContextResizeObserver: ResizeObserver | null = null;
+    let hostContextRaf: number | null = null;
     toolResultSentRef.current = false;
+    lastSentToolResultRef.current = undefined;
     toolResultSendingRef.current = null;
     bridgeReadyRef.current = false;
 
@@ -190,6 +250,33 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         throw new Error('Ext-app iframe window is unavailable');
       }
 
+      const buildHostContext = (displayMode: DisplayMode = expandedNodeId.value === nodeId ? 'fullscreen' : 'inline') => ({
+        theme: toMcpTheme(canvasTheme.value),
+        platform: 'web' as const,
+        containerDimensions: resolveExtAppContainerDimensions(iframe, {
+          width: node.size.width,
+          height: maxHeight,
+        }),
+        displayMode,
+        locale: navigator.language,
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        ...(toolDefinition ? {
+          toolInfo: {
+            id: toolCallId,
+            tool: toolDefinition,
+          },
+        } : {}),
+      });
+
+      const scheduleHostContextUpdate = () => {
+        if (hostContextRaf !== null) return;
+        hostContextRaf = requestAnimationFrame(() => {
+          hostContextRaf = null;
+          if (disposed || !bridgeReadyRef.current) return;
+          bridge.setHostContext?.(buildHostContext());
+        });
+      };
+
       const bridge = new AppBridge(
         null,
         { name: 'PMX Canvas', version: '1.0.0' },
@@ -201,26 +288,15 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
           updateModelContext: { text: {}, structuredContent: {} },
         },
         {
-          hostContext: {
-            theme: toMcpTheme(canvasTheme.value),
-            platform: 'web',
-            containerDimensions: { maxHeight },
-            displayMode: isExpanded ? 'fullscreen' : 'inline',
-            locale: navigator.language,
-            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            ...(toolDefinition ? {
-              toolInfo: {
-                id: toolCallId,
-                tool: toolDefinition,
-              },
-            } : {}),
-          },
+          hostContext: buildHostContext(isExpanded ? 'fullscreen' : 'inline'),
         },
       );
 
       // Register handlers BEFORE connect
       bridge.onsizechange = async ({ height }) => {
-        if (height && iframe) iframe.style.height = `${height}px`;
+        if (shouldApplyExtAppSizeChange(height, expandedNodeId.value === nodeId)) {
+          iframe.style.height = `${height}px`;
+        }
         return {};
       };
 
@@ -229,6 +305,15 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         return {};
       };
 
+      bridge.onsandboxready = async () => {
+        await bridge.sendSandboxResourceReady({
+          html,
+          sandbox: DEFAULT_EXT_APP_SANDBOX,
+          ...(resourceMeta?.csp ? { csp: resourceMeta.csp } : {}),
+          ...(resourceMeta?.permissions ? { permissions: resourceMeta.permissions } : {}),
+        });
+      };
+
       // Handle native fullscreen requests from the widget (e.g. Excalidraw expand button)
       bridge.onrequestdisplaymode = async ({ mode }) => {
         const { nextMode, shouldExpand, shouldCollapse } = resolveExtAppDisplayModeRequest(mode, isExpanded);
@@ -310,6 +395,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         bridgeReadyRef.current = true;
         setStatus('ready');
         setError(null);
+        scheduleHostContextUpdate();
         void sendExtAppBootstrapState(bridge, latestToolInputRef.current, undefined)
           .then(() => flushToolResult(bridge))
           .catch((err) => {
@@ -323,10 +409,14 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
       // handshake timing differs across SDK versions.
       fallbackTimer = setTimeout(() => {
         if (disposed || bridgeReadyRef.current) return;
-        void sendExtAppBootstrapState(bridge, latestToolInputRef.current, latestToolResultRef.current)
+        const bootstrapToolResult = latestToolResultRef.current;
+        void sendExtAppBootstrapState(bridge, latestToolInputRef.current, bootstrapToolResult)
           .then(() => {
-            toolResultSentRef.current = Boolean(latestToolResultRef.current);
-            setStatus(latestToolResultRef.current ? 'done' : 'ready');
+            toolResultSentRef.current = Boolean(bootstrapToolResult);
+            if (bootstrapToolResult) {
+              lastSentToolResultRef.current = bootstrapToolResult;
+            }
+            setStatus(bootstrapToolResult ? 'done' : 'ready');
             setError(null);
           })
           .catch((err) => {
@@ -343,19 +433,19 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
       }
       bridgeRef.current = bridge;
       transportRef.current = transport;
+      hostContextResizeObserver = new ResizeObserver(scheduleHostContextUpdate);
+      hostContextResizeObserver.observe(iframe);
+      if (iframe.parentElement) hostContextResizeObserver.observe(iframe.parentElement);
 
-      // Propagate theme changes to ext-app iframe
+      // Propagate theme changes to ext-app iframe. Read current expanded state
+      // at fire time so the widget keeps its fullscreen/inline context accurate.
       let firstFire = true;
       themeUnsubRef.current = canvasTheme.subscribe((newTheme) => {
         if (firstFire) { firstFire = false; return; }
         if (disposed) return;
         bridge.setHostContext?.({
+          ...buildHostContext(),
           theme: toMcpTheme(newTheme),
-          platform: 'web',
-          containerDimensions: { maxHeight },
-          displayMode: 'inline',
-          locale: navigator.language,
-          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         });
       });
 
@@ -371,6 +461,12 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     return () => {
       disposed = true;
       clearFallbackTimer();
+      hostContextResizeObserver?.disconnect();
+      hostContextResizeObserver = null;
+      if (hostContextRaf !== null) {
+        cancelAnimationFrame(hostContextRaf);
+        hostContextRaf = null;
+      }
       bridgeReadyRef.current = false;
       toolResultSendingRef.current = null;
       themeUnsubRef.current?.();
@@ -392,6 +488,27 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     }
   }, [toolResult, status]);
 
+  // Keep the widget's displayMode in sync when the host expands or collapses
+  // the node. Without this, a widget that opened in inline mode would never
+  // learn that it is now fullscreen (and vice versa), so features gated on
+  // fullscreen (like Excalidraw's edit mode) would not activate on the same
+  // click that triggered the expansion.
+  useEffect(() => {
+    const bridge = bridgeRef.current;
+    if (!bridge || !bridgeReadyRef.current) return;
+    bridge.setHostContext?.({
+      theme: toMcpTheme(canvasTheme.value),
+      platform: 'web',
+      containerDimensions: resolveExtAppContainerDimensions(iframeRef.current, {
+        width: node.size.width,
+        height: maxHeight,
+      }),
+      displayMode: isExpanded ? 'fullscreen' : 'inline',
+      locale: navigator.language,
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    });
+  }, [isExpanded, maxHeight]);
+
   // Loading state — HTML not yet fetched
   if (!html) {
     return (
@@ -424,7 +541,7 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
   }
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
       {sessionStatus && sessionStatus !== 'ready' && (
         <div
           style={{
@@ -493,17 +610,45 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
           Connecting to ext-app viewer...
         </div>
       )}
-      {/* allow-scripts only (no allow-same-origin) — srcdoc gets opaque origin,
-          cannot access host cookies/storage/DOM. Communication via postMessage only. */}
-      <iframe
-        key={frameKey}
-        ref={iframeRef}
-        srcdoc={html}
-        sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
-        allow={buildAllowAttribute(resourceMeta?.permissions)}
-        style={{ flex: 1, border: 'none', background: 'var(--c-panel)' }}
-        title={`Ext App: ${toolName}`}
-      />
+      {/* Iframe stack: the widget renders a preview; when not expanded, a
+          transparent click-catcher sits on top so the first click always
+          expands the node. Without this, widgets like Excalidraw show their
+          own "Edit" button inline, which triggers a fullscreen request and
+          remounts the iframe in the overlay — forcing the user to click Edit
+          a second time to actually enter edit mode. Routing all inline clicks
+          to "expand" makes the flow "open → edit" instead of "edit → expand → edit". */}
+      <div style={{ flex: 1, position: 'relative', display: 'flex', minHeight: 0, height: '100%' }}>
+        <iframe
+          key={frameKey}
+          ref={iframeRef}
+          srcdoc={html}
+          sandbox={resolveExtAppSandbox(null)}
+          allow={buildAllowAttribute(resourceMeta?.permissions)}
+          style={{ flex: 1, width: '100%', height: '100%', minHeight: 0, border: 'none', background: 'var(--c-panel)' }}
+          title={`Ext App: ${toolName}`}
+        />
+        {!isExpanded && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              expandNode(nodeId);
+            }}
+            class="ext-app-preview-catcher"
+            title="Click to open"
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'transparent',
+              border: 'none',
+              padding: 0,
+              margin: 0,
+              cursor: 'zoom-in',
+            }}
+            aria-label="Open full view to edit"
+          />
+        )}
+      </div>
     </div>
   );
 }

package/src/client/state/canvas-store.ts

@@ -1,5 +1,5 @@
 import { batch, computed, signal } from '@preact/signals';
-import type { CanvasEdge, CanvasLayout, CanvasNodeState, ConnectionStatus, ViewportState } from '../types';
+import { isExcalidrawNode, type CanvasEdge, type CanvasLayout, type CanvasNodeState, type ConnectionStatus, type ViewportState } from '../types';
 import { computeAutoArrange } from '../../shared/auto-arrange';
 import { pushCanvasUpdate, updateViewportFromClient } from './intent-bridge';
 
@@ -22,6 +22,11 @@ export const hasInitialServerLayout = signal<boolean>(false);
 // Only one node at a time can be in expanded/focus mode. When expanded, the
 // node renders as a full-viewport overlay for deep editing/reading.
 export const expandedNodeId = signal<string | null>(null);
+export const pendingExpandedNodeCloseId = signal<string | null>(null);
+let expandedCloseTimer: ReturnType<typeof setTimeout> | null = null;
+let pendingCloseInitialCheckpointAt: unknown = undefined;
+const EXCALIDRAW_CLOSE_POLL_MS = 100;
+const EXCALIDRAW_CLOSE_MAX_WAIT_MS = 2500;
 
 // ── Pending edge connection (for context menu "Connect from") ─
 export const pendingConnection = signal<{ from: string } | null>(null);
@@ -192,6 +197,14 @@ export function updateNode(id: string, patch: Partial<CanvasNodeState>): void {
   }
   next.set(id, { ...existing, ...patch });
   nodes.value = next;
+  const updatedAt = (next.get(id)?.data.appCheckpoint as { updatedAt?: unknown } | undefined)?.updatedAt;
+  if (
+    pendingExpandedNodeCloseId.value === id &&
+    updatedAt !== undefined &&
+    updatedAt !== pendingCloseInitialCheckpointAt
+  ) {
+    finishExpandedNodeClose(id);
+  }
 }
 
 export function updateNodeData(id: string, dataPatch: Record<string, unknown>): void {
@@ -585,11 +598,60 @@ export function walkGraph(direction: 'up' | 'down' | 'left' | 'right'): void {
 export function expandNode(id: string): void {
   const node = nodes.value.get(id);
   if (!node) return;
+  if (expandedCloseTimer !== null) {
+    clearTimeout(expandedCloseTimer);
+    expandedCloseTimer = null;
+  }
+  pendingExpandedNodeCloseId.value = null;
+  pendingCloseInitialCheckpointAt = undefined;
   bringToFront(id);
   expandedNodeId.value = id;
 }
 
+function finishExpandedNodeClose(nodeId: string): void {
+  if (expandedCloseTimer !== null) {
+    clearTimeout(expandedCloseTimer);
+    expandedCloseTimer = null;
+  }
+  if (expandedNodeId.value === nodeId) expandedNodeId.value = null;
+  if (pendingExpandedNodeCloseId.value === nodeId) pendingExpandedNodeCloseId.value = null;
+  pendingCloseInitialCheckpointAt = undefined;
+}
+
 export function collapseExpandedNode(): void {
+  const nodeId = expandedNodeId.value;
+  const node = nodeId ? nodes.value.get(nodeId) : undefined;
+  if (nodeId && node && isExcalidrawNode(node)) {
+    const closingNodeId = nodeId;
+    const startedAt = Date.now();
+    pendingExpandedNodeCloseId.value = closingNodeId;
+    pendingCloseInitialCheckpointAt = (node.data.appCheckpoint as { updatedAt?: unknown } | undefined)?.updatedAt;
+    if (expandedCloseTimer !== null) clearTimeout(expandedCloseTimer);
+    const pollForSave = () => {
+      const latestNode = nodes.value.get(closingNodeId);
+      const latestCheckpointAt = (latestNode?.data.appCheckpoint as { updatedAt?: unknown } | undefined)?.updatedAt;
+      if (
+        latestCheckpointAt !== undefined &&
+        latestCheckpointAt !== pendingCloseInitialCheckpointAt
+      ) {
+        finishExpandedNodeClose(closingNodeId);
+        return;
+      }
+      if (Date.now() - startedAt >= EXCALIDRAW_CLOSE_MAX_WAIT_MS) {
+        finishExpandedNodeClose(closingNodeId);
+        return;
+      }
+      expandedCloseTimer = setTimeout(pollForSave, EXCALIDRAW_CLOSE_POLL_MS);
+    };
+    expandedCloseTimer = setTimeout(pollForSave, EXCALIDRAW_CLOSE_POLL_MS);
+    return;
+  }
+  if (expandedCloseTimer !== null) {
+    clearTimeout(expandedCloseTimer);
+    expandedCloseTimer = null;
+  }
+  pendingExpandedNodeCloseId.value = null;
+  pendingCloseInitialCheckpointAt = undefined;
   expandedNodeId.value = null;
 }
 

package/src/client/state/sse-bridge.ts

@@ -6,6 +6,7 @@ import {
   addEdge,
   addNode,
   applyServerCanvasLayout,
+  bringToFront,
   cancelViewportAnimation,
   canvasTheme,
   connectionStatus,
@@ -827,6 +828,10 @@ function reconnectDelayMs(attempt: number): number {
 function handleCanvasFocusNode(data: Record<string, unknown>): void {
   const nodeId = data.nodeId as string;
   if (nodeId && nodes.value.has(nodeId)) {
+    if (data.noPan === true) {
+      bringToFront(nodeId);
+      return;
+    }
     focusNode(nodeId);
   }
 }

package/src/client/types.ts

@@ -74,6 +74,18 @@ export const EXPANDABLE_TYPES = new Set<CanvasNodeState['type']>([
   'image',
 ]);
 
+export const EXCALIDRAW_SERVER_NAME = 'Excalidraw';
+export const EXCALIDRAW_CREATE_VIEW_TOOL = 'create_view';
+
+export function isExcalidrawNode(node: CanvasNodeState): boolean {
+  return (
+    node.type === 'mcp-app' &&
+    node.data.mode === 'ext-app' &&
+    node.data.serverName === EXCALIDRAW_SERVER_NAME &&
+    node.data.toolName === EXCALIDRAW_CREATE_VIEW_TOOL
+  );
+}
+
 export interface CanvasLayout {
   viewport: ViewportState;
   nodes: CanvasNodeState[];