pushing updates

package.json

@@ -44,15 +44,15 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
-		"@changesets/cli": "^2.27.10",
+		"@changesets/cli": "^2.27.11",
 		"@emotion/is-prop-valid": "^1.3.1",
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/kit": "^2.12.1",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^5.0.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
 		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0-beta.7",
+		"@tailwindcss/vite": "^4.0.0-beta.8",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/node": "^20.17.10",
 		"@vitest/ui": "latest",
@@ -61,13 +61,13 @@
 		"runed": "^0.18.0",
 		"sv": "^0.5.11",
 		"svelte-check": "^4.1.1",
-		"tailwindcss": "^4.0.0-beta.7",
+		"tailwindcss": "^4.0.0-beta.8",
 		"typescript": "^5.7.2",
 		"vite": "latest",
 		"vitest": "latest"
 	},
 	"peerDependencies": {
-		"svelte": "^5.14.1"
+		"svelte": "^5.14.4"
 	},
 	"engines": {
 		"bun": ">=1.0.0",

src/lib/components/Box.svelte

@@ -7,5 +7,11 @@
     style="min-height: {minHeight}px; height:fit-content; touch-action: none;"
     class="{cls} dark:bg-white/5 dark:text-black flex justify-center items-center border border-primary/40 rounded-xl my-2 p-4 md:p-6 w-full"
 >
-    <slot></slot>
+    <svelte:boundary onerror={console.log}>
+        <slot></slot>
+        {#snippet failed()}
+            <p>whoops!</p>
+            <p>check console for error</p>
+        {/snippet}
+    </svelte:boundary>
 </div>

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

@@ -16,7 +16,6 @@ Copyright (c) 2018 Framer B.V. -->
     import { useContext } from "$lib/motion-start/context/utils/context.svelte.js";
     import { useId } from "$lib/motion-start/utils/useId.js";
     import { fromStore, toStore } from "svelte/store";
-    import { untrack } from "svelte";
 
     interface Props extends PresenceChildProps {}
 
@@ -31,7 +30,7 @@ Copyright (c) 2018 Framer B.V. -->
     }: Props = $props();
 
     const presenceChildren = newChildrenMap();
-    const id = $state(useId());
+    const id = $derived(useId());
 
     const refresh = $derived(presenceAffectsLayout ? undefined : isPresent);
 
@@ -59,12 +58,13 @@ Copyright (c) 2018 Framer B.V. -->
 
     let context = fromStore(useContext(PresenceContext));
 
-    $effect.pre(() => {
+    $effect(() => {
         if (presenceAffectsLayout) {
             context.current = memoContext();
         }
-
-        context.current = memoContext(refresh);
+    });
+    $effect(() => {
+        context = memoContext(refresh);
     });
 
     const keyset = (flag?: boolean) => {
@@ -76,10 +76,7 @@ Copyright (c) 2018 Framer B.V. -->
 
         !isPresent && !presenceChildren.size && onExitComplete?.();
     });
-
     PresenceContext.Provider = context.current;
-
-    $inspect(isPresent);
 </script>
 
 {#if mode === "popLayout"}

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

@@ -31,21 +31,20 @@ Copyright (c) 2018 Framer B.V. -->
 
   let { id, inherit = true, children }: Props = $props();
 
-  const layoutGroupContext = fromStore(useContext(LayoutGroupContext)).current;
+  const layoutGroupContext = fromStore(useContext(LayoutGroupContext));
 
   const deprecatedLayoutGroupContext = fromStore(
     useContext(DeprecatedLayoutGroupContext),
-  ).current;
+  );
 
   const [forceRender, key] = useForceUpdate();
 
   let context = {
     current: null,
   } as MutableRefObject<LayoutGroupContext | null>;
 
-  const upstreamId = $derived(
-    layoutGroupContext.id || deprecatedLayoutGroupContext,
-  );
+  const upstreamId =
+    layoutGroupContext.current.id || deprecatedLayoutGroupContext.current;
 
   $effect(() => {
     if (context.current === null) {
@@ -56,7 +55,7 @@ Copyright (c) 2018 Framer B.V. -->
       context.current = {
         id,
         group: shouldInheritGroup(inherit!)
-          ? layoutGroupContext.group || nodeGroup()
+          ? layoutGroupContext.current.group || nodeGroup()
           : nodeGroup(),
       };
     }

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

@@ -11,7 +11,7 @@ Copyright (c) 2018 Framer B.V. -->
 </script>
 
 <script lang="ts">
-  import { type Snippet } from "svelte";
+  import { untrack, type Snippet } from "svelte";
 
   import { useContext } from "../../context/utils/context.svelte";
   import { LazyContext } from "../../context/LazyContext";
@@ -91,12 +91,20 @@ Copyright (c) 2018 Framer B.V. -->
     }
   });
 
-  LazyContext.Provider = { renderer: loadedRenderer.current, strict } as any;
+  LazyContext.Provider = {
+    renderer: loadedRenderer.current!,
+    strict: strict!,
+  };
 
-  fromStore(useContext(LazyContext)).current = {
-    renderer: loadedRenderer.current,
-    strict,
-  } as any;
+  $effect(() => {
+    untrack(
+      () =>
+        (fromStore(useContext(LazyContext)).current = {
+          renderer: loadedRenderer.current!,
+          strict: strict!,
+        }),
+    );
+  });
 </script>
 
 {@render children?.()}

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

@@ -8,6 +8,7 @@ Copyright (c) 2018 Framer B.V. -->
   import type { MotionConfigProps } from "./index.js";
   import { loadExternalIsValidProp } from "../../render/dom/utils/filter-props.js";
   import { fromStore } from "svelte/store";
+  import { untrack } from "svelte";
 
   interface Props extends MotionConfigProps {}
 
@@ -21,14 +22,18 @@ Copyright (c) 2018 Framer B.V. -->
 
   isValidProp && loadExternalIsValidProp(isValidProp);
 
-  let mcc = fromStore(useContext(MotionConfigContext)).current;
+  let mcc = fromStore(useContext(MotionConfigContext));
   /**
    * Inherit props from any parent MotionConfig components
    */
-  const config = $derived({
-    ...mcc,
-    ...{ transformPagePoint, isStatic, transition },
-  });
+  const config = {
+    ...mcc.current,
+    ...{
+      transformPagePoint: transformPagePoint!,
+      isStatic: isStatic!,
+      transition,
+    },
+  };
 
   /**
    * Don't allow isStatic to change between renders as it affects how many hooks
@@ -41,16 +46,18 @@ Copyright (c) 2018 Framer B.V. -->
      * Creating a new config context object will re-render every `motion` component
      * every time it renders. So we only want to create a new one sparingly.
      */
-    MotionConfigContext.Provider = config as any;
-  });
+    MotionConfigContext.Provider = config;
 
