pmx-canvas 0.3.0 → 0.3.1

package/src/client/nodes/InlineFormatBar.tsx

@@ -4,13 +4,7 @@ import { promptAndInsertLink, wrapSelectionInCode } from './inline-editor-comman
 
 const GAP = 8;
 
-type ExecCommand =
-  | 'bold'
-  | 'italic'
-  | 'strikeThrough'
-  | 'formatBlock'
-  | 'insertUnorderedList'
-  | 'insertOrderedList';
+type ExecCommand = 'bold' | 'italic' | 'strikeThrough' | 'formatBlock' | 'insertUnorderedList' | 'insertOrderedList';
 
 type BlockTag = 'H1' | 'H2' | 'H3' | 'P' | 'BLOCKQUOTE';
 
@@ -54,13 +48,7 @@ function runAction(action: Action): void {
 
 /** Floating selection toolbar for a contentEditable host. Mounts once; while
  *  visible, positions itself above the current selection's viewport rect. */
-export function InlineFormatBar({
-  hostRef,
-  onChange,
-}: {
-  hostRef: RefObject<HTMLElement>;
-  onChange: () => void;
-}) {
+export function InlineFormatBar({ hostRef, onChange }: { hostRef: RefObject<HTMLElement>; onChange: () => void }) {
   const [visible, setVisible] = useState(false);
   const [pos, setPos] = useState({ top: 0, left: 0 });
   const [barWidth, setBarWidth] = useState(0);
@@ -91,10 +79,7 @@ export function InlineFormatBar({
     // Use measured width if we have it; fall back to a conservative estimate
     // on the very first show before layout completes.
     const width = barWidth || 420;
-    const left = Math.max(
-      GAP,
-      Math.min(rect.left + rect.width / 2 - width / 2, window.innerWidth - width - GAP),
-    );
+    const left = Math.max(GAP, Math.min(rect.left + rect.width / 2 - width / 2, window.innerWidth - width - GAP));
     const top = Math.max(GAP, rect.top - GAP - 36);
     setPos({ top, left });
     setVisible(true);
@@ -160,9 +145,7 @@ export function InlineFormatBar({
             {a.icon}
           </button>
         );
-        return a.dividerBefore
-          ? [<span key={`div-${i}`} class="md-inline-format-divider" />, btn]
-          : [btn];
+        return a.dividerBefore ? [<span key={`div-${i}`} class="md-inline-format-divider" />, btn] : [btn];
       })}
     </div>
   );

package/src/client/nodes/InlineMarkdownEditor.tsx

@@ -120,4 +120,3 @@ export function InlineMarkdownEditor({
     </>
   );
 }
-

package/src/client/nodes/LedgerNode.tsx

@@ -20,9 +20,7 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
   const entries = Object.entries(data).filter(([key]) => !HIDDEN_LEDGER_KEYS.has(key));
 
   if (lines.length === 0 && entries.length === 0) {
-    return (
-      <div style={{ color: 'var(--c-dim)', fontSize: '12px', fontStyle: 'italic' }}>No ledger data</div>
-    );
+    return <div style={{ color: 'var(--c-dim)', fontSize: '12px', fontStyle: 'italic' }}>No ledger data</div>;
   }
 
   return (
@@ -61,7 +59,15 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
           <span style={{ color: 'var(--c-muted)', fontSize: '11px', flexShrink: 0 }}>
             {key.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase())}
           </span>
-          <span style={{ color: 'var(--c-text)', fontFamily: 'var(--mono)', fontSize: '11px', textAlign: 'right', wordBreak: 'break-word' }}>
+          <span
+            style={{
+              color: 'var(--c-text)',
+              fontFamily: 'var(--mono)',
+              fontSize: '11px',
+              textAlign: 'right',
+              wordBreak: 'break-word',
+            }}
+          >
             {typeof value === 'object' ? JSON.stringify(value) : String(value ?? '—')}
           </span>
         </div>

package/src/client/nodes/MarkdownNode.tsx

@@ -31,10 +31,7 @@ function RenderedMarkdown({
   return <div ref={containerRef} class={className} style={style} />;
 }
 
-export function MarkdownNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const path = node.data.path as string;
   const [content, setContent] = useState('');
   const [rendered, setRendered] = useState('');
@@ -302,9 +299,7 @@ export function MarkdownNode({
               onSave={handleInlineSave}
             />
           ) : (
-            <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '24px' }}>
-              Loading…
-            </div>
+            <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '24px' }}>Loading…</div>
           )}
         </div>
         <button type="button" class="md-edit-fab" onClick={() => setSourceMode(true)}>
