unframer 2.27.2 → 3.0.0

package/esm/framer.js

@@ -10499,7 +10499,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.6RBAH774.mjs
+// /:https://app.framerstatic.com/framer.6HDYDFRL.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -13246,7 +13246,8 @@ function turnOffReactEventHandling() {
     const options = {
         capture: true,
     };
-    eventsToStop.forEach((event) => document.body.addEventListener(event, stopFn, options));
+    const body = document.body;
+    eventsToStop.forEach((event) => body.addEventListener(event, stopFn, options));
 }
 function TurnOnReactEventHandling() {
     useEffect(() => {
@@ -13255,7 +13256,8 @@ function TurnOnReactEventHandling() {
         const options = {
             capture: true,
         };
-        eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options));
+        const body = document.body;
+        eventsToStop.forEach((event) => body.removeEventListener(event, stopFn, options));
         eventsToStop = void 0;
         performance.mark('framer-react-event-handling-end');
     }, []);
@@ -13851,7 +13853,10 @@ async function insertHTML(html, referenceNode, position = 'beforeend') {
 async function pump(sourceNode, targetParent, beforeNode) {
     for (let node = sourceNode.firstChild; node; node = node.nextSibling) {
         if (node instanceof HTMLScriptElement) {
-            await handleScript(node, targetParent, beforeNode);
+            const needsWait = handleScript(node, targetParent, beforeNode);
+            if (needsWait !== void 0) {
+                await needsWait;
+            }
             continue;
         }
         const clone = node.cloneNode(false);
@@ -13861,24 +13866,25 @@ async function pump(sourceNode, targetParent, beforeNode) {
         }
     }
 }
-async function handleScript(node, parent, beforeNode) {
+function handleScript(node, parent, beforeNode) {
     var _a;
     const script = node.cloneNode(true);
-    const isExternal = script.hasAttribute('src');
-    const isAsync = script.hasAttribute('async');
-    const isDefer = script.hasAttribute('defer');
-    const isModule = ((_a = script.getAttribute('type')) == null ? void 0 : _a.toLowerCase()) === 'module';
-    if (!isExternal || isAsync || isDefer || isModule) {
+    if (!node.hasAttribute('src') ||
+        // external
+        node.hasAttribute('async') ||
+        // async
+        node.hasAttribute('defer') ||
+        // defer
+        ((_a = node.getAttribute('type')) == null ? void 0 : _a.toLowerCase()) === 'module') {
         parent.insertBefore(script, beforeNode);
     }
     else {
-        await execExternalBlockingScript(script, parent, beforeNode);
+        return execExternalBlockingScript(script, parent, beforeNode);
     }
 }
 function execExternalBlockingScript(script, parent, beforeNode) {
     return new Promise((resolve) => {
-        script.onload = () => resolve();
-        script.onerror = () => resolve();
+        script.onload = script.onerror = resolve;
         parent.insertBefore(script, beforeNode);
     });
 }
@@ -19399,7 +19405,12 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
             letter-spacing: var(--framer-blockquote-letter-spacing, var(--framer-letter-spacing, 0));
             text-transform: var(--framer-blockquote-text-transform, var(--framer-text-transform, none));
-            text-decoration: var(--framer-blockquote-text-decoration, var(--framer-text-decoration, none));
+            text-decoration-line: var(--framer-blockquote-text-decoration, var(--framer-text-decoration, initial));
+            text-decoration-style: var(--framer-blockquote-text-decoration-style, var(--framer-text-decoration-style, initial));
+            text-decoration-color: var(--framer-blockquote-text-decoration-color, var(--framer-text-decoration-color, initial));
+            text-decoration-thickness: var(--framer-blockquote-text-decoration-thickness, var(--framer-text-decoration-thickness, initial));
+            text-decoration-skip-ink: var(--framer-blockquote-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial));
+            text-underline-offset: var(--framer-blockquote-text-decoration-offset, var(--framer-text-decoration-offset, initial));
             line-height: var(--framer-blockquote-line-height, var(--framer-line-height, 1.2em));
             text-align: var(--framer-blockquote-text-alignment, var(--framer-text-alignment, start));
             -webkit-text-stroke-width: var(--framer-text-stroke-width, initial);
@@ -19548,10 +19559,22 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
             font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
-            text-decoration: var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)));
             /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */
             cursor: var(--framer-custom-cursors, pointer);
         }
