@textcortex/slidewise 1.1.0 → 1.3.0

package/src/lib/__tests__/history.test.ts

@@ -0,0 +1,164 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { createEditorStore } from "../store";
+import { CURRENT_DECK_VERSION } from "../schema/migrate";
+import type { Deck } from "../types";
+
+const baseElement = { rotation: 0, z: 1 } as const;
+
+function fixtureDeck(): Deck {
+  return {
+    version: CURRENT_DECK_VERSION,
+    title: "Hist test",
+    slides: [
+      {
+        id: "s1",
+        background: "#FFFFFF",
+        elements: [
+          {
+            ...baseElement,
+            id: "t1",
+            type: "text",
+            x: 100,
+            y: 100,
+            w: 400,
+            h: 80,
+            text: "Hello",
+            fontFamily: "Inter",
+            fontSize: 24,
+            fontWeight: 400,
+            italic: false,
+            underline: false,
+            strike: false,
+            color: "#000000",
+            align: "left",
+            vAlign: "top",
+            lineHeight: 1.2,
+            letterSpacing: 0,
+          },
+        ],
+      },
+    ],
+  };
+}
+
+describe("editor store history", () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ now: 1_000_000 });
+  });
+
+  it("undo reverts an updateElement", () => {
+    const store = createEditorStore(fixtureDeck());
+    expect(store.getState().canUndo()).toBe(false);
+
+    store.getState().updateElement("t1", { x: 200 });
+    expect(store.getState().canUndo()).toBe(true);
+    const slide = () => store.getState().deck.slides[0];
+    expect((slide().elements[0] as { x: number }).x).toBe(200);
+
+    store.getState().undo();
+    expect((slide().elements[0] as { x: number }).x).toBe(100);
+    expect(store.getState().canUndo()).toBe(false);
+    expect(store.getState().canRedo()).toBe(true);
+  });
+
+  it("undo reverts a setTitle", () => {
+    const store = createEditorStore(fixtureDeck());
+    store.getState().setTitle("Renamed");
+    expect(store.getState().deck.title).toBe("Renamed");
+    store.getState().undo();
+    expect(store.getState().deck.title).toBe("Hist test");
+  });
+
+  it("coalesces a typing burst into one undo step", () => {
+    const store = createEditorStore(fixtureDeck());
+    // simulate keystrokes within the idle window
+    store.getState().updateElement("t1", { x: 110 });
+    vi.advanceTimersByTime(50);
+    store.getState().updateElement("t1", { x: 120 });
+    vi.advanceTimersByTime(50);
+    store.getState().updateElement("t1", { x: 130 });
+
+    expect(store.getState().history.length).toBe(1);
+
+    store.getState().undo();
+    const elX = (store.getState().deck.slides[0].elements[0] as { x: number }).x;
+    expect(elX).toBe(100);
+  });
+
+  it("starts a new history step after the idle window expires", () => {
+    const store = createEditorStore(fixtureDeck());
+    store.getState().updateElement("t1", { x: 110 });
+    expect(store.getState().history.length).toBe(1);
+
+    // advance past the 500ms idle window
+    vi.advanceTimersByTime(600);
+
+    store.getState().updateElement("t1", { x: 120 });
+    expect(store.getState().history.length).toBe(2);
+
+    store.getState().undo();
+    expect((store.getState().deck.slides[0].elements[0] as { x: number }).x).toBe(110);
+
+    store.getState().undo();
+    expect((store.getState().deck.slides[0].elements[0] as { x: number }).x).toBe(100);
+  });
+
+  it("endCoalesce starts a fresh step on the next mutation", () => {
+    const store = createEditorStore(fixtureDeck());
+    store.getState().updateElement("t1", { x: 110 });
+    store.getState().updateElement("t1", { x: 120 });
+    expect(store.getState().history.length).toBe(1);
+
+    store.getState().endCoalesce();
+    store.getState().updateElement("t1", { x: 130 });
+    expect(store.getState().history.length).toBe(2);
+  });
+
+  it("different patch keys on the same element start a fresh step", () => {
+    const store = createEditorStore(fixtureDeck());
+    store.getState().updateElement("t1", { x: 110 });
+    store.getState().updateElement("t1", { y: 110 });
+    // Different keys → different coalesce key → second step pushed.
+    expect(store.getState().history.length).toBe(2);
+  });
+
+  it("setDeck clears history", () => {
+    const store = createEditorStore(fixtureDeck());
+    store.getState().updateElement("t1", { x: 200 });
+    expect(store.getState().history.length).toBe(1);
+
+    store.getState().setDeck(fixtureDeck());
+    expect(store.getState().history.length).toBe(0);
+    expect(store.getState().future.length).toBe(0);
+    expect(store.getState().canUndo()).toBe(false);
+  });
+
+  it("undo/redo update canUndo/canRedo correctly", () => {
+    const store = createEditorStore(fixtureDeck());
+    store.getState().updateElement("t1", { x: 200 });
+    expect(store.getState().canUndo()).toBe(true);
+    expect(store.getState().canRedo()).toBe(false);
+
+    store.getState().undo();
+    expect(store.getState().canUndo()).toBe(false);
+    expect(store.getState().canRedo()).toBe(true);
+
+    store.getState().redo();
+    expect(store.getState().canUndo()).toBe(true);
+    expect(store.getState().canRedo()).toBe(false);
+  });
+
+  it("undo replaces the deck reference (so subscribers see a change)", () => {
+    const store = createEditorStore(fixtureDeck());
+    const before = store.getState().deck;
+    store.getState().updateElement("t1", { x: 200 });
+    const afterEdit = store.getState().deck;
+    expect(afterEdit).not.toBe(before);
+
+    store.getState().undo();
+    const afterUndo = store.getState().deck;
+    expect(afterUndo).not.toBe(afterEdit);
+    // value matches the pre-edit deck even if the reference is a clone
+    expect((afterUndo.slides[0].elements[0] as { x: number }).x).toBe(100);
+  });
+});

