@cardenelabs/cdl 0.5.0

package/src/kinds/shape-commerce.tsx

@@ -0,0 +1,553 @@
+import type { JSX } from "react";
+import { shapeRegion, labelPlan, fitArt } from "./shape-region";
+import type { LaidNode } from "../types";
+
+/**
+ * Shape-driven commerce / web 6 kinds (CAR-1111 Phase 2-D)。
+ *
+ * website / storefront / warehouse / online-shop / cdn-edge / api-gateway。
+ *
+ * 設計原則。
+ * 1. shape 本体は node.cx, node.cy を中心に上下左右対称に配置
+ * 2. 中央に 1 つの視覚シンボルを大きく置く、 細部は削って silhouette 優先
+ * 3. label は shape の下に固定
+ */
+
+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,
+});
+
+/** 肩書の字間。 幅で縮める時はこれも同じ割合で詰める。 */
+const LABEL_EYEBROW_SPACING = 2;
+
+/**
+ * 1 字の幅は字の大きさの何倍か。 呼び出し側の書体
+ * (`"Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif`) を太字 700 で実測した値。
+ *
+ * **一律の係数は使えない**。 半角の実測は最小 0.271 (`i` / `j` / `l`) から最大 1.038 (`W`) まで
+ * 4 倍近く開く。 平均の 0.630 で置くと `W` の並びで 3 分の 2 しか見ず、 その比で縮めても箱から
+ * 出たままになる (`W` 20 字が実測 390.4 に対し 0.7 の見積りで 224、 縮めた後も 86 出た)。
+ *
+ * | 階級 | 実測の最大 | 係数 |
+ * |---|---|---|
+ * | 細い (`i j l I . , : ; '` `!` と空白) | 0.365 | 0.37 |
+ * | 広い (`W @ % M m`) | 1.038 (`W`) | 1.04 |
+ * | その他の ASCII | 0.850 (`w`) | 0.86 |
+ * | ASCII の外 | 1.000 (和文) | 1.04 |
+ *
+ * 並 400 の最大は 0.985 なので太字の値で覆える。
+ */
+const 細字 = new Set([..."ijlI.,:;'! "]);
+const 広字 = new Set([..."W@%Mm"]);
+const 細字比 = 0.37;
+const 広字比 = 1.04;
+const 並字比 = 0.86;
+
+/**
+ * 1 字が字の大きさの何倍か。
+ *
+ * **ASCII の外は分類しない**。 「どの字が全角か」 を手で列挙する限り抜けは出続け、 抜けは必ず
+ * **過小見積り** = 収まっていない物を収まっていると判定する向きに外れる。 実際に 3 回とも別の
+ * 抜け方をした (範囲の端点に見た目の同じ字が入る / 私用領域が混じる / 区画指定からカタカナ拡張と
+ * CJK 互換が落ちる)。
+ *
+ * ASCII の外は実測の最大 `1.04` で数える。 全角の実測は 1.000 なので 4% 広く見積もるだけで、
+ * 半角カナ (約 0.5) も外字も Latin-1 もギリシャ文字もまとめて安全側に倒れる。 代償は和文の名前が
+ * 4% 余分に縮むことだけで、 過小見積りが構造的に起きなくなる。
+ */
+function 字の比(c: string): number {
+  if (細字.has(c)) return 細字比;
+  if (広字.has(c)) return 広字比;
+  return (c.codePointAt(0) ?? 0) < 128 ? 並字比 : 広字比;
+}
+
+/** 字の並びの幅の見積り。 字ごとの比を足して、 字間を字数分足す。 */
+function 字幅(文字列: string, 大きさ: number, 字間: number): number {
+  let 幅 = 0;
+  let 字数 = 0;
+  for (const c of 文字列) {
+    幅 += 大きさ * 字の比(c);
+    字数 += 1;
+  }
+  return 幅 + 字間 * 字数;
+}
+
+/**
+ * 1 行を箱の幅に収める字の大きさと字間。
+ *
+ * `labelPlan` は箱の **高さ** だけから字の大きさを決めていて、 幅も字数も見ていない。 その
+ * ままだと長い名前が箱の左右へ出る (幅 140 / 高さ 72 で `LongApplicationService` は 12px で
+ * 175.8 = 左右へ 17.9)。 絵と違って `fitArt` は名前を包まないので、 ここで行ごとに縮める。
+ *
+ * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
+ */
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+  const 幅 = 字幅(文字列, 大きさ, 字間);
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
+  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+}
+
+/**
+ * 名前の塊を描く。 縦の位置と大きさは `labelPlan` が決め (箱の下端から積み上げる、 #433)、
+ * 横は `幅に収める` が箱の幅に合わせて縮める。
+ */
+function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
+  const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
+  return (
+    <>
+      {node.eyebrow && plan.肩書 && (
+        <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
+          {node.eyebrow}
+        </text>
+      )}
+      <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
+        {node.title}
+      </text>
+      {node.subtitle && plan.説明 && (
+        <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+          {node.subtitle}
+        </text>
+      )}
+    </>
+  );
+}
+
+
+/**
+ * 落とした影 (`shape-website` / `shape-api-gateway`) が本体の外へ出る量 (#433)。
+ *
+ * 影は本体を右下へ 4 ずらした複製なので、 右と下へ 4 出る。 枠も中心線から半分外へ出る。
+ * どちらも **箱の高さに依らない** 固定量なので、 本体の寸法を決める前に描ける帯をこの分だけ
+ * 先に狭める。
+ */
+const DROP_SHADOW_D = 4;
+
+/** ブラウザ (`shape-website`) の中身が潰れない大きさ。 */
+const WEBSITE_BAR_H = 32;
+/** 見出し帯 40 + 上下の間 48 + 板 10。 */
+const WEBSITE_H_MIN = WEBSITE_BAR_H + 98;
+const WEBSITE_W_MIN = 160;
+const WEBSITE_W_MAX = 280;
+
+/** shape-website = ブラウザ (シンプル + シンプルレイアウト) */
+export function ShapeWebsiteNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const 余白 = Math.max(DROP_SHADOW_D, frame.strokeWidth / 2);
+  // 帯を狭めてから本体の大きさを決める。 中身が潰れる箱では下限で止め、 入り切らない分は
+  // `fitArt` が絵ごと縮める (縦横の比は保たれる)
+  const 縦 = Math.max(r.availH, WEBSITE_H_MIN + 余白 * 2);
+  const bh = 縦 - 余白 * 2;
+  const bw = Math.min(Math.max(r.availW - 余白 * 2, WEBSITE_W_MIN), WEBSITE_W_MAX);
+  const x = cx - bw / 2;
+  const y = r.cy - 縦 / 2 + 余白;
+  const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: bw / 2 + 余白, 右: bw / 2 + 余白 };
+  const barH = WEBSITE_BAR_H;
+  const 絵 = (
+    <g>
+      <rect x={x + DROP_SHADOW_D} y={y + DROP_SHADOW_D} width={bw} height={bh} rx={10} fill={frame.stroke} opacity={0.2} stroke="none" />
+      <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={10} {...frame} />
+      <path d={`M ${x} ${y + barH} L ${x} ${y + 10} Q ${x} ${y}, ${x + 10} ${y} L ${x + bw - 10} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 10} L ${x + bw} ${y + barH} Z`} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.5} stroke="none" />
+      <line x1={x} y1={y + barH} x2={x + bw} y2={y + barH} stroke={frame.stroke} strokeWidth={1} />
+      <circle cx={x + 14} cy={y + barH / 2} r={5} fill="#ff5f56" stroke="none" />
+      <circle cx={x + 28} cy={y + barH / 2} r={5} fill="#ffbd2e" stroke="none" />
+      <circle cx={x + 42} cy={y + barH / 2} r={5} fill="#27c93f" stroke="none" />
+      <rect x={x + 60} y={y + 8} width={bw - 76} height={16} rx={8} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={1.2} />
+      {/* シンプル content = hero + 3 tiles */}
+      <rect x={x + 20} y={y + barH + 16} width={bw - 40} height={40} rx={4} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.6} stroke="none" />
+      {[0, 1, 2].map((i) => (
+        <rect key={i} x={x + 20 + i * ((bw - 40) / 3 + 6)} y={y + barH + 66} width={(bw - 40) / 3 - 4} height={bh - barH - 88} rx={4} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.35} stroke={frame.stroke} strokeWidth={0.8} />
+      ))}
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-storefront = S-A シンプル shop (平屋根 + SHOP 看板 + 大 window (商品) + 中央 door + OPEN sign) */
+export function ShapeStorefrontNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 4;
+  const bw = Math.min(r.availW - 40, 220);
+  const bh = Math.min(r.availH - 40, 220);
+  const x = cx - bw / 2;
+  const y = cy - bh / 2;
+  const signH = 26;
+  const accent = "var(--cdl-tone-accent, #2d6a8f)";
+  const accentDark = "#1a4a68";
+  const accentDarker = "#0f3450";
+  // window / door 領域
+  const facadeY = y + signH;
+  const facadeH = bh - signH - 12;
+  const winW = bw * 0.42;
+  const winH = facadeH - 32;
+  const winX = x + 12;
+  const winY = facadeY + 16;
+  const doorW = bw * 0.36;
+  const doorH = facadeH - 30;
+  const doorX = x + bw - doorW - 12;
+  const doorY = facadeY + 20;
+  return (
+    <g>
+      {/* drop shadow */}
+      <ellipse cx={cx} cy={y + bh + 8} rx={bw * 0.5} ry={5} fill={frame.stroke} opacity={0.2} stroke="none" />
+      {/* SHOP 看板 (accent) */}
+      <rect x={x} y={y} width={bw} height={signH} fill={accent} stroke={accentDark} strokeWidth={2} />
+      <text x={cx} y={y + 18} fontSize={16} fontWeight={900} letterSpacing={8} textAnchor="middle" fill="#ffffff">SHOP</text>
+      {/* facade (店舗本体 白ベース) */}
+      <rect data-cdl-role="node-body" x={x} y={facadeY} width={bw} height={facadeH} fill="#e0e4e8" stroke="#5a6270" strokeWidth={frame.strokeWidth} />
+      {/* 大 window (商品ディスプレイ、 左) */}
+      <rect x={winX} y={winY} width={winW} height={winH} fill="#a4c5d9" stroke={accentDarker} strokeWidth={2} />
+      <line x1={winX + winW / 2} y1={winY} x2={winX + winW / 2} y2={winY + winH} stroke={accentDarker} strokeWidth={1} />
+      <line x1={winX} y1={winY + winH / 2} x2={winX + winW} y2={winY + winH / 2} stroke={accentDarker} strokeWidth={1} />
+      {/* 商品 4 個 (window 内、 各象限) */}
+      <rect x={winX + 6} y={winY + 6} width={winW / 2 - 10} height={winH / 2 - 10} rx={2} fill="#c15a4a" />
+      <rect x={winX + winW / 2 + 4} y={winY + 6} width={winW / 2 - 10} height={winH / 2 - 10} rx={2} fill="#4ea36a" />
+      <rect x={winX + 6} y={winY + winH / 2 + 4} width={winW / 2 - 10} height={winH / 2 - 10} rx={2} fill="#e5c07b" />
+      <rect x={winX + winW / 2 + 4} y={winY + winH / 2 + 4} width={winW / 2 - 10} height={winH / 2 - 10} rx={2} fill="#a4b5f2" />
+      {/* door (右、 accentGold 木製) */}
+      <rect x={doorX} y={doorY} width={doorW} height={doorH} fill="#a89d8f" stroke="#5a6270" strokeWidth={2} />
+      <rect x={doorX + 4} y={doorY + 4} width={doorW - 8} height={doorH - 8} fill="#8b949e" stroke={accentDarker} strokeWidth={1.5} />
+      {/* door の水平 line 装飾 */}
+      <line x1={doorX + 4} y1={doorY + doorH * 0.38} x2={doorX + doorW - 4} y2={doorY + doorH * 0.38} stroke={accentDarker} strokeWidth={1} />
+      <line x1={doorX + 4} y1={doorY + doorH * 0.72} x2={doorX + doorW - 4} y2={doorY + doorH * 0.72} stroke={accentDarker} strokeWidth={1} />
+      {/* OPEN sign (door 下部に貼付) */}
+      <rect x={doorX + doorW / 2 - 20} y={doorY + doorH * 0.85} width={40} height={12} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+      <text x={doorX + doorW / 2} y={doorY + doorH * 0.85 + 9} fontSize={8} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#5a3a10">OPEN</text>
+      {/* door handle (小さな dot) */}
+      <circle cx={doorX + 6} cy={doorY + doorH * 0.55} r={1.5} fill="#c15a4a" />
+      {/* base 床 (前 storefront 直下のみ) */}
+      <rect x={x - 6} y={y + bh - 6} width={bw + 12} height={8} fill="#5a6270" stroke="none" />
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * 倉庫 (`shape-warehouse`) の固定部品 (#433)。
+ *
+ * 屋根と床は建物の左右へ、 影は下へ出る。 出る量は箱の高さに依らないので、 建物の寸法を
+ * 決める前に描ける帯をこの分だけ先に狭める。
+ */
+const WAREHOUSE_ROOF_H = 18;
+const WAREHOUSE_SIGN_H = 24;
+/** 屋根が建物の左右へ出る量と、 その枠の太さ。 */
+const WAREHOUSE_ROOF_OUT = 4;
+const WAREHOUSE_ROOF_SW = 2;
+/** 床が建物の左右へ出る量。 */
+const WAREHOUSE_FLOOR_OUT = 6;
+/** 影の楕円を建物の下端からどれだけ下に置くか、 その縦半径と横半径の比。 */
+const WAREHOUSE_SHADOW_DY = 8;
+const WAREHOUSE_SHADOW_RY = 5;
+const WAREHOUSE_SHADOW_RX_RATIO = 0.5;
+/** 建物の大きさ。 高さの下限は shutter が潰れない高さ。 */
+const WAREHOUSE_H_MIN = WAREHOUSE_ROOF_H + WAREHOUSE_SIGN_H + 68;
+const WAREHOUSE_W_MIN = 160;
+const WAREHOUSE_W_MAX = 240;
+
+/** shape-warehouse = W-A 大 shutter (平屋根 + WAREHOUSE 看板 + 中央大 shutter 10 rib + loading dock) */
+export function ShapeWarehouseNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  // 屋根の頂点は建物の上端より 2 下なので、 上には何も出ない
+  const 上出 = 0;
+  const 下出 = WAREHOUSE_SHADOW_DY + WAREHOUSE_SHADOW_RY;
+  const 横出 = Math.max(
+    WAREHOUSE_FLOOR_OUT,
+    WAREHOUSE_ROOF_OUT + WAREHOUSE_ROOF_SW / 2,
+    frame.strokeWidth / 2,
+  );
+  const 縦 = Math.max(r.availH, WAREHOUSE_H_MIN + 上出 + 下出);
+  const bh = 縦 - 上出 - 下出;
+  const bw = Math.min(Math.max(r.availW - 横出 * 2, WAREHOUSE_W_MIN), WAREHOUSE_W_MAX);
+  const x = cx - bw / 2;
+  const y = r.cy - 縦 / 2 + 上出;
+  // 影の横半径は建物の半幅ちょうどなので、 左右を決めるのは常に床の出幅の側になる
+  const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: bw / 2 + 横出, 右: bw / 2 + 横出 };
+  const roofH = WAREHOUSE_ROOF_H;
+  const signH = WAREHOUSE_SIGN_H;
+  const shutterY = y + roofH + signH + 8;
+  const shutterX = x + 20;
+  const shutterW = bw - 40;
+  const shutterH = bh - roofH - signH - 32;
+  const accentDarker = "#0f3450";
+  const 絵 = (
+    <g>
+      {/* drop shadow */}
+      <ellipse cx={cx} cy={y + bh + WAREHOUSE_SHADOW_DY} rx={bw * WAREHOUSE_SHADOW_RX_RATIO} ry={WAREHOUSE_SHADOW_RY} fill={frame.stroke} opacity={0.2} stroke="none" />
+      {/* 平屋根 (斜め) */}
+      <path d={`M ${x - WAREHOUSE_ROOF_OUT} ${y + roofH} L ${x + 12} ${y + 2} L ${x + bw - 12} ${y + 2} L ${x + bw + WAREHOUSE_ROOF_OUT} ${y + roofH} Z`} fill="#5a6270" stroke={accentDarker} strokeWidth={WAREHOUSE_ROOF_SW} strokeLinejoin="round" />
+      {/* 倉庫 body (灰色壁) */}
+      <rect data-cdl-role="node-body" x={x} y={y + roofH} width={bw} height={bh - roofH - 12} fill="#a89d8f" stroke="#5a6270" strokeWidth={frame.strokeWidth} />
+      {/* WAREHOUSE 看板 (赤帯) */}
+      <rect x={x} y={y + roofH} width={bw} height={signH} fill="#c15a4a" stroke="#8b3f2f" strokeWidth={1.5} />
+      <text x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">WAREHOUSE</text>
+      {/* 中央大 shutter (rib 縞) */}
+      <rect x={shutterX} y={shutterY} width={shutterW} height={shutterH} fill="#8b949e" stroke={accentDarker} strokeWidth={2} />
+      {/* shutter 上部 shade (立体感) */}
+      <rect x={shutterX} y={shutterY} width={shutterW} height={5} fill="#5a6270" stroke="none" />
+      {/* shutter 10 rib horizontal lines */}
+      {Array.from({ length: 10 }, (_, i) => i).map((i) => (
+        <line
+          key={`rib-${i}`}
+          x1={shutterX}
+          y1={shutterY + 6 + (i + 1) * ((shutterH - 6) / 11)}
+          x2={shutterX + shutterW}
+          y2={shutterY + 6 + (i + 1) * ((shutterH - 6) / 11)}
+          stroke="#5a6270"
+          strokeWidth={1}
+        />
+      ))}
+      {/* loading dock (底部黒帯) */}
+      <rect x={shutterX} y={y + bh - 22} width={shutterW} height={10} fill={accentDarker} stroke="#000" strokeWidth={1} />
+      {/* dock 中央 loading warning stripe (yellow) */}
+      <rect x={cx - 10} y={y + bh - 20} width={20} height={16} rx={2} fill="#e5c07b" stroke="#a67c00" strokeWidth={1} />
+      <circle cx={cx} cy={y + bh - 14} r={4} fill="#5a3a10" />
+      {/* base 床 (直下のみ) */}
+      <rect x={x - WAREHOUSE_FLOOR_OUT} y={y + bh - 12} width={bw + WAREHOUSE_FLOOR_OUT * 2} height={6} fill="#5a6270" stroke="none" />
+      <rect x={x - WAREHOUSE_FLOOR_OUT} y={y + bh - 6} width={bw + WAREHOUSE_FLOOR_OUT * 2} height={4} fill={accentDarker} stroke="none" />
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-online-shop = O-A 大 shopping cart (縦長 260x320、 中身なし + badge なし = カート単体 + 車輪 + ハンドル + 籠 grid) */
+export function ShapeOnlineShopNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 10;
+  const scale = Math.min(r.availW / 260, r.availH / 320);
+  const s = scale * 0.9;
+  const accent = "var(--cdl-tone-accent, #2d6a8f)";
+  const accentDark = "#1a4a68";
+  const accentDarker = "#0f3450";
+  // カート本体座標 (中央基準、 s = scale factor)
+  const basketTopY = cy - 40 * s;
+  const basketBotY = cy + 50 * s;
+  const basketTopL = cx - 68 * s;
+  const basketTopR = cx + 68 * s;
+  const basketBotL = cx - 54 * s;
+  const basketBotR = cx + 54 * s;
+  const wheelY = cy + 88 * s;
+  const wheelL = cx - 42 * s;
+  const wheelR = cx + 42 * s;
+  return (
+    <g>
+      {/* drop shadow */}
+      <ellipse cx={cx} cy={wheelY + 22 * s} rx={80 * s} ry={5 * s} fill={frame.stroke} opacity={0.25} stroke="none" />
+      {/* ハンドル (左上から下降) */}
+      <path d={`M ${cx - 118 * s} ${basketTopY - 60 * s} L ${cx - 90 * s} ${basketTopY - 60 * s} L ${cx - 80 * s} ${basketTopY - 30 * s} L ${basketTopL} ${basketTopY}`} fill="none" stroke={accent} strokeWidth={6 * s} strokeLinecap="round" strokeLinejoin="round" />
+      {/* ハンドル grip 端 (円) */}
+      <circle cx={cx - 118 * s} cy={basketTopY - 60 * s} r={4 * s} fill={accent} stroke={accentDark} strokeWidth={1.5} />
+      {/* 籠本体 (台形) */}
+      <path
+        data-cdl-role="node-body"
+        d={`M ${basketTopL} ${basketTopY} L ${basketTopR} ${basketTopY} L ${basketBotR} ${basketBotY} L ${basketBotL} ${basketBotY} Z`}
+        fill="#a4c5d9"
+        stroke={accentDarker}
+        strokeWidth={3 * s}
+        strokeLinejoin="round"
+      />
+      {/* 籠 上端 rim (立体感) */}
+      <rect x={basketTopL} y={basketTopY - 6 * s} width={basketTopR - basketTopL} height={8 * s} fill={accent} stroke={accentDarker} strokeWidth={2 * s} />
+      {/* 籠 grid 縦線 (5 本) */}
+      {[0.17, 0.34, 0.5, 0.66, 0.83].map((rr, i) => {
+        const topX = basketTopL + (basketTopR - basketTopL) * rr;
+        const botX = basketBotL + (basketBotR - basketBotL) * rr;
+        return <line key={`v${i}`} x1={topX} y1={basketTopY} x2={botX} y2={basketBotY} stroke={accentDarker} strokeWidth={1.5 * s} />;
+      })}
+      {/* 籠 grid 横線 (3 本) */}
+      {[0.25, 0.5, 0.75].map((rr, i) => {
+        const leftX = basketTopL + (basketBotL - basketTopL) * rr;
+        const rightX = basketTopR + (basketBotR - basketTopR) * rr;
+        const yy = basketTopY + (basketBotY - basketTopY) * rr;
+        return <line key={`h${i}`} x1={leftX} y1={yy} x2={rightX} y2={yy} stroke={accentDarker} strokeWidth={1.5 * s} />;
+      })}
+      {/* 籠 下部 axis line (車輪への連結) */}
+      <line x1={basketBotL + 6 * s} y1={basketBotY} x2={wheelL} y2={wheelY - 12 * s} stroke={accent} strokeWidth={4 * s} strokeLinecap="round" />
+      <line x1={basketBotR - 6 * s} y1={basketBotY} x2={wheelR} y2={wheelY - 12 * s} stroke={accent} strokeWidth={4 * s} strokeLinecap="round" />
+      {/* 左車輪 */}
+      <circle cx={wheelL} cy={wheelY} r={16 * s} fill="#0f1830" stroke="#000" strokeWidth={2 * s} />
+      <circle cx={wheelL} cy={wheelY} r={8 * s} fill="#5a6270" stroke="#0f1830" strokeWidth={1.5 * s} />
+      <circle cx={wheelL} cy={wheelY} r={2 * s} fill="#0f1830" />
+      {/* 右車輪 */}
+      <circle cx={wheelR} cy={wheelY} r={16 * s} fill="#0f1830" stroke="#000" strokeWidth={2 * s} />
+      <circle cx={wheelR} cy={wheelY} r={8 * s} fill="#5a6270" stroke="#0f1830" strokeWidth={1.5 * s} />
+      <circle cx={wheelR} cy={wheelY} r={2 * s} fill="#0f1830" />
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-cdn-edge = 地球儀 (globe + 5 edge dots + pulse ring + lightning at center) */
+export function ShapeCdnEdgeNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const rr = Math.min(r.availW, r.availH) * 0.32;
+  /**
+   * 絵の広がり。 **飾りの輪が本体よりずっと外まで届く**。
+   *
+   * 波紋は `rr + 12 + i * 16` から始まり、 動きで `+16` まで伸びる (`i = 1` の最大が
+   * `rr + 44`)。 節点は `rr * 1.1` の位置に半径 7 の丸を置き、 線が 2 の太さを持つ。
+   * 大きい方を採る。
+   */
+  const 波紋 = rr + 44 + 1.5 / 2;
+  const 節点 = rr * 1.1 + 7 + 2 / 2;
+  const 広がり = Math.max(波紋, 節点);
+  const 絵 = (
+    <g>
+      {[0, 1].map((i) => (
+        <circle
+          key={i}
+          cx={cx}
+          cy={cy}
+          r={rr + 12 + i * 16}
+          fill="none"
+          stroke="var(--cdl-tone-accent, #2d6a8f)"
+          strokeWidth={1.5}
+          opacity={0.4 - i * 0.18}
+        >
+          <animate attributeName="r" values={`${rr + 12 + i * 16};${rr + 28 + i * 16};${rr + 12 + i * 16}`} dur={`${2 + i}s`} repeatCount="indefinite" />
+          <animate attributeName="opacity" values={`${0.5 - i * 0.15};0;${0.5 - i * 0.15}`} dur={`${2 + i}s`} repeatCount="indefinite" />
+        </circle>
+      ))}
+      <circle cx={cx + 3} cy={cy + 3} r={rr} fill={frame.stroke} opacity={0.25} stroke="none" />
+      <circle
+        data-cdl-role="node-body"
+        cx={cx}
+        cy={cy}
+        r={rr}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.28}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      <ellipse cx={cx} cy={cy} rx={rr} ry={rr * 0.35} fill="none" stroke={frame.stroke} strokeWidth={1.2} opacity={0.6} />
+      <ellipse cx={cx} cy={cy - rr * 0.4} rx={rr * 0.88} ry={rr * 0.22} fill="none" stroke={frame.stroke} strokeWidth={1} opacity={0.5} />
+      <ellipse cx={cx} cy={cy + rr * 0.4} rx={rr * 0.88} ry={rr * 0.22} fill="none" stroke={frame.stroke} strokeWidth={1} opacity={0.5} />
+      <ellipse cx={cx} cy={cy} rx={rr * 0.35} ry={rr} fill="none" stroke={frame.stroke} strokeWidth={1.2} opacity={0.6} />
+      <ellipse cx={cx} cy={cy} rx={rr * 0.7} ry={rr} fill="none" stroke={frame.stroke} strokeWidth={1} opacity={0.4} />
+      <path d={`M ${cx - rr * 0.6} ${cy - rr * 0.1} Q ${cx - rr * 0.5} ${cy - rr * 0.35}, ${cx - rr * 0.3} ${cy - rr * 0.25} Q ${cx - rr * 0.2} ${cy}, ${cx - rr * 0.4} ${cy + rr * 0.2} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.5} stroke="none" />
+      <path d={`M ${cx + rr * 0.1} ${cy - rr * 0.3} Q ${cx + rr * 0.4} ${cy - rr * 0.4}, ${cx + rr * 0.5} ${cy - rr * 0.1} Q ${cx + rr * 0.35} ${cy + rr * 0.05}, ${cx + rr * 0.2} ${cy - rr * 0.05} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.5} stroke="none" />
+      {[
+        { x: cx - rr * 1.05, y: cy - rr * 0.35 },
+        { x: cx + rr * 1.05, y: cy - rr * 0.4 },
+        { x: cx - rr * 0.85, y: cy + rr * 0.7 },
+        { x: cx + rr * 0.9, y: cy + rr * 0.55 },
+        { x: cx, y: cy - rr * 1.1 },
+      ].map((p, i) => (
+        <g key={i}>
+          <line x1={cx} y1={cy} x2={p.x} y2={p.y} stroke={frame.stroke} strokeWidth={0.8} strokeDasharray="2 3" opacity={0.4} />
+          <circle cx={p.x} cy={p.y} r={7} fill="var(--cdl-node-fill, #ffffff)" stroke={frame.stroke} strokeWidth={2} />
+          <circle cx={p.x} cy={p.y} r={3.5} fill="#27c93f" stroke="none">
+            <animate attributeName="opacity" values="0.3;1;0.3" dur={`${1.4 + i * 0.2}s`} repeatCount="indefinite" />
+          </circle>
+        </g>
+      ))}
+      <path d={`M ${cx - 8} ${cy - 14} L ${cx + 4} ${cy - 14} L ${cx - 2} ${cy - 2} L ${cx + 6} ${cy - 2} L ${cx - 4} ${cy + 14} L ${cx + 2} ${cy + 2} L ${cx - 6} ${cy + 2} Z`} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} strokeLinejoin="round" />
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, { 上: 広がり, 下: 広がり, 左: 広がり, 右: 広がり }, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * API 一覧板 (`shape-api-gateway`) の固定部品 (#433)。
+ *
+ * 行は板の上端から固定の間隔で並んでいたため、 板を箱に合わせて縮めると行が板の外へ出た
+ * (変更前は高さ 72 の箱で下へ 74)。 **行の間隔を板の高さから出す** ので、 板がどんな高さでも
+ * 行は内側に収まる。
+ */
+const API_ROW_TOP = 52;
+const API_ROW_H = 24;
+const API_ROW_PITCH_MIN = 30;
+const API_ROW_BOTTOM_PAD = 12;
+const API_ROWS = 3;
+/** 板の大きさ。 高さの下限は行が最小の間隔で 3 本入る高さ。 */
+const API_H_MIN =
+  API_ROW_TOP + (API_ROWS - 1) * API_ROW_PITCH_MIN + API_ROW_H + API_ROW_BOTTOM_PAD;
+const API_W_MIN = 200;
+const API_W_MAX = 300;
+
+/** shape-api-gateway = SaaS API panel (dark bg + method + path endpoints + status) */
+export function ShapeApiGatewayNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const 余白 = Math.max(DROP_SHADOW_D, frame.strokeWidth / 2);
+  const 縦 = Math.max(r.availH, API_H_MIN + 余白 * 2);
+  const bh = 縦 - 余白 * 2;
+  const bw = Math.min(Math.max(r.availW - 余白 * 2, API_W_MIN), API_W_MAX);
+  const x = cx - bw / 2;
+  const y = r.cy - 縦 / 2 + 余白;
+  const 広がり = { 上: 縦 / 2, 下: 縦 / 2, 左: bw / 2 + 余白, 右: bw / 2 + 余白 };
+  // 行は板の中で均す。 板が伸びたら間隔も伸びる = 下に空きだけが残らない
+  const rowPitch = Math.max(
+    API_ROW_PITCH_MIN,
+    (bh - API_ROW_TOP - API_ROW_H - API_ROW_BOTTOM_PAD) / (API_ROWS - 1),
+  );
+  const 絵 = (
+    <g>
+      <rect x={x + DROP_SHADOW_D} y={y + DROP_SHADOW_D} width={bw} height={bh} rx={10} fill={frame.stroke} opacity={0.2} stroke="none" />
+      <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={10} fill="#1a2332" stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
+      <rect x={x} y={y} width={bw} height={36} rx={10} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
+      <text x={cx} y={y + 24} fontSize={14} fontWeight={700} letterSpacing={3} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+        API GATEWAY
+      </text>
+      {[
+        { method: "GET", path: "/users", color: "#27c93f" },
+        { method: "POST", path: "/orders", color: "#e5c07b" },
+        { method: "DEL", path: "/session", color: "#c9302c" },
+      ].map((e, i) => (
+        <g key={i} transform={`translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`}>
+          <rect x={0} y={0} width={bw - 32} height={API_ROW_H} rx={4} fill="#0f1419" stroke="none" />
+          <rect x={0} y={0} width={54} height={API_ROW_H} rx={4} fill={e.color} stroke="none" />
+          <text x={27} y={16} fontSize={11} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+            {e.method}
+          </text>
+          <text x={64} y={16} fontSize={12} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#e6edf3">
+            {e.path}
+          </text>
+          <circle cx={bw - 44} cy={12} r={4} fill="#27c93f" stroke="none">
+            <animate attributeName="opacity" values="0.4;1;0.4" dur={`${1.2 + i * 0.3}s`} repeatCount="indefinite" />
+          </circle>
+        </g>
+      ))}
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, 広がり, 絵)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}