@cardenelabs/cdl 0.24.0 → 0.26.0

package/CHANGELOG.md

@@ -5,6 +5,78 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.26.0] - 2026-09-03
+
+### Added
+
+- **クラス図の箱にも行の縞と配色を通した** (#627)
+
+  クラス図の箱は ER 図と同じ作り (行頭の印 + 左に名前 + 右に型) をしている。
+  名前と型が離れて並ぶので、行を横に追う目印が要るのは ER 図と同じだった。
+
+  `classDiagram` に `rowStripe` と `palette` を足し、既定を `er` と揃えた。
+  どちらも書けば上書きでき、`rowStripe: false` で縞を外せる。
+
+### Changed
+
+- **行が 1 つの箱には縞を敷かなくなった** (#627)
+
+  縞の役目は「隣り合う行を見分ける」 こと。
+  1 行しか無い箱には見分ける相手が居ないので、敷くとその 1 行が「主役」 に見える。
+
+  実際にクラス図へ当てて確かめると、1 行の箱 (`Auditable` / `Sku`) で縞が強調に読めた。
+  2 行以上の箱では意図どおり行の区切りとして読めた。
+
+  閾値ではなく **役目から導いた規則** なので、図種を増やしても同じ判断ができる。
+  判定は描き手 (`storage.tsx`) が持つ = 組み立て器ごとに書くと、次の図種で取り残される。
+
+  ER 図にも同じ規則が効く (1 行の表で縞が消える)。
+
+## [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
@@ -1243,7 +1315,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.24.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.26.0...HEAD
+[0.26.0]: https://github.com/cardene777/cdl/compare/v0.25.0...v0.26.0
+[0.25.0]: https://github.com/cardene777/cdl/compare/v0.24.0...v0.25.0
 [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

package/dist/index.cjs

@@ -11484,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] } : {},
@@ -11794,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;
 }
@@ -20258,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,
@@ -22752,6 +22766,7 @@ var ROW_GLYPH_CX = ROW_PAD_X_PX + ROW_GLYPH_HALF + 1;
 var ROW_GLYPH_LEAD = 40;
 var ROW_TYPE_FONT = 22;
 var SUBTITLE_BASELINE = 118;
+var STRIPE_MIN_ROWS = 2;
 var SUBTITLE_FONT = 20;
 var UNDERLINE_DROP = 7;
 function RowGlyph({ mark, x, y, color }) {
@@ -22809,6 +22824,25 @@ function StorageNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    node.rowStripe && rows.length >= STRIPE_MIN_ROWS && 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)。 従来の箱は題の下に区切り線が来るので
     // 置き場が無い
@@ -29656,6 +29690,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(
@@ -30529,7 +30564,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;
@@ -30565,7 +30601,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);
@@ -30796,7 +30835,8 @@ function stripAccess(row) {
 function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   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 classes = [];
   const phaseActivate = [];
   const \u7BB1 = [];
@@ -30844,7 +30884,9 @@ function classDiagram(preset) {
           // 種類の札は **書いた時だけ** 出す (#578)。 「クラス」 と書いた札は箱がクラスで
           // あることしか言わず、図の中の全ての箱に同じ字が並ぶ
           ...m.c.stereotype ? { eyebrow: m.c.stereotype } : {},
-          ...m.rows.length > 0 ? { rows: m.rows, rowMarks: m.rowMarks } : {}
+          ...m.rows.length > 0 ? { rows: m.rows, rowMarks: m.rowMarks } : {},
+          // 縞は行を持つ箱にだけ敷く (#627)。 行が無い箱に書いても描き手が読まない
+          ...m.rows.length > 0 && \u7E1E\u3092\u6577\u304F ? { rowStripe: true } : {}
         });
         classes.push(m.c.id);
         phaseActivate.push(m.c.id);