@cardenelabs/dragon 0.34.0 → 0.35.0

package/src/cli.ts

@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+/**
+ * `dragon export <図の file>` の命令。原本の JSON (`.json`) か記法 (`.dragon`) を読み、mp4、GIF、HTML、PNG を書き出す。
+ * 書き出した file の path を 1 行ずつ出す。
+ *
+ * 使い方の文と誤りの文は、図の中の字と同じ言葉で出す (#3003)。`--lang` を渡せばその言葉、無ければ記法の file の言葉、
+ * JSON の原本と file を読む前の誤りは日本語。記法の行の誤りだけは、書き方の例が file の書き方に合うよう file の言葉で出す。
+ */
+import { readFileSync } from "node:fs";
+import { basename, extname, resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { type ExportFormat, exportDiagram, FORMATS } from "./export/index";
+import { PALETTES, type Theme } from "./look/values";
+import { parseNotation } from "./parser";
+import { type NotationLang, notationLanguage } from "./words";
+
+const OPTIONS = {
+  out: { type: "string" },
+  width: { type: "string" },
+  palette: { type: "string" },
+  theme: { type: "string" },
+  lang: { type: "string" },
+  fps: { type: "string" },
+  "gif-fps": { type: "string" },
+  format: { type: "string" },
+} as const;
+
+type Values = Partial<Record<keyof typeof OPTIONS, string>>;
+
+const THEMES: readonly Theme[] = ["light", "dark"];
+/** 色味の名前。使い方の文と `--palette` の値の確かめに使う */
+const PALETTE_NAMES = Object.keys(PALETTES).join(" / ");
+
+interface CliText {
+  usage: string;
+  unknownOption: (name: string) => string;
+  missingValue: (name: string) => string;
+  extraFiles: (extra: string[]) => string;
+  noFile: (path: string) => string;
+  unreadable: (path: string, detail: string) => string;
+  badJson: (path: string, detail: string) => string;
+  cannotWrite: (path: string, detail: string) => string;
+  badValue: (option: string, value: string, allowed: string) => string;
+  /** 設定ごとの許す値の言い方 */
+  allowed: { lang: string; theme: string; positive: string; format: string };
+}
+
+/** 命令が出す文。英語は日本語の文をそのまま英語にする */
+const CLI_TEXT: Record<NotationLang, CliText> = {
+  ja: {
+    usage: [
+      "使い方: dragon export <図の file (.json か .dragon)> [設定]",
+      "  --out <dir>        書き出す先 (既定は今の dir)",
+      "  --width <px>       枠の幅。見せ方を選び、寄って見せる窓の幅になる",
+      `  --palette <名前>   色味 (${PALETTE_NAMES})`,
+      "  --theme <明暗>     light か dark",
+      "  --lang <言葉>      図の中の字と命令の文の言葉 (ja か en)。既定は記法の file の言葉で、JSON は ja",
+      "  --fps <数>         mp4 の 1 秒のコマの数 (既定 30)",
+      "  --gif-fps <数>     GIF の 1 秒のコマの数 (既定 10)",
+      "  --format <形>      書き出す形を , で区切る (既定 mp4,gif,html,png)",
+    ].join("\n"),
+    unknownOption: (name) => `知らない設定: ${name}`,
+    missingValue: (name) => `設定に値が無い: ${name}`,
+    extraFiles: (extra) => `図の file は 1 つだけ渡す。余分な引数: ${extra.join(" ")}`,
+    noFile: (path) => `図の file が無い: ${path}`,
+    unreadable: (path, detail) => `図の file を読めない: ${path} (${detail})`,
+    badJson: (path, detail) => `JSON として読めない: ${path} (${detail})`,
+    cannotWrite: (path, detail) => `書き出せない: ${path} (${detail})`,
+    badValue: (option, value, allowed) => `使えない値: ${option} ${value} (${allowed})`,
+    allowed: { lang: "ja か en", theme: "light か dark", positive: "0 より大きい数", format: `${FORMATS.join(" / ")} を , で区切る` },
+  },
+  en: {
+    usage: [
+      "Usage: dragon export <diagram file (.json or .dragon)> [options]",
+      "  --out <dir>        Where to write (default: the current dir)",
+      "  --width <px>       Frame width. Picks the view and sets the window width when following",
+      `  --palette <name>   Colors (${PALETTE_NAMES})`,
+      "  --theme <mode>     light or dark",
+      "  --lang <lang>      Language of the diagram text and command messages (ja or en). Defaults to the notation file's language, and ja for JSON",
+      "  --fps <n>          Frames per second of the mp4 (default 30)",
+      "  --gif-fps <n>      Frames per second of the GIF (default 10)",
+      "  --format <list>    Formats to write, separated by , (default mp4,gif,html,png)",
+    ].join("\n"),
+    unknownOption: (name) => `Unknown option: ${name}`,
+    missingValue: (name) => `Option needs a value: ${name}`,
+    extraFiles: (extra) => `Pass only one diagram file. Extra arguments: ${extra.join(" ")}`,
+    noFile: (path) => `No such diagram file: ${path}`,
+    unreadable: (path, detail) => `Cannot read the diagram file: ${path} (${detail})`,
+    badJson: (path, detail) => `Cannot read as JSON: ${path} (${detail})`,
+    cannotWrite: (path, detail) => `Cannot write: ${path} (${detail})`,
+    badValue: (option, value, allowed) => `Invalid value: ${option} ${value} (${allowed})`,
+    allowed: { lang: "ja or en", theme: "light or dark", positive: "a number above 0", format: `${FORMATS.join(" / ")} separated by ,` },
+  },
+};
+
+const isLang = (value: string | undefined): value is NotationLang => value === "ja" || value === "en";
+
+const number = (value: string | undefined): number | undefined => (value === undefined ? undefined : Number(value));
+
+const detail = (error: unknown): string => (error instanceof Error ? error.message : String(error));
+
+/** 設定を読む前に `--lang` の値を引く。設定の誤りの文も、選んだ言葉で出すため */
+function langOf(args: string[]): string | undefined {
+  for (const [i, arg] of args.entries()) {
+    if (arg === "--lang") return args[i + 1];
+    if (arg.startsWith("--lang=")) return arg.slice("--lang=".length);
+  }
+  return undefined;
+}
+
+/**
+ * 設定の誤りを、Node の文ではなく命令の言葉で返す。誤りが無ければ `undefined`。
+ * 値の要る設定の後ろに `-` で始まる語が続く時は、その語を値と取り違えずに値が無いとみなす (Node も同じ形を断る)。
+ */
+function optionProblem(args: string[], text: CliText): string | undefined {
+  const { tokens } = parseArgs({ args, options: OPTIONS, allowPositionals: true, strict: false, tokens: true });
+  for (const token of tokens) {
+    if (token.kind !== "option") continue;
+    if (!Object.hasOwn(OPTIONS, token.name)) return text.unknownOption(token.rawName);
+    if (token.value === undefined || (!token.inlineValue && token.value.startsWith("-"))) return text.missingValue(token.rawName);
+  }
+  return undefined;
+}
+
+/**
+ * 設定の値を確かめ、使えない値を命令の言葉で返す。使えない値が無ければ `undefined` (#3011)。
+ * 確かめないと、`--format xyz` は何も書き出さずに成功として終わり、`--theme blue` などは既定の値で黙って書き出す。
+ */
+function valueProblem(values: Values, text: CliText): string | undefined {
+  const bad = (name: keyof typeof OPTIONS, value: string, allowed: string): string => text.badValue(`--${name}`, value, allowed);
+  if (values.lang !== undefined && !isLang(values.lang)) return bad("lang", values.lang, text.allowed.lang);
+  if (values.theme !== undefined && !THEMES.some((theme) => theme === values.theme)) return bad("theme", values.theme, text.allowed.theme);
+  if (values.palette !== undefined && !Object.hasOwn(PALETTES, values.palette)) return bad("palette", values.palette, PALETTE_NAMES);
+  if (values.format !== undefined && !values.format.split(",").every((format) => FORMATS.some((known) => known === format))) {
+    return bad("format", values.format, text.allowed.format);
+  }
+  for (const name of ["width", "fps", "gif-fps"] as const) {
+    const value = values[name];
+    if (value !== undefined && !(Number.isFinite(Number(value)) && Number(value) > 0)) return bad(name, value, text.allowed.positive);
+  }
+  return undefined;
+}
+
+/** Node が file か dir を扱えなかった誤りなら、扱えなかった path を返す。それ以外の誤りは `undefined` */
+function failedPath(error: unknown): string | undefined {
+  if (!(error instanceof Error) || !("syscall" in error) || !("path" in error)) return undefined;
+  return typeof error.path === "string" ? error.path : undefined;
+}
+
+/** 図の file を読む。記法の file はその言葉も返し、JSON の原本は言葉を持たない */
+function read(file: string, text: CliText): { diagram: unknown; lang?: NotationLang } {
+  let source: string;
+  try {
+    source = readFileSync(file, "utf8");
+  } catch (error) {
+    const missing = error instanceof Error && "code" in error && error.code === "ENOENT";
+    throw new Error(missing ? text.noFile(file) : text.unreadable(file, detail(error)));
+  }
+  if (extname(file) !== ".dragon") {
+    try {
+      return { diagram: JSON.parse(source) };
+    } catch (error) {
+      throw new Error(text.badJson(file, detail(error)));
+    }
+  }
+  const parsed = parseNotation(source);
+  if (!parsed.ok) throw new Error(parsed.errors.map((e) => `${file}:${e.line} ${e.message}`).join("\n"));
+  const lang = notationLanguage(source);
+  return lang === undefined ? { diagram: parsed.diagram } : { diagram: parsed.diagram, lang };
+}
+
+async function main(argv: string[]): Promise<number> {
+  const [command, ...rest] = argv;
+  const chosen = langOf(argv);
+  // file を読む前の文は、渡した言葉か日本語で出す。知らない言葉は日本語の使い方で断る
+  const early = CLI_TEXT[isLang(chosen) ? chosen : "ja"];
+  if (command !== "export") {
+    console.error(early.usage);
+    return 2;
+  }
+  const problem = optionProblem(rest, early);
+  if (problem !== undefined) {
+    console.error(`${problem}\n${early.usage}`);
+    return 2;
+  }
+  const { values, positionals } = parseArgs({ args: rest, options: OPTIONS, allowPositionals: true });
+  const badValue = valueProblem(values, early);
+  if (badValue !== undefined) {
+    console.error(`${badValue}\n${early.usage}`);
+    return 2;
+  }
+  const [file, ...extra] = positionals;
+  if (!file) {
+    console.error(early.usage);
+    return 2;
+  }
+  // 2 つ目以降を黙って捨てると、`--out` を書き忘れた時に思った所と違う所へ書き出す (#3007)
+  if (extra.length > 0) {
+    console.error(`${early.extraFiles(extra)}\n${early.usage}`);
+    return 2;
+  }
+  const width = number(values.width);
+  const fps = number(values.fps);
+  const gifFps = number(values["gif-fps"]);
+  const { diagram, lang: fileLang } = read(file, early);
+  // 渡した言葉を記法の file の言葉より先に使う。JSON の原本で渡さなければ、書き出しの既定 (日本語) になる
+  const lang = isLang(chosen) ? chosen : fileLang;
+  let result: Awaited<ReturnType<typeof exportDiagram>>;
+  try {
+    result = await exportDiagram(diagram, {
+      outDir: resolve(values.out ?? "."),
+      name: basename(file, extname(file)),
+      ...(values.format ? { formats: values.format.split(",") as ExportFormat[] } : {}),
+      ...(width === undefined ? {} : { width }),
+      ...(values.palette ? { palette: values.palette } : {}),
+      ...(values.theme ? { theme: values.theme as Theme } : {}),
+      ...(lang ? { lang } : {}),
+      ...(fps === undefined ? {} : { fps }),
+      ...(gifFps === undefined ? {} : { gifFps }),
+    });
+  } catch (error) {
+    // 書き出し先に書けない時だけ命令の言葉で書き直す。描けない時と道具が無い時の断りは、書き出しが言葉に合わせて出す (#3009)
+    const path = failedPath(error);
+    if (path !== undefined) throw new Error(CLI_TEXT[lang ?? "ja"].cannotWrite(path, detail(error)));
+    throw error instanceof Error ? error : new Error(String(error));
+  }
+  for (const path of Object.values(result.files)) console.log(path);
+  return 0;
+}
+
+main(process.argv.slice(2)).then(
+  (code) => process.exit(code),
+  (error: unknown) => {
+    console.error(detail(error));
+    process.exit(1);
+  },
+);

package/src/export/capture.ts

@@ -0,0 +1,277 @@
+/**
+ * 画面なしの Chromium で、頁と同じ描画を時刻を止めて 1 コマずつ撮る。
+ *
+ * 時刻は頁の止め絵と同じく、図の `--play` を `paused` にし、`--at` に秒を入れて止める。
+ * 撮ったコマは同じ頁の中で詰める。mp4 は WebCodecs で H.264 にして `mediabunny` で箱に入れ、
+ * GIF は `gifenc` で詰める。GIF は前のコマと同じ所を透明にし、変わった所だけを書いて小さくする。
+ * WebCodecs は安全な頁でしか使えないので、頁は `http://localhost/` に置く。
+ */
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import type { Browser, Page } from "playwright-core";
+import type { NotationLang } from "../words";
+
+const require_ = createRequire(import.meta.url);
+/** 頁に読ませる詰める道具。どちらも 1 file の ES module */
+const SCRIPTS: Record<string, string> = {
+  "/mediabunny.js": join(dirname(require_.resolve("mediabunny")), "mediabunny.min.mjs"),
+  "/gifenc.js": require_.resolve("gifenc/dist/gifenc.esm.js"),
+};
+
+/** CSS の 1px を何画素で撮るか */
+const SCALE = 2;
+
+const INSTALL_ADD = "`pnpm add -D playwright-core`";
+const INSTALL_CHROMIUM = "`pnpm exec playwright-core install chromium`";
+
+/** 書き出す道具が無い時の断りの文。言葉ごとに持つ (#3003) */
+const LAUNCH_TEXT: Record<NotationLang, { missing: string; cannotLaunch: string; install: string }> = {
+  ja: {
+    missing: "書き出しには playwright-core が要る。",
+    cannotLaunch: "Chromium を起動できない。",
+    install: `${INSTALL_ADD} で入れ、${INSTALL_CHROMIUM} で Chromium を入れる`,
+  },
+  en: {
+    missing: "Exporting needs playwright-core. ",
+    cannotLaunch: "Cannot launch Chromium. ",
+    install: `Install playwright-core with ${INSTALL_ADD} and Chromium with ${INSTALL_CHROMIUM}`,
+  },
+};
+
+/** 画面なしの Chromium を起こす。起こせない時は、渡した言葉で入れ方を添えて断る */
+export async function launch(lang: NotationLang): Promise<Browser> {
+  const text = LAUNCH_TEXT[lang];
+  let chromium: (typeof import("playwright-core"))["chromium"];
+  try {
+    ({ chromium } = await import("playwright-core"));
+  } catch {
+    throw new Error(`${text.missing}${text.install}`);
+  }
+  try {
+    return await chromium.launch();
+  } catch (error) {
+    throw new Error(`${text.cannotLaunch}${text.install} (${String(error).split("\n")[0]})`);
+  }
+}
+
+/** 図の SVG の大きさ (CSS の px) */
+export function sizeOf(svg: string): { width: number; height: number } {
+  const [, width = "0", height = "0"] = /^<svg\b[^>]*?\swidth="(\d+)"\s+height="(\d+)"/.exec(svg) ?? [];
+  return { width: Number(width), height: Number(height) };
+}
+
+export interface Stage {
+  page: Page;
+  width: number;
+  height: number;
+}
+
+/**
+ * 図 1 枚を置いた頁を開き、字が読み込まれるまで待つ。`body` は頁の地の CSS。
+ * 図は置く前から止めておく。置いてから止めると、止めるまでに進んだ分だけ毎回絵がずれる。
+ */
+export async function stage(browser: Browser, svg: string, fontCss: string, body: string): Promise<Stage> {
+  const { width, height } = sizeOf(svg);
+  const page = await browser.newPage({ viewport: { width, height }, deviceScaleFactor: SCALE });
+  const paused = svg.replace(/^<svg\b/, '<svg style="--play:paused;--at:0"');
+  const html =
+    `<!doctype html><html><head><meta charset="utf-8"><style>${fontCss}html,body{margin:0}body{${body}}svg{display:block}</style>` +
+    `<script type="module">import * as mb from "/mediabunny.js";import * as gif from "/gifenc.js";window.__tools={mb,gif};</script></head><body>${paused}</body></html>`;
+  await page.route("http://localhost/**", async (route) => {
+    const path = new URL(route.request().url()).pathname;
+    if (path === "/") return route.fulfill({ contentType: "text/html; charset=utf-8", body: html });
+    const script = SCRIPTS[path];
+    return script ? route.fulfill({ contentType: "text/javascript", body: readFileSync(script) }) : route.fulfill({ status: 404 });
+  });
+  await page.goto("http://localhost/");
+  await page.waitForFunction(() => "__tools" in window);
+  await page.evaluate(async () => {
+    const loads: Promise<FontFace>[] = [];
+    document.fonts.forEach((face) => loads.push(face.load()));
+    await Promise.all(loads);
+    await document.fonts.ready;
+  });
+  return { page, width, height };
+}
+
+/** 止めてある図の時刻を `t` 秒に動かし、描き終わるまで待つ */
+async function at(page: Page, t: number): Promise<void> {
+  await page.evaluate(
+    (t) =>
+      new Promise<void>((done) => {
+        document.querySelector("svg")?.style.setProperty("--at", String(t));
+        requestAnimationFrame(() => requestAnimationFrame(() => done()));
+      }),
+    t,
+  );
+}
+
+/** `t` 秒の止め絵の PNG。図の外 (角の丸みの外) は透明にする */
+export async function still(stage: Stage, t: number): Promise<Buffer> {
+  await at(stage.page, t);
+  return stage.page.screenshot({ type: "png", omitBackground: true });
+}
+
+export interface Film {
+  frames: number;
+  mp4?: Buffer;
+  gif?: Buffer;
+}
+
+/** 頁の中で詰める道具。`sample` で GIF の色の表の元を集め、`seal` で色の表を決めてから `push` でコマを渡す */
+interface FilmBox {
+  sample(png: string): Promise<void>;
+  seal(): void;
+  push(png: string, i: number): Promise<void>;
+  finish(): Promise<{ mp4?: string; gif?: string }>;
+}
+
+/**
+ * 1 周 (`total` 秒) を `fps` で撮り、mp4 と GIF に詰める。GIF は `gifEvery` コマに 1 枚を使い、0 なら作らない。
+ * GIF の色の表は `samples` 秒の絵 (段ごとの止め絵) から 1 つだけ作り、全てのコマをその表で塗る。
+ * コマごとに表を作ると、寄って追う図でコマ全体が動いた後、止まった所の淡い色がコマごとの表でばらばらに残る。
+ */
+export async function film(stage: Stage, plan: { total: number; fps: number; mp4: boolean; gifEvery: number; samples: number[] }): Promise<Film> {
+  const { page, width, height } = stage;
+  await page.evaluate(
+    async ({ width, height, scale, fps, mp4, gifEvery }) => {
+      const { mb, gif } = (window as unknown as { __tools: { mb: any; gif: any } }).__tools;
+      let add: (bitmap: ImageBitmap, i: number) => Promise<void> = () => Promise.resolve();
+      let close: () => Promise<Uint8Array | undefined> = () => Promise.resolve(undefined);
+      if (mp4) {
+        const canvas = new OffscreenCanvas(width * scale, height * scale);
+        const context = canvas.getContext("2d") as OffscreenCanvasRenderingContext2D;
+        const target = new mb.BufferTarget();
+        const output = new mb.Output({ format: new mb.Mp4OutputFormat({ fastStart: "in-memory" }), target });
+        const source = new mb.CanvasSource(canvas, { codec: "avc", bitrate: mb.QUALITY_MEDIUM, keyFrameInterval: 2 });
+        output.addVideoTrack(source, { frameRate: fps });
+        await output.start();
+        add = async (bitmap, i) => {
+          context.drawImage(bitmap, 0, 0);
+          await source.add(i / fps, 1 / fps);
+        };
+        close = async () => {
+          await output.finalize();
+          return new Uint8Array(target.buffer as ArrayBuffer);
+        };
+      }
+
+      // GIF は CSS の 1px を 1 画素で詰める。前のコマの元の絵と 1 つでも色が違う画素だけを書き、残りは透明にする。
+      // 撮る絵は毎回同じなので、動いていない所はぴったり一致する。
+      // 差に幅を持たせると、ゆっくり消える物の最後の数段が書かれず、薄い残りになる
+      const small = new OffscreenCanvas(width, height);
+      const smallContext = small.getContext("2d", { willReadFrequently: true }) as OffscreenCanvasRenderingContext2D;
+      const decode = (png: string): Promise<ImageBitmap> => createImageBitmap(new Blob([Uint8Array.from(atob(png), (c) => c.charCodeAt(0))], { type: "image/png" }));
+      const read = (bitmap: ImageBitmap): Uint8ClampedArray => {
+        smallContext.drawImage(bitmap, 0, 0, width, height);
+        return smallContext.getImageData(0, 0, width, height).data;
+      };
+      const encoder = gifEvery ? gif.GIFEncoder() : undefined;
+      const delay = (gifEvery / fps) * 1000;
+      const sampled: Uint8ClampedArray[] = [];
+      // 色の表。最後の 1 色は透明に使う
+      let colors: number[][] = [];
+      // 色ごとに表のどの色で塗るかを 1 度だけ決めて覚える。`gifenc` の `applyPalette` は似た色の組ごとに
+      // そのコマで最初に見た色で塗る色を決めるので、同じ色でもコマによって塗る色が変わり、
+      // 動いた所だけを書くと、書いたコマごとに淡い色がずれて前の絵の形が浮く
+      const nearest = new Map<number, number>();
+      const toIndex = (data: Uint8ClampedArray): Uint8Array => {
+        const index = new Uint8Array(data.length / 4);
+        for (let p = 0; p < index.length; p++) {
+          const i = p * 4;
+          const key = ((data[i] as number) << 16) | ((data[i + 1] as number) << 8) | (data[i + 2] as number);
+          let k = nearest.get(key);
+          if (k === undefined) {
+            k = gif.nearestColorIndex(colors, [data[i], data[i + 1], data[i + 2]]) as number;
+            nearest.set(key, k);
+          }
+          index[p] = k;
+        }
+        return index;
+      };
+      let previous: Uint8ClampedArray | undefined;
+      const writeGif = (data: Uint8ClampedArray): void => {
+        const clear = colors.length;
+        const index = toIndex(data);
+        const before = previous;
+        previous = data;
+        if (!before) {
+          encoder.writeFrame(index, width, height, { palette: [...colors, [0, 0, 0]], delay, dispose: 1 });
+          return;
+        }
+        let changed = 0;
+        for (let p = 0; p < index.length; p++) {
+          const i = p * 4;
+          if (data[i] === before[i] && data[i + 1] === before[i + 1] && data[i + 2] === before[i + 2]) index[p] = clear;
+          else changed++;
+        }
+        // 変わった所が無いコマは、透明な 1 画素だけを書いて時間だけ進める
+        if (!changed) encoder.writeFrame(new Uint8Array([clear]), 1, 1, { transparent: true, transparentIndex: clear, delay, dispose: 1 });
+        else encoder.writeFrame(index, width, height, { transparent: true, transparentIndex: clear, delay, dispose: 1 });
+      };
+
+      const base64 = (bytes: Uint8Array): string => {
+        let text = "";
+        for (let i = 0; i < bytes.length; i += 0x8000) text += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+        return btoa(text);
+      };
+      const box: FilmBox = {
+        async sample(png) {
+          const bitmap = await decode(png);
+          sampled.push(read(bitmap));
+          bitmap.close();
+        },
+        seal() {
+          const all = new Uint8ClampedArray(sampled.reduce((n, data) => n + data.length, 0));
+          let offset = 0;
+          for (const data of sampled) {
+            all.set(data, offset);
+            offset += data.length;
+          }
+          colors = gif.quantize(all, 255);
+        },
+        async push(png, i) {
+          const bitmap = await decode(png);
+          await add(bitmap, i);
+          if (gifEvery && i % gifEvery === 0) writeGif(read(bitmap));
+          bitmap.close();
+        },
+        async finish() {
+          const video = await close();
+          if (encoder) encoder.finish();
+          return { ...(video ? { mp4: base64(video) } : {}), ...(encoder ? { gif: base64(encoder.bytes() as Uint8Array) } : {}) };
+        },
+      };
+      (window as unknown as { __film: FilmBox }).__film = box;
+    },
+    { width, height, scale: SCALE, fps: plan.fps, mp4: plan.mp4, gifEvery: plan.gifEvery },
+  );
+
+  // コマは CDP で撮る (止め絵の撮り方の半分ほどの時間で済む)。
+  // CDP は頁の画素の細かさを見ないので、撮る範囲に倍率を付けて止め絵と同じ細かさにする
+  const cdp = await page.context().newCDPSession(page);
+  const clip = { x: 0, y: 0, width, height, scale: SCALE };
+  const shoot = async (t: number): Promise<string> => {
+    await at(page, t);
+    return (await cdp.send("Page.captureScreenshot", { format: "png", optimizeForSpeed: true, clip })).data;
+  };
+  if (plan.gifEvery) {
+    for (const t of plan.samples) {
+      const png = await shoot(t);
+      await page.evaluate((png) => (window as unknown as { __film: FilmBox }).__film.sample(png), png);
+    }
+    await page.evaluate(() => (window as unknown as { __film: FilmBox }).__film.seal());
+  }
+  const frames = Math.round(plan.total * plan.fps);
+  for (let i = 0; i < frames; i++) {
+    const png = await shoot(i / plan.fps);
+    await page.evaluate(([png, i]) => (window as unknown as { __film: FilmBox }).__film.push(png, i), [png, i] as const);
+  }
+  const out = await page.evaluate(() => (window as unknown as { __film: FilmBox }).__film.finish());
+  return {
+    frames,
+    ...(out.mp4 ? { mp4: Buffer.from(out.mp4, "base64") } : {}),
+    ...(out.gif ? { gif: Buffer.from(out.gif, "base64") } : {}),
+  };
+}

package/src/export/fonts.ts

@@ -0,0 +1,68 @@
+/**
+ * 書き出す図で描く字だけに、同梱した字の file を削る。
+ *
+ * 同梱した字の package は、字の範囲ごとに分けた file (woff2) と、file ごとの範囲の表 (`unicode.json`) を持つ。
+ * 描く字が入る file だけを、描く字だけに削り、`data:` で埋めた `@font-face` にする。
+ * 太さの軸は、値の表 (`TYPE`) が使う太さの間に縮める。
+ */
+import { readFileSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { FONTS } from "../look/fonts";
+import { TYPE } from "../look/values";
+
+const require_ = createRequire(import.meta.url);
+// subset-font は型を持たないので、使う形だけをここで名指す
+const subsetFont = require_("subset-font") as (
+  font: Buffer,
+  text: string,
+  options: { targetFormat: "woff2"; variationAxes: Record<string, { min: number; max: number }> },
+) => Promise<Buffer>;
+
+/** 字の名前と、その字を持つ package */
+const PACKAGES = [
+  { family: FONTS.sans, name: "noto-sans-jp" },
+  { family: FONTS.mono, name: "jetbrains-mono" },
+] as const;
+
+const weights = Object.values(TYPE).map((style) => style.weight);
+const WEIGHT = { min: Math.min(...weights), max: Math.max(...weights) };
+
+/** `U+30-39,U+3000-303F` の形の範囲の一覧 */
+function ranges(list: string): [number, number][] {
+  return list.split(",").map((part) => {
+    const [from = "", to = from] = part.trim().replace(/^U\+/i, "").split("-");
+    return [parseInt(from, 16), parseInt(to, 16)];
+  });
+}
+
+const hex = (code: number): string => `U+${code.toString(16).toUpperCase()}`;
+
+/** 字を空白ごと集める。改行は字の file に要らない */
+export function charsOf(texts: string[]): string[] {
+  return [...new Set([...texts.join("")])].filter((char) => char !== "\n" && char !== "\r" && char !== "\t").sort();
+}
+
+/** 描く字だけに削った字の file を `data:` で埋めた `@font-face` の並び */
+export async function fontFaces(chars: string[]): Promise<string> {
+  const faces = await Promise.all(
+    PACKAGES.flatMap(({ family, name }) => {
+      const base = dirname(require_.resolve(`@fontsource-variable/${name}/unicode.json`));
+      const table = JSON.parse(readFileSync(join(base, "unicode.json"), "utf8")) as Record<string, string>;
+      return Object.entries(table).map(async ([key, list]) => {
+        const span = ranges(list);
+        const own = chars.filter((char) => {
+          const code = char.codePointAt(0) ?? -1;
+          return span.some(([from, to]) => code >= from && code <= to);
+        });
+        if (!own.length) return "";
+        const file = join(base, "files", `${name}-${key.replace(/[[\]]/g, "")}-wght-normal.woff2`);
+        const woff2 = await subsetFont(await readFile(file), own.join(""), { targetFormat: "woff2", variationAxes: { wght: WEIGHT } });
+        const unicode = own.map((char) => hex(char.codePointAt(0) ?? 0)).join(",");
+        return `@font-face{font-family:"${family}";font-style:normal;font-display:block;font-weight:${WEIGHT.min} ${WEIGHT.max};src:url(data:font/woff2;base64,${woff2.toString("base64")}) format("woff2");unicode-range:${unicode}}`;
+      });
+    }),
+  );
+  return faces.join("");
+}

package/src/export/html.ts

@@ -0,0 +1,32 @@
+/**
+ * 1 file で開ける HTML。削った字と、頁に図を置いて動かす script と、原本の JSON を収める。
+ *
+ * 開くと頁と同じく、枠の幅で見せ方を選び、動きを嫌う設定では止め絵を釦で送る。
+ * 外へ何も取りに行かない。
+ */
+import { readFileSync } from "node:fs";
+import type { Theme } from "../look/values";
+import { esc } from "../render/parts";
+import type { Diagram } from "../schema";
+import type { NotationLang } from "../words";
+
+/** 頁に図を置いて動かす script。build で `player-global.ts` を 1 file に束ねた物 */
+const PLAYER = new URL("./player.global.js", import.meta.url);
+
+/** `lang` は図の中の字 (全体図の札と読み上げの名前) の言葉。頁の `lang` 属性も同じにし、名前をその言葉の声で読ませる (#3001) */
+export function pageHtml(diagram: Diagram, look: { palette: string; theme: Theme; vars: string; lang: NotationLang }, fontCss: string): string {
+  // `</script>` で script が途切れないよう、`<` を JSON の逃がし方で書く
+  const json = JSON.stringify(diagram).replace(/</g, "\\u003c");
+  const options = JSON.stringify({ palette: look.palette, theme: look.theme, lang: look.lang });
+  return [
+    "<!doctype html>",
+    `<html lang="${look.lang}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">`,
+    `<title>${esc(diagram.title)}</title>`,
+    `<style>${fontCss}:root{${look.vars}}html,body{margin:0}body{background:var(--bg)}</style>`,
+    '</head><body><div id="dragon"></div>',
+    `<script type="application/json" id="dragon-diagram">${json}</script>`,
+    `<script>${readFileSync(PLAYER, "utf8").replace(/<\/script/gi, "<\\/script")}</script>`,
+    `<script>DragonPlayer.mountDiagram(document.getElementById("dragon"),JSON.parse(document.getElementById("dragon-diagram").textContent),${options});</script>`,
+    "</body></html>",
+  ].join("\n");
+}