docs: update spatial parity checklist and plan with refactoring progress

Author: gustavotoyota

docs/SPATIAL_PARITY_CHECKLIST.md

@@ -55,8 +55,8 @@
 | 2.1 | Container enabled toggle | `note-collab.ts` `container.enabled` | `note-model.ts:container.enabled` | **Done** | `note-model.test.ts` |
 | 2.2 | Spatial container (free child positioning) | `DisplayNote/Container/Spatial.vue` | `DisplayNote.vue:container children` | **Done** | — |
 | 2.3 | Horizontal container (children in a row) | `note-collab.ts` `container.horizontal` | `DisplayNote.vue:flex-row` | **Done** | — |
-| 2.4 | Drag child out to detach | `DisplayNote/Container/Detach.ts` | `useSpatialPage.ts:moveNoteOutOfContainer` | **Done** | — |
-| 2.5 | Drag note into container to attach | `DisplayNote/Container/Attach.ts` | `SpatialPageView.vue:overlap heuristic` | **Done** | — |
+| 2.4 | Drag child out to detach | `DisplayNote/Container/Detach.ts` | `useNoteDrag.ts:onNoteDragEnd` + `useSpatialPage.ts:moveNoteOutOfContainer` | **Done** | — |
+| 2.5 | Drag note into container to attach | `DisplayNote/Container/Attach.ts` | `useNoteDrag.ts:overlap heuristic` | **Done** | — |
 | 2.6 | Container wrap children toggle | `note-collab.ts` `container.wrapChildren` | `note-model.ts:container.wrapChildren` | **Done** | `note-model.test.ts` |
 | 2.7 | Container stretch children toggle | `note-collab.ts` `container.stretchChildren` | `note-model.ts:container.stretchChildren` | **Done** | `note-model.test.ts` |
 | 2.8 | Container force color inheritance toggle | `note-collab.ts` `container.forceColorInheritance` | `note-model.ts:container.forceColorInheritance` | **Done** | `note-model.test.ts` |
@@ -66,8 +66,8 @@
 
 | # | Feature | Legacy reference | New file(s) | Status | Test file |
 |---|---------|------------------|-------------|--------|-----------|
-| 3.1 | Create arrow (drag from note handle to target) | `DisplayArrow/CreateArrow.ts` | `SpatialPageView.vue:onArrowDragStart/End` | **Done** | — |
-| 3.2 | Delete arrow (Delete key) | `DisplayArrow/DeleteArrow.ts` | `SpatialPageView.vue:onKeyDown` | **Done** | — |
+| 3.1 | Create arrow (drag from note handle to target) | `DisplayArrow/CreateArrow.ts` | `useArrowDrag.ts` | **Done** | — |
+| 3.2 | Delete arrow (Delete key) | `DisplayArrow/DeleteArrow.ts` | `useSpatialKeyboard.ts:onKeyDown` | **Done** | — |
 | 3.3 | Curve body (quadratic bezier) | `DisplayArrow/CurveArrow.vue` | `DisplayArrow.vue:pathD` | **Done** | — |
 | 3.4 | Line body (straight line) | `DisplayArrow/LineArrow.vue` | `DisplayArrow.vue:pathD` + `arrow-geometry.ts` | **Done** | `arrow-geometry.test.ts` |
 | 3.5 | Arrow heads (open chevron SVG markers) | `DisplayArrow/OpenHead.vue` | `DisplayArrow.vue:marker` | **Done** | — |
@@ -76,7 +76,7 @@
 | 3.8 | Body style toggle (`solid`/etc.) | `arrow.ts` `bodyStyle` | `arrow-model.ts:bodyStyle` | **Done** | `arrow-model.test.ts` |
 | 3.9 | Arrow label (Tiptap on `Y.XmlFragment`) | `DisplayArrow/ArrowLabel.vue` | `DisplayArrow.vue:NoteTiptapEditor` | **Done** | — |
 | 3.10 | Hitbox (thick invisible stroke) | `DisplayArrow/ArrowHitbox.vue` | `DisplayArrow.vue:transparent stroke` | **Done** | — |
-| 3.11 | Drag-to-reconnect | `DisplayArrow/Reconnect.ts` | `SpatialPageView.vue:onReconnectPointerMove/Up` | **Done** | — |
+| 3.11 | Drag-to-reconnect | `DisplayArrow/Reconnect.ts` | `useArrowReconnect.ts` | **Done** | — |
 | 3.12 | Arrow color matching note logic | `DisplayArrow/ArrowColor.ts` | `DisplayArrow.vue:arrowColor` | **Partial** | — |
 | 3.13 | Arrow read-only state | `arrow.ts` `readOnly` | `arrow-model.ts:readOnly` | **Done** | `arrow-model.test.ts` |
 | 3.14 | Arrow timestamps (`createdAt`, `editedAt`) | `arrow.ts` | `arrow-model.ts:createdAt, editedAt` | **Done** | `arrow-model.test.ts` |
@@ -106,7 +106,7 @@
 |---|---------|------------------|-------------|--------|-----------|
 | 5.1 | Click to select note | `selection/select.ts` | `DisplayNote.vue:onPointerDown` | **Done** | — |
 | 5.2 | Ctrl+click to toggle selection | `selection/select.ts` | `DisplayNote.vue:onPointerDown` | **Done** | — |
