umlimator 0.13.0 → 0.14.0

package/lib/umlimator.js

@@ -48,7 +48,9 @@ const STYLES = `
   svg .edge { fill: none; stroke-width: calc(1.6px * var(--um-ew, 1)); stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .15s, opacity .2s; }
   svg .halo { fill: none; stroke: var(--um-bg-2); stroke-width: calc(6px + 1.8px * (var(--um-ew, 1) - 1)); }
   svg .hitline { fill: none; stroke: transparent; stroke-width: calc(12px + 1.8px * (var(--um-ew, 1) - 1)); }
-  svg .flowline { fill: none; stroke-width: calc(2.4px * var(--um-ew, 1)); stroke-linecap: round; stroke-dasharray: 10 70; opacity: 0; pointer-events: none; }
+  /* a line's flow: pulses in the canvas colour moving along it, as wide as the line (never a bump on it), and stopping
+     where its arrowhead begins (svgOf trims the path), so the arrow keeps its shape */
+  svg .flowline { fill: none; stroke: var(--um-bg-2); stroke-width: calc(1.6px * var(--um-ew, 1)); stroke-linecap: round; stroke-dasharray: 10 70; opacity: 0; pointer-events: none; }
   .flowing svg .flowline { opacity: .9; animation: flowdash 2.4s linear infinite; }
   .flowing svg .edge { opacity: .8; }
   @keyframes flowdash { to { stroke-dashoffset: -160; } }
@@ -70,7 +72,8 @@ const STYLES = `
   .flowing svg .edge-g.back .edge { animation: march 1.1s linear infinite; }
   @keyframes march { to { stroke-dashoffset: -22; } }
   @media (prefers-reduced-motion: reduce) { svg .tour, svg .tour-glow { display: none !important; } .flowing svg .node.tour-stop, .flowing svg .edge-g.back .edge { animation: none; } }
-  @media (prefers-reduced-motion: reduce) { .flowing svg .flowline { animation: none; opacity: 0; } .flowing svg .edge { opacity: 1; } }
+  /* reduced motion: no flow is drawn, so ≋ isn't offered (as the page hides its ❚❚); the stage's class outranks :host .flowing below */
+  @media (prefers-reduced-motion: reduce) { :host .stage.flowing svg .flowline { animation: none; opacity: 0; } .flowing svg .edge { opacity: 1; } .ctl [data-z="flow"] { display: none; } }
   .ctl button.on { color: var(--um-cyan); background: var(--um-cyan-f); }
   svg .flow { stroke-dasharray: 6 6; animation: flow 1.2s linear infinite; }
   @keyframes flow { to { stroke-dashoffset: -12; } }
@@ -112,7 +115,7 @@ const STYLES = `
   svg .node.nb .n-body { stroke-width: 2.6; stroke-opacity: 1; }
   svg .n-port { fill: var(--um-panel); stroke-width: 1.5; pointer-events: none; transition: fill .2s, stroke-width .2s; }
   svg .node.sel .n-port, svg .node.nb .n-port.hot { fill: var(--um-accent); stroke: var(--um-accent); stroke-width: 2.2; }
-  :host .focusing svg .edge-g.hot .flowline { opacity: .95; stroke-width: calc(3.4px * var(--um-ew, 1)); stroke-dasharray: 8 13; animation: selected-flow 1.1s linear infinite; }
+  :host .focusing svg .edge-g.hot .flowline { opacity: .95; stroke-width: calc(2.8px * var(--um-ew, 1)); stroke-dasharray: 8 13; animation: selected-flow 1.1s linear infinite; }
   :host .focusing svg .edge-g.hot .edge { stroke-width: calc(2.8px * var(--um-ew, 1)); }
   @keyframes selected-flow { to { stroke-dashoffset: -42; } }
   @keyframes select-glow { from { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--um-accent) 70%, transparent)); stroke-width: 5; } }
@@ -200,7 +203,7 @@ const STYLES = `
   .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; }
+  .um-story button:hover:not([aria-disabled="true"]) { background: var(--um-panel-2); color: var(--um-accent); } .um-story button[aria-disabled="true"] { opacity: .35; cursor: default; }
   @media (max-width: 820px) { .um-story { left: 12px; right: 12px; bottom: 60px; max-width: none; } }
   /* the standalone page's pieces (#99): the views list, the legend, the hint line and the details panel, in the page and,
      when a host asks, in render()'s shadow root, where these first rules give them what the page gives its whole page */
@@ -419,6 +422,15 @@ function fit(s, px, max, words) { s = String(s ?? ''); if (textW(s, px) <= max)
   let k; if (measureText) { k = s.length; while (k > 3 && textW(s.slice(0, k) + '…', px) > max) k--; } else k = Math.max(Math.floor(max / (px * 0.6)) - 1, 3);
   const w = words ? s.slice(0, k + 1).replace(/\S*$/, '').replace(/[\s,;:]+$/, '') : '';
   return (w || s.slice(0, k)) + '…'; }
+// pts shortened by a at the start and b at the end, along its own segments: a line's flow stops where an arrowhead begins
+const trimLine = (pts, a, b) => {
+  const cut = (p, d) => { p = p.map(q => q.slice());
+    while (d > 0 && p.length > 1) { const [x0, y0] = p[p.length - 2], [x1, y1] = p[p.length - 1], len = Math.hypot(x1 - x0, y1 - y0);
+      if (len > d) { const t = (len - d) / len; p[p.length - 1] = [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t]; break; }
+      d -= len; p.pop(); }
+    return p; };
+  return cut(cut(pts, b).reverse(), a).reverse();
+};
 function roundPath(pts, r = 9) {
   let d = `M ${pts[0][0]} ${pts[0][1]}`;
   for (let i = 1; i < pts.length - 1; i++) {
@@ -631,9 +643,22 @@ const mapNodeW = n => {
 /* Geometry: node boxes, ports, orthogonal routes, label slots. A view with lines the router found no route for is laid
    out once more, with room where those lines need it (#40); a view whose lines all route keeps its geometry. */
 function layoutGraph(dg, map) {
-  const g = layoutPass(dg, map, null);
-  if (!g.room) return g;
-  const g2 = layoutPass(dg, map, g.room, true); g2.ms.probe = g.ms.probe; return g2;
+  let g = layoutPass(dg, map, null);
+  if (g.room) { const g2 = layoutPass(dg, map, g.room, true); g2.ms.probe = g.ms.probe; g = g2; }
+  // two lines that still cross: one takes another side, and the view is laid out so once more, kept if it has fewer issues. A
+  // line that closes a loop leaves its source on the far side, out round the map as a loop under the boxes does, and still comes
+  // in on its target's near side (clinic's reminder, from the SMS gateway under Patient records, crossed the line into Patient
+  // records); of two other lines, the steeper comes into its target's top or bottom (clinic's "Sends texts" with Clinic bookings
+  // unfolded, up past Patient records into the SMS gateway's bottom). ponytail: a layout more, so only up to 30 cards (as
+  // bestFlow); a larger view keeps its crossings
+  const refs = [], pairs = map && !dg.quick && !dg.flipped && dg.nodes.length <= 30 ? routeAudit(g, '', null, refs).flatMap((s, k) => s.endsWith(' cross') ? [refs[k]] : []) : [];
+  const far = { L: 'right', R: 'left', T: 'bottom', B: 'top' }, dy = e => (e.s.y + e.s.h / 2) - (e.t.y + e.t.h / 2), out = new Map();
+  pairs.forEach(p => p.forEach(e => { if (e.back && !e.fixed && !e.fromSide) out.set(e.from + '>' + e.to, ['fromSide', far[e.fs]]); }));
+  pairs.forEach(p => { const e = p.filter(e => !e.back && !e.fixed && !e.toSide && /[LR]/.test(e.ts) && dy(e)).sort((a, b) => Math.abs(dy(b)) - Math.abs(dy(a)))[0];
+    if (e && !p.some(o => out.has(o.from + '>' + o.to))) out.set(e.from + '>' + e.to, ['toSide', dy(e) > 0 ? 'bottom' : 'top']); });
+  if (!out.size) return g;
+  const g2 = layoutGraph({ ...dg, flipped: true, edges: dg.edges.map(e => out.has(e.from + '>' + e.to) ? { ...e, [out.get(e.from + '>' + e.to)[0]]: out.get(e.from + '>' + e.to)[1] } : e) }, map);
+  return routeAudit(g2, '').length < routeAudit(g, '').length ? g2 : g;
 }
 function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row: px } }; last: lay out with it, find no more
   const __ms = { t: performance.now() }, t0 = __ms.t;
@@ -874,7 +899,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     return hz[0][1] > Math.min(v[0][1], v[1][1]) && hz[0][1] < Math.max(v[0][1], v[1][1]) && v[0][0] > Math.min(hz[0][0], hz[1][0]) && v[0][0] < Math.max(hz[0][0], hz[1][0]); };
   const onSegInterior = (p, a, b) => (a[0] === b[0] && Math.abs(p[0] - a[0]) < 0.5 && p[1] > Math.min(a[1], b[1]) && p[1] < Math.max(a[1], b[1]))
     || (a[1] === b[1] && Math.abs(p[1] - a[1]) < 0.5 && p[0] > Math.min(a[0], b[0]) && p[0] < Math.max(a[0], b[0]));
-  function gridRoute(e, allowCross, win) {
+  function gridRoute(e, allowCross, win, spare) {
     const st = [e.p1[0] + OUT[e.fs][0] * STUB, e.p1[1] + OUT[e.fs][1] * STUB];
     const en = [e.p2[0] + OUT[e.ts][0] * STUB, e.p2[1] + OUT[e.ts][1] * STUB];
     // ends that face each other closer than two stubs (a card 32 px beside a box) leave the grid no room: the plain
@@ -934,6 +959,15 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
       }
     }
     for (let k = 0; k < N; k++) if (!inObs[k] && (!onAv[k] || allowCross)) { ok[k] = 1; crossAt[k] = onAv[k]; }
+    // routed after a port swap, it keeps off the end of its partner's stub, where the partner, routed next, starts
+    if (spare) for (const p of [spare.stubs[0][1], spare.stubs[1][0]]) { const i = X.indexOf(p[0]), j = Y.indexOf(p[1]); if (i >= 0 && j >= 0) { if (allowCross) crossAt[i * ny + j] = 1; else ok[i * ny + j] = 0; } }
+    // a line never runs round one of its own ends: the grid behind each (past the side opposite its port) is shut to it, unless its
+    // other end is there. A route with no crossing went any length, round its own card too (clinic's reminder went over the
+    // patient, down its far side and under it to reach the port below the patient's other line), and port repair saw nothing
+    for (const [n, side, far] of [[e.s, e.fs, en], [e.t, e.ts, st]]) if (!behind(n, side, far)) {
+      const lr = side === 'R' || side === 'L';
+      (lr ? X : Y).forEach((v, a) => { if (behind(n, side, lr ? [v, n.y] : [n.x, v])) for (let b = 0; b < (lr ? ny : nx); b++) ok[lr ? a * ny + b : b * ny + a] = 0; });
+    }
     if (any) for (const r of reserved) for (let i = from(X, r.x - 3); i < nx && X[i] < r.x + r.w + 3; i++) for (let j = from(Y, r.y - 3); j < ny && Y[j] < r.y + r.h + 3; j++) crossAt[i * ny + j] = 1;
     // a run within 8 px of a box's border costs ten times its length: the grid keeps a port's track and an earlier line's however
     // near a border, and a box levelled half a row from a card (#86) puts its border right by that card's ports
@@ -1015,12 +1049,20 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     const tries = [full]; if (e.step != null && e.label && !dg.abs) tries.push(map ? '' : String(e.step));
     const segs = segsOf(e.pts).map((s, i) => ({ a: s[0], b: s[1], i, l: Math.hypot(s[1][0] - s[0][0], s[1][1] - s[0][1]), h: s[0][1] === s[1][1] }));
     const order = [...segs].sort((p, q) => (q.h - p.h) * 40 + (q.l - p.l));
