unframer 2.11.2 → 2.13.0

package/src/framer.js

@@ -15349,7 +15349,7 @@ function steps(numSteps, direction = 'end',) {
   };
 }
 
-// https :https://app.framerstatic.com/framer.K3G2LCX5.mjs
+// https :https://app.framerstatic.com/framer.K777Q2AQ.mjs
 init_chunk_QLPHEVXG();
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -17009,8 +17009,8 @@ function renderPage(Page4, defaultPageStyle,) {
   return React4.isValidElement(Page4,) ? React4.cloneElement(Page4, style,) : React4.createElement(Page4, style,);
 }
 var NotFoundError = class extends Error {};
-var ErrorBoundaryCaughtError = class extends Error {};
-var ErrorBoundary = class extends Component {
+var NotFoundErrorBoundaryCaughtError = class extends Error {};
+var NotFoundErrorBoundary = class extends Component {
   constructor(props,) {
     super(props,);
     this.state = {
@@ -17041,7 +17041,7 @@ var ErrorBoundary = class extends Component {
       return this.props.children;
     }
     if (!(this.state.error instanceof NotFoundError)) {
-      const error = new ErrorBoundaryCaughtError();
+      const error = new NotFoundErrorBoundaryCaughtError();
       error.cause = this.state.error;
       throw error;
     }
@@ -17055,6 +17055,160 @@ var ErrorBoundary = class extends Component {
     return renderPage(notFoundPage, defaultPageStyle,);
   }
 };
+function isObject(value,) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value,);
+}
+function isString(value,) {
+  return typeof value === 'string';
+}
+var preloadKey = 'preload';
+function isLazyComponentType(componentType,) {
+  return typeof componentType === 'object' && componentType !== null && !React4.isValidElement(componentType,) &&
+    preloadKey in componentType;
+}
+function lazy(factory,) {
+  const LazyComponent = React4.lazy(factory,);
+  let factoryPromise;
+  let LoadedComponent;
+  const Component18 = React4.forwardRef(function LazyWithPreload(props, ref,) {
+    return React4.createElement(
+      LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent,
+      ref
+        ? {
+          ref,
+          ...props,
+        }
+        : props,
+    );
+  },);
+  Component18.preload = () => {
+    if (!factoryPromise) {
+      factoryPromise = factory().then((module) => {
+        LoadedComponent = module.default;
+        return LoadedComponent;
+      },);
+    }
+    return factoryPromise;
+  };
+  return Component18;
+}
+function getRouteElementId(route, hash2,) {
+  if (hash2 && route) {
+    if (route.elements && hash2 in route.elements) {
+      return route.elements[hash2];
+    } else {
+      return hash2;
+    }
+  }
+  return void 0;
+}
+function isBot(userAgent,) {
+  return /bot|-google|google-|yandex|ia_archiver/iu.test(userAgent,);
+}
+function yieldToMain(options,) {
+  if ('scheduler' in window) {
+    if ('yield' in scheduler) return scheduler.yield(options,);
+    if ('postTask' in scheduler) return scheduler.postTask(() => {}, options,);
+  }
+  if ((options === null || options === void 0 ? void 0 : options.priority) === 'user-blocking') {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    setTimeout(resolve,);
+  },);
+}
+async function yieldBefore(fn, options,) {
+  await yieldToMain(options,);
+  return fn();
+}
+function interactionResponse(options,) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 100,);
+    requestAnimationFrame(() => {
+      void yieldBefore(resolve, options,);
+    },);
+  },);
+}
+function useAfterPaintEffect(effectFn, deps, opts, useEffectFn = useLayoutEffect,) {
+  useEffectFn(() => {
+    const runAfterPaint = async (fn) => {
+      await interactionResponse(opts,);
+      return fn();
+    };
+    const runPromise = runAfterPaint(effectFn,);
+    return () => {
+      void (async () => {
+        const cleanup = await runPromise;
+        if (!cleanup) return;
+        void runAfterPaint(cleanup,);
+      })();
+    };
+  }, deps,);
+}
+var noop2 = () => {};
+var EMPTY_ARRAY = [];
+var requestIdleCallback = /* @__PURE__ */ (() => {
+  return typeof window !== 'undefined' ? window.requestIdleCallback || window.setTimeout : setTimeout;
+})();
+var ErrorBoundaryCaughtError = class extends NotFoundErrorBoundaryCaughtError {
+  constructor() {
+    super(...arguments,);
+    this.caught = true;
+  }
+};
+var GracefullyDegradingErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments,);
+    this.state = {
+      error: void 0,
+    };
+    this.message = 'Made UI non-interactive due to the error above. We\'ve logged it, but also please report this to the Framer team.';
+  }
+  static getDerivedStateFromError(error,) {
+    return {
+      error,
+    };
+  }
+  componentDidCatch(error,) {
+    var _a;
+    if ('cause' in error) {
+      error = error.cause;
+    }
+    console.error(this.message,);
+    if (Math.random() > 0.01) return;
+    const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
+    (_a = window.__framer_events) === null || _a === void 0 ? void 0 : _a.push(['published_site_load_error', {
+      message: String(error,),
+      stack,
+    },],);
+  }
+  render() {
+    var _a;
+    const error = this.state.error;
+    if (!error) return this.props.children;
+    if (!isBot(navigator.userAgent,)) {
+      const fatalError = new ErrorBoundaryCaughtError();
+      fatalError.cause = 'cause' in error ? error.cause : error;
+      console.error(this.message, fatalError.cause,);
+      throw fatalError;
+    }
+    return (
+      // This has the caveat that we will slightly modify the DOM, but it appears to be fine in this case.
+      // The alternative would be to queue a new task that runs after and then set the innerHTML (= avoids the dummy-div), but that means we'll have DOM -> no DOM -> DOM transitions. With the div, we have DOM -> DOM and remove possible race-conditions.
+      jsx('div', {
+        style: {
+          display: 'contents',
+        },
+        suppressHydrationWarning: true,
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: React would unmount the root on errors, but we must ensure that bots can still read the SSR'd content.
+        dangerouslySetInnerHTML: {
+          __html: '<!-- DOM replaced by GracefullyDegradingErrorBoundary -->' +
+            (((_a = document.getElementById('main',)) === null || _a === void 0 ? void 0 : _a.innerHTML) || ''),
+        },
+      },)
+    );
+  }
+};
 var pathVariablesRegExpRaw = ':([a-z]\\w*)';
 var pathVariablesRegExp = /* @__PURE__ */ new RegExp(pathVariablesRegExpRaw, 'gi',);
 function fillPathVariables(path, variables,) {
@@ -17212,98 +17366,6 @@ function forwardQueryParams(queryParamsString, href,) {
   }
   return hrefWithoutHash.substring(0, startOfSearch + 1,) + newSearchParams.toString() + hash2;
 }
