@cntrl-site/sdk-nextjs 1.1.5-alpha.2 → 1.2.0

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

@@ -6,9 +6,9 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 import { getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -51,7 +51,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   useEffect(() => {
     if (!vimeoPlayer || !imgRef) return;
-    if (play === 'on-click') {
+    if (play === 'on-click' && !controls) {
       setIsCoverVisible(true);
     }
     vimeoPlayer.on('pause', (e) => {
@@ -77,7 +77,6 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     vimeoPlayer!.play();
     setIsCoverVisible(false);
   };
-
   const isInteractive = opacity !== 0;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);

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,7 +1,5 @@
-import {
-  ComponentType,
+import React, {
   FC,
-  PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
@@ -15,39 +13,32 @@ 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 { useCntrlContext } from '../../provider/useCntrlContext';
 import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
 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';
 
 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 }) => {
@@ -134,7 +100,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const handleItemResize = (height: number) => {
     if (!layout) return;
     const sticky = item.sticky[layout];
-    if (!sticky || stickyTop === undefined) {
+    if (!sticky || stickyTop === undefined || !articleHeight) {
       setWrapperHeight(undefined);
       return;
     }
@@ -160,6 +126,9 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   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 +140,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 } : {}),
+        ...(position ? { top: isScreenBasedBottom ? 'unset' : getItemTopStyle(position.top, anchorSide) } : {}),
+        ...(position ? { left: `${position.left * 100}vw` } : {}),
+        ...(position ? { bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset' } : {}),
         ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
         transition: wrapperStateProps?.transition ?? 'none'
       }}
@@ -271,10 +240,6 @@ 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';

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

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

package/src/components/items/{useRectangleItem.ts → RectangleItem/useRectangleItem.ts}

@@ -1,6 +1,6 @@
 import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 

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

@@ -4,14 +4,14 @@ import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk'
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRichTextItemValues } from './useRichTextItemValues';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
-import { useExemplary } from '../../common/useExemplary';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRichTextItemValues } from '../useRichTextItemValues';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { getFontFamilyValue } from '../../../utils/getFontFamilyValue';
+import { useExemplary } from '../../../common/useExemplary';
 import { useItemAngle } from '../useItemAngle';
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useCurrentLayout } from '../../../common/useCurrentLayout';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();

package/src/components/items/{useRichTextItem.ts → RichTextItem/useRichTextItem.ts}

@@ -1,6 +1,6 @@
 import { RichTextItem } from '@cntrl-site/sdk';
-import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ReactNode } from 'react';
 
 const richTextConverter = new RichTextConverter();

package/src/components/items/RichTextWrapper.tsx

@@ -0,0 +1,15 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+interface RTWrapperProps {
+  isRichText: boolean;
+  transformOrigin?: string;
+}
+
+export const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children, transformOrigin = 'top left' }) => {
+  if (!isRichText) return <>{children}</>;
+  return (
+    <div style={{ transformOrigin, transform: 'scale(var(--layout-deviation))' }}>
+      {children}
+    </div>
+  );
+};

package/src/components/items/itemsMap.ts

@@ -0,0 +1,26 @@
+import { ArticleItemType } from '@cntrl-site/sdk';
+import { ComponentType } from 'react';
+import { RectangleItem } from './RectangleItem/RectangleItem';
+import { ImageItem } from './FileItem/ImageItem';
+import { VideoItem } from './FileItem/VideoItem';
+import { RichTextItem } from './RichTextItem/RichTextItem';
+import { YoutubeEmbedItem } from './EmbedVideoItem/YoutubeEmbed';
+import { VimeoEmbedItem } from './EmbedVideoItem/VimeoEmbed';
+import { CustomItem } from './CustomItem/CustomItem';
+import { GroupItem } from './GroupItem/GroupItem';
+import { CodeEmbedItem } from './CodeEmbedItem/CodeEmbedItem';
+import { ItemProps } from './Item';
+import { CompoundItem } from './CompoundItem/CompoundItem';
+
+export 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.Compound]: CompoundItem,
+  [ArticleItemType.CodeEmbed]: CodeEmbedItem
+};

