react-x11 2.6.1 → 2.7.0

package/src/cocoa/statusitem.js

@@ -0,0 +1,112 @@
+// The tray on the cocoa backend — `NSStatusItem`, the menu-bar extra, through
+// @windowkit/appkit (>= 0.5). The macOS half of the tray react-x11#353 asks
+// for; `useTray` (src/trayhooks.js) is the API over it.
+//
+// An item shows an image (an SF Symbol by name, or PNG bytes drawn as a
+// template so they follow the bar's light and dark) and/or a title, with a
+// tooltip, and either owns a **menu** — the same `items` vocabulary the
+// menu bar and the Dock menu take, through the one spec builder — or
+// reports **clicks**, each carrying the item's screen rect, which is the
+// anchor for a popup of the app's own.
+//
+// Two facts about the bridge shape the routing here:
+//
+// - A click names its item: the event's `statusItem` is the very handle
+//   `createStatusItem` returned, so the app keeps a Map keyed on it.
+// - A menu activation does **not** — `menu-activate` says `menu: 'status'`
+//   and an id, and every item's menu allocates ids from its own snapshot. So
+//   each item's allocator starts in a stride of its own (`ID_STRIDE`), the
+//   ids of two trays' menus are disjoint by construction, and the app asks
+//   each item whether the id is one of its own.
+import { IdAllocator, snapshot } from '../dbusmenu.js';
+import { menuItemsSpec } from './globalmenu.js';
+
+/** How far apart two items' id ranges start. A menu with a million rows is
+ * not a menu; the stride is the size of a number nobody reaches. */
+const ID_STRIDE = 1_000_000;
+let nextStride = 1;
+
+/** react-x11's tray options as the bridge's item spec, keys it knows only. */
+export function statusItemSpec(options = {}) {
+  const spec = {};
+  if (options.icon !== undefined) {
+    // an SF Symbol by name, or the encoded bytes of an image; null clears
+    spec.image = options.icon ?? null;
+  }
+  if (options.title !== undefined) spec.title = options.title ?? '';
+  if (options.tooltip !== undefined) spec.tooltip = options.tooltip ?? '';
+  if (options.visible !== undefined) spec.visible = options.visible !== false;
+  if (options.template !== undefined) spec.imageTemplate = options.template;
+  if (options.length !== undefined) spec.length = options.length;
+  if (Array.isArray(options.iconSize)) spec.imageSize = options.iconSize;
+  return spec;
+}
+
+export class CocoaStatusItem {
+  constructor(app, options = {}) {
+    this.app = app;
+    this.alloc = new IdAllocator();
+    this.alloc.next = nextStride++ * ID_STRIDE + 1;
+    this.nodes = null;
+    this.removed = false;
+    this.onClick = options.onClick ?? null;
+    this.handle = app._native.createStatusItem(statusItemSpec(options));
+    this.setMenu(options.menu ?? null);
+  }
+
+  /** In-place patch: only the keys present are touched. */
+  update(options = {}) {
+    if (this.removed) return;
+    this.onClick = options.onClick ?? null;
+    const spec = statusItemSpec(options);
+    if (Object.keys(spec).length) {
+      this.app._native.setStatusItem(this.handle, spec);
+    }
+    this.setMenu(options.menu ?? null);
+  }
+
+  /** `items`, or null to go back to reporting clicks. */
+  setMenu(items) {
+    if (this.removed) return;
+    if (!items) {
+      this.nodes = null;
+      this.app._native.setStatusItemMenu(this.handle, null);
+      return;
+    }
+    this.nodes = snapshot(items, this.alloc);
+    this.app._native.setStatusItemMenu(this.handle, menuItemsSpec(this.nodes));
+  }
+
+  /** Is this `menu-activate` id one of this item's menu's? */
+  owns(id) {
+    return Boolean(this.nodes?.has(id));
+  }
+
+  activate(id) {
+    const item = this.nodes?.get(id)?.item;
+    item?.onSelect?.(item);
+  }
+
+  /** A `status-item-click` on this item, as the app's event. */
+  click(ev) {
+    this.onClick?.({
+      button: ev.kind,
+      x: ev.x,
+      y: ev.y,
+      width: ev.width,
+      height: ev.height,
+      clickCount: ev.clickCount ?? 1,
+      shift: Boolean(ev.shift),
+      control: Boolean(ev.control),
+      option: Boolean(ev.option),
+      command: Boolean(ev.command),
+    });
+  }
+
+  remove() {
+    if (this.removed) return;
+    this.removed = true;
+    this.nodes = null;
+    this.app._native.removeStatusItem(this.handle);
+  }
+}

