@cardenelabs/cdl 0.5.0

package/src/kinds/funnel.tsx

@@ -0,0 +1,122 @@
+import type { JSX } from "react";
+import type { LaidNode, Tone } from "../types";
+import { TONE } from "../render/tone";
+
+/**
+ * funnel-stages kind ... 1 node に stage 配列 (funnelData) を保持し、 逆三角形 funnel を SVG 描画する。
+ * layout = 全体で自然な逆三角形になるように上端 100% → 下端 40% で線形補間、
+ * 各 stage は同じ縦幅 + 上下辺の幅を段階的に減らして「じょうご」 形状で表現。
+ * count / drop rate は polygon の右横 (side legend) に配置して図形と数値を分離。
+ */
+export function FunnelNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const stages = node.funnelData ?? [];
+
+  const PAD_TOP = 32;
+  const PAD_RIGHT = 24;
+  const PAD_BOTTOM = 32;
+  const PAD_LEFT = 24;
+  const legendW = 160;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT - legendW;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const stageCount = stages.length || 1;
+  const gap = 4;
+  const stageH = (canvasH - gap * (stageCount - 1)) / stageCount;
+
+  const widthAtStep = (step: number): number => {
+    const topRatio = 1.0;
+    const bottomRatio = 0.35;
+    const t = step / stageCount;
+    return canvasW * (topRatio + (bottomRatio - topRatio) * t);
+  };
+
+  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}
+      />
+
+      {stages.map((s, idx) => {
+        const prev = idx > 0 ? stages[idx - 1]! : null;
+        const dropRate = prev ? ((prev.count - s.count) / prev.count) * 100 : 0;
+        const y = PAD_TOP + idx * (stageH + gap);
+        const topW = widthAtStep(idx);
+        const bottomW = widthAtStep(idx + 1);
+        const cx = PAD_LEFT + canvasW / 2;
+        const topX = cx - topW / 2;
+        const bottomX = cx - bottomW / 2;
+        const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
+        const tone = toneByIndex(idx);
+        const legendX = PAD_LEFT + canvasW + 24;
+        return (
+          <g key={`stage-${s.id}`}>
+            <polygon
+              data-cdl-role="funnel-stage"
+              points={points}
+              fill={tone}
+              fillOpacity={0.9}
+              stroke={tone}
+              strokeWidth={0}
+            />
+            <text
+              x={cx}
+              y={y + stageH / 2 + 5}
+              fontSize={14}
+              fontWeight={700}
+              textAnchor="middle"
+              fill="var(--cdl-node-fill, #ffffff)"
+            >
+              {s.title}
+            </text>
+            <text
+              x={legendX}
+              y={y + stageH / 2 - 2}
+              fontSize={13}
+              fontWeight={700}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {s.count.toLocaleString()}
+            </text>
+            {prev && (
+              <text
+                x={legendX}
+                y={y + stageH / 2 + 14}
+                fontSize={11}
+                fill={dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)"}
+              >
+                {dropRate > 0 ? `↓ ${dropRate.toFixed(1)}%` : "±0%"}
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+// 段ごとに色を変える。 色は共有の表から引く (直書きすると表を直した時に取り残される)。
+const TONE_ORDER: string[] = [
+  TONE.accent,
+  TONE.teal,
+  TONE.success,
+  TONE.warning,
+  TONE.info,
+  TONE.error,
+];
+
+function toneByIndex(idx: number): string {
+  return TONE_ORDER[idx % TONE_ORDER.length]!;
+}
+
+const _tones: Tone = "accent";
+void _tones;

package/src/kinds/gantt.tsx

@@ -0,0 +1,193 @@
+import type { JSX } from "react";
+import type { LaidNode, Tone } from "../types";
+import { TONE } from "../render/tone";
+
+/**
+ * gantt-timeline kind ... 1 node に task 配列 (ganttData) を保持し、 帯状 timeline を SVG 描画する。
+ * layout = 縦軸 task lane (task ごと 1 行)、 横軸日付 (startIdx / endIdx で bar 位置と幅)。
+ * dependsOn は task 間の連結 arrow (elbow line + arrowhead) を追加。
+ */
+export function GanttNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const tasks = node.ganttData ?? [];
+
+  const PAD_TOP = 32;
+  const PAD_RIGHT = 48;
+  const PAD_BOTTOM = 44;
+  const PAD_LEFT = 156;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const rowGap = 20;
+  const rowCount = tasks.length || 1;
+  const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
+
+  const maxIdx = Math.max(1, ...tasks.map((t) => t.endIdx + 1));
+  const cellW = canvasW / maxIdx;
+
+  const xAt = (idx: number) => PAD_LEFT + idx * cellW;
+  const yAt = (row: number) => PAD_TOP + rowGap + row * (rowH + rowGap);
+
+  const gridLabels = Array.from({ length: maxIdx }, (_, i) => {
+    const t = tasks.find((tt) => tt.startIdx === i);
+    return t?.startLabel ?? String(i);
+  });
+
+  const taskById = new Map(tasks.map((t) => [t.id, t]));
+  const rowOf = new Map(tasks.map((t, i) => [t.id, i]));
+
+  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}
+      />
+
+      {gridLabels.map((label, i) => (
+        <g key={`grid-${i}`}>
+          <line
+            x1={xAt(i)}
+            y1={PAD_TOP}
+            x2={xAt(i)}
+            y2={PAD_TOP + canvasH}
+            stroke="var(--cdl-divider, #d4d4d8)"
+            strokeWidth={0.75}
+            strokeDasharray="3 3"
+            opacity={0.5}
+          />
+          <text
+            x={xAt(i) + cellW / 2}
+            y={PAD_TOP + canvasH + 18}
+            fontSize={11}
+            textAnchor="middle"
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            {label}
+          </text>
+        </g>
+      ))}
+
+      <line
+        x1={xAt(maxIdx)}
+        y1={PAD_TOP}
+        x2={xAt(maxIdx)}
+        y2={PAD_TOP + canvasH}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={0.75}
+        opacity={0.5}
+      />
+
+      {tasks.map((t, row) => (
+        <text
+          key={`label-${t.id}`}
+          x={PAD_LEFT - 12}
+          y={yAt(row) + rowH / 2 + 4}
+          fontSize={12}
+          textAnchor="end"
+          fill="var(--cdl-text, #1a1f2a)"
+          fontWeight={600}
+        >
+          {t.title}
+        </text>
+      ))}
+
+      {tasks.map((t, row) => {
+        const bx = xAt(t.startIdx) + 3;
+        const by = yAt(row);
+        const bw = Math.max(cellW - 6, (t.endIdx - t.startIdx + 1) * cellW - 6);
+        return (
+          <g key={`bar-${t.id}`}>
+            <rect
+              data-cdl-role="gantt-bar"
+              x={bx}
+              y={by}
+              width={bw}
+              height={rowH}
+              rx={4}
+              fill={toneColor(t.tone)}
+              fillOpacity={0.9}
+            />
+            {t.owner && rowH >= 22 && (
+              <text
+                x={bx + 8}
+                y={by + rowH / 2 + 4}
+                fontSize={11}
+                fill="var(--cdl-node-fill, #ffffff)"
+                fontWeight={600}
+              >
+                {t.owner}
+              </text>
+            )}
+          </g>
+        );
+      })}
+
+      {tasks
+        .filter((t) => t.dependsOn && taskById.has(t.dependsOn))
+        .map((t) => {
+          const parent = taskById.get(t.dependsOn!)!;
+          const parentRow = rowOf.get(parent.id)!;
+          const childRow = rowOf.get(t.id)!;
+          const parentBarRight = xAt(parent.endIdx) + cellW - 3;
+          const parentMidY = yAt(parentRow) + rowH / 2;
+          const childBarLeft = xAt(t.startIdx) + 3;
+          const childMidY = yAt(childRow) + rowH / 2;
+          const arrowHeadSize = 8;
+          // arrow head 三角形の頂点 (= tipX + arrowHeadSize) が bar 左辺の 10px 手前に来る
+          // ように配置、 「食い込み」 に見える視覚エラー完全排除
+          const arrowHeadTipGap = 10;
+          const tipX = childBarLeft - arrowHeadTipGap - arrowHeadSize;
+          const tipY = childMidY;
+          const startX = parentBarRight + 4;
+          // 親 bar の右端と 矢印の手前の間に縦線を通す余裕があるかで経路を分ける。
+          //
+          // 旧実装は `elbowX = Math.max(startX + 6, tipX - 6)` で、 子 bar が親の直後に始まると
+          // `elbowX > tipX` になり、 縦線が矢印より右に引かれてから左へ戻っていた。
+          const elbowGap = 6;
+          const enterX = tipX - elbowGap;
+          const hasRoom = enterX - startX >= elbowGap;
+          const path = hasRoom
+            // 余裕がある ... 右へ → 下へ → 矢印へ
+            ? `M ${startX} ${parentMidY} L ${enterX} ${parentMidY} L ${enterX} ${tipY} L ${tipX} ${tipY}`
+            // 余裕がない ... 行間を経由して回り込む (右へ → 行間へ → 左へ → 下へ → 矢印へ)
+            : `M ${startX} ${parentMidY} L ${startX + elbowGap} ${parentMidY}` +
+              ` L ${startX + elbowGap} ${(parentMidY + tipY) / 2}` +
+              ` L ${enterX} ${(parentMidY + tipY) / 2} L ${enterX} ${tipY} L ${tipX} ${tipY}`;
+          const arrowHeadPath = `M ${tipX + arrowHeadSize} ${tipY} L ${tipX} ${tipY - arrowHeadSize / 2} L ${tipX} ${tipY + arrowHeadSize / 2} Z`;
+          return (
+            <g key={`dep-${parent.id}-${t.id}`} data-cdl-role="gantt-arrow">
+              <path
+                d={path}
+                fill="none"
+                stroke="var(--cdl-text-mute, #8a8678)"
+                strokeWidth={1.75}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+              />
+              <path
+                d={arrowHeadPath}
+                fill="var(--cdl-text-mute, #8a8678)"
+                stroke="var(--cdl-text-mute, #8a8678)"
+                strokeWidth={0.5}
+                strokeLinejoin="round"
+              />
+            </g>
+          );
+        })}
+    </g>
+  );
+}
+
+
+function toneColor(tone: Tone | undefined): string {
+  if (!tone) return TONE.accent;
+  return TONE[tone];
+}

package/src/kinds/generic.tsx

@@ -0,0 +1,368 @@
+import type { JSX } from "react";
+import type { LaidNode, NodeKind } from "../types";
+import { toneColor } from "./node-tone";
+import { rowBaselineY } from "../layout/spec";
+import {
+  GENERIC_ROW_LEFT_SIZE_PX,
+  rowColumnWidth,
+  ROW_COL_GAP_PX,
+  ROW_PAD_X_PX,
+  splitRow,
+} from "./row-align";
+
+/**
+ * 汎用 node component。 新 NodeKind 25 種を共通の rect + icon + label で描画する。
+ *
+ * kind 別の差分。
+ * - color (枠線 + eyebrow 色)
+ * - icon (SVG path、 node 右上に表示)
+ * - shape (default rect、 cylinder / cloud / diamond は別途 path 描画)
+ */
+
+type KindStyle = {
+  /** active 枠線色 */
+  accent: string;
+  /** eyebrow 文字色 (kind 識別) */
+  eyebrowColor: string;
+  /** icon SVG path d (24x24 viewBox 内、 node 右上に 24x24 で描画) */
+  icon: string;
+  /** shape: rect (default) / cylinder / cloud / diamond / hexagon */
+  shape?: "rect" | "cylinder" | "cloud" | "diamond" | "hexagon";
+};
+
+// 各 kind の visual style (icon は heroicons / lucide 風の minimal SVG path)
+const STYLES: Partial<Record<NodeKind, KindStyle>> = {
+  // 人系
+  person: {
+    accent: "var(--cdl-tone-accent, #2d6a8f)",
+    eyebrowColor: "var(--cdl-tone-accent, #2d6a8f)",
+    icon: "M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z",
+  },
+  "user-group": {
+    accent: "var(--cdl-tone-accent, #2d6a8f)",
+    eyebrowColor: "var(--cdl-tone-accent, #2d6a8f)",
+    icon: "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z",
+  },
+  admin: {
+    accent: "var(--cdl-tone-error, #c15a4a)",
+    eyebrowColor: "var(--cdl-tone-error, #c15a4a)",
+    icon: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z",
+  },
+  developer: {
+    accent: "var(--cdl-tone-teal, #2f8770)",
+    eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
+    icon: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",
+  },
+  "external-user": {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4zm10-1l-3-3v2h-4v2h4v2l3-3z",
+  },
+
+  // インフラ
+  database: {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M12 3C7.58 3 4 4.79 4 7s3.58 4 8 4 8-1.79 8-4-3.58-4-8-4zM4 9v3c0 2.21 3.58 4 8 4s8-1.79 8-4V9c0 2.21-3.58 4-8 4s-8-1.79-8-4zm0 5v3c0 2.21 3.58 4 8 4s8-1.79 8-4v-3c0 2.21-3.58 4-8 4s-8-1.79-8-4z",
+    shape: "cylinder",
+  },
+  cache: {
+    accent: "var(--cdl-tone-warning, #a67a2e)",
+    eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
+    icon: "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z",
+  },
+  queue: {
+    accent: "var(--cdl-tone-warning, #a67a2e)",
+    eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
+    icon: "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z",
+  },
+  "message-bus": {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
+  },
+  cloud: {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z",
+    shape: "cloud",
+  },
+  cdn: {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z",
+  },
+
+  // アプリ系
+  service: {
+    accent: "var(--cdl-tone-teal, #2f8770)",
+    eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
+    icon: "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z",
+  },
+  api: {
+    accent: "var(--cdl-tone-success, #4ea36a)",
+    eyebrowColor: "var(--cdl-tone-success, #4ea36a)",
+    icon: "M14.6 16.6l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z",
+  },
+  frontend: {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z",
+  },
+  backend: {
+    accent: "var(--cdl-tone-teal, #2f8770)",
+    eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
+    icon: "M4 1h16c1.1 0 2 .9 2 2v3c0 .89-.59 1.64-1.41 1.89C20.85 8.55 21 9.26 21 10c0 1.66-1.34 3-3 3s-3-1.34-3-3c0-.74.15-1.45.41-2.11C14.59 7.64 14 6.89 14 6V3c0-1.1.9-2 2-2zm0 8h16c1.1 0 2 .9 2 2v3c0 .89-.59 1.64-1.41 1.89C20.85 16.55 21 17.26 21 18c0 1.66-1.34 3-3 3s-3-1.34-3-3c0-.74.15-1.45.41-2.11C14.59 15.64 14 14.89 14 14v-3c0-1.1.9-2 2-2z",
+  },
+  webhook: {
+    accent: "var(--cdl-tone-warning, #a67a2e)",
+    eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
+    icon: "M10 16l4-4-4-4v3H4v2h6v3z",
+  },
+  microservice: {
+    accent: "var(--cdl-tone-teal, #2f8770)",
+    eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
+    icon: "M2 2h8v8H2zm10 0h8v8h-8zM2 12h8v8H2zm10 0h8v8h-8z",
+  },
+
+  // データ / 判定
+  signer: {
+    accent: "var(--cdl-tone-accent, #2d6a8f)",
+    eyebrowColor: "var(--cdl-tone-accent, #2d6a8f)",
+    icon: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+  },
+  oracle: {
+    accent: "var(--cdl-tone-info, #5a8ec1)",
+    eyebrowColor: "var(--cdl-tone-info, #5a8ec1)",
+    icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-13h-2v6l5.25 3.15.75-1.23-4.5-2.67z",
+  },
+  "merkle-tree": {
+    accent: "var(--cdl-tone-teal, #2f8770)",
+    eyebrowColor: "var(--cdl-tone-teal, #2f8770)",
+    icon: "M12 3l-9 7h3v8h12v-8h3l-9-7zm-2 10h4v5h-4v-5z",
+  },
+  decision: {
+    accent: "var(--cdl-tone-warning, #a67a2e)",
+    eyebrowColor: "var(--cdl-tone-warning, #a67a2e)",
+    icon: "M12 2L2 12l10 10 10-10L12 2zm0 4l6 6-6 6-6-6 6-6z",
+    shape: "diamond",
+  },
+};
+
+const FALLBACK: KindStyle = {
+  accent: "var(--cdl-tone-accent, #2d6a8f)",
+  eyebrowColor: "var(--cdl-tone-accent, #2d6a8f)",
+  icon: "M12 2L2 12l10 10 10-10L12 2z",
+};
+
+export function GenericNode({
+  node,
+  active,
+  value,
+  stateValues,
+}: {
+  node: LaidNode;
+  active: boolean;
+  value: string | undefined;
+  stateValues: Record<string, string>;
+}): JSX.Element {
+  const base = STYLES[node.kind] ?? FALLBACK;
+  // `tone` 指定があれば kind の既定色を置き換える。 色を決める式は `node-tone.ts` に集約。
+  const toned = toneColor(node.tone);
+  const style: KindStyle = toned ? { ...base, accent: toned, eyebrowColor: toned } : base;
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  const w = node.w;
+  const h = node.h;
+
+  // shape 別 path
+  const shape = style.shape ?? "rect";
+  const shapeEl = (() => {
+    if (shape === "cylinder") {
+      // 円柱 (top ellipse + side + bottom ellipse)
+      const rx = w / 2;
+      const ry = 14;
+      return (
+        <g>
+          <path
+            d={`M 0 ${ry} L 0 ${h - ry} A ${rx} ${ry} 0 0 0 ${w} ${h - ry} L ${w} ${ry} A ${rx} ${ry} 0 0 0 0 ${ry} Z`}
+            fill="var(--cdl-node-fill, #ffffff)"
+            stroke={active ? style.accent : "var(--cdl-divider, #d4d4d8)"}
+            strokeWidth={active ? 3 : 1.25}
+          />
+          <ellipse cx={rx} cy={ry} rx={rx} ry={ry} fill="var(--cdl-node-fill, #ffffff)" stroke={active ? style.accent : "var(--cdl-divider, #d4d4d8)"} strokeWidth={active ? 3 : 1.25} />
+        </g>
+      );
+    }
+    if (shape === "diamond") {
+      const cx = w / 2;
+      const cy = h / 2;
+      // diamond の上下頂点を内側に 8px padding して stroke clip を回避。
+      // 旧実装は M cx 0 で上頂点が container 上端と完全一致、 strokeWidth=3 で半分が out of bounds に。
+      const pad = 8;
+      return (
+        <path
+          d={`M ${cx} ${pad} L ${w - pad} ${cy} L ${cx} ${h - pad} L ${pad} ${cy} Z`}
+          fill="var(--cdl-node-fill, #ffffff)"
+          stroke={active ? style.accent : "var(--cdl-divider, #d4d4d8)"}
+          strokeWidth={active ? 3 : 1.25}
+        />
+      );
+    }
+    if (shape === "cloud") {
+      // 雲 shape ... <circle> を 5 つ重ねて合成し、 本物のもこもこ雲を描画。
+      // path で union するより circle 5 つを並べる方が「ふっくら感」 が出る。
+      // 各 circle の中心 y は box 中央線上 (もしくは中央より少し上)、 半径は box 高さの 0.35 ~ 0.45。
+      const cx = w / 2;
+      const cy = h / 2;
+      // 雲全体の中心 y を box の中央 (cy) より少し上に
+      const cloudCenterY = cy - h * 0.05;
+      // 5 つの円の半径と中心 x オフセット (中央が大きく、 端が小さい)
+      // 円が w 方向 80% を占めるよう配置
+      const usableW = w * 0.85;
+      const halfW = usableW / 2;
+      const circles = [
+        { cx: cx - halfW * 0.8, cy: cloudCenterY + h * 0.08, r: h * 0.32 }, // 左端
+        { cx: cx - halfW * 0.4, cy: cloudCenterY - h * 0.05, r: h * 0.4 }, // 左
+        { cx: cx, cy: cloudCenterY - h * 0.1, r: h * 0.46 }, // 中央 (最大)
+        { cx: cx + halfW * 0.4, cy: cloudCenterY - h * 0.05, r: h * 0.4 }, // 右
+        { cx: cx + halfW * 0.8, cy: cloudCenterY + h * 0.08, r: h * 0.32 }, // 右端
+      ];
+      // 各 circle を fill=雲色、 stroke=outline 色で順に描画。
+      // 全部同じ fill / stroke で描けば視覚的に union された 1 つの雲に見える。
+      // ただし stroke が内側 (重なり部分) でも描画されるとセル割線が見える → 重ね順を工夫。
+      // 解決 ... まず全 circle の fill のみ描画 (内部塗りつぶし)、 次に同じ circle の stroke のみ描画
+      // (stroke は完全に円形だが、 fill で隠れている部分は見えないので結果的に union 外周のみ stroke 表示)。
+      return (
+        <g>
+          {/* Pass 1: fill のみ (union 内部塗りつぶし) */}
+          {circles.map((c, i) => (
+            <circle key={`fill-${i}`} cx={c.cx} cy={c.cy} r={c.r} fill="var(--cdl-node-fill, #ffffff)" />
+          ))}
+          {/* Pass 2: stroke のみ (各円の外周、 重なり部分は他 circle の fill で隠れる) */}
+          {circles.map((c, i) => (
+            <circle
+              key={`stroke-${i}`}
+              cx={c.cx}
+              cy={c.cy}
+              r={c.r}
+              fill="none"
+              stroke={active ? style.accent : "var(--cdl-divider, #d4d4d8)"}
+              strokeWidth={active ? 3 : 1.5}
+            />
+          ))}
+          {/* Pass 3: stroke の重なり線を消すため、 もう一度 fill で内部塗りつぶし (但し stroke よりやや内側に縮める) */}
+          {circles.map((c, i) => (
+            <circle key={`mask-${i}`} cx={c.cx} cy={c.cy} r={c.r - (active ? 1.5 : 0.75)} fill="var(--cdl-node-fill, #ffffff)" />
+          ))}
+        </g>
+      );
+    }
+    // default rect
+    return (
+      <rect
+        x={0}
+        y={0}
+        width={w}
+        height={h}
+        rx={18}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? style.accent : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+    );
+  })();
+
+  // value placeholder 解決 ({stateId} 形式)
+  const resolvedValue = value?.replace(/\{(\w+)\}/g, (_, id: string) => stateValues[id] ?? "");
+
+  // shape 別の text 配置 (diamond / cloud は中心揃え、 rect 等は左上揃え)
+  const centered = shape === "diamond" || shape === "cloud";
+  const textAnchor = centered ? ("middle" as const) : ("start" as const);
+  const textX = centered ? w / 2 : 20;
+  // cylinder は上 ellipse (ry=14) の下に text を置く必要があるため textY を +28 shift
+  const cylinderShift = shape === "cylinder" ? 28 : 0;
+  // 中心揃え時は h/2 を baseline 中心 (dominantBaseline=middle で計算するため text y を h/2 ベースに統一)
+  const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
+  const titleY = centered ? h / 2 + 4 : 68 + cylinderShift;
+  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift;
+  // icon 位置 (diamond / cloud は title の真右の少し上、 中心配置に合わせる)
+  const iconX = centered ? w / 2 + 40 : w - 48;
+  const iconY = centered ? h / 2 - 44 : 18 + cylinderShift;
+  const dominantBaseline = centered ? ("middle" as const) : undefined;
+
+  return (
+    <g transform={`translate(${x} ${y})`} data-cdl-role="node-body">
+      {shapeEl}
+      {/* icon */}
+      <g transform={`translate(${iconX} ${iconY}) scale(1)`} data-cdl-role="node-kind-icon">
+        <rect width={24} height={24} fill="transparent" />
+        <path d={style.icon} fill={style.eyebrowColor} opacity={0.7} transform="scale(1)" />
+      </g>
+      {node.eyebrow && (
+        <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
+          {node.eyebrow}
+        </text>
+      )}
+      <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
+        {node.title}
+      </text>
+      {node.subtitle && (
+        <text x={textX} y={subtitleY} fontSize={17} fill="var(--cdl-text-dim, #5a6270)" textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+          {node.subtitle}
+        </text>
+      )}
+      {resolvedValue && (
+        <text
+          x={w - 20}
+          y={h - 24}
+          fontSize={32}
+          fontWeight={700}
+          textAnchor="end"
+          fill="var(--cdl-text, #1a1f2a)"
+          style={{ fontFamily: "'JetBrains Mono', monospace" }}
+        >
+          {resolvedValue}
+        </text>
+      )}
+      {node.rows && node.rows.length > 0 && (() => {
+        // storage と同じ row-align helper で left / right を分離し、 全 row 共通の
+        // rightColX (= 左列 max 幅 + gap) で右列開始 x を揃える (DB table / UML class 風)。
+        // 旧実装は split(":") 単一 delimiter + 右 anchor (node 右端寄せ) で行毎にズレていた。
+        const resolved = node.rows.map((row) =>
+          row.replace(/\{(\w+)\}/g, (_, id: string) => stateValues[id] ?? ""),
+        );
+        const splits = resolved.map(splitRow);
+        // 左列は比例の書体で描く (`font-family` を指定していないので継承する)。 字数に一定を
+        // 掛ける形では実物に届かず、 右列が左列の字に重なる (`#425`)。 字ごとの幅で見積もる。
+        const leftMaxWidth = splits.reduce(
+          (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
+          0,
+        );
+        const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;
+        return (
+          <g>
+            {splits.map((s, i) => (
+              <g key={i} transform={`translate(0 ${rowBaselineY(node.kind, i)})`}>
+                <text data-cdl-role="node-row" data-cdl-row-index={i} x={ROW_PAD_X_PX} y={0} fontSize={18} fill="var(--cdl-text-dim, #5a6270)">{s.left}</text>
+                <text
+                  data-cdl-role="node-row"
+                  data-cdl-row-index={i}
+                  x={rightColX}
+                  y={0}
+                  fontSize={21}
+                  fontWeight={700}
+                  textAnchor="start"
+                  fill="var(--cdl-text, #1a1f2a)"
+                  style={{ fontFamily: "'JetBrains Mono', monospace" }}
+                >
+                  {s.right}
+                </text>
+              </g>
+            ))}
+          </g>
+        );
+      })()}
+    </g>
+  );
+}