react-x11 2.15.3 → 2.16.0

package/README.md

@@ -609,6 +609,43 @@ The full threat model, including what react-x11 does and does not defend
 against, is [docs/security.md](docs/security.md). To report something,
 [SECURITY.md](SECURITY.md).
 
+## Similar projects
+
+- [GPUIX](https://github.com/remorses/gpuix) — React for
+  [GPUI](https://github.com/zed-industries/zed/tree/main/crates/gpui), Zed's
+  GPU UI framework. Each commit crosses a napi-rs addon as one batch of
+  mutations to a retained Rust tree, which GPUI lays out with Taffy's flexbox
+  and paints through Metal, DirectX or Vulkan, on macOS, Windows and Linux.
+- [react-native-gpui](https://github.com/natew/react-native-gpui) — React
+  Native's component API (`View`, `Text`, `Pressable`, `TextInput`,
+  `FlatList`) on GPUI as well, hosted the other way round: a Rust binary
+  embeds the system's JavaScriptCore and runs the bundled app, and commits
+  reach GPUI in memory. macOS on Apple silicon only, for now.
+- [GTKX](https://github.com/gtkx-org/gtkx) — React for GNOME: every GObject
+  is a JSX element, so the tree is the platform's own GTK4 and Adwaita
+  widgets. The TypeScript bindings are generated from GObject-Introspection
+  and call into GTK through a Rust core on Node.js. Linux-only by design.
+- React Native for [Windows](https://github.com/microsoft/react-native-windows)
+  and [macOS](https://github.com/microsoft/react-native-macos) — Microsoft's
+  desktop platforms for React Native. On Windows the new architecture's
+  renderer targets Composition from the start, in Windows App SDK apps by
+  default, with XAML islands for advanced controls; on macOS a fork of React
+  Native maps its UIKit views onto AppKit. [docs/windows.md](docs/windows.md)
+  cites its threading as prior art: JS on a thread of its own, and every
+  mount posted to the UI thread that alone touches the visuals.
+- [React Native Skia](https://github.com/Shopify/react-native-skia) — 2D
+  graphics for React Native, with a React renderer of its own: the
+  components inside a `<Canvas>` become a Skia display list, cheap to
+  animate with Reanimated. On iOS, Android, macOS and tvOS, in the browser
+  through CanvasKit, and headless on Node. Its experimental Graphite builds
+  render through Dawn and can share a GPU device with React Native WebGPU.
+- [React Native WebGPU](https://github.com/wcandillon/react-native-webgpu) —
+  not a renderer but a GPU surface for React Native: the WebGPU API
+  (`navigator.gpu` and a `<Canvas>` view) on iOS, Android, macOS and
+  visionOS, implemented over Dawn, Chrome's WebGPU implementation. It runs
+  three.js's WebGPU renderer and React Three Fiber. The nearest thing in
+  react-x11 is [`<glarea>`](#3d), which speaks GL instead.
+
 ## See also
 
 - [awesome-react-renderer](https://github.com/chentsulin/awesome-react-renderer)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.15.3",
+  "version": "2.16.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -102,12 +102,12 @@
   "dependencies": {
     "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
-    "ntk": "^8.7.0",
+    "ntk": "^8.9.0",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.10.0",
+    "@windowkit/appkit": "^0.12.0",
     "@windowkit/wayland": "^3.1.1",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.9.0"

package/src/Reconciler.js

@@ -24,6 +24,13 @@ import {
 } from './nodes/window/window.js';
 import { PopupNode } from './nodes/window/popup.js';
 import { BoxNode } from './nodes/box.js';
+import { THEME_SCOPE } from './nodes/kinds.js';
+import {
+  ThemeBoxNode,
+  ThemeScopeNode,
+  attachTopLevel,
+  detachTopLevel,
+} from './nodes/scope.js';
 import { TextNode, TextChunkNode, setTextStripBelow } from './nodes/text.js';
 import { ImageNode } from './nodes/image.js';
 import { CanvasNode } from './nodes/canvas.js';
@@ -60,7 +67,11 @@ import { watchAppearance } from './appearance.js';
 import { setDesktopIntegration } from './desktopintegration.js';
 import { ForeignNode } from './foreignnodes.js';
 import { GlAreaNode } from './glnodes.js';
-import { createRegisteredNode, registeredElements } from './registry.js';
+import {
+  createRegisteredNode,
+  elementDefinition,
+  registeredElements,
+} from './registry.js';
 import { SvgNode, SvgChildNode } from './svgnodes.js';
 import { loadLayout } from './yoga.js';
 
@@ -97,6 +108,36 @@ export const HOST_TYPES = [
   'foreign',
 ];
 
+// The host context of the root's own children. `atRoot` is what lets
+// `createInstance` see that an element has no window above it — there is no
+// other moment to know it: a node is built bottom-up, before it has a parent
+// to ask, and appended to the container only in the commit.
+const ROOT_CONTEXT = Object.freeze({
+  isInsideText: false,
+  isInsideSvg: false,
+  atRoot: true,
+  inWindow: false,
+});
+
+// What the root of the tree can hold: the elements that are windows of their
+// own, and the provider's node, which holds more of them. Everything else
+// draws into a window, so it has to be inside one.
+const ROOT_TYPES = new Set(['window', 'popup', THEME_SCOPE]);
+
+/**
+ * A drawn element with no window above it. Without this it reached
+ * `appendChildToContainer` and failed there as `child.realize is not a
+ * function` — or, under a `<ThemeProvider>`, as a `<window>` nested in a
+ * `<box>` the app never wrote (#584).
+ */
+function notAtRoot(type) {
+  return new Error(
+    `react-x11: <${type}> must be inside a <window> — it is at the root of ` +
+      'the tree, which holds only <window> and <popup> elements. Render it ' +
+      `inside one: <window><${type} …/></window>.`,
+  );
+}
+
 const HostConfig = {
   supportsMutation: true,
   supportsPersistence: false,
@@ -135,10 +176,7 @@ const HostConfig = {
   scheduleMicrotask: queueMicrotask,
 
   getRootHostContext() {
-    return {
-      isInsideText: false,
-      isInsideSvg: false,
-    };
+    return ROOT_CONTEXT;
   },
 
   getChildHostContext(parentHostContext, type) {
@@ -150,6 +188,12 @@ const HostConfig = {
       isInsideText: parentHostContext.isInsideText || type === 'text',
       // <svg> children are declarative SVG elements, not react-x11 nodes
       isInsideSvg: parentHostContext.isInsideSvg || type === 'svg',
+      // Still at the root under a `<ThemeProvider>` written there, which
+      // draws nothing; under anything else, inside a window.
+      atRoot: parentHostContext.atRoot && type === THEME_SCOPE,
+      // Directly inside a window, where a provider can hand a nested window
+      // on to it.
+      inWindow: type === 'window' || type === 'popup',
     };
   },
 
@@ -195,6 +239,17 @@ const HostConfig = {
           '<text> spans and strings are.',
       );
     }
+    // Asked here, in the render phase, rather than when the node reaches the
+    // container: an error boundary above can catch it, and nothing has been
+    // built yet. A name nobody knows gets the unknown-element error below,
+    // which lists what there is.
+    if (
+      hostContext.atRoot &&
+      !ROOT_TYPES.has(type) &&
+      (HOST_TYPES.includes(type) || elementDefinition(type))
+    ) {
+      throw notAtRoot(type);
+    }
     let node;
     switch (type) {
       case 'window':
@@ -216,6 +271,18 @@ const HostConfig = {
       case 'box':
         node = new BoxNode(props, rootContainer);
         break;
+      case THEME_SCOPE:
+        // `<ThemeProvider>`'s node (nodes/kinds.js). Above the windows it
+        // draws nothing and hands its palette to the windows under it; inside
+        // a window it is the box that fills its parent it has always been, so
+        // `style` means what it says and a `$token` beneath resolves — and
+        // directly inside one, a box that passes nested windows on to it.
+        node = hostContext.atRoot
+          ? new ThemeScopeNode(props, rootContainer)
+          : hostContext.inWindow
+            ? new ThemeBoxNode(props, rootContainer)
+            : new BoxNode(props, rootContainer);
+        break;
       case 'textinput':
         node = new TextInputNode(props, rootContainer);
         break;
@@ -278,6 +345,13 @@ const HostConfig = {
   },
 
   createTextInstance(text, rootContainer, hostContext) {
+    if (hostContext.atRoot) {
+      throw new Error(
+        `react-x11: raw text ${JSON.stringify(text)} must be inside a ` +
+          '<window>, in a <text> element — it is at the root of the tree, ' +
+          'which holds only <window> and <popup> elements.',
+      );
+    }
     if (!hostContext.isInsideText && !hostContext.isInsideSvg) {
       throw new Error(
         `react-x11: raw text ${JSON.stringify(text)} must be wrapped in a ` +
@@ -338,19 +412,11 @@ const HostConfig = {
     parentInstance.insertBefore(child, null);
   },
 
+  // The root holds windows, popups and theme scopes (`createInstance` turned
+  // everything else away), and nodes/scope.js is what knows how to put each
+  // of them there — a scope's windows can arrive after the scope did.
   appendChildToContainer(container, child) {
-    if (!child.window) {
-      // Top-level window: realize the whole subtree top-down against the
-      // screen root.
-      child.realize(null);
-    }
-    // React's getPublicRootInstance answers from the root fiber's first
-    // child, and only when that child is a host component. `render()` wraps
-    // the tree in a context provider, which is not one, so it would answer
-    // null — the container keeps the list instead. Same answer as before:
-    // the first top-level node the tree put here.
-    (container._rootChildren ??= []).push(child);
-    a11yHooks.rootMounted?.(child);
+    attachTopLevel(container, child);
   },
 
   insertBefore(parentInstance, child, beforeChild) {
@@ -358,7 +424,7 @@ const HostConfig = {
   },
 
   insertInContainerBefore(container, child) {
-    HostConfig.appendChildToContainer(container, child);
+    attachTopLevel(container, child);
   },
 
   removeChild(parentInstance, child) {
@@ -366,11 +432,8 @@ const HostConfig = {
   },
 
   removeChildFromContainer(container, child) {
-    const roots = container._rootChildren;
-    const at = roots ? roots.indexOf(child) : -1;
-    if (at !== -1) roots.splice(at, 1);
     // before the destroy, while the subtree is still walkable
-    a11yHooks.rootUnmounted?.(child);
+    detachTopLevel(container, child);
     child.destroySubtree();
   },
 

package/src/anchor.js

@@ -204,44 +204,86 @@ export function anchorRect(node, options = {}) {
   // popup's `x`/`y` props. The math between runs in device pixels, because
   // `abs`, the window origin and the monitor area are (src/scale.js).
   const s = node.scale ?? 1;
+  // The anchor is the sub-rect where there is one, all the way through:
+  // the side that flips, the edge that aligns, and — since a popup with no
+  // size of its own is as wide as the thing it hangs off — the default
+  // width.
+  const anchor = subRect(node, deviceAt(options.at, s));
+  // the rect the *alignment* reads, which is the anchor's own unless the
+  // caller split the two axes — one origin serves both, since both nodes are
+  // in the same window
+  const cross = options.alignTo ? (subRect(options.alignTo) ?? anchor) : anchor;
+  const origin = windowOrigin(node);
+  const onScreen = (r) => ({
+    x: origin.x + r.x,
+    y: origin.y + r.y,
+    width: r.width,
+    height: r.height,
+  });
+  return placeAgainst(
+    onScreen(anchor),
+    onScreen(cross),
+    deviceAnchorArea(node),
+    s,
+    { ...options, direction: options.direction ?? node.direction },
+  );
+}
+
+/**
+ * The same placement against a rect **on the screen**, with no node behind
+ * it: the frame of the tray item a click reports, or a point where the
+ * pointer was. `rect` is logical screen pixels, the unit a popup's `x`/`y`
+ * are in, and `{ x, y }` alone is a point; the result is logical too.
+ *
+ * `scale` is the display's, since there is no node to ask, and `direction`
+ * decides what `'start'` and `'end'` mean — a node's anchor takes both from
+ * the node. The popup is kept on the monitor the rect is on.
+ */
+export function anchorScreenRect(app, rect, options = {}) {
+  if (typeof rect?.x !== 'number' || typeof rect?.y !== 'number') return null;
+  const s = options.scale ?? 1;
+  const anchor = {
+    x: rect.x * s,
+    y: rect.y * s,
+    width: (rect.width ?? 0) * s,
+    height: (rect.height ?? 0) * s,
+  };
+  const area = app ? availableArea(app, { x: anchor.x, y: anchor.y }) : null;
+  return placeAgainst(anchor, anchor, area, s, options);
+}
+
+/**
+ * The placement both anchors share, in device pixels: `anchor` is the rect
+ * the popup hangs off, `cross` the one it aligns to, both on the screen, and
+ * `area` what it is kept inside — null where there is nothing to ask, and it
+ * then neither flips nor clamps.
+ */
+function placeAgainst(anchor, cross, area, s, options) {
   const {
     placement = 'bottom',
     align = 'start',
     alignOffset: logicalAlignOffset = 0,
     offset: logicalOffset = 2,
-    at,
-    alignTo,
     // A popup that covers its own anchor — a native popup button's menu,
     // which opens with the chosen row over the control — has no other side
     // to flip to: it is clamped into the screen instead, as AppKit clamps.
     flip = true,
-    direction = node.direction,
+    direction,
   } = options;
   const alignOffset = logicalAlignOffset * s;
   const offset = logicalOffset * s;
   const rtl = direction === 'rtl';
 
-  // The anchor is the sub-rect where there is one, all the way through:
-  // the side that flips, the edge that aligns, and — since a popup with no
-  // size of its own is as wide as the thing it hangs off — the default
-  // width.
-  const anchor = subRect(node, deviceAt(at, s));
   const width = options.width !== undefined ? options.width * s : anchor.width;
   const height = options.height !== undefined ? options.height * s : 0;
 
-  const origin = windowOrigin(node);
-  const ax = origin.x + anchor.x;
-  const ay = origin.y + anchor.y;
+  const ax = anchor.x;
+  const ay = anchor.y;
   const aw = anchor.width;
   const ah = anchor.height;
-  // the rect the *alignment* reads, which is the anchor's own unless the
-  // caller split the two axes — one origin serves both, since both nodes are
-  // in the same window
-  const cross = alignTo ? (subRect(alignTo) ?? anchor) : anchor;
-  const cx = origin.x + cross.x;
-  const cy = origin.y + cross.y;
+  const cx = cross.x;
+  const cy = cross.y;
 
-  const area = deviceAnchorArea(node);
   const left = area?.x ?? 0;
   const top = area?.y ?? 0;
   const right = area ? area.x + area.width : null;

package/src/capabilities.js

@@ -176,8 +176,8 @@ async function probeNotifications({ app } = {}) {
 // tray
 // ---------------------------------------------------------------------------
 
-async function probeTray({ app } = {}) {
-  const target = app ?? soleApp();
+/** The tray on an app that has one of its own, which needs nothing asked. */
+function trayNow(target) {
   if (typeof target?.createStatusItem === 'function') {
     return frozen('cocoa', {
       menu: true,
@@ -194,6 +194,12 @@ async function probeTray({ app } = {}) {
       scroll: false,
     });
   }
+  return null;
+}
+
+async function probeTray({ app } = {}) {
+  const now = trayNow(app ?? soleApp());
+  if (now) return now;
 
   const ref = await sessionBus();
   if (!ref) return NONE;
@@ -226,8 +232,8 @@ async function probeTray({ app } = {}) {
 // launcher
 // ---------------------------------------------------------------------------
 
-async function probeLauncher({ app } = {}) {
-  const target = app ?? soleApp();
+/** The Dock tile on an app that has one, which needs nothing asked. */
+function launcherNow(target) {
   if (typeof target?.setDockBadge === 'function') {
     return frozen('cocoa', {
       badge: true,
@@ -239,6 +245,12 @@ async function probeLauncher({ app } = {}) {
       needsDesktopFile: false,
     });
   }
+  return null;
+}
+
+async function probeLauncher({ app } = {}) {
+  const now = launcherNow(app ?? soleApp());
+  if (now) return now;
 
   // The Linux rung needs two things that are not the bus: an app id to
   // attribute the entry to, and a `.desktop` file of that name for the
@@ -322,3 +334,16 @@ export async function desktopCapability(name, options = {}) {
 /** The "nothing here" answer, exported so a caller can compare against it and
  *  so the hook has something stable to return on the first frame. */
 export const NO_CAPABILITY = NONE;
+
+/**
+ * The answer for a capability where it is known without asking anything —
+ * the Cocoa app's own tray and Dock tile — or null where finding out takes a
+ * round trip. What lets `useDesktopCapability` be settled on its first frame
+ * where the answer never needed waiting for.
+ */
+export function capabilityNow(name, { app } = {}) {
+  const target = app ?? soleApp();
+  if (name === 'tray') return trayNow(target);
+  if (name === 'launcher') return launcherNow(target);
+  return null;
+}

package/src/cocoa/app.js

@@ -40,6 +40,7 @@ import { CocoaFilePanels } from './filepanels.js';
 import { CocoaFontManager } from './fonts.js';
 import { releaseImageUpload } from './context2d.js';
 import { CocoaSurface } from './surface.js';
+import { CocoaSymbols } from './symbols.js';
 import { CocoaWindow } from './window.js';
 import { decodeKey, modifierMask } from './keymap.js';
 import { loadNative } from './native.js';
@@ -200,6 +201,8 @@ export class CocoaApp {
     // real bridge on the machine — the manager's default loads it only when
     // it is built standalone
     this.fonts = new CocoaFontManager(native);
+    // `<image src={{ symbol }}>`'s names are SF Symbols here (src/symbols.js)
+    this.symbols = new CocoaSymbols(native);
 
     // Native open/save panels (src/cocoa/filepanels.js). Present exactly
     // when the bridge has them (>= 0.5), and its presence is what puts the
@@ -641,6 +644,8 @@ export class CocoaApp {
   _unregisterWindow(wnd) {
     this._windows.delete(wnd._key);
     if (this._grabWindow === wnd) this._grabWindow = null;
+    // a popup that took the keyboard and closed is not where keys go next
+    if (this._lastKeyWindow === wnd) this._lastKeyWindow = null;
   }
 
   // --- the pump ------------------------------------------------------------
@@ -802,8 +807,8 @@ export class CocoaApp {
     this._rafQueue = [];
     let soonest = Infinity;
     for (const entry of queue) {
-      // A window whose last flip has not given its back buffer back yet
-      // (threaded mode's fence, `CocoaWindow.frameInFlight`) waits before
+      // 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
       // again.
@@ -874,7 +879,7 @@ export class CocoaApp {
    * paid once, when the batch is done: ten moves and a click that crossed
    * while this thread was busy are one frame, not eleven. Then what a pump
    * tick does: the frames that are due, and the ones a window's visibility
-   * or its back buffer was holding, which an occlusion change or a
+   * or its last flip was holding, which an occlusion change or a
    * `surface-released` in this very batch may just have freed.
    */
   _routeBatch(batch) {
@@ -1090,9 +1095,9 @@ export class CocoaApp {
     // the notch and the scroll, most of a refresh period of nothing.
     //
     // Mostly: a trackpad's momentum lands two in one tick often, and a
-    // second flip inside the refresh draws into the buffer the first one
-    // just took off glass (`CocoaWindow._flippedRecently` says why that
-    // shows). So the rest of a burst lands React's half and leaves the
+    // second flip inside the refresh is a frame the display never shows
+    // (`CocoaWindow._flippedRecently` says what it cost). So the rest of a
+    // burst lands React's half and leaves the
     // paint to the paced frame the scroll already asked for — the model
     // has scrolled, and the next refresh shows all of it.
     if (wnd._flippedRecently()) {
@@ -1201,9 +1206,10 @@ export class CocoaApp {
   /**
    * `surface-released`: a worker's frame took an IOSurface off a layer and
    * the frame that replaced it has committed (windowkit/appkit#52). The
-   * window whose back buffer that was stops waiting on it
-   * (`CocoaWindow._surfaceReleased`), and the tick at the end of this
-   * batch runs the frame it was holding.
+   * window whose buffer that was stops waiting on it, and may draw into it
+   * again once the WindowServer lets go of it too
+   * (`CocoaWindow._surfaceReleased`); the tick at the end of this batch
+   * runs the frame it was holding.
    */
   _routeSurfaceReleased(ev) {
     for (const wnd of this._windows.values()) {

package/src/cocoa/context2d.js

@@ -1046,6 +1046,29 @@ export class CocoaContext2D {
     this._dirty();
   }
 
+  /**
+   * An SF Symbol by name, fitted into the rect and centred, in the fill
+   * colour — `ctxDrawSymbol`, `@windowkit/appkit` 0.12.0. Answers false,
+   * drawing nothing, for a name the system does not know and on a bridge
+   * without the verb. `options` are the bridge's: `pointSize`, `weight`,
+   * `scale`, `variableValue`.
+   */
+  drawSymbol(name, x, y, width, height, options) {
+    if (typeof this._native.ctxDrawSymbol !== 'function') return false;
+    this._applyFill();
+    const drawn = this._native.ctxDrawSymbol(
+      this._s(),
+      name,
+      x,
+      y,
+      width,
+      height,
+      options,
+    );
+    if (drawn) this._dirty();
+    return drawn === true;
+  }
+
   drawImage(image, ...args) {
     const src = this._sourceHandle(image);
     if (!src) return;

package/src/cocoa/fonts.js

@@ -462,11 +462,31 @@ export class CocoaFace {
   }
 }
 
+/**
+ * The features a letter-spaced span is set with: CSS's rule, and ntk's, that
+ * the optional ligatures come off where letters are spaced — an `fi` drawn as
+ * one glyph cannot open in its middle — unless the style names them.
+ */
+const OPTIONAL_LIGATURES_OFF = Object.freeze({
+  liga: 0,
+  clig: 0,
+  dlig: 0,
+  hlig: 0,
+});
+function spacedFeatures(features, spacing) {
+  if (!spacing) return features;
+  return features
+    ? { ...OPTIONAL_LIGATURES_OFF, ...features }
+    : OPTIONAL_LIGATURES_OFF;
+}
+
 export class CocoaFontManager {
   /** @param native the @windowkit/appkit module; the tests hand in a fake */
   constructor(native = loadNative()) {
     this._native = native;
     this._fonts = new Map(); // family|weight|italic|size -> handle
+    // handle -> features key -> the handle with those features set
+    this._featured = new WeakMap();
     this._faces = new Map(); // family|weight|italic -> face wrapper
     this._registered = new Map(); // lowercase family -> [{cg, weight, italic}]
     this._byKey = new Map(); // ntk Font key -> { cg } | { ps }
@@ -585,6 +605,52 @@ export class CocoaFontManager {
     return handle;
   }
 
+  /**
+   * `handle` with OpenType features set — `fontApplyFeatures`, which
+   * `@windowkit/appkit` has from 0.11.0 — for the resolved `features` a
+   * style hands the engines, tag → value. Kept per handle, so a paragraph
+   * laid out every repaint asks the bridge for a featured font once. A
+   * bridge without the verb gets the handle back as it was
+   * (`_textAdjustments`).
+   */
+  _withFeatures(handle, features) {
+    if (!handle || !features || !this._textAdjustments()) return handle;
+    let perHandle = this._featured.get(handle);
+    if (!perHandle) this._featured.set(handle, (perHandle = new Map()));
+    const key = JSON.stringify(features);
+    let featured = perHandle.get(key);
+    if (!featured) {
+      featured = this._native.fontApplyFeatures(handle, features);
+      perHandle.set(key, featured);
+    }
+    return featured;
+  }
+
+  /**
+   * Whether the bridge sets features and letter spacing at all. Both arrived
+   * in one `@windowkit/appkit` release, `fontApplyFeatures` with the span's
+   * `letterSpacing`; an older bridge takes the span option and ignores it,
+   * so the verb is what answers for both.
+   *
+   * Without them the text draws as the face has it — digits proportional,
+   * letters unspaced — and nothing else goes wrong. But a style that asked
+   * for either and got nothing is a question with no thread to pull, so
+   * development says so, once.
+   */
+  _textAdjustments() {
+    if (typeof this._native.fontApplyFeatures === 'function') return true;
+    if (process.env.NODE_ENV !== 'production' && !this._warnedAdjustments) {
+      this._warnedAdjustments = true;
+      console.warn(
+        'react-x11: this @windowkit/appkit has no fontApplyFeatures, so ' +
+          'letterSpacing, fontVariantNumeric and fontFeatureSettings do ' +
+          'nothing on the Cocoa backend. Update @windowkit/appkit to the ' +
+          'version react-x11 lists in its optionalDependencies.',
+      );
+    }
+    return false;
+  }
+
   _withVariations(handle, variations) {
     if (
       variations &&
@@ -882,6 +948,8 @@ export class CocoaFontManager {
         sp.color ?? base.color ?? null,
         sp.variations ?? base.variations ?? null,
         (sp.font ?? base.font)?.key ?? null,
+        sp.features ?? base.features ?? null,
+        sp.letterSpacing ?? base.letterSpacing ?? 0,
       ]),
       options.maxWidth,
       options.align,
@@ -926,12 +994,22 @@ export class CocoaFontManager {
         ),
         variations,
       );
+      // Letter spacing is the typesetter's kerning attribute, and it turns
+      // the optional ligatures off the way ntk does, so the two engines
+      // agree on what a spaced word is made of (#588).
+      let spacing = span.letterSpacing ?? base.letterSpacing ?? 0;
+      if (spacing && !this._textAdjustments()) spacing = 0;
+      handle = this._withFeatures(
+        handle,
+        spacedFeatures(span.features ?? base.features, spacing),
+      );
       const color = span.color ?? base.color;
       if (color == null) contextInk = true;
       nativeSpans.push({
         text: t,
         font: handle,
         ...(color == null ? {} : { color: parseColor(color) }),
+        ...(spacing ? { letterSpacing: spacing } : {}),
       });
     }
     // A width offer of zero is a question, not a degenerate layout: yoga