unframer 3.1.0 → 3.2.0

package/esm/framer.js

@@ -10499,7 +10499,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.O23R7WUO.mjs
+// /:https://app.framerstatic.com/framer.UWLYDHV3.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -11971,33 +11971,10 @@ function useRouteHandler(routeId, preload = false, elementId) {
     const handler = React4.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
     return handler;
 }
-var timezone;
-var visitorLocale;
-function setTimezoneAndLocaleForTracking() {
-    const resolvedDateTimeOptions = Intl.DateTimeFormat().resolvedOptions();
-    timezone = resolvedDateTimeOptions.timeZone;
-    visitorLocale = resolvedDateTimeOptions.locale;
-}
-requestIdleCallback(setTimezoneAndLocaleForTracking);
+var pageviewEventVersion = 2;
 function sendTrackingEvent(eventType, eventData, sendOn = 'lazy') {
-    if (!safeWindow.__framer_events)
-        return;
-    if (!timezone || !visitorLocale)
-        setTimezoneAndLocaleForTracking();
-    safeWindow.__framer_events.push([eventType, {
-            // Base properties common to all events
-            referrer: null,
-            // The first pageview event will always be sent before hydration, in a script in `exportToHTML.ts`.
-            url: safeWindow.location.href,
-            hostname: safeWindow.location.hostname || null,
-            pathname: safeWindow.location.pathname || null,
-            hash: safeWindow.location.hash || null,
-            search: safeWindow.location.search || null,
-            timezone,
-            locale: visitorLocale,
-            // Additional properties specific to custom events
-            ...eventData,
-        }, sendOn,]);
+    var _a;
+    (_a = safeWindow.__framer_events) == null ? void 0 : _a.push([eventType, eventData, sendOn,]);
     switch (eventType) {
         case 'published_site_click': {
             const { trackingId, href, } = eventData;
@@ -12901,7 +12878,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
         const stopMonitoringINPRelatedInputs = monitorINPRelatedInputs();
         void nextRender.promise.finally(stopMonitoringINPRelatedInputs);
         const changeRoute = () => {
-            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, isObject2(pathVariables) ? pathVariables : void 0, true, nextRender, false);
+            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, window.location.pathname + window.location.search + window.location.hash, isObject2(pathVariables) ? pathVariables : void 0, true, nextRender, false);
         };
         const viewTransition = await startViewTransition2(currentRouteId.current, routeId, changeRoute);
         const navigationTransition = (_d = window.navigation) == null ? void 0 : _d.transition;
@@ -18375,8 +18352,14 @@ var DimensionType = /* @__PURE__ */ ((DimensionType2) => {
     DimensionType2[DimensionType2['Auto'] = 2] = 'Auto';
     DimensionType2[DimensionType2['FractionOfFreeSpace'] = 3] = 'FractionOfFreeSpace';
     DimensionType2[DimensionType2['Viewport'] = 4] = 'Viewport';
+    DimensionType2[DimensionType2['FitImage'] = 5] = 'FitImage';
     return DimensionType2;
 })(DimensionType || {});
+function isAutoDimensionType(dimensionType) {
+    if (isUndefined(dimensionType))
+        return false;
+    return dimensionType === 2 || dimensionType === 5;
+}
 function isConstraintSupportingChild(child) {
     if (!isReactChild(child) || !isReactElement(child)) {
         return false;
@@ -18387,7 +18370,7 @@ var ConstraintMask = {
     // Modifies the constraint mask to remove invalid (mutually exclusive) options and returns the original.
     // TODO: this removes major inconsistencies but probably needs to be merged with ConstraintSolver.
     quickfix: (constraints) => {
-        if (constraints.widthType === 2 || constraints.heightType === 2) {
+        if (isAutoDimensionType(constraints.widthType) || isAutoDimensionType(constraints.heightType)) {
             constraints.aspectRatio = null;
         }
         if (isFiniteNumber(constraints.aspectRatio)) {
@@ -18405,13 +18388,13 @@ var ConstraintMask = {
             }
         }
         if (constraints.left && constraints.right) {
-            if (constraints.fixedSize || constraints.widthType === 2 || isFiniteNumber(constraints.maxWidth)) {
+            if (constraints.fixedSize || isAutoDimensionType(constraints.widthType) || isFiniteNumber(constraints.maxWidth)) {
                 constraints.right = false;
             }
             constraints.widthType = 0;
         }
         if (constraints.top && constraints.bottom) {
-            if (constraints.fixedSize || constraints.heightType === 2 || isFiniteNumber(constraints.maxHeight)) {
+            if (constraints.fixedSize || isAutoDimensionType(constraints.heightType) || isFiniteNumber(constraints.maxHeight)) {
                 constraints.bottom = false;
             }
             constraints.heightType = 0;
@@ -18520,7 +18503,7 @@ var ConstraintValues = {
         if (parentWidth && isFiniteNumber(hOpposingPinsOffset)) {
             width = parentWidth - hOpposingPinsOffset;
         }
-        else if (autoSize && values.widthType === 2) {
+        else if (autoSize && isAutoDimensionType(values.widthType)) {
             width = autoSize.width;
         }
         else if (isFiniteNumber(values.width)) {
@@ -18538,6 +18521,7 @@ var ConstraintValues = {
                     }
                     break;
                 case 2:
+                case 5:
                     break;
                 default:
                     assertNever(values.widthType);
@@ -18547,7 +18531,7 @@ var ConstraintValues = {
         if (parentHeight && isFiniteNumber(vOpposingPinsOffset)) {
             height = parentHeight - vOpposingPinsOffset;
         }
-        else if (autoSize && values.heightType === 2) {
+        else if (autoSize && isAutoDimensionType(values.heightType)) {
             height = autoSize.height;
         }
         else if (isFiniteNumber(values.height)) {
@@ -18565,6 +18549,7 @@ var ConstraintValues = {
                     }
                     break;
                 case 2:
+                case 5:
                     break;
                 default:
                     assertNever(values.heightType);
@@ -19624,9 +19609,10 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
             /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */
             cursor: var(--framer-custom-cursors, pointer);
-            background-color: var(--framer-link-text-background-color, var(--framer-text-background-color, initial));
-            border-radius: var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial));
-            padding: var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial));
+            /* Don't inherit background styles from any parent text style. */
+            background-color: var(--framer-link-text-background-color, initial);
+            border-radius: var(--framer-link-text-background-radius, initial);
+            padding: var(--framer-link-text-background-padding, initial);
         }
     `,
     // Text decoration can't be applied to the nested spans of links because it breaks animations
@@ -19649,7 +19635,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             span.framer-text[data-nested-link],
             span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) {
                 color: ${createRGBVariableFallbacks(['--framer-blockquote-text-color', '--framer-link-text-color', '--framer-text-color',], '#000')};
-                background-color: ${createRGBVariableFallbacks(['--framer-link-text-background-color', '--framer-text-background-color',], 'initial')};
+                background-color: ${createRGBVariableFallbacks(['--framer-link-text-background-color',], 'initial')};
             }
         }
     `, /* css */
@@ -19765,9 +19751,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
             font-size: calc(var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
-            background-color: var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial)));
-            border-radius: var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial)));
-            padding: var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial)));
+            background-color: var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial));
+            border-radius: var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial));
+            padding: var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial));
         }
     `, /* css */
     `
