@satinhq/kit 0.0.0-stage → 0.1.0-beta.1

package/dist/list-form/Toggle.js

@@ -0,0 +1,204 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { SensoryButton } from '../haptics/SensoryButton.js';
+import { ControlLens, trackThumbContact } from '../glass/ControlLens.js';
+import { CONTROL_LIFT, controlLensSize } from '../glass/lens/controlLift.js';
+import { requestGlassSourceDamage } from '../glass/sourceDamage.js';
+import { ownPhysicalContact, retirePhysicalContact, TOGGLE_CONTACT_CLICK_WINDOW_MS, } from '../press/contactReceipt.js';
+import { TOGGLE_TRAVEL_PT, ToggleContact } from './toggleContact.js';
+import { RowLabelBody } from './RowLabel.js';
+/** The lens element overhangs the 63 × 44 pt switch so the held lens (and its press overshoot)
+ * fits at either end of the travel, with room below for its exterior shadow. */
+const LENS_OVERHANG_PT = 11;
+const LENS_OVERHANG_Y_PT = 8;
+const SWITCH_HEIGHT_PT = 44;
+/** Thumb centre at the off end: 2 pt inset plus half the 37 pt resting thumb. */
+const THUMB_OFF_CENTER_PT = 2 + CONTROL_LIFT.rest.width / 2;
+const now = () => performance.timeOrigin + performance.now();
+export function Toggle(props) {
+    return _jsx(ToggleControl, { ...props });
+}
+export function ToggleRow({ label, subtitle, checked, onChange, disabled = false, leading, style, }) {
+    return (_jsx(ToggleControl, { row: true, style: style, label: label, subtitle: subtitle, leading: leading, disabled: disabled, checked: checked, onChange: onChange }));
+}
+function ToggleControl({ checked, onChange, disabled = false, label, subtitle, row = false, leading, tint, style, }) {
+    const labelId = useId();
+    const subtitleId = useId();
+    const contactOwner = useRef({}).current;
+    const lens = useRef(null);
+    const thumb = useRef(null);
+    const latest = useRef({ checked, onChange });
+    latest.current = { checked, onChange };
+    const [contact] = useState(() => new ToggleContact(checked, now()));
+    const [lensActive, setLensActive] = useState(false);
+    const frame = useRef(0);
+    /** What the renderer was last told. A shown lens (lifted or restoring) follows the thumb. */
+    const lensPhase = useRef('hidden');
+    const lensCenter = useRef(0);
+    const endListeners = useRef(undefined);
+    function paint(state) {
+        const element = thumb.current;
+        if (!element)
+            return;
+        const size = controlLensSize('toggle', state.lift);
+        const center = LENS_OVERHANG_PT + THUMB_OFF_CENTER_PT + state.position * TOGGLE_TRAVEL_PT;
+        element.style.left = `${center - size.width / 2}px`;
+        element.style.top = `${LENS_OVERHANG_Y_PT + (SWITCH_HEIGHT_PT - size.height) / 2}px`;
+        element.style.width = `${size.width}px`;
+        element.style.height = `${size.height}px`;
+        element.style.borderRadius = `${size.height / 2}px`;
+        // The white thumb gives way to the lens as it grows (the same spring drives both).
+        element.style.opacity = `${1 - Math.min(1, Math.max(0, state.lift))}`;
+        const moved = lensCenter.current !== center;
+        lensCenter.current = center;
+        if (moved && lensPhase.current !== 'hidden')
+            lens.current?.interact('dragging', center, now());
+    }
+    function tick() {
+        frame.current = 0;
+        const at = now();
+        // Lift only once the renderer has the lens: glass shows in the lift's first frame.
+        const lifting = contact.liftDue(at) && !!lens.current?.ready;
+        if (lifting)
+            contact.lift(at);
+        paint(contact.sample(at));
+        // Sent after this frame's paint, so no later-stamped centre update precedes it.
+        if (lifting) {
+            lensPhase.current = 'lifted';
+            lens.current?.interact('pressed', lensCenter.current, at);
+        }
+        if (contact.needsFrame) {
+            frame.current = requestAnimationFrame(tick);
+            return;
+        }
+        // A settled hold keeps its lens. Input wakes this same transaction when the finger moves.
+        if (contact.active)
+            return;
+        if (lensPhase.current !== 'hidden')
+            lens.current?.interact('rest', lensCenter.current, now());
+        lensPhase.current = 'hidden';
+        setLensActive(false);
+    }
+    /** The contact ended: the lens restores with the control's release spring from `at`. */
+    function releaseLens(at) {
+        if (lensPhase.current !== 'lifted' || contact.isLifted)
+            return;
+        lensPhase.current = 'restoring';
+        lens.current?.interact('releasing', lensCenter.current, at);
+    }
+    function schedule() {
+        if (!frame.current)
+            frame.current = requestAnimationFrame(tick);
+    }
+    /** Input paints in its own event, so the thumb never trails the finger by a frame. */
+    function paintNow() {
+        cancelAnimationFrame(frame.current);
+        tick();
+    }
+    // The thumb's geometry is written here, never by React, so a re-render cannot jump it.
+    const mounted = useRef(false);
+    useLayoutEffect(() => {
+        contact.reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        contact.setChecked(checked, now(), mounted.current);
+        // Without a track transition there is no transitionend to recapture on.
+        const visual = thumb.current?.closest('[data-satin-toggle]');
+        if (mounted.current && contact.reducedMotion && visual)
+            requestGlassSourceDamage(visual);
+        mounted.current = true;
+        paint(contact.sample(now()));
+        if (contact.needsFrame)
+            schedule();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked]);
+    useEffect(() => {
+        const visual = thumb.current?.closest('[data-satin-toggle]');
+        if (!visual)
+            return;
+        // The lens and other glass sample the track: recapture it once its colour has settled.
+        const settled = (event) => {
+            const transition = event;
+            if (transition.pseudoElement === '::before' && transition.propertyName === 'background-color')
+                requestGlassSourceDamage(visual);
+        };
+        visual.addEventListener('transitionend', settled);
+        return () => visual.removeEventListener('transitionend', settled);
+    }, []);
+    useEffect(() => () => {
+        cancelAnimationFrame(frame.current);
+        endListeners.current?.();
+        retirePhysicalContact(document, contactOwner);
+    }, [contactOwner]);
+    function begin(event) {
+        if (disabled || event.button !== 0 || contact.active)
+            return;
+        // In a row only the switch itself drags; the label keeps its tap.
+        if (row && !(event.target instanceof Element && event.target.closest('[data-satin-toggle]')))
+            return;
+        // Ancestor row actions must not press with the switch. WebKit still owns native pan-y.
+        event.stopPropagation();
+        // A sheet switch owns its whole contact, including vertical travel.
+        const ownsVertical = !!event.currentTarget.closest('[data-satin-presentation="sheet"]');
+        const labelElement = event.currentTarget;
+        const pointerId = event.pointerId;
+        let ended = false;
+        // The finger arrives through the one contact path of interactive glass. A scroll that claims
+        // the touch before the thumb drags cancels it; a dragging thumb (or a sheet's) keeps it.
+        const finger = trackThumbContact(event.nativeEvent, {
+            move(x, y) {
+                if (contact.move(pointerId, x, y, now()) === 'vertical')
+                    finish();
+                paintNow();
+            },
+            up(x, y) {
+                const at = now();
+                // The release position is the contact's last sample.
+                contact.move(pointerId, x, y, at);
+                const result = contact.up(pointerId, at);
+                releaseLens(at);
+                finish();
+                if (!result)
+                    return;
+                // Every physical release commits here, whether or not WebKit later generates a click.
+                ownPhysicalContact(document, contactOwner, TOGGLE_CONTACT_CLICK_WINDOW_MS, {
+                    pointerId,
+                    nativeLabel: result.dragged ? undefined : labelElement,
+                });
+                if (result.value !== latest.current.checked)
+                    latest.current.onChange(result.value);
+            },
+            cancel(end) {
+                finish();
+                if (end === 'cancel')
+                    retirePhysicalContact(document, contactOwner);
+            },
+            yields: () => !ownsVertical && !contact.dragging,
+        });
+        if (!finger)
+            return;
+        contact.reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        contact.down(pointerId, event.clientX, event.clientY, latest.current.checked, now(), ownsVertical);
+        setLensActive(true);
+        function finish() {
+            if (ended)
+                return;
+            ended = true;
+            const at = now();
+            contact.cancel(at);
+            releaseLens(at);
+            endListeners.current?.();
+            paintNow();
+        }
+        endListeners.current = () => {
+            endListeners.current = undefined;
+            finger.end('rest');
+        };
+        schedule();
+    }
+    const switchVisual = (_jsx(ControlLens, { kind: "toggle", active: lensActive, handle: lens, children: _jsx("span", { ref: thumb, "data-satin-toggle-thumb": "true" }) }));
+    return (_jsx(SensoryButton, { style: {
+            ...(tint ? { '--satin-list-accent': tint, '--satin-list-toggle-on': tint } : {}),
+            ...style,
+        }, role: "switch", "aria-checked": checked, "aria-label": row ? undefined : label, "aria-labelledby": row ? labelId : undefined, "aria-describedby": row && subtitle !== undefined ? subtitleId : undefined, disabled: disabled, "data-satin-row": row ? 'true' : undefined, "data-satin-row-disabled": row && disabled ? 'true' : undefined, "data-satin-toggle-row": row ? 'true' : undefined, "data-satin-row-intrinsic": row ? undefined : 'true', "data-satin-toggle": row ? undefined : 'true', "data-satin-horizontal-drag": !row && !disabled ? 'both' : undefined, "data-checked": checked, onPointerDown: begin, onPress: () => {
+            onChange(!checked);
+        }, children: row ? (_jsxs(_Fragment, { children: [_jsx("span", { "data-satin-row-leading": "true", children: leading }), subtitle === undefined ? (_jsx("span", { id: labelId, "data-satin-row-label": "true", children: _jsx("span", { "data-satin-row-text": "true", children: label }) })) : (_jsx("span", { "data-satin-row-label": "true", children: _jsx(RowLabelBody, { titleId: labelId, detailId: subtitleId, detail: subtitle, children: label }) })), _jsx("span", { "data-satin-row-trailing": "true", children: _jsx("span", { "data-satin-toggle": "true", "data-checked": checked, "data-satin-horizontal-drag": !disabled ? 'both' : undefined, children: switchVisual }) })] })) : (switchVisual) }));
+}