package/src/cocoa/window.js

@@ -7,6 +7,7 @@
 // _screenOrigin. The divide-by-scale into Cocoa points happens against the
 // native layer and nowhere above it.
 import { CocoaContext2D } from './context2d.js';
+import { CocoaDropTransport, dragSpec } from './dnd.js';
 import { CocoaLayerPresenter } from './presenter.js';
 
 let nextWindowId = 1;
@@ -93,16 +94,22 @@ export class CocoaWindow {
 
     // The retained layer presenter (docs/macos.md Tier L), behind
     // REACT_X11_COCOA_PRESENTER=layers while the surface path is the
-    // measured default. Its two hooks exist only in this mode, so the
-    // feature detection in nodes.js keeps the surface path byte-identical;
-    // the scroll blit is shadowed off because a layer frame has no backing
-    // bitmap to blit.
+    // measured default. Its hooks exist only in this mode, so the feature
+    // detection in nodes.js keeps the surface path byte-identical; the
+    // scroll blit is shadowed off because a layer frame has no backing
+    // bitmap to blit. The last two are the animation seam: a transition or
+    // a loop the presenter takes runs in the render server and schedules no
+    // frames here (docs/architecture/animation.md §4).
     if (app._presenterMode === 'layers') {
       this._presenter = new CocoaLayerPresenter(this);
       this.presentFrame = (windowNode) => this._presenter.frame(windowNode);
       this.noteInvalidate = (damage, layoutChanged) =>
         this._presenter.noteInvalidate(damage, layoutChanged);
       this.scrollRegion = null;
+      this.animateNode = (node, prop, entry) =>
+        this._presenter.animate(node, prop, entry);
+      this.cancelNodeAnimation = (node, prop) =>
+        this._presenter.cancel(node, prop);
     }
     app._registerWindow(this);
   }
@@ -211,6 +218,12 @@ export class CocoaWindow {
     this.destroyed = true;
     this.mapped = false;
     this.app._unregisterWindow(this);
+    this._dropTransport = null;
+    // a bounce nobody can answer any more
+    if (this._attentionRequest != null) {
+      this.app.cancelAttention(this._attentionRequest);
+      this._attentionRequest = null;
+    }
     this._native.destroyWindow2(this._h);
     this._releaseBacking();
   }
