@cardenelabs/cdl 0.57.0 → 0.58.0

package/dist/{render-Cp41meYv.d.cts → render-DpwY2hzM.d.cts}

@@ -90,6 +90,30 @@ type SequenceBoardMetrics = {
  */
 declare function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics;
 
+/**
+ * 描画側が書く固定の字の言語 (#847)。
+ *
+ * 書き手が何を渡しても描かれる字 (形の看板 / 絵の中の見本の値 / 行の名前) を 1 つの辞書に集め、
+ * 図の `lang` で引き替える。 書き手の字 (`title` / `subtitle` / 行 / 札) はこの辞書を通らない。
+ *
+ * **既定は英語**。 字を直接日本語へ書き換えると、英語で使う人の図まで変わり、戻す口も無い。
+ * 指定の無い図は変更前と同じ字で描く。
+ *
+ * **JSX を持たない module に置く**。 型の定義 (`types.ts`) と配置 (`layout.ts`) からも読むため、
+ * ここから React を引き込むと字の幅を測る検査の読込みが重くなる (`kinds/text-width.ts` の注記と同じ)。
+ *
+ * 言語は `CdlStage` → `CdlNodeView` → 形の部品へ引数 (`lang`) で届く。
+ */
+/** 図の言語。 書かない図は `"en"` で描く */
+type CdlLang = "en" | "ja";
+/**
+ * 記法から届いた値を言語に直す。 型の外の値 (記法の文字列の書き損じ等) は既定の `"en"` に落とす。
+ *
+ * 落とす先を英語にするのは、指定の無い図と同じ見え方になるため。 書き損じで一部の字だけ
+ * 日本語になる形は作らない。
+ */
+declare function resolveLang(value: unknown): CdlLang;
+
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
@@ -2532,6 +2556,15 @@ type CdlDiagram = {
      * 既定の図にも当たる。
      */
     palette?: string;
+    /**
+     * 描画側が書く固定の字を、どの言語で描くか (#847)。 書かない図は `"en"` で描く。
+     *
+     * 引き替わるのは描画側が持つ字 (形の看板 / 絵の中の見本の値 / 行の名前) だけで、書き手の字
+     * (`title` / `subtitle` / 札) は変わらない。 字の一覧は `src/lang.ts` が持つ。
+     *
+     * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
+     */
+    lang?: CdlLang;
     /**
      * この図がどの種類か (#645)。 書かない図は種類を持たない。
      *
@@ -2752,6 +2785,11 @@ type LaidDiagram = {
     topic: string;
     /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
     palette?: string;
+    /**
+     * 描画側の固定の字の言語 (#847)。 `CdlDiagram.lang` を既定以外の時だけ持ち越す。
+     * 無い時は `"en"` で描く。
+     */
+    lang?: CdlLang;
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
     viewBox: {
@@ -2954,4 +2992,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeScrollTriggerKey as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, RELATION_FOCUSES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUS_DEFAULT as U, type RelationFocus as V, type ScrollProgressHandle as W, TONES as X, computeEventBindingKey as Y, computeFormulaKey as Z, computeInputSignalKey as _, type CdlInput as a, computed as a0, createInteractiveSignalsAccessor as a1, createScrollProgressHandle as a2, createScrollProgressSignals as a3, hasInteractivePrimitives as a4, sequenceBoardMetrics as a5, sequenceStepId as a6, signal as a7, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };
+export { computeInputSignalKey as $, EDGE_HEAD_FILLS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILL_DEFAULT as D, type EdgeStyle as E, EDGE_REVEALS as F, EDGE_REVEAL_DEFAULT as G, EDGE_STYLES as H, type EdgeReveal as I, type JourneyEmotion as J, type InteractiveHandlerMap as K, type LaidDiagram as L, type InteractiveSignalsAccessor as M, type NodeKind as N, type LaidLane as O, NODE_KINDS as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUSES as U, RELATION_FOCUS_DEFAULT as V, type RelationFocus as W, type ScrollProgressHandle as X, TONES as Y, computeEventBindingKey as Z, computeFormulaKey as _, type CdlInput as a, computeScrollTriggerKey as a0, computed as a1, createInteractiveSignalsAccessor as a2, createScrollProgressHandle as a3, createScrollProgressSignals as a4, hasInteractivePrimitives as a5, resolveLang as a6, sequenceBoardMetrics as a7, sequenceStepId as a8, signal as a9, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type CdlLang as j, type Computed as k, type CdlDerivedValue as l, type CdlScrollTrigger as m, type CdlDiagramViewProps as n, type LaidEdge as o, type LaidNode as p, type CdlEdge as q, CdlDiagramView as r, type CdlEventBinding as s, type CdlEventKind as t, type CdlFormula as u, type CdlPhase as v, type ChartPieForm as w, type ChartSlopeForm as x, EDGE_HEADS as y, EDGE_HEAD_DEFAULT as z };

package/dist/{render-Cp41meYv.d.ts → render-DpwY2hzM.d.ts}

@@ -90,6 +90,30 @@ type SequenceBoardMetrics = {
  */
 declare function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics;
 
+/**
+ * 描画側が書く固定の字の言語 (#847)。
+ *
+ * 書き手が何を渡しても描かれる字 (形の看板 / 絵の中の見本の値 / 行の名前) を 1 つの辞書に集め、
+ * 図の `lang` で引き替える。 書き手の字 (`title` / `subtitle` / 行 / 札) はこの辞書を通らない。
+ *
+ * **既定は英語**。 字を直接日本語へ書き換えると、英語で使う人の図まで変わり、戻す口も無い。
+ * 指定の無い図は変更前と同じ字で描く。
+ *
+ * **JSX を持たない module に置く**。 型の定義 (`types.ts`) と配置 (`layout.ts`) からも読むため、
+ * ここから React を引き込むと字の幅を測る検査の読込みが重くなる (`kinds/text-width.ts` の注記と同じ)。
+ *
+ * 言語は `CdlStage` → `CdlNodeView` → 形の部品へ引数 (`lang`) で届く。
+ */
+/** 図の言語。 書かない図は `"en"` で描く */
+type CdlLang = "en" | "ja";
+/**
+ * 記法から届いた値を言語に直す。 型の外の値 (記法の文字列の書き損じ等) は既定の `"en"` に落とす。
+ *
+ * 落とす先を英語にするのは、指定の無い図と同じ見え方になるため。 書き損じで一部の字だけ
+ * 日本語になる形は作らない。
+ */
+declare function resolveLang(value: unknown): CdlLang;
+
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
@@ -2532,6 +2556,15 @@ type CdlDiagram = {
      * 既定の図にも当たる。
      */
     palette?: string;
+    /**
+     * 描画側が書く固定の字を、どの言語で描くか (#847)。 書かない図は `"en"` で描く。
+     *
+     * 引き替わるのは描画側が持つ字 (形の看板 / 絵の中の見本の値 / 行の名前) だけで、書き手の字
+     * (`title` / `subtitle` / 札) は変わらない。 字の一覧は `src/lang.ts` が持つ。
+     *
+     * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
+     */
+    lang?: CdlLang;
     /**
      * この図がどの種類か (#645)。 書かない図は種類を持たない。
      *
@@ -2752,6 +2785,11 @@ type LaidDiagram = {
     topic: string;
     /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
     palette?: string;
+    /**
+     * 描画側の固定の字の言語 (#847)。 `CdlDiagram.lang` を既定以外の時だけ持ち越す。
+     * 無い時は `"en"` で描く。
+     */
+    lang?: CdlLang;
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
     viewBox: {
@@ -2954,4 +2992,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeScrollTriggerKey as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, RELATION_FOCUSES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUS_DEFAULT as U, type RelationFocus as V, type ScrollProgressHandle as W, TONES as X, computeEventBindingKey as Y, computeFormulaKey as Z, computeInputSignalKey as _, type CdlInput as a, computed as a0, createInteractiveSignalsAccessor as a1, createScrollProgressHandle as a2, createScrollProgressSignals as a3, hasInteractivePrimitives as a4, sequenceBoardMetrics as a5, sequenceStepId as a6, signal as a7, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };
+export { computeInputSignalKey as $, EDGE_HEAD_FILLS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILL_DEFAULT as D, type EdgeStyle as E, EDGE_REVEALS as F, EDGE_REVEAL_DEFAULT as G, EDGE_STYLES as H, type EdgeReveal as I, type JourneyEmotion as J, type InteractiveHandlerMap as K, type LaidDiagram as L, type InteractiveSignalsAccessor as M, type NodeKind as N, type LaidLane as O, NODE_KINDS as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUSES as U, RELATION_FOCUS_DEFAULT as V, type RelationFocus as W, type ScrollProgressHandle as X, TONES as Y, computeEventBindingKey as Z, computeFormulaKey as _, type CdlInput as a, computeScrollTriggerKey as a0, computed as a1, createInteractiveSignalsAccessor as a2, createScrollProgressHandle as a3, createScrollProgressSignals as a4, hasInteractivePrimitives as a5, resolveLang as a6, sequenceBoardMetrics as a7, sequenceStepId as a8, signal as a9, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type CdlLang as j, type Computed as k, type CdlDerivedValue as l, type CdlScrollTrigger as m, type CdlDiagramViewProps as n, type LaidEdge as o, type LaidNode as p, type CdlEdge as q, CdlDiagramView as r, type CdlEventBinding as s, type CdlEventKind as t, type CdlFormula as u, type CdlPhase as v, type ChartPieForm as w, type ChartSlopeForm as x, EDGE_HEADS as y, EDGE_HEAD_DEFAULT as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.57.0",
+  "version": "0.58.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",
@@ -57,16 +57,6 @@
     "node": ">=18"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "cd ../.. && vitest run packages/cdl",
-    "lint": "tsc --noEmit",
-    "prepublishOnly": "pnpm run typecheck && pnpm run build",
-    "prepack": "node scripts/prepack-check.mjs",
-    "postpack": "node scripts/prepack-check.mjs"
-  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -78,5 +68,12 @@
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0",
     "typescript": "^5.8.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "cd ../.. && vitest run packages/cdl",
+    "lint": "tsc --noEmit"
   }
-}
+}

package/src/builder.ts

@@ -1,4 +1,5 @@
 import { parseFormula } from "./formula";
+import type { CdlLang } from "./lang";
 import type {
   CdlDiagram,
   CdlEdge,
@@ -1650,6 +1651,10 @@ export function diagram(
      * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
      */
     palette?: string;
+    /**
+     * 描画側が書く固定の字の言語 (#847)。 詳しくは `CdlDiagram.lang` の説明を参照。
+     */
+    lang?: CdlLang;
     /**
      * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
      */
@@ -3796,6 +3801,8 @@ export function diagram(
         ...(options.structuredData === "exclude" ? { structuredData: "exclude" as const } : {}),
         // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
         ...(options.palette !== undefined ? { palette: options.palette } : {}),
+        // 言語も素通しする。 型の外の値を既定に落とすのは `layout` の 1 箇所に置く
+        ...(options.lang !== undefined ? { lang: options.lang } : {}),
         // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
         ...(options.type !== undefined ? { type: options.type } : {}),
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)

package/src/index.ts

@@ -10,6 +10,12 @@ export { createInputSignals, inputDefaultValue } from "./input-signals";
 export type { InputChain } from "./builder";
 export type { CdlInput } from "./types";
 
+// 描画側が書く固定の字の言語 (#847)。 図の `lang` に渡す値と、記法の文字列を言語に直す関数。
+// 辞書そのものは公開しない = 字の一覧は描画の実装に属し、利用側が辞書の中身に依存すると
+// 字を直すたびに利用側が壊れる
+export { resolveLang } from "./lang";
+export type { CdlLang } from "./lang";
+
 // formula primitive (CAR #244) — builder chain `.formula(id, "gasBase * 2")` で safe subset の
 // algebraic expression を追加、 createFormulaComputeds(diagram, signals) で computed を得て
 // signal と reactive bind する (Step 2 の computed 経路に統合)。

package/src/kinds/shape-blockchain.tsx

@@ -3,6 +3,7 @@ import type { LaidNode } from "../types";
 import { fitArt, labelPlan, shapeRegion, textWidth, type ArtExtent } from "./shape-region";
 import { 幅で切る } from "./box-lines";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
+import { 字引きを作る, type CdlLang, type CdlTextKey } from "../lang";
 
 /**
  * Shape-driven blockchain / web3 10 kinds (CAR-1111 Phase 2-D)。
@@ -16,6 +17,8 @@ import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
+  lang?: CdlLang;
 };
 
 const FRAME_SW_ACTIVE = 3;
@@ -171,7 +174,8 @@ function EthereumDiamond({ cx, cy, h, colors }: { cx: number; cy: number; h: num
 }
 
 /** shape-smart-contract = 契約書 (前バージョン: document + 契約書テキスト + function 表示 + 底に回転 gear) */
-export function ShapeSmartContractNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const docW = SMART_CONTRACT_W;
@@ -214,7 +218,7 @@ export function ShapeSmartContractNode({ node, active }: ShapeProps): JSX.Elemen
       ))}
       {/* function signature */}
       <text x={x + 16} y={y + docH - 46} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-tone-accent, #2d6a8f)">
-        {"function execute()"}
+        {字引("smartContract.call")}
       </text>
       {/* gear (auto-execution 記号) */}
       <polygon
@@ -251,17 +255,25 @@ export function ShapeSmartContractNode({ node, active }: ShapeProps): JSX.Elemen
 const 字の幅 = (text: string, size: number): number =>
   Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
 
-/** 絵の中の 5 行の既定値。 書き手が渡さなかった欄はこれで描く (#469) */
-const BLOCK_DEFAULT_FIELDS = [
-  { label: "hash", value: "0xaf31c9d2..." },
-  { label: "prev", value: "0x7b3f92c1..." },
-  { label: "merkle", value: "0xc1892f4a..." },
-  { label: "nonce", value: "82,914" },
-  { label: "tx", value: "142 tx" },
-] as const;
-
-/** 見出しの既定値 */
-const BLOCK_DEFAULT_TITLE = "Block #421,873";
+/**
+ * 絵の中の 5 行の既定値。 書き手が渡さなかった欄はこれで描く (#469)。
+ *
+ * **行の名前 (`key`) と描く字を分ける** (#847)。 `key` は副題を差し込む行の判定と
+ * `data-cdl-role` の目印に使う識別子で、言語で変えると差し込みと目印が壊れる。 描く字は
+ * 辞書 (`src/lang.ts`) から引く。 16 進の値と数は言語に依らないのでここに残す。
+ */
+const BLOCK_DEFAULT_FIELDS: readonly {
+  key: string;
+  label: CdlTextKey;
+  /** 言語に依らない既定値 (16 進の値と数) と、辞書から引く既定値 (単位を持つ値) のどちらか */
+  value: { text: string } | { 辞書: CdlTextKey };
+}[] = [
+  { key: "hash", label: "blockchainBlock.hash", value: { text: "0xaf31c9d2..." } },
+  { key: "prev", label: "blockchainBlock.prev", value: { text: "0x7b3f92c1..." } },
+  { key: "merkle", label: "blockchainBlock.merkle", value: { text: "0xc1892f4a..." } },
+  { key: "nonce", label: "blockchainBlock.nonce", value: { text: "82,914" } },
+  { key: "tx", label: "blockchainBlock.tx", value: { 辞書: "blockchainBlock.txCount" } },
+];
 
 /**
  * shape-blockchain-block = 単一 block 詳細 (header + 5 fields: hash/prev/merkle/nonce/tx + chain link icon)。
@@ -284,7 +296,8 @@ const BLOCK_DEFAULT_TITLE = "Block #421,873";
  * 位置が node の大きさに依存する。 `rowBaselineY(kind, index)` は node の大きさを受け取らない
  * ので、 この種別の位置を表せない。 開くなら述語の形から変える話になる (#469 の対象外 scope)。
  */
-export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const bw = BLOCK_W;
@@ -296,11 +309,15 @@ export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Elem
 
   // 書き手の値で置き換える。 空文字と空白だけの値は「渡していない」 と同じ扱いにする
   const 渡された = (v: string | undefined): string => (v ?? "").trim();
-  const 見出し = 渡された(node.title) || BLOCK_DEFAULT_TITLE;
-  const fields = BLOCK_DEFAULT_FIELDS.map((f) => ({
-    label: f.label,
-    value: f.label === "hash" ? 渡された(node.subtitle) || f.value : f.value,
-  }));
+  const 見出し = 渡された(node.title) || 字引("blockchainBlock.title");
+  const fields = BLOCK_DEFAULT_FIELDS.map((f) => {
+    const 既定値 = "text" in f.value ? f.value.text : 字引(f.value.辞書);
+    return {
+      key: f.key,
+      label: 字引(f.label),
+      value: f.key === "hash" ? 渡された(node.subtitle) || 既定値 : 既定値,
+    };
+  });
 
   // 見出しは右上の丸 (半径 5.5、 中心が bw - 16) に掛からないところまで
   const 見出しの幅 = bw - 14 - 30;
@@ -321,7 +338,7 @@ export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Elem
           <text x={x + 14} y={y + 54 + i * 22} fontSize={10.5} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
             {f.label}
           </text>
-          <text data-cdl-role={`blockchain-block-${f.label}`} x={x + bw - 14} y={y + 54 + i * 22} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
+          <text data-cdl-role={`blockchain-block-${f.key}`} x={x + bw - 14} y={y + 54 + i * 22} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
             {幅で切る(f.value, 11, bw - 28 - 字の幅(f.label, 10.5) - 8, 字の幅)}
           </text>
           <line x1={x + 14} y1={y + 60 + i * 22} x2={x + bw - 14} y2={y + 60 + i * 22} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
@@ -568,7 +585,8 @@ export function ShapeBlockchainNodeNode({ node, active }: ShapeProps): JSX.Eleme
 }
 
 /** shape-rpc-node = JSON-RPC provider */