@@ -323,9 +318,7 @@ export function MarkdownNode({
         html={rendered}
         style={{ padding: rendered ? '0' : '12px', color: rendered ? undefined : 'var(--c-dim)' }}
       />
-      {!loaded && (
-        <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Loading…</div>
-      )}
+      {!loaded && <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Loading…</div>}
       {loaded && !rendered && (
         <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Empty node</div>
       )}

package/src/client/nodes/McpAppNode.tsx

@@ -43,8 +43,7 @@ export function isSameOriginFrameDocumentUrl(url: string, origin = window.locati
   try {
     const baseOrigin = new URL(origin).origin;
     const resolved = new URL(url, baseOrigin);
-    return resolved.origin === baseOrigin &&
-      resolved.pathname.startsWith('/api/canvas/frame-documents/');
+    return resolved.origin === baseOrigin && resolved.pathname.startsWith('/api/canvas/frame-documents/');
   } catch {
     return false;
   }
@@ -89,7 +88,10 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
     function onAxMessage(event: MessageEvent) {
       if (event.source !== iframeRef.current?.contentWindow) return;
       const data = event.data as {
-        source?: string; token?: string; nodeId?: string; correlationId?: string;
+        source?: string;
+        token?: string;
+        nodeId?: string;
+        correlationId?: string;
         interaction?: { type?: unknown; payload?: unknown };
       } | null;
       if (!data || data.source !== 'pmx-canvas-ax' || data.token !== axToken || data.nodeId !== node.id) return;
@@ -107,13 +109,16 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
         if (res.ok) showToast('context', 'AX interaction', interactionType, [node.id]);
         else showToast('remove', 'AX interaction rejected', res.error ?? res.code ?? '', [node.id]);
         // Report #55: ack back to the viewer so the surface can self-confirm.
-        iframeRef.current?.contentWindow?.postMessage({
-          source: 'pmx-canvas-ax-ack',
-          token: axToken,
-          ...(data.correlationId ? { correlationId: data.correlationId } : {}),
-          interaction: { type: interactionType },
-          result: res,
-        }, '*');
+        iframeRef.current?.contentWindow?.postMessage(
+          {
+            source: 'pmx-canvas-ax-ack',
+            token: axToken,
+            ...(data.correlationId ? { correlationId: data.correlationId } : {}),
+            interaction: { type: interactionType },
+            result: res,
+          },
+          '*',
+        );
       });
     }
     window.addEventListener('message', onAxMessage);
@@ -125,12 +130,15 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
   const axStateValue = axSurfaceState.value;
   const pushAxState = () => {
     if (!isAxViewer || !axToken || axStateValue == null) return;
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'ax-update',
-      token: axToken,
-      state: axStateValue,
-    }, '*');
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: 'pmx-canvas-html-node',
+        type: 'ax-update',
+        token: axToken,
+        state: axStateValue,
+      },
+      '*',
+    );
   };
   useEffect(pushAxState, [isAxViewer, axToken, axStateValue]);
 
@@ -156,9 +164,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
           <span>⚠</span>
           <span>Cannot embed — opened externally</span>
         </div>
-        {fallbackReason && (
-          <div style={{ color: 'var(--c-muted)', fontSize: '11px' }}>Reason: {fallbackReason}</div>
-        )}
+        {fallbackReason && <div style={{ color: 'var(--c-muted)', fontSize: '11px' }}>Reason: {fallbackReason}</div>}
         <a
           href={url}
           target="_blank"
@@ -171,9 +177,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
         >
           {url}
         </a>