@@ -19839,9 +19825,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
-            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial))));
-            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial))));
-            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial))));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial)));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial)));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial)));
         }
     `, /* css */
     `
@@ -19872,7 +19858,6 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         '--framer-link-hover-text-background-color',
         '--framer-link-current-text-background-color',
         '--framer-link-text-background-color',
-        '--framer-text-background-color',
     ], 'initial')};
             }
         }
@@ -19909,7 +19894,6 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         '--framer-link-hover-text-background-color',
         '--framer-link-current-text-background-color',
         '--framer-link-text-background-color',
-        '--framer-text-background-color',
     ], 'initial')};
             }
         }
@@ -22430,7 +22414,7 @@ var BackgroundImage = {
     isImageObject: function (image) {
         if (!image || typeof image === 'string')
             return false;
-        return key in image;
+        return typeof image === 'object' && key in image;
     },
 };
 function applyForwardOverrides(background, props) {
@@ -22465,6 +22449,31 @@ function backgroundImageFromProps(props) {
     }
     return applyForwardOverrides(backgroundImage, props);
 }
+function getIntrinsicSizeForBackgroundImage(background) {
+    if (!background)
+        return void 0;
+    if (background.pixelHeight && background.pixelWidth) {
+        return {
+            width: background.pixelWidth,
+            height: background.pixelHeight,
+        };
+    }
+    return parseImageSizeFromSrc(background.src);
+}
+function parseImageSizeFromSrc(src) {
+    if (!src)
+        return void 0;
+    const url = new URL(src);
+    const width = url.searchParams.get('width');
+    const height = url.searchParams.get('height');
+    if (width && height) {
+        return {
+            width: parseInt(width),
+            height: parseInt(height),
+        };
+    }
+    return void 0;
+}
 function htmlElementAsMotionComponent(asElem) {
     return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion[asElem] : motion['div'];
 }
