react-x11 2.51.1 → 2.53.0

package/src/screencolor.js

@@ -65,12 +65,11 @@ import {
   PortalCancelledError,
   RESPONSE_OK,
   hasService,
-  parentWindowHandle,
+  portalParentFor,
   portalRequest,
   portalVersion,
 } from './portal.js';
 import { liveApps } from './trace-registry.js';
-import { windowIdOf } from './windowid.js';
 
 export const SCREENSHOT_IFACE = 'org.freedesktop.portal.Screenshot';
 /** `PickColor` arrived in version 2 of the Screenshot interface. */
@@ -220,14 +219,10 @@ async function portalPick(opts, ref) {
     // options)` — no title — which is the whole reason portalRequest takes a
     // signature now.
     signature: 'sa{sv}',
-    // The handle names an X window. A Wayland toplevel has none to name —
-    // an xdg-foreign export would be the equivalent — so there the dialog
-    // floats, which the portal allows.
-    args: [
-      appFor(opts)?.backend === 'wayland'
-        ? ''
-        : parentWindowHandle(windowIdOf(opts.parentWindow)),
-    ],
+    // An X window's handle on X11, an xdg-foreign export on Wayland, and
+    // nothing — a floating dialog, which the portal allows — where neither
+    // can be had.
+    args: [await portalParentFor(opts.parentWindow, appFor(opts))],
     options: {},
     signal: opts.signal,
   });

package/src/types/system.d.ts

@@ -253,16 +253,18 @@ export interface DesktopSettings {
   /** How far a press moves before it is a drag rather than a click. */
   readonly dragThreshold: number;
   /** **False means hold still** — the desktop asked for less motion:
-   *  `Gtk/EnableAnimations` off over XSETTINGS, reduce motion on macOS.
+   *  `Gtk/EnableAnimations` off over XSETTINGS, `enable-animations` off on
+   *  the settings portal (Wayland), reduce motion on macOS.
    *  Core's loops do not start then (docs/styling.md, "Loops"); an element
    *  that animates on a timer of its own holds still too, and draws its
    *  resting frame. True wherever the desktop said nothing. */
   readonly animations: boolean;
-  /** `'xsettings'`; `'macos'` on the Cocoa backend, where only `animations`
-   *  comes from the system (reduce motion) and the rest are the defaults; or
-   *  null where no settings daemon answered and these are the renderer's own
-   *  defaults. */
-  readonly source: 'xsettings' | 'macos' | 'test' | null;
+  /** `'xsettings'`; `'portal'` on the Wayland backend, from the settings
+   *  portal's GNOME namespaces; `'macos'` on the Cocoa backend, where only
+   *  `animations` comes from the system (reduce motion) and the rest are the
+   *  defaults; or null where nothing answered and these are the renderer's
+   *  own defaults. */
+  readonly source: 'xsettings' | 'portal' | 'macos' | 'test' | null;
 }
 
 /**

package/src/types/video.d.ts

@@ -69,8 +69,11 @@ export class VideoFrames {
   readonly colorSpace: VideoColorSpace;
   readonly range: VideoRange;
   /** This display's formats, cheapest first: what a decoder that can choose
-   * should emit (`ffmpeg -pix_fmt nv12`). NV12 leads where a frame goes on
-   * a layer as it is — macOS — and BGRA wherever a 2D context draws it. */
+   * should emit (`ffmpeg -pix_fmt nv12`). NV12 leads wherever something
+   * native takes it as it is — a layer on macOS, a shader on Wayland, an Xv
+   * port on X11 — and BGRA where a frame is converted in JavaScript. On X11
+   * it is BGRA, and not kept, until the port has answered, a few round
+   * trips after the first sink is made. */
   readonly preferredFormats: readonly VideoFormat[];
   /** Frames pushed so far. */
   readonly version: number;

package/src/videobackend.js

