@fusion.dev/helix-core 0.211.0 → 0.212.0

package/dist/controllers/virtualize-controller/heights.d.ts

@@ -68,6 +68,15 @@ export declare class Heights {
      * one of them back at the estimate at the moment the reader is looking at them.
      */
     shift(by: number): void;
+    /**
+     * Adds `by` to every height that has been seen, for a gap that changed.
+     *
+     * Each item counts the gap after it as part of its own height, so a gap that
+     * grows by twelve pixels grows every measured item by twelve, the ones no
+     * longer drawn included. The unmeasured ones follow the estimate, which
+     * carries the gap already.
+     */
+    pad(by: number): void;
     /**
      * Drops everything, for a set that is no longer the same set.
      *

package/dist/controllers/virtualize-controller/heights.js

@@ -70,6 +70,16 @@ export class Heights {
         this.dirty = 0;
         this.changes += 1;
     }
+    pad(by) {
+        if (by === 0 || this.seen.size === 0) {
+            return;
+        }
+        for (const [index, size] of this.seen) {
+            this.seen.set(index, Math.max(1, Math.round((size + by) * 64) / 64));
+        }
+        this.dirty = 0;
+        this.changes += 1;
+    }
     forget() {
         this.seen.clear();
         this.dirty = 0;

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -172,12 +172,18 @@ export declare class VirtualizeController implements ReactiveController {
     /** Room `shift` added above the window, owed to the scroll offset once drawn. */
     private owed;
     /**
-     * The drawn rows' height on the straight line, read once per estimate.
+     * The drawn rows' own height on the straight line, read once per estimate,
+     * and without the gap, which `line` adds as it is now.
      *
      * Undefined until a host that offers `rows` has drawn some on the uniform
      * path, and again after `forget`.
      */
     private sample;
+    /**
+     * The gap the heights and the line were last squared with, which `line`
+     * reads, so the gap the host has now is taken up in `respace` alone.
+     */
+    private spaced;
     /** The length of the set when `endInSight` last answered true. */
     private askedAt;
     /**
@@ -317,6 +323,24 @@ export declare class VirtualizeController implements ReactiveController {
      * Reading the drawn rows once corrects the slope, and it is still a line.
      */
     private line;
+    /** How tall one item's own row is on the straight line, without the gap. */
+    private row;
+    /**
+     * Moves everything to a gap that changed, and keeps the reader on the item
+     * they were on.
+     *
+     * **Each item counts the gap after it as part of its own height**, so a gap
+     * that changes changes every item. The straight line reads the gap as it is
+     * now, and every height measured with the old one moves by the difference,
+     * drawn or not. Left alone, both kept the old gap while the rows drawn
+     * between the spacers took the new one, so the set grew or shrank as the
+     * window did: in WebKit, End on 1,000 rows whose gap went from 0 to 12 left
+     * the last row 72 pixels below the box once the window lost six rows.
+     *
+     * The reader's place is owed to the scroll offset and written after the
+     * render, as `shift` does, because a gap that grows has no room for it yet.
+     */
+    private respace;
     /** The space the host draws between two items, which each item counts. */
     private gap;
     /**

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -154,6 +154,7 @@ export class VirtualizeController {
         this.watch();
         const box = this.options.container();
         const total = Math.max(0, this.options.count());
+        this.respace(box, total);
         const size = this.line();
         if (!box) {
             return;
@@ -196,8 +197,35 @@ export class VirtualizeController {
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
     }
     line() {
+        return this.row() + (this.spaced ?? this.gap());
+    }
+    row() {
         const estimate = Math.max(1, this.options.estimate());
-        return this.sample?.estimate === estimate ? this.sample.size : estimate + this.gap();
+        return this.sample?.estimate === estimate ? this.sample.size : estimate;
+    }
+    respace(box, total) {
+        const gap = this.gap();
+        const was = this.spaced;
+        if (was === undefined) {
+            this.spaced = gap;
+            return;
+        }
+        if (was === gap) {
+            return;
+        }
+        const top = box ? this.offset(box) : 0;
+        const anchor = this.measuring() ? (this.target ?? this.indexAt(top, total)) : 0;
+        const from = this.measuring() ? this.startOf(anchor, total) : this.line();
+        this.heights.pad(gap - was);
+        this.spaced = gap;
+        const moved = this.measuring()
+            ? this.startOf(anchor, total) - from
+            : (top / from) * this.line() - top;
+        this.settling = 0;
+        if (box && top > 0 && moved !== 0 && (this.options.anchor?.() ?? true)) {
+            this.owed += moved;
+            this.host.requestUpdate();
+        }
     }
     gap() {
         return Math.max(0, this.options.gap?.() ?? 0);
@@ -215,8 +243,11 @@ export class VirtualizeController {
         const uneven = Math.max(...seen) - Math.min(...seen) > 1;
         if (this.sample?.estimate !== estimate) {
             const was = this.line();
-            const size = Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length) + this.gap();
-            this.sample = { estimate, size };
+            this.sample = {
+                estimate,
+                size: Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length),
+            };
+            const size = this.line();
             if (Math.abs(size - was) >= 0.5) {
                 const box = this.options.container();
                 if (box && this.scrolled(box) > 0) {
@@ -337,6 +368,7 @@ export class VirtualizeController {
         this.settle();
     }
     settle() {
+        this.respace(this.options.container(), Math.max(0, this.options.count()));
         if (!this.measuring()) {
             this.sampleRows();
             return;

package/dist/events/details.d.ts

@@ -263,6 +263,109 @@ export interface SortDetail {
      */
     value: string;
 }
