@wix/site-service-interactions 1.0.11 → 1.0.13

package/dist/implementations/v2/configStyleHeadContent.js

@@ -1,12 +1,14 @@
 /**
- * Head content is a raw HTML string, so anything tag-like in the generated CSS either closes the
- * style element early or trips the head appender's script-tag guard, which throws. Nothing in CSS
- * opens a tag: `<` appears only in media range queries, followed by a space or a digit. Cutting
- * from the first `<` that could start a tag leaves valid CSS untouched.
+ * Head content is a raw HTML string. CSS values may contain tag-like text, but an actual closing
+ * style tag still terminates the raw-text element, and HeadAppender rejects `<script` substrings.
+ * Keep other CSS intact: drop content after a closing style tag and break script-like sequences.
  */
+const STYLE_END_TAG = /<\/style(?=[\t\n\f\r />])/i;
+const SCRIPT_LIKE = /<script/gi;
 const sanitizeCssForStyleElement = (css) => {
-    const tagIndex = css.search(/<[a-zA-Z/]/);
-    return tagIndex === -1 ? css : css.slice(0, tagIndex);
+    const styleEndTagIndex = css.search(STYLE_END_TAG);
+    const withoutStyleBreakout = styleEndTagIndex === -1 ? css : css.slice(0, styleEndTagIndex);
+    return withoutStyleBreakout.replace(SCRIPT_LIKE, '\\3c script');
 };
 export const getV2ConfigStyleHeadContent = (css) => `<style>${sanitizeCssForStyleElement(css)}</style>`;
 //# sourceMappingURL=configStyleHeadContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"configStyleHeadContent.js","sourceRoot":"","sources":["../../../src/implementations/v2/configStyleHeadContent.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG,CAAC,GAAW,EAAU,EAAE;IACvD,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IACzC,OAAO,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,UAAU,0BAA0B,CAAC,GAAG,CAAC,UAAU,CAAA"}
