@cardenelabs/cdl 0.58.0 → 0.59.1

package/src/render/interactive-panel.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useLayoutEffect, useMemo, useState, useSyncExternalStore, useRef } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState, useSyncExternalStore, useRef } from "react";
 import type { JSX } from "react";
+import { CDL_TEXT, resolveLang, 字を差し込む, type CdlLang, type CdlTextKey } from "../lang";
 import { assertNever } from "../assert-never";
 import type { CdlDiagram, CdlInput, CdlReadout } from "../types";
 import { createInputSignals, inputDefaultValue } from "../input-signals";
@@ -15,6 +16,7 @@ import {
 import type { Signal, Computed } from "../reactive";
 import { effect } from "../reactive";
 import { textWidth } from "../kinds/text-width";
+import { 桁で割る, 桁で省く } from "../kinds/row-align";
 
 /**
  * interactive primitive (input widget / formula / scroll trigger / event handler) を SVG diagram に
@@ -92,6 +94,55 @@ export type InteractiveSignalsAccessor = {
   getBool?: (id: string) => boolean | undefined;
 };
 
+/**
+ * 操作部の言語 (#849)。 読み出しと入力欄が書く固定の字 (`empty` / `+3 more` / `Todo` など) を引き替える。
+ *
+ * **React の文脈で届ける**。 読み出しの部品は 100 を超え、すべて `ReadoutWidget` を通して React の木の中で
+ * 描かれる。 引数で渡すと全部品の型と呼び出しを書き換えることになり、渡し忘れた部品が英語のまま残る。
+ * 形の部品 (#847) が引数で渡すのは、検査が形を関数として直接呼ぶためで、読み出しにはその呼び方が無い。
+ *
+ * 既定は英語。 文脈の外で描いた部品は変更前と同じ字になる。
+ */
+const 操作部の言語 = createContext<CdlLang>("en");
+
+/** 操作部の言語で辞書を引き、`{名前}` に値を差し込む */
+function use字引(): (key: CdlTextKey, values?: Readonly<Record<string, string | number>>) => string {
+  const lang = useContext(操作部の言語);
+  return (key, values) => (values ? 字を差し込む(CDL_TEXT[lang][key], values) : CDL_TEXT[lang][key]);
+}
+
+/**
+ * 辞書の字を 1 つ描く。 本文や `<title>` の中に字だけを置く所で使う。
+ *
+ * 部品ごとに hook を呼ぶ行を足さずに済む (`empty` だけで 44 の部品にある)。 描く markup は字をそのまま
+ * 置いた時と同じ。 属性に渡す字と、字を判定に使う所は `use字引` で引く。
+ */
+function 字({ k, v }: { k: CdlTextKey; v?: Readonly<Record<string, string | number>> }): JSX.Element {
+  const 引く = use字引();
+  return <>{引く(k, v)}</>;
+}
+
+/**
+ * 辞書の字を SVG の見出し (`<title>`) として描く。
+ *
+ * **`<title>` の中に `<字>` を置かない**。 React は `<title>` の子を 1 つの文字列として扱い、部品を置くと
+ * `[object Object]` と書く (英語の描画の控えとの突き合わせで実測)。 見出しごとこの部品で描き、字は文字列で渡す。
+ *
+ * `前` は字の前に付ける値 (星の番号 `1: ` など)。 `k` を渡さない時は空の見出しを描く (点いていない灯)。
+ */
+function 字の見出し({
+  k,
+  v,
+  前 = "",
+}: {
+  k?: CdlTextKey;
+  v?: Readonly<Record<string, string | number>>;
+  前?: string;
+}): JSX.Element {
+  const 引く = use字引();
+  return <title>{k === undefined ? "" : `${前}${引く(k, v)}`}</title>;
+}
+
 /**
  * accessor を diagram + signals から構築する SSOT (CAR #255)。
  *
@@ -593,6 +644,8 @@ export function useInteractiveIntegration(
     )
       return null;
     return (
+      // 操作部の中の読み出しと入力欄へ、図の言語を届ける (#849)。 型の外の値は英語に落ちる
+      <操作部の言語.Provider value={resolveLang(diagram.lang)}>
       <div className="cdl-ip-root" data-cdl-interactive-panel="true">
         {inputs.length > 0 && (
           <div className="cdl-ip-group">
@@ -628,6 +681,7 @@ export function useInteractiveIntegration(
           </div>
         )}
       </div>
+      </操作部の言語.Provider>
     );
   }, [diagram, signals, stateOverrides, mergedStateValues]);
 
@@ -2493,7 +2547,7 @@ function SparklineReadout({
       <div className="cdl-ip-item cdl-ip-readout-sparkline" data-cdl-readout={id}>
         <span className="cdl-ip-label">{label}</span>
         <div className="cdl-ip-readout-sparkline-empty" style={{ width: w, height: h }}>
-          {points.length === 0 ? "waiting" : "—"}
+          {points.length === 0 ? <字 k="readout.sparkline.waiting" /> : "—"}
         </div>
         <span className="cdl-ip-readout-sparkline-value">
           {Number.isFinite(value) ? value : "—"}
@@ -2822,12 +2876,14 @@ function TimelineWidget({
           onClick={cycleSpeed}
           aria-label="speed"
         >
-          {speed}x
+          <字 k="input.timeline.speed" v={{ speed }} />
         </button>
       </div>
       <span className="cdl-ip-timeline-time">
-        {(progress * (input.duration / 1000)).toFixed(1)}s /{" "}
-        {(input.duration / 1000).toFixed(1)}s
+        <字
+          k="input.timeline.time"
+          v={{ t: (progress * (input.duration / 1000)).toFixed(1), d: (input.duration / 1000).toFixed(1) }}
+        />
       </span>
     </div>
   );
@@ -3129,7 +3185,7 @@ function ArrayBarReadout({
       <span className="cdl-ip-label">{label}</span>
       <div className="cdl-ip-readout-array-bar-row">
         {arr.length === 0 ? (
-          <span className="cdl-ip-readout-array-bar-empty">empty</span>
+          <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
         ) : (
           arr.map((v, i) => {
             const h = Math.max(0, Math.min(1, (v - min) / range));
@@ -3242,7 +3298,7 @@ function StackedBarReadout({
       <span className="cdl-ip-label">{label}</span>
       <div className="cdl-ip-readout-stacked-bar-row">
         {n === 0 ? (
-          <span className="cdl-ip-readout-array-bar-empty">empty</span>
+          <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
         ) : (
           Array.from({ length: n }).map((_, i) => {
             const va = arrA[i] ?? 0;
@@ -3378,7 +3434,7 @@ function MatrixReadout({
     <div className="cdl-ip-item cdl-ip-readout-matrix" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {rows === 0 || cols === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg
           className="cdl-ip-readout-matrix-svg"
@@ -3449,7 +3505,7 @@ function ProgressGroupReadout({
     <div className="cdl-ip-item cdl-ip-readout-progress-group" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {arr.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-progress-group-list">
           {arr.map((v, i) => {
@@ -3539,7 +3595,7 @@ function SequenceTimelineReadout({
     <div className="cdl-ip-item cdl-ip-readout-sequence-timeline" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {events.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg
           className="cdl-ip-readout-sequence-timeline-svg"
@@ -3558,7 +3614,7 @@ function SequenceTimelineReadout({
             return (
               <g key={i} data-cdl-event-marker={e.name}>
                 <circle cx={x} cy={trackY} r={5} fill={color} stroke="#fff" strokeWidth={1.5}>
-                  <title>{`${e.name}: t=${e.t}`}</title>
+                  <字の見出し k="readout.sequenceTimeline.title" v={{ name: e.name, t: e.t }} />
                 </circle>
                 <text x={x} y={trackY - 12} textAnchor={sequenceLabelAnchor(x, e.name, 10, viewW)} fontSize={10} fill="var(--v4-ink, #1a1f2a)">
                   {e.name}
@@ -3624,7 +3680,7 @@ function RadarReadout({
     <div className="cdl-ip-item cdl-ip-readout-radar" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {n === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-radar-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {[0.33, 0.66, 1].map((t) => (
@@ -3716,7 +3772,7 @@ function BubbleChartReadout({
     <div className="cdl-ip-item cdl-ip-readout-bubble-chart" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {bubbles.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-bubble-chart-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           <line x1={pad} x2={viewW - pad} y1={viewH - pad} y2={viewH - pad} stroke="rgba(148,163,184,0.4)" />
@@ -3727,7 +3783,7 @@ function BubbleChartReadout({
             const r = 4 + ((Math.max(rMin, Math.min(rMax, b.r)) - rMin) / rRange) * (maxCircleR - 4);
             return (
               <circle key={i} cx={cx} cy={cy} r={r} fill={color} fillOpacity={0.35} stroke={color} strokeWidth={1.5}>
-                <title>{`(${b.x}, ${b.y}) r=${b.r}`}</title>
+                <字の見出し k="readout.bubbleChart.title" v={{ x: b.x, y: b.y, r: b.r }} />
               </circle>
             );
           })}
@@ -3765,7 +3821,7 @@ function DonutReadout({
     <div className="cdl-ip-item cdl-ip-readout-donut" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {arr.length === 0 || total === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-donut-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {arr.map((v, i) => {
@@ -3849,7 +3905,7 @@ function CalendarHeatmapReadout({
               rx={2}
               fill={fill}
             >
-              <title>{`day ${i}: ${v}`}</title>
+              <字の見出し k="readout.calendarHeatmap.title" v={{ i, v }} />
             </rect>
           );
         })}
@@ -4013,7 +4069,7 @@ function CandlestickReadout({
     <div className="cdl-ip-item cdl-ip-readout-candlestick" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {candles.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-candlestick-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {candles.map((cd, i) => {
@@ -4037,7 +4093,7 @@ function CandlestickReadout({
                   fill={isUp ? color : color}
                   fillOpacity={isUp ? 1 : 0.85}
                 >
-                  <title>{`O:${cd.o} H:${cd.h} L:${cd.l} C:${cd.c}`}</title>
+                  <字の見出し k="readout.candlestick.title" v={{ o: cd.o, h: cd.h, l: cd.l, c: cd.c }} />
                 </rect>
               </g>
             );
@@ -4089,7 +4145,7 @@ function VennReadout({
     <div className="cdl-ip-item cdl-ip-readout-venn" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {sizeA === 0 && sizeB === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-venn-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           <circle cx={cxA} cy={cy} r={rA} fill={colorA} fillOpacity={0.4} stroke={colorA} strokeWidth={1.5} />
@@ -4158,13 +4214,13 @@ function SlopeReadout({
     <div className="cdl-ip-item cdl-ip-readout-slope" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {slopes.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-slope-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           <line x1={xL} x2={xL} y1={pad - 4} y2={viewH - pad + 4} stroke="rgba(148,163,184,0.4)" />
           <line x1={xR} x2={xR} y1={pad - 4} y2={viewH - pad + 4} stroke="rgba(148,163,184,0.4)" />
-          <text x={xL} y={viewH - 4} fontSize={9} textAnchor="middle" fill="var(--v4-mute, #64748b)">before</text>
-          <text x={xR} y={viewH - 4} fontSize={9} textAnchor="middle" fill="var(--v4-mute, #64748b)">after</text>
+          <text x={xL} y={viewH - 4} fontSize={9} textAnchor="middle" fill="var(--v4-mute, #64748b)"><字 k="readout.slope.before" /></text>
+          <text x={xR} y={viewH - 4} fontSize={9} textAnchor="middle" fill="var(--v4-mute, #64748b)"><字 k="readout.slope.after" /></text>
           {slopes.map((s, i) => {
             const yB = yFor(s.before);
             const yA = yFor(s.after);
@@ -4229,7 +4285,7 @@ function FunnelReadout({
     <div className="cdl-ip-item cdl-ip-readout-funnel" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {stages.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-funnel-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {stages.map((s, i) => {
@@ -4312,7 +4368,7 @@ function GanttReadout({
     <div className="cdl-ip-item cdl-ip-readout-gantt" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {tasks.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-gantt-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {tasks.map((t, i) => {
@@ -4422,7 +4478,7 @@ function TreemapReadout({
     <div className="cdl-ip-item cdl-ip-readout-treemap" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {rects.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-treemap-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {rects.map((r, i) => (
@@ -4516,7 +4572,7 @@ function SankeyReadout({
     <div className="cdl-ip-item cdl-ip-readout-sankey" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {flows.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-sankey-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {/* left bars */}
