@cardenelabs/cdl 0.74.0 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.74.0",
+  "version": "0.75.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/kinds/shape-blockchain.tsx

@@ -56,6 +56,19 @@ const CHAIN_BLOCK_H = 66;
 const CHAIN_LINK_W = 12;
 const CHAIN_SHADOW = 3;
 const CHAIN_BLOCK_SW = 2.5;
+/** 連鎖の箱の頭の帯の高さ。 番号がここに乗る (#887 で打ち消しの帯に使うため定数へ出した) */
+const CHAIN_HEAD_H = 16;
+/** 箱の中で字が使える幅。 左右に 4 ずつ余白を置く */
+const CHAIN_TEXT_W = CHAIN_BLOCK_W - 8;
+/** 箱の中の 2 行 (中央の記号と下の字) の baseline の間隔 */
+const CHAIN_ROW_GAP = 14;
+/** 連鎖の箱の中の字の指定 (#887 で打ち消しの計算に使うため定数へ出した) */
+const CHAIN_NO_SIZE = 10;
+const CONTRACT_CALL_SIZE = 11;
+const NFT_ID_SIZE = 15;
+const CHAIN_HASH_SIZE = 7;
+const BTC_NO_SIZE = 9;
+const ETH_NO_SIZE = 9;
 
 const NODE_HEX_R = 44;
 const NODE_PEER_R = 12;
@@ -223,7 +236,23 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
     gearPts.push(`${gearCx + Math.cos(a3) * gearTipR},${gearCy + Math.sin(a3) * gearTipR}`);
     gearPts.push(`${gearCx + Math.cos(a4) * gearBodyR},${gearCy + Math.sin(a4) * gearBodyR}`);
   }
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 呼び出し行は書類の下寄りに 1 行だけ置くので、
+   * 幅は書類の内側 (左右 16 ずつ)、高さは行を並べる間隔 18 を使う。
+   *
+   * 字引きで日英が切り替わる (`function execute()` 18 字 と 自動で実行する 7 字) ため、
+   * 描く字そのものを渡して幅を数える。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    {
+      text: 字引("smartContract.call"),
+      size: CONTRACT_CALL_SIZE,
+      帯: { 幅: docW - 32, 高さ: 18 },
+    },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       <path data-cdl-role="node-body" d={path} {...frame} strokeLinejoin="round" />
       <path d={foldPath} fill="none" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
@@ -232,7 +261,7 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
         <rect key={i} x={x + 16} y={ly - 3} width={docW - 32 - i * 22} height={5} rx={1} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.7} stroke="none" />
       ))}
       {/* function signature */}
-      <text x={x + 16} y={y + docH - 46} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-tone-accent, #2d6a8f)">
+      <text data-cdl-counter-scaled="1" x={x + 16} y={y + docH - 46} fontSize={CONTRACT_CALL_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-tone-accent, #2d6a8f)">
         {字引("smartContract.call")}
       </text>
       {/* gear (auto-execution 記号) */}
@@ -247,7 +276,8 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
       </polygon>
       <circle cx={gearCx} cy={gearCy} r={gearBodyR * 0.4} fill="var(--cdl-node-fill, #ffffff)" stroke="none" />
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, smartContractExtent(frame.strokeWidth), art)}
@@ -413,7 +443,19 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 番号は頭の帯 (高さ 16) に乗り、下の字は中央の記号との
+   * 間隔 14 に収まる。 幅はどちらも箱の内側。
+   *
+   * **中央の記号 (`#`) は打ち消さない**。 箱の中央に大きく置いた飾りで、戻すと箱から出る。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#420", size: CHAIN_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: CHAIN_HEAD_H } },
+    { text: "0x…", size: CHAIN_HASH_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: CHAIN_ROW_GAP } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
         const bx = startX + i * (blockW + linkW);
@@ -440,21 +482,22 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
               stroke={frame.stroke}
               strokeWidth={isCurrent ? 2.5 : 1.5}
             />
