@rasensio/aidlc 1.77.0 → 1.79.0

package/dist/roadmap/view-assets.js

@@ -11,84 +11,136 @@
  * plain ES2020 without template literals so `String.raw` can hold it unescaped; a test
  * fails it if it grows past 16 KB or ever contains `</script`.
  *
+ * roadmap-view-revamp added the tabs, per-tab filters kept in the URL hash, the theme,
+ * shortcuts and copy buttons. Visibility is still CSS: the script sets classes and
+ * attributes, the stylesheet hides. Every colour is a token on `:root` and
+ * `:root[data-theme="dark"]`, which the contrast test reads (roadmap-view-revamp/AC-24).
+ *
  * @module
  */
 export const VIEW_STYLE = String.raw `
-:root { color-scheme: light; --ink: #111827; --muted: #374151; --line: #d1d5db; --focus: #1d4ed8; --link: #1e40af; }
+:root { color-scheme: light; --bg: #ffffff; --bg-2: #f6f7f9; --card: #ffffff; --ink: #1b1d22; --muted: #5b616e; --line: #e1e4e8; --line-2: #c4c9d1;
+  --link: #3e4ab8; --accent-ink: #3e4ab8; --chip-on: #e8eafb; --focus: #5e6ad2; --unmet: #c9252d; --shade: rgba(15, 17, 20, .12);
+  --st-inbox: #6b7280; --st-backlog: #6b7280; --st-in-progress: #b06d0b; --st-done: #5e6ad2; --st-hold: #6b7280;
+  --ready-bg: #e2f4e7; --ready-ink: #17643a; --blocked-bg: #fde7e7; --blocked-ink: #ae1f28; }
+:root[data-theme="dark"] { color-scheme: dark; --bg: #101113; --bg-2: #16171a; --card: #1c1d21; --ink: #e8e9ec; --muted: #a0a5ae; --line: #2c2e34; --line-2: #464a53;
+  --link: #a9b0f6; --accent-ink: #a9b0f6; --chip-on: #2b2e4c; --focus: #8f98f4; --unmet: #ff6b6b; --shade: rgba(0, 0, 0, .5);
+  --st-inbox: #9aa0aa; --st-backlog: #9aa0aa; --st-in-progress: #e3a33b; --st-done: #8f98f4; --st-hold: #9aa0aa;
+  --ready-bg: #12301f; --ready-ink: #74dc9e; --blocked-bg: #3b1719; --blocked-ink: #ff9d9d; }
 * { box-sizing: border-box; }
-body { margin: 0; color: var(--ink); background: #fff; font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+body { margin: 0; color: var(--ink); background: var(--bg); font: .875rem/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
 [hidden] { display: none !important; }
 a { color: var(--link); }
-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
-:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
-button { font: inherit; color: var(--ink); background: #fff; border: 1px solid #6b7280; border-radius: .35rem; padding: .35rem .8rem; min-height: 2.75rem; cursor: pointer; }
-header.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
-h1 { margin: 0; font-size: 1.5rem; }
-h2 { font-size: 1.2rem; margin: 1.25rem 1.5rem .75rem; }
-.generated, .search, .search-status { margin: 0; color: var(--muted); }
-.search input { font: inherit; padding: .35rem .6rem; min-height: 2.75rem; min-width: 18rem; border: 1px solid #6b7280; border-radius: .35rem; }
-.board { display: grid; grid-template-columns: repeat(5, minmax(15rem, 1fr)); gap: 1rem; padding: 0 1.5rem; overflow-x: auto; align-items: start; }
-.col { background: #f9fafb; border: 1px solid var(--line); border-radius: .5rem; padding: .5rem; }
-.col h3 { display: flex; justify-content: space-between; margin: .25rem .25rem .5rem; font-size: 1rem; }
-.count { font-weight: 400; color: var(--muted); }
-.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
-.card { border: 1px solid; border-left-width: .35rem; border-radius: .4rem; padding: .5rem .6rem; cursor: pointer; }
-.card p { margin: .25rem 0 0; }
-.card .open { border: 0; background: none; padding: 0; min-height: 0; text-align: left; font-weight: 600; line-height: 1.35; }
-.rank { font-weight: 700; }
-.badge { display: inline-block; margin-right: .35rem; padding: 0 .45rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
-.badge.ready { background: #065f46; color: #fff; }
-.badge.blocked { background: #991b1b; color: #fff; }
-.age, .links, .hold { font-size: .85rem; }
-.age { color: var(--muted); }
+code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }
+kbd { padding: 0 .3rem; border: 1px solid var(--line-2); border-radius: .25rem; background: var(--bg-2); }
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+button { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: .375rem; padding: .2rem .6rem; min-height: 1.75rem; min-width: 1.75rem; cursor: pointer; }
+button:hover { border-color: var(--line-2); }
+button[aria-pressed="true"] { background: var(--chip-on); border-color: var(--focus); }
+@media (pointer: coarse) { button, .search input { min-height: 2.75rem; min-width: 2.75rem; } }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+header.top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); }
+h1 { margin: 0; font-size: 1rem; font-weight: 600; }
+.generated, .search, .search-status, .keys { margin: 0; color: var(--muted); }
+.search input { font: inherit; color: var(--ink); background: var(--bg); padding: .2rem .6rem; min-height: 1.75rem; min-width: 16rem; border: 1px solid var(--line-2); border-radius: .375rem; }
+#theme { margin-left: auto; }
+.tabs { display: flex; gap: .25rem; padding: 0 1.5rem; border-bottom: 1px solid var(--line); }
+.tabs [role="tab"] { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: .5rem .75rem; color: var(--muted); font-weight: 500; }
+.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--focus); }
+.n { color: var(--muted); font-weight: 400; margin-left: .25rem; }
+.view { padding: .75rem 1.5rem 0; }
+.filters { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: .75rem; }
+.group { display: flex; flex-wrap: wrap; gap: .25rem; }
+.chip, .preset, .only, #open-chains { border-radius: 999px; font-size: .8125rem; }
+.ring { display: inline-block; position: relative; width: .75rem; height: .75rem; margin-right: .4rem; vertical-align: -.1rem; border: 1.5px solid var(--rc); border-radius: 50%; flex: none; }
+.r-inbox { --rc: var(--st-inbox); border-style: dashed; }
+.r-backlog { --rc: var(--st-backlog); }
+.r-in-progress { --rc: var(--st-in-progress); background: linear-gradient(90deg, var(--rc) 50%, transparent 50%); }
+.r-done { --rc: var(--st-done); background: var(--rc); }
+.r-done::after { content: ""; position: absolute; left: .19rem; top: .06rem; width: .15rem; height: .3rem; border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
+.r-hold { --rc: var(--st-hold); }
+.r-hold::after { content: ""; position: absolute; left: .15rem; right: .15rem; top: calc(50% - .75px); height: 1.5px; background: var(--rc); }
+.board { display: flex; gap: .75rem; overflow-x: auto; align-items: flex-start; padding-bottom: 1rem; }
+.col { flex: 1 1 16rem; min-width: 16rem; }
+.col > .rail, .col.off > .body { display: none; }
+.col.off { flex: 0 0 2.75rem; min-width: 2.75rem; }
+.col.off > .rail { display: flex; align-items: center; gap: .4rem; width: 2.75rem; min-height: 14rem; padding: .6rem 0; writing-mode: vertical-rl; background: var(--bg-2); color: var(--muted); }
+.col h3 { display: flex; align-items: center; margin: 0 0 .5rem; padding: .25rem .25rem; font-size: .8125rem; font-weight: 600; }
+.count { font-weight: 400; color: var(--muted); margin-left: .4rem; }
+.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
+.card { background: var(--card); border: 1px solid var(--line); border-radius: .375rem; padding: .5rem .625rem; cursor: pointer; }
+.card:hover { border-color: var(--line-2); box-shadow: 0 1px 2px var(--shade); }
+.card p { margin: .2rem 0 0; }
+.card .title { display: flex; align-items: baseline; margin: 0; }
+.card .open { border: 0; background: none; padding: 0; min-height: 0; text-align: left; font-weight: 500; line-height: 1.4; }
+.rank { color: var(--muted); font-weight: 600; }
+.badge { display: inline-block; margin-right: .35rem; padding: 0 .45rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
+.badge.ready { background: var(--ready-bg); color: var(--ready-ink); }
+.badge.blocked { background: var(--blocked-bg); color: var(--blocked-ink); }
+.age, .links, .hold { font-size: .75rem; }
+.age, .hold { color: var(--muted); }
 .board:not(.searching) .col:not(.expanded) .capped { display: none; }
-.show-all { margin: .5rem .25rem .25rem; }
-.s-inbox { background: #eef2ff; border-color: #6366f1; }
-.s-backlog { background: #fef9c3; border-color: #ca8a04; }
-.s-in-progress { background: #dbeafe; border-color: #2563eb; }
-.s-done { background: #dcfce7; border-color: #16a34a; }
-.s-hold { background: #f3f4f6; border-color: #6b7280; }
-.map-controls, .legend, .empty { margin: 0 1.5rem .75rem; }
-.map-controls button { margin-right: .5rem; }
-.sw { display: inline-block; width: .9rem; height: .9rem; margin: 0 .3rem 0 .9rem; border: 1.5px solid; border-radius: .2rem; vertical-align: -.1rem; }
-.sw.missing { background: #fee2e2; border-color: #dc2626; border-style: dashed; }
-.map-wrap { padding: 0 1.5rem; }
-#map { display: block; width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: .5rem; background: #fff; touch-action: none; cursor: grab; }
-#map text { fill: var(--ink); font-size: 13px; }
-#map .sub { fill: var(--muted); font-size: 11px; }
+.show-all { margin: .5rem 0; }
+.map-controls, .legend, .empty { margin: 0 0 .5rem; }
+.legend { color: var(--muted); font-size: .8125rem; }
+#map { display: block; width: 100%; height: calc(100vh - 12.5rem); min-height: 24rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--bg-2); touch-action: none; cursor: grab; }
+#map text { fill: var(--ink); font-size: 14px; }
+#map .sub, #map .clabel { fill: var(--muted); font-size: 12px; }
 #map .node { cursor: pointer; }
-#map .node rect { stroke-width: 1.5; }
+#map .node rect { fill: var(--card); stroke: var(--line-2); stroke-width: 1.5; }
 #map .node:focus { outline: none; }
 #map .node:focus-visible rect, #map .toggle:focus-visible circle { stroke: var(--focus); stroke-width: 3; }
-#map .s-inbox rect { fill: #eef2ff; stroke: #6366f1; }
-#map .s-backlog rect { fill: #fef9c3; stroke: #ca8a04; }
-#map .s-in-progress rect { fill: #dbeafe; stroke: #2563eb; }
-#map .s-done rect { fill: #dcfce7; stroke: #16a34a; }
-#map .s-hold rect { fill: #f3f4f6; stroke: #6b7280; }
-#map .missing rect { fill: #fee2e2; stroke: #dc2626; stroke-dasharray: 6 3; }
-#map .edge { fill: none; stroke: #6b7280; stroke-width: 1.5; }
-#map .edge.dashed { stroke-dasharray: 6 4; }
+#map .s-inbox rect { stroke: var(--st-inbox); stroke-dasharray: 4 3; }
+#map .s-in-progress rect { stroke: var(--st-in-progress); }
+#map .s-done rect { stroke: var(--st-done); }
+#map .missing rect { fill: var(--blocked-bg); stroke: var(--unmet); stroke-dasharray: 6 3; }
+#map .edge { fill: none; stroke: var(--st-hold); stroke-width: 1.5; }
+#map .edge.further { stroke-dasharray: 2 4; }
+#map .edge.unmet { stroke: var(--unmet); stroke-dasharray: 6 4; }
 #map .toggle { cursor: pointer; }
-#map .toggle circle { fill: #fff; stroke: #374151; stroke-width: 1.5; }
+#map .toggle circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.5; }
 #map .toggle text { text-anchor: middle; font-weight: 700; font-size: 15px; }
 #map .off { display: none; }
-#map.focus .node:not(.hl) { opacity: .3; }
-#map.focus .edge:not(.hl) { opacity: .15; }
+#map .dim { opacity: .25; }
+#map.focus .node:not(.hl) { opacity: .25; }
+#map.focus .edge:not(.hl) { opacity: .12; }
 #map .node.hl rect { stroke-width: 3; }
-#map .edge.hl { stroke: var(--focus); stroke-width: 2.5; }
-.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 100%); overflow-y: auto; padding: 1rem 1.25rem; background: #fff; border-left: 1px solid var(--line); box-shadow: -4px 0 16px rgba(0, 0, 0, .15); }
-.panel h2 { margin: .25rem 3rem .5rem 0; font-size: 1.15rem; }
-.panel h3 { margin: 1rem 0 .35rem; font-size: 1rem; }
+#map .edge.hl { stroke-width: 2.5; opacity: 1; }
+.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 100%); overflow-y: auto; padding: 1rem 1.25rem; color: var(--ink); background: var(--bg); border-left: 1px solid var(--line); box-shadow: -4px 0 16px var(--shade); }
+.panel h2 { margin: .25rem 3rem .5rem 0; font-size: 1rem; font-weight: 600; }
+.panel h3 { margin: 1rem 0 .35rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
+.panel .meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; color: var(--muted); }
 .panel .close { float: right; }
-footer { margin-top: 2rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
+.cmds { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
+.cmds li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
+.cmd-label { flex-basis: 100%; color: var(--muted); font-size: .75rem; }
+.cmds code { flex: 1; padding: .2rem .45rem; border-radius: .25rem; background: var(--bg-2); overflow-wrap: anywhere; }
+.keys { padding: 1rem 1.5rem 0; font-size: .75rem; }
+footer { margin-top: 1rem; padding: .75rem 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
 `;
 export const VIEW_SCRIPT = String.raw `
 (function () {
   'use strict';
   var doc = document;
-  function one(sel, root) { return (root || doc).querySelector(sel); }
-  function all(sel, root) { return Array.prototype.slice.call((root || doc).querySelectorAll(sel)); }
+  var root = doc.documentElement;
+  function one(sel, r) { return (r || doc).querySelector(sel); }
+  function all(sel, r) { return Array.prototype.slice.call((r || doc).querySelectorAll(sel)); }
   function refs(el, name) { var v = el ? el.getAttribute(name) : ''; return v ? v.split(' ') : []; }
+  function attr(el, name, v) { el.setAttribute(name, String(v)); }
+
+  // The theme lives in the browser, so regenerating the page keeps it; storage may throw.
+  var KEY = 'aidlc-roadmap-theme';
+  var themeBtn = one('#theme');
+  function setTheme(dark) {
+    if (dark) root.setAttribute('data-theme', 'dark'); else root.removeAttribute('data-theme');
+    attr(themeBtn, 'aria-pressed', dark);
+  }
+  try { setTheme(localStorage.getItem(KEY) === 'dark'); } catch (e) { setTheme(false); }
+  themeBtn.addEventListener('click', function () {
+    var dark = root.getAttribute('data-theme') !== 'dark';
+    setTheme(dark);
+    try { localStorage.setItem(KEY, dark ? 'dark' : 'light'); } catch (e) { /* this visit only */ }
+  });
 
   // Ages are worked out here, not by the generator, so the file's bytes do not change from
   // one day to the next.
@@ -102,21 +154,135 @@ export const VIEW_SCRIPT = String.raw `
     t.setAttribute('title', 'created ' + t.getAttribute('datetime'));
   });
 
