makersclaw 0.2.0 → 0.3.0

package/registry/blocks/mind-map/tree.js

@@ -0,0 +1,645 @@
+// The mind map's data and its layout — plain functions, no React, no DOM.
+// They run anywhere (the server, an agent's tool, a test).
+//
+// A map is one tree of topics:
+//
+//   { id: "root", text: "Launch plan", children: [
+//       { id: "a", text: "Research", side: "right", color: "chart-3", children: [...] },
+//       { id: "b", text: "Pricing", collapsed: true, children: [...] },
+//   ] }
+//
+//   id         any string, unique in the map
+//   text       the words (a newline is allowed)
+//   children   the subtopics, in order
+//   collapsed  true: the branch is folded (its subtopics hidden)
+//   color      a colour TOKEN ("chart-3"), the branch's hue; subtopics
+//              inherit it. Unset on a main branch: the next in the palette
+//   side       "left" | "right", only on main branches (the root's
+//              children): which side of the centre it grows on. Unset:
+//              balanced by size
+//   note       any extra text you keep with it (shown nowhere by the map)
+//
+// Every operation returns a NEW tree (the old one is left as it was), so
+// a tree is safe to keep for undo.
+
+/** The branch colours, in order: chart hues, which every theme derives
+ *  from its own primary. The root wears the primary itself. */
+export const BRANCH_COLORS = ["chart-2", "chart-3", "chart-4", "chart-5", "chart-1"];
+
+let seq = 0;
+/** A fresh topic id: `t-lx3k9f2a`. */
+export function topicId() {
+  seq = (seq + 1) % 1296;
+  return `t-${Date.now().toString(36)}${seq.toString(36).padStart(2, "0")}${Math.floor(Math.random() * 1296)
+    .toString(36)
+    .padStart(2, "0")}`;
+}
+
+/** A new topic. */
+export function createTopic(text = "", extra) {
+  return { id: topicId(), text, children: [], ...(extra ?? {}) };
+}
+
+const isObj = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+
+/**
+ * Anything map-shaped → a clean tree: an object with `text`/`children`
+ * (also `title`/`label`/`name` for the words and `topics`/`items` for the
+ * children), an outline string (see outlineToMindMap), or nothing (a
+ * fresh map). Missing and repeated ids are made unique. Never throws.
+ */
+export function normalizeMap(value, { rootText = "Central topic" } = {}) {
+  if (typeof value === "string") return outlineToMindMap(value, { rootText });
+  const seen = new Set();
+  const walk = (t, depth) => {
+    const text = typeof t?.text === "string" ? t.text : String(t?.title ?? t?.label ?? t?.name ?? "");
+    let id = t?.id != null && t.id !== "" ? String(t.id) : depth === 0 ? "root" : topicId();
+    while (seen.has(id)) id = topicId();
+    seen.add(id);
+    const kids = Array.isArray(t?.children) ? t.children : Array.isArray(t?.topics) ? t.topics : Array.isArray(t?.items) ? t.items : [];
+    const out = { ...t, id, text, children: kids.filter((k) => isObj(k) || typeof k === "string").map((k) => walk(typeof k === "string" ? { text: k } : k, depth + 1)) };
+    delete out.topics;
+    delete out.items;
+    if (depth !== 1) delete out.side;
+    else if (out.side !== "left" && out.side !== "right") delete out.side;
+    if (!out.collapsed) delete out.collapsed;
+    if (!out.color) delete out.color;
+    return out;
+  };
+  if (!isObj(value)) return { id: "root", text: rootText, children: [] };
+  return walk(value, 0);
+}
+
+// ── reading ──────────────────────────────────────────────────────────────
+
+/** Every topic, depth first, with its parent and depth. */
+export function flattenMap(root) {
+  const out = [];
+  const walk = (t, parent, depth, index) => {
+    out.push({ topic: t, parent, depth, index });
+    (t.children ?? []).forEach((c, i) => walk(c, t, depth + 1, i));
+  };
+  if (root) walk(root, null, 0, 0);
+  return out;
+}
+
+/** The topic with this id, or null. */
+export function findTopic(root, id) {
+  if (!root) return null;
+  if (root.id === id) return root;
+  for (const c of root.children ?? []) {
+    const hit = findTopic(c, id);
+    if (hit) return hit;
+  }
+  return null;
+}
+
+/** [root, …, the topic] — the path down to it, or [] when it is not there. */
+export function pathTo(root, id) {
+  if (!root) return [];
+  if (root.id === id) return [root];
+  for (const c of root.children ?? []) {
+    const p = pathTo(c, id);
+    if (p.length) return [root, ...p];
+  }
+  return [];
+}
+
+/** The parent of a topic (null for the root or a stranger). */
+export function parentOf(root, id) {
+  const p = pathTo(root, id);
+  return p.length > 1 ? p[p.length - 2] : null;
+}
+
+/** How many topics sit under this one, at every depth. */
+export function countTopics(topic) {
+  let n = 0;
+  for (const c of topic?.children ?? []) n += 1 + countTopics(c);
+  return n;
+}
+
+/** Is `id` the topic `ancestor` or anywhere under it? */
+export function isWithin(root, ancestorId, id) {
+  const a = findTopic(root, ancestorId);
+  return Boolean(a && findTopic(a, id));
+}
+
+// ── changing ─────────────────────────────────────────────────────────────
+
+/** A copy of the tree with one topic replaced by fn(topic). */
+export function mapTopic(root, id, fn) {
+  if (!root) return root;
+  if (root.id === id) return fn(root);
+  let changed = false;
+  const kids = (root.children ?? []).map((c) => {
+    const next = mapTopic(c, id, fn);
+    if (next !== c) changed = true;
+    return next;
+  });
+  return changed ? { ...root, children: kids } : root;
+}
+
+/** Merge a patch into one topic (`{ text }`, `{ color }`, `{ collapsed }`…). */
+export function updateTopic(root, id, patch) {
+  return mapTopic(root, id, (t) => {
+    const next = { ...t, ...(typeof patch === "function" ? patch(t) : patch) };
+    for (const k of ["color", "collapsed", "side", "note"]) if (next[k] === undefined || next[k] === false || next[k] === "") delete next[k];
+    return next;
+  });
+}
+
+// Main branches keep the side they are on once the map changes around
+// them, so adding one never flips the others across the centre.
+function pinSides(root) {
+  const kids = root.children ?? [];
+  if (kids.every((c) => c.side)) return root;
+  const sides = splitSides(root);
+  return { ...root, children: kids.map((c) => (c.side ? c : { ...c, side: sides.get(c.id) })) };
+}
+
+/** Put `topic` under `parentId` at `index` (default: last). A new main
+ *  branch goes on the lighter side unless it names one. */
+export function insertTopic(root, parentId, topic, index) {
+  const t = topic ?? createTopic();
+  if (parentId === root.id) {
+    const pinned = pinSides(root);
+    const kids = [...(pinned.children ?? [])];
+    let side = t.side;
+    if (!side) {
+      const l = kids.filter((c) => c.side === "left").reduce((n, c) => n + 1 + visibleCount(c), 0);
+      const r = kids.filter((c) => c.side !== "left").reduce((n, c) => n + 1 + visibleCount(c), 0);
+      side = l < r ? "left" : "right";
+    }
+    const at = index === undefined ? kids.length : Math.max(0, Math.min(kids.length, index));
+    kids.splice(at, 0, { ...t, side });
+    return { ...pinned, children: kids };
+  }
+  return mapTopic(root, parentId, (p) => {
+    const kids = [...(p.children ?? [])];
+    const { side: _s, ...rest } = t;
+    const at = index === undefined ? kids.length : Math.max(0, Math.min(kids.length, index));
+    kids.splice(at, 0, rest);
+    const next = { ...p, children: kids };
+    delete next.collapsed;
+    return next;
+  });
+}
+
+function visibleCount(t) {
+  if (t.collapsed) return 0;
+  let n = 0;
+  for (const c of t.children ?? []) n += 1 + visibleCount(c);
+  return n;
+}
+
+/** A new topic next to `id` (after it, or before with `before`). On the
+ *  root there is no next to: it becomes a child. */
+export function insertSibling(root, id, topic, { before = false } = {}) {
+  const parent = parentOf(root, id);
+  if (!parent) return insertTopic(root, root.id, topic);
+  const i = parent.children.findIndex((c) => c.id === id);
+  const me = parent.children[i];
+  const t = parent.id === root.id && me?.side ? { ...topic, side: topic.side ?? me.side } : topic;
+  return insertTopic(root, parent.id, t, before ? i : i + 1);
+}
+
+/** Take a topic (and its branch) out. The root stays. */
+export function removeTopic(root, id) {
+  if (!root || root.id === id) return root;
+  const parent = parentOf(root, id);
+  if (!parent) return root;
+  return mapTopic(root, parent.id, (p) => ({ ...p, children: p.children.filter((c) => c.id !== id) }));
+}
+
+/** Move a topic (with its branch) under `parentId` at `index` (default
+ *  last). Refused (the same tree back) into its own branch. */
+export function moveTopic(root, id, parentId, index) {
+  if (id === root.id || isWithin(root, id, parentId)) return root;
+  const t = findTopic(root, id);
+  if (!t) return root;
+  const from = parentOf(root, id);
+  let at = index;
+  if (from?.id === parentId && at !== undefined) {
+    const was = from.children.findIndex((c) => c.id === id);
+    if (was < at) at -= 1;
+  }
+  const without = removeTopic(root, id);
+  const moved = { ...t };
+  if (parentId !== root.id) delete moved.side;
+  else if (from?.id !== root.id) delete moved.side;
+  return insertTopic(without, parentId, moved, at);
+}
+
+/** Swap a topic with its neighbour: `delta` -1 (up) or +1 (down). A main
+ *  branch trades places with the next one on its own side. */
+export function shiftTopic(root, id, delta) {
+  const parent = parentOf(root, id);
+  if (!parent) return root;
+  const base = parent.id === root.id ? pinSides(root) : parent;
+  const kids = base.children;
+  const i = kids.findIndex((c) => c.id === id);
+  const sameSide = (c) => parent.id !== root.id || (c.side ?? "right") === (kids[i].side ?? "right");
+  let j = i + delta;
+  while (j >= 0 && j < kids.length && !sameSide(kids[j])) j += delta;
+  if (j < 0 || j >= kids.length) return root;
+  const next = [...kids];
+  [next[i], next[j]] = [next[j], next[i]];
+  if (parent.id === root.id) return { ...base, children: next };
+  return mapTopic(root, parent.id, (p) => ({ ...p, children: next }));
+}
+
+/** Tab on an outline: the topic becomes the last child of the topic
+ *  before it. Nothing before it: the same tree back. */
+export function indentTopic(root, id) {
+  const parent = parentOf(root, id);
+  if (!parent) return root;
+  const kids = parent.id === root.id ? pinSides(root).children : parent.children;
+  const i = kids.findIndex((c) => c.id === id);
+  const me = kids[i];
+  let j = i - 1;
+  if (parent.id === root.id) while (j >= 0 && (kids[j].side ?? "right") !== (me.side ?? "right")) j -= 1;
+  if (j < 0) return root;
+  return moveTopic(root, id, kids[j].id);
+}
+
+/** Shift+Tab: the topic moves up a level, to just after its parent. */
+export function outdentTopic(root0, id) {
+  const root = pinSides(root0);
+  const path = pathTo(root, id);
+  if (path.length < 3) return root0;
+  const parent = path[path.length - 2];
+  const grand = path[path.length - 3];
+  const at = grand.children.findIndex((c) => c.id === parent.id) + 1;
+  const t = findTopic(root, id);
+  const moved = grand.id === root.id ? { ...t, side: parent.side } : t;
+  const without = removeTopic(root, id);
+  return insertTopic(without, grand.id, moved, at);
+}
+
+/** A copy of a branch with fresh ids, placed right after it. */
+export function duplicateTopic(root, id) {
+  const t = findTopic(root, id);
+  if (!t || id === root.id) return { root, id: null };
+  const copy = (x) => ({ ...x, id: topicId(), children: (x.children ?? []).map(copy) });
+  const c = copy(t);
+  return { root: insertSibling(root, id, c), id: c.id };
+}
+
+/** Fold (or unfold) every branch that has subtopics, the root aside. */
+export function setAllCollapsed(root, collapsed) {
+  const walk = (t, depth) => {
+    const kids = (t.children ?? []).map((c) => walk(c, depth + 1));
+    const next = { ...t, children: kids };
+    if (depth > 0 && collapsed && kids.length) next.collapsed = true;
+    else delete next.collapsed;
+    return next;
+  };
+  return walk(root, 0);
+}
+
+// ── outline in, outline out ──────────────────────────────────────────────
+
+/**
+ * An indented outline → topics (a forest: an array of top-level topics).
+ * Bullets (-, *, •, 1.), markdown headings (# is the top), tabs or spaces;
+ * blank lines skipped. What an agent writes, or a list pasted from notes.
+ */
+export function outlineToTopics(text) {
+  const lines = String(text ?? "")
+    .replace(/\r\n?/g, "\n")
+    .split("\n")
+    .filter((l) => l.trim());
+  if (!lines.length) return [];
+  const rows = lines.map((l) => {
+    const heading = /^\s*(#{1,6})\s+(.*)$/.exec(l);
+    if (heading) return { level: heading[1].length - 7, text: heading[2].trim() };
+    const lead = /^[\t ]*/.exec(l)[0].replace(/\t/g, "    ").length;
+    const body = l.trim().replace(/^(?:[-*+•]|\d+[.)])\s+/, "").replace(/^\[[ xX]\]\s+/, "");
+    return { level: lead, text: body.trim() };
+  });
+  // Headings sit above every indented line; indents rank by their width.
+  const levels = [...new Set(rows.map((r) => r.level))].sort((a, b) => a - b);
+  const rank = new Map(levels.map((l, i) => [l, i]));
+  const forest = [];
+  const stack = [];
+  for (const r of rows) {
+    const depth = rank.get(r.level);
+    const t = createTopic(r.text);
+    while (stack.length && stack[stack.length - 1].depth >= depth) stack.pop();
+    if (stack.length) stack[stack.length - 1].topic.children.push(t);
+    else forest.push(t);
+    stack.push({ depth, topic: t });
+  }
+  return forest;
+}
+
+/** An outline → a map. One top line: it is the centre. Several: they
+ *  hang off a centre called `rootText`. */
+export function outlineToMindMap(text, { rootText = "Central topic" } = {}) {
+  const forest = outlineToTopics(text);
+  if (forest.length === 1) return { ...forest[0], id: "root" };
+  return { id: "root", text: rootText, children: forest };
+}
+
+/** The map as an indented outline, two spaces a level — for an agent, a
+ *  clipboard, a search column. Folded branches are included. */
+export function mindMapToText(topic) {
+  const out = [];
+  const walk = (t, depth) => {
+    out.push(`${"  ".repeat(depth)}${depth ? "- " : ""}${String(t.text ?? "").replace(/\n/g, " ") || "Untitled"}`);
+    for (const c of t.children ?? []) walk(c, depth + 1);
+  };
+  if (topic) walk(topic, 0);
+  return out.join("\n");
+}
+
+/** The map as Markdown: the centre as a heading, the branches as a
+ *  nested list. */
+export function mindMapToMarkdown(root) {
+  if (!root) return "";
+  const lines = [`# ${String(root.text ?? "").replace(/\n/g, " ") || "Untitled"}`, ""];
+  const walk = (t, depth) => {
+    lines.push(`${"  ".repeat(depth)}- ${String(t.text ?? "").replace(/\n/g, " ") || "Untitled"}`);
+    for (const c of t.children ?? []) walk(c, depth + 1);
+  };
+  for (const c of root.children ?? []) walk(c, 0);
+  return lines.join("\n");
+}
+
+// ── layout ───────────────────────────────────────────────────────────────
+
+// Type and box per level, in px. The node draws with exactly these, so
+// what is laid out is what is shown. level 0 = the centre, 1 = a main
+// branch (a tinted pill), 2+ = a subtopic (words over a coloured line).
+export const LEVELS = [
+  { font: 18, weight: 600, line: 26, padX: 20, padY: 12, min: 120, max: 280, gap: 56 },
+  { font: 14, weight: 500, line: 20, padX: 14, padY: 8, min: 64, max: 220, gap: 36 },
+  { font: 14, weight: 400, line: 20, padX: 6, padY: 5, min: 44, max: 240, gap: 28 },
+];
+export const levelOf = (depth) => LEVELS[Math.min(depth, LEVELS.length - 1)];
+const SIBLING_GAP = [0, 20, 8];
+const siblingGap = (depth) => SIBLING_GAP[Math.min(depth, SIBLING_GAP.length - 1)];
+/** Room left under a subtopic for its coloured line. */
+export const UNDERLINE = 2;
+
+/** A width guess without a DOM: average glyph widths for a UI sans. */
+export function estimateText(text, { font = 14, weight = 400 } = {}) {
+  let w = 0;
+  for (const ch of String(text ?? "")) w += /[A-Z]/.test(ch) ? 0.66 : /[mwMW]/.test(ch) ? 0.8 : /[ilj.,:;'!|]/.test(ch) ? 0.28 : ch === " " ? 0.28 : 0.54;
+  return w * font * (weight >= 600 ? 1.05 : weight >= 500 ? 1.02 : 1);
+}
+
+/** Words wrapped at `max` px → { width, lines }. */
+export function wrapText(text, max, measure, style) {
+  const paras = String(text ?? "").split("\n");
+  let width = 0;
+  let lines = 0;
+  const space = measure(" ", style);
+  for (const para of paras) {
+    const words = para.split(/\s+/).filter(Boolean);
+    if (!words.length) {
+      lines += 1;
+      continue;
+    }
+    let line = 0;
+    for (const w of words) {
+      const ww = measure(w, style);
+      if (line && line + space + ww > max) {
+        width = Math.max(width, line);
+        lines += 1;
+        line = 0;
+      }
+      if (ww > max) {
+        // One word longer than the line: it breaks where it must.
+        const extra = Math.floor(ww / max);
+        lines += extra;
+        width = max;
+        line = ww - extra * max;
+        continue;
+      }
+      line = line ? line + space + ww : ww;
+    }
+    width = Math.max(width, line);
+    lines += 1;
+  }
+  return { width: Math.min(max, width), lines: Math.max(1, lines) };
+}
+
+/** The box a topic needs at a depth: { width, height }. `placeholder`
+ *  sizes an empty topic. */
+export function topicSize(text, depth, measure = estimateText, placeholder = "New topic") {
+  const L = levelOf(depth);
+  const style = { font: L.font, weight: L.weight };
+  const words = String(text ?? "").trim() ? text : placeholder;
+  const { width, lines } = wrapText(words, L.max - L.padX * 2, measure, style);
+  // +2: a browser wraps a hair sooner than the sum of the words' widths.
+  const w = Math.max(L.min, Math.ceil(width + 2) + L.padX * 2);
+  const h = lines * L.line + L.padY * 2 + (depth >= 2 ? UNDERLINE : 0);
+  return { width: w, height: h };
+}
+
+/** Which side each main branch grows on: its own `side`, else split in
+ *  order so the two sides hold about as many rows. Counted in topics, not
+ *  pixels, so the answer never depends on the font. Map(id → side). */
+export function splitSides(root) {
+  const kids = root?.children ?? [];
+  const rows = (t) => (t.collapsed || !t.children?.length ? 1 : t.children.reduce((n, c) => n + rows(c), 0));
+  const w = kids.map(rows);
+  const out = new Map();
+  let L = 0;
+  let R = 0;
+  const free = [];
+  kids.forEach((c, i) => {
+    if (c.side === "left") (L += w[i]), out.set(c.id, "left");
+    else if (c.side === "right") (R += w[i]), out.set(c.id, "right");
+    else free.push(i);
+  });
+  // The first k free branches go right, the rest left: the k that leaves
+  // the two sides closest wins (a tie: more on the right).
+  let best = 0;
+  let bestDiff = Infinity;
+  const total = free.reduce((n, i) => n + w[i], 0);
+  let acc = 0;
+  for (let k = 0; k <= free.length; k++) {
+    const diff = Math.abs(R + acc - (L + total - acc));
+    if (diff <= bestDiff) {
+      bestDiff = diff;
+      best = k;
+    }
+    if (k < free.length) acc += w[free[k]];
+  }
+  free.forEach((i, n) => out.set(kids[i].id, n < best ? "right" : "left"));
+  return out;
+}
+
+/**
+ * Where every visible topic goes. The centre at (0, 0); main branches
+ * on both sides, balanced; each branch a tidy tree growing outwards, a
+ * topic centred on its subtopics. Folded branches stop at the fold.
+ *
+ *   measure(text, { font, weight }) → px   (default: estimateText)
+ *   colors   the branch palette (default BRANCH_COLORS)
+ *
+ * Returns { items, bounds }. Each item: { id, topic, parentId, depth,
+ * side ("root" | "left" | "right"), color, x, y, width, height (top-left
+ * box), hidden (topics folded away under it), from / to (where the line
+ * from the parent leaves and arrives, board px) }.
+ */
+export function layoutMindMap(root, { measure = estimateText, colors = BRANCH_COLORS } = {}) {
+  if (!root) return { items: [], bounds: { x: 0, y: 0, width: 0, height: 0 } };
+  const sizes = new Map();
+  const sizeOf = (t, depth) => {
+    const k = t.id;
+    if (!sizes.has(k)) sizes.set(k, topicSize(t.text, depth, measure));
+    return sizes.get(k);
+  };
+  const block = new Map();
+  const blockOf = (t, depth) => {
+    if (block.has(t.id)) return block.get(t.id);
+    const own = sizeOf(t, depth).height;
+    let h = own;
+    if (!t.collapsed && t.children?.length) {
+      const sum = t.children.reduce((n, c) => n + blockOf(c, depth + 1), 0) + siblingGap(depth + 1) * (t.children.length - 1);
+      h = Math.max(own, sum);
+    }
+    block.set(t.id, h);
+    return h;
+  };
+
+  const items = [];
+  const rs = sizeOf(root, 0);
+  const rootItem = { id: root.id, topic: root, parentId: null, depth: 0, side: "root", color: null, x: -rs.width / 2, y: -rs.height / 2, width: rs.width, height: rs.height, hidden: root.collapsed ? countTopics(root) : 0 };
+  items.push(rootItem);
+
+  // Where a line leaves a topic towards its children on `side`, and where
+  // a line arrives at it.
+  const outAnchor = (it, side) => {
+    const dir = side === "left" ? -1 : 1;
+    const x = dir > 0 ? it.x + it.width : it.x;
+    const y = it.depth >= 2 ? it.y + it.height - UNDERLINE / 2 : it.y + it.height / 2;
+    return { x, y, dir };
+  };
+  const inAnchor = (it) => {
+    const x = it.side === "left" ? it.x + it.width : it.x;
+    const y = it.depth >= 2 ? it.y + it.height - UNDERLINE / 2 : it.y + it.height / 2;
+    return { x, y };
+  };
+
+  const place = (t, parentItem, depth, side, top, color) => {
+    const s = sizeOf(t, depth);
+    const b = blockOf(t, depth);
+    const from = outAnchor(parentItem, side);
+    const gap = levelOf(depth - 1).gap;
+    const cy = top + b / 2;
+    const x = side === "left" ? from.x - gap - s.width : from.x + gap;
+    // A subtopic's line is its foot: centre the words so the line sits
+    // at the middle of its children.
+    const y = cy - s.height / 2;
+    const it = { id: t.id, topic: t, parentId: parentItem.id, depth, side, color, x, y, width: s.width, height: s.height, hidden: t.collapsed ? countTopics(t) : 0 };
+    it.from = { x: from.x, y: from.y };
+    it.to = inAnchor(it);
+    items.push(it);
+    if (!t.collapsed && t.children?.length) {
+      const sum = t.children.reduce((n, c) => n + blockOf(c, depth + 1), 0) + siblingGap(depth + 1) * (t.children.length - 1);
+      let y2 = cy - sum / 2;
+      for (const c of t.children) {
+        place(c, it, depth + 1, side, y2, c.color ?? color);
+        y2 += blockOf(c, depth + 1) + siblingGap(depth + 1);
+      }
+    }
+  };
+
+  if (!root.collapsed) {
+    const sides = splitSides(root);
+    const kids = root.children ?? [];
+    for (const side of ["right", "left"]) {
+      const mine = kids.map((c, i) => ({ c, i })).filter(({ c }) => sides.get(c.id) === side);
+      if (!mine.length) continue;
+      const sum = mine.reduce((n, { c }) => n + blockOf(c, 1), 0) + siblingGap(1) * (mine.length - 1);
+      let y = -sum / 2;
+      for (const { c, i } of mine) {
+        place(c, rootItem, 1, side, y, c.color ?? colors[i % colors.length]);
+        y += blockOf(c, 1) + siblingGap(1);
+      }
+    }
+  }
+
+  let x1 = Infinity;
+  let y1 = Infinity;
+  let x2 = -Infinity;
+  let y2 = -Infinity;
+  for (const it of items) {
+    x1 = Math.min(x1, it.x);
+    y1 = Math.min(y1, it.y);
+    x2 = Math.max(x2, it.x + it.width);
+    y2 = Math.max(y2, it.y + it.height);
+  }
+  return { items, bounds: { x: x1, y: y1, width: x2 - x1, height: y2 - y1 } };
+}
+
+/** The map as a FlowCanvas board: one `topic` node per visible topic,
+ *  laid out (layoutMindMap), no connectors (each topic draws the line to
+ *  its parent). What MindMap hands the canvas. */
+export function mindMapToBoard(root, opts) {
+  const { items } = layoutMindMap(root, opts);
+  const round = (n) => Math.round(n * 100) / 100;
+  return {
+    nodes: items.map((it) => ({
+      id: it.id,
+      type: "topic",
+      position: { x: round(it.x), y: round(it.y) },
+      width: Math.round(it.width),
+      height: Math.round(it.height),
+      draggable: false,
+      connectable: false,
+      data: {
+        text: it.topic.text,
+        depth: it.depth,
+        side: it.side,
+        color: it.color,
+        kids: it.topic.children?.length ?? 0,
+        collapsed: Boolean(it.topic.collapsed),
+        hidden: it.hidden,
+        link: it.from ? { x1: round(it.from.x - it.x), y1: round(it.from.y - it.y), x2: round(it.to.x - it.x), y2: round(it.to.y - it.y) } : null,
+      },
+    })),
+    edges: [],
+  };
+}
+
+/** The curve from a parent to a child, in the child's own coordinates. */
+export function branchPath({ x1, y1, x2, y2 }) {
+  const dx = (x2 - x1) * 0.55;
+  return `M${x1},${y1} C${x1 + dx},${y1} ${x2 - dx},${y2} ${x2},${y2}`;
+}
+
+// ── starters ─────────────────────────────────────────────────────────────
+
+const t = (text, children = []) => ({ text, children: children.map((c) => (typeof c === "string" ? t(c) : c)) });
+
+/** What an empty map offers. Each `map()` makes a fresh tree. */
+export function mindMapTemplates() {
+  return [
+    {
+      id: "project",
+      label: "Project plan",
+      icon: "flag",
+      description: "Goals, scope, people, risks",
+      map: () => normalizeMap(t("Project", [t("Goals", ["Why now", "What success looks like"]), t("Scope", ["In", "Out"]), t("People", ["Owner", "Helpers"]), t("Milestones"), t("Risks")])),
+    },
+    {
+      id: "brainstorm",
+      label: "Brainstorm",
+      icon: "lightbulb",
+      description: "One question, ideas around it",
+      map: () => normalizeMap(t("How might we…?", ["Idea", "Idea", "Idea", "Idea"])),
+    },
+    {
+      id: "meeting",
+      label: "Meeting notes",
+      icon: "message-square",
+      description: "Agenda, decisions, actions",
+      map: () => normalizeMap(t("Meeting", [t("Agenda"), t("Notes"), t("Decisions"), t("Actions")])),
+    },
+  ];
+}