umlimator 0.10.0 → 0.12.0

package/lib/umlimator.js

@@ -102,9 +102,9 @@ const STYLES = `
   svg .node.priv:hover .n-label { fill: var(--um-text); }
   svg .node:focus-visible .n-mask { stroke: var(--um-cyan); stroke-width: 3; }
   svg .edge-g.hov .edge, svg .edge-g.hot .edge { stroke-width: calc(2.6px * var(--um-ew, 1)); }
-  .focusing svg .node:not(.sel):not(.nb) { opacity: .28; }
-  .focusing svg .edge-g:not(.hot) { opacity: .15; }
-  .focusing svg .e-lab:not(.hot) { opacity: .15; }
+  .focusing:not(.um-lit) svg .node:not(.sel):not(.nb) { opacity: .28; }
+  .focusing:not(.um-lit) svg .edge-g:not(.hot) { opacity: .15; }
+  .focusing:not(.um-lit) svg .e-lab:not(.hot) { opacity: .15; }
   svg .node, svg .edge-g, svg .e-lab { transition: opacity .2s; }
   svg .node.sel .n-body { stroke-width: 3.2; }
   svg .node.sel .n-mask { stroke: var(--um-accent); stroke-width: 2; }
@@ -175,7 +175,10 @@ const STYLES = `
   svg .family-box { fill: var(--um-panel); fill-opacity: .45; stroke-width: 1.5; }
   svg .family-title { font: 650 11px var(--um-mono); }
   svg .family.sel .family-box { stroke: var(--um-accent); stroke-width: 2; }
+  svg .fold-hint { cursor: pointer; } svg .fold-hint:hover rect { stroke-width: 2; }
   svg .edited-dot { fill: var(--um-edited); stroke: var(--um-mask); stroke-width: 1.5; }
+  svg .rule-mark circle { fill: var(--um-rose); stroke: var(--um-mask); stroke-width: 1.5; } svg .rule-mark text { fill: var(--um-mask); font: 800 10px var(--um-sans); pointer-events: none; }
+  svg .edge-g.faded .flowline { display: none; }
   .um-rename { position: absolute; z-index: 5; box-sizing: border-box; font-family: var(--um-sans); font-weight: 600; color: var(--um-text); background: var(--um-panel); border: 1.5px solid var(--um-accent); border-radius: 6px; padding: 0 6px; outline: none; box-shadow: var(--um-shadow); }
   svg .um-ghost { opacity: .6; pointer-events: none; } svg .um-ghost.um-pending { opacity: .3; }
   svg .family.um-target .family-box { stroke: var(--um-accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
@@ -184,7 +187,22 @@ const STYLES = `
   .um-still *, .um-still *::before, .um-still *::after { transition: none !important; animation: none !important; }
   svg .um-link { fill: none; stroke: var(--um-accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
   @media (max-width: 820px) { .minimap { display: none; } .mctl { bottom: 14px; right: 12px; } }
-` + /* each tone's tint (--um-<tone>-f), mixed at the map from the tone and panel in effect there: mixed on :root (as the theme
+  /* marks (#63): a ring around a card, a glow under a line, tabs and labels over the map; a layer that dims (um-lit)
+     sets how lit each thing is, in place of the selection's dimming */
+  svg .um-ring { fill: none; stroke-width: 2.5; opacity: .9; } svg .um-glow { fill: none; stroke-width: calc(8px + 1.8px * (var(--um-ew, 1) - 1)); stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
+  svg .um-pulse { animation: um-pulse 1.1s ease-in-out infinite; } @keyframes um-pulse { 50% { opacity: .08; } }
+  svg .um-marks .tab-tx { font: 800 8px var(--um-mono); letter-spacing: .14em; fill: var(--um-mask); text-transform: uppercase; }
+  svg .um-lab rect { fill: var(--um-panel); stroke: var(--um-border-2); } svg .um-lab text { fill: var(--um-text); font: 600 10px var(--um-sans); }
+  svg .um-trip { pointer-events: none; }
+  @media (prefers-reduced-motion: reduce) { svg .um-pulse { animation: none; } }
+  /* a story's caption bar (#69), bottom left, clear of the controls */
+  .um-story { position: absolute; left: 16px; bottom: 40px; z-index: 5; box-sizing: border-box; max-width: min(560px, calc(100% - 290px)); display: flex; align-items: flex-end; gap: 10px; padding: 9px 8px 9px 14px; border-radius: 12px; background: var(--um-panel); border: 1px solid var(--um-border-2); box-shadow: var(--um-shadow); color: var(--um-text); font: 13px/1.45 var(--um-sans); }
+  .um-story .um-st { display: block; font: 600 11px var(--um-mono); color: var(--um-muted); margin-bottom: 2px; }
+  .um-story p { margin: 0; } .um-story .um-sb { display: flex; gap: 2px; flex: none; }
+  .um-story button { min-width: 30px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--um-text); font: 600 13px var(--um-mono); cursor: pointer; padding: 0 7px; }
+  .um-story button:hover:not(:disabled) { background: var(--um-panel-2); color: var(--um-accent); } .um-story button:disabled { opacity: .35; cursor: default; }
+  @media (max-width: 820px) { .um-story { left: 12px; right: 12px; bottom: 60px; max-width: none; } }
+` +/* each tone's tint (--um-<tone>-f), mixed at the map from the tone and panel in effect there: mixed on :root (as the theme
      file does, for page chrome) a tint keeps the tone it was mixed from, whatever an ancestor of the map sets later */
   `:host { ${Object.entries({ accent: 12, cyan: 9, green: 9, violet: 9, amber: 10, rose: 8, orange: 9, slate: 8, fuchsia: 8, 'k-public': 8, 'k-lane': 8,
     'k-ext': 7, 'k-verb': 7, 'k-script': 5, 'k-hook': 12, 'k-board': 9 }).map(([t, p]) => `--um-${t}-f: color-mix(in srgb, var(--um-${t}) ${p}%, var(--um-panel));`).join(' ')} }`;
@@ -279,32 +297,76 @@ function roundPath(pts, r = 9) {
   const last = pts[pts.length - 1]; return d + ` L ${last[0]} ${last[1]}`;
 }
 const hit = (a, b, pad = 0) => a.x < b.x + b.w + pad && b.x < a.x + a.w + pad && a.y < b.y + b.h + pad && b.y < a.y + a.h + pad;
-const warned = new Set(), warn = m => { if (!warned.has(m)) { warned.add(m); console.warn('umlimator: ' + m); } }; // each warning once
+const warned = new Set(), warn = m => { if (hush) hush.push(m); else if (!warned.has(m)) { warned.add(m); console.warn('umlimator: ' + m); } }; // each warning once
+let hush = null; // a layout tried and maybe dropped (unfolding, #71) keeps its warnings here: only the one kept says them
 
 /* Layered auto-layout for views that carry no col/row: longest-path layers (cycles broken by DFS),
    barycentre ordering sweeps, integer rows so row gaps stay free as routing channels. */
-/* Lines between neighbouring columns cross as little as the order of the cards in a column allows (#53): a few barycentre
-   sweeps (each card goes where its neighbours in the next or previous column lie, its place now breaking ties), and the
-   best order found is kept only when it crosses less than the order given. cols: columns of ids in reading order, changed
-   in place; links: [a, b] with b in a later column (lines that skip a column do not order). */
+/* Lines cross as little as the order of the cards in a column allows (#53): a few barycentre sweeps (each card goes where
+   its neighbours in the next or previous column lie, its place now breaking ties), and the best order found is kept only
+   when it crosses less than the order given. A line that skips columns has a point in each column it passes (Sugiyama's
+   dummy nodes), so it orders the cards it runs between too. cols: columns of ids in reading order, changed in place;
+   links: [a, b] with b in a later column. */
 function untangle(cols, links) {
   const colOf = {}; cols.forEach((c, k) => c.forEach(id => { colOf[id] = k; }));
-  const adj = links.filter(([a, b]) => colOf[a] != null && colOf[b] === colOf[a] + 1);
+  const segs = [], extra = new Set(), want = {};
+  links.forEach(([a, b], n) => {
+    const ka = colOf[a], kb = colOf[b]; if (ka == null || kb == null || kb <= ka) return;
+    let prev = a; const ra = cols[ka].indexOf(a), rb = cols[kb].indexOf(b);
+    for (let k = ka + 1; k < kb; k++) { // a point first goes where the straight line between its ends would be
+      const p = '\u0001' + n + '.' + k; extra.add(p); colOf[p] = k; want[p] = ra + (rb - ra) * (k - ka) / (kb - ka);
+      segs.push([prev, p]); prev = p; }
+    segs.push([prev, b]);
+  });
+  if (extra.size) cols.forEach((c, k) => { const ps = [...extra].filter(p => colOf[p] === k);
+    if (ps.length) cols[k] = [...c.map((id, i) => [id, i, 0]), ...ps.map(p => [p, want[p], 1])].sort((x, y) => x[1] - y[1] || x[2] - y[2]).map(x => x[0]); });
+  const ins = {}, outs = {}; segs.forEach(([a, b]) => { (outs[a] ||= []).push(b); (ins[b] ||= []).push(a); });
   const crossings = () => { const at = {}; let n = 0; cols.forEach(c => c.forEach((id, i) => { at[id] = i; }));
-    for (let i = 0; i < adj.length; i++) for (let j = i + 1; j < adj.length; j++) { const [a, b] = adj[i], [c, d] = adj[j];
+    for (let i = 0; i < segs.length; i++) for (let j = i + 1; j < segs.length; j++) { const [a, b] = segs[i], [c, d] = segs[j];
       if (colOf[a] === colOf[c] && (at[a] - at[c]) * (at[b] - at[d]) < 0) n++; }
     return n; };
-  let best = adj.length > 1 ? crossings() : 0, keep = cols.map(c => c.slice()); // the order given, unless one crosses less
+  let best = segs.length > 1 ? crossings() : 0, keep = cols.map(c => c.slice()); // the order given, unless one crosses less
   for (let it = 0; it < 8 && best; it++) {
     const down = it % 2 === 0, seq = cols.map((_, k) => k).filter(k => down ? k > 0 : k < cols.length - 1);
     if (!down) seq.reverse();
     for (const k of seq) { const at = Object.fromEntries(cols[down ? k - 1 : k + 1].map((id, i) => [id, i]));
-      const key = (id, i) => { const nb = adj.filter(([a, b]) => down ? b === id && at[a] != null : a === id && at[b] != null).map(([a, b]) => at[down ? a : b]);
+      const key = (id, i) => { const nb = ((down ? ins : outs)[id] || []).filter(x => at[x] != null).map(x => at[x]);
         return nb.length ? nb.reduce((x, y) => x + y, 0) / nb.length : i; };
       cols[k] = cols[k].map((id, i) => [id, key(id, i), i]).sort((p, q) => p[1] - q[1] || p[2] - q[2]).map(x => x[0]); }
     const n = crossings(); if (n < best) { best = n; keep = cols.map(c => c.slice()); }
   }
-  keep.forEach((c, k) => { cols[k] = c; });
+  keep.forEach((c, k) => { cols[k] = c.filter(id => !extra.has(id)); });
+}
+/* A card no line comes into goes just before its nearest callee, not in the first column: its lines get shorter. Returns
+   the ranks with it moved, or null when none moves (bestFlow keeps them when they route better). */
+function pullSources(ids, links, rank) {
+  const into = new Set(links.map(([, b]) => b)); let moved = false; const out = { ...rank };
+  ids.forEach(i => { const to = links.filter(([a]) => a === i).map(([, b]) => rank[b]).filter(r => r != null);
+    if (to.length && !into.has(i) && Math.min(...to) - 1 > rank[i]) { out[i] = Math.min(...to) - 1; moved = true; } });
+  return moved ? out : null;
+}
+/* Rows for ordered columns: each card level with the cards its lines come from (the median row), then with those they go
+   to, then again from the left, as near as the order allows with its height between it and the next (least squares: pool
+   adjacent violators); on half rows from 0. A line between cards on one row runs straight, past fewer cards. h: an item's
+   height in rows (a box in a view with boxes); a link [a, b, oa, ob] leaves a at row oa inside it and reaches b at row
+   ob (a box's card), else at its middle. */
+function rowsFor(cols, links, h = () => 1) {
+  const row = {}, colOf = {}; cols.forEach((c, k) => { let r = 0; c.forEach(id => { row[id] = r; r += h(id); colOf[id] = k; }); });
+  const ins = {}, outs = {}, at = (id, o) => o ?? (h(id) - 1) / 2; // where a link meets an item, in rows from its top
+  links.forEach(([a, b, oa, ob]) => { if (colOf[a] == null || colOf[b] == null || colOf[b] <= colOf[a]) return;
+    (outs[a] ||= []).push([b, at(b, ob), at(a, oa)]); (ins[b] ||= []).push([a, at(a, oa), at(b, ob)]); });
+  const median = xs => { const s = xs.slice().sort((a, b) => a - b), m = s.length >> 1; return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2; };
+  const fit = (list, want) => { const blocks = []; let off = 0;
+    list.forEach(id => { blocks.push({ ids: [id], sum: want[id] - off, n: 1 }); off += h(id);
+      while (blocks.length > 1 && blocks.at(-2).sum / blocks.at(-2).n > blocks.at(-1).sum / blocks.at(-1).n) { const b = blocks.pop(), a = blocks.at(-1); a.ids.push(...b.ids); a.sum += b.sum; a.n += b.n; } });
+    off = 0; blocks.forEach(b => b.ids.forEach(id => { row[id] = b.sum / b.n + off; off += h(id); })); };
+  for (const [from, to, step] of [[1, cols.length, 1], [cols.length - 2, -1, -1], [1, cols.length, 1]])
+    for (let k = from; k !== to; k += step) { const want = {};
+      cols[k].forEach(id => { const nb = (step > 0 ? ins : outs)[id] || []; want[id] = nb.length ? median(nb.map(([x, ox, o]) => row[x] + ox - o)) : row[id]; });
+      fit(cols[k], want); }
+  const low = Math.min(...Object.values(row));
+  cols.forEach(c => c.forEach((id, i) => { row[id] = Math.round((row[id] - low) * 2) / 2; if (i) row[id] = Math.max(row[id], row[c[i - 1]] + h(c[i - 1])); }));
+  return row;
 }
 
 /* A view about one node: the node sits in the middle, callers to its left, callees to its right,
@@ -494,7 +556,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     };
     const out = familyDefs.map(f => frameOf(f)).filter(Boolean);
     if (map) out.forEach(f => { // the box fits its title and its badges, which are tabs on its top border, at the right
-      const tabs = badgesOf(f).map((b, i) => ({ text: b.text, fill: toneOf(b), badge: i, w: b.text.length * 6.4 + 10 })), all = tabs.reduce((a, t) => a + t.w + 4, -4);
+      const tabs = [...badgesOf(f).map((b, i) => ({ text: b.text, fill: toneOf(b), badge: i, w: b.text.length * 6.4 + 10 })), ...(f.unfolds ? [{ text: '⤡', fold: true, w: 28 }] : [])], all = tabs.reduce((a, t) => a + t.w + 4, -4); // an unfolded card's box: its ⤡ folds it (#71)
       f.w = Math.max(f.w, String(f.label || f.id).length * 6.7 + 32 + (tabs.length ? all + 8 : 0));
       let tx = f.x + f.w - 12 - all; f.tabs = tabs.map(t => { const o = { ...t, x: tx }; tx += t.w + 4; return o; }); });
     return out;
@@ -945,6 +1007,7 @@ function svgOf(geo, opts = {}) {
   const id = 'g' + (svgSeq++), { nodes, edges, groups, bounds: B, map } = geo;
   const col = k => `var(--um-${KIND[k][0]})`, fill = k => `var(--um-${KIND[k][0]}-f)`;
   const estyle = e => {
+    if (e.style === 'faded') return { ...(map && e.wk ? { c: `var(--um-w-${e.wk})`, m: e.wk, cls: ' w-' + e.wk + ' faded' } : { c: 'var(--um-arrow)', m: 'd', cls: ' faded' }), dash: '', op: .35 }; // its own colour, faint, no flow (drift's idle lines)
     if (map && e.wk && !e.style) return { c: `var(--um-w-${e.wk})`, m: e.wk, dash: e.back ? '6 5' : '', cls: ' w-' + e.wk + (e.back ? ' back' : '') };
     const st = e.style || (e.change === 'added' ? 'added' : e.change === 'removed' ? 'removed' : '');
     if (st === 'added' || st === 'emphasis') return { c: 'var(--um-green)', m: 'g', dash: '', flow: st === 'added' || e.animate };
@@ -953,15 +1016,21 @@ function svgOf(geo, opts = {}) {
     if (st === 'dashed' || st === 'async') return { c: 'var(--um-violet)', m: 'v', dash: '4 4' };
     return { c: 'var(--um-arrow)', m: 'd', dash: '' };
   };
+  // a line that breaks a rule (#70): rose, with a "!" just after its start that names the rule (opts.broken: rule titles by edge id)
+  const broke = e => opts.broken ? [...new Set((e.all || [e]).flatMap(x => opts.broken[x._id] || []))] : [];
+  const lstyle = e => broke(e).length ? { ...estyle(e), c: 'var(--um-rose)', m: 'r' } : estyle(e);
+  const ruleMark = (e, why) => { const [a, b] = e.pts, L = Math.abs(b[0] - a[0]) + Math.abs(b[1] - a[1]) || 1, t = Math.min(18, L / 2) / L, x = a[0] + (b[0] - a[0]) * t, y = a[1] + (b[1] - a[1]) * t;
+    return `<g class="rule-mark"><title>Breaks rule: ${esc(why.join('; '))}</title><circle cx="${x}" cy="${y}" r="6.5"/><text x="${x}" y="${y + 3.4}" text-anchor="middle">!</text></g>`; };
   const marker = (n, c, k = 1) => `<marker id="${id}-${n}" markerWidth="${10 * k}" markerHeight="${8 * k}" refX="${9 * k}" refY="${4 * k}" orient="auto-start-reverse" markerUnits="userSpaceOnUse"><path d="M0 0 L${10 * k} ${4 * k} L0 ${8 * k} Z" fill="${c}"/></marker>`;
   const MC = { d: 'var(--um-arrow)', g: 'var(--um-green)', r: 'var(--um-rose)', v: 'var(--um-violet)', h: 'var(--um-cyan)', ...Object.fromEntries(WIRES.map(w => [w[0], `var(--um-w-${w[0]})`])) };
-  const heavy = [...new Set(edges.filter(e => e.weight > 1).map(e => estyle(e).m + '-w' + e.weight))]; // a heavier line's arrowhead grows with it
+  const heavy = [...new Set(edges.filter(e => e.weight > 1).map(e => lstyle(e).m + '-w' + e.weight))]; // a heavier line's arrowhead grows with it
   let s = `<svg viewBox="${B.x} ${B.y} ${B.w} ${B.h}" data-w="${B.w}" data-h="${B.h}" role="${map ? 'group' : 'img'}" aria-label="${esc(opts.title || 'Diagram')}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
     <defs>${marker('d', 'var(--um-arrow)')}${marker('g', 'var(--um-green)')}${marker('r', 'var(--um-rose)')}${marker('v', 'var(--um-violet)')}${marker('h', 'var(--um-cyan)')}${map ? WIRES.map(w => marker(w[0], `var(--um-w-${w[0]})`)).join('') : ''}${heavy.map(m => { const [c, k] = m.split('-w'); return marker(m, MC[c], 1 + (k - 1) * .35); }).join('')}</defs>`;
   const families = geo.families || [], familyDepth = f => f.parent ? 1 + familyDepth(families.find(p => p.id === f.parent) || {}) : 0;
   families.slice().sort((a,b) => familyDepth(a)-familyDepth(b)).forEach(f => {
     s += `<g class="family" data-family="${esc(f.id)}"${f.parent ? ` data-parent="${esc(f.parent)}"` : ''}><rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" rx="14" stroke="var(--um-${familyDepth(f) ? 'cyan' : 'border-2'})"/>
-      <text class="family-title" x="${f.x+12}" y="${f.y+18}" fill="var(--um-muted)" data-t="ft" data-o="${esc(f.id)}">${esc(f.label || f.id)}</text>${(f.tabs || []).map(t => `
+      <text class="family-title" x="${f.x+12}" y="${f.y+18}" fill="var(--um-muted)" data-t="ft" data-o="${esc(f.id)}">${esc(f.label || f.id)}</text>${(f.tabs || []).map(t => t.fold ? `
+      <g class="fold-hint"><title>Fold back into one card (E, or Alt + click a card in it)</title><rect x="${t.x}" y="${f.y - 8}" width="${t.w}" height="16" rx="8" class="n-mask" stroke="var(--um-accent)"/><text x="${t.x + t.w / 2}" y="${f.y + 4}" text-anchor="middle" class="badge-tx" fill="var(--um-accent)">⤡</text></g>` : `
       <g class="pub-tab" data-badge="${t.badge}"><rect x="${t.x}" y="${f.y - 8}" width="${t.w}" height="15" rx="4" fill="${t.fill}"/><text x="${t.x + t.w / 2}" y="${f.y + 3}" text-anchor="middle" class="tab-tx">${esc(t.text)}</text></g>`).join('')}</g>`;
   });
   (geo.lanes || []).forEach((l, i) => {
@@ -1000,15 +1069,15 @@ function svgOf(geo, opts = {}) {
       ${tour ? `<circle r="3.2" class="tour tour-packet" opacity="0"><animateMotion path="${roundPath(b.pts)}" keyPoints="0;0;1" keyTimes="0;.86;1" calcMode="linear" dur="${TOUR}s" repeatCount="indefinite"/>${tourAnim('0;0;.8;.8;0', [0, .86, .88, .99, 1])}</circle>` : ''}</g>`;
   });
   edges.forEach((e, i) => {
-    const st = estyle(e), d = roundPath(e.pts), mk = st.m + (e.weight > 1 ? '-w' + e.weight : '');
+    const st = lstyle(e), why = broke(e), d = roundPath(e.pts), mk = st.m + (e.weight > 1 ? '-w' + e.weight : '');
     if (tour && tour.legs[i]) { const [a, b] = tour.legs[i];
       s += `<path d="${d}" class="tour-glow" stroke="${st.c}" opacity="0">${tourAnim('0;0;.55;.55;0;0', [0, a, Math.min(a + .01, b), b, b + .03, 1])}</path>`; }
     s += `<g class="edge-g${st.cls || ''}${e.weight > 1 ? ' wt-' + e.weight : ''}" data-from="${esc(e.from)}" data-to="${esc(e.to)}" data-i="${i}"><path d="${d}" class="halo"/><path d="${d}" class="hitline"/>
       <path d="${d}" class="edge${st.flow ? ' flow' : ''}" stroke="${st.c}" ${st.dash && !st.flow ? `stroke-dasharray="${st.dash}"` : ''} ${st.op ? `opacity="${st.op}"` : ''} marker-end="url(#${id}-${mk})" ${e.both ? `marker-start="url(#${id}-${mk})"` : ''}/>
-      <path d="${d}" class="flowline" stroke="${st.c}"/>${(e.all || [e]).some(x => x.edited) ? (() => { let m = [e.pts[0], e.pts[1]];
+      <path d="${d}" class="flowline" stroke="${st.c}"/>${(e.all || [e]).some(x => x.edited) && !e.strong ? (() => { let m = [e.pts[0], e.pts[1]];
         e.pts.slice(1).forEach((p, k) => { const a = e.pts[k]; if (Math.abs(p[0] - a[0]) + Math.abs(p[1] - a[1]) > Math.abs(m[1][0] - m[0][0]) + Math.abs(m[1][1] - m[0][1])) m = [a, p]; });
-        return `<circle cx="${(m[0][0] + m[1][0]) / 2}" cy="${(m[0][1] + m[1][1]) / 2}" r="4" class="edited-dot"><title>Edited</title></circle>`; })() : ''}
-      <title>${e.step != null ? 'Step ' + e.step + ': ' : ''}${esc(e.s.label)} ${e.both ? '⇄' : '→'} ${esc(e.t.label)}${e.label ? ': ' + esc(e.label) : ''}${e.label && e.sublabel ? ' (' + esc(e.sublabel) + ')' : ''}${e.when ? '\n' + esc(e.when) : ''}</title></g>`;
+        return `<circle cx="${(m[0][0] + m[1][0]) / 2}" cy="${(m[0][1] + m[1][1]) / 2}" r="4" class="edited-dot"><title>Edited</title></circle>`; })() : ''}${why.length ? ruleMark(e, why) : ''}
+      <title>${e.step != null ? 'Step ' + e.step + ': ' : ''}${esc(e.s.label)} ${e.both ? '⇄' : '→'} ${esc(e.t.label)}${e.label ? ': ' + esc(e.label) : ''}${e.label && e.sublabel ? ' (' + esc(e.sublabel) + ')' : ''}${e.when ? '\n' + esc(e.when) : ''}${why.length ? '\nBreaks rule: ' + esc(why.join('; ')) : ''}</title></g>`;
   });
   s += '</g><g class="nodes">';
   nodes.forEach(n => {
@@ -1071,9 +1140,9 @@ return I && I.src ? `<rect x="${x - M * 3 / 28}" y="${y - M * 3 / 28}" width="${
       said.push(kids ? `${kids} (cards inside, opens the inner view)` : '(opens the inner view)'); }
     const ch = CHG[String(n.change || '').toLowerCase()];
     if (ch) {
-      const bw = ch[1].length * 6 + 12;
-      parts.push(`<rect x="${n.x + n.w - bw - 8}" y="${n.y - 8}" width="${bw}" height="16" rx="8" fill="var(--um-mask)" stroke="var(--um-${ch[0]})"/>
-        <text x="${n.x + n.w - bw / 2 - 8}" y="${n.y + 3}" text-anchor="middle" class="badge-tx" fill="var(--um-${ch[0]})">${ch[1]}</text>`);
+      const bw = ch[1].length * 6 + 12, bx = n.x + n.w - bw - 8 - (hint && map ? 40 : 0); // left of a map card's ⤢ pill, which sits on the same edge
+      parts.push(`<rect x="${bx}" y="${n.y - 8}" width="${bw}" height="16" rx="8" fill="var(--um-mask)" stroke="var(--um-${ch[0]})"/>
+        <text x="${bx + bw / 2}" y="${n.y + 3}" text-anchor="middle" class="badge-tx" fill="var(--um-${ch[0]})">${ch[1]}</text>`);
       said.push(ch[1].toLowerCase());
     }
     if (sub) { parts.push(`<text x="${tx0}" y="${ly + 16 + (two ? 15 : 0)}" text-anchor="${anchor}" class="n-sub depth-read" data-o="${esc(n.id)}" data-t="ns">${sub2 ? lines(sub2, 12) : esc(sub)}</text>`);
@@ -1105,7 +1174,7 @@ return I && I.src ? `<rect x="${x - M * 3 / 28}" y="${y - M * 3 / 28}" width="${
   if (map) { // each line's focus target: after the cards, so lines follow them in the Tab order (#43), under the labels; the mouse still hits the line
     s += '</g><g class="keys">';
     edges.forEach((e, i) => { const said = e.label ? `: ${e.label}${e.sublabel ? ` (${e.sublabel})` : ''}` : '';
-      const name = `${e.step != null ? `Step ${e.step}: ` : ''}Line ${e.both ? `between ${e.s.label} and ${e.t.label}, both ways` : `from ${e.s.label} to ${e.t.label}`}${said}`;
+      const name = `${e.step != null ? `Step ${e.step}: ` : ''}Line ${e.both ? `between ${e.s.label} and ${e.t.label}, both ways` : `from ${e.s.label} to ${e.t.label}`}${said}${broke(e).length ? `, breaks rule ${broke(e).join('; ')}` : ''}`;
       s += `<g class="um-key line-key${e.weight > 1 ? ' wt-' + e.weight : ''}" data-i="${i}" tabindex="0" role="button" aria-pressed="false" aria-label="${esc(name)}"><path d="${roundPath(e.pts)}" class="key-ring"/></g>`; });
   }
   s += '</g><g class="labels depth-read">';
@@ -1226,7 +1295,7 @@ class Camera {
   }
   onDown(e) {
     if (e.button !== 0 && e.pointerType === 'mouse') return;
-    if (e.target.closest('.ctl, .minimap, button, a, input, .um-edit') || (this.o.skip && this.o.skip(e))) return;
+    if (e.target.closest('.ctl, .minimap, button, a, input, .um-edit, .um-story') || (this.o.skip && this.o.skip(e))) return;
     this.ptrs.set(e.pointerId, [e.clientX, e.clientY]);
     this.start = { x: e.clientX, y: e.clientY, s: { ...this.s }, dist: this.pinchDist() };
     this.moved = 0; this.dragged = false;
@@ -1258,9 +1327,12 @@ class Camera {
   }
 }
 
-function routeAudit(geo, where, only) { // only: a set of edges; counts just the issues that involve one of them
+// an issue's message, and what it is about (the cards, lines and boxes it names) when the caller keeps a list of that: check()
+// turns those into Refs; the page's check reads only the messages
+const teller = (issues, refs) => (message, ...about) => { issues.push(message); if (refs) refs.push(about); };
+function routeAudit(geo, where, only, refs) { // only: a set of edges; counts just the issues that involve one of them
   const sk = e => only && !only.has(e);
-  const issues = [];
+  const issues = [], say = teller(issues, refs);
   // routes: no crossings, no shared runs, no label lying across another route
   const segs = geo.edges.map(e => e.pts.slice(0, -1).map((a, i) => [a, e.pts[i + 1]]));
   const name = e => `${e.s.label}→${e.t.label}`;
@@ -1281,66 +1353,87 @@ function routeAudit(geo, where, only) { // only: a set of edges; counts just the
     if (sk(geo.edges[i]) && sk(geo.edges[j])) continue;
     let found = null;
     for (const s1 of segs[i]) { for (const s2 of segs[j]) { found = crossing(s1, s2); if (found) break; } if (found) break; }
-    if (found === 'cross') issues.push(`${where}: edges ${name(geo.edges[i])} and ${name(geo.edges[j])} cross`);
-    if (found === 'share') issues.push(`${where}: edges ${name(geo.edges[i])} and ${name(geo.edges[j])} share a line`);
+    if (found === 'cross') say(`${where}: edges ${name(geo.edges[i])} and ${name(geo.edges[j])} cross`, geo.edges[i], geo.edges[j]);
+    if (found === 'share') say(`${where}: edges ${name(geo.edges[i])} and ${name(geo.edges[j])} share a line`, geo.edges[i], geo.edges[j]);
   }
   geo.edges.forEach((e, i) => { if (!e.lbl) return; const L = { x: e.lbl.x + 1, y: e.lbl.y + 1, w: e.lbl.w - 2, h: e.lbl.h - 2 };
-    geo.edges.forEach((o, j) => { if (j !== i && !(sk(e) && sk(o)) && segs[j].some(([a, b]) => Math.max(a[0], b[0]) > L.x && Math.min(a[0], b[0]) < L.x + L.w && Math.max(a[1], b[1]) > L.y && Math.min(a[1], b[1]) < L.y + L.h)) issues.push(`${where}: label "${e.lbl.text || e.lbl.step}" lies on edge ${name(o)}`); }); });
+    geo.edges.forEach((o, j) => { if (j !== i && !(sk(e) && sk(o)) && segs[j].some(([a, b]) => Math.max(a[0], b[0]) > L.x && Math.min(a[0], b[0]) < L.x + L.w && Math.max(a[1], b[1]) > L.y && Math.min(a[1], b[1]) < L.y + L.h)) say(`${where}: label "${e.lbl.text || e.lbl.step}" lies on edge ${name(o)}`, e, o); }); });
   const segHit = (r, i) => segs[i].some(([a, b]) => Math.max(a[0], b[0]) > r.x && Math.min(a[0], b[0]) < r.x + r.w && Math.max(a[1], b[1]) > r.y && Math.min(a[1], b[1]) < r.y + r.h);
   if (geo.map) {
     const ex = 12, drawn = new Set(geo.edges.map(e => e.from + '>' + e.to)); // A→B and B→A both drawn: a pair the view keeps apart
     geo.edges.forEach((e, i) => {
       // clearance: a route keeps 12+ px from every node it does not connect
       geo.nodes.forEach(n => { if (n.id === e.from || n.id === e.to) return;
-        if (segHit({ x: n.x - ex + .5, y: n.y - ex + .5, w: n.w + 2 * ex - 1, h: n.h + 2 * ex - 1 }, i)) issues.push(`${where}: edge ${name(e)} passes within ${ex}px of node "${n.label}"`); });
+        if (segHit({ x: n.x - ex + .5, y: n.y - ex + .5, w: n.w + 2 * ex - 1, h: n.h + 2 * ex - 1 }, i)) say(`${where}: edge ${name(e)} passes within ${ex}px of node "${n.label}"`, e, n); });
       // no detours: a route stays under 2.5x the straight distance between its ends
       const len = e.pts.slice(1).reduce((a, p, k) => a + Math.abs(p[0] - e.pts[k][0]) + Math.abs(p[1] - e.pts[k][1]), 0);
       const d = Math.hypot(e.pts[e.pts.length - 1][0] - e.pts[0][0], e.pts[e.pts.length - 1][1] - e.pts[0][1]);
-      if (len > 2.5 * Math.max(d, 100)) issues.push(`${where}: edge ${name(e)} takes a detour (${Math.round(len)}px for ${Math.round(d)}px)`);
+      if (len > 2.5 * Math.max(d, 100)) say(`${where}: edge ${name(e)} takes a detour (${Math.round(len)}px for ${Math.round(d)}px)`, e);
       // reading order: every wire runs left to right, except one that closes a loop or answers its pair (keepPairs)
-      if (!e.back && !e.both && !drawn.has(e.to + '>' + e.from) && e.t.x + e.t.w / 2 <= e.s.x + e.s.w / 2) issues.push(`${where}: edge ${name(e)} runs right-to-left`);
+      if (!e.back && !e.both && !drawn.has(e.to + '>' + e.from) && e.t.x + e.t.w / 2 <= e.s.x + e.s.w / 2) say(`${where}: edge ${name(e)} runs right-to-left`, e);
     });
     if (geo.hub) { // hub views: one visible line into each callee
       const into = {}; geo.edges.forEach(e => { (into[e.to] ||= []).push(e); });
-      Object.entries(into).forEach(([id, es]) => { es = es.filter(e => !e.back); if (es.some(e => e.from === geo.hub) && es.length > 1) issues.push(`${where}: hub callee "${(geo.byId[id] || {}).label || id}" has ${es.length} incoming lines`); });
+      Object.entries(into).forEach(([id, es]) => { es = es.filter(e => !e.back); if (es.some(e => e.from === geo.hub) && es.length > 1) say(`${where}: hub callee "${(geo.byId[id] || {}).label || id}" has ${es.length} incoming lines`, geo.byId[id]); });
     }
   }
   // author name tags hang under their card: no route may run through one
   (geo.nodes || []).forEach(n => { if (!n.tag) return; const r = { x: n.tag.x + 1, y: n.tag.y + 1, w: n.tag.w - 2, h: n.tag.h - 2 };
-    geo.edges.forEach((o, j) => { if (segHit(r, j)) issues.push(`${where}: name tag "${n.tag.text}" lies on edge ${name(o)}`); }); });
+    geo.edges.forEach((o, j) => { if (segHit(r, j)) say(`${where}: name tag "${n.tag.text}" lies on edge ${name(o)}`, n, o); }); });
   // lanes: every part sits inside its own lane, lanes never overlap, no route crosses a lane header
   const lanes = geo.lanes || [];
   lanes.forEach((l, i) => {
-    lanes.slice(i + 1).forEach(m => { if (hit(l, m, -1)) issues.push(`${where}: lanes "${l.title}" and "${m.title}" overlap`); });
+    lanes.slice(i + 1).forEach(m => { if (hit(l, m, -1)) say(`${where}: lanes "${l.title}" and "${m.title}" overlap`); });
     (geo.nodes || []).forEach(n => {
-      if (n.lane === i && (n.x < l.x || n.x + n.w > l.x + l.w || n.y < l.y || n.y + n.h + (n.tag ? 14 : 0) > l.y + l.h)) issues.push(`${where}: lane "${l.title}": node "${n.label}" sticks out`);
-      if (n.lane != null && n.lane !== i && hit(n, l, -1)) issues.push(`${where}: lane "${l.title}": node "${n.label}" of another lane sits in it`);
-      if (n.lane == null && hit(n, l, -1)) issues.push(`${where}: lane "${l.title}": node "${n.label}" belongs to no lane but sits in it`);
+      if (n.lane === i && (n.x < l.x || n.x + n.w > l.x + l.w || n.y < l.y || n.y + n.h + (n.tag ? 14 : 0) > l.y + l.h)) say(`${where}: lane "${l.title}": node "${n.label}" sticks out`, n);
+      if (n.lane != null && n.lane !== i && hit(n, l, -1)) say(`${where}: lane "${l.title}": node "${n.label}" of another lane sits in it`, n);
+      if (n.lane == null && hit(n, l, -1)) say(`${where}: lane "${l.title}": node "${n.label}" belongs to no lane but sits in it`, n);
     });
   });
-  (geo.blocks || []).forEach(b => geo.edges.forEach((o, j) => { if (segHit({ x: b.x + 1, y: b.y + 1, w: b.w - 2, h: b.h - 2 }, j)) issues.push(`${where}: lane "${b.title || ''}": header crossed by edge ${name(o)}`); }));
+  (geo.blocks || []).forEach(b => geo.edges.forEach((o, j) => { if (segHit({ x: b.x + 1, y: b.y + 1, w: b.w - 2, h: b.h - 2 }, j)) say(`${where}: lane "${b.title || ''}": header crossed by edge ${name(o)}`, o); }));
   const families = geo.families || [], inside = (a,b) => b.x > a.x && b.y > a.y && b.x+b.w < a.x+a.w && b.y+b.h < a.y+a.h;
   families.forEach(f => {
     const parent = families.find(p => p.id === f.parent);
-    if (f.parent && (!parent || !inside(parent,f))) issues.push(`${where}: family "${f.label}" sticks out of its parent`);
-    (f.nodeIds || []).forEach(id => { const n = geo.byId[id]; if (n && !inside(f,n)) issues.push(`${where}: family "${f.label}" does not contain "${n.label}"`); });
-    families.filter(g => g !== f && g.parent === f.parent && g.id > f.id).forEach(g => { if (hit(f,g,-1)) issues.push(`${where}: families "${f.label}" and "${g.label}" overlap`); });
-    geo.edges.forEach((e,i) => { if (segHit({x:f.x+8,y:f.y+3,w:Math.min(f.w-16,textW(f.label || f.id,11)+16),h:22},i)) issues.push(`${where}: family "${f.label}": header crossed by edge ${name(e)}`); });
+    if (f.parent && (!parent || !inside(parent,f))) say(`${where}: family "${f.label}" sticks out of its parent`, f);
+    (f.nodeIds || []).forEach(id => { const n = geo.byId[id]; if (n && !inside(f,n)) say(`${where}: family "${f.label}" does not contain "${n.label}"`, f, n); });
+    families.filter(g => g !== f && g.parent === f.parent && g.id > f.id).forEach(g => { if (hit(f,g,-1)) say(`${where}: families "${f.label}" and "${g.label}" overlap`, f, g); });
+    geo.edges.forEach((e,i) => { if (segHit({x:f.x+8,y:f.y+3,w:Math.min(f.w-16,textW(f.label || f.id,11)+16),h:22},i)) say(`${where}: family "${f.label}": header crossed by edge ${name(e)}`, f, e); });
     geo.edges.forEach((e,i) => { if (segs[i].some(([a,b]) => { const v = a[0] === b[0], c = v ? a[0] : a[1], p = v ? [a[1], b[1]] : [a[0], b[0]];
       const lo = Math.max(Math.min(...p), v ? f.y : f.x), hi = Math.min(Math.max(...p), v ? f.y + f.h : f.x + f.w);
-      return hi - lo > 40 && (v ? [f.x, f.x + f.w] : [f.y, f.y + f.h]).some(u => Math.abs(c - u) < 8); })) issues.push(`${where}: edge ${name(e)} runs along the border of family "${f.label}"`); });
+      return hi - lo > 40 && (v ? [f.x, f.x + f.w] : [f.y, f.y + f.h]).some(u => Math.abs(c - u) < 8); })) say(`${where}: edge ${name(e)} runs along the border of family "${f.label}"`, e, f); });
     geo.edges.forEach(e => { const L = e.lbl; if (!L) return; const xin = L.x + L.w > f.x && L.x < f.x + f.w, yin = L.y + L.h > f.y && L.y < f.y + f.h;
-      if ((xin && [f.y, f.y + f.h].some(u => L.y < u && L.y + L.h > u)) || (yin && [f.x, f.x + f.w].some(u => L.x < u && L.x + L.w > u))) issues.push(`${where}: label "${L.text || L.step}" sits on the border of family "${f.label}"`); });
+      if ((xin && [f.y, f.y + f.h].some(u => L.y < u && L.y + L.h > u)) || (yin && [f.x, f.x + f.w].some(u => L.x < u && L.x + L.w > u))) say(`${where}: label "${L.text || L.step}" sits on the border of family "${f.label}"`, e, f); });
   });
   return issues;
 }
 