+    `,
+    // Text decoration can't be applied to the nested spans of links because it breaks animations
+    /* css */
+    `
+        a.framer-text,
+        span.framer-text[data-nested-link] {
+            text-decoration-line: var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial)));
+            text-decoration-style: var(--framer-blockquote-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial)));
+            text-decoration-color: var(--framer-blockquote-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial)));
+            text-decoration-thickness: var(--framer-blockquote-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial)));
+            text-decoration-skip-ink: var(--framer-blockquote-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial)));
+            text-underline-offset: var(--framer-blockquote-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial)));
+        }
     `, /* css */
     `
         @supports not (color: color(display-p3 1 1 1)) {
@@ -19601,7 +19624,17 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
-            text-decoration: var(--framer-link-hover-text-decoration, var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))));
+        }
+    `, /* css */
+    `
+        a.framer-text:hover,
+        span.framer-text[data-nested-link]:hover {
+            text-decoration-line: var(--framer-link-hover-text-decoration, var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial))));
+            text-decoration-style: var(--framer-link-hover-text-decoration-style, var(--framer-blockquote-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial))));
+            text-decoration-color: var(--framer-link-hover-text-decoration-color, var(--framer-blockquote-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial))));
+            text-decoration-thickness: var(--framer-link-hover-text-decoration-thickness, var(--framer-blockquote-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial))));
+            text-decoration-skip-ink: var(--framer-link-hover-text-decoration-skip-ink, var(--framer-blockquote-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial))));
+            text-underline-offset: var(--framer-link-hover-text-decoration-offset, var(--framer-blockquote-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial))));
         }
     `, /* css */
     `
@@ -19657,7 +19690,17 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
             font-size: calc(var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
-            text-decoration: var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)));
+        }
+    `, /* css */
+    `
+        a.framer-text[data-framer-page-link-current],
+        span.framer-text[data-framer-page-link-current] {
+            text-decoration-line: var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial)));
+            text-decoration-style: var(--framer-link-current-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial)));
+            text-decoration-color: var(--framer-link-current-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial)));
+            text-decoration-thickness: var(--framer-link-current-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial)));
+            text-decoration-skip-ink: var(--framer-link-current-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial)));
+            text-underline-offset: var(--framer-link-current-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial)));
         }
     `, /* css */
     `
@@ -19708,7 +19751,17 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
-            text-decoration: var(--framer-link-hover-text-decoration, var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))));
+        }
+    `, /* css */
+    `
+        a.framer-text[data-framer-page-link-current]:hover,
+        span.framer-text[data-framer-page-link-current]:hover {
+            text-decoration-line: var(--framer-link-hover-text-decoration, var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, initial))));
+            text-decoration-style: var(--framer-link-hover-text-decoration-style, var(--framer-link-current-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, initial))));
+            text-decoration-color: var(--framer-link-hover-text-decoration-color, var(--framer-link-current-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, initial))));
+            text-decoration-thickness: var(--framer-link-hover-text-decoration-thickness, var(--framer-link-current-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, initial))));
+            text-decoration-skip-ink: var(--framer-link-hover-text-decoration-skip-ink, var(--framer-link-current-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink, initial))));
+            text-underline-offset: var(--framer-link-hover-text-decoration-offset, var(--framer-link-current-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset, initial))));
         }
     `, /* css */
     `
@@ -19772,6 +19825,11 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             --framer-letter-spacing: 0;
             --framer-text-transform: none;
             --framer-text-decoration: none;
