pmx-canvas 0.10.0 → 0.12.0

package/src/client/canvas/CanvasViewport.tsx

@@ -17,6 +17,7 @@ import { HtmlNode } from '../nodes/HtmlNode';
 import { PromptNode } from '../nodes/PromptNode';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
+import { ViewerHost } from '../nodes/ViewerHost';
 import {
   activeNodeId,
   cancelViewportAnimation,
@@ -36,6 +37,9 @@ import {
   dragDropTarget,
   hiddenByCollapsedGroup,
   canvasTool,
+  groupContents,
+  groupViewNodes,
+  canvasInteractionEpoch,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
 import type { AnnotationTool, CanvasAnnotation, CanvasNodeState } from '../types';
@@ -49,6 +53,7 @@ import { ScopeFenceLayer } from './ScopeFenceLayer';
 import { CanvasNode } from './CanvasNode';
 import { BoardNode } from '../nodes/BoardNode';
 import { EdgeLayer } from './EdgeLayer';
+import { GroupOutsideLinks } from './GroupNavigation';
 import { AnnotationLayer } from './AnnotationLayer';
 import { activeGuides } from './snap-guides';
 import { usePanZoom } from './use-pan-zoom';
@@ -103,18 +108,30 @@ function renderNodeContent(node: CanvasNodeState) {
  */
 class WorldNode extends Component<{
   node: CanvasNodeState;
+  hidden: boolean;
   onContextMenu?: (e: MouseEvent, nodeId: string) => void;
 }> {
-  shouldComponentUpdate(next: { node: CanvasNodeState; onContextMenu?: (e: MouseEvent, nodeId: string) => void }) {
-    return next.node !== this.props.node || next.onContextMenu !== this.props.onContextMenu;
+  shouldComponentUpdate(next: {
+    node: CanvasNodeState;
+    hidden: boolean;
+    onContextMenu?: (e: MouseEvent, nodeId: string) => void;
+  }) {
+    return (
+      next.node !== this.props.node ||
+      next.hidden !== this.props.hidden ||
+      next.onContextMenu !== this.props.onContextMenu
+    );
   }
 
   render() {
-    const { node, onContextMenu } = this.props;
+    const { node, hidden, onContextMenu } = this.props;
+    const viewer = ['html', 'mcp-app', 'json-render', 'graph', 'webpage', 'mermaid'].includes(node.type);
     return (
-      <CanvasNode node={node} onContextMenu={onContextMenu}>
-        {renderNodeContent(node)}
-      </CanvasNode>
+      <div style={{ display: hidden ? 'none' : 'contents' }}>
+        <CanvasNode node={node} onContextMenu={onContextMenu}>
+          {viewer ? <ViewerHost node={node}>{renderNodeContent(node)}</ViewerHost> : renderNodeContent(node)}
+        </CanvasNode>
+      </div>
     );
   }
 }
@@ -570,6 +587,7 @@ export function CanvasViewport({
       // Find intersecting nodes (AABB intersection)
       const hits: string[] = [];
       for (const node of nodes.value.values()) {
+        if (groupContents.value && !groupContents.value.has(node.id)) continue;
         const nx = node.position.x;
         const ny = node.position.y;
         if (nx + node.size.width > worldMinX && nx < worldMaxX && ny + node.size.height > worldMinY && ny < worldMaxY) {
@@ -620,6 +638,7 @@ export function CanvasViewport({
       let hit: string | null = null;
       for (const node of nodes.value.values()) {
         if (node.id === exceptId || node.type === 'group') continue;
+        if (groupContents.value && !groupContents.value.has(node.id)) continue;
         if (
           wx >= node.position.x &&
           wx <= node.position.x + node.size.width &&
@@ -805,11 +824,17 @@ export function CanvasViewport({
   // reorder DOM children when bringToFront() changes zIndex, causing browsers to
   // detach/reattach iframe elements (which forces them to reload/reconnect).
   // Group nodes render first (behind) so they serve as visual containers.
+  const mounted = useRef({ epoch: canvasInteractionEpoch.value, ids: new Set<string>() });
+  if (mounted.current.epoch !== canvasInteractionEpoch.value)
+    mounted.current = { epoch: canvasInteractionEpoch.value, ids: new Set() };
+  for (const id of mounted.current.ids) if (!nodes.value.has(id)) mounted.current.ids.delete(id);
+  const collapsed = hiddenByCollapsedGroup.value;
   const worldNodes = getRenderableWorldNodes(
     nodes.value.values(),
     expandedNodeId.value,
-    new Set(hiddenByCollapsedGroup.value.keys()),
+    new Set([...collapsed.keys()].filter((id) => !mounted.current.ids.has(id))),
   );
+  for (const node of worldNodes) mounted.current.ids.add(node.id);
   const lowestZ = worldNodes.reduce((lowest, node) => Math.min(lowest, Math.floor(node.zIndex)), 0);
   const highestZ = worldNodes.reduce((highest, node) => Math.max(highest, Math.ceil(node.zIndex)), 0);
   // Keep group-body hit order without changing the frames' visual stacking.
@@ -873,9 +898,8 @@ export function CanvasViewport({
                   : 'default',
       }}
     >
-      {/* D4: CSS matrix(a,b,c,d,tx,ty) — scale uniformly (a=d=scale, b=c=0)
-          then translate (tx=v.x, ty=v.y). transformOrigin: '0 0' ensures
-          the scale pivot is the top-left corner of the world layer. */}
+      {/* Scale the complete spatial world proportionally, including iframe
+          contents. CSS zoom changes embedded viewport semantics in WebKit. */}
       <div
         ref={worldRef}
         class="canvas-world"
@@ -894,9 +918,8 @@ export function CanvasViewport({
         <IntentLayer />
         <AgentPresenceLayer />
         <HumanPresenceLayer />
-        <EdgeLayer nodes={nodes} edges={edges} part="lines" />
-        <EdgeLayer nodes={nodes} edges={edges} part="pills" />
-        <EdgeLayer nodes={nodes} edges={edges} part="pill-hits" />
+        <EdgeLayer nodes={groupViewNodes} edges={edges} />
+        <GroupOutsideLinks />
         {draggingEdge.value && (
           <div
             class="edge-hint-pill"
@@ -931,7 +954,12 @@ export function CanvasViewport({
         <AnnotationLayer annotations={Array.from(annotations.value.values())} />
         {draftAnnotation && draftAnnotation.points.length >= 2 && <AnnotationLayer annotations={[draftAnnotation]} />}
         {worldNodes.map((node) => (
-          <WorldNode key={node.id} node={node} onContextMenu={onNodeContextMenu} />
+          <WorldNode
+            key={node.id}
+            node={node}
+            hidden={collapsed.has(node.id) || (groupContents.value !== null && !groupContents.value.has(node.id))}
+            onContextMenu={onNodeContextMenu}
+          />
         ))}
         {/* Snap alignment guide lines */}
         {activeGuides.value && (

package/src/client/canvas/ContextMenu.tsx

@@ -1,12 +1,13 @@
 import type { ComponentChildren } from 'preact';
 import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
-import { useCallback, useLayoutEffect, useState } from 'preact/hooks';
+import { useCallback, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import {
   contextPinnedNodeIds,
   edges,
   expandNode,
   focusNode,
   nodes,
+  openGroup,
   pendingConnection,
   persistLayout,
   removeNode,
@@ -28,8 +29,10 @@ import {
   updateNodeFromClient,
 } from '../state/intent-bridge';
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
+import { canCopyPrimitiveJson, copyPrimitiveJson } from '../nodes/primitive-copy';
 import { askText } from './TextPrompt';
-import { activeBoard, boardIncarnation } from '../state/boards-store';
+import { openBoardMove } from './BoardMoveDialog';
+import { activeBoard, boardIncarnation, setBoardReadme } from '../state/boards-store';
 import { openLifecycle } from '../state/knowledge-store';
 import { RELATION_KINDS, relationKind } from '../../shared/relations.js';
 import { EXPANDABLE_TYPES } from '../types';
@@ -62,7 +65,9 @@ export function useContextMenu() {
   const openNodeMenu = useCallback((e: MouseEvent, nodeId: string) => {
     e.preventDefault();
     e.stopPropagation();
-    setMenu({ kind: 'node', x: e.clientX, y: e.clientY, nodeId });
+    const trigger = e.detail === 0 && e.target instanceof Element ? e.target.closest('button') : null;
+    const bounds = trigger?.getBoundingClientRect();
+    setMenu({ kind: 'node', x: bounds?.left ?? e.clientX, y: bounds?.bottom ?? e.clientY, nodeId });
   }, []);
 
   const openCanvasMenu = useCallback((e: MouseEvent, canvasX: number, canvasY: number) => {
@@ -113,6 +118,21 @@ const GROUP_COLOR_PRESETS = [
 ] as const;
 
 export function ContextMenu({ menu, onClose }: ContextMenuProps) {
+  const root = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const element = root.current;
+    const trigger = document.activeElement;
+    element?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
+    return () => {
+      if (element?.contains(document.activeElement) && trigger instanceof HTMLElement && trigger.isConnected) {
+        // Card controls hide when the menu takes focus. Reveal the opener
+        // through its card before restoring focus to the button itself.
+        trigger.closest<HTMLElement>('.canvas-node')?.focus({ preventScroll: true });
+        trigger.focus({ preventScroll: true });
+      }
+    };
+  }, [menu]);
+
   let items: MenuItem[];
   if (menu.kind === 'node') {
     const node = nodes.value.get(menu.nodeId);
@@ -215,6 +235,9 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
 
   return (
     <div
+      ref={root}
+      role="menu"
+      aria-label={menu.kind === 'node' ? 'Node actions' : menu.kind === 'edge' ? 'Edge actions' : 'Canvas actions'}
       class="context-menu"
       style={{
         position: 'fixed',
@@ -224,6 +247,27 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
       }}
       onPointerDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
+      onBlur={(e) => {
+        if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) onClose();
+      }}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          onClose();
+        } else if (e.target instanceof HTMLButtonElement && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
+          e.preventDefault();
+          const controls = [...e.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled), input, select')];
+          const index = controls.indexOf(e.target);
+          const next =
+            e.key === 'Home'
+              ? 0
+              : e.key === 'End'
+                ? controls.length - 1
+                : (index + (e.key === 'ArrowUp' ? -1 : 1) + controls.length) % controls.length;
+          controls[next]?.focus();
+        }
+      }}
     >
       {items.map((item) => {
         const baseKey = item.separator
@@ -251,6 +295,8 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
           <button
             key={itemKey}
             type="button"
+            role="menuitem"
+            disabled={!item.action}
             class={`context-menu-item${item.danger ? ' is-danger' : ''}`}
             onClick={() => {
               item.action?.();
@@ -424,6 +470,23 @@ async function createPromptedNode(opts: {
 
 function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
   return [
+    {
+      label: 'New work card',
+      action: () => {
+        const width = 360;
+        const height = 200;
+        const position = centeredPosition(canvasX, canvasY, width, height);
+        void createNodeFromClient({
+          type: 'status',
+          title: 'New work card',
+          data: { workState: 'todo' },
+          x: position.x,
+          y: position.y,
+          width,
+          height,
+        });
+      },
+    },
     {
       label: 'New note',
       action: () => {
@@ -523,18 +586,19 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     action: () => focusNode(node.id),
   });
 
-  items.push({
-    label: 'Rename…',
-    action: () => {
-      void askText('Rename node', 'Node title', {
-        initial: typeof node.data.title === 'string' ? node.data.title : '',
-        confirm: 'Save',
-      }).then((title) => {
-        if (!title?.trim()) return;
-        void updateNodeFromClient(node.id, { title: title.trim() });
-      });
-    },
-  });
+  if (!(node.type === 'status' && typeof node.data.workItemId === 'string'))
+    items.push({
+      label: 'Rename…',
+      action: () => {
+        void askText('Rename node', 'Node title', {
+          initial: typeof node.data.title === 'string' ? node.data.title : '',
+          confirm: 'Save',
+        }).then((title) => {
+          if (!title?.trim()) return;
+          void updateNodeFromClient(node.id, { title: title.trim() });
+        });
+      },
+    });
 
   // Expand into full-viewport overlay for focused work
   if (EXPANDABLE_TYPES.has(node.type)) {
@@ -622,6 +686,22 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   items.push({ separator: true });
 
   // Type-specific
+  if (canCopyPrimitiveJson(node)) {
+    items.push({ label: 'Copy JSON', action: () => void copyPrimitiveJson(node.id) });
+  }
+  if (node.type === 'markdown') {
+    items.push({
+      label: node.data.display === 'heading' ? 'Display as card' : 'Display as heading',
+      action: () =>
+        void updateNodeFromClient(node.id, { data: { display: node.data.display === 'heading' ? 'card' : 'heading' } }),
+    });
+    const board = activeBoard();
+    if (board)
+      items.push({
+        label: board.readmeNodeId === node.id ? 'Remove as README' : 'Set as README',
+        action: () => void setBoardReadme(board.id, board.readmeNodeId === node.id ? null : node.id),
+      });
+  }
   if ((node.type === 'markdown' || node.type === 'file' || node.type === 'image') && localPath) {
     items.push({
       label: 'Open in browser',
@@ -697,6 +777,8 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   if (node.type === 'group') {
     const childIds = (node.data.children as string[]) ?? [];
     items.push({ separator: true });
+    items.push({ label: 'Open group', action: () => openGroup(node.id) });
+    items.push({ label: 'Move to new board', action: () => openBoardMove([node.id]) });
     items.push({
       render: (onClose) => renderGroupColorSection(node, onClose),
     });

package/src/client/canvas/EdgeEditor.tsx

@@ -0,0 +1,149 @@
+import { signal } from '@preact/signals';
+import { useState } from 'preact/hooks';
+import { RELATION_KINDS, relationKind } from '../../shared/relations.js';
+import { activeBoard, activeBoardId, boardIncarnation } from '../state/boards-store';
+import { edges, selectedEdgeId, viewport } from '../state/canvas-store';
+import { removeEdgeFromClient, updateEdgeFromClient } from '../state/intent-bridge';
+import type { CanvasEdge } from '../types';
+import { canvasArea } from './canvas-area';
+
+export const edgeEditorAnchor = signal<{ id: string; incarnation: number; point: { x: number; y: number } } | null>(
+  null,
+);
+
+/** Like EdgeHint, the editor lives in App's screen layer, outside the transformed world. */
+export function SelectedEdgeEditor() {
+  const anchor = edgeEditorAnchor.value;
+  const edge = anchor ? edges.value.get(anchor.id) : null;
+  return anchor && edge && anchor.id === selectedEdgeId.value && anchor.incarnation === boardIncarnation ? (
+    <EdgeEditor key={`${anchor.incarnation}:${edge.id}`} edge={edge} point={anchor.point} />
+  ) : null;
+}
+
+/** Screen-sized controls anchored to the selected relation, not scaled with its SVG. */
+export function EdgeEditor({ edge, point }: { edge: CanvasEdge; point: { x: number; y: number } }) {
+  const [field, setField] = useState<'label' | 'reason' | 'kind' | null>(null);
+  const [value, setValue] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+  const [incarnation] = useState(boardIncarnation);
+  const [boardId] = useState(activeBoardId.value);
+  const edit = (next: NonNullable<typeof field>) => {
+    setField(next);
+    setValue(next === 'kind' ? relationKind(edge) : (edge[next] ?? ''));
+    setError('');
+  };
+  const save = async (patch: Parameters<typeof updateEdgeFromClient>[1] | null) => {
+    if (pending || incarnation !== boardIncarnation) return;
+    setPending(true);
+    const result = patch
+      ? await updateEdgeFromClient(edge.id, patch, boardId)
+      : await removeEdgeFromClient(edge.id, boardId);
+    if (incarnation !== boardIncarnation) return;
+    setPending(false);
+    if (result.ok) {
+      setField(null);
+      setError('');
+      if (!patch && selectedEdgeId.value === edge.id) selectedEdgeId.value = null;
+    } else setError('Change refused. Your draft is still here.');
+  };
+  const area = canvasArea();
+  const view = viewport.value;
+  const width = Math.min(320, area.width - 24);
+  const x = Math.max(
+    area.left + 12,
+    Math.min(area.left + area.width - width - 12, area.left + point.x * view.scale + view.x - width / 2),
+  );
+  const y = Math.max(
+    area.top + 8,
+    Math.min(area.top + area.height - (field ? 180 : 60), area.top + point.y * view.scale + view.y + 20),
+  );
+  const kinds = [
+    ...new Set(
+      [...RELATION_KINDS, ...(activeBoard()?.relationVocabulary ?? [])]
+        .map((item) => item.kind)
+        .concat(relationKind(edge)),
+    ),
+  ];
+  return (
+    <form
+      class="edge-editor"
+      aria-label="Edit relation"
+      style={{ left: x, top: y, width }}
+      onPointerDown={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        event.stopPropagation();
+        if (event.key === 'Escape' && !pending) {
+          event.preventDefault();
+          setField(null);
+          selectedEdgeId.value = null;
+        }
+      }}
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (field) void save({ [field]: value });
+      }}
+    >
+      <fieldset disabled={pending}>
+        <div class="edge-editor-tools">
+          <select
+            aria-label="Relation kind"
+            value={relationKind(edge)}
+            onChange={(event) => {
+              const kind = event.currentTarget.value;
+              if (kind === '__custom') edit('kind');
+              else {
+                setField('kind');
+                setValue(kind);
+                void save({ kind });
+              }
+            }}
+          >
+            {kinds.map((kind) => (
+              <option key={kind} value={kind}>
+                {kind}
+              </option>
+            ))}
+            <option value="__custom">Custom…</option>
+          </select>
+          <button type="button" onClick={() => edit('label')}>
+            Label
+          </button>
+          <button type="button" onClick={() => edit('reason')}>
+            Why
+          </button>
+          <button type="button" onClick={() => void save(null)}>
+            Delete
+          </button>
+        </div>
+        {field && (
+          <div class="edge-editor-field">
+            <label>
+              {field === 'reason' ? 'Why this relation?' : field === 'label' ? 'Label' : 'Custom kind'}
+              <input
+                autoFocus
+                value={value}
+                required={field === 'kind'}
+                maxLength={field === 'kind' ? 80 : field === 'reason' ? 4000 : 1000}
+                onInput={(event) => setValue(event.currentTarget.value)}
+              />
+            </label>
+            <div>
+              <button type="submit">Save</button>{' '}
+              <button
+                type="button"
+                onClick={() => {
+                  setField(null);
+                  setError('');
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+        {error && <p role="alert">{error}</p>}
+      </fieldset>
+    </form>
+  );
+}