@@ -23572,6 +23581,11 @@ var VisibleFrame = /* @__PURE__ */ forwardRef(function VisibleFrame2(props, forw
         ],
     }), parentSize);
     const MotionComponent = htmlElementAsMotionComponent(props.as);
+    const intrinsicSize = getIntrinsicSizeForBackgroundImage(backgroundImage);
+    if (props.fitImageDimension && intrinsicSize) {
+        currentStyle[props.fitImageDimension] = 'auto';
+        currentStyle.aspectRatio = intrinsicSize.width / intrinsicSize.height;
+    }
     return /* @__PURE__ */ jsxs(MotionComponent, {
         ...dataProps,
         ...motionProps,
@@ -32879,15 +32893,15 @@ function domWriteCreateUpdateSafeArea(safeAreaRef) {
         Object.assign(safeAreaRef.current.style, floatingPositionSafeAreaStyle(x, y, placement, anchorRect, calculatedRect));
     };
 }
-function domWriteUpdatePosition(floatingPositionRef, position, rect) {
+function domWriteUpdatePosition(floatingPositionRef, position, rect, scrollX, scrollY) {
     if (!floatingPositionRef.current)
         return;
     Object.assign(floatingPositionRef.current.style, {
         position,
         visibility: 'visible',
         // Append "px" because we are assigning this object straight to style.
-        left: ((rect == null ? void 0 : rect.x) ?? 0) + (position === 'fixed' ? 0 : safeWindow.scrollX) + 'px',
-        top: ((rect == null ? void 0 : rect.y) ?? 0) + (position === 'fixed' ? 0 : safeWindow.scrollY) + 'px',
+        left: ((rect == null ? void 0 : rect.x) ?? 0) + scrollX + 'px',
+        top: ((rect == null ? void 0 : rect.y) ?? 0) + scrollY + 'px',
     });
 }
 var FloatingStackingContext = /* @__PURE__ */ (() => {
@@ -33014,13 +33028,14 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         let elementRect;
         let safePlacement;
         let calculatedRect;
-        let scrolls;
         let latestEvent;
         let updateSafeArea;
+        let scrollX = 0;
+        let scrollY = 0;
         const onRender = () => {
             if (cleanupHasRun)
                 return;
-            domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
+            domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY);
             if (safeArea)
                 updateSafeArea(anchorRect, calculatedRect, safePlacement, latestEvent);
             latestEvent = void 0;
@@ -33031,7 +33046,7 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
                 onRender();
             }
             else {
-                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
+                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY);
             }
             initialUpdateHasRun = true;
         };
@@ -33043,6 +33058,14 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         const domReadUpdateSafePlacementAndRect = () => {
             if (!getSafePlacementRect || cleanupHasRun)
                 return;
+            if (position === 'fixed') {
+                scrollX = 0;
+                scrollY = 0;
+            }
+            else {
+                scrollX = safeWindow.scrollX;
+                scrollY = safeWindow.scrollY;
+            }
             anchorRect = anchorRef.current.getBoundingClientRect();
             const safePlacementAndRect = getSafePlacementRect(anchorRect, elementRect);
             safePlacement = safePlacementAndRect[0];
@@ -34605,57 +34628,79 @@ function isSamePage(a, b) {
     return aPathVariables.length === bPathVariables.length &&
         Object.keys(aPathVariables).every((key7) => aPathVariables[key7] === bPathVariables[key7]);
 }
-function getPageviewEventData({ abTestId, framerSiteId, routeId, routePath, collectionItemId, localeCode, }) {
-    return {
-        abTestId,
-        framerSiteId,
-        routePath: routePath || '/',
-        collectionItemId,
-        framerLocale: localeCode,
-        webPageId: routeId,
-    };
+var timezone = null;
+var visitorLocale = null;
+function setTimezoneAndLocaleForTracking() {
+    const resolvedDateTimeOptions = Intl.DateTimeFormat().resolvedOptions();
+    timezone = resolvedDateTimeOptions.timeZone;
+    visitorLocale = resolvedDateTimeOptions.locale;
 }
-var useSendPageView = (currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale) => {
+requestIdleCallback(setTimezoneAndLocaleForTracking);
+var useSendPageView = (currentRoute, currentRouteId, currentPathnameWithHash, currentPathVariables, collectionUtils, activeLocale) => {
     const framerSiteId = useContext(FormContext);
     const pageviewEventData = useRef3();
     const skipFirstPageView = useRef3(true);
     useEffect(() => {
-        const getFullPageviewEventData = async () => {
-            var _a;
-            let collectionItemId = null;
-            if ((currentRoute == null ? void 0 : currentRoute.collectionId) && collectionUtils && currentPathVariables) {
-                const utils = await ((_a = collectionUtils[currentRoute.collectionId]) == null ? void 0 : _a.call(collectionUtils));
-                const [slug,] = Object.values(currentPathVariables);
-                if (utils && typeof slug === 'string') {
-                    collectionItemId = (await utils.getRecordIdBySlug(slug, activeLocale || void 0)) ?? null;
-                }
-            }
-            return getPageviewEventData({
+        function getFullPageviewEventData() {
+            if (!timezone || !visitorLocale)
+                setTimezoneAndLocaleForTracking();
+            const currentLocation = currentPathnameWithHash
+                ? new URL(safeWindow.location.origin + currentPathnameWithHash)
+                : safeWindow.location;
+            const eventData = {
+                version: pageviewEventVersion,
                 abTestId: currentRoute == null ? void 0 : currentRoute.abTestId,
                 framerSiteId: framerSiteId ?? null,
                 // If we are in a variant route, let's use the variant ID as the route ID instead, so that the analytics panel will be able to show the correct tracking data.
-                routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
-                routePath: currentRoute == null ? void 0 : currentRoute.path,
-                collectionItemId,
-                localeCode: (activeLocale == null ? void 0 : activeLocale.code) || null,
-            });
-        };
+                webPageId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
+                routePath: (currentRoute == null ? void 0 : currentRoute.path) || '/',
+                collectionItemId: null,
+                framerLocale: (activeLocale == null ? void 0 : activeLocale.code) || null,
+                referrer: null,
+                // The first pageview event will always be sent before hydration, in a script in `exportToHTML.ts`.
+                url: currentLocation.href,
+                hostname: currentLocation.hostname,
+                // Capture the current location before the user moves to a new page to prevent
+                // tracking wrong pathnames due to a race condition caused by async operations
+                // when resolving the collection item ID below
+                pathname: currentLocation.pathname,
+                search: currentLocation.search || null,
+                hash: currentLocation.hash || null,
+                timezone,
+                locale: visitorLocale,
+            };
+            return (currentRoute == null ? void 0 : currentRoute.collectionId) && collectionUtils && currentPathVariables
+                ? (async () => {
+                    var _a;
+                    let collectionItemId = null;
+                    const utils = currentRoute.collectionId &&
+                        (await ((_a = collectionUtils[currentRoute.collectionId]) == null ? void 0 : _a.call(collectionUtils)));
+                    const [slug,] = Object.values(currentPathVariables);
+                    if (utils && typeof slug === 'string') {
+                        collectionItemId = (await utils.getRecordIdBySlug(slug, activeLocale || void 0)) ?? null;
+                    }
+                    return {
+                        ...eventData,
+                        collectionItemId,
+                    };
+                })()
+                : eventData;
+        }
         void (async () => {
-            const pageviewEventDataPromise = getFullPageviewEventData();
-            pageviewEventData.current = pageviewEventDataPromise;
+            const eventDataOrPromise = pageviewEventData.current = getFullPageviewEventData();
+            const eventData = eventDataOrPromise instanceof Promise ? await eventDataOrPromise : eventDataOrPromise;
+            pageviewEventData.current = eventData;
             if (skipFirstPageView.current) {
                 skipFirstPageView.current = false;
-                return;
             }
-            const eventData = await pageviewEventDataPromise;
-            pageviewEventData.current = eventData;
-            sendTrackingEvent('published_site_pageview', eventData, 'eager');
+            else {
+                sendTrackingEvent('published_site_pageview', eventData, 'eager');
+            }
         })();
         const listener = async (event) => {
             if (event.persisted) {
-                const pageviewEventDataPromise = getFullPageviewEventData();
-                pageviewEventData.current = pageviewEventDataPromise;
-                const eventData = await getFullPageviewEventData();
+                const eventDataOrPromise = pageviewEventData.current = getFullPageviewEventData();
+                const eventData = eventDataOrPromise instanceof Promise ? await eventDataOrPromise : eventDataOrPromise;
                 pageviewEventData.current = eventData;
                 sendTrackingEvent('published_site_pageview', eventData, 'eager');
             }
@@ -34664,7 +34709,7 @@ var useSendPageView = (currentRoute, currentRouteId, currentPathVariables, colle
         return () => {
             window.removeEventListener('pageshow', listener);
         };
-    }, [currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale, framerSiteId,]);
+    }, [currentRoute, currentRouteId, currentPathnameWithHash, currentPathVariables, collectionUtils, activeLocale, framerSiteId,]);
     return pageviewEventData;
 };
 var defaultLocaleId = 'default';
@@ -34767,6 +34812,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         return (fn) => fn();
     }, [synchronousNavigationOnDesktop,]);
     const isInitialNavigationRef = useRef3(true);
+    const currentPathnameWithHashRef = useRef3();
     const currentRouteRef = useRef3(initialRoute);
     const currentPathVariablesRef = useRef3(initialPathVariables);
     const currentLocaleIdRef = useRef3(initialLocaleId);
@@ -34852,12 +34898,13 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         monitorNextPaintAfterRender,
         transitionFn,
     ]);
