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

package/dist/motion/animate.js

@@ -0,0 +1,79 @@
+/** WAAPI has no animationstart event. Announce framework-owned motion so glass inside
+ * the animated element can follow its compositor geometry without an idle frame loop. */
+const listeners = new WeakMap();
+const layoutAnimations = new WeakMap();
+export function hasLayoutAnimation(scope) {
+    const animations = layoutAnimations.get(scope);
+    if (!animations)
+        return false;
+    for (const animation of animations) {
+        if (animation.playState === 'running')
+            return true;
+    }
+    return false;
+}
+export function observeAnimations(element, listener) {
+    let callbacks = listeners.get(element);
+    if (!callbacks) {
+        callbacks = new Set();
+        listeners.set(element, callbacks);
+    }
+    callbacks.add(listener);
+    return () => {
+        if (!callbacks.delete(listener))
+            return;
+        if (!callbacks.size)
+            listeners.delete(element);
+    };
+}
+export function announceAnimation(element) {
+    for (const listener of listeners.get(element) ?? [])
+        listener();
+}
+export function animateElement(element, frames, options) {
+    const animation = element.animate(frames, options);
+    announceAnimation(element);
+    return animation;
+}
+/** Height/width motion can move siblings, so notify the containing layout scope. */
+export function animateLayout(element, frames, options) {
+    const scope = element.parentElement ?? element;
+    const animation = element.animate(frames, options);
+    let animations = layoutAnimations.get(scope);
+    if (!animations) {
+        animations = new Set();
+        layoutAnimations.set(scope, animations);
+    }
+    animations.add(animation);
+    const complete = () => {
+        animations.delete(animation);
+        if (!animations.size)
+            layoutAnimations.delete(scope);
+        announceAnimation(scope);
+    };
+    animation.finished?.then(complete, complete);
+    announceAnimation(scope);
+    return animation;
+}
+/**
+ * The document timeline's time minus the performance clock's, in milliseconds. Both start at
+ * the document's time origin; the timeline holds the current frame's time, so the two normally
+ * differ by less than a frame.
+ */
+export function timelineOffset() {
+    const timeline = Number(document.timeline?.currentTime ?? Number.NaN);
+    return Number.isFinite(timeline) ? timeline - performance.now() : 0;
+}
+/** More than any frame can explain: the timeline is not on the performance clock. */
+const TIMELINE_DRIFT_MS = 1000;
+/**
+ * `at` (performance clock) as a start time on the document timeline, for animations whose
+ * renderer track uses the same `at`. It is `at` itself unless the clocks have come apart by more
+ * than a frame. A timeline held back across a suspension would otherwise keep every later run
+ * in its before phase (`fill: 'both'` shows the first keyframe), so the run would never finish.
+ * That drift has not been measured on a device. The resume readout reports `timelineOffset`.
+ */
+export function timelineStart(at) {
+    const offset = timelineOffset();
+    return Math.abs(offset) > TIMELINE_DRIFT_MS ? at + offset : at;
+}

package/dist/motion/animationValue.d.ts

@@ -0,0 +1,25 @@
+import type { MenuSpring } from '../glass/lens/menuSpring.js';
+declare const brand: unique symbol;
+/** An opaque spring timing value for `withAnimation`. Use a named value or `Animation.spring`. */
+export type Animation = Readonly<{
+    [brand]: true;
+}>;
+/** Duration and bounce options for `Animation.spring`. */
+export type SpringOptions = Readonly<{
+    /** The perceptual duration in milliseconds. Defaults to 500. */
+    durationMs?: number;
+    /** 0 settles without overshoot. Values are clamped to 0 through 0.99. Defaults to 0. */
+    bounce?: number;
+}>;
+/** SwiftUI's named springs. `default` is the curve `withAnimation` uses with no argument. */
+export declare const Animation: Readonly<{
+    spring: (options?: SpringOptions) => Animation;
+    smooth: Animation;
+    snappy: Animation;
+    bouncy: Animation;
+    default: Animation;
+}>;
+export declare const DEFAULT_ANIMATION_DURATION_MS = 500;
+/** The spring with a unit displacement and the given initial velocity (units per second). */
+export declare function unitSpring(animation: Animation, velocity: number): MenuSpring;
+export {};

