feat(pptx): patch-mode saves + IndexedDB-backed source persistence

Two changes that make edits feel like editing the real PowerPoint, not
regenerating from a stripped model.

1. Patch-mode saves: edited elements get their source <p:sp> spliced in
   place instead of regenerated via pptxgenjs, so themed colors / brand
   fonts / gradient fills / custGeom / effects / autofit / body padding
   on the unchanged parts of the element survive verbatim. Covers text
   content edits (splice <p:txBody> preserving first paragraph's pPr
   and first run's rPr) and geometry edits (splice <a:xfrm> or <p:xfrm>
   for <p:graphicFrame>). pptxgenjs remains the fallback for
   unpatchable cases. Placeholder-inherited shapes (no explicit xfrm in
   source) are now registered too — patch-mode always splices geometry
   into the patched output for them.

2. IndexedDB-backed source persistence: parsePptx mirrors source bytes
   to IndexedDB keyed by deck.sourcePptxId; serializeDeck reads through
   in-memory cache → IndexedDB → non-enumerable attachment → explicit
   options.source. The chrome / EMF / slide-bg preservation pipeline
   now survives page reloads on its own — host apps that persist deck
   JSON to localStorage no longer need to re-attach source bytes.

Also: Export topbar button falls back to a real .pptx download (via
serializeDeck) instead of a .slidewise.json dump when the host doesn't
register an onExport callback. Makes local round-trip testing trivial.

Validated end-to-end on KBC-More_sample_slides.pptx: after
parsePptx → structuredClone + spread → serializeDeck(deck) with no
options.source, the saved zip retains all 2 masters, 50 layouts, and 3
themes versus the 1/1/1 the previous build produced. New regression
tests in patch-mode.test.ts and slide10-bg.test.ts cover the theme-ref
and geometry-patch paths.

Author: karthikmudunuri

.changeset/patch-mode-and-idb-source.md

