@cardenelabs/cdl 0.58.0 → 0.59.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.58.0",
+  "version": "0.59.1",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/kinds/row-align.ts

@@ -133,6 +133,36 @@ export function displayWidth(text: string): number {
   return w;
 }
 
+/**
+ * 字を先頭から半角の桁数 (`displayWidth`) で `桁` に収まるだけ取り、取った字と残りに割る (#851)。
+ *
+ * 2 桁の字が境目をまたぐ時は、その字を残りの側に回す (取った側が `桁` を越えない)。
+ */
+export function 桁で割る(text: string, 桁: number): [string, string] {
+  let w = 0;
+  let 取った = "";
+  for (const ch of text) {
+    const code = ch.codePointAt(0) ?? 0;
+    const 字の桁 = code >= 0x20 && code <= 0x7e ? 1 : 2;
+    if (w + 字の桁 > 桁) break;
+    w += 字の桁;
+    取った += ch;
+  }
+  return [取った, text.slice(取った.length)];
+}
+
+/**
+ * 字が半角の桁数で `上限` を越える時、「上限 - 1」 桁に収まるだけの字に `…` を付けて返す (#851)。
+ *
+ * 読み出しは字数で省いていた。 上限の字数は英字の幅で決めてあり、和文は 1 字が英字のおよそ 2 倍の幅なので
+ * 上限の字数に届く前に枠からはみ出していた。 上限を半角の桁数と読み替えれば、ASCII だけの字は変更前の
+ * `length > 上限 ? slice(0, 上限 - 1) + "…"` と同じ所で省き、和文は半分の字数で省く。
+ */
+export function 桁で省く(text: string, 上限: number): string {
+  if (displayWidth(text) <= 上限) return text;
+  return `${桁で割る(text, 上限 - 1)[0]}…`;
+}
+
 /**
  * rows[] から最低限必要な node width を算出。
  * 左 padding + 左列 max 幅 + col gap + 右列 max 幅 + 右 padding。

package/src/lang.ts

@@ -100,6 +100,148 @@ const en = {
   "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;
 
 /** 辞書の鍵 */
@@ -146,6 +288,76 @@ const ja: Record<CdlTextKey, string> = {
   "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": "緑",
 };
 
 /** 言語ごとの辞書。 検査が鍵の一致を実行時にも確かめるため公開する */
@@ -166,3 +378,15 @@ export function 字引きを作る(lang: CdlLang | undefined): (key: CdlTextKey)
   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));
+}