@wix/site-service-interactions 1.0.34 → 1.0.36

package/dist/implementations/coreInteractions.js

@@ -11,14 +11,18 @@ import { HeadContentType } from '@wix/site-service-head-appender/types';
 import { ProvideComponentServiceDefinition } from '@wix/services-manager-react/core-services/provide-component';
 import { createInteractionsScriptElement } from './InteractionsScriptElement';
 import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElement';
+import { createBundledV2Interactions } from './v2/BundledInteractions';
 import { getV2ConfigCss } from './v2/configCss';
 import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent';
 import { getClickTriggerCss } from './v2/clickTriggerCss';
+import { getBackgroundScrollCss } from './v2/backgroundScrollCss';
 import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent';
 import { getAuthoredStylesCss } from './v2/authoredStyles';
-import { getInteractConfigEntries, getInteractiveKeys, getResolvedConfigEntries, resolveInteractKeyConflicts, } from './configEntries';
+import { getInteractConfigEntries, getInteractiveKeys, getResolvedConfigEntries, REACTIONS_NAMESPACE, resolveInteractKeyConflicts, } from './configEntries';
 /** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
 const getRuntimeConfigs = (entries) => entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0);
+/** Only the reactions entry plays background scroll presets; experiences don't support them yet. */
+const getBackgroundCss = ({ namespace, interact }) => namespace === REACTIONS_NAMESPACE ? getBackgroundScrollCss(interact) : '';
 const initInteract = (entries, isReducedMotion) => {
     const runtimeConfigs = getRuntimeConfigs(entries);
     // v1 registers its interact-element on create, and a tag can only be defined once: starting it for
@@ -39,12 +43,16 @@ const initInteract = (entries, isReducedMotion) => {
         Interact.create(config);
     }
 };
