@textcortex/slidewise 1.0.0

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

@@ -0,0 +1,240 @@
+import { describe, it, expect } from "vitest";
+import { parsePptx, serializeDeck } from "../index";
+import { CURRENT_DECK_VERSION } from "@/lib/schema/migrate";
+import type { Deck } from "@/lib/types";
+
+const baseElement = {
+  rotation: 0,
+  z: 1,
+};
+
+function makeDeck(slideElements: Deck["slides"][number]["elements"]): Deck {
+  return {
+    version: CURRENT_DECK_VERSION,
+    title: "Round-trip fixture",
+    slides: [
+      {
+        id: "slide-1",
+        background: "#FFFFFF",
+        elements: slideElements,
+      },
+    ],
+  };
+}
+
+async function roundtrip(deck: Deck): Promise<Deck> {
+  const blob = await serializeDeck(deck);
+  const buffer = await blob.arrayBuffer();
+  return parsePptx(buffer);
+}
+
+describe("pptx round-trip", () => {
+  it("preserves a deck with a single text element", async () => {
+    const deck = makeDeck([
+      {
+        ...baseElement,
+        id: "t1",
+        type: "text",
+        x: 200,
+        y: 240,
+        w: 1200,
+        h: 200,
+        text: "Hello, Slidewise",
+        fontFamily: "Inter",
+        fontSize: 64,
+        fontWeight: 700,
+        italic: false,
+        underline: false,
+        strike: false,
+        color: "#0E1330",
+        align: "left",
+        vAlign: "top",
+        lineHeight: 1.2,
+        letterSpacing: 0,
+      },
+    ]);
+
+    const out = await roundtrip(deck);
+    expect(out.slides.length).toBe(1);
+    expect(out.slides[0].elements.length).toBeGreaterThanOrEqual(1);
+    const text = out.slides[0].elements.find((e) => e.type === "text");
+    expect(text).toBeTruthy();
+    if (text && text.type === "text") {
+      expect(text.text).toBe("Hello, Slidewise");
+      expect(text.fontWeight).toBeGreaterThanOrEqual(600);
+      expect(text.color.toUpperCase()).toBe("#0E1330");
+      // Position survives within rounding tolerance (1 px).
+      expect(Math.abs(text.x - 200)).toBeLessThanOrEqual(2);
+      expect(Math.abs(text.y - 240)).toBeLessThanOrEqual(2);
+    }
+  });
+
+  it("preserves shape kind, position, and fill", async () => {
+    const deck = makeDeck([
+      {
+        ...baseElement,
+        id: "s1",
+        type: "shape",
+        x: 100,
+        y: 100,
+        w: 400,
+        h: 300,
+        shape: "rounded",
+        fill: "#4F5BD5",
+        radius: 24,
+      },
+      {
+        ...baseElement,
+        id: "s2",
+        type: "shape",
+        x: 600,
+        y: 100,
+        w: 300,
+        h: 300,
+        shape: "circle",
+        fill: "#F2B544",
+      },
+    ]);
+
+    const out = await roundtrip(deck);
+    const shapes = out.slides[0].elements.filter((e) => e.type === "shape");
+    expect(shapes.length).toBe(2);
+    const rounded = shapes.find((e) => e.type === "shape" && e.shape === "rounded");
+    const circle = shapes.find((e) => e.type === "shape" && e.shape === "circle");
+    expect(rounded).toBeTruthy();
+    expect(circle).toBeTruthy();
+    if (rounded && rounded.type === "shape") {
+      expect(rounded.fill.toUpperCase()).toBe("#4F5BD5");
+      expect(Math.abs(rounded.w - 400)).toBeLessThanOrEqual(2);
+      expect(Math.abs(rounded.h - 300)).toBeLessThanOrEqual(2);
+    }
+  });
+
+  it("preserves slide background colour", async () => {
+    const deck: Deck = {
+      version: CURRENT_DECK_VERSION,
+      title: "Bg",
+      slides: [
+        { id: "s", background: "#FAEEDC", elements: [] },
+        { id: "s2", background: "#0E1330", elements: [] },
+      ],
+    };
+    const out = await roundtrip(deck);
+    expect(out.slides.length).toBe(2);
+    expect(out.slides[0].background.toUpperCase()).toBe("#FAEEDC");
+    expect(out.slides[1].background.toUpperCase()).toBe("#0E1330");
+  });
+
+  it("preserves multiple slides with mixed elements", async () => {
+    const deck: Deck = {
+      version: CURRENT_DECK_VERSION,
+      title: "Multi",
+      slides: [
+        {
+          id: "s1",
+          background: "#FFFFFF",
+          elements: [
+            {
+              ...baseElement,
+              id: "t",
+              type: "text",
+              x: 80,
+              y: 80,
+              w: 1200,
+              h: 100,
+              text: "Slide one",
+              fontFamily: "Inter",
+              fontSize: 48,
+              fontWeight: 700,
+              italic: false,
+              underline: false,
+              strike: false,
+              color: "#0E1330",
+              align: "left",
+              vAlign: "top",
+              lineHeight: 1.2,
+              letterSpacing: 0,
+            },
+          ],
+        },
+        {
+          id: "s2",
+          background: "#0E1330",
+          elements: [
+            {
+              ...baseElement,
+              id: "sh",
+              type: "shape",
+              x: 200,
+              y: 200,
+              w: 400,
+              h: 400,
+              shape: "rect",
+              fill: "#FFFFFF",
+            },
+          ],
+        },
+      ],
+    };
+    const out = await roundtrip(deck);
+    expect(out.slides.length).toBe(2);
+    expect(
+      out.slides[0].elements.find((e) => e.type === "text")
+    ).toBeTruthy();
+    expect(
+      out.slides[1].elements.find((e) => e.type === "shape")
+    ).toBeTruthy();
+  });
+
+  it("preserves the deck title", async () => {
+    const deck = makeDeck([]);
+    deck.title = "My Wonderful Deck";
+    const out = await roundtrip(deck);
+    expect(out.title).toBe("My Wonderful Deck");
+  });
+
+  it("round-trips multi-color text via runs[]", async () => {
+    const deck = makeDeck([
+      {
+        ...baseElement,
+        id: "t1",
+        type: "text",
+        x: 100,
+        y: 100,
+        w: 1500,
+        h: 220,
+        text: "ELDORAUI",
+        fontFamily: "Inter",
+        fontSize: 120,
+        fontWeight: 700,
+        italic: false,
+        underline: false,
+        strike: false,
+        color: "#FFFFFF",
+        align: "left",
+        vAlign: "top",
+        lineHeight: 1,
+        letterSpacing: 0,
+        runs: [
+          { text: "ELDORA", color: "#FFFFFF" },
+          { text: "UI", color: "#0F1B3D" },
+        ],
+      },
+    ]);
+
+    const out = await roundtrip(deck);
+    const text = out.slides[0].elements.find((e) => e.type === "text");
+    expect(text?.type).toBe("text");
+    if (text?.type !== "text") return;
+    // Concatenated text survives
+    expect(text.text.replace(/\s+/g, "")).toBe("ELDORAUI");
+    // The two distinct colors come back as separate runs
+    expect(text.runs).toBeTruthy();
+    expect(text.runs!.length).toBeGreaterThanOrEqual(2);
+    const colors = (text.runs ?? [])
+      .map((r) => (r.color ?? "").toUpperCase())
+      .filter(Boolean);
+    expect(colors).toContain("#FFFFFF");
+    expect(colors).toContain("#0F1B3D");
+  });
+});

