@cardenelabs/cdl 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -5,6 +5,64 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.24.0] - 2026-09-02
+
+### Added
+
+- **見せ方を持つ箱に目印を出すようにした** (#620)
+
+  `#616` で足した `look` が消費側の画面に出なかった。 dragon の `cdl-theme.css` が
+  `node-body > rect` の `fill` を `!important` で固定しており、`look` が決めた面
+  (`none` / 薄い面 / 墨のベタ) が全て既定の面に潰れていた。
+
+  消費側は「見せ方を持つ箱」 と「持たない箱」 を区別できない。 markup に手掛かりが無かった。
+
+  `look` を持つ kind の箱に `data-cdl-look` を出す。 持たない kind には出さない
+  (空文字を出すと消費側の `:not()` が効かなくなる)。
+
+- **辺に役目を持たせ、順路を朱で引けるようにした** (#618)
+
+  辺の見せ方が 1 通りしかなく、太さも名前の置き方も図の役目に関わらず同じだった。
+  `infra-demo` は「要求が通る道」 と「App が持つ預け先」 の 2 種を持つが、どちらも同じ線で
+  描かれ、どこから読むかが決まらない。
+
+  | 足したもの | 既定 | 書くと |
+  |---|---|---|
+  | `role: "main"` | tone の色 | 「いま」 の色 (`--cdl-now`) で引く |
+  | `labelPlate: false` | 丸い下地を敷く | 字だけを線の上に置く |
+
+  線の太さの既定を下げた (光って 5 → 2.5、光らず 2.5 → 1.25)。
+  消費側 (dragon) が `!important` で 2.25 に上書きしており、箱の枠 (1.75) より太かった。
+
+  **値は 3 層を通る**。 `InfraConnection` (書き手の入口) → `edge()` (基底の組立て) →
+  `CdlEdge` (描く側) のすべてに足さないと、設定しても何も起きない。
+  当初 1 層目だけに足して黙って落ちた。
+
+- **箱の見せ方を色でなく形で選べるようにした** (#616)
+
+  箱の見せ方が全種別で同じで、違いは枠線の色と右上の絵記号だけだった。
+  色で種別を分ける形は、消費側の配色によっては読めない。 dragon の茶墨は種別の色が
+  4 つとも暗く彩度が低く、枠線の面積では差が出ない (隔たりは 18.6 以上あるが効かない)。
+
+  `KindStyle` に `look` を足し、面と枠の描き方を 5 通りから選べるようにした。
+
+  | `look` | 描き方 | 何を示すか | 当てた種別 |
+  |---|---|---|---|
+  | `outline` | 面を塗らず枠だけ | 図の外にある | `person` |
+  | `tint` | 文字色 6% の面 | 通り道 | `cdn` |
+  | `solid` | 文字色のベタ + 紙色の字 | ここが働く | `service` |
+  | `ledger` | 面 + 底に二重の罫 | 消えては困る | `queue` |
+  | `dashed` | 面を塗らず破線の枠 | 作り直せる | `cache` |
+
+  未指定は従来どおりで、`look` を書いた 5 種別だけが変わる。
+
+  **`ledger` は四角の箱にだけ効く**。 円筒や雲は形そのものが役目を示しており、底の罫を
+  足す場所が無い。 `database` は円筒なので当てていない。
+
+  **ベタ塗りでも枠は種別の色のまま**。 「光っている節の枠は種別の色」 は既存の契約で、
+  `node-styling` が守っている。 面だけを墨で塗る。
+
+
 ## [0.23.0] - 2026-09-02
 
 ### Added
@@ -1185,7 +1243,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.23.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.24.0...HEAD
+[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
 [0.21.2]: https://github.com/cardene777/cdl/compare/v0.21.1...v0.21.2

package/dist/index.cjs

@@ -9493,6 +9493,8 @@ function diagram(id, options) {
         tone: opts.tone ?? "accent",
         side: opts.side,
         style: opts.style,
+        role: opts.role,
+        labelPlate: opts.labelPlate,
         head: opts.head,
         headFill: opts.headFill,
         tailHead: opts.tailHead,
@@ -21979,6 +21981,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;
 }
@@ -21992,7 +22000,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;
@@ -22082,7 +22090,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;
@@ -22159,7 +22167,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({
@@ -22167,7 +22175,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;
@@ -22185,7 +22193,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",
@@ -22908,9 +22916,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"
@@ -22943,11 +22971,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"
@@ -22964,12 +22994,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"
@@ -23041,6 +23073,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;
@@ -23098,19 +23131,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;
@@ -23133,56 +23170,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;
@@ -30711,6 +30756,8 @@ function infrastructure(preset) {
         ...c.sub ? { sub: c.sub } : {},
         tone: c.tone ?? tone,
         style: c.style ?? style,
+        ...c.role ? { role: c.role } : {},
+        ...c.labelPlate === void 0 ? {} : { labelPlate: c.labelPlate },
         labelOffsetX: c.labelOffsetX ?? 0,
         labelOffsetY: c.labelOffsetY ?? 0
       });