@cardenelabs/cdl 0.23.0 → 0.24.0

package/dist/{render-Czv0tUon.d.cts → render-CfXUl0Yz.d.cts}

@@ -109,6 +109,8 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+type EdgeRole = "main";
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -572,6 +574,21 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /**
+     * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+     *
+     * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+     * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+     * 主となる 1 本 (または 1 続き) にだけ書く。
+     */
+    role?: EdgeRole;
+    /**
+     * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+     *
+     * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+     * 線と名前の区別が付く。
+     */
+    labelPlate?: boolean;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
     /**
@@ -2810,4 +2827,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { sequenceBoardMetrics as $, EDGE_STYLES as A, type BBox as B, type CdlDiagram as C, type EdgeReveal as D, type EdgeStyle as E, type InteractiveSignalsAccessor as F, type LaidLane as G, NODE_KINDS as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type ScrollProgressHandle as K, type LaidDiagram as L, TONES as M, type NodeKind as N, computeEventBindingKey as O, computeFormulaKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeInputSignalKey as U, computeScrollTriggerKey as V, computed as W, createInteractiveSignalsAccessor as X, createScrollProgressHandle as Y, createScrollProgressSignals as Z, hasInteractivePrimitives as _, type CdlInput as a, sequenceStepId as a0, signal as a1, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type EdgeHeadFill as f, type CdlState as g, type CdlEventTarget as h, type Computed as i, type CdlDerivedValue as j, type CdlScrollTrigger as k, type CdlDiagramViewProps as l, type LaidEdge as m, type LaidNode as n, type CdlEdge as o, CdlDiagramView as p, type CdlEventBinding as q, type CdlEventKind as r, type CdlFormula as s, type CdlPhase as t, EDGE_HEADS as u, EDGE_HEAD_DEFAULT as v, EDGE_HEAD_FILLS as w, EDGE_HEAD_FILL_DEFAULT as x, EDGE_REVEALS as y, EDGE_REVEAL_DEFAULT as z };
+export { hasInteractivePrimitives as $, EDGE_REVEAL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_STYLES as D, type EdgeStyle as E, type EdgeReveal as F, type InteractiveSignalsAccessor as G, type LaidLane as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, NODE_KINDS as K, type LaidDiagram as L, type ScrollProgressHandle as M, type NodeKind as N, TONES as O, computeEventBindingKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeFormulaKey as U, computeInputSignalKey as V, computeScrollTriggerKey as W, computed as X, createInteractiveSignalsAccessor as Y, createScrollProgressHandle as Z, createScrollProgressSignals as _, type CdlInput as a, sequenceBoardMetrics as a0, sequenceStepId as a1, signal as a2, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, EDGE_HEADS as v, EDGE_HEAD_DEFAULT as w, EDGE_HEAD_FILLS as x, EDGE_HEAD_FILL_DEFAULT as y, EDGE_REVEALS as z };

package/dist/{render-Czv0tUon.d.ts → render-CfXUl0Yz.d.ts}

@@ -109,6 +109,8 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+type EdgeRole = "main";
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -572,6 +574,21 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /**
+     * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+     *
+     * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+     * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+     * 主となる 1 本 (または 1 続き) にだけ書く。
+     */
+    role?: EdgeRole;
+    /**
+     * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+     *
+     * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+     * 線と名前の区別が付く。
+     */
+    labelPlate?: boolean;
     /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
     head?: EdgeHead;
     /**
@@ -2810,4 +2827,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { sequenceBoardMetrics as $, EDGE_STYLES as A, type BBox as B, type CdlDiagram as C, type EdgeReveal as D, type EdgeStyle as E, type InteractiveSignalsAccessor as F, type LaidLane as G, NODE_KINDS as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type ScrollProgressHandle as K, type LaidDiagram as L, TONES as M, type NodeKind as N, computeEventBindingKey as O, computeFormulaKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeInputSignalKey as U, computeScrollTriggerKey as V, computed as W, createInteractiveSignalsAccessor as X, createScrollProgressHandle as Y, createScrollProgressSignals as Z, hasInteractivePrimitives as _, type CdlInput as a, sequenceStepId as a0, signal as a1, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeHead as e, type EdgeHeadFill as f, type CdlState as g, type CdlEventTarget as h, type Computed as i, type CdlDerivedValue as j, type CdlScrollTrigger as k, type CdlDiagramViewProps as l, type LaidEdge as m, type LaidNode as n, type CdlEdge as o, CdlDiagramView as p, type CdlEventBinding as q, type CdlEventKind as r, type CdlFormula as s, type CdlPhase as t, EDGE_HEADS as u, EDGE_HEAD_DEFAULT as v, EDGE_HEAD_FILLS as w, EDGE_HEAD_FILL_DEFAULT as x, EDGE_REVEALS as y, EDGE_REVEAL_DEFAULT as z };
+export { hasInteractivePrimitives as $, EDGE_REVEAL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_STYLES as D, type EdgeStyle as E, type EdgeReveal as F, type InteractiveSignalsAccessor as G, type LaidLane as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, NODE_KINDS as K, type LaidDiagram as L, type ScrollProgressHandle as M, type NodeKind as N, TONES as O, computeEventBindingKey as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeFormulaKey as U, computeInputSignalKey as V, computeScrollTriggerKey as W, computed as X, createInteractiveSignalsAccessor as Y, createScrollProgressHandle as Z, createScrollProgressSignals as _, type CdlInput as a, sequenceBoardMetrics as a0, sequenceStepId as a1, signal as a2, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, EDGE_HEADS as v, EDGE_HEAD_DEFAULT as w, EDGE_HEAD_FILLS as x, EDGE_HEAD_FILL_DEFAULT as y, EDGE_REVEALS as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/builder.ts

@@ -15,6 +15,7 @@ import type {
   EdgeHead,
   EdgeHeadFill,
   EdgeStyle,
+  EdgeRole,
   NodeKind,
   Side,
   Tone,
@@ -1435,6 +1436,10 @@ export type DiagramBuilder = {
       tone?: Tone;
       side?: Side;
       style?: EdgeStyle;
+      /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+      role?: EdgeRole;
+      /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+      labelPlate?: boolean;
       /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
       head?: EdgeHead;
       /** 端の印の塗り (#578)。 書かなければ形ごとの既定 */
