bits-ui 2.7.0 → 2.8.0

package/dist/bits/utilities/floating-layer/components/floating-layer.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { useFloatingRootState } from "../use-floating-layer.svelte.js";
+	import { FloatingRootState } from "../use-floating-layer.svelte.js";
 
 	let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
 
-	useFloatingRootState(tooltip);
+	FloatingRootState.create(tooltip);
 </script>
 
 {@render children?.()}

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -1,7 +1,6 @@
 import { type Middleware, type Placement } from "@floating-ui/dom";
-import { type ReadableBox } from "svelte-toolbelt";
-import type { Arrayable, WithRefProps } from "../../../internal/types.js";
-import type { Box, ReadableBoxedValues } from "../../../internal/box.svelte.js";
+import { type ReadableBoxedValues, type ReadableBox, type Box } from "svelte-toolbelt";
+import type { Arrayable, WithRefOpts } from "../../../internal/types.js";
 import type { Measurable, UseFloatingReturn } from "../../../internal/floating-svelte/types.js";
 import type { Direction, StyleProperties } from "../../../shared/index.js";
 export declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
@@ -9,13 +8,14 @@ export declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
 export type Side = (typeof SIDE_OPTIONS)[number];
 export type Align = (typeof ALIGN_OPTIONS)[number];
 export type Boundary = Element | null;
