new understanding of update propegations

src/lib/motion-start/animation/hooks/use-animated-state.svelte.ts

@@ -53,19 +53,17 @@ export function useAnimatedState(initialState: any) {
 	let animationState = $state(initialState);
 	const visualState = useVisualState({}, false);
 
-	const element = $derived(
-		new StateVisualElement(
-			{
-				props: {
-					onUpdate: (v) => {
-						animationState = { ...v };
-					},
+	const element = new StateVisualElement(
+		{
+			props: {
+				onUpdate: (v) => {
+					animationState = { ...v };
 				},
-				visualState,
-				presenceContext: null,
 			},
-			{ initialState }
-		)
+			visualState,
+			presenceContext: null,
+		},
+		{ initialState }
 	);
 
 	$effect.pre(() => {

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 } = useContext(MotionConfigContext).current!;
 
     /**
      * We create and inject a style block so we can apply this explicit

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

@@ -34,7 +34,7 @@ Copyright (c) 2018 Framer B.V. -->
 
   const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
 
-  const [forceRender, key] = useForceUpdate();
+  const [forceRender, key] = $derived([...useForceUpdate()]);
 
   let context = {
     current: null,

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

@@ -129,9 +129,7 @@ Copyright (c) 2018 Framer B.V. -->
 		isReordering = false;
 	});
 
-	$effect.pre(() => {
-		ReorderContext.Provider = context;
-	});
+	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 = useContext(ReorderContext);
 	const point = $derived({
 		x: useDefaultMotionValue(style?.x),
 		y: useDefaultMotionValue(style?.y),
@@ -90,7 +90,7 @@ Copyright (c) 2018 Framer B.V. -->
 		);
 	});
 
-	const { axis, registerItem, updateOrder } = $derived(context!);
+	const { axis, registerItem, updateOrder } = context.current!;
 </script>
 
 <motion.groupItem

src/lib/motion-start/motion/Motion.svelte

@@ -124,8 +124,8 @@ Copyright (c) 2018 Framer B.V. -->
 
   const { isStatic } = $derived(configAndProps);
 
-  const context = useCreateMotionContext<Instance>(motionProps);
-  const visualState = useVisualState(motionProps, isStatic!);
+  const context = $derived(useCreateMotionContext<Instance>(motionProps));
+  const visualState = $derived(useVisualState(motionProps, isStatic!));
 
   if (!isStatic && isBrowser) {
     useStrictMode(configAndProps, preloadedFeatures);

src/lib/motion-start/motion/features/layout/MeasureLayoutWithContext.svelte

@@ -46,7 +46,7 @@ Copyright (c) 2018 Framer B.V. -->
     safeToRemove,
   }: Props = $props();
 
-  const { projection } = $derived({ ...visualElement });
+  const { projection } = $derived(visualElement);
   const prevProps = new Previous(() => ({ isPresent, layoutDependency }));
 
   const _safeToRemove = () => {

src/lib/motion-start/motion/utils/use-visual-element.svelte.ts

@@ -33,13 +33,13 @@ export function useVisualElement<Instance, RenderState>(
 		ProjectionNodeConstructor,
 	]);
 
-	const { visualElement: parent } = $derived({ ...useContext(MotionContext).current! });
+	const { visualElement: parent } = useContext(MotionContext).current!;
 
 	const lazyContext = useContext(LazyContext);
 
 	const presenceContext = useContext(PresenceContext);
 
-	const reducedMotionContext = $derived(useContext(MotionConfigContext).current?.reducedMotion);
+	const reducedMotionContext = useContext(MotionConfigContext).current?.reducedMotion;
 
 	const visualElementRef: { current: VisualElement<Instance> | null } = $state({ current: null });
 

src/lib/motion-start/value/use-motion-value.svelte.ts

@@ -33,7 +33,7 @@ export function useMotionValue<T>(initial: T): MotionValue<T> {
 	 * the Framer canvas, force components to rerender when the motion
 	 * value is updated.
 	 */
-	const { isStatic } = $derived({ ...useContext(MotionConfigContext).current! });
+	const { isStatic } = useContext(MotionConfigContext).current!;
 
 	if (isStatic) {
 		const setLatest = (_value) => {

src/lib/motion-start/value/use-spring.svelte.ts

@@ -37,7 +37,7 @@ function toNumber(v: string | number) {
  * @public
  */
 export const useSpring = (source: MotionValue | number, config: SpringOptions = {}) => {
-	const { isStatic } = $derived({ ...useContext(MotionConfigContext).current! });
+	const { isStatic } = useContext(MotionConfigContext).current!;
 
 	let activeSpringAnimation: MainThreadAnimation<number> | null = null;