pushing changes

package.json

@@ -36,7 +36,7 @@
 		"bits-ui": "^0.22.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"lucide-svelte": "^0.469.0",
+		"lucide-svelte": "^0.471.0",
 		"mode-watcher": "^0.5.0",
 		"nanoid": "^5.0.9",
 		"tailwind-merge": "^2.6.0",
@@ -52,22 +52,22 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.0.0-beta.8",
+		"@tailwindcss/vite": "^4.0.0-beta.9",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/node": "^20.17.12",
 		"@vitest/ui": "^2.1.8",
 		"csstype": "^3.1.3",
-		"publint": "^0.3.0",
+		"publint": "^0.3.2",
 		"runed": "^0.23.0",
-		"sv": "^0.6.10",
-		"svelte-check": "^4.1.1",
-		"tailwindcss": "^4.0.0-beta.8",
-		"typescript": "^5.7.2",
+		"sv": "^0.6.11",
+		"svelte-check": "^4.1.4",
+		"tailwindcss": "^4.0.0-beta.9",
+		"typescript": "^5.7.3",
 		"vite": "^6.0.7",
 		"vitest": "^2.1.8"
 	},
 	"peerDependencies": {
-		"svelte": "^5.16.6"
+		"svelte": "^5.17.3"
 	},
 	"engines": {
 		"bun": ">=1.0.0",

src/lib/motion-start/animation/hooks/animation-controls.ts

@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { invariant } from '../../utils/errors';
 import { setTarget } from '../../render/utils/setters';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import type { AnimationControls, AnimationDefinition } from '../types';
 import { animateVisualElement } from '../interfaces/visual-element';
 

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

@@ -7,7 +7,7 @@ import type { TargetAndTransition } from '../../types';
 import type { ResolvedValues } from '../../render/types';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state';
 import { createBox } from '../../projection/geometry/models';
-import { VisualElement } from '../../render/VisualElement.svelte';
+import { VisualElement } from '../../render/VisualElement';
 import { animateVisualElement } from '../interfaces/visual-element';
 
 interface AnimatedStateOptions {

src/lib/motion-start/animation/interfaces/motion-value.ts

@@ -12,7 +12,7 @@ import type { AnimationPlaybackControls, ValueAnimationOptions } from '../types'
 import type { UnresolvedKeyframes } from '../../render/utils/KeyframesResolver';
 import { MotionGlobalConfig } from '../../utils/GlobalConfig';
 import { instantAnimationState } from '../../utils/use-instant-transition-state';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe';
 import { frame } from '../../frameloop/frame';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation';

src/lib/motion-start/animation/interfaces/visual-element-target.ts

@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { transformProps } from '../../render/html/utils/transform';
 import type { AnimationTypeState } from '../../render/utils/animation-state';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import type { TargetAndTransition } from '../../types';
 import type { VisualElementAnimationOptions } from './types';
 import { animateMotionValue } from './motion-value';

src/lib/motion-start/animation/interfaces/visual-element-variant.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { resolveVariant } from '../../render/utils/resolve-dynamic-variants';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import type { VisualElementAnimationOptions } from './types';
 import { animateTarget } from './visual-element-target';
 

src/lib/motion-start/animation/interfaces/visual-element.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { resolveVariant } from '../../render/utils/resolve-dynamic-variants';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import type { AnimationDefinition } from '../types';
 import type { VisualElementAnimationOptions } from './types';
 import { animateTarget } from './visual-element-target';

src/lib/motion-start/animation/types.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import type { TargetAndTransition, TargetResolver } from '../types';
-import type { VisualElement } from '../render/VisualElement.svelte';
+import type { VisualElement } from '../render/VisualElement';
 import type { Easing } from '../easing/types';
 import type { Driver } from './animators/drivers/types';
 import type { SVGPathProperties, VariantLabels } from '../motion/types';

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

@@ -1,12 +1,12 @@
-<!-- based on framer-motion@4.0.3,
+<!-- based on framer-motion@11.11.11,
 Copyright (c) 2018 Framer B.V. -->
 
 <script lang="ts" generics="T extends {key:any}">
     import type { ConditionalGeneric, AnimatePresenceProps } from "./index.js";
     import PresenceChild from "./PresenceChild/PresenceChild.svelte";
     import { useContext } from "../../context/utils/context.js";
     import { LayoutGroupContext } from "../../context/LayoutGroupContext.js";
-    import { invariant } from "$lib/motion-start/utils/errors.js";
+    import { invariant } from "../../utils/errors.js";
     import { SvelteMap, SvelteSet } from "svelte/reactivity";
     import { getChildKey } from "./utils.js";
 

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

@@ -13,8 +13,8 @@ Copyright (c) 2018 Framer B.V. -->
     import { PresenceContext } from "../../../context/PresenceContext.js";
     import type { PresenceChildProps } from "./index.js";
     import PopChild from "../PopChild/PopChild.svelte";
-    import { useContext } from "$lib/motion-start/context/utils/context.js";
-    import { useId } from "$lib/motion-start/utils/useId.js";
+    import { useContext } from "../../../context/utils/context.js";
+    import { useId } from "../../../utils/useId.js";
     import { tick, untrack } from "svelte";
 
     interface Props extends PresenceChildProps {}
@@ -74,9 +74,7 @@ Copyright (c) 2018 Framer B.V. -->
         keyset(isPresent);
     });
 
-    $effect.pre(() => {
-        PresenceContext.Provider = context.current;
-    });
+    PresenceContext.Provider = context.current;
 
     // $inspect(isPresent);
     $effect(() => {

src/lib/motion-start/components/AnimatePresence/types.ts

@@ -1,5 +1,5 @@
 /** 
-based on framer-motion@4.1.17,
+based on framer-motion@11.11.11,
 Copyright (c) 2018 Framer B.V.
 */
 /**

src/lib/motion-start/context/MotionContext/index.ts

@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import { createContext } from '../utils/context';
 
 export interface MotionContext<Instance = unknown> {

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

@@ -1,4 +1,4 @@
-import type { RefObject } from '$lib/motion-start/utils/safe-react-types';
+import type { RefObject } from '../../utils/safe-react-types';
 import { getContext, hasContext, onMount, setContext, untrack } from 'svelte';
 import { createSubscriber } from 'svelte/reactivity';
 import { fromStore, toStore, writable, type Writable } from 'svelte/store';

src/lib/motion-start/gestures/drag/VisualElementDragControls.ts

@@ -18,7 +18,7 @@ import {
 	defaultElastic,
 	calcOrigin,
 } from './utils/constraints';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 import type { MotionProps } from '../../motion/types';
 import type { Axis, Point } from '../../projection/geometry/types';
 import { createBox } from '../../projection/geometry/models';

src/lib/motion-start/gestures/drag/index.ts

@@ -3,8 +3,8 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { Feature } from '../../motion/features/Feature.svelte';
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import { Feature } from '../../motion/features/Feature';
+import type { VisualElement } from '../../render/VisualElement';
 import { noop } from '../../utils/noop';
 import { VisualElementDragControls } from './VisualElementDragControls';
 

src/lib/motion-start/gestures/focus.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { addDomEvent } from '../events/add-dom-event';
-import { Feature } from '../motion/features/Feature.svelte';
+import { Feature } from '../motion/features/Feature';
 import { pipe } from '../utils/pipe';
 
 export class FocusGesture extends Feature<Element> {

src/lib/motion-start/gestures/hover.ts

@@ -7,8 +7,8 @@ import { addPointerEvent } from '../events/add-pointer-event';
 import { pipe } from '../utils/pipe';
 import { isDragActive } from './drag/utils/lock';
 import type { EventInfo } from '../events/types';
-import type { VisualElement } from '../render/VisualElement.svelte';
-import { Feature } from '../motion/features/Feature.svelte';
+import type { VisualElement } from '../render/VisualElement';
+import { Feature } from '../motion/features/Feature';
 import { frame } from '../frameloop';
 
 function addHoverEvent(node: VisualElement<Element>, isActive: boolean) {

src/lib/motion-start/gestures/pan/index.ts

@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { type PanInfo, PanSession } from './PanSession';
 import { addPointerEvent } from '../../events/add-pointer-event';
-import { Feature } from '../../motion/features/Feature.svelte';
+import { Feature } from '../../motion/features/Feature';
 import { noop } from '../../utils/noop';
 import { getContextWindow } from '../../utils/get-context-window';
 import { frame } from '../../frameloop';

src/lib/motion-start/gestures/press.ts

@@ -7,7 +7,7 @@ import { type EventListenerWithPointInfo, extractEventInfo } from '../events/eve
 import type { EventInfo } from '../events/types';
 import { addDomEvent } from '../events/add-dom-event';
 import { addPointerEvent } from '../events/add-pointer-event';
-import { Feature } from '../motion/features/Feature.svelte';
+import { Feature } from '../motion/features/Feature';
 import { pipe } from '../utils/pipe';
 import { isDragActive } from './drag/utils/lock';
 import { isNodeOrChild } from './utils/is-node-or-child';

src/lib/motion-start/index.ts

@@ -81,7 +81,7 @@ export { useDomEvent } from './events/use-dom-event';
 export { createRendererMotionComponent } from './motion/index.svelte';
 export { isMotionComponent } from './motion/utils/is-motion-component';
 export { unwrapMotionComponent } from './motion/utils/unwrap-motion-component';
-export { VisualElement } from './render/VisualElement.svelte';
+export { VisualElement } from './render/VisualElement';
 export { addScaleCorrector } from './projection/styles/scale-correction';
 export {
 	useInstantTransition,

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

@@ -72,7 +72,7 @@ Copyright (c) 2018 Framer B.V. -->
   import type { Ref } from "../utils/safe-react-types";
   import { useContext } from "../context/utils/context";
   import type { MotionComponentConfig } from "./index.svelte";
-  import type { VisualElement } from "../render/VisualElement.svelte";
+  import type { VisualElement } from "../render/VisualElement";
   import { isSVGComponent } from "../render/dom/utils/is-svg-component";
 
   type MotionCompProps = MotionComponentProps<Props> & {
@@ -103,17 +103,6 @@ Copyright (c) 2018 Framer B.V. -->
     >
   >("motionContexts");
 
-  /**
-   * If we need to measure the element we load this functionality in a
-   * separate class component in order to gain access to getSnapshotBeforeUpdate.
-   */
-  let MeasureLayout = $state<
-    | Component<
-        MotionProps & { visualElement: VisualElement<unknown, unknown> }
-      >
-    | undefined
-  >(undefined);
-
   const layoutId = $derived(useLayoutId(motionProps));
 
   const configAndProps = $derived({
@@ -127,42 +116,44 @@ Copyright (c) 2018 Framer B.V. -->
   const context = $derived(useCreateMotionContext<Instance>(motionProps));
   const visualState = $derived(useVisualState(motionProps, isStatic!));
 
-  if (!isStatic && isBrowser) {
+  $effect(() => {
     useStrictMode(configAndProps, preloadedFeatures);
+  });
 
-    const layoutProjection = getProjectionFunctionality(configAndProps);
+  const layoutProjection = $derived(
+    !isStatic && isBrowser
+      ? getProjectionFunctionality(configAndProps)
+      : undefined,
+  );
 
-    /**
-     * If we need to measure the element we load this functionality in a
-     * separate class component in order to gain access to getSnapshotBeforeUpdate.
-     */
-    MeasureLayout = layoutProjection.MeasureLayout;
+  /**
+   * If we need to measure the element we load this functionality in a
+   * separate class component in order to gain access to getSnapshotBeforeUpdate.
+   */
+  const MeasureLayout = $derived(layoutProjection?.MeasureLayout);
 
-    /**
-     * Create a VisualElement for this component. A VisualElement provides a common
-     * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
-     * providing a way of rendering to these APIs outside of the React render loop
-     * for more performant animations and interactions
-     */
-    context.visualElement = useVisualElement<Instance, RenderState>(
-      as,
-      visualState,
-      configAndProps,
-      createVisualElement,
-      layoutProjection.ProjectionNode,
-    );
-  }
+  /**
+   * Create a VisualElement for this component. A VisualElement provides a common
+   * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
+   * providing a way of rendering to these APIs outside of the React render loop
+   * for more performant animations and interactions
+   */
+  context.visualElement = useVisualElement<Instance, RenderState>(
+    as,
+    () => visualState,
+    () => configAndProps,
+    createVisualElement,
+    () => layoutProjection.ProjectionNode,
+  );
 
-  $effect(() => {
-    MotionContext.Provider = context;
-  });
+  MotionContext.Provider = context;
 
   // $effect(() => {
-  //     return () => {
-  //         console.log("dismount");
-  //         // Since useMotionRef is not called on destroy, the visual element is unmounted here
-  //         context.visualElement?.unmount();
-  //     };
+  //   return () => {
+  //     console.log("dismount");
+  //     // Since useMotionRef is not called on destroy, the visual element is unmounted here
+  //     context.visualElement?.unmount();
+  //   };
   // });
 
   const motionRef = $derived(

src/lib/motion-start/motion/features/Feature.svelte.ts → src/lib/motion-start/motion/features/Feature.ts

@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { VisualElement } from '../../render/VisualElement.svelte';
+import type { VisualElement } from '../../render/VisualElement';
 
 export abstract class Feature<I> {
 	isMounted = false;

src/lib/motion-start/motion/features/animation/exit.svelte.ts → src/lib/motion-start/motion/features/animation/exit.ts

@@ -3,21 +3,20 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { Feature } from '../Feature.svelte';
+import { Feature } from '../Feature';
 
 let id = 0;
 
 export class ExitAnimationFeature extends Feature<unknown> {
 	private id: number = id++;
 
 	update() {
-		$inspect.trace();
 		if (!this.node.presenceContext) return;
 
 		const { isPresent, onExitComplete, id } = this.node.presenceContext;
 		const { isPresent: prevIsPresent, id: prevId } = this.node.prevPresenceContext || {};
 
-		$inspect(isPresent, prevIsPresent, id, prevId);
+		console.log(isPresent, prevIsPresent, id, prevId);
 
 		if (!this.node.animationState || isPresent === prevIsPresent) {
 			return;

src/lib/motion-start/motion/features/animation/index.ts

@@ -5,8 +5,8 @@ Copyright (c) 2018 Framer B.V.
 
 import { isAnimationControls } from '../../../animation/utils/is-animation-controls';
 import { createAnimationState } from '../../../render/utils/animation-state';
-import type { VisualElement } from '../../../render/VisualElement.svelte';
-import { Feature } from '../Feature.svelte';
+import type { VisualElement } from '../../../render/VisualElement';
+import { Feature } from '../Feature';
 
 export class AnimationFeature extends Feature<unknown> {
 	unmountControls?: () => void;

src/lib/motion-start/motion/features/animations.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { AnimationFeature } from './animation';
-import { ExitAnimationFeature } from './animation/exit.svelte';
+import { ExitAnimationFeature } from './animation/exit';
 import type { FeaturePackages } from './types';
 
 export const animations: FeaturePackages = {

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

@@ -20,7 +20,7 @@ Copyright (c) 2018 Framer B.V. -->
 	import { LayoutGroupContext } from "../../../context/LayoutGroupContext";
 	import { SwitchLayoutGroupContext } from "../../../context/SwitchLayoutGroupContext";
 	import type { MotionProps } from "../../types";
-	import type { VisualElement } from "../../../render/VisualElement.svelte";
+	import type { VisualElement } from "../../../render/VisualElement";
 	import MeasureLayoutWithContext from "./MeasureLayoutWithContext.svelte";
 
 	const props: MotionProps & { visualElement: VisualElement<unknown> } =