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

package/dist/list-form/reorder.js

@@ -0,0 +1,193 @@
+import { animateElement } from '../motion/animate.js';
+import { isRowMove } from './rowMotion.js';
+import { sampledKeyframes, springMotion, springTrack } from '../motion/springTrack.js';
+import { REORDER_DROP_SHADOW_MS, REORDER_SPRING } from './editMotion.js';
+/** Distance from the scroll view's edge where a held row starts scrolling it, and the top speed. */
+const AUTOSCROLL_EDGE = 60;
+const AUTOSCROLL_MAX_SPEED = 12;
+export function startReorderDrag({ item, pointer, onCommit, onEnd, }) {
+    const group = item.dataset.satinReorderGroup;
+    const slots = [...(item.parentElement?.children ?? [])]
+        .filter((element) => element instanceof HTMLElement && element.dataset.satinReorderGroup === group)
+        .map(element => {
+        element.getAnimations().forEach(animation => animation.cancel());
+        element.style.transform = '';
+        const rect = element.getBoundingClientRect();
+        return { element, top: rect.top, height: rect.height, shift: 0 };
+    });
+    const from = slots.findIndex(slot => slot.element === item);
+    const dragged = slots[from];
+    const scroller = item.closest('[data-satin-scroll]');
+    const startScroll = scroller?.scrollTop ?? 0;
+    let pointerY = pointer.clientY;
+    let offset = 0;
+    let to = from;
+    let frame = 0;
+    let finished = false;
+    item.dataset.satinReorderLifted = 'true';
+    const scrolled = () => (scroller?.scrollTop ?? 0) - startScroll;
+    const place = () => {
+        const first = slots[0];
+        const last = slots[slots.length - 1];
+        const raw = pointerY - pointer.clientY + scrolled();
+        offset = Math.min(Math.max(raw, first.top - dragged.top), last.top + last.height - (dragged.top + dragged.height));
+        item.style.transform = `translate3d(0, ${offset}px, 0)`;
+        to = destinationIndex(slots, from, dragged.top + offset + dragged.height / 2);
+        slots.forEach((slot, index) => {
+            if (index === from)
+                return;
+            const shift = from < to && index > from && index <= to
+                ? -dragged.height
+                : to < from && index >= to && index < from
+                    ? dragged.height
+                    : 0;
+            if (shift !== slot.shift)
+                slideTo(slot, shift);
+        });
+    };
+    const autoscroll = () => {
+        frame = 0;
+        if (!scroller || finished)
+            return;
+        const bounds = scroller.getBoundingClientRect();
+        const speed = pointerY < bounds.top + AUTOSCROLL_EDGE
+            ? -edgeSpeed(bounds.top + AUTOSCROLL_EDGE - pointerY)
+            : pointerY > bounds.bottom - AUTOSCROLL_EDGE
+                ? edgeSpeed(pointerY - (bounds.bottom - AUTOSCROLL_EDGE))
+                : 0;
+        if (!speed)
+            return;
+        scroller.scrollTop += speed;
+        place();
+        frame = requestAnimationFrame(autoscroll);
+    };
+    const move = (event) => {
+        if (event.pointerId !== pointer.pointerId)
+            return;
+        event.preventDefault();
+        pointerY = event.clientY;
+        place();
+        if (!frame)
+            frame = requestAnimationFrame(autoscroll);
+    };
+    const finish = (commit) => {
+        if (finished)
+            return;
+        finished = true;
+        cancelAnimationFrame(frame);
+        window.removeEventListener('pointermove', move, true);
+        window.removeEventListener('pointerup', release, true);
+        window.removeEventListener('pointercancel', cancelContact, true);
+        const destination = commit ? to : from;
+        const target = commit ? slotOffset(slots, from, to) : 0;
+        if (!commit)
+            slots.forEach((slot, index) => index !== from && slideTo(slot, 0));
+        const settle = settleTo(item, offset, target);
+        fadeShadow(item);
+        void settle.finished.then(() => {
+            delete item.dataset.satinReorderLifted;
+            if (destination !== from)
+                onCommit(from, destination);
+            else
+                resetSlots(slots);
+            onEnd();
+        }, () => { });
+    };
+    const release = (event) => {
+        if (event.pointerId === pointer.pointerId)
+            finish(true);
+    };
+    const cancelContact = (event) => {
+        if (event.pointerId === pointer.pointerId)
+            finish(false);
+    };
+    window.addEventListener('pointermove', move, true);
+    window.addEventListener('pointerup', release, true);
+    window.addEventListener('pointercancel', cancelContact, true);
+    return {
+        cancel() {
+            if (finished)
+                return;
+            finish(false);
+        },
+    };
+}
+/** Clears the transforms a drag left once the list has rendered its new order. */
+export function resetReorderTransforms(parent) {
+    parent.querySelectorAll(':scope > [data-satin-reorder-group]').forEach(element => {
+        element
+            .getAnimations()
+            .filter(animation => !isRowMove(animation))
+            .forEach(animation => animation.cancel());
+        element.style.transform = '';
+    });
+}
+function resetSlots(slots) {
+    for (const slot of slots) {
+        slot.element.getAnimations().forEach(animation => animation.cancel());
+        slot.element.style.transform = '';
+        slot.shift = 0;
+    }
+}
+/** The slot whose midpoint the dragged row's centre has crossed. */
+function destinationIndex(slots, from, centre) {
+    let to = from;
+    for (let index = from + 1; index < slots.length; index++) {
+        if (centre > slots[index].top + slots[index].height / 2)
+            to = index;
+    }
+    for (let index = from - 1; index >= 0; index--) {
+        if (centre < slots[index].top + slots[index].height / 2)
+            to = index;
+    }
+    return to;
+}
+/** How far the dragged row moves to sit in slot `to` once the rows between have made room. */
+function slotOffset(slots, from, to) {
+    if (to > from)
+        return slots[to].top + slots[to].height - (slots[from].top + slots[from].height);
+    if (to < from)
+        return slots[to].top - slots[from].top;
+    return 0;
+}
+function edgeSpeed(depth) {
+    return Math.min(AUTOSCROLL_MAX_SPEED, (depth / AUTOSCROLL_EDGE) * AUTOSCROLL_MAX_SPEED);
+}
+/** Moves a crossed row to its new shift from wherever it is now drawn. */
+function slideTo(slot, shift) {
+    const presented = presentedOffset(slot.element);
+    slot.element.getAnimations().forEach(animation => animation.cancel());
+    slot.shift = shift;
+    slot.element.style.transform = shift ? `translate3d(0, ${shift}px, 0)` : '';
+    if (presented === shift)
+        return;
+    const track = springTrack(springMotion(REORDER_SPRING));
+    animateElement(slot.element, sampledKeyframes(track, progress => ({
+        transform: `translate3d(0, ${presented + (shift - presented) * progress}px, 0)`,
+    })), { duration: track.duration });
+}
+function settleTo(item, from, to) {
+    const track = springTrack(springMotion(REORDER_SPRING));
+    item.style.transform = `translate3d(0, ${to}px, 0)`;
+    return animateElement(item, sampledKeyframes(track, progress => ({
+        transform: `translate3d(0, ${from + (to - from) * progress}px, 0)`,
+    })), { duration: track.duration });
+}
+/** The lifted shadow is a CSS custom property's opacity, so it fades without repainting text. */
+function fadeShadow(item) {
+    item.dataset.satinReorderDropping = 'true';
+    const animation = animateElement(item, [{ opacity: 1 }, { opacity: 0 }], {
+        duration: REORDER_DROP_SHADOW_MS,
+        easing: 'ease-out',
+        pseudoElement: '::before',
+    });
+    const done = () => delete item.dataset.satinReorderDropping;
+    void animation.finished.then(done, done);
+}
+/** The vertical translation a running animation currently draws. */
+function presentedOffset(element) {
+    const transform = getComputedStyle(element).transform;
+    if (!transform || transform === 'none')
+        return 0;
+    return new DOMMatrixReadOnly(transform).m42;
+}

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

