@driftengine/native-host 4.0.0

package/dist/mediaQueries.js

@@ -0,0 +1,152 @@
+/**
+ * `matchMedia`, answered from what this host knows: a desktop window's pointer, its size and
+ * shape, its pixel ratio, and whether it is fullscreen.
+ *
+ * **The engine asks `(pointer: coarse)`** to choose touch controls and to ask for fullscreen on a
+ * first gesture, and a window with no `matchMedia` at all read as a desktop only because the engine
+ * guards the call. A consumer may ask anything, so the common features are answered:
+ * - `pointer` and `hover` as a desktop's mouse, `fine` and `hover`. `any-pointer` adds `coarse`
+ *   once a finger has landed, because SDL cannot say whether a touch screen exists — on the machine
+ *   this was written on it listed X11's master pointer, "Virtual core pointer", as one.
+ * - `width`, `height` and `orientation` from the window, in either spelling of a range;
+ *   `resolution` from its pixel ratio.
+ * - `display-mode` as `fullscreen` or `standalone`, the display mode of an app's own window.
+ * - Preferences as a person who set none: `prefers-reduced-motion: no-preference`,
+ *   `prefers-color-scheme: light`, `prefers-contrast: no-preference`, `forced-colors: none`.
+ *
+ * A list is live, as a browser's is, and is sent `change` when its answer flips. **A feature this
+ * does not know answers false and is named once on the console**, rather than a guess at what a
+ * browser would have said.
+ *
+ * What it gives up: a desktop's colour scheme is not read, so a dark desktop still answers
+ * `light`; and a machine with only a touch screen answers as one with a mouse until told
+ * otherwise.
+ */
+import { HostNode } from './domTree.js';
+const is = (answer) => (value) => value === null || value === answer;
+const px = (value) => Number.parseFloat(value);
+const dppx = (value) => value.endsWith('dpi') ? Number.parseFloat(value) / 96 : Number.parseFloat(value);
+const FEATURES = {
+    pointer: is('fine'),
+    'any-pointer': (v, f) => v === null || v === 'fine' || (v === 'coarse' && f.touched),
+    hover: is('hover'),
+    'any-hover': is('hover'),
+    orientation: (v, f) => v === (f.height >= f.width ? 'portrait' : 'landscape'),
+    width: (v, f) => v === null || f.width === px(v),
+    'min-width': (v, f) => v !== null && f.width >= px(v),
+    'max-width': (v, f) => v !== null && f.width <= px(v),
+    height: (v, f) => v === null || f.height === px(v),
+    'min-height': (v, f) => v !== null && f.height >= px(v),
+    'max-height': (v, f) => v !== null && f.height <= px(v),
+    'min-resolution': (v, f) => v !== null && f.pixelRatio >= dppx(v),
+    'max-resolution': (v, f) => v !== null && f.pixelRatio <= dppx(v),
+    'display-mode': (v, f) => v === (f.fullscreen ? 'fullscreen' : 'standalone'),
+    'prefers-reduced-motion': (v) => v === 'no-preference',
+    'prefers-color-scheme': (v) => v === 'light',
+    'prefers-contrast': (v) => v === 'no-preference',
+    'forced-colors': (v) => v === 'none',
+    color: () => true,
+};
+/** `(width >= 600px)` and its kin, the range spelling, as the equivalent `min-` or `max-`. */
+function range(condition) {
+    const match = /^(width|height)\s*(>=|<=|>|<)\s*(\S+)$/.exec(condition);
+    if (match === null)
+        return null;
+    const [, name, op, value] = match;
+    const nudge = op === '>' ? 0.001 : op === '<' ? -0.001 : 0;
+    const bound = `${px(value) + nudge}px`;
+    return [op.startsWith('>') ? `min-${name}` : `max-${name}`, bound];
+}
+/** `pointer: coarse` as its name and value; a bare `color` has no value. */
+function nameAndValue(condition) {
+    const colon = condition.indexOf(':');
+    if (colon < 0)
+        return [condition, null];
+    return [condition.slice(0, colon).trim(), condition.slice(colon + 1).trim()];
+}
+export class MediaQueryList extends HostNode {
+    media;
+    answer;
+    last;
+    constructor(media, answer) {
+        super();
+        this.media = media;
+        this.answer = answer;
+        this.last = answer();
+    }
+    get matches() {
+        return this.answer();
+    }
+    /** The legacy pair, still read. */
+    addListener(listener) {
+        this.addEventListener('change', listener);
+    }
+    removeListener(listener) {
+        this.removeEventListener('change', listener);
+    }
+    /** Tell the list's listeners if its answer has flipped since they were last told. */
+    recheck() {
+        const now = this.answer();
+        if (now === this.last)
+            return;
+        this.last = now;
+        this.dispatchEvent(Object.assign(new Event('change'), { media: this.media, matches: now }));
+    }
+    static {
+        HostNode.handles(MediaQueryList.prototype, ['change']);
+    }
+}
+export class MediaQueries {
+    facts;
+    lists = [];
+    unknown = new Set();
+    constructor(facts) {
+        this.facts = facts;
+    }
+    match(query) {
+        const list = new MediaQueryList(query.trim(), () => this.evaluate(query));
+        this.lists.push(list);
+        return list;
+    }
+    /** Something a query can read has changed: each list whose answer flipped is told. */
+    changed() {
+        for (const list of this.lists)
+            list.recheck();
+    }
+    evaluate(query) {
+        const facts = this.facts();
+        return query.split(',').some((one) => this.single(one.trim().toLowerCase(), facts));
+    }
+    /** One query of a list: `not` or `only`, a media type, and conditions joined by `and`. */
+    single(query, facts) {
+        let rest = query;
+        const negated = rest.startsWith('not ');
+        if (negated || rest.startsWith('only '))
+            rest = rest.slice(rest.indexOf(' ') + 1).trim();
+        const parts = rest.split(/\s+and\s+/);
+        let result = true;
+        for (const part of parts) {
+            if (part === 'all' || part === 'screen')
+                continue;
+            if (!part.startsWith('(') || !part.endsWith(')')) {
+                result = false;
+                continue;
+            }
+            if (!this.condition(part.slice(1, -1).trim(), facts))
+                result = false;
+        }
+        return negated ? !result : result;
+    }
+    condition(condition, facts) {
+        const [name, value] = range(condition) ?? nameAndValue(condition);
+        const feature = FEATURES[name];
+        if (feature === undefined) {
+            if (!this.unknown.has(name)) {
+                this.unknown.add(name);
+                console.warn(`[driftengine] the native host does not answer the media feature \`${name}\`; it reads as false`);
+            }
+            return false;
+        }
+        return feature(value, facts);
+    }
+}

