wand-decks-kit 0.8.0

package/lib/plan.js

@@ -0,0 +1,305 @@
+/**
+ * lib/plan.js — Phase 2 + 3, as a worksheet.
+ *
+ * The step that actually fails on a rebuild is not the build. It is mapping a
+ * source slide onto a layout and then remembering every field that layout
+ * needs. `deck.skeleton.json` used to say `"layout": "TODO"` and leave both to
+ * memory, which is how a spec ends up paraphrased and three fields short.
+ *
+ * This reads `analysis.json` and writes, per slide: what the source slide
+ * actually is (frame geometry and point sizes, not word counts), ranked layout
+ * candidates with the reason for each, the verbatim strings already sorted into
+ * tag / title / subtitle / body, and a stub carrying that layout's required
+ * fields. Filling it in is then transcription, not recall.
+ *
+ * The ranking is a suggestion and says so. The operator overrules it; §6
+ * Phase 3 is still the rule.
+ */
+
+const { LAYOUTS, stub } = require("./schema");
+
+const round = (n, p = 1) => Math.round(n * 10 ** p) / 10 ** p;
+
+/**
+ * Is a background dark? Testing for Wand's own `0F0C26` was wrong the first time
+ * it met a deck built by someone else, whose background was `1A0B3D` - every slide
+ * came back light. Measure the luminance instead.
+ */
+function isDark(hex) {
+  const n = parseInt(String(hex).replace(/^#/, ""), 16);
+  if (!Number.isFinite(n)) return false;
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 110;
+}
+const isNumeric = (s) => /[\d%$€£]/.test(s) && s.replace(/[^\w]/g, "").length <= 12;
+// "01" is an ordinal, not a statistic. Without this every numbered-card slide
+// scores as a stat grid, because both are short digit strings in small frames.
+const isOrdinal = (s) => /^0?[1-9]\d?[.)]?$/.test(s.trim());
+
+/** 1-D clustering with a tolerance, so "same column" survives a 0.02" nudge. */
+function cluster(values, tol) {
+  const sorted = [...values].sort((a, b) => a - b);
+  const groups = [];
+  for (const v of sorted) {
+    const g = groups[groups.length - 1];
+    if (g && v - g[g.length - 1] <= tol) g.push(v);
+    else groups.push([v]);
+  }
+  return groups;
+}
+const clusterIndex = (groups, v) => groups.findIndex((g) => g.includes(v));
+
+/** Sort a slide's text frames into the chrome roles the grid defines (§1). */
+function roles(frames) {
+  const withBox = frames.filter((f) => f.box);
+  // The footer band is chrome; small type above it is not. Filtering on point
+  // size as well dropped nine 6pt content labels on a real deck - "YEAR-END KPI",
+  // "REPLACED BY" - which are content, and coverage found them three steps
+  // later. Position decides; size never did.
+  const content = withBox.filter((f) => f.box[1] < 5.15);
+  const tag = content.find((f) => f.box[1] < 0.45 && (f.pt || 99) <= 9);
+  const rest = content.filter((f) => f !== tag);
+
+  // The title is the largest type *in the title band*, not the largest type on
+  // the slide: a numbered-card slide sets its ordinals at 30pt and would
+  // otherwise steal the role, leaving the real title in the body.
+  const band = rest.filter((f) => f.box[1] < 1.6 && (f.pt || 0) >= 16);
+  const title = band.sort((a, b) => (b.pt || 0) - (a.pt || 0) || a.box[1] - b.box[1])[0] || null;
+  const body = rest.filter((f) => f !== title);
+  let subtitle = null;
+  for (let i = 0; i < body.length; i++) {
+    const f = body[i];
+    if (title && f.box[1] > title.box[1] && f.box[1] < title.box[1] + 1.2 &&
+        f.box[2] > 5 && (f.pt || 0) >= 10 && (f.pt || 0) < (title.pt || 99)) {
+      subtitle = body.splice(i, 1)[0];
+      break;
+    }
+  }
+  const chrome = withBox.filter((f) => f.box[1] >= 5.15);
+  return { tag, title, subtitle, body, chrome };
+}
+
+/**
+ * Card counting, not frame counting. A Wand card is a rounded rect plus a title
+ * frame plus a body frame, stacked in one column — so "20 text frames" is four
+ * cards, and every count downstream is wrong if you skip this step.
+ *
+ * Cluster the body frames into columns, then split each column at vertical gaps.
+ * Each run is one card. That is the number the layout catalog is indexed on.
+ */
+function signals(slide, index, total) {
+  const r = roles(slide.frames);
+  const body = r.body;
+
+  const xs = cluster(body.map((f) => f.box[0]), 0.35);
+  const cols = xs.length;
+
+  let cards = 0;
+  const perCol = [];
+  for (const col of xs) {
+    const inCol = body.filter((f) => col.includes(f.box[0])).sort((a, b) => a.box[1] - b.box[1]);
+    let groups = inCol.length ? 1 : 0;
+    for (let i = 1; i < inCol.length; i++) {
+      const prevBottom = inCol[i - 1].box[1] + inCol[i - 1].box[3];
+      if (inCol[i].box[1] - prevBottom > 0.22) groups++;
+    }
+    perCol.push(groups);
+    cards += groups;
+  }
+  const bands = Math.max(...perCol, 0);
+
+  // a figure is a short digit-led string sitting alone in its frame — "72%", "$4.2B"
+  const ordinals = body.filter((f) => f.paras.length === 1 && isOrdinal(f.paras[0])).length;
+  const numeric = body.filter((f) => f.paras.length === 1 && isNumeric(f.paras[0]) && !isOrdinal(f.paras[0])).length;
+  const bullets = body.filter((f) => f.paras.length >= 3).length;
+  const fullWidth = body.filter((f) => f.box[2] > 8).length;
+
+  return {
+    ...r,
+    cols, bands, cards, numeric, ordinals, bullets, fullWidth,
+    first: index === 1, last: index === total,
+    words: body.reduce((n, f) => n + f.paras.join(" ").split(/\s+/).length, 0),
+    frames: body.length,
+  };
+}
+
+/**
+ * Shortlist layouts for one slide from its shape alone.
+ *
+ * Shape is a real signal — six cards in three columns over two bands is a
+ * sixUpIcon and almost nothing else — but it cannot see meaning, and meaning is
+ * what §6 Phase 3 actually orders on. So this returns a shortlist with the
+ * reason for each entry, never a decision. Read the verbatim text, then choose.
+ *
+ * Tuned against one 15-slide deck. Treat a confident single answer with
+ * suspicion until it has been run over more.
+ */
+function rank(sg) {
+  const out = [];
+  const add = (layout, score, why) => out.push({ layout, score, why });
+  const { cards, cols, bands, numeric, ordinals, bullets, fullWidth: fw, words } = sg;
+
+  if (sg.first) return [{ layout: "cover", score: 100, why: "slide 1" }];
+  if (sg.last && cards <= 2 && words < 60) add("closing", 92, "last slide, little content");
+  if (sg.frames <= 2 && (sg.title?.pt || 0) >= 30) add("divider", 90, `one ${sg.title.pt}pt line, nothing else`);
+
+  // stacked full-width rows — the list shapes
+  if (ordinals >= 2) {
+    if (fw >= 3) add("numberedList", 80, `${ordinals} ordinals down full-width rows`);
+    if (cards >= 2 && cards <= 4) add("numberedCards", 80, `${ordinals} ordinals, ${cards} cards`);
+    add("phaseCards", 56, `${ordinals} ordinals — a numbered roadmap?`);
+  }
+  if (fw >= 4) {
+    add("numberedList", 74, `${fw} full-width rows stacked`);
+    add("rows", 62, `${fw} full-width rows — a stack / ownership table?`);
+  }
+  // two columns, one card each: the argument|evidence shapes
+  if (cols === 2 && cards <= 3 && fw < 4) {
+    add("splitPanel", 72, "two columns, one panel each");
+    add("parity", 60, "two columns — list-shaped comparison?");
+    add("compareTable", 56, "two columns — a comparison table?");
+  }
+  // a full grid
+  if (cols >= 3 && bands >= 3 && cards >= 9) add("matrixGrid", 78, `${cols} columns x ${bands} deep = ${cards} cells`);
+  if (cols === 3 && bands === 2 && cards >= 5 && cards <= 7) add("sixUpIcon", 76, `${cards} cards, 3 across 2 bands`);
+  if (cols === 4 && bands === 2 && cards >= 7) add("matrixGrid", 66, `${cards} cells in 4 columns`);
+  if (cols >= 3 && bands === 1 && cards === 4) add("fourUpIcon", 68, "4 cards in one band");
+
+  // bullet-carrying cards
+  if (bullets >= 3 && cols >= 4) add("phaseCards", 74, `${cards} columns, each with a bullet list`);
+  if (bullets >= 2 && cols <= 3 && cards <= 3) add("colCards", 72, `${cards} columns with prose and bullets`);
+  if (bullets >= 2 && cols >= 5) add("productMap", 58, "rail-labelled architecture?");
+
+  // full-width bands top and bottom with a module row between
+  if (fw >= 2 && cols >= 4 && fw < 4) {
+    add("archStack", 70, `${fw} full-width bands over a ${cards}-module row`);
+    add("productMap", 52, "rail-labelled architecture?");
+  }
+
+  if (numeric >= 3) {
+    if (fw >= 2) add("logoBands", 66, `${numeric} figures over full-width name rows`);
+    if (cards >= 4 && cards <= 6) add("statGrid", 64, `${numeric} figures, ${cards} cards`);
+    if (cards <= 4) add("statQuad", 62, `${numeric} standalone figures`);
+    if (cards === 4 || cards === 5) add("heroQuad", 50, "one headline figure over a 2x2?");
+    add("barRank", 46, "ranked magnitudes?");
+  }
+
+  if (cards >= 5 && cards <= 8 && cols >= 4) {
+    add("problemGrid", 54, "a strip of chips, then the problems?");
+    add("compareTable", 48, "reason cards over a comparison?");
+  }
+  if (cards >= 2 && cards <= 3) {
+    add("numberedCards", 52, `${cards} cards — ordinal-led?`);
+    add("threeUp", 50, `${cards} comparable cards`);
+  }
+  if (cards >= 3 && cards <= 5 && cols <= 2) add("rows", 48, `${cards} stacked rows`);
+  if (cards <= 2 && words < 45) add("band", 44, "one short assertion");
+
+  const best = {};
+  for (const c of out) if (!best[c.layout] || best[c.layout].score < c.score) best[c.layout] = c;
+  return Object.values(best).sort((a, b) => b.score - a.score);
+}
+
+const fence = "```";
+
+function worksheet(analysis) {
+  const slides = analysis.slides.filter((s) => !s.hidden);
+  const total = slides.length;
+  const L = [];
+
+  L.push(`# Mapping worksheet — ${analysis.source}`);
+  L.push("");
+  L.push(`Source canvas ${analysis.canvas[0]}" × ${analysis.canvas[1]}", scale ×${analysis.scale} onto the Wand grid.`);
+  L.push(`${total} visible slides.`);
+  L.push("");
+  L.push("Candidates are ranked by shape, not by meaning — they are a starting point,");
+  L.push("not the decision. §6 Phase 3 is the rule: structural first, then quotes,");
+  L.push("timelines, data, comparisons, stacks, assertions, numbered asks, and only");
+  L.push("then item count. Vary the layouts and alternate dark/light.");
+  L.push("");
+  L.push("**Every string below is verbatim. Reflow it to fit; do not reword it.**");
+  L.push("");
+
+  const chosen = [];
+  slides.forEach((sl, i) => {
+    const sg = signals(sl, i + 1, total);
+    const cands = rank(sg).slice(0, 3);
+    chosen.push({ slide: sl.slide, cands, sg });
+
+    L.push(`## S${String(i + 1).padStart(2, "0")}  (source slide ${sl.slide})`);
+    L.push("");
+    L.push(`\`${sl.shapes} shapes · ${sl.pics} images · ${sl.frames.length} text frames · ` +
+           `${sg.cols} column${sg.cols === 1 ? "" : "s"} × ${sg.bands} deep` +
+           `${sg.repeat ? ` · ${sg.repeat} repeated blocks` : ""}${sg.numeric ? ` · ${sg.numeric} figures` : ""}\``);
+    L.push("");
+    L.push("| | |");
+    L.push("|---|---|");
+    L.push(`| tag | ${sg.tag ? esc(sg.tag.paras.join(" ")) : "—"} |`);
+    L.push(`| title | ${sg.title ? `${esc(sg.title.paras.join(" \\n "))} *(${sg.title.pt}pt)* ` : "—"} |`);
+    L.push(`| subtitle | ${sg.subtitle ? esc(sg.subtitle.paras.join(" ")) : "—"} |`);
+    L.push("");
+    L.push(`**candidates** — ${cands.map((c) => `\`${c.layout}\` (${c.why})`).join(" · ") || "none scored; choose by §6 Phase 3"}`);
+    L.push("");
+    if (sg.chrome.length) {
+      L.push("<details><summary>footer band — usually chrome, check before dropping</summary>");
+      L.push("");
+      for (const f of sg.chrome) L.push(`- \`y${f.box[1]}${f.pt ? ` ${f.pt}pt` : ""}\`  ${esc(f.paras.join(" "))}`);
+      L.push("");
+      L.push("</details>");
+      L.push("");
+    }
+    if (sg.body.length) {
+      L.push("<details><summary>body frames, verbatim</summary>");
+      L.push("");
+      for (const f of sg.body) {
+        const b = f.box;
+        L.push(`- \`x${b[0]} y${b[1]} w${b[2]} h${b[3]}${f.pt ? ` ${f.pt}pt` : ""}\``);
+        for (const p of f.paras) L.push(`  - ${esc(p)}`);
+      }
+      L.push("");
+      L.push("</details>");
+      L.push("");
+    }
+    if (cands[0]) {
+      const st = stub(cands[0].layout) || {};
+      if (sg.tag) st.tag = sg.tag.paras.join(" ");
+      if (sg.title) st.titleText = sg.title.paras.join("\n");
+      if (sg.subtitle && "subtitleText" in st === false && !LAYOUTS[cands[0].layout].bleed) {
+        st.subtitleText = sg.subtitle.paras.join(" ");
+      }
+      // read from the source background where there is one; the fallback
+      // alternates, which is what §5 asks for anyway
+      st.dark = sl.bg ? isDark(sl.bg) : i % 2 === 0;
+      L.push(`<details><summary>stub for <code>${cands[0].layout}</code></summary>`);
+      L.push("");
+      L.push(fence + "json");
+      L.push(JSON.stringify(st, null, 2));
+      L.push(fence);
+      L.push("");
+      L.push("</details>");
+      L.push("");
+    }
+  });
+
+  L.push("---");
+  L.push("");
+  L.push("## Mapping plan — emit this before building (§6 Phase 3)");
+  L.push("");
+  L.push("Shortlist top pick and the source's own theme. Overrule both freely —");
+  L.push("this is the line you are supposed to argue with, not copy.");
+  L.push("");
+  L.push(fence);
+  chosen.forEach((c, i) => {
+    const th = slides[i].bg ? (isDark(slides[i].bg) ? "D" : "L") : (i % 2 === 0 ? "D" : "L");
+    L.push(`S${String(i + 1).padStart(2, "0")}  ${String(c.sg.cards).padStart(2)} cards  →  ` +
+           `${(c.cands[0] ? c.cands[0].layout : "?")}-${th}${c.cands[1] ? `   (or ${c.cands.slice(1).map((x) => x.layout).join(" / ")})` : ""}`);
+  });
+  L.push(fence);
+  return L.join("\n") + "\n";
+}
+
+function esc(s) {
+  return String(s).replace(/\|/g, "\\|").replace(/\n/g, " ⏎ ");
+}
+
+module.exports = { worksheet, signals, rank, roles };