-function isObject(value,) {
-  return typeof value === 'object' && value !== null && !Array.isArray(value,);
-}
-function isString(value,) {
-  return typeof value === 'string';
-}
-var preloadKey = 'preload';
-function isLazyComponentType(componentType,) {
-  return typeof componentType === 'object' && componentType !== null && !React4.isValidElement(componentType,) &&
-    preloadKey in componentType;
-}
-function lazy(factory,) {
-  const LazyComponent = React4.lazy(factory,);
-  let factoryPromise;
-  let LoadedComponent;
-  const Component16 = React4.forwardRef(function LazyWithPreload(props, ref,) {
-    return React4.createElement(
-      LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent,
-      ref
-        ? {
-          ref,
-          ...props,
-        }
-        : props,
-    );
-  },);
-  Component16.preload = () => {
-    if (!factoryPromise) {
-      factoryPromise = factory().then((module) => {
-        LoadedComponent = module.default;
-        return LoadedComponent;
-      },);
-    }
-    return factoryPromise;
-  };
-  return Component16;
-}
-function getRouteElementId(route, hash2,) {
-  if (hash2 && route) {
-    if (route.elements && hash2 in route.elements) {
-      return route.elements[hash2];
-    } else {
-      return hash2;
-    }
-  }
-  return void 0;
-}
-function isBot(userAgent,) {
-  return /bot|-google|google-|yandex|ia_archiver/iu.test(userAgent,);
-}
-function yieldToMain(options,) {
-  if ('scheduler' in window) {
-    if ('yield' in scheduler) return scheduler.yield(options,);
-    if ('postTask' in scheduler) return scheduler.postTask(() => {}, options,);
-  }
-  if ((options === null || options === void 0 ? void 0 : options.priority) === 'user-blocking') {
-    return Promise.resolve();
-  }
-  return new Promise((resolve) => {
-    setTimeout(resolve,);
-  },);
-}
-async function yieldBefore(fn, options,) {
-  await yieldToMain(options,);
-  return fn();
-}
-function interactionResponse(options,) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, 100,);
-    requestAnimationFrame(() => {
-      void yieldBefore(resolve, options,);
-    },);
-  },);
-}
-function useAfterPaintEffect(effectFn, deps, opts, useEffectFn = useLayoutEffect,) {
-  useEffectFn(() => {
-    const runAfterPaint = async (fn) => {
-      await interactionResponse(opts,);
-      return fn();
-    };
-    const runPromise = runAfterPaint(effectFn,);
-    return () => {
-      void (async () => {
-        const cleanup = await runPromise;
-        if (!cleanup) return;
-        void runAfterPaint(cleanup,);
-      })();
-    };
-  }, deps,);
-}
-var noop2 = () => {};
-var EMPTY_ARRAY = [];
 async function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils,) {
   var _a, _b, _c;
   let resultPath = path;
@@ -17756,11 +17818,8 @@ function createViewTransitionStylesheet({
   styleElement.textContent = styleContent;
   document.head.appendChild(styleElement,);
 }
-var _requestIdleCallback = /* @__PURE__ */ (() => {
-  return typeof window !== 'undefined' ? window.requestIdleCallback || window.setTimeout : setTimeout;
-})();
 function removeViewTransitionStylesheet() {
-  _requestIdleCallback(() => {
+  requestIdleCallback(() => {
     frame.render(() => {
       performance.mark('framer-vt-remove',);
       const element = document.getElementById(VIEW_TRANSITION_STYLES_ID,);
@@ -17887,14 +17946,15 @@ async function pushRouteState(
     path,
   } = route;
   if (!path) return;
+  const newPath = getPathForRoute(route, {
+    currentRoutePath,
+    currentPathVariables,
+    hash: hash2,
+    pathVariables,
+    preserveQueryParams,
+  },);
+  const currentUrl = window.location.href;
   try {
-    const newPath = getPathForRoute(route, {
-      currentRoutePath,
-      currentPathVariables,
-      hash: hash2,
-      pathVariables,
-      preserveQueryParams,
-    },);
     const urlUpdatePromise = pushHistoryState(
       {
         routeId,
@@ -17909,6 +17969,15 @@ async function pushRouteState(
     return await urlUpdatePromise;
   } catch {}
 }
+function updateCanonicalURL(url, prevUrl,) {
+  requestIdleCallback(() => {
+    const canonical = document.querySelector('link[rel=\'canonical\']',);
+    if (!canonical) return;
+    const newURL = new URL(url, prevUrl,);
+    newURL.search = '';
+    canonical.setAttribute('href', newURL.toString(),);
+  },);
+}
 function isHistoryState(data2,) {
   const routeIdKey = 'routeId';
   return isObject(data2,) && isString(data2[routeIdKey],);
@@ -17933,6 +18002,7 @@ async function pushHistoryState(data2, url, awaitPaintBeforeUpdate = false, isNa
     },);
   }
   performance.mark('framer-history-push',);
+  updateCanonicalURL(url, window.location.href,);
   if (!isNavigationTransition) {
     window.history.pushState(data2, '', url,);
     return;
@@ -18018,10 +18088,11 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId,) {
         isString(localeId,) ? localeId : void 0,
         isString(hash2,) ? hash2 : void 0,
         isObject(pathVariables,) ? pathVariables : void 0,
-        false,
         true,
+        false,
       );
     };
+    updateCanonicalURL(window.location.href,);
     const transition = await startViewTransition2(currentRouteId.current, routeId, changeRoute, false,);
     if (transition) {
       void transition.updateCallbackDone.then((_d = viewTransitionReady.current) === null || _d === void 0 ? void 0 : _d.resolve,).catch(
@@ -18449,8 +18520,8 @@ var SuspenseErrorBoundary = class extends Component {
     };
   }
   static getDerivedStateFromError(error,) {
-    if (!(error instanceof ErrorBoundaryCaughtError)) {
-      console.error('Derived error in SuspenseErrorBoundary', error,);
+    if (!(error instanceof NotFoundErrorBoundaryCaughtError)) {
+      console.error('Derived error in SuspenseErrorBoundary:\n', error,);
     }
     return {
       error,
@@ -18458,25 +18529,24 @@ var SuspenseErrorBoundary = class extends Component {
   }
   componentDidCatch(error, errorInfo,) {
     var _a;
-    if (error instanceof ErrorBoundaryCaughtError) {
+    if (error instanceof NotFoundErrorBoundaryCaughtError) {
       return;
     }
     const componentStack = errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack;
-    console.error('Caught error in SuspenseErrorBoundary', error, componentStack,);
-    if (typeof window !== 'undefined') {
-      const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
-      (_a = window.__framer_events) === null || _a === void 0 ? void 0 : _a.push(['published_site_load_recoverable_error', {
-        message: String(error,),
-        stack,
-        // only log componentStack if we don't have a stack
-        componentStack: stack ? void 0 : componentStack,
-      },],);
-    }
+    console.error('Caught error in SuspenseErrorBoundary:\n', error, componentStack,);
+    const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
+    (_a = window.__framer_events) === null || _a === void 0 ? void 0 : _a.push(['published_site_load_recoverable_error', {
+      message: String(error,),
+      stack,
+      // only log componentStack if we don't have a stack
+      componentStack: stack ? void 0 : componentStack,
+    },],);
   }
   render() {
-    if (this.state.error === void 0) return this.props.children;
-    if (this.state.error instanceof ErrorBoundaryCaughtError) {
-      throw this.state.error.cause;
+    const error = this.state.error;
+    if (error === void 0) return this.props.children;
+    if (error instanceof NotFoundErrorBoundaryCaughtError) {
+      throw error.cause;
     }
     window.__framer_STPD_OPT_OUT__ = true;
     return jsx(Suspense2, {
@@ -18562,8 +18632,9 @@ function useNavigationTransition(enableAsyncURLUpdates,) {
   return useCallback(async (transitionFn, updateURL, isAbortable = true,) => {
     var _a;
     setHydrationDone();
+    const hasUpdateURL = updateURL !== void 0;
     if (!enableAsyncURLUpdates) {
-      await (updateURL === null || updateURL === void 0 ? void 0 : updateURL());
+      if (hasUpdateURL) await updateURL();
       transitionFn();
       void monitorNextPaintAfterRender();
       return new Promise((resolve) => {
@@ -18575,7 +18646,7 @@ function useNavigationTransition(enableAsyncURLUpdates,) {
     navigationController.current = controller;
     const signal = controller === null || controller === void 0 ? void 0 : controller.signal;
     const nextRender = monitorNextPaintAfterRender();
-    if (!updateURL) {
+    if (!hasUpdateURL) {
       navigationController.current = void 0;
       transitionFn(signal,);
       return nextRender;
@@ -18714,7 +18785,7 @@ function Router({
     startViewTransition2,
   ],);
   const setCurrentRouteId = useCallback(
-    (routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false, updateURL,) => {
+    (routeId, localeId, hash2, pathVariables, isHistoryTransition, smoothScroll = false, updateURL,) => {
       const currentRouteId2 = currentRouteRef.current;
       currentRouteRef.current = routeId;
       currentPathVariablesRef.current = pathVariables;
@@ -18803,8 +18874,8 @@ function Router({
       currentRouteLocaleId,
       routeElementId,
       pathVariables,
-      smoothScroll,
       false,
+      smoothScroll,
       disableHistory ? void 0 : updateURL,
     );
   }, [routes, setCurrentRouteId, disableHistory, preserveQueryParams, enableAsyncURLUpdates,],);
@@ -18829,42 +18900,44 @@ function Router({
     ? fillPathVariables(current.path, currentPathVariables,)
     : current.path;
   const remountKey = String(currentLocaleId,) + pathWithFilledVariables;
-  return jsx(RouterAPIProvider, {
-    api,
-    children: jsx(LocaleInfoContext.Provider, {
-      value: localeInfo,
-      children: jsxs(SuspenseThatPreservesDom, {
-        children: [
-          jsx(ErrorBoundary, {
-            notFoundPage,
-            defaultPageStyle,
-            forceUpdateKey: dep,
-            children: jsx(WithLayoutTemplate, {
-              LayoutTemplate,
-              routeId: currentRouteId,
-              children: jsxs(Fragment, {
-                children: [
-                  jsx(MarkSuspenseEffects.Start, {},),
-                  pageExistsInCurrentLocale
-                    ? renderPage(
-                      current.page,
-                      LayoutTemplate
-                        ? {
-                          ...defaultPageStyle,
-                          display: 'content',
-                        }
-                        : defaultPageStyle,
-                    )
-                    : // LAYOUT_TEMPLATE @TODO: display: content for not found page?
-                    notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
-                ],
-              }, remountKey,),
+  return jsx(GracefullyDegradingErrorBoundary, {
+    children: jsx(RouterAPIProvider, {
+      api,
+      children: jsx(LocaleInfoContext.Provider, {
+        value: localeInfo,
+        children: jsxs(SuspenseThatPreservesDom, {
+          children: [
+            jsx(NotFoundErrorBoundary, {
+              notFoundPage,
+              defaultPageStyle,
+              forceUpdateKey: dep,
+              children: jsx(WithLayoutTemplate, {
+                LayoutTemplate,
+                routeId: currentRouteId,
+                children: jsxs(Fragment, {
+                  children: [
+                    jsx(MarkSuspenseEffects.Start, {},),
+                    pageExistsInCurrentLocale
+                      ? renderPage(
+                        current.page,
+                        LayoutTemplate
+                          ? {
+                            ...defaultPageStyle,
+                            display: 'content',
+                          }
+                          : defaultPageStyle,
+                      )
+                      : // LAYOUT_TEMPLATE @TODO: display: content for not found page?
+                      notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
+                  ],
+                }, remountKey,),
+              },),
             },),
-          },),
-          jsx(TurnOnReactEventHandling, {},),
-          jsx(MarkSuspenseEffects.End, {},),
-          editorBar,
-        ],
+            jsx(TurnOnReactEventHandling, {},),
+            jsx(MarkSuspenseEffects.End, {},),
+            editorBar,
+          ],
+        },),
       },),
     },),
   },);
@@ -21320,6 +21393,7 @@ var mockWindow = {
   scrollY: 0,
   location: {
     href: '',
+    pathname: '',
   },
   document: {
     cookie: '',
@@ -21348,6 +21422,7 @@ var mockWindow = {
   innerWidth: 0,
   SVGSVGElement: {},
   open: function (_url, _target, _features,) {},
+  __framer_events: [],
 };
 var safeWindow = typeof window === 'undefined' ? mockWindow : window;
 var _raf = (f) => {
@@ -22303,7 +22378,7 @@ function getColorsFromTheme(theme, type,) {
     screenColor: isDarkTheme ? '#333' : '#eee',
   };
 }
-var ErrorBoundary2 = class extends Component {
+var ErrorBoundary = class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'state', {},);
@@ -22462,7 +22537,7 @@ function Device({
           ref: screenRef,
           children: /* @__PURE__ */ jsx(MotionConfig, {
             transformPagePoint: invertScale2,
-            children: /* @__PURE__ */ jsx(ErrorBoundary2, {
+            children: /* @__PURE__ */ jsx(ErrorBoundary, {
               children,
             },),
           },),
@@ -27212,7 +27287,7 @@ function useMeasuredSize(ref,) {
   return size.current;
 }
 var SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE = 'data-framer-size-compatibility-wrapper';
-var withMeasuredSize = (Component16) => (props) => {
+var withMeasuredSize = (Component18) => (props) => {
   const ref = React4.useRef(null,);
   const size = useMeasuredSize(ref,);
   const dataProps = {
@@ -27229,7 +27304,7 @@ var withMeasuredSize = (Component16) => (props) => {
     },
     ref,
     ...dataProps,
-    children: shouldRender && /* @__PURE__ */ jsx(Component16, {
+    children: shouldRender && /* @__PURE__ */ jsx(Component18, {
       ...props,
       width: (size == null ? void 0 : size.width) ?? fallbackWidth,
       height: (size == null ? void 0 : size.height) ?? fallbackHeight,
@@ -28729,7 +28804,7 @@ var clamp2 = (value, a, b,) => {
 var DraggingContext = /* @__PURE__ */ React4.createContext({
   dragging: false,
 },);
-function WithDragging(Component16,) {
+function WithDragging(Component18,) {
   const _WithDraggingHOC = class extends React4.Component {
     constructor(props, defaultProps,) {
       super(props, defaultProps,);
@@ -29357,7 +29432,7 @@ function WithDragging(Component16,) {
         value: {
           dragging: this.state.isDragging,
         },
-        children: /* @__PURE__ */ jsx(Component16, {
+        children: /* @__PURE__ */ jsx(Component18, {
           ...originalProps,
         },),
       },);
@@ -29395,9 +29470,9 @@ function WithDragging(Component16,) {
     constraints: {},
     mouseWheel: false,
   },);
-  __publicField(WithDraggingHOC, 'defaultProps', Object.assign({}, Component16.defaultProps, _WithDraggingHOC.draggingDefaultProps,),);
+  __publicField(WithDraggingHOC, 'defaultProps', Object.assign({}, Component18.defaultProps, _WithDraggingHOC.draggingDefaultProps,),);
   const withDragging = WithDraggingHOC;
-  (0, import_hoist_non_react_statics.default)(withDragging, Component16,);
+  (0, import_hoist_non_react_statics.default)(withDragging, Component18,);
   return withDragging;
 }
 var hoverProps = {
@@ -32201,7 +32276,7 @@ function useInfiniteScroll({
     };
   }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,],);
 }
-function withInfiniteScroll(Component16,) {
+function withInfiniteScroll(Component18,) {
   return React4.forwardRef(({
     __paginationInfo,
     __loadMore,
@@ -32215,7 +32290,7 @@ function withInfiniteScroll(Component16,) {
       ref: infiniteScrollRef,
       paginationInfo: __paginationInfo,
     },);
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ...props,
       ref: infiniteScrollRef,
     },);
@@ -35156,7 +35231,7 @@ function convertColorProps(props,) {
   }
   return props;
 }
-function WithOverride(Component16, override,) {
+function WithOverride(Component18, override,) {
   const useOverride = typeof override === 'function' ? (props) => override(convertColorProps(props,),) : () => convertColorProps(override,);
   const ComponentWithOverride = function (props,) {
     useContext(DataObserverContext,);
@@ -35165,14 +35240,14 @@ function WithOverride(Component16, override,) {
       style,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ...rest,
       ...overrideProps,
       _initialStyle: style,
     },);
   };
-  (0, import_hoist_non_react_statics4.default)(ComponentWithOverride, Component16,);
-  ComponentWithOverride['displayName'] = `WithOverride(${Component16.displayName || Component16.name})`;
+  (0, import_hoist_non_react_statics4.default)(ComponentWithOverride, Component18,);
+  ComponentWithOverride['displayName'] = `WithOverride(${Component18.displayName || Component18.name})`;
   return ComponentWithOverride;
 }
 var prefix = '__framer__';
@@ -36014,11 +36089,11 @@ function addMotionValueStyle(style, values,) {
 function isVariantOrVariantList(value,) {
   return isString2(value,) || Array.isArray(value,);
 }
-var withFX = (Component16) =>
+var withFX = (Component18) =>
   React4.forwardRef((props, forwardedRef,) => {
     var _a;
     if (props.__withFX) {
-      return /* @__PURE__ */ jsx(Component16, {
+      return /* @__PURE__ */ jsx(Component18, {
         ...props,
         animate: void 0,
         initial: void 0,
@@ -36029,7 +36104,7 @@ var withFX = (Component16) =>
     if (RenderTarget.current() === RenderTarget.canvas) {
       const animate4 = isVariantOrVariantList(props.animate,) ? props.animate : void 0;
       const initial2 = isVariantOrVariantList(props.initial,) ? props.initial : void 0;
-      return /* @__PURE__ */ jsx(Component16, {
+      return /* @__PURE__ */ jsx(Component18, {
         ...props,
         animate: animate4,
         initial: initial2,
@@ -36133,7 +36208,7 @@ var withFX = (Component16) =>
         exit,
       }
       : {};
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ...forwardedProps,
       ...motionGestures,
       __withFX: true,
@@ -36263,13 +36338,13 @@ var ComponentViewportContext = /* @__PURE__ */ React4.createContext({},);
 function useComponentViewport() {
   return React4.useContext(ComponentViewportContext,);
 }
-var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(({
+var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(function ComponentViewportProvider2({
   width,
   height,
   y,
   children,
   ...rest
-}, ref,) => {
+}, ref,) {
   const componentViewport = React4.useMemo(() => {
     return {
       width,
@@ -36283,10 +36358,10 @@ var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(({
     children: cloneWithPropsAndRef(children, rest,),
   },);
 },);
-var withGeneratedLayoutId = (Component16) =>
+var withGeneratedLayoutId = (Component18) =>
   React4.forwardRef((props, ref,) => {
     const layoutId = useLayoutId2(props,);
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       layoutId,
       ...props,
       layoutIdKey: void 0,
@@ -36294,7 +36369,93 @@ var withGeneratedLayoutId = (Component16) =>
       ref,
     },);
   },);
-var ContainerErrorBoundary = class extends Component {
+function collectErrorToAnalytics(error, errorInfo,) {
+  var _a;
+  if (typeof window === 'undefined') return;
+  if (Math.random() > 0.01) return;
+  const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
+  const componentStack = errorInfo == null ? void 0 : errorInfo.componentStack;
+  (_a = safeWindow.__framer_events) == null ? void 0 : _a.push(['published_site_load_recoverable_error', {
+    message: String(error,),
+    stack,
+    // only log componentStack if we don't have a stack
+    componentStack: stack ? void 0 : componentStack,
+  },],);
+}
+function logError(...args) {
+  if (false) return;
+  console.error(...args,);
+}
+function shouldEnableCodeBoundaries() {
+  return RenderTarget.current() !== RenderTarget.canvas;
+}
+function CodeComponentBoundary({
+  errorMessage,
+  fallback,
+  children,
+},) {
+  if (!shouldEnableCodeBoundaries()) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(ClientSideErrorBoundary, {
+    fallback,
+    errorMessage,
+    children: /* @__PURE__ */ jsx(ServerSideErrorBoundary, {
+      fallback,
+      children,
+    },),
+  },);
+}
+var ClientSideErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments,);
+    __publicField(this, 'state', {
+      hasError: false,
+    },);
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true,
+    };
+  }
+  componentDidCatch(error, errorInfo,) {
+    logError(this.props.errorMessage, errorInfo == null ? void 0 : errorInfo.componentStack,);
+    collectErrorToAnalytics(error, errorInfo,);
+  }
+  render() {
+    const {
+      children,
+      fallback = null,
+    } = this.props;
+    const {
+      hasError,
+    } = this.state;
+    return hasError ? fallback : children;
+  }
+};
+function ServerSideErrorBoundary({
+  children,
+  fallback = null,
+},) {
+  return typeof window === 'undefined'
+    ? // On the server, Suspense fallback is activated by errors. So we use the actual Suspense,
+    // and render the actual error fallback if Suspense activates.
+    /* @__PURE__ */
+    jsx(Suspense2, {
+      fallback,
+      children,
+    },)
+    : // On the client, Suspense fallback is activated by data fetching. So we use SuspenseThatPreservesDom,
+    // because we don’t want to render a fallback if the boundary gets inadvertently activated.
+    //
+    // “Why won’t you just render plain children without Suspense?” Because that would cause a hydration mismatch
+    // (the server has Suspense, the client doesn’t).
+    /* @__PURE__ */
+    jsx(SuspenseThatPreservesDom, {
+      children,
+    },);
+}
+var DeprecatedContainerErrorBoundary = class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'state', {
@@ -36304,7 +36465,6 @@ var ContainerErrorBoundary = class extends Component {
   // We use `componentDidCatch` instead of `static getDerivedStateFromError()` because the latter could also catch hydration errors.
   // Hydration errors are recoverable by React, so we don't want to hide the coponent in that case (since the tree will not unmount).
   componentDidCatch(error, errorInfo,) {
-    var _a;
     const componentStack = errorInfo == null ? void 0 : errorInfo.componentStack;
     console.error(
       'Error in component (see previous log). This component has been hidden. Please check any custom code or code overrides to fix.',
@@ -36313,15 +36473,7 @@ var ContainerErrorBoundary = class extends Component {
     this.setState({
       hasError: true,
     },);
-    if (typeof window !== 'undefined' && Math.random() <= 0.01) {
-      const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
-      (_a = window.__framer_events) == null ? void 0 : _a.push(['published_site_load_recoverable_error', {
-        message: String(error,),
-        stack,
-        // only log componentStack if we don't have a stack
-        componentStack: stack ? void 0 : componentStack,
-      },],);
-    }
+    collectErrorToAnalytics(error, errorInfo,);
   }
   render() {
     const {
@@ -36333,14 +36485,84 @@ var ContainerErrorBoundary = class extends Component {
     return hasError ? null : children;
   }
 };
-var Providers = /* @__PURE__ */ React4.forwardRef(({
+var CRASH_ERROR_MESSAGE_PREFIX = 'code-crash:';
+function formatCodeCrashLocationFromSourceNode(scopeId, nodeId,) {
+  return `${CRASH_ERROR_MESSAGE_PREFIX}${scopeId}:${nodeId}`;
+}
+function getErrorMessageForComponent(scopeId, nodeId,) {
+  return getErrorMessageFor('component', scopeId, nodeId,);
+}
+function getErrorMessageForOverride(scopeId, nodeId,) {
+  return getErrorMessageFor('override', scopeId, nodeId,);
+}
+function getErrorMessageFor(element, scopeId, nodeId,) {
+  return `A code ${element} crashed while rendering due to the error above. To find and fix it, open the project in the editor \u2192 open Quick Actions (press Cmd+K or Ctrl+K) \u2192 paste this: ${
+    formatCodeCrashLocationFromSourceNode(scopeId, nodeId,)
+  } \u2192 click \u201CShow Layer\u201D.`;
+}
+var IsInExternalComponentContext = /* @__PURE__ */ (() => React4.createContext(0,))();
+function useExternalComponentNestingLevel() {
+  return React4.useContext(IsInExternalComponentContext,);
+}
+function IsExternalComponent({
+  children,
+},) {
+  const count = React4.useContext(IsInExternalComponentContext,);
+  return /* @__PURE__ */ jsx(IsInExternalComponentContext.Provider, {
+    value: count + 1,
+    children,
+  },);
+}
+function shouldWrapComponentWithBoundary(externalModuleNestingLevel, isAuthoredByUser, isExternalComponent, inComponentSlot,) {
+  const isLocalComponentInstance =
+    // We know a component instance is local when it’s not nested inside any external component...
+    externalModuleNestingLevel === 0 ||
+    // ...or – “Ticker edge case” – when it’s nested inside an external component during React rendering,
+    // but is actually defined in a slot that’s passed into the component. (This is the “Ticker edge case”:
+    // if a site has a Ticker (or any other component with slots), and something in a Ticker’s slot crashes,
+    // we want to disable that something, not the whole ticker.)
+    externalModuleNestingLevel === 1 && inComponentSlot;
+  return (isAuthoredByUser || isExternalComponent) && isLocalComponentInstance;
+}
+function shouldWrapOverrideWithBoundary(externalModuleNestingLevel, inComponentSlot,) {
+  const isWrappingFrameLocalToProject =
+    // We know a frame is local when it’s not nested inside any external component...
+    externalModuleNestingLevel === 0 ||
+    // ...or – “Ticker edge case” – when it’s nested inside an external component during React rendering,
+    // but is actually defined in a slot that’s passed into the component. (This is the “Ticker edge case”:
+    // if a site has a Ticker (or any other component with slots), and an override in a Ticker’s slot crashes,
+    // we want to disable that override, not the whole ticker.)
+    externalModuleNestingLevel === 1 && inComponentSlot;
+  return isWrappingFrameLocalToProject;
+}
+var ContainerInner = /* @__PURE__ */ React4.forwardRef(({
   children,
   layoutId,
   as,
+  scopeId,
+  nodeId,
+  isAuthoredByUser,
+  isModuleExternal,
+  inComponentSlot,
   ...props
 }, ref,) => {
   const outerLayoutId = useConstant2(() => layoutId ? `${layoutId}-container` : void 0);
   const MotionComponent = htmlElementAsMotionComponent(as,);
+  const clonedChildren = React4.Children.map(children, (child) => {
+    return React4.isValidElement(child,)
+      ? React4.cloneElement(child, {
+        layoutId,
+      },)
+      : child;
+  },);
+  const childrenWithCodeBoundary = useWrapWithCodeBoundary(
+    clonedChildren,
+    scopeId,
+    nodeId,
+    isAuthoredByUser,
+    isModuleExternal,
+    inComponentSlot,
+  );
   return /* @__PURE__ */ jsx(MotionComponent, {
     layoutId: outerLayoutId,
     ...props,
@@ -36352,21 +36574,79 @@ var Providers = /* @__PURE__ */ React4.forwardRef(({
         children: /* @__PURE__ */ jsx(LayoutGroup, {
           id: layoutId ?? '',
           inherit: 'id',
-          children: /* @__PURE__ */ jsx(ContainerErrorBoundary, {
-            children: React4.Children.map(children, (child) => {
-              return React4.isValidElement(child,)
-                ? React4.cloneElement(child, {
-                  layoutId,
-                },)
-                : child;
-            },),
-          },),
+          children: childrenWithCodeBoundary,
         },),
       },),
     },),
   },);
 },);
-var Container = /* @__PURE__ */ withGeneratedLayoutId(Providers,);
+var Container = /* @__PURE__ */ withGeneratedLayoutId(ContainerInner,);
+var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, ref,) => {
+  const {
+    as,
+    layoutId,
+    scopeId,
+    nodeId,
+    isAuthoredByUser,
+    rendersWithMotion,
+    isModuleExternal,
+    inComponentSlot,
+    style,
+    children,
+    ...renderableProps
+  } = props;
+  const childrenWithCodeBoundary = useWrapWithCodeBoundary(children, scopeId, nodeId, isAuthoredByUser, isModuleExternal, inComponentSlot,);
+  const tagName = props.as ?? 'div';
+  if (props.rendersWithMotion) {
+    const Component18 = htmlElementAsMotionComponent(tagName,);
+    return /* @__PURE__ */ jsx(Component18, {
+      ref,
+      style: props.style,
+      ...renderableProps,
+      children: childrenWithCodeBoundary,
+    },);
+  } else {
+    const Component18 = tagName;
+    return /* @__PURE__ */ jsx(Component18, {
+      ref,
+      style: props.style,
+      ...renderableProps,
+      children: childrenWithCodeBoundary,
+    },);
+  }
+},);
+function useWrapWithCodeBoundary(children, scopeId, nodeId, isAuthoredByUser, isExternalComponent, inComponentSlot,) {
+  const externalModuleNestingLevel = useExternalComponentNestingLevel();
+  if (
+    // Those props will either be all undefined, which means the Container wasn’t codegenned yet,
+    // and we should use the old ContainerErrorBoundary –
+    // or all defined, which means we have enough information to use the new boundary.
+    isUndefined(scopeId,) || isUndefined(nodeId,)
+  ) {
+    return /* @__PURE__ */ jsx(DeprecatedContainerErrorBoundary, {
+      children,
+    },);
+  }
+  const shouldWrapWithBoundary = shouldWrapComponentWithBoundary(
+    externalModuleNestingLevel,
+    isAuthoredByUser ?? false,
+    isExternalComponent ?? false,
+    inComponentSlot ?? false,
+  );
+  if (shouldWrapWithBoundary) {
+    children = /* @__PURE__ */ jsx(CodeComponentBoundary, {
+      errorMessage: getErrorMessageForComponent(scopeId, nodeId,),
+      fallback: null,
+      children,
+    },);
+  }
+  if (isExternalComponent) {
+    children = /* @__PURE__ */ jsx(IsExternalComponent, {
+      children,
+    },);
+  }
+  return children;
+}
 var StyleSheetContext = /* @__PURE__ */ React4.createContext(void 0,);
 var framerPostSSRCSSSelector = 'style[data-framer-css-ssr-minified]';
 var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
@@ -36379,7 +36659,7 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
   return new Set(componentsWithSSRStylesAttr.split(' ',),);
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
-var withCSS = (Component16, escapedCSS, componentSerializationId,) =>
+var withCSS = (Component18, escapedCSS, componentSerializationId,) =>
   React4.forwardRef((props, ref,) => {
     const {
       sheet,
@@ -36399,7 +36679,7 @@ var withCSS = (Component16, escapedCSS, componentSerializationId,) =>
               __html: concatenatedCSS,
             },
           },),
-          /* @__PURE__ */ jsx(Component16, {
+          /* @__PURE__ */ jsx(Component18, {
             ...props,
             ref,
           },),
@@ -36415,7 +36695,7 @@ var withCSS = (Component16, escapedCSS, componentSerializationId,) =>
         : escapedCSS.split('\n',);
       css2.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2,));
     }, [],);
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ...props,
       ref,
     },);
@@ -37402,10 +37682,10 @@ function ChildrenCanSuspend({
     children,
   },);
 }
-function withChildrenCanSuspend(Component16,) {
+function withChildrenCanSuspend(Component18,) {
   return forwardRef(function withChildrenCanSuspendInner(props, ref,) {
     return /* @__PURE__ */ jsx(ChildrenCanSuspend, {
-      children: /* @__PURE__ */ jsx(Component16, {
+      children: /* @__PURE__ */ jsx(Component18, {
         ...props,
         ref,
       },),
@@ -37956,14 +38236,14 @@ function getRouteFromPageLink(pageLink, router, currentRoute,) {
   } = pageLink;
   return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId,);
 }
-var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(({
+var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(function Link2({
   children,
   href,
   openInNewTab,
   smoothScroll,
   nodeId,
   ...restProps
-}, forwardedRef,) => {
+}, forwardedRef,) {
   const router = useRouter();
   const currentRoute = useCurrentRoute();
   const implicitPathVariables = useImplicitPathVariables();
@@ -39012,12 +39292,8 @@ function PageRoot({
               },
               preserveQueryParams,
               enableAsyncURLUpdates,
-              editorBar: EditorBar && framerSiteId && /* @__PURE__ */ jsx(IgnoreErrors, {
-                children: /* @__PURE__ */ jsx(Suspense2, {
-                  children: /* @__PURE__ */ jsx(EditorBar, {
-                    framerSiteId,
-                  },),
-                },),
+              editorBar: /* @__PURE__ */ jsx(EditorBarLauncher, {
+                EditorBar,
               },),
             },),
           },),
@@ -39043,6 +39319,25 @@ function PageRoot({
     },);
   }
 }
+function EditorBarLauncher({
+  EditorBar,
+},) {
+  const [mounted, setMounted,] = useState(false,);
+  const framerSiteId = useContext(FormContext,);
+  useEffect(() => {
+    startTransition2(() => {
+      setMounted(true,);
+    },);
+  }, [],);
+  if (!EditorBar || !framerSiteId || !mounted) return null;
+  return /* @__PURE__ */ jsx(IgnoreErrors, {
+    children: /* @__PURE__ */ jsx(Suspense2, {
+      children: /* @__PURE__ */ jsx(EditorBar, {
+        framerSiteId,
+      },),
+    },),
+  },);
+}
 function cloneChildrenWithProps(children, props, asNode,) {
   const cloned = React2.Children.map(children, (child) => {
     if (React2.isValidElement(child,)) {
@@ -39685,60 +39980,60 @@ var DatabaseValue = {
    * Checks if the left value is equal to the right value. Returns false if
    * the values are not of the same type.
    */
-  equal(left, right, collation10,) {
+  equal(left, right, collation11,) {
     if ((left == null ? void 0 : left.type) !== (right == null ? void 0 : right.type)) {
       return false;
     }
-    return compare(left, right, collation10,) === 0;
+    return compare(left, right, collation11,) === 0;
   },
   /**
    * Checks if the left value is less than the right value. Returns false if
    * the values are not of the same type.
    */
-  lessThan(left, right, collation10,) {
+  lessThan(left, right, collation11,) {
     if ((left == null ? void 0 : left.type) !== (right == null ? void 0 : right.type)) {
       return false;
     }
-    return compare(left, right, collation10,) < 0;
+    return compare(left, right, collation11,) < 0;
   },
   /**
    * Checks if the left value is less than or equal to the right value.
    * Returns false if the values are not of the same type.
    */
-  lessThanOrEqual(left, right, collation10,) {
+  lessThanOrEqual(left, right, collation11,) {
     if ((left == null ? void 0 : left.type) !== (right == null ? void 0 : right.type)) {
       return false;
     }
-    return compare(left, right, collation10,) <= 0;
+    return compare(left, right, collation11,) <= 0;
   },
   /**
    * Checks if the left value is greater than the right value. Returns false
    * if the values are not of the same type.
    */
-  greaterThan(left, right, collation10,) {
+  greaterThan(left, right, collation11,) {
     if ((left == null ? void 0 : left.type) !== (right == null ? void 0 : right.type)) {
       return false;
     }
-    return compare(left, right, collation10,) > 0;
+    return compare(left, right, collation11,) > 0;
   },
   /**
    * Checks if the left value is greater than or equal to the right value.
    * Returns false if the values are not of the same type.
    */
-  greaterThanOrEqual(left, right, collation10,) {
+  greaterThanOrEqual(left, right, collation11,) {
     if ((left == null ? void 0 : left.type) !== (right == null ? void 0 : right.type)) {
       return false;
     }
-    return compare(left, right, collation10,) >= 0;
+    return compare(left, right, collation11,) >= 0;
   },
   /**
    * Checks if the left value is in the right value. Returns false if the
    * right value is not an array.
    */
-  in(left, right, collation10,) {
+  in(left, right, collation11,) {
     if ((right == null ? void 0 : right.type) !== 'array') return false;
     return right.value.some((item) => {
-      return DatabaseValue.equal(item, left, collation10,);
+      return DatabaseValue.equal(item, left, collation11,);
     },);
   },
   /**
@@ -39746,40 +40041,40 @@ var DatabaseValue = {
    *
    * If source has duplicates, the index of the first occurrence is always returned.
    */
-  indexOf(source, target, collation10,) {
+  indexOf(source, target, collation11,) {
     if ((source == null ? void 0 : source.type) !== 'array') return -1;
     return source.value.findIndex((item) => {
-      return DatabaseValue.equal(item, target, collation10,);
+      return DatabaseValue.equal(item, target, collation11,);
     },);
   },
-  contains(source, target, collation10,) {
+  contains(source, target, collation11,) {
     let sourceValue = toString(source,);
     let targetValue = toString(target,);
     if (isNull(sourceValue,)) return false;
     if (isNull(targetValue,)) return false;
-    if (collation10.type === 0) {
+    if (collation11.type === 0) {
       sourceValue = sourceValue.toLowerCase();
       targetValue = targetValue.toLowerCase();
     }
     return sourceValue.includes(targetValue,);
   },
-  startsWith(source, target, collation10,) {
+  startsWith(source, target, collation11,) {
     let sourceValue = toString(source,);
     let targetValue = toString(target,);
     if (isNull(sourceValue,)) return false;
     if (isNull(targetValue,)) return false;
-    if (collation10.type === 0) {
+    if (collation11.type === 0) {
       sourceValue = sourceValue.toLowerCase();
       targetValue = targetValue.toLowerCase();
     }
     return sourceValue.startsWith(targetValue,);
   },
-  endsWith(source, target, collation10,) {
+  endsWith(source, target, collation11,) {
     let sourceValue = toString(source,);
     let targetValue = toString(target,);
     if (isNull(sourceValue,)) return false;
     if (isNull(targetValue,)) return false;
-    if (collation10.type === 0) {
+    if (collation11.type === 0) {
       sourceValue = sourceValue.toLowerCase();
       targetValue = targetValue.toLowerCase();
     }
@@ -39825,7 +40120,7 @@ var DatabaseValue = {
     }
   },
 };
-function compare(left, right, collation10,) {
+function compare(left, right, collation11,) {
   if (isNull(left,) || isNull(right,)) {
     assert(left === right,);
     return 0;
@@ -39842,7 +40137,7 @@ function compare(left, right, collation10,) {
         const rightItem = right.value[i];
         assert(!isUndefined(leftItem,), 'Left item must exist',);
         assert(!isUndefined(rightItem,), 'Right item must exist',);
-        const result = compare(leftItem, rightItem, collation10,);
+        const result = compare(leftItem, rightItem, collation11,);
         if (result !== 0) return result;
       }
       return 0;
@@ -39910,7 +40205,7 @@ function compare(left, right, collation10,) {
         const rightValue = right.value[rightKey];
         assert(!isUndefined(leftValue,), 'Left value must exist',);
         assert(!isUndefined(rightValue,), 'Right value must exist',);
-        const result = compare(leftValue, rightValue, collation10,);
+        const result = compare(leftValue, rightValue, collation11,);
         if (result !== 0) return result;
       }
       return 0;
@@ -39935,7 +40230,7 @@ function compare(left, right, collation10,) {
       assert(left.type === right.type,);
       let leftValue = left.value;
       let rightValue = right.value;
-      if (collation10.type === 0) {
+      if (collation11.type === 0) {
         leftValue = left.value.toLowerCase();
         rightValue = right.value.toLowerCase();
       }
@@ -39952,6 +40247,205 @@ var unknownDefinition = {
   type: 'unknown',
   isNullable: true,
 };
+function getNetworkLatency() {
+  return 25;
+}
+function getNetworkSpeed() {
+  return 100 * 125;
+}
+var KB = 1e3;
+var Cost = class {
+  constructor(network,) {
+    this.network = network;
+  }
+  static estimate(totalRequests, transferredBytes,) {
+    const latency = getNetworkLatency();
+    const speed = getNetworkSpeed();
+    const network = totalRequests * latency + transferredBytes / speed;
+    return new Cost(network,);
+  }
+  static max(left, right,) {
+    const network = Math.max(left.network, right.network,);
+    return new Cost(network,);
+  }
+  static compare(left, right,) {
+    if (left.network < right.network) return -1;
+    if (left.network > right.network) return 1;
+    return 0;
+  }
+  add(cost,) {
+    this.network += cost.network;
+    return this;
+  }
+  toString() {
+    return `${this.network}ms`;
+  }
+};
+function GroupId(id3,) {
+  return id3;
+}
+var Group = class {
+  constructor(id3, relational,) {
+    this.id = id3;
+    this.relational = relational;
+    __publicField(this, 'nodes', [],);
+    __publicField(this, 'winners', /* @__PURE__ */ new Map(),);
+  }
+  /**
+   * Adds a node to the group. Throws an error if the node is already in a
+   * group.
+   */
+  addNode(node,) {
+    this.nodes.push(node,);
+    node.setGroup(this,);
+  }
+  /**
+   * Returns the winner for the given required physical props. The winner
+   * stores the best node and its cost. This is used to find the best node in
+   * the group.
+   */
+  getWinner(required,) {
+    const hash2 = required.getHash();
+    const existing = this.winners.get(hash2,);
+    if (existing) return existing;
+    const winner = new Winner();
+    this.winners.set(hash2, winner,);
+    return winner;
+  }
+  /**
+   * Returns the optimized version of the node. The optimized version is the
+   * node with the lowest cost with all children replaced with their optimized
+   * versions. This is used to create the final optimized query plan.
+   */
+  getOptimized(required,) {
+    const winner = this.getWinner(required,);
+    assert(winner.node, 'Group not optimized',);
+    const optimizer = winner.node.getOptimized(required,);
+    optimizer.setGroup(this,);
+    return optimizer;
+  }
+};
+var Winner = class {
+  constructor() {
+    __publicField(this, 'node',);
+    __publicField(this, 'cost', new Cost(Infinity,),);
+    __publicField(this, 'nodes', [],);
+  }
+  update(node, cost,) {
+    this.nodes.push(node,);
+    if (Cost.compare(cost, this.cost,) < 0) {
+      this.node = node;
+      this.cost = cost;
+    }
+  }
+};
+function evaluateSync(generator,) {
+  const state2 = generator.next();
+  assert(state2.done, 'Generator must not yield',);
+  return state2.value;
+}
+async function evaluateAsync(generator, state2 = generator.next(),) {
+  while (!state2.done) {
+    const value = await state2.value;
+    state2 = generator.next(value,);
+  }
+  return state2.value;
+}
+function* evaluateObject(values,) {
+  const result = {};
+  const keys3 = Object.keys(values,);
+  const promises = [];
+  for (const key7 of keys3) {
+    const generator = values[key7];
+    if (isGenerator2(generator,)) {
+      const state2 = generator.next();
+      if (state2.done) {
+        result[key7] = state2.value;
+      } else {
+        promises.push(
+          evaluateAsync(generator, state2,).then((value) => {
+            result[key7] = value;
+          },),
+        );
+      }
+    } else {
+      result[key7] = generator;
+    }
+  }
+  if (promises.length > 0) {
+    yield Promise.all(promises,);
+  }
+  return result;
+}
+function* evaluateArray(values,) {
+  const result = [];
+  const keys3 = values.keys();
+  const promises = [];
+  for (const key7 of keys3) {
+    const generator = values[key7];
+    if (isGenerator2(generator,)) {
+      const state2 = generator.next();
+      if (state2.done) {
+        result[key7] = state2.value;
+      } else {
+        promises.push(
+          evaluateAsync(generator, state2,).then((value) => {
+            result[key7] = value;
+          },),
+        );
+      }
+    } else {
+      result[key7] = generator;
+    }
+  }
+  if (promises.length > 0) {
+    yield Promise.all(promises,);
+  }
+  return result;
+}
+var AbstractNode = class {
+  constructor(isSynchronous,) {
+    this.isSynchronous = isSynchronous;
+  }
+};
+var RelationalNode = class extends AbstractNode {
+  constructor() {
+    super(...arguments,);
+    __publicField(this, 'group',);
+  }
+  /**
+   * Returns the group that the node belongs to. Throws an error if the node
+   * is not in a group. This should only happen in the constructor because
+   * every node is added to a group right after creation.
+   */
+  getGroup() {
+    assert(this.group, 'Node must be in a group',);
+    return this.group;
+  }
+  /**
+   * Adds the node to the given group. Throws an error if the node is already
+   * in a group.
+   */
+  setGroup(group,) {
+    assert(!this.group, 'Node is already in a group',);
+    this.group = group;
+  }
+  /**
+   * Evaluates the node and all children synchronously. Throws an error if the
+   * node is not synchronous.
+   */
+  evaluateSync() {
+    const generator = this.evaluate(void 0,);
+    return evaluateSync(generator,);
+  }
+  /**
+   * Evaluates the node and all children asynchronously.
+   */
+  evaluateAsync() {
+    const generator = this.evaluate(void 0,);
+    return evaluateAsync(generator,);
+  }
+};
 function Hash(value,) {
   return value;
 }
@@ -39960,6 +40454,16 @@ function isHashable(value,) {
 }
 function calculateHash(name, ...values) {
   const hashes = values.map((value) => {
+    const isCollectionMetadata = value instanceof CollectionMetadata;
+    assert(!isCollectionMetadata, 'Pass CollectionMetadata.id instead',);
+    const isFieldMetadata = value instanceof FieldMetadata;
+    assert(!isFieldMetadata, 'Pass FieldMetadata.id instead',);
+    const isIndexMetadata = value instanceof IndexMetadata;
+    assert(!isIndexMetadata, 'Pass IndexMetadata.id instead',);
+    const isRelationalNode = value instanceof RelationalNode;
+    assert(!isRelationalNode, 'Pass RelationalNode.group.id instead',);
+    const isGroup = value instanceof Group;
+    assert(!isGroup, 'Pass Group.id instead',);
     if (isHashable(value,)) {
       return value.getHash();
     }
@@ -40078,104 +40582,6 @@ var Fields = class extends Metadata {
     __publicField(this, 'name', 'Fields',);
   }
 };
-function getNetworkLatency() {
-  return 25;
-}
-function getNetworkSpeed() {
-  return 100 * 125;
-}
-var KB = 1e3;
-var Cost = class {
-  constructor(network,) {
-    this.network = network;
-  }
-  static estimate(totalRequests, transferredBytes,) {
-    const latency = getNetworkLatency();
-    const speed = getNetworkSpeed();
-    const network = totalRequests * latency + transferredBytes / speed;
-    return new Cost(network,);
-  }
-  static max(left, right,) {
-    const network = Math.max(left.network, right.network,);
-    return new Cost(network,);
-  }
-  static compare(left, right,) {
-    if (left.network < right.network) return -1;
-    if (left.network > right.network) return 1;
-    return 0;
-  }
-  add(cost,) {
-    this.network += cost.network;
-    return this;
-  }
-  toString() {
-    return `${this.network}ms`;
-  }
-};
-function evaluateSync(generator,) {
-  const state2 = generator.next();
-  assert(state2.done, 'Generator must not yield',);
-  return state2.value;
-}
-async function evaluateAsync(generator, state2 = generator.next(),) {
-  while (!state2.done) {
-    const value = await state2.value;
-    state2 = generator.next(value,);
-  }
-  return state2.value;
-}
-function* evaluateObject(values,) {
-  const result = {};
-  const keys3 = Object.keys(values,);
-  const promises = [];
-  for (const key7 of keys3) {
-    const generator = values[key7];
-    if (isGenerator2(generator,)) {
-      const state2 = generator.next();
-      if (state2.done) {
-        result[key7] = state2.value;
-      } else {
-        promises.push(
-          evaluateAsync(generator, state2,).then((value) => {
-            result[key7] = value;
-          },),
-        );
-      }
-    } else {
-      result[key7] = generator;
-    }
-  }
-  if (promises.length > 0) {
-    yield Promise.all(promises,);
-  }
-  return result;
-}
-function* evaluateArray(values,) {
-  const result = [];
-  const keys3 = values.keys();
-  const promises = [];
-  for (const key7 of keys3) {
-    const generator = values[key7];
-    if (isGenerator2(generator,)) {
-      const state2 = generator.next();
-      if (state2.done) {
-        result[key7] = state2.value;
-      } else {
-        promises.push(
-          evaluateAsync(generator, state2,).then((value) => {
-            result[key7] = value;
-          },),
-        );
-      }
-    } else {
-      result[key7] = generator;
-    }
-  }
-  if (promises.length > 0) {
-    yield Promise.all(promises,);
-  }
-  return result;
-}
 var RequiredProps = class {
   constructor(ordering, resolvedFields,) {
     this.ordering = ordering;
@@ -40226,8 +40632,11 @@ var Tuple = class {
     __publicField(this, 'values', /* @__PURE__ */ new Map(),);
   }
   getKey() {
-    const pointers = this.pointers.values();
-    return Array.from(pointers,).join('-',);
+    const result = [];
+    for (const [collection, pointer,] of this.pointers) {
+      result.push(`${collection.id}-${pointer}`,);
+    }
+    return result.sort().join('-',);
   }
   addValue(field, value,) {
     this.values.set(field, value,);
@@ -40322,49 +40731,6 @@ var Relation = class {
     return result;
   }
 };
-var AbstractNode = class {
-  constructor(isSynchronous,) {
-    this.isSynchronous = isSynchronous;
-  }
-};
-var RelationalNode = class extends AbstractNode {
-  constructor() {
-    super(...arguments,);
-    __publicField(this, 'group',);
-  }
-  /**
-   * Returns the group that the node belongs to. Throws an error if the node
-   * is not in a group. This should only happen in the constructor because
-   * every node is added to a group right after creation.
-   */
-  getGroup() {
-    assert(this.group, 'Node must be in a group',);
-    return this.group;
-  }
-  /**
-   * Adds the node to the given group. Throws an error if the node is already
-   * in a group.
-   */
-  setGroup(group,) {
-    assert(!this.group, 'Node is already in a group',);
-    this.group = group;
-  }
-  /**
-   * Evaluates the node and all children synchronously. Throws an error if the
-   * node is not synchronous.
-   */
-  evaluateSync() {
-    const generator = this.evaluate(void 0,);
-    return evaluateSync(generator,);
-  }
-  /**
-   * Evaluates the node and all children asynchronously.
-   */
-  evaluateAsync() {
-    const generator = this.evaluate(void 0,);
-    return evaluateAsync(generator,);
-  }
-};
 var ProjectionField = class {
   constructor(input, field,) {
     this.input = input;
@@ -40397,7 +40763,20 @@ var RelationalProject = class extends RelationalNode {
     }
     return fields;
   }
-  canProvideOrdering() {
+  canProvideOrdering(ordering,) {
+    const projectionFields = new Fields();
+    for (const projection of this.projections) {
+      projectionFields.add(projection.field,);
+    }
+    for (
+      const {
+        field,
+      } of ordering.fields
+    ) {
+      if (projectionFields.has(field,)) {
+        return false;
+      }
+    }
     return true;
   }
   canProvideResolvedFields() {
@@ -41491,24 +41870,19 @@ var RelationalLeftJoin = class extends RelationalNode {
     return new RelationalLeftJoin(left, right, constraint,);
   }
   /** Optimized path for equality constraints that runs in O(n + m) time. */
-  *evaluateScalarEquals(result, constraint, context,) {
-    const {
-      left,
-      right,
-    } = yield* evaluateObject({
-      left: this.left.evaluate(context,),
-      right: this.right.evaluate(context,),
-    },);
+  *evaluateScalarEquals(left, right, leftConstraint, rightConstraint, context,) {
     const joinKeyMap = /* @__PURE__ */ new Map();
     for (const rightTuple of right.tuples) {
-      const rightValue = yield* constraint.right.evaluate(context, rightTuple,);
+      const rightValue = yield* rightConstraint.evaluate(context, rightTuple,);
       const key7 = JSON.stringify((rightValue == null ? void 0 : rightValue.value) ?? null,);
       const tuplesForKey = joinKeyMap.get(key7,) ?? [];
       tuplesForKey.push(rightTuple,);
       joinKeyMap.set(key7, tuplesForKey,);
     }
+    const outputFields = this.getOutputFields();
+    const result = new Relation(outputFields,);
     for (const leftTuple of left.tuples) {
-      const leftValue = yield* constraint.left.evaluate(context, leftTuple,);
+      const leftValue = yield* leftConstraint.evaluate(context, leftTuple,);
       const key7 = JSON.stringify((leftValue == null ? void 0 : leftValue.value) ?? null,);
       const matches = joinKeyMap.get(key7,) ?? [];
       if (matches.length === 0) {
@@ -41525,12 +41899,6 @@ var RelationalLeftJoin = class extends RelationalNode {
     return result;
   }
   *evaluate(context,) {
-    const outputFields = this.getOutputFields();
-    const result = new Relation(outputFields,);
-    if (this.constraint instanceof ScalarEquals) {
-      yield* this.evaluateScalarEquals(result.tuples, this.constraint, context,);
-      return result;
-    }
     const {
       left,
       right,
@@ -41538,6 +41906,22 @@ var RelationalLeftJoin = class extends RelationalNode {
       left: this.left.evaluate(context,),
       right: this.right.evaluate(context,),
     },);
+    if (this.constraint instanceof ScalarEquals) {
+      if (
+        this.constraint.left.referencedFields.subsetOf(this.leftGroup.relational.outputFields,) &&
+        this.constraint.right.referencedFields.subsetOf(this.rightGroup.relational.outputFields,)
+      ) {
+        return yield* this.evaluateScalarEquals(left, right, this.constraint.left, this.constraint.right, context,);
+      }
+      if (
+        this.constraint.right.referencedFields.subsetOf(this.leftGroup.relational.outputFields,) &&
+        this.constraint.left.referencedFields.subsetOf(this.rightGroup.relational.outputFields,)
+      ) {
+        return yield* this.evaluateScalarEquals(left, right, this.constraint.right, this.constraint.left, context,);
+      }
+    }
+    const outputFields = this.getOutputFields();
+    const result = new Relation(outputFields,);
     for (const leftTuple of left.tuples) {
       let hasMatch = false;
       for (const rightTuple of right.tuples) {
@@ -41614,24 +41998,19 @@ var RelationalRightJoin = class extends RelationalNode {
     return new RelationalRightJoin(left, right, constraint,);
   }
   /** Optimized path for equality constraints that runs in O(n + m) time. */
-  *evaluateScalarEquals(result, constraint, context,) {
-    const {
-      left,
-      right,
-    } = yield* evaluateObject({
-      left: this.left.evaluate(context,),
-      right: this.right.evaluate(context,),
-    },);
+  *evaluateScalarEquals(left, right, leftConstraint, rightConstraint, context,) {
     const joinKeyMap = /* @__PURE__ */ new Map();
     for (const leftTuple of left.tuples) {
-      const leftValue = yield* constraint.left.evaluate(context, leftTuple,);
+      const leftValue = yield* leftConstraint.evaluate(context, leftTuple,);
       const key7 = JSON.stringify((leftValue == null ? void 0 : leftValue.value) ?? null,);
       const tuplesForKey = joinKeyMap.get(key7,) ?? [];
       tuplesForKey.push(leftTuple,);
       joinKeyMap.set(key7, tuplesForKey,);
     }
+    const outputFields = this.getOutputFields();
+    const result = new Relation(outputFields,);
     for (const rightTuple of right.tuples) {
-      const rightValue = yield* constraint.right.evaluate(context, rightTuple,);
+      const rightValue = yield* rightConstraint.evaluate(context, rightTuple,);
       const key7 = JSON.stringify((rightValue == null ? void 0 : rightValue.value) ?? null,);
       const matches = joinKeyMap.get(key7,) ?? [];
       if (matches.length === 0) {
@@ -41648,12 +42027,6 @@ var RelationalRightJoin = class extends RelationalNode {
     return result;
   }
   *evaluate(context,) {
-    const outputFields = this.getOutputFields();
-    const result = new Relation(outputFields,);
-    if (this.constraint instanceof ScalarEquals) {
-      yield* this.evaluateScalarEquals(result.tuples, this.constraint, context,);
-      return result;
-    }
     const {
       left,
       right,
@@ -41661,6 +42034,22 @@ var RelationalRightJoin = class extends RelationalNode {
       left: this.left.evaluate(context,),
       right: this.right.evaluate(context,),
     },);
+    if (this.constraint instanceof ScalarEquals) {
+      if (
+        this.constraint.left.referencedFields.subsetOf(this.leftGroup.relational.outputFields,) &&
+        this.constraint.right.referencedFields.subsetOf(this.rightGroup.relational.outputFields,)
+      ) {
+        return yield* this.evaluateScalarEquals(left, right, this.constraint.left, this.constraint.right, context,);
+      }
+      if (
+        this.constraint.right.referencedFields.subsetOf(this.leftGroup.relational.outputFields,) &&
+        this.constraint.left.referencedFields.subsetOf(this.rightGroup.relational.outputFields,)
+      ) {
+        return yield* this.evaluateScalarEquals(left, right, this.constraint.right, this.constraint.left, context,);
+      }
+    }
+    const outputFields = this.getOutputFields();
+    const result = new Relation(outputFields,);
     for (const rightTuple of right.tuples) {
       let hasMatch = false;
       for (const leftTuple of left.tuples) {
@@ -42291,7 +42680,7 @@ var Explorer = class {
   explore(before,) {
     const group = before.getGroup();
     if (before instanceof RelationalLeftJoin) {
-      const after = new RelationalRightJoin(before.left, before.right, before.constraint,);
+      const after = new RelationalRightJoin(before.right, before.left, before.constraint,);
       this.memo.addRelational(after, group,);
     }
     if (before instanceof RelationalFilter) {
@@ -42454,62 +42843,6 @@ function createIndexQueryAll(length,) {
   };
   return new Array(length,).fill(lookup,);
 }
-function GroupId(id3,) {
-  return id3;
-}
-var Group = class {
-  constructor(id3, relational,) {
-    this.id = id3;
-    this.relational = relational;
-    __publicField(this, 'nodes', [],);
-    __publicField(this, 'winners', /* @__PURE__ */ new Map(),);
-  }
-  /**
-   * Adds a node to the group. Throws an error if the node is already in a
-   * group.
-   */
-  addNode(node,) {
-    this.nodes.push(node,);
-    node.setGroup(this,);
-  }
-  /**
-   * Returns the winner for the given required physical props. The winner
-   * stores the best node and its cost. This is used to find the best node in
-   * the group.
-   */
-  getWinner(required,) {
-    const hash2 = required.getHash();
-    const existing = this.winners.get(hash2,);
-    if (existing) return existing;
-    const winner = new Winner();
-    this.winners.set(hash2, winner,);
-    return winner;
-  }
-  /**
-   * Returns the optimized version of the node. The optimized version is the
-   * node with the lowest cost with all children replaced with their optimized
-   * versions. This is used to create the final optimized query plan.
-   */
-  getOptimized(required,) {
-    const winner = this.getWinner(required,);
-    assert(winner.node, 'Group not optimized',);
-    const optimizer = winner.node.getOptimized(required,);
-    optimizer.setGroup(this,);
-    return optimizer;
-  }
-};
-var Winner = class {
-  constructor() {
-    __publicField(this, 'node',);
-    __publicField(this, 'cost', new Cost(Infinity,),);
-  }
-  update(node, cost,) {
-    if (Cost.compare(cost, this.cost,) < 0) {
-      this.node = node;
-      this.cost = cost;
-    }
-  }
-};
 var RelationalProps = class {
   constructor(outputFields,) {
     this.outputFields = outputFields;
@@ -42676,9 +43009,9 @@ var EnforcerSort = class extends EnforcerNode {
         field,
       } of this.ordering.fields
     ) {
-      if (field.name !== VIRTUAL_INDEX_FIELD) {
-        resolvedFields.add(field,);
-      }
+      if (field.name === VIRTUAL_INDEX_FIELD) continue;
+      if (isUndefined(field.collection,)) continue;
+      resolvedFields.add(field,);
     }
     const ordering = new Ordering();
     return new RequiredProps(ordering, resolvedFields,);
@@ -42885,6 +43218,7 @@ var ScalarArray = class extends ScalarNode {
     const resolvedFields = new Fields();
     const fields = Object.values(this.namedFields,);
     for (const field of fields) {
+      if (isUndefined(field.collection,)) continue;
       resolvedFields.add(field,);
     }
     return new RequiredProps(this.ordering, resolvedFields,);
@@ -42976,7 +43310,9 @@ var ScalarFlatArray = class extends ScalarNode {
   }
   getInputRequiredProps() {
     const resolvedFields = new Fields();
-    resolvedFields.add(this.field,);
+    if (!isUndefined(this.field.collection,)) {
+      resolvedFields.add(this.field,);
+    }
     return new RequiredProps(this.ordering, resolvedFields,);
   }
   optimize(optimizer,) {
@@ -43002,7 +43338,7 @@ var ScalarFlatArray = class extends ScalarNode {
     };
   }
 };
-var collation7 = {
+var collation8 = {
   type: 0,
   /* CaseInsensitive */
 };
@@ -43049,11 +43385,11 @@ var ScalarIn = class extends ScalarNode {
     },);
     return {
       type: 'boolean',
-      value: DatabaseValue.in(left, right, collation7,),
+      value: DatabaseValue.in(left, right, collation8,),
     };
   }
 };
-var collation8 = {
+var collation9 = {
   type: 1,
   /* CaseSensitive */
 };
@@ -43100,7 +43436,7 @@ var ScalarIndexOf = class extends ScalarNode {
     },);
     return {
       type: 'number',
-      value: DatabaseValue.indexOf(source, target, collation8,),
+      value: DatabaseValue.indexOf(source, target, collation9,),
     };
   }
 };
@@ -43164,7 +43500,7 @@ var ScalarNot = class extends ScalarNode {
     };
   }
 };
-var collation9 = {
+var collation10 = {
   type: 0,
   /* CaseInsensitive */
 };
@@ -43211,7 +43547,7 @@ var ScalarNotIn = class extends ScalarNode {
     },);
     return {
       type: 'boolean',
-      value: !DatabaseValue.in(left, right, collation9,),
+      value: !DatabaseValue.in(left, right, collation10,),
     };
   }
 };
@@ -43596,6 +43932,11 @@ var Optimizer = class {
         this.explorer.explore(node,);
       }
     }
+    if (false) {
+      assert(winner.node, 'Group not optimized',);
+      const cache2 = /* @__PURE__ */ new Map();
+      winner.node = new RelationalAssert(winner.node, required, cache2,);
+    }
     return winner.cost;
   }
   createEnforcer(winner, node, required,) {
@@ -43868,7 +44209,7 @@ var AnimationCollector = class {
 };
 _variantHashes = /* @__PURE__ */ new WeakMap();
 var framerAppearEffects = /* @__PURE__ */ new AnimationCollector();
-function withOptimizedAppearEffect(Component16,) {
+function withOptimizedAppearEffect(Component18,) {
   return React4.forwardRef(({
     optimized,
     ...props
@@ -43889,7 +44230,7 @@ function withOptimizedAppearEffect(Component16,) {
         generatedComponentContext,
       );
     }
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ref,
       ...props,
     },);
@@ -44012,7 +44353,9 @@ function activeBreakpointHashFromWindow(breakpoints,) {
 }
 function useHydratedBreakpointVariants(initial, mediaQueries, hydratedWithInitial = true,) {
   const isInitialNavigation = useContext(IsInitialNavigationContext,);
-  const baseVariant = useRef(isBrowser2() ? activeMediaQueryFromWindow(mediaQueries,) ?? initial : initial,);
+  const onCanvas = useIsOnFramerCanvas();
+  const usesMediaQueries = !onCanvas && isBrowser2();
+  const baseVariant = useRef(usesMediaQueries ? activeMediaQueryFromWindow(mediaQueries,) ?? initial : initial,);
   const basePropsVariant = useRef(hydratedWithInitial && isInitialNavigation ? initial : baseVariant.current,);
   const forceUpdate = useForceUpdate3();
   const instantTransition = useInstantTransition();
@@ -44076,8 +44419,8 @@ function removeHiddenBreakpointLayersV2(breakpoints,) {
       (_a = hiddenLayer.parentNode) == null ? void 0 : _a.removeChild(hiddenLayer,);
     }
   }
-  const requestIdleCallback = safeWindow.requestIdleCallback ?? requestIdleCallbackFallback;
-  requestIdleCallback(() => {
+  const requestIdleCallback2 = safeWindow.requestIdleCallback ?? requestIdleCallbackFallback;
+  requestIdleCallback2(() => {
     var _a2;
     (_a2 = document.querySelector(framerBreakpointCSSSelector,)) == null ? void 0 : _a2.remove();
   },);
@@ -44431,12 +44774,12 @@ function usePrototypeNavigate({
       navigation.goBack();
       return false;
     }
-    const Component16 = typeof target === 'string'
+    const Component18 = typeof target === 'string'
       ? await componentForRoute(getRoute == null ? void 0 : getRoute(target,),).catch(() => {},)
       : React4.isValidElement(target,)
       ? target
       : null;
-    if (!Component16) return;
+    if (!Component18) return;
     const {
       appearsFrom,
       backdropColor,
@@ -44445,38 +44788,38 @@ function usePrototypeNavigate({
     const transitionType = options.transition || 'instant';
     switch (transitionType) {
       case 'instant':
-        navigation.instant(Component16,);
+        navigation.instant(Component18,);
         break;
       case 'fade':
-        navigation.fade(Component16, {
+        navigation.fade(Component18, {
           animation,
         },);
         break;
       case 'push':
-        navigation.push(Component16, {
+        navigation.push(Component18, {
           appearsFrom,
           animation,
         },);
         break;
       case 'flip':
-        navigation.flip(Component16, {
+        navigation.flip(Component18, {
           appearsFrom,
           animation,
         },);
         break;
       case 'magicMotion':
-        navigation.magicMotion(Component16, {
+        navigation.magicMotion(Component18, {
           animation,
         },);
         break;
       case 'modal':
-        navigation.modal(Component16, {
+        navigation.modal(Component18, {
           backdropColor,
           animation,
         },);
         break;
       case 'overlay':
-        navigation.overlay(Component16, {
+        navigation.overlay(Component18, {
           appearsFrom,
           backdropColor,
           animation,
@@ -44888,6 +45231,72 @@ function useVariantState({
     variantClassNames,
   ],);
 }
+function withCodeBoundaryForOverrides(Component18, {
+  scopeId,
+  nodeId,
+  override,
+  inComponentSlot,
+},) {
+  if (!shouldEnableCodeBoundaries()) {
+    return override(Component18,);
+  }
+  const appliedOverride = tryToApplyOverride(Component18, override,);
+  let hasErrorBeenLogged = false;
+  function CodeBoundaryForOverrides(props, ref,) {
+    const externalComponentNestingLevel = useExternalComponentNestingLevel();
+    const shouldWrapWithBoundary = shouldWrapOverrideWithBoundary(externalComponentNestingLevel, inComponentSlot ?? false,);
+    if (shouldWrapWithBoundary) {
+      if (appliedOverride.status === 'success') {
+        return /* @__PURE__ */ jsx(CodeComponentBoundary, {
+          errorMessage: getErrorMessageForOverride(scopeId, nodeId,),
+          fallback: /* @__PURE__ */ jsx(Component18, {
+            ...props,
+            ref,
+          },),
+          children: /* @__PURE__ */ jsx(appliedOverride.Component, {
+            ...props,
+            ref,
+          },),
+        },);
+      } else {
+        if (!hasErrorBeenLogged) {
+          logError(appliedOverride.error,);
+          logError(getErrorMessageForOverride(scopeId, nodeId,),);
+          collectErrorToAnalytics(appliedOverride.error,);
+          hasErrorBeenLogged = true;
+        }
+        return /* @__PURE__ */ jsx(Component18, {
+          ...props,
+          ref,
+        },);
+      }
+    } else {
+      if (appliedOverride.status === 'success') {
+        return /* @__PURE__ */ jsx(appliedOverride.Component, {
+          ...props,
+          ref,
+        },);
+      } else {
+        throw appliedOverride.error;
+      }
+    }
+  }
+  return React4.forwardRef(CodeBoundaryForOverrides,);
+}
+function tryToApplyOverride(Component18, override,) {
+  try {
+    const ComponentWithOverrides = override(Component18,);
+    return {
+      status: 'success',
+      Component: ComponentWithOverrides,
+    };
+  } catch (error) {
+    return {
+      status: 'error',
+      error,
+    };
+  }
+}
 function extractMappingFromInfo(info,) {
   var _a;
   const json = (_a = info.__FramerMetadata__.exports.default.annotations) == null ? void 0 : _a.framerVariables;
@@ -44898,14 +45307,14 @@ function extractMappingFromInfo(info,) {
     return void 0;
   }
 }
-function withMappedReactProps(Component16, info,) {
+function withMappedReactProps(Component18, info,) {
   return (rawProps) => {
     const props = {};
     const mapping = extractMappingFromInfo(info,);
     for (const key7 in rawProps) {
       asRecord(props,)[(mapping == null ? void 0 : mapping[key7]) ?? key7] = rawProps[key7];
     }
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ...props,
     },);
   };
@@ -44946,10 +45355,10 @@ function createInputOutputRanges2(transformTargets, threshold, exitTarget,) {
     outputRange: [-1, -1, ...outputRange,],
   };
 }
-var withVariantAppearEffect = (Component16) =>
+var withVariantAppearEffect = (Component18) =>
   React4.forwardRef((props, forwardedRef,) => {
     if (RenderTarget.current() === RenderTarget.canvas) {
-      return /* @__PURE__ */ jsx(Component16, {
+      return /* @__PURE__ */ jsx(Component18, {
         ...props,
         ref: forwardedRef,
       },);
@@ -45036,18 +45445,18 @@ var withVariantAppearEffect = (Component16) =>
       repeat: !animateOnce,
     },);
     if (!('variantAppearEffectEnabled' in options) || variantAppearEffectEnabled === true) {
-      return /* @__PURE__ */ jsx(Component16, {
+      return /* @__PURE__ */ jsx(Component18, {
         ...rest,
         variant: activeVariant ?? props.variant,
         ref: observerRef,
       },);
     } else {
-      return /* @__PURE__ */ jsx(Component16, {
+      return /* @__PURE__ */ jsx(Component18, {
         ...rest,
       },);
     }
   },);
-var withVariantFX = (Component16) =>
+var withVariantFX = (Component18) =>
   React4.forwardRef(({
     initial,
     animate: animate3,
@@ -45064,7 +45473,7 @@ var withVariantFX = (Component16) =>
       observerRef,
       true,
     );
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
       ...props,
       style: {
         ...(props == null ? void 0 : props.style),
@@ -48751,10 +49160,10 @@ var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref,) => {
   if (layoutId) {
     rest.layout = 'preserve-aspect';
   }
-  const Component16 = htmlElementAsMotionComponent(props.as,);
+  const Component18 = htmlElementAsMotionComponent(props.as,);
   if (isString2(props.viewBox,)) {
     if (props.as !== void 0) {
-      return /* @__PURE__ */ jsx(Component16, {
+      return /* @__PURE__ */ jsx(Component18, {
         ...rest,
         ref: containerRef,
         style: containerStyle,
@@ -48787,7 +49196,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref,) => {
       },);
     }
   }
-  return /* @__PURE__ */ jsx(Component16, {
+  return /* @__PURE__ */ jsx(Component18, {
     ...rest,
     ref: containerRef,
     style: containerStyle,
@@ -51623,6 +52032,7 @@ export {
   sharedSVGManager,
   shouldOpenLinkInNewTab,
   Size,
+  SmartComponentScopedContainer,
   spring,
   SpringAnimator,
   SSRVariants,
@@ -51734,6 +52144,7 @@ export {
   visualElementStore,
   warning,
   WindowContext,
+  withCodeBoundaryForOverrides,
   withCSS,
   withFX,
   withGeneratedLayoutId,
@@ -51800,4 +52211,5 @@ if (typeof document !== 'undefined') {
     document.head.appendChild(fragment);
 }
 
-export { Router, FetchClientProvider, FormContext }
+export { Link as FramerLink  }
+export { Router, FetchClientProvider, FormContext, LocaleInfoContext }