@cardenelabs/cdl 0.57.1 → 0.59.0

package/src/kinds/shape-software.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
+import { 字引きを作る, type CdlLang } from "../lang";
 
 /**
  * Shape-driven software 6 kinds (CAR-1111 Phase 2-B)。
@@ -38,6 +39,8 @@ import type { LaidNode } from "../types";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
+  lang?: CdlLang;
 };
 
 const commonFrame = (active: boolean) => ({
@@ -53,6 +56,19 @@ const DESCENT = 0.25;
 // SVG の字幅は描く前に測れず、 getBBox も描いた後にしか使えないため送り幅で見積もる。
 // 手元の等幅書体は 0.55-0.61 なので、 0.62 なら実寸を下回らず収めた行が実際にはみ出さない。
 const MONO_ADVANCE = 0.62;
+
+/**
+ * 等幅の書体で描く字の桁数。 和文 (U+2E80 以降) は 2 桁、それ以外は 1 桁で数える (#847)。
+ *
+ * 字数 (`length`) で数えると、日本語の辞書で描く字 (`進行中` / `→ 12 個を 1.8 秒で出力`) を
+ * 半分の幅に見積もり、縮める倍率が効かずに箱からはみ出す。 英語の辞書の字はすべて U+2E80 より
+ * 前にあり (`→` も含む)、字数と同じ値になるので、英語の図の見え方は変わらない。
+ */
+function 等幅の桁(s: string): number {
+  let 桁 = 0;
+  for (const c of s) 桁 += (c.codePointAt(0) ?? 0) >= 0x2e80 ? 2 : 1;
+  return 桁;
+}
 // 説明は名前が 16 の時に従来の 11 となり、 名前を縮めた時も同じ比で追随する。
 const LABEL_SUB_RATIO = 11 / 16;
 // 肩書は名前が 16 の時に従来の 12 となり、 名前を縮めた時も同じ比で追随する。
@@ -187,7 +203,8 @@ export function ShapeWindowNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-terminal = 端末 (黒地 + macOS 風 top bar + prompt 3 行 + typing cursor) */
-export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
   const x = node.cx - node.w / 2 + 線;
@@ -209,11 +226,11 @@ export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
       { 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" },
       { 左: 30, 字: 12.5, 色: "#e6edf3", 文: "pnpm build" },
     ],