@@ -0,0 +1,28 @@
+// Who writes a `<video>`'s frames natively on an app, if anyone — the seam
+// `VideoFrames.preferredFormats` and the drawn presentation ask through
+// (design/architecture/video.md §6.3).
+//
+// The app itself where its backend has the verbs: the Cocoa app over the
+// bridge's video surfaces, the Wayland app over its own GL context. On X11
+// the app is ntk's, which knows nothing of sinks, so the answer is the Xv
+// writer react-x11 keeps for the connection (src/xvideo.js). A feature test,
+// not a question about which backend this is — `typeof app.xv` is an ntk
+// with XVideo discovery. Null where nothing will, and every frame is
+// converted in JavaScript (`frameToRGBA`, src/videoframes.js).
+import { xvVideoFor } from './xvideo.js';
+
+/**
+ * `{ videoFormats(), writeVideoFrame(surface, sink, frame, node),
+ * releaseVideoFrame?(surface), prepare?(sink) }` for `app`, or null.
+ */
+export function videoBackendOf(app) {
+  if (!app) return null;
+  if (
+    typeof app.writeVideoFrame === 'function' ||
+    typeof app.videoFormats === 'function'
+  ) {
+    return app;
+  }
+  if (typeof app.xv === 'function') return xvVideoFor(app);
+  return null;
+}

package/src/videoframes.js

@@ -1,5 +1,5 @@
 // `VideoFrames`: a sink an application pushes decoded video frames into,
-// and a `<video frames>` shows (docs/architecture/video.md §6.3).
+// and a `<video frames>` shows (design/architecture/video.md §6.3).
 //
 // react-x11 decodes nothing. Where the bytes come from — an `ffmpeg` child
 // writing rawvideo to a pipe, a WASM decoder, an addon over libmpv — is the
@@ -33,12 +33,16 @@
 //   a decoder that can choose (`ffmpeg -pix_fmt`); one that cannot still
 //   works, with the conversion charged where it happens.
 //
-// Pure: no node, no backend. The app is asked for its formats
-// (`app.videoFormats()`, the Cocoa app's answer from the bridge) and nothing
-// else.
+// No node and no backend: the one question asked of the display is its
+// formats, through `videoBackendOf` (src/videobackend.js) — the Cocoa app's
+// answer from the bridge, the Wayland app's own, and on X11 the Xv writer's,
+// which a sink starts asking for when it is made.
+
+import { videoBackendOf } from './videobackend.js';
 
 export const VIDEO_FORMATS = Object.freeze(['NV12', 'I420', 'BGRA']);
 const COLOR_SPACES = ['bt709', 'bt601', 'bt2020'];
+const BGRA_ONLY = Object.freeze(['BGRA']);
 const RANGES = ['video', 'full'];
 // The largest side a frame may have: a surface's limit on every backend, and
 // a number past which a size is a bug rather than a video.
@@ -209,22 +213,30 @@ export class VideoFrames {
     this._frame = null;
     this._listeners = new Set();
     this._preferred = null;
+    // On X11 the formats are a port's, and asking for one is round trips:
+    // started here, so they are known by the time a decoder that waits for
+    // anything at all — a probe of the file, a spawn — reads them.
+    videoBackendOf(app)?.prepare?.(this);
   }
 
   /**
    * This display's formats, cheapest first: what a decoder that can choose
-   * should emit. NV12 first where a frame can go on a layer as it is
-   * (Cocoa); BGRA first wherever a 2D context draws it.
+   * should emit. YCbCr first wherever something native takes it as it is —
+   * a layer on Cocoa, a shader on Wayland, an Xv port on X11 — and BGRA
+   * first where a frame is converted in JavaScript on its way to a 2D
+   * context. On X11 the answer is BGRA until the port has answered, a few
+   * round trips after the first sink is made, and is not kept until then.
    */
   get preferredFormats() {
-    if (this._preferred === null) {
-      const asked = this.app?.videoFormats?.();
-      this._preferred = Object.freeze(
-        Array.isArray(asked) && asked.length !== 0
-          ? asked.filter((f) => VIDEO_FORMATS.includes(f))
-          : ['BGRA'],
-      );
-    }
+    if (this._preferred !== null) return this._preferred;
+    const asked = videoBackendOf(this.app)?.videoFormats?.();
+    // null: still being asked — answer for now, and ask again next time
+    if (asked === null) return BGRA_ONLY;
+    this._preferred = Object.freeze(
+      Array.isArray(asked) && asked.length !== 0
+        ? asked.filter((f) => VIDEO_FORMATS.includes(f))
+        : ['BGRA'],
+    );
     return this._preferred;
   }
 
