feat: phase 6

Author: gustavotoyota

docs/restart-plan/README.md

@@ -1,6 +1,6 @@
 # DeepNotes Restart Plan — Index
 
-> **Last updated:** 2026-05-31 (Phase 6 re-evaluated. Status corrected from "Complete" to "In Progress". 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. `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.)  
 > **This document replaces `docs/RESTART_PLAN.md`.** If a prior statement conflicts with this one, this version wins.
 
 ---
@@ -86,12 +86,12 @@ A criterion is **not met** until the verification command or check passes in CI.
 - **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.
-- **Arrow geometry is oversimplified.** New `DisplayArrow.vue` uses center-point math. Legacy had rectangle-edge intersection for `bodyType === 'line'`, interregional coordinate transforms, and `fakePos`/`looseEndpoint` rendering.
+- **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.
-- **No `editing` state management.** Legacy tracks which element is being edited, stopping editing when clicking elsewhere. New relies on Tiptap's internal focus, which can lead to conflicting edits.
+- **`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` is a 1,070-line god component.** Legacy distributed responsibility across `Page`, `PageNotes`, `PageArrows`, `PageSelection`, `PageCamera`, `NoteDragging`, `NoteResizing`, etc. The monolithic component violates the spirit of the "No composable > 300 lines" success criterion.
-- **Selection lacks legacy depth.** No `bringToTop` on selection, no formatting integration across selected editors, no active element/region meaningful UI or keyboard navigation. `selectAll` only selects root notes, not descendant arrows.
+- **`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.
+- **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

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 — status corrected after evaluation. Multiple "Done" items were over-reported; see notes below.)
+> **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.)
 
 ---
 
@@ -20,6 +20,8 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Box selection (drag on empty canvas) | **Done** | Threshold-based drag-to-box-select implemented |
 | 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 |
+| `editing` state management | **Done** | `useSpatialEditing.ts` tracks editing note/arrow; Escape and canvas click stop editing; Delete suppressed while editing |
 
 ### 2. Containers
 | Item | Status | Notes |
@@ -81,12 +83,12 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Item | Status | Notes |
 |------|--------|-------|
 | Curve body (`CurveArrow.vue`) | **Done** | Quadratic bezier with perpendicular offset; `bodyType === 'curve'` |
-| Line body (`LineArrow.vue`) | **Done** | Straight line when `bodyType === 'line'` |
+| Line body (`LineArrow.vue`) | **Done** | Straight line when `bodyType === 'line'`; rectangle-edge intersection via `arrow-geometry.ts` |
 | 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 |
-| Arrow source/target anchor positioning | **Done** | `DisplayArrow.vue` geometry now uses `sourceAnchor`/`targetAnchor` when provided |
+| 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 |
 
 ### 9. Find and replace
@@ -108,7 +110,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 
 ## Verification
 
