@cntrl-site/sdk-nextjs 1.0.18 → 1.0.19-alpha.0

package/lib/components/items/VimeoEmbed.js

@@ -13,8 +13,9 @@ const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useStatesClassNames_1 = require("../useStatesClassNames");
+const getStatesCSS_1 = require("../../utils/getStatesCSS");
 const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -27,7 +28,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams, item.state];
+    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video-wrapper');
+    const videoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video');
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
@@ -61,7 +64,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         vimeoPlayer.play();
         setIsCoverVisible(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id} ${wrapperClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -78,37 +81,35 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video ${videoClassNames}`, src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
       }
-      .embedVideo {
+      .embed-video {
         width: 100%;
         height: 100%;
         z-index: 1;
         border: none;
         overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+                    const videoStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video', ['radius'], stateParams);
                     return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
+            transition: all 0.2s ease;
           }
-          .embed-video-wrapper-${item.id}:hover {
-            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
-          }
-          .embed-video-wrapper-${item.id} .embedVideo {
+          .embed-video-wrapper-${item.id} .embed-video {
             border-radius: ${layoutParams.radius * 100}vw;
-            transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
-          }
-          .embed-video-wrapper-${item.id}:hover .embedVideo {
-            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
+            transition: all 0.2s ease;
           }
+          ${wrapperStatesCSS}
+          ${videoStatesCSS}
         `);
                 })}
     ` })] }));

package/lib/components/items/YoutubeEmbed.js

@@ -12,10 +12,11 @@ const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useStatesClassNames_1 = require("../useStatesClassNames");
+const getStatesCSS_1 = require("../../utils/getStatesCSS");
 const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -28,7 +29,9 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const [player, setPlayer] = (0, react_1.useState)(undefined);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams, item.state];
+    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-youtube-video-wrapper');
+    const embedClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed');
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
@@ -80,7 +83,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             setIsCoverVisible(true);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -98,7 +101,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id} ${embedClassNames}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
@@ -114,24 +117,22 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
           z-index: 1;
           border: none;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-youtube-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+                    const embedStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed', ['radius'], stateParams);
                     return (`
             .embed-youtube-video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
+              transition: all 0.2s ease;
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
-              transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
-              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
+              transition: all 0.2s ease;
             }
+            ${wrapperStatesCSS}
+            ${embedStatesCSS}
           `);
                 })}
       ` })] }));

package/lib/components/useStatesClassNames.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatesClassNames = void 0;
+const react_1 = require("react");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+function useStatesClassNames(itemId, itemStates, uniquePrefix) {
+    const { interactionsStatesMap } = (0, react_1.useContext)(InteractionsContext_1.InteractionsContext);
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const activeStates = Object.values(interactionsStatesMap);
+    const statesForLayout = layoutId ? itemStates[layoutId] : {};
+    const stateClassNames = Object.keys(statesForLayout !== null && statesForLayout !== void 0 ? statesForLayout : {})
+        .filter((stateId) => activeStates.includes(stateId))
+        .map((stateId) => `${uniquePrefix}-${itemId}-state-${stateId}`)
+        .join(' ');
+    return stateClassNames;
+}
+exports.useStatesClassNames = useStatesClassNames;

