@cardenelabs/cdl 0.75.0 → 0.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.75.0",
+  "version": "0.77.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/chart-pie.tsx

@@ -5,7 +5,22 @@ import { resolveChartData, type ResolvedChartDatum } from "../render/payload-bin
 import { 進みを畳む } from "./draw-progress";
 import { 名札の段をほどく } from "./label-stack";
 import { 扇形の切り抜き } from "./draw-arc";
-import { textWidth } from "./text-width";
+import { textWidth, 縮んだ絵の字の下限 } from "./text-width";
+
+/** 字の上下に残す余白の割合。 帯に字を収める時と同じ値を使う */
+const 穴に対する上限 = 0.8;
+
+/**
+ * 輪の中央に置く字の大きさ。
+ *
+ * 半径に比例させると小さい図で字が読めなくなる (実測 = 120x110 の箱で 3.00 world)。
+ * 下限まで戻し、**穴に入らない時だけ下限を割る** = 入らない大きさで描くと数字が輪へ
+ * 重なる (#891)。
+ */
+function 中央の字(比例した大きさ: number, 穴の半径: number, 文: string): number {
+  const 入る大きさ = (穴の半径 * 2 * 穴に対する上限) / Math.max(textWidth(文, 1), 1e-6);
+  return Math.min(Math.max(比例した大きさ, 縮んだ絵の字の下限), 入る大きさ);
+}
 import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
@@ -182,6 +197,15 @@ export function ChartPieNode({
   const cy = PAD_TOP + chartAreaH / 2;
 
   const 前のslices = 前あり ? 輪を組む(data, cx, cy, 前の外半径, 前の内半径, 前の割合) : [];
+  /*
+   * 中央の 2 行。 字は穴に入る範囲で下限まで戻し、2 行目の位置は **字の大きさから出す**
+   * (#891)。 半径に比例させたままだと、下限まで戻した 1 行目と 2 行目が重なる。
+   */
+  const 穴 = 前あり ? 前の内半径 : 外の内半径;
+  const 合計の文 = 実値表記(Math.round(前あり ? 今の合計 : total));
+  const 合計の字 = 中央の字(Math.round(radius * 0.26), 穴, 合計の文);
+  const 見出しの字 = 中央の字(Math.round(radius * 0.12), 穴, "合計");
+  const 合計の下 = Math.max(Math.round(radius * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
   const slices = 輪を組む(data, cx, cy, radius, 外の内半径, 今の割合);
 
   /** 円がどこまで開いたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
@@ -301,17 +325,17 @@ export function ChartPieNode({
         x={cx}
         y={cy - 2}
         textAnchor="middle"
-        fontSize={Math.round(radius * 0.26)}
+        fontSize={合計の字}
         fontWeight={600}
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {実値表記(Math.round(前あり ? 今の合計 : total))}
+        {合計の文}
       </text>
       <text
         x={cx}
-        y={cy + Math.round(radius * 0.2)}
+        y={cy + 合計の下}
         textAnchor="middle"
-        fontSize={Math.round(radius * 0.12)}
+        fontSize={見出しの字}
         fill="var(--cdl-text-dim, #5a6270)"
       >
         合計
@@ -593,6 +617,11 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
   const 内半径 = R * 0.58;
   const cx = PAD + R;
   const cy = node.h / 2;
+  // 中央の 2 行。 輪の layout と同じ決め方 (#891)
+  const 合計の文 = 実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)));
+  const 合計の字 = 中央の字(Math.round(R * 0.26), 内半径, 合計の文);
+  const 見出しの字 = 中央の字(Math.round(R * 0.12), 内半径, "合計");
+  const 合計の下 = Math.max(Math.round(R * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
 
   const 表左 = node.w - PAD - 表幅;
   const 右端 = node.w - PAD;
@@ -643,17 +672,17 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
         x={cx}
         y={cy - 2}
         textAnchor="middle"
-        fontSize={Math.round(R * 0.26)}
+        fontSize={合計の字}
         fontWeight={600}
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)))}
+        {合計の文}
       </text>
       <text
         x={cx}
-        y={cy + Math.round(R * 0.2)}
+        y={cy + 合計の下}
         textAnchor="middle"
-        fontSize={Math.round(R * 0.12)}
+        fontSize={見出しの字}
         fill="var(--cdl-text-dim, #5a6270)"
       >
         合計

package/src/kinds/shape-blockchain.tsx

@@ -39,7 +39,7 @@ const BLOCK_W = 240;
 const BLOCK_H = 220;
 /** `shape-blockchain-block` の字の指定 (#871 で打ち消しの計算に使うため定数へ出した) */
 const 見出しの字 = 13;
-const 名の字 = 10.5;
+const 名の字 = 11;
 const 値の字 = 11;
 /** 5 行を並べる間隔と、見出しが乗る帯の高さ。 打ち消しの上限をここから出す (#871) */
 const 行の間隔 = 22;
@@ -63,12 +63,12 @@ const CHAIN_TEXT_W = CHAIN_BLOCK_W - 8;
 /** 箱の中の 2 行 (中央の記号と下の字) の baseline の間隔 */
 const CHAIN_ROW_GAP = 14;
 /** 連鎖の箱の中の字の指定 (#887 で打ち消しの計算に使うため定数へ出した) */
-const CHAIN_NO_SIZE = 10;
+const CHAIN_NO_SIZE = 11;
 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 CHAIN_HASH_SIZE = 11;
+const BTC_NO_SIZE = 11;
+const ETH_NO_SIZE = 11;
 
 const NODE_HEX_R = 44;
 const NODE_PEER_R = 12;
@@ -583,15 +583,20 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
   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` で当てるため、描かれるのは比例の書体になる)。
+   * 打ち消しの上限を出す帯 (#888)。 番号は箱の下半分に置き、ロゴとの間隔 20 に収まる。
    *
-   * 4 桁の `shape-bitcoin-chain` は同じ帯に収まるので打ち消しに乗っている。
-   * 縮む前から帯を超えていること自体は別の課題 (cardene777/cdl#885 と同じ形)。
+   * **ロゴは打ち消さない** (絵で、字ではない)。
+   *
+   * #887 では 6 桁 (`#21400`) の幅 56.8 が帯 42 を縮む前から超えていたため打ち消しに
+   * 乗せられなかった。 番号を 3 桁に揃えて 37.8 に収めたので、他の 2 つの連鎖と同じ
+   * 扱いに戻した。
    */
-  const art = (
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#214", size: ETH_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);
@@ -616,14 +621,15 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
             />
             {/* Ethereum Diamond ロゴ */}
             <EthereumDiamond cx={bx + blockW / 2} cy={cy - 6} h={16} colors={iconColors} />
-            <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 data-cdl-counter-scaled="1" 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)"}>
+              #{214 + i}
             </text>
           </g>
         );
       })}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, chainExtent(), art)}

