unframer 2.11.2 → 2.13.0

package/dist/framer.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.defaultDeviceProps = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.CustomCursorHost = exports.createBox = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.ConstraintMask = exports.ComponentViewportProvider = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelFrame = exports.callEach = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.BackgroundImage = exports.AnyInterpolation = exports.anticipate = exports.animations = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animateMini = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.addPointerInfo = exports.AcceleratedAnimation = exports.combinedCSSRules = void 0;
 exports.LazyValue = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isMotionValue = exports.isBrowser = exports.invariant = exports.InternalID = exports.Image = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.fontStore = exports.FontSourceNames = exports.FlatTree = exports.Fetcher = exports.environment = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = void 0;
-exports.SpringAnimator = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.Scroll = exports.RichText = exports.reverseEasing = exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.PresenceContext = exports.Polygon = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mirrorEasing = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = void 0;
-exports.FormContext = exports.FetchClientProvider = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.StyleSheetContext = exports.Stack = exports.SSRVariants = void 0;
+exports.SmartComponentScopedContainer = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.Scroll = exports.RichText = exports.reverseEasing = exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.PresenceContext = exports.Polygon = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mirrorEasing = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = void 0;
+exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.StyleSheetContext = exports.Stack = exports.SSRVariants = exports.SpringAnimator = void 0;
 exports._injectRuntime = _injectRuntime;
 exports.addActionControls = addActionControls;
 exports.addFonts = addFonts;
@@ -247,6 +247,7 @@ exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
 exports.useWillChange = useWillChange;
 exports.valueToDimensionType = valueToDimensionType;
+exports.withCodeBoundaryForOverrides = withCodeBoundaryForOverrides;
 exports.withInfiniteScroll = withInfiniteScroll;
 exports.withMappedReactProps = withMappedReactProps;
 exports.WithNavigator = WithNavigator;
@@ -14914,7 +14915,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();
 const react_11 = __importDefault(require("react"));
 const react_12 = require("react");
