motion-start 0.0.3 → 0.1.1

package/dist/render/html/visual-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-element.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/visual-element.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoB/C,iBAAS,gBAAgB,CAAC,OAAO,EAAE,WAAW,uBAE7C;AACD,QAAA,IAAI,UAAU,EA+FT,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,uBAAuB,CAAC,CAAC;AAChF,QAAA,IAAI,iBAAiB,iNAAyC,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"visual-element.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/visual-element.ts"],"names":[],"mappings":"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"}

package/dist/render/html/visual-element.js

@@ -2,14 +2,13 @@
 based on framer-motion@4.1.15,
 Copyright (c) 2018 Framer B.V.
 */
-import { __assign, __rest } from 'tslib';
 import { getBoundingBox } from '../dom/projection/measure.js';
 import { isCSSVariable } from '../dom/utils/is-css-variable.js';
 import { parseDomVariant } from '../dom/utils/parse-dom-variant.js';
 import { getDefaultValueType } from '../dom/value-types/defaults.js';
 import { visualElement } from '../index.js';
 import { checkTargetForNewValues, getOrigin } from '../utils/setters.js';
-import { buildLayoutProjectionTransform, buildLayoutProjectionTransformOrigin } from './utils/build-projection-transform.js';
+import { buildLayoutProjectionTransform, buildLayoutProjectionTransformOrigin, } from './utils/build-projection-transform.js';
 import { buildHTMLStyles } from './utils/build-styles.js';
 import { renderHTML } from './utils/render.js';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
