pmx-canvas 0.2.7 → 0.3.1

package/src/client/canvas/EdgeLayer.tsx

@@ -82,8 +82,8 @@ interface EdgePathProps {
   edge: CanvasEdge;
   fromNode: CanvasNodeState;
   toNode: CanvasNodeState;
-  focused: boolean;   // connected to the active node
-  dimmed: boolean;    // active node exists but this edge is NOT connected
+  focused: boolean; // connected to the active node
+  dimmed: boolean; // active node exists but this edge is NOT connected
 }
 
 function EdgePath({ edge, fromNode, toNode, focused, dimmed }: EdgePathProps) {
@@ -108,22 +108,14 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed }: EdgePathProps) {
   const directed = DIRECTED_TYPES.has(edge.type);
   const dash = dashArray(edge);
 
-  const mid = edge.label
-    ? bezierMidpoint(start.x, start.y, cx1, cy1, cx2, cy2, end.x, end.y)
-    : null;
+  const mid = edge.label ? bezierMidpoint(start.x, start.y, cx1, cy1, cx2, cy2, end.x, end.y) : null;
 
   const pathId = `edge-path-${edge.id}`;
 
   return (
     <g>
       {/* Invisible wide hitbox for hover/click */}
-      <path
-        d={d}
-        fill="none"
-        stroke="transparent"
-        stroke-width="12"
-        style={{ cursor: 'pointer' }}
-      />
+      <path d={d} fill="none" stroke="transparent" stroke-width="12" style={{ cursor: 'pointer' }} />
 
       {/* Glow layer for focused edges */}
       {focused && (
@@ -171,13 +163,7 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed }: EdgePathProps) {
             height="20"
             rx="4"
           />
-          <text
-            class="edge-label"
-            text-anchor="middle"
-            dominant-baseline="central"
-            fill="var(--c-text)"
-            font-size="11"
-          >
+          <text class="edge-label" text-anchor="middle" dominant-baseline="central" fill="var(--c-text)" font-size="11">
             {edge.label}
           </text>
         </g>
@@ -258,23 +244,38 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
         );
       })}
       {/* Live preview edge while drag-connecting */}
