@textcortex/slidewise 1.8.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Embeddable React PPTX editor.",
   "license": "MIT",
   "type": "module",

package/src/components/editor/ElementView.tsx

@@ -65,12 +65,17 @@ function TextView({
         : el.vAlign === "middle"
           ? "center"
           : "flex-end",
+    background: el.background,
+    padding: el.padding
+      ? `${el.padding.t}px ${el.padding.r}px ${el.padding.b}px ${el.padding.l}px`
+      : undefined,
+    boxSizing: el.padding ? "border-box" : undefined,
     cursor: editing ? "text" : "inherit",
   };
   const inner: React.CSSProperties = {
     width: "100%",
     color: el.color,
-    fontFamily: el.fontFamily,
+    fontFamily: withGenericFallback(el.fontFamily),
     fontSize: el.fontSize,
     fontWeight: el.fontWeight,
     fontStyle: el.italic ? "italic" : "normal",
@@ -85,11 +90,40 @@ function TextView({
     outline: "none",
   };
 
+  const backingPath = el.backingPath;
+  const positionedOuter: React.CSSProperties = backingPath
+    ? { ...outer, position: "relative" }
+    : outer;
+  const innerStacked: React.CSSProperties = backingPath
+    ? { ...inner, position: "relative", zIndex: 1 }
+    : inner;
+  const backingSvg = backingPath ? (
+    <svg
+      viewBox={`0 0 ${backingPath.viewW} ${backingPath.viewH}`}
+      preserveAspectRatio="none"
+      style={{
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: 0,
+      }}
+    >
+      <path
+        d={backingPath.d}
+        fill={backingPath.fill}
+        fillRule={backingPath.fillRule ?? "nonzero"}
+      />
+    </svg>
+  ) : null;
+
   if (editing) {
     return (
-      <div style={outer}>
+      <div style={positionedOuter}>
+        {backingSvg}
         <EditableText
-          style={inner}
+          style={innerStacked}
           initialText={el.text}
           initialRuns={el.runs}
           onCommit={(t, r) => onCommit?.(t, r)}
@@ -100,8 +134,9 @@ function TextView({
 
   if (el.runs && el.runs.length) {
     return (
-      <div style={outer}>
-        <div style={inner}>
+      <div style={positionedOuter}>
+        {backingSvg}
+        <div style={innerStacked}>
           {el.runs.map((r, i) => (
             <span key={i} style={runCssStyle(r)}>
               {r.text}
@@ -113,15 +148,40 @@ function TextView({
   }
 
   return (
-    <div style={outer}>
-      <div style={inner}>{el.text}</div>
+    <div style={positionedOuter}>
+      {backingSvg}
+      <div style={innerStacked}>{el.text}</div>
     </div>
   );
 }
 
+/**
+ * Append a `sans-serif` generic so brand families imported from PPTX
+ * (e.g. "EON Office Head") degrade gracefully when the typeface isn't
+ * installed locally — without the generic the browser silently picks
+ * its default serif. Already-qualified stacks (containing a comma) and
+ * plain generics ("serif"/"monospace") pass through untouched.
+ */
+function withGenericFallback(family: string | undefined): string | undefined {
+  if (!family) return family;
+  if (family.includes(",")) return family;
+  const lower = family.trim().toLowerCase();
+  if (
+    lower === "serif" ||
+    lower === "sans-serif" ||
+    lower === "monospace" ||
+    lower === "cursive" ||
+    lower === "fantasy" ||
+    lower === "system-ui"
+  ) {
+    return family;
+  }
+  return `${family}, sans-serif`;
+}
+
 function runCssStyle(r: TextRun): React.CSSProperties {
   const s: React.CSSProperties = {};
-  if (r.fontFamily) s.fontFamily = r.fontFamily;
+  if (r.fontFamily) s.fontFamily = withGenericFallback(r.fontFamily);
   if (r.fontSize) s.fontSize = r.fontSize;
   if (r.fontWeight) s.fontWeight = r.fontWeight;
   if (r.color) s.color = r.color;
@@ -315,6 +375,27 @@ function sameStyle(a: TextRun, b: TextRun): boolean {
 function ShapeView({ el }: { el: ShapeElement }) {
   const stroke = el.stroke ?? "transparent";
   const sw = el.strokeWidth ?? 0;
+  // Custom vector path (PPTX <a:custGeom>) takes precedence over the preset
+  // kind — the path coordinates already encode the actual silhouette.
+  if (el.path) {
+    return (
+      <svg
+        viewBox={`0 0 ${el.path.viewW} ${el.path.viewH}`}
+        preserveAspectRatio="none"
+        width="100%"
+        height="100%"
+      >
+        <path
+          d={el.path.d}
+          fill={el.fill}
+          fillRule={el.path.fillRule ?? "nonzero"}
+          stroke={stroke}
+          strokeWidth={sw || undefined}
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    );
+  }
   if (el.shape === "rect" || el.shape === "rounded") {
     return (
       <div
@@ -474,7 +555,9 @@ function LineView({ el }: { el: LineElement }) {
 function TableView({ el }: { el: TableElement }) {
   const cols = el.rows[0]?.length ?? 1;
   // PPTX-faithful: contiguous cells, no inter-cell gap, no rounded corners.
-  // Earlier "card grid" styling drifted too far from the source look.
+  // Cells share their dividers via inset box-shadows so we draw a single
+  // grid line between adjacent cells instead of doubling-up borders.
+  const stroke = el.borderColor ?? "rgba(0, 0, 0, 0.12)";
   return (
     <div
       style={{
@@ -485,6 +568,7 @@ function TableView({ el }: { el: TableElement }) {
         height: "100%",
         gap: 0,
         background: "transparent",
+        boxShadow: `inset 0 0 0 1px ${stroke}`,
       }}
     >
       {el.rows.flatMap((row, ri) =>
@@ -504,6 +588,10 @@ function TableView({ el }: { el: TableElement }) {
               minHeight: 0,
               overflow: "hidden",
               wordBreak: "break-word",
+              borderRight:
+                ci < cols - 1 ? `1px solid ${stroke}` : undefined,
+              borderBottom:
+                ri < el.rows.length - 1 ? `1px solid ${stroke}` : undefined,
             }}
           >
             {cell}

package/src/lib/pptx/__tests__/roundtrip.test.ts

@@ -237,4 +237,87 @@ describe("pptx round-trip", () => {
     expect(colors).toContain("#FFFFFF");
     expect(colors).toContain("#0F1B3D");
   });
+
+  it("preserves UnknownElement OOXML and its rels across a round-trip", async () => {
+    // Build a deck with a single hand-crafted UnknownElement carrying a raw
+    // OOXML fragment that references rId7. parsePptx then attaches a fake
+    // source archive providing that rId; serializeDeck has to renumber the
+    // rId, write the matching <Relationship>, and copy the referenced
+    // media into the output zip so the fragment resolves on re-parse.
+    const JSZip = (await import("jszip")).default;
+    const sourceZip = new JSZip();
+    sourceZip.file(
+      "[Content_Types].xml",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
+  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
+  <Default Extension="xml" ContentType="application/xml"/>
+  <Default Extension="png" ContentType="image/png"/>
+  <Override PartName="/ppt/presentation.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml"/>
+  <Override PartName="/ppt/slides/slide1.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slide+xml"/>
+</Types>`
+    );
+    sourceZip.file(
+      "_rels/.rels",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="ppt/presentation.xml"/></Relationships>`
+    );
+    sourceZip.file(
+      "ppt/_rels/presentation.xml.rels",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slides/slide1.xml"/></Relationships>`
+    );
+    sourceZip.file(
+      "ppt/presentation.xml",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><p:presentation xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><p:sldIdLst><p:sldId id="256" r:id="rId1"/></p:sldIdLst><p:sldSz cx="12192000" cy="6858000"/></p:presentation>`
+    );
+    sourceZip.file(
+      "ppt/slides/slide1.xml",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><p:sld xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><p:cSld><p:spTree><p:graphicFrame><a:graphic><a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/diagram"><dgm:relIds xmlns:dgm="http://schemas.openxmlformats.org/drawingml/2006/diagram" r:dm="rId7"/></a:graphicData></a:graphic></p:graphicFrame></p:spTree></p:cSld></p:sld>`
+    );
+    sourceZip.file(
+      "ppt/slides/_rels/slide1.xml.rels",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId7" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="../media/preserved.png"/></Relationships>`
+    );
+    // Smallest valid PNG (1×1 transparent) so JSZip + serializer have real
+    // bytes to copy.
+    const onePxPng = Uint8Array.from([
+      0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d,
+      0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01,
+      0x08, 0x06, 0x00, 0x00, 0x00, 0x1f, 0x15, 0xc4, 0x89, 0x00, 0x00, 0x00,
+      0x0d, 0x49, 0x44, 0x41, 0x54, 0x78, 0x9c, 0x63, 0x00, 0x01, 0x00, 0x00,
+      0x05, 0x00, 0x01, 0x0d, 0x0a, 0x2d, 0xb4, 0x00, 0x00, 0x00, 0x00, 0x49,
+      0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82,
+    ]);
+    sourceZip.file("ppt/media/preserved.png", onePxPng);
+
+    const sourceBuffer = await sourceZip.generateAsync({ type: "arraybuffer" });
+    const parsed = await parsePptx(sourceBuffer);
+    const unknowns = parsed.slides[0].elements.filter(
+      (e) => e.type === "unknown"
+    );
+    expect(unknowns.length).toBe(1);
+    expect((unknowns[0] as { ooxmlXml: string }).ooxmlXml).toContain(
+      "diagram"
+    );
+    expect((unknowns[0] as { ooxmlXml: string }).ooxmlXml).toMatch(
+      /r:dm="rId7"/
+    );
+
+    const blob = await serializeDeck(parsed);
+    const out = await blob.arrayBuffer();
+    const reZip = await JSZip.loadAsync(out);
+    // The preserved diagram fragment landed in the generated slide1 xml.
+    const slide1 = await reZip.file("ppt/slides/slide1.xml")?.async("string");
+    expect(slide1).toContain("dgm:relIds");
+    // The original rId7 was renumbered; the slide rels now expose the new
+    // rId pointing at a preserved-prefixed media path.
+    const slide1Rels = await reZip
+      .file("ppt/slides/_rels/slide1.xml.rels")
+      ?.async("string");
+    expect(slide1Rels).toMatch(/slidewise_preserved_\d+_preserved\.png/);
+    // The actual PNG bytes were copied into the output archive.
+    const preservedFiles = Object.keys(reZip.files).filter((p) =>
+      /slidewise_preserved_\d+_preserved\.png$/.test(p)
+    );
+    expect(preservedFiles.length).toBe(1);
+  });
 });

package/src/lib/pptx/deckToPptx.ts

@@ -1,4 +1,5 @@
 import pptxgen from "pptxgenjs";
+import JSZip from "jszip";
 import type {
   Deck,
   Slide,
@@ -11,15 +12,25 @@ import type {
   TableElement,
   IconElement,
   EmbedElement,
+  UnknownElement,
 } from "@/lib/types";
 import { pxToInches, pxToPoints } from "./units";
+import { SOURCE_PPTX, SOURCE_SLIDE_PATH } from "./pptxToDeck";
 
 /**
- * Serialize a Slidewise Deck to a real PPTX blob. Round-trips well for the
- * element types Slidewise natively supports (text, shape, image, line,
- * table, icon, embed). UnknownElement and entrance animations are dropped
- * with a warning — proper preservation requires bypassing pptxgenjs and
- * is out of scope for v1.
+ * Serialize a Slidewise Deck to a real PPTX blob.
+ *
+ * Native element types (text, shape, image, line, table, icon, embed)
+ * are written through pptxgenjs. UnknownElement (charts, SmartArt,
+ * group shapes, OLE, math, anything else the importer couldn't model)
+ * is preserved verbatim: we keep the original PPTX bytes on the Deck
+ * during parse, and after pptxgenjs finishes, we post-process the
+ * generated zip to inject the preserved OOXML — plus any media those
+ * fragments referenced — into the matching slides. The fragments
+ * inside an UnknownElement keep their original rIds; we copy the
+ * corresponding rels entries (and media payloads) from the source
+ * zip, renumbering rIds as needed to avoid clashes with what
+ * pptxgenjs already wrote.
  */
 export async function serializeDeck(deck: Deck): Promise<Blob> {
   const pptx = new pptxgen();
@@ -30,9 +41,12 @@ export async function serializeDeck(deck: Deck): Promise<Blob> {
     addSlide(pptx, slide);
   }
 
-  // pptxgenjs returns the requested type; outputType: "blob" → Blob.
-  const result = (await pptx.write({ outputType: "blob" })) as Blob;
-  return result;
+  // Use arraybuffer (universal: works in Node + browser, accepted by JSZip
+  // directly) and wrap to Blob only when we're done post-processing.
+  const generated = (await pptx.write({
+    outputType: "arraybuffer",
+  })) as ArrayBuffer;
+  return preserveUnknowns(generated, deck);
 }
 
 function addSlide(pptx: pptxgen, slide: Slide): void {
@@ -76,9 +90,9 @@ function addElement(s: pptxgen.Slide, el: SlideElement): void {
       addEmbed(s, el);
       return;
     case "unknown":
-      // Lossy: pptxgenjs has no public API for raw OOXML injection.
-      // Future work: post-process the generated zip to re-inject UnknownElement
-      // XML into the appropriate slide files for true round-trip.
+      // Preserved by preserveUnknowns() after pptxgenjs writes the zip.
+      // The post-process step injects el.ooxmlXml into the matching
+      // slide's <p:spTree> and copies any media the fragment referenced.
       return;
   }
 }
@@ -270,6 +284,261 @@ function addEmbed(s: pptxgen.Slide, el: EmbedElement): void {
   );
 }
 
+// -- UnknownElement preservation -------------------------------------------
+
+/**
+ * Post-process the zip pptxgenjs produced: for every slide that carries
+ * UnknownElement payloads, inject the preserved OOXML back into the
+ * generated `<p:spTree>` and pull along the rels + media those fragments
+ * referenced from the original archive.
+ *
+ * No-ops cleanly when the deck has no UnknownElements, when no source
+ * zip is attached (deck wasn't created via parsePptx), or when a slide
+ * the editor added doesn't have a source path.
+ */
+async function preserveUnknowns(
+  generated: ArrayBuffer,
+  deck: Deck
+): Promise<Blob> {
+  const wrapBlob = () => new Blob([generated], { type: PPTX_MIME });
+  const unknownsBySlide = collectUnknowns(deck);
+  if (!unknownsBySlide.size) return wrapBlob();
+  const sourceBuffer = (deck as unknown as Record<string, unknown>)[SOURCE_PPTX];
+  if (!(sourceBuffer instanceof ArrayBuffer)) return wrapBlob();
+
+  const [outZip, srcZip] = await Promise.all([
+    JSZip.loadAsync(generated),
+    JSZip.loadAsync(sourceBuffer),
+  ]);
+
+  for (const [slideIndex, group] of unknownsBySlide) {
+    const generatedSlidePath = `ppt/slides/slide${slideIndex + 1}.xml`;
+    const generatedRelsPath = `ppt/slides/_rels/slide${slideIndex + 1}.xml.rels`;
+    if (!outZip.file(generatedSlidePath)) continue;
+    if (!group.sourcePath) continue;
+    const sourceRelsPath = relsPathFor(group.sourcePath);
+
+    await injectUnknownsIntoSlide(
+      outZip,
+      srcZip,
+      generatedSlidePath,
+      generatedRelsPath,
+      sourceRelsPath,
+      group.unknowns
+    );
+  }
+
+  // JSZip's blob output preserves the OOXML mime type set by pptxgenjs.
+  return outZip.generateAsync({ type: "blob", mimeType: PPTX_MIME });
+}
+
+interface UnknownGroup {
+  unknowns: UnknownElement[];
+  sourcePath: string | undefined;
+}
+
+function collectUnknowns(deck: Deck): Map<number, UnknownGroup> {
+  const out = new Map<number, UnknownGroup>();
+  for (let i = 0; i < deck.slides.length; i++) {
+    const slide = deck.slides[i];
+    const unknowns = slide.elements.filter(
+      (e): e is UnknownElement => e.type === "unknown" && !!e.ooxmlXml
+    );
+    if (!unknowns.length) continue;
+    const sourcePath = (slide as unknown as Record<string, unknown>)[
+      SOURCE_SLIDE_PATH
+    ];
+    out.set(i, {
+      unknowns,
+      sourcePath: typeof sourcePath === "string" ? sourcePath : undefined,
+    });
+  }
+  return out;
+}
+
+/**
+ * For one slide: rewrite the preserved fragments so their rIds don't
+ * collide with whatever pptxgenjs already allocated, copy the
+ * referenced rels + media from the source zip, and splice the
+ * fragments in before the closing `</p:spTree>`.
+ */
+async function injectUnknownsIntoSlide(
+  outZip: JSZip,
+  srcZip: JSZip,
+  generatedSlidePath: string,
+  generatedRelsPath: string,
+  sourceRelsPath: string,
+  unknowns: UnknownElement[]
+): Promise<void> {
+  const slideXml = await outZip.file(generatedSlidePath)!.async("string");
+  const closeIdx = slideXml.lastIndexOf("</p:spTree>");
+  if (closeIdx < 0) return;
+
+  const srcRelsXml = (await srcZip.file(sourceRelsPath)?.async("string")) ?? null;
+  const outRelsXml =
+    (await outZip.file(generatedRelsPath)?.async("string")) ??
+    `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"></Relationships>`;
+
+  const srcRels = parseRels(srcRelsXml);
+  const outRels = parseRels(outRelsXml);
+  let nextRid = highestRid(outRels) + 1;
+  const newRelLines: string[] = [];
+  const ridMap = new Map<string, string>();
+  // Source slide's directory (used to resolve relative rel targets like
+  // "../media/imageN.png" against the source archive).
+  const sourceSlidePath = sourceRelsPath.replace(/_rels\/([^/]+)\.rels$/, "$1");
+  const sourceDir = dirOf(sourceSlidePath);
+  const outDir = dirOf(generatedSlidePath);
+  const rewritten: string[] = [];
+
+  for (const u of unknowns) {
+    // Every r:id / r:embed / r:link inside the preserved fragment refers
+    // to a relationship in the SOURCE slide's rels. Renumber to fresh
+    // rIds, copy the matching source rel into the generated rels, and
+    // copy the media payload into the generated zip (at a fresh path so
+    // pptxgenjs-allocated media doesn't clash with the preserved media).
+    // Match every `r:*="rIdN"` attribute. The relationship-namespaced
+    // attribute names depend on the schema: `r:id` / `r:embed` / `r:link`
+    // for slides + drawings, but charts use `r:id`, SmartArt uses `r:dm`
+    // (data model) / `r:cs` (colors) / `r:qs` (quick styles) / `r:lo`
+    // (layout), and embedded objects use `r:id`/`r:image`. Restricting to
+    // the value pattern `rId\d+` keeps unrelated `r:*` attributes
+    // untouched.
+    const xml = u.ooxmlXml.replace(
+      /\b(r:[a-zA-Z]+)="(rId\d+)"/g,
+      (_match, attr, srcRid) => {
+        const cached = ridMap.get(srcRid);
+        if (cached) return `${attr}="${cached}"`;
+        const srcRel = srcRels.get(srcRid);
+        if (!srcRel) return `${attr}="${srcRid}"`;
+
+        const newRid = `rId${nextRid++}`;
+        ridMap.set(srcRid, newRid);
+
+        let target = srcRel.target;
+        const isExternal = /^https?:\/\//i.test(target);
+        const isInternalPart = !isExternal && !target.startsWith("/");
+        if (isInternalPart) {
+          const srcFullTarget = normalisePath(target, sourceDir);
+          const srcFile = srcZip.file(srcFullTarget);
+          if (srcFile) {
+            // Always copy to a uniquely-prefixed path so we never collide
+            // with media pptxgenjs already wrote.
+            const newTarget = uniqueTarget(target, outZip, outDir);
+            const newFullTarget = normalisePath(newTarget, outDir);
+            outZip.file(newFullTarget, srcFile.async("uint8array"), {
+              binary: true,
+            });
+            target = newTarget;
+          }
+        }
+
+        newRelLines.push(buildRelXml(newRid, srcRel.type, target));
+        return `${attr}="${newRid}"`;
+      }
+    );
+    rewritten.push(xml);
+  }
+
+  if (rewritten.length) {
+    const inject = rewritten.join("");
+    const updatedSlide = slideXml.slice(0, closeIdx) + inject + slideXml.slice(closeIdx);
+    outZip.file(generatedSlidePath, updatedSlide);
+  }
+
+  if (newRelLines.length) {
+    const insertAt = outRelsXml.lastIndexOf("</Relationships>");
+    const updatedRels =
+      insertAt >= 0
+        ? outRelsXml.slice(0, insertAt) +
+          newRelLines.join("") +
+          outRelsXml.slice(insertAt)
+        : outRelsXml.replace(
+            /<Relationships[^>]*>/,
+            (m) => `${m}${newRelLines.join("")}`
+          );
+    outZip.file(generatedRelsPath, updatedRels);
+  }
+}
+
+function parseRels(xml: string | null): Map<string, { type: string; target: string }> {
+  const map = new Map<string, { type: string; target: string }>();
+  if (!xml) return map;
+  // Match each <Relationship .../> tag. Use a non-greedy scan up to the
+  // self-closing `/>` rather than a `[^/]` class — relationship targets
+  // routinely contain `/` (e.g. `Target="../charts/chart1.xml"`).
+  const re = /<Relationship\b([\s\S]*?)\/>/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(xml))) {
+    const attrs = m[1];
+    const id = /\bId="([^"]+)"/.exec(attrs)?.[1];
+    const type = /\bType="([^"]+)"/.exec(attrs)?.[1];
+    const target = /\bTarget="([^"]+)"/.exec(attrs)?.[1];
+    if (id && type && target) map.set(id, { type, target });
+  }
+  return map;
+}
+
+function highestRid(rels: Map<string, unknown>): number {
+  let max = 0;
+  for (const id of rels.keys()) {
+    const m = /^rId(\d+)$/.exec(id);
+    if (m) {
+      const n = Number(m[1]);
+      if (n > max) max = n;
+    }
+  }
+  return max;
+}
+
+function buildRelXml(id: string, type: string, target: string): string {
+  return `<Relationship Id="${id}" Type="${type}" Target="${target}"/>`;
+}
+
+function relsPathFor(xmlPath: string): string {
+  return xmlPath.replace(/([^/]+)\.xml$/, "_rels/$1.xml.rels");
+}
+
+/**
+ * Pick a target path that doesn't collide with anything pptxgenjs already
+ * wrote into the zip. We keep the original target's directory and
+ * extension so the file stays in `ppt/media/`, `ppt/charts/`, etc., but
+ * prefix the basename with `slidewise_preserved_N_` until the resolved
+ * full path is unique.
+ */
+function uniqueTarget(originalTarget: string, outZip: JSZip, baseDir: string): string {
+  const slash = originalTarget.lastIndexOf("/");
+  const dir = slash >= 0 ? originalTarget.slice(0, slash + 1) : "";
+  const file = slash >= 0 ? originalTarget.slice(slash + 1) : originalTarget;
+  let i = 0;
+  let candidate = `${dir}slidewise_preserved_${i}_${file}`;
+  while (outZip.file(normalisePath(candidate, baseDir))) {
+    i++;
+    candidate = `${dir}slidewise_preserved_${i}_${file}`;
+  }
+  return candidate;
+}
+
+function dirOf(path: string): string {
+  const i = path.lastIndexOf("/");
+  return i >= 0 ? path.slice(0, i) : "";
+}
+
+function normalisePath(target: string, base: string): string {
+  if (/^https?:\/\//i.test(target)) return target;
+  if (target.startsWith("/")) return target.slice(1);
+  let t = target;
+  const segments = base.split("/").filter(Boolean);
+  while (t.startsWith("../")) {
+    segments.pop();
+    t = t.slice(3);
+  }
+  return [...segments, t].filter(Boolean).join("/");
+}
+
+const PPTX_MIME =
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+
 // -- helpers ----------------------------------------------------------------
 
 function hexNoHash(color: string): string {