update to new understanding of derived update propegation

src/lib/components/motion/AnimateLayout.svelte

@@ -23,8 +23,11 @@
             <motion.div
                 active={1 * !active}
                 layout
-                class="handle"
                 transition={spring}
+                onLayoutUpdate={(...args) => {
+                    console.log("change", args);
+                }}
+                class="handle"
             />
         </button>
     </div>

src/lib/motion-start/components/AnimatePresence/PopChild/PopChild.svelte

@@ -57,7 +57,7 @@ Copyright (c) 2018 Framer B.V. -->
         },
     };
 
-    const { nonce } = $derived(useContext(MotionConfigContext).current);
+    const { nonce } = $derived({ ...useContext(MotionConfigContext).current! });
 
     /**
      * We create and inject a style block so we can apply this explicit

src/lib/motion-start/components/AnimatePresence/PresenceChild/PresenceChild.svelte

@@ -29,10 +29,10 @@ Copyright (c) 2018 Framer B.V. -->
         children,
     }: Props = $props();
 
-    const presenceChildren = newChildrenMap();
+    const presenceChildren = $derived(newChildrenMap());
     const id = useId();
 
-    const memoOnExitComplete = $derived((childId: string | number) => {
+    const memoExitComplete = $derived((childId: string | number) => {
         presenceChildren.set(childId, true);
         for (const isComplete of presenceChildren.values()) {
             if (!isComplete) return;
@@ -46,7 +46,7 @@ Copyright (c) 2018 Framer B.V. -->
         initial,
         isPresent,
         custom,
-        onExitComplete: memoOnExitComplete,
+        onExitComplete: memoExitComplete,
         register: (childId: string | number) => {
             presenceChildren.set(childId, false);
             return () => presenceChildren.delete(childId);
@@ -56,7 +56,7 @@ Copyright (c) 2018 Framer B.V. -->
     const context = useContext(PresenceContext);
 
     $effect(() => {
-        memoOnExitComplete;
+        memoExitComplete;
         if (presenceAffectsLayout) {
             context.current = presenceProps();
         }
@@ -66,19 +66,21 @@ Copyright (c) 2018 Framer B.V. -->
         presenceChildren.forEach((_, key) => presenceChildren.set(key, false)),
     );
 
-    PresenceContext.Provider = context.current;
-
-    // $inspect(isPresent);
-    $effect(() => {
+    $effect.pre(() => {
         // $inspect.trace();
-        memoOnExitComplete;
+        memoExitComplete;
         context.current = presenceProps();
 
         keyset(isPresent);
+    });
 
-        tick().then(() => {
-            !isPresent && !presenceChildren.size && onExitComplete?.();
-        });
+    $effect.pre(() => {
+        PresenceContext.Provider = context.current;
+    });
+
+    // $inspect(isPresent);
+    $effect(() => {
+        !isPresent && !presenceChildren.size && onExitComplete?.();
     });
 </script>
 

src/lib/motion-start/components/LayoutGroup/LayoutGroup.svelte

@@ -30,11 +30,9 @@ Copyright (c) 2018 Framer B.V. -->
 
   let { id, inherit = true, children }: Props = $props();
 
-  const layoutGroupContext = $derived(useContext(LayoutGroupContext).current);
+  const layoutGroupContext = useContext(LayoutGroupContext);
 
-  const deprecatedLayoutGroupContext = $derived(
-    useContext(DeprecatedLayoutGroupContext).current,
-  );
+  const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
 
   const [forceRender, key] = useForceUpdate();
 
@@ -43,7 +41,7 @@ Copyright (c) 2018 Framer B.V. -->
   } as MutableRefObject<LayoutGroupContext | null>;
 
   const upstreamId = $derived(
-    layoutGroupContext?.id || deprecatedLayoutGroupContext,
+    layoutGroupContext.current?.id || deprecatedLayoutGroupContext.current,
   );
 
   $effect(() => {
@@ -55,7 +53,7 @@ Copyright (c) 2018 Framer B.V. -->
       context.current = {
         id,
         group: shouldInheritGroup(inherit!)
-          ? layoutGroupContext?.group || nodeGroup()
+          ? layoutGroupContext.current?.group || nodeGroup()
           : nodeGroup(),
       };
     }
@@ -68,7 +66,7 @@ Copyright (c) 2018 Framer B.V. -->
     };
   });
 
-  $effect(() => {
+  $effect.pre(() => {
     LayoutGroupContext.Provider = memo(key);
   });
 </script>

src/lib/motion-start/components/Reorder/Group.svelte

@@ -128,7 +128,10 @@ Copyright (c) 2018 Framer B.V. -->
 		if (!isReordering) return;
 		isReordering = false;
 	});
-	ReorderContext.Provider = context;
+
+	$effect.pre(() => {
+		ReorderContext.Provider = context;
+	});
 </script>
 
 <motion.group {...props} bind:ref ignoreStrict>

src/lib/motion-start/components/Reorder/Item.svelte

@@ -71,7 +71,7 @@ Copyright (c) 2018 Framer B.V. -->
 		}
 	>;
 
-	const context = $derived(useContext(ReorderContext).current);
+	const context = $derived({ ...useContext(ReorderContext).current });
 	const point = $derived({
 		x: useDefaultMotionValue(style?.x),
 		y: useDefaultMotionValue(style?.y),
@@ -107,11 +107,12 @@ Copyright (c) 2018 Framer B.V. -->
 		event.stopPropagation();
 
 		const { velocity } = gesturePoint;
-		velocity[axis] && updateOrder(value, point[axis].get(), velocity[axis]);
+		velocity[axis] &&
+			updateOrder?.(value, point[axis].get(), velocity[axis]);
 
 		onDrag && onDrag(event, gesturePoint);
 	}}
-	onLayoutMeasure={(measured: Box) => registerItem(value, measured)}
+	onLayoutMeasure={(measured: Box) => registerItem?.(value, measured)}
 	bind:ref
 	ignoreStrict
 >