framer-motion 12.23.28 → 12.24.1

package/dist/es/motion/index.mjs

@@ -27,11 +27,15 @@ import { useVisualElement } from './utils/use-visual-element.mjs';
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
  */
-function createMotionComponent(Component, { forwardMotionProps = false } = {}, preloadedFeatures, createVisualElement) {
+function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
     preloadedFeatures && loadFeatures(preloadedFeatures);
-    const useVisualState = isSVGComponent(Component)
-        ? useSVGVisualState
-        : useHTMLVisualState;
+    /**
+     * Determine whether to use SVG or HTML rendering based on:
+     * 1. Explicit `type` option (highest priority)
+     * 2. Auto-detection via `isSVGComponent`
+     */
+    const isSVG = type ? type === "svg" : isSVGComponent(Component);
+    const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState;
     function MotionDOMComponent(props, externalRef) {
         /**
          * If we need to measure the element we load this functionality in a
@@ -56,13 +60,13 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
              * providing a way of rendering to these APIs outside of the React render loop
              * for more performant animations and interactions
              */
-            context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
+            context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG);
         }
         /**
          * The mount order and hierarchy is specific to ensure our element ref
          * is hydrated by the time features fire their effects.
          */
-        return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] }));
+        return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps, isSVG)] }));
     }
     MotionDOMComponent.displayName = `motion.${typeof Component === "string"
         ? Component

package/dist/es/motion/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/motion/index.tsx"],"sourcesContent":["\"use client\"\n\nimport { invariant, warning } from \"motion-utils\"\nimport * as React from \"react\"\nimport { forwardRef, useContext } from \"react\"\nimport { LayoutGroupContext } from \"../context/LayoutGroupContext\"\nimport { LazyContext } from \"../context/LazyContext\"\nimport { MotionConfigContext } from \"../context/MotionConfigContext\"\nimport { MotionContext } from \"../context/MotionContext\"\nimport { useCreateMotionContext } from \"../context/MotionContext/create\"\nimport { DOMMotionComponents } from \"../render/dom/types\"\nimport { useRender } from \"../render/dom/use-render\"\nimport { isSVGComponent } from \"../render/dom/utils/is-svg-component\"\nimport { HTMLRenderState } from \"../render/html/types\"\nimport { useHTMLVisualState } from \"../render/html/use-html-visual-state\"\nimport { SVGRenderState } from \"../render/svg/types\"\nimport { useSVGVisualState } from \"../render/svg/use-svg-visual-state\"\nimport { CreateVisualElement } from \"../render/types\"\nimport { isBrowser } from \"../utils/is-browser\"\nimport { featureDefinitions } from \"./features/definitions\"\nimport { loadFeatures } from \"./features/load-features\"\nimport { FeatureBundle, FeaturePackages } from \"./features/types\"\nimport { MotionProps } from \"./types\"\nimport { motionComponentSymbol } from \"./utils/symbol\"\nimport { useMotionRef } from \"./utils/use-motion-ref\"\nimport { useVisualElement } from \"./utils/use-visual-element\"\n\nexport interface MotionComponentConfig<\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n> {\n    preloadedFeatures?: FeatureBundle\n    createVisualElement?: CreateVisualElement\n    Component: TagName | React.ComponentType<React.PropsWithChildren<unknown>>\n    forwardMotionProps?: boolean\n}\n\nexport type MotionComponentProps<Props> = {\n    [K in Exclude<keyof Props, keyof MotionProps>]?: Props[K]\n} & MotionProps\n\nexport type MotionComponent<T, P> = T extends keyof DOMMotionComponents\n    ? DOMMotionComponents[T]\n    : React.ComponentType<\n          Omit<MotionComponentProps<P>, \"children\"> & {\n              children?: \"children\" extends keyof P\n                  ? P[\"children\"] | MotionComponentProps<P>[\"children\"]\n                  : MotionComponentProps<P>[\"children\"]\n          }\n      >\n\nexport interface MotionComponentOptions {\n    forwardMotionProps?: boolean\n}\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nexport function createMotionComponent<\n    Props,\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    { forwardMotionProps = false }: MotionComponentOptions = {},\n    preloadedFeatures?: FeaturePackages,\n    createVisualElement?: CreateVisualElement<Props, TagName>\n) {\n    preloadedFeatures && loadFeatures(preloadedFeatures)\n\n    const useVisualState = isSVGComponent(Component)\n        ? useSVGVisualState\n        : useHTMLVisualState\n\n    function MotionDOMComponent(\n        props: MotionComponentProps<Props>,\n        externalRef?: React.Ref<HTMLElement | SVGElement>\n    ) {\n        /**\n         * If we need to measure the element we load this functionality in a\n         * separate class component in order to gain access to getSnapshotBeforeUpdate.\n         */\n        let MeasureLayout: undefined | React.ComponentType<MotionProps>\n\n        const configAndProps = {\n            ...useContext(MotionConfigContext),\n            ...props,\n            layoutId: useLayoutId(props),\n        }\n\n        const { isStatic } = configAndProps\n\n        const context = useCreateMotionContext<HTMLElement | SVGElement>(props)\n\n        const visualState = useVisualState(props, isStatic)\n\n        if (!isStatic && isBrowser) {\n            useStrictMode(configAndProps, preloadedFeatures)\n\n            const layoutProjection = getProjectionFunctionality(configAndProps)\n            MeasureLayout = layoutProjection.MeasureLayout\n\n            /**\n             * Create a VisualElement for this component. A VisualElement provides a common\n             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n             * providing a way of rendering to these APIs outside of the React render loop\n             * for more performant animations and interactions\n             */\n            context.visualElement = useVisualElement(\n                Component,\n                visualState,\n                configAndProps,\n                createVisualElement,\n                layoutProjection.ProjectionNode\n            )\n        }\n\n        /**\n         * The mount order and hierarchy is specific to ensure our element ref\n         * is hydrated by the time features fire their effects.\n         */\n        return (\n            <MotionContext.Provider value={context}>\n                {MeasureLayout && context.visualElement ? (\n                    <MeasureLayout\n                        visualElement={context.visualElement}\n                        {...configAndProps}\n                    />\n                ) : null}\n                {useRender<Props, TagName>(\n                    Component,\n                    props,\n                    useMotionRef<\n                        HTMLElement | SVGElement,\n                        HTMLRenderState | SVGRenderState\n                    >(visualState, context.visualElement, externalRef),\n                    visualState,\n                    isStatic,\n                    forwardMotionProps\n                )}\n            </MotionContext.Provider>\n        )\n    }\n\n    MotionDOMComponent.displayName = `motion.${\n        typeof Component === \"string\"\n            ? Component\n            : `create(${Component.displayName ?? Component.name ?? \"\"})`\n    }`\n\n    const ForwardRefMotionComponent = forwardRef(MotionDOMComponent as any)\n    ;(ForwardRefMotionComponent as any)[motionComponentSymbol] = Component\n\n    return ForwardRefMotionComponent as MotionComponent<TagName, Props>\n}\n\nfunction useLayoutId({ layoutId }: MotionProps) {\n    const layoutGroupId = useContext(LayoutGroupContext).id\n    return layoutGroupId && layoutId !== undefined\n        ? layoutGroupId + \"-\" + layoutId\n        : layoutId\n}\n\nfunction useStrictMode(\n    configAndProps: MotionProps,\n    preloadedFeatures?: FeaturePackages\n) {\n    const isStrict = useContext(LazyContext).strict\n\n    /**\n     * If we're in development mode, check to make sure we're not rendering a motion component\n     * as a child of LazyMotion, as this will break the file-size benefits of using it.\n     */\n    if (\n        process.env.NODE_ENV !== \"production\" &&\n        preloadedFeatures &&\n        isStrict\n    ) {\n        const strictMessage =\n            \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\"\n        configAndProps.ignoreStrict\n            ? warning(false, strictMessage, \"lazy-strict-mode\")\n            : invariant(false, strictMessage, \"lazy-strict-mode\")\n    }\n}\n\nfunction getProjectionFunctionality(props: MotionProps) {\n    const { drag, layout } = featureDefinitions\n\n    if (!drag && !layout) return {}\n\n    const combined = { ...drag, ...layout }\n\n    return {\n        MeasureLayout:\n            drag?.isEnabled(props) || layout?.isEnabled(props)\n                ? combined.MeasureLayout\n                : undefined,\n        ProjectionNode: combined.ProjectionNode,\n    }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsDA;;;;;;;;AAQG;AACa;AASZ;AAEA;AACI;;AAGJ;AAII;;;AAGG;AACH;AAEA;;AAEI;AACA;;AAGJ;AAEA;;AAIA;AACI;AAEA;AACA;AAEA;;;;;AAKG;AACH;;AASJ;;;AAGG;AACH;;AAuBJ;AAEQ;AACA;AAGR;AACE;AAEF;AACJ;AAEA;;AAEI;AACI;;AAER;AAEA;;AAMI;;;AAGG;AACH;;AAGI;;AAIA;;;;AAIR;AAEA;AACI;AAEA;AAAsB;;;AAKlB;;AAGQ;;;AAGhB;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/motion/index.tsx"],"sourcesContent":["\"use client\"\n\nimport { invariant, warning } from \"motion-utils\"\nimport * as React from \"react\"\nimport { forwardRef, useContext } from \"react\"\nimport { LayoutGroupContext } from \"../context/LayoutGroupContext\"\nimport { LazyContext } from \"../context/LazyContext\"\nimport { MotionConfigContext } from \"../context/MotionConfigContext\"\nimport { MotionContext } from \"../context/MotionContext\"\nimport { useCreateMotionContext } from \"../context/MotionContext/create\"\nimport { DOMMotionComponents } from \"../render/dom/types\"\nimport { useRender } from \"../render/dom/use-render\"\nimport { isSVGComponent } from \"../render/dom/utils/is-svg-component\"\nimport { HTMLRenderState } from \"../render/html/types\"\nimport { useHTMLVisualState } from \"../render/html/use-html-visual-state\"\nimport { SVGRenderState } from \"../render/svg/types\"\nimport { useSVGVisualState } from \"../render/svg/use-svg-visual-state\"\nimport { CreateVisualElement } from \"../render/types\"\nimport { isBrowser } from \"../utils/is-browser\"\nimport { featureDefinitions } from \"./features/definitions\"\nimport { loadFeatures } from \"./features/load-features\"\nimport { FeatureBundle, FeaturePackages } from \"./features/types\"\nimport { MotionProps } from \"./types\"\nimport { motionComponentSymbol } from \"./utils/symbol\"\nimport { useMotionRef } from \"./utils/use-motion-ref\"\nimport { useVisualElement } from \"./utils/use-visual-element\"\n\nexport interface MotionComponentConfig<\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n> {\n    preloadedFeatures?: FeatureBundle\n    createVisualElement?: CreateVisualElement\n    Component: TagName | React.ComponentType<React.PropsWithChildren<unknown>>\n    forwardMotionProps?: boolean\n}\n\nexport type MotionComponentProps<Props> = {\n    [K in Exclude<keyof Props, keyof MotionProps>]?: Props[K]\n} & MotionProps\n\nexport type MotionComponent<T, P> = T extends keyof DOMMotionComponents\n    ? DOMMotionComponents[T]\n    : React.ComponentType<\n          Omit<MotionComponentProps<P>, \"children\"> & {\n              children?: \"children\" extends keyof P\n                  ? P[\"children\"] | MotionComponentProps<P>[\"children\"]\n                  : MotionComponentProps<P>[\"children\"]\n          }\n      >\n\nexport interface MotionComponentOptions {\n    forwardMotionProps?: boolean\n    /**\n     * Specify whether the component renders an HTML or SVG element.\n     * This is useful when wrapping custom SVG components that need\n     * SVG-specific attribute handling (like viewBox animation).\n     * By default, Motion auto-detects based on the component name,\n     * but custom React components are always treated as HTML.\n     */\n    type?: \"html\" | \"svg\"\n}\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nexport function createMotionComponent<\n    Props,\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    { forwardMotionProps = false, type }: MotionComponentOptions = {},\n    preloadedFeatures?: FeaturePackages,\n    createVisualElement?: CreateVisualElement<Props, TagName>\n) {\n    preloadedFeatures && loadFeatures(preloadedFeatures)\n\n    /**\n     * Determine whether to use SVG or HTML rendering based on:\n     * 1. Explicit `type` option (highest priority)\n     * 2. Auto-detection via `isSVGComponent`\n     */\n    const isSVG = type ? type === \"svg\" : isSVGComponent(Component)\n    const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState\n\n    function MotionDOMComponent(\n        props: MotionComponentProps<Props>,\n        externalRef?: React.Ref<HTMLElement | SVGElement>\n    ) {\n        /**\n         * If we need to measure the element we load this functionality in a\n         * separate class component in order to gain access to getSnapshotBeforeUpdate.\n         */\n        let MeasureLayout: undefined | React.ComponentType<MotionProps>\n\n        const configAndProps = {\n            ...useContext(MotionConfigContext),\n            ...props,\n            layoutId: useLayoutId(props),\n        }\n\n        const { isStatic } = configAndProps\n\n        const context = useCreateMotionContext<HTMLElement | SVGElement>(props)\n\n        const visualState = useVisualState(props, isStatic)\n\n        if (!isStatic && isBrowser) {\n            useStrictMode(configAndProps, preloadedFeatures)\n\n            const layoutProjection = getProjectionFunctionality(configAndProps)\n            MeasureLayout = layoutProjection.MeasureLayout\n\n            /**\n             * Create a VisualElement for this component. A VisualElement provides a common\n             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n             * providing a way of rendering to these APIs outside of the React render loop\n             * for more performant animations and interactions\n             */\n            context.visualElement = useVisualElement(\n                Component,\n                visualState,\n                configAndProps,\n                createVisualElement,\n                layoutProjection.ProjectionNode,\n                isSVG\n            )\n        }\n\n        /**\n         * The mount order and hierarchy is specific to ensure our element ref\n         * is hydrated by the time features fire their effects.\n         */\n        return (\n            <MotionContext.Provider value={context}>\n                {MeasureLayout && context.visualElement ? (\n                    <MeasureLayout\n                        visualElement={context.visualElement}\n                        {...configAndProps}\n                    />\n                ) : null}\n                {useRender<Props, TagName>(\n                    Component,\n                    props,\n                    useMotionRef<\n                        HTMLElement | SVGElement,\n                        HTMLRenderState | SVGRenderState\n                    >(visualState, context.visualElement, externalRef),\n                    visualState,\n                    isStatic,\n                    forwardMotionProps,\n                    isSVG\n                )}\n            </MotionContext.Provider>\n        )\n    }\n\n    MotionDOMComponent.displayName = `motion.${\n        typeof Component === \"string\"\n            ? Component\n            : `create(${Component.displayName ?? Component.name ?? \"\"})`\n    }`\n\n    const ForwardRefMotionComponent = forwardRef(MotionDOMComponent as any)\n    ;(ForwardRefMotionComponent as any)[motionComponentSymbol] = Component\n\n    return ForwardRefMotionComponent as MotionComponent<TagName, Props>\n}\n\nfunction useLayoutId({ layoutId }: MotionProps) {\n    const layoutGroupId = useContext(LayoutGroupContext).id\n    return layoutGroupId && layoutId !== undefined\n        ? layoutGroupId + \"-\" + layoutId\n        : layoutId\n}\n\nfunction useStrictMode(\n    configAndProps: MotionProps,\n    preloadedFeatures?: FeaturePackages\n) {\n    const isStrict = useContext(LazyContext).strict\n\n    /**\n     * If we're in development mode, check to make sure we're not rendering a motion component\n     * as a child of LazyMotion, as this will break the file-size benefits of using it.\n     */\n    if (\n        process.env.NODE_ENV !== \"production\" &&\n        preloadedFeatures &&\n        isStrict\n    ) {\n        const strictMessage =\n            \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\"\n        configAndProps.ignoreStrict\n            ? warning(false, strictMessage, \"lazy-strict-mode\")\n            : invariant(false, strictMessage, \"lazy-strict-mode\")\n    }\n}\n\nfunction getProjectionFunctionality(props: MotionProps) {\n    const { drag, layout } = featureDefinitions\n\n    if (!drag && !layout) return {}\n\n    const combined = { ...drag, ...layout }\n\n    return {\n        MeasureLayout:\n            drag?.isEnabled(props) || layout?.isEnabled(props)\n                ? combined.MeasureLayout\n                : undefined,\n        ProjectionNode: combined.ProjectionNode,\n    }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8DA;;;;;;;;AAQG;;AAUC;AAEA;;;;AAIG;AACH;;AAGA;AAII;;;AAGG;AACH;AAEA;;AAEI;AACA;;AAGJ;AAEA;;AAIA;AACI;AAEA;AACA;AAEA;;;;;AAKG;AACH;;AAUJ;;;AAGG;AACH;;AAwBJ;AAEQ;AACA;AAGR;AACE;AAEF;AACJ;AAEA;;AAEI;AACI;;AAER;AAEA;;AAMI;;;AAGG;AACH;;AAGI;;AAIA;;;;AAIR;AAEA;AACI;AAEA;AAAsB;;;AAKlB;;AAGQ;;;AAGhB;;"}