@@ -16582,9 +16583,9 @@ function renderPage(Page4, defaultPageStyle) {
 var NotFoundError = class extends Error {
 };
 exports.NotFoundError = NotFoundError;
-var ErrorBoundaryCaughtError = class extends Error {
+var NotFoundErrorBoundaryCaughtError = class extends Error {
 };
-var ErrorBoundary = class extends react_7.Component {
+var NotFoundErrorBoundary = class extends react_7.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -16615,7 +16616,7 @@ var ErrorBoundary = class extends react_7.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;
         }
@@ -16626,6 +16627,162 @@ var ErrorBoundary = class extends react_7.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 && !react_11.default.isValidElement(componentType) &&
+        preloadKey in componentType;
+}
+function lazy(factory) {
+    const LazyComponent = react_11.default.lazy(factory);
+    let factoryPromise;
+    let LoadedComponent;
+    const Component18 = react_11.default.forwardRef(function LazyWithPreload(props, ref) {
+        return react_11.default.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 = react_3.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 react_7.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.
+        (0, jsx_runtime_1.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) {
@@ -16799,99 +16956,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 && !react_11.default.isValidElement(componentType) &&
-        preloadKey in componentType;
-}
-function lazy(factory) {
-    const LazyComponent = react_11.default.lazy(factory);
-    let factoryPromise;
-    let LoadedComponent;
-    const Component16 = react_11.default.forwardRef(function LazyWithPreload(props, ref) {
-        return react_11.default.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 = react_3.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;
@@ -17295,11 +17359,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);
@@ -17414,14 +17475,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,
@@ -17432,6 +17494,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]);
@@ -17457,6 +17529,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;
@@ -17525,8 +17598,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);
@@ -17951,8 +18025,8 @@ var SuspenseErrorBoundary = class extends react_7.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,
@@ -17960,26 +18034,25 @@ var SuspenseErrorBoundary = class extends react_7.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 (0, jsx_runtime_1.jsx)(react_13.Suspense, {
@@ -18014,6 +18087,7 @@ var defaultLocaleInfo = {
     setLocale: noopAsync,
 };
 var LocaleInfoContext = /* @__PURE__ */ react_11.default.createContext(defaultLocaleInfo);
+exports.LocaleInfoContext = LocaleInfoContext;
 function useLocaleInfo() {
     return react_11.default.useContext(LocaleInfoContext);
 }
@@ -18062,8 +18136,10 @@ function useNavigationTransition(enableAsyncURLUpdates) {
     return (0, react_2.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) => {
@@ -18075,7 +18151,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;
@@ -18193,7 +18269,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         startNavigation,
         startViewTransition2,
     ]);
-    const setCurrentRouteId = (0, react_2.useCallback)((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false, updateURL) => {
+    const setCurrentRouteId = (0, react_2.useCallback)((routeId, localeId, hash2, pathVariables, isHistoryTransition, smoothScroll = false, updateURL) => {
         const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
@@ -18264,7 +18340,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;
@@ -18287,39 +18363,41 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         ? fillPathVariables(current.path, currentPathVariables)
         : current.path;
     const remountKey = String(currentLocaleId) + pathWithFilledVariables;
-    return (0, jsx_runtime_1.jsx)(RouterAPIProvider, {
-        api,
-        children: (0, jsx_runtime_1.jsx)(LocaleInfoContext.Provider, {
-            value: localeInfo,
-            children: (0, jsx_runtime_1.jsxs)(SuspenseThatPreservesDom, {
-                children: [
-                    (0, jsx_runtime_1.jsx)(ErrorBoundary, {
-                        notFoundPage,
-                        defaultPageStyle,
-                        forceUpdateKey: dep,
-                        children: (0, jsx_runtime_1.jsx)(WithLayoutTemplate, {
-                            LayoutTemplate,
-                            routeId: currentRouteId,
-                            children: (0, jsx_runtime_1.jsxs)(react_8.Fragment, {
-                                children: [
-                                    (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(GracefullyDegradingErrorBoundary, {
+        children: (0, jsx_runtime_1.jsx)(RouterAPIProvider, {
+            api,
+            children: (0, jsx_runtime_1.jsx)(LocaleInfoContext.Provider, {
+                value: localeInfo,
+                children: (0, jsx_runtime_1.jsxs)(SuspenseThatPreservesDom, {
+                    children: [
+                        (0, jsx_runtime_1.jsx)(NotFoundErrorBoundary, {
+                            notFoundPage,
+                            defaultPageStyle,
+                            forceUpdateKey: dep,
+                            children: (0, jsx_runtime_1.jsx)(WithLayoutTemplate, {
+                                LayoutTemplate,
+                                routeId: currentRouteId,
+                                children: (0, jsx_runtime_1.jsxs)(react_8.Fragment, {
+                                    children: [
+                                        (0, jsx_runtime_1.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),
+                            }),
                         }),
-                    }),
-                    (0, jsx_runtime_1.jsx)(TurnOnReactEventHandling, {}),
-                    (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.End, {}),
-                    editorBar,
-                ],
+                        (0, jsx_runtime_1.jsx)(TurnOnReactEventHandling, {}),
+                        (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.End, {}),
+                        editorBar,
+                    ],
+                }),
             }),
         }),
     });
@@ -20762,6 +20840,7 @@ var mockWindow = {
     scrollY: 0,
     location: {
         href: '',
+        pathname: '',
     },
     document: {
         cookie: '',
@@ -20790,6 +20869,7 @@ var mockWindow = {
     innerWidth: 0,
     SVGSVGElement: {},
     open: function (_url, _target, _features) { },
+    __framer_events: [],
 };
 var safeWindow = typeof window === 'undefined' ? mockWindow : window;
 var _raf = (f) => {
@@ -21746,7 +21826,7 @@ function getColorsFromTheme(theme, type) {
         screenColor: isDarkTheme ? '#333' : '#eee',
     };
 }
-var ErrorBoundary2 = class extends react_7.Component {
+var ErrorBoundary = class extends react_7.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {});
@@ -21892,7 +21972,7 @@ function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 =
                     ref: screenRef,
                     children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MotionConfig, {
                         transformPagePoint: invertScale2,
-                        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ErrorBoundary2, {
+                        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ErrorBoundary, {
                             children,
                         }),
                     }),
@@ -26596,7 +26676,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 = react_11.default.useRef(null);
     const size = useMeasuredSize(ref);
     const dataProps = {
@@ -26613,7 +26693,7 @@ var withMeasuredSize = (Component16) => (props) => {
         },
         ref,
         ...dataProps,
-        children: shouldRender && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        children: shouldRender && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             width: (size == null ? void 0 : size.width) ?? fallbackWidth,
             height: (size == null ? void 0 : size.height) ?? fallbackHeight,
@@ -28124,7 +28204,7 @@ var clamp2 = (value, a, b) => {
 var DraggingContext = /* @__PURE__ */ react_11.default.createContext({
     dragging: false,
 });
-function WithDragging(Component16) {
+function WithDragging(Component18) {
     const _WithDraggingHOC = class extends react_11.default.Component {
         constructor(props, defaultProps) {
             super(props, defaultProps);
@@ -28693,7 +28773,7 @@ function WithDragging(Component16) {
                 value: {
                     dragging: this.state.isDragging,
                 },
-                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                     ...originalProps,
                 }),
             });
@@ -28731,9 +28811,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 = {
@@ -31520,7 +31600,7 @@ function useInfiniteScroll({ ref: elementRef, loadMore, rootMargin = '0px', thre
         };
     }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,]);
 }
-function withInfiniteScroll(Component16) {
+function withInfiniteScroll(Component18) {
     return react_11.default.forwardRef(({ __paginationInfo, __loadMore, ...props }, ref) => {
         const backupRef = react_11.default.useRef(null);
         const infiniteScrollRef = ref ?? backupRef;
@@ -31530,7 +31610,7 @@ function withInfiniteScroll(Component16) {
             ref: infiniteScrollRef,
             paginationInfo: __paginationInfo,
         });
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             ref: infiniteScrollRef,
         });
@@ -34317,20 +34397,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) {
         (0, react_2.useContext)(DataObserverContext);
         const overrideProps = useOverride(props);
         const { style, ...rest } = props;
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.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__';
@@ -35134,10 +35214,10 @@ function addMotionValueStyle(style, values) {
 function isVariantOrVariantList(value) {
     return isString2(value) || Array.isArray(value);
 }
-var withFX = (Component16) => react_11.default.forwardRef((props, forwardedRef) => {
+var withFX = (Component18) => react_11.default.forwardRef((props, forwardedRef) => {
     var _a;
     if (props.__withFX) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             animate: void 0,
             initial: void 0,
@@ -35148,7 +35228,7 @@ var withFX = (Component16) => react_11.default.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__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             animate: animate4,
             initial: initial2,
@@ -35226,7 +35306,7 @@ var withFX = (Component16) => react_11.default.forwardRef((props, forwardedRef)
             exit,
         }
         : {};
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...forwardedProps,
         ...motionGestures,
         __withFX: true,
@@ -35352,7 +35432,7 @@ var ComponentViewportContext = /* @__PURE__ */ react_11.default.createContext({}
 function useComponentViewport() {
     return react_11.default.useContext(ComponentViewportContext);
 }
-var ComponentViewportProvider = /* @__PURE__ */ react_11.default.forwardRef(({ width, height, y, children, ...rest }, ref) => {
+var ComponentViewportProvider = /* @__PURE__ */ react_11.default.forwardRef(function ComponentViewportProvider2({ width, height, y, children, ...rest }, ref) {
     const componentViewport = react_11.default.useMemo(() => {
         return {
             width,
@@ -35367,9 +35447,9 @@ var ComponentViewportProvider = /* @__PURE__ */ react_11.default.forwardRef(({ w
     });
 });
 exports.ComponentViewportProvider = ComponentViewportProvider;
-var withGeneratedLayoutId = (Component16) => react_11.default.forwardRef((props, ref) => {
+var withGeneratedLayoutId = (Component18) => react_11.default.forwardRef((props, ref) => {
     const layoutId = useLayoutId2(props);
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         layoutId,
         ...props,
         layoutIdKey: void 0,
@@ -35378,7 +35458,84 @@ var withGeneratedLayoutId = (Component16) => react_11.default.forwardRef((props,
     });
 });
 exports.withGeneratedLayoutId = withGeneratedLayoutId;
-var ContainerErrorBoundary = class extends react_7.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__ */ (0, jsx_runtime_1.jsx)(ClientSideErrorBoundary, {
+        fallback,
+        errorMessage,
+        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ServerSideErrorBoundary, {
+            fallback,
+            children,
+        }),
+    });
+}
+var ClientSideErrorBoundary = class extends react_7.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__ */
+            (0, jsx_runtime_1.jsx)(react_13.Suspense, {
+                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__ */
+            (0, jsx_runtime_1.jsx)(SuspenseThatPreservesDom, {
+                children,
+            });
+}
+var DeprecatedContainerErrorBoundary = class extends react_7.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {
@@ -35388,21 +35545,12 @@ var ContainerErrorBoundary = class extends react_7.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;
@@ -35410,9 +35558,63 @@ var ContainerErrorBoundary = class extends react_7.Component {
         return hasError ? null : children;
     }
 };
-var Providers = /* @__PURE__ */ react_11.default.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__ */ (() => react_11.default.createContext(0))();
+function useExternalComponentNestingLevel() {
+    return react_11.default.useContext(IsInExternalComponentContext);
+}
+function IsExternalComponent({ children, }) {
+    const count = react_11.default.useContext(IsInExternalComponentContext);
+    return /* @__PURE__ */ (0, jsx_runtime_1.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__ */ react_11.default.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 = react_11.default.Children.map(children, (child) => {
+        return react_11.default.isValidElement(child)
+            ? react_11.default.cloneElement(child, {
+                layoutId,
+            })
+            : child;
+    });
+    const childrenWithCodeBoundary = useWrapWithCodeBoundary(clonedChildren, scopeId, nodeId, isAuthoredByUser, isModuleExternal, inComponentSlot);
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MotionComponent, {
         layoutId: outerLayoutId,
         ...props,
@@ -35424,22 +35626,64 @@ var Providers = /* @__PURE__ */ react_11.default.forwardRef(({ children, layoutI
                 children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(LayoutGroup, {
                     id: layoutId ?? '',
                     inherit: 'id',
-                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ContainerErrorBoundary, {
-                        children: react_11.default.Children.map(children, (child) => {
-                            return react_11.default.isValidElement(child)
-                                ? react_11.default.cloneElement(child, {
-                                    layoutId,
-                                })
-                                : child;
-                        }),
-                    }),
+                    children: childrenWithCodeBoundary,
                 }),
             }),
         }),
     });
 });
-var Container = /* @__PURE__ */ withGeneratedLayoutId(Providers);
+var Container = /* @__PURE__ */ withGeneratedLayoutId(ContainerInner);
 exports.Container = Container;
+var SmartComponentScopedContainer = /* @__PURE__ */ react_11.default.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__ */ (0, jsx_runtime_1.jsx)(Component18, {
+            ref,
+            style: props.style,
+            ...renderableProps,
+            children: childrenWithCodeBoundary,
+        });
+    }
+    else {
+        const Component18 = tagName;
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
+            ref,
+            style: props.style,
+            ...renderableProps,
+            children: childrenWithCodeBoundary,
+        });
+    }
+});
+exports.SmartComponentScopedContainer = SmartComponentScopedContainer;
+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__ */ (0, jsx_runtime_1.jsx)(DeprecatedContainerErrorBoundary, {
+            children,
+        });
+    }
+    const shouldWrapWithBoundary = shouldWrapComponentWithBoundary(externalModuleNestingLevel, isAuthoredByUser ?? false, isExternalComponent ?? false, inComponentSlot ?? false);
+    if (shouldWrapWithBoundary) {
+        children = /* @__PURE__ */ (0, jsx_runtime_1.jsx)(CodeComponentBoundary, {
+            errorMessage: getErrorMessageForComponent(scopeId, nodeId),
+            fallback: null,
+            children,
+        });
+    }
+    if (isExternalComponent) {
+        children = /* @__PURE__ */ (0, jsx_runtime_1.jsx)(IsExternalComponent, {
+            children,
+        });
+    }
+    return children;
+}
 var StyleSheetContext = /* @__PURE__ */ react_11.default.createContext(void 0);
 exports.StyleSheetContext = StyleSheetContext;
 var framerPostSSRCSSSelector = 'style[data-framer-css-ssr-minified]';
@@ -35456,7 +35700,7 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
 exports.framerCSSMarker = framerCSSMarker;
-var withCSS = (Component16, escapedCSS, componentSerializationId) => react_11.default.forwardRef((props, ref) => {
+var withCSS = (Component18, escapedCSS, componentSerializationId) => react_11.default.forwardRef((props, ref) => {
     const { sheet, cache: cache2, } = react_11.default.useContext(StyleSheetContext) ?? {};
     if (!isBrowser2()) {
         if (isFunction(escapedCSS))
@@ -35473,7 +35717,7 @@ var withCSS = (Component16, escapedCSS, componentSerializationId) => react_11.de
                         __html: concatenatedCSS,
                     },
                 }),
-                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                     ...props,
                     ref,
                 }),
@@ -35490,7 +35734,7 @@ var withCSS = (Component16, escapedCSS, componentSerializationId) => react_11.de
                 : escapedCSS.split('\n');
         css2.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2));
     }, []);
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...props,
         ref,
     });
@@ -36468,10 +36712,10 @@ function ChildrenCanSuspend({ children, }) {
         children,
     });
 }
-function withChildrenCanSuspend(Component16) {
+function withChildrenCanSuspend(Component18) {
     return (0, react_4.forwardRef)(function withChildrenCanSuspendInner(props, ref) {
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ChildrenCanSuspend, {
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                 ...props,
                 ref,
             }),
@@ -37025,7 +37269,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__ */ (0, react_4.forwardRef)(({ children, href, openInNewTab, smoothScroll, nodeId, ...restProps }, forwardedRef) => {
+var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, react_4.forwardRef)(function Link2({ children, href, openInNewTab, smoothScroll, nodeId, ...restProps }, forwardedRef) {
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
@@ -37082,6 +37326,7 @@ var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, react_4.fo
     return getChildren(el);
 }));
 exports.Link = Link;
+exports.FramerLink = Link;
 var ParentLinkContext = /* @__PURE__ */ (0, react_1.createContext)(void 0);
 function useReplaceNestedLinks(nodeId, href, propsAddedByLink) {
     const parentLink = (0, react_2.useContext)(ParentLinkContext);
@@ -38048,12 +38293,8 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
                             },
                             preserveQueryParams,
                             enableAsyncURLUpdates,
-                            editorBar: EditorBar && framerSiteId && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(IgnoreErrors, {
-                                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_13.Suspense, {
-                                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBar, {
-                                        framerSiteId,
-                                    }),
-                                }),
+                            editorBar: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBarLauncher, {
+                                EditorBar,
                             }),
                         }),
                     }),
@@ -38078,6 +38319,24 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
         });
     }
 }
+function EditorBarLauncher({ EditorBar, }) {
+    const [mounted, setMounted,] = (0, react_9.useState)(false);
+    const framerSiteId = (0, react_2.useContext)(FormContext);
+    (0, react_2.useEffect)(() => {
+        (0, react_12.startTransition)(() => {
+            setMounted(true);
+        });
+    }, []);
+    if (!EditorBar || !framerSiteId || !mounted)
+        return null;
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(IgnoreErrors, {
+        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_13.Suspense, {
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBar, {
+                framerSiteId,
+            }),
+        }),
+    });
+}
 function cloneChildrenWithProps(children, props, asNode) {
     const cloned = React2.Children.map(children, (child) => {
         if (React2.isValidElement(child)) {
@@ -38676,61 +38935,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);
         });
     },
     /**
@@ -38738,47 +38997,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();
         }
@@ -38824,7 +39083,7 @@ var DatabaseValue = {
         }
     },
 };
-function compare(left, right, collation10) {
+function compare(left, right, collation11) {
     if (isNull(left) || isNull(right)) {
         assert(left === right);
         return 0;
@@ -38843,7 +39102,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;
             }
@@ -38930,7 +39189,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;
             }
@@ -38960,7 +39219,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();
             }
@@ -38979,6 +39238,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;
 }
@@ -38987,6 +39448,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();
         }
@@ -39111,106 +39582,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;
@@ -39263,8 +39634,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);
@@ -39361,49 +39735,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;
@@ -39436,7 +39767,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() {
@@ -40489,21 +40829,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) {
@@ -40521,16 +40859,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) {
@@ -40607,21 +40951,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) {
@@ -40639,16 +40981,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) {
@@ -41246,7 +41594,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) {
@@ -41383,63 +41731,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;
@@ -41606,9 +41897,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);
@@ -41799,6 +42092,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);
@@ -41885,7 +42180,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) {
@@ -41913,7 +42210,7 @@ var ScalarFlatArray = class extends ScalarNode {
         };
     }
 };
-var collation7 = {
+var collation8 = {
     type: 0,
     /* CaseInsensitive */
 };
@@ -41957,11 +42254,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 */
 };
@@ -42005,7 +42302,7 @@ var ScalarIndexOf = class extends ScalarNode {
         });
         return {
             type: 'number',
-            value: DatabaseValue.indexOf(source, target, collation8),
+            value: DatabaseValue.indexOf(source, target, collation9),
         };
     }
 };
@@ -42069,7 +42366,7 @@ var ScalarNot = class extends ScalarNode {
         };
     }
 };
-var collation9 = {
+var collation10 = {
     type: 0,
     /* CaseInsensitive */
 };
@@ -42113,7 +42410,7 @@ var ScalarNotIn = class extends ScalarNode {
         });
         return {
             type: 'boolean',
-            value: !DatabaseValue.in(left, right, collation9),
+            value: !DatabaseValue.in(left, right, collation10),
         };
     }
 };
@@ -42491,6 +42788,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) {
@@ -42768,7 +43070,7 @@ var AnimationCollector = class {
 _variantHashes = /* @__PURE__ */ new WeakMap();
 var framerAppearEffects = /* @__PURE__ */ new AnimationCollector();
 exports.framerAppearEffects = framerAppearEffects;
-function withOptimizedAppearEffect(Component16) {
+function withOptimizedAppearEffect(Component18) {
     return react_11.default.forwardRef(({ optimized, ...props }, ref) => {
         const generatedComponentContext = react_11.default.useContext(GeneratedComponentContext);
         const variants = react_11.default.useContext(SSRParentVariantsContext);
@@ -42782,7 +43084,7 @@ function withOptimizedAppearEffect(Component16) {
             // should not be optimized.
             optimized ? props : null, generatedComponentContext);
         }
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ref,
             ...props,
         });
@@ -42907,7 +43209,9 @@ function activeBreakpointHashFromWindow(breakpoints) {
 }
 function useHydratedBreakpointVariants(initial, mediaQueries, hydratedWithInitial = true) {
     const isInitialNavigation = (0, react_2.useContext)(IsInitialNavigationContext);
-    const baseVariant = (0, react_5.useRef)(isBrowser2() ? activeMediaQueryFromWindow(mediaQueries) ?? initial : initial);
+    const onCanvas = useIsOnFramerCanvas();
+    const usesMediaQueries = !onCanvas && isBrowser2();
+    const baseVariant = (0, react_5.useRef)(usesMediaQueries ? activeMediaQueryFromWindow(mediaQueries) ?? initial : initial);
     const basePropsVariant = (0, react_5.useRef)(hydratedWithInitial && isInitialNavigation ? initial : baseVariant.current);
     const forceUpdate = useForceUpdate3();
     const instantTransition = useInstantTransition();
@@ -42975,8 +43279,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();
     });
@@ -43349,49 +43653,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(() => { })
             : react_11.default.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,
@@ -43765,6 +44069,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__ */ (0, jsx_runtime_1.jsx)(CodeComponentBoundary, {
+                    errorMessage: getErrorMessageForOverride(scopeId, nodeId),
+                    fallback: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
+                        ...props,
+                        ref,
+                    }),
+                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(appliedOverride.Component, {
+                        ...props,
+                        ref,
+                    }),
+                });
+            }
+            else {
+                if (!hasErrorBeenLogged) {
+                    logError(appliedOverride.error);
+                    logError(getErrorMessageForOverride(scopeId, nodeId));
+                    collectErrorToAnalytics(appliedOverride.error);
+                    hasErrorBeenLogged = true;
+                }
+                return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
+                    ...props,
+                    ref,
+                });
+            }
+        }
+        else {
+            if (appliedOverride.status === 'success') {
+                return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(appliedOverride.Component, {
+                    ...props,
+                    ref,
+                });
+            }
+            else {
+                throw appliedOverride.error;
+            }
+        }
+    }
+    return react_11.default.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;
@@ -43777,14 +44146,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__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
         });
     };
