@cardenelabs/cdl 0.57.0 → 0.58.0

package/dist/react.cjs

@@ -358,6 +358,122 @@ function useReducedMotion() {
   return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
+// src/lang.ts
+function resolveLang(value) {
+  return value === "ja" ? "ja" : "en";
+}
+var en = {
+  /** `shape-terminal` の 2 行目 (命令の出力) */
+  "terminal.output": "\u2192 12 chunks in 1.8s",
+  /** `shape-code-block` の札の file 名 */
+  "codeBlock.fileName": "utils.ts",
+  /** `shape-kanban-card` の課題の番号 */
+  "kanbanCard.id": "CAR-1111",
+  /** `shape-kanban-card` の状態の札 */
+  "kanbanCard.status": "IN PROG",
+  /** `shape-kanban-card` の題の下の説明 */
+  "kanbanCard.task": "shape-driven kind \u5B9F\u88C5",
+  /** `shape-kanban-card` の期日 */
+  "kanbanCard.due": "Jul 10",
+  /** `shape-smart-contract` の契約の本文の 1 行 */
+  "smartContract.call": "function execute()",
+  /** `shape-blockchain-block` の題を渡さない時の見出し */
+  "blockchainBlock.title": "Block #421,873",
+  /** `shape-blockchain-block` の 1 行目の名前 (塊を識別する値) */
+  "blockchainBlock.hash": "hash",
+  /** `shape-blockchain-block` の 2 行目の名前 (1 つ前の塊の識別値) */
+  "blockchainBlock.prev": "prev",
+  /** `shape-blockchain-block` の 3 行目の名前 (取引をまとめた木の根) */
+  "blockchainBlock.merkle": "merkle",
+  /** `shape-blockchain-block` の 4 行目の名前 (採掘で試した値) */
+  "blockchainBlock.nonce": "nonce",
+  /** `shape-blockchain-block` の 5 行目の名前 (取引の件数) */
+  "blockchainBlock.tx": "tx",
+  /** `shape-blockchain-block` の 5 行目の値 */
+  "blockchainBlock.txCount": "142 tx",
+  /** `shape-rpc-node` の稼働の札 */
+  "rpcNode.status": "RPC ONLINE",
+  /** `shape-trust-bank` の看板 */
+  "trustBank.sign": "TRUST",
+  /** `shape-payment-provider` の看板 */
+  "paymentProvider.sign": "PAY",
+  /** `shape-payment-provider` の状態の札 */
+  "paymentProvider.status": "PROCESSING",
+  /** `shape-brokerage` の株価の帯 */
+  "brokerage.ticker": "\u25B2NKY 38,240 \u25B2AAPL 194",
+  /** `shape-brokerage` の看板 */
+  "brokerage.sign": "$ SECURITIES",
+  /** `shape-exchange` の看板 */
+  "exchange.sign": "EXCHANGE",
+  /** `shape-exchange` の看板の下の札 */
+  "exchange.sub": "clearing",
+  /** `shape-atm` の天井の看板 */
+  "atm.sign": "ATM CORNER",
+  /** `shape-atm` の画面の案内 */
+  "atm.screen": "SELECT AMOUNT",
+  /** `shape-atm` の決める鍵 */
+  "atm.ok": "OK",
+  /** `shape-atm` のカードを入れる口の札 */
+  "atm.cardSlot": "CARD SLOT",
+  /** `shape-storefront` の看板 */
+  "storefront.sign": "SHOP",
+  /** `shape-storefront` の扉の札 */
+  "storefront.open": "OPEN",
+  /** `shape-warehouse` の看板 */
+  "warehouse.sign": "WAREHOUSE",
+  /** `shape-api-gateway` の看板 */
+  "apiGateway.sign": "API GATEWAY",
+  /** `shape-api-gateway` の 3 行目の要求の種類 */
+  "apiGateway.delete": "DEL",
+  /** `shape-api-gateway` の 1 行目の宛先 */
+  "apiGateway.users": "/users",
+  /** `shape-api-gateway` の 2 行目の宛先 */
+  "apiGateway.orders": "/orders",
+  /** `shape-api-gateway` の 3 行目の宛先 */
+  "apiGateway.session": "/session"
+};
+var ja = {
+  "terminal.output": "\u2192 1.8 \u79D2\u3067\u5B8C\u4E86",
+  "codeBlock.fileName": "\u5171\u901A.ts",
+  "kanbanCard.id": "#1111",
+  "kanbanCard.status": "\u9032\u884C\u4E2D",
+  "kanbanCard.task": "\u5F62\u3092\u5B9F\u88C5",
+  "kanbanCard.due": "7/10",
+  "smartContract.call": "\u81EA\u52D5\u3067\u5B9F\u884C\u3059\u308B",
+  "blockchainBlock.title": "\u30D6\u30ED\u30C3\u30AF #421,873",
+  "blockchainBlock.hash": "\u30CF\u30C3\u30B7\u30E5",
+  "blockchainBlock.prev": "\u76F4\u524D",
+  "blockchainBlock.merkle": "\u6728\u306E\u6839",
+  "blockchainBlock.nonce": "\u30CE\u30F3\u30B9",
+  "blockchainBlock.tx": "\u53D6\u5F15",
+  "blockchainBlock.txCount": "142 \u4EF6",
+  "rpcNode.status": "RPC \u7A3C\u50CD\u4E2D",
+  "trustBank.sign": "\u4FE1\u8A17",
+  "paymentProvider.sign": "\u6C7A\u6E08",
+  "paymentProvider.status": "\u51E6\u7406\u4E2D",
+  "brokerage.ticker": "\u25B2\u65E5\u7D4C 38,240 \u25B2\u6771\u8A3C 2,710",
+  "brokerage.sign": "\xA5 \u8A3C\u5238",
+  "exchange.sign": "\u53D6\u5F15\u6240",
+  "exchange.sub": "\u6E05\u7B97",
+  "atm.sign": "ATM \u30B3\u30FC\u30CA\u30FC",
+  "atm.screen": "\u91D1\u984D\u3092\u9078\u629E",
+  "atm.ok": "\u78BA\u5B9A",
+  "atm.cardSlot": "\u30AB\u30FC\u30C9\u633F\u5165\u53E3",
+  "storefront.sign": "\u5546\u5E97",
+  "storefront.open": "\u55B6\u696D",
+  "warehouse.sign": "\u5009\u5EAB",
+  "apiGateway.sign": "API \u5165\u53E3",
+  "apiGateway.delete": "DELETE",
+  "apiGateway.users": "/\u5229\u7528\u8005",
+  "apiGateway.orders": "/\u6CE8\u6587",
+  "apiGateway.session": "/\u63A5\u7D9A"
+};
+var CDL_TEXT = { en, ja };
+function \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang) {
+  const \u8A00\u8A9E = lang ?? "en";
+  return (key) => CDL_TEXT[\u8A00\u8A9E][key];
+}
+
 // src/layout/clearance-constants.ts
 var CLEARANCE_NODE_LABEL = 32;
 var CLEARANCE_LANE_LABEL = 24;
