pmx-canvas 0.3.0 → 0.3.1

package/src/client/nodes/ExtAppFrame.tsx

@@ -37,7 +37,7 @@ async function postJson<T>(url: string, body: Record<string, unknown>): Promise<
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
   });
-  const json = await response.json() as {
+  const json = (await response.json()) as {
     ok: boolean;
     result?: T;
     error?: string;
@@ -72,7 +72,9 @@ export function nextWebkitRepaintSlot(): number {
   const slot = webkitRepaintSlot++;
   if (typeof window !== 'undefined') {
     if (webkitRepaintSlotResetTimer) clearTimeout(webkitRepaintSlotResetTimer);
-    webkitRepaintSlotResetTimer = setTimeout(() => { webkitRepaintSlot = 0; }, 3000);
+    webkitRepaintSlotResetTimer = setTimeout(() => {
+      webkitRepaintSlot = 0;
+    }, 3000);
   }
   return slot;
 }
@@ -128,9 +130,7 @@ export async function sendExtAppBootstrapState(
 }
 
 export function resolveExtAppSandbox(value: unknown): string {
-  return typeof value === 'string' && value.trim().length > 0
-    ? value.trim()
-    : DEFAULT_EXT_APP_SANDBOX;
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : DEFAULT_EXT_APP_SANDBOX;
 }
 
 export function buildExtAppAxBridgeScript(axToken: string, nodeId: string): string {
@@ -246,10 +246,12 @@ export function ExtAppFrame({ node, expanded = false }: { 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 {
-    csp?: Record<string, unknown>;
-    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;
@@ -262,9 +264,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const axCaps = node.data.axCapabilities as { enabled?: boolean } | undefined;
   const axEnabled = axCaps?.enabled === true && typeof html === 'string' && html.length > 0;
   const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, []);
-  const axBridgeScript = axEnabled
-    ? buildExtAppAxBridgeScript(axToken, nodeId)
-    : '';
+  const axBridgeScript = axEnabled ? buildExtAppAxBridgeScript(axToken, nodeId) : '';
   const iframeDocument = useIframeDocument(injectExtAppAxBridgeScript(html ?? '', axBridgeScript), iframeSandbox);
 
   useEffect(() => {
@@ -272,7 +272,10 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     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 !== nodeId) return;
@@ -289,13 +292,16 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
       }).then((res) => {
         if (res.ok) showToast('context', 'AX interaction', interactionType, [nodeId]);
         else showToast('remove', 'AX interaction rejected', res.error ?? res.code ?? '', [nodeId]);
-        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);
@@ -336,9 +342,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status, hasReplayToolResult]);
 
-  useEffect(() => () => {
-    if (webkitRepaintTimerRef.current !== null) window.clearTimeout(webkitRepaintTimerRef.current);
-  }, []);
+  useEffect(
+    () => () => {
+      if (webkitRepaintTimerRef.current !== null) window.clearTimeout(webkitRepaintTimerRef.current);
+    },
+    [],
+  );
 
   const toMcpTheme = (theme: string): McpUiTheme => (theme === 'light' ? 'light' : 'dark');
   const isExpanded = expanded || expandedNodeId.value === nodeId;
@@ -368,10 +377,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     if (lastSentToolResultRef.current === pendingToolResult) {
       return null;
     }
-    if (
-      lastSentToolResultRef.current &&
-      extAppToolResultsMatch(lastSentToolResultRef.current, pendingToolResult)
-    ) {
+    if (lastSentToolResultRef.current && extAppToolResultsMatch(lastSentToolResultRef.current, pendingToolResult)) {
       lastSentToolResultRef.current = pendingToolResult;
       return null;
     }
@@ -423,7 +429,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         throw new Error('Ext-app iframe window is unavailable');
       }
 
-      const buildHostContext = (displayMode: DisplayMode = expandedNodeId.value === nodeId ? 'fullscreen' : 'inline') => ({
+      const buildHostContext = (
+        displayMode: DisplayMode = expandedNodeId.value === nodeId ? 'fullscreen' : 'inline',
+      ) => ({
         theme: toMcpTheme(canvasTheme.value),
         platform: 'web' as const,
         containerDimensions: resolveExtAppContainerDimensions(iframe, {
@@ -433,12 +441,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         displayMode,
         locale: navigator.language,
         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        ...(toolDefinition ? {
-          toolInfo: {
-            id: toolCallId,
-            tool: toolDefinition,
-          },
-        } : {}),
+        ...(toolDefinition
+          ? {
+              toolInfo: {
+                id: toolCallId,
+                tool: toolDefinition,
+              },
+            }
+          : {}),
       });
 
       const scheduleHostContextUpdate = () => {
@@ -655,7 +665,10 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
       // at fire time so the widget keeps its fullscreen/inline context accurate.
       let firstFire = true;
       themeUnsubRef.current = canvasTheme.subscribe((newTheme) => {
-        if (firstFire) { firstFire = false; return; }
+        if (firstFire) {
+          firstFire = false;
+          return;
+        }
         if (disposed) return;
         bridge.setHostContext?.({
           ...buildHostContext(),
@@ -787,7 +800,17 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   }
 
   return (
-    <div style={{ flex: 1, width: '100%', height: '100%', minWidth: 0, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        flex: 1,
+        width: '100%',
+        height: '100%',
+        minWidth: 0,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       {sessionStatus && sessionStatus !== 'ready' && (
         <div
           style={{
@@ -852,9 +875,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         </div>
       )}
       {status === 'loading' && (
-        <div style={{ padding: '8px', fontSize: '11px', color: 'var(--c-muted)' }}>
-          Connecting to ext-app viewer...
-        </div>
+        <div style={{ padding: '8px', fontSize: '11px', color: 'var(--c-muted)' }}>Connecting to ext-app viewer...</div>
       )}
       {/* Iframe stack: the widget renders a preview; when not expanded, a
           transparent click-catcher sits on top so the first click always

package/src/client/nodes/FileNode.tsx

@@ -8,20 +8,38 @@ import { runNodeAxInteraction } from './ax-node-actions';
 function langFromPath(path: string): string {
   const ext = path.split('.').pop()?.toLowerCase() ?? '';
   const map: Record<string, string> = {
-    ts: 'TypeScript', tsx: 'TSX', js: 'JavaScript', jsx: 'JSX',
-    py: 'Python', rs: 'Rust', go: 'Go', rb: 'Ruby',
-    java: 'Java', kt: 'Kotlin', swift: 'Swift', c: 'C', cpp: 'C++', h: 'C/C++',
-    css: 'CSS', html: 'HTML', json: 'JSON', yaml: 'YAML', yml: 'YAML',
-    md: 'Markdown', toml: 'TOML', sql: 'SQL', sh: 'Shell', bash: 'Shell',
-    xml: 'XML', graphql: 'GraphQL', proto: 'Protobuf',
+    ts: 'TypeScript',
+    tsx: 'TSX',
+    js: 'JavaScript',
+    jsx: 'JSX',
+    py: 'Python',
+    rs: 'Rust',
+    go: 'Go',
+    rb: 'Ruby',
+    java: 'Java',
+    kt: 'Kotlin',
+    swift: 'Swift',
+    c: 'C',
+    cpp: 'C++',
+    h: 'C/C++',
+    css: 'CSS',
+    html: 'HTML',
+    json: 'JSON',
+    yaml: 'YAML',
+    yml: 'YAML',
+    md: 'Markdown',
+    toml: 'TOML',
+    sql: 'SQL',
+    sh: 'Shell',
+    bash: 'Shell',
+    xml: 'XML',
+    graphql: 'GraphQL',
+    proto: 'Protobuf',
   };
   return map[ext] ?? (ext.toUpperCase() || 'Text');
 }
 
-export function FileNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function FileNode({ 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;
@@ -44,26 +62,30 @@ export function FileNode({
     let cancelled = false;
     setLoading(true);
     setError(null);
-    fetchFile(filePath).then(({ content: fileText }) => {
-      if (cancelled) return;
-      if (!fileText && fileText !== '') {
-        setError('File not found');
+    fetchFile(filePath)
+      .then(({ content: fileText }) => {
+        if (cancelled) return;
+        if (!fileText && fileText !== '') {
+          setError('File not found');
+          setLoading(false);
+          return;
+        }
+        setContent(fileText);
         setLoading(false);
-        return;
-      }
-      setContent(fileText);
-      setLoading(false);
-      // Cache content in node data so it survives re-renders
-      const lines = fileText.split('\n').length;
-      updateNodeData(node.id, { fileContent: fileText, lineCount: lines });
-      void updateNodeFromClient(node.id, { data: { fileContent: fileText, lineCount: lines } });
-    }).catch(() => {
-      if (!cancelled) {
-        setError('Failed to load file');
-        setLoading(false);
-      }
-    });
-    return () => { cancelled = true; };
+        // Cache content in node data so it survives re-renders
+        const lines = fileText.split('\n').length;
+        updateNodeData(node.id, { fileContent: fileText, lineCount: lines });
+        void updateNodeFromClient(node.id, { data: { fileContent: fileText, lineCount: lines } });
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setError('Failed to load file');
+          setLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [filePath, cachedContent]);
 
   // Sync content when server pushes updates via SSE
@@ -80,27 +102,29 @@ export function FileNode({
     // Clear cached content to force a fresh fetch
     updateNodeData(node.id, { fileContent: undefined });
     void updateNodeFromClient(node.id, { data: { fileContent: undefined } });
-    fetchFile(filePath).then(({ content: fileText }) => {
-      setContent(fileText);
-      setLoading(false);
-      const lines = fileText.split('\n').length;
-      const updatedAt = new Date().toISOString();
-      updateNodeData(node.id, {
-        fileContent: fileText,
-        lineCount: lines,
-        updatedAt,
-      });
-      void updateNodeFromClient(node.id, {
-        data: {
+    fetchFile(filePath)
+      .then(({ content: fileText }) => {
+        setContent(fileText);
+        setLoading(false);
+        const lines = fileText.split('\n').length;
+        const updatedAt = new Date().toISOString();
+        updateNodeData(node.id, {
           fileContent: fileText,
           lineCount: lines,
           updatedAt,
-        },
+        });
+        void updateNodeFromClient(node.id, {
+          data: {
+            fileContent: fileText,
+            lineCount: lines,
+            updatedAt,
+          },
+        });
+      })
+      .catch(() => {
+        setError('Failed to reload');
+        setLoading(false);
       });
-    }).catch(() => {
-      setError('Failed to reload');
-      setLoading(false);
-    });
   }, [filePath, node.id]);
 
   const lang = langFromPath(filePath);
@@ -108,11 +132,7 @@ export function FileNode({
   const gutterWidth = `${String(lines.length).length + 1}ch`;
 
   if (!filePath) {
-    return (
-      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
-        No file path set
-      </div>
-    );
+    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No file path set</div>;
   }
 
   return (
@@ -162,9 +182,7 @@ export function FileNode({
           {filePath}
         </span>
         {lineCount !== undefined && (
-          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
-            {lineCount} lines
-          </span>
+          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>{lineCount} lines</span>
         )}
         {updatedAt && (
           <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
@@ -224,14 +242,8 @@ export function FileNode({
           borderRadius: expanded ? '0 0 8px 8px' : undefined,
         }}
       >
-        {loading && (
-          <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>
-            Loading…
-          </div>
-        )}
-        {error && (
-          <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>
-        )}
+        {loading && <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>Loading…</div>}
+        {error && <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>}
         {!loading && !error && (
           <pre
             style={{

package/src/client/nodes/GroupNode.tsx

@@ -26,14 +26,12 @@ export function GroupNode({ node }: GroupNodeProps) {
   return (
     <div class="group-node-body">
       <div class="group-summary">
-        <span class="group-child-count">{childCount} node{childCount !== 1 ? 's' : ''}</span>
+        <span class="group-child-count">
+          {childCount} node{childCount !== 1 ? 's' : ''}
+        </span>
         {typeSummary && <span class="group-type-summary">{typeSummary}</span>}
       </div>
-      {childCount === 0 && (
-        <div class="group-empty-hint">
-          Drag nodes here or use the selection bar to group nodes
-        </div>
-      )}
+      {childCount === 0 && <div class="group-empty-hint">Drag nodes here or use the selection bar to group nodes</div>}
     </div>
   );
 }

package/src/client/nodes/HtmlNode.tsx

@@ -16,7 +16,13 @@ export function HtmlNode({
   presentation = false,
   presentationExitToken,
   autoFocus = false,
-}: { node: CanvasNodeState; expanded?: boolean; presentation?: boolean; presentationExitToken?: string; autoFocus?: boolean }) {
+}: {
+  node: CanvasNodeState;
+  expanded?: boolean;
+  presentation?: boolean;
+  presentationExitToken?: string;
+  autoFocus?: boolean;
+}) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const theme = canvasTheme.value;
   // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
@@ -25,11 +31,12 @@ export function HtmlNode({
   const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, []);
   // Per-mount nonce for the content-height reporter (node grows to fit content).
   const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
-  const html = typeof node.data.html === 'string'
-    ? node.data.html
-    : typeof node.data.content === 'string'
-      ? node.data.content
-      : '';
+  const html =
+    typeof node.data.html === 'string'
+      ? node.data.html
+      : typeof node.data.content === 'string'
+        ? node.data.content
+        : '';
   const v = useMemo(() => surfaceContentHash(html), [html]);
 
   // The in-canvas iframe and the "Open as site" tab load the SAME server-rendered
@@ -38,9 +45,18 @@ export function HtmlNode({
   // via postMessage below (no reload), while `v` reloads the frame when the HTML
   // itself changes.
   const surfaceSrc = useMemo(
-    () => (html
-      ? nodeSurfaceUrl(node.id, { theme, themeToken, present: presentation, presentToken: presentationExitToken, v, axToken, frameToken })
-      : ''),
+    () =>
+      html
+        ? nodeSurfaceUrl(node.id, {
+            theme,
+            themeToken,
+            present: presentation,
+            presentToken: presentationExitToken,
+            v,
+            axToken,
+            frameToken,
+          })
+        : '',
     [html, presentation, presentationExitToken, themeToken, v, node.id, axToken, frameToken],
   );
 
@@ -57,7 +73,10 @@ export function HtmlNode({
       // nodeId are a second gate, not the only one.
       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;
@@ -75,13 +94,16 @@ export function HtmlNode({
         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 surface so it can self-confirm (e.g. "queued ✓").
-        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);
@@ -89,12 +111,15 @@ export function HtmlNode({
   }, [axToken, node.id]);
 
   useEffect(() => {
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'theme-update',
-      token: themeToken,
-      theme,
-    }, '*');
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: 'pmx-canvas-html-node',
+        type: 'theme-update',
+        token: themeToken,
+        theme,
+      },
+      '*',
+    );
     if (autoFocus) iframeRef.current?.focus();
   }, [theme, themeToken]);
 
@@ -107,12 +132,15 @@ export function HtmlNode({
   const axStateValue = axSurfaceState.value;
   useEffect(() => {
     if (!axEnabled || 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,
+      },
+      '*',
+    );
   }, [axEnabled, axStateValue, axToken]);
 
   useEffect(() => {
@@ -122,29 +150,31 @@ export function HtmlNode({
   }, [autoFocus, surfaceSrc]);
 
   const handleFrameLoad = () => {
-    iframeRef.current?.contentWindow?.postMessage({
-      source: 'pmx-canvas-html-node',
-      type: 'theme-update',
-      token: themeToken,
-      theme,
-    }, '*');
-    if (axEnabled && axSurfaceState.value != null) {
-      iframeRef.current?.contentWindow?.postMessage({
+    iframeRef.current?.contentWindow?.postMessage(
+      {
         source: 'pmx-canvas-html-node',
-        type: 'ax-update',
-        token: axToken,
-        state: axSurfaceState.value,
-      }, '*');
+        type: 'theme-update',
+        token: themeToken,
+        theme,
+      },
+      '*',
+    );
+    if (axEnabled && axSurfaceState.value != null) {
+      iframeRef.current?.contentWindow?.postMessage(
+        {
+          source: 'pmx-canvas-html-node',
+          type: 'ax-update',
+          token: axToken,
+          state: axSurfaceState.value,
+        },
+        '*',
+      );
     }
     if (autoFocus) iframeRef.current?.focus();
   };
 
   if (!html) {
-    return (
-      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
-        No HTML content set
-      </div>
-    );
+    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No HTML content set</div>;
   }
 
   // SECURITY: sandbox is intentionally `allow-scripts` ONLY. Do NOT add

package/src/client/nodes/ImageNode.tsx

@@ -7,19 +7,17 @@ import { getImageNodeWarnings } from './image-warnings';
  * Supports: file paths (served via /api/canvas/image/:nodeId), data URIs, and URLs.
  * Features: fit-to-container, zoom in/out within node, pan when zoomed.
  */
-export function ImageNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const src = (node.data.src as string) || '';
   const alt = (node.data.alt as string) || (node.data.title as string) || 'Image';
   const caption = (node.data.caption as string) || '';
   const warnings = getImageNodeWarnings(node);
 
   // Determine the image source URL
-  const imageSrc = src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')
-    ? src
-    : `/api/canvas/image/${node.id}`;
+  const imageSrc =
+    src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')
+      ? src
+      : `/api/canvas/image/${node.id}`;
 
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState(false);
@@ -54,13 +52,16 @@ export function ImageNode({
     setZoom((z) => Math.max(0.25, Math.min(10, z * delta)));
   }, []);
 
-  const handlePointerDown = useCallback((e: PointerEvent) => {
-    if (zoom <= 1) return;
-    e.stopPropagation();
-    dragging.current = true;
-    lastPos.current = { x: e.clientX, y: e.clientY };
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-  }, [zoom]);
+  const handlePointerDown = useCallback(
+    (e: PointerEvent) => {
+      if (zoom <= 1) return;
+      e.stopPropagation();
+      dragging.current = true;
+      lastPos.current = { x: e.clientX, y: e.clientY };
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    },
+    [zoom],
+  );
 
   const handlePointerMove = useCallback((e: PointerEvent) => {
     if (!dragging.current) return;
@@ -92,10 +93,7 @@ export function ImageNode({
   const zoomPct = Math.round(zoom * 100);
 
   return (
-    <div
-      class={`image-node ${expanded ? 'image-node-expanded' : ''}`}
-      ref={containerRef}
-    >
+    <div class={`image-node ${expanded ? 'image-node-expanded' : ''}`} ref={containerRef}>
       {warnings.length > 0 && (
         <div class="image-node-warning-stack">
           {warnings.map((warning) => (
@@ -114,9 +112,7 @@ export function ImageNode({
         onPointerUp={handlePointerUp}
         style={{ cursor: zoom > 1 ? 'grab' : 'default' }}
       >
-        {!loaded && !error && (
-          <div class="image-node-loading">Loading…</div>
-        )}
+        {!loaded && !error && <div class="image-node-loading">Loading…</div>}
         {error && (
           <div class="image-node-error">
             <div class="image-node-error-icon">⚠</div>
@@ -143,12 +139,7 @@ export function ImageNode({
           <span class="image-node-meta">
             {sizeLabel && <span>{sizeLabel}</span>}
             {zoom !== 1 && (
-              <button
-                type="button"
-                class="image-node-zoom-reset"
-                onClick={resetView}
-                title="Reset zoom"
-              >
+              <button type="button" class="image-node-zoom-reset" onClick={resetView} title="Reset zoom">
                 {zoomPct}% ↺
               </button>
             )}