docs: fix hardcoded note heights in geometry calculations - getNoteRect now accepts heights parameter from useNoteHeights, useArrowDrag uses actual note heights for source origin, and fitToScreen prioritizes selected notes over all root notes

Author: gustavotoyota

docs/SPATIAL_PARITY_CHECKLIST.md

@@ -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.
-- [x] Every "Done" item has a passing automated test. **205 tests passing across 28 test files in `features/spatial/` as of 2026-06-01.** Test gaps filled: `SpatialPageView.test.ts` now covers delete note (1.2), teleport overlay (1.15), z-index ordering (1.21), zoom reset (4.6), zoom indicator (4.8), selection count (5.7), undo/redo buttons (8.3). `CollabAvatars.test.ts` (4 tests) added for user avatars on canvas (12.27). `PagePropertiesCard.test.ts` (5 tests) added for page properties (12.13). Partial items promoted to Done: note drop zones (1.16), arrow handles (1.17), note frame styling (1.19), scrollbar handling (1.23), arrow color matching (3.12), active element tracking (5.5), search across note head/body (9.2), awareness / remote user avatars (10.4), note properties (12.11), arrow properties (12.12), page properties (12.13), canvas context menu (12.17). Remaining minor gaps: active region tracking (5.6), loading overlay (12.20), some camera pan interactions (4.2/4.3). **Known quality issues discovered in independent evaluation:** `note-geometry.ts:getNoteRect` hardcodes note height as `80px` (should use `useNoteHeights`); `useArrowDrag.ts` hardcodes `sourceNote.pos.y + 40` for arrow drag origin; interregional arrows are schema-only (3.16); selection formatting integration is missing; color system lacks legacy `light`/`highlight` variants.
+- [x] Every "Done" item has a passing automated test. **208 tests passing across 28 test files in `features/spatial/` as of 2026-06-01.** Test gaps filled: `SpatialPageView.test.ts` now covers delete note (1.2), teleport overlay (1.15), z-index ordering (1.21), zoom reset (4.6), zoom indicator (4.8), selection count (5.7), undo/redo buttons (8.3). `CollabAvatars.test.ts` (4 tests) added for user avatars on canvas (12.27). `PagePropertiesCard.test.ts` (5 tests) added for page properties (12.13). Partial items promoted to Done: note drop zones (1.16), arrow handles (1.17), note frame styling (1.19), scrollbar handling (1.23), arrow color matching (3.12), active element tracking (5.5), search across note head/body (9.2), awareness / remote user avatars (10.4), note properties (12.11), arrow properties (12.12), page properties (12.13), canvas context menu (12.17). Remaining minor gaps: active region tracking (5.6), loading overlay (12.20), some camera pan interactions (4.2/4.3). **Quality issues fixed (2026-06-01):** `note-geometry.ts:getNoteRect` now accepts `heights` parameter from `useNoteHeights` instead of hardcoding `80px`; `useArrowDrag.ts` uses actual note heights for source origin; `useCanvasActions.fitToScreen` now considers selection bounds first. **Remaining quality issues:** interregional arrows are schema-only (3.16); selection formatting integration is missing; color system lacks legacy `light`/`highlight` variants.
 - [x] Phase 6 is not declared done until ≥ 80% of rows are **Done**. **MET.** 72 of 82 rows (88%) are now Done.
 
 ---

docs/restart-plan/README.md

@@ -77,10 +77,13 @@ A criterion is **not met** until the verification command or check passes in CI.
 
 ### Phase 6 — Spatial canvas polish (**Complete**)
 
-All major deliverables implemented and tested. 88% of `docs/SPATIAL_PARITY_CHECKLIST.md` rows are Done. Independent evaluation (see `phase-6-spatial-polish.md`) confirmed genuine parity with a cleaner architecture, but identified these gaps ordered by severity:
+All major deliverables implemented and tested. 88% of `docs/SPATIAL_PARITY_CHECKLIST.md` rows are Done. Independent evaluation (see `phase-6-spatial-polish.md`) confirmed genuine parity with a cleaner architecture. Two critical gaps were **fixed on 2026-06-01**; remaining gaps are non-blocking:
 
