Consistent decks: matching heading sizes

src/compile.js

// compile.js ties the stages together: text in, finished slides out.
//
//   SlideML text → parse → expand components → apply theme → layout → render plan → .pptx

import { elementChildren, parseXml } from "./xml.js";
import { layoutSlide } from "./layout.js";
import { planToPptx } from "./pptx.js";
import { expandAll } from "./components.js";
import { LIBRARY } from "./library.js";
import { applyTheme, THEMES } from "./theme.js";
import { lockRoleSizes, smallestSizeByRole } from "./harmonize.js";

/** SlideML text → a render plan for one slide. */
export function compileSlide(xml) {
  const tree = parseXml(xml);
  if (tree.tag !== "slide") throw new Error(`Expected a <slide>, found <${tree.tag}>`);
  return layoutSlide(tree);
}

/** SlideML text → the plan (to preview) and the .pptx file (base64, to download). */
export async function slideToPptx(xml) {
  const plan = { slides: [compileSlide(xml)] };
  const file = await planToPptx(plan);
  return { plan, file };
}

/**
 * A whole <deck>. One broken slide must not sink the others, so every slide is
 * compiled on its own and its problems are collected instead of thrown.
 *
 * Then a second pass makes the deck consistent: titles and headings are locked
 * to the smallest size any of them needed, so they match from slide to slide.
 *
 * Returns { slides, problems }, where each problem is { slide: number, message }.
 * Slide numbers start at 1; slide 0 means the deck itself.
 */
export function compileDeck(xml, themeName) {
  let deck;
  try {
    deck = parseXml(xml);
  } catch (error) {
    return { slides: [], problems: [{ slide: 0, message: `The XML couldn't be read: ${error.message}` }] };
  }
  if (deck.tag !== "deck") {
    return { slides: [], problems: [{ slide: 0, message: `The root element must be <deck>, not <${deck.tag}>` }] };
  }

  const theme = THEMES[themeName ?? deck.attrs.theme] ?? THEMES.light;
  const trees = [];
  const problems = [];

  // Pass 1: build and lay out every slide on its own.
  const firstPass = elementChildren(deck).map((node, index) => {
    const number = index + 1;
    try {
      const tree = applyTheme(expandAll(node, LIBRARY), theme);
      if (tree.tag !== "slide") throw new Error(`<${node.tag}> isn't a slide or a slide component`);
      trees[index] = tree;
      return layoutSlide(tree);
    } catch (error) {
      problems.push({ slide: number, message: error.message });
      return placeholderSlide(number, error.message, theme);
    }
  });

  // Pass 2: lay the good slides out again with matching title and heading sizes.
  const sizes = smallestSizeByRole(firstPass);
  const slides = firstPass.map((slide, index) => {
    if (!trees[index]) return slide;
    const final = layoutSlide(lockRoleSizes(trees[index], sizes));
    for (const message of final.problems) problems.push({ slide: index + 1, message });
    return final;
  });

  return { slides, problems: problems.sort((a, b) => a.slide - b.slide) };
}

/** A visible stand-in for a slide that couldn't be built, so the deck still opens. */
function placeholderSlide(number, message, theme) {
  return {
    background: theme.colors.background,
    problems: [message],
    elements: [
      { type: "text", x: 48, y: 150, w: 624, h: 40, text: `Slide ${number} couldn't be built`, lines: [`Slide ${number} couldn't be built`], fontSize: 28, bold: true, color: theme.colors.text, font: theme.fonts.body },
      { type: "text", x: 48, y: 200, w: 624, h: 60, text: message, lines: [message], fontSize: 14, color: theme.colors.muted, font: theme.fonts.body },
    ],
  };
}

/** A whole deck to a file, plus the plan and any problems. */
export async function deckToPptx(xml, themeName) {
  const { slides, problems } = compileDeck(xml, themeName);
  const plan = { slides };
  return { plan, problems, file: await planToPptx(plan) };
}