@cntrl-site/sdk-nextjs 0.29.7 → 0.30.1

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
+import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   AnchorSide,
@@ -29,6 +29,9 @@ 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 { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
+import { KeyframesContext } from '../provider/KeyframesContext';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -50,7 +53,8 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
   [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
   [ArticleItemType.Custom]: CustomItem,
-  [ArticleItemType.Group]: GroupItem
+  [ArticleItemType.Group]: GroupItem,
+  [ArticleItemType.CodeEmbed]: CodeEmbedItem
 };
 
 interface RTWrapperProps {
@@ -76,17 +80,19 @@ const noop = () => null;
 export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isInGroup = false }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
+  const keyframesRepo = useContext(KeyframesContext);
   const id = useId();
+  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [keyframesRepo, item.id]);
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
-  const { scale, scaleAnchor } = useItemScale(item, sectionId);
-  const { top, left, bottom } = useItemPosition(item, sectionId);
+  const scale = useItemScale(item, sectionId);
+  const position = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
-  const { width, height } = useItemDimensions(item, sectionId);
+  const dimensions = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
   const isInitialRef = useRef(true);
   layoutValues.push(item.sticky);
@@ -105,7 +111,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   const handleItemResize = (height: number) => {
     if (!layout) return;
     const sticky = item.sticky[layout];
-    if (!sticky) {
+    if (!sticky || stickyTop === undefined) {
       setWrapperHeight(undefined);
       return;
     }
@@ -124,36 +130,38 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
-
-  if (!layout) return null;
-  const styles = {
-    top: `${stickyTop * 100}vw`,
-    height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
-  };
-
   return (
     <div
       className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
-      style={isInitialRef.current ? {} : { top, left, bottom, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      style={{
+        ...(position ? { top: position.top } : {}),
+        ...(position ? { left: position.left } : {}),
+        ...(position ? { bottom: position.bottom } : {}),
+        ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})
+      }}
     >
       <div
         suppressHydrationWarning={true}
         className={`item-${item.id}`}
-        style={isInitialRef.current ? {} : styles }
+        style={{
+          opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
+          top: `${stickyTop * 100}vw`,
+          height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
+          ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {}),
+        }}
       >
         <RichTextWrapper isRichText={isRichText}>
           <div
             className={`item-${item.id}-inner`}
             style={{
-              width: `${sizingAxis.x === 'manual'
-                ? isRichText
-                  ? `${width * exemplary}px`
-                  : `${width * 100}vw`
-                : 'max-content'}`,
-              height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`,
-              transform: `scale(${scale})`,
-              transformOrigin: ScaleAnchorMap[scaleAnchor]
+              ...(dimensions ? {
+                width: `${sizingAxis.x === 'manual'
+                  ? isRichText
+                    ? `${dimensions.width * exemplary}px`
+                    : `${dimensions.width * 100}vw`
+                  : 'max-content'}`,
+                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {})
             }}
           >
             <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
@@ -161,24 +169,29 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
-        const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
+          const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
+          const scaleAnchor = area.scaleAnchor as AreaAnchor;
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
+              transition: opacity 0.1s linear;
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
             }
             .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
-              width: ${sizingAxis.x === 'manual' ? `${area.width * 100}vw` : 'max-content'};
+              width: ${sizingAxis.x === 'manual'
+                ? isRichText
+                  ? `${area.width * exemplary}px`
+                  : `${area.width * 100}vw`
+                : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${scale});
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
-              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
@@ -191,10 +204,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
-              ${getHoverStyles(['width', 'height', 'scale'], hoverParams)}
+              ${getHoverStyles(['width', 'height', 'scale'], hoverParams)};
             }
             .item-wrapper-${item.id}:hover {
-              ${getHoverStyles(['left', 'top'], hoverParams, area.anchorSide)}
+              ${getHoverStyles(['left', 'top'], hoverParams, area.anchorSide)};
             }
           `);
       })}

package/src/components/Section.tsx

@@ -8,10 +8,11 @@ import {
   SectionHeightMode
 } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../provider/useCntrlContext';
-import { useSectionColor } from './useSectionColor';
 import { useSectionRegistry } from '../utils/ArticleRectManager/useSectionRegistry';
