@cardenelabs/cdl 0.23.0 → 0.25.0

package/dist/{render-Czv0tUon.d.cts → render-ViWKnlu1.d.cts}

@@ -109,6 +109,8 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+type EdgeRole = "main";
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -291,6 +293,16 @@ type CdlNode = {
      * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
      */
     rowMarks?: readonly (RowMark | null)[];
+    /**
+     * 行に 1 行おきの縞を敷くか (#1553)。
+     *
+     * 表の箱は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+     * 色を増やさずに、面を 1 行おきに変えて追えるようにする。
+     *
+     * **既定では敷かない**。 `er` が設計の形で立てた実体だけが持つ。
+     * クラス図も同じ `storage` を使うが、持ち物と振る舞いは行頭の印で既に分かれている。
+     */
+    rowStripe?: boolean;
     /**
      * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
      *
@@ -572,6 +584,21 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /**
+     * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+     *
+     * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+     * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+     * 主となる 1 本 (または 1 続き) にだけ書く。
+     */
+    role?: EdgeRole;
+    /**
+     * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+     *
+     * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+     * 線と名前の区別が付く。
+     */
+    labelPlate?: boolean;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
     /**
@@ -2415,6 +2442,17 @@ type CdlDiagram = {
      * 既定は `"extract"` = 付け忘れても検知が緩まない向き。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+     *
+     * **cdl は色の値を持たない**。 名前を `data-cdl-palette` として markup に出すだけで、
+     * 実際の値は消費側 (dragon の theme 等) が名前を見て決める。 値を engine に持たせると、
+     * 消費側が配色を変えるたびに engine の release が要る。
+     *
+     * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-palette]` が
+     * 既定の図にも当たる。
+     */
+    palette?: string;
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2612,6 +2650,8 @@ type BBox = {
 type LaidDiagram = {
     id: string;
     topic: string;
+    /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
+    palette?: string;
     viewBox: {
         x: number;
         y: number;
@@ -2810,4 +2850,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { sequenceBoardMetrics as $, EDGE_STYLES as A, type BBox as B, type CdlDiagram as C, type EdgeReveal as D, type EdgeStyle as E, type InteractiveSignalsAccessor as F, type LaidLane as G, NODE_KINDS as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type ScrollProgressHandle as K, type LaidDiagram as L, TONES as M, type NodeKind as N, computeEventBindingKey as O, computeFormulaKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeInputSignalKey as U, computeScrollTriggerKey as V, computed as W, createInteractiveSignalsAccessor as X, createScrollProgressHandle as Y, createScrollProgressSignals as Z, hasInteractivePrimitives as _, type CdlInput as a, sequenceStepId as a0, signal as a1, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type EdgeHeadFill as f, type CdlState as g, type CdlEventTarget as h, type Computed as i, type CdlDerivedValue as j, type CdlScrollTrigger as k, type CdlDiagramViewProps as l, type LaidEdge as m, type LaidNode as n, type CdlEdge as o, CdlDiagramView as p, type CdlEventBinding as q, type CdlEventKind as r, type CdlFormula as s, type CdlPhase as t, EDGE_HEADS as u, EDGE_HEAD_DEFAULT as v, EDGE_HEAD_FILLS as w, EDGE_HEAD_FILL_DEFAULT as x, EDGE_REVEALS as y, EDGE_REVEAL_DEFAULT as z };
+export { hasInteractivePrimitives as $, EDGE_REVEAL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_STYLES as D, type EdgeStyle as E, type EdgeReveal as F, type InteractiveSignalsAccessor as G, type LaidLane as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, NODE_KINDS as K, type LaidDiagram as L, type ScrollProgressHandle as M, type NodeKind as N, TONES as O, computeEventBindingKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeFormulaKey as U, computeInputSignalKey as V, computeScrollTriggerKey as W, computed as X, createInteractiveSignalsAccessor as Y, createScrollProgressHandle as Z, createScrollProgressSignals as _, type CdlInput as a, sequenceBoardMetrics as a0, sequenceStepId as a1, signal as a2, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, EDGE_HEADS as v, EDGE_HEAD_DEFAULT as w, EDGE_HEAD_FILLS as x, EDGE_HEAD_FILL_DEFAULT as y, EDGE_REVEALS as z };

package/dist/{render-Czv0tUon.d.ts → render-ViWKnlu1.d.ts}

@@ -109,6 +109,8 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+type EdgeRole = "main";
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -291,6 +293,16 @@ type CdlNode = {
      * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
      */
     rowMarks?: readonly (RowMark | null)[];
+    /**
+     * 行に 1 行おきの縞を敷くか (#1553)。
+     *
+     * 表の箱は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+     * 色を増やさずに、面を 1 行おきに変えて追えるようにする。
+     *
+     * **既定では敷かない**。 `er` が設計の形で立てた実体だけが持つ。
+     * クラス図も同じ `storage` を使うが、持ち物と振る舞いは行頭の印で既に分かれている。
+     */
+    rowStripe?: boolean;
     /**
      * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
      *
@@ -572,6 +584,21 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /**
+     * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+     *
+     * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+     * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+     * 主となる 1 本 (または 1 続き) にだけ書く。
+     */
+    role?: EdgeRole;
+    /**
+     * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+     *
+     * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+     * 線と名前の区別が付く。
+     */
+    labelPlate?: boolean;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
     /**
@@ -2415,6 +2442,17 @@ type CdlDiagram = {
      * 既定は `"extract"` = 付け忘れても検知が緩まない向き。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+     *
+     * **cdl は色の値を持たない**。 名前を `data-cdl-palette` として markup に出すだけで、
+     * 実際の値は消費側 (dragon の theme 等) が名前を見て決める。 値を engine に持たせると、
+     * 消費側が配色を変えるたびに engine の release が要る。
+     *
+     * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-palette]` が
+     * 既定の図にも当たる。
+     */
+    palette?: string;
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2612,6 +2650,8 @@ type BBox = {
 type LaidDiagram = {
     id: string;
     topic: string;
+    /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
+    palette?: string;
     viewBox: {
         x: number;
         y: number;
@@ -2810,4 +2850,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { sequenceBoardMetrics as $, EDGE_STYLES as A, type BBox as B, type CdlDiagram as C, type EdgeReveal as D, type EdgeStyle as E, type InteractiveSignalsAccessor as F, type LaidLane as G, NODE_KINDS as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type ScrollProgressHandle as K, type LaidDiagram as L, TONES as M, type NodeKind as N, computeEventBindingKey as O, computeFormulaKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeInputSignalKey as U, computeScrollTriggerKey as V, computed as W, createInteractiveSignalsAccessor as X, createScrollProgressHandle as Y, createScrollProgressSignals as Z, hasInteractivePrimitives as _, type CdlInput as a, sequenceStepId as a0, signal as a1, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type EdgeHeadFill as f, type CdlState as g, type CdlEventTarget as h, type Computed as i, type CdlDerivedValue as j, type CdlScrollTrigger as k, type CdlDiagramViewProps as l, type LaidEdge as m, type LaidNode as n, type CdlEdge as o, CdlDiagramView as p, type CdlEventBinding as q, type CdlEventKind as r, type CdlFormula as s, type CdlPhase as t, EDGE_HEADS as u, EDGE_HEAD_DEFAULT as v, EDGE_HEAD_FILLS as w, EDGE_HEAD_FILL_DEFAULT as x, EDGE_REVEALS as y, EDGE_REVEAL_DEFAULT as z };
+export { hasInteractivePrimitives as $, EDGE_REVEAL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_STYLES as D, type EdgeStyle as E, type EdgeReveal as F, type InteractiveSignalsAccessor as G, type LaidLane as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, NODE_KINDS as K, type LaidDiagram as L, type ScrollProgressHandle as M, type NodeKind as N, TONES as O, computeEventBindingKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeFormulaKey as U, computeInputSignalKey as V, computeScrollTriggerKey as W, computed as X, createInteractiveSignalsAccessor as Y, createScrollProgressHandle as Z, createScrollProgressSignals as _, type CdlInput as a, sequenceBoardMetrics as a0, sequenceStepId as a1, signal as a2, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, EDGE_HEADS as v, EDGE_HEAD_DEFAULT as w, EDGE_HEAD_FILLS as x, EDGE_HEAD_FILL_DEFAULT as y, EDGE_REVEALS as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/builder.ts

@@ -15,6 +15,7 @@ import type {
   EdgeHead,
   EdgeHeadFill,
   EdgeStyle,
+  EdgeRole,
   NodeKind,
   Side,
   Tone,
@@ -1435,6 +1436,10 @@ export type DiagramBuilder = {
       tone?: Tone;
       side?: Side;
       style?: EdgeStyle;
+      /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+      role?: EdgeRole;
+      /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+      labelPlate?: boolean;
       /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
       head?: EdgeHead;
       /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -1633,6 +1638,10 @@ export function diagram(
      * `"exclude"` を付ける。 詳細は `CdlDiagram.structuredData` の doc 参照。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
+     */
+    palette?: string;
   },
 ): DiagramBuilder {
   const lanes: CdlLane[] = [];
@@ -1755,6 +1764,8 @@ export function diagram(
         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,
@@ -3767,6 +3778,8 @@ export function diagram(
         topic: options.topic,
         // 既定 (extract) は省略して JSON 形状を変えない。 exclude を明示した図だけ持たせる。
         ...(options.structuredData === "exclude" ? { structuredData: "exclude" as const } : {}),
+        // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
+        ...(options.palette !== undefined ? { palette: options.palette } : {}),
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...(inputs.length > 0 ? { inputs: [...inputs] } : {}),
         ...(formulas.length > 0 ? { formulas: [...formulas] } : {}),

package/src/kinds/generic.tsx

@@ -39,12 +39,71 @@ type KindStyle = {
   icon: string;
   /** shape: rect (default) / cylinder / cloud / diamond / hexagon */
   shape?: "rect" | "cylinder" | "cloud" | "diamond" | "hexagon";
+  /**
+   * 面と枠の描き方 (#616)。 未指定は従来どおり。
+   *
+   * 色で kind を分ける形は、 消費側の配色によっては読めない。 dragon の茶墨は
+   * kind の色が 4 つとも暗く彩度が低く、 枠線や細い帯の面積では差が出ない
+   * (隔たりは 18.6 以上あるが、 面積が小さいと効かない)。 形で分ける口を用意する。
+   */
+  look?: NodeLook;
 };
 
+/** 箱の見せ方。 何を示すかは値の名前が持つ */
+export type NodeLook =
+  /** 図の外にある = 面を塗らず枠だけ */
+  | "outline"
+  /** 通り道 = 薄い面。 止まらず抜ける */
+  | "tint"
+  /** ここが働く = ベタ塗り。 図で最も重い */
+  | "solid"
+  /** 消えては困る = 底を二重の罫で締める */
+  | "ledger"
+  /** 失っても作り直せる = 破線の枠 */
+  | "dashed";
+
+/** 薄い面の濃さ。 `color-mix` を読めない環境では第 2 引数の色に落ちる */
+const TINT_FILL = "color-mix(in srgb, var(--cdl-text, #1a1f2a) 6%, transparent)";
+
+/**
+ * `look` から面と枠を決める。
+ *
+ * 未指定は従来どおり (面 = node-fill、 枠 = 光れば kind の色 / 光らなければ divider)。
+ * ここを通らない kind の出力は 1 文字も変わらない。
+ */
+export function lookPaint(look: NodeLook | undefined, accent: string, active: boolean): {
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  dash?: string;
+  /** ベタ塗りの上では字を紙の色で抜く */
+  onSolid: boolean;
+} {
+  const 既定枠 = active ? accent : "var(--cdl-divider, #d4d4d8)";
+  const 既定太さ = active ? 3 : 1.25;
+  switch (look) {
+    case "outline":
+      return { fill: "none", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "tint":
+      return { fill: TINT_FILL, stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "solid":
+      // 枠は従来どおり (光れば kind の色)。 面だけを墨で塗る = 「光っている節の枠は kind の色」
+      // は既存の契約で、 `node-styling` が守っている
+      return { fill: "var(--cdl-text, #1a1f2a)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: true };
+    case "ledger":
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "dashed":
+      return { fill: "none", stroke: 既定枠, strokeWidth: 既定太さ, dash: "6 4", onSolid: false };
+    default:
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+  }
+}
+
 // 各 kind の visual style (icon は heroicons / lucide 風の minimal SVG path)
 const STYLES: Partial<Record<NodeKind, KindStyle>> = {
   // 人系
   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",
@@ -78,11 +137,13 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
     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",
@@ -99,6 +160,7 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
     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",
@@ -106,6 +168,7 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
 
   // アプリ系
   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",
@@ -188,6 +251,7 @@ export function GenericNode({
 
   // shape 別 path
   const shape = style.shape ?? "rect";
+  const paint = lookPaint(style.look, style.accent, active);
   const shapeEl = (() => {
     if (shape === "cylinder") {
       // 円柱 (top ellipse + side + bottom ellipse)
@@ -267,16 +331,23 @@ export function GenericNode({
     }
     // default rect
     return (
-      <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}
-      />
+      <>
+        <rect
+          x={0}
+          y={0}
+          width={w}
+          height={h}
+          rx={18}
+          fill={paint.fill}
+          stroke={paint.stroke}
+          strokeWidth={paint.strokeWidth}
+          strokeDasharray={paint.dash}
+        />
+        {/* 台帳 = 底を二重の罫で締める。 消えては困る物という約束を形で示す (#616) */}
+        {style.look === "ledger" && (
+          <line x1={1} y1={h - 7} x2={w - 1} y2={h - 7} stroke={paint.stroke} strokeWidth={1} />
+        )}
+      </>
     );
   })();
 
@@ -332,7 +403,14 @@ export function GenericNode({
   const dominantBaseline = centered ? ("middle" as const) : undefined;
 
   return (
-    <g transform={`translate(${x} ${y})`} data-cdl-role="node-body">
+    <g
+      transform={`translate(${x} ${y})`}
+      data-cdl-role="node-body"
+      /* 見せ方を持つ箱だけに出す目印 (#620)。 消費側が `:not([data-cdl-look])` で
+         従来どおりの箱だけを上書きの対象にできる。 持たない kind には出さない
+         = 空文字を出すと選択子が効かなくなる */
+      data-cdl-look={style.look}
+    >
       {shapeEl}
       {/* icon */}
       <g transform={`translate(${iconX} ${iconY}) scale(1)`} data-cdl-role="node-kind-icon">
@@ -340,15 +418,15 @@ export function GenericNode({
         <path d={style.icon} fill={style.eyebrowColor} opacity={0.7} transform="scale(1)" />
       </g>
       {node.eyebrow && (
-        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
+        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
           {node.eyebrow}
         </text>
       )}
-      <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
+      <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={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
         {node.title}
       </text>
       {node.subtitle && (
-        <text x={textX} y={subtitleY} fontSize={17} fill="var(--cdl-text-dim, #5a6270)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+        <text x={textX} y={subtitleY} fontSize={17} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
           {node.subtitle}
         </text>
       )}

package/src/kinds/storage.tsx

@@ -12,6 +12,7 @@ import {
   SUBTITLE_ROW_SHIFT,
   rowBaselineY,
   rowGlyphDepth,
+  rowStripeBand,
 } from "../layout/spec";
 import {
   ROW_PAD_X_PX,
@@ -159,6 +160,37 @@ export function StorageNode({
         stroke={active ? accent : "var(--cdl-divider, #d4d4d8)"}
         strokeWidth={active ? 3 : 1.25}
       />
+      {/*
+        1 行おきの縞 (#1553)。
+
+        **面の直後に置く**。 面より前だと塗り潰され、行の字より後だと字を隠す。
+        位置は `rowStripeBand` が baseline から導く = 縞だけが定数を持つと、行送りを
+        変えた時に字だけ動いて縞が取り残される。
+
+        帯の左右は枠の内側に 1 だけ寄せる。 枠と同じ x に置くと、角の丸みから帯の角が
+        はみ出して四隅に色が出る。
+      */}
+      {node.rowStripe &&
+        rows.map((_, idx) => {
+          if (idx % 2 !== 0) return null;
+          const 帯 = rowStripeBand("storage", idx, 行の下げ);
+          if (!帯) return null;
+          // 箱の下端をまたぐ縞は描かない。 行数と箱の高さは独立に決まるので、行が多い図では
+          // 最後の行が箱の外に来る
+          if (帯.y + 帯.h > node.h) return null;
+          return (
+            <rect
+              key={`stripe-${idx}`}
+              data-cdl-role="node-row-stripe"
+              data-cdl-row-index={idx}
+              x={1}
+              y={帯.y}
+              width={node.w - 2}
+              height={帯.h}
+              fill="var(--cdl-row-stripe, var(--cdl-label-bg, #f3f4f6))"
+            />
+          );
+        })}
       {node.eyebrow && (
         <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
           {node.eyebrow}

package/src/layout/spec.ts

@@ -204,6 +204,29 @@ export function rowBaselineY(kind: string | undefined, index: number): number |
     : ROW_TOP_GENERIC + genericTextShift(kind) + index * ROW_PITCH_GENERIC;
 }
 
+/**
+ * 1 行おきに敷く縞の帯 (#1553)。 node 上端から見た上端 `y` と高さ `h` を返す。
+ *
+ * **baseline から導く**。 縞だけが自前の定数を持つと、行送りを変えた時に字だけ動いて
+ * 縞が取り残される。 行を描かない種別では `null` を返す (`rowBaselineY` と同じ判定)。
+ *
+ * 帯は baseline を挟む。 上端を baseline に置くと字が帯の上へはみ出すため、
+ * 行送りの半分だけ上へ出して行の高さぶんを覆う。
+ *
+ * `shift` は呼び名で行の塊が下がる分 (`SUBTITLE_ROW_SHIFT`)。 描画側が行に足すのと
+ * 同じ値を帯にも足す = 別々に持つと呼び名のある箱でだけ縞と字がずれる。
+ */
+export function rowStripeBand(
+  kind: string | undefined,
+  index: number,
+  shift: number,
+): { y: number; h: number } | null {
+  const baseline = rowBaselineY(kind, index);
+  if (baseline === null) return null;
+  const pitch = kind === "storage" ? ROW_PITCH_STORAGE : ROW_PITCH_GENERIC;
+  return { y: baseline + shift - pitch / 2, h: pitch };
+}
+
 /**
  * `kinds/generic.tsx` が字の塊を下へずらす量 (SSOT)。
  *

package/src/layout.ts

@@ -397,6 +397,12 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     ...(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,

package/src/presets.ts

@@ -11,7 +11,7 @@ import {
   type SequenceBoardMessage,
   type SequenceBoardMessageKind,
 } from "./kinds/sequence-board-metrics";
-import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber } from "./types";
+import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber, EdgeRole } from "./types";
 
 /**
  * 状態を読む書き方 (`{名前}`)。
@@ -762,6 +762,22 @@ export type ErPreset = {
    * 広げるため、 狭く宣言すると宣言座標と実座標がずれる)。
    */
   entityWidth?: number;
+  /**
+   * 行に 1 行おきの縞を敷くか (#1553、 既定 = 敷く)。
+   *
+   * ER 図は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+   * 色を増やさずに面を 1 行おきに変えて追えるようにする。
+   *
+   * 設計の形 (`columns` を書いた実体) だけが対象。 `rows` を直接書いた古い形は
+   * 行頭の印を持たないので敷かない。
+   */
+  rowStripe?: boolean;
+  /**
+   * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+   *
+   * cdl は色の値を持たない。 名前を markup に出すだけで、実際の値は消費側が決める。
+   */
+  palette?: string;
 };
 
 export type ErBuilder = {
@@ -785,7 +801,9 @@ export type ErBuilder = {
 export function er(preset: ErPreset): ErBuilder {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone: Tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const 縞を敷く = preset.rowStripe ?? true;
+  // 配色の名前は素通しする。 空文字の遮断は `diagram` が持つ = ここで重ねると到達しない分岐になる
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
 
   const entities: string[] = [];
   const phaseActivate: string[] = [];
@@ -829,6 +847,9 @@ export function er(preset: ErPreset): ErBuilder {
         ...(設計の形 && e.subtitle ? { subtitle: e.subtitle } : {}),
         rows,
         ...(設計の形 ? { rowMarks: 印 } : {}),
+        // 縞は設計の形だけに敷く (#1553)。 `rows` を直接書いた古い形は行頭の印を持たず、
+        // 群の区切りも線で表しているので、縞を足すと手掛かりが 3 つになる
+        ...(設計の形 && 縞を敷く ? { rowStripe: true } : {}),
       });
       entities.push(e.id);
       phaseActivate.push(e.id);
@@ -1167,6 +1188,10 @@ export 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) */
@@ -1255,6 +1280,8 @@ export function infrastructure(preset: InfrastructurePreset): InfrastructureBuil
         ...(c.sub ? { sub: c.sub } : {}),
         tone: c.tone ?? tone,
         style: c.style ?? style,
+        ...(c.role ? { role: c.role } : {}),
+        ...(c.labelPlate === undefined ? {} : { labelPlate: c.labelPlate }),
         labelOffsetX: c.labelOffsetX ?? 0,
         labelOffsetY: c.labelOffsetY ?? 0,
       });