-  const memo = (..._args: any[]) => config;
-  $effect.pre(() => {
-    mcc = memo(
-      JSON.stringify(config.transition),
-      config.transformPagePoint,
-      config.reducedMotion,
-    ) as any;
+    const memo = (..._args: any[]) => config;
+
+    untrack(
+      () =>
+        (mcc.current = memo(
+          JSON.stringify(config.transition),
+          config.transformPagePoint,
+          config.reducedMotion,
+        )),
+    );
   });
 </script>
 

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

@@ -15,7 +15,7 @@ Copyright (c) 2018 Framer B.V. -->
 <script lang="ts" generics="V">
 	import { invariant } from "../../utils/errors";
 	import type { SvelteHTMLElements } from "svelte/elements";
-	import { setContext, type Component, type Snippet } from "svelte";
+	import { untrack, type Component, type Snippet } from "svelte";
 	import { ReorderContext } from "../../context/ReorderContext";
 	import { motion } from "../../render/components/motion/proxy";
 	import type { HTMLMotionProps } from "../../render/html/types";
@@ -96,7 +96,7 @@ Copyright (c) 2018 Framer B.V. -->
 
 	invariant(Boolean(values), "Reorder.Group must be provided a values prop");
 
-	const context: ReorderContextProps<V> = {
+	const context: ReorderContextProps<V> = $derived({
 		axis,
 		registerItem: (value, layout) => {
 			// If the entry was already added, update it rather than adding it again
@@ -122,11 +122,11 @@ Copyright (c) 2018 Framer B.V. -->
 				);
 			}
 		},
-	};
-
-	ReorderContext.Provider = context;
+	});
 
 	$effect(() => {
+		untrack(() => (ReorderContext.Provider = context));
+
 		if (!isReordering) return;
 		isReordering = false;
 	});

src/lib/motion-start/context/MotionContext/create.svelte.ts

