pmx-canvas 0.8.2 → 0.9.0

package/src/client/canvas/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import type { ComponentChildren } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
+import { useCallback, useLayoutEffect, useState } from 'preact/hooks';
 import {
   contextPinnedNodeIds,
   edges,
@@ -28,6 +29,9 @@ import {
 } from '../state/intent-bridge';
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
 import { askText } from './TextPrompt';
+import { activeBoard, boardIncarnation } from '../state/boards-store';
+import { openLifecycle } from '../state/knowledge-store';
+import { RELATION_KINDS, relationKind } from '../../shared/relations.js';
 import { EXPANDABLE_TYPES } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -75,7 +79,7 @@ export function useContextMenu() {
 
   const closeMenu = useCallback(() => setMenu(null), []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!menu) return;
     const handleClick = () => setMenu(null);
     const handleKey = (e: KeyboardEvent) => {
@@ -119,7 +123,54 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
     // a drawn edge used to be frozen the moment it existed.
     const edgeId = menu.edgeId;
     const edge = edges.value.get(edgeId);
+    const incarnation = boardIncarnation;
     items = [
+      {
+        label: 'Relation kind…',
+        render: () => (
+          <label class="relation-kind-control">
+            Kind{' '}
+            <select
+              aria-label="Relation kind"
+              value={edge ? relationKind(edge) : ''}
+              onChange={(event) => {
+                const kind = event.currentTarget.value;
+                if (kind === '__custom__') {
+                  onClose();
+                  void askText('Relation kind', 'An open kind, such as supports').then((value) => {
+                    if (value?.trim() && incarnation === boardIncarnation)
+                      void updateEdgeFromClient(edgeId, { kind: value.trim() });
+                  });
+                } else void updateEdgeFromClient(edgeId, { kind });
+              }}
+            >
+              {[
+                ...new Set([
+                  ...(activeBoard()?.relationVocabulary ?? RELATION_KINDS).map((item) => item.kind),
+                  ...(edge ? [relationKind(edge)] : []),
+                ]),
+              ].map((kind) => (
+                <option key={kind} value={kind}>
+                  {kind}
+                </option>
+              ))}
+              <option value="__custom__">Custom kind…</option>
+            </select>
+          </label>
+        ),
+      },
+      {
+        label: edge?.reason ? 'Edit why…' : 'Add why…',
+        action: () => {
+          void askText('Why this relation exists', 'One sentence explaining the link', {
+            initial: edge?.reason ?? '',
+            allowEmpty: true,
+            confirm: 'Save',
+          }).then((reason) => {
+            if (reason !== null && incarnation === boardIncarnation) void updateEdgeFromClient(edgeId, { reason });
+          });
+        },
+      },
       {
         label: edge?.label
           ? `Edit label “${edge.label.slice(0, 18)}${edge.label.length > 18 ? '…' : ''}”`
@@ -130,7 +181,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
             allowEmpty: true,
             confirm: 'Save',
           }).then((next) => {
-            if (next === null) return;
+            if (next === null || incarnation !== boardIncarnation) return;
             void updateEdgeFromClient(edgeId, { label: next });
           });
         },
@@ -285,7 +336,6 @@ function renderGroupColorSection(node: CanvasNodeState, onClose: () => void): Co
               type="button"
               class={`context-menu-color-swatch${active ? ' active' : ''}`}
               aria-label={`Set group color to ${preset.label}`}
-              title={preset.label}
               style={{ '--swatch-color': preset.value }}
               onClick={() => {
                 applyGroupColor(node, preset.value);
@@ -465,6 +515,8 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   const items: MenuItem[] = [];
   const localPath = getNodeLocalPath(node);
 
+  if (knowledgeLifecycleEnabled.value) items.push({ label: 'Review', action: () => openLifecycle(node.id) });
+
   // S2: Delegate to focusNode() which centers, brings to front, and persists
   items.push({
     label: 'Focus',
@@ -552,9 +604,15 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
       pendingConnection.value = { from: node.id };
     },
   });
+  items.push({
+    label: 'Connect to a card on another board…',
+    action: () => window.dispatchEvent(new CustomEvent('pmx-open-board-link', { detail: { sourceNodeId: node.id } })),
+  });
 
   // Show edge count
-  const edgeCount = Array.from(edges.value.values()).filter((e) => e.from === node.id || e.to === node.id).length;
+  const edgeCount = Array.from(edges.value.values()).filter(
+    (e) => e.from === node.id || (!e.toBoardId && e.to === node.id),
+  ).length;
   if (edgeCount > 0) {
     items.push({
       label: `${edgeCount} edge${edgeCount !== 1 ? 's' : ''} connected`,

package/src/client/canvas/CrossBoardReferences.tsx

@@ -0,0 +1,60 @@
+import { activeBoardId, boardList, openMemoryTarget } from '../state/boards-store';
+import { edges } from '../state/canvas-store';
+import { waitForMarkdownSave } from '../nodes/MarkdownNode';
+import type { CanvasNodeState } from '../types';
+
+/** The same bounded, navigable reference list on a card and in focus mode. */
+export function CrossBoardReferences({ node }: { node: CanvasNodeState }) {
+  const remoteEdges = [...edges.value.values()].filter((edge) => edge.toBoardId && edge.from === node.id);
+  const boardId = activeBoardId.value;
+  const sourceBoard = boardList.value.find((board) => board.id === boardId);
+  if (!remoteEdges.length) return null;
+  return (
+    <div
+      class="node-memory-links"
+      role="region"
+      aria-label="Cross-board references"
+      tabIndex={0}
+      onWheel={(event) => {
+        if (!event.ctrlKey && !event.metaKey) event.stopPropagation();
+      }}
+      onKeyDown={(event) => {
+        if (
+          ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', ' '].includes(
+            event.key,
+          )
+        )
+          event.stopPropagation();
+      }}
+    >
+      {remoteEdges.map((edge) => {
+        const targetBoard = boardList.value.find((board) => board.id === edge.toBoardId);
+        const link = sourceBoard?.links?.find(
+          (link) =>
+            link.kind === 'card' &&
+            link.nodeId === node.id &&
+            link.boardId === edge.toBoardId &&
+            link.cardId === edge.to,
+        );
+        return (
+          <div class="node-memory-link" key={edge.id}>
+            <button
+              type="button"
+              disabled={!targetBoard || link?.missing === true}
+              onClick={async (event) => {
+                event.stopPropagation();
+                const focused = document.activeElement;
+                if (focused instanceof HTMLElement && focused.isContentEditable) focused.blur();
+                if (node.type === 'markdown' && !(await waitForMarkdownSave(boardId, node.id))) return;
+                await openMemoryTarget({ boardId: edge.toBoardId!, cardId: edge.to });
+              }}
+            >
+              ↗ {edge.label || edge.type}: {targetBoard?.name ?? 'Missing board'} /{' '}
+              {link?.cardTitle ?? (link?.missing ? 'Missing card' : 'Loading card…')}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}