thursday-agent 0.16.0 → 0.17.0

package/skills/artifact/scripts/book.mjs

@@ -2,6 +2,8 @@
 // A picture book: one HTML file in a folder of its own, printed and read aloud.
 //
 //   node book.mjs new <name>                               the book, styled, to write pages into
+//   node book.mjs put <name> <pages.html> [--lang ko]      the pages written in <pages.html> put
+//                                                          into the book, checked first
 //   node book.mjs shots <name>                             every page as a picture, and all on one, in scratch/
 //   node book.mjs pdf <name>                               the book as a PDF, one page a sheet
 //   node book.mjs video <name> <audio>... [--size WxH]     the book as an mp4, one audio file per page
@@ -15,6 +17,7 @@ import {
 } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { markSvg } from "../runtime/shell/wear.mjs";
 import {
   ARTIFACTS,
   NAME,
@@ -51,6 +54,17 @@ function openBook(name) {
   return book;
 }
 
+/** Who is making the book, with their face (shell wear.mjs markSvg); nothing outside a bot's job. */
+function maker() {
+  const bot = process.env.THURSDAY_BOT?.trim();
+  if (!bot) return "";
+  const name = bot.replace(
+    /[&<>"]/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
+  );
+  return `<p class="maker" hidden>${markSvg(24)}${name}</p>`;
+}
+
 /** One HTML file with its stylesheet and page turning inlined, which the web, print and the video all read. */
 function newBook(name) {
   const out = bookFile(name);
@@ -63,11 +77,132 @@ function newBook(name) {
     out,
     part("book.html")
       .replaceAll("{{title}}", name)
+      .replace("{{maker}}", () => maker())
       .replace("/* book.css */", () => part("book.css"))
       .replace("// book.js", () => part("book.js")),
   );
   console.log(
-    `${shown(out)} is ready: one file that opens offline, styled already. Write one <section class="page"> per page inside <main> (the comment inside says how), and hand back this path. Its pictures, its PDF and its video belong in the folder around it, ${shown(dirname(out))}, which is what the user sees as the book.`,
+    `${shown(out)} is ready: one file that opens offline, styled already. Write its pages, one <section class="page"> each (references/book.md), in a file of your own, then: node ${SCRIPT} put ${name} <that file> — and hand back this path. Its pictures, its PDF and its video belong in the folder around it, ${shown(dirname(out))}, which is what the user sees as the book.`,
+  );
+}
+
+/** Where the book's own <main> starts and ends: the last one opened before it closes. */
+function mainOf(html) {
+  const end = html.lastIndexOf("</main>");
+  const start = html.lastIndexOf("<main>", end);
+  if (start === -1 || end === -1) return null;
+  return { start: start + "<main>".length, end };
+}
+
+/** The book's pages as they are, or a Stop when none has been written into it yet. */
+function writtenBook(name) {
+  const book = openBook(name);
+  const html = readFileSync(book, "utf8");
+  const at = mainOf(html);
+  const pages = at ? html.slice(at.start, at.end) : "";
+  // The pages `new` leaves: a cover named for the file and a page with nothing to read aloud
+  if (!/<section\b/.test(pages) || /<section\b[^>]*data-say=""/.test(pages))
+    throw new Stop(
+      `${shown(book)} has no pages written into it yet${/data-say=""/.test(pages) ? " (a page in it has nothing in data-say)" : ""}. Write them in a file and put them: node ${SCRIPT} put ${name} <pages.html>.`,
+    );
+  return book;
+}
+
+/**
+ * The pages in `from` checked and put into the book's <main>, in place of what it held; the
+ * rest of the file — its style, its page turning, who made it — as it was. Every page is a
+ * <section class="page"> with data-say; the first is the cover with an <h1>; a page is a
+ * picture (<figure> with an <img> or an <svg>) and at most two <p>; a quiz page is its <h2>
+ * question, two to four choices, one of them right, and an answer. A picture beside the book
+ * must be there. What breaks one of these stops, naming the page.
+ */
+function putPages(name, from, args) {
+  const book = openBook(name);
+  if (!from || !existsSync(from))
+    throw new Stop(
+      `No file ${from ?? ""}. Write the pages in one and give it: node ${SCRIPT} put ${name} <pages.html>`,
+    );
+  const written = readFileSync(from, "utf8").replace(/<!--[\s\S]*?-->/g, "");
+  const sections = written.match(/<section\b[^>]*>[\s\S]*?<\/section>/g) ?? [];
+  const outside = written
+    .replace(/<section\b[^>]*>[\s\S]*?<\/section>/g, "")
+    .trim();
+  if (outside)
+    throw new Stop(
+      `Only pages go in the file, each a <section class="page">…</section>; this is outside them: ${outside.slice(0, 120)}`,
+    );
+  if (sections.length < 2)
+    throw new Stop(
+      'A book is a cover and at least one page: two <section class="page"> at least.',
+    );
+  const folder = dirname(book);
+  sections.forEach((section, i) => {
+    const n = `Page ${i + 1}`;
+    const open = /^<section\b[^>]*>/.exec(section)[0];
+    const classes = /class="([^"]*)"/.exec(open)?.[1].split(/\s+/) ?? [];
+    const count = (re) => (section.match(re) ?? []).length;
+    if (!classes.includes("page"))
+      throw new Stop(`${n} is not a <section class="page">.`);
+    if (!/data-say="[^"]*\S[^"]*"/.test(open))
+      throw new Stop(
+        `${n} has no data-say: the sentence read aloud over it in the video.`,
+      );
+    if (count(/<svg\b/g) !== count(/<\/svg>/g))
+      throw new Stop(`${n}: an <svg> in it is not closed.`);
+    if (i === 0 && (!classes.includes("cover") || !/<h1\b/.test(section)))
+      throw new Stop(
+        `${n} is the cover: <section class="page cover" data-say="…"> with its picture and an <h1>.`,
+      );
+    if (classes.includes("quiz")) {
+      const choices = /<ol class="choices">([\s\S]*?)<\/ol>/.exec(section)?.[1];
+      const picks = (choices?.match(/<li\b/g) ?? []).length;
+      if (!/<h2\b/.test(section) || !choices)
+        throw new Stop(
+          `${n} is a quiz: an <h2> question, then <ol class="choices"> of two to four <li><button>.`,
+        );
+      const buttons = choices.match(/<button\b[^>]*>/g) ?? [];
+      if (buttons.length < 2 || buttons.length > 4 || picks !== buttons.length)
+        throw new Stop(
+          `${n}: a quiz has two to four choices, each an <li> holding one <button>; it has ${buttons.length}.`,
+        );
+      if (buttons.filter((b) => /\sdata-right\b/.test(b)).length !== 1)
+        throw new Stop(`${n}: exactly one choice's <button> has data-right.`);
+      if (!/<p class="answer">/.test(section))
+        throw new Stop(`${n}: a quiz ends with <p class="answer"> saying why.`);
+    } else if (i > 0) {
+      if (!/<figure\b[\s\S]*?(<img\b|<svg\b)[\s\S]*?<\/figure>/.test(section))
+        throw new Stop(
+          `${n} has no picture: a <figure> with an <img> or an <svg> in it.`,
+        );
+      const lines = count(/<p\b/g);
+      if (lines < 1 || lines > 2)
+        throw new Stop(
+          `${n} has ${lines} lines; a page has one or two <p> under its picture, and more is another page.`,
+        );
+    }
+    for (const [, src] of section.matchAll(/<img\b[^>]*\ssrc="([^"]+)"/g))
+      if (!/^(https?:|data:)/.test(src) && !existsSync(resolve(folder, src)))
+        throw new Stop(
+          `${n}: its picture ${src} is not in ${shown(folder)}; put the file there, or name it as it is.`,
+        );
+  });
+  let html = readFileSync(book, "utf8");
+  const at = mainOf(html);
+  if (!at) throw new Stop(`${shown(book)} has no <main> to put pages in.`);
+  html = `${html.slice(0, at.start)}\n${sections.map((s) => `      ${s.trim()}`).join("\n\n")}\n    ${html.slice(at.end)}`;
+  const at2 = args.indexOf("--lang");
+  if (at2 !== -1) {
+    const lang = args[at2 + 1] ?? "";
+    if (!/^[a-zA-Z]{2,3}(-[A-Za-z0-9]{2,8})*$/.test(lang))
+      throw new Stop(`--lang takes a language code: ko, en, ja, pt-BR.`);
+    html = html.replace(/<html\b[^>]*>/, `<html lang="${lang}">`);
+  }
+  writeFileSync(book, html);
+  const quiz = sections.some((s) =>
+    /^<section\b[^>]*class="[^"]*\bquiz\b/.test(s),
+  );
+  console.log(
+    `Put ${sections.length} pages into ${shown(book)}${quiz ? ", a quiz among them" : ""}. Look at them once: node ${SCRIPT} shots ${name}`,
   );
 }
 
