@cardenelabs/cdl 0.16.0 → 0.17.0

package/dist/react.js

@@ -559,6 +559,9 @@ function hasRenderedLabel(e) {
   return Boolean(e.label?.trim() || e.sub?.trim());
 }
 var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
+  // 時系列のやり取り (#578)。 図を丸ごと描く種別で、描くのは面々の名前と言づての語。
+  // 箱の `title` は使わない
+  "sequence-board",
   // 形だけを描く (DynShapeNode)
   "dyn-rect",
   "dyn-circle",
@@ -647,6 +650,7 @@ var GLYPH_CAP_RATIO = 0.72;
 var ROW_FONT_STORAGE = 26;
 var ROW_FONT_GENERIC = 21;
 var STORAGE_TITLE_BASELINE = 78;
+var SUBTITLE_ROW_SHIFT = 46;
 var STORAGE_ROW_DIVIDER_Y = Math.round(
   (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * GLYPH_CAP_RATIO)) / 2
 );
@@ -2077,7 +2081,10 @@ var TOKENS = {
     // 印は箱いっぱいに描く (線が箱の縁で止まるため) ので、この値が丸の直径になる。
     // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
     "mark-start": { w: 96, h: 96 },
-    "mark-end": { w: 96, h: 96 }
+    "mark-end": { w: 96, h: 96 },
+    // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
+    // ここは書かなかった時の受け皿
+    "sequence-board": { w: 960, h: 640 }
   },
   // row gap (stack 間の vertical gap、 lane 内 / 跨ぎ共通)
   // edge label が node の上 36 px に配置されるため、 boxH 68 + 36 + 余裕 = 100 必要。
