docs: update spatial parity checklist with test coverage for useCanvasActions and useCanvasContextMenu composables

Author: gustavotoyota

docs/SPATIAL_PARITY_CHECKLIST.md

@@ -21,7 +21,7 @@
 
 | # | Feature | Legacy reference | New file(s) | Status | Test file |
 |---|---------|------------------|-------------|--------|-----------|
-| 1.1 | Create note (double-click canvas) | `DisplayPage/DisplayWorld/DisplayNote/CreateNote.ts` | `SpatialPageView.vue:onCanvasDoubleClick` | **Done** | — |
+| 1.1 | Create note (double-click canvas) | `DisplayPage/DisplayWorld/DisplayNote/CreateNote.ts` | `useCanvasActions.ts:onCanvasDoubleClick` | **Done** | `useCanvasActions.test.ts` |
 | 1.2 | Delete note (Delete key) | `DisplayPage/DisplayWorld/DisplayNote/DeleteNote.ts` | `SpatialPageView.vue:onKeyDown` | **Done** | — |
 | 1.3 | Move note (drag) | `space/pos.ts`, `DisplayNote/DragNote.ts` | `DisplayNote.vue:onPointerDown/Move/Up` | **Done** | `DisplayNote.test.ts` |
 | 1.4 | Resize note (8 handles) | `DisplayNote/ResizeNote.ts` | `DisplayNote.vue:8-handle resize` | **Done** | `DisplayNote.test.ts` |
@@ -188,7 +188,7 @@
 | 12.14 | Right sidebar — Snapshots | `RightSidebar/Snapshots.vue` | `PageEditorSnapshotsCard.vue` | **Done** | — |
 | 12.15 | Right sidebar — Management | `RightSidebar/Management.vue` | `PageEditorManagementCard.vue` | **Done** | — |
 | 12.16 | Right sidebar — Backlinks | `RightSidebar/Backlinks.vue` | `PageEditorBacklinksCard.vue` | **Done** | — |
-| 12.17 | Canvas context menu | `TableContextMenu.vue` | `CanvasContextMenu.vue` | **Partial** | — |
+| 12.17 | Canvas context menu | `TableContextMenu.vue` | `CanvasContextMenu.vue` + `useCanvasContextMenu.ts` | **Partial** | `useCanvasContextMenu.test.ts` |
 | 12.18 | Per-note context menu | `NoteContextMenu.vue` | — | **Not started** | — |
 | 12.19 | Page state screens (8 total) | `DisplayScreens/*.vue` | `PageStateScreens.vue` + 8 components | **Done** | — |
 | 12.20 | Loading overlay | `LoadingOverlay.vue` | `PageStateScreens.vue` (inline) | **Partial** | — |
@@ -276,7 +276,7 @@ Every field from legacy `INoteCollab` and `IArrowCollab` is present in the new Y
 
 - [x] Checklist contains ≥ 60 rows. (Current count: **82+ rows**)
 - [x] Schema diff table covers every legacy `INoteCollab` and `IArrowCollab` field.
-- [ ] Every "Done" item has a passing automated test. **VIOLATED.** ~30+ UI/interaction rows marked "Done" still have "—" in the Test file column. Progress since last evaluation: `note-geometry.test.ts` (8 tests), `useBoxSelection.test.ts` (6 tests), `arrow-geometry.test.ts` (5 tests), `useSpatialEditing.test.ts` (4 tests) added. Remaining gaps: `DisplayNote.vue` (basic render tests only), `DisplayArrow.vue` (no component tests), `SpatialPageView.vue` (no component/integration tests), drag/resize interaction, arrow creation/reconnection, sidebar/toolbar integration.
+- [ ] Every "Done" item has a passing automated test. **VIOLATED.** ~30+ UI/interaction rows marked "Done" still have "—" in the Test file column. Progress since last evaluation: `useCanvasActions.test.ts` (3 tests), `useCanvasContextMenu.test.ts` (6 tests), `note-geometry.test.ts` (8 tests), `useBoxSelection.test.ts` (6 tests), `arrow-geometry.test.ts` (5 tests), `useSpatialEditing.test.ts` (4 tests) added. `DisplayArrow.test.ts` (12 tests) and `DisplayNote.test.ts` (19 tests) also added. Remaining gaps: `SpatialPageView.vue` (no component/integration tests), drag/resize interaction, arrow creation/reconnection, sidebar/toolbar integration.
 - [ ] Phase 6 is not declared done until ≥ 80% of rows are **Done**. **NOT MET.** Strict enforcement of the test rule would drop the true "Done" count well below 80%.
 
 ---

