wand-kit 0.0.0-stage → 0.2.0

package/lib/engine.js

@@ -0,0 +1,280 @@
+/**
+ * lib/engine.js — one design surface, read back by every export.
+ *
+ * A job (`job.mjs`) names a brand, a surface and its content, and composes
+ * pages from the components. The engine assembles that into one HTML
+ * document, opens it in Chromium, runs every gate against the rendered DOM,
+ * and writes what was reviewed on screen: the PDF, a PNG per page, a contact
+ * sheet. The PowerPoint and single-file HTML exports read the same render.
+ *
+ * Nothing is trusted that was not measured here: fit, overlap, colours,
+ * faces, type size, contrast and the words are all read from Chromium's own
+ * layout of the page that becomes the PDF.
+ */
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { pathToFileURL, fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { execFileSync, spawnSync } from "node:child_process";
+import { loadBrand, DEFAULT_BRAND } from "./brand.js";
+import { surface as surfaceOf, surfaceCss } from "./surfaces.js";
+import { bind, COMPONENTS_CSS } from "./components.js";
+import { loadContent, coverage } from "./content.js";
+
+const require = createRequire(import.meta.url);
+export const KIT = path.join(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+/* ------------------------------------------------------------- the browser */
+
+/** A Chromium to render with, or null. The env, Playwright's own cache, then the system. */
+export function findChrome() {
+  const ok = (p) => p && fs.existsSync(p) && p;
+  if (process.env.WAND_CHROME) return ok(process.env.WAND_CHROME) || null;
+  try { const { chromium } = require("playwright-core"); const p = chromium.executablePath(); if (ok(p)) return p; } catch {}
+  const caches = [process.env.PLAYWRIGHT_BROWSERS_PATH, path.join(os.homedir(), "Library", "Caches", "ms-playwright"),
+    path.join(os.homedir(), ".cache", "ms-playwright"), "/ms-playwright", "/root/.cache/ms-playwright", "/opt/ms-playwright"].filter(Boolean);
+  const inside = ["chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing", "chrome-mac/Chromium.app/Contents/MacOS/Chromium",
+    "chrome-mac-x64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing", "chrome-linux/chrome", "chrome-linux64/chrome",
+    "chrome-headless-shell-linux64/chrome-headless-shell", "chrome-headless-shell-mac-arm64/chrome-headless-shell", "chrome-win/chrome.exe"];
+  for (const c of caches) {
+    if (!fs.existsSync(c)) continue;
+    const dirs = fs.readdirSync(c).filter((d) => /^chromium(_headless_shell)?-\d+$/.test(d)).sort((a, b) => (+b.match(/\d+/)[0]) - (+a.match(/\d+/)[0]));
+    for (const d of dirs) for (const i of inside) { const p = ok(path.join(c, d, i)); if (p) return p; }
+  }
+  for (const p of ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "/Applications/Chromium.app/Contents/MacOS/Chromium",
+    "/usr/bin/chromium", "/usr/bin/chromium-browser", "/usr/bin/google-chrome", "/usr/bin/google-chrome-stable", "/snap/bin/chromium",
+    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"]) if (ok(p)) return p;
+  for (const c of ["chromium", "chromium-browser", "google-chrome", "chrome"]) {
+    const r = spawnSync("which", [c], { encoding: "utf8" });
+    if (r.status === 0 && ok(r.stdout.trim())) return r.stdout.trim();
+  }
+  return null;
+}
+
+export const has = (c) => spawnSync("which", [c]).status === 0;
+
+let shared = null;
+/** One browser for the process; `watch` keeps it warm. */
+export async function browser() {
+  if (shared) return shared;
+  const exe = findChrome();
+  if (!exe) throw new Error("no Chromium found — set WAND_CHROME to a browser binary, or install one (npx playwright-core install chromium)");
+  const { chromium } = require("playwright-core");
+  shared = await chromium.launch({ executablePath: exe, args: ["--font-render-hinting=none"] });
+  return shared;
+}
+export async function closeBrowser() { if (shared) { await shared.close(); shared = null; } }
+
+/* ---------------------------------------------------------------- the job */
+
+export async function loadJob(jobPath) {
+  const file = path.resolve(jobPath);
+  if (!fs.existsSync(file)) throw new Error(`no such job: ${file}`);
+  const mod = await import(pathToFileURL(file).href + `?t=${Date.now()}`);
+  const job = mod.default;
+  if (!job || typeof job.pages !== "function") throw new Error(`${path.basename(file)} must export default { ..., pages(c) }`);
+  return { job, file, dir: path.dirname(file) };
+}
+
+/** The whole document: brand, surface and component CSS, the job's CSS, then its pages. */
+export function assemble({ brand, surface, job, pages }) {
+  const title = job.name || "Wand";
+  const body = Array.isArray(pages) ? pages.join("\n") : String(pages);
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${title.replace(/</g, "&lt;")}</title>
+<meta name="viewport" content="width=${surface.w}"><meta name="wand-brand" content="${brand.name}"><meta name="wand-surface" content="${surface.name}">
+<style>${brand.css()}</style>
+<style>${surfaceCss(surface)}</style>
+<style>${COMPONENTS_CSS}</style>
+<style>${job.css || ""}</style>
+</head><body class="surface-${surface.name} brand-${brand.name}">
+${body}
+</body></html>`;
+}
+
+const stem = (job, file) => (job.file || job.name || path.basename(path.dirname(file))).replace(/[\/\\:]+/g, "-").replace(/\s+/g, "_");
+
+/* ------------------------------------------------------------------ gates */
+
+/** Runs inside the page. Everything is read from the rendered DOM. */
+function GATES({ min, chars, tokens, families, base }) {
+  const T = new Set(tokens);
+  const pages = [...document.querySelectorAll(".page")];
+  const toHex = (c) => {
+    const m = String(c).match(/rgba?\(([^)]+)\)/); if (!m) return null;
+    const p = m[1].split(/[ ,\/]+/).filter(Boolean).map(Number); if (p.length > 3 && p[3] === 0) return null;
+    return p.slice(0, 3).map((v) => Math.round(v).toString(16).padStart(2, "0")).join("").toUpperCase();
+  };
+  const sel = (el) => el.tagName.toLowerCase() + (typeof el.className === "string" && el.className.trim() ? "." + el.className.trim().split(/\s+/).slice(0, 3).join(".") : "");
+  const lum = (h) => { const c = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255).map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4)); return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; };
+  const contrast = (a, b) => { const x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); };
+  const bgOf = (el) => { for (let e = el; e; e = e.parentElement) { const h = toHex(getComputedStyle(e).backgroundColor); if (h) return h; if (e.classList.contains("page")) break; } return null; };
+  const res = { fit: [], overlap: [], brand: [], fonts: [], contrast: [], type: [], measure: [], dash: [], texts: [], notes: [] };
+  const seen = new Set();
+  pages.forEach((pg, pi) => {
+    const n = pi + 1;
+    const content = pg.querySelector(".content");
+    const box = (content || pg).getBoundingClientRect();
+    const foot = pg.querySelector("footer")?.getBoundingClientRect();
+    const floor = foot ? Math.min(box.bottom, foot.top - 6) : box.bottom;
+    let over = 0, why = "", low = -Infinity;
+    for (const el of (content || pg).querySelectorAll("*")) {
+      if (el.closest(".deco")) continue;
+      const r = el.getBoundingClientRect(); if (!r.width || !r.height) continue;
+      const cs = getComputedStyle(el);
+      const bump = (v, k) => { if (v > over) { over = v; why = `${k} ${sel(el)}`; } };
+      bump(r.bottom - floor, "below");
+      if (cs.display !== "inline") bump(box.top - r.top, "above");
+      bump(r.right - box.right - 1, "right"); bump(box.left - r.left - 1, "left");
+      low = Math.max(low, r.bottom);
+    }
+    res.fit.push({ page: n, over: Math.round(over), why, slack: Math.round(floor - low) });
+
+    const all = [...pg.querySelectorAll("*")];
+    const leaves = all.filter((e) => !e.closest(".deco, svg, script, style") && [...e.childNodes].some((c) => c.nodeType === 3 && c.data.trim()));
+    const boxes = leaves.map((e) => ({ e, r: e.getBoundingClientRect() })).filter((x) => x.r.width && x.r.height);
+    for (let i = 0; i < boxes.length; i++) for (let j = i + 1; j < boxes.length; j++) {
+      const A = boxes[i], B = boxes[j];
+      if (A.e.contains(B.e) || B.e.contains(A.e)) continue;
+      const w = Math.min(A.r.right, B.r.right) - Math.max(A.r.left, B.r.left), h = Math.min(A.r.bottom, B.r.bottom) - Math.max(A.r.top, B.r.top);
+      if (w > 2 && h > 2) res.overlap.push({ page: n, a: sel(A.e), b: sel(B.e), px: `${Math.round(w)}×${Math.round(h)}` });
+    }
+    for (const el of all) {
+      if (el.closest("script, style")) continue;
+      const cs = getComputedStyle(el);
+      const inSvg = !!el.closest("svg");
+      const props = inSvg ? ["fill", "stroke"] : ["color", "background-color", "border-top-color", "border-bottom-color", "border-left-color", "border-right-color"];
+      for (const prop of props) {
+        const v = cs.getPropertyValue(prop); if (!v || v === "none" || v === "currentcolor") continue;
+        if (prop.startsWith("border-") && !(parseFloat(cs.getPropertyValue(prop.replace("-color", "-width"))) > 0 && cs.getPropertyValue(prop.replace("-color", "-style")) !== "none")) continue;
+        const h = toHex(v); if (!h || T.has(h)) continue;
+        const k = `${h}|${sel(el)}|${prop}`; if (seen.has(k)) continue; seen.add(k);
+        res.brand.push({ page: n, el: sel(el), prop, hex: h });
+      }
+      if (!leaves.includes(el)) continue;
+      const fam = cs.fontFamily.split(",")[0].replace(/["']/g, "").trim();
+      if (!families.includes(fam)) { const k = `f|${fam}|${sel(el)}`; if (!seen.has(k)) { seen.add(k); res.fonts.push({ page: n, el: sel(el), family: fam }); } }
+      const size = parseFloat(cs.fontSize);
+      if (size < min - 0.05) res.type.push({ page: n, el: sel(el), size: +size.toFixed(1) });
+      const fg = toHex(cs.color), bg = bgOf(el);
+      if (fg && bg && !el.closest(".eyebrow, footer")) { const ratio = contrast(fg, bg), need = size >= base * 1.5 ? 3 : 4.5; if (ratio < need) res.contrast.push({ page: n, el: sel(el), ratio: +ratio.toFixed(1), need }); }
+      const r = el.getBoundingClientRect(), lh = parseFloat(cs.lineHeight) || size * 1.4;
+      const inner = r.height - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
+      if (Math.round(inner / lh) >= 2 && r.width / (size * 0.48) > chars) res.measure.push({ page: n, el: sel(el), chars: Math.round(r.width / (size * 0.48)) });
+    }
+    const text = pg.innerText || "";
+    if (text.includes("\u2014")) res.dash.push(n);
+    res.texts.push(text);
+    res.notes.push(pg.dataset.notes || "");
+  });
+  return res;
+}
+
+/* ------------------------------------------------------------------ build */
+
+/**
+ * Build a job: gates, and unless `outputs` is false, the PDF, the PNGs and the
+ * sheet in `<job dir>/out/`. Returns { ok, rows, outputs, html, texts }.
+ */
+export async function build(jobPath, { outputs: wantOutputs = true, outDir = null, quiet = false } = {}) {
+  const t0 = Date.now();
+  const { job, file, dir } = await loadJob(jobPath);
+  const brand = loadBrand(job.brand || DEFAULT_BRAND, job.theme || null);
+  const surface = surfaceOf(job.surface || "letter");
+  const content = loadContent(dir, job);
+  const c = bind({ brand, surface, job, content });
+  const pages = job.pages(c);
+  const html = assemble({ brand, surface, job, pages });
+  const out = outDir || path.join(dir, "out");
+  const work = path.join(out, "work");
+  fs.mkdirSync(work, { recursive: true });
+  const name = stem(job, file);
+  const htmlPath = path.join(work, `${name}.html`);
+  fs.writeFileSync(htmlPath, html);
+
+  const b = await browser();
+  const page = await b.newPage({ viewport: { width: surface.w, height: surface.h } });
+  const errors = [];
+  page.on("pageerror", (e) => errors.push(String(e)));
+  page.on("console", (m) => { if (m.type() === "error") errors.push(m.text()); });
+  await page.goto(pathToFileURL(htmlPath).href, { waitUntil: "load" });
+  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(() => Promise.all([...document.images].map((i) => (i.complete ? null : new Promise((r) => { i.onload = i.onerror = r; })))));
+  await page.waitForTimeout(120);
+
+  const g = await page.evaluate(GATES, { min: surface.min, chars: surface.chars, tokens: [...brand.tokenSet], families: brand.families, base: surface.base });
+  const pageCount = g.fit.length;
+  const text = g.texts.join("\n");
+  const cov = content.has ? coverage(content, text, job.splitters) : null;
+  const deny = (job.denylist || []).map((d) => (d instanceof RegExp ? d : new RegExp(d, "i"))).filter((re) => re.test(text)).map(String);
+
+  const rows = [];
+  const row = (ok, gate, msg, warn = false) => rows.push({ ok, gate, msg, warn });
+  const badFit = g.fit.filter((f) => f.over > 0);
+  row(!badFit.length, "fit", badFit.length ? badFit.map((f) => `p${f.page} +${f.over}px (${f.why})`).join(", ")
+    : `${pageCount} page${pageCount === 1 ? "" : "s"} (slack px: ${g.fit.map((f) => f.slack).join(" ")})`);
+  row(!cov || !cov.miss.length, "coverage", !cov ? "no content file — authored copy, nothing to cover"
+    : cov.miss.length ? `${cov.found}/${cov.total} — missing lines ${cov.miss.join(", ")}` : `${cov.found}/${cov.total} lines on the page${content.cut.size ? `, ${content.cut.size} cut` : ""}${content.edited ? `, ${content.edited} edits declared` : ""}`);
+  row(!g.overlap.length, "overlap", g.overlap.length ? g.overlap.slice(0, 4).map((o) => `p${o.page} ${o.a} × ${o.b} (${o.px})`).join("; ") + (g.overlap.length > 4 ? ` +${g.overlap.length - 4}` : "") : "no text on text");
+  row(!g.brand.length, "brand", g.brand.length ? `${g.brand.length} off-token: ` + g.brand.slice(0, 4).map((o) => `p${o.page} ${o.el} ${o.prop} #${o.hex}`).join("; ") + (g.brand.length > 4 ? " …" : "")
+    : `every colour a token${brand.declared.size ? ` (${brand.declared.size} declared by the job)` : ""}`);
+  row(!g.fonts.length, "fonts", g.fonts.length ? g.fonts.slice(0, 4).map((o) => `p${o.page} ${o.el} in ${o.family}`).join("; ") : `${brand.families.join(", ")} only`);
+  row(!g.type.length, "type", g.type.length ? `under ${surface.min}px: ` + g.type.slice(0, 4).map((o) => `p${o.page} ${o.el} ${o.size}px`).join("; ") : `nothing under ${surface.min}px`);
+  row(!g.dash.length, "dashes", g.dash.length ? `em dash on p${g.dash.join(", p")}` : "no em dashes");
+  row(!deny.length, "names", job.denylist?.length ? (deny.length ? `found ${deny.join(", ")}` : `none of ${job.denylist.length} denied names`) : "no denylist", !job.denylist?.length);
+  row(!g.contrast.length, "contrast", g.contrast.length ? `${g.contrast.length} low: ` + g.contrast.slice(0, 3).map((o) => `p${o.page} ${o.el} ${o.ratio}:1 (needs ${o.need})`).join("; ") : "every text passes WCAG AA", true);
+  row(!g.measure.length, "measure", g.measure.length ? `${g.measure.length} long: ` + g.measure.slice(0, 3).map((o) => `p${o.page} ${o.el} ~${o.chars} chars`).join("; ") : `no line over ${surface.chars} characters`, true);
+  row(!errors.length, "console", errors.length ? errors.slice(0, 2).join(" | ") : "no errors");
+
+  const outputs = { html: htmlPath };
+  if (wantOutputs) {
+    const pdf = path.join(out, `${name}.pdf`);
+    await page.pdf({ path: pdf, width: `${surface.w}px`, height: `${surface.h}px`, printBackground: true, preferCSSPageSize: true });
+    outputs.pdf = pdf;
+    const shots = path.join(out, "pages");
+    fs.rmSync(shots, { recursive: true, force: true }); fs.mkdirSync(shots, { recursive: true });
+    const els = await page.$$(".page");
+    outputs.pngs = [];
+    for (let i = 0; i < els.length; i++) { const p = path.join(shots, `p${String(i + 1).padStart(2, "0")}.png`); await els[i].screenshot({ path: p }); outputs.pngs.push(p); }
+    outputs.sheet = await sheet(b, outputs.pngs, path.join(out, "sheet.png"), surface);
+    if (has("pdftotext")) {
+      const pdfText = execFileSync("pdftotext", ["-raw", pdf, "-"], { encoding: "utf8" });
+      const pc = content.has ? coverage(content, pdfText, job.splitters) : null;
+      const dash = pdfText.includes("\u2014");
+      row(!(pc && pc.miss.length) && !dash, "pdf text", dash ? "em dash in the PDF text" : pc ? (pc.miss.length ? `missing lines ${pc.miss.join(", ")}` : `${pc.found}/${pc.total} lines read back from the PDF`) : "readable");
+    }
+    row(true, "renders", `${path.relative(process.cwd(), shots)}/p01…${String(els.length).padStart(2, "0")}.png, ${path.relative(process.cwd(), outputs.sheet)}`);
+  }
+  await page.close();
+
+  const ok = rows.every((r) => r.ok || r.warn);
+  const report = { ok, rows, outputs, pages: pageCount, brand: brand.name, surface: surface.name, ms: Date.now() - t0, texts: g.texts, notes: g.notes, name };
+  fs.writeFileSync(path.join(work, "report.json"), JSON.stringify({ ...report, texts: undefined }, null, 1));
+  if (!quiet) printReport(report);
+  return report;
+}
+
+export function printReport(r) {
+  console.log("");
+  for (const row of r.rows) console.log(`  ${row.ok ? " ok " : row.warn ? " -- " : "FAIL"}  ${row.gate.padEnd(10)} ${row.msg}`);
+  if (r.outputs.pdf) console.log(`\n  ${path.relative(process.cwd(), r.outputs.pdf)}  (${(fs.statSync(r.outputs.pdf).size / 1e6).toFixed(1)} MB, ${r.pages} page${r.pages === 1 ? "" : "s"}, ${r.brand} brand, ${r.surface}, ${(r.ms / 1000).toFixed(1)}s)`);
+  if (r.outputs.pptx) console.log(`  ${path.relative(process.cwd(), r.outputs.pptx)}  (${(fs.statSync(r.outputs.pptx).size / 1e6).toFixed(1)} MB)`);
+  if (r.outputs.single) console.log(`  ${path.relative(process.cwd(), r.outputs.single)}  (${(fs.statSync(r.outputs.single).size / 1e6).toFixed(1)} MB, one file, opens offline)`);
+  console.log(r.ok ? "" : "\n  FAILED — fix the rows marked FAIL\n");
+}
+
+/** Every page on one image, for review. */
+async function sheet(b, pngs, outPath, surface) {
+  const cols = surface.kind === "slide" ? 3 : Math.min(4, pngs.length);
+  const w = surface.kind === "slide" ? 560 : 300, h = Math.round((w * surface.h) / surface.w);
+  const html = `<!doctype html><body style="margin:0;background:#1a1a1f;padding:16px;display:grid;grid-template-columns:repeat(${cols},${w}px);gap:14px;width:${cols * (w + 14) + 18}px">` +
+    pngs.map((p, i) => `<figure style="margin:0;color:#aaa;font:11px system-ui"><img src="${pathToFileURL(p).href}" style="display:block;width:${w}px;height:${h}px;box-shadow:0 2px 12px #0008"><figcaption style="margin-top:4px">${String(i + 1).padStart(2, "0")}</figcaption></figure>`).join("") + "</body>";
+  const tmp = path.join(path.dirname(outPath), "work", "sheet.html");
+  fs.writeFileSync(tmp, html);
+  const pg = await b.newPage({ viewport: { width: cols * (w + 14) + 34, height: 400 } });
+  await pg.goto(pathToFileURL(tmp).href, { waitUntil: "load" });
+  await pg.evaluate(() => Promise.all([...document.images].map((i) => (i.complete ? null : new Promise((r) => { i.onload = i.onerror = r; })))));
+  await pg.screenshot({ path: outPath, fullPage: true });
+  await pg.close();
+  return outPath;
+}

package/lib/html_export.js

@@ -0,0 +1,71 @@
+/**
+ * lib/html_export.js — the job as one HTML file that opens anywhere, offline.
+ *
+ * The working HTML refers to fonts and art by file path. This inlines every
+ * one as a data URI, so the file carries the brand with it, and adds a small
+ * runtime: on a slide or card surface, one page at a time scaled to the
+ * window, arrow keys and clicks to move, G for the grid, print gives one
+ * sheet per page; on a page surface, the pages stacked and scaled to fit.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const MIME = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml",
+  ttf: "font/ttf", otf: "font/otf", woff: "font/woff", woff2: "font/woff2" };
+
+export function singleFile(htmlPath, outPath, { kind = "page", w, h }) {
+  let html = fs.readFileSync(htmlPath, "utf8");
+  const cache = new Map(), missing = [];
+  html = html.replace(/file:\/\/[^"')\s]+/g, (u) => {
+    if (cache.has(u)) return cache.get(u);
+    let p; try { p = fileURLToPath(u); } catch { return u; }
+    if (!fs.existsSync(p)) { missing.push(p); return u; }
+    const ext = path.extname(p).slice(1).toLowerCase();
+    const d = `data:${MIME[ext] || "application/octet-stream"};base64,${fs.readFileSync(p).toString("base64")}`;
+    cache.set(u, d); return d;
+  });
+  html = html.replace("</body>", `${RUNTIME_CSS}<script>${RUNTIME_JS}</script></body>`)
+    .replace("<body", `<body data-kind="${kind}" data-w="${w}" data-h="${h}"`);
+  fs.writeFileSync(outPath, html);
+  return { out: outPath, missing, bytes: fs.statSync(outPath).size };
+}
+
+const RUNTIME_CSS = `<style id="wand-runtime">
+html,body{margin:0;background:#101014}
+body.stage{overflow:hidden;height:100vh}
+body.stage .page{position:absolute;left:50%;top:50%;transform-origin:center;display:none}
+body.stage .page.on{display:block}
+body.stack{padding:24px 0}
+body.stack .page{margin:0 auto 24px;transform-origin:top center}
+.wand-dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;background:#0008;color:#ddd;font:13px/1 system-ui;opacity:0;transition:opacity .2s;pointer-events:none}
+body.moving .wand-dock{opacity:1;pointer-events:auto}
+.wand-dock button{background:none;border:0;color:#ddd;font:inherit;cursor:pointer;padding:4px 6px}
+body.grid{overflow:auto}
+body.grid .page{position:static;display:block;transform:none;zoom:.22;margin:12px;float:left;cursor:pointer;box-shadow:0 2px 14px #000a}
+@media print{html,body{background:#fff}body.stage .page,body.stack .page{position:static;display:block;transform:none;margin:0;break-after:page}.wand-dock{display:none}}
+</style>`;
+
+const RUNTIME_JS = `(() => {
+const B = document.body, W = +B.dataset.w, H = +B.dataset.h, kind = B.dataset.kind;
+const pages = [...document.querySelectorAll(".page")];
+if (kind === "page") {
+  B.classList.add("stack");
+  const fit = () => { const k = Math.min(1, (innerWidth - 48) / W); pages.forEach((p) => { p.style.transform = "scale(" + k + ")"; p.style.marginBottom = (24 - H * (1 - k)) + "px"; }); };
+  addEventListener("resize", fit); fit(); return;
+}
+B.classList.add("stage");
+let i = Math.max(0, Math.min(pages.length - 1, (parseInt(location.hash.slice(1)) || 1) - 1));
+const dock = document.createElement("div"); dock.className = "wand-dock";
+dock.innerHTML = '<button data-go="-1">‹</button><span class="n"></span><button data-go="1">›</button><button data-grid>grid</button>';
+B.appendChild(dock);
+const fit = () => { const k = Math.min(innerWidth / W, innerHeight / H); pages.forEach((p) => { p.style.transform = "translate(-50%,-50%) scale(" + k + ")"; }); };
+const show = () => { pages.forEach((p, k) => p.classList.toggle("on", k === i)); dock.querySelector(".n").textContent = String(i + 1).padStart(2, "0") + " / " + pages.length; history.replaceState(null, "", "#" + (i + 1)); };
+const go = (d) => { i = Math.max(0, Math.min(pages.length - 1, i + d)); show(); };
+dock.addEventListener("click", (e) => { const b = e.target.closest("button"); if (!b) return; if (b.dataset.grid !== undefined) B.classList.toggle("grid"); else go(+b.dataset.go); });
+addEventListener("keydown", (e) => { if (e.key === "ArrowRight" || e.key === " " || e.key === "PageDown") go(1); else if (e.key === "ArrowLeft" || e.key === "PageUp") go(-1);
+  else if (e.key === "Home") { i = 0; show(); } else if (e.key === "End") { i = pages.length - 1; show(); } else if (e.key.toLowerCase() === "g") B.classList.toggle("grid"); else if (e.key.toLowerCase() === "f") document.documentElement.requestFullscreen?.(); });
+pages.forEach((p, k) => p.addEventListener("click", (e) => { if (B.classList.contains("grid")) { i = k; B.classList.remove("grid"); show(); } else go(e.shiftKey ? -1 : 1); }));
+let t; addEventListener("mousemove", () => { B.classList.add("moving"); clearTimeout(t); t = setTimeout(() => B.classList.remove("moving"), 1800); });
+addEventListener("resize", fit); fit(); show();
+})();`;