@@ -18,20 +17,19 @@ function getComputedStyle(element) {
     return window.getComputedStyle(element);
 }
 var htmlConfig = {
-    treeType: "dom",
-    readValueFromInstance: function (domElement, key) {
+    treeType: 'dom',
+    readValueFromInstance: (domElement, key) => {
         if (isTransformProp(key)) {
             var defaultType = getDefaultValueType(key);
             return defaultType ? defaultType.default || 0 : 0;
         }
         else {
             var computedStyle = getComputedStyle(domElement);
-            return ((isCSSVariable(key)
-                ? computedStyle.getPropertyValue(key)
-                : computedStyle[key]) || 0);
+            // @ts-expect-error
+            return (isCSSVariable(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
         }
     },
-    sortNodePosition: function (a, b) {
+    sortNodePosition: (a, b) => {
         /**
          * compareDocumentPosition returns a bitmask, by using the bitwise &
          * we're returning true if 2 in that bitmask is set to true. 2 is set
@@ -39,11 +37,11 @@ var htmlConfig = {
          */
         return a.compareDocumentPosition(b) & 2 ? 1 : -1;
     },
-    getBaseTarget: function (props, key) {
-        var _a;
+    getBaseTarget: (props, key) => {
+        var _a; // @ts-expect-error
         return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
     },
-    measureViewportBox: function (element, _a) {
+    measureViewportBox: (element, _a) => {
         var transformPagePoint = _a.transformPagePoint;
         return getBoundingBox(element, transformPagePoint);
     },
@@ -54,18 +52,17 @@ var htmlConfig = {
      * layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms
      * works
      */
-    resetTransform: function (element, domElement, props) {
+    resetTransform: (element, domElement, props) => {
         var transformTemplate = props.transformTemplate;
-        domElement.style.transform = transformTemplate
-            ? transformTemplate({}, "")
-            : "none";
+        domElement.style.transform = transformTemplate ? transformTemplate({}, '') : 'none';
         // Ensure that whatever happens next, we restore our transform on the next frame
         element.scheduleRender();
     },
-    restoreTransform: function (instance, mutableState) {
+    restoreTransform: (instance, mutableState) => {
+        // @ts-expect-error
         instance.style.transform = mutableState.style.transform;
     },
-    removeValueFromRenderState: function (key, _a) {
+    removeValueFromRenderState: (key, _a) => {
         var vars = _a.vars, style = _a.style;
         delete vars[key];
         delete style[key];
@@ -74,12 +71,12 @@ var htmlConfig = {
      * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
      * can be animated by Motion.
      */
-    makeTargetAnimatable: function (element, _a, _b, isMounted) {
+    makeTargetAnimatable: (element, _a, _b, isMounted) => {
         var transformValues = _b.transformValues;
         if (isMounted === void 0) {
             isMounted = true;
         }
-        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
+        var { transition, transitionEnd, ...target } = _a; // @ts-expect-error
         var origin = getOrigin(target, transition || {}, element);
         /**
          * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -93,25 +90,20 @@ var htmlConfig = {
                 origin = transformValues(origin);
         }
         if (isMounted) {
-            checkTargetForNewValues(element, target, origin);
+            checkTargetForNewValues(element, target, origin); // @ts-expect-error
             var parsed = parseDomVariant(element, target, origin, transitionEnd);
             transitionEnd = parsed.transitionEnd;
             target = parsed.target;
         }
-        return __assign({ transition: transition,
-            transitionEnd: transitionEnd }, target);
+        return Object.assign({ transition: transition, transitionEnd: transitionEnd }, target);
     },
     scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
-    build: function (element, renderState, latestValues, projection, layoutState, options, props) {
+    build: (element, renderState, latestValues, projection, layoutState, options, props) => {
         if (element.isVisible !== undefined) {
-            renderState.style.visibility = element.isVisible
-                ? "visible"
-                : "hidden";
+            renderState.style.visibility = element.isVisible ? 'visible' : 'hidden';
         }
         var isProjectionTranform = projection.isEnabled && layoutState.isHydrated;
-        buildHTMLStyles(renderState, latestValues, projection, layoutState, options, props.transformTemplate, isProjectionTranform ? buildLayoutProjectionTransform : undefined, isProjectionTranform
-            ? buildLayoutProjectionTransformOrigin
-            : undefined);
+        buildHTMLStyles(renderState, latestValues, projection, layoutState, options, props.transformTemplate, isProjectionTranform ? buildLayoutProjectionTransform : undefined, isProjectionTranform ? buildLayoutProjectionTransformOrigin : undefined);
     },
     render: renderHTML,
 };

package/dist/render/index.d.ts

@@ -2,7 +2,7 @@
 based on framer-motion@4.1.17,
 Copyright (c) 2018 Framer B.V.
 */
-import type { VisualElement, VisualElementConfig, VisualElementOptions } from "./types";
-declare var visualElement: <Instance = any, MutableState = any, Options extends {} = {}>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, resetTransform, restoreTransform, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState, }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
+import type { VisualElement, VisualElementConfig, VisualElementOptions } from './types';
+declare var visualElement: <Instance = any, MutableState = any, Options extends {} = {}>({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, resetTransform, restoreTransform, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }: VisualElementConfig<Instance, MutableState, Options>) => ({ parent, props, presenceId, blockInitialAnimation, visualState }: VisualElementOptions<Instance, any>, options?: Options) => VisualElement<Instance, any>;
 export { visualElement };
 //# sourceMappingURL=index.d.ts.map

package/dist/render/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/render/index.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA4BxF,QAAA,IAAI,aAAa,GAAa,QAAQ,QAAQ,YAAY,QAAQ,OAAO,SAAS,EAAE,kPAAkP,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,0EACjS,oBAAoB,CAAC,QAAQ,EAAE,GAAG,CAAC,YAAY,OAAO,iCAqpB9I,CAAC;AAUF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/render/index.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAkB,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA8BxG,QAAA,IAAI,aAAa,GAAa,QAAQ,QAAQ,YAAY,QAAQ,OAAO,SAAS,EAAE,kPAajF,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,yEAEc,oBAAoB,CAAC,QAAQ,EAAE,GAAG,CAAC,YAC5F,OAAO,iCAqvBlB,CAAC;AAUF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/render/index.js

@@ -4,7 +4,6 @@ Copyright (c) 2018 Framer B.V.
 */
 import sync, { cancelSync } from 'framesync';
 import { pipe } from 'popmotion';
-import { __assign, __read, __spreadArray } from 'tslib';
 import { Presence } from '../components/AnimateSharedLayout/types.js';
 import { eachAxis } from '../utils/each-axis.js';
 import { applyBoxTransforms, removeBoxTransforms } from '../utils/geometry/delta-apply.js';
@@ -24,7 +23,7 @@ import { createLayoutState, createProjectionState } from './utils/state.js';
 import { checkIfControllingVariants, checkIfVariantNode, isVariantLabel } from './utils/variants.js';
 // TODO: make abstract class - future plans to match latest FramerMotion
 var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, resetTransform, restoreTransform, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }) {
-    return function ({ parent, props, presenceId, blockInitialAnimation, visualState, }, options) {
+    return function ({ parent, props, presenceId, blockInitialAnimation, visualState }, options) {
         if (options === void 0) {
             options = {};
         }
@@ -107,7 +106,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
          * When values are removed from all animation props we need to search
          * for a fallback value to animate to. These values are tracked in baseTarget.
          */
-        var baseTarget = __assign({}, latestValues);
+        var baseTarget = Object.assign({}, latestValues);
         // Internal methods ========================
         /**
          * On mount, this will be hydrated with a callback to disconnect
@@ -158,8 +157,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             var prevTreeScaleY = treeScale.y;
             var prevDeltaTransform = layoutState.deltaTransform;
             updateLayoutDeltas(layoutState, leadProjection, element.path, latestValues);
-            hasViewportBoxUpdated &&
-                element.notifyViewportBoxUpdate(leadProjection.target, delta);
+            hasViewportBoxUpdated && element.notifyViewportBoxUpdate(leadProjection.target, delta);
             hasViewportBoxUpdated = false;
             var deltaTransform = buildLayoutProjectionTransform(delta, treeScale);
             if (deltaTransform !== prevDeltaTransform ||
@@ -171,6 +169,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             layoutState.deltaTransform = deltaTransform;
         }
         function updateTreeLayoutProjection() {
+            //@ts-ignore
             element.layoutTree.forEach(fireUpdateLayoutProjection);
         }
         /**
@@ -209,7 +208,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
          */
         var isControllingVariants = checkIfControllingVariants(props);
         var isVariantNode = checkIfVariantNode(props);
-        var element = __assign(__assign({
+        var element = Object.assign(Object.assign({
             treeType: treeType,
             /**
              * This is a mirror of the internal instance prop, which keeps
@@ -219,12 +218,15 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             /**
              * The depth of this visual element within the visual element tree.
              */
-            depth: parent ? parent.depth + 1 : 0, parent: parent, children: new Set(),
+            depth: parent ? parent.depth + 1 : 0,
+            parent: parent,
+            children: new Set(),
             /**
              * An ancestor path back to the root visual element. This is used
              * by layout projection to quickly recurse back up the tree.
              */
-            path: parent ? __spreadArray(__spreadArray([], __read(parent.path)), [parent]) : [], layoutTree: parent ? parent.layoutTree : new FlatTree(),
+            path: parent ? [...parent.path, ...[parent]] : [],
+            layoutTree: parent ? parent.layoutTree : new FlatTree(),
             /**
              *
              */
@@ -262,7 +264,10 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
              * by variant children to determine whether they need to trigger their
              * own animations on mount.
              */
-            isMounted: function () { return Boolean(instance); }, mount: function (newInstance) {
+            isMounted: function () {
+                return Boolean(instance);
+            },
+            mount: function (newInstance) {
                 instance = element.current = newInstance;
                 element.pointTo(element);
                 if (isVariantNode && parent && !isControllingVariants) {
@@ -277,12 +282,16 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 cancelSync.update(update);
                 cancelSync.render(render);
                 cancelSync.preRender(element.updateLayoutProjection);
-                valueSubscriptions.forEach(function (remove) { return remove(); });
+                valueSubscriptions.forEach(function (remove) {
+                    return remove();
+                });
                 element.stopLayoutAnimation();
                 element.layoutTree.remove(element);
                 removeFromVariantTree === null || removeFromVariantTree === void 0 ? void 0 : removeFromVariantTree();
                 parent === null || parent === void 0 ? void 0 : parent.children.delete(element);
-                unsubscribeFromLeadVisualElement === null || unsubscribeFromLeadVisualElement === void 0 ? void 0 : unsubscribeFromLeadVisualElement();
+                unsubscribeFromLeadVisualElement === null || unsubscribeFromLeadVisualElement === void 0
+                    ? void 0
+                    : unsubscribeFromLeadVisualElement();
                 lifecycles.clearAllListeners();
             },
             /**
@@ -293,7 +302,9 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 var closestVariantNode = element.getClosestVariantNode();
                 if (closestVariantNode) {
                     (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
-                    return function () { return closestVariantNode.variantChildren.delete(child); };
+                    return function () {
+                        return closestVariantNode?.variantChildren?.delete(child);
+                    };
                 }
             },
             sortNodePosition: function (other) {
@@ -309,7 +320,11 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
              * this visual element.
              */
             getClosestVariantNode: function () {
-                return isVariantNode ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode();
+                return isVariantNode
+                    ? element
+                    : parent === null || parent === void 0
+                        ? void 0
+                        : parent.getClosestVariantNode();
             },
             /**
              * A method that schedules an update to layout projections throughout
@@ -324,21 +339,32 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             /**
              * Expose the latest layoutId prop.
              */
-            getLayoutId: function () { return props.layoutId; },
+            getLayoutId: function () {
+                return props.layoutId;
+            },
             /**
              * Returns the current instance.
              */
-            getInstance: function () { return instance; },
+            getInstance: function () {
+                return instance;
+            },
             /**
              * Get/set the latest static values.
              */
-            getStaticValue: function (key) { return latestValues[key]; }, setStaticValue: function (key, value) { return (latestValues[key] = value); },
+            getStaticValue: function (key) {
+                return latestValues[key];
+            },
+            setStaticValue: function (key, value) {
+                return (latestValues[key] = value);
+            },
             /**
              * Returns the latest motion value state. Currently only used to take
              * a snapshot of the visual element - perhaps this can return the whole
              * visual state
              */
-            getLatestValues: function () { return latestValues; },
+            getLatestValues: function () {
+                return latestValues;
+            },
             /**
              * Set the visiblity of the visual element. If it's changed, schedule
              * a render to reflect these changes.
@@ -388,7 +414,9 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             /**
              * Check whether we have a motion value for this key
              */
-            hasValue: function (key) { return values.has(key); },
+            hasValue: function (key) {
+                return values.has(key);
+            },
             /**
              * Get a motion value for this key. If called with a default
              * value, we'll create one if none exists.
@@ -404,13 +432,20 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             /**
              * Iterate over our motion values.
              */
-            forEachValue: function (callback) { return values.forEach(callback); },
+            forEachValue: function (callback) {
+                return values.forEach(callback);
+            },
             /**
              * If we're trying to animate to a previously unencountered value,
              * we need to check for it in our state and as a last resort read it
              * directly from the instance (which might have performance implications).
              */
-            readValue: function (key) { var _a; return (_a = latestValues[key]) !== null && _a !== void 0 ? _a : readValueFromInstance(instance, key, options); },
+            readValue: function (key) {
+                var _a;
+                return (_a = latestValues[key]) !== null && _a !== void 0
+                    ? _a
+                    : readValueFromInstance(instance, key, options);
+            },
             /**
              * Set the base target to later animate back to. This is currently
              * only hydrated on creation and when we first read a value.
@@ -429,7 +464,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                         return target;
                 }
                 return baseTarget[key];
-            }
+            },
         }, lifecycles), {
             /**
              * Build the renderer state based on the latest visual state.
@@ -459,16 +494,24 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 props = newProps;
                 lifecycles.updatePropListeners(newProps);
                 prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
-            }, getProps: function () { return props; },
+            },
+            getProps: function () {
+                return props;
+            },
             // Variants ==============================
             /**
              * Returns the variant definition with a given name.
              */
-            getVariant: function (name) { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; },
+            getVariant: function (name) {
+                var _a;
+                return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name];
+            },
             /**
              * Returns the defined default transition on this component.
              */
-            getDefaultTransition: function () { return props.transition; },
+            getDefaultTransition: function () {
+                return props.transition;
+            },
             /**
              * Used by child variant nodes to get the closest ancestor variant props.
              */
@@ -481,6 +524,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 if (!isControllingVariants) {
                     var context_1 = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {};
                     if (props.initial !== undefined) {
+                        //@ts-ignore
                         context_1.initial = props.initial;
                     }
                     return context_1;
@@ -488,8 +532,10 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 var context = {};
                 for (var i = 0; i < numVariantProps; i++) {
                     var name_1 = variantProps[i];
+                    //@ts-ignore
                     var prop = props[name_1];
                     if (isVariantLabel(prop) || prop === false) {
+                        //@ts-ignore
                         context[name_1] = prop;
                     }
                 }
@@ -514,12 +560,15 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             unlockProjectionTarget: function () {
                 element.stopLayoutAnimation();
                 projection.isTargetLocked = false;
-            }, getLayoutState: function () { return layoutState; }, setCrossfader: function (newCrossfader) {
+            },
+            getLayoutState: function () {
+                return layoutState;
+            },
+            setCrossfader: function (newCrossfader) {
                 crossfader = newCrossfader;
-            }, isProjectionReady: function () {
-                return projection.isEnabled &&
-                    projection.isHydrated &&
-                    layoutState.isHydrated;
+            },
+            isProjectionReady: function () {
+                return projection.isEnabled && projection.isHydrated && layoutState.isHydrated;
             },
             /**
              * Start a layout animation on a given axis.
@@ -529,9 +578,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                     isRelative = false;
                 }
                 var progress = element.getProjectionAnimationProgress()[axis];
-                var _a = isRelative
-                    ? projection.relativeTarget[axis]
-                    : projection.target[axis], min = _a.min, max = _a.max;
+                var _a = isRelative ? projection.relativeTarget[axis] : projection.target[axis], min = _a.min, max = _a.max;
                 var length = max - min;
                 progress.clearListeners();
                 progress.set(min);
@@ -568,10 +615,11 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
              * axis. Lazy init if not already created.
              */
             getProjectionAnimationProgress: function () {
-                projectionTargetProgress || (projectionTargetProgress = {
-                    x: motionValue(0),
-                    y: motionValue(0),
-                });
+                projectionTargetProgress ||
+                    (projectionTargetProgress = {
+                        x: motionValue(0),
+                        y: motionValue(0),
+                    });
                 return projectionTargetProgress;
             },
             /**
@@ -582,7 +630,11 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 if (isRelative === void 0) {
                     isRelative = false;
                 }
-                var target;
+                var target; /*: {
+                min : number,
+                max : number,
+                projection: TargetProjection
+            };*/
                 if (isRelative) {
                     if (!projection.relativeTarget) {
                         projection.relativeTarget = axisBox();
@@ -611,10 +663,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                     box = layoutState.layout;
                 }
                 var _a = element.getProjectionAnimationProgress(), x = _a.x, y = _a.y;
-                var shouldRebase = !projection.relativeTarget &&
-                    !projection.isTargetLocked &&
-                    !x.isAnimating() &&
-                    !y.isAnimating();
+                var shouldRebase = !projection.relativeTarget && !projection.isTargetLocked && !x.isAnimating() && !y.isAnimating();
                 if (force || shouldRebase) {
                     eachAxis(function (axis) {
                         var _a = box[axis], min = _a.min, max = _a.max;
@@ -634,8 +683,15 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
             /**
              * Temporarily reset the transform of the instance.
              */
-            resetTransform: function () { return resetTransform(element, instance, props); }, restoreTransform: function () { return restoreTransform(instance, renderState); }, updateLayoutProjection: updateLayoutProjection,
+            resetTransform: function () {
+                return resetTransform(element, instance, props);
+            },
+            restoreTransform: function () {
+                return restoreTransform(instance, renderState);
+            },
+            updateLayoutProjection: updateLayoutProjection,
             updateTreeLayoutProjection: function () {
+                //@ts-ignore
                 element.layoutTree.forEach(fireResolveRelativeTargetBox);
                 /**
                  * Schedule the projection updates at the end of the current preRender
@@ -653,6 +709,7 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                     for (var i = element.path.length - 1; i >= 0; i--) {
                         var ancestor = element.path[i];
                         if (ancestor.projection.isEnabled) {
+                            //@ts-ignore
                             foundParent = ancestor;
                             break;
                         }
@@ -683,7 +740,9 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 /**
                  * Subscribe to lead component's layout animations
                  */
-                unsubscribeFromLeadVisualElement === null || unsubscribeFromLeadVisualElement === void 0 ? void 0 : unsubscribeFromLeadVisualElement();
+                unsubscribeFromLeadVisualElement === null || unsubscribeFromLeadVisualElement === void 0
+                    ? void 0
+                    : unsubscribeFromLeadVisualElement();
                 unsubscribeFromLeadVisualElement = pipe(newLead.onSetAxisTarget(element.scheduleUpdateLayoutProjection), newLead.onLayoutAnimationComplete(function () {
                     var _a;
                     if (element.isPresent) {
@@ -695,7 +754,8 @@ var visualElement = function ({ treeType, build, getBaseTarget, makeTargetAnimat
                 }));
             },
             // TODO: Clean this up
-            isPresent: true, presence: Presence.Entering
+            isPresent: true,
+            presence: Presence.Entering,
         });
         return element;
     };
@@ -706,6 +766,6 @@ function fireResolveRelativeTargetBox(child) {
 function fireUpdateLayoutProjection(child) {
     child.updateLayoutProjection();
 }
-var variantProps = __spreadArray(["initial"], __read(variantPriorityOrder));
+var variantProps = [...['initial'], ...variantPriorityOrder];
 var numVariantProps = variantProps.length;
 export { visualElement };

package/dist/render/svg/UseSVGProps.svelte

@@ -1,13 +1,15 @@
 <!-- based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V. -->
+<svelte:options runes />
 
 <script lang="ts">
   import { copyRawValuesOnly } from "../html/use-props.js";
   import { buildSVGAttrs } from "./utils/build-attrs.js";
   import { createSvgRenderState } from "./utils/create-render-state.js";
 
-  export let visualState, props;
-  let memo = () => {
+  let { visualState, props, children } = $props();
+
+  let memo = (variantLabelsAsDependency?: string | boolean | undefined) => {
     const state = createSvgRenderState();
     buildSVGAttrs(
       state,
@@ -22,13 +24,15 @@ Copyright (c) 2018 Framer B.V. -->
       style: { ...state.style },
     };
   };
-  $: visualProps = memo(visualState);
+  const visualProps = $derived(memo(visualState));
 
-  $: if (props.style) {
-    const rawStyles = {};
-    copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = { ...rawStyles, ...visualProps.style };
-  }
+  $effect(() => {
+    if (props.style) {
+      const rawStyles = {};
+      copyRawValuesOnly(rawStyles, props.style, props);
+      visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+  });
 </script>
 
-<slot {visualProps} />
+{@render children?.(visualProps)}

package/dist/render/svg/UseSVGProps.svelte.d.ts

@@ -1,35 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const UseSvgProps: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    visualState: any;
-    props: any;
-}, {
-    default: {
-        visualProps: any;
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        visualProps: any;
-    };
-}, {}, string>;
-type UseSvgProps = InstanceType<typeof UseSvgProps>;
+declare const UseSvgProps: import("svelte").Component<{
+    visualState: unknown;
+    props: unknown;
+    children: unknown;
+}, {}, "">;
 export default UseSvgProps;
 //# sourceMappingURL=UseSVGProps.svelte.d.ts.map

package/dist/render/svg/UseSVGProps.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UseSVGProps.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/UseSVGProps.svelte.ts"],"names":[],"mappings":"AA2CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,WAAW;;;;;;;;;;;;;cAAmF,CAAC;AACnF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UseSVGProps.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/UseSVGProps.svelte.ts"],"names":[],"mappings":"AA+CA,QAAA,MAAM,WAAW;iBArC2C,OAAO;WAAS,OAAO;cAAY,OAAO;UAqC/C,CAAC;AACxD,eAAe,WAAW,CAAC"}

package/dist/render/svg/config-motion.d.ts

@@ -1,8 +1,24 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../motion";
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
 declare var svgMotionConfig: {
     scrapeMotionValuesFromProps: typeof scrapeMotionValuesFromProps;
-    createRenderState: () => any;
-    onMount: (props: any, instance: any, _a: any) => void;
+    createRenderState: () => {
+        style: {};
+        transform: {};
+        transformKeys: never[];
+        transformOrigin: {};
+        vars: {};
+    } & {
+        attrs: {};
+    };
+    onMount: (props: MotionProps, instance: SVGGraphicsElement, _a: {
+        renderState: any;
+        latestValues: any;
+    }) => void;
 };
 export { svgMotionConfig };
 //# sourceMappingURL=config-motion.d.ts.map

package/dist/render/svg/config-motion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-motion.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/config-motion.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,QAAA,IAAI,eAAe;;;;CA4BuD,CAAA;AAK1E,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"config-motion.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/config-motion.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAyB,WAAW,EAAE,MAAM,cAAc,CAAC;AAWvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,QAAA,IAAI,eAAe;;;;;;;;;;;qBAIc,WAAW,YAAW,kBAAkB,MAAM;QAAE,WAAW,EAAE,GAAG,CAAC;QAAC,YAAY,EAAE,GAAG,CAAC;KAAE;CA2B7C,CAAA;AAK1E,OAAO,EAAE,eAAe,EAAE,CAAC"}