@fusion.dev/helix-core 0.148.0 → 0.149.0

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

@@ -0,0 +1,497 @@
+import { HelixBeforeReorderEvent } from '../../events/before-reorder.js';
+import { HelixReorderEvent } from '../../events/reorder.js';
+import { deepActiveElement } from '../../utils/focusable-elements/focusable-elements.js';
+import { isRtl } from '../../utils/is-rtl/is-rtl.js';
+import { boxOf, dragPreviewOf, drawDragPreview } from '../../utils/reorder/drag-preview.js';
+import { centersOf, dropMark, edgeSpeed, IDLE, passedCount, placeKey, reorderKey, reorderStep, } from '../../utils/reorder/reorder.js';
+import { scrollingAncestor } from '../../utils/scroll-item-into-view/scroll-item-into-view.js';
+import { formatMessage } from '../../words/message.js';
+import { formatWords } from '../../words/words.js';
+import { wordsLocale } from '../../words/words-locale.js';
+const SLOP = 4;
+export const requestReorder = (host, detail) => {
+    const asked = new HelixBeforeReorderEvent(detail);
+    host.dispatchEvent(asked);
+    if (asked.defaultPrevented) {
+        return false;
+    }
+    const told = new HelixReorderEvent({ ...detail, keys: [...detail.keys] });
+    host.dispatchEvent(told);
+    return !told.defaultPrevented;
+};
+export class ReorderController {
+    constructor(host, options) {
+        this.state = IDLE;
+        this.holder = null;
+        this.pointer = { x: 0, y: 0 };
+        this.frame = 0;
+        this.shown = undefined;
+        this.anchor = { x: 0, y: 0 };
+        this.awaiting = undefined;
+        this.handleDown = (event) => {
+            if (this.state.phase === 'held' && this.state.by === 'keyboard') {
+                this.press();
+                return;
+            }
+            if (event.button !== 0 || !this.enabled() || this.state.phase !== 'idle') {
+                return;
+            }
+            const grip = this.options.grip(event);
+            const from = grip ? this.options.keys(grip.key).indexOf(grip.key) : -1;
+            if (!grip || from < 0) {
+                return;
+            }
+            if (this.options.holds !== false) {
+                event.preventDefault();
+            }
+            this.pointer = { x: event.clientX, y: event.clientY };
+            if (this.send({
+                from,
+                key: grip.key,
+                pointer: event.pointerId,
+                type: 'press',
+                x: event.clientX,
+                y: event.clientY,
+            })) {
+                this.listen(true);
+            }
+        };
+        this.handleMove = (event) => {
+            const state = this.state;
+            if ((state.phase !== 'pressed' && !(state.phase === 'held' && state.by === 'pointer')) ||
+                (state.phase === 'pressed' && event.pointerId !== state.pointer)) {
+                return;
+            }
+            this.pointer = { x: event.clientX, y: event.clientY };
+            this.drag();
+            this.glide();
+        };
+        this.handleUp = () => {
+            const dragged = this.state.phase === 'held';
+            this.send({ type: 'release' });
+            if (dragged) {
+                swallowClick();
+            }
+        };
+        this.handleCancel = () => {
+            this.send({ type: 'cancel' });
+        };
+        this.handleEscape = (event) => {
+            const state = this.state;
+            if (event.key === 'Escape' && state.phase === 'held' && state.by === 'pointer') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.send({ type: 'cancel' });
+                window.addEventListener('pointerup', swallowClick, { once: true });
+            }
+        };
+        this.handleClick = (event) => {
+            if (this.options.holds === false || !this.enabled()) {
+                return;
+            }
+            const state = this.state;
+            const grip = this.options.grip(event);
+            if (state.phase === 'idle') {
+                const from = grip ? this.options.keys(grip.key).indexOf(grip.key) : -1;
+                if (grip && from >= 0) {
+                    this.take(grip.element, { from, key: grip.key, type: 'pick' });
+                }
+                return;
+            }
+            if (state.phase !== 'held' || state.by !== 'keyboard') {
+                return;
+            }
+            const on = grip?.key ?? this.options.item?.(event);
+            const keys = this.options.keys(state.key);
+            if (on === undefined || !keys.includes(on)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            if (on === state.key) {
+                this.send({ from: state.from, key: state.key, type: 'pick' });
+                return;
+            }
+            const to = event.detail > 0 ? this.placeAt(state.key, event.clientX, event.clientY) : keys.indexOf(on);
+            this.send({ to: Math.max(0, to), type: 'target' });
+        };
+        this.handleKey = (event) => {
+            if (event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const state = this.state;
+            if (event.altKey) {
+                if (state.phase === 'idle' && !event.shiftKey) {
+                    this.nudge(event);
+                }
+                return;
+            }
+            if (this.options.holds === false) {
+                return;
+            }
+            const origin = event.composedPath()[0];
+            const native = origin instanceof HTMLButtonElement;
+            const press = event.key === 'Enter' || event.key === ' ';
+            if (state.phase === 'idle') {
+                const grip = press && !native && this.enabled() ? this.options.grip(event) : undefined;
+                const from = grip ? this.options.keys(grip.key).indexOf(grip.key) : -1;
+                if (grip && from >= 0) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.take(grip.element, { from, key: grip.key, type: 'pick' });
+                }
+                return;
+            }
+            if (state.phase !== 'held' || state.by !== 'keyboard') {
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.send({ type: 'cancel' });
+                return;
+            }
+            if (press) {
+                if (!native) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.send({ type: 'drop' });
+                }
+                return;
+            }
+            const to = reorderKey(event.key, {
+                axis: this.options.axis,
+                count: this.options.keys(state.key).length,
+                rtl: isRtl(this.host),
+                to: state.to,
+            });
+            if (to !== null && !event.shiftKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.send({ to, type: 'step' });
+            }
+        };
+        this.pressing = false;
+        this.handleFocusOut = () => {
+            if (this.state.phase === 'held' && this.state.by === 'keyboard') {
+                queueMicrotask(() => this.keepOrCancel());
+            }
+        };
+        this.host = host;
+        this.options = options;
+        host.addController(this);
+    }
+    get held() {
+        const state = this.state;
+        return state.phase === 'held'
+            ? { by: state.by, from: state.from, key: state.key, to: state.to }
+            : undefined;
+    }
+    get mark() {
+        const held = this.held;
+        const at = held && dropMark(held.from, held.to);
+        const key = at && held && this.options.keys(held.key)[at.index];
+        return at && key !== undefined ? { edge: at.edge, key } : undefined;
+    }
+    moveOf(key) {
+        const mark = this.mark;
+        return this.held?.key === key ? 'dragging' : mark?.key === key ? `drop-${mark.edge}` : undefined;
+    }
+    drawDragPreview() {
+        return drawDragPreview(this.enabled());
+    }
+    hostConnected() {
+        this.host.addEventListener('pointerdown', this.handleDown);
+        this.host.addEventListener('click', this.handleClick, true);
+        this.host.addEventListener('keydown', this.handleKey, true);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('pointerdown', this.handleDown);
+        this.host.removeEventListener('click', this.handleClick, true);
+        this.host.removeEventListener('keydown', this.handleKey, true);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+        this.listen(false);
+        this.lower();
+        this.awaiting?.disconnect();
+        this.state = IDLE;
+        this.holder = null;
+    }
+    cancel() {
+        this.send({ type: 'cancel' });
+    }
+    send(input) {
+        const before = this.state;
+        const next = reorderStep(before, input);
+        if (!next) {
+            return false;
+        }
+        this.state = next;
+        this.host.requestUpdate();
+        this.enter(before, next);
+        return true;
+    }
+    enter(before, next) {
+        if (next.phase !== 'held') {
+            this.lower();
+        }
+        if (next.phase === 'held') {
+            if (before.phase !== 'held') {
+                if (next.by === 'keyboard') {
+                    this.speak('pickedUp', next.key);
+                }
+                else {
+                    if (before.phase === 'pressed') {
+                        this.lift(next.key, before);
+                    }
+                    this.scroll();
+                }
+            }
+            else if (next.by === 'keyboard') {
+                this.speak('moved', next.key, next.to);
+            }
+            return;
+        }
+        if (next.phase === 'dropped') {
+            this.listen(false);
+            this.holder = null;
+            const moved = next.to !== next.from;
+            const stood = !moved || this.drop({ from: next.from, key: next.key, to: next.to });
+            this.speak(stood ? 'dropped' : 'canceled', next.key);
+            if (moved && stood && next.by === 'keyboard') {
+                this.follow(next.key);
+            }
+            this.send({ type: 'settle' });
+            return;
+        }
+        if (next.phase === 'canceled') {
+            this.listen(false);
+            this.holder = null;
+            this.speak('canceled', next.key);
+            this.send({ type: 'settle' });
+            return;
+        }
+        if (next.phase === 'idle') {
+            this.listen(false);
+        }
+    }
+    drop(move) {
+        if (this.options.drop) {
+            return this.options.drop(move);
+        }
+        const { key, to } = move;
+        const shown = this.options.keys(key);
+        const keys = placeKey(this.options.all?.(key) ?? shown, shown, key, to);
+        return requestReorder(this.host, {
+            ...move,
+            keys,
+            kind: this.options.kind ?? 'item',
+            to: keys.indexOf(key),
+            value: keys.join(','),
+        });
+    }
+    speak(which, key, to) {
+        const { name, words } = this.options;
+        const host = this.host;
+        const say = this.options.say ??
+            ('announced' in host
+                ? (said) => {
+                    host.announced = said;
+                    this.host.requestUpdate();
+                }
+                : undefined);
+        if (!say) {
+            return;
+        }
+        const values = {
+            count: this.options.keys(key).length,
+            name: name ? name(key) : key,
+            position: (to ?? 0) + 1,
+        };
+        say(words
+            ? formatMessage(words()[which], values, wordsLocale(this.host))
+            : formatWords(this.host, `${which}Label`, values));
+    }
+    placeAt(key, x, y) {
+        const block = this.options.axis === 'block';
+        const reversed = !block && isRtl(this.host);
+        const spans = this.options
+            .keys(key)
+            .filter((one) => one !== key)
+            .map((one) => {
+            const box = this.options.box(one);
+            return (box && (block ? { end: box.bottom, start: box.top } : { end: box.right, start: box.left }));
+        });
+        return passedCount(centersOf(spans, reversed), block ? y : x, reversed);
+    }
+    enabled() {
+        return this.options.enabled?.() ?? this.host.reorderable ?? true;
+    }
+    follow(key) {
+        const refocus = this.options.refocus;
+        this.awaiting?.disconnect();
+        const lost = () => {
+            const active = deepActiveElement();
+            return !active || active === document.body;
+        };
+        if (!refocus) {
+            return;
+        }
+        if (lost()) {
+            refocus(key);
+            return;
+        }
+        const watch = new MutationObserver(() => {
+            watch.disconnect();
+            if (lost()) {
+                refocus(key);
+            }
+        });
+        watch.observe(this.host, { childList: true, subtree: true });
+        this.awaiting = watch;
+    }
+    lift(key, from) {
+        const element = this.options.preview?.(key);
+        const root = this.host.renderRoot ?? this.host.shadowRoot;
+        const preview = root?.querySelector('[part="drag-preview"]');
+        if (!element || !preview) {
+            return;
+        }
+        const box = boxOf(element);
+        preview.style.cssText = `inset:auto;left:${box.left}px;top:${box.top}px;width:${box.width}px;height:${box.height}px;margin:0;padding:0;overflow:clip;pointer-events:none`;
+        preview.replaceChildren(...dragPreviewOf(element, true, box));
+        preview.showPopover?.();
+        this.shown = preview;
+        this.anchor = from;
+        this.glide();
+    }
+    glide() {
+        this.shown?.style.setProperty('translate', `${this.pointer.x - this.anchor.x}px ${this.pointer.y - this.anchor.y}px`);
+    }
+    lower() {
+        this.shown?.hidePopover?.();
+        this.shown?.replaceChildren();
+        this.shown = undefined;
+    }
+    drag() {
+        const state = this.state;
+        if (state.phase !== 'pressed' && state.phase !== 'held') {
+            return;
+        }
+        const { x, y } = this.pointer;
+        this.send({ slop: SLOP, to: this.placeAt(state.key, x, y), type: 'drag', x, y });
+    }
+    listen(on) {
+        if (on) {
+            window.addEventListener('pointermove', this.handleMove);
+            window.addEventListener('pointerup', this.handleUp);
+            window.addEventListener('pointercancel', this.handleCancel);
+            window.addEventListener('keydown', this.handleEscape, true);
+            return;
+        }
+        window.removeEventListener('pointermove', this.handleMove);
+        window.removeEventListener('pointerup', this.handleUp);
+        window.removeEventListener('pointercancel', this.handleCancel);
+        window.removeEventListener('keydown', this.handleEscape, true);
+        if (this.frame) {
+            cancelAnimationFrame(this.frame);
+            this.frame = 0;
+        }
+    }
+    scroll() {
+        const block = this.options.axis === 'block';
+        const scroller = this.options.scroller ??
+            (block
+                ? () => scrollingAncestor(this.host.firstElementChild ?? this.host, {
+                    axis: 'y',
+                    overflowing: true,
+                })
+                : undefined);
+        if (!scroller || this.frame || typeof requestAnimationFrame !== 'function') {
+            return;
+        }
+        const tick = () => {
+            this.frame = 0;
+            const state = this.state;
+            if (state.phase !== 'held' || state.by !== 'pointer') {
+                return;
+            }
+            const box = scroller();
+            const edges = box
+                ? box.getBoundingClientRect()
+                : { bottom: innerHeight, left: 0, right: innerWidth, top: 0 };
+            const speed = block
+                ? edgeSpeed(this.pointer.y, edges.top, edges.bottom)
+                : edgeSpeed(this.pointer.x, edges.left, edges.right);
+            if (speed !== 0) {
+                const by = block ? { top: speed } : { left: speed };
+                if (box) {
+                    box.scrollBy(by);
+                }
+                else {
+                    window.scrollBy(by);
+                }
+                this.drag();
+            }
+            this.frame = requestAnimationFrame(tick);
+        };
+        this.frame = requestAnimationFrame(tick);
+    }
+    take(element, input) {
+        if (deepActiveElement() !== element) {
+            element.focus();
+        }
+        this.holder = element;
+        this.send(input);
+    }
+    nudge(event) {
+        const key = this.enabled() ? this.options.current?.(event) : undefined;
+        const keys = key === undefined ? [] : this.options.keys(key);
+        const from = key === undefined ? -1 : keys.indexOf(key);
+        const to = key === undefined || from < 0
+            ? null
+            : reorderKey(event.key, {
+                axis: this.options.axis,
+                count: keys.length,
+                rtl: isRtl(this.host),
+                to: from,
+            });
+        if (key === undefined || to === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (to !== from) {
+            const stood = this.drop({ from, key, to });
+            this.speak(stood ? 'moved' : 'canceled', key, to);
+            if (stood) {
+                this.follow(key);
+            }
+        }
+    }
+    press() {
+        this.pressing = true;
+        window.addEventListener('pointerup', () => {
+            setTimeout(() => {
+                this.pressing = false;
+                this.keepOrCancel();
+            }, 0);
+        }, { once: true });
+    }
+    keepOrCancel() {
+        if (!this.pressing &&
+            this.state.phase === 'held' &&
+            this.state.by === 'keyboard' &&
+            deepActiveElement() !== this.holder) {
+            this.send({ type: 'cancel' });
+        }
+    }
+}
+const swallow = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+const swallowClick = () => {
+    window.addEventListener('click', swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 0);
+};

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

