@cardenelabs/cdl 0.23.0 → 0.25.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeHead, f as EdgeHeadFill, g as CdlState, h as CdlEventTarget, i as Computed, j as CdlDerivedValue, k as CdlScrollTrigger, L as LaidDiagram, l as CdlDiagramViewProps, m as LaidEdge, n as LaidNode, o as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Czv0tUon.cjs';
-export { p as CdlDiagramView, q as CdlEventBinding, r as CdlEventKind, s as CdlFormula, t as CdlPhase, u as EDGE_HEADS, v as EDGE_HEAD_DEFAULT, w as EDGE_HEAD_FILLS, x as EDGE_HEAD_FILL_DEFAULT, y as EDGE_REVEALS, z as EDGE_REVEAL_DEFAULT, A as EDGE_STYLES, D as EdgeReveal, I as InteractiveHandlerMap, F as InteractiveSignalsAccessor, G as LaidLane, H as NODE_KINDS, K as ScrollProgressHandle, M as TONES, O as computeEventBindingKey, P as computeFormulaKey, U as computeInputSignalKey, V as computeScrollTriggerKey, W as computed, X as createInteractiveSignalsAccessor, Y as createScrollProgressHandle, Z as createScrollProgressSignals, _ as hasInteractivePrimitives, $ as sequenceBoardMetrics, a0 as sequenceStepId, a1 as signal } from './render-Czv0tUon.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-ViWKnlu1.cjs';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-ViWKnlu1.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1030,6 +1030,10 @@ type DiagramBuilder = {
         tone?: Tone;
         side?: Side;
         style?: EdgeStyle;
+        /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+        role?: EdgeRole;
+        /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+        labelPlate?: boolean;
         /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
         head?: EdgeHead;
         /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -1202,6 +1206,10 @@ declare function diagram(id: string, options: {
      * `"exclude"` を付ける。 詳細は `CdlDiagram.structuredData` の doc 参照。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
+     */
+    palette?: string;
 }): DiagramBuilder;
 
 /**
@@ -3065,6 +3073,22 @@ type ErPreset = {
      * 広げるため、 狭く宣言すると宣言座標と実座標がずれる)。
      */
     entityWidth?: number;
+    /**
+     * 行に 1 行おきの縞を敷くか (#1553、 既定 = 敷く)。
+     *
+     * ER 図は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+     * 色を増やさずに面を 1 行おきに変えて追えるようにする。
+     *
+     * 設計の形 (`columns` を書いた実体) だけが対象。 `rows` を直接書いた古い形は
+     * 行頭の印を持たないので敷かない。
+     */
+    rowStripe?: boolean;
+    /**
+     * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+     *
+     * cdl は色の値を持たない。 名前を markup に出すだけで、実際の値は消費側が決める。
+     */
+    palette?: string;
 };
 type ErBuilder = {
     entity: (e: ErEntity) => ErBuilder;
@@ -3210,6 +3234,10 @@ type InfraConnection = {
     sub?: string;
     tone?: Tone;
     style?: EdgeStyle;
+    /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+    role?: EdgeRole;
+    /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+    labelPlate?: boolean;
     /** label の水平方向 fine offset (default 0)、 preset 交互 ±60 を override */
     labelOffsetX?: number;
     /** label の垂直方向 fine offset (default 0、 preset 交互 ±60 を override) */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeHead, f as EdgeHeadFill, g as CdlState, h as CdlEventTarget, i as Computed, j as CdlDerivedValue, k as CdlScrollTrigger, L as LaidDiagram, l as CdlDiagramViewProps, m as LaidEdge, n as LaidNode, o as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Czv0tUon.js';
-export { p as CdlDiagramView, q as CdlEventBinding, r as CdlEventKind, s as CdlFormula, t as CdlPhase, u as EDGE_HEADS, v as EDGE_HEAD_DEFAULT, w as EDGE_HEAD_FILLS, x as EDGE_HEAD_FILL_DEFAULT, y as EDGE_REVEALS, z as EDGE_REVEAL_DEFAULT, A as EDGE_STYLES, D as EdgeReveal, I as InteractiveHandlerMap, F as InteractiveSignalsAccessor, G as LaidLane, H as NODE_KINDS, K as ScrollProgressHandle, M as TONES, O as computeEventBindingKey, P as computeFormulaKey, U as computeInputSignalKey, V as computeScrollTriggerKey, W as computed, X as createInteractiveSignalsAccessor, Y as createScrollProgressHandle, Z as createScrollProgressSignals, _ as hasInteractivePrimitives, $ as sequenceBoardMetrics, a0 as sequenceStepId, a1 as signal } from './render-Czv0tUon.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-ViWKnlu1.js';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-ViWKnlu1.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1030,6 +1030,10 @@ type DiagramBuilder = {
         tone?: Tone;
         side?: Side;
         style?: EdgeStyle;
+        /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+        role?: EdgeRole;
+        /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+        labelPlate?: boolean;
         /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
         head?: EdgeHead;
         /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -1202,6 +1206,10 @@ declare function diagram(id: string, options: {
      * `"exclude"` を付ける。 詳細は `CdlDiagram.structuredData` の doc 参照。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
+     */
+    palette?: string;
 }): DiagramBuilder;
 
 /**
@@ -3065,6 +3073,22 @@ type ErPreset = {
      * 広げるため、 狭く宣言すると宣言座標と実座標がずれる)。
      */
     entityWidth?: number;
+    /**
+     * 行に 1 行おきの縞を敷くか (#1553、 既定 = 敷く)。
+     *
+     * ER 図は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+     * 色を増やさずに面を 1 行おきに変えて追えるようにする。
+     *
+     * 設計の形 (`columns` を書いた実体) だけが対象。 `rows` を直接書いた古い形は
+     * 行頭の印を持たないので敷かない。
+     */
+    rowStripe?: boolean;
+    /**
+     * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+     *
+     * cdl は色の値を持たない。 名前を markup に出すだけで、実際の値は消費側が決める。
+     */
+    palette?: string;
 };
 type ErBuilder = {
     entity: (e: ErEntity) => ErBuilder;
@@ -3210,6 +3234,10 @@ type InfraConnection = {
     sub?: string;
     tone?: Tone;
     style?: EdgeStyle;
+    /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+    role?: EdgeRole;
+    /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+    labelPlate?: boolean;
     /** label の水平方向 fine offset (default 0)、 preset 交互 ±60 を override */
     labelOffsetX?: number;
     /** label の垂直方向 fine offset (default 0、 preset 交互 ±60 を override) */

package/dist/index.js

@@ -9491,6 +9491,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,
@@ -11480,6 +11482,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] } : {},
@@ -11790,6 +11794,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;
 }
@@ -20254,6 +20264,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,
@@ -21977,6 +21993,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;
 }
