react-x11 2.9.0 → 2.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -32,6 +32,7 @@
     "examples:tooltips": "tsx examples/tooltips.jsx",
     "examples:chat": "tsx examples/chat.jsx",
     "examples:clipboard": "tsx examples/clipboard.jsx",
+    "examples:calendar": "tsx examples/calendar.jsx",
     "labs:urischeme": "tsx examples/labs/urischeme.jsx",
     "filedialog:probe": "node scripts/filedialog-probe.mjs",
     "a11y:probe": "node scripts/a11y-probe.mjs",
@@ -92,13 +93,14 @@
     "node": ">=20.19"
   },
   "dependencies": {
+    "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
     "ntk": "^8.7.0",
     "react-reconciler": "^0.33.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.7.0",
+    "@windowkit/appkit": "^0.8.0",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.7.0"
   },

package/src/cocoa/app.js

@@ -25,6 +25,7 @@ import { CocoaGLArea, cocoaGLConfig, resolveCocoaGLRuntime } from './glarea.js';
 import { CocoaDockMenu } from './dock.js';
 import { CocoaGlobalMenuExport } from './globalmenu.js';
 import { CocoaStatusItem } from './statusitem.js';
+import { CocoaCalendars } from './calendar.js';
 import { CocoaNotifications } from './notifications.js';
 import { CocoaPaneHost } from './panehost.js';
 import { CocoaPermissions } from './permissions.js';