@@ -0,0 +1,11 @@
+import { Animation } from '../motion/animationValue.js';
+/** Default List sort fit, iOS 27.0: omega 19.8556, damping ratio 0.94512.
+ * 41 native refresh-counter samples over a 330 pt move; RMS 1.40 pt. */
+export declare const LIST_MOVE_ANIMATION: Animation;
+type Rows = ReadonlyMap<string, HTMLElement>;
+/** Mark only the synchronous full-swipe transaction, including non-destructive removals. */
+export declare function markRowSwipeRemoval(element: HTMLElement): () => void;
+export declare function isRowMove(animation: globalThis.Animation): boolean;
+export declare function stopRowMoves(rows: Rows): void;
+export declare function registerRowMoves(readRows: () => Rows): () => void;
+export {};

package/dist/list-form/rowMotion.js

@@ -0,0 +1,236 @@
+import { animateElement } from '../motion/animate.js';
+import { Animation } from '../motion/animationValue.js';
+import { registerLayoutAnimation } from '../motion/layoutTransaction.js';
+import { runFrameTimes, sampleChannel } from '../motion/springPath.js';
+/** Default List sort fit, iOS 27.0: omega 19.8556, damping ratio 0.94512.
+ * 41 native refresh-counter samples over a 330 pt move; RMS 1.40 pt. */
+export const LIST_MOVE_ANIMATION = Animation.spring({
+    durationMs: (2 * Math.PI * 1000) / 19.85560151602657,
+    bounce: 1 - 0.9451210252171627,
+});
+const runs = new Map();
+const swipeRemovals = new WeakSet();
+/** Mark only the synchronous full-swipe transaction, including non-destructive removals. */
+export function markRowSwipeRemoval(element) {
+    const row = element.closest('[data-satin-section-item]');
+    if (row)
+        swipeRemovals.add(row);
+    return () => {
+        if (row)
+            swipeRemovals.delete(row);
+    };
+}
+const ownedAnimations = new WeakSet();
+export function isRowMove(animation) {
+    return ownedAnimations.has(animation);
+}
+function stop(element) {
+    const run = runs.get(element);
+    if (!run)
+        return;
+    run.motion.cancel();
+    run.finish();
+}
+export function stopRowMoves(rows) {
+    for (const element of rows.values())
+        stop(element);
+}
+/** Content coordinates keep scrolling independent of cell movement. */
+function position(element) {
+    const scroll = element.closest('[data-satin-scroll]');
+    return (element.getBoundingClientRect().top +
+        (scroll?.scrollTop ?? 0) -
+        (scroll?.getBoundingClientRect().top ?? 0));
+}
+export function registerRowMoves(readRows) {
+    const ownedElements = new Set();
+    const exits = new Map();
+    let mounted = true;
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const reduce = () => {
+        if (media.matches)
+            for (const element of ownedElements)
+                stop(element);
+    };
+    media.addEventListener('change', reduce);
+    const unregister = registerLayoutAnimation(() => {
+        const liveRows = new Map(readRows());
+        for (const [key, element] of exits) {
+            if (!liveRows.has(key))
+                liveRows.set(key, element);
+        }
+        const before = new Map([...liveRows].map(([key, element]) => {
+            const run = runs.get(element);
+            const time = Number(run?.motion.currentTime ?? 0);
+            const velocity = run ? sampleChannel(run.animation, run.channel, time).velocity : 0;
+            const visibility = run
+                ? run.targetVisibility + sampleChannel(run.animation, run.visibility, time).offset
+                : 1;
+            const visibilityVelocity = run
+                ? sampleChannel(run.animation, run.visibility, time).velocity
+                : 0;
+            const bounds = element.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            return [
+                key,
+                {
+                    element,
+                    clipExit: Boolean(run?.clipExit || swipeRemovals.has(element)),
+                    isRow: element.hasAttribute('data-satin-section-item'),
+                    top: position(element),
+                    left: bounds.left,
+                    width: bounds.width,
+                    height: bounds.height,
+                    velocity,
+                    visibility,
+                    visibilityVelocity,
+                    scroll: element.closest('[data-satin-scroll]'),
+                    look: {
+                        color: style.color,
+                        font: style.font,
+                        borderRadius: style.borderRadius,
+                        background: style.getPropertyValue('--satin-row-background') ||
+                            style.getPropertyValue('--satin-list-cell') ||
+                            style.backgroundColor,
+                    },
+                },
+            ];
+        }));
+        const beforeByElement = new Map([...before.values()].map(row => [row.element, row]));
+        return requestedAnimation => {
+            const animation = requestedAnimation === Animation.default ? LIST_MOVE_ANIMATION : requestedAnimation;
+            const rows = readRows();
+            const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            // The before snapshot includes the presented transform. Cancel as one batch, then
+            // read resting geometry as one batch; no spring approximation enters the layout delta.
+            for (const previous of before.values())
+                stop(previous.element);
+            for (const element of ownedElements)
+                stop(element);
+            ownedElements.clear();
+            exits.clear();
+            const targets = [...rows].map(([key, element]) => ({ key, element, top: position(element) }));
+            if (!animation || reduced || !mounted)
+                return;
+            for (const [key, previous] of before) {
+                if (!previous.isRow ||
+                    rows.has(key) ||
+                    previous.element.isConnected ||
+                    !previous.scroll?.isConnected)
+                    continue;
+                // A removed React subtree has already released its handlers and effects. Keep
+                // only its paint in an inert layer inside the same scrolling coordinate space.
+                const layer = previous.element.ownerDocument.createElement('div');
+                layer.setAttribute('data-satin-row-exit', 'true');
+                layer.setAttribute('aria-hidden', 'true');
+                layer.inert = true;
+                Object.assign(layer.style, {
+                    position: 'absolute',
+                    left: '0px',
+                    top: '0px',
+                    margin: '0px',
+                    width: `${previous.width}px`,
+                    height: `${previous.height}px`,
+                    pointerEvents: 'none',
+                    zIndex: '0',
+                    ...previous.look,
+                });
+                layer.append(previous.element);
+                const scrollContent = previous.scroll.querySelector('[data-satin-scroll-content]');
+                (scrollContent ?? previous.scroll).append(layer);
+                const placed = layer.getBoundingClientRect();
+                layer.style.left = `${previous.left - placed.left}px`;
+                layer.style.top = `${previous.top - position(layer)}px`;
+                Object.assign(previous.element.style, previous.look);
+                exits.set(key, previous.element);
+                targets.push({ key, element: previous.element, top: previous.top });
+            }
+            for (const { key, element, top } of targets) {
+                const previous = beforeByElement.get(element) ?? before.get(key);
+                if (!element.isConnected || (!previous && !element.hasAttribute('data-satin-section-item')))
+                    continue;
+                // A held reorder handle owns the entire group until its drag ends.
+                if (element.parentElement?.querySelector(':scope > [data-satin-reorder-lifted]'))
+                    continue;
+                const ghost = exits.has(key) ? element.parentElement : undefined;
+                const clipExit = Boolean(ghost && previous?.clipExit);
+                const targetVisibility = ghost ? 0 : 1;
+                const channel = {
+                    displacement: previous ? previous.top - top : 0,
+                    velocity: previous?.velocity ?? 0,
+                };
+                const visibility = {
+                    displacement: (previous?.visibility ?? 0) - targetVisibility,
+                    velocity: previous?.visibilityVelocity ?? 0,
+                };
+                if (Math.abs(channel.displacement) < 0.01 &&
+                    Math.abs(channel.velocity) < 0.01 &&
+                    Math.abs(visibility.displacement) < 0.001 &&
+                    Math.abs(visibility.velocity) < 0.001)
+                    continue;
+                // Clip settling is measured in points, just like the neighbouring row.
+                // A unit-opacity threshold would end the visible collapse too early.
+                const extent = clipExit ? previous.height : 1;
+                const times = runFrameTimes(animation, [
+                    channel,
+                    {
+                        displacement: visibility.displacement * extent,
+                        velocity: visibility.velocity * extent,
+                    },
+                ]);
+                const frames = times.map((ms, index) => {
+                    const visible = index === times.length - 1
+                        ? targetVisibility
+                        : Math.max(0, Math.min(1, targetVisibility + sampleChannel(animation, visibility, ms).offset));
+                    return {
+                        offset: index / (times.length - 1),
+                        transform: `translateY(${index === times.length - 1 ? 0 : sampleChannel(animation, channel, ms).offset}px)`,
+                        // Native full-swipe paint stays opaque while the neighbour clips its bottom.
+                        // Use the same List spring for that boundary, including the final row.
+                        opacity: clipExit ? 1 : visible,
+                        ...(clipExit ? { clipPath: `inset(0 0 ${100 * (1 - visible)}% 0)` } : {}),
+                    };
+                });
+                element.setAttribute('data-satin-row-moving', 'true');
+                const motion = animateElement(element, frames, {
+                    duration: times[times.length - 1],
+                    easing: 'linear',
+                    fill: ghost ? 'forwards' : 'none',
+                });
+                const run = {
+                    motion,
+                    animation,
+                    channel,
+                    visibility,
+                    clipExit,
+                    targetVisibility,
+                    finish,
+                };
+                runs.set(element, run);
+                ownedElements.add(element);
+                ownedAnimations.add(motion);
+                function finish() {
+                    if (runs.get(element) !== run)
+                        return;
+                    runs.delete(element);
+                    ownedElements.delete(element);
+                    element.removeAttribute('data-satin-row-moving');
+                    if (ghost) {
+                        ghost.remove();
+                        if (exits.get(key) === element)
+                            exits.delete(key);
+                    }
+                }
+                void motion.finished.then(finish, finish);
+            }
+        };
+    });
+    return () => {
+        mounted = false;
+        unregister();
+        media.removeEventListener('change', reduce);
+        for (const element of ownedElements)
+            stop(element);
+        ownedElements.clear();
+    };
+}

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

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+type Row = {
+    identity: string;
+    element: HTMLElement;
+};
+type Group = Map<string, Row>;
+export declare function RowMotionScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useRowMotionGroup(enabled: boolean): {
+    rows: Group;
+    settle: () => void;
+};
+export {};

