@cardenelabs/cdl 0.74.0 → 0.76.0

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} />
@@ -338,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>
   );
@@ -392,10 +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;
+/**
+ * 電光掲示板の内側の帯と、そこに流れる相場の字の指定。
+ *
+ * 帯の高さは **字の指定から決める** (#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;
@@ -454,7 +470,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" />
@@ -464,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 x={cx} y={y + 9} fontSize={5.5} 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 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 + BROKERAGE_TICK_H + 18} fontSize={BROKERAGE_SIGN_SIZE} fontWeight={700} letterSpacing={2.5} textAnchor="middle" fill="#0f1830">
         {字引("brokerage.sign")}
       </text>
       {/* window grid (段数は高さ次第、 列は 6 固定) */}
@@ -492,7 +523,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 +534,11 @@ 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 = 11;
+/** 中央の六角形の外接半径。 看板の字 (指定 11、 字間 1 で幅 83.7) が入る大きさから決めた (#888)。 */
+const EXCHANGE_HEX_R = 52;
+
 export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
@@ -523,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 };
@@ -540,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 + 8 * 0.25;
+  const 字下 = 28 + EXCHANGE_SUB_SIZE * 0.25;
   const 外 = Math.max(節点, 六角);
   const ずれ = cy - r.cy;
   const 広がり = {
@@ -549,7 +594,24 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
     左: 外,
     右: 外,
   };
-  const 絵 = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 清算の字は六角形の下寄りに置くので、幅はその高さで
+   * 引ける横幅を採る (#888 で `外 * 2` から改めた。 絵の横幅は六角形の外まで含むため、
+   * 入らない字を入ると判定していた)。 高さは記号との間隔に合わせて 14 を採る。
+   *
+   * **看板 `EXCHANGE` と記号 `⇄` は打ち消さない**。 前者は字間 1 を持ち幅が字数に比例し、
+   * 後者は六角形の中に余白を持たない。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    {
+      text: 字引("exchange.sub"),
+      size: EXCHANGE_SUB_SIZE,
+      帯: { 幅: 六角の横幅(字下), 高さ: 14 },
+    },
+  ];
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* 8 dashed radial lines */}
       {nodes.map((n, i) => (
@@ -567,17 +629,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 - 10} fontSize={11} fontWeight={700} letterSpacing={1} 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 + 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} />
       ))}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
@@ -607,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;
 
@@ -654,21 +727,30 @@ 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 / #888)。 打ち消しの倍率は絵に 1 つで、いちばん余白の
+   * 無い字が全体の上限を決める。 鍵盤は 18x10 の鍵に数字を載せるため余白が無く
+   * (10 * 0.8 / 7 = 1.14 に対し幅は 18 / 字の幅)、鍵を含む操作面では上限が 1 前後に張り付く。
+   * 乗せても倍率が動かないので、印だけ付けて空回りさせない。
+   *
+   * 画面の 3 行とカード投入口の札は #888 で指定 11 に上げた。 行の間隔は 14 で、
+   * 指定 11 の字 (上 7.9 / 下 2.8) が上下の行にも画面の枠にも触れない。
+   */
   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={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} />
         {(() => {
@@ -679,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;
@@ -688,7 +770,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 +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 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-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 */}

package/src/kinds/shape-software.tsx

@@ -520,9 +520,10 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
   const ID字 = 11;
   const ID字間 = 1;
   const PILL上 = 20;
-  const PILL幅 = 54;
+  // 札の幅は状態の字から決める = 指定 11 の `IN PROG` は字間 1 で幅 62.4、丸い端に触れない余白を足す (#888)
+  const PILL幅 = 70;
   const PILL高 = 16;
-  const PILL字 = 9;
+  const PILL字 = 11;
   const FOOTER下 = 22;
   const AVATAR中心Y = 4;
   const AVATAR半径 = 9;

package/src/lang.ts

@@ -68,8 +68,14 @@ const en = {
   "paymentProvider.sign": "PAY",
   /** `shape-payment-provider` の状態の札 */
   "paymentProvider.status": "PROCESSING",
-  /** `shape-brokerage` の株価の帯 */
-  "brokerage.ticker": "▲NKY 38,240 ▲AAPL 194",
+  /**
+   * `shape-brokerage` の株価の帯。
+   *
+   * **1 銘柄に絞る** (#888)。 電光掲示板の内側は幅 136 しか無く、2 銘柄を指定 11 で描くと
+   * 幅 181 になってビルの外へ出る。 板が流れている雰囲気は帯そのもの (黒地に緑の等幅) が
+   * 担うので、銘柄を減らしても絵は変わらない。
+   */
+  "brokerage.ticker": "▲NKY 38,240",
   /** `shape-brokerage` の看板 */
   "brokerage.sign": "$ SECURITIES",
   /** `shape-exchange` の看板 */
@@ -284,7 +290,7 @@ const ja: Record<CdlTextKey, string> = {
   "trustBank.sign": "信託",
   "paymentProvider.sign": "決済",
   "paymentProvider.status": "処理中",
-  "brokerage.ticker": "▲日経 38,240 ▲東証 2,710",
+  "brokerage.ticker": "▲日経 38,240",
   "brokerage.sign": "¥ 証券",
   "exchange.sign": "取引所",
   "exchange.sub": "清算",

package/src/visual-validate.ts

@@ -500,7 +500,6 @@ export interface VisualValidationReport {
 
 const MIN_NODE_W = 80;
 const MIN_NODE_H = 40;
-const MIN_FONT_SIZE = 12;
 const ROW_FORMAT = /^[^:]+:\s*.+$/;
 
 function emptyCounts(): Record<VisualAxis, number> {
@@ -2007,10 +2006,6 @@ function runAxes(
       );
     }
   }
-  // edge label の font size は collisions.ts で BBox 計算済、 ここでは MIN_FONT_SIZE 違反のみ check
-  // (実装では cdl が 12px 以下を render することはないので no-op、 将来拡張用)
-  void MIN_FONT_SIZE;
-
   // ───────────────────────────────────────────────────────────
   // Axis 4: row-format (rows[] format + placeholder 解決)
   //