@cntrl-site/sdk-nextjs 1.1.5 → 1.2.1

package/src/components/items/{CodeEmbedItem.tsx → CodeEmbedItem/CodeEmbedItem.tsx}

@@ -1,9 +1,9 @@
 import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
 import { FC, useEffect, useId, useState } from 'react';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from "../../common/useRegisterResize";
+import { useRegisterResize } from "../../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';

package/src/components/items/{useCodeEmbedItem.ts → CodeEmbedItem/useCodeEmbedItem.ts}

@@ -1,6 +1,6 @@
 import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../useLayoutContext';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
 
 export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
   const layoutId = useLayoutContext();

package/src/components/items/CompoundItem/CompoundChild.tsx

@@ -0,0 +1,130 @@
+import React, {
+  FC,
+  useEffect,
+  useId,
+  useRef,
+} from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useExemplary } from '../../../common/useExemplary';
+import { useItemScale } from '../useItemScale';
+import { useItemInteractionCtrl } from '../../../interactions/useItemInteractionCtrl';
+import { ArticleItemType, getLayoutStyles, ItemAny, AreaAnchor } from '@cntrl-site/sdk';
+import JSXStyle from 'styled-jsx/style';
+import { ScaleAnchorMap } from '../../../utils/ScaleAnchorMap';
+import { isItemType } from '../../../utils/isItemType';
+import { RichTextWrapper } from '../RichTextWrapper';
+import { itemsMap } from '../itemsMap';
+import {
+  getCompoundHeight,
+  getCompoundLeft,
+  getCompoundTop, getCompoundTransform,
+  getCompoundWidth
+} from '../../../utils/getCompoundBondaryStyles';
+import { useItemTriggers } from '../useItemTriggers';
+import { parseSizing, useSizing } from '../useSizing';
+import { useItemPointerEvents } from '../useItemPointerEvents';
+import { useItemArea } from '../useItemArea';
+
+interface ChildItemProps {
+  item: ItemAny;
+  sectionId: string;
+  isParentVisible?: boolean;
+}
+
+const noop = () => null;
+
+export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVisible = true }) => {
+  const id = useId();
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = useExemplary();
+  const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(isParentVisible);
+  const itemScale = useItemScale(item, sectionId);
+  const interactionCtrl = useItemInteractionCtrl(item.id);
+  const triggers = useItemTriggers(interactionCtrl);
+  const stateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height', 'scale']);
+  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
+  const { width, height, top, left } = useItemArea(item, sectionId, {
+    top: stateProps?.styles?.top as number,
+    left: stateProps?.styles?.left as number,
+    width: stateProps?.styles?.width as number,
+    height: stateProps?.styles?.height as number
+  });
+  const isInitialRef = useRef(true);
+  const sizingAxis = useSizing(item);
+  const ItemComponent = itemsMap[item.type] || noop;
+
+  useEffect(() => {
+    isInitialRef.current = false;
+  }, []);
+
+  const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
+  const isRichText = isItemType(item, ArticleItemType.RichText);
+  const scale = stateProps?.styles?.scale ?? itemScale;
+  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
+  if (!item.compoundSettings) return null;
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
+  if (item.layoutParams) {
+    layoutValues.push(item.layoutParams);
+  }
+  return (
+    <div
+      className={`item-${item.id}`}
+      onTransitionEnd={(e) => {
+        e.stopPropagation();
+        interactionCtrl?.handleTransitionEnd?.(e.propertyName);
+      }}
+      style={{
+        ...(top && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
+        ...(left && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
+        ...(width && compoundSettings
+          ? { width: `${sizingAxis.x === 'manual' 
+              ? getCompoundWidth(compoundSettings, width, isRichText, exemplary) 
+              : 'max-content'}` }
+          : {}),
+        ...(height && compoundSettings
+          ? { height: `${sizingAxis.y === 'manual' 
+              ? getCompoundHeight(compoundSettings, height) 
+              : 'unset'}` }
+          : {}),
+        ...(scale && compoundSettings ? { transform: `scale(${scale}) ${getCompoundTransform(compoundSettings)}` } : {}),
+        transition: stateProps?.transition ?? 'none',
+        cursor: hasClickTriggers ? 'pointer' : 'unset',
+        pointerEvents: allowPointerEvents ? 'auto' : 'none'
+      }}
+      {...triggers}
+    >
+      <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
+        <ItemComponent
+          item={item}
+          sectionId={sectionId}
+          interactionCtrl={interactionCtrl}
+          onVisibilityChange={handleVisibilityChange}
+        />
+      </RichTextWrapper>
+      <JSXStyle id={id}>{`
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
+          const sizingAxis = parseSizing(layoutParams.sizing);
+          const scaleAnchor = area.scaleAnchor as AreaAnchor;
+          return (`
+            .item-${item.id} {
+              position: absolute;
+              top: ${getCompoundTop(compoundSettings, area.top)};
+              left: ${getCompoundLeft(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
+              width: ${sizingAxis.x === 'manual'
+                ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
+                : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale}) ${getCompoundTransform(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
+          `);
+      })}
+      `}</JSXStyle>
+    </div>
+  );
+};

package/src/components/items/CompoundItem/CompoundItem.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useEffect, useId, useState } from 'react';
+import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { LinkWrapper } from '../LinkWrapper';
+import { ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+import { CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
+import { CompoundChild } from './CompoundChild';
+import { useCompoundItem } from './useCompoundItem';
+
+export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const id = useId();
+  const { items } = item;
+  const itemAngle = useItemAngle(item, sectionId);
+  const { layouts } = useCntrlContext();
+  const { opacity: itemOpacity } = useCompoundItem(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const isInteractive = opacity !== 0 && opacity !== undefined;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <>
+        <div
+          className={`compound-${item.id}`}
+          ref={setRef}
+          style={{
+            ...(opacity !== undefined ? { opacity } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            transition: stateParams?.transition ?? 'none'
+          }}
+        >
+          {items && items.map(item => (
+            <CompoundChild
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              isParentVisible={isInteractive}
+            />
+          ))}
+        </div>
+        <JSXStyle id={id}>{`
+        .compound-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
+          `);
+        })}
+      `}</JSXStyle>
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/CompoundItem/useCompoundItem.ts

@@ -0,0 +1,21 @@
+import { CompoundItem, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+
+export function useCompoundItem(item: CompoundItem, sectionId: string) {
+  const layoutId = useLayoutContext();
+  const opacity = useKeyframeValue(
+    item,
+    KeyframeType.Opacity,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return { opacity };
+}

package/src/components/items/{CustomItem.tsx → CustomItem/CustomItem.tsx}

@@ -1,9 +1,9 @@
 import { getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
 import { FC, useState } from 'react';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from '../../common/useRegisterResize';
+import { useRegisterResize } from '../../../common/useRegisterResize';
 import { useItemAngle } from '../useItemAngle';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {

package/src/components/items/{VimeoEmbed.tsx → EmbedVideoItem/VimeoEmbed.tsx}

@@ -1,16 +1,16 @@
 import type { VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
+import { getLayoutStyles } from '@cntrl-site/sdk';
 import type { FC } from 'react';
 import type { ItemProps } from '../Item';
-import { getLayoutStyles } from '@cntrl-site/sdk';
 import Player from '@vimeo/player';
 import { useEffect, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from '../../common/useRegisterResize';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
-import { LinkWrapper } from '../LinkWrapper';
 import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
+import { LinkWrapper } from '../LinkWrapper';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();

package/src/components/items/{YoutubeEmbed.tsx → EmbedVideoItem/YoutubeEmbed.tsx}

@@ -2,15 +2,15 @@ import { FC, useEffect, useId, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
-import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
+import { getYoutubeId } from '../../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 import { getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';
-import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useYouTubeIframeApi } from '../../../utils/Youtube/useYouTubeIframeApi';
+import { YTPlayer } from '../../../utils/Youtube/YoutubeIframeApi';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();

package/src/components/items/{useEmbedVideoItem.ts → EmbedVideoItem/useEmbedVideoItem.ts}

@@ -1,6 +1,6 @@
 import { KeyframeType, VimeoEmbedItem, YoutubeEmbedItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
 
 export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, sectionId: string) => {
   const layoutId = useLayoutContext();

package/src/components/items/{ImageItem.tsx → FileItem/ImageItem.tsx}

@@ -6,12 +6,12 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { useImageFx } from '../../utils/effects/useImageFx';
-import { useElementRect } from '../../utils/useElementRect';
-import { useLayoutContext } from '../useLayoutContext';
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { useImageFx } from '../../../utils/effects/useImageFx';
+import { useElementRect } from '../../../utils/useElementRect';
+import { useLayoutContext } from '../../useLayoutContext';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;

package/src/components/items/{VideoItem.tsx → FileItem/VideoItem.tsx}

@@ -6,11 +6,11 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { useLayoutContext } from '../useLayoutContext';
-import { ScrollPlaybackVideo } from '../ScrollPlaybackVideo';
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { useLayoutContext } from '../../useLayoutContext';
+import { ScrollPlaybackVideo } from '../../ScrollPlaybackVideo';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();

package/src/components/items/{useFileItem.ts → FileItem/useFileItem.ts}

@@ -1,6 +1,6 @@
 import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
 
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {

package/src/components/items/{GroupItem.tsx → GroupItem/GroupItem.tsx}

@@ -3,13 +3,13 @@ import { Item, ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
 import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../LinkWrapper';
-import { useRegisterResize } from '../../common/useRegisterResize';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
-export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight, interactionCtrl, onVisibilityChange }) => {
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { items } = item;
   const itemAngle = useItemAngle(item, sectionId);
@@ -42,7 +42,6 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
               item={item}
               key={item.id}
               sectionId={sectionId}
-              articleHeight={articleHeight}
               isParentVisible={isInteractive}
               isInGroup
             />

package/src/components/items/{useGroupItem.ts → GroupItem/useGroupItem.ts}

@@ -1,6 +1,6 @@
-import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
 import { GroupItem, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../useLayoutContext';
+import { useLayoutContext } from '../../useLayoutContext';
 
 export function useGroupItem(item: GroupItem, sectionId: string) {
   const layoutId = useLayoutContext();

package/src/components/{Item.tsx → items/Item.tsx}

@@ -1,10 +1,6 @@
-import {
-  ComponentType,
+import React, {
   FC,
-  PropsWithChildren,
-  useCallback,
   useContext,
-  useEffect,
   useId,
   useMemo,
   useRef,
@@ -15,39 +11,34 @@ import {
   AnchorSide,
   ArticleItemType,
   getLayoutStyles,
-  Item as TItem,
   ItemAny,
   PositionType
 } from '@cntrl-site/sdk';
-import { RectangleItem } from './items/RectangleItem';
-import { ImageItem } from './items/ImageItem';
-import { VideoItem } from './items/VideoItem';
-import { RichTextItem } from './items/RichTextItem';
-import { VimeoEmbedItem } from './items/VimeoEmbed';
-import { YoutubeEmbedItem } from './items/YoutubeEmbed';
-import { CustomItem } from './items/CustomItem';
-import { useCntrlContext } from '../provider/useCntrlContext';
-import { useItemPosition } from './useItemPosition';
-import { useItemDimensions } from './useItemDimensions';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useItemScale } from './useItemScale';
-import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
-import { useSectionHeightData } from './useSectionHeightMap';
-import { getItemTopStyle } from '../utils/getItemTopStyle';
-import { useStickyItemTop } from './items/useStickyItemTop';
-import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
-import { useLayoutContext } from './useLayoutContext';
-import { ArticleRectContext } from "../provider/ArticleRectContext";
-import { useExemplary } from "../common/useExemplary";
-import { GroupItem } from './items/GroupItem';
-import { CodeEmbedItem } from './items/CodeEmbedItem';
+import { ScaleAnchorMap } from '../../utils/ScaleAnchorMap';
+import { useSectionHeightData } from '../Section/useSectionHeightMap';
+import { getItemTopStyle } from '../../utils/getItemTopStyle';
+import { useStickyItemTop } from './useStickyItemTop';
+import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
+import { useLayoutContext } from '../useLayoutContext';
+import { ArticleRectContext } from "../../provider/ArticleRectContext";
+import { useExemplary } from "../../common/useExemplary";
 import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
-import { KeyframesContext } from '../provider/KeyframesContext';
-import { useItemInteractionCtrl } from '../interactions/useItemInteractionCtrl';
+import { KeyframesContext } from '../../provider/KeyframesContext';
+import { useItemInteractionCtrl } from '../../interactions/useItemInteractionCtrl';
+import { isItemType } from '../../utils/isItemType';
+import { RichTextWrapper } from './RichTextWrapper';
+import { itemsMap } from './itemsMap';
+import { useItemTriggers } from './useItemTriggers';
+import { parseSizing, useSizing } from './useSizing';
+import { useItemPointerEvents } from './useItemPointerEvents';
+import { useItemArea } from './useItemArea';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
   sectionId: string;
-  articleHeight: number;
+  articleHeight?: number;
   onResize?: (height: number) => void;
   interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
   onVisibilityChange: (isVisible: boolean) => void;
@@ -56,41 +47,16 @@ export interface ItemProps<I extends ItemAny> {
 export interface ItemWrapperProps {
   item: ItemAny;
   sectionId: string;
-  articleHeight: number;
+  articleHeight?: number;
   isInGroup?: boolean;
   isParentVisible?: boolean;
 }
 
-const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
-  [ArticleItemType.Rectangle]: RectangleItem,
-  [ArticleItemType.Image]: ImageItem,
-  [ArticleItemType.Video]: VideoItem,
-  [ArticleItemType.RichText]: RichTextItem,
-  [ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
-  [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
-  [ArticleItemType.Custom]: CustomItem,
-  [ArticleItemType.Group]: GroupItem,
-  [ArticleItemType.CodeEmbed]: CodeEmbedItem
-};
-
-interface RTWrapperProps {
-  isRichText: boolean;
-}
-
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 `;
 
-const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children }) => {
-  if (!isRichText) return <>{children}</>;
-  return (
-    <div style={{ transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }}>
-      {children}
-    </div>
-  );
-};
-
 const noop = () => null;
 
 export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
@@ -103,38 +69,36 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();
-  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
+  const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(isParentVisible);
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const itemScale = useItemScale(item, sectionId);
   const interactionCtrl = useItemInteractionCtrl(item.id);
+  const triggers = useItemTriggers(interactionCtrl);
   const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
-  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
-  const position = useItemPosition(item, sectionId, {
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale', 'top', 'left']);
+  const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,
     left: wrapperStateProps?.styles?.left as number,
+    width: innerStateProps?.styles?.width as number,
+    height: innerStateProps?.styles?.height as number
   });
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
-  const dimensions = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden];
-  const isInitialRef = useRef(true);
   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;
-  const sizingAxis = parseSizing(sizing);
+  const sizingAxis = useSizing(item);
   const ItemComponent = itemsMap[item.type] || noop;
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
   const handleItemResize = (height: number) => {
     if (!layout) return;
     const sticky = item.sticky[layout];
-    if (!sticky || stickyTop === undefined) {
+    if (!sticky || stickyTop === undefined || !articleHeight) {
       setWrapperHeight(undefined);
       return;
     }
@@ -148,18 +112,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     setWrapperHeight(wrapperHeight);
   };
 
-  const handleVisibilityChange = useCallback((isVisible: boolean) => {
-    if (!isParentVisible) return;
-    setAllowPointerEvents(isVisible);
-  }, [isParentVisible]);
-
-  useEffect(() => {
-    isInitialRef.current = false;
-  }, []);
-
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
-  const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
+  const anchorSide = layout ? item.area[layout].anchorSide : AnchorSide.Top;
+  const positionType = layout ? item.area[layout].positionType : PositionType.ScreenBased;
+  const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   const scale = innerStateProps?.styles?.scale ?? itemScale;
   const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
   return (
@@ -171,9 +127,9 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         interactionCtrl?.handleTransitionEnd?.(e.propertyName);
       }}
       style={{
-        ...(position ? { top: position.top } : {}),
-        ...(position ? { left: position.left } : {}),
-        ...(position ? { bottom: position.bottom } : {}),
+        ...(top ? { top: isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide) } : {}),
+        ...(left ? { left: `${left * 100}vw` } : {}),
+        ...(top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {}),
         ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
         transition: wrapperStateProps?.transition ?? 'none'
       }}
@@ -191,15 +147,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
           <div
             className={`item-${item.id}-inner`}
             ref={itemInnerRef}
-            onClick={() => {
-              interactionCtrl?.sendTrigger('click');
-            }}
-            onMouseEnter={() => {
-              interactionCtrl?.sendTrigger('hover-in');
-            }}
-            onMouseLeave={() => {
-              interactionCtrl?.sendTrigger('hover-out');
-            }}
             style={{
               ...((width && height) ? {
                 width: `${sizingAxis.x === 'manual'
@@ -213,6 +160,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               cursor: hasClickTriggers ? 'pointer' : 'unset',
               pointerEvents: allowPointerEvents ? 'auto' : 'none'
             }}
+            {...triggers}
           >
             <ItemComponent
               item={item}
@@ -262,20 +210,3 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     </div>
   );
 };
-
-function parseSizing(sizing: string = 'manual'): Axis {
-  const axisSizing = sizing.split(' ');
-  return {
-    y: axisSizing[0],
-    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
-  } 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';
-}