@cardenelabs/cdl 0.5.0

package/src/kinds/mind-map.tsx

@@ -0,0 +1,367 @@
+import type { JSX } from "react";
+import type { LaidNode, Tone, MindBranchNode } from "../types";
+import { TONE } from "../render/tone";
+
+const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
+
+/**
+ * 箱と箱の間に空ける間隔 (px)。
+ *
+ * **中心 → 第 1 階層と、 親 → 子で同じ値を使う**。 深さで間隔が変わると、 同じ図の中で
+ * 枝の詰まり方が階層ごとに変わって読みにくい。
+ *
+ * 8 では枝が潰れて線が箱に隠れ、 孫が親と繋がって見えなかった (実測 = 中心 → 第 1 階層が
+ * 24px に対し 8px)。 一方で間隔を広げた分だけ箱に使える幅が減るので、 深い図では箱が
+ * 読めない幅まで縮む (実測 = 640x400 の実寸で深さ 5 の箱が 2.5px)。
+ *
+ * `#430` まで同じ 24 を 2 箇所に直書きしており、 片方だけ変えても誰も気付かなかった。
+ */
+export const MIND_BOX_GAP = 24;
+
+/**
+ * mind-map kind ... 1 node に mindData (rootId / rootTitle / branches) を保持し、
+ * 中心 root + 放射 branch を SVG 描画する。
+ * layout = 中心 root、 その第 1 階層 branch を左右振り分けの水平放射で配置、
+ * 深い階層は parent 方向へ扇状展開。 depth 別 tone を rotate。
+ * curved edge = bezier で親子を接続、 node は rounded rect で読みやすさ優先。
+ */
+export function MindMapNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const mindData = node.mindData;
+  if (!mindData) return <g transform={`translate(${x0} ${y0})`} />;
+
+  const PAD = 40;
+  const canvasCx = node.w / 2;
+  const canvasCy = node.h / 2;
+  const canvasW = node.w - PAD * 2;
+  const canvasH = node.h - PAD * 2;
+
+  const layout = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+
+      {layout.edges.map((e, i) => (
+        <path
+          key={`edge-${i}`}
+          data-cdl-role="mind-edge"
+          d={e.d}
+          fill="none"
+          stroke={toneColor(e.tone)}
+          strokeWidth={2.5}
+          strokeOpacity={0.55}
+          strokeLinecap="round"
+        />
+      ))}
+
+      {layout.nodes.map((n) => (
+        <g key={`n-${n.id}`}>
+          <rect
+            x={n.x - n.w / 2}
+            y={n.y - n.h / 2}
+            width={n.w}
+            height={n.h}
+            rx={n.isRoot ? 22 : 10}
+            fill={n.isRoot ? toneColor(n.tone ?? "accent") : "var(--cdl-chip-fill, #f4f6fb)"}
+            stroke={n.isRoot ? toneColor(n.tone ?? "accent") : toneColor(n.tone)}
+            strokeWidth={n.isRoot ? 2 : 1.75}
+          />
+          <text
+            x={n.x}
+            y={n.y + 5}
+            fontSize={n.isRoot ? 15 : 13}
+            fontWeight={n.isRoot ? 700 : 600}
+            textAnchor="middle"
+            fill={n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)"}
+          >
+            {n.title}
+          </text>
+        </g>
+      ))}
+    </g>
+  );
+}
+
+type LayoutNode = {
+  id: string;
+  title: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  tone?: Tone;
+  isRoot: boolean;
+};
+
+type LayoutEdge = {
+  d: string;
+  tone?: Tone;
+};
+
+export function computeMindMapLayout(
+  mindData: { rootId: string; rootTitle: string; branches: MindBranchNode[] },
+  cx: number,
+  cy: number,
+  canvasW: number,
+  canvasH: number,
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
+  const nodes: LayoutNode[] = [];
+  const edges: LayoutEdge[] = [];
+
+  const rootW = 120;
+  const rootH = 52;
+  nodes.push({
+    id: mindData.rootId,
+    title: mindData.rootTitle,
+    x: cx,
+    y: cy,
+    w: rootW,
+    h: rootH,
+    isRoot: true,
+  });
+
+  const childrenOf = new Map<string, MindBranchNode[]>();
+  for (const br of mindData.branches) {
+    if (!childrenOf.has(br.parent)) childrenOf.set(br.parent, []);
+    childrenOf.get(br.parent)!.push(br);
+  }
+
+  const nodePos = new Map<string, { x: number; y: number }>();
+  const nodeSide = new Map<string, "left" | "right">();
+  const nodeTone = new Map<string, Tone>();
+  /** 親の辺から edge を出すために、 node ごとの半幅を覚えておく。 */
+  const nodeHalfW = new Map<string, number>();
+  nodePos.set(mindData.rootId, { x: cx, y: cy });
+  nodeHalfW.set(mindData.rootId, rootW / 2);
+
+  // root から辿れない branch (parent 不整合 / 循環) を first-level に拾い上げて silent 消失を防ぐ。
+  // tree.tsx と同じ reachable / roots パターン。 循環は seen で打ち切る。
+  const reachable = new Set<string>([mindData.rootId]);
+  const walk = (id: string): void => {
+    for (const c of childrenOf.get(id) ?? []) {
+      if (!reachable.has(c.id)) {
+        reachable.add(c.id);
+        walk(c.id);
+      }
+    }
+  };
+  walk(mindData.rootId);
+  const firstLevel = [...(childrenOf.get(mindData.rootId) ?? [])];
+  for (const br of mindData.branches) {
+    if (!reachable.has(br.id)) {
+      firstLevel.push(br);
+      reachable.add(br.id);
+      walk(br.id);
+    }
+  }
+  const firstCount = firstLevel.length;
+  const leftCount = Math.ceil(firstCount / 2);
+  const branchW = 130;
+  const branchH = 38;
+  const subBranchW = 100;
+  const subBranchH = 30;
+
+  // childrenOf は循環し得るので、 全再帰に seen 打ち切りを入れる。
+
+  // subtree の最大深さ (branch = 0)。
+  const subDepthOf = (id: string, seen: Set<string>): number => {
+    if (seen.has(id)) return 0;
+    seen.add(id);
+    const kids = childrenOf.get(id) ?? [];
+    if (kids.length === 0) return 0;
+    return 1 + Math.max(...kids.map((k) => subDepthOf(k.id, seen)));
+  };
+  // subtree の葉数。 兄弟に縦レーンを配分するのに使う。
+  const leafCountOf = (id: string, seen: Set<string>): number => {
+    if (seen.has(id)) return 1;
+    seen.add(id);
+    const kids = childrenOf.get(id) ?? [];
+    if (kids.length === 0) return 1;
+    return kids.reduce((sum, k) => sum + leafCountOf(k.id, seen), 0);
+  };
+
+  const maxSubDepth = firstLevel.length > 0 ? Math.max(0, ...firstLevel.map((br) => subDepthOf(br.id, new Set()))) : 0;
+
+  // branch を root からどれだけ離すか。 深いネストがあるほど sub 世代のぶん内側に寄せる。
+  const minLayer1XOffset = rootW / 2 + branchW / 2 + MIND_BOX_GAP;
+  const preferredSubDx = subBranchW + 20;
+  const reserve = maxSubDepth > 0 ? branchW / 2 + maxSubDepth * preferredSubDx : 0;
+  const maxLayer1XOffset = Math.max(minLayer1XOffset, canvasW / 2 - reserve);
+  const layer1XOffset = Math.max(minLayer1XOffset, Math.min(canvasW * 0.32, maxLayer1XOffset));
+
+  // branch の外側に残る横の余白。 これを深さで割り、 sub box もそこに収まる幅に縮める。
+  // 単一 chain は同じ縦レーンを共有するので、 横 step が box より広くないと重なる。
+  const room = canvasW / 2 - layer1XOffset;
+  /** 箱の中の文字が読める最小の幅。 これを割ると文字だけが縮まず箱からはみ出す。 */
+  const MIN_SUB_W = 56;
+  /** 親と子の箱の間隔として望ましい値。 中心 → 第 1 階層と同じ `MIND_BOX_GAP` を使う。 */
+  const PREFERRED_GAP = MIND_BOX_GAP;
+  //
+  // **箱の幅を先に確保し、 余った分を間隔に回す**。 浅い図では望ましい値になり、 深い図では
+  // 従来どおりまで詰まる = 箱が潰れる形は増やさない。
+  const gapRoom = maxSubDepth > 0 ? (room - branchW / 2 - maxSubDepth * MIN_SUB_W) / maxSubDepth : 0;
+  const gap = Math.max(8, Math.min(PREFERRED_GAP, gapRoom));
+  // 最深 box の外端が canvas 端に収まる effSubW を解く。
+  //   layer1XOffset + branchW/2 + effSubW*maxSubDepth + maxSubDepth*gap <= canvasW/2
+  //   (step1 = (branchW+effSubW)/2 + gap、 stepN = effSubW + gap、 最深 box 半幅 effSubW/2 込み)
+  // 下限は極小 (1)。 大きな floor は深いネストで subOffset の累積を膨らませる。 位置の
+  // はみ出しは最終スケール (下部) が捌くので、 ここでは重なり回避に必要な最小だけ残す。
+  const effSubW =
+    maxSubDepth > 0
+      ? Math.max(1, Math.min(subBranchW, (room - branchW / 2 - maxSubDepth * gap) / maxSubDepth))
+      : subBranchW;
+  const step1 = (branchW + effSubW) / 2 + gap; // branch → 第 1 sub
+  const stepN = effSubW + gap; // sub → sub
+  const subOffset = (subDepth: number): number => (subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN);
+
+  // 縦レーン。 左右それぞれの branch 群の葉数合計でレーンを割る。
+  const leftBranches = firstLevel.slice(0, leftCount);
+  const rightBranches = firstLevel.slice(leftCount);
+  const leavesOfSide = (brs: MindBranchNode[]): number =>
+    Math.max(1, brs.reduce((sum, br) => sum + leafCountOf(br.id, new Set()), 0));
+  const sideLaneCount = Math.max(leavesOfSide(leftBranches), leavesOfSide(rightBranches));
+  const laneBandH = Math.min(canvasH * 0.9, sideLaneCount * (subBranchH + 14));
+  const rowGap = sideLaneCount > 1 ? laneBandH / (sideLaneCount - 1) : subBranchH + 14;
+  // box 高は必ず rowGap の一定割合に収める。 加算的な floor を置くと、 leaf が多く rowGap が
+  // 小さいとき floor が rowGap を超えて縦重なりする。 rowGap の 70% にすれば規模によらず gap が残る。
+  const effSubH = Math.min(subBranchH, rowGap * 0.7);
+  const effBranchH = Math.min(branchH, rowGap * 0.7);
+  // canvas の上下端 (full-node 座標)。 lane はこの内側に収める。
+  const laneTop = cy - canvasH / 2 + effSubH / 2;
+  const laneBottom = cy + canvasH / 2 - effSubH / 2;
+  const laneY = (lane: number): number => {
+    if (sideLaneCount <= 1) return cy;
+    const y = cy - laneBandH / 2 + lane * rowGap;
+    return Math.max(laneTop, Math.min(laneBottom, y));
+  };
+
+  // scale 後の root 半幅を使う (最終スケールで root も縮む)。
+  const rootEdgeXFor = (isLeft: boolean): number => {
+    const half = nodeHalfW.get(mindData.rootId) ?? rootW / 2;
+    return cx + (isLeft ? -half : half);
+  };
+
+  // subtree を再帰配置する。 leaf は次のレーン、 親は子レーンの中央。 x は深さで決まる。
+  const placeSubtree = (
+    node: MindBranchNode,
+    subDepth: number,
+    isLeft: boolean,
+    tone: Tone | undefined,
+    placed: Set<string>,
+    laneRef: { cursor: number },
+  ): number => {
+    placed.add(node.id);
+    const dirX = isLeft ? -1 : 1;
+    const x = cx + dirX * (layer1XOffset + subOffset(subDepth));
+    const w = subDepth === 0 ? branchW : effSubW;
+    const h = subDepth === 0 ? effBranchH : effSubH;
+    const myTone = node.tone ?? tone;
+
+    const kids = (childrenOf.get(node.id) ?? []).filter((k) => !placed.has(k.id));
+    let y: number;
+    if (kids.length === 0) {
+      y = laneY(laneRef.cursor);
+      laneRef.cursor += 1;
+    } else {
+      const ys = kids.map((k, i) =>
+        placeSubtree(k, subDepth + 1, isLeft, myTone ?? MIND_TONES[i % MIND_TONES.length]!, placed, laneRef),
+      );
+      y = (ys[0]! + ys[ys.length - 1]!) / 2;
+    }
+
+    nodes.push({ id: node.id, title: node.title, x, y, w, h, tone: myTone, isRoot: false });
+    nodePos.set(node.id, { x, y });
+    nodeSide.set(node.id, isLeft ? "left" : "right");
+    nodeHalfW.set(node.id, w / 2);
+    if (myTone) nodeTone.set(node.id, myTone);
+    return y;
+  };
+
+  const placeSide = (brs: MindBranchNode[], isLeft: boolean, toneBase: number): void => {
+    const laneRef = { cursor: 0 };
+    const placed = new Set<string>();
+    brs.forEach((br, i) => {
+      const tone = br.tone ?? MIND_TONES[(toneBase + i) % MIND_TONES.length]!;
+      placeSubtree(br, 0, isLeft, tone, placed, laneRef);
+    });
+  };
+  placeSide(leftBranches, true, 0);
+  placeSide(rightBranches, false, leftCount);
+
+  // 全 node を canvas rect に収める最終スケール (Issue #219、 box floor の漸近限界対策)。
+  //
+  // box に最小サイズ floor があるため、 深さ / leaf 数を上げると位置の累積が canvas を数 px 超える。
+  // floor を下げ続けても次の規模で再発するので、 最後に全体を中心へ向けて uniform scale して必ず収める。
+  // uniform scale は相対 gap を保つので、 非重なりは崩れない。 通常入力は extent が収まりスケール 1。
+  {
+    const drawableHalfW = canvasW / 2;
+    const drawableHalfH = canvasH / 2;
+    let maxExtentX = rootW / 2;
+    let maxExtentY = rootH / 2;
+    for (const n of nodes) {
+      maxExtentX = Math.max(maxExtentX, Math.abs(n.x - cx) + n.w / 2);
+      maxExtentY = Math.max(maxExtentY, Math.abs(n.y - cy) + n.h / 2);
+    }
+    const scale = Math.min(1, drawableHalfW / maxExtentX, drawableHalfH / maxExtentY);
+    if (scale < 1) {
+      for (const n of nodes) {
+        n.x = cx + (n.x - cx) * scale;
+        n.y = cy + (n.y - cy) * scale;
+        n.w *= scale;
+        n.h *= scale;
+        nodePos.set(n.id, { x: n.x, y: n.y });
+        nodeHalfW.set(n.id, n.w / 2);
+      }
+    }
+  }
+
+  // edge = 親の辺 → 子の辺。 root → 第 1 branch は root の辺から。
+  for (const br of mindData.branches) {
+    const childPos = nodePos.get(br.id);
+    if (!childPos) continue;
+    const isLeft = nodeSide.get(br.id) === "left";
+    const childHalfW = nodeHalfW.get(br.id) ?? subBranchW / 2;
+    const tone = nodeTone.get(br.id);
+    if (br.parent === mindData.rootId) {
+      const startX = rootEdgeXFor(isLeft);
+      const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
+      edges.push({ d: makeCurve(startX, cy, endX, childPos.y, isLeft), tone });
+    } else {
+      const parentPos = nodePos.get(br.parent);
+      if (!parentPos) continue;
+      const parentHalfW = nodeHalfW.get(br.parent) ?? branchW / 2;
+      const startX = parentPos.x + (isLeft ? -parentHalfW : parentHalfW);
+      const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
+      edges.push({ d: makeCurve(startX, parentPos.y, endX, childPos.y, isLeft), tone });
+    }
+  }
+
+  return { nodes, edges };
+}
+
+function makeCurve(x1: number, y1: number, x2: number, y2: number, _leftBound: boolean): string {
+  const midX = (x1 + x2) / 2;
+  return `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
+}
+
+
+function toneColor(tone: Tone | undefined, alpha = 1): string {
+  const hex = tone ? TONE[tone] : TONE.accent;
+  if (alpha >= 1) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/src/kinds/mind-radial.tsx

@@ -0,0 +1,209 @@
+import type { JSX } from "react";
+import type { LaidNode, Tone, MindBranchNode } from "../types";
+import { TONE } from "../render/tone";
+
+const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
+
+/**
+ * mind-radial kind ... mindMapRadial preset 用、 中心 + 8 方向 (45 度間隔) の
+ * 放射状 branch 配置。 mind-map との違いは「第 1 階層を 45 度で 8 分割」 固定。
+ *
+ * デザイン方針 (batch3):
+ *   - canvas 背景に subtle radial gradient (中心を強調)
+ *   - 中心 circle を 2 重 (外周 halo + 本体) + drop shadow で目立たせる
+ *   - 各 branch は tone-tinted rounded rect + 中心方向へ tapered edge
+ *   - branch 番号 (方位) を dot annotation で示す
+ */
+export function MindRadialNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const mindData = node.mindData;
+  if (!mindData) return <g transform={`translate(${x0} ${y0})`} />;
+
+  const canvasCx = node.w / 2;
+  const canvasCy = node.h / 2;
+  const maxRadius = Math.min(node.w, node.h) / 2 - 100;
+  const gradientId = `mind-radial-bg-${node.id}`;
+  const shadowId = `mind-radial-shadow-${node.id}`;
+
+  const layout = computeRadialLayout(mindData, canvasCx, canvasCy, maxRadius);
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <defs>
+        <radialGradient id={gradientId} cx="50%" cy="50%" r="60%">
+          <stop offset="0%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity="0.14" />
+          <stop offset="55%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity="0.04" />
+          <stop offset="100%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity="0" />
+        </radialGradient>
+        <filter id={shadowId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
+          <feOffset dx="0" dy="2" result="offsetblur" />
+          <feComponentTransfer>
+            <feFuncA type="linear" slope="0.4" />
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+
+      <circle
+        cx={canvasCx}
+        cy={canvasCy}
+        r={maxRadius + 40}
+        fill={`url(#${gradientId})`}
+        pointerEvents="none"
+      />
+
+      {layout.edges.map((e, i) => (
+        <line
+          key={`edge-${i}`}
+          data-cdl-role="mind-radial-edge"
+          x1={e.x1}
+          y1={e.y1}
+          x2={e.x2}
+          y2={e.y2}
+          stroke={toneColor(e.tone)}
+          strokeWidth={2.25}
+          strokeOpacity={0.7}
+          strokeLinecap="round"
+        />
+      ))}
+
+      {/* 中心の周りに敷く光の輪。 意図して淡く、 読ませる要素ではない。
+          役割を付けるのは、 consumer が色を当てたり検査から外したりできるようにするため
+          (役割の無い要素には CSS も検査も届かない)。 */}
+      <circle
+        data-cdl-role="mind-radial-halo"
+        cx={canvasCx}
+        cy={canvasCy}
+        r={56}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        fillOpacity={0.18}
+      />
+      <circle
+        cx={canvasCx}
+        cy={canvasCy}
+        r={42}
+        fill="var(--cdl-tone-accent, #2d6a8f)"
+        filter={`url(#${shadowId})`}
+      />
+      <text
+        x={canvasCx}
+        y={canvasCy + 5}
+        fontSize={14}
+        fontWeight={700}
+        textAnchor="middle"
+        fill="var(--cdl-text-on-tone, #ffffff)"
+      >
+        {mindData.rootTitle}
+      </text>
+
+      {layout.nodes.filter((n) => !n.isRoot).map((n) => (
+        <g key={`n-${n.id}`}>
+          <rect
+            x={n.x - 62}
+            y={n.y - 22}
+            width={124}
+            height={44}
+            rx={12}
+            fill="var(--cdl-chip-fill, #f4f6fb)"
+            stroke={toneColor(n.tone)}
+            strokeWidth={2}
+          />
+          <circle
+            cx={n.x - 62 + 12}
+            cy={n.y}
+            r={5}
+            fill={toneColor(n.tone)}
+          />
+          <text
+            x={n.x + 6}
+            y={n.y + 5}
+            fontSize={13}
+            fontWeight={600}
+            textAnchor="middle"
+            fill="var(--cdl-chip-text, #1a1f2a)"
+          >
+            {n.title}
+          </text>
+        </g>
+      ))}
+    </g>
+  );
+}
+
+type LayoutNode = {
+  id: string;
+  title: string;
+  x: number;
+  y: number;
+  tone?: Tone;
+  isRoot: boolean;
+};
+
+type LayoutEdge = {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  tone?: Tone;
+};
+
+function computeRadialLayout(
+  mindData: { rootId: string; rootTitle: string; branches: MindBranchNode[] },
+  cx: number,
+  cy: number,
+  maxRadius: number,
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
+  const nodes: LayoutNode[] = [];
+  const edges: LayoutEdge[] = [];
+
+  nodes.push({ id: mindData.rootId, title: mindData.rootTitle, x: cx, y: cy, isRoot: true });
+
+  const childrenOf = new Map<string, MindBranchNode[]>();
+  for (const br of mindData.branches) {
+    if (!childrenOf.has(br.parent)) childrenOf.set(br.parent, []);
+    childrenOf.get(br.parent)!.push(br);
+  }
+
+  const firstLevel = childrenOf.get(mindData.rootId) ?? [];
+  const angleStep = (Math.PI * 2) / 8;
+  firstLevel.slice(0, 8).forEach((br, idx) => {
+    const angle = -Math.PI / 2 + angleStep * idx;
+    const tone = br.tone ?? MIND_TONES[idx % MIND_TONES.length]!;
+    const r = maxRadius;
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+    nodes.push({ id: br.id, title: br.title, x, y, tone, isRoot: false });
+    const rootR = 42;
+    const branchR = 62;
+    const x1 = cx + rootR * Math.cos(angle);
+    const y1 = cy + rootR * Math.sin(angle);
+    const x2 = x - branchR * Math.cos(angle);
+    const y2 = y - 22 * Math.sin(angle);
+    edges.push({ x1, y1, x2, y2, tone });
+  });
+
+  return { nodes, edges };
+}
+
+
+function toneColor(tone: Tone | undefined): string {
+  if (!tone) return TONE.accent;
+  return TONE[tone];
+}

package/src/kinds/node-tone.ts

@@ -0,0 +1,18 @@
+import type { LaidNode, Tone } from "../types";
+import { TONE } from "../render/tone";
+
+/**
+ * node の主色を決める。
+ *
+ * `tone` 指定があればその色、 無ければ呼び手が渡した kind の既定色を返す。 色を決める式を
+ * 1 箇所に集めるための helper で、 専用 component と `GenericNode` の双方がここを通る。
+ */
+export function nodeAccent(node: LaidNode, fallback: string): string {
+  return toneColor(node.tone) ?? fallback;
+}
+
+/** tone に対応する色。 未指定 / 未知の値なら `undefined`。 */
+export function toneColor(tone: Tone | undefined): string | undefined {
+  if (!tone) return undefined;
+  return TONE[tone];
+}