@daugasauron/dolly-host-display 0.1.4 → 0.1.5-rc.0

package/abi.mjs

@@ -1,5 +1,5 @@
 // Generated from host/display/dolly-display-0.wat, host/display/display.h, include/dolly/process.h.
-export const DOLLY_DISPLAY_MAILBOX_SIZE = 96;
+export const DOLLY_DISPLAY_MAILBOX_SIZE = 176;
 export const DOLLY_DISPLAY_WORD_FLAGS = 0;
 export const DOLLY_DISPLAY_WORD_FRAME_SEQUENCE = 1;
 export const DOLLY_DISPLAY_WORD_FRAME_INDEX = 2;
@@ -24,10 +24,33 @@ export const DOLLY_DISPLAY_WORD_SURFACE_SEQUENCE = 20;
 export const DOLLY_DISPLAY_WORD_SURFACE_WIDTH = 21;
 export const DOLLY_DISPLAY_WORD_SURFACE_HEIGHT = 22;
 export const DOLLY_DISPLAY_WORD_SURFACE_SCALE_MILLI = 23;
+export const DOLLY_DISPLAY_WORD_PALETTE_SEQUENCE = 24;
+export const DOLLY_DISPLAY_WORD_PALETTE_BACKGROUND = 25;
+export const DOLLY_DISPLAY_WORD_PALETTE_FOREGROUND = 26;
+export const DOLLY_DISPLAY_WORD_PALETTE_CURSOR = 27;
+export const DOLLY_DISPLAY_WORD_PALETTE_COLORS = 28;
+export const DOLLY_DISPLAY_GRAPHICS_ACTIVE = 1;
+export const DOLLY_DISPLAY_CURSOR_TEXT = 0;
+export const DOLLY_DISPLAY_CURSOR_DEFAULT = 1;
+export const DOLLY_DISPLAY_CURSOR_CROSSHAIR = 2;
+export const DOLLY_DISPLAY_CURSOR_POINTER = 3;
+export const DOLLY_DISPLAY_CURSOR_HIDDEN = 4;
+export const DOLLY_DISPLAY_CURSOR_NS_RESIZE = 5;
+export const DOLLY_DISPLAY_CURSOR_EW_RESIZE = 6;
+export const DOLLY_DISPLAY_CURSOR_NWSE_RESIZE = 7;
+export const DOLLY_DISPLAY_CURSOR_NESW_RESIZE = 8;
+export const DOLLY_DISPLAY_CURSOR_MOVE = 9;
+export const DOLLY_DISPLAY_CURSOR_WAIT = 10;
+export const DOLLY_DISPLAY_CURSOR_PROGRESS = 11;
+export const DOLLY_DISPLAY_CURSOR_NOT_ALLOWED = 12;
+export const DOLLY_DISPLAY_CURSOR_HELP = 13;
+export const DOLLY_DISPLAY_PIXEL_RGBA8 = 1;
 export const DOLLY_DISPLAY_MAX_WIDTH = 4096;
 export const DOLLY_DISPLAY_MAX_HEIGHT = 2304;
 export const DOLLY_DISPLAY_FRAME_COUNT = 2;
 export const DOLLY_DISPLAY_COPY_CAPACITY = 262144;
+export const DOLLY_DISPLAY_COPY_AVAILABLE = 1;
+export const DOLLY_DISPLAY_COPY_TRUNCATED = 2;
 export const DOLLY_DISPLAY_ACQUIRE = 96;
 export const DOLLY_DISPLAY_SET_SIZE = 97;
 export const DOLLY_DISPLAY_BEGIN_FRAME = 98;
