wand-decks-kit 0.8.0

package/lib/brand.js

@@ -0,0 +1,51 @@
+/**
+ * brand.js — locate the shared brand payload (fonts, assets).
+ *
+ * The kit runs in two shapes and must work in both:
+ *
+ *   repo      power-prompts/decks/kit/  ->  brand/ at the repo root, shared by
+ *             every power prompt, so there is one copy of Geist and one copy
+ *             of the gradients.
+ *   packaged  tools/package.mjs copies brand/ into the zip root, so an
+ *             unzipped kit is self-contained with no repo around it.
+ *
+ * `WAND_BRAND_DIR` overrides both.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const KIT = path.join(__dirname, "..");
+
+/**
+ * A file that proves the directory is the brand payload and not something that
+ * merely shares its name. Without this, `resolve("lib")` matched the kit's own
+ * `lib/` — the first candidate, and always present.
+ */
+const MARKER = {
+  fonts: "Geist-Regular.ttf",
+  assets: "glyphs/index.json",
+  lib: "measure.js",
+};
+
+/** Absolute path to a brand subdirectory (`"fonts"`, `"assets"`, `"lib"`). */
+function resolve(name) {
+  const marker = MARKER[name];
+  const tried = [];
+  for (const dir of candidates()) {
+    const p = path.join(dir, name);
+    tried.push(p);
+    if (marker ? fs.existsSync(path.join(p, marker)) : fs.existsSync(p)) return p;
+  }
+  throw new Error(`brand/${name} not found. Looked in:\n  ${tried.join("\n  ")}`);
+}
+
+function candidates() {
+  const out = [];
+  if (process.env.WAND_BRAND_DIR) out.push(path.resolve(process.env.WAND_BRAND_DIR));
+  out.push(KIT);                                        // packaged: bundled alongside the kit
+  out.push(path.join(KIT, "..", "..", "..", "brand"));  // repo: power-prompts/<x>/kit -> brand
+  return out;
+}
+
+module.exports = { resolve };

package/lib/glyphs.js

