unframer 3.1.0 → 3.2.0

package/dist/framer.js

@@ -10959,7 +10959,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
 const react_10 = require("react");
 const react_11 = __importDefault(require("react"));
 const react_12 = require("react");
@@ -12431,33 +12431,10 @@ function useRouteHandler(routeId, preload = false, elementId) {
     const handler = react_11.default.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;
@@ -13361,7 +13338,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;
@@ -18853,9 +18830,15 @@ 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 || {});
 exports.DimensionType = DimensionType;
+function isAutoDimensionType(dimensionType) {
+    if (isUndefined(dimensionType))
+        return false;
+    return dimensionType === 2 || dimensionType === 5;
+}
 function isConstraintSupportingChild(child) {
     if (!isReactChild(child) || !isReactElement(child)) {
         return false;
@@ -18866,7 +18849,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)) {
@@ -18884,13 +18867,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;
@@ -19000,7 +18983,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)) {
@@ -19018,6 +19001,7 @@ var ConstraintValues = {
                     }
                     break;
                 case 2:
+                case 5:
                     break;
                 default:
                     assertNever(values.widthType);
@@ -19027,7 +19011,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)) {
@@ -19045,6 +19029,7 @@ var ConstraintValues = {
                     }
                     break;
                 case 2:
+                case 5:
                     break;
                 default:
                     assertNever(values.heightType);
@@ -20107,9 +20092,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
@@ -20132,7 +20118,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 */
@@ -20248,9 +20234,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 */
     `
@@ -20322,9 +20308,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 */
     `
@@ -20355,7 +20341,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')};
             }
         }
@@ -20392,7 +20377,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')};
             }
         }
@@ -22918,7 +22902,7 @@ var BackgroundImage = {
     isImageObject: function (image) {
         if (!image || typeof image === 'string')
             return false;
-        return key in image;
+        return typeof image === 'object' && key in image;
     },
 };
 exports.BackgroundImage = BackgroundImage;
@@ -22954,6 +22938,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'];
 }
@@ -24068,6 +24077,11 @@ var VisibleFrame = /* @__PURE__ */ (0, react_7.forwardRef)(function VisibleFrame
         ],
     }), 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__ */ (0, jsx_runtime_2.jsxs)(MotionComponent, {
         ...dataProps,
         ...motionProps,
@@ -33419,15 +33433,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__ */ (() => {
@@ -33554,13 +33568,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;
@@ -33571,7 +33586,7 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
                 onRender();
             }
             else {
-                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
+                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY);
             }
             initialUpdateHasRun = true;
         };
@@ -33583,6 +33598,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];
@@ -35155,57 +35178,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 = (0, react_3.useContext)(FormContext);
     const pageviewEventData = (0, react_4.useRef)();
     const skipFirstPageView = (0, react_4.useRef)(true);
     (0, react_2.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');
             }
@@ -35214,7 +35259,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';
@@ -35317,6 +35362,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         return (fn) => fn();
     }, [synchronousNavigationOnDesktop,]);
     const isInitialNavigationRef = (0, react_4.useRef)(true);
+    const currentPathnameWithHashRef = (0, react_4.useRef)();
     const currentRouteRef = (0, react_4.useRef)(initialRoute);
     const currentPathVariablesRef = (0, react_4.useRef)(initialPathVariables);
     const currentLocaleIdRef = (0, react_4.useRef)(initialLocaleId);
@@ -35402,12 +35448,13 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         monitorNextPaintAfterRender,
         transitionFn,
     ]);
-    const setCurrentRouteId = (0, react_3.useCallback)((routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
+    const setCurrentRouteId = (0, react_3.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);
         });
@@ -35493,14 +35540,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 = (0, react_4.useMemo)(() => ({
         navigate,
@@ -35553,7 +35612,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                                 /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.Start, {}),
                                 /* @__PURE__ */ (0, jsx_runtime_1.jsx)(WithLayoutTemplate, {
                                     LayoutTemplate,
-                                    routeId: currentRouteId,
+                                    routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
                                     style: defaultPageStyle,
                                     children: (inLayoutTemplate) => {
                                         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
@@ -43282,7 +43341,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 {
@@ -43296,7 +43357,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 { }
         };
@@ -44378,11 +44439,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:
@@ -44392,11 +44453,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': {
@@ -44921,10 +44982,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);
@@ -45861,10 +45922,35 @@ var styles3 = /* @__PURE__ */ (() => [
 var FormSelect = /* @__PURE__ */ withCSS(Select, styles3, 'framer-lib-form-select');
 exports.FormSelect = FormSelect;
 var Image2 = /* @__PURE__ */ react_11.default.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 = (0, react_4.useMemo)(() => getIntrinsicSizeForBackgroundImage(background), [background,]);
+    const [fallbackIntrinsicSize, setFallbackIntrinsicSize,] = (0, react_4.useState)();
+    react_11.default.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;
     }
@@ -47990,7 +48076,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/dist/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/dist/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = '3.1.0';
+exports.version = '3.2.0';
 //# sourceMappingURL=version.js.map

package/esm/cli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"AAEA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAU,UAAU,EAAE,MAAM,eAAe,CAAA;AAOlD,OAAO,EAAE,eAAe,EAA0B,MAAM,UAAU,CAAA;AAYlE,eAAO,MAAM,GAAG,mBAAkB,CAAA;AAwKlC,MAAM,MAAM,MAAM,GAAG;IACjB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,UAAU,EAAE;QACR,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;KACzB,CAAA;IACD,oBAAoB,CAAC,EAAE;QACnB,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;QACrB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;KAChB,EAAE,CAAA;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;QACrB,IAAI,EAAE,MAAM,CAAA;KACf,EAAE,CAAA;IAEH,OAAO,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAA;QACZ,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,MAAM,CAAA;KACf,EAAE,CAAA;IACH,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,MAAM,CAAC,EAAE,UAAU,EAAE,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B,EAAE,uBAAuB,EAAE,CAAA;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAE/B,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAsB,eAAe,CAAC,EAClC,SAAS,EACT,gBAAiC,EACjC,WAAmB,EACnB,MAAwC,GAC3C;;;;;CAAA;;;;GA4FA"}
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"AAEA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAU,UAAU,EAAE,MAAM,eAAe,CAAA;AAOlD,OAAO,EAAE,eAAe,EAA0B,MAAM,UAAU,CAAA;AAYlE,eAAO,MAAM,GAAG,mBAAkB,CAAA;AA2KlC,MAAM,MAAM,MAAM,GAAG;IACjB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,UAAU,EAAE;QACR,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;KACzB,CAAA;IACD,oBAAoB,CAAC,EAAE;QACnB,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;QACrB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;KAChB,EAAE,CAAA;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;QACrB,IAAI,EAAE,MAAM,CAAA;KACf,EAAE,CAAA;IAEH,OAAO,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAA;QACZ,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,MAAM,CAAA;KACf,EAAE,CAAA;IACH,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,MAAM,CAAC,EAAE,UAAU,EAAE,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B,EAAE,uBAAuB,EAAE,CAAA;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAE/B,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAsB,eAAe,CAAC,EAClC,SAAS,EACT,gBAAiC,EACjC,WAAmB,EACnB,MAAwC,GAC3C;;;;;CAAA;;;;GA4FA"}

package/esm/cli.js

@@ -23,6 +23,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;
@@ -55,6 +56,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                 watch,
                 cwd,
                 signal,
+                metafile: options.metafile,
             });
             // console.log('buildContext', buildContext)
             if (!websiteUrl || !options.watch) {
@@ -112,6 +114,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?.();
     }