package/dist/list-form/rowMotionScope.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo, useRef } from 'react';
+import { registerRowMoves, stopRowMoves } from './rowMotion.js';
+/** A List owns identity across sections. Repeated IDs remain local to their group. */
+function createScope() {
+    const groups = new Map();
+    let nextGroup = 0;
+    let unregister;
+    const readRows = () => {
+        const counts = new Map();
+        for (const group of groups.keys()) {
+            for (const row of group.values()) {
+                counts.set(row.identity, (counts.get(row.identity) ?? 0) + 1);
+            }
+        }
+        const rows = new Map();
+        for (const [group, groupID] of groups) {
+            for (const [key, row] of group) {
+                const identity = counts.get(row.identity) === 1
+                    ? JSON.stringify(['item', row.identity])
+                    : JSON.stringify(['group', groupID, key]);
+                rows.set(identity, row.element);
+            }
+        }
+        return rows;
+    };
+    return {
+        settle() {
+            unregister?.();
+            unregister = groups.size ? registerRowMoves(readRows) : undefined;
+        },
+        add(group) {
+            groups.set(group, nextGroup++);
+            unregister ??= registerRowMoves(readRows);
+            return () => {
+                stopRowMoves(new Map([...group].map(([key, row]) => [key, row.element])));
+                groups.delete(group);
+                if (!groups.size) {
+                    unregister?.();
+                    unregister = undefined;
+                }
+            };
+        },
+    };
+}
+const RowMotionContext = createContext(null);
+export function RowMotionScope({ children }) {
+    const scope = useMemo(createScope, []);
+    return _jsx(RowMotionContext, { value: scope, children: children });
+}
+export function useRowMotionGroup(enabled) {
+    const inherited = useContext(RowMotionContext);
+    const local = useMemo(createScope, []);
+    const rows = useRef(new Map());
+    const scope = inherited ?? local;
+    useLayoutEffect(() => {
+        if (enabled)
+            return scope.add(rows.current);
+    }, [enabled, scope]);
+    return { rows: rows.current, settle: scope.settle };
+}

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

