slidemind 0.3.20 → 0.4.0

package/src/builders/fold-sets.mjs

@@ -0,0 +1,639 @@
+// A declared set, written as one component. The reader names the organisms a
+// concept repeats (`spec.repeats`, concept-repeats.ts) and repeat-groups.mjs
+// builds each from one template — one size, one inner layout. The transcriber
+// still writes every member out in full; this pass folds a BUILT set into
+//
+//   const Repeat1 = ({ x, y, id, textId, text }) => (<>
+//     <B id={id} x={x} y={y} w={248} h={112} fillVar="var(--bg-2)" shape="rounded" />
+//     <T id={textId} x={x + 72} y={y + 16} w={160} role="body">{text}</T>
+//   </>);
+//   <Repeat1 x={0} y={0} id="c1" textId="t1" text={<>Plan</>} />
+//
+// so the design agent changes the set's look once and a member's words at its
+// call site (workflow/authoring.md → Repeated organisms are components).
+//
+// Exact or not at all. A set folds only when
+//   - every member draws the same parts (same helpers, same order),
+//   - each part sits at one offset from its member's origin in every member,
+//     or at an offset its call site passes (a taller text lowers its stack;
+//     parts that move together share one prop),
+//   - a drawn figure is the first member's, moved to the member's place
+//     (or, drawn differently, its member's own at the call site),
+//   - instantiating the template gives back each member's own lines, and
+//   - no element painted between a member's first and last part overlaps one
+//     of its parts (an instance paints its parts together, so that element
+//     would change sides).
+// Anything else stays as drawn, with the set's comment. Lines stay outside the
+// component as static directives; ids stay the spec's, so settle, connectors,
+// assets and the preservation reader (src/lib/inline-components.mjs) keep
+// addressing every part.
+//
+// Pure. `SLIDEMIND_ABLATE=foldSets` turns it off for A/B runs.
+import { correspond, repeatGroups } from "./repeat-groups.mjs";
+
+const ablated = () => (process.env.SLIDEMIND_ABLATE ?? "").split(",").includes("foldSets");
+const INDENT = "        ";
+
+// ---------------------------------------------------------------------------
+// One emitted line: `<Tag a="v" b={…} flag>children</Tag>` or `<Tag … />`.
+// ---------------------------------------------------------------------------
+
+/** End (exclusive) of the braced value opening at `i`. */
+function braceEnd(s, i) {
+  let depth = 0;
+  for (let k = i; k < s.length; k++) {
+    const c = s[k];
+    if (c === '"' || c === "'" || c === "`") {
+      for (k++; k < s.length && s[k] !== c; k++) if (s[k] === "\\") k++;
+      continue;
+    }
+    if (c === "{") depth++;
+    else if (c === "}" && --depth === 0) return k + 1;
+  }
+  return -1;
+}
+
+/** A bare line directive (not a group of them, whose children sit in its frame). */
+const BARE_LINE = /^\s*<div (?:data-connector|data-sm-line)\b(?!-group)/;
+
+/**
+ * `{ tag, attrs: [{ name, raw }], children, selfClose }`, or null for anything
+ * else. A bare line directive is no part: its ends are static by contract
+ * (lint-connectors.ts), so it stays outside the component.
+ */
+export function tokenizeLine(line) {
+  const s = line.trim();
+  const head = /^<([A-Za-z][\w]*)(?=[\s/>])/.exec(s);
+  if (!head || BARE_LINE.test(s)) return null;
+  const tag = head[1];
+  const attrs = [];
+  let k = head[0].length;
+  for (;;) {
+    while (s[k] === " ") k++;
+    if (s.startsWith("/>", k)) {
+      return k + 2 === s.length ? { tag, attrs, children: null, selfClose: true } : null;
+    }
+    if (s[k] === ">") {
+      k++;
+      break;
+    }
+    const name = /^[A-Za-z_][\w-]*/.exec(s.slice(k))?.[0];
+    if (!name) return null;
+    k += name.length;
+    if (s[k] !== "=") {
+      attrs.push({ name, raw: null });
+      continue;
+    }
+    k++;
+    let end;
+    if (s[k] === '"') end = s.indexOf('"', k + 1) + 1;
+    else if (s[k] === "{") end = braceEnd(s, k);
+    else return null;
+    if (end <= k) return null;
+    attrs.push({ name, raw: s.slice(k, end) });
+    k = end;
+  }
+  const close = `</${tag}>`;
+  if (!s.endsWith(close)) return null;
+  return { tag, attrs, children: s.slice(k, s.length - close.length), selfClose: false };
+}
+
+function renderLine(tag, attrs, children, selfClose) {
+  const head = [tag, ...attrs.map(({ name, raw }) => (raw === null ? name : `${name}=${raw}`))].join(" ");
+  return selfClose ? `<${head} />` : `<${head}>${children}</${tag}>`;
+}
+
+/** `<X …></X>` and `<X … />` draw the same element. */
+const sameElement = (a, b) => a.replace(/><\/[A-Za-z]\w*>$/, " />") === b.replace(/><\/[A-Za-z]\w*>$/, " />");
+
+const numberOf = (raw) => (raw && /^\{-?\d+(?:\.\d+)?(?:e[+-]?\d+)?\}$/.test(raw) ? Number(raw.slice(1, -1)) : null);
+const offsetExpr = (axis, d) => (d === 0 ? axis : d > 0 ? `${axis} + ${d}` : `${axis} - ${-d}`);
+const camel = (s) => String(s).replace(/[^A-Za-z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : "")).replace(/^[A-Z]/, (c) => c.toLowerCase());
+const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+
+/**
+ * Every member's attribute names in one order that keeps each member's own:
+ * a name only some members carry (`nowrap` on one text) goes right after the
+ * name it follows there, so the template gives that member back as written.
+ */
+function attrOrder(lists) {
+  const out = [];
+  for (const attrs of lists) {
+    attrs.forEach((a, i) => {
+      if (!out.includes(a.name)) out.splice(i ? out.indexOf(attrs[i - 1].name) + 1 : 0, 0, a.name);
+    });
+  }
+  return out;
+}
+
+/** A difference without float noise (`75.7`, not `75.69999999999999`). */
+const tidy = (n) => Number(n.toFixed(4));
+
+// ---------------------------------------------------------------------------
+// A drawn figure's geometry: `<Figure circles={…} outline={…} mirror={…}
+// holes={…}>`, object literals as figure-sketch.mjs figureJsxAttrs writes them.
+// In a template every coordinate is written from the member's x/y
+// (`{x: x + 182.5,y: y + 35}`); the inliner computes it back to the literal.
+// ---------------------------------------------------------------------------
+
+const GEOMETRY = new Set(["circles", "outline", "mirror", "holes"]);
+const lit = (v) => JSON.stringify(v).replace(/"([A-Za-z_][A-Za-z0-9_]*)":/g, "$1: ");
+
+/** An attribute's object literal, or undefined when it is not one. */
+function literalOf(raw) {
+  if (!raw?.startsWith("{") || !raw.endsWith("}")) return undefined;
+  try {
+    return JSON.parse(raw.slice(1, -1).replace(/([{,[]\s*)([A-Za-z_][A-Za-z0-9_]*)\s*:/g, '$1"$2":'));
+  } catch {
+    return undefined;
+  }
+}
+
+/** Every leaf of a geometry attribute in order: `{ path, value, axis }` (axis null: a radius, an angle, a flag). */
+function geometryLeaves(attr, root) {
+  const out = [];
+  const axisOf = (path) => {
+    const last = path[path.length - 1];
+    if (attr === "outline" || attr === "holes") return last === "x" || last === "y" ? last : null;
+    if (attr === "circles") return last === 0 ? "x" : last === 1 ? "y" : null;
+    if (attr === "mirror" && path[0] === "through") return last === 0 ? "x" : last === 1 ? "y" : null;
+    if (attr === "mirror" && path[0] === "at") return root.axis === "vertical" ? "x" : root.axis === "horizontal" ? "y" : null;
+    return null;
+  };
+  const walk = (v, path) => {
+    if (v && typeof v === "object") for (const [key, child] of Object.entries(v)) walk(child, [...path, Array.isArray(v) ? Number(key) : key]);
+    else out.push({ path, value: v, axis: typeof v === "number" ? axisOf(path) : null });
+  };
+  walk(root, []);
+  return out;
+}
+
+/** A figure part's place: its outline's first point. */
+function figurePlace(t) {
+  const p = literalOf(t.attrs.find((a) => a.name === "outline")?.raw)?.[0];
+  return { x: Number.isFinite(p?.x) ? p.x : null, y: Number.isFinite(p?.y) ? p.y : null };
+}
+
+// ---------------------------------------------------------------------------
+// Geometry for the paint-order guard
+// ---------------------------------------------------------------------------
+
+function rectIndex(spec, measured) {
+  const out = new Map();
+  for (const e of spec.elements ?? []) out.set(e.id, { x: e.x, y: e.y, w: e.w, h: e.h });
+  for (const c of spec.connectors ?? []) {
+    const pts = (c.points ?? c.path?.points ?? []).map((p) => (Array.isArray(p) ? { x: p[0], y: p[1] } : p)).filter((p) => Number.isFinite(p?.x));
+    if (c.id && pts.length) {
+      const x = Math.min(...pts.map((p) => p.x));
+      const y = Math.min(...pts.map((p) => p.y));
+      out.set(c.id, { x, y, w: Math.max(...pts.map((p) => p.x)) - x, h: Math.max(...pts.map((p) => p.y)) - y });
+    }
+  }
+  for (const [id, m] of measured ?? []) if (Number.isFinite(m?.x)) out.set(id, { x: m.x, y: m.y, w: m.w, h: m.h });
+  return out;
+}
+
+const overlaps = (a, b, pad) =>
+  a.x - pad < b.x + b.w && b.x - pad < a.x + a.w && a.y - pad < b.y + b.h && b.y - pad < a.y + a.h;
+
+/** The point ends of a line directive's own attributes, as a box. */
+function directiveBox(line) {
+  const pts = [...line.matchAll(/data-(?:from|to)="(-?[\d.]+),(-?[\d.]+)"/g)].map((m) => ({ x: Number(m[1]), y: Number(m[2]) }));
+  if (pts.length < 2) return null;
+  const x = Math.min(...pts.map((p) => p.x));
+  const y = Math.min(...pts.map((p) => p.y));
+  return { x, y, w: Math.max(...pts.map((p) => p.x)) - x, h: Math.max(...pts.map((p) => p.y)) - y };
+}
+
+// ---------------------------------------------------------------------------
+// One set, from a plan: `{ id, comment, members: [{ lines, ids }], prefixes,
+// names? }` — per member the line of each template part and the id it owns
+// (part 0 first), per part the prefix its props are named by, and (a refold)
+// the prop names the set already had.
+// ---------------------------------------------------------------------------
+
+/** A part's box: measured, else the spec's, else its own literal x/y/w/h. */
+function boxOf(id, line, rects) {
+  const known = rects.get(id);
+  if (known) return known;
+  const t = tokenizeLine(line);
+  const n = (name) => numberOf(t?.attrs.find((a) => a.name === name)?.raw);
+  const [x, y, w, h] = ["x", "y", "w", "h"].map(n);
+  return [x, y, w, h].every((v) => v !== null) ? { x, y, w, h } : null;
+}
+
+/**
+ * The plan with its parts in paint order — the template paints them in one run,
+ * so it must paint them in the order the slide did — or a reason when members
+ * disagree about that order.
+ */
+function inPaintOrder(plan) {
+  const first = plan.members[0].lines;
+  const order = first.map((_, j) => j).sort((a, b) => first[a] - first[b]);
+  for (const m of plan.members) {
+    const lines = order.map((j) => m.lines[j]);
+    if (lines.some((v, i) => i > 0 && v < lines[i - 1])) return { why: "its members paint their parts in different orders" };
+  }
+  const moved = new Map(order.map((j, k) => [j, k]));
+  const names = plan.names && new Map([...plan.names].map(([key, v]) => [key.replace(/^\d+/, (j) => String(moved.get(Number(j)))), v]));
+  return {
+    ...plan,
+    names,
+    prefixes: order.map((j) => plan.prefixes[j]),
+    members: plan.members.map((m) => ({ ...m, lines: order.map((j) => m.lines[j]), ids: order.map((j) => m.ids[j]) })),
+  };
+}
+
+function foldPlan(lines, given, n, rects) {
+  if (!given.members.length || given.members.some((m) => m.lines.length !== given.members[0].lines.length)) return { why: "its members draw different parts" };
+  const plan = inPaintOrder(given);
+  if (plan.why) return plan;
+  const members = plan.members;
+  const count = members[0].lines.length;
+  if (!count) return { why: "its members draw different parts" };
+  const tokens = members.map((m) => m.lines.map((i) => tokenizeLine(lines[i])));
+  if (tokens.some((list) => list.some((t) => !t))) return { why: "a part is not a helper line" };
+  for (let j = 0; j < count; j++) {
+    if (new Set(tokens.map((list) => list[j].tag)).size > 1) return { why: "its members draw different parts" };
+  }
+  // Where each part is drawn: its x/y, a figure its outline's first point.
+  const places = tokens.map((list) =>
+    list.map((t) => {
+      if (t.tag === "Figure") return figurePlace(t);
+      const at = (name) => (t.attrs.some((a) => a.name === name) ? numberOf(t.attrs.find((a) => a.name === name).raw) ?? NaN : null);
+      return { x: at("x"), y: at("y") };
+    }),
+  );
+  // A member's origin is where its first part is drawn.
+  const origins = places.map((list) => list[0]);
+  if (origins.some((o) => !Number.isFinite(o.x) || !Number.isFinite(o.y))) return { why: "its first part has no literal place" };
+
+  const usedNames = new Set(["x", "y"]);
+  const unique = (name) => {
+    let out = name;
+    for (let k = 2; usedNames.has(out); k++) out = `${name}${k}`;
+    usedNames.add(out);
+    return out;
+  };
+  const named = (j, attr, fallback) => unique(plan.names?.get(`${j}:${attr}`) ?? fallback);
+  const props = []; // [{ name, part, attr | "children" | offset axis, values? }]
+
+  // Each part's place from its member's origin, per axis: one offset every
+  // member shares, or — where a member's content set it apart (a taller text
+  // lowers its stack) — an offset prop at the call site, one per group of
+  // parts that move together.
+  const offsets = places[0].map(() => ({})); // [j][axis] = { prop, values, c }
+  for (const axis of ["x", "y"]) {
+    const leaders = new Map(); // delta key -> leader part
+    for (let j = 0; j < count; j++) {
+      const v = places.map((list) => list[j][axis]);
+      if (v.every((n) => n === null)) continue;
+      if (v.some((n) => !Number.isFinite(n))) return { why: `a part has no literal ${axis}` };
+      const d = v.map((n, k) => n - origins[k][axis]);
+      const shared = [tidy(d[0]), d[0]].find((c) => v.every((n, k) => origins[k][axis] + c === n));
+      if (shared !== undefined) {
+        offsets[j][axis] = { prop: null, c: shared };
+        continue;
+      }
+      const key = d.map((n) => tidy(n - d[0])).join(",");
+      if (!leaders.has(key)) {
+        const values = d.map(tidy);
+        const prop = named(j, `@${axis}`, `${plan.prefixes[j] || "part"}${axis.toUpperCase()}`);
+        props.push({ name: prop, part: j, offset: axis, values });
+        leaders.set(key, { values, prop });
+      }
+      const { values, prop } = leaders.get(key);
+      const c = tidy(d[0] - values[0]);
+      if (v.some((n, k) => origins[k][axis] + values[k] + c !== n)) return { why: "its members' inner layouts differ" };
+      offsets[j][axis] = { prop, values, c };
+    }
+  }
+  /** The expression for a coordinate `c` past part j's place on `axis`, and its value for member k. */
+  const coord = (j, axis, c) => {
+    const o = offsets[j][axis];
+    if (!o.prop) return { text: offsetExpr(axis, c), at: (k) => origins[k][axis] + c };
+    const tail = c === 0 ? "" : c > 0 ? ` + ${c}` : ` - ${-c}`;
+    return { text: `${axis} + ${o.prop}${tail}`, at: (k) => (c === 0 ? origins[k][axis] + o.values[k] : origins[k][axis] + o.values[k] + c) };
+  };
+
+  /** A figure attribute as the first member's, moved to each member's place (template text); null when it is not that. */
+  const movedFigure = (j, name, values) => {
+    const roots = values.map((a) => literalOf(a?.raw));
+    if (roots.some((r, k) => r === undefined || values[k].raw !== `{${lit(r)}}`)) return null;
+    const leaves = roots.map((r) => geometryLeaves(name, r));
+    if (leaves.some((l) => l.length !== leaves[0].length)) return null;
+    const root = structuredClone(roots[0]);
+    for (const [i, leaf] of leaves[0].entries()) {
+      if (leaves.some((l) => JSON.stringify(l[i].path) !== JSON.stringify(leaf.path))) return null;
+      if (!leaf.axis) {
+        if (leaves.some((l) => l[i].value !== leaf.value)) return null;
+        continue;
+      }
+      const o = offsets[j][leaf.axis];
+      if (!o) return null;
+      const e = coord(j, leaf.axis, tidy(leaf.value - origins[0][leaf.axis] - (o.prop ? o.values[0] : 0)));
+      if (leaves.some((l, k) => e.at(k) !== l[i].value)) return null;
+      let at = root;
+      for (const step of leaf.path.slice(0, -1)) at = at[step];
+      at[leaf.path.at(-1)] = `⟦${e.text}⟧`;
+    }
+    return `{${lit(root).replace(/"⟦([^⟧]*)⟧"/g, "$1")}}`;
+  };
+
+  // Template: per part, per attribute — literal when every member agrees.
+  const template = [];
+  for (let j = 0; j < count; j++) {
+    const prefix = plan.prefixes[j];
+    const names = attrOrder(tokens.map((list) => list[j].attrs));
+    const attrs = [];
+    for (const name of names) {
+      const values = tokens.map((list) => list[j].attrs.find((a) => a.name === name));
+      if ((name === "x" || name === "y") && tokens[0][j].tag !== "Figure") {
+        attrs.push({ name, raw: `{${coord(j, name, offsets[j][name].c).text}}` });
+        continue;
+      }
+      // A figure every member repeats at its own place is the first one's,
+      // written from the member's x/y; one drawn differently is its member's.
+      const drawn = tokens[0][j].tag === "Figure" && GEOMETRY.has(name) ? movedFigure(j, name, values) : null;
+      if (drawn) {
+        attrs.push({ name, raw: drawn });
+        continue;
+      }
+      const same = name !== "id" && values.every((a) => a && a.raw === values[0].raw);
+      if (same) {
+        attrs.push({ name, raw: values[0].raw });
+        continue;
+      }
+      const prop = named(j, name, name === "id" ? (prefix ? `${prefix}Id` : "id") : prefix ? `${prefix}${cap(camel(name))}` : camel(name));
+      props.push({ name: prop, part: j, attr: name });
+      attrs.push({ name, raw: `{${prop}}` });
+    }
+    const contents = tokens.map((list) => list[j].children ?? "");
+    let children = contents[0];
+    // A seated helper (`<I …/>` on its disc) is templated too, so its size
+    // and look are the set's; otherwise differing words ride in a slot. A
+    // chart rides whole in its member's slot: its data and styles are its own
+    // and stay literals at the call site (lint: `<Chart>` props must be
+    // literals — x113 QBR 1's eight KPI cards lifted `data`/`labels`/
+    // `seriesStyle` into props and every draft was refused).
+    const inner = contents.map((c) => (c.startsWith("<") ? tokenizeLine(c) : null));
+    if (contents.some((c) => c !== contents[0]) && inner.every((t) => t?.selfClose && t.tag === inner[0].tag && t.tag !== "Chart")) {
+      const idRaw = inner[0].attrs.find((a) => a.name === "id")?.raw;
+      const innerPrefix = plan.prefixFor?.(/^"(.*)"$/.exec(idRaw ?? "")?.[1]) ?? `${prefix || "inner"}Inner`;
+      const innerNames = attrOrder(inner.map((t) => t.attrs));
+      const innerAttrs = [];
+      for (const name of innerNames) {
+        const values = inner.map((t) => t.attrs.find((a) => a.name === name));
+        if (name !== "id" && values.every((a) => a && a.raw === values[0].raw)) {
+          innerAttrs.push({ name, raw: values[0].raw });
+          continue;
+        }
+        const prop = named(j, `>${name}`, name === "id" ? `${innerPrefix}Id` : `${innerPrefix}${cap(camel(name))}`);
+        props.push({ name: prop, part: j, attr: name, inner: true });
+        innerAttrs.push({ name, raw: `{${prop}}` });
+      }
+      children = renderLine(inner[0].tag, innerAttrs, null, true);
+    } else if (contents.some((c) => c !== contents[0])) {
+      const text = tokens[0][j].tag === "T" || tokens[0][j].tag === "L";
+      const prop = named(j, "children", prefix ? `${prefix}${text ? "Text" : "Content"}` : text ? "text" : "content");
+      props.push({ name: prop, part: j, attr: "children" });
+      children = `{${prop}}`;
+    }
+    const selfClose = tokens.every((list) => list[j].selfClose) && !children;
+    template.push(renderLine(tokens[0][j].tag, attrs, children, selfClose));
+  }
+
+  // An offset prop only a drawing used that became its member's own is unused.
+  for (let i = props.length - 1; i >= 0; i--) {
+    if (props[i].offset && !template.some((t) => new RegExp(`\\b${props[i].name}\\b`).test(t))) props.splice(i, 1);
+  }
+
+  // Self-check: the template, filled with each member's own values, gives
+  // back that member's lines.
+  for (const [k, list] of tokens.entries()) {
+    for (let j = 0; j < count; j++) {
+      const own = list[j];
+      const attrs = [];
+      for (const a of tokenizeLine(template[j]).attrs) {
+        if ((a.name === "x" || a.name === "y") && own.tag !== "Figure") {
+          attrs.push({ name: a.name, raw: `{${coord(j, a.name, offsets[j][a.name].c).at(k)}}` });
+          continue;
+        }
+        // A figure's geometry was checked point by point against every member.
+        if (own.tag === "Figure" && GEOMETRY.has(a.name)) {
+          const value = own.attrs.find((o) => o.name === a.name);
+          if (value) attrs.push(value);
+          continue;
+        }
+        if (!props.some((p) => p.part === j && !p.inner && p.attr === a.name)) attrs.push(a);
+        else {
+          const value = own.attrs.find((o) => o.name === a.name);
+          if (value) attrs.push(value);
+        }
+      }
+      let children = own.children ?? "";
+      if (props.some((p) => p.part === j && p.inner)) {
+        const ownInner = tokenizeLine(children);
+        const innerAttrs = [];
+        for (const a of tokenizeLine(tokenizeLine(template[j]).children).attrs) {
+          if (!props.some((p) => p.part === j && p.inner && p.attr === a.name)) innerAttrs.push(a);
+          else {
+            const value = ownInner?.attrs.find((o) => o.name === a.name);
+            if (value) innerAttrs.push(value);
+          }
+        }
+        children = renderLine(ownInner?.tag ?? "", innerAttrs, null, true);
+      }
+      const rebuilt = renderLine(own.tag, attrs, children, own.selfClose);
+      if (!sameElement(rebuilt, lines[members[k].lines[j]].trim())) return { why: "the template does not give back a member" };
+    }
+  }
+
+  // Paint order: an instance paints its parts together, where its first one
+  // was. A part painted AFTER some element now paints before it, so the two
+  // must not overlap; parts painted before it keep their side.
+  for (const m of members) {
+    const lo = Math.min(...m.lines);
+    const hi = Math.max(...m.lines);
+    const own = new Set(m.lines);
+    for (let i = lo + 1; i < hi; i++) {
+      // Another member's part counts too: it moves to its own call site.
+      if (own.has(i) || !/^\s*</.test(lines[i])) continue;
+      const later = m.lines.flatMap((at, j) => (at > i ? [boxOf(m.ids[j], lines[at], rects)] : []));
+      const ids = [...lines[i].matchAll(/\bid="([^"]+)"/g)].map((x) => x[1]);
+      // A free line's ends are literals on its own line: the source's truth,
+      // even after a move no render has measured yet.
+      const box = (BARE_LINE.test(lines[i]) ? directiveBox(lines[i]) : null) ?? ids.map((id) => boxOf(id, lines[i], rects)).find(Boolean);
+      if (!box || later.some((b) => !b)) return { why: "an element painted between its parts has no known place" };
+      const pad = /\bshadow\b/.test(lines[i]) || m.lines.some((x) => x > i && /\bshadow\b/.test(lines[x])) ? 16 : 2;
+      if (later.some((b) => overlaps(b, box, pad))) return { why: "an element painted between its parts overlaps it" };
+    }
+  }
+
+  // The call sites, in the order members are declared.
+  const name = `Repeat${n}`;
+  const calls = tokens.map((list, k) => {
+    const attrs = [`x={${origins[k].x}}`, `y={${origins[k].y}}`];
+    for (const p of props) {
+      if (p.offset) {
+        attrs.push(`${p.name}={${p.values[k]}}`);
+        continue;
+      }
+      const own = p.inner ? tokenizeLine(list[p.part].children) : list[p.part];
+      if (p.attr === "children" && !p.inner) {
+        // Plain words travel as a string; markup, entities and quotes as a fragment.
+        if (own.children) attrs.push(/[<>{}&"\n]/.test(own.children) ? `${p.name}={<>${own.children}</>}` : `${p.name}="${own.children}"`);
+        continue;
+      }
+      const value = own.attrs.find((a) => a.name === p.attr);
+      if (!value) continue;
+      attrs.push(value.raw === null ? p.name : `${p.name}=${value.raw}`);
+    }
+    return `${INDENT}<${name} ${attrs.join(" ")} />`;
+  });
+  const params = ["x", "y", ...props.map((p) => p.name)].join(", ");
+  const declaration = [plan.comment, `  const ${name} = ({ ${params} }) => (<>`, ...template.map((t) => `    ${t}`), "  </>);"];
+  return { members, calls, declaration };
+}
+
+/** Index every element line by the ids it carries. */
+function linesById(lines) {
+  const lineOf = new Map();
+  lines.forEach((line, i) => {
+    if (!line.startsWith(`${INDENT}<`)) return;
+    for (const m of line.matchAll(/\bid="([^"]+)"/g)) if (!lineOf.has(m[1])) lineOf.set(m[1], i);
+  });
+  return lineOf;
+}
+
+/** Fold the plans that hold; everything else stays as written. */
+function applyPlans(src, plans, rects, dropComment) {
+  const lines = String(src).split("\n");
+  const kept = [];
+  const folds = [];
+  // A line belongs to ONE component. A set drawn inside another set's members
+  // (the rows of each card, when the cards themselves fold) would claim lines
+  // the outer fold already collapsed into its call sites — and lose them (x101
+  // PM 2: twelve row texts gone). It stays flat, with its comment.
+  const claimed = new Set();
+  for (const plan of plans) {
+    if (plan.why) {
+      kept.push({ id: plan.id, why: plan.why });
+      continue;
+    }
+    if (plan.members.some((m) => m.lines.some((i) => claimed.has(i)))) {
+      kept.push({ id: plan.id, why: "its parts are drawn inside another set's component" });
+      continue;
+    }
+    const result = foldPlan(lines, plan, folds.length + 1, rects);
+    if (result.why) kept.push({ id: plan.id, why: result.why });
+    else {
+      folds.push({ plan, ...result });
+      for (const m of result.members) for (const i of m.lines) claimed.add(i);
+    }
+  }
+  if (!folds.length) return { src, folded: [], kept };
+  // Each member's parts collapse into its call site, at its first part.
+  const replaced = new Map();
+  const dropped = new Set();
+  for (const fold of folds) {
+    fold.members.forEach((m, k) => {
+      const first = Math.min(...m.lines);
+      replaced.set(first, fold.calls[k]);
+      for (const i of m.lines) if (i !== first) dropped.add(i);
+    });
+  }
+  const body = [];
+  lines.forEach((line, i) => {
+    if (dropped.has(i) || dropComment(line, folds)) return;
+    body.push(replaced.get(i) ?? line);
+  });
+  const at = body.findIndex((line) => line === "  return (");
+  if (at < 0) return { src, folded: [], kept: [...kept, ...folds.map((f) => ({ id: f.plan.id, why: "the slide has no return to declare it before" }))] };
+  body.splice(at, 0, ...folds.flatMap((f) => f.declaration));
+  return { src: body.join("\n"), folded: folds.map((f) => f.plan.id), kept };
+}
+
+/**
+ * Fold every built set of a transcribed slide into a local component.
+ * @returns {{ src: string, folded: string[], kept: Array<{ id: string, why: string }> }}
+ */
+export function foldSets(src, spec, measured = null) {
+  const groups = repeatGroups(spec ?? {}).filter((g) => g.built);
+  if (ablated() || !groups.length) return { src, folded: [], kept: [] };
+  const lineOf = linesById(String(src).split("\n"));
+  const elements = spec.elements ?? [];
+  const plans = groups.map((group) => {
+    const kids = correspond(elements, group.members);
+    const members = group.members.map((m, i) => {
+      const lines = [];
+      const owners = [];
+      for (const e of [...(m.virtual ? [] : [m]), ...(kids?.[i] ?? [])]) {
+        const at = lineOf.get(e.id);
+        if (at === undefined || lines.includes(at)) continue;
+        lines.push(at);
+        owners.push(e);
+      }
+      return { lines, ids: owners.map((e) => e.id), owners };
+    });
+    const prefixes = members[0].owners.map((e, j) => (j === 0 && !group.members[0].virtual ? "" : camel(e.role ?? e.kind ?? `part${j}`)));
+    const prefixFor = (id) => {
+      const e = elements.find((x) => x.id === id);
+      return e ? camel(e.role ?? e.kind ?? "inner") : null;
+    };
+    const comment = `  // ${group.id}: ${group.members.map((m) => m.id).join(", ")} are one organism (${group.arrangement}${group.hub ? ` around ${group.hub.id}` : ""}) — its look is drawn once here; each member is a call site below.`;
+    return { id: group.id, comment, members, prefixes, prefixFor };
+  });
+  const ids = groups.map((g) => g.id);
+  const setComment = new RegExp(`^\\s*\\{/\\* (${ids.map((id) => id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")}):`);
+  return applyPlans(src, plans, rectIndex(spec, measured), (line, folds) =>
+    setComment.test(line) && folds.some((f) => line.includes(`{/* ${f.plan.id}:`)),
+  );
+}
+
+/**
+ * Fold a flat source the way `folded` was folded: its `Repeat<n>` components
+ * name the sets, their call sites the members and part ids, their templates
+ * the prop names. For a source that was inlined to be rewritten line by line
+ * (the bounded repair) and must go back to its components where that is still
+ * exact. `flat` is assumed to carry no declarations of its own.
+ */
+export function refoldLike(folded, flat, measured = null) {
+  if (ablated()) return { src: flat, folded: [], kept: [] };
+  const srcLines = String(folded).split("\n");
+  const lineOf = linesById(String(flat).split("\n"));
+  const plans = [];
+  for (let i = 0; i < srcLines.length; i++) {
+    const head = /^ {2}const (Repeat\d+) = \(\{ [^}]* \}\) => \(<>$/.exec(srcLines[i]);
+    if (!head) continue;
+    const comment = /^ {2}\/\/ /.test(srcLines[i - 1] ?? "") ? srcLines[i - 1] : `  // ${head[1]}`;
+    const template = [];
+    const raws = [];
+    for (i++; i < srcLines.length && srcLines[i] !== "  </>);"; i++) {
+      template.push(tokenizeLine(srcLines[i]));
+      raws.push(srcLines[i]);
+    }
+    if (template.some((t) => !t)) continue;
+    const prop = (raw) => /^\{([A-Za-z_$][\w$]*)\}$/.exec(raw ?? "")?.[1] ?? null;
+    const idProps = template.map((t) => prop(t.attrs.find((a) => a.name === "id")?.raw));
+    const names = new Map();
+    template.forEach((t, j) => {
+      for (const a of t.attrs) if (prop(a.raw) && a.name !== "x" && a.name !== "y") names.set(`${j}:${a.name}`, prop(a.raw));
+      if (prop(t.children)) names.set(`${j}:children`, prop(t.children));
+      // An offset prop (`y={y + titleY}`, a figure's `{x: x + figX + 4}`).
+      for (const m of raws[j].matchAll(/\b([xy]) \+ ([A-Za-z_$][\w$]*)/g)) if (!names.has(`${j}:@${m[1]}`)) names.set(`${j}:@${m[1]}`, m[2]);
+      const seated = t.children?.startsWith("<") ? tokenizeLine(t.children) : null;
+      for (const a of seated?.attrs ?? []) if (prop(a.raw)) names.set(`${j}:>${a.name}`, prop(a.raw));
+    });
+    const prefixes = idProps.map((p) => (p && p !== "id" ? p.replace(/Id$/, "") : ""));
+    const calls = srcLines.map(tokenizeLine).filter((t) => t?.tag === head[1]);
+    const members = calls.map((call) => {
+      const ids = idProps.map((p) => /^"([^"]+)"$/.exec(call.attrs.find((a) => a.name === p)?.raw ?? "")?.[1] ?? null);
+      return { ids, lines: ids.map((id) => (id === null ? undefined : lineOf.get(id))) };
+    });
+    const missing = idProps.includes(null) || members.some((m) => m.lines.includes(undefined));
+    plans.push({ id: head[1], comment, names, prefixes, members, ...(missing ? { why: "a part is gone from the source" } : {}) });
+  }
+  if (!plans.length) return { src: flat, folded: [], kept: [] };
+  return applyPlans(flat, plans, rectIndex({}, measured), () => false);
+}

package/src/builders/gate-server.mjs

@@ -17,6 +17,7 @@ import { fileURLToPath } from "node:url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const GATE_SESSION_PATH = path.join(__dirname, "gate-session.js");
+const GATE_SHELL_PATH = path.join(__dirname, "gate-shell.js");
 
 // Tab-reuse timing contract, shared by both gates and injected into their
 // overlays as CFG.pollMs / CFG.pollTtlMs:
@@ -204,14 +205,18 @@ export function stripModuleSyntax(src) {
     .replace(/^export\s+/gm, "");
 }
 
-// gate-session.js as a browser IIFE exposing window.__SLIDEMIND_GATE__. Both
-// gate pages inline this BEFORE their overlay script — the overlays' whole
-// ledger/round machinery is that one shared factory.
+// gate-session.js + gate-shell.js as one browser script exposing
+// window.__SLIDEMIND_GATE__ (the ledger/round machinery) and
+// window.__SLIDEMIND_SHELL__ (the shared chrome). Both gate pages inline this
+// BEFORE their overlay script — the overlays read both at boot.
 export function bundleGateSession() {
   return (
     "(function () {\n" +
     stripModuleSyntax(fs.readFileSync(GATE_SESSION_PATH, "utf8")) +
-    "\nwindow.__SLIDEMIND_GATE__ = { createGateSession: createGateSession };\n})();\n"
+    "\nwindow.__SLIDEMIND_GATE__ = { createGateSession: createGateSession };\n})();\n" +
+    "(function () {\n" +
+    stripModuleSyntax(fs.readFileSync(GATE_SHELL_PATH, "utf8")) +
+    "\nwindow.__SLIDEMIND_SHELL__ = { createGateShell: createGateShell, ICONS: ICONS, el: el };\n})();\n"
   );
 }