@textcortex/slidewise 1.3.0 → 1.5.0

package/src/compound/topbar/ThemeToggle.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactNode } from "react";
 import { Sun, Moon } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
+import { useLabels } from "../LabelsContext";
 import { iconBtnStyle, hoverHandlers } from "./styles";
 
 /**
@@ -24,11 +25,12 @@ export function ThemeToggle({
   const theme = useEditor((s) => s.theme);
   const toggleTheme = useEditor((s) => s.toggleTheme);
   const icons = useIcons();
+  const ctxLabels = useLabels();
 
   const label =
     theme === "dark"
-      ? (labels?.toggleToLight ?? "Light mode")
-      : (labels?.toggleToDark ?? "Dark mode");
+      ? (labels?.toggleToLight ?? ctxLabels.themeToggle.toLight)
+      : (labels?.toggleToDark ?? ctxLabels.themeToggle.toDark);
 
   return (
     <button

package/src/compound/topbar/Title.tsx

@@ -3,6 +3,7 @@ import { Sparkles } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
 import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
 
 /**
  * Deck title input wrapped in the "Smart" pill. Reads + writes
@@ -23,6 +24,7 @@ export function Title({ className, style }: TopBarTitleProps = {}) {
   const setTitle = useEditor((s) => s.setTitle);
   const icons = useIcons();
   const readOnly = useReadOnly();
+  const labels = useLabels();
 
   return (
     <div
@@ -56,10 +58,10 @@ export function Title({ className, style }: TopBarTitleProps = {}) {
         }}
       >
         {icons.smart ?? <Sparkles size={11} />}
-        Smart
+        {labels.smart}
       </span>
       <input
-        aria-label="Deck title"
+        aria-label={labels.titleAriaLabel}
         value={title}
         readOnly={readOnly}
         onChange={(e) => setTitle(e.target.value)}

package/src/compound/topbar/Undo.tsx

@@ -3,6 +3,7 @@ import { Undo2 } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
 import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
 import { iconBtnStyle, hoverHandlers } from "./styles";
 
 /**
@@ -31,21 +32,23 @@ export interface TopBarUndoProps {
 export function Undo({
   className,
   style,
-  ariaLabel = "Undo",
+  ariaLabel,
   children,
 }: TopBarUndoProps = {}) {
   const undo = useEditor((s) => s.undo);
   const canUndo = useEditor((s) => s.history.length > 0);
   const icons = useIcons();
   const readOnly = useReadOnly();
+  const labels = useLabels();
+  const resolvedAria = ariaLabel ?? labels.undo;
   if (readOnly) return null;
 
   return (
     <button
       type="button"
       className={className}
-      title={ariaLabel}
-      aria-label={ariaLabel}
+      title={resolvedAria}
+      aria-label={resolvedAria}
       disabled={!canUndo}
       onClick={undo}
       style={{

package/src/index.ts

@@ -46,6 +46,8 @@ export {
   useIcons,
   useReadOnly,
   useDirty,
+  useLabels,
+  useSurfaces,
   useEditor,
   useEditorStore,
   useSlides,
@@ -60,8 +62,12 @@ export {
   type SlidewiseRootProps,
   type SlidewiseRootHandle,
   type HistoryState,
+  type SelectionSnapshot,
   type SlidewiseHostCallbacks,
   type SlidewiseIcons,
+  type SlidewiseLabels,
+  type SlidewiseSurfaces,
+  type ResolvedLabels,
   type RegionProps,
   type TopBarProps,
   type TopBarSlotId,

package/src/lib/__tests__/api-extensions.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from "vitest";
+import { createEditorStore } from "../store";
+import { CURRENT_DECK_VERSION } from "../schema/migrate";
+import type { Deck } from "../types";
+
+function makeDeck(slideCount = 3): Deck {
+  return {
+    version: CURRENT_DECK_VERSION,
+    title: "fixture",
+    slides: Array.from({ length: slideCount }, (_, i) => ({
+      id: `s${i + 1}`,
+      background: "#FFFFFF",
+      elements: [],
+    })),
+  };
+}
+
+describe("store: zoom actions", () => {
+  it("zoomIn multiplies the current zoom by 1.25 (clamped to 4)", () => {
+    const store = createEditorStore(makeDeck());
+    store.getState().setZoom(1);
+    store.getState().zoomIn();
+    expect(store.getState().zoom).toBeCloseTo(1.25);
+  });
+
+  it("zoomOut multiplies by 0.8 (clamped to 0.1)", () => {
+    const store = createEditorStore(makeDeck());
+    store.getState().setZoom(1);
+    store.getState().zoomOut();
+    expect(store.getState().zoom).toBeCloseTo(0.8);
+  });
+
+  it("setZoom clamps the zoom to the valid range", () => {
+    const store = createEditorStore(makeDeck());
+    store.getState().setZoom(999);
+    expect(store.getState().zoom).toBe(4);
+    store.getState().setZoom(0);
+    expect(store.getState().zoom).toBe(0.1);
+  });
+});
+
+describe("store: slide CRUD return ids", () => {
+  it("addSlide returns the new slide's id and inserts after the target", () => {
+    const store = createEditorStore(makeDeck(2));
+    const newId = store.getState().addSlide("s1");
+    expect(typeof newId).toBe("string");
+    const slides = store.getState().deck.slides;
+    expect(slides).toHaveLength(3);
+    expect(slides[1].id).toBe(newId);
+    expect(store.getState().currentSlideId).toBe(newId);
+  });
+
+  it("addSlide() with no afterId appends at the end", () => {
+    const store = createEditorStore(makeDeck(2));
+    const newId = store.getState().addSlide();
+    expect(store.getState().deck.slides[2].id).toBe(newId);
+  });
+
+  it("duplicateSlide returns the new slide id and inserts after the original", () => {
+    const store = createEditorStore(makeDeck(2));
+    const copyId = store.getState().duplicateSlide("s1");
+    expect(typeof copyId).toBe("string");
+    expect(copyId).not.toBe("s1");
+    const slides = store.getState().deck.slides;
+    expect(slides).toHaveLength(3);
+    expect(slides[1].id).toBe(copyId);
+  });
+
+  it("duplicateSlide returns null when slide id is not found", () => {
+    const store = createEditorStore(makeDeck(2));
+    expect(store.getState().duplicateSlide("does-not-exist")).toBeNull();
+    expect(store.getState().deck.slides).toHaveLength(2);
+  });
+});

package/src/lib/store.ts

@@ -68,12 +68,18 @@ export interface EditorState {
   setTool: (t: Tool) => void;
   setTitle: (t: string) => void;
   setZoom: (z: number) => void;
+  /** Multiplicative zoom-in step (×1.25), clamped to the same range as setZoom. */
+  zoomIn: () => void;
+  /** Multiplicative zoom-out step (×0.8), clamped to the same range as setZoom. */
+  zoomOut: () => void;
   setFitMode: (f: "fit" | "fill" | "manual") => void;
   selectSlide: (id: string) => void;
   selectElement: (id: string | null, additive?: boolean) => void;
   clearSelection: () => void;
