@cardenelabs/cdl 0.5.0

package/src/kinds/compact-title.ts

@@ -0,0 +1,164 @@
+/**
+ * 小型の箱で名前をどこに置くか (#416)。
+ *
+ * `actor` / `function` / `storage` / `event` は名前を **箱の上端から固定の距離** に置く。
+ * 箱が小さいと名前が下端をまたぐ = 呼び出し側 (順序図の名札は高さ 72 に固定) で実測すると
+ * 12.7 から 23.6 はみ出していた。
+ *
+ * `card` は最初から高さで分岐しており (`h < 100` で中央揃え)、 その形を 4 種にも足す。
+ *
+ * ## 収まらない時は、 重ならないことを優先する
+ *
+ * 目印が入る高さでも、 その下に名前の帯が足りないことがある (h=43 から 61 のあたり)。
+ * その時は名前を目印の直下に置き、 箱の下へ出す。 上へ逃がすと目印と重なり、 どちらも
+ * 読めなくなるため。
+ *
+ * 目印自体が入らない低さでは箱全体に戻し、 張り出しを上下へ均等に出す。
+ *
+ * ## 字の大きさは種類ごとの値を保つ
+ *
+ * 一律に 20 へ落とすと `actor` (32) の見え方が大きく変わる。 高さが足りないのではなく
+ * **置く位置が固定だったこと** が原因なので、 位置だけ中央へ移し、 大きさは幅に収まる範囲で
+ * 種類ごとの値を保つ。
+ */
+
+/** 概算 monospace / gothic 混合 font のグリフ幅係数。 半角 ≈ 0.62、 全角 (CJK) ≈ 1.05。 */
+export function estimateTextWidth(text: string, fontSize: number): number {
+  let w = 0;
+  for (const ch of text) {
+    // CJK 記号・句読点 (U+3000) から CJK 統合漢字 (U+9FFF) までと、 全角英数・記号 (U+FF00-FFEF)。
+    // 範囲の下端は全角空白そのもの。 字面で書くと no-irregular-whitespace が発火するので escape する。
+    const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
+    w += fontSize * (isFullWidth ? 1.05 : 0.62);
+  }
+  return w;
+}
+
+/** 幅に収まるまで 1 ずつ小さくする。 `minSize` より下げない。 */
+export function fitTextSize(
+  text: string,
+  maxWidth: number,
+  targetSize: number,
+  minSize: number,
+): number {
+  let size = targetSize;
+  while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
+    size -= 1;
+  }
+  return size;
+}
+
+/** これより低い箱を小型とみなす。 `card` が使ってきた値をそのまま用いる。 */
+export const COMPACT_MAX_H = 100;
+
+/** 小型で名前の左右に空ける幅の合計。 `card` の compact と同じ。 */
+const COMPACT_PADDING_X = 16;
+
+/** 小型で名前を縮める下限。 `card` と同じ。 */
+const MIN_SIZE = 11;
+
+/**
+ * 字が baseline から上下へどれだけ張り出すかの見積り。
+ *
+ * 収まるかを決めるのは baseline ではなく **字の上端と下端** なので、 中央に置く時も収まるかを
+ * 見る時もこの 2 つで測る。
+ */
+const ASCENT = 0.72;
+const DESCENT = 0.25;
+
+/**
+ * 名前が収まる最小の帯の高さ。 これより低い帯では **収めきれない**。
+ *
+ * 読める下限 (`MIN_SIZE`) を割ってまで縮めない。 その場合の張り出しは上下へ均等に出す =
+ * 下だけに落ちる形にはしない。
+ */
+export const MIN_BAND_H = MIN_SIZE * (ASCENT + DESCENT);
+
+/** 目印 (`eyebrow`) の baseline と大きさ。 4 種で同じ値を使っている。 */
+const EYEBROW_BASELINE = 38;
+const EYEBROW_SIZE = 18;
+
+/** 目印と名前の間に空ける幅。 実ブラウザで箱が重ならないところまで広げた。 */
+const EYEBROW_GAP = 8;
+
+/** 箱の下端と名前の間に残す幅。 下端に貼り付いて見えるのを避ける。 */
+const BOTTOM_INSET = 4;
+
+/**
+ * 名前を置ける帯の上端。 目印があるとその下から始まる。
+ *
+ * 目印は箱の上端から固定の位置に描かれる。 名前だけを箱の中央へ動かすと **目印と重なる**
+ * (review 指摘 = h=72 の `actor` で baseline の差が 10.8 しかない)。 目印の下から下端までを
+ * 名前の帯とする。
+ */
+/** 目印そのものが占める下端 (間隔を含まない)。 これより低い箱には目印が入らない。 */
+export const eyebrowBottom = (): number => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT;
+
+/**
+ * 名前を置ける帯の上端。 目印があるとその下から始まる。
+ *
+ * 目印は箱の上端から固定の位置に描かれる。 名前だけを箱の中央へ動かすと **目印と重なる**
+ * (review 指摘 = h=72 の `actor` で baseline の差が 10.8 しかない)。 目印の下から下端までを
+ * 名前の帯とする。
+ */
+export const titleBandTop = (hasEyebrow: boolean): number =>
+  hasEyebrow ? eyebrowBottom() + EYEBROW_GAP : 0;
+
+export const isCompactBox = (h: number): boolean => h < COMPACT_MAX_H;
+
+export type TitlePlacement = {
+  x: number;
+  y: number;
+  size: number;
+  anchor: "start" | "middle";
+};
+
+/**
+ * 名前の位置と大きさを返す。 小型でなければ渡された値をそのまま返す。
+ *
+ * 小型では **幅と、 残りの縦幅の両方** に収まる大きさへ縮めてから、 帯の中央に置く。
+ * 縦を見ないと、 低い箱や目印のある箱で字が箱の外に出る (review 指摘)。
+ *
+ * @param 通常 小型でない時の位置と大きさ (種類ごとの固定値)
+ * @param opts.hasEyebrow 目印を描くか。 描くならその下から名前の帯が始まる
+ */
+export function titlePlacement(
+  node: { w: number; h: number; title: string },
+  通常: { x: number; y: number; size: number },
+  opts: { hasEyebrow?: boolean } = {},
+): TitlePlacement {
+  if (!isCompactBox(node.h)) {
+    return { x: 通常.x, y: 通常.y, size: 通常.size, anchor: "start" };
+  }
+  const 高さ = Math.max(0, node.h);
+  const 目印あり = opts.hasEyebrow === true;
+  // **目印が箱に入る時だけ** その下から始める。 入らない高さでは目印も描かれた所で読めないので、
+  // 名前だけ下へ押し出す理由が無い (review 指摘)
+  const 上 = 目印あり && 高さ >= eyebrowBottom() ? titleBandTop(true) : 0;
+  const 生の帯 = Math.max(0, 高さ - 上);
+  // 下の余白は **余裕がある時だけ** 取る。 常に取ると、 低い箱で帯が足りなくなり字が上へ出る
+  const 下余白 = 生の帯 >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
+  const 帯 = 生の帯 - 下余白;
+
+  const 幅で = fitTextSize(
+    node.title,
+    Math.max(0, node.w - COMPACT_PADDING_X),
+    通常.size,
+    MIN_SIZE,
+  );
+  const 帯で = Math.floor(帯 / (ASCENT + DESCENT));
+  const size = Math.max(MIN_SIZE, Math.min(幅で, 帯で));
+  const 字高 = size * (ASCENT + DESCENT);
+
+  // 収まるなら帯の中央。 収まらない時の逃がし方は目印の有無で変える
+  //   目印あり = 目印の直下から下へ出す (上へ出すと目印と重なり、 どちらも読めなくなる)
+  //   目印なし = 上下へ均等に出す (下だけに落ちる形にしない)
+  const y =
+    字高 <= 帯
+      ? 上 + 帯 / 2 + (size * (ASCENT - DESCENT)) / 2
+      : 上 > 0
+        ? 上 + size * ASCENT
+        : (高さ - 字高) / 2 + size * ASCENT;
+
+  return { x: node.w / 2, y, size, anchor: "middle" };
+}

