react-x11 2.1.3 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -83,7 +83,7 @@
     "node": ">=20.19"
   },
   "dependencies": {
-    "ntk": "^8.4.0",
+    "ntk": "^8.5.0",
     "react-reconciler": "^0.33.0",
     "yoga-layout": "^3.2.1"
   },

package/src/Reconciler.js

@@ -53,6 +53,7 @@ import { endIdle } from './idle.js';
 import { endKeyboardState } from './keyboardstate.js';
 import { endXSettings } from './xsettings.js';
 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';
@@ -605,6 +606,12 @@ function watchConnection(app, onDisconnect, deliberate) {
  *
  * `display`, `fontSource`, `glxVisual` and `onXError` go straight to ntk.
  * Anything else ntk understands, build the client yourself and pass `app`.
+ *
+ * `desktop: false` turns off the three things this turns on for you that talk
+ * to the session bus — the appearance ladder, the accessibility bridge and
+ * the global menu — for an embedder that owns them, or a process that must
+ * not fork. `desktop: { appearance: false }` names one. See
+ * src/desktopintegration.js and docs/desktop.md.
  */
 export async function createRoot(options = {}) {
   // Before anything builds a node: every drawn node creates a yoga node in
@@ -627,6 +634,11 @@ export async function createRoot(options = {}) {
   }
   const { app: borrowed, onDisconnect, ...rest } = options;
   const owned = borrowed === undefined;
+  // Before anything starts, for two reasons: a bad `desktop` shape must throw
+  // with nothing in flight, like the check above it — and `startA11y()` below
+  // reads this policy, so it has to be settled before the first await, not
+  // after (src/desktopintegration.js).
+  setDesktopIntegration(rest.desktop);
   // The connection is started first, and the order is the point rather than a
   // detail. `loadLayout()` is only nominally asynchronous: instantiating the
   // engine blocks the event loop for 15-50 ms before it returns its promise

package/src/a11y.js

@@ -40,6 +40,10 @@
 //     from gi.repository import Atspi; \
 //     print({k: int(getattr(Atspi.Role, k)) for k in dir(Atspi.Role) if not k.startswith('_')})"
 
+// The one import, and it keeps this file's promise: a `Set` and two functions
+// over it, with no D-Bus, no node builtins and nothing at module scope.
+import { desktopIntegrationEnabled } from './desktopintegration.js';
+
 /** AT-SPI role numbers (AtspiRole). */
 export const ATSPI_ROLE = Object.freeze({
   INVALID: 0,
@@ -1245,6 +1249,10 @@ let startPromise = null;
  * tests are exactly this case.
  */
 function a11yEnabled() {
+  // `createRoot({ desktop: false })` outranks every environment variable,
+  // including the one that forces the climb: it is the embedder saying this
+  // process does not talk to the desktop (src/desktopintegration.js, #417).
+  if (!desktopIntegrationEnabled('a11y')) return false;
   const own = process.env.REACT_X11_A11Y;
   if (own === '0') return false;
   if (own) return true;

package/src/appearance.js

@@ -57,6 +57,7 @@ import os from 'node:os';
 import path from 'node:path';
 
 import { sessionBus } from './bus.js';
+import { desktopIntegrationEnabled } from './desktopintegration.js';
 import { PORTAL_NAME, PORTAL_PATH } from './portal.js';
 import { beginXSettings, watchXSettings, xsettings } from './xsettings.js';
 
@@ -238,6 +239,12 @@ function sanitize(saved) {
 function load() {
   if (cacheChecked) return;
   cacheChecked = true;
+  // `createRoot({ desktop: false })` means this process does not follow the
+  // desktop, and that has to include the remembered answer: seeding from the
+  // cache would leave an app that opted out drawing in whatever colours this
+  // machine happened to be in last time, which is the opposite of the
+  // determinism the switch is asked for (#417).
+  if (!desktopIntegrationEnabled('appearance')) return;
   const file = cacheFile();
   if (!file) return;
   try {
@@ -702,6 +709,10 @@ async function runLadder(app) {
  */
 export function systemAppearance(options = {}) {
   if (owner) return Promise.resolve(snapshot);
+  // Turned off, so there is nothing to climb and nothing to remember: the
+  // defaults, which is a real answer — `'no-preference'` means *use your own*
+  // (src/desktopintegration.js).
+  if (!desktopIntegrationEnabled('appearance')) return Promise.resolve(NOTHING);
   load();
   if (!probe) {
     // **Failure is not cached**, for the same reason `bus.js` does not cache

package/src/atspi.js

@@ -32,7 +32,7 @@
 // resurrected: the slots are cleared and the app simply stops being
 // accessible until restarted, the same contract bus.js documents.
 
-import { addressFor, loadTransport } from './bus.js';
+import { loadTransport, resolveAddress } from './bus.js';
 import {
   hooks,
   ATSPI_ROLE,
@@ -1818,8 +1818,11 @@ async function connected(bus) {
  */
 async function accessibilityBusAddress(dbus) {
   if (process.env.AT_SPI_BUS_ADDRESS) return process.env.AT_SPI_BUS_ADDRESS;
-  const busAddress = addressFor('session');
-  if (!busAddress && process.platform !== 'darwin') return null;
+  // Resolved, not read: on macOS this is where the session bus address comes
+  // from, and letting `dbus-native` find it for itself would be a blocking
+  // `spawnSync` on the way to the first frame (#417).
+  const busAddress = await resolveAddress('session');
+  if (!busAddress) return null;
   let sbus = null;
   try {
     sbus = dbus.createClient({ busAddress });

package/src/bus.js

@@ -135,9 +135,8 @@ export async function loadTransport() {
  * address is incoherent under sharing. Two callers, two addresses, one
  * socket — which would win? Tests use this same seam.
  *
- * Not public, but exported for atspi.js, whose one-shot discovery probe
- * dials its own short-lived connection rather than the shared one — see
- * the note in `accessibilityBusAddress`.
+ * Synchronous, and so it cannot answer on macOS — see `resolveAddress`,
+ * which is what every dial goes through.
  */
 export function addressFor(kind) {
   if (kind === 'system') {
@@ -149,21 +148,102 @@ export function addressFor(kind) {
   if (process.env.DBUS_SESSION_BUS_ADDRESS) {
     return process.env.DBUS_SESSION_BUS_ADDRESS;
   }
-  // macOS advertises the session bus through launchd, which dbus-native
-  // already falls back to on its own. Leave it undefined and let it.
+  // macOS advertises the session bus through launchd rather than through the
+  // environment, and asking launchd is a subprocess — see `launchdAddress`.
   if (process.platform === 'darwin') return undefined;
   const runtimeDir = process.env.XDG_RUNTIME_DIR;
   return runtimeDir ? `unix:path=${runtimeDir}/bus` : undefined;
 }
 
+/**
+ * The in-flight or settled lookup, shared by every dial in the process.
+ *
+ * **Failure is cached here**, which is the one place in this module where it
+ * is — and the exception is deliberate. A session bus can genuinely appear
+ * under `$XDG_RUNTIME_DIR` mid-run, so that answer is never remembered; what
+ * launchd exports is a *login session* fact, set when the bus is installed
+ * and started, which does not happen under a running app. Re-asking would be
+ * a fork per feature probe to learn the same "no".
+ */
+let launchd = null;
+
+/**
+ * Ask launchd where the session bus is, **without blocking the event loop**.
+ *
+ * This is the whole reason `resolveAddress` exists (#417). `dbus-native` will
+ * do this lookup itself, from `createStream`, with `spawnSync` — it has to,
+ * because its own entry point is synchronous — and a fork+exec of `launchctl`
+ * on a cold page cache costs 120–150 ms of *blocked loop*, measured. Landing
+ * that inside `createRoot()` stalls the X handshake, the yoga instantiate and
+ * the first paint behind a question about the colour scheme.
+ *
+ * Every caller here is already asynchronous, so the same lookup done with
+ * `execFile` costs the same wall clock and none of the loop: the handshake
+ * and the layout engine run through it. Handing `dbus-native` the resolved
+ * `unix:path=…` is then what keeps it off its own synchronous path.
+ *
+ * The variable name is D-Bus's, and the fallback to our own environment is
+ * `launchdSocketPath`'s: a process launched from a shell that has it already
+ * knows the answer.
+ */
+function launchdAddress() {
+  if (launchd) return launchd;
+  launchd = (async () => {
+    const VAR = 'DBUS_LAUNCHD_SESSION_BUS_SOCKET';
+    let fromLaunchd = '';
+    try {
+      const { execFile } = await import('node:child_process');
+      fromLaunchd = await new Promise((resolve) => {
+        execFile(
+          'launchctl',
+          ['getenv', VAR],
+          { encoding: 'utf8' },
+          (err, stdout) => resolve(err ? '' : String(stdout).trim()),
+        );
+      });
+    } catch {
+      // no `launchctl` on $PATH, or no child processes to be had at all
+    }
+    const socket = fromLaunchd || process.env[VAR] || '';
+    return socket ? `unix:path=${socket}` : undefined;
+  })();
+  return launchd;
+}
+
+/**
+ * Where to dial, resolved — the synchronous sources first, and launchd only
+ * where they have nothing to say.
+ *
+ * Not public, but exported for atspi.js, whose one-shot discovery probe
+ * dials its own short-lived connection rather than the shared one — see the
+ * note in `accessibilityBusAddress`. It matters that it goes through here
+ * too: two dials that each let `dbus-native` ask launchd are two blocking
+ * forks, and the answer is the same both times.
+ *
+ * @param {BusKind} kind
+ * @returns {Promise<string | undefined>}
+ */
+export async function resolveAddress(kind) {
+  const direct = addressFor(kind);
+  if (direct !== undefined) return direct;
+  if (kind !== 'session' || process.platform !== 'darwin') return undefined;
+  return await launchdAddress();
+}
+
 function noAddressError(kind) {
+  if (kind !== 'session') {
+    return new Error(
+      'react-x11: no system bus address. $DBUS_SYSTEM_BUS_ADDRESS is unset ' +
+        'and there is no default.',
+    );
+  }
   return new Error(
-    `react-x11: no ${kind} bus address. ` +
-      (kind === 'session'
-        ? '$DBUS_SESSION_BUS_ADDRESS is unset and $XDG_RUNTIME_DIR is not ' +
-          'set either, which is normal over ssh, under a bare startx and in ' +
-          'most containers.'
-        : '$DBUS_SYSTEM_BUS_ADDRESS is unset and there is no default.'),
+    'react-x11: no session bus address. $DBUS_SESSION_BUS_ADDRESS is unset ' +
+      (process.platform === 'darwin'
+        ? 'and launchd has no $DBUS_LAUNCHD_SESSION_BUS_SOCKET either, which ' +
+          'is normal on a Mac with no D-Bus installed.'
+        : 'and $XDG_RUNTIME_DIR is not set either, which is normal over ssh, ' +
+          'under a bare startx and in most containers.'),
   );
 }
 
@@ -216,8 +296,11 @@ async function connect(kind, generation) {
     return fail(noTransportError(cause));
   }
 
-  const busAddress = addressFor(kind);
-  if (!busAddress && process.platform !== 'darwin') {
+  // Resolved rather than read, so `dbus-native` never reaches its own
+  // `spawnSync` fallback on macOS (#417) — and so "this Mac has no D-Bus"
+  // fails here, before a socket is dialled, instead of inside a constructor.
+  const busAddress = await resolveAddress(kind);
+  if (!busAddress) {
     return fail(noAddressError(kind));
   }
 
@@ -538,6 +621,10 @@ export function busRefs(kind) {
  * exported object survives into the next test.
  */
 export function _resetBusState() {
+  // Including what launchd said: a suite that pins `process.platform` would
+  // otherwise inherit the answer — or the absence of one — from a case that
+  // ran under a different one.
+  launchd = null;
   for (const kind of KINDS) {
     state[kind] = newState(kind, state[kind].generation + 1);
     notify(kind);

package/src/components/Menu.js

@@ -59,7 +59,12 @@ const h = React.createElement;
 const MENU_ITEM_PAD = 8;
 const menuRowHeight = (fontSize) => capBand(fontSize) + MENU_ITEM_PAD * 2;
 
-const MENU_SEPARATOR_HEIGHT = 7;
+// A separator is the hairline plus the air that makes it a division rather
+// than a row with a line through it — the two groups it stands between have
+// to read as apart, and at three pixels a side the line just crowds the
+// labels above and below it.
+const MENU_SEPARATOR_PAD = 5;
+const MENU_SEPARATOR_HEIGHT = MENU_SEPARATOR_PAD * 2 + 1;
 
 const MENU_MIN_WIDTH = 140;
 
@@ -76,28 +81,47 @@ const MENU_PAD = 4;
 // borders on its *controls* does not mean a 2px outline around every menu.
 const MENU_BORDER = 1;
 
-// How far a bar item's pill sits inside the bar, taken out of its padding so
-// the bar's height does not change. The strip carries the same inset at its
-// two ends: a pill that starts in the window's own corner reads as part of
-// the frame rather than as something on a strip, and the first menu is the
-// one every pointer arrives at.
-const BAR_INSET = 3;
-// the gap between two pills, split between them
-const BAR_GAP = 1;
-
 // A bar item wears the same pill as a row in the menu it opens, so it takes
 // the row's padding rather than numbers of its own: a title packed tighter
 // than its own first row is the tell that the two were measured separately.
 // Vertically that is `MENU_ITEM_PAD` exactly — same padding, same `capTrim`
-// text — which makes the pill `menuRowHeight` tall, and the bar that much
-// taller for it.
+// text — which makes the pill `menuRowHeight` tall and the strip exactly
+// that: a menu bar is one row, and its highlight fills it top to bottom the
+// way a real one does. Inset the pill instead and the bar is a row plus two
+// margins tall, with a highlight floating in a band of leftover strip.
+//
+// Horizontally it takes a little more, and the number is measured rather
+// than argued: the bar this one is imitating leaves 22px between the ink of
+// two titles, so that is what a title's own padding and its neighbour's have
+// to add up to. A row's label in a menu with a check column is
+// `MENU_ITEM_PAD + MENU_GUTTER` from the pill's edge anyway, so the row's own
+// padding would read as the cramped one here — a title has no column to sit
+// past, but it does sit shoulder to shoulder with the next title.
 //
-// Horizontally it takes a little more. A row's label is not `MENU_ITEM_PAD`
-// from the pill's edge but a whole `MENU_GUTTER` in, past the check column,
-// so matching the row's padding here would read as the cramped one: on a
-// strip the pills sit shoulder to shoulder, with nothing but that padding
-// between one label and the next.
-const BAR_ITEM_PAD_X = MENU_ITEM_PAD + 4;
+const BAR_ITEM_PAD_X = MENU_ITEM_PAD + 3;
+
+// The pill is wider than the item that owns it. Measured off the same bar:
+// its highlight runs 16px past the ink of the title it belongs to, which is
+// five past the halfway line between that title and the next — so a lit
+// title reaches *into* both neighbours' halves of the strip rather than
+// stopping politely at the boundary. It reads as one object sitting on the
+// bar; a pill that stops at the midpoint reads as one cell of a table that
+// happens to be filled in.
+//
+// Drawn, not laid out. The item box still tiles the strip, so the 22px
+// between two titles is still two paddings and the pointer still belongs to
+// exactly one item everywhere along the bar. Widening the boxes to the size
+// of the pill instead would overlap them by ten pixels, and then the last
+// five of a title's own highlight would open its neighbour's menu.
+const BAR_PILL_BLEED = 5;
+
+// What is left of the strip at its two ends, before the first pill and after
+// the last: a highlight cut off square by the window's edge is the one place
+// a pill has no room to be a pill. Measured like the rest — a native bar
+// leaves five — and the strip's padding is that plus the bleed, since the
+// pill starts before its item does.
+const BAR_END_INSET = 5;
+const BAR_END_PAD = BAR_END_INSET + BAR_PILL_BLEED;
 
 // The bar entry that stands for the titles that did not fit. A symbol rather
 // than a `label`, because it is the one entry on the bar the application did
@@ -119,9 +143,29 @@ const OVERFLOW_KEY = '\0menubar-overflow';
 // way (`movingToward`), so this is a matter of taste rather than of reach.
 const SUBMENU_GAP = 0;
 
-const MENU_GUTTER = 24; // room for the check column
-// what a self-drawing icon gets to fill, inside that column's 16px
+// what a self-drawing icon gets to fill
 const MENU_ICON_SIZE = 12;
+// The air between that mark and the label it belongs to. A mark set against
+// its label with a pixel or two to spare reads as part of the word rather
+// than as a column of its own — but the column is an indent every label in
+// the menu pays for, so it is the smallest gap that still reads as one:
+// enough to separate two things, less than the space between two words.
+const MENU_ICON_GAP = 6;
+// The check column: the mark's own box plus that gap. The mark starts at the
+// row's padding — flush with where a label starts in a menu that has no
+// column at all — so the whole of the column's width is the space after it.
+const MENU_GUTTER = MENU_ICON_SIZE + MENU_ICON_GAP;
+
+// Menu text sits a step above the body weight. A menu is read in glances
+// rather than in sentences — a title on a strip, a row under the pointer —
+// and the native ones are all set a shade heavier for it. Where the face has
+// a medium this picks it; where it has only a regular and a bold, 500 is
+// nearer the regular and nothing changes, which is the right failure.
+//
+// Every label measured for a popup's width is measured at this weight too
+// (`measureLabel` takes it), since a menu sized in regular for rows drawn in
+// medium is a menu whose own labels run into its shortcuts.
+const MENU_TEXT_WEIGHT = 500;
 
 const MENU_SHORTCUT_GAP = 24;
 // menus size to their content rather than scrolling, so a page is a fixed
@@ -138,6 +182,37 @@ function menuListHeight(items, fontSize) {
   return body + (MENU_PAD + MENU_BORDER) * 2;
 }
 
+/**
+ * The width of this menu's check column, which is `0` for a menu with
+ * nothing to draw in it.
+ *
+ * The question is asked of the level rather than of the row — one mark
+ * anywhere in a menu indents every label in it, which is what puts the
+ * labels in a column of their own — and what counts is what is *drawn*, not
+ * what could be. A checkbox that is off draws nothing, so a menu of unticked
+ * toggles is a menu of plain commands as far as the eye is concerned, and it
+ * gets the plain menu's left edge.
+ *
+ * The cost is the one every toolkit reserving this column is avoiding:
+ * ticking the first item in such a menu moves its labels sideways. That is
+ * the trade this codebase makes deliberately — an indent on every menu with
+ * a toggle anywhere in it, paid by every label in it, buys stillness in the
+ * one frame where something is ticked. A menu that already has a mark keeps
+ * the column whatever happens to the rest, so the movement is once at the
+ * boundary rather than on every tick.
+ *
+ * `toggleState` is dbusmenu's three-state one: `-1` draws a dash and counts,
+ * `0` draws nothing and does not. A separator answers for nothing either way,
+ * since it spans the row.
+ */
+function menuGutter(items) {
+  const wanted = visibleItems(items).some(
+    (item) =>
+      !isSeparator(item) && (toggleMark(item) != null || item.icon != null),
+  );
+  return wanted ? MENU_GUTTER : 0;
+}
+
 /** Widest label + shortcut, measured, so the popup can be sized up front. */
 function menuListWidth(node, items, fontSize) {
   let widest = 0;
@@ -145,20 +220,23 @@ function menuListWidth(node, items, fontSize) {
     if (isSeparator(item)) continue;
     const label = measureLabel(node, item.label ?? '', {
       size: fontSize,
+      weight: MENU_TEXT_WEIGHT,
     }).width;
     const accelerator = formatShortcut(item.shortcut);
     const shortcut = accelerator
-      ? measureLabel(node, accelerator, { size: fontSize }).width +
-        MENU_SHORTCUT_GAP
+      ? measureLabel(node, accelerator, {
+          size: fontSize,
+          weight: MENU_TEXT_WEIGHT,
+        }).width + MENU_SHORTCUT_GAP
       : 0;
     widest = Math.max(widest, label + shortcut);
   }
   return Math.max(
     MENU_MIN_WIDTH,
     Math.ceil(widest) +
-      MENU_GUTTER +
+      menuGutter(items) +
       (MENU_PAD + MENU_BORDER) * 2 +
-      MENU_ITEM_PAD +
+      MENU_ITEM_PAD * 2 +
       2,
   );
 }
@@ -169,13 +247,15 @@ function menuListWidth(node, items, fontSize) {
  * `menuListWidth` so the two cannot drift.
  */
 function barItemWidth(node, label, fontSize) {
-  const text = measureLabel(node, label ?? '', { size: fontSize }).width;
-  return Math.ceil(text) + (BAR_ITEM_PAD_X + BAR_GAP) * 2;
+  const text = measureLabel(node, label ?? '', {
+    size: fontSize,
+    weight: MENU_TEXT_WEIGHT,
+  }).width;
+  return Math.ceil(text) + BAR_ITEM_PAD_X * 2;
 }
 
 /** The same, for the chevron: an icon box where a title has its label. */
-const barOverflowWidth = (fontSize) =>
-  iconSize(fontSize) + (BAR_ITEM_PAD_X + BAR_GAP) * 2;
+const barOverflowWidth = (fontSize) => iconSize(fontSize) + BAR_ITEM_PAD_X * 2;
 
 /**
  * How many titles the bar can paint, and therefore where it is cut. The rest
@@ -195,7 +275,7 @@ const barOverflowWidth = (fontSize) =>
  */
 function barCut(node, menus, fontSize, width) {
   const widths = menus.map((menu) => barItemWidth(node, menu.label, fontSize));
-  const inner = width - (BAR_INSET - BAR_GAP) * 2;
+  const inner = width - BAR_END_PAD * 2;
   const total = widths.reduce((sum, w) => sum + w, 0);
   if (total <= inner) return menus.length;
   const room = inner - barOverflowWidth(fontSize);
@@ -314,6 +394,10 @@ function MenuRow({
   onMove,
   onSelect,
   fontSize,
+  // The width of the level's check column — the same number the popup was
+  // sized with, passed down rather than asked of the item, since a row with
+  // no mark of its own still keeps the column its neighbours need.
+  gutter,
   nodeRef,
 }) {
   const theme = useTheme();
@@ -369,7 +453,6 @@ function MenuRow({
         alignItems: 'center',
         paddingLeft: MENU_ITEM_PAD,
         paddingRight: MENU_ITEM_PAD,
-        cursor: dim ? undefined : 'pointer',
         // A pill inside the sheet: the row is inset from the popup edge by
         // the list's padding, and rounded so that its corner and the sheet's
         // share a centre — the two curves are then one shape rather than two
@@ -397,21 +480,37 @@ function MenuRow({
           : { ':active': { backgroundColor: theme.accentActive } }),
       },
     },
+    gutter > 0 &&
+      h(
+        'box',
+        {
+          // The mark sits at the head of the column and the gap is what
+          // follows it, rather than the column centring its box and leaving
+          // half the gap on either side: the label is the thing that has to
+          // stand clear, and the row's own padding already spaces the mark.
+          style: { width: gutter, alignItems: 'flex-start' },
+        },
+        gutterMark(item, { color: rowInk, fontSize }),
+      ),
     h(
-      'box',
-      { style: { width: MENU_GUTTER - MENU_ITEM_PAD, alignItems: 'center' } },
-      gutterMark(item, { color: rowInk, fontSize }),
+      'text',
+      { style: [capTrim, { fontSize, fontWeight: MENU_TEXT_WEIGHT }] },
+      item.label,
     ),
-    h('text', { style: [capTrim, { fontSize }] }, item.label),
     h('box', { style: { flexGrow: 1 } }),
-    // The accelerator and the chevron are quieter than the label at rest and
-    // rise with the row when it is chosen — so on an active row they say
-    // nothing and take what the row set.
+    // The accelerator is quieter than the label at rest and rises with the
+    // row when it is chosen — so on an active row it says nothing and takes
+    // what the row set. A shortcut is a second way to do what the label
+    // already says; the chevron below it is not, and keeps the row's ink.
     accelerator &&
       h(
         'text',
         {
-          style: [capTrim, { fontSize }, !active && { color: theme.textMuted }],
+          style: [
+            capTrim,
+            { fontSize, fontWeight: MENU_TEXT_WEIGHT },
+            !active && { color: theme.textMuted },
+          ],
         },
         accelerator,
       ),
@@ -424,7 +523,9 @@ function MenuRow({
         // stands as tall as its box, so `MENU_ICON_SIZE` would put an arrow
         // beside the label taller than the label.
         size: capBand(fontSize),
-        style: !active && { color: theme.textMuted },
+        // no `color`: the arrow is the row saying it has more behind it, as
+        // much a part of the entry as its label, and a muted one reads as a
+        // row that is half disabled rather than one with a submenu
       }),
   );
 }
@@ -463,6 +564,9 @@ function MenuLevel({
 }) {
   const theme = useTheme();
   const items = levelItems(rootItems, path, depth);
+  // one answer for the level, so every row indents by the same amount the
+  // popup was measured with
+  const gutter = menuGutter(items);
   const active = path[depth] ?? -1;
   const childItems = visibleItems(items[active]?.items);
   const childOpen = path.length > depth + 1 && childItems.length > 0;
@@ -621,6 +725,7 @@ function MenuLevel({
           item,
           state: rowState(index, active, handedOn),
           fontSize,
+          gutter,
           nodeRef: index === active ? activeRowRef : undefined,
           onHover: (ev) => hover(index, ev),
           onMove: (ev) => move(index, ev),
@@ -902,6 +1007,11 @@ export function MenuBar({
   const theme = useTheme();
   const rtl = useDirection() === 'rtl';
   const [openIndex, setOpenIndex] = useState(-1);
+  // The pointer's title, tracked here rather than left to a `:hover` block,
+  // because the thing that lights up is no longer the node the pointer is
+  // over: the pill is a child that reaches past its own item, and a state
+  // block only ever answers for the node it is written on.
+  const [hoverIndex, setHoverIndex] = useState(-1);
   const [rect, setRect] = useState(null);
   const [path, setPath] = useState([]);
   const refs = useRef([]);
@@ -1120,8 +1230,8 @@ export function MenuBar({
           flexDirection: 'row',
           alignItems: 'center',
           backgroundColor: theme.surfaceHover,
-          paddingLeft: BAR_INSET - BAR_GAP,
-          paddingRight: BAR_INSET - BAR_GAP,
+          paddingLeft: BAR_END_PAD,
+          paddingRight: BAR_END_PAD,
           // `scroll` is what makes a box report its viewport, and the clip
           // that comes with it is wanted in its own right: it is what holds
           // the one frame before the first measurement — and any bar whose
@@ -1172,10 +1282,17 @@ export function MenuBar({
           onMouseDown: () =>
             openIndex === index ? close() : openMenu(index, 'pointer'),
           onMouseEnter: () => {
+            setHoverIndex(index);
             if (openIndex >= 0 && openIndex !== index) {
               openMenu(index, 'pointer');
             }
           },
+          onMouseLeave: () => {
+            // the index rather than -1 unconditionally: the pointer reaches
+            // the next title before this one hears it left, and clearing
+            // then would put the bar back to nothing lit for a frame
+            setHoverIndex((current) => (current === index ? -1 : current));
+          },
           // read live: by the time a hand-off blurs this item, the item
           // taking over has already claimed the bar
           onBlur: () => {
@@ -1226,33 +1343,14 @@ export function MenuBar({
           },
           style: [
             {
-              cursor: 'pointer',
               paddingLeft: BAR_ITEM_PAD_X,
               paddingRight: BAR_ITEM_PAD_X,
-              // The same pill the rows inside the menu wear, at the same
-              // radius: the bar item and the first row of the menu it opens
-              // are one gesture, and a square title over rounded rows reads
-              // as two widgets that have not met.
-              //
-              // The margin is what a radius needs to be seen — a rounded
-              // rect flush against the strip's own edges reads as a cut
-              // corner rather than a pill. It sits *outside* the padding, so
-              // the bar is a menu row plus its two insets tall: the item and
-              // the row below it are then the same pill in the same size,
-              // which is the whole point of giving the bar one.
-              marginTop: BAR_INSET,
-              marginBottom: BAR_INSET,
-              marginLeft: BAR_GAP,
-              marginRight: BAR_GAP,
+              // No vertical margin: the pill fills the strip, which is a
+              // menu row tall and nothing more. The item and the first row
+              // of the menu it opens are then the same pill in the same
+              // size, which is the whole point of giving the bar one.
               paddingTop: MENU_ITEM_PAD,
               paddingBottom: MENU_ITEM_PAD,
-              borderRadius: rowRadius(theme, MENU_BORDER, MENU_PAD),
-              backgroundColor:
-                barState === 'active'
-                  ? theme.hoverBackground
-                  : barState === 'path'
-                    ? theme.surfaceActive
-                    : undefined,
               // No ring while this item's menu is up. Walking the bar with
               // the arrow keys opens each menu as it arrives, so the item is
               // already inverted with a menu hanging off it — a ring on top
@@ -1267,16 +1365,40 @@ export function MenuBar({
               // said once for whichever of the two the title turns out to be
               color: barState === 'active' ? theme.hoverText : theme.text,
             },
-            // Only while this menu is shut, as in `Select`: an open one is
-            // already showing the answer, and a state block would outrank
-            // the base colour that says so. The menu opens on the release,
-            // so `:active` is the whole of the answer to a held press.
-            openIndex !== index && {
-              ':hover': { backgroundColor: theme.surface },
-              ':active': { backgroundColor: theme.surfaceActive },
-            },
           ],
         },
+        // The pill, drawn before the title so the title is drawn on it. It
+        // is a box of its own rather than this item's background because it
+        // is wider than this item: `BAR_PILL_BLEED` past both edges, which
+        // is where a native bar's highlight ends (see the constant). Only
+        // while it has a colour to be — nothing at rest, since the strip
+        // under it is already that colour.
+        //
+        // Hover is the state that used to be a `:hover` block here and is
+        // now `hoverIndex`, and only while this menu is shut: an open one is
+        // already showing the answer, and the hover colour would outrank the
+        // base colour that says so.
+        (barState || hoverIndex === index) &&
+          h('box', {
+            style: {
+              position: 'absolute',
+              left: -BAR_PILL_BLEED,
+              right: -BAR_PILL_BLEED,
+              top: 0,
+              bottom: 0,
+              // the same radius the rows inside the menu wear: the bar item
+              // and the first row of the menu it opens are one gesture, and
+              // a square title over rounded rows reads as two widgets that
+              // have not met
+              borderRadius: rowRadius(theme, MENU_BORDER, MENU_PAD),
+              backgroundColor:
+                barState === 'active'
+                  ? theme.hoverBackground
+                  : barState === 'path'
+                    ? theme.surfaceActive
+                    : theme.surface,
+            },
+          }),
         overflow
           ? h(Icon, {
               // The set's own overflow mark, rather than the `»` Qt and
@@ -1288,7 +1410,11 @@ export function MenuBar({
               name: 'moreVertical',
               size: iconSize(fontSize),
             })
-          : h('text', { style: [capTrim, { fontSize }] }, menu.label),
+          : h(
+              'text',
+              { style: [capTrim, { fontSize, fontWeight: MENU_TEXT_WEIGHT }] },
+              menu.label,
+            ),
       );
     }),
     openIndex >= 0 &&

package/src/components/Select.js

@@ -131,7 +131,6 @@ function Option({
         justifyContent: 'center',
         paddingLeft: ITEM_PAD_LEFT,
         paddingRight: ITEM_PAD_RIGHT,
-        cursor: 'pointer',
         // the menus' pill, for the same reason and by the same rule: an
         // option list and a menu are one surface with rows in it, and two
         // shapes for that would only say the widgets were written apart

package/src/components/anchor.js

@@ -165,18 +165,27 @@ export function measureLabel(node, text, style) {
   // exactly the kind of error that turns into an ellipsis on the longest
   // label in the menu (src/scale.js).
   const s = node?.scale ?? 1;
+  // The face **this node inherits**, not the literal `sans-serif` at whatever
+  // the defaults are: the labels these popups are sized around name no type
+  // of their own, so the one they are drawn in is the one that cascades down
+  // to them. Measuring in a different face is measuring the wrong label — a
+  // menu sized in sans-serif for a row that paints in a wider mono is a menu
+  // whose own options wrap.
+  //
+  // Which is every property that changes a glyph's advance, not the family
+  // alone. `fontVariationSettings` is the one that bites: a tree that sets
+  // `{ opsz: 17 }` on its window — the text cut of a variable face, wider
+  // than the display cut most files default to — draws every row in it and
+  // used to measure none, and the popup came out narrow enough to wrap its
+  // own labels. An explicit `style` still wins, since a caller that names a
+  // face is measuring something it is about to draw in that face.
+  const inherited = node?.inheritedTextStyle;
   const layout = fonts.layout(String(text), {
-    // The face **this node inherits**, not the literal `sans-serif`: the
-    // labels these popups are sized around name no family of their own, so
-    // the one they are drawn in is the palette's. Measuring in a different
-    // face is measuring the wrong label — a menu sized in sans-serif for a
-    // row that paints in a wider mono is a menu whose own options wrap.
-    family: style?.family ?? node?.inheritedTextStyle?.family ?? 'sans-serif',
+    family: style?.family ?? inherited?.family ?? 'sans-serif',
     size: size * s,
-    weight: style?.weight ?? 'normal',
-    // dropping this would measure a different face from the one drawn, and
-    // the popup sized here would be the wrong width for its own label
-    variations: style?.variations,
+    weight: style?.weight ?? inherited?.weight ?? 'normal',
+    style: style?.style ?? inherited?.style,
+    variations: style?.variations ?? inherited?.variations,
   });
   return { width: layout.width / s, height: layout.height / s };
 }

package/src/desktopintegration.js

@@ -0,0 +1,98 @@
+// Whether this process talks to the desktop at all — the `desktop` option on
+// `createRoot()`, and the one place that decides what it covers.
+//
+// ## What is in the group and why
+//
+// Three things react-x11 turns on for you without being asked, and all three
+// reach the session bus:
+//
+//   `appearance`  the light/dark, accent, contrast and reduced-motion ladder
+//                 (src/appearance.js) — the settings portal, then macOS, then
+//                 XSETTINGS
+//   `a11y`        the AT-SPI bridge, started from `createRoot()`
+//                 (src/a11y.js, docs/accessibility.md)
+//   `globalMenu`  a `MenuBar` handing its menu to the panel instead of drawing
+//                 it (src/globalmenu.js, docs/globalmenu.md)
+//
+// Each already had an off switch and each of those was an **environment
+// variable** — `REACT_X11_A11Y=0`, `NO_AT_BRIDGE=1`,
+// `REACT_X11_NO_GLOBAL_MENU=1`, or unsetting `DBUS_SESSION_BUS_ADDRESS` for
+// the appearance ladder. That is a seam an app cannot reach for itself: the
+// environment is inherited, so a process that sets one before `createRoot()`
+// has also set it for every child it spawns, and the D-Bus one turns off the
+// portals and the app's own services along with the follower. AGENTS.md asks
+// for the off switch to be somewhere the embedder can actually stand.
+//
+// ## Why the policy is process-wide when the option is per-root
+//
+// Because so is the thing it describes. There is one desktop, one D-Bus
+// identity, and one AT-SPI bridge per process — `startA11y()` says so in its
+// name, and appearance.js says so in its header. A per-root flag over
+// process-wide state would be a seam that reads as finer than it is.
+//
+// So **off wins, and off latches.** A root that says `desktop: false` is a
+// root with a constraint — an embedder that owns the toplevel, a test, a
+// daemon that must not fork — and a second root quietly turning the feature
+// back on for it would be the bug. Turning something back *on* is a thing
+// this module deliberately cannot do.
+//
+// The one honest limit: a feature already started stays started. `startA11y()`
+// is memoised per process, so a second root's `desktop: false` stops the next
+// climb and not the bridge that is already up. Pass it on the first root.
+
+/** @typedef {'appearance'|'a11y'|'globalMenu'} DesktopFeature */
+
+/** @type {DesktopFeature[]} */
+const FEATURES = ['appearance', 'a11y', 'globalMenu'];
+
+/** What has been turned off, for the life of the process. */
+const off = new Set();
+
+/**
+ * Apply a root's `desktop` option. Not public — `createRoot({ desktop })` is
+ * the public shape.
+ *
+ * `undefined` is the default and means every feature stays on; `false` turns
+ * all of them off; an object names them one at a time, and a key left out is
+ * left alone.
+ *
+ * @param {boolean | Partial<Record<DesktopFeature, boolean>> | undefined} desktop
+ */
+export function setDesktopIntegration(desktop) {
+  if (desktop === undefined || desktop === true) return;
+  if (desktop === false) {
+    for (const feature of FEATURES) off.add(feature);
+    return;
+  }
+  if (typeof desktop !== 'object') {
+    throw new TypeError(
+      'react-x11: createRoot({ desktop }) takes false or an object of ' +
+        `${FEATURES.map((f) => `${f}: false`).join(', ')} — got ` +
+        `${JSON.stringify(desktop)}.`,
+    );
+  }
+  for (const [feature, on] of Object.entries(desktop)) {
+    if (!FEATURES.includes(/** @type {DesktopFeature} */ (feature))) {
+      throw new TypeError(
+        `react-x11: createRoot({ desktop: { ${feature} } }) — no such ` +
+          `desktop integration. Expected ${FEATURES.join(', ')}.`,
+      );
+    }
+    if (on === false) off.add(feature);
+  }
+}
+
+/**
+ * Whether a feature may run. Every one of the three asks this first, ahead of
+ * its own environment variable, so `desktop: false` is the outermost answer.
+ *
+ * @param {DesktopFeature} feature
+ */
+export function desktopIntegrationEnabled(feature) {
+  return !off.has(feature);
+}
+
+/** Test seam, not public: forget the latch. */
+export function _resetDesktopIntegration() {
+  off.clear();
+}

package/src/globalmenu.js

@@ -57,6 +57,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { loadTransport, sessionBus } from './bus.js';
+import { desktopIntegrationEnabled } from './desktopintegration.js';
 import {
   DBUSMENU_IFACE,
   PROPERTY_TYPES,
@@ -126,6 +127,10 @@ const menuPathFor = (xid) => `/com/react_x11/menus/${xid}`;
  * it is the one that works without touching application code.
  */
 function globalMenuEnabled() {
+  // `createRoot({ desktop: false })` first: handing the menu to a panel is
+  // one of the three things core turns on for you, and that is the switch
+  // that turns the group off (src/desktopintegration.js, #417).
+  if (!desktopIntegrationEnabled('globalMenu')) return false;
   const flag = process.env.REACT_X11_NO_GLOBAL_MENU;
   return !flag || flag === '0';
 }

package/src/index.d.ts

@@ -298,6 +298,43 @@ export interface RootOptions {
    * and coming back is the user's own Tab.
    */
   restoreFocusOnReveal?: boolean;
+  /**
+   * Whether this process talks to the desktop over D-Bus. On by default, and
+   * `false` turns off all three things react-x11 starts for you (#417,
+   * docs/desktop.md):
+   *
+   * | | |
+   * | --- | --- |
+   * | `appearance` | following the desktop's light/dark, accent, contrast and reduced motion (docs/appearance.md) |
+   * | `a11y` | the AT-SPI bridge that makes the app reachable by a screen reader (docs/accessibility.md) |
+   * | `globalMenu` | a `MenuBar` handing its menu to the panel instead of drawing it (docs/globalmenu.md) |
+   *
+   * ```js
+   * await createRoot({ desktop: false });                  // none of it
+   * await createRoot({ desktop: { appearance: false } });  // just that one
+   * ```
+   *
+   * For an embedder that owns those integrations itself, a kiosk or daemon
+   * that must not fork a subprocess to find the bus, and a test that wants
+   * one answer on every machine. With all three off nothing dials the
+   * session bus at startup.
+   *
+   * **Off is process-wide and it latches.** There is one desktop and one
+   * D-Bus identity per process, so a second root cannot turn back on what
+   * another turned off — and a feature already started stays started, so
+   * pass this on the first root.
+   */
+  desktop?: boolean | DesktopIntegrationOptions;
+}
+
+/** Which desktop integrations run. See {@link CreateRootOptions.desktop}. */
+export interface DesktopIntegrationOptions {
+  /** Follow the desktop's light/dark, accent, contrast and reduced motion. */
+  appearance?: boolean;
+  /** The AT-SPI bridge — whether a screen reader can see this app. */
+  a11y?: boolean;
+  /** Whether a `MenuBar` hands its menu to the panel. */
+  globalMenu?: boolean;
 }
 
 export interface ComposeOptions {

package/src/nodes.js

@@ -1218,6 +1218,19 @@ function contentSpan(node, axis, intrinsic, out) {
  * one pass by `contentSpan`. `floored` collects what was written so the next
  * measurement can take it back off — a floor left in place would be read
  * back as content that cannot give, and could then only ratchet upwards.
+ *
+ * A floor is written **unrounded**, and the measurement it came from ran
+ * with the pixel grid off (`measuringExactly`) for the reason given there:
+ * rounding a floor grows the tree a pixel per nesting level. What that
+ * leaves is a sharp edge in yoga worth knowing about before writing a
+ * measure function. A line whose items are all held at their floors is one
+ * yoga freezes item by item, subtracting each item's shrink factor from the
+ * line's total as it goes; the total only cancels to zero if the sizes add
+ * up exactly in binary. Three items of, say, 239.28 in a column that
+ * overflows do not, and yoga divides the overflow by the rounding residue
+ * instead of skipping the division — the items come back a billion pixels
+ * tall (issue #411). Whole pixels cancel exactly, which is why the text
+ * measures here answer in them (`TextNode._trim`).
  */
 function writeContentFloors(node, axis, mins, floored) {
   const axisIsMain = mainAxisOf(node) === axis;
@@ -4587,7 +4600,12 @@ export class TextNode extends Node {
 
   /** Height for a width: the paragraph shaped into whatever is on offer.
    * The offer is `Infinity` when nothing bounds it, which is also what
-   * `textWrap: 'nowrap'` asks for, so neither needs a mode. */
+   * `textWrap: 'nowrap'` asks for, so neither needs a mode.
+   *
+   * Both answers are **whole pixels**, the trimmed one included — see
+   * `_trim` for why the rounding is not cosmetic. The glyphs are placed
+   * from the unrounded trim (`_placedLayout`), so what the rounding moves
+   * is the bottom edge of the box, by less than half a pixel. */
   measureContent({ width }) {
     const layout = this._layoutFor(this._wrapWidth(width));
     if (!layout) return { width: 0, height: 0 };
@@ -4596,7 +4614,9 @@ export class TextNode extends Node {
       width: Math.ceil(layout.width),
       height: Math.max(
         0,
-        Math.ceil(layout.height) - (trim ? trim.top + trim.bottom : 0),
+        trim
+          ? Math.round(Math.ceil(layout.height) - (trim.top + trim.bottom))
+          : Math.ceil(layout.height),
       ),
     };
   }
@@ -4852,6 +4872,21 @@ export class TextNode extends Node {
    * Measured in the coordinates the layout is **drawn** in, not the ones it
    * reports: `halfLeading` shifts it, and deriving the baseline from the
    * metrics again would silently disagree the day that shift changes.
+   *
+   * The amounts are fractions of a pixel and stay that way — the glyphs are
+   * placed from them (`_placedLayout`). What must not stay fractional is the
+   * **box** they leave behind, which is why `measureContent` rounds the
+   * height it reports and this does not (issue #411).
+   *
+   * A trimmed label measures to the cap band, and a cap height is a fraction
+   * of the em — so before the rounding, a column of trimmed titles handed
+   * yoga three or four flex items whose main size had a fraction in it and
+   * whose content floors (#249) were that same fraction. Yoga freezes a line
+   * like that item by item and divides the overflow by a total shrink factor
+   * that should have cancelled to zero; a fraction that is not exact in
+   * binary leaves a rounding residue there instead, and dividing by it laid
+   * the section titles of `examples/configurator` out 5.6 billion pixels
+   * tall. See `writeContentFloors`, which is the other end of it.
    */
   _trim(layout) {
     if (this.style.textBoxTrim !== 'cap-alphabetic') return null;
@@ -6645,8 +6680,8 @@ export class TextInputNode extends Node {
   /** A preferred width, capped to whatever is on offer — `Infinity` when
    * nothing is, which is what makes the `Math.min` the whole rule. */
   measureContent({ width }) {
-    // Not rounded here: a trimmed `<text>` hands layout the raw cap band
-    // too, and rounding one of them and not the other is a pixel of
+    // `_capBand` rounds, and a trimmed `<text>` rounds the same band the
+    // same way — rounding one of them and not the other is a pixel of
     // difference between a field and the button beside it.
     return { width: Math.min(150, width), height: this._capBand() };
   }
@@ -6896,12 +6931,16 @@ export class TextInputNode extends Node {
     };
   }
 
+  /** Whole pixels either way: a field's height is a flex item's main size,
+   *  and a fractional one costs the tree its content floors (see
+   *  `TextNode._trim`, issue #411). The face with no `capHeight` to round is
+   *  the one that reaches the fallback. */
   _capBand() {
     const style = this.resolvedTextStyle();
     const cap = this.app?.fonts
       ?.match?.(style.family, { weight: style.weight, style: style.style })
       ?.metrics?.(style.size)?.capHeight;
-    return cap ? Math.round(cap) : this._lineHeight();
+    return Math.round(cap || this._lineHeight());
   }
 
   /** Shaped layout of the current value, cached per (value, style,