package/lib/provider/InteractionsContext.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionsProvider = exports.InteractionsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const defaultState = {
+    interactionsStatesMap: {},
+    interactions: [],
+    transitionTo: () => { },
+    getItemTrigger: () => null
+};
+exports.InteractionsContext = (0, react_1.createContext)(defaultState);
+const InteractionsProvider = ({ interactions, children }) => {
+    const defaultStatesMap = interactions.reduce((map, { id, startStateId }) => {
+        map[id] = startStateId;
+        return map;
+    }, {});
+    const [interactionsStatesMap, setInteractionsStatesMap] = (0, react_1.useState)(defaultStatesMap);
+    const transitionTo = (interactionId, stateId) => {
+        setInteractionsStatesMap((map) => (Object.assign(Object.assign({}, map), { [interactionId]: stateId })));
+    };
+    const getItemTrigger = (itemId, triggerType) => {
+        for (const interaction of interactions) {
+            const activeStateId = interactionsStatesMap[interaction.id];
+            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId &&
+                trigger.from === activeStateId &&
+                trigger.type === triggerType);
+            if (matchingTrigger) {
+                return {
+                    id: interaction.id,
+                    from: matchingTrigger.from,
+                    to: matchingTrigger.to,
+                };
+            }
+        }
+        return null;
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: {
+            transitionTo,
+            interactionsStatesMap,
+            interactions,
+            getItemTrigger
+        }, children: children }));
+};
+exports.InteractionsProvider = InteractionsProvider;

