react-x11 2.26.2 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.26.2",
+  "version": "2.27.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -103,12 +103,12 @@
   "dependencies": {
     "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
-    "ntk": "^8.16.1",
+    "ntk": "^8.17.8",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.17.0",
+    "@windowkit/appkit": "^0.18.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.6",
     "dbus-native": "^0.16.0",

package/src/backend/context2d.js

@@ -1562,7 +1562,23 @@ export class BackendContext2D {
       dw = sw;
       dh = sh;
     }
-    if (!this._blit(src, sx, sy, sw, sh, dx, dy, dw, dh)) {
+    if (this._blit(src, sx, sy, sw, sh, dx, dy, dw, dh)) {
+      // a row memcpy
+    } else if (this._faded()) {
+      this._native.ctxDrawSurfaceFaded(
+        this._s(),
+        src,
+        sx,
+        sy,
+        sw,
+        sh,
+        dx,
+        dy,
+        dw,
+        dh,
+        this._state.globalAlpha,
+      );
+    } else {
       this._native.ctxDrawSurface(
         this._s(),
         src,
@@ -1579,6 +1595,41 @@ export class BackendContext2D {
     this._dirty();
   }
 
+  /**
+   * Whether a surface is drawn under this `globalAlpha` from its pixels
+   * scaled by it (@windowkit/appkit's `ctxDrawSurfaceFaded`): where the
+   * alpha is below 1, no shadow would ink, and the bridge has the verb.
+   * CoreGraphics draws an image under an alpha below 1 at some fifteen times
+   * what the same draw costs at 1 — a 556x300 surface 1.24ms against 0.09 —
+   * so a group faded on a surface (`NodePaint._paintGroup`) cost more than
+   * fading each thing in it; scaled first, the same colours within a unit
+   * take 0.25ms (#810). A shadow is drawn from the image and the alpha
+   * together, so a draw that casts one is left to the draw that always did.
+   */
+  _faded() {
+    const st = this._state;
+    if (!(st.globalAlpha < 1)) return false;
+    if (typeof this._native.ctxDrawSurfaceFaded !== 'function') return false;
+    return !(
+      parseColor(st.shadowColor)[3] > 0 &&
+      (st.shadowBlur > 0 || st.shadowOffsetX !== 0 || st.shadowOffsetY !== 0)
+    );
+  }
+
+  /**
+   * `true` where a surface drawn under a `globalAlpha` below 1 costs about
+   * what it costs drawn at 1 — the macOS context, over a bridge with
+   * `ctxDrawSurfaceFaded` — so that a group faded on a surface of its own,
+   * as CSS `opacity` has it, is the cheaper way to fade what overlaps, and
+   * not only the right one. Absent where that is not known: on Windows,
+   * where Direct2D draws the bitmap with the opacity and nobody has
+   * measured it, and on X11, whose server composites a surface under an
+   * alpha in the request that composites it at all.
+   */
+  get fadesSurfacesCheaply() {
+    return typeof this._native.ctxDrawSurfaceFaded === 'function' || undefined;
+  }
+
   /**
    * The bitmap a `drawImage` source composites from: a surface's own, an
    * ntk Image's upload (made on its first draw, see `uploadImage`), or

package/src/cocoa/fonts.js

@@ -76,13 +76,30 @@ function woffToSfnt(woff) {
   return out;
 }
 
+/**
+ * The system font's two names from before CSS gave it one: `-apple-system`
+ * is WebKit's and Gecko's, `BlinkMacSystemFont` is Blink's, and a stack
+ * written for the web leads with both — GitHub's is `-apple-system,
+ * BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial,
+ * sans-serif`. CSS Fonts 4 standardised them as `system-ui`, the name the
+ * bridge knows. As families of their own neither exists, so the list moved
+ * on to the first one that does and a page written for SF was set in
+ * Helvetica. They name this platform's face and mean nothing on another,
+ * which is why they are resolved here and not in the X11 engine.
+ */
+const SYSTEM_UI_ALIASES = new Set(['-apple-system', 'blinkmacsystemfont']);
+
 /** family list string -> array: 'Inter, "SF Pro", sans-serif' */
 function familyList(family) {
-  if (Array.isArray(family)) return family;
-  return String(family ?? 'sans-serif')
-    .split(',')
-    .map((f) => f.trim().replace(/^["']|["']$/g, ''))
-    .filter(Boolean);
+  const names = Array.isArray(family)
+    ? family
+    : String(family ?? 'sans-serif')
+        .split(',')
+        .map((f) => f.trim().replace(/^["']|["']$/g, ''))
+        .filter(Boolean);
+  return names.map((name) =>
+    SYSTEM_UI_ALIASES.has(String(name).toLowerCase()) ? 'system-ui' : name,
+  );
 }
 
 function numericWeight(weight) {
@@ -519,6 +536,7 @@ const GENERIC_FAMILIES = new Set([
   'system-ui',
   'ui-sans-serif',
   'ui-monospace',
+  ...SYSTEM_UI_ALIASES,
 ]);
 
 /** The size a face is probed at when the question has no size in it. */

package/src/node.d.ts

@@ -159,6 +159,18 @@ export interface Context2D {
    * asks this first.
    */
   readonly scalesText?: boolean;
+  /**
+   * `true` where a `Surface` drawn under a `globalAlpha` below 1 costs about
+   * what it costs drawn at 1 — the macOS context, over a bridge that scales
+   * the surface's pixels by the alpha rather than drawing it through
+   * CoreGraphics' own alpha, which costs some fifteen times as much. Where
+   * it is true, fading a group drawn on a surface of its own — CSS
+   * `opacity` — is cheaper than fading each thing drawn in it, as well as
+   * right where they overlap. Absent where that is not known: Windows, and
+   * X11, whose server composites a surface under an alpha in the request
+   * that composites it.
+   */
+  readonly fadesSurfacesCheaply?: boolean;
   measureText(text: string): { width: number; [key: string]: unknown };
   /**
    * Composite an offscreen `Surface` (`react-x11/ntk`) — whole at a point,