-            <rect x={bx} y={cy - blockH / 2} width={blockW} height={16} rx={4} fill={isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)"} fillOpacity={isCurrent ? 1 : 0.4} stroke="none" />
-            <text x={bx + blockW / 2} y={cy - blockH / 2 + 12} fontSize={10} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+            <rect x={bx} y={cy - blockH / 2} width={blockW} height={CHAIN_HEAD_H} rx={4} fill={isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)"} fillOpacity={isCurrent ? 1 : 0.4} stroke="none" />
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy - blockH / 2 + 12} fontSize={CHAIN_NO_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
               #{420 + i}
             </text>
-            <text x={bx + blockW / 2} y={cy + 8} fontSize={14} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)"} fontFamily="Georgia, serif">
+            <text data-cdl-counter-scaled="0" x={bx + blockW / 2} y={cy + 8} fontSize={14} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)"} fontFamily="Georgia, serif">
               #
             </text>
-            <text x={bx + blockW / 2} y={cy + 22} fontSize={7} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 22} fontSize={CHAIN_HASH_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
               0x…
             </text>
           </g>
         );
       })}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
@@ -476,7 +519,17 @@ export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 番号は箱の下半分に置き、中央の `₿` との間隔 20 に収まる。
+   *
+   * **`₿` は打ち消さない** (指定 30 の飾りで、箱の高さ 66 に対して既に大きい)。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#820", size: BTC_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: 20 } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
         const bx = startX + i * (blockW + linkW);
@@ -496,17 +549,18 @@ export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element
               stroke={btcOrange}
               strokeWidth={isCurrent ? 2.5 : 1.5}
             />
-            <text x={bx + blockW / 2} y={cy - 4} fontSize={30} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : btcOrange} fontFamily="Georgia, serif">
+            <text data-cdl-counter-scaled="0" x={bx + blockW / 2} y={cy - 4} fontSize={30} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : btcOrange} fontFamily="Georgia, serif">
               ₿
             </text>
-            <text x={bx + blockW / 2} y={cy + 16} fontSize={9} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 16} fontSize={BTC_NO_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
               #{820 + i}
             </text>
           </g>
         );
       })}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
@@ -528,6 +582,15 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
+  /*
+   * **番号は打ち消さない** (#887)。 6 桁の番号は指定 9 でも幅の見積りが 46 になり、
+   * 箱の中で字が使える幅 42 (`CHAIN_TEXT_W`) を縮む前から超えている = 打ち消す余地が無い
+   * (`textWidth` は等幅の指定を無視して比例の書体で測る。 dragon の `cdl-theme.css` が
+   * `--d-body` を `!important` で当てるため、描かれるのは比例の書体になる)。
+   *
+   * 4 桁の `shape-bitcoin-chain` は同じ帯に収まるので打ち消しに乗っている。
+   * 縮む前から帯を超えていること自体は別の課題 (cardene777/cdl#885 と同じ形)。
+   */
   const art = (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
@@ -553,7 +616,7 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
             />
             {/* Ethereum Diamond ロゴ */}
             <EthereumDiamond cx={bx + blockW / 2} cy={cy - 6} h={16} colors={iconColors} />
-            <text x={bx + blockW / 2} y={cy + 22} fontSize={9} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+            <text data-cdl-counter-scaled="0" x={bx + blockW / 2} y={cy + 22} fontSize={ETH_NO_SIZE} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
               #{21_400 + i}
             </text>
           </g>
@@ -776,7 +839,19 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
   const artH = cardH * 0.72;
   const artCx = x + cardW / 2;
   const artCy = y + artH / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 番号は下の帯に置く。 高さは帯 (cardH - artH = 67)、
+   * 幅は左の余白 16 と右の丸 (半径 10、中心が cardW - 20) を避けた分。
+   *
+   * **絵の中央の `NFT` (指定 68) は打ち消さない**。 上の帯いっぱいに置いた飾りで、
+   * 戻すと帯から出る (実測 = 余り 0.92 で既に使い切っている)。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#1024", size: NFT_ID_SIZE, 帯: { 幅: cardW - 16 - 34, 高さ: cardH - artH } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* shadow */}
       <rect x={x + 4} y={y + 4} width={cardW} height={cardH} rx={14} fill={frame.stroke} opacity={0.2} stroke="none" />
@@ -791,6 +866,7 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
       />
       {/* 巨大 NFT 文字 (art 中央、 accent 色) */}
       <text
+        data-cdl-counter-scaled="0"
         x={artCx}
         y={artCy + 24}
         fontSize={68}
@@ -805,7 +881,7 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
       {/* 下部 info bar */}
       <line x1={x} y1={y + artH} x2={x + cardW} y2={y + artH} stroke={frame.stroke} strokeWidth={1} opacity={0.5} />
       {/* token id (左) */}
-      <text x={x + 16} y={y + artH + 30} fontSize={15} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+      <text data-cdl-counter-scaled="1" x={x + 16} y={y + artH + 30} fontSize={NFT_ID_SIZE * 倍} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         #1024
       </text>
       {/* verified check (右) */}
@@ -814,7 +890,8 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
         <path d="M -4 0 L -1 3 L 4 -3" fill="none" stroke="#ffffff" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
       </g>
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, nftExtent(frame.strokeWidth), art)}