+{"version":3,"file":"configStyleHeadContent.js","sourceRoot":"","sources":["../../../src/implementations/v2/configStyleHeadContent.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,aAAa,GAAG,4BAA4B,CAAA;AAClD,MAAM,WAAW,GAAG,WAAW,CAAA;AAE/B,MAAM,0BAA0B,GAAG,CAAC,GAAW,EAAU,EAAE;IACvD,MAAM,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAClD,MAAM,oBAAoB,GAAG,gBAAgB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAA;IAC3F,OAAO,oBAAoB,CAAC,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,CAAA;AACnE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,UAAU,0BAA0B,CAAC,GAAG,CAAC,UAAU,CAAA"}

package/dist/implementations/v2/interactionsScriptContent.js

@@ -1,20 +1,29 @@
-import { INTERACT_V2_IMPORT_URL, WIX_MOTION_PRESETS_IMPORT_URL } from './cdnUrls';
+import { INTERACT_V2_IMPORT_URL, LEGACY_WIX_MOTION_PRESETS_IMPORT_URL, MOTION_PRESETS_IMPORT_URL } from './cdnUrls';
+import { LEGACY_PREFIX } from './motionPresets';
+/** The loader destructures `Promise.all` in this order. */
+const MODULE_IMPORT_URLS = [INTERACT_V2_IMPORT_URL, LEGACY_WIX_MOTION_PRESETS_IMPORT_URL, MOTION_PRESETS_IMPORT_URL];
 /**
  * The loader reaches these modules through dynamic `import()`, which the preload scanner cannot
  * see, so without the links the fetches only start once the loader runs. No `crossorigin`: a bare
  * `modulepreload` fetches with the same credentials mode as a bare `import()`, and a mismatch
  * would download each module twice.
  */
-export const getV2ModulePreloadHeadContent = () => `<link rel="modulepreload" href="${INTERACT_V2_IMPORT_URL}"><link rel="modulepreload" href="${WIX_MOTION_PRESETS_IMPORT_URL}">`;
+export const getV2ModulePreloadHeadContent = () => MODULE_IMPORT_URLS.map(url => `<link rel="modulepreload" href="${url}">`).join('');
 export const getV2InteractionsScriptContent = (configId, isReducedMotion) => [
     `const configElement = document.getElementById(\`${configId}\`)`,
     'if (configElement) {',
-    '  const config = JSON.parse(configElement.textContent)',
-    '  const [{ Interact }, presets] = await Promise.all([',
-    `    import(\`${INTERACT_V2_IMPORT_URL}\`),`,
-    `    import(\`${WIX_MOTION_PRESETS_IMPORT_URL}\`),`,
+    '  const parsedConfig = JSON.parse(configElement.textContent)',
+    '  const configs = Array.isArray(parsedConfig) ? parsedConfig : [parsedConfig]',
+    '  const [{ Interact }, legacyPresets, presets] = await Promise.all([',
+    ...MODULE_IMPORT_URLS.map(url => `    import(\`${url}\`),`),
     '  ])',
-    '  Interact.registerEffects(presets)',
+    // Reactions configs carry the prefix on their named effect types, so the two packages can
+    // both export a preset under the same name without one shadowing the other.
+    '  const aliasedLegacyPresets = {}',
+    '  for (const name of Object.keys(legacyPresets)) {',
+    `    aliasedLegacyPresets[\`${LEGACY_PREFIX}\` + name] = legacyPresets[name]`,
+    '  }',
+    '  Interact.registerEffects({ ...presets, ...aliasedLegacyPresets })',
     `  Interact.forceReducedMotion = ${isReducedMotion}`,
     '  Interact.setup({',
     '    scrollOptionsGetter: function () {',
@@ -25,7 +34,9 @@ export const getV2InteractionsScriptContent = (configId, isReducedMotion) => [
     '      useSafeViewEnter: true,',
     '    },',
     '  })',
-    '  Interact.create(config)',
+    '  for (const config of configs) {',
+    '    Interact.create(config)',
+    '  }',
     '}',
 ].join('\n');
 //# sourceMappingURL=interactionsScriptContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"interactionsScriptContent.js","sourceRoot":"","sources":["../../../src/implementations/v2/interactionsScriptContent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,6BAA6B,EAAE,MAAM,WAAW,CAAA;AAEjF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAW,EAAE,CACtD,mCAAmC,sBAAsB,qCAAqC,6BAA6B,IAAI,CAAA;AAEnI,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,QAAgB,EAAE,eAAwB,EAAU,EAAE,CACjG;IACI,mDAAmD,QAAQ,KAAK;IAChE,sBAAsB;IACtB,wDAAwD;IACxD,uDAAuD;IACvD,gBAAgB,sBAAsB,MAAM;IAC5C,gBAAgB,6BAA6B,MAAM;IACnD,MAAM;IACN,qCAAqC;IACrC,mCAAmC,eAAe,EAAE;IACpD,oBAAoB;IACpB,wCAAwC;IACxC,mDAAmD;IACnD,QAAQ;IACR,8BAA8B;IAC9B,kBAAkB;IAClB,+BAA+B;IAC/B,QAAQ;IACR,MAAM;IACN,2BAA2B;IAC3B,GAAG;CACN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA"}
+{"version":3,"file":"interactionsScriptContent.js","sourceRoot":"","sources":["../../../src/implementations/v2/interactionsScriptContent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,oCAAoC,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAA;AACnH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,2DAA2D;AAC3D,MAAM,kBAAkB,GAAG,CAAC,sBAAsB,EAAE,oCAAoC,EAAE,yBAAyB,CAAC,CAAA;AAEpH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAW,EAAE,CACtD,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,mCAAmC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtF,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,QAAgB,EAAE,eAAwB,EAAU,EAAE,CACjG;IACI,mDAAmD,QAAQ,KAAK;IAChE,sBAAsB;IACtB,8DAA8D;IAC9D,+EAA+E;IAC/E,sEAAsE;IACtE,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,gBAAgB,GAAG,MAAM,CAAC;IAC3D,MAAM;IACN,0FAA0F;IAC1F,4EAA4E;IAC5E,mCAAmC;IACnC,oDAAoD;IACpD,8BAA8B,aAAa,kCAAkC;IAC7E,KAAK;IACL,qEAAqE;IACrE,mCAAmC,eAAe,EAAE;IACpD,oBAAoB;IACpB,wCAAwC;IACxC,mDAAmD;IACnD,QAAQ;IACR,8BAA8B;IAC9B,kBAAkB;IAClB,+BAA+B;IAC/B,QAAQ;IACR,MAAM;IACN,mCAAmC;IACnC,6BAA6B;IAC7B,KAAK;IACL,GAAG;CACN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA"}

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

@@ -0,0 +1,14 @@
+import type { InteractConfig } from '@wix/interact-v2';
+type EffectModule = {
+    web: unknown;
+    style?: unknown;
+    getNames: unknown;
+};
+export declare const LEGACY_PREFIX = "LEGACY_";
+/**
+ * Both preset packages under one registry, mirroring what the client loader registers. The legacy
+ * names carry the prefix so a preset published by both packages doesn't shadow its counterpart.
+ */
+export declare const motionPresets: Record<string, EffectModule>;
+export declare const aliasLegacyNamedEffects: (interact: InteractConfig) => InteractConfig;
+export {};

package/dist/implementations/v2/motionPresets.js

@@ -0,0 +1,39 @@
+import * as allLegacyPresets from '@wix/wix-motion-presets';
+import * as allPresets from '@wix/motion-presets';
+export const LEGACY_PREFIX = 'LEGACY_';
+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))
+    .map(([name, value]) => [`${prefix}${name}`, value]));
+/**
+ * Both preset packages under one registry, mirroring what the client loader registers. The legacy
+ * names carry the prefix so a preset published by both packages doesn't shadow its counterpart.
+ */
+export const motionPresets = {
+    ...getPresetModules(allPresets),
+    ...getPresetModules(allLegacyPresets, LEGACY_PREFIX),
+};
+const aliasEffect = (effect) => {
+    const { namedEffect } = effect;
+    if (!namedEffect?.type) {
+        return effect;
+    }
+    return { ...effect, namedEffect: { ...namedEffect, type: `${LEGACY_PREFIX}${namedEffect.type}` } };
+};
+const aliasSequence = (sequence) => {
+    const { effects } = sequence;
+    return effects ? { ...sequence, effects: effects.map(aliasEffect) } : sequence;
+};
+const mapRecord = (record, map) => Object.fromEntries(Object.entries(record).map(([key, value]) => [key, map(value)]));
+// TODO(ameerf): make this implementation simpler without so many copies of the config object. The current implementation is a direct translation of the v1 code, which was written to avoid mutating the config object.
+export const aliasLegacyNamedEffects = (interact) => ({
+    ...interact,
+    ...(interact.effects && { effects: mapRecord(interact.effects, aliasEffect) }),
+    ...(interact.sequences && { sequences: mapRecord(interact.sequences, aliasSequence) }),
+    interactions: interact.interactions.map(interaction => ({
+        ...interaction,
+        ...(interaction.effects && { effects: interaction.effects.map(aliasEffect) }),
+        ...(interaction.sequences && { sequences: interaction.sequences.map(aliasSequence) }),
+    })),
+});
+//# sourceMappingURL=motionPresets.js.map

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

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

