unframer 2.11.2 → 2.13.0

package/esm/framer.js

@@ -14597,7 +14597,7 @@ function steps(numSteps, direction = 'end') {
         return clamp(0, 1, rounded / numSteps);
     };
 }
-// 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';
@@ -16264,9 +16264,9 @@ function renderPage(Page4, defaultPageStyle) {
 }
 var NotFoundError = class extends Error {
 };
-var ErrorBoundaryCaughtError = class extends Error {
+var NotFoundErrorBoundaryCaughtError = class extends Error {
 };
-var ErrorBoundary = class extends Component {
+var NotFoundErrorBoundary = class extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -16297,7 +16297,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;
         }
@@ -16308,6 +16308,162 @@ 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) {
@@ -16481,99 +16637,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;
@@ -16977,11 +17040,8 @@ function createViewTransitionStylesheet({ exit = defaultPageTransition, enter, }
     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);
@@ -17096,14 +17156,15 @@ async function pushRouteState(routeId, route, { currentRoutePath, currentPathVar
     const { 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,
             hash: hash2,
@@ -17114,6 +17175,16 @@ async function pushRouteState(routeId, route, { currentRoutePath, currentPathVar
     }
     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]);
@@ -17139,6 +17210,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;
@@ -17207,8 +17279,9 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
             return;
         void monitorNextPaintAfterRender();
         const changeRoute = () => {
-            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, isObject(pathVariables) ? pathVariables : void 0, false, true);
+            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, isObject(pathVariables) ? pathVariables : void 0, 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((_e = viewTransitionReady.current) === null || _e === void 0 ? void 0 : _e.reject);
@@ -17633,8 +17706,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,
@@ -17642,26 +17715,25 @@ 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)
+        const error = this.state.error;
+        if (error === void 0)
             return this.props.children;
-        if (this.state.error instanceof ErrorBoundaryCaughtError) {
-            throw this.state.error.cause;
+        if (error instanceof NotFoundErrorBoundaryCaughtError) {
+            throw error.cause;
         }
         window.__framer_STPD_OPT_OUT__ = true;
         return jsx(Suspense2, {
@@ -17744,8 +17816,10 @@ 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) => {
@@ -17757,7 +17831,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;
@@ -17875,7 +17949,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         startNavigation,
         startViewTransition2,
     ]);
-    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false, updateURL) => {
+    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathVariables, isHistoryTransition, smoothScroll = false, updateURL) => {
         const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
@@ -17946,7 +18020,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         }, 
         // 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);
+        setCurrentRouteId(routeId, currentRouteLocaleId, routeElementId, pathVariables, false, smoothScroll, disableHistory ? void 0 : updateURL);
     }, [routes, setCurrentRouteId, disableHistory, preserveQueryParams, enableAsyncURLUpdates,]);
     const getRoute = useGetRouteCallback(routes);
     const currentRouteId = currentRouteRef.current;
@@ -17969,39 +18043,41 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         ? 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,
+                    ],
+                }),
             }),
         }),
     });