package/src/kinds/shape-commerce.tsx

@@ -215,6 +215,8 @@ export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Ele
   const doorH = facadeH - 30;
   const doorX = x + bw - doorW - 12;
   const doorY = facadeY + 20;
+  // 営業中の札。 扉より広げない = 扉の外へ貼り出すと店の絵が壊れる
+  const 札幅 = Math.min(doorW - 6, 50);
   return (
     <g>
       {/* drop shadow */}
@@ -239,9 +241,9 @@ export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Ele
       {/* door の水平 line 装飾 */}
       <line x1={doorX + 4} y1={doorY + doorH * 0.38} x2={doorX + doorW - 4} y2={doorY + doorH * 0.38} stroke={accentDarker} strokeWidth={1} />
       <line x1={doorX + 4} y1={doorY + doorH * 0.72} x2={doorX + doorW - 4} y2={doorY + doorH * 0.72} stroke={accentDarker} strokeWidth={1} />
-      {/* OPEN sign (door 下部に貼付) */}
-      <rect x={doorX + doorW / 2 - 20} y={doorY + doorH * 0.85} width={40} height={12} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
-      <text x={doorX + doorW / 2} y={doorY + doorH * 0.85 + 9} fontSize={8} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#5a3a10">{字引("storefront.open")}</text>
+      {/* OPEN sign (door 下部に貼付)。 札は字に合わせる = 指定 11 の `OPEN` は字間 1 で幅 41.8 (#888) */}
+      <rect x={doorX + doorW / 2 - 札幅 / 2} y={doorY + doorH * 0.85} width={札幅} height={16} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+      <text x={doorX + doorW / 2} y={doorY + doorH * 0.85 + 11} fontSize={11} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#5a3a10">{字引("storefront.open")}</text>
       {/* door handle (小さな dot) */}
       <circle cx={doorX + 6} cy={doorY + doorH * 0.55} r={1.5} fill="#c15a4a" />
       {/* base 床 (前 storefront 直下のみ) */}

package/src/kinds/shape-finance.tsx

@@ -344,7 +344,7 @@ export function ShapePaymentProviderNode({ node, active, lang }: ShapeProps): JS
         <text x={cx} y={cy + 9} fontSize={13} fontWeight={700} textAnchor="middle" fill={accentDarker} fontFamily="Georgia, serif">$</text>
       </g>
       {/* PROCESSING label */}
-      <text x={cx} y={y + boxH - 16} fontSize={9} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#a4b5f2">{字引("paymentProvider.status")}</text>
+      <text x={cx} y={y + boxH - 16} fontSize={11} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#a4b5f2">{字引("paymentProvider.status")}</text>
       {bottomLabel(node, r.cx, r.label)}
     </g>
   );
