@cardenelabs/cdl 0.5.0

package/src/kinds/shape-basement.tsx

@@ -0,0 +1,683 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import {
+  ASCENT,
+  DESCENT,
+  FRAME_HALF,
+  SHADOW_GAP,
+  bodyBand,
+  fitArt,
+  fitLabel,
+  labelPlan,
+  shapeRegion,
+  textWidth,
+  type ArtExtent,
+} from "./shape-region";
+
+/**
+ * Shape-driven basement 8 kinds (CAR-1099、 CAR-1130 people ベース統一版)。
+ *
+ * 共通 base = drop shadow ellipse + thick outline (active=3 / idle=1.5) + rounded corner。
+ * person は people の personBase() (Material Person 型) を複製、 badge なし generic actor 表現。
+ * 他 7 shape は幾何形状として品格 up (drop shadow + refined outline)。
+ *
+ * ## 絵を箱に収める作り (#433)
+ *
+ * 影は本体の下端から `SHADOW_GAP` 下がった中心に `ry` で描くため、 **下へ出る量は箱の高さに
+ * 依らない**。 高さ 72 の名札で実測すると 7 種すべてが下へ出ていた (`shape-person` は 176.2、
+ * `shape-stack` は 36、 `shape-file` は 18)。
+ *
+ * 直し方は 2 系統に分かれる。
+ *
+ * | 系統 | 種別 | 作り |
+ * |---|---|---|
+ * | 帯に描く | file / folder / cloud / cylinder / hexagon / diamond / stack | `bodyBand` で影と枠を先に引き、 残った帯いっぱいに描く。 固定寸法 (折れ角 / tab / 蓋の膨らみ / ずらし幅) は帯に比例させて上限で止める |
+ * | 比で縮める | person | 絵が固定寸法の人型なので `shapeRegion` + `fitArt` + `labelPlan` (`shape-people` と同じ形) |
+ *
+ * 帯に描く系は **箱の縁と絵の縁の隙間が箱の高さに依らない定数** になる。 比で縮める直し方を
+ * 誤ってこちらに使うと定数性が崩れるので、 検査がそれを捕まえる。
+ */
+
+type ShapeProps = {
+  node: LaidNode;
+  active: boolean;
+};
+
+// basement は shape 全体が body なので、 純白ではなく accent 青系薄 tint (#dde8f0) で
+// 他 shape (server-rack / smart-contract 等 = accent #2d6a8f と統一) と視覚的統一を取る。
+const BASEMENT_FILL = "#dde8f0";
+const commonFrame = (active: boolean) => ({
+  fill: BASEMENT_FILL,
+  stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+  strokeWidth: active ? 3 : 1.5,
+});
+
+/** 影の楕円の縦半径。 帯が下に空ける量と `dropShadow` の既定を 1 つの値で持つ。 */
+const SHADOW_RY = 4;
+
+/** 円柱だけ影を薄くする (底が丸く、 濃いと沈んで見える)。 */
+const CYLINDER_SHADOW_RY = 3;
+
+/** 名前の塊の書式。 描く側 (`commonLabel`) と測る側 (`labelBlock`) が同じ値を使う。 */
+const EYEBROW_SIZE = 12;
+const EYEBROW_GAP = 8;
+const EYEBROW_TRACKING = 2;
+const SUB_SIZE = 11;
+const SUB_GAP = 4;
+
+/** 名前を置いてよい帯。 種別ごとに `bodyBand` より狭い形を渡す (紙の上 / 前面の板の中 等)。 */
+type LabelBand = { x: number; y: number; w: number; h: number };
+
+/**
+ * 名前の塊を帯に収めた形。 `commonLabel` が描き、 装飾線を引く側が「線を引かない場所」 に使う。
+ *
+ * 塊の張り出しは baseline からの上下 2 つと、 一番広い行の横幅で表す。 3 つとも倍率に比例
+ * するので、 `fitLabel` が返す倍率を全行の大きさと行間と字送りに一様に掛ければ塊ごと帯に入る。
+ */
+function labelBlock(
+  node: LaidNode,
+  pos: { x: number; y: number },
+  size: number,
+  band: LabelBand,
+): { k: number; x: number; baseline: number; 上端: number; 下端: number } {
+  const 上 = node.eyebrow ? size + EYEBROW_GAP + EYEBROW_SIZE * ASCENT : size * ASCENT;
+  const 下 = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT : size * DESCENT;
+  // 3 行のうち一番広い行が横の制約になる
+  const 幅 = Math.max(
+    textWidth(node.title ?? "", size),
+    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING) : 0,
+    node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0,
+  );
+  const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos);
+  return { k, x, baseline, 上端: baseline - 上 * k, 下端: baseline + 下 * k };
+}
+
+function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number, band: LabelBand) {
+  const 塊 = labelBlock(node, pos, size, band);
+  const k = 塊.k;
+  const x = 塊.x;
+  return (
+    <>
+      {node.eyebrow && (
+        <text
+          x={x}
+          y={塊.baseline - (size + EYEBROW_GAP) * k}
+          fontSize={EYEBROW_SIZE * k}
+          fontWeight={700}
+          letterSpacing={EYEBROW_TRACKING * k}
+          textAnchor="middle"
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+        >
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={x}
+        y={塊.baseline}
+        fontSize={size * k}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+      {node.subtitle && (
+        <text
+          x={x}
+          y={塊.baseline + (size + SUB_GAP) * k}
+          fontSize={SUB_SIZE * k}
+          textAnchor="middle"
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {node.subtitle}
+        </text>
+      )}
+    </>
+  );
+}
+
+/** drop shadow (shape 下部の薄い ellipse、 立体感付与) */
+function dropShadow(cx: number, bottomY: number, rx: number, ry = SHADOW_RY) {
+  return (
+    <ellipse cx={cx} cy={bottomY + SHADOW_GAP} rx={rx} ry={ry} fill="#000" opacity={0.08} stroke="none" />
+  );
+}
+
+/** 折れ角の上限と、 紙の短辺に対する割合。 */
+const FOLD_MAX = 26;
+const FOLD_RATIO = 0.18;
+
+/** 書類線の間隔の上限と、 紙の高さに対する割合。 */
+const RULE_GAP_MAX = 20;
+const RULE_GAP_RATIO = 0.1;
+
+/** 書類線の左右余白の上限と、 紙の幅に対する割合。 1 本ごとに短くする割合も紙に合わせる。 */
+const RULE_PAD_MAX = 20;
+const RULE_PAD_RATIO = 0.14;
+const RULE_SHRINK_RATIO = 0.055;
+
+/** shape-file = 縦長 A4 型 file (right-top folded corner、 body に fold 内側 corner 統合) + drop shadow + text lines */
+export function ShapeFileNode({ node, active }: ShapeProps): JSX.Element {
+  const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
+  const 紙h = 帯.h;
+  const 紙w = Math.min(帯.w, 紙h * 0.72);
+  const x = 帯.cx - 紙w / 2;
+  const y = 帯.y;
+  // 折れ角は紙に比例させる。 固定の 26 は高さ 72 の紙 (幅 52) の半分を占めて絵が読めない
+  const fold = Math.min(FOLD_MAX, 紙w * FOLD_RATIO, 紙h * FOLD_RATIO);
+  const frame = commonFrame(active);
+  // 本体 path = 右上折れ角の内側 L 字 corner (紙w-fold, y+fold) を含めることで body stroke と fold triangle stroke が
+  // corner 座標を共有 = T 字 gap 解消。 Path chain = 左上 → 折れ角上端 → 折れ角内側 (下がって右) → body 右下 → 左下 → close。
+  const bodyPath = [
+    `M ${x} ${y}`,
+    `L ${x + 紙w - fold} ${y}`,
+    `L ${x + 紙w - fold} ${y + fold}`,
+    `L ${x + 紙w} ${y + fold}`,
+    `L ${x + 紙w} ${y + 紙h}`,
+    `L ${x} ${y + 紙h}`,
+    "Z",
+  ].join(" ");
+  // 折れ三角 fill = 背景色で切れ込み表現 (stroke なし、 stroke は bodyPath 内で一体化)
+  const foldTriangle = `M ${x + 紙w - fold} ${y} L ${x + 紙w} ${y + fold} L ${x + 紙w - fold} ${y + fold} Z`;
+  // 名前は紙の上に置く。 帯より紙が狭い高さがあるので、 帯をそのまま渡すと名前が紙から出る
+  const 名前帯 = { x, y, w: 紙w, h: 紙h };
+  const 名前位置 = { x: 帯.cx, y: node.cy + node.h * 0.12 };
+  // 名前の塊を先に測る。 3 本目が紙頭から固定 90 の位置に出ていたので、 塊に食い込む線は引かない
+  const 名前 = labelBlock(node, 名前位置, 16, 名前帯);
+  const 間隔 = Math.min(RULE_GAP_MAX, 紙h * RULE_GAP_RATIO);
+  const 線余白 = Math.min(RULE_PAD_MAX, 紙w * RULE_PAD_RATIO);
+  const textLines = [0, 1, 2]
+    .map((i) => ({ i, ly: y + fold + 間隔 * (i + 1) }))
+    .filter(({ ly }) => ly < 名前.上端);
+  return (
+    <g>
+      {/* 影の基準は紙の下端。 帯の下端を直に書くと紙を動かした時に影だけ取り残される */}
+      {dropShadow(帯.cx, y + 紙h, 紙w * 0.42)}
+      <path d={bodyPath} data-cdl-role="node-body" {...frame} strokeLinejoin="round" />
+      <path
+        d={foldTriangle}
+        fill="var(--cdl-canvas-bg, #f5f7fa)"
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+        strokeLinejoin="round"
+      />
+      {/* text lines (書類感、 title 上部に配置) */}
+      {textLines.map(({ i, ly }) => {
+        const lineW = Math.max(0, 紙w - 線余白 * 2 - i * 紙w * RULE_SHRINK_RATIO);
+        return (
+          <line
+            key={i}
+            x1={x + 線余白}
+            y1={ly}
+            x2={x + 線余白 + lineW}
+            y2={ly}
+            stroke="var(--cdl-divider, #d4d4d8)"
+            strokeWidth={1}
+          />
+        );
+      })}
+      {/* label = 中央 (text lines の下、 title 大、 subtitle 小、 A4 下半分) */}
+      {commonLabel(node, 名前位置, 16, 名前帯)}
+    </g>
+  );
+}
+
+/** tab の高さの上限と、 帯に対する割合。 */
+const TAB_H_MAX = 22;
+const TAB_H_RATIO = 0.3;
+
+/** shape-folder = 左上 tab を body 左端に完全張り付け (tab 左 0、 tab 右 35%、 slope 42%) + drop shadow */
+export function ShapeFolderNode({ node, active }: ShapeProps): JSX.Element {
+  const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
+  const x = 帯.x;
+  const y = 帯.y;
+  // tab は帯に比例させる。 固定の 22 は高さ 40 の箱で本体をほぼ埋める
+  const tabH = Math.min(TAB_H_MAX, 帯.h * TAB_H_RATIO);
+  // tab は body 左端と面一 (x = 0)、 tab 右端が slope で body 上端に降りる
+  const tabTopR = 帯.w * 0.35;
+  const tabBottomR = 帯.w * 0.42;
+  const frame = commonFrame(active);
+  // Path chain = body 左中段 (x, y+tabH) → tab 左上 (x, y) → tab 右上 (tabTopR, y) → slope 下 (tabBottomR, y+tabH) → body 右上 (w, y+tabH) → 右下 → 左下 → close
+  const bodyPath = [
+    `M ${x} ${y + tabH}`,
+    `L ${x} ${y}`,
+    `L ${x + tabTopR} ${y}`,
+    `L ${x + tabBottomR} ${y + tabH}`,
+    `L ${帯.右} ${y + tabH}`,
+    `L ${帯.右} ${帯.底}`,
+    `L ${x} ${帯.底}`,
+    "Z",
+  ].join(" ");
+  // 境界線も帯に比例させる。 固定の 8 と 6 は狭い箱で本体の外へ出る
+  const 境界y = y + tabH + Math.min(8, (帯.h - tabH) * 0.2);
+  const 端 = Math.min(6, 帯.w * 0.1);
+  const 名前位置 = { x: 帯.cx, y: node.cy + 18 };
+  const 名前 = labelBlock(node, 名前位置, 16, 帯);
+  return (
+    <g>
+      {dropShadow(帯.cx, 帯.底, 帯.w * 0.44)}
+      <path data-cdl-role="node-body" d={bodyPath} {...frame} strokeLinejoin="round" />
+      {/* 本体上部 highlight line (tab の下部と body の境界を明示)。
+          名前にかかるなら引かない = 字面を線が横切ると読めなくなる (高さ 72 で横切っていた) */}
+      {境界y < 名前.上端 && (
+        <line
+          x1={x + 端}
+          y1={境界y}
+          x2={帯.右 - 端}
+          y2={境界y}
+          stroke={frame.stroke}
+          strokeWidth={1}
+          opacity={0.35}
+        />
+      )}
+      {commonLabel(node, 名前位置, 16, 帯)}
+    </g>
+  );
+}
+
+/** 雲の元 icon の viewBox。 この比を保つため帯を埋め切らない。 */
+const CLOUD_VB_W = 640;
+const CLOUD_VB_H = 512;
+
+/** 雲の幅を帯のどこまで使うか。 左右に余韻を残す。 */
+const CLOUD_W_RATIO = 0.9;
+
+/** shape-cloud = Font Awesome cloud icon path を scale + translate + drop shadow */
+export function ShapeCloudNode({ node, active }: ShapeProps): JSX.Element {
+  const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
+  const frame = commonFrame(active);
+  // Font Awesome "cloud" icon の path (viewBox 640 x 512) を帯に scale + center。
+  // 元 path = M 384 64 c 88 0 160 72 160 160 ... (top-left origin)
+  const 素の倍率 = Math.min(帯.h / CLOUD_VB_H, (帯.w * CLOUD_W_RATIO) / CLOUD_VB_W);
+  // 帯が潰れた箱では倍率が 0 以下になる。 `strokeWidth / scale` が `Infinity` になるのを塞ぐ
+  const scale = Number.isFinite(素の倍率) && 素の倍率 > 0 ? 素の倍率 : 0;
+  const scaledW = CLOUD_VB_W * scale;
+  const scaledH = CLOUD_VB_H * scale;
+  const tx = 帯.cx - scaledW / 2;
+  // 雲は比が固定なので帯を縦に埋め切らない。 **下端を帯に合わせる** = 影が箱の底に着く位置に
+  // 落ち着き、 箱の高さを変えても下の隙間が変わらない
+  const ty = 帯.底 - scaledH;
+  // Font Awesome 5 solid cloud icon (正規版 path、 実測 v5.15.4)
+  const cloudPath = "M 537.6 226.6 c 4.1 -10.7 6.4 -22.4 6.4 -34.6 c 0 -53 -43 -96 -96 -96 c -19.7 0 -38.1 6 -53.3 16.2 C 367 64.2 315.3 32 256 32 C 167.6 32 96 103.6 96 192 c 0 2.7 0.1 5.4 0.2 8.1 C 40.2 219.8 0 273.2 0 336 c 0 79.5 64.5 144 144 144 h 368 c 70.7 0 128 -57.3 128 -128 c 0 -61.9 -44 -113.6 -102.4 -125.4 Z";
+  return (
+    <g>
+      {/* 影の基準は雲の下端。 帯の下端を直に書くと雲を動かした時に影だけ取り残される */}
+      {dropShadow(帯.cx, ty + scaledH, scaledW * 0.42)}
+      <g transform={`translate(${tx}, ${ty}) scale(${scale})`}>
+        <path
+          data-cdl-role="node-body"
+          d={cloudPath}
+          fill={frame.fill}
+          stroke={frame.stroke}
+          strokeWidth={scale > 0 ? frame.strokeWidth / scale : 0}
+          strokeLinejoin="round"
+        />
+      </g>
+      {/* label = cloud 内側の中央 */}
+      {commonLabel(node, { x: 帯.cx, y: node.cy + node.h * 0.05 }, 16, 帯)}
+    </g>
+  );
+}
+
+/** 蓋の膨らみの上限と、 帯に対する割合。 段の弧も同じ量だけ下に膨らむ。 */
+const CYLINDER_RY_MAX = 18;
+const CYLINDER_RY_RATIO = 0.1;
+
+/** 段の弧を置く高さ (帯に対する割合)。 一番下は 0.8 で、 膨らみ 0.1 を足しても帯に収まる。 */
+const CYLINDER_DISKS = [0.3, 0.55, 0.8];
+
+/** shape-cylinder = 3D 円柱 (上面 ellipse + 側面 + 底面 arc 下半分のみ) + drop shadow */
+export function ShapeCylinderNode({ node, active }: ShapeProps): JSX.Element {
+  const 帯 = bodyBand(node, { 影ry: CYLINDER_SHADOW_RY });
+  const x = 帯.x;
+  const y = 帯.y;
+  const rx = 帯.w / 2;
+  // 蓋の膨らみを帯に比例させる。 固定の 18 だと 0.8 の高さに置いた段の弧が帯を突き抜ける
+  // (高さ 72 で下へ 3.6)。 割合を 0.1 に抑えると 0.8 + 0.1 < 1 で必ず収まる
+  const ry = Math.min(CYLINDER_RY_MAX, 帯.h * CYLINDER_RY_RATIO);
+  const frame = commonFrame(active);
+  const bodyPath = [
+    `M ${x} ${y + ry}`,
+    `A ${rx} ${ry} 0 0 1 ${帯.右} ${y + ry}`,
+    `L ${帯.右} ${帯.底 - ry}`,
+    `A ${rx} ${ry} 0 0 1 ${x} ${帯.底 - ry}`,
+    "Z",
+  ].join(" ");
+  // 蓋の弧は円柱の形そのものなので消せない。 名前を蓋の下に置く
+  const 蓋底 = y + ry * 2;
+  const 名前位置 = { x: 帯.cx, y: node.cy + 6 };
+  const 名前帯 = { x: 帯.x, y: 蓋底, w: 帯.w, h: Math.max(0, 帯.底 - 蓋底) };
+  const 名前 = labelBlock(node, 名前位置, 15, 名前帯);
+  return (
+    <g>
+      {dropShadow(帯.cx, 帯.底, rx * 0.85, CYLINDER_SHADOW_RY)}
+      <path data-cdl-role="node-body" d={bodyPath} {...frame} strokeLinejoin="round" />
+      {/* 上面 ellipse 下半分 arc (DB icon caps line) */}
+      <path
+        d={`M ${x} ${y + ry} A ${rx} ${ry} 0 0 0 ${帯.右} ${y + ry}`}
+        fill="none"
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* 中央 3 layer disk lines (DB 段層表現)。 段の弧は装飾なので、 名前にかかるなら引かない */}
+      {CYLINDER_DISKS.map((r, i) => ({ i, ly: y + 帯.h * r }))
+        .filter(({ ly }) => ly + ry < 名前.上端)
+        .map(({ i, ly }) => (
+          <path
+            key={i}
+            d={`M ${x} ${ly} A ${rx} ${ry} 0 0 0 ${帯.右} ${ly}`}
+            fill="none"
+            stroke={frame.stroke}
+            strokeWidth={0.8}
+            opacity={0.3}
+          />
+        ))}
+      {commonLabel(node, 名前位置, 15, 名前帯)}
+    </g>
+  );
+}
+
+/** 頂点の点の半径。 帯の外へこの分だけ出るので、 帯の外余白に数える。 */
+const HEX_DOT_R = 2.5;
+
+/** shape-hexagon = 六角形 (component / service 表現、 accent 頂点) + drop shadow */
+export function ShapeHexagonNode({ node, active }: ShapeProps): JSX.Element {
+  // 点は多角形の外へ出るので、 枠より点の方が広ければ点に合わせて帯を縮める
+  const 帯 = bodyBand(node, { 影ry: SHADOW_RY, 外: Math.max(HEX_DOT_R, FRAME_HALF) });
+  const cx = 帯.cx;
+  const cy = 帯.cy;
+  const cut = 帯.w * 0.2;
+  const frame = commonFrame(active);
+  const 頂点: [number, number][] = [
+    [帯.x + cut, 帯.y],
+    [帯.右 - cut, 帯.y],
+    [帯.右, cy],
+    [帯.右 - cut, 帯.底],
+    [帯.x + cut, 帯.底],
+    [帯.x, cy],
+  ];
+  const points = 頂点.map(([px, py]) => `${px},${py}`).join(" ");
+  return (
+    <g>
+      {dropShadow(cx, 帯.底, 帯.w * 0.42)}
+      <polygon data-cdl-role="node-body" points={points} {...frame} strokeLinejoin="round" />
+      {/* 頂点 dot (component の accent 表現) */}
+      {頂点.map(([px, py], i) => (
+        <circle key={i} cx={px} cy={py} r={HEX_DOT_R} fill={frame.stroke} stroke="none" />
+      ))}
+      {/* 六角形の内側に必ず入る矩形は上下の辺の幅 (帯.w - cut × 2)。 帯をそのまま渡すと
+          長い名前が斜辺の外へ出て背景の上に乗る */}
+      {commonLabel(
+        node,
+        { x: cx, y: node.cy + 6 },
+        16,
+        { x: 帯.x + cut, y: 帯.y, w: Math.max(0, 帯.w - cut * 2), h: 帯.h },
+      )}
+    </g>
+  );
+}
+
+/** shape-diamond = ひし形 (decision / 判定) + drop shadow + inner border */
+export function ShapeDiamondNode({ node, active }: ShapeProps): JSX.Element {
+  const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
+  const cx = 帯.cx;
+  const cy = 帯.cy;
+  const frame = commonFrame(active);
+  const points = [
+    `${cx},${帯.y}`,
+    `${帯.右},${cy}`,
+    `${cx},${帯.底}`,
+    `${帯.x},${cy}`,
+  ].join(" ");
+  // inner diamond (subtle border)
+  const innerScale = 0.88;
+  const innerPoints = [
+    `${cx},${cy - (帯.h / 2) * innerScale}`,
+    `${cx + (帯.w / 2) * innerScale},${cy}`,
+    `${cx},${cy + (帯.h / 2) * innerScale}`,
+    `${cx - (帯.w / 2) * innerScale},${cy}`,
+  ].join(" ");
+  return (
+    <g>
+      {dropShadow(cx, 帯.底, 帯.w * 0.4)}
+      <polygon data-cdl-role="node-body" points={points} {...frame} strokeLinejoin="round" />
+      <polygon
+        points={innerPoints}
+        fill="none"
+        stroke={frame.stroke}
+        strokeWidth={0.8}
+        opacity={0.3}
+        strokeLinejoin="round"
+      />
+      {/* ひし形の内側に必ず入る矩形は半分の大きさ (|x|/a + |y|/b <= 1 に a/2 × b/2 が収まる)。
+          帯をそのまま渡すと長い名前が内側のひし形の線を跨いで読めなくなる */}
+      {commonLabel(
+        node,
+        { x: cx, y: node.cy + 6 },
+        15,
+        {
+          x: cx - (帯.w * innerScale) / 4,
+          y: cy - (帯.h * innerScale) / 4,
+          w: (帯.w * innerScale) / 2,
+          h: (帯.h * innerScale) / 2,
+        },
+      )}
+    </g>
+  );
+}
+
+/** 板のずらし幅の上限と、 帯に対する割合。 板 2 枚ぶんずらすので割合は 0.5 未満に抑える。 */
+const STACK_OFFSET_MAX = 12;
+const STACK_OFFSET_RATIO = 0.15;
+
+/** shape-stack = 重ね rect 3 枚 (layer / history) + drop shadow */
+export function ShapeStackNode({ node, active }: ShapeProps): JSX.Element {
+  const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
+  const x = 帯.x;
+  const y = 帯.y;
+  // ずらし幅を帯に比例させる。 固定の 12 は狭い箱で板の大きさを食い潰す
+  const ずれ = Math.min(STACK_OFFSET_MAX, 帯.h * STACK_OFFSET_RATIO, 帯.w * STACK_OFFSET_RATIO);
+  const frame = commonFrame(active);
+  const cardW = 帯.w - ずれ * 2;
+  const cardH = 帯.h - ずれ * 2;
+  // 一番手前の板の中心と下端。 影と名前はここに合わせる
+  const 手前cx = 帯.cx - ずれ;
+  const 手前底 = y + ずれ * 2 + cardH;
+  return (
+    <g>
+      {/* 影の基準は一番手前の板の下端。 板 2 枚ぶん下げると箱の外に落ちる (高さ 72 で 36) */}
+      {dropShadow(手前cx, 手前底, cardW * 0.42)}
+      {/* 背後 rect (offset 右上) */}
+      <rect
+        x={x + ずれ * 2}
+        y={y}
+        width={cardW}
+        height={cardH}
+        rx={8}
+        fill={BASEMENT_FILL}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* 中間 rect */}
+      <rect
+        x={x + ずれ}
+        y={y + ずれ}
+        width={cardW}
+        height={cardH}
+        rx={8}
+        fill={BASEMENT_FILL}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* 前面 rect (label 描画側) */}
+      <rect
+        data-cdl-role="node-body"
+        x={x}
+        y={y + ずれ * 2}
+        width={cardW}
+        height={cardH}
+        rx={8}
+        {...frame}
+      />
+      {/* 名前は一番手前の板の中に置く。 帯をそのまま渡すと背後の板の上へはみ出す */}
+      {commonLabel(
+        node,
+        { x: 手前cx, y: node.cy + ずれ + 6 },
+        15,
+        { x, y: y + ずれ * 2, w: cardW, h: cardH },
+      )}
+    </g>
+  );
+}
+
+/**
+ * 人型の寸法 (`shape-people` の `personBase` と同じ)。 badge は付けない。
+ * 頭 (outline circle r=30) + 肩 (cubic Bezier curve、 slim body 幅 102、 頭 : 肩 = 1 : 1.7)。
+ */
+const PERSON_HEAD_R = 30;
+const PERSON_HEAD_DY = 40;
+const PERSON_SHOULDER_R = 51;
+const PERSON_NECK_GAP = 4;
+const PERSON_BODY_LEN = 90;
+const PERSON_SHADOW_DY = 20;
+const PERSON_SHADOW_RY = 4;
+const PERSON_SHADOW_RX = 55;
+
+/**
+ * 名前の塊を `labelPlan` の位置に描く (`shape-people` の `bottomLabel` と同じ形)。
+ *
+ * `labelPlan` は箱の高さだけで字の大きさを決めるので、 長い名前は左右へ出る。 baseline は
+ * 動かさず **字の大きさだけ横に入る倍率まで下げる** = 各行の張り出しは縮むだけなので、
+ * `labelPlan` が保証した縦の収まりは崩れない。
+ */
+function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnType<typeof labelPlan>) {
+  const 幅 = Math.max(
+    textWidth(node.title ?? "", plan.名前.size),
+    node.eyebrow && plan.肩書 ? textWidth(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING) : 0,
+    node.subtitle && plan.説明 ? textWidth(node.subtitle, plan.説明.size) : 0,
+  );
+  const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, 幅上限 / 幅) : 1;
+  return (
+    <>
+      {node.eyebrow && plan.肩書 && (
+        <text
+          x={cx}
+          y={plan.肩書.y}
+          fontSize={plan.肩書.size * k}
+          fontWeight={700}
+          letterSpacing={EYEBROW_TRACKING * k}
+          textAnchor="middle"
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+        >
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={cx}
+        y={plan.名前.y}
+        fontSize={plan.名前.size * k}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+      {node.subtitle && plan.説明 && (
+        <text
+          x={cx}
+          y={plan.説明.y}
+          fontSize={plan.説明.size * k}
+          textAnchor="middle"
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {node.subtitle}
+        </text>
+      )}
+    </>
+  );
+}
+
+/**
+ * shape-person = 人型 figure (people の personBase() 型を複製、 badge なし generic actor 表現)。
+ * 顔なし = 表情 dot / 口 arc は描かない。
+ *
+ * 他 7 種と違い絵が固定寸法なので帯には広げられない。 `shape-people` と同じく絵の帯を
+ * `shapeRegion` で取り、 入らなければ `fitArt` が比を保ったまま縮める。 名前は箱の下端から
+ * 積み上げる (`labelPlan`) = 固定位置に置くと箱の下 176.2 まで伸びていた。
+ */
+export function ShapePersonNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const strokeColor = active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)";
+  const strokeWidth = active ? 3 : 1.5;
+  // 広がりは **描く側の定数から** 出す。 表に書き写すと絵を変えた時に片方だけ古くなる
+  const 線 = strokeWidth / 2;
+  const 上ずれ = PERSON_HEAD_DY + PERSON_HEAD_R + 線;
+  const 下ずれ =
+    PERSON_HEAD_R +
+    PERSON_NECK_GAP +
+    PERSON_BODY_LEN +
+    PERSON_SHADOW_DY +
+    PERSON_SHADOW_RY -
+    PERSON_HEAD_DY;
+  // 絵の外接矩形の中心を帯の中心に置く。 `fitArt` は縮めない大きい箱では中心を合わせずに
+  // そのまま返すので、 上下非対称のまま置くと絵が名前の側へ落ちる (高さ 240 で 22.5 食い込んだ)
+  const cy = r.cy + (上ずれ - 下ずれ) / 2;
+  const headCy = cy - PERSON_HEAD_DY;
+  const bodyTopY = headCy + PERSON_HEAD_R + PERSON_NECK_GAP;
+  const bodyBottomY = bodyTopY + PERSON_BODY_LEN;
+  const bodyPath =
+    `M ${cx - PERSON_SHOULDER_R} ${bodyBottomY} ` +
+    `C ${cx - PERSON_SHOULDER_R} ${bodyTopY + 40}, ${cx - 28} ${bodyTopY}, ${cx} ${bodyTopY} ` +
+    `C ${cx + 28} ${bodyTopY}, ${cx + PERSON_SHOULDER_R} ${bodyTopY + 40}, ${cx + PERSON_SHOULDER_R} ${bodyBottomY}`;
+  // 中心を合わせた結果、 上下の広がりは等しくなる
+  const 半 = (上ずれ + 下ずれ) / 2;
+  const extent: ArtExtent = {
+    上: 半,
+    下: 半,
+    // 影は肩より広い (rx 55 対 肩 51)。 広い方を採る
+    左: Math.max(PERSON_SHOULDER_R + 線, PERSON_SHADOW_RX),
+    右: Math.max(PERSON_SHOULDER_R + 線, PERSON_SHADOW_RX),
+  };
+  return (
+    <g>
+      {fitArt(
+        r,
+        extent,
+        <g>
+          {/* drop shadow */}
+          <ellipse
+            cx={cx}
+            cy={bodyBottomY + PERSON_SHADOW_DY}
+            rx={PERSON_SHADOW_RX}
+            ry={PERSON_SHADOW_RY}
+            fill="#000"
+            opacity={0.08}
+            stroke="none"
+          />
+          {/* 頭 (outline circle) */}
+          <circle
+            data-cdl-role="node-body"
+            cx={cx}
+            cy={headCy}
+            r={PERSON_HEAD_R}
+            fill="none"
+            stroke={strokeColor}
+            strokeWidth={strokeWidth}
+          />
+          {/* body (cubic Bezier curve、 open bottom = U 字ではなく肩から下ろす line のみ) */}
+          <path
+            d={bodyPath}
+            fill="none"
+            stroke={strokeColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+          />
+        </g>,
+      )}
+      {planLabel(node, r.cx, Math.max(0, node.w), r.label)}
+    </g>
+  );
+}