umlimator 0.12.1 → 0.13.0

package/lib/umlimator.js

@@ -202,6 +202,139 @@ const STYLES = `
   .um-story button { min-width: 30px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--um-text); font: 600 13px var(--um-mono); cursor: pointer; padding: 0 7px; }
   .um-story button:hover:not(:disabled) { background: var(--um-panel-2); color: var(--um-accent); } .um-story button:disabled { opacity: .35; cursor: default; }
   @media (max-width: 820px) { .um-story { left: 12px; right: 12px; bottom: 60px; max-width: none; } }
+  /* 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,
@@ -307,33 +440,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 +489,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 +501,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;
 }
 
@@ -524,9 +663,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 +835,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;
@@ -792,6 +935,9 @@ 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]; }
     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 +981,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])); }
       }
@@ -943,8 +1090,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
@@ -974,11 +1123,11 @@ 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;
+        const now = routeOne(a) && 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; });
@@ -1337,6 +1486,9 @@ 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; };
 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 +1524,7 @@ 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);
       // 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 +1811,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 +1826,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 +1842,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 +1865,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 +2028,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 +2064,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
@@ -2066,6 +2237,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 +2251,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 +2279,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 +2299,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 +2348,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
@@ -2375,20 +2568,27 @@ export function render(container, model, options = {}) {
   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()}</div>` : '') + '</div>'
