@cardenelabs/cdl 0.73.0 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.73.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

@@ -1,8 +1,16 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
-import { fitArt, labelPlan, shapeRegion, textWidth, type ArtExtent } from "./shape-region";
+import {
+  fitArt,
+  labelPlan,
+  shapeRegion,
+  textWidth,
+  打ち消しの倍率,
+  絵の中の字の幅,
+  type ArtExtent,
+  type 打ち消す字,
+} from "./shape-region";
 import { 幅で切る } from "./box-lines";
-import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import { 字引きを作る, type CdlLang, type CdlTextKey } from "../lang";
 
 /**
@@ -36,28 +44,6 @@ const 値の字 = 11;
 /** 5 行を並べる間隔と、見出しが乗る帯の高さ。 打ち消しの上限をここから出す (#871) */
 const 行の間隔 = 22;
 const 見出しの帯 = 32;
-/** 打ち消した字が帯のどこまでを占めてよいか。 超えると上下の行や帯の縁に触れる */
-const 帯に対する上限 = 0.8;
-
-/**
- * 縮んだ分を字の指定で打ち消す倍率 (#871)。
- *
- * この絵は 240 x 220 で組んでから、箱に収まる倍率で丸ごと縮む。 字も一緒に縮むので、
- * 指定 10.5 が `k = 0.719` の図で 7.55 になり、画面で読める下限 (8px) を割っていた。
- *
- * **上限は絵の中の帯から出す** = 固定値にすると、絵の寸法を変えた日に効き方だけが変わる。
- * 5 行は 22 ずつ空けて並べ、見出しは高さ 32 の帯に乗る。
- *
- * 1 を下回らない = 縮んでいない図 (`k = 1`) で字を小さくしない。
- */
-function 打ち消しの倍率(k: number): number {
-  const 戻し = Number.isFinite(k) && k > 0 ? 1 / k : 1;
-  const 上限 = Math.min(
-    (行の間隔 * 帯に対する上限) / 値の字,
-    (見出しの帯 * 帯に対する上限) / 見出しの字,
-  );
-  return Math.max(1, Math.min(戻し, 上限));
-}
 const BLOCK_SHADOW = 6;
 
 const NFT_W = 220;
@@ -70,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;
@@ -237,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" />
@@ -246,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 記号) */}
@@ -261,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)}
@@ -281,8 +297,7 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
  * どちらの書体で描かれても実物以上に出る側へ倒す = 下回ると「収まっていない物を収まっていると
  * 判定」 する向きに外れる (`row-align.ts` の `rowColumnWidth` と同じ考え方)。
  */
-const 字の幅 = (text: string, size: number): number =>
-  Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
+const 字の幅 = (text: string, size: number): number => 絵の中の字の幅(text, size);
 
 /**
  * 絵の中の 5 行の既定値。 書き手が渡さなかった欄はこれで描く (#469)。
@@ -356,8 +371,28 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
    * **幅の予算も打ち消した後の大きさで計算する** = 字だけ大きくして切る位置を元の大きさの
    * まま置くと、切った字が枠から出る。
    */
+  /*
+   * 打ち消しの上限を出す帯 (#886)。 **絵の定数から渡す**。
+   *
+   * 見出しは高さ 32 の帯に乗り、5 行は 22 ずつ空けて並ぶ。 幅は行の内側 (`bw - 28`) で、
+   * 値は名前の分を引いた残り = 名前と値が同じ行に並ぶため。
+   *
+   * 値の幅は **打ち消す前の名前の幅** で引く。 打ち消した後の幅で引くと、上限を出すのに
+   * 上限が要る形になる。 名前は打ち消しで広がるので、その分は帯に対する上限 (8 割) が吸う。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: 見出し, size: 見出しの字, 帯: { 幅: 見出しの幅, 高さ: 見出しの帯 } },
+    ...fields.flatMap((f): 打ち消す字[] => [
+      { text: f.label, size: 名の字, 帯: { 幅: bw - 28, 高さ: 行の間隔 } },
+      {
+        text: f.value,
+        size: 値の字,
+        帯: { 幅: bw - 28 - 字の幅(f.label, 名の字) - 8, 高さ: 行の間隔 },
+      },
+    ]),
+  ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
     const 題の大きさ = 見出しの字 * 倍;
     const 名の大きさ = 名の字 * 倍;
     const 値の大きさ = 値の字 * 倍;
@@ -368,17 +403,17 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
       <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={8} {...frame} />
       {/* header bar */}
       <path d={`M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.9} stroke="none" />
-      <text data-cdl-role="blockchain-block-title" x={x + 14} y={y + 22} fontSize={題の大きさ} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
+      <text data-cdl-role="blockchain-block-title" data-cdl-counter-scaled="1" x={x + 14} y={y + 22} fontSize={題の大きさ} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
         {幅で切る(見出し, 題の大きさ, 見出しの幅, 字の幅)}
       </text>
       <circle cx={x + bw - 16} cy={y + 16} r={5.5} fill="#7cd88f" stroke="#ffffff" strokeWidth={1.5} />
       {/* fields */}
       {fields.map((f, i) => (
         <g key={i}>
-          <text x={x + 14} y={y + 54 + i * 行の間隔} fontSize={名の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
+          <text data-cdl-counter-scaled="1" x={x + 14} y={y + 54 + i * 行の間隔} fontSize={名の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
             {f.label}
           </text>
-          <text data-cdl-role={`blockchain-block-${f.key}`} x={x + bw - 14} y={y + 54 + i * 行の間隔} fontSize={値の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
+          <text data-cdl-role={`blockchain-block-${f.key}`} data-cdl-counter-scaled="1" x={x + bw - 14} y={y + 54 + i * 行の間隔} fontSize={値の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
             {幅で切る(f.value, 値の大きさ, bw - 28 - 字の幅(f.label, 名の大きさ) - 8, 字の幅)}
           </text>
           <line x1={x + 14} y1={y + 60 + i * 行の間隔} x2={x + bw - 14} y2={y + 60 + i * 行の間隔} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
@@ -408,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);
@@ -435,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)}
@@ -471,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);
@@ -491,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)}
@@ -523,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) => {
@@ -548,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>
@@ -771,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" />
@@ -786,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}
@@ -800,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 (右) */}
@@ -809,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, 広がり, 絵)}