react-x11 2.15.2 → 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/dbusmenuexport.js

@@ -0,0 +1,243 @@
+// Serving `com.canonical.dbusmenu`: the half of the protocol that is the same
+// wherever the menu is hung.
+//
+// `dbusmenu.js` is the pure part — ids, snapshots, the diff — and says why
+// each of those is hard. This is the object that answers for it on a bus:
+// `GetLayout`, the property reads, `Event`, `AboutToShow`, and the two update
+// signals. Nothing here knows *why* a menu is exported, and that is the point.
+//
+// It was extracted from `GlobalMenuExport` when the tray arrived
+// (react-x11#353), because a panel menu and a tray menu differ only in how the
+// desktop is told where the menu is:
+//
+//   - a **global menu** registers a *window* with `AppMenu.Registrar`, and
+//     follows the registrar's ownership so the bar moves back into the window
+//     when the panel exits (`globalmenu.js`);
+//   - a **tray menu** is named by the `Menu` property of a StatusNotifierItem
+//     and has no window at all (`statusnotifier.js`).
+//
+// Both serve the identical tree. Subclasses own the bus lifecycle — when to
+// export, what to register, when to withdraw — and inherit everything below.
+
+import {
+  DBUSMENU_IFACE,
+  PROPERTY_TYPES,
+  diffSnapshots,
+  groupProperties,
+  layoutOf,
+  snapshot,
+  IdAllocator,
+} from './dbusmenu.js';
+
+/** dbusmenu's recursive layout struct: `(id, properties, children)`. */
+export const LAYOUT_SIGNATURE = '(ia{sv}av)';
+
+/**
+ * A menu tree, serialised and served.
+ *
+ * `getMenus()` is read at construction and on every `update()`; `onSelect` and
+ * `onAboutToShow` receive the *item object* the app authored, not an id, so a
+ * caller never deals in dbusmenu's numbering.
+ */
+export class DbusMenuExport {
+  constructor({ getMenus, onSelect, onAboutToShow }) {
+    this.getMenus = getMenus;
+    this.onSelect = onSelect;
+    this.onAboutToShow = onAboutToShow;
+
+    this.alloc = new IdAllocator();
+    this.nodes = snapshot(getMenus(), this.alloc);
+    this.revision = 1;
+
+    /** Set by the subclass once the object is actually on a bus: until then
+     *  `update()` must not emit, because nobody is listening and the
+     *  revision would run ahead of the first `GetLayout`. */
+    this.exported = false;
+    this.iface = null;
+    this.dbus = null;
+  }
+
+  // ----------------------------------------------------------------- update
+
+  /**
+   * A new `menus` array. Serialise, diff, and send the *narrower* of the two
+   * signals the protocol has — see `diffSnapshots`, where the choice is made
+   * and why it matters.
+   */
+  update(menus) {
+    const next = snapshot(menus, this.alloc);
+    const change = diffSnapshots(this.nodes, next);
+    this.nodes = next;
+    if (!this.exported || change.kind === 'none') return;
+
+    if (change.kind === 'properties') {
+      this.iface?.emit.ItemsPropertiesUpdated(
+        change.updated.map(([id, props]) => [id, this.wrap(props)]),
+        change.removed,
+      );
+      return;
+    }
+    this.revision += 1;
+    this.iface?.emit.LayoutUpdated(this.revision, change.parent);
+  }
+
+  /** Plain property values → the `a{sv}` the wire wants. */
+  wrap(props) {
+    const out = {};
+    for (const [name, value] of Object.entries(props)) {
+      const type = PROPERTY_TYPES[name];
+      if (type) out[name] = new this.dbus.Variant(type, value);
+    }
+    return out;
+  }
+
+  /** `layoutOf`'s plain tree → the recursive `(ia{sv}av)`. */
+  wrapLayout(node) {
+    const [id, props, children] = node;
+    return [
+      id,
+      this.wrap(props),
+      children.map(
+        (child) =>
+          new this.dbus.Variant(LAYOUT_SIGNATURE, this.wrapLayout(child)),
+      ),
+    ];
+  }
+
+  // --------------------------------------------------------------- protocol
+
+  itemFor(id) {
+    return this.nodes.get(id)?.item ?? null;
+  }
+
+  defineMenu(dbus) {
+    this.dbus = dbus;
+    const fire = (id, eventId) => {
+      const item = this.itemFor(id);
+      if (!item) return;
+      if (eventId === 'clicked') this.onSelect?.(item);
+      else if (eventId === 'opened') this.onAboutToShow?.(item);
+    };
+
+    return dbus.defineInterface({
+      name: DBUSMENU_IFACE,
+      methods: {
+        GetLayout: {
+          in: { parentId: 'i', recursionDepth: 'i', propertyNames: 'as' },
+          out: { revision: 'u', layout: LAYOUT_SIGNATURE },
+          handler: ({ parentId, recursionDepth, propertyNames }) => {
+            const tree = layoutOf(
+              this.nodes,
+              parentId,
+              recursionDepth ?? -1,
+              propertyNames,
+            );
+            // An id the shell remembers from before a structural change is the
+            // normal way to arrive here, not a protocol violation: answer with
+            // an empty item rather than an error, and let the LayoutUpdated it
+            // has already been sent bring it back for the real tree.
+            return {
+              revision: this.revision,
+              layout: this.wrapLayout(tree ?? [parentId, {}, []]),
+            };
+          },
+        },
+        GetGroupProperties: {
+          in: { ids: 'ai', propertyNames: 'as' },
+          out: { properties: 'a(ia{sv})' },
+          handler: ({ ids, propertyNames }) =>
+            groupProperties(this.nodes, ids, propertyNames).map(
+              ([id, props]) => [id, this.wrap(props)],
+            ),
+        },
+        GetProperty: {
+          in: { id: 'i', name: 's' },
+          out: { value: 'v' },
+          handler: ({ id, name }) => {
+            const props = this.nodes.get(id)?.props;
+            // `hasOwn` on both, so a name like `constructor` reads as absent
+            // rather than as a function that then fails to marshal.
+            const known = Object.hasOwn(PROPERTY_TYPES, name);
+            const value =
+              props && Object.hasOwn(props, name) ? props[name] : undefined;
+            // A property this item does not carry is at its default, and the
+            // spec's own advice is to answer with it rather than to error.
+            if (value === undefined || !known) return new dbus.Variant('s', '');
+            return new dbus.Variant(PROPERTY_TYPES[name], value);
+          },
+        },
+        Event: {
+          in: { id: 'i', eventId: 's', data: 'v', timestamp: 'u' },
+          out: {},
+          handler: ({ id, eventId }) => fire(id, eventId),
+        },
+        EventGroup: {
+          in: { events: 'a(isvu)' },
+          out: { idErrors: 'ai' },
+          handler: ({ events }) => {
+            const errors = [];
+            for (const [id, eventId] of events ?? []) {
+              if (this.itemFor(id)) fire(id, eventId);
+              else errors.push(id);
+            }
+            return errors;
+          },
+        },
+        AboutToShow: {
+          in: { id: 'i' },
+          out: { needUpdate: 'b' },
+          handler: ({ id }) => this.aboutToShow(id),
+        },
+        AboutToShowGroup: {
+          in: { ids: 'ai' },
+          out: { updatesNeeded: 'ai', idErrors: 'ai' },
+          handler: ({ ids }) => {
+            const errors = [];
+            for (const id of ids ?? []) {
+              if (this.itemFor(id)) this.aboutToShow(id);
+              else errors.push(id);
+            }
+            return { updatesNeeded: [], idErrors: errors };
+          },
+        },
+      },
+      properties: {
+        Version: { type: 'u', access: 'read', get: () => 3 },
+        Status: { type: 's', access: 'read', get: () => 'normal' },
+        TextDirection: { type: 's', access: 'read', get: () => 'ltr' },
+        // Empty, and not a placeholder: `icon-name` is looked up in the
+        // desktop's own theme, which is where an app's icons should come from.
+        // A path here would be for icons shipped beside the app.
+        IconThemePath: { type: 'as', access: 'read', get: () => [] },
+      },
+      signals: {
+        LayoutUpdated: { args: { revision: 'u', parent: 'i' } },
+        ItemsPropertiesUpdated: {
+          args: { updated: 'a(ia{sv})', removed: 'a(ias)' },
+        },
+        ItemActivationRequested: { args: { id: 'i', timestamp: 'u' } },
+      },
+    });
+  }
+
+  /**
+   * The reply has to go out **now**, and React has not rendered yet.
+   *
+   * `setState` from here does not produce a new tree before this function
+   * returns, so there is no honest way to answer `true` — and answering `true`
+   * dishonestly is worse than answering `false`: the shell then blocks on a
+   * `GetLayout` for a subtree that has not been built, gets the old one, and
+   * caches it.
+   *
+   * So: answer `false`, let the handler run, and let the ordinary update path
+   * emit `LayoutUpdated` when the new items actually serialise. Shells listen
+   * for that unconditionally — it is the same signal a menu changing while
+   * open produces — so a lazily-built submenu still fills in, one round trip
+   * later than a synchronous toolkit would manage.
+   */
+  aboutToShow(id) {
+    const item = this.itemFor(id);
+    if (item) this.onAboutToShow?.(item);
+    return false;
+  }
+}