@cardenelabs/cdl 0.5.0

package/src/kinds/shape-software.tsx

@@ -0,0 +1,859 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+
+/**
+ * Shape-driven software 6 kinds (CAR-1111 Phase 2-B)。
+ *
+ * Phase 2-A (basement 8) と同じ「要素形状自体がパーツ」 方針で、
+ * ソフトウェア開発領域の視覚要素 = window / terminal / code-block /
+ * kanban-card / message-bubble / gear を SVG path で直接描画する。
+ *
+ * 各 kind は 1 SVG path (+ 補助 shape) + title + optional subtitle 構成、
+ * fill / stroke は theme (var(--cdl-*)) 追従、 active 時は accent stroke + width 拡張。
+ *
+ * ## 高さ 72 の箱で出ていた分
+ *
+ * 順序図の名札に使う高さ 72 の箱では、 6 種のうち 5 種が下か左右へ出ていた。
+ *
+ * | 種別 | 出ていた分 | 勘定していなかったもの |
+ * |---|---|---|
+ * | shape-code-block | 下 36.2 / 右 132 | 中に描く行の長さと本体の高さ |
+ * | shape-terminal | 下 29.3 / 右 13.2 | 同上 |
+ * | shape-gear | 下 10.8 | 歯先の下に付く名前 |
+ * | shape-window | 下 5.2 | 名前の説明の行と枠の線 |
+ * | shape-kanban-card | 下 3 / 右 3 | 右下へずらす影と枠の線 |
+ *
+ * 5 種とも、 箱の大きさから描いているのに中へ置く物の分を勘定していないことが原因だった。
+ * これは shape-region.tsx の原因 1 に当たる。
+ * 絵ごと縮める fitArt では名前の取り分だけ大きい箱でも絵が小さくなるため、 描ける範囲を先に狭める。
+ *
+ * 縮める倍率はすべて Math.min(1, 箱に入る量 / 自分の寸法) の形にしてある。
+ * 入る間は倍率が 1 なので、 大きい箱の見え方は変わらない。
+ *
+ * 上へのはみ出しは、 何ともぶつからず図の外にも出ないことを呼出側が実測済みなので残す。
+ * layout/footer-shape.ts の SHAPE_DRAW_UP_EXTENT は、 shape-gear の上への伸びを 96 として持つ。
+ * 歯車は名前だけを動かして絵に触れないため、 その表の値は変わらない。
+ */
+
+type ShapeProps = {
+  node: LaidNode;
+  active: boolean;
+};
+
+const commonFrame = (active: boolean) => ({
+  fill: "var(--cdl-node-fill, #ffffff)",
+  stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+  strokeWidth: active ? 3 : 1.5,
+});
+
+// 字が baseline から上へ張り出す量を見積もるため、 shape-region.tsx と同じ比を使う。
+const ASCENT = 0.72;
+// 字が baseline から下へ張り出す量を見積もるため、 shape-region.tsx と同じ比を使う。
+const DESCENT = 0.25;
+// SVG の字幅は描く前に測れず、 getBBox も描いた後にしか使えないため送り幅で見積もる。
+// 手元の等幅書体は 0.55-0.61 なので、 0.62 なら実寸を下回らず収めた行が実際にはみ出さない。
+const MONO_ADVANCE = 0.62;
+// 説明は名前が 16 の時に従来の 11 となり、 名前を縮めた時も同じ比で追随する。
+const LABEL_SUB_RATIO = 11 / 16;
+// 肩書は名前が 16 の時に従来の 12 となり、 名前を縮めた時も同じ比で追随する。
+const LABEL_EYE_RATIO = 12 / 16;
+// 肩書と名前の間は commonLabel の従来の 8 を保つ。
+const LABEL_EYE_GAP = 8;
+// 名前と説明の間は commonLabel の従来の 4 を保つ。
+const LABEL_SUB_GAP = 4;
+
+/** 塊が baseline から上下へ張り出す量を、 描く側の定数から渡すための型。 */
+type LabelSpan = { 上: number; 下: number };
+
+/** 一行だけが場所を取るので、 別の寸法表を持たず実際の字の比から張り出しを出す。 */
+const oneLineSpan = (size: number): LabelSpan => ({
+  上: size * ASCENT,
+  下: size * DESCENT,
+});
+
+/**
+ * commonLabel が実際に書く行だけを、 その行の比と間隔から塊の張り出しに含める。
+ * 描く側と別に寸法表を持つと、 絵を変えた時に片方だけ古くなるためここから算出する。
+ */
+const commonLabelSpan =
+  (node: LaidNode) =>
+  (size: number): LabelSpan => ({
+    上: node.eyebrow ? size + LABEL_EYE_GAP + size * LABEL_EYE_RATIO * ASCENT : size * ASCENT,
+    下: node.subtitle ? size + LABEL_SUB_GAP + size * LABEL_SUB_RATIO * DESCENT : size * DESCENT,
+  });
+
+/**
+ * 入る間は位置と大きさを変えず、 入らない時だけ字を 1 ずつ縮めて下端に収まるまで上げる。
+ * 塊が箱より高い時は、 下の隣接領域を汚さないよう下端に合わせ、 上へ出ることを許す。
+ * 張り出しは描く側の定数から渡し、 絵を変えた時に別の寸法表だけが古くならないようにする。
+ */
+function fitLabel(
+  範囲: { 天: number; 底: number },
+  基準y: number,
+  基準大: number,
+  張り出し: (size: number) => LabelSpan,
+  使える高さ = 範囲.底 - 範囲.天,
+): { y: number; size: number } {
+  let size = 基準大;
+  for (; size > 1; size--) {
+    const s = 張り出し(size);
+    if (s.上 + s.下 <= 使える高さ) break;
+  }
+  const s = 張り出し(size);
+  const 下限 = 範囲.底 - s.下;
+  const 上限 = 範囲.天 + s.上;
+  return {
+    y: 上限 > 下限 ? 下限 : Math.min(Math.max(基準y, 上限), 下限),
+    size,
+  };
+}
+
+const commonLabel = (node: LaidNode, x: number, y: number, size: number) => (
+  <>
+    {node.eyebrow && (
+      <text
+        x={x}
+        y={y - size - LABEL_EYE_GAP}
+        fontSize={size * LABEL_EYE_RATIO}
+        fontWeight={700}
+        letterSpacing={2}
+        textAnchor="middle"
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+      >
+        {node.eyebrow}
+      </text>
+    )}
+    <text
+      data-cdl-role="node-label"
+      x={x}
+      y={y}
+      fontSize={size}
+      fontWeight={700}
+      textAnchor="middle"
+      fill="var(--cdl-text, #1a1f2a)"
+    >
+      {node.title}
+    </text>
+    {node.subtitle && (
+      <text
+        x={x}
+        y={y + size + LABEL_SUB_GAP}
+        fontSize={size * LABEL_SUB_RATIO}
+        textAnchor="middle"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
+        {node.subtitle}
+      </text>
+    )}
+  </>
+);
+
+/** shape-window = OS ウィンドウ (title bar + traffic lights + body) */
+export function ShapeWindowNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  // 枠線は箱の外へ strokeWidth / 2 出るため、 描ける範囲から先に引く。
+  const 線 = frame.strokeWidth / 2;
+  const x = node.cx - node.w / 2 + 線;
+  const y = node.cy - node.h / 2 + 線;
+  const w = Math.max(0, node.w - 線 * 2);
+  const h = Math.max(0, node.h - 線 * 2);
+  // 低い箱でも名前を置く場所を残し、 十分な高さでは従来の 26 を保つ。
+  const barH = Math.min(26, h * 0.4);
+  // 信号は帯から出ない大きさにし、 帯が 26 なら従来の半径 5 を保つ。
+  const 灯 = Math.min(5, barH * 0.2);
+  // 信号の並びも灯と同じ割合で詰め、 従来の帯では等倍の位置を保つ。
+  const 灯間 = 灯 / 5;
+  // 名前が信号と重ならないよう、 信号帯の下端を使える範囲の天にする。
+  const 名前 = fitLabel(
+    { 天: y + barH, 底: y + h },
+    node.cy + barH / 2 + 6,
+    16,
+    commonLabelSpan(node),
+  );
+  return (
+    <g>
+      <rect data-cdl-role="node-body" x={x} y={y} width={w} height={h} rx={8} {...frame} />
+      <path
+        d={`M ${x} ${y + barH} L ${x + w} ${y + barH}`}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      <circle cx={x + 14 * 灯間} cy={y + barH / 2} r={灯} fill="#ff5f56" stroke="none" />
+      <circle cx={x + 30 * 灯間} cy={y + barH / 2} r={灯} fill="#ffbd2e" stroke="none" />
+      <circle cx={x + 46 * 灯間} cy={y + barH / 2} r={灯} fill="#27c93f" stroke="none" />
+      {commonLabel(node, node.cx, 名前.y, 名前.size)}
+    </g>
+  );
+}
+
+/** shape-terminal = 端末 (黒地 + macOS 風 top bar + prompt 3 行 + typing cursor) */
+export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  const x = node.cx - node.w / 2 + 線;
+  const y = node.cy - node.h / 2 + 線;
+  const w = Math.max(0, node.w - 線 * 2);
+  // 42 は従来どおり名前の行に空け、 低い箱では負の本体を作らないための取り分。
+  const bodyH = Math.max(0, node.h - 42 - 線 * 2);
+  const bodyFill = "#0f1419";
+  const barFill = "#1a1f2a";
+  const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
+  const 余白 = 16;
+  const 帯 = 28;
+  const 角 = 10;
+  const 先頭 = 26;
+  const 行間 = 22;
+  const カーソル = { 左: 30, 幅: 9, 高: 14, 上: 11, 下: 3 };
+  const 行 = [
+    [
+      { 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" },
+      { 左: 30, 字: 12.5, 色: "#e6edf3", 文: "pnpm build" },
+    ],
+    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: "→ 12 chunks in 1.8s" }],
+    [{ 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" }],
+  ];
+  // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
+  const 自然幅 = Math.max(...行.flat().map((t) => t.左 + t.文.length * MONO_ADVANCE * t.字)) + 余白;
+  // 最終行とカーソルまで入る自然高を使い、 縦にも同じ倍率を適用できるようにする。
+  const 自然高 = 帯 + 先頭 + 行間 * (行.length - 1) + Math.max(カーソル.下, 12.5 * DESCENT);
+  // 縦横を同じ倍率で縮めて比を保ち、 幅 300・高さ 200 では 1 のまま従来値を保つ。
+  const 倍 = Math.min(1, w / 自然幅, bodyH / 自然高);
+  const barH = 帯 * 倍;
+  const 丸 = 角 * 倍;
+  const 名前 = fitLabel({ 天: y, 底: y + node.h - 線 * 2 }, y + bodyH + 22, 15, oneLineSpan);
+  return (
+    <g>
+      <rect
+        data-cdl-role="node-body"
+        x={x}
+        y={y}
+        width={w}
+        height={bodyH}
+        rx={角}
+        fill={bodyFill}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* 本体が残らない箱では、 幅 0 や高さ 0 の中身を並べない。 */}
+      {倍 > 0 && (
+        <>
+          <path
+            d={`M ${x} ${y + barH + 丸} L ${x} ${y + 丸} Q ${x} ${y}, ${x + 丸} ${y} L ${x + w - 丸} ${y} Q ${x + w} ${y}, ${x + w} ${y + 丸} L ${x + w} ${y + barH + 丸} Z`}
+            fill={barFill}
+            stroke="none"
+          />
+          <path d={`M ${x} ${y + barH} L ${x + w} ${y + barH}`} stroke="#2a3140" strokeWidth={1} />
+          <circle cx={x + 16 * 倍} cy={y + barH / 2} r={5.5 * 倍} fill="#ff5f56" stroke="none" />
+          <circle cx={x + 34 * 倍} cy={y + barH / 2} r={5.5 * 倍} fill="#ffbd2e" stroke="none" />
+          <circle cx={x + 52 * 倍} cy={y + barH / 2} r={5.5 * 倍} fill="#27c93f" stroke="none" />
+          <text
+            x={x + w / 2}
+            y={y + barH / 2 + 4 * 倍}
+            fontSize={11 * 倍}
+            fontFamily={lineFont}
+            textAnchor="middle"
+            fill="#7a8290"
+          >
+            {"— zsh —"}
+          </text>
+          {行.flatMap((texts, i) => {
+            const baseline = y + barH + (先頭 + 行間 * i) * 倍;
+            return texts.map((t) => (
+              <text
+                key={`${i}-${t.左}`}
+                x={x + t.左 * 倍}
+                y={baseline}
+                fontSize={t.字 * 倍}
+                fontFamily={lineFont}
+                fill={t.色}
+              >
+                {t.文}
+              </text>
+            ));
+          })}
+          <rect
+            x={x + カーソル.左 * 倍}
+            y={y + barH + (先頭 + 行間 * (行.length - 1) - カーソル.上) * 倍}
+            width={カーソル.幅 * 倍}
+            height={カーソル.高 * 倍}
+            fill="#e6edf3"
+            opacity={0.85}
+          >
+            <animate
+              attributeName="opacity"
+              values="0.85;0;0.85"
+              dur="1s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={node.cx}
+        y={名前.y}
+        fontSize={名前.size}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+      {node.eyebrow && (
+        <text
+          x={node.cx}
+          y={y - 8}
+          fontSize={12}
+          fontWeight={700}
+          letterSpacing={2}
+          textAnchor="middle"
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+        >
+          {node.eyebrow}
+        </text>
+      )}
+    </g>
+  );
+}
+
+/** shape-code-block = code editor (tab + gutter + 4 syntax-colored stub lines) */
+export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  const x = node.cx - node.w / 2 + 線;
+  const y = node.cy - node.h / 2 + 線;
+  const w = Math.max(0, node.w - 線 * 2);
+  // 42 は従来どおり名前の行に空け、 低い箱では負の本体を作らないための取り分。
+  const bodyH = Math.max(0, node.h - 42 - 線 * 2);
+  const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
+  const タブ幅 = 100;
+  const タブ高 = 24;
+  const 角 = 10;
+  const 溝 = 32;
+  const 字下げ = 12;
+  const 余白 = 12;
+  const 行頭 = 22;
+  const 行間 = 20;
+  const 太さ = 9;
+  const 隙間 = 6;
+  const 持ち上げ = 8;
+  const lines = [
+    [
+      { c: "#c678dd", w: 40 },
+      { c: "#61afef", w: 60 },
+      { c: "#e6edf3", w: 20 },
+      { c: "#98c379", w: 90 },
+    ],
+    [
+      { c: "#e6edf3", w: 24 },
+      { c: "#61afef", w: 55 },
+      { c: "#d19a66", w: 30 },
+    ],
+    [
+      { c: "#c678dd", w: 40 },
+      { c: "#e6edf3", w: 20 },
+      { c: "#98c379", w: 120 },
+    ],
+    [
+      { c: "#e5c07b", w: 70 },
+      { c: "#e6edf3", w: 40 },
+    ],
+  ];
+  const 最長 = Math.max(
+    ...lines.map(
+      (tokens) => tokens.reduce((sum, token) => sum + token.w, 0) + 隙間 * (tokens.length - 1),
+    ),
+  );
+  // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
+  const 自然幅 = 溝 + 字下げ + 最長 + 余白;
+  // 最終行の token と行番号まで入る自然高を使い、 縦にも同じ倍率を適用できるようにする。
+  const 自然高 =
+    タブ高 + 行頭 + 行間 * (lines.length - 1) + Math.max(太さ - 持ち上げ, 10.5 * DESCENT);
+  // 右 132 のはみ出しは、 中の行を本体へ縦横同率で収めて直す。
+  // fitArt で絵ごと縮めると tab の字と行番号が読めなくなるため使わない。
+  // 幅 300・高さ 200 では倍率が 1 のままなので、 従来値を保つ。
+  const 倍 = Math.min(1, w / 自然幅, bodyH / 自然高);
+  const tabW = タブ幅 * 倍;
+  const tabH = タブ高 * 倍;
+  const 丸 = 角 * 倍;
+  const gutterW = 溝 * 倍;
+  const codeY0 = y + tabH + 行頭 * 倍;
+  const lineH = 行間 * 倍;
+  const 名前 = fitLabel({ 天: y, 底: y + node.h - 線 * 2 }, y + bodyH + 22, 15, oneLineSpan);
+  return (
+    <g>
+      <rect
+        data-cdl-role="node-body"
+        x={x}
+        y={y}
+        width={w}
+        height={bodyH}
+        rx={角}
+        fill="#0f1419"
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* 本体が残らない箱では、 幅 0 や高さ 0 の中身を並べない。 */}
+      {倍 > 0 && (
+        <>
+          <path
+            d={`M ${x} ${y + tabH} L ${x} ${y + 丸} Q ${x} ${y}, ${x + 丸} ${y} L ${x + tabW - 丸} ${y} Q ${x + tabW} ${y}, ${x + tabW} ${y + 丸} L ${x + tabW} ${y + tabH} Z`}
+            fill="#1a1f2a"
+            stroke="none"
+          />
+          <path d={`M ${x} ${y + tabH} L ${x + w} ${y + tabH}`} stroke="#2a3140" strokeWidth={1} />
+          <text
+            x={x + tabW / 2}
+            y={y + tabH / 2 + 4 * 倍}
+            fontSize={11 * 倍}
+            fontFamily={lineFont}
+            textAnchor="middle"
+            fill="#e6edf3"
+          >
+            utils.ts
+          </text>
+          <circle cx={x + tabW - 丸} cy={y + tabH / 2} r={3 * 倍} fill="#7cd88f" stroke="none" />
+          <path
+            d={`M ${x + gutterW} ${y + tabH} L ${x + gutterW} ${y + bodyH}`}
+            stroke="#2a3140"
+            strokeWidth={1}
+          />
+          {lines.map((toks, i) => {
+            let cursor = x + gutterW + 字下げ * 倍;
+            return (
+              <g key={i}>
+                <text
+                  x={x + gutterW - 持ち上げ * 倍}
+                  y={codeY0 + i * lineH}
+                  fontSize={10.5 * 倍}
+                  fontFamily={lineFont}
+                  textAnchor="end"
+                  fill="#4a5266"
+                >
+                  {i + 1}
+                </text>
+                {toks.map((t, j) => {
+                  const rect = (
+                    <rect
+                      key={j}
+                      x={cursor}
+                      y={codeY0 + i * lineH - 持ち上げ * 倍}
+                      width={t.w * 倍}
+                      height={太さ * 倍}
+                      rx={2 * 倍}
+                      fill={t.c}
+                      fillOpacity={0.85}
+                      stroke="none"
+                    />
+                  );
+                  cursor += (t.w + 隙間) * 倍;
+                  return rect;
+                })}
+              </g>
+            );
+          })}
+        </>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={node.cx}
+        y={名前.y}
+        fontSize={名前.size}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+      {node.eyebrow && (
+        <text
+          x={node.cx}
+          y={y - 8}
+          fontSize={12}
+          fontWeight={700}
+          letterSpacing={2}
+          textAnchor="middle"
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+        >
+          {node.eyebrow}
+        </text>
+      )}
+    </g>
+  );
+}
+
+/** shape-kanban-card = kanban ticket (top color bar + 3 stub line) */
+export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  // 影は札を右下へずらして重ねるため、 ずらす分と枠線を札の寸法から先に引く。
+  const 影 = 3;
+  const x = node.cx - node.w / 2 + 線;
+  const y = node.cy - node.h / 2 + 線;
+  const w = Math.max(0, node.w - 線 * 2 - 影);
+  const h = Math.max(0, node.h - 線 * 2 - 影);
+  const 帯間余白 = 4;
+  const 左右余白 = 14;
+  const 上段隙間 = 8;
+  const 優先帯高 = 10;
+  const ID文 = "CAR-1111";
+  const ID基準 = 30;
+  const ID字 = 11;
+  const ID字間 = 1;
+  const PILL上 = 20;
+  const PILL幅 = 54;
+  const PILL高 = 16;
+  const PILL字 = 9;
+  const FOOTER下 = 22;
+  const AVATAR中心Y = 4;
+  const AVATAR半径 = 9;
+  const AVATAR枠 = 1.5;
+  const 名前字 = 17;
+  const 説明基準比 = 20 / 17;
+  const 説明字比 = 12 / 17;
+  // 各帯は実際に描く定数から出し、 配置と収容寸法が別々に古くならないようにする。
+  const 上帯 = PILL上 + PILL高 + 帯間余白;
+  const 下帯 = FOOTER下 - AVATAR中心Y + AVATAR半径 + AVATAR枠 / 2 + 帯間余白;
+  const 中帯 = 名前字 * ASCENT + 名前字 * 説明基準比 + 名前字 * 説明字比 * DESCENT;
+  const 自然高 = 上帯 + 中帯 + 下帯;
+  const ID幅 = ID文.length * MONO_ADVANCE * ID字 + ID字間 * ID文.length;
+  const 自然幅 = 左右余白 + ID幅 + 上段隙間 + PILL幅 + 左右余白;
+  // 札の中身だけを縦横同率で縮め、 入る札では 1 のまま従来の大きさを保つ。
+  const 倍 = Math.min(1, w / 自然幅, h / 自然高);
+  const priorityBarH = 優先帯高 * 倍;
+  const priorityBarR = Math.min(10, priorityBarH);
+  const idY = y + ID基準 * 倍;
+  const pillY = y + PILL上 * 倍;
+  const footY = y + h - FOOTER下 * 倍;
+  // 名前 17 と説明 12 の baseline 間隔 20 を比で持ち、 名前を縮めた時に説明も追随させる。
+  // 中帯を渡すのは、 名前を上下の帯と分ける意図を残すため。
+  // ただし今の倍率では札の中心も名前の大きさも中帯に収まり、 札全体へ広げても描く値が変わらないため変異試験では落ちない。
+  // 倍率の作りを変えた時に効き始める防御として残す。
+  const 名前 = fitLabel(
+    { 天: y + 上帯 * 倍, 底: y + h - 下帯 * 倍 },
+    y + h / 2 - 2 * 倍,
+    名前字 * 倍,
+    (size) => ({
+      上: size * ASCENT,
+      下: size * 説明基準比 + size * 説明字比 * DESCENT,
+    }),
+  );
+  return (
+    <g>
+      {/* shadow */}
+      <rect
+        x={x + 影}
+        y={y + 影}
+        width={w}
+        height={h}
+        rx={10}
+        fill={frame.stroke}
+        opacity={0.18}
+        stroke="none"
+      />
+      <rect data-cdl-role="node-body" x={x} y={y} width={w} height={h} rx={10} {...frame} />
+      {/* 本体が残らない札では、 中身の各要素を 0 の大きさで重ねない。 */}
+      {倍 > 0 && (
+        <>
+          {/* priority color bar top */}
+          <path
+            d={`M ${x + priorityBarR} ${y} L ${x + w - priorityBarR} ${y} A ${priorityBarR} ${priorityBarR} 0 0 1 ${x + w} ${y + priorityBarR} L ${x + w} ${y + priorityBarH} L ${x} ${y + priorityBarH} L ${x} ${y + priorityBarR} A ${priorityBarR} ${priorityBarR} 0 0 1 ${x + priorityBarR} ${y} Z`}
+            fill="var(--cdl-tone-accent, #2d6a8f)"
+            stroke="none"
+          />
+          {/* ID + status pill 上段 */}
+          <text
+            x={x + 左右余白 * 倍}
+            y={idY}
+            fontSize={ID字 * 倍}
+            fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
+            fontWeight={700}
+            letterSpacing={ID字間 * 倍}
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            {ID文}
+          </text>
+          <rect
+            x={x + w - (左右余白 + PILL幅) * 倍}
+            y={pillY}
+            width={PILL幅 * 倍}
+            height={PILL高 * 倍}
+            rx={(PILL高 / 2) * 倍}
+            fill="#e5c07b"
+            opacity={0.9}
+            stroke="var(--cdl-tone-accent, #2d6a8f)"
+            strokeWidth={1 * 倍}
+          />
+          <text
+            x={x + w - (左右余白 + PILL幅 / 2) * 倍}
+            y={pillY + 12 * 倍}
+            fontSize={PILL字 * 倍}
+            fontWeight={700}
+            letterSpacing={1 * 倍}
+            textAnchor="middle"
+            fill="#5a4a1a"
+            fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
+          >
+            IN PROG
+          </text>
+          {/* タスク名 = title (中央上、 大きく太字) */}
+          <text
+            data-cdl-role="node-label"
+            x={x + w / 2}
+            y={名前.y}
+            fontSize={名前.size}
+            fontWeight={700}
+            textAnchor="middle"
+            fill="var(--cdl-text, #1a1f2a)"
+          >
+            {node.title}
+          </text>
+          {/* タスク説明 (中央下、 小さめ dim) */}
+          <text
+            x={x + w / 2}
+            y={名前.y + 名前.size * 説明基準比}
+            fontSize={名前.size * 説明字比}
+            textAnchor="middle"
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            shape-driven kind 実装
+          </text>
+          {/* footer = 2 avatars 左 + due date 右 */}
+          <g transform={`translate(${x + 左右余白 * 倍}, ${footY})`}>
+            <circle
+              cx={9 * 倍}
+              cy={AVATAR中心Y * 倍}
+              r={AVATAR半径 * 倍}
+              fill="var(--cdl-tone-accent, #2d6a8f)"
+              stroke="var(--cdl-node-fill, #ffffff)"
+              strokeWidth={AVATAR枠 * 倍}
+            />
+            <text
+              x={9 * 倍}
+              y={8 * 倍}
+              fontSize={10 * 倍}
+              fontWeight={700}
+              textAnchor="middle"
+              fill="#ffffff"
+              fontFamily="Georgia, serif"
+            >
+              A
+            </text>
+            <circle
+              cx={23 * 倍}
+              cy={AVATAR中心Y * 倍}
+              r={AVATAR半径 * 倍}
+              fill="#c678dd"
+              stroke="var(--cdl-node-fill, #ffffff)"
+              strokeWidth={AVATAR枠 * 倍}
+            />
+            <text
+              x={23 * 倍}
+              y={8 * 倍}
+              fontSize={10 * 倍}
+              fontWeight={700}
+              textAnchor="middle"
+              fill="#ffffff"
+              fontFamily="Georgia, serif"
+            >
+              B
+            </text>
+          </g>
+          <text
+            x={x + w - 左右余白 * 倍}
+            y={footY + 8 * 倍}
+            fontSize={11 * 倍}
+            fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
+            fontWeight={600}
+            textAnchor="end"
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            Jul 10
+          </text>
+        </>
+      )}
+    </g>
+  );
+}
+
+/** shape-message-bubble = チャット吹き出し (rounded rect + tail) */
+export function ShapeMessageBubbleNode({ node, active }: ShapeProps): JSX.Element {
+  // **枠線の半分だけ内へ寄せる**。 線は中央揃えで描かれるので、 輪郭を箱の縁ちょうどに置くと
+  // 半分 (`active` で 1.5) が箱の外に残る。 幾何としては収まっていても、 見えている墨は出る
+  // (実測 = 下と左右へ 0.8)。 一番太くなる `active` の側で寄せて、 どちらの状態でも収める
+  const 枠線の半分 = 3 / 2;
+  const x = node.cx - node.w / 2 + 枠線の半分;
+  const y = node.cy - node.h / 2 + 枠線の半分;
+  const w = node.w - 枠線の半分 * 2;
+  const frame = commonFrame(active);
+  const tailW = 16;
+  const tailH = 14;
+  const bodyH = node.h - 枠線の半分 * 2 - tailH;
+  const path = [
+    `M ${x + 12} ${y}`,
+    `L ${x + w - 12} ${y}`,
+    `Q ${x + w} ${y}, ${x + w} ${y + 12}`,
+    `L ${x + w} ${y + bodyH - 12}`,
+    `Q ${x + w} ${y + bodyH}, ${x + w - 12} ${y + bodyH}`,
+    `L ${x + 24 + tailW} ${y + bodyH}`,
+    `L ${x + 24} ${y + bodyH + tailH}`,
+    `L ${x + 24} ${y + bodyH}`,
+    `L ${x + 12} ${y + bodyH}`,
+    `Q ${x} ${y + bodyH}, ${x} ${y + bodyH - 12}`,
+    `L ${x} ${y + 12}`,
+    `Q ${x} ${y}, ${x + 12} ${y}`,
+    "Z",
+  ].join(" ");
+  return (
+    <g>
+      <path data-cdl-role="node-body" d={path} {...frame} strokeLinejoin="round" />
+      {commonLabel(node, node.cx, y + bodyH / 2 + 6, 16)}
+    </g>
+  );
+}
+
+/** shape-gear = 単一大歯車 (12 台形 teeth をひとつの polygon で描画、 spoke + hub + bolt) */
+export function ShapeGearNode({ node, active }: ShapeProps): JSX.Element {
+  const cx = node.cx;
+  const cy = node.cy - 30;
+  const frame = commonFrame(active);
+  const bodyR = Math.min(node.w, node.h) * 0.32;
+  const tipR = bodyR + bodyR * 0.24;
+  const teeth = 12;
+  // 各 tooth = 全角度 (2π / teeth) の内、
+  // 中央 40% を tip (先端外側)、 両端 30% を root (根元 body 円周)、
+  // その間の傾斜 15% ずつが台形の斜辺 (root → tip)
+  const anglePerTooth = (Math.PI * 2) / teeth;
+  const halfBaseWidth = anglePerTooth * 0.35; // root 幅の半角 = 全体の 70%
+  const halfTipWidth = anglePerTooth * 0.2; // tip 幅の半角 = 全体の 40%
+  // path 開始点 (0 度 = 右) から時計回りに 12 tooth の base_R → tip_R → tip_L → base_L → next base_R … を chain
+  const pts: string[] = [];
+  for (let i = 0; i < teeth; i++) {
+    const center = i * anglePerTooth;
+    const a1 = center - halfBaseWidth; // 前 tooth の base_L (= 現 tooth の base_R)
+    const a2 = center - halfTipWidth; // tip_R
+    const a3 = center + halfTipWidth; // tip_L
+    const a4 = center + halfBaseWidth; // base_L
+    pts.push(`${cx + Math.cos(a1) * bodyR},${cy + Math.sin(a1) * bodyR}`);
+    pts.push(`${cx + Math.cos(a2) * tipR},${cy + Math.sin(a2) * tipR}`);
+    pts.push(`${cx + Math.cos(a3) * tipR},${cy + Math.sin(a3) * tipR}`);
+    pts.push(`${cx + Math.cos(a4) * bodyR},${cy + Math.sin(a4) * bodyR}`);
+  }
+  // 名前は歯先から 28 下に付くだけで箱の下端を見ていなかったため、 名前だけを下端へ収める。
+  // SHAPE_DRAW_UP_EXTENT が絵の上への伸びを持つので、 歯車には触らない。
+  // 使える高さを node.h / 2 にして残り半分を歯車へ空け、 低い箱で名前が歯車を覆わないようにする。
+  const 名前 = fitLabel(
+    { 天: node.cy - node.h / 2, 底: node.cy + node.h / 2 },
+    cy + tipR + 28,
+    18,
+    (size) => ({
+      上: size * ASCENT,
+      下: node.subtitle ? size + size * (13 / 18) * DESCENT : size * DESCENT,
+    }),
+    node.h / 2,
+  );
+  return (
+    <g>
+      {/* shadow (歯先より 3px 内側、 offset なし = 同心円) */}
+      {/* 小さい箱でも負の r は SVG の不正値になるため 0 で止め、 通常の大きさでは値を変えない。 */}
+      <circle
+        cx={cx}
+        cy={cy}
+        r={Math.max(0, tipR - 3)}
+        fill={frame.stroke}
+        opacity={0.25}
+        stroke="none"
+      />
+      {/* rotating gear group */}
+      <g>
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from={`0 ${cx} ${cy}`}
+          to={`360 ${cx} ${cy}`}
+          dur="20s"
+          repeatCount="indefinite"
+        />
+        {/* gear 外形 = 台形歯を含む一体 polygon */}
+        <polygon
+          data-cdl-role="node-body"
+          points={pts.join(" ")}
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+          stroke={frame.stroke}
+          strokeWidth={frame.strokeWidth}
+          strokeLinejoin="round"
+        />
+        {/* 4 spokes (十字) */}
+        {[0, 90, 180, 270].map((deg) => (
+          <rect
+            key={deg}
+            x={cx - 9}
+            y={cy - bodyR * 0.68}
+            width={18}
+            height={bodyR * 0.58}
+            rx={3}
+            fill="var(--cdl-node-fill, #ffffff)"
+            stroke="#1a4a68"
+            strokeWidth={1.5}
+            transform={`rotate(${deg} ${cx} ${cy})`}
+          />
+        ))}
+        {/* hub */}
+        <circle
+          cx={cx}
+          cy={cy}
+          r={bodyR * 0.32}
+          fill="var(--cdl-node-fill, #ffffff)"
+          stroke="#1a4a68"
+          strokeWidth={2}
+        />
+        <circle
+          cx={cx}
+          cy={cy}
+          r={bodyR * 0.2}
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+          stroke="#1a4a68"
+          strokeWidth={1.5}
+        />
+        {/* center hole (bolt) */}
+        <circle cx={cx} cy={cy} r={5} fill="#1a1f2a" stroke="none" />
+      </g>
+      {/* label 下部 */}
+      {node.eyebrow && (
+        <text
+          x={cx}
+          y={cy - tipR - 20}
+          fontSize={13}
+          fontWeight={700}
+          letterSpacing={2}
+          textAnchor="middle"
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+        >
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={cx}
+        y={名前.y}
+        fontSize={名前.size}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+      {node.subtitle && (
+        <text
+          x={cx}
+          y={名前.y + 名前.size}
+          fontSize={名前.size * (13 / 18)}
+          textAnchor="middle"
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {node.subtitle}
+        </text>
+      )}
+    </g>
+  );
+}