@cntrl-site/sdk-nextjs 1.8.11 → 1.8.13

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -1,95 +1,95 @@
-import { FC, useEffect, useId, useMemo, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { CntrlColor } from '@cntrl-site/color';
-import { RectangleItem as TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
-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';
-
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
-  const { layouts } = useCntrlContext();
-  const {
-    fillColor: itemFillColor,
-    radius: itemRadius,
-    strokeWidth: itemStrokeWidth,
-    strokeColor: itemStrokeColor,
-    blur: itemBlur,
-    backdropBlur: itemBackdropBlur
-  } = useRectangleItem(item, sectionId);
-  const itemAngle = useItemAngle(item, sectionId);
-  const stateParams = interactionCtrl?.getState(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
-  const styles = stateParams?.styles ?? {};
-  const backgroundColor = useMemo(() => {
-    const fillColor = getStyleFromItemStateAndParams(styles?.fillColor, itemFillColor);
-    return fillColor ? CntrlColor.parse(fillColor) : undefined;
-  }, [itemFillColor, styles?.fillColor]);
-  const borderColor = useMemo(() => {
-    const strokeColor = getStyleFromItemStateAndParams(styles?.strokeColor, itemStrokeColor);
-    return strokeColor ? CntrlColor.parse(strokeColor) : undefined;
-  }, [itemStrokeColor, styles?.strokeColor]);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  const backdropBlur = getStyleFromItemStateAndParams(styles?.backdropBlur, itemBackdropBlur);
-  const radius = getStyleFromItemStateAndParams(styles?.radius, itemRadius);
-  const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
-  const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
-  const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
-  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-  const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-
-  return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      <>
-        <div
-          className={`rectangle-${item.id}`}
-          ref={setRef}
-          style={{
-            ...(backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {}),
-            ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
-            ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
-            ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
-            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-            ...(backdropFilterValue !== undefined
-              ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-              : {}
-            ),
-            transition: stateParams?.transition ?? 'none'
-          }}
-        />
-        <JSXStyle id={id}>{`
-        .rectangle-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          border-style: solid;
-          box-sizing: border-box;
-        }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          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.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-            }
-          `);
-        })}
-      `}</JSXStyle>
-      </>
-    </LinkWrapper>
-  );
-};
+import { FC, useEffect, useId, useMemo, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { CntrlColor } from '@cntrl-site/color';
+import { RectangleItem as TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
+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';
+
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const id = useId();
+  const { layouts } = useCntrlContext();
+  const {
+    fillColor: itemFillColor,
+    radius: itemRadius,
+    strokeWidth: itemStrokeWidth,
+    strokeColor: itemStrokeColor,
+    blur: itemBlur,
+    backdropBlur: itemBackdropBlur
+  } = useRectangleItem(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
+  const stateParams = interactionCtrl?.getState(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
+  const styles = stateParams?.styles ?? {};
+  const backgroundColor = useMemo(() => {
+    const fillColor = getStyleFromItemStateAndParams(styles?.fillColor, itemFillColor);
+    return fillColor ? CntrlColor.parse(fillColor) : undefined;
+  }, [itemFillColor, styles?.fillColor]);
+  const borderColor = useMemo(() => {
+    const strokeColor = getStyleFromItemStateAndParams(styles?.strokeColor, itemStrokeColor);
+    return strokeColor ? CntrlColor.parse(strokeColor) : undefined;
+  }, [itemStrokeColor, styles?.strokeColor]);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const backdropBlur = getStyleFromItemStateAndParams(styles?.backdropBlur, itemBackdropBlur);
+  const radius = getStyleFromItemStateAndParams(styles?.radius, itemRadius);
+  const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
+  const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
+  const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
+  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
+  const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <>
+        <div
+          className={`rectangle-${item.id}`}
+          ref={setRef}
+          style={{
+            ...(backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {}),
+            ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
+            ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
+            ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+            ...(backdropFilterValue !== undefined
+              ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
+              : {}
+            ),
+            transition: stateParams?.transition ?? 'none'
+          }}
+        />
+        <JSXStyle id={id}>{`
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          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.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+            }
+          `);
+        })}
+      `}</JSXStyle>
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/RectangleItem/useRectangleItem.ts

