@developer_tribe/react-builder 1.2.1 → 1.2.3

package/dist/types/Node.d.ts

@@ -2,6 +2,7 @@ export type NodeDefaultAttribute = Record<string, unknown>;
 export type Node<T = NodeDefaultAttribute> = null | undefined | string | {} | Node<T>[] | NodeData<T>;
 export interface NodeData<T = Record<string, unknown>> {
     type: string;
+    sourceType?: string;
     children: Node<Record<string, unknown>>;
     attributes?: T;
     key?: string;

package/dist/utils/extractTextStyle/extractTextStyle.d.ts

@@ -0,0 +1,13 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import type { Fonts } from '../../types/Fonts';
+export type ExtractTextStyleOptions = {
+    appConfig?: AppConfig;
+    projectColors?: ProjectColors;
+    fonts?: Fonts;
+    onFontLoaded?: (fontFamily: string) => void;
+    onError?: (error: string) => void;
+};
+export declare function extractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractTextStyleOptions): import("react").CSSProperties;

package/dist/utils/extractTextStyle.d.ts

@@ -1,10 +1,2 @@
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-type ExtractTextStyleOptions = {
-    appConfig?: AppConfig;
-    projectColors?: ProjectColors;
-};
-export declare function extractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractTextStyleOptions): import("react").CSSProperties;
-export {};
+export type { ExtractTextStyleOptions } from './extractTextStyle/extractTextStyle';
+export { extractTextStyle } from './extractTextStyle/extractTextStyle';

package/dist/utils/extractViewStyle/extractViewStyle.d.ts

@@ -0,0 +1,8 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { ProjectColors } from '../../types/Project';
+export type ExtractViewStyleOptions = {
+    projectColors?: ProjectColors;
+    theme?: string;
+};
+export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;

package/dist/utils/extractViewStyle.d.ts

@@ -1,9 +1,2 @@
-import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-import type { NodeData } from '../types/Node';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-export type ExtractViewStyleOptions = {
-    appConfig?: AppConfig;
-    projectColors?: ProjectColors;
-};
-export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;
+export type { ExtractViewStyleOptions } from './extractViewStyle/extractViewStyle';
+export { extractViewStyle } from './extractViewStyle/extractViewStyle';

package/dist/utils/parseColor.d.ts

@@ -1,7 +1,6 @@
-import type { AppConfig } from '../types/PreviewConfig';
 import type { ProjectColors } from '../types/Project';
 export type ParseColorOptions = {
     projectColors?: ProjectColors;
-    appConfig?: AppConfig;
+    theme?: string;
 };
 export declare function parseColor(value?: string, options?: ParseColorOptions): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/src/RenderPage.tsx

@@ -5,6 +5,10 @@ import { RenderNode } from './build-components';
 import { useRenderStore } from './store';
 import { useLogRender } from './utils/useLogRender';
 import { findNodeByKeyNested } from './utils/findNodeByKeyNested';
