unframer 2.25.1 → 2.25.2

package/dist/framer.js

@@ -314,7 +314,7 @@ exports.WithOverride = WithOverride;
 exports.withPath = withPath;
 exports.withPerformanceMarks = withPerformanceMarks;
 exports.withShape = withShape;
-exports.yieldUnlessUrgent = yieldUnlessUrgent;
+exports.yieldToMain = yieldToMain;
 exports.Router = Router;
 const chunk_A2PMVMFI_js_1 = require("./framer-chunks/chunk-A2PMVMFI.js");
 // /:https://app.framerstatic.com/chunk-IGW3TQSG.mjs
@@ -10836,7 +10836,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.V5AO5VTZ.mjs
+// /:https://app.framerstatic.com/framer.ZDVTUSJ2.mjs
 const react_10 = require("react");
 const react_11 = __importDefault(require("react"));
 const react_12 = require("react");
@@ -12065,49 +12065,6 @@ function getRouteElementId(route, hash2) {
     }
     return void 0;
 }
-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 ? 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_2.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 EMPTY_ARRAY = [];
 function monitorINPRelatedInputs(signal) {
     const inpRelatedInputs = ['pointerdown', 'pointerup', 'keydown', 'keyup',];
@@ -12189,38 +12146,6 @@ supportsRequestIdleCallback ? window.requestIdleCallback : setTimeout)();
 function encodeSVGForCSS(svg) {
     return `url('data:image/svg+xml,${svg.replaceAll('#', '%23').replaceAll('\'', '%27')}')`;
 }
-var shouldPreloadBasedOnUA = !isBot;
-function useRoutePreloader(routeIds, enabled = true) {
-    const { getRoute, } = useRouter();
-    (0, react_2.useEffect)(() => {
-        if (!getRoute || !enabled || !shouldPreloadBasedOnUA)
-            return;
-        for (const routeId of routeIds) {
-            void preloadRoute(getRoute(routeId));
-        }
-    }, [routeIds, getRoute, enabled,]);
-}
-async function preloadRoute(route) {
-    if (!shouldPreloadBasedOnUA || !route)
-        return;
-    const component = route.page;
-    if (!component || !isLazyComponentType(component))
-        return;
-    await yieldToMain();
-    try {
-        await component.preload();
-    }
-    catch (e) {
-        if (false)
-            console.warn('Preload failed', route, e);
-    }
-}
-function useRouteHandler(routeId, preload = false, elementId) {
-    const { navigate, } = useRouter();
-    useRoutePreloader([routeId,], preload);
-    const handler = react_11.default.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
-    return handler;
-}
 var mockWindow = {
     addEventListener: () => { },
     removeEventListener: () => { },
@@ -12279,6 +12204,107 @@ var mockWindow = {
     __framer_events: [],
 };
 var safeWindow = !isWindow ? mockWindow : window;
+var canUseYield = /* @__PURE__ */ (() => safeWindow.scheduler && 'yield' in safeWindow.scheduler)();
+var canUsePostTask = /* @__PURE__ */ (() => safeWindow.scheduler && 'postTask' in safeWindow.scheduler)();
+var pendingResolvers = /* @__PURE__ */ new Set();
+function resolvePendingPromises() {
+    for (const resolve of pendingResolvers)
+        resolve();
+    pendingResolvers.clear();
+}
+function yieldUnlessUrgent(options) {
+    return new Promise((resolve) => {
+        pendingResolvers.add(resolve);
+        if (document.hidden) {
+            resolvePendingPromises();
+            return;
+        }
+        document.addEventListener('visibilitychange', resolvePendingPromises);
+        document.addEventListener('pagehide', resolvePendingPromises);
+        frame.read(() => {
+            const resolveFn = () => {
+                var _a;
+                pendingResolvers.delete(resolve);
+                if ((_a = options == null ? void 0 : options.signal) == null ? void 0 : _a.aborted)
+                    return;
+                resolve();
+            };
+            void schedulerYield(options).then(resolveFn);
+        });
+        return;
+    });
+}
+function interactionResponse(options) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, 100);
+        frame.read(() => {
+            void schedulerYield(options).then(resolve);
+        });
+    });
+}
+function schedulerYield(options) {
+    const priority = options == null ? void 0 : options.priority;
+    const canUseModernAPI = canUseYield || canUsePostTask;
+    if (!canUseModernAPI) {
+        if (priority === 'user-blocking') {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            setTimeout(resolve, priority === 'background' ? 1 : 0);
+        });
+    }
+    if (priority === 'background') {
+        return new Promise((resolve) => {
+            setTimeout(resolve, 1);
+        });
+    }
+    if (canUseYield) {
+        return safeWindow.scheduler.yield(options).catch(noop2);
+    }
+    return safeWindow.scheduler.postTask(() => { }, options).catch(noop2);
+}
+function yieldToMain(options) {
+    const { continueAfter, ensureContinueBeforeUnload, ...schedulerOptions } = options ?? {};
+    if (ensureContinueBeforeUnload) {
+        return yieldUnlessUrgent(schedulerOptions);
+    }
+    if (continueAfter === 'paint') {
+        return interactionResponse(schedulerOptions);
+    }
+    return schedulerYield(schedulerOptions);
+}
+var shouldPreloadBasedOnUA = !isBot;
+function useRoutePreloader(routeIds, enabled = true) {
+    const { getRoute, } = useRouter();
+    (0, react_2.useEffect)(() => {
+        if (!getRoute || !enabled || !shouldPreloadBasedOnUA)
+            return;
+        for (const routeId of routeIds) {
+            void preloadRoute(getRoute(routeId));
+        }
+    }, [routeIds, getRoute, enabled,]);
+}
+async function preloadRoute(route) {
+    if (!shouldPreloadBasedOnUA || !route)
+        return;
+    const component = route.page;
+    if (!component || !isLazyComponentType(component))
+        return;
+    await yieldToMain();
+    try {
+        await component.preload();
+    }
+    catch (e) {
+        if (false)
+            console.warn('Preload failed', route, e);
+    }
+}
+function useRouteHandler(routeId, preload = false, elementId) {
+    const { navigate, } = useRouter();
+    useRoutePreloader([routeId,], preload);
+    const handler = react_11.default.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
+    return handler;
+}
 var timezone;
 var visitorLocale;
 function setTimezoneAndLocaleForTracking() {
@@ -13022,6 +13048,26 @@ var announceNavigation = () => {
         announceDiv.textContent = document.title;
     }, 60);
 };
