@cardenelabs/cdl 0.23.0 → 0.24.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 EdgeHead, f as EdgeHeadFill, g as CdlState, h as CdlEventTarget, i as Computed, j as CdlDerivedValue, k as CdlScrollTrigger, L as LaidDiagram, l as CdlDiagramViewProps, m as LaidEdge, n as LaidNode, o as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Czv0tUon.cjs';
-export { p as CdlDiagramView, q as CdlEventBinding, r as CdlEventKind, s as CdlFormula, t as CdlPhase, u as EDGE_HEADS, v as EDGE_HEAD_DEFAULT, w as EDGE_HEAD_FILLS, x as EDGE_HEAD_FILL_DEFAULT, y as EDGE_REVEALS, z as EDGE_REVEAL_DEFAULT, A as EDGE_STYLES, D as EdgeReveal, I as InteractiveHandlerMap, F as InteractiveSignalsAccessor, G as LaidLane, H as NODE_KINDS, K as ScrollProgressHandle, M as TONES, O as computeEventBindingKey, P as computeFormulaKey, U as computeInputSignalKey, V as computeScrollTriggerKey, W as computed, X as createInteractiveSignalsAccessor, Y as createScrollProgressHandle, Z as createScrollProgressSignals, _ as hasInteractivePrimitives, $ as sequenceBoardMetrics, a0 as sequenceStepId, a1 as signal } from './render-Czv0tUon.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-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 { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1030,6 +1030,10 @@ type DiagramBuilder = {
         tone?: Tone;
         side?: Side;
         style?: EdgeStyle;
+        /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+        role?: EdgeRole;
+        /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+        labelPlate?: boolean;
         /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
         head?: EdgeHead;
         /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -3210,6 +3214,10 @@ type InfraConnection = {
     sub?: string;
     tone?: Tone;
     style?: EdgeStyle;
+    /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+    role?: EdgeRole;
+    /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+    labelPlate?: boolean;
     /** label の水平方向 fine offset (default 0)、 preset 交互 ±60 を override */
     labelOffsetX?: number;
     /** label の垂直方向 fine offset (default 0、 preset 交互 ±60 を override) */

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 EdgeHead, f as EdgeHeadFill, g as CdlState, h as CdlEventTarget, i as Computed, j as CdlDerivedValue, k as CdlScrollTrigger, L as LaidDiagram, l as CdlDiagramViewProps, m as LaidEdge, n as LaidNode, o as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Czv0tUon.js';
-export { p as CdlDiagramView, q as CdlEventBinding, r as CdlEventKind, s as CdlFormula, t as CdlPhase, u as EDGE_HEADS, v as EDGE_HEAD_DEFAULT, w as EDGE_HEAD_FILLS, x as EDGE_HEAD_FILL_DEFAULT, y as EDGE_REVEALS, z as EDGE_REVEAL_DEFAULT, A as EDGE_STYLES, D as EdgeReveal, I as InteractiveHandlerMap, F as InteractiveSignalsAccessor, G as LaidLane, H as NODE_KINDS, K as ScrollProgressHandle, M as TONES, O as computeEventBindingKey, P as computeFormulaKey, U as computeInputSignalKey, V as computeScrollTriggerKey, W as computed, X as createInteractiveSignalsAccessor, Y as createScrollProgressHandle, Z as createScrollProgressSignals, _ as hasInteractivePrimitives, $ as sequenceBoardMetrics, a0 as sequenceStepId, a1 as signal } from './render-Czv0tUon.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-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 { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1030,6 +1030,10 @@ type DiagramBuilder = {
         tone?: Tone;
         side?: Side;
         style?: EdgeStyle;
+        /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+        role?: EdgeRole;
+        /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+        labelPlate?: boolean;
         /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
         head?: EdgeHead;
         /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -3210,6 +3214,10 @@ type InfraConnection = {
     sub?: string;
     tone?: Tone;
     style?: EdgeStyle;
+    /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+    role?: EdgeRole;
+    /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+    labelPlate?: boolean;
     /** label の水平方向 fine offset (default 0)、 preset 交互 ±60 を override */
     labelOffsetX?: number;
     /** label の垂直方向 fine offset (default 0、 preset 交互 ±60 を override) */

package/dist/index.js

@@ -9491,6 +9491,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,
@@ -21977,6 +21979,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;
 }
@@ -21990,7 +21998,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;
@@ -22080,7 +22088,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;
@@ -22157,7 +22165,7 @@ function CdlEdgeGlowView({
   active
 }) {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return /* @__PURE__ */ jsx(EdgeGlowCircles, { color, edgeId: edge.id });
 }
 function CdlEdgeLabelView({
@@ -22165,7 +22173,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;
@@ -22183,7 +22191,7 @@ function CdlEdgeLabelView({
       "data-cdl-edge-label-text": edge.label,
       "data-cdl-edge-sub-text": edge.sub ?? "",
       children: [
-        /* @__PURE__ */ jsx(
+        edge.labelPlate !== false && /* @__PURE__ */ jsx(
           "rect",
           {
             "data-cdl-role": "edge-label-bg",
@@ -22906,9 +22914,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"
@@ -22941,11 +22969,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"
@@ -22962,12 +22992,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"
@@ -23039,6 +23071,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;
@@ -23096,19 +23129,23 @@ function GenericNode({
         circles.map((c, i) => /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ 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__ */ 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;
@@ -23131,56 +23168,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__ */ jsxs("g", { transform: `translate(${x} ${y})`, "data-cdl-role": "node-body", children: [
-    shapeEl,
-    /* @__PURE__ */ jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
-      /* @__PURE__ */ jsx("rect", { width: 24, height: 24, fill: "transparent" }),
-      /* @__PURE__ */ jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
-    ] }),
-    node.eyebrow && /* @__PURE__ */ jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
-    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
-        /* @__PURE__ */ 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__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `translate(${x} ${y})`,
+      "data-cdl-role": "node-body",
+      "data-cdl-look": style.look,
+      children: [
+        shapeEl,
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
+          /* @__PURE__ */ jsx("rect", { width: 24, height: 24, fill: "transparent" }),
+          /* @__PURE__ */ jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
+        ] }),
+        node.eyebrow && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("g", { children: splits.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${rowBaselineY(node.kind, i)})`, children: [
+            /* @__PURE__ */ 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__ */ 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;
@@ -30709,6 +30754,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
       });