package/src/lib/pptx/deckToPptx.ts

@@ -0,0 +1,300 @@
+import pptxgen from "pptxgenjs";
+import type {
+  Deck,
+  Slide,
+  SlideElement,
+  TextElement,
+  ShapeElement,
+  ShapeKind,
+  ImageElement,
+  LineElement,
+  TableElement,
+  IconElement,
+  EmbedElement,
+} from "@/lib/types";
+import { pxToInches, pxToPoints } from "./units";
+
+/**
+ * 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.
+ */
+export async function serializeDeck(deck: Deck): Promise<Blob> {
+  const pptx = new pptxgen();
+  pptx.title = deck.title || "Untitled";
+  pptx.layout = "LAYOUT_WIDE"; // 13.333 × 7.5 in
+
+  for (const slide of deck.slides) {
+    addSlide(pptx, slide);
+  }
+
+  // pptxgenjs returns the requested type; outputType: "blob" → Blob.
+  const result = (await pptx.write({ outputType: "blob" })) as Blob;
+  return result;
+}
+
+function addSlide(pptx: pptxgen, slide: Slide): void {
+  const s = pptx.addSlide();
+  s.background = { color: hexNoHash(slide.background) };
+
+  const sorted = [...slide.elements].sort((a, b) => a.z - b.z);
+  for (const el of sorted) {
+    try {
+      addElement(s, el);
+    } catch (err) {
+      console.warn(
+        `[slidewise/pptx] failed to write element ${el.id} (${el.type}):`,
+        err
+      );
+    }
+  }
+}
+
+function addElement(s: pptxgen.Slide, el: SlideElement): void {
+  switch (el.type) {
+    case "text":
+      addText(s, el);
+      return;
+    case "shape":
+      addShape(s, el);
+      return;
+    case "image":
+      addImage(s, el);
+      return;
+    case "line":
+      addLine(s, el);
+      return;
+    case "table":
+      addTable(s, el);
+      return;
+    case "icon":
+      addIcon(s, el);
+      return;
+    case "embed":
+      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.
+      return;
+  }
+}
+
+function geometry(el: SlideElement): {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  rotate?: number;
+} {
+  return {
+    x: pxToInches(el.x),
+    y: pxToInches(el.y),
+    w: pxToInches(el.w),
+    h: pxToInches(el.h),
+    rotate: el.rotation || undefined,
+  };
+}
+
+function addText(s: pptxgen.Slide, el: TextElement): void {
+  const baseOpts = {
+    ...geometry(el),
+    fontFace: el.fontFamily,
+    fontSize: pxToPoints(el.fontSize),
+    color: hexNoHash(el.color),
+    bold: el.fontWeight >= 600,
+    italic: el.italic,
+    underline: el.underline ? ({ style: "sng" } as const) : undefined,
+    strike: el.strike ? ("sngStrike" as const) : undefined,
+    align: el.align,
+    valign: el.vAlign,
+    charSpacing: el.letterSpacing
+      ? Math.round(el.letterSpacing * 100)
+      : undefined,
+    paraSpaceBefore: 0,
+    paraSpaceAfter: 0,
+  };
+
+  if (!el.runs || !el.runs.length) {
+    s.addText(el.text, baseOpts);
+    return;
+  }
+
+  // Multi-run: pptxgenjs accepts an array of {text, options} objects and emits
+  // them as separate <a:r> within the same <a:p>. A run whose text contains
+  // "\n" is split so each piece becomes its own paragraph (we use a per-run
+  // `breakLine` flag on the trailing pieces).
+  const items: pptxgen.TextProps[] = [];
+  for (const r of el.runs) {
+    const pieces = r.text.split("\n");
+    for (let i = 0; i < pieces.length; i++) {
+      const isLast = i === pieces.length - 1;
+      items.push({
+        text: pieces[i],
+        options: {
+          fontFace: r.fontFamily ?? el.fontFamily,
+          fontSize: pxToPoints(r.fontSize ?? el.fontSize),
+          color: hexNoHash(r.color ?? el.color),
+          bold: (r.fontWeight ?? el.fontWeight) >= 600,
+          italic: r.italic ?? el.italic,
+          underline: (r.underline ?? el.underline)
+            ? ({ style: "sng" } as const)
+            : undefined,
+          strike: (r.strike ?? el.strike) ? ("sngStrike" as const) : undefined,
+          charSpacing: r.letterSpacing ?? el.letterSpacing
+            ? Math.round((r.letterSpacing ?? el.letterSpacing) * 100)
+            : undefined,
+          breakLine: !isLast,
+        },
+      });
+    }
+  }
+  s.addText(items, baseOpts);
+}
+
+const SHAPE_MAP: Record<ShapeKind, string> = {
+  rect: "rect",
+  rounded: "roundRect",
+  circle: "ellipse",
+  triangle: "triangle",
+  diamond: "diamond",
+  star: "star5",
+};
+
+function addShape(s: pptxgen.Slide, el: ShapeElement): void {
+  const shapeName = SHAPE_MAP[el.shape] ?? "rect";
+  // pptxgenjs accepts shape names as strings; the typed ShapeType enum is
+  // also exposed. Pass via `as unknown as` to bypass strict enum typing.
+  s.addShape(shapeName as unknown as Parameters<typeof s.addShape>[0], {
+    ...geometry(el),
+    fill: { color: hexNoHash(el.fill) },
+    line: el.stroke
+      ? {
+          color: hexNoHash(el.stroke),
+          width: el.strokeWidth ?? 1,
+        }
+      : { type: "none" },
+    rectRadius:
+      el.shape === "rounded" && el.radius != null
+        ? clamp01(el.radius / Math.min(el.w, el.h))
+        : undefined,
+  });
+}
+
+function addImage(s: pptxgen.Slide, el: ImageElement): void {
+  const opts: Parameters<typeof s.addImage>[0] = {
+    ...geometry(el),
+    sizing:
+      el.fit === "cover"
+        ? { type: "cover", w: pxToInches(el.w), h: pxToInches(el.h) }
+        : el.fit === "contain"
+          ? { type: "contain", w: pxToInches(el.w), h: pxToInches(el.h) }
+          : undefined,
+  };
+  if (isDataUrl(el.src)) {
+    opts.data = el.src;
+  } else {
+    opts.path = el.src;
+  }
+  s.addImage(opts);
+}
+
+function addLine(s: pptxgen.Slide, el: LineElement): void {
+  s.addShape(
+    "line" as unknown as Parameters<typeof s.addShape>[0],
+    {
+      ...geometry(el),
+      line: {
+        color: hexNoHash(el.stroke),
+        width: el.strokeWidth,
+        dashType: el.dashed ? "dash" : "solid",
+        endArrowType: el.arrow ? "triangle" : "none",
+      },
+    }
+  );
+}
+
+function addTable(s: pptxgen.Slide, el: TableElement): void {
+  if (!el.rows.length) return;
+  const rows = el.rows.map((row, ri) =>
+    row.map((cell) => ({
+      text: cell,
+      options: {
+        bold: ri === 0,
+        fill: { color: hexNoHash(ri === 0 ? el.headerFill : el.rowFill) },
+        color: hexNoHash(el.textColor),
+        fontSize: pxToPoints(el.fontSize),
+        valign: "middle" as const,
+      },
+    }))
+  );
+  s.addTable(rows, {
+    ...geometry(el),
+    border: { type: "none", pt: 0, color: "FFFFFF" },
+    fontFace: "Inter",
+  });
+}
+
+function addIcon(s: pptxgen.Slide, el: IconElement): void {
+  // Render the icon as a centered text box with the unicode glyph.
+  const fontSize = Math.min(el.w, el.h) * 0.7;
+  s.addText(el.icon, {
+    ...geometry(el),
+    fontFace: "Segoe UI Symbol",
+    fontSize: pxToPoints(fontSize),
+    color: hexNoHash(el.color),
+    align: "center",
+    valign: "middle",
+  });
+}
+
+function addEmbed(s: pptxgen.Slide, el: EmbedElement): void {
+  // Render embed as a labelled placeholder. PPTX has no first-class equivalent
+  // for "an arbitrary URL embed"; we capture intent as text + URL.
+  s.addText(
+    [
+      { text: "Embed\n", options: { fontSize: 10, color: "9CA3AF" } },
+      { text: `${el.label}\n`, options: { bold: true, fontSize: 18 } },
+      { text: el.url, options: { fontSize: 10, color: "9CA3AF" } },
+    ],
+    {
+      ...geometry(el),
+      fill: { color: "0E1330" },
+      color: "FFFFFF",
+      align: "center",
+      valign: "middle",
+    }
+  );
+}
+
+// -- helpers ----------------------------------------------------------------
+
+function hexNoHash(color: string): string {
+  if (!color) return "000000";
+  const c = color.trim();
+  if (c.startsWith("#")) return c.slice(1).toUpperCase();
+  // rgba()/rgb() → strip; pptxgenjs only accepts hex.
+  const rgb = c.match(/^rgba?\(([^)]+)\)$/i);
+  if (rgb) {
+    const parts = rgb[1].split(",").map((p) => parseInt(p.trim(), 10));
+    if (parts.length >= 3) {
+      return parts
+        .slice(0, 3)
+        .map((n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, "0"))
+        .join("")
+        .toUpperCase();
+    }
+  }
+  return c.toUpperCase();
+}
+
+function isDataUrl(src: string): boolean {
+  return /^data:image\//i.test(src);
+}
+
+function clamp01(n: number): number {
+  return Math.max(0, Math.min(1, n));
+}

package/src/lib/pptx/index.ts

@@ -0,0 +1,3 @@
+export { parsePptx } from "./pptxToDeck";
+export { serializeDeck } from "./deckToPptx";
+export type { ParseDiagnostics, ParseResult } from "./types";