package/src/lib/store.ts

@@ -29,6 +29,17 @@ interface HistorySnapshot {
 type Theme = "light" | "dark";
 type View = "editor" | "grid";
 
+/**
+ * Idle window in ms during which consecutive mutations with the same coalesce
+ * key collapse into a single history step. After this many ms with no edit,
+ * the next edit starts a fresh step. Drags on a single element typically run
+ * 60+ frames in well under this window; typing pauses around word boundaries
+ * usually exceed it. Hosts that want stricter granularity can call
+ * `endCoalesce()` explicitly (e.g. on mouseup or input blur).
+ */
+const COALESCE_IDLE_MS = 500;
+const HISTORY_LIMIT = 50;
+
 export interface EditorState {
   deck: Deck;
   currentSlideId: string;
@@ -41,6 +52,14 @@ export interface EditorState {
   view: View;
   history: HistorySnapshot[];
   future: HistorySnapshot[];
+  /**
+   * Coalesce key for the in-flight mutation burst. Two consecutive mutations
+   * with the same key (within `COALESCE_IDLE_MS`) collapse into one history
+   * step. `null` means "no burst in progress" — the next edit pushes a fresh
+   * snapshot.
+   */
+  _coalesceKey: string | null;
+  _coalesceUntil: number;
 
   // selectors
   currentSlide: () => Slide;
@@ -68,6 +87,23 @@ export interface EditorState {
   undo: () => void;
   redo: () => void;
   pushHistory: () => void;
+  /**
+   * Push a history snapshot, but only if `key` differs from the in-flight
+   * coalesce key OR more than `COALESCE_IDLE_MS` have passed since the last
+   * mutation. Use this for high-frequency edits (text typing, drag) so the
+   * burst collapses into one undo step.
+   */
+  pushHistoryCoalesced: (key: string) => void;
+  /**
+   * End the current coalesce burst. Hosts call this on natural commit
+   * boundaries (mouseup after a drag, blur on a text input) so the next
+   * mutation starts a fresh history step even within `COALESCE_IDLE_MS`.
+   */
+  endCoalesce: () => void;
+  /** True iff there's at least one snapshot to undo back to. */
+  canUndo: () => boolean;
+  /** True iff there's at least one snapshot to redo forward to. */
+  canRedo: () => boolean;
   setDeck: (deck: Deck) => void;
   setTheme: (t: Theme) => void;
   toggleTheme: () => void;
@@ -107,6 +143,8 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
     view: "editor",
     history: [],
     future: [],
+    _coalesceKey: null,
+    _coalesceUntil: 0,
 
     currentSlide: () => {
       const s = get();
@@ -118,20 +156,48 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
 
     pushHistory: () => {
       set((s) => ({
-        history: [...s.history, snap(s)].slice(-50),
+        history: [...s.history, snap(s)].slice(-HISTORY_LIMIT),
         future: [],
+        _coalesceKey: null,
+        _coalesceUntil: 0,
       }));
     },
 
+    pushHistoryCoalesced: (key) => {
+      const now = Date.now();
+      set((s) => {
+        // Same burst within the idle window → don't push, just extend.
+        if (s._coalesceKey === key && now < s._coalesceUntil) {
+          return { _coalesceUntil: now + COALESCE_IDLE_MS };
+        }
+        // New burst — snapshot the pre-mutation state and start coalescing.
+        return {
+          history: [...s.history, snap(s)].slice(-HISTORY_LIMIT),
+          future: [],
+          _coalesceKey: key,
+          _coalesceUntil: now + COALESCE_IDLE_MS,
+        };
+      });
+    },
+
+    endCoalesce: () => {
+      set({ _coalesceKey: null, _coalesceUntil: 0 });
+    },
+
+    canUndo: () => get().history.length > 0,
+    canRedo: () => get().future.length > 0,
+
     setTool: (t) => set({ tool: t }),
     setTitle: (t) => {
+      get().pushHistoryCoalesced("setTitle");
       set((s) => ({ deck: { ...s.deck, title: t } }));
     },
     setZoom: (z) =>
       set({ zoom: Math.max(0.1, Math.min(4, z)), fitMode: "manual" }),
     setFitMode: (f) => set({ fitMode: f }),
 
-    selectSlide: (id) => set({ currentSlideId: id, selectedIds: [] }),
+    selectSlide: (id) =>
+      set({ currentSlideId: id, selectedIds: [], _coalesceKey: null }),
     selectElement: (id, additive) =>
       set((s) => {
         if (id == null) return { selectedIds: [] };
@@ -228,6 +294,11 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
     },
 
     updateElement: (id, patch) => {
+      // Coalesce key: same element, same patch shape = same burst.
+      // Drag (x,y) coalesces; resize (w,h) starts a new burst even on the
+      // same element; switching elements also starts fresh.
+      const key = `updateElement:${id}:${Object.keys(patch).sort().join(",")}`;
+      get().pushHistoryCoalesced(key);
       set((s) => {
         const slides = s.deck.slides.map((sl) => {
           if (sl.id !== s.currentSlideId) return sl;
@@ -320,8 +391,10 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
           deck: last.deck,
           currentSlideId: last.currentSlideId,
           history: s.history.slice(0, -1),
-          future: [...s.future, snapshot].slice(-50),
+          future: [...s.future, snapshot].slice(-HISTORY_LIMIT),
           selectedIds: survivingIds,
+          _coalesceKey: null,
+          _coalesceUntil: 0,
         };
       });
     },
@@ -342,9 +415,11 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
         return {
           deck: next.deck,
           currentSlideId: next.currentSlideId,
-          history: [...s.history, snapshot].slice(-50),
+          history: [...s.history, snapshot].slice(-HISTORY_LIMIT),
           future: s.future.slice(0, -1),
           selectedIds: survivingIds,
+          _coalesceKey: null,
+          _coalesceUntil: 0,
         };
       });
     },
@@ -357,6 +432,8 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
         selectedIds: [],
         history: [],
         future: [],
+        _coalesceKey: null,
+        _coalesceUntil: 0,
       });
     },
 

package/src/components/editor/TopBar.tsx

@@ -1,253 +0,0 @@
-import {
-  Undo2,
-  Redo2,
-  Save,
-  Play,
-  Download,
-  Sparkles,
-  Sun,
-  Moon,
-} from "lucide-react";
-import { useEditor, useEditorStore } from "@/lib/StoreProvider";
-import { useState, type ReactNode } from "react";
-import type { Deck } from "@/lib/types";
-import { useIcons } from "@/compound/IconContext";
-import { useReadOnly } from "@/compound/ReadOnlyContext";
-
-interface TopBarProps {
-  onSave?: (deck: Deck) => void | Promise<void>;
-  onExport?: (deck: Deck) => void;
-}
-
-export function TopBar({ onSave: onSaveProp, onExport: onExportProp }: TopBarProps = {}) {
-  const store = useEditorStore();
-  const title = useEditor((s) => s.deck.title);
-  const setTitle = useEditor((s) => s.setTitle);
-  const undo = useEditor((s) => s.undo);
-  const redo = useEditor((s) => s.redo);
-  const play = useEditor((s) => s.play);
-  const theme = useEditor((s) => s.theme);
-  const toggleTheme = useEditor((s) => s.toggleTheme);
-  const icons = useIcons();
-  const readOnly = useReadOnly();
-  const [saved, setSaved] = useState<"idle" | "saving" | "saved">("idle");
-
-  const onSave = async () => {
-    setSaved("saving");
-    const deck = store.getState().deck;
-    try {
-      if (onSaveProp) {
-        await onSaveProp(deck);
-      } else {
-        try {
-          localStorage.setItem("slidewise-deck", JSON.stringify(deck));
-        } catch {}
-      }
-      setTimeout(() => setSaved("saved"), 320);
-      setTimeout(() => setSaved("idle"), 1600);
-    } catch {
-      setSaved("idle");
-    }
-  };
-
-  const onExport = () => {
-    const deck = store.getState().deck;
-    if (onExportProp) {
-      onExportProp(deck);
-      return;
-    }
-    const blob = new Blob([JSON.stringify(deck, null, 2)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${(deck.title || "deck").replace(/[^a-z0-9-_]+/gi, "-")}.slidewise.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <div
-      style={{
-        height: 56,
-        display: "flex",
-        alignItems: "center",
-        padding: "0 14px",
-        gap: 10,
-        background: "var(--slidewise-bar-bg, var(--app-bg))",
-        borderBottom: "1px solid var(--border)",
-        boxShadow: "var(--topbar-shadow)",
-        fontFamily: "Inter, system-ui, sans-serif",
-        position: "relative",
-        zIndex: 10,
-        color: "var(--ink)",
-      }}
-    >
-      {!readOnly && (
-        <>
-          <IconBtn onClick={undo} title="Undo">
-            {icons.undo ?? <Undo2 size={16} />}
-          </IconBtn>
-          <IconBtn onClick={redo} title="Redo">
-            {icons.redo ?? <Redo2 size={16} />}
-          </IconBtn>
-        </>
-      )}
-
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 8,
-          minWidth: 0,
-        }}
-      >
-        <span
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 4,
-            padding: "3px 8px",
-            background: "var(--smart-grad)",
-            color: "var(--smart-fg)",
-            borderRadius: 999,
-            fontSize: 11,
-            fontWeight: 600,
-            letterSpacing: 0.2,
-          }}
-        >
-          {icons.smart ?? <Sparkles size={11} />}
-          Smart
-        </span>
-        <input
-          aria-label="Deck title"
-          value={title}
-          readOnly={readOnly}
-          onChange={(e) => setTitle(e.target.value)}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: 14,
-            fontWeight: 500,
-            color: "var(--ink)",
-            textAlign: "center",
-            minWidth: 240,
-            maxWidth: 520,
-          }}
-        />
-      </div>
-
-      <IconBtn
-        onClick={toggleTheme}
-        title={theme === "dark" ? "Light mode" : "Dark mode"}
-      >
-        {theme === "dark"
-          ? (icons.themeLight ?? <Sun size={16} />)
-          : (icons.themeDark ?? <Moon size={16} />)}
-      </IconBtn>
-
-      {!readOnly && (
-        <button
-          onClick={onSave}
-          style={chromeBtnStyle()}
-          onMouseEnter={(e) => (e.currentTarget.style.background = "var(--hover)")}
-          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-        >
-          {icons.save ?? <Save size={14} />}
-          {saved === "saving" ? "Saving…" : saved === "saved" ? "Saved" : "Save"}
-        </button>
-      )}
-
-      <button
-        onClick={play}
-        style={chromeBtnStyle()}
-        onMouseEnter={(e) => (e.currentTarget.style.background = "var(--hover)")}
-        onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-      >
-        {icons.play ?? <Play size={14} />}
-        Play
-      </button>
-
-      <button
-        onClick={onExport}
-        style={{
-          height: 32,
-          padding: "0 12px",
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          background: "var(--primary-bg)",
-          border: "1px solid var(--primary-bg)",
-          borderRadius: "var(--slidewise-radius, 10px)",
-          cursor: "pointer",
-          color: "var(--primary-fg)",
-          fontSize: 13,
-          fontWeight: 500,
-        }}
-        onMouseEnter={(e) =>
-          (e.currentTarget.style.background = "var(--primary-bg-hover)")
-        }
-        onMouseLeave={(e) =>
-          (e.currentTarget.style.background = "var(--primary-bg)")
-        }
-      >
-        {icons.export ?? <Download size={14} />}
-        Export
-      </button>
-    </div>
-  );
-}
-
-function chromeBtnStyle(): React.CSSProperties {
-  return {
-    height: 32,
-    padding: "0 12px",
-    display: "flex",
-    alignItems: "center",
-    gap: 6,
-    background: "transparent",
-    border: "1px solid var(--border-strong)",
-    borderRadius: "var(--slidewise-radius, 10px)",
-    cursor: "pointer",
-    color: "var(--ink)",
-    fontSize: 13,
-    fontWeight: 500,
-  };
-}
-
-function IconBtn({
-  children,
-  onClick,
-  title,
-}: {
-  children: ReactNode;
-  onClick: () => void;
-  title: string;
-}) {
-  return (
-    <button
-      title={title}
-      aria-label={title}
-      onClick={onClick}
-      style={{
-        width: 32,
-        height: 32,
-        borderRadius: 8,
-        border: "none",
-        background: "transparent",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "var(--ink)",
-      }}
-      onMouseEnter={(e) => (e.currentTarget.style.background = "var(--hover)")}
-      onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-    >
-      {children}
-    </button>
-  );
-}