-const getV2HeadContent = (entries) => {
+const getV2Css = (entries) => {
     const generatedCss = entries
-        .map(({ interact }) => getV2ConfigCss(interact).trim())
+        .flatMap((entry) => [getV2ConfigCss(entry.interact), getBackgroundCss(entry)])
+        .map((css) => css.trim())
         .filter(Boolean)
         .join('\n');
-    const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n');
+    return [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n');
+};
+const getV2HeadContent = (entries) => {
+    const css = getV2Css(entries);
     return ((getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
         (css ? getV2ConfigStyleHeadContent(css) : ''));
 };
@@ -67,8 +75,20 @@ const initRuntime = (entries, isReducedMotion, getService, useV2) => {
         addTopComponent(createInteractionsScriptElement(runtimeConfigs[0], isReducedMotion, pageId));
         return;
     }
-    const clickTriggerCss = entries.map(({ interact }) => getClickTriggerCss(interact).trim()).filter(Boolean);
-    addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, clickTriggerCss));
+    // The server sends these with the generated CSS; the client adopts whatever it did not send.
+    const configCss = entries
+        .flatMap((entry) => [getClickTriggerCss(entry.interact), getBackgroundCss(entry)])
+        .map((css) => css.trim())
+        .filter(Boolean);
+    addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, configCss));
+};
+/** In place of `initRuntime`'s loader, on the same pages: the bundled runtime, with the server's head CSS rendered with the page. */
+const initBundledRuntime = (entries, isReducedMotion, getService) => {
+    const runtimeConfigs = getRuntimeConfigs(entries);
+    if (!runtimeConfigs.length || !getService(PagesDefinition).currentPageId()) {
+        return;
+    }
+    getService(ProvideComponentServiceDefinition).addTopComponent(createBundledV2Interactions(runtimeConfigs, isReducedMotion, getV2Css(entries)));
 };
 const getInteractiveComps = (entries) => {
     const keys = new Set();
@@ -85,10 +105,15 @@ export const coreInteractions = ({ version, ...config }, getService) => {
     // aliasing on those paths so named reaction effects remain resolvable.
     const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config));
     if (useV2) {
-        // Both belong in the head: the preload links only help while the document is still parsing,
-        // and the generated CSS hides elements before their entrance effect, so it has to apply
-        // before the body renders.
-        if (!process.env.browser) {
+        // The editor renders pages only in the browser, so it gets no server head: it renders that CSS with the page and
+        // runs the runtime it bundles, rather than a loader that imports it from the CDN after the page has painted
+        if (process.env.PACKAGE_NAME === 'thunderbolt-ds') {
+            initBundledRuntime(entries, isReducedMotion, getService);
+        }
+        else if (!process.env.browser) {
+            // Both belong in the head: the preload links only help while the document is still parsing,
+            // and the generated CSS hides elements before their entrance effect, so it has to apply
+            // before the body renders.
             const headContent = getV2HeadContent(entries);
             // GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
             // after-security bucket on its SEO path, so the default drops this on every normal
@@ -96,8 +121,11 @@ export const coreInteractions = ({ version, ...config }, getService) => {
             if (headContent) {
                 getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL);
             }
+            initRuntime(entries, isReducedMotion, getService, true);
+        }
+        else {
+            initRuntime(entries, isReducedMotion, getService, true);
         }
-        initRuntime(entries, isReducedMotion, getService, true);
     }
     else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
         // Emits the config and loader scripts. Works in both environments: SSR serves markup the

package/dist/implementations/coreInteractions.js.map

@@ -1 +1 @@
-{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AAChF,+FAA+F;AAC/F,+FAA+F;AAC/F,+FAA+F;AAC/F,kFAAkF;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAA;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,iCAAiC,EAAE,MAAM,6DAA6D,CAAA;AAG/G,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,EACN,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,2BAA2B,GAC3B,MAAM,iBAAiB,CAAA;AAExB,+FAA+F;AAC/F,MAAM,iBAAiB,GAAG,CAAC,OAA8B,EAAoB,EAAE,CAC9E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;AAE9F,MAAM,YAAY,GAAG,CAAC,OAA8B,EAAE,eAAwB,EAAE,EAAE;IACjF,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACjD,mGAAmG;IACnG,0GAA0G;IAC1G,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC5B,OAAM;IACP,CAAC;IACD,6DAA6D;IAC7D,QAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;IAC7C,QAAQ,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;QAC1E,iBAAiB,EAAE,IAAI;QACvB,SAAS,EAAE;YACV,gBAAgB,EAAE,IAAI;SACtB;KACD,CAAC,CAAA;IACF,KAAK,MAAM,MAAM,IAAI,cAAc,EAAE,CAAC;QACrC,QAAQ,CAAC,MAAM,CAAC,MAA0B,CAAC,CAAA;IAC5C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,OAA8B,EAAU,EAAE;IACnE,MAAM,YAAY,GAAG,OAAO;SAC1B,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;SACtD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,IAAI,CAAC,CAAA;IACZ,MAAM,GAAG,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAE3F,OAAO,CACN,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1E,CAAC,GAAG,CAAC,CAAC,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAC7C,CAAA;AACF,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CACnB,OAA8B,EAC9B,eAAwB,EACxB,UAAyC,EACzC,KAAc,EACb,EAAE;IACH,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACjD,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC5B,OAAM;IACP,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC,aAAa,EAAE,CAAA;IAC1D,IAAI,CAAC,MAAM,EAAE,CAAC;QACb,OAAM;IACP,CAAC;IAED,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,iCAAiC,CAAC,CAAA;IAEzE,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,2FAA2F;QAC3F,kCAAkC;QAClC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,+EAA+E,CAAC,CAAA;QACjG,CAAC;QACD,eAAe,CAAC,+BAA+B,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;QAC5F,OAAM;IACP,CAAC;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC1G,eAAe,CAAC,iCAAiC,CAAC,cAAc,EAAE,eAAe,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAA;AAC7G,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,OAA8B,EAAe,EAAE;IAC3E,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAA;IAC9B,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;QAC7B,kBAAkB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IAC1D,CAAC;IACD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC/B,EAAE,OAAO,EAAE,GAAG,MAAM,EAA8B,EAClD,UAAyC,EACxC,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAC3E,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAA;IACpD,MAAM,KAAK,GAAG,OAAO,KAAK,IAAI,CAAA;IAC9B,wFAAwF;IACxF,uEAAuE;IACvE,MAAM,OAAO,GAAG,2BAA2B,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;IAElH,IAAI,KAAK,EAAE,CAAC;QACX,4FAA4F;QAC5F,wFAAwF;QACxF,2BAA2B;QAC3B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YAC1B,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;YAC7C,mFAAmF;YACnF,mFAAmF;YACnF,wEAAwE;YACxE,IAAI,WAAW,EAAE,CAAC;gBACjB,UAAU,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;YACjF,CAAC;QACF,CAAC;QAED,WAAW,CAAC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,CAAA;IACxD,CAAC;SAAM,IAAI,MAAM,CAAC,qCAAqC,CAAC,EAAE,CAAC;QAC1D,yFAAyF;QACzF,2FAA2F;QAC3F,sFAAsF;QACtF,iFAAiF;QACjF,WAAW,CAAC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;IACzD,CAAC;SAAM,CAAC;QACP,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;IACvC,CAAC;IAED,OAAO;QACN,gBAAgB,EAAE,mBAAmB,CAAC,OAAO,CAAC;KAC9C,CAAA;AACF,CAAC,CAAA"}
+{"version":3,"file":"coreInteractions.js","sourceRoot":"","sources":["../../src/implementations/coreInteractions.ts"],"names":[],"mappings":"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"}

package/dist/implementations/v2/BundledInteractions.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react';
+import type { InteractConfig } from '../../definition';
+/**
+ * The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
+ * the server would send in the head renders with the page, so its first paint already animates, and the instances are
+ * the page's own.
+ */
+export declare const createBundledV2Interactions: (configs: InteractConfig[], isReducedMotion: boolean, css: string) => FunctionComponent;

package/dist/implementations/v2/BundledInteractions.js

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { Interact } from './configCss';
+/**
+ * The page's interactions with the bundled runtime, for the editor, which renders pages only in the browser: the CSS
+ * the server would send in the head renders with the page, so its first paint already animates, and the instances are
+ * the page's own.
+ */
+export const createBundledV2Interactions = (configs, isReducedMotion, css) => () => {
+    useEffect(() => {
+        Interact.forceReducedMotion = isReducedMotion;
+        Interact.setup({
+            scrollOptionsGetter: () => document.getElementById('site-root'),
+            allowA11yTriggers: true,
+            viewEnter: {
+                useSafeViewEnter: true,
+            },
+        });
+        // The editor's config can be mid-edit: a config that fails is skipped rather than taking the page down with it
+        const instances = configs.flatMap((config) => {
+            try {
+                return [Interact.create(config)];
+            }
+            catch (error) {
+                console.error('Failed running an interactions config', error);
+                return [];
+            }
+        });
+        return () => instances.forEach((instance) => instance.destroy());
+    }, []);
+    return React.createElement("style", null, css);
+};
+//# sourceMappingURL=BundledInteractions.js.map

package/dist/implementations/v2/BundledInteractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BundledInteractions.js","sourceRoot":"","sources":["../../../src/implementations/v2/BundledInteractions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GACvC,CAAC,OAAyB,EAAE,eAAwB,EAAE,GAAW,EAAqB,EAAE,CACxF,GAAG,EAAE;IACJ,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,kBAAkB,GAAG,eAAe,CAAA;QAC7C,QAAQ,CAAC,KAAK,CAAC;YACd,mBAAmB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC;YAC/D,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE;gBACV,gBAAgB,EAAE,IAAI;aACtB;SACD,CAAC,CAAA;QACF,+GAA+G;QAC/G,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC5C,IAAI,CAAC;gBACJ,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;YACjC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAA;gBAC7D,OAAO,EAAE,CAAA;YACV,CAAC;QACF,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IACjE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,mCAAQ,GAAG,CAAS,CAAA;AAC5B,CAAC,CAAA"}

package/dist/implementations/v2/ConfigStyleSheet.d.ts

@@ -0,0 +1,17 @@
+import type { FunctionComponent } from 'react';
+type StyleSheetDocument = Pick<Document, 'adoptedStyleSheets' | 'querySelectorAll'>;
+/**
+ * Adopts the rules the server did not already send as a constructable stylesheet, and returns a
+ * function that removes that sheet again.
+ */
+export declare const adoptMissingStyleSheet: (rules: Array<string>, document?: StyleSheetDocument | undefined) => () => void;
+/**
+ * The server sends the rules it derives from the config (click-trigger cursors, background scroll
+ * sizing) in the head only for what it rendered, so content rendered on the client (client-side
+ * navigation, password-protected / members-only pages, a host that renders only on the client) never
+ * gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
+ */
+export declare const ConfigStyleSheet: FunctionComponent<{
+    rules: Array<string>;
+}>;
+export {};

package/dist/implementations/v2/{ClickTriggerStyleSheet.js → ConfigStyleSheet.js}

@@ -24,12 +24,13 @@ export const adoptMissingStyleSheet = (rules, document = globalThis.document) =>
     };
 };
 /**
- * The server sends the click-trigger cursor rules in the head only for what it rendered, so content
- * rendered on the client (client-side navigation, password-protected / members-only pages) never gets
- * them. Adopt the missing ones while the page is mounted and remove them when navigating away.
+ * The server sends the rules it derives from the config (click-trigger cursors, background scroll
+ * sizing) in the head only for what it rendered, so content rendered on the client (client-side
+ * navigation, password-protected / members-only pages, a host that renders only on the client) never
+ * gets them. Adopt the missing ones while the page is mounted and remove them when navigating away.
  */