package/dist/es/motion/utils/use-visual-element.mjs

@@ -9,7 +9,7 @@ import { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
-function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
     const { visualElement: parent } = useContext(MotionContext);
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
@@ -31,6 +31,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
                 ? presenceContext.initial === false
                 : false,
             reducedMotionConfig,
+            isSVG,
         });
     }
     const visualElement = visualElementRef.current;

package/dist/es/motion/utils/use-visual-element.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-visual-element.mjs","sources":["../../../../src/motion/utils/use-visual-element.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useContext, useEffect, useInsertionEffect, useRef } from \"react\"\nimport { optimizedAppearDataAttribute } from \"../../animation/optimized-appear/data-id\"\nimport { LazyContext } from \"../../context/LazyContext\"\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { MotionContext } from \"../../context/MotionContext\"\nimport { PresenceContext } from \"../../context/PresenceContext\"\nimport {\n    InitialPromotionConfig,\n    SwitchLayoutGroupContext,\n} from \"../../context/SwitchLayoutGroupContext\"\nimport { MotionProps } from \"../../motion/types\"\nimport { IProjectionNode } from \"../../projection/node/types\"\nimport { DOMMotionComponents } from \"../../render/dom/types\"\nimport { HTMLRenderState } from \"../../render/html/types\"\nimport { SVGRenderState } from \"../../render/svg/types\"\nimport { CreateVisualElement } from \"../../render/types\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport { isRefObject } from \"../../utils/is-ref-object\"\nimport { useIsomorphicLayoutEffect } from \"../../utils/use-isomorphic-effect\"\nimport { VisualState } from \"./use-visual-state\"\n\nexport function useVisualElement<\n    Props,\n    TagName extends keyof DOMMotionComponents | string\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    visualState:\n        | VisualState<SVGElement, SVGRenderState>\n        | VisualState<HTMLElement, HTMLRenderState>,\n    props: MotionProps & Partial<MotionConfigContext>,\n    createVisualElement?: CreateVisualElement<Props, TagName>,\n    ProjectionNodeConstructor?: any\n): VisualElement<HTMLElement | SVGElement> | undefined {\n    const { visualElement: parent } = useContext(MotionContext)\n    const lazyContext = useContext(LazyContext)\n    const presenceContext = useContext(PresenceContext)\n    const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion\n\n    const visualElementRef = useRef<VisualElement<\n        HTMLElement | SVGElement\n    > | null>(null)\n\n    /**\n     * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n     */\n    createVisualElement =\n        createVisualElement ||\n        (lazyContext.renderer as CreateVisualElement<Props, TagName>)\n\n    if (!visualElementRef.current && createVisualElement) {\n        visualElementRef.current = createVisualElement(Component, {\n            visualState,\n            parent,\n            props,\n            presenceContext,\n            blockInitialAnimation: presenceContext\n                ? presenceContext.initial === false\n                : false,\n            reducedMotionConfig,\n        })\n    }\n\n    const visualElement = visualElementRef.current\n\n    /**\n     * Load Motion gesture and animation features. These are rendered as renderless\n     * components so each feature can optionally make use of React lifecycle methods.\n     */\n    const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext)\n\n    if (\n        visualElement &&\n        !visualElement.projection &&\n        ProjectionNodeConstructor &&\n        (visualElement.type === \"html\" || visualElement.type === \"svg\")\n    ) {\n        createProjectionNode(\n            visualElementRef.current!,\n            props,\n            ProjectionNodeConstructor,\n            initialLayoutGroupConfig\n        )\n    }\n\n    const isMounted = useRef(false)\n    useInsertionEffect(() => {\n        /**\n         * Check the component has already mounted before calling\n         * `update` unnecessarily. This ensures we skip the initial update.\n         */\n        if (visualElement && isMounted.current) {\n            visualElement.update(props, presenceContext)\n        }\n    })\n\n    /**\n     * Cache this value as we want to know whether HandoffAppearAnimations\n     * was present on initial render - it will be deleted after this.\n     */\n    const optimisedAppearId =\n        props[optimizedAppearDataAttribute as keyof typeof props]\n    const wantsHandoff = useRef(\n        Boolean(optimisedAppearId) &&\n            !window.MotionHandoffIsComplete?.(optimisedAppearId) &&\n            window.MotionHasOptimisedAnimation?.(optimisedAppearId)\n    )\n\n    useIsomorphicLayoutEffect(() => {\n        if (!visualElement) return\n\n        isMounted.current = true\n        window.MotionIsMounted = true\n\n        visualElement.updateFeatures()\n        visualElement.scheduleRenderMicrotask()\n\n        /**\n         * Ideally this function would always run in a useEffect.\n         *\n         * However, if we have optimised appear animations to handoff from,\n         * it needs to happen synchronously to ensure there's no flash of\n         * incorrect styles in the event of a hydration error.\n         *\n         * So if we detect a situtation where optimised appear animations\n         * are running, we use useLayoutEffect to trigger animations.\n         */\n        if (wantsHandoff.current && visualElement.animationState) {\n            visualElement.animationState.animateChanges()\n        }\n    })\n\n    useEffect(() => {\n        if (!visualElement) return\n\n        if (!wantsHandoff.current && visualElement.animationState) {\n            visualElement.animationState.animateChanges()\n        }\n\n        if (wantsHandoff.current) {\n            // This ensures all future calls to animateChanges() in this component will run in useEffect\n            queueMicrotask(() => {\n                window.MotionHandoffMarkAsComplete?.(optimisedAppearId)\n            })\n\n            wantsHandoff.current = false\n        }\n\n        /**\n         * Now we've finished triggering animations for this element we\n         * can wipe the enteringChildren set for the next render.\n         */\n        visualElement.enteringChildren = undefined\n    })\n\n    return visualElement!\n}\n\nfunction createProjectionNode(\n    visualElement: VisualElement<any>,\n    props: MotionProps,\n    ProjectionNodeConstructor: any,\n    initialPromotionConfig?: InitialPromotionConfig\n) {\n    const {\n        layoutId,\n        layout,\n        drag,\n        dragConstraints,\n        layoutScroll,\n        layoutRoot,\n        layoutCrossfade,\n    } = props\n\n    visualElement.projection = new ProjectionNodeConstructor(\n        visualElement.latestValues,\n        props[\"data-framer-portal-id\"]\n            ? undefined\n            : getClosestProjectingNode(visualElement.parent)\n    ) as IProjectionNode\n\n    visualElement.projection.setOptions({\n        layoutId,\n        layout,\n        alwaysMeasureLayout:\n            Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),\n        visualElement,\n        /**\n         * TODO: Update options in an effect. This could be tricky as it'll be too late\n         * to update by the time layout animations run.\n         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n         * ensuring it gets called if there's no potential layout animations.\n         *\n         */\n        animationType: typeof layout === \"string\" ? layout : \"both\",\n        initialPromotionConfig,\n        crossfade: layoutCrossfade,\n        layoutScroll,\n        layoutRoot,\n    })\n}\n\nfunction getClosestProjectingNode(\n    visualElement?: VisualElement<\n        unknown,\n        unknown,\n        { allowProjection?: boolean }\n    >\n): IProjectionNode | undefined {\n    if (!visualElement) return undefined\n\n    return visualElement.options.allowProjection !== false\n        ? visualElement.projection\n        : getClosestProjectingNode(visualElement.parent)\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAwBM;;AAaF;AACA;;AAGA;AAIA;;AAEG;;;;AAKH;AACI;;;;;AAKI;AACI;AACA;;AAEP;;AAGL;AAEA;;;AAGG;AACH;AAEA;;;AAII;;;AAUJ;;AAEI;;;AAGG;AACH;AACI;;AAER;AAEA;;;AAGG;AACH;AAEA;AAEQ;AACA;;AAIJ;;AAEA;AACA;;;AAKA;;;;;;;;;AASG;;AAEC;;AAER;;AAGI;;;AAGI;;AAGJ;;;AAGQ;AACJ;AAEA;;AAGJ;;;AAGG;AACH;AACJ;AAEA;AACJ;AAEA;AAMI;AAUA;AAGQ;;AAIR;;;AAGI;;AAGA;;;;;;AAMG;AACH;;AAEA;;;AAGH;AACL;AAEA;AAOI;AAAoB;AAEpB;;AAEI;AACR;;"}
+{"version":3,"file":"use-visual-element.mjs","sources":["../../../../src/motion/utils/use-visual-element.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useContext, useEffect, useInsertionEffect, useRef } from \"react\"\nimport { optimizedAppearDataAttribute } from \"../../animation/optimized-appear/data-id\"\nimport { LazyContext } from \"../../context/LazyContext\"\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { MotionContext } from \"../../context/MotionContext\"\nimport { PresenceContext } from \"../../context/PresenceContext\"\nimport {\n    InitialPromotionConfig,\n    SwitchLayoutGroupContext,\n} from \"../../context/SwitchLayoutGroupContext\"\nimport { MotionProps } from \"../../motion/types\"\nimport { IProjectionNode } from \"../../projection/node/types\"\nimport { DOMMotionComponents } from \"../../render/dom/types\"\nimport { HTMLRenderState } from \"../../render/html/types\"\nimport { SVGRenderState } from \"../../render/svg/types\"\nimport { CreateVisualElement } from \"../../render/types\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport { isRefObject } from \"../../utils/is-ref-object\"\nimport { useIsomorphicLayoutEffect } from \"../../utils/use-isomorphic-effect\"\nimport { VisualState } from \"./use-visual-state\"\n\nexport function useVisualElement<\n    Props,\n    TagName extends keyof DOMMotionComponents | string\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    visualState:\n        | VisualState<SVGElement, SVGRenderState>\n        | VisualState<HTMLElement, HTMLRenderState>,\n    props: MotionProps & Partial<MotionConfigContext>,\n    createVisualElement?: CreateVisualElement<Props, TagName>,\n    ProjectionNodeConstructor?: any,\n    isSVG?: boolean\n): VisualElement<HTMLElement | SVGElement> | undefined {\n    const { visualElement: parent } = useContext(MotionContext)\n    const lazyContext = useContext(LazyContext)\n    const presenceContext = useContext(PresenceContext)\n    const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion\n\n    const visualElementRef = useRef<VisualElement<\n        HTMLElement | SVGElement\n    > | null>(null)\n\n    /**\n     * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n     */\n    createVisualElement =\n        createVisualElement ||\n        (lazyContext.renderer as CreateVisualElement<Props, TagName>)\n\n    if (!visualElementRef.current && createVisualElement) {\n        visualElementRef.current = createVisualElement(Component, {\n            visualState,\n            parent,\n            props,\n            presenceContext,\n            blockInitialAnimation: presenceContext\n                ? presenceContext.initial === false\n                : false,\n            reducedMotionConfig,\n            isSVG,\n        })\n    }\n\n    const visualElement = visualElementRef.current\n\n    /**\n     * Load Motion gesture and animation features. These are rendered as renderless\n     * components so each feature can optionally make use of React lifecycle methods.\n     */\n    const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext)\n\n    if (\n        visualElement &&\n        !visualElement.projection &&\n        ProjectionNodeConstructor &&\n        (visualElement.type === \"html\" || visualElement.type === \"svg\")\n    ) {\n        createProjectionNode(\n            visualElementRef.current!,\n            props,\n            ProjectionNodeConstructor,\n            initialLayoutGroupConfig\n        )\n    }\n\n    const isMounted = useRef(false)\n    useInsertionEffect(() => {\n        /**\n         * Check the component has already mounted before calling\n         * `update` unnecessarily. This ensures we skip the initial update.\n         */\n        if (visualElement && isMounted.current) {\n            visualElement.update(props, presenceContext)\n        }\n    })\n\n    /**\n     * Cache this value as we want to know whether HandoffAppearAnimations\n     * was present on initial render - it will be deleted after this.\n     */\n    const optimisedAppearId =\n        props[optimizedAppearDataAttribute as keyof typeof props]\n    const wantsHandoff = useRef(\n        Boolean(optimisedAppearId) &&\n            !window.MotionHandoffIsComplete?.(optimisedAppearId) &&\n            window.MotionHasOptimisedAnimation?.(optimisedAppearId)\n    )\n\n    useIsomorphicLayoutEffect(() => {\n        if (!visualElement) return\n\n        isMounted.current = true\n        window.MotionIsMounted = true\n\n        visualElement.updateFeatures()\n        visualElement.scheduleRenderMicrotask()\n\n        /**\n         * Ideally this function would always run in a useEffect.\n         *\n         * However, if we have optimised appear animations to handoff from,\n         * it needs to happen synchronously to ensure there's no flash of\n         * incorrect styles in the event of a hydration error.\n         *\n         * So if we detect a situtation where optimised appear animations\n         * are running, we use useLayoutEffect to trigger animations.\n         */\n        if (wantsHandoff.current && visualElement.animationState) {\n            visualElement.animationState.animateChanges()\n        }\n    })\n\n    useEffect(() => {\n        if (!visualElement) return\n\n        if (!wantsHandoff.current && visualElement.animationState) {\n            visualElement.animationState.animateChanges()\n        }\n\n        if (wantsHandoff.current) {\n            // This ensures all future calls to animateChanges() in this component will run in useEffect\n            queueMicrotask(() => {\n                window.MotionHandoffMarkAsComplete?.(optimisedAppearId)\n            })\n\n            wantsHandoff.current = false\n        }\n\n        /**\n         * Now we've finished triggering animations for this element we\n         * can wipe the enteringChildren set for the next render.\n         */\n        visualElement.enteringChildren = undefined\n    })\n\n    return visualElement!\n}\n\nfunction createProjectionNode(\n    visualElement: VisualElement<any>,\n    props: MotionProps,\n    ProjectionNodeConstructor: any,\n    initialPromotionConfig?: InitialPromotionConfig\n) {\n    const {\n        layoutId,\n        layout,\n        drag,\n        dragConstraints,\n        layoutScroll,\n        layoutRoot,\n        layoutCrossfade,\n    } = props\n\n    visualElement.projection = new ProjectionNodeConstructor(\n        visualElement.latestValues,\n        props[\"data-framer-portal-id\"]\n            ? undefined\n            : getClosestProjectingNode(visualElement.parent)\n    ) as IProjectionNode\n\n    visualElement.projection.setOptions({\n        layoutId,\n        layout,\n        alwaysMeasureLayout:\n            Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),\n        visualElement,\n        /**\n         * TODO: Update options in an effect. This could be tricky as it'll be too late\n         * to update by the time layout animations run.\n         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n         * ensuring it gets called if there's no potential layout animations.\n         *\n         */\n        animationType: typeof layout === \"string\" ? layout : \"both\",\n        initialPromotionConfig,\n        crossfade: layoutCrossfade,\n        layoutScroll,\n        layoutRoot,\n    })\n}\n\nfunction getClosestProjectingNode(\n    visualElement?: VisualElement<\n        unknown,\n        unknown,\n        { allowProjection?: boolean }\n    >\n): IProjectionNode | undefined {\n    if (!visualElement) return undefined\n\n    return visualElement.options.allowProjection !== false\n        ? visualElement.projection\n        : getClosestProjectingNode(visualElement.parent)\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAwBgB;;AAcZ;AACA;;AAGA;AAIA;;AAEG;;;;AAKH;AACI;;;;;AAKI;AACI;AACA;;;AAGP;;AAGL;AAEA;;;AAGG;AACH;AAEA;;;AAII;;;AAUJ;;AAEI;;;AAGG;AACH;AACI;;AAER;AAEA;;;AAGG;AACH;AAEA;AAEQ;AACA;;AAIJ;;AAEA;AACA;;;AAKA;;;;;;;;;AASG;;AAEC;;AAER;;AAGI;;;AAGI;;AAGJ;;;AAGQ;AACJ;AAEA;;AAGJ;;;AAGG;AACH;AACJ;AAEA;AACJ;AAEA;AAMI;AAUA;AAGQ;;AAIR;;;AAGI;;AAGA;;;;;;AAMG;AACH;;AAEA;;;AAGH;AACL;AAEA;AAOI;AAAoB;AAEpB;;AAEI;AACR;;"}

package/dist/es/render/dom/create-visual-element.mjs

@@ -4,7 +4,11 @@ import { SVGVisualElement } from '../svg/SVGVisualElement.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 
 const createDomVisualElement = (Component, options) => {
-    return isSVGComponent(Component)
+    /**
+     * Use explicit isSVG override if provided, otherwise auto-detect
+     */
+    const isSVG = options.isSVG ?? isSVGComponent(Component);
+    return isSVG
         ? new SVGVisualElement(options)
         : new HTMLVisualElement(options, {
             allowProjection: Component !== Fragment,

package/dist/es/render/dom/create-visual-element.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/render/dom/create-visual-element.ts"],"sourcesContent":["import { ComponentType, Fragment } from \"react\"\nimport { HTMLVisualElement } from \"../html/HTMLVisualElement\"\nimport { SVGVisualElement } from \"../svg/SVGVisualElement\"\nimport { CreateVisualElement, VisualElementOptions } from \"../types\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport const createDomVisualElement: CreateVisualElement = (\n    Component: string | ComponentType<React.PropsWithChildren<unknown>>,\n    options: VisualElementOptions<HTMLElement | SVGElement>\n) => {\n    return isSVGComponent(Component)\n        ? new SVGVisualElement(options)\n        : new HTMLVisualElement(options, {\n              allowProjection: Component !== Fragment,\n          })\n}\n"],"names":[],"mappings":";;;;;MAMa,sBAAsB,GAAwB,CACvD,SAAmE,EACnE,OAAuD,KACvD;IACA,OAAO,cAAc,CAAC,SAAS,CAAC;AAC5B,UAAE,IAAI,gBAAgB,CAAC,OAAO,CAAC;AAC/B,UAAE,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC3B,eAAe,EAAE,SAAS,KAAK,QAAQ;AAC1C,SAAA,CAAC,CAAA;AACZ;;;;"}
+{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/render/dom/create-visual-element.ts"],"sourcesContent":["import { ComponentType, Fragment } from \"react\"\nimport { HTMLVisualElement } from \"../html/HTMLVisualElement\"\nimport { SVGVisualElement } from \"../svg/SVGVisualElement\"\nimport { CreateVisualElement, VisualElementOptions } from \"../types\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport const createDomVisualElement: CreateVisualElement = (\n    Component: string | ComponentType<React.PropsWithChildren<unknown>>,\n    options: VisualElementOptions<HTMLElement | SVGElement>\n) => {\n    /**\n     * Use explicit isSVG override if provided, otherwise auto-detect\n     */\n    const isSVG = options.isSVG ?? isSVGComponent(Component)\n\n    return isSVG\n        ? new SVGVisualElement(options)\n        : new HTMLVisualElement(options, {\n              allowProjection: Component !== Fragment,\n          })\n}\n"],"names":[],"mappings":";;;;;MAMa,sBAAsB,GAAwB,CACvD,SAAmE,EACnE,OAAuD,KACvD;AACA;;AAEG;IACH,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,cAAc,CAAC,SAAS,CAAC,CAAA;AAExD,IAAA,OAAO,KAAK;AACR,UAAE,IAAI,gBAAgB,CAAC,OAAO,CAAC;AAC/B,UAAE,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC3B,eAAe,EAAE,SAAS,KAAK,QAAQ;AAC1C,SAAA,CAAC,CAAA;AACZ;;;;"}

package/dist/es/render/dom/use-render.mjs

@@ -6,10 +6,8 @@ import { useSVGProps } from '../svg/use-props.mjs';
 import { filterProps } from './utils/filter-props.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 
-function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false) {
-    const useVisualProps = isSVGComponent(Component)
-        ? useSVGProps
-        : useHTMLProps;
+function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false, isSVG) {
+    const useVisualProps = (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps;
     const visualProps = useVisualProps(props, latestValues, isStatic, Component);
     const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
     const elementProps = Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {};

package/dist/es/render/dom/use-render.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.mjs","sources":["../../../../src/render/dom/use-render.ts"],"sourcesContent":["\"use client\"\n\nimport { isMotionValue } from \"motion-dom\"\nimport { Fragment, createElement, useMemo } from \"react\"\nimport { MotionProps } from \"../../motion/types\"\nimport { VisualState } from \"../../motion/utils/use-visual-state\"\nimport { HTMLRenderState } from \"../html/types\"\nimport { useHTMLProps } from \"../html/use-props\"\nimport { SVGRenderState } from \"../svg/types\"\nimport { useSVGProps } from \"../svg/use-props\"\nimport { DOMMotionComponents } from \"./types\"\nimport { filterProps } from \"./utils/filter-props\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport function useRender<\n    Props = {},\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    props: MotionProps,\n    ref: React.Ref<HTMLElement | SVGElement>,\n    {\n        latestValues,\n    }: VisualState<HTMLElement | SVGElement, HTMLRenderState | SVGRenderState>,\n    isStatic: boolean,\n    forwardMotionProps: boolean = false\n) {\n    const useVisualProps = isSVGComponent(Component)\n        ? useSVGProps\n        : useHTMLProps\n\n    const visualProps = useVisualProps(\n        props as any,\n        latestValues,\n        isStatic,\n        Component as any\n    )\n    const filteredProps = filterProps(\n        props,\n        typeof Component === \"string\",\n        forwardMotionProps\n    )\n    const elementProps =\n        Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {}\n\n    /**\n     * If component has been handed a motion value as its child,\n     * memoise its initial value and render that. Subsequent updates\n     * will be handled by the onChange handler\n     */\n    const { children } = props\n    const renderedChildren = useMemo(\n        () => (isMotionValue(children) ? children.get() : children),\n        [children]\n    )\n\n    return createElement<any>(Component, {\n        ...elementProps,\n        children: renderedChildren,\n    })\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BI;AACI;;AAGJ;AAMA;;AAQA;;;;AAIG;AACH;AACA;;AAMI;AACA;AACH;AACL;;"}
+{"version":3,"file":"use-render.mjs","sources":["../../../../src/render/dom/use-render.ts"],"sourcesContent":["\"use client\"\n\nimport { isMotionValue } from \"motion-dom\"\nimport { Fragment, createElement, useMemo } from \"react\"\nimport { MotionProps } from \"../../motion/types\"\nimport { VisualState } from \"../../motion/utils/use-visual-state\"\nimport { HTMLRenderState } from \"../html/types\"\nimport { useHTMLProps } from \"../html/use-props\"\nimport { SVGRenderState } from \"../svg/types\"\nimport { useSVGProps } from \"../svg/use-props\"\nimport { DOMMotionComponents } from \"./types\"\nimport { filterProps } from \"./utils/filter-props\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport function useRender<\n    Props = {},\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    props: MotionProps,\n    ref: React.Ref<HTMLElement | SVGElement>,\n    {\n        latestValues,\n    }: VisualState<HTMLElement | SVGElement, HTMLRenderState | SVGRenderState>,\n    isStatic: boolean,\n    forwardMotionProps: boolean = false,\n    isSVG?: boolean\n) {\n    const useVisualProps =\n        (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps\n\n    const visualProps = useVisualProps(\n        props as any,\n        latestValues,\n        isStatic,\n        Component as any\n    )\n    const filteredProps = filterProps(\n        props,\n        typeof Component === \"string\",\n        forwardMotionProps\n    )\n    const elementProps =\n        Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {}\n\n    /**\n     * If component has been handed a motion value as its child,\n     * memoise its initial value and render that. Subsequent updates\n     * will be handled by the onChange handler\n     */\n    const { children } = props\n    const renderedChildren = useMemo(\n        () => (isMotionValue(children) ? children.get() : children),\n        [children]\n    )\n\n    return createElement<any>(Component, {\n        ...elementProps,\n        children: renderedChildren,\n    })\n}\n"],"names":[],"mappings":";;;;;;;;;AA4BI;AAGA;AAMA;;AAQA;;;;AAIG;AACH;AACA;;AAMI;AACA;AACH;AACL;;"}

package/dist/es/render/svg/utils/build-attrs.mjs

@@ -1,6 +1,15 @@
 import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
 import { buildSVGPath } from './path.mjs';
 
+/**
+ * CSS Motion Path properties that should remain as CSS styles on SVG elements.
+ */
+const cssMotionPathProperties = [
+    "offsetDistance",
+    "offsetPath",
+    "offsetRotate",
+    "offsetAnchor",
+];
 /**
  * Build SVG visual attributes, like cx and style.transform
  */
@@ -41,6 +50,12 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing
         style.transformBox = styleProp?.transformBox ?? "fill-box";
         delete attrs.transformBox;
     }
