motion-v 0.3.1-beta.1 → 0.4.1

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/state.mjs

@@ -0,0 +1,15 @@
+const globalProjectionState = {
+  /**
+   * Global flag as to whether the tree has animated since the last time
+   * we resized the window
+   */
+  hasAnimatedSinceResize: true,
+  /**
+   * We set this to true once, on the first update. Any nodes added to the tree beyond that
+   * update will be given a `data-projection-id` attribute.
+   */
+  hasEverUpdated: false
+};
+export {
+  globalProjectionState
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/shared/stack.mjs

@@ -0,0 +1,94 @@
+import { addUniqueItem, removeItem } from "../../utils/array.mjs";
+class NodeStack {
+  constructor() {
+    this.members = [];
+  }
+  add(node) {
+    addUniqueItem(this.members, node);
+    node.scheduleRender();
+  }
+  remove(node) {
+    removeItem(this.members, node);
+    if (node === this.prevLead) {
+      this.prevLead = void 0;
+    }
+    if (node === this.lead) {
+      const prevLead = this.members[this.members.length - 1];
+      if (prevLead) {
+        this.promote(prevLead);
+      }
+    }
+  }
+  relegate(node) {
+    const indexOfNode = this.members.findIndex((member) => node === member);
+    if (indexOfNode === 0)
+      return false;
+    let prevLead;
+    for (let i = indexOfNode; i >= 0; i--) {
+      const member = this.members[i];
+      if (member.isPresent !== false) {
+        prevLead = member;
+        break;
+      }
+    }
+    if (prevLead) {
+      this.promote(prevLead);
+      return true;
+    } else {
+      return false;
+    }
+  }
+  promote(node, preserveFollowOpacity) {
+    const prevLead = this.lead;
+    if (node === prevLead)
+      return;
+    this.prevLead = prevLead;
+    this.lead = node;
+    node.show();
+    if (prevLead) {
+      prevLead.instance && prevLead.scheduleRender();
+      node.scheduleRender();
+      node.resumeFrom = prevLead;
+      if (preserveFollowOpacity) {
+        node.resumeFrom.preserveOpacity = true;
+      }
+      if (prevLead.snapshot) {
+        node.snapshot = prevLead.snapshot;
+        node.snapshot.latestValues = prevLead.animationValues || prevLead.latestValues;
+      }
+      if (node.root && node.root.isUpdating) {
+        node.isLayoutDirty = true;
+      }
+      const { crossfade } = node.options;
+      if (crossfade === false) {
+        prevLead.hide();
+      }
+    }
+  }
+  exitAnimationComplete() {
+    this.members.forEach((node) => {
+      const { options, resumingFrom } = node;
+      options.onExitComplete && options.onExitComplete();
+      if (resumingFrom) {
+        resumingFrom.options.onExitComplete && resumingFrom.options.onExitComplete();
+      }
+    });
+  }
+  scheduleRender() {
+    this.members.forEach((node) => {
+      node.instance && node.scheduleRender(false);
+    });
+  }
+  /**
+   * Clear any leads that have been removed this render to prevent them from being
+   * used in future animations and to prevent memory leaks
+   */
+  removeLeadSnapshot() {
+    if (this.lead && this.lead.snapshot) {
+      this.lead.snapshot = void 0;
+    }
+  }
+}
+export {
+  NodeStack
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs

@@ -0,0 +1,26 @@
+import { px } from "../../value/types/numbers/units.mjs";
+function pixelsToPercent(pixels, axis) {
+  if (axis.max === axis.min)
+    return 0;
+  return pixels / (axis.max - axis.min) * 100;
+}
+const correctBorderRadius = {
+  correct: (latest, node) => {
+    if (!node.target)
+      return latest;
+    if (typeof latest === "string") {
+      if (px.test(latest)) {
+        latest = parseFloat(latest);
+      } else {
+        return latest;
+      }
+    }
+    const x = pixelsToPercent(latest, node.target.x);
+    const y = pixelsToPercent(latest, node.target.y);
+    return `${x}% ${y}%`;
+  }
+};
+export {
+  correctBorderRadius,
+  pixelsToPercent
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs

@@ -0,0 +1,25 @@
+import { mixNumber } from "../../utils/mix/number.mjs";
+import { complex } from "../../value/types/complex/index.mjs";
+const correctBoxShadow = {
+  correct: (latest, { treeScale, projectionDelta }) => {
+    const original = latest;
+    const shadow = complex.parse(latest);
+    if (shadow.length > 5)
+      return original;
+    const template = complex.createTransformer(latest);
+    const offset = typeof shadow[0] !== "number" ? 1 : 0;
+    const xScale = projectionDelta.x.scale * treeScale.x;
+    const yScale = projectionDelta.y.scale * treeScale.y;
+    shadow[0 + offset] /= xScale;
+    shadow[1 + offset] /= yScale;
+    const averageScale = mixNumber(xScale, yScale, 0.5);
+    if (typeof shadow[2 + offset] === "number")
+      shadow[2 + offset] /= averageScale;
+    if (typeof shadow[3 + offset] === "number")
+      shadow[3 + offset] /= averageScale;
+    return template(shadow);
+  }
+};
+export {
+  correctBoxShadow
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-correction.mjs

@@ -1,4 +1,8 @@
 const scaleCorrectors = {};
+function addScaleCorrector(correctors) {
+  Object.assign(scaleCorrectors, correctors);
+}
 export {
+  addScaleCorrector,
   scaleCorrectors
 };

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/transform.mjs

@@ -0,0 +1,36 @@
+function buildProjectionTransform(delta, treeScale, latestTransform) {
+  let transform = "";
+  const xTranslate = delta.x.translate / treeScale.x;
+  const yTranslate = delta.y.translate / treeScale.y;
+  const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
+  if (xTranslate || yTranslate || zTranslate) {
+    transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
+  }
+  if (treeScale.x !== 1 || treeScale.y !== 1) {
+    transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
+  }
+  if (latestTransform) {
+    const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform;
+    if (transformPerspective)
+      transform = `perspective(${transformPerspective}px) ${transform}`;
+    if (rotate)
+      transform += `rotate(${rotate}deg) `;
+    if (rotateX)
+      transform += `rotateX(${rotateX}deg) `;
+    if (rotateY)
+      transform += `rotateY(${rotateY}deg) `;
+    if (skewX)
+      transform += `skewX(${skewX}deg) `;
+    if (skewY)
+      transform += `skewY(${skewY}deg) `;
+  }
+  const elementScaleX = delta.x.scale * treeScale.x;
+  const elementScaleY = delta.y.scale * treeScale.y;
+  if (elementScaleX !== 1 || elementScaleY !== 1) {
+    transform += `scale(${elementScaleX}, ${elementScaleY})`;
+  }
+  return transform || "none";
+}
+export {
+  buildProjectionTransform
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/utils/each-axis.mjs

@@ -0,0 +1,6 @@
+function eachAxis(callback) {
+  return [callback("x"), callback("y")];
+}
+export {
+  eachAxis
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/utils/has-transform.mjs

@@ -0,0 +1,20 @@
+function isIdentityScale(scale) {
+  return scale === void 0 || scale === 1;
+}
+function hasScale({ scale, scaleX, scaleY }) {
+  return !isIdentityScale(scale) || !isIdentityScale(scaleX) || !isIdentityScale(scaleY);
+}
+function hasTransform(values) {
+  return hasScale(values) || has2DTranslate(values) || values.z || values.rotate || values.rotateX || values.rotateY || values.skewX || values.skewY;
+}
+function has2DTranslate(values) {
+  return is2DTranslate(values.x) || is2DTranslate(values.y);
+}
+function is2DTranslate(value) {
+  return value && value !== "0%";
+}
+export {
+  has2DTranslate,
+  hasScale,
+  hasTransform
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/utils/compare-by-depth.mjs

@@ -0,0 +1,4 @@
+const compareByDepth = (a, b) => a.depth - b.depth;
+export {
+  compareByDepth
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/utils/flat-tree.mjs

@@ -0,0 +1,24 @@
+import { addUniqueItem, removeItem } from "../../utils/array.mjs";
+import { compareByDepth } from "./compare-by-depth.mjs";
+class FlatTree {
+  constructor() {
+    this.children = [];
+    this.isDirty = false;
+  }
+  add(child) {
+    addUniqueItem(this.children, child);
+    this.isDirty = true;
+  }
+  remove(child) {
+    removeItem(this.children, child);
+    this.isDirty = true;
+  }
+  forEach(callback) {
+    this.isDirty && this.children.sort(compareByDepth);
+    this.isDirty = false;
+    this.children.forEach(callback);
+  }
+}
+export {
+  FlatTree
+};

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/resolve-value.mjs

@@ -1,7 +1,11 @@
 import { isKeyframesTarget } from "../animation/utils/is-keyframes-target.mjs";
+const isCustomValue = (v) => {
+  return Boolean(v && typeof v === "object" && v.mix && v.toValue);
+};
 const resolveFinalValueInKeyframes = (v) => {
   return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
 };
 export {
+  isCustomValue,
   resolveFinalValueInKeyframes
 };

package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/utils/resolve-motion-value.mjs

@@ -0,0 +1,9 @@
+import { isCustomValue } from "../../utils/resolve-value.mjs";
+import { isMotionValue } from "./is-motion-value.mjs";
+function resolveMotionValue(value) {
+  const unwrappedValue = isMotionValue(value) ? value.get() : value;
+  return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
+}
+export {
+  resolveMotionValue
+};

package/dist/es/features/events.mjs

@@ -5,7 +5,7 @@ class EventFeature extends Feature {
     this.handlers = {};
   }
   mount() {
-    const element = this.state.getElement();
+    const element = this.state.element;
     if (!element)
       return;
     this.handlers.motionstart = (event) => {
@@ -53,7 +53,7 @@ class EventFeature extends Feature {
     });
   }
   unmount() {
-    const element = this.state.getElement();
+    const element = this.state.element;
     if (!element)
       return;
     Object.entries(this.handlers).forEach(([event, handler]) => {

package/dist/es/features/feature-manager.mjs

@@ -1,5 +1,6 @@
 import { EventFeature } from "./events.mjs";
 import { SVGFeature } from "./svg.mjs";
+import { LayoutFeature } from "./layout/layout.mjs";
 import { HoverGesture } from "./gestures/hover.mjs";
 import { PressGesture } from "./gestures/press.mjs";
 import { InViewGesture } from "./gestures/in-view.mjs";
@@ -11,7 +12,8 @@ class FeatureManager {
       new PressGesture(state),
       new InViewGesture(state),
       new SVGFeature(state),
-      new EventFeature(state)
+      new EventFeature(state),
+      new LayoutFeature(state)
     ];
   }
   mount() {

package/dist/es/features/gestures/hover.mjs

@@ -15,7 +15,7 @@ class HoverGesture extends BaseGesture {
   constructor(state) {
     super(state);
     this.subscribeEvents = () => {
-      const element = this.state.getElement();
+      const element = this.state.element;
       const onEnter = mouseEvent(element, "hoverstart", () => {
         this.state.setActive("hover", true);
       });

package/dist/es/features/gestures/in-view.mjs

@@ -9,7 +9,7 @@ class InViewGesture extends BaseGesture {
     super(state);
     this.subscribeEvents = () => {
       var _a;
-      const element = this.state.getElement();
+      const element = this.state.element;
       const { once, ...viewOptions } = ((_a = this.state.getOptions()) == null ? void 0 : _a.inViewOptions) || {};
       return inView(element, (enterEntry) => {
         this.state.setActive("inView", true);

package/dist/es/features/gestures/press.mjs

@@ -7,7 +7,7 @@ class PressGesture extends BaseGesture {
   constructor(state) {
     super(state);
     this.subscribeEvents = () => {
-      const element = this.state.getElement();
+      const element = this.state.element;
       const onPointerUp = (event) => {
         this.state.setActive("press", false);
         dispatchPointerEvent(element, "pressend", event);

package/dist/es/features/layout/config.mjs

@@ -0,0 +1,21 @@
+import { correctBorderRadius } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
+import { correctBoxShadow } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
+const defaultScaleCorrector = {
+  borderRadius: {
+    ...correctBorderRadius,
+    applyTo: [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius"
+    ]
+  },
+  borderTopLeftRadius: correctBorderRadius,
+  borderTopRightRadius: correctBorderRadius,
+  borderBottomLeftRadius: correctBorderRadius,
+  borderBottomRightRadius: correctBorderRadius,
+  boxShadow: correctBoxShadow
+};
+export {
+  defaultScaleCorrector
+};

package/dist/es/features/layout/layout.mjs

@@ -0,0 +1,74 @@
+import { Feature } from "../feature.mjs";
+import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
+import { getClosestProjectingNode } from "./utils.mjs";
+import { onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount } from "vue";
+import { addScaleCorrector } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { defaultScaleCorrector } from "./config.mjs";
+import { globalProjectionState } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/state.mjs";
+import { injectLayoutGroup } from "../../components/context.mjs";
+class LayoutFeature extends Feature {
+  constructor(state) {
+    super(state);
+    const options = this.state.getOptions();
+    const visualElement = this.state.visualElement;
+    if (options.layout || options.layoutId) {
+      addScaleCorrector(defaultScaleCorrector);
+      this.layoutGroup = injectLayoutGroup({});
+      onBeforeMount(() => {
+        visualElement.projection = new HTMLProjectionNode(
+          visualElement.latestValues,
+          options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)
+        );
+        visualElement.projection.setOptions({
+          layout: options.layout,
+          layoutId: options.layoutId,
+          // TODO: drag
+          alwaysMeasureLayout: false,
+          visualElement,
+          animationType: typeof options.layout === "string" ? options.layout : "both",
+          // initialPromotionConfig
+          layoutRoot: options.layoutRoot,
+          layoutScroll: options.layoutScroll
+        });
+      });
+      onBeforeUpdate(() => {
+        var _a;
+        (_a = visualElement.projection) == null ? void 0 : _a.willUpdate();
+      });
+      onUpdated(() => {
+        var _a;
+        (_a = visualElement.projection) == null ? void 0 : _a.root.didUpdate();
+      });
+      onBeforeUnmount(() => {
+        var _a;
+        if (visualElement.projection) {
+          visualElement.projection.unmount();
+          if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
+            this.layoutGroup.group.remove(visualElement.projection);
+        }
+      });
+    }
+  }
+  update() {
+    var _a;
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.setOptions(this.state.getOptions());
+  }
+  mount() {
+    var _a, _b;
+    const options = this.state.getOptions();
+    if (options.layout || options.layoutId) {
+      const projection = this.state.visualElement.projection;
+      if (projection) {
+        (_b = (_a = this.layoutGroup) == null ? void 0 : _a.group) == null ? void 0 : _b.add(projection);
+      }
+      globalProjectionState.hasEverUpdated = true;
+      projection == null ? void 0 : projection.mount(this.state.element);
+      projection == null ? void 0 : projection.root.didUpdate();
+    }
+  }
+  unmount() {
+  }
+}
+export {
+  LayoutFeature
+};

package/dist/es/features/layout/utils.mjs

@@ -0,0 +1,8 @@
+function getClosestProjectingNode(visualElement) {
+  if (!visualElement)
+    return void 0;
+  return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
+}
+export {
+  getClosestProjectingNode
+};

package/dist/es/features/svg.mjs

@@ -5,7 +5,7 @@ function isSVGElement(element) {
 }
 class SVGFeature extends Feature {
   mount() {
-    const instance = this.state.getElement();
+    const instance = this.state.element;
     if (!isSVGElement(instance)) {
       return;
     }

package/dist/es/index.mjs

@@ -1,5 +1,7 @@
 import { default as default2 } from "./components/Motion.vue.mjs";
 import { default as default3 } from "./components/AnimatePresence.vue.mjs";
+import { default as default4 } from "./components/LayoutGroup.vue.mjs";
+import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion, shouldInheritGroup, shouldInheritId } from "./components/context.mjs";
 import { components, utilities } from "./constants/index.mjs";
 import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
 import { animate, createScopedAnimate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
@@ -31,11 +33,15 @@ import { progress } from "./external/.pnpm/framer-motion@11.11.11/external/frame
 import { wrap } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/wrap.mjs";
 import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
 import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { useComputed } from "./value/use-computed.mjs";
+import { useCombineMotionValues } from "./value/use-combine-values.mjs";
 import { useTransform } from "./value/use-transform.mjs";
 import { useTime } from "./value/use-time.mjs";
 import { useMotionTemplate } from "./value/use-motion-template.mjs";
+import { useMotionValueEvent } from "./value/use-motion-value-event.mjs";
 import { useSpring } from "./value/use-spring.mjs";
 import { useScroll } from "./value/use-scroll.mjs";
+import { useVelocity } from "./value/use-velocity.mjs";
 import { useAnimate } from "./animation/use-animate.mjs";
 import { createContext } from "./utils/createContext.mjs";
 import { isMotionValue } from "./utils/motion-value.mjs";
@@ -43,6 +49,7 @@ import { useInView } from "./utils/use-in-view.mjs";
 import { useAnimationFrame } from "./utils/use-animation-frame.mjs";
 export {
   default3 as AnimatePresence,
+  default4 as LayoutGroup,
   default2 as Motion,
   MotionValue,
   animate,
@@ -72,6 +79,8 @@ export {
   frameSteps,
   inView,
   inertia,
+  injectLayoutGroup,
+  injectMotion,
   interpolate,
   invariant,
   isMotionValue,
@@ -81,9 +90,13 @@ export {
   motionValue,
   pipe,
   progress,
+  provideLayoutGroup,
+  provideMotion,
   reverseEasing,
   scroll,
   scrollInfo,
+  shouldInheritGroup,
+  shouldInheritId,
   spring,
   stagger,
   steps,
@@ -91,13 +104,17 @@ export {
   transform,
   useAnimate,
   useAnimationFrame,
+  useCombineMotionValues,
+  useComputed,
   useInView,
   useMotionTemplate,
   motionValue2 as useMotionValue,
+  useMotionValueEvent,
   useScroll,
   useSpring,
   useTime,
   useTransform,
+  useVelocity,
   utilities,
   warning,
   wrap

package/dist/es/state/create-visual-element.mjs

@@ -0,0 +1,9 @@
+import { isSVGElement } from "./utils.mjs";
+import { HTMLVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
+import { SVGVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
+function createVisualElement(Component, options) {
+  return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+}
+export {
+  createVisualElement
+};

package/dist/es/state/motion-state.mjs

@@ -1,14 +1,14 @@
 import { invariant } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
 import { visualElementStore } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/store.mjs";
-import { createDOMVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/utils/create-visual-element.mjs";
-import { isDef } from "@vueuse/core";
 import { resolveVariant, getOptions, hasChanged, noop } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
 import { style } from "./style.mjs";
 import { transformResetValue } from "./transform.mjs";
 import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
 import { motionEvent } from "./event.mjs";
+import { createVisualElement } from "./create-visual-element.mjs";
 import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { isDef } from "../external/.pnpm/@vueuse_shared@12.0.0_typescript@5.5.4/external/@vueuse/shared/index.mjs";
 const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 class MotionState {
@@ -22,6 +22,23 @@ class MotionState {
     this.options = options;
     this.parent = parent;
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
+    this.visualElement = createVisualElement(this.options.as, {
+      presenceContext: null,
+      parent: parent == null ? void 0 : parent.visualElement,
+      props: {
+        ...this.options
+      },
+      visualState: {
+        renderState: {
+          transform: {},
+          transformOrigin: {},
+          style: {},
+          vars: {},
+          attrs: {}
+        },
+        latestValues: {}
+      }
+    });
     const initialVariantSource = options.initial === false ? "animate" : "initial";
     this.featureManager = new FeatureManager(this);
     this.initTarget(initialVariantSource);
@@ -54,18 +71,17 @@ class MotionState {
     this.element = element;
     mountedStates.set(element, this);
     if (!visualElementStore.get(element)) {
-      createDOMVisualElement(element);
+      this.visualElement.mount(element);
+      visualElementStore.set(element, this.visualElement);
     }
-    const visualElement = visualElementStore.get(element);
-    this.visualElement = visualElement;
-    visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
     if (typeof this.initial === "object") {
       for (const key in this.initial) {
-        visualElement.setStaticValue(key, this.initial[key]);
+        this.visualElement.setStaticValue(key, this.initial[key]);
       }
     } else if (typeof this.initial === "string" && this.options.variants) {
       for (const key in this.options.variants[this.initial]) {
-        visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
+        this.visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
       }
     }
     this.featureManager.mount();
@@ -162,9 +178,6 @@ class MotionState {
   getOptions() {
     return this.options;
   }
-  getElement() {
-    return this.element;
-  }
   getTarget() {
     return this.target;
   }

package/dist/es/state/style.mjs

@@ -1,5 +1,5 @@
-import { isNumber, isCssVar } from "./utils.mjs";
-import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
+import { isCssVar, isNumber } from "./utils.mjs";
+import { transformDefinitions, isTransform, transformAlias, buildTransformTemplate } from "./transform.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const style = {
   get: (element, name) => {

package/dist/es/state/transform.mjs

@@ -1,4 +1,3 @@
-import "@vueuse/core";
 import { noopReturn } from "./utils.mjs";
 const rotation = {
   syntax: "<angle>",

package/dist/es/value/use-motion-value-event.mjs

@@ -0,0 +1,11 @@
+import { onUnmounted } from "vue";
+function useMotionValueEvent(value, event, callback) {
+  const unlisten = value.on(event, callback);
+  onUnmounted(() => {
+    unlisten();
+  });
+  return unlisten;
+}
+export {
+  useMotionValueEvent
+};