@@ -9636,6 +9752,9 @@ function layout(diag) {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...diag.palette ? { palette: diag.palette } : {},
+    // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
+    // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
+    ...resolveLang(diag.lang) === "ja" ? { lang: "ja" } : {},
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...diag.type ? { type: diag.type } : {},
     bboxes,
@@ -15247,6 +15366,11 @@ var commonFrame2 = (active) => ({
 var ASCENT3 = 0.72;
 var DESCENT3 = 0.25;
 var MONO_ADVANCE = 0.62;
+function \u7B49\u5E45\u306E\u6841(s) {
+  let \u6841 = 0;
+  for (const c of s) \u6841 += (c.codePointAt(0) ?? 0) >= 11904 ? 2 : 1;
+  return \u6841;
+}
 var LABEL_SUB_RATIO = 11 / 16;
 var LABEL_EYE_RATIO = 12 / 16;
 var LABEL_EYE_GAP = 8;
@@ -15344,7 +15468,8 @@ function ShapeWindowNode({ node, active }) {
     commonLabel2(node, node.cx, \u540D\u524D.y, \u540D\u524D.size)
   ] });
 }
-function ShapeTerminalNode({ node, active }) {
+function ShapeTerminalNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame2(active);
   const \u7DDA = frame.strokeWidth / 2;
   const x = node.cx - node.w / 2 + \u7DDA;
@@ -15365,10 +15490,10 @@ function ShapeTerminalNode({ node, active }) {
       { \u5DE6: 16, \u5B57: 12.5, \u8272: "#7cd88f", \u6587: "$" },
       { \u5DE6: 30, \u5B57: 12.5, \u8272: "#e6edf3", \u6587: "pnpm build" }
     ],
-    [{ \u5DE6: 16, \u5B57: 12, \u8272: "#8b95a5", \u6587: "\u2192 12 chunks in 1.8s" }],
+    [{ \u5DE6: 16, \u5B57: 12, \u8272: "#8b95a5", \u6587: \u5B57\u5F15("terminal.output") }],
     [{ \u5DE6: 16, \u5B57: 12.5, \u8272: "#7cd88f", \u6587: "$" }]
   ];
-  const \u81EA\u7136\u5E45 = Math.max(...\u884C.flat().map((t) => t.\u5DE6 + t.\u6587.length * MONO_ADVANCE * t.\u5B57)) + \u4F59\u767D;
+  const \u81EA\u7136\u5E45 = Math.max(...\u884C.flat().map((c) => c.\u5DE6 + \u7B49\u5E45\u306E\u6841(c.\u6587) * MONO_ADVANCE * c.\u5B57)) + \u4F59\u767D;
   const \u81EA\u7136\u9AD8 = \u5E2F + \u5148\u982D + \u884C\u9593 * (\u884C.length - 1) + Math.max(\u30AB\u30FC\u30BD\u30EB.\u4E0B, 12.5 * DESCENT3);
   const \u500D = Math.min(1, w / \u81EA\u7136\u5E45, bodyH / \u81EA\u7136\u9AD8);
   const barH = \u5E2F * \u500D;
