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

package/dist/navigation/transitionBindings.js

@@ -0,0 +1,106 @@
+/** Shared ownership for DOM painting, glass source selection and tracks. */
+export function transitionParticipants(entries) {
+    const groups = new Map();
+    entries.forEach((entry, index) => {
+        if (entry.transition.phase === 'settled')
+            return;
+        const group = groups.get(entry.transition.controller) ?? { entering: [], exiting: [] };
+        if (entry.transition.phase === 'entering')
+            group.entering.push(index);
+        else
+            group.exiting.push(index);
+        groups.set(entry.transition.controller, group);
+    });
+    return [...groups].flatMap(([controller, group]) => {
+        const entering = group.entering.at(-1);
+        const primaryIndex = entering ?? group.exiting.at(-1);
+        const secondaryIndex = entering !== undefined ? (group.exiting.at(-1) ?? entering - 1) : (group.exiting[0] ?? 0) - 1;
+        return primaryIndex === undefined || secondaryIndex < 0
+            ? []
+            : [
+                {
+                    controller,
+                    primaryIndex,
+                    secondaryIndex,
+                    direction: entering !== undefined ? 'push' : 'pop',
+                },
+            ];
+    });
+}
+/** The rear title's clipping box and content (NavigationChrome renders both in every layer). */
+function titleClip(layer) {
+    const clip = layer.querySelector?.('[data-satin-navigation-title-clip]');
+    const content = layer.querySelector?.('[data-satin-navigation-title-content]');
+    return clip && content ? { secondaryTitleClip: clip, secondaryTitleContent: content } : {};
+}
+export function collectTransitionBindings(entries, elements, width, navigation) {
+    const bindings = [];
+    const navigationBinding = (primaryIndex, secondaryIndex, direction) => {
+        if (!navigation)
+            return {};
+        const primaryEntry = entries[primaryIndex];
+        const secondaryEntry = entries[secondaryIndex];
+        if (!primaryEntry || !secondaryEntry)
+            return {};
+        const primaryTitle = navigation.titles.get(primaryEntry.key);
+        const secondaryTitle = navigation.titles.get(secondaryEntry.key);
+        const primaryBackVisible = navigation.backVisibleByEntry.get(primaryEntry.key) ?? false;
+        const secondaryBackVisible = navigation.backVisibleByEntry.get(secondaryEntry.key) ?? false;
+        const backFromVisible = direction === 'push' ? secondaryBackVisible : primaryBackVisible;
+        const backToVisible = direction === 'push' ? primaryBackVisible : secondaryBackVisible;
+        const backVisibilityChanges = backFromVisible !== backToVisible;
+        const primaryToolbar = [...(navigation.toolbars?.get(primaryEntry.key) ?? [])];
+        if (direction === 'pop') {
+            for (let index = primaryIndex - 1; index > secondaryIndex; index--) {
+                for (const slot of navigation.toolbars?.get(entries[index].key) ?? []) {
+                    if (!slot.childElementCount)
+                        continue;
+                    const placement = slot.dataset.satinNavigationToolbarSlot;
+                    if (!primaryToolbar.some(existing => existing.childElementCount &&
+                        existing.dataset.satinNavigationToolbarSlot === placement))
+                        primaryToolbar.push(slot);
+                }
+            }
+        }
+        const secondaryToolbar = navigation.toolbars?.get(secondaryEntry.key);
+        return {
+            ...(primaryToolbar?.length ? { primaryToolbar } : {}),
+            ...(secondaryToolbar?.length ? { secondaryToolbar } : {}),
+            ...(primaryTitle ? { primaryTitle } : {}),
+            ...(secondaryTitle ? { secondaryTitle, ...titleClip(secondaryTitle) } : {}),
+            ...(navigation.backButtonMask && navigation.backButtonVisual && backVisibilityChanges
+                ? {
+                    backButtonMask: navigation.backButtonMask,
+                    backButtonFromVisible: backFromVisible,
+                    backButtonToVisible: backToVisible,
+                    backButtonVisual: navigation.backButtonVisual,
+                }
+                : {}),
+        };
+    };
+    for (const { controller, primaryIndex, secondaryIndex, direction, } of transitionParticipants(entries)) {
+        if (!controller?.bind)
+            continue;
+        const primaryEntry = entries[primaryIndex], secondaryEntry = entries[secondaryIndex];
+        if (!primaryEntry || !secondaryEntry)
+            continue;
+        const primaryElements = elements.get(primaryEntry.key), secondaryElements = elements.get(secondaryEntry.key);
+        if (!primaryElements || !secondaryElements)
+            continue;
+        bindings.push({
+            binding: {
+                ...navigationBinding(primaryIndex, secondaryIndex, direction),
+                direction,
+                primary: primaryElements.motion,
+                secondary: secondaryElements.screen,
+                ...(primaryElements.screen.closest?.('.satin-sheet-content')
+                    ? { occludeSecondary: true }
+                    : {}),
+                secondaryDim: secondaryElements.dim,
+                width,
+            },
+            controller,
+        });
+    }
+    return bindings;
+}

