@cardenelabs/dragon 0.34.0 → 0.35.1

package/src/render/parts.ts

@@ -0,0 +1,279 @@
+/**
+ * 区画、箱、線、線の名前、運ぶ物、段の番号、中身の帯を SVG に描く部品。見本帳の `engine.js` の部品を写す。
+ *
+ * どの部品も、置き場所は場面 (`layout/scene.ts`) から、いつ見えるかは時刻の表 (`timeline.ts`) から読む。
+ * 色は色の役の変数 (`--c` と `--ct`) だけを渡し、値は色味の表が持つ。
+ */
+import { hasWide, textWidth } from "../layout/measure";
+import { along, type Point, pathLength, type SceneAction, type SceneBadge, type SceneBox, type SceneEdge, type SceneLabel, type SceneRegion, type SceneStrip } from "../layout/scene";
+import { type ColorKey, EASE, LOOK, MOTION, TYPE } from "../look/values";
+import type { CarrierTime, EdgeTime, LabelTime, Span, Timeline } from "../timeline";
+import { ICONS } from "./icons";
+import type { Frame, Motion } from "./motion";
+
+export const esc = (s: string): string => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const r1 = (v: number): number => Math.round(v * 100) / 100;
+
+/** 色の役を部品へ渡す変数。 */
+export const cs = (k: ColorKey): string => (k === "coin" ? "--c:var(--coin);--ct:var(--coint)" : `--c:var(--c-${k});--ct:var(--t-${k})`);
+
+export function glyph(name: string | undefined, x: number, y: number, scale: number, cls = "dg-gl"): string {
+  const d = name === undefined ? undefined : ICONS[name];
+  return d ? `<path class="${cls}" transform="translate(${r1(x)} ${r1(y)}) scale(${scale})" d="${d}"/>` : "";
+}
+
+export const pathOf = (points: Point[]): string => points.map(([x, y], i) => `${i === 0 ? "M" : "L"} ${r1(x)} ${r1(y)}`).join(" ");
+
+/** 矢じり。線の最後の 2 点の向きに開く。 */
+export function arrowHead(points: Point[]): string {
+  const [ex, ey] = points[points.length - 1] as Point;
+  const [px, py] = points[points.length - 2] as Point;
+  const len = Math.hypot(ex - px, ey - py) || 1;
+  const dx = (ex - px) / len;
+  const dy = (ey - py) / len;
+  const { arrow: a, arrowHalf: h } = LOOK.edge;
+  return `M ${r1(ex - dx * a - dy * h)} ${r1(ey - dy * a + dx * h)} L ${r1(ex)} ${r1(ey)} L ${r1(ex - dx * a + dy * h)} ${r1(ey - dy * a - dx * h)}`;
+}
+
+export interface Ctx {
+  m: Motion;
+  t: Timeline;
+  /** 影の filter を付ける属性 */
+  sh: string;
+  /** 最後の段の終わり */
+  end: number;
+}
+
+/** 時刻の範囲 `[[a, b], ...]` の間だけ出る。 */
+function rangeKf(m: Motion, ranges: [number, number][]): string {
+  const pts: Frame[] = [[0, { opacity: 0 }]];
+  for (const [a, b] of ranges) pts.push([a, { opacity: 0 }, EASE.out], [a + MOTION.fade, { opacity: 1 }], [b - 0.1, { opacity: 1 }, EASE.inOut], [b + 0.25, { opacity: 0 }]);
+  pts.push([m.total, { opacity: 0 }]);
+  return m.kf(pts);
+}
+
+/** 箱が動く段の並びを、続いた段は 1 つの範囲にまとめて出す。 */
+export function activeKf(ctx: Ctx, on: number[]): string {
+  const ranges: [number, number][] = [];
+  for (let k = 0; k < on.length; ) {
+    let e = k;
+    while (e + 1 < on.length && on[e + 1] === (on[e] as number) + 1) e++;
+    ranges.push([(ctx.t.steps[on[k] as number] as Span).start, (ctx.t.steps[on[e] as number] as Span).end]);
+    k = e + 1;
+  }
+  return rangeKf(ctx.m, ranges);
+}
+
+export function band(region: SceneRegion): string {
+  const { radius, icon, iconRadius, iconScale, nameY, line } = LOOK.region;
+  const { x, y } = region.header;
+  const lines = region.lines.map((t, k) => `<text class="dg-bz" x="${r1(x)}" y="${r1(region.y + nameY + k * line)}">${esc(t)}</text>`).join("");
+  const note = region.note ? `<text class="dg-bx" x="${r1(x)}" y="${r1(region.y + nameY + region.lines.length * line + 1)}">${esc(region.note)}</text>` : "";
+  const mark = region.icon && ICONS[region.icon] ? `<rect class="dg-bi" x="${r1(x)}" y="${r1(y)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(region.icon, x + icon / 2, y + icon / 2, iconScale)}` : "";
+  return `<g style="${cs(region.color)}"><rect class="dg-band" x="${r1(region.x + 0.5)}" y="${r1(region.y + 0.5)}" width="${r1(region.w - 1)}" height="${r1(region.h - 1)}" rx="${radius}"/>${mark}${lines}${note}</g>`;
+}
+
+/** 箱の下の小さな字の移り変わり。`[時刻, 字, class]` の並びで、最初は元の字。 */
+export type SubChange = [number, string, string];
+
+/** 箱。動く段は縁に色を付け、外側に淡い光を足す。下の小さな字は起きたことに合わせて書き換わる。 */
+export function card(box: SceneBox, ctx: Ctx, on: number[], changes: SubChange[]): string {
+  const { m, sh } = ctx;
+  const { radius, icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
+  const seq: SubChange[] = [[0, box.sub ?? "", "dg-ss"], ...changes];
+  const subs = seq
+    .map(([t, text, cls], k) => {
+      const next = seq[k + 1]?.[0];
+      const anim = k === 0 ? (next === undefined ? "" : m.until(next - MOTION.untilFade)) : next === undefined ? m.rise(t) : m.rise(t, next - MOTION.untilFade);
+      if (text === "") return "";
+      return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(box.cy + subY)}" text-anchor="middle">${esc(text)}</text></g>`;
+    })
+    .join("");
+  const act = on.length > 0 ? activeKf(ctx, on) : undefined;
+  const rect = (cls: string, extra = ""): string => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${box.h}" rx="${radius}"${extra}/>`;
+  const mark =
+    box.icon && ICONS[box.icon]
+      ? `<rect class="dg-ic" x="${r1(box.cx - icon / 2)}" y="${r1(box.cy + iconY - icon / 2)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(box.icon, box.cx, box.cy + iconY, iconScale)}`
+      : "";
+  return (
+    `<g style="${cs(box.color)}">${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}` +
+    `${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`
+  );
+}
+
+export function lifeline(x: number, y1: number, y2: number): string {
+  return `<line class="dg-ll" x1="${r1(x)}" y1="${r1(y1)}" x2="${r1(x)}" y2="${r1(y2)}"/>`;
+}
+
+/**
+ * 線。点線で道を見せておき、その段で色の線を引いて、段の終わりまで流れる点で向きを見せる。
+ * 済んだ段は薄く残し、最後の段の後に通った道を全て濃くし直す。
+ */
+export function edge(e: SceneEdge, time: EdgeTime, ctx: Ctx): { base: string; lit: string } {
+  const { m } = ctx;
+  const d = pathOf(e.points);
+  const head = arrowHead(e.points);
+  const { start: a, drawn: b, end } = time;
+  const tail: Frame[] = [
+    [end, { opacity: 1 }, EASE.inOut],
+    [end + 0.4, { opacity: 0.45 }],
+    [ctx.end + 0.3, { opacity: 0.45 }, EASE.inOut],
+    [ctx.end + 1, { opacity: 0.95 }],
+    [m.last, { opacity: 0.95 }, EASE.inOut],
+    [m.total, { opacity: 0 }],
+  ];
+  const line = m.kf([
+    [0, { opacity: 0, "stroke-dashoffset": 1 }],
+    [a, { opacity: 0, "stroke-dashoffset": 1 }, EASE.inOut],
+    [a + 0.05, { opacity: 1 }],
+    [b, { "stroke-dashoffset": 0 }],
+    [m.last, { "stroke-dashoffset": 0 }],
+    [m.total, { "stroke-dashoffset": 1 }],
+    ...tail,
+  ]);
+  const hk = m.kf([[0, { opacity: 0 }], [b - 0.05, { opacity: 0 }], [b, { opacity: 1 }], ...tail]);
+  const run = -(end - b) * 26;
+  const flow = m.kf([
+    [0, { opacity: 0, "stroke-dashoffset": 0 }],
+    [b, { opacity: 0, "stroke-dashoffset": 0 }],
+    [b + 0.25, { opacity: 0.9 }],
+    [end - 0.1, { opacity: 0.9 }, EASE.inOut],
+    [end + 0.2, { opacity: 0, "stroke-dashoffset": run }],
+    [m.total, { opacity: 0, "stroke-dashoffset": run }],
+  ]);
+  return {
+    base: `<path class="dg-e" d="${d}"/><path class="dg-eh" d="${head}"/>`,
+    lit: `<g style="${cs(e.color)}"><path class="dg-e-on dg-a" pathLength="1" d="${d}" style="${line}"/><path class="dg-eh-on dg-a" d="${head}" style="${hk}"/><path class="dg-flow dg-a" d="${d}" style="${flow}"/></g>`,
+  };
+}
+
+/** 線の名前の札。その段の間だけ出し、段の終わりまでに消え終わる。 */
+export function label(l: SceneLabel, time: LabelTime, ctx: Ctx): string {
+  const ja = l.family === "sans" ? " dg-capj" : "";
+  const { radius } = LOOK.label;
+  return `<g class="dg-cap${ja} dg-a" style="${cs(l.color)};${ctx.m.rise(time.start, time.end, true)}"><rect x="${r1(l.x)}" y="${r1(l.y)}" width="${r1(l.w)}" height="${l.h}" rx="${radius}"/><text x="${r1(l.x + l.w / 2)}" y="${r1(l.y + l.h / 2 + LOOK.baseline.label)}" text-anchor="middle">${esc(l.text)}</text></g>`;
+}
+
+/** 時系列図の箱の中の処理の札。その段の間だけ生存線の上に出す。 */
+export function action(a: SceneAction, at: number, until: number, ctx: Ctx): string {
+  return `<g class="dg-act dg-a" style="${cs(a.color)};${ctx.m.rise(at, until, true)}"><rect x="${r1(a.x)}" y="${r1(a.y)}" width="${r1(a.w)}" height="${a.h}" rx="${LOOK.action.radius}"/><text x="${r1(a.x + a.w / 2)}" y="${r1(a.y + a.h / 2 + LOOK.baseline.action)}" text-anchor="middle">${esc(a.text)}</text></g>`;
+}
+
+function carrierShape(e: SceneEdge, sh: string): string {
+  const C = LOOK.carrier;
+  if (e.carry.kind === "coin") return `<circle class="dg-coin" r="${C.coinR}"/><circle class="dg-coin-in" r="${C.coinIn}"/>`;
+  if (e.carry.kind === "tag") {
+    const text = e.carry.text;
+    const ja = hasWide(text);
+    const w = textWidth(text, ja ? TYPE.carrierJa : TYPE.carrier) + C.tagPadX * 2;
+    return `<rect class="dg-car" x="${r1(-w / 2)}" y="${-C.tagH / 2}" width="${r1(w)}" height="${C.tagH}" rx="${C.tagH / 2}" ${sh}/><text class="dg-car-t${ja ? " dg-car-tj" : ""}" y="${LOOK.baseline.carrier}" text-anchor="middle">${esc(text)}</text>`;
+  }
+  return `<rect class="dg-env" x="${-C.envW / 2}" y="${-C.envH / 2}" width="${C.envW}" height="${C.envH}" rx="3" ${sh}/><path class="dg-env-in" d="M -8 -4.5 L 0 1.5 L 8 -4.5"/>`;
+}
+
+const easeInOut = (t: number): number => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+
+/** 運ぶ物。線の上を走り、着いた先 (`settle`) へ寄って、次の同じ主役が出発するまで留まる。 */
+export function carrier(e: SceneEdge, time: CarrierTime, ctx: Ctx): string {
+  const { m } = ctx;
+  const n = LOOK.carrier.samples;
+  const length = pathLength(e.points);
+  const { depart: a, arrive: b, start: from, end: gone } = time;
+  const path: [number, number, number][] = [];
+  for (let k = 0; k <= n; k++) {
+    const [x, y] = along(e.points, easeInOut(k / n) * length);
+    path.push([a + ((b - a) * k) / n, x, y]);
+  }
+  const first = path[0] as [number, number, number];
+  const lastPoint = path[path.length - 1] as [number, number, number];
+  const rest: Point = e.settle ?? [lastPoint[1], lastPoint[2]];
+  const pts: [number, number, number][] = [[0, first[1], first[2]], ...path];
+  if (e.settle) pts.push([Math.min(b + 0.3, Math.max(gone, b + 0.01)), rest[0], rest[1]]);
+  pts.push([gone, rest[0], rest[1]], [m.total, rest[0], rest[1]]);
+  // 次の運ぶ物と入れ替わる時は、重なって 2 つに見えないよう素早く消す
+  const fade = gone < m.last ? 0.05 : 0.18;
+  return `<g class="dg-a" style="${m.move(pts, m.blink(from + 0.02, gone, fade))}">${carrierShape(e, ctx.sh)}</g>`;
+}
+
+/** 段の番号。まだ来ていない段は出さず、今の段は塗り、済んだ段は縁取りに変えて番号を読めるまま残す。 */
+export function badge(b: SceneBadge, ctx: Ctx): string {
+  const { m } = ctx;
+  const span = ctx.t.steps[b.step] as Span;
+  const a = span.start;
+  const e = span.end;
+  const { r, ring: rr } = LOOK.badge;
+  const fill = m.kf([
+    [0, { opacity: 0, transform: "scale(.5)" }],
+    [a, { opacity: 0, transform: "scale(.5)" }, EASE.pop],
+    [a + 0.35, { opacity: 1, transform: "scale(1)" }],
+    [e, { opacity: 1, transform: "scale(1)" }, EASE.inOut],
+    [e + 0.4, { opacity: 0, transform: "scale(1)" }],
+    [m.total, { opacity: 0, transform: "scale(.5)" }],
+  ]);
+  const past = m.kf([[0, { opacity: 0 }], [e, { opacity: 0 }, EASE.inOut], [e + 0.4, { opacity: 1 }], [m.last, { opacity: 1 }, EASE.inOut], [m.total, { opacity: 0 }]]);
+  const ring = m.kf([
+    [0, { opacity: 0, transform: "scale(1)" }],
+    [a + 0.05, { opacity: 0, transform: "scale(1)" }],
+    [a + 0.1, { opacity: 0.7, transform: "scale(1)" }, EASE.out],
+    [a + 0.9, { opacity: 0, transform: "scale(2.3)" }],
+    [m.total, { opacity: 0, transform: "scale(1)" }],
+  ]);
+  const x = r1(b.x);
+  const y = r1(b.y);
+  const ty = r1(b.y + LOOK.baseline.badge);
+  const no = b.step + 1;
+  return (
+    `<g class="dg-bd" data-step="${b.step}" style="${cs(b.color)}"><circle class="dg-bdr dg-popc dg-a" cx="${x}" cy="${y}" r="${rr}" style="${ring}"/>` +
+    `<g class="dg-a" style="${past}"><circle class="dg-bdp" cx="${x}" cy="${y}" r="${rr}"/><text class="dg-bdpt" x="${x}" y="${ty}" text-anchor="middle">${no}</text></g>` +
+    `<g class="dg-popc dg-a" style="${fill}"><circle class="dg-bdf" cx="${x}" cy="${y}" r="${r}"/><text class="dg-bdft" x="${x}" y="${ty}" text-anchor="middle">${no}</text></g></g>`
+  );
+}
+
+/** 中身の帯の 1 欄の移り変わり。値と札は、次の値か札が来るまで出る。 */
+export interface FieldChange {
+  at: number;
+  value?: string;
+  tag?: string;
+  color: ColorKey;
+}
+
+export function strip(s: SceneStrip, changes: Map<string, FieldChange[]>, ctx: Ctx): string {
+  const { m, sh } = ctx;
+  const S = LOOK.strip;
+  const my = s.y + S.h / 2;
+  const parts = [
+    `<rect class="dg-strip" x="${r1(s.x + 0.5)}" y="${r1(s.y + 0.5)}" width="${r1(s.w - 1)}" height="${r1(s.h - 1)}" rx="${LOOK.region.radius}" ${sh}/>`,
+    `<g style="${cs("slate")}"><rect class="dg-bi" x="${r1(s.x + S.pad)}" y="${r1(my - S.icon / 2)}" width="${S.icon}" height="${S.icon}" rx="${LOOK.box.iconRadius}"/>${glyph("env", s.x + S.pad + S.icon / 2, my, 0.78)}</g>`,
+    `<text class="dg-sh" x="${r1(s.x + S.titleX)}" y="${r1(my + LOOK.baseline.stripTitle)}">${esc(s.title)}</text>`,
+  ];
+  s.fields.forEach((field, i) => {
+    const prev = s.fields[i - 1];
+    if (prev && prev.y === field.y) {
+      const sx = field.x - S.fieldGap / 2;
+      parts.push(`<line class="dg-sep" x1="${r1(sx)}" y1="${r1(field.y + S.sepInset)}" x2="${r1(sx)}" y2="${r1(field.y + S.h - S.sepInset)}"/>`);
+    }
+    parts.push(`<text class="dg-fl" x="${r1(field.x)}" y="${r1(field.y + S.nameY)}">${esc(field.name)}</text>`);
+    const list = changes.get(field.name) ?? [];
+    const values = list.filter((c) => c.value !== undefined);
+    const tags = list.filter((c) => c.tag !== undefined);
+    values.forEach((c, k) => {
+      const next = values[k + 1]?.at;
+      const value = c.value as string;
+      const anim = next === undefined ? m.rise(c.at) : m.rise(c.at, next - MOTION.untilFade);
+      parts.push(`<g class="dg-a" style="${anim}"><text class="${hasWide(value) ? "dg-fvj" : "dg-fv"}" x="${r1(field.x)}" y="${r1(field.y + S.valueY)}">${esc(value)}</text></g>`);
+    });
+    tags.forEach((c, k) => {
+      const next = tags[k + 1]?.at;
+      const tag = c.tag as string;
+      // 札は、その時に出ている値の右に置く
+      const shown = [...values].reverse().find((v) => v.at <= c.at + 1e-9)?.value;
+      const x = field.x + (shown ? textWidth(shown, hasWide(shown) ? TYPE.fieldValueJa : TYPE.fieldValue) + S.tagGap : 0);
+      const w = textWidth(tag, TYPE.tag) + S.tagPadX * 2;
+      const y = field.y + S.valueY - S.tagH / 2 - LOOK.baseline.tag;
+      parts.push(
+        `<g class="dg-tg dg-popc dg-a" style="${cs(c.color)};${next === undefined ? m.pop(c.at) : m.pop(c.at, next - MOTION.untilFade)}"><rect x="${r1(x)}" y="${r1(y)}" width="${r1(w)}" height="${S.tagH}" rx="${S.tagH / 2}"/><text x="${r1(x + w / 2)}" y="${r1(y + S.tagH / 2 + LOOK.baseline.tag)}" text-anchor="middle">${esc(tag)}</text></g>`,
+      );
+    });
+  });
+  return parts.join("");
+}

