@cardenelabs/cdl 0.62.0 → 0.64.0

package/dist/{render-Dk8_6ua6.d.cts → render-DfXCs3Eh.d.cts}

@@ -1086,7 +1086,10 @@ type CdlReadout = {
     id: string;
     kind: "badge";
     source: string;
-    /** color source (default source と同じ)、 別 signal で色を切替可能 */
+    /**
+     * 色を引く状態 (#861)。 書くと `map` をこの状態の値で引き、札の字は `source` の値のまま。
+     * 書かなければ `source` の値で引く。 書いた状態が無い時は色を付けない (`source` に戻さない)
+     */
     colorSource?: string;
     /** 値と色 mapping (例: [{value: 'ok', color: 'green'}])、 未指定なら brand 色 */
     map?: readonly {

package/dist/{render-Dk8_6ua6.d.ts → render-DfXCs3Eh.d.ts}

@@ -1086,7 +1086,10 @@ type CdlReadout = {
     id: string;
     kind: "badge";
     source: string;
-    /** color source (default source と同じ)、 別 signal で色を切替可能 */
+    /**
+     * 色を引く状態 (#861)。 書くと `map` をこの状態の値で引き、札の字は `source` の値のまま。
+     * 書かなければ `source` の値で引く。 書いた状態が無い時は色を付けない (`source` に戻さない)
+     */
     colorSource?: string;
     /** 値と色 mapping (例: [{value: 'ok', color: 'green'}])、 未指定なら brand 色 */
     map?: readonly {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.62.0",
+  "version": "0.64.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",
@@ -57,6 +57,16 @@
     "node": ">=18"
   },
   "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "cd ../.. && vitest run packages/cdl",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "pnpm run typecheck && pnpm run build",
+    "prepack": "node scripts/prepack-check.mjs",
+    "postpack": "node scripts/prepack-check.mjs"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -68,12 +78,5 @@
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0",
     "typescript": "^5.8.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "cd ../.. && vitest run packages/cdl",
-    "lint": "tsc --noEmit"
   }
-}
+}

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

@@ -1280,15 +1280,15 @@ function ReadoutWidget({
           colors={readout.colors ?? ["#e0e6ef", "#2d6a8f"]}
         />
       );
-    case "badge":
-      return (
-        <BadgeReadout
-          id={readout.id}
-          label={label}
-          value={typeof rawValue === "string" ? rawValue : String(rawValue ?? "")}
-          map={readout.map}
-        />
-      );
+    case "badge": {
+      const value = typeof rawValue === "string" ? rawValue : String(rawValue ?? "");
+      // 色を引く鍵は `colorSource` を書けばその状態の値、書かなければ札の字と同じ値 (#861)。
+      // 書いた状態が無い時は `source` の値に戻さない = 書き間違いが効いているように見えない
+      const colorRaw = readout.colorSource === undefined ? undefined : stateOverrides[readout.colorSource];
+      const colorKey =
+        readout.colorSource === undefined ? value : colorRaw === undefined ? undefined : String(colorRaw);
+      return <BadgeReadout id={readout.id} label={label} value={value} colorKey={colorKey} map={readout.map} />;
+    }
     case "status-dot":
       return (
         <StatusDotReadout
@@ -3041,14 +3041,18 @@ function BadgeReadout({
   id,
   label,
   value,
+  colorKey,
   map,
 }: {
   id: string;
   label: string;
+  /** 札に出す字 */
   value: string;
+  /** `map` を引く鍵。 無ければどの色にも当てない */
+  colorKey: string | undefined;
   map?: readonly { value: string; color: string }[];
 }): JSX.Element {
-  const entry = map?.find((m) => m.value === value);
+  const entry = colorKey === undefined ? undefined : map?.find((m) => m.value === colorKey);
   const color = entry?.color;
   return (
     <div className="cdl-ip-item cdl-ip-readout-badge" data-cdl-readout={id}>

package/src/types.ts

@@ -1150,7 +1150,10 @@ export type CdlReadout =
       id: string;
       kind: "badge";
       source: string;
-      /** color source (default source と同じ)、 別 signal で色を切替可能 */
+      /**
+       * 色を引く状態 (#861)。 書くと `map` をこの状態の値で引き、札の字は `source` の値のまま。
+       * 書かなければ `source` の値で引く。 書いた状態が無い時は色を付けない (`source` に戻さない)
+       */
       colorSource?: string;
       /** 値と色 mapping (例: [{value: 'ok', color: 'green'}])、 未指定なら brand 色 */
       map?: readonly { value: string; color: string }[];