@cardenelabs/cdl 0.23.0 → 0.25.0

package/dist/react.cjs

@@ -629,6 +629,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;
 }
@@ -8980,6 +8986,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,
@@ -9489,6 +9501,12 @@ function edgeHeadPaint(head, fill, color) {
   }
   return { fill: color, stroke: "none" };
 }
+function defaultEdgeWidth(active) {
+  return active ? 2.5 : 1.25;
+}
+function edgeColor(edge) {
+  return edge.role === "main" ? "var(--cdl-now, #c0421f)" : toneColor(edge.tone);
+}
 function opacityAttr(opacity) {
   return opacity < 1 ? opacity : void 0;
 }
@@ -9502,7 +9520,7 @@ function CdlEdgeView({
   progress,
   stateValues
 }) {
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   const \u7AEF\u306E\u540D\u524D = (h, f) => {
     const \u5F62 = h ?? EDGE_HEAD_DEFAULT;
     if (\u5F62 === "none") return void 0;
@@ -9592,7 +9610,7 @@ function SolidEdgePath({
   stateValues
 }) {
   const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
-  const defaultWidth = active ? 5 : 2.5;
+  const defaultWidth = defaultEdgeWidth(active);
   const boundWidth = edge.widthBind && stateValues ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth) : defaultWidth;
   const boundStroke = edge.strokeBind && stateValues ? interpolate(edge.strokeBind, stateValues) : color;
   const boundDashOffset = edge.dashOffsetBind && stateValues ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0) : void 0;
@@ -9669,7 +9687,7 @@ function CdlEdgeGlowView({
   active
 }) {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return /* @__PURE__ */ jsxRuntime.jsx(EdgeGlowCircles, { color, edgeId: edge.id });
 }
 function CdlEdgeLabelView({
@@ -9677,7 +9695,7 @@ function CdlEdgeLabelView({
   active
 }) {
   if (!hasRenderedLabel(edge)) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   const bbox = computeLabelBBoxWorld(edge);
   const boxW = bbox.w;
   const boxH = bbox.h;
@@ -9695,7 +9713,7 @@ function CdlEdgeLabelView({
       "data-cdl-edge-label-text": edge.label,
       "data-cdl-edge-sub-text": edge.sub ?? "",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        edge.labelPlate !== false && /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
           {
             "data-cdl-role": "edge-label-bg",
@@ -10308,6 +10326,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)。 従来の箱は題の下に区切り線が来るので
     // 置き場が無い
@@ -10415,9 +10452,29 @@ function StorageNode({
     })
   ] });
 }
+var TINT_FILL = "color-mix(in srgb, var(--cdl-text, #1a1f2a) 6%, transparent)";
+function lookPaint(look, accent, active) {
+  const \u65E2\u5B9A\u67A0 = active ? accent : "var(--cdl-divider, #d4d4d8)";
+  const \u65E2\u5B9A\u592A\u3055 = active ? 3 : 1.25;
+  switch (look) {
+    case "outline":
+      return { fill: "none", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+    case "tint":
+      return { fill: TINT_FILL, stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+    case "solid":
+      return { fill: "var(--cdl-text, #1a1f2a)", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: true };
+    case "ledger":
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+    case "dashed":
+      return { fill: "none", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, dash: "6 4", onSolid: false };
+    default:
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: \u65E2\u5B9A\u67A0, strokeWidth: \u65E2\u5B9A\u592A\u3055, onSolid: false };
+  }
+}
 var STYLES = {
   // 人系
   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"
@@ -10450,11 +10507,13 @@ var STYLES = {
     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"
@@ -10471,12 +10530,14 @@ var STYLES = {
     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"
   },
   // アプリ系
   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"
@@ -10548,6 +10609,7 @@ function GenericNode({
   const w = node.w;
   const h = node.h;
   const shape = style.shape ?? "rect";
+  const paint = lookPaint(style.look, style.accent, active);
   const shapeEl = (() => {
     if (shape === "cylinder") {
       const rx = w / 2;
@@ -10605,19 +10667,23 @@ function GenericNode({
         circles.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c.cx, cy: c.cy, r: c.r - (active ? 1.5 : 0.75), fill: "var(--cdl-node-fill, #ffffff)" }, `mask-${i}`))
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "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
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: 0,
+          y: 0,
+          width: w,
+          height: h,
+          rx: 18,
+          fill: paint.fill,
+          stroke: paint.stroke,
+          strokeWidth: paint.strokeWidth,
+          strokeDasharray: paint.dash
+        }
+      ),
+      style.look === "ledger" && /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 1, y1: h - 7, x2: w - 1, y2: h - 7, stroke: paint.stroke, strokeWidth: 1 })
+    ] });
   })();
   const resolvedValue = value !== void 0 ? interpolate(value, stateValues) : void 0;
   const hasRows = (node.rows?.length ?? 0) > 0;
