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

package/dist/navigation/transitionPose.js

@@ -0,0 +1,295 @@
+// The page side of a navigation transition: where the leading page, the revealed page, their
+// bar titles and the dim layer are at a given progress (bindingFrame), how a binding is painted
+// at rest and cleared, and the Web Animations tracks that move them.
+import { searchRowIsLifted } from './NavigationSearchRow.js';
+import { animateElement } from '../motion/animate.js';
+import { registerToolbarMotion } from './toolbarMotionOwner.js';
+import { swipeTraceEnabled, traceNavigationTracks } from '../motionProbe.js';
+import { NAVIGATION_DIM_OPACITY, NAVIGATION_EDGE_SHADOW_OPACITY, NAVIGATION_EDGE_SHADOW_WIDTH_PX, NAVIGATION_PARALLAX_FRACTION, clampProgress, } from './motionTokens.js';
+import { clearChromeStyle, endChromeTails, isChromeAnimation, isHeldChrome, liftRearSearchRow, primaryPrincipal, rearSearchRow, renderChrome, restoreRearSearchRow, startChromeTracks, } from './transitionChrome.js';
+// Consumed by the next binding on the same retained destination element.
+const pushOrigins = new WeakMap();
+/** 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 function samplePushOrigins(binding) {
+    const destination = binding
+        ? [binding.secondary, binding.secondaryTitle, binding.secondaryDim]
+        : [];
+    return destination
+        .filter((element) => Boolean(element))
+        .map(element => {
+        const style = getComputedStyle(element);
+        return {
+            element,
+            transform: style.transform,
+            opacity: style.opacity,
+            clipPath: style.clipPath,
+        };
+    });
+}
+/** Pins each sampled element at its pose until the next binding on it consumes the origin. */
+export function holdPushOrigins(binding, origins) {
+    for (const { element, transform, opacity, clipPath } of origins) {
+        pushOrigins.set(element, { transform, opacity, clipPath });
+        element.style.transform = transform;
+        element.style.opacity = opacity;
+        if (binding?.occludeSecondary && element === binding.secondary)
+            element.style.clipPath = clipPath;
+    }
+}
+/** A completed push drops the origins its revealed page did not consume. */
+export function releasePushOrigins(binding) {
+    if (binding?.direction === 'push') {
+        for (const element of [binding.secondary, binding.secondaryTitle, binding.secondaryDim]) {
+            if (element)
+                pushOrigins.delete(element);
+        }
+    }
+}
+/** The x offset WebKit presents for `element` now, scroll-driven and WAAPI tracks included. */
+export function presentedTranslateX(element) {
+    const transform = getComputedStyle(element).transform;
+    return new DOMMatrixReadOnly(transform === 'none' ? undefined : transform).m41;
+}
+/** 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 function prepareBinding(binding) {
+    endChromeTails(binding);
+    liftRearSearchRow(binding);
+    binding.primary.style.boxShadow = `${-NAVIGATION_EDGE_SHADOW_WIDTH_PX}px 0 ${NAVIGATION_EDGE_SHADOW_WIDTH_PX}px rgba(0, 0, 0, ${NAVIGATION_EDGE_SHADOW_OPACITY})`;
+}
+/** Tracks that do not move a page (titles, clips, the search row, chrome curves). An automatic
+ * transition waits only for its page tracks to be ready before it plays (playWhenPrepared). */
+const auxiliaryAnimations = new WeakSet();
+export function isPageAnimation(animation) {
+    return !auxiliaryAnimations.has(animation);
+}
+export function bindingFrame(binding, progress, bounded = true) {
+    const boundedProgress = bounded ? clampProgress(progress) : progress;
+    const pushing = binding.direction === 'push';
+    // A successor pop may inherit the rear page's still-negative parallax pose.
+    const primaryTranslation = pushing ? (1 - boundedProgress) * 100 : boundedProgress * 100;
+    const revealProgress = pushing ? boundedProgress : 1 - boundedProgress;
+    return {
+        dimOpacity: NAVIGATION_DIM_OPACITY * revealProgress,
+        primaryTransform: `translate3d(${primaryTranslation}%, 0, 0)`,
+        // Bar items narrower than the page move by the page's own width.
+        primaryPixelTransform: `translate3d(${(primaryTranslation / 100) * binding.width}px, 0, 0)`,
+        secondaryTransform: `translate3d(${-NAVIGATION_PARALLAX_FRACTION * revealProgress * 100}%, 0, 0)`,
+        // The rear itself moves by parallax, so its local clipping edge includes
+        // that displacement. This keeps transparent sheet pages from overlapping.
+        secondaryClipPath: `inset(0 ${Math.max(0, (1 - NAVIGATION_PARALLAX_FRACTION) * revealProgress * 100)}% 0 0)`,
+        // iOS 27: the rear page's bar title is covered by the front page. The titles share the header
+        // above both pages, so the rear title is clipped where the front page begins: the box moves
+        // left by the gap between the front page's edge and the rear page's, its text back right.
+        secondaryTitleClipTransform: `translate3d(${-(1 - NAVIGATION_PARALLAX_FRACTION) * revealProgress * 100}%, 0, 0)`,
+        secondaryTitleContentTransform: `translate3d(${(1 - NAVIGATION_PARALLAX_FRACTION) * revealProgress * 100}%, 0, 0)`,
+        secondarySearchRowTransform: searchRowIsLifted(rearSearchRow(binding))
+            ? 'none'
+            : `translate3d(${NAVIGATION_PARALLAX_FRACTION * revealProgress * binding.width}px, 0, 0)`,
+    };
+}
+export function renderBinding(binding, progress) {
+    const frame = bindingFrame(binding, progress, progress >= 0);
+    renderChrome(binding, progress >= 1);
+    binding.primary.style.transform = frame.primaryTransform;
+    if (binding.primaryTitle) {
+        binding.primaryTitle.style.transform = frame.primaryTransform;
+    }
+    const principal = primaryPrincipal(binding);
+    if (principal && binding.direction === 'pop')
+        principal.style.transform = frame.primaryPixelTransform;
+    if (!binding.secondary)
+        return;
+    binding.secondary.style.transform =
+        pushOrigins.get(binding.secondary)?.transform ?? frame.secondaryTransform;
+    if (binding.occludeSecondary)
+        binding.secondary.style.clipPath =
+            pushOrigins.get(binding.secondary)?.clipPath ?? frame.secondaryClipPath;
+    if (binding.secondaryTitle) {
+        binding.secondaryTitle.style.transform =
+            pushOrigins.get(binding.secondaryTitle)?.transform ?? frame.secondaryTransform;
+    }
+    if (binding.secondaryTitleClip)
+        binding.secondaryTitleClip.style.transform = frame.secondaryTitleClipTransform;
+    if (binding.secondaryTitleContent)
+        binding.secondaryTitleContent.style.transform = frame.secondaryTitleContentTransform;
+    const searchRow = rearSearchRow(binding);
+    if (searchRow)
+        searchRow.style.transform = frame.secondarySearchRowTransform;
+    if (binding.secondaryDim) {
+        binding.secondaryDim.style.opacity =
+            pushOrigins.get(binding.secondaryDim)?.opacity ?? String(frame.dimOpacity);
+    }
+}
+export function clearBinding(binding) {
+    restoreRearSearchRow(binding);
+    binding.primary.style.removeProperty('transform');
+    binding.primary.style.removeProperty('box-shadow');
+    binding.primaryTitle?.style.removeProperty('transform');
+    if (binding.backButtonVisual && !isHeldChrome(binding.backButtonVisual))
+        clearChromeStyle(binding.backButtonVisual);
+    const backInk = binding.backButtonVisual?.querySelector?.('[data-satin-navigation-back-ink]');
+    if (backInk && !isHeldChrome(backInk))
+        clearChromeStyle(backInk);
+    primaryPrincipal(binding)?.style.removeProperty('transform');
+    for (const element of [...(binding.primaryToolbar ?? []), ...(binding.secondaryToolbar ?? [])])
+        if (!isHeldChrome(element))
+            clearChromeStyle(element);
+    if (!binding.secondary)
+        return;
+    binding.secondary.style.removeProperty('transform');
+    if (binding.occludeSecondary)
+        binding.secondary.style.removeProperty('clip-path');
+    binding.secondaryTitle?.style.removeProperty('transform');
+    binding.secondaryTitleClip?.style.removeProperty('transform');
+    binding.secondaryTitleContent?.style.removeProperty('transform');
+    binding.secondaryDim?.style.removeProperty('opacity');
+    const searchRow = rearSearchRow(binding);
+    searchRow?.style.removeProperty('transform');
+    if (searchRow && !isHeldChrome(searchRow))
+        searchRow.style.removeProperty('opacity');
+}
+/** 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 function traceTracks(phase, binding, animations) {
+    if (!swipeTraceEnabled())
+        return;
+    const roles = new Map([
+        [binding.secondaryTitleContent, 'title-content'],
+        [binding.secondaryTitleClip, 'title-clip'],
+        [binding.secondaryDim, 'dim'],
+        [binding.backButtonVisual, 'back-button'],
+        [binding.secondaryTitle, 'secondary-title'],
+        [binding.primaryTitle, 'primary-title'],
+        [binding.secondary, 'secondary'],
+        [binding.primary, 'primary'],
+    ]);
+    for (const element of binding.primaryToolbar ?? [])
+        roles.set(element, 'primary-toolbar');
+    for (const element of binding.secondaryToolbar ?? [])
+        roles.set(element, 'secondary-toolbar');
+    traceNavigationTracks(`${binding.direction}-${phase}`, animations.map(animation => {
+        const target = animation.effect?.target;
+        const role = roles.get(target) ?? (isChromeAnimation(animation) ? 'chrome' : 'other');
+        return { animation, role, width: binding.width };
+    }));
+}
+export function animateBinding(binding, fromProgress, toProgress, timing) {
+    const animateTrack = (element, frames, options) => {
+        if (timing.preparePaused &&
+            typeof Animation !== 'undefined' &&
+            typeof KeyframeEffect !== 'undefined') {
+            // Element.animate() immediately queues playback on WebKit. Pausing it
+            // afterward can still submit that provisional pose to the compositor.
+            const animation = new Animation(new KeyframeEffect(element, frames, options), document.timeline);
+            animation.currentTime = 0;
+            animation.pause();
+            return animation;
+        }
+        return animateElement(element, frames, options);
+    };
+    const from = bindingFrame(binding, fromProgress);
+    const to = bindingFrame(binding, toProgress);
+    // A custom linear(...) easing can run on WebKit's main thread. Keep the
+    // exact measured spring samples, but lower them to property keyframes with
+    // ordinary linear segment interpolation, which the compositor can own.
+    const sampled = timing.progressSamples?.map(({ offset, value }) => ({
+        offset,
+        ...bindingFrame(binding, fromProgress + (toProgress - fromProgress) * value, false),
+    }));
+    const framesFor = (key, property) => sampled
+        ? sampled.map(frame => ({ offset: frame.offset, [property]: frame[key] }))
+        : [{ [property]: from[key] }, { [property]: to[key] }];
+    const options = {
+        duration: timing.duration,
+        easing: sampled ? 'linear' : timing.easing,
+        fill: 'both',
+    };
+    const animations = [];
+    const clipOrigin = binding.secondary ? pushOrigins.get(binding.secondary)?.clipPath : undefined;
+    const track = (element, key, property) => {
+        if (element) {
+            const frames = framesFor(key, property);
+            const origin = binding.direction === 'push' ? pushOrigins.get(element) : undefined;
+            if (origin) {
+                frames[0] = { [property]: origin[property] };
+                pushOrigins.delete(element);
+            }
+            const animation = animateTrack(element, frames, options);
+            if (element === primaryPrincipal(binding) && property === 'transform')
+                registerToolbarMotion(element, 'transform', animation);
+            if (element === binding.primaryTitle ||
+                element === binding.secondaryTitle ||
+                element === binding.secondaryTitleClip ||
+                element === binding.secondaryTitleContent ||
+                element === rearSearchRow(binding))
+                auxiliaryAnimations.add(animation);
+            animations.push(animation);
+        }
+    };
+    track(binding.primary, 'primaryTransform', 'transform');
+    track(binding.primaryTitle, 'primaryTransform', 'transform');
+    if (binding.direction === 'pop')
+        track(primaryPrincipal(binding), 'primaryPixelTransform', 'transform');
+    track(binding.secondary, 'secondaryTransform', 'transform');
+    track(binding.secondaryTitle, 'secondaryTransform', 'transform');
+    track(binding.secondaryTitleClip, 'secondaryTitleClipTransform', 'transform');
+    track(binding.secondaryTitleContent, 'secondaryTitleContentTransform', 'transform');
+    track(rearSearchRow(binding), 'secondarySearchRowTransform', 'transform');
+    track(binding.secondaryDim, 'dimOpacity', 'opacity');
+    if (binding.occludeSecondary && binding.secondary) {
+        const frames = framesFor('secondaryClipPath', 'clipPath');
+        if (binding.direction === 'push' && clipOrigin)
+            frames[0] = { clipPath: clipOrigin };
+        const animation = animateTrack(binding.secondary, frames, options);
+        auxiliaryAnimations.add(animation);
+        animations.push(animation);
+    }
+    // Chrome curves are time-based (NAVIGATION_CHROME_CURVES) and run only toward the end; a
+    // cancelling release keeps the chrome of the start, which renderChrome already shows.
+    if (toProgress >= 1)
+        for (const animation of startChromeTracks(binding, animateTrack)) {
+            auxiliaryAnimations.add(animation);
+            animations.push(animation);
+        }
+    return animations;
+}
+/** 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 function createScrollScrubTracks(binding, source, origin, adjustment) {
+    const Timeline = window.ScrollTimeline;
+    const range = source.scrollWidth - source.clientWidth;
+    const points = [
+        0,
+        1,
+        ...[0, 1].map(p => (origin + adjustment - p * binding.width) / range),
+    ].filter(p => p >= 0 && p <= 1);
+    const offsets = [...new Set(points)].sort((a, b) => a - b);
+    const frames = offsets.map(offset => ({
+        offset,
+        ...bindingFrame(binding, (origin + adjustment - offset * range) / binding.width),
+    }));
+    const options = {
+        timeline: new Timeline({ source, axis: 'x' }),
+        fill: 'both',
+        easing: 'linear',
+    };
+    const animations = [];
+    const track = (element, property, value) => {
+        if (element)
+            animations.push(animateElement(element, frames.map(f => ({ offset: f.offset, [property]: value(f) })), options));
+    };
+    track(binding.primary, 'transform', f => f.primaryTransform);
+    track(binding.primaryTitle, 'transform', f => f.primaryTransform);
+    track(primaryPrincipal(binding), 'transform', f => f.primaryPixelTransform);
+    track(binding.secondary, 'transform', f => f.secondaryTransform);
+    track(binding.secondaryTitle, 'transform', f => f.secondaryTransform);
+    track(binding.secondaryTitleClip, 'transform', f => f.secondaryTitleClipTransform);
+    track(binding.secondaryTitleContent, 'transform', f => f.secondaryTitleContentTransform);
+    track(rearSearchRow(binding), 'transform', f => f.secondarySearchRowTransform);
+    track(binding.secondaryDim, 'opacity', f => f.dimOpacity);
+    if (binding.occludeSecondary)
+        track(binding.secondary, 'clipPath', f => f.secondaryClipPath);
+    return animations;
+}

package/dist/navigation/types.d.ts

@@ -0,0 +1,133 @@
+import type { NavigationReleaseDecision } from './releaseDecision.js';
+import type { ComponentType } from 'react';
+import type { ScrollSnapshot } from '../scroll/types.js';
+declare const screenParamsType: unique symbol;
+export type PresentationKind = 'push';
+/** The progress phase of a navigation transition. */
+export type TransitionPhase = 'settled' | 'entering' | 'exiting';
+export type TransitionOperation = 'pop' | 'popToRoot' | 'push' | 'replace';
+export type NavigationBackButtonBehavior = 'automatic' | 'hidden';
+/** `toolbarTitleDisplayMode`; `inlineLarge` draws the large title inside the bar row. */
+export type TitleDisplayMode = 'inline' | 'large' | 'inlineLarge' | 'none';
+/** `toolbarVisibility(_:for: .navigationBar)`: a hidden bar reserves no row. */
+export type Visibility = 'automatic' | 'visible' | 'hidden';
+export type NavigationBarDefinition<Params = unknown> = Readonly<{
+    backButton?: NavigationBackButtonBehavior;
+    display?: TitleDisplayMode;
+    visibility?: Visibility;
+    title: string | ((params: Params) => string);
+    /** SwiftUI `navigationSubtitle`: a line under the title, inline or large. */
+    subtitle?: string;
+}>;
+export type TransitionControllerContext = Readonly<{
+    interactive: boolean;
+    operation: TransitionOperation;
+}>;
+export type TransitionBinding = Readonly<{
+    /** Transform-only mask for the fixed back control during depth changes. */
+    backButtonMask?: HTMLElement;
+    backButtonFromVisible?: boolean;
+    backButtonToVisible?: boolean;
+    /** Counter-transformed visual that keeps the masked control stationary. */
+    backButtonVisual?: HTMLElement;
+    direction: 'pop' | 'push';
+    /** Current route/source/region draw admission for an automatic push. */
+    glassReady?: Promise<void>;
+    /** The nested layer that owns this screen's incoming or outgoing motion. */
+    primary: HTMLElement;
+    /** The framework chrome title paired with the primary screen. */
+    primaryTitle?: HTMLElement;
+    /** The primary entry's bar toolbar slots (faded, never switched, by the transition). */
+    primaryToolbar?: readonly HTMLElement[];
+    /** The outer layer that owns parallax when this screen is revealed. */
+    secondary?: HTMLElement;
+    /** Transparent sheet pages expose only the rear area left of the front page. */
+    occludeSecondary?: boolean;
+    /** The revealed screen's dim layer, animated independently from transforms. */
+    secondaryDim?: HTMLElement;
+    /** The framework chrome title paired with the secondary screen. */
+    secondaryTitle?: HTMLElement;
+    /** The secondary title's clipping box and its counter-moved content: the rear title is covered
+     * by the front page (iOS 27), so it is clipped at that page's left edge. */
+    secondaryTitleClip?: HTMLElement;
+    secondaryTitleContent?: HTMLElement;
+    /** The secondary entry's bar toolbar slots. */
+    secondaryToolbar?: readonly HTMLElement[];
+    width: number;
+}>;
+export interface TransitionController {
+    readonly progress: number;
+    readonly interactionPhase?: 'held' | 'completing' | 'cancelling';
+    /** Transfers the visible destination into a subsequent push. */
+    finishForPush?(): void;
+    /** Relinquish the exposed page while the departing page keeps completing. */
+    yieldForPop?(): number | undefined;
+    /** Resume a cancelling pop at its presented pose. */
+    resumeInteractive?(): void;
+    /** Re-arm the shared native input source without ending a completing pop. */
+    prepareForNextGesture?(): void;
+    /** Starts controller-owned work after the transition state has been published. */
+    start?(): void;
+    /** Binds compositor work to the screen containers after React commits them. */
+    bind?(binding: TransitionBinding): () => void;
+    /** Direct manipulation updates progress without publishing Navigator state. */
+    setProgress?(progress: number): void;
+    /** Internal installed experiment: native scrolling supplies compositor progress. */
+    scrubFromScroll?(source: HTMLElement, origin: number, adjustment: number): void;
+    /** Resolves completion from delivered statistics and progress. A busy native
+     * continuation retains that endpoint while its presented pose advances. */
+    resolveInteractive?(velocityPointsPerSecond: number, finalRawProgress: number, cancelled: boolean, decision?: NavigationReleaseDecision, 
+    /** The lift's event time (performance.now() clock): the release clock starts there. */
+    liftAt?: number): void;
+    /** Resolves an interactive transition while preserving forward velocity. */
+    completeInteractive?(velocityPointsPerSecond: number, finalRawProgress?: number): void;
+    /** Returns an interactive transition to its pre-gesture state. */
+    cancelInteractive?(velocityPointsPerSecond: number, finalRawProgress?: number): void;
+    /** The leading page's presented offset as a fraction of the width (a pop's progress), read
+     * when a gesture takes this transition over: an interrupted push turns around there. */
+    presentedPose?(): number | undefined;
+    finish(): void;
+    cancel(): void;
+}
+export type TransitionCompletion = {
+    changed?(): void;
+    finish(): void;
+    cancel(): void;
+};
+export type TransitionControllerFactory = (completion: TransitionCompletion, context: TransitionControllerContext) => TransitionController;
+export type EntryTransition = Readonly<{
+    controller: TransitionController;
+    phase: TransitionPhase;
+}>;
+export type ScreenDefinition<Id extends string = string, Params = unknown> = Readonly<{
+    component: ComponentType;
+    restoration?: import('./routeCodec.js').RouteSchema<Params>;
+    id: Id;
+    navigation?: NavigationBarDefinition<Params>;
+    /** Semantic sidebar row identity, derived from this registered destination. */
+    splitSelection?: string | ((params: Params) => string);
+    [screenParamsType]?: Params;
+}>;
+export type AnyScreenDefinition = ScreenDefinition<string, any>;
+export type ScreenEntry<Id extends string = string, Params = unknown> = Readonly<{
+    key: string;
+    params: Params;
+    presentation: PresentationKind;
+    screenId: Id;
+    scrollSnapshot?: ScrollSnapshot;
+    transition: EntryTransition;
+}>;
+export type NavigatorState<Entry extends ScreenEntry = ScreenEntry> = Readonly<{
+    entries: readonly Entry[];
+}>;
+/** The lifecycle state of a retained navigation entry. */
+export type ScreenLifecycle = Readonly<{
+    isCovered: boolean;
+    phase: TransitionPhase;
+}>;
+/** Callbacks for a retained navigation entry appearing, being covered or disappearing. */
+export type ScreenLifecycleCallbacks = Readonly<{
+    appear?: () => void;
+    disappear?: () => void;
+}>;
+export {};

