@cardenelabs/cdl 0.121.0 → 0.123.0

package/src/render/interactive-panel.tsx

@@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useStat
 import type { JSX } from "react";
 import { CDL_TEXT, resolveLang, 字を差し込む, type CdlLang, type CdlTextKey } from "../lang";
 import { assertNever } from "../assert-never";
-import type { CdlDiagram, CdlInput, CdlReadout } from "../types";
+import type { CdlDiagram, CdlInput, CdlReadout, CdlTextMetrics } from "../types";
+import { resolveTextMetrics } from "../text-metrics";
 import { createInputSignals, inputDefaultValue } from "../input-signals";
 import { 選択肢の値, 選択肢の名前 } from "../input-option";
 import { createFormulaComputeds } from "../formula";
@@ -19,7 +20,7 @@ import type { Signal, Computed } from "../reactive";
 import { effect } from "../reactive";
 import { textWidth } from "../kinds/text-width";
 import { 桁で割る, 桁で省く } from "../kinds/row-align";
-import { 幅で切る } from "../kinds/box-lines";
+import { 幅で切る, 箱の字を測る } from "../kinds/box-lines";
 
 /**
  * interactive primitive (input widget / formula / scroll trigger / event handler) を SVG diagram に
@@ -685,7 +686,12 @@ export function useInteractiveIntegration(
         {readouts.length > 0 && (
           <div className="cdl-ip-group">
             {readouts.map((r) => (
-              <ReadoutWidget key={r.id} readout={r} stateOverrides={mergedStateValues} />
+              <ReadoutWidget
+                key={r.id}
+                readout={r}
+                stateOverrides={mergedStateValues}
+                textMetrics={resolveTextMetrics(diagram.textMetrics)}
+              />
             ))}
           </div>
         )}
@@ -1173,9 +1179,11 @@ function StepperWidget({
 function ReadoutWidget({
   readout,
   stateOverrides,
+  textMetrics = "proportional",
 }: {
   readout: CdlReadout;
   stateOverrides: Record<string, number | string | boolean>;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   // stacked-bar は sourceA / sourceB を持ち source を持たない、 その場合は rawValue = undefined 扱い
   const rawValue = "source" in readout ? stateOverrides[readout.source] : undefined;
@@ -1414,6 +1422,7 @@ function ReadoutWidget({
           viewW={readout.viewW ?? 280}
           viewH={readout.viewH ?? 60}
           color={readout.color ?? "#2563eb"}
+          textMetrics={textMetrics}
         />
       );
     case "radar": {
@@ -2166,6 +2175,7 @@ function ReadoutWidget({
             { status: "error", color: "#ef4444" },
           ]}
           max={readout.max ?? 10}
+          textMetrics={textMetrics}
         />
       );
     case "calendar-week":
@@ -3559,8 +3569,14 @@ function ProgressGroupReadout({
  * 札の幅は描く前に分からないので `textWidth` で見積もる。 見積りは実物以上に倒してあるため、
  * 収まる札を端に寄せることはあっても、はみ出す札を中央に残すことは無い。
  */
