pmx-canvas 0.1.19 → 0.1.21

package/src/client/canvas/CanvasViewport.tsx

@@ -102,6 +102,7 @@ function findAnnotationAtPoint(
       point.y < annotation.bounds.y - pad ||
       point.y > annotation.bounds.y + annotation.bounds.height + pad
     ) continue;
+    if (annotation.type === 'text') return annotation;
     for (let index = 1; index < annotation.points.length; index++) {
       const start = annotation.points[index - 1];
       const end = annotation.points[index];
@@ -122,19 +123,27 @@ interface LassoRect {
 
 interface AnnotationDraft {
   id: string;
-  type: 'freehand';
+  type: 'freehand' | 'text';
   points: Array<{ x: number; y: number }>;
   bounds: { x: number; y: number; width: number; height: number };
   color: string;
   width: number;
+  text?: string;
   createdAt: string;
 }
 
+interface TextAnnotationDraft {
+  x: number;
+  y: number;
+  value: string;
+}
+
 const ANNOTATION_COLOR = 'currentColor';
 const ANNOTATION_WIDTH = 4;
+const TEXT_ANNOTATION_WIDTH = 24;
 const ERASER_HIT_RADIUS = 14;
 
-type AnnotationTool = 'pen' | 'eraser' | null;
+type AnnotationTool = 'pen' | 'eraser' | 'text' | null;
 
 interface CanvasViewportProps {
   onNodeContextMenu?: (e: MouseEvent, nodeId: string) => void;
@@ -233,6 +242,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
   const annotationPoints = useRef<Array<{ x: number; y: number }>>([]);
   const [lasso, setLasso] = useState<LassoRect | null>(null);
   const [draftAnnotation, setDraftAnnotation] = useState<AnnotationDraft | null>(null);
+  const [textDraft, setTextDraftState] = useState<TextAnnotationDraft | null>(null);
+  const textDraftRef = useRef<TextAnnotationDraft | null>(null);
   const [dropActive, setDropActive] = useState(false);
   const dropCounter = useRef(0);
   // Ref mirrors lasso state so pointer handlers always read the latest value
@@ -256,6 +267,11 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
     },
   });
 
