Mind map auto layout

export type Idea = { label: string; children?: Idea[] };
type Placed = { label: string; x: number; y: number; branch: number };
type Edge = { from: Placed; to: Placed };

const ROW = 44; // vertical slot per leaf
const COL = 190; // horizontal distance between levels
const W = 140; // node width
const H = 30; // node height

// Pass 1: how many leaf rows does each subtree need?
const rows = (n: Idea): number => (n.children?.length ? n.children.reduce((s, c) => s + rows(c), 0) : 1);

export function layout(root: Idea) {
  const nodes: Placed[] = [];
  const edges: Edge[] = [];
  // Pass 2: place a node in the middle of the vertical slice reserved for its subtree.
  const place = (n: Idea, depth: number, top: number, branch: number): Placed => {
    const height = rows(n) * ROW;
    const me: Placed = { label: n.label, x: depth * COL, y: top + height / 2, branch };
    nodes.push(me);
    let cursor = top;
    n.children?.forEach((c, i) => {
      const child = place(c, depth + 1, cursor, depth === 0 ? i : branch);
      edges.push({ from: me, to: child });
      cursor += rows(c) * ROW;
    });
    return me;
  };
  place(root, 0, 0, 0);
  return { nodes, edges, width: Math.max(...nodes.map((n) => n.x)) + W, height: rows(root) * ROW };
}

const COLORS = ['#2563eb', '#db2777', '#059669', '#d97706', '#7c3aed', '#0891b2'];

export function MindMap({ root }: { root: Idea }) {
  const { nodes, edges, width, height } = layout(root);
  return (
    <svg viewBox={`-8 -8 ${width + 16} ${height + 16}`} role="img" aria-label={`Mind map: ${root.label}`} className="w-full">
      {edges.map((e, i) => {
        const x1 = e.from.x + W, y1 = e.from.y, x2 = e.to.x, y2 = e.to.y, mx = (x1 + x2) / 2;
        return <path key={i} d={`M${x1} ${y1}C${mx} ${y1} ${mx} ${y2} ${x2} ${y2}`} fill="none"
          stroke={COLORS[e.to.branch % COLORS.length]} strokeWidth={2} />;
      })}
      {nodes.map((n, i) => (
        <g key={i} transform={`translate(${n.x} ${n.y - H / 2})`}>
          <rect width={W} height={H} rx={8} fill="#fff" stroke={COLORS[n.branch % COLORS.length]} strokeWidth={2} />
          <text x={W / 2} y={H / 2 + 4} textAnchor="middle" fontSize={13} fill="#111827">{n.label}</text>
        </g>
      ))}
    </svg>
  );
}