@@ -0,0 +1,4 @@
+/** The divider begins at the label, including arbitrary leading accessories. */
+export declare function separatorInset(item: Pick<DOMRect, 'left' | 'right'>, label: Pick<DOMRect, 'left' | 'right'>, direction: string, resolution: number, editInset?: number): number;
+/** Resize notifications own geometry changes; scrolling does not remeasure rows. */
+export declare function observeSeparatorInsets(container: HTMLElement): () => void;

package/dist/list-form/separatorInsets.js

@@ -0,0 +1,87 @@
+/** The divider begins at the label, including arbitrary leading accessories. */
+export function separatorInset(item, label, direction, resolution, editInset = 0) {
+    const distance = (direction === 'rtl' ? item.right - label.right : label.left - item.left) - editInset;
+    const pixelRatio = Number.isFinite(resolution) && resolution > 0 ? resolution : 1;
+    return Math.max(0, Math.round(distance * pixelRatio) / pixelRatio);
+}
+/** Resize notifications own geometry changes; scrolling does not remeasure rows. */
+export function observeSeparatorInsets(container) {
+    const selector = '[data-satin-row-label], [data-satin-text-field], [data-satin-button-content]';
+    let labels = [];
+    const observed = new Set();
+    const discover = () => {
+        labels = Array.from(container.querySelectorAll(selector)).filter(label => label.closest('[data-satin-section-item]')?.querySelector(selector) === label);
+        const next = new Set([container]);
+        for (const label of labels) {
+            next.add(label);
+            const item = label.closest('[data-satin-section-item]');
+            if (item)
+                next.add(item);
+        }
+        for (const element of observed) {
+            if (!next.has(element))
+                observer.unobserve(element);
+        }
+        for (const element of next) {
+            if (!observed.has(element))
+                observer.observe(element);
+        }
+        observed.clear();
+        for (const element of next)
+            observed.add(element);
+    };
+    const update = () => {
+        for (const label of labels) {
+            // Pending growth and the lifted top-layer row both leave the section's layout space.
+            // Those rectangles no longer share a layout coordinate space. Keep the last
+            // in-flow inset instead of feeding the preview's scale back into the list.
+            if (label.closest('[data-satin-context-lift], [data-satin-context-pending="true"]'))
+                continue;
+            const item = label.closest('[data-satin-section-item]');
+            if (!item || item.dataset.satinEditAnimating)
+                continue;
+            // Edit mode's controls add their own inset in CSS; the measured one excludes it, so the
+            // separator follows the label through the edit-mode shift without re-measuring mid-motion.
+            const editInset = Number.parseFloat(item.style.getPropertyValue('--satin-edit-leading-inset'));
+            const inset = separatorInset(item.getBoundingClientRect(), label.getBoundingClientRect(), getComputedStyle(item).direction, window.devicePixelRatio || 1, Number.isFinite(editInset) ? editInset : 0);
+            const value = `${inset}px`;
+            if (item.style.getPropertyValue('--satin-row-separator-inset') !== value) {
+                item.style.setProperty('--satin-row-separator-inset', value);
+            }
+        }
+    };
+    const observer = new ResizeObserver(update);
+    discover();
+    update();
+    // Text/value updates keep the same leading label. Only element replacement needs
+    // discovery; size changes are delivered by the retained ResizeObserver.
+    const contentObserver = new MutationObserver(records => {
+        if (records.some(record => [...record.addedNodes, ...record.removedNodes].some(node => node instanceof Element))) {
+            discover();
+            update();
+        }
+        else if (records.some(record => record.type === 'attributes' &&
+            record.target instanceof Element &&
+            labels.some(label => record.target.contains(label) || label.contains(record.target)))) {
+            // A leading accessory or margin can move a label without resizing it.
+            update();
+        }
+    });
+    contentObserver.observe(container, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class', 'hidden'],
+    });
+    const directionObserver = new MutationObserver(update);
+    directionObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['dir'],
+        subtree: true,
+    });
+    return () => {
+        observer.disconnect();
+        directionObserver.disconnect();
+        contentObserver.disconnect();
+    };
+}

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

