koneck 2.55.0 → 2.57.0

package/dist/web/ui-client.js

@@ -168,7 +168,14 @@ function setView(name) {
   if (name === 'changes') loadChanges();
   if (name === 'timing') loadTiming();
   if (name === 'files') loadTree('');
-  if (name === 'terminal') { loadJobs(); $('tcmd').focus(); }
+  if (name === 'terminal') {
+    // Built on first sight and kept, so a pane's scrollback survives leaving the tab and coming
+    // back — a terminal that forgets what it printed when you look away is not a terminal.
+    if (term.panes.length === 0 || !term.panes[0].el) buildTerminal();
+    watchTerminal();
+    const here = term.panes[term.active];
+    if (here && here.el) here.el.input.focus();
+  }
   if (name === 'search') $('q').focus();
   if (name === 'review') loadReview();
   if (name === 'refactor') loadRefactor();
@@ -411,6 +418,20 @@ function onEvent(e) {
       // Follow it: not just which file, but which lines and which pattern.
       watchTool(e, false);
       break;
+    case 'tool-args': {
+      // Only a write has anything to show mid-flight; a read has nothing to watch. The fields were
+      // pulled out of the still-arriving JSON on the server, where that can be tested.
+      if (!follow.on || !toolWrites(e.name) || !e.path || !e.content) break;
+      const path = e.path;
+      const content = e.content;
+      $('watch').hidden = false;
+      // Whatever it was showing, the thing happening now is this file being written.
+      if (follow.mode !== 'work') setPanelMode('work');
+      watchHead('writing', path);
+      follow.kind = 'write';
+      drawWriteInProgress(path, content);
+      break;
+    }
     case 'tool-output':
       if (state.lastTool) {
         state.lastTool.body.textContent =
@@ -2606,8 +2627,17 @@ addEventListener('keydown', (ev) => {
  */
 function ansiToHtml(text) {
   const escChar = String.fromCharCode(27);
+  /*
+   * Colour is kept; everything else a terminal emits is swallowed.
+   *
+   * The last alternative is the one that was missing: an escape followed by a single character —
+   * ESC = for keypad mode, ESC > , ESC 7 to save the cursor — has no bracket, so the CSI pattern
+   * never matched it and it reached the page as a control glyph. That is what appeared at the top
+   * of a pane running git.
+   */
   const pattern = new RegExp(escChar + '\\[([0-9;]*)m|' + escChar + '\\[[0-9;?]*[A-Za-z]|'
-    + escChar + '\\][^\\u0007]*\\u0007', 'g');
+    + escChar + '\\][^\\u0007]*(?:\\u0007|' + escChar + '\\\\)|'
+    + escChar + '[=>78MDEHcZ]|[\\u0000-\\u0008\\u000b\\u000c\\u000e-\\u001f]', 'g');
   let out = '';
   let open = 0;
   let last = 0;
@@ -2645,96 +2675,303 @@ function ansiToHtml(text) {
  * matters is not a setting but a fact about the command: a test run finishes and a dev server
  * does not, and a runner that waits for the second one looks broken.
  */
-const term = { selected: null, polling: null };
+/*
+ * A terminal, not a form with an output box.
+ *
+ * What was here was a job list beside a pane of text: you typed into a field at the top, picked a
+ * row, and read the result — which arrived in whole-buffer snapshots a few times a second, because
+ * the view polled while the runner had been emitting a line-by-line event all along. Everything
+ * about it said "web page".
+ *
+ * This is a scrollback: the command you typed stays above what it printed, the cursor waits at the
+ * bottom, and the next thing you type continues the same column of text. Up to three panes, each
+ * its own shell with its own history, because two is the common case — watch the server, run the
+ * tests — and four on a laptop is four things too narrow to read.
+ */
+const term = {
+  panes: [],
+  /** Which pane the keyboard belongs to. */
+  active: 0,
+  stream: null,
+  /** Pane index by job id, so a line can be routed to the pane that asked for it. */
+  ownerOf: {},
+  fontPx: 12.5,
+};
 
-async function loadJobs(select) {
-  let out;
-  try { out = await api('/api/jobs'); } catch (e) { return; }
-  const host = $('tjobs');
+function newPane() {
+  return { job: null, history: [], at: -1, lines: [], running: false, el: null,
+           /** Where this command's output begins, so a catch-up can replace exactly that. */
+           outputStart: 0,
+           /** How many output lines have arrived on the stream, for the same reason. */
+           received: 0 };
+}
+
+/** The pane a job's output belongs to, or null when nothing here started it. */
+function paneForJob(id) {
+  const idx = term.ownerOf[id];
+  return idx === undefined ? null : term.panes[idx] || null;
+}
+
+function buildTerminal() {
+  if (term.panes.length === 0) term.panes.push(newPane());
+  const host = $('termpanes');
   host.innerHTML = '';
-  if ((out.jobs || []).length === 0) {
-    host.appendChild(el('div', 'wempty', 'Nothing run yet.'));
-  }
-  const pick = select || term.selected;
-  let anyRunning = false;
-  for (const j of out.jobs || []) {
-    if (j.state === 'running') anyRunning = true;
-    const row = el('div', 'jrow' + (j.id === pick ? ' on' : ''));
-    row.appendChild(el('div', 'jc', j.command));
-    const meta = el('div', 'jm');
-    meta.appendChild(el('span', 'js ' + j.state, j.state
-      + (j.exitCode !== null && j.state !== 'running' ? ' ' + j.exitCode : '')));
-    // Who ran it is a column, not a separate screen.
-    if (j.by === 'agent') meta.appendChild(el('span', null, 'by the agent'));
-    if (j.background) meta.appendChild(el('span', null, 'background'));
-    if (j.pty) meta.appendChild(el('span', null, 'tty'));
-    meta.appendChild(el('span', null, j.lines + (j.lines === 1 ? ' line' : ' lines')));
-    if (j.state === 'running' && j.by !== 'agent') {
-      const stop = el('button', 'jk', 'kill');
-      stop.onclick = async (ev) => {
-        ev.stopPropagation();
-        try { await api('/api/kill', { method: 'POST', body: JSON.stringify({ id: j.id }) }); }
-        catch (e) {}
-        loadJobs(j.id);
-      };
-      meta.appendChild(stop);
+  term.panes.forEach((pane, index) => {
+    if (index > 0) {
+      // A draggable divider, so a pane can be made wide enough for the thing being read.
+      const grip = el('div', 'termgrip');
+      grip.onmousedown = (ev) => startPaneDrag(ev, index);
+      host.appendChild(grip);
     }
-    row.appendChild(meta);
-    row.onclick = () => { term.selected = j.id; loadJobs(j.id); showJob(j.id); };
-    host.appendChild(row);
-  }
-  if (pick) showJob(pick);
-  // Polled only while something is running, and stopped when nothing is: a terminal tab left open
-  // should not be a request every second for the rest of the day.
-  if ((anyRunning || state.busy) && !term.polling) {
-    term.polling = setInterval(() => {
-      if (state.view === 'terminal') loadJobs();
-      else { clearInterval(term.polling); term.polling = null; }
-    }, 1000);
-  } else if (!anyRunning && !state.busy && term.polling) {
-    clearInterval(term.polling); term.polling = null;
-  }
+    const box = el('div', 'termpane' + (index === term.active ? ' on' : ''));
+    box.style.flex = String(pane.flex || 1);
+    box.onmousedown = () => { term.active = index; markActivePane(); };
+
+    const scroll = el('div', 'termscroll');
+    const body = el('pre', 'termbody');
+    scroll.appendChild(body);
+
+    const row = el('div', 'termrow');
+    row.appendChild(el('span', 'termps', '$'));
+    const input = document.createElement('input');
+    input.className = 'termin';
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.placeholder = index === 0 ? 'npm test, git status, npm run dev…' : '';
+    input.onkeydown = (ev) => paneKey(ev, index);
+    input.onfocus = () => { term.active = index; markActivePane(); };
+    row.appendChild(input);
+    const stop = el('button', 'termstop', 'stop');
+    stop.title = 'Kill what is running in this pane';
+    stop.onclick = () => void killPane(index);
+    row.appendChild(stop);
+
+    box.appendChild(scroll);
+    box.appendChild(row);
+    host.appendChild(box);
+    pane.el = { box: box, scroll: scroll, body: body, input: input, stop: stop };
+    paintPane(index);
+  });
+  applyTerminalLook();
+  markActivePane();
+  const here = term.panes[term.active];
+  if (here && here.el) here.el.input.focus();
 }
 
-async function showJob(id) {
-  let job;
-  try { job = await api('/api/jobs?id=' + encodeURIComponent(id)); } catch (e) { return; }
-  const host = $('tout');
-  const wasAtEnd = host.scrollHeight - host.scrollTop - host.clientHeight < 60;
-  host.innerHTML = '';
-  if (job.trimmed) host.appendChild(el('div', 'oe', 'earlier output dropped\n'));
-  // The escape codes are why a pty was allocated; rendering them is the point.
-  const body = el('div');
-  body.innerHTML = ansiToHtml((job.lines || []).join('\n'));
-  host.appendChild(body);
-  for (const line of job.lines || []) noticeServedUrl(line);
-  if (job.state !== 'running') {
-    host.appendChild(el('div', job.state === 'exited' ? null : 'oe',
-      '\n[' + job.state + (job.exitCode !== null ? ' ' + job.exitCode : '') + ' after '
-      + ms((job.endedAt || Date.now()) - job.startedAt) + ']'));
+function markActivePane() {
+  term.panes.forEach((pane, i) => {
+    if (pane.el) pane.el.box.className = 'termpane' + (i === term.active ? ' on' : '');
+  });
+}
+
+/** Everything this pane has printed, as one column of text. */
+function paintPane(index) {
+  const pane = term.panes[index];
+  if (!pane || !pane.el) return;
+  const atEnd = pane.el.scroll.scrollHeight - pane.el.scroll.scrollTop
+    - pane.el.scroll.clientHeight < 60;
+  pane.el.body.innerHTML = ansiToHtml(pane.lines.join('\n'));
+  pane.el.stop.hidden = !pane.running;
+  if (atEnd) pane.el.scroll.scrollTop = pane.el.scroll.scrollHeight;
+}
+
+function pushPane(index, line, redraw) {
+  const pane = term.panes[index];
+  if (!pane) return;
+  if (redraw && pane.lines.length > 0) pane.lines[pane.lines.length - 1] = line;
+  else pane.lines.push(line);
+  while (pane.lines.length > 4000) pane.lines.shift();
+  paintPane(index);
+}
+
+async function paneKey(ev, index) {
+  const pane = term.panes[index];
+  if (!pane || !pane.el) return;
+  const input = pane.el.input;
+  if (ev.key === 'Enter') {
+    const command = input.value.trim();
+    input.value = '';
+    if (command === '') { pushPane(index, '$ '); return; }
+    if (command === 'clear') { pane.lines = []; paintPane(index); return; }
+    pane.history.push(command);
+    pane.at = pane.history.length;
+    // Echoed above its own output, which is the whole difference from a form.
+    pushPane(index, '$ ' + command);
+    pane.outputStart = pane.lines.length;
+    pane.received = 0;
+    await runInPane(index, command);
+    return;
   }
-  if (wasAtEnd) host.scrollTop = host.scrollHeight;
+  // A history nobody has to think about: up and down, as everywhere else.
+  if (ev.key === 'ArrowUp') {
+    ev.preventDefault();
+    if (pane.at > 0) pane.at--;
+    input.value = pane.history[pane.at] || '';
+    return;
+  }
+  if (ev.key === 'ArrowDown') {
+    ev.preventDefault();
+    if (pane.at < pane.history.length) pane.at++;
+    input.value = pane.history[pane.at] || '';
+    return;
+  }
+  if (ev.key === 'c' && ev.ctrlKey) { void killPane(index); }
 }
 
-async function runCommand() {
-  const command = $('tcmd').value.trim();
-  if (!command) return;
+async function runInPane(index, command) {
+  const pane = term.panes[index];
+  if (!pane) return;
+  // Anything that does not exit on its own is a background job; a runner that waits for a dev
+  // server looks broken, and the fact is about the command rather than a box somebody ticked.
+  const looksLikeServer = /\b(dev|serve|start|watch|nodemon|vite|next\s+dev)\b/.test(command);
   let out;
   try {
-    out = await api('/api/run', { method: 'POST', body: JSON.stringify({
-      command: command, background: $('tbackground').checked }) });
+    out = await api('/api/run', { method: 'POST',
+      body: JSON.stringify({ command: command, background: looksLikeServer }) });
   } catch (e) {
-    $('tout').textContent = e.message;
+    pushPane(index, e.message);
     return;
   }
-  $('tcmd').value = '';
-  term.selected = out.id;
-  loadJobs(out.id);
+  pane.job = out.id;
+  pane.running = true;
+  term.ownerOf[out.id] = index;
+  paintPane(index);
+
+  /*
+   * One catch-up read, because a command can outrun its own stream.
+   *
+   * The event stream is opened when the tab is first shown and takes a moment to establish. A
+   * command typed inside that moment printed its first lines before anything was listening, and
+   * they were gone: the pane showed the echoed command and nothing under it. Measured — the stream
+   * was still in readyState 0 when the lines were emitted.
+   *
+   * So the runner is asked once, shortly after, what the job has actually produced, and anything
+   * the stream missed is filled in. Counted rather than merged, so a line never appears twice.
+   */
+  setTimeout(() => { void catchUpPane(index, out.id); }, 400);
+}
+
+async function catchUpPane(index, jobId) {
+  const pane = term.panes[index];
+  if (!pane || pane.job !== jobId) return;
+  let job;
+  try { job = await api('/api/jobs?id=' + encodeURIComponent(jobId)); } catch (e) { return; }
+  const produced = (job.lines || []).length;
+  if (produced <= pane.received) return;
+  pane.lines = pane.lines.slice(0, pane.outputStart).concat(job.lines || []);
+  pane.received = produced;
+  if (job.state && job.state !== 'running') pane.running = false;
+  paintPane(index);
+}
+
+async function killPane(index) {
+  const pane = term.panes[index];
+  if (!pane || !pane.job || !pane.running) return;
+  try { await api('/api/kill', { method: 'POST', body: JSON.stringify({ id: pane.job }) }); }
+  catch (e) { pushPane(index, e.message); }
+}
+
+/*
+ * Live, from the runner's own event stream.
+ *
+ * Its own stream rather than the session's: a command belongs to the workspace, not to whichever
+ * conversation was open when it was typed.
+ */
+function watchTerminal() {
+  if (term.stream) return;
+  const url = '/api/terminal/events' + (state.token ? '?token=' + encodeURIComponent(state.token) : '');
+  const source = new EventSource(url);
+  term.stream = source;
+  source.onmessage = (ev) => {
+    let e;
+    try { e = JSON.parse(ev.data); } catch (err) { return; }
+    if (e.t === 'job-line') {
+      const idx = term.ownerOf[e.id];
+      if (idx === undefined) return;
+      const pane = term.panes[idx];
+      if (pane && !e.redraw) pane.received++;
+      pushPane(idx, e.line, e.redraw === true);
+      noticeServedUrl(e.line);
+      return;
+    }
+    if (e.t === 'job' && e.job) {
+      const idx = term.ownerOf[e.job.id];
+      if (idx === undefined) return;
+      const pane = term.panes[idx];
+      if (!pane) return;
+      if (e.job.state !== 'running') {
+        pane.running = false;
+        // Said the way a shell says it, rather than as a status badge.
+        pushPane(idx, e.job.exitCode === 0 || e.job.exitCode === null
+          ? ''
+          : '[' + e.job.state + ' ' + e.job.exitCode + ']');
+      }
+      paintPane(idx);
+    }
+  };
+  source.onerror = () => { /* the browser reconnects on its own */ };
+}
+
+/** Font size and backdrop, applied to every pane at once. */
+function applyTerminalLook() {
+  const host = $('termpanes');
+  host.style.setProperty('--term-font', term.fontPx + 'px');
+  const on = $('tbgimg').checked;
+  const strength = Number($('tbgop').value) / 100;
+  host.classList.toggle('backdrop', on);
+  host.style.setProperty('--term-bg-strength', on ? String(strength) : '0');
+  if (on && !host.style.getPropertyValue('--term-bg-image')) {
+    const url = '/api/terminal/background'
+      + (state.token ? '?token=' + encodeURIComponent(state.token) : '');
+    host.style.setProperty('--term-bg-image', 'url("' + url + '")');
+  }
 }
-$('trun').onclick = () => void runCommand();
-$('tcmd').addEventListener('keydown', (ev) => {
-  if (ev.key === 'Enter') { ev.preventDefault(); void runCommand(); }
-});
+
+function startPaneDrag(ev, dividerIndex) {
+  ev.preventDefault();
+  const left = term.panes[dividerIndex - 1];
+  const right = term.panes[dividerIndex];
+  if (!left || !right || !left.el || !right.el) return;
+  const startX = ev.clientX;
+  const leftWas = left.el.box.getBoundingClientRect().width;
+  const rightWas = right.el.box.getBoundingClientRect().width;
+  const total = leftWas + rightWas;
+  const move = (m) => {
+    const wanted = Math.min(Math.max(leftWas + (m.clientX - startX), 120), total - 120);
+    left.flex = wanted / total;
+    right.flex = (total - wanted) / total;
+    left.el.box.style.flex = String(left.flex);
+    right.el.box.style.flex = String(right.flex);
+  };
+  const up = () => {
+    window.removeEventListener('mousemove', move);
+    window.removeEventListener('mouseup', up);
+  };
+  window.addEventListener('mousemove', move);
+  window.addEventListener('mouseup', up);
+}
+
+$('tsplit').onclick = () => {
+  // Three, deliberately. Four on a laptop is four things too narrow to read.
+  if (term.panes.length >= 3) return;
+  term.panes.push(newPane());
+  term.active = term.panes.length - 1;
+  buildTerminal();
+};
+
+$('tunsplit').onclick = () => {
+  if (term.panes.length <= 1) return;
+  const gone = term.panes.pop();
+  if (gone && gone.job) delete term.ownerOf[gone.job];
+  term.active = Math.min(term.active, term.panes.length - 1);
+  buildTerminal();
+};
+
+$('tbgimg').onchange = applyTerminalLook;
+$('tbgop').oninput = applyTerminalLook;
+$('tfontup').onclick = () => { term.fontPx = Math.min(20, term.fontPx + 1); applyTerminalLook(); };
+$('tfontdown').onclick = () => { term.fontPx = Math.max(9, term.fontPx - 1); applyTerminalLook(); };
+
 
 /* ── the page, as it really renders ───────────────────────────────────────────────────────── */
 
@@ -3110,6 +3347,16 @@ function watchTool(e, done) {
     return;
   }
 
+  /*
+   * Whatever the panel was showing, it follows the work.
+   *
+   * Page mode was entered by a browser call and never left, so a session that opened a page and
+   * then went back to editing code sat on a stale screenshot while the interesting thing happened
+   * out of sight. The browser is still one click away — and any browser call switches straight back
+   * to it — but the panel follows what is being done now.
+   */
+  if (follow.mode === 'page') setPanelMode('work');
+
   if (t.command) {
     // A command is not a file, and its output IS the thing to watch.
     follow.kind = 'term';
@@ -3220,6 +3467,32 @@ function prettyArgs(args) {
   return String(args).slice(0, 8000);
 }
 
+/*
+ * The write in progress, repainted as its content arrives.
+ *
+ * Plain while it streams and coloured the moment it lands: highlighting needs a round trip per
+ * repaint, and four of those a second to colour text that is about to change again is a cost with
+ * no reader. The finished render replaces it with the coloured version a fraction of a second
+ * later, which is what the eye actually follows.
+ */
+function drawWriteInProgress(path, content) {
+  const host = $('wbody');
+  let head = host.querySelector('.wwrite');
+  if (!head) {
+    host.innerHTML = '';
+    head = el('div', 'wwrite');
+    host.appendChild(head);
+    host.appendChild(el('div', 'wwbody'));
+  }
+  const lines = content.split('\n');
+  head.textContent = 'writing ' + path + ' — ' + lines.length
+    + (lines.length === 1 ? ' line so far' : ' lines so far');
+  const body = host.querySelector('.wwbody');
+  body.innerHTML = '';
+  body.appendChild(drawCode(content, [], null, null));
+  host.scrollTop = host.scrollHeight;
+}
+
 /** Paints the content a write is carrying, coloured for the file it is going into. */
 async function drawWriting(path, content, before) {
   const host = $('wbody');

package/dist/web/ui-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-client.js","sourceRoot":"","sources":["../../src/web/ui-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkxHlB,CAAC;AACF,CAAC"}
+{"version":3,"file":"ui-client.js","sourceRoot":"","sources":["../../src/web/ui-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmiIlB,CAAC;AACF,CAAC"}

package/dist/web/ui-css.d.ts

@@ -1,15 +1,2 @@
-/**
- * The stylesheet, and the three themes.
- *
- * Every colour is a token defined once on `:root`, so a theme is a list of token values rather
- * than a second stylesheet. Three states, which is what "light, dark and system" actually needs:
- * an explicit choice writes `data-theme` on the root and wins; with nothing written, the browser's
- * own preference decides.
- *
- * Contrast was asked for specifically — "font visible well in dark theme". The dark palette's body
- * text is #e6f1f5 on #0d1418, which is about 14:1, and the muted tone is #93aab5 at about 7:1;
- * both clear WCAG AA for body text with room to spare. The first version used #7f9aa6 for anything
- * secondary, which measures 4.6:1 — passable on paper and genuinely hard to read on a dim screen.
- */
 export declare function css(markUrl: string): string;
 //# sourceMappingURL=ui-css.d.ts.map

package/dist/web/ui-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-css.d.ts","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAy7B3C"}
+{"version":3,"file":"ui-css.d.ts","sourceRoot":"","sources":["../../src/web/ui-css.ts"],"names":[],"mappings":"AA8CA,wBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAy8B3C"}