@cardenelabs/cdl 0.24.0 → 0.26.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 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-CfXUl0Yz.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-CfXUl0Yz.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;
@@ -1206,6 +1206,10 @@ declare function diagram(id: string, options: {
      * `"exclude"` を付ける。 詳細は `CdlDiagram.structuredData` の doc 参照。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
+     */
+    palette?: string;
 }): DiagramBuilder;
 
 /**
@@ -3069,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;
@@ -3339,6 +3359,17 @@ type ClassDiagramPreset = {
      * 帯ではなく **箱** の幅。 帯は `箱の幅 + 余白 × 2` で宣言する。
      */
     classWidth?: number;
+    /**
+     * 行に 1 行おきの縞を敷くか (既定 = 敷く、 #627)。
+     *
+     * クラス図の箱は ER 図と同じ作り (行頭の印 + 左に名前 + 右に型) をしており、名前と型が
+     * 離れて並ぶので行を横に追う目印が要る。 `er()` と同じ既定にする。
+     */
+    rowStripe?: boolean;
+    /**
+     * 図の配色の名前 (#627)。 描き手は色を持たないので、名前をそのまま markup に出す。
+     */
+    palette?: string;
 };
 type ClassDiagramBuilder = {
     class: (c: UmlClass) => ClassDiagramBuilder;

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 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-CfXUl0Yz.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-CfXUl0Yz.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;
@@ -1206,6 +1206,10 @@ declare function diagram(id: string, options: {
      * `"exclude"` を付ける。 詳細は `CdlDiagram.structuredData` の doc 参照。
      */
     structuredData?: "extract" | "exclude";
+    /**
+     * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
+     */
+    palette?: string;
 }): DiagramBuilder;
 
 /**
@@ -3069,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;
@@ -3339,6 +3359,17 @@ type ClassDiagramPreset = {
      * 帯ではなく **箱** の幅。 帯は `箱の幅 + 余白 × 2` で宣言する。
      */
     classWidth?: number;
+    /**
+     * 行に 1 行おきの縞を敷くか (既定 = 敷く、 #627)。
+     *
+     * クラス図の箱は ER 図と同じ作り (行頭の印 + 左に名前 + 右に型) をしており、名前と型が
+     * 離れて並ぶので行を横に追う目印が要る。 `er()` と同じ既定にする。
+     */
+    rowStripe?: boolean;
+    /**
+     * 図の配色の名前 (#627)。 描き手は色を持たないので、名前をそのまま markup に出す。
+     */
+    palette?: string;
 };
 type ClassDiagramBuilder = {
     class: (c: UmlClass) => ClassDiagramBuilder;

package/dist/index.js

@@ -11482,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] } : {},
@@ -11792,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;
 }
@@ -20256,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,
@@ -22750,6 +22764,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 }) {
@@ -22807,6 +22822,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__ */ 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)。 従来の箱は題の下に区切り線が来るので
     // 置き場が無い
@@ -29654,6 +29688,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(
@@ -30527,7 +30562,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;
@@ -30563,7 +30599,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);
@@ -30794,7 +30833,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 = [];
@@ -30842,7 +30882,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);