@textcortex/slidewise 1.2.0 → 1.4.0

package/src/compound/topbar/index.tsx

@@ -0,0 +1,107 @@
+import type { CSSProperties } from "react";
+import { Root, type TopBarRootProps } from "./Root";
+import { Title, type TopBarTitleProps } from "./Title";
+import { Undo, type TopBarUndoProps } from "./Undo";
+import { Redo, type TopBarRedoProps } from "./Redo";
+import { Save, type TopBarSaveProps } from "./Save";
+import { Play, type TopBarPlayProps } from "./Play";
+import { ThemeToggle, type TopBarThemeToggleProps } from "./ThemeToggle";
+import { Export, type TopBarExportProps } from "./Export";
+import { Spacer, type TopBarSpacerProps } from "./Spacer";
+import { Group, type TopBarGroupProps } from "./Group";
+
+export type TopBarSlotId =
+  | "undo"
+  | "redo"
+  | "title"
+  | "themeToggle"
+  | "save"
+  | "play"
+  | "export";
+
+export interface TopBarProps {
+  /**
+   * Hide individual default buttons without dropping to the compound API.
+   * Pass any subset of slot ids; the rest render as usual. Read-only mode
+   * already hides save/undo/redo regardless of this prop.
+   *
+   * ```tsx
+   * <Slidewise.TopBar hide={["export", "play"]} />
+   * ```
+   */
+  hide?: TopBarSlotId[];
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Default TopBar arrangement. Equivalent to:
+ *
+ * ```tsx
+ * <Slidewise.TopBar.Root>
+ *   <Slidewise.TopBar.Group>
+ *     <Slidewise.TopBar.Undo />
+ *     <Slidewise.TopBar.Redo />
+ *   </Slidewise.TopBar.Group>
+ *   <Slidewise.TopBar.Title />
+ *   <Slidewise.TopBar.ThemeToggle />
+ *   <Slidewise.TopBar.Save />
+ *   <Slidewise.TopBar.Play />
+ *   <Slidewise.TopBar.Export />
+ * </Slidewise.TopBar.Root>
+ * ```
+ *
+ * For full control over which subparts render, in what order, and
+ * intermixed with host UI, drop down to `<Slidewise.TopBar.Root>` and the
+ * named subparts directly.
+ */
+function DefaultTopBar({ hide, className, style }: TopBarProps = {}) {
+  const hidden = new Set(hide ?? []);
+  return (
+    <Root className={className} style={style}>
+      {(!hidden.has("undo") || !hidden.has("redo")) && (
+        <Group>
+          {!hidden.has("undo") && <Undo />}
+          {!hidden.has("redo") && <Redo />}
+        </Group>
+      )}
+      {!hidden.has("title") && <Title />}
+      {!hidden.has("themeToggle") && <ThemeToggle />}
+      {!hidden.has("save") && <Save />}
+      {!hidden.has("play") && <Play />}
+      {!hidden.has("export") && <Export />}
+    </Root>
+  );
+}
+
+/**
+ * `<Slidewise.TopBar />` is both a callable component (rendering the
+ * default arrangement) and a namespace of subparts (`TopBar.Root`,
+ * `TopBar.Title`, etc.) for full compound composition. The dual API
+ * mirrors dialux's Dialog / Radix's Dialog patterns.
+ */
+export const TopBar = Object.assign(DefaultTopBar, {
+  Root,
+  Title,
+  Undo,
+  Redo,
+  Save,
+  Play,
+  ThemeToggle,
+  Export,
+  Spacer,
+  Group,
+});
+
+export type {
+  TopBarRootProps,
+  TopBarTitleProps,
+  TopBarUndoProps,
+  TopBarRedoProps,
+  TopBarSaveProps,
+  TopBarPlayProps,
+  TopBarThemeToggleProps,
+  TopBarExportProps,
+  TopBarSpacerProps,
+  TopBarGroupProps,
+};

package/src/compound/topbar/styles.ts

@@ -0,0 +1,81 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Shared button styles for TopBar subparts. Kept here so a host that swaps
+ * out one subpart (e.g. their own Save button) can match the visual weight
+ * of the remaining built-in subparts by importing these and applying them.
+ */
+
+export function chromeBtnStyle(): 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,
+    fontFamily: "inherit",
+  };
+}
+
+export function iconBtnStyle(): CSSProperties {
+  return {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--ink)",
+    fontFamily: "inherit",
+  };
+}
+
+export function primaryBtnStyle(): CSSProperties {
+  return {
+    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,
+    fontFamily: "inherit",
+  };
+}
+
+export function hoverHandlers(bg: string = "var(--hover)") {
+  return {
+    onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
+      (e.currentTarget as HTMLElement).style.background = bg;
+    },
+    onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
+      (e.currentTarget as HTMLElement).style.background = "transparent";
+    },
+  };
+}
+
+export function primaryHoverHandlers() {
+  return {
+    onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
+      (e.currentTarget as HTMLElement).style.background = "var(--primary-bg-hover)";
+    },
+    onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
+      (e.currentTarget as HTMLElement).style.background = "var(--primary-bg)";
+    },
+  };
+}

package/src/index.ts

@@ -45,12 +45,27 @@ export {
   useHostCallbacks,
   useIcons,
   useReadOnly,
+  useDirty,
+  useEditor,
+  useEditorStore,
+  useSlides,
+  useActiveSlide,
+  useActiveSlideId,
+  useSelection,
+  useSelectedElements,
+  useTheme,
+  useZoom,
+  usePlaying,
+  useHistory,
   type SlidewiseRootProps,
   type SlidewiseRootHandle,
   type HistoryState,
+  type SelectionSnapshot,
   type SlidewiseHostCallbacks,
   type SlidewiseIcons,
   type RegionProps,
+  type TopBarProps,
+  type TopBarSlotId,
 } from "./compound";
 
 export { parsePptx, serializeDeck } from "./lib/pptx";

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) => {

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>
-  );
-}