bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,25 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopperContent: $$__sveltets_2_IsomorphicComponent<{
-    id: string;
-    wrapperId?: string;
-    style?: import("../../..").StyleProperties | string | null;
-    onPlaced?: () => void;
-} & import("../floating-layer/types.js").FloatingLayerContentProps & {
+import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
+type $$ComponentProps = FloatingLayerContentImplProps & {
     isStatic: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type PopperContent = InstanceType<typeof PopperContent>;
+};
+declare const PopperContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopperContent = ReturnType<typeof PopperContent>;
 export default PopperContent;

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperLayerInner from "./popper-layer-inner.svelte";
+
+	let {
+		popper,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		enabled,
+		...restProps
+	}: Omit<PopperLayerImplProps, "present"> & {
+		enabled: boolean;
+	} = $props();
+</script>
+
+<PopperLayerInner
+	{popper}
+	{onEscapeKeydown}
+	{escapeKeydownBehavior}
+	{preventOverflowTextSelection}
+	{id}
+	{onPointerDown}
+	{onPointerUp}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{arrowPadding}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{updatePositionStrategy}
+	{strategy}
+	{dir}
+	{preventScroll}
+	{wrapperId}
+	{style}
+	{onPlaced}
+	{customAnchor}
+	{isStatic}
+	{enabled}
+	{onInteractOutside}
+	{onCloseAutoFocus}
+	{onOpenAutoFocus}
+	{interactOutsideBehavior}
+	{loop}
+	{trapFocus}
+	{isValidEvent}
+	{onFocusOutside}
+	{...restProps}
+	forceMount={true}
+/>

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

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

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

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import ScrollLock from "../scroll-lock/scroll-lock.svelte";
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperContent from "./popper-content.svelte";
+	import EscapeLayer from "../escape-layer/escape-layer.svelte";
+	import DismissibleLayer from "../dismissible-layer/dismissible-layer.svelte";
+	import TextSelectionLayer from "../text-selection-layer/text-selection-layer.svelte";
+	import FocusScope from "../focus-scope/focus-scope.svelte";
+
+	let {
+		popper,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		enabled,
+		...restProps
+	}: Omit<PopperLayerImplProps, "present" | "children"> & {
+		enabled: boolean;
+	} = $props();
+</script>
+
+<PopperContent
+	{isStatic}
+	{id}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{arrowPadding}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{updatePositionStrategy}
+	{strategy}
+	{dir}
+	{wrapperId}
+	{style}
+	{onPlaced}
+	{customAnchor}
+>
+	{#snippet content({ props: floatingProps, wrapperProps })}
+		{#if restProps.forceMount && enabled}
+			<ScrollLock {preventScroll} />
+		{:else if !restProps.forceMount}
+			<ScrollLock {preventScroll} />
+		{/if}
+		<FocusScope
+			{id}
+			{onOpenAutoFocus}
+			{onCloseAutoFocus}
+			{loop}
+			trapFocus={enabled && trapFocus}
+			forceMount={restProps.forceMount}
+		>
+			{#snippet focusScope({ props: focusScopeProps })}
+				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
+					<DismissibleLayer
+						{id}
+						{onInteractOutside}
+						{onFocusOutside}
+						{interactOutsideBehavior}
+						{isValidEvent}
+						{enabled}
+					>
+						{#snippet children({ props: dismissibleProps })}
+							<TextSelectionLayer
+								{id}
+								{preventOverflowTextSelection}
+								{onPointerDown}
+								{onPointerUp}
+								{enabled}
+							>
+								{@render popper?.({
+									props: mergeProps(
+										restProps,
+										floatingProps,
+										dismissibleProps,
+										focusScopeProps,
+										{
+											style: {
+												pointerEvents: "auto",
+											},
+										}
+									),
+									wrapperProps,
+								})}
+							</TextSelectionLayer>
+						{/snippet}
+					</DismissibleLayer>
+				</EscapeLayer>
+			{/snippet}
+		</FocusScope>
+	{/snippet}
+</PopperContent>

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

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

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

@@ -1,13 +1,7 @@
 <script lang="ts">
-	import ScrollLock from "../scroll-lock/scroll-lock.svelte";
 	import type { PopperLayerImplProps } from "./types.js";
-	import PopperContent from "./popper-content.svelte";
-	import { EscapeLayer } from "../escape-layer/index.js";
-	import { DismissibleLayer } from "../dismissible-layer/index.js";
-	import { TextSelectionLayer } from "../text-selection-layer/index.js";
-	import { PresenceLayer } from "../presence-layer/index.js";
-	import { FocusScope } from "../focus-scope/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import PopperLayerInner from "./popper-layer-inner.svelte";
+	import PresenceLayer from "../presence-layer/presence-layer.svelte";
 
 	let {
 		popper,
@@ -36,7 +30,6 @@
 		style,
 		onPlaced,
 		onInteractOutside,
-		onInteractOutsideStart,
 		onCloseAutoFocus,
 		onOpenAutoFocus,
 		onFocusOutside,
@@ -52,9 +45,14 @@
 
 <PresenceLayer {id} {present} {...restProps}>
 	{#snippet presence({ present })}
-		<PopperContent
-			{isStatic}
+		<PopperLayerInner
+			{popper}
+			{onEscapeKeydown}
+			{escapeKeydownBehavior}
+			{preventOverflowTextSelection}
 			{id}
+			{onPointerDown}
+			{onPointerUp}
 			{side}
 			{sideOffset}
 			{align}
@@ -68,65 +66,23 @@
 			{updatePositionStrategy}
 			{strategy}
 			{dir}
+			{preventScroll}
 			{wrapperId}
 			{style}
 			{onPlaced}
 			{customAnchor}
-		>
-			{#snippet content({ props: floatingProps })}
-				{#if preventScroll}
-					<ScrollLock {preventScroll} />
-				{/if}
-				<FocusScope
-					{id}
-					{onOpenAutoFocus}
-					{onCloseAutoFocus}
-					{loop}
-					trapFocus={present.current && trapFocus}
-				>
-					{#snippet focusScope({ props: focusScopeProps })}
-						<EscapeLayer
-							{onEscapeKeydown}
-							{escapeKeydownBehavior}
-							enabled={present.current}
-						>
-							<DismissibleLayer
-								{id}
-								{onInteractOutside}
-								{onInteractOutsideStart}
-								{onFocusOutside}
-								{interactOutsideBehavior}
-								{isValidEvent}
-								enabled={present.current}
-							>
-								{#snippet children({ props: dismissibleProps })}
-									<TextSelectionLayer
-										{id}
-										{preventOverflowTextSelection}
-										{onPointerDown}
-										{onPointerUp}
-										enabled={present.current}
-									>
-										{@render popper?.({
-											props: mergeProps(
-												restProps,
-												floatingProps,
-												dismissibleProps,
-												focusScopeProps,
-												{
-													style: {
-														pointerEvents: "auto",
-													},
-												}
-											),
-										})}
-									</TextSelectionLayer>
-								{/snippet}
-							</DismissibleLayer>
-						</EscapeLayer>
-					{/snippet}
-				</FocusScope>
-			{/snippet}
-		</PopperContent>
+			{isStatic}
+			enabled={present.current}
+			{onInteractOutside}
+			{onCloseAutoFocus}
+			{onOpenAutoFocus}
+			{interactOutsideBehavior}
+			{loop}
+			{trapFocus}
+			{isValidEvent}
+			{onFocusOutside}
+			forceMount={false}
+			{...restProps}
+		/>
 	{/snippet}
 </PresenceLayer>

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

@@ -1,19 +1,4 @@
 import type { PopperLayerImplProps } from "./types.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopperLayer: $$__sveltets_2_IsomorphicComponent<PopperLayerImplProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type PopperLayer = InstanceType<typeof PopperLayer>;
+declare const PopperLayer: import("svelte").Component<PopperLayerImplProps, {}, "">;
+type PopperLayer = ReturnType<typeof PopperLayer>;
 export default PopperLayer;

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

@@ -7,16 +7,19 @@ import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-lay
 import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
 import type { ScrollLockProps } from "../scroll-lock/index.js";
 import type { Direction } from "../../../shared/index.js";
-export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & ScrollLockProps;
-export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & ScrollLockProps & {
+export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
+export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
     content?: Snippet<[{
         props: Record<string, unknown>;
     }]>;
     dir?: Direction;
 };
 export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerImplProps & FloatingLayerContentImplProps & Omit<PresenceLayerImplProps, "presence"> & TextSelectionLayerImplProps & FocusScopeImplProps & {
-    popper: Snippet<[{
-        props: Record<string, unknown>;
-    }]>;
+    popper: Snippet<[
+        {
+            props: Record<string, unknown>;
+            wrapperProps: Record<string, unknown>;
+        }
+    ]>;
     isStatic?: boolean;
 }, "enabled">;

package/dist/bits/utilities/portal/portal-consumer.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { Snippet } from "svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PortalConsumer: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     children?: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type PortalConsumer = InstanceType<typeof PortalConsumer>;
+};
+declare const PortalConsumer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PortalConsumer = ReturnType<typeof PortalConsumer>;
 export default PortalConsumer;

package/dist/bits/utilities/portal/portal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { getAllContexts, mount, unmount, untrack } from "svelte";
+	import { getAllContexts, mount, unmount } from "svelte";
 	import { DEV } from "esm-env";
+	import { watch } from "runed";
 	import PortalConsumer from "./portal-consumer.svelte";
 	import type { PortalProps } from "./types.js";
 	import { isBrowser } from "../../../internal/is.js";
@@ -36,30 +37,30 @@
 		return localTarget;
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let instance: any;
 
-	$effect(() => {
+	function unmountInstance() {
+		if (instance) {
+			unmount(instance);
+			instance = null;
+		}
+	}
+
+	watch([() => target, () => disabled], ([target, disabled]) => {
 		if (!target || disabled) {
-			if (instance) {
-				unmount(instance);
-				instance = null;
-			}
+			unmountInstance();
 			return;
 		}
-		untrack(
-			() =>
-				(instance = mount(PortalConsumer, {
-					target: target as any,
-					props: { children },
-					context,
-				}))
-		);
+		instance = mount(PortalConsumer, {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			target: target as any,
+			props: { children },
+			context,
+		});
 
 		return () => {
-			if (instance) {
-				unmount(instance);
-				instance = null;
-			}
+			unmountInstance();
 		};
 	});
 </script>

package/dist/bits/utilities/portal/portal.svelte.d.ts

@@ -1,19 +1,4 @@
 import type { PortalProps } from "./types.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Portal: $$__sveltets_2_IsomorphicComponent<PortalProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Portal = InstanceType<typeof Portal>;
+declare const Portal: import("svelte").Component<PortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
 export default Portal;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { PresenceLayerImplProps } from "./types.js";
-	import { usePresence } from "./usePresence.svelte.js";
+	import { usePresence } from "./use-presence.svelte.js";
 
 	let { present, forceMount, presence, id }: PresenceLayerImplProps = $props();
 

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

@@ -1,19 +1,4 @@
 import type { PresenceLayerImplProps } from "./types.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PresenceLayer: $$__sveltets_2_IsomorphicComponent<PresenceLayerImplProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type PresenceLayer = InstanceType<typeof PresenceLayer>;
+declare const PresenceLayer: import("svelte").Component<PresenceLayerImplProps, {}, "">;
+type PresenceLayer = ReturnType<typeof PresenceLayer>;
 export default PresenceLayer;

package/dist/bits/utilities/presence-layer/{usePresence.svelte.d.ts → use-presence.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ReadableBox } from "svelte-toolbelt";
+import { type ReadableBox } from "svelte-toolbelt";
 export declare function usePresence(present: ReadableBox<boolean>, id: ReadableBox<string>): {
     readonly current: boolean;
 };

package/dist/bits/utilities/presence-layer/{usePresence.svelte.js → use-presence.svelte.js}

@@ -1,18 +1,18 @@
-import { afterTick } from "../../../internal/afterTick.js";
-import { useStateMachine } from "../../../internal/useStateMachine.svelte.js";
-import { watch } from "../../../internal/box.svelte.js";
+import { afterTick, executeCallbacks } from "svelte-toolbelt";
+import { Previous, watch } from "runed";
+import { on } from "svelte/events";
+import { useStateMachine } from "../../../internal/use-state-machine.svelte.js";
 export function usePresence(present, id) {
     let styles = $state({});
     let prevAnimationNameState = $state("none");
     const initialState = present.current ? "mounted" : "unmounted";
     let node = $state(null);
-    $effect(() => {
-        if (!id.current)
-            return;
-        if (!present.current)
+    const prevPresent = new Previous(() => present.current);
+    watch([() => id.current, () => present.current], ([id, present]) => {
+        if (!id || !present)
             return;
         afterTick(() => {
-            node = document.getElementById(id.current);
+            node = document.getElementById(id);
         });
     });
     const { state, dispatch } = useStateMachine(initialState, {
@@ -28,13 +28,13 @@ export function usePresence(present, id) {
             MOUNT: "mounted",
         },
     });
-    watch(present, (currPresent, prevPresent) => {
+    watch(() => present.current, (currPresent) => {
         if (!node) {
             node = document.getElementById(id.current);
         }
         if (!node)
             return;
-        const hasPresentChanged = currPresent !== prevPresent;
+        const hasPresentChanged = currPresent !== prevPresent.current;
         if (!hasPresentChanged)
             return;
         const prevAnimationName = prevAnimationNameState;
@@ -69,9 +69,8 @@ export function usePresence(present, id) {
      * make sure we only trigger ANIMATION_END for the currently active animation.
      */
     function handleAnimationEnd(event) {
-        if (!node) {
+        if (!node)
             node = document.getElementById(id.current);
-        }
         if (!node)
             return;
         const currAnimationName = getAnimationName(node);
@@ -81,36 +80,27 @@ export function usePresence(present, id) {
         }
     }
     function handleAnimationStart(event) {
-        if (!node) {
+        if (!node)
             node = document.getElementById(id.current);
-        }
         if (!node)
             return;
         if (event.target === node) {
             prevAnimationNameState = getAnimationName(node);
         }
     }
-    watch(state, () => {
-        if (!node) {
+    watch(() => state.current, () => {
+        if (!node)
             node = document.getElementById(id.current);
-        }
         if (!node)
             return;
         const currAnimationName = getAnimationName(node);
         prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
     });
-    $effect(() => {
+    watch(() => node, (node) => {
         if (!node)
             return;
         styles = getComputedStyle(node);
-        node.addEventListener("animationstart", handleAnimationStart);
-        node.addEventListener("animationcancel", handleAnimationEnd);
-        node.addEventListener("animationend", handleAnimationEnd);
-        return () => {
-            node?.removeEventListener("animationstart", handleAnimationStart);
-            node?.removeEventListener("animationcancel", handleAnimationEnd);
-            node?.removeEventListener("animationend", handleAnimationEnd);
-        };
+        return executeCallbacks(on(node, "animationstart", handleAnimationStart), on(node, "animationcancel", handleAnimationEnd), on(node, "animationend", handleAnimationEnd));
     });
     const isPresentDerived = $derived(["mounted", "unmountSuspended"].includes(state.current));
     return {