-  var board = one('.board');
+  // View state. Each tab keeps its own filters; all of it round-trips through the hash.
+  var ALL = ['inbox', 'backlog', 'in-progress', 'done', 'hold'];
+  var ONLY = ['ready', 'blocked'];
+  var S = { tab: 'board', open: true, board: { s: ALL.slice(0, 3), o: [] }, deps: { s: ALL.slice(), o: [] } };
+  function listOf(v, known) {
+    if (v === '') return [];
+    var out = v.split('.');
+    for (var i = 0; i < out.length; i++) if (known.indexOf(out[i]) < 0) return null;
+    return out;
+  }
+  // The hash is untrusted: it is only ever compared against the constants above.
+  function readHash() {
+    location.hash.replace(/^#/, '').split('&').forEach(function (part) {
+      var at = part.indexOf('=');
+      if (at < 0) return;
+      var k = part.slice(0, at), v = part.slice(at + 1), list;
+      if (k === 'tab' && (v === 'board' || v === 'deps')) S.tab = v;
+      else if (k === 'open' && (v === '0' || v === '1')) S.open = v === '1';
+      else if (k === 'board' || k === 'deps') { list = listOf(v, ALL); if (list) S[k].s = list; }
+      else if (k === 'board-only' || k === 'deps-only') { list = listOf(v, ONLY); if (list) S[k.slice(0, -5)].o = list; }
+    });
+  }
+  var live = false;
+  function writeHash() {
+    if (!live) return;
+    var h = 'tab=' + S.tab + '&board=' + S.board.s.join('.') + '&board-only=' + S.board.o.join('.') +
+      '&deps=' + S.deps.s.join('.') + '&deps-only=' + S.deps.o.join('.') + '&open=' + (S.open ? 1 : 0);
+    try { history.replaceState(null, '', '#' + h); } catch (e) { /* the view still works */ }
+  }
+  function toggled(list, v, order) {
+    var on = list.indexOf(v) < 0;
+    return order.filter(function (x) { return x === v ? on : list.indexOf(x) >= 0; });
+  }
+  function same(a, b) { return a.length === b.length && a.every(function (x) { return b.indexOf(x) >= 0; }); }
+
   var search = one('#q');