package/dist/navigation/transitionChrome.d.ts

@@ -0,0 +1,31 @@
+import type { TransitionBinding } from './types.js';
+/** Presented search stays in the shared bar. An idle drawer travels with its page content. */
+export declare function rearSearchRow(binding: TransitionBinding): HTMLElement | undefined;
+/** Lifts the rear screen's search row out of its page for the transition (NavigationSearchRow). */
+export declare function liftRearSearchRow(binding: TransitionBinding): void;
+/** Returns a lifted rear search row to its page. */
+export declare function restoreRearSearchRow(binding: TransitionBinding): void;
+/** The primary screen's principal item is never faded (native): a push shows it at once in place,
+ * and a pop carries it off with its page (primaryPixelTransform). */
+export declare function primaryPrincipal(binding: TransitionBinding): HTMLElement | undefined;
+/** Chrome at either end of a transition (`atEnd`): held positions show the start. */
+export declare function renderChrome(binding: TransitionBinding, atEnd: boolean): void;
+export declare function clearChromeStyle(element: HTMLElement): void;
+/** Whether `element` is held from an interrupted transition (its inline style is the hold). */
+export declare function isHeldChrome(element: HTMLElement): boolean;
+export declare function isChromeAnimation(animation: Animation): boolean;
+/** Ends the previous transition's chrome tails on the items this binding will animate, holding
+ * each one where its tail had got to. */
+export declare function endChromeTails(binding: TransitionBinding): void;
+/** Starts the chrome curves of a transition sent to its end. A held item's curve runs on from
+ * the opacity it was held at. `animate` creates each track (paused while a push prepares). */
+export declare function startChromeTracks(binding: TransitionBinding, animate: (element: HTMLElement, frames: Keyframe[], options: KeyframeAnimationOptions) => Animation): Animation[];
+/** Called before `animation` is cancelled: a chrome curve's item is held where it is. */
+export declare function holdInterruptedChrome(animation: Animation): void;
+/** A completing transition's chrome curves that are still running outlive it (the incoming
+ * items of a completing release fade in after the page arrives); finished ones are dropped.
+ * Returns the animations that are not chrome curves. */
+export declare function keepChromeTails(animations: readonly Animation[]): Animation[];
+/** After a forced finish or cancel, each held item moves to its endpoint (`finished`: the end,
+ * otherwise the start) on the next frame, unless a successor transition has claimed it by then. */
+export declare function settleHeldChrome(binding: TransitionBinding, finished: boolean): void;

package/dist/navigation/transitionChrome.js

