@ghia/native 0.0.0 → 0.11.0

package/dist/web-animations.js

@@ -0,0 +1,1032 @@
+import { flushPendingMutations } from "./bounds.js";
+import { EVENT_PHASE_AT_TARGET, EVENT_PHASE_NONE, reportUncaught } from "./events/dispatch.js";
+import { elementOf, GpuixEventTarget, setDocumentAnimations, } from "./events/window-target.js";
+const HOST_METHODS = [
+    "getAnimations",
+    "getSubtreeAnimations",
+    "getDocumentAnimations",
+    "getAnimation",
+    "pauseAnimation",
+    "playAnimation",
+    "cancelAnimation",
+    "finishAnimation",
+    "reverseAnimation",
+    "setAnimationCurrentTime",
+    "setAnimationPlaybackRate",
+    "updateAnimationPlaybackRate",
+    "setAnimationStartTime",
+    "getAnimationTimelineTime",
+    "releaseAnimation",
+    "forgetAnimation",
+    "getAnimationEffect",
+    "getAnimationKeyframes",
+    "updateAnimationTiming",
+];
+const FINISH_EVENT = "webanimationfinish";
+const CANCEL_EVENT = "webanimationcancel";
+const READY_EVENT = "webanimationready";
+/** What native says when a command refuses, before it is a `DOMException`. */
+const INVALID_STATE_PREFIX = "InvalidStateError: ";
+const TYPE_ERROR_PREFIX = "TypeError: ";
+function deferred() {
+    let settle;
+    const promise = new Promise((resolve, reject) => {
+        settle = { resolve, reject };
+    });
+    // A cancel rejects it whether or not anyone is listening, and that is not an error to report.
+    promise.catch(() => { });
+    const result = {
+        promise,
+        settled: "pending",
+        resolve(animation) {
+            result.settled = "resolved";
+            settle.resolve(animation);
+        },
+        reject(error) {
+            result.settled = "rejected";
+            settle.reject(error);
+        },
+    };
+    return result;
+}
+function resolved(animation) {
+    const result = deferred();
+    result.resolve(animation);
+    return result;
+}
+const states = new WeakMap();
+function stateOf(animation) {
+    const state = states.get(animation);
+    if (!state)
+        throw new TypeError("Illegal invocation");
+    return state;
+}
+function invalidState(message) {
+    return new DOMException(message, "InvalidStateError");
+}
+/**
+ * The timeline of every animation of a renderer: its time is the clock of the renderer, in
+ * milliseconds, at the last frame. `startTime` and the `timelineTime` of the events are on it.
+ * A renderer is the document of its animations, so there is one for each, and no
+ * `document.timeline`: the `document` of GPUIX spans every window.
+ */
+export class DocumentTimeline {
+    #host;
+    /** Not for apps: the timeline of an animation is `animation.timeline`. */
+    constructor(host) {
+        this.#host = host;
+    }
+    get currentTime() {
+        return this.#host.getAnimationTimelineTime();
+    }
+}
+/** `readLive` can find the run gone, which the earlier checks of the mode cannot see. */
+function isGone(state) {
+    return state.mode === "gone";
+}
+function readLive(state) {
+    try {
+        const info = state.host.getAnimation(state.id);
+        if (info.playState === "idle" && state.last.playState !== "idle" && state.cancelEvents === 0) {
+            state.cancelNoticed = { pending: state.last.pending };
+        }
+        if (info.playState !== "finished")
+            state.holdFinished = false;
+        state.last = info;
+    }
+    catch (error) {
+        if (!isUnknownAnimation(error))
+            throw error;
+        // The idle run of a `cancel()` that the style stopped naming: native dropped it without a word.
+        state.mode = "gone";
+        state.last = { ...state.last, playState: "idle", pending: false, startTime: undefined };
+    }
+    return state.last;
+}
+/** What native refused with, as the DOM would. */
+function refusal(error) {
+    if (error instanceof Error && error.message.startsWith(INVALID_STATE_PREFIX)) {
+        return invalidState(error.message.slice(INVALID_STATE_PREFIX.length));
+    }
+    if (error instanceof Error && error.message.startsWith(TYPE_ERROR_PREFIX)) {
+        return new TypeError(error.message.slice(TYPE_ERROR_PREFIX.length));
+    }
+    return error;
+}
+/**
+ * Sends a command to native, then finds what it did: a play or pause that was
+ * waiting and is not (`ready`), a finish, and the end of one. A run native no
+ * longer has is one that was cancelled since the frame JS last heard of, as far
+ * as JS is concerned.
+ */
+function command(animation, action, send) {
+    const state = stateOf(animation);
+    const cancelled = () => invalidState(`Cannot ${action} an animation that was cancelled`);
+    if (state.mode === "gone")
+        throw cancelled();
+    let before;
+    try {
+        before = readLive(state);
+        if (isGone(state))
+            throw cancelled();
+        send(state);
+    }
+    catch (error) {
+        throw isUnknownAnimation(error) ? cancelled() : refusal(error);
+    }
+    // A command can bring back an animation that was idle and only weakly held: it plays now, and events are owed to it.
+    register(state.registry, state.elementId, state.id, animation);
+    settle(animation, state, before);
+}
+/** What the state native is in says about the promises, after a command. */
+function settle(animation, state, before) {
+    if (state.mode !== "live")
+        return;
+    const info = readLive(state);
+    state.renewedForCancel = false;
+    if (before.pending && !info.pending) {
+        if (state.ready.settled === "pending")
+            state.ready.resolve(animation);
+    }
+    else if (info.pending && !before.pending) {
+        state.ready = deferred();
+    }
+    if (info.playState === "finished") {
+        if (state.finished.settled === "pending")
+            state.finished.resolve(animation);
+    }
+    else if (state.finished.settled === "resolved") {
+        state.finished = deferred();
+    }
+}
+function snapshot(read) {
+    try {
+        return { value: read() };
+    }
+    catch (error) {
+        if (isUnknownAnimation(error))
+            throw error;
+        return { error: new DOMException(error instanceof Error ? error.message : String(error), "NotSupportedError") };
+    }
+}
+function unwrap(snapshot) {
+    if ("error" in snapshot)
+        throw snapshot.error;
+    return snapshot.value;
+}
+const effects = new WeakMap();
+function effectOf(effect) {
+    const init = effects.get(effect);
+    if (!init)
+        throw new TypeError("Illegal invocation");
+    return init;
+}
+/** What native says of the effect now; what it said last once it no longer has the run. */
+function readEffect(state) {
+    let read = state.effect;
+    if (state.mode === "live") {
+        try {
+            read = state.effect = snapshot(() => state.host.getAnimationEffect(state.id));
+        }
+        catch (error) {
+            if (!isUnknownAnimation(error))
+                throw error;
+        }
+    }
+    const info = unwrap(read);
+    // A run native let go of is idle, whatever it showed when it went.
+    if (state.mode === "gone" || readLive(state).playState === "idle") {
+        return { ...info, localTime: undefined, progress: undefined, currentIteration: undefined };
+    }
+    return info;
+}
+/** A member the DOM takes as a finite number, which `updateTiming()` refuses to leave anything else. */
+function finite(name, value) {
+    const number = Number(value);
+    if (!Number.isFinite(number))
+        throw new TypeError(`Failed to execute 'updateTiming' on 'AnimationEffect': ${name} must be a finite number`);
+    return number;
+}
+function oneOf(name, value, names) {
+    if (typeof value !== "string" || !names.includes(value)) {
+        throw new TypeError(`Failed to execute 'updateTiming' on 'AnimationEffect': ${String(value)} is not a valid ${name}`);
+    }
+    return value;
+}
+/** The `updateTiming()` argument as native takes it, or the `TypeError` the DOM throws for a member that is wrong. */
+function timingUpdate(timing) {
+    if (timing === undefined || timing === null)
+        return {};
+    if (typeof timing !== "object") {
+        throw new TypeError("Failed to execute 'updateTiming' on 'AnimationEffect': the timing is not an object");
+    }
+    const update = {};
+    if (timing.delay !== undefined)
+        update.delay = finite("delay", timing.delay);
+    if (timing.endDelay !== undefined)
+        update.endDelay = finite("endDelay", timing.endDelay);
+    if (timing.iterationStart !== undefined) {
+        update.iterationStart = finite("iterationStart", timing.iterationStart);
+        if (update.iterationStart < 0)
+            throw new TypeError("Failed to execute 'updateTiming' on 'AnimationEffect': iterationStart must not be negative");
+    }
+    if (timing.iterations !== undefined) {
+        const iterations = Number(timing.iterations);
+        if (Number.isNaN(iterations) || iterations < 0) {
+            throw new TypeError("Failed to execute 'updateTiming' on 'AnimationEffect': iterations must not be negative");
+        }
+        update.iterations = iterations;
+    }
+    if (timing.duration !== undefined) {
+        if (typeof timing.duration === "string") {
+            if (timing.duration !== "auto")
+                throw new TypeError(`Failed to execute 'updateTiming' on 'AnimationEffect': ${timing.duration} is not a valid duration`);
+            update.duration = "auto";
+        }
+        else {
+            const duration = Number(timing.duration);
+            if (Number.isNaN(duration) || duration < 0) {
+                throw new TypeError("Failed to execute 'updateTiming' on 'AnimationEffect': duration must not be negative");
+            }
+            update.duration = duration;
+        }
+    }
+    // `auto` is no fill: an effect has none of its own.
+    if (timing.fill !== undefined) {
+        const fill = oneOf("fill", timing.fill, ["none", "forwards", "backwards", "both", "auto"]);
+        update.fill = fill === "auto" ? "none" : fill;
+    }
+    if (timing.direction !== undefined) {
+        update.direction = oneOf("direction", timing.direction, ["normal", "reverse", "alternate", "alternate-reverse"]);
+    }
+    if (timing.easing !== undefined)
+        update.easing = String(timing.easing);
+    return update;
+}
+const EASING_KEYWORDS = ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
+/** `updateTiming()` of a run native no longer has: it changes what the effect reports from now on. */
+function updateGone(state, update) {
+    const info = unwrap(state.effect);
+    if (update.easing !== undefined && !EASING_KEYWORDS.includes(update.easing.trim())) {
+        throw new DOMException("The easing of an animation that was cancelled for good can be set to a keyword only", "NotSupportedError");
+    }
+    const next = { ...info };
+    if (update.delay !== undefined)
+        next.delay = update.delay;
+    if (update.endDelay !== undefined)
+        next.endDelay = update.endDelay;
+    if (update.fill !== undefined)
+        next.fill = update.fill;
+    if (update.iterationStart !== undefined)
+        next.iterationStart = update.iterationStart;
+    if (update.iterations !== undefined)
+        next.iterations = update.iterations;
+    if (update.direction !== undefined)
+        next.direction = update.direction;
+    if (update.duration !== undefined)
+        next.duration = update.duration === "auto" ? undefined : update.duration;
+    if (update.easing !== undefined)
+        next.easing = update.easing.trim() === "step-start" ? "steps(1, start)" : update.easing.trim() === "step-end" ? "steps(1)" : update.easing.trim();
+    const duration = next.duration ?? 0;
+    const active = duration === 0 || next.iterations === 0 ? 0 : duration * next.iterations;
+    next.activeDuration = active;
+    next.endTime = Math.max(next.delay + active + next.endDelay, 0);
+    state.effect = { value: next };
+}
+/**
+ * The effect of a CSS animation or transition, as the DOM's `KeyframeEffect`: the keyframes
+ * and the timing it plays by. `animation.effect` is the same object every time. It cannot be
+ * made, and there is no `setKeyframes()`, `composite` or `pseudoElement`.
+ */
+export class KeyframeEffect {
+    /** Not for apps: the effect of an animation is `animation.effect`. */
+    constructor(init) {
+        effects.set(this, init);
+    }
+    /** The element the run is of, also after the element is gone. */
+    get target() {
+        return effectOf(this).target;
+    }
+    /**
+     * The keyframes with computed values: those of the `@keyframes` rule with the ones Chrome adds
+     * for a property that has none at 0% or 100% (`composite: "replace"`, at the value the element
+     * has without the animation), or the start and the end of a transition. As of the last frame.
+     * Throws a `NotSupportedError` for a value whose computed text is not known yet.
+     */
+    getKeyframes() {
+        const state = stateOf(effectOf(this).animation);
+        if (state.mode === "live") {
+            try {
+                state.keyframes = snapshot(() => state.host.getAnimationKeyframes(state.id));
+            }
+            catch (error) {
+                if (!isUnknownAnimation(error))
+                    throw error;
+            }
+        }
+        return unwrap(state.keyframes).map((frame) => {
+            const keyframe = {
+                offset: frame.offset ?? null,
+                easing: frame.easing,
+                composite: frame.composite,
+                computedOffset: frame.computedOffset,
+            };
+            for (const value of frame.values)
+                keyframe[value.property] = value.value;
+            return keyframe;
+        });
+    }
+    /**
+     * The timing in the units of the DOM: milliseconds, `iterations` `Infinity` for an animation
+     * that repeats for ever. For a CSS animation the `easing` is `"linear"` and its
+     * `animation-timing-function` is the easing of its keyframes; for a transition it is the
+     * `transition-timing-function`.
+     */
+    getTiming() {
+        const info = readEffect(stateOf(effectOf(this).animation));
+        return {
+            delay: info.delay,
+            endDelay: info.endDelay,
+            fill: info.fill,
+            iterationStart: info.iterationStart,
+            iterations: info.iterations,
+            duration: info.duration ?? "auto",
+            direction: info.direction,
+            easing: info.easing,
+        };
+    }
+    /**
+     * The timing with what it works out to at the current time of the animation: `localTime`,
+     * `progress` and `currentIteration` are `null` for an idle animation and `progress` and
+     * `currentIteration` outside the active phase unless a fill holds the effect.
+     */
+    getComputedTiming() {
+        const info = readEffect(stateOf(effectOf(this).animation));
+        return {
+            delay: info.delay,
+            endDelay: info.endDelay,
+            fill: info.fill,
+            iterationStart: info.iterationStart,
+            iterations: info.iterations,
+            duration: info.duration ?? 0,
+            direction: info.direction,
+            easing: info.easing,
+            endTime: info.endTime,
+            activeDuration: info.activeDuration,
+            localTime: info.localTime ?? null,
+            progress: info.progress ?? null,
+            currentIteration: info.currentIteration ?? null,
+        };
+    }
+    /**
+     * Sets the timing members given, for this animation only. What a CSS animation is set to here
+     * stays against a later change of its `animation-*` style, which still moves the members that
+     * were not set; a running transition never follows a change of its `transition-*` style. A
+     * member that is wrong throws a `TypeError` and changes nothing. An effect that ends later than
+     * the animation has gone makes a finished animation run again.
+     */
+    updateTiming(timing) {
+        const owner = effectOf(this);
+        const update = timingUpdate(timing);
+        const state = stateOf(owner.animation);
+        if (state.mode === "live") {
+            try {
+                command(owner.animation, "update the timing of", (live) => live.host.updateAnimationTiming(live.id, update));
+                // What the animation keeps once native lets the run go.
+                try {
+                    state.effect = snapshot(() => state.host.getAnimationEffect(state.id));
+                }
+                catch (error) {
+                    if (!isUnknownAnimation(error))
+                        throw error;
+                }
+                return;
+            }
+            catch (error) {
+                // Cancelled since the frame JS last heard of: the effect is what it was.
+                if (!(error instanceof DOMException && error.name === "InvalidStateError"))
+                    throw error;
+            }
+        }
+        updateGone(state, update);
+    }
+}
+/**
+ * A CSS animation or transition of an element, or an animation of a `motion` element that Motion would hand to the
+ * browser's Web Animations (an `opacity` or `backgroundColor` animation, a colour in `oklch()`, ...; a plain
+ * `Animation`, as the one `element.animate()` makes), as `element.getAnimations()`
+ * returns it: the Web Animations `Animation` of the DOM, for what the CSS
+ * engine runs. `getAnimations()` gives the same object for the same run every
+ * time. `playState`, `currentTime`, `playbackRate`, `startTime` and `pending`
+ * are read when asked, as of the last frame, which is also the time of
+ * `timeline`. The promises `ready` and `finished` and the `finish` and `cancel`
+ * events follow Chrome's order.
+ *
+ * Not built: `replaceState`, `persist()`, `commitStyles()`,
+ * `onremove`, and setting `effect`. Every command works on an animation of the motion engine as it does on the one Motion
+ * makes with the browser: the motion shows what the animation does, `finish()` completes it, `cancel()` takes it back to
+ * where it started without a completion (Motion never hears of a cancel). An animation the style or Motion cancelled is idle,
+ * and a command plays it again as in Chrome, without the style owning it any more, for as long as the app holds it.
+ */
+export class Animation extends GpuixEventTarget {
+    /** Empty for what `getAnimations()` lists: the animations of CSS and of Motion have no id. */
+    id = "";
+    constructor(init) {
+        super();
+        const state = {
+            host: init.host,
+            registry: init.registry,
+            timeline: init.timeline,
+            id: init.info.id,
+            elementId: init.elementId,
+            mode: "live",
+            last: init.info,
+            effect: snapshot(() => init.host.getAnimationEffect(init.info.id)),
+            keyframes: snapshot(() => init.host.getAnimationKeyframes(init.info.id)),
+            keyframeEffect: new KeyframeEffect({ animation: this, target: init.target }),
+            finished: deferred(),
+            ready: deferred(),
+            cancelEvents: 0,
+            renewedForCancel: false,
+            cancelNoticed: undefined,
+            holdFinished: false,
+            handlers: new Map(),
+        };
+        states.set(this, state);
+        // A finished animation that waits for its first frame is told of its finish by the first command or
+        // event, not when it is made.
+        if (init.info.playState === "finished" && !init.info.pending)
+            state.finished.resolve(this);
+        if (!init.info.pending)
+            state.ready.resolve(this);
+        // An animation made finished (an effect with no length) has nothing to wait a frame for: Chrome
+        // runs its play right after the script that first read it, which a seek to where it is does here.
+        if (init.info.pending && init.info.playState === "finished")
+            queueMicrotask(() => startFinished(this));
+    }
+    /** The timeline all the animations of a renderer share. */
+    get timeline() {
+        return stateOf(this).timeline;
+    }
+    /** The keyframes and the timing the run plays by. The same object every time. */
+    get effect() {
+        return stateOf(this).keyframeEffect;
+    }
+    /**
+     * Milliseconds from the start, the delay inside it: 0 at the start whatever
+     * the delay, and the end of the effect when it ends. `null` once the
+     * animation is cancelled. Setting it seeks at once and the next frame paints
+     * it; `null` cannot be set.
+     */
+    get currentTime() {
+        const state = stateOf(this);
+        switch (state.mode) {
+            case "live": {
+                const info = readLive(state);
+                return info.playState === "idle" ? null : info.currentTime;
+            }
+            case "gone":
+                return null;
+        }
+    }
+    set currentTime(value) {
+        if (typeof value !== "number" || !Number.isFinite(value)) {
+            throw new TypeError(`Failed to set currentTime: ${String(value)} is not a finite number`);
+        }
+        command(this, "set currentTime of", (state) => state.host.setAnimationCurrentTime(state.id, value));
+    }
+    /**
+     * When the animation started on `timeline`, in milliseconds: `currentTime` is
+     * `(timeline.currentTime - startTime) * playbackRate`. `null` while it is
+     * pending, paused or idle. Setting it moves the animation to that time; `null`
+     * holds the time it is at.
+     */
+    get startTime() {
+        const state = stateOf(this);
+        switch (state.mode) {
+            case "live":
+                return readLive(state).startTime ?? null;
+            case "gone":
+                return null;
+        }
+    }
+    set startTime(value) {
+        if (value !== null && (typeof value !== "number" || !Number.isFinite(value))) {
+            throw new TypeError(`Failed to set startTime: ${String(value)} is not a finite number or null`);
+        }
+        command(this, "set startTime of", (state) => state.host.setAnimationStartTime(state.id, value));
+    }
+    /** The speed of time, negative to run back. Changing it keeps `currentTime`. */
+    get playbackRate() {
+        const state = stateOf(this);
+        return state.mode === "live" ? readLive(state).playbackRate : state.last.playbackRate;
+    }
+    set playbackRate(value) {
+        if (typeof value !== "number" || !Number.isFinite(value)) {
+            throw new TypeError(`Failed to set playbackRate: ${String(value)} is not a finite number`);
+        }
+        command(this, "set playbackRate of", (state) => state.host.setAnimationPlaybackRate(state.id, value));
+    }
+    get playState() {
+        const state = stateOf(this);
+        switch (state.mode) {
+            case "live":
+                return readLive(state).playState;
+            case "gone":
+                return "idle";
+        }
+    }
+    /** Whether a play or pause waits for the next frame to run. */
+    get pending() {
+        const state = stateOf(this);
+        return state.mode === "live" && readLive(state).pending;
+    }
+    /**
+     * Resolves with the animation when the play or pause that is pending has
+     * run, at the next frame; already resolved when none is. A `pause()` of a
+     * running animation, a `play()` of a paused, finished or cancelled one and
+     * the others that wait for a frame make a new one, unless one is already
+     * waiting. A cancel rejects the one that is waiting with an `AbortError`.
+     */
+    get ready() {
+        return stateOf(this).ready.promise;
+    }
+    /**
+     * Resolves with the animation when it finishes; rejects with an
+     * `AbortError` when it is cancelled (the style stopped naming it, a new
+     * transition replaced it, its element went). A new promise replaces a
+     * resolved one when the animation leaves `finished` again, and a cancel
+     * leaves a new pending one.
+     */
+    get finished() {
+        const state = stateOf(this);
+        if (state.mode === "live" && state.finished.settled === "resolved") {
+            const playState = readLive(state).playState;
+            if (playState !== "finished") {
+                state.finished = deferred();
+                state.renewedForCancel = playState === "idle";
+            }
+        }
+        return state.finished.promise;
+    }
+    /** Runs when the animation finishes, in the order it was first set among the listeners. */
+    get onfinish() {
+        return this.#handler("finish");
+    }
+    set onfinish(handler) {
+        this.#setHandler("finish", handler);
+    }
+    /** Runs when the animation is cancelled, in the order it was first set among the listeners. */
+    get oncancel() {
+        return this.#handler("cancel");
+    }
+    set oncancel(handler) {
+        this.#setHandler("cancel", handler);
+    }
+    #handler(type) {
+        return stateOf(this).handlers.get(type) ?? null;
+    }
+    #setHandler(type, handler) {
+        const state = stateOf(this);
+        const registered = state.handlers.has(type);
+        state.handlers.set(type, typeof handler === "function" ? handler : null);
+        // The handler is a listener from the moment it is first set, as in the DOM, so the
+        // ones added after it come after it.
+        if (!registered) {
+            this.addEventListener(type, (event) => state.handlers.get(type)?.call(this, event));
+        }
+    }
+    /** Holds the current time at once. From here `animation-play-state` no longer decides. */
+    pause() {
+        command(this, "pause", (state) => state.host.pauseAnimation(state.id));
+    }
+    /**
+     * Continues from the held time at the next frame. A finished animation
+     * starts over: from 0, or from the end when the rate is negative; so does a
+     * cancelled one. From here `animation-play-state` no longer decides.
+     */
+    play() {
+        command(this, "play", (state) => state.host.playAnimation(state.id));
+    }
+    /**
+     * Stops the animation: idle, with no current time, out of `getAnimations()`,
+     * its element as if it had none. A style change does not start it again;
+     * `play()` does, from the start. Its `finished` promise rejects with an
+     * `AbortError` and `ready` too if it was waiting; the `cancel` event comes
+     * with the next frame.
+     */
+    cancel() {
+        const state = stateOf(this);
+        if (state.mode === "gone")
+            return;
+        const before = readLive(state);
+        if (before.playState === "idle")
+            return;
+        try {
+            state.host.cancelAnimation(state.id);
+        }
+        catch (error) {
+            // Cancelled since the frame JS last heard of: its cancel event is on its way.
+            if (isUnknownAnimation(error))
+                return;
+            throw error;
+        }
+        state.cancelEvents++;
+        abort(state, before.pending);
+        readLive(state);
+    }
+    /**
+     * Goes to the end the rate runs toward at once, the end of the effect or 0.
+     * Throws an `InvalidStateError` at a rate of 0 and for an animation that
+     * never ends running forward.
+     */
+    finish() {
+        command(this, "finish", (state) => state.host.finishAnimation(state.id));
+    }
+    /**
+     * Plays the animation the other way: the rate flips when the next frame
+     * comes, and an animation at the end it was running from goes to the other.
+     * Throws an `InvalidStateError` for an animation that never ends, from its start.
+     */
+    reverse() {
+        command(this, "reverse", (state) => state.host.reverseAnimation(state.id));
+    }
+    /**
+     * Sets the rate the way `playbackRate` does, but keeps the time continuous across the change:
+     * a running animation takes the new rate at the next frame, a paused, finished or cancelled
+     * one at once.
+     */
+    updatePlaybackRate(rate) {
+        if (typeof rate !== "number" || !Number.isFinite(rate)) {
+            throw new TypeError(`Failed to execute updatePlaybackRate: ${String(rate)} is not a finite number`);
+        }
+        command(this, "update the playbackRate of", (state) => state.host.updateAnimationPlaybackRate(state.id, rate));
+    }
+}
+/** A CSS animation: the run of an `animation-name`. */
+export class CSSAnimation extends Animation {
+    animationName;
+    constructor(init) {
+        super(init);
+        if (init.info.animationName === undefined) {
+            throw new TypeError(`Animation ${init.info.id} is not a CSS animation`);
+        }
+        this.animationName = init.info.animationName;
+    }
+}
+/** A CSS transition: the run of one property. */
+export class CSSTransition extends Animation {
+    /** The CSS name of the property, `background-color`. */
+    transitionProperty;
+    constructor(init) {
+        super(init);
+        if (init.info.transitionProperty === undefined) {
+            throw new TypeError(`Animation ${init.info.id} is not a CSS transition`);
+        }
+        this.transitionProperty = init.info.transitionProperty;
+    }
+}
+/** The animation of a run native has, held or not. */
+function lookup(registry, id) {
+    return registry.byId.get(id) ?? registry.weak.get(id)?.deref();
+}
+// Shared through `globalThis` like the renderer states: the JSX runtime can load
+// a second copy of this module, and a copy that lists animations must be heard
+// by the copy that routes the events.
+const REGISTRIES_KEY = Symbol.for("@ghia/native/web-animations");
+function registryOf(renderer) {
+    let all = Reflect.get(globalThis, REGISTRIES_KEY);
+    if (!all) {
+        all = new WeakMap();
+        Reflect.set(globalThis, REGISTRIES_KEY, all);
+    }
+    let registry = all.get(renderer);
+    if (!registry) {
+        const weak = new Map();
+        const made = {
+            byId: new Map(),
+            byElement: new Map(),
+            weak,
+            closed: false,
+            cancelTasks: new Set(),
+            finalizer: new FinalizationRegistry((id) => {
+                // A new object for the same run, made since, holds it.
+                if (weak.get(id)?.deref())
+                    return;
+                weak.delete(id);
+                if (!made.closed)
+                    renderer.forgetAnimation?.(id);
+            }),
+        };
+        registry = made;
+        all.set(renderer, registry);
+    }
+    return registry;
+}
+/** The window of `renderer` is gone, which the animations it handed out outlive: native has nothing left for them. */
+export function closeWebAnimations(renderer) {
+    const all = Reflect.get(globalThis, REGISTRIES_KEY);
+    const registry = all?.get(renderer);
+    if (!registry)
+        return;
+    registry.closed = true;
+    for (const task of registry.cancelTasks)
+        clearTimeout(task);
+    registry.cancelTasks.clear();
+}
+function hostOf(renderer) {
+    for (const method of HOST_METHODS) {
+        if (!renderer[method])
+            throw new Error(`This renderer does not support ${method}`);
+    }
+    return renderer;
+}
+/** The error `getAnimation` throws for a run native no longer has. */
+function isUnknownAnimation(error) {
+    return error instanceof Error && error.message.includes("No running CSS animation or transition has the id");
+}
+function unregister(registry, state, animation) {
+    registry.byId.delete(state.id);
+    if (registry.weak.delete(state.id))
+        registry.finalizer.unregister(animation);
+    const siblings = registry.byElement.get(state.elementId);
+    siblings?.delete(animation);
+    if (siblings?.size === 0)
+        registry.byElement.delete(state.elementId);
+}
+function register(registry, elementId, id, animation) {
+    if (registry.weak.delete(id))
+        registry.finalizer.unregister(animation);
+    registry.byId.set(id, animation);
+    const siblings = registry.byElement.get(elementId) ?? new Set();
+    siblings.add(animation);
+    registry.byElement.set(elementId, siblings);
+}
+/** The class of the animation of a run: the DOM makes an `Animation` for a script and a subclass for CSS. */
+function animationOf(kind, init) {
+    switch (kind) {
+        case "transition":
+            return new CSSTransition(init);
+        case "script":
+            return new Animation(init);
+        default:
+            return new CSSAnimation(init);
+    }
+}
+function adopt(registry, host, timeline, target, elementId, info) {
+    const known = lookup(registry, info.id);
+    if (known) {
+        register(registry, elementId, info.id, known);
+        return known;
+    }
+    const init = { host, registry, timeline, target, elementId, info };
+    const animation = animationOf(info.kind, init);
+    register(registry, elementId, info.id, animation);
+    return animation;
+}
+/**
+ * `element.getAnimations()`: the CSS transitions, then the CSS animations,
+ * that are running, paused or in effect through a fill, in composite order.
+ * With `subtree`, those of the element and everything below it: every
+ * transition of the elements in document order, then every animation.
+ * Pending mutations are sent first, so a style just set is seen.
+ */
+export function getElementAnimations(renderer, elementId, target, options) {
+    const host = hostOf(renderer);
+    flushPendingMutations(renderer);
+    const registry = registryOf(renderer);
+    const timeline = (registry.timeline ??= new DocumentTimeline(host));
+    if (!options?.subtree) {
+        return host.getAnimations(elementId).map((info) => adopt(registry, host, timeline, target, elementId, info));
+    }
+    return host
+        .getSubtreeAnimations(elementId)
+        .map((listed) => adoptListed(registry, host, timeline, renderer, listed, elementId, target));
+}
+/** `document.getAnimations()` of one renderer: the animations of its window, in document order. */
+function getRendererAnimations(renderer) {
+    const host = hostOf(renderer);
+    flushPendingMutations(renderer);
+    const registry = registryOf(renderer);
+    const timeline = (registry.timeline ??= new DocumentTimeline(host));
+    return host
+        .getDocumentAnimations()
+        .map((listed) => adoptListed(registry, host, timeline, renderer, listed, undefined, undefined));
+}
+function adoptListed(registry, host, timeline, renderer, listed, readOn, readOnTarget) {
+    const known = lookup(registry, listed.info.id);
+    if (known) {
+        register(registry, listed.elementId, listed.info.id, known);
+        return known;
+    }
+    const target = listed.elementId === readOn ? readOnTarget : elementOf(renderer, listed.elementId);
+    if (target === undefined) {
+        throw new Error(`Element ${listed.elementId} has an animation but its root has no element for it`);
+    }
+    return adopt(registry, host, timeline, target, listed.elementId, listed.info);
+}
+setDocumentAnimations((renderer) => getRendererAnimations(renderer));
+/** The cancel of an animation: its promises, as `cancel()` and a style that stops naming it leave them. */
+function abort(state, wasPending) {
+    const error = () => new DOMException("The animation was cancelled", "AbortError");
+    if (wasPending && state.ready.settled === "pending") {
+        state.ready.reject(error());
+        state.ready = deferred();
+    }
+    if (state.finished.settled === "pending")
+        state.finished.reject(error());
+    state.finished = deferred();
+}
+/** Runs the play of an animation that was made finished, which has no frame to wait for. */
+function startFinished(animation) {
+    const state = stateOf(animation);
+    if (state.mode !== "live" || state.registry.closed)
+        return;
+    try {
+        if (!readLive(state).pending)
+            return;
+        command(animation, "start", (live) => live.host.setAnimationCurrentTime(live.id, readLive(live).currentTime));
+    }
+    catch (error) {
+        // Cancelled since: there is nothing left to start.
+        if (!(error instanceof DOMException && error.name === "InvalidStateError"))
+            throw error;
+    }
+}
+/** The animation went for good: nothing native has stays to be played again. */
+function lose(animation) {
+    const state = stateOf(animation);
+    state.mode = "gone";
+    cancelPromises(state);
+}
+function cancelPromises(state) {
+    const pending = state.cancelNoticed?.pending ?? state.last.pending;
+    state.cancelNoticed = undefined;
+    if (state.renewedForCancel) {
+        state.renewedForCancel = false;
+        return;
+    }
+    abort(state, pending);
+}
+/**
+ * The style or Motion cancelled the animation and native keeps the run: it is idle, a command brings it back, and the
+ * registry holds it weakly until one does.
+ */
+function detach(animation) {
+    const state = stateOf(animation);
+    cancelPromises(state);
+    const now = readLive(state);
+    // A command can have played it again since the cancel, which the event only now tells of.
+    if (now.playState === "finished")
+        state.holdFinished = true;
+    if (now.playState !== "idle")
+        return;
+    const registry = state.registry;
+    registry.byId.delete(state.id);
+    const siblings = registry.byElement.get(state.elementId);
+    siblings?.delete(animation);
+    if (siblings?.size === 0)
+        registry.byElement.delete(state.elementId);
+    registry.weak.set(state.id, new WeakRef(animation));
+    registry.finalizer.register(animation, state.id, animation);
+}
+function dispatchPlaybackEvent(animation, type, currentTime, timelineTime) {
+    let stopped = false;
+    const event = {
+        type,
+        target: animation,
+        currentTarget: null,
+        currentTime,
+        timelineTime,
+        eventPhase: EVENT_PHASE_NONE,
+        bubbles: false,
+        cancelable: false,
+        defaultPrevented: false,
+        timeStamp: performance.now(),
+        composedPath: () => [animation],
+        stopPropagation() { },
+        stopImmediatePropagation() {
+            stopped = true;
+        },
+        preventDefault() { },
+    };
+    const errors = [];
+    animation.run(event, {
+        propagationStopped: false,
+        get immediatePropagationStopped() {
+            return stopped;
+        },
+    }, false, EVENT_PHASE_AT_TARGET, (error) => errors.push(error));
+    event.currentTarget = null;
+    for (const error of errors)
+        reportUncaught(error);
+}
+/** Whether the event is one of the internal ones `deliverWebAnimationEvent` takes. */
+export function isWebAnimationEvent(eventType) {
+    return eventType === FINISH_EVENT || eventType === CANCEL_EVENT || eventType === READY_EVENT;
+}
+/**
+ * Takes the ready, finish or cancel of a CSS animation or transition for the
+ * `Animation` object listed for it, then tells native a finish or cancel is
+ * consumed, which stops answering for the run as it ended. Nothing else hears
+ * these events: they are not DOM events. A run no one listed is released all
+ * the same.
+ */
+export function deliverWebAnimationEvent(renderer, event) {
+    if (event.animationId === undefined) {
+        throw new Error(`Event "${event.eventType}" arrived without its animationId`);
+    }
+    let released = false;
+    try {
+        const registry = registryOf(renderer);
+        const animation = lookup(registry, event.animationId);
+        if (!animation) {
+            // No object is left to bring a cancelled run back.
+            if (event.eventType === CANCEL_EVENT)
+                renderer.forgetAnimation?.(event.animationId);
+            return;
+        }
+        const state = stateOf(animation);
+        const timelineTime = event.timelineTime ?? null;
+        switch (event.eventType) {
+            case READY_EVENT:
+                if (state.ready.settled === "pending")
+                    state.ready.resolve(animation);
+                return;
+            case FINISH_EVENT:
+                // A command that finished the animation resolved it then. This is the finish by itself.
+                if (state.holdFinished) {
+                    state.holdFinished = false;
+                }
+                else if (state.finished.settled === "pending" && readLive(state).playState === "finished") {
+                    state.finished.resolve(animation);
+                }
+                dispatchPlaybackEvent(animation, "finish", event.currentTime ?? null, timelineTime);
+                return;
+            default:
+                if (state.cancelEvents > 0) {
+                    state.cancelEvents--;
+                }
+                else {
+                    renderer.releaseAnimation?.(event.animationId);
+                    released = true;
+                    if (keptByNative(renderer, state))
+                        detach(animation);
+                    else
+                        lose(animation);
+                }
+                if (state.mode === "gone")
+                    unregister(registry, state, animation);
+                dispatchPlaybackEvent(animation, "cancel", null, timelineTime);
+        }
+    }
+    finally {
+        if (event.eventType !== READY_EVENT && !released) {
+            renderer.releaseAnimation?.(event.animationId);
+        }
+    }
+}
+/**
+ * Whether native still has the run of a cancel it just told of, and not one that went with its element or was replaced.
+ * Until the event is released native answers for the run as it ended, so release it first.
+ */
+function keptByNative(renderer, state) {
+    try {
+        renderer.getAnimation?.(state.id);
+        return true;
+    }
+    catch (error) {
+        if (!isUnknownAnimation(error))
+            throw error;
+        return false;
+    }
+}
+/**
+ * A removed element's animations are cancelled, as the DOM does: native sends
+ * nothing when an element goes, so the ids the mutation queue was told are
+ * destroyed end here. The `cancel` event comes in a task, as the DOM's comes at
+ * its next frame.
+ */
+export function cancelAnimationsOfElements(renderer, elementIds) {
+    const registry = registryOf(renderer);
+    for (const elementId of elementIds) {
+        // Chrome cancels the last of an element's animations first.
+        for (const animation of [...(registry.byElement.get(elementId) ?? [])].reverse()) {
+            const state = stateOf(animation);
+            const wasIdle = state.mode === "gone" || state.last.playState === "idle";
+            lose(animation);
+            unregister(registry, state, animation);
+            if (wasIdle)
+                continue;
+            const timelineTime = state.timeline.currentTime;
+            if (registry.closed)
+                continue;
+            const task = setTimeout(() => {
+                registry.cancelTasks.delete(task);
+                dispatchPlaybackEvent(animation, "cancel", null, timelineTime);
+            }, 0);
+            registry.cancelTasks.add(task);
+        }
+    }
+}
+//# sourceMappingURL=web-animations.js.map