@cardenelabs/cdl 0.61.0 → 0.62.0

package/package.json

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

package/src/lang.ts

@@ -236,6 +236,18 @@ const en = {
   "readout.kanban.inprogress": "In Progress",
   /** `kanban-board` の列の見出し (値は `done` で読む) */
   "readout.kanban.done": "Done",
+  /** `status-timeline` の区間の字 (値は `active` で読む) */
+  "readout.statusTimeline.active": "ACTIVE",
+  /** `status-timeline` の区間の字 (値は `idle` で読む) */
+  "readout.statusTimeline.idle": "IDLE",
+  /** `status-timeline` の区間の字 (値は `error` で読む) */
+  "readout.statusTimeline.error": "ERROR",
+  /** `user-presence` の状態の字 (値は `online` で読む) */
+  "readout.presence.online": "online",
+  /** `user-presence` の状態の字 (値は `away` で読む) */
+  "readout.presence.away": "away",
+  /** `user-presence` の状態の字 (値は `offline` で読む) */
+  "readout.presence.offline": "offline",
   /** `traffic-light` の赤の灯の見出し (値は `red` で読む) */
   "readout.trafficLight.red": "red",
   /** `traffic-light` の黄の灯の見出し (値は `yellow` / `amber` で読む) */
@@ -355,6 +367,12 @@ const ja: Record<CdlTextKey, string> = {
   "readout.kanban.todo": "未着手",
   "readout.kanban.inprogress": "進行中",
   "readout.kanban.done": "完了",
+  "readout.statusTimeline.active": "稼働",
+  "readout.statusTimeline.idle": "待機",
+  "readout.statusTimeline.error": "異常",
+  "readout.presence.online": "オンライン",
+  "readout.presence.away": "離席",
+  "readout.presence.offline": "オフライン",
   "readout.trafficLight.red": "赤",
   "readout.trafficLight.yellow": "黄",
   "readout.trafficLight.green": "緑",

package/src/render/interactive-panel.tsx

@@ -19,6 +19,7 @@ import type { Signal, Computed } from "../reactive";
 import { effect } from "../reactive";
 import { textWidth } from "../kinds/text-width";
 import { 桁で割る, 桁で省く } from "../kinds/row-align";
+import { 幅で切る } from "../kinds/box-lines";
 
 /**
  * interactive primitive (input widget / formula / scroll trigger / event handler) を SVG diagram に
@@ -7734,12 +7735,24 @@ function StatusTimelineReadout({
       // silent skip
     }
   }
+  const 引く = use字引();
   const colorLookup = new Map(colorMap.map((c) => [c.status.toLowerCase(), c.color]));
   const shown = events.slice(0, max);
   const stripHeight = 28;
   const width = 320;
   const cellW = shown.length > 0 ? (width - 20) / shown.length : 0;
   const height = stripHeight + 40;
+  /*
+   * 区間の字 (#857)。 既定の対応に並ぶ 3 つの値は辞書で引き、それ以外は値を大文字にする。
+   * 色は値の綴りで選ぶので、辞書の字では引かない。
+   *
+   * 字は区間の幅に収まるだけ描く。 4 字で切っていた形は字数で幅を見積もっており、収まる幅があっても
+   * `active` を `ACTI` と描き、和文の字には切る根拠が無かった (#851 と同じ理由)。
+   */
+  const 区間の字 = (status: string): string =>
+    status === "active" || status === "idle" || status === "error"
+      ? 引く(`readout.statusTimeline.${status}`)
+      : status.toUpperCase();
   return (
     <div className="cdl-ip-item cdl-ip-readout-status-timeline" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
@@ -7752,8 +7765,11 @@ function StatusTimelineReadout({
         {shown.map((ev, i) => {
           const x = 10 + i * cellW;
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
+          const 字 = 区間の字(ev.status);
+          // 左右に 3px ずつ余白を取る (区間の枠は幅 - 2 で描く)
+          const 描く字 = 幅で切る(字, 10, cellW - 8);
           return (
-            <g key={i} data-cdl-status-event={i}>
+            <g key={i} data-cdl-status-event={i} data-cdl-status={ev.status}>
               <rect x={x} y={10} width={cellW - 2} height={stripHeight} fill={c} rx={2} />
               <text
                 x={x + cellW / 2}
@@ -7764,7 +7780,8 @@ function StatusTimelineReadout({
                 fontWeight={600}
                 style={{ userSelect: "none" }}
               >
-                {ev.status.length > 5 ? ev.status.slice(0, 4).toUpperCase() : ev.status.toUpperCase()}
+                {描く字 !== 字 ? <title>{字}</title> : null}
+                {描く字}
               </text>
               <text
                 x={x + cellW / 2}
@@ -8096,6 +8113,10 @@ function UserPresenceReadout({
   const width = 260;
   const height = shown.length * rowH + (overflow > 0 ? 20 : 0) + 8;
   const statusColor = (s: string) => (s === "online" ? "#22c55e" : s === "away" ? "#eab308" : "#94a3b8");
+  const 引く = use字引();
+  // 色を選ぶ 3 つの値は辞書で引き、それ以外は値のまま描く (#857)。 色は値の綴りで選ぶ
+  const 状態の字 = (s: string): string =>
+    s === "online" || s === "away" || s === "offline" ? 引く(`readout.presence.${s}`) : s;
   return (
     <div className="cdl-ip-item cdl-ip-readout-user-presence" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
@@ -8108,7 +8129,7 @@ function UserPresenceReadout({
         {shown.map((u, i) => {
           const y = 4 + i * rowH;
           return (
-            <g key={i} data-cdl-presence-user={i}>
+            <g key={i} data-cdl-presence-user={i} data-cdl-presence-status={u.status}>
               <circle cx={12} cy={y + rowH / 2} r={6} fill={statusColor(u.status)} />
               <text
                 x={26}
@@ -8128,7 +8149,7 @@ function UserPresenceReadout({
                 fill="#64748b"
                 style={{ userSelect: "none" }}
               >
-                {u.status}
+                {状態の字(u.status)}
               </text>
             </g>
           );