react-x11 2.1.2 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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/ClickToComponent.js

@@ -11,14 +11,44 @@
 // original source — we only have to parse the stack text and skip the
 // frames inside React/the reconciler itself.
 import { spawn } from 'node:child_process';
+import { dirname, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { setClickToComponentHandler } from './events.js';
 import { selectInDevTools } from './DevToolsIntegration.js';
 
 const STACK_FRAME = /^\s*at\s+(?:(.+?)\s+\()?(.+?):(\d+):(\d+)\)?\s*$/;
 
+// The frames to walk past before the JSX call site itself: React captures
+// the Error inside `jsxDEV`/`createElement`, and an element created by this
+// renderer (or by node internals) is never what a click means. `SELF_DIR` is
+// whichever copy of react-x11 is running — the repo's own `src/` for the
+// examples and tests, an installed `node_modules/react-x11/src` for an app.
+//
+// Everything *else* in `node_modules` is deliberately not skipped here: a
+// frame inside an installed package is a real call site, it is just not one
+// in the application's source, and telling the two apart is what lets
+// `resolveOwnedLocation` climb to the owner that is. Skipping every
+// `node_modules` frame instead would walk straight past the library
+// component and land on whatever application frame happens to be deeper in
+// the render stack — usually the `render()` call at startup, which looks
+// like an answer and isn't.
+const REACT_RUNTIME =
+  /[\\/]node_modules[\\/](react|react-dom|react-reconciler|scheduler)[\\/]/;
+const SELF_DIR = dirname(fileURLToPath(import.meta.url)) + sep;
+
+function isInternalFrame(file) {
+  return (
+    file.startsWith('node:') ||
+    file === '<anonymous>' ||
+    file.startsWith(SELF_DIR) ||
+    REACT_RUNTIME.test(file)
+  );
+}
+
 /** The first stack frame outside React/the reconciler/node internals — the
- * user's own JSX call site for whatever element this Error was captured at.
+ * JSX call site for whatever element this Error was captured at, wherever it
+ * was written. `installed` marks a call site that lives inside an installed
+ * package rather than in the application's own source.
  * Exported because `react-x11/test`'s `sourceOf` answers the same question
  * for a test that a click answers for an editor. */
 export function resolveLocation(debugStack) {
@@ -28,26 +58,54 @@ export function resolveLocation(debugStack) {
     const match = line.match(STACK_FRAME);
     if (!match) continue;
     const [, functionName, rawFile, lineStr, columnStr] = match;
-    if (
-      rawFile.includes('/node_modules/') ||
-      rawFile.startsWith('node:') ||
-      rawFile === '<anonymous>'
-    ) {
-      continue;
-    }
     const file = rawFile.startsWith('file://')
       ? fileURLToPath(rawFile)
       : rawFile;
+    if (isInternalFrame(file)) continue;
     return {
       functionName,
       file,
       line: Number(lineStr),
       column: Number(columnStr),
+      installed: file.includes(`${sep}node_modules${sep}`),
     };
   }
   return null;
 }
 
+/** The nearest source location a click can mean: the clicked element's own
+ * JSX call site when the application wrote it, and otherwise the first owner
+ * up the chain that it did write. An element rendered by an installed
+ * component — a design system's `<Toolbar>`, a chart library's internals —
+ * has its call site inside that package; what the user meant by clicking it
+ * is the `<Toolbar ... />` line in their own file that put it on screen.
+ *
+ * Returns `{ fiber, location, depth }`, `depth` being how many owners up the
+ * location came from (0 = the clicked element's own). Falls back to the
+ * nearest installed call site when nothing in the chain is application
+ * source — opening a package's own file beats refusing to open anything —
+ * and null only when React has no debug info at all. */
+export function resolveOwnedLocation(fiber) {
+  let fallback = null;
+  let depth = 0;
+  for (let owner = fiber; owner; owner = owner._debugOwner, depth++) {
+    const location = resolveLocation(owner._debugStack);
+    if (!location) continue;
+    if (!location.installed) return { fiber: owner, location, depth };
+    fallback ??= { fiber: owner, location, depth };
+  }
+  return fallback;
+}
+
+/** What the clicked thing *is* — `<box>` for a host node, the component's
+ * name for a composite one. (`componentName` below answers a different
+ * question: who *wrote* it.) */
+function elementLabel(fiber) {
+  const type = fiber.type;
+  if (typeof type === 'string') return `<${type}>`;
+  return type?.displayName || type?.name || '(anonymous)';
+}
+
 function componentName(fiber) {
   const owner = fiber._debugOwner;
   const type = owner?.type;
@@ -119,13 +177,39 @@ function openInEditor({ file, line, column }) {
     bin = OPEN_URI_COMMAND;
     args = [editorUri(scheme, file, line, column)];
   }
-  const child = spawn(bin, args, { detached: true, stdio: 'ignore' });
+  // stderr is kept (rather than the whole stdio ignored) for one reason:
+  // `open`/`xdg-open` exit non-zero and print *there* when nothing claims
+  // the scheme — an editor that isn't installed, or one whose URL handler
+  // was never registered. Swallowing that is what makes click-to-component
+  // look like it only logs: the location resolves, the console line prints,
+  // and the editor silently never opens.
+  const child = spawn(bin, args, {
+    detached: true,
+    stdio: ['ignore', 'ignore', 'pipe'],
+  });
+  let stderr = '';
+  // ...and unref'd, so keeping it does not keep the process alive: a pipe is
+  // a ref'd handle, and an editor that outlives the app it was launched from
+  // is the normal case, not a reason to hold the event loop open.
+  child.stderr.unref();
+  child.stderr.on('data', (chunk) => {
+    stderr += chunk;
+  });
   child.on('error', (err) => {
     console.warn(
       `react-x11: click-to-component could not launch "${bin}" (${err.code ?? err.message}). ` +
         'Set REACT_X11_EDITOR to your editor CLI (cursor, code, code-insiders, windsurf, vim, nvim).',
     );
   });
+  child.on('exit', (code) => {
+    if (!code) return;
+    console.warn(
+      `react-x11: click-to-component — \`${bin} ${args.join(' ')}\` exited ${code}. ` +
+        (stderr.trim() ? `${stderr.trim()} ` : '') +
+        `Set REACT_X11_EDITOR to the editor you actually use (currently "${name}"; ` +
+        'cursor, code, code-insiders, windsurf, vim, nvim, or any registered URI scheme).',
+    );
+  });
   child.unref();
 }
 
@@ -146,17 +230,29 @@ function handleClick(node, native) {
     );
     return;
   }
