wand-kit 0.1.0 → 0.3.0

package/templates/storyboard.mjs

@@ -0,0 +1,33 @@
+/**
+ * __NAME__ — a storyboard on the Wand studio.
+ *
+ * `content.txt` is the script: one voiceover line a shot, verbatim, so
+ * coverage proves every word is on the board. Each shot names its act, its
+ * line (what the shot is for), the direction, and one to four frames; a frame
+ * is a `sketch`, the job's own `art` (SVG on brand roles), an `img`, or left
+ * to draw. `wpm` sets the scratch timing; `target` is the length to hit, in
+ * seconds. examples/storyboard/job.mjs is a finished one.
+ */
+export default {
+  name: "__NAME__",
+  brand: "__BRAND__",          // current | next
+  surface: "slide",
+  tag: "Wand · Storyboard",
+  footer: "Wand AI · Draft for review",
+  content: "content.txt",
+  edits: {},
+  cut: [],
+  css: ``,
+  pages: (c) => c.storyboard({
+    title: "__NAME__",
+    lede: "What the film is for, who sees it, and where.",
+    wpm: 160,
+    target: 30,
+    shots: [
+      { act: "Act one", name: "Opening", vo: c.L(1),
+        line: "What this shot is for, in one sentence.",
+        camera: "", motion: "", onscreen: "", sound: "", next: "Cut.",
+        frames: [{ sketch: { people: 4, apps: ["CRM"], label: "What the frame shows" }, caption: "" }] },
+    ],
+  }),
+};

package/wand.js

@@ -2,25 +2,33 @@
 /**
  * wand.js — the studio's front door.
  *
- *   node wand.js doctor                               what works here
- *   node wand.js new <dir> [--surface letter] [--brand current] [--name "Title"]
- *                                                     a job folder to compose in
- *   node wand.js build <job.mjs>                      gates, then the PDF, a PNG per page, the sheet
+ *   node wand.js doctor                               what works here, and the brand rule
+ *   node wand.js new <dir> [--surface letter] [--brand current|next] [--name "Title"]
+ *                                                     a job folder to compose in, on the default brand
+ *                                                     unless --brand names the other
+ *   node wand.js new <dir> --surface storyboard        a storyboard from a script (shots, frames, timing)
+ *   node wand.js build <job.mjs> [--brand next]       gates, then the PDF, a PNG per page, the sheet
  *   node wand.js check <job.mjs>                      gates only
- *   node wand.js ship  <job.mjs> [--pptx] [--no-html] everything: build, one-file HTML, PowerPoint
+ *   node wand.js ship  <job.mjs> [--pptx] [--no-html] everything: build, one-file HTML (a deck animates,
+ *                                                     a storyboard plays), PowerPoint; the HTML is driven
+ *                                                     like a presenter would before it ships
+ *   node wand.js poster <demo.html> [--play 4]        a demo's poster: the frame every static export shows
  *   node wand.js watch <job.mjs>                      rebuild on save, the browser kept warm
  *   node wand.js gallery [--brand current|next]       every component, light and dark, on one surface each
  *   node wand.js components                           the vocabulary
  *   node wand.js brands                               the brands this kit can draw with
  *
  * A job is a folder with `job.mjs` (the composition) and, for a rebuild,
- * `content.txt` (the words, one per line). Outputs land in `<job>/out/`.
+ * `content.txt` (the words, one per line). Outputs land in `<job>/out/`;
+ * with `--brand` naming the other brand, in `<job>/out-<brand>/`.
  */
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
 import { execFileSync, spawnSync } from "node:child_process";
+import { BRANDS, DEFAULT_BRAND, ASKED_AS, brandRule } from "./lib/brand.js";
 
 const require = createRequire(import.meta.url);
 const KIT = path.dirname(fileURLToPath(import.meta.url));