-  var searchStatus = one('#search-status');
-  function applySearch() {
-    var q = search.value.trim().toLowerCase();
+  var q = '';
+  function match(el, f) {
+    var st = el.getAttribute('data-status');
+    if (st !== 'missing' && f.s.indexOf(st) < 0) return false;
+    if (f.o.length && !f.o.some(function (o) { return el.classList.contains(o); })) return false;
+    return q === '' || el.getAttribute('data-search').indexOf(q) !== -1;
+  }
+
+  var tabs = all('[role="tab"]');
+  var board = one('.board');
+  var svg = one('#map');
+  var viewport = one('#viewport', svg);
+  var unlinked = one('.unlinked', svg);
+  var openBtn = one('#open-chains');
+  function place(g) {
+    if (!g) return;
+    var p = g.getAttribute(S.open ? 'data-open' : 'data-all') || g.getAttribute('data-all');
+    g.setAttribute('transform', 'translate(' + p + ')');
+  }
+  function render() {
+    tabs.forEach(function (t) {
+      var on = t.getAttribute('data-tab') === S.tab;
+      attr(t, 'aria-selected', on);
+      attr(t, 'tabindex', on ? 0 : -1);
+      doc.getElementById(t.getAttribute('aria-controls')).hidden = !on;
+    });
+    all('.filters').forEach(function (bar) {
+      var f = S[bar.getAttribute('data-for')];
+      all('.chip', bar).forEach(function (c) { attr(c, 'aria-pressed', f.s.indexOf(c.getAttribute('data-status')) >= 0); });
+      all('.only', bar).forEach(function (c) { attr(c, 'aria-pressed', f.o.indexOf(c.getAttribute('data-only')) >= 0); });
+      all('.preset', bar).forEach(function (c) { attr(c, 'aria-pressed', !f.o.length && same(refs(c, 'data-set'), f.s)); });
+    });
+    all('.col').forEach(function (c) { c.classList.toggle('off', S.board.s.indexOf(c.getAttribute('data-status')) < 0); });
+    var shown = 0, lit = 0, inDeps = 0, dim = {};
+    all('.card').forEach(function (c) { var m = match(c, S.board); c.hidden = !m; if (m) shown++; });
     board.classList.toggle('searching', q !== '');
-    var shown = 0;
-    all('.card').forEach(function (card) {
-      var match = q === '' || card.getAttribute('data-search').indexOf(q) !== -1;
-      card.hidden = !match;
-      if (match) shown++;
+    if (openBtn) attr(openBtn, 'aria-pressed', S.open);
+    all('.cluster', svg).forEach(function (c) {
+      var off = S.open && c.classList.contains('closed');
+      c.classList.toggle('off', off);
+      place(c);
+      if (!off) inDeps += +c.getAttribute('data-n');
+    });
+    place(unlinked);
+    all('.node', svg).forEach(function (n) {
+      var d = !match(n, S.deps);
+      n.classList.toggle('dim', d);
+      if (d) dim[n.getAttribute('data-ref')] = 1; else if (!n.closest('.off')) lit++;
     });
-    searchStatus.textContent = q === '' ? '' : shown === 1 ? '1 card matches' : shown + ' cards match';
+    all('.edge', svg).forEach(function (e) { e.classList.toggle('dim', !!(dim[e.getAttribute('data-from')] || dim[e.getAttribute('data-to')])); });
+    one('#n-board').textContent = shown;
+    one('#n-deps').textContent = inDeps;
+    var n = S.tab === 'board' ? shown : lit;
+    one('#search-status').textContent = q === '' ? '' : n === 1 ? '1 item matches' : n + ' items match';
+    writeHash();
   }
-  search.addEventListener('input', applySearch);
+
+  var fitted = false;
+  function selectTab(name, focus) {
+    S.tab = name;
+    render();
+    if (name === 'deps' && !fitted) { fitted = true; fit(); }
+    if (focus) doc.getElementById('tab-' + name).focus();
+  }
+  tabs.forEach(function (t) {
+    t.addEventListener('click', function () { selectTab(t.getAttribute('data-tab')); });
+    t.addEventListener('keydown', function (e) {
+      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+      e.preventDefault();
+      selectTab(S.tab === 'board' ? 'deps' : 'board', true);
+    });
+  });
+  all('.filters').forEach(function (bar) {
+    var f = S[bar.getAttribute('data-for')];
+    bar.addEventListener('click', function (e) {
+      var b = e.target.closest('button');
+      if (!b) return;
+      if (b.hasAttribute('data-status')) f.s = toggled(f.s, b.getAttribute('data-status'), ALL);
+      else if (b.hasAttribute('data-only')) f.o = toggled(f.o, b.getAttribute('data-only'), ONLY);
+      else if (b.hasAttribute('data-set')) { f.s = refs(b, 'data-set'); f.o = []; }
+      render();
+    });
+  });
+  // A rail brings its column back, so a hidden status is one click away.
+  all('.rail').forEach(function (r) {
+    r.addEventListener('click', function () {
+      var st = r.getAttribute('data-show');
+      if (S.board.s.indexOf(st) < 0) S.board.s = toggled(S.board.s, st, ALL);
+      render();
+      one('.filters[data-for="board"] .chip[data-status="' + st + '"]').focus();
+    });
+  });
+  search.addEventListener('input', function () { q = search.value.trim().toLowerCase(); render(); });
 
   all('.show-all').forEach(function (btn) {
     btn.addEventListener('click', function () {
@@ -131,11 +297,13 @@ export const VIEW_SCRIPT = String.raw `
   var panel = one('#panel');
   var panelBody = one('#panel-body');
   var closeBtn = one('#panel-close');
+  var say = one('#live');
   var opener = null;
   function openPanel(ref, from) {
     var tpl = doc.getElementById('detail-' + ref);
     if (!tpl) return;
     panelBody.replaceChildren(tpl.content.cloneNode(true));
+    say.textContent = '';
     panel.hidden = false;
     opener = from || null;
     closeBtn.focus();
@@ -151,13 +319,31 @@ export const VIEW_SCRIPT = String.raw `
   function gotoCard(ref) {
     var card = doc.getElementById('card-' + ref);
     if (!card) { openPanel(ref, null); return; }
-    if (card.hidden) { search.value = ''; applySearch(); }
+    var st = card.getAttribute('data-status');
+    if (S.board.s.indexOf(st) < 0) S.board.s = toggled(S.board.s, st, ALL);
+    if (!match(card, S.board)) { S.board.o = []; search.value = ''; q = ''; }
+    S.tab = 'board';
+    render();
     var col = card.closest('.col');
     if (card.classList.contains('capped') && !col.classList.contains('expanded')) one('.show-all', col).click();
     if (card.scrollIntoView) card.scrollIntoView({ block: 'center' });
     openPanel(ref, one('.open', card));
   }
+  // The page runs nothing: it puts the command on the clipboard, or selects it to copy by hand.
+  function copy(btn) {
+    var code = doc.getElementById(btn.getAttribute('data-code'));
+    function byHand() {
+      var sel = window.getSelection ? window.getSelection() : null;
+      if (sel) sel.selectAllChildren(code);
+      say.textContent = 'Selected — press Ctrl+C or ⌘C to copy';
+    }
+    var cb = navigator.clipboard;
+    if (!cb || !cb.writeText) { byHand(); return; }
+    cb.writeText(btn.getAttribute('data-cmd')).then(function () { say.textContent = 'Copied'; }, byHand);
+  }
   panelBody.addEventListener('click', function (e) {
+    var c = e.target.closest('.copy');
+    if (c) { copy(c); return; }
     var a = e.target.closest('a[data-goto]');
     if (!a) return;
     e.preventDefault();
@@ -170,26 +356,49 @@ export const VIEW_SCRIPT = String.raw `
     });
   });
 
-  var svg = one('#map');
-  function clearFocus() {
-    if (!svg) return;
+  var pinned = null;
+  function unlight() {
     svg.classList.remove('focus');
     all('.hl', svg).forEach(function (el) { el.classList.remove('hl'); });
   }
+  function light(node) {
+    var lit = {};
+    lit[node.getAttribute('data-ref')] = true;
+    refs(node, 'data-chain').forEach(function (r) { lit[r] = true; });
+    svg.classList.add('focus');
+    all('.node', svg).forEach(function (n) { n.classList.toggle('hl', !!lit[n.getAttribute('data-ref')]); });
+    all('.edge', svg).forEach(function (ed) { ed.classList.toggle('hl', !!lit[ed.getAttribute('data-from')] && !!lit[ed.getAttribute('data-to')]); });
+  }
+  function clearFocus() { pinned = null; unlight(); }
+  function nodeOf(e) { return e.target.closest ? e.target.closest('.node') : null; }
+  function enter(e) { var n = nodeOf(e); if (n && !pinned) light(n); }
+  function leave(e) { var n = nodeOf(e); if (n && !pinned && !(e.relatedTarget && n.contains(e.relatedTarget))) unlight(); }
+  svg.addEventListener('mouseover', enter);
+  svg.addEventListener('focusin', enter);
+  svg.addEventListener('mouseout', leave);
+  svg.addEventListener('focusout', leave);
+
   doc.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape') { closePanel(); clearFocus(); }
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    if (e.key === 'Escape') {
+      if (!panel.hidden) closePanel();
+      else if (search.value !== '') { search.value = ''; q = ''; render(); }
+      clearFocus();
+      return;
+    }
+    if (/^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName || '')) return;
+    if (e.key === '/') { e.preventDefault(); search.focus(); }
+    else if (e.key === '1' || e.key === '2') selectTab(e.key === '1' ? 'board' : 'deps', true);
   });
-  if (!svg) return;
 
-  var viewport = one('#viewport', svg);
-  var unlinked = one('.unlinked', svg);
   var k = 1, tx = 0, ty = 0;
   function r3(n) { return Math.round(n * 1000) / 1000; }
   function apply() { viewport.setAttribute('transform', 'translate(' + r3(tx) + ' ' + r3(ty) + ') scale(' + r3(k) + ')'); }
   function frame() { return { w: svg.clientWidth || 1000, h: svg.clientHeight || 600 }; }
   function extent() {
     var full = unlinked && !unlinked.classList.contains('off');
-    return { w: +svg.getAttribute(full ? 'data-full-w' : 'data-linked-w'), h: +svg.getAttribute(full ? 'data-full-h' : 'data-linked-h') };
+    var pre = 'data-' + (S.open ? 'open' : 'all') + '-' + (full ? 'full' : 'linked') + '-';
+    return { w: +svg.getAttribute(pre + 'w'), h: +svg.getAttribute(pre + 'h') };
   }
   function fit() {
     var f = frame(), s = extent();
@@ -242,19 +451,16 @@ export const VIEW_SCRIPT = String.raw `
   svg.addEventListener('pointercancel', release);
   svg.addEventListener('click', function (e) { if (!onControl(e) && !dragged) clearFocus(); });
 
+  // Node offsets are relative to their cluster, so centring adds the cluster's current place.
   function activate(node) {
-    var ref = node.getAttribute('data-ref');
-    var lit = {};
-    lit[ref] = true;
-    refs(node, 'data-chain').forEach(function (r) { lit[r] = true; });
-    svg.classList.add('focus');
-    all('.node', svg).forEach(function (n) { n.classList.toggle('hl', !!lit[n.getAttribute('data-ref')]); });
-    all('.edge', svg).forEach(function (ed) { ed.classList.toggle('hl', !!lit[ed.getAttribute('data-from')] && !!lit[ed.getAttribute('data-to')]); });
+    pinned = node;
+    light(node);
+    var m = /translate\(([-\d.]+) ([-\d.]+)\)/.exec(node.parentNode.getAttribute('transform') || '');
     var f = frame();
-    tx = f.w / 2 - (+node.getAttribute('data-x') + +node.getAttribute('data-cx')) * k;
-    ty = f.h / 2 - (+node.getAttribute('data-y') + +node.getAttribute('data-cy')) * k;
+    tx = f.w / 2 - ((m ? +m[1] : 0) + +node.getAttribute('data-x') + +node.getAttribute('data-cx')) * k;
+    ty = f.h / 2 - ((m ? +m[2] : 0) + +node.getAttribute('data-y') + +node.getAttribute('data-cy')) * k;
     apply();
-    openPanel(ref, node);
+    openPanel(node.getAttribute('data-ref'), node);
   }
 
   var collapsed = {};
@@ -263,7 +469,7 @@ export const VIEW_SCRIPT = String.raw `
     Object.keys(collapsed).forEach(function (r) {
       refs(doc.getElementById('node-' + r), 'data-sub').forEach(function (s) { hidden[s] = true; });
     });
-    all('.forest .node', svg).forEach(function (n) { n.classList.toggle('off', !!hidden[n.getAttribute('data-ref')]); });
+    all('.cluster .node', svg).forEach(function (n) { n.classList.toggle('off', !!hidden[n.getAttribute('data-ref')]); });
     all('.toggle', svg).forEach(function (t) { t.classList.toggle('off', !!hidden[t.getAttribute('data-toggle')]); });
     all('.edge', svg).forEach(function (ed) { ed.classList.toggle('off', !!hidden[ed.getAttribute('data-from')] || !!hidden[ed.getAttribute('data-to')]); });
   }
@@ -285,7 +491,7 @@ export const VIEW_SCRIPT = String.raw `
   all('.toggle', svg).forEach(function (t) { onActivate(t, toggle); });
 
   var unlinkedBtn = one('#unlinked-toggle');
-  if (unlinkedBtn && unlinked) {
+  if (unlinkedBtn) {
     unlinkedBtn.addEventListener('click', function () {
       var show = unlinked.classList.contains('off');
       unlinked.classList.toggle('off', !show);
@@ -294,8 +500,13 @@ export const VIEW_SCRIPT = String.raw `
       fit();
     });
   }
+  if (openBtn) openBtn.addEventListener('click', function () { S.open = !S.open; render(); fit(); });
   one('#fit').addEventListener('click', fit);
-  fit();
+
+  readHash();
+  render();
+  live = true;
+  if (S.tab === 'deps') { fitted = true; fit(); }
 })();
-`;
+`.replace(/^ +/gm, ''); // Indentation is for reading here; the page ships without it (AC-34).
 //# sourceMappingURL=view-assets.js.map

package/dist/roadmap/view-assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-assets.js","sourceRoot":"","sources":["../../src/roadmap/view-assets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuNpC,CAAC"}
+{"version":3,"file":"view-assets.js","sourceRoot":"","sources":["../../src/roadmap/view-assets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsYpC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,sEAAsE"}

package/dist/roadmap/view-html.d.ts

@@ -15,7 +15,8 @@
  *
  * @module
  */
-import type { RoadmapView } from './view-model.js';
+import { type RoadmapStatus } from './paths.js';
+import type { RoadmapView, ViewItem } from './view-model.js';
 /** Done cards shown before "show all" (AC-18). */
 export declare const DONE_VISIBLE = 20;
 /** Escape text for HTML text and double-quoted attribute values alike. */
@@ -32,6 +33,15 @@ export declare function contentSecurityPolicy(): string;
  * library would be the first dependency the page grows.
  */
 export declare function renderSummary(markdown: string): string;
+/** Statuses the Board shows when the URL names none (AC-1). */
+export declare const BOARD_DEFAULT: readonly RoadmapStatus[];
+/** The five presets every tab offers, in order (AC-6). */
+export declare const PRESETS: readonly {
+    name: string;
+    statuses: readonly RoadmapStatus[];
+}[];
+/** The commands that apply to an item, as `[label, command]`; the page runs none (AC-29). */
+export declare function commandsFor(v: ViewItem): [string, string][];
 /** Render the page. Pure. */
 export declare function renderView(view: RoadmapView): string;
 //# sourceMappingURL=view-html.d.ts.map

package/dist/roadmap/view-html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-html.d.ts","sourceRoot":"","sources":["../../src/roadmap/view-html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAOH,OAAO,KAAK,EAAE,WAAW,EAAY,MAAM,iBAAiB,CAAC;AAE7D,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAK,CAAC;AA8B/B,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,0CAA0C;AAC1C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,iGAAiG;AACjG,wBAAgB,qBAAqB,IAAI,MAAM,CAE9C;AAcD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAgCtD;AA4LD,6BAA6B;AAC7B,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAwCpD"}
+{"version":3,"file":"view-html.d.ts","sourceRoot":"","sources":["../../src/roadmap/view-html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAKH,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE7D,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAK,CAAC;AA8B/B,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,0CAA0C;AAC1C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,iGAAiG;AACjG,wBAAgB,qBAAqB,IAAI,MAAM,CAE9C;AAcD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAgCtD;AA8DD,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,SAAS,aAAa,EAAwC,CAAC;AAuB3F,0DAA0D;AAC1D,eAAO,MAAM,OAAO,EAAE,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAA;CAAE,EAMlF,CAAC;AAwKF,6FAA6F;AAC7F,wBAAgB,WAAW,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAmB3D;AAgDD,6BAA6B;AAC7B,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAiDpD"}