+            --framer-text-decoration-style: none;
+            --framer-text-decoration-color: none;
+            --framer-text-decoration-thickness: none;
+            --framer-text-decoration-skip-ink: none;
+            --framer-text-decoration-offset: none;
             --framer-line-height: 1.2em;
             --framer-text-alignment: start;
             --framer-font-open-type-features: normal;
@@ -19984,7 +20042,9 @@ var renderTextStylesRule = `
     letter-spacing: var(--letter-spacing);
     font-size: var(--font-size);
     text-transform: var(--text-transform);
-    text-decoration: var(--text-decoration);
+    --text-decoration: var(--framer-text-decoration-style, solid) var(--framer-text-decoration, none) var(--framer-text-decoration-color, currentcolor) var(--framer-text-decoration-thickness, auto);
+    --text-decoration-skip-ink: var(--framer-text-decoration-skip-ink);
+    --text-underline-offset: var(--framer-text-decoration-offset);
     line-height: var(--line-height);
 }`;
 var textStylesRule = `
@@ -20006,7 +20066,9 @@ var textStylesRule = `
     --letter-spacing: var(--framer-letter-spacing);
     --font-size: var(--framer-font-size);
     --text-transform: var(--framer-text-transform);
-    --text-decoration: var(--framer-text-decoration);
+    --text-decoration: var(--framer-text-decoration-style, solid) var(--framer-text-decoration, none) var(--framer-text-decoration-color, currentcolor) var(--framer-text-decoration-thickness, auto);
+    --text-decoration-skip-ink: var(--framer-text-decoration-skip-ink);
+    --text-underline-offset: var(--framer-text-decoration-offset);
     --line-height: var(--framer-line-height);
 }`;
 var linkStylesRule = `
@@ -20026,7 +20088,9 @@ var linkStylesRule = `
     --text-color: var(--framer-link-text-color, var(--framer-text-color));
     --font-size: var(--framer-link-font-size, var(--framer-font-size));
     --text-transform: var(--framer-link-text-transform, var(--framer-text-transform));
-    --text-decoration: var(--framer-link-text-decoration, var(--framer-text-decoration));
+    --text-decoration: var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, solid)) var(--framer-link-text-decoration, var(--framer-text-decoration, none)) var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, currentcolor)) var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, auto));
+    --text-decoration-skip-ink: var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink));
+    --text-underline-offset: var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset));
 }`;
 var linkHoverStylesRule = `
 [data-framer-component-type="Text"] a:hover,
@@ -20045,7 +20109,9 @@ var linkHoverStylesRule = `
     --text-color: var(--framer-link-hover-text-color, var(--framer-link-text-color, var(--framer-text-color)));
     --font-size: var(--framer-link-hover-font-size, var(--framer-link-font-size, var(--framer-font-size)));
     --text-transform: var(--framer-link-hover-text-transform, var(--framer-link-text-transform, var(--framer-text-transform)));
-    --text-decoration: var(--framer-link-hover-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration)));
+    --text-decoration: var(--framer-link-hover-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, solid))) var(--framer-link-hover-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))) var(--framer-link-hover-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, currentcolor))) var(--framer-link-hover-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, auto)));
+    --text-decoration-skip-ink: var(--framer-link-hover-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink)));
+    --text-underline-offset: var(--framer-link-hover-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset)));
 }`;
 var linkCurrentStylesRule = `
 [data-framer-component-type="Text"].isCurrent a,
