pmx-canvas 0.6.4 → 0.7.0

package/src/client/canvas/ToolRail.tsx

@@ -30,8 +30,12 @@ import {
   forceDirectedArrange,
   nodes,
   traceEnabled,
+  viewport,
 } from '../state/canvas-store';
+import { importFiles } from './import-files';
+import { canvasArea } from './canvas-area';
 import { saveCanvasTheme } from '../state/intent-bridge';
+import { openBoard } from '../state/boards-store';
 import { createNodeInView } from './create-in-view';
 import { askText } from './TextPrompt';
 import { FeedbackDialog } from './FeedbackDialog';
@@ -175,6 +179,7 @@ export function ToolRail({
   const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
   const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
+  const documentInput = useRef<HTMLInputElement>(null);
 
   const toggleMenu = (menu: 'theme' | 'annotate') => (e: MouseEvent) => {
     if (openMenu === menu) {
@@ -240,9 +245,18 @@ export function ToolRail({
   return (
     <>
       <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
-        <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
-          <IconLogo size={22} />
-        </span>
+        <RailButton
+          label="Home"
+          ariaLabel="PMX Canvas — Home"
+          onClick={() => {
+            setOpenMenu(null);
+            void openBoard(null).catch((error) => logRailError('openHome', error));
+          }}
+        >
+          <span class="rail-brand">
+            <IconLogo size={22} />
+          </span>
+        </RailButton>
 
         <RailButton
           label="Bug and feedback"
@@ -322,6 +336,27 @@ export function ToolRail({
         <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
           <IconNodeFile size={15} />
         </RailButton>
+        <RailButton label="Attach document" onClick={() => documentInput.current?.click()}>
+          <span aria-hidden="true">↥</span>
+        </RailButton>
+        <input
+          ref={documentInput}
+          type="file"
+          hidden
+          multiple
+          accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.odt,.ods,.odp"
+          aria-label="Attach documents"
+          onChange={(event) => {
+            const area = canvasArea();
+            const view = viewport.value;
+            void importFiles(
+              Array.from(event.currentTarget.files ?? []),
+              (area.width / 2 - view.x) / view.scale,
+              (area.height / 2 - view.y) / view.scale,
+            );
+            event.currentTarget.value = '';
+          }}
+        />
         <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
           <IconNodeWebpage size={15} />
         </RailButton>

package/src/client/canvas/TopBar.tsx

@@ -1,4 +1,8 @@
+import { exportDialogOpen } from './ExportDialog';
+import { activeBoardId } from '../state/boards-store';
+import { BoardSwitcher } from './BoardSwitcher';
 import type { ComponentChildren } from 'preact';
+import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
 import { IconFitAll, IconZoomIn, IconZoomOut } from '../icons';
 import {
@@ -42,8 +46,19 @@ function AgentChip() {
   // bar and over the session panel, and the total was invisible): the most
   // active few wear their own chips and the rest fold into a census chip
   // that always names the total.
-  const sessions = attachedSessions.value;
-  if (sessions.length === 0) return null;
+  const allSessions = attachedSessions.value;
+  if (allSessions.length === 0) return null;
+  // Attached workers are represented by their orchestrator's roll-up, not a
+  // second top-level chip of their own. Orphans remain visible.
+  const sessions = allSessions.filter(
+    (session) =>
+      !session.parentAgentId ||
+      !allSessions.some(
+        (candidate) =>
+          candidate.sessionId !== session.sessionId &&
+          (candidate.sessionId === session.parentAgentId || candidate.source === session.parentAgentId),
+      ),
+  );
   const ranked = [...sessions].sort((a, b) => (AGENT_PHASE_RANK[a.phase] ?? 4) - (AGENT_PHASE_RANK[b.phase] ?? 4));
   const visible = ranked.slice(0, AGENT_CHIP_LIMIT);
   const overflow = ranked.slice(AGENT_CHIP_LIMIT);
@@ -252,8 +267,8 @@ export function TopBar() {
   const isTraceOn = traceEnabled.value;
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
 
-  // Board identity = workspace basename, fetched once from /health. The
-  // canvas has no board-name concept — the workspace IS the board.
+  // Until the board list arrives, the switcher shows the workspace basename
+  // (fetched once from /health).
   const [workspaceName, setWorkspaceName] = useState<string>('');
   useEffect(() => {
     let cancelled = false;
@@ -302,9 +317,7 @@ export function TopBar() {
       >
         <span class={`connection-dot ${degraded ?? status}`} aria-label={`Canvas status: ${statusTitle}`} />
       </BarHint>
-      <span class="top-bar-title" title={workspaceName || 'PMX Canvas'}>
-        {workspaceName || 'PMX Canvas'}
-      </span>
+      <BoardSwitcher fallbackName={workspaceName || 'PMX Canvas'} />
       <span class="top-bar-meta hud-collapsible-text">{sessionId.value ? sessionId.value.slice(0, 12) : '…'}</span>
       <span class="top-bar-meta hud-collapsible-text">{countsLabel}</span>
 
@@ -318,6 +331,35 @@ export function TopBar() {
 
       <div class="top-bar-sep" />
 
+      {activeBoardId.value && (
+        <BarHint label="Export board" body="One HTML file of this board that anyone can open, no install needed.">
+          <button
+            type="button"
+            class="present-button"
+            onClick={() => {
+              exportDialogOpen.value = true;
+            }}
+          >
+            Export
+          </button>
+        </BarHint>
+      )}
+      {activeBoardId.value && (
+        <BarHint
+          label="Present board"
+          body="Arrow keys or Space step through stops; Esc exits. Without a saved tour, groups are read top-to-bottom, left-to-right."
+        >
+          <button
+            type="button"
+            class="present-button"
+            onClick={() => {
+              presenting.value = true;
+            }}
+          >
+            Present
+          </button>
+        </BarHint>
+      )}
       <BarHint label="Zoom out" shortcut={modChord('\u2212')}>
         <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1 / 1.25)} aria-label="Zoom out">
           <IconZoomOut />

package/src/client/canvas/import-files.ts

@@ -1,4 +1,6 @@
-import { createNodeFromClient } from '../state/intent-bridge';
+import { createNodeFromClient, requestJson } from '../state/intent-bridge';
+import { activeBoardId } from '../state/boards-store';
+import { showToast } from '../state/attention-bridge';
 
 const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif']);
 const MD_EXTS = new Set(['md', 'mdx', 'markdown']);
@@ -17,6 +19,7 @@ export function nodeTypeFromFilename(name: string): 'image' | 'markdown' | 'file
  * markdown, everything else a file node with the text inlined.
  */
 export async function importFiles(files: File[], baseWx: number, baseWy: number): Promise<void> {
+  const boardId = activeBoardId.value;
   const nodeW = 400;
   const nodeH = 300;
   const spacing = 20;
@@ -32,12 +35,24 @@ export async function importFiles(files: File[], baseWx: number, baseWy: number)
     const type = nodeTypeFromFilename(file.name);
     const fileName = file.name;
 
+    if (/\.(pdf|pptx?|xlsx?|docx?|od[pts])$/i.test(fileName)) {
+      if (!boardId || file.size === 0 || file.size > 20 * 1024 * 1024) {
+        showToast('remove', 'File not attached', 'Open a board and choose a nonempty file under 20 MiB.');
+        continue;
+      }
+      const query = new URLSearchParams({ boardId, name: fileName, mime: file.type, x: String(wx), y: String(wy) });
+      showToast('context', 'Attaching document', fileName);
+      await requestJson('attachDocument', `/api/canvas/attachments?${query}`, null, { method: 'POST', body: file });
+      continue;
+    }
+    if (activeBoardId.value !== boardId) return;
     if (type === 'image') {
       const reader = new FileReader();
       const dataUri: string = await new Promise((resolve) => {
         reader.onload = () => resolve(reader.result as string);
         reader.readAsDataURL(file);
       });
+      if (activeBoardId.value !== boardId) return;
       await createNodeFromClient({
         type: 'image',
         title: fileName,
@@ -46,9 +61,11 @@ export async function importFiles(files: File[], baseWx: number, baseWy: number)
         y: wy,
         width: nodeW,
         height: nodeH,
+        ...(boardId ? { boardId } : {}),
       });
     } else {
       const text = await file.text();
+      if (activeBoardId.value !== boardId) return;
       const isWide = type === 'markdown' || type === 'file';
       await createNodeFromClient({
         type,
@@ -58,6 +75,7 @@ export async function importFiles(files: File[], baseWx: number, baseWy: number)
         y: wy,
         width: isWide ? 720 : nodeW,
         height: isWide ? 500 : nodeH,
+        ...(boardId ? { boardId } : {}),
       });
     }
   }

package/src/client/canvas/kind-colors.ts

@@ -7,6 +7,7 @@ export const KIND_COLOR: Record<CanvasNodeState['type'], string> = {
   webpage: 'var(--c-warn)',
   'json-render': 'var(--c-ok)',
   graph: 'var(--c-purple)',
+  board: 'var(--c-accent)',
   prompt: 'var(--c-accent)',
   response: 'var(--c-ok)',
   status: 'var(--c-warn)',

package/src/client/canvas/use-node-drag.ts

@@ -7,6 +7,7 @@ interface NodeDragOptions {
   viewport: Signal<ViewportState>;
   onMove: (id: string, x: number, y: number) => void;
   onDragEnd: () => void;
+  onClick?: () => void;
 }
 
 /**
@@ -14,7 +15,7 @@ interface NodeDragOptions {
  * Converts screen-space pointer delta to canvas-space position delta
  * (accounting for current viewport scale).
  */
-export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOptions) {
+export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd, onClick }: NodeDragOptions) {
   const isDragging = useRef(false);
   const startPointer = useRef({ x: 0, y: 0 });
   const startPosition = useRef({ x: 0, y: 0 });
@@ -30,6 +31,7 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
       startPosition.current = { x: currentX, y: currentY };
       let pendingPointer: { x: number; y: number } | null = null;
       let frameId: number | null = null;
+      let moved = false;
 
       const flushMove = () => {
         frameId = null;
@@ -44,12 +46,14 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
 
       const onPointerMove = (ev: PointerEvent) => {
         if (!isDragging.current) return;
+        if (!moved && Math.hypot(ev.clientX - e.clientX, ev.clientY - e.clientY) < 4) return;
+        moved = true;
         pendingPointer = { x: ev.clientX, y: ev.clientY };
         if (frameId !== null) return;
         frameId = window.requestAnimationFrame(flushMove);
       };
 
-      const finishDrag = () => {
+      const finishDrag = (ev: PointerEvent) => {
         if (frameId !== null) {
           window.cancelAnimationFrame(frameId);
           flushMove();
@@ -60,13 +64,14 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
         document.removeEventListener('pointerup', finishDrag);
         document.removeEventListener('pointercancel', finishDrag);
         onDragEnd();
+        if (!moved && ev.type === 'pointerup') onClick?.();
       };
 
       document.addEventListener('pointermove', onPointerMove);
       document.addEventListener('pointerup', finishDrag);
       document.addEventListener('pointercancel', finishDrag);
     },
-    [nodeId, viewport, onMove, onDragEnd],
+    [nodeId, viewport, onMove, onDragEnd, onClick],
   );
 
   return handlePointerDown;

package/src/client/icons.tsx

@@ -538,6 +538,8 @@ export function getNodeIcon(type: string): (p: IconProps) => JSX.Element {
       return IconNodeJsonRender;
     case 'graph':
       return IconNodeGraph;
+    case 'board':
+      return IconNodeGraph;
     case 'html':
       return IconNodeWebpage;
     default:

package/src/client/mermaid-entry.ts

@@ -29,6 +29,41 @@ function showError(container: HTMLElement, message: string): void {
 
 let renderSeq = 0;
 
+function fitDiagram(container: HTMLElement): void {
+  const svg = container.querySelector('svg');
+  const box = svg?.viewBox.baseVal;
+  if (!svg || !box?.width || !box.height) return;
+  const source = document.querySelector<HTMLElement>('.mermaid-source');
+  // Only canvas frames carry a nonce. A standalone site may itself be inside
+  // a host browser pane's iframe; it must still offer natural-size viewing.
+  const token = source?.dataset.frameToken;
+  const embedded = !!token && window.parent !== window;
+  const contain = embedded && source?.dataset.fit !== 'none';
+  const width = document.documentElement.clientWidth;
+  const height = document.documentElement.clientHeight;
+  const scale = contain ? Math.min(1, width / box.width, height / box.height) : 1;
+  svg.style.maxWidth = 'none';
+  svg.style.width = `${box.width * scale}px`;
+  svg.style.height = `${box.height * scale}px`;
+  svg.style.display = 'block';
+  svg.style.margin = contain ? '0 auto' : '0';
+  svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+  // Report the unconstrained, width-fitted height, not the visually contained
+  // height. Auto-grow remains useful; strictSize/userResized keep their frame.
+  if (embedded && token) {
+    window.parent.postMessage(
+      {
+        source: 'pmx-canvas-frame',
+        type: 'content-height',
+        token,
+        height: box.height * (contain ? Math.min(1, width / box.width) : 1),
+      },
+      '*',
+    );
+  }
+}
+
 async function renderDiagram(source: string, container: HTMLElement): Promise<void> {
   const scheme = documentScheme();
   mermaid.initialize({
@@ -40,6 +75,7 @@ async function renderDiagram(source: string, container: HTMLElement): Promise<vo
   try {
     const { svg } = await mermaid.render(`pmx-mermaid-${renderSeq}`, source);
     container.innerHTML = svg;
+    fitDiagram(container);
   } catch (error) {
     // Never leave a blank/black frame: show the parse/render error instead.
     showError(container, error instanceof Error ? error.message : String(error));
@@ -51,7 +87,10 @@ function boot(): void {
   const source = sourceEl?.textContent ?? '';
   const container = document.createElement('div');
   container.className = 'mermaid-diagram';
+  document.body.style.margin = '0';
+  document.body.style.padding = '0';
   document.body.appendChild(container);
+  window.addEventListener('resize', () => fitDiagram(container));
   if (!source.trim()) {
     showError(container, 'Empty mermaid diagram');
     return;

package/src/client/nodes/AttachmentNode.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { DocumentImport } from '../../server/document-import';
+import type { CanvasNodeState } from '../types';
+import { activeBoardId } from '../state/boards-store';
+import { requestJson } from '../state/intent-bridge';
+import { expandNode, collapseExpandedNode } from '../state/canvas-store';
+
+/** Originals stay useful even when the connected host cannot extract them. */
+export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  const attachmentId = String(node.data.attachmentId);
+  const boardId = activeBoardId.value;
+  const [job, setJob] = useState<DocumentImport | null>(null);
+  const [review, setReview] = useState(expanded);
+  const [consent, setConsent] = useState(false);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    let current = true;
+    const read = async () => {
+      const result = await requestJson<{ imports?: DocumentImport[] } | null>(
+        'readImports',
+        `/api/canvas/imports?boardId=${encodeURIComponent(boardId ?? '')}`,
+        null,
+      );
+      if (current) setJob(result?.imports?.find((entry) => entry.attachmentId === attachmentId) ?? null);
+    };
+    void read();
+    const timer = window.setInterval(() => void read(), 2000);
+    return () => {
+      current = false;
+      window.clearInterval(timer);
+    };
+  }, [attachmentId, boardId]);
+  useEffect(() => {
+    if (!review) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        setReview(false);
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [review]);
+  const act = async (action: 'request' | 'cancel' | 'commit') => {
+    if (!job) return;
+    setBusy(true);
+    const result = await requestJson<{ import?: DocumentImport } | null>(
+      `import.${action}`,
+      `/api/canvas/imports/${job.id}/${action}`,
+      null,
+      { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ consent: true }) },
+    );
+    setBusy(false);
+    if (result?.import) {
+      setJob(result.import);
+      setConsent(false);
+      setReview(false);
+      if (expanded && action === 'commit') collapseExpandedNode();
+    }
+  };
+  const canRequest = job && ['attached', 'cancelled', 'unavailable'].includes(job.status);
+  return (
+    <div class="attachment-node" onPointerDown={(event) => event.stopPropagation()}>
+      <div class="attachment-status">
+        {job?.status === 'requested'
+          ? 'Waiting for agent'
+          : job?.status === 'drafted'
+            ? 'Ready for review'
+            : job?.status === 'committed'
+              ? 'Markdown added'
+              : 'Original attached'}
+      </div>
+      <a href={`/api/canvas/attachments/${attachmentId}/bytes`} target="_blank" rel="noopener noreferrer">
+        Download original · {Math.ceil(Number(node.data.size ?? 0) / 1024)} KB
+      </a>
+      {job?.reason && <p>{job.reason}</p>}
+      {canRequest && !consent && (
+        <button type="button" class="home-board-action" onClick={() => setConsent(true)}>
+          Ask agent to import
+        </button>
+      )}
+      {consent && (
+        <>
+          <p>
+            The connected agent may send this file to its model provider. It needs file-reading tools and access to the
+            original. Canvas does not convert files itself.
+          </p>
+          <button type="button" class="home-board-action" disabled={busy} onClick={() => void act('request')}>
+            Allow processing & request
+          </button>
+          <button type="button" class="home-board-action" onClick={() => setConsent(false)}>
+            Not now
+          </button>
+        </>
+      )}
+      {job?.status === 'requested' && (
+        <p>
+          No automatic extraction. Ask your connected agent to check its pending steering or use canvas_import list.
+        </p>
+      )}
+      {job?.status === 'drafted' && (
+        <button
+          type="button"
+          class="home-board-action"
+          onClick={() => (expanded ? setReview(true) : expandNode(node.id))}
+        >
+          Review Markdown · {job.sections.length} {job.sections.length === 1 ? 'card' : 'cards'}
+        </button>
+      )}
+      {job && ['requested', 'drafted'].includes(job.status) && (
+        <button type="button" class="home-board-action" disabled={busy} onClick={() => void act('cancel')}>
+          Cancel import
+        </button>
+      )}
+      {review && job?.status === 'drafted' && (
+        <div class="attachment-review" role="dialog" aria-label="Review imported Markdown">
+          <h3>Review imported Markdown</h3>
+          <p>Source material, not instructions or verified knowledge. {job.agentDescription}</p>
+          {job.warnings.length > 0 && (
+            <ul>
+              {job.warnings.map((warning) => (
+                <li key={warning}>{warning}</li>
+              ))}
+            </ul>
+          )}
+          {job.sections.map((section, index) => (
+            <section key={index}>
+              <h4>{section.title}</h4>
+              <p>{section.reference || 'Source location not supplied'}</p>
+              <pre>{section.markdown}</pre>
+            </section>
+          ))}
+          <button type="button" class="home-board-action" onClick={() => setReview(false)}>
+            Close review
+          </button>
+          <button
+            type="button"
+            class="home-view-new"
+            disabled={busy || boardId !== job.boardId}
+            onClick={() => void act('commit')}
+          >
+            Add to board
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/BoardNode.tsx

@@ -0,0 +1,35 @@
+import type { CanvasNodeState } from '../types';
+import { boardList, openBoard } from '../state/boards-store';
+
+/** Native text-only cross-board link. Target identity is the durable board id. */
+export function BoardNode({ node }: { node: CanvasNodeState }) {
+  const boardId = typeof node.data.boardId === 'string' ? node.data.boardId : '';
+  const target = boardList.value.find((board) => board.id === boardId);
+  return (
+    <div class="board-node">
+      <div class="board-node-content">
+        <div class="board-node-label">Linked board</div>
+        <strong class="board-node-title">{target?.name ?? 'Missing board'}</strong>
+        <div class="board-node-meta">{target ? `${target.nodeCount} nodes` : boardId || 'No target id'}</div>
+        {target?.summary && <p class="board-node-summary">{target.summary}</p>}
+        {!!target?.pinnedTitles?.length && (
+          <p class="board-node-meta">Pinned: {target.pinnedTitles.map((pin) => pin.title).join(', ')}</p>
+        )}
+        {!!target?.backlinks?.length && (
+          <p class="board-node-meta">
+            Linked from: {[...new Set(target.backlinks.map((link) => link.title))].join(', ')}
+          </p>
+        )}
+      </div>
+      <button
+        class="board-node-open"
+        type="button"
+        disabled={!target}
+        onClick={() => target && void openBoard(target.id)}
+      >
+        {target ? 'Open board' : 'Target unavailable'}
+        {target && <span aria-hidden="true">↗</span>}
+      </button>
+    </div>
+  );
+}

package/src/client/nodes/FileNode.tsx

@@ -4,6 +4,7 @@ import { iframeMode } from '../state/iframe-mode';
 import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 import { runNodeAxInteraction } from './ax-node-actions';
+import { AttachmentNode } from './AttachmentNode';
 
 /** Guess a language label from a file extension for display. */
 function langFromPath(path: string): string {
@@ -134,6 +135,11 @@ export function formatBytes(bytes: number): string {
 }
 
 export function FileNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  if (typeof node.data.attachmentId === 'string') return <AttachmentNode node={node} expanded={expanded} />;
+  return <TextFileNode node={node} expanded={expanded} />;
+}
+
+function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const filePath = (node.data.path as string) || (node.data.content as string) || '';
   const title = (node.data.title as string) || filePath.split('/').pop() || 'File';
   const cachedContent = node.data.fileContent as string | undefined;

package/src/client/nodes/HtmlNode.tsx

@@ -3,6 +3,7 @@ import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
 import type { CanvasNodeState } from '../types';
 import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
+import { RefreshingViewerFrame } from './McpAppNode';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import { useSurfaceFrame } from './use-surface-frame';
@@ -148,23 +149,21 @@ export function HtmlNode({
   // standalone tab. The whole html-node tier assumes arbitrary author code runs
   // inside this exact sandbox.
   return (
-    <iframe
-      ref={iframeRef}
-      class={presentation ? 'html-node-frame html-node-frame-presentation' : 'html-node-frame'}
+    <RefreshingViewerFrame
+      source={surfaceFrame}
+      iframeRef={iframeRef}
+      className={
+        presentation
+          ? 'html-node-frame html-node-frame-presentation'
+          : expanded
+            ? 'html-node-frame html-node-frame-expanded'
+            : 'html-node-frame'
+      }
       title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
       sandbox="allow-scripts"
-      {...surfaceFrame}
+      allow=""
       tabIndex={autoFocus ? 0 : undefined}
       onLoad={handleFrameLoad}
-      style={{
-        width: '100%',
-        height: '100%',
-        minHeight: presentation ? 0 : expanded ? '70vh' : '300px',
-        border: 'none',
-        background: 'var(--c-bg)',
-        borderRadius: presentation ? 0 : '6px',
-        display: 'block',
-      }}
     />
   );
 }