+          + (options.details ? '<aside class="panel" aria-label="Node details" hidden></aside>' : '') + '</div>'
+          + (options.nav ? '<button class="ibtn um-navbtn" title="Views (O)" aria-label="Toggle the views list" aria-expanded="false">☰</button><aside class="outline" aria-label="Views"></aside>' : '') + '</div>'}`;
   const stage = root.querySelector('.stage'), q = s => root.querySelector(s);
+  const tell = q('.hint') && hinter(q('.hint'), hintHTML()); // the hint line says what just happened, for a while
   const subs = {};
   const emit = (type, e) => { const f = (options.on || {})[type]; if (f) f(e); (subs[type] || []).slice().forEach(fn => fn(e)); };
   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 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;
@@ -2420,7 +2620,7 @@ export function render(container, model, options = {}) {
       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: 'zoom', maxFit: 1.15, max: 4, mapDepth: 0.3, onChange: onCam, skip: e => !!((can('move') || can('reorder') || can('add')) && e.target.closest && e.target.closest('.node, .um-handle')), inset: () => clearOf([].concat(P.inset ? P.inset() : fitIn())) });
     cam.setSvg(svg, geo.bounds);
     const ub = q('[data-z="up"]'); if (ub) ub.disabled = !upOf();
     if (options.minimap) buildMini();
@@ -2428,9 +2628,14 @@ export function render(container, model, options = {}) {
     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)
+    endTrip(); relens(); drawMarks(); // a new picture: a tour or replay on the old one ends; the host's marks and the lens go on again (#63, #94)
+    if (pc) pc.chrome();
     if (P.onMount) P.onMount(inner);
   }
+  // 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 +2643,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;
@@ -2906,7 +3111,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); 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;
@@ -2977,7 +3183,7 @@ export function render(container, model, options = {}) {
       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
+    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());
@@ -3072,6 +3278,24 @@ export function render(container, model, options = {}) {
       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);
   }
+  /* 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) { lensId = null; layers.delete('lens'); return; } // off, or the model no longer has it
+    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;
+    lensId = id ?? null; relens(); drawMarks();
+    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;
@@ -3118,9 +3342,7 @@ export function render(container, model, options = {}) {
   function replay(spans, o = {}) {
     endTrip(); overlay('replay', null);
     const list = [].concat(spans || []).filter(s => s && Number.isFinite(+s.start) && Number.isFinite(+s.end));
-    const byId = new Map(list.map(s => [String(s.id), s])), match = o.match || {}, low = x => String(x ?? '').trim().toLowerCase();
-    const cardOf = svc => { if (svc == null || !geo) return null; if (match[svc] != null) return geo.byId[match[svc]] ? String(match[svc]) : null;
-      if (geo.byId[svc]) return String(svc); const n = geo.nodes.find(x => low(x.label) === low(svc)); return n ? n.id : null; };
+    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);
@@ -3130,7 +3352,7 @@ export function render(container, model, options = {}) {
     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 = {};
+    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; }
@@ -3242,7 +3464,18 @@ export function render(container, model, options = {}) {
   }
 
   const inner = { ctx: () => ctx, geo: () => geo, cam: () => cam, svg: () => svg, stage, host, go, open, up, flash, setFlow, pause, key, startView, standalone, play,
-    select, busy: () => busy, flowing: () => stage.classList.contains('flowing'), view: () => cur, unfold: gesture };
+    select, busy: () => busy, flowing: () => stage.classList.contains('flowing'), view: () => cur, unfold: gesture, lens: setLens,
+    highlight, overlay, focus: focusMap, editable: !!E, told: id => { const st = story && story.steps[story.at]; return !!(st && st.select === id); } }; // told: a story's step picked it
+
+  // 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);
+    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 first = () => {
     if (dead) return;
     const v0 = ctx.V[options.view] ? options.view : ctx.rootId;
@@ -3273,6 +3506,7 @@ export function render(container, model, options = {}) {
     get selected() { return picked(); },
     overlay: (name, layer) => overlay(name, layer),
     highlight: refs => highlight(refs),
+    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,34 +3606,102 @@ 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('');
 
   const app = container; app.className = 'mapapp';
@@ -3411,7 +3713,9 @@ export function mountPage(container, model, options = {}) {
       <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-pop" id="m-stories-pop" hidden>${D.stories.map(s => `<button data-story="${esc(s && s.id)}">${esc((s && (s.title || s.id)) || '')}</button>`).join('')}</div></div>` : ''}${arrOf(D.lenses).some(l => l && l.id) ? `
+      <div class="menu"><button class="ibtn txt" id="m-lenses" aria-haspopup="true" aria-expanded="false" title="Lenses: ways to look at this map">◎ Lenses</button>
+        <div class="menu-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>
@@ -3440,8 +3744,9 @@ export function mountPage(container, model, options = {}) {
   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); };
+  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 +3754,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,150 +3769,17 @@ 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 setTree = pc.setTree;
+
+  /* selection: the canvas reports, the pieces show the details panel, the page records the hash */
   const select = (nid, opts = {}) => X.select({ type: 'node', id: nid }, opts);
-  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`);
-  }
 
   /* navigation */
   function setHash(replace) {
     const p = new URLSearchParams(); p.set('view', cur); if (sel) p.set('node', sel);
     if (told) { p.set('story', told.id); p.set('step', told.step + 1); } // the story shown, at its step (#69)
+    if (lensOn) p.set('lens', lensOn); // the lens on the map (#94)
     ['theme', 'check', 'shot'].forEach(k => Q.get(k) && p.set(k, Q.get(k)));
     const h = '#' + p.toString();
     if (location.hash === h) return;
@@ -3615,35 +3787,20 @@ export function mountPage(container, model, options = {}) {
   }
   const go = (vid, how = {}) => { if (how.replace) replaceNext = true; return 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);
-  });
   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();
+    const cv = t.closest('#m-crumbs [data-v]'); if (cv) { if (innerWidth <= 820) setTree(false); return go(cv.dataset.v); }
+    const mn = t.closest('.menu'); if (!mn || !mn.contains($('m-export'))) closeExport(); if (!mn || !mn.contains($('m-stories'))) closeStories(); if (!mn || !mn.contains($('m-lenses'))) closeLenses();
     if (!t.closest('#m-helpbox, #m-help')) closeHelp();
   });
   $('m-outline').addEventListener('click', () => setTree(!document.body.classList.contains('tree-open')));
