@cardenelabs/cdl 0.5.0

package/src/kinds/shape-people.tsx

@@ -0,0 +1,439 @@
+import type { JSX } from "react";
+import { shapeRegion, fitArt, labelPlan, type ArtExtent } from "./shape-region";
+import type { LaidNode } from "../types";
+
+/**
+ * Shape-driven people 6 kinds (CAR-1111 Phase 2-D)。
+ *
+ * auditor / regulator / notary / lawyer / trader / customer-service。
+ *
+ * 設計原則 (people-2icon-combo final)。
+ * 1. 人型 base = 頭 (outline circle) + 肩 (cubic Bezier curve、 顔なし、 slim body 幅 102)
+ * 2. 右下 halo badge (accessory 色 stroke + minimal icon) = 主 identity
+ * 3. 体内 accessory (幾何学 rect + mini icon) = 副 identity (右下と別要素)
+ * 4. label は shape の下に固定
+ */
+
+type ShapeProps = {
+  node: LaidNode;
+  active: boolean;
+};
+
+/**
+ * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる)。
+ *
+ * 上から順に置くと、 箱が小さい時に肩書が絵の領域へ食い込む (#433 の review 指摘)。
+ */
+function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
+  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>
+      )}
+    </>
+  );
+}
+
+
+/**
+ * 人型 base = 頭 (outline circle r=30) + 肩 (cubic Bezier curve、 slim body 幅 102、 頭 : 肩 = 1 : 1.7)。
+ * cx, cy = 人型全体の中心。 顔なし = 表情 dot / 口 arc は描かない。
+ */
+/** 影の楕円を人型の底からどれだけ下に置くか、 とその縦半径。 */
+const SHADOW_DY = 20;
+const SHADOW_RY = 4;
+const SHADOW_RX = 55;
+
+/** 右下 badge の位置 (人型の中心から) と大きさ。 */
+const BADGE_DX = 56;
+const BADGE_DY = 60;
+const BADGE_R = 26;
+const BADGE_SW = 2.5;
+
+/** 人型の線の太さ。 外接矩形は線の半分だけ外に出る。 */
+const PERSON_SW = 3;
+
+/**
+ * 記章の影がにじむ量。 `haloBadge` の `feGaussianBlur` (3) と `feOffset` (下へ 2)。
+ *
+ * にじみは描画に出るので広がりに数える。 数えないと、 狭い箱で横幅が倍率を決めた時に
+ * この分だけ箱の外に残る (review 指摘)。
+ */
+const BADGE_BLUR = 3;
+const BADGE_BLUR_DY = 2;
+
+function personBase(cx: number, cy: number, active: boolean) {
+  const strokeColor = active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)";
+  const headR = 30;
+  const headCy = cy - 40;
+  const shoulderR = 51;
+  const bodyTopY = headCy + headR + 4;
+  const bodyBottomY = bodyTopY + 90;
+  // body path = 左底 → 肩左 cubic curve → 中央上 → 肩右 cubic curve → 右底
+  const bodyPath =
+    `M ${cx - shoulderR} ${bodyBottomY} ` +
+    `C ${cx - shoulderR} ${bodyTopY + 40}, ${cx - 28} ${bodyTopY}, ${cx} ${bodyTopY} ` +
+    `C ${cx + 28} ${bodyTopY}, ${cx + shoulderR} ${bodyTopY + 40}, ${cx + shoulderR} ${bodyBottomY}`;
+  return {
+    headR,
+    headCy,
+    shoulderR,
+    bodyTopY,
+    bodyBottomY,
+    strokeColor,
+    render: (
+      <>
+        {/* drop shadow */}
+        <ellipse cx={cx} cy={bodyBottomY + SHADOW_DY} rx={SHADOW_RX} ry={SHADOW_RY} fill="#000" opacity={0.08} stroke="none" />
+        {/* 頭 (outline circle) */}
+        <circle data-cdl-role="node-body" cx={cx} cy={headCy} r={headR} fill="none" stroke={strokeColor} strokeWidth={3} />
+        {/* body (cubic Bezier curve、 open bottom = U 字ではなく肩から下ろす line のみ) */}
+        <path d={bodyPath} fill="none" stroke={strokeColor} strokeWidth={3} strokeLinecap="round" />
+      </>
+    ),
+  };
+}
+
+/**
+ * halo badge = 右下に配置する主 identity icon。
+ * badge 円 (白 fill + accessory 色 stroke) + drop shadow filter。
+ * children は 中央 (0,0) 基準の accessory 描画 g。
+ */
+function haloBadge(cx: number, cy: number, filterId: string, strokeColor: string, children: JSX.Element) {
+  return (
+    <g>
+      <defs>
+        <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation={3} />
+          <feOffset dx={0} dy={2} result="offsetblur" />
+          <feFlood floodColor="#000" floodOpacity={0.15} />
+          <feComposite in2="offsetblur" operator="in" />
+          <feMerge>
+            <feMergeNode />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <g filter={`url(#${filterId})`}>
+        <circle cx={cx} cy={cy} r={BADGE_R} fill="#ffffff" stroke={strokeColor} strokeWidth={BADGE_SW} />
+      </g>
+      <g transform={`translate(${cx}, ${cy})`}>{children}</g>
+    </g>
+  );
+}
+
+// 右下 badge の位置 (人型 cx から x+56、 body 下部)
+function badgePos(cx: number, personCy: number) {
+  return { bx: cx + BADGE_DX, by: personCy + BADGE_DY };
+}
+
+/**
+ * 人型 + 右下 badge + 影の広がり (領域の中心から)。
+ *
+ * **描く側の定数から出す**。 表に書き写すと、 絵を変えた時に片方だけ古くなる。
+ */
+function personExtent(
+  p: { headR: number; headCy: number; shoulderR: number; bodyBottomY: number },
+  regionCy: number,
+  personCy: number,
+): ArtExtent {
+  const 線 = PERSON_SW / 2;
+  // 記章はにじみの分だけ外に出る。 下向きの offset も足す
+  const badge = BADGE_R + BADGE_SW / 2 + BADGE_BLUR;
+  const 影下 = p.bodyBottomY + SHADOW_DY + SHADOW_RY;
+  const 記章下 = personCy + BADGE_DY + badge + BADGE_BLUR_DY;
+  return {
+    上: regionCy - (p.headCy - p.headR - 線),
+    下: Math.max(影下, 記章下) - regionCy,
+    // 影は肩より広い (rx 55 対 肩 51)。 広い方を採る
+    左: Math.max(p.shoulderR + 線, SHADOW_RX),
+    右: Math.max(SHADOW_RX, BADGE_DX + badge),
+  };
+}
+
+// 体内 accessory の中央位置 (人型 cx、 body 内 y)
+function chestPos(cx: number, personCy: number) {
+  return { chestX: cx, chestY: personCy + 45 };
+}
+
+// V 襟 (人型の首下、 body 上部の decorative V line)
+function collarV(cx: number, personCy: number, strokeColor: string) {
+  const y = personCy + 8;
+  return (
+    <path
+      d={`M ${cx - 12} ${y} L ${cx} ${y + 14} L ${cx + 12} ${y}`}
+      fill="none"
+      stroke={strokeColor}
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+}
+
+/** shape-lawyer = 弁護士 (右下 天秤 + 体内 gavel + 台座) */
+export function ShapeLawyerNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 20;
+  const p = personBase(cx, cy, active);
+  const { bx, by } = badgePos(cx, cy);
+  const { chestX, chestY } = chestPos(cx, cy);
+  return (
+    <g>
+      {fitArt(r, personExtent(p, r.cy, cy), (
+        <g>
+        {p.render}
+        {collarV(cx, cy, p.strokeColor)}
+        {/* 体内 gavel (rotate -20°) + 台座 */}
+        <g transform={`translate(${chestX}, ${chestY}) rotate(-20)`}>
+          <rect x={-4} y={-8} width={8} height={18} rx={1} fill="#a67c00" stroke="#5a3a10" strokeWidth={1} />
+          <rect x={-14} y={-16} width={28} height={12} rx={2} fill="#c9924a" stroke="#5a3a10" strokeWidth={1.5} />
+          <rect x={-14} y={-16} width={28} height={3} fill="#e5c07b" stroke="none" />
+        </g>
+        <ellipse cx={chestX} cy={chestY + 20} rx={26} ry={4} fill="#8b6914" stroke="#5a3a10" strokeWidth={1.5} />
+        <ellipse cx={chestX} cy={chestY + 18} rx={26} ry={4} fill="#c9924a" stroke="#5a3a10" strokeWidth={1.5} />
+        {/* 右下 天秤 badge */}
+        {haloBadge(bx, by, `lw-halo-${node.id}`, "#a67c00", (
+          <g>
+            <line x1={0} y1={-12} x2={0} y2={8} stroke="#a67c00" strokeWidth={2} />
+            <line x1={-12} y1={-8} x2={12} y2={-8} stroke="#a67c00" strokeWidth={2} strokeLinecap="round" />
+            <path d="M -12 -8 L -15 1 L -9 1 Z" fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+            <path d="M 12 -8 L 15 1 L 9 1 Z" fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+            <rect x={-5} y={6} width={10} height={3} rx={1} fill="#a67c00" />
+          </g>
+        ))}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-auditor = 監査人 (右下 magnifier + 体内 clipboard + 3 check) */
+export function ShapeAuditorNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 20;
+  const p = personBase(cx, cy, active);
+  const { bx, by } = badgePos(cx, cy);
+  const { chestX, chestY } = chestPos(cx, cy);
+  return (
+    <g>
+      {fitArt(r, personExtent(p, r.cy, cy), (
+        <g>
+        {p.render}
+        {collarV(cx, cy, p.strokeColor)}
+        {/* 体内 clipboard + 3 check */}
+        <rect x={chestX - 18} y={chestY - 6} width={36} height={42} rx={2} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+        <rect x={chestX - 8} y={chestY - 10} width={16} height={6} rx={1} fill="#0f3450" stroke="none" />
+        <rect x={chestX - 14} y={chestY} width={28} height={32} fill="#ffffff" stroke="#8b949e" strokeWidth={0.8} />
+        {[0, 1, 2].map((i) => {
+          const y = chestY + 8 + i * 10;
+          return (
+            <g key={i}>
+              <path d={`M ${chestX - 10} ${y} L ${chestX - 7} ${y + 3} L ${chestX - 2} ${y - 3}`} fill="none" stroke="#2a8560" strokeWidth={1.2} strokeLinecap="round" strokeLinejoin="round" />
+              <line x1={chestX + 2} y1={y} x2={chestX + 12} y2={y} stroke="#8b949e" strokeWidth={1} />
+            </g>
+          );
+        })}
+        {/* 右下 magnifier badge */}
+        {haloBadge(bx, by, `au-halo-${node.id}`, "#2a8560", (
+          <g>
+            <circle cx={-4} cy={-4} r={10} fill="none" stroke="#2a8560" strokeWidth={2.5} />
+            <line x1={4} y1={4} x2={13} y2={13} stroke="#2a8560" strokeWidth={2.5} strokeLinecap="round" />
+            <path d="M -8 -4 L -5 -1 L -1 -7" fill="none" stroke="#2a8560" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
+          </g>
+        ))}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-regulator = 規制当局 (右下 shield + 体内 制服 buttons + star) */
+export function ShapeRegulatorNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 20;
+  const p = personBase(cx, cy, active);
+  const { bx, by } = badgePos(cx, cy);
+  const { chestX, chestY } = chestPos(cx, cy);
+  return (
+    <g>
+      {fitArt(r, personExtent(p, r.cy, cy), (
+        <g>
+        {p.render}
+        {collarV(cx, cy, p.strokeColor)}
+        {/* 体内 4 buttons + star */}
+        <circle cx={chestX - 10} cy={chestY} r={3} fill="#e5c07b" stroke="#a67c00" strokeWidth={1} />
+        <circle cx={chestX + 10} cy={chestY} r={3} fill="#e5c07b" stroke="#a67c00" strokeWidth={1} />
+        <circle cx={chestX - 10} cy={chestY + 18} r={3} fill="#e5c07b" stroke="#a67c00" strokeWidth={1} />
+        <circle cx={chestX + 10} cy={chestY + 18} r={3} fill="#e5c07b" stroke="#a67c00" strokeWidth={1} />
+        <polygon
+          points={`${chestX},${chestY + 30} ${chestX + 3},${chestY + 40} ${chestX + 13},${chestY + 40} ${chestX + 5},${chestY + 46} ${chestX + 8},${chestY + 56} ${chestX},${chestY + 50} ${chestX - 8},${chestY + 56} ${chestX - 5},${chestY + 46} ${chestX - 13},${chestY + 40} ${chestX - 3},${chestY + 40}`}
+          fill="#e5c07b"
+          stroke="#a67c00"
+          strokeWidth={1}
+        />
+        {/* 右下 shield badge */}
+        {haloBadge(bx, by, `rg-halo-${node.id}`, "#0f3450", (
+          <g>
+            <path d="M 0 -12 L 11 -8 L 11 3 C 11 10, 0 13, 0 13 C 0 13, -11 10, -11 3 L -11 -8 Z" fill="#0f3450" stroke="#0f3450" strokeWidth={1.5} strokeLinejoin="round" />
+            <polygon points="0,-6 2,-2 6,-2 3,1 4,6 0,3 -4,6 -3,1 -6,-2 -2,-2" fill="#e5c07b" />
+          </g>
+        ))}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-notary = 公証人 (右下 印章 + 体内 契約書 + 署名) */
+export function ShapeNotaryNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 20;
+  const p = personBase(cx, cy, active);
+  const { bx, by } = badgePos(cx, cy);
+  const { chestX, chestY } = chestPos(cx, cy);
+  return (
+    <g>
+      {fitArt(r, personExtent(p, r.cy, cy), (
+        <g>
+        {p.render}
+        {collarV(cx, cy, p.strokeColor)}
+        {/* 体内 契約書 (dog-ear + line + signature) */}
+        <path
+          d={`M ${chestX - 20} ${chestY - 2} L ${chestX - 20} ${chestY + 42} L ${chestX + 20} ${chestY + 42} L ${chestX + 20} ${chestY - 2} L ${chestX + 12} ${chestY - 10} L ${chestX - 20} ${chestY - 10} Z`}
+          fill="#ffffff"
+          stroke="#c15a4a"
+          strokeWidth={1.8}
+          strokeLinejoin="round"
+        />
+        <path
+          d={`M ${chestX + 12} ${chestY - 10} L ${chestX + 12} ${chestY - 2} L ${chestX + 20} ${chestY - 2}`}
+          fill="none"
+          stroke="#c15a4a"
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+        />
+        <line x1={chestX - 14} y1={chestY + 6} x2={chestX + 14} y2={chestY + 6} stroke="#8b949e" strokeWidth={1} />
+        <line x1={chestX - 14} y1={chestY + 14} x2={chestX + 14} y2={chestY + 14} stroke="#8b949e" strokeWidth={1} />
+        <line x1={chestX - 14} y1={chestY + 22} x2={chestX + 8} y2={chestY + 22} stroke="#8b949e" strokeWidth={1} />
+        <line x1={chestX - 14} y1={chestY + 34} x2={chestX + 2} y2={chestY + 34} stroke="#0f3450" strokeWidth={1.5} />
+        <text x={chestX + 6} y={chestY + 37} fontSize={8} fill="#0f3450" fontFamily="cursive" fontStyle="italic">
+          ✓
+        </text>
+        {/* 右下 印章 badge */}
+        {haloBadge(bx, by, `nt-halo-${node.id}`, "#c15a4a", (
+          <g>
+            <circle cx={0} cy={0} r={12} fill="#c15a4a" stroke="none" />
+            <circle cx={0} cy={0} r={8} fill="none" stroke="#ffffff" strokeWidth={1.2} />
+            <text x={0} y={4} fontFamily="Georgia, serif" fontSize={10} fontWeight={700} fill="#ffffff" textAnchor="middle">
+              印
+            </text>
+          </g>
+        ))}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-trader = トレーダー (右下 chart line + 体内 laptop + candles) */
+export function ShapeTraderNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 20;
+  const p = personBase(cx, cy, active);
+  const { bx, by } = badgePos(cx, cy);
+  const { chestX, chestY } = chestPos(cx, cy);
+  return (
+    <g>
+      {fitArt(r, personExtent(p, r.cy, cy), (
+        <g>
+        {p.render}
+        {collarV(cx, cy, p.strokeColor)}
+        {/* 体内 mini laptop + candles */}
+        <rect x={chestX - 20} y={chestY} width={40} height={30} rx={2} fill="#ffffff" stroke="#4ea36a" strokeWidth={2} />
+        {[
+          { x: -16, h: 10 },
+          { x: -10, h: 14 },
+          { x: -4, h: 10, red: true },
+          { x: 2, h: 12 },
+          { x: 8, h: 10 },
+          { x: 14, h: 12 },
+        ].map((c, i) => (
+          <rect
+            key={i}
+            x={chestX + c.x}
+            y={chestY + 24 - c.h}
+            width={3}
+            height={c.h}
+            fill={c.red ? "#c15a4a" : "#4ea36a"}
+            stroke="none"
+          />
+        ))}
+        <path d={`M ${chestX - 14} ${chestY + 20} L ${chestX + 12} ${chestY + 6}`} fill="none" stroke="#e5c07b" strokeWidth={1.2} strokeDasharray="2 1.5" />
+        {/* 右下 chart line badge */}
+        {haloBadge(bx, by, `tr-halo-${node.id}`, "#4ea36a", (
+          <g>
+            <path d="M -11 7 L -5 -2 L 1 2 L 6 -7 L 12 -4" fill="none" stroke="#4ea36a" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
+            <polyline points="9,-7 12,-7 12,-4" fill="none" stroke="#4ea36a" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
+            <line x1={-13} y1={11} x2={13} y2={11} stroke="#4ea36a" strokeWidth={1.5} opacity={0.4} />
+          </g>
+        ))}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}
+
+/** shape-customer-service = CS (右下 headset + 体内 24H badge) */
+export function ShapeCustomerServiceNode({ node, active }: ShapeProps): JSX.Element {
+  const r = shapeRegion(node);
+  const cx = r.cx;
+  const cy = r.cy + 20;
+  const p = personBase(cx, cy, active);
+  const { bx, by } = badgePos(cx, cy);
+  const { chestX, chestY } = chestPos(cx, cy);
+  return (
+    <g>
+      {fitArt(r, personExtent(p, r.cy, cy), (
+        <g>
+        {p.render}
+        {collarV(cx, cy, p.strokeColor)}
+        {/* 体内 24H badge */}
+        <rect x={chestX - 22} y={chestY + 5} width={44} height={22} rx={11} fill="#e5c07b" stroke="#a67c00" strokeWidth={2} />
+        <text x={chestX} y={chestY + 20} fontSize={12} fontWeight={900} fill="#5a3a10" textAnchor="middle" letterSpacing={2}>
+          24H
+        </text>
+        {/* 右下 headset badge */}
+        {haloBadge(bx, by, `cs-halo-${node.id}`, "#a67c00", (
+          <g>
+            <path d="M -11 4 C -11 -10, -6 -12, 0 -12 C 6 -12, 11 -10, 11 4" fill="none" stroke="#a67c00" strokeWidth={2.5} strokeLinecap="round" />
+            <rect x={-13} y={2} width={6} height={11} rx={1.5} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+            <rect x={7} y={2} width={6} height={11} rx={1.5} fill="#e5c07b" strokeWidth={1.5} stroke="#a67c00" />
+          </g>
+        ))}
+        </g>
+      ))}
+      {bottomLabel(node, r.cx, r.label)}
+    </g>
+  );
+}