slidemind 0.3.19 → 0.4.0

package/src/builders/build.mjs

@@ -6,12 +6,15 @@
 //   slidemind view-draft <deck>        (the CLI entry point; it builds, then captures)
 //   node src/builders/build.mjs --deck <deck> [--open] [--fix]
 //
-// Convention:
-//   <deck>/
+// Convention (the deck's WORKSPACE — `<deck>/.slidemind/`, or the deck dir
+// itself for a deck that predates the layout; see src/lib/deck-paths.mjs):
+//   <workspace>/
 //     slides/
 //       01-cover.jsx
 //       02-agenda.jsx
 //       ...
+//     preview/presentation.html   what this module writes
+//     preview/fonts/              the bundle's brand faces, next to the page
 //
 // Each slide is a thin JSX component that composes a layout from
 // skills/create-slides/layouts/. Slide files do NOT import layouts; the
@@ -21,9 +24,11 @@
 // 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
+//   3. Inlines corporate-design.css + layouts.css FROM THE BUNDLE CACHE and
+//      points every brand asset (chrome-*, master-*, logos) at the bundle's
+//      assets dir by absolute file: URL — the design is referenced, never
+//      copied into the deck (see the deck-workspace change).
+//   4. Emits preview/presentation.html with React + Babel-standalone from CDN and a
 //      bootstrap that transpiles on load and renders a keyboard-navigable
 //      deck.
 
@@ -31,6 +36,7 @@ import { spawn } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
+import crypto from "node:crypto";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
 import { resolveBundleDirForDeck } from "../bridge/bundle.mjs";
@@ -41,6 +47,8 @@ import { lintConvertedOrThrow } from "../lib/lint-converted.mjs";
 import { resolveSkillForDeck } from "./resolve-skill.mjs";
 import { convertedHostLayouts, loadConversions } from "../lib/conversions.mjs";
 import { slideOrderWarning, sortSlideFilenames } from "../lib/slide-order.mjs";
+import { selectSlideFiles } from "../lib/slide-selection.mjs";
+import { bundleOwnedFiles, deckSlug, previewPath } from "../lib/deck-paths.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -68,19 +76,59 @@ export function stripImports(src) {
   );
 }
 