-1. **`note-geometry.ts` hardcodes note height as `80px`** (`getNoteRect`). Affects box selection accuracy and container overlap detection. `DisplayNote.vue` publishes real heights via `useNoteHeights`, but `getNoteRect` ignores them. `useArrowDrag.ts` also hardcodes `sourceNote.pos.y + 40` for arrow drag origin. **Functional bug — should be fixed before cutover.**
-2. **`fitToScreen` only uses `rootNoteList` bounds.** Legacy `PageCamera.fitToScreen()` considers selection first, then falls back to all page elements.
+**Fixed (2026-06-01):**
+1. ~~**`note-geometry.ts` hardcodes note height as `80px`**~~ `getNoteRect` now accepts `heights` from `useNoteHeights`. All callers (`useBoxSelection`, `useNoteDrag`, `useArrowReconnect`) pass actual rendered heights. `useArrowDrag.ts` no longer hardcodes `sourceNote.pos.y + 40`.
+2. ~~**`fitToScreen` only uses `rootNoteList` bounds**~~ `useCanvasActions` now accepts `selectedNoteIds`; `fitToScreen` prioritizes selected notes, falling back to all root notes.
+
+**Remaining (non-blocking):**
 3. **Interregional arrows are schema-only.** `interregional`, `fakePos`, `looseEndpoint` fields exist in Yjs but `DisplayArrow.vue` does not render cross-region arrows with fake endpoints.
 4. **Selection formatting integration is missing.** Legacy `PageSelection.format()` allowed applying bold/italic/etc across all selected note editors. No equivalent in new code.
 5. **Color system is simplified.** Legacy had `light`/`highlight`/`base`/`final` color variants via `lightenByRatio`. New code uses flat 10-color map with `/18` opacity tint only.
@@ -104,7 +107,7 @@ Pending infrastructure/deployment:
 
 - **Realtime notification toast** — only `/notifications` page exists, no badge/toast.
 - **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.
-- **Spatial: hardcoded note heights in geometry** — `note-geometry.ts:getNoteRect` hardcodes `const h = 80;` and `useArrowDrag.ts` hardcodes `sourceNote.pos.y + 40`. These should read actual rendered heights from `useNoteHeights` before cutover. See `phase-6-spatial-polish.md` Evaluation findings.
+- ~~**Spatial: hardcoded note heights in geometry**~~ **FIXED (2026-06-01).** `note-geometry.ts:getNoteRect` now reads actual rendered heights via optional `heights` parameter. `useArrowDrag.ts` uses `noteHeights` for source origin. See `phase-6-spatial-polish.md` Evaluation findings.
 - **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