package/src/kinds/shape-commerce.tsx

@@ -1,5 +1,12 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt, textWidth } from "./shape-region";
+import {
+  shapeRegion,
+  labelPlan,
+  fitArt,
+  textWidth,
+  打ち消しの倍率,
+  type 打ち消す字,
+} from "./shape-region";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
@@ -304,7 +311,7 @@ export function ShapeWarehouseNode({ node, active, lang }: ShapeProps): JSX.Elem
       <rect data-cdl-role="node-body" x={x} y={y + roofH} width={bw} height={bh - roofH - 12} fill="#a89d8f" stroke="#5a6270" strokeWidth={frame.strokeWidth} />
       {/* WAREHOUSE 看板 (赤帯) */}
       <rect x={x} y={y + roofH} width={bw} height={signH} fill="#c15a4a" stroke="#8b3f2f" strokeWidth={1.5} />
-      <text x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">{字引("warehouse.sign")}</text>
+      <text data-cdl-counter-scaled="0" x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">{字引("warehouse.sign")}</text>
       {/* 中央大 shutter (rib 縞) */}
       <rect x={shutterX} y={shutterY} width={shutterW} height={shutterH} fill="#8b949e" stroke={accentDarker} strokeWidth={2} />
       {/* shutter 上部 shade (立体感) */}
@@ -501,6 +508,12 @@ const API_ROWS = 3;
 /** 板の大きさ。 高さの下限は行が最小の間隔で 3 本入る高さ。 */
 const API_H_MIN =
   API_ROW_TOP + (API_ROWS - 1) * API_ROW_PITCH_MIN + API_ROW_H + API_ROW_BOTTOM_PAD;
+/** 要求の道と天井看板の字の指定 (#887 で打ち消しの計算に使うため定数へ出した) */
+const API_PATH_SIZE = 12;
+const API_SIGN_SIZE = 14;
+/** 種類の箱の幅と、その中で字が使える幅 (左右 3 ずつ空ける) */
+const API_METHOD_BOX_W = 54;
+const API_METHOD_TEXT_W = 48;
 const API_W_MIN = 200;
 const API_W_MAX = 300;
 
@@ -522,31 +535,48 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
   // 11 のまま入り、長い綴り (日本語の辞書の `DELETE`) だけを縮める。 見積りは等幅と比例の大きい方
   // (`shape-blockchain.tsx` の `字の幅` と同じ考え方で、どちらの書体で描かれても箱からはみ出さない)
   const 種類の字 = (s: string): number =>
