slidemind 0.0.27

package/src/builders/build.mjs

@@ -0,0 +1,724 @@
+#!/usr/bin/env node
+// Build a self-contained HTML presentation from per-slide .jsx files.
+// Pure Node stdlib — no external dependencies.
+//
+// Usage:
+//   slidemind build <deck>
+//   slidemind build <deck> --open
+//
+// Convention:
+//   <deck>/
+//     slides/
+//       01-cover.jsx
+//       02-agenda.jsx
+//       ...
+//
+// Each slide is a thin JSX component that composes a layout from
+// skills/create-slides/layouts/. Slide files do NOT import layouts; the
+// build inlines all layouts once and exposes them as globals (SlideCover,
+// SlideAgendaBlack, ...) inside the slide scope.
+//
+// The build:
+//   1. Inlines every layout .jsx as a <script type="text/jsx-template"> block.
+//   2. Inlines every slide .jsx the same way, in filename order.
+//   3. Copies corporate-design.css, layouts.css, and the assets/ folder into
+//      the deck directory so the output is fully self-contained.
+//   4. Emits presentation.html with React + Babel-standalone from CDN and a
+//      bootstrap that transpiles on load and renders a keyboard-navigable
+//      deck.
+
+import { spawn } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+import { lintSlidesOrThrow } from "./lint-slides.mjs";
+import { resolveSkillForDeck } from "./resolve-skill.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PACKAGE_ROOT = path.resolve(__dirname, "..", "..");
+const RUNTIME_APPLIER = path.join(__dirname, "runtime-applier.js");
+
+function safeInline(src) {
+  // Guard against stray </script> sequences breaking the inline block.
+  return src.replace(/<\/script>/g, "<\\/script>");
+}
+
+function safeInlineJson(data) {
+  return JSON.stringify(data).replace(/<\/script>/g, "<\\/script>");
+}
+
+function stripImports(src) {
+  // Remove `import ... from "..."` lines. Layouts live in global scope in
+  // the generated HTML, so slide files never need to import them explicitly.
+  return src.replace(
+    /^\s*import\s+[^;]+?from\s+["'][^"']+["']\s*;?\s*$/gm,
+    "",
+  );
+}
+
+function rewriteAssetsPath(src) {
+  // The layout defaults point at "../assets" (correct for in-repo authoring
+  // under skills/create-slides/layouts/). In a built deck the copied
+  // assets sit next to the HTML, so the default should be "./assets".
+  return src.replace(
+    /assetsPath = "\.\.\/assets"/g,
+    'assetsPath = "./assets"',
+  );
+}
+
+function inlineLayout(file) {
+  const stem = path.basename(file, ".jsx");
+  const raw = rewriteAssetsPath(fs.readFileSync(file, "utf8"));
+  const binding = raw.match(/export\s+default\s+function\s+([A-Za-z_$][\w$]*)\s*\(/)?.[1] || layoutBindingNameForStem(stem);
+  const src = safeInline(raw);
+  return (
+    `<script type="text/jsx-template" data-kind="layout" ` +
+    `data-name="${stem}" data-binding="${binding}">\n${src}\n</script>`
+  );
+}
+
+function layoutBindingNameForStem(stem) {
+  return "Slide" + stem.split("-").map((p) => (
+    p ? p[0].toUpperCase() + p.slice(1) : ""
+  )).join("");
+}
+
+function inlineSlide(file, index) {
+  const stem = path.basename(file, ".jsx");
+  const src = safeInline(stripImports(fs.readFileSync(file, "utf8")));
+  return (
+    `<script type="text/jsx-template" data-kind="slide" ` +
+    `data-index="${index}" data-name="${stem}">\n${src}\n</script>`
+  );
+}
+
+function copyDesignSystem(deckDir, skill) {
+  // Copy CSS + assets into the deck directory so the HTML is portable.
+  // Layering: brand assets first (logos, shared decor from the design
+  // bundle), then the active skill's own assets on top — so a skill
+  // can override a brand file by shipping its own copy with the same name.
+  // For create-slides itself, skill.assetsDir === skill.brand.assetsDir, so
+  // this is a single copy pass.
+  const outAssets = path.join(deckDir, "assets");
+  fs.mkdirSync(outAssets, { recursive: true });
+  const assetSources =
+    skill.brand.assetsDir === skill.assetsDir
+      ? [skill.assetsDir]
+      : [skill.brand.assetsDir, skill.assetsDir];
+  for (const src of assetSources) {
+    if (!fs.existsSync(src)) continue;
+    for (const entry of fs.readdirSync(src)) {
+      const p = path.join(src, entry);
+      if (fs.statSync(p).isFile()) {
+        fs.copyFileSync(p, path.join(outAssets, entry));
+      }
+    }
+  }
+  fs.copyFileSync(skill.cssFile, path.join(deckDir, "corporate-design.css"));
+
+  // layouts.css references url("../assets/...") relative to the in-repo
+  // layouts dir. The build copies it flat into the deck next to assets/,
+  // so rewrite the URLs to "./assets/...".
+  //
+  // Layering: brand layouts.css first (lower in the cascade), then the
+  // active skill's layouts.css. Skill rules sharing a selector win.
+  const cssSources =
+    skill.brand.layoutsCssFile === path.join(skill.layoutsDir, "layouts.css")
+      ? [path.join(skill.layoutsDir, "layouts.css")]
+      : [skill.brand.layoutsCssFile, path.join(skill.layoutsDir, "layouts.css")];
+  const cssChunks = [];
+  for (const cssPath of cssSources) {
+    if (!fs.existsSync(cssPath)) continue;
+    let css = fs.readFileSync(cssPath, "utf8");
+    css = css.replace(/url\("\.\.\/assets\//g, 'url("./assets/');
+    css = css.replace(/url\('\.\.\/assets\//g, "url('./assets/");
+    css = css.replace(/url\(\.\.\/assets\//g, "url(./assets/");
+    cssChunks.push(css);
+  }
+  fs.writeFileSync(path.join(deckDir, "layouts.css"), cssChunks.join("\n\n"));
+}
+
+function loadOverrides(deckDir) {
+  const file = path.join(deckDir, "overrides.json");
+  if (!fs.existsSync(file)) return { version: 1, slides: {} };
+  let data;
+  try {
+    data = JSON.parse(fs.readFileSync(file, "utf8"));
+  } catch (err) {
+    throw new Error(`Invalid overrides.json: ${err.message}`);
+  }
+  if (!data || typeof data !== "object") return { version: 1, slides: {} };
+  if (data.version === undefined) data.version = 1;
+  if (data.slides === undefined) data.slides = {};
+  return data;
+}
+
+// Read the deck's SVG assets (after copyDesignSystem has populated assets/) so
+// the preview can inline them. An <img src="x.svg"> can't inherit `color`, so a
+// CSS-tinted icon looks wrong in the HTML preview yet right in the .pptx render
+// (which substitutes currentColor) — the source-mismatch that sends agents off
+// to inspect SVGs. Inlining the SVG at runtime makes the preview honour `color`
+// exactly as the render does. Keyed three ways so any of the src spellings an
+// author uses ("./assets/x.svg", "assets/x.svg", "x.svg") resolves.
+function collectSvgAssets(deckDir) {
+  const assetsDir = path.join(deckDir, "assets");
+  const map = {};
+  let entries;
+  try {
+    entries = fs.readdirSync(assetsDir);
+  } catch {
+    return map;
+  }
+  for (const name of entries) {
+    if (!name.toLowerCase().endsWith(".svg")) continue;
+    let markup;
+    try {
+      markup = fs.readFileSync(path.join(assetsDir, name), "utf8");
+    } catch {
+      continue;
+    }
+    map[`./assets/${name}`] = markup;
+    map[`assets/${name}`] = markup;
+    map[name] = markup;
+  }
+  return map;
+}
+
+const HTML_TEMPLATE = `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>__TITLE__</title>
+  <!-- Arimo: open-source Arial-metric-compatible font. We alias it to
+       "Arial" so master text pinned to Arial gets a font with the same
+       horizontal extents PowerPoint/LibreOffice use, instead of macOS
+       Chrome's slightly wider system Arial that pushes long strings
+       (addresses, single-line headers) past their bounding boxes. -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap" />
+  <link rel="stylesheet" href="./corporate-design.css" />
+  <link rel="stylesheet" href="./layouts.css" />
+  <style>
+    /* Substitute Arial with Arimo (a metric clone) so wrap behaviour
+       matches PowerPoint's rendering. Local Arial wins only if Arimo
+       hasn't loaded yet. */
+    @font-face {
+      font-family: "Arial";
+      src: local("Arimo"), local("Arial");
+      font-weight: 400;
+      font-style: normal;
+    }
+    @font-face {
+      font-family: "Arial";
+      src: local("Arimo Bold"), local("Arial Bold");
+      font-weight: 700;
+      font-style: normal;
+    }
+    @font-face {
+      font-family: "Arial";
+      src: local("Arimo Italic"), local("Arial Italic");
+      font-weight: 400;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: "Arial";
+      src: local("Arimo Bold Italic"), local("Arial Bold Italic");
+      font-weight: 700;
+      font-style: italic;
+    }
+  </style>
+  <style>
+    html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; overflow: hidden; }
+    .deck {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .deck__stage {
+      width: 1280px;
+      height: 720px;
+      transform-origin: center center;
+      background: var(--bg-1);
+      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
+    }
+    .deck__nav {
+      position: fixed;
+      bottom: 16px;
+      right: 16px;
+      padding: 6px 12px;
+      border-radius: 999px;
+      color: rgba(255,255,255,0.65);
+      background: rgba(255,255,255,0.08);
+      backdrop-filter: blur(6px);
+      font-family: var(--font-sans, sans-serif);
+      font-size: 12px;
+      letter-spacing: 0.02em;
+      user-select: none;
+    }
+    .deck__error {
+      padding: 32px;
+      color: #ff6b6b;
+      background: #1a0000;
+      font-family: var(--font-mono, monospace);
+      font-size: 14px;
+      white-space: pre-wrap;
+    }
+    /* Export mode (?export=1) — used by the PPTX exporter's headless Chrome
+       so it captures a clean 1280x720 stage with no letterbox/nav/scaling. */
+    body.deck--export { background: #ffffff !important; overflow: hidden; }
+    body.deck--export .deck { position: static; display: block; inset: auto; }
+    body.deck--export .deck__stage {
+      transform: none !important;
+      box-shadow: none !important;
+      margin: 0;
+      position: static;
+    }
+    body.deck--export .deck__nav { display: none !important; }
+    /* Print mode (?print=1) — stacks every slide as its own page so the
+       browser's Print / Cmd-P renders one slide per page (proofing). */
+    body.deck--print {
+      background: #ffffff !important;
+      overflow: visible !important;
+      height: auto !important;
+    }
+    body.deck--print .deck,
+    body.deck--print .deck__nav { display: none !important; }
+    .print-deck { background: #ffffff; }
+    .print-page {
+      width: 1280px;
+      height: 720px;
+      position: relative;
+      overflow: hidden;
+      background: var(--bg-1);
+      page-break-after: always;
+      break-after: page;
+    }
+    .print-page:last-child {
+      page-break-after: auto;
+      break-after: auto;
+    }
+    .print-page__error {
+      padding: 32px;
+      color: #ff6b6b;
+      background: #1a0000;
+      font-family: var(--font-mono, monospace);
+      font-size: 14px;
+      white-space: pre-wrap;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
+    @media print {
+      @page { size: 1280px 720px; margin: 0; }
+      html, body { background: #ffffff !important; }
+    }
+  </style>
+</head>
+<body>
+  <div class="deck">
+    <div class="deck__stage" id="stage"></div>
+  </div>
+  <div class="deck__nav" id="nav">loading…</div>
+
+  <!-- Layout sources (inlined from skills/create-slides/layouts/*.jsx).
+       Each one is evaluated once and exposed under its binding name
+       (SlideCover, SlideAgendaBlack, ...) so slides can reference it. -->
+__LAYOUTS__
+
+  <!-- Slide sources (inlined from this deck's slides/ folder, filename order). -->
+__SLIDES__
+
+  <!-- Runtime: React + Babel-standalone from CDN. -->
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script>window.__SLIDE_EDITOR_OVERRIDES__ = __OVERRIDES__;</script>
+  <script>window.SVG_ASSETS = __SVG_ASSETS__;</script>
+  <script>
+__RUNTIME_APPLIER__
+  </script>
+
+  <script>
+    (function () {
+      // Map kebab-case filename stem -> PascalCase layout binding name.
+      function layoutBindingName(stem) {
+        return "Slide" + stem.split("-").map(function (p) {
+          return p ? p[0].toUpperCase() + p.slice(1) : "";
+        }).join("");
+      }
+
+      function evalJsx(src, filename, extra) {
+        var result = Babel.transform(src, {
+          presets: [["react", { runtime: "classic" }]],
+          sourceType: "module",
+          filename: filename
+        });
+        var body = result.code.replace(
+          /export\\s+default\\s+/g,
+          "__module.default = "
+        );
+        var names = ["__module", "React"].concat(Object.keys(extra || {}));
+        var values = [{}, React].concat(Object.keys(extra || {}).map(function (k) {
+          return extra[k];
+        }));
+        var factory = new Function(
+          names.join(","),
+          body + "\\nreturn __module.default;"
+        );
+        return factory.apply(null, values);
+      }
+
+      // Preview parity: replace <img src="*.svg"> whose file we inlined into
+      // window.SVG_ASSETS with the SVG markup itself, carrying the <img>'s box
+      // and color onto a wrapper so fill="currentColor" resolves — the same
+      // tint the .pptx renderer applies. Re-runs on every React render via a
+      // MutationObserver so navigating slides keeps icons inlined.
+      function smInlineSvgAssets() {
+        var ASSETS = (typeof window !== "undefined" && window.SVG_ASSETS) || null;
+        if (!ASSETS || !Object.keys(ASSETS).length) return;
+
+        function lookup(src) {
+          if (!src) return null;
+          var s = src.split("?")[0].split("#")[0];
+          var alt = s.indexOf("./") === 0 ? s.slice(2) : s;
+          var base = s.split("/").pop();
+          return ASSETS[s] || ASSETS[alt] || ASSETS[base] || null;
+        }
+
+        function inlineWithin(root) {
+          if (!root || !root.querySelectorAll) return;
+          var imgs = root.querySelectorAll("img");
+          for (var i = 0; i < imgs.length; i++) {
+            var img = imgs[i];
+            if (img.getAttribute("data-sm-inlined") === "1") continue;
+            var markup = lookup(img.getAttribute("src"));
+            if (!markup) continue;
+            var span = document.createElement("span");
+            span.setAttribute("data-sm-inlined", "1");
+            if (img.className) span.className = img.className;
+            var styleAttr = img.getAttribute("style");
+            if (styleAttr) span.setAttribute("style", styleAttr);
+            // Pull the laid-out box + colour even when they came from CSS, not
+            // an inline style, so sizing holds and currentColor resolves.
+            var cs = window.getComputedStyle ? window.getComputedStyle(img) : null;
+            var hasW = !!span.style.width;
+            var hasH = !!span.style.height;
+            if (cs) {
+              if (!hasW && cs.width && cs.width !== "auto" && cs.width !== "0px") {
+                span.style.width = cs.width;
+                hasW = true;
+              }
+              if (!hasH && cs.height && cs.height !== "auto" && cs.height !== "0px") {
+                span.style.height = cs.height;
+                hasH = true;
+              }
+              if (!span.style.color && cs.color) span.style.color = cs.color;
+            }
+            if (!span.style.display || span.style.display === "inline") {
+              span.style.display = "inline-flex";
+            }
+            if (!span.style.alignItems) span.style.alignItems = "center";
+            if (!span.style.justifyContent) span.style.justifyContent = "center";
+            span.innerHTML = markup;
+            var svg = span.querySelector("svg");
+            if (svg) {
+              svg.style.display = "block";
+              if (hasW || hasH) {
+                svg.style.width = "100%";
+                svg.style.height = "100%";
+                svg.removeAttribute("width");
+                svg.removeAttribute("height");
+              }
+            }
+            if (img.parentNode) img.parentNode.replaceChild(span, img);
+          }
+        }
+
+        var scheduled = false;
+        var raf =
+          window.requestAnimationFrame ||
+          function (cb) { return setTimeout(cb, 16); };
+        function schedule() {
+          if (scheduled) return;
+          scheduled = true;
+          raf(function () {
+            scheduled = false;
+            inlineWithin(document.body);
+          });
+        }
+        if (typeof MutationObserver !== "undefined") {
+          new MutationObserver(schedule).observe(document.body, {
+            childList: true,
+            subtree: true,
+          });
+        }
+        schedule();
+      }
+
+      var LAYOUTS = {};
+      document.querySelectorAll('script[data-kind="layout"]').forEach(function (s) {
+        var name = s.dataset.binding || layoutBindingName(s.dataset.name);
+        try {
+          LAYOUTS[name] = evalJsx(s.textContent, s.dataset.name + ".jsx", {});
+          window[name] = LAYOUTS[name];
+        } catch (err) {
+          console.error("Layout " + name + " failed to load:", err);
+          throw err;
+        }
+      });
+
+      var slides = [];
+      document.querySelectorAll('script[data-kind="slide"]').forEach(function (s) {
+        var idx = parseInt(s.dataset.index, 10);
+        var name = s.dataset.name;
+        try {
+          var Component = evalJsx(
+            s.textContent,
+            name + ".jsx",
+            LAYOUTS
+          );
+          slides[idx] = { name: name, Component: Component };
+        } catch (err) {
+          console.error("Slide " + name + " failed to load:", err);
+          slides[idx] = { name: name, error: err };
+        }
+      });
+
+      var stage = document.getElementById("stage");
+      var nav = document.getElementById("nav");
+      var params = new URLSearchParams(location.search);
+      var exportMode = params.get("export") === "1";
+      var printMode = params.get("print") === "1";
+      if (exportMode) document.body.classList.add("deck--export");
+
+      smInlineSvgAssets();
+
+      if (printMode) {
+        document.body.classList.add("deck--print");
+        var printDeck = document.createElement("div");
+        printDeck.className = "print-deck";
+        document.body.appendChild(printDeck);
+        slides.forEach(function (slide) {
+          var page = document.createElement("div");
+          page.className = "print-page";
+          printDeck.appendChild(page);
+          if (slide.error) {
+            var errEl = document.createElement("div");
+            errEl.className = "print-page__error";
+            errEl.textContent = slide.name + ".jsx failed:\\n" + slide.error.message;
+            page.appendChild(errEl);
+            return;
+          }
+          ReactDOM.createRoot(page).render(
+            React.createElement(slide.Component, { assetsPath: "./assets" })
+          );
+        });
+        return;
+      }
+
+      var startIndex = parseInt(params.get("slide") || "0", 10);
+      if (isNaN(startIndex) || startIndex < 0) startIndex = 0;
+      if (startIndex >= slides.length) startIndex = slides.length - 1;
+      var current = startIndex;
+      var root = ReactDOM.createRoot(stage);
+
+      function render() {
+        var slide = slides[current];
+        if (!slide) return;
+        nav.textContent =
+          (current + 1) + " / " + slides.length + "  ·  " + slide.name;
+        if (slide.error) {
+          root.render(
+            React.createElement(
+              "div",
+              { className: "deck__error" },
+              slide.name + ".jsx failed:\\n" + slide.error.message
+            )
+          );
+          return;
+        }
+        root.render(
+          React.createElement(slide.Component, { assetsPath: "./assets" })
+        );
+      }
+
+      function fit() {
+        if (exportMode) {
+          stage.style.transform = "none";
+          return;
+        }
+        var sx = window.innerWidth / 1280;
+        var sy = window.innerHeight / 720;
+        var s = Math.min(sx, sy) * 0.95;
+        stage.style.transform = "scale(" + s + ")";
+      }
+
+      window.addEventListener("resize", fit);
+      fit();
+      render();
+
+      document.addEventListener("keydown", function (e) {
+        var k = e.key;
+        if (k === "ArrowRight" || k === "PageDown" || k === " ") {
+          current = Math.min(current + 1, slides.length - 1);
+          render();
+          e.preventDefault();
+        } else if (k === "ArrowLeft" || k === "PageUp") {
+          current = Math.max(current - 1, 0);
+          render();
+          e.preventDefault();
+        } else if (k === "Home") {
+          current = 0;
+          render();
+        } else if (k === "End") {
+          current = slides.length - 1;
+          render();
+        } else if (k === "f" || k === "F") {
+          if (document.fullscreenElement) document.exitFullscreen();
+          else document.documentElement.requestFullscreen();
+        }
+      });
+    })();
+  </script>
+</body>
+</html>
+`;
+
+export function buildDeck(deckDir, opts = {}) {
+  const skill = resolveSkillForDeck(deckDir);
+  const slidesDir = path.join(deckDir, "slides");
+  if (!fs.existsSync(slidesDir) || !fs.statSync(slidesDir).isDirectory()) {
+    throw new Error(`Expected a 'slides/' folder in ${deckDir}`);
+  }
+  if (skill.mode === "fill-template" && !opts.internalProposalFreeformRender) {
+    // Proposal decks are PPTX-native. The exporter may render freeform JSX
+    // inserts internally, but `slidemind build` should not create a lossy
+    // presentation.html artifact for proposal decks.
+    throw new Error(
+      `Deck ${path.basename(deckDir)} uses skill '${skill.skillName}' (mode ` +
+        `fill-template); it has no HTML preview. Run 'slidemind build-pptx ` +
+        `${path.basename(deckDir)}' to produce the editable .pptx.`,
+    );
+  }
+  const slideFiles = fs
+    .readdirSync(slidesDir)
+    .filter((f) => f.endsWith(".jsx"))
+    .sort()
+    .map((f) => path.join(slidesDir, f));
+  if (slideFiles.length === 0) {
+    throw new Error(`No .jsx files in ${slidesDir}`);
+  }
+
+  // Layout discovery: brand layouts first, then the active skill's layouts
+  // override on basename collision — so a sibling skill could reach for the
+  // brand's freeform workhorse (SlideContentLightBlank) without duplicating the
+  // JSX. With only the brand skill present, brand === skill and the dedup pass
+  // is a no-op.
+  const layoutDirs =
+    skill.brand.layoutsDir === skill.layoutsDir
+      ? [skill.layoutsDir]
+      : [skill.brand.layoutsDir, skill.layoutsDir];
+  const layoutByStem = new Map();
+  for (const dir of layoutDirs) {
+    if (!fs.existsSync(dir)) continue;
+    for (const f of fs.readdirSync(dir).filter((x) => x.endsWith(".jsx"))) {
+      layoutByStem.set(path.basename(f, ".jsx"), path.join(dir, f));
+    }
+  }
+  const layoutFiles = Array.from(layoutByStem.values()).sort();
+  if (layoutFiles.length === 0) {
+    throw new Error(`No layouts in ${skill.layoutsDir}`);
+  }
+
+  // Merge the brand primitive registry with the active skill's registry so a
+  // sibling skill's aliases and the brand's freeform layouts can coexist in one
+  // deck. (With only the brand skill present this is a single registry.)
+  lintSlidesOrThrow(slideFiles, {
+    primitivesPath: skill.primitivesPath,
+    brandPrimitivesPath: skill.brand.primitivesPath,
+    // Derive valid layout component names from the materialized layouts/*.jsx so
+    // the lint recognizes the bundle's layouts without a primitives.json
+    // `layouts` list (the materialized bundle doesn't ship one).
+    layoutsDirs: layoutDirs,
+  });
+
+  copyDesignSystem(deckDir, skill);
+
+  const layoutsBlock = layoutFiles.map(inlineLayout).join("\n");
+  const slidesBlock = slideFiles
+    .map((file, i) => inlineSlide(file, i))
+    .join("\n");
+
+  const svgAssets = collectSvgAssets(deckDir);
+
+  const html = HTML_TEMPLATE.replace("__TITLE__", path.basename(deckDir))
+    .replace("__LAYOUTS__", layoutsBlock)
+    .replace("__SLIDES__", slidesBlock)
+    .replace("__OVERRIDES__", safeInlineJson(loadOverrides(deckDir)))
+    .replace("__SVG_ASSETS__", safeInlineJson(svgAssets))
+    .replace("__RUNTIME_APPLIER__", safeInline(fs.readFileSync(RUNTIME_APPLIER, "utf8")));
+
+  const out = path.join(deckDir, "presentation.html");
+  fs.writeFileSync(out, html);
+  return { out, slideCount: slideFiles.length };
+}
+
+function openInBrowser(file) {
+  const opener =
+    process.platform === "darwin"
+      ? { cmd: "open", args: [file] }
+      : process.platform === "win32"
+        ? { cmd: "cmd", args: ["/c", "start", "", file] }
+        : { cmd: "xdg-open", args: [file] };
+  spawn(opener.cmd, opener.args, { stdio: "ignore", detached: true }).unref();
+}
+
+function parseArgs(argv) {
+  const args = { deck: null, open: false };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--deck" && i + 1 < argv.length) {
+      args.deck = argv[++i];
+    } else if (a === "--open") {
+      args.open = true;
+    } else if (a === "-h" || a === "--help") {
+      process.stdout.write(
+        "Usage: slidemind build <deck> [--open]\n" +
+          "       node src/builders/build.mjs --deck <deck> [--open]\n",
+      );
+      process.exit(0);
+    } else {
+      process.stderr.write(`build: unexpected argument '${a}'\n`);
+      process.exit(2);
+    }
+  }
+  if (!args.deck) {
+    process.stderr.write("build: --deck is required\n");
+    process.exit(2);
+  }
+  return args;
+}
+
+function main() {
+  const args = parseArgs(process.argv.slice(2));
+  const deckDir = path.resolve(args.deck);
+  const { out, slideCount } = buildDeck(deckDir);
+  const rel = path.relative(process.cwd(), out) || out;
+  process.stdout.write(`Built ${rel}  (${slideCount} slides)\n`);
+  if (args.open) openInBrowser(out);
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  try {
+    main();
+  } catch (err) {
+    process.stderr.write(`build: ${err.message || err}\n`);
+    process.exit(1);
+  }
+}