package/src/components/{useItemAngle.ts → items/useItemAngle.ts}

@@ -1,5 +1,5 @@
 import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
 
 export const useItemAngle = (item: ItemAny, sectionId: string) => {
   const angle = useKeyframeValue(

package/src/components/{useItemDimensions.ts → items/useItemDimensions.ts}

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

package/src/components/{useItemPosition.ts → items/useItemPosition.ts}

@@ -1,7 +1,7 @@
 import { AnchorSide, ItemAny, KeyframeType, PositionType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../common/useKeyframeValue';
-import { getItemTopStyle } from '../utils/getItemTopStyle';
-import { useLayoutContext } from './useLayoutContext';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { getItemTopStyle } from '../../utils/getItemTopStyle';
+import { useLayoutContext } from '../useLayoutContext';
 
 export const useItemPosition = (
   item: ItemAny,
@@ -20,18 +20,15 @@ export const useItemPosition = (
     sectionId,
     [layoutId]
   );
-  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
-  const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
   // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-  const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   if (!position) return undefined;
   const top = stateValues?.top ?? position.top;
   const left = stateValues?.left ?? position.left;
   return position ? {
-    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
-    left: `${left * 100}vw`
+    top,
+    left
   } : undefined;
+
 };
 
 

package/src/components/{useItemScale.ts → items/useItemScale.ts}

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

package/src/index.ts

@@ -5,15 +5,15 @@ export { Page } from './components/Page';
 export type { PageProps } from './components/Page';
 export { CNTRLHead as Head } from './components/Head';
 export { Article } from './components/Article';
-export { Section } from './components/Section';
-export { Item } from './components/Item';
-export { ImageItem } from './components/items/ImageItem';
-export { RectangleItem } from './components/items/RectangleItem';
-export { RichTextItem } from './components/items/RichTextItem';
-export { VideoItem } from './components/items/VideoItem';
+export { Section } from './components/Section/Section';
+export { Item } from './components/items/Item';
+export { ImageItem } from './components/items/FileItem/ImageItem';
+export { RectangleItem } from './components/items/RectangleItem/RectangleItem';
+export { RichTextItem } from './components/items/RichTextItem/RichTextItem';
+export { VideoItem } from './components/items/FileItem/VideoItem';
 export { LayoutStyle } from './components/LayoutStyle';
-export { VimeoEmbedItem } from './components/items/VimeoEmbed';
-export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
+export { VimeoEmbedItem } from './components/items/EmbedVideoItem/VimeoEmbed';
+export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed';
 
 import { cntrlSdkContext as sdk } from './provider/defaultContext';
 export { CntrlProvider } from './provider/CntrlProvider';

package/src/interactions/InteractionsRegistry.ts

@@ -6,8 +6,7 @@ import {
   InteractionTrigger,
   ItemAny,
 } from '@cntrl-site/sdk';
-import { isItemType } from '../components/Item';
-import { AudioPlayer } from './AudioPlayer';
+import { isItemType } from '../utils/isItemType';
 
 export class InteractionsRegistry implements InteractionsRegistryPort {
   private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
@@ -17,7 +16,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
   private interactionStateMap: InteractionStateMap;
   private itemsStages: ItemStages;
   private activeStateIdInteractionIdMap: Record<StateId, InteractionId>;
-  private audioPlayer = new AudioPlayer();
+
   constructor(article: Article, private layoutId: string) {
     const { interactions } = article;
     this.items = this.unpackItems(article);
@@ -138,9 +137,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       for (const trigger of interaction.triggers) {
         itemsToNotify.add(trigger.itemId);
       }
-      if (triggerType === 'click') {
-        this.playClickSound();
-      }
       this.notifyItemCtrlsChange(Array.from(itemsToNotify));
       this.notifyTransitionStartForItems(transitioningItems, activeStateId);
     }
@@ -207,10 +203,11 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       for (const item of section.items) {
         const { items, ...itemWithoutChildren } = item;
         itemsArr.push(itemWithoutChildren);
-        if (!isItemType(item, ArticleItemType.Group)) continue;
-        const groupChildren = item?.items ?? [];
-        for (const child of groupChildren) {
-          itemsArr.push(child);
+        if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
+          const groupChildren = item?.items ?? [];
+          for (const child of groupChildren) {
+            itemsArr.push(child);
+          }
         }
       }
     }
@@ -238,10 +235,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     }
     return stages;
   }
-
-  private playClickSound() {
-    this.audioPlayer.play();
-  }
 }
 
 type ItemStages = (TransitioningStage | ActiveStage)[];

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -9,7 +9,7 @@ import {
   RichTextStyle,
   RichTextEntity
 } from '@cntrl-site/sdk';