+import {
+  BuilderProvider,
+  type BuilderProviderParams,
+} from './components/BuilderProvider';
 import type { NodeData } from './types/Node';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -14,6 +18,7 @@ interface RenderPageProps {
   data: Node;
   name: string;
   onSelectNode?: (node: Node | null) => void;
+  params: BuilderProviderParams;
 }
 
 function isNodeDataLike(value: unknown): value is NodeData {
@@ -59,7 +64,12 @@ function isEmptyPreview(node: Node): boolean {
   return false;
 }
 
-export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
+export function RenderPage({
+  data,
+  name,
+  onSelectNode,
+  params,
+}: RenderPageProps) {
   useLogRender('RenderPage');
   const { previewMode, forceRender, setCurrent, appFont } = useRenderStore(
     (s) => ({
@@ -109,26 +119,28 @@ export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
   }, [previewMode, data, onSelectNode, setCurrent, forceRender]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)
 
   return (
-    <DeviceMockFrame appName={name}>
-      <div
-        className="screen-preview"
-        ref={previewRootRef}
-        style={{
-          fontFamily: appFont ? `"${appFont}"` : undefined,
-        }}
-      >
-        <RenderNode node={data} />
-        {showEmptyState && (
-          <div className="rb-empty-preview" aria-hidden="true">
-            <div className="rb-empty-preview__card">
-              <div className="rb-empty-preview__title">Empty screen</div>
-              <div className="rb-empty-preview__hint">
-                Add a component to start
+    <BuilderProvider params={params}>
+      <DeviceMockFrame appName={name}>
+        <div
+          className="screen-preview"
+          ref={previewRootRef}
+          style={{
+            fontFamily: appFont ? `"${appFont}"` : undefined,
+          }}
+        >
+          <RenderNode node={data} />
+          {showEmptyState && (
+            <div className="rb-empty-preview" aria-hidden="true">
+              <div className="rb-empty-preview__card">
+                <div className="rb-empty-preview__title">Empty screen</div>
+                <div className="rb-empty-preview__hint">
+                  Add a component to start
+                </div>
               </div>
             </div>
-          </div>
-        )}
-      </div>
-    </DeviceMockFrame>
+          )}
+        </div>
+      </DeviceMockFrame>
+    </BuilderProvider>
   );
 }

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

@@ -1,36 +1,29 @@
 import React, { useId, useMemo } from 'react';
 import type { BIconComponentProps } from './BIconProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 
 function BIcon({ node }: BIconComponentProps) {
   useLogRender('BIcon');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'BIcon';
+  const attributeName = node.sourceType ?? node.type ?? 'BIcon';
   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 isSelected = isNodeSelected({ previewMode, current, node });
+  const baseStyle = useExtractTextStyle(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/BackgroundImage/BackgroundImage.tsx

@@ -1,8 +1,8 @@
 import React, { useId, useMemo } from 'react';
 import type { BackgroundImageComponentProps } from './BackgroundImageProps.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 { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -12,23 +12,12 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
   useLogRender('BackgroundImage');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'background-image';
+  const attributeName = node.sourceType ?? node.type ?? 'background-image';
   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 backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
     const style: React.CSSProperties = {
@@ -60,7 +49,11 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
 
     return style;
   }, [node]);
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const mergedStyle = useMergedStyle(baseStyle, backgroundStyle);
   const style = useMergedStyle(
     mergedStyle,

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

@@ -1,10 +1,10 @@
 import React, { useId, useMemo } from 'react';
 import type { ButtonComponentProps } from './ButtonProps.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 { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
@@ -13,33 +13,25 @@ function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'button';
+  const attributeName = node.sourceType ?? node.type ?? 'button';
   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 localize = useLocalize();
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const { previewMode, selectedKey, appConfig } = useBuilderParams();
+  const localize = useLocalize({ appConfig });
+  const baseStyle = useExtractViewStyle(node);
+  const combinedTextStyle = useExtractTextStyle(node);
   const textStyle = useMemo(() => {
-    const combined = extractTextStyle(node as any, {
-      appConfig,
-      projectColors,
-    });
     return {
-      color: combined.color,
-      fontSize: combined.fontSize,
-      fontWeight: combined.fontWeight,
-      textAlign: combined.textAlign,
+      color: combinedTextStyle.color,
+      fontSize: combinedTextStyle.fontSize,
+      fontWeight: combinedTextStyle.fontWeight,
+      textAlign: combinedTextStyle.textAlign,
     } as React.CSSProperties;
-  }, [node, appConfig, projectColors]);
+  }, [
+    combinedTextStyle.color,
+    combinedTextStyle.fontSize,
+    combinedTextStyle.fontWeight,
+    combinedTextStyle.textAlign,
+  ]);
   const buttonDefaults = useMemo(() => {
     const hasExplicitBackground =
       node?.attributes?.backgroundColor !== undefined &&
@@ -53,7 +45,11 @@ function Button({ node }: ButtonComponentProps) {
         : { backgroundColor: 'transparent' }),
     } as React.CSSProperties;
   }, [node?.attributes?.backgroundColor]);
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const withButtonDefaults = useMergedStyle(baseStyle, buttonDefaults);
   const style = useMergedStyle(
     withButtonDefaults,

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

@@ -3,9 +3,9 @@ import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
 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 { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
@@ -13,21 +13,15 @@ function Carousel({ node }: CarouselComponentProps) {
   useLogRender('Carousel');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'carousel';
+  const attributeName = node.sourceType ?? node.type ?? 'carousel';
   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 = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [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 style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

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

@@ -1,26 +1,17 @@
-import React, { useContext, useId, useMemo } from 'react';
+import React, { useContext, useId } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { useRenderStore } from '../../store';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   useLogRender('CarouselButtons');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'carouselButtons';
+  const attributeName = node.sourceType ?? node.type ?? 'carouselButtons';
   const attributeKey = node.key ?? generatedId;
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
-  const style = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const style = useExtractViewStyle(node);
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [
     'previous_button',

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

@@ -1,11 +1,10 @@
-import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useId, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 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';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
@@ -13,22 +12,14 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   node = useNode(node);
 
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'carouselDots';
+  const attributeName = node.sourceType ?? node.type ?? 'carouselDots';
   const attributeKey = node.key ?? generatedId;
 
   const dotType = node.attributes?.dotType || 'normal_dot';
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
-
-  const style = useMemo(() => {
-    return extractViewStyle(node, { appConfig, projectColors });
-  }, [node, appConfig, projectColors]);
+  const style = useExtractViewStyle(node);
 
   // Use the appropriate context based on sourceType
-  const isOnboard = (node as any)?.sourceType === 'OnboardDot';
+  const isOnboard = node.sourceType === 'OnboardDot';
   const carouselApi = useContext(carouselContext);
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;

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

@@ -1,26 +1,17 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { useRenderStore } from '../../store';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
   useLogRender('CarouselItem');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'carouselItem';
+  const attributeName = node.sourceType ?? node.type ?? 'carouselItem';
   const attributeKey = node.key ?? generatedId;
-  const { appConfig, projectColors } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    projectColors: s.projectColors,
-  }));
-  const style = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const style = useExtractViewStyle(node);
   return (
     <div
       className="embla__slide"

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

@@ -3,8 +3,7 @@ import type { CarouselProviderComponentProps } from './CarouselProviderProps.gen
 import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
-import { extractViewStyle } from '../../utils/extractViewStyle';
-import { useRenderStore } from '../../store';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { isCarousel } from '../../utils/isCarousel';
 import type { Node, NodeData } from '../../types/Node';
 
@@ -13,17 +12,9 @@ function CarouselProvider({ node }: CarouselProviderComponentProps) {
   node = useNode(node);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const generatedId = useId();
-  const attributeName =
-    (node as any)?.sourceType ?? node.type ?? 'carouselProvider';
+  const attributeName = node.sourceType ?? node.type ?? 'carouselProvider';
   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);
 
   const { carouselChild, otherChildren } = useMemo(() => {
     const children = node.children as Node;

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

@@ -1,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { extractImageStyle } from '../../utils/extractImageStyle';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
@@ -12,21 +12,19 @@ function Image({ node }: ImageComponentProps) {
   useLogRender('Image');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'image';
+  const attributeName = node.sourceType ?? node.type ?? 'image';
   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, projectColors } =
+    useBuilderParams();
   const imageStyle = useMemo(
-    () => extractImageStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
+    () => extractImageStyle(node, { theme: appConfig?.theme, projectColors }),
+    [node, appConfig?.theme, projectColors],
   );
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     imageStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

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

@@ -1,47 +1,35 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { MainComponentProps } from './MainProps.generated';
 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 { 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';
 import { useSafeAreaViewStyle } from '../../hooks/useSafeAreaViewStyle';
-import type { NodeData } from '../../types/Node';
-import { ViewPropsGenerated } from '../View/ViewProps.generated';
 
 function Main({ node }: MainComponentProps) {
   useLogRender('Main');
   node = useNode(node);
 
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'Main';
+  const attributeName = node.sourceType ?? node.type ?? 'Main';
   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 as NodeData<ViewPropsGenerated['attributes']>, {
-        appConfig,
-        projectColors,
-      }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node);
 
-  const useSafeAreaView = (node.attributes as any)?.useSafeAreaView ?? true;
+  const useSafeAreaView = node.attributes?.useSafeAreaView ?? true;
   const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     layoutStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,