@@ -240,6 +253,74 @@ export class CocoaWindow {
 
   setActions() {}
 
+  /**
+   * `_NET_WM_STATE` requests, as far as this backend has verbs for them:
+   * `demands_attention` is the Dock bounce (`requestUserAttention`), held
+   * until the state is removed or the window goes. Every other name resolves
+   * `false` — ntk's own contract for a state the server cannot honour —
+   * because the bridge has no zoom/miniaturize/fullscreen verbs yet
+   * (windowkit/appkit#15 scoped them out); nodes.js swallows the false.
+   */
+  setWmState(names, action = 'add') {
+    const list = Array.isArray(names) ? names : [names];
+    let honoured = true;
+    for (const name of list) {
+      if (name !== 'demands_attention') {
+        honoured = false;
+        continue;
+      }
+      const held = this._attentionRequest != null;
+      const wants = action === 'add' || (action === 'toggle' && !held);
+      if (wants && !held && !this.destroyed) {
+        this._attentionRequest = this.app.requestAttention();
+      } else if (!wants && held) {
+        this.app.cancelAttention(this._attentionRequest);
+        this._attentionRequest = null;
+      }
+    }
+    return Promise.resolve(honoured);
+  }
+
+  // --- drag and drop (src/cocoa/dnd.js) ------------------------------------
+
+  /**
+   * The drop side: nodes.js hands over the window's DropSession at realize
+   * (`_initDnd`), and from then on the app routes this window's `drag-*`
+   * events into it. Its presence on the window is what tells nodes.js the
+   * backend has drop machinery of its own.
+   */
+  attachDropTransport(session, node) {
+    this._dropTransport = new CocoaDropTransport(this, session, node);
+  }
+
+  /** A `dropAccept` came or went under this window: re-register the types. */
+  dropTargetsChanged() {
+    this._dropTransport?.refreshTypes();
+  }
+
+  registerDropTypes(types) {
+    if (this.destroyed) return;
+    this._native.registerDropTypes(this._h, types);
+  }
+
+  setDropResponse(response) {
+    if (this.destroyed) return;
+    this._native.setDropResponse(this._h, response);
+  }
+
+  /**
+   * The source side: hand a DragSession's gesture to an NSDraggingSession
+   * (see src/cocoa/dnd.js for what the spec carries). Returns at once; the
+   * session reports back as `drag-session-*` events.
+   */
+  beginDrag(session) {
+    if (this.destroyed) return null;
+    return this._native.beginDrag(
+      this._h,
+      dragSpec(session, this._native, this.scale),
+    );
+  }
+
   setTransientFor() {
     // addChildWindow attachment comes with the layer presenter phase; a
     // managed dialog already floats via its own window today.

package/src/components/Button.js

@@ -7,7 +7,11 @@ import { useAppOrNull } from '../appcontext.js';
 import {
   ABS_FILL,
   Bezel,
+  NATIVE_RING,
+  TITLE_BASELINE,
   bezelNatural,
+  bezelShadow,
+  nativeTitleStyle,
   pressWash,
   useNativeControls,
 } from './native.js';
@@ -85,6 +89,7 @@ export function Button({
   if (nativeControls && solid) {
     const controlSize = small ? 'small' : 'regular';
     const nat = bezelNatural(app, 'push', controlSize);
+    const shadow = bezelShadow(app, 'push', controlSize);
     return h(
       'box',
       {
@@ -105,6 +110,20 @@ export function Button({
             height: nat.height,
             paddingLeft: small ? 10 : 14,
             paddingRight: small ? 10 : 14,
+            // The natural box is the bezel's footprint, shadow included;
+            // the body is what the title is placed against — and placed,
+            // not centred (`TITLE_BASELINE`). A label centred by its
+            // capitals sat 1pt low beside a native button.
+            paddingTop: shadow.top,
+            paddingBottom: shadow.bottom + TITLE_BASELINE[controlSize],
+            // The keyboard ring is the renderer's, on this box — shaped by
+            // the bezel's corners and hugging it, as AppKit's is
+            // (`NATIVE_RING`), rather than the palette's offset rectangle.
+            borderRadius: small ? 5 : 6,
+            ':focus-visible': {
+              outlineWidth: NATIVE_RING.width,
+              outlineOffset: NATIVE_RING.offset,
+            },
             color: disabled
               ? theme.textMuted
               : primary
@@ -122,7 +141,7 @@ export function Button({
         isDefault: primary && !disabled,
         style: ABS_FILL,
       }),
-      labelContent(children ?? label),
+      labelContent(children ?? label, nativeTitleStyle(controlSize)),
       // The press answer. Last child on purpose: `:active` marks the
       // pressed node and its ancestors, and the topmost child is what the
       // press lands on. No hover tint — AppKit buttons have none.

package/src/components/Checkbox.js

@@ -6,7 +6,14 @@ import React from 'react';
 import { useAppOrNull } from '../appcontext.js';
 import { changeEvent } from './change.js';
 import { Icon } from './Icon.js';
-import { Bezel, bezelNatural, useNativeControls } from './native.js';
+import {
+  Bezel,
+  CONTROL_FONT_SIZE,
+  NO_ROW_RING,
+  bezelNatural,
+  nativeRingStyle,
+  useNativeControls,
+} from './native.js';
 import { focusRingStyle, labelContent, useControl, useTheme } from './theme.js';
 
 const h = React.createElement;
@@ -44,6 +51,7 @@ export function Checkbox({
   const {
     hover,
     focused,
+    focusVisible,
     pressed,
     props,
     style: controlStyle,
@@ -69,6 +77,7 @@ export function Checkbox({
         style: [
           controlStyle,
           { flexDirection: 'row', alignItems: 'center', gap: 8 },
+          NO_ROW_RING,
           style,
         ],
       },
@@ -80,11 +89,17 @@ export function Checkbox({
         style: {
           width: nat.width,
           height: nat.height,
-          ...focusRingStyle(theme, focused),
+          // the box's own corners, so the ring rounds as AppKit's does
+          ...nativeRingStyle(theme, focusVisible, 4),
         },
       }),
+      // At the control font size, as the cell's own title is: the bezel is
+      // designed beside 13pt, and the palette's 14px read a size too large
+      // next to it. Centred on the box, which is where AppKit centres it
+      // (measured: within a quarter point).
       labelContent(children ?? label, {
         color: disabled ? theme.textMuted : theme.text,
+        fontSize: CONTROL_FONT_SIZE.regular,
       }),
     );
   }

package/src/components/Menu.js

@@ -11,6 +11,7 @@ import {
   useTheme,
 } from './theme.js';
 import { Icon, iconSize } from './Icon.js';
+import { NATIVE_MENU, useNativeControls } from './native.js';
 import {
   DEFAULT_LABEL_SIZE,
   anchorArea,
@@ -81,6 +82,53 @@ const MENU_PAD = 4;
 // borders on its *controls* does not mean a 2px outline around every menu.
 const MENU_BORDER = 1;
 
+/**
+ * The geometry of a popup — rows, padding, separator, text — as one
+ * object, so the sizing arithmetic and the layout read one source.
+ *
+ * Two sources: the drawn menu's own numbers, derived from the text size as
+ * they always were, or NSMenu's where the backend renders native controls
+ * (`NATIVE_MENU`): 22pt rows, 5pt of padding, an 11pt separator, the 13pt
+ * menu font at regular weight, and no pressed step. A context menu on the
+ * Cocoa backend is then the menu the system's own controls open, beside
+ * which the drawn one — 30pt rows of 14px medium — read as a different
+ * toolkit's. The bar keeps its drawn metrics: a menu bar is not an NSMenu.
+ */
+function menuMetrics(theme, native, fontSize) {
+  if (native) {
+    return {
+      fontSize: NATIVE_MENU.fontSize,
+      weight: NATIVE_MENU.weight,
+      row: NATIVE_MENU.row,
+      pad: NATIVE_MENU.pad,
+      itemPad: NATIVE_MENU.padLeft,
+      separator: NATIVE_MENU.separator,
+      radius: NATIVE_MENU.radius,
+      press: false,
+    };
+  }
+  return {
+    fontSize,
+    weight: MENU_TEXT_WEIGHT,
+    row: menuRowHeight(fontSize),
+    pad: MENU_PAD,
+    itemPad: MENU_ITEM_PAD,
+    separator: MENU_SEPARATOR_HEIGHT,
+    radius: rowRadius(theme, MENU_BORDER, MENU_PAD),
+    // a drawn row steps to `accentActive` while pressed
+    press: true,
+  };
+}
+
+function useMenuMetrics(fontSize) {
+  const theme = useTheme();
+  const native = useNativeControls();
+  return useMemo(
+    () => menuMetrics(theme, native, fontSize),
+    [theme, native, fontSize],
+  );
+}
+
 // 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.
@@ -173,13 +221,12 @@ const MENU_SHORTCUT_GAP = 24;
 const MENU_PAGE_ROWS = 10;
 
 /** Total popup height for a menu's items (separators are shorter). */
-function menuListHeight(items, fontSize) {
-  const row = menuRowHeight(fontSize);
+function menuListHeight(items, metrics) {
   const body = visibleItems(items).reduce(
-    (sum, item) => sum + (isSeparator(item) ? MENU_SEPARATOR_HEIGHT : row),
+    (sum, item) => sum + (isSeparator(item) ? metrics.separator : metrics.row),
     0,
   );
-  return body + (MENU_PAD + MENU_BORDER) * 2;
+  return body + (metrics.pad + MENU_BORDER) * 2;
 }
 
 /**
@@ -214,19 +261,19 @@ function menuGutter(items) {
 }
 
 /** Widest label + shortcut, measured, so the popup can be sized up front. */
-function menuListWidth(node, items, fontSize) {
+function menuListWidth(node, items, metrics) {
   let widest = 0;
   for (const item of visibleItems(items)) {
     if (isSeparator(item)) continue;
     const label = measureLabel(node, item.label ?? '', {
-      size: fontSize,
-      weight: MENU_TEXT_WEIGHT,
+      size: metrics.fontSize,
+      weight: metrics.weight,
     }).width;
     const accelerator = formatShortcut(item.shortcut);
     const shortcut = accelerator
       ? measureLabel(node, accelerator, {
-          size: fontSize,
-          weight: MENU_TEXT_WEIGHT,
+          size: metrics.fontSize,
+          weight: metrics.weight,
         }).width + MENU_SHORTCUT_GAP
       : 0;
     widest = Math.max(widest, label + shortcut);
@@ -235,8 +282,8 @@ function menuListWidth(node, items, fontSize) {
     MENU_MIN_WIDTH,
     Math.ceil(widest) +
       menuGutter(items) +
-      (MENU_PAD + MENU_BORDER) * 2 +
-      MENU_ITEM_PAD * 2 +
+      (metrics.pad + MENU_BORDER) * 2 +
+      metrics.itemPad * 2 +
       2,
   );
 }
@@ -393,7 +440,7 @@ function MenuRow({
   onHover,
   onMove,
   onSelect,
-  fontSize,
+  metrics,
   // 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.
@@ -411,7 +458,10 @@ function MenuRow({
       {
         theme,
         role: 'separator',
-        style: { height: MENU_SEPARATOR_HEIGHT, justifyContent: 'center' },
+        // The level hears the pointer arrive here too: it cannot land, so
+        // whatever was lit goes out, as it does in a native menu.
+        onMouseEnter: onHover,
+        style: { height: metrics.separator, justifyContent: 'center' },
       },
       h('box', { style: { height: 1, backgroundColor: theme.border } }),
     );
@@ -444,20 +494,25 @@ function MenuRow({
       'aria-expanded': submenu ? state === 'path' : undefined,
       disabled: dim || undefined,
       ref: nodeRef,
-      onMouseEnter: dim ? undefined : onHover,
-      onMouseMove: dim ? undefined : onMove,
+      // A disabled row reports the pointer as any row does; the level
+      // answers by lighting nothing (`hover`). Silence here was the bug: the
+      // pointer crossed onto a disabled row and the row it had left stayed
+      // lit until it reached the next enabled one — a native menu goes dark
+      // the moment the pointer is over anything it cannot choose.
+      onMouseEnter: onHover,
+      onMouseMove: onMove,
       onClick: dim ? undefined : () => onSelect(item),
       style: {
-        height: menuRowHeight(fontSize),
+        height: metrics.row,
         flexDirection: 'row',
         alignItems: 'center',
-        paddingLeft: MENU_ITEM_PAD,
-        paddingRight: MENU_ITEM_PAD,
+        paddingLeft: metrics.itemPad,
+        paddingRight: metrics.itemPad,
         // 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
         // that nearly agree.
-        borderRadius: rowRadius(theme, MENU_BORDER, MENU_PAD),
+        borderRadius: metrics.radius,
         // Nothing at rest: the sheet under it is already that colour, and
         // now that the row is rounded, repainting it per row would be a
         // coverage mask drawn to change nothing — with four corners it
@@ -474,8 +529,11 @@ function MenuRow({
         // the item is already highlighted by the time it can be pressed, so
         // the press is a further step down rather than a first one — without
         // it the command runs on the release out of a picture that never
-        // changed
-        ...(dim
+        // changed. Not under native controls: NSMenu has no pressed look,
+        // the highlight simply stays, and the palette's pressed step there
+        // is AppKit's deep-pressed cut of the accent — on a dark orange
+        // palette, a yellow no native menu ever shows.
+        ...(dim || !metrics.press
           ? null
           : { ':active': { backgroundColor: theme.accentActive } }),
       },
@@ -490,11 +548,16 @@ function MenuRow({
           // stand clear, and the row's own padding already spaces the mark.
           style: { width: gutter, alignItems: 'flex-start' },
         },
-        gutterMark(item, { color: rowInk, fontSize }),
+        gutterMark(item, { color: rowInk, fontSize: metrics.fontSize }),
       ),
     h(
       'text',
-      { style: [capTrim, { fontSize, fontWeight: MENU_TEXT_WEIGHT }] },
+      {
+        style: [
+          capTrim,
+          { fontSize: metrics.fontSize, fontWeight: metrics.weight },
+        ],
+      },
       item.label,
     ),
     h('box', { style: { flexGrow: 1 } }),
@@ -508,7 +571,7 @@ function MenuRow({
         {
           style: [
             capTrim,
-            { fontSize, fontWeight: MENU_TEXT_WEIGHT },
+            { fontSize: metrics.fontSize, fontWeight: metrics.weight },
             !active && { color: theme.textMuted },
           ],
         },
@@ -522,7 +585,7 @@ function MenuRow({
         // The capitals of the row, not the gutter's 16px column: a chevron
         // stands as tall as its box, so `MENU_ICON_SIZE` would put an arrow
         // beside the label taller than the label.
-        size: capBand(fontSize),
+        size: capBand(metrics.fontSize),
         // 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
@@ -563,6 +626,7 @@ function MenuLevel({
   fontSize,
 }) {
   const theme = useTheme();
+  const metrics = useMenuMetrics(fontSize);
   const items = levelItems(rootItems, path, depth);
   // one answer for the level, so every row indents by the same amount the
   // popup was measured with
@@ -606,13 +670,13 @@ function MenuLevel({
         // continuation six pixels lower than the row itself. Shifting by
         // the inset puts the first item exactly beside the item it came
         // out of, which is where the eye is already looking.
-        alignOffset: -(MENU_BORDER + MENU_PAD),
+        alignOffset: -(MENU_BORDER + metrics.pad),
         offset: SUBMENU_GAP,
-        width: menuListWidth(node, childItems, fontSize),
-        height: menuListHeight(childItems, fontSize),
+        width: menuListWidth(node, childItems, metrics),
+        height: menuListHeight(childItems, metrics),
       }),
     );
-  }, [childOpen, active, depth, fontSize, rect.x, rect.y]);
+  }, [childOpen, active, depth, metrics, rect.x, rect.y]);
 
   // "safe polygon" hover: while a submenu is open, the triangle between the
   // pointer and the submenu's near edge counts as still hovering the parent
@@ -639,7 +703,11 @@ function MenuLevel({
     setPath(hasSubmenu(items[index]) ? [...base, -1] : base);
   };
 
-  const hover = (index, ev) => {
+  const hover = (row, ev) => {
+    // Over a row the selection cannot land on — disabled, a separator —
+    // nothing is lit: `-1` is the same "no row" the keyboard's Home starts
+    // from, and the polygon below still holds an open submenu across it.
+    const index = isSelectable(items[row]) ? row : -1;
     const point = screenPoint(ev);
     if (
       index !== active &&
@@ -712,7 +780,7 @@ function MenuLevel({
         style: {
           flexGrow: 1,
           flexShrink: 1,
-          padding: MENU_PAD,
+          padding: metrics.pad,
           borderWidth: MENU_BORDER,
           borderColor: theme.border,
           backgroundColor: theme.surface,
@@ -724,7 +792,7 @@ function MenuLevel({
           key: isSeparator(item) ? `sep-${index}` : (item.key ?? item.label),
           item,
           state: rowState(index, active, handedOn),
-          fontSize,
+          metrics,
           gutter,
           nodeRef: index === active ? activeRowRef : undefined,
           onHover: (ev) => hover(index, ev),
@@ -887,6 +955,7 @@ export function ContextMenu({
   const [path, setPath] = useState([]);
   const typeAhead = useTypeAhead();
   const rtl = useDirection() === 'rtl';
+  const metrics = useMenuMetrics(fontSize);
 
   const close = () => {
     setRect(null);
@@ -908,8 +977,8 @@ export function ContextMenu({
   const openAt = (ev) => {
     const node = ref.current;
     if (!node || !items.length) return;
-    const width = menuListWidth(node, items, fontSize);
-    const height = menuListHeight(items, fontSize);
+    const width = menuListWidth(node, items, metrics);
+    const height = menuListHeight(items, metrics);
     const area = anchorArea(node);
     // anchored at the pointer rather than at a widget: clamp by hand, since
     // there is no anchor rect to flip around. Root coordinates are device;
@@ -1006,6 +1075,7 @@ export function MenuBar({
 }) {
   const theme = useTheme();
   const rtl = useDirection() === 'rtl';
+  const metrics = useMenuMetrics(fontSize);
   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
@@ -1111,8 +1181,8 @@ export function MenuBar({
     const node = refs.current[index];
     const menu = entries[index];
     if (!node || !hasSubmenu(menu)) return;
-    const width = menuListWidth(node, menu.items, fontSize);
-    const height = menuListHeight(menu.items, fontSize);
+    const width = menuListWidth(node, menu.items, metrics);
+    const height = menuListHeight(menu.items, metrics);
     const next = anchorRect(node, { placement: 'bottom', width, height });
     if (!next) return;
     openRef.current = index;
@@ -1159,8 +1229,8 @@ export function MenuBar({
       if (!node || !hasSubmenu(menu)) return null;
       return {
         placement: 'bottom',
-        width: menuListWidth(node, menu.items, fontSize),
-        height: menuListHeight(menu.items, fontSize),
+        width: menuListWidth(node, menu.items, metrics),
+        height: menuListHeight(menu.items, metrics),
       };
     },
     setRect,