@@ -398,15 +398,20 @@ export function ShapeCreditCardNode({ node, active }: ShapeProps): JSX.Element {
  *
  * 影と床帯はビルの外へ出る。 出る量は箱の高さに依らないので、 描ける帯を先に狭める。
  */
-const BROKERAGE_TICK_H = 12;
+const BROKERAGE_TICK_H = 18;
 const BROKERAGE_LOGO_H = 26;
-/** 電光掲示板の内側の帯と、そこに流れる相場の字の指定。 */
-const BROKERAGE_TICK_INNER_H = 8;
-const BROKERAGE_TICKER_SIZE = 5.5;
+/**
+ * 電光掲示板の内側の帯と、そこに流れる相場の字の指定。
+ *
+ * 帯の高さは **字の指定から決める** (#888)。 打ち消しの上限は `帯の高さ x 0.8 / 指定` なので、
+ * 帯が `指定 x 0.8` を下回ると上限が 1 を切り、打ち消しが 1 度も効かなくなる。
+ */
+const BROKERAGE_TICKER_SIZE = 11;
+const BROKERAGE_TICK_INNER_H = 14;
 /** ロゴ帯の看板の字の指定。 */
 const BROKERAGE_SIGN_SIZE = 12;
 /** 窓の格子。 上端はロゴ帯の下、 下端は基壇の上。 */
-const BROKERAGE_GRID_TOP = 62;
+const BROKERAGE_GRID_TOP = 68;
 const BROKERAGE_CELL_W = 14;
 const BROKERAGE_CELL_H = 18;
 const BROKERAGE_GAP_X = 8;
@@ -490,13 +495,13 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
       <rect x={x - BROKERAGE_SHADE_OUT} y={y} width={BROKERAGE_SHADE_OUT * 2} height={h} fill={accentDarker} />
       {/* 上部電光掲示板 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 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">
+      <rect x={x + 2} y={y + 2} width={w - 4} height={BROKERAGE_TICK_INNER_H} fill="#1a2340" stroke="none" />
+      <text data-cdl-counter-scaled="1" x={cx} y={y + 12} 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 data-cdl-counter-scaled="0" x={cx} y={y + 30} fontSize={BROKERAGE_SIGN_SIZE} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
+      <text data-cdl-counter-scaled="0" x={cx} y={y + BROKERAGE_TICK_H + 18} fontSize={BROKERAGE_SIGN_SIZE} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
         {字引("brokerage.sign")}
       </text>
       {/* window grid (段数は高さ次第、 列は 6 固定) */}
@@ -529,8 +534,10 @@ 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;
+/** 六角形の中に置く清算の字の指定。 */
+const EXCHANGE_SUB_SIZE = 11;
+/** 中央の六角形の外接半径。 看板の字 (指定 11、 字間 1 で幅 83.7) が入る大きさから決めた (#888)。 */
+const EXCHANGE_HEX_R = 52;
 
 export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
@@ -553,7 +560,15 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
     };
   });
   // 中央 hexagon = 縦向き正六角形 (上下に頂点、 30° 回転)