package/dist/service.d.ts

@@ -1,7 +1,7 @@
 import { InteractionsService } from './implementations/interactionsService';
 export declare const definition: string & {
     __api: import("./definition").IInteractionsService;
-    __config: import("@wix/interact").InteractConfig;
+    __config: import("./definition").IInteractionsServiceConfig;
     isServiceDefinition?: boolean;
 } & import("./definition").IInteractionsService;
 export default InteractionsService;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export type { IInteractionsService, IInteractionsServiceConfig, IInteractionsDefinition } from '../definition';
-export type { InteractConfig } from '@wix/interact';
+export type { InteractConfig } from '@wix/interact-v2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-service-interactions",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "cjs/build/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,7 +44,9 @@
   },
   "dependencies": {
     "@wix/interact": "^1.103.0",
-    "@wix/interact-v2": "npm:@wix/interact@^2.5.14",
+    "@wix/interact-v2": "npm:@wix/interact@2.5.14",
+    "@wix/motion": "2.1.14",
+    "@wix/motion-presets": "1.0.7",
     "@wix/services-manager": "^0.2.20",
     "@wix/services-manager-react": "^0.1.26",
     "@wix/site-service-device-info": "1.0.2",
@@ -53,7 +55,7 @@
     "@wix/site-service-provide-css": "1.0.1",
     "@wix/static-service": "1.0.19",
     "@wix/viewer-service-pages": "1.0.11",
-    "@wix/wix-motion-presets": "^1.0.0"
+    "@wix/wix-motion-presets": "1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",
@@ -94,5 +96,5 @@
       ]
     }
   },
