slidemind 0.3.20 → 0.4.1

package/src/builders/repeat-groups.mjs

@@ -0,0 +1,540 @@
+// Repeated organisms, built from one template. The concept image is a sketch:
+// four step cards come out 105, 115, 113 and 115 px tall, their discs and
+// texts a few px apart, the ring 181 px above its hub and 197 px below it.
+// Near-equal geometry is never snapped on a guess (bb782591): the READER
+// declares which containers are one organism and how they are arranged
+// (`spec.repeats`, concept-repeats.ts), and this module builds what it means —
+//   - one size for every member (the members' median),
+//   - one inner layout: corresponding children at the median offset and size
+//     (a disc, its icon, the number badge on the corner, the text block),
+//   - exact placement: a row or column on one axis with equal gaps, a grid on
+//     equal pitches, a ring on one ellipse around its hub at equal angles —
+//     mirror-symmetric about the hub's axes.
+// Pure spec in, spec out; a set that cannot be built stays as drawn, noted.
+import { translateElement } from "./concept-geometry.mjs";
+
+const GAP = 4; // px between neighbours when a row or column has to open up
+const ANGLE_SNAP = 15; // degrees: a ring starts on the nearest 15° (top, right…)
+
+const median = (v) => {
+  const s = [...v].sort((a, b) => a - b);
+  const m = s.length >> 1;
+  return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+};
+const centre = (e) => ({ x: e.x + e.w / 2, y: e.y + e.h / 2 });
+const half = (v) => Math.round(v * 2) / 2;
+
+/**
+ * The declared sets whose members are on this slide: `[{ id, members,
+ * arrangement, hub, built }]` with elements. A member is a container (a card),
+ * or — a row the design draws without one: its disc, its label, its text — the
+ * loose elements that make it, as a virtual member `{ id, ids, virtual }` over
+ * their box. `built`: buildRepeats made this set one template.
+ */
+export function repeatGroups(spec) {
+  const byId = new Map((spec.elements ?? []).map((e) => [e.id, e]));
+  // A part may be a rule that became a line (remapRepeats): it spans the box,
+  // so the member's own lines (linesWithin) move with it.
+  const lineById = new Map((spec.connectors ?? []).filter((c) => c.id).map((c) => [c.id, c]));
+  const out = [];
+  for (const g of spec.repeats ?? []) {
+    const members = (g.members ?? []).map((m, i) => {
+      if (!Array.isArray(m) || m.length === 1) return byId.get(Array.isArray(m) ? m[0] : m);
+      const parts = m.filter((id) => byId.has(id)).map((id) => byId.get(id));
+      const lines = m.filter((id) => !byId.has(id)).map((id) => lineById.get(id));
+      if (!parts.length || lines.some((c) => !c)) return null;
+      const pts = [...parts.flatMap((e) => [{ x: e.x, y: e.y }, { x: e.x + e.w, y: e.y + e.h }]), ...lines.flatMap(linePoints)];
+      const x = Math.min(...pts.map((p) => p.x));
+      const y = Math.min(...pts.map((p) => p.y));
+      return { id: `${g.id}-${i + 1}`, ids: parts.map((e) => e.id), virtual: true, kind: "group", parent: null,
+        x, y, w: Math.max(...pts.map((p) => p.x)) - x, h: Math.max(...pts.map((p) => p.y)) - y };
+    }).filter(Boolean);
+    if (members.length < 2) continue;
+    out.push({ id: g.id, members, arrangement: g.arrangement, hub: g.hub ? byId.get(g.hub) ?? null : null, built: g.built === true });
+  }
+  return out;
+}
+
+/**
+ * The reader declares its sets on the ids it read; normalization then folds
+ * some of them (a title and its body into one block, a label into its shape)
+ * and turns rules into lines. A member names what survived: an absorbed id
+ * the element that took it in, a rule its line; an id that is gone leaves its
+ * member. A set that lost a member, or whose members no longer hold like
+ * parts, is dropped: kept as drawn, never built from parts that differ.
+ * `before`: the elements by id before normalization. Returns the notes.
+ */
+export function remapRepeats(spec, before) {
+  if (!spec.repeats?.length) return [];
+  const byId = new Map((spec.elements ?? []).map((e) => [e.id, e]));
+  const lines = new Set((spec.connectors ?? []).map((c) => c.id).filter(Boolean));
+  const into = new Map();
+  for (const e of spec.elements ?? []) for (const p of e.paragraphs ?? []) if (p.id && p.id !== e.id) into.set(p.id, e.id);
+  const resolve = (id) => {
+    if (byId.has(id) || lines.has(id)) return id;
+    if (into.has(id)) return into.get(id);
+    // A label folded into its shape: the shape now carries its words.
+    const old = before.get(id);
+    const words = String(old?.text ?? "").trim();
+    const p = old?.parent ? byId.get(old.parent) : null;
+    return words && p && String(p.text ?? "").includes(words) ? p.id : null;
+  };
+  const kinds = (m) => (Array.isArray(m) ? m : [m]).map((id) => byId.get(id)?.kind ?? "line").sort().join(",");
+  const notes = [];
+  spec.repeats = spec.repeats.flatMap((g) => {
+    let members = g.members.map((m) => (Array.isArray(m) ? [...new Set(m.map(resolve).filter(Boolean))] : resolve(m)));
+    if (members.every((m) => Array.isArray(m) && m.length === 1 && byId.has(m[0]))) members = members.map((m) => m[0]);
+    const label = `${g.id} (${g.members.map((m) => (Array.isArray(m) ? `(${m.join(" + ")})` : m)).join(", ")})`;
+    const why = members.some((m) => !(Array.isArray(m) ? m.some((id) => byId.has(id)) : m)) ? "a member did not survive normalization"
+      : new Set(members.map(kinds)).size > 1 ? "its members no longer hold like parts once texts were joined" : null;
+    if (why) { notes.push(`${label}: ${why} — kept as drawn`); return []; }
+    // Rows of a dot and its line that became the items of one list: the set
+    // IS that one text now, built as a list, not as copies of it.
+    if (members.length > 1 && new Set(members.map((m) => JSON.stringify(Array.isArray(m) ? [...m].sort() : [m]))).size === 1) {
+      notes.push(`${label}: its members became one list`);
+      return [];
+    }
+    return [{ ...g, members }];
+  });
+  return notes;
+}
+
+/** What a member holds: its children (or, a virtual member, its parts) and theirs, by depth. */
+export function descendants(elements, root) {
+  const out = [];
+  const seen = new Set();
+  const walk = (id, depth) => {
+    for (const e of elements) if (e.parent === id && !seen.has(e.id)) { seen.add(e.id); out.push({ e, depth }); walk(e.id, depth + 1); }
+  };
+  if (!root.ids) {
+    walk(root.id, 1);
+    return out;
+  }
+  const byId = new Map(elements.map((e) => [e.id, e]));
+  const parts = new Set(root.ids);
+  // A part inside another part is that part's child, not a second root.
+  const nested = (e) => {
+    for (let p = e.parent, g = 0; p && g < 32; p = byId.get(p)?.parent ?? null, g++) if (parts.has(p)) return true;
+    return false;
+  };
+  for (const id of root.ids) {
+    const e = byId.get(id);
+    if (!e || nested(e) || seen.has(id)) continue;
+    seen.add(id);
+    out.push({ e, depth: 1 });
+    walk(id, 2);
+  }
+  return out;
+}
+
+/**
+ * Corresponding children across members: each member's descendants keyed by
+ * depth, kind and — a text — its role (a title answers a title, never a
+ * body), then in reading order — rows first (children whose centres lie within
+ * half the smaller height share a row), left to right inside a row. A key the
+ * members share corresponds as far as every member has one; what only some
+ * members hold rides along with its member. null when they share nothing.
+ */
+export function correspond(elements, members) {
+  const reading = (items) => {
+    const byY = [...items].sort((a, b) => a.cy - b.cy);
+    const rows = [];
+    for (const it of byY) {
+      const row = rows.at(-1);
+      if (row && Math.abs(it.cy - row[0].cy) < Math.min(it.e.h, row[0].e.h) / 2) row.push(it);
+      else rows.push([it]);
+    }
+    return rows.flatMap((r) => r.sort((a, b) => a.cx - b.cx));
+  };
+  const keyOf = (it) => `${it.depth}:${it.e.kind}${it.e.kind === "text" || it.e.kind === "number" ? `:${it.e.role ?? ""}` : ""}`;
+  const lists = members.map((m) => {
+    const groups = new Map();
+    for (const { e, depth } of descendants(elements, m)) {
+      const it = { e, depth, cy: e.y + e.h / 2 - m.y, cx: e.x + e.w / 2 - m.x };
+      groups.set(keyOf(it), [...(groups.get(keyOf(it)) ?? []), it]);
+    }
+    for (const [k, items] of groups) groups.set(k, reading(items));
+    return groups;
+  });
+  const keys = [...lists[0].keys()].filter((k) => lists.every((l) => l.has(k))).sort();
+  const counts = keys.map((k) => Math.min(...lists.map((l) => l.get(k).length)));
+  const out = lists.map((l) => keys.flatMap((k, j) => l.get(k).slice(0, counts[j]).map((c) => c.e)));
+  return out[0].length ? out : null;
+}
+
+/**
+ * Member centres for an arrangement at template size W×H, from where the
+ * members are now. null when the arrangement cannot hold them.
+ */
+export function arrange(group, W, H) {
+  const { members, arrangement } = group;
+  const c = members.map(centre);
+  const n = members.length;
+  const line = (axis, size) => {
+    const cross = axis === "x" ? "y" : "x";
+    const order = members.map((_, i) => i).sort((a, b) => c[a][axis] - c[b][axis]);
+    const lo = Math.min(...members.map((m) => m[axis]));
+    const hi = Math.max(...members.map((m) => m[axis] + (axis === "x" ? m.w : m.h)));
+    let gap = (hi - lo - n * size) / (n - 1);
+    let start = lo;
+    if (gap < GAP) {
+      gap = GAP;
+      start = (lo + hi) / 2 - (n * size + (n - 1) * GAP) / 2;
+    }
+    const at = median(c.map((p) => p[cross]));
+    const out = new Array(n);
+    order.forEach((i, k) => { out[i] = { [axis]: start + size / 2 + k * (size + gap), [cross]: at }; });
+    return out;
+  };
+  if (arrangement === "row") return line("x", W);
+  if (arrangement === "column") return line("y", H);
+  if (arrangement === "grid") {
+    const cluster = (axis, size) => {
+      const order = members.map((_, i) => i).sort((a, b) => c[a][axis] - c[b][axis]);
+      const bands = [];
+      for (const i of order) {
+        const last = bands.at(-1);
+        if (last && c[i][axis] - c[last[0]][axis] <= size / 2) last.push(i);
+        else bands.push([i]);
+      }
+      const means = bands.map((b) => b.reduce((s, i) => s + c[i][axis], 0) / b.length);
+      let pitch = bands.length > 1 ? (means.at(-1) - means[0]) / (bands.length - 1) : 0;
+      let first = means[0];
+      if (bands.length > 1 && pitch < size + GAP) {
+        pitch = size + GAP;
+        first = (means[0] + means.at(-1)) / 2 - (pitch * (bands.length - 1)) / 2;
+      }
+      const at = new Array(n);
+      bands.forEach((b, k) => { for (const i of b) at[i] = first + k * pitch; });
+      return at;
+    };
+    const ys = cluster("y", H);
+    const xs = cluster("x", W);
+    const cells = new Set(members.map((_, i) => `${xs[i]},${ys[i]}`));
+    return cells.size === n ? members.map((_, i) => ({ x: xs[i], y: ys[i] })) : null;
+  }
+  if (arrangement === "ring") {
+    const C = group.hub ? centre(group.hub) : { x: c.reduce((s, p) => s + p.x, 0) / n, y: c.reduce((s, p) => s + p.y, 0) / n };
+    const deg = (i) => (Math.atan2(c[i].y - C.y, c[i].x - C.x) * 180) / Math.PI;
+    const order = members.map((_, i) => i).sort((a, b) => deg(a) - deg(b));
+    const step = 360 / n;
+    // The start angle every member agrees on (circular mean), on the 15° grid.
+    let sx = 0;
+    let sy = 0;
+    order.forEach((i, k) => {
+      const a = ((deg(i) - k * step) * Math.PI) / 180;
+      sx += Math.cos(a);
+      sy += Math.sin(a);
+    });
+    const start = Math.round(((Math.atan2(sy, sx) * 180) / Math.PI) / ANGLE_SNAP) * ANGLE_SNAP;
+    const phi = new Array(n);
+    order.forEach((i, k) => { phi[i] = ((start + k * step) * Math.PI) / 180; });
+    // One ellipse through them all (least squares per axis).
+    const fit = (axis, f) => {
+      const den = members.reduce((s, _, i) => s + f(phi[i]) ** 2, 0);
+      return den > 1e-6 ? Math.abs(members.reduce((s, _, i) => s + (c[i][axis] - C[axis]) * f(phi[i]), 0) / den) : 0;
+    };
+    const rx = fit("x", Math.cos);
+    const ry = fit("y", Math.sin);
+    const snap = (v) => (Math.abs(v) < 1e-9 ? 0 : v);
+    return members.map((_, i) => ({ x: C.x + snap(rx * Math.cos(phi[i])), y: C.y + snap(ry * Math.sin(phi[i])) }));
+  }
+  return null;
+}
+
+const inside = (r, p, tol = 2) => p.x >= r.x - tol && p.y >= r.y - tol && p.x <= r.x + r.w + tol && p.y <= r.y + r.h + tol;
+// Every point a connector carries — its ends, its trace, and the cached native
+// line (`line.ends[].at`, `line.path.points`) the directive is written from.
+// Deduplicated by identity: the trace array is shared between them at times.
+export const linePoints = (c) => [...new Set([c.fromPoint, c.toPoint, ...(c.points ?? []), ...(c.line?.ends ?? []).map((e) => e.at), ...(c.line?.path?.points ?? [])])]
+  .filter((p) => p && Number.isFinite(p.x) && Number.isFinite(p.y));
+
+/**
+ * A member's own lines: connectors drawn wholly inside it (a divider under a
+ * card title) whose glued ends, if any, are the member or its content. They are
+ * not elements, so they move with the member explicitly.
+ */
+export function linesWithin(spec, member) {
+  const own = new Set([member.id, ...descendants(spec.elements ?? [], member).map(({ e }) => e.id)]);
+  return (spec.connectors ?? []).filter((c) => {
+    const pts = linePoints(c);
+    return pts.length >= 2 && pts.every((p) => inside(member, p)) && [c.from, c.to].every((id) => !id || own.has(id));
+  });
+}
+
+/** The elements a connector is glued to: its ends, and the cached native line's. */
+export const gluedIds = (c) => [c.from, c.to, ...(c.line?.ends ?? []).map((e) => e?.node)].filter(Boolean);
+
+/** A connector's drawn polyline: the cached native path, its trace, or its two ends. */
+export const lineTrace = (c) => [c.line?.path?.points, c.points, [c.fromPoint, c.toPoint]]
+  .find((p) => p?.length >= 2 && p.every((q) => Number.isFinite(q?.x) && Number.isFinite(q?.y))) ?? null;
+
+/**
+ * Where the slide's lines cross the rows y0..y1: `{ x, w, line }` per segment of a
+ * connector's trace inside that band, padded by half its stroke. A text grown
+ * sideways stops at these as at any neighbour (a loop around a panel, the
+ * rule beside a title) — a line is not an element, so an element-only room
+ * let a widened text run into it (pm-03 after-bullet-2 over its loop).
+ * A line glued to one of `ignore` (the text itself, its card) follows that
+ * element when it grows, so it is no neighbour of it.
+ */
+export const lineSpans = (spec, y0, y1, ignore = new Set()) => band(spec, y0, y1, ignore, "y", "x").map(({ at, len, line }) => ({ x: at, w: len, line }));
+
+/**
+ * The same crossing the columns x0..x1: `{ y, h, line }` per segment of a
+ * trace there — what lies above or under a text in its own columns (the rule
+ * over a title, the timeline over a step number).
+ */
+export const lineRows = (spec, x0, x1, ignore = new Set()) => band(spec, x0, x1, ignore, "x", "y").map(({ at, len, line }) => ({ y: at, h: len, line }));
+
+// Each segment's extent along `v` where it crosses lo..hi along `u`.
+function band(spec, lo, hi, ignore, u, v) {
+  const out = [];
+  for (const c of spec.connectors ?? []) {
+    const trace = gluedIds(c).some((id) => ignore.has(id)) ? null : lineTrace(c);
+    if (!trace) continue;
+    const pad = (Number.isFinite(c.strokeWidth) ? c.strokeWidth : 1) / 2;
+    for (let i = 1; i < trace.length; i++) {
+      const a = trace[i - 1];
+      const b = trace[i];
+      let t0 = 0;
+      let t1 = 1;
+      if (a[u] === b[u]) {
+        if (a[u] + pad <= lo || a[u] - pad >= hi) continue;
+      } else {
+        [t0, t1] = [(lo - pad - a[u]) / (b[u] - a[u]), (hi + pad - a[u]) / (b[u] - a[u])].sort((p, q) => p - q);
+        t0 = Math.max(0, t0);
+        t1 = Math.min(1, t1);
+        if (t0 >= t1) continue;
+      }
+      const va = a[v] + (b[v] - a[v]) * t0;
+      const vb = a[v] + (b[v] - a[v]) * t1;
+      out.push({ at: Math.min(va, vb) - pad, len: Math.abs(vb - va) + 2 * pad, line: c });
+    }
+  }
+  return out;
+}
+
+export function moveLine(c, dx, dy) {
+  for (const p of linePoints(c)) { p.x += dx; p.y += dy; }
+}
+
+/**
+ * A member holding a sketched figure (spec.sketch, absolute coordinates keyed
+ * by id) or its own drawn geometry: a drawing moves as a whole, never resized.
+ */
+export function holdsDrawing(spec, member) {
+  const figures = new Set((spec.sketch?.figures ?? []).map((f) => f.id));
+  return [member, ...descendants(spec.elements ?? [], member).map(({ e }) => e)]
+    .some((e) => figures.has(e.id) || e.geometry || e.points?.length || e.outline?.length);
+}
+
+const isDrawn = (figures, e) => figures.has(e.id) || Boolean(e.geometry || e.points?.length || e.outline?.length);
+// The circles a figure's arcs ride on (an edge names its circle only as an arc).
+const usedCircles = (f) => [...(f.outline ?? []), ...(f.holes ?? []).flat()]
+  .filter((p) => p?.next === "arc").map((p) => p.circle).concat(f.copyOf?.about).filter((c) => typeof c === "string" && c !== ".");
+
+/**
+ * The circles a moved figure rides on must move with it, so they may belong
+ * to the drawings of ONE member only: a ring piece in one card arcing on the
+ * circle of another, or of a drawing outside the set, pins the set as drawn.
+ */
+function circlesShared(sketch, owner) {
+  // Only a circle the sketch draws moves; a reader's empty or ":null"
+  // stand-in names none (x87 cloud deck: three card sets pinned by ":null").
+  const drawn = new Set((sketch?.circles ?? []).map((c) => c.id));
+  const users = new Map();
+  for (const f of sketch?.figures ?? []) for (const c of usedCircles(f)) if (drawn.has(c)) users.set(c, [...(users.get(c) ?? []), f.id]);
+  return [...users.values()].some((ids) => {
+    const owners = new Set(ids.map((id) => owner.get(id) ?? null));
+    return owners.size > 1 && [...owners].some((o) => o != null);
+  });
+}
+
+/**
+ * Move a sketched figure with its element: its outline, holes, mirror axis and
+ * the circles it rides on. A copy is derived from its source, so only its
+ * offset changes — after the whole set moved (fixCopies).
+ */
+export function translateFigure(sketch, id, dx, dy, deltas, movedCircles) {
+  const f = (sketch?.figures ?? []).find((x) => x.id === id);
+  if (!f) return;
+  deltas.set(id, { dx, dy });
+  if (f.copyOf?.id) return;
+  for (const p of [...(f.outline ?? []), ...(f.holes ?? []).flat()]) { p.x += dx; p.y += dy; }
+  const m = f.mirror;
+  if (m?.axis === "vertical") m.at += dx;
+  else if (m?.axis === "horizontal") m.at += dy;
+  else if (m?.axis === "line" && m.through) {
+    if (Array.isArray(m.through)) m.through = [m.through[0] + dx, m.through[1] + dy];
+    else m.through = { ...m.through, x: m.through.x + dx, y: m.through.y + dy };
+  }
+  for (const c of sketch.circles ?? []) {
+    if (usedCircles(f).includes(c.id) && !movedCircles.has(c.id)) { c.cx += dx; c.cy += dy; movedCircles.add(c.id); }
+  }
+}
+
+// A copy sits at its source moved by its offset: it moves by what it should
+// move less what its source moved.
+export function fixCopies(sketch, deltas) {
+  for (const f of sketch?.figures ?? []) {
+    if (!f.copyOf?.id) continue;
+    const own = deltas.get(f.id) ?? { dx: 0, dy: 0 };
+    const src = deltas.get(f.copyOf.id) ?? { dx: 0, dy: 0 };
+    if (own.dx === src.dx && own.dy === src.dy) continue;
+    f.copyOf.dx = (Number(f.copyOf.dx) || 0) + own.dx - src.dx;
+    f.copyOf.dy = (Number(f.copyOf.dy) || 0) + own.dy - src.dy;
+  }
+}
+
+const overlaps = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+
+/**
+ * Keep a built set inside the slot without breaking it. A ring keeps its hub
+ * where it is — the hub anchors it to the rest of the slide — and closes in:
+ * the members on both sides of the hub move toward it by the same amount.
+ * Only when that would run them into the hub does the ring move as one, hub
+ * included; a row, column or grid moves as one. Moves the plans in place;
+ * returns the hub's shift, or null when the set cannot fit.
+ */
+function fitSlot(plans, hub, hubTree, slot) {
+  const rects = () => plans.flatMap((p) => [p.box, ...p.content.map((c) => c.to)]);
+  const saved = rects().map((r) => ({ ...r }));
+  const restore = () => rects().forEach((r, k) => Object.assign(r, saved[k]));
+  const move = (p, axis, d) => { for (const r of [p.box, ...p.content.map((c) => c.to)]) r[axis] += d; };
+  const axes = [["x", "w", slot.w], ["y", "h", slot.h]];
+  const extent = (axis, size, extra = []) => {
+    const rs = [...rects(), ...extra];
+    return [Math.min(...rs.map((r) => r[axis])), Math.max(...rs.map((r) => r[axis] + r[size]))];
+  };
+  const closeIn = (axis, size, inward) => {
+    const c = hub[axis] + hub[size] / 2;
+    for (const p of plans) {
+      const pc = p.box[axis] + p.box[size] / 2;
+      move(p, axis, pc < c - 1 ? inward : pc > c + 1 ? -inward : 0);
+    }
+  };
+  if (hub) {
+    for (const [axis, size, limit] of axes) {
+      const c = hub[axis] + hub[size] / 2;
+      const [lo, hi] = extent(axis, size);
+      const inward = Math.max(0, -lo, hi - limit);
+      if (inward > 0 && c - lo > inward && hi - c > inward) closeIn(axis, size, inward);
+    }
+    const inside = axes.every(([axis, size, limit]) => { const [lo, hi] = extent(axis, size); return lo >= -0.5 && hi <= limit + 0.5; });
+    if (inside && plans.every((p) => !overlaps(p.box, hub))) return { dx: 0, dy: 0 };
+    restore();
+  }
+  const out = { dx: 0, dy: 0 };
+  for (const [axis, size, limit] of axes) {
+    let [lo, hi] = extent(axis, size, hubTree);
+    if (hi - lo > limit && hub) {
+      closeIn(axis, size, (hi - lo - limit) / 2);
+      [lo, hi] = extent(axis, size, hubTree);
+    }
+    if (hi - lo > limit + 0.5) return null;
+    const d = lo < 0 ? -lo : hi > limit ? limit - hi : 0;
+    for (const p of plans) move(p, axis, d);
+    out[axis === "x" ? "dx" : "dy"] = d;
+  }
+  return out;
+}
+
+/**
+ * Build every declared set from one template, in place. Returns one line per
+ * set built or kept as drawn.
+ */
+export function buildRepeats(spec) {
+  const elements = spec.elements ?? [];
+  const slot = spec.slot;
+  const figures = new Set((spec.sketch?.figures ?? []).map((f) => f.id));
+  const drawn = (e) => isDrawn(figures, e);
+  const notes = [];
+  for (const g of repeatGroups(spec)) {
+    const { members } = g;
+    const label = `${g.id} (${members.map((m) => (m.ids ? `(${m.ids.join(" + ")})` : m.id)).join(", ")})`;
+    // A drawing moves whole with its member (never resized); the circles it
+    // rides on move with it, so none may be another member's or the slide's.
+    const owner = new Map(members.flatMap((m) => [m, ...descendants(elements, m).map(({ e }) => e)].filter((e) => figures.has(e.id)).map((e) => [e.id, m.id])));
+    if (owner.size && circlesShared(spec.sketch, owner)) { notes.push(`${label}: a drawing shares a circle with one outside its member — kept as drawn`); continue; }
+    const W = Math.round(median(members.map((m) => m.w)));
+    const H = Math.round(median(members.map((m) => m.h)));
+    const at = arrange(g, W, H);
+    if (!at) { notes.push(`${label}: its ${g.arrangement} could not be laid out — kept as drawn`); continue; }
+    const kids = correspond(elements, members);
+    // Each member's own lines, in reading order; alike across the set they
+    // share one template (a divider at one offset and length), else ride along.
+    const lines = members.map((m) => linesWithin(spec, m).sort((a, b) => linePoints(a)[0].y - linePoints(b)[0].y || linePoints(a)[0].x - linePoints(b)[0].x));
+    const lineTemplate = lines.every((l) => l.length === lines[0].length) && lines.flat().every((c) => linePoints(c).length === 2 || (c.points?.length === 2 && c.fromPoint && c.toPoint))
+      ? lines[0].map((_, k) => ["fromPoint", "toPoint"].map((end) => ({
+          x: median(lines.map((l, i) => (l[k][end] ?? l[k].points[end === "fromPoint" ? 0 : 1]).x - members[i].x)),
+          y: median(lines.map((l, i) => (l[k][end] ?? l[k].points[end === "fromPoint" ? 0 : 1]).y - members[i].y)),
+        })))
+      : null;
+    const template = kids?.[0].map((_, k) => ({
+      x: median(kids.map((l, i) => l[k].x - members[i].x)),
+      y: median(kids.map((l, i) => l[k].y - members[i].y)),
+      w: median(kids.map((l) => l[k].w)),
+      h: median(kids.map((l) => l[k].h)),
+    }));
+    // Where everything would go, before anything moves. A drawn member keeps
+    // its own size about the arranged centre; a drawn child keeps its size
+    // about its template centre; what only some members hold rides along.
+    const plans = members.map((m, i) => {
+      // Half-pixel grid: a hub centred on x.5 keeps its members mirror-exact.
+      const [bw, bh] = drawn(m) ? [m.w, m.h] : [W, H];
+      const box = { x: half(at[i].x - bw / 2), y: half(at[i].y - bh / 2), w: bw, h: bh };
+      const ride = (e) => ({ e, to: { x: half(e.x + box.x - m.x + (bw - m.w) / 2), y: half(e.y + box.y - m.y + (bh - m.h) / 2), w: e.w, h: e.h } });
+      const mine = kids?.[i] ?? [];
+      const content = [
+        ...mine.map((e, k) => {
+          const t = template[k];
+          return drawn(e)
+            ? { e, to: { x: half(box.x + t.x + t.w / 2 - e.w / 2), y: half(box.y + t.y + t.h / 2 - e.h / 2), w: e.w, h: e.h } }
+            : { e, to: { x: half(box.x + t.x), y: half(box.y + t.y), w: half(t.w), h: half(t.h) } };
+        }),
+        ...descendants(elements, m).map(({ e }) => e).filter((e) => !mine.includes(e)).map(ride),
+      ];
+      return { m, box, content, lines: lines[i] };
+    });
+    const hub = g.hub ? [g.hub, ...descendants(elements, g.hub).map(({ e }) => e)] : [];
+    const shift = fitSlot(plans, g.arrangement === "ring" ? g.hub : null, hub, slot);
+    if (!shift) { notes.push(`${label}: one template would leave the slot — kept as drawn`); continue; }
+    const moved = new Set(plans.flatMap((p) => [p.m, ...p.content.map((c) => c.e)]));
+    const hubAt = hub.map((h) => ({ x: h.x + shift.dx, y: h.y + shift.dy, w: h.w, h: h.h }));
+    const collides = plans.some((p, i) => plans.some((q, j) => j > i && overlaps(p.box, q.box)))
+      || plans.some((p) => hub.some((h, k) => !moved.has(h) && overlaps(p.box, hubAt[k])));
+    if (collides) { notes.push(`${label}: one template would overlap — kept as drawn`); continue; }
+    const deltas = new Map();
+    const movedCircles = new Set();
+    const move = (e, dx, dy) => {
+      translateElement(e, dx, dy);
+      if (figures.has(e.id)) translateFigure(spec.sketch, e.id, dx, dy, deltas, movedCircles);
+    };
+    for (const { m, box, content, lines: own } of plans) {
+      own.forEach((c, k) => {
+        if (!lineTemplate) return moveLine(c, box.x - m.x, box.y - m.y);
+        const [a, b] = lineTemplate[k].map((t) => ({ x: half(box.x + t.x), y: half(box.y + t.y) }));
+        if (c.fromPoint) c.fromPoint = { ...a };
+        if (c.toPoint) c.toPoint = { ...b };
+        if (c.points?.length === 2) c.points = [{ ...a }, { ...b }];
+        if (c.line?.ends?.length === 2) { c.line.ends[0].at = { ...a }; c.line.ends[1].at = { ...b }; }
+        if (c.line?.path?.points?.length === 2) c.line.path.points = [{ ...a }, { ...b }];
+      });
+      for (const { e, to } of content) {
+        move(e, to.x - e.x, to.y - e.y);
+        e.w = to.w;
+        e.h = to.h;
+      }
+      move(m, box.x - m.x, box.y - m.y);
+      m.w = box.w;
+      m.h = box.h;
+    }
+    if (shift.dx || shift.dy) for (const h of hub) move(h, shift.dx, shift.dy);
+    fixCopies(spec.sketch, deltas);
+    const declared = (spec.repeats ?? []).find((r) => r.id === g.id);
+    if (declared) declared.built = true;
+    notes.push(`${label}: one ${W}×${H}px template${kids ? " with one inner layout" : ""}, ${g.arrangement}${g.hub ? ` around ${g.hub.id}` : ""}`);
+  }
+  return notes;
+}

package/src/builders/resolve-skill.mjs

@@ -286,10 +286,11 @@ export function resolveSkill(skillName, planMeta = {}, opts = {}) {
   // and the per-layout chrome backgrounds (`assets/chrome-*`). They must be
   // resolved INDEPENDENTLY of the deck — `assetsDir` above prefers the deck's own
   // `assets/` (engine downloads), so if `brand.assetsDir` mirrored it, a deck that
-  // already has any local asset would collapse both layers to the deck dir and
-  // copyDesignSystem would never copy the bundle's brand assets (chrome included)
-  // into the preview. Keeping the brand layer on the bundle lets the deck's assets
-  // layer ON TOP and override by name, without suppressing the brand chrome.
+  // already has any local asset would collapse both layers to the deck dir and the
+  // preview would lose the bundle's brand assets (chrome included). Keeping the
+  // brand layer on the bundle lets the deck's assets layer ON TOP and override by
+  // name, without suppressing the brand chrome. build.mjs points the page at this
+  // directory directly; nothing is copied into the deck.
   const brandAssetsDir = firstExistingOr(
     designRoots.map((r) => path.join(r, "assets")),
     path.join(designRoots[0], "assets"),