react-x11 2.0.0 → 2.0.1

package/package.json

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

package/src/components/Checkbox.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import { changeEvent } from './change.js';
 import { Icon } from './Icon.js';
-import { labelContent, useControl, useTheme } from './theme.js';
+import { focusRingStyle, labelContent, useControl, useTheme } from './theme.js';
 
 const h = React.createElement;
 
@@ -52,18 +52,28 @@ export function Checkbox({
       : hover
         ? theme.accentHover
         : theme.accent;
-  // An empty well has no fill to step, so it shows the two states in two
-  // different places: hovering firms the ring up, and pressing greys the
-  // inside as well. Three looks, which is the point — a hover the press
-  // cannot be told apart from says nothing about the press.
+  // An empty well has no fill to step, so it shows its states in two
+  // different places: focus is a *colour* on the border, hover and press are
+  // a *step* of the inside. Three looks, which is the point — a hover the
+  // press cannot be told apart from says nothing about the press — and four
+  // with focus, because the two channels compose instead of overwriting.
+  //
+  // They used to share the border, where hover won, and that made the focus
+  // colour unreachable by the gesture that focuses by pointer: a click ends
+  // with the pointer sitting on the control it just focused, so the well was
+  // hover-grey for as long as the user was looking at it and only turned
+  // blue once they moved the mouse away.
   const empty = {
-    borderColor:
-      pressed || hover
+    borderColor: focused
+      ? theme.borderFocus
+      : pressed || hover
         ? theme.textMuted
-        : focused
-          ? theme.borderFocus
-          : theme.border,
-    backgroundColor: pressed ? theme.surfaceActive : theme.surface,
+        : theme.border,
+    backgroundColor: pressed
+      ? theme.surfaceActive
+      : hover
+        ? theme.surfaceHover
+        : theme.surface,
   };
   return h(
     'box',
@@ -91,6 +101,9 @@ export function Checkbox({
           backgroundColor: checked ? fill : empty.backgroundColor,
           alignItems: 'center',
           justifyContent: 'center',
+          // a checked well is filled with the accent, so the border tier
+          // above has nothing left to say — see {@link focusRingStyle}
+          ...focusRingStyle(theme, checked && focused),
         },
       },
       checked &&

package/src/components/Radio.js

@@ -4,7 +4,7 @@
 
 import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { changeEvent } from './change.js';
-import { labelContent, useControl, useTheme } from './theme.js';
+import { focusRingStyle, labelContent, useControl, useTheme } from './theme.js';
 import { XK_DOWN, XK_LEFT, XK_RIGHT, XK_UP } from './keys.js';
 
 const h = React.createElement;
@@ -109,16 +109,30 @@ export function Radio({ value, children, label, disabled = false }) {
           height: 16,
           borderRadius: 8,
           borderWidth: theme.borderWidth,
+          // Focus on the border, hover and press on the inside — the two
+          // channels Checkbox splits them into, and for the same reason: a
+          // click leaves the pointer on the control, so a focus colour hover
+          // can overwrite is one the pointer user never gets to see.
+          //
+          // A *selected* radio has spent its border on the fill, and the
+          // branch below it was unreachable — the one radio in a group that
+          // can be clicked without changing anything was also the only one
+          // with nothing to show for it. It gets the ring instead.
           borderColor: selected
             ? fill
-            : pressed || hover
-              ? theme.textMuted
-              : focused
-                ? theme.borderFocus
+            : focused
+              ? theme.borderFocus
+              : pressed || hover
+                ? theme.textMuted
                 : theme.border,
-          backgroundColor: pressed ? theme.surfaceActive : theme.surface,
+          backgroundColor: pressed
+            ? theme.surfaceActive
+            : hover
+              ? theme.surfaceHover
+              : theme.surface,
           alignItems: 'center',
           justifyContent: 'center',
+          ...focusRingStyle(theme, selected && focused),
         },
       },
       selected &&

package/src/components/theme.js

@@ -334,6 +334,35 @@ export const capTrim = Object.freeze({ textBoxTrim: 'cap-alphabetic' });
  */
 export const capBand = (fontSize) => Math.round(fontSize * 0.72);
 
+/**
+ * The focus ring, as style, for the one part of a widget that has to draw
+ * its own — or `null`, to be spread away, when it does not.
+ *
+ * Every empty control says focus in its border (`borderFocus`), which is the
+ * `:focus` tier styling.md asks for: a colour change welcome however focus
+ * arrived. A **filled** one — a checked box, a selected radio — has spent
+ * that border on the fill and has no colour left to spend, so it says the
+ * same thing one ring further out instead.
+ *
+ * On the part, not the row. The row already draws core's ring, but that one
+ * is the *keyboard* tier — `:focus-visible`, so it arrives on Tab and not on
+ * a click — and it wraps the label with the well. This is the other tier,
+ * and the two stack the same way the border colour and that ring already do.
+ *
+ * `undefined` for the width when off, never `0`: a node with no
+ * `outlineWidth` of its own is one core can leave out of the widened damage
+ * rects entirely (`_outlineExtent`, src/nodes.js), and `0` is the documented
+ * way to opt *out* of a ring the node would otherwise get.
+ */
+export const focusRingStyle = (theme, on) =>
+  on
+    ? {
+        outlineWidth: theme.focusRingWidth,
+        outlineColor: theme.focusRing,
+        outlineOffset: theme.focusRingOffset,
+      }
+    : null;
+
 /**
  * The geometry of rows on a rounded sheet: how far a row sits inside the
  * sheet's edge, and how round its own corners are.

package/src/events.js

@@ -13,7 +13,12 @@ import { callHandler, reportHandlerError } from './errors.js';
 import { armDrag } from './dnd.js';
 import { desktopSettings } from './desktopsettings.js';
 import { noteInputTime } from './inputtime.js';
-import { hooks as a11yHooks, isFocusable, effectivelyVisible } from './a11y.js';
+import {
+  hooks as a11yHooks,
+  isFocusable,
+  isTextControl,
+  effectivelyVisible,
+} from './a11y.js';
 import { Composer, composeTableFor } from './compose.js';
 import { acceleratorKeysym } from './keyboard.js';
 import { MOD } from './keysyms.js';
@@ -340,6 +345,11 @@ export class EventManager {
     // release that continue the same gesture follow
     this._downDefaulted = false;
     this.capturedNode = null;
+    // The cursor the window is already wearing. `null` rather than
+    // undefined on purpose: `null` *is* a cursor — X None, "inherit the
+    // parent's" — and it is the one a window starts with, so the first
+    // hover over a subtree that names no cursor has nothing to change.
+    this._appliedCursor = null;
     // Attention (ntk#37): the one node the pointer looks like it is heading
     // for, the recent pointer samples the trajectory is estimated from, and
     // the window's candidate registry held directly so the motion path costs
@@ -1497,6 +1507,12 @@ export class EventManager {
    * handing focus back as it closes, `node.focus()` from an application —
    * lights one, because none of those tell the user where focus went.
    *
+   * With one exception, which is CSS's too: a **text control** clicked into
+   * lights a ring anyway (`_ringsOnPress`). What the pointer user knows is
+   * where they clicked, not that the next keystroke will land there, and a
+   * clicked field is about to swallow the keyboard — so the one thing the
+   * ring says that the click did not is exactly the thing worth saying.
+   *
    * `backwards` is only meaningful for `reason: 'key'`, and only one element
    * has ever needed it: XEmbed distinguishes a Tab arriving forwards from a
    * back-Tab, because that is what tells an embedded client whether to focus
@@ -1548,7 +1564,10 @@ export class EventManager {
       // and back onto the window that owns it.
       if (!this.keyboardFocused && !restoring) this.node.window?.focus?.();
       node.setStyleState(':focus', true);
-      node.setStyleState(':focus-visible', reason !== 'pointer');
+      node.setStyleState(
+        ':focus-visible',
+        reason !== 'pointer' || this._ringsOnPress(node),
+      );
       // …and nothing scrolls to meet it either: the node is coming back to
       // the arrangement it left, and this reveal's layout has not run, so a
       // scroll here would be computed from a rect that does not exist yet.
@@ -1564,6 +1583,26 @@ export class EventManager {
     a11yHooks.focus?.(old, node);
   }
 
+  /**
+   * Whether a press lands `:focus-visible` on this node as well as `:focus`.
+   *
+   * The UA rule browsers settled on, and for the reason they settled on it:
+   * a control the keyboard is about to talk to has to show that it holds the
+   * keyboard, whichever way focus arrived. Clicking into a field puts the
+   * caret somewhere the user chose and then makes every keystroke go there —
+   * a state a button, a checkbox or a tab does not enter on a click, which
+   * is why those still stay dark until Tab.
+   *
+   * Asked as "does this element hold editable text", not as "is its kind
+   * `<textinput>`": `isTextControl` is the same predicate the AT-SPI
+   * EDITABLE state is built on (src/a11y.js), so `<textarea>` and a
+   * third-party editor reporting an editable text state answer yes on their
+   * own — the two routes that make a node take the keyboard cannot drift.
+   */
+  _ringsOnPress(node) {
+    return isTextControl(node);
+  }
+
   /**
    * Flip `:focus-within` over the focused node's ancestor chain, diffed the
    * way hover and the press chain are.

package/src/nodes.js

@@ -262,6 +262,7 @@ const INVALIDATE_REASONS = new Set([
   'props', // a React commit changed what a node draws
   'style-state', // :hover/:focus/:active/:disabled restyle
   'shadow', // a boxShadow got smaller: where it *was* still owes a repaint
+  'outline', // …and the same for an outline a style swap took away
   'theme', // a theme/token change restyled a subtree
   'direction', // the reading direction moved: sides, glyph order, bar edge
   'animation', // a transition frame
@@ -1707,6 +1708,26 @@ export class Node {
         );
       }
     }
+    // An outline that just got smaller — or went away — owes the same debt,
+    // and it is only ever owed here. Core's own ring rides `:focus-visible`,
+    // where `EventManager.focus` claims the region while the ring is still
+    // on; what arrives through a style swap is the `outlineWidth` escape
+    // hatch (see `_outline`) — an application outlining a node for a reason
+    // of its own, or a widget ringing one *part* of itself, the way
+    // `<Checkbox>` rings its checked well and drops the ring again on blur.
+    if (
+      displayed.outlineWidth !== this.style.outlineWidth ||
+      displayed.outlineOffset !== this.style.outlineOffset
+    ) {
+      const shrank = this._outlineExtent(displayed) - this._outlineExtent();
+      if (shrank > 0) {
+        this.root?.invalidate(
+          false,
+          insetRect(this.paintBounds(), -shrank),
+          'outline',
+        );
+      }
+    }
     return this.style;
   }
 
@@ -3260,8 +3281,7 @@ export class Node {
    * costs nothing until it is asked for — which is once per focused node
    * per frame, not once per node per commit.
    */
-  _outline() {
-    const style = this.style;
+  _outline(style = this.style) {
     const explicit = style.outlineWidth !== undefined;
     if (!explicit && !this._focusableForRing()) return null;
     const theme = this.theme;
@@ -3287,10 +3307,10 @@ export class Node {
    * *erases* a ring is the one case where the state has already flipped
    * back, and `EventManager.focus` claims the region before it does.
    */
-  _outlineExtent() {
-    if (this.style.outlineWidth === undefined && !this.states[':focus-visible'])
+  _outlineExtent(style = this.style) {
+    if (style.outlineWidth === undefined && !this.states[':focus-visible'])
       return 0;
-    const outline = this._outline();
+    const outline = this._outline(style);
     return outline ? outline.width + Math.max(0, outline.offset) : 0;
   }
 

package/src/screens.js

@@ -401,9 +401,6 @@ function watchLayout(session) {
   const X = session.app.X;
   const root = X.display?.screen?.[0]?.root;
   if (root == null) return;
-  // PropertyChange on a window we do not own. Legal and shared — every
-  // panel-aware application on the desktop selects this same event.
-  X.ChangeWindowAttributes(root, { eventMask: PROPERTY_CHANGE_MASK }, () => {});
   session.onEvent((ev) => {
     if (session.stopped) return;
     if (ev.type !== PROPERTY_NOTIFY || ev.wid !== root) return;
@@ -411,6 +408,27 @@ function watchLayout(session) {
     relayout(session);
   });
   watchRandR(session);
+  // PropertyChange on a window we do not own. Legal and shared — every
+  // panel-aware application on the desktop selects this same event.
+  //
+  // Through ntk's root Window rather than as a raw ChangeWindowAttributes,
+  // because an X event mask is absolute per client: whoever writes last wins
+  // outright. ntk keeps selections additive by tracking the mask on a Window
+  // it caches per id, and adopting the root — which the shared-glyph
+  // directory does to hear MANAGER announcements — starts that tracked mask
+  // at zero and writes StructureNotify over whatever was there. A raw write
+  // is a value the next adopter silently overwrites, in either direction:
+  // reversed, it is a window manager's SubstructureRedirect that goes.
+  //
+  // Last in this function on purpose. `rootWindow()` constructs a Window,
+  // which can throw, and `beginScreens` calls this inside a bare catch — so
+  // ahead of the two registrations above, a throw here would take the
+  // work-area handler and the RandR watch with it rather than only the
+  // selection it belongs to.
+  session.app
+    .rootWindow()
+    .selectInput(PROPERTY_CHANGE_MASK)
+    .catch(() => {});
 }
 
 /** Re-read everything the layout is built from and publish once. */

package/src/windowstate.js

@@ -43,6 +43,7 @@ import { useTopLevelWindow, windowIdOf } from './windowid.js';
 
 const VISIBILITY_NOTIFY = 15;
 const VISIBILITY_CHANGE_MASK = 65536; // x11.eventMask.VisibilityChange
+const PROPERTY_CHANGE_MASK = 4194304; // x11.eventMask.PropertyChange
 const FULLY_OBSCURED = 2;
 const DESKTOP_PROPERTY = '_NET_WM_DESKTOP';
 
@@ -198,6 +199,23 @@ function arm(session) {
   if (!wnd) return;
   session.armed = true;
 
+  // **One selection for everything this session needs.** Two masks are at
+  // stake — PropertyChange for `_NET_WM_STATE`/`_NET_WM_DESKTOP`, and
+  // VisibilityChange for the obscured watch — and ntk grows a window's mask
+  // one request per first listener of each kind. Asking for both here, before
+  // either subscription, makes the `statechange` listener below a detected
+  // no-op and leaves `watchVisibility` nothing to select: one
+  // ChangeWindowAttributes for a session instead of two, on a window that is
+  // already mapped and on screen by the time any of this runs.
+  if (typeof wnd.selectInput === 'function') {
+    Promise.resolve(
+      wnd.selectInput(PROPERTY_CHANGE_MASK | VISIBILITY_CHANGE_MASK),
+    ).catch(() => {
+      // a window destroyed between the ref resolving and this call; the
+      // defaults stand and nothing further will arrive
+    });
+  }
+
   // Focus, from the event manager rather than from ntk directly: it already
   // dedups FocusIn/FocusOut and already knows the answer for a window that
   // has not seen either yet.
@@ -269,9 +287,9 @@ function readDesktop(session) {
 
 /**
  * VisibilityNotify, which ntk has no event name for — its mask table stops
- * at the events a widget toolkit needs — so the mask goes on through
- * `selectInput` (which ORs into ntk's own tracked mask, so nothing it adds
- * later drops this) and the event is read off the raw connection.
+ * at the events a widget toolkit needs — so the event is read off the raw
+ * connection. The mask it needs was selected by `arm()`, together with the
+ * one the state watch needs.
  */
 function watchVisibility(session) {
   const wnd = session.node.window;
@@ -285,11 +303,6 @@ function watchVisibility(session) {
   };
   X.on('event', onEvent);
   session._offs.push(() => X.off?.('event', onEvent));
-
-  Promise.resolve(wnd.selectInput(VISIBILITY_CHANGE_MASK)).catch(() => {
-    // a window destroyed between the ref resolving and this call; the
-    // defaults stand and nothing further will arrive
-  });
 }
 
 /** What is known about a window right now. Stable until it changes. */