@cardenelabs/cdl 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -5,6 +5,109 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.25.0] - 2026-09-03
+
+### Added
+
+- **表の箱に 1 行おきの縞を敷けるようにした** (#1553)
+
+  ER 図は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+  `id` の右端にある `bigint` がどの行のものか、目で辿り直すことになる。
+
+  色を増やさずに、面を 1 行おきに変えて追えるようにする。
+  色数を足して分ける形は 9 回試して全て外れており、増やすほど図が散らかった。
+
+  `rowStripe` を `CdlNode` に足し、`er` が設計の形 (`columns` を書いた実体) で立てた
+  実体に既定で敷く。 `er({ rowStripe: false })` で切れる。
+
+  **クラス図には敷かない**。 同じ `storage` を使うが、持ち物と振る舞いは行頭の印
+  (四角と山形) で既に分かれている。 縞を足すと手掛かりが 3 つになる。
+
+  縞の位置は `rowStripeBand` が行の baseline から導く。
+  縞だけが自前の定数を持つと、行送りを変えた時に字だけ動いて縞が取り残される。
+  呼び名で行の塊が下がる箱では、描画側が行に足すのと同じ値を帯にも足す。
+
+  帯は baseline を挟む。 上端を baseline に置くと字が帯の上へはみ出す。
+
+  箱の下端をまたぐ縞は描かない。 行数と箱の高さは独立に決まるので、行が多い図では
+  最後の行が箱の外に来る。
+
+  色は `--cdl-row-stripe` を読み、無ければ `--cdl-label-bg` に落ちる。
+  消費側が縞と札の下地を別に決めたくなった時に、engine を変えずに分けられる。
+
+- **図に別の配色を名指しできるようにした** (#1553)
+
+  `palette` を `CdlDiagram` と `diagram()` と `er()` に足し、
+  `data-cdl-palette` として舞台の `<svg>` に出す。
+
+  **cdl は色の値を持たない**。 名前を markup に出すだけで、実際の値は消費側
+  (dragon の theme 等) が名前を見て決める。 値を engine に持たせると、
+  消費側が配色を変えるたびに engine の release が要る。
+
+  空文字は書かなかった扱いにする = 空の目印を出すと、消費側の `[data-cdl-palette]` が
+  配色を書いていない図にも当たる。
+
+  遮断は `layout` 1 箇所に置く。 描画は必ず組み立てを通るので、
+  組み立て API と `er` は素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る。
+
+## [0.24.0] - 2026-09-02
+
+### Added
+
+- **見せ方を持つ箱に目印を出すようにした** (#620)
+
+  `#616` で足した `look` が消費側の画面に出なかった。 dragon の `cdl-theme.css` が
+  `node-body > rect` の `fill` を `!important` で固定しており、`look` が決めた面
+  (`none` / 薄い面 / 墨のベタ) が全て既定の面に潰れていた。
+
+  消費側は「見せ方を持つ箱」 と「持たない箱」 を区別できない。 markup に手掛かりが無かった。
+
+  `look` を持つ kind の箱に `data-cdl-look` を出す。 持たない kind には出さない
+  (空文字を出すと消費側の `:not()` が効かなくなる)。
+
+- **辺に役目を持たせ、順路を朱で引けるようにした** (#618)
+
+  辺の見せ方が 1 通りしかなく、太さも名前の置き方も図の役目に関わらず同じだった。
+  `infra-demo` は「要求が通る道」 と「App が持つ預け先」 の 2 種を持つが、どちらも同じ線で
+  描かれ、どこから読むかが決まらない。
+
+  | 足したもの | 既定 | 書くと |
+  |---|---|---|
+  | `role: "main"` | tone の色 | 「いま」 の色 (`--cdl-now`) で引く |
+  | `labelPlate: false` | 丸い下地を敷く | 字だけを線の上に置く |
+
+  線の太さの既定を下げた (光って 5 → 2.5、光らず 2.5 → 1.25)。
+  消費側 (dragon) が `!important` で 2.25 に上書きしており、箱の枠 (1.75) より太かった。
+
+  **値は 3 層を通る**。 `InfraConnection` (書き手の入口) → `edge()` (基底の組立て) →
+  `CdlEdge` (描く側) のすべてに足さないと、設定しても何も起きない。
+  当初 1 層目だけに足して黙って落ちた。
+
+- **箱の見せ方を色でなく形で選べるようにした** (#616)
+
+  箱の見せ方が全種別で同じで、違いは枠線の色と右上の絵記号だけだった。
+  色で種別を分ける形は、消費側の配色によっては読めない。 dragon の茶墨は種別の色が
+  4 つとも暗く彩度が低く、枠線の面積では差が出ない (隔たりは 18.6 以上あるが効かない)。
+
+  `KindStyle` に `look` を足し、面と枠の描き方を 5 通りから選べるようにした。
+
+  | `look` | 描き方 | 何を示すか | 当てた種別 |
+  |---|---|---|---|
+  | `outline` | 面を塗らず枠だけ | 図の外にある | `person` |
+  | `tint` | 文字色 6% の面 | 通り道 | `cdn` |
+  | `solid` | 文字色のベタ + 紙色の字 | ここが働く | `service` |
+  | `ledger` | 面 + 底に二重の罫 | 消えては困る | `queue` |
+  | `dashed` | 面を塗らず破線の枠 | 作り直せる | `cache` |
+
+  未指定は従来どおりで、`look` を書いた 5 種別だけが変わる。
+
+  **`ledger` は四角の箱にだけ効く**。 円筒や雲は形そのものが役目を示しており、底の罫を
+  足す場所が無い。 `database` は円筒なので当てていない。
+
+  **ベタ塗りでも枠は種別の色のまま**。 「光っている節の枠は種別の色」 は既存の契約で、
+  `node-styling` が守っている。 面だけを墨で塗る。
+
+
 ## [0.23.0] - 2026-09-02
 
 ### Added
@@ -1185,7 +1288,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.23.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.24.0...HEAD
+[0.24.0]: https://github.com/cardene777/cdl/compare/v0.23.0...v0.24.0
 [0.23.0]: https://github.com/cardene777/cdl/compare/v0.22.0...v0.23.0
 [0.22.0]: https://github.com/cardene777/cdl/compare/v0.21.2...v0.22.0
 [0.21.2]: https://github.com/cardene777/cdl/compare/v0.21.1...v0.21.2

package/dist/index.cjs

@@ -9493,6 +9493,8 @@ function diagram(id, options) {
         tone: opts.tone ?? "accent",
         side: opts.side,
         style: opts.style,
+        role: opts.role,
+        labelPlate: opts.labelPlate,
         head: opts.head,
         headFill: opts.headFill,
         tailHead: opts.tailHead,
@@ -11482,6 +11484,8 @@ function diagram(id, options) {
         topic: options.topic,
         // 既定 (extract) は省略して JSON 形状を変えない。 exclude を明示した図だけ持たせる。
         ...options.structuredData === "exclude" ? { structuredData: "exclude" } : {},
+        // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
+        ...options.palette !== void 0 ? { palette: options.palette } : {},
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...inputs.length > 0 ? { inputs: [...inputs] } : {},
         ...formulas.length > 0 ? { formulas: [...formulas] } : {},
@@ -11792,6 +11796,12 @@ function rowBaselineY(kind, index) {
   if (!rendersRows(kind)) return null;
   return kind === "storage" ? ROW_TOP_STORAGE + index * ROW_PITCH_STORAGE : ROW_TOP_GENERIC + genericTextShift(kind) + index * ROW_PITCH_GENERIC;
 }
+function rowStripeBand(kind, index, shift) {
+  const baseline = rowBaselineY(kind, index);
+  if (baseline === null) return null;
+  const pitch = ROW_PITCH_STORAGE ;
+  return { y: baseline + shift - pitch / 2, h: pitch };
+}
 function genericTextShift(kind) {
   return KINDS_SHAPE_CYLINDER.has(kind ?? "") ? GENERIC_TEXT_SHIFT_CYLINDER : 0;
 }
@@ -20256,6 +20266,12 @@ function layout(diag) {
     ...diag.derived ? { derived: diag.derived } : {},
     // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
     ...diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {},
+    // どの配色で描くか (#1553)。 空文字は書かなかった扱いにする = 空の目印を出すと、
+    // 消費側の `[data-cdl-palette]` が配色を書いていない図にも当たる。
+    //
+    // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
+    // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
+    ...diag.palette ? { palette: diag.palette } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -21979,6 +21995,12 @@ function edgeHeadPaint(head, fill, color) {
   }
   return { fill: color, stroke: "none" };
 }
+function defaultEdgeWidth(active) {
+  return active ? 2.5 : 1.25;
+}
+function edgeColor(edge) {
+  return edge.role === "main" ? "var(--cdl-now, #c0421f)" : toneColor(edge.tone);
+}
 function opacityAttr(opacity) {
   return opacity < 1 ? opacity : void 0;
 }
@@ -21992,7 +22014,7 @@ function CdlEdgeView({
   progress,
   stateValues
 }) {
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   const \u7AEF\u306E\u540D\u524D = (h, f) => {
     const \u5F62 = h ?? EDGE_HEAD_DEFAULT;
     if (\u5F62 === "none") return void 0;
@@ -22082,7 +22104,7 @@ function SolidEdgePath({
   stateValues
 }) {
   const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
-  const defaultWidth = active ? 5 : 2.5;
+  const defaultWidth = defaultEdgeWidth(active);
   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;
@@ -22159,7 +22181,7 @@ function CdlEdgeGlowView({
   active
 }) {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return /* @__PURE__ */ jsxRuntime.jsx(EdgeGlowCircles, { color, edgeId: edge.id });
 }
 function CdlEdgeLabelView({
@@ -22167,7 +22189,7 @@ function CdlEdgeLabelView({
   active
 }) {
   if (!hasRenderedLabel(edge)) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   const bbox = computeLabelBBoxWorld(edge);
   const boxW = bbox.w;
   const boxH = bbox.h;
@@ -22185,7 +22207,7 @@ function CdlEdgeLabelView({
       "data-cdl-edge-label-text": edge.label,
       "data-cdl-edge-sub-text": edge.sub ?? "",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        edge.labelPlate !== false && /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
           {
             "data-cdl-role": "edge-label-bg",
@@ -22801,6 +22823,25 @@ function StorageNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    node.rowStripe && rows.map((_, idx) => {
+      if (idx % 2 !== 0) return null;
+      const \u5E2F = rowStripeBand("storage", idx, \u884C\u306E\u4E0B\u3052);
+      if (!\u5E2F) return null;
+      if (\u5E2F.y + \u5E2F.h > node.h) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          "data-cdl-role": "node-row-stripe",
+          "data-cdl-row-index": idx,
+          x: 1,
+          y: \u5E2F.y,
+          width: node.w - 2,
+          height: \u5E2F.h,
+          fill: "var(--cdl-row-stripe, var(--cdl-label-bg, #f3f4f6))"
+        },
+        `stripe-${idx}`
+      );
+    }),
     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)。 従来の箱は題の下に区切り線が来るので
     // 置き場が無い
@@ -22908,9 +22949,29 @@ function StorageNode({
     })
   ] });
 }
+var TINT_FILL = "color-mix(in srgb, var(--cdl-text, #1a1f2a) 6%, transparent)";
+function lookPaint(look, accent, active) {
+  const \u65E2\u5B9A\u67A0 = active ? accent : "var(--cdl-divider, #d4d4d8)";
+  const \u65E2\u5B9A\u592A\u3055 = active ? 3 : 1.25;
+  switch (look) {
+    case "outline":
+      return { fill: "none", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+    case "tint":
+      return { fill: TINT_FILL, stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+    case "solid":
+      return { fill: "var(--cdl-text, #1a1f2a)", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: true };
+    case "ledger":
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+    case "dashed":
+      return { fill: "none", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, dash: "6 4", onSolid: false };
+    default:
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+  }
+}
 var STYLES = {
   // 人系
   person: {
+    look: "outline",
     accent: "var(--cdl-tone-accent, #2d6a8f)",
     eyebrowColor: "var(--cdl-tone-accent, #2d6a8f)",
     icon: "M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z"
@@ -22943,11 +23004,13 @@ var STYLES = {
     shape: "cylinder"
   },
   cache: {
+    look: "dashed",
     accent: "var(--cdl-tone-warning, #a67a2e)",
     eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
     icon: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
   },
   queue: {
+    look: "ledger",
     accent: "var(--cdl-tone-warning, #a67a2e)",
     eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
     icon: "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"
@@ -22964,12 +23027,14 @@ var STYLES = {
     shape: "cloud"
   },
   cdn: {
+    look: "tint",
     accent: "var(--cdl-tone-info, #5a8ec1)",
     eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
     icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
   },
   // アプリ系
   service: {
+    look: "solid",
     accent: "var(--cdl-tone-teal, #2f8770)",
     eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
     icon: "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
@@ -23041,6 +23106,7 @@ function GenericNode({
   const w = node.w;
   const h = node.h;
   const shape = style.shape ?? "rect";
+  const paint = lookPaint(style.look, style.accent, active);
   const shapeEl = (() => {
     if (shape === "cylinder") {
       const rx = w / 2;
@@ -23098,19 +23164,23 @@ function GenericNode({
         circles.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c.cx, cy: c.cy, r: c.r - (active ? 1.5 : 0.75), fill: "var(--cdl-node-fill, #ffffff)" }, `mask-${i}`))
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "rect",
-      {
-        x: 0,
-        y: 0,
-        width: w,
-        height: h,
-        rx: 18,
-        fill: "var(--cdl-node-fill, #ffffff)",
-        stroke: active ? style.accent : "var(--cdl-divider, #d4d4d8)",
-        strokeWidth: active ? 3 : 1.25
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: 0,
+          y: 0,
+          width: w,
+          height: h,
+          rx: 18,
+          fill: paint.fill,
+          stroke: paint.stroke,
+          strokeWidth: paint.strokeWidth,
+          strokeDasharray: paint.dash
+        }
+      ),
+      style.look === "ledger" && /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 1, y1: h - 7, x2: w - 1, y2: h - 7, stroke: paint.stroke, strokeWidth: 1 })
+    ] });
   })();
   const resolvedValue = value !== void 0 ? interpolate(value, stateValues) : void 0;
   const hasRows = (node.rows?.length ?? 0) > 0;
@@ -23133,56 +23203,64 @@ function GenericNode({
   const iconX = centered ? w / 2 + 40 : w - 48;
   const iconY = centered ? h / 2 - 44 - \u7D75\u306E\u82AF : 18 + cylinderShift;
   const dominantBaseline = centered ? "middle" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, "data-cdl-role": "node-body", children: [
-    shapeEl,
-    /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 24, height: 24, fill: "transparent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
-    ] }),
-    node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: textX, y: titleY, fontSize: 20, fontWeight: 700, fill: "var(--cdl-text, #1a1f2a)", textAnchor, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.title }),
-    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: node.subtitle }),
-    resolvedValue && /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
-      {
-        x: w - 20,
-        y: h - 24,
-        fontSize: 32,
-        fontWeight: 700,
-        textAnchor: "end",
-        fill: "var(--cdl-text, #1a1f2a)",
-        style: { fontFamily: "'JetBrains Mono', monospace" },
-        children: resolvedValue
-      }
-    ),
-    node.rows && node.rows.length > 0 && (() => {
-      const resolved = node.rows.map((row) => interpolate(row, stateValues));
-      const splits = resolved.map(splitRow);
-      const leftMaxWidth = splits.reduce(
-        (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
-        0
-      );
-      const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;
-      return /* @__PURE__ */ jsxRuntime.jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-row", "data-cdl-row-index": i, x: ROW_PAD_X_PX, y: 0, fontSize: 18, fill: "var(--cdl-text-dim, #5a6270)", children: s.left }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${x} ${y})`,
+      "data-cdl-role": "node-body",
+      "data-cdl-look": style.look,
+      children: [
+        shapeEl,
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 24, height: 24, fill: "transparent" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
+        ] }),
+        node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: textX, y: titleY, fontSize: 20, fontWeight: 700, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text, #1a1f2a)", textAnchor, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.title }),
+        node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: node.subtitle }),
+        resolvedValue && /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
-            "data-cdl-role": "node-row",
-            "data-cdl-row-index": i,
-            x: rightColX,
-            y: 0,
-            fontSize: 21,
+            x: w - 20,
+            y: h - 24,
+            fontSize: 32,
             fontWeight: 700,
-            textAnchor: "start",
+            textAnchor: "end",
             fill: "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: s.right
+            children: resolvedValue
           }
-        )
-      ] }, i)) });
-    })()
-  ] });
+        ),
+        node.rows && node.rows.length > 0 && (() => {
+          const resolved = node.rows.map((row) => interpolate(row, stateValues));
+          const splits = resolved.map(splitRow);
+          const leftMaxWidth = splits.reduce(
+            (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
+            0
+          );
+          const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;
+          return /* @__PURE__ */ jsxRuntime.jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-row", "data-cdl-row-index": i, x: ROW_PAD_X_PX, y: 0, fontSize: 18, fill: "var(--cdl-text-dim, #5a6270)", children: s.left }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "node-row",
+                "data-cdl-row-index": i,
+                x: rightColX,
+                y: 0,
+                fontSize: 21,
+                fontWeight: 700,
+                textAnchor: "start",
+                fill: "var(--cdl-text, #1a1f2a)",
+                style: { fontFamily: "'JetBrains Mono', monospace" },
+                children: s.right
+              }
+            )
+          ] }, i)) });
+        })()
+      ]
+    }
+  );
 }
 var MARK_INNER_RATIO = 0.56;
 var RING_WIDTH_ACTIVE = 6;