-    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
+    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathnameWithHash, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
         isInitialNavigationRef.current = false;
         const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
         currentLocaleIdRef.current = localeId;
+        currentPathnameWithHashRef.current = pathnameWithHash;
         scheduleSideEffect(() => {
             updateScrollPosition(hash2, smoothScroll, isHistoryTransition);
         });
@@ -34943,14 +34990,26 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                 siteCanonicalURL,
             }, ignorePushStateWrapper);
         };
-        setCurrentRouteId(routeId, currentRouteLocaleId, routeElementId, pathVariables, false, nextRender, smoothScroll, disableHistory ? void 0 : updateURL);
+        const pathnameWithHash = getSitePrefix(siteCanonicalURL) + getPathForRoute(newRoute, {
+            currentRoutePath: currentRoute2 == null ? void 0 : currentRoute2.path,
+            currentPathVariables: currentPathVariables2,
+            hash: hash2,
+            pathVariables,
+            localeId: currentRouteLocaleId,
+            preserveQueryParams,
+            siteCanonicalURL,
+            relative: false,
+            // We need an absolute path for the hash
+        });
+        setCurrentRouteId(routeId, currentRouteLocaleId, routeElementId, pathnameWithHash, pathVariables, false, nextRender, smoothScroll, disableHistory ? void 0 : updateURL);
     }, [routes, setCurrentRouteId, disableHistory, preserveQueryParams, siteCanonicalURL, monitorNextPaintAfterRender,]);
     const getRoute = useGetRouteCallback(routes);
     const currentRouteId = currentRouteRef.current;