-    Math.min(11, (11 * 48) / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
+    Math.min(11, (11 * API_METHOD_TEXT_W) / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
   const rowPitch = Math.max(
     API_ROW_PITCH_MIN,
     (bh - API_ROW_TOP - API_ROW_H - API_ROW_BOTTOM_PAD) / (API_ROWS - 1),
   );
-  const 絵 = (
+  const 行ら = [
+    { method: "GET", path: 字引("apiGateway.users"), color: "#27c93f" },
+    { method: "POST", path: 字引("apiGateway.orders"), color: "#e5c07b" },
+    { method: 字引("apiGateway.delete"), path: 字引("apiGateway.session"), color: "#c9302c" },
+  ];
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 要求の道の字が使える幅は、行の箱 (bw - 32) から
+   * 種類の箱までの 64 と、右端で点滅する印の丸の 16 を除いた残り。
+   *
+   * **種類の字 (`GET` / `POST`) は打ち消さない**。 `種類の字` が箱の幅 48 に合わせて指定を
+   * 決めているので余白が 0 で、打ち消す余地が無い (長い綴りでは上限がちょうど 1.0 になる)。
+   * 打ち消しは絵ごとに 1 つの倍率で、最も狭い字が全体を縛る = これを入れると要求の道の字も
+   * 戻せなくなる。
+   */
+  const 打ち消す字ら: 打ち消す字[] = 行ら.map((e) => ({
+    text: e.path,
+    size: API_PATH_SIZE,
+    帯: { 幅: bw - 32 - 64 - 16, 高さ: API_ROW_H },
+  }));
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       <rect x={x + DROP_SHADOW_D} y={y + DROP_SHADOW_D} width={bw} height={bh} rx={10} fill={frame.stroke} opacity={0.2} stroke="none" />
       <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={10} fill="#1a2332" stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
       <rect x={x} y={y} width={bw} height={36} rx={10} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
-      <text x={cx} y={y + 24} fontSize={14} fontWeight={700} letterSpacing={3} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+      <text data-cdl-counter-scaled="0" x={cx} y={y + 24} fontSize={API_SIGN_SIZE} fontWeight={700} letterSpacing={3} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         {字引("apiGateway.sign")}
       </text>
-      {[
-        { method: "GET", path: 字引("apiGateway.users"), color: "#27c93f" },
-        { method: "POST", path: 字引("apiGateway.orders"), color: "#e5c07b" },
-        { method: 字引("apiGateway.delete"), path: 字引("apiGateway.session"), color: "#c9302c" },
-      ].map((e, i) => (
+      {行ら.map((e, i) => (
         <g key={i} transform={`translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`}>
           <rect x={0} y={0} width={bw - 32} height={API_ROW_H} rx={4} fill="#0f1419" stroke="none" />
-          <rect x={0} y={0} width={54} height={API_ROW_H} rx={4} fill={e.color} stroke="none" />
-          <text x={27} y={16} fontSize={種類の字(e.method)} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+          <rect x={0} y={0} width={API_METHOD_BOX_W} height={API_ROW_H} rx={4} fill={e.color} stroke="none" />
+          <text data-cdl-counter-scaled="0" x={27} y={16} fontSize={種類の字(e.method)} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
             {e.method}
           </text>
-          <text x={64} y={16} fontSize={12} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#e6edf3">
+          <text data-cdl-counter-scaled="1" x={64} y={16} fontSize={API_PATH_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#e6edf3">
             {e.path}
           </text>
           <circle cx={bw - 44} cy={12} r={4} fill="#27c93f" stroke="none">
@@ -555,7 +585,8 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
         </g>
       ))}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}

package/src/kinds/shape-finance.tsx

@@ -1,5 +1,11 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt } from "./shape-region";
+import {
+  shapeRegion,
+  labelPlan,
+  fitArt,
+  打ち消しの倍率,
+  type 打ち消す字,
+} from "./shape-region";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
@@ -193,7 +199,7 @@ export function ShapeBankNode({ node, active }: ShapeProps): JSX.Element {
       })}
       <path d={`M ${x - BANK_BODY_OUT} ${y + pedimentH} L ${r.cx} ${y - BANK_PEDIMENT_RISE} L ${x + bldW + BANK_BODY_OUT} ${y + pedimentH} Z`} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
       <circle cx={r.cx} cy={y + pedimentH / 2 + 4} r={14} fill="var(--cdl-tone-accent, #2d6a8f)" stroke={frame.stroke} strokeWidth={1.5} />
-      <text x={r.cx} y={y + pedimentH / 2 + 10} fontSize={18} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="Georgia, serif">
+      <text data-cdl-counter-scaled="0" x={r.cx} y={y + pedimentH / 2 + 10} fontSize={18} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="Georgia, serif">
         $
       </text>
       <rect x={x - 4} y={y + pedimentH} width={bldW + 8} height={architraveH} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.4} stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
@@ -278,7 +284,7 @@ export function ShapeTrustBankNode({ node, active, lang }: ShapeProps): JSX.Elem
         return <rect key={i} x={r.cx - w / 2} y={y + bldH + i * BANK_STEP_DY} width={w} height={BANK_STEP_H} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.5 + i * 0.15} stroke={frame.stroke} strokeWidth={BANK_STEP_SW} />;
       })}
       <path d={`M ${x - 6} ${y + pedimentH} L ${r.cx} ${y + 2} L ${x + bldW + 6} ${y + pedimentH} Z`} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
