pmx-canvas 0.1.2 → 0.1.3

package/src/client/nodes/ExtAppFrame.tsx

@@ -20,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, {
@@ -97,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);
@@ -122,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;
@@ -191,6 +226,8 @@ 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;
@@ -213,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' },
@@ -224,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 {};
       };
 
@@ -252,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);
@@ -333,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) => {
@@ -370,6 +433,9 @@ 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. Read current expanded state
       // at fire time so the widget keeps its fullscreen/inline context accurate.
@@ -378,12 +444,8 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
         if (firstFire) { firstFire = false; return; }
         if (disposed) return;
         bridge.setHostContext?.({
+          ...buildHostContext(),
           theme: toMcpTheme(newTheme),
-          platform: 'web',
-          containerDimensions: { maxHeight },
-          displayMode: expandedNodeId.value === nodeId ? 'fullscreen' : 'inline',
-          locale: navigator.language,
-          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         });
       });
 
@@ -399,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?.();
@@ -431,7 +499,10 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
     bridge.setHostContext?.({
       theme: toMcpTheme(canvasTheme.value),
       platform: 'web',
-      containerDimensions: { maxHeight },
+      containerDimensions: resolveExtAppContainerDimensions(iframeRef.current, {
+        width: node.size.width,
+        height: maxHeight,
+      }),
       displayMode: isExpanded ? 'fullscreen' : 'inline',
       locale: navigator.language,
       timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -470,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={{
@@ -546,14 +617,14 @@ export function ExtAppFrame({ node }: { node: CanvasNodeState }) {
           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 }}>
+      <div style={{ flex: 1, position: 'relative', display: 'flex', minHeight: 0, height: '100%' }}>
         <iframe
           key={frameKey}
           ref={iframeRef}
           srcdoc={html}
-          sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
+          sandbox={resolveExtAppSandbox(null)}
           allow={buildAllowAttribute(resourceMeta?.permissions)}
-          style={{ flex: 1, border: 'none', background: 'var(--c-panel)' }}
+          style={{ flex: 1, width: '100%', height: '100%', minHeight: 0, border: 'none', background: 'var(--c-panel)' }}
           title={`Ext App: ${toolName}`}
         />
         {!isExpanded && (

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[];

package/src/mcp/server.ts

@@ -348,6 +348,7 @@ export async function startMcpServer(): Promise<void> {
       mainTsx: z.string().optional().describe('Optional contents for src/main.tsx'),
       indexHtml: z.string().optional().describe('Optional contents for index.html'),
       files: z.record(z.string(), z.string()).optional().describe('Optional map of additional project-relative file paths to file contents'),
+      deps: z.array(z.string()).optional().describe('Optional npm dependencies to install before bundling (e.g. ["recharts", "framer-motion@^11"]). Validated against npm-name format; flags and shell metacharacters are rejected.'),
       projectPath: z.string().optional().describe('Optional workspace-relative reusable project path. Defaults to .pmx-canvas/artifacts/.web-artifacts/<slug>'),
       outputPath: z.string().optional().describe('Optional workspace-relative HTML output path. Defaults to .pmx-canvas/artifacts/<slug>.html'),
       openInCanvas: z.boolean().optional().describe('Open the generated artifact in canvas after build (default true)'),
@@ -366,6 +367,7 @@ export async function startMcpServer(): Promise<void> {
           ...(typeof input.mainTsx === 'string' ? { mainTsx: input.mainTsx } : {}),
           ...(typeof input.indexHtml === 'string' ? { indexHtml: input.indexHtml } : {}),
           ...(input.files ? { files: input.files } : {}),
+          ...(Array.isArray(input.deps) ? { deps: input.deps } : {}),
           ...(typeof input.projectPath === 'string'
             ? { projectPath: safeWorkspacePath(input.projectPath) }
             : {}),
@@ -672,13 +674,34 @@ export async function startMcpServer(): Promise<void> {
   // ── canvas_focus_node ──────────────────────────────────────────
   server.tool(
     'canvas_focus_node',
-    'Pan the viewport to center on a specific node.',
-    { id: z.string().describe('Node ID to focus on') },
-    async ({ id }) => {
+    'Bring a node into focus. By default the viewport pans so the node is centered. Pass noPan=true to raise/select the node without moving the human\'s camera (useful when reacting to background events without disrupting the human\'s current view).',
+    {
+      id: z.string().describe('Node ID to focus on'),
+      noPan: z
+        .boolean()
+        .optional()
+        .describe('If true, raise/select the node without panning the viewport. Default false.'),
+    },
+    async ({ id, noPan }) => {
       const c = await ensureCanvas();
-      c.focusNode(id);
+      const result = c.focusNode(id, { ...(noPan === true ? { noPan: true } : {}) });
+      if (!result) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({ ok: false, error: `Node "${id}" not found.` }),
+            },
+          ],
+        };
+      }
       return {
-        content: [{ type: 'text', text: JSON.stringify({ ok: true, focused: id }) }],
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({ ok: true, focused: result.focused, panned: result.panned }),
+          },
+        ],
       };
     },
   );

package/src/server/canvas-operations.ts

@@ -36,6 +36,7 @@ import {
   getWebpageFetchErrorDetails,
   normalizeWebpageUrl,
 } from './webpage-node.js';
+import { buildExcalidrawRestoreCheckpointToolInput, ensureExcalidrawCheckpointId, isExcalidrawCreateView } from './diagram-presets.js';
 
 export type CanvasArrangeMode = 'grid' | 'column' | 'flow';
 export type CanvasPinMode = 'set' | 'add' | 'remove';
@@ -82,6 +83,29 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return value !== null && typeof value === 'object' && !Array.isArray(value);
 }
 
+function getStoredExcalidrawCheckpointId(node: CanvasNodeState): string | null {
+  const appCheckpoint = isRecord(node.data.appCheckpoint) ? node.data.appCheckpoint : null;
+  const checkpointId = appCheckpoint?.id;
+  return typeof checkpointId === 'string' && checkpointId.trim().length > 0 ? checkpointId.trim() : null;
+}
+
+function resolveExtAppRehydratedToolInput(
+  node: CanvasNodeState,
+  openedToolInput: Record<string, unknown>,
+): Record<string, unknown> {
+  if (!isExcalidrawCreateView(node.data.serverName, node.data.toolName)) return openedToolInput;
+  const checkpointId = getStoredExcalidrawCheckpointId(node);
+  if (!checkpointId) return openedToolInput;
+  const appCheckpoint = isRecord(node.data.appCheckpoint) ? node.data.appCheckpoint : null;
+  return {
+    ...openedToolInput,
+    elements: buildExcalidrawRestoreCheckpointToolInput(
+      checkpointId,
+      typeof appCheckpoint?.data === 'string' ? appCheckpoint.data : undefined,
+    ),
+  };
+}
+
 function isExtAppNode(node: CanvasNodeState | undefined): node is CanvasNodeState {
   return node?.type === 'mcp-app' && node.data.mode === 'ext-app';
 }
@@ -280,13 +304,18 @@ export async function syncCanvasRuntimeBackends(
           ? { serverName: current.data.serverName.trim() }
           : {}),
       });