@@ -10,12 +10,14 @@ import { getCurrentTreeVariants } from './utils';
 import { useContext } from '../utils/context.svelte';
 
 export function useCreateMotionContext<Instance>(props: MotionProps): MotionContextProps<Instance> {
-	const motionContext = fromStore(useContext(MotionContext));
+	const { initial, animate } = $derived(getCurrentTreeVariants(props, fromStore(useContext(MotionContext)).current));
 
-	return {
-		initial: getCurrentTreeVariants(props, motionContext.current).initial,
-		animate: getCurrentTreeVariants(props, motionContext.current).animate,
-	};
+	const memo = $derived((_initial: string | false | undefined, _animate: string | false | undefined) => ({
+		initial,
+		animate,
+	}));
+
+	return memo(variantLabelsAsDependency(initial), variantLabelsAsDependency(animate));
 }
 
 function variantLabelsAsDependency(prop: undefined | string | string[] | false) {

src/lib/motion-start/context/utils/context.svelte.ts

@@ -1,4 +1,4 @@
-import { getContext, onMount, setContext, untrack } from 'svelte';
+import { getContext, hasContext, onMount, setContext, untrack } from 'svelte';
 import { writable, type Writable } from 'svelte/store';
 
 type UnwrapWritable<T> = T extends Writable<infer I> ? I : T;
@@ -21,20 +21,22 @@ class CallableContext<T> extends Function {
 }
 
 class Context<T extends Writable<UnwrapWritable<T>>> extends CallableContext<T> {
-	#state: T | undefined = undefined;
+	#state: T;
 
 	public constructor(private initial: T) {
 		super(() => {
 			this.#state = getContext<T>(this);
+			// $effect(() => {
+			// 	this.#state = getContext<T>(this);
+			// });
 
-			return this.#state || this.initial;
+			return this.#state || initial;
 		});
 		this.#state = this.initial;
 	}
 
 	set Provider(value: UnwrapWritable<T>) {
-		$inspect.trace('set context');
-		setContext(this, this.#state || this.initial).set(value);
+		setContext(this, writable(value));
 	}
 }
 

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

@@ -88,6 +88,8 @@ Copyright (c) 2018 Framer B.V. -->
         ...props
     }: MotionCompProps = $props();
 
+    const motionProps = $derived(props);
+
     const {
         Component: as,
         createVisualElement,
@@ -112,18 +114,18 @@ Copyright (c) 2018 Framer B.V. -->
         | undefined
     >(undefined);
 
-    const layoutId = useLayoutId(props);
+    const layoutId = $derived(useLayoutId(motionProps));
 
     const configAndProps = $derived({
         ...fromStore(useContext(MotionConfigContext)).current,
-        ...props,
+        ...motionProps,
         layoutId,
     });
 
     const { isStatic } = $derived(configAndProps);
 
-    const context = $derived(useCreateMotionContext<Instance>(props));
-    const visualState = $derived(useVisualState(props, isStatic));
+    const context = useCreateMotionContext<Instance>(props);
+    const visualState = $derived(useVisualState(motionProps, isStatic));
 
     $effect.pre(() => {
         if (!isStatic && isBrowser) {
@@ -143,28 +145,24 @@ Copyright (c) 2018 Framer B.V. -->
              * for more performant animations and interactions
              */
             configAndProps;
-            untrack(
-                () =>
-                    (context.visualElement = useVisualElement<
-                        Instance,
-                        RenderState
-                    >(
-                        as,
-                        visualState,
-                        configAndProps,
-                        createVisualElement,
-                        layoutProjection.ProjectionNode,
-                    )),
+            context.visualElement = untrack(() =>
+                useVisualElement<Instance, RenderState>(
+                    as,
+                    visualState,
+                    configAndProps,
+                    createVisualElement,
+                    layoutProjection.ProjectionNode,
+                ),
             );
 
             // MotionContext.Provider
             untrack(() => (MotionContext.Provider = context));
         }
+    });
 
-        return () => {
-            // Since useMotionRef is not called on destroy, the visual element is unmounted here
-            context?.visualElement?.unmount();
-        };
+    $effect(() => () => {
+        // Since useMotionRef is not called on destroy, the visual element is unmounted here
+        context?.visualElement?.unmount();
     });
 </script>
 
@@ -173,15 +171,15 @@ Copyright (c) 2018 Framer B.V. -->
 {/if}
 <Renderer
     Component={as}
-    {props}
+    props={motionProps}
     bind:ref={() => ref as Instance,
     (v: Instance) => {
         useMotionRef<Instance, RenderState>(
             visualState,
             context.visualElement,
             externalRef,
         )(v);
-        return (ref = v);
+        ref = v;
     }}
     {visualState}
     {isStatic}