@cardenelabs/dragon 0.36.3 → 0.37.0

package/dist/export.js

@@ -275,13 +275,46 @@ var LOOK = {
   region: { pad: 18, gap: 10, radius: 14, inset: 14, icon: 24, iconRadius: 7, iconScale: 0.68, nameY: 58, line: 16, minH: 108 },
   architecture: { columns: 4, columnGap: 56, maxColumnGap: 160, rowGap: 44, labelRoom: 16 },
   sequence: { columnGap: 40, labelRoom: 16, firstRow: 22, rowGap: 14, stepGap: 8, minPitch: 40, tail: 18, selfW: 34, selfH: 18 },
-  edge: { inset: 3, arrow: 6, arrowHalf: 3.5, parallel: 5, ghostDash: 5, flowDash: 9 },
+  /**
+   * 状態遷移図 (#3163)。状態は `columns` つずつ並べて次の段へ折り返し、段の間 (`rowGap`) の真ん中を、段をまたぐ線が通る。
+   * `start` と `end` は始まりと終わりの印の半径と、印の中の丸の半径。`drop` は最初の状態の上端から始まりの印の中心まで、
+   * `below` は状態の下端から終わりの印の中心まで、`beside` は状態の右端から右に置く終わりの印の中心まで、`text` は印の中心から字の左端まで。
+   * `loop` は同じ状態へ戻る輪の幅と深さ。`side` は脇道の囲みの内側の余白、1 段目の上端との間、脇道へ入る線が横に通る所の囲みの下端からの離れ、
+   * 点線の線が箱へ入る所を箱の端から離す幅。
+   * `ghost` は脇道の点線の札で、絵柄を左に、名前と下の字を右に並べる (#3171)。`h` は札の高さ、`pad` は左右の余白、`gap` は絵柄と字の間、
+   * `nameY` と `subY` は札の真ん中から名前と下の字の基準線まで。
+   * `done` は出た状態の右上の済んだ印の半径と、箱の右上の角からの離れ。
+   * `loop` の `samples` は同じ状態へ戻る弧を区切る点の数、`badgeAt` は弧の段の番号を弧の上端から深さのどこに置くかの割合。
+   * `pastLabel` は段が終わった後に薄く残す線の名前の濃さ (#3171)
+   */
+  state: {
+    columns: 4,
+    columnGap: 64,
+    rowGap: 108,
+    labelRoom: 16,
+    start: 7,
+    end: { r: 9, inner: 5 },
+    drop: 56,
+    below: 64,
+    beside: 38,
+    text: 16,
+    loop: { w: 24, h: 34, samples: 12, badgeAt: 0.6 },
+    side: { pad: 16, gap: 76, lane: 30, entry: 28 },
+    ghost: { h: 52, pad: 12, gap: 10, nameY: -2, subY: 14 },
+    done: { r: 6.5, inset: 13 },
+    pastLabel: 0.85
+  },
+  /** `bend` は線の曲がりを丸める半径 (#3171) */
+  edge: { inset: 3, arrow: 6, arrowHalf: 3.5, parallel: 5, ghostDash: 5, flowDash: 9, bend: 12 },
   label: { h: 20, padX: 9, radius: 10, offset: 22, side: 14, search: 4, searchMax: 400, soft: 6 },
   action: { h: 22, padX: 10, radius: 11 },
   badge: { r: 9.5, ring: 9, inset: 4, along: 14, short: 44 },
   carrier: { envW: 24, envH: 17, coinR: 6.5, coinIn: 3.8, tagH: 18, tagPadX: 8, samples: 16 },
-  strip: { h: 72, line: 44, pad: 12, icon: 24, titleX: 44, fieldGap: 22, sepInset: 14, tagGap: 6, tagH: 15, tagPadX: 7, nameY: 22, valueY: 43 },
-  stroke: { hair: 1, edge: 1.7, edgeOn: 2.25, arrow: 1.5, flow: 1.3, halo: 7, on: 1.75, glyph: 2, lifeline: 1.2, envelope: 1.5, badgeRing: 1.5 },
+  /**
+   * `trail` は状態遷移図の帯の最後の、通った状態の点 (#3171)。`r` は点の半径、`step` は点の中心どうしの間、`now` は変わった値の欄の名前の横の点の半径と、名前からの離れ
+   */
+  strip: { h: 72, line: 44, pad: 12, icon: 24, titleX: 44, fieldGap: 22, sepInset: 14, tagGap: 6, tagH: 15, tagPadX: 7, nameY: 22, valueY: 43, trail: { r: 5.4, step: 16 }, now: { r: 3, gap: 7 } },
+  stroke: { hair: 1, edge: 1.7, edgeOn: 2.25, arrow: 1.5, flow: 1.3, halo: 7, on: 1.75, glyph: 2, lifeline: 1.2, envelope: 1.5, badgeRing: 1.5, path: 1.6, end: 1.6, done: 1.2, trail: 1.2 },
   shadow: { near: 0.8, far: 4, nearY: 1, farY: 3 },
   mini: { w: 168, pad: 8, title: 14, inset: 12, radius: 10 },
   /**
@@ -295,9 +328,9 @@ var LOOK = {
    */
   follow: { aspect: 0.75, minH: 320, fitMinH: 160, ease: 0.6, narrow: 440, badgeRoom: 8, headRoom: 10, head: { pad: 8, h: 40, nameY: 17, subY: 31 } },
   /** 色を混ぜる割合 (%) */
-  mix: { icon: 14, regionIcon: 16, regionIconEdge: 34, cap: 12, capEdge: 42, badgePast: 14, badgePastEdge: 70, mini: 62, miniBand: 16, miniBandEdge: 36, view: 6 },
+  mix: { icon: 14, regionIcon: 16, regionIconEdge: 34, cap: 12, capEdge: 42, badgePast: 14, badgePastEdge: 70, mini: 62, miniBand: 16, miniBandEdge: 36, view: 6, side: 4, sideEdge: 36, ghostEdge: 60, path: 55, past: 72 },
   /** 字の並びの基準線を、置きたい高さの真ん中からどれだけ下げるか */
-  baseline: { label: 3.8, badge: 3.5, carrier: 3.7, stripTitle: 4.5, tag: 3.6, action: 3.8 },
+  baseline: { label: 3.8, badge: 3.5, carrier: 3.7, stripTitle: 4.5, tag: 3.6, action: 3.8, mark: 4 },
   /** 浮いて出る物が下から上がる長さと、弾んで出る物の始まりの大きさ */
   rise: 5,
   popFrom: 0.4};
