@fusion.dev/helix-headless 0.211.1 → 0.212.0

package/dist/code-block/root/code-block-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, inlineStep, requestChange, requestValue, stopPress, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -29,7 +29,6 @@ export const registerHighlighter = (highlighter, sheet) => {
         }
     }
 };
-const stopPress = (event) => event.stopPropagation();
 const isBlock = (element) => element?.localName.endsWith('code-block') === true;
 const blocksIn = (host) => [...host.children].filter((child) => child.slot === '' && isBlock(child));
 const nameOf = (block) => {

package/dist/device-screen/gesture.d.ts

@@ -0,0 +1,13 @@
+/**
+ * How far a touch may travel and still be a tap, in CSS pixels: the drift
+ * Speed Dial's long press allows a press that stays one press.
+ */
+export declare const TAP_SLOP = 10;
+/** What one finger did between landing and lifting. */
+export type Gesture = 'swipe' | 'tap';
+/**
+ * A tap where the finger never strayed further than `TAP_SLOP` from where it
+ * landed, and a swipe otherwise. The furthest it strayed, and not where it
+ * lifted: a finger that went out and came back moved something on the way.
+ */
+export declare const gestureOf: (furthest: number) => Gesture;

package/dist/device-screen/gesture.js

@@ -0,0 +1,3 @@
+import { LONG_PRESS_SLOP } from '../speed-dial/long-press.js';
+export const TAP_SLOP = LONG_PRESS_SLOP;
+export const gestureOf = (furthest) => (furthest > TAP_SLOP ? 'swipe' : 'tap');

package/dist/device-screen/index.d.ts

@@ -0,0 +1 @@
+export { HelixHeadlessDeviceScreen } from './root/device-screen-root.js';

package/dist/device-screen/index.js

@@ -0,0 +1 @@
+export { HelixHeadlessDeviceScreen } from './root/device-screen-root.js';

package/dist/device-screen/root/device-screen-root.d.ts

@@ -0,0 +1,531 @@
+import { ChildrenController, type DeviceButton, HelixElement, ToolbarController } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../../icon-button/index.js';
+/**
+ * @summary A device's screen, drawn from a stream you supply, that sends taps, swipes, keys, and button presses back to the device.
+ *
+ * @description
+ * Shows the screen of a phone, a tablet, or a watch, such as the iOS Simulator
+ * or the Android Emulator, and turns what you do on it into events. Helix does
+ * not connect to the device. Put the element that draws the stream inside: a
+ * `<video>` fed by WebRTC or Media Source, an `<img>` showing an MJPEG stream,
+ * or a `<canvas>` you draw decoded frames on. The frame gives the screen the
+ * device's shape and stretches the element to fill it.
+ *
+ * Set `screen-width` and `screen-height` to the screen's size in the units
+ * your device takes input in: points for the iOS Simulator, and pixels for an
+ * Android device. Every point an event carries is in those units, beside the
+ * `width` and `height` it is measured against. Without them, the frame reads
+ * the stream's own size in pixels.
+ *
+ * **Touches.** Listen in one of two ways, and not both, or the device moves
+ * twice:
+ * - `helix-device-touch` for each finger as it lands, moves, and lifts, for a
+ *   source that takes live touches. A drag and a pinch need it.
+ * - `helix-device-tap` and `helix-device-swipe` once the finger lifts, for a
+ *   source that takes whole gestures. A long press is a tap with a long
+ *   `duration`.
+ *
+ * Alt, or Option on a Mac, with a drag sends two touches mirrored about the
+ * middle of the screen, for a pinch or a turn, as the iOS Simulator does. A
+ * wheel or a trackpad over the screen sends `helix-device-scroll`.
+ *
+ * **Keyboard.** Press Tab to reach the screen, or press the screen. While it
+ * has focus:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Any key | Sends `helix-device-key` as it goes down, and again as it comes up. |
+ * | Tab, Shift with Tab | Moves focus on from the screen. Never sent. |
+ * | Control, Command, or Alt with a key | Left to the browser, unless `forward-shortcuts` is set. |
+ * | Command or Control with V | Sends the clipboard's text as `helix-device-text`. |
+ *
+ * A key still held when focus leaves is sent as released. The screen has the
+ * `application` role, so a screen reader passes every key to it, and its
+ * description says how to leave.
+ *
+ * **Buttons.** `controls` names the hardware buttons to draw: `back`, `home`,
+ * `recents`, `power`, `volume`, `rotate`, `screenshot`, and `fullscreen`,
+ * `home screenshot` by default. Each sends `helix-device-button` with how long
+ * it was held, and the screenshot button sends `helix-device-screenshot`.
+ * `press()` and `screenshot()` do the same from a script. Put buttons of your
+ * own in the `controls` slot, and they join the row. The row is one tab stop,
+ * and the arrow keys move along it, or Up and Down in a column.
+ *
+ * Set `rotation` where your source sends frames in the device's natural
+ * orientation while the device is turned: the frame turns the picture, and
+ * turns every point back. Set `readonly` to show the screen and send nothing,
+ * such as while an agent drives the device. The screen is then a picture, and
+ * `showTap()` and `showSwipe()` mark where the agent touched it.
+ *
+ * @since 0.211.0
+ * @status experimental
+ * @category media
+ * @aliases Simulator, Emulator, Device mirror, Remote screen
+ * @documentation https://fusion.dev/helix/components/device-screen
+ *
+ * @slot - The element that draws the stream: a `<video>`, an `<img>`, or a `<canvas>`.
+ * @slot back-icon - Replaces the glyph inside the Back button.
+ * @slot bezel - A picture of the device drawn over the screen, such as a photograph of a phone with a clear screen. It takes no touches.
+ * @slot controls - Buttons of your own, such as Shake or Record, in the row after the hardware buttons and before the fullscreen button.
+ * @slot empty - Content shown over the screen while no element that draws the stream is inside and `loading` is not set, such as "No simulator is running" and a button to start one.
+ * @slot footer - Content below the device.
+ * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
+ * @slot header - Content above the device, such as its name and state.
+ * @slot home-icon - Replaces the glyph inside the Home button.
+ * @slot loading - Content shown over the screen while `loading` is set, such as a spinner. `loading-label` by default, which screen readers hear either way.
+ * @slot power-icon - Replaces the glyph inside the Power button.
+ * @slot recents-icon - Replaces the glyph inside the Recent apps button.
+ * @slot rotate-left-icon - Replaces the glyph inside the Rotate left button.
+ * @slot rotate-right-icon - Replaces the glyph inside the Rotate right button.
+ * @slot screenshot-icon - Replaces the glyph inside the screenshot button.
+ * @slot volume-down-icon - Replaces the glyph inside the Volume down button.
+ * @slot volume-up-icon - Replaces the glyph inside the Volume up button.
+ *
+ * @event {HelixDeviceButtonEvent} helix-device-button - A hardware button was pressed, with how long it was held. Press it on the device in response.
+ * @event {HelixDeviceKeyEvent} helix-device-key - A key went down or came up while the screen had focus. Press or release it on the device in response.
+ * @event {HelixDeviceScreenshotEvent} helix-device-screenshot - A screenshot was asked for. Take one in response.
+ * @event {HelixDeviceScrollEvent} helix-device-scroll - A wheel or a trackpad scrolled over the screen. Scroll the device in response.
+ * @event {HelixDeviceSwipeEvent} helix-device-swipe - One finger moved across the screen and lifted. Swipe the device in response.
+ * @event {HelixDeviceTapEvent} helix-device-tap - One finger touched the screen and lifted near where it landed. Tap the device in response.
+ * @event {HelixDeviceTextEvent} helix-device-text - Text was pasted into the screen. Type it on the device in response.
+ * @event {HelixDeviceTouchEvent} helix-device-touch - A finger landed, moved, lifted, or was taken away. Touch the device in response.
+ *
+ * @csspart back - The Back button.
+ * @csspart back-button - The Back button's inner button.
+ * @csspart back-live - The Back button's live region, which speaks while the button is pending.
+ * @csspart back-spinner - The ring the Back button turns while it is pending.
+ * @csspart back-text - The box the Back button's icon sits in.
+ * @csspart bezel - The body of the device around the screen.
+ * @csspart controls - The row of buttons: the hardware buttons and any of yours in the `controls` slot.
+ * @csspart device - The box the device is fitted into, which keeps its shape inside it.
+ * @csspart empty - The box over the screen that holds the `empty` slot while no stream is inside and `loading` is not set. It stands beside the screen, so what you put in it takes presses and keys of its own, and a read-only screen does not hide it from screen readers.
+ * @csspart footer - The strip below the device.
+ * @csspart fullscreen - The button that makes the device fill the screen.
+ * @csspart fullscreen-button - The fullscreen button's inner button.
+ * @csspart fullscreen-live - The fullscreen button's live region, which speaks while the button is pending.
+ * @csspart fullscreen-spinner - The ring the fullscreen button turns while it is pending.
+ * @csspart fullscreen-text - The box the fullscreen button's icon sits in.
+ * @csspart header - The strip above the device.
+ * @csspart home - The Home button.
+ * @csspart home-button - The Home button's inner button.
+ * @csspart home-live - The Home button's live region, which speaks while the button is pending.
+ * @csspart home-spinner - The ring the Home button turns while it is pending.
+ * @csspart home-text - The box the Home button's icon sits in.
+ * @csspart keys-hint - What a screen reader says about the keys when it reaches the screen, as its description. Read by screen readers only.
+ * @csspart live - What screen readers hear while `loading` is set: `loading-label`. Read by screen readers only.
+ * @csspart loading - The box over the screen that holds the `loading` slot while `loading` is set. Screen readers hear `live` in its place.
+ * @csspart picture - The box the stream is drawn in, turned by `rotation`.
+ * @csspart power - The Power button.
+ * @csspart power-button - The Power button's inner button.
+ * @csspart power-live - The Power button's live region, which speaks while the button is pending.
+ * @csspart power-spinner - The ring the Power button turns while it is pending.
+ * @csspart power-text - The box the Power button's icon sits in.
+ * @csspart recents - The Recent apps button.
+ * @csspart recents-button - The Recent apps button's inner button.
+ * @csspart recents-live - The Recent apps button's live region, which speaks while the button is pending.
+ * @csspart recents-spinner - The ring the Recent apps button turns while it is pending.
+ * @csspart recents-text - The box the Recent apps button's icon sits in.
+ * @csspart region - The box that holds the device, its buttons, the header, and the footer.
+ * @csspart rotate-left - The Rotate left button.
+ * @csspart rotate-left-button - The Rotate left button's inner button.
+ * @csspart rotate-left-live - The Rotate left button's live region, which speaks while the button is pending.
+ * @csspart rotate-left-spinner - The ring the Rotate left button turns while it is pending.
+ * @csspart rotate-left-text - The box the Rotate left button's icon sits in.
+ * @csspart rotate-right - The Rotate right button.
+ * @csspart rotate-right-button - The Rotate right button's inner button.
+ * @csspart rotate-right-live - The Rotate right button's live region, which speaks while the button is pending.
+ * @csspart rotate-right-spinner - The ring the Rotate right button turns while it is pending.
+ * @csspart rotate-right-text - The box the Rotate right button's icon sits in.
+ * @csspart screen - The device's screen, which takes the touches and the keys.
+ * @csspart screenshot - The button that asks for a screenshot.
+ * @csspart screenshot-button - The screenshot button's inner button.
+ * @csspart screenshot-live - The screenshot button's live region, which speaks while the button is pending.
+ * @csspart screenshot-spinner - The ring the screenshot button turns while it is pending.
+ * @csspart screenshot-text - The box the screenshot button's icon sits in.
+ * @csspart touch - A ring where a touch is or was.
+ * @csspart touch-held - A ring under a finger that is down, beside `touch`, with `show-touches`.
+ * @csspart volume-down - The Volume down button.
+ * @csspart volume-down-button - The Volume down button's inner button.
+ * @csspart volume-down-live - The Volume down button's live region, which speaks while the button is pending.
+ * @csspart volume-down-spinner - The ring the Volume down button turns while it is pending.
+ * @csspart volume-down-text - The box the Volume down button's icon sits in.
+ * @csspart volume-up - The Volume up button.
+ * @csspart volume-up-button - The Volume up button's inner button.
+ * @csspart volume-up-live - The Volume up button's live region, which speaks while the button is pending.
+ * @csspart volume-up-spinner - The ring the Volume up button turns while it is pending.
+ * @csspart volume-up-text - The box the Volume up button's icon sits in.
+ *
+ * @cssproperty --device-screen-ratio - The drawn screen's width divided by its height, turned by `rotation`, as a number. Written by the frame once the screen's size is known.
+ * @cssproperty --device-screen-rotation - How far the picture is turned, as an angle. The frame writes it from `rotation`.
+ * @cssproperty --device-screen-touch-duration - How long a swipe's ring takes to travel, as a time. Written on each ring from `showSwipe()`.
+ * @cssproperty --device-screen-touch-to-x - Where a swipe's ring travels to, across the screen, as a percentage. Written on each ring from `showSwipe()`.
+ * @cssproperty --device-screen-touch-to-y - Where a swipe's ring travels to, down the screen, as a percentage. Written on each ring from `showSwipe()`.
+ * @cssproperty --device-screen-touch-x - Where a ring is, across the screen, as a percentage. Written on each ring.
+ * @cssproperty --device-screen-touch-y - Where a ring is, down the screen, as a percentage. Written on each ring.
+ *
+ * @cssstate empty - No element that draws the stream is inside, which the frame knows once it runs in the browser.
+ * @cssstate fullscreen - The device fills the screen.
+ * @cssstate loading - `loading` is set.
+ * @cssstate readonly - `readonly` is set, and the screen sends nothing.
+ * @cssstate sideways - `rotation` turns the picture a quarter, so the drawn screen is the device's height wide.
+ * @cssstate touching - A finger is on the screen.
+ */
+export declare class HelixHeadlessDeviceScreen extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-device-screen': { homeLabel: 'Home' } })`.
+     */
+    static words: string;
+    protected static markRules: string[];
+    /** The Back button's label. */
+    backLabel: string;
+    /**
+     * Which hardware buttons to draw, as a list: `back`, `home`, `recents`,
+     * `power`, `volume`, `rotate`, `screenshot`, and `fullscreen`, or `none`.
+     * They are drawn in that order whatever order the list is in. Absent is
+     * `home screenshot`. `volume` draws Volume up and Volume down, and `rotate`
+     * draws Rotate left and Rotate right.
+     */
+    controls?: string;
+    /** The name of the toolbar of hardware buttons, read by screen readers. */
+    controlsLabel: string;
+    /**
+     * Which side of the device the hardware buttons sit on. Absent and `top`
+     * are a row above it, `bottom` is a row below it, and `start` and `end` are
+     * a column beside it, as the Android Emulator draws its toolbar. The words
+     * are sides, as Carousel's are, and not the corners a map's controls take.
+     */
+    controlsPlacement?: 'bottom' | 'end' | 'start' | 'top';
+    /** The screen's name where `label` is empty and the host has no `aria-label`. */
+    fallbackLabel: string;
+    /**
+     * Also sends key presses with Control, Command, or Alt held, which are left
+     * to the browser otherwise. For an app that owns its window. Command or
+     * Control with V pastes either way.
+     */
+    forwardShortcuts: boolean;
+    /** The fullscreen button's label. */
+    fullscreenLabel: string;
+    /** The Home button's label. */
+    homeLabel: string;
+    /**
+     * What a screen reader says about the keys when it reaches the screen,
+     * after its name.
+     */
+    keysHintLabel: string;
+    /**
+     * The device's name, read by screen readers as the screen's name, such as
+     * "iPhone 17 Pro". Name each device on a page with several. Required.
+     */
+    label: string;
+    /**
+     * Shows the `loading` slot over the screen, for a stream that is starting
+     * or has stopped. Screen readers hear `loading-label`.
+     */
+    loading: boolean;
+    /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+    loadingLabel: string;
+    /** The Power button's label. */
+    powerLabel: string;
+    /**
+     * Shows the screen and sends nothing: no touches, scrolls, keys, or button
+     * presses. The screen is then a picture, out of the tab order, and the
+     * hardware buttons are off but for screenshot and fullscreen. Buttons of
+     * your own in the `controls` slot are yours to turn off.
+     */
+    readonly: boolean;
+    /** The Recent apps button's label. */
+    recentsLabel: string;
+    /**
+     * What a screen reader calls the screen in place of its role, after its
+     * name: "iPhone 17 Pro, screen". Empty leaves the role.
+     */
+    roleLabel: string;
+    /** The Rotate left button's label. */
+    rotateLeftLabel: string;
+    /** The Rotate right button's label. */
+    rotateRightLabel: string;
+    /**
+     * How far to turn the picture clockwise, in degrees: `90`, `180`, or `270`.
+     * For a source that sends frames in the device's natural orientation while
+     * the device is turned. Every point is turned back, so events stay in the
+     * device's own orientation. A source whose frames turn with the device
+     * needs none.
+     */
+    rotation: number;
+    /**
+     * The screen's height in the units your device takes input in: points for
+     * the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+     * Set alone, the width follows the stream's shape, and with neither, both
+     * are the stream's own size in pixels.
+     */
+    screenHeight?: number | undefined;
+    /** The screenshot button's label. */
+    screenshotLabel: string;
+    /**
+     * The screen's width in the units your device takes input in, as
+     * `screen-height` is. Set alone, the height follows the stream's shape.
+     */
+    screenWidth?: number | undefined;
+    /**
+     * The screen's outline. Absent is a rectangle with rounded corners;
+     * `square` has square corners, as on a phone with a Home button or a
+     * television, and `circle` is round, as on a round watch, and takes
+     * touches inside the circle only.
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Draws a ring under each finger on the screen, as the iOS Simulator's
+     * Show single touches does. Rings from `showTap()` and `showSwipe()` are
+     * drawn either way.
+     */
+    showTouches: boolean;
+    /** The Volume down button's label. */
+    volumeDownLabel: string;
+    /** The Volume up button's label. */
+    volumeUpLabel: string;
+    /** Whether the device fills the screen. */
+    private filled;
+    /** The stream's own size in pixels, once the element drawing it says. */
+    private intrinsic;
+    /** The rings on the screen now. */
+    private marks;
+    /** The fingers on the screen now, by the pointer each one is. */
+    private readonly fingers;
+    /** The most fingers that were down at once since the screen was last bare. */
+    private crowd;
+    /**
+     * The keys sent down and not yet up, by their `code`, or by their `key`
+     * where a soft keyboard or an input method reports no code.
+     */
+    private readonly held;
+    /** When a hardware button was pressed, so its release can say how long it was held. */
+    private heldSince;
+    /** The next ring's key. */
+    private nextMark;
+    /** The waits that take rings away. */
+    private readonly timers;
+    /** The element drawing the stream, while one is listened to. */
+    private watched;
+    /** A canvas's own size, which changes with no event. */
+    private resized;
+    /**
+     * Draws again as children arrive or leave. A button of the page's for the
+     * `controls` slot can arrive while no row is drawn, and then no slot exists
+     * to report it.
+     */
+    protected readonly childWatch: ChildrenController;
+    /**
+     * The buttons as one tab stop, the arrow keys moving along the row, or up
+     * and down a column beside the device. The page's own buttons in the
+     * `controls` slot are among them.
+     */
+    protected readonly controlKeys: ToolbarController;
+    private readonly fullscreen;
+    /**
+     * Whether the buttons are drawn raised, which the styled tier says and the
+     * headless tier leaves unset, having nothing to paint.
+     */
+    protected get controlsRaised(): boolean;
+    /** Whether the buttons are a column beside the device rather than a row. */
+    private get column();
+    /** How many quarter turns `rotation` is. */
+    private get turns();
+    /**
+     * The screen's size in the device's own way up, where the page or the stream
+     * has said it.
+     *
+     * **One side from the page is never mixed with the other from the stream**,
+     * which counts in pixels where the page may count in points: the missing
+     * side is the given one turned by the stream's shape.
+     */
+    private get size();
+    /**
+     * The element drawing the stream: the first child in no named slot, which is
+     * what the default slot holds. Read off the children, so it is known before
+     * the render, and none on a server.
+     */
+    private get stream();
+    /** The screen, where it has been drawn. */
+    private get screen();
+    /** Whether `controls`, or the resting controls, names a button. */
+    private draws;
+    /**
+     * An element's own size in pixels, read by its tag: a server has no
+     * `HTMLVideoElement` to compare with.
+     */
+    private sizeOf;
+    /** Reads the stream's own size off the element drawing it. */
+    private measure;
+    private readonly handleMeasure;
+    /** Stops listening to the element that drew the stream. */
+    private unwatch;
+    /**
+     * Listens to the element drawing the stream for its size: a video says it
+     * on `loadedmetadata` and `resize`, an image on `load`, and a canvas changes
+     * its `width` and `height` with no event at all.
+     */
+    private watch;
+    /** A stream put in or taken out, which is read again on the next render. */
+    private readonly handleSlotChange;
+    /**
+     * Where a pointer is on the drawn screen, as a fraction of it, or nothing
+     * where it is off the screen's shape. `clamp` holds a finger that has left
+     * the screen at its edge, as a finger on glass stops at the glass.
+     */
+    private fractionAt;
+    /**
+     * The screen's size for an event: the one the page or the stream gave, or
+     * the drawn screen's own in CSS pixels where neither has, so the points an
+     * event carries agree with the size beside them.
+     */
+    private sizeFor;
+    /** Sends a touch for a finger, and for its mirror where it has one. */
+    private sendTouch;
+    /** The lowest number free for a finger, with the one after it free too for a mirror. */
+    private freeId;
+    /** How many touches are down, a mirror counting as one of its own. */
+    private get touches();
+    /** The rings under the fingers, with `show-touches`, kept beside the rings that were shown. */
+    private holdMarks;
+    /**
+     * A finger landing on the screen. The screen takes focus, so keys follow,
+     * and keeps the pointer, so a finger that slides off the screen still lifts
+     * on it.
+     *
+     * **The primary button only.** A right click or a middle click is the
+     * page's, for a menu or a new tab, and a device has no second finger
+     * button to send it to.
+     */
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    /**
+     * A finger lifting, or the browser taking it away. Once the screen is bare,
+     * one finger that lifted is a tap or a swipe; a touch that had more fingers
+     * on it, or that the browser took away, is neither.
+     */
+    private readonly handlePointerUp;
+    /** Sends what one finger did, as a tap or a swipe. */
+    private sendGesture;
+    /**
+     * A wheel or a trackpad over the screen, which scrolls the device and not
+     * the page. Control or Command with the wheel is the page's zoom, and a
+     * trackpad's pinch arrives as it, so it stays the page's unless
+     * `forward-shortcuts` is set.
+     */
+    private readonly handleWheel;
+    /** Sends a key, and keeps the page from acting on it. */
+    private sendKey;
+    /**
+     * A key going down on the screen.
+     *
+     * **Tab is never sent**, so focus can always leave: a screen that kept
+     * every key would hold a keyboard reader inside it. **A shortcut is the
+     * browser's** unless `forward-shortcuts` is set, so page zoom, find, and
+     * the window's own keys keep working. AltGr types a character, and is not
+     * a shortcut, although it reports Control and Alt on Windows. The paste
+     * shortcut always reaches the browser, which pastes into the screen.
+     */
+    private readonly handleKeydown;
+    /** A key coming up, sent only where its press was: a Tab into the screen lifts on it. */
+    private readonly handleKeyup;
+    /**
+     * Focus leaving with keys still down, which would otherwise stay down on
+     * the device: each is sent as released.
+     */
+    private readonly handleBlur;
+    /**
+     * Text pasted while the screen has focus, sent as text.
+     *
+     * **Heard on the document, wherever the paste lands.** A browser sends a
+     * paste to the text selected on the page where there is any, and WebKit
+     * sends one with nothing selected to the host. A press on the screen keeps
+     * the selection it found, so copying from another pane, pressing the screen,
+     * and pasting would otherwise send the device nothing.
+     */
+    private readonly handlePaste;
+    /** A hardware button going down, so its release can say how long it was held. */
+    private readonly handleHoldStart;
+    /**
+     * A hardware button pressed, with how long a pointer held it. A press from
+     * a key has no length, and says `0`.
+     */
+    private pressed;
+    /**
+     * Presses a hardware button, as its control does: sends
+     * `helix-device-button`. `duration` is how long it is held, in
+     * milliseconds.
+     */
+    press(button: DeviceButton, duration?: number): void;
+    /** Asks for a screenshot, as the screenshot button does: sends `helix-device-screenshot`. */
+    screenshot(): void;
+    /**
+     * The picture on the screen now, as an image, at the stream's own size and
+     * turned by `rotation`. For a page with no sharper screenshot from its
+     * source.
+     *
+     * Fails where there is no stream, where it has not drawn a frame, and where
+     * the browser will not let a page read it, such as an image from another
+     * origin served without CORS.
+     */
+    capture(type?: string, quality?: number): Promise<Blob>;
+    /**
+     * Draws a ring at a point on the screen for a moment, in the device's
+     * units, for a touch made elsewhere, such as by an agent. Drawn whether or
+     * not `show-touches` is set, and nothing is sent.
+     */
+    showTap(x: number, y: number): void;
+    /**
+     * Draws a ring that travels from one point to another over `duration`
+     * milliseconds, in the device's units, for a swipe made elsewhere, as
+     * `showTap()` does for a tap.
+     */
+    showSwipe(fromX: number, fromY: number, toX: number, toY: number, duration?: number): void;
+    /**
+     * Where a point in the device's units is drawn, as a fraction of the drawn
+     * screen, measured against the size the events carry, so a point an event
+     * sent is drawn where it came from.
+     */
+    private drawnAt;
+    /** Adds a ring, and takes it away once it has been seen. */
+    private addMark;
+    /** A screen put back on the page listens to its stream and for pastes again. */
+    connectedCallback(): void;
+    /**
+     * Taken off the page mid-touch or with a key down, as a pane closing is:
+     * each finger is sent as canceled and each key as released, or the device
+     * would hold them down.
+     */
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The hardware buttons `controls` names, in one fixed order, and the page's
+     * own in the `controls` slot before the fullscreen button. Each is an Icon
+     * Button written out, because a part name behind an interpolation is a part
+     * the manifest cannot see.
+     *
+     * **Drawn while there is a button to hold**, a hardware one or one of the
+     * page's, which the frame knows only once its children are known: a server
+     * draws the hardware buttons alone.
+     */
+    protected renderControls(): TemplateResult | typeof nothing;
+    /** The rings on the screen, each placed by the custom properties it carries. */
+    private renderMarks;
+    /**
+     * The device, its buttons, and the strips around it.
+     *
+     * **The buttons come before the device in the markup where they are drawn
+     * before it**, above it or at its start, and after it otherwise, so the
+     * order Tab takes is the order the eye takes. A column at a side is drawn
+     * inside the device's box, so it stands beside the device however wide the
+     * box is.
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-device-screen': HelixHeadlessDeviceScreen;
+    }
+}