package/dist/mouseEvents.d.ts

@@ -0,0 +1,96 @@
+/**
+ * The mouse, as a page hears it from Chrome: pointer 1, and every event a browser builds around it.
+ *
+ * **What Chrome sends, measured 2026-09-19 in Chrome 151 over the DevTools protocol**, on a page
+ * whose canvas filled it, is what this sends:
+ * - Coming in is `pointerover`, `pointerenter` at the document and then the canvas, the same three as
+ *   mouse events, and then the move. Going out is the reverse, the canvas before the document.
+ * - A press is `pointerdown` then `mousedown`, whose `detail` counts the clicks, and a release is
+ *   `pointerup`, `mouseup` and a `click`. The click is a `PointerEvent`, as are `contextmenu` and
+ *   `auxclick`, and a second click in time and place is followed by `dblclick`.
+ * - The right button opens its context menu on the press, as on Linux.
+ * - A second button pressed while one is held is a `pointermove` rather than a `pointerdown`. The
+ *   first button's release after that clicks nothing, with a `detail` of 0.
+ *
+ * **Pointer lock is the cursor hidden and put back in the middle of the window after every move**,
+ * the delta being how far it got. `@kmamal/sdl` 0.11 offers no relative mouse mode and reports only
+ * where the pointer is, so this is the one way to it; it carries the desktop's acceleration, which a
+ * browser's lock without `unadjustedMovement` does too.
+ *
+ * What it gives up: clicks count by Chromium's own figures, 500 ms between presses and 2 px either
+ * way of the first, where Chrome on a desktop that sets its own uses that; a wheel notch is 100
+ * pixels, a browser's figure varying by platform; and a drag out of the window stays over the canvas
+ * until its release, which is SDL's capture of a held button.
+ */
+import type { NativeCanvas } from './canvas.ts';
+import type { HostPage } from './page.ts';
+import { type ModifierInit } from './uiEvents.ts';
+export interface SdlPointer {
+    readonly x: number;
+    readonly y: number;
+    readonly button?: number;
+    readonly dx?: number;
+    readonly dy?: number;
+    readonly flipped?: boolean;
+    /** SDL's mouse made from a finger, which the touch events already said. */
+    readonly touch?: boolean;
+}
+/** Where the window is on the screen and how large, and SDL's mouse, which the lock warps. */
+export interface MouseWindow {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface EventMouse {
+    setPosition(x: number, y: number): void;
+    showCursor(show?: boolean): void;
+    capture(): void;
+    uncapture(): void;
+    /** One of SDL's system cursors, by name. */
+    setCursor?(cursor: string): void;
+}
+export declare class MouseModel {
+    private readonly window;
+    private readonly mouse;
+    private readonly page;
+    private readonly canvas;
+    private readonly modifiers;
+    private readonly now;
+    private buttons;
+    /** The button whose press a release would complete as a click, or −1. */
+    private pressed;
+    private count;
+    private lastPress;
+    private x;
+    private y;
+    private inside;
+    /** The pointer left while a button held it here, so it leaves once the last one is let go. */
+    private away;
+    private locked;
+    /** Whether the page hid the cursor, `cursor: none`, which a lock let go does not undo. */
+    private cursorHidden;
+    constructor(window: MouseWindow, mouse: EventMouse, page: HostPage, canvas: NativeCanvas, modifiers: () => ModifierInit, now: () => number);
+    /** The cursor a page wrote to the canvas's style. */
+    cursor(css: string): void;
+    get isLocked(): boolean;
+    move(event: SdlPointer): void;
+    down(event: SdlPointer): void;
+    up(event: SdlPointer): void;
+    wheel(event: SdlPointer): void;
+    /** SDL's word that the pointer is over the window again, which cancels a leave still waiting. */
+    hover(): void;
+    /** SDL's word that the pointer left the window: out and leave, once no button holds it here. */
+    leave(): void;
+    /** A press or the wheel where no move came first: the pointer is here, so it came in. */
+    private settle;
+    private enter;
+    /** An enter or a leave, which does not bubble: sent to each node it crosses, in turn. */
+    private boundary;
+    private both;
+    private pointer;
+    private mouseEvent;
+    private init;
+    private middle;
+    private lock;
+}

package/dist/mouseEvents.js

@@ -0,0 +1,287 @@
+/**
+ * The mouse, as a page hears it from Chrome: pointer 1, and every event a browser builds around it.
+ *
+ * **What Chrome sends, measured 2026-09-19 in Chrome 151 over the DevTools protocol**, on a page
+ * whose canvas filled it, is what this sends:
+ * - Coming in is `pointerover`, `pointerenter` at the document and then the canvas, the same three as
+ *   mouse events, and then the move. Going out is the reverse, the canvas before the document.
+ * - A press is `pointerdown` then `mousedown`, whose `detail` counts the clicks, and a release is
+ *   `pointerup`, `mouseup` and a `click`. The click is a `PointerEvent`, as are `contextmenu` and
+ *   `auxclick`, and a second click in time and place is followed by `dblclick`.
+ * - The right button opens its context menu on the press, as on Linux.
+ * - A second button pressed while one is held is a `pointermove` rather than a `pointerdown`. The
+ *   first button's release after that clicks nothing, with a `detail` of 0.
+ *
+ * **Pointer lock is the cursor hidden and put back in the middle of the window after every move**,
+ * the delta being how far it got. `@kmamal/sdl` 0.11 offers no relative mouse mode and reports only
+ * where the pointer is, so this is the one way to it; it carries the desktop's acceleration, which a
+ * browser's lock without `unadjustedMovement` does too.
+ *
+ * What it gives up: clicks count by Chromium's own figures, 500 ms between presses and 2 px either
+ * way of the first, where Chrome on a desktop that sets its own uses that; a wheel notch is 100
+ * pixels, a browser's figure varying by platform; and a drag out of the window stays over the canvas
+ * until its release, which is SDL's capture of a held button.
+ */
+import { sdlCursor } from './canvasStyle.js';
+import { MouseEvent, PointerEvent, WheelEvent, } from './uiEvents.js';
+/** SDL counts buttons from 1: left, middle, right, back, forward. A browser counts from 0. */
+const BUTTON = [-1, 0, 1, 2, 3, 4];
+/** And `buttons` is a mask in which the right button comes before the middle. */
+const BUTTON_BIT = [0, 1, 4, 2, 8, 16];
+/** One notch of the wheel, in the pixels `deltaMode` 0 counts in. */
+const NOTCH_PX = 100;
+const CLICK_MS = 500;
+const CLICK_PX = 2;
+export class MouseModel {
+    window;
+    mouse;
+    page;
+    canvas;
+    modifiers;
+    now;
+    buttons = 0;
+    /** The button whose press a release would complete as a click, or −1. */
+    pressed = -1;
+    count = 0;
+    lastPress = { at: Number.NEGATIVE_INFINITY, x: 0, y: 0, button: -1 };
+    x = 0;
+    y = 0;
+    inside = false;
+    /** The pointer left while a button held it here, so it leaves once the last one is let go. */
+    away = false;
+    locked = false;
+    /** Whether the page hid the cursor, `cursor: none`, which a lock let go does not undo. */
+    cursorHidden = false;
+    constructor(window, mouse, page, canvas, modifiers, now) {
+        this.window = window;
+        this.mouse = mouse;
+        this.page = page;
+        this.canvas = canvas;
+        this.modifiers = modifiers;
+        this.now = now;
+        page.setPointerLocker((lock) => this.lock(lock));
+        page.capture.add(1, () => this.buttons !== 0);
+    }
+    /** The cursor a page wrote to the canvas's style. */
+    cursor(css) {
+        const cursor = sdlCursor(css);
+        const hidden = cursor === null;
+        if (hidden !== this.cursorHidden) {
+            this.cursorHidden = hidden;
+            if (!this.locked)
+                this.mouse.showCursor(!hidden);
+        }
+        if (cursor !== null)
+            this.mouse.setCursor?.(cursor);
+    }
+    get isLocked() {
+        return this.locked;
+    }
+    move(event) {
+        let dx = event.x - this.x;
+        let dy = event.y - this.y;
+        if (this.locked) {
+            /* The warp back lands as a move to where the pointer already is: nothing moved. */
+            if (dx === 0 && dy === 0)
+                return;
+            const centre = this.middle();
+            this.mouse.setPosition(centre.x, centre.y);
+        }
+        else {
+            this.x = event.x;
+            this.y = event.y;
+            if (!this.inside) {
+                this.enter();
+                dx = 0;
+                dy = 0;
+            }
+        }
+        this.both('move', this.init(dx, dy, -1, 0));
+    }
+    down(event) {
+        this.settle(event);
+        const button = BUTTON[event.button ?? 0] ?? -1;
+        const chord = this.buttons !== 0;
+        this.buttons |= BUTTON_BIT[event.button ?? 0] ?? 0;
+        const at = this.now();
+        const last = this.lastPress;
+        const again = button === last.button &&
+            at - last.at <= CLICK_MS &&
+            Math.abs(this.x - last.x) <= CLICK_PX &&
+            Math.abs(this.y - last.y) <= CLICK_PX;
+        this.count = again ? this.count + 1 : 1;
+        this.lastPress = { at, x: this.x, y: this.y, button };
+        this.pressed = button;
+        /* A press is a person's gesture, noted before its events so their listeners may use it. */
+        this.page.userActivation.notify();
+        const init = this.init(0, 0, button, this.count);
+        this.pointer(chord ? 'pointermove' : 'pointerdown', init);
+        const mousedown = this.mouseEvent('mousedown', init);
+        if (!mousedown.defaultPrevented)
+            this.canvas.focus();
+        /* On the press, where Chrome on Linux sends it. */
+        if (button === 2)
+            this.pointer('contextmenu', { ...init, detail: 0 }, false);
+    }
+    up(event) {
+        this.settle(event);
+        const button = BUTTON[event.button ?? 0] ?? -1;
+        this.buttons &= ~(BUTTON_BIT[event.button ?? 0] ?? 0);
+        const clicked = this.pressed === button;
+        const init = this.init(0, 0, button, clicked ? this.count : 0);
+        this.pointer(this.buttons !== 0 ? 'pointermove' : 'pointerup', init);
+        this.mouseEvent('mouseup', init);
+        if (this.buttons === 0)
+            this.page.capture.releaseImplicitly(1, { ...init, ...POINTER(0) });
+        if (clicked) {
+            this.pointer(button === 0 ? 'click' : 'auxclick', init, false);
+            if (button === 0 && this.count === 2)
+                this.mouseEvent('dblclick', init);
+        }
+        this.pressed = -1;
+        const { width, height } = this.window;
+        const outside = this.x < 0 || this.y < 0 || this.x >= width || this.y >= height;
+        if (this.buttons === 0 && (this.away || outside))
+            this.leave();
+    }
+    wheel(event) {
+        this.settle(event);
+        const direction = event.flipped === true ? -1 : 1;
+        this.canvas.dispatchEvent(new WheelEvent('wheel', {
+            ...this.init(0, 0, -1, 0),
+            bubbles: true,
+            cancelable: true,
+            deltaX: (event.dx ?? 0) * direction * NOTCH_PX,
+            deltaY: -(event.dy ?? 0) * direction * NOTCH_PX,
+            deltaMode: 0,
+        }));
+    }
+    /** SDL's word that the pointer is over the window again, which cancels a leave still waiting. */
+    hover() {
+        this.away = false;
+    }
+    /** SDL's word that the pointer left the window: out and leave, once no button holds it here. */
+    leave() {
+        if (!this.inside || this.locked)
+            return;
+        if (this.buttons !== 0) {
+            this.away = true;
+            return;
+        }
+        this.away = false;
+        this.inside = false;
+        const init = this.init(0, 0, -1, 0);
+        this.pointer('pointerout', init);
+        this.boundary('pointerleave', init, [this.canvas, this.page.document]);
+        this.mouseEvent('mouseout', init);
+        this.boundary('mouseleave', init, [this.canvas, this.page.document]);
+    }
+    /** A press or the wheel where no move came first: the pointer is here, so it came in. */
+    settle(event) {
+        if (this.locked)
+            return;
+        this.x = event.x;
+        this.y = event.y;
+        if (!this.inside)
+            this.enter();
+    }
+    enter() {
+        this.inside = true;
+        const init = this.init(0, 0, -1, 0);
+        this.pointer('pointerover', init);
+        this.boundary('pointerenter', init, [this.page.document, this.canvas]);
+        this.mouseEvent('mouseover', init);
+        this.boundary('mouseenter', init, [this.page.document, this.canvas]);
+    }
+    /** An enter or a leave, which does not bubble: sent to each node it crosses, in turn. */
+    boundary(type, init, nodes) {
+        const Kind = type.startsWith('pointer') ? PointerEvent : MouseEvent;
+        const extra = type.startsWith('pointer') ? POINTER(init.buttons ?? 0) : {};
+        for (const node of nodes) {
+            node.dispatchEvent(new Kind(type, { ...init, ...extra, bubbles: false, cancelable: false }));
+        }
+    }
+    both(type, init) {
+        this.pointer(`pointer${type}`, init);
+        this.mouseEvent(`mouse${type}`, init);
+    }
+    pointer(type, init, primary = true) {
+        /* A change of capture is told just before the pointer's next pointer event. */
+        if (type.startsWith('pointer')) {
+            this.page.capture.process(1, { ...init, ...POINTER(init.buttons ?? 0), isPrimary: true });
+        }
+        const event = new PointerEvent(type, {
+            ...init,
+            ...POINTER(init.buttons ?? 0),
+            isPrimary: primary,
+            detail: type === 'click' || type === 'auxclick' ? (init.detail ?? 0) : 0,
+            bubbles: true,
+            cancelable: true,
+        });
+        this.canvas.dispatchEvent(event);
+        return event;
+    }
+    mouseEvent(type, init) {
+        const event = new MouseEvent(type, { ...init, bubbles: true, cancelable: true });
+        this.canvas.dispatchEvent(event);
+        return event;
+    }
+    init(movementX, movementY, button, detail) {
+        return {
+            clientX: this.x,
+            clientY: this.y,
+            screenX: this.window.x + this.x,
+            screenY: this.window.y + this.y,
+            movementX,
+            movementY,
+            button,
+            buttons: this.buttons,
+            detail,
+            ...this.modifiers(),
+        };
+    }
+    middle() {
+        return {
+            x: Math.round(this.window.x + this.window.width / 2),
+            y: Math.round(this.window.y + this.window.height / 2),
+        };
+    }
+    /*
+     * Hide the cursor and hold it, or let it go. SDL refuses to capture the mouse for a window without
+     * focus, and says so by throwing; that is a refused lock, with the cursor left as it was, and not
+     * an error to take the process down from inside a click.
+     */
+    lock(lock) {
+        const { mouse } = this;
+        if (!lock) {
+            this.locked = false;
+            /* A release always succeeds from the page's side, whatever SDL says about it. */
+            try {
+                mouse.showCursor(!this.cursorHidden);
+                mouse.uncapture();
+            }
+            catch {
+                /* Nothing held to let go of. */
+            }
+            return true;
+        }
+        try {
+            mouse.showCursor(false);
+            mouse.capture();
+            const centre = this.middle();
+            mouse.setPosition(centre.x, centre.y);
+            this.x = centre.x - this.window.x;
+            this.y = centre.y - this.window.y;
+            this.locked = true;
+            return true;
+        }
+        catch {
+            mouse.showCursor(true);
+            return false;
+        }
+    }
+}
+/** The mouse is pointer 1, always primary, one pixel across, and pressing at half pressure. */
+function POINTER(buttons) {
+    return { pointerId: 1, pointerType: 'mouse', pressure: buttons !== 0 ? 0.5 : 0 };
+}

package/dist/page.d.ts

@@ -0,0 +1,118 @@
+/**
+ * The page a scene expects around its canvas, for a host that has none: `window`, `document`, and
+ * the animation frames a browser schedules.
+ *
+ * **What is here is what gets read**, listed from every listener and property the engine's packages
+ * and the published scenes reach: keys, pointers, the mouse, the wheel, focus, resizing and
+ * unloading on `window`; visibility, focus and pointer lock on `document`; `requestAnimationFrame`,
+ * which the engine's input polls from. The three are a tree (`domTree.ts`), so an event is
+ * captured and bubbles as it does in a browser, and each answers the `on…` attributes. Anything
+ * else a scene reaches for is a gap named when it is met — `createElement` refuses by name —
+ * rather than a DOM this pretends to be.
+ *
+ * **Focus is a browser's.** The window has it or not, as SDL says; within it the canvas is focused
+ * only once it is focusable, which a canvas is when it is given a `tabIndex`, and keys go to what
+ * is focused, or to the document when nothing is.
+ *
+ * **A `document` is what the engine's splash looks for**, and it mounts one unless the scene says
+ * `splash: false` or the page carries a shell's bridge (`__driftHost`). The published scenes all
+ * say so; a packaged game is given the bridge.
+ */
+import { UserActivation } from './activation.ts';
+import type { NativeCanvas } from './canvas.ts';
+import { type Handlers, HostNode } from './domTree.ts';
+import { PageFullscreen } from './fullscreen.ts';
+import { MediaQueries, type MediaQueryList } from './mediaQueries.ts';
+import { PointerCapture } from './pointerCapture.ts';
+/** Every input event a page can be told of, which each of the three nodes answers `on…` for. */
+export declare const INPUT_TYPES: readonly ["keydown", "keypress", "keyup", "focus", "blur", "wheel", "contextmenu", "click", "dblclick", "auxclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave", "pointerdown", "pointerup", "pointermove", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointercancel", "gotpointercapture", "lostpointercapture", "touchstart", "touchmove", "touchend", "touchcancel", "fullscreenchange", "fullscreenerror"];
+type InputType = (typeof INPUT_TYPES)[number];
+declare const WINDOW_TYPES: readonly ['resize', 'beforeunload', 'gamepadconnected', 'gamepaddisconnected'];
+declare const DOCUMENT_TYPES: readonly ['visibilitychange', 'pointerlockchange', 'pointerlockerror', 'fullscreenchange', 'fullscreenerror'];
+export interface PageWindow extends Handlers<InputType | (typeof WINDOW_TYPES)[number]> {
+}
+export interface PageDocument extends Handlers<InputType | (typeof DOCUMENT_TYPES)[number]> {
+}
+export declare class PageWindow extends HostNode {
+    canvas: NativeCanvas | null;
+    /** Answered by the page, which knows what a query asks about (`mediaQueries.ts`). */
+    matchMedia: (query: string) => MediaQueryList;
+    get innerWidth(): number;
+    get innerHeight(): number;
+    get devicePixelRatio(): number;
+}
+export declare class PageDocument extends HostNode {
+    visibilityState: DocumentVisibilityState;
+    pointerLockElement: Element | null;
+    /** What is focused: the canvas, once it is focusable and asked, or nothing. */
+    activeElement: NativeCanvas | null;
+    /** Set by the page that owns this document, which is what holds the lock and the focus. */
+    release: (() => void) | null;
+    focused: boolean;
+    /** The page's fullscreen, which this document reports. */
+    fullscreenControl: PageFullscreen | null;
+    readonly fullscreenEnabled = true;
+    get fullscreenElement(): NativeCanvas | null;
+    /** The legacy flag, still read. */
+    get fullscreen(): boolean;
+    exitFullscreen(): Promise<void>;
+    get hidden(): boolean;
+    hasFocus(): boolean;
+    exitPointerLock(): void;
+    createElement(tag: string): never;
+}
+export interface HostPageOptions {
+    /** The clock a gesture's five seconds are measured on, in milliseconds. */
+    readonly now?: () => number;
+}
+export declare class HostPage {
+    readonly window: PageWindow;
+    readonly document: PageDocument;
+    /** Whether a person has just done something (`activation.ts`), as `navigator.userActivation`. */
+    readonly userActivation: UserActivation;
+    readonly fullscreen: PageFullscreen;
+    /** Which pointers the page holds (`pointerCapture.ts`). */
+    readonly capture: PointerCapture;
+    readonly media: MediaQueries;
+    /** Whether a finger has landed: the one proof of a touch screen SDL gives. */
+    private touched;
+    private asked;
+    private due;
+    private nextId;
+    private readonly lockListeners;
+    private locker;
+    constructor(options?: HostPageOptions);
+    /** A finger landed, so this is a touch screen, whatever SDL listed. */
+    noteTouch(): void;
+    readonly requestAnimationFrame: (callback: FrameRequestCallback) => number;
+    readonly cancelAnimationFrame: (id: number) => void;
+    /** One frame: the callbacks asked for before it began, in the order they were asked. */
+    runFrame(now: number): void;
+    /** Whether the window can be seen, as `document.visibilityState` reports it. */
+    setVisible(visible: boolean): void;
+    /**
+     * The window gaining or losing the focus: the focused canvas is told first, as the element a
+     * browser blurs, and then the window.
+     */
+    setFocused(focused: boolean): void;
+    /** Where a key goes: the focused element, or the document when nothing is focused. */
+    keyTarget(): HostNode;
+    /** Hold `canvas` in this page: its parent, its pointer lock and its focus are the page's. */
+    attach(canvas: NativeCanvas): void;
+    /**
+     * The platform's half of the lock: hide the cursor and hold it, or let it go. Answers false when it
+     * cannot — a window without focus, as a hidden one is — and the lock is then refused, the way a
+     * browser refuses one: the promise rejects and `pointerlockerror` fires, and nothing is locked.
+     */
+    setPointerLocker(locker: (lock: boolean) => boolean): void;
+    /** The platform's half of fullscreen: put the window in it or take it out, false when it cannot. */
+    setFullscreener(setter: (on: boolean) => boolean): void;
+    /** Told when the lock is taken or released. */
+    onPointerLock(listener: (locked: boolean) => void): void;
+    unlock(): void;
+    /** Put the globals a page has on `scope`, and hand back what takes them off again. */
+    install(scope?: Record<string, unknown>): () => void;
+    private lock;
+    private changedLock;
+}
+export {};