+    // the strict spots along a segment: the middle, a third and a fifth of the way, then those just clear of each card's stub room,
+    // tag, label and line beside it, the middle's nearest first: where the label fits, one of them is in. The five alone missed a
+    // gap 15 px wide, and the label sat on a box's border (clinic's "Queues reminders")
+    const spots = (sg, w, hgt) => { const v = sg.h ? 0 : 1, lo = sg.a[v], len = sg.b[v] - lo, half = (v ? hgt : w) / 2 + 3.5, mid = sg.a[1 - v], across = (v ? w : hgt) / 2 + 3;
+      const span = r => [[r.x, r.x + r.w], [r.y, r.y + r.h]], rs = [...nodeRects.map(r => ({ x: r.x - STUB - 4, y: r.y - STUB - 4, w: r.w + 2 * STUB + 8, h: r.h + 2 * STUB + 8 })), ...tagRects, ...placed,
+        ...[...routed.filter(r => r !== e).map(r => r.pts), e.pts].flatMap(P => segsOf(P).map(([p, q]) => ({ x: Math.min(p[0], q[0]), y: Math.min(p[1], q[1]), w: Math.abs(q[0] - p[0]), h: Math.abs(q[1] - p[1]) })))];
+      return [.5, .32, .68, .2, .8, ...rs.map(span).filter(s => s[1 - v][0] < mid + across && s[1 - v][1] > mid - across).flatMap(s => [s[v][0] - half, s[v][1] + half])
+        .map(u => (u - lo) / len).filter(f => f >= 0 && f <= 1).sort((p, q) => Math.abs(p - .5) - Math.abs(q - .5))]; };
     for (const pass of (map ? [0, 1, 2] : [0])) for (const text of tries) { const relax = pass === 2; // 0 strict, 1 strict but may touch a box border, 2 relaxed
       const two = !!(text && sub), pill = map && e.step != null, w = map ? (text ? pillW(text, two && sub) : 0) + (pill ? stepW(e.step) + (text ? 4 : 6) : 0) : textW(text, 10) + 12, hgt = map ? (two ? 32 : 20) : 18;
       for (const sg of order) {
         if (!relax && sg.h && sg.l < w + 10) continue;
         if (!relax && !sg.h && sg.l < hgt + 14) continue;
-        for (const f of (relax ? [.5, .32, .68, .2, .8, .1, .9, .42, .58, .26, .74, .05, .95] : [.5, .32, .68, .2, .8])) {
+        for (const f of (relax ? [.5, .32, .68, .2, .8, .1, .9, .42, .58, .26, .74, .05, .95] : spots(sg, w, hgt))) {
           const lx = sg.a[0] + (sg.b[0] - sg.a[0]) * f, ly = sg.a[1] + (sg.b[1] - sg.a[1]) * f;
           const box = { x: lx - w / 2, y: ly - hgt / 2, w, h: hgt };
           const grow = { x: box.x - 3, y: box.y - 3, w: box.w + 6, h: box.h + 6 };
@@ -1105,8 +1147,8 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     const p = placed.findIndex(same(0)); if (p >= 0) placed.splice(p, 1); const q = reserved.findIndex(same(3)); if (q >= 0) reserved.splice(q, 1); };
   // a swapped edge tries a clean route near its ends, then one that may cross (near its ends, then anywhere); it
   // skips the clean whole-grid search, which mostly fails here and visits every cell when it does
-  const routeOne = e => { let how = 'grid'; e.lbl = null; e.pts = gridRoute(e, false, 320);
-    if (!e.pts) { how = 'cross'; e.pts = gridRoute(e, true, 320) || gridRoute(e, true, 0); } if (!e.pts) { how = 'fallback'; e.pts = fallback(e); }
+  const routeOne = (e, spare) => { let how = 'grid'; e.lbl = null; e.pts = gridRoute(e, false, 320, spare);
+    if (!e.pts) { how = 'cross'; e.pts = gridRoute(e, true, 320, spare) || gridRoute(e, true, 0, spare); } if (!e.pts) { how = 'fallback'; e.pts = fallback(e); }
     e.how = how; routed.push(e); placeLabel(e); return true; };
   let budget = 2 * free.length, swapped = false;
   for (let round = 0; issues && dg.repair !== false && round < 8 && budget > 0; round++) {
@@ -1115,7 +1157,8 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     const xing = (a, b) => segsE(a).some(([p, q]) => segsE(b).some(([r, s]) => crosses(p, q, r, s)));
     const pairs = []; edges.forEach((a, i) => edges.slice(i + 1).forEach(b => { if (xing(a, b)) pairs.push([a, b]); }));
     // a crossing pair, or a pair where one shares a node side with the other's crossing partner
-    const cand = [], seen = new Set(), add = (a, b) => { const k = a.id + '|' + b.id; if (!seen.has(k)) { seen.add(k); cand.push([a, b]); } }; // each pair once; crossing pairs first
+    // each pair once, crossing pairs first; by place, since a model's edges need no id (by id, every pair of r15's was one)
+    const cand = [], seen = new Set(), add = (a, b) => { const k = edges.indexOf(a) + '|' + edges.indexOf(b); if (!seen.has(k)) { seen.add(k); cand.push([a, b]); } };
     pairs.forEach(([a, b]) => add(a, b)); pairs.forEach(([a, b]) => free.forEach(o => { if (o !== a && o !== b) { add(a, o); add(b, o); } }));
     outer3: for (const [a, b] of cand.filter(([x, y]) => !x.fixed && !y.fixed)) {
       for (const n of [a.s, a.t]) for (const side of ['L', 'R', 'T', 'B']) {
@@ -1127,7 +1170,13 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
         budget -= 2; __ms.reroutes++;
         if (!was) { a[ka] = pa; b[kb] = pb; restub(a); restub(b); continue; } // nothing to gain: the count can only drop by their own issues
         ripUp(a); ripUp(b);
-        const now = routeOne(a) && routeOne(b) ? issues - was + issueCount(ab) : Infinity;
+        // first the routes they have, each moved onto the other's port: two lines that cross where they leave one side no longer
+        // cross (r15's web: its line to kit turned down past the line to api-client, and routed again they crossed again)
+        const moved = (e, k, P) => { const [i, j] = k === 'p1' ? [0, 1] : [P.length - 1, P.length - 2], v = P[i][1] === P[j][1];
+          return P.length > 2 && simplify(P.map((p, x) => x === i ? e[k] : x === j ? (v ? [p[0], e[k][1]] : [e[k][0], p[1]]) : p)); };
+        const ma = moved(a, ka, a.pts), mb = moved(b, kb, b.pts); let now = Infinity;
+        if (ma && mb) { a.pts = ma; b.pts = mb; a.lbl = b.lbl = null; routed.push(a, b); placeLabel(a); placeLabel(b); now = issues - was + issueCount(ab); if (now >= issues) { ripUp(a); ripUp(b); } }
+        if (now >= issues) now = routeOne(a, b) && routeOne(b) ? issues - was + issueCount(ab) : Infinity;
         if (now < issues) { issues = now; fixed = swapped = true; if (!issues) break outer3; continue outer3; }
         a[ka] = pa; b[kb] = pb; restub(a); restub(b);
         snap.forEach(([e, p, l, hw]) => { e.pts = p; e.lbl = l; e.how = hw; });
@@ -1137,6 +1186,21 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     if (!fixed) break;
   }
   if (swapped) { ['grid', 'cross', 'fallback'].forEach(k => { delete stats[k]; }); free.forEach(e => { stats[e.how] = (stats[e.how] || 0) + 1; }); }
+  // a line that jogs 16 px or less between sides that face each other runs straight when one of its ends is the only port on its
+  // side: that port moves level with the other end, if no issue comes with it. Ports are spread round the middle of a side, so a
+  // line from the lower of a card's two ports into a card level with it jogged just before it (clinic's "Books appointments")
+  if (map && dg.repair !== false) free.forEach(e => {
+    const P = e.pts, ax = e.fs === 'L' || e.fs === 'R' ? 1 : 0, d = P[P.length - 1][ax] - P[0][ax];
+    if (P.length !== 4 || !d || Math.abs(d) > 16 || OUT[e.fs][1 - ax] !== -OUT[e.ts][1 - ax]) return;
+    const lone = (n, side) => !n.box && sides[n.id + '|' + side].length === 1, [k, n, side, v] = lone(e.t, e.ts) ? ['p2', e.t, e.ts, P[0][ax]] : lone(e.s, e.fs) ? ['p1', e.s, e.fs, P[3][ax]] : [];
+    const sp = n && (ax ? [n.y + n.h * .08, n.y + n.h * .92] : sideSpan(n, side) || [n.x + n.w * .08, n.x + n.w * .92]);
+    if (!k || v < sp[0] || v > sp[1]) return;
+    const was = e[k], before = issueCount(new Set([e])), snap = [e.pts, e.lbl, e.how], snapR = [routed.slice(), reserved.slice(), placed.slice()];
+    ripUp(e); e[k] = ax ? [was[0], v] : [v, was[1]]; restub(e); routeOne(e);
+    if (e.pts.length === 2 && issueCount(new Set([e])) <= before) return;
+    e[k] = was; restub(e); [e.pts, e.lbl, e.how] = snap;
+    routed.splice(0, routed.length, ...snapR[0]); reserved.splice(0, reserved.length, ...snapR[1]); placed.splice(0, placed.length, ...snapR[2]);
+  });
   // the last resort for a line still with no route: around the cards, across or along other lines if it must (it was a
   // plain elbow through whatever lay in its way, and a card's mask made the line look like a connection to that card)
   if (!dg.quick) free.filter(e => e.how === 'fallback').forEach(e => { ripUp(e); e.pts = gridRoute(e, 2, 320) || gridRoute(e, 2, 0) || e.pts; e.lbl = null; routed.push(e); placeLabel(e); });
@@ -1225,16 +1289,19 @@ function svgOf(geo, opts = {}) {
   });
   edges.forEach((e, i) => {
     const st = lstyle(e), why = broke(e), d = roundPath(e.pts), mk = st.m + (e.weight > 1 ? '-w' + e.weight : '');
+    const tip = 9 * (e.weight > 1 ? 1 + (e.weight - 1) * .35 : 1), fd = roundPath(trimLine(e.pts, e.both ? tip : 0, tip)); // an arrowhead's length (marker refX)
     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) && !e.strong ? (() => { let m = [e.pts[0], e.pts[1]];
+      <path d="${fd}" 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>`; })() : ''}${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">';
+  // the tour's dot rides over the lines and boxes but under the cards: it goes into a card and comes out at its next
+  // line, rather than across the card's name
+  s += '</g>' + (tour ? `<g class="tour" aria-hidden="true"><circle r="5.5" class="tour-dot"><animateMotion path="${tour.d}" dur="${TOUR}s" repeatCount="indefinite"/></circle></g>` : '') + '<g class="nodes">';
   nodes.forEach(n => {
     const c = col(n.k), f = fill(n.k), removed = n.change === 'removed', planned = n.change === 'planned';
     const pub = map && n.k === 'm-public', priv = map && n.k === 'm-script', ext = map && n.k === 'm-ext', verb = map && n.k === 'm-verb', hook = map && n.k === 'm-hook';
@@ -1325,7 +1392,6 @@ return I && I.src ? `<rect x="${x - M * 3 / 28}" y="${y - M * 3 / 28}" width="${
       ${parts.join('\n')}
     </g>`;
   });
-  if (tour) s += `<g class="tour" aria-hidden="true"><circle r="5.5" class="tour-dot"><animateMotion path="${tour.d}" dur="${TOUR}s" repeatCount="indefinite"/></circle></g>`;
   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})` : ''}` : '';
@@ -1396,14 +1462,14 @@ class Camera {
   stopAnimation() {
     cancelAnimationFrame(this.anim); this.anim = 0;
     // Resize/refit interrupts camera motion. Navigation awaits that motion, so cancellation
-    // must settle its promise too; otherwise go() never releases its busy flag.
-    const done = this.animationDone; this.animationDone = null; if (done) done();
+    // must settle its promise too; otherwise go() never releases its busy flag. It settles false: cut short (a story's step glides again)
+    const done = this.animationDone; this.animationDone = null; if (done) done(false);
   }
   set(s) { this.stopAnimation(); this.s = this.clamp({ ...this.s, ...s }); this.apply(); }
-  animate(to, ms = 380) {
+  animate(to, ms = 380) { // resolves true once there, false when cut short
     this.stopAnimation();
     const from = { ...this.s }, dest = this.clamp({ ...this.s, ...to });
-    if (reducedMotion()) { this.set(dest); return Promise.resolve(); }
+    if (this.o.still ? this.o.still() : reducedMotion()) { this.set(dest); return Promise.resolve(true); }
     return new Promise(res => {
       this.animationDone = res;
       const t0 = performance.now(), ease = t => t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
@@ -1412,7 +1478,7 @@ class Camera {
         const t = Math.min(1, (now - t0) / ms), e = ease(t);
         this.s = { cx: from.cx + (dest.cx - from.cx) * e, cy: from.cy + (dest.cy - from.cy) * e, k: Math.exp(lk0 + (lk1 - lk0) * e) };
         this.apply();
-        if (t < 1) this.anim = requestAnimationFrame(step); else { this.anim = 0; this.animationDone = null; res(); }
+        if (t < 1) this.anim = requestAnimationFrame(step); else { this.anim = 0; this.animationDone = null; res(true); }
       };
       this.anim = requestAnimationFrame(step);
     });
@@ -1455,7 +1521,7 @@ class Camera {
     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;
-    cancelAnimationFrame(this.anim);
+    this.stopAnimation(); // settles the glide's promise: a press during a navigation or a story's step lets it go on
   }
   pinchDist() { const p = [...this.ptrs.values()]; return p.length > 1 ? Math.hypot(p[0][0] - p[1][0], p[0][1] - p[1][1]) : 0; }
   onMove(e) {
@@ -1489,6 +1555,11 @@ const teller = (issues, refs) => (message, ...about) => { issues.push(message);
 // a detour: a route 2.5 times longer than the straight distance between its ends, or than 100 px; [its length, that distance]
 const detour = pts => { const len = pts.slice(1).reduce((a, p, k) => a + Math.abs(p[0] - pts[k][0]) + Math.abs(p[1] - pts[k][1]), 0);
   const d = Math.hypot(pts[pts.length - 1][0] - pts[0][0], pts[pts.length - 1][1] - pts[0][1]); return len > 2.5 * Math.max(d, 100) ? [len, d] : null; };
+// behind a card a line meets on its side `side` (R, L, T or B): past the opposite side
+const behind = (n, side, [x, y]) => side === 'R' ? x < n.x - .5 : side === 'L' ? x > n.x + n.w + .5 : side === 'B' ? y < n.y - .5 : y > n.y + n.h + .5;
+// [the end, its side] that a line runs round: its route goes behind one of its own ends while its other end is not there. A
+// long line passed the detour rule however it went round (clinic's reminder: over the patient, down its far side, under it)
+const roundEnd = e => [[e.s, e.fs, e.pts[e.pts.length - 1]], [e.t, e.ts, e.pts[0]]].find(([n, side, far]) => n && side && !behind(n, side, far) && e.pts.some(p => behind(n, side, p)));
 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 = [], say = teller(issues, refs);
@@ -1525,6 +1596,7 @@ function routeAudit(geo, where, only, refs) { // only: a set of edges; counts ju
       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)) say(`${where}: edge ${name(e)} passes within ${ex}px of node "${n.label}"`, e, n); });
       const dt = detour(e.pts); if (dt) say(`${where}: edge ${name(e)} takes a detour (${Math.round(dt[0])}px for ${Math.round(dt[1])}px)`, e);
+      const r = roundEnd(e); if (r) say(`${where}: edge ${name(e)} runs round its own end "${r[0].label}"`, e, r[0].box ? (geo.families || []).find(f => f.id === r[0].id) : r[0]);
       // 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) say(`${where}: edge ${name(e)} runs right-to-left`, e);
     });
@@ -2212,7 +2284,7 @@ export function layout(model, viewId, options = {}) {
 }
 
 /** 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
+ *  lines round their own ends, 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 = {}) {
@@ -2536,8 +2608,8 @@ export function drift(model, observed, options = {}) {
   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);
+// the reader's setting; a handle drawn instant (the page's #check, #still and #shot hooks) is still on top of it, on its own
+const reducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 let SHEET = null;
 const sheet = () => { if (!SHEET) { SHEET = new CSSStyleSheet(); SHEET.replaceSync(STYLES); } return SHEET; };
 const INNER = Symbol('umlimator.inner'); // what mountPage needs from render() beyond the public handle
@@ -2554,7 +2626,8 @@ async function pngOf(file) {
 
 export function render(container, model, options = {}) {
   const P = options._page || {}; // the standalone page's hooks: status line, overlay insets, still and reader drawing
-  if (P.instant) INSTANT = true;
+  const instant = !!P.instant, still = () => instant || reducedMotion(); // this map's motion: an instant page stills only itself
+  const ctrlWheel = options.wheel === 'ctrl'; // the wheel zooms only with Ctrl or ⌘ (a trackpad's pinch too), and else scrolls the page: a map in a document
   const OPS = ['add', 'rename', 'move', 'delete', 'reorder'], ed = options.editable;
   const E = ed === true ? Object.fromEntries(OPS.map(o => [o, true])) : ed && typeof ed === 'object' ? Object.fromEntries(OPS.map(o => [o, !!ed[o]])) : null;
   const can = op => !!(E && E[op]);
@@ -2565,6 +2638,7 @@ export function render(container, model, options = {}) {
   const own = typeof options.measure === 'function' ? options.measure : null;
   let measure = options.measure === false ? null : own || hostMeasure(host), current = model;
   const expanded = {}; // per view: the cards unfolded in place (#71), in the order they unfolded; in this handle only, never in the model
+  const asked = {}; // per view: card id -> the inner view it waits for, when E or Alt + click asked to unfold it before the host loaded that view
   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()];
@@ -2578,59 +2652,88 @@ export function render(container, model, options = {}) {
           <button data-z="up" title="Up one level (Esc)" aria-label="Up one level">↑</button><span class="sep"></span>
           <button data-z="out" title="Zoom out (−)" aria-label="Zoom out">−</button><button data-z="fit" class="pct" title="Fit to screen (0)">100%</button><button data-z="in" title="Zoom in (+)" aria-label="Zoom in">+</button><span class="sep"></span>
           <button data-z="one" title="Actual size (1)">1:1</button><button data-z="flow" title="Animate flow direction (F)" aria-label="Animate flow">≋</button>${E && E.add ? '<span class="sep"></span><button data-z="add" title="Add a card (N, or Alt + double-click)" aria-label="Add a card">＋</button>' : ''}<span class="depth" title="Reading depth follows zoom">READ</span>
-        </div>`}</div></div>${!framed ? '' : (options.legend ? '<div class="m-legend"></div>' : '') + (options.hints ? `<div class="hint" role="status" aria-live="polite">${hintHTML()}</div>` : '') + '</div>'
+        </div>`}</div></div>${!framed ? '' : (options.legend ? '<div class="m-legend"></div>' : '') + (options.hints ? `<div class="hint" role="status" aria-live="polite">${hintHTML('', ctrlWheel)}</div>` : '') + '</div>'
           + (options.details ? '<aside class="panel" aria-label="Node details" hidden></aside>' : '') + '</div>'
           + (options.nav ? '<button class="ibtn um-navbtn" title="Views (O)" aria-label="Toggle the views list" aria-expanded="false">☰</button><aside class="outline" aria-label="Views"></aside>' : '') + '</div>'}`;
   const stage = root.querySelector('.stage'), q = s => root.querySelector(s);
-  const tell = q('.hint') && hinter(q('.hint'), hintHTML()); // the hint line says what just happened, for a while
+  const tell = q('.hint') && hinter(q('.hint'), hintHTML('', ctrlWheel)); // the hint line says what just happened, for a while
   const subs = {};
-  const emit = (type, e) => { const f = (options.on || {})[type]; if (f) f(e); (subs[type] || []).slice().forEach(fn => fn(e)); };
+  // each listener on its own: an error in one is reported, and the map's own transition goes on (a host's bug never wedges it)
+  const fail = err => { if (typeof reportError === 'function') reportError(err); else console.error(err); };
+  const emit = (type, e, last = false) => { if (dead && !last) return; [(options.on || {})[type], ...(subs[type] || [])].forEach(fn => { if (typeof fn !== 'function') return; try { fn(e); } catch (err) { fail(err); } }); if (type !== 'state') touch(); };
+  /* the map's state for hosts and agents (0.14.0): handle.state is a fresh, frozen, JSON-serializable snapshot, and the state
+     event says which of its keys changed, once a frame at most (on a 16 ms timer, so a page in a hidden tab still says it).
+     The camera is the exception: a pan, zoom, glide or drag is one state event, once it comes to rest; until then the
+     event's camera is where it last rested (handle.state reads it live) */
+  const KEYS = ['view', 'navigating', 'selection', 'expanded', 'lens', 'overlays', 'story', 'tour', 'replay', 'camera', 'flow', 'motion', 'gesture', 'destroyed'];
+  let lastState = null, stateT = 0, camRest = null, restT = 0; // the last state event's snapshot and the flush to come; the camera at rest, and its check to come
+  const listensState = () => !!((options.on || {}).state || (subs.state || []).length);
+  function touch() { if (!stateT && !dead && listensState()) stateT = setTimeout(flushState, 16); }
+  function flushState(last = false) { clearTimeout(stateT); stateT = 0; if (!listensState() || (dead && !last)) return;
+    const s = snapshot(true), changed = KEYS.filter(k => JSON.stringify(s[k]) !== JSON.stringify(lastState ? lastState[k] : undefined)); lastState = s;
+    if (changed.length) emit('state', { state: s, changed }, last); }
+  // at rest: 150 ms with no change, no glide, no press on the map and no move under way; a moving camera is looked at again
+  function camMoved() { clearTimeout(restT); restT = !dead && listensState() ? setTimeout(rested, 150) : 0; }
+  function rested() { restT = 0; if (dead) return; if (cam && (cam.anim || cam.ptrs.size) || nav) return camMoved(); camRest = camNow(); touch(); }
   let cam = null, geo = null, svg = null, cur = null, sel = null, more = [], busy = false, paused = false, dead = false;
   const timers = new Set(), later = (f, ms) => { const t = setTimeout(() => { timers.delete(t); if (!dead) f(); }, ms); timers.add(t); return t; };
-  const sleep = ms => new Promise(r => later(r, reducedMotion() ? 0 : ms));
+  const sleeping = new Set(); // a sleep resolves on its own, or when the map is destroyed: nothing that awaits one is left pending
+  const sleep = ms => new Promise(r => { if (dead) return r(); const wake = () => { sleeping.delete(wake); r(); }; sleeping.add(wake); later(wake, still() ? 0 : ms); });
   const status = t => P.status ? P.status(t) : tell && tell(t);
   const wide = P.wide || (() => (cam ? cam.size()[0] : stage.clientWidth) > 820);
 
   const upOf = () => (P.upTarget ? P.upTarget() : (ctx.V[cur] || {}).parent) || null;
   const nodeRef = id => ({ type: 'node', id, view: cur });
-  const picked = () => sel ? [...more.map(nodeRef), sel] : []; // every selected thing, the latest last (more: other selected cards)
+  const copyRef = r => r && { ...r, ...(Array.isArray(r.ids) ? { ids: [...r.ids] } : {}) }; // a host gets copies: the map's Refs stay its own
+  const picked = () => sel ? [...more.map(nodeRef), copyRef(sel)] : []; // every selected thing, the latest last (more: other selected cards)
   const say = t => { const l = root.querySelector('.um-live'); if (l) l.textContent = t; };
   const nameOf = id => ctx.nodeIn(id, cur).label || ((geo.families || []).find(f => f.id === id) || {}).label || id;
-  const emitSel = () => {
+  let said = '[]'; // the selection last reported: a select event means it changed, or a click asked again (again)
+  const emitSel = (again = false) => {
+    const now = JSON.stringify(picked()); if (now === said && !again) return; said = now;
     say(!sel ? 'Nothing selected' : sel.type === 'node' ? nameOf(sel.id) + (more.length ? `, ${more.length + 1} cards selected` : ', selected')
       : sel.type === 'edge' ? (e => e ? `Line from ${nameOf(e.from)} to ${nameOf(e.to)}, selected` : 'Line selected')(geo.edges[edgeIndex(sel)]) : `Box ${(svg.querySelector(`.family[data-family="${CSS.escape(sel.id)}"] .family-title`) || {}).textContent || sel.id}, selected`);
-    emit('select', { target: sel, targets: picked() });
+    emit('select', { target: copyRef(sel), targets: picked() });
   };
   const edgeRef = e => ({ type: 'edge', ids: edgeRefIds(e), view: cur });
   const edgeIndex = ref => geo.edges.findIndex(e => { const ids = edgeRefIds(e); return ids.length === ref.ids.length && ids.every((x, i) => x === ref.ids[i]); });
   const exists = ref => !ref ? true : ref.type === 'node' ? !!geo.byId[ref.id] : ref.type === 'edge' ? edgeIndex(ref) >= 0
     : ref.type === 'container' ? (geo.families || []).some(f => f.id === ref.id) : false;
 
-  function mount(vid) {
-    cur = vid; ctx.planOf(vid);
+  // focus in the map goes back on the same card or line in a new picture, else on the canvas; focus outside the map stays there
+  const focusOf = () => { const a = root.activeElement; if (!a || !(a === stage || (svg && svg.contains(a)) || a.closest('.empty-view'))) return null;
+    const lk = a.closest('.line-key'), k = a.closest('[data-node]'), g = a.closest('.node');
+    return lk && geo.edges[+lk.dataset.i] ? edgeRef(geo.edges[+lk.dataset.i]) : k ? nodeRef(k.dataset.node) : g ? nodeRef(g.dataset.id) : {}; };
+  const refocus = ref => { if (!ref) return; if ((ref.type === 'node' || ref.type === 'edge') && exists(ref)) focusMap(ref, false); else stage.focus({ preventScroll: true }); };
+  function mount(vid) { // vid: a view of the model, checked first (one it lacks changes nothing: false), or null for a model with no views
+    const v = vid == null ? null : ctx.V[vid]; if (vid != null && !v) return false;
+    const back = focusOf();
+    cancelGesture(!!v && vid === cur); // a new picture: a drag or a line under way stops; a name field stays over its card if the view draws it still
+    cur = v ? vid : null; if (v) ctx.planOf(vid);
     stage.querySelectorAll('svg.map-svg, .empty-view').forEach(s => s.remove());
-    const v = ctx.V[vid], empty = !(v.nodeIds || []).some(i => ctx.N[i]);
-    if (empty) { // a view with nothing in it gets a friendly card, not a blank canvas
+    if (!v || !(v.nodeIds || []).some(i => ctx.N[i])) { // a view with nothing in it, or a model with no views, gets a friendly card, not a blank canvas
       geo = { nodes: [], edges: [], groups: [], lanes: [], families: [], byId: {}, stats: {}, bounds: { x: 0, y: 0, w: 400, h: 300 } };
       stage.insertAdjacentHTML('afterbegin', '<svg class="map-svg" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"></svg>');
-      const p = v.parent;
-      stage.insertAdjacentHTML('beforeend', `<div class="empty-view"><div class="ico">◌</div><h4>Nothing here yet</h4><p>This view has no nodes yet.</p>${p ? `<button class="btn" data-v="${esc(p)}">← Back to ${esc(String(ctx.V[p].title || p).split(' · ')[0])}</button>` : ''}</div>`);
+      const p = v && v.parent;
+      stage.insertAdjacentHTML('beforeend', `<div class="empty-view"><div class="ico">◌</div><h4>Nothing here yet</h4><p>${v ? 'This view has no nodes yet.' : 'This map has no views yet.'}</p>${p ? `<button class="btn" data-v="${esc(p)}">← Back to ${esc(String(ctx.V[p].title || p).split(' · ')[0])}</button>` : ''}</div>`);
     } else {
       const c = ctx.geoCache[vid] ||= ctx.buildView(vid, { tour: P.tour !== false, openHint: P.openHint !== false });
       stage.insertAdjacentHTML('afterbegin', c.markup); geo = c.g;
     }
     svg = stage.querySelector('svg'); svg.classList.add('map-svg'); if (paused) svg.pauseAnimations();
-    if (!cam) cam = new Camera(stage, svg, { wheel: 'zoom', maxFit: 1.15, max: 4, mapDepth: 0.3, onChange: onCam, skip: e => !!((can('move') || can('reorder') || can('add')) && e.target.closest && e.target.closest('.node, .um-handle')), inset: () => clearOf([].concat(P.inset ? P.inset() : fitIn())) });
+    if (!cam) cam = new Camera(stage, svg, { wheel: ctrlWheel ? 'ctrl' : 'zoom', maxFit: 1.15, max: 4, mapDepth: 0.3, onChange: onCam, still, skip: e => !!((can('move') || can('reorder') || can('add')) && e.target.closest && e.target.closest('.node, .um-handle')), inset: () => clearOf([].concat(P.inset ? P.inset() : fitIn())) });
     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 && !(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();
+    if (v && !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
+    sel = null; more = []; sub = null; tabKeys(); paint(); // no select event here: the caller reports, once, what became of the selection
     endTrip(); relens(); drawMarks(); // a new picture: a tour or replay on the old one ends; the host's marks and the lens go on again (#63, #94)
-    if (pc) pc.chrome();
-    if (P.onMount) P.onMount(inner);
+    if (naming) { if (naming.ref && !exists(naming.ref)) naming.close(false); else naming.place(); }
+    refocus(back);
+    if (v && pc) pc.chrome();
+    if (v && P.onMount) P.onMount(inner);
+    touch();
+    return true;
   }
   // at fit the cards keep off the pieces over the map (#99): the views list's button, the hint line, and the legend, which
   // the map leaves room for above it or to its right, whichever leaves the map larger
@@ -2655,6 +2758,8 @@ export function render(container, model, options = {}) {
     clear = { geo, key, sets }; return sets;
   }
   function onCam(c) {
+    camMoved(); // the state event says where the camera comes to rest, once
+    if (naming) naming.place(); // a name field stays over what it names
     const pct = q('.pct'), depth = q('.depth');
     if (pct) pct.textContent = Math.round(c.s.k * 100) + '%';
     if (depth) depth.textContent = (stage.dataset.depth || 'read').toUpperCase();
@@ -2728,7 +2833,7 @@ export function render(container, model, options = {}) {
       svg.querySelectorAll('.node').forEach(g => { const id = g.dataset.id; g.classList.toggle('sel', id === nid || more.includes(id)); g.classList.toggle('nb', ups.has(id) || downs.has(id)); });
       svg.querySelectorAll('.edge-g').forEach(g => g.classList.toggle('hot', g.dataset.from === nid || g.dataset.to === nid));
       svg.querySelectorAll('.e-lab').forEach(g => { const e = geo.edges[g.dataset.i]; g.classList.toggle('hot', e.from === nid || e.to === nid); });
-      svg.querySelectorAll('.n-port').forEach(p => p.classList.toggle('hot', p.dataset.edges.split(',').some(i => geo.edges[i].from === nid || geo.edges[i].to === nid)));
+      svg.querySelectorAll('.n-port[data-edges]').forEach(p => p.classList.toggle('hot', p.dataset.edges.split(',').some(i => geo.edges[i] && (geo.edges[i].from === nid || geo.edges[i].to === nid)))); // not an ease's fading copy (#67)
       stage.classList.add('focusing');
     } else if (sel.type === 'edge') {
       const i = edgeIndex(sel), e = geo.edges[i];
@@ -2741,13 +2846,15 @@ export function render(container, model, options = {}) {
   }
   function select(ref, o = {}) {
     if (ref && (ref.type === 'chip' || ref.type === 'badge')) ref = ref.container != null ? { type: 'container', id: ref.container } : nodeRef(ref.node); // a chip or badge: its card (box)
-    if (ref && (!geo || !exists(ref))) return;
-    const before = JSON.stringify(sel);
-    const was = more.length; more = [];
-    sel = ref ? { ...ref, view: cur } : null;
+    if (ref && (!geo || !exists(ref))) return false;
+    if (!o.story) readerMoved(); // a selection the story didn't make: a story playing waits (0.14.0)
+    more = []; selectNew = false; // the reader moved on: an add the host has not answered selects nothing later
+    sel = ref ? { ...copyRef(ref), view: cur } : null;
+    if (!ofSel(sub)) sub = null; // a chip or badge acts for Delete and Alt + arrows only while its card or box is the one selected
     paint();
     if (sel && sel.type === 'node' && o.reveal !== false) { const n = geo.byId[sel.id]; requestAnimationFrame(() => { if (!dead) cam.reveal({ x: n.x, y: n.y, w: n.w, h: n.h }); }); }
-    if (JSON.stringify(sel) !== before || o.again || was) emitSel();
+    emitSel(!!o.again);
+    return true;
   }
 
   /* keyboard: the nearest card in an arrow's direction, by distance along it plus twice the distance across it */
@@ -2764,41 +2871,65 @@ export function render(container, model, options = {}) {
     if (id === sel.id) { if (!more.length) return select(null); sel = nodeRef(more.pop()); }
     else if (more.includes(id)) more = more.filter(x => x !== id);
     else { more.push(sel.id); sel = nodeRef(id); }
-    paint(); emitSel();
+    sub = null; selectNew = false; paint(); emitSel();
   }
 
-  /* navigation: zoom into the card that opens a view, out to the card a view came from */
-  async function go(vid, how = {}) {
-    if (!ctx.V[vid] || busy || dead) return;
-    if (vid === cur) { if (how.select) select(nodeRef(how.select)); return; }
-    busy = true;
-    const prev = cur, via = how.via;
-    let mode = 'jump';
-    if (prev && ctx.chain(vid).includes(prev) || how.via) mode = 'in';
-    else if (prev && ctx.chain(prev).includes(vid)) mode = 'out';
-    if (P.onNavigate) P.onNavigate(vid, prev, mode);
-    if (prev && !reducedMotion()) {
-      if (mode === 'in' && via && geo.byId[via]) { const n = geo.byId[via]; await cam.animate(cam.zoomTo({ x: n.x, y: n.y, w: n.w, h: n.h }, 1.1), 420); }
-      else await cam.animate({ k: cam.s.k * (mode === 'out' ? 0.6 : 1) }, mode === 'out' ? 260 : 1);
-      stage.classList.add('fading'); await sleep(130);
-    }
-    if (dead) return;
-    mount(vid);
-    const fitS = startView();
-    if (prev && !reducedMotion()) {
-      if (mode === 'in') cam.set({ ...fitS, k: fitS.k * 0.55 });
-      else if (mode === 'out') { const back = geo.nodes.find(n => ctx.childOf(n.id, cur) === prev); cam.set(back ? cam.zoomTo({ x: back.x, y: back.y, w: back.w, h: back.h }, 1.1) : { ...fitS, k: fitS.k * 1.6 }); }
-      else cam.set(fitS);
-      stage.classList.remove('fading');
-      await cam.animate(fitS, mode === 'jump' ? 1 : 460);
-    } else { cam.set(fitS); stage.classList.remove('fading'); }
-    if (dead) return;
-    cam.touched = false;
-    if (mode === 'out') { const back = geo.nodes.find(n => ctx.childOf(n.id, cur) === prev); if (back) flash(back.id); }
-    if (how.select) select(nodeRef(how.select), { reveal: true });
-    busy = false;
-    say('Showing ' + (ctx.V[cur].title || cur));
-    emit('viewchange', { view: vid, from: prev });
+  /* navigation: zoom into the card that opens a view, out to the card a view came from. One move at a time, the latest
+     wins: a setView() (or open, up) during a move takes it to its own view instead, and every request's promise says
+     whether its view was shown (false: unknown, superseded, or the map destroyed). Under reduced motion a move is done
+     before go() returns. */
+  let nav = null; // the move under way: { to, how, waiting: the resolvers of the requests it answers }
+  const answer = ok => { if (nav) nav.waiting.splice(0).forEach(r => r(ok)); };
+  function go(vid, how = {}) {
+    if (dead) return Promise.resolve(false);
+    if (!ctx.V[vid]) { warn(`setView("${vid}"): the model has no such view; its views are ${ctx.views.map(v => `"${v.id}"`).join(', ') || 'none'}`); return Promise.resolve(false); }
+    if (!nav && vid === cur) { if (how.select) select(nodeRef(how.select)); return Promise.resolve(true); }
+    if (!how.story) readerMoved(); // a move the story didn't ask for: a story playing waits (0.14.0)
+    return new Promise(res => {
+      if (nav) { if (nav.to !== vid) answer(false); nav.to = vid; nav.how = how; nav.waiting.push(res); touch(); return; } // superseded: those requests learn so now
+      nav = { to: vid, how, waiting: [res] }; move();
+    });
+  }
+  async function move() { // takes the map from view to view until it shows the latest target; finishes or rolls back (busy, fading)
+    const mine = nav, start = cur; let left = false; busy = true; touch();
+    try {
+      for (;;) {
+        const prev = cur, via = () => nav.how.via; // a request's via: the card it opens, when the request is the latest
+        const modeOf = v => prev && ctx.chain(v).includes(prev) || (v === nav.to && via()) ? 'in' : prev && ctx.chain(prev).includes(v) ? 'out' : 'jump';
+        if (prev && !still() && nav.to !== prev) { // leave: into the card, or out, then fade
+          const m = modeOf(nav.to), n = m === 'in' && via() && geo.byId[via()];
+          if (n) await cam.animate(cam.zoomTo({ x: n.x, y: n.y, w: n.w, h: n.h }, 1.1), 420);
+          else await cam.animate({ k: cam.s.k * (m === 'out' ? 0.6 : 1) }, m === 'out' ? 260 : 1);
+          stage.classList.add('fading'); left = true; await sleep(130);
+          if (dead || nav !== mine) return;
+        }
+        const vid = nav.to; // the latest request: one made during the leave is the view drawn
+        if (!ctx.V[vid] || vid === cur) break; // gone from the model (an update() during the move), or back where it started
+        const mode = modeOf(vid);
+        delete asked[prev]; // an unfold asked for on the view left is not waited for (#71)
+        if (P.onNavigate) P.onNavigate(vid, prev, mode);
+        mount(vid); emitSel(); left = false;
+        const fitS = startView(), back = mode === 'out' ? geo.nodes.find(n => ctx.childOf(n.id, cur) === prev) : null;
+        if (prev && !still()) {
+          if (mode === 'in') cam.set({ ...fitS, k: fitS.k * 0.55 });
+          else if (mode === 'out') cam.set(back ? cam.zoomTo({ x: back.x, y: back.y, w: back.w, h: back.h }, 1.1) : { ...fitS, k: fitS.k * 1.6 });
+          else cam.set(fitS);
+          stage.classList.remove('fading');
+          await cam.animate(fitS, mode === 'jump' ? 1 : 460);
+        } else { cam.set(fitS); stage.classList.remove('fading'); }
+        if (dead || nav !== mine) return;
+        cam.touched = false;
+        if (back) { flash(back.id); if (root.activeElement === stage) focusMap(nodeRef(back.id), false); } // keys go on from the card come back to
+        if (nav.to === cur) break; // else a request during the zoom-in: on from here
+      }
+      // done: settled before any event, so a listener's own setView() starts a move of its own
+      const ok = nav.to === cur, how = nav.how, shown = cur;
+      answer(ok); nav = null; busy = false; stage.classList.remove('fading');
+      if (left && cur) cam.animate(startView()); // left, and no other view drawn: the camera comes back
+      if (shown && shown !== start) { say('Showing ' + (ctx.V[shown].title || shown)); emit('viewchange', { view: shown, from: start }); }
+      if (ok && how.select && cur === shown) select(nodeRef(how.select), { reveal: true });
+    } catch (err) { fail(err); } // a bug of ours or of a page hook: reported, and the map left usable below
+    finally { if (nav === mine) { answer(false); nav = null; busy = false; stage.classList.remove('fading'); } touch(); }
   }
   /* where the camera starts: fit on a desk; on a phone a readable zoom from the top-left corner */
   function startView() {
@@ -2822,15 +2953,20 @@ export function render(container, model, options = {}) {
     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 (!on && asked[cur]) asked[cur].delete(nid); // folded back before its view came: no longer waited for
     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
+    if ((expanded[cur] || []).includes(nid) !== on) { emitSel(); return false; } // the model would not have it after all
+    unfolded(nid, on);
+    return true;
+  }
+  function unfolded(nid, on) { // the box a card became is selected and brought into view, or the card it folded back into: one select event
     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));
+    else emitSel();
     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;
@@ -2839,23 +2975,31 @@ export function render(container, model, options = {}) {
     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 (!setUnfold(nid, on)) {
+      const c2 = on && ctx.opensOf(nid, cur);
+      if (c2 && !ctx.V[c2]) { (asked[cur] ||= new Map()).set(nid, c2); say(`${nameOf(nid)}: its inner view is not loaded yet; it unfolds here once it is`); } // the update() that brings it unfolds it
+      if (on) status(c2 && !ctx.V[c2] ? 'Its inner view is not loaded yet' : 'Nothing more to show here');
+      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) {
+  function setFlow(on, save = true) { // save: the page keeps it as the reader's choice
     stage.classList.toggle('flowing', on);
     const b = q('[data-z="flow"]'); if (b) { b.classList.toggle('on', on); b.setAttribute('aria-pressed', on); }
-    if (P.onFlow) P.onFlow(on);
+    if (save && P.onFlow) P.onFlow(on);
+    touch();
   }
-  function pause(on) { paused = on; stage.classList.toggle('paused', on); if (svg) on ? svg.pauseAnimations() : svg.unpauseAnimations(); }
+  function pause(on) { const was = paused; paused = on; stage.classList.toggle('paused', on); if (svg) on ? svg.pauseAnimations() : svg.unpauseAnimations();
+    if (story && on !== was) { if (on) clearTimeout(story.timer); else arm(story); } } // the page's Pause holds every clock: a dot that rides (startTrip), and a story's step, given its time again after
 
   /* 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 (k === 'Escape' && cancelGesture()) return true; // Escape stops a gesture in progress before anything else
     if (story) { const r = storyKey(e); if (r != null) return r; } // a story's keys first (#69)
+    if (k === 'Escape' && trip && trip.kind) { const was = trip.kind; endTrip(); say(was === 'replay' ? 'Replay stopped' : 'Tour stopped'); return true; } // Esc ends a tour or a replay first
     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]');
@@ -2872,35 +3016,61 @@ export function render(container, model, options = {}) {
       const id = g ? g.dataset.id : sel.id;
       if (sel && sel.type === 'node' && sel.id === id && ctx.opensOf(id, cur)) open(id); else select(nodeRef(id), { again: true }); }
     else if (k === 'Escape' || k === 'Backspace') { if (sel) select(null); else up(); }
-    else if (k === 'f' || k === 'F') setFlow(!stage.classList.contains('flowing'));
+    else if ((k === 'f' || k === 'F') && !reducedMotion()) setFlow(!stage.classList.contains('flowing')); // under reduced motion no flow is drawn, and ≋ isn't offered
     else if (k.startsWith('Arrow') && g && geo.byId[g.dataset.id]) { const to = nearest(geo.byId[g.dataset.id], k); if (!to) return false;
       const tg = svg.querySelector(`.node[data-id="${CSS.escape(to.id)}"]`); tg.focus({ preventScroll: true }); cam.reveal({ x: to.x, y: to.y, w: to.w, h: to.h }); }
     else if (k.startsWith('Arrow')) { const d = 80, m = { ArrowLeft: [d, 0], ArrowRight: [-d, 0], ArrowUp: [0, d], ArrowDown: [0, -d] }[k]; if (!m) return false; cam.pan(m[0], m[1], true); }
     else return false;
+    readerMoved(); // a key the map acted on: a story playing waits
     return true;
   }
 
 
   /* ---------- editing: a gesture never changes the picture; it emits a `change` the host may apply (then update()) ----------
      Each event carries what the user meant and, apart from it, an optional hint: where the card was dropped. */
-  let seq = 0, sub = null, drag = null, conn = null, selectNew = false, swallow = 0;
+  let seq = 0, sub = null, drag = null, conn = null, naming = null, stale = false, selectNew = false, swallow = 0;
+  /* the gesture in progress, one at a time: a card dragged, a line drawn from the handle, or a name field open (naming:
+     { ref, place, close }). Escape, a new picture (setView, an update that redraws, unfolding) and destroy() cancel it,
+     with no change emitted; keepName leaves a name field open over the same view's card, which mount() checks */
+  const gestureNow = () => conn ? 'connecting' : drag && drag.on ? 'dragging' : naming ? 'naming' : 'idle';
+  function cancelGesture(keepName = false) { // true when something was in progress
+    let was = false;
+    if (conn) { if (conn.path) conn.path.remove(); conn = null; was = stale = true; } // its pointerup and click then do nothing
+    if (drag) { if (drag.ghost) drag.ghost.remove(); if (drag.on) was = stale = true; drag = null; }
+    if (naming && !keepName) { naming.close(false); was = true; }
+    if (was) touch();
+    return was;
+  }
   const placed = {};  // per view: the slot every card had when last drawn (stable positions across updates; never in the model)
-  const hints = {};   // per view: id -> [col, row] where the last move dropped a card, for the next update only
-  const slotsH = {};  // per view: id -> [col, row] of a reordered column group (exact), for the next update only
-  const addHints = []; // slots of adds not yet seen as new cards
+  /* an edit's places wait for the host's answer, and the next update() says from its model whether it applied the edit:
+     a move into or out of a box shows in the boxes, an add as a new card with its name, and a place alone (a move to a
+     spot, a reorder) as the card's own `layout` entry the host wrote, or as the model unchanged (the host answering an
+     edit that changes no field). Any other update drops it: an edit the host refused moves nothing, whatever comes next.
+     Places an update applied are kept with the models before and after it, so an update back to either (undo, redo)
+     puts the cards back where they were then */
+  let pending = null; // the latest gesture's: { op, view, card, place, to, exact, label, ids, base, at }
+  const moves = []; // { view, base, after, before, then }: places an update applied, and the ones before it
+  const viewIn = (m, vid) => arrOf(m && m.views).find(v => v && v.id === vid) || {};
+  const boxIdOf = (m, vid, id) => { const bs = arrOf(viewIn(m, vid).containers).filter(b => b && b.id != null && arrOf(b.nodeIds).includes(id)); // the innermost box listing it
+    return ((bs.find(b => !bs.some(o => o.parent === b.id)) || bs[0]) || {}).id ?? null; };
+  const norm = t => String(t ?? '').trim().replace(/\s+/g, ' ').toLowerCase();
+  const labelIn = (m, v, id) => norm(((v.nodeOverrides || {})[id] || {}).label ?? ([...arrOf(m.nodes), ...arrOf(m.views).flatMap(w => arrOf(w && w.nodes))].find(n => n && n.id === id) || {}).label);
   function change(c, exact) {
     const ev = { id: 'c' + Date.now().toString(36) + '-' + (++seq), view: cur, ...c };
-    // only the latest gesture's hint waits for the host: an edit the host never answered leaves no trace
-    [hints, slotsH].forEach(o => Object.keys(o).forEach(k => delete o[k])); addHints.length = 0;
-    if (exact) slotsH[cur] = exact;
-    else if (ev.hint && Number.isFinite(ev.hint.col)) {
-      if (c.op === 'add' && c.kind === 'node') addHints.push([ev.hint.col, ev.hint.row]);
-      else if (c.target && c.target.type === 'node') (hints[cur] ||= {})[c.target.id] = [ev.hint.col, ev.hint.row];
-    }
-    if (c.op === 'add' && c.kind === 'node') selectNew = true;
+    // only the latest gesture waits for the host: an edit the host never answered leaves no trace
+    const place = ev.hint && Number.isFinite(ev.hint.col) ? [ev.hint.col, ev.hint.row] : null, card = c.target && c.target.type === 'node' ? c.target.id : null, v = viewIn(current, cur);
+    pending = (place || exact) && (card || (c.op === 'add' && c.kind === 'node')) ? { op: c.op, view: cur, card, place, exact, label: norm(c.label), ids: arrOf(v.nodeIds),
+      to: c.op === 'move' && (c.to ?? null) !== boxIdOf(current, cur, card) ? c.to ?? null : undefined, base: JSON.stringify(current), at: JSON.stringify((v.layout || {})[card] ?? null) } : null;
+    selectNew = c.op === 'add' && c.kind === 'node'; // the latest gesture's: an add the host never answered selects nothing later
     emit('change', ev);
     return ev;
   }
+  function answered(p, m2, json) { // the update's model shows the edit: the card its places go to, else null
+    const v = viewIn(m2, p.view), was = new Set(p.ids);
+    if (p.op === 'add') return arrOf(v.nodeIds).find(id => !was.has(id) && labelIn(m2, v, id) === p.label) ?? null; // a new card with its name
+    if (p.to !== undefined) return boxIdOf(m2, p.view, p.card) === p.to ? p.card : null; // into or out of a box
+    return json === p.base || JSON.stringify((v.layout || {})[p.card] ?? null) !== p.at ? p.card : null; // a place alone
+  }
   const worldOf = e => { const r = stage.getBoundingClientRect(); return cam.toWorld(e.clientX - r.left, e.clientY - r.top); };
   const area = f => f.w * f.h;
   const boxAt = (x, y) => (geo.families || []).filter(f => x >= f.x && x <= f.x + f.w && y >= f.y && y <= f.y + f.h).sort((a, b) => area(a) - area(b))[0] || null;
@@ -2945,27 +3115,34 @@ export function render(container, model, options = {}) {
     if (k === 'Delete' && can('delete') && sel) { change({ op: 'delete', target: ofSel(sub) ? sub : sel }); return true; }
     return false;
   }
-  /* a text field over the canvas: names a new card, or renames a card, line or container */
-  function editor(box, text, done) {
-    root.querySelectorAll('.um-rename').forEach(x => x.remove());
-    const k = cam.s.k, [W, H] = cam.size(), inp = document.createElement('input');
+  /* a text field over the canvas: names a new card, or renames a card, line or container. It follows the camera, and a
+     redraw of the same view keeps it over its card (a new view, or its card gone, closes it: see mount) */
+  const nameBox = ref => { // where the field sits, in map units: over a card's name, a line's label (or its middle), a box's title
+    if (ref.type === 'node') { const n = geo.byId[ref.id]; return n ? { x: n.x + 50, y: n.y + n.h / 2 - 13, w: n.w - 58, h: 26 } : null; }
+    if (ref.type === 'edge') { const e = geo.edges[edgeIndex(ref)]; if (!e) return null; const L = e.lbl, m = e.pts[Math.floor(e.pts.length / 2)];
+      return L ? { x: L.x - 8, y: L.y - 2, w: L.w + 16, h: L.h + 4 } : { x: m[0] - 60, y: m[1] - 12, w: 120, h: 24 }; }
+    const f = ref.type === 'container' && (geo.families || []).find(x => x.id === ref.id); return f ? { x: f.x + 8, y: f.y + 2, w: Math.min(f.w - 16, 220), h: 24 } : null; };
+  function editor(where, text, done, ref = null) { // where: a box in map units (a new card's), or ref names what the field sits over
+    if (naming) naming.close(false);
+    const inp = document.createElement('input');
     inp.className = 'um-edit um-rename'; inp.value = text; inp.setAttribute('aria-label', text ? 'New name' : 'Name of the new card');
-    Object.assign(inp.style, { left: (box.x - cam.s.cx) * k + W / 2 + 'px', top: (box.y - cam.s.cy) * k + H / 2 + 'px', width: Math.max(120, box.w * k) + 'px', height: Math.max(22, box.h * k) + 'px', fontSize: Math.max(11, 13 * k) + 'px' });
-    stage.appendChild(inp); inp.focus(); inp.select();
+    const place = () => { const box = ref ? nameBox(ref) : where; if (!box) return; const k = cam.s.k, [W, H] = cam.size();
+      Object.assign(inp.style, { left: (box.x - cam.s.cx) * k + W / 2 + 'px', top: (box.y - cam.s.cy) * k + H / 2 + 'px', width: Math.max(120, box.w * k) + 'px', height: Math.max(22, box.h * k) + 'px', fontSize: Math.max(11, 13 * k) + 'px' }); };
+    place(); stage.appendChild(inp); inp.focus(); inp.select();
     // once only: removing a focused field can fire blur (cancel) in the middle of a commit
     let closed = false;
-    const finish = ok => { if (closed) return; closed = true; const v = inp.value.trim(); if (ok && v && v !== text) done(v); inp.remove(); stage.focus({ preventScroll: true }); };
+    const finish = ok => { if (closed) return; closed = true; naming = null; touch(); const v = inp.value.trim(); if (ok && v && v !== text) done(v); inp.remove(); stage.focus({ preventScroll: true }); };
+    naming = { ref, place, close: finish }; touch();
     inp.addEventListener('keydown', e => { e.stopPropagation(); if (e.key === 'Enter') { e.preventDefault(); finish(true); } else if (e.key === 'Escape') { e.preventDefault(); finish(false); } });
     inp.addEventListener('blur', () => finish(false));
     inp.addEventListener('pointerdown', e => e.stopPropagation());
     return inp;
   }
   function rename(ref) {
-    if (!can('rename') || !ref) return;
-    if (ref.type === 'node' && geo.byId[ref.id]) { const n = geo.byId[ref.id]; editor({ x: n.x + 50, y: n.y + n.h / 2 - 13, w: n.w - 58, h: 26 }, String(ctx.nodeIn(n.id, cur).label ?? n.label ?? ''), v => change({ op: 'rename', target: ref, label: v })); }
-    else if (ref.type === 'edge') { const e = geo.edges[edgeIndex(ref)]; if (!e) return; const L = e.lbl, m = e.pts[Math.floor(e.pts.length / 2)];
-      editor(L ? { x: L.x - 8, y: L.y - 2, w: L.w + 16, h: L.h + 4 } : { x: m[0] - 60, y: m[1] - 12, w: 120, h: 24 }, String((e.all || [e])[0].label || ''), v => change({ op: 'rename', target: ref, label: v })); }
-    else if (ref.type === 'container') { const f = (geo.families || []).find(x => x.id === ref.id); if (!f) return; editor({ x: f.x + 8, y: f.y + 2, w: Math.min(f.w - 16, 220), h: 24 }, String(f.label || f.id), v => change({ op: 'rename', target: ref, label: v })); }
+    ref = copyRef(ref); if (!can('rename') || !ref || !nameBox(ref)) return;
+    const n = ref.type === 'node' && geo.byId[ref.id], e = ref.type === 'edge' && geo.edges[edgeIndex(ref)], f = ref.type === 'container' && (geo.families || []).find(x => x.id === ref.id);
+    const text = n ? String(ctx.nodeIn(n.id, cur).label ?? n.label ?? '') : e ? String((e.all || [e])[0].label || '') : String(f.label || f.id);
+    editor(null, text, v => change({ op: 'rename', target: ref, label: v }), ref);
   }
   function addAt(x, y) {
     if (!can('add') || !geo) return;
@@ -2980,11 +3157,11 @@ export function render(container, model, options = {}) {
   let pressed = false;
   stage.addEventListener('pointerdown', () => { swallow = 0; pressed = true; }, true);
   ['pointerup', 'pointercancel'].forEach(t => stage.addEventListener(t, () => { pressed = false; }, true));
-  function focusMap(ref = sel) {
+  function focusMap(ref = sel, reveal = true) {
     const line = ref && ref.type === 'edge' && svg && svg.querySelector(`.line-key[data-i="${edgeIndex(ref)}"]`); if (line) return line.focus({ preventScroll: true }); // a line (#43)
     const id = ref && (ref.type === 'node' ? ref.id : ref.node), g = id && svg && [...svg.querySelectorAll('.node')].find(x => x.dataset.id === id); // no CSS.escape: jsdom has none
     if (!g) return stage.focus({ preventScroll: true });
-    g.focus({ preventScroll: true }); const n = geo.byId[id]; if (n) cam.reveal({ x: n.x, y: n.y, w: n.w, h: n.h });
+    g.focus({ preventScroll: true }); const n = geo.byId[id]; if (n && reveal) cam.reveal({ x: n.x, y: n.y, w: n.w, h: n.h });
   }
   stage.addEventListener('focus', e => { if (!pressed && sel && (sel.type === 'node' || sel.type === 'edge') && !(e.relatedTarget && root.contains(e.relatedTarget))) focusMap(); });
   stage.addEventListener('focusin', e => { const t = e.target; if (pressed || !cam || !t.closest || !t.closest('.node, .um-key, .family [data-badge]') || typeof t.getBBox !== 'function') return;
@@ -2993,7 +3170,7 @@ export function render(container, model, options = {}) {
   stage.addEventListener('pointerdown', e => {
     if (!E || e.button !== 0 || e.altKey || !geo) return;
     const hd = e.target.closest('.um-handle');
-    if (hd && can('add')) { e.preventDefault(); try { stage.setPointerCapture(e.pointerId); } catch (_) {} conn = { from: hd.dataset.from, path: null }; return; }
+    if (hd && can('add')) { e.preventDefault(); try { stage.setPointerCapture(e.pointerId); } catch (_) {} conn = { from: hd.dataset.from, path: null }; touch(); return; }
     const g = e.target.closest('.node');
     if (g && geo.byId[g.dataset.id] && (can('move') || can('reorder'))) drag = { id: g.dataset.id, g, x0: e.clientX, y0: e.clientY, on: false, ghost: null, pid: e.pointerId };
   });
@@ -3007,13 +3184,15 @@ export function render(container, model, options = {}) {
     if (!drag) return;
     const k = cam.s.k, dx = (e.clientX - drag.x0) / k, dy = (e.clientY - drag.y0) / k;
     if (!drag.on) { if (Math.hypot(e.clientX - drag.x0, e.clientY - drag.y0) < 5) return;
-      drag.on = true; try { stage.setPointerCapture(drag.pid); } catch (_) {} drag.ghost = drag.g.cloneNode(true); drag.ghost.classList.add('um-ghost'); drag.ghost.classList.remove('sel'); svg.appendChild(drag.ghost); }
+      drag.on = true; try { stage.setPointerCapture(drag.pid); } catch (_) {} drag.ghost = drag.g.cloneNode(true); drag.ghost.classList.add('um-ghost'); drag.ghost.classList.remove('sel'); svg.appendChild(drag.ghost); touch(); }
     drag.ghost.setAttribute('transform', `translate(${dx} ${dy})`);
     const n = geo.byId[drag.id], into = boxAt(n.x + n.w / 2 + dx, n.y + n.h / 2 + dy);
     svg.querySelectorAll('.family.um-target').forEach(f => f.classList.remove('um-target'));
     if (into) { const f = svg.querySelector(`.family[data-family="${CSS.escape(into.id)}"]`); if (f) f.classList.add('um-target'); }
   });
   const endGesture = e => {
+    if (conn || drag) touch(); // the gesture ends
+    if (stale) { stale = false; swallow = performance.now() + 400; return; } // the release of a gesture Escape or a new picture cancelled
     if (conn) { const c = conn; conn = null; if (c.path) c.path.remove(); swallow = performance.now() + 400;
       const g = root.elementFromPoint(e.clientX, e.clientY), t = g && g.closest && g.closest('.node');
       if (t && t.dataset.id !== c.from && geo.byId[t.dataset.id]) change({ op: 'add', kind: 'edge', from: c.from, to: t.dataset.id });
@@ -3037,22 +3216,21 @@ export function render(container, model, options = {}) {
     else d.ghost.remove();
   };
   stage.addEventListener('pointerup', endGesture);
-  stage.addEventListener('pointercancel', () => { if (drag && drag.ghost) drag.ghost.remove(); if (conn && conn.path) conn.path.remove(); drag = conn = null; });
+  stage.addEventListener('pointercancel', () => { if (drag && drag.ghost) drag.ghost.remove(); if (conn && conn.path) conn.path.remove(); drag = conn = null; stale = false; });
   /* the model to draw after an update: cards keep the slots they had (the host's own layout wins), a moved or added card
      takes its hint; kept in this handle only, never written to the host's model */
-  function withPlaces(m) {
+  function withPlaces(m, use = null) { // use: an edit the update applied, { view, hv: id -> its place, ex: a reordered group's places }
     if (options.stableLayout === false) return m;
     const out = structuredClone(m);
     (out.views || []).forEach(v => {
-      const was = placed[v.id], hv = hints[v.id] || {}, ex = slotsH[v.id] || {}, adds = v.id === cur ? addHints.slice() : [];
-      if (!was && !Object.keys(hv).length && !Object.keys(ex).length && !adds.length) return;
+      const was = placed[v.id], { hv = {}, ex = {} } = use && use.view === v.id ? use : {};
+      if (!was && !Object.keys(hv).length && !Object.keys(ex).length) return;
       const ids = (v.nodeIds || []).filter(id => typeof id === 'string'), mine = v.layout || {}, L = {}, taken = new Set(), key = p => p[0] + ',' + p[1];
       const put = (id, p) => { let [c, r] = p; while (taken.has(key([c, r]))) r++; L[id] = [c, r]; taken.add(key([c, r])); };
       ids.forEach(id => { if (Array.isArray(mine[id])) { L[id] = mine[id]; taken.add(key(mine[id])); } });    // the host's own layout
       ids.forEach(id => { if (!L[id] && ex[id]) put(id, ex[id]); });                                               // a reordered column group
       ids.filter(id => !L[id] && !hv[id] && was && was[id]).sort((a, b) => was[a][0] - was[b][0] || was[a][1] - was[b][1]).forEach(id => put(id, was[id])); // everyone stays
-      ids.forEach(id => { if (!L[id] && hv[id]) put(id, hv[id]); });                                              // a moved card: its drop, or the nearest free slot
-      ids.filter(id => !L[id] && !(was && was[id])).forEach(id => { if (adds.length) put(id, adds.shift()); });    // a new card likewise
+      ids.forEach(id => { if (!L[id] && hv[id]) put(id, hv[id]); });                                              // a moved or added card: its drop, or the nearest free slot
       if (Object.keys(L).length) v.layout = L;
     });
     return out;
@@ -3085,13 +3263,15 @@ export function render(container, model, options = {}) {
   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(); } });
+  stage.addEventListener('keydown', e => { if (e.defaultPrevented || e.metaKey || e.ctrlKey || (e.altKey && !E) || e.target.closest('input')) return;
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.closest('button')) return; // a button of the map's own (zoom, ↑, ≋, Back) presses itself
+    if (key(e)) { e.preventDefault(); e.stopPropagation(); } });
   stage.addEventListener('pointerover', e => { const g = e.target.closest('.node'); if (!g) return; svg.querySelectorAll('.edge-g').forEach(x => x.classList.toggle('hov', x.dataset.from === g.dataset.id || x.dataset.to === g.dataset.id)); });
   stage.addEventListener('pointerout', e => { if (e.target.closest('.node')) svg.querySelectorAll('.edge-g.hov').forEach(x => x.classList.remove('hov')); });
   const ctl = q('.ctl');
-  if (ctl) ctl.addEventListener('click', e => { const z = e.target.closest('button')?.dataset.z; if (!z) return;
+  if (ctl) ctl.addEventListener('click', e => { const z = e.target.closest('button')?.dataset.z; if (!z) return; readerMoved(); // a press by key too: a story playing waits
     if (z === 'in') cam.zoomAt(1.4, null, null, true); else if (z === 'out') cam.zoomAt(1 / 1.4, null, null, true); else if (z === 'fit') cam.fit(); else if (z === 'one') cam.actual(); else if (z === 'up') up(); else if (z === 'flow') setFlow(!stage.classList.contains('flowing')); else if (z === 'add') addAt(cam.s.cx, cam.s.cy); });
-  setFlow(options.flow ?? !(typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches));
+  setFlow(options.flow ?? !reducedMotion(), false); // the default, or the host's: not saved as the page reader's choice
 
   // the stage changes size with its container: keep the zoom, refit only an untouched view (no ResizeObserver, as in
   // jsdom: the view is fitted once)
@@ -3103,7 +3283,7 @@ export function render(container, model, options = {}) {
      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 '';
+    if (!svg || !geo || vid == null) return ''; // a model with no views draws nothing
     let s = svg, g = geo, off = null;
     if (vid !== cur) { // another view: drawn off screen, inside the shadow root so the same styles apply
       const v = ctx.V[vid]; if (!v || !(v.nodeIds || []).some(i => ctx.N[i])) return '';
@@ -3112,7 +3292,7 @@ export function render(container, model, options = {}) {
       off.innerHTML = c.markup; stage.parentNode.appendChild(off); s = off.querySelector('svg'); s.classList.add('map-svg'); g = c.g;
     }
     if (off) { const mine = layers.get('lens'), L = mine && arrOf(ctx.D.lenses).find(x => x && x.id === lensId); // the host's marks, on another view too (#63), and the lens as it lights that view
-      if (L) layers.set('lens', lensOf(ctx, vid, L).layer); drawMarks(s, g); if (L) layers.set('lens', mine); }
+      if (L) layers.set('lens', lensOf(ctx, vid, L).layer); drawMarks(s, g, vid); if (L) layers.set('lens', mine); }
     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;
@@ -3141,7 +3321,7 @@ export function render(container, model, options = {}) {
   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;
+    if (options.ease === false || still() || !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));
@@ -3153,7 +3333,7 @@ export function render(container, model, options = {}) {
     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'); });
+      [c, ...c.querySelectorAll('*')].forEach(y => { ['tabindex', 'role', 'data-id', 'data-i', 'data-from', 'data-to', 'data-o', 'data-t', 'data-chip', 'data-badge', 'data-edges'].forEach(a => y.removeAttribute(a)); y.classList.remove('node', 'edge-g', 'e-lab', 'sel', 'hot', 'hov'); }); // a port's data-edges named lines the new picture may lack
       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); });
@@ -3169,37 +3349,63 @@ export function render(container, model, options = {}) {
 
   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 && !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;
+    if (!model2 || typeof model2 !== 'object' || Array.isArray(model2)) throw new TypeError(`umlimator: update(model) takes a map model, an object with nodes and views; it got ${model2 === null ? 'null' : Array.isArray(model2) ? 'an array' : typeof model2}`);
+    // an identical model: nothing to redraw, unless it answers an edit (one that changed only a place)
+    const json = JSON.stringify(model2), same = json === JSON.stringify(current), own = relayout || unfolding; // own: the map drawing its own model again, no answer to an edit
+    if (!own && !pending && same) return;
+    // the model before or after a move an update applied (undo, redo): the cards go back where they were then
+    const back = !own && !same && [...moves].reverse().find(x => x.base === json || x.after === json);
+    if (back) placed[back.view] = structuredClone(back.base === json ? back.before : back.then);
+    // the edit waiting for this answer: its places if the model shows it, else none (it is dropped either way)
+    const p = own ? null : pending, card = p && answered(p, model2, json);
+    if (!own) pending = null;
+    const use = card ? { view: p.view, hv: p.place ? { [card]: p.place } : {}, ex: p.exact || {} } : null, from = use && structuredClone(placed[p.view] || null);
+    // a card E or Alt + click asked to unfold before its view was loaded unfolds once a model brings that view (#71)
+    const brought = []; Object.entries(asked).forEach(([vid, m]) => m.forEach((c, nid) => { if (!arrOf(model2.views).some(v => v && v.id === c)) return;
+      m.delete(nid); const l = expanded[vid] ||= []; if (!l.includes(nid)) { l.push(nid); if (vid === cur) brought.push(nid); } }));
+    const old = ctx, keys = {}, wantNew = selectNew && !own;
     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, expand: expanded });
+    ctx = mapContext(withPlaces(model2, use), { 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;
+    if (!own) 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] && 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; }
+    restory(); // the story shown takes this model's steps, or stops when the model has it no more
+    if (!cur) { // nothing shown yet (a first model with no views): this model's first view is drawn
+      const v0 = ctx.V[options.view] ? options.view : ctx.rootId;
+      if (v0 && cam) { mount(v0); cam.set(startView()); cam.touched = false; emitSel(); emit('viewchange', { view: cur, from: null }); }
+      return; }
+    if (!ctx.V[cur]) { // the view shown is gone: the root, or the empty card of a model with no views
+      const from = cur; mount(ctx.rootId ?? null); cam.set(startView()); cam.touched = false; emitSel(); if (cur) emit('viewchange', { view: cur, from }); return; }
     if (ctx.geoCache[cur] && keys[cur] === ctx.viewKey(cur)) { if (lensId != null) { relens(); drawMarks(); } if (pc) pc.chrome(); return; } // this view's picture did not change (its lens or the views may have)
     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(); }
+    // ponytail: the models' JSON, kept for 20 moves; a hash of them if models grow large enough for that to weigh
+    if (use && p.view === cur && json !== p.base) { moves.push({ view: cur, base: p.base, after: json, before: from, then: structuredClone(placed[cur] || null) }); if (moves.length > 20) moves.shift(); }
+    const box = brought.find(nid => (expanded[cur] || []).includes(nid));
+    if (box) unfolded(box, true); // a card asked to unfold earlier: its box is selected
+    else if (wantNew && use && p.op === 'add' && geo.byId[card]) select(nodeRef(card), { reveal: false }); // the card added, as the reader named it
+    else { // the selection that is still drawn stays, and a select event comes only if it changed (unfolding: the caller says)
+      if (keep && exists(keep)) { sel = keep; more = keep.type === 'node' ? keepMore.filter(id => geo.byId[id]) : []; paint(); }
+      if (!unfolding) emitSel(); }
     if (!relayout) easeIn(...prev); // a font that came in late moves nothing on purpose: no ease
+    touch();
   }
 
   function destroy() {
     if (dead) return;
+    cancelGesture();
     dead = true; if (ro) ro.disconnect(); cancelAnimationFrame(rz); stopStory();
-    timers.forEach(clearTimeout); timers.clear();
+    answer(false); endTrip(); // every promise settles: a move's setView() false, a tour's and a replay's done false
+    timers.forEach(clearTimeout); timers.clear(); sleeping.forEach(wake => wake());
     if (cam) cam.stopAnimation();
     host.remove();
+    clearTimeout(restT); camRest = camNow(); flushState(true); // a state listener hears destroyed: true, last, and where the camera stopped
     Object.keys(subs).forEach(k => delete subs[k]);
   }
 
@@ -3208,29 +3414,39 @@ export function render(container, model, options = {}) {
      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));
+  const scopes = new Map(); // layer name -> the views it is about: a highlight's Refs name theirs, and it lights those only
   // 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
+  function markOf(get, here, dims) { // one card's or line's mark over the layers here: each property from the latest that sets it, the lowest level
     let out = null;
-    layers.forEach(L => { const m = get(L); if (!m && !L.dim) return; out ||= { level: 1 };
+    here.forEach(L => { const m = get(L); if (!m && !dims.has(L)) 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) {
+  function drawMarks(s = svg, g = geo, vid = cur) {
     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'));
     s.querySelectorAll('[data-was]').forEach(x => { if (x.tagName === 'title') x.textContent = x.getAttribute('data-was'); else x.setAttribute('aria-label', x.getAttribute('data-was')); x.removeAttribute('data-was'); });
-    if (s === svg) stage.classList.toggle('um-lit', [...layers.values()].some(L => L.dim));
-    if (!layers.size) return;
+    // the layers about this view; one that dims dims only where it names something: on a view it names nothing of, nothing fades
+    const named = [...layers].filter(([n]) => !scopes.has(n) || scopes.get(n).includes(vid)), here = named.map(([, L]) => L);
+    const names = L => g.nodes.some(n => (L.nodes || {})[n.id]) || g.edges.some(e => edgeRefIds(e).some(x => (L.edges || {})[x]));
+    let dims = new Set(here.filter(L => L.dim && names(L)));
+    // a story's step dims alone (0.14.0): a layer that dimmed before the step keeps its marks but not its dimming, and one set
+    // while the step shows dims in its place, so a step looks as it was told and what the reader lights later still shows
+    const sl = layers.get('story'), at = n => dimAt.get(n) || 0;
+    if (dims.has(sl)) dims = named.some(([n, L]) => L !== sl && dims.has(L) && at(n) > at('story')) ? new Set([...dims].filter(L => L !== sl)) : new Set([sl]);
+    const markOf2 = get => markOf(get, here, dims);
+    if (s === svg) stage.classList.toggle('um-lit', dims.size > 0);
+    if (!here.length) 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;
+    g.nodes.forEach(n => { const m = markOf2(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
@@ -3240,7 +3456,7 @@ export function render(container, model, options = {}) {
     const heads = (g.families || []).flatMap(f => [{ x: f.x + 8, y: f.y + 3, w: String(f.label || f.id).length * 6.6 + 8, h: 22 }, // a box's title, 11 px mono
       ...(f.tabs || []).map(t => ({ x: t.x, y: f.y - 8, w: t.w, h: 16 }))]); // and its tabs
     const pills = [], free = r => !g.nodes.some(n => hit(r, n, 8) || (n.tag && hit(r, n.tag, 2))) && !heads.some(h => hit(r, h, 2)) && !g.edges.some(o => o.lbl && hit(r, o.lbl, 2)) && !pills.some(p => hit(r, p, 2));
-    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;
+    g.edges.forEach((e, i) => { const m = markOf2(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)}"/>`);
@@ -3264,19 +3480,33 @@ export function render(container, model, options = {}) {
     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) {
+  const dimAt = new Map(); let dimClock = 0; // layer name -> when it was last set (a story's step dims alone over older layers, see drawMarks)
+  function overlay(name, layer, views = null) { // views: the views the layer is about (highlight()'s); none: every view
     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();
+    const n = String(name);
+    if (layer == null) { layers.delete(n); dimAt.delete(n); } else { layers.set(n, layer); dimAt.set(n, ++dimClock); } // a Map keeps the order first set
+    if (layer != null && views) scopes.set(n, views); else scopes.delete(n);
+    drawMarks(); touch();
   }
-  /* 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);
+  // the cards in a box, at any depth, on a view (an unfolded card's box too)
+  const boxCards = (vid, id) => { const bs = ((ctx.V[vid] || {}).containers || []).filter(Boolean), out = new Set(), seen = new Set();
+    const walk = b => { if (seen.has(b)) return; seen.add(b); const c = bs.find(x => x.id === b); if (!c) return; (c.nodeIds || []).forEach(i => out.add(i)); bs.filter(x => x.parent === b).forEach(x => walk(x.id)); };
+    walk(id); return out; };
+  /* the 'highlight' layer (or another, `name`: a story step's 'story', the MCP page's 'mcp'): these cards and lines lit, the
+     rest dimmed; a Ref's level (0 to 1), else its distance, fades it. A box's Ref lights its cards and the lines between
+     them; Refs that name their view light that view only */
+  function highlight(refs, name = 'highlight') {
+    if (refs == null) return overlay(name, 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);
+    const lit = (o, x, r) => { o[x] = { level: Math.max(lv(r), (o[x] || {}).level || 0) }; }, list = [].concat(refs).filter(Boolean);
+    list.forEach(r => { const id = r.type === 'node' ? r.id : r.node, box = r.type === 'container' ? r.id : r.container; // a chip or badge: its card, or its box
+      if (id != null) lit(L.nodes, id, r);
+      else if (r.type === 'edge') (r.ids || []).forEach(x => lit(L.edges, x, r));
+      else if (box != null) { const vid = r.view ?? cur, ins = boxCards(vid, box), at = x => ins.has(x) || x === box;
+        ins.forEach(x => lit(L.nodes, x, r));
+        if (ctx.V[vid]) ctx.viewEdges(ctx.V[vid]).forEach(e => { if (at(e.from) && at(e.to) && e._id) lit(L.edges, e._id, r); }); } });
+    const views = list.every(r => typeof r.view === 'string') ? [...new Set(list.map(r => r.view))] : null;
+    overlay(name, L, views);
   }
   /* lenses (#94): one of the model's saved ways to look at the map, as the 'lens' layer, on every view it is shown on; the
      view is not laid out again. A lens that colours cards by owner puts their tones in a legend over the controls. */
@@ -3284,7 +3514,7 @@ export function render(container, model, options = {}) {
   function relens() {
     const L = lensId == null ? null : arrOf(ctx.D.lenses).find(x => x && x.id === lensId), was = q('.um-lens');
     if (was) { was.remove(); clear = null; }
-    if (!L) { lensId = null; layers.delete('lens'); return; } // off, or the model no longer has it
+    if (!L) { const had = lensId != null; lensId = null; layers.delete('lens'); if (had) emit('lens', { lens: null }); return; } // off, or the model no longer has it: the lens event says so
     if (!cur || !ctx.V[cur]) return;
     const { layer, owners } = lensOf(ctx, cur, L), name = esc(L.title || L.id);
     layers.set('lens', layer);
@@ -3292,18 +3522,25 @@ export function render(container, model, options = {}) {
   }
   function setLens(id) { // true when the model has that lens (or id is null)
     if (dead || (id != null && !arrOf(ctx.D.lenses).some(x => x && x.id === id))) return false;
-    lensId = id ?? null; relens(); drawMarks();
+    const was = lensId; lensId = id ?? null; if (lensId != null) dimAt.set('lens', ++dimClock); relens(); drawMarks(); if (lensId !== was) emit('lens', { lens: lensId });
     if (cam && geo && !cam.touched) cam.set(startView()); // fitted: the cards keep clear of the legend, as of the controls
     return true;
   }
   /* 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); }
+  // a tour's or a replay's dots: over the lines and boxes, under the cards (as the model's own tour), so a dot goes into
+  // a card and out at its next line rather than across the card's name
+  function tripLayer() {
+    const cards = svg.querySelector(':scope > .nodes');
+    (cards || svg).insertAdjacentHTML(cards ? 'beforebegin' : 'beforeend', '<g class="um-trip" aria-hidden="true"></g>');
+    return cards ? cards.previousElementSibling : svg.lastElementChild;
+  }
+  function endTrip(played = false) { const t = trip; if (!t) return; trip = null; cancelAnimationFrame(t.raf); if (t.dot) t.dot.remove(); t.end(played); touch(); }
   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;
+    const frame = now => { if (trip !== t) return; if (dead) return endTrip(); if (!t.paused && !paused && !(t.story && story && story.held)) t.at += now - t.last; t.last = now; // paused: the page's Pause; held: a story's step's tour, by its own pause
       if (step(t.at)) t.raf = requestAnimationFrame(frame); else endTrip(true); };
     t.raf = requestAnimationFrame(frame);
     return t;
@@ -3315,32 +3552,48 @@ export function render(container, model, options = {}) {
     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 = {}) {
+  function tour(path, o = {}, quiet = false) { // quiet: a story's step, whose caption says it
     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() && P.tourAt == null)) return Promise.resolve(legs.length > 0);
+      const through = prev && prev.to === ids[k] ? [prev.pts[prev.pts.length - 1], [n.x + n.w / 2, n.y + n.h / 2]] : [], pts = [...through, ...r.pts];
+      // skip: the part through the card, where the dot rides under it and can't be seen
+      legs.push({ pts, to: ids[k + 1], len: lenOf(pts), skip: through.length ? lenOf([...through, r.pts[0]]) : 0, from: ids[k], i: r.i }); }
+    if (legs.length && still() && P.tourAt == null) atRest(legs, quiet);
+    if (!legs.length || (still() && P.tourAt == null)) 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;
+    const g = tripLayer(); g.insertAdjacentHTML('beforeend', '<circle r="5.5" class="tour-dot"/>');
+    const dot = g.firstElementChild; let leg = 0, base = 0;
     if (P.tourAt != null) { // the page's #shot=1&at=<0 to 1>: the dot held that far along the ride, a frame for umlimator.py record (#83)
-      let d = clamp01(P.tourAt) * legs.reduce((s, l) => s + l.len, 0); while (leg < legs.length - 1 && d > legs[leg].len) d -= legs[leg++].len;
-      const [x, y] = along(legs[leg].pts, d); dot.setAttribute('cx', x); dot.setAttribute('cy', y);
+      // spread over the lines only: a frame inside a card would show no dot (it rides under the cards)
+      const seen = l => l.len - l.skip;
+      let d = clamp01(P.tourAt) * legs.reduce((s, l) => s + seen(l), 0); while (leg < legs.length - 1 && d > seen(legs[leg])) d -= seen(legs[leg++]);
+      const [x, y] = along(legs[leg].pts, legs[leg].skip + d); dot.setAttribute('cx', x); dot.setAttribute('cy', y);
       trip = { raf: 0, dot: g, end() {} }; return Promise.resolve(true);
     }
     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; });
+      const [x, y] = along(legs[leg].pts, d - base); dot.setAttribute('cx', x); dot.setAttribute('cy', y); return true; }, res); trip.dot = g; trip.kind = 'tour'; trip.story = quiet; touch(); });
+  }
+  // under reduced motion no dot rides: the path is lit at rest instead, its cards ringed and numbered in turn and its lines
+  // glowing (the 'tour' layer, which nothing dims), and the live region says it; it stays until the trip slot is taken
+  function atRest(legs, quiet) {
+    const L = { nodes: {}, edges: {} }, order = [];
+    legs.forEach(l => { [l.from, l.to].forEach(id => { if (!L.nodes[id]) { order.push(id); L.nodes[id] = { tone: 'accent', badge: String(order.length) }; } });
+      edgeRefIds(geo.edges[l.i]).forEach(x => { L.edges[x] = { tone: 'accent' }; }); });
+    overlay('tour', L); trip = { kind: 'path', raf: 0, dot: null, end() { overlay('tour', null); } };
+    if (!quiet) say('Tour: ' + order.map(nameOf).join(' → '));
   }
   /* 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 */
+  let replays = 0; // the newest replay's number: an older one's stop() leaves the newer one's marks alone
   function replay(spans, o = {}) {
+    if (dead) return { hops: 0, skipped: 0, done: Promise.resolve(false), pause() {}, resume() {}, stop() {} };
     endTrip(); overlay('replay', null);
+    const gen = ++replays;
     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])), cardOf = cardMatcher(geo ? geo.nodes : [], o.match);
     let skipped = 0, t = null, done; const hops = [];
@@ -3350,30 +3603,36 @@ export function render(container, model, options = {}) {
       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); } };
+      pause() { if (t && trip === t) { t.paused = true; touch(); } }, resume() { if (t && trip === t) { t.paused = false; touch(); } },
+      stop() { if (t && trip === t) endTrip(); else if (gen === replays) overlay('replay', null); } };
     const ms = msText, 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; }
+    if (!hops.length || still()) { 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;
+    const g = tripLayer();
     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;
+    t.dot = g; t.kind = 'replay'; touch();
     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. */
+     PageDown, Esc) step through and stop it. One story at a time.
+     The player's state (0.14.0): entering a step (its view, camera, selection and highlight on their way), then playing or
+     paused on it, until ended or stopped. A story event comes on each of these changes. The reader taking the map (a press,
+     a key, a view or a selection the story didn't make) pauses it; a step lights its own layer, 'story'. */
   let story = null;
+  const stepsOf = s => s && Array.isArray(s.steps) ? s.steps.filter(x => x && typeof x === 'object') : [];
+  // the story event, on every change: a step entered, a pause or a resume (playing), the end (step null), destroy() too
+  const storyEvent = st => emit('story', { story: st.s.id, step: story === st ? st.at : null, steps: st.steps.length, playing: story === st && !!st.auto }, dead);
   // 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)
@@ -3397,35 +3656,53 @@ export function render(container, model, options = {}) {
     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;
+    if (k <= 0) b('prev').setAttribute('aria-disabled', 'true'); else b('prev').removeAttribute('aria-disabled'); // off, and focusable still: a focused ‹ keeps the focus
     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
+    st.at = k; st.phase = 'entering'; clearTimeout(st.timer); tour(null); storyBar(st);
+    storyEvent(st); // 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 (step.view !== cur && ctx.V[step.view]) await go(step.view, { story: true });
     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));
+    if (ctx.V[step.view] && step.view !== cur) { st.phase = 'left'; touch(); return; } // the reader went elsewhere on the way: the step waits, paused, for resume()
+    if ((expanded[cur] || []).length) { expanded[cur] = []; update(current, false, true); } // a step sets the whole picture: what the reader unfolded here folds back first
+    const c = step.camera && typeof step.camera === 'object' ? step.camera : null;
+    const aim = () => { const n = c && c.card != null ? geo.byId[c.card] : null; // the step's camera, on the picture as it is now
+      return 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(aim()); cam.touched = !!(c && (geo.byId[c.card] || Number.isFinite(+c.x)));
+    select(step.select == null ? null : stepRef(step.select), { reveal: false, story: true });
+    highlight(stepLit(step.highlight), 'story');
     say(`Step ${k + 1} of ${st.steps.length}${step.caption ? ': ' + step.caption : ''}`); // after select(), which says what it selected
-    await moved;
+    if (await moved === false && live() && st.taken !== seq) await cam.animate(aim()); // cut short, not by the reader (an update()): the step gets its framing still
     if (!live()) return;
-    st.toured = step.tour ? tour(step.tour) : Promise.resolve(true);
+    st.phase = 'shown'; touch();
+    st.toured = step.tour ? tour(step.tour, {}, true) : 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;
+    if (!st.auto || story !== st || st.phase !== 'shown' || paused) return; // entering: it arms once shown; the page's Pause: once it ends
     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); });
+    Promise.all([st.toured, new Promise(r => { st.timer = later(r, dur); })]).then(() => { if (story === st && st.seq === seq && st.auto && !paused) stepStory(1); });
+  }
+  function pauseStory(st) { st.auto = false; st.held = true; clearTimeout(st.timer); storyBar(st); storyEvent(st); touch(); } // held: its step's tour waits too (startTrip)
+  // the reader (or the host) took the map, by a press, a key, or a view or selection the story didn't make: a story playing waits
+  function readerMoved() { const st = story; if (!st) return; st.taken = st.seq; if (st.auto) pauseStory(st); }
+  stage.addEventListener('pointerdown', e => { if (!e.target.closest('.um-story')) readerMoved(); }, true); // not the bar's own buttons
+  stage.addEventListener('wheel', e => { if (!ctrlWheel || e.ctrlKey || e.metaKey || stage.classList.contains('full')) readerMoved(); }, { capture: true, passive: true }); // a wheel that zooms (wheel: 'ctrl' leaves the rest to the page)
+  function restory() { // update(): the story shown takes the model's steps, at the step it is on, or stops when the model has it no more
+    const st = story; if (!st) return;
+    const s = arrOf(current.stories).find(x => x && x.id === st.s.id), steps = stepsOf(s);
+    if (!steps.length) return stopStory();
+    const was = JSON.stringify(st.steps[st.at]), k = Math.min(st.at, steps.length - 1);
+    st.s = s; st.steps = steps;
+    if (st.phase !== 'left' && (k !== st.at || JSON.stringify(steps[k]) !== was)) showStep(st, k); // its step changed: shown again, as it is now
+    else { st.at = k; storyBar(st); touch(); } // the same step (or one the reader left: the bar keeps within the model's steps)
   }
   function stepStory(d) {
     const st = story; if (!st) return;
@@ -3435,9 +3712,11 @@ export function render(container, model, options = {}) {
   }
   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 }); }
+    story = null; st.told = told; clearTimeout(st.timer); tour(null); highlight(null, 'story');
+    const bar = stage.querySelector('.um-story');
+    if (bar) { const back = bar.contains(root.activeElement); bar.remove(); clear = null; if (back && !dead) stage.focus({ preventScroll: true }); } // focus on the bar stays in the map
+    if (!dead) say(told ? 'End of the story' : 'Story closed');
+    storyEvent(st); touch(); // destroy() too: a listener hears the end
     st.end(told);
   }
   function storyKey(e) { // null: not a story's key; on the bar's own buttons, Enter and Space press them
@@ -3449,15 +3728,17 @@ export function render(container, model, options = {}) {
     return null;
   }
   function play(id, o = {}) {
+    if (id == null) { stopStory(); return null; } // play(null): the story shown stops
+    const s = arrOf(current.stories).find(x => x && x.id === id), steps = stepsOf(s);
+    if (dead || !geo || !steps.length) return null; // a story the model lacks: the one shown plays on
     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; }) };
+    let end; const st = { s, steps, at: -1, seq: 0, timer: 0, auto: o.auto !== false, phase: 'entering', told: 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; },
+    st.ctl = { get story() { return st.s.id; }, get step() { return st.at; }, get steps() { return st.steps.length; }, get playing() { return st.auto && story === st; },
+      get state() { return story !== st ? (st.told ? 'ended' : 'stopped') : st.phase === 'entering' ? 'entering' : st.auto ? 'playing' : 'paused'; },
       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 };
+      pause() { if (story === st && st.auto) pauseStory(st); },
+      resume() { if (story !== st || st.auto) return; st.auto = true; st.held = false; storyBar(st); storyEvent(st); touch(); if (st.phase === 'left') showStep(st, st.at); else 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;
@@ -3465,47 +3746,66 @@ export function render(container, model, options = {}) {
 
   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, lens: setLens,
-    highlight, overlay, focus: focusMap, editable: !!E, told: id => { const st = story && story.steps[story.at]; return !!(st && st.select === id); } }; // told: a story's step picked it
+    highlight, overlay, focus: focusMap, editable: !!E }; // a story's pointer is the pieces' own, from the story event (0.14.0)
 
   // the pieces a host asked for (#99): they follow the map's selection and views, and take their keys wherever the focus is
   // in the map (Enter and Space press their buttons; the map's other keys reach the canvas, as in the page)
   const frame = q('.um-frame'), pc = frame && pieces(() => inner, { tree: q('.outline'), legend: lg, panel: q('.panel') }, { frame, toggle: q('.um-navbtn'), layer: frame, status: tell || say });
   if (pc) {
-    (subs.select ||= []).push(e => pc.select(e.target, e.targets)); (subs.viewchange ||= []).push(pc.unlight);
+    (subs.select ||= []).push(e => pc.select(e.target, e.targets)); (subs.viewchange ||= []).push(pc.unlight); (subs.story ||= []).push(pc.story);
     frame.addEventListener('keydown', e => { if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
       if (pc.key(e) || (!stage.contains(e.target) && e.key !== 'Enter' && e.key !== ' ' && key(e))) { e.preventDefault(); e.stopPropagation(); } });
     if (options.nav) { q('.um-navbtn').addEventListener('click', () => pc.setTree(!frame.classList.contains('tree-open'))); pc.setTree(ctx.views.length > 1); }
   }
+  const motionOf = () => instant ? 'instant' : reducedMotion() ? 'reduced' : 'full';
+  const camNow = () => { const r = (x, d) => Math.round(x * d) / d; return cam ? { x: r(cam.s.cx, 10), y: r(cam.s.cy, 10), zoom: r(cam.s.k, 1000) } : { x: 0, y: 0, zoom: 1 }; };
+  function snapshot(event = false) { // MapState: built fresh on every read, frozen all the way down, plain JSON; event: the camera at rest
+    const deep = o => { Object.values(o).forEach(v => v && typeof v === 'object' && deep(v)); return Object.freeze(o); }, st = story, t = trip;
+    return deep({ view: cur, navigating: nav ? nav.to : null, selection: picked(), expanded: [...(expanded[cur] || [])], lens: lensId, overlays: [...layers.keys()],
+      story: st ? { id: st.s.id, step: st.at, steps: st.steps.length, playing: !!st.auto } : null, tour: !!(t && t.kind === 'tour'), replay: t && t.kind === 'replay' ? { playing: !t.paused } : null,
+      camera: event && camRest ? { ...camRest } : camNow(), flow: stage.classList.contains('flowing'), motion: motionOf(), gesture: gestureNow(), destroyed: dead });
+  }
   const first = () => {
     if (dead) return;
-    const v0 = ctx.V[options.view] ? options.view : ctx.rootId;
-    if (!v0) return;
-    mount(v0); cam.set(startView()); cam.touched = false;
-    if (options.select) select(options.select, { reveal: false });
-    if (P.onReady) P.onReady();
+    if (options.view != null && !ctx.V[options.view]) warn(`render(…, { view: "${options.view}" }): the model has no such view; it starts on ${ctx.rootId ? `"${ctx.rootId}"` : 'none'}`);
+    if (!cam) { // a view shown already (a setView() before a deferred first draw) stays
+      const v0 = ctx.V[options.view] ? options.view : ctx.rootId;
+      mount(v0 ?? null); cam.set(startView()); cam.touched = false; // no views: the empty card, until an update() brings one
+      if (v0 && options.select) select(options.select, { reveal: false });
+    }
+    if (cur && P.onReady) P.onReady();
   };
   if (P.defer) requestAnimationFrame(() => later(first, 16)); else first();
+  camRest = camNow(); if (listensState()) lastState = snapshot(true); // the state event reports changes from here
   // the host's fonts may still be loading: measure again once they are in, and redraw
-  if (measure && !own && document.fonts && document.fonts.status !== 'loaded') document.fonts.ready.then(() => { if (dead) return; measure = hostMeasure(host); update(current, true); });
+  if (measure && !own && document.fonts && document.fonts.status !== 'loaded') document.fonts.ready.then(() => { if (dead || !current || typeof current !== 'object') return; measure = hostMeasure(host); update(current, true); });
 
   return {
     update: m => update(m),
-    setView: id => go(id),
-    select: ref => select(ref),
-    fit: () => { if (cam) cam.fit(); },
+    setView: id => go(id), // a Promise<boolean>: true once the view shows; false for a view the model lacks, a later request, or destroy()
+    select: ref => { if (!dead) select(ref); },
+    fit: () => { if (cam && !dead) { readerMoved(); cam.fit(); } }, // the host takes the camera: a story playing waits
     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();
+    on(type, fn) { if (dead) return () => {}; if (type === 'state' && !listensState()) { camRest = camNow(); lastState = snapshot(true); } // a first state listener hears changes from now
+      (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 selection() { return copyRef(sel); },
     get selected() { return picked(); },
+    get state() { return snapshot(); }, // MapState (0.14.0): a fresh, frozen, JSON-serializable snapshot
+    get navigating() { return nav ? nav.to : null; }, // the view a move is going to, while one is under way
+    get destroyed() { return dead; },
+    get flow() { return stage.classList.contains('flowing'); }, // the animated flow along lines (≋, F)
+    set flow(on) { if (!dead) setFlow(!!on, false); }, // a host's choice, not the reader's: the page saves only ≋ and F
+    get motion() { return motionOf(); }, // 'instant' (the page's #check, #still, #shot), 'reduced' (the reader's setting), else 'full'
+    get story() { return story ? story.ctl : null; }, // the player of the story shown (play()'s, the page menu's or a link's), else null
     overlay: (name, layer) => overlay(name, layer),
-    highlight: refs => highlight(refs),
+    highlight: (refs, options) => highlight(refs, (options && options.layer) || 'highlight'),
     lens: id => setLens(id), // one of the model's lenses on the map, or null for none (#94): false when the model has no such lens
     tour: (path, o) => tour(path, o),
     replay: (spans, o) => replay(spans, o),
@@ -3695,7 +3995,6 @@ function lensOf(ctx, vid, lens) {
 
 export function mountPage(container, model, options = {}) {
   const Q = options.params || new URLSearchParams();
-  if (options.instant) INSTANT = true;
   document.body.classList.add('map-mode');
   let { D, views, nodes, N, V, rootId, nodeIn: nodeIn0, subjectOf, viewsWith, kidsOf, chain, viewEdges, planCache } = mapContext(model);
   const nodeIn = (nid, vid = cur) => nodeIn0(nid, vid);
@@ -3703,6 +4002,27 @@ export function mountPage(container, model, options = {}) {
   const modK = mac ? '⌘K' : 'Ctrl K';
   const HINT = hintHTML(modK);
   const ghost = [[10, 26, 22], [40, 18, 24], [40, 46, 24], [10, 60, 22], [70, 32, 20], [70, 70, 20]].map(([l, t, w]) => `<span style="left:${l}%;top:${t}%;width:${w}%"></span>`).join('');
+  // the page's keys (0.14.0), in the order the key list (?) shows them: what to press and what it does, then, for the keys
+  // the page reads itself, those keys and what they do; the rest are the map's own, which reach its canvas (the router)
+  const KEYS = [
+    ['/ or ' + modK, 'search nodes and views', ['/'], () => openPal()],
+    ['Scroll · pinch', 'zoom (two-finger drag pans)'],
+    ['Click', 'details below the map'],
+    ['Double-click · Enter', 'open a stacked node ⤢'],
+    ['E · Alt + click', 'unfold a stacked node here, or fold it back ⤡'],
+    ['Esc · Backspace', 'close what is on top (a menu, the recorder, a story too), else clear the selection, else up one level', ['Escape', 'Backspace'], (e, inCanvas) => closeTop(e, inCanvas)],
+    ['+ − 0 1', 'zoom in, out, fit, 100%'],
+    ['← ↑ → ↓', 'pan'],
+    ['[ ]', 'previous / next details tab', ['[', ']'], e => pc.key(e)],
+    ['i', 'about this view', ['i', 'I'], () => togglePill()],
+    ['O', 'views list', ['o', 'O'], e => pc.key(e)],
+    ['F', 'flow on/off'],
+    ['> <', 'light what a card leads to, what leads to it', ['>', '<'], e => pc.key(e)],
+    ['Shift-click · P', 'light every path between two cards', ['p', 'P'], e => pc.key(e)],
+    ['← → · PgUp PgDn', 'in a story: previous / next step'],
+    ['?', 'these keys', ['?'], () => toggleHelp()],
+  ];
+  const ac = new AbortController(), signal = ac.signal; // the page's listeners on the document and window: destroy() takes them away
 
   const app = container; app.className = 'mapapp';
   app.innerHTML = `
@@ -3712,9 +4032,9 @@ export function mountPage(container, model, options = {}) {
       <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>${(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"><button class="ibtn txt" id="m-stories" aria-haspopup="true" aria-expanded="false" title="Stories: walk-throughs of this map">▶<span class="lbl"> Stories</span></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>` : ''}${arrOf(D.lenses).some(l => l && l.id) ? `
-      <div class="menu"><button class="ibtn txt" id="m-lenses" aria-haspopup="true" aria-expanded="false" title="Lenses: ways to look at this map">◎ Lenses</button>
+      <div class="menu"><button class="ibtn txt" id="m-lenses" aria-haspopup="true" aria-expanded="false" title="Lenses: ways to look at this map">◎<span class="lbl"> Lenses</span></button>
         <div class="menu-pop" id="m-lenses-pop" hidden>${D.lenses.filter(l => l && l.id).map(l => `<button data-lens="${esc(l.id)}" aria-pressed="false">${esc(l.title || l.id)}</button>`).join('')}<hr><button data-lens="" aria-pressed="true">No lens</button></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><button data-x="record">Record a story…</button></div></div>
@@ -3733,17 +4053,14 @@ 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>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>
+      <dl>${KEYS.map(([k, d]) => `<dt>${esc(k)}</dt><dd>${esc(d)}</dd>`).join('')}</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>
       <div class="pft"><span>↑↓ move</span><span>↵ open</span><span>esc close</span></div></div></div>`;
   const $ = id => document.getElementById(id);
   const stage = $('m-stage'), panel = $('m-panel');
-  let X = null, cam = null, geo = null, svg = null, cur = null, sel = null, stack = [], paused = false, replaceNext = false;
+  let X = null, cam = null, geo = null, svg = null, cur = null, sel = null, stack = [], paused = false;
   const status = hinter($('m-hint'), HINT);
   // the views list, the legend and the details panel (#99): the same pieces render() draws for a host
   const pc = pieces(() => X, { tree: $('m-tree'), legend: $('m-legend'), panel }, { page: true, frame: document.body, toggle: $('m-outline'), layer: document.body, status });
@@ -3771,21 +4088,46 @@ export function mountPage(container, model, options = {}) {
   const togglePill = force => { const b = $('m-pillbtn'), p = $('m-vpop'); if (!b) return; const on = force != null ? force : p.hidden; p.hidden = !on; b.setAttribute('aria-expanded', on); };
   const setTree = pc.setTree;
 
-  /* selection: the canvas reports, the pieces show the details panel, the page records the hash */
-  const select = (nid, opts = {}) => X.select({ type: 'node', id: nid }, opts);
-  const deselect = () => X.select(null);
-
-  /* navigation */
-  function setHash(replace) {
+  /* the link (0.14.0): one place writes it, from what the map shows: its view, card, story step and lens, and the reader
+     copy, theme, check and shot the page was opened with (the theme as it is now, after ◐ too). A new view is a new entry,
+     written once the move lands; anything else rewrites the entry. Nothing is written while a link is being followed */
+  function write(push = false) {
+    if (!X || linking || handle.destroyed) return;
     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)
     if (lensOn) p.set('lens', lensOn); // the lens on the map (#94)
-    ['theme', 'check', 'shot'].forEach(k => Q.get(k) && p.set(k, Q.get(k)));
+    if (Q.get('theme')) p.set('theme', document.documentElement.dataset.theme || Q.get('theme'));
+    ['reader', 'check', 'shot'].forEach(k => Q.get(k) && p.set(k, Q.get(k)));
     const h = '#' + p.toString();
-    if (location.hash === h) return;
-    if (replace) window.history.replaceState(null, '', h); else window.history.pushState(null, '', h); // window's: history() is this module's undo helper
+    if (location.hash !== h) window.history[push ? 'pushState' : 'replaceState'](null, '', h); // window's: history() is this module's undo helper
+  }
+  /* following a link, on load and on Back, Forward or an edited link: its lens, view, story step and card, applied in that
+     order. Once the map has settled, the page writes the link it shows: what the model lacks is corrected, and the hint
+     line says so. A move the reader starts meanwhile wins, as a move of the reader's own (a new entry) */
+  let linking = null, follows = 0; // linking: { view } while a link is followed: the view it goes to, whose arrival writes no entry
+  const idle = () => new Promise(r => { const t = () => X.busy() ? setTimeout(t, 30) : r(); t(); }); // once no move is under way
+  async function follow(load = false) {
+    const p = new URLSearchParams(location.hash.slice(1)), my = ++follows, lacks = [], stories = arrOf(D.stories);
+    const lens = p.get('lens') || null, sid = p.get('story'), at = Math.max(1, Math.floor(+p.get('step')) || 1) - 1;
+    const def = sid ? stories.find(s => s && s.id === sid) : null, steps = def ? arrOf(def.steps).filter(s => s && typeof s === 'object') : [], step = steps[Math.min(at, steps.length - 1)];
+    linking = { view: null };
+    if (lens !== lensOn && !X.lens(lens)) lacks.push(`no lens “${lens}”`);
+    if (sid && !step) lacks.push(`no story “${sid}”`); else if (sid && at >= steps.length) lacks.push(`no step ${at + 1} in “${sid}”`);
+    const shown = handle.state.story, k = Math.min(at, steps.length - 1), played = !!step && (!shown || shown.id !== sid || shown.step !== k);
+    const v = played ? step.view : p.get('view') || rootId; // a step to show: its own view, gone to first so the step moves nothing
+    if (!V[v]) lacks.push(`no view “${v}”`);
+    else if (v !== cur || X.busy()) { linking.view = v; const ok = await X.go(v); if (my !== follows) return; if (!ok || !linking) { linking = null; return; } } // the reader's own move won: its landing writes its own entry
+    if (played) { handle.play(sid, { step: k, auto: false }); await idle(); if (my !== follows || !linking) return; } // the story at the link's step, shown and not playing on
+    else if (!step && shown) handle.play(null); // a link with no story: the one shown stops
+    if (!played) { // the link's card, unless a step just chose the selection
+      const node = p.get('node') || (load && Q.get('shot') && cur !== rootId ? subjectOf(V[cur]) || (V[cur].nodeIds || [])[0] : null);
+      if (node) { if (node !== sel && !X.select({ type: 'node', id: node }, { reveal: !load })) lacks.push(`no card “${node}” here`); }
+      else if (handle.selection) X.select(null);
+    }
+    linking = null; write();
+    if (lacks.length) status('Link corrected: ' + lacks.join('; '), 5000);
   }
-  const go = (vid, how = {}) => { if (how.replace) replaceNext = true; return X.go(vid, how); };
+  const go = (vid, how = {}) => X.go(vid, how);
   const open = nid => X.open(nid), up = () => X.up();
   const findNode = pc.find;
 
@@ -3795,46 +4137,61 @@ export function mountPage(container, model, options = {}) {
     const bv = e.target.closest('.vpop [data-v]'); if (bv) return go(bv.dataset.v);
   });
   const setFlow = on => X.setFlow(on);
-  const closeHelp = () => { $('m-helpbox').hidden = true; $('m-help').setAttribute('aria-expanded', 'false'); };
-  const closeExport = () => { $('m-export-pop').hidden = true; $('m-export').setAttribute('aria-expanded', 'false'); };
+  const toggleHelp = force => { const on = force ?? $('m-helpbox').hidden; $('m-helpbox').hidden = !on; $('m-help').setAttribute('aria-expanded', on); if (on) openMenu(null); };
+  /* the header's menus, Export, Stories and Lenses (0.14.0): one open at a time, or none. back: focus goes back to the
+     button of the menu that closes (Esc) */
+  let menuOn = null;
+  function openMenu(name, back = false) {
+    const was = menuOn; menuOn = name && $(`m-${name}-pop`) ? name : null;
+    ['export', 'stories', 'lenses'].forEach(n => { const p = $(`m-${n}-pop`); if (!p) return; p.hidden = n !== menuOn; $(`m-${n}`).setAttribute('aria-expanded', n === menuOn); });
+    if (menuOn) toggleHelp(false);
+    if (back && was && !menuOn) $(`m-${was}`).focus();
+  }
+  ['export', 'stories', 'lenses'].forEach(n => { const b = $(`m-${n}`); if (b) b.addEventListener('click', () => openMenu(menuOn === n ? null : n)); });
   document.addEventListener('click', e => {
-    const t = e.target;
-    const cv = t.closest('#m-crumbs [data-v]'); if (cv) { if (innerWidth <= 820) setTree(false); return go(cv.dataset.v); }
-    const mn = t.closest('.menu'); if (!mn || !mn.contains($('m-export'))) closeExport(); if (!mn || !mn.contains($('m-stories'))) closeStories(); if (!mn || !mn.contains($('m-lenses'))) closeLenses();
-    if (!t.closest('#m-helpbox, #m-help')) closeHelp();
-  });
+    const t = e.target, at = s => t.closest && t.closest(s);
+    if (!at('.menu')) openMenu(null);
+    if (!at('#m-helpbox, #m-help')) toggleHelp(false);
+    const cv = at('#m-crumbs [data-v]'); if (cv) { if (innerWidth <= 820) setTree(false); go(cv.dataset.v); }
+  }, { signal });
   $('m-outline').addEventListener('click', () => setTree(!document.body.classList.contains('tree-open')));
   if (innerWidth > 1180 && views.length > 1) setTree(true);
-  $('m-help').addEventListener('click', () => { const on = $('m-helpbox').hidden; $('m-helpbox').hidden = !on; $('m-help').setAttribute('aria-expanded', on); });
-  $('m-theme').addEventListener('click', toggleTheme);
+  // the views list, open over the map on a phone's width, closes when the window narrows to it: it would cover the map
+  let narrow = innerWidth <= 820;
+  addEventListener('resize', () => { const n = innerWidth <= 820; if (n && !narrow) setTree(false); narrow = n; }, { signal });
+  $('m-help').addEventListener('click', () => toggleHelp());
+  $('m-theme').addEventListener('click', () => { toggleTheme(); write(); }); // a link that names the theme names the one shown
   $('m-pause').addEventListener('click', e => { paused = !paused; const b = e.currentTarget, l = paused ? 'Play' : 'Pause'; X.pause(paused); b.setAttribute('aria-pressed', paused); b.title = l; b.setAttribute('aria-label', l); b.textContent = paused ? '▶' : '❚❚'; });
-  $('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); });
+  $('m-export-pop').addEventListener('click', e => { const x = e.target.closest('[data-x]')?.dataset.x; if (!x) return; openMenu(null); 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 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); });
-  }
-  /* lenses (#94): the Lenses menu puts one on the map, its name on the menu's button and in the link (#lens=<id>) */
+  /* stories (#69): the Stories menu plays one; the link names the story and step shown, in the entry of the step's own view
+     (0.14.0); Export ▸ Record a story… */
+  let told = null; // { id, step }: the story on the map and its step, from the story event
+  const stepView = t => { const s = arrOf(D.stories).find(x => x && x.id === t.id), st = s && arrOf(s.steps).filter(x => x && typeof x === 'object')[t.step]; return st ? st.view : null; };
+  if ($('m-stories-pop')) $('m-stories-pop').addEventListener('click', e => { const b = e.target.closest('[data-story]'); if (!b) return; openMenu(null); handle.play(b.dataset.story); });
+  /* lenses (#94): the Lenses menu puts one on the map; the lens event (the menu's, the handle's, a link's) names it on the
+     menu's button and in the link (#lens=<id>) */
   let lensOn = null;
-  const lensesPop = $('m-lenses-pop'), closeLenses = () => { if (lensesPop) { lensesPop.hidden = true; $('m-lenses').setAttribute('aria-expanded', 'false'); } };
-  function pickLens(id, fromLink) { // fromLink: the link names it already (on load, back and forward)
-    if (!X || !X.lens(id || null)) return;
-    lensOn = id || null;
-    const L = arrOf(D.lenses).find(x => x && x.id === lensOn), name = L ? L.title || L.id : '';
-    if (lensesPop) { lensesPop.querySelectorAll('[data-lens]').forEach(b => b.setAttribute('aria-pressed', b.dataset.lens === (lensOn || ''))); $('m-lenses').textContent = '◎ ' + (name || 'Lenses'); }
-    if (!fromLink) { status(name ? 'Lens: ' + name : 'No lens'); setHash(true); }
-  }
-  if (lensesPop) {
-    $('m-lenses').addEventListener('click', () => { const on = lensesPop.hidden; lensesPop.hidden = !on; $('m-lenses').setAttribute('aria-expanded', on); });
-    lensesPop.addEventListener('click', e => { const b = e.target.closest('[data-lens]'); if (!b) return; closeLenses(); pickLens(b.dataset.lens); });
+  const lensesPop = $('m-lenses-pop');
+  function showLens() {
+    if (!lensesPop) return;
+    const L = arrOf(D.lenses).find(x => x && x.id === lensOn);
+    lensesPop.querySelectorAll('[data-lens]').forEach(b => b.setAttribute('aria-pressed', b.dataset.lens === (lensOn || '')));
+    $('m-lenses').innerHTML = `◎<span class="lbl"> ${esc(L ? L.title || L.id : 'Lenses')}</span>`;
   }
+  if (lensesPop) lensesPop.addEventListener('click', e => { const b = e.target.closest('[data-lens]'); if (!b) return; openMenu(null);
+    if (X.lens(b.dataset.lens || null)) { const L = arrOf(D.lenses).find(x => x && x.id === lensOn); status(L ? 'Lens: ' + (L.title || L.id) : 'No lens'); } });
   // 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`
+  // captions are typed in, and Save writes the story's JSON, for the model's `stories`. Not while a story is shown: its
+  // steps are not the reader's. Esc closes it (when it is on top); Close, Esc and leaving the page ask first while it holds
+  // steps not saved (0.14.0)
   let rec = null;
+  const unsaved = () => !!rec && (rec.steps.length > 1 || rec.steps.some(s => s.caption)) && rec.json() !== rec.saved;
+  const leaving = e => { if (unsaved()) { e.preventDefault(); e.returnValue = ''; } };
+  function closeRec() { // false: the reader kept it
+    if (!rec || (unsaved() && !confirm(`Close the recorder? Its ${rec.steps.length} steps are not saved.`))) return false;
+    clearTimeout(rec.t); rec = null; $('m-rec').remove(); removeEventListener('beforeunload', leaving); return true;
+  }
   function record() {
     if (rec) return;
     stage.insertAdjacentHTML('beforeend', `<div class="m-rec" id="m-rec" role="region" aria-label="Recording a story">
@@ -3843,8 +4200,12 @@ export function mountPage(container, model, options = {}) {
       <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';
+    rec = { steps: [], t: 0, saved: null };
+    const story = () => { const title = $('m-rec-title').value.trim() || 'A walk-through', id = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'story';
+      return { id, title, steps: rec.steps.map(({ caption, ...s }) => caption ? { view: s.view, caption, ...s } : s) }; };
+    rec.json = () => JSON.stringify(story());
+    addEventListener('beforeunload', leaving);
+    const draw = () => { $('m-rec-n').textContent = rec.steps.length === 1 ? '1 step' : rec.steps.length + ' steps'; box.querySelector('[data-r="save"]').disabled = !rec.steps.length; // nothing to save: a story needs 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
@@ -3858,16 +4219,15 @@ export function mountPage(container, model, options = {}) {
       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' }));
+      else if (r === 'save' && rec.steps.length) {
+        const st = story(); rec.saved = JSON.stringify(st);
+        download(st.id + '.story.json', new Blob([JSON.stringify(st, 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(); }
+      } else if (r === 'close') closeRec();
     });
     rec.take();
   }
-  const recordSoon = () => { if (rec) { clearTimeout(rec.t); rec.t = setTimeout(() => rec && rec.take(), 650); } }; // once the camera has landed
+  const recordSoon = () => { if (rec && !handle.story) { clearTimeout(rec.t); rec.t = setTimeout(() => rec && !handle.story && rec.take(), 650); } }; // once the camera has landed; not a story's steps
 
   /* ⌘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() }));
@@ -3903,15 +4263,16 @@ export function mountPage(container, model, options = {}) {
     res.innerHTML = html;
     const on = res.querySelector('.fr.on'); on && on.scrollIntoView({ block: 'nearest' });
   }
-  const openPal = () => { closeHelp(); closeExport(); pal.hidden = false; q.value = ''; hi = 0; drawHits(); q.focus(); };
-  const closePal = () => { pal.hidden = true; q.blur(); };
+  let palBack = null; // where focus was before search opened: Esc gives it back
+  const openPal = () => { toggleHelp(false); openMenu(null); palBack = document.activeElement; pal.hidden = false; q.value = ''; hi = 0; drawHits(); q.focus(); };
+  const closePal = (back = false) => { pal.hidden = true; q.blur(); if (back && palBack && palBack.isConnected && palBack !== document.body) palBack.focus(); palBack = null; };
   const pickHit = h => { if (!h) return; closePal(); if (h.t === 'n') findNode(h.n.id); else go(h.v.id); };
   q.addEventListener('input', () => { hi = 0; drawHits(); });
   q.addEventListener('keydown', e => {
     if (e.key === 'ArrowDown') { hi = Math.min(hits.length - 1, hi + 1); drawHits(); e.preventDefault(); }
     else if (e.key === 'ArrowUp') { hi = Math.max(0, hi - 1); drawHits(); e.preventDefault(); }
     else if (e.key === 'Enter') { pickHit(hits[hi]); e.preventDefault(); }
-    else if (e.key === 'Escape') { closePal(); e.preventDefault(); }
+    else if (e.key === 'Escape') { closePal(true); e.preventDefault(); }
     e.stopPropagation();
   });
   res.addEventListener('click', e => { const f = e.target.closest('[data-fill]'); if (f) { q.value = f.dataset.fill; hi = 0; drawHits(); q.focus(); return; } const b = e.target.closest('[data-i]'); if (b) pickHit(hits[+b.dataset.i]); });
@@ -3919,28 +4280,43 @@ export function mountPage(container, model, options = {}) {
   pal.addEventListener('click', e => { if (e.target === pal) closePal(); });
   $('m-find').addEventListener('click', openPal);
 
-  /* keyboard: the page's own keys first (search, help, panels); the map's keys reach the canvas wherever the focus is */
+  /* keyboard (0.14.0): one router, which reads each key from the top open layer down (an example shown full size, search,
+     the key list, a menu, the view's popover, the story recorder, a story, then the map) and the KEYS table. Enter, Space
+     and arrows aimed at a control outside the map are that control's own; the map's keys reach its canvas from anywhere
+     else on the page */
+  const layer = () => pc.modal() ? 'lightbox' : !pal.hidden ? 'search' : !$('m-helpbox').hidden ? 'help' : menuOn ? 'menu'
+    : $('m-vpop') && !$('m-vpop').hidden ? 'pill' : rec ? 'recorder' : told ? 'story' : 'map';
+  function closeTop(e, inCanvas) { // Esc and Backspace: the top open layer closes; else the map's own: the selection clears, then up a level
+    const top = layer();
+    if (top === 'search') closePal(true);
+    else if (top === 'help') toggleHelp(false);
+    else if (top === 'menu') openMenu(null, true);
+    else if (top === 'pill') togglePill(false);
+    else if (top === 'recorder') closeRec(); // asking first when it holds steps not saved
+    else if (top === 'story') handle.play(null); // Backspace too
+    else return !inCanvas && X.key(e); // in the canvas, the canvas takes its own
+  }
+  const CONTROL = 'a[href], button, input, select, textarea, summary, [contenteditable], [role=button], [role=tab], [role=option], [tabindex]:not([tabindex="-1"])';
   document.addEventListener('keydown', e => {
-    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) { e.preventDefault(); return pal.hidden ? openPal() : closePal(); }
-    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 (pc.key(e)) {} // the pieces' keys: an example's lightbox, the details tabs, the views list, paths and reach
-    else if (k === 'Escape' || k === 'Backspace') {
-      if (!$('m-helpbox').hidden) closeHelp(); else if (!$('m-export-pop').hidden) closeExport(); else if (storiesPop && !storiesPop.hidden) closeStories(); else if (lensesPop && !lensesPop.hidden) closeLenses(); else if ($('m-vpop') && !$('m-vpop').hidden) togglePill(false);
-      else if (!inCanvas) X.key(e); else return;
-    }
-    else if (k === '/') openPal();
-    else if (k === '?') $('m-help').click();
-    else if (k === 'i' || k === 'I') togglePill();
-    else if (inCanvas || !X.key(e)) return;
-    e.preventDefault(); e.stopPropagation();
-  }, true);
-  addEventListener('popstate', () => { const p = new URLSearchParams(location.hash.slice(1)); if ((p.get('lens') || null) !== lensOn) pickLens(p.get('lens'), true); const v = p.get('view') || rootId; if (v !== cur) go(v, { replace: true, select: p.get('node') || undefined }); else if (p.get('node')) select(p.get('node')); else if (sel) deselect(); });
+    if (!X) return;
+    const k = e.key, t = e.target, top = layer(), own = () => { e.preventDefault(); e.stopPropagation(); };
+    if (top === 'lightbox') { if (pc.key(e)) own(); return; } // it holds every key while open: Esc closes it, Tab keeps to it, Enter and Space press its buttons
+    if ((e.metaKey || e.ctrlKey) && (k === 'k' || k === 'K')) { own(); return top === 'search' ? closePal(true) : openPal(); }
+    if (e.metaKey || e.ctrlKey || e.altKey || (t && t.matches && t.matches('input, textarea, select, [contenteditable]'))) return; // the browser's own shortcuts; typing
+    const inCanvas = e.composedPath().includes(X.stage), row = KEYS.find(r => r[2] && r[2].includes(k));
+    if (top === 'search' && k !== 'Escape' && k !== 'Backspace') return; // search covers the map: its field and hits take their own keys
+    if (row) { if (row[3](e, inCanvas) !== false) own(); return; }
+    if (inCanvas || (t && t.closest && t.closest(CONTROL) && /^(Enter| |Arrow|Page|Home|End)/.test(k))) return; // the canvas's own keys; a control's own
+    if (X.key(e)) own(); // the map's keys, from anywhere else on the page
+  }, { capture: true, signal });
+  addEventListener('popstate', () => follow(), { signal }); // Back, Forward, or an edited link
 
   /* export: resolve CSS variables into attributes so the file stands alone */
   const standalone = scale => X.standalone(scale);
   if (Q.get('still')) { const sv = Q.get('still'), sc = +(Q.get('scale') || 2);
-    const tick = async () => { if (!geo || !V[sv]) return setTimeout(tick, 100); if (cur !== sv) { await go(sv, {}); return setTimeout(tick, 200); }
+    const tick = async () => { if (!geo) return setTimeout(tick, 100);
+      if (!V[sv]) return document.documentElement.setAttribute('data-still', JSON.stringify({ view: sv, error: `the model has no view "${sv}"` })); // an answer, not a wait: no still comes
+      if (cur !== sv) { await go(sv, {}); return setTimeout(tick, 200); }
       X.stage.querySelectorAll('.flowline').forEach(e => e.remove()); const out = standalone(sc), b = geo.bounds; document.documentElement.setAttribute('data-still', JSON.stringify({ view: sv, w: Math.ceil(b.w * sc), h: Math.ceil(b.h * sc) }));
       document.body.innerHTML = '<div id="still">' + out + '</div>'; document.body.style.margin = '0'; };
     setTimeout(tick, 300); }
@@ -3957,14 +4333,15 @@ export function mountPage(container, model, options = {}) {
   }
 
 
-  let flowPref = null; try { flowPref = localStorage.getItem('visual-flow'); } catch (_) {}
+  let flowPref = null; try { flowPref = reducedMotion() ? null : localStorage.getItem('visual-flow'); } catch (_) {} // the reader's ≋ and F; under reduced motion no flow is drawn
   const p0 = new URLSearchParams(location.hash.slice(1));
   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)
+    on: { story: e => { told = e.step == null ? null : { id: e.story, step: e.step }; app.classList.toggle('story', !!told); pc.story(e);
+      const sv = told && stepView(told); if (X && !X.busy() && (!sv || sv === cur || !V[sv])) write(); } }, // a step on another view: in that view's entry, once it shows (#69)
     _page: {
-      instant: options.instant, defer: !INSTANT, tour: !(Q.get('still') || Q.get('pdf')), openHint: !Q.get('reader'), kinds: true, status, tourAt: Q.get('shot') ? Q.get('at') : null,
+      instant: options.instant, defer: !options.instant, tour: !(Q.get('still') || Q.get('pdf')), openHint: !Q.get('reader'), kinds: true, status, tourAt: Q.get('shot') ? Q.get('at') : null,
       wide: () => innerWidth > 820,
       upTarget: () => stack.length > 1 ? stack[stack.length - 2] : (V[cur] || {}).parent,
       inset: () => { const top = Math.max(58, 26 + $('m-vpill').offsetHeight); if (innerWidth <= 820) return { t: top, r: 12, b: 12, l: 12 }; const lg = $('m-legend'), on = lg && !lg.hidden; // the legend box sits bottom left
@@ -3977,46 +4354,160 @@ export function mountPage(container, model, options = {}) {
         renderChrome(); },
       onBackground: () => togglePill(false),
       onFlow: on => { try { localStorage.setItem('visual-flow', on ? '1' : '0'); } catch (_) {} },
-      onReady: () => {
-        $('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)
-        if (p0.get('lens')) pickLens(p0.get('lens'), true); // a link's lens (#94)
-        setHash(true);
-      },
+      onReady: () => { $('m-ghosts').remove(); queueMicrotask(() => follow(true)); }, // the link it opened with: its card, story step and lens (#69, #94), once the page listens
     },
   });
-  handle.on('select', ({ target, targets }) => { sel = target && target.type === 'node' ? target.id : null; pc.select(target, targets); setHash(true); recordSoon(); });
-  handle.on('viewchange', () => { pc.unlight(); setHash(replaceNext); replaceNext = false; recordSoon(); });
-  /* #pdf=1[&views=a,pic-*] (umlimator.py pdf, #93): the page becomes a document for Chrome to print, A4 across. A title
-     page; each view on a page of its own, its picture (toSVG()'s, in vectors) as large as its describe() text below leaves
-     room for; then the legend of what the pictures draw, and the model's rules, each holding or broken in the views
-     printed, as the document says. It starts once the fonts are in, after the map's own redraw for them. */
-  if (Q.get('pdf')) (document.fonts ? document.fonts.ready : Promise.resolve()).then(() => {
-    const only = (Q.get('views') || '').split(',').filter(Boolean), want = v => !only.length || only.some(p => p.endsWith('*') ? v.id.startsWith(p.slice(0, -1)) : v.id === p);
-    const shown = views.filter(want).map(v => [v, X.standalone(1, v.id)]).filter(([, s]) => s), p = s => `<p>${esc(s)}</p>`;
-    const broken = rules(model).filter(b => shown.some(([v]) => v.id === b.view)); // the views printed, as the document says
-    const rs = (Array.isArray(model.rules) ? model.rules : []).filter(r => r && typeof r === 'object' && (r.from || r.to || r.noCycles)); // as rules() reads them
-    const W = 1030, H = 690; // ponytail: A4 landscape inside 12 mm margins, in CSS px; a paper option if Letter or portrait is wanted
-    document.title = model.title || 'Map'; document.body.removeAttribute('class');
-    document.body.innerHTML = `<style>@page { size: A4 landscape; margin: 12mm; background: var(--um-bg); } html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background-image: none; }
-      #um-pdf { width: ${W}px; font-size: 13px; line-height: 1.45; } #um-pdf section { padding: 0; } #um-pdf section + section { break-before: page; }
-      #um-pdf h1 { font-size: 34px; margin: 230px 0 6px; } #um-pdf h2 { display: block; font: 600 19px/1.3 var(--um-sans); letter-spacing: 0; text-transform: none; color: var(--um-text); margin: 0 0 8px; }
-      #um-pdf h2::after { content: none; } #um-pdf h2 ~ h2 { margin-top: 26px; } #um-pdf p { margin: 0 0 3px; } #um-pdf svg { display: block; margin: 0 0 10px; }
-      #um-pdf .pdf-text { columns: 2; column-gap: 32px; font-size: 12px; } #um-pdf .pdf-text p { break-inside: avoid; } #um-pdf ul { margin: 0; padding-left: 20px; }
-      #um-pdf .pdf-legend { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px 28px; font-size: 12px; } .pdf-holds { color: var(--um-green); } .pdf-broken { color: var(--um-rose); }</style>
-      <main id="um-pdf"><section><h1>${esc(model.title || 'Map')}</h1>${p(new Date(Date.now() - new Date().getTimezoneOffset() * 6e4).toISOString().slice(0, 10))}</section>
-      ${shown.map(([v, svg]) => `<section class="pdf-view"><h2>${esc(v.title || v.id)}</h2>${svg}<div class="pdf-text">${describe(model, v.id).split('\n').map(p).join('')}</div></section>`).join('')}
-      <section><h2>Legend</h2><div class="pdf-legend">${legendItems(shown.map(([v]) => X.ctx().geoCache[v.id].g)).join('')}</div>
-        <h2>Rules</h2>${rs.length ? `${p('Judged in the views printed here.')}<ul>${rs.map(r => { const b = broken.filter(x => x.rule === r.id);
-          return `<li>${esc(r.title || r.id)}: <b class="${b.length ? 'pdf-broken' : 'pdf-holds'}">${b.length ? 'broken' : 'holds'}</b>${b.length ? `<ul>${b.map(x => `<li>${esc(x.message)}</li>`).join('')}</ul>` : ''}</li>`; }).join('')}</ul>` : p('The model has no rules.')}</section></main>`;
-    document.querySelectorAll('#um-pdf .pdf-view svg').forEach(svg => { const b = svg.viewBox.baseVal, room = H - (svg.parentNode.offsetHeight - svg.getBoundingClientRect().height);
-      const k = Math.min(1, W / b.width, Math.max(240, room) / b.height); svg.setAttribute('width', b.width * k); svg.setAttribute('height', b.height * k); });
-  });
+  const destroy0 = handle.destroy;
+  handle.destroy = () => { ac.abort(); if (rec) clearTimeout(rec.t); destroy0(); }; // the page's listeners go with the map
+  handle.on('select', ({ target, targets }) => { sel = target && target.type === 'node' ? target.id : null; pc.select(target, targets); if (!X.busy()) write(); recordSoon(); }); // mid-move: the view's entry, once it lands
+  handle.on('viewchange', e => { pc.unlight(); recordSoon();
+    if (linking && linking.view === e.view) return; // a link's own move: its entry, written once the link has settled
+    linking = null; write(true); }); // a new view, a new entry (a move the reader started while a link was followed, too)
+  handle.on('lens', e => { lensOn = e.lens; showLens(); write(); });
+  // #pdf=1 (umlimator.py pdf, #93): the page becomes a document for Chrome to print (printDoc), once the fonts are in,
+  // after the map's own redraw for them
+  if (Q.get('pdf')) (document.fonts ? document.fonts.ready : Promise.resolve()).then(() => printDoc(X, model, Q));
   return handle;
 }
 
+/* #pdf=1[&views=a,pic-*][&paper=letter] (umlimator.py pdf): the map as a document to hand in for a review, laid out here a
+   page at a time, as Chrome's own page breaks can't be read back for the contents. Each sheet is one page: @page sets the
+   paper (A4 or US Letter, across) and its margins, and each sheet ends in the title and "page N of M".
+   - The cover: the title, the date, the model's file, a summary line and the contents, each view with its page.
+   - Each view, from a page of its own: a header (the view's path and its caption), its picture (toSVG()'s, in vectors)
+     as large as the page allows and never larger than drawn, the legend of what it draws, then tables of its cards,
+     lines and boxes. They fill two columns below the picture, or one column beside a picture too tall to leave room
+     below. A table that runs out of room goes on in the next column, under its heading and header row again; a row is
+     never cut, and a heading never ends a column.
+   - The rules, when the model has any: each holding or broken in the views printed, and what breaks it. */
+function printDoc(X, model, Q) {
+  const { D, views, V, N, chain, nodeIn, viewEdges, geoCache } = X.ctx();
+  const only = (Q.get('views') || '').split(',').filter(Boolean), want = v => !only.length || only.some(p => p.endsWith('*') ? v.id.startsWith(p.slice(0, -1)) : v.id === p);
+  const shown = views.filter(want).map(v => [v, X.standalone(1, v.id)]).filter(([, s]) => s), on = new Set(shown.map(([v]) => v.id));
+  const rs = shown.length ? arrOf(model.rules).filter(r => r && typeof r === 'object' && (r.from || r.to || r.noCycles)) : []; // as rules() reads them; none without a view
+  const broken = rules(model).filter(b => on.has(b.view)); // judged in the views printed, as the document says
+  const [pw, ph] = Q.get('paper') === 'letter' ? [279.4, 215.9] : [297, 210], title = esc(D.title || 'Map'); // the paper across, in mm
+  const count = (k, w, ws = w + 's') => `${k} ${k === 1 ? w : ws}`, T = v => esc(v.title || v.id), full = c => Object.assign(c, { full: true });
+  const cards = v => arrOf(v.nodeIds).filter(i => N[i]), lines = v => viewEdges(v).filter(e => e.from !== e.to), boxes = v => arrOf(v.containers).filter(c => c && c.id); // as describe() reads a view
+  const name = (v, id) => esc(N[id] ? nodeIn(id, v.id).label || id : (boxes(v).find(c => c.id === id) || {}).label || id);
+  document.title = D.title || 'Map'; document.body.removeAttribute('class');
+  document.body.innerHTML = `<style>@page { size: ${pw}mm ${ph}mm; margin: 11mm 13mm 9mm; background: var(--um-bg); }
+    html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: var(--um-bg); } body { margin: 0; background-image: none; }
+    #um-pdf { color: var(--um-text); font: 8.5pt/1.4 var(--um-sans); font-variant-numeric: tabular-nums; }
+    #um-pdf .sheet { width: ${pw - 26}mm; height: ${ph - 20.5}mm; padding: 0; display: flex; flex-direction: column; overflow: hidden; break-after: page; }
+    #um-pdf .sheet:last-child { break-after: auto; }
+    #um-pdf header { display: flex; align-items: baseline; justify-content: space-between; gap: 16pt; padding-bottom: 5pt; border-bottom: .75pt solid var(--um-border-2); }
+    #um-pdf h1 { font-size: 26pt; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; margin: 0 0 10pt; }
+    #um-pdf h2, #um-pdf .h2 { display: block; font: 650 14pt/1.25 var(--um-sans); letter-spacing: -.01em; text-transform: none; color: var(--um-text); margin: 0; }
+    #um-pdf h2::after { content: none; } #um-pdf .up { color: var(--um-muted); font-weight: 450; }
+    #um-pdf .meta { color: var(--um-muted); font-size: 8pt; white-space: nowrap; } #um-pdf .cap { color: var(--um-muted); font-size: 9pt; margin: 4pt 0 0; }
+    #um-pdf .body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 8pt; } #um-pdf .body.side { flex-direction: row; gap: 16pt; }
+    #um-pdf figure { flex: none; align-self: center; margin: 0; border: 1px solid var(--um-border); border-radius: 4pt; overflow: hidden; }
+    #um-pdf .side figure { align-self: flex-start; } #um-pdf figure svg { display: block; }
+    #um-pdf .lg { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3pt 14pt; font-size: 7.5pt; } #um-pdf .lg > b { font-weight: 650; }
+    #um-pdf .side .lg { margin-bottom: 10pt; }
+    #um-pdf .cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 18pt; }
+    #um-pdf .col { min-height: 0; overflow: hidden; } #um-pdf .blk + .blk { margin-top: 10pt; }
+    #um-pdf .h3 { font-size: 9pt; font-weight: 650; margin: 0 0 3pt; } #um-pdf .h3 span { color: var(--um-muted); font-weight: 450; }
+    #um-pdf table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; line-height: 1.35; }
+    #um-pdf th { text-align: left; font-size: 7pt; font-weight: 600; color: var(--um-muted); padding: 0 6pt 2.5pt 0; border-bottom: .75pt solid var(--um-border-2); }
+    #um-pdf td { vertical-align: top; padding: 2.5pt 6pt 2.5pt 0; border-bottom: .5pt solid var(--um-border); overflow-wrap: anywhere; }
+    #um-pdf td b { font-weight: 600; } #um-pdf td small { display: block; color: var(--um-muted); font: 7pt/1.3 var(--um-mono); }
+    #um-pdf td p { margin: 0; } #um-pdf td ul { margin: 0; padding-left: 10pt; }
+    #um-pdf td i { display: inline-block; font-style: normal; margin-right: 4pt; } #um-pdf i.sw { width: 8pt; height: 6pt; border: 1pt solid; border-radius: 1.5pt; }
+    #um-pdf i.w { width: 10pt; border-top: 1.5pt solid; vertical-align: middle; }
+    #um-pdf i.num { min-width: 10pt; height: 10pt; padding: 0 2pt; border-radius: 5pt; background: var(--um-text); color: var(--um-bg); font: 700 6.5pt/10pt var(--um-sans); text-align: center; }
+    #um-pdf .cards th:nth-child(1), #um-pdf .boxes th:nth-child(1) { width: 32%; } #um-pdf .cards th:nth-child(2) { width: 20%; }
+    #um-pdf .lines th.n { width: 6%; } #um-pdf .lines th:nth-last-child(3) { width: 42%; } #um-pdf .lines th:last-child { width: 24%; }
+    #um-pdf .rules th:nth-child(1) { width: 30%; } #um-pdf .rules th:nth-child(2) { width: 24%; } #um-pdf .rules th:nth-child(3) { width: 10%; }
+    #um-pdf .ok { color: var(--um-green); font-weight: 650; } #um-pdf .no { color: var(--um-rose); font-weight: 650; }
+    #um-pdf .cover .body { flex-direction: row; gap: 28pt; margin-top: 0; } #um-pdf .cover .ttl { flex: 0 0 40%; padding-top: 34mm; } #um-pdf .cover .cols { padding-top: 34mm; }
+    #um-pdf .sum { font-size: 10pt; margin: 6pt 0 0; } #um-pdf .toc td { padding: 4pt 6pt 4pt 0; } #um-pdf .toc td.pg { width: 3em; padding-right: 0; text-align: right; }
+    #um-pdf .toc td span { display: block; color: var(--um-muted); font-size: 7.5pt; }
+    #um-pdf footer { display: flex; justify-content: space-between; margin-top: 6pt; padding: 5pt 0 0; border-top: .5pt solid var(--um-border); color: var(--um-dim); font: 7pt var(--um-sans); }</style><main id="um-pdf"></main>`;
+  const doc = document.getElementById('um-pdf');
+  // a sheet: its header, the body its content fills, and its footer (`key` names the view or section it starts)
+  const sheet = (head, key = '') => { doc.insertAdjacentHTML('beforeend', `<section class="sheet" data-key="${key}">${head}<div class="body"></div><footer><span>${title}</span><span class="pn"></span></footer></section>`);
+    return doc.lastElementChild.querySelector('.body'); };
+  const cols = (body, n) => { body.insertAdjacentHTML('beforeend', `<div class="cols" style="--n:${n}">${'<div class="col"></div>'.repeat(n)}</div>`); return [...body.lastElementChild.children]; };
+  // tables into columns, next() handing out the next column (null: no more, and pour() says false). A table after the
+  // first starts a column of its own while its page has one left. It starts with its heading, header row and first two
+  // rows (its only one), else in the next column; a row that does not fit goes on, whole, in the next, never the last one
+  // alone. A column handed out fresh on a page of its own (`full`) takes a table's start whatever its size.
+  const pour = (next, blocks) => { let box = next();
+    const over = () => box.lastElementChild.getBoundingClientRect().bottom > box.getBoundingClientRect().bottom - 2, fresh = () => !box.firstElementChild;
+    for (const [n, b] of blocks.entries()) { let tb = null;
+      if (n && !fresh() && next.spare()) box = next();
+      const open = (i, k, force) => { box.insertAdjacentHTML('beforeend', `<div class="blk">${b.title ? `<div class="h3">${b.title}${i ? ' <span>(continued)</span>' : ''}</div>` : ''}<table class="${b.cls}">${b.head ? `<thead><tr>${b.head}</tr></thead>` : ''}<tbody>${b.rows.slice(i, i + k).join('')}</tbody></table></div>`);
+        if (force || !over()) return box.lastElementChild.querySelector('tbody'); box.lastElementChild.remove(); };
+      for (let i = 0; i < b.rows.length;) {
+        if (!tb) { const k = Math.min(2, b.rows.length - i);
+          while (!(tb = open(i, k)) && !(fresh() && box.full)) if (!(box = next())) return false;
+          tb ||= open(i, 1) || open(i, 1, true); // ponytail: a row taller than a page is cut at its foot
+          i += tb.rows.length; continue; }
+        tb.insertAdjacentHTML('beforeend', b.rows[i]);
+        if (!over()) { i++; continue; }
+        tb.lastElementChild.remove();
+        if (i === b.rows.length - 1 && tb.rows.length > 2) { tb.lastElementChild.remove(); i--; }
+        if (!(box = next())) return false; tb = null;
+      } }
+    return true; };
+  // the columns of a page, then (paging) of as many pages as it takes, or (no `head`) none more
+  const paging = (head, n, first) => { const q = [...first], f = () => q.shift() || (head ? (q.push(...cols(sheet(head(true)), n).map(full)), q.shift()) : null);
+    f.spare = () => q.length > 0; return f; };
+
+  // the cover, and its contents: a view's caption under its title, indented under the views printed that hold it
+  const day = new Date(Date.now() - new Date().getTimezoneOffset() * 6e4).toISOString().slice(0, 10);
+  const sum = [count(shown.length, 'view'), count(new Set(shown.flatMap(([v]) => cards(v))).size, 'card'), count(new Set(shown.flatMap(([v]) => lines(v).map(e => e._id))).size, 'line'), ...(rs.length ? [count(rs.length, 'rule')] : [])];
+  const cover = sheet('', 'cover'); cover.parentNode.classList.add('cover');
+  cover.insertAdjacentHTML('beforeend', `<div class="ttl"><h1>${title}</h1><p class="cap">${day}${D.source ? ` · <span class="mono">${esc(D.source)}</span>` : ''}</p><p class="sum">${sum.join(' · ')}</p></div>`);
+  pour(paging(() => '<header><div class="h2">Contents <span class="up">(continued)</span></div></header>', 2, cols(cover, 1)), [{ title: 'Contents', cls: 'toc', rows: [
+    ...shown.map(([v], i) => `<tr><td style="padding-left:${chain(v.id).slice(0, -1).filter(id => on.has(id)).length * 12}pt">${T(v)}${v.caption ? `<span>${esc(v.caption)}</span>` : ''}</td><td class="pg" data-pg="${i}"></td></tr>`),
+    ...(rs.length ? ['<tr><td>Rules</td><td class="pg" data-pg="rules"></td></tr>'] : [])] }]);
+
+  shown.forEach(([v, svg], vi) => {
+    const g = geoCache[v.id].g, ids = cards(v), es = lines(v), seq = v.render === 'sequence', at = Object.fromEntries(g.nodes.map(n => [n.id, n]));
+    const wk = new Map(g.edges.flatMap(d => edgeRefIds(d).map(id => [id, d.wk]))), held = boxes(v).map(c => [c, arrOf(c.nodeIds).filter(i => ids.includes(i))]).filter(([, ins]) => ins.length);
+    const up = chain(v.id).slice(0, -1).map(id => `<span class="up">${T(V[id])} › </span>`).join('');
+    const head = more => `<header>${more ? `<div class="h2">${up}${T(v)} <span class="up">(continued)</span></div>` : `<h2>${up}${T(v)}</h2>`}<span class="meta">${[count(ids.length, 'card'), count(es.length, 'line'), ...(held.length ? [count(held.length, 'box', 'boxes')] : [])].join(' · ')}</span></header>${!more && v.caption ? `<p class="cap">${esc(v.caption)}</p>` : ''}`;
+    const body = sheet(head(false), vi);
+    body.insertAdjacentHTML('beforeend', `<figure>${svg}</figure><div class="lg"><b>Legend</b>${legendItems([g], 'opens a view of its own').join('')}</div>`);
+    // the picture as large as the page allows, never larger than drawn: below it the legend, then two columns of tables;
+    // one too tall for that keeps the page's height, with the legend and one column beside it. Smaller (down to 70%, and
+    // to a scale of 0.6 at least) when that keeps the tables on its page; else they go on over the next pages.
+    const fig = body.firstElementChild, lg = fig.nextElementSibling, s = fig.firstElementChild, b = s.viewBox.baseVal, W = body.clientWidth - 2, H = body.clientHeight - 2, SIDE = 340;
+    let k = Math.min(1, W / b.width, (H - lg.offsetHeight - 16) / b.height); const side = b.width * k <= W - SIDE;
+    if (side) k = Math.min(1, H / b.height, (W - SIDE) / b.width);
+    body.classList.toggle('side', side);
+    const lay = (f, more) => { s.setAttribute('width', b.width * k * f); s.setAttribute('height', b.height * k * f); body.querySelector('.cols')?.remove();
+      const first = cols(body, side ? 1 : 2); if (side) first[0].append(lg); return pour(paging(more && head, 2, first), tables); };
+    const tables = [
+      { title: `Cards <span>${ids.length}</span>`, cls: 'cards', head: '<th>Card</th><th>Kind</th><th>What it is</th>', rows: ids.map(id => { const c = nodeIn(id, v.id), t = KIND[kindOf(c.kind, true)], d = at[id] || {}, sub = c.sublabel ?? c.sub;
+        return `<tr><td>${d.step ? `<i class="num">${esc(d.step)}</i>` : ''}<b>${esc(c.label || id)}</b>${d.kids || d.opens ? ' ⤢' : ''}${sub ? `<small>${esc(sub)}</small>` : ''}</td>`
+          + `<td><i class="sw" style="border-color:var(--um-${t[0]});background:var(--um-${t[0]}-f)"></i>${t[1]}</td><td>${c.what ? md(c.what) : ''}</td></tr>`; }) },
+      { title: `Lines <span>${es.length}</span>`, cls: 'lines', head: `${seq ? '<th class="n">#</th>' : ''}<th>From → to</th><th>Label</th><th>Technology</th>`, rows: es.map((e, i) => { const w = wk.get(e._id) || 'calls';
+        return `<tr>${seq ? `<td>${i + 1}</td>` : ''}<td><i class="w" style="border-color:var(--um-w-${w})"></i>${name(v, e.from)} → ${name(v, e.to)}</td><td>${e.label ? esc(e.label) : `<span class="up">${w}</span>`}</td><td>${esc(e.sublabel || '')}</td></tr>`; }) },
+      { title: `Boxes <span>${held.length}</span>`, cls: 'boxes', head: '<th>Box</th><th>Holds</th>', rows: held.map(([c, ins]) => `<tr><td><b>${esc(c.label || c.id)}</b></td><td>${andList(ins.map(i => name(v, i)))}</td></tr>`) },
+    ].filter(x => x.rows.length);
+    [1, .9, .8, .7].some(f => k * f >= Math.min(k, .6) && lay(f)) || lay(1, true);
+  });
+
+  if (rs.length) { // the rules: where rules() judges each (a rule that names boxes, in the views that draw one; `views` narrows it)
+    // ponytail: rules()' own scope, again; one helper for both if it changes
+    const anyBox = new Set(views.flatMap(v => boxes(v).map(c => c.id))), printed = shown.map(([v]) => v);
+    const where = r => { const named = [r.from, r.to].flatMap(s => boxesNamed(s, id => anyBox.has(id) && !N[id]));
+      const vs = printed.filter(v => (!Array.isArray(r.views) || r.views.includes(v.id)) && (!named.length || boxes(v).some(c => named.includes(c.id))));
+      return vs.length === printed.length ? 'every view printed' : vs.length ? vs.map(T).join(', ') : 'no view printed'; };
+    const said = (x, r) => x.message.slice(`view ${x.view}: `.length).replace(`, which breaks rule "${r.title || r.id}"`, '').replace(` breaks rule "${r.title || r.id}"`, '').replace(/^edge /, ''); // its message's words: A→B, or the boxes in a cycle
+    const head = more => `<header>${more ? '<div class="h2">Rules <span class="up">(continued)</span></div>' : '<h2>Rules</h2>'}<span class="meta">${count(rs.length, 'rule')} · ${new Set(broken.map(x => x.rule)).size} broken</span></header>${more ? '' : '<p class="cap">Judged in the views printed here.</p>'}`;
+    pour(paging(head, 1, cols(sheet(head(false), 'rules'), 1).map(full)), [{ cls: 'rules', head: '<th>Rule</th><th>Applies in</th><th>State</th><th>Lines that break it</th>', rows: rs.map(r => { const bs = broken.filter(x => x.rule === r.id);
+      return `<tr><td><b>${esc(r.title || r.id)}</b></td><td>${where(r)}</td><td class="${bs.length ? 'no' : 'ok'}">${bs.length ? 'broken' : 'holds'}</td><td>${bs.map(x => `<div>${T(V[x.view])}: ${esc(said(x, r))}</div>`).join('') || '<span class="up">none</span>'}</td></tr>`; }) }]);
+  }
+  const all = [...doc.children]; // the pages, numbered, and the contents' page of each view
+  all.forEach((p, i) => { p.querySelector('.pn').textContent = `page ${i + 1} of ${all.length}`; });
+  doc.querySelectorAll('[data-pg]').forEach(td => { td.textContent = all.findIndex(p => p.dataset.key === td.dataset.pg) + 1; });
+}
+
 /* ================= the standalone page's pieces (#99): views list, legend, hint line, details panel =================
    mountPage draws all four in its page; render() draws those a host asks for (nav, legend, hints, details) around its
    canvas, in its shadow root. The hint line is hintHTML() and hinter(); pieces() draws the others from the map and acts
@@ -4024,8 +4515,8 @@ export function mountPage(container, model, options = {}) {
    o.page: the standalone page, which keeps the reader's choices in localStorage; o.frame takes the class tree-open while
    the views list is open, and o.toggle says so; o.layer holds an example's lightbox; o.status(text, ms) says what happened. */
 const shortT = t => String(t || '').split(' · ')[0];
-const hintHTML = keys => typeof matchMedia === 'function' && matchMedia('(hover: none)').matches ? '<span>pinch = zoom</span><span>drag = move</span><span>tap = details</span>'
-  : `<span>scroll = zoom</span><span>drag = move</span><span>double-click ⤢ = open</span>${keys ? `<span>${keys} = search</span><span>? = keys</span>` : ''}`; // keys: the page's search key
+const hintHTML = (keys, ctrl) => typeof matchMedia === 'function' && matchMedia('(hover: none)').matches ? '<span>pinch = zoom</span><span>drag = move</span><span>tap = details</span>'
+  : `<span>${ctrl ? 'Ctrl + scroll' : 'scroll'} = zoom</span><span>drag = move</span><span>double-click ⤢ = open</span>${keys ? `<span>${keys} = search</span><span>? = keys</span>` : ''}`; // keys: the page's search key; ctrl: wheel 'ctrl'
 function hinter(el, html) { let t; return (s, ms = 1800) => { el.textContent = s; el.classList.add('msg'); clearTimeout(t); t = setTimeout(() => { el.innerHTML = html; el.classList.remove('msg'); }, ms); }; }
 
 // Pull concise points from captured prose; retain wording and keep the full point in its tooltip. A point is a sentence
@@ -4048,12 +4539,12 @@ function detailBullets(body) {
   return parts;
 }
 
-function legendItems(gs) { // what these pictures draw, each with what it means: the view's legend, and the PDF's (#93)
+function legendItems(gs, opens = 'double-click to open') { // what these pictures draw, each with what it means: the view's legend, and the PDF's (#93)
   const ns = gs.flatMap(g => g.nodes), es = gs.flatMap(g => g.edges), used = [...new Set(ns.map(n => n.k))];
   const order = ['m-public', 'm-step', 'm-lane', 'm-ext', 'm-verb', 'm-board', 'm-hook', 'm-script', 'frontend', 'backend', 'ai', 'queue', 'database', 'security', 'cloud', 'external', 'file'];
   const shape = k => k === 'm-verb' ? 'p' : (k === 'm-ext' || k === 'external') ? 'd' : k === 'm-hook' ? 'h' : '';
   return order.filter(k => used.includes(k)).map(k => `<span class="lgi" title="${esc(KIND[k][1] + ' — ' + KIND[k][2])}"><i class="${shape(k)}" style="border-color:var(--um-${KIND[k][0]});background:var(--um-${KIND[k][0]}-f)${k === 'm-hook' ? `;background:var(--um-${KIND[k][0]})` : ''}"></i><b>${KIND[k][1]}</b><span>${KIND[k][2]}</span></span>`)
-    .concat(ns.some(n => n.kids || n.opens) ? ['<span class="lgi"><i class="s"></i><b>⤢ Stacked</b><span>double-click to open</span></span>'] : [])
+    .concat(ns.some(n => n.kids || n.opens) ? [`<span class="lgi"><i class="s"></i><b>⤢ Stacked</b><span>${opens}</span></span>`] : [])
     .concat(ns.some(n => n.step) ? ['<span class="lgi"><i class="num">1</i><b>Step</b><span>run order</span></span>'] : [])
     .concat(ns.some(n => n.tag) ? ['<span class="lgi"><i class="tag"></i><b>@author</b><span>who wrote it</span></span>'] : [])
     .concat(WIRES.filter(w => es.some(e => e.wk === w[0])).map(w => `<span class="lgi"><i class="w" style="border-color:var(--um-w-${w[0]})"></i><b>${w[1]}</b><span>${w[2]}</span></span>`))
@@ -4063,14 +4554,17 @@ function legendItems(gs) { // what these pictures draw, each with what it means:
 function pieces(X, el, o) {
   const kept = k => { try { return o.page ? localStorage.getItem(k) : null; } catch (_) { return null; } };
   const keep = (k, v) => { try { if (o.page) localStorage.setItem(k, v); } catch (_) {} };
-  let sel = null, picked = [], lit = null, lb = null, folded = kept('visual-legend') === '0', tab = kept('visual-tab') || 'when', TABS = ['when', 'what', 'how', 'links'];
+  // want: the tab the reader chose, kept; tab: the one shown, which is want when the card has it (0.14.0)
+  let sel = null, picked = [], lit = null, lb = null, lbBack = null, folded = kept('visual-legend') === '0', want = kept('visual-tab') || 'when', tab = want, TABS = ['when', 'what', 'how', 'links'];
+  let told = null; // the story's step shown: { id, step, pointer: the card its own select names, pending: that select is still to come }
 
   /* the legend: the kinds of cards and lines the view draws, in a box that folds away */
   function legend() {
-    const items = legendItems([X().geo()]);
+    const items = legendItems([X().geo()]), back = el.legend.contains(el.legend.getRootNode().activeElement);
     el.legend.hidden = !items.length;
     el.legend.classList.toggle('folded', folded);
     el.legend.innerHTML = `<div class="t"><span>LEGEND</span><button type="button" id="m-lfold" aria-label="${folded ? 'Show' : 'Hide'} legend" aria-expanded="${!folded}">${folded ? '+' : '–'}</button></div>${items.join('')}`;
+    if (back) el.legend.querySelector('#m-lfold').focus(); // a fold by keyboard keeps focus on the button
   }
   /* the views list: readable columns; a declared order may include shortcuts to descendants */
   function tree() {
@@ -4129,7 +4623,7 @@ function pieces(X, el, o) {
     const exs = Array.isArray(n.examples) ? n.examples.filter(x => x && (x.thumb || x.href)) : [];
     const tabs = [['when', 'When to use'], ['what', 'What it is'], ['how', 'How it works'], ...(exs.length ? [['examples', 'Example']] : []), ['links', 'Behind the scenes']];
     TABS = tabs.map(t => t[0]);
-    if (!TABS.includes(tab)) tab = 'when';
+    tab = TABS.includes(want) ? want : 'when'; // a card without the chosen tab shows its first; the choice stays for the next card
     const text = (h4, body, key) => body ? `<h4>${h4}</h4><ul class="detail-bullets">${detailBullets(body).map(b => `<li title="${esc(b)}">${inline(b)}</li>`).join('')}</ul>` : `<h4>${h4}</h4><div class="pnone">Not written yet — add <code>${key}</code> to this node in the map model.</div>`;
     const verbs = (n.verbs || []).length ? `<div class="pverbs">${n.verbs.map(v => { const vid = N[nid + ':' + v] ? nid + ':' + v : null; return `<${vid ? `button data-n="${esc(vid)}"` : 'span'} class="pverb" style="--c:${c}">${esc(v)}</${vid ? 'button' : 'span'}>`; }).join('')}</div>` : '';
     const srcHtml = srcs.length ? '<ul class="source-list">' + srcs.map(s => `<li class="src">${srcHref(s) ? `<a href="${esc(srcHref(s))}" title="Open ${esc(sb ? srcLabel(s) : base + s)}"${sb ? ' target="_blank" rel="noopener"' : ''}>${esc(srcLabel(s))}</a>` : `<span>${esc(s)}</span>`}<button class="ibtn sm" data-copy="${esc(sb ? srcLabel(s) : base + s)}" title="Copy path" aria-label="Copy path">⧉</button></li>`).join('') + '</ul>' : '<div class="rel-none">No source listed</div>';
@@ -4141,7 +4635,7 @@ function pieces(X, el, o) {
       links: `<div class="links"><div><h4>← Comes from</h4>${relRows(ups, 'up')}</div><div><h4>→ Leads to</h4>${relRows(downs, 'down')}</div>
         <div><h4>Source files</h4>${srcHtml}${vIn.length ? `<h4 style="margin-top:10px">Also shown in</h4><ul class="pviews">${vIn.map(v => `<li><button class="pview" data-v="${esc(v.id)}" data-sel="${esc(nid)}">${esc(shortT(v.title || v.id))}</button></li>`).join('')}</ul>` : ''}</div></div>`,
     };
-    const was = !o.page && focused(), on = was && [...was.attributes].find(a => a.name.startsWith('data-')); // a host's panel keeps focus on the control it was on
+    const was = focused(), on = was && [...was.attributes].find(a => a.name.startsWith('data-')); // a panel drawn again keeps focus on the control it was on
     panel.innerHTML = `<div class="ph" style="--c:${c}">
         ${(() => { const I = (D.icons || {})[n.icon];
   return I && I.src ? `<span class="big logo${I.dark ? ' dark' : ''}" aria-hidden="true"><img src="${I.src}" width="22" height="22" alt=""></span>`
@@ -4157,30 +4651,41 @@ function pieces(X, el, o) {
     panel.querySelectorAll('.clamp').forEach(el => { if (el.scrollHeight > el.clientHeight + 2) el.insertAdjacentHTML('afterend', '<button class="morebtn" data-more>Show all</button>'); });
     if (was) ((on && [...panel.querySelectorAll(`[${on.name}]`)].find(x => x.getAttribute(on.name) === on.value)) || panel.querySelector('[aria-selected="true"]')).focus();
   }
-  function hide() { const back = !o.page && focused(); el.panel.hidden = true; if (back) queueMicrotask(() => { if (el.panel.hidden) X().focus(); }); } // a host's panel gives focus back to the map
-  function openExample(nid, i) {
+  function hide() { const back = focused(); el.panel.hidden = true; if (back) queueMicrotask(() => { if (el.panel.hidden) X().focus(); }); } // a panel that closes gives focus back to the map
+  function openExample(nid, i, from = null) { // from: the control that opened it, which focus goes back to
     const x = ((X().ctx().nodeIn(nid, X().view()) || {}).examples || [])[i]; if (!x) return;
     if (!lb) { lb = h(`<div class="lightbox" id="m-lightbox" role="dialog" aria-modal="true" aria-label="Example" hidden></div>`); o.layer.appendChild(lb);
       lb.addEventListener('click', e => { if (e.target === lb || e.target.closest('[data-lbclose]')) closeExample(); }); }
     lb.innerHTML = `<figure><img src="${esc(x.full || x.thumb)}" alt="${esc(x.title || '')}"><figcaption><span>${inline(x.title || '')}</span>${x.href ? `<a href="${esc(x.href)}" target="_blank" rel="noopener">Open live page ↗</a>` : ''}<button class="ibtn" data-lbclose title="Close (Esc)" aria-label="Close">×</button></figcaption></figure>`;
-    lb.hidden = false; lb.querySelector('[data-lbclose]').focus();
+    lbBack = from; lb.hidden = false; lb.querySelector('[data-lbclose]').focus();
   }
-  const closeExample = () => { if (lb) lb.hidden = true; };
-  const setTab = t => { tab = t; keep('visual-tab', t); if (sel) show(sel); };
+  const closeExample = () => { if (!lb || lb.hidden) return; lb.hidden = true; // focus goes back where it came from: the thumbnail, else the panel's, else the map
+    const to = lbBack && lbBack.isConnected ? lbBack : !el.panel.hidden && el.panel.querySelector('[data-ex]'); lbBack = null; if (to) to.focus(); else X().focus(); };
+  const setTab = t => { want = tab = t; keep('visual-tab', t); if (sel && !el.panel.hidden) show(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 */
   const cardName = id => X().ctx().nodeIn(id, X().view()).label || id, nCards = n => `${n} card${n === 1 ? '' : 's'}`;
   // the slowest and the costliest path (#95), offered where the view's lines have latency or cost
   const BY = { latency: ['⏱', 'slowest'], cost: ['¤', 'costliest'] }, budgets = () => Object.keys(BY).filter(k => X().ctx().viewEdges(X().ctx().V[X().view()]).some(e => typeof e[k] === 'number'));
-  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>' : '')
-    + budgets().map(k => { const t = `Light the ${BY[k][1]} path ${picked.length > 1 ? 'between the two cards' : 'from this card'}`; return `<button class="ibtn" data-lit="${k}" title="${t}" aria-label="${t}">${BY[k][0]}</button>`; }).join('')
-    + '<button class="ibtn" data-lit="down" title="What if this goes down?" aria-label="What if this goes down?">⊘</button>';
-  function unlight() { if (lit) { lit = null; X().highlight(null); X().overlay('lit', null); } }
-  function light(key, refs, said, marks = null) { // marks: a layer that goes with the highlight (a path's total, the card that is down)
+  const litOn = k => !!lit && lit.split(' ')[0] === k; // the button whose light is on says so (aria-pressed)
+  const litButtons = () => `<button class="ibtn" data-lit="out" title="Light what it leads to (&gt;)" aria-label="Light what it leads to" aria-pressed="${litOn('out')}">→</button><button class="ibtn" data-lit="in" title="Light what leads to it (&lt;)" aria-label="Light what leads to it" aria-pressed="${litOn('in')}">←</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" aria-pressed="${litOn('paths')}">⇄</button>` : '')
+    + budgets().map(k => { const t = `Light the ${BY[k][1]} path ${picked.length > 1 ? 'between the two cards' : 'from this card'}`; return `<button class="ibtn" data-lit="${k}" title="${t}" aria-label="${t}" aria-pressed="${litOn(k)}">${BY[k][0]}</button>`; }).join('')
+    + `<button class="ibtn" data-lit="down" title="What if this goes down?" aria-label="What if this goes down?" aria-pressed="${litOn('down')}">⊘</button>`;
+  /* what is lit is the pieces' own layer, 'lit' (0.14.0): it never takes a host's highlight() or a story's away, nor they it */
+  const lv = r => Math.min(1, Math.max(0, +(r.level ?? (r.distance > 0 ? Math.max(.45, 1 - .15 * r.distance) : 1)) || 0)); // as highlight() fades a Ref
+  function litLayer(refs, marks) { // the cards and lines lit, the rest dimmed, with the marks that go with them (a path's total, the card that is down)
+    const L = { nodes: {}, edges: {}, dim: refs.length > 0 }, put = (to, x, r) => { to[x] = { level: Math.max(lv(r), (to[x] || {}).level || 0) }; };
+    refs.forEach(r => { if (r.type === 'node') put(L.nodes, r.id, r); else if (r.type === 'edge') (r.ids || []).forEach(x => put(L.edges, x, r)); });
+    Object.entries((marks || {}).nodes || {}).forEach(([id, m]) => { L.nodes[id] = { ...L.nodes[id], ...m }; });
+    return L;
+  }
+  const pressed = () => { if (el.panel) el.panel.querySelectorAll('[data-lit]').forEach(b => b.setAttribute('aria-pressed', litOn(b.dataset.lit))); };
+  function unlight() { if (lit) { lit = null; X().overlay('lit', null); pressed(); } }
+  function light(key, refs, said, marks = null) {
     if (lit === key) { unlight(); return o.status('Highlight cleared'); }
-    lit = key; X().highlight(refs.length ? refs : null); X().overlay('lit', marks); o.status(said, 3600);
+    lit = key; X().overlay('lit', refs.length || marks ? litLayer(refs, marks) : null, [X().view()]); pressed(); o.status(said, 3600);
   }
   function lightReach(back) {
     if (!sel || !X().geo().byId[sel]) return;
@@ -4222,7 +4727,7 @@ function pieces(X, el, o) {
     const tb = t.closest('[data-tab]'); if (tb) return setTab(tb.dataset.tab);
     const st = t.closest('[data-step]'); if (st) return setTab(TABS[(TABS.indexOf(tab) + +st.dataset.step + TABS.length) % TABS.length]);
     const mb = t.closest('[data-more]'); if (mb) { mb.previousElementSibling.classList.add('open'); mb.remove(); }
-    const ex = t.closest('[data-ex]'); if (ex) return openExample(el.panel.dataset.node, +ex.dataset.ex);
+    const ex = t.closest('[data-ex]'); if (ex) return openExample(el.panel.dataset.node, +ex.dataset.ex, ex);
     if (t.closest('[data-close]')) return X().select(null);
     const lt = t.closest('[data-lit]'); if (lt) { const k = lt.dataset.lit; return k === 'paths' ? lightPaths() : k === 'down' ? lightDown() : BY[k] ? lightCritical(k) : lightReach(k === 'in'); }
     const ob = t.closest('[data-open]'); if (ob) return X().open(ob.dataset.open); // the open event first, as a double-click on the card
@@ -4232,17 +4737,37 @@ function pieces(X, el, o) {
     const cp = t.closest('[data-copy]'); if (cp) navigator.clipboard && navigator.clipboard.writeText(cp.dataset.copy).then(() => o.status('Path copied'), () => o.status(cp.dataset.copy));
   });
 
+  /* a story's step points at a card (0.14.0): the select its step makes is a pointer, which opens no details; a card the
+     reader picks opens them, that one too. One rule, by id: a step's select is a card's id or a Ref (a chip's or a badge's
+     names its card) */
+  const pointerOf = x => typeof x === 'string' ? x : x && typeof x === 'object' ? (x.type === 'node' ? x.id : x.node ?? null) : null;
+  function story(e) { // the map's story event
+    if (!e || e.step == null) { told = null; return; }
+    if (told && told.id === e.story && told.step === e.step) return; // the same step, said again (paused, played on)
+    const def = arrOf(X().ctx().D.stories).find(s => s && s.id === e.story), step = def && arrOf(def.steps).filter(s => s && typeof s === 'object')[e.step];
+    const pointer = step ? pointerOf(step.select) : null, already = pointer != null && sel === pointer && step.view === X().view() && !X().busy(); // its select changes nothing: no event comes
+    told = { id: e.story, step: e.step, pointer, pending: pointer != null && !already };
+    if (already && el.panel) hide();
+  }
+
   return {
     chrome() { if (el.legend) legend(); if (el.tree) tree(); if (sel && el.panel && !el.panel.hidden) show(sel); }, // each picture of the map
-    select(target, targets) { // the map's select event: the selected card's details, unless a story's step picked it (a pointer)
+    select(target, targets) { // the map's select event: the selected card's details, unless it is the select a story's step makes (a pointer)
       sel = target && target.type === 'node' ? target.id : null; picked = (targets || []).filter(t => t.type === 'node').map(t => t.id);
-      unlight(); if (el.panel) { if (sel && !X().told(sel)) show(sel); else hide(); }
+      const pointer = !!(told && told.pending && sel != null && sel === told.pointer); if (pointer) told.pending = false;
+      unlight(); if (el.panel) { if (sel && !pointer) show(sel); else hide(); }
     },
-    unlight, find, setTree,
+    story, unlight, find, setTree,
+    modal: () => !!(lb && !lb.hidden), // an example shown full size, which holds the keys while open
     key(e) { // the pieces' keys: true when one was used
       const k = e.key;
-      if ((k === 'Escape' || k === 'Backspace') && lb && !lb.hidden) closeExample();
-      else if ((k === '[' || k === ']') && sel && el.panel) setTab(TABS[(TABS.indexOf(tab) + (k === ']' ? 1 : -1) + TABS.length) % TABS.length]);
+      if (lb && !lb.hidden) { // the example shown full size holds every key: Esc closes it, Tab keeps to it, Enter and Space press its buttons
+        if (k === 'Escape' || k === 'Backspace') closeExample();
+        else if (k === 'Tab') { const f = [...lb.querySelectorAll('a[href], button')], i = f.indexOf(lb.getRootNode().activeElement); f[(i + (e.shiftKey ? -1 : 1) + f.length) % f.length].focus(); }
+        else if (k === 'Enter' || k === ' ') return false;
+        return true;
+      }
+      if ((k === '[' || k === ']') && sel && el.panel && !el.panel.hidden) setTab(TABS[(TABS.indexOf(tab) + (k === ']' ? 1 : -1) + TABS.length) % TABS.length]);
       else if ((k === 'o' || k === 'O') && el.tree) setTree(!o.frame.classList.contains('tree-open'));
       else if ((k === '>' || k === '<') && sel && el.panel) lightReach(k === '<');
       else if ((k === 'p' || k === 'P') && picked.length > 1 && el.panel) lightPaths();