@@ -331,7 +364,9 @@ var MOTION = {
   popFade: 0.4,
   untilFade: 0.2,
   /** 段の止め絵を撮る時刻を、段の終わりからどれだけ前にするか */
-  still: 0.45
+  still: 0.45,
+  /** 状態遷移図で、札が状態を出てから済んだ印が出るまで */
+  done: 0.3
 };
 var READABLE_PX = 10.5;
 var EASE = {
@@ -349,7 +384,13 @@ var FIGURE_TEXT = {
     pause: "\u6B62\u3081\u308B",
     play: "\u52D5\u304B\u3059",
     next: "\u6B21\u306E\u6BB5",
-    steps: (title) => `${title} \u306E\u6BB5`
+    steps: (title) => `${title} \u306E\u6BB5`,
+    side: "\u8107\u9053",
+    sideNote: "\u4ECA\u56DE\u306F\u901A\u3089\u306A\u3044",
+    sideFrom: (count) => `${count} \u3064\u306E\u72B6\u614B\u304B\u3089\u5165\u308C\u308B`,
+    trail: "\u901A\u3063\u305F\u72B6\u614B",
+    start: "\u59CB\u307E\u308A",
+    end: "\u7D42\u308F\u308A"
   },
   en: {
     cannotDraw: (detail) => `Cannot draw the diagram: ${detail}`,
@@ -358,7 +399,13 @@ var FIGURE_TEXT = {
     pause: "Pause",
     play: "Play",
     next: "Next step",
-    steps: (title) => `Steps of ${title}`
+    steps: (title) => `Steps of ${title}`,
+    side: "Side path",
+    sideNote: "Not taken this time",
+    sideFrom: (count) => `Enterable from ${count} ${count === 1 ? "state" : "states"}`,
+    trail: "States passed",
+    start: "Start",
+    end: "End"
   }
 };
 
@@ -453,12 +500,12 @@ function placeLabel(request, obstacles) {
   const segment = longest(request.points);
   const mx = (segment.a[0] + segment.b[0]) / 2;
   const my = (segment.a[1] + segment.b[1]) / 2;
-  const side = request.side ?? (segment.vertical ? "right" : "above");
+  const side2 = request.side ?? (segment.vertical ? "right" : "above");
   const { offset, side: sideGap } = LOOK.label;
-  const base = side === "above" ? { x: mx - w / 2, y: my - offset - h / 2, w, h } : side === "below" ? { x: mx - w / 2, y: my + offset - h / 2, w, h } : side === "left" ? { x: mx - sideGap - w, y: my - h / 2, w, h } : { x: mx + sideGap, y: my - h / 2, w, h };
-  const away = side === "above" ? [0, -1] : side === "below" ? [0, 1] : side === "left" ? [-1, 0] : [1, 0];
+  const base = side2 === "above" ? { x: mx - w / 2, y: my - offset - h / 2, w, h } : side2 === "below" ? { x: mx - w / 2, y: my + offset - h / 2, w, h } : side2 === "left" ? { x: mx - sideGap - w, y: my - h / 2, w, h } : { x: mx + sideGap, y: my - h / 2, w, h };
+  const away = side2 === "above" ? [0, -1] : side2 === "below" ? [0, 1] : side2 === "left" ? [-1, 0] : [1, 0];
   const slideAxis = [Math.abs(away[1]), Math.abs(away[0])];
-  const slideMax = side === "above" || side === "below" ? w : h * 4;
+  const slideMax = side2 === "above" || side2 === "below" ? w : h * 4;
   const clear = (rect) => obstacles.hard.every((box) => gapBetween(rect, box) >= LOOK.gap) && obstacles.soft.every((other) => gapBetween(rect, other) >= LOOK.label.soft);
   const { search, searchMax } = LOOK.label;
   for (let d = 0; d <= searchMax; d += search) {
@@ -484,29 +531,36 @@ function fieldWidth(diagram, name) {
   const both = value + (tag > 0 ? (value > 0 ? LOOK.strip.tagGap : 0) + tag : 0);
   return Math.max(textWidth(name, TYPE.fieldName), both);
 }
-function stripNeed(diagram) {
+var trailWidth = (trail) => Math.max(textWidth(trail.title, TYPE.fieldName), trail.states.length * LOOK.strip.trail.step);
+function stripNeed(diagram, trail) {
   if (!diagram.strip) return 0;
   const { titleX, fieldGap, pad: pad2 } = LOOK.strip;
   const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
-  return start + diagram.strip.fields.reduce((sum, name) => sum + fieldWidth(diagram, name) + fieldGap, 0) - fieldGap + pad2;
+  const widths = [...diagram.strip.fields.map((name) => fieldWidth(diagram, name)), ...trail ? [trailWidth(trail)] : []];
+  return start + widths.reduce((sum, w) => sum + w + fieldGap, 0) - fieldGap + pad2;
 }
-function layoutStrip(diagram, x, y, width) {
+function layoutStrip(diagram, x, y, width, trail) {
   if (!diagram.strip) return void 0;
   const { titleX, fieldGap, pad: pad2, line, h } = LOOK.strip;
   const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
   const fields = [];
   let cx = start;
   let row = 0;
-  for (const name of diagram.strip.fields) {
-    const w = fieldWidth(diagram, name);
+  const place = (w) => {
     if (cx > start && cx + w > width - pad2) {
       cx = start;
       row++;
     }
-    fields.push({ name, x: x + cx, y: y + row * line, w });
+    const at2 = { x: x + cx, y: y + row * line };
     cx += w + fieldGap;
+    return at2;
+  };
+  for (const name of diagram.strip.fields) {
+    const w = fieldWidth(diagram, name);
+    fields.push({ name, ...place(w), w });
   }
-  return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields };
+  const laidTrail = trail ? { ...trail, ...place(trailWidth(trail)), w: trailWidth(trail) } : void 0;
+  return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields, ...laidTrail ? { trail: laidTrail } : {} };
 }
 function shiftContent(layout, dx, dy) {
   const move = (rect) => {
@@ -532,6 +586,15 @@ function shiftContent(layout, dx, dy) {
     if (edge2.settle) edge2.settle = [edge2.settle[0] + dx, edge2.settle[1] + dy];
   }
   for (const label2 of layout.labels) move(label2);
+  for (const path2 of layout.paths) {
+    path2.points = path2.points.map(([px, py]) => [px + dx, py + dy]);
+    if (path2.label) move(path2.label);
+  }
+  for (const end of layout.ends) {
+    end.x += dx;
+    end.y += dy;
+  }
+  if (layout.side) move(layout.side);
   for (const action2 of layout.actions) move(action2);
   for (const badge2 of layout.badges) {
     badge2.x += dx;
@@ -543,6 +606,10 @@ function shiftContent(layout, dx, dy) {
       field.x += dx;
       field.y += dy;
     }
+    if (layout.strip.trail) {
+      layout.strip.trail.x += dx;
+      layout.strip.trail.y += dy;
+    }
   }
 }
 function cornerBadge(events, step, layout) {
@@ -574,7 +641,7 @@ function groupsOf(diagram) {
   if (loose.length > 0) groups.push({ members: loose });
   return groups;
 }
-var vertical = (side) => side === "left" || side === "right";
+var vertical = (side2) => side2 === "left" || side2 === "right";
 function placeBoxes(diagram, groups) {
   const columns = LOOK.architecture.columns;
   const edges = edgesOf(diagram).map((e) => e.edge);
@@ -821,7 +888,7 @@ function arrange(diagram, groups, slots, rooms) {
       )
     );
   }
-  const layout = { kind: "architecture", width: 0, height: 0, regions, boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [] };
+  const layout = { kind: "architecture", width: 0, height: 0, regions, boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [], paths: [], ends: [] };
   const shift = labels.length > 0 ? Math.max(0, margin + LOOK.label.soft - Math.min(...labels.map((l) => l.x))) : 0;
   if (shift > 0) shiftContent(layout, shift, 0);
   const contentRight = Math.max(...boxes.map((b) => b.x + b.w + R.pad), ...labels.map((l) => l.x + l.w + LOOK.label.soft), ...sceneEdges.flatMap((e) => e.points.map((p) => p[0] + R.pad)));
@@ -928,11 +995,11 @@ function layoutSequence(diagram) {
       let above;
       let under;
       if (event.type === "edge") {
-        const side = event.labelSide ?? "above";
+        const side2 = event.labelSide ?? "above";
         const self = event.from === event.to;
         const named = event.label !== void 0;
-        above = named && side === "above" ? L.offset + L.h / 2 : gap;
-        under = self ? Q.selfH + gap : named && side === "below" ? L.offset + L.h / 2 : gap;
+        above = named && side2 === "above" ? L.offset + L.h / 2 : gap;
+        under = self ? Q.selfH + gap : named && side2 === "below" ? L.offset + L.h / 2 : gap;
       } else {
         above = LOOK.action.h / 2;
         under = LOOK.action.h / 2;
@@ -979,7 +1046,7 @@ function layoutSequence(diagram) {
     const soft = [...labels.filter((l) => l.step === request.step), ...actions];
     labels.push(placeLabel(request, { hard: boxes, soft }));
   }
-  const layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [] };
+  const layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [], paths: [], ends: [] };
   const lefts = [...boxes.map((b) => b.x), ...labels.map((l) => l.x), ...actions.map((a) => a.x)];
   const shift = Math.max(0, margin - Math.min(...lefts));
   if (shift > 0) shiftContent(layout, shift, 0);
@@ -1005,6 +1072,302 @@ function badges(diagram, layout) {
     return cornerBadge(step.events, s, layout);
   });
 }
+var STATE_ENDS = ["start", "finish"];
+
+// src/layout/state.ts
+var isEnd = (id) => STATE_ENDS.includes(id);
+function visitOrder(diagram) {
+  const order = [];
+  const add = (id) => {
+    if (!isEnd(id) && !order.includes(id)) order.push(id);
+  };
+  for (const { edge: edge2 } of edgesOf(diagram)) {
+    add(edge2.from);
+    add(edge2.to);
+  }
+  return order;
+}
+function carrierHalf(carry) {
+  const C = LOOK.carrier;
+  if (carry.kind === "tag") return (textWidth(carry.text, hasWide(carry.text) ? TYPE.carrierJa : TYPE.carrier) + C.tagPadX * 2) / 2;
+  if (carry.kind === "coin") return C.coinR;
+  return C.envW / 2;
+}
+var same = (a, b) => a.from === b.from && a.to === b.to;
+function layoutState(diagram, lang) {
+  const { box: B, state: T, margin, gap } = LOOK;
+  const inset = LOOK.edge.inset;
+  const words = FIGURE_TEXT[lang];
+  const colors = boxColors(diagram);
+  const steps = edgesOf(diagram);
+  const walked = visitOrder(diagram);
+  const ghosts = diagram.boxes.map((b) => b.id).filter((id) => !walked.includes(id));
+  const notTaken = (diagram.state?.paths ?? []).filter((p) => !steps.some(({ edge: edge2 }) => same(edge2, p)));
+  const lines = [...steps.map(({ edge: edge2 }) => edge2), ...notTaken];
+  const G = T.ghost;
+  const ghostWidth = (id) => {
+    const source = diagram.boxes.find((b) => b.id === id);
+    return G.pad * 2 + B.icon + G.gap + Math.max(textWidth(source?.name ?? id, TYPE.boxName), textWidth(source?.sub ?? "", TYPE.boxSub));
+  };
+  const widths = new Map(diagram.boxes.map((b) => [b.id, ghosts.includes(b.id) ? ghostWidth(b.id) : boxWidth(diagram, b.id, true)]));
+  const columnCount = Math.max(1, Math.min(T.columns, walked.length));
+  const rowCount = Math.max(1, Math.ceil(walked.length / T.columns));
+  const slot = new Map(
+    walked.map((id, k) => {
+      const row = Math.floor(k / T.columns);
+      const at2 = k % T.columns;
+      return [id, { row, col: row % 2 === 0 ? at2 : columnCount - 1 - at2 }];
+    })
+  );
+  const colW = Array.from({ length: columnCount }, (_, c) => Math.max(B.minW, ...walked.filter((id) => slot.get(id)?.col === c).map((id) => widths.get(id) ?? B.minW)));
+  const between = Array.from({ length: Math.max(0, columnCount - 1) }, () => T.columnGap);
+  for (const line of lines) {
+    const a = slot.get(line.from);
+    const b = slot.get(line.to);
+    if (!a || !b || line.label === void 0 || a.row !== b.row || Math.abs(a.col - b.col) !== 1) continue;
+    const i = Math.min(a.col, b.col);
+    between[i] = Math.max(between[i] ?? 0, textWidth(line.label, labelStyle(line.label)) + LOOK.label.padX * 2 + T.labelRoom * 2);
+  }
+  const colLeft = [];
+  for (let c = 0; c < columnCount; c++) colLeft.push(c === 0 ? margin : colLeft[c - 1] + colW[c - 1] + between[c - 1]);
+  const center = (c) => colLeft[c] + colW[c] / 2;
+  const isGhost = (id) => ghosts.includes(id);
+  const enteringFrom = new Set(notTaken.filter((p) => isGhost(p.to) && !isGhost(p.from) && !isEnd(p.from)).map((p) => p.from));
+  const notes = [words.sideNote, ...enteringFrom.size > 0 ? [words.sideFrom(enteringFrom.size)] : []];
+  const titleW = Math.max(textWidth(words.side, TYPE.regionName), ...notes.map((note) => textWidth(note, TYPE.regionNote)));
+  const sideH = T.side.pad * 2 + Math.max(G.h, TYPE.regionName.size + LOOK.region.line * notes.length + T.side.pad / 4);
+  const starts = lines.some((line) => line.from === "start");
+  const top0 = margin + (ghosts.length > 0 ? sideH + T.side.gap : starts ? T.start + T.drop : 0);
+  const rowY = (row) => top0 + row * (B.h + T.rowGap);
+  const boxOf = (id, cx, y, ghost) => {
+    const source = diagram.boxes.find((b) => b.id === id);
+    const w = widths.get(id) ?? B.minW;
+    const h = ghost ? G.h : B.h;
+    return {
+      id,
+      name: source?.name ?? id,
+      ...source?.sub !== void 0 ? { sub: source.sub } : {},
+      ...source?.icon !== void 0 ? { icon: source.icon } : {},
+      color: colors.get(id) ?? "slate",
+      x: cx - w / 2,
+      y,
+      w,
+      h,
+      cx,
+      cy: y + h / 2,
+      ...ghost ? { ghost: true } : {}
+    };
+  };
+  const boxes = walked.map((id) => {
+    const s = slot.get(id);
+    return boxOf(id, center(s.col), rowY(s.row), false);
+  });
+  const byId = new Map(boxes.map((b) => [b.id, b]));
+  const below = (box) => boxes.some((other) => other !== box && Math.abs(other.cx - box.cx) < 0.5 && other.y > box.y);
+  const ends = [];
+  const first = boxes[0];
+  const contentRight = Math.max(...boxes.map((b) => b.x + b.w));
+  let side2;
+  const lane = margin + sideH + T.side.lane;
+  if (ghosts.length > 0) {
+    const sourcesOf = (id) => notTaken.filter((p) => p.to === id).flatMap((p) => byId.get(p.from) ?? []);
+    const all = ghosts.flatMap(sourcesOf);
+    const x = Math.max(margin, Math.min(...all.length > 0 ? all.map((b) => b.x) : [margin + T.side.pad]) - T.side.pad);
+    let cursor = x + T.side.pad + titleW + gap * 2;
+    const wanted = ghosts.map((id) => {
+      const from = sourcesOf(id);
+      return { id, cx: from.length > 0 ? from.reduce((sum, b) => sum + b.cx, 0) / from.length : cursor };
+    });
+    wanted.sort((a, b) => a.cx - b.cx);
+    let right = x;
+    for (const { id, cx } of wanted) {
+      const w = widths.get(id) ?? B.minW;
+      const left = Math.max(cx - w / 2, cursor);
+      const ghost = boxOf(id, left + w / 2, margin + (sideH - G.h) / 2, true);
+      boxes.push(ghost);
+      byId.set(id, ghost);
+      const finishes = notTaken.some((p) => p.from === id && p.to === "finish");
+      if (finishes) ends.push({ kind: "finish", x: ghost.x + ghost.w + T.beside, y: ghost.cy, r: T.end.r, ghost: true, text: "", box: id });
+      right = finishes ? ghost.x + ghost.w + T.beside + T.end.r : ghost.x + ghost.w;
+      cursor = right + gap * 2;
+    }
+    const rightmost = Math.max(right + T.side.pad, contentRight);
+    side2 = { x, y: margin, w: rightmost - x, h: sideH, title: words.side, notes };
+  }
+  if (first && starts) {
+    const reach = first.cx + T.start + T.text + textWidth(words.start, TYPE.regionNote) + gap;
+    const y = side2 && reach < side2.x ? side2.y + T.side.pad + T.start : first.y - T.drop;
+    ends.unshift({ kind: "start", x: first.cx, y, r: T.start, ghost: false, text: words.start });
+  }
+  for (const box of boxes.filter((b) => !b.ghost && lines.some((line) => line.from === b.id && line.to === "finish"))) {
+    ends.push(
+      below(box) ? { kind: "finish", x: box.x + box.w + T.beside, y: box.cy, r: T.end.r, ghost: false, text: words.end, box: box.id } : { kind: "finish", x: box.cx, y: box.y + box.h + T.below, r: T.end.r, ghost: false, text: words.end, box: box.id }
+    );
+  }
+  const between2 = (a, b) => {
+    const sa = slot.get(a.id);
+    const sb = slot.get(b.id);
+    if (!sa || !sb) return [[a.cx, a.y + a.h], [b.cx, b.y - inset]];
+    if (sa.row === sb.row && Math.abs(sa.col - sb.col) === 1) {
+      return b.cx > a.cx ? [[a.x + a.w, a.cy], [b.x - inset, b.cy]] : [[a.x, a.cy], [b.x + b.w + inset, b.cy]];
+    }
+    if (sa.row === sb.row) {
+      const y2 = a.y + a.h + T.rowGap / 4;
+      return [[a.cx, a.y + a.h], [a.cx, y2], [b.cx, y2], [b.cx, b.y + b.h + inset]];
+    }
+    if (sb.row > sa.row) {
+      if (Math.abs(a.cx - b.cx) < 0.5) return [[a.cx, a.y + a.h], [b.cx, b.y - inset]];
+      const y2 = a.y + a.h + T.rowGap / 2;
+      return [[a.cx, a.y + a.h], [a.cx, y2], [b.cx, y2], [b.cx, b.y - inset]];
+    }
+    if (Math.abs(a.cx - b.cx) < 0.5) return [[a.cx, a.y], [b.cx, b.y + b.h + inset]];
+    const y = b.y + b.h + T.rowGap / 2;
+    return [[a.cx, a.y], [a.cx, y], [b.cx, y], [b.cx, b.y + b.h + inset]];
+  };
+  const entryOf = (from, to) => {
+    const sources = notTaken.filter((p) => p.to === to.id).flatMap((p) => byId.get(p.from) ?? []).sort((a, b) => a.cx - b.cx);
+    const k = sources.findIndex((b) => b.id === from);
+    if (sources.length <= 1) return Math.min(Math.max(sources[0]?.cx ?? to.cx, to.x + T.side.entry), to.x + to.w - T.side.entry);
+    return to.x + T.side.entry + (to.w - T.side.entry * 2) * Math.max(0, k) / (sources.length - 1);
+  };
+  const exitX = (box) => starts && box === first ? box.cx + T.side.entry : box.cx;
+  const finishOf = (id) => ends.find((e) => e.kind === "finish" && e.box === id);
+  const loopOf = (box) => {
+    const { w, h, samples } = T.loop;
+    const bottom2 = box.y + box.h;
+    const p0 = [box.cx + w / 2, bottom2];
+    const c1 = [box.cx + w * 3 / 4, bottom2 + h * 4 / 3];
+    const c2 = [box.cx - w * 3 / 4, bottom2 + h * 4 / 3];
+    const p3 = [box.cx - w / 2, bottom2 + inset];
+    return Array.from({ length: samples + 1 }, (_, k) => {
+      const t = k / samples;
+      const u = 1 - t;
+      const at2 = (i) => u * u * u * p0[i] + 3 * u * u * t * c1[i] + 3 * u * t * t * c2[i] + t * t * t * p3[i];
+      return [at2(0), at2(1)];
+    });
+  };
+  const route = (from, to) => {
+    if (from === "start") {
+      const start = ends.find((e) => e.kind === "start");
+      const target = byId.get(to);
+      if (!start || !target) return [];
+      return [[start.x, start.y + start.r], [target.cx, target.y - inset]];
+    }
+    const a = byId.get(from);
+    if (!a) return [];
+    if (to === "finish") {
+      const end = finishOf(from);
+      if (!end) return [];
+      return Math.abs(end.x - a.cx) < 0.5 ? [[a.cx, a.y + a.h], [a.cx, end.y - end.r - inset]] : [[a.x + a.w, a.cy], [end.x - end.r - inset, a.cy]];
+    }
+    const b = byId.get(to);
+    if (!b) return [];
+    if (from === to) return loopOf(a);
+    if (b.ghost && !a.ghost) {
+      const sx = exitX(a);
+      const ex = entryOf(from, b);
+      return Math.abs(sx - ex) < 0.5 ? [[sx, a.y], [ex, b.y + b.h + inset]] : [[sx, a.y], [sx, lane], [ex, lane], [ex, b.y + b.h + inset]];
+    }
+    if (a.ghost && b.ghost) return [[a.x + a.w, a.cy], [b.x - inset, b.cy]];
+    if (a.ghost) return [[a.cx, a.y + a.h], [a.cx, lane], [b.cx, lane], [b.cx, b.y - inset]];
+    return between2(a, b);
+  };
+  const settleOf = (edge2) => {
+    const target = byId.get(edge2.to);
+    if (target) return [target.cx, target.cy + B.iconY];
+    const end = edge2.to === "finish" ? finishOf(edge2.from) : void 0;
+    if (!end) return void 0;
+    const from = byId.get(edge2.from);
+    return from && Math.abs(end.x - from.cx) < 0.5 ? [end.x - end.r - gap - carrierHalf(edge2.carry), end.y] : [end.x, end.y + end.r + gap + LOOK.carrier.tagH / 2];
+  };
+  const sceneEdges = steps.map(({ step, event, edge: edge2 }) => {
+    const settle = settleOf(edge2);
+    return {
+      step,
+      event,
+      from: edge2.from,
+      to: edge2.to,
+      points: route(edge2.from, edge2.to),
+      color: colorOf(edge2, colors),
+      carry: edge2.carry,
+      ...settle ? { settle } : {}
+    };
+  });
+  for (const e of sceneEdges) {
+    if (e.points.length !== 2 || !sceneEdges.some((o) => o.from === e.to && o.to === e.from && o.points.length === 2)) continue;
+    const [p, q] = e.points;
+    const flat = Math.abs(q[1] - p[1]) < Math.abs(q[0] - p[0]);
+    const d = (e.from < e.to ? 1 : -1) * LOOK.edge.parallel;
+    e.points = e.points.map(([x, y]) => flat ? [x, y + d] : [x + d, y]);
+  }
+  const paths = notTaken.map((p) => ({ from: p.from, to: p.to, points: route(p.from, p.to) }));
+  const labels = [];
+  const soft = side2 ? [{ x: side2.x, y: side2.y, w: T.side.pad + titleW, h: side2.h }] : [];
+  for (const e of sceneEdges) {
+    const source = diagram.steps[e.step]?.events[e.event];
+    if (source?.type !== "edge" || source.label === void 0) continue;
+    const style = labelStyle(source.label);
+    if (e.from === e.to) {
+      const w = textWidth(source.label, style) + LOOK.label.padX * 2;
+      const bottom2 = Math.max(...e.points.map(([, y]) => y));
+      labels.push({ step: e.step, event: e.event, text: source.label, family: style.family, color: e.color, x: (e.points[0]?.[0] ?? 0) - T.loop.w / 2 - w / 2, y: bottom2 + LOOK.label.soft, w, h: LOOK.label.h });
+      continue;
+    }
+    const side22 = source.labelSide ?? (e.to === "finish" ? "left" : void 0);
+    labels.push(
+      placeLabel(
+        { step: e.step, event: e.event, text: source.label, points: e.points, color: e.color, ...side22 ? { side: side22 } : {} },
+        { hard: boxes, soft: [...soft, ...labels.filter((l) => l.step === e.step)] }
+      )
+    );
+  }
+  notTaken.forEach((p, i) => {
+    const path2 = paths[i];
+    if (p.label === void 0 || path2.points.length === 0) return;
+    const style = labelStyle(p.label);
+    const into = byId.get(p.to)?.ghost === true && byId.get(p.from)?.ghost !== true;
+    const rect = into ? { x: path2.points[0][0] + LOOK.label.soft, y: lane + LOOK.label.soft, w: textWidth(p.label, style) + LOOK.label.padX * 2, h: LOOK.label.h } : placeLabel({ step: -1, event: i, text: p.label, points: path2.points, color: "slate" }, { hard: boxes, soft });
+    path2.label = { x: rect.x, y: rect.y, w: rect.w, h: rect.h, text: p.label, family: style.family };
+  });
+  const layout = { kind: "state", width: 0, height: 0, regions: [], boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [], paths, ends, ...side2 ? { side: side2 } : {} };
+  const lefts = [...boxes.map((b) => b.x), ...labels.map((l) => l.x), ...paths.flatMap((p) => p.label ? [p.label.x] : [])];
+  const shift = Math.max(0, margin - Math.min(...lefts));
+  if (shift > 0) shiftContent(layout, shift, 0);
+  const endRight = (e) => e.x + (e.text === "" ? e.r : T.text + textWidth(e.text, TYPE.regionNote));
+  const rights = [
+    ...boxes.map((b) => b.x + b.w),
+    ...labels.map((l) => l.x + l.w),
+    ...ends.map(endRight),
+    ...sceneEdges.flatMap((e) => e.points.map((p) => p[0])),
+    ...paths.flatMap((p) => [...p.points.map((q) => q[0]), ...p.label ? [p.label.x + p.label.w] : []]),
+    ...side2 ? [side2.x + side2.w] : []
+  ];
+  const bottoms = [...boxes.map((b) => b.y + b.h), ...labels.map((l) => l.y + l.h), ...ends.map((e) => e.y + e.r), ...sceneEdges.flatMap((e) => e.points.map((p) => p[1]))];
+  const trail = { title: words.trail, states: walked.map((id) => ({ box: id, color: colors.get(id) ?? "slate" })) };
+  const width = Math.max(Math.max(...rights) + margin, stripNeed(diagram, trail) + margin * 2);
+  const bottom = Math.max(...bottoms, rowY(rowCount - 1) + B.h);
+  const strip2 = layoutStrip(diagram, margin, bottom + gap, width - margin * 2, trail);
+  layout.width = width;
+  layout.height = (strip2 ? strip2.y + strip2.h : bottom) + margin;
+  if (strip2) layout.strip = strip2;
+  layout.badges = diagram.steps.map((step, s) => {
+    const edge2 = sceneEdges.find((e) => e.step === s && e.points.length > 0);
+    if (!edge2) return cornerBadge(step.events, s, layout);
+    if (edge2.from === edge2.to) {
+      const right = Math.max(...edge2.points.map(([px]) => px));
+      const top = edge2.points[0][1];
+      const deep = Math.max(...edge2.points.map(([, py]) => py));
+      return { step: s, x: right + LOOK.badge.r + LOOK.badge.inset, y: top + (deep - top) * T.loop.badgeAt, color: edge2.color };
+    }
+    const [x, y] = badgeOnPath(edge2.points);
+    return { step: s, x, y, color: edge2.color };
+  });
+  return layout;
+}
+function colorOf(edge2, colors) {
+  if (edge2.carry.kind === "coin") return edgeColor(edge2, colors);
+  return colors.get(edge2.to === "finish" ? edge2.from : edge2.to) ?? "slate";
+}
 
 // src/field-messages.ts
 var TYPES_JA = {
@@ -1037,6 +1400,7 @@ var ja = {
   minimum: (limit) => `${limit} \u4EE5\u4E0A\u306B\u3059\u308B`,
   const: (value) => `${value} \u306B\u3059\u308B`,
   not: (allowed) => allowed ? `${allowed.field} \u306E\u6B04\u306F kind \u304C ${allowed.kind} \u306E\u6642\u3060\u3051\u66F8\u3051\u308B` : "\u3053\u306E\u6B04\u306E\u7D44\u307F\u5408\u308F\u305B\u306F\u66F8\u3051\u306A\u3044",
+  reserved: (names) => `${names.join(" \u3068 ")} \u306F\u72B6\u614B\u9077\u79FB\u56F3\u306E\u59CB\u307E\u308A\u3068\u7D42\u308F\u308A\u306E\u5370\u306E\u540D\u524D\u3067\u3001\u7BB1\u306E\u540D\u672D\u306B\u4F7F\u3048\u306A\u3044`,
   anyOf: (fields) => fields.length > 0 ? `${fields.join(" \u304B ")} \u306E${fields.length === 2 ? "\u3069\u3061\u3089\u304B" : "\u3069\u308C\u304B"}\u306E\u6B04\u304C\u8981\u308B` : "\u66F8\u3051\u308B\u5F62\u306E\u3069\u308C\u306B\u3082\u5408\u308F\u306A\u3044",
   oneOf: "\u66F8\u3051\u308B\u5F62\u306E\u3069\u308C\u304B 1 \u3064\u3060\u3051\u306B\u5408\u308F\u305B\u308B",
   discriminator: (tag, values) => `${tag} \u306F ${values.join(" / ")} \u306E\u3069\u308C\u304B\u306B\u3059\u308B`,
@@ -1053,6 +1417,7 @@ var en = {
   minimum: (limit) => `Use ${limit} or greater`,
   const: (value) => `Use ${value}`,
   not: (allowed) => allowed ? `The ${allowed.field} field is allowed only when kind is ${allowed.kind}` : "This combination of fields is not allowed",
+  reserved: (names) => `${names.join(" and ")} name the start and end marks of a state diagram and cannot be box ids`,
   anyOf: (fields) => fields.length > 0 ? `Write one of the ${fields.join(" or ")} fields` : "Does not match any of the allowed shapes",
   oneOf: "Match exactly one of the allowed shapes",
   discriminator: (tag, values) => `${tag} is one of ${values.join(" / ")}`,
@@ -1067,7 +1432,7 @@ function ucs2length(str) {
   return length;
 }
 var validate_diagram_default = validate10;
-var schema11 = { "properties": { "version": { "description": "\u5F62\u5F0F\u306E\u7248", "type": "integer", "minimum": 1 }, "kind": { "description": "\u56F3\u306E\u7A2E\u985E", "enum": ["sequence", "architecture"] }, "title": { "$ref": "#/definitions/text" }, "view": { "description": "\u898B\u305B\u65B9\u3002\u66F8\u304B\u306A\u3051\u308C\u3070\u5B57\u306E\u5927\u304D\u3055\u3067\u9078\u3076\u3002fixed \u306F\u5168\u4F53\u3092\u6B62\u3081\u3066\u4E2D\u3060\u3051\u52D5\u304B\u3057\u3001follow \u306F\u5BC4\u3063\u3066\u52D5\u304B\u3057\u5168\u4F53\u56F3\u3067\u4ECA\u3069\u3053\u304B\u3092\u793A\u3059", "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" } }};
+var schema11 = { "properties": { "version": { "description": "\u5F62\u5F0F\u306E\u7248", "type": "integer", "minimum": 1 }, "kind": { "description": "\u56F3\u306E\u7A2E\u985E", "enum": ["sequence", "architecture", "state"] }, "title": { "$ref": "#/definitions/text" }, "view": { "description": "\u898B\u305B\u65B9\u3002\u66F8\u304B\u306A\u3051\u308C\u3070\u5B57\u306E\u5927\u304D\u3055\u3067\u9078\u3076\u3002fixed \u306F\u5168\u4F53\u3092\u6B62\u3081\u3066\u4E2D\u3060\u3051\u52D5\u304B\u3057\u3001follow \u306F\u5BC4\u3063\u3066\u52D5\u304B\u3057\u5168\u4F53\u56F3\u3067\u4ECA\u3069\u3053\u304B\u3092\u793A\u3059", "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" }, "state": { "$ref": "#/definitions/state" } }};
 var func2 = Object.prototype.hasOwnProperty;
 var func3 = ucs2length;
 var schema17 = { "enum": ["blue", "amber", "green", "violet", "rose", "slate", "coin"] };
@@ -2461,6 +2826,182 @@ function validate23(data, { instancePath = "", parentData, parentDataProperty, r
   validate23.errors = vErrors;
   return errors === 0;
 }
+function validate26(data, { instancePath = "", parentData, parentDataProperty, rootData = data } = {}) {
+  let vErrors = null;
+  let errors = 0;
+  if (data && typeof data == "object" && !Array.isArray(data)) {
+    if (data.from === void 0) {
+      const err0 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "from" }, message: "must have required property 'from'" };
+      if (vErrors === null) {
+        vErrors = [err0];
+      } else {
+        vErrors.push(err0);
+      }
+      errors++;
+    }
+    if (data.to === void 0) {
+      const err1 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "to" }, message: "must have required property 'to'" };
+      if (vErrors === null) {
+        vErrors = [err1];
+      } else {
+        vErrors.push(err1);
+      }
+      errors++;
+    }
+    for (const key0 in data) {
+      if (!(key0 === "from" || key0 === "to" || key0 === "label")) {
+        const err2 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
+        if (vErrors === null) {
+          vErrors = [err2];
+        } else {
+          vErrors.push(err2);
+        }
+        errors++;
+      }
+    }
+    if (data.from !== void 0) {
+      let data0 = data.from;
+      if (typeof data0 === "string") {
+        if (!pattern0.test(data0)) {
+          const err3 = { instancePath: instancePath + "/from", schemaPath: "#/definitions/id/pattern", keyword: "pattern", params: { pattern: "^[^\\s\\[\\]\u300C\u300D=:]+$" }, message: 'must match pattern "^[^\\s\\[\\]\u300C\u300D=:]+$"' };
+          if (vErrors === null) {
+            vErrors = [err3];
+          } else {
+            vErrors.push(err3);
+          }
+          errors++;
+        }
+      } else {
+        const err4 = { instancePath: instancePath + "/from", schemaPath: "#/definitions/id/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        if (vErrors === null) {
+          vErrors = [err4];
+        } else {
+          vErrors.push(err4);
+        }
+        errors++;
+      }
+    }
+    if (data.to !== void 0) {
+      let data1 = data.to;
+      if (typeof data1 === "string") {
+        if (!pattern0.test(data1)) {
+          const err5 = { instancePath: instancePath + "/to", schemaPath: "#/definitions/id/pattern", keyword: "pattern", params: { pattern: "^[^\\s\\[\\]\u300C\u300D=:]+$" }, message: 'must match pattern "^[^\\s\\[\\]\u300C\u300D=:]+$"' };
+          if (vErrors === null) {
+            vErrors = [err5];
+          } else {
+            vErrors.push(err5);
+          }
+          errors++;
+        }
+      } else {
+        const err6 = { instancePath: instancePath + "/to", schemaPath: "#/definitions/id/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        if (vErrors === null) {
+          vErrors = [err6];
+        } else {
+          vErrors.push(err6);
+        }
+        errors++;
+      }
+    }
+    if (data.label !== void 0) {
+      let data2 = data.label;
+      if (typeof data2 === "string") {
+        if (func3(data2) < 1) {
+          const err7 = { instancePath: instancePath + "/label", schemaPath: "#/definitions/text/minLength", keyword: "minLength", params: { limit: 1 }, message: "must NOT have fewer than 1 characters" };
+          if (vErrors === null) {
+            vErrors = [err7];
+          } else {
+            vErrors.push(err7);
+          }
+          errors++;
+        }
+      } else {
+        const err8 = { instancePath: instancePath + "/label", schemaPath: "#/definitions/text/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        if (vErrors === null) {
+          vErrors = [err8];
+        } else {
+          vErrors.push(err8);
+        }
+        errors++;
+      }
+    }
+  } else {
+    const err9 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
+    if (vErrors === null) {
+      vErrors = [err9];
+    } else {
+      vErrors.push(err9);
+    }
+    errors++;
+  }
+  validate26.errors = vErrors;
+  return errors === 0;
+}
+function validate25(data, { instancePath = "", parentData, parentDataProperty, rootData = data } = {}) {
+  let vErrors = null;
+  let errors = 0;
+  if (data && typeof data == "object" && !Array.isArray(data)) {
+    if (data.paths === void 0) {
+      const err0 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "paths" }, message: "must have required property 'paths'" };
+      if (vErrors === null) {
+        vErrors = [err0];
+      } else {
+        vErrors.push(err0);
+      }
+      errors++;
+    }
+    for (const key0 in data) {
+      if (!(key0 === "paths")) {
+        const err1 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
+        if (vErrors === null) {
+          vErrors = [err1];
+        } else {
+          vErrors.push(err1);
+        }
+        errors++;
+      }
+    }
+    if (data.paths !== void 0) {
+      let data0 = data.paths;
+      if (Array.isArray(data0)) {
+        if (data0.length < 1) {
+          const err2 = { instancePath: instancePath + "/paths", schemaPath: "#/properties/paths/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
+          if (vErrors === null) {
+            vErrors = [err2];
+          } else {
+            vErrors.push(err2);
+          }
+          errors++;
+        }
+        const len0 = data0.length;
+        for (let i0 = 0; i0 < len0; i0++) {
+          if (!validate26(data0[i0], { instancePath: instancePath + "/paths/" + i0, parentData: data0, parentDataProperty: i0, rootData })) {
+            vErrors = vErrors === null ? validate26.errors : vErrors.concat(validate26.errors);
+            errors = vErrors.length;
+          }
+        }
+      } else {
+        const err3 = { instancePath: instancePath + "/paths", schemaPath: "#/properties/paths/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        if (vErrors === null) {
+          vErrors = [err3];
+        } else {
+          vErrors.push(err3);
+        }
+        errors++;
+      }
+    }
+  } else {
+    const err4 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
+    if (vErrors === null) {
+      vErrors = [err4];
+    } else {
+      vErrors.push(err4);
+    }
+    errors++;
+  }
+  validate25.errors = vErrors;
+  return errors === 0;
+}
 function validate10(data, { instancePath = "", parentData, parentDataProperty, rootData = data } = {}) {
   let vErrors = null;
   let errors = 0;
@@ -2502,9 +3043,11 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
   let ifClause0;
   if (_valid0) {
     const _errs4 = errors;
+    const _errs5 = errors;
+    const _errs6 = errors;
     if (data && typeof data == "object" && !Array.isArray(data)) {
-      if (data.sequence === void 0) {
-        const err2 = { instancePath, schemaPath: "#/then/required", keyword: "required", params: { missingProperty: "sequence" }, message: "must have required property 'sequence'" };
+      if (data.state === void 0 && ("state")) {
+        const err2 = {};
         if (vErrors === null) {
           vErrors = [err2];
         } else {
@@ -2513,227 +3056,391 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
         errors++;
       }
     }
+    var valid2 = _errs6 === errors;
+    if (valid2) {
+      const err3 = { instancePath, schemaPath: "#/then/not", keyword: "not", params: {}, message: "must NOT be valid" };
+      if (vErrors === null) {
+        vErrors = [err3];
+      } else {
+        vErrors.push(err3);
+      }
+      errors++;
+    } else {
+      errors = _errs5;
+      if (vErrors !== null) {
+        if (_errs5) {
+          vErrors.length = _errs5;
+        } else {
+          vErrors = null;
+        }
+      }
+    }
+    if (data && typeof data == "object" && !Array.isArray(data)) {
+      if (data.sequence === void 0) {
+        const err4 = { instancePath, schemaPath: "#/then/required", keyword: "required", params: { missingProperty: "sequence" }, message: "must have required property 'sequence'" };
+        if (vErrors === null) {
+          vErrors = [err4];
+        } else {
+          vErrors.push(err4);
+        }
+        errors++;
+      }
+    }
     var _valid0 = _errs4 === errors;
     valid0 = _valid0;
     ifClause0 = "then";
   } else {
-    const _errs5 = errors;
-    const _errs6 = errors;
     const _errs7 = errors;
+    const _errs8 = errors;
+    const _errs9 = errors;
     if (data && typeof data == "object" && !Array.isArray(data)) {
       if (data.sequence === void 0 && ("sequence")) {
-        const err3 = {};
+        const err5 = {};
         if (vErrors === null) {
-          vErrors = [err3];
+          vErrors = [err5];
         } else {
-          vErrors.push(err3);
+          vErrors.push(err5);
         }
         errors++;
       }
     }
-    var valid2 = _errs7 === errors;
-    if (valid2) {
-      const err4 = { instancePath, schemaPath: "#/else/not", keyword: "not", params: {}, message: "must NOT be valid" };
+    var valid3 = _errs9 === errors;
+    if (valid3) {
+      const err6 = { instancePath, schemaPath: "#/else/not", keyword: "not", params: {}, message: "must NOT be valid" };
       if (vErrors === null) {
-        vErrors = [err4];
+        vErrors = [err6];
       } else {
-        vErrors.push(err4);
+        vErrors.push(err6);
       }
       errors++;
     } else {
-      errors = _errs6;
+      errors = _errs8;
       if (vErrors !== null) {
-        if (_errs6) {
-          vErrors.length = _errs6;
+        if (_errs8) {
+          vErrors.length = _errs8;
         } else {
           vErrors = null;
         }
       }
     }
-    var _valid0 = _errs5 === errors;
+    const _errs10 = errors;
+    let valid4 = true;
+    const _errs11 = errors;
+    if (data && typeof data == "object" && !Array.isArray(data)) {
+      if (data.kind === void 0 && ("kind")) {
+        const err7 = {};
+        if (vErrors === null) {
+          vErrors = [err7];
+        } else {
+          vErrors.push(err7);
+        }
+        errors++;
+      } else {
+        if (data.kind !== void 0) {
+          if ("state" !== data.kind) {
+            const err8 = {};
+            if (vErrors === null) {
+              vErrors = [err8];
+            } else {
+              vErrors.push(err8);
+            }
+            errors++;
+          }
+        }
+      }
+    }
+    var _valid1 = _errs11 === errors;
+    errors = _errs10;
+    if (vErrors !== null) {
+      if (_errs10) {
+        vErrors.length = _errs10;
+      } else {
+        vErrors = null;
+      }
+    }
+    let ifClause1;
+    if (_valid1) {
+      const _errs13 = errors;
+      if (data && typeof data == "object" && !Array.isArray(data)) {
+        if (data.boxes !== void 0) {
+          let data2 = data.boxes;
+          if (Array.isArray(data2)) {
+            const len0 = data2.length;
+            for (let i0 = 0; i0 < len0; i0++) {
+              let data3 = data2[i0];
+              if (data3 && typeof data3 == "object" && !Array.isArray(data3)) {
+                if (data3.id !== void 0) {
+                  let data4 = data3.id;
+                  const _errs17 = errors;
+                  const _errs18 = errors;
+                  if (!(data4 === "start" || data4 === "finish")) {
+                    const err9 = {};
+                    if (vErrors === null) {
+                      vErrors = [err9];
+                    } else {
+                      vErrors.push(err9);
+                    }
+                    errors++;
+                  }
+                  var valid10 = _errs18 === errors;
+                  if (valid10) {
+                    const err10 = { instancePath: instancePath + "/boxes/" + i0 + "/id", schemaPath: "#/else/then/properties/boxes/items/properties/id/not", keyword: "not", params: {}, message: "must NOT be valid" };
+                    if (vErrors === null) {
+                      vErrors = [err10];
+                    } else {
+                      vErrors.push(err10);
+                    }
+                    errors++;
+                  } else {
+                    errors = _errs17;
+                    if (vErrors !== null) {
+                      if (_errs17) {
+                        vErrors.length = _errs17;
+                      } else {
+                        vErrors = null;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      var _valid1 = _errs13 === errors;
+      valid4 = _valid1;
+      ifClause1 = "then";
+    } else {
+      const _errs19 = errors;
+      const _errs20 = errors;
+      const _errs21 = errors;
+      if (data && typeof data == "object" && !Array.isArray(data)) {
+        if (data.state === void 0 && ("state")) {
+          const err11 = {};
+          if (vErrors === null) {
+            vErrors = [err11];
+          } else {
+            vErrors.push(err11);
+          }
+          errors++;
+        }
+      }
+      var valid11 = _errs21 === errors;
+      if (valid11) {
+        const err12 = { instancePath, schemaPath: "#/else/else/not", keyword: "not", params: {}, message: "must NOT be valid" };
+        if (vErrors === null) {
+          vErrors = [err12];
+        } else {
+          vErrors.push(err12);
+        }
+        errors++;
+      } else {
+        errors = _errs20;
+        if (vErrors !== null) {
+          if (_errs20) {
+            vErrors.length = _errs20;
+          } else {
+            vErrors = null;
+          }
+        }
+      }
+      var _valid1 = _errs19 === errors;
+      valid4 = _valid1;
+      ifClause1 = "else";
+    }
+    if (!valid4) {
+      const err13 = { instancePath, schemaPath: "#/else/if", keyword: "if", params: { failingKeyword: ifClause1 }, message: 'must match "' + ifClause1 + '" schema' };
+      if (vErrors === null) {
+        vErrors = [err13];
+      } else {
+        vErrors.push(err13);
+      }
+      errors++;
+    }
+    var _valid0 = _errs7 === errors;
     valid0 = _valid0;
     ifClause0 = "else";
   }
   if (!valid0) {
-    const err5 = { instancePath, schemaPath: "#/if", keyword: "if", params: { failingKeyword: ifClause0 }, message: 'must match "' + ifClause0 + '" schema' };
+    const err14 = { instancePath, schemaPath: "#/if", keyword: "if", params: { failingKeyword: ifClause0 }, message: 'must match "' + ifClause0 + '" schema' };
     if (vErrors === null) {
-      vErrors = [err5];
+      vErrors = [err14];
     } else {
-      vErrors.push(err5);
+      vErrors.push(err14);
     }
     errors++;
   }
   if (data && typeof data == "object" && !Array.isArray(data)) {
     if (data.version === void 0) {
-      const err6 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "version" }, message: "must have required property 'version'" };
+      const err15 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "version" }, message: "must have required property 'version'" };
       if (vErrors === null) {
-        vErrors = [err6];
+        vErrors = [err15];
       } else {
-        vErrors.push(err6);
+        vErrors.push(err15);
       }
       errors++;
     }
     if (data.kind === void 0) {
-      const err7 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "kind" }, message: "must have required property 'kind'" };
+      const err16 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "kind" }, message: "must have required property 'kind'" };
       if (vErrors === null) {
-        vErrors = [err7];
+        vErrors = [err16];
       } else {
-        vErrors.push(err7);
+        vErrors.push(err16);
       }
       errors++;
     }
     if (data.title === void 0) {
-      const err8 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "title" }, message: "must have required property 'title'" };
+      const err17 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "title" }, message: "must have required property 'title'" };
       if (vErrors === null) {
-        vErrors = [err8];
+        vErrors = [err17];
       } else {
-        vErrors.push(err8);
+        vErrors.push(err17);
       }
       errors++;
     }
     if (data.boxes === void 0) {
-      const err9 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "boxes" }, message: "must have required property 'boxes'" };
+      const err18 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "boxes" }, message: "must have required property 'boxes'" };
       if (vErrors === null) {
-        vErrors = [err9];
+        vErrors = [err18];
       } else {
-        vErrors.push(err9);
+        vErrors.push(err18);
       }
       errors++;
     }
     if (data.steps === void 0) {
-      const err10 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "steps" }, message: "must have required property 'steps'" };
+      const err19 = { instancePath, schemaPath: "#/required", keyword: "required", params: { missingProperty: "steps" }, message: "must have required property 'steps'" };
       if (vErrors === null) {
-        vErrors = [err10];
+        vErrors = [err19];
       } else {
-        vErrors.push(err10);
+        vErrors.push(err19);
       }
       errors++;
     }
     for (const key0 in data) {
       if (!func2.call(schema11.properties, key0)) {
-        const err11 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
+        const err20 = { instancePath, schemaPath: "#/additionalProperties", keyword: "additionalProperties", params: { additionalProperty: key0 }, message: "must NOT have additional properties" };
         if (vErrors === null) {
-          vErrors = [err11];
+          vErrors = [err20];
         } else {
-          vErrors.push(err11);
+          vErrors.push(err20);
         }
         errors++;
       }
     }
     if (data.version !== void 0) {
-      let data1 = data.version;
-      if (!(typeof data1 == "number" && (!(data1 % 1) && !isNaN(data1)) && isFinite(data1))) {
-        const err12 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/type", keyword: "type", params: { type: "integer" }, message: "must be integer" };
+      let data5 = data.version;
+      if (!(typeof data5 == "number" && (!(data5 % 1) && !isNaN(data5)) && isFinite(data5))) {
+        const err21 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/type", keyword: "type", params: { type: "integer" }, message: "must be integer" };
         if (vErrors === null) {
-          vErrors = [err12];
+          vErrors = [err21];
         } else {
-          vErrors.push(err12);
+          vErrors.push(err21);
         }
         errors++;
       }
-      if (typeof data1 == "number" && isFinite(data1)) {
-        if (data1 < 1 || isNaN(data1)) {
-          const err13 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/minimum", keyword: "minimum", params: { comparison: ">=", limit: 1 }, message: "must be >= 1" };
+      if (typeof data5 == "number" && isFinite(data5)) {
+        if (data5 < 1 || isNaN(data5)) {
+          const err22 = { instancePath: instancePath + "/version", schemaPath: "#/properties/version/minimum", keyword: "minimum", params: { comparison: ">=", limit: 1 }, message: "must be >= 1" };
           if (vErrors === null) {
-            vErrors = [err13];
+            vErrors = [err22];
           } else {
-            vErrors.push(err13);
+            vErrors.push(err22);
           }
           errors++;
         }
       }
     }
     if (data.kind !== void 0) {
-      let data2 = data.kind;
-      if (!(data2 === "sequence" || data2 === "architecture")) {
-        const err14 = { instancePath: instancePath + "/kind", schemaPath: "#/properties/kind/enum", keyword: "enum", params: { allowedValues: schema11.properties.kind.enum }, message: "must be equal to one of the allowed values" };
+      let data6 = data.kind;
+      if (!(data6 === "sequence" || data6 === "architecture" || data6 === "state")) {
+        const err23 = { instancePath: instancePath + "/kind", schemaPath: "#/properties/kind/enum", keyword: "enum", params: { allowedValues: schema11.properties.kind.enum }, message: "must be equal to one of the allowed values" };
         if (vErrors === null) {
-          vErrors = [err14];
+          vErrors = [err23];
         } else {
-          vErrors.push(err14);
+          vErrors.push(err23);
         }
         errors++;
       }
     }
     if (data.title !== void 0) {
-      let data3 = data.title;
-      if (typeof data3 === "string") {
-        if (func3(data3) < 1) {
-          const err15 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/minLength", keyword: "minLength", params: { limit: 1 }, message: "must NOT have fewer than 1 characters" };
+      let data7 = data.title;
+      if (typeof data7 === "string") {
+        if (func3(data7) < 1) {
+          const err24 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/minLength", keyword: "minLength", params: { limit: 1 }, message: "must NOT have fewer than 1 characters" };
           if (vErrors === null) {
-            vErrors = [err15];
+            vErrors = [err24];
           } else {
-            vErrors.push(err15);
+            vErrors.push(err24);
           }
           errors++;
         }
       } else {
-        const err16 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/type", keyword: "type", params: { type: "string" }, message: "must be string" };
+        const err25 = { instancePath: instancePath + "/title", schemaPath: "#/definitions/text/type", keyword: "type", params: { type: "string" }, message: "must be string" };
         if (vErrors === null) {
-          vErrors = [err16];
+          vErrors = [err25];
         } else {
-          vErrors.push(err16);
+          vErrors.push(err25);
         }
         errors++;
       }
     }
     if (data.view !== void 0) {
-      let data4 = data.view;
-      if (!(data4 === "fixed" || data4 === "follow")) {
-        const err17 = { instancePath: instancePath + "/view", schemaPath: "#/properties/view/enum", keyword: "enum", params: { allowedValues: schema11.properties.view.enum }, message: "must be equal to one of the allowed values" };
+      let data8 = data.view;
+      if (!(data8 === "fixed" || data8 === "follow")) {
+        const err26 = { instancePath: instancePath + "/view", schemaPath: "#/properties/view/enum", keyword: "enum", params: { allowedValues: schema11.properties.view.enum }, message: "must be equal to one of the allowed values" };
         if (vErrors === null) {
-          vErrors = [err17];
+          vErrors = [err26];
         } else {
-          vErrors.push(err17);
+          vErrors.push(err26);
         }
         errors++;
       }
     }
     if (data.regions !== void 0) {
-      let data5 = data.regions;
-      if (Array.isArray(data5)) {
-        const len0 = data5.length;
-        for (let i0 = 0; i0 < len0; i0++) {
-          if (!validate11(data5[i0], { instancePath: instancePath + "/regions/" + i0, parentData: data5, parentDataProperty: i0, rootData })) {
+      let data9 = data.regions;
+      if (Array.isArray(data9)) {
+        const len1 = data9.length;
+        for (let i1 = 0; i1 < len1; i1++) {
+          if (!validate11(data9[i1], { instancePath: instancePath + "/regions/" + i1, parentData: data9, parentDataProperty: i1, rootData })) {
             vErrors = vErrors === null ? validate11.errors : vErrors.concat(validate11.errors);
             errors = vErrors.length;
           }
         }
       } else {
-        const err18 = { instancePath: instancePath + "/regions", schemaPath: "#/properties/regions/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        const err27 = { instancePath: instancePath + "/regions", schemaPath: "#/properties/regions/type", keyword: "type", params: { type: "array" }, message: "must be array" };
         if (vErrors === null) {
-          vErrors = [err18];
+          vErrors = [err27];
         } else {
-          vErrors.push(err18);
+          vErrors.push(err27);
         }
         errors++;
       }
     }
     if (data.boxes !== void 0) {
-      let data7 = data.boxes;
-      if (Array.isArray(data7)) {
-        if (data7.length < 1) {
-          const err19 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
+      let data11 = data.boxes;
+      if (Array.isArray(data11)) {
+        if (data11.length < 1) {
+          const err28 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
           if (vErrors === null) {
-            vErrors = [err19];
+            vErrors = [err28];
           } else {
-            vErrors.push(err19);
+            vErrors.push(err28);
           }
           errors++;
         }
-        const len1 = data7.length;
-        for (let i1 = 0; i1 < len1; i1++) {
-          if (!validate13(data7[i1], { instancePath: instancePath + "/boxes/" + i1, parentData: data7, parentDataProperty: i1, rootData })) {
+        const len2 = data11.length;
+        for (let i2 = 0; i2 < len2; i2++) {
+          if (!validate13(data11[i2], { instancePath: instancePath + "/boxes/" + i2, parentData: data11, parentDataProperty: i2, rootData })) {
             vErrors = vErrors === null ? validate13.errors : vErrors.concat(validate13.errors);
             errors = vErrors.length;
           }
         }
       } else {
-        const err20 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        const err29 = { instancePath: instancePath + "/boxes", schemaPath: "#/properties/boxes/type", keyword: "type", params: { type: "array" }, message: "must be array" };
         if (vErrors === null) {
-          vErrors = [err20];
+          vErrors = [err29];
         } else {
-          vErrors.push(err20);
+          vErrors.push(err29);
         }
         errors++;
       }
@@ -2745,30 +3452,30 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
       }
     }
     if (data.steps !== void 0) {
-      let data10 = data.steps;
-      if (Array.isArray(data10)) {
-        if (data10.length < 1) {
-          const err21 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
+      let data14 = data.steps;
+      if (Array.isArray(data14)) {
+        if (data14.length < 1) {
+          const err30 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/minItems", keyword: "minItems", params: { limit: 1 }, message: "must NOT have fewer than 1 items" };
           if (vErrors === null) {
-            vErrors = [err21];
+            vErrors = [err30];
           } else {
-            vErrors.push(err21);
+            vErrors.push(err30);
           }
           errors++;
         }
-        const len2 = data10.length;
-        for (let i2 = 0; i2 < len2; i2++) {
-          if (!validate17(data10[i2], { instancePath: instancePath + "/steps/" + i2, parentData: data10, parentDataProperty: i2, rootData })) {
+        const len3 = data14.length;
+        for (let i3 = 0; i3 < len3; i3++) {
+          if (!validate17(data14[i3], { instancePath: instancePath + "/steps/" + i3, parentData: data14, parentDataProperty: i3, rootData })) {
             vErrors = vErrors === null ? validate17.errors : vErrors.concat(validate17.errors);
             errors = vErrors.length;
           }
         }
       } else {
-        const err22 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/type", keyword: "type", params: { type: "array" }, message: "must be array" };
+        const err31 = { instancePath: instancePath + "/steps", schemaPath: "#/properties/steps/type", keyword: "type", params: { type: "array" }, message: "must be array" };
         if (vErrors === null) {
-          vErrors = [err22];
+          vErrors = [err31];
         } else {
-          vErrors.push(err22);
+          vErrors.push(err31);
         }
         errors++;
       }
@@ -2779,12 +3486,18 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
         errors = vErrors.length;
       }
     }
+    if (data.state !== void 0) {
+      if (!validate25(data.state, { instancePath: instancePath + "/state", parentData: data, parentDataProperty: "state", rootData })) {
+        vErrors = vErrors === null ? validate25.errors : vErrors.concat(validate25.errors);
+        errors = vErrors.length;
+      }
+    }
   } else {
-    const err23 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
+    const err32 = { instancePath, schemaPath: "#/type", keyword: "type", params: { type: "object" }, message: "must be object" };
     if (vErrors === null) {
-      vErrors = [err23];
+      vErrors = [err32];
     } else {
-      vErrors.push(err23);
+      vErrors.push(err32);
     }
     errors++;
   }
@@ -2794,10 +3507,15 @@ function validate10(data, { instancePath = "", parentData, parentDataProperty, r
 
 // src/schema.ts
 var EVENT_TYPES = ["edge", "action", "swap", "strip"];
+var ROOT_NOT_ALLOWED = {
+  "#/else/not": { field: "sequence", kind: "sequence" },
+  "#/then/not": { field: "state", kind: "state" },
+  "#/else/else/not": { field: "state", kind: "state" }
+};
 var NOT_ALLOWED = {
-  "": { field: "sequence", kind: "sequence" },
   carry: { field: "text", kind: "tag" }
 };
+var RESERVED_ID = /\/boxes\/items\/properties\/id\/not$/u;
 var escape = (key) => key.replaceAll("~", "~0").replaceAll("/", "~1");
 function forbiddenOf(pattern) {
   const inside = /^\^\[\^(.+)\]\+\$$/u.exec(pattern)?.[1];
@@ -2821,7 +3539,8 @@ function toFieldError(error, errors, m) {
       return { pointer: `${at2}/${escape(key)}`, message: m.required(key) };
     }
     case "not": {
-      const allowed = NOT_ALLOWED[at2.slice(at2.lastIndexOf("/") + 1)];
+      if (RESERVED_ID.test(error.schemaPath)) return { pointer: at2, message: m.reserved(STATE_ENDS) };
+      const allowed = at2 === "" ? ROOT_NOT_ALLOWED[error.schemaPath] : NOT_ALLOWED[at2.slice(at2.lastIndexOf("/") + 1)];
       return { pointer: allowed ? `${at2}/${allowed.field}` : at2, message: m.not(allowed) };
     }
     case "anyOf": {
@@ -2940,6 +3659,7 @@ function buildTimeline(diagram) {
       const later = named[k + 2];
       if (later) label2.end = Math.min(label2.end, later.start);
     });
+    if (diagram.kind === "state") for (const label2 of named) label2.after = { start: label2.end, end: last };
     labels.push(...named);
     for (const event of p.events) events.push({ step: s, event: event.event, at: span.start + event.at });
   });
@@ -2963,6 +3683,7 @@ function buildTimeline(diagram) {
     });
   }
   carriers.sort((x, y) => x.depart - y.depart);
+  const states = diagram.kind === "state" ? stateTimes(diagram, edges, last) : void 0;
   return {
     total,
     last,
@@ -2972,8 +3693,32 @@ function buildTimeline(diagram) {
     labels,
     badges: steps.map((span, s) => ({ step: s, appears: span.start })),
     events,
-    stills: steps.map((span) => span.end - MOTION.still)
+    stills: steps.map((span) => span.end - MOTION.still),
+    ...states ? { states } : {}
+  };
+}
+var isEnd2 = (id) => STATE_ENDS.includes(id);
+function stateTimes(diagram, edges, last) {
+  const times = /* @__PURE__ */ new Map();
+  const of = (box) => {
+    const found = times.get(box) ?? { box, lit: [] };
+    times.set(box, found);
+    return found;
   };
+  let on;
+  for (const edge2 of edges) {
+    const event = diagram.steps[edge2.step]?.events[edge2.event];
+    if (event?.type !== "edge" || event.from === event.to) continue;
+    if (on) {
+      const left = of(on.box);
+      left.lit.push({ start: on.since, end: edge2.start });
+      if (on.box === event.from && left.done === void 0) left.done = edge2.start + MOTION.done;
+      on = void 0;
+    }
+    if (!isEnd2(event.to)) on = { box: event.to, since: edge2.drawn };
+  }
+  if (on) of(on.box).lit.push({ start: on.since, end: last });
+  return [...times.values()];
 }
 
 // src/render/icons.ts
@@ -3008,6 +3753,8 @@ var ICONS = {
   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",
@@ -3022,7 +3769,25 @@ function glyph(name, x, y, scale, cls = "dg-gl") {
   const d = name === void 0 ? void 0 : ICONS[name];
   return d ? `<path class="${cls}" transform="translate(${r1(x)} ${r1(y)}) scale(${scale})" d="${d}"/>` : "";
 }
-var pathOf = (points) => points.map(([x, y], i) => `${i === 0 ? "M" : "L"} ${r1(x)} ${r1(y)}`).join(" ");
+function pathOf(points) {
+  const pts = points.filter((p, i) => i === 0 || p[0] !== points[i - 1][0] || p[1] !== points[i - 1][1]);
+  const [x0, y0] = pts[0];
+  let d = `M ${r1(x0)} ${r1(y0)}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const [ax, ay] = pts[i - 1];
+    const [bx, by] = pts[i];
+    const [cx, cy] = pts[i + 1];
+    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];
+    d += ` L ${r1(lx)} ${r1(ly)}`;
+  }
+  return d;
+}
 function arrowHead(points) {
   const [ex, ey] = points[points.length - 1];
   const [px, py] = points[points.length - 2];
@@ -3069,10 +3834,10 @@ function cardFrame(box, ctx, act, y, h) {
   const rect = (cls, extra = "") => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(y)}" width="${r1(box.w)}" height="${h}" rx="${LOOK.box.radius}"${extra}/>`;
   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>` : ""}`;
 }
-function card(box, ctx, on, changes) {
+function card(box, ctx, on, changes, lit) {
   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) : void 0;
+  const act = lit ? lit.length > 0 ? rangeKf(ctx.m, lit.map((s) => [s.start, s.end])) : void 0 : on.length > 0 ? activeKf(ctx, on) : void 0;
   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)}">${cardFrame(box, ctx, act, box.y, box.h)}${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
 }
@@ -3082,15 +3847,54 @@ function headCard(box, ctx, on, changes) {
   const act = on.length > 0 ? activeKf(ctx, on) : void 0;
   return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, pad2, h)}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(pad2 + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
 }
+function ghostCard(box) {
+  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>`;
+}
+function doneMark(box, at2, ctx) {
+  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(at2)}"><circle class="dg-done" cx="${r1(x)}" cy="${r1(y)}" r="${r}"/>${glyph("check", x, y, 0.5, "dg-done-ck")}</g>`;
+}
+function path(p, color) {
+  const label2 = 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)}"/>${label2}</g>`;
+}
+function side(s, color) {
+  const { pad: pad2 } = LOOK.state.side;
+  const title = s.y + pad2 + TYPE.regionName.size;
+  const notes = s.notes.map((note, k) => `<text class="dg-side-n" x="${r1(s.x + pad2)}" 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 + pad2)}" y="${r1(title)}">${esc(s.title)}</text>${notes}</g>`;
+}
+function endMark(e, color) {
+  const { end } = LOOK.state;
+  const text2 = 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}"/>${text2}</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}"/>${text2}</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}"/>${text2}</g>`;
+}
 function lifeline(x, y1, y2) {
   return `<line class="dg-ll" x1="${r1(x)}" y1="${r1(y1)}" x2="${r1(x)}" y2="${r1(y2)}"/>`;
 }
-function edge(e, time, ctx) {
+function edge(e, time, ctx, past = false) {
   const { m } = ctx;
   const d = pathOf(e.points);
   const head = arrowHead(e.points);
   const { start: a, drawn: b, end } = time;
-  const tail = [
+  const tail = 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],
@@ -3117,15 +3921,19 @@ function edge(e, time, ctx) {
     [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>`
   };
 }
 function label(l, time, ctx) {
   const ja2 = l.family === "sans" ? " dg-capj" : "";
   const { radius } = LOOK.label;
-  return `<g class="dg-cap${ja2} 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${ja2} 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>`;
 }
 function action(a, at2, until, ctx) {
   return `<g class="dg-act dg-a" style="${cs(a.color)};${ctx.m.rise(at2, 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>`;
@@ -3147,21 +3955,21 @@ function carrier(e, time, ctx) {
   const n = LOOK.carrier.samples;
   const length = pathLength(e.points);
   const { depart: a, arrive: b, start: from, end: gone } = time;
-  const path = [];
+  const path2 = [];
   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]);
+    path2.push([a + (b - a) * k / n, x, y]);
   }
-  const first = path[0];
-  const lastPoint = path[path.length - 1];
+  const first = path2[0];
+  const lastPoint = path2[path2.length - 1];
   const rest = e.settle ?? [lastPoint[1], lastPoint[2]];
-  const pts = [[0, first[1], first[2]], ...path];
+  const pts = [[0, first[1], first[2]], ...path2];
   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]]);
   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>`;
 }
-function badge(b, ctx) {
+function badge(b, ctx, grey = false) {
   const { m } = ctx;
   const span = ctx.t.steps[b.step];
   const a = span.start;
@@ -3187,9 +3995,9 @@ function badge(b, ctx) {
   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>`;
+  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="${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>`;
 }
-function strip(s, changes, ctx) {
+function strip(s, changes, ctx, now = false, arrivals = /* @__PURE__ */ new Map()) {
   const { m, sh } = ctx;
   const S2 = LOOK.strip;
   const my = s.y + S2.h / 2;
@@ -3211,8 +4019,18 @@ function strip(s, changes, ctx) {
     values.forEach((c, k) => {
       const next = values[k + 1]?.at;
       const value = c.value;
-      const anim = next === void 0 ? 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 + S2.valueY)}">${esc(value)}</text></g>`);
+      const cls = hasWide(value) ? "dg-fvj" : "dg-fv";
+      const textOf = (c2) => `<text class="${c2}" x="${r1(field.x)}" y="${r1(field.y + S2.valueY)}">${esc(value)}</text>`;
+      const text2 = textOf(cls);
+      if (!now) {
+        const anim = next === void 0 ? m.rise(c.at) : m.rise(c.at, next - MOTION.untilFade);
+        parts.push(`<g class="dg-a" style="${anim}">${text2}</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) + S2.now.gap)}" cy="${r1(field.y + S2.nameY - TYPE.fieldName.size / 3)}" r="${S2.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 === void 0 || next > until) parts.push(`<g class="dg-a" style="${m.vis(until - MOTION.untilFade, next === void 0 ? m.last : next - MOTION.untilFade)}">${text2}</g>`);
     });
     tags.forEach((c, k) => {
       const next = tags[k + 1]?.at;
@@ -3226,6 +4044,22 @@ function strip(s, changes, ctx) {
       );
     });
   });
+  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 - S2.fieldGap / 2;
+      parts.push(`<line class="dg-sep" x1="${r1(sx)}" y1="${r1(t.y + S2.sepInset)}" x2="${r1(sx)}" y2="${r1(t.y + S2.h - S2.sepInset)}"/>`);
+    }
+    parts.push(`<text class="dg-fl" x="${r1(t.x)}" y="${r1(t.y + S2.nameY)}">${esc(t.title)}</text>`);
+    const dy = t.y + S2.valueY - TYPE.fieldValue.size / 3;
+    t.states.forEach((state, k) => {
+      const cx = r1(t.x + S2.trail.r + k * S2.trail.step);
+      const at2 = arrivals.get(state.box);
+      const fill = at2 === void 0 ? "" : `<circle class="dg-tr-fill dg-a" cx="${cx}" cy="${r1(dy)}" r="${S2.trail.r}" style="${m.pop(at2)}"/>`;
+      parts.push(`<g data-trail="${esc(state.box)}" style="${cs(state.color)}"><circle class="dg-tr-ring" cx="${cx}" cy="${r1(dy)}" r="${S2.trail.r}"/>${fill}</g>`);
+    });
+  }
   return parts.join("");
 }
 
@@ -3322,6 +4156,7 @@ var font = (t) => `font:${t.weight} ${t.size}px var(--${t.family})`;
 var mix = (pct, base = "var(--surf)") => `color-mix(in srgb,var(--c) ${pct}%,${base})`;
 var S = LOOK.stroke;
 var X = LOOK.mix;
+var PAST = `color-mix(in srgb,var(--mute) ${X.past}%,var(--bg))`;
 var 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)}",
@@ -3346,15 +4181,21 @@ var 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)}`,
@@ -3369,8 +4210,28 @@ var 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)}",
@@ -3448,7 +4309,8 @@ function fieldChanges(diagram, timeline, layout) {
     if (event?.type !== "strip") continue;
     const color = layout.badges[time.step]?.color ?? "slate";
     const list = out.get(event.field) ?? [];
-    list.push({ at: time.at, color, ...event.value !== void 0 ? { value: event.value } : {}, ...event.tag !== void 0 ? { tag: event.tag } : {} });
+    const until = timeline.steps[time.step].end;
+    list.push({ at: time.at, color, step: time.step, until, ...event.value !== void 0 ? { value: event.value } : {}, ...event.tag !== void 0 ? { tag: event.tag } : {} });
     out.set(event.field, list);
   }
   return out;
@@ -3458,20 +4320,36 @@ function drawSvg(diagram, layout, timeline, palette, theme, follow) {
   const m = new Motion(`dg${id}`, timeline.total, timeline.last);
   const ctx = { m, t: timeline, sh: `filter="url(#dg-sh-${id})"`, end: timeline.steps[timeline.steps.length - 1].end };
   const on = involved(diagram);
-  const subs = subChanges(diagram, timeline, layout.kind === "architecture");
+  const subs = subChanges(diagram, timeline, layout.kind !== "sequence");
   const L = { band: [], base: [], lit: [], node: [], badge: [], top: [] };
   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 = (id2, ghost) => layout.boxes.find((b) => b.id === id2 && (ghost === void 0 || 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));
+  const isState = layout.kind === "state";
+  const arrivals = new Map((timeline.states ?? []).flatMap((s) => s.lit[0] ? [[s.box, s.lit[0].start]] : []));
+  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 ?? [] : void 0));
+    if (state?.done !== void 0) 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));
@@ -3607,7 +4485,7 @@ function renderDiagram(input, options = {}) {
   const diagram = read.diagram;
   const palette = resolvePalette(options.palette);
   const 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),
@@ -3678,9 +4556,9 @@ async function stage(browser, svg, fontCss, body) {
   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];
+    const path2 = new URL(route.request().url()).pathname;
+    if (path2 === "/") return route.fulfill({ contentType: "text/html; charset=utf-8", body: html });
+    const script = SCRIPTS[path2];
     return script ? route.fulfill({ contentType: "text/javascript", body: readFileSync(script) }) : route.fulfill({ status: 404 });
   });
   await page.goto("http://localhost/");
@@ -3958,9 +4836,9 @@ function writeOutputs(outDir, name, outputs) {
   const files = {};
   try {
     for (const [format, data] of outputs) {
-      const path = join(outDir, `${name}.${format}`);
-      writeFileSync(path, data);
-      files[format] = path;
+      const path2 = join(outDir, `${name}.${format}`);
+      writeFileSync(path2, data);
+      files[format] = path2;
     }
   } catch (error) {
     if (created !== void 0) rmSync(created, { recursive: true, force: true });