@@ -3656,12 +3813,25 @@ export function mountPage(container, model, options = {}) {
 
   /* 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); });
   }
+  /* lenses (#94): the Lenses menu puts one on the map, its name on the menu's button and in the link (#lens=<id>) */
+  let lensOn = null;
+  const lensesPop = $('m-lenses-pop'), closeLenses = () => { if (lensesPop) { lensesPop.hidden = true; $('m-lenses').setAttribute('aria-expanded', 'false'); } };
+  function pickLens(id, fromLink) { // fromLink: the link names it already (on load, back and forward)
+    if (!X || !X.lens(id || null)) return;
+    lensOn = id || null;
+    const L = arrOf(D.lenses).find(x => x && x.id === lensOn), name = L ? L.title || L.id : '';
+    if (lensesPop) { lensesPop.querySelectorAll('[data-lens]').forEach(b => b.setAttribute('aria-pressed', b.dataset.lens === (lensOn || ''))); $('m-lenses').textContent = '◎ ' + (name || 'Lenses'); }
+    if (!fromLink) { status(name ? 'Lens: ' + name : 'No lens'); setHash(true); }
+  }
+  if (lensesPop) {
+    $('m-lenses').addEventListener('click', () => { const on = lensesPop.hidden; lensesPop.hidden = !on; $('m-lenses').setAttribute('aria-expanded', on); });
+    lensesPop.addEventListener('click', e => { const b = e.target.closest('[data-lens]'); if (!b) return; closeLenses(); pickLens(b.dataset.lens); });
+  }
   // a story recorded from the page: each view and card the reader comes to is a step (Add step: as the camera is now too);
   // captions are typed in, and Save writes the story's JSON, for the model's `stories`
   let rec = null;
@@ -3754,21 +3924,18 @@ export function mountPage(container, model, options = {}) {
     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);
+    if (pc.key(e)) {} // the pieces' keys: an example's lightbox, the details tabs, the views list, paths and reach
+    else if (k === 'Escape' || k === 'Backspace') {
+      if (!$('m-helpbox').hidden) closeHelp(); else if (!$('m-export-pop').hidden) closeExport(); else if (storiesPop && !storiesPop.hidden) closeStories(); else if (lensesPop && !lensesPop.hidden) closeLenses(); else if ($('m-vpop') && !$('m-vpop').hidden) togglePill(false);
       else if (!inCanvas) X.key(e); else return;
     }
     else if (k === '/') openPal();
     else if (k === '?') $('m-help').click();
     else if (k === 'i' || k === 'I') togglePill();
-    else if ((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(); });
+  addEventListener('popstate', () => { const p = new URLSearchParams(location.hash.slice(1)); if ((p.get('lens') || null) !== lensOn) pickLens(p.get('lens'), true); const v = p.get('view') || rootId; if (v !== cur) go(v, { replace: true, select: p.get('node') || undefined }); else if (p.get('node')) select(p.get('node')); else if (sel) deselect(); });
 
   /* export: resolve CSS variables into attributes so the file stands alone */
   const standalone = scale => X.standalone(scale);
@@ -3797,17 +3964,17 @@ export function mountPage(container, model, options = {}) {
     view: v0, minimap: true, flow: flowPref ? flowPref === '1' : undefined,
     on: { story: ({ story: id, step }) => { told = step == null ? null : { id, step }; app.classList.toggle('story', !!told); if (X) setHash(true); } }, // from the first draw: a link may open a story (#69)
     _page: {
-      instant: options.instant, defer: !INSTANT, tour: !Q.get('still'), openHint: !Q.get('reader'), kinds: true, status, tourAt: Q.get('shot') ? Q.get('at') : null,
+      instant: options.instant, defer: !INSTANT, tour: !(Q.get('still') || Q.get('pdf')), openHint: !Q.get('reader'), kinds: true, status, tourAt: Q.get('shot') ? Q.get('at') : null,
       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: () => {
@@ -3815,11 +3982,272 @@ export function mountPage(container, model, options = {}) {
         const n0 = p0.get('node') || (Q.get('shot') && cur !== rootId ? subjectOf(V[cur]) || (V[cur].nodeIds || [])[0] : null);
         if (n0 && geo.byId[n0]) select(n0, { reveal: false });
         if (p0.get('story')) setTimeout(() => X.play(p0.get('story'), { step: (+p0.get('step') || 1) - 1, auto: false })); // a link to a story's step: shown, not played on (once the page listens)
+        if (p0.get('lens')) pickLens(p0.get('lens'), true); // a link's lens (#94)
         setHash(true);
       },
     },
   });
-  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(); });
+  handle.on('select', ({ target, targets }) => { sel = target && target.type === 'node' ? target.id : null; pc.select(target, targets); setHash(true); recordSoon(); });
+  handle.on('viewchange', () => { pc.unlight(); setHash(replaceNext); replaceNext = false; recordSoon(); });
+  /* #pdf=1[&views=a,pic-*] (umlimator.py pdf, #93): the page becomes a document for Chrome to print, A4 across. A title
+     page; each view on a page of its own, its picture (toSVG()'s, in vectors) as large as its describe() text below leaves
+     room for; then the legend of what the pictures draw, and the model's rules, each holding or broken in the views
+     printed, as the document says. It starts once the fonts are in, after the map's own redraw for them. */
+  if (Q.get('pdf')) (document.fonts ? document.fonts.ready : Promise.resolve()).then(() => {
+    const only = (Q.get('views') || '').split(',').filter(Boolean), want = v => !only.length || only.some(p => p.endsWith('*') ? v.id.startsWith(p.slice(0, -1)) : v.id === p);
+    const shown = views.filter(want).map(v => [v, X.standalone(1, v.id)]).filter(([, s]) => s), p = s => `<p>${esc(s)}</p>`;
+    const broken = rules(model).filter(b => shown.some(([v]) => v.id === b.view)); // the views printed, as the document says
+    const rs = (Array.isArray(model.rules) ? model.rules : []).filter(r => r && typeof r === 'object' && (r.from || r.to || r.noCycles)); // as rules() reads them
+    const W = 1030, H = 690; // ponytail: A4 landscape inside 12 mm margins, in CSS px; a paper option if Letter or portrait is wanted
+    document.title = model.title || 'Map'; document.body.removeAttribute('class');
+    document.body.innerHTML = `<style>@page { size: A4 landscape; margin: 12mm; background: var(--um-bg); } html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background-image: none; }
+      #um-pdf { width: ${W}px; font-size: 13px; line-height: 1.45; } #um-pdf section { padding: 0; } #um-pdf section + section { break-before: page; }
+      #um-pdf h1 { font-size: 34px; margin: 230px 0 6px; } #um-pdf h2 { display: block; font: 600 19px/1.3 var(--um-sans); letter-spacing: 0; text-transform: none; color: var(--um-text); margin: 0 0 8px; }
+      #um-pdf h2::after { content: none; } #um-pdf h2 ~ h2 { margin-top: 26px; } #um-pdf p { margin: 0 0 3px; } #um-pdf svg { display: block; margin: 0 0 10px; }
+      #um-pdf .pdf-text { columns: 2; column-gap: 32px; font-size: 12px; } #um-pdf .pdf-text p { break-inside: avoid; } #um-pdf ul { margin: 0; padding-left: 20px; }
+      #um-pdf .pdf-legend { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px 28px; font-size: 12px; } .pdf-holds { color: var(--um-green); } .pdf-broken { color: var(--um-rose); }</style>
+      <main id="um-pdf"><section><h1>${esc(model.title || 'Map')}</h1>${p(new Date(Date.now() - new Date().getTimezoneOffset() * 6e4).toISOString().slice(0, 10))}</section>
+      ${shown.map(([v, svg]) => `<section class="pdf-view"><h2>${esc(v.title || v.id)}</h2>${svg}<div class="pdf-text">${describe(model, v.id).split('\n').map(p).join('')}</div></section>`).join('')}
+      <section><h2>Legend</h2><div class="pdf-legend">${legendItems(shown.map(([v]) => X.ctx().geoCache[v.id].g)).join('')}</div>
+        <h2>Rules</h2>${rs.length ? `${p('Judged in the views printed here.')}<ul>${rs.map(r => { const b = broken.filter(x => x.rule === r.id);
+          return `<li>${esc(r.title || r.id)}: <b class="${b.length ? 'pdf-broken' : 'pdf-holds'}">${b.length ? 'broken' : 'holds'}</b>${b.length ? `<ul>${b.map(x => `<li>${esc(x.message)}</li>`).join('')}</ul>` : ''}</li>`; }).join('')}</ul>` : p('The model has no rules.')}</section></main>`;
+    document.querySelectorAll('#um-pdf .pdf-view svg').forEach(svg => { const b = svg.viewBox.baseVal, room = H - (svg.parentNode.offsetHeight - svg.getBoundingClientRect().height);
+      const k = Math.min(1, W / b.width, Math.max(240, room) / b.height); svg.setAttribute('width', b.width * k); svg.setAttribute('height', b.height * k); });
+  });
   return handle;
 }