@@ -15478,7 +15603,8 @@ function ShapeTerminalNode({ node, active }) {
     )
   ] });
 }
-function ShapeCodeBlockNode({ node, active }) {
+function ShapeCodeBlockNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame2(active);
   const \u7DDA = frame.strokeWidth / 2;
   const x = node.cx - node.w / 2 + \u7DDA;
@@ -15568,7 +15694,7 @@ function ShapeCodeBlockNode({ node, active }) {
           fontFamily: lineFont,
           textAnchor: "middle",
           fill: "#e6edf3",
-          children: "utils.ts"
+          children: \u5B57\u5F15("codeBlock.fileName")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + tabW - \u4E38, cy: y + tabH / 2, r: 3 * \u500D, fill: "#7cd88f", stroke: "none" }),
@@ -15644,7 +15770,8 @@ function ShapeCodeBlockNode({ node, active }) {
     )
   ] });
 }
-function ShapeKanbanCardNode({ node, active }) {
+function ShapeKanbanCardNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame2(active);
   const \u7DDA = frame.strokeWidth / 2;
   const \u5F71 = 3;
@@ -15656,7 +15783,7 @@ function ShapeKanbanCardNode({ node, active }) {
   const \u5DE6\u53F3\u4F59\u767D = 14;
   const \u4E0A\u6BB5\u9699\u9593 = 8;
   const \u512A\u5148\u5E2F\u9AD8 = 10;
-  const ID\u6587 = "CAR-1111";
+  const ID\u6587 = \u5B57\u5F15("kanbanCard.id");
   const ID\u57FA\u6E96 = 30;
   const ID\u5B57 = 11;
   const ID\u5B57\u9593 = 1;
@@ -15675,7 +15802,7 @@ function ShapeKanbanCardNode({ node, active }) {
   const \u4E0B\u5E2F = FOOTER\u4E0B - AVATAR\u4E2D\u5FC3Y + AVATAR\u534A\u5F84 + AVATAR\u67A0 / 2 + \u5E2F\u9593\u4F59\u767D;
   const \u4E2D\u5E2F = \u540D\u524D\u5B57 * ASCENT3 + \u540D\u524D\u5B57 * \u8AAC\u660E\u57FA\u6E96\u6BD4 + \u540D\u524D\u5B57 * \u8AAC\u660E\u5B57\u6BD4 * DESCENT3;
   const \u81EA\u7136\u9AD8 = \u4E0A\u5E2F + \u4E2D\u5E2F + \u4E0B\u5E2F;
-  const ID\u5E45 = ID\u6587.length * MONO_ADVANCE * ID\u5B57 + ID\u5B57\u9593 * ID\u6587.length;
+  const ID\u5E45 = \u7B49\u5E45\u306E\u6841(ID\u6587) * MONO_ADVANCE * ID\u5B57 + ID\u5B57\u9593 * [...ID\u6587].length;
   const \u81EA\u7136\u5E45 = \u5DE6\u53F3\u4F59\u767D + ID\u5E45 + \u4E0A\u6BB5\u9699\u9593 + PILL\u5E45 + \u5DE6\u53F3\u4F59\u767D;
   const \u500D = Math.min(1, w / \u81EA\u7136\u5E45, h / \u81EA\u7136\u9AD8);
   const priorityBarH = \u512A\u5148\u5E2F\u9AD8 * \u500D;
@@ -15754,7 +15881,7 @@ function ShapeKanbanCardNode({ node, active }) {
           textAnchor: "middle",
           fill: "#5a4a1a",
           fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-          children: "IN PROG"
+          children: \u5B57\u5F15("kanbanCard.status")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15778,7 +15905,7 @@ function ShapeKanbanCardNode({ node, active }) {
           fontSize: \u540D\u524D.size * \u8AAC\u660E\u5B57\u6BD4,
           textAnchor: "middle",
           fill: "var(--cdl-text-dim, #5a6270)",
-          children: "shape-driven kind \u5B9F\u88C5"
+          children: \u5B57\u5F15("kanbanCard.task")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x + \u5DE6\u53F3\u4F59\u767D * \u500D}, ${footY})`, children: [
@@ -15841,7 +15968,7 @@ function ShapeKanbanCardNode({ node, active }) {
           fontWeight: 600,
           textAnchor: "end",
           fill: "var(--cdl-text-dim, #5a6270)",
-          children: "Jul 10"
+          children: \u5B57\u5F15("kanbanCard.due")
         }
       )
     ] })
@@ -16885,7 +17012,8 @@ function EthereumDiamond({ cx, cy, h, colors }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M ${cx} ${midY} L ${cx + w} ${cy + h * 0.05} L ${cx} ${lowerBotY} Z`, fill: c.dark, stroke: c.stroke, strokeWidth: 0.6, strokeLinejoin: "round" })
   ] });
 }