-  addSlide: (afterId?: string) => void;
-  duplicateSlide: (id: string) => void;
+  /** Returns the id of the newly inserted slide. */
+  addSlide: (afterId?: string) => string;
+  /** Returns the id of the newly inserted duplicate, or null if `id` wasn't found. */
+  duplicateSlide: (id: string) => string | null;
   deleteSlide: (id: string) => void;
   reorderSlide: (id: string, toIndex: number) => void;
   addElement: (partial: ElementDraft) => string;
@@ -194,6 +200,8 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
     },
     setZoom: (z) =>
       set({ zoom: Math.max(0.1, Math.min(4, z)), fitMode: "manual" }),
+    zoomIn: () => get().setZoom(get().zoom * 1.25),
+    zoomOut: () => get().setZoom(get().zoom * 0.8),
     setFitMode: (f) => set({ fitMode: f }),
 
     selectSlide: (id) =>
@@ -215,8 +223,8 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
 
     addSlide: (afterId) => {
       get().pushHistory();
+      const slide = blankSlide();
       set((s) => {
-        const slide = blankSlide();
         const slides = [...s.deck.slides];
         const idx = afterId
           ? slides.findIndex((sl) => sl.id === afterId)
@@ -228,26 +236,28 @@ export function createEditorStore(initialDeck: Deck): EditorStore {
           selectedIds: [],
         };
       });
+      return slide.id;
     },
 
     duplicateSlide: (id) => {
+      const orig = get().deck.slides.find((sl) => sl.id === id);
+      if (!orig) return null;
       get().pushHistory();
+      const copy: Slide = {
+        ...structuredClone(orig),
+        id: nanoid(8),
+        elements: orig.elements.map((e) => ({ ...e, id: nanoid(8) })),
+      };
       set((s) => {
         const slides = [...s.deck.slides];
         const idx = slides.findIndex((sl) => sl.id === id);
-        if (idx < 0) return s;
-        const orig = slides[idx];
-        const copy: Slide = {
-          ...structuredClone(orig),
-          id: nanoid(8),
-          elements: orig.elements.map((e) => ({ ...e, id: nanoid(8) })),
-        };
         slides.splice(idx + 1, 0, copy);
         return {
           deck: { ...s.deck, slides },
           currentSlideId: copy.id,
         };
       });
+      return copy.id;
     },
 
     deleteSlide: (id) => {