docs/restart-plan/README.md

@@ -77,7 +77,7 @@ A criterion is **not met** until the verification command or check passes in CI.
 
 ### Phase 6 — Spatial canvas polish (in progress)
 
-- **`docs/SPATIAL_PARITY_CHECKLIST.md` created.** 82+ rows covering notes, arrows, camera, selection, clipboard, editing, collab, templates, UI, backlinks, group access. Schema diff table complete. **Test coverage improved:** `DisplayArrow.test.ts` (12 tests) and expanded `DisplayNote.test.ts` (19 tests) added. `selection.test.ts` now covers `bringToTop`. Many rows still lack tests.
+- **`docs/SPATIAL_PARITY_CHECKLIST.md` created.** 82+ rows covering notes, arrows, camera, selection, clipboard, editing, collab, templates, UI, backlinks, group access. Schema diff table complete. **Test coverage improved:** `useCanvasActions.test.ts` (3 tests), `useCanvasContextMenu.test.ts` (6 tests), `DisplayArrow.test.ts` (12 tests), `DisplayNote.test.ts` (19 tests) added. `selection.test.ts` covers `bringToTop`. Many rows still lack tests.
 - **Left sidebar panels now load real data.** `useUserPageLists` composable wires `GET /api/users/me/pages/recent` and `GET /api/users/me/pages/favorites` into `RecentPagesCard` and `FavoritePagesCard`. Clear handlers call API-backed `clearRecent`/`clearFavorites`.
 - **Right sidebar properties panels exist but lack depth.** `NotePropertiesCard.vue`, `ArrowPropertiesCard.vue`, `PagePropertiesCard.vue` are wired and visible, but many legacy properties (wrap, anchor, z-index, timestamps) are not exposed.
 - **`MainToolbar.vue` extracted as standalone component.** `PageLayout.vue` now delegates to `MainToolbar.vue` for the header shell. Still missing: page action buttons (insert note/arrow, alignment, formatting), zoom controls other than reset, fit-to-screen, screenshot.
@@ -90,14 +90,14 @@ A criterion is **not met** until the verification command or check passes in CI.
 - **No `PageElem` abstraction.** Legacy notes and arrows inherit from `PageElem`, sharing selected/active/editing/visible/region state. New code treats them as completely separate types.
 - **`editing` state management implemented.** `useSpatialEditing.ts` tracks which note/arrow is being edited. Escape stops editing; canvas click stops editing; Delete/Backspace is suppressed while editing to avoid deleting selected elements.
 - **Container rendering lacks legacy depth.** `stretchChildren`, `wrapChildren`, `originOffset`, and overflow detection are in the model but not enforced in rendering. Spatial vs non-spatial container distinction is not fully implemented.
-- **`SpatialPageView.vue` partially refactored.** Keyboard shortcuts extracted to `useSpatialKeyboard.ts`. Box selection, arrow drag, arrow reconnect, and note drag extracted to dedicated composables (`useBoxSelection.ts`, `useArrowDrag.ts`, `useArrowReconnect.ts`, `useNoteDrag.ts`). Note geometry utilities extracted to `note-geometry.ts`. Component reduced from ~740 lines to ~365 lines. Remaining inline logic: context menu handlers, canvas double-click, fit-to-screen.
+- **`SpatialPageView.vue` refactored.** Keyboard shortcuts extracted to `useSpatialKeyboard.ts`. Box selection, arrow drag, arrow reconnect, and note drag extracted to dedicated composables. Note geometry utilities extracted to `note-geometry.ts`. Canvas actions (double-click, fit-to-screen) extracted to `useCanvasActions.ts`. Context menu handlers extracted to `useCanvasContextMenu.ts`. Component reduced from ~740 lines to ~260 lines.
 - **Selection partially improved.** `bringToTop` zIndex bump on selection is now implemented and tested. Formatting integration across selected editors, active element/region keyboard navigation, and `selectAll` including descendant arrows remain missing.
 - **Missing floating UI:** back/forward nav, screenshot, user avatars on canvas.
 
 ### Other gaps
 
 - **Realtime notification toast** — only `/notifications` page exists, no badge/toast.