+    for (const key of cssMotionPathProperties) {
+        if (attrs[key] !== undefined) {
+            style[key] = attrs[key];
+            delete attrs[key];
+        }
+    }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
         attrs.x = attrX;

package/dist/es/render/svg/utils/build-attrs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-attrs.mjs","sources":["../../../../../src/render/svg/utils/build-attrs.ts"],"sourcesContent":["import { MotionProps } from \"../../../motion/types\"\nimport { buildHTMLStyles } from \"../../html/utils/build-styles\"\nimport { ResolvedValues } from \"../../types\"\nimport { SVGRenderState } from \"../types\"\nimport { buildSVGPath } from \"./path\"\n\n/**\n * Build SVG visual attributes, like cx and style.transform\n */\nexport function buildSVGAttrs(\n    state: SVGRenderState,\n    {\n        attrX,\n        attrY,\n        attrScale,\n        pathLength,\n        pathSpacing = 1,\n        pathOffset = 0,\n        // This is object creation, which we try to avoid per-frame.\n        ...latest\n    }: ResolvedValues,\n    isSVGTag: boolean,\n    transformTemplate?: MotionProps[\"transformTemplate\"],\n    styleProp?: MotionProps[\"style\"]\n) {\n    buildHTMLStyles(state, latest, transformTemplate)\n\n    /**\n     * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n     * as normal HTML tags.\n     */\n    if (isSVGTag) {\n        if (state.style.viewBox) {\n            state.attrs.viewBox = state.style.viewBox\n        }\n        return\n    }\n\n    state.attrs = state.style\n    state.style = {}\n    const { attrs, style } = state\n\n    /**\n     * However, we apply transforms as CSS transforms.\n     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.\n     */\n    if (attrs.transform) {\n        style.transform = attrs.transform\n        delete attrs.transform\n    }\n    if (style.transform || attrs.transformOrigin) {\n        style.transformOrigin = attrs.transformOrigin ?? \"50% 50%\"\n        delete attrs.transformOrigin\n    }\n\n    if (style.transform) {\n        /**\n         * SVG's element transform-origin uses its own median as a reference.\n         * Therefore, transformBox becomes a fill-box\n         */\n        style.transformBox = (styleProp?.transformBox as string) ?? \"fill-box\"\n        delete attrs.transformBox\n    }\n\n    // Render attrX/attrY/attrScale as attributes\n    if (attrX !== undefined) attrs.x = attrX\n    if (attrY !== undefined) attrs.y = attrY\n    if (attrScale !== undefined) attrs.scale = attrScale\n\n    // Build SVG path if one has been defined\n    if (pathLength !== undefined) {\n        buildSVGPath(\n            attrs,\n            pathLength as number,\n            pathSpacing as number,\n            pathOffset as number,\n            false\n        )\n    }\n}\n"],"names":[],"mappings":";;;AAMA;;AAEG;AACG,SAAU,aAAa,CACzB,KAAqB,EACrB,EACI,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,GAAG,CAAC,EACf,UAAU,GAAG,CAAC;AACd;AACA,GAAG,MAAM,EACI,EACjB,QAAiB,EACjB,iBAAoD,EACpD,SAAgC,EAAA;AAEhC,IAAA,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEjD;;;AAGG;IACH,IAAI,QAAQ,EAAE;AACV,QAAA,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;YACrB,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;SAC5C;QACD,OAAM;KACT;AAED,IAAA,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;AACzB,IAAA,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;AAChB,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;AAE9B;;;AAGG;AACH,IAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,QAAA,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;QACjC,OAAO,KAAK,CAAC,SAAS,CAAA;KACzB;IACD,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,eAAe,EAAE;QAC1C,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,IAAI,SAAS,CAAA;QAC1D,OAAO,KAAK,CAAC,eAAe,CAAA;KAC/B;AAED,IAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB;;;AAGG;QACH,KAAK,CAAC,YAAY,GAAI,SAAS,EAAE,YAAuB,IAAI,UAAU,CAAA;QACtE,OAAO,KAAK,CAAC,YAAY,CAAA;KAC5B;;IAGD,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,CAAC,GAAG,KAAK,CAAA;IACxC,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,CAAC,GAAG,KAAK,CAAA;IACxC,IAAI,SAAS,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,KAAK,GAAG,SAAS,CAAA;;AAGpD,IAAA,IAAI,UAAU,KAAK,SAAS,EAAE;QAC1B,YAAY,CACR,KAAK,EACL,UAAoB,EACpB,WAAqB,EACrB,UAAoB,EACpB,KAAK,CACR,CAAA;KACJ;AACL;;;;"}
+{"version":3,"file":"build-attrs.mjs","sources":["../../../../../src/render/svg/utils/build-attrs.ts"],"sourcesContent":["import { MotionProps } from \"../../../motion/types\"\nimport { buildHTMLStyles } from \"../../html/utils/build-styles\"\nimport { ResolvedValues } from \"../../types\"\nimport { SVGRenderState } from \"../types\"\nimport { buildSVGPath } from \"./path\"\n\n/**\n * CSS Motion Path properties that should remain as CSS styles on SVG elements.\n */\nconst cssMotionPathProperties = [\n    \"offsetDistance\",\n    \"offsetPath\",\n    \"offsetRotate\",\n    \"offsetAnchor\",\n]\n\n/**\n * Build SVG visual attributes, like cx and style.transform\n */\nexport function buildSVGAttrs(\n    state: SVGRenderState,\n    {\n        attrX,\n        attrY,\n        attrScale,\n        pathLength,\n        pathSpacing = 1,\n        pathOffset = 0,\n        // This is object creation, which we try to avoid per-frame.\n        ...latest\n    }: ResolvedValues,\n    isSVGTag: boolean,\n    transformTemplate?: MotionProps[\"transformTemplate\"],\n    styleProp?: MotionProps[\"style\"]\n) {\n    buildHTMLStyles(state, latest, transformTemplate)\n\n    /**\n     * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n     * as normal HTML tags.\n     */\n    if (isSVGTag) {\n        if (state.style.viewBox) {\n            state.attrs.viewBox = state.style.viewBox\n        }\n        return\n    }\n\n    state.attrs = state.style\n    state.style = {}\n    const { attrs, style } = state\n\n    /**\n     * However, we apply transforms as CSS transforms.\n     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.\n     */\n    if (attrs.transform) {\n        style.transform = attrs.transform\n        delete attrs.transform\n    }\n    if (style.transform || attrs.transformOrigin) {\n        style.transformOrigin = attrs.transformOrigin ?? \"50% 50%\"\n        delete attrs.transformOrigin\n    }\n\n    if (style.transform) {\n        /**\n         * SVG's element transform-origin uses its own median as a reference.\n         * Therefore, transformBox becomes a fill-box\n         */\n        style.transformBox = (styleProp?.transformBox as string) ?? \"fill-box\"\n        delete attrs.transformBox\n    }\n\n    for (const key of cssMotionPathProperties) {\n        if (attrs[key] !== undefined) {\n            style[key] = attrs[key]\n            delete attrs[key]\n        }\n    }\n\n    // Render attrX/attrY/attrScale as attributes\n    if (attrX !== undefined) attrs.x = attrX\n    if (attrY !== undefined) attrs.y = attrY\n    if (attrScale !== undefined) attrs.scale = attrScale\n\n    // Build SVG path if one has been defined\n    if (pathLength !== undefined) {\n        buildSVGPath(\n            attrs,\n            pathLength as number,\n            pathSpacing as number,\n            pathOffset as number,\n            false\n        )\n    }\n}\n"],"names":[],"mappings":";;;AAMA;;AAEG;AACH,MAAM,uBAAuB,GAAG;IAC5B,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,cAAc;CACjB,CAAA;AAED;;AAEG;AACG,SAAU,aAAa,CACzB,KAAqB,EACrB,EACI,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,GAAG,CAAC,EACf,UAAU,GAAG,CAAC;AACd;AACA,GAAG,MAAM,EACI,EACjB,QAAiB,EACjB,iBAAoD,EACpD,SAAgC,EAAA;AAEhC,IAAA,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEjD;;;AAGG;IACH,IAAI,QAAQ,EAAE;AACV,QAAA,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;YACrB,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;SAC5C;QACD,OAAM;KACT;AAED,IAAA,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;AACzB,IAAA,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;AAChB,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;AAE9B;;;AAGG;AACH,IAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,QAAA,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;QACjC,OAAO,KAAK,CAAC,SAAS,CAAA;KACzB;IACD,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,eAAe,EAAE;QAC1C,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,IAAI,SAAS,CAAA;QAC1D,OAAO,KAAK,CAAC,eAAe,CAAA;KAC/B;AAED,IAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB;;;AAGG;QACH,KAAK,CAAC,YAAY,GAAI,SAAS,EAAE,YAAuB,IAAI,UAAU,CAAA;QACtE,OAAO,KAAK,CAAC,YAAY,CAAA;KAC5B;AAED,IAAA,KAAK,MAAM,GAAG,IAAI,uBAAuB,EAAE;AACvC,QAAA,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE;YAC1B,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;AACvB,YAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAA;SACpB;KACJ;;IAGD,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,CAAC,GAAG,KAAK,CAAA;IACxC,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,CAAC,GAAG,KAAK,CAAA;IACxC,IAAI,SAAS,KAAK,SAAS;AAAE,QAAA,KAAK,CAAC,KAAK,GAAG,SAAS,CAAA;;AAGpD,IAAA,IAAI,UAAU,KAAK,SAAS,EAAE;QAC1B,YAAY,CACR,KAAK,EACL,UAAoB,EACpB,WAAqB,EACrB,UAAoB,EACpB,KAAK,CACR,CAAA;KACJ;AACL;;;;"}