package/dist/motion/animationValue.js

@@ -0,0 +1,42 @@
+const brand = Symbol('satin.animation');
+/**
+ * SwiftUI's `spring(duration:bounce:)` mapping, as Apple documents it: the duration is the
+ * period of the undamped spring (omega = 2π / duration), and bounce is 1 − damping ratio for
+ * bounce ≥ 0. SwiftUI's negative (over-damped) bounces are not offered: the shared spring
+ * solver (glass/lens/menuSpring.ts) models damping ratios up to 1.
+ */
+function spring({ durationMs = 500, bounce = 0 } = {}) {
+    if (!Number.isFinite(durationMs) || !Number.isFinite(bounce)) {
+        throw new RangeError('Animation.spring requires finite durationMs and bounce values.');
+    }
+    const seconds = Math.max(durationMs, 1) / 1000;
+    const omega = (2 * Math.PI) / seconds;
+    const zeta = 1 - Math.min(Math.max(bounce, 0), 0.99);
+    const animation = Object.freeze({ [brand]: true, omega, zeta });
+    return animation;
+}
+/** SwiftUI's named springs. `default` is the curve `withAnimation` uses with no argument. */
+export const Animation = Object.freeze({
+    spring,
+    /** SwiftUI `.smooth`: duration 0.5 s, bounce 0. */
+    smooth: spring({ durationMs: 500, bounce: 0 }),
+    /** SwiftUI `.snappy`: duration 0.5 s, bounce 0.15. */
+    snappy: spring({ durationMs: 500, bounce: 0.15 }),
+    /** SwiftUI `.bouncy`: duration 0.5 s, bounce 0.3. */
+    bouncy: spring({ durationMs: 500, bounce: 0.3 }),
+    /** SwiftUI `.default`. The value is the measured fit recorded in the measured reference
+     * (matchedGeometryEffect, October 11); see DEFAULT_ANIMATION_DURATION_MS. */
+    get default() {
+        return defaultAnimation;
+    },
+});
+/* The perceptual duration of SwiftUI's `.default` animation on iOS 27, which is a critically
+ * damped spring. Source: the stock SwiftUI matchedGeometryEffect fixture recorded by the
+ * matched-geometry implementation (the measured reference, October 11). */
+export const DEFAULT_ANIMATION_DURATION_MS = 500;
+const defaultAnimation = spring({ durationMs: DEFAULT_ANIMATION_DURATION_MS, bounce: 0 });
+/** The spring with a unit displacement and the given initial velocity (units per second). */
+export function unitSpring(animation, velocity) {
+    const { omega, zeta } = animation;
+    return { delay: 0, omega, zeta, velocity };
+}

package/dist/motion/composerMotion.d.ts

@@ -0,0 +1,3 @@
+export declare function allowsComposerMotion(element: HTMLElement): boolean;
+export declare const INSERTION_DURATION_MS: number;
+export declare const insertionProgress: number[];

package/dist/motion/composerMotion.js