@@ -20064,7 +20130,9 @@ var linkCurrentStylesRule = `
     --text-color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color)));
     --font-size: var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size)));
     --text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform)));
-    --text-decoration: var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration)));
+    --text-decoration: var(--framer-link-current-text-decoration-style, var(--framer-link-text-decoration-style, var(--framer-text-decoration-style, solid))) var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))) var(--framer-link-current-text-decoration-color, var(--framer-link-text-decoration-color, var(--framer-text-decoration-color, currentcolor))) var(--framer-link-current-text-decoration-thickness, var(--framer-link-text-decoration-thickness, var(--framer-text-decoration-thickness, auto)));
+    --text-decoration-skip-ink: var(--framer-link-current-text-decoration-skip-ink, var(--framer-link-text-decoration-skip-ink, var(--framer-text-decoration-skip-ink)));
+    --text-underline-offset: var(--framer-link-current-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset)));
 }`;
 var textCSSRules = [
     `[data-framer-component-type="Text"] { cursor: inherit; }`,
@@ -20160,9 +20228,9 @@ var scrollCSSRules = [
 var nativeScrollCSSRules = [
     `[data-framer-component-type="NativeScroll"] { -webkit-overflow-scrolling: touch; }`,
     `[data-framer-component-type="NativeScroll"] > * { position: relative; }`,
-    `[data-framer-component-type="NativeScroll"].direction-both { overflow-x: scroll; overflow-y: scroll; }`,
-    `[data-framer-component-type="NativeScroll"].direction-vertical { overflow-x: hidden; overflow-y: scroll; }`,
-    `[data-framer-component-type="NativeScroll"].direction-horizontal { overflow-x: scroll; overflow-y: hidden; }`,
+    `[data-framer-component-type="NativeScroll"].direction-both { overflow-x: auto; overflow-y: auto; }`,
+    `[data-framer-component-type="NativeScroll"].direction-vertical { overflow-x: hidden; overflow-y: auto; }`,
+    `[data-framer-component-type="NativeScroll"].direction-horizontal { overflow-x: auto; overflow-y: hidden; }`,
     `[data-framer-component-type="NativeScroll"].direction-vertical > * { width: 100% !important; }`,
     `[data-framer-component-type="NativeScroll"].direction-horizontal > * { height: 100% !important; }`,
     `[data-framer-component-type="NativeScroll"].scrollbar-hidden::-webkit-scrollbar { display: none; }`,
@@ -27366,33 +27434,34 @@ var Frame = /* @__PURE__ */ (() => {
     return FrameInner;
 })();
 var Draggable = /* @__PURE__ */ WithDragging(DeprecatedFrameWithEvents);
-function useInfiniteScroll({ ref: elementRef, loadMore, rootMargin = '0px', threshold, paginationInfo, }) {
-    const callback = React4.useCallback((entries) => {
-        for (let i = 0; i < entries.length; ++i) {
-            const entry = entries[i];
-            if (entry.isIntersecting) {
-                loadMore();
-                return;
-            }
+function useInfiniteScroll({ ref: observerRef, loadMore, rootMargin = '0px', paginationInfo, }) {
+    const isVisibleRef = useRef3(false);
+    const callback = React4.useCallback((entry) => {
+        if (!entry.isIntersecting) {
+            isVisibleRef.current = false;
+            return;
         }
+        isVisibleRef.current = true;
+        loadMore();
+        return;
     }, [loadMore,]);
-    React4.useEffect(() => {
-        if (!elementRef.current)
-            return;
-        const observer2 = new IntersectionObserver(callback, {
-            rootMargin,
-            threshold,
+    useEffect(() => {
+        frame.postRender(() => {
+            frame.render(() => {
+                if (isVisibleRef.current) {
+                    loadMore();
+                }
+            });
         });
-        observer2.observe(elementRef.current);
-        return () => {
-            observer2.disconnect();
-        };
-    }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,]);
+    }, [paginationInfo.currentPage, loadMore,]);
+    useSharedIntersectionObserver(observerRef, callback, {
+        rootMargin,
+        enabled: paginationInfo.currentPage < paginationInfo.totalPages,
+    });
 }
 function withInfiniteScroll(Component17) {
     return React4.forwardRef(({ __paginationInfo, __loadMore, ...props }, ref) => {
-        const backupRef = React4.useRef(null);
-        const infiniteScrollRef = ref ?? backupRef;
+        const infiniteScrollRef = useObserverRef(ref);
         useInfiniteScroll({
             rootMargin: '500px',
             loadMore: __loadMore,
@@ -30859,19 +30928,21 @@ function useParallax(options, ref, visibilityStyle) {
     const parallaxY = useTransform(scrollY, transform2);
     const visibility = useMotionValue(adjustPosition && originalPosition.current === null ? 'hidden' : visibilityStyle);
     const defaultValue = useMotionValue(0);
+    const observers2 = useContext(SharedIntersectionObserverContext);
     useRefEffect(ref, (element) => {
         if (element === null || !parallaxTransformEnabled)
             return;
-        frame.read(() => {
-            var _a;
-            originalPosition.current = ((_a = element.getBoundingClientRect()) == null ? void 0 : _a.top) ?? 0;
-        });
-        frame.update(() => {
-            parallaxY.set(transform2(scrollY.get()));
-            if (adjustPosition) {
-                visibility.set(visibilityStyle ?? 'initial');
-            }
+        const unobserve = observeElement(observers2, 'undefined', element, null, (entry) => {
+            originalPosition.current = entry.boundingClientRect.top;
+            frame.update(() => {
+                parallaxY.set(transform2(scrollY.get()));
+                if (adjustPosition) {
+                    visibility.set(visibilityStyle ?? 'initial');
+                }
+            });
+            unobserve();
         });
+        return unobserve;
     }, [adjustPosition, parallaxTransformEnabled,]);
     useOnRouteChange(() => {
         if (!parallaxTransformEnabled)
@@ -31082,7 +31153,7 @@ function useScrollDirectionChange(scrollDirection, cb, options = {}) {
         let directionChangeOffset = 0;
         let lastDirection = void 0;
         let currentTarget = void 0;
-        return scrollInfo(({ y: scrollY, }) => {
+        return scroll((_2, { y: scrollY, }) => {
             if (!repeat && currentTarget === target)
                 return;
             if (scrollY.current > scrollY.scrollLength)
@@ -31240,7 +31311,7 @@ function useStyleAppearEffect(options, ref) {
         playState.current.lastAppearState = appears;
         if (lastAppearState === appears)
             return;
-        runAnimation(appears ? variants.animate : variants.exit, appears);
+        void runAnimation(appears ? variants.animate : variants.exit, appears);
     }, {
         enabled: animateWithIntersectionObserver,
         animateOnce: !!options.animateOnce,
@@ -31257,7 +31328,7 @@ function useStyleAppearEffect(options, ref) {
         };
         const _ = currentRouteKey;
         let lastVariant = 'initial';
-        return scrollInfo(({ y: scrollY, }) => {
+        return scroll((_2, { y: scrollY, }) => {
             const { targets, } = options;
             if (!targets)
                 return;
@@ -31276,10 +31347,10 @@ function useStyleAppearEffect(options, ref) {
             const variantAnimation = asRecord(variants)[variant];
             if (!variantAnimation)
                 return;
-            runAnimation(variantAnimation);
+            void runAnimation(variantAnimation);
         });
     }, [currentRouteKey, animateWithScrollInfo,]);
-    useScrollDirectionChange(options.scrollDirection, (target) => runAnimation(target ?? variants.animate), {
+    useScrollDirectionChange(options.scrollDirection, (target) => void runAnimation(target ?? variants.animate), {
         enabled,
         repeat: !options.animateOnce,
     });
@@ -31395,7 +31466,7 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
     useLayoutEffect(() => {
         if (effectDisabled || !triggerOnScroll)
             return;
-        return scrollInfo(({ y: scrollY, }) => {
+        return scroll((_, { y: scrollY, }) => {
             if (!transformTargets[0] || transformTargets[0].ref && !transformTargets[0].ref.current) {
                 return;
             }
@@ -31419,7 +31490,7 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
         }
         const _ = currentRouteKey;
         const outputRange = createPageOutputRange(transformTargets);
-        return scrollInfo(({ y: scrollY, }) => {
+        return scroll((_2, { y: scrollY, }) => {
             for (const key7 of effectValuesKeys) {
                 if (shouldReduceMotion && key7 !== 'opacity')
                     continue;
@@ -31724,7 +31795,15 @@ function Suspend() {
     throw suspendPromise;
 }
 var suspend = /* @__PURE__ */ jsx3(Suspend, {});
+var DisableSuspenseSuspenseThatPreservesDomContext = createContext(false);
+DisableSuspenseSuspenseThatPreservesDomContext.displayName = 'DisableSuspenseSuspenseThatPreservesDomContext';
 function SuspenseThatPreservesDom({ children, }) {
+    const isSuspenseBoundaryDisabled = useContext(DisableSuspenseSuspenseThatPreservesDomContext);
+    if (isSuspenseBoundaryDisabled) {
+        return /* @__PURE__ */ jsx3(Fragment, {
+            children,
+        });
+    }
     return /* @__PURE__ */ jsx3(Suspense2, {
         fallback: suspend,
         children,
@@ -34056,41 +34135,82 @@ var salt = 'framer';
 var difficulty = 3;
 var tokenLength = 30;
 var maxTime = 1e4;
-async function calculateProofOfWork() {
-    const target = '0'.repeat(difficulty);
-    const startTime = Date.now();
-    let processing = true;
-    while (processing) {
-        const timestamp = Date.now();
-        if (timestamp - startTime > maxTime) {
-            processing = false;
-            return;
-        }
-        const nonce = randomCharacters(tokenLength);
-        const secret = `${timestamp}:${nonce}`;
-        const hash2 = await sha256(salt + secret);
-        if (hash2.startsWith(target)) {
-            return {
-                secret,
-                hash: hash2,
-            };
+function createWorkerTask() {
+    return function () {
+        async function sha256(text) {
+            const buffer = new TextEncoder().encode(text);
+            const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+            return Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, '0')).join('');
+        }
+        function randomCharacters(count) {
+            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            let result = '';
+            const charactersLength = characters.length;
+            for (let i = 0; i < count; i++) {
+                result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            }
+            return result;
         }
-    }
-    return;
-}
-async function sha256(text) {
-    const buffer = new TextEncoder().encode(text);
-    const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
-    return Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, '0')).join('');
+        addEventListener('message', async (event) => {
+            const { salt: salt2, difficulty: difficulty2, tokenLength: tokenLength2, maxTime: maxTime2, } = event.data;
+            const target = '0'.repeat(difficulty2);
+            const startTime = performance.now();
+            let processing = true;
+            while (processing) {
+                const timestamp = performance.now();
+                if (timestamp - startTime > maxTime2) {
+                    processing = false;
+                    postMessage({
+                        success: false,
+                    });
+                    return;
+                }
+                const nonce = randomCharacters(tokenLength2);
+                const secret = `${Date.now()}:${nonce}`;
+                const hash2 = await sha256(salt2 + secret);
+                if (hash2.startsWith(target)) {
+                    postMessage({
+                        success: true,
+                        secret,
+                        hash: hash2,
+                    });
+                    return;
+                }
+            }
+        });
+    }.toString();
 }
-function randomCharacters(count) {
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
-    const charactersLength = characters.length;
-    for (let i = 0; i < count; i++) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
+async function calculateProofOfWork() {
+    return new Promise((resolve, reject) => {
+        const webWorkerURL = URL.createObjectURL(new Blob(['(', createWorkerTask(), ')()',], {
+            type: 'application/javascript',
+        }));
+        const worker = new Worker(webWorkerURL);
+        worker.onmessage = (event) => {
+            worker.terminate();
+            URL.revokeObjectURL(webWorkerURL);
+            if (event.data.success) {
+                resolve({
+                    secret: event.data.secret,
+                    hash: event.data.hash,
+                });
+            }
+            else {
+                resolve(void 0);
+            }
+        };
+        worker.onerror = (event) => {
+            worker.terminate();
+            URL.revokeObjectURL(webWorkerURL);
+            reject(event);
+        };
+        worker.postMessage({
+            salt,
+            difficulty,
+            tokenLength,
+            maxTime,
+        });
+    });
 }
 function getEncodedFormFieldsHeader(data2) {
     return Array.from(data2.keys()).map(encodeURIComponent).join(',');
@@ -40643,6 +40763,7 @@ function useLoadMorePagination(totalSize, pageSize, hash2, paginateWithSuspended
         : _c[hash2]) == null
         ? void 0
         : _d.currentPage) ?? 1);
+    const currentPageRef = useRef3(currentPage);
     const paginationInfo = useMemo2(() => {
         return {
             currentPage,
@@ -40657,21 +40778,27 @@ function useLoadMorePagination(totalSize, pageSize, hash2, paginateWithSuspended
     const loadMore = useCallback(async () => {
         if (onCanvas)
             return;
-        if (currentPage >= totalPages)
+        if (currentPageRef.current >= totalPages)
             return;
         await yieldToMain({
             priority: 'user-blocking',
             continueAfter: 'paint',
         });
+        if (currentPageRef.current >= totalPages)
+            return;
         const renderNextPage = (startTransition14) => {
             startTransition14(() => {
-                setCurrentPage((_currentPage) => Math.min(_currentPage + 1, totalPages));
+                setCurrentPage((_currentPage) => {
+                    const nextPage = Math.min(_currentPage + 1, totalPages);
+                    currentPageRef.current = nextPage;
+                    return nextPage;
+                });
             });
         };
         if (!paginateWithSuspendedLoadingState)
             return renderNextPage(startTransition2);
         return renderNextPage(startLoadingTransition);
-    }, [currentPage, totalPages, paginateWithSuspendedLoadingState,]);
+    }, [totalPages, paginateWithSuspendedLoadingState,]);
     return {
         paginationInfo,
         loadMore,
@@ -41266,7 +41393,7 @@ var withVariantAppearEffect = (Component17) => React4.forwardRef((props, forward
             return;
         const playedState = {};
         let currentVariant = void 0;
-        return scrollInfo(({ y: scrollY, }) => {
+        return scroll((_, { y: scrollY, }) => {
             var _a;
             if (!targets[0] || targets[0].ref && !targets[0].ref.current)
                 return;
@@ -47318,8 +47445,8 @@ var package_default = {
         '@types/react': '^18.2.67',
         '@types/react-dom': '^18.2.22',
         '@types/yargs': '^17.0.33',
-        '@typescript-eslint/eslint-plugin': '^8.32.1',
-        '@typescript-eslint/parser': '^8.32.1',
+        '@typescript-eslint/eslint-plugin': '^8.35.0',
+        '@typescript-eslint/parser': '^8.35.0',
         chalk: '^4.1.2',
         eslint: '^8.57.1',
         'eslint-plugin-framer-studio': 'workspace:*',

package/esm/package-manager.d.ts

@@ -0,0 +1,10 @@
+export declare function getPackageManager(targetDir: string): Promise<"" | "npm" | "yarn" | "pnpm" | "bun" | "deno">;
+export declare function installPackagesBatch({ packageNames, cwd, isDev, }: {
+    packageNames: string[];
+    cwd: string;
+    isDev?: boolean;
+}): Promise<{
+    success: boolean;
+    error?: string;
+}>;
+//# sourceMappingURL=package-manager.d.ts.map

package/esm/package-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"package-manager.d.ts","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAMA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,MAAM,0DA+BxD;AAED,wBAAsB,oBAAoB,CAAC,EACvC,YAAY,EACZ,GAAG,EACH,KAAa,GAChB,EAAE;IACC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAoHhD"}