-function ShapeSmartContractNode({ node, active }) {
+function ShapeSmartContractNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const docW = SMART_CONTRACT_W;
@@ -16921,7 +17049,7 @@ function ShapeSmartContractNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { "data-cdl-role": "node-body", d: path, ...frame, strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: foldPath, fill: "none", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
     [y + 40, y + 58, y + 76, y + 94].map((ly, i) => /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 16, y: ly - 3, width: docW - 32 - i * 22, height: 5, rx: 1, fill: "var(--cdl-divider, #d4d4d8)", fillOpacity: 0.7, stroke: "none" }, i)),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 16, y: y + docH - 46, fontSize: 11, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-tone-accent, #2d6a8f)", children: "function execute()" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 16, y: y + docH - 46, fontSize: 11, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u5B57\u5F15("smartContract.call") }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "polygon",
       {
@@ -16942,14 +17070,14 @@ function ShapeSmartContractNode({ node, active }) {
 }
 var \u5B57\u306E\u5E45 = (text, size) => Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
 var 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" }
+  { 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: { \u8F9E\u66F8: "blockchainBlock.txCount" } }
 ];
-var BLOCK_DEFAULT_TITLE = "Block #421,873";
-function ShapeBlockchainBlockNode({ node, active }) {
+function ShapeBlockchainBlockNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const bw = BLOCK_W;
@@ -16959,11 +17087,15 @@ function ShapeBlockchainBlockNode({ node, active }) {
   const x = cx - bw / 2;
   const y = cy - bh / 2;
   const \u6E21\u3055\u308C\u305F = (v) => (v ?? "").trim();
-  const \u898B\u51FA\u3057 = \u6E21\u3055\u308C\u305F(node.title) || BLOCK_DEFAULT_TITLE;
-  const fields = BLOCK_DEFAULT_FIELDS.map((f) => ({
-    label: f.label,
-    value: f.label === "hash" ? \u6E21\u3055\u308C\u305F(node.subtitle) || f.value : f.value
-  }));
+  const \u898B\u51FA\u3057 = \u6E21\u3055\u308C\u305F(node.title) || \u5B57\u5F15("blockchainBlock.title");
+  const fields = BLOCK_DEFAULT_FIELDS.map((f) => {
+    const \u65E2\u5B9A\u5024 = "text" in f.value ? f.value.text : \u5B57\u5F15(f.value.\u8F9E\u66F8);
+    return {
+      key: f.key,
+      label: \u5B57\u5F15(f.label),
+      value: f.key === "hash" ? \u6E21\u3055\u308C\u305F(node.subtitle) || \u65E2\u5B9A\u5024 : \u65E2\u5B9A\u5024
+    };
+  });
   const \u898B\u51FA\u3057\u306E\u5E45 = bw - 14 - 30;
   const art = /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
@@ -16973,7 +17105,7 @@ function ShapeBlockchainBlockNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
     fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("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)", children: f.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("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)", children: \u5E45\u3067\u5207\u308B(f.value, 11, bw - 28 - \u5B57\u306E\u5E45(f.label, 10.5) - 8, \u5B57\u306E\u5E45) }),
+      /* @__PURE__ */ jsxRuntime.jsx("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)", children: \u5E45\u3067\u5207\u308B(f.value, 11, bw - 28 - \u5B57\u306E\u5E45(f.label, 10.5) - 8, \u5B57\u306E\u5E45) }),
       /* @__PURE__ */ jsxRuntime.jsx("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 })
     ] }, i)),
     /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
@@ -17178,7 +17310,8 @@ function ShapeBlockchainNodeNode({ node, active }) {
     bottomLabel2(node, r.cx, r.label)
   ] });
 }
-function ShapeRpcNodeNode({ node, active }) {
+function ShapeRpcNodeNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17191,7 +17324,7 @@ function ShapeRpcNodeNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width: bw, height: 30, rx: 10, fill: "#2d3a4f", stroke: "none" }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + 14, cy: y + 15, r: 5, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: "1.5s", repeatCount: "indefinite" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 26, y: y + 20, fontSize: 12, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, fill: "#7cd88f", children: "RPC ONLINE" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 26, y: y + 20, fontSize: 12, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 700, fill: "#7cd88f", children: \u5B57\u5F15("rpcNode.status") }),
     /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy + 6, fontSize: 30, fontWeight: 700, textAnchor: "middle", fill: "#e6edf3", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "{...}" }),
     /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy + 26, fontSize: 11, textAnchor: "middle", fill: "#7a8290", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "JSON-RPC 2.0" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 16, y: y + bh - 24, width: bw - 32, height: 8, rx: 4, fill: "#0f1419", stroke: "none" }),
@@ -17477,7 +17610,8 @@ var TRUST_BASE_H = 14;
 var TRUST_BODY_OUT = 8;
 var TRUST_BLD_W_MIN = 140;
 var TRUST_BLD_W_MAX = 280;
