@developer_tribe/react-builder 1.2.28 → 1.2.30

package/dist/logger.d.ts

@@ -5,14 +5,11 @@
  * This minimal version keeps product-base compilable in the builder context.
  */
 type LogPayload = Record<string, unknown>;
-type LogOptions = {
-    remote?: boolean;
-};
 declare function noop(): void;
 export declare const iapLogger: {
-    error(_tags: string[], message: string, payload?: LogPayload, _opts?: LogOptions): void;
-    warn(_tags: string[], message: string, payload?: LogPayload, _opts?: LogOptions): void;
-    info(_tags: string[], message: string, payload?: LogPayload, _opts?: LogOptions): void;
+    error(_tags: string[], message: string, payload?: LogPayload): void;
+    warn(_tags: string[], message: string, payload?: LogPayload): void;
+    info(_tags: string[], message: string, payload?: LogPayload): void;
     debug: typeof noop;
 };
 export {};

package/dist/modals/IconPickerModal.d.ts

@@ -1,4 +1,4 @@
-import { type IconsType } from '../types/Icons';
+import { type IconsType } from '../types/Icons.generated';
 type IconPickerModalProps = {
     value?: IconsType;
     onSelect: (icon: IconsType) => void;

package/dist/pages/DebugJsonPage.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { Node } from '../types/Node';
-import type { AppConfig } from '../types/PreviewConfig';
 export type DebugJsonPageProps = {
     data: Node | null | undefined;
     setData: React.Dispatch<React.SetStateAction<Node>>;
@@ -10,8 +9,6 @@ export type DebugJsonPageProps = {
     description?: string;
     previewMode?: boolean;
     setPreviewMode?: (next: boolean) => void;
-    appConfig?: AppConfig;
-    setAppConfig?: (next: AppConfig) => void;
     logLabel?: string;
 };
-export declare function DebugJsonPage({ data, setData, project, onClose, title, description, previewMode, setPreviewMode, appConfig, setAppConfig, logLabel, }: DebugJsonPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function DebugJsonPage({ data, setData, project, onClose, title, description, previewMode, setPreviewMode, logLabel, }: DebugJsonPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/product-base/index.d.ts

@@ -25,3 +25,27 @@ export * from './extractAndroidParams';
 export * from './extractIOSParams';
 export * from './buildPaywallLocalizationParams';
 export * from './usePaywallLocalizationParams';
+import type { Product } from './types';
+/** Preset map: preset key → product array. */
+export type MockProductPresets = Record<string, Product[]>;
+/**
+ * Returns a deep-copy of all mock product presets.
+ *
+ * Use this instead of importing `mockProducts.json` directly so that:
+ * 1. Consumers don't couple to a JSON file path.
+ * 2. Each call returns a fresh copy (safe to mutate).
+ *
+ * @example
+ * import { getMockProducts } from '@developer_tribe/react-builder';
+ * const presets = getMockProducts(); // { 'preset-1': [...], ... }
+ */
+export declare function getMockProducts(): MockProductPresets;
+/**
+ * Returns the product list for a specific preset key (deep-copied).
+ * Returns an empty array if the key doesn't exist.
+ *
+ * @example
+ * import { getMockProductsByPreset } from '@developer_tribe/react-builder';
+ * const products = getMockProductsByPreset('preset-1');
+ */
+export declare function getMockProductsByPreset(presetKey: string): Product[];

package/dist/size-matters/index.d.ts

@@ -1,6 +1,15 @@
-export declare function scale(size: number): number;
-export declare function verticalScale(size: number): number;
-export declare const s: typeof scale;
-export declare const vs: typeof verticalScale;
-export declare const fs: typeof verticalScale;
-export declare function parseSize(value?: string | number): string | number | undefined;
+import { type BaseSize } from '../types/PreviewConfig';
+import type { Device } from '../types/Device';
+/**
+ * Calculates scaling factors based on baseSize and current device dimensions.
+ */
+export declare function getScalers(customBaseSize?: BaseSize, customDevice?: Device): {
+    scale: (size: number) => number;
+    verticalScale: (size: number) => number;
+    moderateScale: (size: number, factor?: number) => number;
+};
+export declare const s: (size: number) => number;
+export declare const vs: (size: number) => number;
+export declare const fs: (size: number) => number;
+export declare const ms: (size: number, factor?: number) => number;
+export declare function parseSize(value: string | number | undefined, baseSize?: BaseSize, device?: Device): string | number | undefined;

package/dist/store.d.ts

@@ -1,5 +1,5 @@
 import type { Device } from './types/Device';
-import { type AppConfig, type Theme } from './types/PreviewConfig';
+import { type BaseSize, type Localication, type Theme } from './types/PreviewConfig';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
 import type { Product } from './paywall/types/paywall-types';
@@ -16,14 +16,16 @@ type RenderStore = {
     incForceRender: () => void;
     device: Device;
     setDevice: (device: Device) => void;
-    appConfig: AppConfig;
-    setAppConfig: (appConfig: AppConfig) => void;
+    baseSize: BaseSize;
+    setBaseSize: (baseSize: BaseSize) => void;
     projectColors?: ProjectColors;
     setProjectColors: (projectColors?: ProjectColors) => void;
     theme: Theme;
     setTheme: (theme: Theme) => void;
     defaultLanguage: string;
     setDefaultLanguage: (lang: string) => void;
+    localization: Localication;
+    setLocalization: (localization: Localication) => void;
     isRtl: boolean;
     setIsRtl: (isRtl: boolean) => void;
     previewMode: boolean;

package/dist/types/Icons.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const Icons: readonly ["activity", "activity-heart", "alert-circle", "alert-triangle", "anchor", "archive", "arrow-down", "arrow-left", "arrow-narrow-down-left", "arrow-narrow-up-right", "arrow-right", "arrow-right-smooth", "asterisk-01", "asterisk-02", "at-sign", "award", "battery-charging", "bell-01", "bell-02", "bell-ringing-02", "bookmark", "bookmark-add", "bookmark-check", "bookmark-minus", "bookmark-x", "bubble", "building-01", "building-02", "building-03", "building-04", "building-05", "building-06", "building-07", "building-08", "building-09", "camera", "camera-01", "camera-steel", "check", "check-circle", "check-circle-bold", "check-circle-broken", "check-done-01", "check-done-02", "check-heart", "check-square", "check-square-broken", "check-verified-01", "check-verified-02", "check-verified-03", "checkbox", "checkv", "chevron-down", "chevron-down2", "chevron-left", "chevron-left-2", "chevron-right", "chevron-right-empty", "chevron-right-smooth", "chevron-up", "circle", "clock", "clock-fast-forward", "close", "close-circle", "cloud-01", "cloud-blank-01", "cloud-blank-02", "coin", "coins-02", "colors", "copy-01", "copy-02", "copy-03", "copy-04", "copy-05", "copy-06", "copy-07", "corner-down-right", "crypto-bold", "delete-icon", "diamond", "dice-3", "divide-01", "divide-02", "divide-03", "document-check-bold", "dots-circle", "dots-grid", "dots-horizontal", "dots-vertical", "download-01", "download-02", "download-03", "edit-03", "edit-04", "edit-05", "element-3", "ellipse-127", "exclaimation-circle", "eye-off-line", "face-smile", "file-04", "file-05", "file-check-02", "file-plus-01", "file-shield-02", "filter-funnel-01", "flag-03", "flash", "folder", "folder-plus", "gallery", "globe-01", "globe-04", "globe-bold", "guard", "headphones-01", "headphones-02", "headset-bold", "heart", "heart-bold", "help-circle", "home-2", "home-line", "hourglass-02", "image", "image-01", "image-03", "inbox-01", "inbox-arrow-down", "info-circle", "keyboard-line", "lamp-charge", "layer", "light", "like-dislike", "lock-03", "logout", "magicpen", "mail", "mail-01", "marker", "medal-star", "menu", "menu-04", "message-circle-01", "message-plus-circle", "message-question-circle", "message-text-circle-01", "message-text-square-02", "message-x-square", "microphone-02", "microphone-slash", "mirror", "moon-01", "moon-bold", "mouse-circle", "move", "notification", "notification-fill", "notification-text", "pdf-01", "pencil-01", "phone", "phone-01", "phone-arrow-down-left", "phone-arrow-up-right", "phone-hang-up", "phone-hangup2", "phone-incoming-01", "phone-outgoing-01", "phone-plus", "phone-x", "plus", "plus-circle", "printer", "question-mark-circle", "refresh-ccw-01", "refresh-cw-01", "refresh-cw-04", "refresh-right-square-bold", "remove-circle", "repeat-04", "repeat-bold", "ruler-pen", "search", "search-lg", "search-md", "search-refraction", "send-01", "send-02", "send-diagonal", "setting-2", "settings", "settings-02", "settings-04", "settings-2", "settings-cog", "share-01", "share-03", "share-04", "share-05", "share-06", "share-bold", "shield-01", "shield-bold", "solar-check", "speaker", "speaker-wave", "speedometer-03", "star", "star-rounded", "sun", "target-03", "text-input", "translate", "trash", "trash-02", "trash-03", "trash-04", "trush-square-bold", "unlimited", "user-circle", "user-jogging", "user-plus-01", "user-square", "user-x-01", "user-x-02", "user2", "users-02", "users-speaker", "verify", "voice-cricle", "x-circle", "x-close", "x-sm", "zap"];
+export type IconsType = (typeof Icons)[number];

package/dist/types/PreviewConfig.d.ts

@@ -1,11 +1,4 @@
 export type Theme = 'light' | 'dark';
-export interface AppConfig {
-    localication: Localication;
-    baseSize: {
-        width: number;
-        height: number;
-    };
-}
 export type LocalizationKey = 'base.builder.paywall.period.monthly' | 'base.builder.paywall.period.annual' | 'base.builder.paywall.period.weekly' | 'base.builder.paywall.period.daily' | 'base.builder.paywall.period.monthlyPromo' | 'base.builder.paywall.period.annualPromo' | 'base.builder.paywall.pricing.default.text' | 'base.builder.paywall.pricing.freeTrial.text' | 'base.builder.paywall.pricing.regular.text' | 'base.builder.paywall.promo.default.text' | 'base.builder.paywall.promo.freeTrial.text' | 'base.builder.paywall.promo.regular.text' | 'onboard.title.one-page' | 'onboard.title.two-page' | 'onboard.title.three-page' | 'onboard.title.four-page' | 'onboard.title.one-page2' | 'onboard.title.two-page2' | 'onboard.title.three-page2' | 'onboard.title.four-page2' | 'onboard.subtitle.one-page' | 'onboard.subtitle.two-page' | 'onboard.subtitle.three-page' | 'onboard.subtitle.four-page' | 'onboard.subtitle.one-page2' | 'onboard.subtitle.two-page2' | 'onboard.subtitle.three-page2' | 'onboard.subtitle.four-page2' | 'onboard.next.one-page' | 'onboard.next.two-page' | 'onboard.next.three-page' | 'onboard.skip.one-page' | 'onboard.skip.two-page' | 'onboard.skip.three-page' | 'onboard.allow.four-page' | 'view.onboarding.footer.description' | 'view.onboarding.btnPrivacy' | 'view.onboarding.btnTerms' | (string & {});
 export type Localication = Record<string, Partial<Record<LocalizationKey, string>>>;
 export declare const defaultLocalization: Localication;
@@ -15,4 +8,9 @@ export declare const defaultLocalization: Localication;
  */
 export declare function mergeLocalization(base: Localication, custom: Localication): Localication;
 export declare const defaultTheme: Theme;
-export declare const defaultAppConfig: AppConfig;
+export type BaseSize = {
+    width: number;
+    height: number;
+};
+export declare const defaultBaseSize: BaseSize;
+export declare const defaultLanguage = "en";

package/dist/types/Project.d.ts

@@ -1,5 +1,5 @@
 import { Node } from '../types/Node';
-import { AppConfig } from './PreviewConfig';
+import { BaseSize, Localication } from './PreviewConfig';
 export type ProjectColorTokenMap = Record<string, string>;
 export type ProjectThemeColors = {
     light?: ProjectColorTokenMap;
@@ -19,7 +19,8 @@ export interface ProjectBase<T> {
      */
     type?: 'paywall' | 'onboard' | 'other';
     data: T;
-    appConfig?: AppConfig;
+    baseSize?: BaseSize;
+    localization?: Localication;
     projectColors?: ProjectColors;
 }
 export interface Project extends ProjectBase<Node> {
@@ -27,7 +28,7 @@ export interface Project extends ProjectBase<Node> {
 /**
  * Lightweight subset of Project containing only the essential metadata
  * needed for persistence (name, version, type, data).
- * Excludes runtime/editor-only fields like appConfig and projectColors.
+ * Excludes runtime/editor-only fields like projectColors.
  */
 export type ProjectMeta = Pick<Project, 'name' | 'version' | 'type' | 'data'>;
 export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';

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

@@ -3,6 +3,7 @@ import type { TextPropsGenerated } from '../../build-components/Text/TextProps.g
 import type { Theme } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import type { Fonts } from '../../types/Fonts';
+import type { BaseSize } from '../../types/PreviewConfig';
 export type ExtractTextStyleOptions = {
     theme?: Theme;
     projectColors?: ProjectColors;
@@ -10,5 +11,6 @@ export type ExtractTextStyleOptions = {
     onFontLoaded?: (fontFamily: string) => void;
     onError?: (error: string) => void;
     directlyTextStyle?: boolean;
+    baseSize?: BaseSize;
 };
 export declare function extractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractTextStyleOptions): import("react").CSSProperties;

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

@@ -3,10 +3,12 @@ import type { TextPropsGenerated } from '../../build-components/Text/TextProps.g
 import type { Theme } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import type { Fonts } from '../../types/Fonts';
+import type { BaseSize } from '../../types/PreviewConfig';
 export type ExtractTextStyleNativeOptions = {
     theme?: Theme;
     projectColors?: ProjectColors;
     fonts?: Fonts;
+    baseSize?: BaseSize;
 };
 /**
  * React Native-friendly text style extraction.

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

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

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

@@ -1,9 +1,11 @@
 import type { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
 import type { NodeData } from '../../types/Node';
 import type { ProjectColors } from '../../types/Project';
+import type { BaseSize } from '../../types/PreviewConfig';
 export type ExtractViewStyleNativeOptions = {
     projectColors?: ProjectColors;
     theme?: string;
+    baseSize?: BaseSize;
 };
 /**
  * Extracts a React Native-friendly style object from node attributes.

package/package.json

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

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -25,6 +25,7 @@ async function getAllEntriesInComponentsRoot(paths) {
           d.name !== 'getDefaults.ts' &&
           d.name !== 'useDefaults.ts' &&
           d.name !== 'useNode.ts' &&
+          d.name !== 'index.generated.ts' &&
           d.name !== 'patterns.generated.ts'
       );
     });
@@ -174,15 +175,17 @@ async function validatePatternJson(componentDir, componentName) {
     const patternDefaults = isPlainObject(source?.pattern?.defaults)
       ? source.pattern.defaults
       : {};
-    const directDefaults = isPlainObject(source?.defaults) ? source.defaults : {};
+    const directDefaults = isPlainObject(source?.defaults)
+      ? source.defaults
+      : {};
     const combined = { ...patternDefaults, ...directDefaults };
-    
+
     // Convert legacy `style` to `styles` (schemaVersion 2)
     if (isPlainObject(combined.style)) {
       combined.styles = { ...(combined.styles || {}), ...combined.style };
       delete combined.style;
     }
-    
+
     return combined;
   };
 
@@ -358,17 +361,24 @@ async function validatePatternJson(componentDir, componentName) {
     const mergedTypes = { ...(parentData.types || {}), ...(data.types || {}) };
     const parentDefaults = buildDefaultsBlock(parentData);
     const childDefaults = buildDefaultsBlock(data);
-    
+
     // Deep-merge `styles` from both parent and child (already converted from legacy `style` by buildDefaultsBlock)
-    const parentDefaultStyles = isPlainObject(parentDefaults?.styles) ? parentDefaults.styles : {};
-    const childDefaultStyles = isPlainObject(childDefaults?.styles) ? childDefaults.styles : {};
-    const mergedDefaultStyles = { ...parentDefaultStyles, ...childDefaultStyles };
-    
+    const parentDefaultStyles = isPlainObject(parentDefaults?.styles)
+      ? parentDefaults.styles
+      : {};
+    const childDefaultStyles = isPlainObject(childDefaults?.styles)
+      ? childDefaults.styles
+      : {};
+    const mergedDefaultStyles = {
+      ...parentDefaultStyles,
+      ...childDefaultStyles,
+    };
+
     const mergedDefaults = {
       ...parentDefaults,
       ...childDefaults,
     };
-    
+
     // Set merged styles if there are any
     if (Object.keys(mergedDefaultStyles).length > 0) {
       mergedDefaults.styles = mergedDefaultStyles;

package/src/RenderPage.tsx

@@ -1,15 +1,15 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { DeviceMockFrame } from './DeviceMockFrame';
 import { Node } from './types/Node';
 import { RenderNode } from './build-components';
 import { useRenderStore } from './store';
 import { useLogRender } from './utils/useLogRender';
-import { findNodeByKeyNested } from './utils/findNodeByKeyNested';
 import {
   BuilderProvider,
-  type BuilderProviderParams,
+  BuilderProviderParams,
 } from './components/BuilderProvider';
 import { RenderErrorBoundary } from './components/RenderErrorBoundary';
+import { usePreviewSelection } from './hooks/usePreviewSelection';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -18,7 +18,12 @@ interface RenderPageProps {
   data: Node;
   name: string;
   onSelectNode?: (node: Node | null) => void;
-  params: BuilderProviderParams;
+  /**
+   * Optional overrides for the builder provider.
+   * Useful for debug views or isolated rendering where we want to Inject
+   * specific mocks (products, benefits) instead of reading from the global store.
+   */
+  params?: Partial<BuilderProviderParams>;
 }
 
 function isNullish(value: unknown): value is null | undefined {
@@ -32,65 +37,69 @@ export function RenderPage({
   params,
 }: RenderPageProps) {
   useLogRender('RenderPage');
-  const { previewMode, forceRender, setCurrent, appFont } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      forceRender: s.forceRender,
-      setCurrent: s.setCurrent,
-      appFont: s.appFont,
-    }),
-  );
+  const {
+    products,
+    benefits,
+    mockTheme,
+    mockDefaultLanguage,
+    overrideLocalization,
+    overrideBaseSize,
+    overrideProjectColors,
+    overrideFonts,
+    appFont,
+    previewMode,
+    current,
+    forceRender,
+    setCurrent,
+  } = useRenderStore((s) => ({
+    products: s.products,
+    benefits: s.benefits,
+    mockTheme: s.theme,
+    mockDefaultLanguage: s.defaultLanguage,
+    overrideLocalization: s.localization,
+    overrideBaseSize: s.baseSize,
+    overrideProjectColors: s.projectColors,
+    overrideFonts: s.fonts,
+    appFont: s.appFont,
+    previewMode: s.previewMode,
+    current: s.current,
+    forceRender: s.forceRender,
+    setCurrent: s.setCurrent,
+  }));
   const previewRootRef = useRef<HTMLDivElement | null>(null);
   const showEmptyState = isNullish(data);
 
-  useEffect(() => {
-    if (!previewMode) {
-      return;
-    }
-
-    const root = previewRootRef.current;
-    if (!root) {
-      return;
-    }
-
-    const handleClick = (event: MouseEvent) => {
-      const target = event.target as HTMLElement | null;
-
-      if (!target) return;
-
-      // Ignore clicks on carousel dots to avoid interfering with navigation
-      if (target.closest('.embla__dot')) {
-        return;
-      }
-
-      // Some build-components may attach synthetic keys (e.g. React `useId()`),
-      // which are not present in the persisted node tree. Walk up until we find
-      // an attribute-key that resolves to a real node.
-      let element = target.closest('[attribute-key]') as HTMLElement | null;
-      while (element) {
-        const key = element.getAttribute('attribute-key');
-        if (key) {
-          const node = findNodeByKeyNested(data, key);
-          if (node) {
-            setCurrent(node);
-            onSelectNode?.(node);
-            return;
-          }
-        }
-        element = element.parentElement?.closest('[attribute-key]') ?? null;
-      }
-    };
-
-    root.addEventListener('click', handleClick);
-
-    return () => {
-      root.removeEventListener('click', handleClick);
-    };
-  }, [previewMode, data, onSelectNode, setCurrent, forceRender]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)
+  usePreviewSelection({
+    previewMode: !!previewMode,
+    data,
+    rootRef: previewRootRef,
+    onSelectNode,
+    setCurrent,
+    forceRender,
+  });
 
   return (
     <RenderErrorBoundary subtitle="caught by RenderPage">
-      <BuilderProvider params={params}>
+      <BuilderProvider
+        params={{
+          // Store defaults
+          mockTheme: mockTheme,
+          mockDefaultLanguage: mockDefaultLanguage,
+          localization: overrideLocalization,
+          baseSize: overrideBaseSize,
+          mockProducts: products,
+          mockBenefits: benefits as any,
+          projectColors: overrideProjectColors ?? undefined,
+          fonts: overrideFonts,
+          previewMode: previewMode,
+          selectedKey:
+            current && typeof current === 'object' && 'key' in current
+              ? ((current as any).key as string)
+              : undefined,
+          // Explicit overrides take precedence
+          ...params,
+        }}
+      >
         <DeviceMockFrame appName={name}>
           <div
             className="screen-preview"

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.27"
+  "reactBuilderVersion": "1.2.29"
 }

package/src/assets/samples/carousel-sample.json

@@ -280,9 +280,7 @@
                 {
                   "type": "carouselButtons",
                   "attributes": {
-                    "buttonType": [
-                      "previous_button"
-                    ],
+                    "buttonType": ["previous_button"],
                     "styles": {
                       "backgroundColor": "#6366f1",
                       "borderRadius": 12,
@@ -295,9 +293,7 @@
                 {
                   "type": "carouselButtons",
                   "attributes": {
-                    "buttonType": [
-                      "next_button"
-                    ],
+                    "buttonType": ["next_button"],
                     "styles": {
                       "backgroundColor": "#8b5cf6",
                       "borderRadius": 12,

package/src/assets/samples/getSamples.ts

@@ -20,13 +20,23 @@ import vpnOnboard4 from './vpn-onboard-4.json';
 import vpnOnboard5 from './vpn-onboard-5.json';
 import vpnOnboard6 from './vpn-onboard-6.json';
 import vpnOnboard7 from './vpn-onboard-7.json';
-import { defaultAppConfig } from '../../types/PreviewConfig';
+import {
+  defaultBaseSize,
+  defaultLocalization,
+} from '../../types/PreviewConfig';
 
 function normalizeSample(sample: any): Project {
-  return {
+  // Legacy migration: extract baseSize/localization from appConfig if present
+  const legacyConfig = sample.appConfig || {};
+  const project = {
     ...sample,
-    appConfig: { ...defaultAppConfig, ...(sample as any).appConfig },
-  } as Project;
+    baseSize: legacyConfig.baseSize || sample.baseSize || defaultBaseSize,
+    localization:
+      legacyConfig.localization || sample.localization || defaultLocalization,
+  };
+  // Ensure appConfig is removed if it existed
+  delete project.appConfig;
+  return project as Project;
 }
 
 export function getSamples(): Project[] {

package/src/attribute-analyser/style/native/useExtractImageStyle.ts

@@ -22,13 +22,13 @@ export function useExtractImageStyle<
   style: ImageStyle;
   other: Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType };
 } {
-  const { theme, projectColors } = useBuilderParams();
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
 
   return useMemo(() => {
     // extractImageStyleNative returns Record<string, unknown> that may include resizeMode.
     // In RN, resizeMode is typically an Image prop, not a style property.
     const { resizeMode: resizeModeFromStyle, ...style } =
-      extractImageStyleNative(node, { theme, projectColors });
+      extractImageStyleNative(node, { theme, projectColors, baseSize });
 
     const attrs = node.attributes;
     const stripped = stripStyleKeys(toAttributeRecord(attrs));
@@ -45,5 +45,5 @@ export function useExtractImageStyle<
         resizeMode,
       } as Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType },
     };
-  }, [node, theme, projectColors]);
+  }, [node, theme, projectColors, baseSize]);
 }

package/src/attribute-analyser/style/native/useExtractTextStyle.ts

@@ -20,7 +20,12 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
     showEllipsis?: boolean;
   };
 } {
-  const { theme, projectColors, fonts } = useBuilderParams();
+  const {
+    mockTheme: theme,
+    projectColors,
+    fonts,
+    baseSize,
+  } = useBuilderParams();
 
   return useMemo(
     () => {
@@ -28,6 +33,7 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
         theme,
         projectColors,
         fonts,
+        baseSize,
       });
 
       const attrs = node.attributes;
@@ -51,6 +57,6 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
       };
     },
     // fonts is intentionally included: extractTextStyleNative resolves weights via font definitions.
-    [node, theme, projectColors, fonts],
+    [node, theme, projectColors, fonts, baseSize],
   );
 }

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

@@ -17,10 +17,14 @@ export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   style: ViewStyle;
   other: Omit<T, StyleAttrKey> & { scrollable?: boolean };
 } {
-  const { theme, projectColors } = useBuilderParams();
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
 
   return useMemo(() => {
-    const style = extractViewStyleNative(node, { theme, projectColors });
+    const style = extractViewStyleNative(node, {
+      theme,
+      projectColors,
+      baseSize,
+    });
     const attrs = node.attributes;
     const stripped = stripStyleKeys(toAttributeRecord(attrs));
     const styleBag = getStyleBag(attrs);
@@ -35,5 +39,5 @@ export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
           | undefined,
       } as Omit<T, StyleAttrKey> & { scrollable?: boolean },
     };
-  }, [node, theme, projectColors]);
+  }, [node, theme, projectColors, baseSize]);
 }

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

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

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

@@ -9,7 +9,12 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
   directlyTextStyle = false,
 ): CSSProperties {
-  const { theme, projectColors, fonts } = useBuilderParams();
+  const {
+    mockTheme: theme,
+    projectColors,
+    fonts,
+    baseSize,
+  } = useBuilderParams();
 
   return useMemo(
     () =>
@@ -18,8 +23,9 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
         projectColors,
         fonts,
         directlyTextStyle,
+        baseSize,
       }),
     // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
-    [node, theme, projectColors, fonts, directlyTextStyle],
+    [node, theme, projectColors, fonts, directlyTextStyle, baseSize],
   );
 }