@textcortex/slidewise 1.0.0

package/src/SlidewiseEditor.css

@@ -0,0 +1,146 @@
+/*
+ * Slidewise editor stylesheet. Shipped with the library and loaded inside
+ * host applications, so every rule must be nested under `.slidewise-editor`
+ * to avoid colliding with host styles. At-rules (@font-face, @media, …) are
+ * fine at the top level. The `library CSS scope` test in
+ * src/lib/__tests__/css-scope.test.ts enforces this.
+ */
+@import "./fonts.css";
+
+.slidewise-editor {
+  --app-bg: #ffffff;
+  --rail-bg: #fafafb;
+  --canvas-bg-from: #f4f6fb;
+  --canvas-bg-to: #e7eaf2;
+  --border: rgba(15, 23, 42, 0.08);
+  --border-strong: rgba(15, 23, 42, 0.1);
+  --border-dashed: rgba(15, 23, 42, 0.18);
+  --ink: #0e1330;
+  --ink-muted: #5b6178;
+  --hover: rgba(15, 23, 42, 0.05);
+  --hover-strong: rgba(15, 23, 42, 0.06);
+  --active: rgba(15, 23, 42, 0.08);
+  --accent: #4f5bd5;
+  --accent-soft: rgba(79, 91, 213, 0.14);
+  --toolbar-bg: rgba(255, 255, 255, 0.94);
+  --toolbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
+    0 12px 32px rgba(15, 23, 42, 0.1);
+  --rail-shadow: 4px 0 14px rgba(15, 23, 42, 0.04);
+  --topbar-shadow: 0 1px 0 rgba(15, 23, 42, 0.04),
+    0 4px 14px rgba(15, 23, 42, 0.04);
+  --slide-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
+    0 24px 60px rgba(15, 23, 42, 0.16);
+  --thumb-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
+    0 6px 20px rgba(15, 23, 42, 0.08);
+  --tool-active-bg: #0e1330;
+  --tool-active-fg: #ffffff;
+  --primary-bg: #0e1330;
+  --primary-bg-hover: #1a2147;
+  --primary-fg: #ffffff;
+  --input-bg: rgba(15, 23, 42, 0.04);
+  --menu-bg: #ffffff;
+  --menu-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+  --gap-icon-bg: #ffffff;
+  --scroll-thumb: rgba(15, 23, 42, 0.14);
+  --scroll-thumb-hover: rgba(15, 23, 42, 0.24);
+  --smart-grad: linear-gradient(135deg, #e7e9ff, #fce7df);
+  --smart-fg: #4f5bd5;
+  --grid-overlay-bg: rgba(245, 246, 250, 0.96);
+  --font-geist-sans: "Geist Variable";
+  --font-geist-mono: "Geist Mono Variable";
+  color-scheme: light;
+
+  font-family: var(--font-geist-sans), Inter, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background: var(--app-bg);
+  color: var(--ink);
+}
+
+.slidewise-editor.theme-dark {
+  --app-bg: #0a0d1c;
+  --rail-bg: #0d1124;
+  --canvas-bg-from: #181c38;
+  --canvas-bg-to: #0c1027;
+  --border: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.14);
+  --border-dashed: rgba(255, 255, 255, 0.18);
+  --ink: #ecedfa;
+  --ink-muted: #969ab8;
+  --hover: rgba(255, 255, 255, 0.06);
+  --hover-strong: rgba(255, 255, 255, 0.09);
+  --active: rgba(255, 255, 255, 0.12);
+  --accent: #8a96f0;
+  --accent-soft: rgba(138, 150, 240, 0.22);
+  --toolbar-bg: rgba(22, 26, 56, 0.88);
+  --toolbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
+    0 12px 32px rgba(0, 0, 0, 0.5);
+  --rail-shadow: 4px 0 14px rgba(0, 0, 0, 0.35);
+  --topbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
+    0 4px 14px rgba(0, 0, 0, 0.4);
+  --slide-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
+    0 30px 80px rgba(0, 0, 0, 0.55);
+  --thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
+    0 8px 24px rgba(0, 0, 0, 0.45);
+  --tool-active-bg: #ecedfa;
+  --tool-active-fg: #0a0d1c;
+  --primary-bg: #ecedfa;
+  --primary-bg-hover: #ffffff;
+  --primary-fg: #0a0d1c;
+  --input-bg: rgba(255, 255, 255, 0.07);
+  --menu-bg: #181c3a;
+  --menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
+  --gap-icon-bg: #181c3a;
+  --scroll-thumb: rgba(255, 255, 255, 0.16);
+  --scroll-thumb-hover: rgba(255, 255, 255, 0.3);
+  --smart-grad: linear-gradient(
+    135deg,
+    rgba(138, 150, 240, 0.32),
+    rgba(243, 142, 121, 0.22)
+  );
+  --smart-fg: #c8cefb;
+  --grid-overlay-bg: rgba(10, 13, 28, 0.96);
+  color-scheme: dark;
+}
+
+.slidewise-editor,
+.slidewise-editor *,
+.slidewise-editor *::before,
+.slidewise-editor *::after {
+  box-sizing: border-box;
+}
+
+.slidewise-editor ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.slidewise-editor ::-webkit-scrollbar-track {
+  background: transparent;
+}
+.slidewise-editor ::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+  border-radius: 999px;
+}
+.slidewise-editor ::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
+}
+
+.slidewise-editor input[type="number"]::-webkit-inner-spin-button,
+.slidewise-editor input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.slidewise-editor button:focus-visible,
+.slidewise-editor [role="button"]:focus-visible,
+.slidewise-editor input:focus-visible,
+.slidewise-editor select:focus-visible,
+.slidewise-editor summary:focus-visible,
+.slidewise-editor [contenteditable]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+.slidewise-editor button {
+  font-family: inherit;
+}

