umlimator 0.12.1 → 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,8 +203,141 @@ 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 */
+  :where(.outline, .m-legend, .hint, .panel, .lightbox, .um-navbtn), :where(.outline, .m-legend, .hint, .panel, .lightbox, .um-navbtn) * { box-sizing: border-box; }
+  :where(.outline, .m-legend, .panel, .lightbox) button:focus-visible, .um-navbtn:focus-visible { outline: 2px solid var(--um-cyan); outline-offset: 2px; }
+  :where(.panel, .lightbox) a { color: var(--um-cyan); }
+  :where(.panel) code { font-family: var(--um-mono); font-size: .86em; overflow-wrap: anywhere; background: var(--um-panel-2); border: 1px solid var(--um-border); padding: .05em .35em; border-radius: 5px; }
+  .ibtn { width: 32px; height: 32px; flex: none; border-radius: 8px; border: 1px solid var(--um-border-2); background: var(--um-panel); color: var(--um-text); cursor: pointer; font: 600 14px var(--um-sans); }
+  .ibtn:hover, .ibtn[aria-expanded="true"] { border-color: var(--um-accent); color: var(--um-accent); }
+  .ibtn[aria-pressed="true"] { border-color: var(--um-accent); color: var(--um-accent); }
+  .ibtn.sm { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
+  /* views: Finder-style column browser */
+  .outline { overflow: hidden; border-right: 1px solid var(--um-border); background: var(--um-bg); visibility: hidden; min-width: 0; }
+  .tree-open .outline { visibility: visible; }
+  .miller { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: thin; }
+  .mcol { flex: 0 0 224px; min-width: 224px; border-right: 1px solid var(--um-border); padding: 8px 6px; overflow-y: auto; }
+  .mcol:last-child { border-right: 0; flex-grow: 1; }
+  .mch { font: 700 10px var(--um-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--um-muted); padding: 2px 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .mit { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 7px 8px; border-radius: 6px; border: 0; background: none; color: var(--um-text); font: 500 12.5px/1.4 var(--um-sans); cursor: pointer; text-align: left; }
+  .mit span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
+  .mit em { font-style: normal; color: var(--um-muted); font-size: 11px; white-space: nowrap; flex: none; }
+  .mit:hover { background: var(--um-panel-2); }
+  .mit.path { background: var(--um-panel-2); font-weight: 650; }
+  .mit.on { background: var(--um-accent-f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--um-accent) 40%, transparent); font-weight: 650; }
+  /* legend: a box in the corner that folds away */
+  .m-legend { position: absolute; left: 16px; bottom: 40px; z-index: 3; background: var(--um-panel); border: 1px solid var(--um-border-2); border-radius: 12px; box-shadow: var(--um-shadow); padding: 8px 12px; font: 11.5px var(--um-sans); display: grid; grid-template-columns: repeat(2, auto); gap: 3px 16px; max-width: calc(100% - 290px); }
+  .m-legend .t { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 10px var(--um-sans); letter-spacing: .1em; color: var(--um-muted); }
+  .m-legend .t button { border: 0; background: none; color: var(--um-muted); cursor: pointer; font: 700 13px var(--um-sans); padding: 0 2px; line-height: 1; }
+  .m-legend.folded .lgi { display: none; }
+  .lgi { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
+  .lgi i { width: 14px; height: 10px; border: 1.5px solid var(--um-muted); border-radius: 3px; flex: none; }
+  .lgi i.p { border-radius: 999px; } .lgi i.d { border-style: dashed; } .lgi i.h { border-radius: 0; clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 50%, calc(100% - 3px) 100%, 3px 100%, 0 50%); border: 0; }
+  .lgi i.s { box-shadow: 2px 2px 0 -.5px var(--um-panel), 2px 2px 0 .5px var(--um-muted); background: var(--um-panel); }
+  .lgi i.num { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--um-text); color: var(--um-bg); font: 700 8px/14px var(--um-sans); text-align: center; font-style: normal; }
+  .lgi i.tag { width: 20px; border-radius: 999px; border-width: 1px; }
+  .lgi b { font-weight: 650; } .lgi span { color: var(--um-muted); }
+  /* help: one quiet line at the bottom */
+  .hint { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 16px; justify-content: center; align-items: center; height: 28px; padding: 0 12px; font: 11.5px var(--um-sans); color: var(--um-muted); background: color-mix(in srgb, var(--um-bg) 88%, transparent); border-top: 1px solid var(--um-border); white-space: nowrap; overflow: hidden; }
+  .hint b { color: var(--um-text); font-weight: 600; }
+  .hint.msg { color: var(--um-accent); font-weight: 600; }
+  /* details: a short strip under the map — compact header, then When to use · What it is · How it works · Example · Behind the scenes tabs */
+  .panel { flex: none; height: 234px; max-height: 44%; overflow: auto; border-top: 1px solid var(--um-border-2); background: var(--um-panel); z-index: 5; animation: rise .2s ease; }
+  .panel[hidden] { display: none; }
+  @keyframes rise { from { transform: translateY(12px); opacity: 0; } }
+  .ph { display: flex; align-items: center; gap: 12px; padding: 12px 18px 6px; }
+  .ph .big { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--um-accent-fg); flex: none; }
+  .ph .pt { min-width: 0; flex: 1; }
+  .ph h3 { margin: 0; font: 650 17px var(--um-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ph small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--um-muted); font-size: 12.5px; }
+  .ph .acts { display: flex; gap: 8px; align-items: center; flex: none; }
+  .vis { font: 700 9px var(--um-sans); letter-spacing: .1em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--um-border-2); color: var(--um-muted); }
+  .vis.pub { background: var(--um-k-public-f); border-color: var(--um-k-public); color: var(--um-k-public); } .vis.ext { border-style: dashed; border-color: var(--um-k-ext); color: var(--um-k-ext); }
+  .author { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 1px; border-radius: 999px; border: 1px solid var(--um-border-2); color: var(--um-text); text-decoration: none; background: var(--um-panel); font-size: 12px; }
+  .author:hover { border-color: var(--um-accent); }
+  .author img, .author i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 9px var(--um-sans); font-style: normal; background: var(--um-panel-2); }
+  .author b { color: var(--um-muted); font-weight: 500; }
+  .origin { color: var(--um-muted); font-size: 12px; }
+  .obtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--um-panel)); color: var(--um-text); font: 600 13px var(--um-sans); cursor: pointer; white-space: nowrap; }
+  .obtn span { font-weight: 500; color: var(--um-muted); font-size: 11.5px; }
+  .obtn:hover { background: color-mix(in srgb, var(--c) 20%, var(--um-panel)); }
+  .ptabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--um-border); }
+  .ptablist { display: flex; align-items: center; gap: 2px; min-width: 0; } /* only tabs in it: ‹ › stand beside it */
+  .ptab { border: 0; border-bottom: 2px solid transparent; background: none; color: var(--um-muted); font: 500 13px var(--um-sans); padding: 7px 10px; cursor: pointer; white-space: nowrap; }
+  .ptab em { font-style: normal; font-size: 11px; color: var(--um-muted); margin-left: 4px; }
+  .ptab:hover { color: var(--um-text); }
+  .ptab[aria-selected="true"] { color: var(--um-text); font-weight: 650; border-bottom-color: var(--um-accent); }
+  .pnav { margin-left: auto; display: flex; gap: 4px; }
+  .pbody { padding: 10px 18px 14px; }
+  .pbody h4 { margin: 0 0 4px; font: 700 10px var(--um-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--um-muted); display: flex; gap: 6px; }
+  .pbody h4 span { color: var(--um-muted); }
+  .clamp { font-size: 14px; line-height: 1.55; max-width: 980px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .clamp.open { display: block; -webkit-line-clamp: unset; }
+  .clamp p { margin: 0 0 6px; } .clamp ul { margin: 0 0 6px; padding-left: 18px; }
+  .detail-bullets { margin: 0; padding-left: 18px; max-width: 1100px; font-size: 13px; line-height: 1.65; }
+  .detail-bullets li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
+  .detail-bullets li::before { content: '•'; margin-right: 8px; color: var(--um-accent); }
+  .links ul { margin: 0; padding: 0; list-style: none; }
+  .links li { margin: 0; }
+  .morebtn { border: 0; background: none; color: var(--um-accent); font: 600 12px var(--um-sans); padding: 2px 0 0; cursor: pointer; }
+  .pnone { color: var(--um-muted); font-size: 13px; }
+  .pverbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+  .pverb { font: 600 12px var(--um-sans); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); padding: 1px 9px; border-radius: 999px; }
+  button.pverb { cursor: pointer; } button.pverb:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
+  .links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 22px; }
+  .src { display: flex; align-items: center; gap: 6px; min-width: 0; } .src a, .src span { font: 12px var(--um-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
+  .rel { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0 8px; align-items: center; text-align: left; background: none; border: 0; padding: 4px 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 6px; cursor: pointer; color: var(--um-text); font: 13px var(--um-sans); }
+  .rel:hover { background: var(--um-panel-2); }
+  .rel i { width: 8px; height: 8px; border-radius: 50%; }
+  .rel-l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .rel-e { font-size: 11.5px; color: var(--um-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
+  .rel-none { color: var(--um-muted); font-size: 12.5px; padding: 2px 0; }
+  /* one yellow highlighter phrase per section (==text== in the model) */
+  .pbody mark { background: var(--um-mark); color: inherit; padding: 0 3px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
+  /* Example tab: a data-driven gallery (node.examples = [{title, caption, thumb, full, href}]) */
+  .exs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; max-width: 1100px; }
+  .ex { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+  .ex-thumb { display: block; padding: 0; border: 1px solid var(--um-border-2); border-radius: 8px; background: var(--um-panel-2); overflow: hidden; cursor: zoom-in; aspect-ratio: 16 / 10; }
+  .ex-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
+  .ex-thumb:hover, .ex-thumb:focus-visible { border-color: var(--um-accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--um-accent) 30%, transparent); }
+  .ex b { font: 650 13px var(--um-sans); }
+  .ex small { color: var(--um-muted); font-size: 12px; line-height: 1.4; }
+  .ex a { color: var(--um-accent); font: 600 12px var(--um-sans); text-decoration: none; }
+  .ex a:hover { text-decoration: underline; }
+  .lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: var(--um-scrim); }
+  .lightbox[hidden] { display: none; }
+  .lightbox figure { margin: 0; max-width: min(1280px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--um-panel); border-radius: 12px; padding: 12px; box-shadow: var(--um-shadow); }
+  .lightbox img { max-width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 6px; border: 1px solid var(--um-border); background: var(--um-logo-tile); }
+  .lightbox figcaption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 600 14px var(--um-sans); }
+  .lightbox figcaption span { flex: 1; min-width: 0; }
+  .lightbox figcaption a { color: var(--um-accent); text-decoration: none; font-size: 13px; }
+  .pviews { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+  .pview { font: 500 12px var(--um-sans); color: var(--um-muted); background: var(--um-panel-2); border: 1px solid var(--um-border); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
+  .pview:hover { color: var(--um-text); border-color: var(--um-accent); }
+  @media (max-width: 820px) {
+    .ph { padding-top: 6px; } .ph .obtn span { display: none; }
+    .links { grid-template-columns: 1fr; }
+    .ptabs, .ptablist { flex-wrap: wrap; } .pnav { display: none; } .ptab { padding: 7px 8px; }
+    .detail-bullets li { white-space: normal; overflow: visible; }
+    .exs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+    .m-legend, .hint { display: none; }
+  }
+  /* render()'s pieces (#99), laid out as the page lays them out: the views list left of the map (☰ or O), the details under
+     it, the legend and the hint line over it; while a story is told, the legend gives way to its caption bar */
+  .um-frame { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / 0 minmax(0, 1fr); transition: grid-template-columns .22s ease; }
+  .um-frame.tree-open { grid-template-columns: min(var(--browser-width, 224px), 38%) minmax(0, 1fr); }
+  .um-main { grid-area: 1 / 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  .um-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; }
+  .um-frame > .outline { grid-area: 1 / 1; }
+  .um-navbtn { grid-area: 1 / 2; align-self: start; justify-self: start; margin: 14px 16px; z-index: 4; }
+  .um-stage:has(.um-story) > .m-legend { display: none; }
+  /* a lens's legend (#94): each owner's tone, over the controls */
+  .um-lens { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; box-sizing: border-box; max-width: 300px; padding: 6px 11px; border-radius: 10px; background: var(--um-panel); border: 1px solid var(--um-border-2); box-shadow: var(--um-shadow); color: var(--um-text); font: 12px/1.5 var(--um-sans); }
+  .um-lens b { font: 700 10px var(--um-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--um-muted); } .um-lens span { white-space: nowrap; }
+  .um-lens i { display: inline-block; width: 8px; height: 8px; border: 2.5px solid; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
 ` +/* each tone's tint (--um-<tone>-f), mixed at the map from the tone and panel in effect there: mixed on :root (as the theme
      file does, for page chrome) a tint keeps the tone it was mixed from, whatever an ancestor of the map sets later */
   `:host { ${Object.entries({ accent: 12, cyan: 9, green: 9, violet: 9, amber: 10, rose: 8, orange: 9, slate: 8, fuchsia: 8, 'k-public': 8, 'k-lane': 8,
@@ -286,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++) {
@@ -307,33 +452,39 @@ let hush = null; // a layout tried and maybe dropped (unfolding, #71) keeps its
    its neighbours in the next or previous column lie, its place now breaking ties), and the best order found is kept only
    when it crosses less than the order given. A line that skips columns has a point in each column it passes (Sugiyama's
    dummy nodes), so it orders the cards it runs between too. cols: columns of ids in reading order, changed in place;
-   links: [a, b] with b in a later column. */
-function untangle(cols, links) {
+   links: [a, b] with b in a later column.
+   A box is one item of its column, h(id) rows tall, and a line meets it at the row of its card inside (#86): [a, b, oa, ob]
+   leaves a at row oa inside it and reaches b at row ob, as rowsFor's links do (the middle when not given). Each line into a
+   box has its own entry, so two that cross on the way in to its cards count as crossing; they all met it at one point.
+   fixed: items at a set row in columns of their own, which stay as they are (a box's far ends, in blockPos). */
+function untangle(cols, links, h = () => 1, fixed = {}) {
   const colOf = {}; cols.forEach((c, k) => c.forEach(id => { colOf[id] = k; }));
-  const segs = [], extra = new Set(), want = {};
-  links.forEach(([a, b], n) => {
+  const segs = [], extra = new Set(), want = {}, hh = id => extra.has(id) ? 1 : h(id), mid = (id, o) => o ?? (hh(id) - 1) / 2;
+  const tops = () => { const at = {}; cols.forEach(c => { let r = 0; c.forEach(id => { at[id] = fixed[id] ?? r; r += hh(id); }); }); return at; }; // each item's top row
+  const at0 = tops();
+  links.forEach(([a, b, oa, ob], n) => {
     const ka = colOf[a], kb = colOf[b]; if (ka == null || kb == null || kb <= ka) return;
-    let prev = a; const ra = cols[ka].indexOf(a), rb = cols[kb].indexOf(b);
+    let prev = a, po = mid(a, oa); const ra = at0[a] + po, rb = at0[b] + mid(b, ob);
     for (let k = ka + 1; k < kb; k++) { // a point first goes where the straight line between its ends would be
       const p = '\u0001' + n + '.' + k; extra.add(p); colOf[p] = k; want[p] = ra + (rb - ra) * (k - ka) / (kb - ka);
-      segs.push([prev, p]); prev = p; }
-    segs.push([prev, b]);
+      segs.push([prev, p, po, 0]); prev = p; po = 0; }
+    segs.push([prev, b, po, mid(b, ob)]);
   });
   if (extra.size) cols.forEach((c, k) => { const ps = [...extra].filter(p => colOf[p] === k);
-    if (ps.length) cols[k] = [...c.map((id, i) => [id, i, 0]), ...ps.map(p => [p, want[p], 1])].sort((x, y) => x[1] - y[1] || x[2] - y[2]).map(x => x[0]); });
-  const ins = {}, outs = {}; segs.forEach(([a, b]) => { (outs[a] ||= []).push(b); (ins[b] ||= []).push(a); });
-  const crossings = () => { const at = {}; let n = 0; cols.forEach(c => c.forEach((id, i) => { at[id] = i; }));
-    for (let i = 0; i < segs.length; i++) for (let j = i + 1; j < segs.length; j++) { const [a, b] = segs[i], [c, d] = segs[j];
-      if (colOf[a] === colOf[c] && (at[a] - at[c]) * (at[b] - at[d]) < 0) n++; }
+    if (ps.length) cols[k] = [...c.map(id => [id, at0[id], 0]), ...ps.map(p => [p, want[p], 1])].sort((x, y) => x[1] - y[1] || x[2] - y[2]).map(x => x[0]); });
+  const ins = {}, outs = {}; segs.forEach(([a, b, oa, ob]) => { (outs[a] ||= []).push([b, ob, oa]); (ins[b] ||= []).push([a, oa, ob]); });
+  const crossings = () => { const at = tops(); let n = 0;
+    for (let i = 0; i < segs.length; i++) for (let j = i + 1; j < segs.length; j++) { const [a, b, oa, ob] = segs[i], [c, d, oc, od] = segs[j];
+      if (colOf[a] === colOf[c] && (at[a] + oa - at[c] - oc) * (at[b] + ob - at[d] - od) < 0) n++; }
     return n; };
   let best = segs.length > 1 ? crossings() : 0, keep = cols.map(c => c.slice()); // the order given, unless one crosses less
   for (let it = 0; it < 8 && best; it++) {
-    const down = it % 2 === 0, seq = cols.map((_, k) => k).filter(k => down ? k > 0 : k < cols.length - 1);
+    const down = it % 2 === 0, seq = cols.map((_, k) => k).filter(k => (down ? k > 0 : k < cols.length - 1) && !cols[k].every(id => id in fixed));
     if (!down) seq.reverse();
-    for (const k of seq) { const at = Object.fromEntries(cols[down ? k - 1 : k + 1].map((id, i) => [id, i]));
-      const key = (id, i) => { const nb = ((down ? ins : outs)[id] || []).filter(x => at[x] != null).map(x => at[x]);
-        return nb.length ? nb.reduce((x, y) => x + y, 0) / nb.length : i; };
-      cols[k] = cols[k].map((id, i) => [id, key(id, i), i]).sort((p, q) => p[1] - q[1] || p[2] - q[2]).map(x => x[0]); }
+    for (const k of seq) { const at = tops(), side = down ? k - 1 : k + 1; // where each item would be for its lines to run level
+      const key = id => { const nb = ((down ? ins : outs)[id] || []).filter(([x]) => colOf[x] === side).map(([x, ox, o]) => at[x] + ox - o);
+        return nb.length ? nb.reduce((x, y) => x + y, 0) / nb.length : at[id]; };
+      cols[k] = cols[k].map((id, i) => [id, key(id), i]).sort((p, q) => p[1] - q[1] || p[2] - q[2]).map(x => x[0]); }
     const n = crossings(); if (n < best) { best = n; keep = cols.map(c => c.slice()); }
   }
   keep.forEach((c, k) => { cols[k] = c.filter(id => !extra.has(id)); });
@@ -350,9 +501,9 @@ function pullSources(ids, links, rank) {
    to, then again from the left, as near as the order allows with its height between it and the next (least squares: pool
    adjacent violators); on half rows from 0. A line between cards on one row runs straight, past fewer cards. h: an item's
    height in rows (a box in a view with boxes); a link [a, b, oa, ob] leaves a at row oa inside it and reaches b at row
-   ob (a box's card), else at its middle. */
-function rowsFor(cols, links, h = () => 1) {
-  const row = {}, colOf = {}; cols.forEach((c, k) => { let r = 0; c.forEach(id => { row[id] = r; r += h(id); colOf[id] = k; }); });
+   ob (a box's card), else at its middle. fixed: items at a set row, in columns of their own that stay (as untangle's). */
+function rowsFor(cols, links, h = () => 1, fixed = {}) {
+  const row = {}, colOf = {}; cols.forEach((c, k) => { let r = 0; c.forEach(id => { row[id] = fixed[id] ?? r; r += h(id); colOf[id] = k; }); });
   const ins = {}, outs = {}, at = (id, o) => o ?? (h(id) - 1) / 2; // where a link meets an item, in rows from its top
   links.forEach(([a, b, oa, ob]) => { if (colOf[a] == null || colOf[b] == null || colOf[b] <= colOf[a]) return;
     (outs[a] ||= []).push([b, at(b, ob), at(a, oa)]); (ins[b] ||= []).push([a, at(a, oa), at(b, ob)]); });
@@ -362,11 +513,11 @@ function rowsFor(cols, links, h = () => 1) {
       while (blocks.length > 1 && blocks.at(-2).sum / blocks.at(-2).n > blocks.at(-1).sum / blocks.at(-1).n) { const b = blocks.pop(), a = blocks.at(-1); a.ids.push(...b.ids); a.sum += b.sum; a.n += b.n; } });
     off = 0; blocks.forEach(b => b.ids.forEach(id => { row[id] = b.sum / b.n + off; off += h(id); })); };
   for (const [from, to, step] of [[1, cols.length, 1], [cols.length - 2, -1, -1], [1, cols.length, 1]])
-    for (let k = from; k !== to; k += step) { const want = {};
+    for (let k = from; k !== to; k += step) { if (cols[k].every(id => id in fixed)) continue; const want = {};
       cols[k].forEach(id => { const nb = (step > 0 ? ins : outs)[id] || []; want[id] = nb.length ? median(nb.map(([x, ox, o]) => row[x] + ox - o)) : row[id]; });
       fit(cols[k], want); }
-  const low = Math.min(...Object.values(row));
-  cols.forEach(c => c.forEach((id, i) => { row[id] = Math.round((row[id] - low) * 2) / 2; if (i) row[id] = Math.max(row[id], row[c[i - 1]] + h(c[i - 1])); }));
+  const low = Math.min(...Object.keys(row).filter(id => !(id in fixed)).map(id => row[id]));
+  cols.forEach(c => !c.every(id => id in fixed) && c.forEach((id, i) => { row[id] = Math.round((row[id] - low) * 2) / 2; if (i) row[id] = Math.max(row[id], row[c[i - 1]] + h(c[i - 1])); }));
   return row;
 }
 
@@ -492,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;
@@ -524,9 +688,9 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
       return c ? [...(c.nodeIds || []), ...(dg.containers || []).filter(k => k.parent === b).flatMap(k => inBox(k.id, seen))] : []; };
     const near = (b, other) => { const cs = inBox(b).map(i => colOf[i]).filter(c => c != null); if (other == null || !cs.length) return null;
       const lo = Math.min(...cs), hi = Math.max(...cs); return other < lo ? lo : other > hi ? hi : null; };
-    // an unfolded numbered view's lane is a box in its box (#82): a line to a card in one, or to that box, crosses two borders.
-    // ponytail: lanes only; an inner view's own nested boxes have the same 12 px less, but room for them moves views drawn today
-    const inLane = id => (dg.containers || []).some(f => f.lane && (f.parent === id || (f.nodeIds || []).includes(id)));
+    // a box in a box (an unfolded numbered view's lane, #82, or any nested box): a line to a card in one, or to the box that
+    // holds it, crosses two borders
+    const inLane = id => (dg.containers || []).some(f => f.parent && (f.parent === id || (f.nodeIds || []).includes(id)));
     (dg.edges || []).forEach(e => { const p = colOf[e.from] ?? near(e.from, colOf[e.to]), q = colOf[e.to] ?? near(e.to, colOf[e.from]); if (p == null || q == null || !e.label || Math.abs(p - q) !== 1) return;
       const c = Math.min(p, q), w = pillW(e.label, e.sublabel) + (e.step != null ? stepW(e.step) + 4 : 0), box = boxOf(e.from) !== boxOf(e.to) || !(e.from in colOf) || !(e.to in colOf) ? 48 + ([e.from, e.to].some(inLane) ? 12 : 0) : 0;
       gapAfter[c] = Math.max(gapAfter[c] || 0, w + 54 + box);
@@ -696,7 +860,11 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
     // in one direction, cards in one column on the left of a bottom side came in the wrong order, and their lines crossed.
     const mx = n.x + n.w / 2, my = n.y + n.h / 2, turn = it => { let a = Math.atan2(it.other.y + it.other.h / 2 - my, it.other.x + it.other.w / 2 - mx) - (side === 'T' ? -Math.PI / 2 : Math.PI / 2);
       while (a <= -Math.PI) a += 2 * Math.PI; while (a > Math.PI) a -= 2 * Math.PI; return side === 'T' ? a : -a; };
-    list.sort((a, b) => vertical ? (a.other.y - b.other.y) || ((side === 'R' ? -1 : 1) * (a.other.x - b.other.x)) : turn(a) - turn(b));
+    // Far ends level with each other go by the angle they come in at, as on a top or bottom side: of two above the card, the
+    // nearer takes the higher port, since the farther one's line passes under it (b10/overview's Reports 7 took the port
+    // under Billing 1's, whose line ran below Reports, and had no way in but round the map)
+    const lean = it => Math.atan2(it.other.y + it.other.h / 2 - my, Math.abs(it.other.x + it.other.w / 2 - mx));
+    list.sort((a, b) => vertical ? (a.other.y - b.other.y) || (lean(a) - lean(b)) || ((side === 'R' ? -1 : 1) * (a.other.x - b.other.x)) : turn(a) - turn(b));
     const sp = vertical ? null : sideSpan(n, side);
     const len = vertical ? n.h : sp ? sp[1] - sp[0] : n.w, mid = sp ? (sp[0] + sp[1]) / 2 : n.x + n.w / 2;
     const gap = Math.min(vertical ? 16 : 26, (len * 0.84) / Math.max(1, list.length)), cy = n.y + n.h / 2;
@@ -731,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
@@ -791,7 +959,19 @@ 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
+    const nearY = families.length && Y.map(y => families.filter(f => Math.abs(y - f.y) < 8 || Math.abs(y - f.y - f.h) < 8)), nearX = families.length && X.map(x => families.filter(f => Math.abs(x - f.x) < 8 || Math.abs(x - f.x - f.w) < 8));
     const ix = v => X.indexOf(v), iy = v => Y.indexOf(v);
     const s0 = ix(st[0]) * ny + iy(st[1]), t0 = ix(en[0]) * ny + iy(en[1]);
     if (!ok[s0] || !ok[t0]) return null;
@@ -835,6 +1015,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
         const c2 = i2 * ny + j2; if (!ok[c2] || (nd < 2 ? blockH[(nd === 0 ? i : i2) * ny + j] : blockV[i * ny + (nd === 2 ? j : j2)])) continue;
         let w = Math.abs(X[i2] - xi) + Math.abs(Y[j2] - yj) + (nd === dir ? 0 : BEND) + (crossAt[c2] ? CROSS : 0);
         if (any && (nd < 2 ? alongH[(nd === 0 ? i : i2) * ny + j] : alongV[i * ny + (nd === 2 ? j : j2)])) w += 2 * CROSS + 3 * (Math.abs(X[i2] - xi) + Math.abs(Y[j2] - yj));
+        if (nearY && (nd < 2 ? nearY[j].some(f => Math.max(xi, X[i2]) > f.x && Math.min(xi, X[i2]) < f.x + f.w) : nearX[i].some(f => Math.max(yj, Y[j2]) > f.y && Math.min(yj, Y[j2]) < f.y + f.h))) w += 10 * (Math.abs(X[i2] - xi) + Math.abs(Y[j2] - yj));
         if (c2 === t0 && nd !== dEnd) w += BEND;
         const k2 = c2 * 4 + nd; if (d + w < dist[k2]) { dist[k2] = d + w; prev[k2] = k; hpush(k2, d + w + (hx[i2] + hy[j2])); }
       }
@@ -868,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 };
@@ -943,8 +1132,10 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
       return { room: need, ms: { probe: performance.now() - t0 } };
     }
   }
-  // port repair: two routes that cross next to a shared node side swap ports, keep it if issues drop
-  const issueCount = () => routeAudit({ edges }, '').length;
+  // port repair: two routes that cross next to a shared node side swap ports, keep it if issues drop. On a map a detour
+  // counts, as the layout check counts it: a swap that took u21's Web shop's two lines round the map to save one crossing
+  // was kept (unfolding Catalog)
+  const issueCount = only => routeAudit({ edges }, '', only).length + (map ? (only ? [...only] : edges).filter(e => detour(e.pts)).length : 0);
   const endAt = (e, n, side) => (e.s === n && e.fs === side) ? 'p1' : (e.t === n && e.ts === side) ? 'p2' : null;
   let issues = issueCount();
   // a swap re-routes only the two swapped edges (ripped up, then routed after every other route), not the whole
@@ -956,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++) {
@@ -966,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']) {
@@ -974,11 +1166,17 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
         if (budget <= 0) break outer3;
         const pa = a[ka], pb = b[kb]; a[ka] = pb; b[kb] = pa; restub(a); restub(b);
         const snap = [a, b].map(e => [e, e.pts, e.lbl, e.how]), snapR = [routed.slice(), reserved.slice(), placed.slice()];
-        const ab = new Set([a, b]), was = routeAudit({ edges }, '', ab).length; // issues away from a and b cannot change
+        const ab = new Set([a, b]), was = issueCount(ab); // issues away from a and b cannot change
         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 + routeAudit({ edges }, '', ab).length : 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; });
@@ -988,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); });
@@ -1076,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';
@@ -1176,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})` : ''}` : '';
@@ -1247,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;
@@ -1263,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);
     });
@@ -1306,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) {
@@ -1337,6 +1552,14 @@ class Camera {
 // an issue's message, and what it is about (the cards, lines and boxes it names) when the caller keeps a list of that: check()
 // turns those into Refs; the page's check reads only the messages
 const teller = (issues, refs) => (message, ...about) => { issues.push(message); if (refs) refs.push(about); };
+// 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);
@@ -1372,10 +1595,8 @@ function routeAudit(geo, where, only, refs) { // only: a set of edges; counts ju
       // clearance: a route keeps 12+ px from every node it does not connect
       geo.nodes.forEach(n => { if (n.id === e.from || n.id === e.to) return;
         if (segHit({ x: n.x - ex + .5, y: n.y - ex + .5, w: n.w + 2 * ex - 1, h: n.h + 2 * ex - 1 }, i)) say(`${where}: edge ${name(e)} passes within ${ex}px of node "${n.label}"`, e, n); });
-      // no detours: a route stays under 2.5x the straight distance between its ends
-      const len = e.pts.slice(1).reduce((a, p, k) => a + Math.abs(p[0] - e.pts[k][0]) + Math.abs(p[1] - e.pts[k][1]), 0);
-      const d = Math.hypot(e.pts[e.pts.length - 1][0] - e.pts[0][0], e.pts[e.pts.length - 1][1] - e.pts[0][1]);
-      if (len > 2.5 * Math.max(d, 100)) say(`${where}: edge ${name(e)} takes a detour (${Math.round(len)}px for ${Math.round(d)}px)`, e);
+      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);
     });