-| 5.3 | Box selection (drag on empty canvas) | `selection/boxSelect.ts` | `SpatialPageView.vue:box selection` | **Done** | — |
+| 5.3 | Box selection (drag on empty canvas) | `selection/boxSelect.ts` | `useBoxSelection.ts` | **Done** | `useBoxSelection.test.ts` |
 | 5.4 | Select all (`Ctrl+A`) | `selection/selectAll.ts` | `SpatialPageView.vue:onKeyDown` | **Done** | — |
 | 5.5 | Active element tracking | `selection/active.ts` | `useSpatialSelection.ts:activeId` | **Partial** | `selection.test.ts` |
 | 5.6 | Active region tracking | `selection/activeRegion.ts` | `useSpatialSelection.ts:activeRegionId` | **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.** ~35+ UI/interaction rows marked "Done" still have "—" in the Test file column. Progress since last evaluation: `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, box selection, 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: `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.
 - [ ] 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. `useSpatialEditing`, `bringToTop`, line-body arrow geometry, and `useSpatialKeyboard` extracted. 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. `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. 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.
 
 ---
@@ -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 (~150 lines) extracted to `useSpatialKeyboard.ts`. Still a large component; further extraction needed for drag, resize, box-select, and arrow-reconnection logic.
+- **`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.
 - **Selection partially improved.** `bringToTop` zIndex bump on selection is now implemented. 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`. **However, `SpatialPageView.vue` is a 1,070-line god component that violates the spirit of this criterion.**
+- **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`.
 - **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 — `useSpatialEditing`, `bringToTop`, line-body arrow geometry, and `useSpatialKeyboard` extracted since last evaluation. Multiple "Done" items were over-reported; see notes below.)
+> **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.)
 
 ---
 
@@ -17,7 +17,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Item | Status | Notes |
 |------|--------|-------|
 | Multi-select (ctrl/cmd + click) | **Done** | `SpatialPageView.vue` handles toggle via Ctrl+click |
-| Box selection (drag on empty canvas) | **Done** | Threshold-based drag-to-box-select implemented |
+| Box selection (drag on empty canvas) | **Done** | Extracted to `useBoxSelection.ts`; threshold-based drag-to-box-select with world-space intersection. Tested in `useBoxSelection.test.ts`. |
 | Select all (`Ctrl+A`) | **Done** | `onKeyDown` in `SpatialPageView.vue` |
 | Active element / active region tracking | **Partial** | `useSpatialSelection` has `activeId` and `activeRegionId` ref but no real active-region UI or keyboard navigation |
 | `bringToTop` on selection | **Done** | `useSpatialSelection` bumps selected note `zIndex` above other selected notes |
@@ -29,8 +29,8 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Note can contain child notes | **Done** | `container.enabled` and `container.children` wired in Yjs |
 | Spatial container (free child positioning) | **Done** | Children rendered with world offset inside parent |
 | Horizontal container (children in a row) | **Done** | `container.horizontal` flag + `flex-row` class in `DisplayNote.vue` |
-| Drag child out to detach | **Done** | `onNoteDragEnd` + `moveNoteOutOfContainer` |
-| Drag note into container to attach | **Done** | Overlap-area heuristic in `SpatialPageView.vue` |
+| Drag child out to detach | **Done** | `useNoteDrag.ts:onNoteDragEnd` + `moveNoteOutOfContainer` |
+| Drag note into container to attach | **Done** | Overlap-area heuristic in `useNoteDrag.ts` |
 
 ### 3. Clipboard
 | Item | Status | Notes |
@@ -87,7 +87,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Arrow heads (`OpenHead.vue`) | **Done** | SVG `<marker>` chevron heads; `sourceHead`/`targetHead` supported |
 | Arrow label (editable `Y.XmlFragment`) | **Done** | `NoteTiptapEditor` at midpoint. Proper collaborative rich-text editing on `Y.XmlFragment` |
 | Hitbox (thick invisible stroke) | **Done** | `stroke="transparent" stroke-width="20"` pointer-events-auto hitbox |
-| Drag-to-reconnect | **Done** | Connection zones + `onReconnectPointerMove/Up` in `SpatialPageView.vue` wired |
+| Drag-to-reconnect | **Done** | Extracted to `useArrowReconnect.ts`. Connection zones + world-space note detection on pointer move. |
 | Arrow source/target anchor positioning | **Done** | `DisplayArrow.vue` geometry uses `sourceAnchor`/`targetAnchor` when provided; line body falls back to rectangle-edge intersection |
 | Color matching note color logic | **Partial** | Same hardcoded 10-color map used, but `inherit` logic may not cascade correctly for arrows |
 
@@ -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: `arrow-geometry.test.ts` (5 tests), `useSpatialEditing.test.ts` (4 tests). Major gaps remain: `DisplayNote.vue` (only basic render tests), `DisplayArrow.vue` (no component tests), `SpatialPageView.vue` (no component/integration tests), drag/resize interaction tests, box selection tests, arrow creation/reconnection tests, sidebar/toolbar integration tests.
+- [ ] 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). Major gaps remain: `DisplayNote.vue` (only basic render tests), `DisplayArrow.vue` (no component tests), `SpatialPageView.vue` (no component/integration tests), drag/resize interaction tests, arrow creation/reconnection 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. Keyboard shortcuts extracted to `useSpatialKeyboard.ts`; drag, resize, box-select, and arrow-reconnection logic still inline.
+- [ ] `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] 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.