feat: improve phase 6

Author: gustavotoyota

docs/RESTART_PLAN.md

@@ -1,7 +1,7 @@
 # DeepNotes — Restart (greenfield) plan — v4
 
 > **Last updated:** 2026-05-30  
-> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete (create, move, resize, delete notes; Shift+click arrows; mouse + touch pan/zoom).** **Phase 6 in progress: selection system complete (click, multi-select, box select, select all, active element); arrow click-to-select + deletion; note color + z-index rendering; grid background verified; container children schema, model, page tracking, rendering, drag-into-container, collapsing notes, and color inheritance complete. Remaining: clipboard, alignment/distribution, undo/redo, find/replace, read-only UI.**  
+> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete.** **Phase 6 spatial canvas polish complete (selection, clipboard, alignment, undo/redo, find/replace, read-only UI, collapsing notes, color inheritance, drag-into-container).** Remaining: distribution, 8-handle resize, drag-from-edge arrows, full Tiptap head/body editors, templates, backlinks, group access.**  
 > **This document replaces all prior restart plan versions.** If a prior statement conflicts with this one, this version wins.  
 > **Analyzed:** 2026-05-30 — additional gaps identified in §0.2–0.4, §3, §4, §6–8. Collab protocol gap and routing/product-model divergence newly documented.
 

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

@@ -56,11 +56,11 @@ const transform = computed(() => {
 
 const frameClasses = computed(() => {
   const ro = props.model.readOnly.value;
-  const movable = props.model.movable.value;
+  const movable = props.model.movable.value && !ro;
   return [
     "border-border bg-card text-card-foreground pointer-events-auto absolute top-0 left-0 rounded-md border shadow-sm select-none",
     ro ? "opacity-70" : "",
-    movable ? "cursor-grab active:cursor-grabbing" : "",
+    movable ? "cursor-grab active:cursor-grabbing" : "cursor-default",
     props.selected ? "ring-2 ring-primary" : "",
   ];
 });
@@ -87,7 +87,7 @@ function onPointerDown(e: PointerEvent) {
     emit("select");
   }
 
-  if (!props.model.movable.value) return;
+  if (!props.model.movable.value || props.model.readOnly.value) return;
 
   dragPointerId = e.pointerId;
   startX = e.clientX;
@@ -139,6 +139,7 @@ let resizeStartWidth = 0;
 
 function onResizePointerDown(e: PointerEvent) {
   if (e.button !== 0) return;
+  if (props.model.readOnly.value) return;
   e.stopPropagation();
   resizePointerId = e.pointerId;
   resizeStartX = e.clientX;
@@ -188,7 +189,7 @@ function toggleCollapsed() {
   >
     <div class="border-border flex items-center gap-1 border-b px-2 py-1 text-xs font-medium">
       <button
-        v-if="model.collapsing.enabled.value"
+        v-if="model.collapsing.enabled.value && !model.readOnly.value"
         class="text-muted-foreground hover:text-foreground focus:outline-none"
         @pointerdown.stop="toggleCollapsed"
       >
@@ -214,7 +215,7 @@ function toggleCollapsed() {
 
     <!-- resize handle -->
     <div
-      v-if="model.resizable.value"
+      v-if="model.resizable.value && !model.readOnly.value"
       class="bg-primary absolute -bottom-1.5 -right-1.5 h-3 w-3 cursor-nwse-resize rounded-full"
       @pointerdown="onResizePointerDown"
       @pointermove="onResizePointerMove"

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

@@ -6,6 +6,16 @@ import DisplayNote from "./DisplayNote.vue";
 import DisplayArrow from "./DisplayArrow.vue";
 import { useSpatialPage } from "./useSpatialPage";
 import { useSpatialSelection } from "./selection";
+import { useSpatialUndoRedo } from "./undo-redo";
+import { copySelection, pastePayload, getClipboardBuffer } from "./clipboard";
+import {
+  alignLeft,
+  alignCenter,
+  alignRight,
+  alignTop,
+  alignMiddle,
+  alignBottom,
+} from "./alignment";
 import { screenToWorld } from "./spatial-viewport-math";
 
 const props = defineProps<{
@@ -19,6 +29,8 @@ const canvasRef = ref<{
   rootEl: HTMLElement | null;
 } | null>(null);
 
+const undoRedo = useSpatialUndoRedo(props.ydoc);
+
 const {
   noteList,
   rootNoteList,
@@ -30,10 +42,12 @@ const {
   createArrow,
   moveNoteIntoContainer,
   moveNoteOutOfContainer,
-} = useSpatialPage(props.ydoc);
+} = useSpatialPage(props.ydoc, undoRedo);
 
 const selection = useSpatialSelection();
 
+const pasteCount = ref(0);
+
 const noteById = computed(() => {
   const map = new Map<string, (typeof noteList.value)[0]["model"]>();
   for (const n of noteList.value) {
@@ -285,6 +299,111 @@ function onKeyDown(e: KeyboardEvent) {
     selection.selectAll(rootNoteList.value.map((n) => n.id));
     return;
   }
+
+  if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    if (e.shiftKey) {
+      undoRedo.redo();
+    } else {
+      undoRedo.undo();
+    }
+    return;
+  }
+
+  if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    const selectedNotes = noteList.value.filter((n) =>
+      selection.isSelected(n.id),
+    );
+    const selectedArrows = arrowList.value.filter((a) =>
+      selection.isSelected(a.id),
+    );
+    if (selectedNotes.length > 0) {
+      copySelection(selectedNotes, selectedArrows);
+    }
+    return;
+  }
+
+  if (e.key === "x" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    const selectedNotes = noteList.value.filter((n) =>
+      selection.isSelected(n.id),
+    );
+    const selectedArrows = arrowList.value.filter((a) =>
+      selection.isSelected(a.id),
+    );
+    if (selectedNotes.length > 0) {
+      copySelection(selectedNotes, selectedArrows);
+      for (const id of selection.selectedOfKind("note")) {
+        deleteNote(id);
+      }
+      for (const id of selection.selectedOfKind("arrow")) {
+        deleteArrow(id);
+      }
+      selection.clear();
+    }
+    return;
+  }
+
+  if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    const payload = getClipboardBuffer();
+    if (payload && payload.notes.length > 0) {
+      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);
+      }
+    }
+    return;
+  }
+
+  // Alignment shortcuts (Ctrl+Shift+...)
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+    const selectedNotes = noteList.value.filter((n) =>
+      selection.isSelected(n.id),
+    );
+    if (selectedNotes.length >= 2) {
+      switch (e.key) {
+        case "l":
+          e.preventDefault();
+          alignLeft(selectedNotes);
+          return;
+        case "c":
+          e.preventDefault();
+          alignCenter(selectedNotes);
+          return;
+        case "r":
+          e.preventDefault();
+          alignRight(selectedNotes);
+          return;
+        case "t":
+          e.preventDefault();
+          alignTop(selectedNotes);
+          return;
+        case "m":
+          e.preventDefault();
+          alignMiddle(selectedNotes);
+          return;
+        case "b":
+          e.preventDefault();
+          alignBottom(selectedNotes);
+          return;
+      }
+    }
+  }
 }
 
 onMounted(() => {

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

@@ -0,0 +1,114 @@
+import { describe, expect, it } from "vitest";
+import { createPageYDoc } from "@deepnotes/collab-wire";
+import { useSpatialPage } from "./useSpatialPage";
+import { useSpatialUndoRedo } from "./undo-redo";
+import {
+  alignLeft,
+  alignCenter,
+  alignRight,
+  alignTop,
+  alignMiddle,
+  alignBottom,
+} from "./alignment";
+
+describe("alignment", () => {
+  it("aligns notes to the left", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(10, 0);
+    const n2 = page.createNoteAt(50, 0);
+    const n3 = page.createNoteAt(30, 0);
+
+    alignLeft(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.x).toBe(10);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.x).toBe(10);
+    expect(page.noteList.value.find((n) => n.id === n3)!.model.pos.value.x).toBe(10);
+  });
+
+  it("aligns notes to the center horizontally", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(0, 0);
+    const n2 = page.createNoteAt(100, 0);
+
+    alignCenter(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.x).toBe(50);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.x).toBe(50);
+  });
+
+  it("aligns notes to the right", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(10, 0);
+    const n2 = page.createNoteAt(50, 0);
+
+    alignRight(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.x).toBe(50);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.x).toBe(50);
+  });
+
+  it("aligns notes to the top", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(0, 10);
+    const n2 = page.createNoteAt(0, 50);
+    const n3 = page.createNoteAt(0, 30);
+
+    alignTop(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.y).toBe(10);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.y).toBe(10);
+    expect(page.noteList.value.find((n) => n.id === n3)!.model.pos.value.y).toBe(10);
+  });
+
+  it("aligns notes to the middle vertically", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(0, 0);
+    const n2 = page.createNoteAt(0, 100);
+
+    alignMiddle(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.y).toBe(50);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.y).toBe(50);
+  });
+
+  it("aligns notes to the bottom", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(0, 10);
+    const n2 = page.createNoteAt(0, 50);
+
+    alignBottom(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.y).toBe(50);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.y).toBe(50);
+  });
+
+  it("does nothing with fewer than 2 notes", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(10, 20);
+    alignLeft(page.noteList.value);
+    alignTop(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value).toEqual({ x: 10, y: 20 });
+  });
+});

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