@@ -177,6 +178,17 @@ export class CocoaApp {
         ? new CocoaNotifications(this)
         : null;
 
+    // EventKit (src/cocoa/calendar.js). Present exactly when the bridge has
+    // it (>= 0.8), and its presence is the top rung of
+    // src/desktopcalendar.js's ladder for this app — an older bridge leaves
+    // the ladder to find `osascript` instead, which answers the same
+    // questions out of the same framework.
+    this.calendars =
+      typeof native.calendars === 'function' &&
+      typeof native.eventsBetween === 'function'
+        ? new CocoaCalendars(this)
+        : null;
+
     // The GL policy, glbackend.js's shape. No GLX exists here, so the
     // default is 'auto' (the direct backend where the runtime loads);
     // useSupports('shaders') stays false until the first <glarea> resolves
@@ -767,6 +779,12 @@ export class CocoaApp {
       case 'notification-dismissed':
         this.notifications?.route(ev);
         return this._afterInput();
+      case 'calendar-store-changed':
+        // EventKit's own notification, which names nothing that changed. A
+        // watcher's answer is to query again, and that query's result is a
+        // render, so the frame goes out the way an input's does.
+        this.calendars?.route(ev);
+        return this._afterInput();
       case 'animation-end':
         // the presenter that added the animation registered for its id; an
         // id nobody knows is an animation already forgotten (cancelled, or

package/src/cocoa/calendar.js

@@ -0,0 +1,186 @@
+// The user's calendars on the cocoa backend — EventKit (`EKEventStore`)
+// through @windowkit/appkit (>= 0.8), the top rung of
+// src/desktopcalendar.js's ladder. `CocoaApp.calendars` is this object and
+// its *presence* is the capability, the rule `filePanels`, `permissions` and
+// `notifications` follow, so the ladder never names a backend.
+//
+// EventKit is the macOS counterpart of Evolution Data Server plus GNOME
+// Online Accounts in one framework: every account the user added in System
+// Settings > Internet Accounts — iCloud, Google, Exchange, CalDAV, a
+// subscribed feed — is served by one store, the desktop did the OAuth, and
+// the app never sees a credential.
+//
+// Three things about the framework shape the code here:
+//
+// - **It expands recurrences itself.** `predicateForEventsWithStartDate…`
+//   answers occurrences, so there is no `ical.js` on this rung and no
+//   recurrence arithmetic to get wrong. The EDS rung pays for that
+//   client-side; this one does not.
+// - **The predicate spans at most four years** (the framework's own limit),
+//   so a longer range is asked for in chunks and the pieces are merged —
+//   `chunkSpan` in ../desktopcalendar.js, shared with the `osascript` rung
+//   because it is the same framework underneath.
+// - **An all-day event ends at the last second of its last day.** Every
+//   other rung, and `byDay`, read `end` as exclusive, so it is normalised
+//   here — at the edge, once, rather than in every consumer.
+//
+// A change to anything in the store arrives as one `calendar-store-changed`
+// backend event that names nothing, so `watch` reports `kind: 'changed'`
+// with a null calendar and no count. Re-query; do not try to patch.
+
+import {
+  calendarBackendName,
+  chunkSpan,
+  hexFromComponents,
+  sortEvents,
+  withExclusiveEnd,
+} from '../desktopcalendar.js';
+
+/** `EKCalendar` as the shape every rung answers with. */
+export function calendarInfo(cal) {
+  return {
+    uid: String(cal.id),
+    name: cal.title ?? '',
+    // EventKit has no "unchecked in the sidebar" state to report — a
+    // calendar hidden in Calendar.app is still in the store — so every
+    // calendar here is enabled, which is what `enabled` means to a caller
+    // filtering the list.
+    enabled: true,
+    color: hexFromComponents(cal.color),
+    backend: calendarBackendName(cal.type),
+    readOnly: cal.allowsModifications === false || cal.immutable === true,
+    // The account the calendar came from, which is what the EDS rung's
+    // `account` is too: an `EKSource` is the Internet Accounts entry.
+    account: cal.source?.title ?? undefined,
+  };
+}
+
+/** One occurrence from the bridge as the shape every rung answers with. */
+export function desktopEvent(ev, byId) {
+  const meta = byId.get(String(ev.calendar));
+  const start = new Date(ev.start);
+  return {
+    uid: String(ev.id ?? ev.itemId ?? `${ev.calendar}:${ev.start}`),
+    summary: ev.title ?? '',
+    location: ev.location ?? undefined,
+    description: ev.notes ?? undefined,
+    start,
+    end: withExclusiveEnd(new Date(ev.end), Boolean(ev.allDay)),
+    allDay: Boolean(ev.allDay),
+    recurring: Boolean(ev.recurring),
+    calendar: meta
+      ? { uid: meta.uid, name: meta.name, color: meta.color }
+      : { uid: String(ev.calendar), name: '' },
+  };
+}
+
+export class CocoaCalendars {
+  constructor(app) {
+    this.app = app;
+    this._native = app._native;
+    this.backend = 'cocoa';
+    this._watchers = new Set();
+  }
+
+  /**
+   * The TCC grant, read without prompting. `'write-only'` is macOS 14's
+   * partial grant, which is a refusal to a reader — but its own word, so a
+   * caller that only saves events can tell it from a denial.
+   */
+  async access() {
+    return this.app.permissions
+      ? this.app.permissions.status('calendars')
+      : 'unknown';
+  }
+
+  /** The system prompt, once per app; the status after the user answered. */
+  async requestAccess() {
+    return this.app.permissions
+      ? this.app.permissions.request('calendars')
+      : 'unknown';
+  }
+
+  listCalendars() {
+    return new Promise((resolve, reject) => {
+      this._native.calendars((err, list) =>
+        err ? reject(err) : resolve((list ?? []).map(calendarInfo)),
+      );
+    });
+  }
+
+  _events(range) {
+    return new Promise((resolve, reject) => {
+      this._native.eventsBetween(range, (err, events) =>
+        err ? reject(err) : resolve(events ?? []),
+      );
+    });
+  }
+
+  /**
+   * The occurrences in a range, already expanded by the framework.
+   *
+   * `errors` is always empty here: there is one store, and a failure in it
+   * is a failure of the whole read rather than of one account. The EDS rung
+   * is the one where a single unreachable CalDAV server must not blank the
+   * month.
+   */
+  async eventsBetween(from, to, options = {}) {
+    const metas = options.calendars ?? (await this.listCalendars());
+    // "These calendars, of which there are none" is not "every calendar",
+    // which is what an empty filter means to the predicate underneath. A
+    // caller whose filter matched nothing must get nothing.
+    if (options.calendars && metas.length === 0) {
+      return { events: [], errors: [] };
+    }
+    const byId = new Map(metas.map((meta) => [meta.uid, meta]));
+    const ids = options.calendars ? metas.map((meta) => meta.uid) : undefined;
+
+    const events = [];
+    const seen = new Set();
+    for (const [start, end] of chunkSpan(from, to)) {
+      const raw = await this._events({ start, end, calendars: ids });
+      for (const one of raw) {
+        // An occurrence that straddles a chunk boundary is reported by both
+        // predicates; the caller must not see it twice.
+        const key = `${one.id} ${one.start}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        events.push(desktopEvent(one, byId));
+      }
+    }
+    return { events: sortEvents(events), errors: [] };
+  }
+
+  /**
+   * `EKEventStoreChangedNotification`, as the ladder's change signal.
+   *
+   * The notification names neither the calendar nor what happened — a
+   * detail EventKit does not have — so the change carries a null calendar
+   * and no count, and re-querying is the only correct answer. Every watcher
+   * hears every change, whatever range it asked for, because a change
+   * outside a range can still move what is inside it (a recurrence master
+   * edited months away).
+   */
+  async watch(from, to, onChange) {
+    const entry = { onChange };
+    this._watchers.add(entry);
+    return async () => {
+      this._watchers.delete(entry);
+    };
+  }
+
+  /** `calendar-store-changed`, routed from the app's backend callback. */
+  route() {
+    for (const entry of [...this._watchers]) {
+      try {
+        entry.onChange({ calendar: null, kind: 'changed', count: null });
+      } catch {
+        // a watcher that throws is not the other watchers' problem
+      }
+    }
+  }
+
+  /** Nothing to release: the store belongs to the process, and a handle's
+   *  own watchers are dropped by the stop function `watch` returned. */
+  async close() {}
+}

package/src/cocoa/native.js

@@ -11,10 +11,27 @@
 // is CommonJS + a .node binary, so `createRequire` is the honest loader.
 import { createRequire } from 'node:module';
 
-const require = createRequire(import.meta.url);
-
 const PACKAGE = '@windowkit/appkit';
 
+// The loader is made on first use, and from the executable when there is
+// no module URL to make it from. A bundle built for Node's single-executable
+// format (docs/packaging.md, tier 3) is CommonJS, and esbuild leaves
+// `import.meta` an empty object in that output — so a module-scope
+// `createRequire(import.meta.url)` threw ERR_INVALID_ARG_VALUE the moment
+// the backend loaded, in every cocoa app shipped as a SEA, before this
+// could say what it was trying to load. `createRequire(process.execPath)`
+// is the loader Node's SEA docs prescribe (the embedded main's `__filename`
+// *is* the executable), and it answers both specs below: an absolute
+// REACT_X11_CALAYERS_PATH resolves from anywhere, and the bare package name
+// resolves through a `node_modules` beside the binary. Made lazily, a
+// loader that cannot be made at all is reported by the error at the bottom
+// rather than by a throw at import.
+let require = null;
+function load(spec) {
+  require ??= createRequire(import.meta.url ?? process.execPath);
+  return require(spec);
+}
+
 let cached = null;
 
 export function loadNative() {
@@ -30,7 +47,7 @@ export function loadNative() {
   const path = process.env.REACT_X11_CALAYERS_PATH;
   for (const spec of [path, PACKAGE].filter(Boolean)) {
     try {
-      const mod = require(spec);
+      const mod = load(spec);
       // the package's index.js exports the raw addon as `native`; a direct
       // path to a built checkout may be the addon itself
       cached = mod.native ?? mod;

package/src/cocoa/permissions.js

@@ -13,23 +13,32 @@
 // bundled app must carry the usage-description keys
 // (`NSCameraUsageDescription` and friends) or a request never prompts.
 
-/** Apple's four words as the ladder's. */
+/** Apple's words as the ladder's. `writeOnly` is macOS 14's partial grant
+ *  for EventKit — a grant to a writer, a refusal to a reader — and stays its
+ *  own word for exactly that reason. */
 const STATUS = Object.freeze({
   authorized: 'granted',
   denied: 'denied',
   restricted: 'restricted',
   notDetermined: 'prompt',
+  writeOnly: 'write-only',
 });
 
 export function statusFromBridge(status) {
   return STATUS[status] ?? 'unknown';
 }
 
-/** The bridge's options for a kind: `automation` carries its target. */
+/** The bridge's options for a kind: `automation` carries its target, and
+ *  `calendars` the level being asked for (`reminders` has no write-only
+ *  grant, and the bridge refuses one with a TypeError). */
 function bridgeOptions(kind, options = {}) {
-  return kind === 'automation' && options.target != null
-    ? { target: String(options.target) }
-    : undefined;
+  if (kind === 'automation' && options.target != null) {
+    return { target: String(options.target) };
+  }
+  if (kind === 'calendars' && options.access != null) {
+    return { access: String(options.access) };
+  }
+  return undefined;
 }
 
 export class CocoaPermissions {

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,
@@ -438,7 +440,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 +471,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 +522,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
@@ -635,4 +645,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