+import { CntrlColor } from '@cntrl-site/color';
 
 type SectionChild = ReactElement<any, any>;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
 interface Props {
   section: TSection;
@@ -23,7 +24,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
   const id = useId();
   const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
-  const backgroundColor = useSectionColor(section.color);
+  const layoutValues: Record<string, any>[] = [section.height, section.color];
   const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
   useSectionRegistry(section.id, sectionRef.current);
   const getSectionVisibilityStyles = () => {
@@ -48,19 +49,17 @@ export const Section: FC<Props> = ({ section, data, children }) => {
       <div
         className={`section-${section.id}`}
         id={section.name}
-        style={{
-          backgroundColor: backgroundColor.fmt('rgba')
-        }}
         ref={sectionRef}
       >
         {children}
       </div>
       <JSXStyle id={id}>{`
       ${
-        getLayoutStyles(layouts, [section.height], ([height]) => (`
+        getLayoutStyles(layouts, layoutValues, ([height, color]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
+            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
          }`
         ))
       }

package/src/components/items/CodeEmbedItem.tsx

@@ -0,0 +1,73 @@
+import { ArticleItemType, getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
+import { FC, 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';
+
+const stylesMap = {
+  [AreaAnchor.TopLeft]: {},
+  [AreaAnchor.TopCenter]: { justifyContent: 'center' },
+  [AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
+  [AreaAnchor.MiddleLeft]: { alignItems: 'center' },
+  [AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
+  [AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
+  [AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
+  [AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
+  [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
+};
+
+export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize }) => {
+  const id = useId();
+  const { layouts } = useCntrlContext();
+  const { anchor, blur, opacity } = useCodeEmbedItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
+  const { html } = item.commonParams;
+  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];
+
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <div
+        className={`embed-wrapper-${item.id}`}
+        style={{ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)`, ...pos}}
+        ref={setRef}
+      >
+        <div className="embed" dangerouslySetInnerHTML={{ __html: html }}></div>
+      </div>
+      <JSXStyle id={id}>{`
+      .embed -wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+        overflow: hidden;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        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)};
+          }
+          .embed-wrapper-${item.id}:hover {
+            ${getHoverStyles<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
+          }
+        `);
+      })}
+    `}</JSXStyle>
+    </LinkWrapper>
+  );
+};

package/src/components/items/CustomItem.tsx

@@ -5,21 +5,33 @@ 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';
 
-export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize }) => {
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId }) => {
   const sdk = useCntrlContext();
   const { layouts } = useCntrlContext();
+  const angle = useItemAngle(item, sectionId);
   const component = sdk.customItems.get(item.commonParams.name);
+  const layoutValues: Record<string, any>[] = [item.area, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   if (!component) return null;
   return (
     <>
-      <div className={`custom-component-${item.id}`} ref={setRef}>{component({})}</div>
+      <div
+        className={`custom-component-${item.id}`}
+        ref={setRef}
+        style={{
+          transform: `rotate(${angle}deg)`,
+        }}
+      >
+        {component({})}
+      </div>
       <JSXStyle id={item.id}>
-        {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        {`${getLayoutStyles(layouts, layoutValues, ([area, hoverParams]) => {
           return (`
             .custom-component-${item.id} {
+              transform: rotate(${area.angle}deg);
               transition: ${getTransitions<ArticleItemType.Custom>(['angle'], hoverParams)};
               height: 100%;
               width: 100%;

package/src/components/items/GroupItem.tsx

@@ -15,6 +15,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const angle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
   const { opacity } = useGroupItem(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
 
@@ -46,13 +47,15 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           height: 100%;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .group-${item.id} {
-              transition: ${getTransitions<ArticleItemType.Group>(['opacity'], hoverParams)};
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              transition: ${getTransitions<ArticleItemType.Group>(['opacity', 'angle'], hoverParams)};
             }
             .group-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Group>(['opacity'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Group>(['opacity', 'angle'], hoverParams)};
             }
           `);
         })}

package/src/components/items/ImageItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useRef, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
 import { ArticleItemType, getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
@@ -33,6 +33,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   useRegisterResize(ref, onResize);
   const { url, hasGLEffect, fragmentShader } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
+  const isInitialRef = useRef(true);
   const controls = item.commonParams.FXControls ?? [];
   const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
       .join('\n');
@@ -40,14 +41,18 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     acc[control.shaderParam] = control.value;
     return acc;
   }, {});
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
   const area = layoutId ? item.area[layoutId] : null;
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
+  useEffect(() => {
+    isInitialRef.current = false;
+  }, []);
   useImageFx(
     fxCanvas.current,
-    hasGLEffect ?? false,
+    !!(hasGLEffect && !isInitialRef.current),
     {
       imageUrl: url,
       fragmentShader: fullShaderCode,
@@ -63,7 +68,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const inlineStyles = {
     borderRadius: `${radius * 100}vw`,
     borderWidth: `${strokeWidth * 100}vw`,
-    borderColor: `${borderColor.toCss()}`
+    borderColor: `${borderColor.fmt('rgba')}`
   };
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -81,7 +86,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             <canvas
               style={inlineStyles}
               ref={fxCanvas}
-              className="img-canvas"
+              className={`img-canvas image-${item.id}`}
               width={rectWidth}
               height={rectHeight}
             />
@@ -95,11 +100,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           )}
         </div>
         <JSXStyle id={id}>{`
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .image-${item.id} {
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;
@@ -125,19 +125,25 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           border-width: 0;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .image-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${getTransitions<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .image-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .image-${item.id} {
+              border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
               transition: ${getTransitions<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
-            .image-wrapper-${item.id}:hover .image {
-              ${getHoverStyles<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+            .image-wrapper-${item.id}:hover .image, .image-wrapper-${item.id}:hover .img-canvas {
+              ${getHoverStyles<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
           `);
         })}

package/src/components/items/RectangleItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
 import { RectangleItem as TRectangleItem, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
@@ -9,6 +9,7 @@ import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
+import { useLayoutContext } from '../useLayoutContext';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -17,9 +18,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset';
+  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)`: undefined;
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -28,23 +30,17 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            backgroundColor: `${backgroundColor.toCss()}`,
+            backgroundColor: `${backgroundColor.fmt('rgba')}`,
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`,
-            filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
+            filter: `blur(${blur * 100}vw)`,
             backdropFilter: backdropFilterValue,
-            WebkitBackdropFilter: backdropFilterValue,
+            WebkitBackdropFilter: backdropFilterValue
           }}
         />
         <JSXStyle id={id}>{`
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .rectangle-${item.id} {
-            background-color: ${backgroundColor.fmt('rgba')};
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;
@@ -52,13 +48,21 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           border-style: solid;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .rectangle-${item.id} {
+              background-color: ${CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
+              border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${getTransitions<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
             .rectangle-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
           `);
         })}

package/src/components/items/RichTextItem.tsx

@@ -10,14 +10,17 @@ import { useRichTextItemValues } from './useRichTextItemValues';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
 import { useExemplary } from '../../common/useExemplary';
+import { useItemAngle } from '../useItemAngle';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
   const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
-  const { angle, blur, wordSpacing, letterSpacing, color } = useRichTextItemValues(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
+  const { blur, wordSpacing, letterSpacing, color } = useRichTextItemValues(item, sectionId);
   const textColor = useMemo(() => CntrlColor.parse(color), [color]);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const exemplary = useExemplary();
   useRegisterResize(ref, onResize);
 
@@ -31,45 +34,41 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
           filter: `blur(${blur * exemplary}px)`,
           letterSpacing: `${letterSpacing * exemplary}px`,
           wordSpacing: `${wordSpacing * exemplary}px`,
-          color: `${textColor.toCss()}`
+          color: `${textColor.fmt('rgba')}`
         }}
       >
         {content}
       </div>
       <JSXStyle id={id}>
         {styles}
-        {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
+          const color = CntrlColor.parse(layoutParams.color);
           return (`
             .rich-text-wrapper-${item.id} {
+              font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
+              line-height: ${layoutParams.lineHeight * exemplary}px;
+              letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
+              word-spacing: ${layoutParams.wordSpacing * exemplary}px;
+              font-family: ${getFontFamilyValue(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * exemplary}px)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
               transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)}
-            }
-          `);
-        })}`}
-        {`${getLayoutStyles(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
-          const color = CntrlColor.parse(layoutParams.color);
-          return (`
-            .rich-text-wrapper-${item.id} {
-                font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
-                line-height: ${layoutParams.lineHeight * exemplary}px;
-                letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
-                word-spacing: ${layoutParams.wordSpacing * exemplary}px;
-                font-family: ${getFontFamilyValue(layoutParams.typeFace)};
-                font-weight: ${layoutParams.fontWeight};
-                font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
-                vertical-align: ${layoutParams.verticalAlign};
-                font-variant: ${layoutParams.fontVariant};
-                color: ${color.toCss()};
-                text-transform: ${layoutParams.textTransform};
+              ${getHoverStyles<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             @supports not (color: oklch(42% 0.3 90 / 1)) {
               .rich-text-wrapper-${item.id} {
                 color: ${color.fmt('rgba')};
               }
             }
-            `);
+          `);
         })}`}
       </JSXStyle>
     </>