@cardenelabs/dragon 0.36.4 → 0.37.0

package/src/render/icons.ts

@@ -2,6 +2,8 @@
  * 箱と区画の印の形。どれも (0, 0) を中心に 20 四方へ収める。
  *
  * 見本帳 (`docs/design/base/engine.js` の `G`) と同じ形を持つ。`block` だけは見本帳が絵を手で描いていたので、ここで足した。
+ * `undo` (戻る矢印) と `yen` (円の印) は、注文の試作 (`docs/design/base/scenes/order.js`) が返品と返金に足した形 (#3171)。
+ * package の入口からも出し、見本帳の部品「絵」の頁がこの表から使える絵柄の一覧を作る。1 つずつの絵は `iconSvg` が描く (#3172)。
  */
 export const ICONS: Readonly<Record<string, string>> = {
   app: "M -9 -7 h18 a2 2 0 0 1 2 2 v10 a2 2 0 0 1 -2 2 h-18 a2 2 0 0 1 -2 -2 v-10 a2 2 0 0 1 2 -2 z M -11 -2 h22",
@@ -34,6 +36,8 @@ export const ICONS: Readonly<Record<string, string>> = {
   branch: "M -4 -4.5 v9 M 5 0.5 c0 4 -9 3 -9 6.5 M -6.2 -7 a2.2 2.2 0 1 0 4.4 0 a2.2 2.2 0 1 0 -4.4 0 M -6.2 7 a2.2 2.2 0 1 0 4.4 0 a2.2 2.2 0 1 0 -4.4 0 M 2.8 -2 a2.2 2.2 0 1 0 4.4 0 a2.2 2.2 0 1 0 -4.4 0",
   cloud: "M -7 6 h13 a4.5 4.5 0 0 0 0.5 -9 a6 6 0 0 0 -11.5 -1 a4.5 4.5 0 0 0 -2 10 z",
   refresh: "M 7 -3 a7.5 7.5 0 1 0 0.5 5 M 7.5 -8 v5 h-5",
+  undo: "M -7 -2 h10 a5 5 0 0 1 0 10 h-6 M -3 -6 l-4 4 l4 4",
+  yen: "M -6 -8 l6 7 l6 -7 M 0 -1 v9 M -5 1.5 h10 M -5 5 h10",
   layers: "M 0 -8 l9 4.5 l-9 4.5 l-9 -4.5 z M -9 2.5 l9 4.5 l9 -4.5",
   code: "M -4 -6 l-5 6 l5 6 M 4 -6 l5 6 l-5 6",
   paint: "M -8 8 c 0 -3 2 -5 4.5 -5 l 9 -9 l 3.5 3.5 l -9 9 c 0 2.5 -2 4.5 -5 4.5 z",

package/src/render/parts.ts

@@ -5,7 +5,21 @@
  * 色は色の役の変数 (`--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 {
+  along,
+  type Point,
+  pathLength,
+  type SceneAction,
+  type SceneBadge,
+  type SceneBox,
+  type SceneEdge,
+  type SceneEnd,
+  type SceneLabel,
+  type ScenePath,
+  type SceneRegion,
+  type SceneSide,
+  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";
@@ -22,7 +36,36 @@ export function glyph(name: string | undefined, x: number, y: number, scale: num
   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(" ");
+/**
+ * 絵柄を 1 つだけ描いた SVG (#3172)。見本帳の部品「絵」の頁が、使える絵柄を並べる時に使う。
+ * 線の太さは箱の印と同じ割合 (印の線の太さ × 印の縮み) で、色は置いた所の字の色 (`currentColor`) を使う。知らない名前は `undefined`
+ */
+export function iconSvg(name: string): string | undefined {
+  if (!Object.hasOwn(ICONS, name)) return undefined;
+  const width = LOOK.stroke.glyph * LOOK.box.iconScale;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-12 -12 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="${width}" stroke-linecap="round" stroke-linejoin="round"><path d="${ICONS[name]}"/></svg>`;
+}
+
+/** 点を辿る線。曲がる所は共通の値の表の半径 (`LOOK.edge.bend`) で丸め、直角の角を作らない (#3171)。 */
+export function pathOf(points: Point[]): string {
+  const pts = points.filter((p, i) => i === 0 || p[0] !== (points[i - 1] as Point)[0] || p[1] !== (points[i - 1] as Point)[1]);
+  const [x0, y0] = pts[0] as Point;
+  let d = `M ${r1(x0)} ${r1(y0)}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const [ax, ay] = pts[i - 1] as Point;
+    const [bx, by] = pts[i] as Point;
+    const [cx, cy] = pts[i + 1] as Point;
+    const l1 = Math.hypot(bx - ax, by - ay);
+    const l2 = Math.hypot(cx - bx, cy - by);
+    const a = Math.min(LOOK.edge.bend, l1 / 2, l2 / 2);
+    d += ` L ${r1(bx - ((bx - ax) / l1) * a)} ${r1(by - ((by - ay) / l1) * a)} Q ${r1(bx)} ${r1(by)} ${r1(bx + ((cx - bx) / l2) * a)} ${r1(by + ((cy - by) / l2) * a)}`;
+  }
+  if (pts.length > 1) {
+    const [lx, ly] = pts[pts.length - 1] as Point;
+    d += ` L ${r1(lx)} ${r1(ly)}`;
+  }
+  return d;
+}
 
 /** 矢じり。線の最後の 2 点の向きに開く。 */
 export function arrowHead(points: Point[]): string {
@@ -95,11 +138,14 @@ function cardFrame(box: SceneBox, ctx: Ctx, act: string | undefined, y: number,
   return `${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${ctx.sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}`;
 }
 
-/** 箱。動く段は縁に色を付け、外側に淡い光を足す。下の小さな字は起きたことに合わせて書き換わる。 */
-export function card(box: SceneBox, ctx: Ctx, on: number[], changes: SubChange[]): string {
+/**
+ * 箱。動く段は縁に色を付け、外側に淡い光を足す。下の小さな字は起きたことに合わせて書き換わる。
+ * `lit` を渡すと、動く段ではなくその間だけ光らせる (状態遷移図の、運ぶ物が乗っている状態)。
+ */
+export function card(box: SceneBox, ctx: Ctx, on: number[], changes: SubChange[], lit?: Span[]): string {
   const { icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
   const subs = subLines(box, ctx.m, changes, box.cy + subY);
-  const act = on.length > 0 ? activeKf(ctx, on) : undefined;
+  const act = lit ? (lit.length > 0 ? rangeKf(ctx.m, lit.map((s) => [s.start, s.end])) : undefined) : on.length > 0 ? activeKf(ctx, on) : undefined;
   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)}`
@@ -121,6 +167,59 @@ export function headCard(box: SceneBox, ctx: Ctx, on: number[], changes: SubChan
   return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, pad, h)}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(pad + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
 }
 
+/** 状態遷移図の、どの段も辿り着かない状態。点線の縁の札で、絵柄を左に、名前と下の字を右に並べる (#3171)。光らず、字も書き換わらない */
+export function ghostCard(box: SceneBox): string {
+  const { icon, iconRadius, iconScale, radius } = LOOK.box;
+  const G = LOOK.state.ghost;
+  const ix = box.x + G.pad + icon / 2;
+  const tx = box.x + G.pad + icon + G.gap;
+  const mark = box.icon && ICONS[box.icon] ? `<rect class="dg-ic" x="${r1(ix - icon / 2)}" y="${r1(box.cy - icon / 2)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(box.icon, ix, box.cy, iconScale)}` : "";
+  const nameY = box.sub ? G.nameY : LOOK.baseline.mark;
+  const sub = box.sub ? `<text class="dg-ss" x="${r1(tx)}" y="${r1(box.cy + G.subY)}" text-anchor="start">${esc(box.sub)}</text>` : "";
+  return (
+    `<g data-ghost="${esc(box.id)}" style="${cs(box.color)}"><rect class="dg-ghost" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${box.h}" rx="${radius}"/>` +
+    `${mark}<text class="dg-sn" x="${r1(tx)}" y="${r1(box.cy + nameY)}" text-anchor="start">${esc(box.name)}</text>${sub}</g>`
+  );
+}
+
+/** 状態遷移図の、出た状態の右上の済んだ印。`at` に弾んで出て、繰り返す前に消える */
+export function doneMark(box: SceneBox, at: number, ctx: Ctx): string {
+  const { r, inset } = LOOK.state.done;
+  const x = box.x + box.w - inset;
+  const y = box.y + inset;
+  return `<g class="dg-popc dg-a" data-done="${esc(box.id)}" style="${cs(box.color)};${ctx.m.pop(at)}"><circle class="dg-done" cx="${r1(x)}" cy="${r1(y)}" r="${r}"/>${glyph("check", x, y, 0.5, "dg-done-ck")}</g>`;
+}
+
+/** 状態遷移図の通らない道。点線で道と向きだけを見せ、運ぶ物を走らせない */
+export function path(p: ScenePath, color: ColorKey): string {
+  const label = p.label
+    ? `<text class="dg-path-t${p.label.family === "sans" ? " dg-path-tj" : ""}" x="${r1(p.label.x + LOOK.label.padX)}" y="${r1(p.label.y + p.label.h / 2 + LOOK.baseline.label)}">${esc(p.label.text)}</text>`
+    : "";
+  return `<g data-path="${esc(`${p.from}->${p.to}`)}" style="${cs(color)}"><path class="dg-path" d="${pathOf(p.points)}"/><path class="dg-path-h" d="${arrowHead(p.points)}"/>${label}</g>`;
+}
+
+/** 状態遷移図の脇道の囲み。左上に囲みの名前を、その下に添え書きを 1 行ずつ置く */
+export function side(s: SceneSide, color: ColorKey): string {
+  const { pad } = LOOK.state.side;
+  const title = s.y + pad + TYPE.regionName.size;
+  const notes = s.notes.map((note, k) => `<text class="dg-side-n" x="${r1(s.x + pad)}" y="${r1(title + LOOK.region.line * (k + 1))}">${esc(note)}</text>`).join("");
+  return (
+    `<g style="${cs(color)}"><rect class="dg-side" 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}"/>` +
+    `<text class="dg-side-t" x="${r1(s.x + pad)}" y="${r1(title)}">${esc(s.title)}</text>${notes}</g>`
+  );
+}
+
+/** 状態遷移図の始まりと終わりの印。始まりは塗った丸、終わりは輪の中の丸で、脇道の中の終わりは点線の輪 */
+export function endMark(e: SceneEnd, color: ColorKey): string {
+  const { end } = LOOK.state;
+  const text = e.text === "" ? "" : `<text class="dg-mark" x="${r1(e.x + LOOK.state.text)}" y="${r1(e.y + LOOK.baseline.mark)}">${esc(e.text)}</text>`;
+  const x = r1(e.x);
+  const y = r1(e.y);
+  if (e.kind === "start") return `<g data-end="start"><circle class="dg-start" cx="${x}" cy="${y}" r="${e.r}"/>${text}</g>`;
+  if (e.ghost) return `<g data-end="finish" style="${cs(color)}"><circle class="dg-end-x" cx="${x}" cy="${y}" r="${e.r}"/><circle class="dg-end-xi" cx="${x}" cy="${y}" r="${end.inner}"/>${text}</g>`;
+  return `<g data-end="finish"><circle class="dg-end" cx="${x}" cy="${y}" r="${e.r}"/><circle class="dg-end-in" cx="${x}" cy="${y}" r="${end.inner}"/>${text}</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)}"/>`;
 }
@@ -128,20 +227,27 @@ export function lifeline(x: number, y1: number, y2: number): string {
 /**
  * 線。点線で道を見せておき、その段で色の線を引いて、段の終わりまで流れる点で向きを見せる。
  * 済んだ段は薄く残し、最後の段の後に通った道を全て濃くし直す。
+ * `past` を立てると (状態遷移図、#3171)、段が終わった後は色の線を消して灰の実線に替え、最後の段まで残す。
  */
-export function edge(e: SceneEdge, time: EdgeTime, ctx: Ctx): { base: string; lit: string } {
+export function edge(e: SceneEdge, time: EdgeTime, ctx: Ctx, past = false): { 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 tail: Frame[] = past
+    ? [
+        [end, { opacity: 1 }, EASE.inOut],
+        [end + 0.4, { opacity: 0 }],
+        [m.total, { opacity: 0 }],
+      ]
+    : [
+        [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],
@@ -161,17 +267,21 @@ export function edge(e: SceneEdge, time: EdgeTime, ctx: Ctx): { base: string; li
     [end + 0.2, { opacity: 0, "stroke-dashoffset": run }],
     [m.total, { opacity: 0, "stroke-dashoffset": run }],
   ]);
+  const grey = past ? m.kf([[0, { opacity: 0 }], [end, { opacity: 0 }, EASE.inOut], [end + 0.4, { opacity: 1 }], [m.last, { opacity: 1 }, EASE.inOut], [m.total, { opacity: 0 }]]) : "";
   return {
-    base: `<path class="dg-e" d="${d}"/><path class="dg-eh" d="${head}"/>`,
+    base: `<path class="dg-e" d="${d}"/><path class="dg-eh" d="${head}"/>${past ? `<path class="dg-e-past dg-a" d="${d}" style="${grey}"/><path class="dg-eh-past dg-a" d="${head}" style="${grey}"/>` : ""}`,
     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>`,
   };
 }
 
-/** 線の名前の札。その段の間だけ出し、段の終わりまでに消え終わる。 */
+/** 線の名前の札。その段の間だけ出し、段の終わりまでに消え終わる。時刻の表が `after` を持つ時は、その間だけ札を外した灰の字で薄く残す (#3171)。 */
 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>`;
+  const x = r1(l.x + l.w / 2);
+  const y = r1(l.y + l.h / 2 + LOOK.baseline.label);
+  const past = time.after ? `<g class="dg-cap-past${l.family === "sans" ? " dg-cap-pastj" : ""} dg-a" style="${ctx.m.vis(time.after.start, time.after.end)}"><text x="${x}" y="${y}" text-anchor="middle">${esc(l.text)}</text></g>` : "";
+  return `${past}<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="${x}" y="${y}" text-anchor="middle">${esc(l.text)}</text></g>`;
 }
 
 /** 時系列図の箱の中の処理の札。その段の間だけ生存線の上に出す。 */
@@ -215,8 +325,11 @@ export function carrier(e: SceneEdge, time: CarrierTime, ctx: Ctx): string {
   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 {
+/**
+ * 段の番号。まだ来ていない段は出さず、今の段は塗り、済んだ段は縁取りに変えて番号を読めるまま残す。
+ * `grey` を立てると (状態遷移図、#3171)、済んだ段の縁取りを線と同じ灰にする。
+ */
+export function badge(b: SceneBadge, ctx: Ctx, grey = false): string {
   const { m } = ctx;
   const span = ctx.t.steps[b.step] as Span;
   const a = span.start;
@@ -244,7 +357,7 @@ export function badge(b: SceneBadge, ctx: Ctx): string {
   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-a" style="${past}"><circle class="${grey ? "dg-bdp-g" : "dg-bdp"}" cx="${x}" cy="${y}" r="${rr}"/><text class="${grey ? "dg-bdpt-g" : "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>`
   );
 }
@@ -255,9 +368,16 @@ export interface FieldChange {
   value?: string;
   tag?: string;
   color: ColorKey;
+  /** 変わった段と、その段の終わり */
+  step: number;
+  until: number;
 }
 
-export function strip(s: SceneStrip, changes: Map<string, FieldChange[]>, ctx: Ctx): string {
+/**
+ * 中身の帯。`now` を立てると (状態遷移図、#3171)、段の中で変わった値をその段の終わりまで線の色 (今の状態の色) で描き、
+ * 欄の名前の横に同じ色の点を置く。帯の通った状態の欄は、`arrivals` が持つ着いた時刻に点を塗る。
+ */
+export function strip(s: SceneStrip, changes: Map<string, FieldChange[]>, ctx: Ctx, now = false, arrivals = new Map<string, number>()): string {
   const { m, sh } = ctx;
   const S = LOOK.strip;
   const my = s.y + S.h / 2;
@@ -279,8 +399,19 @@ export function strip(s: SceneStrip, changes: Map<string, FieldChange[]>, ctx: C
     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>`);
+      const cls = hasWide(value) ? "dg-fvj" : "dg-fv";
+      const textOf = (c: string): string => `<text class="${c}" x="${r1(field.x)}" y="${r1(field.y + S.valueY)}">${esc(value)}</text>`;
+      const text = textOf(cls);
+      if (!now) {
+        const anim = next === undefined ? m.rise(c.at) : m.rise(c.at, next - MOTION.untilFade);
+        parts.push(`<g class="dg-a" style="${anim}">${text}</g>`);
+        return;
+      }
+      // 変わった段の間は今の状態の色で、段が終わると墨に戻す
+      const until = Math.min(c.until, next ?? c.until);
+      const dot = `<circle class="dg-fl-now" cx="${r1(field.x + textWidth(field.name, TYPE.fieldName) + S.now.gap)}" cy="${r1(field.y + S.nameY - TYPE.fieldName.size / 3)}" r="${S.now.r}"/>`;
+      parts.push(`<g class="dg-fv-now dg-a" data-step="${c.step}" style="${cs(c.color)};${m.rise(c.at, until - MOTION.untilFade)}">${textOf(`${cls} dg-fv-c`)}${dot}</g>`);
+      if (next === undefined || next > until) parts.push(`<g class="dg-a" style="${m.vis(until - MOTION.untilFade, next === undefined ? m.last : next - MOTION.untilFade)}">${text}</g>`);
     });
     tags.forEach((c, k) => {
       const next = tags[k + 1]?.at;
@@ -295,5 +426,21 @@ export function strip(s: SceneStrip, changes: Map<string, FieldChange[]>, ctx: C
       );
     });
   });
+  if (s.trail) {
+    const t = s.trail;
+    const last = s.fields[s.fields.length - 1];
+    if (last && last.y === t.y) {
+      const sx = t.x - S.fieldGap / 2;
+      parts.push(`<line class="dg-sep" x1="${r1(sx)}" y1="${r1(t.y + S.sepInset)}" x2="${r1(sx)}" y2="${r1(t.y + S.h - S.sepInset)}"/>`);
+    }
+    parts.push(`<text class="dg-fl" x="${r1(t.x)}" y="${r1(t.y + S.nameY)}">${esc(t.title)}</text>`);
+    const dy = t.y + S.valueY - TYPE.fieldValue.size / 3;
+    t.states.forEach((state, k) => {
+      const cx = r1(t.x + S.trail.r + k * S.trail.step);
+      const at = arrivals.get(state.box);
+      const fill = at === undefined ? "" : `<circle class="dg-tr-fill dg-a" cx="${cx}" cy="${r1(dy)}" r="${S.trail.r}" style="${m.pop(at)}"/>`;
+      parts.push(`<g data-trail="${esc(state.box)}" style="${cs(state.color)}"><circle class="dg-tr-ring" cx="${cx}" cy="${r1(dy)}" r="${S.trail.r}"/>${fill}</g>`);
+    });
+  }
   return parts.join("");
 }

package/src/render/svg.ts

@@ -10,13 +10,35 @@ import { layoutArchitecture } from "../layout/architecture";
 import { textWidth } from "../layout/measure";
 import type { Layout, Rect } from "../layout/scene";
 import { layoutSequence } from "../layout/sequence";
+import { layoutState } from "../layout/state";
 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, headCard, label, lifeline, strip, type SubChange } from "./parts";
+import {
+  action,
+  badge,
+  band,
+  card,
+  carrier,
+  type Ctx,
+  cs,
+  doneMark,
+  edge,
+  endMark,
+  esc,
+  type FieldChange,
+  ghostCard,
+  headCard,
+  label,
+  lifeline,
+  path,
+  side,
+  strip,
+  type SubChange,
+} from "./parts";
 import { Motion } from "./motion";
 
 export interface RenderOptions {
@@ -43,6 +65,8 @@ const font = (t: TextStyle): string => `font:${t.weight} ${t.size}px var(--${t.f
 const mix = (pct: number, base = "var(--surf)"): string => `color-mix(in srgb,var(--c) ${pct}%,${base})`;
 const S = LOOK.stroke;
 const X = LOOK.mix;
+/** 状態遷移図で段が終わった線と番号の灰 (#3171) */
+const PAST = `color-mix(in srgb,var(--mute) ${X.past}%,var(--bg))`;
 
 /** 部品の見た目。どの値も値の表から読む。 */
 const PART_CSS = [
@@ -69,15 +93,21 @@ const PART_CSS = [
   `.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-e-past{fill:none;stroke:${PAST};stroke-width:${S.edge};stroke-linecap:round}`,
+  `.dg-eh-past{fill:none;stroke:${PAST};stroke-width:${S.arrow};stroke-linecap:round;stroke-linejoin:round}`,
   ".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-bdp-g{fill:var(--surf);stroke:${PAST};stroke-width:${S.hair}}`,
+  `.dg-bdpt-g{${font(TYPE.badge)};fill:var(--mute)}`,
   `.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-cap-past text{${font(TYPE.label)};fill:var(--mute);fill-opacity:${LOOK.state.pastLabel}}`,
+  `.dg-cap-pastj 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)}`,
@@ -92,8 +122,28 @@ const PART_CSS = [
   `.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-fv-c{fill:var(--ct)}",
+  ".dg-fl-now{fill:var(--c)}",
+  `.dg-tr-ring{fill:none;stroke:var(--line);stroke-width:${S.trail}}`,
+  ".dg-tr-fill{fill:var(--c)}",
   ".dg-tg rect{fill:var(--c)}",
   `.dg-tg text{${font(TYPE.tag)};fill:var(--on-c)}`,
+  `.dg-side{fill:color-mix(in srgb,var(--c) ${X.side}%,var(--bg));stroke:${mix(X.sideEdge, "transparent")};stroke-dasharray:4 4}`,
+  `.dg-side-t{${font(TYPE.regionName)};fill:var(--ct)}`,
+  `.dg-side-n{${font(TYPE.regionNote)};fill:var(--mute)}`,
+  `.dg-ghost{fill:var(--surf);stroke:${mix(X.ghostEdge, "transparent")};stroke-dasharray:4 3}`,
+  `.dg-path{fill:none;stroke:${mix(X.path, "transparent")};stroke-width:${S.path};stroke-linecap:round;stroke-dasharray:0 ${LOOK.edge.ghostDash}}`,
+  `.dg-path-h{fill:none;stroke:${mix(X.path, "transparent")};stroke-width:${S.arrow};stroke-linecap:round;stroke-linejoin:round}`,
+  `.dg-path-t{${font(TYPE.label)};fill:var(--ct)}`,
+  `.dg-path-tj{${font(TYPE.labelJa)}}`,
+  ".dg-start{fill:var(--ink)}",
+  `.dg-end{fill:var(--bg);stroke:var(--ink);stroke-width:${S.end}}`,
+  ".dg-end-in{fill:var(--ink)}",
+  `.dg-end-x{fill:var(--bg);stroke:${mix(X.path, "transparent")};stroke-width:${S.arrow};stroke-dasharray:2 2.5}`,
+  `.dg-end-xi{fill:${mix(X.path, "transparent")}}`,
+  `.dg-mark{${font(TYPE.regionNote)};fill:var(--mute)}`,
+  `.dg-done{fill:var(--ink);stroke:var(--surf);stroke-width:${S.done}}`,
+  `.dg-done-ck{fill:none;stroke:var(--surf);stroke-width:${S.glyph};stroke-linecap:round;stroke-linejoin:round}`,
   ".dg-vp-bg{fill:var(--bg)}",
   ".dg-vp-frame{fill:none;stroke:var(--hair)}",
   ".dg-hd-bg{fill:var(--bg)}",
@@ -181,7 +231,8 @@ function fieldChanges(diagram: Diagram, timeline: Timeline, layout: Layout): Map
     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 } : {}) });
+    const until = (timeline.steps[time.step] as Span).end;
+    list.push({ at: time.at, color, step: time.step, until, ...(event.value !== undefined ? { value: event.value } : {}), ...(event.tag !== undefined ? { tag: event.tag } : {}) });
     out.set(event.field, list);
   }
   return out;
@@ -203,21 +254,40 @@ export function drawSvg(diagram: Diagram, layout: Layout, timeline: Timeline, pa
   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 subs = subChanges(diagram, timeline, layout.kind !== "sequence");
 
   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));
+  const ghostColor = layout.boxes.find((b) => b.ghost)?.color ?? "slate";
+  if (layout.side) L.band.push(side(layout.side, ghostColor));
+  // 脇道へ入る道は脇道の状態の色、それ以外の道は送る側の色で描く
+  const boxColor = (id: string, ghost?: boolean): ColorKey | undefined => layout.boxes.find((b) => b.id === id && (ghost === undefined || b.ghost === ghost))?.color;
+  for (const p of layout.paths) L.base.push(path(p, boxColor(p.to, true) ?? boxColor(p.from) ?? ghostColor));
+  for (const e of layout.ends) L.node.push(endMark(e, ghostColor));
+  // 状態遷移図は、段で変わった値を今の状態の色で描き、帯の通った状態の点を着いた時刻に塗る (#3171)
+  const isState = layout.kind === "state";
+  const arrivals = new Map((timeline.states ?? []).flatMap((s) => (s.lit[0] ? [[s.box, s.lit[0].start] as [string, number]] : [])));
+  if (layout.strip) L.band.push(strip(layout.strip, fieldChanges(diagram, timeline, layout), ctx, isState, arrivals));
   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);
+    const drawn = edge(e, time, ctx, isState);
     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));
+  const states = new Map((timeline.states ?? []).map((s) => [s.box, s]));
+  for (const box of layout.boxes) {
+    if (box.ghost) {
+      L.node.push(ghostCard(box));
+      continue;
+    }
+    const state = states.get(box.id);
+    L.node.push(card(box, ctx, on.get(box.id) ?? [], subs.get(box.id) ?? [], isState ? (state?.lit ?? []) : undefined));
+    if (state?.done !== undefined) L.node.push(doneMark(box, state.done, ctx));
+  }
+  for (const b of layout.badges) L.badge.push(badge(b, ctx, isState));
   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));
@@ -421,7 +491,7 @@ export function renderDiagram(input: unknown, options: RenderOptions = {}): Rend
   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 layout = diagram.kind === "sequence" ? layoutSequence(diagram) : diagram.kind === "state" ? layoutState(diagram, lang) : layoutArchitecture(diagram);
   const timeline = buildTimeline(diagram);
   return {
     svg: drawSvg(diagram, layout, timeline, palette, theme),

package/src/schema.ts

@@ -12,7 +12,7 @@
 import type { ErrorObject } from "ajv";
 import { type Allowed, FIELD_MESSAGES, type FieldMessages, type Forbidden } from "./field-messages";
 import validate from "./schemas/validate-diagram.js";
-import type { NotationLang } from "./words";
+import { type NotationLang, STATE_ENDS } from "./words";
 
 export type Color = "blue" | "amber" | "green" | "violet" | "rose" | "slate" | "coin";
 /** 色の役の一覧。記法の `color:` に書ける値と、誤りの文に並べる値 */
@@ -48,6 +48,13 @@ export type DiagramEvent =
   | { type: "swap"; box: string; text: string }
   | { type: "strip"; field: string; value?: string; tag?: string };
 
+/** 状態遷移図の、最初の段より前に書いた移れる道。`from` に `start`、`to` に `finish` を書ける */
+export interface StatePath {
+  from: string;
+  to: string;
+  label?: string;
+}
+
 export interface Step {
   title: string;
   body: string;
@@ -57,7 +64,7 @@ export interface Step {
 
 export interface Diagram {
   version: number;
-  kind: "sequence" | "architecture";
+  kind: "sequence" | "architecture" | "state";
   title: string;
   view?: ViewMode;
   regions?: Region[];
@@ -65,6 +72,7 @@ export interface Diagram {
   strip?: { title: string; fields: string[] };
   steps: Step[];
   sequence?: { lifelines: string[] };
+  state?: { paths: StatePath[] };
 }
 
 export interface FieldError {
@@ -84,14 +92,21 @@ export interface CheckOptions {
 const EVENT_TYPES = ["edge", "action", "swap", "strip"] as const satisfies readonly DiagramEvent["type"][];
 
 /**
- * schema の書けない組み合わせ (`else: { not: { required: [欄] } }`) の 2 か所。誤りの場所の最後の欄で引き、根は "" で引く。
- * 2 か所とも ajv の誤りでは決まりの場所 (`#/else/not`) が同じになるので、誤りの場所で分ける
+ * schema の書けない組み合わせ (`not: { required: [欄] }`) の欄。根の 3 か所は決まりの場所で引き、運ぶ物は誤りの場所の最後の欄で引く。
+ * 根の `sequence` と運ぶ物の `text` は ajv の誤りでは決まりの場所 (`#/else/not`) が同じになるので、誤りの場所でも分ける
  */
+const ROOT_NOT_ALLOWED: Record<string, Allowed> = {
+  "#/else/not": { field: "sequence", kind: "sequence" },
+  "#/then/not": { field: "state", kind: "state" },
+  "#/else/else/not": { field: "state", kind: "state" },
+};
 const NOT_ALLOWED: Record<string, Allowed> = {
-  "": { field: "sequence", kind: "sequence" },
   carry: { field: "text", kind: "tag" },
 };
 
+/** 状態遷移図の箱の名札に予約の名前を書いた時の決まりの場所 */
+const RESERVED_ID = /\/boxes\/items\/properties\/id\/not$/u;
+
 const escape = (key: string): string => key.replaceAll("~", "~0").replaceAll("/", "~1");
 
 /** `^[^…]+$` の形の決まりから書けない字を読む。違う形の決まりでは `undefined` */
@@ -124,7 +139,8 @@ function toFieldError(error: ErrorObject, errors: readonly ErrorObject[], m: Fie
       return { pointer: `${at}/${escape(key)}`, message: m.required(key) };
     }
     case "not": {
-      const allowed = NOT_ALLOWED[at.slice(at.lastIndexOf("/") + 1)];
+      if (RESERVED_ID.test(error.schemaPath)) return { pointer: at, message: m.reserved(STATE_ENDS) };
+      const allowed = at === "" ? ROOT_NOT_ALLOWED[error.schemaPath] : NOT_ALLOWED[at.slice(at.lastIndexOf("/") + 1)];
       return { pointer: allowed ? `${at}/${allowed.field}` : at, message: m.not(allowed) };
     }
     case "anyOf": {

package/src/schemas/diagram.schema.json

@@ -6,18 +6,24 @@
   "required": ["version", "kind", "title", "boxes", "steps"],
   "properties": {
     "version": { "description": "形式の版", "type": "integer", "minimum": 1 },
-    "kind": { "description": "図の種類", "enum": ["sequence", "architecture"] },
+    "kind": { "description": "図の種類", "enum": ["sequence", "architecture", "state"] },
     "title": { "$ref": "#/definitions/text" },
     "view": { "description": "見せ方。書かなければ字の大きさで選ぶ。fixed は全体を止めて中だけ動かし、follow は寄って動かし全体図で今どこかを示す", "enum": ["fixed", "follow"] },
     "regions": { "type": "array", "items": { "$ref": "#/definitions/region" } },
     "boxes": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/box" } },
     "strip": { "$ref": "#/definitions/strip" },
     "steps": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/step" } },
-    "sequence": { "$ref": "#/definitions/sequence" }
+    "sequence": { "$ref": "#/definitions/sequence" },
+    "state": { "$ref": "#/definitions/state" }
   },
   "if": { "required": ["kind"], "properties": { "kind": { "const": "sequence" } } },
-  "then": { "required": ["sequence"] },
-  "else": { "not": { "required": ["sequence"] } },
+  "then": { "required": ["sequence"], "not": { "required": ["state"] } },
+  "else": {
+    "not": { "required": ["sequence"] },
+    "if": { "required": ["kind"], "properties": { "kind": { "const": "state" } } },
+    "then": { "properties": { "boxes": { "items": { "properties": { "id": { "description": "始まりと終わりの印の名前は箱の名札に使えない", "not": { "enum": ["start", "finish"] } } } } } } },
+    "else": { "not": { "required": ["state"] } }
+  },
   "definitions": {
     "text": { "type": "string", "minLength": 1 },
     "id": { "type": "string", "pattern": "^[^\\s\\[\\]「」=:]+$" },
@@ -145,6 +151,26 @@
       "properties": {
         "lifelines": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/id" } }
       }
+    },
+    "state": {
+      "description": "状態遷移図の種類の欄。最初の段より前に書いた、移れるが段で通るとは限らない線",
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["paths"],
+      "properties": {
+        "paths": { "type": "array", "minItems": 1, "items": { "$ref": "#/definitions/path" } }
+      }
+    },
+    "path": {
+      "description": "移れる道。送る側に始まりの印 start、受ける側に終わりの印 finish を書ける。どの段にも出ない道は点線で描き、運ぶ物を走らせない",
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["from", "to"],
+      "properties": {
+        "from": { "$ref": "#/definitions/id" },
+        "to": { "$ref": "#/definitions/id" },
+        "label": { "$ref": "#/definitions/text" }
+      }
     }
   }
 }