docs: update spatial parity checklist with test coverage for UI components and note context menu implementation

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` | `useCanvasActions.ts:onCanvasDoubleClick` | **Done** | `useCanvasActions.test.ts` |
+| 1.1 | Create note (double-click canvas) | `DisplayPage/DisplayWorld/DisplayNote/CreateNote.ts` | `useCanvasActions.ts:onCanvasDoubleClick` | **Done** | `useCanvasActions.test.ts` (5 tests) |
 | 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` |
@@ -96,7 +96,7 @@
 | 4.4 | Zoom (Ctrl+wheel toward cursor) | `camera/zoom.ts` | `useSpatialViewport.ts:onWheel` | **Done** | `spatial-viewport-math.test.ts` |
 | 4.5 | Zoom (pinch on touch) | `camera/zoom.ts` | `useSpatialViewport.ts:onPointerDown/Move` | **Done** | — |
 | 4.6 | Zoom reset button | `camera/zoom.ts` | `SpatialPageView.vue:resetView button` | **Done** | — |
-| 4.7 | Fit-to-screen | `camera/zoom.ts` | `useSpatialViewport.ts:fitToScreen + SpatialPageView.vue:fitToScreen button` | **Done** | — |
+| 4.7 | Fit-to-screen | `camera/zoom.ts` | `useSpatialViewport.ts:fitToScreen + SpatialPageView.vue:fitToScreen button` | **Done** | `useCanvasActions.test.ts` |
 | 4.8 | Zoom indicator (%) | `camera/zoom.ts` | `SpatialPageView.vue:zoom %` | **Done** | — |
 | 4.9 | Grid background | `camera/grid.ts` | `SpatialWorldCanvas.vue:linear-gradient` | **Done** | — |
 
@@ -172,14 +172,14 @@
 
 | # | Feature | Legacy reference | New file(s) | Status | Test file |
 |---|---------|------------------|-------------|--------|-----------|
-| 12.1 | Fullscreen immersive shell | `PagesLayout.vue` | `PageLayout.vue` | **Done** | — |
-| 12.2 | Main toolbar (logo, breadcrumb, global nav) | `MainToolbar.vue` | `MainToolbar.vue` | **Done** | — |
+| 12.1 | Fullscreen immersive shell | `PagesLayout.vue` | `PageLayout.vue` | **Done** | `PageLayout.test.ts` (10 tests) |
+| 12.2 | Main toolbar (logo, breadcrumb, global nav) | `MainToolbar.vue` | `MainToolbar.vue` | **Done** | `MainToolbar.test.ts` (7 tests) |
 | 12.3 | Toolbar page action buttons | `MainToolbar/Actions.vue` | — | **Not started** | — |
-| 12.4 | Left sidebar (resizable, collapsible) | `LeftSidebar.vue` | `PageLayout.vue:left aside` | **Done** | — |
+| 12.4 | Left sidebar (resizable, collapsible) | `LeftSidebar.vue` | `PageLayout.vue:left aside` | **Done** | `PageLayout.test.ts` |
 | 12.5 | Left sidebar — Current path | `LeftSidebar/CurrentPath.vue` | `PageEditorView.vue:Path card` | **Done** | — |
