@cardenelabs/cdl 0.75.0 → 0.76.0

package/package.json

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

@@ -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

@@ -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 解決)
   //