-export function ShapeRpcNodeNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeRpcNodeNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -585,7 +603,7 @@ export function ShapeRpcNodeNode({ node, active }: ShapeProps): JSX.Element {
         <animate attributeName="opacity" values="0.4;1;0.4" dur="1.5s" repeatCount="indefinite" />
       </circle>
       <text x={x + 26} y={y + 20} fontSize={12} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} fill="#7cd88f">
-        RPC ONLINE
+        {字引("rpcNode.status")}
       </text>
       <text x={cx} y={cy + 6} fontSize={30} fontWeight={700} textAnchor="middle" fill="#e6edf3" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         {"{...}"}

package/src/kinds/shape-commerce.tsx

@@ -1,6 +1,8 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt } from "./shape-region";
+import { shapeRegion, labelPlan, fitArt, textWidth } from "./shape-region";
+import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import type { LaidNode } from "../types";
+import { 字引きを作る, type CdlLang } from "../lang";
 
 /**
  * Shape-driven commerce / web 6 kinds (CAR-1111 Phase 2-D)。
@@ -16,6 +18,8 @@ import type { LaidNode } from "../types";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
+  lang?: CdlLang;
 };
 
 const commonFrame = (active: boolean) => ({
@@ -179,7 +183,8 @@ export function ShapeWebsiteNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-storefront = S-A シンプル shop (平屋根 + SHOP 看板 + 大 window (商品) + 中央 door + OPEN sign) */
-export function ShapeStorefrontNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -209,7 +214,7 @@ export function ShapeStorefrontNode({ node, active }: ShapeProps): JSX.Element {
       <ellipse cx={cx} cy={y + bh + 8} rx={bw * 0.5} ry={5} fill={frame.stroke} opacity={0.2} stroke="none" />
       {/* SHOP 看板 (accent) */}
       <rect x={x} y={y} width={bw} height={signH} fill={accent} stroke={accentDark} strokeWidth={2} />
-      <text x={cx} y={y + 18} fontSize={16} fontWeight={900} letterSpacing={8} textAnchor="middle" fill="#ffffff">SHOP</text>
+      <text x={cx} y={y + 18} fontSize={16} fontWeight={900} letterSpacing={8} textAnchor="middle" fill="#ffffff">{字引("storefront.sign")}</text>
       {/* facade (店舗本体 白ベース) */}
       <rect data-cdl-role="node-body" x={x} y={facadeY} width={bw} height={facadeH} fill="#e0e4e8" stroke="#5a6270" strokeWidth={frame.strokeWidth} />
       {/* 大 window (商品ディスプレイ、 左) */}
@@ -229,7 +234,7 @@ export function ShapeStorefrontNode({ node, active }: ShapeProps): JSX.Element {
       <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">OPEN</text>
+      <text x={doorX + doorW / 2} y={doorY + doorH * 0.85 + 9} fontSize={8} 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 直下のみ) */}
@@ -262,7 +267,8 @@ const WAREHOUSE_W_MIN = 160;
 const WAREHOUSE_W_MAX = 240;
 
 /** shape-warehouse = W-A 大 shutter (平屋根 + WAREHOUSE 看板 + 中央大 shutter 10 rib + loading dock) */