@@ -76,7 +211,7 @@ function newBook(name) {
  * scratch/: a look at the book, never part of it, so never in the book's own folder.
  */
 function shotBook(name) {
-  const book = openBook(name);
+  const book = writtenBook(name);
   const out = join(WORKSPACE, "scratch", `${name}-shots`);
   const sheet = join(out, "book.png");
   rmSync(out, { recursive: true, force: true });
@@ -108,7 +243,7 @@ function shotBook(name) {
 }
 
 function videoBook(name, args) {
-  const book = openBook(name);
+  const book = writtenBook(name);
   const at = args.indexOf("--size");
   const size = at === -1 ? "1920x1080" : (args[at + 1] ?? "");
   const voices = args.filter((_, i) => at === -1 || (i !== at && i !== at + 1));
@@ -129,11 +264,12 @@ try {
   if (command === "new") newBook(rest[0]);
   else if (command === "shots") shotBook(rest[0]);
   else if (command === "pdf")
-    await bookPdf({ book: openBook(rest[0]), shown }, Stop);
+    await bookPdf({ book: writtenBook(rest[0]), shown }, Stop);
+  else if (command === "put") putPages(rest[0], rest[1], rest.slice(2));
   else if (command === "video") videoBook(rest[0], rest.slice(1));
   else
     throw new Stop(
-      "Usage: book.mjs new <name> | shots <name> | pdf <name> | video <name> <audio>... [--size WxH]",
+      "Usage: book.mjs new <name> | put <name> <pages.html> [--lang ko] | shots <name> | pdf <name> | video <name> <audio>... [--size WxH]",
     );
 } catch (error) {
   if (!(error instanceof Stop)) throw error;

package/skills/artifact/scripts/chart.mjs

@@ -11,7 +11,11 @@
 //                        light card that reads on any ground: a deck's image slide (fit
 //                        whole), a board, a post
 //
-//   --kind line|bar      line when the first column is dates, bar otherwise
+//   --kind line|bar|column|donut|stacked
+//                        line when the first column is dates, bar otherwise. column: upright
+//                        bars in the CSV's order, for periods. donut: one column's shares,
+//                        five rows at most. stacked: two or more columns as parts of one bar
+//                        a row, in the CSV's order
 //   --title "<text>"     what the chart shows (default: the CSV's `# title:`)
 //   --columns a,b        which value columns to draw (default: all)
 //   --from / --to        a date range to draw, YYYY[-MM[-DD]] or YYYY-Qn. Each bound takes
@@ -19,14 +23,16 @@
 //   --index              rebase every line to 100 at its first shared date
 //   --mark "2025-03=Rate cut"   a dated event line, on a line chart; repeat for more
 //   --unit "%"  --prefix "$"    around every number shown
-//   --highlight "<label>"       the one bar in the accent color; the rest go quiet (bars only)
-//   --keep-order         bars in the CSV's order instead of largest first
+//   --highlight "<label>"       the one bar or slice in the accent color; the rest go quiet
+//   --keep-order         bars and slices in the CSV's order instead of largest first
+//   --share              a stacked bar as each part's share of its row, every row 100%
 //   --source "<url or text>"    when the CSV has no `# source:` line
 //   --note "<text>"      one line under the chart: an estimate, a gap, a break in the series
 //   --locale de          how numbers and dates are written: the reader's language tag
 //
-// An unknown --kind, a bound that is not a date, a --highlight naming no row and a --mark
-// outside the range drawn all stop, rather than draw something quietly wrong.
+// An unknown --kind, a bound that is not a date, a --highlight naming no row, a --mark
+// outside the range drawn, a donut of more than five parts or of a negative one, and a
+// negative part in a stacked bar all stop, rather than draw something quietly wrong.
 //
 // The figure carries no words of its own beyond what it is given, so it reads the same
 // in any language: the site's name, a date, "CSV".
@@ -456,6 +462,174 @@ function barChart({ labels, series, fmt, highlight, size }) {
   };
 }
 
+/** A legend for several columns, as the bars draw it: a swatch and a name each. */
+function legendRow(series, size, x0 = 0) {
+  return series.map((s, n) => {
+    const x = x0 + n * (size.W < 500 ? 110 : 130);
+    return `<rect class="bar c${(n % 6) + 1}" x="${x}" y="4" width="12" height="12" rx="2"/><text class="tick" x="${x + 18}" y="14">${esc(cut(s.name, size.nameChars + 2))}</text>`;
+  });
+}
+
+/** Upright bars, one group a row in the CSV's order: periods read left to right. */
+function columnChart({ labels, series, fmt, highlight, size }) {
+  const { W } = size;
+  const per = series.length;
+  const legend = per > 1 ? 26 : 0;
+  const H = (W < 500 ? 220 : 280) + legend;
+  const all = series.flatMap((s) => s.values).filter((v) => v !== null);
+  const lo = Math.min(0, ...all);
+  const hi = Math.max(0, ...all);
+  const top = legend + 20;
+  const bottom = 26 + (lo < 0 ? 16 : 0);
+  const slot = (W - 8) / labels.length;
+  const group = slot * 0.72;
+  const barW = group / per;
+  const py = (v) => top + (1 - (v - lo) / (hi - lo || 1)) * (H - top - bottom);
+  const chars = Math.max(3, Math.floor(slot / (FONT * 0.62)));
+  const parts = per > 1 ? legendRow(series, size) : [];
+  labels.forEach((label, g) => {
+    const x0 = 4 + g * slot + (slot - group) / 2;
+    const quiet = highlight && label !== highlight;
+    series.forEach((s, n) => {
+      const v = s.values[g];
+      if (v === null) return;
+      const [y1, y2] = [py(Math.max(0, v)), py(Math.min(0, v))];
+      const color = quiet
+        ? "quiet"
+        : highlight && per === 1
+          ? "c1"
+          : `c${(n % 6) + 1}`;
+      const x = x0 + n * barW;
+      parts.push(
+        `<rect class="bar ${color}" x="${x + 1}" y="${y1}" width="${Math.max(1, barW - 2)}" height="${Math.max(1, y2 - y1)}" rx="3"><title>${esc(label)}${per > 1 ? ` — ${esc(s.name)}` : ""}: ${esc(fmt.label(v))}</title></rect>`,
+      );
+      // A value over its bar where it fits the bar's width
+      if (textWidth(fmt.label(v), 11) <= barW + 6)
+        parts.push(
+          `<text class="value${quiet ? " quiet-text" : ""}" x="${x + barW / 2}" y="${v < 0 ? y2 + 14 : y1 - 6}" text-anchor="middle" font-size="11">${esc(fmt.label(v))}</text>`,
+        );
+    });
+    parts.push(
+      `<text class="label${quiet ? " quiet-text" : ""}" x="${4 + g * slot + slot / 2}" y="${H - 8}" text-anchor="middle">${esc(cut(label, chars))}<title>${esc(label)}</title></text>`,
+    );
+  });
+  parts.push(
+    `<line class="${lo < 0 ? "zero" : "grid"}" x1="4" x2="${W - 4}" y1="${py(0)}" y2="${py(0)}"/>`,
+  );
+  return {
+    svg: `<svg class="chart-svg ${W < 500 ? "narrow" : "wide"}" viewBox="0 0 ${W} ${H}" role="img">${parts.join("")}</svg>`,
+    axis: null,
+  };
+}
+
+/** One column's rows as shares of their whole, around a ring, the largest first. */
+function donutChart({ labels, series, highlight, size, locale }) {
+  const { W } = size;
+  const values = series[0].values.map((v) => v ?? 0);
+  const total = values.reduce((sum, v) => sum + v, 0) || 1;
+  const pct = new Intl.NumberFormat(locale, {
+    style: "percent",
+    maximumFractionDigits: 0,
+  });
+  const narrow = W < 500;
+  const R = narrow ? 62 : 84;
+  const ring = narrow ? 24 : 30;
+  const c = R + ring / 2 + 4;
+  const rows = labels.length;
+  const H = Math.max(c * 2, rows * 26 + 8);
+  const cy = H / 2;
+  const lead = highlight ? labels.indexOf(highlight) : 0;
+  const parts = [];
+  let at = 0;
+  values.forEach((v, i) => {
+    const share = (v / total) * 100;
+    const quiet = highlight && i !== lead;
+    const color = quiet ? "quiet" : highlight ? "c1" : `c${(i % 6) + 1}`;
+    // pathLength 100: the dash is the share itself, a hair of gap between slices
+    const len = Math.max(0, share - (rows > 1 ? 0.6 : 0));
+    parts.push(
+      `<circle class="slice ${color}" cx="${c}" cy="${cy}" r="${R}" pathLength="100" stroke-width="${ring}" stroke-dasharray="${len.toFixed(2)} ${(100 - len).toFixed(2)}" stroke-dashoffset="${(-at).toFixed(2)}" transform="rotate(-90 ${c} ${cy})"><title>${esc(labels[i])}: ${pct.format(v / total)}</title></circle>`,
+    );
+    at += share;
+  });
+  parts.push(
+    `<text class="label" x="${c}" y="${cy + 6}" text-anchor="middle" font-size="${narrow ? 22 : 28}" font-weight="700">${pct.format(values[lead] / total)}</text>`,
+    `<text class="tick" x="${c}" y="${cy + (narrow ? 24 : 28)}" text-anchor="middle">${esc(cut(labels[lead], narrow ? 10 : 14))}</text>`,
+  );
+  const lx = c * 2 + (narrow ? 16 : 32);
+  labels.forEach((label, i) => {
+    const y = cy - (rows * 26) / 2 + i * 26 + 17;
+    const quiet = highlight && i !== lead;
+    const color = quiet ? "quiet" : highlight ? "c1" : `c${(i % 6) + 1}`;
+    parts.push(
+      `<rect class="bar ${color}" x="${lx}" y="${y - 10}" width="12" height="12" rx="2"/>`,
+      `<text class="label${quiet ? " quiet-text" : ""}" x="${lx + 20}" y="${y}">${esc(cut(label, size.labelChars))}<title>${esc(label)}</title></text>`,
+      `<text class="value" x="${W - 4}" y="${y}" text-anchor="end">${pct.format(values[i] / total)}</text>`,
+    );
+  });
+  return {
+    svg: `<svg class="chart-svg ${narrow ? "narrow" : "wide"}" viewBox="0 0 ${W} ${H}" role="img">${parts.join("")}</svg>`,
+    axis: null,
+  };
+}
+
+/** Each row one bar made of its columns' parts; `share` makes every row its parts of 100%. */
+function stackedChart({ labels, series, fmt, share, size, locale }) {
+  const { W } = size;
+  const pct = new Intl.NumberFormat(locale, {
+    style: "percent",
+    maximumFractionDigits: 0,
+  });
+  const barH = 26;
+  const gap = 12;
+  const legend = 26;
+  const H = legend + labels.length * (barH + gap) + 4;
+  const totals = labels.map((_, g) =>
+    series.reduce((sum, s) => sum + (s.values[g] ?? 0), 0),
+  );
+  const shownLabel = (l) => cut(l, size.labelChars);
+  const left = Math.min(
+    W < 500 ? 110 : 200,
+    Math.max(...labels.map((l) => textWidth(shownLabel(l), FONT))) + 14,
+  );
+  const valueRoom = share
+    ? 8
+    : Math.max(...totals.map((v) => textWidth(fmt.label(v), FONT))) + 12;
+  const span = W - left - valueRoom;
+  const most = share ? 1 : Math.max(...totals) || 1;
+  const parts = legendRow(series, size, W < 500 ? 0 : left);
+  labels.forEach((label, g) => {
+    const y = legend + g * (barH + gap);
+    const whole = totals[g] || 1;
+    parts.push(
+      `<text class="label" x="${left - 10}" y="${y + barH / 2 + 4}" text-anchor="end">${esc(shownLabel(label))}<title>${esc(label)}</title></text>`,
+    );
+    let x = left;
+    series.forEach((s, n) => {
+      const v = s.values[g] ?? 0;
+      const w = ((share ? v / whole : v) / most) * span;
+      if (w <= 0) return;
+      const said = share ? pct.format(v / whole) : fmt.label(v);
+      parts.push(
+        `<rect class="bar c${(n % 6) + 1}" x="${x}" y="${y}" width="${w}" height="${barH}"><title>${esc(label)} — ${esc(s.name)}: ${esc(said)}</title></rect>`,
+      );
+      if (textWidth(said, 11) + 10 <= w)
+        parts.push(
+          `<text class="part" x="${x + 6}" y="${y + barH / 2 + 4}" font-size="11">${esc(said)}</text>`,
+        );
+      x += w;
+    });
+    if (!share)
+      parts.push(
+        `<text class="value" x="${x + 6}" y="${y + barH / 2 + 4}">${esc(fmt.label(totals[g]))}</text>`,
+      );
+  });
+  return {
+    svg: `<svg class="chart-svg ${W < 500 ? "narrow" : "wide"}" viewBox="0 0 ${W} ${H}" role="img">${parts.join("")}</svg>`,
+    axis: null,
+  };
+}
+
 // ── The page ───────────────────────────────────────────────────────────────
 
 const STYLE = `<style id="chart-style">
@@ -475,6 +649,7 @@ const STYLE = `<style id="chart-style">
 .chart-svg .c1{--c:#2563eb}.chart-svg .c2{--c:#d97706}.chart-svg .c3{--c:#059669}.chart-svg .c4{--c:#db2777}.chart-svg .c5{--c:#7c3aed}.chart-svg .c6{--c:#64748b}
 .chart-svg .quiet{--c:color-mix(in srgb,var(--muted,#71717a) 45%,transparent)}
 .chart-svg .line{stroke:var(--c)}.chart-svg .dot,.chart-svg .bar{fill:var(--c)}.chart-svg .end{fill:var(--c)}
+.chart-svg .slice{fill:none;stroke:var(--c)}.chart-svg .part{fill:#fff;font-weight:600}
 .chart-svg .hover line{stroke:var(--muted,#71717a)}
 .chart-svg .hover rect{fill:var(--bg,#fff);stroke:var(--line,#e4e4e7)}
 .chart-svg .hover text{fill:var(--fg,#18181b);font-size:12px}
@@ -619,8 +794,11 @@ function main() {
   });
   const dated = rows.every((r) => toTime(r[0]) !== null);
   const kind = flags.kind ?? (dated ? "line" : "bar");
-  if (kind !== "line" && kind !== "bar")
-    throw new Stop(`"${flags.kind}" is not a kind: --kind line or --kind bar.`);
+  const KINDS = ["line", "bar", "column", "donut", "stacked"];
+  if (!KINDS.includes(kind))
+    throw new Stop(
+      `"${flags.kind}" is not a kind: --kind ${KINDS.join(", ")}.`,
+    );
   if (kind === "line" && !dated)
     throw new Stop(
       "A line needs dates in the first column (YYYY, YYYY-MM, YYYY-MM-DD or YYYY-Qn); draw categories with --kind bar.",
@@ -655,9 +833,9 @@ function main() {
   if (highlight !== undefined) {
     if (typeof highlight !== "string")
       throw new Stop('--highlight needs a row: --highlight "<label>".');
-    if (kind !== "bar")
+    if (kind === "line" || kind === "stacked")
       throw new Stop(
-        "--highlight picks out one bar; a line chart has none. Drop it, or draw --kind bar.",
+        `--highlight picks out one bar or slice; a ${kind} chart has none. Drop it, or draw --kind bar.`,
       );
     if (!body.some((r) => r[0] === highlight))
       throw new Stop(
@@ -675,6 +853,37 @@ function main() {
   }));
   if (series.every((s) => s.values.every((v) => v === null)))
     throw new Stop(`No numbers in ${wanted.join(", ")}.`);
+  const negative = series.some((s) =>
+    s.values.some((v) => v !== null && v < 0),
+  );
+  if (kind === "donut") {
+    if (series.length !== 1)
+      throw new Stop(
+        `A donut shows one column's shares; this draws ${series.length}. Pick one with --columns, or draw --kind stacked.`,
+      );
+    if (body.length > 5)
+      throw new Stop(
+        `A donut reads at five parts or fewer; this has ${body.length}. Draw --kind bar, or put the smallest together in one row.`,
+      );
+    if (negative)
+      throw new Stop(
+        "A donut's parts are shares of a whole, and a negative one is no share. Draw --kind bar.",
+      );
+  }
+  if (flags.share && kind !== "stacked")
+    throw new Stop(
+      "--share draws each row of a stacked bar as 100%; drop it, or draw --kind stacked.",
+    );
+  if (kind === "stacked") {
+    if (series.length < 2)
+      throw new Stop(
+        "A stacked bar needs two or more value columns, the parts of each row. Draw --kind bar.",
+      );
+    if (negative)
+      throw new Stop(
+        "A stacked bar cannot hold a negative part: the parts would overlap. Draw --kind column.",
+      );
+  }
 
   let chart;
   let lineDraw;
@@ -725,14 +934,21 @@ function main() {
     chart = both(lineDraw);
   } else {
     let order = body.map((_, i) => i);
-    if (!flags["keep-order"])
+    // Bars and slices largest first; columns and stacked bars keep the rows' own order
+    if ((kind === "bar" || kind === "donut") && !flags["keep-order"])
       order.sort(
         (a, b) =>
           (series[0].values[b] ?? -Infinity) -
           (series[0].values[a] ?? -Infinity),
       );
+    const drawer = {
+      bar: barChart,
+      column: columnChart,
+      donut: donutChart,
+      stacked: stackedChart,
+    }[kind];
     barDraw = (size) =>
-      barChart({
+      drawer({
         labels: order.map((i) => body[i][0]),
         series: series.map((s) => ({
           ...s,
@@ -740,6 +956,8 @@ function main() {
         })),
         fmt,
         highlight: highlight ?? null,
+        share: Boolean(flags.share),
+        locale,
         size,
       });
     chart = both(barDraw);

package/skills/artifact/scripts/document.mjs

@@ -14,6 +14,9 @@
 //                                   the body as it is now, as HTML, into <file> to change
 //   node document.mjs shots <name|path>
 //                                   the page as it opens, down to three pictures in scratch/
+//   node document.mjs docx <name|path>
+//                                   the page as a Word file beside it (<name>.docx), edits
+//                                   and all, as Export › Word file makes it
 import { spawnSync } from "node:child_process";
 import {
   existsSync,
@@ -83,7 +86,7 @@ function makePage(name, ...args) {
       part("quick.html")
         .replace("{{body}}", () => part(join("pages", `${kind}.html`)))
         .replace("{{css}}", () => part("quick.css"))
-        .replace("{{js}}", () => part("quick.js"))
+        .replace("{{js}}", () => `${part("quick.js")}\n${part("docx.js")}`)
         .replaceAll("{{title}}", name)
         .replaceAll("{{today}}", today),
     ),
@@ -218,15 +221,39 @@ function shotPage(name) {
   console.log(`Look at them with look_at, from ${shown(out)}.`);
 }
 
+/** The page as a Word file beside it, made by the page's own converter in a headless browser. */
+function wordFile(name) {
+  const file = pageAt(name);
+  const out = join(dirname(file), `${basename(file, ".html")}.docx`);
+  const skills = process.env.THURSDAY_SKILLS || resolve(SKILL, "..");
+  const done = spawnSync(
+    process.execPath,
+    [
+      join(skills, "artifact", "runtime", "document", "word.mjs"),
+      file,
+      "--out",
+      out,
+    ],
+    { encoding: "utf8", stdio: ["ignore", "pipe", "inherit"] },
+  );
+  if (done.status !== 0)
+    throw new Stop("Fix what it names above, then run this again.");
+  const { missed } = JSON.parse(done.stdout.trim().split("\n").at(-1));
+  console.log(
+    `Wrote ${shown(out)}: the document as a Word file. Hand back its path beside the page's.${missed.length ? ` Pictures that could not be put in, each written in as its words: ${missed.join("; ")}.` : ""}`,
+  );
+}
+
 const [command, ...rest] = process.argv.slice(2);
 try {
   if (command === "new" || command === "quick") newPage(...rest);
   else if (command === "put") putBody(...rest);
   else if (command === "get") getBody(...rest);
   else if (command === "shots") shotPage(rest[0]);
+  else if (command === "docx") wordFile(rest[0]);
   else
     throw new Stop(
-      "Usage: document.mjs new <name> [--from <kind>] | put <name|path> <file.md|file.html> | get <name|path> <file> | shots <name|path>",
+      "Usage: document.mjs new <name> [--from <kind>] | put <name|path> <file.md|file.html> | get <name|path> <file> | shots <name|path> | docx <name|path>",
     );
 } catch (error) {
   if (!(error instanceof Stop)) throw error;