@@ -20435,6 +20511,7 @@ var mockWindow = {
     scrollY: 0,
     location: {
         href: '',
+        pathname: '',
     },
     document: {
         cookie: '',
@@ -20463,6 +20540,7 @@ var mockWindow = {
     innerWidth: 0,
     SVGSVGElement: {},
     open: function (_url, _target, _features) { },
+    __framer_events: [],
 };
 var safeWindow = typeof window === 'undefined' ? mockWindow : window;
 var _raf = (f) => {
@@ -21414,7 +21492,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', {});
@@ -21560,7 +21638,7 @@ function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 =
                     ref: screenRef,
                     children: /* @__PURE__ */ jsx(MotionConfig, {
                         transformPagePoint: invertScale2,
-                        children: /* @__PURE__ */ jsx(ErrorBoundary2, {
+                        children: /* @__PURE__ */ jsx(ErrorBoundary, {
                             children,
                         }),
                     }),
@@ -26250,7 +26328,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 = {
@@ -26267,7 +26345,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,
@@ -27771,7 +27849,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);
@@ -28340,7 +28418,7 @@ function WithDragging(Component16) {
                 value: {
                     dragging: this.state.isDragging,
                 },
-                children: /* @__PURE__ */ jsx(Component16, {
+                children: /* @__PURE__ */ jsx(Component18, {
                     ...originalProps,
                 }),
             });
@@ -28378,9 +28456,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 = {
@@ -31156,7 +31234,7 @@ function useInfiniteScroll({ ref: elementRef, loadMore, rootMargin = '0px', thre
         };
     }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,]);
 }
-function withInfiniteScroll(Component16) {
+function withInfiniteScroll(Component18) {
     return React4.forwardRef(({ __paginationInfo, __loadMore, ...props }, ref) => {
         const backupRef = React4.useRef(null);
         const infiniteScrollRef = ref ?? backupRef;
@@ -31166,7 +31244,7 @@ function withInfiniteScroll(Component16) {
             ref: infiniteScrollRef,
             paginationInfo: __paginationInfo,
         });
-        return /* @__PURE__ */ jsx(Component16, {
+        return /* @__PURE__ */ jsx(Component18, {
             ...props,
             ref: infiniteScrollRef,
         });
@@ -33943,20 +34021,20 @@ 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);
         const overrideProps = useOverride(props);
         const { 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__';
@@ -34760,10 +34838,10 @@ function addMotionValueStyle(style, values) {
 function isVariantOrVariantList(value) {
     return isString2(value) || Array.isArray(value);
 }
-var withFX = (Component16) => React4.forwardRef((props, forwardedRef) => {
+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,
@@ -34774,7 +34852,7 @@ var withFX = (Component16) => React4.forwardRef((props, forwardedRef) => {
     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,
@@ -34852,7 +34930,7 @@ var withFX = (Component16) => React4.forwardRef((props, forwardedRef) => {
             exit,
         }
         : {};
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
         ...forwardedProps,
         ...motionGestures,
         __withFX: true,
@@ -34975,7 +35053,7 @@ var ComponentViewportContext = /* @__PURE__ */ React4.createContext({});
 function useComponentViewport() {
     return React4.useContext(ComponentViewportContext);
 }
-var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(({ width, height, y, children, ...rest }, ref) => {
+var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(function ComponentViewportProvider2({ width, height, y, children, ...rest }, ref) {
     const componentViewport = React4.useMemo(() => {
         return {
             width,
@@ -34989,9 +35067,9 @@ var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(({ width, heig
         children: cloneWithPropsAndRef(children, rest),
     });
 });
-var withGeneratedLayoutId = (Component16) => React4.forwardRef((props, ref) => {
+var withGeneratedLayoutId = (Component18) => React4.forwardRef((props, ref) => {
     const layoutId = useLayoutId2(props);
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
         layoutId,
         ...props,
         layoutIdKey: void 0,
@@ -34999,7 +35077,84 @@ var withGeneratedLayoutId = (Component16) => React4.forwardRef((props, ref) => {
         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', {
@@ -35009,21 +35164,12 @@ 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.', componentStack);
         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 { children, } = this.props;
@@ -35031,9 +35177,63 @@ var ContainerErrorBoundary = class extends Component {
         return hasError ? null : children;
     }
 };
-var Providers = /* @__PURE__ */ React4.forwardRef(({ children, layoutId, as, ...props }, ref) => {
+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,
@@ -35045,21 +35245,62 @@ var Providers = /* @__PURE__ */ React4.forwardRef(({ children, layoutId, as, ...
                 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__ */ (() => {
@@ -35074,7 +35315,7 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
     return new Set(componentsWithSSRStylesAttr.split(' '));
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
-var withCSS = (Component16, escapedCSS, componentSerializationId) => React4.forwardRef((props, ref) => {
+var withCSS = (Component18, escapedCSS, componentSerializationId) => React4.forwardRef((props, ref) => {
     const { sheet, cache: cache2, } = React4.useContext(StyleSheetContext) ?? {};
     if (!isBrowser2()) {
         if (isFunction(escapedCSS))
@@ -35091,7 +35332,7 @@ var withCSS = (Component16, escapedCSS, componentSerializationId) => React4.forw
                         __html: concatenatedCSS,
                     },
                 }),
-                /* @__PURE__ */ jsx(Component16, {
+                /* @__PURE__ */ jsx(Component18, {
                     ...props,
                     ref,
                 }),
@@ -35108,7 +35349,7 @@ var withCSS = (Component16, escapedCSS, componentSerializationId) => React4.forw
                 : escapedCSS.split('\n');
         css2.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2));
     }, []);
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
         ...props,
         ref,
     });
@@ -36080,10 +36321,10 @@ function ChildrenCanSuspend({ children, }) {
         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,
             }),
@@ -36634,7 +36875,7 @@ function getRouteFromPageLink(pageLink, router, currentRoute) {
     const { webPageId, } = pageLink;
     return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId);
 }
-var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(({ children, href, openInNewTab, smoothScroll, nodeId, ...restProps }, forwardedRef) => {
+var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(function Link2({ children, href, openInNewTab, smoothScroll, nodeId, ...restProps }, forwardedRef) {
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
@@ -37653,12 +37894,8 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
                             },
                             preserveQueryParams,
                             enableAsyncURLUpdates,
-                            editorBar: EditorBar && framerSiteId && /* @__PURE__ */ jsx(IgnoreErrors, {
-                                children: /* @__PURE__ */ jsx(Suspense2, {
-                                    children: /* @__PURE__ */ jsx(EditorBar, {
-                                        framerSiteId,
-                                    }),
-                                }),
+                            editorBar: /* @__PURE__ */ jsx(EditorBarLauncher, {
+                                EditorBar,
                             }),
                         }),
                     }),
@@ -37683,6 +37920,24 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
         });
     }
 }
+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)) {
@@ -38276,61 +38531,61 @@ 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);
         });
     },
     /**
@@ -38338,47 +38593,47 @@ 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();
         }
@@ -38424,7 +38679,7 @@ var DatabaseValue = {
         }
     },
 };
-function compare(left, right, collation10) {
+function compare(left, right, collation11) {
     if (isNull(left) || isNull(right)) {
         assert(left === right);
         return 0;
@@ -38443,7 +38698,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;
             }
@@ -38530,7 +38785,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;
             }
@@ -38560,7 +38815,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();
             }
@@ -38579,6 +38834,208 @@ 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;
 }
@@ -38587,6 +39044,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();
         }
@@ -38711,106 +39178,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;
@@ -38863,8 +39230,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);
@@ -38961,49 +39331,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;
@@ -39036,7 +39363,16 @@ 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() {
@@ -40089,21 +40425,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) {
@@ -40121,16 +40455,22 @@ 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, } = yield* evaluateObject({
             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) {
@@ -40207,21 +40547,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) {
@@ -40239,16 +40577,22 @@ 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, } = yield* evaluateObject({
             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) {
@@ -40846,7 +41190,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) {
@@ -40983,63 +41327,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;
@@ -41206,9 +41493,11 @@ var EnforcerSort = class extends EnforcerNode {
     getInputRequiredProps(required) {
         const resolvedFields = new Fields(required.resolvedFields);
         for (const { 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);
@@ -41399,6 +41688,8 @@ 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);
@@ -41485,7 +41776,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) {
@@ -41513,7 +41806,7 @@ var ScalarFlatArray = class extends ScalarNode {
         };
     }
 };
-var collation7 = {
+var collation8 = {
     type: 0,
     /* CaseInsensitive */
 };
@@ -41557,11 +41850,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 */
 };
@@ -41605,7 +41898,7 @@ var ScalarIndexOf = class extends ScalarNode {
         });
         return {
             type: 'number',
-            value: DatabaseValue.indexOf(source, target, collation8),
+            value: DatabaseValue.indexOf(source, target, collation9),
         };
     }
 };
@@ -41669,7 +41962,7 @@ var ScalarNot = class extends ScalarNode {
         };
     }
 };
-var collation9 = {
+var collation10 = {
     type: 0,
     /* CaseInsensitive */
 };
@@ -41713,7 +42006,7 @@ var ScalarNotIn = class extends ScalarNode {
         });
         return {
             type: 'boolean',
-            value: !DatabaseValue.in(left, right, collation9),
+            value: !DatabaseValue.in(left, right, collation10),
         };
     }
 };
@@ -42091,6 +42384,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) {
@@ -42366,7 +42664,7 @@ var AnimationCollector = class {
 };
 _variantHashes = /* @__PURE__ */ new WeakMap();
 var framerAppearEffects = /* @__PURE__ */ new AnimationCollector();
-function withOptimizedAppearEffect(Component16) {
+function withOptimizedAppearEffect(Component18) {
     return React4.forwardRef(({ optimized, ...props }, ref) => {
         const generatedComponentContext = React4.useContext(GeneratedComponentContext);
         const variants = React4.useContext(SSRParentVariantsContext);
@@ -42380,7 +42678,7 @@ function withOptimizedAppearEffect(Component16) {
             // should not be optimized.
             optimized ? props : null, generatedComponentContext);
         }
-        return /* @__PURE__ */ jsx(Component16, {
+        return /* @__PURE__ */ jsx(Component18, {
             ref,
             ...props,
         });
@@ -42500,7 +42798,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();
@@ -42568,8 +42868,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();
     });
@@ -42941,49 +43241,49 @@ function usePrototypeNavigate({ preload, } = {}) {
             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)
+        if (!Component18)
             return;
         const { appearsFrom, backdropColor, animation, } = options;
         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,
@@ -43355,6 +43655,71 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         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;
@@ -43367,14 +43732,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,
         });
     };
@@ -43417,9 +43782,9 @@ function createInputOutputRanges2(transformTargets, threshold, exitTarget) {
         outputRange: [-1, -1, ...outputRange,],
     };
 }
-var withVariantAppearEffect = (Component16) => React4.forwardRef((props, forwardedRef) => {
+var withVariantAppearEffect = (Component18) => React4.forwardRef((props, forwardedRef) => {
     if (RenderTarget.current() === RenderTarget.canvas) {
-        return /* @__PURE__ */ jsx(Component16, {
+        return /* @__PURE__ */ jsx(Component18, {
             ...props,
             ref: forwardedRef,
         });
@@ -43504,26 +43869,26 @@ var withVariantAppearEffect = (Component16) => React4.forwardRef((props, forward
         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) => React4.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
+var withVariantFX = (Component18) => React4.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
     const observerRef = useObserverRef(forwardedRef);
     const effect = usePresenceAnimation({
         initial,
         animate: animate3,
         exit,
     }, observerRef, true);
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
         ...props,
         style: {
             ...(props == null ? void 0 : props.style),
@@ -46980,10 +47345,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,
@@ -47017,7 +47382,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref) => {
             });
         }
     }
-    return /* @__PURE__ */ jsx(Component16, {
+    return /* @__PURE__ */ jsx(Component18, {
         ...rest,
         ref: containerRef,
         style: containerStyle,
@@ -49421,7 +49786,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop2.start();
 }
-export { _injectRuntime, AcceleratedAnimation, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, filterProps, findSpring, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, markHydrationStart, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, namespace_exports as Reorder, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, preloadImage, PresenceContext, print, progress, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, RenderTarget, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, setInitialHydrationState, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text2 as Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString2 as transformString, transformTemplate, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLoadMorePaginatedQuery, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
+export { _injectRuntime, AcceleratedAnimation, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, filterProps, findSpring, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, markHydrationStart, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, namespace_exports as Reorder, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, preloadImage, PresenceContext, print, progress, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, RenderTarget, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, setInitialHydrationState, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text2 as Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString2 as transformString, transformTemplate, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLoadMorePaginatedQuery, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
 /**
  * @license Emotion v11.0.0
  * MIT License
@@ -49468,5 +49833,6 @@ if (typeof document !== 'undefined') {
     }
     document.head.appendChild(fragment);
 }
-export { Router, FetchClientProvider, FormContext };
+export { Link as FramerLink };
+export { Router, FetchClientProvider, FormContext, LocaleInfoContext };
 //# sourceMappingURL=framer.js.map