-  const hexR = 45;
+  const hexR = EXCHANGE_HEX_R;
+  /**
+   * 六角形の中で、中心から縦に `d` 離れた高さに引ける横幅。
+   *
+   * 上下の頂点へ向かって細るので、字の帯を `hexR * 2` で見積もると入らない字を入ると
+   * 判定する。 **字の下端の高さで測る** = そこが字の占める範囲でいちばん狭い (#888)。
+   */
+  const 六角の横幅 = (d: number): number =>
+    hexR * Math.sqrt(3) * Math.min(1, Math.max(0, (hexR - Math.abs(d)) / (hexR / 2)));
   const hexPoints = [-90, -30, 30, 90, 150, 210].map((deg) => {
     const rad = (deg * Math.PI) / 180;
     return { x: cx + Math.cos(rad) * hexR, y: cy + Math.sin(rad) * hexR };
@@ -570,7 +585,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 + EXCHANGE_SUB_SIZE * 0.25;
+  const 字下 = 28 + EXCHANGE_SUB_SIZE * 0.25;
   const 外 = Math.max(節点, 六角);
   const ずれ = cy - r.cy;
   const 広がり = {
@@ -580,14 +595,19 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
     右: 外,
   };
   /*
-   * 打ち消しの上限を出す帯 (#887)。 清算の字は六角形の下の空いた所に置くので、幅は絵の横幅を
-   * そのまま使える。 高さは字の下の余り (`字下`) に合わせて 14 を採る。
+   * 打ち消しの上限を出す帯 (#887)。 清算の字は六角形の下寄りに置くので、幅はその高さで
+   * 引ける横幅を採る (#888 で `外 * 2` から改めた。 絵の横幅は六角形の外まで含むため、
+   * 入らない字を入ると判定していた)。 高さは記号との間隔に合わせて 14 を採る。
    *
-   * **看板 `EXCHANGE` と記号 `⇄` は打ち消さない**。 前者は字間 2 を持ち幅が字数に比例し、
+   * **看板 `EXCHANGE` と記号 `⇄` は打ち消さない**。 前者は字間 1 を持ち幅が字数に比例し、
    * 後者は六角形の中に余白を持たない。
    */
   const 打ち消す字ら: 打ち消す字[] = [
-    { text: 字引("exchange.sub"), size: EXCHANGE_SUB_SIZE, 帯: { 幅: 外 * 2, 高さ: 14 } },
+    {
+      text: 字引("exchange.sub"),
+      size: EXCHANGE_SUB_SIZE,
+      帯: { 幅: 六角の横幅(字下), 高さ: 14 },
+    },
   ];
   const 絵 = (倍率: number): JSX.Element => {
     const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
@@ -609,11 +629,11 @@ 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 data-cdl-counter-scaled="0" 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 - 10} fontSize={11} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">{字引("exchange.sign")}</text>
       {/* swap 記号 */}
       <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 data-cdl-counter-scaled="1" x={cx} y={cy + 26} fontSize={EXCHANGE_SUB_SIZE * 倍} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("exchange.sub")}</text>
+      <text data-cdl-counter-scaled="1" x={cx} y={cy + 28} 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} />
@@ -650,12 +670,22 @@ const ATM_SHADOW_RX_RATIO = 0.6;
 const ATM_FLOOR_UP = 6;
 const ATM_FLOOR_H = 10;
 const ATM_FLOOR_RESERVE = 12;
-/** 操作面の自然な大きさ。 これより本体が小さければ丸ごと縮める。 */
-const ATM_PANEL_W = 140;
+/**
+ * 操作面の自然な大きさ。 これより本体が小さければ丸ごと縮める。
+ *
+ * 幅は **画面の字から決める** (#888)。 画面でいちばん長い `SELECT AMOUNT` は指定 11 で
+ * 幅 119.6 になり、画面の内側 (`ATM_PANEL_W - 16`) から左右 4 ずつ空ける分を足すと 136 要る。
+ */
+const ATM_PANEL_W = 152;
 const ATM_PANEL_H = 146;
-/** 全体の幅。 上限は今までと同じ 140。 */
+/**
+ * 全体の幅。
+ *
+ * 上限を操作面と同じにする = 上限が操作面より狭いと `面` が 1 を切り、操作面の字が
+ * どんな箱でも指定より小さく描かれる (#888)。
+ */
 const ATM_W_MIN = 100;