+/* The layout check's geometry, which needs no fonts: check() runs it on layout()'s geometry, and the page adds what it
+   measures in the DOM (text against its card, a lane's or box's title, edge labels against each other). */
+const box = n => ({ x: n.x, y: n.y, w: n.w, h: n.h });
+function overlapIssues(geo, where, refs) {
+  const issues = [], nodes = geo.nodes, say = teller(issues, refs);
+  for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) if (hit(box(nodes[i]), box(nodes[j]), -1)) say(`${where}: nodes "${nodes[i].label}" and "${nodes[j].label}" overlap`, nodes[i], nodes[j]);
+  return issues;
+}
+function leaveIssues(geo, where, refs) {
+  const issues = [], say = teller(issues, refs);
+  if (geo.map) geo.edges.forEach(e => { const L = e.lbl; if (!L || !e.label || !e.pts) return; // a label must leave some of its own line visible
+    const c = [L.x + L.w / 2, L.y + L.h / 2], P = e.pts; let s = 0, at = null, half = 0, tot = 0;
+    for (let i = 0; i + 1 < P.length; i++) { const a = P[i], b = P[i + 1], len = Math.abs(b[0] - a[0]) + Math.abs(b[1] - a[1]);
+      if (at == null) { const onH = a[1] === b[1] && Math.abs(c[1] - a[1]) < 2 && c[0] >= Math.min(a[0], b[0]) - 1 && c[0] <= Math.max(a[0], b[0]) + 1;
+        const onV = a[0] === b[0] && Math.abs(c[0] - a[0]) < 2 && c[1] >= Math.min(a[1], b[1]) - 1 && c[1] <= Math.max(a[1], b[1]) + 1;
+        if (onH || onV) { at = tot + Math.abs(c[0] - a[0]) + Math.abs(c[1] - a[1]); half = onH ? L.w / 2 : L.h / 2; } }
+      tot += len; }
+    if (at == null) return; const room = Math.min(at - half, tot - at - half);
+    if (room < 16) say(`${where}: label "${e.label}" leaves its line ${Math.max(0, Math.round(room))} px (${e.s.label}→${e.t.label})`, e); });
+  return issues;
+}
+
 /* label-overlap audit used by `visual.py check` (world coordinates, real font metrics) */
 function auditSvg(svg, geo, where) {
-  const issues = [], R = n => ({ x: n.x, y: n.y, w: n.w, h: n.h });
+  const issues = overlapIssues(geo, where), R = box;
   const T = [...svg.querySelectorAll('text[data-t]')].map(t => { let b; try { b = t.getBBox(); } catch (_) { return null; } return { t: t.dataset.t, o: t.dataset.o, txt: t.textContent, b: { x: b.x, y: b.y, w: b.width, h: b.height } }; }).filter(x => x && x.b.w);
   const nodes = geo.nodes;
-  for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) if (hit(R(nodes[i]), R(nodes[j]), -1)) issues.push(`${where}: nodes "${nodes[i].label}" and "${nodes[j].label}" overlap`);
   T.forEach(a => {
     if (a.t === 'lt' || a.t === 'ft') {
       nodes.forEach(n => { if (hit(a.b, R(n), -1)) issues.push(`${where}: lane "${a.txt}": header covers node "${n.label}"`); });
@@ -1354,16 +1447,7 @@ function auditSvg(svg, geo, where) {
       nodes.forEach(n => { if (n !== own && hit(a.b, R(n), -1)) issues.push(`${where}: text "${a.txt}" overlaps node "${n.label}"`); });
     }
   });
-  issues.push(...routeAudit(geo, where));
-  if (geo.map) geo.edges.forEach(e => { const L = e.lbl; if (!L || !e.label || !e.pts) return; // a label must leave some of its own line visible
-    const c = [L.x + L.w / 2, L.y + L.h / 2], P = e.pts; let s = 0, at = null, half = 0, tot = 0;
-    for (let i = 0; i + 1 < P.length; i++) { const a = P[i], b = P[i + 1], len = Math.abs(b[0] - a[0]) + Math.abs(b[1] - a[1]);
-      if (at == null) { const onH = a[1] === b[1] && Math.abs(c[1] - a[1]) < 2 && c[0] >= Math.min(a[0], b[0]) - 1 && c[0] <= Math.max(a[0], b[0]) + 1;
-        const onV = a[0] === b[0] && Math.abs(c[0] - a[0]) < 2 && c[1] >= Math.min(a[1], b[1]) - 1 && c[1] <= Math.max(a[1], b[1]) + 1;
-        if (onH || onV) { at = tot + Math.abs(c[0] - a[0]) + Math.abs(c[1] - a[1]); half = onH ? L.w / 2 : L.h / 2; } }
-      tot += len; }
-    if (at == null) return; const room = Math.min(at - half, tot - at - half);
-    if (room < 16) issues.push(`${where}: label "${e.label}" leaves its line ${Math.max(0, Math.round(room))} px (${e.s.label}→${e.t.label})`); });
+  issues.push(...routeAudit(geo, where), ...leaveIssues(geo, where));
   const els = T.filter(a => a.t === 'el');
   for (let i = 0; i < els.length; i++) for (let j = i + 1; j < els.length; j++) if (hit(els[i].b, els[j].b, -1)) issues.push(`${where}: edge labels "${els[i].txt}" and "${els[j].txt}" overlap`);
   return issues;
@@ -1561,9 +1645,9 @@ function mapContext(model, opts = {}) {
   function fillLayout(vid, L) {
     const ids = (V[vid].nodeIds || []).filter(i => N[i]);
     if (ids.every(i => Array.isArray(L[i]))) return L;
-    const auto = autoPos(vid), out = {}, taken = new Set(), key = (c, r) => c + ',' + r;
-    ids.forEach(i => { if (Array.isArray(L[i])) { out[i] = L[i]; taken.add(key(...L[i])); } });
-    ids.forEach(i => { if (out[i]) return; let [c, r] = auto[i] || [0, 0]; while (taken.has(key(c, r))) r++; out[i] = [c, r]; taken.add(key(c, r)); });
+    const auto = autoPos(vid), out = {};
+    ids.forEach(i => { if (Array.isArray(L[i])) out[i] = L[i]; });
+    ids.forEach(i => { if (out[i]) return; let [c, r] = auto[i] || [0, 0]; while (Object.values(out).some(([c2, r2]) => c2 === c && Math.abs(r2 - r) < 1)) r++; out[i] = [c, r]; }); // auto rows may be half rows: a row apart
     return out;
   }
   /* plain views: longest-path columns from the roots, state at the bottom of its column */
@@ -1596,9 +1680,12 @@ function mapContext(model, opts = {}) {
       items.forEach(x => (cols[rank[x]] ||= []).push(x));
       const main = cols.map(l => (l || []).filter(x => !sink(x)).sort((a, b) => first(a) - first(b)));
       untangle(main, dag); // in call order, unless another order crosses less (#53)
+      const inside = (x, id) => ids.includes(x) ? 0 : (size[x].pos[id] || [0, null])[1]; // the row of a box's card that a line meets
+      const row = rowsFor(main, fwd.filter(level).map(e => { const a = itemIn(e.from, g), b = itemIn(e.to, g); return a !== undefined && b !== undefined && a !== b ? [a, b, inside(a, e.from), inside(b, e.to)] : null; }).filter(Boolean),
+        x => size[x].h); // each block level with the cards its lines come from and go to
       main.forEach((l, k) => { cols[k] = [...l, ...(cols[k] || []).filter(sink).sort((a, b) => first(a) - first(b))]; });
       cols.forEach(list => { let r0 = 0, w = 0;
-        list.forEach(x => { const sz = size[x];
+        list.forEach(x => { const sz = size[x]; if (row[x] != null) r0 = Math.max(r0, row[x]);
           Object.entries(sz.pos).forEach(([id, [c, r]]) => { pos[id] = [c0 + c, r0 + r]; }); r0 += sz.h; w = Math.max(w, sz.w); });
         c0 += w; h = Math.max(h, r0); });
       const per = Math.max(2, c0); loose.forEach((x, k) => { pos[x] = [k % per, h + Math.floor(k / per)]; });
@@ -1607,8 +1694,23 @@ function mapContext(model, opts = {}) {
     };
     return block(null).pos;
   }
-  const autoPos = vid => ((V[vid] || {}).containers || []).length ? blockPos(vid) : flowPos(vid);
-  function flowPos(vid) {
+  const autoPos = vid => ((V[vid] || {}).containers || []).length ? blockPos(vid) : bestFlow(vid);
+  const level = e => !/^(top|bottom)$/.test(e.fromSide) && !/^(top|bottom)$/.test(e.toSide); // a line into a card's top or bottom asks for no row
+  /* A small plain view is routed a few ways and keeps the one the layout check scores best: cards level with their
+     neighbours, or packed from the top as before, with cards no line comes into beside their callee or not. A cheap
+     version of the CLI's search (optimize), affordable up to 30 cards; a larger view takes the first way. */
+  function bestFlow(vid) {
+    const first = flowPos(vid), n = ((V[vid] || {}).nodeIds || []).length;
+    if (n > 30 || n < 3) return first;
+    const seen = new Set([JSON.stringify(first)]), ways = [first];
+    for (const o of [{ pull: true }, { packed: true }, { pull: true, packed: true }]) { const p = flowPos(vid, o), k = JSON.stringify(p); if (!seen.has(k)) { seen.add(k); ways.push(p); } }
+    if (ways.length < 2) return first;
+    let best = first, score = Infinity;
+    ways.forEach(p => { const g = buildGeo(vid, p), s = scoreGeo(g); if (s < score - 0.5) { score = s; best = p; drawn[vid] = { pos: p, g }; } }); // as it will be drawn: with port repair
+    return best;
+  }
+  const drawn = {}; // the way bestFlow kept, routed already: the view's next buildGeo takes it once instead of routing it again
+  function flowPos(vid, o = {}) {
     const v = V[vid], lp = loopsOf(v), fwd = lp.edges.filter((e, k) => !lp.back.has(k) && e.from !== e.to);
     // cards with no line go in rows of their own under the view (#46), as wide as its columns; they stacked with the sources
     const all = (v.nodeIds || []).filter(i => N[i]), lined = new Set(lp.edges.filter(e => e.from !== e.to).flatMap(e => [e.from, e.to]));
@@ -1617,14 +1719,16 @@ function mapContext(model, opts = {}) {
     for (let it = 0; it <= ids.length; it++) fwd.forEach(e => { if (rank[e.to] < rank[e.from] + 1) rank[e.to] = rank[e.from] + 1; });
     const seen = id => { const k = lp.edges.findIndex(e => e.to === id || e.from === id); return k < 0 ? 999 : k; };
     const sink = i => isState(i) && !fwd.some(e => e.from === i); // state that leads nowhere sits along the bottom
-    const cols = {}; ids.forEach(i => (cols[rank[i]] ||= []).push(i));
-    const pos = {};
-    const height = Math.max(1, ...Object.values(cols).map(c => c.filter(i => !sink(i)).length));
-    const ranks = Object.keys(cols).map(Number).sort((a, b) => a - b), mains = ranks.map(c => cols[c].filter(i => !sink(i)).sort((a, b) => seen(a) - seen(b)));
-    untangle(mains, fwd.map(e => [e.from, e.to])); // in reading order, unless another order crosses less (#53)
+    const pos = {}, links = fwd.map(e => [e.from, e.to]);
+    const order = rk => { const cols = {}; ids.forEach(i => (cols[rk[i]] ||= []).push(i));
+      const ranks = Object.keys(cols).map(Number).sort((a, b) => a - b), mains = ranks.map(c => cols[c].filter(i => !sink(i)).sort((a, b) => seen(a) - seen(b)));
+      untangle(mains, links); return { cols, ranks, mains }; }; // in reading order, unless another order crosses less (#53)
+    const { cols, ranks, mains } = order((o.pull && pullSources(ids, links, rank)) || rank);
+    const row = o.packed ? Object.fromEntries(mains.flatMap(m => m.map((i, r) => [i, r]))) : rowsFor(mains, fwd.filter(level).map(e => [e.from, e.to]));
+    const height = Math.max(0, ...Object.values(row)) + 1;
     Object.entries(cols).forEach(([c, list]) => {
       const main = mains[ranks.indexOf(+c)], st = list.filter(sink).sort((a, b) => seen(a) - seen(b));
-      main.forEach((i, r) => { pos[i] = [+c, r]; });
+      main.forEach(i => { pos[i] = [+c, row[i]]; });
       st.forEach((i, r) => { pos[i] = [+c, height + r]; }); // state along the bottom, never above the flow
     });
     const per = Math.max(2, Object.keys(cols).length), under = Math.max(...Object.values(pos).map(p => p[1])) + 1;
@@ -1634,8 +1738,16 @@ function mapContext(model, opts = {}) {
 
   function buildView(vid, opts = {}) {
     const g = buildGeo(vid), v = V[vid];
-    return { g, markup: svgOf(g, { title: v.title, subject: subjectOf(v), icons: D.icons, ...opts }) };
-  }
+    return { g, markup: svgOf(g, { title: v.title, subject: subjectOf(v), icons: D.icons, broken: brokenIn(vid), ...opts }) };
+  }
+  // the rules a view's lines break (#70), by model edge id: svgOf draws such a line rose, with a mark that names them
+  let ruled = null;
+  const brokenIn = vid => {
+    if (!arrOf(D.rules).length) return null;
+    const by = {}, title = id => { const r = D.rules.find(x => x && x.id === id); return String((r && (r.title || r.id)) ?? id); };
+    (ruled ||= rules(D)).forEach(b => { if (b.view === vid) b.targets.forEach(t => { if (t.type === 'edge') t.ids.forEach(i => { const l = by[i] ||= []; if (!l.includes(title(b.rule))) l.push(title(b.rule)); }); }); });
+    return Object.keys(by).length ? by : null;
+  };
   const layoutCache = {};
   // the cards a card opens: its inner view's, else the count the host gives for one it has not loaded (opensCount)
   const kidCount = (nid, vid) => { const c = childOf(nid, vid), k = c && c !== vid ? (V[c].nodeIds || []).length : 0, n = +nodeIn(nid, vid).opensCount;
@@ -1657,7 +1769,7 @@ function mapContext(model, opts = {}) {
     const pair = {}; // A→B plus B→A reads as one two-way edge
     return out.filter(e => { const r = !(V[vid] || {}).keepPairs && pair[e.to + '>' + e.from]; if (r) { r.both = true; r.back = false; r.all = [...(r.all || [r]), ...(e.all || [e])]; if (e.label && e.label !== r.label) r.label = (r.label ? r.label + ' / ' : '') + e.label; if (e.when) r.when = [r.when, e.when].filter(Boolean).join(' · '); return false; } pair[e.from + '>' + e.to] = e; return true; })
       .map(e => { const all = e.all || [e], subs = [...new Set(all.map(x => x.sublabel).filter(x => x != null && x !== '').map(String))];
-        return { ...e, wk: wireKind(e, opts.kinds || (V[vid] || {}).kindsFromLabels), weight: Math.max(...all.map(x => [2, 3].includes(+x.weight) ? +x.weight : 1)), sublabel: subs.join(' / ') || undefined }; });
+        return { ...e, wk: wireKind(e, opts.kinds || (V[vid] || {}).kindsFromLabels), weight: Math.max(...all.map(x => [2, 3].includes(+x.weight) ? +x.weight : 1)), sublabel: subs.join(' / ') || undefined, ...markOf(all) }; });
   }
   const condTag = l => { const m = /^(?:routes|on-ramp:?)\s+(\S+)$/i.exec(String(l || '').trim()); return m ? m[1] : null; }; // "routes bug" → a "bug" tag
   // quick: a candidate the layout searches below score and may drop, laid out once, as it was before 0.6.0 (no room for lines
@@ -1669,6 +1781,7 @@ function mapContext(model, opts = {}) {
     const P = planCache[vid] || { flow: true, backKeys: loopsOf(v).keys, steps: {} };
     if (!override && P.hub) return hubGeo(vid, P, edges, repair, quick);
     const pos = override || (v.layout ? fillLayout(vid, v.layout) : (layoutCache[vid] ||= autoPos(vid)));
+    const ready = drawn[vid]; delete drawn[vid]; if (ready && !override && ready.pos === pos && repair === (v.repair !== false) && !quick) return ready.g;
     const mainSteps = v.mainSteps || v.render === 'process';
     const stepIds = v.stepIds || ids;
     const dg = { nodeH: mainSteps ? 82 : v.subAndChips ? 80 : 64, subAndChips: !!v.subAndChips, mainSteps, containers: v.containers, nodes: ids.map(i => { const n = nodeIn(i, vid), step = mainSteps && stepIds.includes(i); return { ...n, sub: n.sub || n.sublabel, emphasis: !!step || !!n.emphasis, step: step ? stepIds.indexOf(i) + 1 : null, verbs: step ? [] : n.verbs, kids: kidCount(i, vid), opens: !!opensOf(i, vid), col: (pos[i] || [0, 0])[0], row: (pos[i] || [0, 0])[1] }; }),
@@ -1760,11 +1873,11 @@ function mapContext(model, opts = {}) {
           if (evals >= budget) break;
           const c = JSON.parse(JSON.stringify(pos));
           if (kind === 'swap') { if (a === hub) continue; const t2 = c[a]; c[a] = c[arg]; c[arg] = t2; }
-          else if (kind === 'col') { const nc = ca + arg; let r = ra; while (ids.some(b => c[b][0] === nc && c[b][1] === r)) r++; c[a] = [nc, r]; }
+          else if (kind === 'col') { const nc = ca + arg; let r = ra; while (ids.some(b => b !== a && c[b][0] === nc && Math.abs(c[b][1] - r) < 1)) r++; c[a] = [nc, r]; }
           else if (kind === 'row') {
             let r = ra + arg;
             if (band(a) && r <= stateFloor()) r = stateFloor() + 1;
-            while (ids.some(b => c[b][0] === ca && c[b][1] === r)) r += arg > 0 ? 1 : -1;
+            while (ids.some(b => b !== a && c[b][0] === ca && Math.abs(c[b][1] - r) < 1)) r += arg > 0 ? 1 : -1; // rows may be half rows: keep a row apart
             if (r < 0 || (band(a) && r <= stateFloor())) continue;
             c[a][1] = r;
           }
@@ -1782,23 +1895,424 @@ function mapContext(model, opts = {}) {
     const icons = [...new Set(ns.map(n => n.icon).filter(Boolean))].map(k => (D.icons || {})[k]), who = [...new Set(ns.map(n => n.author).filter(Boolean))].map(k => (D.authors || {})[k]);
     return JSON.stringify([v, ns, viewEdges(v), ids.map(i => [kidCount(i, vid), opensOf(i, vid)]), icons, who]);
   };
+  /* ---------- unfolding in place (#71): a stacked card opens into a box on the view it is on ----------
+     The card becomes a box with its id and name, holding its inner view's own cards: those not on this view already (the
+     inner view's other cards are this view's, its neighbours). Inside, the inner view's lines between them. This view's
+     lines stay this view's: one to the card moves onto every card inside that the inner view joins to that neighbour, the
+     same way round, or, with none, ends on the box's border; the inner view's other lines to neighbours are not added. The
+     box is the inner view's own cards in their own order, at the card's place: later columns move right by its width, and
+     the cards under it in its column move down by its height, so the rest of the picture keeps its places (a hub view, which
+     has no columns, is laid out again). The inner view's boxes that hold its own cards come along inside. Neither in nor of
+     a numbered (sequence) view: its run order, numbers and lanes, would move or be lost; that one opens. */
+  const unfoldable = (nid, vid) => { const v = V[vid], ids = (v && v.nodeIds) || [], c = ids.includes(nid) && N[nid] && v.render !== 'sequence' ? childOf(nid, vid) : null;
+    if (!c || c === vid || V[c].render === 'sequence' || chain(vid).includes(c) || (v.containers || []).some(b => b && b.id === nid)) return null;
+    return (V[c].nodeIds || []).some(i => N[i] && i !== nid && !ids.includes(i)) ? c : null; };
+  function unfold(vid, nid) {
+    const v = V[vid], c = unfoldable(nid, vid); if (!c) return false;
+    const C = V[c], outer = (v.nodeIds || []).filter(i => N[i]), inner = (C.nodeIds || []).filter(i => N[i] && i !== nid && !outer.includes(i));
+    const n0 = nodeIn(nid, vid), holder = (v.containers || []).filter(b => b && (b.nodeIds || []).includes(nid)).pop();
+    const boxes = (v.containers || []).filter(b => b && b.id).map(b => ({ ...b, nodeIds: (b.nodeIds || []).filter(i => i !== nid) }));
+    const taken = new Set([...outer, ...inner, ...boxes.map(b => b.id)]);
+    const cb = (C.containers || []).filter(b => b && b.id && !taken.has(b.id) && (b.nodeIds || []).some(i => inner.includes(i))), kept = new Set(cb.map(b => b.id));
+    const above = b => { let p = b.parent; for (let k = 0; p != null && !kept.has(p) && k < 64; k++) p = ((C.containers || []).find(x => x && x.id === p) || {}).parent; return kept.has(p) ? p : nid; };
+    const own = cb.map(b => ({ ...b, nodeIds: b.nodeIds.filter(i => inner.includes(i)), parent: above(b) })), boxed = new Set(own.flatMap(b => b.nodeIds));
+    const box = { id: nid, label: n0.label || nid, nodeIds: inner.filter(i => !boxed.has(i)), unfolds: c, ...(holder ? { parent: holder.id } : {}), ...(badgesOf(n0).length ? { badges: badgesOf(n0) } : {}) };
+    const isIn = id => inner.includes(id) || kept.has(id), mine = viewEdges(v);
+    const to = new Set(mine.filter(e => e.to === nid).map(e => e.from)), from = new Set(mine.filter(e => e.from === nid).map(e => e.to)); // this view's neighbours of the card
+    let theirs = viewEdges(C).filter(e => isIn(e.from) ? isIn(e.to) || from.has(e.to) : isIn(e.to) && to.has(e.from));
+    // a line drawn both ways stays a pair: it moves inside only if the inner view joins that neighbour to one card both ways
+    const ends = (a, out) => [...new Set(theirs.filter(e => out ? isIn(e.from) && e.to === a : e.from === a && isIn(e.to)).map(e => out ? e.from : e.to))].join();
+    const split = new Set([...to].filter(a => from.has(a) && (ends(a, true) || ends(a, false)) && (ends(a, true) !== ends(a, false) || ends(a, true).includes(','))));
+    theirs = theirs.filter(e => !split.has(isIn(e.from) ? e.to : e.from));
+    const exact = new Set(theirs.flatMap(e => isIn(e.from) === isIn(e.to) ? [] : isIn(e.to) ? [e.from + '>'] : ['>' + e.to])); // neighbours the inner view joins to a card inside
+    const k = (v.nodeIds || []).indexOf(nid), grid = !planOf(vid).hub;
+    const pos = grid ? (v.layout ? fillLayout(vid, v.layout) : (layoutCache[vid] ||= autoPos(vid))) : null;
+    Object.assign(v, { nodeIds: [...v.nodeIds.slice(0, k), ...inner, ...v.nodeIds.slice(k + 1)], containers: [...boxes, box, ...own],
+      edges: [...mine.filter(e => !(e.to === nid && exact.has(e.from + '>')) && !(e.from === nid && exact.has('>' + e.to))), ...theirs] });
+    if ((v.tour || []).includes(nid)) delete v.tour;
+    if (v.mainSteps || v.render === 'process') v.stepIds = v.stepIds || outer; // the steps keep their numbers; the cards inside are not steps
+    if (Array.isArray(v.intake)) v.intake = v.intake.filter(s => s && s.to !== nid);
+    if (+C.gap > (v.gap || 66)) v.gap = +C.gap; if (+C.rgap > (v.rgap || 44)) v.rgap = +C.rgap; // the room the inner view's lines were given
+    delete v.layout; delete planCache[vid]; delete layoutCache[vid]; delete drawn[vid];
+    if (!grid) return true; // a hub view has no columns to keep: laid out again, with its boxes
+    /* the box's slots: the inner view's own cards in its columns, or in this view's reading order, and in its rows packed,
+       upside down, or each card level with its neighbours (the median row of the cards outside it joins to, and of those to
+       its left inside, as rowsFor does). Each way is routed, and the one the layout check scores best is kept */
+    const [xc, xr] = pos[nid] || [0, 0], seen = new Set(), ways = [], med = xs => { const s = xs.slice().sort((a, b) => a - b), m = s.length >> 1; return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2; };
+    const levelled = (ic, ir) => { const R = {}, cols = [...new Set(inner.map(ic))].sort((a, b) => a - b);
+      cols.forEach(k => { const want = {}, col = inner.filter(i => ic(i) === k);
+        col.forEach(i => { const nb = theirs.flatMap(e => e.from === i ? [e.to] : e.to === i ? [e.from] : []).map(o => !isIn(o) && pos[o] ? pos[o][1] - xr : R[o]).filter(r => r != null);
+          want[i] = nb.length ? med(nb) : ir(i); });
+        let prev = -1; col.sort((a, b) => want[a] - want[b] || ir(a) - ir(b)).forEach(i => { R[i] = prev = Math.max(0, Math.round(want[i]), prev + 1); }); });
+      return i => R[i]; };
+    // with boxes of its own, the inner view keeps its slots, moved to the box's corner: empty slots are its boxes' room. Else
+    // its columns, or columns in this view's own reading order: a loop the inner view closes with one line may close here
+    // with another, or not at all
+    const inBox = (id, seen = new Set()) => seen.has(id) ? [] : (seen.add(id), [...((boxes.find(x => x.id === id) || {}).nodeIds || []), ...boxes.filter(k => k.parent === id).flatMap(k => inBox(k.id, seen))]);
+    const xBoxes = new Set(); for (let b = holder, k = 0; b && k < 64; k++, b = boxes.find(x => x.id === b.parent)) xBoxes.add(b.id); // the boxes the card is in
+    const ip0 = C.layout ? fillLayout(c, C.layout) : (layoutCache[c] ||= autoPos(c)), lp = loopsOf(v), rk = Object.fromEntries(inner.map(i => [i, 0]));
+    const fwd = lp.edges.filter((e, j) => !lp.back.has(j) && e.from !== e.to && inner.includes(e.from) && inner.includes(e.to));
+    for (let it = 0; it < inner.length; it++) fwd.forEach(e => { if (rk[e.to] < rk[e.from] + 1) rk[e.to] = rk[e.from] + 1; });
+    const one = own.length || v.nodeIds.length > 30; // its boxes' room to keep, or too big to route seven times: its own slots only
+    // the sides the inner view gave its lines are for its own picture: with its own slots they stay; elsewhere each way is
+    // also routed with the router picking them (copies, which keep the ids)
+    const keepE = v.edges, freeE = theirs.some(e => e.fromSide || e.toSide) ? keepE.map(e => theirs.includes(e) && (e.fromSide || e.toSide) ? (({ fromSide, toSide, ...r }) => r)(e) : e) : null;
+    [ip0, ...(one ? [] : [Object.fromEntries(inner.map(i => [i, [rk[i], (ip0[i] || [0, 0])[1]]]))])].forEach(ip => (one ? [false] : [false, true, 'level']).forEach(flip => {
+      const at = (i, j) => (ip[i] || [0, 0])[j], rank = j => { const u = [...new Set(inner.map(i => at(i, j)))].sort((a, b) => flip === true && j ? b - a : a - b), lo = u[0];
+        const k = j && u.some(r => r % 1) ? 2 : 1; // half rows doubled: a box that ends on a half row gets no gap under it (layoutPass widens whole rows)
+        return own.length ? i => (at(i, j) - lo) * k : i => u.indexOf(at(i, j)); };
+      const ic = rank(0), ir = flip === 'level' ? levelled(rank(0), rank(1)) : rank(1), w = Math.max(...inner.map(ic)) + 1, h = Math.max(...inner.map(ir)) + 1, L = {};
+      outer.forEach(i => { if (i === nid) return; const [c0, r0] = pos[i] || [0, 0]; L[i] = c0 >= xc + .5 ? [c0 + w - 1, r0] : Math.abs(c0 - xc) < .5 && r0 > xr ? [c0, r0 + h - 1] : [c0, r0]; });
+      inner.forEach(i => { L[i] = [xc + ic(i), xr + ir(i)]; });
+      // a box of this view with cards on both sides of the card's column, under it, would now reach into the unfolded box:
+      // it moves down under it, whole; then a card on a taken slot moves down a row
+      boxes.forEach(b => { if (xBoxes.has(b.id)) return; const ms = inBox(b.id).filter(i => L[i]); if (!ms.length) return;
+        const cs = ms.map(i => L[i][0]), rs = ms.map(i => L[i][1]);
+        if (Math.max(...cs) < xc || Math.min(...cs) > xc + w - 1 || Math.max(...rs) < xr || Math.min(...rs) > xr + h - 1) return;
+        const dr = xr + h - Math.min(...rs); ms.forEach(i => { L[i] = [L[i][0], L[i][1] + dr]; }); });
+      const slots = inner.map(i => L[i]); outer.forEach(i => { if (i === nid) return; let [c0, r0] = L[i];
+        while (slots.some(([c1, r1]) => c1 === c0 && Math.abs(r1 - r0) < 1)) r0++; slots.push(L[i] = [c0, r0]); });
+      const key = JSON.stringify(inner.map(i => L[i])); if (seen.has(key)) return; seen.add(key);
+      ways.push({ L, free: false }); if (freeE && (ip !== ip0 || flip !== false)) ways.push({ L, free: true }); }));
+    // a card inside a box it is not in reads as one of the box's (and loses a line to the box): a way with one loses
+    const strays = g => (g.families || []).reduce((a, f) => a + g.nodes.filter(n => !(f.nodeIds || []).includes(n.id) && n.x + n.w / 2 > f.x && n.x + n.w / 2 < f.x + f.w && n.y + n.h / 2 > f.y && n.y + n.h / 2 < f.y + f.h
+      && !(g.families || []).some(o => o.id !== f.id && (o.nodeIds || []).includes(n.id) && o.x >= f.x && o.y >= f.y && o.x + o.w <= f.x + f.w && o.y + o.h <= f.y + f.h)).length, 0);
+    let best = null; // ponytail: up to 12 routings per unfold, a view of over 30 cards one; a smarter search when a bigger map needs it
+    const score = ({ L, free }) => { v.edges = free ? freeE : keepE; hush = []; let g; try { g = buildGeo(vid, L); } finally { g && (g.said = hush); hush = null; }
+      const s = scoreGeo(g) + (strays(g) * 5 + leaveIssues(g, '').length) * 1000; if (!best || s < best.s - .5) best = { L, g, s, free }; };
+    ways.forEach(score);
+    // still an issue, and cards under the card in its column: the box one column to the right instead, so they keep their slots
+    if (best.s >= 1000 && v.nodeIds.length <= 30 && outer.some(i => i !== nid && pos[i] && Math.abs(pos[i][0] - xc) < .5)) { const B = best.L, L = {};
+      outer.forEach(i => { if (i === nid) return; const [c0, r0] = pos[i] || [0, 0]; L[i] = c0 >= xc + .5 ? [c0 + 1 + Math.max(...inner.map(j => B[j][0])) - xc, r0] : [c0, r0]; });
+      inner.forEach(i => { L[i] = [B[i][0] + 1, B[i][1]]; }); score({ L, free: best.free }); }
+    best.g.said.forEach(warn); delete best.g.said;
+    v.edges = best.free ? freeE : keepE; v.layout = best.L; drawn[vid] = { pos: best.L, g: best.g }; // drawn as scored, without routing it again
+    return true;
+  }
+  const unfolded = {}; // per view: the cards opts.expand named that did unfold, in order (one inside another unfolds after it)
+  withM(() => Object.entries(opts.expand || {}).forEach(([vid, ids]) => { let todo = V[vid] ? [...new Set([].concat(ids || []))] : [];
+    for (let more = true; more && todo.length;) { more = false; todo = todo.filter(nid => { if (!unfold(vid, nid)) return true; (unfolded[vid] ||= []).push(nid); return !(more = true); }); } }))();
   const geoCache = {};
   return { D, views, nodes, N, V, rootId, nodeIn, childOf, opensOf, subjectOf, viewsWith, kidsOf, chain, viewEdges, isState, planOf: withM(planOf), planCache,
-    layoutCache, geoCache, buildGeo: withM(buildGeo), buildView: withM(buildView), optimize: withM(optimize), flowPos, kidCount, viewKey };
+    layoutCache, geoCache, buildGeo: withM(buildGeo), buildView: withM(buildView), optimize: withM(optimize), flowPos, kidCount, viewKey, brokenIn, unfoldable, unfolded };
 }
 
 const edgeRefIds = e => [...new Set((e.all || [e]).map(x => x._id).filter(Boolean))];
 
 /* layout(model, viewId): one view's geometry, as the canvas draws it. No DOM. */
 export function layout(model, viewId, options = {}) {
-  const ctx = mapContext(model, { measure: options.measure });
+  const ctx = mapContext(model, { measure: options.measure, ...(options.expand ? { expand: { [viewId]: options.expand } } : {}) }); // expand: cards unfolded in place (#71)
   if (!ctx.V[viewId]) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
   ctx.planOf(viewId);
   const g = ctx.buildGeo(viewId, undefined, options.repair);
   g.edges.forEach(e => { e.ids = edgeRefIds(e); });
+  if (options.expand) g.unfolded = ctx.unfolded[viewId] || [];
   return g;
 }
 
+/** The layout check's geometry for one view, without a browser: overlapping cards, crossing or shared lines, detours,
+ *  lines against reading order or through a card, labels on lines or off their own, boxes and lanes. The page's check
+ *  (`umlimator.py check`) adds what it measures in the DOM: text that overflows its card or touches its mark, titles
+ *  that overflow, edge labels on cards or on each other. Each issue names the cards and lines it is about. */
+export function check(model, viewId, options = {}) {
+  const g = layout(model, viewId, options), where = `view ${viewId}`, about = [], lines = new Set(g.edges), boxes = new Set(g.families || []);
+  const ref = x => lines.has(x) ? { type: 'edge', ids: x.ids, view: viewId } : boxes.has(x) ? { type: 'container', id: x.id, view: viewId } : { type: 'node', id: x.id, view: viewId };
+  return [...overlapIssues(g, where, about), ...routeAudit(g, where, null, about), ...leaveIssues(g, where, about)]
+    .map((message, i) => ({ message, targets: about[i].filter(Boolean).map(ref) }));
+}
+
+const WIRE_KINDS = ['calls', 'feeds', 'triggers', 'state', 'guard'], SIDES = ['left', 'right', 'top', 'bottom'];
+/** A model's own problems, before anything is drawn: errors draw as holes or not at all (ids that are missing,
+ *  repeated or name nothing, boxes inside themselves); warnings draw other than they say (an unknown kind or weight,
+ *  a side that is not one, a view opened before the host has loaded it). Each says where: `views[2].nodeIds[4]`. */
+export function validate(model) {
+  const out = [], err = (path, message) => out.push({ level: 'error', path, message }), warn = (path, message) => out.push({ level: 'warning', path, message });
+  const arr = x => (Array.isArray(x) ? x : []), m = model && typeof model === 'object' ? model : {}, views = arr(m.views).filter(v => v && typeof v === 'object');
+  if (!Array.isArray(m.nodes)) err('nodes', 'the model needs a list of cards');
+  if (!views.length) err('views', 'the model has no views');
+  const ids = new Set(), vids = new Set(), lineIds = new Set();
+  const card = (n, at) => {
+    if (!n || typeof n.id !== 'string' || !n.id) return err(at + '.id', 'a card needs an id');
+    if (ids.has(n.id)) err(at + '.id', `card id "${n.id}" is used twice`); ids.add(n.id);
+    const k = String(n.kind ?? '').toLowerCase();
+    if (n.kind != null && !(k in KIND || k in MAPK || k in ALIAS)) warn(at + '.kind', `unknown kind "${n.kind}": drawn as a script card`);
+  };
+  arr(m.nodes).forEach((n, i) => card(n, `nodes[${i}]`));
+  views.forEach((v, i) => arr(v.nodes).forEach((n, j) => card(n, `views[${i}].nodes[${j}]`)));
+  views.forEach((v, i) => { if (typeof v.id !== 'string' || !v.id) err(`views[${i}].id`, 'a view needs an id'); else if (vids.has(v.id)) err(`views[${i}].id`, `view id "${v.id}" is used twice`); else vids.add(v.id); });
+  if (m.root != null && !vids.has(m.root)) err('root', `root "${m.root}" is not a view`);
+  const later = (x, at) => { if (x && x.opensView && !vids.has(x.opensView)) warn(at + '.opensView', `opens "${x.opensView}", a view the model does not have: fine if the host loads it when it is opened`); };
+  arr(m.nodes).forEach((n, i) => later(n, `nodes[${i}]`));
+  const line = (e, at, ends) => {
+    if (!e || typeof e !== 'object') return err(at, 'a line is an object with from and to');
+    ['from', 'to'].forEach(k => { if (!ends.has(e[k])) err(`${at}.${k}`, `"${e[k]}" is neither a card nor a box`); });
+    if (e.kind != null && !WIRE_KINDS.includes(e.kind)) warn(at + '.kind', `unknown line kind "${e.kind}": drawn as calls`);
+    if (e.weight != null && ![1, 2, 3].includes(e.weight)) warn(at + '.weight', `weight ${JSON.stringify(e.weight)} is not 1, 2 or 3: drawn as 1`);
+    ['fromSide', 'toSide'].forEach(k => { if (e[k] != null && !SIDES.includes(e[k])) warn(`${at}.${k}`, `"${e[k]}" is not left, right, top or bottom: ignored`); });
+  };
+  // a model line may end on any view's box (#28); a view's own line only on that view's boxes
+  const anyBox = new Set(views.flatMap(v => arr(v.containers).map(c => c && c.id)));
+  arr(m.edges).forEach((e, i) => { line(e, `edges[${i}]`, new Set([...ids, ...anyBox]));
+    if (e && e.id != null) { if (lineIds.has(e.id)) err(`edges[${i}].id`, `line id "${e.id}" is used twice`); lineIds.add(e.id); } });
+  views.forEach((v, i) => {
+    const at = `views[${i}]`, mine = new Set(arr(v.nodeIds)), boxes = {};
+    if (v.parent != null && !vids.has(v.parent) && !ids.has(v.parent)) err(at + '.parent', `parent "${v.parent}" is not a view`);
+    arr(v.nodeIds).forEach((id, j) => { if (!ids.has(id)) err(`${at}.nodeIds[${j}]`, `"${id}" is not a card`); });
+    Object.entries(v.nodeOverrides || {}).forEach(([id, o]) => { if (!ids.has(id)) err(`${at}.nodeOverrides.${id}`, `"${id}" is not a card`); later(o, `${at}.nodeOverrides.${id}`); });
+    arr(v.nodes).forEach((n, j) => later(n, `${at}.nodes[${j}]`));
+    ['stepIds', 'tour'].forEach(k => arr(v[k]).forEach((id, j) => { if (!mine.has(id)) err(`${at}.${k}[${j}]`, `"${id}" is not one of the view's cards`); }));
+    arr(v.browserOrder).forEach((id, j) => { if (!vids.has(id)) err(`${at}.browserOrder[${j}]`, `"${id}" is not a view`); });
+    arr(v.intake).forEach((s, j) => { if (!mine.has(s && s.to)) err(`${at}.intake[${j}].to`, `"${s && s.to}" is not one of the view's cards`); });
+    arr(v.containers).forEach((c, j) => { if (!c || !c.id) err(`${at}.containers[${j}].id`, 'a box needs an id'); else if (boxes[c.id]) err(`${at}.containers[${j}].id`, `box id "${c.id}" is used twice`); else boxes[c.id] = c; });
+    arr(v.containers).forEach((c, j) => { if (!c) return;
+      arr(c.nodeIds).forEach((id, k) => { if (!mine.has(id)) err(`${at}.containers[${j}].nodeIds[${k}]`, `"${id}" is not one of the view's cards`); });
+      if (c.parent != null && !boxes[c.parent]) err(`${at}.containers[${j}].parent`, `"${c.parent}" is not a box of this view`);
+      for (let p = c.parent, seen = new Set([c.id]); p != null && boxes[p]; p = boxes[p].parent) { if (seen.has(p)) { err(`${at}.containers[${j}].parent`, `box "${c.id}" ends up inside itself`); break; } seen.add(p); } });
+    const ends = new Set([...ids, ...Object.keys(boxes)]);
+    if (Array.isArray(v.edges)) v.edges.forEach((e, j) => { if (typeof e !== 'string') line(e, `${at}.edges[${j}]`, ends); else if (!lineIds.has(e)) err(`${at}.edges[${j}]`, `"${e}" is not a line`); });
+    Object.keys(v.layout || {}).forEach(id => { if (!mine.has(id)) warn(`${at}.layout.${id}`, `"${id}" is not one of the view's cards: its place is ignored`); });
+    if (Array.isArray(v.lanes)) v.lanes.forEach((l, j) => arr(l && l.nodeIds).forEach((id, k) => { if (!mine.has(id)) warn(`${at}.lanes[${j}].nodeIds[${k}]`, `"${id}" is not one of the view's cards: left out of the lane`); }));
+  });
+  // rules (#70): an id, and from, to or noCycles; a selector that names nothing picks nothing, and a misspelt kind picks script cards
+  if (m.rules != null && !Array.isArray(m.rules)) err('rules', 'rules is a list');
+  const ruleIds = new Set(), allBoxes = new Set(anyBox), each = (x, at, f) => (Array.isArray(x) ? x : [x]).forEach((y, j) => { if (y != null) f(y, Array.isArray(x) ? `${at}[${j}]` : at); });
+  const pick = (s, at) => {
+    if (s == null) return;
+    if (typeof s !== 'object' || Array.isArray(s)) return err(at, 'a selector is an object: id, kind, container or not');
+    Object.keys(s).forEach(k => { if (!['id', 'kind', 'container', 'not'].includes(k)) warn(`${at}.${k}`, `unknown key "${k}": ignored, so the selector picks more cards`); });
+    each(s.id, at + '.id', (x, p) => { if (!ids.has(x) && !allBoxes.has(x)) warn(p, `"${x}" is neither a card nor a box: it picks nothing`); });
+    each(s.kind, at + '.kind', (x, p) => { const k = String(x).toLowerCase(); if (!(k in KIND || k in MAPK || k in ALIAS)) warn(p, `unknown kind "${x}": it picks script cards`); });
+    each(s.container, at + '.container', (x, p) => { if (!allBoxes.has(x)) warn(p, `"${x}" is not a box: it picks nothing`); });
+    pick(s.not, at + '.not');
+  };
+  arr(m.rules).forEach((r, i) => {
+    const at = `rules[${i}]`;
+    if (!r || typeof r !== 'object') return err(at, 'a rule is an object with an id');
+    if (typeof r.id !== 'string' || !r.id) err(at + '.id', 'a rule needs an id'); else if (ruleIds.has(r.id)) err(at + '.id', `rule id "${r.id}" is used twice`); else ruleIds.add(r.id);
+    if (!r.from && !r.to && !r.noCycles) err(at, 'a rule needs from, to or noCycles');
+    pick(r.from, at + '.from'); pick(r.to, at + '.to');
+    arr(r.views).forEach((v, j) => { if (!vids.has(v)) err(`${at}.views[${j}]`, `"${v}" is not a view`); });
+  });
+  // stories (#69): each step's view, and the cards, lines and tour it names there
+  if (m.stories != null && !Array.isArray(m.stories)) err('stories', 'stories is a list of stories');
+  const sids = new Set(), lines = new Set([...lineIds, ...views.flatMap(v => arr(v.edges).filter(e => e && e.id != null).map(e => e.id))]);
+  arr(m.stories).forEach((s, i) => {
+    const at = `stories[${i}]`;
+    if (!s || typeof s.id !== 'string' || !s.id) return err(at + '.id', 'a story needs an id');
+    if (sids.has(s.id)) err(at + '.id', `story id "${s.id}" is used twice`); sids.add(s.id);
+    if (!arr(s.steps).length) err(at + '.steps', 'a story needs steps');
+    arr(s.steps).forEach((st, j) => {
+      const p = `${at}.steps[${j}]`, v = views.find(x => x.id === (st && st.view));
+      if (!v) return err(p + '.view', `"${st && st.view}" is not a view`);
+      const mine = new Set(arr(v.nodeIds)), named = (x, q) => { // a card of the view or a line ("a->b#0" names a line with no id)
+        if (typeof x === 'string' && !mine.has(x) && !lines.has(x) && !x.includes('->')) err(q, `"${x}" is neither one of view "${v.id}"'s cards nor a line`); };
+      named(st.select, p + '.select');
+      arr(st.highlight).forEach((x, k) => named(x, `${p}.highlight[${k}]`));
+      arr(st.tour).forEach((x, k) => { if (!mine.has(x)) err(`${p}.tour[${k}]`, `"${x}" is not one of the view's cards`); });
+      const c = st.camera, fit = ': the step shows the whole view';
+      if (c && typeof c === 'object' && c.card != null) { if (!mine.has(c.card)) warn(p + '.camera.card', `"${c.card}" is not one of the view's cards${fit}`); }
+      else if (c != null && c !== 'fit' && !(c && Number.isFinite(c.x) && Number.isFinite(c.y))) warn(p + '.camera', `the camera is "fit", { x, y, zoom } or { card, zoom }${fit}`);
+      if (st.duration != null && !(st.duration > 0)) warn(p + '.duration', `duration ${JSON.stringify(st.duration)} is not a number of ms: 4000`);
+    });
+  });
+  return out;
+}
+
+/* ================= rules (#70): what a model says must hold =================
+   A rule forbids lines from the cards `from` picks to the cards `to` picks (a side left out picks every card), or, with
+   noCycles, boxes that reach each other through their lines. A line counts between the two boxes that hold its ends right
+   under the box (or view) they share, so a box is weighed against its siblings, at every depth, and a line into a box's
+   own inner box counts for nothing. A selector picks cards by id, kind (as the map draws it: "db" is a database) or box
+   (at any depth), each a value or a list; every key it has must hold, and `not` turns a selector round. A line's end on
+   a box (#28) is that box: in it, and of no kind. A rule that names a box (a container, or a box's id, in from, to or a
+   not) holds only in the views that draw one of the boxes it names, as a box belongs to its view; any other rule holds in
+   every view. `views` narrows that further. */
+const boxesNamed = (s, isBox) => !s || typeof s !== 'object' ? []
+  : [...[s.container].flat(), ...[s.id].flat().filter(isBox), ...boxesNamed(s.not, isBox)].filter(x => x != null);
+const picks = (s, end) => !s || ((s.id == null || [s.id].flat().includes(end.id))
+  && (s.kind == null || [s.kind].flat().some(k => end.kind != null && kindOf(k, true) === end.kind))
+  && (s.container == null || [s.container].flat().some(c => end.boxes.includes(c)))
+  && (s.not == null || !picks(s.not, end)));
+const andList = xs => xs.length > 1 ? xs.slice(0, -1).join(', ') + ' and ' + xs[xs.length - 1] : xs.join(''), arrOf = x => (Array.isArray(x) ? x : []);
+/** Every rule the model breaks, in each view that draws it broken: a line a rule forbids, or a cycle of boxes. */
+export function rules(model) {
+  const list = arrOf(model && model.rules).filter(r => r && typeof r === 'object' && (r.from || r.to || r.noCycles));
+  if (!list.length) return [];
+  const { views, N, nodeIn, viewEdges } = mapContext(model), out = [];
+  const anyBox = new Set(views.flatMap(v => arrOf(v.containers).map(c => c && c.id).filter(Boolean)));
+  const named = new Map(list.map(r => [r, [r.from, r.to].flatMap(s => boxesNamed(s, id => anyBox.has(id) && !N[id]))]));
+  views.forEach(v => {
+    const cs = arrOf(v.containers).filter(c => c && c.id), box = {}; cs.forEach(c => { box[c.id] ||= c; });
+    const order = Object.values(box).map(c => c.id), home = {}; cs.forEach(c => arrOf(c.nodeIds).forEach(id => { home[id] ??= c.id; }));
+    const chain = b => { const c = []; for (const seen = new Set(); b != null && box[b] && !seen.has(b); b = box[b].parent) { seen.add(b); c.unshift(b); } return c; }; // outermost first
+    const end = id => box[id] ? { id, kind: null, boxes: chain(id), label: box[id].label || id }
+      : { id, kind: kindOf(nodeIn(id, v.id).kind, true), boxes: chain(home[id]), label: nodeIn(id, v.id).label || id };
+    // a target names the drawn line, which may stand for several edges: grouped as prepEdges groups them (parallel edges, and
+    // A→B with B→A, unless keepPairs), in its order, so select() finds it
+    // ponytail: a copy of prepEdges' grouping; share one helper if that grouping changes
+    const lines = viewEdges(v), par = new Map(), drawn = new Map(), ends = new Map();
+    lines.forEach(e => { const k = e.from + '>' + e.to + (v.keepPairs ? '#' + e.id : ''); par.has(k) ? par.get(k).push(e) : par.set(k, [e]); });
+    par.forEach(es => { const back = !v.keepPairs && ends.get(es[0].to + '>' + es[0].from);
+      if (back) back.push(...es); else ends.set(es[0].from + '>' + es[0].to, es); es.forEach(e => drawn.set(e, back || es)); });
+    const line = e => ({ type: 'edge', ids: [...new Set(drawn.get(e).map(x => x._id))], view: v.id });
+    let rings = null; // the cycles of boxes, worked out for the first noCycles rule: [boxes, the lines between them]
+    const cycles = () => {
+      const next = {}; // box -> Map(box -> the lines from the one to the other)
+      lines.forEach(e => { const A = end(e.from).boxes, B = end(e.to).boxes; let i = 0; while (i < A.length && i < B.length && A[i] === B[i]) i++;
+        if (i < A.length && i < B.length) { const m = next[A[i]] ||= new Map(); m.set(B[i], [...(m.get(B[i]) || []), e]); } });
+      const reach = b => { const seen = new Set(), todo = [b]; while (todo.length) for (const c of (next[todo.pop()] || new Map()).keys()) if (!seen.has(c)) { seen.add(c); todo.push(c); } return seen; };
+      const R = Object.fromEntries(order.map(b => [b, reach(b)])), done = new Set(), found = [];
+      order.forEach(b => { if (done.has(b) || !R[b].has(b)) return;
+        const ring = order.filter(c => R[b].has(c) && R[c].has(b)); ring.forEach(c => done.add(c));
+        found.push([ring, ring.flatMap(a => ring.flatMap(c => (next[a] && next[a].get(c)) || []))]); });
+      return found;
+    };
+    list.forEach(r => {
+      if (Array.isArray(r.views) && !r.views.includes(v.id)) return;
+      if (named.get(r).length && !named.get(r).some(b => box[b])) return; // it names boxes, none of them this view's
+      const breaks = `breaks rule "${r.title || r.id}"`;
+      if (r.noCycles) (rings ||= cycles()).forEach(([ring, via]) => out.push({ rule: r.id, view: v.id,
+        message: `view ${v.id}: boxes ${andList(ring.map(c => `"${box[c].label || c}"`))} form a cycle, which ${breaks}`,
+        targets: [...ring.map(c => ({ type: 'container', id: c, view: v.id })), ...[...new Set(via.map(e => drawn.get(e)))].map(es => line(es[0]))] }));
+      else { const said = new Set(); // parallel edges that break it read as one line, once
+        lines.forEach(e => { const a = end(e.from), b = end(e.to), message = `view ${v.id}: edge ${a.label}→${b.label} ${breaks}`;
+          if (picks(r.from, a) && picks(r.to, b) && !said.has(message)) { said.add(message); out.push({ rule: r.id, view: v.id, message, targets: [line(e)] }); } }); }
+    });
+  });
+  return out;
+}
+
+/* ---------- change: diff (#66) and drift (#68) ----------
+   Each returns a model marked with what the map draws already, so a page the CLI writes, or a still, shows the marks
+   with nothing to call at run time: a card's change (a NEW or CHANGED tab; REMOVED is faded, dashed and struck
+   through), a line's style (added: green and flowing; removed: rose, dashed and faded; security: rose and dashed;
+   faded: its own colour, faint and still) and edited (an amber dot on the line). */
+const canon = x => JSON.stringify(x, (k, v) => v && typeof v === 'object' && !Array.isArray(v) ? Object.fromEntries(Object.keys(v).sort().map(f => [f, v[f]])) : v);
+// a line's identity in a list, as a Ref names it: its id, else "<from>-><to>#<n>"; "=<id>" for a view's reference to a model line
+const lineKeys = list => { const seen = {}; return list.map(e => typeof e === 'string' ? '=' + e : e && typeof e === 'object'
+  ? (e.id != null ? String(e.id) : (k => `${k}#${seen[k] = (seen[k] ?? -1) + 1}`)(e.from + '->' + e.to)) : ''); };
+// a line that stands for several edges (A→B and B→A, parallel edges) shows the strongest of their marks: removed or
+// undrawn, then added, then changed (its edited dot, which a stronger mark hides); it fades as idle only when every one
+// of them is idle, and otherwise takes the first style that is no mark
+const markOf = all => { const top = all.find(x => x.style === 'removed' || x.drift === 'undrawn') || all.find(x => x.style === 'added');
+  if (top) return { style: top.style, strong: true };
+  return { style: all.every(x => x.style === 'faded') ? 'faded' : (all.find(x => x.style && x.style !== 'faded') || {}).style }; };
+// the lines a view draws: its own list (a model line by id, or one of its own), else every model line between its cards and boxes
+const linesOf = (m, v) => { const all = Array.isArray(m.edges) ? m.edges.filter(Boolean) : [];
+  if (Array.isArray(v.edges)) { const byId = new Map(all.filter(e => e.id != null).map(e => [String(e.id), e])); return v.edges.map(e => typeof e === 'string' ? byId.get(e) : e).filter(Boolean); }
+  const ids = new Set([...(v.nodeIds || []), ...(v.containers || []).map(c => c && c.id)]); return all.filter(e => ids.has(e.from) && ids.has(e.to)); };
+
+/** What changed from one model to the next, as one model to draw: `after`, with each card and line marked added, changed
+ *  or removed (removed ones come back from `before`, in their views, boxes and places), a summary in words, and the
+ *  views that show a change. Cards and lines are matched by id (a line without one by its ends, as a Ref names it). */
+export function diff(before, after) {
+  const arr = x => (Array.isArray(x) ? x : []), A = structuredClone(before || {}), out = structuredClone(after || {});
+  const how = new Map(), was = new Map(), said = []; // each marked card or line: added, changed or removed; a changed one's [before, after]
+  const card = (x, h) => ({ ...x, change: h });
+  const line = (x, h) => ({ ...x, change: h, ...(h === 'changed' ? { edited: true } : { style: h }) });
+  function mark(old, now, put, keys = l => l.map(x => x && x.id)) { // now's items, marked; old's that left come back, marked removed
+    const ko = keys(old), kn = keys(now), O = new Map(old.map((x, i) => [ko[i], x])), kept = new Set(kn);
+    const res = now.map((x, i) => { if (!x || typeof x !== 'object') return x; const o = O.get(kn[i]);
+      if (o && typeof o === 'object' && canon(o) === canon(x)) return x;
+      const h = o && typeof o === 'object' ? 'changed' : 'added', y = put(x, h); how.set(y, h); if (h === 'changed') was.set(y, [o, x]); return y; });
+    old.forEach((x, i) => { if (x && typeof x === 'object' && !kept.has(ko[i])) { const y = put(x, 'removed'); how.set(y, 'removed'); res.push(y); } });
+    return res;
+  }
+  out.nodes = mark(arr(A.nodes), arr(out.nodes), card);
+  out.edges = mark(arr(A.edges), arr(out.edges), line, lineKeys);
+  const goneLines = new Set(out.edges.filter(e => how.get(e) === 'removed' && e.id != null).map(e => String(e.id)));
+  const V0 = new Map(arr(A.views).filter(Boolean).map(v => [v.id, v])), V1 = new Set(arr(out.views).filter(Boolean).map(v => v.id));
+  const moved = [], touched = new Set(); // cards put into or taken out of a view; views whose cards the diff marks there
+  const views = arr(out.views).map(v => {
+    const o = v && V0.get(v.id); if (!o) return v;
+    const w = { ...v }, ids = arr(v.nodeIds), oldIds = arr(o.nodeIds);
+    if (v.nodes || o.nodes) w.nodes = mark(arr(o.nodes), arr(v.nodes), card);
+    const at = new Map([...out.nodes, ...arr(w.nodes)].filter(Boolean).map(n => [n.id, n]));
+    const left = oldIds.filter(id => !ids.includes(id)), came = ids.filter(id => !oldIds.includes(id)), ov = { ...(v.nodeOverrides || {}) };
+    w.nodeIds = [...ids, ...left];
+    left.forEach(id => { if (how.get(at.get(id)) !== 'removed') { ov[id] = { ...(o.nodeOverrides || {})[id], change: 'removed' }; moved.push(['takes', id, v]); } });
+    came.forEach(id => { if (at.get(id) && how.get(at.get(id)) !== 'added') { ov[id] = { ...ov[id], change: 'added' }; moved.push(['puts', id, v]); } });
+    if (left.length || came.length) touched.add(v.id);
+    if (Object.keys(ov).length) w.nodeOverrides = ov;
+    if (left.length && Array.isArray(v.containers)) // a removed card stays in its box, and in its place on a view laid out by hand when that is free
+      w.containers = v.containers.map(c => { const back = left.filter(id => c && arr(o.containers).some(b => b && b.id === c.id && arr(b.nodeIds).includes(id))); return back.length ? { ...c, nodeIds: [...arr(c.nodeIds), ...back] } : c; });
+    if (left.length && v.layout && o.layout) { const L = { ...v.layout }, taken = new Set(Object.values(L).map(String));
+      left.forEach(id => { const p = o.layout[id]; if (Array.isArray(p) && !taken.has(String(p))) { L[id] = p; taken.add(String(p)); } }); w.layout = L; }
+    if (Array.isArray(v.edges)) { w.edges = mark(arr(o.edges), v.edges, line, lineKeys);
+      arr(o.edges).forEach(e => { if (typeof e === 'string' && !v.edges.includes(e) && goneLines.has(e)) w.edges.push(e); }); } // a removed model line it showed
+    return w;
+  });
+  arr(A.views).forEach(o => { if (!o || V1.has(o.id)) return; // a removed view comes back with everything in it removed
+    const w = { ...o, nodeOverrides: { ...(o.nodeOverrides || {}) } };
+    arr(o.nodeIds).forEach(id => { w.nodeOverrides[id] = { ...w.nodeOverrides[id], change: 'removed' }; });
+    if (o.nodes) w.nodes = o.nodes.map(n => { const y = card(n, 'removed'); how.set(y, 'removed'); return y; });
+    if (Array.isArray(o.edges)) w.edges = o.edges.map(e => e && typeof e === 'object' ? line(e, 'removed') : e);
+    touched.add(o.id); views.push(w); });
+  out.views = views;
+
+  // the summary: views, then cards, then lines, in model order; a line to a card that came or went goes with the card
+  const cards = [...out.nodes, ...views.flatMap(v => arr(v && v.nodes))].filter(Boolean);
+  const named = new Map([...views.flatMap(v => arr(v && v.containers)), ...cards].filter(Boolean).map(n => [n.id, n]));
+  const name = id => String((named.get(id) || {}).label || id), cardHow = new Map(cards.filter(n => how.has(n)).map(n => [n.id, how.get(n)]));
+  const lines = [...out.edges, ...views.flatMap(v => arr(v && v.edges).filter(e => e && typeof e === 'object'))];
+  const diffKeys = ([o, x]) => [...new Set([...Object.keys(o), ...Object.keys(x)])].filter(k => canon(o[k]) !== canon(x[k]));
+  views.forEach(v => { if (v && !V0.has(v.id)) said.push(`adds the view ${v.title || v.id}`); });
+  arr(A.views).forEach(o => { if (o && !V1.has(o.id)) said.push(`removes the view ${o.title || o.id}`); });
+  cards.forEach(n => { const h = how.get(n);
+    if (h === 'added') { const ins = lines.filter(e => e.to === n.id && how.get(e) === 'added').map(e => name(e.from)), outs = lines.filter(e => e.from === n.id && how.get(e) === 'added').map(e => name(e.to));
+      said.push(`adds ${name(n.id)}` + (ins.length === 1 && outs.length === 1 ? ` between ${ins[0]} and ${outs[0]}` : (ins.length ? `, from ${andList(ins)}` : '') + (outs.length ? `, to ${andList(outs)}` : ''))); }
+    if (h === 'removed') said.push(`removes ${name(n.id)}`);
+    if (h === 'changed') { const [o, x] = was.get(n), keys = diffKeys([o, x]), rest = keys.filter(k => k !== 'label');
+      said.push((keys.includes('label') ? `renames ${o.label || o.id} to ${x.label || x.id}` : `changes ${name(n.id)}`) + (rest.length ? ` (${rest.join(', ')})` : '')); } });
+  lines.forEach(e => { const h = how.get(e); if (!h || cardHow.get(e.from) === h && h !== 'changed' || cardHow.get(e.to) === h && h !== 'changed') return;
+    const ends = `${name(e.from)} to ${name(e.to)}`, lab = e.label ? ` (${e.label})` : '';
+    if (h === 'added') said.push(`adds a line from ${ends}${lab}`);
+    if (h === 'removed') said.push(`removes the line from ${ends}${lab}`);
+    if (h === 'changed') { const [o, x] = was.get(e);
+      said.push(`changes the line from ${ends} (${diffKeys([o, x]).map(k => k === 'label' ? `label ${o.label ?? '-'} → ${x.label ?? '-'}` : k).join(', ')})`); } });
+  moved.forEach(([verb, id, v]) => said.push(`${verb} ${name(id)} ${verb === 'puts' ? 'in' : 'out of'} the view ${v.title || v.id}`));
+
+  // the views that show a change: a card or line the diff marks, or a card it put in or took out
+  const changed = views.filter(v => v && (touched.has(v.id) || arr(v.nodeIds).some(id => cardHow.has(id)) || linesOf(out, v).some(e => how.has(e)))).map(v => v.id);
+  return { model: out, summary: said, views: changed };
+}
+
+/** The map against the traffic seen: a line that carries traffic but is not drawn comes in, dashed rose ("not drawn",
+ *  with its calls); a drawn line between two cards that traffic was seen at, with none of its own, fades. `observed`:
+ *  [{ from, to, count }], or a Jaeger or Tempo dependency list ([{ parent, child, callCount }], or { data: [...] }). A
+ *  service is a card by `options.match[service]`, else by id, else by label (case aside). Counts: lines that carried
+ *  traffic, came in undrawn, are idle, or could not be judged (an end traffic never reached), and services with no card,
+ *  each a count of model edges (a drawn line that stands for several fades only when all are idle); views: those that
+ *  show drift. */
+export function drift(model, observed, options = {}) {
+  const arr = x => (Array.isArray(x) ? x : []), out = structuredClone(model || {}), match = options.match || {};
+  const list = Array.isArray(observed) ? observed : arr(observed && observed.data);
+  const cards = [...arr(out.nodes), ...arr(out.views).flatMap(v => arr(v && v.nodes))].filter(n => n && n.id != null);
+  const ids = new Set(cards.map(n => String(n.id))), lower = new Map();
+  cards.forEach(n => [n.id, n.label].forEach(s => { if (s != null && !lower.has(String(s).toLowerCase())) lower.set(String(s).toLowerCase(), String(n.id)); }));
+  const cardOf = s => { s = String(s ?? ''); const id = Object.hasOwn(match, s) ? String(match[s]) : ids.has(s) ? s : lower.get(s.toLowerCase()); return ids.has(id) ? id : null; };
+  const seen = new Map(), live = new Set(), unmatched = new Set(); let counted = false;
+  list.forEach(o => { if (!o || typeof o !== 'object') return;
+    const f = o.from ?? o.parent, t = o.to ?? o.child, n = o.count ?? o.callCount, a = cardOf(f), b = cardOf(t);
+    if (a == null) unmatched.add(String(f)); if (b == null) unmatched.add(String(t));
+    if (a == null || b == null || a === b) return;
+    live.add(a); live.add(b);
+    if (n != null) { counted = true; if (!(+n > 0)) return; } // seen with no calls: both ends were watched, the line carried nothing
+    const k = a + '\n' + b, s = seen.get(k) || { a, b, n: 0 }; s.n += +n || 0; seen.set(k, s); });
+  const counts = { carried: 0, undrawn: 0, idle: 0, unknown: 0, unmatched: [...unmatched].sort() }, drawn = new Set();
+  const judge = e => { if (!e || typeof e !== 'object') return e; const k = e.from + '\n' + e.to;
+    if (seen.has(k)) { drawn.add(k); counts.carried++; return e; }
+    if (live.has(String(e.from)) && live.has(String(e.to))) { counts.idle++; return { ...e, style: 'faded', drift: 'idle' }; }
+    counts.unknown++; return e; };
+  out.edges = arr(out.edges).map(judge);
+  arr(out.views).forEach(v => { if (v && Array.isArray(v.edges)) v.edges = v.edges.map(judge); });
+  seen.forEach(({ a, b, n }, k) => { if (drawn.has(k)) return; counts.undrawn++;
+    const e = { id: `drift:${a}->${b}`, from: a, to: b, label: 'not drawn', ...(counted ? { sublabel: `${n.toLocaleString('en-US')} calls` } : {}), style: 'security', drift: 'undrawn' };
+    out.edges.push(e);
+    arr(out.views).forEach(v => { if (v && Array.isArray(v.edges) && arr(v.nodeIds).includes(a) && arr(v.nodeIds).includes(b)) v.edges.push(e.id); }); });
+  return { model: out, counts, views: arr(out.views).filter(v => v && linesOf(out, v).some(e => e.drift)).map(v => v.id) };
+}
+
 let INSTANT = false; // the page's own hooks (#check, #still, #shot) draw without animation
 const reducedMotion = () => INSTANT || (typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches);
 let SHEET = null;
@@ -1827,7 +2341,8 @@ export function render(container, model, options = {}) {
   // text is measured in the host's font (--um-sans); measure: false keeps the font-independent estimate
   const own = typeof options.measure === 'function' ? options.measure : null;
   let measure = options.measure === false ? null : own || hostMeasure(host), current = model;
-  let ctx = mapContext(model, { measure, kinds: !!P.kinds }); // kinds: the standalone page guesses line kinds from label words, for its legend
+  const expanded = {}; // per view: the cards unfolded in place (#71), in the order they unfolded; in this handle only, never in the model
+  let ctx = mapContext(model, { measure, kinds: !!P.kinds, expand: expanded }); // kinds: the standalone page guesses line kinds from label words, for its legend
   const root = host.attachShadow({ mode: 'open', delegatesFocus: true }); // host.focus() lands in the map (on the selected card)
   root.adoptedStyleSheets = [sheet()];
   root.innerHTML = `<div class="um-live" role="status" aria-live="polite"></div><div class="stage" tabindex="-1">
@@ -1879,10 +2394,11 @@ export function render(container, model, options = {}) {
     cam.setSvg(svg, geo.bounds);
     const ub = q('[data-z="up"]'); if (ub) ub.disabled = !upOf();
     if (options.minimap) buildMini();
-    if (!geo.hub && geo.nodes.length && geo.nodes.every(n => Number.isFinite(n.col) && Number.isFinite(n.row))) placed[vid] = Object.fromEntries(geo.nodes.map(n => [n.id, [n.col, n.row]]));
+    if (!geo.hub && geo.nodes.length && !(expanded[vid] || []).length && geo.nodes.every(n => Number.isFinite(n.col) && Number.isFinite(n.row))) placed[vid] = Object.fromEntries(geo.nodes.map(n => [n.id, [n.col, n.row]])); // unfolded: the places folded stay
     const had = sel; sel = null; tabKeys(); paint();
     more = [];
     if (had) emitSel();
+    endTrip(); drawMarks(); // a new picture: a tour or replay on the old one ends; the host's marks go on again (#63)
     if (P.onMount) P.onMount(inner);
   }
 
@@ -1892,7 +2408,7 @@ export function render(container, model, options = {}) {
   function clearOf(base) {
     if (!cam || !geo) return base;
     const [W, H] = cam.size(), key = JSON.stringify([W, H, base]); if (clear && clear.geo === geo && clear.key === key) return clear.sets;
-    const boxes = [...stage.querySelectorAll('.ctl, .minimap')].map(x => x.getBoundingClientRect()).filter(r => r.width && r.height);
+    const boxes = [...stage.querySelectorAll('.ctl, .minimap, .um-story')].map(x => x.getBoundingClientRect()).filter(r => r.width && r.height);
     let sets = base; // none shown, or no layout (a test DOM): as before
     if (boxes.length) {
       const S = stage.getBoundingClientRect(), top = Math.min(...boxes.map(r => r.top)) - S.top - 8, left = Math.min(...boxes.map(r => r.left)) - S.left - 8;
@@ -2064,6 +2580,35 @@ export function render(container, model, options = {}) {
     if (!stop && ctx.V[c]) go(c, { via: nid });
   }
   const up = () => { const p = upOf(); if (p) go(p); else status('Already at the top'); };
+  /* unfolding in place (#71): a stacked card opens into a box on this view (mapContext's unfold), and folds back. Off in
+     an editable map: an edit names the model's own views and boxes, and an unfolded box is neither. */
+  const unfoldBox = id => { const f = ((ctx.V[cur] || {}).containers || []).find(b => b && b.id === id); return f && f.unfolds ? f : null; };
+  const foldOf = id => { const bs = (ctx.V[cur] || {}).containers || []; let b = bs.filter(x => x && (x.nodeIds || []).includes(id)).pop(); // the unfolded box a card is in
+    for (let k = 0; b && k < 64; k++, b = bs.find(x => x && x.id === b.parent)) if (b.unfolds) return b.id; return null; };
+  function setUnfold(nid, on) { // true when the picture changed
+    const list = expanded[cur] || [];
+    if (E || dead || !cur || (on ? list.includes(nid) || !ctx.unfoldable(nid, cur) : !list.includes(nid))) return false;
+    expanded[cur] = on ? [...list, nid] : list.filter(x => x !== nid);
+    update(current, false, true);
+    if ((expanded[cur] || []).includes(nid) !== on) return false; // the model would not have it after all
+    const f = on && (geo.families || []).find(x => x.id === nid);
+    if (f) { cam.reveal({ x: f.x, y: f.y, w: f.w, h: f.h }); select({ type: 'container', id: nid }, { reveal: false }); }
+    else if (!on && geo.byId[nid]) select(nodeRef(nid));
+    say(`${nameOf(nid)} ${on ? 'unfolded here' : 'folded'}`);
+    return true;
+  }
+  function gesture(id, how) { // E, or Alt + click: a stacked card unfolds; an unfolded box, or a card in one, folds it
+    if (E || !id || !geo) return false;
+    const c = geo.byId[id] ? ctx.opensOf(id, cur) : null, on = !!c && (!ctx.V[c] || !!ctx.unfoldable(id, cur)), nid = on ? id : unfoldBox(id) ? id : foldOf(id);
+    if (!nid) return false;
+    let stop = false; // the host may take it, or load a view it has not yet and update() right here
+    emit('expand', { target: nodeRef(nid), view: ctx.opensOf(nid, cur), expanded: on, preventDefault() { stop = true; } });
+    if (stop || dead) return true;
+    if (!setUnfold(nid, on)) { if (on) status(ctx.V[ctx.opensOf(nid, cur)] ? 'Nothing more to show here' : 'Its inner view is not loaded yet'); return true; }
+    if (how === 'key') { const f = on && (geo.families || []).find(x => x.id === nid), inside = n => n.x >= f.x && n.y >= f.y && n.x + n.w <= f.x + f.w && n.y + n.h <= f.y + f.h;
+      const n0 = f ? geo.nodes.filter(inside).sort((a, b) => a.x - b.x || a.y - b.y)[0] : null; focusMap(n0 ? nodeRef(n0.id) : sel); } // keys go on inside, or on the card
+    return true;
+  }
   function flash(nid) { const g = svg.querySelector(`.node[data-id="${CSS.escape(nid)}"]`); if (!g) return; g.classList.add('flash'); later(() => g.classList.remove('flash'), 1400); }
   function setFlow(on) {
     stage.classList.toggle('flowing', on);
@@ -2075,6 +2620,7 @@ export function render(container, model, options = {}) {
   /* keys on the canvas; the page forwards the same keys when the focus is elsewhere */
   function key(e) {
     const k = e.key, g = e.target && e.target.closest && e.target.closest('.node');
+    if (story) { const r = storyKey(e); if (r != null) return r; } // a story's keys first (#69)
     if (E && editKey(e)) return true;
     if (e.altKey) return false;
     const lk = e.target && e.target.closest && e.target.closest('.line-key'), tk = e.target && e.target.closest && e.target.closest('.tab-key, .family [data-badge]');
@@ -2082,6 +2628,7 @@ export function render(container, model, options = {}) {
     if (k === 'Enter' && lk && geo.edges[+lk.dataset.i]) select(edgeRef(geo.edges[+lk.dataset.i]), { again: true }); // as a click on the line (#43)
     else if (k === 'Enter' && tk) { const fam = tk.closest('.family'), ref = badgeRef(tk.dataset.node, fam ? fam.dataset.family : null, +tk.dataset.badge); if (activate(ref, e)) select(ref); }
     else if (k === 'Enter' && card) { const ref = chipRef(card, +ck.dataset.chip); if (activate(ref, e)) select(ref); } // as a click on the chip
+    else if (k === 'e' || k === 'E') return gesture(g ? g.dataset.id : sel && (sel.type === 'node' || sel.type === 'container') ? sel.id : null, 'key'); // unfold here, or fold back (#71)
     else if (k === '+' || k === '=') cam.zoomAt(1.4, null, null, true);
     else if (k === '-' || k === '_') cam.zoomAt(1 / 1.4, null, null, true);
     else if (k === '0') cam.fit();
@@ -2283,6 +2830,8 @@ export function render(container, model, options = {}) {
     if (t.closest('.ctl, .minimap')) return;
     const g = t.closest('.node'), chip = t.closest('[data-chip]'), badge = t.closest('[data-badge]'), eg = t.closest('.edge-g, .e-lab'), fam = t.closest('.family');
     if (g && t.closest('.open-hint')) { if (e.detail <= 1) open(g.dataset.id); return; } // the ⤢ badge opens (a double-click on it opens once)
+    if (fam && t.closest('.fold-hint')) { if (e.detail <= 1) gesture(fam.dataset.family); return; } // an unfolded box's ⤡ tab folds it (#71)
+    if (g && e.altKey && !E && e.detail <= 1 && gesture(g.dataset.id)) return; // Alt + click: unfold the card here, or fold the box it is in
     let ref = null;
     if (g && badge) ref = badgeRef(g.dataset.id, null, +badge.dataset.badge);
     else if (g && chip) ref = chipRef(g, +chip.dataset.chip);
@@ -2298,7 +2847,7 @@ export function render(container, model, options = {}) {
     select(null);
     if (P.onBackground) P.onBackground();
   });
-  stage.addEventListener('dblclick', e => { const g = e.target.closest('.node'); if (!g) return; e.preventDefault(); if (e.target.closest('.open-hint')) return;
+  stage.addEventListener('dblclick', e => { const g = e.target.closest('.node'); if (!g) return; e.preventDefault(); if (e.target.closest('.open-hint') || (e.altKey && !E)) return; // Alt: its click unfolded
     if (can('rename') && sel && sel.type === 'node' && sel.id === g.dataset.id && e.target.closest('.n-label')) return rename(sel); // a selected card's name edits
     open(g.dataset.id); });
   stage.addEventListener('keydown', e => { if (e.defaultPrevented || e.metaKey || e.ctrlKey || (e.altKey && !E) || e.target.closest('input')) return; if (key(e)) { e.preventDefault(); e.stopPropagation(); } });
@@ -2318,6 +2867,7 @@ export function render(container, model, options = {}) {
   /* the picture as a file: CSS variables resolved into attributes so it stands alone. It is drawn at rest: no
      selection, hover, flow animation or edit handles, whatever the screen shows; the screen is left as it was. */
   function standalone(scale = 1, vid = cur, fontCSS = '') {
+    if (settle) settle(); // an export right after update() draws where things end up, not mid-ease
     if (!svg || !geo) return '';
     let s = svg, g = geo, off = null;
     if (vid !== cur) { // another view: drawn off screen, inside the shadow root so the same styles apply
@@ -2326,6 +2876,7 @@ export function render(container, model, options = {}) {
       off = document.createElement('div'); off.style.cssText = 'position:absolute;left:-100000px;top:0;width:10px;height:10px;overflow:hidden;pointer-events:none';
       off.innerHTML = c.markup; stage.parentNode.appendChild(off); s = off.querySelector('svg'); s.classList.add('map-svg'); g = c.g;
     }
+    if (off) drawMarks(s, g); // the host's marks, on another view too (#63)
     const s0 = sel, flowing = stage.classList.contains('flowing'), hov = [...svg.querySelectorAll('.hov')];
     sel = null; paint(); stage.classList.remove('flowing'); hov.forEach(x => x.classList.remove('hov')); stage.classList.add('um-still');
     const clone = s.cloneNode(true), b = g.bounds;
@@ -2337,7 +2888,7 @@ export function render(container, model, options = {}) {
       props.forEach(p => { const v = cs.getPropertyValue(p); if (v) d.style.setProperty(p, v); });
       if (cs.textTransform === 'uppercase' && !d.childElementCount) d.textContent = d.textContent.toUpperCase(); }); } // tab text, as drawn
     finally { stage.classList.remove('um-still'); hov.forEach(x => x.classList.add('hov')); if (flowing) stage.classList.add('flowing'); sel = s0; paint(); if (off) off.remove(); }
-    clone.querySelectorAll('title, .flowline, .um-edit, .um-ghost, .um-link, .keys, .um-key').forEach(t => t.remove());
+    clone.querySelectorAll('title, .flowline, .um-edit, .um-ghost, .um-link, .keys, .um-key, .um-trip').forEach(t => t.remove());
     clone.setAttribute('role', 'img'); clone.querySelectorAll('[tabindex], [aria-pressed]').forEach(t => ['tabindex', 'role', 'aria-pressed'].forEach(a => t.removeAttribute(a)));
     clone.setAttribute('viewBox', `${b.x} ${b.y} ${b.w} ${b.h}`); clone.setAttribute('width', b.w * scale); clone.setAttribute('height', b.h * scale);
     const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
@@ -2347,42 +2898,303 @@ export function render(container, model, options = {}) {
     return new XMLSerializer().serializeToString(clone);
   }
 
-  function update(model2, relayout = false) {
+  /* the time-lapse (#67): an update that redraws the view eases into it. Cards that moved glide from where they were; new
+     cards, and lines whose route changed, fade in; cards and lines that left fade out where they were, copied from the
+     picture before (as nothing that can be clicked, focused, found or exported). CSS on the new picture only: the
+     geometry is the update's own. Nothing moves under reduced motion. */
+  let settle = null; // ends an ease still running (before an export, or the next update)
+  function easeIn(oldGeo, oldSvg) {
+    if (settle) settle();
+    if (options.ease === false || reducedMotion() || !oldGeo || !oldSvg || !geo || !svg || oldSvg === svg) return;
+    const T = 600, moves = [], key = e => edgeRefIds(e).join(' ') || e.from + '>' + e.to, all = (s, q) => [...s.querySelectorAll(q)];
+    const was = new Map(oldGeo.nodes.map(n => [n.id, n])), now = new Set(geo.nodes.map(n => n.id));
+    const lines = new Map(oldGeo.edges.map((e, i) => [key(e), [e, i]])), kept = new Set(geo.edges.map(key));
+    geo.nodes.forEach(n => { const g = svg.querySelector(`.node[data-id="${CSS.escape(n.id)}"]`), o = was.get(n.id); if (!g) return;
+      if (!o) moves.push([g, 'opacity', '0', 0]);
+      else if (o.x !== n.x || o.y !== n.y) moves.push([g, 'transform', `translate(${o.x - n.x}px, ${o.y - n.y}px)`, 0]); });
+    geo.edges.forEach((e, i) => { const o = lines.get(key(e)); if (o && canon(o[0].pts) === canon(e.pts)) return;
+      all(svg, `.edge-g[data-i="${i}"], .e-lab[data-i="${i}"]`).forEach(x => moves.push([x, 'opacity', '0', T / 2])); });
+    const gone = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    gone.setAttribute('class', 'um-leaving'); gone.setAttribute('aria-hidden', 'true'); gone.style.pointerEvents = 'none';
+    const leave = x => { const c = x.cloneNode(true);
+      [c, ...c.querySelectorAll('*')].forEach(y => { ['tabindex', 'role', 'data-id', 'data-i', 'data-from', 'data-to', 'data-o', 'data-t', 'data-chip', 'data-badge'].forEach(a => y.removeAttribute(a)); y.classList.remove('node', 'edge-g', 'e-lab', 'sel', 'hot', 'hov'); });
+      gone.appendChild(c); };
+    oldGeo.nodes.forEach(n => { if (!now.has(n.id)) all(oldSvg, `.node[data-id="${CSS.escape(n.id)}"]`).forEach(leave); });
+    lines.forEach(([, i], k) => { if (!kept.has(k)) all(oldSvg, `.edge-g[data-i="${i}"], .e-lab[data-i="${i}"]`).forEach(leave); });
+    if (!moves.length && !gone.childNodes.length) return;
+    svg.appendChild(gone);
+    moves.forEach(([el, p, v]) => { el.style.transition = 'none'; el.style.setProperty(p, v); });
+    svg.getBoundingClientRect(); // the start, drawn: each change below is a transition from it
+    moves.forEach(([el, p, , d]) => { el.style.transition = `${p} ${T}ms ease ${d}ms`; el.style.removeProperty(p); });
+    gone.style.transition = `opacity ${T / 2}ms ease`; gone.style.opacity = '0';
+    const t = later(() => settle && settle(), T * 2);
+    settle = () => { clearTimeout(t); timers.delete(t); moves.forEach(([el]) => el.style.removeProperty('transition')); gone.remove(); settle = null; };
+  }
+
+  function update(model2, relayout = false, unfolding = false) { // unfolding: the same model, a card unfolded or folded
     if (dead) return;
     // an identical model: nothing to redraw, unless the host accepted a move or reorder that only changed a position
-    if (!relayout && !Object.keys(hints).length && !Object.keys(slotsH).length && JSON.stringify(model2) === JSON.stringify(current)) { addHints.length = 0; return; }
+    if (!relayout && !unfolding && !Object.keys(hints).length && !Object.keys(slotsH).length && JSON.stringify(model2) === JSON.stringify(current)) { addHints.length = 0; return; }
     const old = ctx, keys = {}, before = new Set(geo ? geo.nodes.map(n => n.id) : []), wantNew = selectNew;
     old.views.forEach(v => { keys[v.id] = relayout ? null : old.viewKey(v.id); });
     current = model2;
-    ctx = mapContext(withPlaces(model2), { measure, kinds: !!P.kinds, prev: options.stableLayout === false ? null : old.planCache });
+    ctx = mapContext(withPlaces(model2), { measure, kinds: !!P.kinds, prev: options.stableLayout === false ? null : old.planCache, expand: expanded });
+    Object.keys(expanded).forEach(v => { expanded[v] = ctx.unfolded[v] || []; }); // a card or inner view the model no longer has folds
     [hints, slotsH].forEach(o => Object.keys(o).forEach(k => delete o[k])); addHints.length = 0; selectNew = false;
     ctx.views.forEach(v => { const id = v.id; if (keys[id] == null || keys[id] !== ctx.viewKey(id)) return;
       if (id in old.planCache) ctx.planCache[id] = old.planCache[id];
       if (old.layoutCache[id]) ctx.layoutCache[id] = old.layoutCache[id];
-      if (old.geoCache[id]) ctx.geoCache[id] = old.geoCache[id]; });
+      if (old.geoCache[id] && JSON.stringify(old.brokenIn(id)) === JSON.stringify(ctx.brokenIn(id))) ctx.geoCache[id] = old.geoCache[id]; }); // the same rules broken (#70)
     if (!cur) return;
     if (!ctx.V[cur]) { const from = cur; mount(ctx.rootId); cam.set(startView()); cam.touched = false; emit('viewchange', { view: cur, from }); return; }
     if (ctx.geoCache[cur] && keys[cur] === ctx.viewKey(cur)) return; // this view's picture did not change
-    const keep = sel, keepMore = more, touched = cam.touched;
+    const keep = sel, keepMore = more, touched = cam.touched, prev = [geo, svg];
     mount(cur);
     if (touched) cam.set({}); else cam.set(startView());
     cam.touched = touched;
     const fresh = geo.nodes.filter(n => !before.has(n.id));
     if (wantNew && fresh.length === 1) select(nodeRef(fresh[0].id), { reveal: false });
     else if (keep && exists(keep)) { sel = keep; more = keep.type === 'node' ? keepMore.filter(id => geo.byId[id]) : []; paint(); emitSel(); }
+    if (!relayout) easeIn(...prev); // a font that came in late moves nothing on purpose: no ease
   }
 
   function destroy() {
     if (dead) return;
-    dead = true; if (ro) ro.disconnect(); cancelAnimationFrame(rz);
+    dead = true; if (ro) ro.disconnect(); cancelAnimationFrame(rz); stopStory();
     timers.forEach(clearTimeout); timers.clear();
     if (cam) cam.stopAnimation();
     host.remove();
     Object.keys(subs).forEach(k => delete subs[k]);
   }
 
-  const inner = { ctx: () => ctx, geo: () => geo, cam: () => cam, svg: () => svg, stage, host, go, open, up, flash, setFlow, pause, key, startView, standalone,
-    select, busy: () => busy, flowing: () => stage.classList.contains('flowing'), view: () => cur };
+  /* ---------- marks: overlay(), highlight(), tour() and replay() (#62, #63, #65) ----------
+     The host's marks, drawn over the picture without touching the model: named layers, stacked in the order first set.
+     Each mount draws them again, so they survive update() and setView(); a card or line the view doesn't show is ignored.
+     toSVG() and toPNG() draw them too, at rest: they are the host's, like the model (the selection and hover are not). */
+  const layers = new Map(), DIM = .2, clamp01 = x => Math.min(1, Math.max(0, +x || 0));
+  // a drawn line that stands for several edges takes the strongest of their marks: a pulsing one, then the most lit, then the fastest
+  const strongest = ms => ms.filter(Boolean).sort((a, b) => (!!b.pulse - !!a.pulse) || ((b.level ?? 1) - (a.level ?? 1)) || ((b.speed ?? 1) - (a.speed ?? 1)))[0];
+  function markOf(get) { // one card's or line's mark over every layer: each property from the latest layer that sets it, the lowest level
+    let out = null;
+    layers.forEach(L => { const m = get(L); if (!m && !L.dim) return; out ||= { level: 1 };
+      if (m) for (const k in m) if (m[k] != null && k !== 'level') out[k] = m[k];
+      out.level = Math.min(out.level, m ? clamp01(m.level ?? 1) : DIM); });
+    return out;
+  }
+  const longest = pts => pts.slice(1).reduce((m, p, k) => Math.abs(p[0] - pts[k][0]) + Math.abs(p[1] - pts[k][1]) > Math.abs(m[1][0] - m[0][0]) + Math.abs(m[1][1] - m[0][1]) ? [pts[k], p] : m, [pts[0], pts[1]]);
+  function drawMarks(s = svg, g = geo) {
+    if (!s || !g) return;
+    s.querySelectorAll('.um-rings, .um-marks, .um-glow').forEach(x => x.remove());
+    s.querySelectorAll('.node[opacity], .edge-g[opacity], .e-lab[opacity]').forEach(x => x.removeAttribute('opacity'));
+    s.querySelectorAll('.edge[style], .flowline[style]').forEach(x => x.removeAttribute('style'));
+    s.querySelectorAll('.node[aria-description]').forEach(x => x.removeAttribute('aria-description'));
+    if (s === svg) stage.classList.toggle('um-lit', [...layers.values()].some(L => L.dim));
+    if (!layers.size) return;
+    const tone = t => 'var(--um-' + String(t || 'accent').replace(/[^\w-]/g, '') + ')', op = m => m.level < 1 ? ` opacity="${m.level}"` : '';
+    const cards = Object.fromEntries([...s.querySelectorAll('.node')].map(x => [x.dataset.id, x]));
+    let under = '', over = '';
+    g.nodes.forEach(n => { const m = markOf(L => (L.nodes || {})[n.id]), el = cards[n.id]; if (!m || !el) return;
+      if (m.level < 1) el.setAttribute('opacity', m.level);
+      if (m.tone || m.pulse) under += `<g${op(m)}><rect x="${n.x - 5}" y="${n.y - 5}" width="${n.w + 10}" height="${n.h + 10}" rx="14" class="um-ring${m.pulse ? ' um-pulse' : ''}" stroke="${tone(m.tone)}"/></g>`;
+      const b = m.badge == null ? null : badgesOf({ badges: [m.badge] })[0]; if (!b) return; // a tab after the card's own
+      const x = mapTabs(n).reduce((a, t) => a + t.w + 4, n.x + 12), w = b.text.toUpperCase().length * 6.4 + 10;
+      over += `<g class="um-tab"${op(m)}><rect x="${x}" y="${n.y - 8}" width="${w}" height="15" rx="4" fill="${toneOf(b)}"/><text x="${x + w / 2}" y="${n.y + 3}" text-anchor="middle" class="tab-tx">${esc(b.text)}</text></g>`;
+      el.setAttribute('aria-description', b.text); });
+    g.edges.forEach((e, i) => { const m = markOf(L => strongest(edgeRefIds(e).map(x => (L.edges || {})[x]))), eg = s.querySelector(`.edge-g[data-i="${i}"]`); if (!m || !eg) return;
+      const path = eg.querySelector('.edge'), flow = eg.querySelector('.flowline');
+      if (m.level < 1) [eg, s.querySelector(`.e-lab[data-i="${i}"]`)].forEach(x => x && x.setAttribute('opacity', m.level));
+      if (m.tone || m.pulse) path.insertAdjacentHTML('beforebegin', `<path d="${path.getAttribute('d')}" class="um-glow${m.pulse ? ' um-pulse' : ''}" stroke="${tone(m.tone)}"/>`);
+      if (m.dash) path.setAttribute('style', 'stroke-dasharray: 7 5');
+      if (m.speed != null && flow) flow.setAttribute('style', +m.speed > 0 ? `animation-duration: ${(2.4 / m.speed).toFixed(2)}s` : 'animation: none; opacity: 0');
+      if (m.label == null || m.label === '') return;
+      // ponytail: the label sits under the line's own (else on its longest run) with no room kept for it, so it may cover a neighbour's
+      const t = String(m.label), w = sansW(t, 10, .92) + 14, L = e.lbl, [a, b] = L ? [] : longest(e.pts);
+      const x = L ? L.x + L.w / 2 : (a[0] + b[0]) / 2, y = L ? L.y + L.h + 2 : (a[1] + b[1]) / 2 - 8;
+      over += `<g class="um-lab"${op(m)}><rect x="${x - w / 2}" y="${y}" width="${w}" height="16" rx="8"${m.tone ? ` style="stroke: ${tone(m.tone)}"` : ''}/><text x="${x}" y="${y + 11.5}" text-anchor="middle">${esc(t)}</text></g>`; });
+    const cardsG = s.querySelector('.nodes');
+    if (under && cardsG) cardsG.insertAdjacentHTML('beforebegin', `<g class="um-rings" aria-hidden="true">${under}</g>`);
+    if (over) s.insertAdjacentHTML('beforeend', `<g class="um-marks" aria-hidden="true">${over}</g>`);
+  }
+  function overlay(name, layer) {
+    if (dead || name == null) return;
+    if (layer == null) layers.delete(String(name)); else layers.set(String(name), layer); // a Map keeps the order first set
+    drawMarks();
+  }
+  /* the 'highlight' layer: these cards and lines lit, the rest dimmed; a Ref's level (0 to 1), else its distance, fades it */
+  function highlight(refs) {
+    if (refs == null) return overlay('highlight', null);
+    const L = { nodes: {}, edges: {}, dim: true }, lv = r => clamp01(r.level ?? (r.distance > 0 ? Math.max(.45, 1 - .15 * r.distance) : 1));
+    [].concat(refs).forEach(r => { if (!r) return; const id = r.type === 'node' ? r.id : r.node; // a chip or badge: its card
+      if (id != null) L.nodes[id] = { level: Math.max(lv(r), (L.nodes[id] || {}).level || 0) };
+      else if (r.type === 'edge') (r.ids || []).forEach(x => { L.edges[x] = { level: Math.max(lv(r), (L.edges[x] || {}).level || 0) }; }); });
+    overlay('highlight', L);
+  }
+  /* a dot that rides the map: a tour along a path the host names, or a trace replayed. One at a time; a new picture of the
+     view (setView, an update that redraws it) ends it, as does destroy() */
+  let trip = null;
+  function endTrip(played = false) { const t = trip; if (!t) return; trip = null; cancelAnimationFrame(t.raf); if (t.dot) t.dot.remove(); t.end(played); }
+  function startTrip(step, end) { // step(ms played, pauses left out) says whether to go on
+    endTrip();
+    const t = { raf: 0, dot: null, paused: false, at: 0, last: performance.now(), end }; trip = t;
+    const frame = now => { if (trip !== t) return; if (dead) return endTrip(); if (!t.paused) t.at += now - t.last; t.last = now;
+      if (step(t.at)) t.raf = requestAnimationFrame(frame); else endTrip(true); };
+    t.raf = requestAnimationFrame(frame);
+    return t;
+  }
+  const lineBetween = (a, b) => { let i = geo.edges.findIndex(e => e.from === a && e.to === b); if (i < 0) i = geo.edges.findIndex(e => e.from === b && e.to === a); // either way
+    return i < 0 ? null : { i, pts: geo.edges[i].from === a ? geo.edges[i].pts : [...geo.edges[i].pts].reverse() }; };
+  const lenOf = pts => pts.slice(1).reduce((s, p, k) => s + Math.hypot(p[0] - pts[k][0], p[1] - pts[k][1]), 0);
+  const along = (pts, d) => { for (let k = 1; k < pts.length; k++) { const a = pts[k - 1], b = pts[k], l = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (d <= l || k === pts.length - 1) { const f = l ? Math.min(1, d / l) : 1; return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f]; } d -= l; } return pts[0]; };
+  /* tour(path): the dot rides the line between each pair of cards in turn, through each card to its next line, and each
+     card it reaches flashes; where no line joins two cards it skips to the next. Resolves true when it reaches the end. */
+  function tour(path, o = {}) {
+    endTrip();
+    if (dead || !geo || path == null) return Promise.resolve(false);
+    const ids = [].concat(path).map(String).filter(id => geo.byId[id]), legs = [];
+    for (let k = 0; k + 1 < ids.length; k++) { const r = lineBetween(ids[k], ids[k + 1]); if (!r) continue;
+      const prev = legs[legs.length - 1], n = geo.byId[ids[k]];
+      const pts = prev && prev.to === ids[k] ? [prev.pts[prev.pts.length - 1], [n.x + n.w / 2, n.y + n.h / 2], ...r.pts] : r.pts;
+      legs.push({ pts, to: ids[k + 1], len: lenOf(pts) }); }
+    if (!legs.length || reducedMotion()) return Promise.resolve(legs.length > 0);
+    const speed = Math.max(20, +o.speed || 240); // map units a second
+    svg.insertAdjacentHTML('beforeend', '<g class="um-trip" aria-hidden="true"><circle r="5.5" class="tour-dot"/></g>');
+    const g = svg.lastElementChild, dot = g.firstElementChild; let leg = 0, base = 0;
+    return new Promise(res => { startTrip(ms => { const d = ms * speed / 1000;
+      while (leg < legs.length && d - base >= legs[leg].len) { base += legs[leg].len; flash(legs[leg].to); leg++; }
+      if (leg >= legs.length) return false;
+      const [x, y] = along(legs[leg].pts, d - base); dot.setAttribute('cx', x); dot.setAttribute('cy', y); return true; }, res).dot = g; });
+  }
+  /* replay(spans): each call from one card to another (a span and its parent's) runs along their line at the trace's relative
+     time, the whole trace in `duration` ms; the line glows while the call lasts and keeps its duration as a label */
+  function replay(spans, o = {}) {
+    endTrip(); overlay('replay', null);
+    const list = [].concat(spans || []).filter(s => s && Number.isFinite(+s.start) && Number.isFinite(+s.end));
+    const byId = new Map(list.map(s => [String(s.id), s])), match = o.match || {}, low = x => String(x ?? '').trim().toLowerCase();
+    const cardOf = svc => { if (svc == null || !geo) return null; if (match[svc] != null) return geo.byId[match[svc]] ? String(match[svc]) : null;
+      if (geo.byId[svc]) return String(svc); const n = geo.nodes.find(x => low(x.label) === low(svc)); return n ? n.id : null; };
+    let skipped = 0, t = null, done; const hops = [];
+    list.forEach(s => { const to = cardOf(s.service); if (!to) return skipped++;
+      const p = s.parent != null ? byId.get(String(s.parent)) : null, from = p && cardOf(p.service);
+      if (!from || from === to) return; // a root span, a caller off the view, or work inside one card: no hop
+      const r = lineBetween(from, to); if (!r) return skipped++; // a call the view draws no line for
+      hops.push({ ...r, ids: edgeRefIds(geo.edges[r.i]), at: +s.start, dur: +s.end - +s.start, to, len: lenOf(r.pts) }); });
+    const ctl = { hops: hops.length, skipped, done: new Promise(r => { done = r; }),
+      pause() { if (t && trip === t) t.paused = true; }, resume() { if (t && trip === t) t.paused = false; },
+      stop() { if (t && trip === t) endTrip(); else overlay('replay', null); } };
+    const ms = x => x >= 1000 ? `${+(x / 1000).toFixed(x >= 1e4 ? 0 : 1)} s` : `${x >= 10 ? Math.round(x) : +x.toFixed(1)} ms`, marks = {};
+    // ponytail: two calls at once on one line share its mark; the one that ends first takes the glow off
+    const show = (h, on) => { h.ids.forEach(x => { marks[x] = on ? { label: ms(h.dur), tone: 'accent', pulse: true } : { label: ms(h.dur) }; }); overlay('replay', { edges: { ...marks } }); };
+    if (!hops.length || reducedMotion()) { hops.forEach(h => show(h, false)); done(hops.length > 0); return ctl; }
+    const t0 = Math.min(...list.map(s => +s.start)), k = (+o.duration || 6000) / Math.max(1e-6, Math.max(...list.map(s => +s.end)) - t0);
+    hops.forEach(h => { h.start = (h.at - t0) * k; h.end = h.start + h.dur * k; h.travel = Math.min(1200, Math.max(350, h.dur * k)); });
+    const total = Math.max(...hops.map(h => Math.max(h.end, h.start + h.travel)));
+    svg.insertAdjacentHTML('beforeend', '<g class="um-trip" aria-hidden="true"></g>'); const g = svg.lastElementChild;
+    t = startTrip(now => { hops.forEach(h => {
+      if (!h.on && now >= h.start) { h.on = true; show(h, true); g.insertAdjacentHTML('beforeend', '<circle r="4.5" class="tour-dot"/>'); h.dot = g.lastElementChild; }
+      if (h.dot) { const f = (now - h.start) / h.travel; if (f >= 1) { h.dot.remove(); h.dot = null; flash(h.to); } else { const [x, y] = along(h.pts, f * h.len); h.dot.setAttribute('cx', x); h.dot.setAttribute('cy', y); } }
+      if (h.on && !h.off && now >= h.end) { h.off = true; show(h, false); } });
+      return now < total; }, played => { if (!played) overlay('replay', null); done(played); });
+    t.dot = g;
+    return ctl;
+  }
+
+  /* ---------- stories (#69): the model's narrated walk-throughs, played step by step ----------
+     A step sets the whole picture: its view, camera, selection, highlight and caption (what it leaves out is cleared),
+     then plays its tour. Playing goes on by itself after each step's duration; the caption bar and the keys (← → PageUp
+     PageDown, Esc) step through and stop it. One story at a time. */
+  let story = null;
+  // a step's card or line: a string names a card of the view, else a line by its id (the drawn line that has it); an
+  // object is a Ref already
+  const stepRef = x => typeof x !== 'string' ? (x && typeof x === 'object' ? x : null) : geo.byId[x] ? nodeRef(x)
+    : (e => e ? edgeRef(e) : null)(geo.edges.find(e => edgeRefIds(e).includes(x)));
+  function stepLit(list) { // highlight: what it names, and every line between two cards it names
+    const refs = [].concat(list || []).map(stepRef).filter(Boolean), ids = new Set(refs.filter(r => r.type === 'node').map(r => r.id));
+    geo.edges.forEach(e => { if (ids.has(e.from) && ids.has(e.to)) refs.push(edgeRef(e)); });
+    return refs.length ? refs : null;
+  }
+  function storyBar(st) {
+    let bar = stage.querySelector('.um-story');
+    if (!bar) {
+      stage.insertAdjacentHTML('beforeend', `<div class="um-story" role="group"><div class="um-cap"><span class="um-st"></span><p></p></div><div class="um-sb">
+        <button data-s="prev" title="Previous step (←)" aria-label="Previous step">‹</button><button data-s="play"></button><button data-s="next" title="Next step (→)"></button><button data-s="stop" title="Close (Esc)" aria-label="Close the story">✕</button></div></div>`);
+      bar = stage.lastElementChild; clear = null; // the fit keeps the cards off the bar as it does off the controls
+      bar.addEventListener('dblclick', e => e.stopPropagation()); // two quick clicks on › are two steps, not a zoom
+      bar.addEventListener('click', e => { e.stopPropagation(); const s = story, b = e.target.closest('button'); if (!s || !b) return;
+        ({ prev: () => stepStory(-1), next: () => stepStory(1), stop: () => stopStory(), play: () => s.auto ? s.ctl.pause() : s.ctl.resume() })[b.dataset.s](); });
+    }
+    const k = st.at, n = st.steps.length, b = s => bar.querySelector(`[data-s="${s}"]`);
+    bar.setAttribute('aria-label', 'Story: ' + (st.s.title || st.s.id));
+    bar.querySelector('.um-st').textContent = `${st.s.title || st.s.id} · ${k + 1} / ${n}`;
+    bar.querySelector('p').textContent = (st.steps[k] || {}).caption || '';
+    b('prev').disabled = k <= 0;
+    b('play').textContent = st.auto ? '❚❚' : '▶'; b('play').setAttribute('aria-label', st.auto ? 'Pause' : 'Play'); b('play').title = st.auto ? 'Pause' : 'Play';
+    b('next').textContent = k + 1 < n ? '›' : '✓'; b('next').setAttribute('aria-label', k + 1 < n ? 'Next step' : 'Finish the story');
+  }
+  async function showStep(st, k) {
+    const seq = ++st.seq, step = st.steps[k] || {}, live = () => story === st && st.seq === seq && !dead;
+    st.at = k; clearTimeout(st.timer); tour(null); storyBar(st);
+    emit('story', { story: st.s.id, step: k, steps: st.steps.length }); // before the step's own select and viewchange
+    while (busy && live()) await new Promise(r => setTimeout(r, 30)); // a move the user started: let it land first
+    if (!live()) return;
+    if (step.view !== cur && ctx.V[step.view]) await go(step.view);
+    if (!live()) return;
+    const c = step.camera && typeof step.camera === 'object' ? step.camera : null, n = c && c.card != null ? geo.byId[c.card] : null;
+    const to = n ? { cx: n.x + n.w / 2, cy: n.y + n.h / 2, k: +c.zoom || 1.5 }
+      : c && Number.isFinite(+c.x) && Number.isFinite(+c.y) ? { cx: +c.x, cy: +c.y, k: +c.zoom || cam.s.k } : startView(); // 'fit', or none
+    const moved = cam.animate(to); cam.touched = !!(n || (c && Number.isFinite(+c.x)));
+    select(step.select == null ? null : stepRef(step.select), { reveal: false });
+    highlight(stepLit(step.highlight));
+    say(`Step ${k + 1} of ${st.steps.length}${step.caption ? ': ' + step.caption : ''}`); // after select(), which says what it selected
+    await moved;
+    if (!live()) return;
+    st.toured = step.tour ? tour(step.tour) : Promise.resolve(true);
+    arm(st);
+  }
+  function arm(st) { // playing: the next step once this one's duration is up and its tour has reached its end
+    clearTimeout(st.timer);
+    if (!st.auto || story !== st) return;
+    const seq = st.seq, dur = Math.max(500, +(st.steps[st.at] || {}).duration || 4000); // reading time: not cut by reduced motion
+    Promise.all([st.toured, new Promise(r => { st.timer = later(r, dur); })]).then(() => { if (story === st && st.seq === seq && st.auto) stepStory(1); });
+  }
+  function stepStory(d) {
+    const st = story; if (!st) return;
+    const k = st.at + d;
+    if (k >= st.steps.length) return stopStory(true); // past the last step: the story has been told
+    if (k >= 0) showStep(st, k);
+  }
+  function stopStory(told = false) {
+    const st = story; if (!st) return;
+    story = null; clearTimeout(st.timer); tour(null); highlight(null);
+    const bar = stage.querySelector('.um-story'); if (bar) { bar.remove(); clear = null; }
+    if (!dead) { say(told ? 'End of the story' : 'Story closed'); emit('story', { story: st.s.id, step: null, steps: st.steps.length }); }
+    st.end(told);
+  }
+  function storyKey(e) { // null: not a story's key; on the bar's own buttons, Enter and Space press them
+    const k = e.key;
+    if ((k === 'Enter' || k === ' ') && e.composedPath().some(x => x.classList && x.classList.contains('um-story'))) return false;
+    const d = { ArrowLeft: -1, PageUp: -1, ArrowRight: 1, PageDown: 1 }[k];
+    if (d) { stepStory(d); return true; }
+    if (k === 'Escape') { stopStory(); return true; }
+    return null;
+  }
+  function play(id, o = {}) {
+    stopStory();
+    const s = (current.stories || []).find(x => x && x.id === id), steps = s && Array.isArray(s.steps) ? s.steps.filter(x => x && typeof x === 'object') : [];
+    if (dead || !geo || !steps.length) return null;
+    let end; const st = { s, steps, at: -1, seq: 0, timer: 0, auto: o.auto !== false, toured: Promise.resolve(true), done: new Promise(r => { end = r; }) };
+    st.end = end;
+    st.ctl = { get story() { return s.id; }, get step() { return st.at; }, get steps() { return steps.length; }, get playing() { return st.auto && story === st; },
+      next() { if (story === st) stepStory(1); }, prev() { if (story === st) stepStory(-1); }, stop() { if (story === st) stopStory(); },
+      pause() { if (story !== st) return; st.auto = false; clearTimeout(st.timer); storyBar(st); },
+      resume() { if (story !== st || st.auto) return; st.auto = true; storyBar(st); arm(st); }, done: st.done };
+    story = st;
+    showStep(st, Math.max(0, Math.min(steps.length - 1, Math.floor(+o.step) || 0)));
+    return st.ctl;
+  }
+
+  const inner = { ctx: () => ctx, geo: () => geo, cam: () => cam, svg: () => svg, stage, host, go, open, up, flash, setFlow, pause, key, startView, standalone, play,
+    select, busy: () => busy, flowing: () => stage.classList.contains('flowing'), view: () => cur, unfold: gesture };
   const first = () => {
     if (dead) return;
     const v0 = ctx.V[options.view] ? options.view : ctx.rootId;
@@ -2403,11 +3215,19 @@ export function render(container, model, options = {}) {
     toSVG: (o = {}) => dead ? '' : standalone(o.scale ?? 1, o.view ?? cur, o.fontCSS),
     toPNG: (o = {}) => dead ? Promise.resolve(null) : pngOf(standalone(o.scale ?? 2, o.view ?? cur, o.fontCSS)),
     focus: ref => { if (!dead) focusMap(ref); },
+    expand: id => setUnfold(id, true), // unfold a stacked card of the view shown in place (#71): true when it did
+    collapse: id => setUnfold(id, false),
+    get expanded() { return [...(expanded[cur] || [])]; },
     on(type, fn) { (subs[type] ||= []).push(fn); if (type === 'click') tabKeys();
       return () => { subs[type] = (subs[type] || []).filter(f => f !== fn); if (type === 'click' && !dead) tabKeys(); }; },
     get view() { return cur; },
     get selection() { return sel; },
     get selected() { return picked(); },
+    overlay: (name, layer) => overlay(name, layer),
+    highlight: refs => highlight(refs),
+    tour: (path, o) => tour(path, o),
+    replay: (spans, o) => replay(spans, o),
+    play: (id, o) => play(id, o),
     destroy,
     [INNER]: inner,
   };
@@ -2437,6 +3257,74 @@ export function history(model, limit = 100) {
   };
 }
 
+/* ---------- paths(), reach(), describe() and otlpSpans(): a view's lines walked and put in words, with no DOM (#62, #64, #65) ----------
+   A line runs from → to as the model gives it. Each result is a list of Refs a host can hand to highlight(); a line's Ref
+   names one model edge (a drawn line that stands for several takes the strongest mark among them). */
+function lineGraph(model, viewId) {
+  const ctx = mapContext(model), v = ctx.V[viewId];
+  if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  return { ctx, v, ids: (v.nodeIds || []).filter(i => ctx.N[i]), edges: ctx.viewEdges(v).filter(e => e.from !== e.to) };
+}
+const walkFrom = (edges, start, back) => { const seen = new Set([start]); // breadth first along lines (back: against them)
+  for (let q = [start]; q.length;) { const u = q.shift(); edges.forEach(e => { const [a, b] = back ? [e.to, e.from] : [e.from, e.to]; if (a === u && !seen.has(b)) { seen.add(b); q.push(b); } }); }
+  return seen; };
+
+/** Every card and line on a path from one card to another, following lines forward: the cards both reachable from `from`
+ *  and leading to `to`, and the lines between them. [] when no path joins them. */
+export function paths(model, viewId, from, to) {
+  const { ids, edges } = lineGraph(model, viewId);
+  if (!ids.includes(from) || !ids.includes(to)) return [];
+  const F = walkFrom(edges, from), B = walkFrom(edges, to, true), on = id => F.has(id) && B.has(id);
+  if (!F.has(to)) return [];
+  return [...ids.filter(on).map(id => ({ type: 'node', id, view: viewId })), ...edges.filter(e => on(e.from) && on(e.to)).map(e => ({ type: 'edge', ids: [e._id], view: viewId }))];
+}
+
+/** Everything a card's lines lead to (forward), or everything that leads to it (`backward`: for calls, who depends on it),
+ *  each with its distance in lines; `depth` stops the walk that many lines out. The card itself is first, at 0. */
+export function reach(model, viewId, from, options = {}) {
+  const { ids, edges } = lineGraph(model, viewId), back = !!options.backward, depth = options.depth ?? Infinity;
+  if (!ids.includes(from)) return [];
+  const ends = e => back ? [e.to, e.from] : [e.from, e.to], dist = new Map([[from, 0]]);
+  for (let q = [from]; q.length;) { const u = q.shift(), d = dist.get(u); if (d >= depth) continue;
+    edges.forEach(e => { const [a, b] = ends(e); if (a === u && !dist.has(b)) { dist.set(b, d + 1); q.push(b); } }); }
+  const near = (x, y) => x.distance - y.distance; // a stable sort: the view's order among equals
+  return [...ids.filter(id => dist.has(id)).map(id => ({ type: 'node', id, view: viewId, distance: dist.get(id) })).sort(near),
+    ...edges.filter(e => { const [a, b] = ends(e); return dist.has(a) && dist.has(b) && dist.get(a) < depth; })
+      .map(e => ({ type: 'edge', ids: [e._id], view: viewId, distance: dist.get(ends(e)[0]) + 1 })).sort(near)];
+}
+
+/** A view in plain sentences: its cards and their kinds, its boxes, what each card's lines do (in run order on a sequence
+ *  view), and the cards with no line. The same model gives the same words: a text alternative, docs, or an AI's context. */
+export function describe(model, viewId) {
+  const { ctx, v, ids, edges } = lineGraph(model, viewId), boxes = (v.containers || []).filter(c => c && c.id);
+  const name = id => ctx.N[id] ? ctx.nodeIn(id, viewId).label || id : (boxes.find(c => c.id === id) || {}).label || id;
+  const list = xs => xs.length < 3 ? xs.join(' and ') : xs.slice(0, -1).join(', ') + ' and ' + xs[xs.length - 1];
+  const count = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`;
+  // a line's kind as its colour says it: the one it names, else a hook's line guards and a board's is state (no guesses from words)
+  const kind = e => WIRE_KINDS.includes(e.kind) ? e.kind : (ctx.N[e.from] || {}).kind === 'hook' ? 'guard' : [e.from, e.to].some(i => (ctx.N[i] || {}).kind === 'board') ? 'state' : 'calls';
+  const VERB = { calls: 'calls', feeds: 'feeds', triggers: 'triggers', state: 'reads or writes', guard: 'guards' };
+  const what = e => { const t = [e.label && `"${e.label}"`, e.sublabel].filter(Boolean); return t.length ? ` (${t.join(', ')})` : ''; };
+  const out = [`${v.title || v.id}: ${count(ids.length, 'card')} and ${count(edges.length, 'line')}.`];
+  if (ids.length) out.push(`Cards: ${ids.map(id => `${name(id)} (${KIND[kindOf(ctx.nodeIn(id, viewId).kind, true)][1]})`).join(', ')}.`);
+  boxes.forEach(c => { const ins = (c.nodeIds || []).filter(i => ids.includes(i)); if (ins.length) out.push(`${name(c.id)} holds ${list(ins.map(name))}.`); });
+  if (v.render === 'sequence') edges.forEach((e, i) => out.push(`Step ${i + 1}: ${name(e.from)} ${VERB[kind(e)]} ${name(e.to)}${what(e)}.`));
+  else [...ids, ...boxes.map(c => c.id)].forEach(id => { const outs = edges.filter(e => e.from === id); if (!outs.length) return;
+    out.push(`${name(id)} ${[...new Set(outs.map(kind))].map(k => `${VERB[k]} ${list(outs.filter(e => kind(e) === k).map(e => name(e.to) + what(e)))}`).join('; ')}.`); });
+  const alone = ids.filter(id => !edges.some(e => e.from === id || e.to === id));
+  if (alone.length) out.push(`Not connected here: ${list(alone.map(name))}.`);
+  return out.join('\n');
+}
+
+/** The spans of an OpenTelemetry trace exported as OTLP JSON, as replay() takes them: { id, parent, service, name, start,
+ *  end }, times in milliseconds. */
+export function otlpSpans(data) {
+  const out = [], attr = (list, k) => { const v = ((list || []).find(a => a && a.key === k) || {}).value || {}; return v.stringValue ?? v.intValue ?? null; };
+  ((data && data.resourceSpans) || []).forEach(rs => { const service = attr(rs.resource && rs.resource.attributes, 'service.name');
+    (rs.scopeSpans || rs.instrumentationLibrarySpans || []).forEach(ss => (ss.spans || []).forEach(s => out.push({ id: s.spanId, parent: s.parentSpanId || null,
+      service, name: s.name, start: Number(s.startTimeUnixNano) / 1e6, end: Number(s.endTimeUnixNano) / 1e6 }))); });
+  return out;
+}
+
 export function mountPage(container, model, options = {}) {
   const Q = options.params || new URLSearchParams();
   if (options.instant) INSTANT = true;
@@ -2473,9 +3361,11 @@ export function mountPage(container, model, options = {}) {
       <span class="mbrand"><i></i><span>${esc(D.title || 'Map')}</span></span>
       <nav class="crumbs" id="m-crumbs" aria-label="Breadcrumb"></nav>
       <button class="findbtn" id="m-find" type="button" aria-label="Search nodes and views (${modK})"><span aria-hidden="true">⌕</span><span class="ft">Find a node or view…</span><span class="kbd">${modK}</span></button>
-      <button class="ibtn" id="m-theme" title="Light / dark" aria-label="Toggle theme">◐</button>
+      <button class="ibtn" id="m-theme" title="Light / dark" aria-label="Toggle theme">◐</button>${(D.stories || []).length ? `
+      <div class="menu"><button class="ibtn txt" id="m-stories" aria-haspopup="true" aria-expanded="false" title="Stories: walk-throughs of this map">▶ Stories</button>
+        <div class="menu-pop" id="m-stories-pop" hidden>${D.stories.map(s => `<button data-story="${esc(s && s.id)}">${esc((s && (s.title || s.id)) || '')}</button>`).join('')}</div></div>` : ''}
       <div class="menu"><button class="pbtn" id="m-export" aria-haspopup="true" aria-expanded="false">Export ▾</button>
-        <div class="menu-pop" id="m-export-pop" hidden><button data-x="svg">SVG · this view</button><button data-x="png">PNG · this view (2×)</button><button data-x="link">Copy link to view</button><hr><button data-x="json">Map model (JSON)</button></div></div>
+        <div class="menu-pop" id="m-export-pop" hidden><button data-x="svg">SVG · this view</button><button data-x="png">PNG · this view (2×)</button><button data-x="link">Copy link to view</button><hr><button data-x="json">Map model (JSON)</button><button data-x="record">Record a story…</button></div></div>
       <button class="ibtn" id="m-pause" type="button" title="Pause" aria-label="Pause" aria-pressed="false">❚❚</button>
       <button class="ibtn" id="m-help" title="Keys (?)" aria-label="Keyboard shortcuts" aria-haspopup="true" aria-expanded="false">?</button>
     </header>
@@ -2491,8 +3381,10 @@ export function mountPage(container, model, options = {}) {
       <aside class="panel" id="m-panel" aria-label="Node details" hidden></aside>
     </div>
     <div class="hpop" id="m-helpbox" role="dialog" aria-label="Keys" hidden><b>Keys</b>
-      <dl><dt>/ or ${modK}</dt><dd>search nodes and views</dd><dt>Scroll · pinch</dt><dd>zoom (two-finger drag pans)</dd><dt>Click</dt><dd>details below the map</dd><dt>Double-click · Enter</dt><dd>open a stacked node ⤢</dd>
-      <dt>Esc · Backspace</dt><dd>close, then up one level</dd><dt>+ − 0 1</dt><dd>zoom in, out, fit, 100%</dd><dt>← ↑ → ↓</dt><dd>pan</dd><dt>[ ]</dt><dd>previous / next details tab</dd><dt>i</dt><dd>about this view</dd><dt>O</dt><dd>views list</dd><dt>F</dt><dd>flow on/off</dd></dl></div>
+      <dl><dt>/ or ${modK}</dt><dd>search nodes and views</dd><dt>Scroll · pinch</dt><dd>zoom (two-finger drag pans)</dd><dt>Click</dt><dd>details below the map</dd><dt>Double-click · Enter</dt><dd>open a stacked node ⤢</dd><dt>E · Alt + click</dt><dd>unfold a stacked node here, or fold it back ⤡</dd>
+      <dt>Esc · Backspace</dt><dd>close, then up one level</dd><dt>+ − 0 1</dt><dd>zoom in, out, fit, 100%</dd><dt>← ↑ → ↓</dt><dd>pan</dd><dt>[ ]</dt><dd>previous / next details tab</dd><dt>i</dt><dd>about this view</dd><dt>O</dt><dd>views list</dd><dt>F</dt><dd>flow on/off</dd>
+      <dt>&gt; &lt;</dt><dd>light what a card leads to, what leads to it</dd><dt>Shift-click · P</dt><dd>light every path between two cards</dd>
+      <dt>← → · PgUp PgDn</dt><dd>in a story: previous / next step (Esc closes it)</dd></dl></div>
     <div class="scrim" id="m-pal" hidden><div class="pal" role="dialog" aria-label="Search">
       <div class="in"><span aria-hidden="true">⌕</span><input id="m-q" type="text" autocomplete="off" spellcheck="false" placeholder="Search nodes and views" aria-label="Search nodes and views" aria-controls="m-res"><span class="kbd">esc</span></div>
       <div class="res" id="m-res" role="listbox"></div>
@@ -2617,7 +3509,7 @@ export function mountPage(container, model, options = {}) {
   return I && I.src ? `<span class="big logo${I.dark ? ' dark' : ''}" aria-hidden="true"><img src="${I.src}" width="22" height="22" alt=""></span>`
   : `<span class="big" style="background:${c}" aria-hidden="true"><svg viewBox="0 0 ${I && I.g ? 24 : 16} ${I && I.g ? 24 : 16}" width="20" height="20" fill="none" stroke="currentColor" stroke-width="${I && I.g ? 2 : 1.5}" stroke-linecap="round" stroke-linejoin="round">${I && I.g ? I.g : SIGIL[k]}</svg></span>`; })()}
         <div class="pt"><h3>${esc(n.label || nid)}</h3><small><span>${esc(KIND[k][1])}</span><span class="vis ${pub ? 'pub' : ext ? 'ext' : ''}">${badgesOf(n).length ? badgesOf(n).map(b => esc(b.text.toUpperCase())).join(' · ') : pub ? 'PUBLIC' : ext ? 'EXTERNAL' : 'INTERNAL'}</span>${by}${n.origin ? `<span class="origin">${esc(n.origin)}</span>` : ''}</small></div>
-        <div class="acts">${canOpen ? `<button class="obtn" data-open="${esc(child)}" style="--c:${c}">⤢ Open ${esc(shortT(V[child].title || child))} <span>${(V[child].nodeIds || []).length} nodes · Enter</span></button>` : ''}<button class="ibtn x" data-close title="Close (Esc)" aria-label="Close details">×</button></div>
+        <div class="acts">${canOpen ? `<button class="obtn" data-open="${esc(child)}" style="--c:${c}">⤢ Open ${esc(shortT(V[child].title || child))} <span>${(V[child].nodeIds || []).length} nodes · Enter</span></button>` : ''}${X && X.ctx().unfoldable(nid, cur) ? `<button class="obtn" data-unfold="${esc(nid)}" style="--c:${c}">⤡ Unfold here <span>E</span></button>` : ''}${litButtons()}<button class="ibtn x" data-close title="Close (Esc)" aria-label="Close details">×</button></div>
       </div>
       <div class="ptabs" role="tablist" aria-label="Details">${tabs.map(t => `<button class="ptab" role="tab" id="pt-${t[0]}" data-tab="${t[0]}" aria-selected="${t[0] === tab}" aria-controls="m-pbody">${t[1]}${t[2] != null ? `<em>${t[2]}</em>` : ''}</button>`).join('')}
         <span class="pnav"><button class="ibtn sm" data-step="-1" title="Previous ([)" aria-label="Previous tab">‹</button><button class="ibtn sm" data-step="1" title="Next (])" aria-label="Next tab">›</button></span></div>
@@ -2638,9 +3530,35 @@ export function mountPage(container, model, options = {}) {
   const closeExample = () => { const lb = $('m-lightbox'); if (lb) lb.hidden = true; };
   const setTab = t => { tab = t; try { localStorage.setItem('visual-tab', t); } catch (_) {} if (sel) renderPanel(sel); };
 
+  /* paths and reach (#64): lit on the map from the details panel or by key, and said in the hint line (a live region); a
+     new selection or view clears them, and the same key again does */
+  let lit = null, picked = [];
+  const cardName = id => nodeIn(id).label || id, nCards = n => `${n} card${n === 1 ? '' : 's'}`;
+  const litButtons = () => '<button class="ibtn" data-lit="out" title="Light what it leads to (&gt;)" aria-label="Light what it leads to">→</button><button class="ibtn" data-lit="in" title="Light what leads to it (&lt;)" aria-label="Light what leads to it">←</button>'
+    + (picked.length > 1 ? '<button class="ibtn" data-lit="paths" title="Light every path between the two cards (P)" aria-label="Light every path between the two selected cards">⇄</button>' : '');
+  function unlight() { if (lit) { lit = null; handle.highlight(null); } }
+  function light(key, refs, said) {
+    if (lit === key) { unlight(); return status('Highlight cleared'); }
+    lit = key; handle.highlight(refs.length ? refs : null); status(said, 3600);
+  }
+  function lightReach(back) {
+    if (!sel || !geo.byId[sel]) return;
+    const refs = reach(D, cur, sel, { backward: back }), n = refs.filter(r => r.type === 'node').length - 1, s = cardName(sel);
+    light((back ? 'in ' : 'out ') + sel, n ? refs : [], !n ? (back ? `Nothing leads to ${s} here` : `${s} leads nowhere here`)
+      : back ? `${nCards(n)} ${n === 1 ? 'leads' : 'lead'} to ${s}: lit on the map` : `${s} leads to ${nCards(n)}: lit on the map`);
+  }
+  function lightPaths() {
+    const [a, b] = picked.slice(-2); if (!b) return;
+    let refs = paths(D, cur, a, b), [x, y] = [a, b];
+    if (!refs.length) { refs = paths(D, cur, b, a); [x, y] = [b, a]; } // the two cards in either order
+    const n = refs.filter(r => r.type === 'node').length;
+    light(`paths ${a} ${b}`, refs, n ? `Every path from ${cardName(x)} to ${cardName(y)}: ${nCards(n)}, lit on the map` : `No path joins ${cardName(a)} and ${cardName(b)} here`);
+  }
+
   /* navigation */
   function setHash(replace) {
     const p = new URLSearchParams(); p.set('view', cur); if (sel) p.set('node', sel);
+    if (told) { p.set('story', told.id); p.set('step', told.step + 1); } // the story shown, at its step (#69)
     ['theme', 'check', 'shot'].forEach(k => Q.get(k) && p.set(k, Q.get(k)));
     const h = '#' + p.toString();
     if (location.hash === h) return;
@@ -2669,12 +3587,14 @@ export function mountPage(container, model, options = {}) {
   document.addEventListener('click', e => {
     const t = e.target;
     if (t.closest('[data-close]')) return deselect();
+    const lb = t.closest('#m-panel [data-lit]'); if (lb) return lb.dataset.lit === 'paths' ? lightPaths() : lightReach(lb.dataset.lit === 'in');
     const ob = t.closest('[data-open]'); if (ob) return go(ob.dataset.open, { via: sel });
+    const ub = t.closest('#m-panel [data-unfold]'); if (ub) return X.unfold(ub.dataset.unfold); // in place (#71)
     const pv = t.closest('.pview'); if (pv) return go(pv.dataset.v, { select: pv.dataset.sel });
     const rn = t.closest('#m-panel [data-n]'); if (rn) return findNode(rn.dataset.n);
     const cv = t.closest('#m-crumbs [data-v], #m-tree [data-v]'); if (cv) { if (innerWidth <= 820) setTree(false); return go(cv.dataset.v); }
     const cp = t.closest('[data-copy]'); if (cp) { navigator.clipboard && navigator.clipboard.writeText(cp.dataset.copy).then(() => status('Path copied'), () => status(cp.dataset.copy)); return; }
-    if (!t.closest('.menu')) closeExport();
+    const mn = t.closest('.menu'); if (!mn || !mn.contains($('m-export'))) closeExport(); if (!mn || !mn.contains($('m-stories'))) closeStories();
     if (!t.closest('#m-helpbox, #m-help')) closeHelp();
   });
   $('m-outline').addEventListener('click', () => setTree(!document.body.classList.contains('tree-open')));
@@ -2685,6 +3605,51 @@ export function mountPage(container, model, options = {}) {
   $('m-export').addEventListener('click', () => { const on = $('m-export-pop').hidden; $('m-export-pop').hidden = !on; $('m-export').setAttribute('aria-expanded', on); });
   $('m-export-pop').addEventListener('click', e => { const x = e.target.closest('[data-x]')?.dataset.x; if (!x) return; closeExport(); exportView(x); });
 
+  /* stories (#69): the Stories menu plays one; the link names the story and step shown; Export ▸ Record a story… */
+  let told = null; // { id, step }: the story on the map and its step
+  const toldSel = id => { const s = told && (D.stories || []).find(x => x && x.id === told.id), st = s && (s.steps || [])[told.step]; return !!(st && st.select === id); }; // the step's own selection: a pointer, no details panel
+  const storiesPop = $('m-stories-pop'), closeStories = () => { if (storiesPop) { storiesPop.hidden = true; $('m-stories').setAttribute('aria-expanded', 'false'); } };
+  if (storiesPop) {
+    $('m-stories').addEventListener('click', () => { const on = storiesPop.hidden; storiesPop.hidden = !on; $('m-stories').setAttribute('aria-expanded', on); });
+    storiesPop.addEventListener('click', e => { const b = e.target.closest('[data-story]'); if (!b) return; closeStories(); handle.play(b.dataset.story); });
+  }
+  // a story recorded from the page: each view and card the reader comes to is a step (Add step: as the camera is now too);
+  // captions are typed in, and Save writes the story's JSON, for the model's `stories`
+  let rec = null;
+  function record() {
+    if (rec) return;
+    stage.insertAdjacentHTML('beforeend', `<div class="m-rec" id="m-rec" role="region" aria-label="Recording a story">
+      <div class="t"><b>● Recording a story</b><span id="m-rec-n"></span></div>
+      <input id="m-rec-title" type="text" aria-label="Story title" placeholder="Story title" value="${esc((D.title || 'Map') + ': a walk-through')}">
+      <ol id="m-rec-list"></ol>
+      <div class="b"><button type="button" data-r="add">Add step</button><button type="button" data-r="save">Save JSON</button><button type="button" data-r="close">Close</button></div></div>`);
+    const box = $('m-rec'), same = (a, b) => JSON.stringify([a.view, a.select, a.camera]) === JSON.stringify([b.view, b.select, b.camera]);
+    rec = { steps: [], t: 0 };
+    const draw = () => { $('m-rec-n').textContent = rec.steps.length === 1 ? '1 step' : rec.steps.length + ' steps';
+      $('m-rec-list').innerHTML = rec.steps.map((s, i) => `<li><span>${esc(shortT((V[s.view] || {}).title || s.view))}${s.select ? ' · ' + esc(nodeIn(s.select, s.view).label || s.select) : ''}${s.camera ? ' · zoomed' : ''}</span>
+        <input type="text" data-i="${i}" aria-label="Caption of step ${i + 1}" placeholder="Caption" value="${esc(s.caption)}"><button type="button" data-del="${i}" aria-label="Remove step ${i + 1}">✕</button></li>`).join(''); };
+    rec.take = force => { // the map as it is: its view, selected card and, once moved by hand, its camera
+      const c = X.cam(), s = { view: cur, caption: '' }, last = rec.steps[rec.steps.length - 1];
+      if (sel) s.select = sel;
+      if (c.touched) s.camera = { x: Math.round(c.s.cx), y: Math.round(c.s.cy), zoom: +c.s.k.toFixed(2) };
+      if (force || !last || !same(last, s)) { rec.steps.push(s); draw(); }
+    };
+    box.addEventListener('input', e => { const i = e.target.dataset.i; if (i != null) rec.steps[+i].caption = e.target.value; });
+    box.addEventListener('click', e => {
+      const r = e.target.closest('[data-r]')?.dataset.r, del = e.target.closest('[data-del]');
+      if (del) { rec.steps.splice(+del.dataset.del, 1); draw(); }
+      else if (r === 'add') rec.take(true);
+      else if (r === 'save') {
+        const title = $('m-rec-title').value.trim() || 'A walk-through', id = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'story';
+        const steps = rec.steps.map(({ caption, ...s }) => caption ? { view: s.view, caption, ...s } : s);
+        download(id + '.story.json', new Blob([JSON.stringify({ id, title, steps }, null, 2) + '\n'], { type: 'application/json' }));
+        status('Saved: add it to the model\'s "stories"', 4000);
+      } else if (r === 'close') { clearTimeout(rec.t); rec = null; box.remove(); }
+    });
+    rec.take();
+  }
+  const recordSoon = () => { if (rec) { clearTimeout(rec.t); rec.t = setTimeout(() => rec && rec.take(), 650); } }; // once the camera has landed
+
   /* ⌘K command box: nodes and views, Enter jumps */
   const nodeIdx = nodes.map(n => ({ n, hay: [n.label, n.id, (n.verbs || []).join(' '), n.what, n.kind, n.author, ((D.authors || {})[n.author] || {}).name, n.origin].join(' ').toLowerCase() }));
   const viewIdx = views.map(v => ({ v, hay: [v.title, v.id, v.caption].join(' ').toLowerCase() }));
@@ -2741,7 +3706,7 @@ export function mountPage(container, model, options = {}) {
     if (!X || (e.target.matches && e.target.matches('input, textarea')) || e.metaKey || e.ctrlKey || e.altKey) return;
     const k = e.key, inCanvas = e.composedPath().includes(X.stage);
     if (k === 'Escape' || k === 'Backspace') {
-      if ($('m-lightbox') && !$('m-lightbox').hidden) closeExample(); else if (!$('m-helpbox').hidden) closeHelp(); else if (!$('m-export-pop').hidden) closeExport(); else if ($('m-vpop') && !$('m-vpop').hidden) togglePill(false);
+      if ($('m-lightbox') && !$('m-lightbox').hidden) closeExample(); else if (!$('m-helpbox').hidden) closeHelp(); else if (!$('m-export-pop').hidden) closeExport(); else if (storiesPop && !storiesPop.hidden) closeStories(); else if ($('m-vpop') && !$('m-vpop').hidden) togglePill(false);
       else if (!inCanvas) X.key(e); else return;
     }
     else if (k === '/') openPal();
@@ -2749,6 +3714,8 @@ export function mountPage(container, model, options = {}) {
     else if (k === 'i' || k === 'I') togglePill();
     else if ((k === '[' || k === ']') && sel) setTab(TABS[(TABS.indexOf(tab) + (k === ']' ? 1 : -1) + TABS.length) % TABS.length]);
     else if (k === 'o' || k === 'O') setTree(!document.body.classList.contains('tree-open'));
+    else if ((k === '>' || k === '<') && sel) lightReach(k === '<');
+    else if ((k === 'p' || k === 'P') && picked.length > 1) lightPaths();
     else if (inCanvas || !X.key(e)) return;
     e.preventDefault(); e.stopPropagation();
   }, true);
@@ -2763,6 +3730,7 @@ export function mountPage(container, model, options = {}) {
     setTimeout(tick, 300); }
   function download(name, blob) { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 500); }
   function exportView(x) {
+    if (x === 'record') return record();
     const stem = (D.slug || D.title || 'map').toLowerCase().replace(/[^a-z0-9]+/g, '-') + '-' + cur.replace(/[^a-z0-9]+/gi, '-');
     if (x === 'svg') download(stem + '.svg', new Blob([standalone(1)], { type: 'image/svg+xml' }));
     else if (x === 'png') {
@@ -2778,6 +3746,7 @@ export function mountPage(container, model, options = {}) {
   const v0 = V[p0.get('view')] ? p0.get('view') : rootId;
   const handle = render($('m-canvas'), model, {
     view: v0, minimap: true, flow: flowPref ? flowPref === '1' : undefined,
+    on: { story: ({ story: id, step }) => { told = step == null ? null : { id, step }; app.classList.toggle('story', !!told); if (X) setHash(true); } }, // from the first draw: a link may open a story (#69)
     _page: {
       instant: options.instant, defer: !INSTANT, tour: !Q.get('still'), openHint: !Q.get('reader'), kinds: true, status,
       wide: () => innerWidth > 820,
@@ -2796,11 +3765,12 @@ export function mountPage(container, model, options = {}) {
         $('m-ghosts').remove();
         const n0 = p0.get('node') || (Q.get('shot') && cur !== rootId ? subjectOf(V[cur]) || (V[cur].nodeIds || [])[0] : null);
         if (n0 && geo.byId[n0]) select(n0, { reveal: false });
+        if (p0.get('story')) setTimeout(() => X.play(p0.get('story'), { step: (+p0.get('step') || 1) - 1, auto: false })); // a link to a story's step: shown, not played on (once the page listens)
         setHash(true);
       },
     },
   });
-  handle.on('select', ({ target }) => { sel = target && target.type === 'node' ? target.id : null; if (sel) renderPanel(sel); else hidePanel(); setHash(true); });
-  handle.on('viewchange', () => { setHash(replaceNext); replaceNext = false; });
+  handle.on('select', ({ target, targets }) => { sel = target && target.type === 'node' ? target.id : null; picked = (targets || []).filter(t => t.type === 'node').map(t => t.id); unlight(); if (sel && !toldSel(sel)) renderPanel(sel); else hidePanel(); setHash(true); recordSoon(); });
+  handle.on('viewchange', () => { unlight(); setHash(replaceNext); replaceNext = false; recordSoon(); });
   return handle;
 }