-      <text x={r.cx} y={y + pedimentH - 8} fontSize={15} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)" fontFamily="Georgia, serif">
+      <text data-cdl-counter-scaled="0" x={r.cx} y={y + pedimentH - 8} fontSize={15} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)" fontFamily="Georgia, serif">
         {字引("trustBank.sign")}
       </text>
       <rect x={x - 4} y={y + pedimentH} width={bldW + 8} height={architraveH} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.4} stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
@@ -394,6 +400,11 @@ export function ShapeCreditCardNode({ node, active }: ShapeProps): JSX.Element {
  */
 const BROKERAGE_TICK_H = 12;
 const BROKERAGE_LOGO_H = 26;
+/** 電光掲示板の内側の帯と、そこに流れる相場の字の指定。 */
+const BROKERAGE_TICK_INNER_H = 8;
+const BROKERAGE_TICKER_SIZE = 5.5;
+/** ロゴ帯の看板の字の指定。 */
+const BROKERAGE_SIGN_SIZE = 12;
 /** 窓の格子。 上端はロゴ帯の下、 下端は基壇の上。 */
 const BROKERAGE_GRID_TOP = 62;
 const BROKERAGE_CELL_W = 14;
@@ -454,7 +465,22 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
   );
   const gridStartX = x + (w - (cols * cellW + (cols - 1) * gapX)) / 2;
   const goldCells = new Set([`0,1`, `0,4`, `1,2`, `2,3`, `3,5`]); // ランダム点灯 window
-  const 絵 = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 相場の字は電光掲示板の内側 (幅 w - 4、高さ 8) に入る。
+   *
+   * **看板 `$ SECURITIES` は打ち消さない**。 字間 2.5 を持ち幅が字数に比例するため、言語で
+   * 字数が変われば帯を超える (#886 の記号と同じ扱い)。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    {
+      text: 字引("brokerage.ticker"),
+      size: BROKERAGE_TICKER_SIZE,
+      帯: { 幅: w - 4, 高さ: BROKERAGE_TICK_INNER_H },
+    },
+  ];
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* drop shadow */}
       <ellipse cx={cx} cy={y + h + BROKERAGE_SHADOW_DY} rx={w * BROKERAGE_SHADOW_RX_RATIO} ry={BROKERAGE_SHADOW_RY} fill={frame.stroke} opacity={0.2} stroke="none" />
@@ -465,12 +491,12 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
       {/* 上部電光掲示板 tick */}
       <rect x={x} y={y} width={w} height={BROKERAGE_TICK_H} fill="#0f1830" stroke="none" />
       <rect x={x + 2} y={y + 2} width={w - 4} height={8} fill="#1a2340" stroke="none" />