-        {sourceServer && (
-          <div style={{ color: 'var(--c-dim)', fontSize: '10px' }}>Source: {sourceServer}</div>
-        )}
+        {sourceServer && <div style={{ color: 'var(--c-dim)', fontSize: '10px' }}>Source: {sourceServer}</div>}
       </div>
     );
   }

package/src/client/nodes/MdFormatBar.tsx

@@ -62,13 +62,16 @@ export function MdFormatBar({ textareaRef }: { textareaRef: { current: HTMLTextA
     };
   }, [textareaRef, updatePosition]);
 
-  const runAction = useCallback((action: FormatAction) => {
-    const ta = textareaRef.current;
-    if (ta) {
-      action.action(ta);
-      ta.focus();
-    }
-  }, [textareaRef]);
+  const runAction = useCallback(
+    (action: FormatAction) => {
+      const ta = textareaRef.current;
+      if (ta) {
+        action.action(ta);
+        ta.focus();
+      }
+    },
+    [textareaRef],
+  );
 
   if (!visible) return null;
 

package/src/client/nodes/PromptNode.tsx

@@ -1,11 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { updateNodeData } from '../state/canvas-store';
-import {
-  fetchSlashCommands,
-  renderMarkdown,
-  submitCanvasPrompt,
-  submitThreadReply,
-} from '../state/intent-bridge';
+import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 
 // Cached slash commands — fetched once on first use.
@@ -16,10 +11,7 @@ async function getCommands() {
 }
 
 /** Find the best matching slash command for a query prefix. */
-function matchSlashCommand(
-  query: string,
-  commands: Array<{ name: string }>,
-): string | null {
+function matchSlashCommand(query: string, commands: Array<{ name: string }>): string | null {
   if (!query) return null;
   const lower = query.toLowerCase();
   const exact = commands.find((c) => c.name.toLowerCase() === lower);
@@ -121,15 +113,10 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
   );
 }
 
-export function PromptNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function PromptNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   // Backward compat: old canvas states have flat { text, status } data.
   // New threads use { turns[], threadStatus }. Detect format by presence of turns array.
-  const turns: ThreadTurn[] = Array.isArray(node.data.turns)
-    ? (node.data.turns as ThreadTurn[])
-    : [];
+  const turns: ThreadTurn[] = Array.isArray(node.data.turns) ? (node.data.turns as ThreadTurn[]) : [];
   const isLegacy = turns.length === 0;
   const legacyText = (node.data.text as string) || '';
   const legacyStatus = (node.data.status as string) || 'draft';
@@ -201,7 +188,9 @@ export function PromptNode({
         setRenderedTurns(next);
       });
 