package/dist/framer-motion.dev.js

@@ -606,17 +606,6 @@
         return singleCssVariableRegex.test(value.split("/*")[0].trim());
     };
     const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
-    /**
-     * Check if a value contains a CSS variable anywhere (e.g. inside calc()).
-     * Unlike isCSSVariableToken which checks if the value IS a var() token,
-     * this checks if the value CONTAINS var() somewhere in the string.
-     */
-    function containsCSSVariable(value) {
-        if (typeof value !== "string")
-            return false;
-        // Strip comments to avoid false positives
-        return value.split("/*")[0].includes("var(--");
-    }
 
     const number = {
         test: (v) => typeof v === "number",
@@ -3190,17 +3179,36 @@
         right: px,
         bottom: px,
         left: px,
+        inset: px,
+        insetBlock: px,
+        insetBlockStart: px,
+        insetBlockEnd: px,
+        insetInline: px,
+        insetInlineStart: px,
+        insetInlineEnd: px,
         // Spacing props
         padding: px,
         paddingTop: px,
         paddingRight: px,
         paddingBottom: px,
         paddingLeft: px,
+        paddingBlock: px,
+        paddingBlockStart: px,
+        paddingBlockEnd: px,
+        paddingInline: px,
+        paddingInlineStart: px,
+        paddingInlineEnd: px,
         margin: px,
         marginTop: px,
         marginRight: px,
         marginBottom: px,
         marginLeft: px,
+        marginBlock: px,
+        marginBlockStart: px,
+        marginBlockEnd: px,
+        marginInline: px,
+        marginInlineStart: px,
+        marginInlineEnd: px,
         // Misc
         backgroundPositionX: px,
         backgroundPositionY: px,
@@ -3318,16 +3326,6 @@
             const [origin, target] = unresolvedKeyframes;
             const originType = findDimensionValueType(origin);
             const targetType = findDimensionValueType(target);
-            /**
-             * If one keyframe contains embedded CSS variables (e.g. in calc()) and the other
-             * doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.
-             */
-            const originHasVar = containsCSSVariable(origin);
-            const targetHasVar = containsCSSVariable(target);
-            if (originHasVar !== targetHasVar && positionalValues[name]) {
-                this.needsMeasurement = true;
-                return;
-            }
             /**
              * Either we don't recognise these value types or we can animate between them.
              */
@@ -3426,17 +3424,36 @@
         "right",
         "bottom",
         "left",
+        "inset",
+        "insetBlock",
+        "insetBlockStart",
+        "insetBlockEnd",
+        "insetInline",
+        "insetInlineStart",
+        "insetInlineEnd",
         // Spacing props
         "padding",
         "paddingTop",
         "paddingRight",
         "paddingBottom",
         "paddingLeft",
+        "paddingBlock",
+        "paddingBlockStart",
+        "paddingBlockEnd",
+        "paddingInline",
+        "paddingInlineStart",
+        "paddingInlineEnd",
         "margin",
         "marginTop",
         "marginRight",
         "marginBottom",
         "marginLeft",
+        "marginBlock",
+        "marginBlockStart",
+        "marginBlockEnd",
+        "marginInline",
+        "marginInlineStart",
+        "marginInlineEnd",
         // Misc
         "backgroundPositionX",
         "backgroundPositionY",
@@ -9248,6 +9265,15 @@
         attrs[keys.array] = `${pathLength} ${pathSpacing}`;
     }
 