package/dist/list-form/editMotion.d.ts

@@ -0,0 +1,15 @@
+import type { SpringParameters } from '../motion/springTrack.js';
+export declare const EDIT_MODE_SPRING: SpringParameters;
+/** Width of each leading editing control's column: the delete and selection circles. */
+export declare const EDIT_CONTROL_COLUMN = 40;
+/** Space the reorder handle takes from the row's trailing content (21 pt handle and its gap). */
+export declare const REORDER_HANDLE_INSET = 32;
+/** How far the reorder handle travels as it appears. */
+export declare const REORDER_HANDLE_TRAVEL = 44;
+/**
+ * Rows a dragged row crosses move out of its way on this spring (`native editing fixture` held drag, one
+ * crossing, 17 refreshes, RMS 0.49 pt). The dropped row settles on it too.
+ */
+export declare const REORDER_SPRING: SpringParameters;
+/** The lifted row's shadow fades over this long after the drop (33 refreshes). */
+export declare const REORDER_DROP_SHADOW_MS = 550;

package/dist/list-form/editMotion.js

@@ -0,0 +1,25 @@
+/*
+ * Edit mode's row motion, measured from a stock SwiftUI `List` with `onDelete` and `onMove`
+ * (iOS 27.0 Simulator, native reference `native list editing fixture native editing fixture`, five Edit/Done toggles, frame counter
+ * retimed: 0 skipped refreshes of 922; fits in native measurements).
+ *
+ * - The content shifts by the controls' width on one critically damped spring in both directions
+ *   (response 0.29 s; RMS 0.32 pt entering, 0.43 pt leaving).
+ * - The delete and selection controls ride with the content, clipped by the row, and fade with
+ *   the same progress (opacity tracked position within 0.02).
+ * - The reorder handle slides in from 44 pt beyond its place and fades on the same spring.
+ */
+export const EDIT_MODE_SPRING = { stiffness: 474, damping: 43.5 };
+/** Width of each leading editing control's column: the delete and selection circles. */
+export const EDIT_CONTROL_COLUMN = 40;
+/** Space the reorder handle takes from the row's trailing content (21 pt handle and its gap). */
+export const REORDER_HANDLE_INSET = 32;
+/** How far the reorder handle travels as it appears. */
+export const REORDER_HANDLE_TRAVEL = 44;
+/**
+ * Rows a dragged row crosses move out of its way on this spring (`native editing fixture` held drag, one
+ * crossing, 17 refreshes, RMS 0.49 pt). The dropped row settles on it too.
+ */
+export const REORDER_SPRING = { stiffness: 332, damping: 30.6 };
+/** The lifted row's shadow fades over this long after the drop (33 refreshes). */
+export const REORDER_DROP_SHADOW_MS = 550;