@@ -0,0 +1,87 @@
+/**
+ * lib/glyphs.js — the named icon set.
+ *
+ * The old library was 36 PNGs named after their extraction order, half baked
+ * white and half baked accent. That produced two standing bugs: a white glyph on
+ * a light tile is invisible, and nobody could pick an icon by meaning because
+ * the names carried none.
+ *
+ * These are Lucide's single-colour stroke SVGs. `stroke="currentColor"` means
+ * the kit substitutes the theme's colour at build time, so polarity cannot be
+ * wrong. They go into the deck as vector — pptxgenjs writes the OOXML
+ * `asvg:svgBlip` extension with a raster fallback — so nothing is rasterised
+ * and the kit keeps needing no native dependency.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const DIR = path.join(__dirname, "..", "assets", "glyphs");
+let INDEX = null, BUNDLE = null;
+
+function index() {
+  if (!INDEX) INDEX = JSON.parse(fs.readFileSync(path.join(DIR, "index.json"), "utf8"));
+  return INDEX;
+}
+
+/**
+ * 75 SVGs is 75 files, and a packaged skill is capped at 200 of them. The
+ * packager collapses them into one `glyphs.json`; loose files still win when
+ * they are there, so the repo keeps its readable one-file-per-icon layout.
+ */
+function bundle() {
+  if (BUNDLE === null) {
+    const f = path.join(DIR, "glyphs.json");
+    BUNDLE = fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, "utf8")) : false;
+  }
+  return BUNDLE;
+}
+
+/** The raw SVG source for a glyph. */
+function svg(name) {
+  const b = bundle();
+  if (b && b[name]) return b[name];
+  return fs.readFileSync(path.join(DIR, name + ".svg"), "utf8");
+}
+
+/** Every glyph name, for validation and for `wand.js glyphs`. */
+const names = () => index().icons;
+const has = (name) => typeof name === "string" && index().icons.includes(name);
+
+const cache = new Map();
+
+/**
+ * A recoloured glyph as a data URI, ready for `addImage({ data })`.
+ * Returns null for anything that isn't a known glyph name, so callers can fall
+ * back to the legacy PNG path.
+ */
+function dataUri(name, color) {
+  if (!has(name)) return null;
+  const key = `${name}|${color}`;
+  if (cache.has(key)) return cache.get(key);
+  const src = svg(name).replace(/currentColor/g, "#" + String(color).replace(/^#/, ""));
+  const uri = "image/svg+xml;base64," + Buffer.from(src, "utf8").toString("base64");
+  cache.set(key, uri);
+  return uri;
+}
+
+/** Nearest names, for a useful error when someone mistypes one. */
+function suggest(name, n = 4) {
+  const q = String(name || "").toLowerCase();
+  return index().icons
+    .map((g) => [g, g.includes(q) || q.includes(g) ? 0 : distance(q, g)])
+    .sort((a, b) => a[1] - b[1]).slice(0, n).map((r) => r[0]);
+}
+
+function distance(a, b) {
+  const d = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+  for (let j = 0; j <= b.length; j++) d[0][j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    }
+  }
+  return d[a.length][b.length];
+}
+
+module.exports = { names, has, svg, dataUri, suggest, index, DIR };

package/lib/layouts_client.js

@@ -0,0 +1,212 @@
+/**
+ * lib/layouts_client.js — layouts a dense client deck needs and the earlier
+ * catalog had no answer to. Added for a dense banking client rebuild.
+ *
+ * Loaded and re-exported by wand_kit.js.
+ */
+
+module.exports = function attach(W) {
+  const { T, F, radius, theme, autoSize, contentTop,
+          background, chrome, footer, title, subtitle, kicker, card } = W;
+
+  const L = 0.37, WIDTH = 9.25, FLOOR = 4.96;
+
+  /** A small caps label. Returns the y to carry on from. */
+  function label(s, text, { x = L, y, w = WIDTH, dark, color }) {
+    if (!text) return y;
+    s.addText(String(text).toUpperCase(), {
+      x, y, w, h: 0.20, margin: 0, isTextBox: true,
+      fontFace: F.med, fontSize: 8, color: color || theme(dark).eyebrow, valign: "middle",
+    });
+    return y + 0.26;
+  }
+
+  /**
+   * stripGrid — a strip of figures, then a labelled column grid, then a closing
+   * prose band. Every part is optional except the geometry that ties them
+   * together, which is the point: a year page is stats over three columns, a
+   * results page is stats over one wide column, a memory page is four columns
+   * over a closing paragraph. One shape, not three layouts.
+   *
+   * stats:   [{ value, label, note }]              up to 6, across the top
+   * lead:    { label, text }                       a full-width statement
+   * columns: [{ label, items: [{ title, body }] }] up to 4
+   * close:   { label, body }                       a full-width closing band
+   */
+  function stripGrid(pres, { tag, titleText, subtitleText, stats, lead, columns, close,
+                             dark = true, deck, n, total }) {
+    const s = pres.addSlide();
+    background(s, dark);
+    chrome(s, { tag, dark });
+    title(s, titleText, { dark, y: 0.62, h: 0.5 });
+    if (subtitleText) subtitle(s, subtitleText, { dark, y: 1.14, h: 0.44 });
+    const th = theme(dark);
+    let y = contentTop(titleText, subtitleText, { titleY: 0.62, gap: 0.26 });
+
+    // reserve from the bottom up, so the grid takes whatever is left
+    const closeH = close ? (close.label ? 0.26 : 0) + 0.72 : 0;
+    const closeY = FLOOR - closeH;
+
+    const st = (stats || []).slice(0, 6);
+    if (st.length) {
+      const noted = st.some((v) => v.note);
+      const h = noted ? 1.06 : 0.74;
+      const cw = (WIDTH - 0.18 * (st.length - 1)) / st.length;
+      st.forEach((v, i) => {
+        const x = L + i * (cw + 0.18);
+        card(s, { x, y, w: cw, h, dark });
+        // a "value" is usually a figure but sometimes a phrase — "Weeks, not
+        // quarters" has to be allowed to wrap and shrink like any other text
+        const vh = v.note ? 0.38 : 0.42;
+        s.addText(String(v.value), {
+          x: x + 0.16, y: y + 0.10, w: cw - 0.32, h: vh, margin: 0, isTextBox: true,
+          fontFace: F.semi,
+          fontSize: autoSize(String(v.value), cw - 0.32, vh, { family: F.semi, fontSize: 21, min: 8, lineSpacingMultiple: 1.15 }),
+          color: T.accent, valign: "middle", lineSpacingMultiple: 1.15,
+        });
+        const labelH = noted ? 0.22 : 0.26;
+        if (v.label) s.addText(v.label, {
+          x: x + 0.16, y: y + (noted ? 0.50 : 0.56), w: cw - 0.32, h: labelH, margin: 0, isTextBox: true,
+          fontFace: F.med,
+          fontSize: autoSize(v.label, cw - 0.32, labelH, { family: F.med, fontSize: 7.5, min: 6, lineSpacingMultiple: 1.15 }),
+          color: th.body, valign: "top", lineSpacingMultiple: 1.15,
+        });
+        if (v.note) s.addText(v.note, {
+          x: x + 0.16, y: y + 0.72, w: cw - 0.32, h: 0.30, margin: 0, isTextBox: true,
+          fontFace: F.reg,
+          fontSize: autoSize(v.note, cw - 0.32, 0.30, { family: F.reg, fontSize: 7, min: 5.5, lineSpacingMultiple: 1.2 }),
+          color: th.body, valign: "top", lineSpacingMultiple: 1.2,
+        });
+      });
+      y += h + 0.24;
+    }
+
+    if (lead) {
+      y = label(s, lead.label, { y, dark });
+      if (lead.text) {
+        const h = 0.42;
+        s.addText(lead.text, {
+          x: L, y, w: WIDTH, h, margin: 0, isTextBox: true,
+          fontFace: F.semi,
+          fontSize: autoSize(lead.text, WIDTH, h, { family: F.semi, fontSize: 14, min: 11, lineSpacingMultiple: 1.2 }),
+          color: th.ink, valign: "middle", lineSpacingMultiple: 1.2,
+        });
+        y += h + 0.18;
+      }
+    }
+
+    const cols = (columns || []).slice(0, 4);
+    if (cols.length) {
+      const cw = (WIDTH - 0.24 * (cols.length - 1)) / cols.length;
+      const bottom = closeY - (close ? 0.22 : 0);
+      cols.forEach((c, i) => {
+        const x = L + i * (cw + 0.24);
+        const cy = label(s, c.label, { x, y, w: cw, dark, color: T.accent });
+        const items = (c.items || []).slice(0, 6);
+        if (!items.length) return;
+        const ih = (bottom - cy - 0.12 * (items.length - 1)) / items.length;
+        items.forEach((it, j) => {
+          const iy = cy + j * (ih + 0.12);
+          card(s, { x, y: iy, w: cw, h: ih, dark });
+          // one measurement for the whole row: a title and its body share the
+          // box, so sizing them independently is how a card silently overflows
+          const whole = (it.title ? it.title + "  " : "") + (it.body || "");
+          // measure in the widest face the row actually uses: a title run is
+          // SemiBold, and sizing it against Regular is how a card overflows by 0.08"
+          const pt = autoSize(whole, cw - 0.36, ih,
+                              { family: it.title ? F.semi : F.reg, fontSize: 8.5, min: 6, lineSpacingMultiple: 1.25 });
+          const runs = it.title
+            ? [{ text: it.title + (it.body ? "  " : ""), options: { fontFace: F.semi, fontSize: pt, color: th.ink } },
+               { text: it.body || "", options: { fontFace: F.reg, fontSize: pt, color: th.body } }]
+            : [{ text: it.body || "", options: { fontFace: F.reg, fontSize: pt, color: th.body } }];
+          s.addText(runs, {
+            x: x + 0.18, y: iy, w: cw - 0.36, h: ih, margin: 0, isTextBox: true,
+            valign: "middle", lineSpacingMultiple: 1.25,
+          });
+        });
+      });
+    }
+
+    if (close) {
+      let cy = label(s, close.label, { y: closeY, dark });
+      s.addText(close.body, {
+        x: L, y: cy, w: WIDTH, h: FLOOR - cy, margin: 0, isTextBox: true,
+        fontFace: F.reg,
+        fontSize: autoSize(close.body, WIDTH, FLOOR - cy, { family: F.reg, fontSize: 10.5, min: 8, lineSpacingMultiple: 1.35 }),
+        color: th.body, valign: "top", lineSpacingMultiple: 1.35,
+      });
+    }
+
+    if (deck) footer(s, { deck, n, total, dark });
+    return s;
+  }
+
+  /**
+   * compareGrid — a comparison wider than `compareTable` can carry: up to three
+   * headed columns over up to six labelled rows, with an optional second line
+   * per cell. The last column is ours and is tinted.
+   *
+   * heads: ["BEFORE", "AFTER", "WHY ONLY WAND"]        optional
+   * rows:  [{ label, cells: [{ lead, body }] }]
+   */
+  function compareGrid(pres, { tag, titleText, subtitleText, heads, rows,
+                               dark = false, deck, n, total }) {
+    const s = pres.addSlide();
+    background(s, dark);
+    chrome(s, { tag, dark });
+    title(s, titleText, { dark, y: 0.62, h: 0.5 });
+    if (subtitleText) subtitle(s, subtitleText, { dark, y: 1.14, h: 0.44 });
+    const th = theme(dark);
+    let y = contentTop(titleText, subtitleText, { titleY: 0.62, gap: 0.26 });
+
+    const rs = rows.slice(0, 6);
+    const cols = Math.min(3, Math.max(...rs.map((r) => r.cells.length)));
+    const labelW = rs.some((r) => r.label) ? 1.05 : 0;
+    const gap = 0.16;
+    const cw = (WIDTH - labelW - gap * cols) / cols;
+
+    const heading = (heads || []).slice(0, cols);
+    if (heading.length) {
+      heading.forEach((h, i) => {
+        s.addText(String(h).toUpperCase(), {
+          x: L + labelW + i * (cw + gap), y, w: cw, h: 0.20, margin: 0, isTextBox: true,
+          fontFace: F.med, fontSize: 8,
+          color: i === cols - 1 ? T.accent : th.eyebrow, valign: "middle",
+        });
+      });
+      y += 0.28;
+    }
+
+    const rh = (FLOOR - y - 0.10 * (rs.length - 1)) / rs.length;
+    rs.forEach((r, i) => {
+      const ry = y + i * (rh + 0.10);
+      if (labelW) s.addText(r.label, {
+        x: L, y: ry, w: labelW - 0.12, h: rh, margin: 0, isTextBox: true,
+        fontFace: F.semi, fontSize: 8, color: th.ink, valign: "middle", lineSpacingMultiple: 1.2,
+      });
+      r.cells.slice(0, cols).forEach((c, j) => {
+        const x = L + labelW + j * (cw + gap);
+        const ours = j === cols - 1;
+        card(s, { x, y: ry, w: cw, h: rh, dark, variant: ours ? "emph" : "glass" });
+        const ink = ours ? T.white : th.ink;
+        const body = ours ? T.accentPale : th.body;
+        const whole = (c.lead ? c.lead + "  " : "") + (c.body || "");
+        const pt = autoSize(whole, cw - 0.32, rh,
+                            { family: c.lead ? F.semi : F.reg, fontSize: 8, min: 6, lineSpacingMultiple: 1.25 });
+        const runs = [];
+        if (c.lead) runs.push({ text: c.lead + (c.body ? "  " : ""), options: { fontFace: F.semi, fontSize: pt, color: ink } });
+        if (c.body) runs.push({ text: c.body, options: { fontFace: F.reg, fontSize: pt, color: c.lead ? body : (ours ? T.white : th.body) } });
+        s.addText(runs.length ? runs : " ", {
+          x: x + 0.16, y: ry, w: cw - 0.32, h: rh, margin: 0, isTextBox: true,
+          valign: "middle", lineSpacingMultiple: 1.25,
+        });
+      });
+    });
+
+    if (deck) footer(s, { deck, n, total, dark });
+    return s;
+  }
+
+  Object.assign(W, { stripGrid, compareGrid });
+  return W;
+};

package/lib/layouts_consult.js

@@ -0,0 +1,301 @@
+/**
+ * lib/layouts_consult.js — layouts that consulting and client decks reach for
+ * and the investor-deck catalog has no answer to.
+ *
+ * Loaded and re-exported by wand_kit.js.
+ */
+
+module.exports = function attach(W) {
+  const { T, F, COLS, radius, theme, autoSize, contentTop,
+          background, chrome, footer, title, subtitle, kicker,
+          card, iconTile, pill } = W;
+
+  /**
+   * problemGrid — a strip of "today's reality" chips, then a grid of the
+   * problems that reality creates. The canonical challenge slide.
+   * strip: { label, chips: [{ title, body }] }
+   * problems: { label, items: [{ title, body }] }
+   */
+  function problemGrid(pres, { tag, titleText, subtitleText, strip, problems, dark = true, deck, n, total }) {
+    const s = pres.addSlide();
+    background(s, dark);
+    chrome(s, { tag, dark });
+    title(s, titleText, { dark, y: 0.62, h: 0.5 });
+    if (subtitleText) subtitle(s, subtitleText, { dark, y: 1.14, h: 0.32 });
+    const th = theme(dark);
+    const L = 0.37, WIDTH = 9.25;
+    let y = contentTop(titleText, subtitleText, { titleY: 0.62, gap: 0.28 });
+
+    if (strip.label) {
+      s.addText(strip.label.toUpperCase(), {
+        x: L, y, w: 3.0, h: 0.20, margin: 0, isTextBox: true,
+        fontFace: F.med, fontSize: 8, color: th.eyebrow, valign: "middle",
+      });
+      y += 0.26;
+    }
+    const chips = strip.chips.slice(0, 4);
+    const cw = (WIDTH - 0.22 * (chips.length - 1)) / chips.length;
+    chips.forEach((c, i) => {
+      const x = L + i * (cw + 0.22);
+      card(s, { x, y, w: cw, h: 0.78, dark, variant: "muted" });
+      s.addText(c.title, {
+        x: x + 0.18, y: y + 0.12, w: cw - 0.36, h: 0.26, margin: 0, isTextBox: true,
+        fontFace: F.semi,
+        fontSize: autoSize(c.title, cw - 0.36, 0.26, { family: F.semi, fontSize: 11, min: 9 }),
+        color: th.ink, valign: "middle",
+      });
+      s.addText(c.body, {
+        x: x + 0.18, y: y + 0.40, w: cw - 0.36, h: 0.26, margin: 0, isTextBox: true,
+        fontFace: F.reg, fontSize: 8.5, color: th.body, valign: "middle",
+      });
+    });
+    y += 1.04;
+
+    if (problems.label) {
+      s.addText(problems.label.toUpperCase(), {
+        x: L, y, w: 3.0, h: 0.20, margin: 0, isTextBox: true,
+        fontFace: F.med, fontSize: 8, color: T.accent, valign: "middle",
+      });
+      y += 0.26;
+    }
+    const items = problems.items.slice(0, 4);
+    const rows = Math.ceil(items.length / 2);
+    const ph = Math.min(0.92, (4.98 - y - 0.16 * (rows - 1)) / rows);
+    items.forEach((it, i) => {
+      const x = i % 2 ? 5.13 : L, py = y + Math.floor(i / 2) * (ph + 0.16);
+      card(s, { x, y: py, w: 4.49, h: ph, dark });
+      s.addText([
+        { text: it.title + " — ", options: { fontFace: F.semi, fontSize: 10.5, color: T.accent } },
+        { text: it.body,          options: { fontFace: F.reg,  fontSize: 9.5, color: th.body } },
+      ], { x: x + 0.20, y: py, w: 4.09, h: ph, margin: 0, isTextBox: true,
+           valign: "middle", lineSpacingMultiple: 1.3 });
+    });
+    if (deck) footer(s, { deck, n, total, dark });
+    return s;
+  }
+
+  /**
+   * splitPanel — a prose panel on one side, a list of labelled rows on the
+   * other. For "why this fits / what it gives you" pillar slides where one half
+   * is argument and the other is evidence.
+   * left:  { eyebrow, heading, body, note }
+   * right: { eyebrow, heading, items: [{ label, body }] }
+   */
+  function splitPanel(pres, { tag, titleText, subtitleText, left, right, dark = true, deck, n, total }) {
+    const s = pres.addSlide();
+    background(s, dark);
+    chrome(s, { tag, dark });
+    title(s, titleText, { dark, y: 0.62, h: 0.5 });
+    if (subtitleText) subtitle(s, subtitleText, { dark, y: 1.14, h: 0.44 });
+    const th = theme(dark);
+    const top = contentTop(titleText, subtitleText, { titleY: 0.62, gap: 0.28 });
+    const h = 4.96 - top;
+
+    // left: argument
+    card(s, { x: 0.37, y: top, w: 4.25, h, dark, variant: "emph" });
+    let ly = top + 0.24;
+    if (left.eyebrow) {
+      s.addText(left.eyebrow.toUpperCase(), {
+        x: 0.61, y: ly, w: 3.77, h: 0.20, margin: 0, isTextBox: true,
+        fontFace: F.med, fontSize: 8, color: T.accentPale, valign: "middle",
+      });
+      ly += 0.26;
+    }
+    s.addText(left.heading, {
+      x: 0.61, y: ly, w: 3.77, h: 0.56, margin: 0, isTextBox: true,
+      fontFace: F.semi,
+      fontSize: autoSize(left.heading, 3.77, 0.56, { family: F.semi, fontSize: 15, min: 12, lineSpacingMultiple: 1.15 }),
+      color: T.white, valign: "top", lineSpacingMultiple: 1.15,
+    });
+    ly += 0.66;
+    const noteH = left.note ? 0.62 : 0;
+    s.addText(left.body, {
+      x: 0.61, y: ly, w: 3.77, h: top + h - ly - noteH - 0.24, margin: 0, isTextBox: true,
+      fontFace: F.reg, fontSize: 9, color: T.bodyDarkAlt, valign: "top", lineSpacingMultiple: 1.3,
+    });
+    if (left.note) s.addText(left.note, {
+      x: 0.61, y: top + h - noteH - 0.14, w: 3.77, h: noteH, margin: 0, isTextBox: true,
+      fontFace: F.med, fontSize: 8.5, italic: true, color: T.accentSoft, valign: "top", lineSpacingMultiple: 1.25,
+    });
+
+    // right: evidence rows
+    let ry = top;
+    if (right.eyebrow) {
+      s.addText(right.eyebrow.toUpperCase(), {
+        x: 5.38, y: ry, w: 4.25, h: 0.20, margin: 0, isTextBox: true,
+        fontFace: F.med, fontSize: 8, color: T.accent, valign: "middle",
+      });
+      ry += 0.24;
+    }
+    if (right.heading) {
+      s.addText(right.heading, {
+        x: 5.38, y: ry, w: 4.25, h: 0.32, margin: 0, isTextBox: true,
+        fontFace: F.semi, fontSize: 13, color: th.ink, valign: "middle",
+      });
+      ry += 0.40;
+    }
+    const items = right.items.slice(0, 4);
+    const rh = (top + h - ry - 0.14 * (items.length - 1)) / items.length;
+    items.forEach((it, i) => {
+      const y = ry + i * (rh + 0.14);
+      card(s, { x: 5.38, y, w: 4.25, h: rh, dark });
+      if (it.label) {
+        s.addText([
+          { text: it.label + " — ", options: { fontFace: F.semi, fontSize: 9, color: th.ink } },
+          { text: it.body,          options: { fontFace: F.reg,  fontSize: 9, color: th.body } },
+        ], { x: 5.60, y, w: 3.81, h: rh, margin: 0, isTextBox: true,
+             valign: "middle", lineSpacingMultiple: 1.25 });
+      } else {
+        s.addText(it.body, {
+          x: 5.60, y, w: 3.81, h: rh, margin: 0, isTextBox: true,
+          fontFace: F.reg, fontSize: 9, color: th.body, valign: "middle", lineSpacingMultiple: 1.25,
+        });
+      }
+    });
+    if (deck) footer(s, { deck, n, total, dark });
+    return s;
+  }
+
+  /**
+   * compareTable — reason cards on top, then a labelled two-column comparison.
+   * The right column is ours and is tinted; the left is the status quo.
+   * reasons: [{ title, body }]
+   * table: { leftHead, rightHead, rows: [{ label, left, right }] }
+   */
+  function compareTable(pres, { tag, titleText, subtitleText, reasons, table, dark = false, deck, n, total }) {
+    const s = pres.addSlide();
+    background(s, dark);
+    chrome(s, { tag, dark });
+    title(s, titleText, { dark, y: 0.62, h: 0.46 });
+    if (subtitleText) subtitle(s, subtitleText, { dark, y: 1.12, h: 0.30 });
+    const th = theme(dark);
+    const L = 0.37, WIDTH = 9.25;
+    let y = contentTop(titleText, subtitleText, { titleY: 0.62, gap: 0.26 });
+
+    const r = reasons.slice(0, 3);
+    const rw = (WIDTH - 0.22 * (r.length - 1)) / r.length;
+    const rh = 1.32;
+    r.forEach((it, i) => {
+      const x = L + i * (rw + 0.22);
+      card(s, { x, y, w: rw, h: rh, dark, variant: i === 0 ? "emph" : "glass" });
+      const ink = i === 0 ? T.white : th.ink;
+      s.addText(it.title, {
+        x: x + 0.20, y: y + 0.14, w: rw - 0.40, h: 0.28, margin: 0, isTextBox: true,
+        fontFace: F.semi,
+        fontSize: autoSize(it.title, rw - 0.40, 0.28, { family: F.semi, fontSize: 11.5, min: 9.5 }),
+        color: ink, valign: "middle",
+      });
+      s.addText(it.body, {
+        x: x + 0.20, y: y + 0.46, w: rw - 0.40, h: rh - 0.60, margin: 0, isTextBox: true,
+        fontFace: F.reg, fontSize: 8, color: i === 0 ? T.bodyDarkAlt : th.body,
+        valign: "top", lineSpacingMultiple: 1.25,
+      });
+    });
+    y += rh + 0.30;
+
+    // table header
+    const LAB = 1.55, COL = (WIDTH - LAB - 0.18) / 2;
+    s.addText(table.leftHead.toUpperCase(), {
+      x: L + LAB, y, w: COL, h: 0.24, margin: 0, isTextBox: true,
+      fontFace: F.med, fontSize: 8, color: th.body, valign: "middle",
+    });
+    s.addText(table.rightHead.toUpperCase(), {
+      x: L + LAB + COL + 0.18, y, w: COL, h: 0.24, margin: 0, isTextBox: true,
+      fontFace: F.semi, fontSize: 8, color: T.accent, valign: "middle",
+    });
+    y += 0.28;
+
+    const rows = table.rows.slice(0, 4);
+    const trh = Math.min(0.50, (4.96 - y - 0.10 * (rows.length - 1)) / rows.length);
+    rows.forEach((row, i) => {
+      const ry = y + i * (trh + 0.10);
+      s.addText(row.label, {
+        x: L, y: ry, w: LAB - 0.14, h: trh, margin: 0, isTextBox: true,
+        fontFace: F.semi, fontSize: 9, color: th.ink, valign: "middle",
+      });
+      s.addShape("roundRect", {
+        x: L + LAB, y: ry, w: COL, h: trh, rectRadius: radius(COL, trh),
+        fill: { color: dark ? T.cardMuted : T.surface }, line: { width: 0 },
+      });
+      s.addText(row.left, {
+        x: L + LAB + 0.18, y: ry, w: COL - 0.36, h: trh, margin: 0, isTextBox: true,
+        fontFace: F.reg, fontSize: 8.5, color: th.body, valign: "middle",
+      });
+      const rx = L + LAB + COL + 0.18;
+      s.addShape("roundRect", {
+        x: rx, y: ry, w: COL, h: trh, rectRadius: radius(COL, trh),
+        fill: dark ? { color: T.cardEmphFlat } : { color: "9481FF", transparency: 88 },
+        line: { color: T.accent, width: 0.75 },
+      });
+      s.addText(row.right, {
+        x: rx + 0.18, y: ry, w: COL - 0.36, h: trh, margin: 0, isTextBox: true,
+        fontFace: F.semi, fontSize: 8.5, color: dark ? T.white : T.accentDeep, valign: "middle",
+      });
+    });
+    if (deck) footer(s, { deck, n, total, dark });
+    return s;
+  }
+
+  /**
+   * L12 numberedList — numbered rows in one or two columns, with an optional
+   * closing statement band. For agendas, asks, and "what we'll cover" slides.
+   * items: [{ title, body }]
+   * closing: { line1, line2 }
+   */
+  function numberedList(pres, { tag, titleText, subtitleText, items, closing, signoff, columns = 1, dark = true, deck, n, total }) {
+    const s = pres.addSlide();
+    background(s, dark);
+    chrome(s, { tag, dark });
+    title(s, titleText, { dark, y: 0.62, h: 0.46 });
+    if (subtitleText) subtitle(s, subtitleText, { dark, y: 1.12, h: 0.36 });
+    const th = theme(dark);
+    const top = contentTop(titleText, subtitleText, { titleY: 0.62, gap: 0.26 });
+    const closeH = closing ? 0.62 : 0;
+    const signH = signoff ? 0.24 : 0;
+    const list = items.slice(0, 6);
+    const perCol = Math.ceil(list.length / columns);
+    const colW = columns === 2 ? 4.49 : 9.25;
+    const avail = 4.96 - top - closeH - signH - (closing ? 0.22 : 0);
+    const GAP = 0.10;
+    const rh = Math.max(0.32, Math.min(0.72, (avail - GAP * (perCol - 1)) / perCol));
+
+    list.forEach((it, i) => {
+      const c = Math.floor(i / perCol), r = i % perCol;
+      const x = 0.37 + c * (colW + 0.27);
+      const y = top + r * (rh + GAP);
+      card(s, { x, y, w: colW, h: rh, dark });
+      s.addText(String(i + 1), {
+        x: x + 0.20, y, w: 0.34, h: rh, margin: 0, isTextBox: true,
+        fontFace: F.xbold, fontSize: 14, color: T.accent, valign: "middle",
+      });
+      s.addText([
+        ...(it.title ? [{ text: it.title + "   ", options: { fontFace: F.semi, fontSize: 10, color: th.ink } }] : []),
+        { text: it.body,          options: { fontFace: F.reg,  fontSize: 9,  color: th.body } },
+      ], { x: x + 0.62, y, w: colW - 0.86, h: rh, margin: 0, isTextBox: true,
+           valign: "middle", lineSpacingMultiple: 1.25 });
+    });
+
+    if (closing) {
+      const cy = 4.96 - closeH - signH;
+      s.addShape("roundRect", {
+        x: 0.37, y: cy, w: 9.25, h: closeH, rectRadius: radius(9.25, closeH),
+        fill: { color: dark ? T.cardEmphFlat : T.surface },
+        line: { color: T.accent, width: 1 },
+      });
+      s.addText([
+        { text: closing.line1 + "  ", options: { fontFace: F.semi, fontSize: 13, color: dark ? T.bodyDark : T.bodyLight } },
+        { text: closing.line2, options: { fontFace: F.semi, fontSize: 13, italic: true, color: T.accent } },
+      ], { x: 0.37, y: cy, w: 9.25, h: closeH, margin: 0, isTextBox: true, align: "center", valign: "middle" });
+    }
+    if (signoff) s.addText(signoff, {
+      x: 0.37, y: 4.96 - signH, w: 9.25, h: signH, margin: 0, isTextBox: true,
+      fontFace: F.reg, fontSize: 9.5, italic: true, color: theme(dark).body,
+      align: "center", valign: "middle",
+    });
+    if (deck) footer(s, { deck, n, total, dark });
+    return s;
+  }
+
+  Object.assign(W, { problemGrid, splitPanel, compareTable, numberedList });
+  return W;
+};