-      return () => { cancelled = true; };
+      return () => {
+        cancelled = true;
+      };
     };
 
     if (!hasStreaming) {
@@ -243,9 +232,7 @@ export function PromptNode({
       text: trimmed, // keep for backward compat display
     });
     setDraft('');
-    const ctxIds = Array.isArray(node.data.contextNodeIds)
-      ? (node.data.contextNodeIds as string[])
-      : undefined;
+    const ctxIds = Array.isArray(node.data.contextNodeIds) ? (node.data.contextNodeIds as string[]) : undefined;
     const result = await submitCanvasPrompt(trimmed, node.position, node.id, ctxIds, node.id);
     if (!result.ok) {
       updateNodeData(node.id, { turns: [], threadStatus: 'draft', text: '', status: 'draft' });
@@ -260,9 +247,7 @@ export function PromptNode({
     const savedReply = replyDraft;
     setError(null);
     // Optimistically add user turn
-    const currentTurns = Array.isArray(node.data.turns)
-      ? [...(node.data.turns as ThreadTurn[])]
-      : [];
+    const currentTurns = Array.isArray(node.data.turns) ? [...(node.data.turns as ThreadTurn[])] : [];
     currentTurns.push({ role: 'user', text: trimmed, status: 'pending' });
     updateNodeData(node.id, { turns: currentTurns, threadStatus: 'pending' });
     setReplyDraft('');
@@ -319,17 +304,12 @@ export function PromptNode({
     [handleReplySubmit, replyDraft],
   );
 
-  const ctxCount = Array.isArray(node.data.contextNodeIds)
-    ? (node.data.contextNodeIds as string[]).length
-    : 0;
+  const ctxCount = Array.isArray(node.data.contextNodeIds) ? (node.data.contextNodeIds as string[]).length : 0;
 
   // ── Draft mode (no turns yet): show initial textarea ──
   if (isDraft && turns.length === 0) {
     return (
-      <div
-        class="prompt-node-inner"
-        style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}
-      >
+      <div class="prompt-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}>
         <ContextBadge count={ctxCount} />
         <ErrorBanner message={error} onDismiss={() => setError(null)} />
         <textarea
@@ -380,10 +360,7 @@ export function PromptNode({
   // ── Legacy flat format (old nodes without turns) ──
   if (isLegacy) {
     return (
-      <div
-        class="prompt-node-inner"
-        style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-      >
+      <div class="prompt-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <div
           style={{
             flex: 1,
@@ -425,10 +402,7 @@ export function PromptNode({
 
   // ── Thread view: render all turns ──
   return (
-    <div
-      class="prompt-node-inner"
-      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-    >
+    <div class="prompt-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <ContextBadge count={ctxCount} />
       <ErrorBanner message={error} onDismiss={() => setError(null)} />
 
@@ -439,7 +413,10 @@ export function PromptNode({
             {i > 0 && <div class="thread-turn-divider" />}
             {turn.role === 'user' ? (
               <div class="thread-turn-user">
-                <div class="thread-turn-role"><span class="status-dot" />You</div>
+                <div class="thread-turn-role">
+                  <span class="status-dot" />
+                  You
+                </div>
                 <div
                   style={{
                     fontSize: expanded ? '15px' : '13px',
@@ -454,7 +431,10 @@ export function PromptNode({
               </div>
             ) : (
               <div class="thread-turn-assistant">
-                <div class="thread-turn-role"><span class={`status-dot${turn.status === 'streaming' ? ' pulsing' : ''}`} />PMX</div>
+                <div class="thread-turn-role">
+                  <span class={`status-dot${turn.status === 'streaming' ? ' pulsing' : ''}`} />
+                  PMX
+                </div>
                 {turn.status === 'streaming' && !turn.text && (
                   <div
                     style={{
@@ -481,9 +461,7 @@ export function PromptNode({
                     </>
                   ) : (
                     <div style={{ color: 'var(--c-muted)', fontStyle: 'italic' }}>
-                      {turn.status === 'streaming'
-                        ? 'Waiting for response…'
-                        : turn.text || 'Empty response'}
+                      {turn.status === 'streaming' ? 'Waiting for response…' : turn.text || 'Empty response'}
                     </div>
                   )}
                 </div>
@@ -525,13 +503,7 @@ export function PromptNode({
                     : 'var(--c-muted)',
             }}
           >
-            {isStreaming
-              ? 'Streaming…'
-              : isPending
-                ? 'Sending…'
-                : isAnswered
-                  ? 'Answered'
-                  : threadStatus}
+            {isStreaming ? 'Streaming…' : isPending ? 'Sending…' : isAnswered ? 'Answered' : threadStatus}
           </span>
           <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>
             {turns.length} turn{turns.length !== 1 ? 's' : ''}

package/src/client/nodes/ResponseNode.tsx

@@ -32,10 +32,7 @@ function RenderedMarkdown({ html }: { html: string }) {
   return <div ref={containerRef} />;
 }
 
-export function ResponseNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function ResponseNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const content = (node.data.content as string) || '';
   const status = (node.data.status as string) || 'streaming';
   const [rendered, setRendered] = useState('');
@@ -59,18 +56,11 @@ export function ResponseNode({
   }, [content]);
 
   const handleReply = useCallback(() => {
-    submitCanvasPrompt(
-      '',
-      { x: node.position.x, y: node.position.y + node.size.height + 24 },
-      node.id,
-    );
+    submitCanvasPrompt('', { x: node.position.x, y: node.position.y + node.size.height + 24 }, node.id);
   }, [node]);
 
   return (
-    <div
-      class="response-node-inner"
-      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-    >
+    <div class="response-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       {/* Streaming indicator */}
       {isStreaming && (
         <div

package/src/client/nodes/StatusNode.tsx

@@ -2,17 +2,13 @@ import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 
 export function getStatusDisplayPhase(node: CanvasNodeState): string {
-  const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0
-    ? node.data.phase.trim()
-    : '';
+  const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0 ? node.data.phase.trim() : '';
   if (phase) return phase;
-  const content = typeof node.data.content === 'string' && node.data.content.trim().length > 0
-    ? node.data.content.trim()
-    : '';
+  const content =
+    typeof node.data.content === 'string' && node.data.content.trim().length > 0 ? node.data.content.trim() : '';
   if (content) return content;
-  const status = typeof node.data.status === 'string' && node.data.status.trim().length > 0
-    ? node.data.status.trim()
-    : '';
+  const status =
+    typeof node.data.status === 'string' && node.data.status.trim().length > 0 ? node.data.status.trim() : '';
   return status || 'idle';
 }
 

package/src/client/nodes/StatusSummary.tsx

@@ -21,15 +21,9 @@ export function StatusSummary({ node }: { node: CanvasNodeState }) {
           flexShrink: 0,
         }}
       />
-      <span
-        style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}
-      >
-        {phase}
-      </span>
+      <span style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}>{phase}</span>
       {activeTool && (
-        <span style={{ color: 'var(--c-warn)', fontSize: '10px', fontFamily: 'var(--mono)' }}>
-          ⚙ {activeTool}
-        </span>
+        <span style={{ color: 'var(--c-warn)', fontSize: '10px', fontFamily: 'var(--mono)' }}>⚙ {activeTool}</span>
       )}
       {subagent && subagent.state !== 'completed' && (
         <span style={{ color: 'var(--c-subagent)', fontSize: '10px' }}>⠉ {subagent.name}</span>

package/src/client/nodes/WebpageNode.tsx

@@ -20,11 +20,12 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
   const url = typeof node.data.url === 'string' ? node.data.url : '';
   const pageTitle = typeof node.data.pageTitle === 'string' ? node.data.pageTitle : '';
   const description = typeof node.data.description === 'string' ? node.data.description : '';
-  const excerpt = typeof node.data.excerpt === 'string'
-    ? node.data.excerpt
-    : typeof node.data.content === 'string'
-      ? node.data.content
-      : '';
+  const excerpt =
+    typeof node.data.excerpt === 'string'
+      ? node.data.excerpt
+      : typeof node.data.content === 'string'
+        ? node.data.content
+        : '';
   const status = typeof node.data.status === 'string' ? node.data.status : 'idle';
   const error = typeof node.data.error === 'string' ? node.data.error : '';
   const fetchedAt = formatFetchedAt(typeof node.data.fetchedAt === 'string' ? node.data.fetchedAt : undefined);
@@ -55,12 +56,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
     return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No webpage URL set</div>;
   }
 
-  const statusTone =
-    status === 'ready'
-      ? 'var(--c-ok)'
-      : status === 'error'
-        ? 'var(--c-danger)'
-        : 'var(--c-warn)';
+  const statusTone = status === 'ready' ? 'var(--c-ok)' : status === 'error' ? 'var(--c-danger)' : 'var(--c-warn)';
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', height: '100%' }}>
@@ -123,7 +119,9 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
             />
           )}
           {description && (
-            <p style={{ margin: 0, color: 'var(--c-text-soft)', lineHeight: 1.5, fontSize: expanded ? '14px' : '12px' }}>
+            <p
+              style={{ margin: 0, color: 'var(--c-text-soft)', lineHeight: 1.5, fontSize: expanded ? '14px' : '12px' }}
+            >
               {description}
             </p>
           )}
@@ -232,7 +230,8 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
               background: 'rgba(255,255,255,0.03)',
             }}
           >
-            Live preview (best effort). If this stays blank, the site likely blocks framing. The cached text snapshot below still works.
+            Live preview (best effort). If this stays blank, the site likely blocks framing. The cached text snapshot
+            below still works.
           </div>
           <iframe
             class="webpage-node-iframe"
@@ -274,7 +273,14 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
         }}
       >
         {excerpt ? (
-          <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.55, color: 'var(--c-text)', fontSize: expanded ? '14px' : '12px' }}>
+          <div
+            style={{
+              whiteSpace: 'pre-wrap',
+              lineHeight: 1.55,
+              color: 'var(--c-text)',
+              fontSize: expanded ? '14px' : '12px',
+            }}
+          >
             {excerpt}
           </div>
         ) : (

package/src/client/nodes/iframe-document-url.ts

@@ -7,12 +7,14 @@ interface FrameDocumentCreateResponse {
 }
 
 function isFrameDocumentCreateResponse(value: unknown): value is FrameDocumentCreateResponse {
-  return Boolean(value)
-    && typeof value === 'object'
-    && value !== null
-    && !Array.isArray(value)
-    && 'ok' in value
-    && typeof (value as { ok: unknown }).ok === 'boolean';
+  return (
+    Boolean(value) &&
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    'ok' in value &&
+    typeof (value as { ok: unknown }).ok === 'boolean'
+  );
 }
 
 export async function createIframeDocumentUrl(html: string, sandbox: string): Promise<string> {
@@ -21,17 +23,21 @@ export async function createIframeDocumentUrl(html: string, sandbox: string): Pr
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ html, sandbox }),
   });
-  const json = await response.json() as unknown;
+  const json = (await response.json()) as unknown;
   if (!response.ok || !isFrameDocumentCreateResponse(json) || !json.ok || typeof json.url !== 'string') {
-    const message = isFrameDocumentCreateResponse(json) && json.error
-      ? json.error
-      : `Frame document request failed with HTTP ${response.status}`;
+    const message =
+      isFrameDocumentCreateResponse(json) && json.error
+        ? json.error
+        : `Frame document request failed with HTTP ${response.status}`;
     throw new Error(message);
   }
   return json.url;
 }
 
-export function useIframeDocument(html: string, sandbox: string): { attributes: { src?: string }; ready: boolean; key: string } {
+export function useIframeDocument(
+  html: string,
+  sandbox: string,
+): { attributes: { src?: string }; ready: boolean; key: string } {
   const [src, setSrc] = useState<string | null>(null);
 
   useEffect(() => {
@@ -50,9 +56,12 @@ export function useIframeDocument(html: string, sandbox: string): { attributes:
     };
   }, [html, sandbox]);
 
-  return useMemo(() => ({
-    attributes: src ? { src } : {},
-    ready: Boolean(src),
-    key: src ?? '',
-  }), [src]);
+  return useMemo(
+    () => ({
+      attributes: src ? { src } : {},
+      ready: Boolean(src),
+      key: src ?? '',
+    }),
+    [src],
+  );
 }

package/src/client/nodes/image-warnings.ts

@@ -52,13 +52,7 @@ function metadataWarnings(node: CanvasNodeState): ImageNodeWarning[] {
 }
 
 function looksLikeLoginCapture(node: CanvasNodeState): boolean {
-  const haystack = [
-    node.data.title,
-    node.data.caption,
-    node.data.alt,
-    node.data.src,
-    node.data.path,
-  ]
+  const haystack = [node.data.title, node.data.caption, node.data.alt, node.data.src, node.data.path]
     .map((value) => readTrimmedString(value)?.toLowerCase() ?? '')
     .join(' ');
 

package/src/client/nodes/md-format.ts

@@ -168,11 +168,26 @@ export function getSelectionRect(ta: HTMLTextAreaElement): { top: number; left:
   const mirror = document.createElement('div');
   const style = getComputedStyle(ta);
   const props = [
-    'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing',
-    'wordSpacing', 'textIndent', 'whiteSpace', 'wordWrap', 'overflowWrap',
-    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
-    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
-    'boxSizing', 'width',
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'lineHeight',
+    'letterSpacing',
+    'wordSpacing',
+    'textIndent',
+    'whiteSpace',
+    'wordWrap',
+    'overflowWrap',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'boxSizing',
+    'width',
   ] as const;
   for (const p of props) {
     mirror.style[p] = style[p];