@cardenelabs/cdl 0.5.0

package/src/kinds/shape-finance.tsx

@@ -0,0 +1,706 @@
+import type { JSX } from "react";
+import { shapeRegion, labelPlan, fitArt } from "./shape-region";
+import type { LaidNode } from "../types";
+
+/**
+ * Shape-driven finance 7 kinds (CAR-1111 Phase 2-D)。
+ *
+ * bank / trust-bank / payment-provider / credit-card / brokerage / exchange / atm。
+ *
+ * 設計原則。
+ * 1. shape 本体は node.cx, node.cy を中心に上下左右対称に配置する
+ * 2. 中央に 1 つの視覚シンボル (アイコン) を大きく置く
+ * 3. label は shape の下に固定 (下から 40px 上を title の baseline)
+ * 4. 詳細情報 (氏名 / 金額 / 番号) は削って抽象化、 一目でそれと分かる silhouette 優先
+ */
+
+type ShapeProps = {
+  node: LaidNode;
+  active: boolean;
+};
+
+const commonFrame = (active: boolean) => ({
+  fill: "var(--cdl-node-fill, #ffffff)",
+  stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+  strokeWidth: active ? 3 : 1.5,
+});
+
+/** 肩書の字間。 幅で縮める時はこれも同じ割合で詰める。 */
+const LABEL_EYEBROW_SPACING = 2;
+
+/**
+ * 1 字の幅は字の大きさの何倍か。 呼び出し側の書体
+ * (`"Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif`) を太字 700 で実測した値。
+ *
+ * **一律の係数は使えない**。 半角の実測は最小 0.271 (`i` / `j` / `l`) から最大 1.038 (`W`) まで
+ * 4 倍近く開く。 平均の 0.630 で置くと `W` の並びで 3 分の 2 しか見ず、 その比で縮めても箱から
+ * 出たままになる (`W` 20 字が実測 390.4 に対し 0.7 の見積りで 224、 縮めた後も 86 出た)。
+ *
+ * | 階級 | 実測の最大 | 係数 |
+ * |---|---|---|
+ * | 細い (`i j l I . , : ; '` `!` と空白) | 0.365 | 0.37 |
+ * | 広い (`W @ % M m`) | 1.038 (`W`) | 1.04 |
+ * | その他の ASCII | 0.850 (`w`) | 0.86 |
+ * | ASCII の外 | 1.000 (和文) | 1.04 |
+ *
+ * 並 400 の最大は 0.985 なので太字の値で覆える。
+ */
+const 細字 = new Set([..."ijlI.,:;'! "]);
+const 広字 = new Set([..."W@%Mm"]);
+const 細字比 = 0.37;
+const 広字比 = 1.04;
+const 並字比 = 0.86;
+
+/**
+ * 1 字が字の大きさの何倍か。
+ *
+ * **ASCII の外は分類しない**。 「どの字が全角か」 を手で列挙する限り抜けは出続け、 抜けは必ず
+ * **過小見積り** = 収まっていない物を収まっていると判定する向きに外れる。 実際に 3 回とも別の
+ * 抜け方をした (範囲の端点に見た目の同じ字が入る / 私用領域が混じる / 区画指定からカタカナ拡張と
+ * CJK 互換が落ちる)。
+ *
+ * ASCII の外は実測の最大 `1.04` で数える。 全角の実測は 1.000 なので 4% 広く見積もるだけで、
+ * 半角カナ (約 0.5) も外字も Latin-1 もギリシャ文字もまとめて安全側に倒れる。 代償は和文の名前が
+ * 4% 余分に縮むことだけで、 過小見積りが構造的に起きなくなる。
+ */
+function 字の比(c: string): number {
+  if (細字.has(c)) return 細字比;
+  if (広字.has(c)) return 広字比;
+  return (c.codePointAt(0) ?? 0) < 128 ? 並字比 : 広字比;
+}
+
+/** 字の並びの幅の見積り。 字ごとの比を足して、 字間を字数分足す。 */
+function 字幅(文字列: string, 大きさ: number, 字間: number): number {
+  let 幅 = 0;
+  let 字数 = 0;
+  for (const c of 文字列) {
+    幅 += 大きさ * 字の比(c);
+    字数 += 1;
+  }
+  return 幅 + 字間 * 字数;
+}
+
+/**
+ * 1 行を箱の幅に収める字の大きさと字間。
+ *
+ * `labelPlan` は箱の **高さ** だけから字の大きさを決めていて、 幅も字数も見ていない。 その
+ * ままだと長い名前が箱の左右へ出る (幅 140 / 高さ 72 で `LongApplicationService` は 12px で
+ * 175.8 = 左右へ 17.9)。 絵と違って `fitArt` は名前を包まないので、 ここで行ごとに縮める。
+ *
+ * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
+ */
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+  const 幅 = 字幅(文字列, 大きさ, 字間);
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
+  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+}
+
+/**
+ * 名前の塊を描く。 縦の位置と大きさは `labelPlan` が決め (箱の下端から積み上げる、 #433)、
+ * 横は `幅に収める` が箱の幅に合わせて縮める。
+ */
+function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
+  const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
+  return (
+    <>
+      {node.eyebrow && plan.肩書 && (
+        <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
+          {node.eyebrow}
+        </text>
+      )}
+      <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
+        {node.title}
+      </text>
+      {node.subtitle && plan.説明 && (
+        <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+          {node.subtitle}
+        </text>
+      )}
+    </>
+  );
+}
+
+/**
+ * shape の描画 region を計算する helper。
+ * label 用に下部を除外、 残り領域を shape に割当。
+ */
+
+/**
+ * 神殿の絵 (`shape-bank` / `shape-trust-bank`) の固定部品 (#433)。
+ *
+ * 階段と桁と台は建物の外へ出る。 出る量は **箱の高さに依らない** 固定量なので、 建物を帯
+ * いっぱいに描くとその分がそのまま箱の外へ出る。 だから建物の寸法を決める前に、 **描ける帯を
+ * この分だけ先に狭める**。
+ *
+ * 広がりは描く側のこの定数から出す = 表に書き写すと絵を変えた時に片方だけ古くなる。
+ */
+const BANK_PEDIMENT_H = 44;
+const BANK_ARCHITRAVE_H = 14;
+const BANK_BASE_H = 16;
+/** 破風の頂点が建物の上端より高い分。 */
+const BANK_PEDIMENT_RISE = 4;
+/** 桁と台が建物の左右へ出る量。 */
+const BANK_BODY_OUT = 8;
+/** 階段。 段ごとに横 24 / 縦 8 ずれ、 厚み 9、 枠 1。 一番外の段が絵の左右と下端を決める。 */
+const BANK_STEP_DX = 24;
+const BANK_STEP_DY = 8;
+const BANK_STEP_H = 9;
+const BANK_STEP_SW = 1;
+/** 柱が潰れない高さ。 柱頭 6 + 胴 12 + 柱脚 6。 */
+const BANK_COLUMN_MIN = 24;
+/** 建物の幅。 下限は柱 4 本と隙間 5 本が潰れない幅。 */
+const BANK_BLD_W_MIN = 120;
+const BANK_BLD_W_MAX = 280;
+
+/** shape-bank = 銀行 (Greek 神殿 pediment + $ + 4 columns + base、 中央配置) */
+export function ShapeBankNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const 線 = frame.strokeWidth / 2;
+  const nSteps = 3;
+  // 建物の外へ出る量。 上は破風の頂点、 下は一番下の段、 左右は一番外の段と台のうち広い方
+  const 上出 = BANK_PEDIMENT_RISE + 線;
+  const 下出 = (nSteps - 1) * BANK_STEP_DY + BANK_STEP_H + BANK_STEP_SW / 2;
+  const 横出 = Math.max(((nSteps - 1) * BANK_STEP_DX) / 2 + BANK_STEP_SW / 2, BANK_BODY_OUT + 線);
+  // 帯を狭めてから建物の高さを決める。 部品が潰れる箱では下限で止め、 入り切らない分は
+  // `fitArt` が絵ごと縮める (縦横の比は保たれる)
+  const bldHMin = BANK_PEDIMENT_H + BANK_ARCHITRAVE_H + BANK_BASE_H + BANK_COLUMN_MIN;
+  const 縦 = Math.max(r.availH, bldHMin + 上出 + 下出);
+  const bldH = 縦 - 上出 - 下出;
+  const bldW = Math.min(Math.max(r.availW - 横出 * 2, BANK_BLD_W_MIN), BANK_BLD_W_MAX);
+  const x = r.cx - bldW / 2;
+  const y = r.cy - 縦 / 2 + 上出;
+  const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: bldW / 2 + 横出, 右: bldW / 2 + 横出 };
+  const pedimentH = BANK_PEDIMENT_H;
+  const architraveH = BANK_ARCHITRAVE_H;
+  const baseH = BANK_BASE_H;
+  const columnAreaY = y + pedimentH + architraveH;
+  const columnAreaH = bldH - pedimentH - architraveH - baseH;
+  const nCols = 4;
+  const colGap = 14;
+  const areaW = bldW - 24;
+  const colW = (areaW - colGap * (nCols + 1)) / nCols;
+  const 絵 = (
+    <g>
+      {Array.from({ length: nSteps }, (_, i) => i).map((i) => {
+        const w = bldW + (nSteps - 1 - i) * BANK_STEP_DX;
+        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 - 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>
+      <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} />
+      {Array.from({ length: nCols }, (_, i) => i).map((i) => {
+        const colCx = x + 12 + colGap + i * (colW + colGap) + colW / 2;
+        return (
+          <g key={i}>
+            <rect x={colCx - colW / 2 - 4} y={columnAreaY} width={colW + 8} height={6} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+            <rect x={colCx - colW / 2} y={columnAreaY + 6} width={colW} height={columnAreaH - 12} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+            <line x1={colCx - colW * 0.3} y1={columnAreaY + 12} x2={colCx - colW * 0.3} y2={columnAreaY + columnAreaH - 12} stroke={frame.stroke} strokeWidth={0.8} opacity={0.5} />
+            <line x1={colCx + colW * 0.3} y1={columnAreaY + 12} x2={colCx + colW * 0.3} y2={columnAreaY + columnAreaH - 12} stroke={frame.stroke} strokeWidth={0.8} opacity={0.5} />
+            <rect x={colCx - colW / 2 - 4} y={columnAreaY + columnAreaH - 6} width={colW + 8} height={6} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+          </g>
+        );
+      })}
+      <rect data-cdl-role="node-body" x={x - BANK_BODY_OUT} y={y + bldH - baseH} width={bldW + BANK_BODY_OUT * 2} height={baseH} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.4} stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * 王冠 (`shape-trust-bank`) の固定部品。 建物の上に載るので絵の上端はここで決まる。
+ * 神殿の部分は `BANK_*` と同じ意味。
+ */
+const TRUST_CROWN_RISE = 4;
+const TRUST_CROWN_TOP = 22;
+const TRUST_CROWN_HALF = 32;
+const TRUST_PEDIMENT_H = 40;
+const TRUST_ARCHITRAVE_H = 14;
+const TRUST_BASE_H = 14;
+const TRUST_BODY_OUT = 8;
+/** 建物の幅。 下限は柱 3 本と隙間 4 本が潰れない幅。 */
+const TRUST_BLD_W_MIN = 140;
+const TRUST_BLD_W_MAX = 280;
+
+/** shape-trust-bank = 信託銀行 (王冠 + 神殿 3 columns、 中央柱に余計装飾なし) */
+export function ShapeTrustBankNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const 線 = frame.strokeWidth / 2;
+  const nSteps = 2;
+  // 銀行と同じ考え方。 上は王冠の頂点、 下は一番下の段、 左右は段と台のうち広い方
+  const 上出 = TRUST_CROWN_RISE + TRUST_CROWN_TOP + 線;
+  const 下出 = (nSteps - 1) * BANK_STEP_DY + BANK_STEP_H + BANK_STEP_SW / 2;
+  const 横出 = Math.max(((nSteps - 1) * BANK_STEP_DX) / 2 + BANK_STEP_SW / 2, TRUST_BODY_OUT + 線);
+  const bldHMin = TRUST_PEDIMENT_H + TRUST_ARCHITRAVE_H + TRUST_BASE_H + BANK_COLUMN_MIN;
+  const 縦 = Math.max(r.availH, bldHMin + 上出 + 下出);
+  const bldH = 縦 - 上出 - 下出;
+  const bldW = Math.min(Math.max(r.availW - 横出 * 2, TRUST_BLD_W_MIN), TRUST_BLD_W_MAX);
+  const x = r.cx - bldW / 2;
+  const y = r.cy - 縦 / 2 + 上出;
+  // 王冠は半幅 32 で描かれるが、 建物の下限 140 の半分に段の出幅を足した 82.5 より内側に
+  // 収まるため、 左右を決めるのは常に建物側になる
+  const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: bldW / 2 + 横出, 右: bldW / 2 + 横出 };
+  const pedimentH = TRUST_PEDIMENT_H;
+  const architraveH = TRUST_ARCHITRAVE_H;
+  const baseH = TRUST_BASE_H;
+  const columnAreaY = y + pedimentH + architraveH;
+  const columnAreaH = bldH - pedimentH - architraveH - baseH;
+  const nCols = 3;
+  const colGap = 22;
+  const areaW = bldW - 30;
+  const colW = (areaW - colGap * (nCols + 1)) / nCols;
+  const 絵 = (
+    <g>
+      <g transform={`translate(${r.cx}, ${y - TRUST_CROWN_RISE})`}>
+        <path d={`M ${-TRUST_CROWN_HALF} 0 L -22 -18 L -10 -6 L 0 ${-TRUST_CROWN_TOP} L 10 -6 L 22 -18 L ${TRUST_CROWN_HALF} 0 Z`} fill="#e5c07b" stroke="#a67c00" strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
+        <rect x={-TRUST_CROWN_HALF} y={0} width={TRUST_CROWN_HALF * 2} height={5} fill="#c99820" stroke="#a67c00" strokeWidth={BANK_STEP_SW} />
+        <circle cx={-22} cy={-14} r={3} fill="#c9302c" stroke="#7a1a10" strokeWidth={0.8} />
+        <circle cx={0} cy={-18} r={4} fill="#3a80d1" stroke="#1a4a80" strokeWidth={0.8} />
+        <circle cx={22} cy={-14} r={3} fill="#c9302c" stroke="#7a1a10" strokeWidth={0.8} />
+      </g>
+      {Array.from({ length: nSteps }, (_, i) => i).map((i) => {
+        const w = bldW + (nSteps - 1 - i) * BANK_STEP_DX;
+        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">
+        TRUST
+      </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} />
+      {Array.from({ length: nCols }, (_, i) => i).map((i) => {
+        const colCx = x + 15 + colGap + i * (colW + colGap) + colW / 2;
+        return (
+          <g key={i}>
+            <rect x={colCx - colW / 2 - 4} y={columnAreaY} width={colW + 8} height={6} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+            <rect x={colCx - colW / 2} y={columnAreaY + 6} width={colW} height={columnAreaH - 12} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+            <line x1={colCx - colW * 0.3} y1={columnAreaY + 12} x2={colCx - colW * 0.3} y2={columnAreaY + columnAreaH - 12} stroke={frame.stroke} strokeWidth={0.8} opacity={0.5} />
+            <line x1={colCx + colW * 0.3} y1={columnAreaY + 12} x2={colCx + colW * 0.3} y2={columnAreaY + columnAreaH - 12} stroke={frame.stroke} strokeWidth={0.8} opacity={0.5} />
+            <rect x={colCx - colW / 2 - 4} y={columnAreaY + columnAreaH - 6} width={colW + 8} height={6} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+          </g>
+        );
+      })}
+      <rect data-cdl-role="node-body" x={x - TRUST_BODY_OUT} y={y + bldH - baseH} width={bldW + TRUST_BODY_OUT * 2} height={baseH} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.4} stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-payment-provider = P2-A base (中央 provider box + PAY header + processing spinner + PROCESSING label) */
+export function ShapePaymentProviderNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 4;
+  const boxW = Math.min(r.availW - 60, 140);
+  const boxH = Math.min(r.availH - 40, 200);
+  const x = cx - boxW / 2;
+  const y = cy - boxH / 2;
+  const headerH = 32;
+  const accentDark = "#1a4a68";
+  const accentDarker = "#0f3450";
+  return (
+    <g>
+      {/* drop shadow */}
+      <ellipse cx={cx} cy={y + boxH + 10} rx={boxW * 0.42} ry={6} fill={frame.stroke} opacity={0.2} stroke="none" />
+      {/* provider box */}
+      <rect data-cdl-role="node-body" x={x} y={y} width={boxW} height={boxH} rx={10} fill="#255a7a" stroke={accentDark} strokeWidth={frame.strokeWidth} />
+      {/* PAY header */}
+      <rect x={x} y={y} width={boxW} height={headerH} rx={10} fill={accentDarker} />
+      <rect x={x} y={y + headerH - 8} width={boxW} height={8} fill={accentDarker} />
+      <text x={cx} y={y + 22} fontSize={16} fontWeight={700} letterSpacing={4} textAnchor="middle" fill="#e5c07b">PAY</text>
+      {/* processing spinner (rotate anim) */}
+      <g>
+        <circle cx={cx} cy={cy + 4} r={22} fill="none" stroke="#e5c07b" strokeWidth={3.5} strokeDasharray="38 24" strokeLinecap="round">
+          <animateTransform attributeName="transform" type="rotate" from={`0 ${cx} ${cy + 4}`} to={`360 ${cx} ${cy + 4}`} dur="2s" repeatCount="indefinite" />
+        </circle>
+        <circle cx={cx} cy={cy + 4} r={10} fill="#e5c07b" stroke={accentDarker} strokeWidth={1.5} />
+        <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">PROCESSING</text>
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-credit-card = クレジットカード (シンプル、 chip + NFC + 4 digit block + brand) */
+export function ShapeCreditCardNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cardW = Math.min(r.availW - 30, 260);
+  const cardH = Math.min(r.availH - 20, 160);
+  const x = r.cx - cardW / 2;
+  const y = r.cy - cardH / 2;
+  return (
+    <g>
+      <rect x={x + 4} y={y + 4} width={cardW} height={cardH} rx={16} fill={frame.stroke} opacity={0.25} stroke="none" />
+      <rect data-cdl-role="node-body" x={x} y={y} width={cardW} height={cardH} rx={16} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="#1a4a68" strokeWidth={frame.strokeWidth} />
+      <path d={`M ${x} ${y} L ${x + cardW * 0.7} ${y} L ${x} ${y + cardH * 0.7} Z`} fill="#ffffff" opacity={0.1} stroke="none" />
+      {/* IC chip */}
+      <rect x={x + 26} y={y + cardH / 2 - 22} width={46} height={36} rx={5} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+      <rect x={x + 30} y={y + cardH / 2 - 18} width={38} height={28} rx={3} fill="none" stroke="#a67c00" strokeWidth={1.2} />
+      <line x1={x + 26} y1={y + cardH / 2 - 4} x2={x + 72} y2={y + cardH / 2 - 4} stroke="#a67c00" strokeWidth={0.8} />
+      <line x1={x + 49} y1={y + cardH / 2 - 22} x2={x + 49} y2={y + cardH / 2 + 14} stroke="#a67c00" strokeWidth={0.8} />
+      {/* NFC */}
+      <g transform={`translate(${x + 88}, ${y + cardH / 2 - 16})`} fill="none" stroke="#ffffff" strokeWidth={2.5} strokeLinecap="round">
+        <path d="M 0 16 Q 10 16, 10 6" />
+        <path d="M 8 24 Q 22 24, 22 6" />
+      </g>
+      {/* 4 digit block dots */}
+      {[0, 1, 2, 3].map((block) => (
+        <g key={block}>
+          {[0, 1, 2, 3].map((dot) => (
+            <circle key={dot} cx={x + 32 + block * (cardW - 64) / 4 + dot * 8} cy={y + cardH - 40} r={2.8} fill="#ffffff" stroke="none" />
+          ))}
+        </g>
+      ))}
+      {/* brand mark */}
+      <circle cx={x + cardW - 48} cy={y + cardH - 24} r={15} fill="#c9302c" opacity={0.9} stroke="none" />
+      <circle cx={x + cardW - 30} cy={y + cardH - 24} r={15} fill="#e5c07b" opacity={0.9} stroke="none" />
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * 本社ビル (`shape-brokerage`) の固定部品 (#433)。
+ *
+ * 電光掲示板 / ロゴ帯 / 基壇と回転扉はビルの上下に貼り付く固定の厚みで、 窓だけが残りを
+ * 埋める。 **窓の段数を残りの高さから出す** ので、 ビルを帯に合わせて伸び縮みさせても窓が
+ * 枠の外へ並ばない (変更前は段数 5 が固定で、 高さ 72 の箱では窓が下へ 136 出ていた)。
+ *
+ * 影と床帯はビルの外へ出る。 出る量は箱の高さに依らないので、 描ける帯を先に狭める。
+ */
+const BROKERAGE_TICK_H = 12;
+const BROKERAGE_LOGO_H = 26;
+/** 窓の格子。 上端はロゴ帯の下、 下端は基壇の上。 */
+const BROKERAGE_GRID_TOP = 62;
+const BROKERAGE_CELL_W = 14;
+const BROKERAGE_CELL_H = 18;
+const BROKERAGE_GAP_X = 8;
+const BROKERAGE_GAP_Y = 8;
+const BROKERAGE_COLS = 6;
+/** 基壇と回転扉が使う、 ビル下端からの高さ。 */
+const BROKERAGE_BASE_H = 26;
+/** 影の楕円をビルの下端からどれだけ下に置くか、 その縦半径と横半径の比。 */
+const BROKERAGE_SHADOW_DY = 12;
+const BROKERAGE_SHADOW_RY = 6;
+const BROKERAGE_SHADOW_RX_RATIO = 0.5;
+/** 床帯がビルの下端と左右へ出る量、 とその厚み。 */
+const BROKERAGE_FLOOR_DY = 2;
+const BROKERAGE_FLOOR_H = 4;
+const BROKERAGE_FLOOR_OUT = 10;
+/** 左端の陰がビルの左へ出る量。 */
+const BROKERAGE_SHADE_OUT = 2;
+/** ビルの幅。 下限は窓 6 列が入る幅。 */
+const BROKERAGE_W_MIN =
+  BROKERAGE_COLS * BROKERAGE_CELL_W + (BROKERAGE_COLS - 1) * BROKERAGE_GAP_X + 6;
+const BROKERAGE_W_MAX = 140;
+/** ビルの高さの下限。 電光 + ロゴ帯 + 基壇が重ならない高さ。 */
+const BROKERAGE_H_MIN = BROKERAGE_TICK_H + BROKERAGE_LOGO_H + BROKERAGE_BASE_H;
+
+/** shape-brokerage = B2-A 大和証券風 (縦長本社 + 上部電光 + $ SECURITIES ロゴ帯 + window grid + entrance 回転扉) */
+export function ShapeBrokerageNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const 線 = frame.strokeWidth / 2;
+  const 上出 = 線;
+  const 下出 = Math.max(
+    BROKERAGE_SHADOW_DY + BROKERAGE_SHADOW_RY,
+    BROKERAGE_FLOOR_DY + BROKERAGE_FLOOR_H,
+  );
+  const 横出 = Math.max(BROKERAGE_FLOOR_OUT, BROKERAGE_SHADE_OUT, 線);
+  const 縦 = Math.max(r.availH, BROKERAGE_H_MIN + 上出 + 下出);
+  const h = 縦 - 上出 - 下出;
+  const w = Math.min(Math.max(r.availW - 横出 * 2, BROKERAGE_W_MIN), BROKERAGE_W_MAX);
+  const x = cx - w / 2;
+  const y = r.cy - 縦 / 2 + 上出;
+  // 影の横半径はビルの半幅ちょうどなので、 左右を決めるのは常に床帯の出幅の側になる
+  const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: w / 2 + 横出, 右: w / 2 + 横出 };
+  const accentDarker = "#0f3450";
+  // window grid 位置計算。 段数は残りの高さから出す = ビルの外へ窓が並ばない
+  const gridStartY = y + BROKERAGE_GRID_TOP;
+  const cellW = BROKERAGE_CELL_W;
+  const cellH = BROKERAGE_CELL_H;
+  const gapX = BROKERAGE_GAP_X;
+  const gapY = BROKERAGE_GAP_Y;
+  const cols = BROKERAGE_COLS;
+  const rows = Math.max(
+    0,
+    Math.floor((h - BROKERAGE_GRID_TOP - BROKERAGE_BASE_H + gapY) / (cellH + gapY)),
+  );
+  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 絵 = (
+    <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" />
+      {/* 本社ビル body */}
+      <rect data-cdl-role="node-body" x={x} y={y} width={w} height={h} fill="#255a7a" stroke={accentDarker} strokeWidth={frame.strokeWidth} />
+      {/* 左端 shade (立体感) */}
+      <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">
+        ▲NKY 38,240 ▲AAPL 194
+      </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">
+        $ SECURITIES
+      </text>
+      {/* window grid (段数は高さ次第、 列は 6 固定) */}
+      {Array.from({ length: rows }).map((_, ri) =>
+        Array.from({ length: cols }).map((_, ci) => {
+          const wx = gridStartX + ci * (cellW + gapX);
+          const wy = gridStartY + ri * (cellH + gapY);
+          const isGold = goldCells.has(`${ri},${ci}`);
+          return <rect key={`w${ri}${ci}`} x={wx} y={wy} width={cellW} height={cellH} fill={isGold ? "#e5c07b" : accentDarker} />;
+        })
+      )}
+      {/* 底部 base line */}
+      <rect x={x} y={y + h - BROKERAGE_BASE_H} width={w} height={12} fill={accentDarker} />
+      {/* entrance 回転扉 (円 + 十字) */}
+      <circle cx={cx} cy={y + h - 8} r={12} fill="#a89d8f" stroke={accentDarker} strokeWidth={1.5} />
+      <circle cx={cx} cy={y + h - 8} r={9} fill="#8b949e" stroke={accentDarker} strokeWidth={1} />
+      <line x1={cx - 9} y1={y + h - 8} x2={cx + 9} y2={y + h - 8} stroke={accentDarker} strokeWidth={0.8} />
+      <line x1={cx} y1={y + h - 17} x2={cx} y2={y + h - 1} stroke={accentDarker} strokeWidth={0.8} />
+      {/* 底部床 (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, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-exchange = E2-A 中央 clearing house (hexagon EXCHANGE + 放射 8 node + 双方向 tx dots) */
+export function ShapeExchangeNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 4;
+  const region = Math.min(r.availW, r.availH) - 40;
+  const nodeR = region / 2 - 8;
+  const accentDarker = "#0f3450";
+  // 8 方向 node 座標 (中央から放射)
+  const angles = [-90, -45, 0, 45, 90, 135, 180, -135];
+  const nodes = angles.map((deg, i) => {
+    const rad = (deg * Math.PI) / 180;
+    return {
+      cx: cx + Math.cos(rad) * nodeR,
+      cy: cy + Math.sin(rad) * nodeR,
+      fill: i % 2 === 0 ? "#4ea36a" : "#c15a4a",
+      idx: i,
+    };
+  });
+  // 中央 hexagon = 縦向き正六角形 (上下に頂点、 30° 回転)
+  const hexR = 45;
+  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 };
+  });
+  // noUncheckedIndexedAccess 下では hexPoints[0] が possibly undefined になるため、
+  // index 参照せず「先頭は M、 以降は L」 を map 内で分岐して組み立てる。
+  const hexPath =
+    hexPoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ") + " Z";
+  /**
+   * 絵の広がり。 中心は `cy` (領域の中心より 4 下) なので上下で違う。
+   *
+   * 外へ届くのは 8 方向の節点 (`nodeR` + 半径 8 + 線の半分) と中央の六角形 (`hexR` + 線)、
+   * それに `clearing` の字 (`cy + 26` から下へ張り出す)。 大きい方を採る。
+   */
+  const 節点 = Math.max(0, nodeR) + 8 + 1.5 / 2;
+  const 六角 = hexR + frame.strokeWidth / 2;
+  const 字下 = 26 + 8 * 0.25;
+  const 外 = Math.max(節点, 六角);
+  const ずれ = cy - r.cy;
+  const 広がり = {
+    上: 外 - ずれ,
+    下: Math.max(外, 字下) + ずれ,
+    左: 外,
+    右: 外,
+  };
+  const 絵 = (
+    <g>
+      {/* 8 dashed radial lines */}
+      {nodes.map((n, i) => (
+        <line key={`l${i}`} x1={cx} y1={cy} x2={n.cx} y2={n.cy} stroke={accentDarker} strokeWidth={1.5} strokeDasharray="3 2" />
+      ))}
+      {/* animated tx dots (双方向) */}
+      {nodes.map((n, i) => {
+        const isGreen = i % 2 === 0;
+        return (
+          <circle key={`d${i}`} r={4} fill={isGreen ? "#4ea36a" : "#c15a4a"} stroke="none">
+            <animate attributeName="cx" values={isGreen ? `${n.cx};${cx};${n.cx}` : `${cx};${n.cx};${cx}`} dur={`${1.5 + (i % 3) * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.15}s`} />
+            <animate attributeName="cy" values={isGreen ? `${n.cy};${cy};${n.cy}` : `${cy};${n.cy};${cy}`} dur={`${1.5 + (i % 3) * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.15}s`} />
+          </circle>
+        );
+      })}
+      {/* 中央 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</text>
+      {/* swap 記号 */}
+      <text 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">clearing</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, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * ATM (`shape-atm`) の固定部品 (#433)。
+ *
+ * 画面 / 10 キー / カード投入口は寸法が固定なので、 外枠だけを箱に合わせて縮めると中身が枠の
+ * 外へ出る (変更前は高さ 72 の箱で下へ 132)。 **操作面をひとまとまりにして縦横まとめて縮める**
+ * ので、 外枠がどんな大きさでも中身は枠の内側に収まる。
+ *
+ * 影と床帯は外枠の外へ出る。 出る量は箱の高さに依らないので、 描ける帯を先に狭める。
+ */
+const ATM_SIGN_H = 26;
+const ATM_SIGN_SW = 1.5;
+/** 天井看板と本体の間。 */
+const ATM_SIGN_GAP = 24;
+/** 影の楕円を本体の下端からどれだけ下に置くか、 その縦半径と横半径の比。 */
+const ATM_SHADOW_DY = 8;
+const ATM_SHADOW_RY = 5;
+const ATM_SHADOW_RX_RATIO = 0.6;
+/** 床帯の上端を全体の下端からどれだけ上に置くか、 その 2 枚の厚み、 本体から差し引く分。 */
+const ATM_FLOOR_UP = 6;
+const ATM_FLOOR_H = 10;
+const ATM_FLOOR_RESERVE = 12;
+/** 操作面の自然な大きさ。 これより本体が小さければ丸ごと縮める。 */
+const ATM_PANEL_W = 140;
+const ATM_PANEL_H = 146;
+/** 全体の幅。 上限は今までと同じ 140。 */
+const ATM_W_MIN = 100;
+const ATM_W_MAX = 140;
+/** 全体の高さの下限。 看板 + 間 + 本体 30 + 床帯。 */
+const ATM_H_MIN = ATM_SIGN_H + ATM_SIGN_GAP + 30 + ATM_FLOOR_RESERVE;
+
+/** shape-atm = A3-C1 (支店内 ATM 単体、 上部 ATM CORNER 天井看板 + 中央 ATM 大 + 直下床帯) */
+export function ShapeAtmNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const 線 = ATM_SIGN_SW / 2;
+  // 影と床帯が本体の外へ出る。 出る量は箱の高さに依らないので、 描ける帯を先に狭める
+  const 上出 = 線;
+  const 下出 = Math.max(ATM_SHADOW_DY + ATM_SHADOW_RY, ATM_FLOOR_H - ATM_FLOOR_UP);
+  const 縦 = Math.max(r.availH, ATM_H_MIN + 上出 + 下出);
+  const totalH = 縦 - 上出 - 下出;
+  // 左右は影が一番外まで届く。 幅は影を含めて帯に収まる大きさから逆算する
+  const totalW = Math.min(
+    Math.max(r.availW / (ATM_SHADOW_RX_RATIO * 2), ATM_W_MIN),
+    ATM_W_MAX,
+  );
+  const centerX = cx;
+  const y = r.cy - 縦 / 2 + 上出;
+  const 広がり = {
+    上: 縦 / 2,
+    下: 縦 / 2,
+    左: totalW * ATM_SHADOW_RX_RATIO,
+    右: totalW * ATM_SHADOW_RX_RATIO,
+  };
+  // 天井看板 y=0-30
+  const signY = y;
+  const signH = ATM_SIGN_H;
+  const atmY = y + signH + ATM_SIGN_GAP;
+  const atmH = totalH - signH - ATM_SIGN_GAP - ATM_FLOOR_RESERVE;
+  const atmW = totalW;
+  const atmX = centerX - atmW / 2;
+  const floorY = y + totalH - ATM_FLOOR_UP;
+  const accentDarker = "#0f3450";
+  // 操作面は寸法が固定なので、 本体が縮んだら **縦横まとめて** 縮める。 縦だけ詰めると
+  // 画面と 10 キーが潰れて読めなくなる
+  const 面 = Math.min(1, atmW / ATM_PANEL_W, atmH / ATM_PANEL_H);
+  const 面左 = -ATM_PANEL_W / 2;
+  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 CORNER</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">SELECT AMOUNT</text>
+        <text 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} />
+        {(() => {
+          const keys = [
+            ["1", "#5a6270"], ["2", "#5a6270"], ["3", "#5a6270"], ["C", "#5a6270"], ["X", "#c15a4a"],
+            ["4", "#5a6270"], ["5", "#5a6270"], ["6", "#5a6270"], ["0", "#5a6270"], ["OK", "#4ea36a"],
+          ];
+          const keyW = 18;
+          const keyH = 10;
+          const keyGap = 4;
+          const startX = 面左 + 14;
+          return keys.map((k, i) => {
+            const row = Math.floor(i / 5);
+            const col = i % 5;
+            const kx = startX + col * (keyW + keyGap);
+            const ky = 74 + row * (keyH + 2);
+            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={k[0] === "OK" ? 6 : 7} fontWeight={700} textAnchor="middle" fill="#ffffff">{k[0]}</text>
+              </g>
+            );
+          });
+        })()}
+        {/* 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">CARD SLOT</text>
+        {/* cash slot */}
+        <rect x={面左 + 12} y={136} width={ATM_PANEL_W - 24} height={4} rx={1} fill="#0f1830" />
+      </g>
+      {/* 直下床帯 (ATM 直下のみ、 全幅 totalW) */}
+      <rect x={centerX - totalW / 2} y={floorY} width={totalW} height={6} fill="#8b949e" stroke="none" />
+      <rect x={centerX - totalW / 2} y={floorY + 6} width={totalW} height={ATM_FLOOR_H - 6} fill="#5a6270" stroke="none" />
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}