@cardenelabs/cdl 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -5,6 +5,51 @@ 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

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,
@@ -22809,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)。 従来の箱は題の下に区切り線が来るので
     // 置き場が無い
@@ -29656,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(
@@ -30529,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;
@@ -30565,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);