+
+/* ================= 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 => typeof matchMedia === 'function' && matchMedia('(hover: none)').matches ? '<span>pinch = zoom</span><span>drag = move</span><span>tap = details</span>'
+  : `<span>scroll = zoom</span><span>drag = move</span><span>double-click ⤢ = open</span>${keys ? `<span>${keys} = search</span><span>? = keys</span>` : ''}`; // keys: the page's search key
+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) { // what these pictures draw, each with what it means: the view's legend, and the PDF's (#93)
+  const ns = gs.flatMap(g => g.nodes), es = gs.flatMap(g => g.edges), used = [...new Set(ns.map(n => n.k))];
+  const order = ['m-public', 'm-step', 'm-lane', 'm-ext', 'm-verb', 'm-board', 'm-hook', 'm-script', 'frontend', 'backend', 'ai', 'queue', 'database', 'security', 'cloud', 'external', 'file'];
+  const shape = k => k === 'm-verb' ? 'p' : (k === 'm-ext' || k === 'external') ? 'd' : k === 'm-hook' ? 'h' : '';
+  return order.filter(k => used.includes(k)).map(k => `<span class="lgi" title="${esc(KIND[k][1] + ' — ' + KIND[k][2])}"><i class="${shape(k)}" style="border-color:var(--um-${KIND[k][0]});background:var(--um-${KIND[k][0]}-f)${k === 'm-hook' ? `;background:var(--um-${KIND[k][0]})` : ''}"></i><b>${KIND[k][1]}</b><span>${KIND[k][2]}</span></span>`)
+    .concat(ns.some(n => n.kids || n.opens) ? ['<span class="lgi"><i class="s"></i><b>⤢ Stacked</b><span>double-click to open</span></span>'] : [])
+    .concat(ns.some(n => n.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 (_) {} };
+  let sel = null, picked = [], lit = null, lb = null, folded = kept('visual-legend') === '0', tab = kept('visual-tab') || 'when', TABS = ['when', 'what', 'how', 'links'];
+
+  /* the legend: the kinds of cards and lines the view draws, in a box that folds away */
+  function legend() {
+    const items = legendItems([X().geo()]);
+    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('')}`;
+  }
+  /* 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]);
+    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>`,
+    };
+    const was = !o.page && focused(), on = was && [...was.attributes].find(a => a.name.startsWith('data-')); // a host's panel keeps focus on the control it was on
+    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 = !o.page && focused(); el.panel.hidden = true; if (back) queueMicrotask(() => { if (el.panel.hidden) X().focus(); }); } // a host's panel gives focus back to the map
+  function openExample(nid, i) {
+    const x = ((X().ctx().nodeIn(nid, X().view()) || {}).examples || [])[i]; if (!x) return;
+    if (!lb) { lb = h(`<div class="lightbox" id="m-lightbox" role="dialog" aria-modal="true" aria-label="Example" hidden></div>`); o.layer.appendChild(lb);
+      lb.addEventListener('click', e => { if (e.target === lb || e.target.closest('[data-lbclose]')) closeExample(); }); }
+    lb.innerHTML = `<figure><img src="${esc(x.full || x.thumb)}" alt="${esc(x.title || '')}"><figcaption><span>${inline(x.title || '')}</span>${x.href ? `<a href="${esc(x.href)}" target="_blank" rel="noopener">Open live page ↗</a>` : ''}<button class="ibtn" data-lbclose title="Close (Esc)" aria-label="Close">×</button></figcaption></figure>`;
+    lb.hidden = false; lb.querySelector('[data-lbclose]').focus();
+  }
+  const closeExample = () => { if (lb) lb.hidden = true; };
+  const setTab = t => { tab = t; keep('visual-tab', t); if (sel) show(sel); };
+
+  /* paths and reach (#64): lit on the map from the details panel or by key, and said in the hint line (a live region); a
+     new selection or view clears them, and the same key again does */
+  const cardName = id => X().ctx().nodeIn(id, X().view()).label || id, nCards = n => `${n} card${n === 1 ? '' : 's'}`;
+  // the slowest and the costliest path (#95), offered where the view's lines have latency or cost
+  const BY = { latency: ['⏱', 'slowest'], cost: ['¤', 'costliest'] }, budgets = () => Object.keys(BY).filter(k => X().ctx().viewEdges(X().ctx().V[X().view()]).some(e => typeof e[k] === 'number'));
+  const litButtons = () => '<button class="ibtn" data-lit="out" title="Light what it leads to (&gt;)" aria-label="Light what it leads to">→</button><button class="ibtn" data-lit="in" title="Light what leads to it (&lt;)" aria-label="Light what leads to it">←</button>'
+    + (picked.length > 1 ? '<button class="ibtn" data-lit="paths" title="Light every path between the two cards (P)" aria-label="Light every path between the two selected cards">⇄</button>' : '')
+    + budgets().map(k => { const t = `Light the ${BY[k][1]} path ${picked.length > 1 ? 'between the two cards' : 'from this card'}`; return `<button class="ibtn" data-lit="${k}" title="${t}" aria-label="${t}">${BY[k][0]}</button>`; }).join('')
+    + '<button class="ibtn" data-lit="down" title="What if this goes down?" aria-label="What if this goes down?">⊘</button>';
+  function unlight() { if (lit) { lit = null; X().highlight(null); X().overlay('lit', null); } }
+  function light(key, refs, said, marks = null) { // marks: a layer that goes with the highlight (a path's total, the card that is down)
+    if (lit === key) { unlight(); return o.status('Highlight cleared'); }
+    lit = key; X().highlight(refs.length ? refs : null); X().overlay('lit', marks); o.status(said, 3600);
+  }
+  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);
+    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));
+  });
+
+  return {
+    chrome() { if (el.legend) legend(); if (el.tree) tree(); if (sel && el.panel && !el.panel.hidden) show(sel); }, // each picture of the map
+    select(target, targets) { // the map's select event: the selected card's details, unless a story's step picked it (a pointer)
+      sel = target && target.type === 'node' ? target.id : null; picked = (targets || []).filter(t => t.type === 'node').map(t => t.id);
+      unlight(); if (el.panel) { if (sel && !X().told(sel)) show(sel); else hide(); }
+    },
+    unlight, find, setTree,
+    key(e) { // the pieces' keys: true when one was used
+      const k = e.key;
+      if ((k === 'Escape' || k === 'Backspace') && lb && !lb.hidden) closeExample();
+      else if ((k === '[' || k === ']') && sel && el.panel) setTab(TABS[(TABS.indexOf(tab) + (k === ']' ? 1 : -1) + TABS.length) % TABS.length]);
+      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;
+    },
+  };
+}