react-x11 2.15.3 → 2.16.0

package/src/components/ProgressBar.js

@@ -25,7 +25,7 @@ const CROSSING_MS = 1100;
  *
  * The slide is a **loop** in the style (`animation`,
  * [styling.md](../../docs/styling.md#loops)), not a timer here: it runs on
- * the window's own frame clock, claims the track as its damage every frame
+ * the window's own frame clock, claims the block as its damage every frame
  * instead of invalidating the window, and stops itself when the window is
  * unmapped, minimized or buried. A `setInterval` calling `setState` would
  * do none of those three, and would re-render this component sixty times a

package/src/components/Slider.js

@@ -4,6 +4,7 @@
 
 import React, { useRef, useState } from 'react';
 import { useAppOrNull } from '../appcontext.js';
+import { flattenStyle } from '../styles.js';
 import { Bezel, bezelNatural, useNativeControls } from './native.js';
 import { useTheme } from './theme.js';
 import { changeEvent } from './change.js';
@@ -21,7 +22,10 @@ import {
 const h = React.createElement;
 
 const SLIDER_THUMB = 16;
-const SLIDER_SLOP = (24 - SLIDER_THUMB) / 2;
+
+/** A length a slot's style gave, when it is a number of pixels. */
+const lengthIn = (style, key) =>
+  typeof style[key] === 'number' ? style[key] : undefined;
 
 /**
  * <Slider value min max step onChange disabled …boxProps> — draggable
@@ -34,6 +38,15 @@ const SLIDER_SLOP = (24 - SLIDER_THUMB) / 2;
  *
  * Keyboard: arrows step, Home/End jump to the ends, PageUp/PageDown move
  * by ten steps.
+ *
+ * `thumbStyle`, `trackStyle` and `fillStyle` are style slots over the three
+ * drawn parts (#593), each merged over the part's own default, so a designed
+ * slider — a flat accent thumb with a shadow and no ring on a hairline track —
+ * is the widget restyled rather than rebuilt from boxes. The thumb's `width`
+ * and `height` are read back: the pointer's travel is the track less one
+ * thumb, and the control is as tall as the taller of thumb and track. Any
+ * slot also chooses the drawn slider over the platform's own, whose pixels
+ * no style reaches.
  */
 export function Slider({
   value = 0,
@@ -46,11 +59,22 @@ export function Slider({
   height = 4,
   native,
   style,
+  thumbStyle,
+  trackStyle,
+  fillStyle,
   ...boxProps
 }) {
   const theme = useTheme();
   const app = useAppOrNull();
-  const nativeControls = useNativeControls(native);
+  const styled = Boolean(thumbStyle || trackStyle || fillStyle);
+  const nativeControls = useNativeControls(styled ? false : native);
+  // the sizes the drawing and the pointer math have to agree on
+  const thumb = flattenStyle(thumbStyle);
+  const thumbWidth = lengthIn(thumb, 'width') ?? SLIDER_THUMB;
+  const thumbHeight = lengthIn(thumb, 'height') ?? thumbWidth;
+  const trackHeight = lengthIn(flattenStyle(trackStyle), 'height') ?? height;
+  const controlHeight = Math.max(thumbHeight, trackHeight);
+  const slop = Math.max(0, (24 - controlHeight) / 2);
   const [focused, setFocused] = useState(false);
   const [dragging, setDragging] = useState(false);
   const trackRef = useRef(null);
@@ -88,11 +112,11 @@ export function Slider({
     if (!rect?.width) return value;
     // the thumb is centred on the value, so the usable travel is the track
     // minus one thumb width — otherwise min/max are unreachable at the ends
-    const travel = Math.max(1, rect.width - SLIDER_THUMB);
+    const travel = Math.max(1, rect.width - thumbWidth);
     const x =
       node.direction === 'rtl'
-        ? rect.x + rect.width - ev.x - SLIDER_THUMB / 2
-        : ev.x - rect.x - SLIDER_THUMB / 2;
+        ? rect.x + rect.width - ev.x - thumbWidth / 2
+        : ev.x - rect.x - thumbWidth / 2;
     return quantize(min + (Math.min(travel, Math.max(0, x)) / travel) * span);
   };
 
@@ -226,7 +250,7 @@ export function Slider({
       style: [
         disabled || { cursor: 'pointer' },
         {
-          height: SLIDER_THUMB,
+          height: controlHeight,
           minWidth: 0,
           justifyContent: 'center',
           // the control is as tall as its thumb and the track inside it sets
@@ -234,7 +258,7 @@ export function Slider({
           // WCAG 2.2 SC 2.5.8's 24 on the axis that is short, without moving
           // a pixel of the drawing — a taller slider would misalign every row
           // it sits in.
-          hitSlop: { top: SLIDER_SLOP, bottom: SLIDER_SLOP },
+          hitSlop: { top: slop, bottom: slop },
         },
         style,
       ],
@@ -243,14 +267,16 @@ export function Slider({
     h(
       'box',
       {
-        style: {
-          height: height,
-          borderRadius: height / 2,
-          backgroundColor: theme.track,
-          flexDirection: 'row',
-          alignItems: 'center',
-          pointerEvents: 'none',
-        },
+        style: [
+          {
+            height: height,
+            borderRadius: height / 2,
+            backgroundColor: theme.track,
+          },
+          trackStyle,
+          // the parts of the track the fill and the pointer depend on
+          { flexDirection: 'row', alignItems: 'center', pointerEvents: 'none' },
+        ],
       },
       // flex ratios, not a percentage width: a percentage child resolves
       // against the space available while the track is still being
@@ -258,14 +284,15 @@ export function Slider({
       // at value = max the control grew, which moved the handle, which
       // changed the value, and a drag turned into an oscillation
       h('box', {
-        style: {
-          flexGrow: fraction,
-          flexShrink: 0,
-          flexBasis: 0,
-          height: height,
-          borderRadius: height / 2,
-          backgroundColor: disabled ? theme.textMuted : theme.accent,
-        },
+        style: [
+          {
+            height: trackHeight,
+            borderRadius: trackHeight / 2,
+            backgroundColor: disabled ? theme.textMuted : theme.accent,
+          },
+          fillStyle,
+          { flexGrow: fraction, flexShrink: 0, flexBasis: 0 },
+        ],
       }),
       h('box', {
         style: { flexGrow: 1 - fraction, flexShrink: 0, flexBasis: 0 },
@@ -276,22 +303,28 @@ export function Slider({
     // mirror on their own — a `row` runs the other way under `direction:
     // 'rtl'` — and these are what keep the thumb on top of the join.
     h('box', {
-      style: {
-        position: 'absolute',
-        start: `${fraction * 100}%`,
-        marginStart: -SLIDER_THUMB * fraction,
-        width: SLIDER_THUMB,
-        height: SLIDER_THUMB,
-        borderRadius: SLIDER_THUMB / 2,
-        borderWidth: 1,
-        borderColor: disabled
-          ? theme.border
-          : focused || dragging
-            ? theme.accentHover
-            : theme.border,
-        backgroundColor: disabled ? theme.surfaceHover : theme.surface,
-        pointerEvents: 'none',
-      },
+      style: [
+        {
+          width: thumbWidth,
+          height: thumbHeight,
+          borderRadius: Math.min(thumbWidth, thumbHeight) / 2,
+          borderWidth: 1,
+          borderColor: disabled
+            ? theme.border
+            : focused || dragging
+              ? theme.accentHover
+              : theme.border,
+          backgroundColor: disabled ? theme.surfaceHover : theme.surface,
+        },
+        thumbStyle,
+        // where it is: the value's place on the travel the math uses
+        {
+          position: 'absolute',
+          start: `${fraction * 100}%`,
+          marginStart: -thumbWidth * fraction,
+          pointerEvents: 'none',
+        },
+      ],
     }),
   );
 }

package/src/components/anchor.js

@@ -11,6 +11,7 @@ export {
   anchorArea,
   anchorOffscreen,
   anchorRect,
+  anchorScreenRect,
   centerRect,
   screenRect,
   subRect,
@@ -177,8 +178,10 @@ export function measureLabel(node, text, style) {
   // `{ 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.
+  // own labels. `letterSpacing` and the OpenType features move advances the
+  // same way (a device length and a tag bag, as they cascade). 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), {
     family: style?.family ?? inherited?.family ?? 'sans-serif',
@@ -186,6 +189,8 @@ export function measureLabel(node, text, style) {
     weight: style?.weight ?? inherited?.weight ?? 'normal',
     style: style?.style ?? inherited?.style,
     variations: style?.variations ?? inherited?.variations,
+    letterSpacing: inherited?.letterSpacing,
+    features: inherited?.features,
   });
   return { width: layout.width / s, height: layout.height / s };
 }

package/src/components/index.js

@@ -6,6 +6,7 @@ export { ThemeProvider, useDirection, useTheme } from './theme.js';
 export {
   anchorArea,
   anchorRect,
+  anchorScreenRect,
   centerRect,
   screenRect,
   useAnchor,

package/src/components/theme.js

@@ -10,6 +10,7 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { useAppearanceWhen } from '../appearancehooks.js';
 import { EnvValue, registerFrameProvider } from '../frame/env.js';
+import { THEME_SCOPE } from '../nodes/kinds.js';
 import {
   DarkTheme,
   DefaultTheme,
@@ -30,8 +31,9 @@ export { DarkTheme, DefaultTheme, resolveTheme };
 // has to merge again.
 const ThemeContext = React.createContext(null);
 
-// The provider's box fills its parent, which is what an app-level provider
-// wants; `style` is there for the ones that wrap a single control.
+// Inside a window the provider's box fills its parent, which is what an
+// app-level provider wants; `style` is there for the ones that wrap a single
+// control. Above the windows there is nothing to fill, and neither applies.
 const FILL = Object.freeze({ flexGrow: 1 });
 
 /**
@@ -47,6 +49,25 @@ const FILL = Object.freeze({ flexGrow: 1 });
  * Skip the second and `<ThemeProvider value={dark}>` over
  * `<box style={{ color: '$text' }}>` silently paints nothing (#119).
  *
+ * ## Where it goes
+ *
+ * **Above the windows, or inside one.** At the root it draws nothing and the
+ * windows under it take the palette — whatever shape they arrive in: a
+ * component that renders one, a window that is closed for now, several at
+ * once (#584).
+ *
+ * ```jsx
+ * root.render(
+ *   <ThemeProvider colorScheme={dark ? 'dark' : 'light'}>
+ *     <App />
+ *   </ThemeProvider>,
+ * );
+ * ```
+ *
+ * Inside a window it is a box that fills its parent, with `style` for the
+ * rest. A window nested under it is handed on to the window the provider is
+ * directly inside, with the palette, since a window nests only in a window.
+ *
  * ## What "already in force" means
  *
  * **The desktop's palette.** With no provider at all an app is dark on a dark
@@ -134,7 +155,13 @@ export function ThemeProvider({
     h(
       EnvValue,
       { k: THEME_ENV_KEY, value: theme },
-      planted(children, theme, boxStyle),
+      // The node the palette is planted on (nodes/kinds.js). Written the same
+      // wherever the provider is: the renderer knows whether that is inside a
+      // window, where it is a box, or above the windows, where it is a node
+      // that draws nothing — which a provider could never tell from its
+      // children, since a component, a closed window and a fragment all look
+      // alike from here (#584).
+      h(THEME_SCOPE, { theme, style: boxStyle }, children),
     ),
   );
 }
@@ -149,33 +176,10 @@ export const THEME_ENV_KEY = 'react-x11:theme';
 // the complete merged palette, so it wins every token; a pane's own inner
 // ThemeProvider still overrides below it, which is the opt-out a pane that
 // wants its own look already has.
-registerFrameProvider(
-  THEME_ENV_KEY,
-  (value, children) => h(ThemeProvider, { value }, children),
-  // directly around the pane's window: `planted` puts the palette on a
-  // window among its direct children, and the window is where it must land
-  { innermost: true },
+registerFrameProvider(THEME_ENV_KEY, (value, children) =>
+  h(ThemeProvider, { value }, children),
 );
 
-/**
- * The node that carries the palette into the tree. Normally a box — but a
- * `<window>` may only be a root child or nested in another window, never
- * inside a box, so a provider above one plants the prop on the windows
- * themselves instead of coming between them. An explicit `theme` on a child
- * still wins, since that is what it means everywhere else.
- */
-function planted(children, theme, style) {
-  const kids = React.Children.toArray(children);
-  if (kids.some((k) => React.isValidElement(k) && k.type === 'window')) {
-    return kids.map((k) =>
-      React.isValidElement(k)
-        ? React.cloneElement(k, { theme: k.props.theme ?? theme })
-        : k,
-    );
-  }
-  return h('box', { theme, style }, children);
-}
-
 /**
  * The palette in force here — already merged over any outer provider, and the
  * same object the provider planted in the tree, so `useTheme()` and a `$token`

package/src/desktopcapabilityhooks.js

@@ -22,15 +22,26 @@
 
 import { useEffect, useState } from 'react';
 
+import { useAppOrNull } from './appcontext.js';
 import { sessionBus } from './bus.js';
-import { NO_CAPABILITY, desktopCapability } from './capabilities.js';
+import {
+  NO_CAPABILITY,
+  capabilityNow,
+  desktopCapability,
+} from './capabilities.js';
+
+/** No answer yet: nothing available, and not settled. */
+const PENDING = Object.freeze({ ...NO_CAPABILITY, settled: false });
+
+/** A probe's answer, as the hook hands it out. */
+const settledState = (result) => Object.freeze({ ...result, settled: true });
 
 /** Value equality over the two levels a capability result has. */
 function same(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
   if (a.available !== b.available || a.backend !== b.backend) return false;
-  if (a.reason !== b.reason) return false;
+  if (a.reason !== b.reason || a.settled !== b.settled) return false;
   const ka = Object.keys(a.features);
   const kb = Object.keys(b.features);
   if (ka.length !== kb.length) return false;
@@ -59,7 +70,18 @@ function same(a, b) {
  * Capability names: `'notifications'`, `'tray'`, `'launcher'`.
  */
 export function useDesktopCapability(name) {
-  const [state, setState] = useState(NO_CAPABILITY);
+  // The app this component is rendered into, when there is one: a process
+  // with several connections has several answers, and the one that matters
+  // here is this tree's.
+  const app = useAppOrNull() ?? undefined;
+  // Settled from the first frame where the answer needed no asking — the
+  // Cocoa app's tray and Dock tile — and pending everywhere else until the
+  // first probe answers, so an app can hold back its fallback instead of
+  // flashing it.
+  const [state, setState] = useState(() => {
+    const now = capabilityNow(name, { app });
+    return now ? settledState(now) : PENDING;
+  });
 
   useEffect(() => {
     let cancelled = false;
@@ -68,11 +90,12 @@ export function useDesktopCapability(name) {
     let onChanged = null;
 
     const probe = () => {
-      desktopCapability(name)
+      desktopCapability(name, { app })
         .then((next) => {
           if (cancelled) return;
           // Replaced only when it differs by value: see the header.
-          setState((prev) => (same(prev, next) ? prev : next));
+          const settled = settledState(next);
+          setState((prev) => (same(prev, settled) ? prev : settled));
         })
         .catch(() => {});
     };
@@ -131,7 +154,7 @@ export function useDesktopCapability(name) {
         await ref?.release();
       })();
     };
-  }, [name]);
+  }, [name, app]);
 
   return state;
 }

package/src/filedialoghooks.js

@@ -40,11 +40,9 @@ async function showBuiltin(app, theme, props) {
   const root = await createRoot({ app });
   try {
     return await new Promise((resolve) => {
-      // `<FileDialog>` renders a `<window>`, and a window may only be a root
-      // child or nested in another window — so the palette travels as a prop
-      // and the dialog installs the provider *inside* its own window. Wrapping
-      // it here in `<ThemeProvider>` would put a `<box>` between the root and
-      // the window, which throws.
+      // The dialog is on a root of its own, which no provider in the app's
+      // tree reaches — so the palette the caller resolved travels as a prop,
+      // and the dialog puts it on its window and in a provider inside it.
       root.render(
         React.createElement(FileDialog, { ...props, theme, onDone: resolve }),
       );

package/src/frame/childmain.js

@@ -53,10 +53,7 @@ const h = React.createElement;
 /** Recreate the bridged providers around the pane's window, outermost
  * first — the parent's own nesting order, which the env Map records and
  * structured clone preserves. A key the pane never registered wraps
- * nothing: no module in this process reads it. Providers registered
- * `innermost` (the theme) wrap directly around the window, inside the
- * rest — see registerFrameProvider (src/frame/env.js) for why the
- * adjacency matters. */
+ * nothing: no module in this process reads it. */
 function wrapEnv(env, inner) {
   const wrap = (tree, [key, value]) => {
     const registered = registeredFrameContext(key);
@@ -69,16 +66,8 @@ function wrapEnv(env, inner) {
           tree,
         );
   };
-  const entries = [...env];
-  const isInnermost = ([key]) =>
-    registeredFrameContext(key)?.innermost === true;
   let tree = inner;
-  for (const entry of entries.filter(isInnermost).reverse()) {
-    tree = wrap(tree, entry);
-  }
-  for (const entry of entries.filter((e) => !isInnermost(e)).reverse()) {
-    tree = wrap(tree, entry);
-  }
+  for (const entry of [...env].reverse()) tree = wrap(tree, entry);
   return tree;
 }
 
@@ -118,13 +107,12 @@ function Bridge({ Component, store, rect, invoke, onReady }) {
   }, [onReady]);
 
   // The bridged providers wrap the *window*, not the pane component — the
-  // same position they held in the host. ThemeProvider plants the palette
-  // on a window it finds among its children (theme.js, `planted`), and the
-  // window is where it has to land: the window's own background follows the
-  // palette, and it is the top of the node tree every `$token` beneath
-  // resolves through. Mounted inside the window, the palette reached a box
-  // and the window kept resolving against the pane process's own desktop —
-  // a dark-desktop pane in a light-themed app, wrong in both directions.
+  // same position they held in the host. The theme has to reach the window
+  // itself: the window's own background follows the palette, and it is the
+  // top of the node tree every `$token` beneath resolves through. Mounted
+  // inside the window, the palette reached a box and the window kept
+  // resolving against the pane process's own desktop — a dark-desktop pane
+  // in a light-themed app, wrong in both directions.
   return wrapEnv(
     snapshot.env,
     h(

package/src/frame/env.js

@@ -69,17 +69,9 @@ export function registeredFrameContext(key) {
  * than `Context.Provider`, like `ThemeProvider`, which also plants the
  * palette on a node so `$token` styles resolve. `render(value, children)`
  * returns the wrapped element.
- *
- * `innermost: true` puts the provider directly around the pane's window,
- * inside every other bridged provider. ThemeProvider needs the adjacency:
- * it plants the palette on a window it finds among its *direct* children,
- * and the window is where the palette must land — the window's own
- * background follows it, and the node tree under it is what every `$token`
- * resolves through. Plain context providers have no such constraint and
- * keep the host's nesting order outside.
  */
-export function registerFrameProvider(key, render, { innermost = false } = {}) {
-  registry.set(key, { render, innermost });
+export function registerFrameProvider(key, render) {
+  registry.set(key, { render });
 }
 
 /**