@@ -1662,7 +1883,11 @@ function mapContext(model, opts = {}) {
   /* plain views: longest-path columns from the roots, state at the bottom of its column */
   /* views with containers: each container is a block in columns of its own, its cards in call order inside it; blocks (and
      cards in no container) run left to right by the lines between them, and those with no line between them stack in the
-     same columns. A nested container is a block inside its parent's. */
+     same columns. A nested container is a block inside its parent's.
+     A box is laid out three times (#86): by the lines inside it, as before; then each of its cards level with the cards its
+     lines come from and go to outside it too, where the pass before put them; then ordered by those lines as well. Its far
+     ends are items at their rows, in a column before its first (a line from the left) or after its last. A box's cards were
+     placed by its own lines alone, so a box fed from outside, and the lines that pass it, ran into the cards beside it. */
   function blockPos(vid) {
     const v = V[vid], ids = (v.nodeIds || []).filter(i => N[i]), lp = loopsOf(v), boxes = (v.containers || []).filter(c => c && c.id);
     const fwd = lp.edges.filter((e, k) => !lp.back.has(k) && e.from !== e.to), byBox = Object.fromEntries(boxes.map(b => [b.id, b]));
@@ -1673,12 +1898,13 @@ function mapContext(model, opts = {}) {
     const first = x => { const k = lp.edges.findIndex(e => holds(x, e.from) || holds(x, e.to)); return k < 0 ? Infinity : k; };
     const sink = x => ids.includes(x) && isState(x) && !fwd.some(e => e.from === x); // state that leads nowhere goes last
     const lined = x => lp.edges.some(e => e.from !== e.to && (holds(x, e.from) || holds(x, e.to)));
-    const block = g => { // a group's cards at [col, row] from its top left, and its size in slots
+    let was = {}, now = {}; // each box as the pass before laid it out, and as this one does
+    const block = (g, P, order) => { // a group's cards at [col, row] from its top left, and its size in slots; P: where the pass before put each card
       const all = [...ids.filter(i => home[i] === g), ...boxes.filter(b => up(b.id) === g).map(b => b.id)];
       // cards with no line go in rows of their own under the group's columns, as under a plain view (#46): at the bottom of
       // their box, or under the view; they stacked in the first column with the sources
       const loose = all.some(lined) ? all.filter(x => ids.includes(x) && !lined(x)) : [], items = all.filter(x => !loose.includes(x)), size = {}, out = {};
-      items.forEach(x => { size[x] = ids.includes(x) ? { w: 1, h: 1, pos: { [x]: [0, 0] } } : block(x); out[x] = []; });
+      items.forEach(x => { size[x] = ids.includes(x) ? { w: 1, h: 1, pos: { [x]: [0, 0] } } : block(x, P, order); out[x] = []; });
       fwd.forEach(e => { const a = itemIn(e.from, g), b = itemIn(e.to, g); if (a !== undefined && b !== undefined && a !== b && !out[a].includes(b)) out[a].push(b); });
       const st = {}, dag = [], into = new Set(Object.values(out).flat()); // lines that close a loop do not order the blocks
       const dfs = u => { st[u] = 1; out[u].forEach(w => { if (st[w] === 1) return; dag.push([u, w]); if (!st[w]) dfs(w); }); st[u] = 2; };
@@ -1688,10 +1914,22 @@ function mapContext(model, opts = {}) {
       const cols = [], pos = {}; let c0 = 0, h = 0;
       items.forEach(x => (cols[rank[x]] ||= []).push(x));
       const main = cols.map(l => (l || []).filter(x => !sink(x)).sort((a, b) => first(a) - first(b)));
-      untangle(main, dag); // in call order, unless another order crosses less (#53)
       const inside = (x, id) => ids.includes(x) ? 0 : (size[x].pos[id] || [0, null])[1]; // the row of a box's card that a line meets
-      const row = rowsFor(main, fwd.filter(level).map(e => { const a = itemIn(e.from, g), b = itemIn(e.to, g); return a !== undefined && b !== undefined && a !== b ? [a, b, inside(a, e.from), inside(b, e.to)] : null; }).filter(Boolean),
-        x => size[x].h); // each block level with the cards its lines come from and go to
+      const dagged = new Set(dag.map(([a, b]) => a + '\u0000' + b)), lines = fwd.map(e => { const a = itemIn(e.from, g), b = itemIn(e.to, g);
+        return a !== undefined && b !== undefined && a !== b ? { e, link: [a, b, inside(a, e.from), inside(b, e.to)] } : null; }).filter(Boolean);
+      // the box's lines to cards outside it (#86): each far end at its row from the box's top, where the pass before put both.
+      // ponytail: three passes, so a far end that moves in the last one is followed where it was, and a far end in the card's
+      // own column, or a line to a box, places nothing; passes until nothing moves, if a map needs them
+      const far = [], fixed = {}, top = P && g != null && was[g] ? Object.keys(was[g].pos).map(c => P[c] && P[c][1] - was[g].pos[c][1]).find(r => r != null) : null;
+      if (top != null) fwd.forEach(e => { const fin = holds(g, e.from); if (fin === holds(g, e.to)) return;
+        const [mine, other] = fin ? [e.from, e.to] : [e.to, e.from], x = itemIn(mine, g), p = P[mine], q = P[other]; if (x === undefined || !p || !q || p[0] === q[0]) return;
+        const id = '\u0002' + far.length, left = q[0] < p[0]; fixed[id] = q[1] - top;
+        far.push({ e, id, left, link: left ? [id, x, 0, inside(x, mine)] : [x, id, inside(x, mine), 0] }); });
+      const L = far.filter(f => f.left).map(f => f.id), R = far.filter(f => !f.left).map(f => f.id), M = [...(L.length ? [L] : []), ...main, ...(R.length ? [R] : [])];
+      const hh = x => size[x] ? size[x].h : 1;
+      untangle(M, [...lines.filter(l => dagged.has(l.link[0] + '\u0000' + l.link[1])), ...(order ? far : [])].map(l => l.link), hh, fixed); // in call order, unless another order crosses less (#53)
+      main.splice(0, main.length, ...M.slice(L.length ? 1 : 0, M.length - (R.length ? 1 : 0)));
+      const row = rowsFor(M, [...lines, ...far].filter(l => level(l.e)).map(l => l.link), hh, fixed); // each block level with the cards its lines come from and go to
       main.forEach((l, k) => { cols[k] = [...l, ...(cols[k] || []).filter(sink).sort((a, b) => first(a) - first(b))]; });
       cols.forEach(list => { let r0 = 0, w = 0;
         list.forEach(x => { const sz = size[x]; if (row[x] != null) r0 = Math.max(r0, row[x]);
@@ -1699,9 +1937,11 @@ function mapContext(model, opts = {}) {
         c0 += w; h = Math.max(h, r0); });
       const per = Math.max(2, c0); loose.forEach((x, k) => { pos[x] = [k % per, h + Math.floor(k / per)]; });
       if (loose.length) { c0 = Math.max(c0, Math.min(per, loose.length)); h += Math.ceil(loose.length / per); }
-      return { w: c0, h, pos };
+      return (now[g] = { w: c0, h, pos });
     };
-    return block(null).pos;
+    let P = block(null).pos;
+    for (const order of [false, true]) { was = now; now = {}; P = block(null, P, order).pos; } // levelled by the lines from outside, then ordered by them too
+    return P;
   }
   const autoPos = vid => ((V[vid] || {}).containers || []).length ? blockPos(vid) : bestFlow(vid);
   const level = e => !/^(top|bottom)$/.test(e.fromSide) && !/^(top|bottom)$/.test(e.toSide); // a line into a card's top or bottom asks for no row
@@ -1860,7 +2100,7 @@ function mapContext(model, opts = {}) {
     const t0 = performance.now(); let wall = 4000; // per-view time box, extended while problems remain
     const v = V[vid], ids = (v.nodeIds || []).filter(i => N[i]);
     let pos = JSON.parse(JSON.stringify(autoPos(vid)));
-    const boxed = (v.containers || []).length, homeOf = i => ((v.containers || []).filter(c => (c.nodeIds || []).includes(i)).pop() || {}).id; // blocks stay whole
+    const start = JSON.stringify(pos), boxed = (v.containers || []).length, homeOf = i => ((v.containers || []).filter(c => (c.nodeIds || []).includes(i)).pop() || {}).id; // blocks stay whole
     const lined = new Set(viewEdges(v).filter(e => e.from !== e.to).flatMap(e => [e.from, e.to])), loose = i => lined.size && !lined.has(i);
     let best = scoreGeo(buildGeo(vid, pos, false, true)), evals = 1;
     const hub = subjectOf(v), hubCol = hub && pos[hub] ? pos[hub][0] : null;
@@ -1896,6 +2136,9 @@ function mapContext(model, opts = {}) {
         }
       }
     }
+    // it scores without port repair: render()'s layout stays unless the one it found routes better as the page draws it (#86: for
+    // r15's monorepo it baked in a crossing that render()'s layout has not)
+    if (JSON.stringify(pos) !== start && scoreGeo(buildGeo(vid, JSON.parse(start))) <= scoreGeo(buildGeo(vid, pos))) pos = JSON.parse(start);
     return { pos, score: best, evals };
   }
   // what a view's picture is drawn from: an update keeps the layout of every view whose key did not change
@@ -2041,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 = {}) {
@@ -2066,6 +2309,7 @@ export function validate(model) {
     if (ids.has(n.id)) err(at + '.id', `card id "${n.id}" is used twice`); ids.add(n.id);
     const k = String(n.kind ?? '').toLowerCase();
     if (n.kind != null && !(k in KIND || k in MAPK || k in ALIAS)) warn(at + '.kind', `unknown kind "${n.kind}": drawn as a script card`);
+    if (n.owner != null && typeof n.owner !== 'string') warn(at + '.owner', 'an owner is a name: ignored');
   };
   arr(m.nodes).forEach((n, i) => card(n, `nodes[${i}]`));
   views.forEach((v, i) => arr(v.nodes).forEach((n, j) => card(n, `views[${i}].nodes[${j}]`)));
@@ -2079,6 +2323,7 @@ export function validate(model) {
     if (e.kind != null && !WIRE_KINDS.includes(e.kind)) warn(at + '.kind', `unknown line kind "${e.kind}": drawn as calls`);
     if (e.weight != null && ![1, 2, 3].includes(e.weight)) warn(at + '.weight', `weight ${JSON.stringify(e.weight)} is not 1, 2 or 3: drawn as 1`);
     ['fromSide', 'toSide'].forEach(k => { if (e[k] != null && !SIDES.includes(e[k])) warn(`${at}.${k}`, `"${e[k]}" is not left, right, top or bottom: ignored`); });
+    ['latency', 'cost'].forEach(k => { if (e[k] != null && !(typeof e[k] === 'number' && e[k] >= 0)) warn(`${at}.${k}`, `${k} ${JSON.stringify(e[k])} is not a number of 0 or more: counted as 0`); }); // budgets (#95)
   };
   // a model line may end on any view's box (#28); a view's own line only on that view's boxes
   const anyBox = new Set(views.flatMap(v => arr(v.containers).map(c => c && c.id)));
@@ -2106,13 +2351,16 @@ export function validate(model) {
   // rules (#70): an id, and from, to or noCycles; a selector that names nothing picks nothing, and a misspelt kind picks script cards
   if (m.rules != null && !Array.isArray(m.rules)) err('rules', 'rules is a list');
   const ruleIds = new Set(), allBoxes = new Set(anyBox), each = (x, at, f) => (Array.isArray(x) ? x : [x]).forEach((y, j) => { if (y != null) f(y, Array.isArray(x) ? `${at}[${j}]` : at); });
-  const pick = (s, at) => {
+  const owners = new Set([...arr(m.nodes), ...views.flatMap(v => [...arr(v.nodes), ...Object.values(v.nodeOverrides || {})])].map(n => n && n.owner).filter(o => typeof o === 'string'));
+  const pick = (s, at, lens) => { // lens: a lens's pick (#94), which also takes line kinds at its top
     if (s == null) return;
-    if (typeof s !== 'object' || Array.isArray(s)) return err(at, 'a selector is an object: id, kind, container or not');
-    Object.keys(s).forEach(k => { if (!['id', 'kind', 'container', 'not'].includes(k)) warn(`${at}.${k}`, `unknown key "${k}": ignored, so the selector picks more cards`); });
+    if (typeof s !== 'object' || Array.isArray(s)) return err(at, `a selector is an object: id, kind, container, owner${lens ? ', line' : ''} or not`);
+    Object.keys(s).forEach(k => { if (!['id', 'kind', 'container', 'owner', 'not', ...(lens ? ['line'] : [])].includes(k)) warn(`${at}.${k}`, `unknown key "${k}": ignored, so the selector picks more cards`); });
     each(s.id, at + '.id', (x, p) => { if (!ids.has(x) && !allBoxes.has(x)) warn(p, `"${x}" is neither a card nor a box: it picks nothing`); });
     each(s.kind, at + '.kind', (x, p) => { const k = String(x).toLowerCase(); if (!(k in KIND || k in MAPK || k in ALIAS)) warn(p, `unknown kind "${x}": it picks script cards`); });
     each(s.container, at + '.container', (x, p) => { if (!allBoxes.has(x)) warn(p, `"${x}" is not a box: it picks nothing`); });
+    each(s.owner, at + '.owner', (x, p) => { if (!owners.has(x)) warn(p, `no card's owner is "${x}": it picks nothing`); });
+    if (lens) each(s.line, at + '.line', (x, p) => { if (!WIRE_KINDS.includes(x)) warn(p, `"${x}" is not a line kind (calls, feeds, triggers, state, guard): it picks no line`); });
     pick(s.not, at + '.not');
   };
   arr(m.rules).forEach((r, i) => {
@@ -2123,6 +2371,16 @@ export function validate(model) {
     pick(r.from, at + '.from'); pick(r.to, at + '.to');
     arr(r.views).forEach((v, j) => { if (!vids.has(v)) err(`${at}.views[${j}]`, `"${v}" is not a view`); });
   });
+  // lenses (#94): an id each, and a pick as a rule's selector, which also takes line kinds
+  if (m.lenses != null && !Array.isArray(m.lenses)) err('lenses', 'lenses is a list');
+  const lensIds = new Set();
+  arr(m.lenses).forEach((l, i) => {
+    const at = `lenses[${i}]`;
+    if (!l || typeof l !== 'object') return err(at, 'a lens is an object with an id');
+    if (typeof l.id !== 'string' || !l.id) err(at + '.id', 'a lens needs an id'); else if (lensIds.has(l.id)) err(at + '.id', `lens id "${l.id}" is used twice`); else lensIds.add(l.id);
+    pick(l.pick, at + '.pick', true);
+    if (l.color != null && l.color !== 'owner') warn(at + '.color', `color ${JSON.stringify(l.color)} is not "owner": ignored`);
+  });
   // stories (#69): each step's view, and the cards, lines and tour it names there
   if (m.stories != null && !Array.isArray(m.stories)) err('stories', 'stories is a list of stories');
   const sids = new Set(), lines = new Set([...lineIds, ...views.flatMap(v => arr(v.edges).filter(e => e && e.id != null).map(e => e.id))]);
@@ -2162,21 +2420,28 @@ const boxesNamed = (s, isBox) => !s || typeof s !== 'object' ? []
 const picks = (s, end) => !s || ((s.id == null || [s.id].flat().includes(end.id))
   && (s.kind == null || [s.kind].flat().some(k => end.kind != null && kindOf(k, true) === end.kind))
   && (s.container == null || [s.container].flat().some(c => end.boxes.includes(c)))
+  && (s.owner == null || [s.owner].flat().includes(end.owner))
   && (s.not == null || !picks(s.not, end)));
 const andList = xs => xs.length > 1 ? xs.slice(0, -1).join(', ') + ' and ' + xs[xs.length - 1] : xs.join(''), arrOf = x => (Array.isArray(x) ? x : []);
+// a view's cards and boxes as a selector sees them (rules, lenses): a card's kind as drawn, the boxes it is in (outermost
+// first) and its owner; a box is in itself and its parents, and has no kind or owner
+function endsIn(ctx, v) {
+  const cs = arrOf(v.containers).filter(c => c && c.id), box = {}; cs.forEach(c => { box[c.id] ||= c; });
+  const home = {}; cs.forEach(c => arrOf(c.nodeIds).forEach(id => { home[id] ??= c.id; }));
+  const chain = b => { const c = []; for (const seen = new Set(); b != null && box[b] && !seen.has(b); b = box[b].parent) { seen.add(b); c.unshift(b); } return c; }; // outermost first
+  const end = id => box[id] ? { id, kind: null, boxes: chain(id), label: box[id].label || id }
+    : (n => ({ id, kind: kindOf(n.kind, true), boxes: chain(home[id]), owner: typeof n.owner === 'string' ? n.owner : undefined, label: n.label || id }))(ctx.nodeIn(id, v.id));
+  return { box, end };
+}
 /** Every rule the model breaks, in each view that draws it broken: a line a rule forbids, or a cycle of boxes. */
 export function rules(model) {
   const list = arrOf(model && model.rules).filter(r => r && typeof r === 'object' && (r.from || r.to || r.noCycles));
   if (!list.length) return [];
-  const { views, N, nodeIn, viewEdges } = mapContext(model), out = [];
+  const ctx = mapContext(model), { views, N, viewEdges } = ctx, out = [];
   const anyBox = new Set(views.flatMap(v => arrOf(v.containers).map(c => c && c.id).filter(Boolean)));
   const named = new Map(list.map(r => [r, [r.from, r.to].flatMap(s => boxesNamed(s, id => anyBox.has(id) && !N[id]))]));
   views.forEach(v => {
-    const cs = arrOf(v.containers).filter(c => c && c.id), box = {}; cs.forEach(c => { box[c.id] ||= c; });
-    const order = Object.values(box).map(c => c.id), home = {}; cs.forEach(c => arrOf(c.nodeIds).forEach(id => { home[id] ??= c.id; }));
-    const chain = b => { const c = []; for (const seen = new Set(); b != null && box[b] && !seen.has(b); b = box[b].parent) { seen.add(b); c.unshift(b); } return c; }; // outermost first
-    const end = id => box[id] ? { id, kind: null, boxes: chain(id), label: box[id].label || id }
-      : { id, kind: kindOf(nodeIn(id, v.id).kind, true), boxes: chain(home[id]), label: nodeIn(id, v.id).label || id };
+    const { box, end } = endsIn(ctx, v), order = Object.values(box).map(c => c.id);
     // a target names the drawn line, which may stand for several edges: grouped as prepEdges groups them (parallel edges, and
     // A→B with B→A, unless keepPairs), in its order, so select() finds it
     // ponytail: a copy of prepEdges' grouping; share one helper if that grouping changes
@@ -2343,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
@@ -2361,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]);
@@ -2372,65 +2638,107 @@ 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()];
-  root.innerHTML = `<div class="um-live" role="status" aria-live="polite"></div><div class="stage" tabindex="-1">
+  // the standalone page's pieces a host asks for (#99), in a frame around the canvas: the views list left of the map (after
+  // it in the tab order, so focus given to the element still lands on the map), the details panel under it, the legend and
+  // the hint line over it. With none of them the map is drawn as it always was.
+  const framed = ['nav', 'details', 'legend', 'hints'].some(k => options[k]);
+  root.innerHTML = `<div class="um-live" role="status" aria-live="polite"></div>${framed ? '<div class="um-frame"><div class="um-main"><div class="um-stage">' : ''}<div class="stage" tabindex="-1">
       <div class="mctl">${options.minimap ? '<div class="minimap" title="Overview — click or drag to move"></div>' : ''}${options.controls === false ? '' : `
         <div class="ctl">
           <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>`;
+        </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('', 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 status = t => P.status && P.status(t);
+  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() : { t: 16, r: 16, b: 16, l: 16 })) });
+    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();
-    endTrip(); drawMarks(); // a new picture: a tour or replay on the old one ends; the host's marks go on again (#63)
-    if (P.onMount) P.onMount(inner);
+    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 (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
+  const lg = q('.m-legend'), fitIn = () => { const I = { t: q('.um-navbtn') ? 54 : 16, r: 16, b: tell ? 40 : 16, l: 16 };
+    return lg && !lg.hidden ? [{ ...I, b: 48 + lg.offsetHeight }, { ...I, l: 24 + lg.offsetWidth }] : I; };
 
   /* at fit, the zoom controls and the minimap keep off the cards (#50): when a card would sit under one of them, the fit
      also tries room for them at the bottom and at the right, and keeps whichever leaves the map larger */
@@ -2438,7 +2746,7 @@ export function render(container, model, options = {}) {
   function clearOf(base) {
     if (!cam || !geo) return base;
     const [W, H] = cam.size(), key = JSON.stringify([W, H, base]); if (clear && clear.geo === geo && clear.key === key) return clear.sets;
-    const boxes = [...stage.querySelectorAll('.ctl, .minimap, .um-story')].map(x => x.getBoundingClientRect()).filter(r => r.width && r.height);
+    const boxes = [...stage.querySelectorAll('.ctl, .minimap, .um-story, .um-lens')].map(x => x.getBoundingClientRect()).filter(r => r.width && r.height);
     let sets = base; // none shown, or no layout (a test DOM): as before
     if (boxes.length) {
       const S = stage.getBoundingClientRect(), top = Math.min(...boxes.map(r => r.top)) - S.top - 8, left = Math.min(...boxes.map(r => r.left)) - S.left - 8;
@@ -2450,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();
@@ -2523,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];
@@ -2536,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 */
@@ -2559,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();
-  }
-
-  /* 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 });
+    sub = null; selectNew = false; paint(); emitSel();
+  }
+
+  /* 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() {
@@ -2617,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;
@@ -2634,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]');
@@ -2667,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;
@@ -2740,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;
@@ -2775,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;
@@ -2788,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 };
   });
@@ -2802,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 });
@@ -2832,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;
@@ -2880,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)
@@ -2898,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 '';
@@ -2906,7 +3291,8 @@ export function render(container, model, options = {}) {
       off = document.createElement('div'); off.style.cssText = 'position:absolute;left:-100000px;top:0;width:10px;height:10px;overflow:hidden;pointer-events:none';
       off.innerHTML = c.markup; stage.parentNode.appendChild(off); s = off.querySelector('svg'); s.classList.add('map-svg'); g = c.g;
     }
-    if (off) drawMarks(s, g); // the host's marks, on another view too (#63)
+    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, 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;
@@ -2935,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));
@@ -2947,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); });
@@ -2963,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; }
-    if (ctx.geoCache[cur] && keys[cur] === ctx.viewKey(cur)) return; // this view's picture did not change
+    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]);
   }
 
@@ -3002,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
@@ -3034,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)}"/>`);
@@ -3058,28 +3480,67 @@ 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. */
+  let lensId = null;
+  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) { 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);
+    if (owners.length) { q('.mctl').insertAdjacentHTML('afterbegin', `<div class="um-lens" role="group" aria-label="${name}"><b>${name}</b>${owners.map(([o, t]) => `<span><i style="border-color:var(--um-${t})"></i>${esc(o)}</span>`).join('')}</div>`); clear = null; }
+  }
+  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;
+    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;
@@ -3091,36 +3552,50 @@ 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])), match = o.match || {}, low = x => String(x ?? '').trim().toLowerCase();
-    const cardOf = svc => { if (svc == null || !geo) return null; if (match[svc] != null) return geo.byId[match[svc]] ? String(match[svc]) : null;
-      if (geo.byId[svc]) return String(svc); const n = geo.nodes.find(x => low(x.label) === low(svc)); return n ? n.id : null; };
+    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 = [];
     list.forEach(s => { const to = cardOf(s.service); if (!to) return skipped++;
       const p = s.parent != null ? byId.get(String(s.parent)) : null, from = p && cardOf(p.service);
@@ -3128,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); } };
-    const ms = x => x >= 1000 ? `${+(x / 1000).toFixed(x >= 1e4 ? 0 : 1)} s` : `${x >= 10 ? Math.round(x) : +x.toFixed(1)} ms`, marks = {};
+      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)
@@ -3175,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;
@@ -3213,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
@@ -3227,52 +3728,85 @@ 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;
   }
 
   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 };