+function useAfterPaintEffect(effectFn, deps, options, useEffectFn = react_2.useLayoutEffect) {
+    useEffectFn(() => {
+        const runAfterPaint = async (fn) => {
+            await yieldToMain({
+                ...options,
+                continueAfter: 'paint',
+            });
+            return fn();
+        };
+        const runPromise = runAfterPaint(effectFn);
+        return () => {
+            void (async () => {
+                const cleanup = await runPromise;
+                if (!cleanup)
+                    return;
+                void runAfterPaint(cleanup);
+            })();
+        };
+    }, deps);
+}
 function useMonitorNextPaintAfterRender(label) {
     const resolveHasPainted = (0, react_4.useRef)(void 0);
     useAfterPaintEffect(() => {
@@ -13775,7 +13821,7 @@ function useMarkSuspenseEffectsStart() {
             wasInBackground = true;
             return;
         }
-        requestAnimationFrame(() => {
+        frame.read(() => {
             hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.requestAnimationFrame.markStart();
             hydrationMarker == null ? void 0 : hydrationMarker.unattributedHydrationOverhead.measure();
         });
@@ -13796,9 +13842,9 @@ function useMarkSuspenseEffectEnd() {
         hydrationMarker == null ? void 0 : hydrationMarker.useLayoutEffects.markEnd();
         if (wasInBackground || document.visibilityState !== 'visible')
             return;
-        requestAnimationFrame(() => {
+        frame.read(() => {
             hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.requestAnimationFrame.markEnd();
-            void yieldBefore(() => {
+            void yieldToMain().then(() => {
                 hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.layoutStylePaint.markEnd();
             });
         });
@@ -26638,7 +26684,7 @@ function collectBoxShadowsForProps(props, style2) {
         return;
     style2.boxShadow = boxShadow;
 }
-function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strokeWidth, strokeClipId, svgStrokeAttributes) {
+function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, strokeClipId, svgStrokeAttributes) {
     const definition = [];
     let outsetElement = null;
     let insetElement = null;
@@ -26687,8 +26733,8 @@ function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strok
             miter = 4;
         let shadowRect = Rect.merge(...shadowRects);
         shadowRect = Rect.inflate(shadowRect, (expandStrokeWidth * miter / 2 + maxBlur) * 1.1);
-        const width = rect.width + (strokeWidth ? strokeWidth / 2 : 0.1);
-        const height = rect.height + (strokeWidth ? strokeWidth / 2 : 0.1);
+        const width = rect.width + (strokeWidth ? strokeWidth / 2 : 0);
+        const height = rect.height + (strokeWidth ? strokeWidth / 2 : 0);
         const filterX = shadowRect.x / width * 100;
         const filterY = shadowRect.y / height * 100;
         const filterWidth = shadowRect.width / width * 100;
@@ -26735,7 +26781,6 @@ function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strok
             children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)('use', {
                 ...svgStrokeAttributes,
                 fill: 'black',
-                fillOpacity: fillAlpha <= 0 ? 0 : 1,
                 stroke: 'black',
                 strokeOpacity: strokeAlpha <= 0 ? 0 : 1,
                 strokeWidth: strokeAlpha > 0 ? strokeWidth : 0,
@@ -26813,17 +26858,12 @@ function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strok
 }
 function outerShadowElements(shapeID, shadow, index) {
     const shadowKey = shapeID.add('_outer_shadow' + index);
-    const offsetResultId = shadowKey.add('offset').id;
-    const blurResultId = shadowKey.add('blur').id;
-    const matrixResultId = shadowKey.add('matrix').id;
     const filterElements = /* @__PURE__ */ (0, jsx_runtime_1.jsx)(OuterShadowFilterElements, {
         shadow,
-        blurId: blurResultId,
-        offsetId: offsetResultId,
-        matrixId: matrixResultId,
+        shadowKey,
     }, shadowKey.id + '-filters');
     const mergeElement = /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feMergeNode', {
-        in: matrixResultId,
+        in: shadowKey.id,
     }, shadowKey.id + '-merge');
     return {
         filterElements,
@@ -26831,13 +26871,10 @@ function outerShadowElements(shapeID, shadow, index) {
     };
 }
 var OuterShadowFilterElements = (props) => {
-    const { shadow, blurId, offsetId, matrixId, } = props;
-    const color2 = shadow.color;
-    const rgb = ConvertColor.toRgb(color2);
-    const r = roundedNumberString(rgb.r / 255, 3);
-    const g = roundedNumberString(rgb.g / 255, 3);
-    const b = roundedNumberString(rgb.b / 255, 3);
-    const matrixValues = `0 0 0 0 ${r}   0 0 0 0 ${g}   0 0 0 0 ${b}  0 0 0 ${rgb.a} 0`;
+    const { shadow, shadowKey, } = props;
+    const offsetId = shadowKey.add('offset').id;
+    const blurId = shadowKey.add('blur').id;
+    const floodId = shadowKey.add('flood').id;
     return /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(jsx_runtime_1.Fragment, {
         children: [
             /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feOffset', {
@@ -26851,31 +26888,27 @@ var OuterShadowFilterElements = (props) => {
                 in: offsetId,
                 result: blurId,
             }),
-            /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feColorMatrix', {
-                colorInterpolationFilters: 'sRGB',
-                values: matrixValues,
-                type: 'matrix',
-                in: blurId,
-                result: matrixId,
+            /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feFlood', {
+                floodColor: shadow.color,
+                result: floodId,
+            }),
+            /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feComposite', {
+                in: floodId,
+                in2: blurId,
+                operator: 'in',
+                result: shadowKey.id,
             }),
         ],
     });
 };
 function innerShadowElements(shapeID, shadow, index) {
     const shadowKey = shapeID.add('_inside_shadow' + index);
-    const blurId = shadowKey.add('blur').id;
-    const offsetId = shadowKey.add('offset').id;
-    const compositeId = shadowKey.add('composite').id;
-    const matrixId = shadowKey.add('matrix').id;
     const filterElements = /* @__PURE__ */ (0, jsx_runtime_1.jsx)(InnerShadowFilterElements, {
         shadow,
-        blurId,
-        offsetId,
-        compositeId,
-        matrixId,
+        shadowKey,
     }, shadowKey.id + '-filters');
     const mergeElement = /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feMergeNode', {
-        in: matrixId,
+        in: shadowKey.id,
     }, shadowKey.id + '-merge');
     return {
         filterElements,
@@ -26883,13 +26916,11 @@ function innerShadowElements(shapeID, shadow, index) {
     };
 }
 var InnerShadowFilterElements = (props) => {
-    const { shadow, blurId, offsetId, compositeId, matrixId, } = props;
-    const color2 = shadow.color;
-    const rgb = ConvertColor.toRgb(color2);
-    const r = rgb.r / 255;
-    const g = rgb.g / 255;
-    const b = rgb.b / 255;
-    const matrixValues = `0 0 0 0 ${r}   0 0 0 0 ${g}   0 0 0 0 ${b}  0 0 0 ${rgb.a} 0`;
+    const { shadow, shadowKey, } = props;
+    const blurId = shadowKey.add('blur').id;
+    const offsetId = shadowKey.add('offset').id;
+    const compositeId = shadowKey.add('composite').id;
+    const floodId = shadowKey.add('flood').id;
     return /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(jsx_runtime_1.Fragment, {
         children: [
             /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feGaussianBlur', {
@@ -26911,12 +26942,15 @@ var InnerShadowFilterElements = (props) => {
                 k3: '1',
                 result: compositeId,
             }),
-            /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feColorMatrix', {
-                colorInterpolationFilters: 'sRGB',
-                values: matrixValues,
-                type: 'matrix',
-                in: compositeId,
-                result: matrixId,
+            /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feFlood', {
+                floodColor: shadow.color,
+                result: floodId,
+            }),
+            /* @__PURE__ */ (0, jsx_runtime_1.jsx)('feComposite', {
+                in: floodId,
+                in2: compositeId,
+                operator: 'in',
+                result: shadowKey.id,
             }),
         ],
     });
@@ -33029,6 +33063,9 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         ref: floatingPositionRef,
         className: className2,
         style: {
+            // Start from the top left of the screen to prevent jumps.
+            top: 0,
+            left: 0,
             // Initially rendered as hidden, but the layout effect will set
             // to visible when the position is calculated.
             visibility: 'hidden',
@@ -33091,7 +33128,7 @@ var GracefullyDegradingErrorBoundary = class extends react_9.Component {
 
 `, error);
         const sampleRate = Math.random();
-        if (sampleRate > 0.5)
+        if (sampleRate > 0.25)
             return;
         const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
         sendTrackingEvent('published_site_load_error', {
@@ -33205,50 +33242,6 @@ function findAnchorElement(target, withinElement) {
     }
     return null;
 }
-var pendingResolvers = /* @__PURE__ */ new Set();
-function resolvePendingPromises() {
-    for (const resolve of pendingResolvers)
-        resolve();
-    pendingResolvers.clear();
-}
-var canUseYield = /* @__PURE__ */ (() => safeWindow.scheduler && 'yield' in safeWindow.scheduler)();
-var canUsePostTask = /* @__PURE__ */ (() => safeWindow.scheduler && 'postTask' in safeWindow.scheduler)();
-function yieldUnlessUrgent(options) {
-    return new Promise((resolve) => {
-        pendingResolvers.add(resolve);
-        if (document.hidden) {
-            resolvePendingPromises();
-            return;
-        }
-        document.addEventListener('visibilitychange', resolvePendingPromises);
-        document.addEventListener('pagehide', resolvePendingPromises);
-        requestAnimationFrame(() => {
-            const resolveFn = () => {
-                var _a;
-                pendingResolvers.delete(resolve);
-                if ((_a = options == null ? void 0 : options.signal) == null ? void 0 : _a.aborted)
-                    return;
-                resolve();
-            };
-            const priority = options == null ? void 0 : options.priority;
-            const canUseModernAPI = canUseYield || canUsePostTask;
-            if (!canUseModernAPI) {
-                if (priority === 'user-blocking')
-                    return resolveFn();
-                return setTimeout(resolveFn, priority === 'background' ? 1 : 0);
-            }
-            if (priority === 'background') {
-                return setTimeout(resolveFn, 1);
-            }
-            if (canUseYield) {
-                safeWindow.scheduler.yield(options).then(resolveFn).catch(noop2);
-                return;
-            }
-            safeWindow.scheduler.postTask(resolveFn, options).catch(noop2);
-        });
-        return;
-    });
-}
 function ChildrenCanSuspend({ children, }) {
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(SuspenseThatPreservesDom, {
         children,
@@ -33983,8 +33976,10 @@ function createOnClickLinkHandler(router, routeId, href, trackLinkClick, element
         const shouldPerformNavigation = !usedMetaKey && !isExternalLink;
         const track = () => void trackLinkClick(href);
         if (!shouldPerformNavigation) {
-            await yieldUnlessUrgent({
+            await yieldToMain({
                 priority: 'user-blocking',
+                ensureContinueBeforeUnload: true,
+                continueAfter: 'paint',
             });
             track();
             return;
@@ -34370,8 +34365,9 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
             type: 'submit',
         });
         const data2 = new FormData(event.currentTarget);
-        await interactionResponse({
+        await yieldToMain({
             priority: 'user-blocking',
+            continueAfter: 'paint',
         });
         addUTMTagsToFormData(data2, safeWindow.document);
         for (const [key7, value,] of data2) {
@@ -34415,8 +34411,9 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
     };
     const checkValidity = async (e) => {
         const target = e.currentTarget;
-        await interactionResponse({
+        await yieldToMain({
             priority: 'background',
+            continueAfter: 'paint',
         });
         (0, react_12.startTransition)(() => dispatch({
             type: anyEmptyRequiredFields(target) ? 'incomplete' : 'complete',
@@ -34656,6 +34653,10 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                 const nextRender = monitorNextPaintAfterRender({
                     localized: true,
                 });
+                await yieldToMain({
+                    priority: 'user-blocking',
+                    continueAfter: 'paint',
+                });
                 let localeId;
                 if (isString(localeOrLocaleId)) {
                     localeId = localeOrLocaleId;
@@ -34744,11 +34745,14 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
             preloaded: hasRendered ? void 0 : routeStatus == null ? void 0 : routeStatus.hasLoaded,
         });
         const executeBeforeUrlUpdate = executeBeforeUrlUpdateOnce(beforeUrlUpdate);
-        void yieldUnlessUrgent({
+        void yieldToMain({
             priority: 'background',
+            ensureContinueBeforeUnload: true,
+            continueAfter: 'paint',
         }).then(executeBeforeUrlUpdate);
-        await interactionResponse({
+        await yieldToMain({
             priority: 'user-blocking',
+            continueAfter: 'paint',
         });
         if (pathVariables) {
             const inUse = /* @__PURE__ */ new Set();
@@ -40522,11 +40526,14 @@ function useOnAppear(callback) {
         default: callback,
     });
 }
-async function setOverflow(blockDocumentScrolling, show, yieldBefore2 = true) {
+async function setOverflow(blockDocumentScrolling, show, yieldBefore = true) {
     if (blockDocumentScrolling === false)
         return;
-    if (yieldBefore2)
-        await interactionResponse();
+    if (yieldBefore) {
+        await yieldToMain({
+            continueAfter: 'paint',
+        });
+    }
     frame.render(() => {
         const htmlStyle = document.documentElement.style;
         if (show) {
@@ -40948,22 +40955,48 @@ function useUpdateIfVisible(ref) {
         runUpdateIfPageIsVisible(runUpdate);
     }, [runUpdateIfPageIsVisible, runUpdateIfElementIsInView, ref,]);
 }
+var globalWaitingForClickPromise;
+var globalWaitingForClickResolve;
+async function getPromiseWithFallback() {
+    return new Promise((resolve) => {
+        const resolveFn = () => {
+            resolve();
+            clearTimeout(timeout);
+        };
+        const timeout = setTimeout(resolveFn, 150);
+        globalWaitingForClickResolve = resolveFn;
+    });
+}
+function globalWaitForClickListener(event) {
+    if (event.button === 0) {
+        globalWaitingForClickPromise = getPromiseWithFallback();
+    }
+}
+function globalClickReceivedListener() {
+    globalWaitingForClickPromise = void 0;
+    globalWaitingForClickResolve == null ? void 0 : globalWaitingForClickResolve();
+    globalWaitingForClickResolve = void 0;
+}
+function useWaitForGlobalClick(enabled = false) {
+    (0, react_2.useEffect)(() => {
+        if (!enabled)
+            return;
+        document.addEventListener('pointerup', globalWaitForClickListener, true);
+        document.__proto__.addEventListener.call(document, 'click', globalClickReceivedListener, true);
+    }, [enabled,]);
+}
 function useVariantState({ variant, defaultVariant: externalDefaultVariant, transitions: externalTransitions, enabledGestures: externalEnabledGestures, cycleOrder: externalCycleOrder = [], variantProps: variantProps2 = {}, variantClassNames = {}, ref, }) {
     const forceUpdate = useForceUpdate2();
     const isCanvas = useIsOnFramerCanvas();
     const validBaseVariants = useConstant2(() => new Set(externalCycleOrder));
-    const { pauseOffscreen: pauseOffscreenFeatureOn, } = useLibraryFeatures();
-    const update = (0, react_3.useCallback)((useTransition) => {
-        if (useTransition) {
-            (0, react_12.startTransition)(() => void forceUpdate());
-            return;
-        }
-        forceUpdate();
-    }, [forceUpdate,]);
+    const { pauseOffscreen: pauseOffscreenFeatureOn, yieldOnTap: yieldOnTapFeatureOn, } = useLibraryFeatures();
+    useWaitForGlobalClick(yieldOnTapFeatureOn);
     const runUpdateIfVisible = useUpdateIfVisible(ref);
     const internalState = (0, react_4.useRef)({
         isHovered: false,
+        isHoveredHasUpdated: false,
         isPressed: false,
+        isPressedHasUpdated: false,
         isError: false,
         hasPressedVariants: true,
         baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants),
@@ -40972,7 +41005,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         loadedBaseVariant: {},
         // When used in generated components, these are static values defined
         // outside of the component function that also need to not result in
-        // memoized values being recalculated, so we dump them into the ref.
+        // memorized values being recalculated, so we dump them into the ref.
         defaultVariant: externalDefaultVariant,
         enabledGestures: externalEnabledGestures,
         cycleOrder: externalCycleOrder,
@@ -40985,7 +41018,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture) : void 0;
         return [nextBaseVariant, nextGestureVariant,];
     }, []);
-    const updateIfNeeded = (0, react_3.useCallback)((baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, isError2 = false, checkViewport = false, highPriority = false, clearError = false) => {
+    const updateIfNeeded = (0, react_3.useCallback)(async (baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, checkViewport = false, clearError = false) => {
         const [nextBase, nextGesture,] = resolveNextVariant(nextBaseVariant);
         if (nextBase === baseVariant2 && nextGesture === gestureVariant2)
             return;
@@ -40993,9 +41026,26 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
             internalState.current.isError = false;
         internalState.current.baseVariant = nextBase || defaultVariant2;
         internalState.current.gestureVariant = nextGesture;
-        runUpdateIfVisible(() => update(!highPriority || isError2), pauseOffscreenFeatureOn && checkViewport);
-    }, [resolveNextVariant, update, runUpdateIfVisible, pauseOffscreenFeatureOn,]);
+        const yieldOnTap = yieldOnTapFeatureOn && internalState.current.isPressedHasUpdated;
+        if (yieldOnTap && globalWaitingForClickPromise) {
+            await globalWaitingForClickPromise;
+        }
+        if (yieldOnTap) {
+            await yieldToMain({
+                priority: 'user-blocking',
+                continueAfter: 'paint',
+            });
+        }
+        const { isHovered: isHovered2, isPressed: isPressed2, isHoveredHasUpdated, isPressedHasUpdated, } = internalState.current;
+        if (isHovered2 || isHoveredHasUpdated || isPressed2 || isPressedHasUpdated) {
+            (0, react_12.startTransition)(forceUpdate);
+            return;
+        }
+        runUpdateIfVisible(() => (0, react_12.startTransition)(forceUpdate), pauseOffscreenFeatureOn && checkViewport);
+    }, [resolveNextVariant, forceUpdate, runUpdateIfVisible, pauseOffscreenFeatureOn, yieldOnTapFeatureOn,]);
     const setGestureState = (0, react_3.useCallback)(({ isHovered: isHovered2, isPressed: isPressed2, isError: isError2, }) => {
+        const isPressedHasUpdated = isPressed2 !== internalState.current.isPressed;
+        const isHoveredHasUpdated = isHovered2 !== internalState.current.isHovered;
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -41003,21 +41053,22 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (isError2 !== void 0)
             internalState.current.isError = isError2;
         const { baseVariant: baseVariant2, gestureVariant: gestureVariant2, defaultVariant: defaultVariant2, } = internalState.current;
-        const visibleUserInteraction = isPressed2 || isHovered2;
-        updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, baseVariant2, isError2, !visibleUserInteraction, isHovered2);
+        internalState.current.isPressedHasUpdated = isPressedHasUpdated;
+        internalState.current.isHoveredHasUpdated = isHoveredHasUpdated;
+        void updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, baseVariant2, false);
     }, [updateIfNeeded,]);
     const setVariant = (0, react_3.useCallback)((proposedVariant, pauseOffscreen = false) => {
         const { defaultVariant: defaultVariant2, cycleOrder, baseVariant: baseVariant2, gestureVariant: gestureVariant2, } = internalState.current;
         const nextBaseVariant = proposedVariant === CycleVariantState
             ? nextVariant(cycleOrder || [], baseVariant2 || defaultVariant2)
             : proposedVariant;
-        updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, false, pauseOffscreen, false, true);
+        void updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, pauseOffscreen, true);
     }, [updateIfNeeded,]);
     const clearLoadingGesture = (0, react_3.useCallback)(() => {
         const { baseVariant: baseVariant2, } = internalState.current;
         internalState.current.loadedBaseVariant[baseVariant2] = true;
-        runUpdateIfVisible(() => update(true), true);
-    }, [update, runUpdateIfVisible,]);
+        runUpdateIfVisible(() => (0, react_12.startTransition)(forceUpdate), true);
+    }, [forceUpdate, runUpdateIfVisible,]);
     if (variant !== internalState.current.lastVariant) {
         const [nextBase, nextGesture,] = resolveNextVariant(variant);
         internalState.current.lastVariant = nextBase;
@@ -43693,7 +43744,9 @@ var PlainTextInput = /* @__PURE__ */ (0, react_7.forwardRef)(function FormPlainT
         setPrevDefaultValue(defaultValue);
     }
     const handleChange = (0, react_3.useCallback)(async (e) => {
-        await interactionResponse();
+        await yieldToMain({
+            continueAfter: 'paint',
+        });
         const newValue = e.target.value;
         onChange == null ? void 0 : onChange(e);
         (0, react_12.startTransition)(() => setHasValue(!!newValue));
@@ -45452,7 +45505,7 @@ var SharedSVGManager = class {
      * VECTOR @TODO - Unsubscribe from vector set items.
      */
     template(id3, svg) {
-        const entry = this.vectorSetItems.get(svg);
+        const entry = this.vectorSetItems.get(id3);
         if (entry)
             return `#${entry.id}`;
         this.vectorSetItems.set(id3, {
@@ -46760,7 +46813,7 @@ var Vector = /* @__PURE__ */ (() => {
             }
             const internalShapeId = InternalID.forKey(id3);
             const internalStrokeClipId = InternalID.forKey(strokeClipId);
-            const shadow = shadowForShape(shadows, rect, internalShapeId, fillAlpha, strokeAlpha, strokeWidth, internalStrokeClipId, svgStrokeAttributes);
+            const shadow = shadowForShape(shadows, rect, internalShapeId, strokeAlpha, strokeWidth, internalStrokeClipId, svgStrokeAttributes);
             const currentName = target === RenderTarget.preview ? name || void 0 : void 0;
             if (shadow.insetElement !== null || shadow.outsetElement !== null || insideStroke) {
                 pathAttributes.id = internalShapeId.id;