@cardenelabs/cdl 0.24.0 → 0.26.0

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

@@ -293,6 +293,16 @@ type CdlNode = {
      * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
      */
     rowMarks?: readonly (RowMark | null)[];
+    /**
+     * 行に 1 行おきの縞を敷くか (#1553)。
+     *
+     * 表の箱は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+     * 色を増やさずに、面を 1 行おきに変えて追えるようにする。
+     *
+     * **既定では敷かない**。 `er` が設計の形で立てた実体だけが持つ。
+     * クラス図も同じ `storage` を使うが、持ち物と振る舞いは行頭の印で既に分かれている。
+     */
+    rowStripe?: boolean;
     /**
      * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
      *
@@ -2432,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)。
      *
@@ -2629,6 +2650,8 @@ type BBox = {
 type LaidDiagram = {
     id: string;
     topic: string;
+    /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
+    palette?: string;
     viewBox: {
         x: number;
         y: number;

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

@@ -293,6 +293,16 @@ type CdlNode = {
      * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
      */
     rowMarks?: readonly (RowMark | null)[];
+    /**
+     * 行に 1 行おきの縞を敷くか (#1553)。
+     *
+     * 表の箱は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+     * 色を増やさずに、面を 1 行おきに変えて追えるようにする。
+     *
+     * **既定では敷かない**。 `er` が設計の形で立てた実体だけが持つ。
+     * クラス図も同じ `storage` を使うが、持ち物と振る舞いは行頭の印で既に分かれている。
+     */
+    rowStripe?: boolean;
     /**
      * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
      *
@@ -2432,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)。
      *
@@ -2629,6 +2650,8 @@ type BBox = {
 type LaidDiagram = {
     id: string;
     topic: string;
+    /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
+    palette?: string;
     viewBox: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.24.0",
+  "version": "0.26.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

@@ -1638,6 +1638,10 @@ export function diagram(
      * `"exclude"` を付ける。 詳細は `CdlDiagram.structuredData` の doc 参照。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
+     */
+    palette?: string;
   },
 ): DiagramBuilder {
   const lanes: CdlLane[] = [];
@@ -3774,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/storage.tsx

@@ -12,6 +12,7 @@ import {
   SUBTITLE_ROW_SHIFT,
   rowBaselineY,
   rowGlyphDepth,
+  rowStripeBand,
 } from "../layout/spec";
 import {
   ROW_PAD_X_PX,
@@ -52,6 +53,15 @@ const ROW_GLYPH_RISE = 8;
  */
 const SUBTITLE_BASELINE = 118;
 
+/**
+ * 縞を敷く最少の行数 (#627)。
+ *
+ * 縞の役目は「隣り合う行を見分ける」 こと。 1 行しか無い箱には見分ける相手が居ないので、
+ * 敷くとその 1 行が「主役」 に見える。 閾値ではなく役目から導いた値なので、
+ * 図種を増やしても同じ規則が効く。
+ */
+const STRIPE_MIN_ROWS = 2;
+
 /** 呼び名の級。 行の名前 (26) より小さく、型 (24) と同じ */
 const SUBTITLE_FONT = 20;
 
@@ -159,6 +169,42 @@ export function StorageNode({
         stroke={active ? accent : "var(--cdl-divider, #d4d4d8)"}
         strokeWidth={active ? 3 : 1.25}
       />
+      {/*
+        1 行おきの縞 (#1553)。
+
+        **面の直後に置く**。 面より前だと塗り潰され、行の字より後だと字を隠す。
+        位置は `rowStripeBand` が baseline から導く = 縞だけが定数を持つと、行送りを
+        変えた時に字だけ動いて縞が取り残される。
+
+        帯の左右は枠の内側に 1 だけ寄せる。 枠と同じ x に置くと、角の丸みから帯の角が
+        はみ出して四隅に色が出る。
+
+        **行が 1 つの箱には敷かない** (#627)。 縞の役目は「隣り合う行を見分ける」 ことで、
+        1 行しか無い箱には見分ける相手が居ない。 敷くとその 1 行が「主役」 に見える
+        (実測 = クラス図の 1 行の箱で縞が強調に読めた)。
+      */}
+      {node.rowStripe &&
+        rows.length >= STRIPE_MIN_ROWS &&
+        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

@@ -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);
@@ -1404,6 +1425,17 @@ export type ClassDiagramPreset = {
    * 帯ではなく **箱** の幅。 帯は `箱の幅 + 余白 × 2` で宣言する。
    */
   classWidth?: number;
+  /**
+   * 行に 1 行おきの縞を敷くか (既定 = 敷く、 #627)。
+   *
+   * クラス図の箱は ER 図と同じ作り (行頭の印 + 左に名前 + 右に型) をしており、名前と型が
+   * 離れて並ぶので行を横に追う目印が要る。 `er()` と同じ既定にする。
+   */
+  rowStripe?: boolean;
+  /**
+   * 図の配色の名前 (#627)。 描き手は色を持たないので、名前をそのまま markup に出す。
+   */
+  palette?: string;
 };
 
 export type ClassDiagramBuilder = {
@@ -1426,7 +1458,9 @@ export type ClassDiagramBuilder = {
 export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const tone: Tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  // 縞と配色は `er()` と同じ扱い (#627)。 箱の作りが同じなので、既定も揃える
+  const 縞を敷く = preset.rowStripe ?? true;
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
 
   const classes: string[] = [];
   const phaseActivate: string[] = [];
@@ -1488,6 +1522,8 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
           // あることしか言わず、図の中の全ての箱に同じ字が並ぶ
           ...(m.c.stereotype ? { eyebrow: m.c.stereotype } : {}),
           ...(m.rows.length > 0 ? { rows: m.rows, rowMarks: m.rowMarks } : {}),
+          // 縞は行を持つ箱にだけ敷く (#627)。 行が無い箱に書いても描き手が読まない
+          ...(m.rows.length > 0 && 縞を敷く ? { rowStripe: true } : {}),
         });
         classes.push(m.c.id);
         phaseActivate.push(m.c.id);

package/src/render/stage.tsx

@@ -144,6 +144,13 @@ export function CdlStage({
         // 倍率は SVG 要素そのものに載せる。 中身を包む `<g>` を作らないので、
         // 倍率 1 / 未指定の DOM は従来と 1 byte も変わらない。
         data-cdl-scale={diagramScale === 1 ? undefined : diagramScale}
+        // どの配色で描くか (#1553)。 cdl は色の値を持たず、名前だけを出す。
+        // 消費側 (dragon の theme 等) が名前を見て変数の値を決める。
+        //
+        // **ここでは空文字を弾かない**。 公開経路は `CdlDiagramView` だけで、必ず組み立てを
+        // 通るため、空文字は `layout` が既に落としている。 ここにも守りを置くと、
+        // どの入力でも通らない分岐が残る
+        data-cdl-palette={laid.palette}
       >
         <defs>
           {/* CAR-643 = cdl は geometry only。 shadow / border effect の filter は cdl SVG 内に

package/src/render/template-fields.ts

@@ -61,6 +61,8 @@ type 読まない欄 =
   | "journeyData"
   // 行頭の印 (#578)。 字ではなく形なので、状態から値を差し込む対象にならない
   | "rowMarks"
+  // 1 行おきの縞 (#1553)。 敷くか敷かないかの真偽値で、字を差し込む先が無い
+  | "rowStripe"
   // 時系列のやり取りの中身 (#578)。 種別が内側で解決するので、ここでは差し込まない
   | "sequenceData";
 

package/src/types.ts

@@ -351,6 +351,16 @@ export type CdlNode = {
    * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
    */
   rowMarks?: readonly (RowMark | null)[];
+  /**
+   * 行に 1 行おきの縞を敷くか (#1553)。
+   *
+   * 表の箱は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+   * 色を増やさずに、面を 1 行おきに変えて追えるようにする。
+   *
+   * **既定では敷かない**。 `er` が設計の形で立てた実体だけが持つ。
+   * クラス図も同じ `storage` を使うが、持ち物と振る舞いは行頭の印で既に分かれている。
+   */
+  rowStripe?: boolean;
   /**
    * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
    *
@@ -2507,6 +2517,17 @@ export type CdlDiagram = {
    * 既定は `"extract"` = 付け忘れても検知が緩まない向き。
    */
   structuredData?: "extract" | "exclude";
+  /**
+   * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+   *
+   * **cdl は色の値を持たない**。 名前を `data-cdl-palette` として markup に出すだけで、
+   * 実際の値は消費側 (dragon の theme 等) が名前を見て決める。 値を engine に持たせると、
+   * 消費側が配色を変えるたびに engine の release が要る。
+   *
+   * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-palette]` が
+   * 既定の図にも当たる。
+   */
+  palette?: string;
   /**
    * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
    *
@@ -2711,6 +2732,8 @@ export type BBox = {
 export type LaidDiagram = {
   id: string;
   topic: string;
+  /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
+  palette?: string;
   viewBox: { x: number; y: number; w: number; h: number };
   /**
    * 図全体の倍率 (`CdlViewport.scale` を正規化した値)。