package/src/SlidewiseEditor.tsx

@@ -0,0 +1,214 @@
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  type CSSProperties,
+  type Ref,
+} from "react";
+import { Editor } from "@/components/editor/Editor";
+import {
+  EditorStoreProvider,
+  useEditorStore,
+} from "@/lib/StoreProvider";
+import { collectFontFamilies, ensureGoogleFontsLoaded } from "@/lib/fonts";
+import type { Deck } from "@/lib/types";
+import "./SlidewiseEditor.css";
+
+export interface SlidewiseEditorProps {
+  /**
+   * The deck to edit. Loaded into the editor on mount. If a different
+   * Deck reference is later passed, the editor's internal state is reset
+   * to it (dirty flag reset). Do NOT pass a new reference on every
+   * `onChange` — that would loop. Hold the deck in a stable ref, and
+   * only pass a new one when you intentionally want to reset the editor
+   * (e.g. discard changes, load a different file).
+   */
+  deck: Deck;
+  /** Fires after every committed mutation; receives the updated deck. */
+  onChange?: (deck: Deck) => void;
+  /** Fires when the user clicks "Save" in the top bar. */
+  onSave?: (deck: Deck) => void | Promise<void>;
+  /** Optional override for the default `.slidewise.json` export. */
+  onExport?: (deck: Deck) => void;
+  /** Fires when the dirty flag flips. Useful for "unsaved changes" banners. */
+  onDirtyChange?: (dirty: boolean) => void;
+  /** Reserved for future use; not enforced yet. */
+  readOnly?: boolean;
+  /** "light" or "dark"; defaults to "light". Ignored after first render. */
+  theme?: "light" | "dark";
+  /** Slide id to land on; falls back to the first slide. */
+  initialSlideId?: string;
+  /** Render the built-in top bar (title, undo/redo, save, play). Default true. */
+  showTopBar?: boolean;
+  /** Override the bundled Geist font; sets `--font-geist-sans` on the root. */
+  fontFamily?: string;
+  /** Extra class names appended to the editor root. */
+  className?: string;
+  /** Inline style applied to the editor root. */
+  style?: CSSProperties;
+}
+
+export interface SlidewiseEditorHandle {
+  play(): void;
+  stop(): void;
+  undo(): void;
+  redo(): void;
+  getDeck(): Deck;
+  isDirty(): boolean;
+  resetDirty(): void;
+}
+
+export const SlidewiseEditor = forwardRef<
+  SlidewiseEditorHandle,
+  SlidewiseEditorProps
+>(function SlidewiseEditor(props, ref) {
+  return (
+    <EditorStoreProvider initialDeck={props.deck}>
+      <SlidewiseEditorInner {...props} forwardedRef={ref} />
+    </EditorStoreProvider>
+  );
+});
+
+function SlidewiseEditorInner({
+  deck,
+  onChange,
+  onSave,
+  onExport,
+  onDirtyChange,
+  theme,
+  initialSlideId,
+  showTopBar,
+  fontFamily,
+  className,
+  style,
+  forwardedRef,
+}: SlidewiseEditorProps & { forwardedRef: Ref<SlidewiseEditorHandle> }) {
+  const store = useEditorStore();
+  const savedDeckRef = useRef<Deck>(deck);
+  const dirtyRef = useRef(false);
+  const onChangeRef = useRef(onChange);
+  const onDirtyChangeRef = useRef(onDirtyChange);
+
+  // Keep callback refs current without re-subscribing.
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    onDirtyChangeRef.current = onDirtyChange;
+  }, [onChange, onDirtyChange]);
+
+  // Apply theme on first render and whenever it changes.
+  useEffect(() => {
+    if (theme) {
+      store.getState().setTheme(theme);
+    }
+  }, [theme, store]);
+
+  // Land on the requested slide.
+  useEffect(() => {
+    if (initialSlideId) {
+      const exists = store
+        .getState()
+        .deck.slides.some((s) => s.id === initialSlideId);
+      if (exists) {
+        store.getState().selectSlide(initialSlideId);
+      }
+    }
+    // run once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // External deck reset: if a new Deck reference comes in, replace the store's
+  // deck and clear dirty. The first run is a no-op (savedDeckRef === deck).
+  useEffect(() => {
+    if (deck !== savedDeckRef.current) {
+      store.getState().setDeck(deck);
+      savedDeckRef.current = deck;
+      if (dirtyRef.current) {
+        dirtyRef.current = false;
+        onDirtyChangeRef.current?.(false);
+      }
+    }
+  }, [deck, store]);
+
+  // Subscribe once: emit onChange, recompute dirty, and refresh the Google
+  // Fonts <link> whenever the deck changes.
+  const instanceId = useId().replace(/[^a-z0-9]/gi, "");
+  useEffect(() => {
+    ensureGoogleFontsLoaded(
+      instanceId,
+      collectFontFamilies(store.getState().deck)
+    );
+    return store.subscribe((state, prev) => {
+      if (state.deck === prev.deck) return;
+      onChangeRef.current?.(state.deck);
+      const nextDirty = state.deck !== savedDeckRef.current;
+      if (nextDirty !== dirtyRef.current) {
+        dirtyRef.current = nextDirty;
+        onDirtyChangeRef.current?.(nextDirty);
+      }
+      ensureGoogleFontsLoaded(instanceId, collectFontFamilies(state.deck));
+    });
+  }, [store, instanceId]);
+
+  // Remove our font <link> when the editor unmounts.
+  useEffect(() => {
+    return () => {
+      ensureGoogleFontsLoaded(instanceId, []);
+    };
+  }, [instanceId]);
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      play: () => store.getState().play(),
+      stop: () => store.getState().stop(),
+      undo: () => store.getState().undo(),
+      redo: () => store.getState().redo(),
+      getDeck: () => store.getState().deck,
+      isDirty: () => dirtyRef.current,
+      resetDirty: () => {
+        savedDeckRef.current = store.getState().deck;
+        if (dirtyRef.current) {
+          dirtyRef.current = false;
+          onDirtyChangeRef.current?.(false);
+        }
+      },
+    }),
+    [store]
+  );
+
+  // Wrap the host save callback so a successful save resets the dirty flag.
+  const handleSave = onSave
+    ? async (d: Deck) => {
+        await onSave(d);
+        savedDeckRef.current = d;
+        if (dirtyRef.current) {
+          dirtyRef.current = false;
+          onDirtyChangeRef.current?.(false);
+        }
+      }
+    : undefined;
+
+  const rootStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    ...(fontFamily ? { ["--font-geist-sans" as string]: fontFamily } : null),
+    ...style,
+  };
+
+  return (
+    <div
+      className={className ? `slidewise-editor-host ${className}` : "slidewise-editor-host"}
+      style={rootStyle}
+    >
+      <Editor
+        showTopBar={showTopBar !== false}
+        onSave={handleSave}
+        onExport={onExport}
+      />
+    </div>
+  );
+}
+
+export default SlidewiseEditor;