package/src/render/svg.ts

@@ -0,0 +1,341 @@
+/**
+ * 原本の JSON から図を描く入口。置き場所と時刻の表を作り、部品を重なりの順に並べて SVG にする。
+ *
+ * 動きは全て SVG の中の CSS の keyframes が回す。1 周の長さは `--T`、止める時刻は `--at`、
+ * 止めるか流すかは `--play` の変数で外から変えられる (頁に置く `player.ts` がこれを使う)。
+ * 色と字は値の表から CSS の変数として 1 度だけ書き、部品はその変数だけを読む。
+ */
+import { FIGURE_TEXT } from "../figure-text";
+import { layoutArchitecture } from "../layout/architecture";
+import { textWidth } from "../layout/measure";
+import type { Layout, Rect } from "../layout/scene";
+import { layoutSequence } from "../layout/sequence";
+import { FONTS } from "../look/fonts";
+import { type ColorKey, EASE, FONT_VARS, LOOK, MOTION, type Palette, paletteVars, resolvePalette, type TextStyle, type Theme, TYPE } from "../look/values";
+import { readDiagram } from "../version";
+import type { Diagram, ViewMode } from "../schema";
+import { buildTimeline, type Span, type Timeline } from "../timeline";
+import type { NotationLang } from "../words";
+import { action, badge, band, card, carrier, type Ctx, cs, edge, esc, type FieldChange, label, lifeline, strip, type SubChange } from "./parts";
+import { Motion } from "./motion";
+
+export interface RenderOptions {
+  /** 色味の名前。書かないか知らない名前なら紙と墨 */
+  palette?: string;
+  theme?: Theme;
+  /** 描く部品が出す字 (断りの文、全体図の札、読み上げの名前) の言葉。書かなければ日本語 (#3001) */
+  lang?: NotationLang;
+}
+
+export interface Rendered {
+  svg: string;
+  palette: string;
+  theme: Theme;
+  /** 書き手が原本で決めた見せ方 */
+  view?: ViewMode;
+  fonts: { sans: string; mono: string };
+  layout: Layout;
+  timeline: Timeline;
+  diagram: Diagram;
+}
+
+const font = (t: TextStyle): string => `font:${t.weight} ${t.size}px var(--${t.family})`;
+const mix = (pct: number, base = "var(--surf)"): string => `color-mix(in srgb,var(--c) ${pct}%,${base})`;
+const S = LOOK.stroke;
+const X = LOOK.mix;
+
+/** 部品の見た目。どの値も値の表から読む。 */
+const PART_CSS = [
+  ".dg{display:block;width:100%;height:auto;overflow:visible}",
+  ".dg .dg-a{animation-duration:var(--T);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:calc(var(--at,0) * -1s);animation-play-state:var(--play,running)}",
+  ".dg .dg-popc{transform-box:fill-box;transform-origin:center}",
+  ".dg-bg{fill:var(--bg)}",
+  ".dg-band{fill:color-mix(in srgb,var(--c) var(--tint),var(--bg));stroke:color-mix(in srgb,var(--c) var(--edge),transparent)}",
+  `.dg-bi{fill:${mix(X.regionIcon)};stroke:${mix(X.regionIconEdge, "transparent")}}`,
+  `.dg-bz{${font(TYPE.regionName)};fill:var(--ct)}`,
+  `.dg-bx{${font(TYPE.regionNote)};fill:var(--mute)}`,
+  ".dg-st{fill:var(--surf);stroke:var(--hair)}",
+  `.dg-halo{fill:none;stroke:var(--c);stroke-width:${S.halo};stroke-opacity:.16}`,
+  `.dg-on{fill:none;stroke:var(--c);stroke-width:${S.on}}`,
+  `.dg-ic{fill:${mix(X.icon)}}`,
+  `.dg-gl{fill:none;stroke:var(--c);stroke-width:${S.glyph};stroke-linecap:round;stroke-linejoin:round}`,
+  `.dg-sn{${font(TYPE.boxName)};fill:var(--ink)}`,
+  `.dg-ss{${font(TYPE.boxSub)};fill:var(--mute)}`,
+  `.dg-ss-ok{${font(TYPE.boxSubStrong)};fill:var(--ct)}`,
+  `.dg-ss-act{${font(TYPE.boxSubStrong)};fill:var(--ink)}`,
+  `.dg-ll{stroke:var(--line);stroke-width:${S.lifeline};stroke-dasharray:3 4}`,
+  `.dg-e{fill:none;stroke:var(--line);stroke-width:${S.edge};stroke-linecap:round;stroke-dasharray:0 ${LOOK.edge.ghostDash}}`,
+  `.dg-eh{fill:none;stroke:var(--line);stroke-width:${S.arrow};stroke-linecap:round;stroke-linejoin:round}`,
+  `.dg-e-on{fill:none;stroke:var(--c);stroke-width:${S.edgeOn};stroke-linecap:round;stroke-dasharray:1 2}`,
+  `.dg-eh-on{fill:none;stroke:var(--c);stroke-width:${S.edgeOn};stroke-linecap:round;stroke-linejoin:round}`,
+  `.dg-flow{fill:none;stroke:var(--surf);stroke-width:${S.flow};stroke-linecap:round;stroke-dasharray:1.5 ${LOOK.edge.flowDash}}`,
+  ".dg-bd{cursor:pointer}",
+  ".dg-bdf{fill:var(--c)}",
+  `.dg-bdft{${font(TYPE.badge)};fill:var(--on-c)}`,
+  `.dg-bdr{fill:none;stroke:var(--c);stroke-width:${S.badgeRing}}`,
+  `.dg-bdp{fill:${mix(X.badgePast)};stroke:${mix(X.badgePastEdge, "transparent")};stroke-width:${S.hair}}`,
+  `.dg-bdpt{${font(TYPE.badge)};fill:var(--ct)}`,
+  `.dg-cap rect,.dg-act rect{fill:${mix(X.cap)};stroke:${mix(X.capEdge, "transparent")}}`,
+  `.dg-cap text{${font(TYPE.label)};fill:var(--ct)}`,
+  `.dg-capj text{${font(TYPE.labelJa)}}`,
+  `.dg-act text{${font(TYPE.action)};fill:var(--ct)}`,
+  ".dg-car{fill:var(--carry,var(--ink))}",
+  `.dg-car-t{${font(TYPE.carrier)};fill:var(--bg)}`,
+  `.dg-car-tj{${font(TYPE.carrierJa)}}`,
+  `.dg-env{fill:var(--carry,var(--ink));stroke:var(--surf);stroke-width:${S.envelope}}`,
+  `.dg-env-in{fill:none;stroke:var(--surf);stroke-width:${S.flow};stroke-linejoin:round;stroke-linecap:round}`,
+  ".dg-coin{fill:var(--coin);stroke:var(--surf);stroke-width:1.2}",
+  ".dg-coin-in{fill:none;stroke:var(--coinin);stroke-width:1.1}",
+  ".dg-strip{fill:var(--surf);stroke:var(--hair)}",
+  `.dg-sep{stroke:var(--hair);stroke-width:${S.hair}}`,
+  `.dg-sh{${font(TYPE.stripTitle)};fill:var(--ink)}`,
+  `.dg-fl{${font(TYPE.fieldName)};fill:var(--mute)}`,
+  `.dg-fv{${font(TYPE.fieldValue)};fill:var(--ink)}`,
+  `.dg-fvj{${font(TYPE.fieldValueJa)};fill:var(--ink)}`,
+  ".dg-tg rect{fill:var(--c)}",
+  `.dg-tg text{${font(TYPE.tag)};fill:var(--on-c)}`,
+  ".dg-vp-bg{fill:var(--bg)}",
+  ".dg-vp-frame{fill:none;stroke:var(--hair)}",
+  ".dg-mm-bg{fill:var(--surf);stroke:var(--hair)}",
+  `.dg-mm-t{${font(TYPE.miniTitle)};fill:var(--mute)}`,
+  ".dg-mm-world{fill:var(--sunk);stroke:var(--hair)}",
+  `.dg-mm-band{fill:${mix(X.miniBand)};stroke:${mix(X.miniBandEdge, "transparent")};stroke-width:.6}`,
+  `.dg-mm-card{fill:${mix(X.mini)}}`,
+  `.dg-mm-vp{fill:color-mix(in srgb,var(--ink) ${X.view}%,transparent);stroke:var(--ink);stroke-width:${S.badgeRing};vector-effect:non-scaling-stroke}`,
+].join("");
+
+/** 同じ原本と同じ見た目からは同じ名前になるよう、中身から短い名前を作る (keyframes の名前が頁の中で混ざらないため)。 */
+function nameOf(text: string): string {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return (h >>> 0).toString(36);
+}
+
+/** 各箱が動く段。線の両端、処理、字の書き換えの箱。 */
+function involved(diagram: Diagram): Map<string, number[]> {
+  const on = new Map<string, Set<number>>();
+  const add = (id: string, s: number): void => {
+    on.set(id, (on.get(id) ?? new Set()).add(s));
+  };
+  diagram.steps.forEach((step, s) => {
+    for (const event of step.events) {
+      if (event.type === "edge") {
+        add(event.from, s);
+        add(event.to, s);
+      } else if (event.type === "action" || event.type === "swap") add(event.box, s);
+    }
+  });
+  return new Map([...on].map(([id, steps]) => [id, [...steps].sort((a, b) => a - b)]));
+}
+
+/** 箱の下の字の移り変わり。書き換えはそのまま残し、構成図の処理はその段の間だけ出して元へ戻す。 */
+function subChanges(diagram: Diagram, timeline: Timeline, actionsInBox: boolean): Map<string, SubChange[]> {
+  type Raw = { t: number; order: number; box: string; set?: string; act?: string | null };
+  const raw: Raw[] = [];
+  let order = 0;
+  for (const time of timeline.events) {
+    const event = diagram.steps[time.step]?.events[time.event];
+    if (event?.type === "swap") raw.push({ t: time.at, order: order++, box: event.box, set: event.text });
+    if (actionsInBox && event?.type === "action") {
+      raw.push({ t: time.at, order: order++, box: event.box, act: event.label });
+      raw.push({ t: (timeline.steps[time.step] as Span).end, order: order++, box: event.box, act: null });
+    }
+  }
+  raw.sort((a, b) => a.t - b.t || a.order - b.order);
+  const out = new Map<string, SubChange[]>();
+  for (const box of diagram.boxes) {
+    let base: [string, string] = [box.sub ?? "", "dg-ss"];
+    let acting: string | undefined;
+    let shown = base.join("|");
+    const list: SubChange[] = [];
+    for (const change of raw.filter((r) => r.box === box.id)) {
+      // 書き換えは、出ている処理の字も置き換える
+      if (change.set !== undefined) {
+        base = [change.set, "dg-ss-ok"];
+        acting = undefined;
+      }
+      if (change.act !== undefined) acting = change.act ?? undefined;
+      const now: [string, string] = acting !== undefined ? [acting, "dg-ss-act"] : base;
+      if (now.join("|") === shown) continue;
+      shown = now.join("|");
+      list.push([change.t, now[0], now[1]]);
+    }
+    // すぐ次の字に替わる字は読めないので出さない
+    const kept = list.filter((change, k) => {
+      const next = list[k + 1];
+      return next === undefined || next[0] - change[0] >= MOTION.minShow;
+    });
+    out.set(box.id, kept);
+  }
+  return out;
+}
+
+function fieldChanges(diagram: Diagram, timeline: Timeline, layout: Layout): Map<string, FieldChange[]> {
+  const out = new Map<string, FieldChange[]>();
+  for (const time of timeline.events) {
+    const event = diagram.steps[time.step]?.events[time.event];
+    if (event?.type !== "strip") continue;
+    const color: ColorKey = layout.badges[time.step]?.color ?? "slate";
+    const list = out.get(event.field) ?? [];
+    list.push({ at: time.at, color, ...(event.value !== undefined ? { value: event.value } : {}), ...(event.tag !== undefined ? { tag: event.tag } : {}) });
+    out.set(event.field, list);
+  }
+  return out;
+}
+
+export interface FollowFrame {
+  /** 枠の幅 (px)。寄って追う窓はこの幅で、字を原寸で見せる */
+  width: number;
+  /** 隅の全体図の札の言葉。渡し忘れを型の検査で止めるため、省けない欄にする */
+  lang: NotationLang;
+}
+
+/** 図を描く。`follow` を渡すと、寄って追う窓と隅の全体図で描く。 */
+export function drawSvg(diagram: Diagram, layout: Layout, timeline: Timeline, palette: Palette, theme: Theme, follow?: FollowFrame): string {
+  // 札の言葉で全体図の地の幅が変わりうるので、同じ頁に置いた別の言葉の図と名前を分ける
+  const id = nameOf(`${JSON.stringify(diagram)}|${palette.id}|${theme}|${follow ? `${follow.width}|${follow.lang}` : ""}`);
+  const m = new Motion(`dg${id}`, timeline.total, timeline.last);
+  const ctx: Ctx = { m, t: timeline, sh: `filter="url(#dg-sh-${id})"`, end: (timeline.steps[timeline.steps.length - 1] as Span).end };
+  const on = involved(diagram);
+  const subs = subChanges(diagram, timeline, layout.kind === "architecture");
+
+  const L = { band: [] as string[], base: [] as string[], lit: [] as string[], node: [] as string[], badge: [] as string[], top: [] as string[] };
+  for (const region of layout.regions) L.band.push(band(region));
+  if (layout.strip) L.band.push(strip(layout.strip, fieldChanges(diagram, timeline, layout), ctx));
+  for (const line of layout.lifelines) L.base.push(lifeline(line.x, line.y1, line.y2));
+  for (const e of layout.edges) {
+    const time = timeline.edges.find((t) => t.step === e.step && t.event === e.event);
+    if (!time) continue;
+    const drawn = edge(e, time, ctx);
+    L.base.push(drawn.base);
+    L.lit.push(drawn.lit);
+  }
+  for (const box of layout.boxes) L.node.push(card(box, ctx, on.get(box.id) ?? [], subs.get(box.id) ?? []));
+  for (const b of layout.badges) L.badge.push(badge(b, ctx));
+  for (const l of layout.labels) {
+    const time = timeline.labels.find((t) => t.step === l.step && t.event === l.event);
+    if (time) L.top.push(label(l, time, ctx));
+  }
+  for (const a of layout.actions) {
+    const time = timeline.events.find((t) => t.step === a.step && t.event === a.event);
+    if (time) L.top.push(action(a, time.at, (timeline.steps[a.step] as Span).end, ctx));
+  }
+  for (const time of timeline.carriers) {
+    const e = layout.edges.find((x) => x.step === time.step && x.event === time.event);
+    if (e) L.top.push(carrier(e, time, ctx));
+  }
+  const content = Object.values(L)
+    .map((parts) => parts.join(""))
+    .join("");
+
+  const { near, far, nearY, farY } = LOOK.shadow;
+  const shadow = `<filter id="dg-sh-${id}" x="-20%" y="-30%" width="140%" height="180%"><feDropShadow dx="0" dy="${nearY}" stdDeviation="${near}" style="flood-color:var(--sh);flood-opacity:var(--shA)"/><feDropShadow dx="0" dy="${farY}" stdDeviation="${far}" style="flood-color:var(--sh);flood-opacity:var(--shB)"/></filter>`;
+  const view = follow ? followView(layout, timeline, diagram, m, id, content, follow) : { body: `<rect class="dg-bg" width="${layout.width}" height="${layout.height}" rx="${LOOK.region.radius}"/>${content}`, w: layout.width, h: layout.height };
+  const css = `.dg-${id}{${FONT_VARS};--T:${timeline.total}s;${paletteVars(palette, theme)}}${PART_CSS}${m.frames.join("")}`;
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" class="dg dg-${id}" viewBox="0 0 ${Math.ceil(view.w)} ${Math.ceil(view.h)}" width="${Math.ceil(view.w)}" height="${Math.ceil(view.h)}" role="img" aria-label="${esc(diagram.title)}" data-dragon="figure" data-view="${follow ? "follow" : "fixed"}">` +
+    `<style>${css}</style><defs>${shadow}</defs>${view.body}</svg>`
+  );
+}
+
+/** 段で動く物が占める所。 */
+function focusOf(layout: Layout, diagram: Diagram, step: number): Rect | undefined {
+  const rects: Rect[] = [];
+  for (const e of layout.edges.filter((x) => x.step === step)) {
+    const xs = e.points.map((p) => p[0]);
+    const ys = e.points.map((p) => p[1]);
+    rects.push({ x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) });
+  }
+  rects.push(...layout.labels.filter((l) => l.step === step), ...layout.actions.filter((a) => a.step === step));
+  for (const event of diagram.steps[step]?.events ?? []) {
+    const ids = event.type === "edge" ? [event.from, event.to] : event.type === "action" || event.type === "swap" ? [event.box] : [];
+    for (const id of ids) {
+      const box = layout.boxes.find((b) => b.id === id);
+      // 時系列図の頭の箱は遠いので、線の行だけを見る
+      if (box && (layout.kind === "architecture" || event.type === "swap")) rects.push(box);
+    }
+  }
+  if (rects.length === 0) return undefined;
+  const x = Math.min(...rects.map((r) => r.x));
+  const y = Math.min(...rects.map((r) => r.y));
+  return { x, y, w: Math.max(...rects.map((r) => r.x + r.w)) - x, h: Math.max(...rects.map((r) => r.y + r.h)) - y };
+}
+
+/** 寄って追う窓。段ごとに動く所へ寄り、隅の全体図に今見ている所の枠を同じ動きで出す。 */
+function followView(layout: Layout, timeline: Timeline, diagram: Diagram, m: Motion, id: string, content: string, follow: FollowFrame): { body: string; w: number; h: number } {
+  const F = LOOK.follow;
+  const M = LOOK.mini;
+  const vw = Math.min(layout.width, Math.max(1, follow.width));
+  const vh = Math.min(layout.height, Math.max(F.minH, vw * F.aspect));
+  const clampX = (x: number): number => Math.min(layout.width - vw / 2, Math.max(vw / 2, x));
+  const clampY = (y: number): number => Math.min(layout.height - vh / 2, Math.max(vh / 2, y));
+  let prev: [number, number] = [layout.width / 2, layout.height / 2];
+  const centers = timeline.steps.map((_, s) => {
+    const f = focusOf(layout, diagram, s);
+    prev = f ? [f.x + f.w / 2, f.y + f.h / 2] : prev;
+    return [clampX(prev[0]), clampY(prev[1])] as [number, number];
+  });
+  const c0 = centers[0] as [number, number];
+  const cam: [number, number, number, number?, string?][] = [
+    [0, c0[0], c0[1]],
+    [(timeline.steps[0] as Span).start, c0[0], c0[1]],
+  ];
+  centers.forEach((c, s) => {
+    if (s === 0) return;
+    const before = centers[s - 1] as [number, number];
+    const start = (timeline.steps[s] as Span).start;
+    cam.push([start, before[0], before[1], 1, EASE.inOut], [start + F.ease, c[0], c[1]]);
+  });
+  const cl = centers[centers.length - 1] as [number, number];
+  cam.push([timeline.last, cl[0], cl[1], 1, EASE.inOut], [timeline.total, c0[0], c0[1]]);
+  const camKf = m.move(cam.map(([t, cx, cy, s, e]) => [t, vw / 2 - cx, vh / 2 - cy, s, e]));
+
+  const mw = Math.min(M.w, vw * 0.4, ((vh * 0.4) / layout.height) * layout.width);
+  const k = mw / layout.width;
+  const mh = layout.height * k;
+  // 地の幅は図の縦横の比で決まるので、縦に長い図では札より狭くなる。その時は地を札の幅まで広げ、図は広げた地の真ん中に置く
+  const title = FIGURE_TEXT[follow.lang].overview;
+  const bw = Math.max(mw, Math.ceil(textWidth(title, TYPE.miniTitle)));
+  const bx = vw - bw - M.inset - M.pad;
+  const mx = bx + (bw - mw) / 2;
+  const my = M.inset + M.pad + M.title;
+  const shapes = [
+    ...layout.regions.map((r) => `<rect class="dg-mm-band" style="${cs(r.color)}" x="${mx + r.x * k}" y="${my + r.y * k}" width="${r.w * k}" height="${r.h * k}" rx="3"/>`),
+    ...layout.boxes.map((b) => `<rect class="dg-mm-card" style="${cs(b.color)}" x="${mx + b.x * k}" y="${my + b.y * k}" width="${b.w * k}" height="${b.h * k}" rx="1.5"/>`),
+  ].join("");
+  const vp = m.move(cam.map(([t, cx, cy, , e]) => [t, mx + (cx - vw / 2) * k, my + (cy - vh / 2) * k, 1, e]));
+  const mini =
+    `<rect class="dg-mm-bg" x="${bx - M.pad}" y="${my - M.pad - M.title}" width="${bw + M.pad * 2}" height="${mh + M.pad * 2 + M.title}" rx="${M.radius}"/>` +
+    `<text class="dg-mm-t" x="${bx}" y="${my - M.pad + 2}">${title}</text>` +
+    `<g clip-path="url(#dg-mm-${id})"><rect class="dg-mm-world" x="${mx}" y="${my}" width="${mw}" height="${mh}"/>${shapes}<rect class="dg-mm-vp dg-a" width="${vw * k}" height="${vh * k}" rx="2" style="${vp}"/></g>`;
+  const body =
+    `<defs><clipPath id="dg-vp-${id}"><rect width="${vw}" height="${vh}" rx="${LOOK.region.radius}"/></clipPath><clipPath id="dg-mm-${id}"><rect x="${mx}" y="${my}" width="${mw}" height="${mh}" rx="4"/></clipPath></defs>` +
+    `<g clip-path="url(#dg-vp-${id})"><rect class="dg-vp-bg" width="${vw}" height="${vh}"/><g class="dg-a" style="${camKf}">${content}</g></g>` +
+    `<rect class="dg-vp-frame" x="0.5" y="0.5" width="${vw - 1}" height="${vh - 1}" rx="${LOOK.region.radius}"/>${mini}`;
+  return { body, w: vw, h: vh };
+}
+
+/** 原本の JSON から図を描く。原本が形に合わない時は、誤りの場所を添えて断る。 */
+export function renderDiagram(input: unknown, options: RenderOptions = {}): Rendered {
+  const lang = options.lang ?? "ja";
+  const read = readDiagram(input, { lang });
+  if (!read.ok) throw new Error(FIGURE_TEXT[lang].cannotDraw(read.errors.map((e) => `${e.pointer} ${e.message}`).join(" / ")));
+  const diagram = read.diagram;
+  const palette = resolvePalette(options.palette);
+  const theme: Theme = options.theme === "dark" ? "dark" : "light";
+  const layout = diagram.kind === "sequence" ? layoutSequence(diagram) : layoutArchitecture(diagram);
+  const timeline = buildTimeline(diagram);
+  return {
+    svg: drawSvg(diagram, layout, timeline, palette, theme),
+    palette: palette.id,
+    theme,
+    ...(diagram.view ? { view: diagram.view } : {}),
+    fonts: { ...FONTS },
+    layout,
+    timeline,
+    diagram,
+  };
+}