-function ShapeTrustBankNode({ node, active }) {
+function ShapeTrustBankNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const \u7DDA = frame.strokeWidth / 2;
@@ -17514,7 +17648,7 @@ function ShapeTrustBankNode({ node, active }) {
       return /* @__PURE__ */ jsxRuntime.jsx("rect", { 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 }, i);
     }),
     /* @__PURE__ */ jsxRuntime.jsx("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" }),
-    /* @__PURE__ */ jsxRuntime.jsx("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", children: "TRUST" }),
+    /* @__PURE__ */ jsxRuntime.jsx("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", children: \u5B57\u5F15("trustBank.sign") }),
     /* @__PURE__ */ jsxRuntime.jsx("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;
@@ -17533,7 +17667,8 @@ function ShapeTrustBankNode({ node, active }) {
     bottomLabel3(node, r.cx, r.label)
   ] });
 }
-function ShapePaymentProviderNode({ node, active }) {
+function ShapePaymentProviderNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17550,13 +17685,13 @@ function ShapePaymentProviderNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: boxW, height: boxH, rx: 10, fill: "#255a7a", stroke: accentDark, strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width: boxW, height: headerH, rx: 10, fill: accentDarker }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y + headerH - 8, width: boxW, height: 8, fill: accentDarker }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 22, fontSize: 16, fontWeight: 700, letterSpacing: 4, textAnchor: "middle", fill: "#e5c07b", children: "PAY" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 22, fontSize: 16, fontWeight: 700, letterSpacing: 4, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("paymentProvider.sign") }),
     /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy: cy + 4, r: 22, fill: "none", stroke: "#e5c07b", strokeWidth: 3.5, strokeDasharray: "38 24", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${cx} ${cy + 4}`, to: `360 ${cx} ${cy + 4}`, dur: "2s", repeatCount: "indefinite" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy: cy + 4, r: 10, fill: "#e5c07b", stroke: accentDarker, strokeWidth: 1.5 }),
       /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy + 9, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: accentDarker, fontFamily: "Georgia, serif", children: "$" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + boxH - 16, fontSize: 9, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#a4b5f2", children: "PROCESSING" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + boxH - 16, fontSize: 9, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("paymentProvider.status") }),
     bottomLabel3(node, r.cx, r.label)
   ] });
 }
@@ -17604,7 +17739,8 @@ var BROKERAGE_SHADE_OUT = 2;
 var BROKERAGE_W_MIN = BROKERAGE_COLS * BROKERAGE_CELL_W + (BROKERAGE_COLS - 1) * BROKERAGE_GAP_X + 6;
 var BROKERAGE_W_MAX = 140;
 var BROKERAGE_H_MIN = BROKERAGE_TICK_H + BROKERAGE_LOGO_H + BROKERAGE_BASE_H;
-function ShapeBrokerageNode({ node, active }) {
+function ShapeBrokerageNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17640,9 +17776,9 @@ function ShapeBrokerageNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x - BROKERAGE_SHADE_OUT, y, width: BROKERAGE_SHADE_OUT * 2, height: h, fill: accentDarker }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width: w, height: BROKERAGE_TICK_H, fill: "#0f1830", stroke: "none" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: w - 4, height: 8, fill: "#1a2340", stroke: "none" }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 9, fontSize: 5.5, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "\u25B2NKY 38,240 \u25B2AAPL 194" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 9, fontSize: 5.5, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: \u5B57\u5F15("brokerage.ticker") }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y + BROKERAGE_TICK_H, width: w, height: BROKERAGE_LOGO_H, fill: "#e5c07b", stroke: "none" }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 30, fontSize: 12, fontWeight: 700, letterSpacing: 2.5, textAnchor: "middle", fill: "#0f1830", children: "$ SECURITIES" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 30, fontSize: 12, fontWeight: 700, letterSpacing: 2.5, textAnchor: "middle", fill: "#0f1830", children: \u5B57\u5F15("brokerage.sign") }),
     Array.from({ length: rows }).map(
       (_, ri) => Array.from({ length: cols }).map((_2, ci) => {
         const wx = gridStartX + ci * (cellW + gapX);
@@ -17663,7 +17799,8 @@ function ShapeBrokerageNode({ node, active }) {
     bottomLabel3(node, r.cx, r.label)
   ] });
 }
-function ShapeExchangeNode({ node, active }) {
+function ShapeExchangeNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17708,9 +17845,9 @@ function ShapeExchangeNode({ node, active }) {
       ] }, `d${i}`);
     }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: hexPath, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy - 8, fontSize: 10, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: "EXCHANGE" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy - 8, fontSize: 10, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("exchange.sign") }),
     /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-body", x: cx, y: cy + 12, fontSize: 22, fontWeight: 700, textAnchor: "middle", fill: "#e5c07b", children: "\u21C4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy + 26, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: "clearing" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy + 26, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("exchange.sub") }),
     nodes.map((n, i) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: n.cx, cy: n.cy, r: 8, fill: n.fill, stroke: accentDarker, strokeWidth: 1.5 }, `n${i}`))
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
@@ -17732,7 +17869,8 @@ var ATM_PANEL_H = 146;
 var ATM_W_MIN = 100;
 var ATM_W_MAX = 140;
 var ATM_H_MIN = ATM_SIGN_H + ATM_SIGN_GAP + 30 + ATM_FLOOR_RESERVE;
-function ShapeAtmNode({ node, active }) {
+function ShapeAtmNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17766,12 +17904,12 @@ function ShapeAtmNode({ node, active }) {
   const \u7D75 = /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("ellipse", { 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" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: centerX - totalW / 2, y: signY, width: totalW, height: signH, fill: accentDarker, stroke: "#000", strokeWidth: ATM_SIGN_SW }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: centerX, y: signY + 17, fontSize: 11, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: "ATM CORNER" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: centerX, y: signY + 17, fontSize: 11, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("atm.sign") }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x: atmX, y: atmY, width: atmW, height: atmH, rx: 6, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${centerX} ${atmY}) scale(${\u9762})`, children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u9762\u5DE6 + 8, y: 10, width: ATM_PANEL_W - 16, height: 52, rx: 3, fill: "#0f1830", stroke: "#000", strokeWidth: 1.5 }),
       /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 30, fontSize: 10, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: "\u304A\u5F15\u51FA\u3057" }),
