@bendyline/squisq-formats 1.1.0 → 1.2.0

package/src/docx/export.ts

@@ -17,7 +17,8 @@
  * ```
  */
 
-import type { Doc } from '@bendyline/squisq/schemas';
+import type { Doc, Theme } from '@bendyline/squisq/schemas';
+import { resolveTheme } from '@bendyline/squisq/schemas';
 import { docToMarkdown } from '@bendyline/squisq/doc';
 import type {
   MarkdownDocument,
@@ -52,6 +53,7 @@ import {
   REL_SETTINGS,
   REL_FONT_TABLE,
   REL_HYPERLINK,
+  REL_IMAGE,
   REL_FOOTNOTES,
   CONTENT_TYPE_DOCX_DOCUMENT,
   CONTENT_TYPE_DOCX_STYLES,
@@ -90,6 +92,18 @@ export interface DocxExportOptions {
   defaultFont?: string;
   /** Default body font size in points. Default: 11 */
   defaultFontSize?: number;
+  /**
+   * Squisq theme ID to apply (e.g., 'documentary', 'cinematic').
+   * When set, overrides fonts with the theme's typography and applies
+   * the theme's primary color to headings.
+   */
+  themeId?: string;
+  /**
+   * Pre-resolved image data keyed by image URL/path as it appears in the
+   * markdown source. When provided, images are embedded in the .docx file
+   * as binary parts instead of emitting placeholder text.
+   */
+  images?: Map<string, { data: ArrayBuffer | Uint8Array; contentType: string }>;
 }
 
 /**
@@ -167,13 +181,38 @@ class ExportContext {
   hasFootnotes = false;
 
   readonly font: string;
+  readonly headingFont: string;
   readonly fontSize: number;
+  /** Heading text color (hex without #), or undefined for default */
+  readonly headingColor: string | undefined;
+
+  /** Pre-resolved image data keyed by markdown image URL */
+  readonly resolvedImages: Map<string, { data: ArrayBuffer | Uint8Array; contentType: string }>;
+
+  private nextDocPrId = 1;
 
   constructor(options: DocxExportOptions) {
-    this.font = options.defaultFont ?? DEFAULT_FONT;
+    let themeFont: string | undefined;
+    let themeTitleFont: string | undefined;
+    let themeHeadingColor: string | undefined;
+
+    if (options.themeId) {
+      const theme: Theme = resolveTheme(options.themeId);
+      themeFont = theme.typography?.bodyFontFamily;
+      themeTitleFont = theme.typography?.titleFontFamily;
+      if (theme.colors?.primary) {
+        const c = theme.colors.primary;
+        themeHeadingColor = c.startsWith('#') ? c.slice(1) : c;
+      }
+    }
+
+    this.font = options.defaultFont ?? themeFont ?? DEFAULT_FONT;
+    this.headingFont = themeTitleFont ?? this.font;
     this.fontSize = options.defaultFontSize
       ? options.defaultFontSize * 2
       : DEFAULT_FONT_SIZE_HALF_POINTS;
+    this.headingColor = themeHeadingColor;
+    this.resolvedImages = options.images ?? new Map();
   }
 
   /** Allocate a new relationship ID */
@@ -193,6 +232,26 @@ class ExportContext {
     return id;
   }
 
+  /** Add an embedded image and return the rId and docPrId */
+  addImage(
+    data: ArrayBuffer | Uint8Array,
+    contentType: string,
+    filename: string,
+  ): { relId: string; docPrId: number } {
+    const relId = this.allocRelId();
+    const docPrId = this.nextDocPrId++;
+    const path = `word/media/${filename}`;
+
+    this.images.push({ relId, path, data, contentType });
+    this.relationships.push({
+      id: relId,
+      type: REL_IMAGE,
+      target: `media/${filename}`,
+    });
+
+    return { relId, docPrId };
+  }
+
   /** Allocate a numbering definition for a list */
   allocNumbering(ordered: boolean): number {
     const numId = this.nextNumId++;
@@ -509,7 +568,7 @@ function convertInline(node: MarkdownInlineNode, ctx: ExportContext, format: Inl
     case 'link':
       return convertLink(node, ctx, format);
     case 'image':
-      return convertImage(node);
+      return convertImage(node, ctx);
     case 'break':
       return `<w:r><w:br/></w:r>`;
     case 'htmlInline':
@@ -546,10 +605,6 @@ function makeRun(text: string, format: InlineFormat): string {
 
 function convertLink(node: MarkdownLink, ctx: ExportContext, format: InlineFormat): string {
   const rId = ctx.addHyperlink(node.url);
-  const _runs = convertInlines(node.children, ctx, { ...format });
-
-  // Wrap each run's rPr with hyperlink styling
-  // For simplicity, emit inline runs with hyperlink color + underline
   const styledRuns = convertInlinesWithHyperlinkStyle(node.children, ctx, format);
 
   return `<w:hyperlink r:id="${rId}">${styledRuns}</w:hyperlink>`;
@@ -589,13 +644,119 @@ function makeHyperlinkRun(text: string, format: InlineFormat): string {
   );
 }
 
-function convertImage(_node: MarkdownImage): string {
-  // Image embedding requires fetching the image data and packing it as
-  // a binary part. For now, emit a placeholder text run.
-  // Full image support can be added by fetching the URL and creating
-  // a DrawingML inline + binary media part.
-  const alt = _node.alt || _node.url;
-  return makeRun(`[Image: ${alt}]`, { italic: true });
+function convertImage(node: MarkdownImage, ctx: ExportContext): string {
+  const imageEntry = ctx.resolvedImages.get(node.url);
+  if (!imageEntry) {
+    // No resolved data — emit placeholder text
+    const alt = node.alt || node.url;
+    return makeRun(`[Image: ${alt}]`, { italic: true });
+  }
+
+  const { data, contentType } = imageEntry;
+  const ext = contentType.split('/')[1]?.replace('jpeg', 'jpg') || 'png';
+  const filename = `image${ctx.images.length + 1}.${ext}`;
+  const { relId, docPrId } = ctx.addImage(data, contentType, filename);
+
+  // Read dimensions from binary header; fall back to 5×3 inches
+  const dims = readImageDimensions(data);
+  const EMU_PER_INCH = 914400;
+  const MAX_WIDTH_EMU = 6 * EMU_PER_INCH; // 6 inch content width
+  let cx: number;
+  let cy: number;
+
+  if (dims) {
+    // Scale to fit within max width, assuming 96 DPI for pixel → inch
+    const widthEmu = (dims.width / 96) * EMU_PER_INCH;
+    const heightEmu = (dims.height / 96) * EMU_PER_INCH;
+    if (widthEmu > MAX_WIDTH_EMU) {
+      const scale = MAX_WIDTH_EMU / widthEmu;
+      cx = MAX_WIDTH_EMU;
+      cy = Math.round(heightEmu * scale);
+    } else {
+      cx = Math.round(widthEmu);
+      cy = Math.round(heightEmu);
+    }
+  } else {
+    cx = 5 * EMU_PER_INCH;
+    cy = 3 * EMU_PER_INCH;
+  }
+
+  const name = escapeXml(node.alt || filename);
+  const NS_A = 'http://schemas.openxmlformats.org/drawingml/2006/main';
+  const NS_PIC = 'http://schemas.openxmlformats.org/drawingml/2006/picture';
+
+  return (
+    `<w:r><w:drawing>` +
+    `<wp:inline distT="0" distB="0" distL="0" distR="0">` +
+    `<wp:extent cx="${cx}" cy="${cy}"/>` +
+    `<wp:docPr id="${docPrId}" name="${name}"/>` +
+    `<wp:cNvGraphicFramePr>` +
+    `<a:graphicFrameLocks xmlns:a="${NS_A}" noChangeAspect="1"/>` +
+    `</wp:cNvGraphicFramePr>` +
+    `<a:graphic xmlns:a="${NS_A}">` +
+    `<a:graphicData uri="${NS_PIC}">` +
+    `<pic:pic xmlns:pic="${NS_PIC}">` +
+    `<pic:nvPicPr>` +
+    `<pic:cNvPr id="0" name="${name}"/>` +
+    `<pic:cNvPicPr/>` +
+    `</pic:nvPicPr>` +
+    `<pic:blipFill>` +
+    `<a:blip r:embed="${relId}"/>` +
+    `<a:stretch><a:fillRect/></a:stretch>` +
+    `</pic:blipFill>` +
+    `<pic:spPr>` +
+    `<a:xfrm>` +
+    `<a:off x="0" y="0"/>` +
+    `<a:ext cx="${cx}" cy="${cy}"/>` +
+    `</a:xfrm>` +
+    `<a:prstGeom prst="rect"><a:avLst/></a:prstGeom>` +
+    `</pic:spPr>` +
+    `</pic:pic>` +
+    `</a:graphicData>` +
+    `</a:graphic>` +
+    `</wp:inline>` +
+    `</w:drawing></w:r>`
+  );
+}
+
+/** Read width/height from PNG or JPEG binary headers. */
+function readImageDimensions(
+  data: ArrayBuffer | Uint8Array,
+): { width: number; height: number } | null {
+  const bytes = data instanceof Uint8Array ? data : new Uint8Array(data);
+  if (bytes.length < 24) return null;
+
+  // PNG: signature 0x89504E47, IHDR chunk at byte 16
+  if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) {
+    const width = (bytes[16] << 24) | (bytes[17] << 16) | (bytes[18] << 8) | bytes[19];
+    const height = (bytes[20] << 24) | (bytes[21] << 16) | (bytes[22] << 8) | bytes[23];
+    return { width, height };
+  }
+
+  // JPEG: search for SOF0 (0xFFC0) or SOF2 (0xFFC2) marker
+  if (bytes[0] === 0xff && bytes[1] === 0xd8) {
+    let offset = 2;
+    while (offset < bytes.length - 9) {
+      if (bytes[offset] !== 0xff) break;
+      const marker = bytes[offset + 1];
+      if (marker === 0xc0 || marker === 0xc2) {
+        const height = (bytes[offset + 5] << 8) | bytes[offset + 6];
+        const width = (bytes[offset + 7] << 8) | bytes[offset + 8];
+        return { width, height };
+      }
+      const segLen = (bytes[offset + 2] << 8) | bytes[offset + 3];
+      offset += 2 + segLen;
+    }
+  }
+
+  // GIF: width at bytes 6-7, height at bytes 8-9 (little-endian)
+  if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46) {
+    const width = bytes[6] | (bytes[7] << 8);
+    const height = bytes[8] | (bytes[9] << 8);
+    return { width, height };
+  }
+
+  return null;
 }
 
 function convertFootnoteRef(node: MarkdownFootnoteReference, ctx: ExportContext): string {
@@ -632,7 +793,7 @@ async function buildDocxPackage(
   pkg.addPart('word/document.xml', documentXml, CONTENT_TYPE_DOCX_DOCUMENT);
 
   // --- word/styles.xml ---
-  const stylesXml = buildStylesXml(options);
+  const stylesXml = buildStylesXml(options, ctx);
   pkg.addPart('word/styles.xml', stylesXml, CONTENT_TYPE_DOCX_STYLES);
 
   // --- word/settings.xml ---
@@ -754,9 +915,9 @@ function buildDocumentXml(bodyXml: string): string {
   );
 }
 
-function buildStylesXml(options: DocxExportOptions): string {
-  const font = options.defaultFont ?? DEFAULT_FONT;
-  const headingFont = DEFAULT_HEADING_FONT;
+function buildStylesXml(options: DocxExportOptions, ctx: ExportContext): string {
+  const font = ctx.font;
+  const headingFont = ctx.headingFont;
 
   return (
     xmlDeclaration() +
@@ -776,7 +937,7 @@ function buildStylesXml(options: DocxExportOptions): string {
     `<w:qFormat/>` +
     `</w:style>` +
     // Heading styles
-    buildHeadingStyles(headingFont) +
+    buildHeadingStyles(headingFont, ctx.headingColor) +
     // Quote style
     `<w:style w:type="paragraph" w:styleId="Quote">` +
     `<w:name w:val="Quote"/>` +
@@ -827,11 +988,12 @@ function buildStylesXml(options: DocxExportOptions): string {
   );
 }
 
-function buildHeadingStyles(headingFont: string): string {
+function buildHeadingStyles(headingFont: string, headingColor?: string): string {
   let result = '';
   for (let depth = 1; depth <= 6; depth++) {
     const styleId = DEPTH_TO_STYLE_ID[depth];
     const fontSize = HEADING_FONT_SIZES[depth] ?? 22;
+    const colorXml = headingColor ? `<w:color w:val="${headingColor}"/>` : '';
     result +=
       `<w:style w:type="paragraph" w:styleId="${styleId}">` +
       `<w:name w:val="heading ${depth}"/>` +
@@ -842,6 +1004,7 @@ function buildHeadingStyles(headingFont: string): string {
       `<w:rPr>` +
       `<w:rFonts w:ascii="${escapeXml(headingFont)}" w:hAnsi="${escapeXml(headingFont)}"/>` +
       `<w:b/>` +
+      colorXml +
       `<w:sz w:val="${fontSize}"/>` +
       `<w:szCs w:val="${fontSize}"/>` +
       `</w:rPr>` +

package/src/docx/import.ts

@@ -46,9 +46,11 @@ import type {
   MarkdownFootnoteDefinition,
 } from '@bendyline/squisq/markdown';
 
-import { openPackage, getPartXml, getPartRelationships } from '../ooxml/reader.js';
+import { openPackage, getPartXml, getPartBinary, getPartRelationships } from '../ooxml/reader.js';
 import type { OoxmlPackage, Relationship } from '../ooxml/types.js';
 import { NS_WML, NS_R } from '../ooxml/namespaces.js';
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+import type { ContentContainer } from '@bendyline/squisq/storage';
 import {
   HEADING_STYLE_MAP,
   QUOTE_STYLE_IDS,
@@ -119,6 +121,56 @@ export async function docxToDoc(
   return markdownToDoc(markdownDoc);
 }
 
+/**
+ * Convert a .docx file to a ContentContainer with markdown + extracted images.
+ *
+ * The container will contain:
+ * - The primary markdown document (index.md)
+ * - Any embedded images under images/ (e.g., images/image1.png)
+ *
+ * @param data - The raw .docx file as ArrayBuffer or Blob
+ * @param options - Import options
+ * @returns A ContentContainer with the document and its media
+ */
+export async function docxToContainer(
+  data: ArrayBuffer | Blob,
+  options: DocxImportOptions = {},
+): Promise<ContentContainer> {
+  const pkg = await openPackage(data);
+  const ctx = await buildImportContext(pkg, { ...options, extractImages: true });
+
+  const documentXml = await getPartXml(pkg, 'word/document.xml');
+  if (!documentXml) {
+    const container = new MemoryContentContainer();
+    await container.writeDocument('');
+    return container;
+  }
+
+  const body = getFirstElement(documentXml, 'body');
+  if (!body) {
+    const container = new MemoryContentContainer();
+    await container.writeDocument('');
+    return container;
+  }
+
+  const blocks = await convertBody(body, ctx);
+  const markdownDoc: MarkdownDocument = { type: 'document', children: blocks };
+
+  // Serialize to markdown
+  const { stringifyMarkdown } = await import('@bendyline/squisq/markdown');
+  const markdown = stringifyMarkdown(markdownDoc);
+
+  // Build container with markdown + images
+  const container = new MemoryContentContainer();
+  await container.writeDocument(markdown);
+
+  for (const [path, { data: imageData, mimeType }] of ctx.extractedImages) {
+    await container.writeFile(path, new Uint8Array(imageData), mimeType);
+  }
+
+  return container;
+}
+
 // ============================================
 // Import Context
 // ============================================
@@ -142,6 +194,10 @@ interface ImportContext {
   pkg: OoxmlPackage;
   /** Import options */
   options: DocxImportOptions;
+  /** Collected image files: relative path → { data, mimeType } */
+  extractedImages: Map<string, { data: ArrayBuffer; mimeType: string }>;
+  /** Counter for generating unique image filenames */
+  imageCounter: number;
 }
 
 interface NumberingInfo {
@@ -162,6 +218,8 @@ async function buildImportContext(
     footnotes: new Map(),
     pkg,
     options,
+    extractedImages: new Map(),
+    imageCounter: 0,
   };
 
   // Initialize with built-in defaults
@@ -544,20 +602,79 @@ async function convertHyperlink(el: Element, ctx: ImportContext): Promise<Markdo
 // Image Extraction
 // ============================================
 
-async function extractImage(_el: Element, _ctx: ImportContext): Promise<MarkdownImage | null> {
-  // Image extraction is complex (DrawingML with blip references).
-  // For v1, emit a placeholder. Full implementation requires:
-  // 1. Find <a:blip r:embed="rId_"/> in the drawing tree
-  // 2. Resolve the rId to a media path
-  // 3. Extract the binary data and encode as data URI
-  // This is planned for a future enhancement.
+async function extractImage(el: Element, ctx: ImportContext): Promise<MarkdownImage | null> {
+  // Find <a:blip r:embed="rIdX"/> anywhere in the drawing tree
+  const blip = findDescendant(el, 'blip');
+  if (!blip) {
+    return { type: 'image', url: '', alt: 'Image' };
+  }
+
+  const rId = blip.getAttributeNS(NS_R, 'embed') ?? blip.getAttribute('r:embed');
+  if (!rId) {
+    return { type: 'image', url: '', alt: 'Image' };
+  }
+
+  const rel = ctx.documentRels.get(rId);
+  if (!rel) {
+    return { type: 'image', url: '', alt: 'Image' };
+  }
+
+  // Resolve the target path relative to word/
+  const target = rel.target.startsWith('/') ? rel.target.slice(1) : `word/${rel.target}`;
+
+  // Extract binary data from the zip
+  const data = await getPartBinary(ctx.pkg, target);
+  if (!data) {
+    return { type: 'image', url: '', alt: 'Image' };
+  }
+
+  // Determine extension and MIME type
+  const dot = target.lastIndexOf('.');
+  const ext = dot !== -1 ? target.slice(dot).toLowerCase() : '.png';
+  const mimeType = IMAGE_MIME_MAP[ext] ?? 'application/octet-stream';
+
+  // Generate a unique image path
+  ctx.imageCounter++;
+  const imagePath = `images/image${ctx.imageCounter}${ext}`;
+
+  // Store the extracted image data
+  ctx.extractedImages.set(imagePath, { data, mimeType });
+
+  // Try to extract alt text from the drawing's docPr element
+  const docPr = findDescendant(el, 'docPr');
+  const alt = docPr?.getAttribute('descr') || docPr?.getAttribute('title') || 'Image';
+
   return {
     type: 'image',
-    url: '',
-    alt: 'Image',
+    url: imagePath,
+    alt,
   };
 }
 
+const IMAGE_MIME_MAP: Record<string, string> = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.bmp': 'image/bmp',
+  '.tiff': 'image/tiff',
+  '.tif': 'image/tiff',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.emf': 'image/emf',
+  '.wmf': 'image/wmf',
+};
+
+/** Recursively find the first descendant element with the given local name. */
+function findDescendant(el: Element, localName: string): Element | null {
+  for (const child of Array.from(el.children)) {
+    if (child.localName === localName) return child;
+    const found = findDescendant(child, localName);
+    if (found) return found;
+  }
+  return null;
+}
+
 // ============================================
 // List Collection
 // ============================================

package/src/docx/index.ts

@@ -22,5 +22,5 @@ export { markdownDocToDocx, docToDocx } from './export.js';
 export type { DocxExportOptions } from './export.js';
 
 // Import
-export { docxToMarkdownDoc, docxToDoc } from './import.js';
+export { docxToMarkdownDoc, docxToDoc, docxToContainer } from './import.js';
 export type { DocxImportOptions } from './import.js';

package/src/html/htmlTemplate.ts

@@ -41,6 +41,13 @@ export interface HtmlExportOptions {
 
   /** Auto-play slideshow on load (default: false) */
   autoPlay?: boolean;
+
+  /**
+   * Squisq theme ID to apply (e.g., 'documentary', 'cinematic').
+   * When set, the theme is assigned to the Doc before rendering,
+   * so the SquisqPlayer renders with that theme's colors and typography.
+   */
+  themeId?: string;
 }
 
 // ── Image Path Collection ──────────────────────────────────────────
@@ -182,8 +189,14 @@ export function generateInlineHtml(doc: Doc, options: HtmlExportOptions): string
     mode = 'slideshow',
     title = 'Squisq Document',
     autoPlay = false,
+    themeId,
   } = options;
 
+  // Apply theme to doc if specified (the SquisqPlayer respects doc.themeId at render time)
+  if (themeId) {
+    doc = { ...doc, themeId };
+  }
+
   // Build base64 image map
   const imageMap: Record<string, string> = {};
   if (images) {

package/src/index.ts

@@ -7,7 +7,7 @@
  * Supported formats:
  * - **DOCX** — Microsoft Word (import + export) ✅
  * - **PDF**  — Portable Document Format (import + export) ✅
- * - **PPTX** — Microsoft PowerPoint (planned)
+ * - **PPTX** — Microsoft PowerPoint (export ✅, import planned)
  * - **XLSX** — Microsoft Excel (planned)
  *
  * All converters run in the browser — no server or native binaries required.
@@ -28,7 +28,7 @@
 export { markdownDocToDocx, docToDocx, docxToMarkdownDoc, docxToDoc } from './docx/index.js';
 export type { DocxExportOptions, DocxImportOptions } from './docx/index.js';
 
-// PPTX (stub)
+// PPTX (export implemented, import stub)
 export { markdownDocToPptx, docToPptx, pptxToMarkdownDoc, pptxToDoc } from './pptx/index.js';
 export type { PptxExportOptions, PptxImportOptions } from './pptx/index.js';
 

package/src/ooxml/index.ts

@@ -83,5 +83,12 @@ export {
   CONTENT_TYPE_DOCX_FONT_TABLE,
   CONTENT_TYPE_DOCX_FOOTNOTES,
   CONTENT_TYPE_PPTX_PRESENTATION,
+  CONTENT_TYPE_PPTX_SLIDE,
+  CONTENT_TYPE_PPTX_SLIDE_LAYOUT,
+  CONTENT_TYPE_PPTX_SLIDE_MASTER,
+  CONTENT_TYPE_PPTX_THEME,
+  REL_SLIDE,
+  REL_SLIDE_LAYOUT,
+  REL_SLIDE_MASTER,
   CONTENT_TYPE_XLSX_WORKBOOK,
 } from './namespaces.js';

package/src/ooxml/namespaces.ts

@@ -156,5 +156,28 @@ export const CONTENT_TYPE_DOCX_FOOTNOTES =
 export const CONTENT_TYPE_PPTX_PRESENTATION =
   'application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml';
 
+export const CONTENT_TYPE_PPTX_SLIDE =
+  'application/vnd.openxmlformats-officedocument.presentationml.slide+xml';
+
+export const CONTENT_TYPE_PPTX_SLIDE_LAYOUT =
+  'application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml';
+
+export const CONTENT_TYPE_PPTX_SLIDE_MASTER =
+  'application/vnd.openxmlformats-officedocument.presentationml.slideMaster+xml';
+
+export const CONTENT_TYPE_PPTX_THEME = 'application/vnd.openxmlformats-officedocument.theme+xml';
+
+/** Relationship type: Slide */
+export const REL_SLIDE =
+  'http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide';
+
+/** Relationship type: Slide layout */
+export const REL_SLIDE_LAYOUT =
+  'http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout';
+
+/** Relationship type: Slide master */
+export const REL_SLIDE_MASTER =
+  'http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideMaster';
+
 export const CONTENT_TYPE_XLSX_WORKBOOK =
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml';