JonathonRP
diff --git a/‎.changeset/fix-animate-presence-bugs.md‎
Lines changed: 5 additions & 0 deletions b/‎.changeset/fix-animate-presence-bugs.md‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎.github/workflows/preview.yaml‎
Lines changed: 29 additions & 0 deletions b/‎.github/workflows/preview.yaml‎
Lines changed: 29 additions & 0 deletions
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 1 deletion b/‎.gitignore‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎bun.lock‎
Lines changed: 1 addition & 0 deletions b/‎bun.lock‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎package.json‎
Lines changed: 5 additions & 11 deletions b/‎package.json‎
Lines changed: 5 additions & 11 deletions
diff --git a/‎src/lib/components/Card.svelte‎
Lines changed: 40 additions & 52 deletions b/‎src/lib/components/Card.svelte‎
Lines changed: 40 additions & 52 deletions
diff --git a/‎src/lib/components/motion/AnimatePresenceAffectsLayout.svelte‎
Lines changed: 74 additions & 0 deletions b/‎src/lib/components/motion/AnimatePresenceAffectsLayout.svelte‎
Lines changed: 74 additions & 0 deletions
diff --git a/‎src/lib/components/motion/AnimatePresenceStack.svelte‎
Lines changed: 43 additions & 5 deletions b/‎src/lib/components/motion/AnimatePresenceStack.svelte‎
Lines changed: 43 additions & 5 deletions
diff --git a/‎src/lib/components/motion/index.ts‎
Lines changed: 1 addition & 0 deletions b/‎src/lib/components/motion/index.ts‎
Lines changed: 1 addition & 0 deletions
@@ -0,0 +1,5 @@
+---
+"motion-start": patch
+---
+
+Fix AnimatePresence `presenceAffectsLayout` no-op, `isPresent` race condition with framesync batcher, and double `safeToRemove` guard
@@ -0,0 +1,29 @@
+name: Preview
+
+on: [push, pull_request]
+
+concurrency:
+  group: ${{ github.workflow }}-${{github.head_ref || github.ref_name}}
+  cancel-in-progress: true
+
+jobs:
+  Preview:
+    name: Publish pkg.pr.new preview
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install Dependencies
+        run: bun --bun install --frozen-lockfile
+
+      - name: Build
+        run: bun --bun run build
+
+      - name: Publish preview
+        run: npx pkg-pr-new publish . --template './examples/*'
@@ -8,7 +8,7 @@ bun.lockb
 .vercel
 /.svelte-kit
 /build
-/dist
+/dist/*
 
 # OS
 .DS_Store
 
@@ -12,6 +12,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
+			"import": "./dist/index.js",
+			"module": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
 		"./package.json": "./package.json",
@@ -38,26 +40,18 @@
 			"svelte": "./dist/value/index.js",
 			"import": "./dist/value/index.js",
 			"default": "./dist/value/index.js"
-		},
-		"./src/*.js": {
-			"types": "./dist/*.d.ts",
-			"svelte": "./dist/*.js",
-			"import": "./dist/*.js",
-			"default": "./dist/*.js"
-		},
-		"./src/*.svelte": {
-			"types": "./dist/*.d.ts",
-			"svelte": "./dist/*.svelte",
-			"default": "./dist/*.svelte"
 		}
 	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
+	"browser": "./dist/index.js",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 
@@ -1,61 +1,49 @@
 <script lang="ts">
-    import { Motion, useMotionValue, useTransform } from "$lib/motion-start";
-    let exitX = 0;
-    const x = useMotionValue(0);
-    const scale = useTransform(x, [-150, 0, 150], [0.5, 1, 0.5]);
-    const rotate = useTransform(x, [-150, 0, 150], [-45, 0, 45], {
-        clamp: false,
-    });
-    export let drag: any = false;
-    export let frontCard = false;
-    export let index: any = 0;
-    const variantsFrontCard = {
-        animate: { scale: 1, y: 0, opacity: 1 },
-        exit: (custom: any) => ({ x: custom, opacity: 0, scale: 0.5 }),
-    };
-    const variantsBackCard = {
-        initial: { scale: 0.3, y: 105, opacity: 0 },
-        animate: { scale: 0.75, y: 30, opacity: 0.5 },
-    };
-    $: isFront = frontCard ? variantsFrontCard : variantsBackCard;
+  import { Motion, useMotionValue, useTransform } from "$lib/motion-start";
 
-    function handleDragEnd(_: any, info: { offset: { x: number } }) {
-        // console.log("info", info);
-        if (info.offset.x < -100) {
-            // setExitX(-250);
-            exitX = -250;
-            //   props.setIndex(index + 1);
-            index = index + 1;
-        }
-        if (info.offset.x > 100) {
-            exitX = 250;
-            //   props.setIndex(index + 1);
-            index = index + 1;
-            //   console.log("trigger");
-        }
-    }
-    let i = 0;
+  const x = useMotionValue(0);
+  const scale = useTransform(x, [-150, 0, 150], [0.5, 1, 0.5]);
+  const rotate = useTransform(x, [-150, 0, 150], [-45, 0, 45], {
+    clamp: false,
+  });
+
+  export let drag: any = false;
+  export let frontCard = false;
+  export let index: any = 0;
+  export let custom;
+  export let onDragEnd;
+
+  const variantsFrontCard = {
+    animate: { scale: 1, y: 0, opacity: 1 },
+    exit: (custom: any) => ({ x: custom, opacity: 0, scale: 0.5 }),
+  };
+  const variantsBackCard = {
+    initial: { scale: 0.3, y: 105, opacity: 0 },
+    animate: { scale: 0.75, y: 30, opacity: 0.5 },
+  };
+  $: isFront = frontCard ? variantsFrontCard : variantsBackCard;
 </script>
 
 <!-- Animate Presence Stack -->
 
 <Motion.div
-    style={{
-        x,
-        rotate,
-    }}
-    {drag}
-    dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
-    variants={isFront}
-    initial="initial"
-    animate="animate"
-    onDragEnd={handleDragEnd}
-    exit="exit"
-    custom={exitX}
-    transition={frontCard
-        ? { type: "spring", stiffness: 300, damping: 20 }
-        : { scale: { duration: 0.2 }, opacity: { duration: 0.4 } }}
-    class="w-32 h-32 top-10 bg-white rouned-xl absolute rounded-xl text-black flex justify-center items-center select-none"
+  style={{
+    x,
+    rotate,
+  }}
+  {drag}
+  dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
+  variants={isFront}
+  initial="initial"
+  animate="animate"
+  {onDragEnd}
+  exit="exit"
+  {custom}
+  transition={frontCard
+    ? { type: "spring", stiffness: 300, damping: 20 }
+    : { scale: { duration: 0.2 }, opacity: { duration: 0.4 } }}
+  class="w-32 h-32 top-10 bg-white rouned-xl absolute rounded-xl text-black flex justify-center items-center select-none touch-none
+					 {frontCard ? 'z-10 cursor-grab active:cursor-grabbing' : 'z-0 pointer-none'}"
 >
-    {index}
+  {index}
 </Motion.div>
@@ -0,0 +1,74 @@
+<script>
+    import {
+        Motion,
+        AnimatePresence,
+        layoutAnimation,
+    } from "$lib/motion-start";
+
+    let nextId = 5;
+    let tasks = [
+        { key: 1, text: "Learn React" },
+        { key: 2, text: "Prototype with Framer" },
+        { key: 3, text: "Get Superpowers" },
+        { key: 4, text: "Conquer the universe" },
+    ];
+    let presenceAffectsLayout = true;
+
+    function removeTask(key) {
+        tasks = tasks.filter((t) => t.key !== key);
+    }
+
+    function addTask() {
+        tasks = [...tasks, { key: nextId, text: `Task ${nextId++}` }];
+    }
+
+    /**
+     * layout prop is needed for presenceAffectsLayout to work, but can be used without it to simply animate presence without affecting layout
+     * you can choose to have tracking depend on signals etc.
+     * it is not necessary to track every change that might affect layout, just the ones you care about.
+     * currently this works without tracking, but that is because the tasklist is already tracked by AnimatePresence.
+     * you can use the layoutAnimation.track() function to create a new function reference whenever something changes that might affect layout.
+     * for layout prop or custom={signal} or layoutDependency={signal}, you could track the signal itself, but you could also track something else that changes at the same time as the signal, like a list of items that will be re-rendered when the signal changes.
+     */
+    // Re-creates the function reference each time tasks changes, signalling
+    // motion elements to re-measure and FLIP to their new positions.
+    // $: layout = layoutAnimation.track(() => tasks);
+</script>
+
+<div class="w-64 bg-gray-700/40 rounded-lg p-3 flex flex-col gap-2">
+    <section class="flex items-center justify-center gap-3">
+        <label class="text-xs text-white/60 hover:text-white cursor-pointer">
+            <input
+                type="checkbox"
+                bind:checked={presenceAffectsLayout}
+                class="mr-1"
+            />
+            presenceAffectsLayout
+        </label>
+    </section>
+    <hr class="border-gray-600" />
+    <ul class="flex flex-col gap-1">
+        <AnimatePresence {presenceAffectsLayout} list={tasks} let:item>
+            <Motion.li
+                layout
+                initial={{ opacity: 0, y: -8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, x: -60 }}
+                transition={{ layout: { duration: 0.8 }, duration: 0.2 }}
+                class="flex items-center justify-between bg-white/10 rounded px-3 py-2 text-white text-sm select-none"
+            >
+                <span>{item.text}</span>
+                <button
+                    onclick={() => removeTask(item.key)}
+                    class="ml-2 text-white/40 hover:text-white leading-none"
+                    >✕</button
+                >
+            </Motion.li>
+        </AnimatePresence>
+    </ul>
+    <button
+        onclick={addTask}
+        class="text-xs text-white/60 hover:text-white py-1 px-2 rounded border border-white/20 hover:border-white/40 transition-colors"
+        >+ Add task</button
+    >
+</div>
@@ -1,10 +1,25 @@
 <script>
-    import { Motion, AnimatePresence } from "$lib/motion-start";
-    import Card from "$lib/components/Card.svelte";
-    let index = 0;
-    $: mint = index + 1;
-</script>
+  import { AnimatePresence } from "$lib/motion-start";
+  import Card from "$lib/components/Card.svelte";
+
+  let index = 0;
+  let exitX = 0;
+
+  $: mint = index + 1;
 
+  function handleDragEnd(_, info) {
+    if (info.offset.x < -100) {
+      exitX = -250;
+      index = index + 1;
+    }
+    if (info.offset.x > 100) {
+      exitX = 250;
+      index = index + 1;
+    }
+  }
+
+  /**
+ * This example demonstrates how to create a stack of cards that can be dragged and dismissed using Animate
 <div
     class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
 >
@@ -13,3 +28,26 @@
         <Card bind:index drag="x" frontCard={true} />
     </AnimatePresence>
 </div>
+*/
+</script>
+
+<div
+  class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
+>
+  <AnimatePresence
+    initial={false}
+    let:item
+    list={[
+      { key: index, isFront: true },
+      { key: mint, isFront: false },
+    ]}
+  >
+    <Card
+      bind:index={item.key}
+      drag={item.isFront ? "x" : false}
+      frontCard={item.isFront}
+      onDragEnd={item.isFront ? handleDragEnd : undefined}
+      custom={exitX}
+    />
+  </AnimatePresence>
+</div>
@@ -1,5 +1,6 @@
 // @ts-nocheck
 export { default as AnimateLayout } from './AnimateLayout.svelte';
+export { default as AnimatePresenceAffectsLayout } from './AnimatePresenceAffectsLayout.svelte';
 export { default as AnimatePresenceStack } from './AnimatePresenceStack.svelte';
 export { default as AnimationSequence } from './AnimationSequence.svelte';
 export { default as ColorInterpolation } from './ColorInterpolation.svelte';
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"motion-start": patch
 +---
++
 +Fix AnimatePresence `presenceAffectsLayout` no-op, `isPresent` race condition with framesync batcher, and double `safeToRemove` guard