-    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: "→ 12 chunks in 1.8s" }],
+    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: 字引("terminal.output") }],
     [{ 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" }],
   ];
   // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
-  const 自然幅 = Math.max(...行.flat().map((t) => t.左 + t.文.length * MONO_ADVANCE * t.字)) + 余白;
+  const 自然幅 = Math.max(...行.flat().map((c) => c.左 + 等幅の桁(c.文) * MONO_ADVANCE * c.字)) + 余白;
   // 最終行とカーソルまで入る自然高を使い、 縦にも同じ倍率を適用できるようにする。
   const 自然高 = 帯 + 先頭 + 行間 * (行.length - 1) + Math.max(カーソル.下, 12.5 * DESCENT);
   // 縦横を同じ倍率で縮めて比を保ち、 幅 300・高さ 200 では 1 のまま従来値を保つ。
@@ -317,7 +334,8 @@ export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-code-block = code editor (tab + gutter + 4 syntax-colored stub lines) */
-export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
   const x = node.cx - node.w / 2 + 線;
@@ -410,7 +428,7 @@ export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
             textAnchor="middle"
             fill="#e6edf3"
           >
-            utils.ts
+            {字引("codeBlock.fileName")}
           </text>
           <circle cx={x + tabW - 丸} cy={y + tabH / 2} r={3 * 倍} fill="#7cd88f" stroke="none" />
           <path
@@ -483,7 +501,8 @@ export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-kanban-card = kanban ticket (top color bar + 3 stub line) */
-export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
   // 影は札を右下へずらして重ねるため、 ずらす分と枠線を札の寸法から先に引く。
@@ -496,7 +515,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
   const 左右余白 = 14;
   const 上段隙間 = 8;
   const 優先帯高 = 10;
-  const ID文 = "CAR-1111";
+  const ID文 = 字引("kanbanCard.id");
   const ID基準 = 30;
   const ID字 = 11;
   const ID字間 = 1;
@@ -516,7 +535,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
   const 下帯 = FOOTER下 - AVATAR中心Y + AVATAR半径 + AVATAR枠 / 2 + 帯間余白;
   const 中帯 = 名前字 * ASCENT + 名前字 * 説明基準比 + 名前字 * 説明字比 * DESCENT;
   const 自然高 = 上帯 + 中帯 + 下帯;
-  const ID幅 = ID文.length * MONO_ADVANCE * ID字 + ID字間 * ID文.length;
+  const ID幅 = 等幅の桁(ID文) * MONO_ADVANCE * ID字 + ID字間 * [...ID文].length;
   const 自然幅 = 左右余白 + ID幅 + 上段隙間 + PILL幅 + 左右余白;
   // 札の中身だけを縦横同率で縮め、 入る札では 1 のまま従来の大きさを保つ。
   const 倍 = Math.min(1, w / 自然幅, h / 自然高);
@@ -594,7 +613,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
             fill="#5a4a1a"
             fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
           >
-            IN PROG
+            {字引("kanbanCard.status")}
           </text>
           {/* タスク名 = title (中央上、 大きく太字) */}
           <text
@@ -616,7 +635,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
             textAnchor="middle"
             fill="var(--cdl-text-dim, #5a6270)"
           >
-            shape-driven kind 実装
+            {字引("kanbanCard.task")}
           </text>
           {/* footer = 2 avatars 左 + due date 右 */}
           <g transform={`translate(${x + 左右余白 * 倍}, ${footY})`}>
@@ -668,7 +687,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
             textAnchor="end"
             fill="var(--cdl-text-dim, #5a6270)"
           >
-            Jul 10
+            {字引("kanbanCard.due")}
           </text>
         </>
       )}

package/src/lang.ts