package/dist/list-form/editing.d.ts

@@ -0,0 +1,102 @@
+import { type ReactNode } from 'react';
+import type { RowActionsProps } from '../actions/types.js';
+/** `EditMode`: whether a screen's lists show their editing controls. */
+export type EditMode = 'inactive' | 'active';
+/** A row's identity in `List` selection: the `ForEach` id. */
+export type ListItemID = string | number;
+/**
+ * Every navigation destination owns one edit mode, as a SwiftUI `NavigationStack` destination does:
+ * its `EditButton` and its lists read and write the same value, and another screen keeps its own.
+ */
+export declare function EditModeScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * `@Environment(\.editMode)`: this screen's edit mode and a setter. `EditButton` toggles
+ * the same value, so a toolbar or bottom bar can follow it.
+ *
+ * @example
+ * const [editMode] = useEditMode()
+ * const editing = editMode === 'active'
+ */
+export declare function useEditMode(): readonly [EditMode, (next: EditMode) => void];
+/** `List` selection as the rows see it. */
+export type ListSelectionModel = Readonly<{
+    /** `single` selects one row (an optional binding); `multiple` collects a set. */
+    mode: 'single' | 'multiple';
+    isSelected(id: ListItemID): boolean;
+    /** A row tap: replaces a single selection; toggles a set only while editing, as SwiftUI does. */
+    activate(id: ListItemID, editing: boolean): void;
+}>;
+export declare const ListSelectionContext: import("react").Context<Readonly<{
+    /** `single` selects one row (an optional binding); `multiple` collects a set. */
+    mode: 'single' | 'multiple';
+    isSelected(id: ListItemID): boolean;
+    /** A row tap: replaces a single selection; toggles a set only while editing, as SwiftUI does. */
+    activate(id: ListItemID, editing: boolean): void;
+}> | null>;
+/**
+ * The collection, how to identify each element, the row each element becomes and its editing
+ * actions. `id` may be omitted when the elements have an `id` field.
+ */
+export type ForEachProps<T> = {
+    data: readonly T[];
+    children: (item: T, offset: number) => ReactNode;
+    /** `onDelete`: the offsets into `data` of the rows to delete. */
+    onDelete?: (offsets: number[]) => void;
+    /** `onMove`: the moved offsets and where they go, both counted in `data` before the move. */
+    onMove?: (fromOffsets: number[], toOffset: number) => void;
+} & (T extends {
+    id: ListItemID;
+} ? {
+    id?: (item: T) => ListItemID;
+} : {
+    id: (item: T) => ListItemID;
+});
+/** The `ForEach` modifiers that make its rows editable. */
+export type ForEachEditing = Readonly<Pick<ForEachProps<{
+    id: ListItemID;
+}>, 'onDelete' | 'onMove'>>;
+/**
+ * `ForEach`: one row per element of `data`, identified by its `id` (or `id` function). In a
+ * `List`, `onDelete` adds swipe-to-delete and the editing delete control; `onMove` adds the
+ * reorder handle. Both receive offsets into `data`; apply them with `removing` and
+ * `moving`.
+ *
+ * Put `ForEach` directly in a `List` or `Section`: the list reads it to know each row's identity.
+ *
+ * @example
+ * <ForEach data={notes} onDelete={offsets => setNotes(notes => removing(notes, offsets))}>
+ *   {note => <NavigationLink to="note" params={{ id: note.id }}>{note.title}</NavigationLink>}
+ * </ForEach>
+ */
+export declare function ForEach<T>(props: ForEachProps<T>): import("react").JSX.Element;
+/** One expanded `ForEach` element: its rendered row and where it sits in `data`. */
+export type ForEachRow = Readonly<{
+    key: string;
+    id: ListItemID;
+    offset: number;
+    child: ReactNode;
+}>;
+export declare function forEachRows<T>(props: ForEachProps<T>): ForEachRow[];
+/** What an editable row needs from its list item: edit state, selection and the item's actions. */
+export type ListItemState = Readonly<{
+    editing: boolean;
+    /** While editing with a selection, a row's own press selects it, as a SwiftUI list row does. */
+    pressSelects: boolean;
+    select(): void;
+    /** Rows that also declare actions hand them to the item, which owns the row's one gesture host. */
+    delegateActions?: (actions: RowActionsDelegation | undefined) => void;
+}>;
+/** A row's own swipe actions, context menu and disabled state, handed to its list item. */
+export type RowActionsDelegation = RowActionsProps & Readonly<{
+    disabled?: boolean;
+}>;
+export declare const ListItemContext: import("react").Context<Readonly<{
+    editing: boolean;
+    /** While editing with a selection, a row's own press selects it, as a SwiftUI list row does. */
+    pressSelects: boolean;
+    select(): void;
+    /** Rows that also declare actions hand them to the item, which owns the row's one gesture host. */
+    delegateActions?: (actions: RowActionsDelegation | undefined) => void;
+}> | null>;

