@cardenelabs/cdl 0.5.0

package/src/input-signals.ts

@@ -0,0 +1,74 @@
+import { assertNever } from "./assert-never";
+import { signal, type Signal } from "./reactive";
+import type { CdlDiagram, CdlInput } from "./types";
+
+/**
+ * CdlInput の kind に応じた value type。 slider / number → number、 dropdown → string、 toggle → boolean。
+ */
+export type InputSignalValueMap = {
+  slider: number;
+  number: number;
+  dropdown: string;
+  toggle: boolean;
+};
+
+/**
+ * diagram の `inputs` から signal を生成、 id をキーにした map を返す helper (CAR #243)。
+ *
+ * consumer app 側 = 「HTML widget → onChange で signal.value 更新 → SVG 内 bind が signal.value を read」
+ * の bind 経路の起点。 static SSR では signal 生成せず defaultValue を SVG に埋込むだけで良い、
+ * client hydration の時点で本 helper を呼んで signal を生成、 widget と bind する。
+ *
+ * diagram に inputs がない場合は空 object を返す。 id が重複する diagram は builder 側で error になるため
+ * 本 helper 内では重複チェックしない (fail-fast は builder 責務)。
+ */
+export function createInputSignals(diagram: CdlDiagram): Record<string, Signal<unknown>> {
+  // Object.create(null) で prototype なし storage を使う。 通常の `{}` だと
+  // `__proto__` / `constructor` / `hasOwnProperty` 等の Object prototype key が
+  // input id として来た場合、 assignment が prototype setter に落ちて own property として
+  // 登録されず lookup 失敗する (widget bind が silent fail する)。
+  // Object.create(null) は Object.prototype を継承しないので全 string を own key として扱える。
+  const result = Object.create(null) as Record<string, Signal<unknown>>;
+  const inputs = diagram.inputs ?? [];
+  for (const input of inputs) {
+    result[input.id] = signal(inputDefaultValue(input));
+  }
+  return result;
+}
+
+/**
+ * CdlInput から default value を kind-safe に取り出す。 discriminated union なので type narrowing が効く。
+ * default 節 assertNever で新 kind 追加時 compile error 検知する (CAR #262)。
+ */
+export function inputDefaultValue(input: CdlInput): number | string | boolean {
+  switch (input.kind) {
+    case "slider":
+    case "number":
+    case "stepper":
+      return input.defaultValue;
+    case "dropdown":
+    case "radio":
+    case "color":
+      return input.defaultValue;
+    case "toggle":
+      return input.defaultValue;
+    // xypad は object 値、 単一 signal に string encode で格納 ("x,y" 形式)
+    case "xypad":
+      return `${input.defaultX},${input.defaultY}`;
+    // timeline は 0..1 progress の numeric、 起動時 0 (0 秒目)
+    case "timeline":
+      return 0;
+    // range は "lo,hi" string で単一 signal に格納
+    case "range":
+      return `${input.defaultLo},${input.defaultHi}`;
+    // multi-select は comma-sep string で signal に格納
+    case "multi-select":
+      return input.defaultValues.join(",");
+    case "tabs":
+    case "datetime":
+    case "text":
+      return input.defaultValue;
+    default:
+      return assertNever(input, "inputDefaultValue");
+  }
+}

package/src/kinds/actor.tsx