@@ -10640,56 +10706,64 @@ function GenericNode({
   const iconX = centered ? w / 2 + 40 : w - 48;
   const iconY = centered ? h / 2 - 44 - \u7D75\u306E\u82AF : 18 + cylinderShift;
   const dominantBaseline = centered ? "middle" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, "data-cdl-role": "node-body", children: [
-    shapeEl,
-    /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 24, height: 24, fill: "transparent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
-    ] }),
-    node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: textX, y: titleY, fontSize: 20, fontWeight: 700, fill: "var(--cdl-text, #1a1f2a)", textAnchor, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.title }),
-    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: node.subtitle }),
-    resolvedValue && /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
-      {
-        x: w - 20,
-        y: h - 24,
-        fontSize: 32,
-        fontWeight: 700,
-        textAnchor: "end",
-        fill: "var(--cdl-text, #1a1f2a)",
-        style: { fontFamily: "'JetBrains Mono', monospace" },
-        children: resolvedValue
-      }
-    ),
-    node.rows && node.rows.length > 0 && (() => {
-      const resolved = node.rows.map((row) => interpolate(row, stateValues));
-      const splits = resolved.map(splitRow);
-      const leftMaxWidth = splits.reduce(
-        (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
-        0
-      );
-      const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;
-      return /* @__PURE__ */ jsxRuntime.jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-row", "data-cdl-row-index": i, x: ROW_PAD_X_PX, y: 0, fontSize: 18, fill: "var(--cdl-text-dim, #5a6270)", children: s.left }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${x} ${y})`,
+      "data-cdl-role": "node-body",
+      "data-cdl-look": style.look,
+      children: [
+        shapeEl,
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 24, height: 24, fill: "transparent" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
+        ] }),
+        node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
+        /* @__PURE__ */ jsxRuntime.jsx("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, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.title }),
+        node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: node.subtitle }),
+        resolvedValue && /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
-            "data-cdl-role": "node-row",
-            "data-cdl-row-index": i,
-            x: rightColX,
-            y: 0,
-            fontSize: 21,
+            x: w - 20,
+            y: h - 24,
+            fontSize: 32,
             fontWeight: 700,
-            textAnchor: "start",
+            textAnchor: "end",
             fill: "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: s.right
+            children: resolvedValue
           }
-        )
-      ] }, i)) });
-    })()
-  ] });
+        ),
+        node.rows && node.rows.length > 0 && (() => {
+          const resolved = node.rows.map((row) => interpolate(row, stateValues));
+          const splits = resolved.map(splitRow);
+          const leftMaxWidth = splits.reduce(
+            (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
+            0
+          );
+          const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;
+          return /* @__PURE__ */ jsxRuntime.jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-row", "data-cdl-row-index": i, x: ROW_PAD_X_PX, y: 0, fontSize: 18, fill: "var(--cdl-text-dim, #5a6270)", children: s.left }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "node-row",
+                "data-cdl-row-index": i,
+                x: rightColX,
+                y: 0,
+                fontSize: 21,
+                fontWeight: 700,
+                textAnchor: "start",
+                fill: "var(--cdl-text, #1a1f2a)",
+                style: { fontFamily: "'JetBrains Mono', monospace" },
+                children: s.right
+              }
+            )
+          ] }, i)) });
+        })()
+      ]
+    }
+  );
 }
 var MARK_INNER_RATIO = 0.56;
 var RING_WIDTH_ACTIVE = 6;
@@ -17118,6 +17192,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(