@ai-ecoverse/slicc-spectrum 1.59.0 → 1.60.1

package/README.md

@@ -32,6 +32,8 @@ Web components for SLICC: `<slicc-terminal>`, and SLICC's app UI on [Spectrum We
 
 Events, all `CustomEvent`s with the payload in `detail`: `ready` `{cols, rows}`, `resize` `{cols, rows}`, `exit` `{status}`, `title` `{title}`, `bell` `{count}`, `error` `{error}`.
 
+It answers OSC 10 and OSC 11 color queries (`ESC ] 10 ; ? ST` and `ESC ] 11 ; ? ST`) with the foreground and background it shows at that moment, as `rgb:rrrr/gggg/bbbb`, so command-line tools can tell a light theme from a dark one and follow a theme switch. The answer reaches the backend before replies to anything that comes later in the output.
+
 Removing the element closes the session and destroys the screen. Adding it again mounts a fresh screen and opens a new session on the same backend.
 
 ## Backend interface

package/dist/{chunk-TK4ZJ7LA.js → chunk-XI74SELH.js}

@@ -440,13 +440,13 @@ var GraphicsLayer = class {
       if (!canvas)
         continue;
       if (changed || !existingCanvas) {
-        let painted = false;
+        let painted2 = false;
         try {
-          painted = this.paint(canvas, key, cached.data, placement, viewport, bounds, flowOffsets.get(placement.row) ?? 0);
+          painted2 = this.paint(canvas, key, cached.data, placement, viewport, bounds, flowOffsets.get(placement.row) ?? 0);
         } catch {
-          painted = false;
+          painted2 = false;
         }
-        if (!painted) {
+        if (!painted2) {
           this.removeCanvas(key);
         }
       } else {
@@ -845,7 +845,7 @@ function textPoint(element, offset) {
 var MAX_SELECTION_ROWS = 1e3;
 var MAX_SELECTION_TEXT = 1024 * 1024;
 var WORD_BOUNDARIES = new Set(" 	'\"\u2502`|:;,()[]{}<>$");
-function selectionRange(core, position, unit) {
+function selectionRange(core, position, unit2) {
   const history = core.getScrollbackCount();
   const total = history + core.getRows();
   const cols = core.getCols();
@@ -893,7 +893,7 @@ function selectionRange(core, position, unit) {
       const value = cell(next);
       if (value.width !== 0 && !value.spacerHead) {
         const chars = value.chars ?? String.fromCodePoint(value.char || 32);
-        if (unit === "word" && boundary(chars) !== expected)
+        if (unit2 === "word" && boundary(chars) !== expected)
           return included;
         length += chars.length;
         included = next;
@@ -1912,10 +1912,10 @@ var Renderer = class {
     const col = Math.floor((clientX - mounted.element.getBoundingClientRect().left) / charWidth);
     return col >= 0 && col < this.cols ? { row: mounted.row, col } : null;
   }
-  select(core, position, unit, beforeSelect) {
+  select(core, position, unit2, beforeSelect) {
     if (!this.painted || this.needsSetup)
       return false;
-    const range = selectionRange(core, position, unit);
+    const range = selectionRange(core, position, unit2);
     if (!range)
       return false;
     beforeSelect();
@@ -3923,8 +3923,8 @@ function fold(text, caseSensitive) {
     folded += char.toLowerCase();
   return folded;
 }
-function* scanSearch(core, query, caseSensitive) {
-  const needle = fold(query, caseSensitive);
+function* scanSearch(core, query2, caseSensitive) {
+  const needle = fold(query2, caseSensitive);
   if (!needle)
     return;
   const prefix = new Uint32Array(needle.length);
@@ -3965,15 +3965,15 @@ function* scanSearch(core, query, caseSensitive) {
         col,
         endCol: Math.min(cols, col + (cell.width ?? 1))
       };
-      for (let unit = 0; unit < text.length; unit++) {
+      for (let unit2 = 0; unit2 < text.length; unit2++) {
         if (++work >= 256) {
           work = 0;
           yield null;
         }
         positions[index++ % needle.length] = position;
-        while (matched > 0 && text[unit] !== needle[matched])
+        while (matched > 0 && text[unit2] !== needle[matched])
           matched = prefix[matched - 1];
-        if (text[unit] === needle[matched])
+        if (text[unit2] === needle[matched])
           matched++;
         if (matched === needle.length) {
           const match = {
@@ -4015,10 +4015,10 @@ var SearchController = class {
   snapshot() {
     return { ...this.state };
   }
-  search(query, options) {
-    if (query.length > 1024)
+  search(query2, options) {
+    if (query2.length > 1024)
       throw new RangeError("Search query exceeds 1,024 UTF-16 code units");
-    this.state.query = query;
+    this.state.query = query2;
     this.state.caseSensitive = options.caseSensitive ?? false;
     this.revealFirst = true;
     this.invalidate();
@@ -4484,9 +4484,9 @@ var WTerm = class {
       this._scheduleRender();
     }
     drain();
-    for (const query of windowSizeQueries) {
+    for (const query2 of windowSizeQueries) {
       try {
-        this.onData?.(this._windowSizeResponse(query));
+        this.onData?.(this._windowSizeResponse(query2));
       } catch (error) {
         recordDeliveryError(error);
       }
@@ -4546,10 +4546,10 @@ var WTerm = class {
       this.onResize(this.cols, this.rows);
   }
   /** Search retained history and the active screen, using plain text. */
-  search(query, options = {}) {
+  search(query2, options = {}) {
     if (this._destroyed)
       return;
-    this._search.search(query, options);
+    this._search.search(query2, options);
     this._paintSearch();
   }
   findNext() {
@@ -4650,10 +4650,10 @@ var WTerm = class {
     this._historySelection.paintRectangle(this.renderer.searchRows(), this._charWidth);
     return true;
   }
-  _selectUnit(position, unit) {
+  _selectUnit(position, unit2) {
     if (this._destroyed || !this.bridge || !this.renderer)
       return false;
-    return this.renderer.select(this.bridge, position, unit, () => {
+    return this.renderer.select(this.bridge, position, unit2, () => {
       this._rectangleDrag.cancel();
       this._historySelection.clear();
       const active = this.element.ownerDocument.activeElement;
@@ -4955,9 +4955,9 @@ var WTerm = class {
     this._windowSizeQueryState = state;
     return queries;
   }
-  _windowSizeResponse(query) {
+  _windowSizeResponse(query2) {
     const { width, height } = this._pixelSize();
-    if (query === 14) {
+    if (query2 === 14) {
       return `\x1B[4;${height};${width}t`;
     }
     const cellWidth = Math.max(1, Math.round(this._charWidth));
@@ -5098,6 +5098,101 @@ var controlBytes = {
   SIGHUP: null
 };
 
+// src/color-query.ts
+var query = /\x1b\](1[01])((?:;\?){1,10})(\x07|\x1b\\)/g;
+var partial = /\x1b(?:\](?:1(?:[01](?:;\?){0,10};?\x1b?)?)?)?$/;
+var latin1 = new TextDecoder("latin1");
+var ColorQueries = class {
+  #tail = "";
+  scan(data) {
+    const chunk = typeof data === "string" ? data : latin1.decode(data);
+    if (!this.#tail && !chunk.includes("\x1B")) return [];
+    const carried = this.#tail.length;
+    const text = this.#tail + chunk;
+    const found = [];
+    for (const match of text.matchAll(query)) {
+      const first = Number(match[1]);
+      const codes = Array.from({ length: match[2].length / 2 }, (_, index) => first + index);
+      found.push({
+        at: match.index + match[0].length - carried,
+        codes: codes.filter((code) => code <= 11),
+        end: match[3]
+      });
+    }
+    const last = found.at(-1);
+    const rest = last ? text.slice(last.at + carried) : text;
+    this.#tail = rest.match(partial)?.[0] ?? "";
+    return found;
+  }
+};
+var hex = (value) => Math.round(Math.min(255, Math.max(0, value))).toString(16).padStart(2, "0").repeat(2);
+var unit = (value) => value === void 0 ? 1 : value.endsWith("%") ? Number.parseFloat(value) / 100 : Number(value);
+function channels(color) {
+  const value = color.trim().toLowerCase();
+  const short = value.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
+  if (short)
+    return [
+      ...[short[1], short[2], short[3]].map((digit) => Number.parseInt(digit.repeat(2), 16)),
+      1
+    ];
+  const long = value.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
+  if (long)
+    return [
+      ...[long[1], long[2], long[3]].map((pair) => Number.parseInt(pair, 16)),
+      long[4] ? Number.parseInt(long[4], 16) / 255 : 1
+    ];
+  const number = String.raw`(-?[\d.]+(?:e-?\d+)?)`;
+  const alpha = String.raw`(?:\s*[/,]\s*(-?[\d.]+(?:e-?\d+)?%?))?\s*\)`;
+  const srgb = value.match(
+    new RegExp(String.raw`^color\(srgb ${number} ${number} ${number}${alpha}`)
+  );
+  if (srgb)
+    return [
+      ...[srgb[1], srgb[2], srgb[3]].map((part) => Number(part) * 255),
+      unit(srgb[4])
+    ];
+  const rgb = value.match(
+    new RegExp(String.raw`^rgba?\(${number}[ ,]+${number}[ ,]+${number}${alpha}`)
+  );
+  if (rgb) return [...[rgb[1], rgb[2], rgb[3]].map(Number), unit(rgb[4])];
+  return null;
+}
+var painter;
+function painted(color) {
+  painter ??= typeof OffscreenCanvas === "function" ? new OffscreenCanvas(1, 1).getContext("2d", { willReadFrequently: true }) : null;
+  if (!painter) return null;
+  painter.clearRect(0, 0, 1, 1);
+  painter.fillStyle = color;
+  painter.fillRect(0, 0, 1, 1);
+  const [red, green, blue, alpha] = painter.getImageData(0, 0, 1, 1).data;
+  return [red, green, blue, alpha / 255];
+}
+function over(top, bottom) {
+  const lower = bottom[3] * (1 - top[3]);
+  const alpha = top[3] + lower;
+  if (!alpha) return [0, 0, 0, 0];
+  return [
+    ...[0, 1, 2].map((index) => (top[index] * top[3] + bottom[index] * lower) / alpha),
+    alpha
+  ];
+}
+var read = (color) => channels(color) ?? painted(color);
+var parentOf = (node) => node.parentElement ?? node.getRootNode().host ?? null;
+function themeColors(element) {
+  const style = getComputedStyle(element);
+  let back = [0, 0, 0, 0];
+  for (let node = element; node && back[3] < 1; node = parentOf(node)) {
+    const layer = read(getComputedStyle(node).backgroundColor);
+    if (layer) back = over(back, layer);
+  }
+  back = over(back, style.colorScheme === "dark" ? [18, 18, 18, 1] : [255, 255, 255, 1]);
+  const front = read(style.color);
+  return front ? { 10: over(front, back), 11: back } : { 11: back };
+}
+function colorReply(code, rgb, end) {
+  return `\x1B]${code};rgb:${rgb.slice(0, 3).map(hex).join("/")}${end}`;
+}
+
 // node_modules/@wterm/dom/src/terminal.css
 var terminal_default = '.wterm {\n  /* Application overrides are owned by the renderer; each terminal is isolated. */\n  --term-app-fg: initial;\n  --term-app-bg: initial;\n  --term-app-cursor: initial;\n\n  --term-fg: #d4d4d4;\n  --term-bg: #1e1e1e;\n  --term-cursor: #aeafad;\n\n  --term-color-0: #1e1e1e;\n  --term-color-1: #f44747;\n  --term-color-2: #6a9955;\n  --term-color-3: #d7ba7d;\n  --term-color-4: #569cd6;\n  --term-color-5: #c586c0;\n  --term-color-6: #4ec9b0;\n  --term-color-7: #d4d4d4;\n  --term-color-8: #808080;\n  --term-color-9: #f44747;\n  --term-color-10: #6a9955;\n  --term-color-11: #d7ba7d;\n  --term-color-12: #569cd6;\n  --term-color-13: #c586c0;\n  --term-color-14: #4ec9b0;\n  --term-color-15: #ffffff;\n\n  --term-font-family:\n    "Menlo", "Consolas", "DejaVu Sans Mono", "Courier New", monospace;\n  --term-font-size: 14px;\n  --term-line-height: 1.2;\n  --term-row-height: 17px;\n\n  position: relative;\n  background: var(--term-app-bg, var(--term-bg));\n  color: var(--term-app-fg, var(--term-fg));\n  font-family: var(--term-font-family);\n  font-size: var(--term-font-size);\n  font-kerning: none;\n  font-variant-ligatures: none;\n  line-height: var(--term-line-height);\n  padding: 12px;\n  border-radius: 8px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  outline: none;\n  overflow: hidden;\n  overflow-anchor: none;\n}\n\n.wterm:focus,\n.wterm:focus-visible {\n  outline: none;\n}\n\n.term-grid {\n  display: block;\n  position: relative;\n  white-space: pre;\n  contain: layout paint style;\n  will-change: contents;\n}\n\n.term-announcements {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: pre;\n  pointer-events: none;\n  user-select: none;\n}\n\n.term-images {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  overflow: visible;\n  z-index: 1;\n}\n\n.term-search-layer {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  user-select: none;\n  z-index: 2;\n}\n\n.term-search-match {\n  position: absolute;\n  background: var(--term-search-match, rgb(255 200 0 / 25%));\n}\n\n.term-search-active {\n  background: var(--term-search-active, rgb(255 150 0 / 40%));\n  box-shadow: inset 0 0 0 1px var(--term-search-border, #ffb000);\n}\n\n.term-image-flow-spacer {\n  display: block;\n  height: 0;\n  pointer-events: none;\n}\n\n.term-image {\n  position: absolute;\n  display: block;\n  pointer-events: none;\n  user-select: none;\n}\n\n.term-row {\n  display: block;\n  height: var(--term-row-height);\n  line-height: var(--term-row-height);\n  contain: layout style;\n}\n\n.term-select-all .term-row,\n.term-rectangle-row {\n  position: relative;\n}\n\n.term-select-all .term-row::after,\n.term-rectangle-row::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: var(--term-selection-bg, rgb(80 140 255 / 30%));\n  pointer-events: none;\n  user-select: none;\n  z-index: 3;\n}\n\n.term-rectangle-row::after {\n  left: var(--term-selection-left);\n  width: var(--term-selection-width);\n  right: auto;\n}\n\n.term-selection-status {\n  position: sticky;\n  bottom: 0;\n  width: fit-content;\n  max-width: 100%;\n  white-space: normal;\n  background: var(--term-app-bg, var(--term-bg));\n  color: var(--term-app-fg, var(--term-fg));\n  user-select: none;\n  pointer-events: none;\n  z-index: 4;\n}\n\n.term-selection-status:empty {\n  display: none;\n}\n\n.term-scrollback-spacer {\n  display: block;\n  pointer-events: none;\n}\n\n.term-size-probe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  visibility: hidden;\n  pointer-events: none;\n  white-space: pre;\n  width: auto;\n  height: var(--term-row-height);\n}\n\n.term-row > span,\n.term-row > .term-link,\n.term-link > span {\n  display: inline-block;\n  height: var(--term-row-height);\n  vertical-align: top;\n}\n\n.term-row > span,\n.term-link > span {\n  width: calc(var(--term-span-cols, 1) * var(--term-cell-width, 1ch));\n  /* Glyph ink may overhang its advance without moving the following cell. */\n  overflow: visible;\n}\n\n.term-link {\n  color: inherit;\n  cursor: text;\n}\n\n.wterm.link-modifier-active .term-link:hover,\n.term-link:focus-visible {\n  cursor: pointer;\n}\n\n.wterm.link-modifier-active .term-link:hover > span,\n.term-link:focus-visible > span {\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n.term-block {\n  width: var(--term-cell-width, 1ch);\n  overflow: hidden;\n  -webkit-text-fill-color: transparent;\n}\n\n.term-box {\n  --term-box-stroke: max(\n    1px,\n    round(calc(var(--term-cell-width, 1ch) * 0.18), 1px)\n  );\n  -webkit-text-fill-color: transparent;\n}\n\n.term-box-heavy,\n.term-box-bold {\n  --term-box-stroke: max(\n    2px,\n    round(calc(var(--term-cell-width, 1ch) * 0.3), 1px)\n  );\n}\n\n.term-box-round {\n  position: relative;\n}\n\n.term-box-round::after {\n  content: "";\n  position: absolute;\n  box-sizing: border-box;\n  border: 0 solid currentColor;\n  pointer-events: none;\n}\n\n.term-box-round-tl::after {\n  inset: calc(50% - var(--term-box-stroke) * 0.5) 0 0\n    calc(50% - var(--term-box-stroke) * 0.5);\n  border-top-width: var(--term-box-stroke);\n  border-left-width: var(--term-box-stroke);\n  border-top-left-radius: 100%;\n}\n\n.term-box-round-tr::after {\n  inset: calc(50% - var(--term-box-stroke) * 0.5)\n    calc(50% - var(--term-box-stroke) * 0.5) 0 0;\n  border-top-width: var(--term-box-stroke);\n  border-right-width: var(--term-box-stroke);\n  border-top-right-radius: 100%;\n}\n\n.term-box-round-br::after {\n  inset: 0 calc(50% - var(--term-box-stroke) * 0.5)\n    calc(50% - var(--term-box-stroke) * 0.5) 0;\n  border-bottom-width: var(--term-box-stroke);\n  border-right-width: var(--term-box-stroke);\n  border-bottom-right-radius: 100%;\n}\n\n.term-box-round-bl::after {\n  inset: 0 0 calc(50% - var(--term-box-stroke) * 0.5)\n    calc(50% - var(--term-box-stroke) * 0.5);\n  border-bottom-width: var(--term-box-stroke);\n  border-left-width: var(--term-box-stroke);\n  border-bottom-left-radius: 100%;\n}\n\n@media (forced-colors: active), print {\n  .term-block {\n    background: none !important;\n    -webkit-text-fill-color: currentColor;\n  }\n\n  .term-box {\n    background-image: none !important;\n    -webkit-text-fill-color: currentColor;\n  }\n\n  .term-box-round::after {\n    display: none;\n  }\n}\n\n.term-wide {\n  --term-span-cols: 2;\n  overflow: visible;\n}\n\n.term-cursor {\n  color: var(--term-cell-fg, inherit);\n  background: var(--term-cell-bg, transparent);\n  outline: 1px solid var(--term-app-cursor, var(--term-cursor));\n  outline-offset: -1px;\n}\n\n/* Native text selection can blur the input until click-to-focus runs. Keep\n   the cursor active during that press without cancelling the selection. */\n.wterm:is(.focused, :active) .term-cursor {\n  background: var(--term-app-cursor, var(--term-cursor));\n  color: var(--term-app-bg, var(--term-bg));\n  outline: none;\n}\n\n.wterm:is(.focused, :active) .term-grid[data-cursor-shape="bar"] .term-cursor,\n.wterm:is(.focused, :active) .term-grid[data-cursor-shape="underline"] .term-cursor {\n  background: var(--term-cell-bg, transparent);\n  color: var(--term-cell-fg, inherit);\n  box-shadow: var(--term-cursor-shadow);\n  --term-cursor-animation: cursor-line-blink;\n}\n\n.term-grid[data-cursor-shape="bar"] .term-cursor {\n  --term-cursor-shadow: inset 2px 0 0 var(--term-app-cursor, var(--term-cursor));\n}\n\n.term-grid[data-cursor-shape="underline"] .term-cursor {\n  --term-cursor-shadow: inset 0 -2px 0\n    var(--term-app-cursor, var(--term-cursor));\n}\n\n.wterm:is(.focused, :active).cursor-blink .term-cursor,\n.wterm:is(.focused, :active):not(.cursor-steady)\n  .term-grid[data-cursor-blink="true"]\n  .term-cursor {\n  animation: var(--term-cursor-animation, cursor-blink) 1s step-end infinite;\n}\n\n@keyframes cursor-blink {\n  0%,\n  100% {\n    background: var(--term-app-cursor, var(--term-cursor));\n    color: var(--term-app-bg, var(--term-bg));\n  }\n  50% {\n    background: var(--term-cell-bg, transparent);\n    color: var(--term-cell-fg, inherit);\n  }\n}\n\n@keyframes cursor-line-blink {\n  0%,\n  100% {\n    box-shadow: var(--term-cursor-shadow);\n  }\n  50% {\n    box-shadow: none;\n  }\n}\n\n.wterm.has-scrollback,\n.wterm.has-image-flow {\n  overflow-y: auto;\n}\n\n.wterm ::selection {\n  background: rgba(86, 156, 214, 0.3);\n}\n\n/* Solarized Dark */\n.wterm.theme-solarized-dark {\n  --term-fg: #839496;\n  --term-bg: #002b36;\n  --term-cursor: #93a1a1;\n  --term-color-0: #073642;\n  --term-color-1: #dc322f;\n  --term-color-2: #859900;\n  --term-color-3: #b58900;\n  --term-color-4: #268bd2;\n  --term-color-5: #d33682;\n  --term-color-6: #2aa198;\n  --term-color-7: #eee8d5;\n  --term-color-8: #586e75;\n  --term-color-9: #cb4b16;\n  --term-color-10: #586e75;\n  --term-color-11: #657b83;\n  --term-color-12: #839496;\n  --term-color-13: #6c71c4;\n  --term-color-14: #93a1a1;\n  --term-color-15: #fdf6e3;\n}\n\n/* Monokai */\n.wterm.theme-monokai {\n  --term-fg: #f8f8f2;\n  --term-bg: #272822;\n  --term-cursor: #f8f8f0;\n  --term-color-0: #272822;\n  --term-color-1: #f92672;\n  --term-color-2: #a6e22e;\n  --term-color-3: #f4bf75;\n  --term-color-4: #66d9ef;\n  --term-color-5: #ae81ff;\n  --term-color-6: #a1efe4;\n  --term-color-7: #f8f8f2;\n  --term-color-8: #75715e;\n  --term-color-9: #f92672;\n  --term-color-10: #a6e22e;\n  --term-color-11: #f4bf75;\n  --term-color-12: #66d9ef;\n  --term-color-13: #ae81ff;\n  --term-color-14: #a1efe4;\n  --term-color-15: #f9f8f5;\n}\n\n/* Light */\n.wterm.theme-light {\n  --term-fg: #383a42;\n  --term-bg: #fafafa;\n  --term-cursor: #526eff;\n  --term-color-0: #383a42;\n  --term-color-1: #e45649;\n  --term-color-2: #50a14f;\n  --term-color-3: #c18401;\n  --term-color-4: #4078f2;\n  --term-color-5: #a626a4;\n  --term-color-6: #0184bc;\n  --term-color-7: #fafafa;\n  --term-color-8: #a0a1a7;\n  --term-color-9: #e45649;\n  --term-color-10: #50a14f;\n  --term-color-11: #c18401;\n  --term-color-12: #4078f2;\n  --term-color-13: #a626a4;\n  --term-color-14: #0184bc;\n  --term-color-15: #ffffff;\n}\n';
 
@@ -5140,6 +5235,7 @@ var SliccTerminal = class _SliccTerminal extends HTMLElement {
   #attempt = 0;
   #batching = false;
   #pasting = false;
+  #queries = new ColorQueries();
   #ready = Promise.withResolvers();
   constructor() {
     super();
@@ -5205,7 +5301,7 @@ var SliccTerminal = class _SliccTerminal extends HTMLElement {
     });
   }
   write(data) {
-    this.#term?.write(data);
+    this.#output(data);
   }
   send(data) {
     const bytes = typeof data === "string" ? encoder.encode(data) : data;
@@ -5259,6 +5355,7 @@ var SliccTerminal = class _SliccTerminal extends HTMLElement {
     if (!backend) return this.#announce();
     const queue = [];
     this.#queue = queue;
+    this.#queries = new ColorQueries();
     let ended = false;
     const current = () => generation === this.#generation && attempt === this.#attempt;
     const live = () => !ended && current();
@@ -5268,7 +5365,7 @@ var SliccTerminal = class _SliccTerminal extends HTMLElement {
       session = await backend.open(
         {
           output: (data) => {
-            if (live()) this.#term?.write(data);
+            if (live()) this.#output(data);
           },
           exit: (status) => {
             if (!live()) return;
@@ -5295,6 +5392,22 @@ var SliccTerminal = class _SliccTerminal extends HTMLElement {
     for (const bytes of queue) session.write(bytes);
     this.#announce();
   }
+  #output(data) {
+    const term = this.#term;
+    if (!term) return;
+    const part = (from2, to) => typeof data === "string" ? data.slice(from2, to) : data.subarray(from2, to);
+    let from = 0;
+    for (const { at, codes, end } of this.#queries.scan(data)) {
+      term.write(part(from, at));
+      from = at;
+      const colors = themeColors(term.element);
+      for (const code of codes) {
+        const rgb = colors[code];
+        if (rgb) this.send(colorReply(code, rgb, end));
+      }
+    }
+    if (from < data.length) term.write(from ? part(from) : data);
+  }
   #batch(change) {
     this.#batching = true;
     try {
@@ -5343,4 +5456,4 @@ export {
   SliccTerminal,
   define
 };
-//# sourceMappingURL=chunk-TK4ZJ7LA.js.map
+//# sourceMappingURL=chunk-XI74SELH.js.map