+    select, busy: () => busy, flowing: () => stage.classList.contains('flowing'), view: () => cur, unfold: gesture, lens: setLens,
+    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.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),
     play: (id, o) => play(id, o),
@@ -3372,35 +3906,123 @@ export function otlpSpans(data) {
       service, name: s.name, start: Number(s.startTimeUnixNano) / 1e6, end: Number(s.endTimeUnixNano) / 1e6 }))); });
   return out;
 }
+// a service's card (#65, #96): the card `match` names, else the card with that id, else the one with that label (any case)
+const cardMatcher = (cards, match) => { const m = match || {}, ids = new Set(cards.map(n => String(n.id))), low = x => String(x ?? '').trim().toLowerCase();
+  return s => s == null ? null : Object.hasOwn(m, s) && m[s] != null ? (ids.has(String(m[s])) ? String(m[s]) : null)
+    : ids.has(String(s)) ? String(s) : (n => n ? String(n.id) : null)(cards.find(n => low(n.label) === low(s))); };
+// a duration in words, as replay() labels a line and a trace's view says a step's: "37 ms", "1.2 s"
+const msText = x => x >= 1000 ? `${+(x / 1000).toFixed(x >= 1e4 ? 0 : 1)} s` : `${x >= 10 ? Math.round(x) : +x.toFixed(1)} ms`;
+
+/** The path along a view's lines with the highest total of `by` (#95): `latency` (ms, the default) or `cost`, summed over
+ *  its lines (a line without one counts 0). It starts at `from` and ends at `to`, either left out for any card, and never
+ *  comes back to a card. { refs, total }: its cards in order, then its lines, as Refs for highlight(); no refs and 0 when
+ *  no line leads from `from` (to `to`). */
+export function critical(model, viewId, options = {}) {
+  const { ids, edges } = lineGraph(model, viewId), by = options.by === 'cost' ? 'cost' : 'latency', { from, to } = options, none = { refs: [], total: 0 };
+  if ((from != null && !ids.includes(from)) || (to != null && !ids.includes(to))) return none;
+  const w = e => typeof e[by] === 'number' && e[by] > 0 ? e[by] : 0, path = [], on = new Set();
+  let best = null;
+  // ponytail: every path, depth first: exponential on a dense view with many ways between two cards; a longest-path pass
+  // over the lines in run order (few loop back) if a map's size makes the page wait
+  const walk = (u, sum) => { on.add(u);
+    edges.forEach(e => { if (e.from !== u || on.has(e.to)) return;
+      const s = sum + w(e); path.push(e);
+      if ((to == null ? ids.includes(e.to) : e.to === to) && (!best || s > best.total)) best = { total: s, lines: [...path] };
+      if (e.to !== to) walk(e.to, s);
+      path.pop(); });
+    on.delete(u); };
+  (from != null ? [from] : ids).forEach(id => walk(id, 0));
+  if (!best) return none;
+  const cards = [best.lines[0].from, ...best.lines.map(e => e.to)].filter(id => ids.includes(id));
+  return { refs: [...cards.map(id => ({ type: 'node', id, view: viewId })), ...best.lines.map(e => ({ type: 'edge', ids: [e._id], view: viewId }))],
+    total: +best.total.toPrecision(12) };
+}
+
+/** What taking cards out would cost (#95), with the model left as it is: `unreachable`, what loses its way to them in the
+ *  view (backward, as reach() finds it: for calls, what depends on them), each with its distance in lines from the nearest,
+ *  the cards themselves at 0. No rule breaks: rules only forbid lines and cycles, which taking cards out never adds. */
+export function whatIf(model, viewId, options = {}) {
+  const gone = new Set([].concat(options.remove ?? []).map(String)), near = new Map();
+  gone.forEach(id => reach(model, viewId, id, { backward: true }).forEach(r => { const k = r.type === 'node' ? r.id : '>' + r.ids[0];
+    if (!near.has(k) || r.distance < near.get(k).distance) near.set(k, r); }));
+  return { unreachable: [...near.values()].sort((a, b) => (a.type === 'edge') - (b.type === 'edge') || a.distance - b.distance) };
+}
+
+/** A trace kept as a numbered view (#96): `model` with a sequence view (`render: "sequence"`) made from `spans` (as
+ *  otlpSpans() reads them). Each call from one card to another (a span and its parent's) is a step, in time order, its
+ *  line labelled with the span's name and its duration under it. A span's service is a card as replay() matches it:
+ *  through `match`, else by id, else by label (any case); a span with no card, or whose caller has none, is no step, and
+ *  the view's caption names the services with no card. The view (`view`, default "trace"; `title`) takes the place of one
+ *  with its id, else comes last, under the view that shows the most of its cards. The model passed in is not changed. */
+export function sequenceFromTrace(model, spans, options = {}) {
+  const out = structuredClone(model || {}), id = String(options.view ?? 'trace'), views = arrOf(out.views);
+  const cards = [...arrOf(out.nodes), ...views.flatMap(v => arrOf(v && v.nodes))].filter(n => n && n.id != null);
+  const list = [].concat(spans || []).filter(s => s && Number.isFinite(+s.start) && Number.isFinite(+s.end));
+  const span = new Map(list.map(s => [String(s.id), s])), cardOf = cardMatcher(cards, options.match), hops = [], lost = new Set();
+  list.forEach(s => { const to = cardOf(s.service); if (!to) { if (s.service != null) lost.add(String(s.service)); return; }
+    const p = s.parent != null ? span.get(String(s.parent)) : null, from = p && cardOf(p.service);
+    if (from && from !== to) hops.push([from, to, s]); }); // a root span, a caller with no card, or work inside one card: no step
+  hops.sort((a, b) => +a[2].start - +b[2].start); // stable: calls that start together keep the trace's order
+  const nodeIds = [...new Set(hops.flatMap(([a, b]) => [a, b]))], n = hops.length, took = s => msText(+s.end - +s.start);
+  const edges = hops.map(([from, to, s], i) => ({ id: `${id}-${i + 1}`, from, to, ...(s.name ? { label: String(s.name), sublabel: took(s) } : { label: took(s) }) }));
+  const home = views.reduce((a, v) => { const k = v && v.id !== id ? nodeIds.filter(x => arrOf(v.nodeIds).includes(x)).length : 0; return k > a[1] ? [v.id, k] : a; }, [null, 0])[0];
+  const view = { id, ...(home != null ? { parent: home } : {}), title: options.title || id,
+    caption: `From a trace: ${n} call${n === 1 ? '' : 's'} between cards, in time order, each with its duration.${lost.size ? ` No card for ${andList([...lost])}.` : ''}`,
+    render: 'sequence', lanes: false, nodeIds, edges };
+  const at = views.findIndex(v => v && v.id === id);
+  out.views = at < 0 ? [...views, view] : views.map((v, k) => k === at ? view : v);
+  return out;
+}
+
+/* a lens (#94): what it lights on a view, as a layer of marks. Without `line`, the cards its pick picks and the lines
+   between two of them; with `line` (line kinds), the lines of those kinds between two cards the rest of it picks, and the
+   cards at their ends. The rest dims. With color 'owner', each lit card is ringed in its owner's tone, the same on every
+   view (owners in name order); `owners`: the view's lit owners and their tones, for a legend. */
+const OWNER_TONES = ['cyan', 'violet', 'green', 'amber', 'fuchsia', 'orange', 'rose', 'slate'];
+function lensOf(ctx, vid, lens) {
+  const v = ctx.V[vid], s = lens.pick && typeof lens.pick === 'object' && !Array.isArray(lens.pick) ? lens.pick : {}, { end } = endsIn(ctx, v), ok = id => picks(s, end(id));
+  const kinds = s.line == null ? null : [s.line].flat(), cards = arrOf(v.nodeIds).filter(id => ctx.N[id]), all = ctx.viewEdges(v);
+  const lines = all.filter(e => (!kinds || kinds.includes(WIRE_KINDS.includes(e.kind) ? e.kind : 'calls')) && ok(e.from) && ok(e.to));
+  const lit = new Set(kinds ? lines.flatMap(e => [e.from, e.to]) : cards.filter(ok));
+  // ponytail: eight tones, so the ninth owner shares the first's; a host that needs more rings cards itself with overlay()
+  const names = [...new Set([...ctx.nodes, ...ctx.views.flatMap(w => Object.values(w.nodeOverrides || {}))].map(n => n && n.owner).filter(o => typeof o === 'string'))].sort();
+  const tone = o => lens.color === 'owner' && names.includes(o) ? OWNER_TONES[names.indexOf(o) % OWNER_TONES.length] : null;
+  const nodes = Object.fromEntries(cards.filter(id => lit.has(id)).map(id => [id, tone(end(id).owner) ? { tone: tone(end(id).owner) } : {}]));
+  const owners = [...new Set(Object.keys(nodes).map(id => end(id).owner).filter(tone))].sort().map(o => [o, tone(o)]);
+  const dim = Object.keys(nodes).length < cards.length || lines.length < all.length; // a lens that lights everything leaves the selection its own dimming
+  return { layer: { nodes, edges: Object.fromEntries(lines.map(e => [e._id, {}])), dim }, owners };
+}
 
 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, childOf: childOf0, subjectOf, viewsWith, kidsOf, chain, viewEdges, planCache } = mapContext(model);