@@ -1,4 +1,4 @@
-import { auditSource } from '#audit-source';
+import { auditSource } from '@fusion.dev/helix-core/audits/source';
 import { elementById } from '../../utils/element-by-id/element-by-id.js';
 import { readRows, readSeries, seriesKey, } from '../../utils/read-series/read-series.js';
 const HIDDEN = new WeakMap();

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

@@ -13,7 +13,7 @@ export class Heights {
         if (index < 0 || !Number.isFinite(size) || size <= 0) {
             return false;
         }
-        const rounded = Math.round(size);
+        const rounded = Math.round(size * 64) / 64;
         if (this.seen.get(index) === rounded) {
             return false;
         }

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

@@ -9,8 +9,13 @@ export interface VirtualizeOptions {
     estimate: () => number;
     /**
      * Rows kept either side of what fits, so a scroll reveals something drawn
-     * rather than something blank. Four by default, which is roughly a frame of
-     * fast scrolling at a 32 pixel row.
+     * rather than something blank. Four by default.
+     *
+     * While the box scrolls, one more screen of rows is drawn on the side it is
+     * scrolling toward. On iOS the scroll runs in another process, and the page
+     * hears where it is a frame or more later. Four rows of 32 pixels cover
+     * about 18 milliseconds of a fling at 7,000 pixels a second, so without
+     * that screen the leading edge showed the empty spacer.
      */
     overscan?: number;
     /**
@@ -46,6 +51,17 @@ export interface VirtualizeOptions {
      * whole set the first time it is asked.
      */
     measured?: () => boolean;
+    /**
+     * Whether the controller holds the reader still on this pass when rows
+     * above them turn out a different height than estimated. True by default.
+     *
+     * A host that keeps its own reader in place answers false while it does,
+     * because two holds on one box each undo part of the other. `Chat` holds the
+     * turn being read while the log is still, and answers true while the reader
+     * scrolls, so the controller's spacer takes the move and nothing writes the
+     * scroll offset during a fling.
+     */
+    anchor?: () => boolean;
 }
 /** A row that has been drawn, and which item of the set it drew. */
 export interface Rendered {
@@ -140,12 +156,92 @@ export declare class VirtualizeController implements ReactiveController {
     private sample;
     /** The length of the set when `endInSight` last answered true. */
     private askedAt;
+    /**
+     * How far the drawn rows sit from where the measured heights place them, in
+     * pixels, while the reader is scrolling.
+     *
+     * **A correction written to `scrollTop` during a fling ends the fling on
+     * iOS.** A row above the reader that turns out shorter than its estimate
+     * moves everything below it, and the controller has to put the reader back.
+     * While the box scrolls, the before spacer takes the difference and
+     * `scrollTop` is left alone. The spacer and the scroll offset are squared
+     * once the box has been still for `REST` milliseconds with no finger on it,
+     * or straight away when the spacer would have to be negative or the first
+     * row would sit below the top of the set.
+     */
+    private drift;
+    /**
+     * The scroll offset at the last scroll event or the last write of this
+     * controller's own, which gives the direction, and a move still to be heard.
+     */
+    private lastTop;
+    /**
+     * The item `reveal` scrolled to, which corrections hold still until the
+     * reader scrolls. Rows measured between the top of the box and that item
+     * would otherwise move it back out of view.
+     */
+    private target;
+    /** The way the box last scrolled: 1 down, -1 up, 0 before any scroll. */
+    private heading;
+    /** Whether a finger is on the box. iOS keeps scrolling after it lifts. */
+    private touching;
+    /** The timer that ends a scroll, set again on every scroll event. */
+    private resting;
+    /**
+     * Whether the rows drawn on the straight line have come out different
+     * heights. From then on the list is placed by measurement, whatever
+     * `measured` says. A list whose rows are one height on a wide screen can
+     * wrap on a phone, and a straight line through rows of different heights
+     * moves the content by the difference each time a row enters or leaves.
+     */
+    private uneven;
     constructor(host: ReactiveControllerHost, options: VirtualizeOptions);
     hostConnected(): void;
     hostDisconnected(): void;
     /** Attaches to the box the first time there is one to attach to. */
     private watch;
     private readonly handleScroll;
+    private readonly handleTouchStart;
+    private readonly handleTouchEnd;
+    /**
+     * Whether the reader is scrolling: a finger is on the box, the box moved
+     * within the last 150 milliseconds, or it has moved and its `scroll` event
+     * has not arrived yet.
+     *
+     * For a host that holds its own reader: a write to the scroll offset while
+     * this is true ends a fling on iOS, and a reader position noted before the
+     * last move is out of date.
+     */
+    scrolling(): boolean;
+    /** Squares the spacer and the scroll offset once the box is still. */
+    private readonly rest;
+    /**
+     * Moves the drift into the scroll offset, so the rows do not move on screen
+     * when the render takes it out of the spacer.
+     *
+     * **The write goes on whichever side of the render keeps the room it
+     * needs.** A spacer that shrinks takes the room with it, and at the end of
+     * the set the box clamps the offset to the new height before `hostUpdated`
+     * runs. Written there as well, the move was made twice: in Chromium, End in
+     * a windowed Object Inspector left the focused row 61 pixels below the box.
+     * So a shrinking spacer is paid for now, and a growing one after the render.
+     *
+     * **A move owed to the render asks for that render.** At the start of the
+     * set the spacer is already zero, so squaring leaves the window the same and
+     * `measure` asks for no update. The owed move then waited for whatever
+     * rendered next. In Chromium, a chat scrolled to its top measured the turns
+     * above the reader 62 pixels taller than their estimates, and the history
+     * prepended after that paid the 62 pixels along with its own room, so the
+     * turn being read moved 62 pixels.
+     */
+    private square;
+    /**
+     * Where the top of the box is in the measured heights, in pixels: the
+     * scroll offset, with what is owed to it and less the drift.
+     */
+    private offset;
+    /** How far past the screen to draw toward the side the box is scrolling to. */
+    private lead;
     /**
      * Reads the scroll offset and settles the window.
      *
@@ -178,7 +274,7 @@ export declare class VirtualizeController implements ReactiveController {
      * box stays there.
      */
     private sampleRows;
-    /** Whether this pass places by measurement: offered, and wanted. */
+    /** Whether this pass places by measurement: offered, and wanted or needed. */
     private measuring;
     /**
      * The measured version, which asks where each item starts rather than dividing.
@@ -254,6 +350,24 @@ export declare class VirtualizeController implements ReactiveController {
      * Skipped at the very top, where there is nothing above to have moved.
      */
     hostUpdated(): void;
+    /**
+     * Measures the rows in the tree now, and holds the reader still if they moved.
+     *
+     * `hostUpdated` calls this. A host that draws its rows after `hostUpdated`,
+     * in `updated`, calls it again once they are drawn, so the rows of this
+     * window are measured in the pass that draws them. Measured a pass later, a
+     * window chosen by the estimate stopped short of the bottom of the box and
+     * stayed there until the next scroll: in Chromium, 5,000 rows of 21 pixels
+     * against an estimate of 32 left 142 to 157 pixels of the box empty after
+     * each jump of 1,500 pixels, and the next scroll moved the reader back 297.
+     *
+     * **The reader is held by the row at the top of the box.** Rows drawn above
+     * it for the first time move it by what they came to, less what they were
+     * estimated at. The window's first row is the wrong anchor: no row before
+     * it is drawn, so nothing before it is measured, and the rows that do move
+     * the reader were never counted.
+     */
+    settle(): void;
     /**
      * Tells the controller the set grew by `by` items at its start.
      *