@@ -0,0 +1,15 @@
+import { menuSpring, menuSpringSettle } from '../glass/lens/menuSpring.js';
+export function allowsComposerMotion(element) {
+    return (typeof element.animate === 'function' &&
+        !element.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+// iOS 27 Messages three-line send, native older-text frames 24..70, Oct 15.
+// The thread rises 46 pt without the outgoing bubble's shape spring. Critically
+// damped fit: omega 21.2; RMS .357 pt, maximum .915 pt across 47 original samples.
+// Native VFR footage remains diagnostic calibration, not cadence qualification.
+const insertionSpring = { delay: 0, omega: 21.2, zeta: 1, velocity: 0 };
+export const INSERTION_DURATION_MS = menuSpringSettle(insertionSpring);
+const insertionSteps = Math.ceil(INSERTION_DURATION_MS / (1000 / 60));
+export const insertionProgress = Array.from({ length: insertionSteps + 1 }, (_, index) => index === insertionSteps
+    ? 1
+    : 1 - menuSpring(insertionSpring, (index / insertionSteps) * INSERTION_DURATION_MS).value);

package/dist/motion/layoutTransaction.d.ts

@@ -0,0 +1,7 @@
+import type { Animation } from './animationValue.js';
+/** Layout owners capture before React commits and animate after every owner has committed. */
+type Capture = () => (animation: Animation | null) => void;
+export declare function registerLayoutAnimation(capture: Capture): () => void;
+export declare function isLayoutTransaction(): boolean;
+export declare function commitAnimatedLayout(animation: Animation, update: () => void): void;
+export {};

package/dist/motion/layoutTransaction.js

@@ -0,0 +1,28 @@
+const captures = new Set();
+let depth = 0;
+export function registerLayoutAnimation(capture) {
+    captures.add(capture);
+    return () => {
+        captures.delete(capture);
+    };
+}
+export function isLayoutTransaction() {
+    return depth > 0;
+}
+export function commitAnimatedLayout(animation, update) {
+    // An inner withAnimation joins the outer synchronous commit.
+    if (depth)
+        return update();
+    const completions = [...captures].map(capture => capture());
+    depth++;
+    let committed = false;
+    try {
+        update();
+        committed = true;
+    }
+    finally {
+        depth--;
+        for (const complete of completions)
+            complete(committed ? animation : null);
+    }
+}

package/dist/motion/matchedGeometry.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { Animation } from './animationValue.js';
+declare const namespaceBrand: unique symbol;
+/** `Namespace.ID`: the scope `MatchedGeometryEffect` ids are matched within. */
+export type NamespaceID = Readonly<{
+    [namespaceBrand]: true;
+}>;
+/** `@Namespace`: a stable id scope for `MatchedGeometryEffect`, one per component. */
+export declare function useNamespace(): NamespaceID;
+/**
+ * A namespace declared once at module scope, for views that share no parent component: a
+ * `MatchedTransitionSource` in one route and the screen it zooms into in another. Inside one
+ * component, use `useNamespace()`.
+ * @example
+ * export const albumZoom = defineNamespace()
+ * @experimental Shared by the zoom navigation transition.
+ */
+export declare function defineNamespace(): NamespaceID;
+/** Props of `MatchedGeometryEffect`. */
+export type MatchedGeometryEffectProps = Readonly<{
+    /** Views with the same id in the same namespace are one view in two places. */
+    id: string;
+    in: NamespaceID;
+    /** Whether this view provides the frame its partners start from. Defaults to true. */
+    isSource?: boolean;
+    /** One element. Its first element is the view that moves. */
+    children: ReactNode;
+}>;
+/**
+ * SwiftUI `matchedGeometryEffect(id:in:isSource:)`: when a `withAnimation` change removes this
+ * view and inserts another with the same id, the new one moves from the old one's frame to its
+ * own while the two cross-fade. A view that only moves or resizes
+ * animates from where it was. A matched view with no partner fades in or out.
+ *
+ * Wrap one element that has no transform of its own. Changes made outside `withAnimation`
+ * apply at once, as in SwiftUI.
+ * @example
+ * const art = useNamespace()
+ * <MatchedGeometryEffect id="artwork" in={art}><Image src={cover} alt="" /></MatchedGeometryEffect>
+ * @experimental Frame matching only (SwiftUI's default `properties: .frame`, `anchor: .center`).
+ * A non-source view does not follow its source outside an animation.
+ */
+export declare function MatchedGeometryEffect({ id, in: namespace, isSource, children, }: MatchedGeometryEffectProps): import("react").JSX.Element;
+/**
+ * `withAnimation` applies the state changes in `update`, then animates the
+ * `MatchedGeometryEffect` views they move, insert or remove. Call it from an event handler.
+ * Keyed List rows also move to their new positions. Other views take their new layout at once.
+ * Returns the callback result and propagates errors. Only synchronous updates participate.
+ * Nested calls share the outer List transaction; per-update nested timing is not supported.
+ * @example
+ * <Button onPress={() => withAnimation(() => setShowQueue(!showQueue))}>Playing Next</Button>
+ */
+export declare function withAnimation<Result>(update: () => Result): Result;
+export declare function withAnimation<Result>(animation: Animation, update: () => Result): Result;
+export {};

package/dist/motion/matchedGeometry.js

@@ -0,0 +1,412 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { animateElement } from './animate.js';
+import { Animation } from './animationValue.js';
+import { commitAnimatedLayout } from './layoutTransaction.js';
+import { fadeSettleMs, runFrameTimes, sampleChannel, sampleProgress, } from './springPath.js';
+/*
+ * matchedGeometryEffect and withAnimation, the FLIP way:
+ *
+ * 1. Before the state change, read each matched view's presented frame (running motion
+ *    included) and, for a view already moving, its velocity from the run's own spring.
+ * 2. Commit the change synchronously (flushSync), so layout is final in the same task.
+ * 3. Cancel the old runs, read each view's new layout frame once, and start one WAAPI run per
+ *    element: transform and opacity only, sampled at 60 Hz from the spring, so WebKit's
+ *    compositor plays it with no per-frame work in the document.
+ *
+ * A view whose id leaves and enters in the same change keeps its identity: the new view starts
+ * from the old one's frame and fades in, and the old view stays on screen as a "ghost" (its own
+ * detached DOM node, already decoded) that travels with it and fades out. That cross-fade is
+ * SwiftUI's: a stock iOS 27 fixture shows both views on one frame, with opacities that sum to 1
+ * on the animation's own spring (the measured reference, October 11).
+ */
+const namespaceBrand = Symbol('satin.namespace');
+const entries = new Set();
+/** `@Namespace`: a stable id scope for `MatchedGeometryEffect`, one per component. */
+export function useNamespace() {
+    const [namespace] = useState(defineNamespace);
+    return namespace;
+}
+/**
+ * A namespace declared once at module scope, for views that share no parent component: a
+ * `MatchedTransitionSource` in one route and the screen it zooms into in another. Inside one
+ * component, use `useNamespace()`.
+ * @example
+ * export const albumZoom = defineNamespace()
+ * @experimental Shared by the zoom navigation transition.
+ */
+export function defineNamespace() {
+    return Object.freeze({ [namespaceBrand]: true });
+}
+/**
+ * SwiftUI `matchedGeometryEffect(id:in:isSource:)`: when a `withAnimation` change removes this
+ * view and inserts another with the same id, the new one moves from the old one's frame to its
+ * own while the two cross-fade. A view that only moves or resizes
+ * animates from where it was. A matched view with no partner fades in or out.
+ *
+ * Wrap one element that has no transform of its own. Changes made outside `withAnimation`
+ * apply at once, as in SwiftUI.
+ * @example
+ * const art = useNamespace()
+ * <MatchedGeometryEffect id="artwork" in={art}><Image src={cover} alt="" /></MatchedGeometryEffect>
+ * @experimental Frame matching only (SwiftUI's default `properties: .frame`, `anchor: .center`).
+ * A non-source view does not follow its source outside an animation.
+ */
+export function MatchedGeometryEffect({ id, in: namespace, isSource = true, children, }) {
+    const wrapper = useRef(null);
+    useLayoutEffect(() => {
+        const entry = { namespace, id, isSource, wrapper: wrapper.current };
+        entries.add(entry);
+        return () => {
+            entries.delete(entry);
+        };
+    }, [namespace, id, isSource]);
+    // display: contents keeps the wrapped element in its parent's flex or grid layout.
+    return (_jsx("div", { ref: wrapper, "data-satin-matched-geometry": id, style: { display: 'contents' }, children: children }));
+}
+export function withAnimation(first, second) {
+    const animation = typeof first === 'function' ? Animation.default : first;
+    const update = typeof first === 'function' ? first : second;
+    const before = snapshotMatchedViews();
+    let result;
+    commitAnimatedLayout(animation, () => {
+        result = flushSync(update);
+        animateTransaction(animation, before);
+    });
+    return result;
+}
+const RECT_KEYS = ['x', 'y', 'width', 'height'];
+const runs = new Map();
+function runKey(namespace, id) {
+    return `${namespaceKeys.get(namespace) ?? registerNamespace(namespace)}\u0000${id}`;
+}
+const namespaceKeys = new WeakMap();
+let nextNamespace = 0;
+function registerNamespace(namespace) {
+    nextNamespace++;
+    namespaceKeys.set(namespace, nextNamespace);
+    return nextNamespace;
+}
+function viewOf(entry) {
+    const element = entry.wrapper.firstElementChild;
+    return element instanceof HTMLElement ? element : undefined;
+}
+function snapshotMatchedViews() {
+    const presented = [];
+    for (const entry of entries) {
+        const element = viewOf(entry);
+        if (!element)
+            continue;
+        presented.push(present(element, runKey(entry.namespace, entry.id), entry.isSource));
+    }
+    // Ghosts still travelling from an earlier change are retargeted like any other view.
+    // A ghost whose screen has since been removed has nothing left to animate.
+    for (const run of runs.values()) {
+        if (run.ghost && run.element.isConnected)
+            presented.push(present(run.element, run.key, false));
+    }
+    return presented;
+}
+function present(element, key, isSource) {
+    const bounds = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    return {
+        key,
+        element,
+        isSource,
+        rect: { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height },
+        velocity: runVelocity(element),
+        opacity: opacityOf(style),
+        ancestors: ancestorsOf(element),
+        // What a ghost needs to look the same once it leaves the rules that styled it in place.
+        look: {
+            borderRadius: style.borderRadius,
+            objectFit: style.objectFit,
+            objectPosition: style.objectPosition,
+            backgroundColor: style.backgroundColor,
+            boxShadow: style.boxShadow,
+            overflow: style.overflow,
+        },
+    };
+}
+function opacityOf(style) {
+    const opacity = Number.parseFloat(style.opacity);
+    return Number.isFinite(opacity) ? opacity : 1;
+}
+function ancestorsOf(element) {
+    const ancestors = [];
+    for (let node = element.parentElement; node; node = node.parentElement)
+        ancestors.push(node);
+    return ancestors;
+}
+/** The frame velocity (points per second) of a running run, from its own spring. */
+function runVelocity(element) {
+    const run = runs.get(element);
+    if (!run)
+        return { x: 0, y: 0, width: 0, height: 0 };
+    const elapsed = Number(run.motion.currentTime ?? 0);
+    const velocity = (key) => sampleChannel(run.animation, run.channels[key], elapsed).velocity;
+    return {
+        x: velocity('x'),
+        y: velocity('y'),
+        width: velocity('width'),
+        height: velocity('height'),
+    };
+}
+/* ------------------------------------------------------------------ the transaction */
+function animateTransaction(animation, before) {
+    // Stop the old runs first: the new layout frames must be read without their transforms.
+    const oldGhosts = stopAllRuns();
+    const after = new Map();
+    const sourceAfter = new Map();
+    for (const entry of entries) {
+        const element = viewOf(entry);
+        if (!element)
+            continue;
+        const key = runKey(entry.namespace, entry.id);
+        after.set(key, [...(after.get(key) ?? []), element]);
+        if (entry.isSource || !sourceAfter.has(key))
+            sourceAfter.set(key, element);
+    }
+    const sourceBefore = new Map();
+    for (const view of before) {
+        if (view.isSource || !sourceBefore.has(view.key))
+            sourceBefore.set(view.key, view);
+    }
+    const layout = new Map();
+    for (const elements of after.values()) {
+        for (const element of elements)
+            layout.set(element, layoutRect(element));
+    }
+    for (const [key, elements] of after) {
+        for (const element of elements) {
+            const previous = before.find(view => view.element === element);
+            const partner = previous ?? sourceBefore.get(key);
+            const box = layout.get(element);
+            if (partner)
+                moveView(element, key, partner, box, animation);
+            else
+                fadeView(element, key, box, animation, { from: 0, to: 1 });
+        }
+    }
+    for (const view of before) {
+        if (view.element.isConnected && !oldGhosts.has(view.element))
+            continue;
+        const target = sourceAfter.get(view.key);
+        const targetRect = target ? layout.get(target) : view.rect;
+        leaveView(view, targetRect, animation, oldGhosts.has(view.element));
+    }
+}
+function stopAllRuns() {
+    const ghosts = new Set();
+    for (const run of runs.values()) {
+        run.motion.cancel();
+        if (run.ghost && run.element.isConnected)
+            ghosts.add(run.element);
+        else if (run.ghost)
+            run.element.remove();
+    }
+    runs.clear();
+    return ghosts;
+}
+function layoutRect(element) {
+    const bounds = element.getBoundingClientRect();
+    return { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height };
+}
+/** A view that stays, or the partner of one that left, moves from where it was shown. */
+function moveView(element, key, from, box, animation) {
+    const stayed = from.element === element;
+    startRun({
+        element,
+        key,
+        box,
+        ...ownTransformOf(element, box),
+        start: from.rect,
+        target: box,
+        velocity: from.velocity,
+        animation,
+        // A new partner fades in (SwiftUI's default .opacity insertion); a view that stays carries
+        // on from the opacity it is showing.
+        opacity: { from: stayed ? from.opacity : 0, to: 1 },
+        ghost: false,
+    });
+}
+/** SwiftUI's default `.opacity` transition for a matched view with no partner. */
+function fadeView(element, key, box, animation, opacity) {
+    startRun({
+        element,
+        key,
+        box,
+        ...ownTransformOf(element, box),
+        start: box,
+        target: box,
+        velocity: { x: 0, y: 0, width: 0, height: 0 },
+        animation,
+        opacity,
+        ghost: false,
+    });
+}
+/** A removed view stays on screen as a ghost, travels to its partner's frame and fades out. */
+function leaveView(view, target, animation, wasGhost) {
+    const ghost = view.element;
+    const box = wasGhost ? layoutRect(ghost) : placeGhost(view);
+    if (!box)
+        return;
+    startRun({
+        element: ghost,
+        key: view.key,
+        box,
+        // placeGhost sets the ghost's origin to its top left and clears its own transform.
+        pivot: { x: box.x, y: box.y },
+        ownTransform: '',
+        start: view.rect,
+        target,
+        velocity: view.velocity,
+        animation,
+        opacity: { from: view.opacity, to: 0 },
+        ghost: true,
+    });
+}
+/** Ghosts are placed `position: fixed` at their old frame; their transform does the rest. */
+function placeGhost(view) {
+    const host = view.ancestors.find(ancestor => ancestor.isConnected);
+    if (!host)
+        return undefined;
+    const ghost = view.element;
+    ghost.setAttribute('aria-hidden', 'true');
+    ghost.inert = true;
+    Object.assign(ghost.style, view.look, {
+        position: 'fixed',
+        left: '0px',
+        top: '0px',
+        margin: '0px',
+        boxSizing: 'border-box',
+        width: `${view.rect.width}px`,
+        height: `${view.rect.height}px`,
+        pointerEvents: 'none',
+        transform: 'none',
+        transformOrigin: '0 0',
+    });
+    host.append(ghost);
+    // A transformed or contained ancestor becomes the fixed containing block: correct for it.
+    const placed = ghost.getBoundingClientRect();
+    ghost.style.left = `${view.rect.x - placed.x}px`;
+    ghost.style.top = `${view.rect.y - placed.y}px`;
+    return view.rect;
+}
+function startRun(request) {
+    const { element, box, target, animation, opacity } = request;
+    if (!(box.width > 0 && box.height > 0)) {
+        if (request.ghost)
+            element.remove();
+        return;
+    }
+    const channels = {
+        x: { displacement: request.start.x - target.x, velocity: request.velocity.x },
+        y: { displacement: request.start.y - target.y, velocity: request.velocity.y },
+        width: { displacement: request.start.width - target.width, velocity: request.velocity.width },
+        height: {
+            displacement: request.start.height - target.height,
+            velocity: request.velocity.height,
+        },
+    };
+    const fades = opacity.from !== opacity.to;
+    const times = runFrameTimes(animation, Object.values(channels), fades ? fadeSettleMs(animation) : 0);
+    const moves = Object.values(channels).some(channel => channel.displacement !== 0 || channel.velocity !== 0);
+    if (!moves && !fades) {
+        if (request.ghost)
+            element.remove();
+        return;
+    }
+    const lastTime = times[times.length - 1];
+    const keyframes = times.map((ms, index) => {
+        const frame = { offset: index / (times.length - 1) };
+        const done = index === times.length - 1;
+        if (moves)
+            frame.transform = transformAt(request, channels, done ? undefined : ms);
+        if (fades) {
+            const progress = done ? 1 : Math.min(Math.max(sampleProgress(animation, ms), 0), 1);
+            frame.opacity = opacity.from + (opacity.to - opacity.from) * progress;
+        }
+        return frame;
+    });
+    const motion = animateElement(element, keyframes, {
+        duration: lastTime,
+        easing: 'linear',
+        fill: request.ghost ? 'forwards' : 'none',
+    });
+    const run = {
+        element,
+        key: request.key,
+        box,
+        target,
+        channels,
+        animation,
+        opacity,
+        motion,
+        ghost: request.ghost,
+    };
+    runs.set(element, run);
+    motion.finished.then(() => finishRun(run), () => { });
+}
+function finishRun(run) {
+    if (runs.get(run.element) !== run)
+        return;
+    runs.delete(run.element);
+    if (run.ghost)
+        run.element.remove();
+}
+/** The transform at `ms` into the run, or at rest when `ms` is undefined. */
+function transformAt(request, channels, ms) {
+    const value = (key) => request.target[key] +
+        (ms === undefined ? 0 : sampleChannel(request.animation, channels[key], ms).offset);
+    const frame = {
+        x: value('x'),
+        y: value('y'),
+        width: Math.max(value('width'), 0),
+        height: Math.max(value('height'), 0),
+    };
+    return frameTransform(request.box, frame, request.pivot, request.ownTransform);
+}
+/**
+ * The transform that draws an element resting at `box` at `frame` instead. It goes in front of
+ * the element's own transform and scales about the element's own origin (`pivot`), so an app's
+ * transform (Apple Music's paused artwork is scaled down) keeps working during and after the run.
+ */
+function frameTransform(box, frame, pivot, ownTransform) {
+    const scaleX = frame.width / box.width;
+    const scaleY = frame.height / box.height;
+    const translateX = frame.x - pivot.x - scaleX * (box.x - pivot.x);
+    const translateY = frame.y - pivot.y - scaleY * (box.y - pivot.y);
+    const own = ownTransform ? ` ${ownTransform}` : '';
+    return `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})${own}`;
+}
+/**
+ * Where the element's transform origin sits in the viewport, and its own transform. Own
+ * transforms are expected to be translations and scales, as rotation has no frame to match.
+ */
+function ownTransformOf(element, rendered) {
+    const style = getComputedStyle(element);
+    const own = style.transform && style.transform !== 'none' ? style.transform : '';
+    const matrix = own ? new DOMMatrix(own) : new DOMMatrix();
+    const [originX, originY] = originOf(style.transformOrigin, element);
+    // rendered.x = layoutX + originX + a·(0 − originX) + e, so the origin sits at:
+    const pivot = {
+        x: rendered.x + matrix.a * originX - matrix.e,
+        y: rendered.y + matrix.d * originY - matrix.f,
+    };
+    return { pivot, ownTransform: own };
+}
+/** The computed transform-origin in points from the element's top left. */
+function originOf(value, element) {
+    const [x, y] = value.split(' ');
+    const length = (part, size) => {
+        if (part?.endsWith('px'))
+            return Number.parseFloat(part);
+        if (part?.endsWith('%'))
+            return (Number.parseFloat(part) / 100) * size;
+        return size / 2;
+    };
+    return [length(x, element.offsetWidth), length(y, element.offsetHeight)];
+}