-export const ClickTriggerStyleSheet = ({ rules }) => {
+export const ConfigStyleSheet = ({ rules }) => {
     useEffect(() => adoptMissingStyleSheet(rules), [rules]);
     return null;
 };
-//# sourceMappingURL=ClickTriggerStyleSheet.js.map
+//# sourceMappingURL=ConfigStyleSheet.js.map

package/dist/implementations/v2/ConfigStyleSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigStyleSheet.js","sourceRoot":"","sources":["../../../src/implementations/v2/ConfigStyleSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAI9D,MAAM,oBAAoB,GAAG,CAAC,QAA4B,EAAU,EAAE,CACrE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,mBAAmB,GAAG,CAAC,CAAC;KACpE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;KACvC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEb;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACrC,KAAoB,EACpB,QAAQ,GAAmC,UAAU,CAAC,QAAQ,EAC7D,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;QACnC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAChF,IAAI,CAAC,GAAG,EAAE,CAAC;QACV,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IAChB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAA;IACjC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;IACtB,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;IAErE,OAAO,GAAG,EAAE;QACX,QAAQ,CAAC,kBAAkB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,CAAC,CAAA;IACjG,CAAC,CAAA;AACF,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1F,SAAS,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA"}

package/dist/implementations/v2/InteractionsScriptElement.d.ts

@@ -1,3 +1,3 @@
 import type { FunctionComponent } from 'react';
 import type { InteractConfig } from '@wix/interact';
-export declare const createV2InteractionsScriptElement: (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string, clickTriggerCss?: Array<string>) => FunctionComponent;
+export declare const createV2InteractionsScriptElement: (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string, configCss?: Array<string>) => FunctionComponent;

package/dist/implementations/v2/InteractionsScriptElement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { reviveScriptElement } from '../reviveScriptElement';
-import { ClickTriggerStyleSheet } from './ClickTriggerStyleSheet';
+import { ConfigStyleSheet } from './ConfigStyleSheet';
 import { getV2InteractionsScriptContent } from './interactionsScriptContent';
 const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML'];
 /**
@@ -8,7 +8,7 @@ const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML'];
  * element early. `\u003c` is valid JSON that `JSON.parse` reads back as `<`.
  */
 const serializeConfigForScriptElement = (config) => JSON.stringify(config).replace(/</g, '\\u003c');
-export const createV2InteractionsScriptElement = (config, isReducedMotion, pageId, clickTriggerCss = []) => () => {
+export const createV2InteractionsScriptElement = (config, isReducedMotion, pageId, configCss = []) => () => {
     // This ID is also interpolated into raw module-script text. Percent-encoding removes
     // script delimiters and template-literal syntax while keeping the ID deterministic.
     const safePageId = encodeURIComponent(pageId);
@@ -23,6 +23,6 @@ export const createV2InteractionsScriptElement = (config, isReducedMotion, pageI
     return (React.createElement(React.Fragment, null,
         React.createElement("script", { type: "application/json", id: configId, ...configProps }),
         React.createElement("script", { type: "module", id: `interactions-loader-${safePageId}`, ref: reviveScriptElement, ...loaderProps }),
-        clickTriggerCss.length > 0 && React.createElement(ClickTriggerStyleSheet, { rules: clickTriggerCss })));
+        configCss.length > 0 && React.createElement(ConfigStyleSheet, { rules: configCss })));
 };
 //# sourceMappingURL=InteractionsScriptElement.js.map

package/dist/implementations/v2/InteractionsScriptElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/v2/InteractionsScriptElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAA;AAE5E,MAAM,0BAA0B,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAE1E;;;GAGG;AACH,MAAM,+BAA+B,GAAG,CAAC,MAAyC,EAAU,EAAE,CAC7F,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;AAEhD,MAAM,CAAC,MAAM,iCAAiC,GAC7C,CACC,MAAyC,EACzC,eAAwB,EACxB,MAAc,EACd,eAAe,GAAkB,EAAE,EACf,EAAE,CACvB,GAAG,EAAE;IACJ,qFAAqF;IACrF,oFAAoF;IACpF,MAAM,UAAU,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAC7C,MAAM,QAAQ,GAAG,uBAAuB,UAAU,EAAE,CAAA;IACpD,MAAM,yBAAyB,GAAG,8BAA8B,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAC3F,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAC,EAAE;KAC1F,CAAA;IACD,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;KAC5E,CAAA;IAED,OAAO,CACN;QACC,gCAAQ,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAE,QAAQ,KAAM,WAAW,GAAI;QACjE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,uBAAuB,UAAU,EAAE,EAAE,GAAG,EAAE,mBAAmB,KAAM,WAAW,GAAI;QAC3G,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,sBAAsB,IAAC,KAAK,EAAE,eAAe,GAAI,CAC/E,CACH,CAAA;AACF,CAAC,CAAA"}
+{"version":3,"file":"InteractionsScriptElement.js","sourceRoot":"","sources":["../../../src/implementations/v2/InteractionsScriptElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAA;AAE5E,MAAM,0BAA0B,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAE1E;;;GAGG;AACH,MAAM,+BAA+B,GAAG,CAAC,MAAyC,EAAU,EAAE,CAC7F,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;AAEhD,MAAM,CAAC,MAAM,iCAAiC,GAC7C,CACC,MAAyC,EACzC,eAAwB,EACxB,MAAc,EACd,SAAS,GAAkB,EAAE,EACT,EAAE,CACvB,GAAG,EAAE;IACJ,qFAAqF;IACrF,oFAAoF;IACpF,MAAM,UAAU,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAC7C,MAAM,QAAQ,GAAG,uBAAuB,UAAU,EAAE,CAAA;IACpD,MAAM,yBAAyB,GAAG,8BAA8B,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAC3F,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAC,EAAE;KAC1F,CAAA;IACD,MAAM,WAAW,GAAG;QACnB,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;KAC5E,CAAA;IAED,OAAO,CACN;QACC,gCAAQ,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAE,QAAQ,KAAM,WAAW,GAAI;QACjE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,uBAAuB,UAAU,EAAE,EAAE,GAAG,EAAE,mBAAmB,KAAM,WAAW,GAAI;QAC3G,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,GAAI,CAC7D,CACH,CAAA;AACF,CAAC,CAAA"}

package/dist/implementations/v2/backgroundScrollCss.d.ts

@@ -0,0 +1,2 @@
+import type { InteractConfig } from '@wix/interact';
+export declare const getBackgroundScrollCss: (interact: InteractConfig) => string;

package/dist/implementations/v2/backgroundScrollCss.js

@@ -0,0 +1,165 @@
+import { LEGACY_PREFIX } from './motionPresets';
+const BG_SKEW_ANGLE = 20;
+const BG_ROTATE_ANGLE = 22;
+const BG_PAN_SPEED = 0.2;
+const IMAGE_PARALLAX_SPEED = 1.5;
+// Mimics `position: fixed` with sticky positioning, which keeps working inside a transform or an overflow.
+const FIXED_MEDIA_STYLE = {
+    'will-change': 'var(--motion-bgreveal-will-change)',
+    height: 'calc(100% + 200lvh)',
+    'margin-top': '-100lvh',
+    overflow: 'clip',
+    // a media rendered as a background image needs its own stacking context in some browsers
+    isolation: 'isolate',
+};
+const FIXED_IMG_STYLE = {
+    position: 'sticky',
+    height: 'max(100lvh, calc(100% - 200lvh))',
+    width: '100%',
+    top: '0px',
+    'margin-bottom': 'calc(100lvh - max(100lvh, var(--motion-comp-height, 100%)))',
+    display: 'block',
+    padding: '0px',
+};
+const FILL_STYLE = { height: '100%', width: '100%', position: 'absolute' };
+// Firefox breaks the sticky imitation without it, https://bugzilla.mozilla.org/show_bug.cgi?id=1791232. It only
+// defines the variable the fixed media style reads, so it is always rendered.
+const FIREFOX_CSS = '@supports (-moz-appearance: none) {\nbody {\n--motion-bgreveal-will-change: transform;\n}\n}';
+const toRadians = (degrees) => (degrees * Math.PI) / 180;
+const numberParam = (namedEffect, name, fallback) => typeof namedEffect[name] === 'number' && namedEffect[name] ? namedEffect[name] : fallback;
+const isFixedStyle = (namedEffect) => (namedEffect.type === 'BgZoom' && namedEffect.direction === 'in') ||
+    ['BgReveal', 'BgParallax', 'BgFake3D'].includes(namedEffect.type);
+const MEDIA_STYLES = {
+    BgParallax: () => FIXED_MEDIA_STYLE,
+    BgReveal: () => FIXED_MEDIA_STYLE,
+    BgFake3D: () => FIXED_MEDIA_STYLE,
+    BgSkew: (namedEffect) => {
+        const tan = Math.tan(toRadians(numberParam(namedEffect, 'angle', BG_SKEW_ANGLE)));
+        return { 'padding-bottom': `${(100 * tan).toFixed(3)}%`, 'margin-top': `${(-50 * tan).toFixed(3)}%` };
+    },
+    BgRotate: (namedEffect) => {
+        const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE));
+        const cos = (100 * Math.cos(angle)).toFixed(3);
+        const sin = (100 * Math.sin(angle)).toFixed(3);
+        return {
+            width: `max(100%, calc(${cos}cqw + ${sin}cqh))`,
+            height: `max(100%, calc(${sin}cqw + ${cos}cqh))`,
+            translate: 'calc(50cqw - 50%) calc(50cqh - 50%)',
+        };
+    },
+    BgPan: (namedEffect) => {
+        const speed = numberParam(namedEffect, 'speed', BG_PAN_SPEED);
+        return { position: 'relative', width: `${100 * (1 + speed)}%`, left: `-${50 * speed}%` };
+    },
+    BgZoom: (namedEffect) => isFixedStyle(namedEffect)
+        ? FIXED_MEDIA_STYLE
+        : { position: 'relative', width: '115%', height: '115%', left: '-7.5%', top: '-7.5%' },
+    ImageParallax: (namedEffect) => ({
+        height: `${100 * numberParam(namedEffect, 'speed', IMAGE_PARALLAX_SPEED)}%`,
+        position: 'relative',
+    }),
+};
+const IMG_STYLES = {
+    BgParallax: () => FIXED_IMG_STYLE,
+    BgReveal: () => FIXED_IMG_STYLE,
+    BgFake3D: () => FIXED_IMG_STYLE,
+    BgZoom: (namedEffect) => (isFixedStyle(namedEffect) ? FIXED_IMG_STYLE : {}),
+    BgSkew: () => FILL_STYLE,
+    ImageParallax: () => FILL_STYLE,
+};
+const BACKGROUND_SCROLL_EFFECTS = new Set([
+    'BgCloseUp',
+    'BgFade',
+    'BgFadeBack',
+    'BgPullBack',
+    ...Object.keys(MEDIA_STYLES),
+    ...Object.keys(IMG_STYLES),
+]);
+const escapeCssAttr = (value) => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+const rule = (selector, style) => `${selector} {\n${Object.entries(style)
+    .map(([property, value]) => `${property}: ${value};`)
+    .join('\n')}\n}`;
+/**
+ * Keys are comp paths, so the last segment is the comp id. A part carries `<PART> <comp id>`, and a repeated
+ * comp's id carries its item, `<comp id>__<item>`, on the root and on its parts alike.
+ */
+const getSelectors = (key, selectorConditions) => {
+    const compId = escapeCssAttr(key.slice(key.lastIndexOf('/') + 1));
+    const root = `:is([id="${compId}"], [id^="${compId}__"])${selectorConditions}`;
+    const part = (name) => `:is([data-motion-part="${name} ${compId}"], [data-motion-part^="${name} ${compId}__"])`;
+    // Every part is matched under the root, as Thunderbolt does, so a root that is itself the layer is not matched.
+    return {
+        layer: `${root} ${part('BG_LAYER')}`,
+        media: `${root} ${part('BG_MEDIA')}`,
+        image: `${root}:not([data-show-canvas]) ${part('BG_IMG')}, ${root}[data-has-alpha="true"] canvas`,
+        imageXMedia: `${root}[data-testid="imageX"] ${part('BG_MEDIA')}`,
+    };
+};
+const getEffectRules = (namedEffect, key, selectorConditions) => {
+    const selectors = getSelectors(key, selectorConditions);
+    const mediaStyle = MEDIA_STYLES[namedEffect.type]?.(namedEffect);
+    const imgStyle = IMG_STYLES[namedEffect.type]?.(namedEffect);
+    const isRotate = namedEffect.type === 'BgRotate';
+    const rules = [
+        ...(mediaStyle ? [rule(selectors.media, mediaStyle)] : []),
+        ...(imgStyle && Object.keys(imgStyle).length ? [rule(selectors.image, imgStyle)] : []),
+        rule(selectors.layer, { overflow: 'clip', contain: 'layout', ...(isRotate && { 'container-type': 'size' }) }),
+    ];
+    if (isRotate) {
+        const angle = toRadians(numberParam(namedEffect, 'angle', BG_ROTATE_ANGLE));
+        const grow = (100 * (Math.sqrt(1 + Math.tan(angle) ** 2) - 1)).toFixed(3);
+        const sin = (100 * Math.sin(angle)).toFixed(3);
+        rules.push(`@container (min-aspect-ratio: ${Math.tan(Math.PI / 2 - angle).toFixed(3)}) {\n${rule(selectors.media, {
+            width: `calc(100% + min(${grow}%, ${sin}cqh))`,
+        })}\n}`, `@container (max-aspect-ratio: ${Math.tan(angle).toFixed(3)}) {\n${rule(selectors.media, {
+            height: `calc(100% + min(${grow}%, ${sin}cqw))`,
+        })}\n}`);
+    }
+    else if (isFixedStyle(namedEffect)) {
+        // Safari has a bug like Firefox's for an ImageX media; a transform solves it
+        rules.push(rule(selectors.imageXMedia, { transform: 'translate3d(0,0,0)' }));
+    }
+    return rules;
+};
+const getConditions = (interact, conditionIds) => {
+    const conditions = [...new Set(conditionIds)]
+        .map((id) => interact.conditions?.[id])
+        .filter((condition) => Boolean(condition?.predicate));
+    const predicatesOf = (type) => conditions.filter((condition) => condition.type === type).map(({ predicate }) => predicate);
+    const media = predicatesOf('media');
+    return {
+        media: media.length ? `(${media.join(') and (')})` : '',
+        selector: predicatesOf('selector')
+            .map((predicate) => `:is(${predicate})`)
+            .join(''),
+    };
+};
+const toMediaBlock = ([media, rules]) => media ? `@media ${media} {\n${[...rules].join('\n')}\n}` : [...rules].join('\n');
+export const getBackgroundScrollCss = (interact) => {
+    const rulesByMedia = new Map();
+    for (const interaction of interact.interactions) {
+        // sequences don't play scrub animations, so a background scroll preset is only ever an interaction's effect
+        for (const inlineEffect of interaction.effects ?? []) {
+            // an effectId points at interact.effects; the inline fields override it, as interact reads them
+            const effect = {
+                ...(inlineEffect.effectId ? interact.effects?.[inlineEffect.effectId] : undefined),
+                ...inlineEffect,
+            };
+            const { namedEffect } = effect;
+            const key = effect.key ?? interaction.key;
+            const type = namedEffect?.type?.startsWith(LEGACY_PREFIX)
+                ? namedEffect.type.slice(LEGACY_PREFIX.length)
+                : undefined;
+            if (!namedEffect || !type || !BACKGROUND_SCROLL_EFFECTS.has(type) || !key) {
+                continue;
+            }
+            const params = { ...namedEffect, type };
+            const conditions = getConditions(interact, [...(interaction.conditions ?? []), ...(effect.conditions ?? [])]);
+            const rules = rulesByMedia.get(conditions.media) ?? new Set();
+            getEffectRules(params, key, conditions.selector).forEach((css) => rules.add(css));
+            rulesByMedia.set(conditions.media, rules);
+        }
+    }
+    return `@media (prefers-reduced-motion: no-preference) {\n${[...[...rulesByMedia].map(toMediaBlock), FIREFOX_CSS].join('\n')}\n}`;
+};
+//# sourceMappingURL=backgroundScrollCss.js.map