package/src/kinds/dyn-shape.tsx

@@ -0,0 +1,394 @@
+import { useEffect, useState, type JSX } from "react";
+import type { CdlDynShape, LaidNode } from "../types";
+import { resolveNumericAttr } from "../render/utils";
+
+/**
+ * time-driven tick hook = ~30fps throttle で performance.now() を state に反映。
+ * wave の位相 offset 等「時間で常に微振動」 する animation の駆動源。
+ * 60fps 相当の rAF で毎 frame setState すると同 diagram 内の複数 dyn-wave で描画が重くなるため、
+ * 33ms (~30fps) throttle で描画コストを半減 (視覚上は依然滑らかな流れ)。
+ */
+function useTimeTick(): number {
+  const [t, setT] = useState(() => (typeof performance !== "undefined" ? performance.now() : 0));
+  useEffect(() => {
+    if (typeof requestAnimationFrame === "undefined") return;
+    let handle = 0;
+    let lastEmit = performance.now();
+    const tick = (now: number) => {
+      if (now - lastEmit >= 33) {
+        lastEmit = now;
+        setT(now);
+      }
+      handle = requestAnimationFrame(tick);
+    };
+    handle = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(handle);
+  }, []);
+  return t;
+}
+
+/**
+ * dynamic shape の SVG render (CAR: shape primitive)。
+ *
+ * signal 値で内部 fill / radius / angle 等が動く汎用 container。 chart / gantt のような
+ * fixed template ではなく orthogonal primitive で、 「rect の縦 fill」 「circle の
+ * radius」 「arc の angle」 「wave の水位」 「polygon の rotation」 が全部 signal で
+ * 駆動できる。 EIP1559 相当の「rect 3 個並びで各 fill が signal 追随」 を成立させる基盤。
+ *
+ * render 経路 = kind (dyn-rect / dyn-circle / dyn-arc / dyn-wave / dyn-polygon) → 対応
+ * sub-component、 shape.source 等の template を resolveNumericAttr で解決して SVG 属性に。
+ */
+export function DynShapeNode({
+  node,
+  stateValues,
+  active,
+}: {
+  node: LaidNode;
+  stateValues: Record<string, string>;
+  active: boolean;
+}): JSX.Element {
+  const shape = node.shape;
+  const cx = node.cx;
+  const cy = node.cy;
+  const w = node.w;
+  const h = node.h;
+  const x = cx - w / 2;
+  const y = cy - h / 2;
+  if (!shape) return <rect x={x} y={y} width={w} height={h} fill="none" stroke="#ccc" />;
+
+  const strokeColor = shape.stroke ?? "var(--cdl-line, #a89d8f)";
+  const fillColor = shape.fill ?? "var(--cdl-fill, #e0e6ef)";
+  const activeOpacity = active ? 1 : 0.85;
+
+  switch (shape.kind) {
+    case "rect":
+      return renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
+    case "circle":
+      return renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
+    case "arc":
+      return renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
+    case "wave":
+      return <WaveShape shape={shape} x={x} y={y} w={w} h={h} stateValues={stateValues} fillColor={fillColor} strokeColor={strokeColor} opacity={activeOpacity} node={node} />;
+    case "polygon":
+      return renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, activeOpacity, node);
+  }
+}
+
+function renderRect(
+  shape: Extract<CdlDynShape, { kind: "rect" }>,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  stateValues: Record<string, string>,
+  fillColor: string,
+  strokeColor: string,
+  opacity: number,
+  node: LaidNode,
+): JSX.Element {
+  const value = resolveNumericAttr(shape.source, stateValues, 0);
+  const clampedValue = Math.min(shape.fillMax, Math.max(0, value));
+  const ratio = shape.fillMax > 0 ? clampedValue / shape.fillMax : 0;
+  const orient = shape.orient ?? "up";
+  const radius = shape.radius ?? 6;
+  // fill rect の位置と大きさ
+  let fx = x;
+  let fy = y;
+  let fw = w;
+  let fh = h;
+  if (orient === "up") {
+    fh = h * ratio;
+    fy = y + h - fh;
+  } else if (orient === "down") {
+    fh = h * ratio;
+    fy = y;
+  } else if (orient === "right") {
+    fw = w * ratio;
+    fx = x;
+  } else if (orient === "left") {
+    fw = w * ratio;
+    fx = x + w - fw;
+  }
+  const resolvedFill = interpolateColor(shape.fill, stateValues, fillColor);
+  return (
+    <g data-cdl-shape="rect" opacity={opacity}>
+      {/* 枠 */}
+      <rect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        rx={radius}
+        ry={radius}
+        fill="none"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+      />
+      {/* 内部 fill、 clip-path で角丸 rect の内側に閉じ込める */}
+      <clipPath id={`dyn-rect-clip-${node.id}`}>
+        <rect x={x} y={y} width={w} height={h} rx={radius} ry={radius} />
+      </clipPath>
+      <rect
+        x={fx}
+        y={fy}
+        width={fw}
+        height={fh}
+        fill={resolvedFill}
+        clipPath={`url(#dyn-rect-clip-${node.id})`}
+        style={{ transition: "all 200ms ease-out" }}
+      />
+      {/* value label */}
+      <text
+        x={x + w / 2}
+        y={y - 6}
+        textAnchor="middle"
+        fontSize={11}
+        fontFamily="monospace"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
+        {Math.round(clampedValue)} / {shape.fillMax}
+      </text>
+    </g>
+  );
+}
+
+function renderCircle(
+  shape: Extract<CdlDynShape, { kind: "circle" }>,
+  cx: number,
+  cy: number,
+  w: number,
+  h: number,
+  stateValues: Record<string, string>,
+  fillColor: string,
+  strokeColor: string,
+  opacity: number,
+  node: LaidNode,
+): JSX.Element {
+  const maxR = Math.min(w, h) / 2;
+  const r = shape.radius !== undefined ? resolveNumericAttr(shape.radius, stateValues, maxR) : maxR;
+  const progress = shape.fillProgress !== undefined
+    ? Math.min(1, Math.max(0, resolveNumericAttr(shape.fillProgress, stateValues, 0)))
+    : 1;
+  const resolvedFill = interpolateColor(shape.fill, stateValues, fillColor);
+  const clampedR = Math.min(maxR, Math.max(0, r));
+  const filledR = clampedR * progress;
+  return (
+    <g data-cdl-shape="circle" opacity={opacity}>
+      <circle cx={cx} cy={cy} r={clampedR} fill="none" stroke={strokeColor} strokeWidth={1.5} />
+      <circle
+        cx={cx}
+        cy={cy}
+        r={filledR}
+        fill={resolvedFill}
+        style={{ transition: "all 200ms ease-out" }}
+      />
+    </g>
+  );
+}
+
+function renderArc(
+  shape: Extract<CdlDynShape, { kind: "arc" }>,
+  cx: number,
+  cy: number,
+  w: number,
+  h: number,
+  stateValues: Record<string, string>,
+  fillColor: string,
+  strokeColor: string,
+  opacity: number,
+  node: LaidNode,
+): JSX.Element {
+  const maxR = Math.min(w, h) / 2;
+  const outerR = shape.outerRadius ?? maxR;
+  const innerR = shape.innerRadius ?? outerR * 0.7;
+  const startAngle = shape.startAngle ?? -90;
+  const angle = resolveNumericAttr(shape.angle, stateValues, 0);
+  const sweepMax = shape.sweepMax ?? 360;
+  const clamped = Math.min(sweepMax, Math.max(0, angle));
+  const endAngle = startAngle + clamped;
+  const resolvedFill = interpolateColor(shape.fill, stateValues, fillColor);
+  const path = arcPath(cx, cy, innerR, outerR, startAngle, endAngle);
+  const trackPath = arcPath(cx, cy, innerR, outerR, startAngle, startAngle + sweepMax);
+  return (
+    <g data-cdl-shape="arc" opacity={opacity}>
+      <path d={trackPath} fill="none" stroke={strokeColor} strokeWidth={1.5} opacity={0.3} />
+      {clamped > 0.5 && (
+        <path
+          d={path}
+          fill={resolvedFill}
+          style={{ transition: "all 200ms ease-out" }}
+        />
+      )}
+    </g>
+  );
+}
+
+function WaveShape({
+  shape,
+  x,
+  y,
+  w,
+  h,
+  stateValues,
+  fillColor,
+  strokeColor,
+  opacity,
+  node,
+}: {
+  shape: Extract<CdlDynShape, { kind: "wave" }>;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  stateValues: Record<string, string>;
+  fillColor: string;
+  strokeColor: string;
+  opacity: number;
+  node: LaidNode;
+}): JSX.Element {
+  const level = resolveNumericAttr(shape.level, stateValues, 0);
+  const clamped = Math.min(shape.amplitude, Math.max(0, level));
+  const ratio = shape.amplitude > 0 ? clamped / shape.amplitude : 0;
+  const frequency = shape.frequency ?? 2;
+  const waveHeight = shape.waveHeight ?? 6;
+  // waterY を level に応じて波の下限が rectangle 上端を超えないよう調整。
+  // ratio=1 (100%) 時、 waterY = y - waveHeight にして波の底が矩形上端と一致、 隙間なく完全 fill。
+  // ratio=0 時は waterY = y+h (底面)、 中間は線形補間。
+  const waterY = y + h * (1 - ratio) - waveHeight * ratio;
+  const resolvedFill = interpolateColor(shape.fill, stateValues, fillColor);
+  // 時間駆動の位相 offset で波が常に流れる (2 秒周期で 1 波長分平行移動)
+  const t = useTimeTick();
+  const phaseOffset = (t / 2000) * Math.PI * 2;
+  const containerRadius = 8;
+  // 0% (ratio=0) の時は波を出さず、 rectangle の枠だけ描画する。
+  // level=0 なのに底面から小さな波山が突き出るのを防ぐ。
+  if (ratio <= 0) {
+    return (
+      <g data-cdl-shape="wave" opacity={opacity}>
+        <rect
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={containerRadius}
+          ry={containerRadius}
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={1.5}
+        />
+      </g>
+    );
+  }
+  // 波の path: 上端は wave curve、 下端は矩形の底辺で閉じる
+  const points: string[] = [];
+  const steps = 40;
+  for (let i = 0; i <= steps; i++) {
+    const px = x + (w * i) / steps;
+    const wave = Math.sin((i / steps) * Math.PI * 2 * frequency + phaseOffset) * waveHeight;
+    const py = waterY + wave;
+    points.push(`${i === 0 ? "M" : "L"} ${px.toFixed(1)} ${py.toFixed(1)}`);
+  }
+  points.push(`L ${x + w} ${y + h}`);
+  points.push(`L ${x} ${y + h}`);
+  points.push("Z");
+  return (
+    <g data-cdl-shape="wave" opacity={opacity}>
+      <rect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        rx={containerRadius}
+        ry={containerRadius}
+        fill="none"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+      />
+      <clipPath id={`dyn-wave-clip-${node.id}`}>
+        <rect x={x} y={y} width={w} height={h} rx={containerRadius} ry={containerRadius} />
+      </clipPath>
+      <path
+        d={points.join(" ")}
+        fill={resolvedFill}
+        clipPath={`url(#dyn-wave-clip-${node.id})`}
+        style={{ transition: "all 300ms ease-out" }}
+      />
+    </g>
+  );
+}
+
+function renderPolygon(
+  shape: Extract<CdlDynShape, { kind: "polygon" }>,
+  cx: number,
+  cy: number,
+  stateValues: Record<string, string>,
+  fillColor: string,
+  strokeColor: string,
+  opacity: number,
+  node: LaidNode,
+): JSX.Element {
+  const sides = Math.min(12, Math.max(3, shape.sides));
+  const r = shape.radius !== undefined ? resolveNumericAttr(shape.radius, stateValues, 40) : 40;
+  const rotation = shape.rotation !== undefined ? resolveNumericAttr(shape.rotation, stateValues, 0) : 0;
+  const resolvedFill = interpolateColor(shape.fill, stateValues, fillColor);
+  const points: string[] = [];
+  for (let i = 0; i < sides; i++) {
+    const angle = ((i / sides) * 360 + rotation - 90) * (Math.PI / 180);
+    const px = cx + r * Math.cos(angle);
+    const py = cy + r * Math.sin(angle);
+    points.push(`${px.toFixed(1)},${py.toFixed(1)}`);
+  }
+  return (
+    <g data-cdl-shape="polygon" opacity={opacity}>
+      <polygon
+        points={points.join(" ")}
+        fill={resolvedFill}
+        stroke={strokeColor}
+        strokeWidth={1.5}
+        style={{ transition: "all 200ms ease-out" }}
+      />
+    </g>
+  );
+}
+
+/**
+ * SVG arc path (annulus segment) を生成、 innerRadius が 0 なら pie slice。
+ */
+function arcPath(
+  cx: number,
+  cy: number,
+  innerR: number,
+  outerR: number,
+  startAngle: number,
+  endAngle: number,
+): string {
+  const sRad = (startAngle * Math.PI) / 180;
+  const eRad = (endAngle * Math.PI) / 180;
+  const outerStart = { x: cx + outerR * Math.cos(sRad), y: cy + outerR * Math.sin(sRad) };
+  const outerEnd = { x: cx + outerR * Math.cos(eRad), y: cy + outerR * Math.sin(eRad) };
+  const innerStart = { x: cx + innerR * Math.cos(eRad), y: cy + innerR * Math.sin(eRad) };
+  const innerEnd = { x: cx + innerR * Math.cos(sRad), y: cy + innerR * Math.sin(sRad) };
+  const sweep = endAngle - startAngle;
+  const largeArc = Math.abs(sweep) > 180 ? 1 : 0;
+  const sweepFlag = sweep > 0 ? 1 : 0;
+  return [
+    `M ${outerStart.x.toFixed(2)} ${outerStart.y.toFixed(2)}`,
+    `A ${outerR} ${outerR} 0 ${largeArc} ${sweepFlag} ${outerEnd.x.toFixed(2)} ${outerEnd.y.toFixed(2)}`,
+    `L ${innerStart.x.toFixed(2)} ${innerStart.y.toFixed(2)}`,
+    `A ${innerR} ${innerR} 0 ${largeArc} ${sweepFlag === 1 ? 0 : 1} ${innerEnd.x.toFixed(2)} ${innerEnd.y.toFixed(2)}`,
+    "Z",
+  ].join(" ");
+}
+
+/**
+ * fill color template を stateValues で解決。 色は数値以外の string を含むので、
+ * `{signal}` 全体を signal 値で置換 (interpolate だけを使う)。
+ */
+function interpolateColor(
+  template: string | undefined,
+  stateValues: Record<string, string>,
+  fallback: string,
+): string {
+  if (!template) return fallback;
+  return template.replace(/\{(\w+)\}/g, (_, id: string) => stateValues[id] ?? `{${id}}`);
+}

