react-x11 2.9.1 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.9.1",
+  "version": "2.10.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/cocoa/fonts.js

@@ -217,6 +217,58 @@ function brokenAtEveryOpportunity(spans) {
   return out;
 }
 
+/** What a paragraph ends in when it did not fit. A face without the mark
+ *  gets a substituted one from CoreText, where ntk falls back to three
+ *  dots of its own — a difference only a face missing U+2026 can show. */
+const ELLIPSIS = '\u2026';
+
+/**
+ * The broken spans as a paragraph that **elides**: the first `maxLines - 1`
+ * lines, then a line that is only the ellipsis — set in the font of the run
+ * the cut fell in, as ntk sets it.
+ *
+ * This is the min-content floor of a paragraph that ends in a `…`. It is not
+ * the same question as a wrapping one's: a paragraph that may wrap has to be
+ * at least its longest word, because there is nowhere else for that word to
+ * go, while one that elides has somewhere — an offer narrower than its text
+ * is answered by cutting the text, so the width it *needs* is the mark that
+ * says so. ntk answers exactly that (a `<text textWrap="nowrap"
+ * textOverflow="ellipsis">` measures 30.472 at an offer of zero, which is
+ * the width of `…` in the same face, to the third decimal), and the two
+ * engines are supposed to measure a tree the same way.
+ *
+ * The cut is made here rather than by the native for a reason worth
+ * keeping: eliding is a question about a width, and the min-content probe
+ * has none to give. Asked to elide with no bound, CoreText keeps the line
+ * count but puts everything that was over it back on the last line — a
+ * `<Select>` caption floored at 472.5 against a max-content of 506.9, which
+ * pinned every eliding label on this backend at its full width and made it
+ * overflow sideways rather than give way — react-x11 #512.
+ */
+function cappedToEllipsis(broken, maxLines) {
+  // A cap below one keeps one, as `_maxLines` does: nothing renders no
+  // paragraph at all, and a floor of zero is not a measurement.
+  const cap = Math.max(1, Math.floor(maxLines));
+  const lines = [[]];
+  for (const span of broken) {
+    if (span.text === '\n') lines.push([]);
+    else lines.at(-1).push(span);
+  }
+  // Nothing over the cap is nothing to stand for: a paragraph that fits in
+  // its lines is measured as the lines, ellipsis or not.
+  if (lines.length <= cap) return broken;
+
+  const cut = lines[cap - 1]?.[0] ?? broken[0];
+  const out = [];
+  for (const line of lines.slice(0, cap - 1)) {
+    if (out.length) out.push({ ...out.at(-1), text: '\n' });
+    out.push(...line);
+  }
+  if (out.length) out.push({ ...out.at(-1), text: '\n' });
+  out.push({ ...cut, text: ELLIPSIS });
+  return out;
+}
+
 const ALIGN_FLUSH = { left: 0, center: 0.5, right: 1 };
 
 function flushFor(align, direction) {
@@ -890,17 +942,28 @@ export class CocoaFontManager {
     // columns came out 823px and 34px wide. `brokenAtEveryOpportunity` is
     // the answer instead.
     const minContent = Number.isFinite(maxWidth) && maxWidth <= 0;
-    const laid = minContent
-      ? brokenAtEveryOpportunity(nativeSpans)
-      : nativeSpans;
+    // Whether this paragraph is one that ends in a `…`. Both halves: ntk
+    // elides off the line *count*, so an ellipsis with nothing to cap can
+    // never fire (nodes.js `_maxLines`), and neither can this.
+    const elides = overflow === 'ellipsis' && Number.isFinite(maxLines);
+    // An eliding paragraph's floor is the mark, not its longest word, and
+    // it is cut here because the native cannot cut without a width to cut
+    // to — see `cappedToEllipsis`. The cap and the ellipsis are in the text
+    // that comes back, so the request carries neither.
+    const probe = minContent && elides && nativeSpans.length > 0;
+    const laid = probe
+      ? cappedToEllipsis(brokenAtEveryOpportunity(nativeSpans), maxLines)
+      : minContent
+        ? brokenAtEveryOpportunity(nativeSpans)
+        : nativeSpans;
     const raw = this._native.createLayout({
       spans: laid,
       maxWidth:
         Number.isFinite(maxWidth) && maxWidth > 0 ? maxWidth : undefined,
       align: flushFor(align, direction),
       lineHeight: typeof lineHeight === 'number' ? lineHeight : undefined,
-      maxLines: Number.isFinite(maxLines) ? maxLines : undefined,
-      ellipsis: overflow === 'ellipsis',
+      maxLines: probe || !Number.isFinite(maxLines) ? undefined : maxLines,
+      ellipsis: !probe && overflow === 'ellipsis',
       rtl: direction === 'rtl',
     });
     // the text the native actually laid out: a min-content measurement's

package/src/components/Button.js

@@ -7,10 +7,12 @@ import { useAppOrNull } from '../appcontext.js';
 import {
   ABS_FILL,
   Bezel,
+  NATIVE_BAND,
   NATIVE_RING,
   TITLE_BASELINE,
   bezelNatural,
   bezelShadow,
+  nativeFootprintStyle,
   nativeTitleStyle,
   pressWash,
   useNativeControls,
@@ -94,64 +96,73 @@ export function Button({
       'box',
       {
         theme,
-        role: 'button',
-        ...props,
-        ...boxProps,
-        style: [
-          controlStyle,
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: small ? 6 : 8,
-            // AppKit's metrics, not the palette's: a native bezel is
-            // designed at its own height, and stretching it is what this
-            // mode exists to avoid. Width still follows the label.
-            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
-                ? theme.accentText
-                : theme.text,
-          },
-          style,
-        ],
+        // The footprint the caller's style sizes; the button below keeps
+        // AppKit's height inside it, centred (`nativeFootprintStyle`).
+        style: [nativeFootprintStyle(nat), style],
       },
-      h(Bezel, {
-        kind: 'push',
-        controlSize,
-        enabled: !disabled,
-        // the Return-key accent fill is AppKit's own "default button"
-        isDefault: primary && !disabled,
-        style: ABS_FILL,
-      }),
-      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.
-      h('box', {
-        style: [
-          ABS_FILL,
-          { borderRadius: small ? 5 : 6 },
-          !disabled && { ':active': { backgroundColor: pressWash(theme) } },
-        ],
-      }),
+      h(
+        'box',
+        {
+          theme,
+          role: 'button',
+          ...props,
+          ...boxProps,
+          style: [
+            controlStyle,
+            NATIVE_BAND,
+            {
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: small ? 6 : 8,
+              // AppKit's metrics, not the palette's: a native bezel is
+              // designed at its own height, and stretching it is what this
+              // mode exists to avoid. Width still follows the label.
+              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
+                  ? theme.accentText
+                  : theme.text,
+            },
+          ],
+        },
+        h(Bezel, {
+          kind: 'push',
+          controlSize,
+          enabled: !disabled,
+          // the Return-key accent fill is AppKit's own "default button"
+          isDefault: primary && !disabled,
+          style: ABS_FILL,
+        }),
+        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.
+        h('box', {
+          style: [
+            ABS_FILL,
+            { borderRadius: small ? 5 : 6 },
+            !disabled && { ':active': { backgroundColor: pressWash(theme) } },
+          ],
+        }),
+      ),
     );
   }
   const background = !solid

package/src/components/Select.js

@@ -9,11 +9,13 @@ import { Icon } from './Icon.js';
 import {
   ABS_FILL,
   Bezel,
+  NATIVE_BAND,
   NATIVE_MENU,
   NATIVE_RING,
   TITLE_BASELINE,
   bezelNatural,
   bezelShadow,
+  nativeFootprintStyle,
   nativeTitleStyle,
   pressWash,
   useNativeControls,
@@ -58,6 +60,25 @@ const ITEM_PAD_RIGHT = ITEM_PAD;
 // fit in.
 const itemHeight = (fontSize) => capBand(fontSize) + ITEM_PAD * 2;
 
+// A caption is one line. `<text>` wraps by default — right for a paragraph,
+// wrong for the value a control is showing: a trigger is a fixed height (the
+// bezel's own, in native mode), so a caption too long for the box wrapped to
+// a second line and drew it *outside* the control, above the bezel. The rows
+// of the menu are the same shape for the same reason: `metrics.row` tall,
+// whatever is in them.
+//
+// A `…` rather than a clip, because the width is not the label's to
+// negotiate — a dropdown is as wide as the form made it — so the honest
+// answer to a caption that does not fit is to say that it did not, which is
+// what NSPopUpButtonCell does with a title too long for its cell. It is
+// also what makes the label *give way*: an eliding `nowrap` floors at the
+// mark it would end in, where a clipping one keeps its full width and
+// pushes whatever contains it wider (nodes.js, `_wrapWidth`).
+const ONE_LINE = Object.freeze({
+  textWrap: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
 /**
  * The menu's geometry: the palette's, or — where the trigger is a native
  * popup bezel — NSMenu's, so the sheet that drops from it is the one the
@@ -228,6 +249,7 @@ function Option({
       {
         style: [
           capTrim,
+          ONE_LINE,
           {
             color: active ? theme.hoverText : theme.text,
             fontSize: metrics.fontSize,
@@ -438,7 +460,11 @@ export function Select({
     if (open) scrollRef.current?.scrollIntoView(activeRef.current);
   }, [open, activeIndex]);
 
-  return h(
+  // AppKit's own popup metrics, which the trigger below is laid out at —
+  // and only the trigger: the footprint it sits in is the caller's to size.
+  const nat = nativeControls ? bezelNatural(app, 'popup') : null;
+
+  const trigger = h(
     'box',
     {
       theme,
@@ -465,7 +491,8 @@ export function Select({
               flexDirection: 'row',
               alignItems: 'center',
               gap: 8,
-              height: bezelNatural(app, 'popup').height,
+              ...NATIVE_BAND,
+              height: nat.height,
               paddingLeft: TRIGGER_PAD_LEFT,
               paddingRight: 26,
               // The title sits where NSPopUpButtonCell puts it — on the
@@ -515,7 +542,10 @@ export function Select({
             ':hover': { backgroundColor: theme.surfaceHover },
             ':active': { backgroundColor: theme.surfaceActive },
           },
-        style,
+        // The caller's style, on the trigger where the trigger is the whole
+        // control. Under a native bezel it sizes the footprint below instead
+        // and the trigger keeps AppKit's height (`nativeFootprintStyle`).
+        !nativeControls && style,
       ],
     },
     // `pressed` while the menu is down: AppKit's popup answers being open
@@ -533,6 +563,7 @@ export function Select({
       {
         style: [
           capTrim,
+          ONE_LINE,
           nativeControls && nativeTitleStyle('regular'),
           { color: current ? theme.text : theme.textMuted },
         ],
@@ -635,4 +666,11 @@ export function Select({
         ),
       ),
   );
+
+  // The bezel and its title are one unit at NSPopUpButton's height; the box
+  // around them is what a `height`, a `flexGrow` or a parent's align-stretch
+  // is free to make taller, with the control centred in it (issue #510).
+  return nativeControls
+    ? h('box', { theme, style: [nativeFootprintStyle(nat), style] }, trigger)
+    : trigger;
 }

package/src/components/native.js

@@ -101,6 +101,47 @@ export function nativeTitleStyle(controlSize = 'regular') {
   return { alignSelf: 'flex-end', fontSize: CONTROL_FONT_SIZE[controlSize] };
 }
 
+/**
+ * The **footprint** a native control sits in: the box the caller's style
+ * sizes, with the control — bezel, title and press wash, one unit at
+ * AppKit's own metrics — centred inside it.
+ *
+ * Two boxes rather than one, because the title is *placed* and not centred:
+ * it rides `TITLE_BASELINE` above the bezel body's bottom edge, and that is
+ * only where the cell puts it while the box is exactly `bezelNatural` tall.
+ * The caller's style is applied last and flex stretches a box regardless, so
+ * it was not always: `style={{ height: 44 }}`, a `height: '100%'` in a taller
+ * parent and a bare `flexGrow: 1` each made the box taller, and the two
+ * halves — the bezel absolutely filling it, the title glued to its bottom —
+ * came apart, the label landing below the control it names (issue #510). The
+ * drawn path never had this, because it centres its label: a stretched drawn
+ * control is merely roomy, where a stretched native one was broken.
+ *
+ * So the height a caller can move belongs to a box the control sits in, and
+ * the control keeps AppKit's. The default here is exactly today's box — an
+ * untouched control lays out as it always did, and the explicit height still
+ * resists a row's align-stretch — and the caller's style, applied after it,
+ * moves the footprint alone. The control stretches across it (align-stretch,
+ * the default), so a footprint given a width is a bezel that wide.
+ *
+ * The control, not the footprint, stays the *control*: the role, the
+ * handlers, the focus ring and the ref go on it, so a press in the slack
+ * above a 22pt popup in a 46pt hole does nothing at all — as it does in
+ * AppKit — rather than firing a button with no visible answer to the press.
+ */
+export function nativeFootprintStyle(nat) {
+  return { height: nat.height, justifyContent: 'center' };
+}
+
+/**
+ * The rest of what a native control's own box says about its size: nothing
+ * shrinks it. A squashed bezel is as wrong as a stretched one, and a
+ * footprint shorter than the control is a caller asking for something the
+ * cell's metrics cannot answer — so it overflows, visibly, rather than
+ * quietly drawing a title where the bezel is not.
+ */
+export const NATIVE_BAND = Object.freeze({ flexShrink: 0 });
+
 /**
  * NSMenu's geometry, for the menu a native popup bezel opens — read off
  * `NSMenu.size` on macOS 15 rather than off a screenshot, so it is the