+/** A hardware button Device Screen draws, named for what it does on the device. */
+export type DeviceButton = 'back' | 'home' | 'power' | 'recents' | 'rotate-left' | 'rotate-right' | 'volume-down' | 'volume-up';
+/** Detail carried by `helix-device-button`. */
+export interface DeviceButtonDetail {
+    /** Which button was pressed. */
+    button: DeviceButton;
+    /**
+     * How long the button was held, in milliseconds. `0` for a press from a key
+     * or a script, which has no length.
+     */
+    duration: number;
+}
+/** Detail carried by `helix-device-key`. */
+export interface DeviceKeyDetail {
+    /** Whether Alt, or Option on a Mac, was held. */
+    altKey: boolean;
+    /** The physical key, as `KeyboardEvent.code` names it: `KeyA`, `Enter`, `ArrowLeft`. */
+    code: string;
+    /** Whether Control was held. */
+    ctrlKey: boolean;
+    /** What the press produced, as `KeyboardEvent.key` names it: `a`, `A`, `Enter`. */
+    key: string;
+    /** Whether Command on a Mac, or the Windows key, was held. */
+    metaKey: boolean;
+    /** Whether the key went down or came up. */
+    phase: 'down' | 'up';
+    /** Whether the press is the key repeating while it is held. */
+    repeat: boolean;
+    /** Whether Shift was held. */
+    shiftKey: boolean;
+}
+/** Detail carried by `helix-device-scroll`. */
+export interface DeviceScrollDetail {
+    /** How far across, in device units, in the wheel's sense: positive scrolls toward the right. */
+    deltaX: number;
+    /** How far down, in device units, in the wheel's sense: positive scrolls toward the bottom. */
+    deltaY: number;
+    /** The screen's height in the units the point is measured in. */
+    height: number;
+    /** The screen's width in the units the point is measured in. */
+    width: number;
+    /** Where the pointer is, across from the screen's left edge. */
+    x: number;
+    /** Where the pointer is, down from the screen's top edge. */
+    y: number;
+}
+/** Detail carried by `helix-device-swipe`. */
+export interface DeviceSwipeDetail {
+    /** How long the finger was down, in milliseconds. */
+    duration: number;
+    /** Where the touch began, across from the screen's left edge. */
+    fromX: number;
+    /** Where the touch began, down from the screen's top edge. */
+    fromY: number;
+    /** The screen's height in the units the points are measured in. */
+    height: number;
+    /** Where the touch ended, across from the screen's left edge. */
+    toX: number;
+    /** Where the touch ended, down from the screen's top edge. */
+    toY: number;
+    /** The screen's width in the units the points are measured in. */
+    width: number;
+}
+/** Detail carried by `helix-device-tap`. */
+export interface DeviceTapDetail {
+    /** How long the finger was down, in milliseconds. A long press is a long tap. */
+    duration: number;
+    /** The screen's height in the units the point is measured in. */
+    height: number;
+    /** The screen's width in the units the point is measured in. */
+    width: number;
+    /** Where the tap was, across from the screen's left edge. */
+    x: number;
+    /** Where the tap was, down from the screen's top edge. */
+    y: number;
+}
+/** Detail carried by `helix-device-text`. */
+export interface DeviceTextDetail {
+    /** The text, as plain text. */
+    text: string;
+}
+/** Detail carried by `helix-device-touch`. */
+export interface DeviceTouchDetail {
+    /** The screen's height in the units the point is measured in. */
+    height: number;
+    /**
+     * Which finger, counting from `0`. A finger keeps its number until it lifts,
+     * and the lowest free number goes to the next finger down.
+     */
+    id: number;
+    /**
+     * Where the touch is in its life: `down` as the finger lands, `move` as it
+     * moves, `up` as it lifts, and `cancel` when the browser takes the touch
+     * away, which ends it without a lift.
+     */
+    phase: 'cancel' | 'down' | 'move' | 'up';
+    /** The screen's width in the units the point is measured in. */
+    width: number;
+    /** Where the finger is, across from the screen's left edge. */
+    x: number;
+    /** Where the finger is, down from the screen's top edge. */
+    y: number;
+}
 /** Detail carried by `helix-dismiss`. */
 export interface DismissDetail {
     /** Text content of the element asking to go, for identifying which it was. */

package/dist/events/device-button.d.ts

@@ -0,0 +1,14 @@
+import type { DeviceButtonDetail } from './details.js';
+/**
+ * A hardware button on the device was pressed, from Device Screen's controls
+ * or from `press()`. Press it on the device in response.
+ *
+ * **Sent once, as the button comes back up, with how long it was held.** A
+ * source that presses a button for a length of time, such as holding the side
+ * button for Siri, reads `duration`, and one that only presses reads nothing
+ * else. Not cancelable: nothing in Helix acts on the press.
+ */
+export declare class HelixDeviceButtonEvent extends CustomEvent<DeviceButtonDetail> {
+    static readonly eventName = "helix-device-button";
+    constructor(detail: DeviceButtonDetail);
+}

package/dist/events/device-button.js

@@ -0,0 +1,11 @@
+export class HelixDeviceButtonEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-button'; }
+    constructor(detail) {
+        super(HelixDeviceButtonEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/device-key.d.ts

@@ -0,0 +1,16 @@
+import type { DeviceKeyDetail } from './details.js';
+/**
+ * A key went down or came up while Device Screen had focus. Press or release
+ * it on the device in response.
+ *
+ * **Every key is sent twice, down and up, as a hardware keyboard sends it.**
+ * The device's own input method turns the presses into text, so a language
+ * that composes characters composes them on the device. `code` names the
+ * physical key, for a source that injects key codes, and `key` names what the
+ * press produced, for a source that types text. Not cancelable: the frame has
+ * already kept the press from the page.
+ */
+export declare class HelixDeviceKeyEvent extends CustomEvent<DeviceKeyDetail> {
+    static readonly eventName = "helix-device-key";
+    constructor(detail: DeviceKeyDetail);
+}

package/dist/events/device-key.js

@@ -0,0 +1,11 @@
+export class HelixDeviceKeyEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-key'; }
+    constructor(detail) {
+        super(HelixDeviceKeyEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/device-screenshot.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A screenshot of the device was asked for, from Device Screen's screenshot
+ * button or from `screenshot()`. Take one in response.
+ *
+ * **A request with nothing attached.** The device's own screenshot is sharper
+ * than any frame of a stream, so the page takes it the way its source allows.
+ * `capture()` on the frame returns the picture on screen, for a page with no
+ * better way. Not cancelable: nothing in Helix takes the screenshot.
+ */
+export declare class HelixDeviceScreenshotEvent extends Event {
+    static readonly eventName = "helix-device-screenshot";
+    constructor();
+}

package/dist/events/device-screenshot.js

@@ -0,0 +1,10 @@
+export class HelixDeviceScreenshotEvent extends Event {
+    static { this.eventName = 'helix-device-screenshot'; }
+    constructor() {
+        super(HelixDeviceScreenshotEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+        });
+    }
+}

package/dist/events/device-scroll.d.ts

@@ -0,0 +1,14 @@
+import type { DeviceScrollDetail } from './details.js';
+/**
+ * A wheel or a trackpad scrolled over Device Screen. Scroll the device in
+ * response.
+ *
+ * The distance is in device units and keeps the wheel's sense, so a positive
+ * `deltaY` asks for what is further down. A source that scrolls by swiping
+ * moves a finger the other way. Not cancelable: the frame has already kept the
+ * scroll from the page.
+ */
+export declare class HelixDeviceScrollEvent extends CustomEvent<DeviceScrollDetail> {
+    static readonly eventName = "helix-device-scroll";
+    constructor(detail: DeviceScrollDetail);
+}

package/dist/events/device-scroll.js

@@ -0,0 +1,11 @@
+export class HelixDeviceScrollEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-scroll'; }
+    constructor(detail) {
+        super(HelixDeviceScrollEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/device-swipe.d.ts

@@ -0,0 +1,15 @@
+import type { DeviceSwipeDetail } from './details.js';
+/**
+ * One finger moved across Device Screen and lifted. Swipe the device in
+ * response.
+ *
+ * **For a source that takes whole gestures**, such as a command that swipes
+ * from one point to another over a length of time. A source that takes each
+ * touch as it happens listens for `helix-device-touch` instead, and a page
+ * that listened for both would move the device twice. A touch with more than
+ * one finger sends no swipe. Not cancelable: nothing in Helix acts on it.
+ */
+export declare class HelixDeviceSwipeEvent extends CustomEvent<DeviceSwipeDetail> {
+    static readonly eventName = "helix-device-swipe";
+    constructor(detail: DeviceSwipeDetail);
+}

package/dist/events/device-swipe.js

@@ -0,0 +1,11 @@
+export class HelixDeviceSwipeEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-swipe'; }
+    constructor(detail) {
+        super(HelixDeviceSwipeEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/device-tap.d.ts

@@ -0,0 +1,13 @@
+import type { DeviceTapDetail } from './details.js';
+/**
+ * One finger touched Device Screen and lifted near where it landed. Tap the
+ * device in response.
+ *
+ * **For a source that takes whole gestures**, as `helix-device-swipe` is. A
+ * long press is a tap with a long `duration`, which a source holds for that
+ * long. Not cancelable: nothing in Helix acts on it.
+ */
+export declare class HelixDeviceTapEvent extends CustomEvent<DeviceTapDetail> {
+    static readonly eventName = "helix-device-tap";
+    constructor(detail: DeviceTapDetail);
+}

package/dist/events/device-tap.js

@@ -0,0 +1,11 @@
+export class HelixDeviceTapEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-tap'; }
+    constructor(detail) {
+        super(HelixDeviceTapEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/device-text.d.ts

@@ -0,0 +1,13 @@
+import type { DeviceTextDetail } from './details.js';
+/**
+ * Text was pasted into Device Screen. Type it on the device in response.
+ *
+ * **Pasted text has no key presses of its own**, so it arrives whole, in one
+ * event. Command or Control with V pastes in every mode, `forward-shortcuts`
+ * included. Not cancelable: the frame has
+ * already kept the paste from the page.
+ */
+export declare class HelixDeviceTextEvent extends CustomEvent<DeviceTextDetail> {
+    static readonly eventName = "helix-device-text";
+    constructor(detail: DeviceTextDetail);
+}

package/dist/events/device-text.js

@@ -0,0 +1,11 @@
+export class HelixDeviceTextEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-text'; }
+    constructor(detail) {
+        super(HelixDeviceTextEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/device-touch.d.ts

@@ -0,0 +1,15 @@
+import type { DeviceTouchDetail } from './details.js';
+/**
+ * A finger landed on Device Screen, moved, lifted, or was taken away. Touch
+ * the device in response.
+ *
+ * **For a source that takes each touch as it happens**, which is what a drag,
+ * a long press that turns into a drag, and a pinch need. One event per finger
+ * per step, so a pinch sends two at a time with different `id`s. A source that
+ * only taps and swipes listens for `helix-device-tap` and `helix-device-swipe`
+ * instead. Not cancelable: nothing in Helix acts on it.
+ */
+export declare class HelixDeviceTouchEvent extends CustomEvent<DeviceTouchDetail> {
+    static readonly eventName = "helix-device-touch";
+    constructor(detail: DeviceTouchDetail);
+}

package/dist/events/device-touch.js

@@ -0,0 +1,11 @@
+export class HelixDeviceTouchEvent extends CustomEvent {
+    static { this.eventName = 'helix-device-touch'; }
+    constructor(detail) {
+        super(HelixDeviceTouchEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/events.d.ts

@@ -61,6 +61,14 @@ import { HelixConsoleEvent } from './console.js';
 import { HelixCopyEvent } from './copy.js';
 import { HelixCopyErrorEvent } from './copy-error.js';
 import { HelixCreateEvent } from './create.js';
+import { HelixDeviceButtonEvent } from './device-button.js';
+import { HelixDeviceKeyEvent } from './device-key.js';
+import { HelixDeviceScreenshotEvent } from './device-screenshot.js';
+import { HelixDeviceScrollEvent } from './device-scroll.js';
+import { HelixDeviceSwipeEvent } from './device-swipe.js';
+import { HelixDeviceTapEvent } from './device-tap.js';
+import { HelixDeviceTextEvent } from './device-text.js';
+import { HelixDeviceTouchEvent } from './device-touch.js';
 import { HelixDismissEvent } from './dismiss.js';
 import { HelixEditEvent } from './edit.js';
 import { HelixEndEvent } from './end.js';
@@ -129,9 +137,9 @@ import { HelixToggleEvent } from './toggle.js';
 import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
-export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PasteDetail, PlotChangeDetail, PlotTurnDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReadingDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, StrandsFallbackDetail, TerminalInputDetail, TerminalLinkDetail, TerminalResizeDetail, TerminalTitleDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
+export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DeviceButton, DeviceButtonDetail, DeviceKeyDetail, DeviceScrollDetail, DeviceSwipeDetail, DeviceTapDetail, DeviceTextDetail, DeviceTouchDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PasteDetail, PlotChangeDetail, PlotTurnDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReadingDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, StrandsFallbackDetail, TerminalInputDetail, TerminalLinkDetail, TerminalResizeDetail, TerminalTitleDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 /**
  * Every event class, and the one place a new one is registered: a class in a
  * module of its own, imported above, and named here and in `names.ts`.
@@ -178,6 +186,14 @@ declare const registry: {
     readonly HelixCopyErrorEvent: typeof HelixCopyErrorEvent;
     readonly HelixCopyEvent: typeof HelixCopyEvent;
     readonly HelixCreateEvent: typeof HelixCreateEvent;
+    readonly HelixDeviceButtonEvent: typeof HelixDeviceButtonEvent;
+    readonly HelixDeviceKeyEvent: typeof HelixDeviceKeyEvent;
+    readonly HelixDeviceScreenshotEvent: typeof HelixDeviceScreenshotEvent;
+    readonly HelixDeviceScrollEvent: typeof HelixDeviceScrollEvent;
+    readonly HelixDeviceSwipeEvent: typeof HelixDeviceSwipeEvent;
+    readonly HelixDeviceTapEvent: typeof HelixDeviceTapEvent;
+    readonly HelixDeviceTextEvent: typeof HelixDeviceTextEvent;
+    readonly HelixDeviceTouchEvent: typeof HelixDeviceTouchEvent;
     readonly HelixDismissEvent: typeof HelixDismissEvent;
     readonly HelixEditEvent: typeof HelixEditEvent;
     readonly HelixEndEvent: typeof HelixEndEvent;

package/dist/events/events.js

@@ -31,6 +31,14 @@ import { HelixConsoleEvent } from './console.js';
 import { HelixCopyEvent } from './copy.js';
 import { HelixCopyErrorEvent } from './copy-error.js';
 import { HelixCreateEvent } from './create.js';
+import { HelixDeviceButtonEvent } from './device-button.js';
+import { HelixDeviceKeyEvent } from './device-key.js';
+import { HelixDeviceScreenshotEvent } from './device-screenshot.js';
+import { HelixDeviceScrollEvent } from './device-scroll.js';
+import { HelixDeviceSwipeEvent } from './device-swipe.js';
+import { HelixDeviceTapEvent } from './device-tap.js';
+import { HelixDeviceTextEvent } from './device-text.js';
+import { HelixDeviceTouchEvent } from './device-touch.js';
 import { HelixDismissEvent } from './dismiss.js';
 import { HelixEditEvent } from './edit.js';
 import { HelixEndEvent } from './end.js';
@@ -100,7 +108,7 @@ import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 const registry = {
     HelixActionEvent,
     HelixActivateEvent,
@@ -135,6 +143,14 @@ const registry = {
     HelixCopyErrorEvent,
     HelixCopyEvent,
     HelixCreateEvent,
+    HelixDeviceButtonEvent,
+    HelixDeviceKeyEvent,
+    HelixDeviceScreenshotEvent,
+    HelixDeviceScrollEvent,
+    HelixDeviceSwipeEvent,
+    HelixDeviceTapEvent,
+    HelixDeviceTextEvent,
+    HelixDeviceTouchEvent,
     HelixDismissEvent,
     HelixEditEvent,
     HelixEndEvent,

package/dist/events/names.js

@@ -2,7 +2,8 @@ export const helixEventNames = new Set(('action activate aura-fallback band befo
     'before-collapse before-edit before-move before-open before-panel-resize before-paste before-pin ' +
     'before-reconnect before-relabel before-reorder before-resize before-split before-toggle ' +
     'canvas-edit canvas-pan canvas-view canvas-zoom caret clear collapse complete ' +
-    'connect console copy copy-error create dismiss edit end expand facet filter ' +
+    'connect console copy copy-error create device-button device-key device-screenshot ' +
+    'device-scroll device-swipe device-tap device-text device-touch dismiss edit end expand facet filter ' +
     'filtered graph-filter graph-layout graph-pan graph-part-change graph-ready ' +
     'graph-signal graph-zoom history load load-more map-cluster map-pan map-part-change ' +
     'map-ready map-rotate map-tilt map-zoom move navigate next panel-resize pasted pin plot-change ' +

package/dist/helix-element/helix-element.d.ts

@@ -280,8 +280,8 @@ export declare class HelixElement extends LitElement {
     protected relayNativeEvent(event: Event, init?: EventInit): void;
     /**
      * The rules from `mark-rules.ts` for the marks this element writes in its
-     * own shadow root: `data-scroller`, `data-virtual`, `data-spoken` and
-     * `data-mirror`.
+     * own shadow root: `data-scroller`, `data-virtual`, `data-spoken`,
+     * `data-mirror` and `data-touches`.
      *
      * A component that writes a mark names its rule here, and a subclass
      * inherits the list. One that writes none takes only the three rules every

package/dist/helix-element/mark-rules.d.ts

@@ -117,3 +117,17 @@ export declare const SPOKEN_RULE = "[data-spoken]{position:absolute;inline-size:
  * whatever the script, and so is a picture of a key.
  */
 export declare const MIRROR_RULE = ":host(:dir(rtl)) [data-mirror]{scale:-1 1}";
+/**
+ * Hands every touch on an element to the component, which reads each one as
+ * input of its own.
+ *
+ * **Without it a one-finger drag is the page's.** The browser scrolls or zooms
+ * and sends the component `pointercancel`, so it never sees the finger move or
+ * lift. Device Screen turns touches into touches on a device and has that
+ * behavior only while `touch-action` is `none`, which makes the rule a
+ * mechanism, as the scroller's `overflow` is.
+ *
+ * Marked only while the component takes touches, so a read-only Device Screen
+ * leaves the page its scroll.
+ */
+export declare const TOUCHES_RULE = "[data-touches]{touch-action:none}";

package/dist/helix-element/mark-rules.js

@@ -2,3 +2,4 @@ export const SCROLLER_RULE = '[data-scroller]{overflow:auto}';
 export const VIRTUAL_RULE = '[data-virtual]{overflow-anchor:none}';
 export const SPOKEN_RULE = '[data-spoken]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}';
 export const MIRROR_RULE = ':host(:dir(rtl)) [data-mirror]{scale:-1 1}';
+export const TOUCHES_RULE = '[data-touches]{touch-action:none}';