@cardenelabs/cdl 0.16.0 → 0.17.0

package/dist/index.cjs

@@ -9494,6 +9494,9 @@ function diagram(id, options) {
         side: opts.side,
         style: opts.style,
         head: opts.head,
+        headFill: opts.headFill,
+        tailHead: opts.tailHead,
+        tailHeadFill: opts.tailHeadFill,
         guard: opts.guard,
         cardinality: opts.cardinality,
         labelOffsetX: opts.labelOffsetX,
@@ -9617,6 +9620,9 @@ function diagram(id, options) {
           side: d.side,
           style: d.style,
           head: d.head,
+          headFill: d.headFill,
+          tailHead: d.tailHead,
+          tailHeadFill: d.tailHeadFill,
           guard: d.guard,
           cardinality: d.cardinality,
           labelOffsetX: d.labelOffsetX,
@@ -11718,6 +11724,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",
@@ -11806,6 +11815,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
 );
@@ -13409,7 +13419,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 必要。
@@ -15072,8 +15085,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;
@@ -15161,8 +15178,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,
@@ -15491,10 +15511,25 @@ var NODE_KINDS = [
   // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start",
-  "mark-end"
+  "mark-end",
+  // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
+  "sequence-board"
 ];
+var EDGE_STYLES = ["solid", "dotted-flow", "dashed"];
 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/anim/core/easing.ts
 function cubicBezier(x1, y1, x2, y2) {
@@ -15989,7 +16024,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"];
@@ -18314,6 +18349,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`);
       }
@@ -18645,9 +18681,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})`
@@ -19696,15 +19734,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)})`
@@ -21178,14 +21219,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" };
 }
 function opacityAttr(opacity) {
   return opacity < 1 ? opacity : void 0;
@@ -21200,7 +21269,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);
@@ -21248,6 +21323,8 @@ function CdlEdgeView({
             progress,
             color,
             marker,
+            tailMarker,
+            dashed: style === "dashed",
             stateValues
           }
         ),
@@ -21273,6 +21350,8 @@ function SolidEdgePath({
   progress,
   color,
   marker,
+  tailMarker,
+  dashed,
   stateValues
 }) {
   const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
@@ -21280,7 +21359,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__ */ jsxRuntime.jsx(
     "path",
     {
@@ -21293,7 +21372,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"
       }
@@ -21505,7 +21585,8 @@ function CardNode({ node, active }) {
     return /* @__PURE__ */ jsxRuntime.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;
@@ -21542,9 +21623,262 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsxRuntime.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 sequenceStepId() {
+  return "seq_step";
+}
+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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "sequence-message", "data-cdl-message-kind": msg.kind, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -21646,6 +21980,29 @@ function FunctionNode({ node, active }) {
     node.subtitle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -21663,6 +22020,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
@@ -21683,6 +22042,19 @@ function StorageNode({
       }
     ),
     node.eyebrow && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       "text",
       {
@@ -21697,7 +22069,7 @@ function StorageNode({
         children: node.title
       }
     ),
-    rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    rows.length > 0 && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
         "data-cdl-role": "node-row-divider",
@@ -21709,7 +22081,7 @@ function StorageNode({
         strokeWidth: 1.25
       }
     ),
-    rows.length > 0 && hasRightColumn && columnDividerFits && /* @__PURE__ */ jsxRuntime.jsx(
+    rows.length > 0 && hasRightColumn && columnDividerFits && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
         "data-cdl-role": "node-column-divider",
@@ -21722,15 +22094,37 @@ function StorageNode({
       }
     ),
     splits.map((s, idx) => {
-      return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(0 ${rowBaselineY("storage", idx)})`, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(0 ${(rowBaselineY("storage", idx) ?? 0) + \u884C\u306E\u4E0B\u3052})`, children: [
+        \u5370\u3067\u5206\u3051\u308B && node.rowMarks?.[idx] != null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -21741,11 +22135,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
           }
@@ -28101,6 +28495,9 @@ function CdlNodeView({
         return /* @__PURE__ */ jsxRuntime.jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
         return /* @__PURE__ */ jsxRuntime.jsx(CardNode, { node: resolvedNode, active });
+      // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
+      case "sequence-board":
+        return /* @__PURE__ */ jsxRuntime.jsx(SequenceBoardNode, { node: resolvedNode, stateValues });
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -28428,36 +28825,47 @@ function CdlStage({
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -29146,65 +29554,58 @@ function flow(preset) {
   };
   return api;
 }
+var SEQUENCE_MESSAGE_LOOK = {
+  call: { style: "solid", head: "triangle" },
+  return: { style: "dashed", head: "open" },
+  fire: { style: "solid", head: "open" }
+};
 function sequence(preset) {
-  const laneW = preset.laneWidth ?? 340;
   const tone = preset.defaultTone ?? "accent";
-  const style = preset.defaultStyle ?? "solid";
   const b = diagram(preset.id, { topic: preset.topic });
-  const actorIds = /* @__PURE__ */ new Map();
-  const headerNodeIds = [];
-  preset.actors.forEach((label, i) => {
-    const id = slugify(label) || `actor-${i}`;
-    actorIds.set(label, id);
-    actorIds.set(id, id);
-    b.lane(id, { width: laneW, label, lifeline: true });
-    const actorW = Math.max(140, label.length * 22 + 52);
-    const headerId = `${id}-header`;
-    b.node(headerId, { lane: id, stack: 0, kind: "card", title: label, w: actorW, h: 72 });
-    headerNodeIds.push(headerId);
-    const spacerId = `${id}-spacer`;
-    b.node(spacerId, { lane: id, stack: 1, kind: "card", title: "", w: 2, h: 40 });
+  const \u9762\u3005 = preset.actors.map(
+    (a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
+  );
+  const \u756A\u53F7 = /* @__PURE__ */ new Map();
+  \u9762\u3005.forEach((a, i) => {
+    \u756A\u53F7.set(a.name, i);
+    \u756A\u53F7.set(slugify(a.name) || `actor-${i}`, i);
   });
-  const phaseActivate = [...headerNodeIds];
-  let stepIdx = 0;
+  const \u8A00\u3065\u3066 = [];
+  const \u8A9E = /* @__PURE__ */ new Map();
   const api = {
-    step(s) {
-      const fromLaneId = actorIds.get(s.from) ?? s.from;
-      const toLaneId = actorIds.get(s.to) ?? s.to;
-      const stack = stepIdx + 2;
-      const fromBoxId = `s${stepIdx}-${fromLaneId}`;
-      const toBoxId = `s${stepIdx}-${toLaneId}`;
-      b.node(fromBoxId, { lane: fromLaneId, stack, kind: "card", title: "", w: 2, h: 2 });
-      if (fromLaneId !== toLaneId) {
-        b.node(toBoxId, { lane: toLaneId, stack, kind: "card", title: "", w: 2, h: 2 });
-      }
-      const edgeId = `e${stepIdx}-${fromLaneId}-${toLaneId}`;
-      b.edge(fromBoxId, fromLaneId === toLaneId ? fromBoxId : toBoxId, {
-        id: edgeId,
-        label: s.label,
-        ...s.sub ? { sub: s.sub } : {},
-        tone: s.tone ?? tone,
-        style: s.style ?? style
-      });
-      phaseActivate.push(fromBoxId);
-      if (fromLaneId !== toLaneId) phaseActivate.push(toBoxId);
-      phaseActivate.push(edgeId);
-      stepIdx += 1;
+    step(s2) {
+      const from = \u756A\u53F7.get(s2.from) ?? 0;
+      const to = \u756A\u53F7.get(s2.to) ?? 0;
+      const kind = s2.kind ?? ((s2.style ?? preset.defaultStyle) === "dotted-flow" ? "return" : "call");
+      \u8A00\u3065\u3066.push({ label: s2.label, from, to, kind });
+      if (s2.sub) \u8A9E.set(\u8A00\u3065\u3066.length - 1, s2.sub);
       return api;
     },
     build() {
-      const footerStack = stepIdx + 2;
-      preset.actors.forEach((label) => {
-        const laneId = actorIds.get(label) ?? slugify(label);
-        const footerId = `${laneId}-footer`;
-        const actorW = Math.max(140, label.length * 22 + 52);
-        b.node(footerId, { lane: laneId, stack: footerStack, kind: "card", title: label, w: actorW, h: 72, role: "lifeline-footer" });
-        phaseActivate.push(footerId);
+      const \u5E2F = preset.bands ? preset.bands.map((x) => ({ actor: \u756A\u53F7.get(x.actor) ?? 0, from: x.from, to: x.to })) : \u9762\u3005.map((_, i) => {
+        const \u51FA\u756A = \u8A00\u3065\u3066.map((m2, idx) => m2.from === i || m2.to === i ? idx : -1).filter((idx) => idx >= 0);
+        return \u51FA\u756A.length > 0 ? { actor: i, from: \u51FA\u756A[0], to: \u51FA\u756A[\u51FA\u756A.length - 1] } : null;
+      }).filter((x) => x !== null);
+      const data = { actors: \u9762\u3005, messages: \u8A00\u3065\u3066, bands: \u5E2F };
+      const m = sequenceBoardMetrics(data);
+      const laneId = "seq";
+      b.lane(laneId, { width: m.w + LANE_PAD_MIN * 2 });
+      b.node(preset.id, {
+        lane: laneId,
+        stack: 0,
+        kind: "sequence-board",
+        w: m.w,
+        h: m.h,
+        title: "",
+        sequenceData: data,
+        // 段が進むと濃さが移る。 書かない図では全部を濃く出す
+        sequenceStep: `{${sequenceStepId()}}`,
+        tone
       });
       b.phase(
-        "seq",
+        "sequence",
         { duration: 2400, title: preset.topic, body: "sequence \u306E\u5168 message \u3092\u6642\u7CFB\u5217\u5C55\u958B\u3002" },
-        (p) => p.activate(...phaseActivate).badge("sequence")
+        (p) => p.activate(preset.id).badge("sequence")
       );
       return b.build();
     }
@@ -29272,6 +29673,14 @@ function topology(preset) {
   };
   return api;
 }
+var ER_CARDINALITY_HEAD = {
+  "1:1": { tail: "one", head: "one" },
+  "1:N": { tail: "one", head: "many" },
+  "N:1": { tail: "many", head: "one" },
+  "N:M": { tail: "many", head: "many" },
+  "0..1": { tail: "one", head: "zero-one" },
+  "1..*": { tail: "one", head: "many" }
+};
 function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
@@ -29282,7 +29691,27 @@ function er(preset) {
   const api = {
     entity(e) {
       const laneId = `lane-${e.id}`;
-      const boxW = fitRowsWidth(entityW, e.rows);
+      const \u9375 = (e.columns ?? []).filter((c) => c.pk === true);
+      const \u5024 = (e.columns ?? []).filter((c) => c.pk !== true);
+      const \u884C = [];
+      const \u5370 = [];
+      const \u8DB3\u3059 = (c) => {
+        \u884C.push(`${c.name}: ${c.type}`);
+        \u5370.push({
+          shape: c.fk === true ? "chevron" : "square",
+          filled: c.optional !== true,
+          ...c.pk === true ? { underline: true } : {}
+        });
+      };
+      \u9375.forEach(\u8DB3\u3059);
+      if (\u9375.length > 0 && \u5024.length > 0) {
+        \u884C.push("");
+        \u5370.push(null);
+      }
+      \u5024.forEach(\u8DB3\u3059);
+      const \u8A2D\u8A08\u306E\u5F62 = \u884C.length > 0;
+      const rows = \u8A2D\u8A08\u306E\u5F62 ? \u884C : e.rows ?? [];
+      const boxW = fitRowsWidth(entityW, rows);
       b.lane(laneId, { width: boxLaneW(boxW) });
       b.node(e.id, {
         lane: laneId,
@@ -29290,8 +29719,12 @@ function er(preset) {
         kind: "storage",
         w: boxW,
         title: e.title,
-        eyebrow: "\u30A8\u30F3\u30C6\u30A3\u30C6\u30A3",
-        rows: e.rows
+        // 種類の札は設計の形では出さない (#578)。 「エンティティ」 と書いた札は全ての箱に
+        // 同じ字が並ぶだけで、代わりに表の呼び名を題の下へ置く
+        ...\u8A2D\u8A08\u306E\u5F62 ? {} : { eyebrow: "\u30A8\u30F3\u30C6\u30A3\u30C6\u30A3" },
+        ...\u8A2D\u8A08\u306E\u5F62 && e.subtitle ? { subtitle: e.subtitle } : {},
+        rows,
+        ...\u8A2D\u8A08\u306E\u5F62 ? { rowMarks: \u5370 } : {}
       });
       entities.push(e.id);
       phaseActivate.push(e.id);
@@ -29300,14 +29733,19 @@ function er(preset) {
     relation(r) {
       const currentIdx = relIdx++;
       const edgeId = `rel-${currentIdx}-${r.from}-${r.to}`;
-      const label = r.label ?? r.cardinality;
-      const sub = r.label ? r.cardinality : void 0;
+      const label = r.label ?? r.cardinality ?? "";
+      const \u5370\u304C\u793A\u3059 = r.tailHead !== void 0 || r.head !== void 0;
+      const sub = r.label && r.cardinality && !\u5370\u304C\u793A\u3059 ? r.cardinality : void 0;
+      const \u65E2\u5B9A = r.cardinality ? ER_CARDINALITY_HEAD[r.cardinality] : void 0;
       b.edge(r.from, r.to, {
         id: edgeId,
         label,
         ...sub ? { sub } : {},
         tone: r.tone ?? tone,
-        style: "solid"
+        style: r.style ?? "solid",
+        // 端の印は両端に立つ (#578)。 箱に近い側が個数、その外側が任意か
+        ...r.head ?? \u65E2\u5B9A?.head ? { head: r.head ?? \u65E2\u5B9A.head } : {},
+        ...r.tailHead ?? \u65E2\u5B9A?.tail ? { tailHead: r.tailHead ?? \u65E2\u5B9A.tail } : {}
       });
       phaseActivate.push(edgeId);
       return api;
@@ -29323,49 +29761,114 @@ function er(preset) {
   };
   return api;
 }
+var MARK_BOX = 96;
+var FSM_ACTION_MARK = {
+  entry: { shape: "chevron", filled: true },
+  exit: { shape: "chevron", filled: false },
+  do: { shape: "square", filled: true },
+  internal: { shape: "square", filled: false }
+};
 function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
-  const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
   const b = diagram(preset.id, { topic: preset.topic });
   const phaseActivate = [];
-  let transIdx = 0;
   const stateOrder = /* @__PURE__ */ new Map();
+  const \u72B6\u614B = [];
+  const \u7BC0\u70B9 = [];
+  const \u9077\u79FB = [];
+  const \u4E26\u3073 = [];
   const api = {
     state(s) {
-      const laneId = `lane-${s.id}`;
-      b.lane(laneId, { width: laneW });
-      const eyebrow = s.initial ? "\u521D\u671F" : s.final ? "\u6700\u7D42" : "\u72B6\u614B";
-      b.node(s.id, {
-        lane: laneId,
-        stack: 0,
-        kind: "card",
-        w: stateW,
-        title: s.title,
-        eyebrow
-      });
+      \u4E26\u3073.push({ \u7A2E: "\u72B6\u614B", i: \u72B6\u614B.length });
+      \u72B6\u614B.push(s);
       stateOrder.set(s.id, stateOrder.size);
-      phaseActivate.push(s.id);
+      return api;
+    },
+    mark(m) {
+      \u4E26\u3073.push({ \u7A2E: "\u7BC0\u70B9", i: \u7BC0\u70B9.length });
+      \u7BC0\u70B9.push(m);
+      stateOrder.set(m.id, stateOrder.size);
       return api;
     },
     transition(t) {
-      const currentIdx = transIdx++;
-      const edgeId = `t${currentIdx}-${t.from}-${t.to}`;
-      const fromIdx = stateOrder.get(t.from) ?? 0;
-      const toIdx = stateOrder.get(t.to) ?? 0;
-      const isBack = toIdx < fromIdx;
-      b.edge(t.from, t.to, {
-        id: edgeId,
-        label: t.trigger,
-        ...t.guard ? { sub: t.guard } : {},
-        tone: t.tone ?? tone,
-        style: "solid",
-        ...isBack ? { routing: "back-detour" } : {}
-      });
-      phaseActivate.push(edgeId);
+      \u9077\u79FB.push(t);
       return api;
     },
     build() {
+      const \u8A2D\u8A08\u306E\u5F62 = \u72B6\u614B.some((s) => s.actions !== void 0 || s.subtitle !== void 0) || \u7BC0\u70B9.length > 0;
+      const \u683C\u5B50 = \u72B6\u614B.some((s) => s.col !== void 0) || \u7BC0\u70B9.some((m) => m.col !== void 0);
+      const \u4E2D\u8EAB = \u72B6\u614B.map((s) => {
+        const \u884C = (s.actions ?? []).map((a) => a.note ? `${a.label}: ${a.note}` : a.label);
+        const \u5370 = (s.actions ?? []).map((a) => FSM_ACTION_MARK[a.when]);
+        const laneId = \u683C\u5B50 && s.col !== void 0 ? `col-${s.col}` : `lane-${s.id}`;
+        const boxW = \u8A2D\u8A08\u306E\u5F62 ? fitRowsWidth(stateW, \u884C) : stateW;
+        return { s, \u884C, \u5370, laneId, boxW, stack: \u683C\u5B50 ? s.row ?? 0 : 0 };
+      });
+      const \u7BC0\u70B9\u306E\u4E2D\u8EAB = \u7BC0\u70B9.map((m) => ({
+        m,
+        laneId: \u683C\u5B50 && m.col !== void 0 ? `col-${m.col}` : `lane-${m.id}`,
+        stack: \u683C\u5B50 ? m.row ?? 0 : 0
+      }));
+      const \u5E2F\u5E45 = /* @__PURE__ */ new Map();
+      for (const c of \u4E2D\u8EAB) \u5E2F\u5E45.set(c.laneId, Math.max(\u5E2F\u5E45.get(c.laneId) ?? 0, c.boxW));
+      for (const c of \u7BC0\u70B9\u306E\u4E2D\u8EAB) \u5E2F\u5E45.set(c.laneId, Math.max(\u5E2F\u5E45.get(c.laneId) ?? 0, MARK_BOX));
+      const \u6E08 = /* @__PURE__ */ new Set();
+      const \u5E2F\u3092\u4F5C\u308B = (laneId) => {
+        if (\u6E08.has(laneId)) return;
+        \u6E08.add(laneId);
+        b.lane(laneId, { width: boxLaneW(\u5E2F\u5E45.get(laneId) ?? stateW) });
+      };
+      for (const c of \u7BC0\u70B9\u306E\u4E2D\u8EAB) if (c.stack === 0) \u5E2F\u3092\u4F5C\u308B(c.laneId);
+      for (const c of \u4E2D\u8EAB) \u5E2F\u3092\u4F5C\u308B(c.laneId);
+      for (const c of \u7BC0\u70B9\u306E\u4E2D\u8EAB) \u5E2F\u3092\u4F5C\u308B(c.laneId);
+      for (const o of \u4E26\u3073) {
+        if (o.\u7A2E === "\u7BC0\u70B9") {
+          const c2 = \u7BC0\u70B9\u306E\u4E2D\u8EAB[o.i];
+          b.node(c2.m.id, {
+            lane: c2.laneId,
+            stack: c2.stack,
+            kind: c2.m.kind === "start" ? "mark-start" : "mark-end",
+            w: MARK_BOX,
+            h: MARK_BOX,
+            title: ""
+          });
+          phaseActivate.push(c2.m.id);
+          continue;
+        }
+        const c = \u4E2D\u8EAB[o.i];
+        const eyebrow = \u7BC0\u70B9.length > 0 ? void 0 : c.s.initial ? "\u521D\u671F" : c.s.final ? "\u6700\u7D42" : "\u72B6\u614B";
+        b.node(c.s.id, {
+          lane: c.laneId,
+          stack: c.stack,
+          kind: \u8A2D\u8A08\u306E\u5F62 ? "storage" : "card",
+          w: c.boxW,
+          title: c.s.title,
+          ...eyebrow ? { eyebrow } : {},
+          ...c.s.subtitle ? { subtitle: c.s.subtitle } : {},
+          // 行を持たない状態でも欄を書く (#578)。 書かないとその箱だけ従来の意匠に落ち、
+          // 呼び名が消える
+          ...\u8A2D\u8A08\u306E\u5F62 ? { rows: c.\u884C, rowMarks: c.\u5370 } : {}
+        });
+        phaseActivate.push(c.s.id);
+      }
+      \u9077\u79FB.forEach((t, currentIdx) => {
+        const edgeId = `t${currentIdx}-${t.from}-${t.to}`;
+        const fromIdx = stateOrder.get(t.from) ?? 0;
+        const toIdx = stateOrder.get(t.to) ?? 0;
+        const isBack = toIdx < fromIdx;
+        b.edge(t.from, t.to, {
+          id: edgeId,
+          label: t.trigger,
+          ...t.guard ? { sub: t.guard } : {},
+          tone: t.tone ?? tone,
+          style: "solid",
+          // 遷移の印は 1 種類だけ = 実線に開いた矢 (#578)。 線と印が分かれず、違いは語の中に入る
+          head: t.head ?? "open",
+          ...isBack ? { routing: "back-detour" } : {}
+        });
+        phaseActivate.push(edgeId);
+      });
       b.phase(
         "fsm",
         { duration: 2400, title: preset.topic, body: "FSM \u306E\u5168 state + transition \u3092 visible \u5316\u3002" },
@@ -29429,72 +29932,103 @@ function infrastructure(preset) {
   };
   return api;
 }
-var CLASS_RELATION_HEAD = {
-  extends: "triangle",
-  implements: "triangle",
-  uses: "open",
-  aggregates: "diamond",
-  composes: "diamond"
+var CLASS_RELATION_LOOK = {
+  extends: { head: "triangle", fill: "hollow", tailHead: "none", tailFill: "solid", style: "solid" },
+  implements: { head: "triangle", fill: "hollow", tailHead: "none", tailFill: "solid", style: "dashed" },
+  aggregates: { head: "none", fill: "solid", tailHead: "diamond", tailFill: "hollow", style: "solid" },
+  composes: { head: "none", fill: "solid", tailHead: "diamond", tailFill: "solid", style: "solid" },
+  associates: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "solid" },
+  uses: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "dashed" }
 };
+Object.fromEntries(
+  Object.entries(CLASS_RELATION_LOOK).map(([k, v]) => [k, v.head])
+);
+function isPublic(row) {
+  return !row.startsWith("-") && !row.startsWith("#");
+}
+function stripAccess(row) {
+  const \u672C\u4F53 = isPublic(row) && !row.startsWith("+") ? row : row.slice(1);
+  return \u672C\u4F53.replace("()", "");
+}
 function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const tone = preset.defaultTone ?? "info";
   const b = diagram(preset.id, { topic: preset.topic });
   const classes = [];
   const phaseActivate = [];
-  let relIdx = 0;
+  const \u7BB1 = [];
+  const \u95A2\u4FC2 = [];
   const api = {
     class(c) {
-      const laneId = `lane-${c.id}`;
-      const rows = [];
-      if (c.attributes && c.attributes.length > 0) {
-        rows.push(...c.attributes);
-      }
-      if (c.methods && c.methods.length > 0) {
-        if (rows.length > 0) rows.push("\u2500\u2500\u2500");
-        rows.push(...c.methods);
-      }
-      const boxW = fitRowsWidth(classW, rows);
-      b.lane(laneId, { width: boxLaneW(boxW) });
-      b.node(c.id, {
-        lane: laneId,
-        stack: 0,
-        kind: "storage",
-        w: boxW,
-        title: c.title,
-        eyebrow: c.stereotype ?? "\u30AF\u30E9\u30B9",
-        ...rows.length > 0 ? { rows } : {}
-      });
-      classes.push(c.id);
-      phaseActivate.push(c.id);
+      \u7BB1.push(c);
       return api;
     },
     relation(r) {
-      const currentIdx = relIdx++;
-      const edgeId = `cr-${currentIdx}-${r.from}-${r.to}`;
-      const label = r.label ?? r.type;
-      const sub = r.cardinality;
-      b.edge(r.from, r.to, {
-        id: edgeId,
-        label,
-        ...sub ? { sub } : {},
-        tone: r.tone ?? tone,
-        style: "solid",
-        // 関係の種類から端の形を決める (cdl#574)。 書いた形が勝つ
-        head: r.head ?? CLASS_RELATION_HEAD[r.type]
-        // CAR-531 SSOT ... 旧実装は `labelOffsetY: currentIdx % 2 === 0 ? -60 : 60` で
-        // 複数 relation label の path 沿い集中を強制分散していた。 CAR-430 で導入した
-        // engine 側 fan offset (FAN_STEP 40 world) が同 from / to 群を自動分散する現在、
-        // author 指定 ±60 は engine 分散と二重発火して extends label が SSOT
-        // LABEL_INIT_CLEARANCE (34、 CAR-630 で 26 → 34 復帰) を大幅に超える 114 world 離れる bug の直接原因になっていた。
-        // author 指定 offset を削除、 engine 側の LABEL_INIT_CLEARANCE + fan offset に一任する。
-        // 個別 relation で offset を再導入したい author は future extension (UmlRelation に
-        // labelOffsetY? を追加) で明示的に指定する経路を残す。
-      });
-      phaseActivate.push(edgeId);
+      \u95A2\u4FC2.push(r);
       return api;
     },
     build() {
+      const \u4E2D\u8EAB = \u7BB1.map((c) => {
+        const rows = [];
+        const rowMarks = [];
+        for (const a of c.attributes ?? []) {
+          rows.push(stripAccess(a));
+          rowMarks.push({ shape: "square", filled: isPublic(a) });
+        }
+        if ((c.attributes?.length ?? 0) > 0 && (c.methods?.length ?? 0) > 0) {
+          rows.push("");
+          rowMarks.push(null);
+        }
+        for (const m of c.methods ?? []) {
+          rows.push(stripAccess(m));
+          rowMarks.push({ shape: "chevron", filled: isPublic(m) });
+        }
+        const boxW = fitRowsWidth(classW, rows);
+        const laneId = c.col !== void 0 ? `col-${c.col}` : `lane-${c.id}`;
+        return { c, rows, rowMarks, boxW, laneId, stack: c.col !== void 0 ? c.row ?? 0 : 0 };
+      });
+      const \u5E2F\u5E45 = /* @__PURE__ */ new Map();
+      for (const m of \u4E2D\u8EAB) \u5E2F\u5E45.set(m.laneId, Math.max(\u5E2F\u5E45.get(m.laneId) ?? 0, m.boxW));
+      const \u6E08 = /* @__PURE__ */ new Set();
+      for (const m of \u4E2D\u8EAB) {
+        if (\u6E08.has(m.laneId)) continue;
+        \u6E08.add(m.laneId);
+        b.lane(m.laneId, { width: boxLaneW(\u5E2F\u5E45.get(m.laneId) ?? m.boxW) });
+      }
+      for (const m of \u4E2D\u8EAB) {
+        b.node(m.c.id, {
+          lane: m.laneId,
+          stack: m.stack,
+          kind: "storage",
+          w: m.boxW,
+          title: m.c.title,
+          // 種類の札は **書いた時だけ** 出す (#578)。 「クラス」 と書いた札は箱がクラスで
+          // あることしか言わず、図の中の全ての箱に同じ字が並ぶ
+          ...m.c.stereotype ? { eyebrow: m.c.stereotype } : {},
+          ...m.rows.length > 0 ? { rows: m.rows, rowMarks: m.rowMarks } : {}
+        });
+        classes.push(m.c.id);
+        phaseActivate.push(m.c.id);
+      }
+      \u95A2\u4FC2.forEach((r, currentIdx) => {
+        const edgeId = `cr-${currentIdx}-${r.from}-${r.to}`;
+        const \u898B\u305F\u76EE = CLASS_RELATION_LOOK[r.type];
+        b.edge(r.from, r.to, {
+          id: edgeId,
+          label: r.label ?? r.type,
+          ...r.cardinality ? { sub: r.cardinality } : {},
+          tone: r.tone ?? tone,
+          // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
+          style: r.style ?? \u898B\u305F\u76EE.style,
+          head: r.head ?? \u898B\u305F\u76EE.head,
+          headFill: r.headFill ?? \u898B\u305F\u76EE.fill,
+          tailHead: r.tailHead ?? \u898B\u305F\u76EE.tailHead,
+          tailHeadFill: \u898B\u305F\u76EE.tailFill
+          // CAR-531 SSOT ... label の分散は engine 側 (LABEL_INIT_CLEARANCE + fan offset) に
+          // 一任する。 author 指定 ±60 は engine 分散と二重発火して label が大きく離れる
+        });
+        phaseActivate.push(edgeId);
+      });
       b.phase(
         "class",
         { duration: 2400, title: preset.topic, body: "UML class \u5168 class + relation \u3092 visible \u5316\u3002" },
@@ -30009,6 +30543,7 @@ exports.ARROW_ENDPOINT_CENTER_TOL = ARROW_ENDPOINT_CENTER_TOL;
 exports.CHAIN_MIN_CLEARANCE = CHAIN_MIN_CLEARANCE;
 exports.CHAIN_SHIFT_MAX_ACCUMULATED = CHAIN_SHIFT_MAX_ACCUMULATED;
 exports.CHAIN_SHIFT_MAX_ITER = CHAIN_SHIFT_MAX_ITER;
+exports.CLASS_RELATION_LOOK = CLASS_RELATION_LOOK;
 exports.CLEARANCE_LABEL_LABEL = CLEARANCE_LABEL_LABEL;
 exports.CLEARANCE_LANE_LABEL = CLEARANCE_LANE_LABEL;
 exports.CLEARANCE_NODE_LABEL = CLEARANCE_NODE_LABEL;
@@ -30022,10 +30557,15 @@ exports.DIST_LABEL_PATH_MAX = DIST_LABEL_PATH_MAX;
 exports.DIST_LABEL_PATH_MIN = DIST_LABEL_PATH_MIN;
 exports.EDGE_HEADS = EDGE_HEADS;
 exports.EDGE_HEAD_DEFAULT = EDGE_HEAD_DEFAULT;
+exports.EDGE_HEAD_FILLS = EDGE_HEAD_FILLS;
+exports.EDGE_HEAD_FILL_DEFAULT = EDGE_HEAD_FILL_DEFAULT;
 exports.EDGE_LABEL_TEXT = EDGE_LABEL_TEXT;
 exports.EDGE_STUB_OUT = EDGE_STUB_OUT;
+exports.EDGE_STYLES = EDGE_STYLES;
+exports.ER_CARDINALITY_HEAD = ER_CARDINALITY_HEAD;
 exports.FAN_GAP = FAN_GAP;
 exports.FONT_RENDER_TOLERANCE_WORLD = FONT_RENDER_TOLERANCE_WORLD;
+exports.FSM_ACTION_MARK = FSM_ACTION_MARK;
 exports.LABEL_INIT_CLEARANCE = LABEL_INIT_CLEARANCE;
 exports.LABEL_INIT_CLEARANCE_DOTTED_FLOW = LABEL_INIT_CLEARANCE_DOTTED_FLOW;
 exports.LABEL_SIZE_TOLERANCE_WORLD = LABEL_SIZE_TOLERANCE_WORLD;
@@ -30039,6 +30579,7 @@ exports.NEAR_COLLISION_POLICY = NEAR_COLLISION_POLICY;
 exports.NODE_FRAME_SELECTOR = NODE_FRAME_SELECTOR;
 exports.NODE_KINDS = NODE_KINDS;
 exports.ROW_GAP_VARIANCE_TOL = ROW_GAP_VARIANCE_TOL;
+exports.SEQUENCE_MESSAGE_LOOK = SEQUENCE_MESSAGE_LOOK;
 exports.SPEC_CLEARANCE_POLICY = SPEC_CLEARANCE_POLICY;
 exports.STAGE_SVG_SELECTOR = STAGE_SVG_SELECTOR;
 exports.TARGET_LABEL_PATH_DIST = TARGET_LABEL_PATH_DIST;
@@ -30113,6 +30654,8 @@ exports.resolveTarget = resolveTarget;
 exports.resolveTargetAll = resolveTargetAll;
 exports.segmentsIntersect = segmentsIntersect2;
 exports.sequence = sequence;
+exports.sequenceBoardMetrics = sequenceBoardMetrics;
+exports.sequenceStepId = sequenceStepId;
 exports.signal = signal;
 exports.stateMachine = stateMachine;
 exports.stateMachine2 = stateMachine2;