package/src/kinds/event.tsx

@@ -0,0 +1,70 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { nodeAccent } from "./node-tone";
+import { titlePlacement } from "./compact-title";
+
+export function EventNode({
+  node,
+  active,
+  progress,
+}: {
+  node: LaidNode;
+  active: boolean;
+  progress: number;
+}): JSX.Element {
+  const accent = nodeAccent(node, "var(--cdl-tone-success, #4ea36a)");
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
+  const 名前 = titlePlacement(node, { x: 26, y: 88, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const scale = active ? 0.78 + 0.22 * progress : 0.92;
+  const opacity = active ? 0.5 + 0.5 * progress : 0.65;
+  return (
+    <g
+      transform={`translate(${node.cx} ${node.cy}) scale(${scale}) translate(${-node.cx} ${-node.cy})`}
+      opacity={opacity}
+    >
+      <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}
+        />
+        {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}
+          style={{ fontFamily: "'JetBrains Mono', monospace" }}
+        >
+          {node.title}
+        </text>
+        {node.subtitle && (
+          <text
+            x={26}
+            y={128}
+            fontSize={21}
+            fill="var(--cdl-text-dim, #5a6270)"
+            style={{ fontFamily: "'JetBrains Mono', monospace" }}
+          >
+            {node.subtitle}
+          </text>
+        )}
+      </g>
+    </g>
+  );
+}

package/src/kinds/function.tsx

@@ -0,0 +1,53 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { nodeAccent } from "./node-tone";
+import { titlePlacement } from "./compact-title";
+
+export function FunctionNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const accent = nodeAccent(node, "var(--cdl-tone-teal, #2f8770)");
+  // tone 未指定時だけ active / 非 active で既定色が変わる (活性を青で示す従来の見せ方)。
+  // tone 指定時はどちらの状態でも指定色を使う。 他 4 component と揃える。
+  const stroke = nodeAccent(node, active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-tone-teal, #2f8770)");
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
+  const 名前 = titlePlacement(node, { x: 26, y: 86, size: 24 }, { 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={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={stroke}
+        strokeWidth={active ? 3 : 1.5}
+        strokeOpacity={active ? 1 : 0.5}
+      />
+      {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}
+        style={{ fontFamily: "'JetBrains Mono', monospace" }}
+      >
+        {node.title}
+      </text>
+      {node.subtitle && (
+        <text x={26} y={126} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">
+          {node.subtitle}
+        </text>
+      )}
+    </g>
+  );
+}