@@ -281,8 +293,9 @@ export const isVideoFrames = (v) => v instanceof VideoFrames;
 
 // --- converting a frame where nothing native will ----------------------------
 //
-// The drawn path on a backend with no native write (X11, win32, Wayland, a
-// Cocoa bridge older than its video surfaces): the frame converted here to
+// The drawn path where nothing native writes the frame (win32, an X server
+// with no Xv adaptor, a Cocoa bridge older than its video surfaces, and on
+// any backend a frame the native writer declines): the frame converted here to
 // the straight RGBA `putImageData` takes. Not free — two million pixels a
 // frame at 1080p — which is why `preferredFormats` says BGRA first there.
 // The matrix and the range are the frame's; no transfer function is

package/src/wayland/app.js

@@ -30,6 +30,7 @@ import { releaseDevice } from './device.js';
 import { WaylandSeat } from './seat.js';
 import { WaylandBackendWindow } from './backendwindow.js';
 import { WaylandSurface } from './surface.js';
+import { releaseVideoFrame, writeVideoFrame } from './video.js';
 import { InputRouter } from './input.js';
 import { WaylandTouch } from './touch.js';
 import { WaylandTablet } from './tablet.js';
@@ -104,6 +105,9 @@ export class WaylandApp extends EventEmitter {
     this.viewporter = null;
     this.fractionalScale = null;
     this.activation = null;
+    /** xdg-foreign's exporter: a toplevel's handle for another client to
+     *  parent to (`exportHandle`); null where the compositor has none */
+    this.exporter = null;
     /** the monitors, published into src/screens.js (outputs.js) */
     this.outputs = null;
     /** xdg-decoration, layer-shell, shm: null where the compositor has none */
@@ -153,6 +157,7 @@ export class WaylandApp extends EventEmitter {
     app.viewporter = await conn.bind('wp_viewporter');
     app.fractionalScale = await conn.bind('wp_fractional_scale_manager_v1');
     app.activation = await conn.bind('xdg_activation_v1');
+    app.exporter = await conn.bind('zxdg_exporter_v2');
     // The scale session first, so the outputs have a per-monitor map to
     // fill; then the outputs, awaited like the X11 backend's Xinerama tier:
     // an auto-sized window clamps to a monitor synchronously inside
@@ -304,6 +309,9 @@ export class WaylandApp extends EventEmitter {
   }
 
   _forgetWindow(win) {
+    // before the surface goes: the export is a handle *to* it
+    win._exported?.proxy.$.destroy();
+    win._exported = null;
     if (this.windows.get(win.wl.surface.id) === win)
       this.windows.delete(win.wl.surface.id);
     const i = this.toplevels.indexOf(win);
@@ -433,6 +441,32 @@ export class WaylandApp extends EventEmitter {
     return new WaylandSurface(this, options);
   }
 
+  /**
+   * The formats a `VideoFrames` sink is cheapest in here
+   * (`preferredFormats`, src/videoframes.js): all three, YCbCr first. Every
+   * one goes up as textures as it is and is converted by a shader
+   * (src/wayland/video.js), and NV12 or I420 is less than half of BGRA's
+   * bytes on the way.
+   */
+  videoFormats() {
+    return ['NV12', 'I420', 'BGRA'];
+  }
+
+  /**
+   * A `<video>`'s frame into `surface`, its drawn presentation, on the GPU:
+   * planes as textures, the matrix in a fragment shader. False where the
+   * frame cannot be — a size past the GPU's textures — and the node
+   * converts it in JavaScript instead (src/nodes/video.js).
+   */
+  writeVideoFrame(surface, sink, frame) {
+    return writeVideoFrame(this, surface, sink, frame);
+  }
+
+  /** The node let `surface` go: its plane textures go too. */
+  releaseVideoFrame(surface) {
+    releaseVideoFrame(this, surface);
+  }
+
   /**
    * What the machine can do, as a promise like the X11 and Cocoa answers
    * (src/glbackend.js chains on it): here the answer was settled when the
@@ -510,6 +544,37 @@ export class WaylandApp extends EventEmitter {
     return new WaylandOverlayPane(this, attributes);
   }
 
+  /**
+   * A handle another client can parent a window of its own to — the
+   * portal's `parent_window`, spelled `wayland:<handle>` there — or null.
+   *
+   * xdg-foreign's `export_toplevel`, made once per window on first ask and
+   * kept for its lifetime: the handle is valid for as long as the export
+   * object lives, and a file dialog opened twice from one window should name
+   * it the same way both times. Only an xdg_toplevel can be exported — a
+   * popup or a layer surface is a protocol error, so those answer null, as
+   * does a compositor without the protocol. The dialog then floats, which the
+   * portal allows; what it must never get is an `x11:` handle naming a
+   * Wayland window, which is what it got before this existed.
+   */
+  exportHandle(win) {
+    if (!this.exporter || !win?.wl?.surface || win.isPopup || win.isLayer) {
+      return Promise.resolve(null);
+    }
+    if (win._destroyed) return Promise.resolve(null);
+    if (!win._exported) {
+      const proxy = this.exporter.$.export_toplevel(win.wl.surface.id);
+      const handle = new Promise((resolve) => {
+        proxy.on('handle', (value) => resolve(value || null));
+        // the answer is one round trip away; a compositor that never sends
+        // it is a floating dialog, not a hung one
+        setTimeout(() => resolve(null), 1000).unref?.();
+      });
+      win._exported = { proxy, handle };
+    }
+    return win._exported.handle;
+  }
+
   /**
    * Ask the compositor to activate a window. Stacking is the compositor's;
    * xdg-activation lets a client ask with a token from a recent interaction,
@@ -542,6 +607,27 @@ export class WaylandApp extends EventEmitter {
 
   cancelAttention() {}
 
+  /**
+   * `useKeyboardState()`'s source on this backend: there is no XKB extension
+   * to ask, and the seat has the same answers from `wl_keyboard`
+   * (src/keyboardstate.js, `WaylandSeat.keyboardState`).
+   */
+  keyboardState() {
+    return this.seat?.keyboardState() ?? null;
+  }
+
+  /** Call `fn` when the locks, the group or the keymap change. */
+  watchKeyboardState(fn) {
+    const seat = this.seat;
+    if (!seat) return () => {};
+    seat.on('modifiers', fn);
+    seat.on('keymap', fn);
+    return () => {
+      seat.off('modifiers', fn);
+      seat.off('keymap', fn);
+    };
+  }
+
   async close() {
     for (const w of [...this.windows.values()]) w.destroy();
     this.windows.clear();

package/src/wayland/clipboard.js

@@ -67,17 +67,22 @@ class Selection {
     /** our own source while we own the selection */
     this.source = null;
     this.ownData = null;
-    this._pendingOffers = new Map(); // offer id -> types
+    this._pendingOffers = new Map(); // offer id -> { offer, types }
     /** `watch()` handlers, told when the selection changes hands */
     this.watchers = new Set();
 
     device.on('data_offer', (offer) => {
       const types = [];
-      this._pendingOffers.set(offer.id, types);
+      this._pendingOffers.set(offer.id, { offer, types });
       offer.on('offer', (mime) => types.push(mime));
     });
-    device.on('selection', (offer) => {
-      const id = offer?.id ?? offer;
+    // The offer arrives as an id: an `object` argument is a number off the
+    // wire, where `data_offer`'s `new_id` was a proxy. The proxy is what a
+    // read calls `receive` on, so it is found by the id — keeping the number
+    // made every read throw, and nothing another application copied could
+    // be pasted here.
+    device.on('selection', (offerArg) => {
+      const id = offerArg?.id ?? offerArg ?? 0;
       if (this.offer && this.offer.id !== id) {
         try {
           this.offer.$.destroy();
@@ -85,15 +90,17 @@ class Selection {
           /* gone */
         }
       }
-      if (!offer || offer === 0) {
+      const pending = id ? this._pendingOffers.get(id) : null;
+      this._pendingOffers.delete(id);
+      const offer = pending?.offer ?? (offerArg?.$ ? offerArg : null);
+      if (!offer) {
         this.offer = null;
         this.offerTypes = [];
         this._notify('closed');
         return;
       }
       this.offer = offer;
-      this.offerTypes = this._pendingOffers.get(id) ?? [];
-      this._pendingOffers.delete(id);
+      this.offerTypes = pending?.types ?? [];
       // an offer from our own source means we still own it; anyone else's
       // means we lost it
       if (this.source && !this._isOurs(offer)) this._dropSource();

package/src/wayland/connection.js

@@ -65,6 +65,9 @@ export const PROTOCOLS = [
   'cursor-shape-v1',
   'tablet-v2',
   'xdg-activation-v1',
+  // a handle another client can parent a dialog to — the portal's
+  // `parent_window` (src/portal.js, `portalParentFor`)
+  'xdg-foreign-unstable-v2',
   'xdg-decoration-unstable-v1',
   // the older KDE protocol that does the same job, for the compositors that
   // have only that one (ssd.js picks between them)

package/src/wayland/context2d.js

@@ -67,6 +67,8 @@ const MODE_RRECT = 3;
 const MODE_GRADIENT = 4;
 /** A texture read through a projection: `vParams` is (s/w, t/w, 1/w). */
 const MODE_PROJECTIVE = 5;
+/** A pattern: an image laid down from the fragment's device position. */
+const MODE_PATTERN = 6;
 
 /**
  * The stencil buffer, shared between two uses: bit 7 is the clip (set where
@@ -132,6 +134,12 @@ uniform highp vec2 uViewport;
 uniform int uGradKind;
 uniform vec4 uGradA;
 uniform vec4 uGradB;
+// a pattern: device position to its pixels (the inverse transform it is
+// filled under, a b c d and then e f), its size, and which axes repeat (1 x,
+// 2 y) and whether its rows run bottom up (4: a render target)
+uniform highp vec4 uPatInv;
+uniform highp vec4 uPatOff;
+uniform int uPatFlags;
 
 float sdRoundBox(vec2 p, vec2 b, float r) {
   vec2 q = abs(p) - b + r;
@@ -167,6 +175,28 @@ void main() {
     // Interpolated across the quad in the plane of the screen, s/w, t/w and
     // 1/w are each exact, and so is their quotient: a texture in perspective.
     gl_FragColor = vColor * sampleTex(vParams.xy / vParams.z);
+  } else if (uMode == 6) {
+    // A pattern, from the fragment's device position as a gradient is, so
+    // any shape can be filled with one: back through the transform it was
+    // filled under to its own pixels, wrapped along the axes it repeats on
+    // and clear off the ones it does not, and read at the centre of the
+    // texel it lands in, so a tile drawn at its own size lands pixel for
+    // pixel — a grid's dots do not smear across a seam.
+    highp vec2 p = vec2(gl_FragCoord.x, uViewport.y - gl_FragCoord.y);
+    highp vec2 q = vec2(uPatInv.x * p.x + uPatInv.z * p.y + uPatOff.x,
+                        uPatInv.y * p.x + uPatInv.w * p.y + uPatOff.y);
+    highp vec2 size = uPatOff.zw;
+    highp vec2 t = q / size;
+    float flags = float(uPatFlags);
+    if (mod(flags, 2.0) >= 1.0) t.x = fract(t.x);
+    if (mod(floor(flags / 2.0), 2.0) >= 1.0) t.y = fract(t.y);
+    if (t.x < 0.0 || t.x >= 1.0 || t.y < 0.0 || t.y >= 1.0) {
+      gl_FragColor = vec4(0.0);
+    } else {
+      t = (floor(t * size) + 0.5) / size;
+      if (flags >= 4.0) t.y = 1.0 - t.y;
+      gl_FragColor = vColor * sampleTex(t);
+    }
   } else {
     // Gradients are evaluated per fragment from its device position, so any
     // shape — a cover quad over a path included — can be filled with one.
@@ -415,6 +445,43 @@ export function parseFont(font) {
  */
 const fontIds = new WeakMap();
 let nextFontId = 1;
+const REPETITIONS = new Set(['repeat', 'repeat-x', 'repeat-y', 'no-repeat']);
+
+/**
+ * A pattern: an image or a surface, and the axes it repeats along. Its
+ * texture is looked up as it is filled rather than made here, so a surface
+ * drawn on again after the pattern was made fills with what it holds then,
+ * as a canvas pattern of a canvas does.
+ */
+class Pattern {
+  constructor(source, repetition) {
+    this.source = source;
+    this.repetition = repetition;
+    /** its own transform, under the one it is filled with (`setTransform`) */
+    this.m = null;
+  }
+
+  setTransform(m) {
+    this.m = m
+      ? [m.a ?? 1, m.b ?? 0, m.c ?? 0, m.d ?? 1, m.e ?? 0, m.f ?? 0]
+      : null;
+  }
+}
+
+function invert(m) {
+  const det = m[0] * m[3] - m[1] * m[2];
+  if (!det) return null;
+  const a = m[3] / det;
+  const b = -m[1] / det;
+  const c = -m[2] / det;
+  const d = m[0] / det;
+  return [a, b, c, d, -(a * m[4] + c * m[5]), -(b * m[4] + d * m[5])];
+}
+
+/** A paint that is not a colour: drawn from the fragment's position. */
+const isPaint = (style) =>
+  style instanceof Gradient || style instanceof Pattern;
+
 function fontKey(font) {
   let id = fontIds.get(font);
   if (!id) fontIds.set(font, (id = `f${nextFontId++}`));
@@ -571,6 +638,9 @@ export class WaylandContext2D {
       uGradKind: u('uGradKind'),
       uGradA: u('uGradA'),
       uGradB: u('uGradB'),
+      uPatInv: u('uPatInv'),
+      uPatOff: u('uPatOff'),
+      uPatFlags: u('uPatFlags'),
     };
     shared.buffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, shared.buffer);
@@ -847,9 +917,23 @@ export class WaylandContext2D {
     return new Gradient('radial', [x0, y0, r0, x1, y1, r1]);
   }
 
-  createPattern() {
-    // Patterns need a repeating texture mode; not yet.
-    return null;
+  /**
+   * A pattern of `image` — an ImageData, an ntk `Image`, a surface or a
+   * render target. Null for one with nothing in it, as canvas answers for an
+   * image it cannot use; `repetition` is canvas's, null and `''` meaning
+   * `'repeat'`, and anything else a `SyntaxError`.
+   */
+  createPattern(image, repetition) {
+    const rep =
+      repetition == null || repetition === '' ? 'repeat' : String(repetition);
+    if (!REPETITIONS.has(rep)) {
+      throw new SyntaxError(
+        `createPattern: ${JSON.stringify(rep)} is not a repetition — ` +
+          "expected 'repeat', 'repeat-x', 'repeat-y' or 'no-repeat'.",
+      );
+    }
+    if (!((image?.width | 0) > 0 && (image?.height | 0) > 0)) return null;
+    return new Pattern(image, rep);
   }
 
   // ---- paths ------------------------------------------------------------
@@ -1088,7 +1172,7 @@ export class WaylandContext2D {
 
   _rect(x, y, w, h, radius, style, strokeWidth) {
     if (!(w > 0 && h > 0)) return;
-    if (style instanceof Gradient) {
+    if (isPaint(style)) {
       if (radius <= 0 && strokeWidth === 0)
         return this._gradientQuad(x, y, w, h, style);
       // rounded/stroked gradient: stencil the shape, cover with the gradient
@@ -1226,8 +1310,40 @@ export class WaylandContext2D {
     }
   }
 
+  /** Bind a gradient or a pattern for the next quads; false where there is
+   *  nothing to draw with — a pattern of an image that has gone. */
+  _usePaint(paint) {
+    if (paint instanceof Pattern) return this._usePattern(paint);
+    this._useGradient(paint);
+    return true;
+  }
+
+  /** Bind a pattern's texture, and the way from a device pixel to one of
+   *  its own, as the current batch's uniforms. */
+  _usePattern(pat) {
+    const src = this._textureFor(pat.source);
+    if (!src) return false;
+    const inv = invert(pat.m ? mul(this._m, pat.m) : this._m);
+    if (!inv) return false;
+    const gl = this.gl;
+    this._flush();
+    this._mode = MODE_PATTERN;
+    this._texture = src.tex;
+    this._swizzle = src.swizzle;
+    const rep = pat.repetition;
+    const flags =
+      (rep === 'repeat' || rep === 'repeat-x' ? 1 : 0) +
+      (rep === 'repeat' || rep === 'repeat-y' ? 2 : 0) +
+      (src.flipY ? 4 : 0);
+    gl.useProgram(this._program);
+    gl.uniform4f(this._loc.uPatInv, inv[0], inv[1], inv[2], inv[3]);
+    gl.uniform4f(this._loc.uPatOff, inv[4], inv[5], src.w, src.h);
+    gl.uniform1i(this._loc.uPatFlags, flags);
+    return true;
+  }
+
   _gradientQuad(x, y, w, h, grad) {
-    this._useGradient(grad);
+    if (!this._usePaint(grad)) return;
     const m = this._m;
     const alpha = this.globalAlpha;
     this._quad(
@@ -1277,7 +1393,7 @@ export class WaylandContext2D {
     // only once the device has been claimed.
     this._claim();
     let color = null;
-    if (!(style instanceof Gradient)) {
+    if (!isPaint(style)) {
       color = this._color(style);
       if (color[3] === 0) return;
       if (this._fillCoverage(polys, rule, bounds, color)) return;
@@ -1297,15 +1413,18 @@ export class WaylandContext2D {
     const { x, y, w, h } = bounds;
     const saved = this._m;
     this._m = IDENTITY;
-    if (style instanceof Gradient) {
-      this._m = saved; // gradient endpoints are in user space
-      this._useGradient(style);
+    if (isPaint(style)) {
+      this._m = saved; // a gradient's endpoints, a pattern's origin: user space
+      const painted = this._usePaint(style);
       this._m = IDENTITY;
       const a = this.globalAlpha;
+      // a pattern with nothing to draw with still covers, clear, so the
+      // counts the winding pass left are zeroed as the cover always does
+      if (!painted) this._setMode(MODE_SOLID, null, SWIZZLE_RGBA);
       this._quad(
         [x, y, x + w, y, x + w, y + h, x, y + h],
         UV_UNIT,
-        [a, a, a, a],
+        painted ? [a, a, a, a] : CLEAR,
         ZERO4,
       );
     } else {

package/src/wayland/protocols/index.json

@@ -127,5 +127,11 @@
  "keyboard-shortcuts-inhibit-unstable-v1": [
   "zwp_keyboard_shortcuts_inhibit_manager_v1",
   "zwp_keyboard_shortcuts_inhibitor_v1"
+ ],
+ "xdg-foreign-unstable-v2": [
+  "zxdg_exporter_v2",
+  "zxdg_importer_v2",
+  "zxdg_exported_v2",
+  "zxdg_imported_v2"
  ]
 }

package/src/wayland/protocols/xdg-foreign-unstable-v2.json

@@ -0,0 +1 @@
+[{"name":"zxdg_exporter_v2","version":1,"requests":[{"name":"destroy","type":"destructor","args":[]},{"name":"export_toplevel","args":[{"name":"id","type":"new_id","interface":"zxdg_exported_v2"},{"name":"surface","type":"object","interface":"wl_surface"}]}],"events":[],"enums":{"error":{"entries":[{"name":"invalid_surface","value":0}]}}},{"name":"zxdg_importer_v2","version":1,"requests":[{"name":"destroy","type":"destructor","args":[]},{"name":"import_toplevel","args":[{"name":"id","type":"new_id","interface":"zxdg_imported_v2"},{"name":"handle","type":"string"}]}],"events":[],"enums":{}},{"name":"zxdg_exported_v2","version":1,"requests":[{"name":"destroy","type":"destructor","args":[]}],"events":[{"name":"handle","args":[{"name":"handle","type":"string"}]}],"enums":{}},{"name":"zxdg_imported_v2","version":1,"requests":[{"name":"destroy","type":"destructor","args":[]},{"name":"set_parent_of","args":[{"name":"surface","type":"object","interface":"wl_surface"}]}],"events":[{"name":"destroyed","args":[]}],"enums":{"error":{"entries":[{"name":"invalid_surface","value":0}]}}}]