@@ -0,0 +1,40 @@
+export type SliderFrame = Readonly<{
+    /** Thumb position: 0 at the minimum end, 1 at the maximum end. */
+    position: number;
+    /** Lens lift: 0 is the white resting thumb, 1 the held lens (the springs overshoot). */
+    lift: number;
+}>;
+/**
+ * One Slider contact transaction: pressed (white thumb) → lifted after the native stationary hold
+ * (CONTROL_LIFT.activationMs) or as a drag starts → dragging (the thumb follows the finger,
+ * snapped to `snap`'s positions) → the lens restores on release. The thumb stays where it was
+ * released: a Slider has no ends to settle to. Times are epoch milliseconds.
+ */
+export declare class SliderContact {
+    private readonly liftSpring;
+    private contact?;
+    private lifted;
+    private position;
+    /** Reduce Motion: the lens never lifts. */
+    reducedMotion: boolean;
+    constructor(position: number);
+    get active(): boolean;
+    get isLifted(): boolean;
+    get dragging(): boolean;
+    /** Same activation rule as the Toggle: native evidence covers stationary holds only. */
+    liftDue(at: number): boolean;
+    get needsFrame(): boolean;
+    /** A value from outside a drag (keyboard, assistive technology, the app). */
+    setPosition(position: number): void;
+    down(pointerId: number, x: number, y: number, at: number, ownsVertical?: boolean): void;
+    /**
+     * `travel` is the thumb's travel in CSS px; `snap` maps a raw position to a shown one (steps).
+     * Returns `vertical` when the contact moved vertically first: the page's scroll owns it.
+     */
+    move(pointerId: number, x: number, y: number, travel: number, snap: (position: number) => number): 'drag' | 'vertical' | undefined;
+    /** Start the lens lift (the page calls this once the lens can be shown in this frame). */
+    lift(at: number): void;
+    /** End the contact (release, cancel or a vertical scroll). Returns whether it dragged. */
+    end(at: number): boolean;
+    sample(at: number): SliderFrame;
+}