@developer_tribe/react-builder 1.2.28 → 1.2.30

package/src/attribute-analyser/style/web/useExtractViewStyle.ts

@@ -8,10 +8,10 @@ import { extractViewStyle } from '../../../utils/extractViewStyle';
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
 ): CSSProperties {
-  const { theme, projectColors } = useBuilderParams();
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
 
   return useMemo(
-    () => extractViewStyle(node, { theme, projectColors }),
-    [node, theme, projectColors],
+    () => extractViewStyle(node, { theme, projectColors, baseSize }),
+    [node, theme, projectColors, baseSize],
   );
 }

package/src/attributes-editor/AttributesEditorFields.tsx

@@ -5,7 +5,7 @@ import { IconPickerModal } from '../modals/IconPickerModal';
 import Modal from '../modals/Modal';
 import { loadFontFamily } from '../utils/loadFontFamily';
 import { fontsDebug } from '../utils/fontsDebug';
-import type { IconsType } from '../types/Icons';
+import type { IconsType } from '../types/Icons.generated';
 
 type IconTypePickerFieldProps = {
   name: string;

package/src/attributes-editor/attributesEditorModelTypes.ts

@@ -41,9 +41,6 @@ export type AttributesEditorModel = {
   isInvalidNode: boolean;
   baseData: NodeData<NodeDefaultAttribute>;
   data: NodeData<NodeDefaultAttribute>;
-
-  // store-derived
-  appConfig: unknown;
   projectFonts: Fonts;
   loadedFonts: string[] | undefined;
   markFontLoaded: (fontFamily: string) => void;

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -49,13 +49,11 @@ export function useAttributesEditorModel({
 
   const data = useNode(baseData);
   const {
-    appConfig,
     fonts: projectFonts,
     loadedFonts,
     markFontLoaded,
     addError,
   } = useRenderStore((state) => ({
-    appConfig: state.appConfig,
     fonts: state.fonts,
     loadedFonts: state.loadedFonts,
     markFontLoaded: state.markFontLoaded,
@@ -414,7 +412,6 @@ export function useAttributesEditorModel({
     isInvalidNode,
     baseData,
     data,
-    appConfig,
     projectFonts,
     loadedFonts,
     markFontLoaded,

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

@@ -6,7 +6,7 @@ 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 { IconsType } from '../../types/Icons.generated';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 
 function BIcon({ node }: BIconComponentProps) {

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

@@ -15,8 +15,8 @@ function Button({ node }: ButtonComponentProps) {
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'button';
   const attributeKey = node.key ?? generatedId;
-  const { previewMode, selectedKey, appConfig } = useBuilderParams();
-  const localize = useLocalize({ appConfig });
+  const { previewMode, selectedKey } = useBuilderParams();
+  const localize = useLocalize();
   const baseStyle = useExtractViewStyle(node);
   const combinedTextStyle = useExtractTextStyle(node);
   const textStyle = useMemo(() => {

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

@@ -51,7 +51,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
 
-  const { theme, projectColors } = useBuilderParams();
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
   const isDark = theme === 'dark';
   const inactiveDotColorBase = isDark
     ? GHOST_DOT_DARK_COLOR
@@ -70,12 +70,12 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   }, [inactiveDotColorBase, inactiveDotColorOverride, theme, projectColors]);
 
   const dotSizeCss = useMemo(() => {
-    const parsed = parseSize(dotThicknessRaw);
+    const parsed = parseSize(dotThicknessRaw, baseSize);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw]);
+  }, [dotThicknessRaw, baseSize]);
 
   const dotGapCss = useMemo((): string => {
     const px =

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

@@ -18,7 +18,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { theme, projectColors, appConfig } = useBuilderParams();
+  const { theme, projectColors } = useBuilderParams();
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
@@ -30,7 +30,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const attrRecord = toAttributeRecord(attrs);
   const styleBag = getStyleBag(attrs);
   const labelRaw = attrs?.labelKey ?? '';
-  const localize = useLocalize({ appConfig });
+  const localize = useLocalize();
   const label = localize(labelRaw);
 
   const flex = (attrRecord.flex ?? styleBag?.flex ?? 1) as number;

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

@@ -28,7 +28,13 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const { previewMode, selectedKey, theme, projectColors } = useBuilderParams();
+  const {
+    previewMode,
+    selectedKey,
+    mockTheme: theme,
+    projectColors,
+    baseSize,
+  } = useBuilderParams();
   const isDark = theme === 'dark';
 
   // OnboardDot specific attributes
@@ -76,12 +82,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
-    const parsed = parseSize(dotThicknessRaw);
+    const parsed = parseSize(dotThicknessRaw, baseSize);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw]);
+  }, [dotThicknessRaw, baseSize]);
   const dotGapCss = useMemo((): string => {
     // Prefer px math when possible; otherwise fall back to 10px/3.
     const px =

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

@@ -7,7 +7,7 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
-import { defaultAppConfig } from '../../types/PreviewConfig';
+import { defaultLocalization } from '../../types/PreviewConfig';
 import { parseColor } from '../../utils/parseColor';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
@@ -96,18 +96,17 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
   const {
-    appConfig: builderAppConfig,
+    localization: builderLocalization,
     theme,
     defaultLanguage,
     previewMode,
     selectedKey,
     projectColors: builderProjectColors,
   } = useBuilderParams();
-  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const localization = builderLocalization ?? defaultLocalization;
   const projectColors = builderProjectColors;
-  const { localication } = appConfig;
   const lang = defaultLanguage ?? 'en';
-  const t = (key?: string) => (key ? (localication?.[lang]?.[key] ?? key) : '');
+  const t = (key?: string) => (key ? (localization?.[lang]?.[key] ?? key) : '');
 
   const attrs = node?.attributes;
   const attrRecord = toAttributeRecord(attrs);

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

@@ -8,7 +8,7 @@ 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 { IconsType } from '../../types/Icons.generated';
 import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
 function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {

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

@@ -21,7 +21,7 @@ function PaywallSubscribeButton({
     node.sourceType ?? node.type ?? 'PaywallSubscribeButton';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, selectedKey, appConfig } = useBuilderParams();
+  const { previewMode, selectedKey } = useBuilderParams();
 
   const baseStyle = useExtractTextStyle(node);
 
@@ -35,7 +35,7 @@ function PaywallSubscribeButton({
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const localize = useLocalize({ appConfig });
+  const localize = useLocalize();
   const label =
     typeof node.children === 'string' && node.children.trim().length > 0
       ? node.children

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

@@ -17,7 +17,7 @@ function Text({ node }: TextComponentProps) {
   const attributeKey = node.key;
   const textRef = useRef<HTMLParagraphElement | null>(null);
   const [autoFontSizePx, setAutoFontSizePx] = useState<number | null>(null);
-  const { appConfig, previewMode, selectedKey } = useBuilderParams();
+  const { previewMode, selectedKey } = useBuilderParams();
   const keyOrText: string = node.children as string;
   const textStyle = useExtractTextStyle(node);
   const isSelected = isNodeSelected({
@@ -25,7 +25,7 @@ function Text({ node }: TextComponentProps) {
     current: selectedKey ? { key: selectedKey } : undefined,
     node,
   });
-  const localize = useLocalize({ appConfig });
+  const localize = useLocalize();
   const translateCounter = (node.attributes as Record<string, unknown>)
     ?.translateCounter as number | undefined;
 

package/src/build-components/index.generated.ts

@@ -0,0 +1,184 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export { default as RenderNode } from './RenderNode.generated';
+
+export { patterns } from './patterns.generated';
+
+export const allcomponentNames = [
+  'BIcon',
+  'BackgroundImage',
+  'Button',
+  'Carousel',
+  'CarouselButtons',
+  'CarouselDots',
+  'CarouselItem',
+  'CarouselProvider',
+  'CountDown',
+  'Image',
+  'Main',
+  'NavigationBarColor',
+  'Onboard',
+  'OnboardButton',
+  'OnboardButtons',
+  'OnboardDot',
+  'OnboardFooter',
+  'OnboardImage',
+  'OnboardItem',
+  'OnboardProvider',
+  'OnboardSubtitle',
+  'OnboardTitle',
+  'PaywallBackground',
+  'PaywallCloseButton',
+  'PaywallOptions',
+  'PaywallProvider',
+  'PaywallSubscribeButton',
+  'PriceTag',
+  'Pricing',
+  'Promo',
+  'RadioButton',
+  'Separator',
+  'StatusBarColor',
+  'Text',
+  'View',
+] as const;
+
+export type {
+  BIconPropsGenerated,
+  BIconComponentProps,
+} from './BIcon/BIconProps.generated';
+export type {
+  BackgroundImagePropsGenerated,
+  BackgroundImageComponentProps,
+} from './BackgroundImage/BackgroundImageProps.generated';
+export type {
+  ButtonPropsGenerated,
+  ButtonComponentProps,
+} from './Button/ButtonProps.generated';
+export type {
+  CarouselPropsGenerated,
+  CarouselComponentProps,
+} from './Carousel/CarouselProps.generated';
+export type {
+  CarouselButtonsPropsGenerated,
+  CarouselButtonsComponentProps,
+} from './CarouselButtons/CarouselButtonsProps.generated';
+export type {
+  CarouselDotsPropsGenerated,
+  CarouselDotsComponentProps,
+} from './CarouselDots/CarouselDotsProps.generated';
+export type {
+  CarouselItemPropsGenerated,
+  CarouselItemComponentProps,
+} from './CarouselItem/CarouselItemProps.generated';
+export type {
+  CarouselProviderPropsGenerated,
+  CarouselProviderComponentProps,
+} from './CarouselProvider/CarouselProviderProps.generated';
+export type {
+  CountDownPropsGenerated,
+  CountDownComponentProps,
+} from './CountDown/CountDownProps.generated';
+export type {
+  ImagePropsGenerated,
+  ImageComponentProps,
+} from './Image/ImageProps.generated';
+export type {
+  MainPropsGenerated,
+  MainComponentProps,
+} from './Main/MainProps.generated';
+export type {
+  NavigationBarColorPropsGenerated,
+  NavigationBarColorComponentProps,
+} from './NavigationBarColor/NavigationBarColorProps.generated';
+export type {
+  OnboardPropsGenerated,
+  OnboardComponentProps,
+} from './Onboard/OnboardProps.generated';
+export type {
+  OnboardButtonPropsGenerated,
+  OnboardButtonComponentProps,
+} from './OnboardButton/OnboardButtonProps.generated';
+export type {
+  OnboardButtonsPropsGenerated,
+  OnboardButtonsComponentProps,
+} from './OnboardButtons/OnboardButtonsProps.generated';
+export type {
+  OnboardDotPropsGenerated,
+  OnboardDotComponentProps,
+} from './OnboardDot/OnboardDotProps.generated';
+export type {
+  OnboardFooterPropsGenerated,
+  OnboardFooterComponentProps,
+} from './OnboardFooter/OnboardFooterProps.generated';
+export type {
+  OnboardImagePropsGenerated,
+  OnboardImageComponentProps,
+} from './OnboardImage/OnboardImageProps.generated';
+export type {
+  OnboardItemPropsGenerated,
+  OnboardItemComponentProps,
+} from './OnboardItem/OnboardItemProps.generated';
+export type {
+  OnboardProviderPropsGenerated,
+  OnboardProviderComponentProps,
+} from './OnboardProvider/OnboardProviderProps.generated';
+export type {
+  OnboardSubtitlePropsGenerated,
+  OnboardSubtitleComponentProps,
+} from './OnboardSubtitle/OnboardSubtitleProps.generated';
+export type {
+  OnboardTitlePropsGenerated,
+  OnboardTitleComponentProps,
+} from './OnboardTitle/OnboardTitleProps.generated';
+export type {
+  PaywallBackgroundPropsGenerated,
+  PaywallBackgroundComponentProps,
+} from './PaywallBackground/PaywallBackgroundProps.generated';
+export type {
+  PaywallCloseButtonPropsGenerated,
+  PaywallCloseButtonComponentProps,
+} from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+export type {
+  PaywallOptionsPropsGenerated,
+  PaywallOptionsComponentProps,
+} from './PaywallOptions/PaywallOptionsProps.generated';
+export type {
+  PaywallProviderPropsGenerated,
+  PaywallProviderComponentProps,
+} from './PaywallProvider/PaywallProviderProps.generated';
+export type {
+  PaywallSubscribeButtonPropsGenerated,
+  PaywallSubscribeButtonComponentProps,
+} from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
+export type {
+  PriceTagPropsGenerated,
+  PriceTagComponentProps,
+} from './PriceTag/PriceTagProps.generated';
+export type {
+  PricingPropsGenerated,
+  PricingComponentProps,
+} from './Pricing/PricingProps.generated';
+export type {
+  PromoPropsGenerated,
+  PromoComponentProps,
+} from './Promo/PromoProps.generated';
+export type {
+  RadioButtonPropsGenerated,
+  RadioButtonComponentProps,
+} from './RadioButton/RadioButtonProps.generated';
+export type {
+  SeparatorPropsGenerated,
+  SeparatorComponentProps,
+} from './Separator/SeparatorProps.generated';
+export type {
+  StatusBarColorPropsGenerated,
+  StatusBarColorComponentProps,
+} from './StatusBarColor/StatusBarColorProps.generated';
+export type {
+  TextPropsGenerated,
+  TextComponentProps,
+} from './Text/TextProps.generated';
+export type {
+  ViewPropsGenerated,
+  ViewComponentProps,
+} from './View/ViewProps.generated';

package/src/components/BottomBar.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Icon } from './Icon.generated';
-import type { IconsType } from '../types/Icons';
+import type { IconsType } from '../types/Icons.generated';
 import { useRenderStore } from '../store';
 import type { Localication } from '../types/PreviewConfig';
 import { InspectModal, LocalicationModal, Modal } from '../modals';
@@ -31,8 +31,8 @@ export function BottomBar({
   const inspectIcon: IconsType = 'info-circle';
 
   const {
-    appConfig,
-    setAppConfig,
+    localization,
+    setLocalization,
     theme,
     setTheme,
     defaultLanguage,
@@ -42,8 +42,8 @@ export function BottomBar({
     isRtl,
     setIsRtl,
   } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
+    localization: s.localization,
+    setLocalization: s.setLocalization,
     theme: s.theme,
     setTheme: s.setTheme,
     defaultLanguage: s.defaultLanguage,
@@ -62,7 +62,7 @@ export function BottomBar({
   const activeLanguage = defaultLanguage;
 
   const handleLocalicationChange = (next: Localication) => {
-    setAppConfig({ ...appConfig, localication: next });
+    setLocalization(next);
   };
 
   const themeIsActive = theme === 'dark';
@@ -170,7 +170,7 @@ export function BottomBar({
 
       {isLocalizationOpen && (
         <LocalicationModal
-          data={appConfig.localication ?? {}}
+          data={localization ?? {}}
           onChange={handleLocalicationChange}
           onClose={() => setIsLocalizationOpen(false)}
         />
@@ -191,8 +191,6 @@ export function BottomBar({
             description="Inspect and edit raw node JSON."
             previewMode={previewMode}
             setPreviewMode={setPreviewMode}
-            appConfig={appConfig}
-            setAppConfig={setAppConfig}
             logLabel="BottomBar Debug JSON"
           />
         </Modal>

package/src/components/BuilderProvider.tsx

@@ -2,10 +2,13 @@ import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import {
-  type AppConfig,
   type Theme,
   defaultLocalization,
   defaultTheme,
+  type Localication,
+  defaultBaseSize,
+  type BaseSize,
+  defaultLanguage,
   mergeLocalization,
 } from '../types/PreviewConfig';
 import type { Fonts } from '../types/Fonts';
@@ -19,8 +22,7 @@ import { defaultProjectColors, mergeProjectColors } from '../utils';
 export type Products = Product;
 
 export type BuilderProviderParams = {
-  mockProducts: Products[];
-  mockBenefits: PaywallBenefits;
+  // Props that are NOT in store (or are platform specific overrides)
   /**
    * Render platform for style extraction + meta filtering.
    * - 'web' (default): returns CSS-friendly styles for DOM rendering.
@@ -28,22 +30,25 @@ export type BuilderProviderParams = {
    */
   platform?: 'web' | 'native';
   onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
-  /**
-   * Optional runtime config + styling inputs.
-   * These are intentionally passed down via BuilderProvider so `build-components`
-   * never need to touch `useRenderStore`.
-   */
-  theme?: Theme;
-  defaultLanguage?: string;
-  appConfig?: AppConfig;
+
+  // Optional overrides for store values (though usually store is source of truth)
+  // We keep these in type for backwards compatibility or explicit overrides if needed,
+  // but internally we prefer store values.
+  mockProducts?: Products[];
+  mockBenefits?: PaywallBenefits;
+  mockTheme?: Theme;
+  mockDefaultLanguage?: string;
+  localization?: Localication;
+  baseSize?: BaseSize;
+  // projectColors, fonts, previewMode, selectedKey kept as they are commonly used and not explicitly asked to rename
   projectColors?: ProjectColors;
   fonts?: Fonts;
-  appFont?: string | undefined;
-  /**
-   * Optional selection info (used by builder UI; ignored by host runtime).
-   */
   previewMode?: boolean;
   selectedKey?: string;
+
+  // Derived / Convenience values provided by the context (populated from mock* if present)
+  theme?: Theme;
+  defaultLanguage?: string;
 };
 
 type BuilderProviderProps = {
@@ -56,65 +61,29 @@ const builderContext = createContext<BuilderProviderParams | undefined>(
 );
 
 export function BuilderProvider({ params, children }: BuilderProviderProps) {
-  const value = useMemo<BuilderProviderParams>(
-    () => ({
-      mockProducts: Array.isArray(params?.mockProducts)
-        ? params.mockProducts
-        : [],
-      mockBenefits:
-        params?.mockBenefits && typeof params.mockBenefits === 'object'
-          ? (params.mockBenefits as PaywallBenefits)
-          : {},
-      onPaywallSubscribe:
-        typeof params?.onPaywallSubscribe === 'function'
-          ? params.onPaywallSubscribe
-          : undefined,
-      theme:
-        params?.theme === 'light' || params?.theme === 'dark'
-          ? params.theme
-          : defaultTheme,
-      defaultLanguage:
-        typeof params?.defaultLanguage === 'string'
-          ? params.defaultLanguage
-          : 'en',
-      appConfig:
-        params?.appConfig && typeof params.appConfig === 'object'
-          ? {
-              ...(params.appConfig as AppConfig),
-              localication: mergeLocalization(
-                defaultLocalization,
-                (params.appConfig as AppConfig).localication ?? {},
-              ),
-            }
-          : undefined,
-      projectColors:
-        params?.projectColors && typeof params.projectColors === 'object'
-          ? mergeProjectColors(defaultProjectColors, params.projectColors)
-          : defaultProjectColors,
-      fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
-      appFont: params?.appFont,
-      platform: params?.platform === 'native' ? 'native' : 'web',
-      previewMode: !!params?.previewMode,
-      selectedKey:
-        typeof params?.selectedKey === 'string'
-          ? params.selectedKey
-          : undefined,
-    }),
-    [
-      params?.mockBenefits,
-      params?.mockProducts,
-      params?.platform,
-      params?.onPaywallSubscribe,
-      params?.theme,
-      params?.defaultLanguage,
-      params?.appConfig,
-      params?.projectColors,
-      params?.fonts,
-      params?.appFont,
-      params?.previewMode,
-      params?.selectedKey,
-    ],
-  );
+  // We rely purely on params passed from parent (which reads from store)
+  const value = useMemo<BuilderProviderParams>(() => {
+    const theme = params.mockTheme ?? defaultTheme;
+    const lang = params.mockDefaultLanguage ?? defaultLanguage;
+    return {
+      ...params,
+      // Ensure defaults if missing
+      mockProducts: params.mockProducts ?? [],
+      mockBenefits: params.mockBenefits ?? {},
+      mockTheme: theme,
+      mockDefaultLanguage: lang,
+      theme,
+      defaultLanguage: lang,
+      baseSize: params.baseSize ?? defaultBaseSize,
+      projectColors: params.projectColors
+        ? mergeProjectColors(defaultProjectColors, params.projectColors)
+        : defaultProjectColors,
+      localization: params.localization
+        ? mergeLocalization(defaultLocalization, params.localization)
+        : defaultLocalization,
+      platform: params.platform ?? 'web',
+    };
+  }, [params]);
 
   return (
     <builderContext.Provider value={value}>{children}</builderContext.Provider>
@@ -122,14 +91,8 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
 }
 
 export function useBuilderParams(): Readonly<BuilderProviderParams> {
-  return (
-    useContext(builderContext) ?? {
-      mockProducts: [],
-      mockBenefits: {},
-      platform: 'web',
-      theme: defaultTheme,
-      defaultLanguage: 'en',
-      projectColors: defaultProjectColors,
-    }
-  );
+  const ctx = useContext(builderContext);
+  if (ctx) return ctx;
+
+  throw new Error('useBuilderParams must be used within BuilderProvider');
 }

package/src/components/EditorHeader.tsx

@@ -37,13 +37,15 @@ export function EditorHeader({
     device: selectedDevice,
     setDevice,
     setCurrent,
-    setAppConfig,
+    setLocalization,
+    setBaseSize,
     setProjectColors,
   } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
     setCurrent: s.setCurrent,
-    setAppConfig: s.setAppConfig,
+    setLocalization: s.setLocalization,
+    setBaseSize: s.setBaseSize,
     setProjectColors: s.setProjectColors,
   }));
 
@@ -143,7 +145,8 @@ export function EditorHeader({
     const next = repairNodeKeys(cloneNode(sample.data));
     setEditorData(next);
     setCurrent(next);
-    if (sample.appConfig) setAppConfig(sample.appConfig);
+    if (sample.localization) setLocalization(sample.localization);
+    if (sample.baseSize) setBaseSize(sample.baseSize);
     setProjectColors(sample.projectColors);
     toast.success(`Replaced with "${sample.name}"`);
   };