+    /**
+     * CSS Motion Path properties that should remain as CSS styles on SVG elements.
+     */
+    const cssMotionPathProperties = [
+        "offsetDistance",
+        "offsetPath",
+        "offsetRotate",
+        "offsetAnchor",
+    ];
     /**
      * Build SVG visual attributes, like cx and style.transform
      */
@@ -9288,6 +9314,12 @@
             style.transformBox = styleProp?.transformBox ?? "fill-box";
             delete attrs.transformBox;
         }
+        for (const key of cssMotionPathProperties) {
+            if (attrs[key] !== undefined) {
+                style[key] = attrs[key];
+                delete attrs[key];
+            }
+        }
         // Render attrX/attrY/attrScale as attributes
         if (attrX !== undefined)
             attrs.x = attrX;
@@ -9446,7 +9478,11 @@
     }
 
     const createDomVisualElement = (Component, options) => {
-        return isSVGComponent(Component)
+        /**
+         * Use explicit isSVG override if provided, otherwise auto-detect
+         */
+        const isSVG = options.isSVG ?? isSVGComponent(Component);
+        return isSVG
             ? new SVGVisualElement(options)
             : new HTMLVisualElement(options, {
                 allowProjection: Component !== React$1.Fragment,
@@ -9555,10 +9591,8 @@
         return visualProps;
     }
 
-    function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false) {
-        const useVisualProps = isSVGComponent(Component)
-            ? useSVGProps
-            : useHTMLProps;
+    function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false, isSVG) {
+        const useVisualProps = (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps;
         const visualProps = useVisualProps(props, latestValues, isStatic, Component);
         const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
         const elementProps = Component !== React$1.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
@@ -9700,7 +9734,7 @@
      */
     const SwitchLayoutGroupContext = React$1.createContext({});
 
-    function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+    function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
         const { visualElement: parent } = React$1.useContext(MotionContext);
         const lazyContext = React$1.useContext(LazyContext);
         const presenceContext = React$1.useContext(PresenceContext);
@@ -9722,6 +9756,7 @@
                     ? presenceContext.initial === false
                     : false,
                 reducedMotionConfig,
+                isSVG,
             });
         }
         const visualElement = visualElementRef.current;
