@wix/site-service-interactions 1.0.12 → 1.0.14

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,91 +11,125 @@ 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) => {
-    // Bundled runtime is v1. v2 on the client is the CDN loader.
-    Interact.forceReducedMotion = isReducedMotion
-    Interact.setup({
-        scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
-        allowA11yTriggers: true,
-        viewEnter: {
-            useSafeViewEnter: true,
-        },
-    })
-    Interact.create(config)
+/** 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({
+		scrollOptionsGetter: () => globalThis.document.getElementById('site-root'),
+		allowA11yTriggers: true,
+		viewEnter: {
+			useSafeViewEnter: true,
+		},
+	})
+	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,
-    isReducedMotion: boolean,
-    getService: ServicesManager['getService'],
-    useV2: boolean
+	entries: InteractConfigEntry[],
+	isReducedMotion: boolean,
+	getService: ServicesManager['getService'],
+	useV2: boolean
 ) => {
-    if (!config.interactions?.length) {
-        return
-    }
+	const runtimeConfigs = getRuntimeConfigs(entries)
+	if (!runtimeConfigs.length) {
+		return
+	}
 
-    const pageId = getService(PagesDefinition).currentPageId()
-    if (!pageId) {
-        return
-    }
+	const pageId = getService(PagesDefinition).currentPageId()
+	if (!pageId) {
+		return
+	}
 
-    const { addTopComponent } = getService(ProvideComponentServiceDefinition)
+	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']) => {
-    const { reducedMotion: isReducedMotion } = getService(DeviceInfoDefinition)
-    const { isOpen } = getService(ExperimentsDefinition)
+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')) {
-        // 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()
-            // 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 (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 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>`.
+			if (headContent) {
+				getService(HeadAppenderDefinition).setHead(headContent, HeadContentType.GENERAL)
+			}
+		}
 
-        initRuntime(config, 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)
-    } else {
-        initInteract(config, isReducedMotion)
-    }
+		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(entries, isReducedMotion, getService, false)
+	} else {
+		initInteract(entries, isReducedMotion)
+	}
 
-    return {
-        interactiveComps: getInteractiveComps(config.interactions),
-    }
+	return {
+		interactiveComps: getInteractiveComps(entries),
+	}
 }

package/src/implementations/interactions.ts

@@ -3,16 +3,16 @@ import type { IInteractionsService, IInteractionsServiceConfig } from '../defini
 import { coreInteractions } from './coreInteractions'
 
 export const createInteractions = (
-    config: IInteractionsServiceConfig,
-    getService: ServicesManager['getService']
+	config: IInteractionsServiceConfig,
+	getService: ServicesManager['getService']
 ): IInteractionsService => {
-    const { interactiveComps } = coreInteractions(config, getService)
+	const { interactiveComps } = coreInteractions(config, getService)
 
-    const getConfigPath = (path: string) => path.replace(/\[[^\]]+]/g, '[]')
+	const getConfigPath = (path: string) => path.replace(/\[[^\]]+]/g, '[]')
 
-    const hasInteractions: IInteractionsService['hasInteractions'] = path => interactiveComps.has(getConfigPath(path))
+	const hasInteractions: IInteractionsService['hasInteractions'] = (path) => interactiveComps.has(getConfigPath(path))
 
-    return {
-        hasInteractions,
-    }
+	return {
+		hasInteractions,
+	}
 }

package/src/implementations/interactionsExternal.ts

@@ -5,21 +5,21 @@ import { coreInteractions } from './coreInteractions'
 import { hasClickTriggerCss, wixInteractElementCss } from './stylesToAdd'
 
 export const createInteractionsExternal = (
-    config: IInteractionsServiceConfig,
-    getService: ServicesManager['getService']
+	config: IInteractionsServiceConfig,
+	getService: ServicesManager['getService']
 ): IInteractionsService => {
-    const provideCssService = getService(ProvideCssDefinition)
+	const provideCssService = getService(ProvideCssDefinition)
 
-    const styles = [wixInteractElementCss, hasClickTriggerCss]
-    const cssToAdd = styles.join('\n')
+	const styles = [wixInteractElementCss, hasClickTriggerCss]
+	const cssToAdd = styles.join('\n')
 
-    provideCssService.addStyle(cssToAdd)
+	provideCssService.addStyle(cssToAdd)
 
-    const { interactiveComps } = coreInteractions(config, getService)
+	const { interactiveComps } = coreInteractions(config, getService)
 
-    const hasInteractions: IInteractionsService['hasInteractions'] = path => interactiveComps.has(path)
+	const hasInteractions: IInteractionsService['hasInteractions'] = (path) => interactiveComps.has(path)
 
-    return {
-        hasInteractions,
-    }
+	return {
+		hasInteractions,
+	}
 }

package/src/implementations/interactionsService.ts

@@ -6,15 +6,15 @@ import { createInteractions } from './interactions'
 import { createInteractionsExternal } from './interactionsExternal'
 
 export const InteractionsService = implementStaticService(
-    InteractionsDefinition,
-    ({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
-        return createInteractions(config, getService)
-    }
+	InteractionsDefinition,
+	({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
+		return createInteractions(config, getService)
+	}
 )
 
 export const InteractionsServiceExternal = implementStaticService(
-    InteractionsDefinition,
-    ({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
-        return createInteractionsExternal(config, getService)
-    }
+	InteractionsDefinition,
+	({ config, getService }: StaticServiceFactoryOpts<IInteractionsServiceConfig>) => {
+		return createInteractionsExternal(config, getService)
+	}
 )

package/src/implementations/reviveScriptElement.ts

@@ -16,14 +16,14 @@
  * connected, and `connect()` returns early for them, so only the first instance serves a key.
  */
 export const reviveScriptElement = (rendered: HTMLScriptElement | null) => {
-    if (!rendered?.isConnected) {
-        return
-    }
+	if (!rendered?.isConnected) {
+		return
+	}
 
-    const executable = globalThis.document.createElement('script')
-    executable.type = rendered.type
-    executable.id = rendered.id
-    executable.textContent = rendered.textContent
+	const executable = globalThis.document.createElement('script')
+	executable.type = rendered.type
+	executable.id = rendered.id
+	executable.textContent = rendered.textContent
 
-    rendered.replaceWith(executable)
+	rendered.replaceWith(executable)
 }

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,33 +10,28 @@ 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 =>
-    JSON.stringify(config).replace(/</g, '\\u003c')
+const serializeConfigForScriptElement = (config: InteractConfig | InteractConfig[]): string =>
+	JSON.stringify(config).replace(/</g, '\\u003c')
 
 export const createV2InteractionsScriptElement =
-    (config: 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.
-        const safePageId = encodeURIComponent(pageId)
-        const configId = `interactions-config-${safePageId}`
-        const interactionsScriptContent = getV2InteractionsScriptContent(configId, isReducedMotion)
-        const configProps = {
-            [DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: serializeConfigForScriptElement(config) },
-        }
-        const loaderProps = {
-            [DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: interactionsScriptContent },
-        }
+	(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.
+		const safePageId = encodeURIComponent(pageId)
+		const configId = `interactions-config-${safePageId}`
+		const interactionsScriptContent = getV2InteractionsScriptContent(configId, isReducedMotion)
+		const configProps = {
+			[DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: serializeConfigForScriptElement(config) },
+		}
+		const loaderProps = {
+			[DANGEROUSLY_SET_INNER_HTML.join('')]: { __html: interactionsScriptContent },
+		}
 
-        return (
-            <>
-                <script type="application/json" id={configId} {...configProps} />
-                <script
-                    type="module"
-                    id={`interactions-loader-${safePageId}`}
-                    ref={reviveScriptElement}
-                    {...loaderProps}
-                />
-            </>
-        )
-    }
+		return (
+			<>
+				<script type="application/json" id={configId} {...configProps} />
+				<script type="module" id={`interactions-loader-${safePageId}`} ref={reviveScriptElement} {...loaderProps} />
+			</>
+		)
+	}

package/src/implementations/v2/authoredStyles.ts

@@ -0,0 +1,103 @@
+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, '\\"')
 