@@ -37,4 +60,4 @@ export const DOLLY_DISPLAY_WAIT_FRAME = 101;
 export const DOLLY_DISPLAY_SET_CURSOR = 102;
 export const DOLLY_DISPLAY_RELEASE = 103;
 export const DOLLY_ERRNO = Object.freeze({ E2BIG: 1, EACCES: 2, EADDRINUSE: 3, EADDRNOTAVAIL: 4, EAFNOSUPPORT: 5, EAGAIN: 6, EALREADY: 7, EBADF: 8, EBADMSG: 9, EBUSY: 10, ECANCELED: 11, ECHILD: 12, ECONNABORTED: 13, ECONNREFUSED: 14, ECONNRESET: 15, EDEADLK: 16, EDESTADDRREQ: 17, EDOM: 18, EDQUOT: 19, EEXIST: 20, EFAULT: 21, EFBIG: 22, EHOSTUNREACH: 23, EIDRM: 24, EILSEQ: 25, EINPROGRESS: 26, EINTR: 27, EINVAL: 28, EIO: 29, EISCONN: 30, EISDIR: 31, ELOOP: 32, EMFILE: 33, EMLINK: 34, EMSGSIZE: 35, EMULTIHOP: 36, ENAMETOOLONG: 37, ENETDOWN: 38, ENETRESET: 39, ENETUNREACH: 40, ENFILE: 41, ENOBUFS: 42, ENODEV: 43, ENOENT: 44, ENOEXEC: 45, ENOLCK: 46, ENOLINK: 47, ENOMEM: 48, ENOMSG: 49, ENOPROTOOPT: 50, ENOSPC: 51, ENOSYS: 52, ENOTCONN: 53, ENOTDIR: 54, ENOTEMPTY: 55, ENOTRECOVERABLE: 56, ENOTSOCK: 57, ENOTTY: 59, ENXIO: 60, EOVERFLOW: 61, EOWNERDEAD: 62, EPERM: 63, EPIPE: 64, EPROTO: 65, EPROTONOSUPPORT: 66, EPROTOTYPE: 67, ERANGE: 68, EROFS: 69, ESPIPE: 70, ESRCH: 71, ESTALE: 72, ETIMEDOUT: 73, ETXTBSY: 74, EXDEV: 75, ENODATA: 116, ENOTSUP: 138 });
-export const DOLLY_DISPLAY_ABI_DIGEST = "e24b5ca332894d3630171a9e56c54c7f4936116ab304df030f093c74788f4900";
+export const DOLLY_DISPLAY_ABI_DIGEST = "89726f3e1b530de7fe61d30c407c68de7930bcb4ad30694b2cbf6789b95f2715";

package/display.mjs

@@ -2,13 +2,39 @@ import * as A from "./abi.mjs";
 export { DOLLY_DISPLAY_ABI_DIGEST as digest } from "./abi.mjs";
 
 const textDecoder = new TextDecoder("utf-8", { ignoreBOM: true });
-// dolly_display_cursor (display.h), by value: the page's own cursors, nothing a guest draws.
-const cursorStyles = ["text", "default", "crosshair", "pointer", "none", "ns-resize", "ew-resize", "nwse-resize",
-  "nesw-resize", "move", "wait", "progress", "not-allowed", "help"];
+// The cursor styles of dolly-display-0.wat: the page's own cursors, nothing a guest draws.
+const cursorStyles = new Map([[A.DOLLY_DISPLAY_CURSOR_TEXT, "text"], [A.DOLLY_DISPLAY_CURSOR_DEFAULT, "default"],
+  [A.DOLLY_DISPLAY_CURSOR_CROSSHAIR, "crosshair"], [A.DOLLY_DISPLAY_CURSOR_POINTER, "pointer"],
+  [A.DOLLY_DISPLAY_CURSOR_HIDDEN, "none"], [A.DOLLY_DISPLAY_CURSOR_NS_RESIZE, "ns-resize"],
+  [A.DOLLY_DISPLAY_CURSOR_EW_RESIZE, "ew-resize"], [A.DOLLY_DISPLAY_CURSOR_NWSE_RESIZE, "nwse-resize"],
+  [A.DOLLY_DISPLAY_CURSOR_NESW_RESIZE, "nesw-resize"], [A.DOLLY_DISPLAY_CURSOR_MOVE, "move"],
+  [A.DOLLY_DISPLAY_CURSOR_WAIT, "wait"], [A.DOLLY_DISPLAY_CURSOR_PROGRESS, "progress"],
+  [A.DOLLY_DISPLAY_CURSOR_NOT_ALLOWED, "not-allowed"], [A.DOLLY_DISPLAY_CURSOR_HELP, "help"]]);
 // The presenter keeps requesting animation frames this long after the last
 // frame, so the next one is painted on the frame after it is published.
 const lingerMilliseconds = 250;
 