-function sequenceLabelAnchor(x: number, name: string, fontSize: number, viewW: number): "start" | "middle" | "end" {
-  const half = textWidth(name, fontSize) / 2;
+function sequenceLabelAnchor(
+  x: number,
+  name: string,
+  fontSize: number,
+  viewW: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): "start" | "middle" | "end" {
+  const half = textWidth(name, fontSize, 0, textMetrics) / 2;
   if (x - half < 0) return "start";
   if (x + half > viewW) return "end";
   return "middle";
@@ -3575,6 +3591,7 @@ function SequenceTimelineReadout({
   viewW,
   viewH,
   color,
+  textMetrics = "proportional",
 }: {
   id: string;
   label: string;
@@ -3584,6 +3601,7 @@ function SequenceTimelineReadout({
   viewW: number;
   viewH: number;
   color: string;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   // event parse: [[t, name], ...] または [t, t, t, ...]
   const events: { t: number; name: string }[] = [];
@@ -3636,7 +3654,13 @@ function SequenceTimelineReadout({
                 <circle cx={x} cy={trackY} r={5} fill={color} stroke="#fff" strokeWidth={1.5}>
                   <字の見出し k="readout.sequenceTimeline.title" v={{ name: e.name, t: e.t }} />
                 </circle>
-                <text x={x} y={trackY - 12} textAnchor={sequenceLabelAnchor(x, e.name, 10, viewW)} fontSize={10} fill="var(--v4-ink, #1a1f2a)">
+                <text
+                  x={x}
+                  y={trackY - 12}
+                  textAnchor={sequenceLabelAnchor(x, e.name, 10, viewW, textMetrics)}
+                  fontSize={10}
+                  fill="var(--v4-ink, #1a1f2a)"
+                >
                   {e.name}
                 </text>
                 <text x={x} y={trackY + 18} textAnchor="middle" fontSize={9} fill="var(--v4-mute, #64748b)">
@@ -7715,12 +7739,14 @@ function StatusTimelineReadout({
   value,
   colorMap,
   max,
+  textMetrics = "proportional",
 }: {
   id: string;
   label: string;
   value: string;
   colorMap: Array<{ status: string; color: string }>;
   max: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   type Event = { timestamp: string; status: string };
   const events: Event[] = [];
@@ -7757,6 +7783,7 @@ function StatusTimelineReadout({
     status === "active" || status === "idle" || status === "error"
       ? 引く(`readout.statusTimeline.${status}`)
       : status.toUpperCase();
+  const 測る = 箱の字を測る(textMetrics);
   return (
     <div className="cdl-ip-item cdl-ip-readout-status-timeline" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
@@ -7771,7 +7798,7 @@ function StatusTimelineReadout({
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
           const 字 = 区間の字(ev.status);
           // 左右に 3px ずつ余白を取る (区間の枠は幅 - 2 で描く)
-          const 描く字 = 幅で切る(字, 10, cellW - 8);
+          const 描く字 = 幅で切る(字, 10, cellW - 8, 測る);
           return (
             <g key={i} data-cdl-status-event={i} data-cdl-status={ev.status}>
               <rect x={x} y={10} width={cellW - 2} height={stripHeight} fill={c} rx={2} />

package/src/render/nodes.tsx

@@ -7,6 +7,7 @@ import { FunctionNode } from "../kinds/function";
 import { StorageNode } from "../kinds/storage";
 import { GenericNode } from "../kinds/generic";
 import { MarkStartNode, MarkEndNode } from "../kinds/terminal-mark";
+import { StationNode } from "../kinds/station";
 import { DynShapeNode } from "../kinds/dyn-shape";
 import { ChartLineNode, type ChartLineScale } from "../kinds/chart-line";
 import { ChartPieNode } from "../kinds/chart-pie";
@@ -86,7 +87,7 @@ import {
   ShapeTraderNode,
   ShapeCustomerServiceNode,
 } from "../kinds/shape-people";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import type { CdlLang } from "../lang";
 import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
 import { drawsFigureTitle } from "../layout/spec";
@@ -120,6 +121,7 @@ export function CdlNodeView({
   chartLineScale,
   関係の受け口,
   lang,
+  textMetrics,
   値の名前,
 }: {
   node: LaidNode;
@@ -131,6 +133,8 @@ export function CdlNodeView({
   値の名前?: 値の名前の表;
   /** 描画側の固定の字の言語 (#847)。 字を持つ形の部品へ渡す。 渡さない呼び方は英語で描く */
   lang?: CdlLang;
+  /** 図全体の字幅規則。測る描画部品へ明示的に渡す */
+  textMetrics?: CdlTextMetrics;
   /**
    * この phase の `draw` に載っているか (cdl#512)。 true の間だけ、 対象の種別が
    * phase の進み (`progress`) に合わせて左の起点から描かれる。
@@ -200,7 +204,13 @@ export function CdlNodeView({
         return <CardNode node={resolvedNode} active={active} />;
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
-        return <SequenceBoardNode node={resolvedNode} stateValues={stateValues} />;
+        return (
+          <SequenceBoardNode
+            node={resolvedNode}
+            stateValues={stateValues}
+            textMetrics={textMetrics}
+          />
+        );
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -224,6 +234,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-gauge":
@@ -235,6 +246,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-stacked-bar":
@@ -247,6 +259,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-slope":
@@ -258,6 +271,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-waffle":
@@ -269,11 +283,19 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-stat":
         // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の tween が担う
-        return <ChartStatNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <ChartStatNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            textMetrics={textMetrics}
+          />
+        );
       case "chart-radial":
         // 段の進みでは各輪が 12 時から開く (cdl#715)
         return (
@@ -283,6 +305,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-bar":
@@ -313,6 +336,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "funnel-stages":
@@ -323,10 +347,18 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "quadrant-matrix":
-        return <QuadrantNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <QuadrantNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            textMetrics={textMetrics}
+          />
+        );
       case "tree-hierarchy":
         return (
           <TreeHierarchyNode
@@ -335,6 +367,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "journey-map":
@@ -348,91 +381,91 @@ export function CdlNodeView({
           />
         );
       case "shape-file":
-        return <ShapeFileNode node={resolvedNode} active={active} />;
+        return <ShapeFileNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-folder":
-        return <ShapeFolderNode node={resolvedNode} active={active} />;
+        return <ShapeFolderNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-cloud":
-        return <ShapeCloudNode node={resolvedNode} active={active} />;
+        return <ShapeCloudNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-cylinder":
-        return <ShapeCylinderNode node={resolvedNode} active={active} />;
+        return <ShapeCylinderNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-hexagon":
-        return <ShapeHexagonNode node={resolvedNode} active={active} />;
+        return <ShapeHexagonNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-diamond":
-        return <ShapeDiamondNode node={resolvedNode} active={active} />;
+        return <ShapeDiamondNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-stack":
-        return <ShapeStackNode node={resolvedNode} active={active} />;
+        return <ShapeStackNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-person":
-        return <ShapePersonNode node={resolvedNode} active={active} />;
+        return <ShapePersonNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-window":
         return <ShapeWindowNode node={resolvedNode} active={active} />;
       case "shape-terminal":
         return <ShapeTerminalNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-code-block":
-        return <ShapeCodeBlockNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeCodeBlockNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-kanban-card":
-        return <ShapeKanbanCardNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeKanbanCardNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-message-bubble":
         return <ShapeMessageBubbleNode node={resolvedNode} active={active} />;
       case "shape-gear":
         return <ShapeGearNode node={resolvedNode} active={active} />;
       case "shape-server-rack":
-        return <ShapeServerRackNode node={resolvedNode} active={active} />;
+        return <ShapeServerRackNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-network-node":
-        return <ShapeNetworkNodeNode node={resolvedNode} active={active} />;
+        return <ShapeNetworkNodeNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-mobile-device":
-        return <ShapeMobileDeviceNode node={resolvedNode} active={active} />;
+        return <ShapeMobileDeviceNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-iot-sensor":
         return <ShapeIotSensorNode node={resolvedNode} active={active} />;
       case "shape-robot-arm":
         return <ShapeRobotArmNode node={resolvedNode} active={active} />;
       case "shape-satellite":
-        return <ShapeSatelliteNode node={resolvedNode} active={active} />;
+        return <ShapeSatelliteNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-smart-contract":
-        return <ShapeSmartContractNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeSmartContractNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-blockchain-block":
-        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-rpc-node":
-        return <ShapeRpcNodeNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeRpcNodeNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-wallet":
-        return <ShapeWalletNode node={resolvedNode} active={active} />;
+        return <ShapeWalletNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-nft":
-        return <ShapeNftNode node={resolvedNode} active={active} />;
+        return <ShapeNftNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-token":
-        return <ShapeTokenNode node={resolvedNode} active={active} />;
+        return <ShapeTokenNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-blockchain":
-        return <ShapeBlockchainNode node={resolvedNode} active={active} />;
+        return <ShapeBlockchainNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-bitcoin-chain":
-        return <ShapeBitcoinChainNode node={resolvedNode} active={active} />;
+        return <ShapeBitcoinChainNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-ethereum-chain":
-        return <ShapeEthereumChainNode node={resolvedNode} active={active} />;
+        return <ShapeEthereumChainNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-blockchain-node":
-        return <ShapeBlockchainNodeNode node={resolvedNode} active={active} />;
+        return <ShapeBlockchainNodeNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-bank":
-        return <ShapeBankNode node={resolvedNode} active={active} />;
+        return <ShapeBankNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-trust-bank":
-        return <ShapeTrustBankNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeTrustBankNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-payment-provider":
-        return <ShapePaymentProviderNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapePaymentProviderNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-credit-card":
-        return <ShapeCreditCardNode node={resolvedNode} active={active} />;
+        return <ShapeCreditCardNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-brokerage":
-        return <ShapeBrokerageNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeBrokerageNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-exchange":
-        return <ShapeExchangeNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeExchangeNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-atm":
-        return <ShapeAtmNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeAtmNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-website":
-        return <ShapeWebsiteNode node={resolvedNode} active={active} />;
+        return <ShapeWebsiteNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-storefront":
-        return <ShapeStorefrontNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeStorefrontNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-warehouse":
-        return <ShapeWarehouseNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeWarehouseNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-online-shop":
-        return <ShapeOnlineShopNode node={resolvedNode} active={active} />;
+        return <ShapeOnlineShopNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-cdn-edge":
-        return <ShapeCdnEdgeNode node={resolvedNode} active={active} />;
+        return <ShapeCdnEdgeNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-api-gateway":
-        return <ShapeApiGatewayNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeApiGatewayNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-auditor":
         return <ShapeAuditorNode node={resolvedNode} active={active} />;
       case "shape-regulator":
@@ -449,9 +482,20 @@ export function CdlNodeView({
         return <MarkStartNode node={resolvedNode} active={active} />;
       case "mark-end":
         return <MarkEndNode node={resolvedNode} active={active} />;
+      case "station":
+        return <StationNode node={resolvedNode} active={active} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
-        return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} 値の名前={値の名前} />;
+        return (
+          <GenericNode
+            node={resolvedNode}
+            active={active}
+            value={node.value}
+            stateValues={stateValues}
+            値の名前={値の名前}
+            textMetrics={textMetrics}
+          />
+        );
     }
   })();
   // node bounding box を node.w/h に固定するための invisible rect。
@@ -529,7 +573,7 @@ export function CdlNodeView({
         pointerEvents="none"
       />
       {inner}
-      {箱の上の語(resolvedNode)}
+      {箱の上の語(resolvedNode, textMetrics ?? "proportional")}
     </g>
   );
 }
@@ -545,8 +589,13 @@ const FIGURE_EYEBROW_SIZE = 11;
 const FIGURE_EYEBROW_LIFT = 1.1;
 
 /** 箱の幅に収める倍率。 収めないと長い語が箱の外へ出る */
-function 幅に収めた大きさ(語: string, 素の大きさ: number, 幅: number): number {
-  const 実幅 = textWidth(語, 素の大きさ, 0);
+function 幅に収めた大きさ(
+  語: string,
+  素の大きさ: number,
+  幅: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  const 実幅 = textWidth(語, 素の大きさ, 0, textMetrics);
   return 実幅 > 幅 ? (素の大きさ * 幅) / 実幅 : 素の大きさ;
 }
 
@@ -567,13 +616,16 @@ function 幅に収めた大きさ(語: string, 素の大きさ: number, 幅: num
  * 題を書かず小見出しだけを書いた図では、小見出しを題の位置に置く。 題の有無に紐付けて
  * 消すと、題を書かない図で小見出しが出なくなる。
  */
-function 箱の上の語(node: LaidNode): JSX.Element | null {
+function 箱の上の語(
+  node: LaidNode,
+  textMetrics: CdlTextMetrics = "proportional",
+): JSX.Element | null {
   if (!drawsFigureTitle(node.kind)) return null;
   const 名前 = (node.title ?? "").trim();
   const 小見出し = (node.eyebrow ?? "").trim();
   if (名前 === "" && 小見出し === "") return null;
   const 題のy = node.cy - node.h / 2 - FIGURE_TITLE_GAP;
-  const 題の大きさ = 幅に収めた大きさ(名前, FIGURE_TITLE_SIZE, node.w);
+  const 題の大きさ = 幅に収めた大きさ(名前, FIGURE_TITLE_SIZE, node.w, textMetrics);
   const 小見出しのy = 名前 === "" ? 題のy : 題のy - 題の大きさ * FIGURE_EYEBROW_LIFT;
   return (
     <>
@@ -583,7 +635,7 @@ function 箱の上の語(node: LaidNode): JSX.Element | null {
           x={node.cx}
           y={小見出しのy}
           textAnchor="middle"
-          fontSize={幅に収めた大きさ(小見出し, FIGURE_EYEBROW_SIZE, node.w)}
+          fontSize={幅に収めた大きさ(小見出し, FIGURE_EYEBROW_SIZE, node.w, textMetrics)}
           fontWeight={600}
           letterSpacing={0.6}
           fill="var(--cdl-text-dim, #5a6270)"

package/src/render/stage.tsx

@@ -455,6 +455,7 @@ export function CdlStage({
               active={activeSet.has(node.id)}
               // 描画側の固定の字の言語 (#847)。 `layout` が既定以外の時だけ `lang` を持たせる
               lang={laid.lang}
+              textMetrics={laid.textMetrics}
               関係の受け口={箱の受け口}
               drawing={描く}
               progress={描く ? 描く進み : progress}
@@ -480,6 +481,7 @@ export function CdlStage({
             key={`label-${edge.id}`}
             edge={edge}
             active={activeSet.has(edge.id)}
+            textMetrics={laid.textMetrics}
           />
         ))}
 
@@ -493,6 +495,7 @@ export function CdlStage({
                 edge={edge}
                 active={activeSet.has(edge.id)}
                 端={端}
+                textMetrics={laid.textMetrics}
               />
             )),
           )}

package/src/text-metrics.ts

@@ -0,0 +1,9 @@
+import type { CdlTextMetrics } from "./types";
+
+/**
+ * 記法などから届いた値を字幅の測り方へ直す。
+ * 完全一致する `"monospace"` 以外は既定の `"proportional"` に落とす。
+ */
+export function resolveTextMetrics(value: unknown): CdlTextMetrics {
+  return value === "monospace" ? "monospace" : "proportional";
+}

package/src/types.ts

@@ -20,6 +20,15 @@ export const TONES = ["accent", "teal", "success", "error", "warning", "info"] a
 
 export type Tone = (typeof TONES)[number];
 
+/**
+ * 図の字幅をどの規則で測るか。`"proportional"` は現在の Inter 比例幅表、`"monospace"` は
+ * 等幅書体向けの幅を使う。既定は `"proportional"`。
+ *
+ * 消費側が図を等幅書体で描く場合、比例幅で配置すると英数字の描画幅と箱・札の計算幅が
+ * 食い違うため、図単位で測り方を揃えられるようにする。
+ */
+export type CdlTextMetrics = "proportional" | "monospace";
+
 /**
  * cdl SVG に付与される data-cdl-role attribute の SSOT 型 (現在 12 role)。
  * consumer app (dragon 等) は `[data-cdl-role="<role>"]` selector で CSS を宛てる。 role を追加する時は本 union と該当 render 箇所 (kinds/*.tsx、
@@ -186,6 +195,8 @@ export const NODE_KINDS = [
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start",
   "mark-end",
+  // 路線図の駅 (#996) ... 線路上の点を小さな丸で示し、名前と説明は丸の外に置く
+  "station",
   // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
   "sequence-board",
 ] as const;
@@ -207,6 +218,18 @@ export type Side = "top" | "right" | "bottom" | "left";
  */
 export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
 
+/**
+ * 線の道筋。
+ *
+ * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
+ *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
+ * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
+ *   途中の箱は避けず、2 点が同じ高さなら横 1 本になる
+ */
+export type EdgeRouting = "default" | "back-detour" | "curve" | "metro";
+
 /** 辺の役目 (#618)。 `main` = 図の主となる道 */
 export type EdgeRole = "main";
 
@@ -506,8 +529,8 @@ export type CdlNode = {
    * 変わるのは kind の既定色を使って描かれる部分で、 枠線 / eyebrow の文字色 / icon /
    * 強調表示中の行の値。 本文の文字色と背景は変わらない。
    *
-   * 効くのは `actor` / `function` / `storage` / `event` / `card` と `person` 以降の汎用 kind の
-   * 計 26 種。 それ以外は自前の配色を持つため指定しても変わらず、 検査も通す。 効く kind の
+   * 効くのは `actor` / `function` / `storage` / `event` / `card`、`person` 以降の汎用 kind、
+   * 流れの印、路線図の駅。 それ以外は自前の配色を持つため指定しても変わらず、検査も通す。
    * 一覧は `test/node-styling.test.tsx` が実装から計算した集合と突き合わせている。
    *
    * 既定色と同じ名前を明示指定しても色が変わる kind がある (既定色の hex が `render/tone.ts`
@@ -867,8 +890,12 @@ export type CdlEdge = {
   labelOffsetX?: number;
   /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
   labelOffsetY?: number;
-  /** routing mode (default "default" = 自動 routing、 "back-detour" = back transition 用の上方 detour 強制) */
-  routing?: "default" | "back-detour";
+  /**
+   * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+   * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
+   * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
+   */
+  routing?: EdgeRouting;
   /**
    * CAR-549 SSOT ... label を edge path 上に「被せる」 か「離す」 かの制御 flag。
    * default (false or undefined) = LABEL_INIT_CLEARANCE (34 world、 CAR-630 で 26 → 34 復帰) 離して配置。
@@ -2736,6 +2763,14 @@ export type CdlDiagram = {
    * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
    */
   lang?: CdlLang;
+  /**
+   * 図の字幅を測る規則。`"proportional"` または `"monospace"` を取り、既定は
+   * `"proportional"`。
+   *
+   * 消費側が等幅書体で描く図では、比例幅の配置計算と実際の描画幅が食い違うため指定する。
+   * 型の外の値は `layout` が既定へ落とす。
+   */
+  textMetrics?: CdlTextMetrics;
   /**
    * この図がどの種類か (#645)。 書かない図は種類を持たない。
    *
@@ -2968,6 +3003,8 @@ export type LaidDiagram = {
    * 無い時は `"en"` で描く。
    */
   lang?: CdlLang;
+  /** 等幅で測る図だけが持つ。無い時は `"proportional"` */
+  textMetrics?: "monospace";
   /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
   type?: string;
   viewBox: { x: number; y: number; w: number; h: number };