@@ -0,0 +1,17 @@
+---
+"@textcortex/slidewise": minor
+---
+
+**Edits keep their context.** Two changes that make a small edit feel like editing the real PowerPoint, not regenerating it from a stripped model.
+
+1. **Patch-mode saves** — when an edit only touches fields the importer knows how to splice back into the source OOXML (text content, geometry), the source `<p:sp>` / `<p:pic>` / `<p:graphicFrame>` is patched in place instead of being regenerated via pptxgenjs. Everything else on that element — themed colors (`<a:schemeClr>`), brand fonts (`<a:latin>` / `<a:ea>` / `<a:cs>`), gradient and image fills, `<a:custGeom>` silhouettes, body padding, autofit hints, line styling, `<a:effectLst>` shadows — survives verbatim because it was never touched. Modelled after Univer's "edit the source doc tree, never round-trip through a lossy intermediate model" approach.
+
+   - Text content edits: splice the new text into the source `<p:txBody>` preserving the first paragraph's `<a:pPr>` and the first run's `<a:rPr>` so themed colors / fonts / bullets / alignment carry through. Multi-line text becomes multi-paragraph; mixed-style runs still fall back to pptxgenjs (future work).
+   - Geometry edits (drag / resize / rotate): splice `<a:xfrm>` (or `<p:xfrm>` for `<p:graphicFrame>`) and keep everything else verbatim. Works on `<p:sp>`, `<p:pic>`, `<p:cxnSp>`, `<p:graphicFrame>`.
+   - Placeholder-inherited shapes (no explicit xfrm in source) are now registered too. Patch-mode handles them by always splicing the current geometry into the patched output, so text edits on title / body / content placeholders keep their themed styling.
+
+   pptxgenjs remains the fallback emitter for unpatchable cases (newly added elements, font / color changes via the editor's pickers, mixed-style run restyling, shape kind changes).
+
+2. **IndexedDB-backed source persistence** — `parsePptx` now mirrors source bytes to IndexedDB keyed by `Deck.sourcePptxId`. `serializeDeck`'s source resolution checks the in-memory cache first, then IndexedDB, then the legacy non-enumerable attachment, then the host-supplied `options.source`. This means the chrome / EMF / slide-bg preservation pipeline survives full page reloads on its own — host apps that persist the deck JSON in localStorage and rehydrate on reload no longer need to also re-attach the original bytes by hand. Falls back cleanly in SSR / Node environments where IndexedDB is undefined.
+
+Validated on `KBC-More_sample_slides.pptx`: after `parsePptx → structuredClone + spread → serializeDeck(deck)` (no `source` passed), the saved zip retains all **2 masters, 50 layouts, and 3 themes** vs the 1/1/1 the broken 1.12.1 build produced. New regression tests in `patch-mode.test.ts` confirm a text edit on `eon-deck.pptx` slide 10 column 2 keeps the source `<a:schemeClr val="accent1"/>` fill and the `<a:schemeClr val="bg1"/>` text color, and a position drag preserves both.

packages/slidewise/src/compound/topbar/Export.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
 import { Download } from "lucide-react";
 import { useEditorStore } from "@/lib/StoreProvider";
+import { serializeDeck } from "@/lib/pptx";
 import { useHostCallbacks } from "../HostContext";
 import { useIcons } from "../IconContext";
 import { useLabels } from "../LabelsContext";
@@ -9,7 +10,12 @@ import { primaryBtnStyle, primaryHoverHandlers } from "./styles";
 /**
  * Export button. Calls the host's `onExport` (from `<Slidewise.Root
  * onExport>`) with the current deck. If no host callback is registered,
- * falls back to downloading a `.slidewise.json` of the deck.
+ * falls back to downloading a real `.pptx` of the deck — serializeDeck
+ * resolves source bytes via the in-module cache keyed by
+ * `Deck.sourcePptxId`, so master / layout / theme / font / EMF / slide-bg
+ * preservation kicks in for any deck that was parsed via `parsePptx` in
+ * the same session. This lets hosts verify the full edit → save round
+ * trip without wiring `onExport` at all.
  *
  * Visually emphasized vs the chrome buttons — uses `--primary-bg` so hosts
  * retheming the primary surface get a consistent affordance.
@@ -35,19 +41,32 @@ export function Export({
   const labels = useLabels();
   const resolved = label ?? labels.export;
 
-  const onClick = () => {
+  const onClick = async () => {
     const deck = store.getState().deck;
     if (onExportHost) {
       onExportHost(deck);
       return;
     }
-    const blob = new Blob([JSON.stringify(deck, null, 2)], {
-      type: "application/json",
-    });
+    let blob: Blob;
+    let extension: string;
+    try {
+      blob = await serializeDeck(deck);
+      extension = "pptx";
+    } catch (err) {
+      // PPTX serialization shouldn't fail on a deck the editor already
+      // renders, but if pptxgenjs throws (corrupt media, unsupported
+      // shape, etc.) we still want the user to get *something* off their
+      // screen rather than an unrecoverable error — fall back to JSON.
+      console.error("[slidewise] PPTX export failed, falling back to JSON:", err);
+      blob = new Blob([JSON.stringify(deck, null, 2)], {
+        type: "application/json",
+      });
+      extension = "slidewise.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.download = `${(deck.title || "deck").replace(/[^a-z0-9-_]+/gi, "-")}.${extension}`;
     a.click();
     URL.revokeObjectURL(url);
   };

packages/slidewise/src/lib/pptx/__tests__/patch-mode.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from "vitest";
+import { readFile, access } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import JSZip from "jszip";
+import { parsePptx, serializeDeck } from "../index";
+import type { TextElement } from "@/lib/types";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const attachmentsDir = path.resolve(
+  __dirname,
+  "../../../../../../.context/attachments"
+);
+
+async function fixtureExists(name: string): Promise<boolean> {
+  try {
+    await access(path.join(attachmentsDir, name));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const hasEon = await fixtureExists("eon-deck-v1.pptx");
+
+describe("patch-mode saves preserve theme refs on text edits", () => {
+  it.skipIf(!hasEon)(
+    "edits text content without losing themed colors / fonts on slide 10 column 2",
+    async () => {
+      const buf = await readFile(path.join(attachmentsDir, "eon-deck-v1.pptx"));
+      const source = buf.buffer.slice(
+        buf.byteOffset,
+        buf.byteOffset + buf.byteLength
+      ) as ArrayBuffer;
+      const deck = await parsePptx(source);
+
+      // Slide 10 col 2 number "2" — bg = accent1 (red), text color =
+      // schemeClr bg1 (white). The bg is on the slide-level <p:spPr>
+      // override, the text colour is in <a:rPr><a:solidFill><a:schemeClr>.
+      const slide10 = deck.slides[9];
+      const colTwo = slide10.elements.find(
+        (e) => e.type === "text" && (e as TextElement).text === "2"
+      ) as TextElement | undefined;
+      expect(colTwo).toBeTruthy();
+
+      // Edit the text without touching any styling fields.
+      colTwo!.text = "II";
+
+      const blob = await serializeDeck(deck, { source });
+      const out = await JSZip.loadAsync(await blob.arrayBuffer());
+      const slide10Xml = await out
+        .file("ppt/slides/slide10.xml")!
+        .async("string");
+
+      // Edited text must be present.
+      expect(slide10Xml).toContain("<a:t>II</a:t>");
+
+      // The slide-level fill override (schemeClr accent1 → the red bg) must
+      // survive the patch path — pptxgenjs would have collapsed this to an
+      // inline srgbClr (or dropped it entirely on a placeholder shape).
+      expect(slide10Xml).toMatch(
+        /<p:spPr>[\s\S]*?<a:solidFill>[\s\S]*?<a:schemeClr val="accent1"\/>[\s\S]*?<\/a:solidFill>[\s\S]*?<\/p:spPr>/
+      );
+
+      // The themed text colour <a:rPr>…<a:schemeClr val="bg1"/> must
+      // survive — losing it would have rendered the "II" as the default
+      // body color (dark) instead of white-on-red.
+      expect(slide10Xml).toMatch(
+        /<a:rPr[\s\S]*?<a:solidFill>[\s\S]*?<a:schemeClr val="bg1"\/>[\s\S]*?<\/a:solidFill>[\s\S]*?<\/a:rPr>/
+      );
+    }
+  );
+
+  it.skipIf(!hasEon)(
+    "moves an element via geometry-only patch, keeping fill / themed color verbatim",
+    async () => {
+      const buf = await readFile(path.join(attachmentsDir, "eon-deck-v1.pptx"));
+      const source = buf.buffer.slice(
+        buf.byteOffset,
+        buf.byteOffset + buf.byteLength
+      ) as ArrayBuffer;
+      const deck = await parsePptx(source);
+
+      const slide10 = deck.slides[9];
+      const colTwo = slide10.elements.find(
+        (e) => e.type === "text" && (e as TextElement).text === "2"
+      ) as TextElement | undefined;
+      expect(colTwo).toBeTruthy();
+      const originalX = colTwo!.x;
+      colTwo!.x = originalX + 100; // user dragged it right 100 px
+
+      const blob = await serializeDeck(deck, { source });
+      const out = await JSZip.loadAsync(await blob.arrayBuffer());
+      const slide10Xml = await out
+        .file("ppt/slides/slide10.xml")!
+        .async("string");
+
+      // The themed fill + text color must remain intact after the move.
+      expect(slide10Xml).toMatch(
+        /<p:spPr>[\s\S]*?<a:solidFill>[\s\S]*?<a:schemeClr val="accent1"\/>/
+      );
+      expect(slide10Xml).toMatch(
+        /<a:rPr[\s\S]*?<a:schemeClr val="bg1"\/>/
+      );
+      // The xfrm must reflect the new x.
+      const newOffX = Math.round((originalX + 100) * (914400 / 144));
+      expect(slide10Xml).toContain(`<a:off x="${newOffX}"`);
+    }
+  );
+});

packages/slidewise/src/lib/pptx/__tests__/slide10-bg.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from "vitest";
+import { readFile, access } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import { parsePptx } from "../index";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const attachmentsDir = path.resolve(
+  __dirname,
+  "../../../../../../.context/attachments"
+);
+
+async function fixtureExists(name: string): Promise<boolean> {
+  try {
+    await access(path.join(attachmentsDir, name));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const has = await fixtureExists("eon-deck-v1.pptx");
+
+describe("eon-deck slide 10 column 2 background", () => {
+  it.skipIf(!has)("imports column 2 number placeholder with red bg + white text", async () => {
+    const buf = await readFile(path.join(attachmentsDir, "eon-deck-v1.pptx"));
+    const deck = await parsePptx(
+      buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength) as ArrayBuffer
+    );
+    const slide10 = deck.slides[9];
+    const colTwo = slide10.elements.find(
+      (e) => e.type === "text" && (e as { text: string }).text === "2"
+    ) as { background?: string; color?: string; w: number; h: number } | undefined;
+    expect(colTwo).toBeTruthy();
+    expect(colTwo!.background?.toUpperCase()).toBe("#EA1B0A");
+    expect(colTwo!.color?.toUpperCase()).toBe("#FFFFFF");
+    expect(colTwo!.w).toBeGreaterThan(300);
+    expect(colTwo!.h).toBeGreaterThan(700);
+  });
+});