-- **Composable size** — `useGroupMembersDetail.ts` (103 lines), `usePageCollabEditor.ts` (238 lines), and `useSpatialPage.ts` (195 lines) are all under the 300-line limit. Container logic extracted to `container-ops.ts`. `SpatialPageView.vue` script section reduced from ~740 lines to ~365 lines after extracting `useSpatialKeyboard.ts`, `useBoxSelection.ts`, `useArrowDrag.ts`, `useArrowReconnect.ts`, `useNoteDrag.ts`, and `note-geometry.ts`.
+- **Composable size** — `useGroupMembersDetail.ts` (103 lines), `usePageCollabEditor.ts` (238 lines), and `useSpatialPage.ts` (195 lines) are all under the 300-line limit. Container logic extracted to `container-ops.ts`. `SpatialPageView.vue` script section reduced from ~740 lines to ~260 lines after extracting keyboard, box selection, arrow drag, arrow reconnect, note drag, note geometry, canvas actions, and context menu handlers into dedicated composables.
 - **Auth: `rememberDevice` UI missing in login** — `LoginView.vue` has no "Remember this device" checkbox for 2FA login; users are re-prompted every time. API schema already supports it.
 - **Auth: no distributed locking** — Legacy used Redlock (`user-lock:${userId}`) around password change, email change, and 2FA mutations. New code relies on DB transactions only.
 

docs/restart-plan/phase-6-spatial-polish.md

@@ -1,7 +1,7 @@
 # Phase 6: Spatial canvas polish
 
 > **Prerequisites:** Phase 5 done.  
-> **Status:** In progress (2026-05-31 — `SpatialPageView.vue` refactored. Box selection, arrow drag, arrow reconnect, and note drag extracted into dedicated composables. `note-geometry.ts` and `useBoxSelection.test.ts` added. `useSpatialEditing`, `bringToTop`, line-body arrow geometry, and `useSpatialKeyboard` were extracted in prior work. **New:** `DisplayArrow.test.ts` (12 tests) and expanded `DisplayNote.test.ts` (19 tests) added. `selection.test.ts` now covers `bringToTop` explicitly.)
+> **Status:** In progress (2026-05-31 — `SpatialPageView.vue` further refactored. Canvas actions (double-click, fit-to-screen) extracted to `useCanvasActions.ts`; context menu handlers extracted to `useCanvasContextMenu.ts`. Box selection, arrow drag, arrow reconnect, and note drag previously extracted. `useCanvasActions.test.ts` (3 tests) and `useCanvasContextMenu.test.ts` (6 tests) added. `note-geometry.ts` and `useBoxSelection.test.ts` added in prior work. `DisplayArrow.test.ts` (12 tests) and `DisplayNote.test.ts` (19 tests) added. `selection.test.ts` covers `bringToTop`.)
 
 ---
 
@@ -110,7 +110,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 
 ## Verification
 
-- [ ] Each deliverable has a test (unit, component, or integration). **Partially improved.** New tests: `note-geometry.test.ts` (8 tests), `useBoxSelection.test.ts` (6 tests), `arrow-geometry.test.ts` (5 tests), `useSpatialEditing.test.ts` (4 tests), `DisplayArrow.test.ts` (12 tests), `DisplayNote.test.ts` (19 tests). Major gaps remain: `SpatialPageView.vue` (no component/integration tests), drag/resize end-to-end interaction tests, arrow creation flow tests, sidebar/toolbar integration tests.
+- [ ] Each deliverable has a test (unit, component, or integration). **Partially improved.** New tests: `useCanvasActions.test.ts` (3 tests), `useCanvasContextMenu.test.ts` (6 tests), `note-geometry.test.ts` (8 tests), `useBoxSelection.test.ts` (6 tests), `arrow-geometry.test.ts` (5 tests), `useSpatialEditing.test.ts` (4 tests), `DisplayArrow.test.ts` (12 tests), `DisplayNote.test.ts` (19 tests). Major gaps remain: `SpatialPageView.vue` (no component/integration tests), drag/resize end-to-end interaction tests, arrow creation flow tests, sidebar/toolbar integration tests.
 - [ ] Phase 1 checklist is >80% marked done. **NOT MET.** Strict enforcement of the checklist's "Done = implemented + passing test" rule drops the true completion rate well below 80%.
 
 ---