-import { LinkWrapper } from '../../components/LinkWrapper';
+import { LinkWrapper } from '../../components/items/LinkWrapper';
 import { getFontFamilyValue } from '../getFontFamilyValue';
 
 interface StyleGroup {

package/src/utils/getCompoundBondaryStyles.ts

@@ -0,0 +1,62 @@
+import { AreaAnchor } from '@cntrl-site/sdk';
+import { DimensionMode } from '@cntrl-site/sdk/src/types/article/ItemArea';
+
+const positionMatrix: Record<AreaAnchor, [number, number]> = {
+  [AreaAnchor.TopLeft]: [0, 0],
+  [AreaAnchor.TopCenter]: [0, 0.5],
+  [AreaAnchor.TopRight]: [0, 1],
+  [AreaAnchor.MiddleLeft]: [0.5, 0],
+  [AreaAnchor.MiddleCenter]: [0.5, 0.5],
+  [AreaAnchor.MiddleRight]: [0.5, 1],
+  [AreaAnchor.BottomLeft]: [1, 0],
+  [AreaAnchor.BottomCenter]: [1, 0.5],
+  [AreaAnchor.BottomRight]: [1, 1]
+};
+
+export function getCompoundHeight(compoundSettings: CompoundSettings | undefined, height: number | undefined) {
+  if (!height || !compoundSettings) return;
+  if (compoundSettings.heightMode === 'relative') {
+    return `${height * 100}%`;
+  }
+  return `${height * 100}vw`;
+}
+
+export function getCompoundWidth(compoundSettings: CompoundSettings | undefined, width: number | undefined, isRichText: boolean, exemplary?: number) {
+  if (!width || !compoundSettings) return;
+  if (compoundSettings.widthMode === 'relative') {
+    return `${width * 100}%`;
+  }
+  return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
+}
+
+export function getCompoundTop(compoundSettings: CompoundSettings | undefined, top: number | undefined) {
+  if (!top || !compoundSettings) return;
+  if (compoundSettings.heightMode === 'relative') {
+    return `${top * 100}%`;
+  }
+  const [ky] = positionMatrix[compoundSettings.positionAnchor];
+  return `calc(${ky * 100}% + ${top * 100}vw)`;
+}
+
+export function getCompoundLeft(compoundSettings: CompoundSettings | undefined, left: number | undefined) {
+  if (!left || !compoundSettings) return;
+  if (compoundSettings.widthMode === 'relative') {
+    return `${left * 100}%`;
+  }
+  const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
+  return `calc(${kx * 100}% + ${left * 100}vw)`;
+}
+
+export function getCompoundTransform(compoundSettings: CompoundSettings | undefined) {
+  if (!compoundSettings) return 'unset';
+  const areaAnchor = compoundSettings.positionAnchor as AreaAnchor;
+  const [ky, kx] = positionMatrix[areaAnchor];
+  return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
+}
+
+
+type CompoundSettings = {
+  positionAnchor: AreaAnchor;
+  widthMode: DimensionMode;
+  heightMode: DimensionMode;
+};

package/src/utils/isItemType.ts

@@ -0,0 +1,6 @@
+import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
+import { Item as TItem } from '@cntrl-site/sdk/src/types/article/Item';
+
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>