@@ -3740,8 +3747,12 @@ function requiredRowsWidth(rows, kind) {
 function autoStorageHeight(n, defaultH) {
   if (n.kind !== "storage") return n.h ?? defaultH;
   if (n.h != null) return n.h;
-  if (!n.rows || n.rows.length === 0) return 150;
-  return Math.max(defaultH, requiredRowsHeight("storage", n.rows.length) ?? defaultH);
+  const \u5370\u3042\u308A = n.rowMarks !== void 0;
+  const \u547C\u3073\u540D\u306E\u5206 = \u5370\u3042\u308A && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  if (!n.rows || n.rows.length === 0) return 150 + \u547C\u3073\u540D\u306E\u5206;
+  const \u5FC5\u8981 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
+  if (\u5370\u3042\u308A) return \u5FC5\u8981 + \u547C\u3073\u540D\u306E\u5206;
+  return Math.max(defaultH, \u5FC5\u8981);
 }
 function autoRowsWidth(n, defaultW) {
   if (n.w != null) return n.w;
@@ -3829,8 +3840,11 @@ function layoutNodes(diag, lanes) {
       continue;
     }
     const cx = lane.x + lane.width / 2;
-    const cy = rowCy.get(n.stack);
-    const h = n.h ?? rowH.get(n.stack);
+    const \u6BB5\u306E\u82AF = rowCy.get(n.stack);
+    const \u6BB5\u306E\u9AD8\u3055 = rowH.get(n.stack);
+    const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
+    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? autoStorageHeight(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
+    const cy = \u81EA\u524D\u306E\u9AD8\u3055 ? \u6BB5\u306E\u82AF - \u6BB5\u306E\u9AD8\u3055 / 2 + h / 2 : \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
       ...n,
@@ -4159,10 +4173,24 @@ var NODE_KINDS = [
   // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start",
-  "mark-end"
+  "mark-end",
+  // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
+  "sequence-board"
 ];
 var EDGE_HEAD_DEFAULT = "triangle";
-var EDGE_HEADS = ["triangle", "diamond", "open", "crow"];
+var EDGE_HEADS = [
+  "none",
+  "triangle",
+  "diamond",
+  "open",
+  "crow",
+  "one",
+  "zero-one",
+  "many",
+  "zero-many"
+];
+var EDGE_HEAD_FILL_DEFAULT = "solid";
+var EDGE_HEAD_FILLS = ["solid", "hollow"];
 
 // src/formula/evaluator.ts
 function evaluate(ast, ctxOrResolver) {
@@ -5001,7 +5029,7 @@ function pathSubpath(d, progress) {
 }
 
 // src/render/template-fields.ts
-var TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf"];
+var TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf", "sequenceStep"];
 var LIST_FIELDS = ["rows"];
 var NUMERIC_FIELDS = ["opacity", "renderOffsetX", "renderOffsetY"];
 var SHAPE_TEMPLATE_FIELDS = ["source", "radius", "fillProgress", "angle", "level", "rotation", "fill"];
@@ -5457,14 +5485,42 @@ function StateDiffCard({
 
 // src/render/edge-head.ts
 var EDGE_HEAD_SHAPE = {
-  triangle: { d: "M 0 0 L 10 5 L 0 10 z", refX: 9, filled: true },
-  diamond: { d: "M 0 5 L 5 0 L 10 5 L 5 10 z", refX: 9, filled: true },
-  open: { d: "M 1 0 L 9 5 L 1 10", refX: 9, filled: false },
-  crow: { d: "M 10 0 L 0 5 M 10 5 L 0 5 M 10 10 L 0 5", refX: 10, filled: false }
+  // 何も描かない端。 marker 自体を出さないので `d` は読まれない
+  none: { d: "", w: 10, h: 10, refX: 0, filled: false },
+  triangle: { d: "M 0 0 L 10 5 L 0 10 z", w: 10, h: 10, refX: 9, filled: true },
+  diamond: { d: "M 0 5 L 5 0 L 10 5 L 5 10 z", w: 10, h: 10, refX: 9, filled: true },
+  open: { d: "M 1 0 L 9 5 L 1 10", w: 10, h: 10, refX: 9, filled: false },
+  crow: { d: "M 10 0 L 0 5 M 10 5 L 0 5 M 10 10 L 0 5", w: 10, h: 10, refX: 10, filled: false },
+  // ER の端。 **箱に近い側 (x が大きい側) が個数、その外側が任意か** (#578)。
+  //
+  // 枠は 24 × 10 で、線の先端に合わせるのは x=24 = 箱の縁。 marker は経路の向きに回るので、
+  // 行き先側でも出どころ側でも「箱に近い側」 が同じ端になる。
+  //
+  // 三又の真ん中の枝は **関係の線そのもの** が兼ねる。 別に引くと同じ所に 2 本重なって太く見える
+  one: { d: "M 16 0 L 16 10 M 4 0 L 4 10", w: 24, h: 10, refX: 24, scale: 1.8, filled: false },
+  "zero-one": { d: "M 16 0 L 16 10 M 7 5 a 3 3 0 1 0 -6 0 a 3 3 0 1 0 6 0", w: 24, h: 10, refX: 24, scale: 1.8, filled: false },
+  many: { d: "M 24 0 L 13 5 L 24 10 M 4 0 L 4 10", w: 24, h: 10, refX: 24, scale: 1.8, filled: false },
+  "zero-many": {
+    d: "M 24 0 L 13 5 L 24 10 M 7 5 a 3 3 0 1 0 -6 0 a 3 3 0 1 0 6 0",
+    w: 24,
+    h: 10,
+    refX: 24,
+    scale: 1.8,
+    filled: false
+  }
 };
-function edgeHeadMarkerId(tone, head, small) {
+function edgeHeadMarkerId(tone, head, small, fill = EDGE_HEAD_FILL_DEFAULT) {
   const \u5C0F = small ? "-sm" : "";
-  return head === EDGE_HEAD_DEFAULT ? `cdl-arrow-${tone}${\u5C0F}` : `cdl-arrow-${tone}-${head}${\u5C0F}`;
+  const \u5857 = fill === EDGE_HEAD_FILL_DEFAULT || !EDGE_HEAD_SHAPE[head].filled ? "" : `-${fill}`;
+  return head === EDGE_HEAD_DEFAULT && \u5857 === "" ? `cdl-arrow-${tone}${\u5C0F}` : `cdl-arrow-${tone}-${head}${\u5857}${\u5C0F}`;
+}
+function edgeHeadPaint(head, fill, color) {
+  const \u5F62 = EDGE_HEAD_SHAPE[head];
+  if (!\u5F62.filled) return { fill: "none", stroke: color, strokeWidth: 1.6 };
+  if (fill === "hollow") {
+    return { fill: "var(--cdl-node-fill, #ffffff)", stroke: color, strokeWidth: 1.4 };
+  }
+  return { fill: color, stroke: "none" };
 }
 
 // src/render/tone.ts
@@ -5518,7 +5574,13 @@ function CdlEdgeView({
   stateValues
 }) {
   const color = toneColor(edge.tone);
-  const marker = hasTone(edge.tone) ? edgeHeadMarkerId(edge.tone, edge.head ?? EDGE_HEAD_DEFAULT, !active) : "cdl-arrow-muted";
+  const \u7AEF\u306E\u540D\u524D = (h, f) => {
+    const \u5F62 = h ?? EDGE_HEAD_DEFAULT;
+    if (\u5F62 === "none") return void 0;
+    return hasTone(edge.tone) ? edgeHeadMarkerId(edge.tone, \u5F62, !active, f ?? EDGE_HEAD_FILL_DEFAULT) : "cdl-arrow-muted";
+  };
+  const marker = \u7AEF\u306E\u540D\u524D(edge.head, edge.headFill);
+  const tailMarker = edge.tailHead === void 0 ? void 0 : \u7AEF\u306E\u540D\u524D(edge.tailHead, edge.tailHeadFill);
   const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
@@ -5566,6 +5628,8 @@ function CdlEdgeView({
             progress,
             color,
             marker,
+            tailMarker,
+            dashed: style === "dashed",
             stateValues
           }
         ),
@@ -5591,6 +5655,8 @@ function SolidEdgePath({
   progress,
   color,
   marker,
+  tailMarker,
+  dashed,
   stateValues
 }) {
   const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
@@ -5598,7 +5664,7 @@ function SolidEdgePath({
   const boundWidth = edge.widthBind && stateValues ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth) : defaultWidth;
   const boundStroke = edge.strokeBind && stateValues ? interpolate(edge.strokeBind, stateValues) : color;
   const boundDashOffset = edge.dashOffsetBind && stateValues ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0) : void 0;
-  const dashArray = active ? boundDashOffset !== void 0 ? "8 6" : void 0 : "4 5";
+  const dashArray = dashed ? "10 8" : active ? boundDashOffset !== void 0 ? "8 6" : void 0 : "4 5";
   return /* @__PURE__ */ jsx(
     "path",
     {
@@ -5611,7 +5677,8 @@ function SolidEdgePath({
       strokeDasharray: dashArray,
       strokeDashoffset: boundDashOffset,
       strokeLinecap: "round",
-      markerEnd: `url(#${marker})`,
+      markerEnd: marker === void 0 ? void 0 : `url(#${marker})`,
+      markerStart: tailMarker === void 0 ? void 0 : `url(#${tailMarker})`,
       style: {
         transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease"
       }
@@ -5875,7 +5942,8 @@ function CardNode({ node, active }) {
     return /* @__PURE__ */ jsx("g", { transform: `translate(${x} ${y})` });
   }
   const compact = isCompactBox(node.h);
-  const titleY = compact ? node.h / 2 + 8 : 86;
+  const \u5C0F\u578B\u306B\u547C\u3073\u540D = compact && Boolean(node.subtitle);
+  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -5912,9 +5980,259 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "node-subtitle",
+        x: node.w / 2,
+        y: node.h / 2 + 24,
+        fontSize: Math.min(subtitleSize, 18),
+        textAnchor: "middle",
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: node.subtitle
+      }
+    )
+  ] });
+}
+
+// src/kinds/sequence-board-metrics.ts
+var SEQ_EDGE = 16;
+var SEQ_ROW = 64;
+var SEQ_GUTTER_PAD = 40;
+var SEQ_GUTTER_GAP = 40;
+var SEQ_HEAD = 96;
+var SEQ_ROW_PAD = 56;
+var SEQ_COL_PAD = 80;
+var SEQ_BAND_W = 52;
+var SEQ_BAND_PAD = 24;
+var SEQ_NAME = 24;
+var SEQ_SUB = 20;
+var SEQ_LABEL = 26;
+var SEQ_DOT = 7;
+var SEQ_SELF_W = 52;
+var SEQ_COL_MIN = 200;
+var g4 = (v) => Math.round(v / 4) * 4;
+function sequenceBoardMetrics(data) {
+  const \u540D\u5E45 = data.actors.map(
+    (a) => Math.max(textWidth(a.name, SEQ_NAME), a.subtitle ? textWidth(a.subtitle, SEQ_SUB) : 0)
+  );
+  const colW = g4(Math.max(SEQ_COL_MIN, Math.max(0, ...\u540D\u5E45) + SEQ_COL_PAD));
+  const \u8A9E\u5E45 = Math.max(0, ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL)));
+  const gutter = g4(SEQ_EDGE + SEQ_GUTTER_PAD + \u8A9E\u5E45 + SEQ_GUTTER_GAP);
+  const headY = SEQ_EDGE + SEQ_HEAD;
+  const rowY = (i) => headY + SEQ_ROW_PAD + i * SEQ_ROW;
+  const \u6700\u7D42 = data.messages.length > 0 ? rowY(data.messages.length - 1) : headY;
+  const bottom = \u6700\u7D42 + SEQ_ROW_PAD;
+  const cx = (i) => gutter + colW / 2 + i * colW;
+  const w = g4(cx(Math.max(0, data.actors.length - 1)) + colW / 2 + SEQ_EDGE);
+  const h = g4(bottom + SEQ_EDGE);
+  return { w, h, gutter, colW, headY, cx, rowY, bottom };
+}
+function SequenceBoardNode({
+  node,
+  stateValues
+}) {
+  const data = node.sequenceData;
+  if (!data) return /* @__PURE__ */ jsx("g", { "data-cdl-role": "sequence-board" });
+  const m = sequenceBoardMetrics(data);
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  const \u73FE\u5728 = (() => {
+    if (!node.sequenceStep) return null;
+    const v = Number.parseInt(interpolate(node.sequenceStep, stateValues ?? {}).trim(), 10);
+    return Number.isFinite(v) ? v : null;
+  })();
+  const \u6731 = "var(--cdl-tone-accent, #2d6a8f)";
+  const \u58A8 = "var(--cdl-text-2, #4a5162)";
+  const \u898B\u305F\u76EE = (i) => {
+    if (\u73FE\u5728 === null) return { opacity: 1, color: \u6731 };
+    if (i > \u73FE\u5728) return { opacity: 0, color: \u6731 };
+    return i === \u73FE\u5728 ? { opacity: 1, color: \u6731 } : { opacity: 1, color: \u58A8 };
+  };
+  return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "sequence-board", transform: `translate(${x} ${y})`, children: [
+    data.bands.map((b, i) => {
+      if (\u73FE\u5728 !== null && b.from > \u73FE\u5728) return null;
+      const \u4E0B = \u73FE\u5728 === null ? b.to : Math.min(b.to, \u73FE\u5728);
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-cdl-role": "sequence-band",
+          x: m.cx(b.actor) - SEQ_BAND_W / 2,
+          y: m.rowY(b.from) - SEQ_BAND_PAD / 2,
+          width: SEQ_BAND_W,
+          height: m.rowY(\u4E0B) - m.rowY(b.from) + SEQ_BAND_PAD,
+          rx: 4,
+          fill: \u6731,
+          fillOpacity: 0.12
+        },
+        `band-${i}`
+      );
+    }),
+    data.actors.map((_, i) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        "data-cdl-role": "sequence-thread",
+        x1: m.cx(i),
+        y1: m.headY,
+        x2: m.cx(i),
+        y2: m.bottom,
+        stroke: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: 3
+      },
+      `thread-${i}`
+    )),
+    data.actors.map((a, i) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-cdl-role": "sequence-actor",
+          x: m.cx(i),
+          y: SEQ_EDGE + 44,
+          fontSize: SEQ_NAME,
+          fontWeight: 700,
+          textAnchor: "middle",
+          fill: "var(--cdl-text, #1a1f2a)",
+          style: { fontFamily: "'JetBrains Mono', monospace" },
+          children: a.name
+        }
+      ),
+      a.subtitle && /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-cdl-role": "sequence-actor-subtitle",
+          x: m.cx(i),
+          y: SEQ_EDGE + 76,
+          fontSize: SEQ_SUB,
+          textAnchor: "middle",
+          fill: "var(--cdl-text-dim, #5a6270)",
+          children: a.subtitle
+        }
+      )
+    ] }, `head-${i}`)),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        "data-cdl-role": "sequence-rule",
+        x1: SEQ_EDGE,
+        y1: m.headY,
+        x2: m.w - SEQ_EDGE,
+        y2: m.headY,
+        stroke: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: 2
+      }
+    ),
+    data.messages.map((msg, i) => /* @__PURE__ */ jsx(SequenceRow, { msg, yy: m.rowY(i), cx: m.cx, ...\u898B\u305F\u76EE(i) }, `msg-${i}`))
+  ] });
+}
+function SequenceRow({
+  msg,
+  yy,
+  cx,
+  opacity,
+  color
+}) {
+  const \u7834 = msg.kind === "return";
+  const \u5857\u308B = msg.kind === "call";
+  const \u51FA = cx(msg.from);
+  const \u81EA\u5206\u3078 = msg.from === msg.to;
+  const dir = \u81EA\u5206\u3078 ? 1 : Math.sign(cx(msg.to) - \u51FA);
+  return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "sequence-message", "data-cdl-message-kind": msg.kind, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "sequence-label",
+        x: SEQ_EDGE + SEQ_GUTTER_PAD,
+        y: yy + 8,
+        fontSize: SEQ_LABEL,
+        fontWeight: 500,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: msg.label
+      }
+    ),
+    \u81EA\u5206\u3078 ? (
+      // 自分宛て。 相手がいないので糸の右へ小さく回して戻る
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          "data-cdl-role": "sequence-line",
+          d: `M ${\u51FA + 10} ${yy - 16} H ${\u51FA + SEQ_SELF_W - 16} Q ${\u51FA + SEQ_SELF_W} ${yy - 16} ${\u51FA + SEQ_SELF_W} ${yy} Q ${\u51FA + SEQ_SELF_W} ${yy + 16} ${\u51FA + SEQ_SELF_W - 16} ${yy + 16} H ${\u51FA + 22}`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 2.5,
+          strokeLinecap: "round"
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-cdl-role": "sequence-line",
+        d: `M ${\u51FA + dir * 12} ${yy} H ${cx(msg.to) - dir * 14}`,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeDasharray: \u7834 ? "10 8" : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Arrow,
+      {
+        x: \u81EA\u5206\u3078 ? \u51FA + 14 : cx(msg.to),
+        y: \u81EA\u5206\u3078 ? yy + 16 : yy,
+        dir: \u81EA\u5206\u3078 ? -1 : dir,
+        filled: \u5857\u308B,
+        color
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        "data-cdl-role": "sequence-source",
+        cx: \u51FA,
+        cy: \u81EA\u5206\u3078 ? yy - 16 : yy,
+        r: SEQ_DOT,
+        fill: color
+      }
+    )
   ] });
 }