@@ -0,0 +1,380 @@
+// Navigation bar chrome during a push or pop: which bar items arrive and leave, the time-based
+// curve tracks that fade them, and how an interrupted item is held where it is so the next
+// transition can run it on from there.
+import { liftNavigationSearchRow } from './NavigationSearchRow.js';
+import { toolbarMaterialItems, toolbarMaterialRuns, toolbarSearchHidden, } from '../glass/toolbarMaterialContext.js';
+import { NAVIGATION_CHROME_CURVES, NAVIGATION_SEARCH_FIELD_APPEAR, chromeDissolve, leadingSwapFrames, } from './chromeCurves.js';
+import { registerToolbarMotion } from './toolbarMotionOwner.js';
+const restoreSearchRows = new WeakMap();
+const searchRows = new WeakMap();
+/** Presented search stays in the shared bar. An idle drawer travels with its page content. */
+export function rearSearchRow(binding) {
+    let row = searchRows.get(binding);
+    if (row === undefined) {
+        row =
+            binding.secondary?.querySelector?.('[data-satin-search][data-satin-search-presented] [data-satin-search-row]') ?? null;
+        searchRows.set(binding, row);
+    }
+    return row ?? undefined;
+}
+/** Lifts the rear screen's search row out of its page for the transition (NavigationSearchRow). */
+export function liftRearSearchRow(binding) {
+    const restoreSearch = liftNavigationSearchRow(rearSearchRow(binding));
+    if (restoreSearch)
+        restoreSearchRows.set(binding, restoreSearch);
+}
+/** Returns a lifted rear search row to its page. */
+export function restoreRearSearchRow(binding) {
+    restoreSearchRows.get(binding)?.();
+    restoreSearchRows.delete(binding);
+}
+function toolbarSlot(slots, placement) {
+    return slots?.find(slot => slot.dataset?.satinNavigationToolbarSlot === placement);
+}
+/** The primary screen's principal item is never faded (native): a push shows it at once in place,
+ * and a pop carries it off with its page (primaryPixelTransform). */
+export function primaryPrincipal(binding) {
+    return toolbarSlot(binding.primaryToolbar, 'principal');
+}
+/** Which toolbar enters: a push's primary (the destination), a pop's secondary. The primary
+ * principal belongs to neither: it is not faded. */
+function toolbarRoles(binding) {
+    const principal = primaryPrincipal(binding);
+    const primary = (binding.primaryToolbar ?? []).filter(slot => slot !== principal);
+    return binding.direction === 'push'
+        ? { incoming: primary, outgoing: binding.secondaryToolbar ?? [] }
+        : { incoming: binding.secondaryToolbar ?? [], outgoing: primary };
+}
+function backControlChanges(binding) {
+    return (binding.backButtonVisual !== undefined &&
+        binding.backButtonFromVisible !== undefined &&
+        binding.backButtonToVisible !== undefined &&
+        binding.backButtonFromVisible !== binding.backButtonToVisible);
+}
+/** A back control that replaces (or is replaced by) a leading glass item sits on the same spot.
+ * Native keeps ONE glass circle there and cross-fades only the symbols. The back control's glass
+ * carries the circle for the whole transition (ToolbarGlass hides the leading region under a
+ * visible back control), and only its chevron runs the back curve. */
+function leadingGlassSwap(binding) {
+    const leading = toolbarSlot(binding.secondaryToolbar, 'leading');
+    return (backControlChanges(binding) &&
+        leading !== undefined &&
+        !toolbarSearchHidden(leading) &&
+        toolbarMaterialItems(leading).length > 0);
+}
+/** The element the back curve fades: the chevron alone during a leading glass swap. */
+function backTrackElement(binding) {
+    const visual = binding.backButtonVisual;
+    if (!leadingGlassSwap(binding))
+        return visual;
+    return visual.querySelector?.('[data-satin-navigation-back-ink]') ?? visual;
+}
+/** Native scales each bar item about its own centre as it dissolves (NAVIGATION_CHROME_DISSOLVE).
+ * A slot can span the whole bar (the bottom bar spans the screen), so scaling the slot would carry
+ * its items toward the bar's ends: a bottom plus 168 pt from the centre moved 17 pt at the
+ * crossover, where native's stays put. The slot keeps the opacity and blur, which move nothing;
+ * each run of merged items (one glass capsule) scales about the capsule's centre. */
+function slotScaleTargets(slot) {
+    const targets = [];
+    for (const run of toolbarMaterialRuns(slot)) {
+        if (run.length === 1) {
+            targets.push({ element: run[0] });
+            continue;
+        }
+        // Layout offsets ignore any scale still on the members, so the centre is the resting one.
+        const left = Math.min(...run.map(member => member.offsetLeft));
+        const right = Math.max(...run.map(member => member.offsetLeft + member.offsetWidth));
+        const centre = (left + right) / 2;
+        for (const member of run)
+            targets.push({ element: member, origin: `${centre - member.offsetLeft}px 50%` });
+    }
+    return targets;
+}
+function withoutScale({ scale: _scale, ...frame }) {
+    return frame;
+}
+/** The items' share of a slot's dissolve frames: the scale alone. */
+function scaleFrames(frames, origin) {
+    return frames.map(({ offset, scale }) => ({
+        offset,
+        scale,
+        ...(origin ? { transformOrigin: origin } : {}),
+    }));
+}
+/** A chrome curve's dissolve keyframes, run from `origin` toward its last value. */
+function curveTrack(curve) {
+    return (origin) => {
+        const duration = curve.at(-1)[0];
+        const endpoint = curve.at(-1)[1];
+        const initial = curve[0][1];
+        const from = origin ?? initial;
+        return {
+            duration,
+            frames: curve.map(([time, opacity]) => ({
+                offset: time / duration,
+                ...chromeDissolve(endpoint + (from - endpoint) * ((opacity - endpoint) / (initial - endpoint))),
+            })),
+        };
+    };
+}
+/** The rear screen's search field fade: out on a push, back in on a pop, from `origin`. */
+function searchFieldFrames(direction, origin) {
+    const curve = NAVIGATION_SEARCH_FIELD_APPEAR;
+    const duration = curve.at(-1)[0];
+    const from = origin ?? (direction === 'push' ? 1 : 0);
+    return {
+        duration,
+        frames: curve.map(([time, shown]) => ({
+            offset: time / duration,
+            opacity: direction === 'push' ? from * (1 - shown) : from + (1 - from) * shown,
+        })),
+    };
+}
+/** The chrome tracks a transition runs when its page is sent to the end. During a leading glass
+ * swap the one circle swells and the leading symbols and the chevron shrink and grow inside it
+ * (NAVIGATION_LEADING_SWAP). */
+function chromeTracks(binding) {
+    const curves = NAVIGATION_CHROME_CURVES;
+    const roles = toolbarRoles(binding);
+    const pushing = binding.direction === 'push';
+    const swap = leadingGlassSwap(binding);
+    const swapped = (element) => swap && element.dataset?.satinNavigationToolbarSlot === 'leading';
+    // Empty slots need no track, except a push's destination: its screen can fill its slots after
+    // the transition is bound (they stay transparent until the curve shows them).
+    const filled = (element) => element.childElementCount !== 0;
+    const incoming = pushing ? roles.incoming : roles.incoming.filter(filled);
+    const leave = pushing ? curves.pushToolbarLeave : curves.popToolbarLeave;
+    const appear = pushing ? curves.pushToolbarAppear : curves.popToolbarAppear;
+    const track = (element, curve, part) => swapped(element)
+        ? { element, animation: origin => leadingSwapFrames(part, binding.direction, true, origin) }
+        : { element, animation: curveTrack(curve), slot: true };
+    const tracks = [
+        ...roles.outgoing.filter(filled).map(element => track(element, leave, 'leaving')),
+        ...incoming.map(element => track(element, appear, 'arriving')),
+    ];
+    if (backControlChanges(binding)) {
+        const arriving = binding.backButtonToVisible === true;
+        tracks.push({
+            element: backTrackElement(binding),
+            animation: swap
+                ? origin => leadingSwapFrames(arriving ? 'arriving' : 'leaving', binding.direction, false, origin)
+                : curveTrack(arriving ? curves.backAppear : curves.backLeave),
+        });
+        if (swap)
+            tracks.push({
+                element: binding.backButtonVisual,
+                animation: () => leadingSwapFrames('circle', binding.direction),
+                swell: true,
+            });
+    }
+    const searchRow = rearSearchRow(binding);
+    if (searchRow)
+        tracks.push({
+            element: searchRow,
+            animation: origin => searchFieldFrames(binding.direction, origin),
+        });
+    return tracks;
+}
+/** Chrome at either end of a transition (`atEnd`): held positions show the start. */
+export function renderChrome(binding, atEnd) {
+    // A held (preserved) item keeps its dissolve; a settled one has none.
+    const show = (element, settled) => {
+        const origin = chromeOrigins.get(element);
+        if (origin === undefined)
+            clearChromeStyle(element);
+        element.style.opacity = String(origin ?? settled);
+    };
+    const roles = toolbarRoles(binding);
+    for (const element of roles.incoming)
+        show(element, atEnd ? 1 : 0);
+    for (const element of roles.outgoing)
+        show(element, atEnd ? 0 : 1);
+    const principal = primaryPrincipal(binding);
+    if (principal)
+        principal.style.opacity = '1';
+    // The rear screen's field: shown under a push's start or at a pop's end.
+    const searchRow = rearSearchRow(binding);
+    if (searchRow)
+        show(searchRow, (binding.direction === 'push') !== atEnd ? 1 : 0);
+    if (backControlChanges(binding)) {
+        const visible = atEnd ? binding.backButtonToVisible : binding.backButtonFromVisible;
+        const element = backTrackElement(binding);
+        if (element !== binding.backButtonVisual)
+            binding.backButtonVisual.style.opacity = '1';
+        show(element, visible ? 1 : 0);
+    }
+}
+// Interrupted chrome. A transition that ends early (a forced finish or cancel, or a successor
+// taking over) leaves its bar items part-way through their curves. Each one is held at the
+// opacity it reached, and the next transition that binds it runs its own curve on from there.
+/** Chrome curves still running after their transition completed (a completing release ends
+ * before its incoming items have faded in). The next transition that binds the element ends it. */
+const chromeTails = new WeakMap();
+/** Each chrome curve animation's element. */
+const chromeAnimations = new WeakMap();
+/** Leading glass swap circles: an interrupted one returns to rest rather than being held. */
+const swellAnimations = new WeakSet();
+/** A held item's opacity, which the next curve on that item starts from. */
+const chromeOrigins = new WeakMap();
+/** Who holds an item: a successor that rebinds the item replaces the token, so a pending
+ * settle (settleHeldChrome) can tell that it no longer owns the item. */
+const chromeOriginOwners = new WeakMap();
+/** Item scale tracks (slotScaleTargets): held at their scale when interrupted, without an origin
+ * of their own (their slot's opacity is the origin the next curve runs on from). */
+const itemScaleAnimations = new WeakSet();
+/** Holds an interrupted item's scale where it is. */
+function preserveItemScale(element) {
+    const style = getComputedStyle(element);
+    element.style.scale = style.scale || '';
+    element.style.transformOrigin = style.transformOrigin || '';
+}
+/** Holds an interrupted chrome item where it is: its opacity and the dissolve that goes with it. */
+function preserveChromeOpacity(element) {
+    const style = getComputedStyle(element);
+    const opacity = Number(style.opacity);
+    if (!Number.isFinite(opacity))
+        return;
+    chromeOrigins.set(element, opacity);
+    chromeOriginOwners.set(element, {});
+    element.style.opacity = String(opacity);
+    element.style.scale = style.scale || '';
+    element.style.filter = style.filter || '';
+}
+export function clearChromeStyle(element) {
+    element.style.removeProperty('opacity');
+    element.style.removeProperty('scale');
+    element.style.removeProperty('filter');
+    if (!element.dataset?.satinNavigationToolbarSlot)
+        return;
+    for (const item of toolbarMaterialItems(element)) {
+        item.style.removeProperty('scale');
+        item.style.removeProperty('transform-origin');
+    }
+}
+/** A tail or held hold on `element`, ended by the binding that takes it over. */
+function endTail(element) {
+    const tail = chromeTails.get(element);
+    if (tail) {
+        if (itemScaleAnimations.has(tail))
+            preserveItemScale(element);
+        else if (!swellAnimations.has(tail))
+            preserveChromeOpacity(element);
+        tail.cancel();
+    }
+    chromeTails.delete(element);
+    if (chromeOrigins.has(element))
+        chromeOriginOwners.set(element, {});
+}
+/** Whether `element` is held from an interrupted transition (its inline style is the hold). */
+export function isHeldChrome(element) {
+    return chromeOrigins.has(element);
+}
+export function isChromeAnimation(animation) {
+    return chromeAnimations.has(animation);
+}
+/** Ends the previous transition's chrome tails on the items this binding will animate, holding
+ * each one where its tail had got to. */
+export function endChromeTails(binding) {
+    const slots = [...(binding.primaryToolbar ?? []), ...(binding.secondaryToolbar ?? [])];
+    const elements = [
+        ...slots,
+        ...slots.flatMap(slot => toolbarMaterialItems(slot)),
+        ...(binding.backButtonVisual ? [binding.backButtonVisual] : []),
+        ...(backControlChanges(binding) ? [backTrackElement(binding)] : []),
+    ];
+    for (const element of elements)
+        endTail(element);
+}
+/** Starts the chrome curves of a transition sent to its end. A held item's curve runs on from
+ * the opacity it was held at. `animate` creates each track (paused while a push prepares). */
+export function startChromeTracks(binding, animate) {
+    const animations = [];
+    for (const { element, animation: track, swell, slot } of chromeTracks(binding)) {
+        const origin = chromeOrigins.get(element);
+        chromeOrigins.delete(element);
+        chromeOriginOwners.delete(element);
+        const { frames, duration } = track(origin);
+        // Held at its last value until the transition ends (the page usually runs longer).
+        const options = { duration, easing: 'linear', fill: 'both' };
+        const animation = animate(element, slot ? frames.map(withoutScale) : frames, options);
+        chromeAnimations.set(animation, element);
+        if (slot)
+            registerToolbarMotion(element, 'opacity', animation);
+        if (swell)
+            swellAnimations.add(animation);
+        animations.push(animation);
+        if (!slot)
+            continue;
+        for (const target of slotScaleTargets(element)) {
+            const scale = animate(target.element, scaleFrames(frames, target.origin), options);
+            chromeAnimations.set(scale, target.element);
+            registerToolbarMotion(target.element, 'scale', scale);
+            itemScaleAnimations.add(scale);
+            animations.push(scale);
+        }
+    }
+    return animations;
+}
+/** Called before `animation` is cancelled: a chrome curve's item is held where it is. */
+export function holdInterruptedChrome(animation) {
+    const element = chromeAnimations.get(animation);
+    if (!element || swellAnimations.has(animation))
+        return;
+    if (itemScaleAnimations.has(animation))
+        preserveItemScale(element);
+    else
+        preserveChromeOpacity(element);
+}
+/** A completing transition's chrome curves that are still running outlive it (the incoming
+ * items of a completing release fade in after the page arrives); finished ones are dropped.
+ * Returns the animations that are not chrome curves. */
+export function keepChromeTails(animations) {
+    const kept = [];
+    for (const animation of animations) {
+        const element = chromeAnimations.get(animation);
+        if (!element)
+            kept.push(animation);
+        else if (animation.playState === 'finished')
+            animation.cancel();
+        else {
+            chromeTails.set(element, animation);
+            animation.onfinish = () => {
+                animation.cancel();
+                if (chromeTails.get(element) === animation)
+                    chromeTails.delete(element);
+            };
+        }
+    }
+    return kept;
+}
+/** After a forced finish or cancel, each held item moves to its endpoint (`finished`: the end,
+ * otherwise the start) on the next frame, unless a successor transition has claimed it by then. */
+export function settleHeldChrome(binding, finished) {
+    const roles = toolbarRoles(binding);
+    const endpoints = [
+        ...roles.incoming.map(element => [element, finished ? 1 : 0]),
+        ...roles.outgoing.map(element => [element, finished ? 0 : 1]),
+    ];
+    if (backControlChanges(binding)) {
+        const visible = finished ? binding.backButtonToVisible : binding.backButtonFromVisible;
+        endpoints.push([binding.backButtonVisual, visible ? 1 : 0]);
+    }
+    const searchRow = rearSearchRow(binding);
+    if (searchRow)
+        endpoints.push([searchRow, (binding.direction === 'push') !== finished ? 1 : 0]);
+    for (const [element, opacity] of endpoints) {
+        const owner = chromeOriginOwners.get(element);
+        if (!owner)
+            continue;
+        // An immediate successor claims the sampled opacity while binding, even if its start is deferred.
+        window.requestAnimationFrame(() => {
+            if (chromeOriginOwners.get(element) !== owner)
+                return;
+            chromeOrigins.delete(element);
+            chromeOriginOwners.delete(element);
+            // The held blur and scale go with the held opacity: a settled item is sharp.
+            clearChromeStyle(element);
+            element.style.opacity = String(opacity);
+        });
+    }
+}

