@developer_tribe/react-builder 1.2.2 → 1.2.4

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

@@ -2,8 +2,12 @@ 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/extractViewStyle/extractViewStyle.d.ts

@@ -1,9 +1,8 @@
 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;
+    theme?: string;
 };
 export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;

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.2",
+  "version": "1.2.4",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/src/RenderPage.tsx

@@ -5,6 +5,11 @@ 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 { RenderErrorBoundary } from './components/RenderErrorBoundary';
 import type { NodeData } from './types/Node';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -14,6 +19,7 @@ interface RenderPageProps {
   data: Node;
   name: string;
   onSelectNode?: (node: Node | null) => void;
+  params: BuilderProviderParams;
 }
 
 function isNodeDataLike(value: unknown): value is NodeData {
@@ -59,7 +65,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 +120,30 @@ 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
+    <RenderErrorBoundary subtitle="caught by RenderPage">
+      <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>
-        )}
-      </div>
-    </DeviceMockFrame>
+        </DeviceMockFrame>
+      </BuilderProvider>
+    </RenderErrorBoundary>
   );
 }

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

@@ -1,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { BIconComponentProps } from './BIconProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -13,23 +13,17 @@ 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 = useExtractTextStyle(node as any, {
-    appConfig,
-    projectColors,
+  const baseStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
   });
-  const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

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

@@ -1,7 +1,7 @@
 import React, { useId, useMemo } from 'react';
 import type { BackgroundImageComponentProps } from './BackgroundImageProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
@@ -12,20 +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 = useExtractViewStyle(node, { appConfig, projectColors });
+  const baseStyle = useExtractViewStyle(node);
   const backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
     const style: React.CSSProperties = {
@@ -57,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,7 +1,7 @@
 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 { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
@@ -13,25 +13,12 @@ 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 = useExtractViewStyle(node as any, {
-    appConfig,
-    projectColors,
-  });
-  const combinedTextStyle = useExtractTextStyle(node as any, {
-    appConfig,
-    projectColors,
-  });
+  const { previewMode, selectedKey, appConfig } = useBuilderParams();
+  const localize = useLocalize({ appConfig });
+  const baseStyle = useExtractViewStyle(node);
+  const combinedTextStyle = useExtractTextStyle(node);
   const textStyle = useMemo(() => {
     return {
       color: combinedTextStyle.color,
@@ -58,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,7 +3,7 @@ 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 { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -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 = useExtractViewStyle(node as any, {
-    appConfig,
-    projectColors,
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractViewStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
   });
-  const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

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

@@ -4,20 +4,14 @@ import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useRenderStore } from '../../store';
 
 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 = useExtractViewStyle(node as any, { appConfig, projectColors });
+  const style = useExtractViewStyle(node);
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [
     'previous_button',

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

@@ -5,7 +5,6 @@ import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useRenderStore } from '../../store';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
@@ -13,20 +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 = useExtractViewStyle(node as any, { 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

@@ -4,20 +4,14 @@ import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useRenderStore } from '../../store';
 
 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 = useExtractViewStyle(node as any, { appConfig, projectColors });
+  const style = useExtractViewStyle(node);
   return (
     <div
       className="embla__slide"

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

@@ -4,7 +4,6 @@ import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
 import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
-import { useRenderStore } from '../../store';
 import { isCarousel } from '../../utils/isCarousel';
 import type { Node, NodeData } from '../../types/Node';
 
@@ -13,14 +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 = useExtractViewStyle(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,32 +1,26 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractImageStyle } from '../../utils/extractImageStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useExtractImageStyle } from '../../hooks/useExtractImageStyle';
 
 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 imageStyle = useMemo(
-    () => extractImageStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const { previewMode, selectedKey } = useBuilderParams();
+  const imageStyle = useExtractImageStyle(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

@@ -3,41 +3,33 @@ 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 { 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 = useExtractViewStyle(
-    node as NodeData<ViewPropsGenerated['attributes']>,
-    { 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,

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 { 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 = useExtractViewStyle(node as any, {
-    appConfig,
-    projectColors,
-  });
+  const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {
     //TODO: any ??

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

@@ -4,23 +4,19 @@ import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generat
 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 { 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 = useExtractViewStyle(node as any, {
-    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.