@cardenelabs/cdl 0.63.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.63.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/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 }[];