package/dist/implementations/v2/backgroundScrollCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backgroundScrollCss.js","sourceRoot":"","sources":["../../../src/implementations/v2/backgroundScrollCss.ts"],"names":[],"mappings":"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"}

package/dist/implementations/v2/configCss.d.ts

@@ -1,4 +1,6 @@
+import * as interactWeb from '@wix/interact/web';
 import type { InteractConfig } from '@wix/interact';
+export declare const Interact: typeof interactWeb.Interact;
 type EffectModule = {
     web: unknown;
     style?: unknown;

package/dist/implementations/v2/configCss.js

@@ -1,8 +1,13 @@
 import * as allLegacyPresets from '@wix/wix-motion-presets';
 import * as allPresets from '@wix/motion-presets';
-import { generate, Interact } from '@wix/interact';
+// Through the namespace: web.js only re-exports the core and installs `Interact.defineInteractElement`, which
+// `Interact.create` needs to run on `<interact-element>`. With named imports, a bundler that trusts the package's
+// `sideEffects: false` links them past web.js to the core and drops it.
+import * as interactWeb from '@wix/interact/web';
 import { getClickTriggerCss } from './clickTriggerCss';
 import { LEGACY_PREFIX } from './motionPresets';
+const { generate } = interactWeb;
+export const { Interact } = interactWeb;
 const isEffectModule = (value) => typeof value === 'object' && value !== null && 'web' in value && 'getNames' in value;
 const getPresetModules = (namespace, prefix = '') => Object.fromEntries(Object.entries(namespace)
     .filter(([, value]) => isEffectModule(value))
@@ -15,8 +20,8 @@ export const motionPresets = {
     ...getPresetModules(allPresets),
     ...getPresetModules(allLegacyPresets, LEGACY_PREFIX),
 };
-// Interact's registry is process-global. This module is only pulled into the server bundle
-// (`process.env.browser` DCE), so both namespaces are registered once per Node process.
+// Interact's registry is process-global. Only the server's bundle and the editor's pull this module in (`process.env`
+// DCE), so both namespaces are registered once per Node process or document.
 Interact.registerEffects(motionPresets);
 /** Emit animation FOUC CSS and click-trigger cursor rules. */
 export const getV2ConfigCss = (config) => {

package/dist/implementations/v2/configCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"configCss.js","sourceRoot":"","sources":["../../../src/implementations/v2/configCss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAU/C,MAAM,cAAc,GAAG,CAAC,KAAc,EAAyB,EAAE,CAChE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,CAAA;AAErF,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,MAAM,GAAW,EAAE,EAAgC,EAAE,CACjG,MAAM,CAAC,WAAW,CACjB,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;KACvB,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;KAC5C,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,KAAqB,CAAC,CAAC,CACrE,CAAA;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC;IAC1D,GAAG,gBAAgB,CAAC,UAAU,CAAC;IAC/B,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,aAAa,CAAC;CACpD,CAAA;AAED,2FAA2F;AAC3F,wFAAwF;AACxF,QAAQ,CAAC,eAAe,CAAC,aAA0C,CAAC,CAAA;AAEpE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAsB,EAAU,EAAE;IAChE,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;IAClD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAA;IAElD,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC3D,CAAC,CAAA"}
+{"version":3,"file":"configCss.js","sourceRoot":"","sources":["../../../src/implementations/v2/configCss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,8GAA8G;AAC9G,kHAAkH;AAClH,wEAAwE;AACxE,OAAO,KAAK,WAAW,MAAM,mBAAmB,CAAA;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;AAChC,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;AAUvC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAyB,EAAE,CAChE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,CAAA;AAErF,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,MAAM,GAAW,EAAE,EAAgC,EAAE,CACjG,MAAM,CAAC,WAAW,CACjB,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;KACvB,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;KAC5C,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,KAAqB,CAAC,CAAC,CACrE,CAAA;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC;IAC1D,GAAG,gBAAgB,CAAC,UAAU,CAAC;IAC/B,GAAG,gBAAgB,CAAC,gBAAgB,EAAE,aAAa,CAAC;CACpD,CAAA;AAED,sHAAsH;AACtH,6EAA6E;AAC7E,QAAQ,CAAC,eAAe,CAAC,aAA0C,CAAC,CAAA;AAEpE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAsB,EAAU,EAAE;IAChE,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;IAClD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAA;IAElD,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC3D,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-service-interactions",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "license": "UNLICENSED",
   "files": [
     "dist",
@@ -97,5 +97,5 @@
       ]
     }
   },
-  "falconPackageHash": "58561532c99aef5a387151cf0c35b9fb3a02b6dc0bd711caec1c509f"
+  "falconPackageHash": "44bf1ad483f5a1d88eedcc4d152542211de72016d53130d7a1460b2d"
 }

package/src/implementations/coreInteractions.ts

@@ -14,15 +14,18 @@ import type { ServicesManager } from '@wix/services-manager/types'
 import type { InteractConfig, InteractConfigEntry, IInteractionsServiceConfig } from '../definition'
 import { createInteractionsScriptElement } from './InteractionsScriptElement'
 import { createV2InteractionsScriptElement } from './v2/InteractionsScriptElement'
+import { createBundledV2Interactions } from './v2/BundledInteractions'
 import { getV2ConfigCss } from './v2/configCss'
 import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent'
 import { getClickTriggerCss } from './v2/clickTriggerCss'
+import { getBackgroundScrollCss } from './v2/backgroundScrollCss'
 import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent'
 import { getAuthoredStylesCss } from './v2/authoredStyles'
 import {
 	getInteractConfigEntries,
 	getInteractiveKeys,
 	getResolvedConfigEntries,
+	REACTIONS_NAMESPACE,
 	resolveInteractKeyConflicts,
 } from './configEntries'
 
@@ -30,6 +33,10 @@ import {
 const getRuntimeConfigs = (entries: InteractConfigEntry[]): InteractConfig[] =>
 	entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0)
 
+/** Only the reactions entry plays background scroll presets; experiences don't support them yet. */
+const getBackgroundCss = ({ namespace, interact }: InteractConfigEntry): string =>
+	namespace === REACTIONS_NAMESPACE ? getBackgroundScrollCss(interact) : ''
+
 const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean) => {
 	const runtimeConfigs = getRuntimeConfigs(entries)
 	// v1 registers its interact-element on create, and a tag can only be defined once: starting it for
@@ -51,12 +58,17 @@ const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean)
 	}
 }
 
