react-x11 2.2.1 → 2.3.1

package/src/palette.js

@@ -222,6 +222,19 @@ export const DefaultTheme = {
   // than it looks next to a CSS padding for that reason: 12 here is about
   // what 8 came to once a typical face's ascent had been added on.
   paddingY: 12,
+  // Which scheme this palette *is* — 'light' or 'dark'. Not a colour but a
+  // fact about the colours, for the consumers that have to match them with
+  // something they do not paint themselves: the Cocoa backend picks the
+  // AppKit appearance its native control bezels are rendered in from this,
+  // so a pinned-light app gets light bezels on a dark desktop. A custom
+  // dark palette built over the light base should say `scheme: 'dark'`.
+  scheme: 'light',
+  // How the core controls render where the backend offers the platform's
+  // own: `'auto'` (native where supported — today the Cocoa backend),
+  // `'native'` (ask for it; warns and falls back to drawn where there is
+  // none) or `'drawn'` (always the themed rendering). Per-instance escape
+  // hatch: `native={false}` on the one custom-branded control.
+  controls: 'auto',
 };
 
 // Which pressed token is derived from which pair, when the palette does not
@@ -332,6 +345,7 @@ export function resolveTheme(value, base = DefaultTheme) {
  * theme after it gets to do.
  */
 export const DarkTheme = resolveTheme({
+  scheme: 'dark',
   // A near-black with a little blue in it rather than #000: pure black shows
   // every seam between a window and the widgets on it, and no desktop's dark
   // theme uses it.

package/src/styles.js

@@ -466,6 +466,11 @@ const isState = (key) => key.charCodeAt(0) === 58; /* ':' */
  * what a style can usefully ask about here is the window it is being laid
  * out in, not the screen.
  *
+ * The threshold is **logical** pixels, like every other number in a style
+ * block: `'@width >= 620'` flips where `width: 620` would fit, whatever
+ * the display scale (the window node divides its device size out before
+ * matching — `_resolveSizeQueries`).
+ *
  * Unlike a state block, a size query *may* set layout properties. That is
  * not an inconsistency: pointer state changes must never reflow the tree,
  * but a size query is only ever re-evaluated during a layout pass that a

package/src/testing/index.d.ts

@@ -66,6 +66,14 @@ export interface RenderX11Options {
    * D-Bus anywhere. See docs/accessibility.md.
    */
   a11y?: boolean;
+  /**
+   * Pin the display scale — device pixels per logical pixel (docs/scale.md).
+   * The headless harnesses resolve to exactly 1 on their own, so every
+   * geometry assertion means its numbers literally; `2` renders the tree
+   * the way a retina panel does, which is the only way to catch an element
+   * that compares a logical event coordinate with its device `abs`.
+   */
+  scale?: 'auto' | number;
 }
 
 /** One recorded assistive-technology fact, plus its one-line `summary`. */

package/src/types/elements.d.ts

@@ -23,6 +23,7 @@ import type {
   SubmitEvent,
   SyntheticEvent,
   ViewportEvent,
+  WheelEvent,
   WindowResizeEvent,
 } from './events.js';
 
@@ -841,6 +842,15 @@ export interface GlAreaProps extends DrawnProps<DrawnNode> {
   onDraw?: (gl: any, info: DrawInfo) => void;
   /** No GL surface — no GLX, or no matching visual. */
   onError?: (err: Error) => void;
+  /**
+   * The wheel over the surface. Inherited from `EventHandlers` like every
+   * other element's, and listed here because it is the **only** pointer
+   * event a `<glarea>` currently reports: the surface owns its own X window,
+   * so it selects the wheel there and hands it to the window's event manager
+   * (see docs/elements.md). Deltas are pixels, `preventDefault()` takes the
+   * default scroll action back, and it bubbles from this node.
+   */
+  onWheel?: (ev: WheelEvent<DrawnNode>) => void;
   /** A click inside the surface that hit no mesh. */
   onPointerMissed?: (ev: MouseEvent<DrawnNode>) => void;
 }

package/src/types/events.d.ts

@@ -13,7 +13,8 @@ export interface NativeEvent {
   /** X event type number. */
   type: number;
   name?: string;
-  /** Window-relative pointer position. */
+  /** Window-relative pointer position, in device pixels — the numbers off
+   * the wire, and the ones to compare with a node's `abs` (docs/scale.md). */
   x: number;
   y: number;
   /** Screen coordinates — what you anchor a `<popup>` at. */
@@ -33,7 +34,9 @@ export interface SyntheticEvent<T = DrawnNode> {
   target: T;
   /** The node whose handler is running. */
   currentTarget: T | null;
-  /** Window coordinates. */
+  /** Window coordinates, in logical pixels — the unit styles are written
+   * in. `nativeEvent.x`/`y` are the same point in device pixels, which is
+   * what a node's `abs` is in (docs/scale.md). */
   x: number;
   y: number;
   /** Coordinates relative to `target`'s box. */