@@ -21990,7 +22012,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;
@@ -22080,7 +22102,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;
@@ -22157,7 +22179,7 @@ function CdlEdgeGlowView({
   active
 }) {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return /* @__PURE__ */ jsx(EdgeGlowCircles, { color, edgeId: edge.id });
 }
 function CdlEdgeLabelView({
@@ -22165,7 +22187,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;
@@ -22183,7 +22205,7 @@ function CdlEdgeLabelView({
       "data-cdl-edge-label-text": edge.label,
       "data-cdl-edge-sub-text": edge.sub ?? "",
       children: [
-        /* @__PURE__ */ jsx(
+        edge.labelPlate !== false && /* @__PURE__ */ jsx(
           "rect",
           {
             "data-cdl-role": "edge-label-bg",
@@ -22799,6 +22821,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__ */ 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__ */ 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)。 従来の箱は題の下に区切り線が来るので
     // 置き場が無い
@@ -22906,9 +22947,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"
@@ -22941,11 +23002,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"
@@ -22962,12 +23025,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"
@@ -23039,6 +23104,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;
@@ -23096,19 +23162,23 @@ function GenericNode({
         circles.map((c, i) => /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ 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__ */ 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;
@@ -23131,56 +23201,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__ */ jsxs("g", { transform: `translate(${x} ${y})`, "data-cdl-role": "node-body", children: [
-    shapeEl,
-    /* @__PURE__ */ jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
-      /* @__PURE__ */ jsx("rect", { width: 24, height: 24, fill: "transparent" }),
-      /* @__PURE__ */ jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
-    ] }),
-    node.eyebrow && /* @__PURE__ */ jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
-    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
-        /* @__PURE__ */ 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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `translate(${x} ${y})`,
+      "data-cdl-role": "node-body",
+      "data-cdl-look": style.look,
+      children: [
+        shapeEl,
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
+          /* @__PURE__ */ jsx("rect", { width: 24, height: 24, fill: "transparent" }),
+          /* @__PURE__ */ jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
+        ] }),
+        node.eyebrow && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
+            /* @__PURE__ */ 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__ */ 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;
@@ -29609,6 +29687,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__ */ jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
@@ -30482,7 +30561,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;
@@ -30518,7 +30598,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);
@@ -30709,6 +30792,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
       });