-| 12.6 | Left sidebar — Recent pages | `LeftSidebar/RecentPages.vue` | `RecentPagesCard.vue` | **Done** | — |
-| 12.7 | Left sidebar — Favorite pages | `LeftSidebar/FavoritePages.vue` | `FavoritePagesCard.vue` | **Done** | — |
-| 12.8 | Left sidebar — Selected pages | `LeftSidebar/SelectedPages.vue` | `SelectedPagesCard.vue` | **Done** | — |
+| 12.6 | Left sidebar — Recent pages | `LeftSidebar/RecentPages.vue` | `RecentPagesCard.vue` | **Done** | `RecentPagesCard.test.ts` (5 tests) |
+| 12.7 | Left sidebar — Favorite pages | `LeftSidebar/FavoritePages.vue` | `FavoritePagesCard.vue` | **Done** | `FavoritePagesCard.test.ts` (5 tests) |
+| 12.8 | Left sidebar — Selected pages | `LeftSidebar/SelectedPages.vue` | `SelectedPagesCard.vue` | **Done** | `SelectedPagesCard.test.ts` (5 tests) |
 | 12.9 | Left sidebar — Collab status | `LeftSidebar/CollabStatus.vue` | `PageEditorCollabStatusCard.vue` | **Done** | — |
 | 12.10 | Right sidebar (collapsible) | `RightSidebar.vue` | `PageLayout.vue:right aside` | **Done** | — |
 | 12.11 | Right sidebar — Note properties | `RightSidebar/NoteProperties.vue` | `NotePropertiesCard.vue` | **Partial** | — |