package/dist/navigation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/navigation/zoomDrag.d.ts

@@ -0,0 +1,3 @@
+import { type NavigatorStore } from './store.js';
+/** Installs the dismissal drag on a zoomed screen's element; returns its removal. */
+export declare function installZoomDismissDrag(screen: HTMLElement, entryKey: string, navigator: NavigatorStore): () => void;

package/dist/navigation/zoomDrag.js

@@ -0,0 +1,125 @@
+/*
+ * The zoom transition's interactive dismissal: on a screen that zoomed in from a source, a finger
+ * dragging down (with the content scrolled to its top) shrinks the screen, moves it with the
+ * finger and, on release, either zooms it back into the source or returns it to full screen.
+ *
+ * It uses touch events like the sheet's drag (presentation/PresentationSurface.tsx): the drag owns
+ * the touch only once it has moved mostly downward, so taps, horizontal back swipes and ordinary
+ * scrolling are untouched.
+ */
+import { navigatorTransitionRuntime } from './store.js';
+import { ZOOM_DRAG_START_DISTANCE } from './zoomMotion.js';
+import { beginZoomDrag, visibleZoomSource, zoomDragHandleOf } from './zoomTransition.js';
+/** How far back the release velocity looks: the finger's last ~5 frames. */
+const VELOCITY_WINDOW_MS = 80;
+/**
+ * Conservative admission, about 26.6 degrees from vertical. Native Music on iPad rejects
+ * dx 300 / dy 450 (33.7 degrees), 5/5. Its exact acceptance angle is not yet measured.
+ */
+const MAX_HORIZONTAL_TO_DOWNWARD_RATIO = 0.5;
+/** Installs the dismissal drag on a zoomed screen's element; returns its removal. */
+export function installZoomDismissDrag(screen, entryKey, navigator) {
+    let origin;
+    /** The drag has claimed this touch: WebKit's own pan never starts. */
+    let claimed = false;
+    let controller;
+    let samples = [];
+    const begin = (event) => {
+        const touch = event.touches[0];
+        const single = touch && event.touches.length === 1 && event.target instanceof Element;
+        origin = single
+            ? { x: touch.clientX, y: touch.clientY, time: event.timeStamp, target: event.target }
+            : undefined;
+        claimed = false;
+        samples = origin ? [origin] : [];
+    };
+    const translationOf = (touch) => ({
+        x: touch.clientX - origin.x,
+        y: touch.clientY - origin.y,
+    });
+    /**
+     * Decided on the first move. Measured with real touches on the sheet's drag: WebKit holds its
+     * own pan back only for the first touchmove, so a preventDefault sent later (at 10 pt) loses
+     * the race and the content rubber-bands under the shrinking screen.
+     */
+    const canClaim = (translation) => {
+        const downward = translation.y > 0 &&
+            Math.abs(translation.x) <= translation.y * MAX_HORIZONTAL_TO_DOWNWARD_RATIO;
+        return (downward &&
+            isScrolledToTop(origin.target, screen) &&
+            navigator[navigatorTransitionRuntime].canBeginInteractivePop() &&
+            visibleZoomSource(entryKey, document.body, screen) !== undefined);
+    };
+    /** The pop begins once the finger has moved far enough to be a drag rather than a tap. */
+    const beginPop = (translation) => {
+        if (Math.hypot(translation.x, translation.y) < ZOOM_DRAG_START_DISTANCE)
+            return;
+        beginZoomDrag(entryKey, { x: origin.x, y: origin.y });
+        controller = navigator[navigatorTransitionRuntime].beginInteractivePop();
+        if (!controller) {
+            origin = undefined;
+            claimed = false;
+        }
+    };
+    const move = (event) => {
+        const touch = event.touches[0];
+        if (!origin || !touch)
+            return;
+        samples = [...samples, { x: touch.clientX, y: touch.clientY, time: event.timeStamp }].filter(sample => event.timeStamp - sample.time <= VELOCITY_WINDOW_MS);
+        const translation = translationOf(touch);
+        if (!claimed && !canClaim(translation)) {
+            // This touch is a scroll, a tap or a back swipe: leave it alone until the finger lifts.
+            origin = undefined;
+            return;
+        }
+        claimed = true;
+        if (event.cancelable)
+            event.preventDefault();
+        if (!controller)
+            beginPop(translation);
+        // The handle exists once the pop has bound to its screens (after React commits it).
+        if (controller)
+            zoomDragHandleOf(controller)?.track(translation);
+    };
+    const end = () => {
+        const owned = controller;
+        controller = undefined;
+        origin = undefined;
+        claimed = false;
+        if (!owned)
+            return;
+        const handle = zoomDragHandleOf(owned);
+        if (handle)
+            handle.release(velocityOf(samples));
+        else
+            owned.cancelInteractive?.(0);
+        samples = [];
+    };
+    screen.addEventListener('touchstart', begin, { passive: true });
+    screen.addEventListener('touchmove', move, { passive: false });
+    screen.addEventListener('touchend', end);
+    screen.addEventListener('touchcancel', end);
+    return () => {
+        screen.removeEventListener('touchstart', begin);
+        screen.removeEventListener('touchmove', move);
+        screen.removeEventListener('touchend', end);
+        screen.removeEventListener('touchcancel', end);
+    };
+}
+/** Whether every scroll view between the touched element and the screen is at its top. */
+function isScrolledToTop(target, screen) {
+    for (let node = target; node && node !== screen; node = node.parentElement) {
+        if (node.scrollTop > 0)
+            return false;
+    }
+    return true;
+}
+/** Points per second over the last samples. */
+function velocityOf(samples) {
+    const first = samples[0];
+    const last = samples.at(-1);
+    if (!first || !last || last.time <= first.time)
+        return { x: 0, y: 0 };
+    const seconds = (last.time - first.time) / 1000;
+    return { x: (last.x - first.x) / seconds, y: (last.y - first.y) / seconds };
+}

