@developer_tribe/react-builder 1.2.1 → 1.2.3

package/src/build-components/OnboardButton/OnboardButton.tsx

@@ -5,21 +5,18 @@ import type {
 } from './OnboardButtonProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
+import { useLocalize } from '../../hooks/useLocalize';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'OnboardButton';
+  const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const { appConfig } = useBuilderParams();
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
@@ -28,18 +25,13 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const attributeKey = node.key ?? generatedId;
 
   const labelRaw = node.attributes?.labelKey ?? '';
-  const label =
-    (appConfig.localication?.[appConfig.defaultLanguage ?? 'en']?.[
-      labelRaw
-    ] as string) ?? labelRaw;
+  const localize = useLocalize({ appConfig });
+  const label = localize(labelRaw);
 
   const flex = node.attributes?.flex ?? 1;
   const textColor = node.attributes?.button_text_color ?? '#FFFFFF';
   const backgroundColor = node.attributes?.button_background_color ?? '#0066FF';
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {
     //TODO: any ??

package/src/build-components/OnboardButtons/OnboardButtons.tsx

@@ -1,26 +1,22 @@
-import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useState } from 'react';
 import type { Node } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
   node = useNode(node);
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'OnboardButtons';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const attributeName = node.sourceType ?? node.type ?? 'OnboardButtons';
+  const { appConfig } = useBuilderParams();
   const seperatorColorDefault =
-    appConfig.theme === 'light'
-      ? appConfig.screenStyle.light.seperatorColor
-      : appConfig.screenStyle.dark.seperatorColor;
+    appConfig?.theme === 'light'
+      ? appConfig?.screenStyle?.light?.seperatorColor
+      : appConfig?.screenStyle?.dark?.seperatorColor;
   const ctx = useContext(onboardContext) ?? {};
   const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);
 
@@ -44,10 +40,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return <RenderNode node={node.children as Node} />;
   };
 
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node);
 
   // NOTE: Hooks must not be called conditionally.
   // Generate the id before any early returns so the hook order stays stable.

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -3,12 +3,13 @@ import type { OnboardDotComponentProps } from './OnboardDotProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { useRenderStore } from '../../store';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
+import { defaultAppConfig } from '../../types/PreviewConfig';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
@@ -21,14 +22,13 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const dotType = node.attributes?.dotType || 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
+  const {
+    previewMode,
+    selectedKey,
+    appConfig: builderAppConfig,
+    projectColors,
+  } = useBuilderParams();
+  const appConfig = builderAppConfig ?? defaultAppConfig;
   const isDark = appConfig.theme === 'dark';
 
   // OnboardDot specific attributes
@@ -38,16 +38,20 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const inactiveDotOpacity = node.attributes?.inactive_dot_opacity ?? 0.3;
   const activeDotColor = node.attributes?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
-    () => parseColor(activeDotColor, { appConfig, projectColors }),
-    [activeDotColor, appConfig, projectColors],
+    () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
+    [activeDotColor, appConfig.theme, projectColors],
   );
 
+  const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
-    let innerStyle = extractViewStyle(node, { appConfig, projectColors });
-    delete innerStyle.flexDirection;
+    const { flexDirection: _flexDirection, ...innerStyle } = extractedStyle;
     return innerStyle;
-  }, [node, appConfig, projectColors]);
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  }, [extractedStyle]);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
@@ -69,8 +73,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
 
     return {
       // Controls the actual dot diameter (`.embla__dot:after`).
-      ['--embla-dot-size' as any]: cssWidth,
-    } as React.CSSProperties;
+      '--embla-dot-size': cssWidth,
+    } as React.CSSProperties & Record<`--${string}`, string>;
   }, [expandingDotWidthRaw]);
   const containerStyle = useMergedStyle(style, expandingDotWidthOverride);
 