package/dist/list-form/editing.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, Fragment, useContext, useMemo, useState } from 'react';
+const inactiveEverywhere = ['inactive', () => { }];
+const EditModeContext = createContext(inactiveEverywhere);
+/**
+ * Every navigation destination owns one edit mode, as a SwiftUI `NavigationStack` destination does:
+ * its `EditButton` and its lists read and write the same value, and another screen keeps its own.
+ */
+export function EditModeScope({ children }) {
+    const [editMode, setEditMode] = useState('inactive');
+    const binding = useMemo(() => [editMode, setEditMode], [editMode]);
+    return _jsx(EditModeContext, { value: binding, children: children });
+}
+/**
+ * `@Environment(\.editMode)`: this screen's edit mode and a setter. `EditButton` toggles
+ * the same value, so a toolbar or bottom bar can follow it.
+ *
+ * @example
+ * const [editMode] = useEditMode()
+ * const editing = editMode === 'active'
+ */
+export function useEditMode() {
+    return useContext(EditModeContext);
+}
+export const ListSelectionContext = createContext(null);
+/**
+ * `ForEach`: one row per element of `data`, identified by its `id` (or `id` function). In a
+ * `List`, `onDelete` adds swipe-to-delete and the editing delete control; `onMove` adds the
+ * reorder handle. Both receive offsets into `data`; apply them with `removing` and
+ * `moving`.
+ *
+ * Put `ForEach` directly in a `List` or `Section`: the list reads it to know each row's identity.
+ *
+ * @example
+ * <ForEach data={notes} onDelete={offsets => setNotes(notes => removing(notes, offsets))}>
+ *   {note => <NavigationLink to="note" params={{ id: note.id }}>{note.title}</NavigationLink>}
+ * </ForEach>
+ */
+export function ForEach(props) {
+    // Outside a List, a ForEach is only its rows. Inside one, the List expands it itself.
+    return (_jsx(_Fragment, { children: forEachRows(props).map(row => (_jsx(Fragment, { children: row.child }, row.key))) }));
+}
+export function forEachRows(props) {
+    const identify = props.id ??
+        ((item) => item.id);
+    return props.data.map((item, offset) => {
+        const id = identify(item);
+        return { key: `${typeof id}:${id}`, id, offset, child: props.children(item, offset) };
+    });
+}
+export const ListItemContext = createContext(null);