@@ -7,38 +7,38 @@ const escapeCssAttr = (value: string): string => value.replace(/\\/g, '\\\\').re
  * plus the `[data-interact-key="…"]` prefix from `CSSRuleToString`.
  */
 const getInteractionSourceSelector = (
-    interaction: Pick<Interaction, 'key' | 'selector' | 'listContainer' | 'listItemSelector'>
+	interaction: Pick<Interaction, 'key' | 'selector' | 'listContainer' | 'listItemSelector'>
 ): string => {
-    const { key, selector, listContainer, listItemSelector } = interaction
-    const attrSelector = `[data-interact-key="${escapeCssAttr(key)}"]`
+	const { key, selector, listContainer, listItemSelector } = interaction
+	const attrSelector = `[data-interact-key="${escapeCssAttr(key)}"]`
 
-    if (listContainer) {
-        const itemFilter = listItemSelector ? ` > ${listItemSelector}` : ''
-        const inner = selector ? `${listContainer}${itemFilter} ${selector}` : `${listContainer}${itemFilter || ' > *'}`
+	if (listContainer) {
+		const itemFilter = listItemSelector ? ` > ${listItemSelector}` : ''
+		const inner = selector ? `${listContainer}${itemFilter} ${selector}` : `${listContainer}${itemFilter || ' > *'}`
 
-        return `${attrSelector} ${inner}`
-    }
+		return `${attrSelector} ${inner}`
+	}
 
-    if (selector) {
-        return `${attrSelector} ${selector}`
-    }
+	if (selector) {
+		return `${attrSelector} ${selector}`
+	}
 
-    return `${attrSelector} > :first-child`
+	return `${attrSelector} > :first-child`
 }
 
 /** Emits `cursor: pointer` for click interaction triggers (`'activate' || 'click'`), one rule per unique source selector. */
 export const getClickTriggerCss = (config: InteractConfig): string => {
-    const selectors = [
-        ...new Set(
-            config.interactions
-                .filter(({ trigger }) => trigger === 'activate' || trigger === 'click')
-                .map(getInteractionSourceSelector)
-        ),
-    ]
-
-    if (!selectors.length) {
-        return ''
-    }
-
-    return selectors.map(selector => `${selector} {\ncursor: pointer;\n}`).join('\n')
+	const selectors = [
+		...new Set(
+			config.interactions
+				.filter(({ trigger }) => trigger === 'activate' || trigger === 'click')
+				.map(getInteractionSourceSelector)
+		),
+	]
+
+	if (!selectors.length) {
+		return ''
+	}
+
+	return selectors.map((selector) => `${selector} {\ncursor: pointer;\n}`).join('\n')
 }