@@ -109,15 +113,15 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     >
       {scrollSnaps.map((snap, index) => {
         const isDotSelected = selectedIndex === index;
-        const dotStyles: React.CSSProperties = {
+        const dotStyles: React.CSSProperties & Record<`--${string}`, string> = {
           opacity: isDotSelected ? 1 : inactiveDotOpacity,
         };
 
         if (resolvedActiveDotColor && isDotSelected) {
           // Style the actual visual dot (rendered via `.embla__dot:after`) using a CSS variable.
-          (dotStyles as any)['--embla-dot-color'] = resolvedActiveDotColor;
+          dotStyles['--embla-dot-color'] = resolvedActiveDotColor;
         } else if (!isDotSelected) {
-          (dotStyles as any)['--embla-dot-color'] = inactiveDotColor;
+          dotStyles['--embla-dot-color'] = inactiveDotColor;
         }
 
         return (

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -1,13 +1,14 @@
 import React, { useId, useMemo } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { parseSize } from '../../size-matters';
-import { extractTextStyle } from '../../utils/extractTextStyle';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { defaultAppConfig } from '../../types/PreviewConfig';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -92,29 +93,20 @@ function buildSegments(
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   useLogRender('OnboardFooter');
   node = useNode(node);
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
-  const { appConfig, projectColors, previewMode, current } = useRenderStore(
-    (s) => ({
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-      previewMode: s.previewMode,
-      current: s.current,
-    }),
-  );
+  const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
+  const {
+    appConfig: builderAppConfig,
+    previewMode,
+    selectedKey,
+  } = useBuilderParams();
+  const appConfig = builderAppConfig ?? defaultAppConfig;
   const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const textStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const textStyle = useExtractTextStyle(node);
+  const viewStyle = useExtractViewStyle(node);
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,
@@ -131,7 +123,11 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     [paddingHorizontal],
   );
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const baseStyle = useMergedStyle(viewStyle, textStyle);
   const paddedStyle = useMergedStyle(baseStyle, layoutStyle);
   const generatedId = useId();

package/src/build-components/OnboardImage/OnboardImage.tsx

@@ -1,28 +1,20 @@
-import React, { useEffect, useId, useMemo, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
+import type { ImageComponentProps } from '../Image/ImageProps.generated';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { useRenderStore } from '../../store';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const attributeName = node.sourceType ?? node.type ?? 'OnboardImage';
   const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node);
 
   useEffect(() => {
     if (node.attributes?.lottie) {
@@ -72,7 +64,13 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
 
   return (
     <Image
-      node={{ ...node, type: 'image', sourceType: attributeName } as any}
+      node={
+        {
+          ...node,
+          type: 'image',
+          sourceType: attributeName,
+        } as unknown as ImageComponentProps['node']
+      }
     />
   );
 }

package/src/build-components/OnboardItem/OnboardItem.tsx

@@ -2,25 +2,16 @@ import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import RenderNode from '../RenderNode.generated';
-import { useRenderStore } from '../../store';
-import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
+  const attributeName = node.sourceType ?? node.type ?? 'OnboardItem';
   const attributeKey = node.key ?? generatedId;
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const viewStyle = useExtractViewStyle(node);
   return (
     <div
       attribute-name={attributeName}

package/src/build-components/OnboardProvider/OnboardProvider.tsx

@@ -10,23 +10,16 @@ import type { NodeData } from '../../types/Node';
 import type { OnboardProviderComponentProps } from './OnboardProviderProps.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
-import { useRenderStore } from '../../store';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { ViewPropsGenerated } from '../View/ViewProps.generated';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
   useLogRender('OnboardProvider');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
+  const attributeName = node.sourceType ?? node.type ?? 'OnboardProvider';
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const attributeKey = node.key ?? generatedId;
@@ -75,15 +68,15 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   }, [theme]);*/
 
   //TODO: pattern içinde direk gömmek yerine orada da inhertince eklenebilir
-  const viewStyle = useMemo(() => {
-    const style = extractViewStyle(
-      node as NodeData<ViewPropsGenerated['attributes']>,
-      { appConfig, projectColors },
-    );
-    //NOTE: Embla için istisna
-    style.display = 'block';
-    return style;
-  }, [node, appConfig, projectColors]);
+  const baseStyle = useExtractViewStyle(node);
+  const viewStyle = useMemo(
+    () => ({
+      ...baseStyle,
+      // NOTE: Embla for web expects block layout here.
+      display: 'block',
+    }),
+    [baseStyle],
+  );
 
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>

package/src/build-components/PaywallBackground/PaywallBackground.tsx

@@ -1,8 +1,8 @@
 import React, { useId, useMemo } from 'react';
 import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -15,21 +15,15 @@ function PaywallBackground({ node }: PaywallBackgroundComponentProps) {
   const attributeName = node.type ?? 'PaywallBackground';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
+  const { previewMode, selectedKey } = useBuilderParams();
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

package/src/build-components/PaywallCloseButton/PaywallCloseButton.tsx

@@ -1,8 +1,8 @@
 import React, { useId, useMemo } from 'react';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -16,25 +16,18 @@ function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
   const { onClose } = usePaywallContext();
 
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'PaywallCloseButton';
+  const attributeName = node.sourceType ?? node.type ?? 'PaywallCloseButton';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
+  const { previewMode, selectedKey } = useBuilderParams();
 
-  const baseStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractTextStyle(node);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

package/src/build-components/PaywallOptions/PaywallOptionButton.tsx

@@ -1,17 +1,17 @@
 import { useId, useMemo } from 'react';
 import type { Product } from '../../paywall/types/paywall-types';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import type { NodeData } from '../../types/Node';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
-import { RenderNode } from '../..';
+import RenderNode from '../RenderNode.generated';
 
 export type OptionsButtonProps = {
   product: Product;
   selected: boolean;
   onPress: (productId: string) => void;
-  node: NodeData<any>;
+  node: NodeData<Record<string, unknown>>;
 };
 
 export function PaywallOptionButton({
@@ -23,27 +23,21 @@ export function PaywallOptionButton({
   const generatedId = useId();
   const productId = (product.productId ?? '').trim();
 
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
+  const { previewMode, selectedKey } = useBuilderParams();
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
 
   const mergedStyle = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const attributeName = node.sourceType ?? node.type ?? 'text';
   const baseAttributeKey = (node.key ?? generatedId) as string;
   const attributeKey = productId
     ? `${baseAttributeKey}:${productId}`

package/src/build-components/PaywallProvider/PaywallProvider.tsx

@@ -3,8 +3,7 @@ import type { PaywallProviderComponentProps } from './PaywallProviderProps.gener
 import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -18,21 +17,17 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
   node = useNode(node);
 
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'PaywallProvider';
+  const attributeName = node.sourceType ?? node.type ?? 'PaywallProvider';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
-
-  const { benefits, products, onPaywallClose, onPaywallSubscribe } =
-    useBuilderParams();
+  const {
+    benefits,
+    products,
+    onPaywallClose,
+    onPaywallSubscribe,
+    previewMode,
+    selectedKey,
+  } = useBuilderParams();
   const mockOS = useMockOSContext();
   const benefitLocalizationParams = useMemo(() => {
     const raw =
@@ -55,12 +50,13 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     return params;
   }, [benefits]);
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

package/src/build-components/PaywallSubscribeButton/PaywallSubscribeButton.tsx

@@ -1,9 +1,9 @@
 import React, { useId, useMemo } from 'react';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButtonProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
@@ -18,30 +18,24 @@ function PaywallSubscribeButton({
 
   const generatedId = useId();
   const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'PaywallSubscribeButton';
+    node.sourceType ?? node.type ?? 'PaywallSubscribeButton';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
+  const { previewMode, selectedKey, appConfig } = useBuilderParams();
 
-  const baseStyle = useMemo(
-    () => extractTextStyle(node as any, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractTextStyle(node);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const localize = useLocalize();
+  const localize = useLocalize({ appConfig });
   const label =
     typeof node.children === 'string' && node.children.trim().length > 0
       ? node.children