@@ -33,7 +41,7 @@ const rel = (p) => path.relative(process.cwd(), p) || ".";
 
 async function doctor() {
   const { findChrome, has } = await import("./lib/engine.js");
-  const { BRANDS, loadBrand } = await import("./lib/brand.js");
+  const { loadBrand } = await import("./lib/brand.js");
   const rows = [];
   rows.push(["node", process.version, +process.version.slice(1).split(".")[0] >= 18 ? "ok" : "MISSING - Node 18 or newer"]);
   for (const d of ["playwright-core", "pptxgenjs", "jszip", "fontkit"]) { let s = "ok"; try { require.resolve(d); } catch { s = `MISSING - npm install in ${rel(KIT)}`; } rows.push([d, s === "ok" ? "bundled" : "-", s]); }
@@ -47,14 +55,16 @@ async function doctor() {
   console.log("");
   for (const [k, v, s] of rows) console.log(`${s === "ok" ? "  " : "! "}${k.padEnd(w)}  ${String(v).padEnd(36)}${s === "ok" ? "" : s}`);
   const blocked = rows.some((r) => r[2].startsWith("MISSING") || r[2].startsWith("no renderer"));
+  console.log(`\n  brand rule  ${brandRule()}`);
   console.log(blocked ? "\nBLOCKED - fix the rows marked !\n" : "\nready - node wand.js new <dir>, then build <dir>/job.mjs\n");
   return blocked ? 1 : 0;
 }
 
 function newJob() {
   const dir = args[1]; if (!dir) die("usage: node wand.js new <dir> [--surface letter|a4|slide|square|og] [--brand current|next] [--name \"Title\"]");
-  const surface = flag("--surface", "letter"), brand = flag("--brand", "current"), name = flag("--name", path.basename(dir));
-  const tpl = path.join(KIT, "templates", `${["slide", "square", "og"].includes(surface) ? (surface === "slide" ? "slide" : "card") : "page"}.mjs`);
+  const surface = flag("--surface", "letter"), brand = flag("--brand", DEFAULT_BRAND), name = flag("--name", path.basename(dir));
+  if (!BRANDS.includes(brand)) die(`unknown brand "${brand}" - one of ${BRANDS.join(", ")}`);
+  const tpl = path.join(KIT, "templates", `${surface === "storyboard" ? "storyboard" : ["slide", "square", "og"].includes(surface) ? (surface === "slide" ? "slide" : "card") : "page"}.mjs`);
   if (!fs.existsSync(tpl)) die(`no template for surface "${surface}"`);
   if (fs.existsSync(path.join(dir, "job.mjs"))) die(`${dir}/job.mjs already exists`);
   fs.mkdirSync(dir, { recursive: true });
@@ -64,24 +74,36 @@ function newJob() {
   console.log(`${dir}/\n  job.mjs       the composition — pages(c) and css\n  content.txt   the words, one source string per line (leave empty when authoring)\n\nnext: node ${rel(path.join(KIT, "wand.js"))} build ${path.join(dir, "job.mjs")}`);
 }
 
+/** --brand names the brand to build on instead of the job's own. */
+function brandFlag() {
+  const b = flag("--brand"); if (!b) return null;
+  if (!BRANDS.includes(b)) die(`unknown brand "${b}" - one of ${BRANDS.join(", ")}`);
+  return b;
+}
+
 async function build(jobPath, opts) {
-  if (!jobPath) die("usage: node wand.js build <job.mjs>");
+  if (!jobPath) die("usage: node wand.js build <job.mjs> [--brand current|next]");
   const { build } = await import("./lib/engine.js");
-  return build(jobPath, opts);
+  return build(jobPath, { ...opts, brand: brandFlag() });
 }
 
 async function ship(jobPath) {
   if (!jobPath) die("usage: node wand.js ship <job.mjs> [--pptx] [--no-html]");
   const { build, closeBrowser } = await import("./lib/engine.js");
-  const r = await build(jobPath, { quiet: true });
+  const r = await build(jobPath, { quiet: true, brand: brandFlag() });
   const { surface } = await import("./lib/surfaces.js");
   const s = surface(r.surface);
   if (!on("--no-html")) {
     const { singleFile } = await import("./lib/html_export.js");
     const out = path.join(path.dirname(r.outputs.pdf), `${r.name}.html`);
-    const sf = singleFile(r.outputs.html, out, { kind: s.kind, w: s.w, h: s.h });
+    const sf = singleFile(r.outputs.html, out, { kind: s.kind, w: s.w, h: s.h, talk: r.talk, board: r.board, title: r.title });
     r.outputs.single = sf.out;
     if (sf.missing.length) r.rows.push({ ok: false, gate: "html", msg: `missing files: ${sf.missing.join(", ")}` });
+    if (sf.bytes > 60e6) r.rows.push({ ok: false, warn: true, gate: "html", msg: `${(sf.bytes / 1e6).toFixed(0)} MB: heavy to send; shorten or compress the clips` });
+    // the runtime, used the way a presenter uses it
+    const { checkTalk, checkBoard } = await import("./lib/runtime_check.js");
+    if (r.board) { const c = await checkBoard(out, r.board); r.rows.push({ ok: c.ok, gate: "player", msg: c.msg }); }
+    else if (s.kind === "slide") { const c = await checkTalk(out, { total: r.pages }); r.rows.push({ ok: c.ok, gate: "runtime", msg: c.msg }); }
   }
   if (on("--pptx")) {
     try {
@@ -119,8 +141,32 @@ async function watch(jobPath) {
   process.on("SIGINT", async () => { await closeBrowser(); process.exit(0); });
 }
 
+/** A demo's poster: the page at the size it is shown, after it settles, optionally after it plays. */
+async function poster(demoPath) {
+  if (!demoPath) die("usage: node wand.js poster <demo.html> [--brand current|next] [--size 1280x720] [--wait 1.5] [--play 0] [--out poster.png]");
+  const { browser, closeBrowser } = await import("./lib/engine.js");
+  const [w, h] = flag("--size", "1280x720").split("x").map(Number);
+  const out = flag("--out", demoPath.replace(/\.html?$/i, "") + ".poster.png");
+  const b = await browser();
+  const page = await b.newPage({ viewport: { width: w, height: h } });
+  const errors = []; page.on("pageerror", (e) => errors.push(String(e)));
+  // the same brand colours the deck hands a demo, so the poster matches what the room will see
+  const { loadBrand } = await import("./lib/brand.js");
+  const d = loadBrand(brandFlag() || DEFAULT_BRAND).roles.dark;
+  const brand = Object.fromEntries(Object.entries({ bg: d.track, card: d.paper, stroke: d.stroke, ink: d.ink, text: d.text, label: d.muted, accent: d.accent }).map(([k, v]) => [k, "#" + v]));
+  await page.addInitScript((b) => { window.wandEmbed = { motion: true, brand: b }; }, brand);
+  await page.goto(pathToFileURL(path.resolve(demoPath)).href, { waitUntil: "load" });
+  await page.waitForTimeout(+flag("--wait", "1.5") * 1000);
+  const play = +flag("--play", "0");
+  if (play) { await page.evaluate(() => (window.wandDemo?.play || window.bofaPlay)?.call(window.wandDemo)); await page.waitForTimeout(play * 1000); }
+  await page.screenshot({ path: out });
+  await closeBrowser();
+  console.log(`${rel(out)}  (${w}x${h}${play ? `, after ${play}s of play` : ""})${errors.length ? `\n  console: ${errors[0]}` : ""}`);
+  return errors.length ? 1 : 0;
+}
+
 async function gallery() {
-  const brand = flag("--brand", "current");
+  const brand = flag("--brand", DEFAULT_BRAND);
   const { build, closeBrowser } = await import("./lib/engine.js");
   process.env.WAND_GALLERY_BRAND = brand;
   const r = await build(path.join(KIT, "examples", "gallery", "job.mjs"), {});
@@ -148,9 +194,9 @@ async function components() {
 }
 
 async function brands() {
-  const { BRANDS, loadBrand } = await import("./lib/brand.js");
-  for (const b of BRANDS) { const br = loadBrand(b); console.log(`\n  ${b.padEnd(8)} ${br.title}\n  ${"".padEnd(8)} ${rel(br.dir)} · faces: ${br.families.join(", ")} · ${br.faceFiles.length} files · ${Object.keys(br.tokens.art).length} art roles`); }
-  console.log("");
+  const { loadBrand } = await import("./lib/brand.js");
+  for (const b of BRANDS) { const br = loadBrand(b); console.log(`\n  ${b.padEnd(8)} ${br.title}${b === DEFAULT_BRAND ? "  (default)" : ""}\n  ${"".padEnd(8)} ${rel(br.dir)} · faces: ${br.families.join(", ")} · ${br.faceFiles.length} files · ${Object.keys(br.tokens.art).length} art roles\n  ${"".padEnd(8)} asked for as: ${ASKED_AS[b].join(", ")}`); }
+  console.log(`\n  rule: ${brandRule()}\n`);
 }
 
 try {
@@ -158,10 +204,11 @@ try {
     case "doctor": process.exit(await doctor());
     case "new": newJob(); break;
     case "build": { const r = await build(args[1], {}); const { closeBrowser } = await import("./lib/engine.js"); await closeBrowser(); process.exit(r.ok ? 0 : 1); }
-    case "check": { const r = await build(args[1], { outputs: false }); const { closeBrowser } = await import("./lib/engine.js"); await closeBrowser(); process.exit(r.ok ? 0 : 1); }
+    case "check": { const r = await build(args[1], { outputs: false, brand: brandFlag() }); const { closeBrowser } = await import("./lib/engine.js"); await closeBrowser(); process.exit(r.ok ? 0 : 1); }
     case "ship": process.exit(await ship(args[1]));
     case "watch": await watch(args[1]); break;
     case "gallery": process.exit(await gallery());
+    case "poster": process.exit(await poster(args[1]));
     case "components": await components(); break;
     case "brands": await brands(); break;
     default: