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

package/dist/actions/recognizers.js

@@ -0,0 +1,87 @@
+import { createGestureArena, deferGesture, failGesture, recognizeGesture, } from '../gestures/arena.js';
+import { interactivePopRecognizer, nativeScrollRecognizer, pressRecognizer, } from '../gestures/existingCompetitors.js';
+import { horizontalDragBlocksBack } from '../navigation/horizontalDrag.js';
+/** The generic arena receives calibration from the interaction owner. */
+export function createRowArena(bounds, options) {
+    const { calibration: c } = options;
+    return createGestureArena({
+        bounds,
+        recognizers: [
+            {
+                ...interactivePopRecognizer,
+                evaluate: context => options.canPop
+                    ? interactivePopRecognizer.evaluate(context)
+                    : failGesture('no-pop-target'),
+            },
+            nativeScrollRecognizer,
+            {
+                ...pressRecognizer,
+                evaluate: context => Math.hypot(context.deltaX, context.deltaY) > c.holdSlop
+                    ? failGesture('moved')
+                    : pressRecognizer.evaluate(context),
+            },
+            {
+                id: 'row-swipe',
+                axis: 'horizontal',
+                priority: 50,
+                region: { kind: 'all' },
+                hysteresis: { claimDistance: c.claimDistance },
+                requiresFailureOf: ['interactive-pop'],
+                evaluate: context => {
+                    if (context.sample.phase === 'end')
+                        return failGesture('released');
+                    if (Math.max(Math.abs(context.deltaX), Math.abs(context.deltaY)) < c.claimDistance)
+                        return deferGesture();
+                    if (Math.abs(context.deltaY) >= Math.abs(context.deltaX))
+                        return failGesture('vertical-intent');
+                    return (context.deltaX > 0 ? options.leading : options.trailing)
+                        ? recognizeGesture('horizontal-row-action')
+                        : failGesture('no-actions');
+                },
+            },
+            {
+                id: 'context-hold',
+                axis: 'any',
+                priority: 60,
+                region: { kind: 'all' },
+                hysteresis: { retentionDistance: c.holdSlop },
+                evaluate: context => {
+                    if (!options.context ||
+                        context.sample.phase === 'end' ||
+                        Math.hypot(context.deltaX, context.deltaY) > c.holdSlop)
+                        return failGesture('hold-canceled');
+                    return context.elapsed >= c.holdMilliseconds
+                        ? recognizeGesture('hold-elapsed')
+                        : deferGesture();
+                },
+            },
+        ],
+    });
+}
+const navigationOwners = new WeakMap();
+export function registerRowNavigationOwner(host, canPop) {
+    navigationOwners.set(host, canPop);
+    return () => {
+        navigationOwners.delete(host);
+    };
+}
+export function rowCanPop(target, clientX) {
+    const host = target.closest('[data-satin-navigator-host]');
+    return host
+        ? !horizontalDragBlocksBack(target, clientX) && (navigationOwners.get(host)?.(target) ?? false)
+        : false;
+}
+/** Set before contact: native horizontal scrolling cannot be enabled after down. */
+export function rowSwipeTouchAction(nativeDriver, canPop, directionalPanning = true) {
+    return nativeDriver && canPop && directionalPanning ? 'pan-y pan-right pinch-zoom' : 'pan-y';
+}
+/** Sample the committed target policy at contact, not after direction lock. */
+export function rowBlocksNativeBack(target) {
+    const row = target?.closest('[data-satin-row-swipe="true"]');
+    if (!row)
+        return false;
+    const policy = getComputedStyle(row).touchAction || 'auto';
+    return (!['auto', 'manipulation'].includes(policy) &&
+        !policy.includes('pan-x') &&
+        !policy.includes('pan-right'));
+}

package/dist/actions/rowScrub.d.ts

@@ -0,0 +1,59 @@
+import { type SwipeActions } from './types.js';
+export declare const swipeGeometry: {
+    readonly buttonWidth: 60;
+    readonly gap: 10;
+    readonly padding: 10;
+    readonly capsuleHeight: 44;
+};
+export declare const swipeOpenWidth: (count: number, buttonWidth?: number) => number;
+export type SwipeWidths = {
+    leading: number;
+    trailing: number;
+};
+export declare function swipeWidths(host: HTMLElement): SwipeWidths;
+export declare function fullSwipeThreshold(width: number, count: number, side?: 'leading' | 'trailing', buttonWidth?: number, inline?: boolean): number;
+export declare const swipeDragLimit: (width: number, count: number, buttonWidth?: number) => number;
+/** Spatial fit of native's sequential capsule reveal. Rest interpolates the
+ * contact pose into the fully revealed spring target; it is never a DOM writer. */
+export declare function swipeActionPose(position: number, index: number, count: number, takeover?: number, rest?: number, buttonWidth?: number, inline?: boolean, allowsFullSwipe?: boolean): {
+    scale: number;
+    spread: number;
+    opacity: number;
+    growth: number;
+};
+export declare function swipeActionTracks(primary: HTMLElement, count: number, width: number, allowsFullSwipe: boolean): {
+    element: HTMLElement;
+    frame(position: number, raw?: number, rest?: number, temporalTakeover?: number): Keyframe;
+}[];
+/** Native scroll offset is authoritative; resistance maps it to the presented row position. */
+export declare function rowSwipePosition(raw: number, width: number, configuration?: SwipeActions, widths?: SwipeWidths): number;
+/** A revealed row closes after a deliberate reverse drag, without requiring
+ * the finger to traverse the entire tray. */
+export declare function rowSwipeShouldClose(initial: number, position: number, drag: number): boolean;
+/** Invert resistance once when a new finger catches a spring. */
+export declare function rowSwipeRaw(position: number, width: number, configuration?: SwipeActions, widths?: SwipeWidths): number;
+export declare function primaryParts(primary: HTMLElement): HTMLElement[];
+export declare function primaryTransform(part: HTMLElement, growth: number, middleWidth?: number): string;
+/** Recover takeover from the presented capsule, including a caught settle. */
+export declare function presentedTakeover(primary: HTMLElement, position: number): number;
+export declare function createRowScrub(host: HTMLElement, source: HTMLElement, content: HTMLElement, initial: number, width: number, configuration?: SwipeActions): {
+    flush: (now?: number) => {
+        raw: number;
+        position: number;
+    };
+    rawPosition: () => number;
+    position: () => number;
+    cancel: () => void;
+} | undefined;
+/** Called by the row's existing ResizeObserver, never by its frame loop. */
+export declare function updateRowCorners(content: HTMLElement, width: number, height: number, actions?: SwipeActions): void;
+/** Rebuild only geometry keyframes on resize. The existing animation keeps its
+ * timeline, velocity fit and current time, including an interrupted release. */
+export declare function resizeRowCornerAnimation(content: HTMLElement, animation: Animation, frames: () => Keyframe[]): void;
+/** Keep section end caps until the first inline action has entered. The
+ * revealed face has a fixed continuous corner, independent of text height. */
+export declare function swipeContentTrack(content: HTMLElement): (position: number, rest?: number) => {
+    transform: string;
+    borderRadius: string;
+    clipPath: string;
+};

package/dist/actions/rowScrub.js

@@ -0,0 +1,400 @@
+import { cornerClipPath, roundedCornerPath } from '../shapes/corners.js';
+import { takeoverSample } from './swipeSpring.js';
+import { swipeEdge } from './types.js';
+// iOS 27 matched phone reference, light/dark, 1/2/3 actions, both edges:
+// color-mask width 60pt, gap 10pt, outer padding 10pt. Capsule 44pt layout / 42-43pt solid mask.
+export const swipeGeometry = { buttonWidth: 60, gap: 10, padding: 10, capsuleHeight: 44 };
+export const swipeOpenWidth = (count, buttonWidth = swipeGeometry.buttonWidth) => count * (buttonWidth + swipeGeometry.gap) + swipeGeometry.padding;
+export function swipeWidths(host) {
+    const width = (side) => {
+        const tray = host.querySelector(`[data-satin-swipe-tray="${side}"]`);
+        return Number.parseFloat(tray?.style.getPropertyValue('--satin-swipe-button-width') ?? '') || 60;
+    };
+    return { leading: width('leading'), trailing: width('trailing') };
+}
+const defaultWidths = { leading: 60, trailing: 60 };
+// reference native UIKit pan receipts, 400pt / 52pt rows. Recognition consumes
+// some initial finger travel, especially in fast strokes: the scroll source
+// supplies recognized translation, not total finger displacement.
+// Normal cancel/commit brackets: trailing 195..220pt; leading two 205..230pt,
+// leading three 300..325pt. Flick-only projection is not isolated by these
+// bounds and must not be invented from the commanded input duration.
+export function fullSwipeThreshold(width, count, side = 'trailing', buttonWidth = 84, inline = true) {
+    // Tall two-action leading rows cancel at 205pt and commit at 210pt,
+    // from slow drags through 1394pt/s flicks. Keep other tall-row fits separate.
+    if (!inline) {
+        const threshold = side === 'leading' && count === 2 ? 207.5 : count === 1 ? 240 : count === 2 ? 232.5 : 265;
+        return (width / 400) * threshold;
+    }
+    const threshold = width * (207.5 / 400);
+    return side === 'leading'
+        ? Math.max(threshold, swipeOpenWidth(count, buttonWidth) + 20)
+        : threshold;
+}
+export const swipeDragLimit = (width, count, buttonWidth = 60) => Math.max(width / 2, swipeOpenWidth(count, buttonWidth) + 20);
+const clamp = (value) => Math.max(0, Math.min(1, value));
+// Tall stock List rows reveal a 50pt button over 40..70pt of recognized travel.
+// Held-input probes at 40, 60 and 80pt produce scale/alpha 0, 2/3 and 1.
+function revealScale(distance) {
+    return clamp((distance - 40) / 30);
+}
+// iOS 27 short-row captures, both appearances and edges, every third frame.
+// The 84pt Read pill grows over 50..114pt; the 96pt Archive pill over 52..124pt.
+// Opacity is measured independently of the colored mask height.
+const inlineOpacitySamples = [
+    [0, 0],
+    [0.15, 0.08],
+    [0.3, 0.43],
+    [0.55, 0.69],
+    [0.8, 0.93],
+    [1, 1],
+];
+function inlineEntrance(distance, buttonWidth) {
+    const widthDelta = buttonWidth - 84;
+    const scale = clamp((distance - 50 - widthDelta / 6) / (64 + (widthDelta * 2) / 3));
+    let opacity = 1;
+    for (let index = 1; index < inlineOpacitySamples.length; index++) {
+        const [end, to] = inlineOpacitySamples[index];
+        const [start, from] = inlineOpacitySamples[index - 1];
+        if (scale <= end) {
+            opacity = from + (to - from) * clamp((scale - start) / (end - start));
+            break;
+        }
+    }
+    return { scale, opacity };
+}
+/** Spatial fit of native's sequential capsule reveal. Rest interpolates the
+ * contact pose into the fully revealed spring target; it is never a DOM writer. */
+export function swipeActionPose(position, index, count, takeover = 0, rest = 0, buttonWidth = 60, inline = false, allowsFullSwipe = false) {
+    const distance = Math.abs(position);
+    const open = swipeOpenWidth(count, buttonWidth);
+    const excess = Math.max(0, distance - open);
+    const localDistance = distance - index * (buttonWidth + 10);
+    // reference paired third-pill mask: native 37pt, prior fit 35pt at full reveal.
+    // Apply its measured 3pt reveal lead progressively, preserving first-pill
+    // entrance samples and the zero-width pose before this action enters.
+    const revealLead = inline && index === 2 ? 3 * clamp((localDistance - 50) / 50) : 0;
+    const entrance = inline ? inlineEntrance(localDistance + revealLead, buttonWidth) : undefined;
+    const contactScale = entrance?.scale ?? revealScale(localDistance);
+    const reveal = contactScale + (clamp(distance / open) - contactScale) * rest;
+    const spread = (((index + 0.5) * excess) / (count + 0.5)) * (1 - takeover);
+    return {
+        scale: reveal,
+        spread,
+        opacity: ((entrance?.opacity ?? contactScale) + (1 - (entrance?.opacity ?? contactScale)) * rest) *
+            (index === 0 ? 1 : 1 - takeover),
+        growth: index === 0
+            ? (inline && allowsFullSwipe ? excess * (1 - takeover) : 0) +
+                takeover * Math.max(0, distance - buttonWidth - 20)
+            : 0,
+    };
+}
+function capsuleHeight(primary) {
+    return primary.closest('[data-satin-row-actions]')?.dataset.satinSwipeLabelLayout ===
+        'below'
+        ? 50
+        : 44;
+}
+export function swipeActionTracks(primary, count, width, allowsFullSwipe) {
+    const buttons = primary.parentElement?.matches('[data-satin-swipe-tray]')
+        ? [...primary.parentElement.querySelectorAll('[data-satin-swipe-action]')]
+        : [primary];
+    const trailing = primary.parentElement?.dataset.satinSwipeTray === 'trailing';
+    const inline = primary.closest('[data-satin-row-actions]')?.dataset.satinSwipeLabelLayout ===
+        'inline';
+    return buttons.flatMap((button, index) => {
+        const buttonWidth = Number.parseFloat(getComputedStyle(button).width) || 60;
+        const middleWidth = Math.max(1, buttonWidth - capsuleHeight(primary));
+        const pose = (position, raw = position, rest = 0, temporalTakeover) => {
+            // The short two-action reference starts primary takeover at the open tray:
+            // 198pt leading / 222pt trailing. Taller rows retain their earlier fit.
+            const start = inline && count === 2
+                ? swipeOpenWidth(count, buttonWidth)
+                : swipeDragLimit(width, count, buttonWidth) - 8;
+            const progress = clamp((Math.abs(position) - start) / (count === 2 ? 26 : 14));
+            const takeover = temporalTakeover ??
+                (!allowsFullSwipe
+                    ? 0
+                    : count === 1 || raw === Infinity
+                        ? 1
+                        : progress * progress * (3 - 2 * progress));
+            return swipeActionPose(position, index, count, raw === Infinity ? takeover : takeover * (1 - rest), rest, buttonWidth, inline, allowsFullSwipe);
+        };
+        return [
+            {
+                element: button,
+                frame(position, raw = position, rest = 0, temporalTakeover) {
+                    const value = pose(position, raw, rest, temporalTakeover);
+                    return {
+                        transform: `translate3d(${(trailing ? -1 : 1) * value.spread}px,0,0) scale(${value.scale})`,
+                        opacity: value.opacity,
+                    };
+                },
+            },
+            ...primaryParts(button).map(part => ({
+                element: part,
+                frame(position, raw = position, rest = 0, temporalTakeover) {
+                    return {
+                        transform: primaryTransform(part, pose(position, raw, rest, temporalTakeover).growth, middleWidth),
+                    };
+                },
+            })),
+        ];
+    });
+}
+/** Native scroll offset is authoritative; resistance maps it to the presented row position. */
+export function rowSwipePosition(raw, width, configuration, widths = defaultWidths) {
+    const side = raw >= 0 ? 'leading' : 'trailing';
+    const edge = swipeEdge(configuration, side);
+    if (!edge.actions.length)
+        return 0;
+    const limit = edge.allowsFullSwipe
+        ? swipeDragLimit(width, edge.actions.length, widths[side])
+        : swipeOpenWidth(edge.actions.length, widths[side]);
+    const excess = Math.max(0, Math.abs(raw) - limit);
+    const resistance = edge.allowsFullSwipe && edge.actions.length <= 2 ? 0.25 : 0.2;
+    return (Math.sign(raw) *
+        (Math.min(Math.abs(raw), limit) + (resistance * excess) / (1 + (resistance * excess) / width)));
+}
+/** Native iPhone HID brackets a reverse drag on a revealed row between 20pt
+ * (reopens) and 40pt (closes), slow and as a 150ms flick. Close at the midpoint:
+ * a commanded 40pt contact reaches WebKit as 39.5pt. */
+const reverseCloseDistance = 30;
+/** A revealed row closes after a deliberate reverse drag, without requiring
+ * the finger to traverse the entire tray. */
+export function rowSwipeShouldClose(initial, position, drag) {
+    return (Math.abs(position) < 40 ||
+        (Math.sign(initial) === Math.sign(position) &&
+            Math.sign(drag) === -Math.sign(initial) &&
+            Math.abs(drag) >= reverseCloseDistance));
+}
+/** Invert resistance once when a new finger catches a spring. */
+export function rowSwipeRaw(position, width, configuration, widths = defaultWidths) {
+    const side = position >= 0 ? 'leading' : 'trailing';
+    const edge = swipeEdge(configuration, side);
+    const limit = edge.allowsFullSwipe
+        ? swipeDragLimit(width, edge.actions.length, widths[side])
+        : swipeOpenWidth(edge.actions.length, widths[side]);
+    const excess = Math.max(0, Math.abs(position) - limit);
+    const resistance = edge.allowsFullSwipe && edge.actions.length <= 2 ? 0.25 : 0.2;
+    return (Math.sign(position) *
+        (Math.min(Math.abs(position), limit) +
+            excess / (resistance * Math.max(0.01, 1 - excess / width))));
+}
+export function primaryParts(primary) {
+    return [
+        ...primary.querySelectorAll('[data-satin-swipe-fill], [data-satin-swipe-label]'),
+    ];
+}
+export function primaryTransform(part, growth, middleWidth = 16) {
+    const trailing = part.dataset.satinSwipeDirection === 'trailing';
+    switch (part.dataset.satinSwipeFill) {
+        case 'middle':
+            return `scaleX(${1 + growth / middleWidth})`;
+        case 'end':
+            return `translate3d(${trailing ? 0 : growth}px,0,0)`;
+        case 'start':
+            return `translate3d(${trailing ? -growth : 0}px,0,0)`;
+        default:
+            return `translate3d(${(trailing ? -growth : growth) / 2}px,0,0)`;
+    }
+}
+/** Recover takeover from the presented capsule, including a caught settle. */
+export function presentedTakeover(primary, position) {
+    const middle = primary.querySelector('[data-satin-swipe-fill="middle"]');
+    if (!middle || typeof DOMMatrixReadOnly === 'undefined')
+        return 0;
+    const buttonWidth = Number.parseFloat(getComputedStyle(primary).width) || 60;
+    const count = primary.parentElement?.children.length ?? 1;
+    const inline = primary.closest('[data-satin-row-actions]')?.dataset.satinSwipeLabelLayout ===
+        'inline';
+    const ordinary = inline ? Math.max(0, Math.abs(position) - swipeOpenWidth(count, buttonWidth)) : 0;
+    const expanded = Math.max(0, Math.abs(position) - buttonWidth - 20);
+    if (expanded <= ordinary)
+        return 0;
+    const matrix = new DOMMatrixReadOnly(getComputedStyle(middle).transform);
+    const growth = (matrix.a - 1) * Math.max(1, buttonWidth - capsuleHeight(primary));
+    return clamp((growth - ordinary) / (expanded - ordinary));
+}
+export function createRowScrub(host, source, content, initial, width, configuration) {
+    if (!width || source.scrollWidth <= source.clientWidth)
+        return undefined;
+    const widths = swipeWidths(host);
+    const initialRaw = rowSwipeRaw(initial, width, configuration, widths);
+    const origin = source.scrollLeft;
+    const actionUpdates = [];
+    const contentFrame = swipeContentTrack(content);
+    for (const side of ['leading', 'trailing']) {
+        const tray = host.querySelector(`[data-satin-swipe-tray="${side}"]`);
+        const primary = tray.firstElementChild;
+        const sign = side === 'leading' ? 1 : -1;
+        actionUpdates.push((_now, _raw, position) => {
+            tray.style.opacity = position * sign > 0 ? '1' : '0';
+        });
+        if (primary) {
+            const edge = swipeEdge(configuration, side);
+            const actions = swipeActionTracks(primary, edge.actions.length, width, edge.allowsFullSwipe);
+            const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+            const caught = initial ? presentedTakeover(primary, initial) : 0;
+            const state = { from: caught, target: caught, velocity: 0, started: performance.now() };
+            const threshold = fullSwipeThreshold(width, edge.actions.length, side, widths[side], host.dataset.satinSwipeLabelLayout === 'inline');
+            const openWidth = swipeOpenWidth(edge.actions.length, widths[side]);
+            let previousRaw = Number.NaN;
+            let previousTakeover = Number.NaN;
+            const update = (now, raw, position) => {
+                const sample = takeoverSample(state.from, state.target, state.velocity, (now - state.started) / 1000);
+                const target = edge.allowsFullSwipe && raw * sign >= threshold ? 1 : 0;
+                if (target !== state.target) {
+                    state.from = sample.position;
+                    state.velocity = sample.velocity;
+                    state.target = target;
+                    state.started = now;
+                }
+                // Both spring states advance across reversals, but the hidden tray has
+                // no pixels to update. Read the scroll source before either tray writes.
+                if (position * sign <= 0)
+                    return;
+                const takeover = edge.actions.length === 1 && edge.allowsFullSwipe
+                    ? 1
+                    : reducedMotion
+                        ? target
+                        : Math.max(0, Math.min(1, sample.position));
+                if (raw === previousRaw && takeover === previousTakeover)
+                    return;
+                previousRaw = raw;
+                previousTakeover = takeover;
+                const rest = initial ? clamp(1 - Math.abs(raw - initialRaw) / openWidth) : 0;
+                for (const action of actions) {
+                    const frame = action.frame(position, raw, rest, takeover);
+                    // Avoid dirtying style when a capsule part did not change this frame.
+                    if (frame.transform !== undefined && action.element.style.transform !== frame.transform)
+                        action.element.style.transform = String(frame.transform);
+                    if (frame.opacity !== undefined && action.element.style.opacity !== String(frame.opacity))
+                        action.element.style.opacity = String(frame.opacity);
+                }
+            };
+            actionUpdates.push(update);
+        }
+    }
+    // WebKit owns touch arbitration and the scroll offset. Sample it once per
+    // frame and present the row, trays, and fitted takeover together. Mixing a
+    // compositor row with main-thread pills exposes every delayed main-thread frame.
+    let actionFrame = 0;
+    const flush = (now = performance.now()) => {
+        const raw = initialRaw + origin - source.scrollLeft;
+        const position = rowSwipePosition(raw, width, configuration, widths);
+        Object.assign(content.style, contentFrame(position, initial ? 1 : 0));
+        for (const update of actionUpdates)
+            update(now, raw, position);
+        return { raw, position };
+    };
+    const paintActions = (now) => {
+        flush(now);
+        actionFrame = requestAnimationFrame(paintActions);
+    };
+    paintActions(performance.now());
+    return {
+        flush,
+        rawPosition: () => initialRaw + origin - source.scrollLeft,
+        position: () => rowSwipePosition(initialRaw + origin - source.scrollLeft, width, configuration, widths),
+        cancel: () => {
+            cancelAnimationFrame(actionFrame);
+            // Outside contact, the settled side's visibility belongs to the row CSS.
+            host.querySelectorAll('[data-satin-swipe-tray]').forEach(tray => {
+                tray.style.opacity = '';
+            });
+        },
+    };
+}
+const defaultRowRadius = 26;
+const defaultRowShape = {
+    kind: 'roundedRectangle',
+    cornerRadius: defaultRowRadius,
+    cornerStyle: 'continuous',
+};
+const rowCorners = new WeakMap();
+/** Called by the row's existing ResizeObserver, never by its frame loop. */
+export function updateRowCorners(content, width, height, actions) {
+    const geometry = rowCorners.get(content) ?? { width, height };
+    Object.assign(geometry, {
+        width,
+        height,
+        revision: (geometry.revision ?? 0) + 1,
+        leading: swipeEdge(actions, 'leading').shape,
+        trailing: swipeEdge(actions, 'trailing').shape,
+    });
+    rowCorners.set(content, geometry);
+    for (const side of ['leading', 'trailing']) {
+        content.style.setProperty(`--satin-row-${side}-clip`, cornerClipPath(geometry[side] ?? defaultRowShape, width, height));
+    }
+    geometry.refresh?.();
+    geometry.resizeRelease?.();
+}
+/** Rebuild only geometry keyframes on resize. The existing animation keeps its
+ * timeline, velocity fit and current time, including an interrupted release. */
+export function resizeRowCornerAnimation(content, animation, frames) {
+    const geometry = rowCorners.get(content);
+    if (!geometry || !animation)
+        return;
+    const resize = () => {
+        const effect = animation.effect;
+        if (animation.playState !== 'idle' && effect instanceof KeyframeEffect)
+            effect.setKeyframes(frames());
+    };
+    geometry.resizeRelease = resize;
+    const clear = () => {
+        if (geometry.resizeRelease === resize)
+            geometry.resizeRelease = undefined;
+    };
+    animation.finished?.then(clear, clear);
+}
+/** Keep section end caps until the first inline action has entered. The
+ * revealed face has a fixed continuous corner, independent of text height. */
+export function swipeContentTrack(content) {
+    const host = content.closest('[data-satin-row-actions]');
+    const style = host ? getComputedStyle(host) : undefined;
+    const resting = [
+        style?.borderTopLeftRadius,
+        style?.borderTopRightRadius,
+        style?.borderBottomRightRadius,
+        style?.borderBottomLeftRadius,
+    ].map(value => Number.parseFloat(value ?? '') || 0);
+    const sectionEnd = resting.some(radius => radius > 0);
+    const geometry = rowCorners.get(content) ?? {
+        width: content.offsetWidth,
+        height: content.offsetHeight,
+    };
+    rowCorners.set(content, geometry);
+    geometry.resizeRelease = undefined;
+    const widths = host ? swipeWidths(host) : defaultWidths;
+    let previousKey = '';
+    let clipPath = '';
+    let lastPosition = 0;
+    let lastRest = 0;
+    const frame = (position, rest = 0) => {
+        lastPosition = position;
+        lastRest = rest;
+        const transform = `translate3d(${position}px,0,0)`;
+        if (position === 0)
+            return { transform, borderRadius: '', clipPath: 'none' };
+        const side = position >= 0 ? 'leading' : 'trailing';
+        const custom = geometry[side];
+        const inline = host?.dataset.satinSwipeLabelLayout === 'inline';
+        const progress = inline && sectionEnd
+            ? clamp((Math.abs(position) - widths[side] - 20) / 20)
+            : clamp(Math.abs(position));
+        const rounded = progress + (1 - progress) * rest;
+        // A settled or middle-row drag reuses its path. Only changing corners or
+        // a ResizeObserver geometry update rebuild the small cubic path.
+        const key = `${geometry.revision}:${geometry.width}:${geometry.height}:${side}:${rounded}`;
+        if (key !== previousKey) {
+            previousKey = key;
+            clipPath = custom
+                ? cornerClipPath(custom, geometry.width, geometry.height)
+                : `path('${roundedCornerPath(geometry.width, geometry.height, resting.map(start => start + (defaultRowRadius - start) * rounded))}')`;
+        }
+        return { transform, borderRadius: '0px', clipPath };
+    };
+    geometry.refresh = () => Object.assign(content.style, frame(lastPosition, lastRest));
+    return frame;
+}

package/dist/actions/swipeSpring.d.ts

@@ -0,0 +1,14 @@
+export declare function swipeReleasePosition(from: number, to: number, velocity: number, seconds: number, fit: {
+    stiffness: number;
+    damping: number;
+}): number;
+/** Native E counter-retimed leading three-action takeover, 24 samples.
+ * Entry RMS 0.00494, reversal RMS 0.04057 in normalized geometry. */
+export declare const swipeTakeover: {
+    readonly stiffness: 3741.169;
+    readonly damping: 122.3302;
+};
+export declare function takeoverSample(from: number, to: number, velocity: number, seconds: number): {
+    position: number;
+    velocity: number;
+};

package/dist/actions/swipeSpring.js

@@ -0,0 +1,35 @@
+export function swipeReleasePosition(from, to, velocity, seconds, fit) {
+    const decay = fit.damping / 2;
+    const discriminant = fit.stiffness - decay * decay;
+    const displacement = from - to;
+    if (Math.abs(discriminant) < 0.000001) {
+        return (to + Math.exp(-decay * seconds) * (displacement + (velocity + decay * displacement) * seconds));
+    }
+    if (discriminant < 0) {
+        const spread = Math.sqrt(-discriminant);
+        const slow = -decay + spread;
+        const fast = -decay - spread;
+        const coefficient = (velocity - fast * displacement) / (slow - fast);
+        return (to +
+            coefficient * Math.exp(slow * seconds) +
+            (displacement - coefficient) * Math.exp(fast * seconds));
+    }
+    const frequency = Math.sqrt(discriminant);
+    return (to +
+        Math.exp(-decay * seconds) *
+            (displacement * Math.cos(frequency * seconds) +
+                ((velocity + decay * displacement) / frequency) * Math.sin(frequency * seconds)));
+}
+/** Native E counter-retimed leading three-action takeover, 24 samples.
+ * Entry RMS 0.00494, reversal RMS 0.04057 in normalized geometry. */
+export const swipeTakeover = { stiffness: 3741.169, damping: 122.3302 };
+export function takeoverSample(from, to, velocity, seconds) {
+    const rate = swipeTakeover.damping / 2;
+    const displacement = from - to;
+    const coefficient = velocity + rate * displacement;
+    const decay = Math.exp(-rate * seconds);
+    return {
+        position: to + (displacement + coefficient * seconds) * decay,
+        velocity: (velocity - rate * coefficient * seconds) * decay,
+    };
+}