-declare class FloatingRootState {
+export declare class FloatingRootState {
+    static create(tooltip?: boolean): FloatingRootState;
     anchorNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
     customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
     triggerNode: ReadableBox<Measurable | HTMLElement | null>;
     constructor();
 }
-export type FloatingContentStateProps = ReadableBoxedValues<{
+export interface FloatingContentStateOpts extends ReadableBoxedValues<{
     id: string;
     wrapperId: string;
     side: Side;
@@ -35,10 +35,12 @@ export type FloatingContentStateProps = ReadableBoxedValues<{
     style: StyleProperties | null | undefined | string;
     enabled: boolean;
     customAnchor: string | HTMLElement | null | Measurable;
-}>;
-declare class FloatingContentState {
+}> {
+}
+export declare class FloatingContentState {
     #private;
-    readonly opts: FloatingContentStateProps;
+    static create(opts: FloatingContentStateOpts, tooltip?: boolean): FloatingContentState;
+    readonly opts: FloatingContentStateOpts;
     readonly root: FloatingRootState;
     contentRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     wrapperRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
@@ -911,14 +913,16 @@ declare class FloatingContentState {
         transform: string;
         visibility: string | undefined;
     };
-    constructor(opts: FloatingContentStateProps, root: FloatingRootState);
+    constructor(opts: FloatingContentStateOpts, root: FloatingRootState);
+}
+interface FloatingArrowStateOpts extends WithRefOpts {
 }
-type FloatingArrowStateProps = WithRefProps;
-declare class FloatingArrowState {
-    readonly opts: FloatingArrowStateProps;
+export declare class FloatingArrowState {
+    static create(opts: FloatingArrowStateOpts): FloatingArrowState;
+    readonly opts: FloatingArrowStateOpts;
     readonly content: FloatingContentState;
-    constructor(opts: FloatingArrowStateProps, content: FloatingContentState);
-    props: {
+    constructor(opts: FloatingArrowStateOpts, content: FloatingContentState);
+    readonly props: {
         readonly id: string;
         readonly style: {
             [x: string]: string | number | undefined;
@@ -932,20 +936,18 @@ declare class FloatingArrowState {
         readonly "data-side": "left" | "right" | "top" | "bottom";
     };
 }
-type FloatingAnchorStateProps = ReadableBoxedValues<{
+interface FloatingAnchorStateOpts extends ReadableBoxedValues<{
     id: string;
     virtualEl?: Measurable | null;
     ref: Measurable | HTMLElement | null;
-}>;
-declare class FloatingAnchorState {
-    readonly opts: FloatingAnchorStateProps;
+}> {
+}
+export declare class FloatingAnchorState {
+    static create(opts: FloatingAnchorStateOpts, tooltip?: boolean): FloatingAnchorState;
+    readonly opts: FloatingAnchorStateOpts;
     readonly root: FloatingRootState;
-    constructor(opts: FloatingAnchorStateProps, root: FloatingRootState);
+    constructor(opts: FloatingAnchorStateOpts, root: FloatingRootState);
 }
-export declare function useFloatingRootState(tooltip?: boolean): FloatingRootState;
-export declare function useFloatingContentState(props: FloatingContentStateProps, tooltip?: boolean): FloatingContentState;
-export declare function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState;
-export declare function useFloatingAnchorState(props: FloatingAnchorStateProps, tooltip?: boolean): FloatingAnchorState;
 export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
 export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
 export {};

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -12,7 +12,15 @@ const OPPOSITE_SIDE = {
     bottom: "top",
     left: "right",
 };
-class FloatingRootState {
+const FloatingRootContext = new Context("Floating.Root");
+const FloatingContentContext = new Context("Floating.Content");
+const FloatingTooltipRootContext = new Context("Floating.Root");
+export class FloatingRootState {
+    static create(tooltip = false) {
+        return tooltip
+            ? FloatingTooltipRootContext.set(new FloatingRootState())
+            : FloatingRootContext.set(new FloatingRootState());
+    }
     anchorNode = box(null);
     customAnchorNode = box(null);
     triggerNode = box(null);
@@ -32,7 +40,12 @@ class FloatingRootState {
         });
     }
 }
-class FloatingContentState {
+export class FloatingContentState {
+    static create(opts, tooltip = false) {
+        return tooltip
+            ? FloatingContentContext.set(new FloatingContentState(opts, FloatingTooltipRootContext.get()))
+            : FloatingContentContext.set(new FloatingContentState(opts, FloatingRootContext.get()));
+    }
     opts;
     root;
     // nodes
@@ -202,7 +215,10 @@ class FloatingContentState {
         });
     }
 }
-class FloatingArrowState {
+export class FloatingArrowState {
+    static create(opts) {
+        return new FloatingArrowState(opts, FloatingContentContext.get());
+    }
     opts;
     content;
     constructor(opts, content) {
@@ -216,7 +232,12 @@ class FloatingArrowState {
         ...attachRef(this.content.arrowRef),
     }));
 }
-class FloatingAnchorState {
+export class FloatingAnchorState {
+    static create(opts, tooltip = false) {
+        return tooltip
+            ? new FloatingAnchorState(opts, FloatingTooltipRootContext.get())
+            : new FloatingAnchorState(opts, FloatingRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -230,27 +251,6 @@ class FloatingAnchorState {
         }
     }
 }
-const FloatingRootContext = new Context("Floating.Root");
-const FloatingContentContext = new Context("Floating.Content");
-const FloatingTooltipRootContext = new Context("Floating.Root");
-export function useFloatingRootState(tooltip = false) {
-    return tooltip
-        ? FloatingTooltipRootContext.set(new FloatingRootState())
-        : FloatingRootContext.set(new FloatingRootState());
-}
-export function useFloatingContentState(props, tooltip = false) {
-    return tooltip
-        ? FloatingContentContext.set(new FloatingContentState(props, FloatingTooltipRootContext.get()))
-        : FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
-}
-export function useFloatingArrowState(props) {
-    return new FloatingArrowState(props, FloatingContentContext.get());
-}
-export function useFloatingAnchorState(props, tooltip = false) {
-    return tooltip
-        ? new FloatingAnchorState(props, FloatingTooltipRootContext.get())
-        : new FloatingAnchorState(props, FloatingRootContext.get());
-}
 //
 // HELPERS
 //

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.d.ts

@@ -1,5 +1,5 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
 import { type EventCallback } from "../../../internal/events.js";
 export type FocusScopeContextValue = {
     ignoreCloseAutoFocus: boolean;

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, DOMContext, executeCallbacks } from "svelte-toolbelt";
+import { afterSleep, afterTick, DOMContext, executeCallbacks, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { createFocusScopeAPI, createFocusScopeStack, removeLinks, } from "./focus-scope-stack.svelte.js";

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte

@@ -39,7 +39,7 @@
 		isStatic = false,
 		enabled,
 		...restProps
-	}: Omit<PopperLayerImplProps, "present"> & {
+	}: Omit<PopperLayerImplProps, "open"> & {
 		enabled: boolean;
 	} = $props();
 </script>

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { PopperLayerImplProps } from "./types.js";
-type $$ComponentProps = Omit<PopperLayerImplProps, "present"> & {
+type $$ComponentProps = Omit<PopperLayerImplProps, "open"> & {
     enabled: boolean;
 };
 declare const PopperLayerForceMount: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -47,7 +47,7 @@
 		ref,
 		tooltip = false,
 		...restProps
-	}: Omit<PopperLayerImplProps, "present" | "children"> & {
+	}: Omit<PopperLayerImplProps, "open" | "children"> & {
 		enabled: boolean;
 	} = $props();
 </script>

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { PopperLayerImplProps } from "./types.js";
-type $$ComponentProps = Omit<PopperLayerImplProps, "present" | "children"> & {
+type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children"> & {
     enabled: boolean;
 };
 declare const PopperLayerInner: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -5,7 +5,7 @@
 
 	let {
 		popper,
-		present,
+		open,
 		onEscapeKeydown,
 		escapeKeydownBehavior,
 		preventOverflowTextSelection,
@@ -44,7 +44,7 @@
 	}: PopperLayerImplProps = $props();
 </script>
 
-<PresenceLayer {present} {ref}>
+<PresenceLayer {open} {ref}>
 	{#snippet presence()}
 		<PopperLayerInner
 			{popper}
@@ -73,7 +73,7 @@
 			{onPlaced}
 			{customAnchor}
 			{isStatic}
-			enabled={present}
+			enabled={open}
 			{onInteractOutside}
 			{onCloseAutoFocus}
 			{onOpenAutoFocus}

package/dist/bits/utilities/presence-layer/presence-layer.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { PresenceLayerImplProps } from "./types.js";
-	import { usePresence } from "./use-presence.svelte.js";
+	import { Presence } from "./presence.svelte.js";
 
-	let { present, forceMount, presence, ref }: PresenceLayerImplProps = $props();
+	let { open, forceMount, presence, ref }: PresenceLayerImplProps = $props();
 
-	const isPresent = usePresence(
-		box.with(() => present),
-		ref
-	);
+	const presenceState = new Presence({
+		open: box.with(() => open),
+		ref,
+	});
 </script>
 
-{#if forceMount || present || isPresent.current}
-	{@render presence?.({ present: isPresent })}
+{#if forceMount || open || presenceState.isPresent}
+	{@render presence?.({ present: presenceState.isPresent })}
 {/if}

package/dist/bits/utilities/presence-layer/presence.svelte.d.ts

@@ -0,0 +1,42 @@
+import { type ReadableBox, type ReadableBoxedValues } from "svelte-toolbelt";
+import { Previous } from "runed";
+import { StateMachine } from "../../../internal/state-machine.js";
+export interface PresenceOptions extends ReadableBoxedValues<{
+    open: boolean;
+    ref: HTMLElement | null;
+}> {
+}
+type PresenceStatus = "unmounted" | "mounted" | "unmountSuspended";
+declare const presenceMachine: {
+    readonly mounted: {
+        readonly UNMOUNT: "unmounted";
+        readonly ANIMATION_OUT: "unmountSuspended";
+    };
+    readonly unmountSuspended: {
+        readonly MOUNT: "mounted";
+        readonly ANIMATION_END: "unmounted";
+    };
+    readonly unmounted: {
+        readonly MOUNT: "mounted";
+    };
+};
+type PresenceMachine = StateMachine<typeof presenceMachine>;
+export declare class Presence {
+    readonly opts: PresenceOptions;
+    prevAnimationNameState: string;
+    styles: CSSStyleDeclaration;
+    initialStatus: PresenceStatus;
+    previousPresent: Previous<boolean>;
+    machine: PresenceMachine;
+    present: ReadableBox<boolean>;
+    constructor(opts: PresenceOptions);
+    /**
+     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+     * make sure we only trigger ANIMATION_END for the currently active animation.
+     */
+    handleAnimationEnd(event: AnimationEvent): void;
+    handleAnimationStart(event: AnimationEvent): void;
+    isPresent: boolean;
+}
+export {};

package/dist/bits/utilities/presence-layer/presence.svelte.js

@@ -0,0 +1,116 @@
+import { executeCallbacks } from "svelte-toolbelt";
+import { Previous, watch } from "runed";
+import { on } from "svelte/events";
+import { StateMachine } from "../../../internal/state-machine.js";
+const presenceMachine = {
+    mounted: {
+        UNMOUNT: "unmounted",
+        ANIMATION_OUT: "unmountSuspended",
+    },
+    unmountSuspended: {
+        MOUNT: "mounted",
+        ANIMATION_END: "unmounted",
+    },
+    unmounted: {
+        MOUNT: "mounted",
+    },
+};
+export class Presence {
+    opts;
+    prevAnimationNameState = $state("none");
+    styles = $state({});
+    initialStatus;
+    previousPresent;
+    machine;
+    present;
+    constructor(opts) {
+        this.opts = opts;
+        this.present = this.opts.open;
+        this.initialStatus = opts.open.current ? "mounted" : "unmounted";
+        this.previousPresent = new Previous(() => this.present.current);
+        this.machine = new StateMachine(this.initialStatus, presenceMachine);
+        this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
+        this.handleAnimationStart = this.handleAnimationStart.bind(this);
+        watchPresenceChange(this);
+        watchStatusChange(this);
+        watchRefChange(this);
+    }
+    /**
+     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+     * make sure we only trigger ANIMATION_END for the currently active animation.
+     */
+    handleAnimationEnd(event) {
+        if (!this.opts.ref.current)
+            return;
+        const currAnimationName = getAnimationName(this.opts.ref.current);
+        const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
+        if (event.target === this.opts.ref.current && isCurrentAnimation) {
+            this.machine.dispatch("ANIMATION_END");
+        }
+    }
+    handleAnimationStart(event) {
+        if (!this.opts.ref.current)
+            return;
+        if (event.target === this.opts.ref.current) {
+            this.prevAnimationNameState = getAnimationName(this.opts.ref.current);
+        }
+    }
+    isPresent = $derived.by(() => {
+        return ["mounted", "unmountSuspended"].includes(this.machine.state.current);
+    });
+}
+function watchPresenceChange(state) {
+    watch(() => state.present.current, () => {
+        if (!state.opts.ref.current)
+            return;
+        const hasPresentChanged = state.present.current !== state.previousPresent.current;
+        if (!hasPresentChanged)
+            return;
+        const prevAnimationName = state.prevAnimationNameState;
+        const currAnimationName = getAnimationName(state.opts.ref.current);
+        if (state.present.current) {
+            state.machine.dispatch("MOUNT");
+        }
+        else if (currAnimationName === "none" || state.styles.display === "none") {
+            // If there is no exit animation or the element is hidden, animations won't run
+            // so we unmount instantly
+            state.machine.dispatch("UNMOUNT");
+        }
+        else {
+            /**
+             * When `present` changes to `false`, we check changes to animation-name to
+             * determine whether an animation has started. We chose this approach (reading
+             * computed styles) because there is no `animationrun` event and `animationstart`
+             * fires after `animation-delay` has expired which would be too late.
+             */
+            const isAnimating = prevAnimationName !== currAnimationName;
+            if (state.previousPresent.current && isAnimating) {
+                state.machine.dispatch("ANIMATION_OUT");
+            }
+            else {
+                state.machine.dispatch("UNMOUNT");
+            }
+        }
+    });
+}
+function watchStatusChange(state) {
+    watch(() => state.machine.state.current, () => {
+        if (!state.opts.ref.current)
+            return;
+        const currAnimationName = getAnimationName(state.opts.ref.current);
+        state.prevAnimationNameState =
+            state.machine.state.current === "mounted" ? currAnimationName : "none";
+    });
+}
+function watchRefChange(state) {
+    watch(() => state.opts.ref.current, () => {
+        if (!state.opts.ref.current)
+            return;
+        state.styles = getComputedStyle(state.opts.ref.current);
+        return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
+    });
+}
+function getAnimationName(node) {
+    return node ? getComputedStyle(node).animationName || "none" : "none";
+}

package/dist/bits/utilities/presence-layer/types.d.ts

@@ -8,13 +8,11 @@ export type PresenceLayerProps = {
 };
 export type PresenceLayerImplProps = PresenceLayerProps & {
     /**
-     * The presence status.
+     * The open state of the component.
      */
-    present: boolean;
+    open: boolean;
     presence?: Snippet<[{
-        present: {
-            current: boolean;
-        };
+        present: boolean;
     }]>;
     ref: ReadableBox<HTMLElement | null>;
 };

package/dist/bits/utilities/scroll-lock/scroll-lock.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { ScrollLockProps } from "./index.js";
-	import { useBodyScrollLock } from "../../../internal/use-body-scroll-lock.svelte.js";
+	import { BodyScrollLock } from "../../../internal/body-scroll-lock.svelte.js";
 
 	let { preventScroll = true, restoreScrollDelay = null }: ScrollLockProps = $props();
 
 	if (preventScroll) {
-		useBodyScrollLock(preventScroll, () => restoreScrollDelay);
+		new BodyScrollLock(preventScroll, () => restoreScrollDelay);
 	}
 </script>

package/dist/bits/utilities/text-selection-layer/text-selection-layer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { TextSelectionLayerImplProps } from "./types.js";
-	import { useTextSelectionLayer } from "./use-text-selection-layer.svelte.js";
+	import { TextSelectionLayerState } from "./use-text-selection-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 
 	let {
@@ -14,7 +14,7 @@
 		ref,
 	}: TextSelectionLayerImplProps = $props();
 
-	useTextSelectionLayer({
+	TextSelectionLayerState.create({
 		id: box.with(() => id),
 		onPointerDown: box.with(() => onPointerDown),
 		onPointerUp: box.with(() => onPointerUp),

package/dist/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.d.ts

@@ -1,14 +1,14 @@
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { TextSelectionLayerImplProps } from "./types.js";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection" | "ref">> & {
+interface TextSelectionLayerStateOpts extends ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection" | "ref">> & {
     ref: HTMLElement | null;
-}>;
+}> {
+}
 export declare class TextSelectionLayerState {
     #private;
-    readonly opts: TextSelectionLayerStateProps;
+    static create(opts: TextSelectionLayerStateOpts): TextSelectionLayerState;
+    readonly opts: TextSelectionLayerStateOpts;
     readonly domContext: DOMContext;
-    constructor(opts: TextSelectionLayerStateProps);
+    constructor(opts: TextSelectionLayerStateOpts);
 }
-export declare function useTextSelectionLayer(props: TextSelectionLayerStateProps): TextSelectionLayerState;
 export {};

package/dist/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.js

@@ -5,6 +5,9 @@ import { noop } from "../../../internal/noop.js";
 import { isHTMLElement } from "../../../internal/is.js";
 globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
+    static create(opts) {
+        return new TextSelectionLayerState(opts);
+    }
     opts;
     domContext;
     #unsubSelectionLock = noop;
@@ -50,9 +53,6 @@ export class TextSelectionLayerState {
         this.#unsubSelectionLock = noop;
     };
 }
-export function useTextSelectionLayer(props) {
-    return new TextSelectionLayerState(props);
-}
 const getUserSelect = (node) => node.style.userSelect || node.style.webkitUserSelect;
 function preventTextSelectionOverflow(node, body) {
     const originalBodyUserSelect = getUserSelect(body);

package/dist/internal/animations-complete.d.ts

@@ -0,0 +1,12 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+interface AnimationsCompleteOpts extends ReadableBoxedValues<{
+    ref: HTMLElement | null;
+    afterTick: boolean;
+}> {
+}
+export declare class AnimationsComplete {
+    #private;
+    constructor(opts: AnimationsCompleteOpts);
+    run(fn: () => void | Promise<void>): void;
+}
+export {};

package/dist/internal/animations-complete.js

@@ -0,0 +1,55 @@
+import { afterTick, onDestroyEffect } from "svelte-toolbelt";
+export class AnimationsComplete {
+    #opts;
+    #currentFrame = undefined;
+    #isRunning = false;
+    constructor(opts) {
+        this.#opts = opts;
+        onDestroyEffect(() => this.#cleanup());
+    }
+    #cleanup() {
+        if (this.#currentFrame) {
+            window.cancelAnimationFrame(this.#currentFrame);
+            this.#currentFrame = undefined;
+        }
+        this.#isRunning = false;
+    }
+    run(fn) {
+        // prevent multiple concurrent runs
+        if (this.#isRunning)
+            return;
+        this.#cleanup();
+        this.#isRunning = true;
+        const node = this.#opts.ref.current;
+        if (!node) {
+            this.#isRunning = false;
+            return;
+        }
+        if (typeof node.getAnimations !== "function") {
+            this.#executeCallback(fn);
+            return;
+        }
+        this.#currentFrame = window.requestAnimationFrame(() => {
+            const animations = node.getAnimations();
+            if (animations.length === 0) {
+                this.#executeCallback(fn);
+                return;
+            }
+            Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+                this.#executeCallback(fn);
+            });
+        });
+    }
+    #executeCallback(fn) {
+        const execute = () => {
+            fn();
+            this.#isRunning = false;
+        };
+        if (this.#opts.afterTick) {
+            afterTick(execute);
+        }
+        else {
+            execute();
+        }
+    }
+}