@@ -29611,6 +29689,7 @@ function CdlStage({
         "aria-label": buildDiagramAltText(laid.topic, currentPhase),
         "data-cdl-stage": "",
         "data-cdl-scale": diagramScale === 1 ? void 0 : diagramScale,
+        "data-cdl-palette": laid.palette,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
@@ -30484,7 +30563,8 @@ var ER_CARDINALITY_HEAD = {
 function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
   const entities = [];
   const phaseActivate = [];
   let relIdx = 0;
@@ -30520,7 +30600,10 @@ function er(preset) {
         ...\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 } : {}
+        ...\u8A2D\u8A08\u306E\u5F62 ? { rowMarks: \u5370 } : {},
+        // 縞は設計の形だけに敷く (#1553)。 `rows` を直接書いた古い形は行頭の印を持たず、
+        // 群の区切りも線で表しているので、縞を足すと手掛かりが 3 つになる
+        ...\u8A2D\u8A08\u306E\u5F62 && \u7E1E\u3092\u6577\u304F ? { rowStripe: true } : {}
       });
       entities.push(e.id);
       phaseActivate.push(e.id);
@@ -30711,6 +30794,8 @@ function infrastructure(preset) {
         ...c.sub ? { sub: c.sub } : {},
         tone: c.tone ?? tone,
         style: c.style ?? style,
+        ...c.role ? { role: c.role } : {},
+        ...c.labelPlate === void 0 ? {} : { labelPlate: c.labelPlate },
         labelOffsetX: c.labelOffsetX ?? 0,
         labelOffsetY: c.labelOffsetY ?? 0
       });