-  "falconPackageHash": "734ab56bc526bfeff605dd11b9244ff0ef20ff101b76e970334c2137"
+  "falconPackageHash": "2458872e3235fa01728dec98c1fee7715ee8507f8cde1c6d25d15ed0"
 }

package/src/definition/index.ts

@@ -1,8 +1,25 @@
 import { defineStaticService } from '@wix/static-service'
 import type { StaticServiceDefinition } from '@wix/static-service'
-import type { InteractConfig } from '@wix/interact'
+import type { InteractConfig } from '@wix/interact-v2'
 
-export type IInteractionsServiceConfig = InteractConfig
+export type { InteractConfig }
+
+export type InteractStyleRule = {
+    key?: string
+    selector?: string
+    '@media'?: string
+    '@container'?: string
+    '@supports'?: string
+    properties: Record<string, string>
+}
+
+export type InteractConfigEntry = {
+    namespace?: string
+    interact: InteractConfig
+    styles?: InteractStyleRule[]
+}
+
+export type IInteractionsServiceConfig = InteractConfig | { entries: InteractConfigEntry[] }
 
 export interface IInteractionsService {
     hasInteractions: (path: string) => boolean

package/src/implementations/InteractionsScriptElement.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { FunctionComponent } from 'react'
-import type { InteractConfig } from '@wix/interact'
+import type { InteractConfig } from '@wix/interact-v2'
 import { getInteractionsScriptContent } from './interactionsScriptContent'
 import { reviveScriptElement } from './reviveScriptElement'
 

package/src/implementations/configEntries.ts

@@ -0,0 +1,105 @@
+import type { InteractConfig, InteractConfigEntry, IInteractionsServiceConfig } from '../definition'
+import { aliasLegacyNamedEffects } from './v2/motionPresets'
+
+export const REACTIONS_NAMESPACE = 'reactions'
+
+type Interaction = InteractConfig['interactions'][number]
+type Sequence = NonNullable<Interaction['sequences']>[number]
+type KeyedEffect = { key?: string; effectId?: string }
+
+export const getInteractConfigEntries = (config: IInteractionsServiceConfig): InteractConfigEntry[] =>
+    'entries' in config ? config.entries : [{ interact: config, namespace: REACTIONS_NAMESPACE }]
+
+export const getResolvedConfigEntries = (config: IInteractionsServiceConfig): InteractConfigEntry[] =>
+    getInteractConfigEntries(config).map(entry =>
+        entry.namespace === REACTIONS_NAMESPACE
+            ? { ...entry, interact: aliasLegacyNamedEffects(entry.interact) }
+            : entry
+    )
+
+/** An `effectId` points at `interact.effects`, which is where a reactions effect keeps its key. */
+const resolveEffectKey = (interact: InteractConfig, effect: KeyedEffect): string | undefined =>
+    effect.key ?? (effect.effectId ? interact.effects?.[effect.effectId]?.key : undefined)
+
+const addEffectKeys = (keys: Set<string>, interact: InteractConfig, effects: readonly KeyedEffect[] = []) => {
+    for (const effect of effects) {
+        const key = resolveEffectKey(interact, effect)
+        if (key) {
+            keys.add(key)
+        }
+    }
+}
+
+/** A `sequenceId` reference has no inline effects; resolve it against `interact.sequences`. */
+const getSequenceEffects = (interact: InteractConfig, sequence: Sequence): readonly KeyedEffect[] =>
+    'effects' in sequence ? sequence.effects : (interact.sequences?.[sequence.sequenceId]?.effects ?? [])
+
+const getInteractionKeys = (interact: InteractConfig, interaction: Interaction): Set<string> => {
+    const keys = new Set<string>([interaction.key])
+    addEffectKeys(keys, interact, interaction.effects)
+    for (const sequence of interaction.sequences ?? []) {
+        addEffectKeys(keys, interact, getSequenceEffects(interact, sequence))
+    }
+    return keys
+}
+
+export const getInteractiveKeys = ({ interact }: InteractConfigEntry): Set<string> => {
+    const keys = new Set<string>()
+
+    for (const interaction of interact.interactions) {
+        getInteractionKeys(interact, interaction).forEach(key => keys.add(key))
+    }
+
+    return keys
+}
+
+const dropOverriddenKeys = (entry: InteractConfigEntry, overriddenKeys: Set<string>): InteractConfigEntry => {
+    const { interact } = entry
+
+    return {
+        ...entry,
+        interact: {
+            ...interact,
+            interactions: interact.interactions.filter(
+                interaction => ![...getInteractionKeys(interact, interaction)].some(key => overriddenKeys.has(key))
+            ),
+        },
+    }
+}
+
+/**
+ * Interact resolves a custom-element key to the first instance containing that key, so a key shared
+ * by two entries would silently drop one of them. Experience entries own the keys they declare:
+ * whatever they claim is stripped from the reactions entry by dropping whole interactions whose
+ * resolved keys overlap. Top-level effect and sequence libraries are left intact. A collision between two
+ * experience entries stays an error, since neither of them is authoritative.
+ */
+export const resolveInteractKeyConflicts = (entries: InteractConfigEntry[]): InteractConfigEntry[] => {
+    const owners = new Map<string, string>()
+
+    entries.forEach((entry, index) => {
+        if (entry.namespace === REACTIONS_NAMESPACE) {
+            return
+        }
+        const owner = entry.namespace ?? `entry-${index}`
+        for (const key of getInteractiveKeys(entry)) {
+            const existingOwner = owners.get(key)
+            if (existingOwner !== undefined) {
+                throw new Error(
+                    `Interactions config key "${key}" is shared by "${existingOwner}" and "${owner}". ` +
+                        'Keys must be unique across config entries.'
+                )
+            }
+            owners.set(key, owner)
+        }
+    })
+
+    if (!owners.size) {
+        return entries
+    }
+
+    const overriddenKeys = new Set(owners.keys())
+    return entries.map(entry =>
+        entry.namespace === REACTIONS_NAMESPACE ? dropOverriddenKeys(entry, overriddenKeys) : entry
+    )
+}

package/src/implementations/coreInteractions.ts

@@ -1,5 +1,5 @@
 import { Interact } from '@wix/interact'
-import type { InteractConfig } from '@wix/interact'
+import type { InteractConfig as InteractV1Config } from '@wix/interact'
 import { DeviceInfoDefinition } from '@wix/site-service-device-info/definition'
 import { ExperimentsDefinition } from '@wix/site-service-experiments/definition'
 // Deliberately the deprecated pages service. Thunderbolt registers the site-service-pages page
@@ -11,13 +11,25 @@ import { HeadAppenderDefinition } from '@wix/site-service-head-appender/definiti
 import { HeadContentType } from '@wix/site-service-head-appender/types'
 import { ProvideComponentServiceDefinition } from '@wix/services-manager-react/core-services/provide-component'
 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 { getV2ConfigCss } from './v2/configCss'
 import { getV2ConfigStyleHeadContent } from './v2/configStyleHeadContent'
 import { getV2ModulePreloadHeadContent } from './v2/interactionsScriptContent'
+import { getAuthoredStylesCss } from './v2/authoredStyles'
+import {
+    getInteractConfigEntries,
+    getInteractiveKeys,
+    getResolvedConfigEntries,
+    resolveInteractKeyConflicts,
+} from './configEntries'
 
-const initInteract = (config: InteractConfig, isReducedMotion: boolean) => {
+/** An entry without interactions contributes CSS only; nothing has to load Interact for it. */
+const getRuntimeConfigs = (entries: InteractConfigEntry[]): InteractConfig[] =>
+    entries.map(({ interact }) => interact).filter(({ interactions }) => interactions.length > 0)
+
+const initInteract = (entries: InteractConfigEntry[], isReducedMotion: boolean) => {
     // Bundled runtime is v1. v2 on the client is the CDN loader.
     Interact.forceReducedMotion = isReducedMotion
     Interact.setup({
@@ -27,16 +39,32 @@ const initInteract = (config: InteractConfig, isReducedMotion: boolean) => {
             useSafeViewEnter: true,
         },
     })
-    Interact.create(config)
+    for (const { interact } of entries) {
+        Interact.create(interact as InteractV1Config)
+    }
+}
+
+const getV2HeadContent = (entries: InteractConfigEntry[]): string => {
+    const generatedCss = entries
+        .map(({ interact }) => getV2ConfigCss(interact).trim())
+        .filter(Boolean)
+        .join('\n')
+    const css = [getAuthoredStylesCss(entries).trim(), generatedCss].filter(Boolean).join('\n')
+
+    return (
+        (getRuntimeConfigs(entries).length ? getV2ModulePreloadHeadContent() : '') +
+        (css ? getV2ConfigStyleHeadContent(css) : '')
+    )
 }
 
 const initRuntime = (
-    config: InteractConfig,
+    entries: InteractConfigEntry[],
     isReducedMotion: boolean,
     getService: ServicesManager['getService'],
     useV2: boolean
 ) => {
-    if (!config.interactions?.length) {
+    const runtimeConfigs = getRuntimeConfigs(entries)
+    if (!runtimeConfigs.length) {
         return
     }
 
@@ -47,55 +75,61 @@ const initRuntime = (
 
     const { addTopComponent } = getService(ProvideComponentServiceDefinition)
 
-    const interactionsScript = useV2
-        ? createV2InteractionsScriptElement(config, isReducedMotion, pageId)
-        : createInteractionsScriptElement(config, isReducedMotion, pageId)
+    if (!useV2) {
+        // v1 serializes a single config and has no path for authored-style CSS, so anything beyond
+        // that would be silently dropped.
+        if (entries.length > 1 || entries.some(({ styles }) => styles?.length)) {
+            throw new Error('Multiple interactions config entries and authored styles require Interact v2.')
+        }
+        addTopComponent(createInteractionsScriptElement(runtimeConfigs[0], isReducedMotion, pageId))
+        return
+    }
 
-    addTopComponent(interactionsScript)
+    addTopComponent(createV2InteractionsScriptElement(runtimeConfigs, isReducedMotion, pageId))
 }
 
-const getInteractiveComps = (interactions: InteractConfig['interactions']) =>
-    interactions.reduce((acc, { key, effects }) => {
-        // add trigger comp
-        acc.add(key)
-        // add reaction comps
-        // there must be a key
-        effects?.forEach(({ key }) => acc.add(key!))
-
-        return acc
-    }, new Set<string>())
+const getInteractiveComps = (entries: InteractConfigEntry[]): Set<string> => {
+    const keys = new Set<string>()
+    for (const entry of entries) {
+        getInteractiveKeys(entry).forEach(key => keys.add(key))
+    }
+    return keys
+}
 
-export const coreInteractions = (config: InteractConfig, getService: ServicesManager['getService']) => {
+export const coreInteractions = (config: IInteractionsServiceConfig, getService: ServicesManager['getService']) => {
     const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition)
     const { isOpen } = getService(ExperimentsDefinition)
+    const useV2 = isOpen('specs.thunderbolt.vsm_interactions_v2')
+    // The v1 runtime has no preset registration and doesn't understand LEGACY_* names; skip
+    // aliasing on those paths so named reaction effects remain resolvable.
+    const entries = resolveInteractKeyConflicts((useV2 ? getResolvedConfigEntries : getInteractConfigEntries)(config))
 
-    if (isOpen('specs.thunderbolt.vsm_interactions_v2')) {
+    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) {
-            const css = getV2ConfigCss(config).trim()
+            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
             // request. GENERAL reaches the document as raw markup before `</head>`.
-            getService(HeadAppenderDefinition).setHead(
-                getV2ModulePreloadHeadContent() + (css ? getV2ConfigStyleHeadContent(css) : ''),
-                HeadContentType.GENERAL
-            )
+            if (headContent) {
+                getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL)
+            }
         }
 
-        initRuntime(config, 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 —
         // which is what pages rendered only on the client (password-protected / members-only,
         // client-side navigation) need, since they never get a server-rendered document.
-        initRuntime(config, isReducedMotion, getService, false)
+        initRuntime(entries, isReducedMotion, getService, false)
     } else {
-        initInteract(config, isReducedMotion)
+        initInteract(entries, isReducedMotion)
     }
 
     return {
-        interactiveComps: getInteractiveComps(config.interactions),
+        interactiveComps: getInteractiveComps(entries),
     }
 }

package/src/implementations/v2/InteractionsScriptElement.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { FunctionComponent } from 'react'
-import type { InteractConfig } from '@wix/interact'
+import type { InteractConfig } from '@wix/interact-v2'
 import { reviveScriptElement } from '../reviveScriptElement'
 import { getV2InteractionsScriptContent } from './interactionsScriptContent'
 
@@ -10,11 +10,11 @@ const DANGEROUSLY_SET_INNER_HTML = ['dangerously', 'Set', 'Inner', 'HTML']
  * The config is written as raw markup, so a `</script` inside any string value would close the
  * element early. `\u003c` is valid JSON that `JSON.parse` reads back as `<`.
  */
-const serializeConfigForScriptElement = (config: InteractConfig): string =>
+const serializeConfigForScriptElement = (config: InteractConfig | InteractConfig[]): string =>
     JSON.stringify(config).replace(/</g, '\\u003c')
 
 export const createV2InteractionsScriptElement =
-    (config: InteractConfig, isReducedMotion: boolean, pageId: string): FunctionComponent =>
+    (config: InteractConfig | InteractConfig[], isReducedMotion: boolean, pageId: string): FunctionComponent =>
     () => {
         // This ID is also interpolated into raw module-script text. Percent-encoding removes
         // script delimiters and template-literal syntax while keeping the ID deterministic.

package/src/implementations/v2/authoredStyles.ts

@@ -0,0 +1,108 @@
+import type { InteractConfigEntry, InteractStyleRule } from '../../definition'
+
+const SELECTOR_TOKEN = /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|[()[\]]|,/g
+
+const escapeCssString = (value: string): string =>
+    value
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\a ')
+        .replace(/\r/g, '\\d ')
+        .replace(/\f/g, '\\c ')
+
+const splitSelectorList = (selector: string): string[] => {
+    const parts: string[] = []
+    let depth = 0
+    let start = 0
+
+    SELECTOR_TOKEN.lastIndex = 0
+    for (let match = SELECTOR_TOKEN.exec(selector); match; match = SELECTOR_TOKEN.exec(selector)) {
+        const token = match[0]
+        if (token === '(' || token === '[') {
+            depth++
+        } else if (token === ')' || token === ']') {
+            depth--
+        } else if (token === ',' && depth === 0) {
+            parts.push(selector.slice(start, match.index))
+            start = match.index + 1
+        }
+    }
+
+    parts.push(selector.slice(start))
+    return parts.map(part => part.trim()).filter(Boolean)
+}
+
+const indentCssBlock = (css: string): string =>
+    css
+        .split('\n')
+        .map(line => (line ? `  ${line}` : line))
+        .join('\n')
+
+const renderProperties = (properties: Record<string, string>): string =>
+    Object.entries(properties)
+        .map(([property, value]) => `  ${property}: ${value};`)
+        .join('\n')
+
+const wrapWithConditions = (block: string, rule: InteractStyleRule): string => {
+    let result = block
+    if (rule['@container']) {
+        result = `@container ${rule['@container']} {\n${indentCssBlock(result)}\n}`
+    }
+    if (rule['@media']) {
+        result = `@media ${rule['@media']} {\n${indentCssBlock(result)}\n}`
+    }
+    if (rule['@supports']) {
+        result = `@supports ${rule['@supports']} {\n${indentCssBlock(result)}\n}`
+    }
+    return result
+}
+
+const buildRuleSelector = (namespace: string, rule: InteractStyleRule): string => {
+    const scopeWrapper = `[data-interact-key="${escapeCssString(namespace)}"]`
+    const scopeRoot = `${scopeWrapper} > :first-child`
+
+    if (!rule.key) {
+        if (!rule.selector) {
+            return scopeRoot
+        }
+        return splitSelectorList(rule.selector)
+            .map(selector => `${scopeRoot} ${selector}`)
+            .join(', ')
+    }
+
+    const escapedKey = escapeCssString(rule.key)
+    const keyWrapper = rule.key === namespace ? scopeWrapper : `${scopeWrapper} [data-interact-key="${escapedKey}"]`
+    const keyRoot = `${keyWrapper} > :first-child`
+    if (!rule.selector) {
+        return keyRoot
+    }
+
+    const separator = /^\s/.test(rule.selector) ? ' ' : ''
+    return splitSelectorList(rule.selector)
+        .map(selector => `${keyRoot}${separator}${selector}`)
+        .join(', ')
+}
+
+const getEntryStylesCss = ({ namespace, styles = [] }: InteractConfigEntry): string => {
+    if (!styles.length) {
+        return ''
+    }
+    if (!namespace) {
+        throw new Error('Interactions config entries with authored styles must define a namespace.')
+    }
+
+    return styles
+        .map(rule => {
+            const properties = renderProperties(rule.properties)
+            if (!properties) {
+                return ''
+            }
+            const block = `${buildRuleSelector(namespace, rule)} {\n${properties}\n}`
+            return wrapWithConditions(block, rule)
+        })
+        .filter(Boolean)
+        .join('\n\n')
+}
+
+export const getAuthoredStylesCss = (entries: InteractConfigEntry[]): string =>
+    entries.map(getEntryStylesCss).filter(Boolean).join('\n\n')

package/src/implementations/v2/cdnUrls.ts

@@ -1,3 +1,6 @@
 export const INTERACT_V2_IMPORT_URL = 'https://cdn.jsdelivr.net/npm/@wix/interact@2.5.14/dist/es/web.min.js'
 
-export const WIX_MOTION_PRESETS_IMPORT_URL = 'https://cdn.jsdelivr.net/npm/@wix/wix-motion-presets@1.0.0/+esm'
+export const LEGACY_WIX_MOTION_PRESETS_IMPORT_URL = 'https://cdn.jsdelivr.net/npm/@wix/wix-motion-presets@1.2.0/+esm'
+
+export const MOTION_PRESETS_IMPORT_URL =
+    'https://cdn.jsdelivr.net/npm/@wix/motion-presets@1.0.7/dist/browser/motion-presets.min.js'

package/src/implementations/v2/clickTriggerCss.ts

@@ -1,4 +1,4 @@
-import type { InteractConfig, Interaction } from '@wix/interact'
+import type { InteractConfig, Interaction } from '@wix/interact-v2'
 
 const escapeCssAttr = (value: string): string => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')