@@ -43827,9 +44196,9 @@ function createInputOutputRanges2(transformTargets, threshold, exitTarget) {
         outputRange: [-1, -1, ...outputRange,],
     };
 }
-var withVariantAppearEffect = (Component16) => react_11.default.forwardRef((props, forwardedRef) => {
+var withVariantAppearEffect = (Component18) => react_11.default.forwardRef((props, forwardedRef) => {
     if (RenderTarget.current() === RenderTarget.canvas) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             ref: forwardedRef,
         });
@@ -43914,27 +44283,27 @@ var withVariantAppearEffect = (Component16) => react_11.default.forwardRef((prop
         repeat: !animateOnce,
     });
     if (!('variantAppearEffectEnabled' in options) || variantAppearEffectEnabled === true) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...rest,
             variant: activeVariant ?? props.variant,
             ref: observerRef,
         });
     }
     else {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...rest,
         });
     }
 });
 exports.withVariantAppearEffect = withVariantAppearEffect;
-var withVariantFX = (Component16) => react_11.default.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
+var withVariantFX = (Component18) => react_11.default.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
     const observerRef = useObserverRef(forwardedRef);
     const effect = usePresenceAnimation({
         initial,
         animate: animate3,
         exit,
     }, observerRef, true);
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...props,
         style: {
             ...(props == null ? void 0 : props.style),
@@ -47404,10 +47773,10 @@ var RichTextContainer = /* @__PURE__ */ (0, react_4.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__ */ (0, jsx_runtime_1.jsx)(Component16, {
+            return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                 ...rest,
                 ref: containerRef,
                 style: containerStyle,
@@ -47441,7 +47810,7 @@ var RichTextContainer = /* @__PURE__ */ (0, react_4.forwardRef)((props, ref) =>
             });
         }
     }
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component16, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...rest,
         ref: containerRef,
         style: containerStyle,