+      const toolInput = resolveExtAppRehydratedToolInput(current, opened.toolInput);
+      const storedCheckpointId = getStoredExcalidrawCheckpointId(current);
+      const toolResult = isExcalidrawCreateView(opened.serverName, opened.toolName)
+        ? ensureExcalidrawCheckpointId(opened.toolResult, nodeId, storedCheckpointId)
+        : opened.toolResult;
 
       canvasState.withSuppressedRecording(() => {
         setExtAppRuntimeState(nodeId, {
           appSessionId: opened.sessionId,
           html: opened.html,
-          toolInput: opened.toolInput,
-          toolResult: opened.toolResult,
+          toolInput,
+          toolResult,
           resourceUri: opened.resourceUri,
           toolDefinition: opened.tool,
           resourceMeta: opened.resourceMeta,
@@ -704,7 +733,7 @@ function collectArrangeExcludedNodeIds(nodes: CanvasNodeState[]): Set<string> {
   const excluded = new Set<string>();
   for (const node of nodes) {
     const parentGroup = typeof node.data.parentGroup === 'string' ? node.data.parentGroup : null;
-    if (isArrangeLocked(node) || (parentGroup && excludedGroupIds.has(parentGroup))) {
+    if (parentGroup || isArrangeLocked(node)) {
       excluded.add(node.id);
     }
   }
@@ -747,12 +776,13 @@ export function arrangeCanvasNodes(layout: CanvasArrangeMode): { arranged: numbe
       return;
     }
 
-    const cols = Math.max(1, Math.floor(1440 / (360 + gap)));
+    const maxNodeWidth = movableNodes.reduce((max, node) => Math.max(max, node.size.width), 360);
+    const cols = Math.max(1, Math.floor(1440 / (maxNodeWidth + gap)));
     let col = 0;
     let rowY = 80;
     let rowMaxHeight = 0;
     for (const node of movableNodes) {
-      const x = 40 + col * (360 + gap);
+      const x = 40 + col * (maxNodeWidth + gap);
       canvasState.updateNode(node.id, { position: { x, y: rowY } });
       rowMaxHeight = Math.max(rowMaxHeight, node.size.height);
       col++;

package/src/server/canvas-schema.ts

@@ -283,7 +283,7 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
         required: true,
         description: 'Chart type. Aliases like "stack" and "combo" are normalized server-side.',
       },
-      { name: 'data', type: 'Record<string, unknown>[]', required: true, description: 'Chart dataset.' },
+      { name: 'data', type: 'Record<string, unknown>[]', required: true, description: 'Chart dataset.', aliases: ['data-json'] },
       { name: 'title', type: 'string', required: false, description: 'Optional graph title.' },
       { name: 'xKey', type: 'string', required: false, description: 'X-axis/category key for line, bar, area, scatter, stacked-bar, and composed charts.' },
       { name: 'yKey', type: 'string', required: false, description: 'Y-axis value key for line, bar, area, and scatter charts. Also used as a fallback bar key for composed charts.' },
@@ -334,6 +334,7 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
       { name: 'outputPath', type: 'string', required: false, description: 'Optional output HTML path.' },
       { name: 'openInCanvas', type: 'boolean', required: false, description: 'Open the built artifact on the canvas (default true).' },
       { name: 'includeLogs', type: 'boolean', required: false, description: 'Include raw build stdout/stderr in the response (default false).' },
+      { name: 'deps', type: 'string[]', required: false, description: 'Optional npm dependencies to add before bundling, e.g. recharts.', aliases: ['deps'] },
     ],
     example: {
       title: 'Dashboard Artifact',