-  const location = resolveLocation(fiber._debugStack);
-  if (!location) {
+  const resolved = resolveOwnedLocation(fiber);
+  if (!resolved) {
     console.warn(
-      'react-x11: click-to-component — no source location found. This needs ' +
-        'React running in development mode (fiber._debugStack).',
+      'react-x11: click-to-component — no source location found for this ' +
+        'element or any of its owners. This needs React running in ' +
+        'development mode (fiber._debugStack).',
     );
     return;
   }
+  const { fiber: sourceFiber, location, depth } = resolved;
+  // What was clicked is not always what has a source: say so rather than
+  // silently opening a file the click doesn't obviously correspond to.
+  const climbed =
+    depth > 0
+      ? ` (${depth} owner${depth > 1 ? 's' : ''} up from the clicked ` +
+        `${elementLabel(fiber)})`
+      : '';
+  const installed = location.installed ? ' — inside an installed package' : '';
   console.log(
-    `[click-to-component] ${componentName(fiber)} → ` +
-      `${location.file}:${location.line}:${location.column}`,
+    `[click-to-component] ${componentName(sourceFiber)} → ` +
+      `${location.file}:${location.line}:${location.column}` +
+      climbed +
+      installed,
   );
   if (native?.buttons & 1) {
     // Alt+Shift+Click

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/foreignnodes.js

@@ -340,6 +340,13 @@ export class ForeignNode extends Node {
     this._syncGeometry();
   }
 
+  // the scroll fast path moves `abs` without coming through absolutize
+  // (issue #405), and the embedded window has to follow it all the same
+  _shiftAbs(dx, dy) {
+    super._shiftAbs(dx, dy);
+    this._syncGeometry();
+  }
+
   _syncGeometry() {
     const socket = this.socket;
     if (!socket) return;

package/src/glnodes.js

@@ -230,6 +230,13 @@ export class GlAreaNode extends Node {
     this._syncGeometry();
   }
 
+  // the scroll fast path moves `abs` without coming through absolutize
+  // (issue #405), and the real X window has to follow it all the same
+  _shiftAbs(dx, dy) {
+    super._shiftAbs(dx, dy);
+    this._syncGeometry();
+  }
+
   _syncGeometry() {
     const wnd = this.window;
     if (!wnd) return;

package/src/nodes.js

@@ -3261,6 +3261,74 @@ export class Node {
     }
   }
 
+  /**
+   * Move an already-laid-out subtree by a constant, without asking yoga
+   * anything — the scroll fast path's walk (issue #405).
+   *
+   * A pure-scroll frame changes nothing about the arrangement inside a
+   * viewport: every descendant sits exactly where the last pass put it,
+   * shifted by the scroll delta. `absolutize` would re-derive each rect
+   * through four wasm-boundary getters to learn what one addition already
+   * says, so the scroller calls this instead — only after proving nothing
+   * inside was laid out this pass (see `_absolutizeChildren`).
+   *
+   * `abs` is adjusted in place rather than replaced: its identity is
+   * already long-lived (`_assignAbs` keeps the object whenever a rect is
+   * unchanged), and everything that records a rect for later copies it.
+   * The cached hit bounds ride along instead of being dropped — a uniform
+   * translation is the one change a cached union survives — which keeps a
+   * wheel flick from rebuilding the pane's whole hit-bounds tree per notch.
+   *
+   * No layout diff runs here, and none is owed: under a blit ledger the
+   * shifted diff's claims are the *deviations* from exactly this
+   * translation, and a subtree nothing laid out again has none.
+   */
+  _shiftAbs(dx, dy) {
+    if (!this.yoga) return;
+    const abs = this.abs;
+    abs.x += dx;
+    abs.y += dy;
+    const b = this._hitBoundsCache;
+    if (b) {
+      b.left += dx;
+      b.right += dx;
+      b.top += dy;
+      b.bottom += dy;
+    }
+    this._shiftChildren(dx, dy);
+  }
+
+  /** Split from `_shiftAbs` so a scroller can reroute its children through
+   * its own offset bookkeeping — the box moves rigidly, but the children's
+   * origin also carries scroll offsets that may have changed again this
+   * same frame (`Scrollable._shiftChildren`). */
+  _shiftChildren(dx, dy) {
+    for (const child of this.children) {
+      if (!child.isWindow) child._shiftAbs(dx, dy);
+    }
+  }
+
+  /**
+   * A layout-affecting change at this node may change how far the content
+   * of an enclosing scroll pane reaches through a route yoga never
+   * witnesses — an element that paints its own content growing its extent
+   * announces it with `invalidate(true, this, 'scroll')`
+   * (docs/extending.md), and no yoga node is dirtied by that. Mark every
+   * scroller whose measurement can see this node, so the next pass asks
+   * `measureScrollContent` again instead of reusing the cached reach
+   * (issue #405). The walk stops where the measurement does: at the first
+   * ancestor that clips its children, whose overflow is its own business.
+   */
+  _markScrollMeasureDirty() {
+    for (let n = this; n; n = n.parent) {
+      // only a Scrollable carries the flag; a stale `true` on a box that is
+      // not currently a scroller costs nothing and re-measures correctly if
+      // its style later makes it one
+      if (n._scrollMeasureDirty === false) n._scrollMeasureDirty = true;
+      if (n !== this && n.clipsChildren()) return;
+    }
+  }
+
   /**
    * Ask the owning window to repaint. The damage lives on the window node,
    * which is the only node with a frame clock — this forwards there, so an
@@ -3274,6 +3342,9 @@ export class Node {
    * the mount invalidates in full anyway.
    */
   invalidate(layoutChanged = false, damage = null, reason = null) {
+    // a layout change may grow what an enclosing scroll pane has to scroll,
+    // through a route yoga never sees (issue #405)
+    if (layoutChanged) this._markScrollMeasureDirty();
     this.root?.invalidate(layoutChanged, damage, reason);
   }
 
@@ -3429,6 +3500,7 @@ export class Node {
    * FULL_DAMAGE the way a bare `invalidate(true, null)` would.
    */
   _invalidateLayout(reason) {
+    this._markScrollMeasureDirty();
     const root = this.root;
     if (!root) return;
     // Same walk, same frame, same answer — see `_childListBefore`, whose
@@ -5279,6 +5351,10 @@ export const Scrollable = (Base) =>
       this.scrollX = 0;
       this.contentHeight = 0;
       this.contentWidth = 0;
+      // `measureScrollContent` owed a fresh answer — true until the first
+      // layout pass measures, and re-raised by any change yoga cannot see
+      // (`_markScrollMeasureDirty`, issue #405)
+      this._scrollMeasureDirty = true;
     }
 
     /**
@@ -5301,6 +5377,9 @@ export const Scrollable = (Base) =>
      * position the same way when a box stops scrolling.
      */
     _overflowChanged() {
+      // whichever way the style flipped, the next scrolling pass starts
+      // from a fresh measurement
+      this._scrollMeasureDirty = true;
       if (this.isScroller()) return;
       this._scrollIntoViewTarget = null;
       this._childOrigin = null;
@@ -5335,20 +5414,39 @@ export const Scrollable = (Base) =>
         return;
       }
       const rtl = this.direction === 'rtl';
-      const size = this.measureScrollContent();
-      if (!Number.isFinite(size?.width) || !Number.isFinite(size?.height)) {
-        // A NaN here does not throw on its own: it becomes a NaN max scroll,
-        // a NaN offset, and every child laid out at NaN — a whole tree gone
-        // with nothing naming the element that did it.
-        throw new Error(
-          `react-x11: <${this.kind}>.measureScrollContent() must return ` +
-            '{ width, height } as finite numbers; it returned ' +
-            `${describeSize(size)}. Return { width: 0, height: 0 } for ` +
-            'content that has not arrived yet.',
-        );
+      // A pure-scroll pass re-learns nothing by walking (issue #405): the
+      // content reach and every child's place *inside* the pane only change
+      // when layout inside the pane changes. Yoga's own has-new-layout flag
+      // is the witness — consumed here and nowhere else — set by any pass
+      // that laid this node or anything under it out again, and left clear
+      // by one that merely scrolled. `_scrollMeasureDirty` covers the one
+      // route yoga cannot see: an element that paints its own content
+      // growing its extent (docs/extending.md), announced through
+      // `invalidate(true, this, 'scroll')`. The root's yoga node re-flags
+      // on every pass, so a `<window overflow='scroll'>` always takes the
+      // full walk — the pane that holds an app's long list is a box.
+      const clean =
+        this._childOrigin != null &&
+        !this._scrollMeasureDirty &&
+        !this.yoga.hasNewLayout();
+      if (!clean) {
+        const size = this.measureScrollContent();
+        if (!Number.isFinite(size?.width) || !Number.isFinite(size?.height)) {
+          // A NaN here does not throw on its own: it becomes a NaN max
+          // scroll, a NaN offset, and every child laid out at NaN — a whole
+          // tree gone with nothing naming the element that did it.
+          throw new Error(
+            `react-x11: <${this.kind}>.measureScrollContent() must return ` +
+              '{ width, height } as finite numbers; it returned ' +
+              `${describeSize(size)}. Return { width: 0, height: 0 } for ` +
+              'content that has not arrived yet.',
+          );
+        }
+        this.contentWidth = size.width;
+        this.contentHeight = size.height;
+        this._scrollMeasureDirty = false;
+        this.yoga.markLayoutSeen();
       }
-      this.contentWidth = size.width;
-      this.contentHeight = size.height;
       this._resolveScrollIntoView();
       this.scrollY = clampScroll(this.scrollY, this._maxScroll('y'));
       this.scrollX = clampScroll(this.scrollX, this._maxScroll('x'));
@@ -5373,6 +5471,23 @@ export const Scrollable = (Base) =>
       const wasOrigin = this._childOrigin;
       const shifted = wasOrigin && (wasOrigin.x !== ox || wasOrigin.y !== oy);
       this._childOrigin = { x: ox, y: oy };
+      if (clean) {
+        // The fast path (issue #405): nothing inside was laid out, so every
+        // child sits exactly where the last pass put it, shifted by however
+        // far the origin moved — one uniform translation instead of a
+        // per-node yoga re-derivation. The layout diff is owed nothing by
+        // construction: under a blit ledger the shifted diff's claims are
+        // the deviations from this very translation, and a clean pane has
+        // none — the walk below lands every node where the diff would have
+        // reported silence.
+        if (!shifted) return;
+        const dx = ox - wasOrigin.x;
+        const dy = oy - wasOrigin.y;
+        for (const child of this.children) {
+          if (!child.isWindow) child._shiftAbs(dx, dy);
+        }
+        return;
+      }
       const outer = layoutDiffSink;
       const outerShift = layoutDiffShift;
       const ledger = shifted && this._blitLedgerOpen();
@@ -5416,6 +5531,22 @@ export const Scrollable = (Base) =>
       }
     }
 
+    /**
+     * A scroller inside a shifting subtree does not ride the translation
+     * blindly: its box moves rigidly, but its children's origin also
+     * carries the scroll offsets, which may have changed again this very
+     * frame — a wheel on a nested pane while an outer one scrolls.
+     * Re-entering `_absolutizeChildren` folds both into one delta, and
+     * re-runs the gate, so a nested pane that is not clean still walks
+     * properly. (Reached only under an outer pane's fast path, which
+     * proved nothing in here was laid out — the nested gate can only
+     * decline over its own `_scrollMeasureDirty`.)
+     */
+    _shiftChildren(dx, dy) {
+      if (!this.isScroller()) return super._shiftChildren(dx, dy);
+      this._absolutizeChildren(this.abs.x, this.abs.y);
+    }
+
     /**
      * Tell the owner how big the viewport and the content turned out, when
      * either changes. Layout happens on the frame clock, *after* the commit
@@ -5477,8 +5608,14 @@ export const Scrollable = (Base) =>
      * wheel, the scrollbars, the scroll keys and the AT-SPI scroll pane all
      * read the numbers this returns (docs/extending.md).
      *
-     * Called once per layout pass, from `absolutize`, so it may read yoga
-     * geometry but must not invalidate or paint.
+     * Called at most once per layout pass, from `absolutize`, so it may
+     * read yoga geometry but must not invalidate or paint — and cached
+     * across passes that laid nothing inside the pane out again (issue
+     * #405): a pass that merely scrolled reuses the last answer, since a
+     * scroll cannot change how far the content reaches. An element whose
+     * extent changed by a route layout never saw — rows arrived, a line
+     * was typed — announces it with `invalidate(true, this, 'scroll')`,
+     * and the next pass asks again.
      */
     measureScrollContent() {
       const rtl = this.direction === 'rtl';