@fusion.dev/helix-headless 0.211.1 → 0.212.0

package/dist/device-screen/root/device-screen-root.js

@@ -0,0 +1,869 @@
+import { __decorate } from "tslib";
+import { auditName, ChildrenController, customElement, drawIcon, FullscreenController, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixElement, hostAria, numberConverter, SPOKEN_RULE, stopPress, TOUCHES_RULE, ToolbarController, words, } from '@fusion.dev/helix-core';
+import { arrowClockwise, arrowCounterClockwise, camera, caretLeft, cornersOut, house, power, speakerHigh, speakerLow, square, } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { html } from 'lit/static-html.js';
+import '../../icon-button/index.js';
+import { gestureOf } from '../gesture.js';
+import { quarterTurns, turn, unturn, unturnDistance } from '../turn.js';
+const MARK_SHOWS = 700;
+const LINE = 16;
+const RESTING_CONTROLS = 'home screenshot';
+const leaves = (event) => event.key === 'Tab' && !event.ctrlKey && !event.metaKey && !event.altKey;
+const pastes = (event) => (event.ctrlKey || event.metaKey) &&
+    !event.altKey &&
+    (event.code === 'KeyV' || event.key.toLowerCase() === 'v');
+let HelixHeadlessDeviceScreen = class HelixHeadlessDeviceScreen extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.backLabel = 'Back';
+        this.controlsLabel = 'Device controls';
+        this.fallbackLabel = 'Device';
+        this.forwardShortcuts = false;
+        this.fullscreenLabel = 'Fill the screen';
+        this.homeLabel = 'Home';
+        this.keysHintLabel = 'Keys you press go to the device. Press Tab to leave the screen.';
+        this.label = '';
+        this.loading = false;
+        this.loadingLabel = 'Connecting to the device';
+        this.powerLabel = 'Power';
+        this.readonly = false;
+        this.recentsLabel = 'Recent apps';
+        this.roleLabel = 'screen';
+        this.rotateLeftLabel = 'Rotate left';
+        this.rotateRightLabel = 'Rotate right';
+        this.rotation = 0;
+        this.screenshotLabel = 'Take a screenshot';
+        this.showTouches = false;
+        this.volumeDownLabel = 'Volume down';
+        this.volumeUpLabel = 'Volume up';
+        this.filled = false;
+        this.intrinsic = undefined;
+        this.marks = [];
+        this.fingers = new Map();
+        this.crowd = 0;
+        this.held = new Map();
+        this.heldSince = 0;
+        this.nextMark = 0;
+        this.timers = new Set();
+        this.childWatch = new ChildrenController(this);
+        this.controlKeys = new ToolbarController(this, {
+            arrows: () => (this.column ? 'vertical' : 'horizontal'),
+            members: () => [...(this.partNamed('controls')?.children ?? [])],
+            own: true,
+            watch: () => this.renderRoot,
+        });
+        this.fullscreen = new FullscreenController(this, (full) => {
+            this.filled = full;
+        });
+        this.handleMeasure = () => {
+            this.measure();
+        };
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+        this.handlePointerDown = (event) => {
+            if (this.readonly || (event.pointerType !== 'touch' && event.button !== 0)) {
+                return;
+            }
+            const screen = this.screen;
+            const box = screen?.getBoundingClientRect();
+            const drawn = this.fractionAt(event, false, box);
+            if (!(drawn && screen && box)) {
+                return;
+            }
+            event.preventDefault();
+            screen.focus({ preventScroll: true });
+            try {
+                screen.setPointerCapture(event.pointerId);
+            }
+            catch {
+            }
+            const mirror = event.altKey && event.pointerType !== 'touch';
+            const at = unturn(drawn, this.turns);
+            const finger = {
+                at,
+                box,
+                from: at,
+                furthest: 0,
+                id: this.freeId(mirror),
+                landed: performance.now(),
+                mirror,
+                startX: event.clientX,
+                startY: event.clientY,
+            };
+            this.fingers.set(event.pointerId, finger);
+            this.crowd = Math.max(this.crowd, this.touches);
+            this.toggleState('touching', true);
+            this.sendTouch('down', finger);
+            this.holdMarks();
+        };
+        this.handlePointerMove = (event) => {
+            const finger = this.fingers.get(event.pointerId);
+            const drawn = finger ? this.fractionAt(event, true, finger.box) : undefined;
+            if (!(finger && drawn)) {
+                return;
+            }
+            finger.at = unturn(drawn, this.turns);
+            finger.furthest = Math.max(finger.furthest, Math.hypot(event.clientX - finger.startX, event.clientY - finger.startY));
+            this.sendTouch('move', finger);
+            this.holdMarks();
+        };
+        this.handlePointerUp = (event) => {
+            const finger = this.fingers.get(event.pointerId);
+            if (!finger) {
+                return;
+            }
+            const canceled = event.type === 'pointercancel';
+            const drawn = canceled ? undefined : this.fractionAt(event, true, finger.box);
+            if (drawn) {
+                finger.at = unturn(drawn, this.turns);
+            }
+            this.fingers.delete(event.pointerId);
+            this.sendTouch(canceled ? 'cancel' : 'up', finger);
+            if (this.fingers.size === 0) {
+                const alone = this.crowd === 1 && !canceled;
+                this.crowd = 0;
+                this.toggleState('touching', false);
+                if (alone) {
+                    this.sendGesture(finger);
+                }
+            }
+            this.holdMarks();
+        };
+        this.handleWheel = (event) => {
+            if (this.readonly || ((event.ctrlKey || event.metaKey) && !this.forwardShortcuts)) {
+                return;
+            }
+            const drawn = this.fractionAt(event, false);
+            const box = this.screen?.getBoundingClientRect();
+            if (!(drawn && box)) {
+                return;
+            }
+            event.preventDefault();
+            const across = event.deltaMode === 1 ? LINE : event.deltaMode === 2 ? box.width : 1;
+            const down = event.deltaMode === 1 ? LINE : event.deltaMode === 2 ? box.height : 1;
+            const turns = this.turns;
+            const at = unturn(drawn, turns);
+            const by = unturnDistance({ u: (event.deltaX * across) / box.width, v: (event.deltaY * down) / box.height }, turns);
+            const { height, width } = this.sizeFor();
+            this.dispatchEvent(new HelixDeviceScrollEvent({
+                deltaX: by.u * width,
+                deltaY: by.v * height,
+                height,
+                width,
+                x: at.u * width,
+                y: at.v * height,
+            }));
+        };
+        this.handleKeydown = (event) => {
+            if (this.readonly || event.isComposing || leaves(event) || pastes(event)) {
+                return;
+            }
+            const shortcut = (event.ctrlKey || event.metaKey || event.altKey) && !event.getModifierState?.('AltGraph');
+            if (shortcut && !this.forwardShortcuts) {
+                return;
+            }
+            this.held.set(event.code || event.key, event);
+            this.sendKey(event, 'down');
+        };
+        this.handleKeyup = (event) => {
+            const id = event.code || event.key;
+            if (!this.held.has(id)) {
+                return;
+            }
+            this.held.delete(id);
+            this.sendKey(event, 'up');
+        };
+        this.handleBlur = () => {
+            for (const [id, pressed] of this.held) {
+                this.held.delete(id);
+                this.dispatchEvent(new HelixDeviceKeyEvent({
+                    altKey: false,
+                    code: pressed.code,
+                    ctrlKey: false,
+                    key: pressed.key,
+                    metaKey: false,
+                    phase: 'up',
+                    repeat: false,
+                    shiftKey: false,
+                }));
+            }
+        };
+        this.handlePaste = (event) => {
+            const screen = this.screen;
+            const text = event.clipboardData?.getData('text/plain') ?? '';
+            if (this.readonly ||
+                text === '' ||
+                screen === null ||
+                this.renderRoot.activeElement !== screen) {
+                return;
+            }
+            event.preventDefault();
+            this.dispatchEvent(new HelixDeviceTextEvent({ text }));
+        };
+        this.handleHoldStart = () => {
+            this.heldSince = performance.now();
+        };
+    }
+    static { this.words = 'helix-device-screen'; }
+    static { this.markRules = [SPOKEN_RULE, TOUCHES_RULE]; }
+    get controlsRaised() {
+        return false;
+    }
+    get column() {
+        return this.controlsPlacement === 'start' || this.controlsPlacement === 'end';
+    }
+    get turns() {
+        return quarterTurns(this.rotation);
+    }
+    get size() {
+        const given = (value) => value !== undefined && Number.isFinite(value) && value > 0;
+        const { intrinsic, screenHeight: height, screenWidth: width } = this;
+        if (given(width) && given(height)) {
+            return { height, width };
+        }
+        if (!intrinsic) {
+            return undefined;
+        }
+        if (given(width)) {
+            return { height: (width * intrinsic.height) / intrinsic.width, width };
+        }
+        if (given(height)) {
+            return { height, width: (height * intrinsic.width) / intrinsic.height };
+        }
+        return intrinsic;
+    }
+    get stream() {
+        return this.knownChildren.find((child) => !child.hasAttribute('slot'));
+    }
+    get screen() {
+        return this.renderRoot?.querySelector?.('[part="screen"]') ?? null;
+    }
+    draws(name) {
+        return (this.controls ?? RESTING_CONTROLS).split(/\s+/).includes(name);
+    }
+    sizeOf(element) {
+        const read = element?.localName === 'video'
+            ? {
+                height: element.videoHeight,
+                width: element.videoWidth,
+            }
+            : element?.localName === 'img'
+                ? {
+                    height: element.naturalHeight,
+                    width: element.naturalWidth,
+                }
+                : element?.localName === 'canvas'
+                    ? {
+                        height: element.height,
+                        width: element.width,
+                    }
+                    : undefined;
+        return read && read.width > 0 && read.height > 0 ? read : undefined;
+    }
+    measure() {
+        const next = this.sizeOf(this.watched);
+        if (next?.width !== this.intrinsic?.width || next?.height !== this.intrinsic?.height) {
+            this.intrinsic = next;
+        }
+    }
+    unwatch() {
+        const element = this.watched;
+        element?.removeEventListener('loadedmetadata', this.handleMeasure);
+        element?.removeEventListener('resize', this.handleMeasure);
+        element?.removeEventListener('load', this.handleMeasure);
+        this.resized?.disconnect();
+        this.resized = undefined;
+        this.watched = undefined;
+    }
+    watch() {
+        const element = this.stream;
+        if (element === this.watched) {
+            return;
+        }
+        this.unwatch();
+        this.watched = element;
+        element?.addEventListener('loadedmetadata', this.handleMeasure);
+        element?.addEventListener('resize', this.handleMeasure);
+        element?.addEventListener('load', this.handleMeasure);
+        if (element && element.localName === 'canvas') {
+            this.resized = new MutationObserver(this.handleMeasure);
+            this.resized.observe(element, { attributeFilter: ['height', 'width'], attributes: true });
+        }
+    }
+    fractionAt(event, clamp, box = this.screen?.getBoundingClientRect()) {
+        if (!box || box.width === 0 || box.height === 0) {
+            return undefined;
+        }
+        const u = (event.clientX - box.left) / box.width;
+        const v = (event.clientY - box.top) / box.height;
+        if (clamp) {
+            return { u: Math.min(1, Math.max(0, u)), v: Math.min(1, Math.max(0, v)) };
+        }
+        if (u < 0 || u > 1 || v < 0 || v > 1) {
+            return undefined;
+        }
+        if (this.shape === 'circle' && (u - 0.5) ** 2 + (v - 0.5) ** 2 > 0.25) {
+            return undefined;
+        }
+        return { u, v };
+    }
+    sizeFor() {
+        const known = this.size;
+        if (known) {
+            return known;
+        }
+        const box = this.screen?.getBoundingClientRect();
+        const sideways = this.turns % 2 === 1;
+        const width = (sideways ? box?.height : box?.width) ?? 0;
+        const height = (sideways ? box?.width : box?.height) ?? 0;
+        const { screenHeight, screenWidth } = this;
+        if (screenWidth !== undefined && screenWidth > 0 && width > 0) {
+            return { height: (screenWidth * height) / width, width: screenWidth };
+        }
+        if (screenHeight !== undefined && screenHeight > 0 && height > 0) {
+            return { height: screenHeight, width: (screenHeight * width) / height };
+        }
+        return { height, width };
+    }
+    sendTouch(phase, finger) {
+        const { height, width } = this.sizeFor();
+        const send = (id, at) => {
+            this.dispatchEvent(new HelixDeviceTouchEvent({ height, id, phase, width, x: at.u * width, y: at.v * height }));
+        };
+        send(finger.id, finger.at);
+        if (finger.mirror) {
+            send(finger.id + 1, { u: 1 - finger.at.u, v: 1 - finger.at.v });
+        }
+    }
+    freeId(mirror) {
+        const taken = new Set();
+        for (const finger of this.fingers.values()) {
+            taken.add(finger.id);
+            if (finger.mirror) {
+                taken.add(finger.id + 1);
+            }
+        }
+        let id = 0;
+        while (taken.has(id) || (mirror && taken.has(id + 1))) {
+            id += 1;
+        }
+        return id;
+    }
+    get touches() {
+        let count = 0;
+        for (const finger of this.fingers.values()) {
+            count += finger.mirror ? 2 : 1;
+        }
+        return count;
+    }
+    holdMarks() {
+        if (!this.showTouches) {
+            if (this.marks.some((mark) => mark.held)) {
+                this.marks = this.marks.filter((mark) => !mark.held);
+            }
+            return;
+        }
+        const shown = this.marks.filter((mark) => !mark.held);
+        const held = [];
+        for (const [pointer, finger] of this.fingers) {
+            held.push({ at: turn(finger.at, this.turns), held: true, key: -1 - pointer * 2 });
+            if (finger.mirror) {
+                const opposite = { u: 1 - finger.at.u, v: 1 - finger.at.v };
+                held.push({ at: turn(opposite, this.turns), held: true, key: -2 - pointer * 2 });
+            }
+        }
+        this.marks = [...shown, ...held];
+    }
+    sendGesture(finger) {
+        const { height, width } = this.sizeFor();
+        const duration = Math.max(0, Math.round(performance.now() - finger.landed));
+        if (gestureOf(finger.furthest) === 'tap') {
+            this.dispatchEvent(new HelixDeviceTapEvent({
+                duration,
+                height,
+                width,
+                x: finger.from.u * width,
+                y: finger.from.v * height,
+            }));
+            return;
+        }
+        this.dispatchEvent(new HelixDeviceSwipeEvent({
+            duration,
+            fromX: finger.from.u * width,
+            fromY: finger.from.v * height,
+            height,
+            toX: finger.at.u * width,
+            toY: finger.at.v * height,
+            width,
+        }));
+    }
+    sendKey(event, phase) {
+        event.preventDefault();
+        this.dispatchEvent(new HelixDeviceKeyEvent({
+            altKey: event.altKey,
+            code: event.code,
+            ctrlKey: event.ctrlKey,
+            key: event.key,
+            metaKey: event.metaKey,
+            phase,
+            repeat: phase === 'down' && event.repeat,
+            shiftKey: event.shiftKey,
+        }));
+    }
+    pressed(button, event) {
+        const since = this.heldSince;
+        this.heldSince = 0;
+        const duration = event.detail === 0 || since === 0 ? 0 : Math.round(performance.now() - since);
+        this.press(button, duration);
+    }
+    press(button, duration = 0) {
+        this.dispatchEvent(new HelixDeviceButtonEvent({ button, duration: Math.max(0, duration) }));
+    }
+    screenshot() {
+        this.dispatchEvent(new HelixDeviceScreenshotEvent());
+    }
+    async capture(type = 'image/png', quality) {
+        const source = this.stream;
+        if (!(source instanceof HTMLVideoElement ||
+            source instanceof HTMLImageElement ||
+            source instanceof HTMLCanvasElement)) {
+            throw new Error(`<${this.localName}> has no stream to capture. Put a <video>, an <img>, or a <canvas> inside it.`);
+        }
+        const size = this.sizeOf(source);
+        if (!size) {
+            throw new Error(`<${this.localName}> has no frame to capture yet.`);
+        }
+        const turns = this.turns;
+        const canvas = document.createElement('canvas');
+        canvas.width = turns % 2 === 1 ? size.height : size.width;
+        canvas.height = turns % 2 === 1 ? size.width : size.height;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error(`<${this.localName}> could not draw its frame: the browser gave no 2D context.`);
+        }
+        context.translate(canvas.width / 2, canvas.height / 2);
+        context.rotate((turns * Math.PI) / 2);
+        context.drawImage(source, -size.width / 2, -size.height / 2, size.width, size.height);
+        return await new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                }
+                else {
+                    reject(new Error(`<${this.localName}> could not write its frame as ${type}.`));
+                }
+            }, type, quality);
+        });
+    }
+    showTap(x, y) {
+        const at = this.drawnAt(x, y);
+        if (at) {
+            this.addMark({ at, held: false, key: this.nextMark++ });
+        }
+    }
+    showSwipe(fromX, fromY, toX, toY, duration = 300) {
+        const at = this.drawnAt(fromX, fromY);
+        const to = this.drawnAt(toX, toY);
+        if (at && to) {
+            this.addMark({ at, duration: Math.max(0, duration), held: false, key: this.nextMark++, to });
+        }
+    }
+    drawnAt(x, y) {
+        const { height, width } = this.sizeFor();
+        if (!(width > 0 && height > 0 && Number.isFinite(x) && Number.isFinite(y))) {
+            return undefined;
+        }
+        return turn({ u: x / width, v: y / height }, this.turns);
+    }
+    addMark(mark) {
+        this.marks = [...this.marks, mark];
+        const timer = setTimeout(() => {
+            this.timers.delete(timer);
+            this.marks = this.marks.filter((one) => one.key !== mark.key);
+        }, (mark.duration ?? 0) + MARK_SHOWS);
+        this.timers.add(timer);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ownerDocument.addEventListener('paste', this.handlePaste, true);
+        if (this.hasUpdated) {
+            this.requestUpdate();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.ownerDocument.removeEventListener('paste', this.handlePaste, true);
+        this.unwatch();
+        for (const timer of this.timers) {
+            clearTimeout(timer);
+        }
+        this.timers.clear();
+        for (const finger of this.fingers.values()) {
+            this.sendTouch('cancel', finger);
+        }
+        this.fingers.clear();
+        this.crowd = 0;
+        this.toggleState('touching', false);
+        this.handleBlur();
+        this.marks = [];
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+        auditName(this, () => null, 'device-screen', () => this.label !== '');
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { label: this.label });
+        this.watch();
+        this.measure();
+        this.toggleState('empty', this.childrenKnown && this.stream === undefined);
+        this.toggleState('fullscreen', this.filled);
+        this.toggleState('loading', this.loading);
+        this.toggleState('readonly', this.readonly);
+        this.toggleState('sideways', this.turns % 2 === 1);
+        if (changed.has('showTouches')) {
+            this.holdMarks();
+        }
+    }
+    renderControls() {
+        const names = [
+            'back',
+            'home',
+            'recents',
+            'power',
+            'volume',
+            'rotate',
+            'screenshot',
+            'fullscreen',
+        ];
+        const own = this.knownChildren.some((child) => child.getAttribute('slot') === 'controls');
+        if (!(own || names.some((name) => this.draws(name)))) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        const off = this.readonly;
+        const raised = this.controlsRaised;
+        return html `<div
+      part="controls"
+      role="toolbar"
+      aria-label=${this.controlsLabel}
+      aria-orientation=${this.column ? 'vertical' : nothing}
+    >
+      ${this.draws('back')
+            ? html `<${button}
+              part="back"
+              exportparts="button: back-button, live: back-live, spinner: back-spinner, text: back-text"
+              ?disabled=${off}
+              label=${this.backLabel}
+              ?raised=${raised}
+              @click=${(event) => this.pressed('back', event)}
+              @helix-press=${stopPress}
+              @pointerdown=${this.handleHoldStart}
+            >
+              <slot name="back-icon">${drawIcon(caretLeft)}</slot>
+            </${button}>`
+            : nothing}
+      ${this.draws('home')
+            ? html `<${button}
+              part="home"
+              exportparts="button: home-button, live: home-live, spinner: home-spinner, text: home-text"
+              ?disabled=${off}
+              label=${this.homeLabel}
+              ?raised=${raised}
+              @click=${(event) => this.pressed('home', event)}
+              @helix-press=${stopPress}
+              @pointerdown=${this.handleHoldStart}
+            >
+              <slot name="home-icon">${drawIcon(house)}</slot>
+            </${button}>`
+            : nothing}
+      ${this.draws('recents')
+            ? html `<${button}
+              part="recents"
+              exportparts="button: recents-button, live: recents-live, spinner: recents-spinner, text: recents-text"
+              ?disabled=${off}
+              label=${this.recentsLabel}
+              ?raised=${raised}
+              @click=${(event) => this.pressed('recents', event)}
+              @helix-press=${stopPress}
+              @pointerdown=${this.handleHoldStart}
+            >
+              <slot name="recents-icon">${drawIcon(square)}</slot>
+            </${button}>`
+            : nothing}
+      ${this.draws('power')
+            ? html `<${button}
+              part="power"
+              exportparts="button: power-button, live: power-live, spinner: power-spinner, text: power-text"
+              ?disabled=${off}
+              label=${this.powerLabel}
+              ?raised=${raised}
+              @click=${(event) => this.pressed('power', event)}
+              @helix-press=${stopPress}
+              @pointerdown=${this.handleHoldStart}
+            >
+              <slot name="power-icon">${drawIcon(power)}</slot>
+            </${button}>`
+            : nothing}
+      ${this.draws('volume')
+            ? html `<${button}
+                part="volume-up"
+                exportparts="button: volume-up-button, live: volume-up-live, spinner: volume-up-spinner, text: volume-up-text"
+                ?disabled=${off}
+                label=${this.volumeUpLabel}
+                ?raised=${raised}
+                @click=${(event) => this.pressed('volume-up', event)}
+                @helix-press=${stopPress}
+                @pointerdown=${this.handleHoldStart}
+              >
+                <slot name="volume-up-icon">${drawIcon(speakerHigh)}</slot>
+              </${button}>
+              <${button}
+                part="volume-down"
+                exportparts="button: volume-down-button, live: volume-down-live, spinner: volume-down-spinner, text: volume-down-text"
+                ?disabled=${off}
+                label=${this.volumeDownLabel}
+                ?raised=${raised}
+                @click=${(event) => this.pressed('volume-down', event)}
+                @helix-press=${stopPress}
+                @pointerdown=${this.handleHoldStart}
+              >
+                <slot name="volume-down-icon">${drawIcon(speakerLow)}</slot>
+              </${button}>`
+            : nothing}
+      ${this.draws('rotate')
+            ? html `<${button}
+                part="rotate-left"
+                exportparts="button: rotate-left-button, live: rotate-left-live, spinner: rotate-left-spinner, text: rotate-left-text"
+                ?disabled=${off}
+                label=${this.rotateLeftLabel}
+                ?raised=${raised}
+                @click=${(event) => this.pressed('rotate-left', event)}
+                @helix-press=${stopPress}
+                @pointerdown=${this.handleHoldStart}
+              >
+                <slot name="rotate-left-icon">${drawIcon(arrowCounterClockwise)}</slot>
+              </${button}>
+              <${button}
+                part="rotate-right"
+                exportparts="button: rotate-right-button, live: rotate-right-live, spinner: rotate-right-spinner, text: rotate-right-text"
+                ?disabled=${off}
+                label=${this.rotateRightLabel}
+                ?raised=${raised}
+                @click=${(event) => this.pressed('rotate-right', event)}
+                @helix-press=${stopPress}
+                @pointerdown=${this.handleHoldStart}
+              >
+                <slot name="rotate-right-icon">${drawIcon(arrowClockwise)}</slot>
+              </${button}>`
+            : nothing}
+      ${this.draws('screenshot')
+            ? html `<${button}
+              part="screenshot"
+              exportparts="button: screenshot-button, live: screenshot-live, spinner: screenshot-spinner, text: screenshot-text"
+              label=${this.screenshotLabel}
+              ?raised=${raised}
+              @click=${() => this.screenshot()}
+              @helix-press=${stopPress}
+            >
+              <slot name="screenshot-icon">${drawIcon(camera)}</slot>
+            </${button}>`
+            : nothing}
+      <slot name="controls" @slotchange=${this.handleSlotChange}></slot>
+      ${this.draws('fullscreen')
+            ? html `<${button}
+              part="fullscreen"
+              exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
+              aria-pressed=${this.filled ? 'true' : 'false'}
+              label=${this.fullscreenLabel}
+              ?raised=${raised}
+              @click=${() => void this.fullscreen.toggle()}
+              @helix-press=${stopPress}
+            >
+              <slot name="fullscreen-icon">${drawIcon(cornersOut)}</slot>
+            </${button}>`
+            : nothing}
+    </div>`;
+    }
+    renderMarks() {
+        return html `${repeat(this.marks, (mark) => mark.key, (mark) => {
+            const place = `--device-screen-touch-x: ${(mark.at.u * 100).toFixed(2)}%; --device-screen-touch-y: ${(mark.at.v * 100).toFixed(2)}%`;
+            const travel = mark.to
+                ? `; --device-screen-touch-to-x: ${(mark.to.u * 100).toFixed(2)}%; --device-screen-touch-to-y: ${(mark.to.v * 100).toFixed(2)}%; --device-screen-touch-duration: ${mark.duration ?? 0}ms`
+                : '';
+            return html `<span part="touch${mark.held ? ' touch-held' : ''}" aria-hidden="true" style=${place + travel}></span>`;
+        })}`;
+    }
+    render() {
+        const size = this.size;
+        const turns = this.turns;
+        const ratio = size
+            ? turns % 2 === 1
+                ? size.height / size.width
+                : size.width / size.height
+            : undefined;
+        const facts = `${ratio === undefined ? '' : `--device-screen-ratio: ${Number(ratio.toFixed(5))}; `}--device-screen-rotation: ${turns * 90}deg`;
+        const name = this.label || this.getAttribute('aria-label') || this.fallbackLabel;
+        const interactive = !this.readonly;
+        const placement = this.controlsPlacement;
+        const controls = this.renderControls();
+        return html `<div part="region" style=${facts}>
+      <div part="header">
+        <slot name="header"></slot>
+      </div>
+      ${placement === undefined || placement === 'top' ? controls : nothing}
+      <div part="device">
+        ${placement === 'start' ? controls : nothing}
+        <div part="bezel">
+          <div
+            part="screen"
+            role=${interactive ? 'application' : 'img'}
+            aria-label=${name}
+            aria-roledescription=${this.roleLabel || nothing}
+            aria-describedby=${interactive ? 'keys-hint' : nothing}
+            tabindex=${interactive ? '0' : nothing}
+            ?data-touches=${interactive}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+            @keyup=${this.handleKeyup}
+            @pointercancel=${this.handlePointerUp}
+            @pointerdown=${this.handlePointerDown}
+            @pointermove=${this.handlePointerMove}
+            @pointerup=${this.handlePointerUp}
+            @wheel=${this.handleWheel}
+          >
+            <div part="picture">
+              <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+            ${this.renderMarks()}
+            <div part="loading" aria-hidden="true">
+              ${this.loading ? html `<slot name="loading">${this.loadingLabel}</slot>` : nothing}
+            </div>
+          </div>
+          ${this.childrenKnown && this.stream === undefined && !this.loading
+            ? html `<div part="empty"><slot name="empty"></slot></div>`
+            : nothing}
+          <slot name="bezel"></slot>
+        </div>
+        ${placement === 'end' ? controls : nothing}
+      </div>
+      ${placement === 'bottom' ? controls : nothing}
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+      <span part="keys-hint" id="keys-hint" aria-hidden="true" data-spoken>${interactive ? this.keysHintLabel : ''}</span>
+      <span part="live" role="status" data-spoken>${this.loading ? this.loadingLabel : ''}</span>
+    </div>`;
+    }
+};
+__decorate([
+    words,
+    property({ attribute: 'back-label' })
+], HelixHeadlessDeviceScreen.prototype, "backLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessDeviceScreen.prototype, "controls", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessDeviceScreen.prototype, "controlsLabel", void 0);
+__decorate([
+    property({ attribute: 'controls-placement', reflect: true })
+], HelixHeadlessDeviceScreen.prototype, "controlsPlacement", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessDeviceScreen.prototype, "fallbackLabel", void 0);
+__decorate([
+    property({ attribute: 'forward-shortcuts', type: Boolean })
+], HelixHeadlessDeviceScreen.prototype, "forwardShortcuts", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fullscreen-label' })
+], HelixHeadlessDeviceScreen.prototype, "fullscreenLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'home-label' })
+], HelixHeadlessDeviceScreen.prototype, "homeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'keys-hint-label' })
+], HelixHeadlessDeviceScreen.prototype, "keysHintLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessDeviceScreen.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDeviceScreen.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-label' })
+], HelixHeadlessDeviceScreen.prototype, "loadingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'power-label' })
+], HelixHeadlessDeviceScreen.prototype, "powerLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDeviceScreen.prototype, "readonly", void 0);
+__decorate([
+    words,
+    property({ attribute: 'recents-label' })
+], HelixHeadlessDeviceScreen.prototype, "recentsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessDeviceScreen.prototype, "roleLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'rotate-left-label' })
+], HelixHeadlessDeviceScreen.prototype, "rotateLeftLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'rotate-right-label' })
+], HelixHeadlessDeviceScreen.prototype, "rotateRightLabel", void 0);
+__decorate([
+    property({ converter: numberConverter('rotation', 0, 'degrees') })
+], HelixHeadlessDeviceScreen.prototype, "rotation", void 0);
+__decorate([
+    property({ attribute: 'screen-height', converter: numberConverter('screen-height', undefined) })
+], HelixHeadlessDeviceScreen.prototype, "screenHeight", void 0);
+__decorate([
+    words,
+    property({ attribute: 'screenshot-label' })
+], HelixHeadlessDeviceScreen.prototype, "screenshotLabel", void 0);
+__decorate([
+    property({ attribute: 'screen-width', converter: numberConverter('screen-width', undefined) })
+], HelixHeadlessDeviceScreen.prototype, "screenWidth", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessDeviceScreen.prototype, "shape", void 0);
+__decorate([
+    property({ attribute: 'show-touches', type: Boolean })
+], HelixHeadlessDeviceScreen.prototype, "showTouches", void 0);
+__decorate([
+    words,
+    property({ attribute: 'volume-down-label' })
+], HelixHeadlessDeviceScreen.prototype, "volumeDownLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'volume-up-label' })
+], HelixHeadlessDeviceScreen.prototype, "volumeUpLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessDeviceScreen.prototype, "filled", void 0);
+__decorate([
+    state()
+], HelixHeadlessDeviceScreen.prototype, "intrinsic", void 0);
+__decorate([
+    state()
+], HelixHeadlessDeviceScreen.prototype, "marks", void 0);
+HelixHeadlessDeviceScreen = __decorate([
+    customElement('helix-headless-device-screen')
+], HelixHeadlessDeviceScreen);
+export { HelixHeadlessDeviceScreen };