-      /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 44, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: "SELECT AMOUNT" }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 44, fontSize: 8, fontWeight: 700, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("atm.screen") }),
       /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 56, fontSize: 10, fontWeight: 700, textAnchor: "middle", fill: "#4ea36a", children: "\xA5 20,000" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u9762\u5DE6 + 8, y: 68, width: ATM_PANEL_W - 16, height: 42, rx: 2, fill: "#8b949e", stroke: "#5a6270", strokeWidth: 1 }),
       (() => {
@@ -17785,7 +17923,7 @@ function ShapeAtmNode({ node, active }) {
           ["5", "#5a6270"],
           ["6", "#5a6270"],
           ["0", "#5a6270"],
-          ["OK", "#4ea36a"]
+          [\u5B57\u5F15("atm.ok"), "#4ea36a"]
         ];
         const keyW = 18;
         const keyH = 10;
@@ -17798,13 +17936,16 @@ function ShapeAtmNode({ node, active }) {
           const ky = 74 + row * (keyH + 2);
           return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { x: kx, y: ky, width: keyW, height: keyH, fill: k[1], stroke: "#0f1830", strokeWidth: 0.8 }),
-            /* @__PURE__ */ jsxRuntime.jsx("text", { x: kx + keyW / 2, y: ky + 7, fontSize: k[0] === "OK" ? 6 : 7, fontWeight: 700, textAnchor: "middle", fill: "#ffffff", children: k[0] })
+            /* @__PURE__ */ jsxRuntime.jsx("text", { x: kx + keyW / 2, y: ky + 7, fontSize: (
+              /* 決める鍵 (末尾) は 2 字あるので小さく描く。 字は言語で変わるため位置で見分ける */
+              i === keys.length - 1 ? 6 : 7
+            ), fontWeight: 700, textAnchor: "middle", fill: "#ffffff", children: k[0] })
           ] }, `k${i}`);
         });
       })(),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u9762\u5DE6 + 12, y: 116, width: ATM_PANEL_W - 24, height: 8, rx: 1.5, fill: "#0f1830", stroke: accentDarker, strokeWidth: 1 }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u9762\u5DE6 + 15, y: 118, width: ATM_PANEL_W - 30, height: 4, rx: 0.5, fill: "#e5c07b" }),
-      /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 132, fontSize: 6, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: "CARD SLOT" }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 132, fontSize: 6, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#e5c07b", children: \u5B57\u5F15("atm.cardSlot") }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u9762\u5DE6 + 12, y: 136, width: ATM_PANEL_W - 24, height: 4, rx: 1, fill: "#0f1830" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: centerX - totalW / 2, y: floorY, width: totalW, height: 6, fill: "#8b949e", stroke: "none" }),
@@ -17889,7 +18030,8 @@ function ShapeWebsiteNode({ node, active }) {
     bottomLabel4(node, r.cx, r.label)
   ] });
 }
