@cardenelabs/cdl 0.5.0

package/src/kinds/shape-blockchain.tsx

@@ -0,0 +1,750 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { fitArt, labelPlan, shapeRegion, textWidth, type ArtExtent } from "./shape-region";
+
+/**
+ * Shape-driven blockchain / web3 10 kinds (CAR-1111 Phase 2-D)。
+ *
+ * smart-contract / blockchain-block / rpc-node / wallet / nft / token /
+ * blockchain / bitcoin-chain / ethereum-chain / blockchain-node。
+ *
+ * ETH icon は Ethereum 公式 Diamond ロゴ (上半分 4 面クリスタル + 下半分 2 面三角錐)。
+ */
+
+type ShapeProps = {
+  node: LaidNode;
+  active: boolean;
+};
+
+const FRAME_SW_ACTIVE = 3;
+const FRAME_SW_INACTIVE = 1.5;
+
+const SMART_CONTRACT_W = 220;
+const SMART_CONTRACT_H = 220;
+
+const BLOCK_W = 240;
+const BLOCK_H = 220;
+const BLOCK_SHADOW = 6;
+
+const NFT_W = 220;
+const NFT_H = 240;
+const NFT_SHADOW = 4;
+
+const CHAIN_BLOCK_COUNT = 5;
+const CHAIN_BLOCK_W = 50;
+const CHAIN_BLOCK_H = 66;
+const CHAIN_LINK_W = 12;
+const CHAIN_SHADOW = 3;
+const CHAIN_BLOCK_SW = 2.5;
+
+const NODE_HEX_R = 44;
+const NODE_PEER_R = 12;
+const NODE_PEER_GAP = 22;
+const NODE_PEER_DIST = NODE_HEX_R + NODE_PEER_R + NODE_PEER_GAP;
+
+const commonFrame = (active: boolean) => ({
+  fill: "var(--cdl-node-fill, #ffffff)",
+  stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+  strokeWidth: active ? FRAME_SW_ACTIVE : FRAME_SW_INACTIVE,
+});
+
+function smartContractExtent(strokeWidth: number): ArtExtent {
+  const 線 = strokeWidth / 2;
+  return {
+    上: SMART_CONTRACT_H / 2 + 線,
+    下: SMART_CONTRACT_H / 2 + 線,
+    左: SMART_CONTRACT_W / 2 + 線,
+    右: SMART_CONTRACT_W / 2 + 線,
+  };
+}
+
+function blockchainBlockExtent(strokeWidth: number): ArtExtent {
+  const 線 = strokeWidth / 2;
+  return {
+    上: BLOCK_H / 2 + 線,
+    下: BLOCK_H / 2 + Math.max(BLOCK_SHADOW, 線),
+    左: BLOCK_W / 2 + 線,
+    右: BLOCK_W / 2 + Math.max(BLOCK_SHADOW, 線),
+  };
+}
+
+function nftExtent(strokeWidth: number): ArtExtent {
+  const 線 = strokeWidth / 2;
+  return {
+    上: NFT_H / 2 + 線,
+    下: NFT_H / 2 + Math.max(NFT_SHADOW, 線),
+    左: NFT_W / 2 + 線,
+    右: NFT_W / 2 + Math.max(NFT_SHADOW, 線),
+  };
+}
+
+function chainExtent(): ArtExtent {
+  const 線 = CHAIN_BLOCK_SW / 2;
+  const 全幅 = CHAIN_BLOCK_COUNT * CHAIN_BLOCK_W + (CHAIN_BLOCK_COUNT - 1) * CHAIN_LINK_W;
+  return {
+    上: CHAIN_BLOCK_H / 2 + 線,
+    下: CHAIN_BLOCK_H / 2 + Math.max(CHAIN_SHADOW, 線),
+    左: 全幅 / 2 + 線,
+    右: 全幅 / 2 + Math.max(CHAIN_SHADOW, 線),
+  };
+}
+
+function blockchainNodeExtent(strokeWidth: number): ArtExtent {
+  const 線 = strokeWidth / 2;
+  const 縦 = NODE_PEER_DIST + NODE_PEER_R + 線;
+  const 横 = (NODE_PEER_DIST + NODE_PEER_R) * Math.cos(Math.PI / 6) + 線;
+  return { 上: 縦, 下: 縦, 左: 横, 右: 横 };
+}
+
+/**
+ * 名前の行を箱の幅に収める倍率。
+ *
+ * 字間は字の大きさに追随しないため、 大きさだけを縮めても幅は `字間 x 字数` より狭く
+ * ならない。 大きさと字間を同じ倍率で縮めると、 両項が揃って縮むので幅が倍率に比例する。
+ *
+ * 収まっている間は 1 を返す = 箱が広い時の見え方を変えない。
+ */
+function 幅の倍率(text: string, size: number, letterSpacing: number, 幅: number): number {
+  if (!(幅 > 0) || !(size > 0)) return 1;
+  // 階級表を二重に持つと、 片方を直した時にもう片方だけ古くなる。
+  const 実幅 = textWidth(text, size, letterSpacing);
+  return 実幅 > 幅 ? 幅 / 実幅 : 1;
+}
+
+/**
+ * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
+ */
+function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
+  const 肩書倍率 = node.eyebrow && plan.肩書
+    ? 幅の倍率(node.eyebrow, plan.肩書.size, 2, node.w)
+    : 1;
+  const 名前倍率 = 幅の倍率(node.title, plan.名前.size, 0, node.w);
+  const 説明倍率 = node.subtitle && plan.説明
+    ? 幅の倍率(node.subtitle, plan.説明.size, 0, node.w)
+    : 1;
+  return (
+    <>
+      {node.eyebrow && plan.肩書 && (
+        <text x={cx} y={plan.肩書.y} fontSize={plan.肩書.size * 肩書倍率} fontWeight={700} letterSpacing={2 * 肩書倍率} 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 * 名前倍率} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
+        {node.title}
+      </text>
+      {node.subtitle && plan.説明 && (
+        <text x={cx} y={plan.説明.y} fontSize={plan.説明.size * 説明倍率} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+          {node.subtitle}
+        </text>
+      )}
+    </>
+  );
+}
+
+
+/**
+ * Ethereum 公式 Diamond ロゴを描画する helper。
+ * cx, cy 中心、 h = ロゴ全高の半分 (上 = cy - h、 下 = cy + h)。
+ * 上半分 = 4 面クリスタル (右 / 左に濃淡差)、 下半分 = 2 面三角錐。
+ * white = 上半分明色 / accent 左右暗色 / stroke = ロゴ輪郭。
+ */
+function EthereumDiamond({ cx, cy, h, colors }: { cx: number; cy: number; h: number; colors?: { light: string; medium: string; dark: string; darker: string; stroke: string } }) {
+  const c = colors ?? { light: "#8a92b2", medium: "#62688f", dark: "#454a75", darker: "#3c3c3b", stroke: "#3c3c3b" };
+  const w = h * 0.62;
+  const midY = cy - h * 0.1; // 中央線 (上下切替位置)
+  const upperTopY = cy - h;
+  const lowerBotY = cy + h;
+  return (
+    <g>
+      {/* 上半分左面 (medium) */}
+      <path d={`M ${cx} ${upperTopY} L ${cx - w} ${cy + h * 0.05} L ${cx} ${midY} Z`} fill={c.medium} stroke={c.stroke} strokeWidth={0.6} strokeLinejoin="round" />
+      {/* 上半分右面 (light) */}
+      <path d={`M ${cx} ${upperTopY} L ${cx} ${midY} L ${cx + w} ${cy + h * 0.05} Z`} fill={c.light} stroke={c.stroke} strokeWidth={0.6} strokeLinejoin="round" />
+      {/* 下半分左面 (darker) */}
+      <path d={`M ${cx} ${midY} L ${cx - w} ${cy + h * 0.05} L ${cx} ${lowerBotY} Z`} fill={c.darker} stroke={c.stroke} strokeWidth={0.6} strokeLinejoin="round" />
+      {/* 下半分右面 (dark) */}
+      <path d={`M ${cx} ${midY} L ${cx + w} ${cy + h * 0.05} L ${cx} ${lowerBotY} Z`} fill={c.dark} stroke={c.stroke} strokeWidth={0.6} strokeLinejoin="round" />
+    </g>
+  );
+}
+
+/** shape-smart-contract = 契約書 (前バージョン: document + 契約書テキスト + function 表示 + 底に回転 gear) */
+export function ShapeSmartContractNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const docW = SMART_CONTRACT_W;
+  const docH = SMART_CONTRACT_H;
+  const cx = r.cx;
+  const cy = r.cy;
+  const x = cx - docW / 2;
+  const y = cy - docH / 2;
+  const fold = 28;
+  const path = `M ${x + 10} ${y} L ${x + docW - fold} ${y} L ${x + docW} ${y + fold} L ${x + docW} ${y + docH - 10} Q ${x + docW} ${y + docH}, ${x + docW - 10} ${y + docH} L ${x + 10} ${y + docH} Q ${x} ${y + docH}, ${x} ${y + docH - 10} L ${x} ${y + 10} Q ${x} ${y}, ${x + 10} ${y} Z`;
+  const foldPath = `M ${x + docW - fold} ${y} L ${x + docW - fold} ${y + fold} L ${x + docW} ${y + fold}`;
+  // gear at bottom-right
+  const gearCx = x + docW - 32;
+  const gearCy = y + docH - 32;
+  const gearBodyR = 14;
+  const gearTipR = gearBodyR + 6;
+  const teeth = 10;
+  const anglePerTooth = (Math.PI * 2) / teeth;
+  const halfBase = anglePerTooth * 0.35;
+  const halfTip = anglePerTooth * 0.2;
+  const gearPts: string[] = [];
+  for (let i = 0; i < teeth; i++) {
+    const center = i * anglePerTooth;
+    const a1 = center - halfBase;
+    const a2 = center - halfTip;
+    const a3 = center + halfTip;
+    const a4 = center + halfBase;
+    gearPts.push(`${gearCx + Math.cos(a1) * gearBodyR},${gearCy + Math.sin(a1) * gearBodyR}`);
+    gearPts.push(`${gearCx + Math.cos(a2) * gearTipR},${gearCy + Math.sin(a2) * gearTipR}`);
+    gearPts.push(`${gearCx + Math.cos(a3) * gearTipR},${gearCy + Math.sin(a3) * gearTipR}`);
+    gearPts.push(`${gearCx + Math.cos(a4) * gearBodyR},${gearCy + Math.sin(a4) * gearBodyR}`);
+  }
+  const art = (
+    <g>
+      <path data-cdl-role="node-body" d={path} {...frame} strokeLinejoin="round" />
+      <path d={foldPath} fill="none" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
+      {/* 契約書テキスト 4 行 */}
+      {[y + 40, y + 58, y + 76, y + 94].map((ly, i) => (
+        <rect key={i} x={x + 16} y={ly - 3} width={docW - 32 - i * 22} height={5} rx={1} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.7} stroke="none" />
+      ))}
+      {/* function signature */}
+      <text x={x + 16} y={y + docH - 46} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-tone-accent, #2d6a8f)">
+        {"function execute()"}
+      </text>
+      {/* gear (auto-execution 記号) */}
+      <polygon
+        points={gearPts.join(" ")}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        stroke={frame.stroke}
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      >
+        <animateTransform attributeName="transform" type="rotate" from={`0 ${gearCx} ${gearCy}`} to={`360 ${gearCx} ${gearCy}`} dur="8s" repeatCount="indefinite" />
+      </polygon>
+      <circle cx={gearCx} cy={gearCy} r={gearBodyR * 0.4} fill="var(--cdl-node-fill, #ffffff)" stroke="none" />
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, smartContractExtent(frame.strokeWidth), art)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-blockchain-block = 単一 block 詳細 (header + 5 fields: hash/prev/merkle/nonce/tx + chain link icon) */
+export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const bw = BLOCK_W;
+  const bh = BLOCK_H;
+  const cx = r.cx;
+  const cy = r.cy;
+  const x = cx - bw / 2;
+  const y = cy - bh / 2;
+  const art = (
+    <g>
+      {/* 3D shadow */}
+      <rect x={x + 6} y={y + 6} width={bw} height={bh} rx={8} fill={frame.stroke} opacity={0.2} stroke="none" />
+      <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={8} {...frame} />
+      {/* header bar */}
+      <path d={`M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.9} stroke="none" />
+      <text x={x + 14} y={y + 22} fontSize={13} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
+        Block #421,873
+      </text>
+      <circle cx={x + bw - 16} cy={y + 16} r={5.5} fill="#7cd88f" stroke="#ffffff" strokeWidth={1.5} />
+      {/* fields */}
+      {[
+        { label: "hash", value: "0xaf31c9d2..." },
+        { label: "prev", value: "0x7b3f92c1..." },
+        { label: "merkle", value: "0xc1892f4a..." },
+        { label: "nonce", value: "82,914" },
+        { label: "tx", value: "142 tx" },
+      ].map((f, i) => (
+        <g key={i}>
+          <text x={x + 14} y={y + 54 + i * 22} fontSize={10.5} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
+            {f.label}
+          </text>
+          <text x={x + bw - 14} y={y + 54 + i * 22} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
+            {f.value}
+          </text>
+          <line x1={x + 14} y1={y + 60 + i * 22} x2={x + bw - 14} y2={y + 60 + i * 22} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
+        </g>
+      ))}
+      {/* chain link icon (bottom center) */}
+      <g transform={`translate(${cx - 32}, ${y + bh - 26})`}>
+        <rect x={0} y={0} width={22} height={18} rx={3} fill="none" stroke={frame.stroke} strokeWidth={1.5} />
+        <line x1={22} y1={9} x2={42} y2={9} stroke={frame.stroke} strokeWidth={1.5} />
+        <rect x={42} y={0} width={22} height={18} rx={3} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.5} stroke={frame.stroke} strokeWidth={1.5} />
+      </g>
+    </g>
+  );
+  return <g>{fitArt(r, blockchainBlockExtent(frame.strokeWidth), art)}</g>;
+}
+
+/** shape-blockchain = 汎用 5 block chain (シンプル hash pointer) */
+export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const blockCount = CHAIN_BLOCK_COUNT;
+  const blockW = CHAIN_BLOCK_W;
+  const blockH = CHAIN_BLOCK_H;
+  const linkW = CHAIN_LINK_W;
+  const totalW = blockCount * blockW + (blockCount - 1) * linkW;
+  const startX = cx - totalW / 2;
+  const art = (
+    <g>
+      {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
+        const bx = startX + i * (blockW + linkW);
+        const isCurrent = i === blockCount - 1;
+        return (
+          <g key={i}>
+            {i > 0 && (
+              <g>
+                <line x1={bx - linkW} y1={cy} x2={bx} y2={cy} stroke={frame.stroke} strokeWidth={3} strokeLinecap="round" />
+                <circle cx={bx - linkW / 2} cy={cy} r={2.5} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none">
+                  <animate attributeName="opacity" values="0.3;1;0.3" dur={`${1 + i * 0.2}s`} repeatCount="indefinite" />
+                </circle>
+              </g>
+            )}
+            <rect x={bx + 3} y={cy - blockH / 2 + 3} width={blockW} height={blockH} rx={4} fill={frame.stroke} opacity={0.18} stroke="none" />
+            <rect
+              data-cdl-role={i === 0 ? "node-body" : undefined}
+              x={bx}
+              y={cy - blockH / 2}
+              width={blockW}
+              height={blockH}
+              rx={4}
+              fill={isCurrent ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-node-fill, #ffffff)"}
+              stroke={frame.stroke}
+              strokeWidth={isCurrent ? 2.5 : 1.5}
+            />
+            <rect x={bx} y={cy - blockH / 2} width={blockW} height={16} rx={4} fill={isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)"} fillOpacity={isCurrent ? 1 : 0.4} stroke="none" />
+            <text x={bx + blockW / 2} y={cy - blockH / 2 + 12} fontSize={10} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+              #{420 + i}
+            </text>
+            <text x={bx + blockW / 2} y={cy + 8} fontSize={14} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)"} fontFamily="Georgia, serif">
+              #
+            </text>
+            <text x={bx + blockW / 2} y={cy + 22} fontSize={7} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
+              0x…
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, chainExtent(), art)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-bitcoin-chain = Bitcoin (橙 accent + ₿ symbol) */
+export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const btcOrange = "#f7931a";
+  const blockCount = CHAIN_BLOCK_COUNT;
+  const blockW = CHAIN_BLOCK_W;
+  const blockH = CHAIN_BLOCK_H;
+  const linkW = CHAIN_LINK_W;
+  const totalW = blockCount * blockW + (blockCount - 1) * linkW;
+  const startX = cx - totalW / 2;
+  const art = (
+    <g>
+      {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
+        const bx = startX + i * (blockW + linkW);
+        const isCurrent = i === blockCount - 1;
+        return (
+          <g key={i}>
+            {i > 0 && <line x1={bx - linkW} y1={cy} x2={bx} y2={cy} stroke={btcOrange} strokeWidth={3.5} strokeLinecap="round" />}
+            <rect x={bx + 3} y={cy - blockH / 2 + 3} width={blockW} height={blockH} rx={4} fill={frame.stroke} opacity={0.18} stroke="none" />
+            <rect
+              data-cdl-role={i === 0 ? "node-body" : undefined}
+              x={bx}
+              y={cy - blockH / 2}
+              width={blockW}
+              height={blockH}
+              rx={4}
+              fill={isCurrent ? btcOrange : "var(--cdl-node-fill, #ffffff)"}
+              stroke={btcOrange}
+              strokeWidth={isCurrent ? 2.5 : 1.5}
+            />
+            <text x={bx + blockW / 2} y={cy - 4} fontSize={30} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : btcOrange} fontFamily="Georgia, serif">
+              ₿
+            </text>
+            <text x={bx + blockW / 2} y={cy + 16} fontSize={9} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+              #{820 + i}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, chainExtent(), art)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-ethereum-chain = Ethereum (紫 accent + 本物 Ethereum Diamond ロゴ) */
+export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const ethPurple = "#627eea";
+  const blockCount = CHAIN_BLOCK_COUNT;
+  const blockW = CHAIN_BLOCK_W;
+  const blockH = CHAIN_BLOCK_H;
+  const linkW = CHAIN_LINK_W;
+  const totalW = blockCount * blockW + (blockCount - 1) * linkW;
+  const startX = cx - totalW / 2;
+  const art = (
+    <g>
+      {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
+        const bx = startX + i * (blockW + linkW);
+        const isCurrent = i === blockCount - 1;
+        const iconColors = isCurrent
+          ? { light: "#ffffff", medium: "#e5e5f5", dark: "#c9c9e0", darker: "#a4a4c9", stroke: "#ffffff" }
+          : { light: "#8a92b2", medium: "#62688f", dark: "#454a75", darker: "#3c3c3b", stroke: ethPurple };
+        return (
+          <g key={i}>
+            {i > 0 && <line x1={bx - linkW} y1={cy} x2={bx} y2={cy} stroke={ethPurple} strokeWidth={3.5} strokeLinecap="round" />}
+            <rect x={bx + 3} y={cy - blockH / 2 + 3} width={blockW} height={blockH} rx={4} fill={frame.stroke} opacity={0.18} stroke="none" />
+            <rect
+              data-cdl-role={i === 0 ? "node-body" : undefined}
+              x={bx}
+              y={cy - blockH / 2}
+              width={blockW}
+              height={blockH}
+              rx={4}
+              fill={isCurrent ? ethPurple : "var(--cdl-node-fill, #ffffff)"}
+              stroke={ethPurple}
+              strokeWidth={isCurrent ? 2.5 : 1.5}
+            />
+            {/* Ethereum Diamond ロゴ */}
+            <EthereumDiamond cx={bx + blockW / 2} cy={cy - 6} h={16} colors={iconColors} />
+            <text x={bx + blockW / 2} y={cy + 22} fontSize={9} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+              #{21_400 + i}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, chainExtent(), art)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-blockchain-node = P2P full node (中央 hex + 6 peer 外側配置) */
+export function ShapeBlockchainNodeNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const hexR = NODE_HEX_R;
+  const peerR = NODE_PEER_R;
+  const peerDist = NODE_PEER_DIST;
+  const art = (
+    <g>
+      {Array.from({ length: 6 }, (_, i) => i).map((i) => {
+        const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
+        const px = cx + Math.cos(a) * peerDist;
+        const py = cy + Math.sin(a) * peerDist;
+        return (
+          <g key={i}>
+            <line x1={cx + Math.cos(a) * hexR} y1={cy + Math.sin(a) * hexR} x2={px} y2={py} stroke={frame.stroke} strokeWidth={1.5} strokeDasharray="4 3" opacity={0.7} />
+            <polygon
+              points={Array.from({ length: 6 }, (_, k) => {
+                const ka = (k / 6) * Math.PI * 2 - Math.PI / 2;
+                return `${px + Math.cos(ka) * peerR},${py + Math.sin(ka) * peerR}`;
+              }).join(" ")}
+              fill="var(--cdl-node-fill, #ffffff)"
+              stroke={frame.stroke}
+              strokeWidth={1.5}
+              strokeLinejoin="round"
+            />
+            <circle cx={px} cy={py} r={4} fill="#27c93f" stroke="none">
+              <animate attributeName="opacity" values="0.4;1;0.4" dur={`${1.5 + i * 0.2}s`} repeatCount="indefinite" />
+            </circle>
+          </g>
+        );
+      })}
+      <polygon
+        data-cdl-role="node-body"
+        points={Array.from({ length: 6 }, (_, i) => {
+          const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
+          return `${cx + Math.cos(a) * hexR},${cy + Math.sin(a) * hexR}`;
+        }).join(" ")}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.18}
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+        strokeLinejoin="round"
+      />
+      <g transform={`translate(${cx - 16}, ${cy - 16})`}>
+        <rect x={0} y={0} width={32} height={8} rx={2} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
+        <rect x={0} y={12} width={32} height={8} rx={2} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.6} stroke="none" />
+        <rect x={0} y={24} width={32} height={8} rx={2} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.3} stroke="none" />
+      </g>
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, blockchainNodeExtent(frame.strokeWidth), art)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-rpc-node = JSON-RPC provider */
+export function ShapeRpcNodeNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const bw = Math.min(r.availW - 40, 240);
+  const bh = Math.min(r.availH - 20, 180);
+  const x = cx - bw / 2;
+  const y = cy - bh / 2;
+  return (
+    <g>
+      <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={30} rx={10} fill="#2d3a4f" stroke="none" />
+      <circle cx={x + 14} cy={y + 15} r={5} fill="#27c93f" stroke="none">
+        <animate attributeName="opacity" values="0.4;1;0.4" dur="1.5s" repeatCount="indefinite" />
+      </circle>
+      <text x={x + 26} y={y + 20} fontSize={12} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} fill="#7cd88f">
+        RPC ONLINE
+      </text>
+      <text x={cx} y={cy + 6} fontSize={30} fontWeight={700} textAnchor="middle" fill="#e6edf3" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+        {"{...}"}
+      </text>
+      <text x={cx} y={cy + 26} fontSize={11} textAnchor="middle" fill="#7a8290" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+        JSON-RPC 2.0
+      </text>
+      <rect x={x + 16} y={y + bh - 24} width={bw - 32} height={8} rx={4} fill="#0f1419" stroke="none" />
+      <rect x={x + 16} y={y + bh - 24} width={(bw - 32) * 0.92} height={8} rx={4} fill="#27c93f" stroke="none">
+        <animate attributeName="width" values={`${(bw - 32) * 0.86};${(bw - 32) * 0.96};${(bw - 32) * 0.86}`} dur="3s" repeatCount="indefinite" />
+      </rect>
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-wallet = FC-S5 忠実移植 (二つ折り札入れ横長 + fold line 中央 + bar clasp + engraved Ξ text + コイン peek 3) */
+export function ShapeWalletNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 4;
+  // FC-S5 元 SVG = body 220x140 (横長 rounded rect)
+  const w = Math.min(r.availW - 60, 220);
+  const h = Math.min(r.availH - 60, 140);
+  const x = cx - w / 2;
+  const y = cy - h / 2;
+  const accent = "var(--cdl-tone-accent, #2d6a8f)";
+  const accentDarker = "#0f3450";
+  // fold line = body 真ん中 y
+  const foldY = y + h / 2;
+  // bar clasp = FC-S5 元 SVG の比率 = w*0.255 (56/220)、 高さ 12 (fold line 上に重なる)
+  const barW = w * 0.255;
+  const barH = 12;
+  const barX = cx - barW / 2;
+  const barY = foldY - barH / 2 - 3; // fold line が bar 中央 y=148 を通るように配置
+  // コイン peek 3 枚 = FC-S5 元 SVG 座標を w=220 相対比率に変換
+  // 元 = body x=40, y=80、 coin: (98,62 r=14) (150,52 r=16) (200,64 r=13) → 相対 (x + w*0.264, y-18, r*14/220 * w) 等
+  const coins = [
+    { cx: x + w * 0.264, cy: y - 18, r: 14 }, // 左 (元 cx=98, cy=62, r=14)
+    { cx: cx, cy: y - 28, r: 16 }, // 中央 (元 cx=150, cy=52, r=16)
+    { cx: x + w * 0.727, cy: y - 16, r: 13 }, // 右 (元 cx=200, cy=64, r=13)
+  ];
+  return (
+    <g>
+      {/* ==== drop shadow (浮遊感、 FC-S5 元) ==== */}
+      <ellipse cx={cx} cy={y + h + 25} rx={w * 0.45} ry={10} fill="#000" opacity={0.3} stroke="none" />
+      <ellipse cx={cx} cy={y + h + 27} rx={w * 0.4} ry={6} fill="#000" opacity={0.2} stroke="none" />
+      {/* ==== 全体を -3° 回転 (立体感、 FC-S5 元 rotate(-3 150 145)) ==== */}
+      <g transform={`rotate(-3 ${cx} ${cy})`}>
+        {/* ==== コイン peek 3 枚 (body 上端 y より上に配置、 body の背後に半分隠れる) ==== */}
+        {coins.map((coin, i) => (
+          <g key={i}>
+            {/* 底の厚み (FC-S5 元 = ellipse rx=r ry=4) */}
+            <ellipse cx={coin.cx} cy={coin.cy + 4} rx={coin.r} ry={4} fill="#8b6914" />
+            {/* 前面 circle */}
+            <circle cx={coin.cx} cy={coin.cy} r={coin.r} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.8} />
+            {/* highlight ellipse (FC-S5 元では中央 coin のみだが全 coin に統一) */}
+            {i !== 1 ? null : (
+              <ellipse cx={coin.cx - 4} cy={coin.cy - 5} rx={5} ry={4} fill="#f5dea0" opacity={0.7} />
+            )}
+            {/* Ξ 3D shading (Ethereum Diamond) */}
+            <EthereumDiamond
+              cx={coin.cx}
+              cy={coin.cy}
+              h={coin.r * 0.5}
+              colors={{
+                light: "#3a2a08",
+                medium: "#5a4a1a",
+                dark: "#2a1a04",
+                darker: "#3a2a08",
+                stroke: "#3a2a08",
+              }}
+            />
+          </g>
+        ))}
+        {/* ==== body 横長 rounded rect ==== */}
+        <rect
+          data-cdl-role="node-body"
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={14}
+          fill={accent}
+          stroke={accentDarker}
+          strokeWidth={frame.strokeWidth}
+        />
+        {/* ==== fold line (body 中央 y、 1 本線) ==== */}
+        <line x1={x} y1={foldY} x2={x + w} y2={foldY} stroke={accentDarker} strokeWidth={2.5} />
+        <path d={`M ${x + 2} ${foldY - 2} L ${x + w - 2} ${foldY - 2}`} fill="none" stroke="#ffffff" strokeWidth={0.8} opacity={0.3} />
+        {/* ==== bar clasp (fold line 中央に配置、 fold 隠す minimal 形) ==== */}
+        {/* side edge (下 3px 厚み) */}
+        <rect x={barX} y={barY + 3} width={barW} height={barH} fill="#8b6914" />
+        {/* bar body */}
+        <rect x={barX} y={barY} width={barW} height={barH} rx={2} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+        {/* 上部 highlight */}
+        <rect x={barX + 2} y={barY + 2} width={barW - 4} height={3} rx={1} fill="#f5dea0" opacity={0.7} />
+        {/* 両端 rivet 3D (FC-S5 元 = cx=128/172, cy=148, r=2.5) */}
+        <circle cx={barX + 6} cy={foldY} r={2.5} fill="#5a3a10" stroke="#3a2a08" strokeWidth={0.6} />
+        <circle cx={barX + 5} cy={foldY - 1} r={0.8} fill="#8b6914" />
+        <circle cx={barX + barW - 6} cy={foldY} r={2.5} fill="#5a3a10" stroke="#3a2a08" strokeWidth={0.6} />
+        <circle cx={barX + barW - 7} cy={foldY - 1} r={0.8} fill="#8b6914" />
+        {/* engraved Ξ text (FC-S5 元 = SVG text font-size=9、 EthereumDiamond ではない) */}
+        <text x={cx} y={foldY + 3} fontSize={9} fontWeight={700} fill="#5a3a10" textAnchor="middle" opacity={0.8}>Ξ</text>
+        {/* body 上端 highlight (FC-S5 元 = M 42 86 L 258 86) */}
+        <path d={`M ${x + 2} ${y + 6} L ${x + w - 2} ${y + 6}`} fill="none" stroke="#ffffff" strokeWidth={1} opacity={0.4} />
+      </g>
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-nft = NFT card (白 body + accent art frame + 巨大 NFT 文字、 統一デザイン) */
+export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
+  const frame = commonFrame(active);
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy;
+  const cardW = NFT_W;
+  const cardH = NFT_H;
+  const x = cx - cardW / 2;
+  const y = cy - cardH / 2;
+  const artH = cardH * 0.72;
+  const artCx = x + cardW / 2;
+  const artCy = y + artH / 2;
+  const art = (
+    <g>
+      {/* shadow */}
+      <rect x={x + 4} y={y + 4} width={cardW} height={cardH} rx={14} fill={frame.stroke} opacity={0.2} stroke="none" />
+      {/* card body (白背景 + accent stroke) */}
+      <rect data-cdl-role="node-body" x={x} y={y} width={cardW} height={cardH} rx={14} {...frame} />
+      {/* 上部 art area (accent 色 fill light、 他 shape の accent 色帯 pattern) */}
+      <path
+        d={`M ${x} ${y + artH} L ${x} ${y + 14} Q ${x} ${y}, ${x + 14} ${y} L ${x + cardW - 14} ${y} Q ${x + cardW} ${y}, ${x + cardW} ${y + 14} L ${x + cardW} ${y + artH} Z`}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.15}
+        stroke="none"
+      />
+      {/* 巨大 NFT 文字 (art 中央、 accent 色) */}
+      <text
+        x={artCx}
+        y={artCy + 24}
+        fontSize={68}
+        fontWeight={900}
+        letterSpacing={4}
+        textAnchor="middle"
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fontFamily="Georgia, serif"
+      >
+        NFT
+      </text>
+      {/* 下部 info bar */}
+      <line x1={x} y1={y + artH} x2={x + cardW} y2={y + artH} stroke={frame.stroke} strokeWidth={1} opacity={0.5} />
+      {/* token id (左) */}
+      <text x={x + 16} y={y + artH + 30} fontSize={15} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+        #1024
+      </text>
+      {/* verified check (右) */}
+      <g transform={`translate(${x + cardW - 20}, ${y + artH + 22})`}>
+        <circle cx={0} cy={0} r={10} fill="#27c93f" stroke="#ffffff" strokeWidth={2} />
+        <path d="M -4 0 L -1 3 L 4 -3" fill="none" stroke="#ffffff" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </g>
+  );
+  return (
+    <g>
+      {fitArt(r, nftExtent(frame.strokeWidth), art)}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-token = coin (白 body + accent 色 rim + accent 色 Diamond ロゴ、 統一デザイン) */
+export function ShapeTokenNode({ 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;
+  return (
+    <g>
+      {/* shadow */}
+      <circle cx={cx + 4} cy={cy + 4} r={rr} fill={frame.stroke} opacity={0.2} stroke="none" />
+      {/* 硬貨 body (白 + accent stroke) */}
+      <circle
+        data-cdl-role="node-body"
+        cx={cx}
+        cy={cy}
+        r={rr}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={frame.stroke}
+        strokeWidth={frame.strokeWidth}
+      />
+      {/* accent 色 rim (少し内側) */}
+      <circle cx={cx} cy={cy} r={rr - 6} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.12} stroke="var(--cdl-tone-accent, #2d6a8f)" strokeWidth={1.5} />
+      {/* inner engraved dashed ring */}
+      <circle cx={cx} cy={cy} r={rr - 14} fill="none" stroke="var(--cdl-tone-accent, #2d6a8f)" strokeWidth={1} strokeDasharray="3 3" opacity={0.5} />
+      {/* Ethereum Diamond ロゴ (硬貨表面 中央、 accent 色) */}
+      <EthereumDiamond
+        cx={cx}
+        cy={cy}
+        h={rr * 0.55}
+        colors={{
+          light: "var(--cdl-tone-accent, #2d6a8f)",
+          medium: "var(--cdl-tone-accent, #2d6a8f)",
+          dark: "var(--cdl-tone-accent, #2d6a8f)",
+          darker: "#1a4a68",
+          stroke: "#1a4a68",
+        }}
+      />
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}