package/dist/list-form/listContext.d.ts

@@ -0,0 +1,4 @@
+/** Shared by controls that adopt native row presentation inside a List or Form. */
+export declare const ListContext: import("react").Context<boolean>;
+/** Inside custom ListRow content: the row owns its insets and cell, so fields inside are plain. */
+export declare const ListRowContentContext: import("react").Context<boolean>;

package/dist/list-form/listContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+/** Shared by controls that adopt native row presentation inside a List or Form. */
+export const ListContext = createContext(false);
+/** Inside custom ListRow content: the row owns its insets and cell, so fields inside are plain. */
+export const ListRowContentContext = createContext(false);

package/dist/list-form/offsets.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Returns a new array: the elements at `fromOffsets` move,
+ * in their original order, to just before the element that was at `toOffset`. Pass it exactly
+ * what `ForEach`'s `onMove` reports.
+ *
+ * `toOffset` counts positions in the original array: moving the first of three
+ * rows below the second reports `toOffset` 2, not 1. Use `items.length` to move to the end.
+ *
+ * @example
+ * <ForEach
+ *   data={todos}
+ *   onMove={(from, to) => setTodos(todos => moving(todos, { fromOffsets: from, toOffset: to }))}
+ * >
+ */
+export declare function moving<T>(items: readonly T[], { fromOffsets, toOffset }: {
+    fromOffsets: readonly number[];
+    toOffset: number;
+}): T[];
+/**
+ * Swift `remove(atOffsets:)`, returning a new array without the elements at `offsets`. Pass it
+ * exactly what `ForEach`'s `onDelete` reports.
+ *
+ * @example
+ * <ForEach data={todos} onDelete={offsets => setTodos(todos => removing(todos, offsets))}>
+ */
+export declare function removing<T>(items: readonly T[], offsets: readonly number[]): T[];