-function ShapeStorefrontNode({ node, active }) {
+function ShapeStorefrontNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17915,7 +18057,7 @@ function ShapeStorefrontNode({ node, active }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx, cy: y + bh + 8, rx: bw * 0.5, ry: 5, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width: bw, height: signH, fill: accent, stroke: accentDark, strokeWidth: 2 }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 18, fontSize: 16, fontWeight: 900, letterSpacing: 8, textAnchor: "middle", fill: "#ffffff", children: "SHOP" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 18, fontSize: 16, fontWeight: 900, letterSpacing: 8, textAnchor: "middle", fill: "#ffffff", children: \u5B57\u5F15("storefront.sign") }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y: facadeY, width: bw, height: facadeH, fill: "#e0e4e8", stroke: "#5a6270", strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: winX, y: winY, width: winW, height: winH, fill: "#a4c5d9", stroke: accentDarker, strokeWidth: 2 }),
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: winX + winW / 2, y1: winY, x2: winX + winW / 2, y2: winY + winH, stroke: accentDarker, strokeWidth: 1 }),
@@ -17929,7 +18071,7 @@ function ShapeStorefrontNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: doorX + 4, y1: doorY + doorH * 0.38, x2: doorX + doorW - 4, y2: doorY + doorH * 0.38, stroke: accentDarker, strokeWidth: 1 }),
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: doorX + 4, y1: doorY + doorH * 0.72, x2: doorX + doorW - 4, y2: doorY + doorH * 0.72, stroke: accentDarker, strokeWidth: 1 }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: doorX + doorW / 2 - 20, y: doorY + doorH * 0.85, width: 40, height: 12, fill: "#e5c07b", stroke: "#a67c00", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: doorX + doorW / 2, y: doorY + doorH * 0.85 + 9, fontSize: 8, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#5a3a10", children: "OPEN" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: doorX + doorW / 2, y: doorY + doorH * 0.85 + 9, fontSize: 8, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#5a3a10", children: \u5B57\u5F15("storefront.open") }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: doorX + 6, cy: doorY + doorH * 0.55, r: 1.5, fill: "#c15a4a" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x - 6, y: y + bh - 6, width: bw + 12, height: 8, fill: "#5a6270", stroke: "none" }),
     bottomLabel4(node, r.cx, r.label)
@@ -17946,7 +18088,8 @@ var WAREHOUSE_SHADOW_RX_RATIO = 0.5;
 var WAREHOUSE_H_MIN = WAREHOUSE_ROOF_H + WAREHOUSE_SIGN_H + 68;
 var WAREHOUSE_W_MIN = 160;
 var WAREHOUSE_W_MAX = 240;
-function ShapeWarehouseNode({ node, active }) {
+function ShapeWarehouseNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -17975,7 +18118,7 @@ function ShapeWarehouseNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M ${x - WAREHOUSE_ROOF_OUT} ${y + roofH} L ${x + 12} ${y + 2} L ${x + bw - 12} ${y + 2} L ${x + bw + WAREHOUSE_ROOF_OUT} ${y + roofH} Z`, fill: "#5a6270", stroke: accentDarker, strokeWidth: WAREHOUSE_ROOF_SW, strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y: y + roofH, width: bw, height: bh - roofH - 12, fill: "#a89d8f", stroke: "#5a6270", strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y + roofH, width: bw, height: signH, fill: "#c15a4a", stroke: "#8b3f2f", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + roofH + 17, fontSize: 12, fontWeight: 900, letterSpacing: 6, textAnchor: "middle", fill: "#ffffff", children: "WAREHOUSE" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + roofH + 17, fontSize: 12, fontWeight: 900, letterSpacing: 6, textAnchor: "middle", fill: "#ffffff", children: \u5B57\u5F15("warehouse.sign") }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: shutterX, y: shutterY, width: shutterW, height: shutterH, fill: "#8b949e", stroke: accentDarker, strokeWidth: 2 }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: shutterX, y: shutterY, width: shutterW, height: 5, fill: "#5a6270", stroke: "none" }),
     Array.from({ length: 10 }, (_, i) => i).map((i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -18132,7 +18275,8 @@ var API_ROWS = 3;
 var API_H_MIN = API_ROW_TOP + (API_ROWS - 1) * API_ROW_PITCH_MIN + API_ROW_H + API_ROW_BOTTOM_PAD;
 var API_W_MIN = 200;
 var API_W_MAX = 300;
-function ShapeApiGatewayNode({ node, active }) {
+function ShapeApiGatewayNode({ node, active, lang }) {
+  const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -18143,6 +18287,7 @@ function ShapeApiGatewayNode({ node, active }) {
   const x = cx - bw / 2;
   const y = r.cy - \u7E26 / 2 + \u4F59\u767D;
   const \u5E83\u304C\u308A = { \u4E0A: \u7E26 / 2, \u4E0B: \u7E26 / 2, \u5DE6: bw / 2 + \u4F59\u767D, \u53F3: bw / 2 + \u4F59\u767D };
+  const \u7A2E\u985E\u306E\u5B57 = (s) => 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)
@@ -18151,15 +18296,15 @@ function ShapeApiGatewayNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + DROP_SHADOW_D, y: y + DROP_SHADOW_D, width: bw, height: bh, rx: 10, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width: bw, height: 36, rx: 10, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none" }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 24, fontSize: 14, fontWeight: 700, letterSpacing: 3, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "API GATEWAY" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: y + 24, fontSize: 14, fontWeight: 700, letterSpacing: 3, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: \u5B57\u5F15("apiGateway.sign") }),
     [
-      { method: "GET", path: "/users", color: "#27c93f" },
-      { method: "POST", path: "/orders", color: "#e5c07b" },
-      { method: "DEL", path: "/session", color: "#c9302c" }
+      { method: "GET", path: \u5B57\u5F15("apiGateway.users"), color: "#27c93f" },
+      { method: "POST", path: \u5B57\u5F15("apiGateway.orders"), color: "#e5c07b" },
+      { method: \u5B57\u5F15("apiGateway.delete"), path: \u5B57\u5F15("apiGateway.session"), color: "#c9302c" }
     ].map((e, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`, children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: bw - 32, height: API_ROW_H, rx: 4, fill: "#0f1419", stroke: "none" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 54, height: API_ROW_H, rx: 4, fill: e.color, stroke: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("text", { x: 27, y: 16, fontSize: 11, fontWeight: 700, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: e.method }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: 27, y: 16, fontSize: \u7A2E\u985E\u306E\u5B57(e.method), fontWeight: 700, textAnchor: "middle", fill: "#ffffff", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: e.method }),
       /* @__PURE__ */ jsxRuntime.jsx("text", { x: 64, y: 16, fontSize: 12, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#e6edf3", children: e.path }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: bw - 44, cy: 12, r: 4, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: `${1.2 + i * 0.3}s`, repeatCount: "indefinite" }) })
     ] }, i))