-export function ShapeWarehouseNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeWarehouseNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -298,7 +304,7 @@ export function ShapeWarehouseNode({ node, active }: ShapeProps): JSX.Element {
       <rect data-cdl-role="node-body" x={x} y={y + roofH} width={bw} height={bh - roofH - 12} fill="#a89d8f" stroke="#5a6270" strokeWidth={frame.strokeWidth} />
       {/* WAREHOUSE 看板 (赤帯) */}
       <rect x={x} y={y + roofH} width={bw} height={signH} fill="#c15a4a" stroke="#8b3f2f" strokeWidth={1.5} />
-      <text x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">WAREHOUSE</text>
+      <text x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">{字引("warehouse.sign")}</text>
       {/* 中央大 shutter (rib 縞) */}
       <rect x={shutterX} y={shutterY} width={shutterW} height={shutterH} fill="#8b949e" stroke={accentDarker} strokeWidth={2} />
       {/* shutter 上部 shade (立体感) */}
@@ -499,7 +505,8 @@ const API_W_MIN = 200;
 const API_W_MAX = 300;
 
 /** shape-api-gateway = SaaS API panel (dark bg + method + path endpoints + status) */
-export function ShapeApiGatewayNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -511,6 +518,11 @@ export function ShapeApiGatewayNode({ node, active }: ShapeProps): JSX.Element {
   const y = r.cy - 縦 / 2 + 余白;
   const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: bw / 2 + 余白, 右: bw / 2 + 余白 };
   // 行は板の中で均す。 板が伸びたら間隔も伸びる = 下に空きだけが残らない
+  // 要求の種類の字は箱 (幅 54) に左右 3 ずつ空けて入る大きさで描く (#847)。 `GET` / `POST` / `DEL` は
+  // 11 のまま入り、長い綴り (日本語の辞書の `DELETE`) だけを縮める。 見積りは等幅と比例の大きい方
+  // (`shape-blockchain.tsx` の `字の幅` と同じ考え方で、どちらの書体で描かれても箱からはみ出さない)
+  const 種類の字 = (s: string): number =>
+    Math.min(11, (11 * 48) / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
   const rowPitch = Math.max(
     API_ROW_PITCH_MIN,
     (bh - API_ROW_TOP - API_ROW_H - API_ROW_BOTTOM_PAD) / (API_ROWS - 1),
@@ -521,17 +533,17 @@ export function ShapeApiGatewayNode({ node, active }: ShapeProps): JSX.Element {
       <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={10} fill="#1a2332" stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
       <rect x={x} y={y} width={bw} height={36} rx={10} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
       <text x={cx} y={y + 24} fontSize={14} fontWeight={700} letterSpacing={3} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
-        API GATEWAY
+        {字引("apiGateway.sign")}
       </text>
       {[
-        { method: "GET", path: "/users", color: "#27c93f" },
-        { method: "POST", path: "/orders", color: "#e5c07b" },
-        { method: "DEL", path: "/session", color: "#c9302c" },
+        { method: "GET", path: 字引("apiGateway.users"), color: "#27c93f" },
+        { method: "POST", path: 字引("apiGateway.orders"), color: "#e5c07b" },
+        { method: 字引("apiGateway.delete"), path: 字引("apiGateway.session"), color: "#c9302c" },
       ].map((e, i) => (
         <g key={i} transform={`translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`}>
           <rect x={0} y={0} width={bw - 32} height={API_ROW_H} rx={4} fill="#0f1419" stroke="none" />
           <rect x={0} y={0} width={54} height={API_ROW_H} rx={4} fill={e.color} stroke="none" />
-          <text x={27} y={16} fontSize={11} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+          <text x={27} y={16} fontSize={種類の字(e.method)} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
             {e.method}
           </text>
           <text x={64} y={16} fontSize={12} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#e6edf3">

package/src/kinds/shape-finance.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import { shapeRegion, labelPlan, fitArt } from "./shape-region";
 import type { LaidNode } from "../types";
+import { 字引きを作る, type CdlLang } from "../lang";
 
 /**
  * Shape-driven finance 7 kinds (CAR-1111 Phase 2-D)。
@@ -17,6 +18,8 @@ import type { LaidNode } from "../types";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
+  lang?: CdlLang;
 };
 
 const commonFrame = (active: boolean) => ({
@@ -233,7 +236,8 @@ 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 {
+export function ShapeTrustBankNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const 線 = frame.strokeWidth / 2;
@@ -275,7 +279,7 @@ export function ShapeTrustBankNode({ node, active }: ShapeProps): JSX.Element {
       })}
       <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
+        {字引("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} />
       {Array.from({ length: nCols }, (_, i) => i).map((i) => {
@@ -302,7 +306,8 @@ export function ShapeTrustBankNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-payment-provider = P2-A base (中央 provider box + PAY header + processing spinner + PROCESSING label) */
-export function ShapePaymentProviderNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapePaymentProviderNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -323,7 +328,7 @@ export function ShapePaymentProviderNode({ node, active }: ShapeProps): JSX.Elem
       {/* 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>
+      <text x={cx} y={y + 22} fontSize={16} fontWeight={700} letterSpacing={4} textAnchor="middle" fill="#e5c07b">{字引("paymentProvider.sign")}</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">
@@ -333,7 +338,7 @@ export function ShapePaymentProviderNode({ node, active }: ShapeProps): JSX.Elem
         <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>
+      <text x={cx} y={y + boxH - 16} fontSize={9} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#a4b5f2">{字引("paymentProvider.status")}</text>
       {bottomLabel(node, r.cx, r.label)}
     </g>
   );
@@ -416,7 +421,8 @@ 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 {
+export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -460,12 +466,12 @@ export function ShapeBrokerageNode({ node, active }: ShapeProps): JSX.Element {
       <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
+        {字引("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">
-        $ SECURITIES
+        {字引("brokerage.sign")}
       </text>
       {/* window grid (段数は高さ次第、 列は 6 固定) */}
       {Array.from({ length: rows }).map((_, ri) =>
@@ -496,7 +502,8 @@ export function ShapeBrokerageNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-exchange = E2-A 中央 clearing house (hexagon EXCHANGE + 放射 8 node + 双方向 tx dots) */
-export function ShapeExchangeNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -560,11 +567,11 @@ export function ShapeExchangeNode({ node, active }: ShapeProps): JSX.Element {
       })}
       {/* 中央 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>
+      <text x={cx} y={cy - 8} fontSize={10} fontWeight={700} letterSpacing={2} 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>
       {/* clearing label */}
-      <text x={cx} y={cy + 26} fontSize={8} fontWeight={700} textAnchor="middle" fill="#a4b5f2">clearing</text>
+      <text x={cx} y={cy + 26} fontSize={8} 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} />
@@ -610,7 +617,8 @@ const ATM_W_MAX = 140;
 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 {
+export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -652,21 +660,21 @@ export function ShapeAtmNode({ node, active }: ShapeProps): JSX.Element {
       <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>
+      <text 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">SELECT AMOUNT</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>
         {/* 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"],
+            ["4", "#5a6270"], ["5", "#5a6270"], ["6", "#5a6270"], ["0", "#5a6270"], [字引("atm.ok"), "#4ea36a"],
           ];
           const keyW = 18;
           const keyH = 10;
@@ -680,7 +688,7 @@ export function ShapeAtmNode({ node, active }: 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={k[0] === "OK" ? 6 : 7} fontWeight={700} textAnchor="middle" fill="#ffffff">{k[0]}</text>
+                <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>
               </g>
             );
           });
@@ -688,7 +696,7 @@ export function ShapeAtmNode({ node, active }: 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">CARD SLOT</text>
+        <text x={0} y={132} fontSize={6} 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>