@@ -0,0 +1,392 @@
+/**
+ * 描画側が書く固定の字の言語 (#847)。
+ *
+ * 書き手が何を渡しても描かれる字 (形の看板 / 絵の中の見本の値 / 行の名前) を 1 つの辞書に集め、
+ * 図の `lang` で引き替える。 書き手の字 (`title` / `subtitle` / 行 / 札) はこの辞書を通らない。
+ *
+ * **既定は英語**。 字を直接日本語へ書き換えると、英語で使う人の図まで変わり、戻す口も無い。
+ * 指定の無い図は変更前と同じ字で描く。
+ *
+ * **JSX を持たない module に置く**。 型の定義 (`types.ts`) と配置 (`layout.ts`) からも読むため、
+ * ここから React を引き込むと字の幅を測る検査の読込みが重くなる (`kinds/text-width.ts` の注記と同じ)。
+ *
+ * 言語は `CdlStage` → `CdlNodeView` → 形の部品へ引数 (`lang`) で届く。
+ */
+
+/** 図の言語。 書かない図は `"en"` で描く */
+export type CdlLang = "en" | "ja";
+
+/**
+ * 記法から届いた値を言語に直す。 型の外の値 (記法の文字列の書き損じ等) は既定の `"en"` に落とす。
+ *
+ * 落とす先を英語にするのは、指定の無い図と同じ見え方になるため。 書き損じで一部の字だけ
+ * 日本語になる形は作らない。
+ */
+export function resolveLang(value: unknown): CdlLang {
+  return value === "ja" ? "ja" : "en";
+}
+
+/**
+ * 英語の辞書。 鍵の一覧の出どころで、値は変更前に描いていた字そのもの。
+ *
+ * 鍵は `形.役割` の形にする。 同じ字でも役割が違えば別の鍵にする (訳が分かれうるため)。
+ */
+const en = {
+  /** `shape-terminal` の 2 行目 (命令の出力) */
+  "terminal.output": "→ 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 実装",
+  /** `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": "▲NKY 38,240 ▲AAPL 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",
+
+  // 読み出し (`readout.*`) と入力欄の固定の字 (#849)。
+  // `{名前}` は描く時に値を差し込む位置 (`字を差し込む`)。 語順が言語で変わるので、位置ごと辞書に持つ
+
+  /** 配列を描く読み出しで、値が空の時の字 */
+  "readout.empty": "empty",
+  /** `sparkline` で点がまだ無い時の字 */
+  "readout.sparkline.waiting": "waiting",
+  /** 時の流れの入力欄の速さ */
+  "input.timeline.speed": "{speed}x",
+  /** 時の流れの入力欄の経過と長さ (秒) */
+  "input.timeline.time": "{t}s / {d}s",
+  /** `sequence-timeline` の点の見出し */
+  "readout.sequenceTimeline.title": "{name}: t={t}",
+  /** `bubble-chart` の泡の見出し */
+  "readout.bubbleChart.title": "({x}, {y}) r={r}",
+  /** `calendar-heatmap` の升目の見出し (`i` は 0 から) */
+  "readout.calendarHeatmap.title": "day {i}: {v}",
+  /** `candlestick` の足の見出し (始値 / 高値 / 安値 / 終値) */
+  "readout.candlestick.title": "O:{o} H:{h} L:{l} C:{c}",
+  /** `slope` の左の目盛 */
+  "readout.slope.before": "before",
+  /** `slope` の右の目盛 */
+  "readout.slope.after": "after",
+  /** `bullet-chart` の実績の見出し */
+  "readout.bulletChart.actual": "actual: {v}",
+  /** `bullet-chart` の目標の見出し */
+  "readout.bulletChart.target": "target: {v}",
+  /** `rating` の塗った星の見出し */
+  "readout.rating.full": "full",
+  /** `rating` の半分塗った星の見出し */
+  "readout.rating.half": "half",
+  /** `rating` の塗っていない星の見出し */
+  "readout.rating.empty": "empty",
+  /** `price-tag` の割引額 */
+  "readout.priceTag.save": "You save {amount}",
+  /** `confidence-meter` の低い帯の名前 */
+  "readout.confidence.low": "low",
+  /** `confidence-meter` の中ほどの帯の名前 */
+  "readout.confidence.mid": "mid",
+  /** `confidence-meter` の高い帯の名前 */
+  "readout.confidence.high": "high",
+  /** 並べきれなかった件数 (`user-stack` / `kanban-board` / `user-presence`) */
+  "readout.more": "+{n} more",
+  /** `video-card` の再生数 */
+  "readout.videoCard.views": "{v} views",
+  /** `attendance-grid` の角の見出し */
+  "readout.attendance.corner": "day",
+  /** `calendar-month` の曜日 (日曜) */
+  "readout.weekday.0": "Sun",
+  /** `calendar-month` の曜日 (月曜) */
+  "readout.weekday.1": "Mon",
+  /** `calendar-month` の曜日 (火曜) */
+  "readout.weekday.2": "Tue",
+  /** `calendar-month` の曜日 (水曜) */
+  "readout.weekday.3": "Wed",
+  /** `calendar-month` の曜日 (木曜) */
+  "readout.weekday.4": "Thu",
+  /** `calendar-month` の曜日 (金曜) */
+  "readout.weekday.5": "Fri",
+  /** `calendar-month` の曜日 (土曜) */
+  "readout.weekday.6": "Sat",
+  /** `rating-thumb` の賛成の割合と票数 */
+  "readout.ratingThumb.summary": "{pct}% up · {total} votes",
+  /** `kpi-trend-tile` の前の期間の値 */
+  "readout.kpiTrend.prev": "prev {v}",
+  /** `quick-poll-emoji` の票の合計 */
+  "readout.poll.total": "total {n}",
+  /** `thread-summary` の参加者の数 */
+  "readout.thread.participants": "{n} participants",
+  /** `thread-summary` の最後に書いた人 */
+  "readout.thread.last": "last: {name}",
+  /** `read-receipt` の送信した段 */
+  "readout.readReceipt.sent": "sent",
+  /** `read-receipt` の相手に届いた段 */
+  "readout.readReceipt.delivered": "delivered",
+  /** `read-receipt` の読まれた段 */
+  "readout.readReceipt.read": "read",
+  /** `password-strength` の段階 0 */
+  "readout.password.0": "too weak",
+  /** `password-strength` の段階 1 */
+  "readout.password.1": "weak",
+  /** `password-strength` の段階 2 */
+  "readout.password.2": "fair",
+  /** `password-strength` の段階 3 */
+  "readout.password.3": "good",
+  /** `password-strength` の段階 4 */
+  "readout.password.4": "strong",
+  /** `file-dropzone` で取り込んだ後の字 */
+  "readout.dropzone.uploaded": "uploaded",
+  /** `file-dropzone` の空の時の 1 行目 */
+  "readout.dropzone.drop": "⬆ Drop file here",
+  /** `file-dropzone` の空の時の 2 行目 */
+  "readout.dropzone.browse": "or click to browse",
+  /** `log-stream` の重さ 0 (調べるための詳細) */
+  "readout.log.0": "DBG",
+  /** `log-stream` の重さ 1 (知らせ) */
+  "readout.log.1": "INF",
+  /** `log-stream` の重さ 2 (警告) */
+  "readout.log.2": "WRN",
+  /** `log-stream` の重さ 3 (異常) */
+  "readout.log.3": "ERR",
+  /** `cart-summary` の点数 */
+  "readout.cart.items": "Items",
+  /** `cart-summary` の小計 */
+  "readout.cart.subtotal": "Subtotal",
+  /** `cart-summary` の送料 */
+  "readout.cart.shipping": "Shipping",
+  /** `cart-summary` の合計 */
+  "readout.cart.total": "Total",
+  /** `pricing-tier` で名前が空の時の名前 */
+  "readout.pricing.plan": "Plan",
+  /** `pricing-tier` の価格の後ろ */
+  "readout.pricing.perMonth": "per month",
+  /** `pricing-tier` の押す札 */
+  "readout.pricing.get": "Get {name}",
+  /** `coupon-code` で番号が空の時の字 */
+  "readout.coupon.placeholder": "ENTER CODE",
+  /** `coupon-code` の割引の割合 */
+  "readout.coupon.off": "-{pct}% off",
+  /** `coupon-code` の押す札 */
+  "readout.coupon.apply": "Apply",
+  /** `article-preview` の書いた人 */
+  "readout.article.by": "by {author}",
+  /** `priority-badge` の高い優先度の表示 (値は `high` / `2` で読む) */
+  "readout.priority.high": "HIGH",
+  /** `priority-badge` の中ほどの優先度の表示 */
+  "readout.priority.med": "MED",
+  /** `priority-badge` の低い優先度の表示 (値は `low` / `0` で読む) */
+  "readout.priority.low": "LOW",
+  /** `kanban-board` の列の見出し (値は `todo` で読む) */
+  "readout.kanban.todo": "Todo",
+  /** `kanban-board` の列の見出し (値は `inprogress` で読む) */
+  "readout.kanban.inprogress": "In Progress",
+  /** `kanban-board` の列の見出し (値は `done` で読む) */
+  "readout.kanban.done": "Done",
+  /** `traffic-light` の赤の灯の見出し (値は `red` で読む) */
+  "readout.trafficLight.red": "red",
+  /** `traffic-light` の黄の灯の見出し (値は `yellow` / `amber` で読む) */
+  "readout.trafficLight.yellow": "yellow",
+  /** `traffic-light` の緑の灯の見出し (値は `green` で読む) */
+  "readout.trafficLight.green": "green",
+} as const;
+
+/** 辞書の鍵 */
+export type CdlTextKey = keyof typeof en;
+
+/**
+ * 日本語の辞書。 型を `en` の鍵と同じにし、訳の抜けと余分な鍵を型で落とす。
+ *
+ * 製品名と定着した略語 (`API` / `ATM` / `RPC`) と、要求の種類の綴り (`DELETE`) は英字のまま残す。
+ * 日本語の文でもこの綴りで書くため。
+ */
+const ja: Record<CdlTextKey, string> = {
+  "terminal.output": "→ 1.8 秒で完了",
+  "codeBlock.fileName": "共通.ts",
+  "kanbanCard.id": "#1111",
+  "kanbanCard.status": "進行中",
+  "kanbanCard.task": "形を実装",
+  "kanbanCard.due": "7/10",
+  "smartContract.call": "自動で実行する",
+  "blockchainBlock.title": "ブロック #421,873",
+  "blockchainBlock.hash": "ハッシュ",
+  "blockchainBlock.prev": "直前",
+  "blockchainBlock.merkle": "木の根",
+  "blockchainBlock.nonce": "ノンス",
+  "blockchainBlock.tx": "取引",
+  "blockchainBlock.txCount": "142 件",
+  "rpcNode.status": "RPC 稼働中",
+  "trustBank.sign": "信託",
+  "paymentProvider.sign": "決済",
+  "paymentProvider.status": "処理中",
+  "brokerage.ticker": "▲日経 38,240 ▲東証 2,710",
+  "brokerage.sign": "¥ 証券",
+  "exchange.sign": "取引所",
+  "exchange.sub": "清算",
+  "atm.sign": "ATM コーナー",
+  "atm.screen": "金額を選択",
+  "atm.ok": "確定",
+  "atm.cardSlot": "カード挿入口",
+  "storefront.sign": "商店",
+  "storefront.open": "営業",
+  "warehouse.sign": "倉庫",
+  "apiGateway.sign": "API 入口",
+  "apiGateway.delete": "DELETE",
+  "apiGateway.users": "/利用者",
+  "apiGateway.orders": "/注文",
+  "apiGateway.session": "/接続",
+
+  "readout.empty": "なし",
+  "readout.sparkline.waiting": "待機中",
+  "input.timeline.speed": "{speed}倍",
+  "input.timeline.time": "{t}秒 / {d}秒",
+  "readout.sequenceTimeline.title": "{name}: 時刻 {t}",
+  "readout.bubbleChart.title": "({x}, {y}) 半径 {r}",
+  "readout.calendarHeatmap.title": "{i} 日目: {v}",
+  "readout.candlestick.title": "始 {o} 高 {h} 安 {l} 終 {c}",
+  "readout.slope.before": "前",
+  "readout.slope.after": "後",
+  "readout.bulletChart.actual": "実績: {v}",
+  "readout.bulletChart.target": "目標: {v}",
+  "readout.rating.full": "満",
+  "readout.rating.half": "半分",
+  "readout.rating.empty": "空",
+  "readout.priceTag.save": "{amount} お得",
+  "readout.confidence.low": "低",
+  "readout.confidence.mid": "中",
+  "readout.confidence.high": "高",
+  "readout.more": "ほか {n}",
+  "readout.videoCard.views": "{v} 回視聴",
+  "readout.attendance.corner": "日",
+  "readout.weekday.0": "日",
+  "readout.weekday.1": "月",
+  "readout.weekday.2": "火",
+  "readout.weekday.3": "水",
+  "readout.weekday.4": "木",
+  "readout.weekday.5": "金",
+  "readout.weekday.6": "土",
+  "readout.ratingThumb.summary": "賛成 {pct}% · {total} 票",
+  "readout.kpiTrend.prev": "前回 {v}",
+  "readout.poll.total": "合計 {n}",
+  "readout.thread.participants": "{n} 人",
+  "readout.thread.last": "最後: {name}",
+  "readout.readReceipt.sent": "送信済み",
+  "readout.readReceipt.delivered": "配信済み",
+  "readout.readReceipt.read": "既読",
+  "readout.password.0": "弱すぎる",
+  "readout.password.1": "弱い",
+  "readout.password.2": "普通",
+  "readout.password.3": "良い",
+  "readout.password.4": "強い",
+  "readout.dropzone.uploaded": "取り込み済み",
+  "readout.dropzone.drop": "⬆ ここにファイルを置く",
+  "readout.dropzone.browse": "または押して選ぶ",
+  "readout.log.0": "詳細",
+  "readout.log.1": "情報",
+  "readout.log.2": "警告",
+  "readout.log.3": "異常",
+  "readout.cart.items": "点数",
+  "readout.cart.subtotal": "小計",
+  "readout.cart.shipping": "送料",
+  "readout.cart.total": "合計",
+  "readout.pricing.plan": "プラン",
+  "readout.pricing.perMonth": "月額",
+  "readout.pricing.get": "{name}を選ぶ",
+  "readout.coupon.placeholder": "コードを入力",
+  "readout.coupon.off": "-{pct}% 引き",
+  "readout.coupon.apply": "適用",
+  "readout.article.by": "文: {author}",
+  "readout.priority.high": "高",
+  "readout.priority.med": "中",
+  "readout.priority.low": "低",
+  "readout.kanban.todo": "未着手",
+  "readout.kanban.inprogress": "進行中",
+  "readout.kanban.done": "完了",
+  "readout.trafficLight.red": "赤",
+  "readout.trafficLight.yellow": "黄",
+  "readout.trafficLight.green": "緑",
+};
+
+/** 言語ごとの辞書。 検査が鍵の一致を実行時にも確かめるため公開する */
+export const CDL_TEXT: Readonly<Record<CdlLang, Readonly<Record<CdlTextKey, string>>>> = { en, ja };
+
+/** 言語と鍵から描く字を引く */
+export function cdlText(lang: CdlLang, key: CdlTextKey): string {
+  return CDL_TEXT[lang][key];
+}
+
+/**
+ * 部品が受け取った言語で辞書を引く関数を返す。 言語を渡さない呼び方は英語で引く。
+ *
+ * **部品へは引数で渡す** (React の文脈で届けない)。 形の部品は検査から関数として直接呼ばれており
+ * (`描く({ node, active })`)、文脈を読む hook はその呼び方で使えない。
+ */
+export function 字引きを作る(lang: CdlLang | undefined): (key: CdlTextKey) => string {
+  const 言語 = lang ?? "en";
+  return (key) => CDL_TEXT[言語][key];
+}
+
+/**
+ * 辞書の字の `{名前}` に値を差し込む (#849)。
+ *
+ * **差し込む位置を辞書に持たせる**。 `+3 more` と `ほか 3` のように、値の前後に来る語が言語で
+ * 変わるため、字を前後に分けて持つと語順を表せない。
+ *
+ * 渡されなかった名前は `{名前}` のまま残す (黙って空にすると、差し込み忘れが画面で見えなくなる)。
+ */
+export function 字を差し込む(template: string, values: Readonly<Record<string, string | number>>): string {
+  return template.replace(/\{(\w+)\}/g, (whole, name: string) => (name in values ? String(values[name]) : whole));
+}

package/src/layout.ts

@@ -1,4 +1,5 @@
 import type { CdlDiagram, LaidDiagram } from "./types";
+import { resolveLang } from "./lang";
 import {
   CLEARANCE_LABEL_LABEL,
   CLEARANCE_NODE_LABEL,
@@ -422,6 +423,9 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...(diag.palette ? { palette: diag.palette } : {}),
+    // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
+    // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
+    ...(resolveLang(diag.lang) === "ja" ? { lang: "ja" as const } : {}),
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...(diag.type ? { type: diag.type } : {}),
     bboxes,