-  const nodeIn = (nid, vid = cur) => nodeIn0(nid, vid), childOf = (nid, vid = cur) => childOf0(nid, vid);
-  const shortT = t => String(t || '').split(' · ')[0];
-  const root = D.meta && D.meta.root ? D.meta.root.replace(/\/$/, '') : '';
-  const base = D.sourcesBase ? String(D.sourcesBase).replace(/\/$/, '') + '/' : '';
-  const srcPath = p => p.replace(/:\d+(-\d+)?$/, '');
-  // meta.root is the repo root relative to this page (older pages: absolute). `~/…` sources live
-  // outside the repo, so they get no link.
-  // meta.sourceBase (render --source-base): in-pack sources were rewritten to URLs under it and
-  // show as their pack-relative path; any other relative source gets no link on a published page.
-  const sb = D.meta && D.meta.sourceBase ? String(D.meta.sourceBase) : '';
-  const srcLabel = p => sb && p.startsWith(sb) ? decodeURI(p.slice(sb.length)).replace(/#L(\d+)(?:-L(\d+))?$/, (_, a, b) => ':' + a + (b ? '-' + b : '')) : p;
-  const srcHref = p => /^https?:/.test(p) ? p
-    : p.startsWith('~') || sb ? ''
-    : p.startsWith('/') ? 'file://' + encodeURI(srcPath(p))
-    : root.startsWith('/') ? 'file://' + encodeURI(root + '/' + base + srcPath(p))
-    : encodeURI((root ? root + '/' : '') + base + srcPath(p));
-  const srcList = n => (Array.isArray(n.source) ? n.source : n.source ? [n.source] : []);
+  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);
   const mac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || '');
   const modK = mac ? '⌘K' : 'Ctrl K';