@@ -1755,6 +1760,8 @@ export function diagram(
         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,

package/src/kinds/generic.tsx

@@ -39,12 +39,71 @@ type KindStyle = {
   icon: string;
   /** shape: rect (default) / cylinder / cloud / diamond / hexagon */
   shape?: "rect" | "cylinder" | "cloud" | "diamond" | "hexagon";
+  /**
+   * 面と枠の描き方 (#616)。 未指定は従来どおり。
+   *
+   * 色で kind を分ける形は、 消費側の配色によっては読めない。 dragon の茶墨は
+   * kind の色が 4 つとも暗く彩度が低く、 枠線や細い帯の面積では差が出ない
+   * (隔たりは 18.6 以上あるが、 面積が小さいと効かない)。 形で分ける口を用意する。
+   */
+  look?: NodeLook;
 };
 
+/** 箱の見せ方。 何を示すかは値の名前が持つ */
+export type NodeLook =
+  /** 図の外にある = 面を塗らず枠だけ */
+  | "outline"
+  /** 通り道 = 薄い面。 止まらず抜ける */
+  | "tint"
+  /** ここが働く = ベタ塗り。 図で最も重い */
+  | "solid"
+  /** 消えては困る = 底を二重の罫で締める */
+  | "ledger"
+  /** 失っても作り直せる = 破線の枠 */
+  | "dashed";
+
+/** 薄い面の濃さ。 `color-mix` を読めない環境では第 2 引数の色に落ちる */
+const TINT_FILL = "color-mix(in srgb, var(--cdl-text, #1a1f2a) 6%, transparent)";
+
+/**
+ * `look` から面と枠を決める。
+ *
+ * 未指定は従来どおり (面 = node-fill、 枠 = 光れば kind の色 / 光らなければ divider)。
+ * ここを通らない kind の出力は 1 文字も変わらない。
+ */
+export function lookPaint(look: NodeLook | undefined, accent: string, active: boolean): {
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  dash?: string;
+  /** ベタ塗りの上では字を紙の色で抜く */
+  onSolid: boolean;
+} {
+  const 既定枠 = active ? accent : "var(--cdl-divider, #d4d4d8)";
+  const 既定太さ = active ? 3 : 1.25;
+  switch (look) {
+    case "outline":
+      return { fill: "none", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "tint":
+      return { fill: TINT_FILL, stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "solid":
+      // 枠は従来どおり (光れば kind の色)。 面だけを墨で塗る = 「光っている節の枠は kind の色」
+      // は既存の契約で、 `node-styling` が守っている
+      return { fill: "var(--cdl-text, #1a1f2a)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: true };
+    case "ledger":
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+    case "dashed":
+      return { fill: "none", stroke: 既定枠, strokeWidth: 既定太さ, dash: "6 4", onSolid: false };
+    default:
+      return { fill: "var(--cdl-node-fill, #ffffff)", stroke: 既定枠, strokeWidth: 既定太さ, onSolid: false };
+  }
+}
+
 // 各 kind の visual style (icon は heroicons / lucide 風の minimal SVG path)
 const STYLES: Partial<Record<NodeKind, KindStyle>> = {
   // 人系
   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",
@@ -78,11 +137,13 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
     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",
@@ -99,6 +160,7 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
     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",
@@ -106,6 +168,7 @@ const STYLES: Partial<Record<NodeKind, KindStyle>> = {
 
   // アプリ系
   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",
@@ -188,6 +251,7 @@ export function GenericNode({
 
   // shape 別 path
   const shape = style.shape ?? "rect";
+  const paint = lookPaint(style.look, style.accent, active);
   const shapeEl = (() => {
     if (shape === "cylinder") {
       // 円柱 (top ellipse + side + bottom ellipse)
@@ -267,16 +331,23 @@ export function GenericNode({
     }
     // default rect
     return (
-      <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}
-      />
+      <>
+        <rect
+          x={0}
+          y={0}
+          width={w}
+          height={h}
+          rx={18}
+          fill={paint.fill}
+          stroke={paint.stroke}
+          strokeWidth={paint.strokeWidth}
+          strokeDasharray={paint.dash}
+        />
+        {/* 台帳 = 底を二重の罫で締める。 消えては困る物という約束を形で示す (#616) */}
+        {style.look === "ledger" && (
+          <line x1={1} y1={h - 7} x2={w - 1} y2={h - 7} stroke={paint.stroke} strokeWidth={1} />
+        )}
+      </>
     );
   })();
 
@@ -332,7 +403,14 @@ export function GenericNode({
   const dominantBaseline = centered ? ("middle" as const) : undefined;
 
   return (
-    <g transform={`translate(${x} ${y})`} data-cdl-role="node-body">
+    <g
+      transform={`translate(${x} ${y})`}
+      data-cdl-role="node-body"
+      /* 見せ方を持つ箱だけに出す目印 (#620)。 消費側が `:not([data-cdl-look])` で
+         従来どおりの箱だけを上書きの対象にできる。 持たない kind には出さない
+         = 空文字を出すと選択子が効かなくなる */
+      data-cdl-look={style.look}
+    >
       {shapeEl}
       {/* icon */}
       <g transform={`translate(${iconX} ${iconY}) scale(1)`} data-cdl-role="node-kind-icon">
@@ -340,15 +418,15 @@ export function GenericNode({
         <path d={style.icon} fill={style.eyebrowColor} opacity={0.7} transform="scale(1)" />
       </g>
       {node.eyebrow && (
-        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
+        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
           {node.eyebrow}
         </text>
       )}
-      <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
+      <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={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
         {node.title}
       </text>
       {node.subtitle && (
-        <text x={textX} y={subtitleY} fontSize={17} fill="var(--cdl-text-dim, #5a6270)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+        <text x={textX} y={subtitleY} fontSize={17} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
           {node.subtitle}
         </text>
       )}

package/src/presets.ts

@@ -11,7 +11,7 @@ import {
   type SequenceBoardMessage,
   type SequenceBoardMessageKind,
 } from "./kinds/sequence-board-metrics";
-import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber } from "./types";
+import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber, EdgeRole } from "./types";
 
 /**
  * 状態を読む書き方 (`{名前}`)。
@@ -1167,6 +1167,10 @@ export 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) */
@@ -1255,6 +1259,8 @@ export function infrastructure(preset: InfrastructurePreset): InfrastructureBuil
         ...(c.sub ? { sub: c.sub } : {}),
         tone: c.tone ?? tone,
         style: c.style ?? style,
+        ...(c.role ? { role: c.role } : {}),
+        ...(c.labelPlate === undefined ? {} : { labelPlate: c.labelPlate }),
         labelOffsetX: c.labelOffsetX ?? 0,
         labelOffsetY: c.labelOffsetY ?? 0,
       });

package/src/render/edges.tsx

@@ -3,6 +3,28 @@ import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type LaidEdge } from "../typ
 import { edgeHeadMarkerId } from "./edge-head";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { hasTone, toneColor } from "./tone";
+import type { EdgeRole, Tone } from "../types";
+
+/**
+ * 辺の色 (#618)。 役目を書いた辺だけ「いま」 の色で引く。
+ *
+ * 図の中に道が 2 種 (主となる 1 本と、 そこから枝分かれする預け先) ある時、 どちらも
+ * 同じ色だとどこから読むかが決まらない。 主となる道にだけ別の色を当てて順番を作る。
+ */
+/**
+ * 辺の太さの既定 (#618)。
+ *
+ * 元は光って 5 / 光らず 2.5 で、 消費側 (dragon) が `!important` で 2.25 に上書きしていた。
+ * 実際に画面へ出る 2.25 は箱の枠 (1.75) より太く、 線が箱より前に出ていた。
+ * 箱の枠と釣り合う細さへ下げる。
+ */
+export function defaultEdgeWidth(active: boolean): number {
+  return active ? 2.5 : 1.25;
+}
+
+export function edgeColor(edge: { tone: Tone; role?: EdgeRole }): string {
+  return edge.role === "main" ? "var(--cdl-now, #c0421f)" : toneColor(edge.tone);
+}
 import { EDGE_LABEL_TEXT, fontFamilyAttr, type EdgeLabelLine } from "../label-text";
 import { interpolate, pathSubpath, resolveNumericAttr, shrinkPathEnd } from "./utils";
 
@@ -39,7 +61,7 @@ export function CdlEdgeView({
   progress: number;
   stateValues?: Record<string, string>;
 }): JSX.Element {
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
   // 静的な図では全 edge が同じ色になり、 因果の向き (警戒 = 赤 / 良好 = 緑) が線から読めなかった。
   // 光っている / いないの区別は、 実線は太さ (5 対 2.5) と線種 (実線対破線)、 点線は太さ (5 対 4)
@@ -171,7 +193,7 @@ function SolidEdgePath({
   // 伸ばすのは初めて出る段だけ (#584)。 光っているかで引くと、光り続ける図で毎段引き直される
   const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
   // signal binding: widthBind / strokeBind / dashOffsetBind (CAR edge-signal-binding)
-  const defaultWidth = active ? 5 : 2.5;
+  const defaultWidth = defaultEdgeWidth(active);
   const boundWidth = edge.widthBind && stateValues
     ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth)
     : defaultWidth;
@@ -269,7 +291,7 @@ export function CdlEdgeGlowView({
   active: boolean;
 }): JSX.Element | null {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return <EdgeGlowCircles color={color} edgeId={edge.id} />;
 }
 
@@ -286,7 +308,7 @@ export function CdlEdgeLabelView({
   // 空 label でも rect + text で 12.5x12.5 の小 marker が残り、 dragon sweep で
   // node bbox と数十 px² の実測 overlap を生む (mind-demo 61px² 事象)。
   if (!hasRenderedLabel(edge)) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   // SSOT = spec.ts の computeLabelBBoxWorld (CAR-431 で render / layout / predict-bbox 3 箇所の
   // bbox 計算 drift を解消)。 pill h / w / padding / boxLeftX / boxTopY は本 helper 経由で取得、
   // <g transform="translate(labelX, labelY)"> 内 rect は相対座標なので world x/y を helper から
@@ -312,19 +334,22 @@ export function CdlEdgeLabelView({
       data-cdl-edge-label-text={edge.label}
       data-cdl-edge-sub-text={edge.sub ?? ""}
     >
-      <rect
-        data-cdl-role="edge-label-bg"
-        x={boxLeftX}
-        y={boxTopY}
-        width={boxW}
-        height={boxH}
-        rx={10}
-        fill="var(--cdl-label-bg, #ffffff)"
-        stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
-        strokeOpacity={active ? 0.9 : 0.55}
-        strokeWidth={1.5}
-        opacity={active ? 1 : 0.92}
-      />
+      {/* 下地は既定で敷く。 丸い下地は箱と同じ形なので、 罫の細い図では外せるようにした (#618) */}
+      {edge.labelPlate !== false && (
+        <rect
+          data-cdl-role="edge-label-bg"
+          x={boxLeftX}
+          y={boxTopY}
+          width={boxW}
+          height={boxH}
+          rx={10}
+          fill="var(--cdl-label-bg, #ffffff)"
+          stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
+          strokeOpacity={active ? 0.9 : 0.55}
+          strokeWidth={1.5}
+          opacity={active ? 1 : 0.92}
+        />
+      )}
       <text
         data-cdl-role="edge-label"
         x={textX}

package/src/types.ts

@@ -134,6 +134,9 @@ export type Side = "top" | "right" | "bottom" | "left";
  */
 export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
 
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+export type EdgeRole = "main";
+
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -637,6 +640,21 @@ export type CdlEdge = {
   side?: Side;
   /** visual style、 default "solid" */
   style?: EdgeStyle;
+  /**
+   * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+   *
+   * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+   * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+   * 主となる 1 本 (または 1 続き) にだけ書く。
+   */
+  role?: EdgeRole;
+  /**
+   * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+   *
+   * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+   * 線と名前の区別が付く。
+   */
+  labelPlate?: boolean;
   /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
   head?: EdgeHead;
   /**