package/dist/navigation/transitionPose.d.ts

@@ -0,0 +1,52 @@
+import type { NavigationReleaseSample } from './releaseTrajectory.js';
+import type { TransitionBinding } from './types.js';
+type PushOrigin = Readonly<{
+    element: HTMLElement;
+    transform: string;
+    opacity: string;
+    clipPath: string;
+}>;
+/** Samples the revealed page's presented pose when a push interrupts a pop, so the push can
+ * carry that page on from where it is rather than from its rest pose. */
+export declare function samplePushOrigins(binding: TransitionBinding | undefined): PushOrigin[];
+/** Pins each sampled element at its pose until the next binding on it consumes the origin. */
+export declare function holdPushOrigins(binding: TransitionBinding | undefined, origins: readonly PushOrigin[]): void;
+/** A completed push drops the origins its revealed page did not consume. */
+export declare function releasePushOrigins(binding: TransitionBinding | undefined): void;
+/** The x offset WebKit presents for `element` now, scroll-driven and WAAPI tracks included. */
+export declare function presentedTranslateX(element: HTMLElement): number;
+/** Readies a new binding: ends the chrome tails it takes over, lifts the rear search row out of
+ * its page, and gives the leading page its edge shadow. */
+export declare function prepareBinding(binding: TransitionBinding): void;
+type BindingFrame = Readonly<{
+    dimOpacity: number;
+    primaryTransform: string;
+    /** The primary page's travel in pixels, for bar items narrower than the page. */
+    primaryPixelTransform: string;
+    secondaryTransform: string;
+    secondaryClipPath: string;
+    /** The rear title's clipping box: its right edge follows the front page's left edge. */
+    secondaryTitleClipTransform: string;
+    /** Counter-moves the rear title's text so it stays where its page is. */
+    secondaryTitleContentTransform: string;
+    /** Counter-moves the rear screen's presented search field so it stays in place on screen. */
+    secondarySearchRowTransform: string;
+}>;
+export type NavigationAnimationTiming = Readonly<{
+    duration: number;
+    easing: string;
+    progressSamples?: readonly NavigationReleaseSample[];
+    preparePaused?: boolean;
+}>;
+export declare function isPageAnimation(animation: Animation): boolean;
+export declare function bindingFrame(binding: TransitionBinding, progress: number, bounded?: boolean): BindingFrame;
+export declare function renderBinding(binding: TransitionBinding, progress: number): void;
+export declare function clearBinding(binding: TransitionBinding): void;
+/** Swipe trace (diagnostic, off unless scripts/test-support/recorder.js installed its sink): name
+ * each track by the binding element it moves so the recorder can sample it every frame. */
+export declare function traceTracks(phase: string, binding: TransitionBinding, animations: readonly Animation[]): void;
+export declare function animateBinding(binding: TransitionBinding, fromProgress: number, toProgress: number, timing: NavigationAnimationTiming): Animation[];
+/** Scroll-driven tracks that follow the private native scroller during a back swipe. Held chrome
+ * is constant (the start's, renderChrome), so no chrome follows the scroller. */
+export declare function createScrollScrubTracks(binding: TransitionBinding, source: HTMLElement, origin: number, adjustment: number): Animation[];
+export {};