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

package/dist/list-form/ListItem.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { flushSync } from 'react-dom';
+import { ListItemActions } from '../actions/RowActions.js';
+import { CONTEXT_HOLD_MS } from '../actions/contextMotion.js';
+import { animateElement } from '../motion/animate.js';
+import { sampledKeyframes, springMotion, springTrack } from '../motion/springTrack.js';
+import { Pressable } from '../press/Pressable.js';
+import { SCROLL_PRESS_SLOP_PX } from '../scroll/pressOwnership.js';
+import { ListItemContext, ListSelectionContext, useEditMode, } from './editing.js';
+import { EDIT_CONTROL_COLUMN, EDIT_MODE_SPRING, REORDER_HANDLE_INSET, REORDER_HANDLE_TRAVEL, } from './editMotion.js';
+import { resetReorderTransforms, startReorderDrag } from './reorder.js';
+const noControls = { delete: false, select: false, reorder: false };
+/**
+ * One row of a `List` or `Section`. For a `ForEach` row it also draws edit mode: the delete and
+ * selection controls before the content, the reorder handle after it, the selected highlight, and
+ * the measured shift between the two layouts.
+ */
+export function ListItem({ children, item, options, style, attributes, itemRef, }) {
+    const [editMode] = useEditMode();
+    const selection = useContext(ListSelectionContext);
+    const editing = editMode === 'active' && item !== undefined;
+    const selectable = Boolean(selection && item && !options?.selectionDisabled);
+    const selected = Boolean(selectable && item && selection?.isSelected(item.id));
+    const controls = editing
+        ? {
+            delete: Boolean(item?.editing.onDelete && !options?.deleteDisabled),
+            select: selectable && selection?.mode === 'multiple',
+            reorder: Boolean(item?.editing.onMove && !options?.moveDisabled),
+        }
+        : noControls;
+    const element = useRef(null);
+    const shown = useEditTransition(element, controls);
+    const actionsController = useRef(undefined);
+    const reorder = useReorder(element, item, editing);
+    const select = useCallback(() => {
+        if (item && selection && selectable)
+            selection.activate(item.id, editing);
+    }, [item, selection, selectable, editing]);
+    const rowTap = useRowTapSelection(select, selectable);
+    const state = useMemo(() => (item || selectable ? { editing, pressSelects: editing && selectable, select } : null), [item, selectable, editing, select]);
+    const onDelete = item?.editing.onDelete;
+    const offset = item?.offset;
+    const deleteAction = useMemo(() => onDelete && offset !== undefined && !options?.deleteDisabled
+        ? { id: 'delete', label: 'Delete', role: 'destructive', onPress: () => onDelete([offset]) }
+        : undefined, [onDelete, offset, options?.deleteDisabled]);
+    const hostsActions = Boolean(deleteAction || options?.swipeActions || options?.contextMenu);
+    const leadingInset = (shown.delete ? 1 : 0) + (shown.select ? 1 : 0);
+    const itemStyle = {
+        ...style,
+        '--satin-edit-leading-inset': controls.delete || controls.select
+            ? `${((controls.delete ? 1 : 0) + (controls.select ? 1 : 0)) * EDIT_CONTROL_COLUMN}px`
+            : undefined,
+        '--satin-edit-trailing-inset': controls.reorder ? `${REORDER_HANDLE_INSET}px` : undefined,
+    };
+    const content = hostsActions ? (_jsx(ListItemActions, { swipeActions: options?.swipeActions, contextMenu: options?.contextMenu, deleteAction: deleteAction, controller: actionsController, children: children })) : (children);
+    return (_jsxs("div", { ...attributes, ref: node => {
+            element.current = node;
+            itemRef(node);
+        }, style: itemStyle, "data-satin-editing": editing || undefined, "data-satin-selected": selected || undefined, "data-satin-reorder-group": item?.editing.onMove ? item.group : undefined, "data-satin-foreach-offset": item?.offset, ...rowTap, children: [_jsx(ListItemContext, { value: state, children: content }), shown.delete && (_jsx(DeleteControl, { column: 0, onPress: () => actionsController.current?.revealTrailing(), exiting: !controls.delete })), shown.select && (_jsx(SelectionControl, { column: leadingInset - 1, selected: selected, onPress: select, exiting: !controls.select })), shown.reorder && _jsx(ReorderHandle, { onPointerDown: reorder, exiting: !controls.reorder })] }));
+}
+const ROW_CONTROLS = 'button, a, input, textarea, select, label, [role="button"], [role="switch"], [contenteditable="true"],' +
+    ' [data-satin-edit-control]';
+/** Whether a contact landed on one of the row's own controls, which keep their own action. */
+function onRowControl(row, target) {
+    const control = target instanceof Element ? target.closest(ROW_CONTROLS) : null;
+    return Boolean(control && row.contains(control));
+}
+/**
+ * A tap on the row body selects the row, as a `List` with a selection does. The tap is read from
+ * the pointer itself: WebKit's synthesized click can be claimed by the shared press receipt
+ * (press/contactReceipt.ts) before it reaches the row, as every Satin press reads its own pointer.
+ * A contact that moves past the scroll slop, is held into a context menu, or that WebKit takes
+ * for a pan (pointercancel) selects nothing. A click with no pointer (VoiceOver, Full Keyboard
+ * Access) still selects.
+ */
+function useRowTapSelection(select, enabled) {
+    const contact = useRef(null);
+    if (!enabled)
+        return {};
+    return {
+        onPointerDown(event) {
+            const onControl = onRowControl(event.currentTarget, event.target);
+            contact.current =
+                event.isPrimary && !onControl
+                    ? { pointerId: event.pointerId, x: event.clientX, y: event.clientY, at: event.timeStamp }
+                    : null;
+        },
+        onPointerUp(event) {
+            const started = contact.current;
+            contact.current = null;
+            if (!started || started.pointerId !== event.pointerId)
+                return;
+            const travel = Math.hypot(event.clientX - started.x, event.clientY - started.y);
+            const held = event.timeStamp - started.at;
+            if (travel < SCROLL_PRESS_SLOP_PX && held < CONTEXT_HOLD_MS)
+                select();
+        },
+        onPointerCancel() {
+            contact.current = null;
+        },
+        onClick(event) {
+            if (event.detail === 0 && !onRowControl(event.currentTarget, event.target))
+                select();
+        },
+    };
+}
+function DeleteControl({ column, onPress, exiting, }) {
+    return (_jsx("span", { "data-satin-edit-control": "delete", "data-satin-edit-column": column, "data-satin-edit-exiting": exiting || undefined, children: _jsx(Pressable, { "aria-label": "Delete", feedback: "opacity", onPress: onPress, children: _jsx("span", { "data-satin-delete-glyph": "true", "aria-hidden": "true" }) }) }));
+}
+function SelectionControl({ column, selected, onPress, exiting, }) {
+    return (_jsx("span", { "data-satin-edit-control": "select", "data-satin-edit-column": column, "data-satin-edit-exiting": exiting || undefined, children: _jsx(Pressable, { "aria-label": "Select", "aria-pressed": selected, onPress: onPress, children: _jsx("span", { "data-satin-selection-glyph": selected ? 'selected' : 'empty', "aria-hidden": "true", children: selected && (_jsx("svg", { viewBox: "0 0 22 22", "aria-hidden": "true", children: _jsx("path", { d: "M6.7 11.9 9.9 15 15.4 7.2" }) })) }) }) }));
+}
+function ReorderHandle({ onPointerDown, exiting, }) {
+    const handle = useRef(null);
+    useLayoutEffect(() => {
+        const element = handle.current;
+        if (!element)
+            return;
+        // A native listener, so the drag owns the contact before the row's own recognizers see it.
+        const down = (event) => onPointerDown(event);
+        element.addEventListener('pointerdown', down);
+        return () => element.removeEventListener('pointerdown', down);
+    }, [onPointerDown]);
+    return (_jsx("span", { ref: handle, role: "img", "aria-label": "Reorder", "data-satin-edit-control": "reorder", "data-satin-edit-exiting": exiting || undefined, children: _jsx("svg", { viewBox: "0 0 21 11", "aria-hidden": "true", children: _jsx("path", { d: "M0.67 0.67H20.33M0.67 5.5H20.33M0.67 10.33H20.33" }) }) }));
+}
+/**
+ * Keeps leaving controls mounted until their exit finishes, and plays the measured shift whenever
+ * the item's editing controls change: the content and controls start where the old layout drew
+ * them and settle into the new one.
+ */
+function useEditTransition(element, controls) {
+    const [shown, setShown] = useState(controls);
+    const previous = useRef(controls);
+    const generation = useRef(0);
+    const merged = {
+        delete: controls.delete || shown.delete,
+        select: controls.select || shown.select,
+        reorder: controls.reorder || shown.reorder,
+    };
+    useLayoutEffect(() => {
+        const before = previous.current;
+        previous.current = controls;
+        if (sameControls(before, controls))
+            return;
+        const item = element.current;
+        if (!item)
+            return;
+        const current = ++generation.current;
+        const animations = playEditShift(item, before, controls);
+        const settle = () => {
+            if (generation.current !== current)
+                return;
+            delete item.dataset.satinEditAnimating;
+            setShown(controls);
+        };
+        if (!animations.length)
+            settle();
+        else
+            void Promise.all(animations.map(animation => animation.finished)).then(settle, () => { });
+    });
+    return merged;
+}
+function sameControls(first, second) {
+    return (first.delete === second.delete &&
+        first.select === second.select &&
+        first.reorder === second.reorder);
+}
+function playEditShift(item, before, after) {
+    const columns = (state) => ((state.delete ? 1 : 0) + (state.select ? 1 : 0)) * EDIT_CONTROL_COLUMN;
+    const shift = columns(before) - columns(after);
+    const track = springTrack(springMotion(EDIT_MODE_SPRING));
+    const timing = { duration: track.duration };
+    const along = (from, to) => (progress) => from + (to - from) * progress;
+    const animations = [];
+    item.dataset.satinEditAnimating = 'true';
+    // The content and the separator start where the old layout drew them.
+    if (shift) {
+        const position = along(shift, 0);
+        const frames = sampledKeyframes(track, progress => ({
+            transform: `translate3d(${position(progress)}px, 0, 0)`,
+        }));
+        for (const child of item.children) {
+            if (!(child instanceof HTMLElement) || child.dataset.satinEditControl)
+                continue;
+            child.getAnimations().forEach(animation => animation.cancel());
+            animations.push(animateElement(child, frames, timing));
+        }
+        animations.push(animateElement(item, frames, { ...timing, pseudoElement: '::after' }));
+    }
+    // Each leading control rides with the content from (or to) the row's edge, fading as it goes.
+    item.querySelectorAll(':scope > [data-satin-edit-control]').forEach(control => {
+        const kind = control.dataset.satinEditControl;
+        const entering = after[kind] && !before[kind];
+        const leaving = before[kind] && !after[kind];
+        const travel = kind === 'reorder' ? REORDER_HANDLE_TRAVEL : -columns(entering ? after : before);
+        const translate = entering ? along(travel, 0) : leaving ? along(0, travel) : along(shift, 0);
+        const opacity = entering ? along(0, 1) : leaving ? along(1, 0) : () => 1;
+        control.getAnimations().forEach(animation => animation.cancel());
+        animations.push(animateElement(control, sampledKeyframes(track, progress => ({
+            transform: `translate3d(${translate(progress)}px, 0, 0)`,
+            opacity: opacity(progress),
+        })), 
+        // A leaving control keeps its last pose until it unmounts.
+        leaving ? { ...timing, fill: 'forwards' } : timing));
+    });
+    return animations;
+}
+/**
+ * The reorder handle's pointer-down: lifts this row and hands it to the drag. The move is
+ * reported through `onMove` with SwiftUI's offsets once the row settles; the new order must then
+ * come back through `data`, and until it does the rows stay where they were dropped.
+ */
+function useReorder(element, item, editing) {
+    const drag = useRef(undefined);
+    const onMove = item?.editing.onMove;
+    useLayoutEffect(() => {
+        if (!editing)
+            drag.current?.cancel();
+    }, [editing]);
+    return useCallback((event) => {
+        const row = element.current;
+        if (!row || !onMove || event.button !== 0 || drag.current)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget?.setPointerCapture?.(event.pointerId);
+        drag.current = startReorderDrag({
+            item: row,
+            pointer: event,
+            onCommit: (from, to) => {
+                const offsets = groupRows(row).map(element => Number(element.dataset.satinForeachOffset));
+                const source = offsets[from];
+                const destination = to > from ? offsets[to] + 1 : offsets[to];
+                flushSync(() => onMove([source], destination));
+                // A synchronous update has already put the rows in their new order. Otherwise the rows
+                // stay where they were dropped until the new order arrives (ListItems clears them).
+                if (groupRows(row).indexOf(row) !== from)
+                    resetReorderTransforms(row.parentElement);
+            },
+            onEnd: () => {
+                drag.current = undefined;
+            },
+        });
+    }, [element, onMove]);
+}
+/** The rows of the dragged row's group, in document order. */
+function groupRows(row) {
+    const group = row.dataset.satinReorderGroup;
+    return [...(row.parentElement?.children ?? [])].filter((element) => element instanceof HTMLElement && element.dataset.satinReorderGroup === group);
+}

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+/**
+ * A row title with a secondary line under it: SwiftUI's two-Text label (a title, then a
+ * `.subheadline` `.secondary` line). `RowLabel`, a Toggle subtitle and any other two-line row
+ * label share this one body, so their type and spacing cannot drift apart.
+ *
+ * The ids let a control name itself by the title and describe itself by the secondary line.
+ */
+export declare function RowLabelBody({ children, detail, titleId, detailId, }: {
+    children: ReactNode;
+    detail: ReactNode;
+    titleId?: string;
+    detailId?: string;
+}): import("react").JSX.Element;

package/dist/list-form/RowLabel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A row title with a secondary line under it: SwiftUI's two-Text label (a title, then a
+ * `.subheadline` `.secondary` line). `RowLabel`, a Toggle subtitle and any other two-line row
+ * label share this one body, so their type and spacing cannot drift apart.
+ *
+ * The ids let a control name itself by the title and describe itself by the secondary line.
+ */
+export function RowLabelBody({ children, detail, titleId, detailId, }) {
+    return (_jsxs("span", { "data-satin-row-label-stack": "true", children: [_jsx("span", { id: titleId, "data-satin-row-text": "true", children: children }), _jsx("span", { id: detailId, "data-satin-row-subtitle": "true", children: detail })] }));
+}

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

@@ -0,0 +1,18 @@
+export type SliderProps = {
+    value: number;
+    onChange: (value: number) => void;
+    /** `in: min...max`; defaults to 0...1. */
+    min?: number;
+    max?: number;
+    /** Snap to multiples of `step` from `min`; omit for a continuous Slider. */
+    step?: number;
+    /** Show a tick mark at each step, centred under the thumb's stops. */
+    ticks?: boolean;
+    /** Accessibility label; a Slider shows no visible label, as on iOS. */
+    label: string;
+    disabled?: boolean;
+    tint?: string;
+    onEditingChange?: (editing: boolean) => void;
+};
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
+export declare function SliderRow(props: SliderProps): import("react").JSX.Element;

package/dist/list-form/Slider.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { ControlLens, trackThumbContact } from '../glass/ControlLens.js';
+import { requestGlassSourceDamage } from '../glass/sourceDamage.js';
+import { CONTROL_LIFT, controlLensSize } from '../glass/lens/controlLift.js';
+import { SliderContact } from './sliderContact.js';
+/**
+ * Native geometry (stock SwiftUI Slider in a Form, iPhone 17 Pro Max Simulator, iOS 27.0, 3×
+ * stills, native control measurements `continuous.mov`): a 6 pt capsule track spans the row's content
+ * width, the 37 × 24 pt white thumb stays inside it (its centre travels from 18.5 pt to width −
+ * 18.5 pt), and the accent fill runs from the track start to the thumb centre with a round end.
+ * Tick marks are 3 pt rounded squares centred 8.3 pt below the track at each stop.
+ */
+const SLIDER_HEIGHT_PT = 44;
+const THUMB_HALF_WIDTH_PT = CONTROL_LIFT.rest.width / 2;
+/** The thumb's touch target: 44 pt wide around its centre. */
+const THUMB_HIT_HALF_WIDTH_PT = 22;
+/** The lens element overhangs the Slider so the held lens (58 × 37.3 pt, press peak ≈ 59.7 × 39)
+ * fits at either end with room below for its exterior shadow. */
+const LENS_OVERHANG_PT = 12;
+const LENS_OVERHANG_Y_PT = 8;
+/** Native's rim refracts the fill's start up and down; below this much fill before the rim there
+ * is nothing to flare. */
+const RIM_FLARE_MIN_PT = 0.5;
+const now = () => performance.timeOrigin + performance.now();
+function clamp(value, low, high) {
+    return Math.min(high, Math.max(low, value));
+}
+export function Slider(props) {
+    return _jsx(SliderControl, { ...props });
+}
+export function SliderRow(props) {
+    return (_jsx("div", { "data-satin-row": "true", "data-satin-slider-row": "true", children: _jsx(SliderControl, { ...props }) }));
+}
+/**
+ * The thumb is drawn the way the Toggle's is: a white thumb that, after the native stationary hold
+ * or once a drag starts, becomes the shared control lens (`ControlLens kind="slider"`, the
+ * `control` lens profile) and follows the finger; release restores it with the Slider's measured
+ * spring. The accent fill is region content beside the thumb: while the lens is shown the fill is
+ * drawn above it (the captured glass source cannot follow a fill that changes every frame), up to
+ * the thumb centre as native shows through its lens, with native's rim line, shade and edge flare
+ * drawn on it in CSS.
+ */
+function SliderControl({ value, onChange, min = 0, max = 1, step, ticks = false, label, disabled = false, tint, onEditingChange, }) {
+    if (!(max > min))
+        throw new Error('Slider bounds must be ordered numbers (min < max).');
+    if (step !== undefined && !(step > 0))
+        throw new Error('Slider step must be greater than zero.');
+    const root = useRef(null);
+    const thumb = useRef(null);
+    const thumbHit = useRef(null);
+    const fill = useRef(null);
+    const lens = useRef(null);
+    const latest = useRef({ value, onChange, onEditingChange });
+    latest.current = { value, onChange, onEditingChange };
+    const range = { min, max, step };
+    const rangeRef = useRef(range);
+    rangeRef.current = range;
+    const [contact] = useState(() => new SliderContact(positionOf(value, range)));
+    const [lensActive, setLensActive] = useState(false);
+    const frame = useRef(0);
+    const lensPhase = useRef('hidden');
+    const lensCenter = useRef(0);
+    const endListeners = useRef(undefined);
+    function travel() {
+        return Math.max(0, (root.current?.clientWidth ?? 0) - 2 * THUMB_HALF_WIDTH_PT);
+    }
+    function paint(state) {
+        const element = thumb.current;
+        if (!element)
+            return;
+        const size = controlLensSize('slider', state.lift);
+        const trackCenter = THUMB_HALF_WIDTH_PT + state.position * travel();
+        const center = LENS_OVERHANG_PT + trackCenter;
+        element.style.left = `${center - size.width / 2}px`;
+        element.style.top = `${LENS_OVERHANG_Y_PT + (SLIDER_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`;
+        element.style.opacity = `${1 - clamp(state.lift, 0, 1)}`;
+        const fillElement = fill.current;
+        if (fillElement) {
+            fillElement.style.width = `${trackCenter}px`;
+            // The fill keeps running under the lens rim (styles.css draws the rim line, the shade
+            // under the glass and the refraction flare from these two values).
+            const rim = trackCenter - size.width / 2;
+            const lift = clamp(state.lift, 0, 1);
+            fillElement.style.setProperty('--satin-slider-rim', `${rim}px`);
+            fillElement.style.setProperty('--satin-slider-lift', `${lift}`);
+            fillElement.style.setProperty('--satin-slider-flare', `${rim > RIM_FLARE_MIN_PT ? lift : 0}`);
+            // Only while lifted: at rest the fill is glass source content, drawn plain.
+            fillElement.toggleAttribute('data-satin-slider-lifted', lift > 0);
+        }
+        if (thumbHit.current)
+            thumbHit.current.style.left = `${center - LENS_OVERHANG_PT - THUMB_HIT_HALF_WIDTH_PT}px`;
+        lensCenter.current = center;
+        if (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));
+        if (lifting) {
+            lensPhase.current = 'lifted';
+            lens.current?.interact('pressed', lensCenter.current, at);
+        }
+        if (contact.needsFrame) {
+            frame.current = requestAnimationFrame(tick);
+            return;
+        }
+        if (lensPhase.current !== 'hidden')
+            lens.current?.interact('rest', lensCenter.current, now());
+        lensPhase.current = 'hidden';
+        setLensActive(false);
+    }
+    function schedule() {
+        if (!frame.current)
+            frame.current = requestAnimationFrame(tick);
+    }
+    function paintNow() {
+        cancelAnimationFrame(frame.current);
+        tick();
+    }
+    // The thumb's geometry is written here, never by React, so a re-render cannot jump it.
+    useLayoutEffect(() => {
+        contact.setPosition(positionOf(value, range));
+        paint(contact.sample(now()));
+        if (contact.needsFrame)
+            schedule();
+        // Like a Toggle, the control owns its presentation writes. During a contact
+        // its fill/thumb are region content, so they cannot change the captured source.
+        // Keyboard and application updates at rest still invalidate sampled content;
+        // contact registration/retirement own the two interaction source boundaries.
+        if (!contact.active && lensPhase.current === 'hidden' && root.current)
+            requestGlassSourceDamage(root.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, min, max, step]);
+    useEffect(() => {
+        const element = root.current;
+        if (!element)
+            return;
+        const resized = new ResizeObserver(() => paint(contact.sample(now())));
+        resized.observe(element);
+        return () => resized.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => () => {
+        cancelAnimationFrame(frame.current);
+        endListeners.current?.();
+    }, []);
+    function begin(event) {
+        const element = root.current;
+        if (disabled || event.button !== 0 || contact.active || !element)
+            return;
+        const box = element.getBoundingClientRect();
+        const thumbCenter = box.left + THUMB_HALF_WIDTH_PT + contact.sample(now()).position * travel();
+        // As UISlider, only the thumb takes a drag; the rest of the row stays scrollable.
+        if (Math.abs(event.clientX - thumbCenter) > THUMB_HIT_HALF_WIDTH_PT)
+            return;
+        // Only the thumb owns a sheet contact; track taps still belong to the sheet/scroll.
+        const ownsVertical = !!element.closest('[data-satin-presentation="sheet"]');
+        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.
+        function move(x, y) {
+            const snap = (position) => positionOf(valueOf(position, rangeRef.current), rangeRef.current);
+            const result = contact.move(pointerId, x, y, travel(), snap);
+            if (result === 'vertical')
+                finish();
+            if (result === 'drag')
+                commit();
+            paintNow();
+        }
+        const finger = trackThumbContact(event.nativeEvent, {
+            move,
+            up(x, y) {
+                // WebKit can coalesce the last move into release. It is still a valid finger sample;
+                // cancellation coordinates are not and continue through finish alone.
+                move(x, y);
+                finish();
+            },
+            cancel: () => finish(),
+            yields: () => !ownsVertical && !contact.dragging,
+        });
+        if (!finger)
+            return;
+        contact.reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        contact.down(pointerId, event.clientX, event.clientY, now(), ownsVertical);
+        latest.current.onEditingChange?.(true);
+        setLensActive(true);
+        function commit() {
+            const next = valueOf(contact.sample(now()).position, rangeRef.current);
+            if (next !== latest.current.value)
+                latest.current.onChange(next);
+        }
+        function finish() {
+            if (ended)
+                return;
+            ended = true;
+            const at = now();
+            contact.end(at);
+            if (lensPhase.current === 'lifted') {
+                lensPhase.current = 'restoring';
+                lens.current?.interact('releasing', lensCenter.current, at);
+            }
+            endListeners.current?.();
+            latest.current.onEditingChange?.(false);
+            paintNow();
+        }
+        endListeners.current = () => {
+            endListeners.current = undefined;
+            finger.end('rest');
+        };
+        schedule();
+    }
+    const stops = ticks && step !== undefined ? Math.floor((max - min) / step + 1e-9) : 0;
+    return (_jsxs("div", { ref: root, "data-satin-slider": "true", "data-satin-role": "chrome", "data-satin-slider-ticks": stops > 0 ? 'true' : undefined, "data-satin-horizontal-drag": disabled ? undefined : 'both', "aria-disabled": disabled || undefined, style: tint ? { '--satin-list-accent': tint } : undefined, onPointerDown: begin, children: [_jsx("input", { type: "range", "data-satin-slider-input": "true", "aria-label": label, min: min, max: max, step: step ?? 'any', value: value, disabled: disabled, onChange: event => onChange(Number(event.currentTarget.value)) }), _jsx("span", { "data-satin-slider-track": "true" }), stops > 0 ? (_jsx("span", { "data-satin-slider-tick-row": "true", "aria-hidden": "true", children: Array.from({ length: stops + 1 }, (_, index) => (_jsx("span", { "data-satin-slider-tick": "true", style: {
+                        left: `calc(${THUMB_HALF_WIDTH_PT}px + (100% - ${2 * THUMB_HALF_WIDTH_PT}px) * ${index / stops})`,
+                    } }, index))) })) : null, _jsx("span", { ref: thumbHit, "data-satin-slider-thumb-hit": "true", "aria-hidden": "true" }), _jsxs(ControlLens, { kind: "slider", active: lensActive, handle: lens, children: [_jsx("span", { ref: fill, "data-satin-slider-fill": "true" }), _jsx("span", { ref: thumb, "data-satin-slider-thumb": "true" })] })] }));
+}
+function valueOf(position, { min, max, step }) {
+    const raw = min + clamp(position, 0, 1) * (max - min);
+    if (step === undefined)
+        return raw;
+    return clamp(min + Math.round((raw - min) / step) * step, min, max);
+}
+function positionOf(value, { min, max }) {
+    return clamp((value - min) / (max - min), 0, 1);
+}

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/** Native iOS 27 Stepper repeat observations are recorded in controls-1a-notes.md. */
+export declare function StepperButton({ disabled, label, onStep, onEditingChange, children, }: {
+    disabled: boolean;
+    label: string;
+    onStep(): void;
+    onEditingChange?(editing: boolean): void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/list-form/StepperButton.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { Pressable } from '../press/Pressable.js';
+/** Native iOS 27 Stepper repeat observations are recorded in controls-1a-notes.md. */
+export function StepperButton({ disabled, label, onStep, onEditingChange, children, }) {
+    const timer = useRef(undefined);
+    const state = useRef('idle');
+    const repetitions = useRef(0);
+    const repeated = useRef(false);
+    const current = useRef({ disabled, onStep, onEditingChange });
+    useLayoutEffect(() => {
+        current.current = { disabled, onStep, onEditingChange };
+    });
+    const stop = () => {
+        clearTimeout(timer.current);
+        timer.current = undefined;
+    };
+    useLayoutEffect(() => {
+        if (disabled)
+            stop();
+        return () => {
+            stop();
+            if (state.current !== 'idle') {
+                state.current = 'idle';
+                current.current.onEditingChange?.(false);
+            }
+        };
+    }, [disabled]);
+    const repeat = () => {
+        if (current.current.disabled || state.current !== 'pressed')
+            return;
+        repeated.current = true;
+        repetitions.current++;
+        current.current.onStep();
+        timer.current = setTimeout(repeat, repetitions.current < 6 ? 500 : 100);
+    };
+    return (_jsx(Pressable, { disabled: disabled, "aria-label": label, onPressStateChange: next => {
+            const previous = state.current;
+            state.current = next;
+            stop();
+            if (next === 'pressed') {
+                if (previous === 'idle') {
+                    repeated.current = false;
+                    repetitions.current = 0;
+                    current.current.onEditingChange?.(true);
+                }
+                timer.current = setTimeout(repeat, 500);
+            }
+            else if (next === 'idle' && previous !== 'idle') {
+                current.current.onEditingChange?.(false);
+                queueMicrotask(() => {
+                    if (state.current === 'idle')
+                        repeated.current = false;
+                });
+            }
+        }, onPress: () => {
+            if (!repeated.current)
+                current.current.onStep();
+        }, children: children }));
+}

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

@@ -0,0 +1,16 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type ToggleProps = {
+    style?: CSSProperties;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label: string;
+    /** A secondary line under the label in a row; the switch's accessible description. */
+    subtitle?: string;
+    tint?: string;
+};
+export declare function Toggle(props: ToggleProps): import("react").JSX.Element;
+export declare function ToggleRow({ label, subtitle, checked, onChange, disabled, leading, style, }: ToggleProps & {
+    label: string;
+    leading?: ReactNode;
+}): import("react").JSX.Element;