+// The terminal's colours are the page's: an embedding sets these on boot()'s
+// element or above it (docs/embedding.md), and the canvas inherits them. The
+// first three are the popups' too. Unset, they are Dolly's, and of the 16
+// colours programs name, black is the background, yellow and bright yellow the
+// accent, bright black #77736c and the rest the text's colour.
+const shared = { background: "--dolly-background", color: "--dolly-color", accent: "--dolly-accent" };
+const paletteProperties = Array.from({ length: 16 }, (_, index) => `--dolly-display-palette-${index}`);
+const themeProperties = [...Object.values(shared), ...paletteProperties];
+function readPalette(style, rgb) {
+  const read = (name, fallback) => {
+    const value = style.getPropertyValue(name).trim();
+    return CSS.supports("color", value) ? value : fallback;
+  };
+  const background = read(shared.background, "#262626"), color = read(shared.color, "#e8e3d7"),
+    accent = read(shared.accent, "#f2d45c");
+  const unset = [background, color, color, accent, color, color, color, color,
+    "#77736c", color, color, accent, color, color, color, color];
+  return { background: rgb(background), foreground: rgb(color), cursor: rgb(accent),
+    colors: paletteProperties.map((name, index) => rgb(read(name, unset[index]))) };
+}
+
 // The Worker's end of the display mailbox: it reads frames, the terminal's
 // geometry and its selection, and writes the surface and the animation frame.
 export class DisplayTransport {
@@ -36,9 +62,7 @@ export class DisplayTransport {
   static surfaceWidth = A.DOLLY_DISPLAY_WORD_SURFACE_WIDTH;
   static surfaceHeight = A.DOLLY_DISPLAY_WORD_SURFACE_HEIGHT;
   static surfaceScaleMilli = A.DOLLY_DISPLAY_WORD_SURFACE_SCALE_MILLI;
-
-  static copyAvailable = 1;
-  static copyTruncated = 2;
+  static paletteSequence = A.DOLLY_DISPLAY_WORD_PALETTE_SEQUENCE;
 
   // The copy buffer's size is the contract's; a test may shrink it.
   constructor(buffer, address, copyAddress, { copyCapacity = A.DOLLY_DISPLAY_COPY_CAPACITY } = {}) {
@@ -72,8 +96,8 @@ export class DisplayTransport {
         this.words,
         this.word + DisplayTransport.copyLength,
       ) >>> 0;
-      if ((flags & DisplayTransport.copyAvailable) === 0) return null;
-      if ((flags & DisplayTransport.copyTruncated) !== 0 ||
+      if ((flags & A.DOLLY_DISPLAY_COPY_AVAILABLE) === 0) return null;
+      if ((flags & A.DOLLY_DISPLAY_COPY_TRUNCATED) !== 0 ||
           length > this.copyCapacity) {
         throw new Error("Dolly selection exceeds the clipboard bridge capacity");
       }
@@ -99,8 +123,21 @@ export class DisplayTransport {
     Atomics.add(this.words, this.word + DisplayTransport.surfaceSequence, 1);
   }
 
+  // The terminal's colours, 0xRRGGBB each: { background, foreground, cursor, colors: [16] }.
+  publishPalette({ background, foreground, cursor, colors }) {
+    const words = [background, foreground, cursor, ...colors];
+    if (colors.length !== 16 || !words.every(word => Number.isInteger(word) && word >= 0 && word <= 0xffffff)) {
+      throw new Error("Dolly display palette must be 19 colours of 0xRRGGBB");
+    }
+    Atomics.add(this.words, this.word + DisplayTransport.paletteSequence, 1);
+    for (const [index, word] of words.entries()) {
+      Atomics.store(this.words, this.word + A.DOLLY_DISPLAY_WORD_PALETTE_BACKGROUND + index, word);
+    }
+    Atomics.add(this.words, this.word + DisplayTransport.paletteSequence, 1);
+  }
+
   graphicsActive() {
-    return (Atomics.load(this.words, this.word + DisplayTransport.flags) & 1) !== 0;
+    return (Atomics.load(this.words, this.word + DisplayTransport.flags) & A.DOLLY_DISPLAY_GRAPHICS_ACTIVE) !== 0;
   }
 
   publishAnimationFrame() {
@@ -224,7 +261,7 @@ export class FramebufferPresenter {
       const stride = Atomics.load(words, word + DisplayTransport.frameStride) >>> 0;
       const length = stride * height;
       const address = this.frameAddresses[index];
-      if (index > 1 || width === 0 || height === 0 || stride !== width * 4 ||
+      if (index >= A.DOLLY_DISPLAY_FRAME_COUNT || width === 0 || height === 0 || stride !== width * 4 ||
           length > this.capacity || address + length > this.buffer.byteLength) {
         throw new Error("Dolly published an invalid framebuffer");
       }
@@ -237,6 +274,9 @@ export class FramebufferPresenter {
       this.image.data.set(this.frames[index] ??= new Uint8ClampedArray(this.buffer, address, length));
       const after = Atomics.load(words, word + DisplayTransport.frameSequence) >>> 0;
       if (before !== after) continue;
+      // A frame is opaque, as a window is: the fourth byte of a pixel is not shown.
+      const pixels = this.image.data;
+      for (let alpha = 3; alpha < pixels.length; alpha += 4) pixels[alpha] = 255;
       if (this.surface.width !== width || this.surface.height !== height) {
         this.surface.width = width;
         this.surface.height = height;
@@ -251,12 +291,34 @@ export class FramebufferPresenter {
 }
 
 // The page's display: the canvas, handed to the Worker that paints it, the
-// surface it measures, and the copy chord. What the terminal publishes (its
-// grid, geometry, cursor, the lease) the Worker reports by message.
-export function browser({ mount, canvas, keyboard, fatal, showStatus, send, ask }) {
+// surface it measures, the colours it reads, and the copy chord. What the
+// terminal publishes (its grid, geometry, cursor, the lease) the Worker
+// reports by message.
+export function browser({ canvas, keyboard, fatal, showStatus, send, ask }) {
   const surface = canvas.transferControlToOffscreen();
   let state, resizeObserver;
-  const publishSurface = () => send({ type: "display-surface", width: mount.clientWidth, height: mount.clientHeight,
+  // A CSS colour as 0xRRGGBB, as the page paints it.
+  const probe = new OffscreenCanvas(1, 1).getContext("2d", { willReadFrequently: true });
+  const rgb = color => {
+    probe.clearRect(0, 0, 1, 1);
+    probe.fillStyle = color;
+    probe.fillRect(0, 0, 1, 1);
+    const [red, green, blue] = probe.getImageData(0, 0, 1, 1).data;
+    return red << 16 | green << 8 | blue;
+  };
+  let palette = readPalette(getComputedStyle(canvas), rgb);
+  const publishPalette = () => {
+    const read = readPalette(getComputedStyle(canvas), rgb);
+    if (JSON.stringify(read) === JSON.stringify(palette)) return;
+    palette = read;
+    send({ type: "display-palette", palette });
+  };
+  // A change of the properties, by whatever rule or media query, ends a
+  // transition of them on the canvas, which shows nothing.
+  canvas.style.transition = themeProperties.map(name => `${name} 1ms allow-discrete`).join(", ");
+  canvas.addEventListener("transitionend", publishPalette);
+  // The terminal is the canvas's box: what the element holds beside it (input@0's bar) is not.
+  const publishSurface = () => send({ type: "display-surface", width: canvas.clientWidth, height: canvas.clientHeight,
     devicePixelRatio });
   const copySelection = () => ask({ type: "display-copy" });
 
@@ -287,7 +349,7 @@ export function browser({ mount, canvas, keyboard, fatal, showStatus, send, ask
     copySelection,
   };
   return {
-    configuration: { canvas: surface }, transfers: [surface],
+    configuration: { canvas: surface, palette }, transfers: [surface],
     page: {
       get transport() { return state && transport; },
       get graphicsActive() { return state.graphicsActive; },
@@ -309,7 +371,7 @@ export function browser({ mount, canvas, keyboard, fatal, showStatus, send, ask
     messages: {
       "display-state"(message) {
         const dataset = document.documentElement.dataset;
-        if (message.cursor !== state?.cursor) canvas.style.cursor = cursorStyles[message.cursor] ?? "default";
+        if (message.cursor !== state?.cursor) canvas.style.cursor = cursorStyles.get(message.cursor) ?? "default";
         if (message.frame !== state?.frame) dataset.frameSequence = message.frame;
         if (message.cols !== state?.cols) dataset.terminalCols = message.cols;
         if (message.rows !== state?.rows) dataset.terminalRows = message.rows;
@@ -326,12 +388,14 @@ export function browser({ mount, canvas, keyboard, fatal, showStatus, send, ask
         });
       },
     },
-    // The initial surface, then every change of the terminal area.
+    // The initial surface, then every change of the terminal area; the colours
+    // as they are now, for a hidden canvas transitions nothing.
     entryStarted() {
+      canvas.hidden = false;
       publishSurface();
+      publishPalette();
       resizeObserver = new ResizeObserver(publishSurface);
-      resizeObserver.observe(mount);
-      canvas.hidden = false;
+      resizeObserver.observe(canvas);
       document.documentElement.dataset.terminal = "ghostty-rgba-wasm";
     },
     dispose() { resizeObserver?.disconnect(); },
@@ -368,6 +432,7 @@ export function worker({ get, send, configuration }) {
     },
     messages: {
       "display-surface"({ width, height, devicePixelRatio }) { transport?.publishSurface(width, height, devicePixelRatio); },
+      "display-palette"({ palette }) { transport?.publishPalette(palette); },
       "display-copy"() { return transport.copySelection(); },
       "display-frame"() { return presenter?.image ?? null; },
     },
@@ -380,16 +445,19 @@ export function worker({ get, send, configuration }) {
         throw new Error("invalid resident display plugin range");
       }
       const display = get("runtime").kernelPlugin(new Uint8Array(memory.buffer, address, size).slice(), kernel);
-      const getDriver = display.exports.dolly_display_driver_get_v5;
+      const getDriver = display.exports.dolly_display_driver_get_v6;
+      const mailbox = Number(kernel.dolly_display_mailbox_address());
+      transport = new DisplayTransport(memory.buffer, mailbox, Number(kernel.dolly_display_copy_buffer_address()));
+      // The driver draws its first frame in the page's colours.
+      transport.publishPalette(configuration.palette);
       if (typeof getDriver !== "function" || kernel.dolly_display_install(getDriver()) !== 0) {
         throw new Error("Dolly display installation failed");
       }
-      const mailbox = Number(kernel.dolly_display_mailbox_address());
-      transport = new DisplayTransport(memory.buffer, mailbox, Number(kernel.dolly_display_copy_buffer_address()));
       words = transport.words;
       word = transport.word;
       const capacity = A.DOLLY_DISPLAY_MAX_WIDTH * A.DOLLY_DISPLAY_MAX_HEIGHT * 4, limit = memory.buffer.byteLength;
-      const frameAddresses = [0, 1].map(index => Number(kernel.dolly_display_framebuffer_address(index)));
+      const frameAddresses = Array.from({ length: A.DOLLY_DISPLAY_FRAME_COUNT },
+        (_, index) => Number(kernel.dolly_display_framebuffer_address(index)));
       if (frameAddresses.some(address => !Number.isSafeInteger(address) || address <= 0 || address > limit - capacity)) {
         throw new Error("invalid display framebuffer range");
       }

package/package.json

@@ -1,10 +1,10 @@
 {
-  "version": "0.1.4",
+  "version": "0.1.5-rc.0",
   "type": "module",
   "name": "@daugasauron/dolly-host-display",
   "license": "MIT",
   "dependencies": {
-    "@daugasauron/dolly": "0.1.4"
+    "@daugasauron/dolly": "0.1.5-rc.0"
   },
   "description": "Dolly's display@0 host module: the terminal and programs' frames; the selection on Ctrl+Shift+C.",
   "repository": {