unframer 3.1.0 → 3.2.1

package/src/framer.js

@@ -11214,7 +11214,7 @@ function stagger(duration = 0.1, {
   };
 }
 
-// /:https://app.framerstatic.com/framer.O23R7WUO.mjs
+// /:https://app.framerstatic.com/framer.ZNMFLOLI.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -12649,31 +12649,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 {
@@ -13646,6 +13625,7 @@ function usePopStateHandler(currentRouteId, 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,
@@ -19314,8 +19294,13 @@ 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;
@@ -19326,7 +19311,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,)) {
@@ -19344,13 +19329,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;
@@ -19459,7 +19444,7 @@ var ConstraintValues = {
     const hOpposingPinsOffset = pinnedOffset(values.left, values.right,);
     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,)) {
       switch (values.widthType) {
@@ -19476,6 +19461,7 @@ var ConstraintValues = {
           }
           break;
         case 2:
+        case 5:
           break;
         default:
           assertNever(values.widthType,);
@@ -19484,7 +19470,7 @@ var ConstraintValues = {
     const vOpposingPinsOffset = pinnedOffset(values.top, values.bottom,);
     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,)) {
       switch (values.heightType) {
@@ -19501,6 +19487,7 @@ var ConstraintValues = {
           }
           break;
         case 2:
+        case 5:
           break;
         default:
           assertNever(values.heightType,);
@@ -20565,9 +20552,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
@@ -20592,9 +20580,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
                 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 */
@@ -20718,9 +20704,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 */
   `
@@ -20800,9 +20786,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 */
   `
@@ -20836,7 +20822,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',)
   };
             }
@@ -20877,7 +20862,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',)
   };
             }
@@ -23433,7 +23417,7 @@ var key = 'src';
 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,) {
@@ -23474,6 +23458,34 @@ 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;
+  let url;
+  try {
+    url = new URL(src,);
+  } catch {
+    return void 0;
+  }
+  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'];
 }
@@ -24582,6 +24594,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,
@@ -34332,14 +34349,14 @@ 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__ */ (() => {
@@ -34484,12 +34501,13 @@ function Floating({
     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;
     };
@@ -34498,7 +34516,7 @@ function Floating({
       if (latestEvent) {
         onRender();
       } else {
-        domWriteUpdatePosition(floatingPositionRef, position, calculatedRect,);
+        domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY,);
       }
       initialUpdateHasRun = true;
     };
@@ -34508,6 +34526,13 @@ function Floating({
     };
     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];
@@ -36165,64 +36190,77 @@ 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;
+      } else {
+        sendTrackingEvent('published_site_pageview', eventData, 'eager',);
       }
-      const eventData = await pageviewEventDataPromise;
-      pageviewEventData.current = eventData;
-      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',);
       }
@@ -36231,7 +36269,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';
@@ -36343,6 +36381,7 @@ function Router({
     return (fn) => fn();
   }, [synchronousNavigationOnDesktop,],);
   const isInitialNavigationRef = useRef3(true,);
+  const currentPathnameWithHashRef = useRef3();
   const currentRouteRef = useRef3(initialRoute,);
   const currentPathVariablesRef = useRef3(initialPathVariables,);
   const currentLocaleIdRef = useRef3(initialLocaleId,);
@@ -36438,12 +36477,13 @@ function Router({
     transitionFn,
   ],);
   const setCurrentRouteId = useCallback(
-    (routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL,) => {
+    (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,);
       },);
@@ -36537,10 +36577,22 @@ function Router({
         siteCanonicalURL,
       }, ignorePushStateWrapper,);
     };
+    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,
@@ -36550,10 +36602,18 @@ function Router({
   }, [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,
@@ -36606,7 +36666,7 @@ function Router({
                 /* @__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, {
@@ -44446,7 +44506,11 @@ 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 {
@@ -44460,7 +44524,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 {}
     };
   }
@@ -45481,11 +45545,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:
@@ -45495,11 +45559,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': {
@@ -46047,10 +46111,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,);
@@ -47143,12 +47207,35 @@ var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
     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;
   }
@@ -49408,7 +49495,7 @@ var TextComponent = /* @__PURE__ */ (() => {
       } = this.props;
       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,);
     }
@@ -50646,12 +50733,12 @@ var package_default = {
     '@types/dom-navigation': '^1.0.5',
     '@types/fontfaceobserver': '2.1',
     '@types/google.fonts': '1.0',
-    '@types/node': '22.16',
+    '@types/node': '22.17',
     '@types/react': '18.2',
     '@types/react-dom': '18.2',
     '@types/yargs': '^17.0.33',
-    '@typescript-eslint/eslint-plugin': '^8.36.0',
-    '@typescript-eslint/parser': '^8.36.0',
+    '@typescript-eslint/eslint-plugin': '^8.40.0',
+    '@typescript-eslint/parser': '^8.40.0',
     chalk: '^4.1.2',
     eslint: '^8.57.1',
     'eslint-plugin-framer-studio': 'workspace:*',
@@ -50664,7 +50751,7 @@ var package_default = {
     react: '^18.2.0',
     'react-dom': '^18.2.0',
     semver: '^7.7.1',
-    typescript: '^5.8.3',
+    typescript: '^5.9.2',
     yargs: '^17.7.2',
   },
   peerDependencies: {