@@ -0,0 +1,79 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { nodeAccent } from "./node-tone";
+import { titlePlacement } from "./compact-title";
+
+export function ActorNode({ node, active, value }: { node: LaidNode; active: boolean; value: string | undefined }): JSX.Element {
+  const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
+  const 名前 = titlePlacement(node, { x: 26, y: 86, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
+  return (
+    <g transform={`translate(${x} ${y})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={18}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? accent : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+      {node.eyebrow && (
+        <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={名前.x}
+        y={名前.y}
+        fontSize={名前.size}
+        fontWeight={700}
+        fill="var(--cdl-text, #1a1f2a)"
+        textAnchor={名前.anchor}
+      >
+        {node.title}
+      </text>
+      {/*
+        名前と説明の区切り (#424)。 色は `--cdl-row-divider` を独立して持つ。 枠線と同じ
+        `--cdl-divider` を借りていたが、 呼び出し側はこの変数を **枠線の色** として上書きする
+        (枠を消すために `transparent` にする等) ため、 区切り線まで一緒に消えていた。
+
+        不透明度を下げる指定もやめた = 既定の箱の塗りに対して 1.08 しか無く、 呼び出し側が
+        何も指定しない状態で見えなかった (`storage` と同型、 `#423`)。
+      */}
+      {(node.subtitle || value) && (
+        <line
+          data-cdl-role="node-row-divider"
+          x1={26}
+          y1={110}
+          x2={node.w - 26}
+          y2={110}
+          stroke="var(--cdl-row-divider, #7e848e)"
+        />
+      )}
+      {node.subtitle && (
+        <text x={26} y={140} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">
+          {node.subtitle}
+        </text>
+      )}
+      {value && (
+        <text
+          x={node.w - 26}
+          y={node.subtitle ? 172 : 152}
+          fontSize={42}
+          fontWeight={700}
+          textAnchor="end"
+          fill="var(--cdl-text, #1a1f2a)"
+          style={{ fontFamily: "'JetBrains Mono', monospace" }}
+        >
+          {value}
+        </text>
+      )}
+    </g>
+  );
+}

package/src/kinds/card.tsx

@@ -0,0 +1,61 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { nodeAccent } from "./node-tone";
+import { fitTextSize, isCompactBox } from "./compact-title";
+
+export function CardNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  // w<10 は anchor 用 invisible marker (sequence preset の activation marker 等)
+  if (node.w < 10) {
+    return <g transform={`translate(${x} ${y})`} />;
+  }
+  // compact card (h<100) は中央揃え (sequence header 等の小型 card 用)。
+  // 高さの境界は `compact-title.ts` が持つ = 4 種と同じ値を使う (#416)
+  const compact = isCompactBox(node.h);
+  const titleY = compact ? node.h / 2 + 8 : 86;
+  const titleX = compact ? node.w / 2 : 26;
+  const paddingX = compact ? 16 : 52;
+  const availableW = node.w - paddingX;
+  const initialTitleSize = compact ? 20 : 24;
+  const titleSize = fitTextSize(node.title, availableW, initialTitleSize, 11);
+  const textAnchor = compact ? ("middle" as const) : ("start" as const);
+  const subtitleSize = node.subtitle ? fitTextSize(node.subtitle, availableW, 21, 11) : 21;
+  return (
+    <g transform={`translate(${x} ${y})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? accent : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+      {!compact && node.eyebrow && (
+        <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={titleX}
+        y={titleY}
+        fontSize={titleSize}
+        fontWeight={700}
+        fill="var(--cdl-text, #1a1f2a)"
+        textAnchor={textAnchor}
+      >
+        {node.title}
+      </text>
+      {!compact && node.subtitle && (
+        <text x={26} y={124} fontSize={subtitleSize} fill="var(--cdl-text-dim, #5a6270)">
+          {node.subtitle}
+        </text>
+      )}
+    </g>
+  );
+}

package/src/kinds/chart-bar.tsx

@@ -0,0 +1,121 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+
+/**
+ * chart-bar kind ... 1 node に datum 配列 (chartData) を保持し、 SVG rect で棒グラフ描画する。
+ * layout は node bbox 内側の canvas に縦棒を等間隔配置、 縦軸 = value 0-max、 横軸 = datum label。
+ */
+export function ChartBarNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = node.chartData ?? [];
+
+  const PAD_TOP = 20;
+  const PAD_RIGHT = 24;
+  const PAD_BOTTOM = 44;
+  const PAD_LEFT = 60;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
+  const vRange = vMax || 1;
+
+  const barGap = 10;
+  const barCount = data.length || 1;
+  const barW = (canvasW - barGap * (barCount + 1)) / barCount;
+
+  const yAt = (v: number) => PAD_TOP + canvasH - (v / vRange) * canvasH;
+  const xAt = (idx: number) => PAD_LEFT + barGap + idx * (barW + barGap);
+
+  const gridCount = 4;
+  const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
+    const v = (vMax * i) / gridCount;
+    return { y: yAt(v), value: v };
+  });
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+      {gridTicks.map((t, i) => (
+        <g key={`grid-${i}`}>
+          <line
+            x1={PAD_LEFT}
+            y1={t.y}
+            x2={PAD_LEFT + canvasW}
+            y2={t.y}
+            stroke="var(--cdl-divider, #d4d4d8)"
+            strokeWidth={0.75}
+            strokeDasharray="3 3"
+            opacity={0.65}
+          />
+          <text
+            x={PAD_LEFT - 8}
+            y={t.y + 4}
+            fontSize={11}
+            textAnchor="end"
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            {Math.round(t.value)}
+          </text>
+        </g>
+      ))}
+
+      <line
+        x1={PAD_LEFT}
+        y1={PAD_TOP + canvasH}
+        x2={PAD_LEFT + canvasW}
+        y2={PAD_TOP + canvasH}
+        stroke="var(--cdl-text-mute, #8a8678)"
+        strokeWidth={1.25}
+      />
+
+      {data.map((d, idx) => {
+        const bx = xAt(idx);
+        const by = yAt(d.value);
+        const bh = PAD_TOP + canvasH - by;
+        return (
+          <g key={`bar-${idx}`}>
+            <rect
+              data-cdl-role="chart-bar"
+              x={bx}
+              y={by}
+              width={barW}
+              height={bh}
+              rx={2}
+              fill="var(--cdl-tone-accent, #2d6a8f)"
+              fillOpacity={0.9}
+            />
+            <text
+              x={bx + barW / 2}
+              y={by - 6}
+              fontSize={11}
+              textAnchor="middle"
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {d.value.toLocaleString()}
+            </text>
+            <text
+              x={bx + barW / 2}
+              y={PAD_TOP + canvasH + 18}
+              fontSize={12}
+              textAnchor="middle"
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {d.label}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}

package/src/kinds/chart-line.tsx

@@ -0,0 +1,163 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+
+/**
+ * chart-line kind ... 1 node に datum 配列 (chartData) を保持し、 SVG polyline で折れ線描画する。
+ * layout は node bbox (node.w × node.h) 内側に padding (top/right/bottom/left) を確保し、
+ * その内側 rect を chart canvas とみなす。 縦軸 = value min-max、 横軸 = datum index。
+ */
+export function ChartLineNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = node.chartData ?? [];
+
+  const PAD_TOP = 36;
+  const PAD_RIGHT = 40;
+  const PAD_BOTTOM = 56;
+  const PAD_LEFT = 72;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const values = data.map((d) => d.value);
+  const vMin = values.length > 0 ? Math.min(...values) : 0;
+  const vMax = values.length > 0 ? Math.max(...values) : 1;
+  const vRange = vMax - vMin || 1;
+
+  // 最大値 / 最小値の点が描画領域の上下端に張り付くと、 値 label が線に重なる。
+  // 上下に label 1 行ぶんの余白を確保して、 その内側に折れ線を描く。
+  const LABEL_ROOM = 20;
+  const plotTop = PAD_TOP + LABEL_ROOM;
+  const plotH = Math.max(canvasH - LABEL_ROOM * 2, 1);
+
+  const xAt = (idx: number) =>
+    PAD_LEFT + (data.length <= 1 ? canvasW / 2 : (canvasW * idx) / (data.length - 1));
+  const yAt = (v: number) => plotTop + plotH - ((v - vMin) / vRange) * plotH;
+
+  const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
+
+  const gridCount = 4;
+  const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
+    const v = vMin + (vRange * i) / gridCount;
+    return { y: yAt(v), value: v };
+  });
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+      {gridTicks.map((t, i) => (
+        <g key={`grid-${i}`}>
+          <line
+            x1={PAD_LEFT}
+            y1={t.y}
+            x2={PAD_LEFT + canvasW}
+            y2={t.y}
+            stroke="var(--cdl-divider, #d4d4d8)"
+            strokeWidth={0.75}
+            strokeDasharray="3 3"
+            opacity={0.65}
+          />
+          <text
+            x={PAD_LEFT - 8}
+            y={t.y + 4}
+            fontSize={11}
+            textAnchor="end"
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            {Math.round(t.value)}
+          </text>
+        </g>
+      ))}
+
+      <line
+        x1={PAD_LEFT}
+        y1={plotTop + plotH}
+        x2={PAD_LEFT + canvasW}
+        y2={plotTop + plotH}
+        stroke="var(--cdl-text-mute, #8a8678)"
+        strokeWidth={1.25}
+      />
+      <line
+        x1={PAD_LEFT}
+        y1={plotTop}
+        x2={PAD_LEFT}
+        y2={plotTop + plotH}
+        stroke="var(--cdl-text-mute, #8a8678)"
+        strokeWidth={1.25}
+      />
+
+      {data.length > 1 && (
+        <polyline
+          data-cdl-role="chart-line"
+          points={points}
+          fill="none"
+          stroke="var(--cdl-tone-accent, #2d6a8f)"
+          strokeWidth={2.5}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+      )}
+      {data.map((d, idx) => {
+        const cx = xAt(idx);
+        const cy = yAt(d.value);
+        // value label は marker の上に置くのが基本、 canvas 上端 6px より内側になる場合は
+        // 下に反転して他要素と重ならないようにする
+        // 折れ線に重ならない側へ置く。 山 (両隣より高い) なら上、 谷なら下。
+        // 単調な区間では上に置く。 上下端には LABEL_ROOM を確保してあるので反転は不要。
+        const prev = idx > 0 ? data[idx - 1]!.value : undefined;
+        const next = idx < data.length - 1 ? data[idx + 1]!.value : undefined;
+        const isValley =
+          (prev === undefined || d.value <= prev) && (next === undefined || d.value <= next);
+        const labelAbove = !isValley;
+        const labelY = labelAbove ? cy - 12 : cy + 18;
+        return (
+          <g key={`pt-${idx}`}>
+            <circle
+              cx={cx}
+              cy={cy}
+              r={5}
+              fill="var(--cdl-node-fill, #ffffff)"
+              stroke="var(--cdl-tone-accent, #2d6a8f)"
+              strokeWidth={2.5}
+            />
+            <circle
+              cx={cx}
+              cy={cy}
+              r={2.5}
+              fill="var(--cdl-tone-accent, #2d6a8f)"
+            />
+            <text
+              data-cdl-role="chart-line-value"
+              x={cx}
+              y={labelY}
+              fontSize={11}
+              fontWeight={600}
+              textAnchor="middle"
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {d.value.toLocaleString()}
+            </text>
+            <text
+              x={cx}
+              y={PAD_TOP + canvasH + 20}
+              fontSize={12}
+              textAnchor="middle"
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {d.label}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}

package/src/kinds/chart-pie.tsx

@@ -0,0 +1,107 @@
+import type { JSX } from "react";
+import type { LaidNode, Tone } from "../types";
+import { TONE } from "../render/tone";
+
+/**
+ * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
+ * layout は node bbox 内側の左半分に円を配置、 右半分に凡例 (label + %) を stack 表示する。
+ */
+export function ChartPieNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = node.chartData ?? [];
+  const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
+
+  const PAD_TOP = 20;
+  const PAD_BOTTOM = 20;
+  const chartAreaH = node.h - PAD_TOP - PAD_BOTTOM;
+  const pieAreaW = node.w * 0.5;
+  const radius = Math.min(pieAreaW, chartAreaH) / 2 - 12;
+  const cx = pieAreaW / 2;
+  const cy = PAD_TOP + chartAreaH / 2;
+
+  let cumAngle = -Math.PI / 2;
+  const slices = data.map((d) => {
+    const frac = d.value / total;
+    const angle = frac * Math.PI * 2;
+    const a0 = cumAngle;
+    const a1 = cumAngle + angle;
+    cumAngle = a1;
+
+    const x1 = cx + radius * Math.cos(a0);
+    const y1 = cy + radius * Math.sin(a0);
+    const x2 = cx + radius * Math.cos(a1);
+    const y2 = cy + radius * Math.sin(a1);
+    const large = angle > Math.PI ? 1 : 0;
+    const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
+    return { d, frac, path };
+  });
+
+  const legendX = pieAreaW + 8;
+  const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
+  const legendStartY = PAD_TOP + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+      {slices.map((s, idx) => (
+        <path
+          key={`slice-${idx}`}
+          data-cdl-role="chart-pie-slice"
+          d={s.path}
+          fill={sliceColor(s.d.tone, idx)}
+          fillOpacity={active ? 0.95 : 0.85}
+          stroke="var(--cdl-node-fill, #ffffff)"
+          strokeWidth={1.5}
+        />
+      ))}
+
+      {slices.map((s, idx) => (
+        <g key={`legend-${idx}`} transform={`translate(${legendX} ${legendStartY + idx * legendGap})`}>
+          <rect
+            x={0}
+            y={-8}
+            width={14}
+            height={14}
+            rx={3}
+            fill={sliceColor(s.d.tone, idx)}
+          />
+          <text
+            x={20}
+            y={2}
+            fontSize={12}
+            fill="var(--cdl-text, #1a1f2a)"
+          >
+            {s.d.label}
+          </text>
+          <text
+            x={20}
+            y={16}
+            fontSize={11}
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            {(s.frac * 100).toFixed(1)}%
+          </text>
+        </g>
+      ))}
+    </g>
+  );
+}
+
+
+const FALLBACK_ORDER: Tone[] = ["accent", "teal", "warning", "success", "info", "error"];
+
+function sliceColor(tone: Tone | undefined, idx: number): string {
+  if (tone) return TONE[tone];
+  return TONE[FALLBACK_ORDER[idx % FALLBACK_ORDER.length]!];
+}