@@ -125,8 +125,8 @@ An independent codebase audit compared legacy (`apps/client/src/code/pages/page/
 4. **Test coverage is strong.** 205 tests across 28 files using real Yjs documents (not mocks).
 
 ### Gaps identified (ordered by severity)
-1. **`note-geometry.ts` hardcodes note height as `80px`** (`getNoteRect`). This affects box selection accuracy and container overlap detection. `DisplayNote.vue` publishes real heights via `useNoteHeights`, but `getNoteRect` ignores them. Similarly, `useArrowDrag.ts` hardcodes `sourceNote.pos.y + 40` for arrow drag origin. **Functional bug — should be fixed before cutover.**
-2. **`fitToScreen` only uses `rootNoteList` bounds.** Legacy `PageCamera.fitToScreen()` considers selection first, then falls back to all page elements.
+1. ~~**`note-geometry.ts` hardcodes note height as `80px`**~~ **FIXED (2026-06-01).** `getNoteRect` now accepts an optional `heights` parameter and reads actual rendered heights from `useNoteHeights`. All callers (`useBoxSelection`, `useNoteDrag`, `useArrowReconnect`) updated to pass heights. `useArrowDrag.ts` now uses `noteHeights.value.get(sourceNote.id) ?? 80` instead of hardcoded `+ 40`. New tests added in `note-geometry.test.ts` and `useCanvasActions.test.ts`.
+2. ~~**`fitToScreen` only uses `rootNoteList` bounds**~~ **FIXED (2026-06-01).** `useCanvasActions` now accepts `selectedNoteIds` and `fitToScreen` prioritizes selected note bounds, falling back to all root notes when nothing is selected. Legacy behavior matched.
 3. **Interregional arrows are schema-only.** `arrow-model.ts` exposes `interregional`, `fakePos`, `looseEndpoint`, but `DisplayArrow.vue` does not implement legacy's sophisticated interregional rendering (cross-region arrows with fake endpoints).
 4. **Selection formatting integration is missing.** Legacy `PageSelection.format()`, `toggleMark()`, `toggleNode()` allow applying bold/italic/etc across all selected note editors. New selection has no equivalent.
 5. **Color system is simplified.** Legacy uses `colorNameToColorHex` with `light`/`highlight`/`base`/`final` variants (`lightenByRatio`). New code uses a flat hardcoded 10-color map with a single `/18` opacity tint.
@@ -137,7 +137,7 @@ An independent codebase audit compared legacy (`apps/client/src/code/pages/page/
 
 ## Verification
 
-- [x] Each deliverable has a test (unit, component, or integration). **Met.** 205 tests passing across 28 test files in `features/spatial/`.
+- [x] Each deliverable has a test (unit, component, or integration). **Met.** 208 tests passing across 28 test files in `features/spatial/`.
 - [x] Phase 1 checklist is >80% marked done. **MET.** 72 of 82 rows (88%) are Done.
 
 ---
@@ -153,7 +153,7 @@ An independent codebase audit compared legacy (`apps/client/src/code/pages/page/
 - [x] `DisplayArrow.vue` supports full legacy arrow behavior. **Done.** Curve/line bodies and heads work; line body has rectangle-edge intersection; arrow color matching is implemented and tested. Interregional coordinate transforms and `fakePos`/`looseEndpoint` rendering remain minor gaps.
 - [x] `MainToolbar`, `LeftSidebar`, `RightSidebar`, and `TableContextMenu` are implemented as standalone shadcn components and visible on `/pages/:pageId`. `PageToolbarActions.vue` (insert note/arrow, zoom in/out, fit-to-screen) is wired into the toolbar actions slot.
 - [x] Sidebar panels (`RecentPages`, `FavoritePages`) display real data from API.
-- [ ] Arrow geometry and `fitToScreen` read actual note heights instead of hardcoding `80px`. **NOT MET.** `note-geometry.ts:getNoteRect` still hardcodes `const h = 80;`. `useArrowDrag.ts` hardcodes `sourceNote.pos.y + 40` for arrow drag origin. These should read actual rendered heights via `useNoteHeights` before cutover.
+- [x] Arrow geometry and `fitToScreen` read actual note heights instead of hardcoding `80px`. **MET (2026-06-01).** `note-geometry.ts:getNoteRect` now accepts optional `heights` parameter and falls back to `80` only when height is unavailable. `useArrowDrag.ts` uses `noteHeights.value.get(sourceNote.id) ?? 80` for source origin. `useCanvasActions.fitToScreen` already used heights correctly; now also considers selection bounds first.
 - [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.

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

@@ -182,6 +182,7 @@ const {
 const { onCanvasDoubleClick, fitToScreen } = useCanvasActions({
   canvasRef,
   rootNoteList,
+  selectedNoteIds: selection.selectedIds,
   createNoteAt,
   defaultNoteTemplate: props.defaultNoteTemplate,
 });

new-deepnotes/apps/web/src/features/spatial/note-geometry.test.ts

@@ -99,6 +99,43 @@ describe("note-geometry", () => {
       });
     });
 
+    it("reads actual height from heights map when provided", () => {
+      const noteList = [
+        {
+          id: "n1",
+          model: {
+            pos: { value: { x: 0, y: 0 } },
+            width: { value: { expanded: "Auto" } },
+          } as unknown as NoteModel,
+        },
+      ];
+      const heights = new Map([["n1", 120]]);
+      expect(getNoteRect("n1", noteList, new Map(), heights)).toEqual({
+        x: 0,
+        y: 0,
+        width: 160,
+        height: 120,
+      });
+    });
+
+    it("falls back to 80 when heights map is missing the note", () => {
+      const noteList = [
+        {
+          id: "n1",
+          model: {
+            pos: { value: { x: 0, y: 0 } },
+            width: { value: { expanded: "Auto" } },
+          } as unknown as NoteModel,
+        },
+      ];
+      expect(getNoteRect("n1", noteList, new Map(), new Map())).toEqual({
+        x: 0,
+        y: 0,
+        width: 160,
+        height: 80,
+      });
+    });
+
     it("returns null for missing note", () => {
       expect(getNoteRect("missing", [], new Map())).toBeNull();
     });

new-deepnotes/apps/web/src/features/spatial/note-geometry.ts

@@ -46,13 +46,14 @@ export function getNoteRect(
   noteId: string,
   noteList: { id: string; model: NoteModel }[],
   parentOf: Map<string, string>,
+  heights?: Map<string, number>,
 ): NoteRect | null {
   const entry = noteList.find((n) => n.id === noteId);
   if (!entry) return null;
   const pos = getNoteEffectiveWorldPos(noteId, noteList, parentOf);
   if (!pos) return null;
   const wStr = entry.model.width.value.expanded;
   const w = wStr === "Auto" ? 160 : parseFloat(wStr);
-  const h = 80;
+  const h = heights?.get(noteId) ?? 80;
   return { x: pos.x, y: pos.y, width: w, height: h };
 }

new-deepnotes/apps/web/src/features/spatial/useArrowDrag.ts

@@ -2,6 +2,7 @@ import { computed, ref } from "vue";
 import type { Ref } from "vue";
 import type { NoteModel } from "./note-model";
 import { worldToScreen } from "./spatial-viewport-math";
+import { useNoteHeights } from "./useNoteHeights";
 import type { ClipboardArrow } from "./clipboard";
 
 export interface UseArrowDragInput {
@@ -17,6 +18,7 @@ export interface UseArrowDragInput {
 }
 
 export function useArrowDrag(input: UseArrowDragInput) {
+  const { heights: noteHeights } = useNoteHeights();
   const arrowDrag = ref<{
     sourceId: string;
     endX: number;
@@ -39,9 +41,10 @@ export function useArrowDrag(input: UseArrowDragInput) {
 
     const wStr = sourceNote.model.width.value.expanded;
     const w = wStr === "Auto" ? 160 : parseFloat(wStr);
+    const h = noteHeights.value.get(sourceNote.id) ?? 80;
     const sourceScreen = worldToScreen(
       sourceNote.model.pos.value.x + w / 2,
-      sourceNote.model.pos.value.y + 40,
+      sourceNote.model.pos.value.y + h / 2,
       cx,
       cy,
       camX,

new-deepnotes/apps/web/src/features/spatial/useArrowReconnect.ts

@@ -4,6 +4,7 @@ import type { NoteModel } from "./note-model";
 import type { ArrowModel } from "./arrow-model";
 import { screenToWorld } from "./spatial-viewport-math";
 import { getNoteRect } from "./note-geometry";
+import { useNoteHeights } from "./useNoteHeights";
 
 export interface UseArrowReconnectInput {
   canvasRef: Ref<{
@@ -18,6 +19,7 @@ export interface UseArrowReconnectInput {
 }
 
 export function useArrowReconnect(input: UseArrowReconnectInput) {
+  const { heights: noteHeights } = useNoteHeights();
   const reconnectingArrowId = ref<string | null>(null);
   const reconnectingFrom = ref<'source' | 'target' | null>(null);
   const hoveredNoteId = ref<string | null>(null);
@@ -55,7 +57,7 @@ export function useArrowReconnect(input: UseArrowReconnectInput) {
     let bestNoteId: string | null = null;
 
     for (const note of input.noteList.value) {
-      const noteRect = getNoteRect(note.id, input.noteList.value, input.parentOf.value);
+      const noteRect = getNoteRect(note.id, input.noteList.value, input.parentOf.value, noteHeights.value);
       if (!noteRect) continue;
 
       if (

new-deepnotes/apps/web/src/features/spatial/useBoxSelection.test.ts

@@ -1,11 +1,22 @@
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ref } from "vue";
 import { useBoxSelection } from "./useBoxSelection";
 import { useSpatialSelection } from "./selection";
 import { useSpatialEditing } from "./useSpatialEditing";
 import type { NoteModel } from "./note-model";
+import { useNoteHeights } from "./useNoteHeights";
+
+vi.mock("./useNoteHeights", () => ({
+  useNoteHeights: vi.fn(),
+}));
 
 describe("useBoxSelection", () => {
+  beforeEach(() => {
+    (useNoteHeights as ReturnType<typeof vi.fn>).mockReturnValue({
+      heights: ref(new Map<string, number>()),
+    });
+  });
+
   function setup() {
     const selection = useSpatialSelection();
     const editing = useSpatialEditing();

new-deepnotes/apps/web/src/features/spatial/useBoxSelection.ts

@@ -4,6 +4,7 @@ import type { SpatialEditing } from "./useSpatialEditing";
 import type { NoteModel } from "./note-model";
 import { screenToWorld } from "./spatial-viewport-math";
 import { getNoteRect, rectsIntersect } from "./note-geometry";
+import { useNoteHeights } from "./useNoteHeights";
 
 const DRAG_THRESHOLD = 4;
 
@@ -29,6 +30,7 @@ export interface UseBoxSelectionInput {
 }
 
 export function useBoxSelection(input: UseBoxSelectionInput) {
+  const { heights: noteHeights } = useNoteHeights();
   let boxState: BoxSelectionState | null = null;
 
   function onCanvasPointerDown(e: PointerEvent) {
@@ -96,7 +98,7 @@ export function useBoxSelection(input: UseBoxSelectionInput) {
     const boxH = Math.max(w1.y, w2.y) - boxY;
 
     for (const note of input.rootNoteList.value) {
-      const noteRect = getNoteRect(note.id, input.noteList.value, input.parentOf.value);
+      const noteRect = getNoteRect(note.id, input.noteList.value, input.parentOf.value, noteHeights.value);
       if (!noteRect) continue;
 
       if (