package/dist/navigation/zoomGeometry.d.ts

@@ -0,0 +1,48 @@
+export type ZoomRect = Readonly<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+/** The window the screen is shown in: a rectangle in viewport points and its corner radius. */
+export type ZoomWindow = Readonly<{
+    rect: ZoomRect;
+    radius: number;
+}>;
+/** The styles of the two boxes that draw a screen inside a window. */
+export type ZoomWindowStyle = Readonly<{
+    /** The screen container: scaled into the window, shifted up so its bottom edge is the window's. */
+    containerTransform: string;
+    /** The motion layer: shifted back down so the content's top is the window's top. */
+    motionTransform: string;
+    /** The corner radius of both boxes, in their own (unscaled) points. */
+    borderRadius: string;
+}>;
+/** The scale that makes the screen's width fill the window. */
+export declare function contentScale(screen: ZoomRect, window: ZoomWindow): number;
+/**
+ * The styles that draw a screen laid out at `screen` inside `window`. Both boxes need
+ * `transform-origin: 0 0`, `overflow: hidden` and the screen's own layout frame.
+ */
+export declare function windowStyle(screen: ZoomRect, window: ZoomWindow): ZoomWindowStyle;
+/** The window `progress` of the way from `from` to `to`. Progress may overshoot 0…1 (springs). */
+export declare function interpolateWindow(from: ZoomWindow, to: ZoomWindow, progress: number): ZoomWindow;
+/** How open a window is: 0 at the source's width, 1 at the screen's. */
+export declare function openness(screen: ZoomRect, source: ZoomRect, rect: ZoomRect): number;
+/** The window's corner radius at an openness: from the source to the full page's clip. */
+export declare function windowRadius(open: number, sourceRadius: number, restingRadius: number): number;
+/**
+ * The window under a dismissing finger, as natively measured: dragging down narrows it (centred on
+ * the finger's sideways travel), shortens it faster still, and lifts its bottom edge with the
+ * square of the drag. `translation` is the finger's travel since it went down.
+ */
+export declare function dragRect(screen: ZoomRect, translation: Readonly<{
+    x: number;
+    y: number;
+}>): ZoomRect;
+/**
+ * The window under the edge back swipe, as natively measured: it shrinks uniformly, its left edge
+ * follows the finger (less the recognizer's 18 pt) and it shrinks toward the screen's middle
+ * height. `progress` is the finger's travel over the screen's width.
+ */
+export declare function edgeRect(screen: ZoomRect, progress: number): ZoomRect;