-      <text x={cx} y={y + 9} fontSize={5.5} fontWeight={700} textAnchor="middle" fill="#4ea36a" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+      <text data-cdl-counter-scaled="1" x={cx} y={y + 9} fontSize={BROKERAGE_TICKER_SIZE * 倍} fontWeight={700} textAnchor="middle" fill="#4ea36a" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         {字引("brokerage.ticker")}
       </text>
       {/* $ SECURITIES ロゴ帯 */}
       <rect x={x} y={y + BROKERAGE_TICK_H} width={w} height={BROKERAGE_LOGO_H} fill="#e5c07b" stroke="none" />
-      <text x={cx} y={y + 30} fontSize={12} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
+      <text data-cdl-counter-scaled="0" x={cx} y={y + 30} fontSize={BROKERAGE_SIGN_SIZE} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
         {字引("brokerage.sign")}
       </text>
       {/* window grid (段数は高さ次第、 列は 6 固定) */}
@@ -492,7 +518,8 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
       {/* 底部床 (ATM のように狭め) */}
       <rect x={x - BROKERAGE_FLOOR_OUT} y={y + h + BROKERAGE_FLOOR_DY} width={w + BROKERAGE_FLOOR_OUT * 2} height={BROKERAGE_FLOOR_H} fill="#5a6270" stroke="none" />
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
@@ -502,6 +529,9 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
 }
 
 /** shape-exchange = E2-A 中央 clearing house (hexagon EXCHANGE + 放射 8 node + 双方向 tx dots) */
+/** 六角形の下に置く清算の字の指定。 */
+const EXCHANGE_SUB_SIZE = 8;
+
 export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
@@ -540,7 +570,7 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
    */
   const 節点 = Math.max(0, nodeR) + 8 + 1.5 / 2;
   const 六角 = hexR + frame.strokeWidth / 2;
-  const 字下 = 26 + 8 * 0.25;
+  const 字下 = 26 + EXCHANGE_SUB_SIZE * 0.25;
   const 外 = Math.max(節点, 六角);
   const ずれ = cy - r.cy;
   const 広がり = {
@@ -549,7 +579,19 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
     左: 外,
     右: 外,
   };
-  const 絵 = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 清算の字は六角形の下の空いた所に置くので、幅は絵の横幅を
+   * そのまま使える。 高さは字の下の余り (`字下`) に合わせて 14 を採る。
+   *
+   * **看板 `EXCHANGE` と記号 `⇄` は打ち消さない**。 前者は字間 2 を持ち幅が字数に比例し、
+   * 後者は六角形の中に余白を持たない。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: 字引("exchange.sub"), size: EXCHANGE_SUB_SIZE, 帯: { 幅: 外 * 2, 高さ: 14 } },
+  ];
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* 8 dashed radial lines */}
       {nodes.map((n, i) => (
@@ -567,17 +609,18 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
       })}
       {/* 中央 hexagon EXCHANGE (単色 #255a7a、 縦向き正六角形) */}
       <path d={hexPath} fill="#255a7a" stroke={accentDarker} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
-      <text x={cx} y={cy - 8} fontSize={10} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("exchange.sign")}</text>
+      <text data-cdl-counter-scaled="0" x={cx} y={cy - 8} fontSize={10} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("exchange.sign")}</text>
       {/* swap 記号 */}
-      <text data-cdl-role="node-body" x={cx} y={cy + 12} fontSize={22} fontWeight={700} textAnchor="middle" fill="#e5c07b">⇄</text>
+      <text data-cdl-counter-scaled="0" data-cdl-role="node-body" x={cx} y={cy + 12} fontSize={22} fontWeight={700} textAnchor="middle" fill="#e5c07b">⇄</text>
       {/* clearing label */}
-      <text x={cx} y={cy + 26} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("exchange.sub")}</text>
+      <text data-cdl-counter-scaled="1" x={cx} y={cy + 26} fontSize={EXCHANGE_SUB_SIZE * 倍} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("exchange.sub")}</text>
       {/* 8 外周 node (buyer/seller) */}
       {nodes.map((n, i) => (
         <circle key={`n${i}`} cx={n.cx} cy={n.cy} r={8} fill={n.fill} stroke={accentDarker} strokeWidth={1.5} />
       ))}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