-function rewriteAssetsPath(src) {
+// Brand assets (logos, decor, chrome-*/master-* layout backgrounds) live in the
+// materialized bundle cache and are NOT copied into the deck. Every reference
+// to them in a layout, a slide or the CSS is rewritten to an absolute file: URL
+// into that cache, so the page works opened straight off disk. The review
+// server rewrites this same prefix to a route it serves (see review.mjs) —
+// a browser on an http page may not load file: subresources.
+export function brandAssetsUrl(skill) {
+  const dir = skill?.brand?.assetsDir;
+  return dir ? pathToFileURL(dir).href.replace(/\/$/, "") : "./assets";
+}
+
+function rewriteAssetsPath(src, brandUrl) {
   // 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".
+  // under skills/create-slides/layouts/) — that layer IS the brand's, so it
+  // resolves to the bundle.
+  return src.replace(/assetsPath = "\.\.\/assets"/g, `assetsPath = "${brandUrl}"`);
+}
+
+// A slide that names a layout background by hand ("./assets/chrome-Black.png")
+// meant the brand's copy; deck-owned media ("./assets/photo.jpg") stays local.
+// `deckOwned` holds the files the DECK owns under those names — a user's own
+// `assets/master-data.png` is its own image, not the bundle's, and keeps
+// resolving locally. Layout sources are the brand's, so they pass none.
+function rewriteBrandAssetRefs(src, brandUrl, deckOwned = null) {
   return src.replace(
-    /assetsPath = "\.\.\/assets"/g,
-    'assetsPath = "./assets"',
+    /(["'`(])\.?\/?assets\/((?:chrome|master)-[^"'`)]*)/g,
+    (m, open, name) => (deckOwned?.has(`assets/${name}`) ? m : `${open}${brandUrl}/${name}`),
   );
 }
 
-function inlineLayout(file) {
+// Files in the deck's assets/ that are NOT verified copies of the bundle's own —
+// the deck owns them whatever they are called.
+function deckOwnedAssets(deckDir) {
+  const bundleOwned = bundleOwnedFiles(deckDir, resolveBundleDirForDeck(deckDir));
+  const owned = new Set();
+  let names = [];
+  try {
+    names = fs.readdirSync(path.join(deckDir, "assets"));
+  } catch {
+    return owned;
+  }
+  for (const name of names) {
+    if (!bundleOwned.has(`assets/${name}`)) owned.add(`assets/${name}`);
+  }
+  return owned;
+}
+
+function inlineLayout(file, brandUrl) {
   const stem = path.basename(file, ".jsx");
-  const raw = rewriteAssetsPath(fs.readFileSync(file, "utf8"));
+  const raw = rewriteBrandAssetRefs(
+    rewriteAssetsPath(fs.readFileSync(file, "utf8"), brandUrl),
+    brandUrl,
+  );
   const binding = raw.match(/export\s+default\s+function\s+([A-Za-z_$][\w$]*)\s*\(/)?.[1] || layoutBindingNameForStem(stem);
   const src = safeInline(raw);
   return (
@@ -105,59 +153,42 @@ function layoutBindingNameForStem(stem) {
   )).join("");
 }
 
-function inlineSlide(file, index) {
+function inlineSlide(file, index, brandUrl, deckOwned) {
   const stem = path.basename(file, ".jsx");
-  const src = safeInline(stripImports(fs.readFileSync(file, "utf8")));
+  const src = safeInline(
+    rewriteBrandAssetRefs(stripImports(fs.readFileSync(file, "utf8")), brandUrl, deckOwned),
+  );
   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")
+// The design system, INLINED from the bundle cache instead of copied into the
+// deck: two stylesheets (corporate-design.css, then layouts.css so its rules
+// win a selector tie) with every url("../assets/…") pointed at the bundle.
+//
+// Layering is unchanged — brand layouts.css first, the active skill's on top —
+// only the destination is: nothing lands in the deck, so a deck no longer
+// carries (or uploads, or hashes into an approval) a copy of the design.
+function designSystemCss(skill, brandUrl) {
+  const chunks = [];
+  const rewrite = (css) =>
+    css
+      .replace(/url\("\.\.\/assets\//g, `url("${brandUrl}/`)
+      .replace(/url\('\.\.\/assets\//g, `url('${brandUrl}/`)
+      .replace(/url\(\.\.\/assets\//g, `url(${brandUrl}/`);
+  const cssSources = [
+    skill.cssFile,
+    ...(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 = [];
+      : [skill.brand.layoutsCssFile, path.join(skill.layoutsDir, "layouts.css")]),
+  ];
   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);
+    if (!cssPath || !fs.existsSync(cssPath)) continue;
+    chunks.push(rewrite(fs.readFileSync(cssPath, "utf8")));
   }
-  fs.writeFileSync(path.join(deckDir, "layouts.css"), cssChunks.join("\n\n"));
+  return chunks.join("\n\n");
 }
 
 // First concrete (non-generic) family of a CSS var's font stack, or null.
@@ -204,7 +235,7 @@ function brandFontFaces(deckDir, skill) {
 
   let css = "";
   try {
-    css = fs.readFileSync(path.join(deckDir, "corporate-design.css"), "utf8");
+    css = fs.readFileSync(skill.cssFile, "utf8");
   } catch {
     /* alias resolution degrades to canonical families only */
   }
@@ -213,7 +244,7 @@ function brandFontFaces(deckDir, skill) {
     mono: firstConcreteFamily(css, "font-mono"),
   };
 
-  const outFonts = path.join(deckDir, "fonts");
+  const outFonts = previewPath(deckDir, "fonts");
   const rules = [];
   for (const font of fonts) {
     if (!font?.family || !font?.filename) continue;
@@ -239,9 +270,17 @@ function brandFontFaces(deckDir, skill) {
     const format = filename.toLowerCase().endsWith(".otf")
       ? "opentype"
       : "truetype";
+    // Two sources, because this one page is opened from four places and no single
+    // relative URL resolves in all of them: page-relative (`./fonts/`) is right for
+    // a file:// open and for the workspace's own /decks/:id/preview/ route, while
+    // `./preview/fonts/` is right for the review server (page at /, statics from the
+    // workspace root) and the embedded /decks/:id/review gate. A `src:` list is
+    // exactly the fallback CSS provides for this — the browser takes the first that
+    // loads, so brand type no longer silently degrades to a system font.
     const rule = (family) =>
       `@font-face { font-family: ${JSON.stringify(family)}; ` +
-      `src: url(${JSON.stringify(`./fonts/${filename}`)}) format("${format}"); ` +
+      `src: url(${JSON.stringify(`./fonts/${filename}`)}) format("${format}"), ` +
+      `url(${JSON.stringify(`./preview/fonts/${filename}`)}) format("${format}"); ` +
       `font-weight: ${weight}; font-style: ${style}; font-display: block; }`;
     rules.push(rule(font.family));
     const alias = aliasByRole[font.role];
@@ -267,34 +306,36 @@ function loadOverrides(deckDir) {
   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
+// SVG assets the preview can inline — the deck's own downloads plus the
+// bundle's brand glyphs (the deck no longer carries a copy of those). 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");
+function collectSvgAssets(deckDir, skill, brandUrl) {
   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;
+  const read = (dir, keys) => {
+    let entries;
     try {
-      markup = fs.readFileSync(path.join(assetsDir, name), "utf8");
+      entries = fs.readdirSync(dir);
     } catch {
-      continue;
+      return;
     }
-    map[`./assets/${name}`] = markup;
-    map[`assets/${name}`] = markup;
-    map[name] = markup;
-  }
+    for (const name of entries) {
+      if (!name.toLowerCase().endsWith(".svg")) continue;
+      let markup;
+      try {
+        markup = fs.readFileSync(path.join(dir, name), "utf8");
+      } catch {
+        continue;
+      }
+      for (const key of keys(name)) map[key] = markup;
+    }
+  };
+  // Brand first, deck second: a deck file of the same name overrides it.
+  read(skill?.brand?.assetsDir, (n) => [`${brandUrl}/${n}`, n]);
+  read(path.join(deckDir, "assets"), (n) => [`./assets/${n}`, `assets/${n}`, n]);
   return map;
 }
 
@@ -306,6 +347,23 @@ const HTML_TEMPLATE = fs
   .readFileSync(path.join(__dirname, "preview.html"), "utf8")
   .replace("__FAVICON_LINK__", () => FAVICON_LINK);
 
+/** Next to presentation.html: the content hash it was built from. */
+export const PREVIEW_SOURCE_FILE = "presentation.source.json";
+
+/**
+ * The content hash presentation.html shows, when its stamp is the one written
+ * with it (a rebuild without a stamp, or a hand-copied preview, answers null).
+ */
+export function previewBuiltFrom(deckDir) {
+  try {
+    const stamp = JSON.parse(fs.readFileSync(previewPath(deckDir, PREVIEW_SOURCE_FILE), "utf8"));
+    const htmlAt = fs.statSync(previewPath(deckDir, "presentation.html")).mtimeMs;
+    return typeof stamp?.hash === "string" && Date.parse(stamp.builtAt) >= htmlAt - 1000 ? stamp.hash : null;
+  } catch {
+    return null;
+  }
+}
+
 export async function buildDeck(deckDir, opts = {}) {
   const skill = resolveSkillForDeck(deckDir);
   const slidesDir = path.join(deckDir, "slides");
@@ -317,14 +375,14 @@ export async function buildDeck(deckDir, opts = {}) {
     // inserts internally, but `slidemind build` should not create a lossy
     // presentation.html artifact for them.
     throw new Error(
-      `Deck ${path.basename(deckDir)} uses skill '${skill.skillName}' (mode ` +
+      `Deck ${deckSlug(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.`,
+        `${deckSlug(deckDir)}' to produce the editable .pptx.`,
     );
   }
-  const slideNames = sortSlideFilenames(
+  const slideNames = selectSlideFiles(sortSlideFilenames(
     fs.readdirSync(slidesDir).filter((f) => f.endsWith(".jsx")),
-  );
+  ), opts.only);
   const slideFiles = slideNames.map((f) => path.join(slidesDir, f));
   if (slideFiles.length === 0) {
     throw new Error(`No .jsx files in ${slidesDir}`);
@@ -394,19 +452,21 @@ export async function buildDeck(deckDir, opts = {}) {
   const chartPreview = await loadChartPreview(resolveBundleDirForDeck(deckDir));
   const connectorPreview = await loadConnectorPreview(resolveBundleDirForDeck(deckDir));
 
-  copyDesignSystem(deckDir, skill);
+  const brandUrl = brandAssetsUrl(skill);
 
   const layoutsBlock = layoutFiles
-    .map(inlineLayout)
+    .map((file) => inlineLayout(file, brandUrl))
     .concat(convertedHostStubs(deckDir, conversions))
     .join("\n");
+  const deckOwned = deckOwnedAssets(deckDir);
   const slidesBlock = slideFiles
-    .map((file, i) => inlineSlide(file, i))
+    .map((file, i) => inlineSlide(file, i, brandUrl, deckOwned))
     .join("\n");
 
-  const svgAssets = collectSvgAssets(deckDir);
+  const svgAssets = collectSvgAssets(deckDir, skill, brandUrl);
 
-  const html = HTML_TEMPLATE.replace("__TITLE__", path.basename(deckDir))
+  const html = HTML_TEMPLATE.replace("__TITLE__", deckSlug(deckDir))
+    .replace("__DESIGN_CSS__", () => designSystemCss(skill, brandUrl))
     .replace("__BRAND_FONT_FACES__", brandFontFaces(deckDir, skill))
     .replace("__LAYOUTS__", layoutsBlock)
     .replace("__SLIDES__", slidesBlock)
@@ -427,8 +487,22 @@ export async function buildDeck(deckDir, opts = {}) {
       connectorPreview ? `  <script>\n${safeInline(connectorPreview.source)}\n  </script>` : "",
     );
 
-  const out = path.join(deckDir, "presentation.html");
+  // Parallel lanes must not replace the full-deck review page, or each other's
+  // partial preview. Keep the same directory so relative asset URLs still work.
+  const suffix = opts.only == null ? "" : `-${crypto.createHash("sha256").update(JSON.stringify(slideNames)).digest("hex").slice(0, 16)}`;
+  const out = previewPath(deckDir, `presentation${suffix}.html`);
+  fs.mkdirSync(path.dirname(out), { recursive: true });
   fs.writeFileSync(out, html);
+  // What this preview was built FROM: the review gate binds an approval to it, so
+  // an approval never covers slides changed, renamed or deleted after the build.
+  if (!suffix) {
+    try {
+      const { hashDeckContent } = await import("./review.mjs");
+      fs.writeFileSync(previewPath(deckDir, PREVIEW_SOURCE_FILE), JSON.stringify({ hash: `sha256:${hashDeckContent(deckDir)}`, builtAt: new Date().toISOString() }) + "\n");
+    } catch {
+      // no stamp: freshness falls back to file times
+    }
+  }
   return { out, slideCount: slideFiles.length };
 }
 
@@ -588,6 +662,16 @@ async function main() {
         `Autofixed ${fixed.fixes} lint issue(s) in ${fixed.files} slide file(s) — re-read any file before patching it.\n`,
       );
     }
+    // Source someone else owns is withheld, never rewritten — and a withheld
+    // mutation is always SAID. `slidemind view-draft --fix` prints these from
+    // src/cli/deck.mjs; this dev script was the one path where the same guard
+    // ran silently. Duplicated on purpose: sharing the printer would mean
+    // reshaping a seam four production commands now depend on.
+    for (const w of fixed.withheld ?? []) {
+      process.stderr.write(
+        `[fix:withheld] ${w.file} — autofix (${w.fixes.join(", ")}) NOT applied: ${w.reason}.\n`,
+      );
+    }
   }
   const { out, slideCount } = await buildDeck(deckDir);
   const rel = path.relative(process.cwd(), out) || out;