package/src/implementations/v2/configCss.ts

@@ -1,19 +1,18 @@
 import { generate, Interact } from '@wix/interact-v2'
-import type { InteractConfig } from '@wix/interact'
-import type { InteractConfig as InteractV2Config } from '@wix/interact-v2'
-import * as motionPresets from '@wix/wix-motion-presets'
+import type { InteractConfig } from '@wix/interact-v2'
 import { getClickTriggerCss } from './clickTriggerCss'
+import { motionPresets } from './motionPresets'
 
 type PresetRegistry = Parameters<typeof Interact.registerEffects>[0]
 
 // Interact's registry is process-global. This module is only pulled into the server bundle
-// (`process.env.browser` DCE), so the namespace is registered once per Node process.
+// (`process.env.browser` DCE), so both namespaces are registered once per Node process.
 Interact.registerEffects(motionPresets as unknown as PresetRegistry)
 
 /** Emit animation FOUC CSS and click-trigger cursor rules. */
 export const getV2ConfigCss = (config: InteractConfig): string => {
-    const animationCss = generate(config as InteractV2Config, true).trim()
-    const clickCss = getClickTriggerCss(config).trim()
+	const animationCss = generate(config, true).trim()
+	const clickCss = getClickTriggerCss(config).trim()
 
-    return [animationCss, clickCss].filter(Boolean).join('\n')
+	return [animationCss, clickCss].filter(Boolean).join('\n')
 }

package/src/implementations/v2/configStyleHeadContent.ts

@@ -1,12 +1,15 @@
 /**
- * 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: string): string => {
-    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: string): string => `<style>${sanitizeCssForStyleElement(css)}</style>`