package/dist/actions/types.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+import type { SymbolName } from '../symbols/Symbol.js';
+import type { CornerShape } from '../shapes/corners.js';
+/** Shared by menus, context menus and row swipe actions. */
+export type Action = ActionItem | Readonly<{
+    section: readonly Action[];
+    label?: string;
+}> | Readonly<{
+    id: string;
+    label: string;
+    symbol?: SymbolName;
+    icon?: ReactNode;
+    disabled?: boolean;
+    submenu: readonly Action[];
+}>;
+/** A leaf command shared by menus, swipe actions, alerts and confirmation dialogs. */
+export type ActionItem = Readonly<{
+    id: string;
+    label: string;
+    accessibilityLabel?: string;
+    symbol?: SymbolName;
+    icon?: ReactNode;
+    role?: 'destructive' | 'cancel';
+    disabled?: boolean;
+    /** Selection semantics for menu-style pickers. Defined false values reserve the checkmark column. */
+    checked?: boolean;
+    onPress?: (() => void) | (() => Promise<void>);
+    tint?: string;
+}>;
+/** A swipe command may omit its visible title while retaining an accessible name. */
+export type SwipeActionItem = ActionItem | Readonly<Omit<ActionItem, 'label' | 'accessibilityLabel'> & {
+    label?: never;
+    accessibilityLabel: string;
+} & ({
+    symbol: SymbolName;
+} | {
+    icon: ReactNode;
+})>;
+export type SwipeAction = Action | SwipeActionItem;
+/** `swipeActions`: one or more edge configurations for a row. */
+export type SwipeActions = SwipeActionsConfiguration | readonly SwipeActionsConfiguration[];
+/** Swipe actions on one row edge. Full swipe is enabled unless explicitly disabled. */
+export type SwipeActionsConfiguration = Readonly<{
+    edge?: 'leading' | 'trailing';
+    /** Revealed row face. Omit for the native default; custom shapes are unrestricted. */
+    shape?: CornerShape;
+    allowsFullSwipe?: boolean;
+    actions: readonly SwipeAction[];
+}>;
+/** `contextMenu`: row commands and an optional preview. */
+export type ContextMenuConfiguration = readonly Action[] | Readonly<{
+    actions: readonly Action[];
+    preview?: ReactNode;
+}>;
+/** Row swipe actions and context-menu commands. */
+export type RowActionsProps = Readonly<{
+    swipeActions?: SwipeActions;
+    contextMenu?: ContextMenuConfiguration;
+}>;
+export declare function actionItems(actions: readonly Action[], inheritedDisabled?: boolean): ActionItem[];
+export declare function actionItems(actions: readonly SwipeAction[], inheritedDisabled?: boolean): SwipeActionItem[];
+export declare function contextDefinition(value: ContextMenuConfiguration): Readonly<{
+    actions: readonly Action[];
+    preview?: ReactNode;
+}>;
+/** Resolve each edge once, using a single configuration shape. */
+export declare function swipeEdge(value: SwipeActions | undefined, edge: 'leading' | 'trailing'): {
+    actions: SwipeActionItem[];
+    allowsFullSwipe: boolean;
+    shape: CornerShape | undefined;
+};