@@ -1,82 +1,82 @@
-import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../../common/useKeyframeValue';
-import { useLayoutContext } from '../../useLayoutContext';
-
-const defaultColor = 'rgba(0, 0, 0, 1)';
-
-export function useRectangleItem(item: RectangleItem, sectionId: string) {
-  const layoutId = useLayoutContext();
-  const radius = useKeyframeValue(
-    item,
-    KeyframeType.BorderRadius,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'radius' in layoutParams ? layoutParams.radius : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getRadius({ radius: value }, scroll).radius : undefined,
-    sectionId,
-    [layoutId]
-  );
-  const strokeWidth = useKeyframeValue(
-    item,
-    KeyframeType.BorderWidth,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined,
-    sectionId,
-    [layoutId]
-  );
-  const fillColor = useKeyframeValue(
-    item,
-    KeyframeType.Color,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
-    },
-    (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined,
-    sectionId,
-    [layoutId]
-  );
-  const strokeColor = useKeyframeValue(
-    item,
-    KeyframeType.BorderColor,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
-    },
-    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
-    sectionId,
-    [layoutId]
-  );
-  const blur = useKeyframeValue(
-    item,
-    KeyframeType.Blur,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'blur' in layoutParams ? layoutParams.blur : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
-    sectionId,
-    [layoutId]
-  );
-  const backdropBlur = useKeyframeValue(
-    item,
-    KeyframeType.BackdropBlur,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined,
-    sectionId,
-    [layoutId]
-  );
-  return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
-}
+import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
+
+const defaultColor = 'rgba(0, 0, 0, 1)';
+
+export function useRectangleItem(item: RectangleItem, sectionId: string) {
+  const layoutId = useLayoutContext();
+  const radius = useKeyframeValue(
+    item,
+    KeyframeType.BorderRadius,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'radius' in layoutParams ? layoutParams.radius : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getRadius({ radius: value }, scroll).radius : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const strokeWidth = useKeyframeValue(
+    item,
+    KeyframeType.BorderWidth,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const fillColor = useKeyframeValue(
+    item,
+    KeyframeType.Color,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
+    },
+    (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const strokeColor = useKeyframeValue(
+    item,
+    KeyframeType.BorderColor,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+    },
+    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const backdropBlur = useKeyframeValue(
+    item,
+    KeyframeType.BackdropBlur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined,
+    sectionId,
+    [layoutId]
+  );
+  return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
+}

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -1,105 +1,105 @@
-import { FC, useEffect, useId, useMemo, useState } from 'react';
-import { CntrlColor } from '@cntrl-site/color';
-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 { useItemAngle } from '../useItemAngle';
-import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { useCurrentLayout } from '../../../common/useCurrentLayout';
-
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const { layouts } = useCntrlContext();
-  const itemAngle = useItemAngle(item, sectionId);
-  const {
-    blur: itemBlur,
-    wordSpacing: itemWordSpacing,
-    letterSpacing: itemLetterSpacing,
-    color: itemColor,
-    fontSize,
-    lineHeight
-  } = useRichTextItemValues(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const exemplary = useExemplary();
-  const { layoutId } = useCurrentLayout();
-  useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
-  const stateStyles = stateParams?.styles ?? {};
-  const transition = stateParams?.transition ?? 'none';
-  const textColor = useMemo(() => {
-    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color, itemColor);
-    return color ? CntrlColor.parse(color) : undefined;
-  }, [itemColor, stateStyles.color]);
-  const angle = getStyleFromItemStateAndParams(stateStyles.angle, itemAngle);
-  const blur = getStyleFromItemStateAndParams(stateStyles.blur, itemBlur);
-  const letterSpacing = getStyleFromItemStateAndParams(stateStyles.letterSpacing, itemLetterSpacing);
-  const wordSpacing = getStyleFromItemStateAndParams(stateStyles.wordSpacing, itemWordSpacing);
-  const colorAlpha = textColor?.getAlpha();
-  const rangeStyles = layoutId ? item.layoutParams[layoutId]?.rangeStyles ?? [] : [];
-  const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
-  const hasVisibleRangeColors = rangeColors.some((color) => {
-    const alpha = CntrlColor.parse(color.value!).getAlpha();
-    return alpha > 0;
-  });
-  const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
-  const [content, styles] = useRichTextItem(item);
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-
-  return (
-    <>
-      <div
-        ref={setRef}
-        className={`rich-text-wrapper-${item.id}`}
-        style={{
-          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-          ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
-          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
-          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
-          ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
-          ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
-          transition
-        }}
-      >
-        {content}
-      </div>
-      <JSXStyle id={id}>
-        {styles}
-        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          const color = CntrlColor.parse(layoutParams.color);
-          return (`
-            .rich-text-wrapper-${item.id} {
-              font-size: ${layoutParams.fontSize * 100}vw;
-              line-height: ${layoutParams.lineHeight * 100}vw;
-              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
-              word-spacing: ${layoutParams.wordSpacing * 100}vw;
-              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 * 100}vw)` : 'unset'};
-              text-transform: ${layoutParams.textTransform};
-            }
-            @supports not (color: oklch(42% 0.3 90 / 1)) {
-              .rich-text-wrapper-${item.id} {
-                color: ${color.fmt('rgba')};
-              }
-            }
-          `);
-        })}`}
-      </JSXStyle>
-    </>
-  );
-};
+import { FC, useEffect, useId, useMemo, useState } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
+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 { useItemAngle } from '../useItemAngle';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useCurrentLayout } from '../../../common/useCurrentLayout';
+
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const id = useId();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const { layouts } = useCntrlContext();
+  const itemAngle = useItemAngle(item, sectionId);
+  const {
+    blur: itemBlur,
+    wordSpacing: itemWordSpacing,
+    letterSpacing: itemLetterSpacing,
+    color: itemColor,
+    fontSize,
+    lineHeight
+  } = useRichTextItemValues(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const exemplary = useExemplary();
+  const { layoutId } = useCurrentLayout();
+  useRegisterResize(ref, onResize);
+  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+  const stateStyles = stateParams?.styles ?? {};
+  const transition = stateParams?.transition ?? 'none';
+  const textColor = useMemo(() => {
+    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color, itemColor);
+    return color ? CntrlColor.parse(color) : undefined;
+  }, [itemColor, stateStyles.color]);
+  const angle = getStyleFromItemStateAndParams(stateStyles.angle, itemAngle);
+  const blur = getStyleFromItemStateAndParams(stateStyles.blur, itemBlur);
+  const letterSpacing = getStyleFromItemStateAndParams(stateStyles.letterSpacing, itemLetterSpacing);
+  const wordSpacing = getStyleFromItemStateAndParams(stateStyles.wordSpacing, itemWordSpacing);
+  const colorAlpha = textColor?.getAlpha();
+  const rangeStyles = layoutId ? item.layoutParams[layoutId]?.rangeStyles ?? [] : [];
+  const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
+  const hasVisibleRangeColors = rangeColors.some((color) => {
+    const alpha = CntrlColor.parse(color.value!).getAlpha();
+    return alpha > 0;
+  });
+  const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
+  const [content, styles] = useRichTextItem(item);
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+
+  return (
+    <>
+      <div
+        ref={setRef}
+        className={`rich-text-wrapper-${item.id}`}
+        style={{
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
+          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
+          ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
+          ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
+          transition
+        }}
+      >
+        {content}
+      </div>
+      <JSXStyle id={id}>
+        {styles}
+        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          const color = CntrlColor.parse(layoutParams.color);
+          return (`
+            .rich-text-wrapper-${item.id} {
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
+              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 * 100}vw)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
+          `);
+        })}`}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/items/RichTextItem/useRichTextItem.ts

@@ -1,12 +1,12 @@
-import { RichTextItem } from '@cntrl-site/sdk';
-import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { ReactNode } from 'react';
-
-const richTextConverter = new RichTextConverter();
-
-export const useRichTextItem = (item: RichTextItem): [ReactNode[], string] => {
-  const { layouts } = useCntrlContext();
-  const [content, styles] = richTextConverter.toHtml(item, layouts);
-  return [content, styles];
-};
+import { RichTextItem } from '@cntrl-site/sdk';
+import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { ReactNode } from 'react';
+
+const richTextConverter = new RichTextConverter();
+
+export const useRichTextItem = (item: RichTextItem): [ReactNode[], string] => {
+  const { layouts } = useCntrlContext();
+  const [content, styles] = richTextConverter.toHtml(item, layouts);
+  return [content, styles];
+};

package/src/components/items/RichTextWrapper.tsx

@@ -1,15 +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>
-  );
-};
+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>
+  );
+};