-- [ ] Each deliverable has a test (unit, component, or integration). **Major gaps remain:** `DisplayNote.vue` (only basic render tests), `DisplayArrow.vue` (no 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: `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.
 - [ ] 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%.
 
 ---
@@ -121,11 +123,11 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 - [x] `PageEditorView.vue` renders as a full-screen immersive shell (no scrolling card page).
 - [x] All 8 dedicated page-state screens exist and are reachable. (`page-deleted`/`group-deleted`/`invited`/`rejected` are indistinguishable without richer API error codes.)
 - [ ] `DisplayNote.vue` matches legacy note visuals. **PARTIAL.** Colors use hardcoded 10-color map instead of legacy `colorNameToColorHex` with `lightenByRatio`. Drop zones, arrow handles, and frame styling are simplified. No custom scrollbar handling.
-- [ ] `DisplayArrow.vue` supports full legacy arrow behavior. **PARTIAL.** Curve/line bodies and heads work, but line body lacks rectangle-edge intersection, interregional arrows don't transform coordinate spaces, and `fakePos`/`looseEndpoint` are not rendered.
+- [ ] `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`.
-- [ ] `SpatialPageView.vue` is refactored to avoid god-component anti-pattern. Currently 1,070 lines.
-- [ ] Selection implements `bringToTop`, formatting integration, and active element/region navigation.
+- [ ] `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.
+- [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/DisplayArrow.vue

@@ -4,6 +4,7 @@ import type { ArrowModel } from "./arrow-model";
 import type { NoteModel } from "./note-model";
 import NoteTiptapEditor from "./NoteTiptapEditor.vue";
 import { useNoteHeights } from "./useNoteHeights";
+import { computeArrowEndpoints } from "./arrow-geometry";
 
 const props = defineProps<{
   id: string;
@@ -17,6 +18,7 @@ const emit = defineEmits<{
   select: [];
   toggle: [];
   reconnectStart: [arrowId: string, from: 'source' | 'target']
+  "edit-start": [];
 }>();
 
 const labelFragment = computed(() => props.model.label.value);
@@ -46,30 +48,50 @@ const geometry = computed(() => {
   const t = props.targetModel;
   if (!s || !t) return null;
 
-  // Use anchor positions if provided, otherwise use note centers
   const w1 = s.width.value.expanded;
   const nw1 = w1 === "Auto" ? 160 : parseFloat(w1);
   const h1 = noteHeights.value.get(props.model.source.value) ?? 80;
-  
-  const sourceAnchor = props.model.sourceAnchor.value;
-  const x1 = sourceAnchor 
-    ? s.pos.value.x + sourceAnchor.x 
-    : s.pos.value.x + nw1 / 2;
-  const y1 = sourceAnchor 
-    ? s.pos.value.y + sourceAnchor.y 
-    : s.pos.value.y + h1 / 2;
 
   const w2 = t.width.value.expanded;
   const nw2 = w2 === "Auto" ? 160 : parseFloat(w2);
   const h2 = noteHeights.value.get(props.model.target.value) ?? 80;
-  
+
+  const sourceAnchor = props.model.sourceAnchor.value;
   const targetAnchor = props.model.targetAnchor.value;
-  const x2 = targetAnchor 
-    ? t.pos.value.x + targetAnchor.x 
-    : t.pos.value.x + nw2 / 2;
-  const y2 = targetAnchor 
-    ? t.pos.value.y + targetAnchor.y 
-    : t.pos.value.y + h2 / 2;
+
+  let x1 = s.pos.value.x + nw1 / 2;
+  let y1 = s.pos.value.y + h1 / 2;
+  let x2 = t.pos.value.x + nw2 / 2;
+  let y2 = t.pos.value.y + h2 / 2;
+
+  if (sourceAnchor) {
+    x1 = s.pos.value.x + sourceAnchor.x;
+    y1 = s.pos.value.y + sourceAnchor.y;
+  }
+
+  if (targetAnchor) {
+    x2 = t.pos.value.x + targetAnchor.x;
+    y2 = t.pos.value.y + targetAnchor.y;
+  } else if (props.model.bodyType.value === "line") {
+    // For line body, use rectangle-edge intersection
+    const endpoints = computeArrowEndpoints(
+      s.pos.value,
+      t.pos.value,
+      nw1,
+      h1,
+      nw2,
+      h2,
+      true,
+    );
+    if (!sourceAnchor) {
+      x1 = endpoints.x1;
+      y1 = endpoints.y1;
+    }
+    if (!targetAnchor) {
+      x2 = endpoints.x2;
+      y2 = endpoints.y2;
+    }
+  }
 
   const minX = Math.min(x1, x2);
   const minY = Math.min(y1, y2);
@@ -223,7 +245,7 @@ function onPointerDown(e: PointerEvent) {
       height="32"
       class="pointer-events-auto"
     >
-      <div class="h-full w-full">
+      <div class="h-full w-full" @focusin="emit('edit-start')">
         <NoteTiptapEditor
           :fragment="labelFragment"
           :editable="!props.model.readOnly.value"

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

@@ -23,6 +23,7 @@ const emit = defineEmits<{
   dragstart: [id: string];
   dragend: [id: string];
   arrowDragStart: [payload: { noteId: string }];
+  "edit-start": [];
 }>();
 
 const rootRef = ref<HTMLElement | null>(null);
@@ -279,6 +280,7 @@ function toggleCollapsed() {
       v-if="model.head.enabled.value && !model.collapsing.collapsed.value"
       class="px-2 pt-1"
       @pointerdown.stop
+      @focusin="emit('edit-start')"
     >
       <NoteTiptapEditor
         :fragment="headFrag!"
@@ -292,6 +294,7 @@ function toggleCollapsed() {
       v-if="model.body.enabled.value && !model.collapsing.collapsed.value"
       class="px-2 pb-1"
       @pointerdown.stop
+      @focusin="emit('edit-start')"
     >
       <NoteTiptapEditor
         :fragment="bodyFrag!"