+  const setTextDraft = useCallback((next: TextAnnotationDraft | null) => {
+    textDraftRef.current = next;
+    setTextDraftState(next);
+  }, []);
+
   const createWebpageNodes = useCallback(async (urls: string[], centerX: number, centerY: number) => {
     if (urls.length === 0) return;
 
@@ -305,6 +321,23 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         return;
       }
 
+      if (annotationTool === 'text') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        activeNodeId.value = null;
+        clearSelection();
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        setTextDraft({
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+          value: '',
+        });
+        return;
+      }
+
       if (annotationTool === 'pen') {
         const target = e.target instanceof Element ? e.target : null;
         if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
@@ -450,11 +483,32 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
 
   useEffect(() => {
     if (annotationMode) return;
-    if (!isAnnotating.current && !draftAnnotation) return;
+    if (!isAnnotating.current && !draftAnnotation && !textDraft) return;
     isAnnotating.current = false;
     annotationPoints.current = [];
     setDraftAnnotation(null);
-  }, [annotationMode, draftAnnotation]);
+    setTextDraft(null);
+  }, [annotationMode, draftAnnotation, setTextDraft, textDraft]);
+
+  const commitTextDraft = useCallback(() => {
+    const draft = textDraftRef.current;
+    if (!draft) return;
+    const text = draft.value.trim();
+    setTextDraft(null);
+    if (!text) return;
+    const point = { x: draft.x, y: draft.y };
+    void createAnnotationFromClient({
+      type: 'text',
+      points: [point],
+      color: ANNOTATION_COLOR,
+      width: TEXT_ANNOTATION_WIDTH,
+      text,
+    });
+  }, [setTextDraft]);
+
+  useEffect(() => {
+    if (annotationTool !== 'text' && textDraft) setTextDraft(null);
+  }, [annotationTool, setTextDraft, textDraft]);
 
   // ── Drag-to-connect: track cursor in world space, hit-test on drop ──
   useEffect(() => {
@@ -517,8 +571,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
       const wx = (e.clientX - rect.left - v.x) / v.scale;
       const wy = (e.clientY - rect.top - v.y) / v.scale;
       // Offset so node centers on click point
-      const nodeW = 360;
-      const nodeH = 200;
+      const nodeW = 520;
+      const nodeH = 360;
       createNodeFromClient({
         type: 'markdown',
         title: 'New note',
@@ -697,6 +751,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         overflow: 'hidden',
         cursor: annotationTool === 'eraser'
           ? 'cell'
+          : annotationTool === 'text'
+            ? 'text'
           : annotationMode || draggingEdge.value || isLassoing.current
             ? 'crosshair'
             : 'grab',
@@ -737,7 +793,32 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
           </svg>
         )}
       </div>
-      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}`} aria-hidden="true" />}
+      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}${annotationTool === 'text' ? ' text' : ''}`} aria-hidden="true" />}
+      {textDraft && (
+        <input
+          class="annotation-text-input"
+          value={textDraft.value}
+          autoFocus
+          style={{
+            left: `${textDraft.x * v.scale + v.x}px`,
+            top: `${textDraft.y * v.scale + v.y}px`,
+            fontSize: `${TEXT_ANNOTATION_WIDTH * v.scale}px`,
+          }}
+          onInput={(e) => setTextDraft({ ...textDraft, value: (e.target as HTMLInputElement).value })}
+          onBlur={commitTextDraft}
+          onPointerDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commitTextDraft();
+            }
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              setTextDraft(null);
+            }
+          }}
+        />
+      )}
       {lassoStyle && <div class="lasso-rect" style={lassoStyle} />}
       {dropActive && (
         <div class="drop-zone-overlay">

package/src/client/canvas/CommandPalette.tsx

@@ -135,7 +135,7 @@ export function CommandPalette({
 
     // Action items
     const actions: Array<{ label: string; badge: string; action: () => void }> = [
-      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note' }); onClose(); } },
+      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note', width: 520, height: 360 }); onClose(); } },
       { label: 'Fit all nodes', badge: 'VIEW', action: () => { fitAll(window.innerWidth, window.innerHeight); onClose(); } },
       { label: 'Auto-arrange (grid)', badge: 'LAYOUT', action: () => { autoArrange(); onClose(); } },
       { label: 'Auto-arrange (graph-aware)', badge: 'LAYOUT', action: () => { forceDirectedArrange(); onClose(); } },
@@ -145,9 +145,9 @@ export function CommandPalette({
         badge: 'THEME',
         action: () => {
           const next = canvasTheme.value === 'dark' ? 'light' : 'dark';
-          canvasTheme.value = next;
           document.documentElement.setAttribute('data-theme', next);
           invalidateTokenCache();
+          canvasTheme.value = next;
           onClose();
         },
       },

package/src/client/canvas/ContextMenu.tsx

@@ -319,8 +319,8 @@ function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
     {
       label: 'New note',
       action: () => {
-        const width = 360;
-        const height = 200;
+        const width = 520;
+        const height = 360;
         const position = centeredPosition(canvasX, canvasY, width, height);
         void createNodeFromClient({
           type: 'markdown',

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { ContextNode } from '../nodes/ContextNode';
 import { FileNode } from '../nodes/FileNode';
 import { LedgerNode } from '../nodes/LedgerNode';
@@ -7,7 +7,7 @@ import { McpAppNode } from '../nodes/McpAppNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
 import { WebpageNode } from '../nodes/WebpageNode';
-import { HtmlNode } from '../nodes/HtmlNode';
+import { HtmlNode, shouldShowPresentationControls } from '../nodes/HtmlNode';
 import { PromptNode } from '../nodes/PromptNode';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
@@ -81,15 +81,62 @@ function wordCount(text: string): number {
   return text.split(/\s+/).filter(Boolean).length;
 }
 
+function isPresentationExitMessage(value: unknown, token: string): boolean {
+  return value !== null &&
+    typeof value === 'object' &&
+    (value as { source?: unknown }).source === 'pmx-canvas-html-node' &&
+    (value as { type?: unknown }).type === 'presentation-exit' &&
+    (value as { token?: unknown }).token === token;
+}
+
+function isPresentationNavigationKey(key: string): boolean {
+  return key === 'ArrowRight' || key === 'PageDown' || key === ' ' || key === 'ArrowLeft' || key === 'PageUp' || key === 'Home' || key === 'End';
+}
+
 export function ExpandedNodeOverlay() {
   const nodeId = expandedNodeId.value;
   const node = nodeId ? nodes.value.get(nodeId) : undefined;
   const [copied, setCopied] = useState(false);
+  const [presenting, setPresenting] = useState(false);
+  const [presentationExitToken, setPresentationExitToken] = useState('');
+  const presentationOverlayRef = useRef<HTMLDivElement>(null);
 
   const handleClose = useCallback(() => {
+    setPresenting(false);
     collapseExpandedNode();
   }, []);
 
+  const handlePresent = useCallback(() => {
+    setPresentationExitToken(`presentation-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`);
+    setPresenting(true);
+  }, []);
+
+  const postPresentationMessage = useCallback((message: Record<string, unknown>) => {
+    const frame = document.querySelector<HTMLIFrameElement>('.html-presentation-overlay iframe.html-node-frame-presentation');
+    frame?.contentWindow?.postMessage({
+      source: 'pmx-canvas-html-node',
+      token: presentationExitToken,
+      ...message,
+    }, '*');
+  }, [presentationExitToken]);
+
+  const handleExitPresentation = useCallback(() => {
+    setPresenting(false);
+  }, []);
+
+  const handlePresentationKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      setPresenting(false);
+      return;
+    }
+    if (!isPresentationNavigationKey(event.key)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    postPresentationMessage({ type: 'presentation-key', key: event.key });
+  }, [postPresentationMessage]);
+
   const handleBackdropPointerDown = useCallback((e: PointerEvent) => {
     if ((e.target as HTMLElement).classList.contains('expanded-overlay-backdrop')) {
       collapseExpandedNode();
@@ -111,6 +158,29 @@ export function ExpandedNodeOverlay() {
     toggleContextPin(nodeId);
   }, [nodeId]);
 
+  useEffect(() => {
+    setPresenting(false);
+  }, [nodeId]);
+
+  useLayoutEffect(() => {
+    if (!presenting) return;
+    const focusPresentationOverlay = () => {
+      presentationOverlayRef.current?.focus();
+    };
+    const focusTimers = [0, 50, 150].map((delay) => window.setTimeout(focusPresentationOverlay, delay));
+    const handleMessage = (event: MessageEvent) => {
+      if (!isPresentationExitMessage(event.data, presentationExitToken)) return;
+      setPresenting(false);
+    };
+    document.addEventListener('keydown', handlePresentationKeyDown, true);
+    window.addEventListener('message', handleMessage);
+    return () => {
+      focusTimers.forEach((timer) => window.clearTimeout(timer));
+      document.removeEventListener('keydown', handlePresentationKeyDown, true);
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [handlePresentationKeyDown, presentationExitToken, presenting]);
+
   if (!node) return null;
 
   const title =
@@ -122,6 +192,8 @@ export function ExpandedNodeOverlay() {
   const isCtxPinned = nodeId ? contextPinnedNodeIds.value.has(nodeId) : false;
   const hasText = textContent.length > 0;
   const pendingClose = pendingExpandedNodeCloseId.value === nodeId;
+  const isEmbeddedViewer = node.type === 'mcp-app' || node.type === 'webpage' || node.type === 'json-render' || node.type === 'graph';
+  const canPresent = shouldShowPresentationControls(node);
 
   return (
     <div
@@ -217,6 +289,17 @@ export function ExpandedNodeOverlay() {
               </button>
             )}
 
+            {canPresent && (
+              <button
+                type="button"
+                class="expanded-action-btn expanded-action-primary"
+                onClick={handlePresent}
+                title="Present this HTML node fullscreen"
+              >
+                Present
+              </button>
+            )}
+
             {/* Word count */}
             {words > 0 && (
               <span class="expanded-meta">
@@ -260,10 +343,36 @@ export function ExpandedNodeOverlay() {
             overflow: 'auto',
             padding: '16px',
             minHeight: 0,
+            ...(isEmbeddedViewer ? { display: 'flex', flexDirection: 'column' } : {}),
           }}
         >
-          {renderContent(node, true)}
+          {isEmbeddedViewer ? (
+            <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+              {renderContent(node, true)}
+            </div>
+          ) : renderContent(node, true)}
         </div>
+        {canPresent && presenting && (
+          <div ref={presentationOverlayRef} class="html-presentation-overlay" role="dialog" aria-modal="true" aria-label={`Present ${title}`} tabIndex={-1} onKeyDownCapture={handlePresentationKeyDown}>
+            <div class="html-presentation-toolbar">
+              <div>
+                <div class="html-presentation-kicker">HTML presentation</div>
+                <div class="html-presentation-title">{title}</div>
+              </div>
+              <button
+                type="button"
+                class="html-presentation-exit"
+                onClick={handleExitPresentation}
+                title="Exit presentation (Esc)"
+              >
+                Exit presentation
+              </button>
+            </div>
+            <div class="html-presentation-stage">
+              <HtmlNode node={node} expanded presentation presentationExitToken={presentationExitToken} />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/client/canvas/auto-fit.ts

@@ -11,8 +11,12 @@ function hasExplicitStructuredFrame(node: CanvasNodeState): boolean {
   return node.type === 'graph' || node.type === 'json-render';
 }
 
+function isPresentationHtmlNode(node: CanvasNodeState): boolean {
+  return node.type === 'html' && node.data.presentation === true;
+}
+
 export function shouldAutoFitNode(node: CanvasNodeState): boolean {
-  return !node.collapsed && !node.dockPosition && node.data.strictSize !== true && node.type !== 'group' && !isExtAppNode(node) && !hasExplicitStructuredFrame(node);
+  return !node.collapsed && !node.dockPosition && node.data.strictSize !== true && node.type !== 'group' && !isExtAppNode(node) && !hasExplicitStructuredFrame(node) && !isPresentationHtmlNode(node);
 }
 
 export function computeAutoFitHeight(node: CanvasNodeState, contentHeight: number): number | null {

package/src/client/icons.tsx

@@ -139,6 +139,19 @@ export function IconEraser(p: IconProps): JSX.Element {
   );
 }
 
+/** Text cursor — canvas text annotation mode */
+export function IconTextAnnotation(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 4h10" />
+      <path d="M8 4v8" />
+      <path d="M6 12h4" />
+      <path d="M4.5 4 4 6" />
+      <path d="M11.5 4 12 6" />
+    </Icon>
+  );
+}
+
 /** Camera — snapshots */
 export function IconSnapshot(p: IconProps): JSX.Element {
   return (

package/src/client/nodes/HtmlNode.tsx

@@ -1,4 +1,5 @@
-import { useMemo } from 'preact/hooks';
+import { useEffect, useMemo, useRef } from 'preact/hooks';
+import { canvasTheme } from '../state/canvas-store';
 import { getCanvasTokens } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 
@@ -95,28 +96,135 @@ function buildThemeStyleBlock(): string {
  * a `<head>`, inject at the top of head; otherwise wrap the content in a full
  * document. Returns a complete HTML string suitable for `srcdoc`.
  */
-function buildSrcDoc(userHtml: string): string {
-  const styleBlock = `<style data-pmx-canvas-theme>${buildThemeStyleBlock()}</style>`;
+function buildPresentationEscapeBridge(exitToken?: string): string {
+  const token = JSON.stringify(exitToken ?? '');
+  return `<script data-pmx-canvas-presentation-bridge>
+const PMX_CANVAS_PRESENTATION_EXIT_TOKEN = ${token};
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    window.parent.postMessage({ source: 'pmx-canvas-html-node', type: 'presentation-exit', token: PMX_CANVAS_PRESENTATION_EXIT_TOKEN }, '*');
+  }
+}, true);
+window.addEventListener('message', (event) => {
+  const message = event.data;
+  if (!message || message.source !== 'pmx-canvas-html-node' || message.type !== 'presentation-key' || message.token !== PMX_CANVAS_PRESENTATION_EXIT_TOKEN) return;
+  if (typeof message.key !== 'string') return;
+  if (typeof window.PMX_CANVAS_PRESENTATION_HANDLE_KEY === 'function') {
+    window.PMX_CANVAS_PRESENTATION_HANDLE_KEY(message.key);
+    return;
+  }
+  document.dispatchEvent(new CustomEvent('pmx-presentation-key', { detail: { key: message.key }, bubbles: true, cancelable: true }));
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: message.key, bubbles: true, cancelable: true }));
+});
+</script>`;
+}
+
+function buildThemeBridge(themeToken: string): string {
+  const token = JSON.stringify(themeToken);
+  return `<script data-pmx-canvas-theme-bridge>
+const PMX_CANVAS_THEME_TOKEN = ${token};
+window.addEventListener('message', (event) => {
+  const message = event.data;
+  if (!message || message.source !== 'pmx-canvas-html-node' || message.type !== 'theme-update' || message.token !== PMX_CANVAS_THEME_TOKEN) return;
+  if (typeof message.css !== 'string' || typeof message.theme !== 'string') return;
+  let style = document.querySelector('style[data-pmx-canvas-theme]');
+  if (!style) {
+    style = document.createElement('style');
+    style.setAttribute('data-pmx-canvas-theme', '');
+    document.head.prepend(style);
+  }
+  style.textContent = message.css;
+  document.documentElement.setAttribute('data-pmx-canvas-theme', message.theme);
+  document.documentElement.setAttribute('data-theme', message.theme);
+});
+</script>`;
+}
+
+function injectIntoHead(html: string, content: string): string {
+  if (/<head[\s>]/i.test(html)) {
+    return html.replace(/<head([^>]*)>/i, `<head$1>${content}`);
+  }
+  if (/<html[\s>]/i.test(html)) {
+    return html.replace(/<html([^>]*)>/i, `<html$1><head>${content}</head>`);
+  }
+  return html;
+}
+
+function buildSrcDoc(userHtml: string, options: { presentation?: boolean; presentationExitToken?: string; themeToken: string; themeCss: string; theme: string }): string {
+  const styleBlock = `<style data-pmx-canvas-theme>${options.themeCss}</style>`;
+  const themeBridge = buildThemeBridge(options.themeToken);
+  const presentationBridge = options.presentation ? buildPresentationEscapeBridge(options.presentationExitToken) : '';
+  const injectedHeadContent = `${styleBlock}${themeBridge}${presentationBridge}`;
+  const presentationAttr = options.presentation ? ' data-pmx-presentation-mode="present"' : '';
   const trimmed = userHtml.trim();
   const isFullDoc = /<html[\s>]/i.test(trimmed);
   if (isFullDoc) {
-    if (/<head[\s>]/i.test(trimmed)) {
-      return trimmed.replace(/<head([^>]*)>/i, `<head$1>${styleBlock}`);
-    }
-    // Has <html> but no <head> — inject one.
-    return trimmed.replace(/<html([^>]*)>/i, `<html$1><head>${styleBlock}</head>`);
+    const withTheme = trimmed.replace(/<html([^>]*)>/i, `<html$1 data-pmx-canvas-theme="${options.theme}" data-theme="${options.theme}"${presentationAttr}>`);
+    return injectIntoHead(withTheme, injectedHeadContent);
   }
   // Fragment — wrap in full document.
-  return `<!doctype html><html><head><meta charset="utf-8">${styleBlock}</head><body>${userHtml}</body></html>`;
+  return `<!doctype html><html data-pmx-canvas-theme="${options.theme}" data-theme="${options.theme}"${presentationAttr}><head><meta charset="utf-8">${injectedHeadContent}</head><body>${userHtml}</body></html>`;
+}
+
+export function createHtmlNodeSrcDocForTest(userHtml: string, options: { theme: string; themeCss: string; themeToken?: string; presentation?: boolean; presentationExitToken?: string }): string {
+  return buildSrcDoc(userHtml, {
+    themeToken: options.themeToken ?? 'test-theme-token',
+    theme: options.theme,
+    themeCss: options.themeCss,
+    presentation: options.presentation,
+    presentationExitToken: options.presentationExitToken,
+  });
+}
+
+export function shouldShowPresentationControls(node: CanvasNodeState): boolean {
+  return node.type === 'html' && node.data.presentation === true;
 }
 
-export function HtmlNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+export function HtmlNode({
+  node,
+  expanded = false,
+  presentation = false,
+  presentationExitToken,
+  autoFocus = false,
+}: { node: CanvasNodeState; expanded?: boolean; presentation?: boolean; presentationExitToken?: string; autoFocus?: boolean }) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const theme = canvasTheme.value;
+  const themeToken = useMemo(() => `theme-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`, []);
+  const themeCss = useMemo(() => buildThemeStyleBlock(), [theme]);
   const html = typeof node.data.html === 'string'
     ? node.data.html
     : typeof node.data.content === 'string'
       ? node.data.content
       : '';
-  const srcDoc = useMemo(() => (html ? buildSrcDoc(html) : ''), [html]);
+  const srcDoc = useMemo(() => (html ? buildSrcDoc(html, { presentation, presentationExitToken, themeToken, themeCss, theme }) : ''), [html, presentation, presentationExitToken, themeToken]);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage({
+      source: 'pmx-canvas-html-node',
+      type: 'theme-update',
+      token: themeToken,
+      theme,
+      css: themeCss,
+    }, '*');
+    if (autoFocus) iframeRef.current?.focus();
+  }, [theme, themeCss, themeToken]);
+
+  useEffect(() => {
+    if (!autoFocus) return;
+    const id = window.setTimeout(() => iframeRef.current?.focus(), 0);
+    return () => window.clearTimeout(id);
+  }, [autoFocus, srcDoc]);
+
+  const handleFrameLoad = () => {
+    iframeRef.current?.contentWindow?.postMessage({
+      source: 'pmx-canvas-html-node',
+      type: 'theme-update',
+      token: themeToken,
+      theme,
+      css: themeCss,
+    }, '*');
+    if (autoFocus) iframeRef.current?.focus();
+  };
 
   if (!html) {
     return (
@@ -134,16 +242,20 @@ export function HtmlNode({ node, expanded = false }: { node: CanvasNodeState; ex
   // arbitrary author code runs inside this exact sandbox.
   return (
     <iframe
+      ref={iframeRef}
+      class={presentation ? 'html-node-frame html-node-frame-presentation' : 'html-node-frame'}
       title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
       sandbox="allow-scripts"
       srcdoc={srcDoc}
+      tabIndex={autoFocus ? 0 : undefined}
+      onLoad={handleFrameLoad}
       style={{
         width: '100%',
         height: '100%',
-        minHeight: expanded ? '70vh' : '300px',
+        minHeight: presentation ? 0 : expanded ? '70vh' : '300px',
         border: 'none',
         background: 'var(--c-bg)',
-        borderRadius: '6px',
+        borderRadius: presentation ? '18px' : '6px',
         display: 'block',
       }}
     />

package/src/client/nodes/McpAppNode.tsx

@@ -2,11 +2,12 @@ import type { CanvasNodeState } from '../types';
 import { canvasTheme } from '../state/canvas-store';
 import { ExtAppFrame } from './ExtAppFrame';
 
-function withTheme(url: string): string {
+function withViewerParams(url: string, expanded: boolean): string {
   if (!url) return url;
   try {
     const resolved = new URL(url, window.location.origin);
     resolved.searchParams.set('theme', canvasTheme.value === 'light' ? 'light' : 'dark');
+    if (expanded) resolved.searchParams.set('display', 'expanded');
     return resolved.toString();
   } catch {
     return url;
@@ -18,7 +19,7 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
     return <ExtAppFrame node={node} expanded={expanded} />;
   }
 
-  const url = withTheme((node.data.url as string) || '');
+  const url = withViewerParams((node.data.url as string) || '', expanded);
   const sourceServer = (node.data.sourceServer as string) || '';
   const hostMode = (node.data.hostMode as string) || 'hosted';
   const fallbackReason = node.data.fallbackReason as string | undefined;
@@ -54,7 +55,14 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
   }
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        ...(expanded ? { flex: 1, minHeight: 0, width: '100%' } : {}),
+      }}
+    >
       {!trustedDomain && (
         <div
           style={{
@@ -77,7 +85,7 @@ export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState;
         sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
         allow="clipboard-read; clipboard-write"
         loading="lazy"
-        style={{ flex: 1 }}
+        style={{ flex: 1, minHeight: 0, width: '100%' }}
         title={`MCP App: ${sourceServer}`}
       />
     </div>