package/src/SlidewiseFileEditor.tsx

@@ -0,0 +1,242 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { SlidewiseEditor, type SlidewiseEditorHandle } from "./SlidewiseEditor";
+import { parsePptx, serializeDeck } from "@/lib/pptx";
+import type { Deck } from "@/lib/types";
+
+export interface SlidewiseFileEditorProps {
+  /**
+   * Async loader for the file's bytes. Host is responsible for fetching the
+   * blob (e.g. via the platform's `getFile(fileId, { preview: true })`).
+   * Called once on mount.
+   */
+  loadBlob: () => Promise<Blob | ArrayBuffer>;
+  /**
+   * Async saver for a serialized PPTX blob. Host is responsible for the
+   * upload and conflict handling (e.g. via `saveFileContent(fileId, …)`).
+   * Called when `save()` is invoked on the imperative API.
+   */
+  saveBlob: (blob: Blob) => Promise<void>;
+  /** Disables editing affordances (TODO: not yet enforced). */
+  editable?: boolean;
+  /**
+   * The sha256 of the file's contents at load time, if the host wants to do
+   * conflict detection. Stored verbatim and surfaced via `getInitialSha256()`
+   * — Slidewise itself doesn't read it; the host's saveBlob implementation does.
+   */
+  initialSha256?: string | null;
+  /**
+   * Receives an imperative API for save / dirty-tracking / play once the
+   * editor is mounted. Called with `null` on unmount.
+   */
+  onEditorApiChange?: (api: SlidewiseFileEditorApi | null) => void;
+  theme?: "light" | "dark";
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Optional override for how the file is parsed. Default uses Slidewise's
+   * built-in PPTX parser. Useful for testing or for hosting a different
+   * binary deck format on top of the editor.
+   */
+  parse?: (blob: Blob | ArrayBuffer) => Promise<Deck>;
+  /**
+   * Optional override for how the file is serialized. Default uses
+   * Slidewise's built-in PPTX writer.
+   */
+  serialize?: (deck: Deck) => Promise<Blob>;
+}
+
+export interface SlidewiseFileEditorApi {
+  save(): Promise<void>;
+  isDirty(): boolean;
+  play(): void;
+  stop(): void;
+  undo(): void;
+  redo(): void;
+  getInitialSha256(): string | null;
+}
+
+type LoadState =
+  | { status: "loading" }
+  | { status: "error"; error: Error }
+  | { status: "ready"; deck: Deck };
+
+export const SlidewiseFileEditor = forwardRef<
+  SlidewiseFileEditorApi,
+  SlidewiseFileEditorProps
+>(function SlidewiseFileEditor(
+  {
+    loadBlob,
+    saveBlob,
+    initialSha256 = null,
+    onEditorApiChange,
+    theme,
+    className,
+    style,
+    parse = parsePptx,
+    serialize = serializeDeck,
+  },
+  ref
+) {
+  const [state, setState] = useState<LoadState>({ status: "loading" });
+  const editorRef = useRef<SlidewiseEditorHandle>(null);
+  const [dirty, setDirty] = useState(false);
+  const apiCallbackRef = useRef(onEditorApiChange);
+
+  useEffect(() => {
+    apiCallbackRef.current = onEditorApiChange;
+  }, [onEditorApiChange]);
+
+  // Load file once on mount.
+  useEffect(() => {
+    let cancelled = false;
+    setState({ status: "loading" });
+    (async () => {
+      try {
+        const blob = await loadBlob();
+        const deck = await parse(blob);
+        if (!cancelled) setState({ status: "ready", deck });
+      } catch (err) {
+        if (!cancelled) {
+          setState({
+            status: "error",
+            error: err instanceof Error ? err : new Error(String(err)),
+          });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // loadBlob/parse intentionally omitted: we load exactly once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Build and publish the imperative API. Republish whenever inputs change
+  // so closures see the latest serialize/saveBlob.
+  useEffect(() => {
+    if (state.status !== "ready") return;
+
+    const api: SlidewiseFileEditorApi = {
+      save: async () => {
+        const current =
+          editorRef.current?.getDeck() ?? state.deck;
+        const blob = await serialize(current);
+        await saveBlob(blob);
+        editorRef.current?.resetDirty();
+      },
+      isDirty: () => editorRef.current?.isDirty() ?? false,
+      play: () => editorRef.current?.play(),
+      stop: () => editorRef.current?.stop(),
+      undo: () => editorRef.current?.undo(),
+      redo: () => editorRef.current?.redo(),
+      getInitialSha256: () => initialSha256,
+    };
+
+    apiCallbackRef.current?.(api);
+    return () => {
+      apiCallbackRef.current?.(null);
+    };
+  }, [state, serialize, saveBlob, initialSha256]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      save: async () => {
+        if (state.status !== "ready") return;
+        const current = editorRef.current?.getDeck() ?? state.deck;
+        const blob = await serialize(current);
+        await saveBlob(blob);
+        editorRef.current?.resetDirty();
+      },
+      isDirty: () => editorRef.current?.isDirty() ?? false,
+      play: () => editorRef.current?.play(),
+      stop: () => editorRef.current?.stop(),
+      undo: () => editorRef.current?.undo(),
+      redo: () => editorRef.current?.redo(),
+      getInitialSha256: () => initialSha256,
+    }),
+    [state, serialize, saveBlob, initialSha256]
+  );
+
+  if (state.status === "loading") {
+    return (
+      <div style={{ ...frameStyle, ...style }} className={className}>
+        <div style={messageStyle}>Loading…</div>
+      </div>
+    );
+  }
+  if (state.status === "error") {
+    return (
+      <div style={{ ...frameStyle, ...style }} className={className}>
+        <div style={{ ...messageStyle, color: "#E8504C" }}>
+          Could not open file: {state.error.message}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ ...frameStyle, ...style }} className={className}>
+      <SlidewiseEditor
+        ref={editorRef}
+        deck={state.deck}
+        theme={theme}
+        onDirtyChange={setDirty}
+        onSave={async (next) => {
+          const blob = await serialize(next);
+          await saveBlob(blob);
+        }}
+      />
+      {dirty && <UnsavedBadge />}
+    </div>
+  );
+});
+
+const frameStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  background: "#ffffff",
+};
+
+const messageStyle: CSSProperties = {
+  margin: "auto",
+  fontFamily: "Inter, system-ui, sans-serif",
+  fontSize: 14,
+  color: "#5b6178",
+};
+
+function UnsavedBadge() {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 12,
+        right: 12,
+        padding: "4px 10px",
+        background: "rgba(232, 80, 76, 0.12)",
+        color: "#E8504C",
+        borderRadius: 999,
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontSize: 11,
+        fontWeight: 600,
+        letterSpacing: 0.2,
+        zIndex: 50,
+        pointerEvents: "none",
+      }}
+    >
+      Unsaved changes
+    </div>
+  );
+}
+
+export default SlidewiseFileEditor;