feat(M3): Yjs local persistence + autosave + undo/redo

apps/web/src/features/canvas/SaveStatus.tsx

@@ -0,0 +1,39 @@
+import { useShapeStore } from "@notux/canvas";
+
+function formatRelative(date: Date): string {
+  const secs = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (secs < 5) return "just now";
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  return `${Math.floor(mins / 60)}h ago`;
+}
+
+export function SaveStatus() {
+  const synced = useShapeStore((s) => s.synced);
+  const lastSaved = useShapeStore((s) => s.lastSaved);
+
+  if (!synced) return null;
+
+  return (
+    <div
+      aria-live="polite"
+      style={{
+        position: "fixed",
+        bottom: 16,
+        right: 16,
+        padding: "4px 10px",
+        borderRadius: 8,
+        background: "rgba(30,30,30,0.75)",
+        backdropFilter: "blur(8px)",
+        color: "rgba(255,255,255,0.6)",
+        fontSize: 12,
+        pointerEvents: "none",
+        userSelect: "none",
+        zIndex: 20,
+      }}
+    >
+      {lastSaved ? `Saved ${formatRelative(lastSaved)}` : "Saved"}
+    </div>
+  );
+}

apps/web/src/routes/Board.tsx

@@ -1,14 +1,53 @@
+import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { CanvasStage } from "@notux/canvas";
+import { CanvasStage, useShapeStore } from "@notux/canvas";
+import { SaveStatus } from "../features/canvas/SaveStatus";
 import { ToolPalette } from "../features/canvas/ToolPalette";
 
 export default function Board() {
   const { boardId } = useParams<{ boardId: string }>();
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (!boardId) return;
+    setReady(false);
+    useShapeStore
+      .getState()
+      .initBoard(boardId)
+      .then(() => setReady(true));
+  }, [boardId]);
+
+  if (!ready) {
+    return (
+      <div
+        className="board"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <div
+          aria-label="Loading board…"
+          style={{
+            width: 32,
+            height: 32,
+            border: "3px solid rgba(255,255,255,0.15)",
+            borderTopColor: "rgba(90,200,250,0.8)",
+            borderRadius: "50%",
+            animation: "spin 0.7s linear infinite",
+          }}
+        />
+        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+      </div>
+    );
+  }
 
   return (
     <div className="board">
-      <CanvasStage boardId={boardId ?? "unknown"} />
+      <CanvasStage boardId={boardId!} />
       <ToolPalette />
+      <SaveStatus />
       <Link className="board__home-link" to="/">
         ← Home
       </Link>

packages/canvas/package.json

@@ -12,11 +12,13 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@notux/sync": "workspace:*",
     "@notux/types": "workspace:*",
     "konva": "^9.3.16",
     "nanoid": "^5.0.7",
     "perfect-freehand": "^1.2.2",
     "react-konva": "^18.2.10",
+    "yjs": "^13.6.20",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

packages/canvas/src/CanvasStage.tsx

@@ -3,6 +3,7 @@ import type { ToolKind, YShape } from "@notux/types";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Stage } from "react-konva";
 import { newAuthorId } from "./ids";
+import { useUndoManager } from "./hooks/useUndoManager";
 import { BackgroundLayer } from "./layers/BackgroundLayer";
 import { OverlayLayer } from "./layers/OverlayLayer";
 import { ShapesLayer } from "./layers/ShapesLayer";
@@ -54,6 +55,8 @@ export function CanvasStage({ boardId: _boardId, pageId = DEFAULT_PAGE_ID }: Pro
   const [viewport, setViewport] = useState({ x: 0, y: 0, scale: 1 });
   const [spaceHeld, setSpaceHeld] = useState(false);
 
+  const { undo, redo } = useUndoManager(pageId);
+
   const tool = useToolStore((s) => s.tool);
   const selection = useToolStore((s) => s.selection);
   const revision = useShapeStore((s) => s.revision);
@@ -141,7 +144,7 @@ export function CanvasStage({ boardId: _boardId, pageId = DEFAULT_PAGE_ID }: Pro
     toolRef.current = makeTool(tool);
   }, [tool, buildToolContext]);
 
-  // Space-to-pan + tool keyboard handlers (Delete, Escape).
+  // Space-to-pan, undo/redo, and tool keyboard handlers (Delete, Escape).
   useEffect(() => {
     function down(e: KeyboardEvent) {
       if (isTypingTarget(e.target)) return;
@@ -150,6 +153,17 @@ export function CanvasStage({ boardId: _boardId, pageId = DEFAULT_PAGE_ID }: Pro
         setSpaceHeld(true);
         return;
       }
+      const mod = e.metaKey || e.ctrlKey;
+      if (mod && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if (mod && (e.key === "y" || (e.key === "z" && e.shiftKey))) {
+        e.preventDefault();
+        redo();
+        return;
+      }
       const handler = toolRef.current.onKeyDown;
       if (handler) handler(e, buildToolContext());
     }
@@ -162,7 +176,7 @@ export function CanvasStage({ boardId: _boardId, pageId = DEFAULT_PAGE_ID }: Pro
       window.removeEventListener("keydown", down);
       window.removeEventListener("keyup", up);
     };
-  }, [buildToolContext]);
+  }, [buildToolContext, undo, redo]);
 
   const panRef = useRef<{ active: boolean; lastX: number; lastY: number }>({
     active: false,

packages/canvas/src/hooks/useUndoManager.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import * as Y from "yjs";
+import { getPageMap } from "@notux/sync";
+import { useShapeStore } from "../store/shapeStore";
+
+export function useUndoManager(pageId: string): {
+  undo(): void;
+  redo(): void;
+  canUndo: boolean;
+  canRedo: boolean;
+} {
+  const doc = useShapeStore((s) => s._doc);
+  const managerRef = useRef<Y.UndoManager | null>(null);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  useEffect(() => {
+    if (!doc) return;
+
+    const pageMap = getPageMap(doc, pageId);
+    const manager = new Y.UndoManager(pageMap);
+    managerRef.current = manager;
+
+    function update() {
+      setCanUndo(manager.undoStack.length > 0);
+      setCanRedo(manager.redoStack.length > 0);
+    }
+
+    manager.on("stack-item-added", update);
+    manager.on("stack-item-popped", update);
+    manager.on("stack-cleared", update);
+
+    return () => {
+      manager.off("stack-item-added", update);
+      manager.off("stack-item-popped", update);
+      manager.off("stack-cleared", update);
+      manager.destroy();
+      managerRef.current = null;
+      setCanUndo(false);
+      setCanRedo(false);
+    };
+  }, [doc, pageId]);
+
+  const undo = useCallback(() => managerRef.current?.undo(), []);
+  const redo = useCallback(() => managerRef.current?.redo(), []);
+
+  return { undo, redo, canUndo, canRedo };
+}

packages/canvas/src/index.ts

@@ -1,4 +1,5 @@
 export { CanvasStage } from "./CanvasStage";
+export { useUndoManager } from "./hooks/useUndoManager";
 export { useShapeStore } from "./store/shapeStore";
 export { useToolStore } from "./store/toolStore";
 export type { ToolOptions } from "./store/toolStore";