package/dist/list-form/offsets.js

@@ -0,0 +1,34 @@
+/**
+ * Returns a new array: the elements at `fromOffsets` move,
+ * in their original order, to just before the element that was at `toOffset`. Pass it exactly
+ * what `ForEach`'s `onMove` reports.
+ *
+ * `toOffset` counts positions in the original array: moving the first of three
+ * rows below the second reports `toOffset` 2, not 1. Use `items.length` to move to the end.
+ *
+ * @example
+ * <ForEach
+ *   data={todos}
+ *   onMove={(from, to) => setTodos(todos => moving(todos, { fromOffsets: from, toOffset: to }))}
+ * >
+ */
+export function moving(items, { fromOffsets, toOffset }) {
+    const moved = new Set(fromOffsets);
+    const kept = items.filter((_, offset) => !moved.has(offset));
+    const movedItems = items.filter((_, offset) => moved.has(offset));
+    // Every moved element that sat above the destination leaves a gap, so the destination shifts up.
+    const movedAbove = [...moved].filter(offset => offset < toOffset).length;
+    kept.splice(toOffset - movedAbove, 0, ...movedItems);
+    return kept;
+}
+/**
+ * Swift `remove(atOffsets:)`, returning a new array without the elements at `offsets`. Pass it
+ * exactly what `ForEach`'s `onDelete` reports.
+ *
+ * @example
+ * <ForEach data={todos} onDelete={offsets => setTodos(todos => removing(todos, offsets))}>
+ */
+export function removing(items, offsets) {
+    const removed = new Set(offsets);
+    return items.filter((_, offset) => !removed.has(offset));
+}

package/dist/list-form/reorder.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Drag-to-reorder for one `ForEach` in a section, started from a row's reorder handle.
+ *
+ * The lifted row follows the finger, unscaled, with a soft shadow; the rows it crosses slide out
+ * of its way on the measured spring. Releasing settles the row into its slot and reports one move;
+ * a cancelled contact puts every row back and reports nothing. Native lets a dragged row cross a
+ * `moveDisabled` row (the disabled row only lacks a handle), so every row of the group is a slot.
+ */
+export type ReorderDrag = Readonly<{
+    cancel(): void;
+}>;
+export declare function startReorderDrag({ item, pointer, onCommit, onEnd, }: {
+    item: HTMLElement;
+    pointer: PointerEvent;
+    /** The dragged row's index and its destination index among the group's rows. */
+    onCommit(from: number, to: number): void;
+    onEnd(): void;
+}): ReorderDrag;
+/** Clears the transforms a drag left once the list has rendered its new order. */
+export declare function resetReorderTransforms(parent: Element): void;