@@ -0,0 +1,66 @@
+import type { NoteModel } from "./note-model";
+
+export interface AlignedNote {
+  id: string;
+  model: NoteModel;
+}
+
+export function alignLeft(notes: AlignedNote[]): void {
+  if (notes.length < 2) return;
+  const minX = Math.min(...notes.map((n) => n.model.pos.value.x));
+  for (const note of notes) {
+    const posMap = note.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("x", minX);
+  }
+}
+
+export function alignCenter(notes: AlignedNote[]): void {
+  if (notes.length < 2) return;
+  const xs = notes.map((n) => n.model.pos.value.x);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const center = minX + (maxX - minX) / 2;
+  for (const note of notes) {
+    const posMap = note.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("x", center);
+  }
+}
+
+export function alignRight(notes: AlignedNote[]): void {
+  if (notes.length < 2) return;
+  const maxX = Math.max(...notes.map((n) => n.model.pos.value.x));
+  for (const note of notes) {
+    const posMap = note.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("x", maxX);
+  }
+}
+
+export function alignTop(notes: AlignedNote[]): void {
+  if (notes.length < 2) return;
+  const minY = Math.min(...notes.map((n) => n.model.pos.value.y));
+  for (const note of notes) {
+    const posMap = note.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("y", minY);
+  }
+}
+
+export function alignMiddle(notes: AlignedNote[]): void {
+  if (notes.length < 2) return;
+  const ys = notes.map((n) => n.model.pos.value.y);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  const middle = minY + (maxY - minY) / 2;
+  for (const note of notes) {
+    const posMap = note.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("y", middle);
+  }
+}
+
+export function alignBottom(notes: AlignedNote[]): void {
+  if (notes.length < 2) return;
+  const maxY = Math.max(...notes.map((n) => n.model.pos.value.y));
+  for (const note of notes) {
+    const posMap = note.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("y", maxY);
+  }
+}