@cardenelabs/cdl 0.5.0

package/src/kinds/shape-hardware.tsx

@@ -0,0 +1,862 @@
+import type { JSX } from "react";
+import { shapeRegion, labelPlan, fitArt, textWidth, type ArtExtent } from "./shape-region";
+import type { LaidNode } from "../types";
+
+/**
+ * Shape-driven hardware 6 kinds (CAR-1111 Phase 2-C)。
+ *
+ * ハードウェア / IoT / エッジ領域の視覚要素 = server-rack / network-node /
+ * mobile-device / iot-sensor / robot-arm / satellite を SVG path で直接描画する。
+ *
+ * 各 kind は 1 SVG path (+ 補助 shape) + title + optional subtitle 構成、
+ * fill / stroke は theme (var(--cdl-*)) 追従、 active 時は accent stroke + width 拡張。
+ *
+ * ## 箱に収める (#433)
+ *
+ * 高さ 72 の名札 (幅 140、 説明つき) で実測すると、 4 種が箱の下か左右へ出ていた。
+ *
+ * | 種別 | 下 | 左右 | 出ていた理由 |
+ * |---|---|---|---|
+ * | server-rack | 94 | 0 | 本体の高さは箱から決めるのに、 中の 1 U は固定の高さで積んでいた |
+ * | network-node | 55 | 21.9 | 箱を見ずに中心から 105 広がる絵を描いていた |
+ * | mobile-device | 26.2 | 0 | 絵は収まっていた = 名前を絵の下 (箱の外) に置いていた |
+ * | satellite | 2 | 33 | 箱を見ずに固定の寸法で描いていた |
+ *
+ * 直し方は 2 通りで、 どちらも「名前の場所を先に決め、 残った帯に絵を描く」 が土台になる
+ * (`shapeRegion` / `labelPlan`)。 絵が帯より大きい時は `fitArt` が縦横の比を保って縮める。
+ * 名前は箱の高さだけでなく **幅にも収める** = 字の種類ごとの幅から行ごとに縮める
+ * (`幅に収める` + 共有の `textWidth`)。
+ *
+ * **上へのはみ出しは直していない**。 何ともぶつからず図の外にも出ないことを呼び出し側が
+ * 実測済で、 残す判断をしている (`shape-robot-arm` の 129 も同じ)。
+ *
+ * ## 自然な寸法は変更前のまま
+ *
+ * 絵の帯は名前の塊の分だけ箱より狭い (高さ 400 の箱で 345.6、 高さ 200 の箱で 145.6)。 帯より
+ * 大きい絵は `fitArt` が縮める = **低い箱で縮むのは設計どおりで欠陥ではない**。
+ *
+ * 守るのは「絵が帯に収まる高さの範囲では、 外接矩形の大きさと位置が箱の高さで変わらない」 =
+ * `fitArt` が働かない範囲では自然な寸法そのままで描かれること。 4 種の自然な高さは 101 から
+ * 243 で、 高さ 400 以上の箱ではどの文字を書いても帯に収まる。
+ */
+
+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 externalLabel = (node: LaidNode, cx: number, bottomY: number) => (
+  <>
+    {node.eyebrow && (
+      <text
+        x={cx}
+        y={node.cy - node.h / 2 - 8}
+        fontSize={12}
+        fontWeight={700}
+        letterSpacing={2}
+        textAnchor="middle"
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+      >
+        {node.eyebrow}
+      </text>
+    )}
+    <text
+      data-cdl-role="node-label"
+      x={cx}
+      y={bottomY}
+      fontSize={15}
+      fontWeight={700}
+      textAnchor="middle"
+      fill="var(--cdl-text, #1a1f2a)"
+    >
+      {node.title}
+    </text>
+    {node.subtitle && (
+      <text
+        x={cx}
+        y={bottomY + 16}
+        fontSize={11}
+        textAnchor="middle"
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
+        {node.subtitle}
+      </text>
+    )}
+  </>
+);
+
+/** 肩書の字間。 */
+const LABEL_EYEBROW_SPACING = 2;
+
+/**
+ * 1 行を箱の幅に収める字の大きさと字間。
+ *
+ * `labelPlan` は箱の **高さ** だけから字の大きさを決めていて、 幅も字数も見ていない。 その
+ * ままだと長い名前や幅の広い字が箱の左右へ出る (幅 140 の箱で `W` 20 個は 18px で 373.7 =
+ * 左右へ 117)。 絵と違って `fitArt` は名前を包まないので、 ここで行ごとに縮める。
+ *
+ * 字幅の見積りは共有の `textWidth` (実測を階級で丸め上げた表) が持つ。 字間も同じ割合で
+ * 詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
+ */
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+  const 幅 = textWidth(文字列, 大きさ, 字間);
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
+  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+}
+
+/**
+ * 名前の塊を描く。 縦の位置と大きさは `labelPlan` が決め (箱の下端から積み上げる、 #433)、
+ * 横は `幅に収める` が箱の幅に合わせて縮める。
+ *
+ * `externalLabel` と違い、 **箱の中に必ず収まる**。 字の大きさも箱の高さに追随する。
+ */
+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>
+      )}
+    </>
+  );
+}
+
+/**
+ * ラックの自然な寸法。 **箱の高さで伸ばさない** (#433)。
+ *
+ * 変更前は本体の高さを `node.h - 42` で決めながら、 中の 1 U は固定の高さで積んでいた。
+ * 高さ 208 未満の箱では 1 U が本体をはみ出し、 高さ 72 の名札では箱の下へ 94 出ていた。
+ * 高さを「1 U × 台数」 から決めれば、 中身は本体に必ず収まる。
+ */
+const RACK_SLOT_TOP = 20;
+const RACK_SLOT_H = 32;
+const RACK_SLOT_GAP = 6;
+const RACK_SLOT_N = 4;
+const RACK_BOTTOM = 8;
+const RACK_H =
+  RACK_SLOT_TOP + RACK_SLOT_N * RACK_SLOT_H + (RACK_SLOT_N - 1) * RACK_SLOT_GAP + RACK_BOTTOM;
+
+/**
+ * 本体の幅の下限。 中身 (ドライブベイの右端 68 と右の通気口の左端 `幅 - 42`) が重ならない値。
+ *
+ * 上限は置かない = 変更前と同じく箱の幅いっぱいに広がる。 下限を割る箱では `fitArt` が
+ * 縦横の比を保って縮める。
+ */
+const RACK_W_MIN = 120;
+
+/** shape-server-rack = 19 inch rack (top vent + 4 U rack mount server + power indicator) */
+export function ShapeServerRackNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  // 枠は本体の外へ 線 だけ出る。 外形が箱の幅ちょうどになるよう、 先に本体を細める
+  const 外幅 = Math.max(r.availW, RACK_W_MIN);
+  const bodyW = Math.max(0, 外幅 - frame.strokeWidth);
+  const x = r.cx - bodyW / 2;
+  const y = r.cy - RACK_H / 2;
+  const slotStart = y + RACK_SLOT_TOP;
+  const 広がり: ArtExtent = {
+    上: RACK_H / 2 + 線,
+    下: RACK_H / 2 + 線,
+    左: 外幅 / 2,
+    右: 外幅 / 2,
+  };
+  return (
+    <g>
+      {fitArt(r, 広がり, (
+        <g>
+          <rect
+            data-cdl-role="node-body"
+            x={x}
+            y={y}
+            width={bodyW}
+            height={RACK_H}
+            rx={6}
+            {...frame}
+          />
+          {/* top vent grille = 6 horizontal slits */}
+          {[0, 1, 2, 3, 4, 5].map((i) => (
+            <rect
+              key={i}
+              x={x + 10 + i * ((bodyW - 20) / 6)}
+              y={y + 4}
+              width={(bodyW - 20) / 6 - 4}
+              height={4}
+              rx={1}
+              fill="var(--cdl-divider, #d4d4d8)"
+              fillOpacity={0.5}
+              stroke="none"
+            />
+          ))}
+          {/* 4 rack mount server (1 U 相当) */}
+          {Array.from({ length: RACK_SLOT_N }, (_, i) => {
+            const sy = slotStart + i * (RACK_SLOT_H + RACK_SLOT_GAP);
+            const isActive = i === 0;
+            return (
+              <g key={i}>
+                <rect
+                  x={x + 8}
+                  y={sy}
+                  width={bodyW - 16}
+                  height={RACK_SLOT_H}
+                  rx={2}
+                  fill="var(--cdl-divider, #d4d4d8)"
+                  fillOpacity={i === 0 ? 0.15 : 0.4}
+                  stroke={frame.stroke}
+                  strokeWidth={1}
+                />
+                {/* left power LED + HDD LED */}
+                <circle cx={x + 16} cy={sy + RACK_SLOT_H / 2} r={2.5} fill={isActive ? "#27c93f" : "#4a5266"} stroke="none">
+                  {isActive && <animate attributeName="opacity" values="1;0.3;1" dur="1.5s" repeatCount="indefinite" />}
+                </circle>
+                <circle cx={x + 24} cy={sy + RACK_SLOT_H / 2} r={2.5} fill={isActive ? "#ffbd2e" : "#4a5266"} stroke="none">
+                  {isActive && <animate attributeName="opacity" values="0.4;1;0.4" dur="0.6s" repeatCount="indefinite" />}
+                </circle>
+                {/* mid drive bays (2 slots) */}
+                <rect x={x + 34} y={sy + 6} width={16} height={RACK_SLOT_H - 12} rx={1} fill="#2a3140" opacity={0.35} stroke="none" />
+                <rect x={x + 52} y={sy + 6} width={16} height={RACK_SLOT_H - 12} rx={1} fill="#2a3140" opacity={0.35} stroke="none" />
+                {/* right vent grille */}
+                {[0, 1, 2, 3].map((j) => (
+                  <rect
+                    key={j}
+                    x={x + bodyW - 42 + j * 8}
+                    y={sy + RACK_SLOT_H / 2 - 6}
+                    width={4}
+                    height={12}
+                    rx={1}
+                    fill="var(--cdl-divider, #d4d4d8)"
+                    fillOpacity={0.6}
+                    stroke="none"
+                  />
+                ))}
+              </g>
+            );
+          })}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * 網の絵の自然な寸法。 **箱を見ずに描く** ので `fitArt` で収める (#433)。
+ *
+ * 中心から 105 (hub 30 + 腕 68 + 端 7) 広がる。 高さ 72 / 幅 140 の名札では左右へ 21.9、
+ * 下へ 55 出ていたが、 **寸法は変更前のまま** で `fitArt` に収めさせる = 帯に収まる箱では
+ * 変更前と同じ大きさで描かれる。
+ */
+const HUB_R = 30;
+const ARM_LEN = 68;
+const END_R = 7;
+
+/** 中央の電波の弧 3 段と、 その基準の高さ。 hub の中に収まる大きさ。 */
+const WIFI_ARC_R = [10, 16, 22];
+const WIFI_BASE_Y = 5;
+
+/** shape-network-node = 六角 hub (network signal cone icon + 6-arm radial + node dots) */
+export function ShapeNetworkNodeNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  // 6 方向 radial (60 度刻み)
+  const dirs = Array.from({ length: 6 }, (_, i) => {
+    const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
+    return { dx: Math.cos(a), dy: Math.sin(a), i };
+  });
+  // 広がりは **描く側の値から** 出す。 表に書き写すと腕の長さを変えた時に片方だけ古くなる
+  const 端まで = HUB_R + ARM_LEN;
+  const 縦広がり = Math.max(...dirs.map((d) => Math.abs(d.dy))) * 端まで + END_R + 線;
+  const 横広がり = Math.max(...dirs.map((d) => Math.abs(d.dx))) * 端まで + END_R + 線;
+  const 広がり: ArtExtent = { 上: 縦広がり, 下: 縦広がり, 左: 横広がり, 右: 横広がり };
+  return (
+    <g>
+      {fitArt(r, 広がり, (
+        <g>
+          {/* 6 arms + endpoints */}
+          {dirs.map((d) => {
+            const ex = cx + d.dx * 端まで;
+            const ey = cy + d.dy * 端まで;
+            const sx = cx + d.dx * HUB_R;
+            const sy = cy + d.dy * HUB_R;
+            return (
+              <g key={d.i}>
+                <line
+                  x1={sx}
+                  y1={sy}
+                  x2={ex}
+                  y2={ey}
+                  stroke={frame.stroke}
+                  strokeWidth={frame.strokeWidth}
+                  strokeLinecap="round"
+                />
+                <circle
+                  cx={ex}
+                  cy={ey}
+                  r={END_R}
+                  fill="var(--cdl-node-fill, #ffffff)"
+                  stroke={frame.stroke}
+                  strokeWidth={frame.strokeWidth}
+                />
+                {/* signal packet dot on line, animate along path */}
+                <circle r={2.5} fill="var(--cdl-tone-accent, #2d6a8f)">
+                  <animate attributeName="cx" values={`${sx};${ex};${sx}`} dur={`${1.5 + d.i * 0.2}s`} repeatCount="indefinite" />
+                  <animate attributeName="cy" values={`${sy};${ey};${sy}`} dur={`${1.5 + d.i * 0.2}s`} repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+          {/* hub hex */}
+          <polygon
+            data-cdl-role="node-body"
+            points={dirs.map((d) => `${cx + d.dx * HUB_R},${cy + d.dy * HUB_R}`).join(" ")}
+            fill="var(--cdl-node-fill, #ffffff)"
+            stroke={frame.stroke}
+            strokeWidth={frame.strokeWidth}
+            strokeLinejoin="round"
+          />
+          {/* signal cone icon (wifi 3 段 arc) 中央 */}
+          {WIFI_ARC_R.map((arcR, i) => (
+            <path
+              key={i}
+              d={`M ${cx - arcR * 0.75} ${cy + WIFI_BASE_Y} A ${arcR} ${arcR} 0 0 1 ${cx + arcR * 0.75} ${cy + WIFI_BASE_Y}`}
+              fill="none"
+              stroke="var(--cdl-tone-accent, #2d6a8f)"
+              strokeWidth={2}
+              opacity={0.85 - i * 0.2}
+              strokeLinecap="round"
+            />
+          ))}
+          <circle cx={cx} cy={cy + WIFI_BASE_Y + 3} r={2.5} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/**
+ * スマホの自然な寸法。 **名前の場所を先に空けてから描く** (#433)。
+ *
+ * 変更前は本体を `node.h - 20` の高さで箱いっぱいに描き、 名前をその下 (`+22`) に置いていた。
+ * 絵そのものは箱に収まっていて、 箱の下へ 26.2 出ていたのは名前の方 = 名前に場所を与えれば
+ * 直る。 絵は残った帯に描き、 帯より大きい時だけ `fitArt` が縮める。
+ *
+ * 寸法は **変更前の既定の箱 (200 x 260) で描かれていた値** をそのまま自然な寸法にする =
+ * 高さ 260 の箱での見え方が変わらない。 中の部品 (受話口 / 画面 / ホームボタン) の位置も
+ * 変更前の固定値のまま合う。
+ */
+const PHONE_H = 240;
+const PHONE_W = 110;
+
+/** shape-mobile-device = スマホ (rounded rect + speaker slit + home button) */
+export function ShapeMobileDeviceNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  const x = r.cx - PHONE_W / 2;
+  const y = r.cy - PHONE_H / 2;
+  const screenPad = 10;
+  const screenTop = y + 26;
+  const screenH = PHONE_H - 60;
+  const 広がり: ArtExtent = {
+    上: PHONE_H / 2 + 線,
+    下: PHONE_H / 2 + 線,
+    左: PHONE_W / 2 + 線,
+    右: PHONE_W / 2 + 線,
+  };
+  return (
+    <g>
+      {fitArt(r, 広がり, (
+        <g>
+          <rect
+            data-cdl-role="node-body"
+            x={x}
+            y={y}
+            width={PHONE_W}
+            height={PHONE_H}
+            rx={16}
+            {...frame}
+          />
+          <rect
+            x={x + PHONE_W / 2 - 18}
+            y={y + 12}
+            width={36}
+            height={4}
+            rx={2}
+            fill="var(--cdl-divider, #d4d4d8)"
+            stroke="none"
+          />
+          <rect
+            x={x + screenPad}
+            y={screenTop}
+            width={PHONE_W - screenPad * 2}
+            height={screenH}
+            rx={4}
+            fill="var(--cdl-tone-accent, #2d6a8f)"
+            fillOpacity={0.12}
+            stroke={frame.stroke}
+            strokeWidth={1}
+          />
+          <circle
+            cx={x + PHONE_W / 2}
+            cy={y + PHONE_H - 16}
+            r={7}
+            fill="var(--cdl-node-fill, #ffffff)"
+            stroke={frame.stroke}
+            strokeWidth={frame.strokeWidth}
+          />
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-iot-sensor = 円形 sensor + 3 波紋 arc (電波発信、 IoT beacon) */
+export function ShapeIotSensorNode({ node, active }: ShapeProps): JSX.Element {
+  const cx = node.cx;
+  const cy = node.cy - 14;
+  const frame = commonFrame(active);
+  const bodyR = 22;
+  const waveArcs = [
+    { r: 38, opacity: 0.55 },
+    { r: 54, opacity: 0.35 },
+    { r: 70, opacity: 0.2 },
+  ];
+  return (
+    <g>
+      {waveArcs.map((w, i) => (
+        <path
+          key={i}
+          d={`M ${cx - w.r} ${cy} A ${w.r} ${w.r} 0 0 1 ${cx + w.r} ${cy}`}
+          fill="none"
+          stroke={frame.stroke}
+          strokeWidth={frame.strokeWidth}
+          opacity={w.opacity}
+          strokeLinecap="round"
+        />
+      ))}
+      <circle
+        data-cdl-role="node-body"
+        cx={cx}
+        cy={cy}
+        r={bodyR}
+        {...frame}
+      />
+      <circle
+        cx={cx}
+        cy={cy}
+        r={bodyR * 0.4}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        stroke="none"
+      />
+      {node.eyebrow && (
+        <text
+          x={cx}
+          y={cy - 82}
+          fontSize={12}
+          fontWeight={700}
+          letterSpacing={2}
+          textAnchor="middle"
+          fill="var(--cdl-tone-accent, #2d6a8f)"
+        >
+          {node.eyebrow}
+        </text>
+      )}
+      <text
+        data-cdl-role="node-label"
+        x={cx}
+        y={node.cy + node.h / 2 - 20}
+        fontSize={15}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+      {node.subtitle && (
+        <text
+          x={cx}
+          y={node.cy + node.h / 2 - 4}
+          fontSize={11}
+          textAnchor="middle"
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {node.subtitle}
+        </text>
+      )}
+    </g>
+  );
+}
+
+/** shape-robot-arm = 産業ロボアーム (base + 3 関節 + 2 爪 gripper、 anatomically correct) */
+export function ShapeRobotArmNode({ node, active }: ShapeProps): JSX.Element {
+  const cx = node.cx;
+  const baseCenterY = node.cy + node.h / 2 - 60;
+  const frame = commonFrame(active);
+  const baseW = 90;
+  const baseH = 22;
+  const baseTop = baseCenterY - baseH / 2;
+  // upper arm (shoulder → elbow)
+  const shoulderCy = baseTop - 8;
+  const elbowX = cx - 10;
+  const elbowY = shoulderCy - 60;
+  // forearm (elbow → wrist)
+  const wristX = cx + 42;
+  const wristY = elbowY - 34;
+  const armThickness = 14;
+  // gripper 2 爪
+  const gripperOpen = 12;
+  return (
+    <g>
+      {/* base with mounting bolts */}
+      <rect
+        data-cdl-role="node-body"
+        x={cx - baseW / 2}
+        y={baseTop}
+        width={baseW}
+        height={baseH}
+        rx={3}
+        {...frame}
+      />
+      <rect
+        x={cx - baseW / 2 - 6}
+        y={baseTop + baseH}
+        width={baseW + 12}
+        height={4}
+        rx={1}
+        {...frame}
+      />
+      {[-1, 0, 1].map((i) => (
+        <circle
+          key={i}
+          cx={cx + i * 24}
+          cy={baseTop + baseH / 2}
+          r={2}
+          fill="var(--cdl-divider, #d4d4d8)"
+          fillOpacity={0.6}
+          stroke="none"
+        />
+      ))}
+      {/* upper arm (shoulder pivot → elbow) */}
+      <line
+        x1={cx}
+        y1={shoulderCy}
+        x2={elbowX}
+        y2={elbowY}
+        stroke={frame.stroke}
+        strokeWidth={armThickness}
+        strokeLinecap="round"
+      />
+      <line
+        x1={cx}
+        y1={shoulderCy}
+        x2={elbowX}
+        y2={elbowY}
+        stroke="var(--cdl-node-fill, #ffffff)"
+        strokeWidth={armThickness - 4}
+        strokeLinecap="round"
+      />
+      {/* shoulder joint */}
+      <circle
+        cx={cx}
+        cy={shoulderCy}
+        r={12}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.4}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      <circle cx={cx} cy={shoulderCy} r={3} fill={frame.stroke} stroke="none" />
+      {/* forearm (elbow → wrist) */}
+      <line
+        x1={elbowX}
+        y1={elbowY}
+        x2={wristX}
+        y2={wristY}
+        stroke={frame.stroke}
+        strokeWidth={armThickness}
+        strokeLinecap="round"
+      />
+      <line
+        x1={elbowX}
+        y1={elbowY}
+        x2={wristX}
+        y2={wristY}
+        stroke="var(--cdl-node-fill, #ffffff)"
+        strokeWidth={armThickness - 4}
+        strokeLinecap="round"
+      />
+      {/* elbow joint */}
+      <circle
+        cx={elbowX}
+        cy={elbowY}
+        r={10}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.4}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      <circle cx={elbowX} cy={elbowY} r={2.5} fill={frame.stroke} stroke="none" />
+      {/* wrist joint */}
+      <circle
+        cx={wristX}
+        cy={wristY}
+        r={8}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.4}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* gripper 2 爪 (V 字型) */}
+      <line
+        x1={wristX}
+        y1={wristY - 4}
+        x2={wristX - gripperOpen}
+        y2={wristY - 22}
+        stroke={frame.stroke}
+        strokeWidth={5}
+        strokeLinecap="round"
+      />
+      <line
+        x1={wristX}
+        y1={wristY - 4}
+        x2={wristX + gripperOpen}
+        y2={wristY - 22}
+        stroke={frame.stroke}
+        strokeWidth={5}
+        strokeLinecap="round"
+      />
+      {/* 掴んでいる想定の小 box */}
+      <rect
+        x={wristX - 6}
+        y={wristY - 28}
+        width={12}
+        height={6}
+        rx={1}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.5}
+        stroke={frame.stroke}
+        strokeWidth={1}
+      />
+      {externalLabel(node, cx, node.cy + node.h / 2 - 18)}
+    </g>
+  );
+}
+
+/**
+ * 人工衛星の寸法。 **箱を見ずに描く** ので `fitArt` で収める (#433)。
+ *
+ * 変更前は幅 140 の名札で左右へ 33、 下へ 2 出ていた。 大きさ自体は自然な大きさの上限
+ * (縦 144) に収まる (縦 101) ので、 変更前の寸法をそのまま使う = 大きい箱での見え方は変わらない。
+ */
+const SAT_BODY_W = 54;
+const SAT_BODY_H = 48;
+const SAT_PANEL_W = 68;
+const SAT_PANEL_H = 40;
+const SAT_PANEL_GAP = 8;
+const SAT_DISH_R = 12;
+/** 皿アンテナの支柱が皿の底からさらに下る分。 */
+const SAT_DISH_STEM = 12;
+/** 上のアンテナの長さと、 先端の球の半径。 */
+const SAT_MAST_LEN = 22;
+const SAT_MAST_TIP_R = 4;
+
+/** shape-satellite = 人工衛星 (body + 左右 solar panel + dish antenna + orbit arc) */
+export function ShapeSatelliteNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const frame = commonFrame(active);
+  const 線 = frame.strokeWidth / 2;
+  const bodyW = SAT_BODY_W;
+  const bodyH = SAT_BODY_H;
+  const panelW = SAT_PANEL_W;
+  const panelH = SAT_PANEL_H;
+  const panelGap = SAT_PANEL_GAP;
+  const dishR = SAT_DISH_R;
+  const orbitRx = r.availW * 0.42;
+  const 広がり: ArtExtent = {
+    上: bodyH / 2 + SAT_MAST_LEN + SAT_MAST_TIP_R + 線,
+    下: bodyH / 2 + dishR + SAT_DISH_STEM + 線,
+    // 帆と軌道の輪のうち広い方。 軌道は箱の幅から決まるので、 帆より広くなることがある
+    左: Math.max(bodyW / 2 + panelGap + panelW + 線, orbitRx),
+    右: Math.max(bodyW / 2 + panelGap + panelW + 線, orbitRx),
+  };
+  return (
+    <g>
+      {fitArt(r, 広がり, (
+        <g>
+          {/* orbit arc 背景 (点線 ellipse) */}
+          <ellipse
+            cx={cx}
+            cy={cy + 4}
+            rx={orbitRx}
+            ry={12}
+            fill="none"
+            stroke="var(--cdl-divider, #d4d4d8)"
+            strokeWidth={1}
+            strokeDasharray="4 4"
+            opacity={0.5}
+          />
+          {/* left solar panel with photovoltaic cell grid (4x2) */}
+          <g>
+            <rect
+              x={cx - bodyW / 2 - panelGap - panelW}
+              y={cy - panelH / 2}
+              width={panelW}
+              height={panelH}
+              rx={2}
+              fill="#1a3450"
+              stroke={frame.stroke}
+              strokeWidth={frame.strokeWidth}
+            />
+            {[0, 1, 2, 3].map((i) => (
+              [0, 1].map((j) => (
+                <rect
+                  key={`L-${i}-${j}`}
+                  x={cx - bodyW / 2 - panelGap - panelW + 3 + i * (panelW - 6) / 4}
+                  y={cy - panelH / 2 + 3 + j * (panelH - 6) / 2}
+                  width={(panelW - 6) / 4 - 2}
+                  height={(panelH - 6) / 2 - 2}
+                  rx={1}
+                  fill="#2d5a90"
+                  stroke="none"
+                  opacity={0.85}
+                />
+              ))
+            ))}
+            {/* boom */}
+            <line
+              x1={cx - bodyW / 2 - panelGap}
+              y1={cy}
+              x2={cx - bodyW / 2}
+              y2={cy}
+              stroke={frame.stroke}
+              strokeWidth={frame.strokeWidth}
+              strokeLinecap="round"
+            />
+          </g>
+          {/* right solar panel */}
+          <g>
+            <rect
+              x={cx + bodyW / 2 + panelGap}
+              y={cy - panelH / 2}
+              width={panelW}
+              height={panelH}
+              rx={2}
+              fill="#1a3450"
+              stroke={frame.stroke}
+              strokeWidth={frame.strokeWidth}
+            />
+            {[0, 1, 2, 3].map((i) => (
+              [0, 1].map((j) => (
+                <rect
+                  key={`R-${i}-${j}`}
+                  x={cx + bodyW / 2 + panelGap + 3 + i * (panelW - 6) / 4}
+                  y={cy - panelH / 2 + 3 + j * (panelH - 6) / 2}
+                  width={(panelW - 6) / 4 - 2}
+                  height={(panelH - 6) / 2 - 2}
+                  rx={1}
+                  fill="#2d5a90"
+                  stroke="none"
+                  opacity={0.85}
+                />
+              ))
+            ))}
+            <line
+              x1={cx + bodyW / 2 + panelGap}
+              y1={cy}
+              x2={cx + bodyW / 2}
+              y2={cy}
+              stroke={frame.stroke}
+              strokeWidth={frame.strokeWidth}
+              strokeLinecap="round"
+            />
+          </g>
+          {/* main body */}
+          <rect
+            data-cdl-role="node-body"
+            x={cx - bodyW / 2}
+            y={cy - bodyH / 2}
+            width={bodyW}
+            height={bodyH}
+            rx={5}
+            {...frame}
+          />
+          {/* body detail = horizontal separator line */}
+          <line
+            x1={cx - bodyW / 2}
+            y1={cy}
+            x2={cx + bodyW / 2}
+            y2={cy}
+            stroke={frame.stroke}
+            strokeWidth={1}
+            opacity={0.5}
+          />
+          {/* dish antenna (parabolic reflector) at bottom */}
+          <path
+            d={`M ${cx - dishR} ${cy + bodyH / 2} Q ${cx} ${cy + bodyH / 2 + dishR + 4}, ${cx + dishR} ${cy + bodyH / 2} Z`}
+            fill="var(--cdl-node-fill, #ffffff)"
+            stroke={frame.stroke}
+            strokeWidth={frame.strokeWidth}
+            strokeLinejoin="round"
+          />
+          <line
+            x1={cx}
+            y1={cy + bodyH / 2 + dishR + 4}
+            x2={cx}
+            y2={cy + bodyH / 2 + dishR + SAT_DISH_STEM}
+            stroke={frame.stroke}
+            strokeWidth={frame.strokeWidth}
+            strokeLinecap="round"
+          />
+          {/* top antenna mast */}
+          <line
+            x1={cx}
+            y1={cy - bodyH / 2}
+            x2={cx}
+            y2={cy - bodyH / 2 - SAT_MAST_LEN}
+            stroke={frame.stroke}
+            strokeWidth={frame.strokeWidth}
+            strokeLinecap="round"
+          />
+          <circle
+            cx={cx}
+            cy={cy - bodyH / 2 - SAT_MAST_LEN}
+            r={SAT_MAST_TIP_R}
+            fill="var(--cdl-tone-accent, #2d6a8f)"
+            stroke={frame.stroke}
+            strokeWidth={frame.strokeWidth}
+          />
+          {/* 信号 dot 上に発射 */}
+          <circle cx={cx} cy={cy - bodyH / 2 - SAT_MAST_LEN} r={2} fill="#ff5f56" stroke="none">
+            <animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite" />
+          </circle>
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}