@@ -654,21 +697,32 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
   // 画面と 10 キーが潰れて読めなくなる
   const 面 = Math.min(1, atmW / ATM_PANEL_W, atmH / ATM_PANEL_H);
   const 面左 = -ATM_PANEL_W / 2;
+  /*
+   * **操作面の字は打ち消さない** (#887)。 画面は高さ 52 に 3 行 (指定 10 / 8 / 10) を詰めており、
+   * 行の間隔が 12 から 14 しか無い = 指定 10 の字に対して行の間隔の 8 割を割る
+   * (12 * 0.8 / 10 = 0.96)。 打ち消すと上下の行か画面の枠に触れる。
+   *
+   * 1 行だけ除いて残りを戻す形も採らない = 画面の 3 行は 1 つのまとまりなので、`¥ 20,000` だけ
+   * 戻さないと金額が見出しより小さくなる。 鍵盤の数字 (18x10 の鍵に入る絵) と天井看板
+   * (字間 2 を持ち幅が字数に比例する) も据え置く。
+   *
+   * 縮む前から画面の字が読める大きさに届かないこと自体は別の課題 (cardene777/cdl#888)。
+   */
   const 絵 = (
     <g>
       {/* drop shadow */}
       <ellipse cx={cx} cy={y + totalH + ATM_SHADOW_DY} rx={totalW * ATM_SHADOW_RX_RATIO} ry={ATM_SHADOW_RY} fill={frame.stroke} opacity={0.15} stroke="none" />
       {/* 天井 ATM CORNER 看板 */}
       <rect x={centerX - totalW / 2} y={signY} width={totalW} height={signH} fill={accentDarker} stroke="#000" strokeWidth={ATM_SIGN_SW} />
-      <text x={centerX} y={signY + 17} fontSize={11} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("atm.sign")}</text>
+      <text data-cdl-counter-scaled="0" x={centerX} y={signY + 17} fontSize={11} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#e5c07b">{字引("atm.sign")}</text>
       {/* ATM body */}
       <rect data-cdl-role="node-body" x={atmX} y={atmY} width={atmW} height={atmH} rx={6} fill="#255a7a" stroke={accentDarker} strokeWidth={frame.strokeWidth} />
       <g transform={`translate(${centerX} ${atmY}) scale(${面})`}>
         {/* screen */}
         <rect x={面左 + 8} y={10} width={ATM_PANEL_W - 16} height={52} rx={3} fill="#0f1830" stroke="#000" strokeWidth={1.5} />