@@ -127,7 +127,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 - [x] `MainToolbar`, `LeftSidebar`, `RightSidebar`, and `TableContextMenu` are implemented as standalone shadcn components and visible on `/pages/:pageId`.
 - [x] Sidebar panels (`RecentPages`, `FavoritePages`) display real data from API.
 - [x] Arrow geometry reads actual note heights instead of hardcoding `80px`.
-- [ ] `SpatialPageView.vue` is refactored to avoid god-component anti-pattern. **Partial.** Keyboard shortcuts extracted to `useSpatialKeyboard.ts`; box selection extracted to `useBoxSelection.ts`; arrow drag extracted to `useArrowDrag.ts`; arrow reconnect extracted to `useArrowReconnect.ts`; note drag extracted to `useNoteDrag.ts`; note geometry extracted to `note-geometry.ts`. Component reduced from ~740 to ~365 lines. Remaining inline: context menu handlers, fit-to-screen, canvas double-click.
+- [x] `SpatialPageView.vue` is refactored to avoid god-component anti-pattern. Keyboard shortcuts extracted to `useSpatialKeyboard.ts`; box selection extracted to `useBoxSelection.ts`; arrow drag extracted to `useArrowDrag.ts`; arrow reconnect extracted to `useArrowReconnect.ts`; note drag extracted to `useNoteDrag.ts`; note geometry extracted to `note-geometry.ts`; canvas actions extracted to `useCanvasActions.ts`; context menu handlers extracted to `useCanvasContextMenu.ts`. Component reduced from ~740 to ~260 lines.
 - [x] Selection implements `bringToTop`. Formatting integration and active element/region navigation remain missing.
 - [ ] Container rendering enforces `stretchChildren`, `wrapChildren`, and spatial vs non-spatial layout modes.
 - [ ] Manual QA session with 3+ users finds no blocking usability issues.

new-deepnotes/apps/web/src/features/spatial/SpatialPageView.vue

@@ -14,13 +14,13 @@ import { useSpatialSelection } from "./selection";
 import { useSpatialEditing } from "./useSpatialEditing";
 import { useSpatialUndoRedo } from "./undo-redo";
 import { useSpatialKeyboard } from "./useSpatialKeyboard";
-import { screenToWorld } from "./spatial-viewport-math";
 import { provideNoteHeights } from "./useNoteHeights";
 import { useBoxSelection } from "./useBoxSelection";
 import { useArrowDrag } from "./useArrowDrag";
 import { useArrowReconnect } from "./useArrowReconnect";
 import { useNoteDrag } from "./useNoteDrag";