@@ -4609,7 +4665,7 @@ function PolarAreaReadout({
     <div className="cdl-ip-item cdl-ip-readout-polar-area" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {n === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-polar-area-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {[0.33, 0.66, 1].map((t) => (
@@ -4679,7 +4735,7 @@ function StepIndicatorReadout({
     <div className="cdl-ip-item cdl-ip-readout-step-indicator" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {n === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-step-indicator-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {n > 1
@@ -4783,10 +4839,10 @@ function BulletChartReadout({
         <rect x={badX} y={pad} width={avgX - badX} height={trackH} fill="rgba(234,179,8,0.25)" />
         <rect x={avgX} y={pad} width={pad + w - avgX} height={trackH} fill="rgba(34,197,94,0.25)" />
         <rect x={pad} y={pad + trackH * 0.3} width={actualX - pad} height={trackH * 0.4} fill={colorActual} rx={2}>
-          <title>{`actual: ${safeActual}`}</title>
+          <字の見出し k="readout.bulletChart.actual" v={{ v: safeActual }} />
         </rect>
         <line x1={targetX} x2={targetX} y1={pad - 2} y2={pad + trackH + 2} stroke="#0f172a" strokeWidth={2}>
-          <title>{`target: ${safeTarget}`}</title>
+          <字の見出し k="readout.bulletChart.target" v={{ v: safeTarget }} />
         </line>
       </svg>
     </div>
@@ -4865,7 +4921,7 @@ function LeaderboardReadout({
     <div className="cdl-ip-item cdl-ip-readout-leaderboard" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {sorted.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ol className="cdl-ip-readout-leaderboard-list">
           {sorted.map((it, i) => {
@@ -4938,7 +4994,8 @@ function TrafficLightReadout({
                 filter: isActive ? `drop-shadow(0 0 6px ${colors[i]})` : undefined,
               }}
             >
-              <title>{isActive ? ["red", "yellow", "green"][i] : ""}</title>
+              {/* 灯の見出しだけを辞書で引く。 値は `red` / `yellow` / `amber` / `green` の綴りで読む */}
+              <字の見出し k={isActive ? (["readout.trafficLight.red", "readout.trafficLight.yellow", "readout.trafficLight.green"] as const)[i] : undefined} />
             </circle>
           );
         })}
@@ -4989,7 +5046,7 @@ function TagCloudReadout({
     <div className="cdl-ip-item cdl-ip-readout-tag-cloud" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {tags.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-tag-cloud-list">
           {tags.map((t, i) => (
@@ -5043,7 +5100,7 @@ function ActivityFeedReadout({
     <div className="cdl-ip-item cdl-ip-readout-activity-feed" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-activity-feed-list">
           {shown.map((e, i) => (
@@ -5110,9 +5167,9 @@ function RatingReadout({
                 strokeWidth={1}
               />
               {isEmpty ? (
-                <title>{`${i + 1}: empty`}</title>
+                <字の見出し 前={`${i + 1}: `} k="readout.rating.empty" />
               ) : (
-                <title>{`${i + 1}: ${isFull ? "full" : "half"}`}</title>
+                <字の見出し 前={`${i + 1}: `} k={isFull ? "readout.rating.full" : "readout.rating.half"} />
               )}
             </svg>
           );
@@ -5239,7 +5296,7 @@ function ChatBubbleReadout({
     <div className="cdl-ip-item cdl-ip-readout-chat-bubble" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-chat-bubble-list">
           {shown.map((m, i) => (
@@ -5357,7 +5414,7 @@ function ChecklistReadout({
     <div className="cdl-ip-item cdl-ip-readout-checklist" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {items.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <>
           <div className="cdl-ip-readout-checklist-progress">
@@ -5494,7 +5551,7 @@ function PriceTagReadout({
         ) : null}
       </div>
       {savings > 0 ? (
-        <span className="cdl-ip-readout-price-tag-savings">You save {currency}{savings}</span>
+        <span className="cdl-ip-readout-price-tag-savings"><字 k="readout.priceTag.save" v={{ amount: `${currency}${savings}` }} /></span>
       ) : null}
     </div>
   );
@@ -5646,6 +5703,13 @@ function StopwatchReadout({
   );
 }
 
+/** `confidence-meter` の帯の綴り (`data-cdl-band` の値) から、表示の字の鍵を引く */
+const 確信度の帯の字 = {
+  low: "readout.confidence.low",
+  mid: "readout.confidence.mid",
+  high: "readout.confidence.high",
+} as const satisfies Record<string, CdlTextKey>;
+
 function ConfidenceMeterReadout({
   id,
   label,
@@ -5687,7 +5751,8 @@ function ConfidenceMeterReadout({
           {Math.round(safeValue)}%
         </span>
         <span className="cdl-ip-readout-confidence-meter-band" style={{ color: bandColor }}>
-          {bandLabel}
+          {/* 表示の字だけを引く。 `data-cdl-band` は英語の綴りのまま */}
+          <字 k={確信度の帯の字[bandLabel as keyof typeof 確信度の帯の字]} />
         </span>
       </div>
       <svg className="cdl-ip-readout-confidence-meter-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
@@ -5735,7 +5800,7 @@ function ReactionBarReadout({
     <div className="cdl-ip-item cdl-ip-readout-reaction-bar" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {reactions.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-reaction-bar-row">
           {reactions.map((r, i) => (
@@ -5788,7 +5853,7 @@ function PillGroupReadout({
     <div className="cdl-ip-item cdl-ip-readout-pill-group" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {pills.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-pill-group-row">
           {pills.map((p, i) => (
@@ -5902,7 +5967,7 @@ function MetricsGridReadout({
     <div className="cdl-ip-item cdl-ip-readout-metrics-grid" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {items.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-metrics-grid-grid">
           {items.map((m, i) => (
@@ -6014,7 +6079,7 @@ function IconTileReadout({
     <div className="cdl-ip-item cdl-ip-readout-icon-tile" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {tiles.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-icon-tile-row">
           {tiles.map((t, i) => (
@@ -6075,7 +6140,7 @@ function TokenListReadout({
     <div className="cdl-ip-item cdl-ip-readout-token-list" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {tokens.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-token-list-items">
           {tokens.map((t, i) => {
@@ -6149,7 +6214,7 @@ function MapPinReadout({
     <div className="cdl-ip-item cdl-ip-readout-map-pin" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {pins.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-map-pin-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           <rect x={0} y={0} width={viewW} height={viewH} fill="rgba(148,163,184,0.08)" stroke="rgba(148,163,184,0.3)" strokeWidth={1} rx={4} />
@@ -6194,10 +6259,11 @@ function PriorityBadgeReadout({
   let level = "med";
   if (p === "high" || p === "2") level = "high";
   else if (p === "low" || p === "0") level = "low";
-  const spec: Record<string, { icon: string; color: string; bg: string; text: string }> = {
-    high: { icon: "▲", color: "#ef4444", bg: "rgba(239,68,68,0.12)", text: "HIGH" },
-    med: { icon: "●", color: "#eab308", bg: "rgba(234,179,8,0.12)", text: "MED" },
-    low: { icon: "▼", color: "#64748b", bg: "rgba(100,116,139,0.12)", text: "LOW" },
+  // 値は綴り (`high` / `2` / `low` / `0`) で読み、表示の字だけを辞書で引く (#849)。 `data-cdl-priority` は綴りのまま
+  const spec: Record<string, { icon: string; color: string; bg: string; text: CdlTextKey }> = {
+    high: { icon: "▲", color: "#ef4444", bg: "rgba(239,68,68,0.12)", text: "readout.priority.high" },
+    med: { icon: "●", color: "#eab308", bg: "rgba(234,179,8,0.12)", text: "readout.priority.med" },
+    low: { icon: "▼", color: "#64748b", bg: "rgba(100,116,139,0.12)", text: "readout.priority.low" },
   };
   const cur = spec[level]!;
   return (
@@ -6209,7 +6275,7 @@ function PriorityBadgeReadout({
           style={{ background: cur.bg, borderColor: cur.color, color: cur.color }}
         >
           <span className="cdl-ip-readout-priority-badge-icon">{cur.icon}</span>
-          <span>{cur.text}</span>
+          <span><字 k={cur.text} /></span>
         </span>
         {text ? <span className="cdl-ip-readout-priority-badge-text">{text}</span> : null}
       </div>
@@ -6258,7 +6324,7 @@ function PodiumReadout({
     <div className="cdl-ip-item cdl-ip-readout-podium" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {podium.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <svg className="cdl-ip-readout-podium-svg" viewBox={`0 0 ${viewW} ${viewH}`} width={viewW} height={viewH}>
           {order.map((rankIdx, colIdx) => {
@@ -6328,7 +6394,7 @@ function PollBarReadout({
     <div className="cdl-ip-item cdl-ip-readout-poll-bar" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {options.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-poll-bar-list">
           {options.map((o, i) => {
@@ -6375,6 +6441,7 @@ function UserStackReadout({
   max: number;
   size: number;
 }): JSX.Element {
+  const 引く = use字引();
   const names = safeParseArray(value).map(String);
   const shown = names.slice(0, max);
   const overflow = names.length > max;
@@ -6391,7 +6458,7 @@ function UserStackReadout({
     <div className="cdl-ip-item cdl-ip-readout-user-stack" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-user-stack-row">
           {shown.map((name, i) => (
@@ -6420,7 +6487,7 @@ function UserStackReadout({
                 fontSize: `${Math.round(size * 0.35)}px`,
                 marginLeft: `-${size * 0.3}px`,
               }}
-              title={`+${overflowCount} more`}
+              title={引く("readout.more", { n: overflowCount })}
             >
               +{overflowCount}
             </span>
@@ -6466,7 +6533,7 @@ function CommitListReadout({
     <div className="cdl-ip-item cdl-ip-readout-commit-list" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-commit-list-items">
           {shown.map((c, i) => (
@@ -6571,7 +6638,7 @@ function EventLogReadout({
     <div className="cdl-ip-item cdl-ip-readout-event-log" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-event-log-items">
           {shown.map((e, i) => {
@@ -6631,7 +6698,7 @@ function SearchResultReadout({
     <div className="cdl-ip-item cdl-ip-readout-search-result" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-search-result-items">
           {shown.map((h, i) => (
@@ -6683,7 +6750,7 @@ function RoadmapReadout({
     <div className="cdl-ip-item cdl-ip-readout-roadmap" data-cdl-readout={id} style={{ minWidth: `${viewW}px` }}>
       <span className="cdl-ip-label">{label}</span>
       {quarters.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-roadmap-row" style={{ minHeight: `${viewH}px` }}>
           {quarters.map((q, i) => (
@@ -6740,7 +6807,7 @@ function WeatherForecastReadout({
     <div className="cdl-ip-item cdl-ip-readout-weather-forecast" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {days.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-weather-forecast-row">
           {days.map((d, i) => (
@@ -6796,7 +6863,7 @@ function VideoCardReadout({
     <div className="cdl-ip-item cdl-ip-readout-video-card" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-video-card-list">
           {shown.map((v, i) => (
@@ -6807,7 +6874,7 @@ function VideoCardReadout({
               </div>
               <div className="cdl-ip-readout-video-card-info">
                 <div className="cdl-ip-readout-video-card-title">{v.title}</div>
-                <div className="cdl-ip-readout-video-card-views">{v.views} views</div>
+                <div className="cdl-ip-readout-video-card-views"><字 k="readout.videoCard.views" v={{ v: v.views }} /></div>
               </div>
             </li>
           ))}
@@ -6837,7 +6904,7 @@ function OrderStatusReadout({
     <div className="cdl-ip-item cdl-ip-readout-order-status" data-cdl-readout={id} data-cdl-step={safeCurrent}>
       <span className="cdl-ip-label">{label}</span>
       {stepArr.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ul className="cdl-ip-readout-order-status-list">
           {stepArr.map((s, i) => {
@@ -6903,12 +6970,12 @@ function AttendanceGridReadout({
     <div className="cdl-ip-item cdl-ip-readout-attendance-grid" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {rows.length === 0 || memberArr.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <table className="cdl-ip-readout-attendance-grid-table">
           <thead>
             <tr>
-              <th className="cdl-ip-readout-attendance-grid-corner">day</th>
+              <th className="cdl-ip-readout-attendance-grid-corner"><字 k="readout.attendance.corner" /></th>
               {memberArr.map((m, i) => (
                 <th key={i} className="cdl-ip-readout-attendance-grid-member">{m}</th>
               ))}
@@ -6978,7 +7045,7 @@ function TimezoneClockReadout({
     <div className="cdl-ip-item cdl-ip-readout-timezone-clock" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {clocks.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-timezone-clock-row">
           {clocks.map((c, i) => (
@@ -7027,7 +7094,7 @@ function FormSummaryReadout({
     <div className="cdl-ip-item cdl-ip-readout-form-summary" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {fields.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <dl className="cdl-ip-readout-form-summary-list">
           {fields.map((f, i) => (
@@ -7079,7 +7146,7 @@ function SongQueueReadout({
     <div className="cdl-ip-item cdl-ip-readout-song-queue" data-cdl-readout={id} data-cdl-current={safeCurrent}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <ol className="cdl-ip-readout-song-queue-list">
           {shown.map((s, i) => {
@@ -7142,12 +7209,20 @@ function CalendarMonthReadout({
     }
   }
   // build 6 x 7 grid (day of month の初日 offset は infer せず、 単純に days[i].day を敷き詰め)
-  const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const weekDays = [
+    "readout.weekday.0",
+    "readout.weekday.1",
+    "readout.weekday.2",
+    "readout.weekday.3",
+    "readout.weekday.4",
+    "readout.weekday.5",
+    "readout.weekday.6",
+  ] as const;
   return (
     <div className="cdl-ip-item cdl-ip-readout-calendar-month" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {days.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-calendar-month-widget">
           {monthName ? (
@@ -7155,7 +7230,7 @@ function CalendarMonthReadout({
           ) : null}
           <div className="cdl-ip-readout-calendar-month-weekdays">
             {weekDays.map((w) => (
-              <span key={w} className="cdl-ip-readout-calendar-month-weekday">{w}</span>
+              <span key={w} className="cdl-ip-readout-calendar-month-weekday"><字 k={w} /></span>
             ))}
           </div>
           <div className="cdl-ip-readout-calendar-month-grid">
@@ -7213,7 +7288,7 @@ function TerminalReadout({
     <div className="cdl-ip-item cdl-ip-readout-terminal" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
       {shown.length === 0 ? (
-        <span className="cdl-ip-readout-array-bar-empty">empty</span>
+        <span className="cdl-ip-readout-array-bar-empty"><字 k="readout.empty" /></span>
       ) : (
         <div className="cdl-ip-readout-terminal-window">
           <div className="cdl-ip-readout-terminal-titlebar">
@@ -7333,15 +7408,12 @@ function KanbanBoardReadout({
   max: number;
 }): JSX.Element {
   type Task = { title: string; priority?: string };
-  const columns: { key: string; label: string; color: string; tasks: Task[] } = {
-    todo: { key: "todo", label: "Todo", color: "#94a3b8", tasks: [] },
-    inprogress: { key: "inprogress", label: "In Progress", color: "#2563eb", tasks: [] },
-    done: { key: "done", label: "Done", color: "#22c55e", tasks: [] },
-  } as unknown as { key: string; label: string; color: string; tasks: Task[] };
+  const 引く = use字引();
+  // 列は綴り (`todo` / `inprogress` / `done`) で振り分け、見出しの字だけを辞書で引く (#849)
   const buckets: Record<string, { key: string; label: string; color: string; tasks: Task[] }> = {
-    todo: { key: "todo", label: "Todo", color: "#94a3b8", tasks: [] },
-    inprogress: { key: "inprogress", label: "In Progress", color: "#2563eb", tasks: [] },
-    done: { key: "done", label: "Done", color: "#22c55e", tasks: [] },
+    todo: { key: "todo", label: 引く("readout.kanban.todo"), color: "#94a3b8", tasks: [] },
+    inprogress: { key: "inprogress", label: 引く("readout.kanban.inprogress"), color: "#2563eb", tasks: [] },
+    done: { key: "done", label: 引く("readout.kanban.done"), color: "#22c55e", tasks: [] },
   };
   const trimmed = value.trim();
   if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
@@ -7362,7 +7434,6 @@ function KanbanBoardReadout({
       // silent skip
     }
   }
-  void columns;
   const order = ["todo", "inprogress", "done"] as const;
   const rowH = 26;
   const headerH = 28;
@@ -7440,7 +7511,7 @@ function KanbanBoardReadout({
                       style={{ userSelect: "none" }}
                     >
                       <title>{task.title}</title>
-                      {task.title.length > 18 ? `${task.title.slice(0, 17)}…` : task.title}
+                      {桁で省く(task.title, 18)}
                     </text>
                   </g>
                 );
@@ -7454,7 +7525,7 @@ function KanbanBoardReadout({
                   fill="#64748b"
                   style={{ userSelect: "none" }}
                 >
-                  +{overflow} more
+                  <字 k="readout.more" v={{ n: overflow }} />
                 </text>
               ) : null}
             </g>
@@ -7597,7 +7668,7 @@ function TimelineVerticalReadout({
                 style={{ userSelect: "none" }}
               >
                 <title>{ev.title}</title>
-                {ev.title.length > 38 ? `${ev.title.slice(0, 37)}…` : ev.title}
+                {桁で省く(ev.title, 38)}
               </text>
               {ev.description ? (
                 <text
@@ -7608,7 +7679,7 @@ function TimelineVerticalReadout({
                   style={{ userSelect: "none" }}
                 >
                   <title>{ev.description}</title>
-                  {ev.description.length > 44 ? `${ev.description.slice(0, 43)}…` : ev.description}
+                  {桁で省く(ev.description, 44)}
                 </text>
               ) : null}
             </g>
@@ -7966,7 +8037,7 @@ function StepProgressReadout({
                 style={{ userSelect: "none" }}
               >
                 <title>{s}</title>
-                {s.length > 10 ? `${s.slice(0, 9)}…` : s}
+                {桁で省く(s, 10)}
               </text>
             </g>
           );
@@ -8032,7 +8103,7 @@ function UserPresenceReadout({
                 fill="#0f172a"
                 style={{ userSelect: "none" }}
               >
-                {u.name.length > 24 ? `${u.name.slice(0, 23)}…` : u.name}
+                {桁で省く(u.name, 24)}
               </text>
               <text
                 x={width - 4}
@@ -8056,7 +8127,7 @@ function UserPresenceReadout({
             fill="#64748b"
             style={{ userSelect: "none" }}
           >
-            +{overflow} more
+            <字 k="readout.more" v={{ n: overflow }} />
           </text>
         ) : null}
       </svg>
@@ -8113,7 +8184,7 @@ function RatingThumbReadout({
           ▲ {upCount}
         </text>
         <text x={width / 2} y={20} fontSize={11} textAnchor="middle" fill="#64748b" style={{ userSelect: "none" }}>
-          {upPct}% up · {total} votes
+          <字 k="readout.ratingThumb.summary" v={{ pct: upPct, total }} />
         </text>
         <text
           x={width - 8}
@@ -8202,7 +8273,7 @@ function OrgChartMiniReadout({
                       style={{ userSelect: "none" }}
                     >
                       <title>{n.name}</title>
-                      {n.name.length > 10 ? `${n.name.slice(0, 9)}…` : n.name}
+                      {桁で省く(n.name, 10)}
                     </text>
                     {lvl < 2 && byLevel[lvl + 1]!.length > 0 ? (
                       <line
@@ -8300,8 +8371,7 @@ function KpiTrendTileReadout({
           {unit} ({deltaPct.toFixed(1)}%)
         </text>
         <text x={12} y={78} fontSize={10} fill="#64748b" style={{ userSelect: "none" }}>
-          prev {prev}
-          {unit}
+          <字 k="readout.kpiTrend.prev" v={{ v: `${prev}${unit}` }} />
         </text>
         {history.length > 1 ? (
           <polyline points={points} fill="none" stroke={arrowColor} strokeWidth={2} />
@@ -8401,7 +8471,7 @@ function QuickPollEmojiReadout({
           fill="#64748b"
           style={{ userSelect: "none" }}
         >
-          total {total}
+          <字 k="readout.poll.total" v={{ n: total }} />
         </text>
       </svg>
     </div>
@@ -8544,10 +8614,10 @@ function ThreadSummaryReadout({
       >
         <rect x={0} y={0} width={width} height={height} fill="#f8fafc" rx={6} />
         <text x={12} y={22} fontSize={12} fontWeight={600} fill="#0f172a" style={{ userSelect: "none" }}>
-          {participants} participants
+          <字 k="readout.thread.participants" v={{ n: participants }} />
         </text>
         <text x={12} y={42} fontSize={11} fill="#334155" style={{ userSelect: "none" }}>
-          last: {lastAuthor}
+          <字 k="readout.thread.last" v={{ name: lastAuthor }} />
         </text>
         <text x={12} y={60} fontSize={10} fill="#64748b" style={{ userSelect: "none" }}>
           {timeAgo}
@@ -8587,7 +8657,7 @@ function ReadReceiptReadout({
   colorPending: string;
 }): JSX.Element {
   const status = Number.isFinite(value) ? Math.max(0, Math.min(2, Math.floor(value))) : 0;
-  const labelText = status === 0 ? "sent" : status === 1 ? "delivered" : "read";
+  const labelKey = status === 0 ? "readout.readReceipt.sent" : status === 1 ? "readout.readReceipt.delivered" : "readout.readReceipt.read";
   const iconColor = status === 2 ? colorRead : colorPending;
   const width = 180;
   const height = 32;
@@ -8618,7 +8688,7 @@ function ReadReceiptReadout({
           ) : null}
         </g>
         <text x={52} y={height / 2 + 4} fontSize={11} fontWeight={600} fill={iconColor} style={{ userSelect: "none" }}>
-          {labelText}
+          <字 k={labelKey} />
         </text>
       </svg>
     </div>
@@ -8639,7 +8709,7 @@ function PasswordStrengthReadout({
   colorWeak: string;
 }): JSX.Element {
   const level = Number.isFinite(value) ? Math.max(0, Math.min(4, Math.floor(value))) : 0;
-  const labels = ["too weak", "weak", "fair", "good", "strong"];
+  const labels = ["readout.password.0", "readout.password.1", "readout.password.2", "readout.password.3", "readout.password.4"] as const;
   const colors = [colorWeak, "#f97316", "#eab308", "#84cc16", colorStrong];
   const barW = 46;
   const gap = 6;
@@ -8680,7 +8750,7 @@ function PasswordStrengthReadout({
           fill={level > 0 ? colors[level] ?? colorStrong : "#94a3b8"}
           style={{ userSelect: "none" }}
         >
-          {labels[level]}
+          <字 k={labels[level]!} />
         </text>
       </svg>
     </div>
@@ -8818,10 +8888,10 @@ function FileDropzoneReadout({
             </text>
             <text x={54} y={34} fontSize={12} fontWeight={600} fill="#0f172a" style={{ userSelect: "none" }}>
               <title>{filename}</title>
-              {filename.length > 26 ? `${filename.slice(0, 25)}…` : filename}
+              {桁で省く(filename, 26)}
             </text>
             <text x={54} y={50} fontSize={10} fill="#64748b" style={{ userSelect: "none" }}>
-              uploaded
+              <字 k="readout.dropzone.uploaded" />
             </text>
           </g>
         ) : (
@@ -8835,7 +8905,7 @@ function FileDropzoneReadout({
               fill="#64748b"
               style={{ userSelect: "none" }}
             >
-              ⬆ Drop file here
+              <字 k="readout.dropzone.drop" />
             </text>
             <text
               x={width / 2}
@@ -8845,7 +8915,7 @@ function FileDropzoneReadout({
               fill="#94a3b8"
               style={{ userSelect: "none" }}
             >
-              or click to browse
+              <字 k="readout.dropzone.browse" />
             </text>
           </g>
         )}
@@ -8886,7 +8956,7 @@ function LogStreamReadout({
     }
   }
   const shown = rows.slice(-5);
-  const levelLabels = ["DBG", "INF", "WRN", "ERR"];
+  const levelLabels = ["readout.log.0", "readout.log.1", "readout.log.2", "readout.log.3"] as const;
   const levelColors = ["#94a3b8", "#2563eb", "#f97316", "#ef4444"];
   const width = 300;
   const rowH = 18;
@@ -8903,7 +8973,7 @@ function LogStreamReadout({
         <rect x={0} y={0} width={width} height={height} fill="#0f172a" rx={4} />
         {shown.map((r, i) => {
           const y = 4 + i * rowH;
-          const displayMsg = r.msg.length > 24 ? `${r.msg.slice(0, 23)}…` : r.msg;
+          const displayMsg = 桁で省く(r.msg, 24);
           return (
             <g key={i} data-cdl-log-row={i}>
               <text x={6} y={y + 12} fontSize={9} fill="#94a3b8" fontFamily="monospace" style={{ userSelect: "none" }}>
@@ -8920,7 +8990,7 @@ function LogStreamReadout({
                 fontFamily="monospace"
                 style={{ userSelect: "none" }}
               >
-                {levelLabels[r.level] ?? "INF"}
+                <字 k={levelLabels[r.level] ?? "readout.log.1"} />
               </text>
               <text x={94} y={y + 12} fontSize={10} fill="#e2e8f0" fontFamily="monospace" style={{ userSelect: "none" }}>
                 <title>{r.msg}</title>
@@ -9002,7 +9072,7 @@ function AlertBannerReadout({
           style={{ userSelect: "none" }}
         >
           <title>{message}</title>
-          {message.length > 32 ? `${message.slice(0, 31)}…` : message}
+          {桁で省く(message, 32)}
         </text>
       </svg>
     </div>
@@ -9075,7 +9145,7 @@ function ServiceHealthReadout({
                 style={{ userSelect: "none" }}
               >
                 <title>{s.name}</title>
-                {s.name.length > 10 ? `${s.name.slice(0, 9)}…` : s.name}
+                {桁で省く(s.name, 10)}
               </text>
             </g>
           );
@@ -9120,11 +9190,11 @@ function CartSummaryReadout({
   if (!Number.isFinite(subtotal)) subtotal = 0;
   if (!Number.isFinite(shipping)) shipping = 0;
   if (!Number.isFinite(total)) total = 0;
-  const rows = [
-    { l: "Items", v: `${items}`, bold: false },
-    { l: "Subtotal", v: `${currency}${subtotal.toFixed(2)}`, bold: false },
-    { l: "Shipping", v: `${currency}${shipping.toFixed(2)}`, bold: false },
-    { l: "Total", v: `${currency}${total.toFixed(2)}`, bold: true },
+  const rows: { l: CdlTextKey; v: string; bold: boolean }[] = [
+    { l: "readout.cart.items", v: `${items}`, bold: false },
+    { l: "readout.cart.subtotal", v: `${currency}${subtotal.toFixed(2)}`, bold: false },
+    { l: "readout.cart.shipping", v: `${currency}${shipping.toFixed(2)}`, bold: false },
+    { l: "readout.cart.total", v: `${currency}${total.toFixed(2)}`, bold: true },
   ];
   const width = 260;
   const rowH = 20;
@@ -9155,7 +9225,7 @@ function CartSummaryReadout({
                 fill={isTotal ? colorTotal : "#334155"}
                 style={{ userSelect: "none" }}
               >
-                {r.l}
+                <字 k={r.l} />
               </text>
               <text
                 x={width - 12}
@@ -9208,6 +9278,9 @@ function PricingTierReadout({
     }
   }
   if (!Number.isFinite(price)) price = 0;
+  const 引く = use字引();
+  // 名前が空の時の既定の名前。 見出しと押す札の 2 か所で使う
+  const 見せる名前 = planName || 引く("readout.pricing.plan");
   const width = 240;
   const height = 176;
   return (
@@ -9230,7 +9303,7 @@ function PricingTierReadout({
           fill="#ffffff"
           style={{ userSelect: "none" }}
         >
-          {planName || "Plan"}
+          {見せる名前}
         </text>
         <text
           x={width / 2}
@@ -9252,11 +9325,11 @@ function PricingTierReadout({
           fill="#64748b"
           style={{ userSelect: "none" }}
         >
-          per month
+          <字 k="readout.pricing.perMonth" />
         </text>
         {features.slice(0, 3).map((f, i) => {
           const y = 96 + i * 18;
-          const displayF = f.length > 24 ? `${f.slice(0, 23)}…` : f;
+          const displayF = 桁で省く(f, 24);
           return (
             <g key={i} data-cdl-tier-feature={i}>
               <text x={16} y={y} fontSize={11} fill={colorAccent} style={{ userSelect: "none" }}>
@@ -9279,7 +9352,7 @@ function PricingTierReadout({
           fill="#ffffff"
           style={{ userSelect: "none" }}
         >
-          Get {planName || "Plan"}
+          {引く("readout.pricing.get", { name: 見せる名前 })}
         </text>
       </svg>
     </div>
@@ -9345,7 +9418,7 @@ function CouponCodeReadout({
           fontFamily="monospace"
           style={{ userSelect: "none" }}
         >
-          {code || "ENTER CODE"}
+          {code || <字 k="readout.coupon.placeholder" />}
         </text>
         {applied ? (
           <g data-cdl-coupon-applied="1">
@@ -9359,7 +9432,7 @@ function CouponCodeReadout({
               fill="#ffffff"
               style={{ userSelect: "none" }}
             >
-              -{discountPct}% off
+              <字 k="readout.coupon.off" v={{ pct: discountPct }} />
             </text>
           </g>
         ) : (
@@ -9374,7 +9447,7 @@ function CouponCodeReadout({
               fill="#ffffff"
               style={{ userSelect: "none" }}
             >
-              Apply
+              <字 k="readout.coupon.apply" />
             </text>
           </g>
         )}
@@ -9415,6 +9488,9 @@ function ArticlePreviewReadout({
   const width = 300;
   const height = 116;
   const thumbW = 80;
+  // 抜粋は 1 行 28 桁で 2 行に割る (#851)。 1 行目は収まるだけ置いて `…` を付けず、残りを 2 行目に続ける。
+  // 以前は 1 行目を 27 字と `…` で切り、2 行目を 29 字目から描いていたので、28 字目がどちらの行にも出なかった
+  const [抜粋の一行目, 抜粋の残り] = 桁で割る(excerpt, 28);
   return (
     <div className="cdl-ip-item cdl-ip-readout-article-preview" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
@@ -9446,17 +9522,17 @@ function ArticlePreviewReadout({
           style={{ userSelect: "none" }}
         >
           <title>{title}</title>
-          {title.length > 26 ? `${title.slice(0, 25)}…` : title}
+          {桁で省く(title, 26)}
         </text>
         <text x={thumbW + 20} y={44} fontSize={10} fill="#334155" style={{ userSelect: "none" }}>
           <title>{excerpt}</title>
-          {excerpt.length > 28 ? `${excerpt.slice(0, 27)}…` : excerpt}
+          {抜粋の一行目}
         </text>
         <text x={thumbW + 20} y={60} fontSize={10} fill="#334155" style={{ userSelect: "none" }}>
-          {excerpt.length > 56 ? `${excerpt.slice(28, 55)}…` : excerpt.slice(28, 56)}
+          {桁で省く(抜粋の残り, 28)}
         </text>
         <text x={thumbW + 20} y={height - 14} fontSize={10} fontWeight={600} fill="#64748b" style={{ userSelect: "none" }}>
-          by {author}
+          <字 k="readout.article.by" v={{ author }} />
         </text>
         <text x={width - 8} y={height - 14} fontSize={10} textAnchor="end" fill="#94a3b8" style={{ userSelect: "none" }}>
           {timeAgo}
@@ -9516,7 +9592,7 @@ function TocNavReadout({
         {shown.map((it, i) => {
           const y = 4 + i * rowH;
           const indent = 12 + it.level * 16;
-          const displayT = it.title.length > 30 ? `${it.title.slice(0, 29)}…` : it.title;
+          const displayT = 桁で省く(it.title, 30);
           return (
             <g key={i} data-cdl-toc-item={i}>
               {it.active ? (