-const ATM_W_MAX = 140;
+const ATM_W_MAX = ATM_PANEL_W;
 /** 全体の高さの下限。 看板 + 間 + 本体 30 + 床帯。 */
 const ATM_H_MIN = ATM_SIGN_H + ATM_SIGN_GAP + 30 + ATM_FLOOR_RESERVE;
 
@@ -698,15 +728,13 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
   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 を持ち幅が字数に比例する) も据え置く。
+   * **操作面の字は打ち消さない** (#887 / #888)。 打ち消しの倍率は絵に 1 つで、いちばん余白の
+   * 無い字が全体の上限を決める。 鍵盤は 18x10 の鍵に数字を載せるため余白が無く
+   * (10 * 0.8 / 7 = 1.14 に対し幅は 18 / 字の幅)、鍵を含む操作面では上限が 1 前後に張り付く。
+   * 乗せても倍率が動かないので、印だけ付けて空回りさせない。
    *
-   * 縮む前から画面の字が読める大きさに届かないこと自体は別の課題 (cardene777/cdl#888)。
+   * 画面の 3 行とカード投入口の札は #888 で指定 11 に上げた。 行の間隔は 14 で、
+   * 指定 11 の字 (上 7.9 / 下 2.8) が上下の行にも画面の枠にも触れない。
    */
   const 絵 = (
     <g>
@@ -720,9 +748,9 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
       <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 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>
+        <text data-cdl-counter-scaled="0" x={0} y={28} fontSize={11} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#e5c07b">お引出し</text>
+        <text data-cdl-counter-scaled="0" x={0} y={42} fontSize={11} fontWeight={700} textAnchor="middle" fill="#a4b5f2">{字引("atm.screen")}</text>
+        <text data-cdl-counter-scaled="0" x={0} y={56} fontSize={11} 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} />
         {(() => {
@@ -733,7 +761,7 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
           const keyW = 18;
           const keyH = 10;
           const keyGap = 4;
-          const startX = 面左 + 14;
+          const startX = 面左 + (ATM_PANEL_W - (5 * keyW + 4 * keyGap)) / 2;
           return keys.map((k, i) => {
             const row = Math.floor(i / 5);
             const col = i % 5;
@@ -750,7 +778,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 data-cdl-counter-scaled="0" 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={11} 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-software.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
+import { 打ち消しの倍率, type 打ち消す字 } from "./shape-region";
 
 /**
  * Shape-driven software 6 kinds (CAR-1111 Phase 2-B)。
@@ -217,6 +218,8 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
   const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
   const 余白 = 16;
   const 帯 = 28;
+  // 帯の名札の指定。 中の行と揃える = 1 つだけ小さいと縮んだ箱で真っ先に読めなくなる (#891)
+  const 帯の字 = 12.5;
   const 角 = 10;
   const 先頭 = 26;
   const 行間 = 22;
@@ -226,7 +229,7 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
       { 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" },
       { 左: 30, 字: 12.5, 色: "#e6edf3", 文: "pnpm build" },
     ],
-    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: 字引("terminal.output") }],
+    [{ 左: 16, 字: 12.5, 色: "#8b95a5", 文: 字引("terminal.output") }],
     [{ 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" }],
   ];
   // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
@@ -266,7 +269,7 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
           <text
             x={x + w / 2}
             y={y + barH / 2 + 4 * 倍}
-            fontSize={11 * 倍}
+            fontSize={帯の字 * 倍}
             fontFamily={lineFont}
             textAnchor="middle"
             fill="#7a8290"
@@ -355,6 +358,8 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
   const 太さ = 9;
   const 隙間 = 6;
   const 持ち上げ = 8;
+  // 行番号の指定。 溝 (幅 24) に 9.46、行の間隔 (20) に 10.7 で収まる (#891 で 10.5 から)
+  const 行番号の字 = 11;
   const lines = [
     [
       { c: "#c678dd", w: 40 },
@@ -377,20 +382,30 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
       { c: "#e6edf3", w: 40 },
     ],
   ];
-  const 最長 = Math.max(
-    ...lines.map(
-      (tokens) => tokens.reduce((sum, token) => sum + token.w, 0) + 隙間 * (tokens.length - 1),
-    ),
-  );
-  // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
-  const 自然幅 = 溝 + 字下げ + 最長 + 余白;
   // 最終行の token と行番号まで入る自然高を使い、 縦にも同じ倍率を適用できるようにする。
   const 自然高 =
-    タブ高 + 行頭 + 行間 * (lines.length - 1) + Math.max(太さ - 持ち上げ, 10.5 * DESCENT);
-  // 右 132 のはみ出しは、 中の行を本体へ縦横同率で収めて直す。
-  // fitArt で絵ごと縮めると tab の字と行番号が読めなくなるため使わない。
-  // 幅 300・高さ 200 では倍率が 1 のままなので、 従来値を保つ。
-  const 倍 = Math.min(1, w / 自然幅, bodyH / 自然高);
+    タブ高 + 行頭 + 行間 * (lines.length - 1) + Math.max(太さ - 持ち上げ, 行番号の字 * DESCENT);
+  /*
+   * 倍率は **高さだけから出す** (#891)。
+   *
+   * 行の帯は code の見た目を作る飾りで、 いちばん長い行は 228 ある。 幅も倍率に入れると
+   * 飾りの長さが字の大きさを決めてしまい、 120x110 の箱で行番号が 4.33 world まで落ちた。
+   * 狭い箱では帯を縮めず **本体の右端で切る** = 実際の editor も長い行を切って見せる。
+   *
+   * 幅 300・高さ 200 では倍率が 1 のままなので、 従来値を保つ。
+   */
+  const 倍 = Math.min(1, bodyH / 自然高);
+  /*
+   * 縮んだ分を字の指定で打ち消す (#891、 仕組みは #886 と同じ)。
+   *
+   * 帯は tab の札 (幅 `タブ幅` / 高さ `タブ高`) と、行番号が乗る溝 (幅 `溝 - 持ち上げ` /
+   * 高さ `行間`)。 絵に 1 つの倍率なので、狭い方が全体の上限になる。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: 字引("codeBlock.fileName"), size: 11, 帯: { 幅: タブ幅, 高さ: タブ高 } },
+    { text: "1", size: 行番号の字, 帯: { 幅: 溝 - 持ち上げ, 高さ: 行間 } },
+  ];
+  const 倍返し = 打ち消しの倍率(倍, 打ち消す字ら);
   const tabW = タブ幅 * 倍;
   const tabH = タブ高 * 倍;
   const 丸 = 角 * 倍;
@@ -421,9 +436,10 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
           />
           <path d={`M ${x} ${y + tabH} L ${x + w} ${y + tabH}`} stroke="#2a3140" strokeWidth={1} />
           <text
+            data-cdl-counter-scaled="1"
             x={x + tabW / 2}
             y={y + tabH / 2 + 4 * 倍}
-            fontSize={11 * 倍}
+            fontSize={11 * 倍 * 倍返し}
             fontFamily={lineFont}
             textAnchor="middle"
             fill="#e6edf3"
@@ -441,9 +457,10 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
             return (
               <g key={i}>
                 <text
+                  data-cdl-counter-scaled="1"
                   x={x + gutterW - 持ち上げ * 倍}
                   y={codeY0 + i * lineH}
-                  fontSize={10.5 * 倍}
+                  fontSize={行番号の字 * 倍 * 倍返し}
                   fontFamily={lineFont}
                   textAnchor="end"
                   fill="#4a5266"
@@ -451,19 +468,22 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
                   {i + 1}
                 </text>
                 {toks.map((t, j) => {
-                  const rect = (
-                    <rect
-                      key={j}
-                      x={cursor}
-                      y={codeY0 + i * lineH - 持ち上げ * 倍}
-                      width={t.w * 倍}
-                      height={太さ * 倍}
-                      rx={2 * 倍}
-                      fill={t.c}
-                      fillOpacity={0.85}
-                      stroke="none"
-                    />
-                  );
+                  // 本体の右端で切る。 端から出る帯は幅を詰め、端の外から始まる帯は描かない
+                  const 描く幅 = Math.min(t.w * 倍, x + w - 余白 * 倍 - cursor);
+                  const rect =
+                    描く幅 > 0 ? (
+                      <rect
+                        key={j}
+                        x={cursor}
+                        y={codeY0 + i * lineH - 持ち上げ * 倍}
+                        width={描く幅}
+                        height={太さ * 倍}
+                        rx={2 * 倍}
+                        fill={t.c}
+                        fillOpacity={0.85}
+                        stroke="none"
+                      />
+                    ) : null;
                   cursor += (t.w + 隙間) * 倍;
                   return rect;
                 })}
@@ -512,21 +532,38 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
   const w = Math.max(0, node.w - 線 * 2 - 影);
   const h = Math.max(0, node.h - 線 * 2 - 影);
   const 帯間余白 = 4;
-  const 左右余白 = 14;
-  const 上段隙間 = 8;
+  /*
+   * 上段 (`ID` と状態の札) の寸法は **字の下限から逆算する** (#891)。
+   *
+   * 札の中身は縦横まとめて `倍` で縮むので、字の大きさは `指定 x 倍` になる。
+   * 120x110 の箱では描ける幅が 112.8 しか無く、指定 11 の字を 8 world に保つには
+   * 上段の自然幅を 155 以下に収める必要がある (112.8 / (8 / 11) = 155.1)。
+   *
+   * 変更前は 166.8 で、字が 7.44 world まで落ちていた。
+   */
+  const 左右余白 = 12;
+  const 上段隙間 = 6;
   const 優先帯高 = 10;
   const ID文 = 字引("kanbanCard.id");
   const ID基準 = 30;
   const ID字 = 11;
   const ID字間 = 1;
   const PILL上 = 20;
-  const PILL幅 = 54;
+  // 札の幅は状態の字から決める = 指定 11 の `IN PROG` は幅 55.4、丸い端に触れない余白を足す (#888)
+  const PILL幅 = 62;
   const PILL高 = 16;
-  const PILL字 = 9;
+  const PILL字 = 11;
+  /*
+   * 状態の字に字間を置かない (#891)。 字間は幅を字数に比例して伸ばすため、札を 8 広げないと
+   * 収まらない。 その 8 は上段の自然幅に乗り、120x110 の箱で全部の字を 0.4 world 下げる。
+   */
+  const PILL字間 = 0;
   const FOOTER下 = 22;
   const AVATAR中心Y = 4;
   const AVATAR半径 = 9;
   const AVATAR枠 = 1.5;
+  // 頭文字の指定。 半径 9 の丸の内側 (一辺 12.7) に 9.46 x 10.7 で収まる (#891 で 10 から)
+  const AVATAR字 = 11;
   const 名前字 = 17;
   const 説明基準比 = 20 / 17;
   const 説明字比 = 12 / 17;
@@ -608,7 +645,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             y={pillY + 12 * 倍}
             fontSize={PILL字 * 倍}
             fontWeight={700}
-            letterSpacing={1 * 倍}
+            letterSpacing={PILL字間 * 倍}
             textAnchor="middle"
             fill="#5a4a1a"
             fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
@@ -650,7 +687,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             <text
               x={9 * 倍}
               y={8 * 倍}
-              fontSize={10 * 倍}
+              fontSize={AVATAR字 * 倍}
               fontWeight={700}
               textAnchor="middle"
               fill="#ffffff"
@@ -669,7 +706,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             <text
               x={23 * 倍}
               y={8 * 倍}
-              fontSize={10 * 倍}
+              fontSize={AVATAR字 * 倍}
               fontWeight={700}
               textAnchor="middle"
               fill="#ffffff"

package/src/kinds/text-width.ts

@@ -71,3 +71,15 @@ export function textWidth(s: string, size: number, 字送り = 0): number {
   }
   return 幅 * size + 字送り * 字数;
 }
+
+/**
+ * 縮んだ絵の中の字の下限 (world 座標、 #891)。
+ *
+ * 箱に合わせて中身を縮める種別は、倍率をそのまま字へ掛けると読めない大きさまで落ちる
+ * (実測 = 120x110 の箱で 3.00 world)。 **入れ物に入る限りはここまでで止める**。
+ *
+ * 絵が縮まない箱の下限 (11) とは別の値で、そちらは検査側
+ * (`test/art-text-declarations.ts` の `絵の中の字の下限`) が持つ。 縮んだ箱では帯が
+ * 上限を決めるため 11 に届かないことがあり、2 つを同じ値にはできない。
+ */
+export const 縮んだ絵の字の下限 = 8;