@cardenelabs/cdl 0.61.0 → 0.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.61.0",
+  "version": "0.63.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/presets.ts

@@ -1030,7 +1030,9 @@ export type StateMachineBuilder = {
 export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
+  // 図の型と最後の段の札は同じ綴り (#859)。 札を別の字にすると、消費側が型の一覧で引けない
+  const diagramType = "state";
+  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
 
   const phaseActivate: string[] = [];
   const stateOrder = new Map<string, number>();
@@ -1159,7 +1161,7 @@ export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
       b.phase(
         "fsm",
         { duration: 2400, title: preset.topic, body: "すべての状態と遷移を並べた姿。" },
-        (p) => p.activate(...phaseActivate).badge("fsm"),
+        (p) => p.activate(...phaseActivate).badge(diagramType),
       );
       return b.build();
     },
@@ -1810,7 +1812,10 @@ export type MindMapBuilder = {
 export function mindMap(preset: MindMapPreset): MindMapBuilder {
   const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "mindmap" });
+  // 型は他の組み立て関数と同じく短い名前 (`state` / `class` / `journey` と並ぶ `mind`)。
+  // 最後の段の札も同じ綴り (#859)
+  const diagramType = "mind";
+  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
   const branches: MindBranch[] = [];
 
   const api: MindMapBuilder = {
@@ -1845,7 +1850,7 @@ export function mindMap(preset: MindMapPreset): MindMapBuilder {
       b.phase(
         "mindmap",
         { duration: 2400, title: preset.topic, body: "中心の主題から、すべての枝を放射状に広げた姿。" },
-        (p) => p.activate(nodeId).badge("mindmap"),
+        (p) => p.activate(nodeId).badge(diagramType),
       );
       return b.build();
     },
@@ -2581,7 +2586,9 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
+  // 入れ子を持つ状態の図も型は `state`。 最後の段の札も同じ綴りで、1 つ目の図との見分けは題が持つ (#859)
+  const diagramType = "state";
+  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
 
   const stateOrder = new Map<string, number>();
   const phaseActivate: string[] = [];
@@ -2645,7 +2652,7 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
           title: preset.topic,
           body: "入れ子の状態と、入る時・出る時の処理を含めた、すべての状態と遷移。",
         },
-        (p) => p.activate(...phaseActivate).badge("statemachine2"),
+        (p) => p.activate(...phaseActivate).badge(diagramType),
       );
       const d = b.build();
       // 入れ子の札に親の題を足す。 識別子 (`active`) を出すと、図のどこにも無い字になる

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>
           );