-        <text x={0} y={30} fontSize={10} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">お引出し</text>
-        <text x={0} y={44} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("atm.screen")}</text>
-        <text x={0} y={56} fontSize={10} fontWeight={700} textAnchor="middle" fill="#4ea36a">¥ 20,000</text>
+        <text data-cdl-counter-scaled="0" x={0} y={30} fontSize={10} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">お引出し</text>
+        <text data-cdl-counter-scaled="0" x={0} y={44} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("atm.screen")}</text>
+        <text data-cdl-counter-scaled="0" x={0} y={56} fontSize={10} fontWeight={700} textAnchor="middle" fill="#4ea36a">¥ 20,000</text>
         {/* keypad 5x2 */}
         <rect x={面左 + 8} y={68} width={ATM_PANEL_W - 16} height={42} rx={2} fill="#8b949e" stroke="#5a6270" strokeWidth={1} />
         {(() => {
@@ -688,7 +742,7 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
             return (
               <g key={`k${i}`}>
                 <rect x={kx} y={ky} width={keyW} height={keyH} fill={k[1]} stroke="#0f1830" strokeWidth={0.8} />
-                <text x={kx + keyW / 2} y={ky + 7} fontSize={/* 決める鍵 (末尾) は 2 字あるので小さく描く。 字は言語で変わるため位置で見分ける */ i === keys.length - 1 ? 6 : 7} fontWeight={700} textAnchor="middle" fill="#ffffff">{k[0]}</text>
+                <text data-cdl-counter-scaled="0" x={kx + keyW / 2} y={ky + 7} fontSize={/* 決める鍵 (末尾) は 2 字あるので小さく描く。 字は言語で変わるため位置で見分ける */ i === keys.length - 1 ? 6 : 7} fontWeight={700} textAnchor="middle" fill="#ffffff">{k[0]}</text>
               </g>
             );
           });
@@ -696,7 +750,7 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
         {/* card slot */}
         <rect x={面左 + 12} y={116} width={ATM_PANEL_W - 24} height={8} rx={1.5} fill="#0f1830" stroke={accentDarker} strokeWidth={1} />
         <rect x={面左 + 15} y={118} width={ATM_PANEL_W - 30} height={4} rx={0.5} fill="#e5c07b" />
-        <text x={0} y={132} fontSize={6} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">{字引("atm.cardSlot")}</text>
+        <text data-cdl-counter-scaled="0" x={0} y={132} fontSize={6} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">{字引("atm.cardSlot")}</text>
         {/* cash slot */}
         <rect x={面左 + 12} y={136} width={ATM_PANEL_W - 24} height={4} rx={1} fill="#0f1830" />
       </g>

package/src/kinds/shape-people.tsx

@@ -334,7 +334,7 @@ export function ShapeNotaryNode({ node, active }: ShapeProps): JSX.Element {
         <line x1={chestX - 14} y1={chestY + 14} x2={chestX + 14} y2={chestY + 14} stroke="#8b949e" strokeWidth={1} />
         <line x1={chestX - 14} y1={chestY + 22} x2={chestX + 8} y2={chestY + 22} stroke="#8b949e" strokeWidth={1} />
         <line x1={chestX - 14} y1={chestY + 34} x2={chestX + 2} y2={chestY + 34} stroke="#0f3450" strokeWidth={1.5} />
-        <text x={chestX + 6} y={chestY + 37} fontSize={8} fill="#0f3450" fontFamily="cursive" fontStyle="italic">
+        <text data-cdl-counter-scaled="0" x={chestX + 6} y={chestY + 37} fontSize={8} fill="#0f3450" fontFamily="cursive" fontStyle="italic">
           ✓
         </text>
         {/* 右下 印章 badge */}
@@ -342,7 +342,7 @@ export function ShapeNotaryNode({ node, active }: ShapeProps): JSX.Element {
           <g>
             <circle cx={0} cy={0} r={12} fill="#c15a4a" stroke="none" />
             <circle cx={0} cy={0} r={8} fill="none" stroke="#ffffff" strokeWidth={1.2} />
-            <text x={0} y={4} fontFamily="Georgia, serif" fontSize={10} fontWeight={700} fill="#ffffff" textAnchor="middle">
+            <text data-cdl-counter-scaled="0" x={0} y={4} fontFamily="Georgia, serif" fontSize={10} fontWeight={700} fill="#ffffff" textAnchor="middle">
               印
             </text>
           </g>
@@ -420,7 +420,7 @@ export function ShapeCustomerServiceNode({ node, active }: ShapeProps): JSX.Elem
         {collarV(cx, cy, p.strokeColor)}
         {/* 体内 24H badge */}
         <rect x={chestX - 22} y={chestY + 5} width={44} height={22} rx={11} fill="#e5c07b" stroke="#a67c00" strokeWidth={2} />
-        <text x={chestX} y={chestY + 20} fontSize={12} fontWeight={900} fill="#5a3a10" textAnchor="middle" letterSpacing={2}>
+        <text data-cdl-counter-scaled="0" x={chestX} y={chestY + 20} fontSize={12} fontWeight={900} fill="#5a3a10" textAnchor="middle" letterSpacing={2}>
           24H
         </text>
         {/* 右下 headset badge */}