-import { copySelection, pastePayload } from "./clipboard";
+import { useCanvasActions } from "./useCanvasActions";
+import { useCanvasContextMenu } from "./useCanvasContextMenu";
 import type { ClipboardNote, ClipboardArrow } from "./clipboard";
 
 const props = defineProps<{
@@ -112,13 +112,6 @@ const pasteCount = ref(0);
 // --- find/replace dialog state ---
 const findReplaceOpen = ref(false);
 
-// --- context menu state ---
-const contextMenu = ref<{
-  open: boolean;
-  x: number;
-  y: number;
-}>({ open: false, x: 0, y: 0 });
-
 const noteById = computed(() => {
   const map = new Map<string, (typeof noteList.value)[0]["model"]>();
   for (const n of noteList.value) {
@@ -174,165 +167,33 @@ const {
   moveNoteOutOfContainer,
 });
 
-function onCanvasDoubleClick(e: MouseEvent) {
-  const canvas = canvasRef.value;
-  if (!canvas || !canvas.rootEl) return;
-
-  const rect = canvas.rootEl.getBoundingClientRect();
-  const cx = rect.left + rect.width / 2;
-  const cy = rect.top + rect.height / 2;
-
-  const world = screenToWorld(
-    e.clientX,
-    e.clientY,
-    cx,
-    cy,
-    canvas.camX,
-    canvas.camY,
-    canvas.zoom,
-  );
-
-  createNoteAt(world.x, world.y, props.defaultNoteTemplate);
-}
-
-function fitToScreen() {
-  const canvas = canvasRef.value;
-  if (!canvas) return;
-
-  // Calculate bounding box of all root notes
-  if (rootNoteList.value.length === 0) {
-    canvas.resetView();
-    return;
-  }
-
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const note of rootNoteList.value) {
-    const wStr = note.model.width.value.expanded;
-    const w = wStr === "Auto" ? 160 : parseFloat(wStr);
-    const h = 80; // Default height estimate
-    const x = note.model.pos.value.x;
-    const y = note.model.pos.value.y;
-
-    minX = Math.min(minX, x);
-    minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x + w);
-    maxY = Math.max(maxY, y + h);
-  }
-
-  canvas.fitToScreen({ minX, minY, maxX, maxY }, 40);
-}
-
-function onCanvasContextMenu(e: MouseEvent) {
-  e.preventDefault();
-  const canvas = canvasRef.value;
-  if (!canvas || !canvas.rootEl) return;
-
-  const rect = canvas.rootEl.getBoundingClientRect();
-  const cx = rect.left + rect.width / 2;
-  const cy = rect.top + rect.height / 2;
-
-  const world = screenToWorld(
-    e.clientX,
-    e.clientY,
-    cx,
-    cy,
-    canvas.camX,
-    canvas.camY,
-    canvas.zoom,
-  );
-
-  contextMenu.value = {
-    open: true,
-    x: e.clientX,
-    y: e.clientY,
-  };
-}
-
-function handleContextMenuCreateNote(x: number, y: number) {
-  const canvas = canvasRef.value;
-  if (!canvas || !canvas.rootEl) return;
-
-  const rect = canvas.rootEl.getBoundingClientRect();
-  const cx = rect.left + rect.width / 2;
-  const cy = rect.top + rect.height / 2;
-
-  const world = screenToWorld(
-    x,
-    y,
-    cx,
-    cy,
-    canvas.camX,
-    canvas.camY,
-    canvas.zoom,
-  );
-
-  createNoteAt(world.x, world.y, props.defaultNoteTemplate);
-}
-
-async function handleContextMenuPaste(payload: { notes: ClipboardNote[]; arrows: ClipboardArrow[] }) {
-  const canvas = canvasRef.value;
-  const centerX = canvas?.camX ?? 0;
-  const centerY = canvas?.camY ?? 0;
-  const offset = pasteCount.value * 32;
-  pasteCount.value += 1;
-
-  const result = pastePayload(payload, {
-    createNote: createNoteAt,
-    createArrow: createArrow,
-    offsetX: centerX + offset,
-    offsetY: centerY + offset,
-  });
-
-  selection.clear();
-  for (const id of result.noteIds) {
-    selection.select(id, "note", true);
-  }
-}
-
-function handleContextMenuDeleteSelected() {
-  for (const id of selection.selectedOfKind("note")) {
-    deleteNote(id);
-  }
-  for (const id of selection.selectedOfKind("arrow")) {
-    deleteArrow(id);
-  }
-  selection.clear();
-}
-
-async function handleContextMenuCopySelected() {
-  const selectedNotes = noteList.value.filter((n) =>
-    selection.isSelected(n.id),
-  );
-  const selectedArrows = arrowList.value.filter((a) =>
-    selection.isSelected(a.id),
-  );
-  if (selectedNotes.length > 0) {
-    await copySelection(selectedNotes, selectedArrows);
-  }
-}
+const { onCanvasDoubleClick, fitToScreen } = useCanvasActions({
+  canvasRef,
+  rootNoteList,
+  createNoteAt,
+  defaultNoteTemplate: props.defaultNoteTemplate,
+});
 
-async function handleContextMenuCutSelected() {
-  const selectedNotes = noteList.value.filter((n) =>
-    selection.isSelected(n.id),
-  );
-  const selectedArrows = arrowList.value.filter((a) =>
-    selection.isSelected(a.id),
-  );
-  if (selectedNotes.length > 0) {
-    await copySelection(selectedNotes, selectedArrows);
-    for (const id of selection.selectedOfKind("note")) {
-      deleteNote(id);
-    }
-    for (const id of selection.selectedOfKind("arrow")) {
-      deleteArrow(id);
-    }
-    selection.clear();
-  }
-}
+const {
+  contextMenu,
+  onCanvasContextMenu,
+  handleContextMenuCreateNote,
+  handleContextMenuPaste,
+  handleContextMenuDeleteSelected,
+  handleContextMenuCopySelected,
+  handleContextMenuCutSelected,
+} = useCanvasContextMenu({
+  canvasRef,
+  selection,
+  noteList,
+  arrowList,
+  createNoteAt,
+  createArrow,
+  deleteNote,
+  deleteArrow,
+  defaultNoteTemplate: props.defaultNoteTemplate,
+  pasteCount,
+});
 
 // --- keyboard shortcuts ---
 const { onKeyDown } = useSpatialKeyboard({