motion-start 0.1.19 → 0.1.21

package/dist/animation/utils/is-animatable.d.ts

@@ -3,6 +3,11 @@ based on framer-motion@4.1.17,
 Copyright (c) 2018 Framer B.V.
 */
 import type { ResolvedValueTarget } from "../../types";
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import '../../utils/fix-process-env';
 /**
  * Check if a value is animatable. Examples:
  *

package/dist/animation/utils/is-animatable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"is-animatable.d.ts","sourceRoot":"","sources":["../../../src/lib/motion-start/animation/utils/is-animatable.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAUvD;;;;;;;;GAQG;AACH,QAAA,IAAI,YAAY,GAAa,KAAK,MAAM,EAAE,OAAO,mBAAmB,YAgBnE,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"is-animatable.d.ts","sourceRoot":"","sources":["../../../src/lib/motion-start/animation/utils/is-animatable.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGvD;;;EAGE;AACF,OAAO,6BAA6B,CAAC;AAGrC;;;;;;;;GAQG;AACH,QAAA,IAAI,YAAY,GAAa,KAAK,MAAM,EAAE,OAAO,mBAAmB,YAgBnE,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/animation/utils/is-animatable.js

@@ -2,7 +2,7 @@
 based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V.
 */
-import { fixed } from '../../utils/fix-process-env';
+import '../../utils/fix-process-env';
 import { complex } from 'style-value-types';
 /**
  * Check if a value is animatable. Examples:

package/dist/components/AnimatePresence/AnimatePresence.svelte

@@ -1,188 +1,221 @@
-<!-- based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V. -->
-
-<script lang="ts" generics="T extends {key:any}">
-    import type { ConditionalGeneric, AnimatePresenceProps } from "./index.js";
-    import { getContext } from "svelte";
-    import {
-        SharedLayoutContext,
-        isSharedLayout,
-    } from "../../context/SharedLayoutContext.js";
-    import PresenceChild from "./PresenceChild/PresenceChild.svelte";
-    import type { Writable } from "svelte/store";
-    import {
-        type SharedLayoutSyncMethods,
-        type SyncLayoutBatcher,
-    } from "../AnimateSharedLayout/types.js";
-
-    type $$Props = AnimatePresenceProps<ConditionalGeneric<T>>;
-
-    export let list: $$Props["list"] = undefined,
-        custom: $$Props["custom"] = undefined,
-        initial: $$Props["initial"] = true,
-        onExitComplete: $$Props["onExitComplete"] = undefined,
-        exitBeforeEnter: $$Props["exitBeforeEnter"] = undefined,
-        presenceAffectsLayout = true,
-        show: $$Props["show"] = undefined,
-        isCustom = false;
-
-    let _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
-    $: _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
-
-    const layoutContext =
-        getContext<Writable<SyncLayoutBatcher | SharedLayoutSyncMethods>>(
-            SharedLayoutContext,
-        ) || SharedLayoutContext(isCustom);
-
-    $: forceRender = () => {
-        if (isSharedLayout($layoutContext)) {
-            $layoutContext.forceUpdate();
-        }
-        _list = [..._list];
-    };
-
-    function getChildKey(child: { key: number }) {
-        return child.key || "";
-    }
-
-    let isInitialRender = true;
-    let filteredChildren = _list;
-    $: filteredChildren = _list;
-
-    let presentChildren = filteredChildren;
-    let allChildren = new Map<string | number, { key: number }>();
-    let exiting = new Set<"" | number>();
-    const updateChildLookup = (
-        children: { key: number }[],
-        allChild: Map<string | number, { key: number }>,
-    ) => {
-        children.forEach((child) => {
-            const key = getChildKey(child);
-            allChild.set(key, child);
-        });
-    };
-    $: updateChildLookup(filteredChildren, allChildren);
-
-    let childrenToRender: {
-        present: boolean;
-        item: any;
-        key: any;
-        onExit: undefined | (() => void);
-    }[] = [
-        ...filteredChildren.map((v) => ({
-            present: true,
-            item: v,
-            key: v.key,
-            onExit: undefined,
-        })),
-    ];
-
-    $: if (!isInitialRender) {
-        // If this is a subsequent render, deal with entering and exiting children
-        childrenToRender = [
-            ...filteredChildren.map((v) => ({
-                present: true,
-                item: v,
-                key: v.key,
-                onExit: undefined,
-            })),
-        ];
-
-        // Diff the keys of the currently-present and target children to update our
-        // exiting list.
-        const presentKeys = presentChildren.map(getChildKey);
-        const targetKeys = filteredChildren.map(getChildKey);
-        // Diff the present children with our target children and mark those that are exiting
-        const numPresent = presentKeys.length;
-        for (let i = 0; i < numPresent; i++) {
-            const key = presentKeys[i];
-            if (targetKeys.indexOf(key) === -1) {
-                exiting.add(key);
-            } else {
-                // In case this key has re-entered, remove from the exiting list
-                exiting.delete(key);
-            }
-        }
-
-        // If we currently have exiting children, and we're deferring rendering incoming children
-        // until after all current children have exiting, empty the childrenToRender array
-        if (exitBeforeEnter && exiting.size) {
-            childrenToRender = [];
-        }
-        // Loop through all currently exiting components and clone them to overwrite `animate`
-        // with any `exit` prop they might have defined.
-        exiting.forEach((key) => {
-            // If this component is actually entering again, early return
-            if (targetKeys.indexOf(key) !== -1) return;
-
-            const child = allChildren.get(key);
-            if (!child) return;
-
-            const insertionIndex = presentKeys.indexOf(key);
-
-            const onExit = () => {
-                allChildren.delete(key);
-                exiting.delete(key);
-
-                // Remove this child from the present children
-                const removeIndex = presentChildren.findIndex(
-                    (presentChild) => presentChild.key === key,
-                );
-
-                if (removeIndex < 0) {
-                    return;
-                }
-                presentChildren.splice(removeIndex, 1);
-
-                // Defer re-rendering until all exiting children have indeed left
-                if (!exiting.size) {
-                    presentChildren = [...filteredChildren];
-                    forceRender();
-                    onExitComplete && onExitComplete();
-                }
-            };
-
-            childrenToRender.splice(insertionIndex, 0, {
-                present: false,
-                item: child,
-                key: getChildKey(child),
-                onExit,
-            });
-        });
-        // Add `MotionContext` even to children that don't need it to ensure we're rendering
-        // the same tree between renders
-
-        /*
-        childrenToRender = childrenToRender.map((child) => {
-            const key = child.key as string | number;
-            return exiting.has(key) ? (
-                child
-            ) : (
-                <PresenceChild
-                    key={getChildKey(child)}
-                    isPresent
-                    presenceAffectsLayout={presenceAffectsLayout}
-                >
-                    {child}
-                </PresenceChild>
-            );
-        });
-        */
-        presentChildren = childrenToRender;
-    } else {
-        isInitialRender = false;
-    }
-</script>
-
-{#each childrenToRender as child (getChildKey(child))}
-    <PresenceChild
-        isPresent={child.present}
-        initial={initial ? undefined : false}
-        custom={child.onExit ? custom : undefined}
-        {presenceAffectsLayout}
-        onExitComplete={child.onExit}
-        {isCustom}
-    >
-        <slot item={child.item} />
-    </PresenceChild>
-{/each}
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts" generics="T extends {key:any}">
+    import type { ConditionalGeneric, AnimatePresenceProps } from "./index.js";
+    import { getContext, setContext, tick } from "svelte";
+    import {
+        SharedLayoutContext,
+        isSharedLayout,
+    } from "../../context/SharedLayoutContext.js";
+    import PresenceChild from "./PresenceChild/PresenceChild.svelte";
+    import type { Writable } from "svelte/store";
+    import {
+        type SharedLayoutSyncMethods,
+        type SyncLayoutBatcher,
+    } from "../AnimateSharedLayout/types.js";
+    import {
+        LayoutEpochContext,
+        createLayoutEpoch,
+        type LayoutEpoch,
+    } from "../../context/LayoutEpochContext.js";
+
+    type $$Props = AnimatePresenceProps<ConditionalGeneric<T>>;
+
+    export let list: $$Props["list"] = undefined,
+        custom: $$Props["custom"] = undefined,
+        initial: $$Props["initial"] = true,
+        onExitComplete: $$Props["onExitComplete"] = undefined,
+        exitBeforeEnter: $$Props["exitBeforeEnter"] = undefined,
+        presenceAffectsLayout = true,
+        show: $$Props["show"] = undefined,
+        isCustom = false;
+
+    let _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
+    $: _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
+
+    const layoutContext =
+        getContext<Writable<SyncLayoutBatcher | SharedLayoutSyncMethods>>(
+            SharedLayoutContext,
+        ) || SharedLayoutContext(isCustom);
+
+    // Single epoch store.  Measure subscribes to it for synchronous snapshots
+    // (store.update fires subscribers before DOM changes) and MeasureContextProvider
+    // reads it reactively to trigger afterU → syncLayout.flush() after DOM settles.
+    const layoutEpoch = createLayoutEpoch();
+    setContext(LayoutEpochContext, layoutEpoch);
+
+    // Snapshot sibling positions (snapshot=true) and notify shared layout before
+    // a DOM change so Measure can FLIP elements to their new spots.
+    // Called by forceRender (post-exit) and by the addition path in the reactive
+    // block below — both cases need the same snapshot + shared-layout notification.
+    function snapshotLayout() {
+        if (presenceAffectsLayout) {
+            layoutEpoch.update((v) => ({ n: v.n + 1, snapshot: true }));
+        }
+        if (isSharedLayout($layoutContext)) {
+            $layoutContext.forceUpdate();
+        }
+    }
+
+    $: forceRender = () => {
+        snapshotLayout();
+        _list = [..._list];
+    };
+
+    function getChildKey(child: { key: number }) {
+        return child.key || "";
+    }
+
+    let isInitialRender = true;
+    let filteredChildren = _list;
+    $: filteredChildren = _list;
+
+    let presentChildren = filteredChildren;
+    let allChildren = new Map<string | number, { key: number }>();
+    let exiting = new Set<"" | number>();
+    const updateChildLookup = (
+        children: { key: number }[],
+        allChild: Map<string | number, { key: number }>,
+    ) => {
+        children.forEach((child) => {
+            const key = getChildKey(child);
+            allChild.set(key, child);
+        });
+    };
+    $: updateChildLookup(filteredChildren, allChildren);
+
+    let childrenToRender: {
+        present: boolean;
+        item: any;
+        key: any;
+        onExit: undefined | (() => void);
+    }[] = [
+        ...filteredChildren.map((v) => ({
+            present: true,
+            item: v,
+            key: v.key,
+            onExit: undefined,
+        })),
+    ];
+
+    $: if (!isInitialRender) {
+        const presentKeys = presentChildren.map(getChildKey);
+        const targetKeys = filteredChildren.map(getChildKey);
+
+        const hasRemovals = presentKeys.some(
+            (k) => targetKeys.indexOf(k) === -1,
+        );
+        const hasAdditions = targetKeys.some(
+            (k) => presentKeys.indexOf(k) === -1,
+        );
+
+        if (hasRemovals) {
+            // Flush-only epoch (snapshot=false): drives animateF → safeToRemove for the
+            // exiting layout element (id2 registration).  Deferred by one tick so that
+            // PresenceChild's $effect (Svelte 5) has fired, updating PresenceContext and
+            // therefore visualElement.isPresent before Measure.svelte's epoch handler
+            // checks !visualElement.isPresent.  Siblings are skipped here; forceRender
+            // fires snapshotLayout() after the exit completes so they FLIP.
+            tick().then(() =>
+                layoutEpoch.update((v) => ({ n: v.n + 1, snapshot: false })),
+            );
+        } else if (hasAdditions) {
+            // Snapshot sibling positions before the DOM update (same logic as
+            // forceRender) so they FLIP to their new positions after the incoming
+            // element shifts them.  presenceAffectsLayout and shared-layout notify
+            // are handled inside snapshotLayout().
+            snapshotLayout();
+        }
+        // No epoch when hasRemovals=false && hasAdditions=false: this is a
+        // forceRender-triggered re-run (no real diff).  forceRender already fired
+        // snapshotLayout() before _list=[..._list], so we must not fire again.
+
+        // If this is a subsequent render, deal with entering and exiting children
+        childrenToRender = [
+            ...filteredChildren.map((v) => ({
+                present: true,
+                item: v,
+                key: v.key,
+                onExit: undefined,
+            })),
+        ];
+
+        // Diff the present children with our target children and mark those that are exiting
+        const numPresent = presentKeys.length;
+        for (let i = 0; i < numPresent; i++) {
+            const key = presentKeys[i];
+            if (targetKeys.indexOf(key) === -1) {
+                exiting.add(key);
+            } else {
+                // In case this key has re-entered, remove from the exiting list
+                exiting.delete(key);
+            }
+        }
+
+        // If we currently have exiting children, and we're deferring rendering incoming children
+        // until after all current children have exiting, empty the childrenToRender array
+        if (exitBeforeEnter && exiting.size) {
+            childrenToRender = [];
+        }
+        // Loop through all currently exiting components and clone them to overwrite animate
+        // with any exit prop they might have defined.
+        exiting.forEach((key) => {
+            // If this component is actually entering again, early return
+            if (targetKeys.indexOf(key) !== -1) return;
+
+            const child = allChildren.get(key);
+            if (!child) return;
+
+            const insertionIndex = presentKeys.indexOf(key);
+
+            const onExit = () => {
+                allChildren.delete(key);
+                exiting.delete(key);
+
+                // Remove this child from the present children
+                const removeIndex = presentChildren.findIndex(
+                    (presentChild) => presentChild.key === key,
+                );
+
+                if (removeIndex < 0) {
+                    return;
+                }
+                presentChildren.splice(removeIndex, 1);
+
+                // Defer re-rendering until all exiting children have indeed left
+                if (!exiting.size) {
+                    presentChildren = [...filteredChildren];
+                    forceRender();
+                    onExitComplete && onExitComplete();
+                }
+            };
+
+            childrenToRender.splice(insertionIndex, 0, {
+                present: false,
+                item: child,
+                key: getChildKey(child),
+                onExit,
+            });
+        });
+        presentChildren = childrenToRender;
+        // framermotion doesn't pass initial after initial render, but we want to be able to trigger it on new children
+        initial = true;
+    } else {
+        isInitialRender = false;
+    }
+</script>
+
+{#each childrenToRender as child (getChildKey(child))}
+    <PresenceChild
+        isPresent={child.present}
+        initial={initial ? undefined : false}
+        custom={child.onExit ? custom : undefined}
+        {presenceAffectsLayout}
+        onExitComplete={child.onExit}
+        {isCustom}
+        presenceKey={child.key}
+    >
+        <slot item={child.item} />
+    </PresenceChild>
+{/each}

package/dist/components/AnimatePresence/AnimatePresence.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatePresence.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AA8L3E,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAC,GAAG,EAAC,GAAG,CAAA;CAAC;IACvC,KAAK;IAGL,MAAM;;;IAGN,KAAK;;;;;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAC,GAAG,EAAC,GAAG,CAAA;KAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAE;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACha,CAAC,CAAC,SAAS;QAAC,GAAG,EAAC,GAAG,CAAA;KAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;QAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAC,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACvQ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,eAAe,EAAE,qBAAmC,CAAC;AACzC,KAAK,eAAe,CAAC,CAAC,SAAS;IAAC,GAAG,EAAC,GAAG,CAAA;CAAC,IAAI,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AACtF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AnimatePresence.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AA+N3E,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAC,GAAG,EAAC,GAAG,CAAA;CAAC;IACvC,KAAK;IAGL,MAAM;;;IAGN,KAAK;;;;;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAC,GAAG,EAAC,GAAG,CAAA;KAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAE;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACha,CAAC,CAAC,SAAS;QAAC,GAAG,EAAC,GAAG,CAAA;KAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;QAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAC,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACvQ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,eAAe,EAAE,qBAAmC,CAAC;AACzC,KAAK,eAAe,CAAC,CAAC,SAAS;IAAC,GAAG,EAAC,GAAG,CAAA;CAAC,IAAI,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AACtF,eAAe,eAAe,CAAC"}

package/dist/components/AnimatePresence/PresenceChild/PresenceChild.svelte

@@ -3,82 +3,96 @@ Copyright (c) 2018 Framer B.V. -->
 <svelte:options runes />
 
 <script lang="ts" module>
-    let presenceId = 0;
-    function getPresenceId() {
-        const id = presenceId;
-        presenceId++;
-        return id;
-    }
-    function newChildrenMap(): Map<number, boolean> {
-        return new Map<number, boolean>();
-    }
+  let presenceId = 0;
+  function getPresenceId() {
+    const id = presenceId;
+    presenceId++;
+    return id;
+  }
+  function newChildrenMap(): Map<number, boolean> {
+    return new Map<number, boolean>();
+  }
 </script>
 
 <script lang="ts">
-    import { setContext, tick } from "svelte";
-    import { setDomContext } from "../../../context/DOMcontext.js";
-    import { PresenceContext } from "../../../context/PresenceContext.js";
-    import type { PresenceChildProps } from "./index.js";
+  import { setContext, tick, untrack } from "svelte";
+  import { setDomContext } from "../../../context/DOMcontext.js";
+  import { PresenceContext } from "../../../context/PresenceContext.js";
+  import type { PresenceChildProps } from "./index.js";
 
-    interface Props extends PresenceChildProps {}
+  interface Props extends PresenceChildProps {}
 
-    let {
-        isPresent,
-        onExitComplete = undefined,
-        initial = undefined,
-        custom = undefined,
-        presenceAffectsLayout,
-        isCustom,
-        children,
-    }: Props = $props();
+  let {
+    isPresent,
+    onExitComplete = undefined,
+    initial = undefined,
+    custom = undefined,
+    presenceAffectsLayout,
+    isCustom,
+    children,
+    presenceKey = undefined,
+  }: Props = $props();
 
-    const presenceChildren = newChildrenMap();
-    const id = getPresenceId();
+  const presenceChildren = newChildrenMap();
+  const id = getPresenceId();
 
-    const refresh = $derived(presenceAffectsLayout ? undefined : isPresent);
+  const refresh = $derived(presenceAffectsLayout ? undefined : isPresent);
 
-    const memoContext = (flag?: boolean) => {
-        return {
-            id,
-            initial,
-            isPresent,
-            custom,
-            onExitComplete: (childId: number) => {
-                presenceChildren.set(childId, true);
-                let allComplete = true;
-                presenceChildren.forEach((isComplete) => {
-                    if (!isComplete) allComplete = false;
-                });
+  const memoContext = (flag?: boolean) => {
+    return {
+      id,
+      presenceKey,
+      initial,
+      isPresent,
+      custom,
+      onExitComplete: (childId: number) => {
+        if (!presenceChildren.has(childId)) return;
+        if (presenceChildren.get(childId) === true) return;
+        presenceChildren.set(childId, true);
+        let allComplete = true;
+        presenceChildren.forEach((isComplete) => {
+          if (!isComplete) allComplete = false;
+        });
 
-                allComplete && onExitComplete?.();
-            },
-            register: (childId: number) => {
-                presenceChildren.set(childId, false);
-                return () => presenceChildren.delete(childId);
-            },
-        };
+        allComplete && onExitComplete?.();
+      },
+      register: (childId: number) => {
+        presenceChildren.set(childId, false);
+        return () => presenceChildren.delete(childId);
+      },
     };
-    let context = PresenceContext();
-
-    $effect(() => {
-        if (presenceAffectsLayout) {
-            context.set(memoContext());
-        }
-    });
+  };
+  let context = PresenceContext();
+  // Set synchronously so children's usePresence() sees a non-null value via get()
+  context.set(memoContext());
 
-    $effect(() => context.set(memoContext(refresh)));
+  // Update context when relevant props change
+  $effect(() => {
+    if (presenceAffectsLayout) {
+      // Track all relevant props
+      isPresent;
+      initial;
+      custom;
+      // But set context without tracking to avoid loops
+      untrack(() => context.set(memoContext()));
+    } else {
+      // When presenceAffectsLayout is false, only track isPresent via refresh
+      refresh;
+      untrack(() => context.set(memoContext()));
+    }
+  });
 
-    const keyset = (flag?: boolean) => {
-        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
-    };
-    $effect(() => {
-        keyset(isPresent);
-        tick().then(() => {
-            !isPresent && !presenceChildren.size && onExitComplete?.();
-        });
+  const keyset = (flag?: boolean) => {
+    presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+  };
+  $effect(() => {
+    keyset(isPresent);
+    tick().then(() => {
+      !isPresent && !presenceChildren.size && onExitComplete?.();
     });
-    setContext(PresenceContext, context);
-    setDomContext("Presence", isCustom, context);
+  });
+  setContext(PresenceContext, context);
+  setDomContext("Presence", isCustom, context);
 </script>
 
 {@render children?.()}

package/dist/components/AnimatePresence/PresenceChild/PresenceChild.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceChild.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/components/AnimatePresence/PresenceChild/PresenceChild.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGjD,UAAU,KAAM,SAAQ,kBAAkB;CAAG;AA4EjD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PresenceChild.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/components/AnimatePresence/PresenceChild/PresenceChild.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGnD,UAAU,KAAM,SAAQ,kBAAkB;CAAG;AA0F/C,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/AnimatePresence/PresenceChild/types.d.ts

@@ -8,5 +8,6 @@ export interface PresenceChildProps {
     custom?: any;
     presenceAffectsLayout: boolean;
     isCustom: boolean;
+    presenceKey?: any;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/AnimatePresence/PresenceChild/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/components/AnimatePresence/PresenceChild/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,MAAM,WAAW,kBAAkB;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;IAChC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/components/AnimatePresence/PresenceChild/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,MAAM,WAAW,kBAAkB;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;IAChC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,CAAC;CAClB"}

package/dist/components/AnimatePresence/use-presence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-presence.d.ts","sourceRoot":"","sources":["../../../src/lib/motion-start/components/AnimatePresence/use-presence.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,QAAQ,EAAY,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAO1E,MAAM,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC;AACtC,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACzC,MAAM,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC;AAC7B,MAAM,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAK/C,wBAAgB,SAAS,CAAC,OAAO,EAAE,oBAAoB,WAEtD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,GAAI,kBAAgB,KAAG,QAAQ,CAAC,OAAO,CAG/D,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,kBAAgB,KAAG,QAAQ,CAAC,aAAa,GAAG,OAAO,GAAG,UAAU,CAkB3F,CAAA"}
+{"version":3,"file":"use-presence.d.ts","sourceRoot":"","sources":["../../../src/lib/motion-start/components/AnimatePresence/use-presence.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,QAAQ,EAAY,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAO1E,MAAM,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC;AACtC,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACzC,MAAM,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC;AAC7B,MAAM,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAK/C,wBAAgB,SAAS,CAAC,OAAO,EAAE,oBAAoB,WAEtD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,GAAI,kBAAgB,KAAG,QAAQ,CAAC,OAAO,CAG/D,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,kBAAgB,KAAG,QAAQ,CAAC,aAAa,GAAG,OAAO,GAAG,UAAU,CAmB3F,CAAA"}