unframer 2.6.1 → 2.6.2

package/src/framer.js

@@ -1,4 +1,4 @@
-// https :https://app.framerstatic.com/chunk-DUHOOT7P.js
+// https :https://app.framerstatic.com/chunk-VBDYROES.js
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { jsx, jsxs, } from 'react/jsx-runtime';
@@ -141,8 +141,23 @@ var MotionGlobalConfig = {
   skipAnimations: false,
   useManualTiming: false,
 };
-var LayoutGroupContext = createContext({},);
 var SwitchLayoutGroupContext = createContext({},);
+var LayoutGroupContext = createContext({},);
+var noop = (any) => any;
+var warning = noop;
+var invariant = noop;
+if (false) {
+  warning = (check, message,) => {
+    if (!check && typeof console !== 'undefined') {
+      console.warn(message,);
+    }
+  };
+  invariant = (check, message,) => {
+    if (!check) {
+      throw new Error(message,);
+    }
+  };
+}
 var LazyContext = createContext({
   strict: false,
 },);
@@ -298,7 +313,11 @@ var {
   schedule: microtask,
   cancel: cancelMicrotask,
 } = createRenderBatcher(queueMicrotask, false,);
-function useVisualElement(Component33, visualState, props, createVisualElement2,) {
+function isRefObject(ref,) {
+  return ref && typeof ref === 'object' && Object.prototype.hasOwnProperty.call(ref, 'current',);
+}
+var scheduleHandoffComplete = false;
+function useVisualElement(Component33, visualState, props, createVisualElement2, ProjectionNodeConstructor,) {
   const {
     visualElement: parent,
   } = useContext3(MotionContext,);
@@ -318,12 +337,20 @@ function useVisualElement(Component33, visualState, props, createVisualElement2,
     },);
   }
   const visualElement = visualElementRef.current;