@@ -18464,7 +18609,8 @@ function CdlNodeView({
   stateValues,
   currentPhaseId,
   chartLineScale,
-  \u95A2\u4FC2\u306E\u53D7\u3051\u53E3
+  \u95A2\u4FC2\u306E\u53D7\u3051\u53E3,
+  lang
 }) {
   const value = node.value ? interpolate(node.value, stateValues) : void 0;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
@@ -18680,11 +18826,11 @@ function CdlNodeView({
       case "shape-window":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeWindowNode, { node: resolvedNode, active });
       case "shape-terminal":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTerminalNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTerminalNode, { node: resolvedNode, active, lang });
       case "shape-code-block":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCodeBlockNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang });
       case "shape-kanban-card":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeKanbanCardNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang });
       case "shape-message-bubble":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeMessageBubbleNode, { node: resolvedNode, active });
       case "shape-gear":
@@ -18702,11 +18848,11 @@ function CdlNodeView({
       case "shape-satellite":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeSatelliteNode, { node: resolvedNode, active });
       case "shape-smart-contract":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeSmartContractNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang });
       case "shape-blockchain-block":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang });
       case "shape-rpc-node":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeRpcNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang });
       case "shape-wallet":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeWalletNode, { node: resolvedNode, active });
       case "shape-nft":
@@ -18724,29 +18870,29 @@ function CdlNodeView({
       case "shape-bank":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeBankNode, { node: resolvedNode, active });
       case "shape-trust-bank":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTrustBankNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang });
       case "shape-payment-provider":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapePaymentProviderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang });
       case "shape-credit-card":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeCreditCardNode, { node: resolvedNode, active });
       case "shape-brokerage":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBrokerageNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang });
       case "shape-exchange":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeExchangeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeExchangeNode, { node: resolvedNode, active, lang });
       case "shape-atm":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeAtmNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeAtmNode, { node: resolvedNode, active, lang });
       case "shape-website":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeWebsiteNode, { node: resolvedNode, active });
       case "shape-storefront":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeStorefrontNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang });
       case "shape-warehouse":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWarehouseNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang });
       case "shape-online-shop":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeOnlineShopNode, { node: resolvedNode, active });
       case "shape-cdn-edge":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeCdnEdgeNode, { node: resolvedNode, active });
       case "shape-api-gateway":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeApiGatewayNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang });
       case "shape-auditor":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeAuditorNode, { node: resolvedNode, active });
       case "shape-regulator":
@@ -19121,6 +19267,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                lang: laid.lang,
                 \u95A2\u4FC2\u306E\u53D7\u3051\u53E3: \u7BB1\u306E\u53D7\u3051\u53E3,
                 drawing: \u63CF\u304F,
                 progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
@@ -22822,6 +22969,12 @@ function ProgressGroupReadout({
     }) })
   ] });
 }
+function sequenceLabelAnchor(x, name, fontSize, viewW) {
+  const half = textWidth(name, fontSize) / 2;
+  if (x - half < 0) return "start";
+  if (x + half > viewW) return "end";
+  return "middle";
+}
 function SequenceTimelineReadout({
   id,
   label,
@@ -22873,7 +23026,7 @@ function SequenceTimelineReadout({
             const x = xFor(e.t);
             return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-event-marker": e.name, children: [
               /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: trackY, r: 5, fill: color, stroke: "#fff", strokeWidth: 1.5, children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${e.name}: t=${e.t}` }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: trackY - 12, textAnchor: "middle", fontSize: 10, fill: "var(--v4-ink, #1a1f2a)", children: e.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: trackY - 12, textAnchor: sequenceLabelAnchor(x, e.name, 10, viewW), fontSize: 10, fill: "var(--v4-ink, #1a1f2a)", children: e.name }),
               /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: trackY + 18, textAnchor: "middle", fontSize: 9, fill: "var(--v4-mute, #64748b)", children: e.t })
             ] }, i);
           })