@@ -189,7 +189,7 @@
 | 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` + `useCanvasContextMenu.ts` | **Partial** | `useCanvasContextMenu.test.ts` |
-| 12.18 | Per-note context menu | `NoteContextMenu.vue` | — | **Not started** | — |
+| 12.18 | Per-note context menu | `NoteContextMenu.vue` | `NoteContextMenu.vue` + `useNoteContextMenu.ts` | **Done** | `useNoteContextMenu.test.ts` (5 tests) |
 | 12.19 | Page state screens (8 total) | `DisplayScreens/*.vue` | `PageStateScreens.vue` + 8 components | **Done** | — |
 | 12.20 | Loading overlay | `LoadingOverlay.vue` | `PageStateScreens.vue` (inline) | **Partial** | — |
 | 12.21 | Floating UI — zoom indicator | `FloatingUI/Zoom.vue` | `SpatialPageView.vue:zoom %` | **Done** | — |
@@ -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: `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.
+- [ ] Every "Done" item has a passing automated test. **VIOLATED.** ~15 UI/interaction rows marked "Done" still have "—" in the Test file column. Progress since last evaluation: `useCanvasActions.test.ts` (5 tests), `useCanvasContextMenu.test.ts` (6 tests), `note-geometry.test.ts` (10 tests), `useBoxSelection.test.ts` (6 tests), `arrow-geometry.test.ts` (5 tests), `useSpatialEditing.test.ts` (4 tests) added. `DisplayArrow.test.ts` (12 tests), `DisplayNote.test.ts` (21 tests), `MainToolbar.test.ts` (7 tests), `PageLayout.test.ts` (10 tests), `RecentPagesCard.test.ts` (5 tests), `FavoritePagesCard.test.ts` (5 tests), `SelectedPagesCard.test.ts` (5 tests), `useNoteContextMenu.test.ts` (5 tests) also added. Per-note context menu (12.18) implemented and tested. Remaining gaps: `SpatialPageView.vue` (no component/integration tests), drag/resize end-to-end interaction, arrow creation/reconnection flow, sidebar properties cards.
 - [ ] 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

@@ -1,6 +1,6 @@
 # DeepNotes Restart Plan — Index
 
-> **Last updated:** 2026-05-31 (Phase 6 in progress. `SpatialPageView.vue` god-component refactored — box selection, arrow drag, arrow reconnect, note drag extracted into dedicated composables. `note-geometry.ts` and `useBoxSelection.test.ts` added. **New:** `DisplayArrow.test.ts` (12 tests) and expanded `DisplayNote.test.ts` (19 tests) added. `selection.test.ts` now covers `bringToTop` explicitly. See `phase-6-spatial-polish.md` and `SPATIAL_PARITY_CHECKLIST.md` for details. Phase 9 pending.)  
+> **Last updated:** 2026-05-31 (Phase 6 in progress. **New this session:** `MainToolbar.test.ts` (7 tests), `PageLayout.test.ts` (10 tests), `useCanvasActions.test.ts` (5 tests total), `RecentPagesCard.test.ts` (5 tests), `FavoritePagesCard.test.ts` (5 tests), `SelectedPagesCard.test.ts` (5 tests), `useNoteContextMenu.test.ts` (5 tests). `DisplayNote.test.ts` expanded to 21 tests. `fitToScreen` now reads actual note heights from reactive map. **Per-note context menu implemented:** `NoteContextMenu.vue` + `useNoteContextMenu.ts` composable wired into `DisplayNote.vue` and `SpatialPageView.vue`. See `phase-6-spatial-polish.md` and `SPATIAL_PARITY_CHECKLIST.md` for details. Phase 9 pending.)  
 > **This document replaces `docs/RESTART_PLAN.md`.** If a prior statement conflicts with this one, this version wins.
 
 ---
@@ -77,15 +77,15 @@ 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:** `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.
+- **`docs/SPATIAL_PARITY_CHECKLIST.md` created.** 82+ rows. Schema diff table complete. **Test coverage improved this session:** `MainToolbar.test.ts` (7), `PageLayout.test.ts` (10), `RecentPagesCard.test.ts` (5), `FavoritePagesCard.test.ts` (5), `SelectedPagesCard.test.ts` (5), `useNoteContextMenu.test.ts` (5), `useCanvasActions.test.ts` (5), `DisplayNote.test.ts` (21), `DisplayArrow.test.ts` (12), `useCanvasContextMenu.test.ts` (6), `note-geometry.test.ts` (10), `useBoxSelection.test.ts` (6), `arrow-geometry.test.ts` (5), `useSpatialEditing.test.ts` (4), `selection.test.ts` (12). Remaining gaps: `SpatialPageView.vue` (no component/integration tests), drag/resize end-to-end interaction, arrow creation/reconnection, sidebar properties cards.
 - **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.
 - **Arrow labels fixed.** `DisplayArrow.vue` now uses `NoteTiptapEditor` on `Y.XmlFragment` instead of raw `<input>`. Proper collaborative rich-text editing.
-- **Arrow geometry now reads actual note heights.** `DisplayNote.vue` publishes `offsetHeight` into a reactive `noteHeights` map via `provideNoteHeights`/`useNoteHeights`. `DisplayArrow.vue` reads heights from the map instead of hardcoding `80px`.
+- **Arrow geometry and fitToScreen now read actual note heights.** `DisplayNote.vue` publishes `offsetHeight` into a reactive `noteHeights` map via `provideNoteHeights`/`useNoteHeights`. `DisplayArrow.vue` and `useCanvasActions.ts:fitToScreen` read heights from the map instead of hardcoding `80px`.
 - **Note drag `Teleport` overlay fixed.** Overlay now applies `scale(zoom)` and uses `posOverride` so the preview tracks the cursor correctly at all zoom levels.
 - **Page state screens exist but 4 states are indistinguishable.** `page-deleted`, `group-deleted`, `invited`, `rejected` all map to the same generic error UI because the API does not return distinct error codes.
-- **Context menu exists for canvas but not for individual notes.** `CanvasContextMenu.vue` (right-click on empty canvas) is implemented. No per-note context menu exists.
+- **Per-note context menu implemented.** `NoteContextMenu.vue` + `useNoteContextMenu.ts` composable wired into `DisplayNote.vue` and `SpatialPageView.vue`. Bring-to-front, send-to-back, delete actions wired. `useNoteContextMenu.test.ts` (5 tests) covers the composable.
 - **Arrow geometry partially fixed.** `DisplayArrow.vue` now uses rectangle-edge intersection for `bodyType === 'line'` via `arrow-geometry.ts`. Interregional coordinate transforms and `fakePos`/`looseEndpoint` rendering remain missing.
 - **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.

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` 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`.)
+> **Status:** In progress (2026-05-31 — **New this session:** `MainToolbar.test.ts` (7), `PageLayout.test.ts` (10), `RecentPagesCard.test.ts` (5), `FavoritePagesCard.test.ts` (5), `SelectedPagesCard.test.ts` (5), `useNoteContextMenu.test.ts` (5) added. `DisplayNote.test.ts` expanded to 21 tests. `fitToScreen` now reads actual note heights from reactive map. **Per-note context menu implemented:** `NoteContextMenu.vue` + `useNoteContextMenu.ts` composable wired into `DisplayNote.vue` and `SpatialPageView.vue`. `SpatialPageView.vue` previously refactored. Canvas actions, box selection, arrow drag, arrow reconnect, note drag previously extracted into composables.)
 
 ---
 
@@ -56,7 +56,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | `MainToolbar` (shadcn) | **Partial** | Standalone `MainToolbar.vue` extracted from `PageLayout.vue`. Still missing: page action buttons, insert dialogs, zoom other than reset/fit-to-screen |
 | `LeftSidebar` (shadcn) — Recent, Favorites, Selected, Current path | **Partial** | Resizable collapsible sidebar shell exists. `CurrentPath` and `CollabStatus` wired. `RecentPagesCard` and `FavoritePagesCard` now load real data via `useUserPageLists` composable. `SelectedPagesCard` remains client-side only |
 | `RightSidebar` (shadcn) — Note/Page/Arrow properties | **Partial** | `NotePropertiesCard`, `ArrowPropertiesCard`, `PagePropertiesCard` are wired and visible. Many legacy fields (wrap, anchor, z-index, timestamps) not exposed. Snapshots, management, backlinks exist |
-| `TableContextMenu` (shadcn) — right-click on canvas | **Partial** | `CanvasContextMenu.vue` exists for canvas background. No per-note context menu |
+| `TableContextMenu` (shadcn) — right-click on canvas | **Partial** | `CanvasContextMenu.vue` exists for canvas background. Per-note context menu (`NoteContextMenu.vue`) implemented and tested. |
 | `LoadingOverlay` during page bootstrap | **Partial** | `PageStateScreens.vue` handles loading/error. No dedicated `LoadingOverlay` component over the canvas |
 | Global CSS for spatial routes (`user-select: none`, `overflow: hidden`, `touch-action: none`) | **Done** | `PageLayout.vue` applies `select-none overflow-hidden` on the shell |
 | Remove `PageEditorTiptapCard.vue` from page route | **Done** | File deleted; no longer imported or rendered |
@@ -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: `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.
+- [ ] Each deliverable has a test (unit, component, or integration). **Partially improved.** New tests this session: `MainToolbar.test.ts` (7), `PageLayout.test.ts` (10), `RecentPagesCard.test.ts` (5), `FavoritePagesCard.test.ts` (5), `SelectedPagesCard.test.ts` (5), `useNoteContextMenu.test.ts` (5), `useCanvasActions.test.ts` (5), `DisplayNote.test.ts` (21), `DisplayArrow.test.ts` (12), `useCanvasContextMenu.test.ts` (6), `note-geometry.test.ts` (10), `useBoxSelection.test.ts` (6), `arrow-geometry.test.ts` (5), `useSpatialEditing.test.ts` (4), `selection.test.ts` (12). Remaining gaps: `SpatialPageView.vue` (no component/integration tests), drag/resize end-to-end interaction, arrow creation/reconnection flow, sidebar properties cards.
 - [ ] 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%.
 
 ---
@@ -126,8 +126,9 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 - [ ] `DisplayArrow.vue` supports full legacy arrow behavior. **PARTIAL.** Curve/line bodies and heads work; line body now has rectangle-edge intersection. Interregional arrows don't transform coordinate spaces; `fakePos`/`looseEndpoint` are not rendered.
 - [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`.
-- [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] Arrow geometry and `fitToScreen` read actual note heights instead of hardcoding `80px`.
+- [x] Per-note context menu (`NoteContextMenu.vue`) implemented with bring-to-front, send-to-back, and delete actions. Tested via `useNoteContextMenu.test.ts` (5 tests).
+- [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`; canvas context menu handlers extracted to `useCanvasContextMenu.ts`; per-note context menu handlers extracted to `useNoteContextMenu.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.