@fusion.dev/helix-core 0.148.0 → 0.149.1

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

@@ -2,6 +2,7 @@ import { endInSight } from '../../utils/load-more/load-more.js';
 import { reportRuntime } from '../../utils/report-runtime/report-runtime.js';
 import { Heights } from './heights.js';
 const UNSTABLE = 10;
+const REST = 150;
 export class VirtualizeController {
     constructor(host, options) {
         this.watching = false;
@@ -10,13 +11,45 @@ export class VirtualizeController {
         this.window = { after: 0, before: 0, first: 0, last: 0 };
         this.owed = 0;
         this.askedAt = -1;
+        this.drift = 0;
+        this.lastTop = 0;
+        this.heading = 0;
+        this.touching = false;
+        this.uneven = false;
         this.handleScroll = () => {
+            const top = this.options.container()?.scrollTop ?? 0;
+            if (top !== this.lastTop) {
+                this.heading = top > this.lastTop ? 1 : -1;
+                this.lastTop = top;
+                this.target = undefined;
+                clearTimeout(this.resting);
+                this.resting = setTimeout(this.rest, REST);
+            }
+            this.settling = 0;
+            this.measure();
+        };
+        this.handleTouchStart = () => {
+            this.touching = true;
+        };
+        this.handleTouchEnd = () => {
+            this.touching = false;
+            if (this.resting === undefined) {
+                this.rest();
+            }
+        };
+        this.rest = () => {
+            this.resting = undefined;
+            if (this.touching || this.drift === 0) {
+                return;
+            }
+            this.square();
             this.settling = 0;
             this.measure();
+            this.host.requestUpdate();
         };
         this.host = host;
         this.options = options;
-        this.heights = new Heights(() => this.options.estimate());
+        this.heights = new Heights(() => this.line());
         host.addController(this);
         host.constructor.disableWarning?.('change-in-update');
     }
@@ -29,7 +62,15 @@ export class VirtualizeController {
         this.observer?.disconnect();
         this.observer = undefined;
         this.watching = false;
-        this.options.container()?.removeEventListener('scroll', this.handleScroll);
+        const box = this.options.container();
+        box?.removeEventListener('scroll', this.handleScroll, { capture: true });
+        box?.removeEventListener('touchstart', this.handleTouchStart);
+        box?.removeEventListener('touchend', this.handleTouchEnd);
+        box?.removeEventListener('touchcancel', this.handleTouchEnd);
+        box?.removeEventListener('scrollend', this.handleTouchEnd);
+        clearTimeout(this.resting);
+        this.resting = undefined;
+        this.touching = false;
     }
     watch() {
         if (this.watching) {
@@ -40,10 +81,38 @@ export class VirtualizeController {
             return;
         }
         this.observer.observe(box);
-        box.addEventListener('scroll', this.handleScroll, { passive: true });
+        box.addEventListener('scroll', this.handleScroll, { capture: true, passive: true });
+        box.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+        box.addEventListener('touchend', this.handleTouchEnd, { passive: true });
+        box.addEventListener('touchcancel', this.handleTouchEnd, { passive: true });
+        box.addEventListener('scrollend', this.handleTouchEnd, { passive: true });
+        this.lastTop = box.scrollTop;
         box.setAttribute('data-virtual', '');
         this.watching = true;
     }
+    scrolling() {
+        return (this.touching ||
+            this.resting !== undefined ||
+            (this.options.container()?.scrollTop ?? this.lastTop) !== this.lastTop);
+    }
+    square() {
+        const box = this.options.container();
+        if (this.drift > 0 && box) {
+            box.scrollTop -= this.drift;
+            this.lastTop = box.scrollTop;
+        }
+        else if (this.drift !== 0) {
+            this.owed -= this.drift;
+            this.host.requestUpdate();
+        }
+        this.drift = 0;
+    }
+    offset(box) {
+        return box.scrollTop + this.owed - this.drift;
+    }
+    lead(box) {
+        return this.heading === 0 ? 0 : box.clientHeight;
+    }
     measure() {
         this.watch();
         const box = this.options.container();
@@ -53,9 +122,15 @@ export class VirtualizeController {
             return;
         }
         const overscan = this.options.overscan ?? 4;
-        const next = this.measuring()
+        let next = this.measuring()
             ? this.placed(box, total, overscan)
             : this.uniform(box, total, size, overscan);
+        if (this.drift !== 0 && (next.before < 0 || next.first === 0)) {
+            this.square();
+            next = this.measuring()
+                ? this.placed(box, total, overscan)
+                : this.uniform(box, total, size, overscan);
+        }
         if (this.last?.count !== total || this.last.estimate !== size) {
             this.last = { count: total, estimate: size };
             this.settling = 0;
@@ -77,8 +152,10 @@ export class VirtualizeController {
         this.host.requestUpdate();
     }
     uniform(box, total, size, overscan) {
-        const first = Math.max(0, Math.min(Math.floor(box.scrollTop / size), total) - overscan);
-        const fits = Math.ceil(box.clientHeight / size) + overscan * 2;
+        const extra = Math.ceil(this.lead(box) / size);
+        const at = Math.min(Math.floor(this.offset(box) / size), total);
+        const first = Math.max(0, at - overscan - (this.heading < 0 ? extra : 0));
+        const fits = Math.ceil(box.clientHeight / size) + overscan * 2 + (this.heading === 0 ? 0 : extra);
         const last = Math.min(total, first + fits);
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
     }
@@ -88,9 +165,6 @@ export class VirtualizeController {
     }
     sampleRows() {
         const estimate = Math.max(1, this.options.estimate());
-        if (this.sample?.estimate === estimate) {
-            return;
-        }
         const heights = new Map();
         for (const { element, index } of this.options.rows?.() ?? []) {
             heights.set(index, (heights.get(index) ?? 0) + element.getBoundingClientRect().height);
@@ -99,33 +173,45 @@ export class VirtualizeController {
         if (seen.length === 0) {
             return;
         }
-        const was = this.line();
-        const size = Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length);
-        this.sample = { estimate, size };
-        if (Math.abs(size - was) < 0.5) {
-            return;
+        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.sample = { estimate, size };
+            if (Math.abs(size - was) >= 0.5) {
+                const box = this.options.container();
+                if (box && box.scrollTop > 0) {
+                    box.scrollTop = (box.scrollTop / was) * size;
+                    this.lastTop = box.scrollTop;
+                }
+                this.settling = 0;
+                if (!uneven) {
+                    this.measure();
+                }
+            }
         }
-        const box = this.options.container();
-        if (box && box.scrollTop > 0) {
-            box.scrollTop = (box.scrollTop / was) * size;
+        if (uneven) {
+            this.uneven = true;
+            this.settle();
         }
-        this.settling = 0;
-        this.measure();
     }
     measuring() {
-        return this.options.rows !== undefined && (this.options.measured?.() ?? true);
+        return this.options.rows !== undefined && (this.uneven || (this.options.measured?.() ?? true));
     }
     placed(box, total, overscan) {
-        const first = Math.max(0, this.heights.indexAt(box.scrollTop, total) - overscan);
-        const bottom = box.scrollTop + box.clientHeight;
-        let last = this.heights.indexAt(box.scrollTop, total);
+        const top = this.offset(box);
+        const lead = this.lead(box);
+        const from = this.heading < 0 ? top - lead : top;
+        const first = Math.max(0, this.heights.indexAt(from, total) - overscan);
+        const bottom = top + box.clientHeight + (this.heading > 0 ? lead : 0);
+        let last = this.heights.indexAt(top, total);
         while (last < total && this.heights.before(last, total) < bottom) {
             last += 1;
         }
         last = Math.min(total, last + overscan);
         return {
             after: Math.max(0, this.heights.total(total) - this.heights.before(last, total)),
-            before: this.heights.before(first, total),
+            before: this.heights.before(first, total) + this.drift,
             first,
             last,
         };
@@ -136,7 +222,7 @@ export class VirtualizeController {
         if (!box || total === 0) {
             return { first: 0, last: 0 };
         }
-        const top = Math.max(0, box.scrollTop);
+        const top = Math.max(0, this.offset(box));
         const bottom = top + box.clientHeight;
         if (!this.measuring()) {
             const size = this.line();
@@ -157,7 +243,7 @@ export class VirtualizeController {
             return 0;
         }
         const length = this.measuring() ? this.heights.total(total) : total * this.line();
-        return Math.max(0, length - Math.max(0, box.scrollTop) - box.clientHeight);
+        return Math.max(0, length - Math.max(0, this.offset(box)) - box.clientHeight);
     }
     endInSight(length = Math.max(0, this.options.count())) {
         if (this.options.count() <= 0 ||
@@ -188,9 +274,13 @@ export class VirtualizeController {
             const box = this.options.container();
             if (box) {
                 box.scrollTop += this.owed;
+                this.lastTop = box.scrollTop;
             }
             this.owed = 0;
         }
+        this.settle();
+    }
+    settle() {
         if (!this.measuring()) {
             this.sampleRows();
             return;
@@ -200,7 +290,10 @@ export class VirtualizeController {
             return;
         }
         const total = Math.max(0, this.options.count());
-        const was = this.heights.before(this.window.first, total);
+        const box = this.options.container();
+        const top = box ? this.offset(box) : 0;
+        const anchor = this.target ?? this.heights.indexAt(top, total);
+        const was = this.heights.before(anchor, total);
         let news = false;
         for (const { element, index } of rows) {
             if (this.heights.record(index, element.getBoundingClientRect().height)) {
@@ -211,10 +304,15 @@ export class VirtualizeController {
             return;
         }
         this.settling = 0;
-        const box = this.options.container();
-        const now = this.heights.before(this.window.first, total);
-        if (box && box.scrollTop > 0 && now !== was) {
-            box.scrollTop += now - was;
+        const moved = this.heights.before(anchor, total) - was;
+        if (box && top > 0 && moved !== 0 && (this.options.anchor?.() ?? true)) {
+            if (this.scrolling()) {
+                this.drift -= moved;
+            }
+            else {
+                box.scrollTop += moved;
+                this.lastTop = box.scrollTop;
+            }
         }
         this.measure();
     }
@@ -269,17 +367,21 @@ export class VirtualizeController {
         }
         else {
             box.scrollTop = next;
+            this.lastTop = box.scrollTop;
+            this.target = index;
         }
     }
     offsetOf(index) {
         const total = Math.max(0, this.options.count());
         return this.measuring()
-            ? this.heights.before(index, total)
+            ? this.heights.before(index, total) + this.drift
             : Math.max(0, Math.min(index, total)) * this.line();
     }
     forget() {
         this.heights.forget();
         this.sample = undefined;
+        this.uneven = false;
+        this.square();
     }
     report() {
         if (this.warned) {

package/dist/events/before-reorder.d.ts

@@ -0,0 +1,14 @@
+import type { ReorderDetail } from './details.js';
+/**
+ * A row or an item is about to move to a new place, and the move can be
+ * refused.
+ *
+ * Sent once, when a drag lets go or a key drops the item, with the whole order
+ * the move would leave. Call `preventDefault()` to keep the item where it is: a
+ * pinned row, or a place the item may not go. Nothing has moved yet, and
+ * `helix-reorder` follows where nobody refused.
+ */
+export declare class HelixBeforeReorderEvent extends CustomEvent<ReorderDetail> {
+    static readonly eventName = "helix-before-reorder";
+    constructor(detail: ReorderDetail);
+}

package/dist/events/before-reorder.js

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

package/dist/events/details.d.ts

@@ -261,6 +261,34 @@ export interface ChangeDetail {
     /** The value after the change. */
     value: string;
 }
+/**
+ * Detail carried by `helix-before-reorder`, `helix-reorder`, and
+ * `helix-reordered`: one row, item, or column moved to a new place.
+ *
+ * `from` and `to` count from 0 in the old order and in `keys`. Where your
+ * array holds every key in the same order, `rows.splice(to, 0,
+ * ...rows.splice(from, 1))` makes the same move.
+ *
+ * **`kind` is a field because one element sends both.** A data table moves its
+ * rows and its columns, and both are `helix-reorder` from the same host.
+ */
+export interface ReorderDetail extends ChangeDetail {
+    /** Where the key was before the move, counting from 0 in the old order. */
+    from: number;
+    /** The key of what moved: a row's key, an item's value, or a column's field. */
+    key: string;
+    /** Every key in the new order. */
+    keys: string[];
+    /** What moved: a column of a data table, an item of a list, or a row of a data table. */
+    kind: 'column' | 'item' | 'row';
+    /** Where the key is after the move, counting from 0 in `keys`. */
+    to: number;
+    /**
+     * The new order as one string: fields separated by spaces for columns, which
+     * is what `order` takes, and keys separated by commas for rows and items.
+     */
+    value: string;
+}
 /** Detail carried by `helix-activate`: the value after the move, and the one before it. */
 export interface ActivateDetail extends ChangeDetail {
     /** The value that was current before the move, where the set knows it. */

package/dist/events/events.d.ts

@@ -43,6 +43,7 @@ import { HelixBeforePanelResizeEvent } from './before-panel-resize.js';
 import { HelixBeforePinEvent } from './before-pin.js';
 import { HelixBeforeReconnectEvent } from './before-reconnect.js';
 import { HelixBeforeRelabelEvent } from './before-relabel.js';
+import { HelixBeforeReorderEvent } from './before-reorder.js';
 import { HelixBeforeResizeEvent } from './before-resize.js';
 import { HelixBeforeSplitEvent } from './before-split.js';
 import { HelixBeforeToggleEvent } from './before-toggle.js';
@@ -115,9 +116,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, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.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, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, 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, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, 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, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, 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, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, 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`.
@@ -146,6 +147,7 @@ declare const registry: {
     readonly HelixBeforePinEvent: typeof HelixBeforePinEvent;
     readonly HelixBeforeReconnectEvent: typeof HelixBeforeReconnectEvent;
     readonly HelixBeforeRelabelEvent: typeof HelixBeforeRelabelEvent;
+    readonly HelixBeforeReorderEvent: typeof HelixBeforeReorderEvent;
     readonly HelixBeforeResizeEvent: typeof HelixBeforeResizeEvent;
     readonly HelixBeforeSplitEvent: typeof HelixBeforeSplitEvent;
     readonly HelixBeforeToggleEvent: typeof HelixBeforeToggleEvent;

package/dist/events/events.js

@@ -13,6 +13,7 @@ import { HelixBeforePanelResizeEvent } from './before-panel-resize.js';
 import { HelixBeforePinEvent } from './before-pin.js';
 import { HelixBeforeReconnectEvent } from './before-reconnect.js';
 import { HelixBeforeRelabelEvent } from './before-relabel.js';
+import { HelixBeforeReorderEvent } from './before-reorder.js';
 import { HelixBeforeResizeEvent } from './before-resize.js';
 import { HelixBeforeSplitEvent } from './before-split.js';
 import { HelixBeforeToggleEvent } from './before-toggle.js';
@@ -86,7 +87,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, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, 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, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, 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, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 const registry = {
     HelixActionEvent,
     HelixActivateEvent,
@@ -103,6 +104,7 @@ const registry = {
     HelixBeforePinEvent,
     HelixBeforeReconnectEvent,
     HelixBeforeRelabelEvent,
+    HelixBeforeReorderEvent,
     HelixBeforeResizeEvent,
     HelixBeforeSplitEvent,
     HelixBeforeToggleEvent,

package/dist/events/names.js

@@ -1,6 +1,6 @@
 export const helixEventNames = new Set(('action activate aura-fallback band before-activate before-change before-close ' +
     'before-collapse before-edit before-move before-open before-panel-resize before-pin ' +
-    'before-reconnect before-relabel before-resize before-split before-toggle ' +
+    '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 ' +
     'filtered graph-filter graph-layout graph-pan graph-part-change graph-ready ' +

package/dist/events/reorder.d.ts

@@ -1,18 +1,24 @@
-import type { ChangeDetail } from './details.js';
+import type { ReorderDetail } from './details.js';
 /**
- * Fired when the reader asks for the columns in a different order.
+ * Fired when you ask for a row, an item, or a column to move to a new place.
  *
- * Cancelable, and refusing it leaves the columns where they were, so a consumer
- * who stores the order, in a URL or a preference, can take the decision the way
- * a server-side sort takes `helix-sort`. The detail is the whole order as
- * space-separated fields rather than one move, because the order is the fact a
- * consumer stores, and a move is only meaningful against an order they would
- * then have to keep in step.
+ * **For rows and items, you move them.** Helix moves no element it does not
+ * own, so a list or a data table sends this after `helix-before-reorder`, and
+ * you move your data to the order in `keys`. Calling `preventDefault()` says
+ * the move did not happen, and the element tells a screen reader it was
+ * canceled.
  *
- * Not `helix-sort`: that reorders the rows, this reorders the columns, and a
- * consumer listening for one should not hear the other.
+ * **For Data Table's columns, the table moves them.** Calling
+ * `preventDefault()` leaves the columns where they were, so you can store the
+ * order in a URL or a preference and decide it yourself, the way a server-side
+ * sort takes `helix-sort`. `value` is the whole order as fields separated by
+ * spaces, which is what `order` takes.
+ *
+ * `kind` says which of the three moved, since a data table sends this for its
+ * rows and for its columns. `helix-sort` orders rows by a column, and this
+ * moves one row or column by hand.
  */
-export declare class HelixReorderEvent extends CustomEvent<ChangeDetail> {
+export declare class HelixReorderEvent extends CustomEvent<ReorderDetail> {
     static readonly eventName = "helix-reorder";
-    constructor(detail: ChangeDetail);
+    constructor(detail: ReorderDetail);
 }

package/dist/events/reordered.d.ts

@@ -1,12 +1,12 @@
-import type { ChangeDetail } from './details.js';
+import type { ReorderDetail } from './details.js';
 /**
- * The columns are in a different order.
+ * Data Table's columns are in a different order.
  *
  * The notification after `helix-reorder`, sent once the order has moved, with
  * every field in the new one. Not cancelable, and past tense for the reason
  * `helix-sorted` is.
  */
-export declare class HelixReorderedEvent extends CustomEvent<ChangeDetail> {
+export declare class HelixReorderedEvent extends CustomEvent<ReorderDetail> {
     static readonly eventName = "helix-reordered";
-    constructor(detail: ChangeDetail);
+    constructor(detail: ReorderDetail);
 }

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

@@ -1,7 +1,8 @@
 import { LitElement, unsafeCSS } from 'lit';
+import { auditReactProps } from '@fusion.dev/helix-core/audits/react';
 import { measuring, reportRender } from '../utils/report-render/report-render.js';
 import { noteVersion, reportUsage } from '../utils/report-usage/report-usage.js';
-import { applyReactProperties, auditReactProps, bindReactHandler, reactPropsOf, } from './react-bridge.js';
+import { applyReactProperties, bindReactHandler, reactPropsOf } from './react-bridge.js';
 const BOX_SIZING = '*,::before,::after{box-sizing:border-box}';
 const HIDDEN = ":host([hidden]:not([hidden='until-found'])){display:none}";
 const SCROLLER = '[data-scroller]{overflow:auto}';

package/dist/helix-element/react-audit-off.d.ts

@@ -0,0 +1,11 @@
+import type { auditReactProps as audit } from './react-audit.js';
+/**
+ * The React prop audit in a production build: nothing.
+ *
+ * `#react-audit` resolves here unless the bundler or runtime asks for the
+ * `development` condition, so a production build carries none of the audit's
+ * code, its sentences or the list of every event name it checks against. The
+ * signature is the audit's, so a call site reads the same in both builds. See
+ * `react-audit.ts`.
+ */
+export declare const auditReactProps: typeof audit;

package/dist/helix-element/react-audit-off.js

@@ -0,0 +1 @@
+export const auditReactProps = () => { };

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

@@ -0,0 +1,20 @@
+/**
+ * Says so when a handler prop is attached to nothing.
+ *
+ * **TypeScript will not catch any of this, and that is not our tooling's
+ * fault.** A JSX attribute whose name is not a valid identifier is exempt from
+ * checking on an intrinsic element, and every one of ours carries a hyphen. So
+ * `onhelix-opne` type-checks, `on:helix-open` type-checks, and a made-up
+ * `totally-invented` prop type-checks, all against fully generated types that
+ * do reject a wrong *value* on a normal attribute. Measured with `tsc`.
+ *
+ * That leaves runtime as the only place a typo can be caught, and React's props
+ * bag as the only place to look, which the bridge already reads. Once per
+ * element, because a warning that repeats on every keystroke is one a consumer
+ * silences.
+ *
+ * `on:helix-open` gets its own message because it is not a mistake so much as
+ * the wrong dialect. It is what the Solid types offer, correctly, and React
+ * binds it as an event named `:helix-open`.
+ */
+export declare const auditReactProps: (host: EventTarget, props: Record<string, unknown>) => void;

package/dist/helix-element/react-audit.js

@@ -0,0 +1,56 @@
+import { eventsForTag } from '../events/element-events.js';
+import { helixEventNames } from '../events/names.js';
+import { reportRuntime } from '../utils/report-runtime/report-runtime.js';
+const audited = new WeakSet();
+const REMOVED = new Set(['onActiveChange', 'onCheckedChange', 'onOpenChange', 'onValueChange']);
+export const auditReactProps = (host, props) => {
+    if (audited.has(host)) {
+        return;
+    }
+    audited.add(host);
+    const tag = host instanceof Element ? `<${host.localName}>` : 'A Helix element';
+    const element = host instanceof Element ? host.localName : undefined;
+    for (const key of Object.keys(props)) {
+        if (key.startsWith('on:')) {
+            reportRuntime({
+                kind: 'solid-handler-syntax',
+                message: `${tag} was given \`${key}\`, which is Solid's syntax. React binds the name after \`on\` ` +
+                    `verbatim, so this listens for an event called \`${key.slice(2)}\`. Write \`on${key.slice(3)}\`.`,
+                tag: element,
+            });
+            continue;
+        }
+        if (REMOVED.has(key)) {
+            reportRuntime({
+                kind: 'removed-callback',
+                message: `${tag} was given \`${key}\`, which was removed. It never worked from JSX, because React ` +
+                    `binds any \`on\` prop as an event of that name. Listen for the element's change event instead.`,
+                tag: element,
+            });
+            continue;
+        }
+        if (!key.startsWith('on') || !key.includes('-')) {
+            continue;
+        }
+        const name = key.slice(2);
+        if (!helixEventNames.has(name)) {
+            reportRuntime({
+                kind: 'unknown-event',
+                message: `${tag} was given \`${key}\`, and nothing dispatches \`${name}\`. TypeScript cannot ` +
+                    `check a hyphenated JSX prop, so this is the only place it shows up.`,
+                tag: element,
+            });
+            continue;
+        }
+        const mine = host instanceof Element ? eventsForTag(host.localName) : undefined;
+        if (mine && !mine.has(name)) {
+            reportRuntime({
+                kind: 'misplaced-handler',
+                message: `${tag} was given \`${key}\`, but it dispatches ${[...mine].map((one) => `\`${one}\``).join(', ')}. ` +
+                    `\`${name}\` is sent by a different element, and React only wires an \`on\` prop on the ` +
+                    'element that dispatches, so this handler will never run. Put it on that element.',
+                tag: element,
+            });
+        }
+    }
+};

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

@@ -1,26 +1,6 @@
 import type { LitElement } from 'lit';
 /** The props React is holding for a node, if React is holding any. */
 export declare const reactPropsOf: (node: EventTarget) => Record<string, unknown> | undefined;
-/**
- * Says so when a handler prop is attached to nothing.
- *
- * **TypeScript will not catch any of this, and that is not our tooling's
- * fault.** A JSX attribute whose name is not a valid identifier is exempt from
- * checking on an intrinsic element, and every one of ours carries a hyphen. So
- * `onhelix-opne` type-checks, `on:helix-open` type-checks, and a made-up
- * `totally-invented` prop type-checks, all against fully generated types that
- * do reject a wrong *value* on a normal attribute. Measured with `tsc`.
- *
- * That leaves runtime as the only place a typo can be caught, and React's props
- * bag as the only place to look, which the binding above already reads. Once per
- * element, because a warning that repeats on every keystroke is one a consumer
- * silences.
- *
- * `on:helix-open` gets its own message because it is not a mistake so much as
- * the wrong dialect. It is what the Solid types offer, correctly, and React
- * binds it as an event named `:helix-open`.
- */
-export declare const auditReactProps: (host: EventTarget, props: Record<string, unknown>) => void;
 /**
  * The prop React would be holding for this event, if it is holding one.
  *
@@ -83,8 +63,8 @@ export declare const reactNativeProp: (type: string) => string;
  *
  * Called by the host as it dispatches, which is the first moment it knows the
  * event's name. A host React does not render holds no props, and nothing is
- * bound. The props are audited on the way, so a handler attached to nothing
- * warns.
+ * bound. In a development build the props are audited on the way, so a
+ * handler attached to nothing warns; see `react-audit.ts`.
  */
 export declare const bindReactHandler: (host: EventTarget, event: Event) => void;
 /**