react-x11 2.40.0 → 2.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.40.0",
+  "version": "2.41.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -104,14 +104,14 @@
     "ical.js": "^2.2.1",
     "image-in-browser": "^3.6.0",
     "linebreak": "^1.1.0",
-    "ntk": "^8.17.8",
+    "ntk": "^8.23.0",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.24.0",
+    "@windowkit/appkit": "^0.25.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.7",
+    "@windowkit/win32": "^0.0.9",
     "dbus-native": "^0.16.0",
     "x11-dri": "^0.9.0"
   },

package/src/cocoa/app.js

@@ -290,7 +290,9 @@ export class CocoaApp {
     // the text controls' Undo/Cut/Copy/Paste/Select All answer ⌘ rather
     // than ⌃, and the edit menu prints them the way a Mac menu does. The
     // menu bar already read a chord's `Control` as ⌘ (cocoa/globalmenu.js);
-    // this is the same rule for everything else that reads one.
+    // this is the same rule for everything else that reads one. Text is
+    // edited the Mac way with it too: ⌥ moves by word, ⌘ to the ends of a
+    // line and the document, ⌃ is Emacs's (src/nodes/textkeys.js).
     this.primaryModifier = 'Super';
 
     // AppKit-rendered control bezels. Its *presence* is the capability:
@@ -934,8 +936,9 @@ export class CocoaApp {
 
   /**
    * The pane's end of the frame channel (childmain hands it over,
-   * feature-detected so the X11 pane path never notices): geometry and
-   * input come in, pane-present and pane-cursor go out. `players` is the
+   * feature-detected so the X11 pane path never notices): geometry, input
+   * and the host's word that it has looked a present up come in,
+   * pane-present and pane-cursor go out. `players` is the
    * host's word that it plays the pane's `<video src>`s, which makes
    * `createPlayer` here — before the pane's first render, which asks.
    */
@@ -963,7 +966,12 @@ export class CocoaApp {
       }
       const pane = this._paneWindow ?? [...this._windows.values()][0];
       if (!pane) return;
-      if (msg?.type === 'pane-rect') {
+      if (msg?.type === 'pane-shown') {
+        // the host has looked up this window's presents to `seq`, so the
+        // buffers they named may go (`CocoaPaneWindow._releaseRing`)
+        const wnd = msg.window != null ? this._windows.get(msg.window) : pane;
+        wnd?._shown?.(msg.seq);
+      } else if (msg?.type === 'pane-rect') {
         pane.setPaneSize(msg.width, msg.height, msg.scale, msg.screen);
         this._flushPaneOutbox();
         this._afterInput();
@@ -1210,11 +1218,12 @@ export class CocoaApp {
     const surfaces = [];
     for (const entry of queue) {
       // A window whose last flip has not reached its layer yet (threaded
-      // mode's fence, `CocoaWindow.frameInFlight`) waits before
-      // its clock is asked, or the clock would count a frame that did not
-      // run. The release is an event, and the batch it arrives in ticks
+      // mode's fence, `CocoaWindow.frameHeld`), or a pane with no buffer the
+      // host is done with (`CocoaPaneWindow.frameHeld`), waits before its
+      // clock is asked, or the clock would count a frame that did not run.
+      // The release is an event — a batch, a `pane-shown` — and it ticks
       // again.
-      if (entry.wnd?.frameInFlight?.()) {
+      if (entry.wnd?.frameHeld?.()) {
         this._rafQueue.push(entry);
         continue;
       }
@@ -1560,6 +1569,8 @@ export class CocoaApp {
       keysym: decoded.keysym,
       baseKeysym: decoded.baseKeysym,
       codepoint: decoded.codepoint,
+      // more than one character, which no code point carries (keymap.js)
+      text: decoded.text,
       buttons: modifierMask(ev),
       group: 0,
       time: ev.time,

package/src/cocoa/keymap.js

@@ -5,8 +5,39 @@
 // have fixed keysyms looked up here by kVK_* virtual key code. NSEvent's
 // three character views map onto the three keysym roles events.js reads:
 //
-//   charsBase    (modifiers stripped)  -> baseKeysym — what chords match
-//   charsShifted (only Shift applied)  -> keysym / codepoint — what was typed
+//   charsBase    (modifiers stripped)        -> baseKeysym — what chords match
+//   chars        (every modifier applied)    -> keysym / codepoint — what was
+//                                               typed, unless ⌘ or ⌃ is held
+//   charsShifted (only Shift applied)        -> keysym / codepoint of a ⌘ or
+//                                               ⌃ chord, which types nothing
+//
+// **⌥ types on a Mac.** It is the layout's third and fourth level: ⌥S is ß on
+// a US keyboard, and on a German one ⌥L is @, ⌥5 [ and ⌥8 { — the only way
+// to type them. `charsShifted` is `charactersIgnoringModifiers`, which drops
+// ⌥ along with everything but Shift, so reading the typed character there
+// made ⌥S type `s` and left a German keyboard no @ at all. `chars` is
+// `characters`, the layout's own answer with ⌥, Shift and Caps Lock applied —
+// Caps Lock is the other thing `charsShifted` leaves out, so a field typed
+// lower case with it on. It is also exactly the DOM's `key` on macOS: ⌥S is
+// `ß`, ⌘S is `s`.
+//
+// There is no input method behind this. The bridge's view swallows
+// `keyDown:` without `interpretKeyEvents:` and is no `NSTextInputClient`
+// (docs/macos.md, "IME"), so these fields are all the text there is. Two
+// consequences, both handled below:
+//
+// - **A dead key types nothing.** ⌥E on a US layout leaves `chars` empty, and
+//   the key it is waiting for decides what the accent becomes. Typing the
+//   key's own letter, which is what reading `charsShifted` did, put an `e` in
+//   the field. Whether the next key's `chars` carries the composed `é` is the
+//   window server's business — an NSEvent built in-process does not carry the
+//   state, and a real keyboard was not measured — so nothing here depends on
+//   it: a composed character is taken as typed, and a plain one is the
+//   accent lost rather than a letter too many.
+// - **A key can type more than one character** — the accent and a letter it
+//   does not combine with, `´s`, where the layout composes. No code point
+//   carries two, so the whole string rides `text` and events.js commits it
+//   the way it commits an input method's text.
 //
 // Function and editing keys type Unicode private-use characters (U+F700…),
 // which must never leak out as code points; the kVK table wins over the
@@ -48,30 +79,56 @@ const VK_KEYSYMS = new Map([
   [111, 0xffc9], // F12
 ]);
 
-const PRIVATE_USE = (cp) => cp >= 0xf700 && cp <= 0xf8ff;
+// The block NSEvent's function-key constants live in (NSUpArrowFunctionKey is
+// U+F700). Not the whole U+F700–U+F8FF range Apple reserves: U+F8FF is the
+// Apple logo, which ⌥⇧K types and the system font draws.
+const FUNCTION_KEY = (cp) => cp >= 0xf700 && cp <= 0xf7ff;
+
+const printable = (cp) => cp != null && cp >= 0x20 && cp !== 0x7f;
 
 function keysymFromChars(chars) {
   if (!chars) return 0;
   const cp = chars.codePointAt(0);
-  if (cp == null || cp < 0x20 || PRIVATE_USE(cp)) return 0;
+  if (!printable(cp) || FUNCTION_KEY(cp)) return 0;
   return keysymOf(String.fromCodePoint(cp));
 }
 
 /**
- * The three key facts events.js reads off a native key event, from the raw
- * @windowkit/appkit payload.
+ * The key facts events.js reads off a native key event, from the raw
+ * @windowkit/appkit payload: `keysym`, `baseKeysym` and `codepoint`, and
+ * `text` when the key typed more than one character.
  */
 export function decodeKey(ev) {
   const fixed = VK_KEYSYMS.get(ev.keyCode);
   if (fixed) {
     return { keysym: fixed, baseKeysym: fixed, codepoint: undefined };
   }
-  const keysym = keysymFromChars(ev.charsShifted);
-  const baseKeysym = keysymFromChars(ev.charsBase) || keysym;
-  const cp = ev.charsShifted?.codePointAt(0);
-  const codepoint =
-    cp != null && cp >= 0x20 && !PRIVATE_USE(cp) ? cp : undefined;
-  return { keysym: keysym || baseKeysym, baseKeysym, codepoint };
+  const baseKeysym =
+    keysymFromChars(ev.charsBase) || keysymFromChars(ev.charsShifted);
+  // A ⌘ or ⌃ chord types nothing, and is named by its key: ⌘⌥S is a chord
+  // on S, not on ß. (`chars` for ⌃S is a control character besides.)
+  // `chars` is absent from a bridge older than the field, and from a test's
+  // event that only says which key it was.
+  const chord = ev.command || ev.control;
+  const typed = chord ? ev.charsShifted : (ev.chars ?? ev.charsShifted);
+  const points = typed ? Array.from(typed) : [];
+  if (points.length > 1) {
+    return {
+      keysym: keysymFromChars(ev.charsShifted) || baseKeysym,
+      baseKeysym,
+      codepoint: undefined,
+      text: typed,
+    };
+  }
+  const keysym = keysymFromChars(typed);
+  const cp = typed?.codePointAt(0);
+  const codepoint = printable(cp) && !FUNCTION_KEY(cp) ? cp : undefined;
+  return {
+    // a dead key typed nothing; the key it sits on is what a chord names
+    keysym: keysym || keysymFromChars(ev.charsShifted) || baseKeysym,
+    baseKeysym,
+    codepoint,
+  };
 }
 
 /** AppKit modifier booleans -> the X-style state mask events carry. */

package/src/cocoa/panehost.js

@@ -31,6 +31,12 @@ const ASKED_KEPT = 16;
  *  drag itself. */
 const GESTURE_GAP_MS = 500;
 
+/** How far inside the budget a frame of a pane that fell behind has to
+ *  come for its frames to be anchored again (`_answered`): a pane whose
+ *  frames come near the budget keeps one look rather than taking the
+ *  other at every frame. */
+const KEPT_UP = 0.75;
+
 /** One shared surface on glass: a sublayer of a window's root layer, its
  * contents the IOSurface the pane last presented into it. */
 class PaneLayer {
@@ -54,6 +60,10 @@ class PaneLayer {
     this._asked = [];
     this._askedAt = null;
     this._behind = false;
+    // when a frame last answered a size, and how many frames in a row came
+    // later than the budget (`_answered`)
+    this._answeredAt = -Infinity;
+    this._late = 0;
   }
 
   /**
@@ -73,13 +83,28 @@ class PaneLayer {
    * size may take before the old one is shown in its place: 0 stretches
    * always, as before. A bridge that predates `contentsGravity` ignores it,
    * and stretches.
+   *
+   * Behind is a pane whose frames come later than the budget, not one with
+   * a size waiting that long. `<Frame>` sends a pane the newest size once
+   * it has painted the last, so the sizes a drag passes through while a
+   * frame is being painted are never sent, and never answered: a size
+   * waits until a frame of a later one lands, two pane frames at most. A
+   * page that painted in 27 ms answered every size it was sent in 31, and
+   * still had one 52 ms old at every step of the drag — so its layer was
+   * stretched at every step and anchored again at every frame, the page
+   * scaling and coming back thirty times a second. Here a size waiting
+   * longer than the budget counts only when no frame has answered any
+   * size in that time, which is a pane that stopped, and a frame that
+   * lands decides the rest (`_answered`).
    */
   _gravityNow() {
     const budget = this.app._resizeWait ?? RESIZE_WAIT_MS;
     if (!(budget > 0)) return 'resize';
-    // a size asked longer ago than the budget, and no frame of it yet
+    // a size asked longer ago than the budget, and no frame of any since
     const oldest = this._asked[0];
-    if (oldest && now() - oldest.at > budget) this._behind = true;
+    if (oldest && now() - Math.max(oldest.at, this._answeredAt) > budget) {
+      this._behind = true;
+    }
     return this._behind ? 'resize' : 'topLeft';
   }
 
@@ -106,20 +131,35 @@ class PaneLayer {
     return { contentsScale: scale };
   }
 
-  /** A frame of `width` by `height` device px landed: what it answers of
-   *  the sizes asked, and how long it took. */
+  /**
+   * A frame of `width` by `height` device px landed: what it answers of
+   * the sizes asked, and how long it took. Two frames in a row later than
+   * the budget put the pane behind, and one well inside it — `KEPT_UP` of
+   * it — brings it back: a frame the collector held up stretches nothing,
+   * and a pane whose frames come near the budget is not stretched and
+   * anchored by turns.
+   */
   _answered(width, height) {
     const asked = this._asked;
     // the pane rounds the logical size it was sent back to device pixels
     const slack = Math.max(2, this.wnd.scale ?? 1);
-    const at = asked.findIndex(
+    // the last time it was asked: a drag back and forth asks a size twice
+    const at = asked.findLastIndex(
       (a) =>
         Math.abs(a.width - width) <= slack &&
         Math.abs(a.height - height) <= slack,
     );
     if (at < 0) return;
-    this._behind =
-      now() - asked[at].at > (this.app._resizeWait ?? RESIZE_WAIT_MS);
+    const budget = this.app._resizeWait ?? RESIZE_WAIT_MS;
+    const took = now() - asked[at].at;
+    this._answeredAt = now();
+    if (took > budget) {
+      this._late += 1;
+      if (this._late >= 2) this._behind = true;
+    } else {
+      this._late = 0;
+      if (took <= budget * KEPT_UP) this._behind = false;
+    }
     asked.splice(0, at + 1);
   }
 
@@ -144,6 +184,7 @@ class PaneLayer {
       if (at - (this._askedAt ?? -Infinity) >= GESTURE_GAP_MS) {
         this._asked = [];
         this._behind = false;
+        this._late = 0;
       }
       this._askedAt = at;
       if (this._asked.length === ASKED_KEPT) this._asked.shift();
@@ -172,16 +213,20 @@ class PaneLayer {
    * A pane-present landed: scan out of the named shared surface.
    *
    * A present names a buffer the pane may since have retired. The channel
-   * is a queue and nothing acknowledges a present, so a pane-rect that
-   * changes the pane's size (or its scale — the host window moved to another
-   * display during startup, which is how this was first hit) can cross a
-   * present already in flight: the pane rebuilds its ring on that rect and
-   * releases the old one (`CocoaPaneWindow._ensureSurface`), and by the
-   * time the host looks the id up the surface is gone. That present is
-   * stale by construction — the pane's full frame on the fresh ring is
-   * queued behind it — so it is dropped, and the layer keeps the frame it
-   * already holds a reference to. Nothing else here throws; any other
-   * error is the bug it says it is.
+   * is a queue, so a pane-rect that changes the pane's size (or its scale —
+   * the host window moved to another display during startup, which is how
+   * this was first hit) can cross a present already in flight: the pane
+   * rebuilds its ring on that rect (`CocoaPaneWindow._ensureSurface`)
+   * before the host has looked the id up. The id is all the present
+   * carries, and the system gives a freed id to the next surface made, so
+   * the pane keeps such a buffer until the host says it has looked it up
+   * (`pane-shown`, which `CocoaPaneHost` sends once it has) — the lookup finds
+   * the frame the present named, a size behind, and the full frame on the
+   * fresh ring is queued behind it. Where the buffer is gone anyway — a
+   * pane that freed it for want of an answer, or one that died with
+   * presents in the channel — the present is dropped, and the layer keeps
+   * the frame it already holds a reference to. Nothing else here throws;
+   * any other error is the bug it says it is.
    */
   present(iosurfaceId, size = null) {
     if (this.destroyed) return false;
@@ -260,6 +305,28 @@ export class CocoaPaneHost extends PaneLayer {
     this._players = new Map();
   }
 
+  /**
+   * The pane's own present, scanned out (`PaneLayer.present`), and the pane
+   * told: whatever the buffer it named holds is the layer's now, or was
+   * dropped, so the pane may free it (`CocoaPaneWindow._releaseRing`).
+   */
+  present(iosurfaceId, size = null) {
+    const shown = super.present(iosurfaceId, size);
+    this._acknowledge(size?.seq, null);
+    return shown;
+  }
+
+  /** `pane-shown`: the host has looked up the presents to `seq` of the
+   *  pane's own window, or of the one `window` names. */
+  _acknowledge(seq, window) {
+    if (this.destroyed || seq == null) return;
+    this._send?.({
+      type: 'pane-shown',
+      seq,
+      ...(window != null && { window }),
+    });
+  }
+
   /**
    * A `pane-player` message: one of the pane's `<video src>`s made, steered
    * or let go of its player. A player that cannot be made says so the way
@@ -375,9 +442,15 @@ export class CocoaPaneHost extends PaneLayer {
   /** A pane-present naming one of the pane's other windows. */
   presentWindow(msg) {
     const entry = this._windows.get(msg.window);
-    if (!entry || this.destroyed) return;
+    if (!entry || this.destroyed) {
+      this._acknowledge(msg.seq, msg.window);
+      return;
+    }
     entry.layer.setRect({ x: 0, y: 0, width: msg.width, height: msg.height });
-    if (!entry.layer.present(msg.id)) return;
+    const shown = entry.layer.present(msg.id);
+    // its ring is the pane's own ring, retired the same way
+    this._acknowledge(msg.seq, msg.window);
+    if (!shown) return;
     entry.presented = true;
     // a transparent window's shadow is the shape of what it shows
     entry.wnd._shadowAfterFlip?.();

package/src/cocoa/paneplayer.js

@@ -18,6 +18,15 @@
 // other: the host writes the buffer after the one it last named, so the one
 // the pane is told about is not written again for two frames — some 66ms at
 // 30fps, against a pane that copies within a display frame of hearing.
+//
+// A buffer is named by its IOSurface id, and the system gives a freed id to
+// the next surface anyone makes, in either process. So the pane answers
+// each frame once it has looked the buffer up (`seen`), the host keeps a
+// buffer of a ring it retired until the frame naming it is answered
+// (`HostedPlayer._freeRing`), and the pane keeps nothing a lookup found at
+// another size than the frame says (`PanePlayer._lookUp`) — the pane's own
+// presents, the other way round, are kept the same way
+// (`CocoaPaneWindow._releaseRing`).
 
 import { PlayerState } from './player.js';
 
@@ -113,27 +122,13 @@ export class PanePlayer extends PlayerState {
   }
 
   /** The host named a buffer with a new frame in it. */
-  _frame({ surface, width, height, time }) {
+  _frame({ surface, width, height, time, seq }) {
     if (this.released) return;
-    // a ring of another size is a new ring: the old one's buffers are the
-    // host's to free, and these handles only keep them alive
-    if (
-      this._bufferSize?.width !== width ||
-      this._bufferSize?.height !== height
-    ) {
-      this._dropBuffers();
-      this._bufferSize = { width, height };
-    }
-    let handle = this._buffers.get(surface);
-    if (!handle) {
-      try {
-        handle = this._native.surfaceFromIOSurfaceID(surface, 1).handle;
-      } catch {
-        // freed before it got here: the next frame is in another buffer
-        return;
-      }
-      this._buffers.set(surface, handle);
-    }
+    const handle = this._lookUp(surface, width, height);
+    // this frame's lookup is done, whatever it found: the host may free the
+    // buffer, which it kept for it (`HostedPlayer._freeRing`)
+    if (seq != null) this._post({ op: 'seen', seq });
+    if (!handle) return;
     this._shown = { handle, width, height, time };
     this._fresh = true;
     // a playing `<video>` asks every display frame; a paused one asks when
@@ -148,6 +143,40 @@ export class PanePlayer extends PlayerState {
     }
   }
 
+  /**
+   * The buffer the host named, looked up the first time it is named; null
+   * where the lookup found none, or found a surface of another size than
+   * the frame, which is not the frame's buffer but whatever the id has gone
+   * to since (`HostedPlayer._freeRing` says how) — never kept, and never
+   * copied out of.
+   */
+  _lookUp(surface, width, height) {
+    // a ring of another size is a new ring: the old one's buffers are the
+    // host's to free, and these handles only keep them alive
+    if (
+      this._bufferSize?.width !== width ||
+      this._bufferSize?.height !== height
+    ) {
+      this._dropBuffers();
+      this._bufferSize = { width, height };
+    }
+    const known = this._buffers.get(surface);
+    if (known) return known;
+    let found;
+    try {
+      found = this._native.surfaceFromIOSurfaceID(surface, 1);
+    } catch {
+      // freed before it got here: the next frame is in another buffer
+      return null;
+    }
+    if (found.width !== width || found.height !== height) {
+      this._native.releaseSurface?.(found.handle);
+      return null;
+    }
+    this._buffers.set(surface, found.handle);
+    return found.handle;
+  }
+
   /** As `CocoaPlayer.copyFrame`: the newest frame into `surface`, or null
    *  when the host has sent nothing since the last copy. */
   copyFrame(surface) {
@@ -212,6 +241,12 @@ export class HostedPlayer {
     this._next = 0;
     this._want = 0;
     this._pull = null;
+    // Each frame's number, the newest the pane has looked up (`seen`), and
+    // the buffers of retired rings a frame it has not looked up yet names:
+    // freed as it does (`_freeRing`).
+    this._seq = 0;
+    this._seenSeq = 0;
+    this._retired = [];
     this._off = this.player._subscribe((ev) => this._event(ev));
   }
 
@@ -221,6 +256,7 @@ export class HostedPlayer {
     if (player.released) return;
     if (msg.op === 'set') player.set(msg.settings);
     else if (msg.op === 'seek') player.seek(msg.seconds);
+    else if (msg.op === 'seen') this._seen(msg.seq);
     else if (msg.op === 'release') this.release();
   }
 
@@ -274,6 +310,9 @@ export class HostedPlayer {
       );
       if (got?.written) {
         this._next = (this._next + 1) % RING;
+        // the buffer is named in the channel until the pane says otherwise
+        // (`_freeRing`)
+        buffer.namedSeq = ++this._seq;
         this._send({
           type: 'pane-player-frame',
           player: this.id,
@@ -281,6 +320,7 @@ export class HostedPlayer {
           width: got.width,
           height: got.height,
           time: got.time,
+          seq: this._seq,
         });
         if (!player.playing) this._want = 0;
       } else if (got?.width > 0 && got?.height > 0) {
@@ -316,13 +356,46 @@ export class HostedPlayer {
     return this._ring[this._next];
   }
 
+  /**
+   * Let the ring go — all but a buffer a frame names that the pane has not
+   * looked up yet. The pane finds a buffer by its IOSurface id, and the
+   * system hands a freed id to the next surface anyone makes: the ring of
+   * the new size this same call is about to make, the pane's own ring,
+   * another process's surface. A frame still in the channel named the id,
+   * not the surface, so the pane copied out of whatever had it by the time
+   * it looked — the next ring's buffer, unwritten, shown until the next
+   * frame came, which for a paused player is the next seek. So that buffer
+   * is kept (`_retired`) until the pane says it has looked the frame up
+   * (`seen`, `_seen`). One, as a rule, since the pane answers as it reads,
+   * and never more than a ring's worth: a pane that stops answering has the
+   * oldest freed anyway, the one it is likeliest to have looked up already.
+   */
   _freeRing() {
+    const ring = this._ring;
+    this._ring = [];
     const release = this._native.releaseSurface;
-    if (typeof release === 'function') {
-      for (const buffer of this._ring)
-        release.call(this._native, buffer.handle);
+    if (typeof release !== 'function') return;
+    for (const buffer of ring) {
+      if (buffer.namedSeq > this._seenSeq) this._retired.push(buffer);
+      else release.call(this._native, buffer.handle);
     }
-    this._ring = [];
+    while (this._retired.length > RING) {
+      release.call(this._native, this._retired.shift().handle);
+    }
+  }
+
+  /** The pane has looked up every frame up to `seq`: the retired buffers
+   *  they named go. */
+  _seen(seq) {
+    if (!(seq > this._seenSeq)) return;
+    this._seenSeq = seq;
+    if (this._retired.length === 0) return;
+    const release = this._native.releaseSurface;
+    this._retired = this._retired.filter((buffer) => {
+      if (buffer.namedSeq > seq) return true;
+      release.call(this._native, buffer.handle);
+      return false;
+    });
   }
 
   release() {
@@ -332,5 +405,9 @@ export class HostedPlayer {
     this._want = 0;
     this._syncPull();
     this._freeRing();
+    // and what it kept: the pane's player is gone, or the pane is
+    for (const buffer of this._retired.splice(0)) {
+      this._native.releaseSurface(buffer.handle);
+    }
   }
 }