@@ -9837,11 +9872,15 @@
      * Alongside this is a config option which provides a way of rendering the provided
      * component "offline", or outside the React render cycle.
      */
-    function createMotionComponent(Component, { forwardMotionProps = false } = {}, preloadedFeatures, createVisualElement) {
+    function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
         preloadedFeatures && loadFeatures(preloadedFeatures);
-        const useVisualState = isSVGComponent(Component)
-            ? useSVGVisualState
-            : useHTMLVisualState;
+        /**
+         * Determine whether to use SVG or HTML rendering based on:
+         * 1. Explicit `type` option (highest priority)
+         * 2. Auto-detection via `isSVGComponent`
+         */
+        const isSVG = type ? type === "svg" : isSVGComponent(Component);
+        const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState;
         function MotionDOMComponent(props, externalRef) {
             /**
              * If we need to measure the element we load this functionality in a
@@ -9866,13 +9905,13 @@
                  * providing a way of rendering to these APIs outside of the React render loop
                  * for more performant animations and interactions
                  */
-                context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
+                context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG);
             }
             /**
              * The mount order and hierarchy is specific to ensure our element ref
              * is hydrated by the time features fire their effects.
              */
-            return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] }));
+            return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps, isSVG)] }));
         }
         MotionDOMComponent.displayName = `motion.${typeof Component === "string"
         ? Component
@@ -11444,6 +11483,16 @@
             }
             this.removeListeners = this.controls.addListeners() || noop;
         }
+        update() {
+            const { dragControls } = this.node.getProps();
+            const { dragControls: prevDragControls } = this.node.prevProps || {};
+            if (dragControls !== prevDragControls) {
+                this.removeGroupControls();
+                if (dragControls) {
+                    this.removeGroupControls = dragControls.subscribe(this.controls);
+                }
+            }
+        }
         unmount() {
             this.removeGroupControls();
             this.removeListeners();
@@ -14242,7 +14291,6 @@
     exports.collectMotionValues = collectMotionValues;
     exports.color = color;
     exports.complex = complex;
-    exports.containsCSSVariable = containsCSSVariable;
     exports.convertOffsetToTimes = convertOffsetToTimes;
     exports.createBox = createBox;
     exports.createGeneratorEasing = createGeneratorEasing;