-const getV2HeadContent = (entries: InteractConfigEntry[]): string => {
+const getV2Css = (entries: InteractConfigEntry[]): string => {
 	const generatedCss = entries
-		.map(({ interact }) => getV2ConfigCss(interact).trim())
+		.flatMap((entry) => [getV2ConfigCss(entry.interact), getBackgroundCss(entry)])
+		.map((css) => css.trim())
 		.filter(Boolean)
 		.join('\n')
-	const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
+	return [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
+}
+
+const getV2HeadContent = (entries: InteractConfigEntry[]): string => {
+	const css = getV2Css(entries)
 
 	return (
 		(getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
@@ -92,8 +104,28 @@ const initRuntime = (
 		return
 	}
 
-	const clickTriggerCss = entries.map(({ interact }) => getClickTriggerCss(interact).trim()).filter(Boolean)
-	addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, clickTriggerCss))
+	// The server sends these with the generated CSS; the client adopts whatever it did not send.
+	const configCss = entries
+		.flatMap((entry) => [getClickTriggerCss(entry.interact), getBackgroundCss(entry)])
+		.map((css) => css.trim())
+		.filter(Boolean)
+	addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId, configCss))
+}
+
+/** In place of `initRuntime`'s loader, on the same pages: the bundled runtime, with the server's head CSS rendered with the page. */
+const initBundledRuntime = (
+	entries: InteractConfigEntry[],
+	isReducedMotion: boolean,
+	getService: ServicesManager['getService']
+) => {
+	const runtimeConfigs = getRuntimeConfigs(entries)
+	if (!runtimeConfigs.length || !getService(PagesDefinition).currentPageId()) {
+		return
+	}
+
+	getService(ProvideComponentServiceDefinition).addTopComponent(
+		createBundledV2Interactions(runtimeConfigs, isReducedMotion, getV2Css(entries))
+	)
 }
 
 const getInteractiveComps = (entries: InteractConfigEntry[]): Set<string> => {
@@ -116,10 +148,14 @@ export const coreInteractions = (
 	const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config))
 
 	if (useV2) {
-		// Both belong in the head: the preload links only help while the document is still parsing,
-		// and the generated CSS hides elements before their entrance effect, so it has to apply
-		// before the body renders.
-		if (!process.env.browser) {
+		// The editor renders pages only in the browser, so it gets no server head: it renders that CSS with the page and
+		// runs the runtime it bundles, rather than a loader that imports it from the CDN after the page has painted
+		if (process.env.PACKAGE_NAME === 'thunderbolt-ds') {
+			initBundledRuntime(entries, isReducedMotion, getService)
+		} else if (!process.env.browser) {
+			// Both belong in the head: the preload links only help while the document is still parsing,
+			// and the generated CSS hides elements before their entrance effect, so it has to apply
+			// before the body renders.
 			const headContent = getV2HeadContent(entries)
 			// GENERAL rather than setHead's AFTER_SECURITY default: thunderbolt only reads the
 			// after-security bucket on its SEO path, so the default drops this on every normal
@@ -127,9 +163,10 @@ export const coreInteractions = (
 			if (headContent) {
 				getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL)
 			}
+			initRuntime(entries, isReducedMotion, getService, true)
+		} else {
+			initRuntime(entries, isReducedMotion, getService, true)
 		}
-
-		initRuntime(entries, isReducedMotion, getService, true)
 	} else if (isOpen('specs.thunderbolt.interactionsInSsr')) {
 		// Emits the config and loader scripts. Works in both environments: SSR serves markup the
 		// parser executes, and on the client the loader's ref revives it into a script that runs —