@wix/site-service-interactions 1.0.34 → 1.0.36

package/src/implementations/v2/BundledInteractions.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react'
+import type { FunctionComponent } from 'react'
+import type { InteractConfig } from '../../definition'
+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: InteractConfig[], isReducedMotion: boolean, css: string): FunctionComponent =>
+	() => {
+		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 <style>{css}</style>
+	}

package/src/implementations/v2/{ClickTriggerStyleSheet.tsx → ConfigStyleSheet.tsx}

@@ -37,11 +37,12 @@ export const adoptMissingStyleSheet = (
 }
 
 /**
- * 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: FunctionComponent<{ rules: Array<string> }> = ({ rules }) => {
+export const ConfigStyleSheet: FunctionComponent<{ rules: Array<string> }> = ({ rules }) => {
 	useEffect(() => adoptMissingStyleSheet(rules), [rules])
 
 	return null

package/src/implementations/v2/InteractionsScriptElement.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { FunctionComponent } from 'react'
 import type { InteractConfig } from '@wix/interact'
 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']
@@ -19,7 +19,7 @@ export const createV2InteractionsScriptElement =
 		config: InteractConfig | InteractConfig[],
 		isReducedMotion: boolean,
 		pageId: string,
-		clickTriggerCss: Array<string> = []
+		configCss: Array<string> = []
 	): FunctionComponent =>
 	() => {
 		// This ID is also interpolated into raw module-script text. Percent-encoding removes
@@ -38,7 +38,7 @@ export const createV2InteractionsScriptElement =
 			<>
 				<script type="application/json" id={configId} {...configProps} />
 				<script type="module" id={`interactions-loader-${safePageId}`} ref={reviveScriptElement} {...loaderProps} />
-				{clickTriggerCss.length > 0 && <ClickTriggerStyleSheet rules={clickTriggerCss} />}
+				{configCss.length > 0 && <ConfigStyleSheet rules={configCss} />}
 			</>
 		)
 	}

package/src/implementations/v2/backgroundScrollCss.ts

@@ -0,0 +1,208 @@
+import type { Condition, Effect, InteractConfig } from '@wix/interact'
+import { LEGACY_PREFIX } from './motionPresets'
+
+/**
+ * The legacy background scroll presets, which the reactions config names with the `LEGACY_` prefix, animate the
+ * parts of a background, `BG_MEDIA` and `BG_IMG`, and expect them sized for the effect first: a media layer tall
+ * enough to travel, a sticky image that imitates a fixed background. Thunderbolt renders that sizing from the page
+ * data (thunderbolt-catharsis-extensions motionCss, viewer branch); nothing in the interact config says it, so a
+ * host without Thunderbolt plays these presets on unsized parts. These are the same rules, computed from the config.
+ */
+
+type Style = Record<string, string>
+type NamedEffect = { type: string; [param: string]: unknown }
+
+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: 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: 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: 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: number) => (degrees * Math.PI) / 180
+const numberParam = (namedEffect: NamedEffect, name: string, fallback: number) =>
+	typeof namedEffect[name] === 'number' && namedEffect[name] ? (namedEffect[name] as number) : fallback
+
+const isFixedStyle = (namedEffect: NamedEffect) =>
+	(namedEffect.type === 'BgZoom' && namedEffect.direction === 'in') ||
+	['BgReveal', 'BgParallax', 'BgFake3D'].includes(namedEffect.type)
+
+const MEDIA_STYLES: Record<string, (namedEffect: NamedEffect) => Style> = {
+	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: Record<string, (namedEffect: NamedEffect) => Style> = {
+	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: string): string => value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+
+const rule = (selector: string, style: Style): string =>
+	`${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: string, selectorConditions: string) => {
+	const compId = escapeCssAttr(key.slice(key.lastIndexOf('/') + 1))
+	const root = `:is([id="${compId}"], [id^="${compId}__"])${selectorConditions}`
+	const part = (name: string) =>
+		`: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: NamedEffect, key: string, selectorConditions: string): string[] => {
+	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: InteractConfig, conditionIds: readonly string[]) => {
+	const conditions = [...new Set(conditionIds)]
+		.map((id) => interact.conditions?.[id])
+		.filter((condition): condition is Condition => Boolean(condition?.predicate))
+	const predicatesOf = (type: Condition['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]: [string, Set<string>]): string =>
+	media ? `@media ${media} {\n${[...rules].join('\n')}\n}` : [...rules].join('\n')
+
+export const getBackgroundScrollCss = (interact: InteractConfig): string => {
+	const rulesByMedia = new Map<string, Set<string>>()
+
+	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,
+			} as Effect
+			const { namedEffect } = effect as { namedEffect?: NamedEffect }
+			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<string>()
+			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}`
+}

package/src/implementations/v2/configCss.ts

@@ -1,10 +1,16 @@
 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 type { InteractConfig } from '@wix/interact'
 import { getClickTriggerCss } from './clickTriggerCss'
 import { LEGACY_PREFIX } from './motionPresets'
 
+const { generate } = interactWeb
+export const { Interact } = interactWeb
+
 type PresetRegistry = Parameters<typeof Interact.registerEffects>[0]
 
 type EffectModule = {
@@ -32,8 +38,8 @@ export const motionPresets: Record<string, EffectModule> = {
 	...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 as unknown as PresetRegistry)
 
 /** Emit animation FOUC CSS and click-trigger cursor rules. */

package/cjs/build/implementations/v2/ClickTriggerStyleSheet.d.ts

@@ -1,16 +0,0 @@
-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 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.
- */
-export declare const ClickTriggerStyleSheet: FunctionComponent<{
-    rules: Array<string>;
-}>;
-export {};

package/cjs/build/implementations/v2/ClickTriggerStyleSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClickTriggerStyleSheet.js","sourceRoot":"","sources":["../../../../src/implementations/v2/ClickTriggerStyleSheet.tsx"],"names":[],"mappings":";;;AAAA,iCAAiC;AAEjC,qEAA8D;AAI9D,MAAM,oBAAoB,GAAG,CAAC,QAA4B,EAAU,EAAE,CACrE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,4CAAmB,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;AACI,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;AArBY,QAAA,sBAAsB,GAAtB,sBAAsB,CAqBlC;AAED;;;;GAIG;AACI,MAAM,sBAAsB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,IAAA,QAAA,sBAAsB,EAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA;AAJY,QAAA,sBAAsB,GAAtB,sBAAsB,CAIlC"}

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

@@ -1,16 +0,0 @@
-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 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.
- */
-export declare const ClickTriggerStyleSheet: FunctionComponent<{
-    rules: Array<string>;
-}>;
-export {};

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

@@ -1 +0,0 @@
-{"version":3,"file":"ClickTriggerStyleSheet.js","sourceRoot":"","sources":["../../../src/implementations/v2/ClickTriggerStyleSheet.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;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAgD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,SAAS,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEvD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA"}