package/lib/utils/{HoverStyles/HoverStyles.js → StateStyles/StateStyles.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHoverStyles = exports.getTransitions = void 0;
+exports.getStateStyles = exports.getTransitions = void 0;
 const color_1 = require("@cntrl-site/color");
 const getItemTopStyle_1 = require("../getItemTopStyle");
-const hoverTransformationMap = {
+const stateTransformationMap = {
     'width': (width) => `width: ${width * 100}vw !important;`,
     'height': (height) => `height: ${height * 100}vw !important;`,
     'top': (top, anchorSide) => `top: ${(0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide)} !important;`,
@@ -39,15 +39,16 @@ const CSSPropertyNameMap = {
     'wordSpacing': 'word-spacing',
     'color': 'color'
 };
-function getTransitions(values, hover) {
-    if (!hover)
+function getTransitions(values, state) {
+    if (!state)
         return 'unset';
     const transitionValues = values.reduce((acc, valueName) => {
-        if (valueName in hover && hover[valueName] !== undefined) {
-            const hoverProperties = hover[valueName];
+        if (valueName in state && state[valueName] !== undefined) {
+            // @ts-ignore TODO
+            const stateProperties = state[valueName];
             return [
                 ...acc,
-                `${CSSPropertyNameMap[valueName]} ${hoverProperties.duration}ms ${hoverProperties.timing} ${hoverProperties.delay}ms`
+                `${CSSPropertyNameMap[valueName]} ${stateProperties.duration}ms ${stateProperties.timing} ${stateProperties.delay}ms`
             ];
         }
         return acc;
@@ -57,21 +58,22 @@ function getTransitions(values, hover) {
     return transitionValues.join(', ');
 }
 exports.getTransitions = getTransitions;
-function getHoverStyles(values, hover, anchorSide) {
-    if (!hover)
+function getStateStyles(values, state, anchorSide) {
+    if (!state)
         return '';
-    const hoverValues = values.reduce((acc, valueName) => {
-        if (valueName in hover && hover[valueName] !== undefined) {
-            const hoverProperties = hover[valueName];
+    const stateValues = values.reduce((acc, valueName) => {
+        if (valueName in state && state[valueName] !== undefined) {
+            // @ts-ignore TODO
+            const stateProperties = state[valueName];
             return [
                 ...acc,
-                hoverTransformationMap[valueName](hoverProperties.value, anchorSide)
+                stateTransformationMap[valueName](stateProperties.value, anchorSide)
             ];
         }
         return acc;
     }, []);
-    if (!hoverValues.length)
+    if (!stateValues.length)
         return '';
-    return hoverValues.join('\n');
+    return stateValues.join('\n');
 }
-exports.getHoverStyles = getHoverStyles;
+exports.getStateStyles = getStateStyles;

package/lib/utils/getStatesCSS.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStatesCSS = void 0;
+const StateStyles_1 = require("./StateStyles/StateStyles");
+function getStatesCSS(itemId, classNamePrefix, keys, states, anchorSide) {
+    return states
+        ? Object.entries(states).map(([stateId, params]) => {
+            return `
+      .${classNamePrefix}-${itemId}-state-${stateId} {
+        ${(0, StateStyles_1.getStateStyles)(keys, params, anchorSide)};
+      }
+    `;
+        }).join('\n')
+        : '';
+}
+exports.getStatesCSS = getStatesCSS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.18",
+  "version": "1.0.19-alpha.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.12.3",
+    "@cntrl-site/sdk": "^1.12.4-alpha.7",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
@@ -38,12 +38,15 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.2.5",
+    "@types/jest": "^29.5.12",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
-    "jest": "^29.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.0.3",
     "typescript": "^5.2.2"
   },

package/src/components/Article.tsx

@@ -1,11 +1,12 @@
 import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle } from '@cntrl-site/sdk';
+import { Article as TArticle, ArticleItemType, ItemState, ItemStateParams } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
 import { ArticleWrapper } from './ArticleWrapper';
+import { InteractionsProvider } from '../provider/InteractionsContext';
 
 interface Props {
   article: TArticle;
@@ -27,35 +28,37 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <ArticleWrapper>
-        <div className="article" ref={articleRef}>
-          {article.sections.map((section, i) => {
-            const data = section.name ? sectionData[section.name] : {};
-            return (
-              <Section
-                section={section}
-                key={section.id}
-                data={data}
-              >
-                {article.sections[i].items.map(item => (
-                  <Item
-                    item={item}
-                    key={item.id}
-                    sectionId={section.id}
-                    articleHeight={articleHeight}
-                  />
-                ))}
-              </Section>
-            );
-          })}
-        </div>
-      </ArticleWrapper>
-      <JSXStyle id={id}>{`
+      <InteractionsProvider interactions={article.interactions}>
+        <ArticleWrapper>
+          <div className="article" ref={articleRef}>
+            {article.sections.map((section, i) => {
+              const data = section.name ? sectionData[section.name] : {};
+              return (
+                <Section
+                  section={section}
+                  key={section.id}
+                  data={data}
+                >
+                  {article.sections[i].items.map(item => (
+                    <Item
+                      item={item}
+                      key={item.id}
+                      sectionId={section.id}
+                      articleHeight={articleHeight}
+                    />
+                  ))}
+                </Section>
+              );
+            })}
+          </div>
+        </ArticleWrapper>
+        <JSXStyle id={id}>{`
        .article {
-            position: relative;
-            overflow: clip;
-          }
+         position: relative;
+         overflow: clip;
+       }
       `}</JSXStyle>
+      </InteractionsProvider>
     </ArticleRectContext.Provider>
   );
 };

package/src/components/ArticleWrapper.tsx

@@ -1,5 +1,4 @@
-import React, { CSSProperties, FC, PropsWithChildren, useEffect, useId, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
+import React, { CSSProperties, FC, PropsWithChildren } from 'react';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { LayoutContext } from '../provider/LayoutContext';
 

package/src/components/Item.tsx

@@ -21,7 +21,6 @@ import { useItemDimensions } from './useItemDimensions';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
-import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
@@ -32,6 +31,9 @@ import { GroupItem } from './items/GroupItem';
 import { CodeEmbedItem } from './items/CodeEmbedItem';
 import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
 import { KeyframesContext } from '../provider/KeyframesContext';
+import { InteractionsContext } from '../provider/InteractionsContext';
+import { getStatesCSS } from '../utils/getStatesCSS';
+import { useStatesClassNames } from './useStatesClassNames';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -93,14 +95,14 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const dimensions = useItemDimensions(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state];
   const isInitialRef = useRef(true);
+  const { transitionTo, getItemTrigger } = useContext(InteractionsContext);
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
-
   const sizing = layout && isItemType(item, ArticleItemType.RichText)
     ? item.layoutParams[layout].sizing
     : undefined;
@@ -130,9 +132,11 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
+  const innerStatesClassNames = useStatesClassNames(item.id, item.state, 'item-inner');
+  const wrapperStatesClassNames = useStatesClassNames(item.id, item.state, 'item-wrapper');
   return (
     <div
-      className={`item-wrapper-${item.id}`}
+      className={`item-wrapper-${item.id} ${wrapperStatesClassNames}`}
       ref={itemWrapperRef}
       style={{
         ...(position ? { top: position.top } : {}),
@@ -152,7 +156,22 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
       >
         <RichTextWrapper isRichText={isRichText}>
           <div
-            className={`item-${item.id}-inner`}
+            className={`item-${item.id}-inner ${innerStatesClassNames}`}
+            onClick={() => {
+              const trigger = getItemTrigger(item.id, 'click');
+              if (!trigger) return;
+              transitionTo(trigger.id, trigger.to);
+            }}
+            onMouseEnter={() => {
+              const trigger = getItemTrigger(item.id, 'hover-in');
+              if (!trigger) return;
+              transitionTo(trigger.id, trigger.to);
+            }}
+            onMouseLeave={() => {
+              const trigger = getItemTrigger(item.id, 'hover-out');
+              if (!trigger) return;
+              transitionTo(trigger.id, trigger.to);
+            }}
             style={{
               ...(dimensions ? {
                 width: `${sizingAxis.x === 'manual'
@@ -169,10 +188,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, states, sticky, sectionHeight, layoutParams], exemplary) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           const scaleAnchor = area.scaleAnchor as AreaAnchor;
+          const statesInnerCSS = getStatesCSS(item.id, 'item-inner', ['width', 'height', 'scale'], states);
+          const statesWrapperCSS = getStatesCSS(item.id, 'item-wrapper', ['top', 'left'], states, area.anchorSide);
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -183,7 +204,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               height: fit-content;
             }
             .item-${item.id}-inner {
-              transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
               pointer-events: auto;
               width: ${sizingAxis.x === 'manual'
                 ? `${area.width * 100}vw`
@@ -191,6 +211,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
+              transition: all 0.2s ease;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
@@ -200,14 +221,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              transition: ${getTransitions(['left', 'top'], hoverParams)};
-            }
-            .item-${item.id}-inner:hover {
-              ${getHoverStyles(['width', 'height', 'scale'], hoverParams)};
-            }
-            .item-wrapper-${item.id}:hover {
-              ${getHoverStyles(['left', 'top'], hoverParams, area.anchorSide)};
+              transition: all 0.2s ease;
             }
+            ${statesWrapperCSS}
+            ${statesInnerCSS}
           `);
       })}
       `}</JSXStyle>
@@ -223,11 +240,11 @@ function parseSizing(sizing: string = 'manual'): Axis {
   } as Axis;
 }
 
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}
+
 interface Axis {
   x: 'manual' | 'auto';
   y: 'manual' | 'auto';
 }
-
-export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
-  return item.type === itemType;
-}

package/src/components/items/CodeEmbedItem.tsx

@@ -1,13 +1,14 @@
-import { ArticleItemType, getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
+import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
 import { FC, useEffect, useId, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';
+import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesClassNames } from '../useStatesClassNames';
 
 const stylesMap = {
   [AreaAnchor.TopLeft]: {},
@@ -30,7 +31,8 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const statesClassNames = useStatesClassNames(item.id, item.state, 'embed-wrapper');
 
   useEffect(() => {
     if (!ref) return;
@@ -56,7 +58,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`embed-wrapper-${item.id}`}
+        className={`embed-wrapper-${item.id} ${statesClassNames}`}
         style={{
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
@@ -93,21 +95,20 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
         z-index: 1;
         border: none;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams], exemplary) => {
+        const statesCSS = getStatesCSS(item.id, 'embed-wrapper', ['angle', 'blur', 'opacity'], stateParams);
         return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: ${getTransitions<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
+            transition: all 0.2s ease;
           }
           .embed-${item.id} {
             width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
             height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
           }
-          .embed-wrapper-${item.id}:hover {
-            ${getHoverStyles<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
-          }
+          ${statesCSS}
         `);
       })}
     `}</JSXStyle>