-      {draggingEdge.value && (() => {
-        const de = draggingEdge.value;
-        const dx = de.cursorX - de.fromX;
-        const dy = de.cursorY - de.fromY;
-        const dist = Math.sqrt(dx * dx + dy * dy);
-        const curve = Math.min(dist * 0.25, 80);
-        const nx = dx / (dist || 1);
-        const ny = dy / (dist || 1);
-        const previewD = `M ${de.fromX} ${de.fromY} C ${de.fromX + nx * curve} ${de.fromY + ny * curve}, ${de.cursorX - nx * curve} ${de.cursorY - ny * curve}, ${de.cursorX} ${de.cursorY}`;
-        return (
-          <g>
-            <path d={previewD} fill="none" stroke="var(--c-accent)" stroke-width="6" opacity="0.1" style={{ filter: 'blur(3px)' }} />
-            <path d={previewD} fill="none" stroke="var(--c-accent)" stroke-width="2" stroke-dasharray="6 4" opacity="0.8" />
-            <circle cx={de.cursorX} cy={de.cursorY} r="5" fill="var(--c-accent)" opacity="0.5" />
-          </g>
-        );
-      })()}
+      {draggingEdge.value &&
+        (() => {
+          const de = draggingEdge.value;
+          const dx = de.cursorX - de.fromX;
+          const dy = de.cursorY - de.fromY;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const curve = Math.min(dist * 0.25, 80);
+          const nx = dx / (dist || 1);
+          const ny = dy / (dist || 1);
+          const previewD = `M ${de.fromX} ${de.fromY} C ${de.fromX + nx * curve} ${de.fromY + ny * curve}, ${de.cursorX - nx * curve} ${de.cursorY - ny * curve}, ${de.cursorX} ${de.cursorY}`;
+          return (
+            <g>
+              <path
+                d={previewD}
+                fill="none"
+                stroke="var(--c-accent)"
+                stroke-width="6"
+                opacity="0.1"
+                style={{ filter: 'blur(3px)' }}
+              />
+              <path
+                d={previewD}
+                fill="none"
+                stroke="var(--c-accent)"
+                stroke-width="2"
+                stroke-dasharray="6 4"
+                opacity="0.8"
+              />
+              <circle cx={de.cursorX} cy={de.cursorY} r="5" fill="var(--c-accent)" opacity="0.5" />
+            </g>
+          );
+        })()}
     </svg>
   );
 }

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -83,15 +83,25 @@ function wordCount(text: string): number {
 }
 
 function isPresentationExitMessage(value: unknown, token: string): boolean {
-  return value !== null &&
+  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;
+    (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';
+  return (
+    key === 'ArrowRight' ||
+    key === 'PageDown' ||
+    key === ' ' ||
+    key === 'ArrowLeft' ||
+    key === 'PageUp' ||
+    key === 'Home' ||
+    key === 'End'
+  );
 }
 
 function isPresentationExitButtonTarget(target: EventTarget | null): boolean {
@@ -117,38 +127,49 @@ export function ExpandedNodeOverlay() {
     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 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 (event.key === 'Tab' && !isPresentationExitButtonTarget(event.target)) {
+  const handlePresentationKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setPresenting(false);
+        return;
+      }
+      if (event.key === 'Tab' && !isPresentationExitButtonTarget(event.target)) {
+        event.preventDefault();
+        event.stopPropagation();
+        presentationExitButtonRef.current?.focus();
+        return;
+      }
+      if ((event.key === ' ' || event.key === 'Enter') && isPresentationExitButtonTarget(event.target)) return;
+      if (!isPresentationNavigationKey(event.key)) return;
       event.preventDefault();
       event.stopPropagation();
-      presentationExitButtonRef.current?.focus();
-      return;
-    }
-    if ((event.key === ' ' || event.key === 'Enter') && isPresentationExitButtonTarget(event.target)) return;
-    if (!isPresentationNavigationKey(event.key)) return;
-    event.preventDefault();
-    event.stopPropagation();
-    postPresentationMessage({ type: 'presentation-key', key: event.key });
-  }, [postPresentationMessage]);
+      postPresentationMessage({ type: 'presentation-key', key: event.key });
+    },
+    [postPresentationMessage],
+  );
 
   const handleBackdropPointerDown = useCallback((e: PointerEvent) => {
     if ((e.target as HTMLElement).classList.contains('expanded-overlay-backdrop')) {
@@ -190,7 +211,9 @@ export function ExpandedNodeOverlay() {
     document.addEventListener('keydown', handlePresentationKeyDown, true);
     window.addEventListener('message', handleMessage);
     return () => {
-      focusTimers.forEach((timer) => window.clearTimeout(timer));
+      focusTimers.forEach((timer) => {
+        window.clearTimeout(timer);
+      });
       document.removeEventListener('keydown', handlePresentationKeyDown, true);
       window.removeEventListener('message', handleMessage);
     };
@@ -198,16 +221,14 @@ export function ExpandedNodeOverlay() {
 
   if (!node) return null;
 
-  const title =
-    (node.data.title as string) ||
-    (node.data.path as string)?.split('/').pop() ||
-    TYPE_LABELS[node.type];
+  const title = (node.data.title as string) || (node.data.path as string)?.split('/').pop() || TYPE_LABELS[node.type];
   const textContent = getNodeTextContent(node);
   const words = wordCount(textContent);
   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 isEmbeddedViewer =
+    node.type === 'mcp-app' || node.type === 'webpage' || node.type === 'json-render' || node.type === 'graph';
   const canPresent = shouldShowPresentationControls(node);
 
   return (
@@ -294,12 +315,7 @@ export function ExpandedNodeOverlay() {
 
             {/* Copy content */}
             {hasText && (
-              <button
-                type="button"
-                class="expanded-action-btn"
-                onClick={handleCopy}
-                title="Copy content to clipboard"
-              >
+              <button type="button" class="expanded-action-btn" onClick={handleCopy} title="Copy content to clipboard">
                 {copied ? 'Copied!' : 'Copy'}
               </button>
             )}
@@ -373,13 +389,21 @@ export function ExpandedNodeOverlay() {
           }}
         >
           {isEmbeddedViewer ? (
-            <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
-              {renderContent(node, true)}
-            </div>
-          ) : renderContent(node, true)}
+            <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
+            ref={presentationOverlayRef}
+            class="html-presentation-overlay"
+            role="dialog"
+            aria-modal="true"
+            aria-label={`Present ${title}`}
+            tabIndex={-1}
+            onKeyDownCapture={handlePresentationKeyDown}
+          >
             <button
               ref={presentationExitButtonRef}
               type="button"

package/src/client/canvas/FocusFieldLayer.tsx

@@ -20,9 +20,7 @@ function getNodeRect(nodeId: string): Rect | null {
 }
 
 function getRegionRect(nodeIds: string[]): Rect | null {
-  const rects = nodeIds
-    .map((nodeId) => getNodeRect(nodeId))
-    .filter((rect): rect is Rect => rect !== null);
+  const rects = nodeIds.map((nodeId) => getNodeRect(nodeId)).filter((rect): rect is Rect => rect !== null);
   if (rects.length === 0) return null;
 
   const minLeft = Math.min(...rects.map((rect) => rect.left));
@@ -62,13 +60,7 @@ export function FocusFieldLayer() {
       {regions.map((region) => {
         const rect = getRegionRect(region.nodeIds);
         if (!rect) return null;
-        return (
-          <div
-            key={region.id}
-            class="attention-field-region"
-            style={rectStyle(rect, 42)}
-          />
-        );
+        return <div key={region.id} class="attention-field-region" style={rectStyle(rect, 42)} />;
       })}
       {secondaryNodeIds.map((nodeId) => {
         const rect = getNodeRect(nodeId);
@@ -77,12 +69,15 @@ export function FocusFieldLayer() {
           <div
             key={`secondary-${nodeId}`}
             class="attention-field-node attention-field-secondary"
-            style={rectStyle({
-              left: rect.left - 18,
-              top: rect.top - 18,
-              width: rect.width + 36,
-              height: rect.height + 36,
-            }, 28)}
+            style={rectStyle(
+              {
+                left: rect.left - 18,
+                top: rect.top - 18,
+                width: rect.width + 36,
+                height: rect.height + 36,
+              },
+              28,
+            )}
           />
         );
       })}
@@ -93,12 +88,15 @@ export function FocusFieldLayer() {
           <div
             key={`primary-${nodeId}`}
             class="attention-field-node attention-field-primary"
-            style={rectStyle({
-              left: rect.left - 24,
-              top: rect.top - 24,
-              width: rect.width + 48,
-              height: rect.height + 48,
-            }, 30)}
+            style={rectStyle(
+              {
+                left: rect.left - 24,
+                top: rect.top - 24,
+                width: rect.width + 48,
+                height: rect.height + 48,
+              },
+              30,
+            )}
           />
         );
       })}

package/src/client/canvas/IntentLayer.tsx

@@ -1,10 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import { nodes } from '../state/canvas-store';
-import {
-  hoveredIntentId,
-  intents,
-  type ClientIntent,
-} from '../state/intent-store';
+import { hoveredIntentId, intents, type ClientIntent } from '../state/intent-store';
 import { vetoGhostIntent } from '../state/intent-bridge';
 import { getNodeIcon } from '../icons';
 import { TYPE_LABELS } from '../types';
@@ -75,8 +71,7 @@ function bezierPath(a: { x: number; y: number }, b: { x: number; y: number }): s
 function GhostInfo({ intent }: { intent: ClientIntent }) {
   const NodeIcon = isKnownNodeType(intent.nodeType) ? getNodeIcon(intent.nodeType) : null;
   const label = intent.label || intent.kind;
-  const confidencePct =
-    typeof intent.confidence === 'number' ? `${Math.round(intent.confidence * 100)}%` : null;
+  const confidencePct = typeof intent.confidence === 'number' ? `${Math.round(intent.confidence * 100)}%` : null;
   return (
     <div
       class="intent-info"
@@ -160,9 +155,7 @@ function GhostOverlay({ intent, rect, variant }: { intent: ClientIntent; rect: R
 }
 
 function renderGhost(intent: ClientIntent) {
-  const settledRect = intent.phase === 'settling'
-    ? getNodeRect(intent.settledNodeId)
-    : null;
+  const settledRect = intent.phase === 'settling' ? getNodeRect(intent.settledNodeId) : null;
   switch (intent.kind) {
     case 'create': {
       if (!intent.position) return null;
@@ -174,7 +167,12 @@ function renderGhost(intent: ClientIntent) {
       if (!intent.position) return null;
       const source = getNodeRect(intent.nodeId);
       const size = source ?? DEFAULT_GHOST_SIZE;
-      const rect: Rect = settledRect ?? { left: intent.position.x, top: intent.position.y, width: size.width, height: size.height };
+      const rect: Rect = settledRect ?? {
+        left: intent.position.x,
+        top: intent.position.y,
+        width: size.width,
+        height: size.height,
+      };
       return <GhostBox key={intent.id} intent={intent} rect={rect} />;
     }
     case 'remove': {
@@ -192,7 +190,10 @@ function renderGhost(intent: ClientIntent) {
       const from = getNodeRect(intent.edge.from);
       const to = getNodeRect(intent.edge.to);
       if (!from || !to) return null;
-      const mid = { x: (from.left + from.width / 2 + to.left + to.width / 2) / 2, y: (from.top + from.height / 2 + to.top + to.height / 2) / 2 };
+      const mid = {
+        x: (from.left + from.width / 2 + to.left + to.width / 2) / 2,
+        y: (from.top + from.height / 2 + to.top + to.height / 2) / 2,
+      };
       const rect: Rect = { left: mid.x - 110, top: mid.y - 18, width: 220, height: 36 };
       // The bezier itself is drawn in the shared SVG layer; here we anchor the info card.
       return (
@@ -200,7 +201,12 @@ function renderGhost(intent: ClientIntent) {
           key={intent.id}
           class={`intent-ghost intent-ghost-connect is-${intent.phase}`}
           data-intent-id={intent.id}
-          style={{ left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`, opacity: ghostOpacity(intent) }}
+          style={{
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            opacity: ghostOpacity(intent),
+          }}
         >
           <GhostInfo intent={intent} />
         </div>
@@ -234,7 +240,18 @@ export function IntentLayer() {
 
   return (
     <div class="intent-layer">
-      <svg class="intent-line-layer" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', overflow: 'visible', pointerEvents: 'none' }}>
+      <svg
+        class="intent-line-layer"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
+          pointerEvents: 'none',
+        }}
+      >
         <defs>
           <marker id="intent-arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
             <path d="M0,0 L6,3 L0,6 Z" class="intent-arrow-head" />

package/src/client/canvas/Minimap.tsx

@@ -108,14 +108,7 @@ interface MinimapProps {
   containerHeight: number;
 }
 
-export function Minimap({
-  viewport,
-  nodes,
-  edges,
-  onNavigate,
-  containerWidth,
-  containerHeight,
-}: MinimapProps) {
+export function Minimap({ viewport, nodes, edges, onNavigate, containerWidth, containerHeight }: MinimapProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const isDragging = useRef(false);
   const frameRef = useRef<MinimapFrame | null>(null);
@@ -216,12 +209,15 @@ export function Minimap({
     scheduleDraw();
   }, [containerWidth, containerHeight, scheduleDraw]);
 
-  useEffect(() => () => {
-    if (drawRafId.current !== null) {
-      window.cancelAnimationFrame(drawRafId.current);
-      drawRafId.current = null;
-    }
-  }, []);
+  useEffect(
+    () => () => {
+      if (drawRafId.current !== null) {
+        window.cancelAnimationFrame(drawRafId.current);
+        drawRafId.current = null;
+      }
+    },
+    [],
+  );
 
   const handleNavigateFromEvent = useCallback(
     (e: MouseEvent | PointerEvent) => {
@@ -233,8 +229,7 @@ export function Minimap({
       const my = e.clientY - rect.top;
 
       const frame =
-        frameRef.current
-        ?? computeMinimapFrame(nodes.value, viewport.value, containerWidth, containerHeight);
+        frameRef.current ?? computeMinimapFrame(nodes.value, viewport.value, containerWidth, containerHeight);
       frameRef.current = frame;
       const { bounds, scale } = frame;
 

package/src/client/canvas/SelectionBar.tsx

@@ -1,14 +1,9 @@
 import { useCallback } from 'preact/hooks';
-import {
-  addContextPins,
-  clearSelection,
-  selectedNodeIds,
-} from '../state/canvas-store';
+import { addContextPins, clearSelection, selectedNodeIds } from '../state/canvas-store';
 import { createEdgeFromClient, createGroupFromClient } from '../state/intent-bridge';
 
 export function SelectionBar() {
   const count = selectedNodeIds.value.size;
-  if (count === 0) return null;
 
   const handlePinContext = useCallback(() => {
     const ids = Array.from(selectedNodeIds.value);
@@ -34,16 +29,14 @@ export function SelectionBar() {
     clearSelection();
   }, []);
 
+  if (count === 0) return null;
+
   return (
     <div class="selection-bar">
       <span class="selection-bar-count">
         {'\u2726'} {count} node{count !== 1 ? 's' : ''} selected
       </span>
-      <button
-        type="button"
-        class="selection-bar-btn selection-bar-pin-ctx"
-        onClick={handlePinContext}
-      >
+      <button type="button" class="selection-bar-btn selection-bar-pin-ctx" onClick={handlePinContext}>
         Pin as context
       </button>
       {count >= 2 && (

package/src/client/canvas/ShortcutOverlay.tsx

@@ -48,7 +48,9 @@ export function ShortcutOverlay({ onClose }: { onClose: () => void }) {
       <div class="shortcut-overlay" onMouseDown={(e) => e.stopPropagation()}>
         <div class="shortcut-overlay-header">
           <span class="shortcut-overlay-title">Keyboard Shortcuts</span>
-          <span class="shortcut-overlay-hint">Press <kbd>?</kbd> or <kbd>Esc</kbd> to close</span>
+          <span class="shortcut-overlay-hint">
+            Press <kbd>?</kbd> or <kbd>Esc</kbd> to close
+          </span>
         </div>
         <div class="shortcut-overlay-body">
           {GROUPS.map((group) => (