-  const touch = matchMedia('(hover: none)').matches;
-  const HINT = touch ? '<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><span>${modK} = search</span><span>? = keys</span>`;
+  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 = `
@@ -3410,8 +4032,10 @@ 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-pop" id="m-stories-pop" hidden>${D.stories.map(s => `<button data-story="${esc(s && s.id)}">${esc((s && (s.title || s.id)) || '')}</button>`).join('')}</div></div>` : ''}
+      <div class="menu"><button class="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">◎<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>
       <button class="ibtn" id="m-pause" type="button" title="Pause" aria-label="Pause" aria-pressed="false">❚❚</button>
@@ -3429,19 +4053,17 @@ 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 tab = 'when'; try { tab = localStorage.getItem('visual-tab') || 'when'; } catch (_) {}
-  const status = (t, ms = 1800) => { const el = $('m-hint'); el.textContent = t; el.classList.add('msg'); clearTimeout(status.t); status.t = setTimeout(() => { el.innerHTML = HINT; el.classList.remove('msg'); }, ms); };
+  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 });
 
   function renderChrome() {
     const v = V[cur];
@@ -3449,7 +4071,7 @@ export function mountPage(container, model, options = {}) {
       ? `<span class="crumb cur" aria-current="page">${esc(V[id].title || id)}</span>`
       : `<button class="crumb" data-v="${esc(id)}">${esc(shortT(V[id].title || id))}</button><span class="crumb-sep">›</span>`).join('');
     const parent = stack.length > 1 ? stack[stack.length - 2] : v.parent;
-    renderPill(parent); renderLegend(); renderTree();
+    renderPill(parent); pc.chrome();
     document.title = `${v.title || v.id} · ${D.title || 'map'}`;
   }
   function renderPill(parent) {
@@ -3464,207 +4086,112 @@ export function mountPage(container, model, options = {}) {
         <div class="vm">${geo.nodes.length} nodes · ${geo.edges.length} wires${views.length > 1 ? ` · level ${chain(cur).length} of ${depth}` : ''}</div></div>`;
   }
   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); };
-  let legendFolded = false; try { legendFolded = localStorage.getItem('visual-legend') === '0'; } catch (_) {}
-  function renderLegend() {
-    const used = [...new Set(geo.nodes.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' : '';
-    const items = 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(geo.nodes.some(n => n.kids || n.opens) ? ['<span class="lgi"><i class="s"></i><b>⤢ Stacked</b><span>double-click to open</span></span>'] : [])
-      .concat(geo.nodes.some(n => n.step) ? ['<span class="lgi"><i class="num">1</i><b>Step</b><span>run order</span></span>'] : [])
-      .concat(geo.nodes.some(n => n.tag) ? ['<span class="lgi"><i class="tag"></i><b>@author</b><span>who wrote it</span></span>'] : [])
-      .concat(WIRES.filter(w => geo.edges.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>`))
-      .concat(geo.edges.some(e => e.back) ? ['<span class="lgi"><i class="w dash" style="border-color:var(--um-w-calls)"></i><b>loops back</b><span>the one line that runs right to left</span></span>'] : []);
-    const el = $('m-legend');
-    el.hidden = !items.length;
-    el.classList.toggle('folded', legendFolded);
-    el.innerHTML = `<div class="t"><span>LEGEND</span><button type="button" id="m-lfold" aria-label="${legendFolded ? 'Show' : 'Hide'} legend" aria-expanded="${!legendFolded}">${legendFolded ? '+' : '–'}</button></div>${items.join('')}`;
-  }
-  function renderTree() { // Readable columns; a declared order may include shortcuts to descendants.
-    const ch = chain(cur);
-    const roots = views.filter(x => !x.parent), cols = roots.length > 1 ? [{ head: 'Map', items: roots, on: ch[0] }] : [];
-    ch.forEach((id, i) => { const order = V[id].browserOrder || [], k = [...new Set([...order, ...kidsOf(id).map(v => v.id)])].map(id => V[id]).filter(Boolean); if (k.length) cols.push({ head: shortT(V[id].title || id), items: k, on: ch[i + 1] }); });
-    document.body.style.setProperty('--browser-width', Math.min(448, Math.max(1, cols.length) * 224) + 'px');
-    $('m-tree').innerHTML = `<div class="miller">${cols.map(c => `<div class="mcol"><div class="mch" title="${esc(c.head)}">${esc(c.head)}</div>${c.items.map(x => { const n = kidsOf(x.id).length;
-      return `<button class="mit${x.id === cur ? ' on' : x.id === c.on ? ' path' : ''}" data-v="${esc(x.id)}" title="${esc(x.title || x.id)}"${x.id === cur ? ' aria-current="page"' : ''}><span>${esc(shortT(x.title || x.id))}</span><em>${(x.nodeIds || []).length}${n ? ' ›' : ''}</em></button>`; }).join('')}</div>`).join('')}</div>`;
-    const m = $('m-tree').firstChild, last = m.lastElementChild; m.style.scrollBehavior = 'auto'; m.scrollLeft = last ? Math.max(0, last.offsetLeft + last.offsetWidth - m.clientWidth) : 0; m.style.scrollBehavior = '';
-  }
-  const setTree = on => { document.body.classList.toggle('tree-open', on); $('m-outline').setAttribute('aria-expanded', on); };
-
-  // Pull concise points from captured prose; retain wording and keep the full point in its tooltip. A point is a sentence
-  // or a clause; one longer than a line (160 characters) is cut in two, but a short sentence stays whole (#97).
-  function detailBullets(body) {
-    const normalized = String(body || '').replace(/^\s*(?:[-*]|\d+[.)])\s+/gm, '').replace(/\n+/g, ' ').trim();
-    let parts = normalized.split(/(?<=[.!?])\s+(?=[A-Z`/])|;\s+|\s+[·|]\s+/).filter(Boolean);
-    while (parts.some(p => p.length > 160) && parts.length < 4) {
-      const index = parts.reduce((best, p, i) => p.length > (parts[best] || '').length ? i : best, 0), value = parts[index];
-      if (!value || value.length < 8) break;
-      const separators = [...value.matchAll(/:\s+|,\s+|\s+(?=then\b|with\b|before\b|after\b|once\b|to\b|and\b|or\b|during\b|by\b|whose\b|outside\b|on\b|for\b|as\b|whenever\b|into\b|in\b|from\b|when\b|includes\b|typed\b)/g)].map(m => m.index + m[0].length);
-      const safe = i => (value.slice(0, i).match(/`/g) || []).length % 2 === 0;
-      const cuts = separators.filter(i => i >= 6 && i < value.length - 4 && safe(i));
-      if (!cuts.length && parts.length < 2) cuts.push(...[...value.matchAll(/\s+/g)].map(m => m.index).filter(i => i >= 6 && i < value.length - 4 && safe(i)));
-      const cut = cuts.sort((a, b) => Math.abs(a - value.length / 2) - Math.abs(b - value.length / 2))[0];
-      if (!cut) break;
-      parts.splice(index, 1, value.slice(0, cut).replace(/[,;:]\s*$/, '').trim(), value.slice(cut).trim());
-    }
-    if (parts.length > 4) parts = [...parts.slice(0, 3), parts.slice(3).join(' ')];
-    return parts;
-  }
-  /* selection + details strip */
-  /* selection + details strip: the canvas reports, the page shows the panel and records the hash */
-  const select = (nid, opts = {}) => X.select({ type: 'node', id: nid }, opts);
-  function hidePanel() { panel.hidden = true; }
-  const deselect = () => X.select(null);
-  function relRows(list, dir) {
-    if (!list.length) return `<div class="rel-none">${dir === 'up' ? 'Nothing calls this here' : 'Calls nothing here'}</div>`;
-    return '<ul class="relation-list">' + list.map(({ e, id, inView }) => { const o = N[id] || { label: id, kind: '' }, k = kindOf(o.kind, true);
-      return `<li><button class="rel" data-n="${esc(id)}" title="${esc((e.when ? e.when + ' — ' : '') + (inView ? 'Select' : 'Find in another view'))}"><i style="background:var(--um-${KIND[k][0]})"></i><span class="rel-l">${esc(o.label)}</span>
-        <span class="rel-e">${e.step != null ? esc(e.step) + ' · ' : ''}${esc(e.label || '')}${inView ? '' : ' ↗'}</span></button></li>`; }).join('') + '</ul>';
-  }
-  const authorChip = login => { const A = (D.authors || {})[login] || {};
-    return `<a class="author" href="${esc(A.url || 'https://github.com/' + login)}" target="_blank" rel="noopener">${A.avatar ? `<img src="${A.avatar}" alt="">` : `<i>${esc(login.slice(0, 2).toUpperCase())}</i>`}<span>${esc(A.name || login)} <b>@${esc(login)}</b></span></a>`; };
-  function renderPanel(nid) {
-    const n = nodeIn(nid), k = kindOf(n.kind, true), c = `var(--um-${KIND[k][0]})`, pub = k === 'm-public', ext = k === 'm-ext';
-    const inView = new Set(geo.nodes.map(x => x.id)), seen = new Set();
-    const collect = dir => {
-      const out = [];
-      const add = (e, id, iv) => { const key = dir + id + (e.label || ''); if (seen.has(key)) return; seen.add(key); out.push({ e, id, inView: iv }); };
-      geo.edges.forEach(e => { if (dir === 'up' && e.to === nid) add(e, e.from, true); if (dir === 'down' && e.from === nid) add(e, e.to, true); });
-      viewEdges(V[cur]).forEach((e, i) => { const e2 = V[cur].render === 'sequence' ? { ...e, step: i + 1 } : e; if (dir === 'up' && e.to === nid) add(e2, e.from, true); if (dir === 'down' && e.from === nid) add(e2, e.to, true); });
-      (D.edges || []).forEach(e => { if (dir === 'up' && e.to === nid) add(e, e.from, inView.has(e.from)); if (dir === 'down' && e.from === nid) add(e, e.to, inView.has(e.to)); });
-      return out;
-    };
-    const ups = collect('up'), downs = collect('down'), srcs = srcList(n);
-    const child = childOf(nid), canOpen = child && child !== cur;
-    const vIn = viewsWith(nid).filter(v => v.id !== cur);
-    const by = n.author ? `<span>·</span>${authorChip(n.author)}` : ext ? '<span class="origin">· author unknown</span>' : '';
-    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';
-    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>';
-    const bodies = {
-      when: text('When to use', n.when, 'when'),
-      what: text('What it is', n.what, 'what') + verbs,
-      how: text('How it works', n.how, 'how'),
-      examples: `<h4>Example</h4><ul class="exs">${exs.map((x, i) => `<li class="ex">${x.thumb ? `<button class="ex-thumb" data-ex="${i}" title="Open full size" aria-label="Open ${esc(x.title || 'example')} full size"><img src="${esc(x.thumb)}" alt="" loading="lazy"></button>` : ''}<b>${inline(x.title || '')}</b>${x.caption ? `<small>${inline(x.caption)}</small>` : ''}${x.href ? `<a href="${esc(x.href)}" target="_blank" rel="noopener">Open live page ↗</a>` : ''}</li>`).join('')}</ul>`,
-      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>`,
-    };
-    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>`
-  : `<span class="big" style="background:${c}" aria-hidden="true"><svg viewBox="0 0 ${I && I.g ? 24 : 16} ${I && I.g ? 24 : 16}" width="20" height="20" fill="none" stroke="currentColor" stroke-width="${I && I.g ? 2 : 1.5}" stroke-linecap="round" stroke-linejoin="round">${I && I.g ? I.g : SIGIL[k]}</svg></span>`; })()}
-        <div class="pt"><h3>${esc(n.label || nid)}</h3><small><span>${esc(KIND[k][1])}</span><span class="vis ${pub ? 'pub' : ext ? 'ext' : ''}">${badgesOf(n).length ? badgesOf(n).map(b => esc(b.text.toUpperCase())).join(' · ') : pub ? 'PUBLIC' : ext ? 'EXTERNAL' : 'INTERNAL'}</span>${by}${n.origin ? `<span class="origin">${esc(n.origin)}</span>` : ''}</small></div>
-        <div class="acts">${canOpen ? `<button class="obtn" data-open="${esc(child)}" style="--c:${c}">⤢ Open ${esc(shortT(V[child].title || child))} <span>${(V[child].nodeIds || []).length} nodes · Enter</span></button>` : ''}${X && X.ctx().unfoldable(nid, cur) ? `<button class="obtn" data-unfold="${esc(nid)}" style="--c:${c}">⤡ Unfold here <span>E</span></button>` : ''}${litButtons()}<button class="ibtn x" data-close title="Close (Esc)" aria-label="Close details">×</button></div>
-      </div>
-      <div class="ptabs" role="tablist" aria-label="Details">${tabs.map(t => `<button class="ptab" role="tab" id="pt-${t[0]}" data-tab="${t[0]}" aria-selected="${t[0] === tab}" aria-controls="m-pbody">${t[1]}${t[2] != null ? `<em>${t[2]}</em>` : ''}</button>`).join('')}
-        <span class="pnav"><button class="ibtn sm" data-step="-1" title="Previous ([)" aria-label="Previous tab">‹</button><button class="ibtn sm" data-step="1" title="Next (])" aria-label="Next tab">›</button></span></div>
-      <div class="pbody" id="m-pbody" role="tabpanel" aria-labelledby="pt-${tab}">${bodies[tab]}</div>`;
-    panel.hidden = false;
-    panel.dataset.node = nid;
-    panel.querySelectorAll('.clamp').forEach(el => { if (el.scrollHeight > el.clientHeight + 2) el.insertAdjacentHTML('afterend', '<button class="morebtn" data-more>Show all</button>'); });
-  }
-  let TABS = ['when', 'what', 'how', 'links'];
-  function openExample(nid, i) {
-    const x = ((nodeIn(nid) || {}).examples || [])[i]; if (!x) return;
-    let lb = $('m-lightbox');
-    if (!lb) { lb = h(`<div class="lightbox" id="m-lightbox" role="dialog" aria-modal="true" aria-label="Example" hidden></div>`); document.body.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();
-  }
-  const closeExample = () => { const lb = $('m-lightbox'); if (lb) lb.hidden = true; };
-  const setTab = t => { tab = t; try { localStorage.setItem('visual-tab', t); } catch (_) {} if (sel) renderPanel(sel); };
-
-  /* paths and reach (#64): lit on the map from the details panel or by key, and said in the hint line (a live region); a
-     new selection or view clears them, and the same key again does */
-  let lit = null, picked = [];
-  const cardName = id => nodeIn(id).label || id, nCards = n => `${n} card${n === 1 ? '' : 's'}`;
-  const litButtons = () => '<button class="ibtn" data-lit="out" title="Light what it leads to (&gt;)" aria-label="Light what it leads to">→</button><button class="ibtn" data-lit="in" title="Light what leads to it (&lt;)" aria-label="Light what leads to it">←</button>'
-    + (picked.length > 1 ? '<button class="ibtn" data-lit="paths" title="Light every path between the two cards (P)" aria-label="Light every path between the two selected cards">⇄</button>' : '');
-  function unlight() { if (lit) { lit = null; handle.highlight(null); } }
-  function light(key, refs, said) {
-    if (lit === key) { unlight(); return status('Highlight cleared'); }
-    lit = key; handle.highlight(refs.length ? refs : null); status(said, 3600);
-  }
-  function lightReach(back) {
-    if (!sel || !geo.byId[sel]) return;
-    const refs = reach(D, cur, sel, { backward: back }), n = refs.filter(r => r.type === 'node').length - 1, s = cardName(sel);
-    light((back ? 'in ' : 'out ') + sel, n ? refs : [], !n ? (back ? `Nothing leads to ${s} here` : `${s} leads nowhere here`)
-      : back ? `${nCards(n)} ${n === 1 ? 'leads' : 'lead'} to ${s}: lit on the map` : `${s} leads to ${nCards(n)}: lit on the map`);
-  }
-  function lightPaths() {
-    const [a, b] = picked.slice(-2); if (!b) return;
-    let refs = paths(D, cur, a, b), [x, y] = [a, b];
-    if (!refs.length) { refs = paths(D, cur, b, a); [x, y] = [b, a]; } // the two cards in either order
-    const n = refs.filter(r => r.type === 'node').length;
-    light(`paths ${a} ${b}`, refs, n ? `Every path from ${cardName(x)} to ${cardName(y)}: ${nCards(n)}, lit on the map` : `No path joins ${cardName(a)} and ${cardName(b)} here`);
-  }
+  const setTree = pc.setTree;
 
-  /* 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)
-    ['theme', 'check', 'shot'].forEach(k => Q.get(k) && p.set(k, Q.get(k)));
+    if (lensOn) p.set('lens', lensOn); // the lens on the map (#94)
+    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 = nid => { if (geo.byId[nid]) return select(nid); const vs = viewsWith(nid); const v = vs.find(x => chain(x.id).includes(cur)) || vs[0]; if (v) go(v.id, { select: nid }); };
+  const findNode = pc.find;
 
   /* events */
   stage.addEventListener('click', e => {
     if (e.target.closest('#m-pillbtn')) return togglePill();
-    if (e.target.closest('#m-lfold')) { legendFolded = !legendFolded; try { localStorage.setItem('visual-legend', legendFolded ? '0' : '1'); } catch (_) {} renderLegend(); if (!cam.touched) cam.set(X.startView()); return; }
     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'); };
-  panel.addEventListener('click', e => {
-    const t = e.target;
-    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(panel.dataset.node, +ex.dataset.ex);
-  });
+  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;
-    if (t.closest('[data-close]')) return deselect();
-    const lb = t.closest('#m-panel [data-lit]'); if (lb) return lb.dataset.lit === 'paths' ? lightPaths() : lightReach(lb.dataset.lit === 'in');
-    const ob = t.closest('[data-open]'); if (ob) return go(ob.dataset.open, { via: sel });
-    const ub = t.closest('#m-panel [data-unfold]'); if (ub) return X.unfold(ub.dataset.unfold); // in place (#71)
-    const pv = t.closest('.pview'); if (pv) return go(pv.dataset.v, { select: pv.dataset.sel });
-    const rn = t.closest('#m-panel [data-n]'); if (rn) return findNode(rn.dataset.n);
-    const cv = t.closest('#m-crumbs [data-v], #m-tree [data-v]'); if (cv) { if (innerWidth <= 820) setTree(false); return go(cv.dataset.v); }
-    const cp = t.closest('[data-copy]'); if (cp) { navigator.clipboard && navigator.clipboard.writeText(cp.dataset.copy).then(() => status('Path copied'), () => status(cp.dataset.copy)); return; }
-    const mn = t.closest('.menu'); if (!mn || !mn.contains($('m-export'))) closeExport(); if (!mn || !mn.contains($('m-stories'))) closeStories();
-    if (!t.closest('#m-helpbox, #m-help')) closeHelp();
-  });
+    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 toldSel = id => { const s = told && (D.stories || []).find(x => x && x.id === told.id), st = s && (s.steps || [])[told.step]; return !!(st && st.select === id); }; // the step's own selection: a pointer, no details panel
-  const storiesPop = $('m-stories-pop'), closeStories = () => { if (storiesPop) { storiesPop.hidden = true; $('m-stories').setAttribute('aria-expanded', 'false'); } };
-  if (storiesPop) {
-    $('m-stories').addEventListener('click', () => { const on = storiesPop.hidden; storiesPop.hidden = !on; $('m-stories').setAttribute('aria-expanded', on); });
-    storiesPop.addEventListener('click', e => { const b = e.target.closest('[data-story]'); if (!b) return; closeStories(); handle.play(b.dataset.story); });
+  /* 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');
+  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">
@@ -3673,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
@@ -3688,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() }));
@@ -3733,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]); });
@@ -3749,31 +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 (k === 'Escape' || k === 'Backspace') {
-      if ($('m-lightbox') && !$('m-lightbox').hidden) closeExample(); else if (!$('m-helpbox').hidden) closeHelp(); else if (!$('m-export-pop').hidden) closeExport(); else if (storiesPop && !storiesPop.hidden) closeStories(); else if ($('m-vpop') && !$('m-vpop').hidden) togglePill(false);
-      else if (!inCanvas) X.key(e); else return;
-    }
-    else if (k === '/') openPal();
-    else if (k === '?') $('m-help').click();
-    else if (k === 'i' || k === 'I') togglePill();
-    else if ((k === '[' || k === ']') && sel) setTab(TABS[(TABS.indexOf(tab) + (k === ']' ? 1 : -1) + TABS.length) % TABS.length]);
-    else if (k === 'o' || k === 'O') setTree(!document.body.classList.contains('tree-open'));
-    else if ((k === '>' || k === '<') && sel) lightReach(k === '<');
-    else if ((k === 'p' || k === 'P') && picked.length > 1) lightPaths();
-    else if (inCanvas || !X.key(e)) return;
-    e.preventDefault(); e.stopPropagation();
-  }, true);
-  addEventListener('popstate', () => { const p = new URLSearchParams(location.hash.slice(1)); 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); }
@@ -3790,36 +4333,446 @@ 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'), 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
         return [{ t: top, r: 20, b: 40 + (on ? lg.offsetHeight + 8 : 0), l: 20 }, { t: top, r: 20, b: 40, l: 20 + (on ? lg.offsetWidth + 8 : 0) }]; },
       onNavigate: (vid, prev, mode) => { togglePill(false);
         if (stack.includes(vid)) stack = stack.slice(0, stack.indexOf(vid) + 1); else if (mode === 'in' && prev) stack = [...stack, vid]; else stack = chain(vid); },
-      onMount: inner => { X = inner; ({ D, views, nodes, N, V, rootId, subjectOf, viewsWith, kidsOf, chain, viewEdges, planCache } = X.ctx()); nodeIn0 = X.ctx().nodeIn; childOf0 = X.ctx().childOf;
+      onMount: inner => { X = inner; ({ D, views, nodes, N, V, rootId, subjectOf, viewsWith, kidsOf, chain, viewEdges, planCache } = X.ctx()); nodeIn0 = X.ctx().nodeIn;
         cam = X.cam(); geo = X.geo(); svg = X.svg(); cur = X.view(); if (paused) X.pause(true);
         if (!stack.length || !stack.includes(cur)) stack = chain(cur);
-        renderChrome(); hidePanel(); },
+        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)
-        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; picked = (targets || []).filter(t => t.type === 'node').map(t => t.id); unlight(); if (sel && !toldSel(sel)) renderPanel(sel); else hidePanel(); setHash(true); recordSoon(); });
-  handle.on('viewchange', () => { unlight(); setHash(replaceNext); replaceNext = false; recordSoon(); });
+  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
+   on it. X() is render()'s inner handle; el: the views list's, legend's and details panel's elements (null: not drawn);
+   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, 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
+// or a clause; one longer than a line (160 characters) is cut in two, but a short sentence stays whole (#97).
+function detailBullets(body) {
+  const normalized = String(body || '').replace(/^\s*(?:[-*]|\d+[.)])\s+/gm, '').replace(/\n+/g, ' ').trim();
+  let parts = normalized.split(/(?<=[.!?])\s+(?=[A-Z`/])|;\s+|\s+[·|]\s+/).filter(Boolean);
+  while (parts.some(p => p.length > 160) && parts.length < 4) {
+    const index = parts.reduce((best, p, i) => p.length > (parts[best] || '').length ? i : best, 0), value = parts[index];
+    if (!value || value.length < 8) break;
+    const separators = [...value.matchAll(/:\s+|,\s+|\s+(?=then\b|with\b|before\b|after\b|once\b|to\b|and\b|or\b|during\b|by\b|whose\b|outside\b|on\b|for\b|as\b|whenever\b|into\b|in\b|from\b|when\b|includes\b|typed\b)/g)].map(m => m.index + m[0].length);
+    const safe = i => (value.slice(0, i).match(/`/g) || []).length % 2 === 0;
+    const cuts = separators.filter(i => i >= 6 && i < value.length - 4 && safe(i));
+    if (!cuts.length && parts.length < 2) cuts.push(...[...value.matchAll(/\s+/g)].map(m => m.index).filter(i => i >= 6 && i < value.length - 4 && safe(i)));
+    const cut = cuts.sort((a, b) => Math.abs(a - value.length / 2) - Math.abs(b - value.length / 2))[0];
+    if (!cut) break;
+    parts.splice(index, 1, value.slice(0, cut).replace(/[,;:]\s*$/, '').trim(), value.slice(cut).trim());
+  }
+  if (parts.length > 4) parts = [...parts.slice(0, 3), parts.slice(3).join(' ')];
+  return parts;
+}
+
+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>${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>`))
+    .concat(es.some(e => e.back) ? ['<span class="lgi"><i class="w dash" style="border-color:var(--um-w-calls)"></i><b>loops back</b><span>the one line that runs right to left</span></span>'] : []);
+}
+
+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 (_) {} };
+  // 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()]), 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() {
+    const { views, V, kidsOf, chain } = X().ctx(), cur = X().view(), ch = chain(cur);
+    const roots = views.filter(x => !x.parent), cols = roots.length > 1 ? [{ head: 'Map', items: roots, on: ch[0] }] : [];
+    ch.forEach((id, i) => { const order = V[id].browserOrder || [], k = [...new Set([...order, ...kidsOf(id).map(v => v.id)])].map(id => V[id]).filter(Boolean); if (k.length) cols.push({ head: shortT(V[id].title || id), items: k, on: ch[i + 1] }); });
+    o.frame.style.setProperty('--browser-width', Math.min(448, Math.max(1, cols.length) * 224) + 'px');
+    el.tree.innerHTML = `<div class="miller">${cols.map(c => `<div class="mcol"><div class="mch" title="${esc(c.head)}">${esc(c.head)}</div>${c.items.map(x => { const n = kidsOf(x.id).length;
+      return `<button class="mit${x.id === cur ? ' on' : x.id === c.on ? ' path' : ''}" data-v="${esc(x.id)}" title="${esc(x.title || x.id)}"${x.id === cur ? ' aria-current="page"' : ''}><span>${esc(shortT(x.title || x.id))}</span><em>${(x.nodeIds || []).length}${n ? ' ›' : ''}</em></button>`; }).join('')}</div>`).join('')}</div>`;
+    const m = el.tree.firstChild, last = m.lastElementChild; m.style.scrollBehavior = 'auto'; m.scrollLeft = last ? Math.max(0, last.offsetLeft + last.offsetWidth - m.clientWidth) : 0; m.style.scrollBehavior = '';
+  }
+  const setTree = on => { o.frame.classList.toggle('tree-open', on); if (o.toggle) o.toggle.setAttribute('aria-expanded', on); };
+
+  /* the details panel: header, actions and tabs of the selected card */
+  function relRows(list, dir) {
+    const { N } = X().ctx();
+    if (!list.length) return `<div class="rel-none">${dir === 'up' ? 'Nothing calls this here' : 'Calls nothing here'}</div>`;
+    return '<ul class="relation-list">' + list.map(({ e, id, inView }) => { const o = N[id] || { label: id, kind: '' }, k = kindOf(o.kind, true);
+      return `<li><button class="rel" data-n="${esc(id)}" title="${esc((e.when ? e.when + ' — ' : '') + (inView ? 'Select' : 'Find in another view'))}"><i style="background:var(--um-${KIND[k][0]})"></i><span class="rel-l">${esc(o.label)}</span>
+        <span class="rel-e">${e.step != null ? esc(e.step) + ' · ' : ''}${esc(e.label || '')}${inView ? '' : ' ↗'}</span></button></li>`; }).join('') + '</ul>';
+  }
+  const authorChip = login => { const A = (X().ctx().D.authors || {})[login] || {};
+    return `<a class="author" href="${esc(A.url || 'https://github.com/' + login)}" target="_blank" rel="noopener">${A.avatar ? `<img src="${A.avatar}" alt="">` : `<i>${esc(login.slice(0, 2).toUpperCase())}</i>`}<span>${esc(A.name || login)} <b>@${esc(login)}</b></span></a>`; };
+  const focused = () => { const a = el.panel.getRootNode().activeElement; return a && el.panel.contains(a) ? a : null; };
+  function show(nid) {
+    const { D, N, V, nodeIn, opensOf, kidCount, unfoldable, viewsWith, viewEdges } = X().ctx(), geo = X().geo(), cur = X().view(), panel = el.panel;
+    const root = D.meta && D.meta.root ? D.meta.root.replace(/\/$/, '') : '';
+    const base = D.sourcesBase ? String(D.sourcesBase).replace(/\/$/, '') + '/' : '';
+    const srcPath = p => p.replace(/:\d+(-\d+)?$/, '');
+    // meta.root is the repo root relative to this page (older pages: absolute). `~/…` sources live
+    // outside the repo, so they get no link.
+    // meta.sourceBase (render --source-base): in-pack sources were rewritten to URLs under it and
+    // show as their pack-relative path; any other relative source gets no link on a published page.
+    const sb = D.meta && D.meta.sourceBase ? String(D.meta.sourceBase) : '';
+    const srcLabel = p => sb && p.startsWith(sb) ? decodeURI(p.slice(sb.length)).replace(/#L(\d+)(?:-L(\d+))?$/, (_, a, b) => ':' + a + (b ? '-' + b : '')) : p;
+    const srcHref = p => /^https?:/.test(p) ? p
+      : p.startsWith('~') || sb ? ''
+      : p.startsWith('/') ? 'file://' + encodeURI(srcPath(p))
+      : root.startsWith('/') ? 'file://' + encodeURI(root + '/' + base + srcPath(p))
+      : encodeURI((root ? root + '/' : '') + base + srcPath(p));
+    const srcList = n => (Array.isArray(n.source) ? n.source : n.source ? [n.source] : []);
+    const n = nodeIn(nid, cur), k = kindOf(n.kind, true), c = `var(--um-${KIND[k][0]})`, pub = k === 'm-public', ext = k === 'm-ext';
+    const inView = new Set(geo.nodes.map(x => x.id)), seen = new Set();
+    const collect = dir => {
+      const out = [];
+      const add = (e, id, iv) => { const key = dir + id + (e.label || ''); if (seen.has(key)) return; seen.add(key); out.push({ e, id, inView: iv }); };
+      geo.edges.forEach(e => { if (dir === 'up' && e.to === nid) add(e, e.from, true); if (dir === 'down' && e.from === nid) add(e, e.to, true); });
+      viewEdges(V[cur]).forEach((e, i) => { const e2 = V[cur].render === 'sequence' ? { ...e, step: i + 1 } : e; if (dir === 'up' && e.to === nid) add(e2, e.from, true); if (dir === 'down' && e.from === nid) add(e2, e.to, true); });
+      (D.edges || []).forEach(e => { if (dir === 'up' && e.to === nid) add(e, e.from, inView.has(e.from)); if (dir === 'down' && e.from === nid) add(e, e.to, inView.has(e.to)); });
+      return out;
+    };
+    const ups = collect('up'), downs = collect('down'), srcs = srcList(n);
+    const child = opensOf(nid, cur), later = !o.page && child && !V[child], count = V[child] ? (V[child].nodeIds || []).length : kidCount(nid, cur); // later: a view the host loads when asked (#47)
+    const vIn = viewsWith(nid).filter(v => v.id !== cur);
+    const by = n.author ? `<span>·</span>${authorChip(n.author)}` : ext ? '<span class="origin">· author unknown</span>' : '';
+    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]);
+    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>';
+    const bodies = {
+      when: text('When to use', n.when, 'when'),
+      what: text('What it is', n.what, 'what') + verbs,
+      how: text('How it works', n.how, 'how'),
+      examples: `<h4>Example</h4><ul class="exs">${exs.map((x, i) => `<li class="ex">${x.thumb ? `<button class="ex-thumb" data-ex="${i}" title="Open full size" aria-label="Open ${esc(x.title || 'example')} full size"><img src="${esc(x.thumb)}" alt="" loading="lazy"></button>` : ''}<b>${inline(x.title || '')}</b>${x.caption ? `<small>${inline(x.caption)}</small>` : ''}${x.href ? `<a href="${esc(x.href)}" target="_blank" rel="noopener">Open live page ↗</a>` : ''}</li>`).join('')}</ul>`,
+      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 = 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>`
+  : `<span class="big" style="background:${c}" aria-hidden="true"><svg viewBox="0 0 ${I && I.g ? 24 : 16} ${I && I.g ? 24 : 16}" width="20" height="20" fill="none" stroke="currentColor" stroke-width="${I && I.g ? 2 : 1.5}" stroke-linecap="round" stroke-linejoin="round">${I && I.g ? I.g : SIGIL[k]}</svg></span>`; })()}
+        <div class="pt"><h3>${esc(n.label || nid)}</h3><small><span>${esc(KIND[k][1])}</span><span class="vis ${pub ? 'pub' : ext ? 'ext' : ''}">${badgesOf(n).length ? badgesOf(n).map(b => esc(b.text.toUpperCase())).join(' · ') : pub ? 'PUBLIC' : ext ? 'EXTERNAL' : 'INTERNAL'}</span>${by}${n.origin ? `<span class="origin">${esc(n.origin)}</span>` : ''}</small></div>
+        <div class="acts">${V[child] || later ? `<button class="obtn" data-open="${esc(nid)}" style="--c:${c}">⤢ Open ${esc(shortT(V[child] ? V[child].title || child : child))} <span>${V[child] || count ? count + ' nodes · ' : ''}Enter</span></button>` : ''}${!X().editable && (unfoldable(nid, cur) || later) ? `<button class="obtn" data-unfold="${esc(nid)}" style="--c:${c}">⤡ Unfold here <span>E</span></button>` : ''}${litButtons()}<button class="ibtn x" data-close title="Close (Esc)" aria-label="Close details">×</button></div>
+      </div>
+      <div class="ptabs"><div class="ptablist" role="tablist" aria-label="Details">${tabs.map(t => `<button class="ptab" role="tab" id="pt-${t[0]}" data-tab="${t[0]}" aria-selected="${t[0] === tab}" aria-controls="m-pbody">${t[1]}${t[2] != null ? `<em>${t[2]}</em>` : ''}</button>`).join('')}</div>
+        <span class="pnav"><button class="ibtn sm" data-step="-1" title="Previous ([)" aria-label="Previous tab">‹</button><button class="ibtn sm" data-step="1" title="Next (])" aria-label="Next tab">›</button></span></div>
+      <div class="pbody" id="m-pbody" role="tabpanel" aria-labelledby="pt-${tab}">${bodies[tab]}</div>`;
+    panel.hidden = false;
+    panel.dataset.node = nid;
+    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 = 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>`;
+    lbBack = from; lb.hidden = false; lb.querySelector('[data-lbclose]').focus();
+  }
+  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 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().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;
+    const refs = reach(X().ctx().D, X().view(), sel, { backward: back }), n = refs.filter(r => r.type === 'node').length - 1, s = cardName(sel);
+    light((back ? 'in ' : 'out ') + sel, n ? refs : [], !n ? (back ? `Nothing leads to ${s} here` : `${s} leads nowhere here`)
+      : back ? `${nCards(n)} ${n === 1 ? 'leads' : 'lead'} to ${s}: lit on the map` : `${s} leads to ${nCards(n)}: lit on the map`);
+  }
+  function lightPaths() {
+    const [a, b] = picked.slice(-2); if (!b) return;
+    const D = X().ctx().D, cur = X().view();
+    let refs = paths(D, cur, a, b), [x, y] = [a, b];
+    if (!refs.length) { refs = paths(D, cur, b, a); [x, y] = [b, a]; } // the two cards in either order
+    const n = refs.filter(r => r.type === 'node').length;
+    light(`paths ${a} ${b}`, refs, n ? `Every path from ${cardName(x)} to ${cardName(y)}: ${nCards(n)}, lit on the map` : `No path joins ${cardName(a)} and ${cardName(b)} here`);
+  }
+  function lightCritical(by) { // the slowest or costliest path from the selected card, or between the two selected, its total on its last card (#95)
+    if (!sel) return;
+    const D = X().ctx().D, cur = X().view(), [a, b] = picked.length > 1 ? picked.slice(-2) : [sel], run = (from, to) => critical(D, cur, { from, to, by });
+    let r = run(a, b); if (b && !r.refs.length) r = run(b, a); // the two cards in either order
+    const cs = r.refs.filter(x => x.type === 'node').map(x => x.id), sum = by === 'latency' ? msText(r.total) : `cost ${r.total}`, word = BY[by][1];
+    light(`${by} ${a} ${b || ''}`, r.refs, !cs.length ? (b ? `No path joins ${cardName(a)} and ${cardName(b)} here` : `${cardName(a)} leads nowhere here`)
+      : `The ${word} path: ${cs.map(cardName).join(' → ')}, ${sum}`, cs.length ? { nodes: { [cs[cs.length - 1]]: { badge: { text: sum, tone: 'amber' } } } } : null);
+  }
+  function lightDown() { // what if the selected card goes down (#95): what loses its way to it
+    if (!sel) return;
+    const r = whatIf(X().ctx().D, X().view(), { remove: [sel] }), n = r.unreachable.filter(x => x.type === 'node').length - 1;
+    light('down ' + sel, r.unreachable, `If ${cardName(sel)} goes down: ${n ? `${nCards(n)} lose${n === 1 ? 's its' : ' their'} way to it` : 'nothing here leads to it'}`,
+      { nodes: { [sel]: { tone: 'rose', badge: { text: 'down', tone: 'rose' } } } });
+  }
+  // a card: selected here, or shown in the view that has it, nearest this one first
+  const find = nid => { const { viewsWith, chain } = X().ctx(), cur = X().view(); if (X().geo().byId[nid]) return X().select({ type: 'node', id: nid });
+    const vs = viewsWith(nid), v = vs.find(x => chain(x.id).includes(cur)) || vs[0]; if (v) X().go(v.id, { select: nid }); };
+
+  if (el.legend) el.legend.addEventListener('click', e => { if (!e.target.closest('#m-lfold')) return;
+    folded = !folded; keep('visual-legend', folded ? '0' : '1'); legend(); if (!X().cam().touched) X().cam().set(X().startView()); });
+  if (el.tree) el.tree.addEventListener('click', e => { const b = e.target.closest('[data-v]'); if (!b) return; if (innerWidth <= 820) setTree(false); X().go(b.dataset.v); });
+  if (el.panel) el.panel.addEventListener('click', e => {
+    const t = e.target;
+    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, 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
+    const ub = t.closest('[data-unfold]'); if (ub) return X().unfold(ub.dataset.unfold); // in place (#71), the expand event first
+    const pv = t.closest('.pview'); if (pv) return X().go(pv.dataset.v, { select: pv.dataset.sel });
+    const rn = t.closest('[data-n]'); if (rn) return find(rn.dataset.n);
+    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 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);
+      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(); }
+    },
+    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 (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();
+      else return false;
+      return true;
+    },
+  };
+}