+    const currentPathnameWithHash = currentPathnameWithHashRef.current;
     const currentPathVariables = currentPathVariablesRef.current;
     const currentRoute = routes[currentRouteId];
     const currentRoutePath = currentRoute == null ? void 0 : currentRoute.path;
-    const pageviewEventData = useSendPageView(currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale);
+    const pageviewEventData = useSendPageView(currentRoute, currentRouteId, currentPathnameWithHash, currentPathVariables, collectionUtils, activeLocale);
     const isInitialNavigation = isInitialNavigationRef.current;
     const api = useMemo2(() => ({
         navigate,
@@ -35003,7 +35062,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                                 /* @__PURE__ */ jsx3(MarkSuspenseEffects.Start, {}),
                                 /* @__PURE__ */ jsx3(WithLayoutTemplate, {
                                     LayoutTemplate,
-                                    routeId: currentRouteId,
+                                    routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
                                     style: defaultPageStyle,
                                     children: (inLayoutTemplate) => {
                                         return /* @__PURE__ */ jsx3(Fragment, {
@@ -42715,7 +42774,9 @@ try {
 catch { }
 var postLogEntry;
 try {
-    if (typeof window !== 'undefined' && !!window.postMessage && window.top !== window) {
+    if (typeof window !== 'undefined' && !!window.postMessage && window.parent !== window &&
+        // Don't post messages to the top-level site from the Editor Bar
+        !window.location.pathname.startsWith('/edit')) {
         postLogEntry = (entry) => {
             var _a;
             try {
@@ -42729,7 +42790,7 @@ try {
                     parts,
                     printed,
                 };
-                (_a = window.top) == null ? void 0 : _a.postMessage(data2, getServiceMap().app);
+                (_a = window.parent) == null ? void 0 : _a.postMessage(data2, getServiceMap().app);
             }
             catch { }
         };
@@ -43811,11 +43872,11 @@ function getAssetOwnerType(asset) {
 async function loadFontsWithOpenType(source) {
     switch (source) {
         case 'google': {
-            const supportedFonts = await import('./framer-chunks/google-3ASCFEEO-3R47BR2A.js');
+            const supportedFonts = await import('./framer-chunks/google-2KFYDWCN-PJC2DDXK.js');
             return supportedFonts == null ? void 0 : supportedFonts.default;
         }
         case 'fontshare': {
-            const supportedFonts = await import('./framer-chunks/fontshare-4J2ZFRBB-H5VQLZTM.js');
+            const supportedFonts = await import('./framer-chunks/fontshare-EOIRPPWV-VDFFNW4K.js');
             return supportedFonts == null ? void 0 : supportedFonts.default;
         }
         default:
@@ -43825,11 +43886,11 @@ async function loadFontsWithOpenType(source) {
 async function loadFontToOpenTypeFeatures(source) {
     switch (source) {
         case 'google': {
-            const features = await import('./framer-chunks/google-FDB6LUFQ-PFSUZGKF.js');
+            const features = await import('./framer-chunks/google-HSMCYMMG-DWNQGSHN.js');
             return features == null ? void 0 : features.default;
         }
         case 'fontshare': {
-            const features = await import('./framer-chunks/fontshare-622CVMZZ-HFPH543A.js');
+            const features = await import('./framer-chunks/fontshare-Y53BJZLK-EUQIV252.js');
             return features == null ? void 0 : features.default;
         }
         case 'framer': {
@@ -44353,10 +44414,10 @@ function loadVariationAxes(source) {
             const axes = (async () => {
                 switch (source) {
                     case 'google': {
-                        return (await import('./framer-chunks/google-C62SNV32-LCI4F7VO.js')).default;
+                        return (await import('./framer-chunks/google-S367OFIE-AWJEPMSF.js')).default;
                     }
                     case 'fontshare': {
-                        return (await import('./framer-chunks/fontshare-JGEKH7YN-QOX3MC3K.js')).default;
+                        return (await import('./framer-chunks/fontshare-2X4LZ75B-D2V5BX73.js')).default;
                     }
                     default:
                         assertNever(source);
@@ -45288,10 +45349,35 @@ var styles3 = /* @__PURE__ */ (() => [
 ])();
 var FormSelect = /* @__PURE__ */ withCSS(Select, styles3, 'framer-lib-form-select');
 var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref) {
-    const { background, children, alt, draggable, style: styleFromProps, ...rest } = props;
+    const { background, children, alt, draggable, fitImageDimension, style: styleFromProps, ...rest } = props;
     const style2 = {
         ...styleFromProps,
     };
+    const intrinsicSize = useMemo2(() => getIntrinsicSizeForBackgroundImage(background), [background,]);
+    const [fallbackIntrinsicSize, setFallbackIntrinsicSize,] = useState();
+    React4.useLayoutEffect(() => {
+        if (!(background == null ? void 0 : background.src))
+            return;
+        if (!fitImageDimension)
+            return;
+        if (intrinsicSize)
+            return;
+        const img = document.createElement('img');
+        img.onload = () => {
+            if (img.naturalWidth && img.naturalHeight) {
+                setFallbackIntrinsicSize({
+                    width: img.naturalWidth,
+                    height: img.naturalHeight,
+                });
+            }
+        };
+        img.src = background.src;
+    }, [background == null ? void 0 : background.src, fitImageDimension, intrinsicSize,]);
+    const size = intrinsicSize ?? fallbackIntrinsicSize;
+    if (fitImageDimension && size) {
+        style2[fitImageDimension] = 'auto';
+        style2.aspectRatio = size.width / size.height;
+    }
     if (background) {
         delete style2.background;
     }
@@ -47408,7 +47494,7 @@ var TextComponent = /* @__PURE__ */ (() => {
             if (this.props.transformTemplate)
                 return this.props.transformTemplate;
             const frame2 = this.frame;
-            const isDOMLayoutAutoSized = _usesDOMRect && (widthType === 2 || heightType === 2);
+            const isDOMLayoutAutoSized = _usesDOMRect && (isAutoDimensionType(widthType) || isAutoDimensionType(heightType));
             const hasTransformTemplate = !frame2 || !RenderTarget.hasRestrictions() || __fromCanvasComponent || isDOMLayoutAutoSized;
             if (hasTransformTemplate)
                 return transformTemplate(this.props.center);

package/esm/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "3.1.0";
+export declare const version = "3.2.0";
 //# sourceMappingURL=version.d.ts.map

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '3.1.0';
+export const version = '3.2.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",

package/src/cli.ts

@@ -39,6 +39,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
         default: true,
     })
     .option('--debug', 'Enable debug logging', { default: false })
+    .option('--metafile', 'Generate meta.json file with build metadata', { default: false })
     .action(async function main(projectId, options) {
         const external_ = options.external
         const allExternal = external_ === true
@@ -71,6 +72,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                     watch,
                     cwd,
                     signal,
+                    metafile: options.metafile,
                 })
                 // console.log('buildContext', buildContext)
                 if (!websiteUrl || !options.watch) {
@@ -140,6 +142,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                 watch,
                 signal: controller.signal,
                 cwd: path.resolve(process.cwd(), config.outDir || 'framer'),
+                metafile: options.metafile,
             })
             await buildContext.dispose?.()
         } catch (error) {