+  const initialLayoutGroupConfig = useContext3(SwitchLayoutGroupContext,);
+  if (
+    visualElement && !visualElement.projection && ProjectionNodeConstructor &&
+    (visualElement.type === 'html' || visualElement.type === 'svg')
+  ) {
+    createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig,);
+  }
   useInsertionEffect(() => {
     visualElement && visualElement.update(props, presenceContext,);
   },);
   const wantsHandoff = useRef(Boolean(props[optimizedAppearDataAttribute] && !window.HandoffComplete,),);
   useIsomorphicLayoutEffect(() => {
     if (!visualElement) return;
+    visualElement.updateFeatures();
     microtask.render(visualElement.render,);
     if (wantsHandoff.current && visualElement.animationState) {
       visualElement.animationState.animateChanges();
@@ -331,25 +358,66 @@ function useVisualElement(Component33, visualState, props, createVisualElement2,
   },);
   useEffect(() => {
     if (!visualElement) return;
-    visualElement.updateFeatures();
     if (!wantsHandoff.current && visualElement.animationState) {
       visualElement.animationState.animateChanges();
     }
     if (wantsHandoff.current) {
       wantsHandoff.current = false;
-      window.HandoffComplete = true;
+      if (!scheduleHandoffComplete) {
+        scheduleHandoffComplete = true;
+        queueMicrotask(completeHandoff,);
+      }
     }
   },);
   return visualElement;
 }
-function isRefObject(ref,) {
-  return ref && typeof ref === 'object' && Object.prototype.hasOwnProperty.call(ref, 'current',);
+function completeHandoff() {
+  window.HandoffComplete = true;
+}
+function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig,) {
+  const {
+    layoutId,
+    layout: layout2,
+    drag: drag2,
+    dragConstraints,
+    layoutScroll,
+    layoutRoot,
+  } = props;
+  visualElement.projection = new ProjectionNodeConstructor(
+    visualElement.latestValues,
+    props['data-framer-portal-id'] ? void 0 : getClosestProjectingNode(visualElement.parent,),
+  );
+  visualElement.projection.setOptions({
+    layoutId,
+    layout: layout2,
+    alwaysMeasureLayout: Boolean(drag2,) || dragConstraints && isRefObject(dragConstraints,),
+    visualElement,
+    scheduleRender: () => visualElement.scheduleRender(),
+    /**
+     * TODO: Update options in an effect. This could be tricky as it'll be too late
+     * to update by the time layout animations run.
+     * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+     * ensuring it gets called if there's no potential layout animations.
+     */
+    animationType: typeof layout2 === 'string' ? layout2 : 'both',
+    initialPromotionConfig,
+    layoutScroll,
+    layoutRoot,
+  },);
+}
+function getClosestProjectingNode(visualElement,) {
+  if (!visualElement) return void 0;
+  return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent,);
 }
 function useMotionRef(visualState, visualElement, externalRef,) {
   return useCallback((instance) => {
     instance && visualState.mount && visualState.mount(instance,);
     if (visualElement) {
-      instance ? visualElement.mount(instance,) : visualElement.unmount();
+      if (instance) {
+        visualElement.mount(instance,);
+      } else {
+        visualElement.unmount();
+      }
     }
     if (externalRef) {
       if (typeof externalRef === 'function') {
@@ -452,18 +520,16 @@ function createMotionComponent({
     const context = useCreateMotionContext(props,);
     const visualState = useVisualState2(props, isStatic,);
     if (!isStatic && isBrowser) {
-      context.visualElement = useVisualElement(Component33, visualState, configAndProps, createVisualElement2,);
-      const initialLayoutGroupConfig = useContext3(SwitchLayoutGroupContext,);
-      const isStrict = useContext3(LazyContext,).strict;
-      if (context.visualElement) {
-        MeasureLayout2 = context.visualElement.loadFeatures(
-          // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-          configAndProps,
-          isStrict,
-          preloadedFeatures2,
-          initialLayoutGroupConfig,
-        );
-      }
+      useStrictMode(configAndProps, preloadedFeatures2,);
+      const layoutProjection = getProjectionFunctionality(configAndProps,);
+      MeasureLayout2 = layoutProjection.MeasureLayout;
+      context.visualElement = useVisualElement(
+        Component33,
+        visualState,
+        configAndProps,
+        createVisualElement2,
+        layoutProjection.ProjectionNode,
+      );
     }
     return jsxs(MotionContext.Provider, {
       value: context,
@@ -495,6 +561,33 @@ function useLayoutId({
   const layoutGroupId = useContext3(LayoutGroupContext,).id;
   return layoutGroupId && layoutId !== void 0 ? layoutGroupId + '-' + layoutId : layoutId;
 }
+function useStrictMode(configAndProps, preloadedFeatures2,) {
+  const isStrict = useContext3(LazyContext,).strict;
+  if (false) {
+    const strictMessage =
+      'You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.';
+    configAndProps.ignoreStrict ? warning(false, strictMessage,) : invariant(false, strictMessage,);
+  }
+}
+function getProjectionFunctionality(props,) {
+  const {
+    drag: drag2,
+    layout: layout2,
+  } = featureDefinitions;
+  if (!drag2 && !layout2) return {};
+  const combined = {
+    ...drag2,
+    ...layout2,
+  };
+  return {
+    MeasureLayout:
+      (drag2 === null || drag2 === void 0 ? void 0 : drag2.isEnabled(props,)) ||
+        (layout2 === null || layout2 === void 0 ? void 0 : layout2.isEnabled(props,))
+        ? combined.MeasureLayout
+        : void 0,
+    ProjectionNode: combined.ProjectionNode,
+  };
+}
 var scaleCorrectors = {};
 function addScaleCorrector(correctors,) {
   Object.assign(scaleCorrectors, correctors,);
@@ -568,6 +661,9 @@ var singleColorRegex =
 function isString(v,) {
   return typeof v === 'string';
 }
+function isNullish(v,) {
+  return v == null;
+}
 var createUnitType = (unit) => ({
   test: (v) => isString(v,) && v.endsWith(unit,) && v.split(' ',).length === 1,
   parse: parseFloat,
@@ -752,7 +848,6 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues,)
   }
   return values;
 }
-var noop = (any) => any;
 var {
   schedule: frame,
   cancel: cancelFrame,
@@ -830,20 +925,6 @@ function isDragActive() {
   openGestureLock();
   return false;
 }
-var warning = noop;
-var invariant = noop;
-if (false) {
-  warning = (check, message,) => {
-    if (!check && typeof console !== 'undefined') {
-      console.warn(message,);
-    }
-  };
-  invariant = (check, message,) => {
-    if (!check) {
-      throw new Error(message,);
-    }
-  };
-}
 var number = {
   test: (v) => typeof v === 'number',
   parse: parseFloat,
@@ -859,7 +940,8 @@ var scale = {
 };
 var isColorString = (type, testProp,) => (v) => {
   return Boolean(
-    isString(v,) && singleColorRegex.test(v,) && v.startsWith(type,) || testProp && Object.prototype.hasOwnProperty.call(v, testProp,),
+    isString(v,) && singleColorRegex.test(v,) && v.startsWith(type,) ||
+      testProp && !isNullish(v,) && Object.prototype.hasOwnProperty.call(v, testProp,),
   );
 };
 var splitColor = (aName, bName, cName,) => (v) => {
@@ -3018,7 +3100,7 @@ var MotionValue = class {
    * @internal
    */
   constructor(init, options = {},) {
-    this.version = '11.2.10';
+    this.version = '11.2.13';
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true,) => {
@@ -3678,7 +3760,7 @@ function animateList(visualElement,) {
 }
 function createAnimationState(visualElement,) {
   let animate22 = animateList(visualElement,);
-  const state = createState();
+  let state = createState();
   let isInitialRender = true;
   const buildResolvedTypeValues = (type) => (acc, definition,) => {
     var _a;
@@ -3842,6 +3924,10 @@ function createAnimationState(visualElement,) {
     setActive,
     setAnimateFunction,
     getState: () => state,
+    reset: () => {
+      state = createState();
+      isInitialRender = true;
+    },
   };
 }
 function checkVariantsDidChange(prev, next,) {
@@ -3892,9 +3978,8 @@ var AnimationFeature = class extends Feature {
     const {
       animate: animate22,
     } = this.node.getProps();
-    this.unmount();
     if (isAnimationControls(animate22,)) {
-      this.unmount = animate22.subscribe(this.node,);
+      this.unmountControls = animate22.subscribe(this.node,);
     }
   }
   /**
@@ -3914,7 +3999,11 @@ var AnimationFeature = class extends Feature {
       this.updateAnimationControlsSubscription();
     }
   }
-  unmount() {}
+  unmount() {
+    var _a;
+    this.node.animationState.reset();
+    (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this,);
+  }
 };
 var id = 0;
 var ExitAnimationFeature = class extends Feature {
@@ -4101,8 +4190,8 @@ function updateMotionValuesFromProps(element, next, prev,) {
       }
       if (false) {
         warnOnce(
-          nextValue.version === '11.2.10',
-          `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.10 may not work as expected.`,
+          nextValue.version === '11.2.13',
+          `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.13 may not work as expected.`,
         );
       }
     } else if (isMotionValue(prevValue,)) {
@@ -4141,8 +4230,6 @@ function updateMotionValuesFromProps(element, next, prev,) {
 }
 var valueTypes = [...dimensionValueTypes, color, complex,];
 var findValueType = (v) => valueTypes.find(testValueType(v,),);
-var featureNames = Object.keys(featureDefinitions,);
-var numFeatures = featureNames.length;
 var propEventHandlers = [
   'AnimationStart',
   'AnimationComplete',
@@ -4153,10 +4240,6 @@ var propEventHandlers = [
   'LayoutAnimationComplete',
 ];
 var numVariantProps = variantProps.length;
-function getClosestProjectingNode(visualElement,) {
-  if (!visualElement) return void 0;
-  return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent,);
-}
 var VisualElement = class {
   /**
    * This method takes React props and returns found MotionValues. For example, HTML
@@ -4264,7 +4347,6 @@ var VisualElement = class {
     this.update(this.props, this.presenceContext,);
   }
   unmount() {
-    var _a;
     visualElementStore.delete(this.current,);
     this.projection && this.projection.unmount();
     cancelFrame(this.notifyUpdate,);
@@ -4276,7 +4358,11 @@ var VisualElement = class {
       this.events[key7].clear();
     }
     for (const key7 in this.features) {
-      (_a = this.features[key7]) === null || _a === void 0 ? void 0 : _a.unmount();
+      const feature = this.features[key7];
+      if (feature) {
+        feature.unmount();
+        feature.isMounted = false;
+      }
     }
     this.current = null;
   }
@@ -4302,83 +4388,28 @@ var VisualElement = class {
     }
     return this.sortInstanceNodePosition(this.current, other.current,);
   }
-  loadFeatures(
-    {
-      children,
-      ...renderedProps
-    },
-    isStrict,
-    preloadedFeatures2,
-    initialLayoutGroupConfig,
-  ) {
-    let ProjectionNodeConstructor;
-    let MeasureLayout2;
-    if (false) {
-      const strictMessage =
-        'You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.';
-      renderedProps.ignoreStrict ? warning(false, strictMessage,) : invariant(false, strictMessage,);
-    }
-    for (let i = 0; i < numFeatures; i++) {
-      const name = featureNames[i];
+  updateFeatures() {
+    let key7 = 'animation';
+    for (key7 in featureDefinitions) {
+      const featureDefinition = featureDefinitions[key7];
+      if (!featureDefinition) continue;
       const {
         isEnabled,
         Feature: FeatureConstructor,
-        ProjectionNode,
-        MeasureLayout: MeasureLayoutComponent,
-      } = featureDefinitions[name];
-      if (ProjectionNode) ProjectionNodeConstructor = ProjectionNode;
-      if (isEnabled(renderedProps,)) {
-        if (!this.features[name] && FeatureConstructor) {
-          this.features[name] = new FeatureConstructor(this,);
-        }
-        if (MeasureLayoutComponent) {
-          MeasureLayout2 = MeasureLayoutComponent;
+      } = featureDefinition;
+      if (!this.features[key7] && FeatureConstructor && isEnabled(this.props,)) {
+        this.features[key7] = new FeatureConstructor(this,);
+      }
+      if (this.features[key7]) {
+        const feature = this.features[key7];
+        if (feature.isMounted) {
+          feature.update();
+        } else {
+          feature.mount();
+          feature.isMounted = true;
         }
       }
     }
-    if ((this.type === 'html' || this.type === 'svg') && !this.projection && ProjectionNodeConstructor) {
-      const {
-        layoutId,
-        layout: layout2,
-        drag: drag2,
-        dragConstraints,
-        layoutScroll,
-        layoutRoot,
-      } = renderedProps;
-      this.projection = new ProjectionNodeConstructor(
-        this.latestValues,
-        renderedProps['data-framer-portal-id'] ? void 0 : getClosestProjectingNode(this.parent,),
-      );
-      this.projection.setOptions({
-        layoutId,
-        layout: layout2,
-        alwaysMeasureLayout: Boolean(drag2,) || dragConstraints && isRefObject(dragConstraints,),
-        visualElement: this,
-        scheduleRender: () => this.scheduleRender(),
-        /**
-         * TODO: Update options in an effect. This could be tricky as it'll be too late
-         * to update by the time layout animations run.
-         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-         * ensuring it gets called if there's no potential layout animations.
-         */
-        animationType: typeof layout2 === 'string' ? layout2 : 'both',
-        initialPromotionConfig: initialLayoutGroupConfig,
-        layoutScroll,
-        layoutRoot,
-      },);
-    }
-    return MeasureLayout2;
-  }
-  updateFeatures() {
-    for (const key7 in this.features) {
-      const feature = this.features[key7];
-      if (feature.isMounted) {
-        feature.update();
-      } else {
-        feature.mount();
-        feature.isMounted = true;
-      }
-    }
   }
   triggerBuild() {
     this.build(this.renderState, this.latestValues, this.options, this.props,);
@@ -6127,7 +6158,7 @@ var VisualElementDragControls = class {
       const {
         dragConstraints,
       } = this.getProps();
-      if (isRefObject(dragConstraints,)) {
+      if (isRefObject(dragConstraints,) && dragConstraints.current) {
         this.constraints = this.resolveRefConstraints();
       }
     };
@@ -6139,7 +6170,7 @@ var VisualElementDragControls = class {
       projection.root && projection.root.updateScroll();
       projection.updateLayout();
     }
-    measureDragConstraints();
+    frame.read(measureDragConstraints,);
     const stopResizeListener = addDomEvent(window, 'resize', () => this.scalePositionWithinConstraints(),);
     const stopLayoutUpdateListener = projection.addEventListener('didUpdate', ({
       delta,
@@ -6717,7 +6748,7 @@ function isOptimisedAppearTree(projectionNode,) {
     return false;
   }
 }
-function createProjectionNode({
+function createProjectionNode2({
   attachResizeListener,
   defaultParent,
   measureScroll,
@@ -6750,6 +6781,7 @@ function createProjectionNode({
       this.eventHandlers = /* @__PURE__ */ new Map();
       this.hasTreeAnimated = false;
       this.updateScheduled = false;
+      this.scheduleUpdate = () => this.update();
       this.projectionUpdateScheduled = false;
       this.checkUpdateFailed = () => {
         if (this.isUpdating) {
@@ -6973,7 +7005,7 @@ function createProjectionNode({
     didUpdate() {
       if (!this.updateScheduled) {
         this.updateScheduled = true;
-        microtask.read(() => this.update());
+        microtask.read(this.scheduleUpdate,);
       }
     }
     clearAllSnapshots() {
@@ -7041,7 +7073,7 @@ function createProjectionNode({
     }
     resetTransform() {
       if (!resetTransform) return;
-      const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+      const isResetRequested = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout;
       const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta,);
       const transformTemplate2 = this.getTransformTemplate();
       const transformTemplateValue = transformTemplate2 ? transformTemplate2(this.latestValues, '',) : void 0;
@@ -7800,7 +7832,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout2,) {
   return animationType === 'position' ||
     animationType === 'preserve-aspect' && !isNear(aspectRatio(snapshot,), aspectRatio(layout2,), 0.2,);
 }
-var DocumentProjectionNode = createProjectionNode({
+var DocumentProjectionNode = createProjectionNode2({
   attachResizeListener: (ref, notify2,) => addDomEvent(ref, 'resize', notify2,),
   measureScroll: () => ({
     x: document.documentElement.scrollLeft || document.body.scrollLeft,
@@ -7811,7 +7843,7 @@ var DocumentProjectionNode = createProjectionNode({
 var rootProjectionNode = {
   current: void 0,
 };
-var HTMLProjectionNode = createProjectionNode({
+var HTMLProjectionNode = createProjectionNode2({
   measureScroll: (instance) => ({
     x: instance.scrollLeft,
     y: instance.scrollTop,
@@ -9996,7 +10028,7 @@ var cancelSync = stepsOrder.reduce((acc, key7,) => {
   return acc;
 }, {},);
 
-// https :https://app.framerstatic.com/framer.K4XHQ4DX.js
+// https :https://app.framerstatic.com/framer.E3XQPBSV.js
 
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -10644,16 +10676,16 @@ var require_browser = __commonJS({
     process5.argv = [];
     process5.version = '';
     process5.versions = {};
-    function noop2() {}
-    process5.on = noop2;
-    process5.addListener = noop2;
-    process5.once = noop2;
-    process5.off = noop2;
-    process5.removeListener = noop2;
-    process5.removeAllListeners = noop2;
-    process5.emit = noop2;
-    process5.prependListener = noop2;
-    process5.prependOnceListener = noop2;
+    function noop3() {}
+    process5.on = noop3;
+    process5.addListener = noop3;
+    process5.once = noop3;
+    process5.off = noop3;
+    process5.removeListener = noop3;
+    process5.removeAllListeners = noop3;
+    process5.emit = noop3;
+    process5.prependListener = noop3;
+    process5.prependOnceListener = noop3;
     process5.listeners = function (name,) {
       return [];
     };
@@ -11938,23 +11970,42 @@ function getRouteElementId(route, hash2,) {
   return void 0;
 }
 function isBot(userAgent,) {
-  return /bot|Mediapartners-Google|Google-PageRenderer|yandex|ia_archiver/iu.test(userAgent,);
+  return /bot|-google|google-|yandex|ia_archiver/iu.test(userAgent,);
 }
-function yieldToMain(isHighPriority,) {
+function yieldToMain(options,) {
   if ('scheduler' in window) {
-    const options = {
-      priority: isHighPriority ? 'user-blocking' : 'user-visible',
-    };
     if ('yield' in scheduler) return scheduler.yield(options,);
     if ('postTask' in scheduler) return scheduler.postTask(() => {}, options,);
   }
-  if (isHighPriority) {
+  if ((options === null || options === void 0 ? void 0 : options.priority) === 'user-blocking') {
     return Promise.resolve();
   }
   return new Promise((resolve) => {
-    setTimeout(resolve, 0,);
+    setTimeout(resolve,);
+  },);
+}
+async function yieldBefore(fn, options,) {
+  await yieldToMain(options,);
+  return fn();
+}
+function interactionResponse(options, fallback = true,) {
+  return new Promise((resolve) => {
+    if (fallback) setTimeout(resolve, 100,);
+    requestAnimationFrame(() => {
+      void yieldBefore(resolve, options,);
+    },);
   },);
 }
+function useAfterPaintEffect(fn, deps, options,) {
+  useLayoutEffect(() => {
+    const runAfterPaint = async () => {
+      await interactionResponse(options, false,);
+      fn();
+    };
+    void runAfterPaint();
+  }, deps,);
+}
+var noop2 = () => {};
 async function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils,) {
   var _a, _b, _c;
   let resultPath = path;
@@ -12394,23 +12445,46 @@ function createViewTransitionStylesheet({
   document.head.appendChild(styleElement,);
 }
 function removeViewTransitionStylesheet() {
-  frame.render(() => {
-    const element = document.getElementById(VIEW_TRANSITION_STYLES_ID,);
-    if (element) {
-      document.head.removeChild(element,);
-    }
+  requestIdleCallback(() => {
+    frame.render(() => {
+      performance.mark('framer-vt-remove',);
+      const element = document.getElementById(VIEW_TRANSITION_STYLES_ID,);
+      if (element) {
+        document.head.removeChild(element,);
+      }
+    },);
   },);
 }
 function supportsViewTransitions() {
   return Boolean(document.startViewTransition,);
 }
-function startViewTransition(updateView, effect,) {
+function addVTStylesheetAfterInRender(effect,) {
+  return new Promise((resolve) => {
+    frame.render(() => {
+      performance.mark('framer-vt-style',);
+      createViewTransitionStylesheet(effect,);
+      resolve();
+    },);
+  },);
+}
+async function startViewTransition(updateView, effect, signal,) {
   if (!supportsViewTransitions()) {
-    return void updateView();
+    void updateView();
+    return;
   }
-  createViewTransitionStylesheet(effect,);
-  const transition = document.startViewTransition(updateView,);
-  Promise.all([transition.ready, transition.finished,],).then(removeViewTransitionStylesheet,).catch(() => {},);
+  await addVTStylesheetAfterInRender(effect,);
+  if (signal === null || signal === void 0 ? void 0 : signal.aborted) return;
+  performance.mark('framer-vt',);
+  const transition = document.startViewTransition(() => {
+    performance.mark('framer-vt-freeze',);
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) return;
+    else signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', () => transition.skipTransition(),);
+    void updateView();
+  },);
+  Promise.all([transition.ready, transition.finished,],).then(() => {
+    performance.mark('framer-vt-unfreeze',);
+    removeViewTransitionStylesheet();
+  },).catch(() => {},);
   return transition;
 }
 function useViewTransition() {
@@ -12422,7 +12496,7 @@ function useViewTransition() {
       resolveHasPainted.current = void 0;
     }
   },);
-  return useCallback((currentRouteId, nextRouteId, update,) => {
+  return useCallback((currentRouteId, nextRouteId, update, yieldBeforeFreezePeriod, signal,) => {
     const pageEffect = getPageEffectForRoute(currentRouteId, nextRouteId, sitePageEffects,);
     if (pageEffect) {
       const hasPainted = new Promise((resolve) => {
@@ -12432,20 +12506,34 @@ function useViewTransition() {
         update();
         await hasPainted;
       };
+      const yieldBeforeViewTransition = async () => {
+        await interactionResponse({
+          priority: 'user-blocking',
+          signal,
+        }, false,).catch(noop2,);
+        return startViewTransition(asyncUpdate, pageEffect, signal,);
+      };
+      if (yieldBeforeFreezePeriod) return yieldBeforeViewTransition();
       return startViewTransition(asyncUpdate, pageEffect,);
     } else {
       return update();
     }
   }, [sitePageEffects,],);
 }
-function pushRouteState(routeId, route, {
-  currentRoutePath,
-  currentPathVariables,
-  hash: hash2,
-  pathVariables,
-  localeId,
-  preserveQueryParams,
-},) {
+async function pushRouteState(
+  routeId,
+  route,
+  {
+    currentRoutePath,
+    currentPathVariables,
+    hash: hash2,
+    pathVariables,
+    localeId,
+    preserveQueryParams,
+  },
+  enableAsyncURLUpdate = false,
+  ignorePushStateWrapper = false,
+) {
   const {
     path,
   } = route;
@@ -12458,12 +12546,18 @@ function pushRouteState(routeId, route, {
       pathVariables,
       preserveQueryParams,
     },);
-    pushHistoryState({
-      routeId,
-      hash: hash2,
-      pathVariables,
-      localeId,
-    }, newPath,);
+    const urlUpdatePromise = pushHistoryState(
+      {
+        routeId,
+        hash: hash2,
+        pathVariables,
+        localeId,
+      },
+      newPath,
+      enableAsyncURLUpdate,
+      ignorePushStateWrapper,
+    );
+    if (!enableAsyncURLUpdate) await urlUpdatePromise;
   } catch {}
 }
 function isHistoryState(data2,) {
@@ -12471,6 +12565,7 @@ function isHistoryState(data2,) {
   return isObject(data2,) && isString2(data2[routeIdKey],);
 }
 function replaceHistoryState(data2, url,) {
+  performance.mark('framer-history-replace',);
   window.history.replaceState(
     data2,
     // Second arg is unused and exists for historical purposes only
@@ -12479,8 +12574,16 @@ function replaceHistoryState(data2, url,) {
     url,
   );
 }
-function pushHistoryState(data2, url,) {
-  window.history.pushState(
+async function pushHistoryState(data2, url, awaitPaintBeforeUpdate = false, ignorePushStateWrapper = false,) {
+  if (awaitPaintBeforeUpdate) {
+    await interactionResponse({
+      priority: 'user-blocking',
+    },);
+  }
+  performance.mark('framer-history-push',);
+  const pushState = ignorePushStateWrapper ? window.history.__proto__.pushState : window.history.pushState;
+  pushState.call(
+    window.history,
     data2,
     // Second arg is unused and exists for historical purposes only
     // https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#unused
@@ -12494,8 +12597,9 @@ function useReplaceInitialState({
   initialPathVariables,
   initialLocaleId,
 },) {
-  React4.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (disabled) return;
+    performance.mark('framer-history-set-initial-state',);
     replaceHistoryState({
       routeId,
       pathVariables: initialPathVariables,
@@ -12505,8 +12609,8 @@ function useReplaceInitialState({
 }
 function usePopStateHandler(currentRouteId, setCurrentRouteId,) {
   const startViewTransition2 = useViewTransition();
-  const viewTransitionReady = React4.useRef(void 0,);
-  const popStateHandler = React4.useCallback(({
+  const viewTransitionReady = useRef(void 0,);
+  const popStateHandler = useCallback(async ({
     state,
   },) => {
     var _a, _b, _c;
@@ -12528,7 +12632,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId,) {
         true,
       );
     };
-    const transition = startViewTransition2(currentRouteId.current, routeId, changeRoute,);
+    const transition = await startViewTransition2(currentRouteId.current, routeId, changeRoute, false,);
     if (transition) {
       void transition.updateCallbackDone.then((_a = viewTransitionReady.current) === null || _a === void 0 ? void 0 : _a.resolve,).catch(
         (_b = viewTransitionReady.current) === null || _b === void 0 ? void 0 : _b.reject,
@@ -12551,7 +12655,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId,) {
       scroll: 'after-transition',
     },);
   }, [],);
-  React4.useEffect(() => {
+  useEffect(() => {
     var _a;
     window.addEventListener('popstate', popStateHandler,);
     (_a = window.navigation) === null || _a === void 0 ? void 0 : _a.addEventListener('navigate', traversalHandler,);
@@ -12624,21 +12728,15 @@ async function switchLocale(options,) {
   if (!result) return;
   try {
     localStorage.setItem('preferredLocale', options.nextLocale.code,);
-  } catch (error) {}
+  } catch {}
   try {
-    if (typeof result.path !== 'string') {
+    if (!isString2(result.path,)) {
       throw new Error('Expected result.path to be a string',);
     }
     if (result.isMissingInLocale) {
       const hasRedirect = await handleRedirectForMissingSlugs(options.route, result.pathVariables, options.nextLocale,);
       if (hasRedirect) return;
     }
-    pushHistoryState({
-      routeId: options.routeId,
-      pathVariables: result.pathVariables,
-      localeId: options.nextLocale.id,
-      paginationInfo: window.history.state.paginationInfo,
-    }, result.path,);
   } catch {}
   return result;
 }
@@ -12656,14 +12754,193 @@ function pushLoadMoreHistory(hash2, paginationInfo,) {
     },);
   } catch {}
 }
-function isSamePage(a, b,) {
-  if (a.routeId !== b.routeId) return false;
-  if (a.pathVariables === b.pathVariables) return true;
-  const aPathVariables = a.pathVariables || {};
-  const bPathVariables = b.pathVariables || {};
-  return aPathVariables.length === bPathVariables.length &&
-    Object.keys(aPathVariables,).every((key7) => aPathVariables[key7] === bPathVariables[key7]);
+function useNativeLoadingSpinner() {
+  const navigationPromise = useRef(Promise.resolve(),);
+  const navigationController = useRef();
+  const navigateListener = useCallback((navigateEvent) => {
+    if (
+      // we want to intercept non-user triggered replaceState and pushState while the navigation is on-going
+      // but we don't want to intercept e.g. 'traverse' (= browser back/forward) events, as we do this in the usePopStateHandler listener.
+      navigateEvent.userInitiated
+    ) return;
+    const controller = navigationController.current;
+    controller === null || controller === void 0 ? void 0 : controller.signal.addEventListener('abort', () => {
+      controller.abort('user aborted',);
+    },);
+    navigateEvent.intercept({
+      handler: () => navigationPromise.current,
+    },);
+  }, [],);
+  return useCallback((promise, updateURL, controller,) => {
+    if (!window.navigation) {
+      void updateURL();
+      return;
+    }
+    navigationPromise.current = promise;
+    navigationController.current = controller;
+    window.navigation.addEventListener('navigate', navigateListener,);
+    void updateURL(true,);
+    promise.catch(noop2,).finally(() => {
+      window.navigation.removeEventListener('navigate', navigateListener,);
+    },);
+  }, [navigateListener,],);
 }
+function measureSafe(name, start, end,) {
+  try {
+    performance.measure(name, start, end,);
+  } catch (e) {
+    console.warn(`Could not measure ${name}`, e,);
+  }
+}
+var shouldMark = false;
+function markHydrationStart() {
+  shouldMark = true;
+  performance.mark('framer-hydration-start',);
+}
+var routerHydrationInsertionEffectStartHasRun = false;
+var routerHydrationLayoutEffectStartHasRun = false;
+var routerHydrationEffectStartHasRun = false;
+function useMarkRouterEffects() {
+  const hydrationMarkPrefix = 'framer-hydration-router';
+  useInsertionEffect(() => {
+    if (routerHydrationInsertionEffectStartHasRun || !shouldMark) return;
+    routerHydrationInsertionEffectStartHasRun = true;
+    performance.mark(`${hydrationMarkPrefix}-insertion-effect`,);
+  }, [],);
+  useLayoutEffect(() => {
+    if (routerHydrationLayoutEffectStartHasRun || !shouldMark) return;
+    routerHydrationLayoutEffectStartHasRun = true;
+    performance.mark(`${hydrationMarkPrefix}-layout-effect`,);
+  }, [],);
+  useEffect(() => {
+    if (routerHydrationEffectStartHasRun || !shouldMark) return;
+    routerHydrationEffectStartHasRun = true;
+    performance.mark(`${hydrationMarkPrefix}-effect`,);
+  }, [],);
+}
+var hydrationInsertionEffectStartHasRun = false;
+var hydrationLayoutEffectStartHasRun = false;
+var hydrationEffectStartHasRun = false;
+function useMarkSuspenseEffectsStart() {
+  const hydrationMarkPrefix = 'framer-hydration-';
+  const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
+  const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
+  const hydrationBrowserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
+  const hydrationRenderEnd = `${hydrationMarkPrefix}render-end`;
+  useInsertionEffect(() => {
+    if (hydrationInsertionEffectStartHasRun || !shouldMark) return;
+    hydrationInsertionEffectStartHasRun = true;
+    performance.mark(hydrationRenderEnd,);
+    measureSafe(`${hydrationMarkPrefix}render`, `${hydrationMarkPrefix}start`, hydrationRenderEnd,);
+    performance.mark(`${hydrationMarkPrefix}insertion-effects-start`,);
+  }, [],);
+  useLayoutEffect(() => {
+    if (hydrationLayoutEffectStartHasRun || !shouldMark) return;
+    hydrationLayoutEffectStartHasRun = true;
+    performance.mark(`${hydrationMarkPrefix}layout-effects-start`,);
+    requestAnimationFrame(() => {
+      var _a, _b, _c;
+      performance.mark(hydrationBrowserRenderStart,);
+      measureSafe(
+        `${hydrationMarkPrefix}uho`,
+        (_b = (_a = performance.getEntriesByName(hydrationEffectsEnd,)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null &&
+          _b !== void 0
+          ? _b
+          : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd,)[0]) === null || _c === void 0
+          ? void 0
+          : _c.name,
+        hydrationBrowserRenderStart,
+      );
+    },);
+  }, [],);
+  useEffect(() => {
+    var _a;
+    if (hydrationEffectStartHasRun || !shouldMark) return;
+    hydrationEffectStartHasRun = true;
+    const hydrationEffectsStart = `${hydrationMarkPrefix}effects-start`;
+    performance.mark(hydrationEffectsStart,);
+    const hasPaintStarted = (_a = performance.getEntriesByName(hydrationBrowserRenderStart,)[0]) === null || _a === void 0
+      ? void 0
+      : _a.name;
+    if (!hasPaintStarted) {
+      measureSafe(`${hydrationMarkPrefix}commit`, hydrationLayoutEffectsEnd, hydrationEffectsStart,);
+      performance.mark(`${hydrationMarkPrefix}effects-sync`,);
+    }
+  }, [],);
+  return null;
+}
+var hydrationInsertionEffectHasRun = false;
+var hydrationLayoutEffectHasRun = false;
+var hydrationEffectHasRun = false;
+var hydrationPaintEffectHasRun = false;
+function useMarkSuspenseEffectEnd() {
+  const hydrationMarkPrefix = 'framer-hydration-';
+  const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
+  const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
+  const hydrationBrowserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
+  const hydrationStart = `${hydrationMarkPrefix}start`;
+  const hydrationInsertionEffectsEnd = `${hydrationMarkPrefix}insertion-effects-end`;
+  const hydrationFP = `${hydrationMarkPrefix}first-paint`;
+  const hydrationAnimationFrameEnd = `${hydrationMarkPrefix}browser-raf-end`;
+  useInsertionEffect(() => {
+    if (hydrationInsertionEffectHasRun || !shouldMark) return;
+    hydrationInsertionEffectHasRun = true;
+    performance.mark(hydrationInsertionEffectsEnd,);
+    measureSafe(`${hydrationMarkPrefix}insertion-effects`, `${hydrationMarkPrefix}insertion-effects-start`, hydrationInsertionEffectsEnd,);
+  }, [],);
+  useLayoutEffect(() => {
+    if (hydrationLayoutEffectHasRun || !shouldMark) return;
+    hydrationLayoutEffectHasRun = true;
+    performance.mark(hydrationLayoutEffectsEnd,);
+    measureSafe(`${hydrationMarkPrefix}layout-effects`, `${hydrationMarkPrefix}layout-effects-start`, hydrationLayoutEffectsEnd,);
+    requestAnimationFrame(() => {
+      performance.mark(hydrationAnimationFrameEnd,);
+      measureSafe(`${hydrationMarkPrefix}raf`, hydrationBrowserRenderStart, hydrationAnimationFrameEnd,);
+    },);
+  }, [],);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (hydrationEffectHasRun || !shouldMark) return;
+    hydrationEffectHasRun = true;
+    performance.mark(hydrationEffectsEnd,);
+    measureSafe(
+      `${hydrationMarkPrefix}effects`,
+      (_b = (_a = performance.getEntriesByName(hydrationFP,)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0
+        ? _b
+        : (_c = performance.getEntriesByName(`${hydrationMarkPrefix}effects-start`,)[0]) === null || _c === void 0
+        ? void 0
+        : _c.name,
+      hydrationEffectsEnd,
+    );
+  }, [],);
+  useAfterPaintEffect(
+    () => {
+      if (hydrationPaintEffectHasRun || !shouldMark) return;
+      hydrationPaintEffectHasRun = true;
+      performance.mark(hydrationFP,);
+      measureSafe(`${hydrationMarkPrefix}time-to-first-paint`, hydrationStart, hydrationFP,);
+      measureSafe(`${hydrationMarkPrefix}browser-render`, hydrationAnimationFrameEnd, hydrationFP,);
+    },
+    [],
+    // user-blocking ensures we get the correct timings here. Other priorites might delay this effect a little bit.
+    {
+      priority: 'user-blocking',
+    },
+  );
+  return null;
+}
+function MarkSuspenseEffectsStart() {
+  useMarkSuspenseEffectsStart();
+  return null;
+}
+function MarkSuspenseEffectsEnd() {
+  useMarkSuspenseEffectEnd();
+  return null;
+}
+var MarkSuspenseEffects = {
+  Start: MarkSuspenseEffectsStart,
+  End: MarkSuspenseEffectsEnd,
+};
 var eventsToStop = [
   'mousedown',
   'mouseup',
@@ -12702,109 +12979,43 @@ var stopFn = (event) => {
   event.stopPropagation();
   performance.mark('framer-react-event-handling-prevented',);
 };
-if (typeof window !== 'undefined') {
-  window.__FRAMER_TURN_OFF_REACT_EVENT_HANDLING__ = function () {
-    if (!eventsToStop) return;
-    const options = {
-      capture: true,
-    };
-    eventsToStop.forEach((event) => document.body.addEventListener(event, stopFn, options,));
-    window.__FRAMER_TURN_OFF_REACT_EVENT_HANDLING__ = void 0;
-  };
-}
-function turnOnReactEventHandling() {
+var shouldTurnOnEventHandling = false;
+function turnOffReactEventHandling() {
   if (!eventsToStop) return;
+  shouldTurnOnEventHandling = true;
+  performance.mark('framer-react-event-handling-start',);
   const options = {
     capture: true,
   };
-  eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options,));
-  eventsToStop = void 0;
+  eventsToStop.forEach((event) => document.body.addEventListener(event, stopFn, options,));
 }
-function measureSafe(name, start, end,) {
-  try {
-    performance.measure(name, start, end,);
-  } catch (e) {
-    console.warn(`Could not measure ${name}`, e,);
-  }
-}
-var hydrationEffectHasRun = false;
-var hydrationInsertionEffectHasRun = false;
-var hydrationLayoutEffectHasRun = false;
-function OnHydrationEnd({
-  addHydrationMarkers,
-  turnOffEventHandlerHack,
-},) {
-  const hydrationMarkPrefix = 'framer-hydration-';
-  const hydrationStart = `${hydrationMarkPrefix}start`;
-  const hydrationRenderEnd = `${hydrationMarkPrefix}render-end`;
-  const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
-  const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
-  const hydrationFP = `${hydrationMarkPrefix}first-paint`;
-  useInsertionEffect(() => {
-    if (hydrationInsertionEffectHasRun) return;
-    hydrationInsertionEffectHasRun = true;
-    if (addHydrationMarkers) {
-      performance.mark(hydrationRenderEnd,);
-      measureSafe(`${hydrationMarkPrefix}render`, hydrationStart, hydrationRenderEnd,);
-    }
-  }, [],);
-  useLayoutEffect(() => {
-    if (hydrationLayoutEffectHasRun) return;
-    hydrationLayoutEffectHasRun = true;
-    if (addHydrationMarkers) {
-      performance.mark(hydrationLayoutEffectsEnd,);
-      measureSafe(`${hydrationMarkPrefix}layout-effects`, hydrationRenderEnd, hydrationLayoutEffectsEnd,);
-    }
-    requestAnimationFrame(() => {
-      var _a, _b, _c;
-      const browserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
-      if (addHydrationMarkers) {
-        performance.mark(browserRenderStart,);
-        measureSafe(
-          `${hydrationMarkPrefix}uho`,
-          (_b = (_a = performance.getEntriesByName(hydrationEffectsEnd,)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null &&
-            _b !== void 0
-            ? _b
-            : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd,)[0]) === null || _c === void 0
-            ? void 0
-            : _c.name,
-          browserRenderStart,
-        );
-      }
-      setTimeout(() => {
-        if (turnOffEventHandlerHack) {
-          turnOnReactEventHandling();
-        }
-        if (addHydrationMarkers) {
-          performance.mark(hydrationFP,);
-          measureSafe(`${hydrationMarkPrefix}time-to-first-paint`, hydrationStart, hydrationFP,);
-          measureSafe(`${hydrationMarkPrefix}browser-render`, browserRenderStart, hydrationFP,);
-        }
-      }, 0,);
-    },);
-  }, [],);
-  useEffect(() => {
-    var _a, _b, _c;
-    if (hydrationEffectHasRun) return;
-    hydrationEffectHasRun = true;
-    if (turnOffEventHandlerHack) {
-      turnOnReactEventHandling();
-    }
-    if (addHydrationMarkers) {
-      performance.mark(hydrationEffectsEnd,);
-      measureSafe(
-        `${hydrationMarkPrefix}effects`,
-        (_b = (_a = performance.getEntriesByName(hydrationFP,)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0
-          ? _b
-          : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd,)[0]) === null || _c === void 0
-          ? void 0
-          : _c.name,
-        hydrationEffectsEnd,
-      );
-    }
-  }, [],);
+function TurnOnReactEventHandling() {
+  useAfterPaintEffect(
+    () => {
+      if (!shouldTurnOnEventHandling || !eventsToStop) return;
+      const options = {
+        capture: true,
+      };
+      eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options,));
+      eventsToStop = void 0;
+      performance.mark('framer-react-event-handling-end',);
+    },
+    [],
+    // user-blocking ensures this runs right after the paint, so users can interact asap.
+    {
+      priority: 'user-blocking',
+    },
+  );
   return null;
 }
+function isSamePage(a, b,) {
+  if (a.routeId !== b.routeId) return false;
+  if (a.pathVariables === b.pathVariables) return true;
+  const aPathVariables = a.pathVariables || {};
+  const bPathVariables = b.pathVariables || {};
+  return aPathVariables.length === bPathVariables.length &&
+    Object.keys(aPathVariables,).every((key7) => aPathVariables[key7] === bPathVariables[key7]);
+}
 function useGetRouteCallback(routes,) {
   return React4.useCallback((routeId) => routes[routeId], [routes,],);
 }
@@ -12914,25 +13125,34 @@ function useLocaleCode() {
 function useLocale() {
   return useLocaleCode();
 }
-function useMonitorNextRender(label,) {
+function useMonitorNextPaintAfterRender(label,) {
   const startLabel = `start-${label}`;
   const endLabel = `end-${label}`;
   const resolveHasPainted = useRef(void 0,);
-  useEffect(() => {
-    if (resolveHasPainted.current) {
-      resolveHasPainted.current();
-      resolveHasPainted.current = void 0;
-    }
-  },);
+  useAfterPaintEffect(
+    () => {
+      if (resolveHasPainted.current) {
+        resolveHasPainted.current();
+        resolveHasPainted.current = void 0;
+      }
+    },
+    void 0,
+    // user-blocking ensures we get the correct timings here. Other priorites might delay this effect a little bit.
+    {
+      priority: 'user-blocking',
+    },
+  );
   return useCallback(() => {
     const hasPainted = new Promise((resolve) => {
       resolveHasPainted.current = resolve;
     },);
     performance.mark(startLabel,);
-    hasPainted.then(() => {
+    return hasPainted.finally(() => {
       performance.mark(endLabel,);
       performance.measure(label, startLabel, endLabel,);
-    },).catch(() => {},);
+    },).catch((e) => {
+      console.error(e,);
+    },);
   }, [label, startLabel, endLabel,],);
 }
 function updateScrollPosition(hash2, smoothScroll, isHistoryTransition,) {
@@ -12945,17 +13165,62 @@ function updateScrollPosition(hash2, smoothScroll, isHistoryTransition,) {
   window.scrollTo(0, 0,);
 }
 function useScheduleRenderSideEffects(dep,) {
-  const actions = React4.useRef([],);
-  React4.useLayoutEffect(() => {
+  const actions = useRef([],);
+  useLayoutEffect(() => {
     var _a;
     if (!((_a = actions.current) === null || _a === void 0 ? void 0 : _a.length)) return;
     actions.current.forEach((action) => action());
     actions.current = [];
   }, [dep,],);
-  return React4.useCallback((cb) => {
+  return useCallback((cb) => {
     actions.current.push(cb,);
   }, [],);
 }
+function useNavigationTransition(enableAsyncURLUpdates,) {
+  const startNativeSpinner = useNativeLoadingSpinner();
+  const monitorNextPaintAfterRender = useMonitorNextPaintAfterRender('route-change',);
+  const navigationController = useRef(void 0,);
+  return useCallback(async (transitionFn, updateURL, isAbortable = true,) => {
+    var _a;
+    if (!enableAsyncURLUpdates) {
+      await (updateURL === null || updateURL === void 0 ? void 0 : updateURL());
+      transitionFn();
+      void monitorNextPaintAfterRender();
+      return new Promise((resolve) => {
+        resolve();
+      },);
+    }
+    (_a = navigationController.current) === null || _a === void 0 ? void 0 : _a.abort();
+    const controller = isAbortable ? new AbortController() : void 0;
+    navigationController.current = controller;
+    const signal = controller === null || controller === void 0 ? void 0 : controller.signal;
+    const nextRender = monitorNextPaintAfterRender();
+    if (!updateURL) {
+      navigationController.current = void 0;
+      transitionFn(signal,);
+      return nextRender;
+    }
+    transitionFn(signal,);
+    await interactionResponse({
+      priority: 'user-visible',
+      signal,
+    },).catch(noop2,);
+    await interactionResponse({
+      priority: 'user-visible',
+      signal,
+    },).catch(noop2,);
+    let resolveNavigationPromise;
+    const navigationPromise = new Promise((resolve, reject,) => {
+      resolveNavigationPromise = resolve;
+      if (signal === null || signal === void 0 ? void 0 : signal.aborted) reject();
+      else signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', reject,);
+    },);
+    startNativeSpinner(navigationPromise, updateURL, controller,);
+    return nextRender.then(() => {
+      resolveNavigationPromise();
+    },);
+  }, [enableAsyncURLUpdates, monitorNextPaintAfterRender, startNativeSpinner,],);
+}
 function Router({
   defaultPageStyle,
   disableHistory,
@@ -12967,9 +13232,9 @@ function Router({
   initialLocaleId,
   locales = [],
   preserveQueryParams = false,
-  enableImproveInpDuringHydration = false,
-  addHydrationMarkers = false,
+  enableAsyncURLUpdates = false,
 },) {
+  useMarkRouterEffects();
   useReplaceInitialState({
     disabled: disableHistory,
     routeId: initialRoute,
@@ -12977,12 +13242,14 @@ function Router({
     initialLocaleId,
   },);
   const startViewTransition2 = useViewTransition();
-  const monitorNextRender = useMonitorNextRender('route-change',);
-  const currentRouteRef = React4.useRef(initialRoute,);
-  const currentPathVariablesRef = React4.useRef(initialPathVariables,);
-  const currentLocaleIdRef = React4.useRef(initialLocaleId,);
+  const [dep, forceUpdate,] = useForceUpdate2();
+  const scheduleSideEffect = useScheduleRenderSideEffects(dep,);
+  const startNavigation = useNavigationTransition(enableAsyncURLUpdates,);
+  const currentRouteRef = useRef(initialRoute,);
+  const currentPathVariablesRef = useRef(initialPathVariables,);
+  const currentLocaleIdRef = useRef(initialLocaleId,);
   const currentLocaleId = currentLocaleIdRef.current;
-  const activeLocale = React4.useMemo(() => {
+  const activeLocale = useMemo(() => {
     var _a;
     return (_a = locales.find(({
             id: id3,
@@ -12993,8 +13260,7 @@ function Router({
       ? _a
       : null;
   }, [currentLocaleId, locales,],);
-  const [dep, forceUpdate,] = useForceUpdate2();
-  const localeInfo = React4.useMemo(() => {
+  const localeInfo = useMemo(() => {
     return {
       activeLocale,
       locales,
@@ -13027,30 +13293,65 @@ function Router({
             preserveQueryParams,
           },);
           if (!localeResult) return;
+          const currentPathVariables2 = currentPathVariablesRef.current;
+          const currentStatePaginationInfo = window.history.state.paginationInfo;
+          const currentPath = localeResult.path;
           currentPathVariablesRef.current = localeResult.pathVariables;
           currentLocaleIdRef.current = nextLocale.id;
-          startViewTransition2(currentRouteRef.current, currentRouteId2, () => startTransition2(forceUpdate,),);
-          monitorNextRender();
+          const updateURL = async (ignorePushStateWrapper = false,) => {
+            if (!currentPath) return;
+            return pushHistoryState(
+              {
+                routeId: currentRouteId2,
+                pathVariables: currentPathVariables2,
+                localeId: nextLocale.id,
+                paginationInfo: currentStatePaginationInfo,
+              },
+              currentPath,
+              // we yield in startNavigation before updating the URL, so yielding again is not needed.
+              false,
+              ignorePushStateWrapper,
+            );
+          };
+          void startNavigation(
+            () => {
+              void startViewTransition2(currentRouteId2, currentRouteId2, () => startTransition2(forceUpdate,), enableAsyncURLUpdates,// no signal here, because we update the refs above immediately
+              );
+            },
+            updateURL,
+            false,
+          );
         } catch {}
       },
     };
-  }, [activeLocale, collectionUtils, forceUpdate, locales, monitorNextRender, preserveQueryParams, routes, startViewTransition2,],);
-  const scheduleSideEffect = useScheduleRenderSideEffects(dep,);
-  const setCurrentRouteId = React4.useCallback(
-    (routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false,) => {
+  }, [
+    activeLocale,
+    collectionUtils,
+    enableAsyncURLUpdates,
+    forceUpdate,
+    locales,
+    preserveQueryParams,
+    routes,
+    startNavigation,
+    startViewTransition2,
+  ],);
+  const setCurrentRouteId = useCallback(
+    (routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false, updateURL,) => {
+      const currentRouteId2 = currentRouteRef.current;
       currentRouteRef.current = routeId;
       currentPathVariablesRef.current = pathVariables;
       currentLocaleIdRef.current = localeId;
       scheduleSideEffect(() => {
         updateScrollPosition(hash2, smoothScroll, isHistoryTransition,);
       },);
-      startTransition2(forceUpdate,);
-      monitorNextRender();
+      void startNavigation((signal) => {
+        void startViewTransition2(currentRouteId2, routeId, () => startTransition2(forceUpdate,), enableAsyncURLUpdates, signal,);
+      }, updateURL,);
     },
-    [forceUpdate, monitorNextRender, scheduleSideEffect,],
+    [enableAsyncURLUpdates, forceUpdate, scheduleSideEffect, startNavigation, startViewTransition2,],
   );
   usePopStateHandler(currentRouteRef, setCurrentRouteId,);
-  const navigate = React4.useCallback((routeId, hash2, pathVariables, smoothScroll,) => {
+  const navigate = useCallback(async (routeId, hash2, pathVariables, smoothScroll,) => {
     var _a, _b;
     const newRoute = routes[routeId];
     if (pathVariables) {
@@ -13066,52 +13367,69 @@ function Router({
       pathVariables = Object.fromEntries(Object.entries(pathVariables,).filter(([key7,],) => inUse.has(key7,)),);
     }
     const routeElementId = getRouteElementId(newRoute, hash2,);
+    const currentPathVariables2 = currentPathVariablesRef.current;
+    const currentRouteLocaleId = currentLocaleIdRef.current;
     if (
       isSamePage({
         routeId: currentRouteRef.current,
-        pathVariables: currentPathVariablesRef.current,
+        pathVariables: currentPathVariables2,
       }, {
         routeId,
         pathVariables,
       },)
     ) {
-      if (((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.hash) !== hash2) {
-        if (!disableHistory) {
-          const route = routes[routeId];
-          if (route) {
-            pushRouteState(routeId, route, {
-              currentRoutePath: route.path,
-              currentPathVariables: currentPathVariablesRef.current,
-              pathVariables,
-              hash: hash2,
-              localeId: currentLocaleIdRef.current,
-              preserveQueryParams,
-            },);
-          }
-        }
-      }
       updateScrollPosition(routeElementId, smoothScroll, false,);
+      const route = routes[routeId];
+      if (((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.hash) === hash2 || disableHistory || !route) return;
+      const updateURLPromise = pushRouteState(
+        routeId,
+        route,
+        {
+          currentRoutePath: route.path,
+          currentPathVariables: currentPathVariables2,
+          pathVariables,
+          hash: hash2,
+          localeId: currentRouteLocaleId,
+          preserveQueryParams,
+        },
+        // we want to yield as this is called synchronusly from an user interaction.
+        enableAsyncURLUpdates,
+      );
+      if (!enableAsyncURLUpdates) return await updateURLPromise;
       return;
     }
     if (!newRoute) return;
-    if (!disableHistory) {
-      const currentRoute = routes[currentRouteRef.current];
-      pushRouteState(routeId, newRoute, {
-        currentRoutePath: currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.path,
-        currentPathVariables: currentPathVariablesRef.current,
-        hash: hash2,
-        pathVariables,
-        localeId: currentLocaleIdRef.current,
-        preserveQueryParams,
-      },);
-    }
-    const changeRoute = () => setCurrentRouteId(routeId, currentLocaleIdRef.current, routeElementId, pathVariables, smoothScroll, false,);
-    startViewTransition2(currentRouteRef.current, routeId, changeRoute,);
-  }, [routes, disableHistory, setCurrentRouteId, startViewTransition2, preserveQueryParams,],);
+    const currentRoute = routes[currentRouteRef.current];
+    const updateURL = async (ignorePushStateWrapper = false,) =>
+      pushRouteState(
+        routeId,
+        newRoute,
+        {
+          currentRoutePath: currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.path,
+          currentPathVariables: currentPathVariables2,
+          hash: hash2,
+          pathVariables,
+          localeId: currentRouteLocaleId,
+          preserveQueryParams,
+        },
+        // we yield in startNavigation before updating the URL, so yielding again is not needed.
+        false,
+        ignorePushStateWrapper,
+      );
+    setCurrentRouteId(
+      routeId,
+      currentRouteLocaleId,
+      routeElementId,
+      pathVariables,
+      smoothScroll,
+      false,
+      disableHistory ? void 0 : updateURL,
+    );
+  }, [routes, setCurrentRouteId, disableHistory, preserveQueryParams, enableAsyncURLUpdates,],);
   const getRoute = useGetRouteCallback(routes,);
   const currentRouteId = currentRouteRef.current;
   const currentPathVariables = currentPathVariablesRef.current;
-  const api = React4.useMemo(() => ({
+  const api = useMemo(() => ({
     navigate,
     getRoute,
     currentRouteId,
@@ -13139,16 +13457,17 @@ function Router({
             notFoundPage,
             defaultPageStyle,
             forceUpdateKey: dep,
-            children: jsx(React4.Fragment, {
-              children: pageExistsInCurrentLocale
-                ? renderPage(current.page, defaultPageStyle,)
-                : notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
+            children: jsxs(Fragment, {
+              children: [
+                jsx(MarkSuspenseEffects.Start, {},),
+                pageExistsInCurrentLocale
+                  ? renderPage(current.page, defaultPageStyle,)
+                  : notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
+              ],
             }, remountKey,),
           },),
-          jsx(OnHydrationEnd, {
-            addHydrationMarkers,
-            turnOffEventHandlerHack: enableImproveInpDuringHydration,
-          },),
+          jsx(TurnOnReactEventHandling, {},),
+          jsx(MarkSuspenseEffects.End, {},),
         ],
       },),
     },),
@@ -15379,8 +15698,8 @@ var ObjectInterpolation = (valueInterpolation) => {
     difference(from, to,) {
       let sum = 0;
       for (const key7 in from) {
-        const difference = valueInterpolation.difference(from[key7], to[key7],);
-        sum += Math.pow(difference, 2,);
+        const difference2 = valueInterpolation.difference(from[key7], to[key7],);
+        sum += Math.pow(difference2, 2,);
       }
       return Math.sqrt(sum,);
     },
@@ -18533,6 +18852,7 @@ var richTextCSSRules = [
         h6.framer-text:not(:first-child),
         ol.framer-text:not(:first-child),
         ul.framer-text:not(:first-child),
+        blockquote.framer-text:not(:first-child),
         .framer-image.framer-text:not(:first-child) {
             margin-top: var(--framer-blockquote-paragraph-spacing, var(--framer-paragraph-spacing, 0));
         }
@@ -18570,13 +18890,13 @@ var richTextCSSRules = [
   `
         code.framer-text,
         code.framer-text span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-code-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-code-text-color, var(--framer-text-color, #000));
-            font-size: calc(var(--framer-font-size, 16px) * var(--framer-font-size-scale, 1));
-            letter-spacing: var(--framer-letter-spacing, 0);
-            line-height: var(--framer-line-height, 1.2em);
+            font-family: var(--framer-blockquote-font-family, var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-blockquote-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            letter-spacing: var(--framer-blockquote-letter-spacing, var(--framer-letter-spacing, 0));
+            line-height: var(--framer-blockquote-line-height, var(--framer-line-height, 1.2em));
         }
     `, /* css */
   `
@@ -18591,13 +18911,13 @@ var richTextCSSRules = [
   `
         a.framer-text,
         a.framer-text span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-link-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-link-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-link-text-color, var(--framer-text-color, #000));
-            font-size: calc(var(--framer-link-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
-            text-transform: var(--framer-link-text-transform, var(--framer-text-transform, none));
-            text-decoration: var(--framer-link-text-decoration, var(--framer-text-decoration, none));
+            font-family: var(--framer-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
+            text-decoration: var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)));
             /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */
             cursor: var(--framer-custom-cursors, pointer);
         }
@@ -18605,33 +18925,33 @@ var richTextCSSRules = [
   `
         code.framer-text a.framer-text,
         code.framer-text a.framer-text span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-code-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)));
-            font-size: calc(var(--framer-link-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            font-family: var(--framer-blockquote-font-family, var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
         }
     `, /* css */
   `
         a.framer-text:hover,
         a.framer-text:hover span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-link-hover-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
-            font-style: var(--framer-link-hover-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)));
-            font-weight: var(--framer-link-hover-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)));
-            color: var(--framer-link-hover-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
-            font-size: calc(var(--framer-link-hover-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-text-transform, var(--framer-text-transform, none)));
-            text-decoration: var(--framer-link-hover-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)));
+            font-family: var(--framer-link-hover-font-family, var(--framer-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))));
+            font-style: var(--framer-link-hover-font-style, var(--framer-blockquote-font-style, var(--framer-link-font-style, var(--framer-font-style, normal))));
+            font-weight: var(--framer-link-hover-font-weight, var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))));
+            color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
+            font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
+            text-transform: var(--framer-link-hover-text-transform, var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
+            text-decoration: var(--framer-link-hover-text-decoration, var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))));
         }
     `, /* css */
   `
         code.framer-text a.framer-text:hover,
         code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-code-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-link-hover-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))));
-            font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
+            font-family: var(--framer-blockquote-font-family, var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))));
+            font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
         }
     `, /* css */
   `
@@ -19120,8 +19440,8 @@ function isUndefined(value,) {
 function isNull(value,) {
   return value === null;
 }
-function isNullish(value,) {
-  return isUndefined(value,) || isNull(value,);
+function isNullish2(value,) {
+  return value == null;
 }
 function isValidDate(value,) {
   return value instanceof Date && !isNaN(value.getTime(),);
@@ -20828,131 +21148,6 @@ var isPropValid = /* @__PURE__ */ memoize((prop) =>
   reactPropsRegex.test(prop,) || prop.charCodeAt(0,) === 111 && prop.charCodeAt(1,) === 110 && prop.charCodeAt(2,) < 91
   /* Z+1 */
 );
-var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0,);
-var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
-var useLibraryFeatures = () => {
-  const context = React4.useContext(LibraryFeaturesContext,);
-  return context ?? {};
-};
-var import_process = __toESM(require_browser(), 1,);
-var safeNavigator = typeof navigator !== 'undefined' ? navigator : void 0;
-var isBrowser2 = () => typeof document === 'object';
-var isWebKit = () => {
-  var _a;
-  return ((_a = safeNavigator) == null ? void 0 : _a.userAgent.includes('AppleWebKit/',)) && !isChrome() && !isEdge();
-};
-var webkitVersion = () => {
-  let version2 = -1;
-  const regexp = /AppleWebKit\/([\d.]+)/;
-  const result = safeNavigator && regexp.exec(safeNavigator.userAgent,);
-  if (result && result[1]) {
-    version2 = parseFloat(result[1],);
-  }
-  return version2;
-};
-var safariVersion = () => {
-  let version2 = -1;
-  const regexp = /Version\/([\d.]+)/;
-  const result = safeNavigator && regexp.exec(safeNavigator.userAgent,);
-  if (result && result[1]) {
-    version2 = parseFloat(result[1],);
-  }
-  return version2;
-};
-var isChrome = () => safeNavigator && /Chrome/.test(safeNavigator.userAgent,) && /Google Inc/.test(safeNavigator.vendor,) && !isEdge();
-var isSafari = () => safeNavigator && /Safari/.test(safeNavigator.userAgent,) && /Apple Computer/.test(safeNavigator.vendor,);
-var isFirefox = () => safeNavigator && /Firefox\/\d+\.\d+$/.test(safeNavigator.userAgent,);
-var isFramerX = () => safeNavigator && /FramerX/.test(safeNavigator.userAgent,);
-var isEdge = () => safeNavigator && /Edg\//.test(safeNavigator.userAgent,);
-var isAndroid = () => safeNavigator && /android/i.test(safeNavigator.userAgent,);
-var isIOS = () => safeNavigator && /iPhone|iPod|iPad/i.test(safeNavigator.platform,);
-var isMacOS = () => safeNavigator && /Mac/.test(safeNavigator.platform,);
-var isWindows = () => safeNavigator && /Win/.test(safeNavigator.platform,);
-var isTouch = () => safeWindow.ontouchstart === null && safeWindow.ontouchmove === null && safeWindow.ontouchend === null;
-var isDesktop = () => deviceType() === 'desktop';
-var isPhone = () => deviceType() === 'phone';
-var isTablet = () => deviceType() === 'tablet';
-var isMobile = () => isPhone() || isTablet();
-var isFileUrl = (url) => url.startsWith('file://',);
-var isDataUrl = (url) => url.startsWith('data:',);
-var isTest = () => import_process.default.env.NODE_ENV === 'test';
-var isRelativeUrl = (url) => !/^[a-z]{1,8}:\/\/.*$/i.test(url,);
-var isLocalServerUrl = (url) => /[a-z]{1,8}:\/\/127\.0\.0\.1/i.test(url,) || /[a-zA-Z]{1,8}:\/\/localhost/.test(url,);
-var isLocalUrl = (url) => {
-  if (isFileUrl(url,)) return true;
-  if (isLocalServerUrl(url,)) return true;
-  return false;
-};
-var isLocalAssetUrl = (url, baseUrl,) => {
-  if (baseUrl === null) baseUrl = safeWindow.location.href;
-  if (isDataUrl(url,)) return false;
-  if (isLocalUrl(url,)) return true;
-  if (isRelativeUrl(url,) && isLocalUrl(baseUrl,)) return true;
-  return false;
-};
-var devicePixelRatio2 = () => safeWindow.devicePixelRatio;
-var isJP2Supported = function () {
-  if (isFirefox()) return false;
-  return isWebKit();
-};
-var isWebPSupported = () => isChrome();
-var deviceType = () => {
-  if (safeNavigator && /tablet|iPad|Nexus 9/i.test(safeNavigator.userAgent,)) return 'tablet';
-  if (safeNavigator && /mobi/i.test(safeNavigator.userAgent,)) return 'phone';
-  return 'desktop';
-};
-var deviceOS = () => {
-  if (isMacOS()) return 'macos';
-  if (isIOS()) return 'ios';
-  if (isAndroid()) return 'android';
-  if (isWindows()) return 'windows';
-};
-var deviceFont = (os) => {
-  if (!os) {
-    os = deviceOS();
-  }
-  const fonts = {
-    apple: '-apple-system, BlinkMacSystemFont, SF Pro Text, SF UI Text, Helvetica Neue',
-    google: 'Roboto, Helvetica Neue',
-    microsoft: 'Segoe UI, Helvetica Neue',
-  };
-  if (os === 'macos') return fonts.apple;
-  if (os === 'ios') return fonts.apple;
-  if (os === 'android') return fonts.google;
-  if (os === 'windows') return fonts.microsoft;
-  return fonts.apple;
-};
-var environment = {
-  isWebKit,
-  webkitVersion,
-  isChrome,
-  isSafari,
-  isFirefox,
-  isFramerX,
-  isEdge,
-  isAndroid,
-  isIOS,
-  isMacOS,
-  isWindows,
-  isTouch,
-  isDesktop,
-  isPhone,
-  isTablet,
-  isMobile,
-  isFileUrl,
-  isDataUrl,
-  isRelativeUrl,
-  isLocalServerUrl,
-  isLocalUrl,
-  isLocalAssetUrl,
-  devicePixelRatio: devicePixelRatio2,
-  isJP2Supported,
-  isWebPSupported,
-  deviceType,
-  deviceOS,
-  deviceFont,
-  safariVersion,
-};
 var mockWithWarning = (message) => {
   return () => {
     warnOnce2(message,);
@@ -21088,35 +21283,12 @@ function StaticImage({
 },) {
   const source = runtime.useImageSource(image, containerSize, nodeId,);
   const imageStyle = getImageStyle(image, containerSize,);
-  const [measuredSizes, setMeasuredSizes,] = React4.useState();
   const imageRef = React4.useRef(null,);
-  const libraryFeatures = useLibraryFeatures();
-  React4.useEffect(() => {
-    if (!libraryFeatures.imgSizesWorkaroundEnabled) return;
-    const imageElement = imageRef.current;
-    if (!imageElement) return;
-    if (isTest()) return;
-    if (!image.sizes) return;
-    const smartComponentParent = imageElement.closest('[data-framer-name]',);
-    if (!smartComponentParent) return;
-    const imageNodeWidth = imageElement.clientWidth;
-    const currentSizes = Number(image.sizes.replace('px', '',),);
-    if (
-      // If we successfully parsed `sizes`, and...
-      !isNaN(currentSizes,) &&
-      // ...if the image node is smaller than the currently set `sizes`
-      // attribute,..
-      imageNodeWidth < currentSizes
-    ) {
-      return;
-    }
-    setMeasuredSizes(imageNodeWidth + 'px',);
-  }, [image.sizes,],);
   return /* @__PURE__ */ jsx('img', {
     ref: imageRef,
     decoding: 'async',
     loading: image.loading,
-    sizes: measuredSizes ?? image.sizes,
+    sizes: image.sizes,
     srcSet: image.srcSet,
     src: source,
     alt: alt ?? image.alt,
@@ -21336,6 +21508,125 @@ function Border(props,) {
 function htmlElementAsMotionComponent(asElem,) {
   return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion[asElem] : motion['div'];
 }
+var import_process = __toESM(require_browser(), 1,);
+var safeNavigator = typeof navigator !== 'undefined' ? navigator : void 0;
+var isBrowser2 = () => typeof document === 'object';
+var isWebKit = () => {
+  var _a;
+  return ((_a = safeNavigator) == null ? void 0 : _a.userAgent.includes('AppleWebKit/',)) && !isChrome() && !isEdge();
+};
+var webkitVersion = () => {
+  let version2 = -1;
+  const regexp = /AppleWebKit\/([\d.]+)/;
+  const result = safeNavigator && regexp.exec(safeNavigator.userAgent,);
+  if (result && result[1]) {
+    version2 = parseFloat(result[1],);
+  }
+  return version2;
+};
+var safariVersion = () => {
+  let version2 = -1;
+  const regexp = /Version\/([\d.]+)/;
+  const result = safeNavigator && regexp.exec(safeNavigator.userAgent,);
+  if (result && result[1]) {
+    version2 = parseFloat(result[1],);
+  }
+  return version2;
+};
+var isChrome = () => safeNavigator && /Chrome/.test(safeNavigator.userAgent,) && /Google Inc/.test(safeNavigator.vendor,) && !isEdge();
+var isSafari = () => safeNavigator && /Safari/.test(safeNavigator.userAgent,) && /Apple Computer/.test(safeNavigator.vendor,);
+var isFirefox = () => safeNavigator && /Firefox\/\d+\.\d+$/.test(safeNavigator.userAgent,);
+var isFramerX = () => safeNavigator && /FramerX/.test(safeNavigator.userAgent,);
+var isEdge = () => safeNavigator && /Edg\//.test(safeNavigator.userAgent,);
+var isAndroid = () => safeNavigator && /android/i.test(safeNavigator.userAgent,);
+var isIOS = () => safeNavigator && /iPhone|iPod|iPad/i.test(safeNavigator.platform,);
+var isMacOS = () => safeNavigator && /Mac/.test(safeNavigator.platform,);
+var isWindows = () => safeNavigator && /Win/.test(safeNavigator.platform,);
+var isTouch = () => safeWindow.ontouchstart === null && safeWindow.ontouchmove === null && safeWindow.ontouchend === null;
+var isDesktop = () => deviceType() === 'desktop';
+var isPhone = () => deviceType() === 'phone';
+var isTablet = () => deviceType() === 'tablet';
+var isMobile = () => isPhone() || isTablet();
+var isFileUrl = (url) => url.startsWith('file://',);
+var isDataUrl = (url) => url.startsWith('data:',);
+var isTest = () => import_process.default.env.NODE_ENV === 'test';
+var isRelativeUrl = (url) => !/^[a-z]{1,8}:\/\/.*$/i.test(url,);
+var isLocalServerUrl = (url) => /[a-z]{1,8}:\/\/127\.0\.0\.1/i.test(url,) || /[a-zA-Z]{1,8}:\/\/localhost/.test(url,);
+var isLocalUrl = (url) => {
+  if (isFileUrl(url,)) return true;
+  if (isLocalServerUrl(url,)) return true;
+  return false;
+};
+var isLocalAssetUrl = (url, baseUrl,) => {
+  if (baseUrl === null) baseUrl = safeWindow.location.href;
+  if (isDataUrl(url,)) return false;
+  if (isLocalUrl(url,)) return true;
+  if (isRelativeUrl(url,) && isLocalUrl(baseUrl,)) return true;
+  return false;
+};
+var devicePixelRatio2 = () => safeWindow.devicePixelRatio;
+var isJP2Supported = function () {
+  if (isFirefox()) return false;
+  return isWebKit();
+};
+var isWebPSupported = () => isChrome();
+var deviceType = () => {
+  if (safeNavigator && /tablet|iPad|Nexus 9/i.test(safeNavigator.userAgent,)) return 'tablet';
+  if (safeNavigator && /mobi/i.test(safeNavigator.userAgent,)) return 'phone';
+  return 'desktop';
+};
+var deviceOS = () => {
+  if (isMacOS()) return 'macos';
+  if (isIOS()) return 'ios';
+  if (isAndroid()) return 'android';
+  if (isWindows()) return 'windows';
+};
+var deviceFont = (os) => {
+  if (!os) {
+    os = deviceOS();
+  }
+  const fonts = {
+    apple: '-apple-system, BlinkMacSystemFont, SF Pro Text, SF UI Text, Helvetica Neue',
+    google: 'Roboto, Helvetica Neue',
+    microsoft: 'Segoe UI, Helvetica Neue',
+  };
+  if (os === 'macos') return fonts.apple;
+  if (os === 'ios') return fonts.apple;
+  if (os === 'android') return fonts.google;
+  if (os === 'windows') return fonts.microsoft;
+  return fonts.apple;
+};
+var environment = {
+  isWebKit,
+  webkitVersion,
+  isChrome,
+  isSafari,
+  isFirefox,
+  isFramerX,
+  isEdge,
+  isAndroid,
+  isIOS,
+  isMacOS,
+  isWindows,
+  isTouch,
+  isDesktop,
+  isPhone,
+  isTablet,
+  isMobile,
+  isFileUrl,
+  isDataUrl,
+  isRelativeUrl,
+  isLocalServerUrl,
+  isLocalUrl,
+  isLocalAssetUrl,
+  devicePixelRatio: devicePixelRatio2,
+  isJP2Supported,
+  isWebPSupported,
+  deviceType,
+  deviceOS,
+  deviceFont,
+  safariVersion,
+};
 var isChrome2 = /* @__PURE__ */ isChrome();
 function layoutHintDataPropsForCenter(center,) {
   const props = {};
@@ -31451,6 +31742,9 @@ var LazyValue = class {
     };
     return promise;
   }
+  waitFor() {
+    return this.resolver();
+  }
   /** Synchronously read the value after calling preload() before. */
   read() {
     const status = this.status;
@@ -31469,6 +31763,12 @@ var LazyValue = class {
     }
   }
 };
+var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0,);
+var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
+var useLibraryFeatures = () => {
+  const context = React4.useContext(LibraryFeaturesContext,);
+  return context ?? {};
+};
 function findAnchorElement(target, withinElement,) {
   if (target instanceof HTMLAnchorElement) {
     return target;
@@ -31786,7 +32086,7 @@ function createOnClickLinkHandler(router, routeId, elementId, combinedPathVariab
     event.preventDefault();
     const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, routeId,);
     if (route && isLazyComponentType(route == null ? void 0 : route.page,)) {
-      await route.page.preload();
+      void route.page.preload();
     }
     (_b = router.navigate) == null ? void 0 : _b.call(router, routeId, elementId, combinedPathVariables, smoothScroll,);
   };
@@ -32281,6 +32581,284 @@ function responseHasError(response,) {
   return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error,) &&
     'message' in response.error && typeof response.error.message === 'string';
 }
+var loadingFetchResult = {
+  status: 'loading',
+  data: void 0,
+};
+function isValidURL2(href,) {
+  try {
+    const url = new URL(href,);
+    return Boolean(url.protocol,);
+  } catch {}
+}
+function isCacheExpired(insertionTimestamp, cacheDuration,) {
+  const cacheDurationMs = cacheDuration * 1e3;
+  const currentTimestamp = Date.now();
+  const expirationTimestamp = insertionTimestamp + cacheDurationMs;
+  return currentTimestamp >= expirationTimestamp;
+}
+var noop22 = () => {};
+var _responseValues;
+var _subscribers;
+var _cacheDurations;
+var _cachedAt;
+var _staleQueriesInterval;
+var _FetchClient = class {
+  constructor() {
+    __privateAdd(this, _responseValues, /* @__PURE__ */ new Map(),);
+    __privateAdd(this, _subscribers, /* @__PURE__ */ new Map(),);
+    __privateAdd(this, _cacheDurations, /* @__PURE__ */ new Map(),);
+    __privateAdd(this, _cachedAt, /* @__PURE__ */ new Map(),);
+    __privateAdd(this, _staleQueriesInterval, void 0,);
+    __publicField(this, 'checkForStaleQueries', () => {
+      const activeURLS = __privateGet(this, _subscribers,).keys();
+      for (const url of activeURLS) {
+        const cachedAt = __privateGet(this, _cachedAt,).get(url,);
+        const cacheDuration = __privateGet(this, _cacheDurations,).get(url,);
+        if (!cacheDuration || !cachedAt) continue;
+        void this.fetchWithCache(url, cacheDuration,);
+      }
+    },);
+    __publicField(
+      this,
+      'persistCache',
+      debounce(() => {
+        const data2 = {};
+        for (const [url, responseValue,] of __privateGet(this, _responseValues,)) {
+          if (!responseValue) continue;
+          if (responseValue.status !== 'success') continue;
+          const cacheConfig = __privateGet(this, _cacheDurations,).get(url,);
+          if (!cacheConfig || cacheConfig === 0) continue;
+          const storedAt = __privateGet(this, _cachedAt,).get(url,);
+          if (!storedAt) continue;
+          if (storedAt && isCacheExpired(storedAt, cacheConfig,)) {
+            continue;
+          }
+          data2[url] = [storedAt, cacheConfig, responseValue.data,];
+        }
+        localStorage.setItem(_FetchClient.cacheKey, JSON.stringify(data2,),);
+      }, 500,),
+    );
+    this.hydrateCache();
+  }
+  hydrateCache() {
+    try {
+      const rawData = localStorage.getItem(_FetchClient.cacheKey,);
+      if (!rawData) return;
+      const data2 = JSON.parse(rawData,);
+      if (typeof data2 !== 'object') throw new Error('Invalid cache data',);
+      for (const url in data2) {
+        const cached = data2[url];
+        if (!Array.isArray(cached,) || cached.length !== 3) throw new Error('Invalid cache data',);
+        const [storedAt, cacheDuration, cachedData,] = cached;
+        if (isCacheExpired(storedAt, cacheDuration,)) continue;
+        __privateGet(this, _cachedAt,).set(url, storedAt,);
+        __privateGet(this, _cacheDurations,).set(url, cacheDuration,);
+        __privateGet(this, _responseValues,).set(url, {
+          status: 'success',
+          data: cachedData,
+        },);
+      }
+    } catch (error) {
+      localStorage.removeItem(_FetchClient.cacheKey,);
+    }
+  }
+  setResponseValue(url, value,) {
+    __privateGet(this, _responseValues,).set(url, value,);
+    this.persistCache();
+    const subscribers = __privateGet(this, _subscribers,).get(url,);
+    if (!subscribers) return;
+    for (const subscriber of subscribers) {
+      subscriber();
+    }
+  }
+  async prefetch(url, cacheDuration,) {
+    if (!isValidURL2(url,)) return;
+    return this.fetchWithCache(url, cacheDuration,);
+  }
+  async fetchWithCache(url, cacheDuration,) {
+    try {
+      const cachedAt = __privateGet(this, _cachedAt,).get(url,);
+      const hasExpiredCache = cachedAt && isCacheExpired(cachedAt, cacheDuration,);
+      if (__privateGet(this, _responseValues,).has(url,) && !hasExpiredCache) {
+        return;
+      }
+      const currentValue = __privateGet(this, _responseValues,).get(url,);
+      if (!currentValue) {
+        this.setResponseValue(url, loadingFetchResult,);
+      }
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          // Default to JSON always or no?
+          'Content-Type': 'application/json',
+        },
+      },);
+      if (!response.ok) {
+        this.setResponseValue(url, {
+          status: 'error',
+          error: new Error('Invalid Response Status',),
+          data: void 0,
+        },);
+        return;
+      }
+      const value = await response.json();
+      this.setResponseValue(url, {
+        status: 'success',
+        data: value,
+      },);
+      __privateGet(this, _cachedAt,).set(url, Date.now(),);
+    } catch (error) {
+      this.setResponseValue(url, {
+        status: 'error',
+        error,
+        data: void 0,
+      },);
+    }
+  }
+  getValue(url,) {
+    return __privateGet(this, _responseValues,).get(url,);
+  }
+  subscribe(url, callback, cacheDuration,) {
+    if (!isValidURL2(url,)) return noop22;
+    const cacheDurationForUrl = __privateGet(this, _cacheDurations,).get(url,);
+    if (!cacheDurationForUrl || cacheDuration < cacheDurationForUrl) {
+      __privateGet(this, _cacheDurations,).set(url, cacheDuration,);
+    }
+    if (!__privateGet(this, _staleQueriesInterval,)) {
+      __privateSet(this, _staleQueriesInterval, safeWindow.setInterval(this.checkForStaleQueries, 5e3,),);
+    }
+    void this.fetchWithCache(url, cacheDuration,);
+    const subscribers = __privateGet(this, _subscribers,).get(url,) ?? /* @__PURE__ */ new Set();
+    subscribers.add(callback,);
+    __privateGet(this, _subscribers,).set(url, subscribers,);
+    return () => {
+      const nextSubscribers = __privateGet(this, _subscribers,).get(url,);
+      if (!nextSubscribers) return;
+      nextSubscribers.delete(callback,);
+      if (nextSubscribers.size === 0) {
+        __privateGet(this, _subscribers,).delete(url,);
+      }
+      if (__privateGet(this, _subscribers,).size === 0) {
+        safeWindow.clearInterval(__privateGet(this, _staleQueriesInterval,),);
+        __privateSet(this, _staleQueriesInterval, void 0,);
+      }
+    };
+  }
+};
+var FetchClient = _FetchClient;
+_responseValues = /* @__PURE__ */ new WeakMap();
+_subscribers = /* @__PURE__ */ new WeakMap();
+_cacheDurations = /* @__PURE__ */ new WeakMap();
+_cachedAt = /* @__PURE__ */ new WeakMap();
+_staleQueriesInterval = /* @__PURE__ */ new WeakMap();
+__publicField(FetchClient, 'cacheKey', 'framer-fetch-cache',);
+var FetchClientContext = React2.createContext(void 0,);
+var FetchClientProvider = ({
+  children,
+},) => {
+  const [client,] = React2.useState(() => new FetchClient());
+  return /* @__PURE__ */ jsx(FetchClientContext.Provider, {
+    value: client,
+    children,
+  },);
+};
+function difference(array1, array2,) {
+  return array1.filter((x) => !array2.includes(x,));
+}
+var _subscriptions;
+var _subscribers2;
+var _cachedResults;
+var _queryResult;
+var RequestsObserver = class {
+  constructor(client,) {
+    this.client = client;
+    __privateAdd(this, _subscriptions, /* @__PURE__ */ new Map(),);
+    __privateAdd(this, _subscribers2, /* @__PURE__ */ new Set(),);
+    __privateAdd(this, _cachedResults, /* @__PURE__ */ new WeakSet(),);
+    __privateAdd(this, _queryResult, /* @__PURE__ */ new Map(),);
+    __publicField(this, 'onFetchResultUpdate', () => {
+      const results = /* @__PURE__ */ new Map();
+      let hasChange = false;
+      const subscribedUrls = __privateGet(this, _subscriptions,).keys();
+      for (const url of subscribedUrls) {
+        const result = this.client.getValue(url,);
+        if (!result) return;
+        results.set(url, result,);
+        if (!__privateGet(this, _cachedResults,).has(result,)) {
+          __privateGet(this, _cachedResults,).add(result,);
+          hasChange = true;
+        }
+      }
+      if (!hasChange) {
+        return;
+      }
+      __privateSet(this, _queryResult, results,);
+      for (const subscriber of __privateGet(this, _subscribers2,)) {
+        subscriber();
+      }
+    },);
+    __publicField(this, 'subscribe', (callback) => {
+      __privateGet(this, _subscribers2,).add(callback,);
+      return () => {
+        __privateGet(this, _subscribers2,).delete(callback,);
+      };
+    },);
+    __publicField(this, 'getResults', () => {
+      return __privateGet(this, _queryResult,);
+    },);
+  }
+  setRequests(requests,) {
+    var _a;
+    const requestsByURL = new Map(requests.map((query) => [query.url, query,]),);
+    const nextSubscribedURLs = Array.from(requestsByURL.keys(),);
+    const hasSubscriptionChange = nextSubscribedURLs.some((url) => !__privateGet(this, _subscriptions,).has(url,));
+    if (nextSubscribedURLs.length !== __privateGet(this, _subscriptions,).size && !hasSubscriptionChange) {
+      return;
+    }
+    const currentSubscribedURLs = Array.from(__privateGet(this, _subscriptions,).keys(),);
+    const unsubscribeURLs = difference(currentSubscribedURLs, nextSubscribedURLs,);
+    for (const url of unsubscribeURLs) {
+      (_a = __privateGet(this, _subscriptions,).get(url,)) == null ? void 0 : _a();
+      __privateGet(this, _subscriptions,).delete(url,);
+    }
+    const toSubscribeURLs = difference(nextSubscribedURLs, currentSubscribedURLs,);
+    for (const url of toSubscribeURLs) {
+      const requestConfig = requestsByURL.get(url,);
+      const unsubscribe = this.client.subscribe(
+        url,
+        this.onFetchResultUpdate,
+        (requestConfig == null ? void 0 : requestConfig.cacheDuration) ?? 0,
+      );
+      __privateGet(this, _subscriptions,).set(url, unsubscribe,);
+    }
+    __privateSet(this, _cachedResults, /* @__PURE__ */ new WeakSet(),);
+    this.onFetchResultUpdate();
+  }
+};
+_subscriptions = /* @__PURE__ */ new WeakMap();
+_subscribers2 = /* @__PURE__ */ new WeakMap();
+_cachedResults = /* @__PURE__ */ new WeakMap();
+_queryResult = /* @__PURE__ */ new WeakMap();
+function useFetchRequests(requests, disabled,) {
+  const fetchClient = React2.useContext(FetchClientContext,);
+  if (!fetchClient) {
+    throw new Error('useFetchRequest must be used within a FetchClientProvider',);
+  }
+  const [observer2,] = React2.useState(() => new RequestsObserver(fetchClient,));
+  React2.useLayoutEffect(() => {
+    if (disabled) return;
+    observer2.setRequests(requests,);
+  }, [requests, observer2, disabled,],);
+  return React2.useSyncExternalStore(observer2.subscribe, observer2.getResults, observer2.getResults,);
+}
+function usePrefetch() {
+  const fetchClient = React2.useContext(FetchClientContext,);
+  if (!fetchClient) {
+    throw new Error('useFetchRequest must be used within a FetchClientProvider',);
+  }
+  return React2.useCallback((url, cacheDuration,) => fetchClient.prefetch(url, cacheDuration,), [fetchClient,],);
+}
 function PageRoot({
   RootComponent,
   isWebsite,
@@ -32295,9 +32873,10 @@ function PageRoot({
   localeId,
   locales,
   preserveQueryParams,
-  enableImproveInpDuringHydration,
-  addHydrationMarkers = false,
 },) {
+  const {
+    enableAsyncURLUpdates,
+  } = useLibraryFeatures();
   React4.useEffect(() => {
     if (isWebsite) return;
     MainLoop.start();
@@ -32308,21 +32887,22 @@ function PageRoot({
       children: /* @__PURE__ */ jsx(CustomCursorHost, {
         children: /* @__PURE__ */ jsx(FormContext.Provider, {
           value: framerSiteId,
-          children: /* @__PURE__ */ jsx(Router, {
-            initialRoute: routeId,
-            initialPathVariables: pathVariables,
-            initialLocaleId: localeId,
-            routes,
-            collectionUtils,
-            notFoundPage,
-            locales,
-            defaultPageStyle: {
-              minHeight: '100vh',
-              width: 'auto',
-            },
-            preserveQueryParams,
-            enableImproveInpDuringHydration,
-            addHydrationMarkers,
+          children: /* @__PURE__ */ jsx(FetchClientProvider, {
+            children: /* @__PURE__ */ jsx(Router, {
+              initialRoute: routeId,
+              initialPathVariables: pathVariables,
+              initialLocaleId: localeId,
+              routes,
+              collectionUtils,
+              notFoundPage,
+              locales,
+              defaultPageStyle: {
+                minHeight: '100vh',
+                width: 'auto',
+              },
+              preserveQueryParams,
+              enableAsyncURLUpdates,
+            },),
           },),
         },),
       },),
@@ -32605,6 +33185,89 @@ var ResolveLinks = /* @__PURE__ */ React2.forwardRef(function ResolveLinksInner(
   const childrenWithLinks = children(resolvedLinks,);
   return cloneWithPropsAndRef(childrenWithLinks, rest,);
 },);
+function isObjectOrArray(value,) {
+  return typeof value === 'object' && value !== null;
+}
+function getPropertyByPath(input, keyPath,) {
+  if (keyPath === '') {
+    return input;
+  }
+  const keyParts = keyPath.split(/[.[\]]+/u,).filter((part) => part.length > 0);
+  let current = input;
+  for (const part of keyParts) {
+    if (!isObjectOrArray(current,)) {
+      return void 0;
+    }
+    current = current[part];
+  }
+  return current;
+}
+function isValidFetchDataValueResult(type, value,) {
+  switch (type) {
+    case 'string':
+      return isString22(value,) || isNumber2(value,);
+    case 'boolean':
+      return isBoolean(value,);
+    case 'number':
+      return isNumber2(value,);
+    default: {
+      const _ = type;
+      return false;
+    }
+  }
+}
+function resolveFetchDataValue(result, request,) {
+  if (result.status === 'loading') {
+    return request.fallbackValue;
+  }
+  if (result.status === 'error') {
+    return request.fallbackValue;
+  }
+  const resolvedValue = getPropertyByPath(result.data, request.resultKeyPath,);
+  if (!isValidFetchDataValueResult(request.resultOutputType, resolvedValue,)) {
+    return request.fallbackValue;
+  }
+  return resolvedValue;
+}
+function useFetchDataValues(requests, disabled,) {
+  const fetchResults = useFetchRequests(requests, disabled,);
+  const data2 = React2.useMemo(() => {
+    return requests.map((request) => {
+      const fetchResult = fetchResults.get(request.url,);
+      if (!fetchResult) {
+        return request.fallbackValue;
+      }
+      return resolveFetchDataValue(fetchResult, request,);
+    },);
+  }, [fetchResults, requests,],);
+  const status = React2.useMemo(() => {
+    const statuses = /* @__PURE__ */ new Set();
+    for (const fetchResult of fetchResults.values()) {
+      statuses.add(fetchResult.status,);
+    }
+    if (statuses.has('error',)) return 'error';
+    if (statuses.has('loading',)) return 'loading';
+    return 'success';
+  }, [fetchResults,],);
+  return {
+    status,
+    data: data2,
+  };
+}
+var Fetcher = /* @__PURE__ */ React2.forwardRef(function Fetcher2({
+  requests,
+  disabled,
+  children,
+  ...rest
+}, ref,) {
+  const cloneWithPropsAndRef = useCloneChildrenWithPropsAndRef(ref,);
+  const {
+    data: data2,
+    status,
+  } = useFetchDataValues(requests, disabled,);
+  const childrenWithValues = children(data2, status,);
+  return cloneWithPropsAndRef(childrenWithValues, rest,);
+},);
 var callEach = (...fns) => fns.forEach((fn) => fn && fn());
 var import_archy = __toESM(require_archy(), 1,);
 function getLogger(name,) {
@@ -32681,7 +33344,7 @@ var CompatibilityDatabaseCollection = class {
     const data2 = {};
     for (const key7 in this.schema) {
       const value = item[key7];
-      if (isNullish(value,)) continue;
+      if (isNullish2(value,)) continue;
       const definition = this.schema[key7];
       if (isUndefined(definition,)) continue;
       data2[key7] = {
@@ -34232,10 +34895,10 @@ var SortItemsPlan = class extends QueryPlan {
         if (DatabaseValue.equal(left, right, collation,)) {
           continue;
         }
-        if (DatabaseValue.lessThan(left, right, collation,) || isNullish(left,)) {
+        if (DatabaseValue.lessThan(left, right, collation,) || isNullish2(left,)) {
           return isAscending ? -1 : 1;
         }
-        if (DatabaseValue.greaterThan(left, right, collation,) || isNullish(right,)) {
+        if (DatabaseValue.greaterThan(left, right, collation,) || isNullish2(right,)) {
           return isAscending ? 1 : -1;
         }
         throw new Error('Invalid comparison result.',);
@@ -34272,13 +34935,13 @@ var SliceItemsPlan = class extends QueryPlan {
   getOffset() {
     var _a;
     const value = (_a = this.offsetExpression) == null ? void 0 : _a.evaluate();
-    if (isNullish(value,) || value.type !== 'number') return;
+    if (isNullish2(value,) || value.type !== 'number') return;
     return value.value;
   }
   getLimit() {
     var _a;
     const value = (_a = this.limitExpression) == null ? void 0 : _a.evaluate();
-    if (isNullish(value,) || value.type !== 'number') return;
+    if (isNullish2(value,) || value.type !== 'number') return;
     return value.value;
   }
   async _execute() {
@@ -34538,7 +35201,7 @@ function getSelectKey(expression,) {
   throw new Error('Can\'t serialize expression',);
 }
 async function resolveValue(richTextResolver, value,) {
-  if (isNullish(value,)) {
+  if (isNullish2(value,)) {
     return null;
   }
   if (value.type === 'richtext') {
@@ -35379,6 +36042,14 @@ function useQueryCount(query,) {
   const collection = useQueryData(countQuery,);
   return collection.length;
 }
+function usePreloadQuery() {
+  const {
+    activeLocale,
+  } = useLocaleInfo();
+  return useCallback(async (query) => {
+    return queryCache.get(query, activeLocale,).waitFor();
+  }, [activeLocale,],);
+}
 function getWhereExpressionFromPathVariables(pathVariables,) {
   const entries = Object.entries(pathVariables,).filter(([, value,],) => {
     if (isUndefined(value,)) return false;
@@ -35499,11 +36170,13 @@ var VariantSelector = /* @__PURE__ */ ((VariantSelector2) => {
   VariantSelector2['Variant'] = 'v';
   return VariantSelector2;
 })(VariantSelector || {},);
-function getGesture(enabledGestures, isHovered, isPressed,) {
+function getGesture(enabledGestures, isHovered, isPressed, isLoading,) {
   const {
     hover,
     pressed,
+    loading,
   } = enabledGestures || {};
+  if (loading && isLoading) return 'loading';
   if (pressed && isPressed) return 'pressed';
   if (hover && isHovered) return 'hover';
 }
@@ -35528,6 +36201,7 @@ function useVariantState({
   variantClassNames = {},
 },) {
   const forceUpdate = useForceUpdate3();
+  const isCanvas = useIsOnFramerCanvas();
   const validBaseVariants = useConstant2(() => new Set(externalCycleOrder,));
   const internalState = React4.useRef({
     isHovered: false,
@@ -35536,6 +36210,7 @@ function useVariantState({
     baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants,),
     lastVariant: variant,
     gestureVariant: void 0,
+    loadedBaseVariant: {},
     // When used in generated components, these are static values defined
     // outside of the component function that also need to not result in
     // memoized values being recalculated, so we dump them into the ref.
@@ -35552,13 +36227,14 @@ function useVariantState({
       defaultVariant: defaultVariant2,
     } = internalState.current;
     const nextBaseVariant = safeBaseVariant(targetBaseVariant, defaultVariant2, validBaseVariants,);
-    const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2,);
+    const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2, false,);
     const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture,) : void 0;
     return [nextBaseVariant, nextGestureVariant,];
   }, [validBaseVariants,],);
   const setGestureState = React4.useCallback(({
     isHovered: isHovered2,
     isPressed: isPressed2,
+    isLoading,
   },) => {
     if (isHovered2 !== void 0) internalState.current.isHovered = isHovered2;
     if (isPressed2 !== void 0) internalState.current.isPressed = isPressed2;
@@ -35591,6 +36267,13 @@ function useVariantState({
       forceUpdate();
     }
   }, [resolveNextVariant, forceUpdate,],);
+  const clearLoadingGesture = React4.useCallback(() => {
+    const {
+      baseVariant: baseVariant2,
+    } = internalState.current;
+    internalState.current.loadedBaseVariant[baseVariant2] = true;
+    forceUpdate();
+  }, [forceUpdate,],);
   if (variant !== internalState.current.lastVariant) {
     const [nextBase, nextGesture,] = resolveNextVariant(variant,);
     internalState.current.lastVariant = nextBase;
@@ -35606,12 +36289,17 @@ function useVariantState({
     enabledGestures,
     isHovered,
     isPressed,
+    loadedBaseVariant,
   } = internalState.current;
   const addVariantProps = useAddVariantProps(internalState.current.baseVariant, internalState.current.gestureVariant, variantProps2,);
   return React4.useMemo(() => {
+    var _a;
     const variants = [];
     if (baseVariant !== defaultVariant) variants.push(baseVariant,);
-    if (gestureVariant) variants.push(gestureVariant,);
+    const hasLoadingVariant = (_a = enabledGestures == null ? void 0 : enabledGestures[baseVariant]) == null ? void 0 : _a.loading;
+    const isLoading = !isCanvas && !!hasLoadingVariant && !loadedBaseVariant[baseVariant];
+    const gesture = isLoading ? createGestureVariant(baseVariant, 'loading',) : gestureVariant;
+    if (gesture) variants.push(gesture,);
     const gestures = enabledGestures == null ? void 0 : enabledGestures[baseVariant];
     const gestureHandlers = {
       onMouseEnter: () =>
@@ -35642,24 +36330,28 @@ function useVariantState({
     return {
       variants,
       baseVariant,
-      gestureVariant,
+      gestureVariant: gesture,
+      isLoading,
       transition: activeTransition(internalState.current.transitions, baseVariant,),
       setVariant,
       setGestureState,
+      clearLoadingGesture,
       addVariantProps,
       gestureHandlers,
-      classNames: cx(createVariantClassName(baseVariant, variantClassNames,), getGesture(gestures, isHovered, isPressed,),),
+      classNames: cx(createVariantClassName(baseVariant, variantClassNames,), getGesture(gestures, isHovered, isPressed, isLoading,),),
     };
   }, [
     baseVariant,
     gestureVariant,
     isHovered,
     isPressed,
+    loadedBaseVariant,
     addVariantProps,
     setVariant,
     defaultVariant,
     enabledGestures,
     setGestureState,
+    clearLoadingGesture,
     variantClassNames,
   ],);
 }
@@ -41184,6 +41876,14 @@ function upgradeComponentFontV1(font,) {
     source,
   };
 }
+function withPerformanceMarks(prefix2, callback,) {
+  const markStart = `${prefix2}-start`;
+  performance.mark(markStart,);
+  callback();
+  const markEnd = `${prefix2}-end`;
+  performance.mark(markEnd,);
+  performance.measure(prefix2, markStart, markEnd,);
+}
 function loadJSON(url,) {
   return fetch(url, {
     mode: 'cors',
@@ -41357,7 +42057,7 @@ var package_default = {
     yargs: '^17.6.2',
   },
   peerDependencies: {
-    'framer-motion': '11.2.10',
+    'framer-motion': '11.2.13',
     react: '^18.2.0',
     'react-dom': '^18.2.0',
   },
@@ -41492,6 +42192,7 @@ export {
   environment,
   ErrorPlaceholder,
   executeInRenderEnvironment,
+  Fetcher,
   filterProps,
   finiteNumber,
   FlatTree,
@@ -41578,6 +42279,7 @@ export {
   MainLoop,
   makePaddingString,
   makeUseVisualState,
+  markHydrationStart,
   memoize2 as memoize,
   mirrorEasing,
   mix,
@@ -41665,6 +42367,7 @@ export {
   transform,
   transformString,
   transformTemplate,
+  turnOffReactEventHandling,
   unwrapMotionComponent,
   useActiveTargetCallback,
   useActiveVariantCallback,
@@ -41718,6 +42421,8 @@ export {
   useOnVariantChange,
   useOverlayState,
   usePageEffects,
+  usePrefetch,
+  usePreloadQuery,
   usePresence,
   usePrototypeNavigate,
   useProvidedWindow,
@@ -41761,6 +42466,7 @@ export {
   WithOverride,
   withParallaxTransform,
   withPath,
+  withPerformanceMarks,
   withShape,
   withStyleAppearEffect,
   withVariantAppearEffect,