+function Arrow({
+  x,
+  y,
+  dir,
+  filled,
+  color
+}) {
+  const \u4E08 = 18;
+  const \u534A = 8.5;
+  const \u5148 = x;
+  const \u80F4 = x - dir * \u4E08;
+  return filled ? /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "sequence-head",
+      "data-cdl-head-fill": "solid",
+      d: `M ${\u5148} ${y} L ${\u80F4} ${y - \u534A} L ${\u80F4} ${y + \u534A} Z`,
+      fill: color,
+      stroke: color,
+      strokeWidth: 3,
+      strokeLinejoin: "round"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "sequence-head",
+      "data-cdl-head-fill": "open",
+      d: `M ${\u80F4} ${y - \u534A} L ${\u5148} ${y} L ${\u80F4} ${y + \u534A}`,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  );
+}
 function EventNode({
   node,
   active,
@@ -6016,6 +6334,29 @@ function FunctionNode({ node, active }) {
     node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 126, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
   ] });
 }
+var ROW_GLYPH_HALF = 7;
+var ROW_GLYPH_CX = ROW_PAD_X_PX + ROW_GLYPH_HALF + 1;
+var ROW_GLYPH_LEAD = 40;
+var ROW_TYPE_FONT = 24;
+var SUBTITLE_BASELINE = 108;
+var SUBTITLE_FONT = 22;
+var UNDERLINE_DROP = 7;
+function RowGlyph({ mark, x, y, color }) {
+  const \u534A = ROW_GLYPH_HALF;
+  const d = mark.shape === "square" ? `M ${x - \u534A} ${y - \u534A} H ${x + \u534A} V ${y + \u534A} H ${x - \u534A} Z` : `M ${x - \u534A} ${y - \u534A} L ${x + \u534A} ${y} L ${x - \u534A} ${y + \u534A} Z`;
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "node-row-glyph",
+      "data-cdl-row-glyph": `${mark.shape}-${mark.filled ? "filled" : "hollow"}`,
+      d,
+      fill: mark.filled ? color : "var(--cdl-node-fill, #ffffff)",
+      stroke: color,
+      strokeWidth: mark.filled ? 0 : 2.4,
+      strokeLinejoin: "round"
+    }
+  );
+}
 function StorageNode({
   node,
   active,
@@ -6033,6 +6374,8 @@ function StorageNode({
   const leftEndDrawn = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX;
   const columnDividerX = (leftEndDrawn + rightColX) / 2;
   const columnDividerFits = columnDividerX <= node.w - ROW_PAD_X_PX;
+  const \u5370\u3067\u5206\u3051\u308B = node.rowMarks !== void 0;
+  const \u884C\u306E\u4E0B\u3052 = \u5370\u3067\u5206\u3051\u308B && node.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   const lastRowBottom = Math.min(
     ROW_TOP_STORAGE + (rows.length - 1) * ROW_PITCH_STORAGE + (rowGlyphDepth("storage") ?? 0),
     node.h - ROW_PAD_X_PX
@@ -6053,6 +6396,19 @@ function StorageNode({
       }
     ),
     node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
+    \u5370\u3067\u5206\u3051\u308B && node.subtitle && // 呼び名は **印で分ける箱でだけ** 出す (#578)。 従来の箱は題の下に区切り線が来るので
+    // 置き場が無い
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "node-subtitle",
+        x: ROW_PAD_X_PX,
+        y: SUBTITLE_BASELINE,
+        fontSize: SUBTITLE_FONT,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: node.subtitle
+      }
+    ),
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -6067,7 +6423,7 @@ function StorageNode({
         children: node.title
       }
     ),
-    rows.length > 0 && /* @__PURE__ */ jsx(
+    rows.length > 0 && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsx(
       "line",
       {
         "data-cdl-role": "node-row-divider",
@@ -6079,7 +6435,7 @@ function StorageNode({
         strokeWidth: 1.25
       }
     ),
-    rows.length > 0 && hasRightColumn && columnDividerFits && /* @__PURE__ */ jsx(
+    rows.length > 0 && hasRightColumn && columnDividerFits && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsx(
       "line",
       {
         "data-cdl-role": "node-column-divider",
@@ -6092,15 +6448,37 @@ function StorageNode({
       }
     ),
     splits.map((s, idx) => {
-      return /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${rowBaselineY("storage", idx)})`, children: [
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${(rowBaselineY("storage", idx) ?? 0) + \u884C\u306E\u4E0B\u3052})`, children: [
+        \u5370\u3067\u5206\u3051\u308B && node.rowMarks?.[idx] != null && /* @__PURE__ */ jsx(
+          RowGlyph,
+          {
+            mark: node.rowMarks[idx],
+            x: ROW_GLYPH_CX,
+            y: -8,
+            color: "var(--cdl-text, #1a1f2a)"
+          }
+        ),
+        \u5370\u3067\u5206\u3051\u308B && node.rowMarks?.[idx]?.underline === true && // 主キーの下線 (#578)。 印の 2 軸とは別の段に載るので、外部キーの山形と重ねられる
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            "data-cdl-role": "node-row-underline",
+            x1: ROW_PAD_X_PX + ROW_GLYPH_LEAD,
+            y1: UNDERLINE_DROP,
+            x2: ROW_PAD_X_PX + ROW_GLYPH_LEAD + displayWidth(s.left) * STORAGE_CHAR_ADVANCE_PX,
+            y2: UNDERLINE_DROP,
+            stroke: "var(--cdl-text, #1a1f2a)",
+            strokeWidth: 2
+          }
+        ),
         /* @__PURE__ */ jsx(
           "text",
           {
             "data-cdl-role": "node-row",
             "data-cdl-row-index": idx,
-            x: ROW_PAD_X_PX,
+            x: \u5370\u3067\u5206\u3051\u308B ? ROW_PAD_X_PX + ROW_GLYPH_LEAD : ROW_PAD_X_PX,
             fontSize: 26,
-            fontWeight: 600,
+            fontWeight: \u5370\u3067\u5206\u3051\u308B ? 500 : 600,
             fill: "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
             children: s.left
@@ -6111,11 +6489,11 @@ function StorageNode({
           {
             "data-cdl-role": "node-row",
             "data-cdl-row-index": idx,
-            x: rightColX,
-            fontSize: 26,
-            fontWeight: highlightRows ? 700 : 600,
-            textAnchor: "start",
-            fill: highlightRows ? accent : "var(--cdl-text, #1a1f2a)",
+            x: \u5370\u3067\u5206\u3051\u308B ? node.w - ROW_PAD_X_PX : rightColX,
+            fontSize: \u5370\u3067\u5206\u3051\u308B ? ROW_TYPE_FONT : 26,
+            fontWeight: \u5370\u3067\u5206\u3051\u308B ? 500 : highlightRows ? 700 : 600,
+            textAnchor: \u5370\u3067\u5206\u3051\u308B ? "end" : "start",
+            fill: \u5370\u3067\u5206\u3051\u308B ? "var(--cdl-text-dim, #5a6270)" : highlightRows ? accent : "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
             children: s.right
           }
@@ -13513,6 +13891,9 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
         return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
+      // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
+      case "sequence-board":
+        return /* @__PURE__ */ jsx(SequenceBoardNode, { node: resolvedNode, stateValues });
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -13840,36 +14221,47 @@ function CdlStage({
           /* @__PURE__ */ jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
               ([tone, color]) => [["", 14], ["-sm", 10]].flatMap(
-                ([suffix, size]) => EDGE_HEADS.map((head) => {
-                  const \u5F62 = EDGE_HEAD_SHAPE[head];
-                  return /* @__PURE__ */ jsx(
-                    "marker",
-                    {
-                      id: edgeHeadMarkerId(tone, head, suffix === "-sm"),
-                      viewBox: "0 0 10 10",
-                      refX: \u5F62.refX,
-                      refY: "5",
-                      markerWidth: size,
-                      markerHeight: size,
-                      markerUnits: "userSpaceOnUse",
-                      orient: "auto-start-reverse",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
+                ([suffix, size]) => EDGE_HEADS.flatMap(
+                  (head) => (
+                    // 塗り方は形と別の軸 (#578)。 塗らない形では 2 つが同じ名前に畳まれるので、
+                    // `edgeHeadMarkerId` が返す名前で重複を外す
+                    EDGE_HEAD_FILLS.map((fill) => {
+                      const \u5F62 = EDGE_HEAD_SHAPE[head];
+                      const id = edgeHeadMarkerId(tone, head, suffix === "-sm", fill);
+                      if (\u5F62.d === "") return null;
+                      if (fill !== EDGE_HEAD_FILL_DEFAULT && !\u5F62.filled) return null;
+                      const \u5857 = edgeHeadPaint(head, fill, color);
+                      return /* @__PURE__ */ jsx(
+                        "marker",
                         {
-                          "data-cdl-role": "edge-arrowhead",
-                          "data-cdl-edge-head": head,
-                          d: \u5F62.d,
-                          fill: \u5F62.filled ? color : "none",
-                          stroke: \u5F62.filled ? "none" : color,
-                          strokeWidth: \u5F62.filled ? void 0 : 1.6,
-                          strokeLinecap: \u5F62.filled ? void 0 : "round",
-                          strokeLinejoin: \u5F62.filled ? void 0 : "round"
-                        }
-                      )
-                    },
-                    `${tone}${suffix}-${head}`
-                  );
-                })
+                          id,
+                          viewBox: `0 0 ${\u5F62.w} ${\u5F62.h}`,
+                          refX: \u5F62.refX,
+                          refY: \u5F62.h / 2,
+                          markerWidth: size * (\u5F62.scale ?? 1) * \u5F62.w / \u5F62.h,
+                          markerHeight: size * (\u5F62.scale ?? 1),
+                          markerUnits: "userSpaceOnUse",
+                          orient: "auto-start-reverse",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              "data-cdl-role": "edge-arrowhead",
+                              "data-cdl-edge-head": head,
+                              "data-cdl-edge-head-fill": fill,
+                              d: \u5F62.d,
+                              fill: \u5857.fill,
+                              stroke: \u5857.stroke,
+                              strokeWidth: \u5857.strokeWidth,
+                              strokeLinecap: \u5857.strokeWidth === void 0 ? void 0 : "round",
+                              strokeLinejoin: \u5857.strokeWidth === void 0 ? void 0 : "round"
+                            }
+                          )
+                        },
+                        id
+                      );
+                    })
+                  )
+                )
               )
             ),
             /* @__PURE__ */ jsx(
@@ -23549,6 +23941,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     if (!isRenderedNode(n)) continue;
     for (const row of n.rows) {
       if (DIVIDER_ONLY.test(row)) continue;
+      if (n.rowMarks !== void 0) continue;
       if (!ROW_FORMAT.test(row)) {
         push("row-format", `node "${n.id}" row "${row}" \u304C "key: value" \u5F62\u5F0F\u3067\u306A\u3044`);
       }
@@ -23880,9 +24273,11 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     for (const [stack, group] of byStack) {
       if (group.length < 2) continue;
       const cy0 = group[0].cy;
+      const top0 = cy0 - (group[0].h ?? 0) / 2;
       for (const n of group.slice(1)) {
         const diff = Math.abs(n.cy - cy0);
-        if (diff > MIN_ROW_ALIGNMENT_TOLERANCE) {
+        const topDiff = Math.abs(n.cy - (n.h ?? 0) / 2 - top0);
+        if (diff > MIN_ROW_ALIGNMENT_TOLERANCE && topDiff > MIN_ROW_ALIGNMENT_TOLERANCE) {
           push(
             "row-alignment",
             `stack=${stack} row \u5185 node "${n.id}" cy=${n.cy.toFixed(1)} \u304C row \u57FA\u6E96 cy=${cy0.toFixed(1)} \u3068 ${diff.toFixed(1)} world \u5DEE (\u8A31\u5BB9 ${MIN_ROW_ALIGNMENT_TOLERANCE})`
@@ -24931,15 +25326,18 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       if (group.length < 3) continue;
       const sorted = [...group].sort((a, b) => a.cy - b.cy);
       const gaps = [];
+      const tops = [];
       for (let i = 1; i < sorted.length; i++) {
         const prev = sorted[i - 1];
         const cur = sorted[i];
         gaps.push(cur.cy - cur.h / 2 - (prev.cy + prev.h / 2));
+        tops.push(cur.cy - cur.h / 2 - (prev.cy - prev.h / 2));
       }
       const maxGap = Math.max(...gaps);
       const minGap = Math.min(...gaps);
       const variance = maxGap - minGap;
-      if (variance > COLUMN_GAP_VARIANCE_TOL) {
+      const topVariance = Math.max(...tops) - Math.min(...tops);
+      if (variance > COLUMN_GAP_VARIANCE_TOL && topVariance > COLUMN_GAP_VARIANCE_TOL) {
         push(
           "column-gap-uniform",
           `lane "${laneId}" \u5185 node \u9593\u306E\u7AEF\u9593 gap variance ${variance.toFixed(1)} world \u304C spec ${COLUMN_GAP_VARIANCE_TOL} \u8D85\u904E (min=${minGap.toFixed(0)} max=${maxGap.toFixed(0)})`