@developer_tribe/react-builder 1.2.2 → 1.2.3

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

@@ -4,11 +4,12 @@ import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useRenderStore } from '../../store';
+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,20 +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 as any, {
-    appConfig,
-    projectColors,
-  });
+  const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
-    const innerStyle = { ...extractedStyle };
-    delete (innerStyle as any).flexDirection;
+    const { flexDirection: _flexDirection, ...innerStyle } = extractedStyle;
     return innerStyle;
   }, [extractedStyle]);
-  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,
@@ -73,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);
 
@@ -113,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 { 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 = useExtractTextStyle(node as any, {
-    appConfig,
-    projectColors,
-  });
-  const viewStyle = useExtractViewStyle(node as any, {
-    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, 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 { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useRenderStore } from '../../store';
 
 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 = useExtractViewStyle(node as any, {
-    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,7 +2,6 @@ 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 { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
@@ -10,16 +9,9 @@ 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 = useExtractViewStyle(node as any, {
-    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 { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { ViewPropsGenerated } from '../View/ViewProps.generated';
 
 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,10 +68,7 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   }, [theme]);*/
 
   //TODO: pattern içinde direk gömmek yerine orada da inhertince eklenebilir
-  const baseStyle = useExtractViewStyle(
-    node as NodeData<ViewPropsGenerated['attributes']>,
-    { appConfig, projectColors },
-  );
+  const baseStyle = useExtractViewStyle(node);
   const viewStyle = useMemo(
     () => ({
       ...baseStyle,

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

@@ -1,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -15,18 +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 = useExtractViewStyle(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,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButtonProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -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 = useExtractTextStyle(node as any, {
-    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

@@ -2,16 +2,16 @@ import { useId, useMemo } from 'react';
 import type { Product } from '../../paywall/types/paywall-types';
 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,24 +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 = useExtractViewStyle(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,7 +3,6 @@ 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 { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -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 = useExtractViewStyle(node as any, {
-    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,7 +1,7 @@
 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 { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -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 = useExtractTextStyle(node as any, {
-    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

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

@@ -1,7 +1,7 @@
 import React, { useContext, useId, useMemo } from 'react';
 import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -82,32 +82,23 @@ function RadioButton({ node }: RadioButtonComponentProps) {
   const attributeName = node.type ?? 'RadioButton';
   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 = useExtractViewStyle(node as any, {
-    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,
   );
 
-  const selected = Boolean((node.attributes as any)?.selected);
-  const color =
-    typeof (node.attributes as any)?.color === 'string'
-      ? ((node.attributes as any)?.color as string)
-      : undefined;
-  const size = parseNumberLike((node.attributes as any)?.size);
+  const selected = Boolean(node.attributes?.selected);
+  const color = node.attributes?.color;
+  const size = parseNumberLike(node.attributes?.size);
 
   return (
     <div

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

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -18,38 +18,30 @@ function Text({ node }: TextComponentProps) {
   useLogRender('Text');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const attributeName = node.sourceType ?? node.type ?? 'text';
   const attributeKey = node.key ?? generatedId;
   const textRef = useRef<HTMLParagraphElement | null>(null);
   const [autoFontSizePx, setAutoFontSizePx] = useState<number | null>(null);
-  const { appConfig, projectColors, previewMode, current } = useRenderStore(
-    (s) => ({
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-      previewMode: s.previewMode,
-      current: s.current,
-    }),
-  );
+  const { appConfig, previewMode, selectedKey } = useBuilderParams();
   const keyOrText: string = node.children as string;
-  const textStyle = useExtractTextStyle(node, { appConfig, projectColors });
-  const isSelected = isNodeSelected({ previewMode, current, node });
-  const localize = useLocalize();
+  const textStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const localize = useLocalize({ appConfig });
 
   const localizedText = useMemo(
     () => localize(keyOrText),
     [localize, keyOrText],
   );
 
-  const attrs = (node as any)?.attributes as
-    | (Record<string, unknown> & { style?: Record<string, unknown> })
-    | undefined;
+  const attrs = node.attributes;
   const styleBag = attrs?.style;
-  const adjustsFontSizeToFit =
-    (attrs?.adjustsFontSizeToFit as boolean | undefined) ??
-    (styleBag?.adjustsFontSizeToFit as boolean | undefined) ??
-    false;
+  const adjustsFontSizeToFit = attrs?.adjustsFontSizeToFit ?? false;
   const showEllipsis =
-    (attrs?.showEllipsis as boolean | undefined) ??
+    attrs?.showEllipsis ??
     (styleBag?.showEllipsis as boolean | undefined) ??
     false;
 

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

@@ -3,7 +3,7 @@ import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -13,18 +13,15 @@ export function View({ node }: ViewComponentProps) {
   useLogRender('View');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'view';
+  const attributeName = node.sourceType ?? node.type ?? 'view';
   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 baseStyle = useExtractViewStyle(node, { appConfig, projectColors });
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractViewStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const viewStyle = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,