package/lib/render_pdf.js

@@ -0,0 +1,203 @@
+/**
+ * lib/render_pdf.js — the same deck, as a PDF.
+ *
+ * It renders the *trace*, not the spec. `lib/trace.js` already records every
+ * draw call the real layout functions make, and the browser preview already
+ * proves that recording is complete. So a PDF renderer is a second consumer of
+ * that recording, not a second implementation of the layouts — which is the
+ * only reason it cannot drift from the .pptx.
+ *
+ *   spec ──▶ layouts ──▶ trace ──┬──▶ pptxgenjs   .pptx
+ *                                ├──▶ preview.js  the browser
+ *                                └──▶ this file   .pdf
+ *
+ * Two things it buys beyond a second format. Fonts are embedded, so a PDF looks
+ * right on a machine that has never heard of Geist. And it makes the visual gate
+ * runnable — `pdftoppm` turns it into an image per slide, which is the check the
+ * deck engine has never been able to run on itself.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const { Doc } = require("./shared").pdf;
+const M = require("./shared").measure;
+const brand = require("./brand");
+
+/** family + weight + slant -> the file the PDF writer embeds. */
+const FACE = {
+  "Geist":           { r: "Geist-Regular",   b: "Geist-Bold",       i: "Geist-Italic",          bi: "Geist-BoldItalic" },
+  "Geist Medium":    { r: "Geist-Medium",    b: "Geist-SemiBold",   i: "Geist-MediumItalic",    bi: "Geist-SemiBoldItalic" },
+  "Geist SemiBold":  { r: "Geist-SemiBold",  b: "Geist-ExtraBold",  i: "Geist-SemiBoldItalic",  bi: "Geist-ExtraBoldItalic" },
+  "Geist ExtraBold": { r: "Geist-ExtraBold", b: "Geist-ExtraBold",  i: "Geist-ExtraBoldItalic", bi: "Geist-ExtraBoldItalic" },
+  "Geist Light":     { r: "Geist-Light",     b: "Geist-Medium",     i: "Geist-LightItalic",     bi: "Geist-MediumItalic" },
+};
+const stemOf = (family, bold, italic) => {
+  const set = FACE[family] || FACE["Geist"];
+  return set[bold && italic ? "bi" : bold ? "b" : italic ? "i" : "r"];
+};
+
+/** A run's style, with the shape-level defaults filled in. */
+function styleOf(sh, run) {
+  const o = run.options || {};
+  const family = o.fontFace || sh.fontFace || "Geist";
+  const bold = o.bold ?? sh.bold ?? false;
+  const italic = o.italic ?? sh.italic ?? false;
+  return {
+    family, bold, italic,
+    stem: stemOf(family, bold, italic),
+    size: o.fontSize || sh.fontSize || 12,
+    color: (o.color || sh.color || "000000").replace(/^#/, ""),
+    bullet: !!o.bullet,
+    breakLine: !!o.breakLine,
+  };
+}
+
+/**
+ * Lay a shape's runs out into positioned lines.
+ *
+ * pptxgenjs wraps inside the box and centres vertically; this reproduces that
+ * closely enough that the two renderings agree, because both are measured
+ * against the same real font by `measure.js`.
+ */
+function layoutRuns(sh) {
+  const inset = sh.margin === 0 ? 0 : 0.05;
+  const boxW = Math.max(0.05, (sh.w || 0) - inset * 2);
+  const mult = sh.lineSpacingMultiple || 1.2;
+
+  const words = [];
+  for (const run of sh.runs) {
+    const st = styleOf(sh, run);
+    const text = String(run.text ?? "");
+    const segs = text.split("\n");
+    segs.forEach((seg, i) => {
+      if (i) words.push({ br: true });
+      if (st.bullet) words.push({ w: "▪ ", st, glue: true });
+      seg.split(/(\s+)/).filter((t) => t !== "").forEach((t) => words.push({ w: t, st }));
+    });
+    if (st.breakLine) words.push({ br: true });
+  }
+
+  const lines = [];
+  let cur = { parts: [], w: 0, size: 0 };
+  // A space at a wrap point is discarded, the way every text engine does it.
+  // Keeping it made a line measure one space wider than its box and report a
+  // 0.005in overflow that is not on the page — and it shifted centred lines.
+  const push = () => {
+    while (cur.parts.length && /^\s+$/.test(cur.parts[cur.parts.length - 1].text)) {
+      cur.w -= cur.parts.pop().w;
+    }
+    if (cur.parts.length) lines.push(cur);
+    cur = { parts: [], w: 0, size: 0 };
+  };
+  for (const t of words) {
+    if (t.br) { push(); continue; }
+    const tw = M.widthIn(t.w, { family: t.st.family, fontSize: t.st.size, bold: t.st.bold, italic: t.st.italic });
+    const blank = /^\s+$/.test(t.w);
+    if (!blank && cur.parts.length && cur.w + tw > boxW) push();
+    if (blank && !cur.parts.length) continue;
+    cur.parts.push({ text: t.w, st: t.st, w: tw });
+    cur.w += tw;
+    cur.size = Math.max(cur.size, t.st.size);
+  }
+  push();
+
+  const step = (s) => (s * mult) / 72;
+  const total = lines.reduce((a, l) => a + step(l.size), 0);
+  let y = (sh.y || 0) + inset;
+  const h = sh.h || total;
+  if (sh.valign === "middle") y += Math.max(0, (h - total) / 2);
+  else if (sh.valign === "bottom") y += Math.max(0, h - total);
+
+  return lines.map((l) => {
+    const lineW = l.parts.reduce((a, p) => a + p.w, 0);
+    let x = (sh.x || 0) + inset;
+    if (sh.align === "center") x += Math.max(0, (boxW - lineW) / 2);
+    else if (sh.align === "right") x += Math.max(0, boxW - lineW);
+    const baseline = y + (l.size / 72) * 0.80;
+    y += step(l.size);
+    return { x, baseline, parts: l.parts };
+  });
+}
+
+/* ------------------------------------------------------------------ render */
+
+function renderTrace(trace, out, opts = {}) {
+  const fontkit = opts.fontkit || require("fontkit");
+  const d = new Doc({
+    width: trace.canvas ? trace.canvas.w : 10,
+    height: trace.canvas ? trace.canvas.h : 5.625,
+    fontkit,
+    fontsDir: brand.resolve("fonts"),
+  });
+  const missing = [];
+
+  for (const slide of trace.slides) {
+    d.addPage();
+    const bg = (slide.background && slide.background.color) || "FFFFFF";
+    d.rect({ x: 0, y: 0, w: d.W, h: d.H, fill: bg.replace(/^#/, "") });
+
+    for (const sh of slide.shapes) {
+      if (sh.kind === "shape") drawShape(d, sh);
+      else if (sh.kind === "image") drawImage(d, sh, missing);
+      else if (sh.kind === "text") drawText(d, sh);
+    }
+  }
+  fs.writeFileSync(out, d.toBuffer());
+  return { pages: trace.slides.length, missing };
+}
+
+function drawShape(d, sh) {
+  const fill = sh.fill && sh.fill.color ? sh.fill.color.replace(/^#/, "") : null;
+  const opacity = sh.fill && sh.fill.transparency != null ? 1 - sh.fill.transparency / 100 : 1;
+  const stroke = sh.line && sh.line.width ? (sh.line.color || "000000").replace(/^#/, "") : null;
+  const box = { x: sh.x || 0, y: sh.y || 0, w: sh.w || 0, h: sh.h || 0 };
+  if (sh.type === "ellipse") return d.ellipse({ ...box, fill, stroke, lineWidth: (sh.line && sh.line.width) || 0.75 });
+  d.rect({
+    ...box, fill, stroke,
+    lineWidth: (sh.line && sh.line.width) || 0.75,
+    radius: sh.rectRadius || 0,
+    dash: sh.line && sh.line.dashType === "dash" ? 2.4 : 0,
+    opacity,
+  });
+}
+
+function drawImage(d, sh, missing) {
+  const box = { x: sh.x || 0, y: sh.y || 0, w: sh.w || 0, h: sh.h || 0 };
+  if (sh.data) {                                   // a recoloured glyph, inline
+    const m = String(sh.data).match(/^image\/svg\+xml;base64,(.*)$/);
+    if (!m) return;
+    const svg = Buffer.from(m[1], "base64").toString("utf8");
+    const stroke = (svg.match(/stroke="#?([0-9A-Fa-f]{6})"/) || [])[1] || "000000";
+    return d.svg(svg, { x: box.x, y: box.y, size: Math.min(box.w, box.h), color: stroke, strokeWidth: 2 });
+  }
+  if (!sh.path || !fs.existsSync(sh.path)) { if (sh.path) missing.push(sh.path); return; }
+  d.image(sh.path, box);
+}
+
+/**
+ * Draw a laid-out line, merging neighbouring parts that share a style.
+ *
+ * Showing each word as its own text object positions correctly and extracts as
+ * "sixUpIconis forfeaturesor" — the gaps are on the page but no space glyph is
+ * ever emitted, so anything reading the PDF back has to guess word boundaries
+ * from x gaps, and at 8pt it guesses wrong. Merging emits the spaces.
+ */
+function drawText(d, sh) {
+  if (!sh.runs || !sh.runs.length) return;
+  for (const line of layoutRuns(sh)) {
+    let x = line.x, buf = "", bufX = x, st = null;
+    const flush = () => {
+      if (buf.trim()) d.text(buf, { x: bufX, y: line.baseline, stem: st.stem, size: st.size, color: st.color });
+      buf = "";
+    };
+    for (const p of line.parts) {
+      const same = st && st.stem === p.st.stem && st.size === p.st.size && st.color === p.st.color;
+      if (!same) { flush(); st = p.st; bufX = x; }
+      buf += p.text;
+      x += p.w;
+    }
+    flush();
+  }
+}
+
+module.exports = { renderTrace, layoutRuns, stemOf };