@developer_tribe/react-builder 1.2.0 → 1.2.2

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

@@ -4,7 +4,7 @@ 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 { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -55,10 +55,10 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     return params;
   }, [benefits]);
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

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

@@ -3,7 +3,7 @@ import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeBut
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
@@ -30,10 +30,10 @@ function PaywallSubscribeButton({
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractTextStyle(node as any, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractTextStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

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

@@ -2,7 +2,7 @@ import React, { useContext, useId, useMemo } from 'react';
 import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -91,10 +91,10 @@ function RadioButton({ node }: RadioButtonComponentProps) {
     }),
   );
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node as any, {
+    appConfig,
+    projectColors,
+  });
 
   const isSelected = isNodeSelected({ previewMode, current, node });
   const style = useMergedStyle(

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

@@ -8,7 +8,7 @@ import React, {
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -31,10 +31,7 @@ function Text({ node }: TextComponentProps) {
     }),
   );
   const keyOrText: string = node.children as string;
-  const textStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const textStyle = useExtractTextStyle(node, { appConfig, projectColors });
   const isSelected = isNodeSelected({ previewMode, current, node });
   const localize = useLocalize();
 

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

@@ -1,10 +1,10 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -23,10 +23,7 @@ export function View({ node }: ViewComponentProps) {
       projectColors: s.projectColors,
     }),
   );
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node, { appConfig, projectColors });
   const isSelected = isNodeSelected({ previewMode, current, node });
   const viewStyle = useMergedStyle(
     baseStyle,

package/src/hooks/useExtractTextStyle.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+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 { useRenderStore } from '../store';
+import { extractTextStyle } from '../utils/extractTextStyle';
+
+export type UseExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: UseExtractTextStyleOptions = {},
+) {
+  const storeAppConfig = useRenderStore((s) => s.appConfig);
+  const storeProjectColors = useRenderStore((s) => s.projectColors);
+  const fonts = useRenderStore((s) => s.fonts);
+
+  const appConfig = options.appConfig ?? storeAppConfig;
+  const projectColors = options.projectColors ?? storeProjectColors;
+
+  return useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    // fonts is intentionally included: extractTextStyle resolves weights via store-provided font definitions.
+    [node, appConfig, projectColors, fonts],
+  );
+}

package/src/hooks/useExtractViewStyle.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../types/Node';
+import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import { useRenderStore } from '../store';
+import { extractViewStyle } from '../utils/extractViewStyle';
+
+export type UseExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: UseExtractViewStyleOptions = {},
+) {
+  const storeAppConfig = useRenderStore((s) => s.appConfig);
+  const storeProjectColors = useRenderStore((s) => s.projectColors);
+
+  const appConfig = options.appConfig ?? storeAppConfig;
+  const projectColors = options.projectColors ?? storeProjectColors;
+
+  return useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+}

package/src/index.native.ts

@@ -74,6 +74,9 @@ export {
   getArrayItemType,
 } from './utils/patterns';
 
+// Node helpers (RN-safe)
+export { default as useNode } from './build-components/useNode';
+
 // Static sample data helpers (RN-safe)
 export {
   getSamples,

package/src/index.ts

@@ -12,6 +12,8 @@ export { RenderErrorBoundary } from './components/RenderErrorBoundary';
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
+export { useExtractTextStyle } from './hooks/useExtractTextStyle';
+export { useExtractViewStyle } from './hooks/useExtractViewStyle';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';

package/src/pages/ProjectPage.tsx

@@ -44,9 +44,15 @@ export type ProjectPageProps = {
   projectColors?: ProjectColors;
   onSaveProjectColors?: (colors: ProjectColors) => void;
   name?: string;
-  fonts: Fonts;
-  // NOTE: appFont is required as a prop to force the host to think about it.
-  appFont: string | undefined;
+  typography: {
+    fonts: Fonts;
+  };
+  /**
+   * Optional. If omitted, `ProjectPage` will infer it from `typography.fonts`:
+   * - first font with `isMain: true`
+   * - else first font in the list
+   */
+  appFont?: string | undefined;
 };
 
 const MOBILE_BREAKPOINT = 1000;
@@ -59,12 +65,16 @@ export function ProjectPage({
   projectColors,
   onSaveProjectColors,
   name,
-  fonts,
+  typography,
   appFont,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
   useSyncHtmlThemeClass();
-  useProjectFonts({ fonts, appFont });
+  const resolvedAppFont =
+    appFont ??
+    typography.fonts.find((f) => f?.isMain)?.name ??
+    typography.fonts[0]?.name;
+  useProjectFonts({ fonts: typography.fonts, appFont: resolvedAppFont });
   const resolvedName = name ?? project.name;
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const isEmptyProjectData =

package/src/types/Fonts.ts

@@ -5,12 +5,16 @@ export type FontWeightKey = string;
 export type FontFileUrl = string;
 
 /** Map of font-weight -> font file URL. */
-export type FontFamilySources = Record<FontWeightKey, FontFileUrl>;
+export type FontFamilySources = Record<FontWeightKey, FontFileUrl | undefined>;
 
 export type FontDefinition = {
   name: string;
   family: FontFamilySources;
   projects?: string[];
+  /** Optional language target for this font (e.g. "ar"). */
+  targetLanguage?: string;
+  /** Optional marker to pick a default app font. */
+  isMain?: boolean;
 };
 
 export type Fonts = FontDefinition[];

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -0,0 +1,160 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import { defaultAppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import { fs, parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+import { extractViewStyle } from '../extractViewStyle';
+import { normalizeFontWeight } from '../fontWeight';
+import { useRenderStore } from '../../store';
+import {
+  findFontDefinition,
+  loadFontFamily,
+  resolveClosestFontWeightKey,
+} from '../loadFontFamily';
+import { fontsDebug } from '../fontsDebug';
+
+const inFlightFontLoads: Map<string, Promise<void>> = new Map();
+
+function weightToNumericKey(weight: unknown): string | undefined {
+  const normalized = normalizeFontWeight(weight);
+  if (!normalized) return undefined;
+  if (normalized === 'normal') return '400';
+  if (normalized === 'bold') return '700';
+  // already '100'..'900'
+  return normalized;
+}
+
+function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
+  if (typeof document === 'undefined') return;
+  const name = familyName.trim();
+  if (!name) return;
+  const weight = weightKey?.trim() || '400';
+  const cacheKey = `${name}@${weight}`;
+  if (inFlightFontLoads.has(cacheKey)) return;
+
+  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
+    familyName: name,
+    weight,
+  });
+
+  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
+  const promise = loadFontFamily(fonts, name, {
+    preferWeight: weight,
+    forceFetch: true,
+  })
+    .then(() => {
+      fontsDebug.info('extractTextStyle: font weight loaded', {
+        familyName: name,
+        weight,
+      });
+      markFontLoaded(name);
+    })
+    .catch((e) => {
+      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
+        familyName: name,
+        weight,
+      });
+      addError(
+        `Failed to load font "${name}" (weight ${weight}): ${
+          e instanceof Error ? e.message : String(e)
+        }`,
+      );
+    })
+    .finally(() => {
+      inFlightFontLoads.delete(cacheKey);
+    });
+
+  inFlightFontLoads.set(cacheKey, promise);
+}
+
+export type ExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: ExtractTextStyleOptions = {},
+) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof TextPropsGenerated['attributes']>(
+    key: K,
+  ): TextPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
+  const fallbackColor =
+    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+
+  const style: React.CSSProperties = {};
+
+  if (!attributes) {
+    style.fontSize = fs(14);
+    style.color = fallbackColor;
+    return style;
+  }
+
+  // Typography
+  const fontSize = get('fontSize') as any;
+  if (fontSize !== undefined) {
+    const parsed = parseSize(fontSize);
+    style.fontSize = parsed as React.CSSProperties['fontSize'];
+  } else {
+    style.fontSize = fs(14);
+  }
+  const fontFamily = get('fontFamily') as any;
+  const fontWeight = get('fontWeight') as any;
+  const requestedWeight = weightToNumericKey(fontWeight);
+  const normalizedFontFamily =
+    typeof fontFamily === 'string' && fontFamily.trim().length > 0
+      ? fontFamily.trim()
+      : undefined;
+  if (normalizedFontFamily) {
+    // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
+    const { fonts } = useRenderStore.getState();
+    const def = findFontDefinition(fonts, normalizedFontFamily);
+    const resolvedWeightKey =
+      def?.family && typeof def.family === 'object'
+        ? resolveClosestFontWeightKey(
+            def.family as Record<string, string>,
+            requestedWeight,
+          )
+        : requestedWeight;
+
+    fontsDebug.info('extractTextStyle: resolved font family/weight', {
+      fontFamily: normalizedFontFamily,
+      requestedWeight,
+      resolvedWeightKey,
+    });
+
+    style.fontFamily = `"${normalizedFontFamily}"`;
+    // Ensure the correct weight file is available (lazy-load per weight).
+    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
+    // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
+    if (resolvedWeightKey) {
+      style.fontWeight = resolvedWeightKey;
+    }
+  }
+  const normalizedFontWeight = normalizeFontWeight(fontWeight);
+  // If no fontFamily is set, keep previous behavior.
+  if (!normalizedFontFamily && normalizedFontWeight)
+    style.fontWeight = normalizedFontWeight;
+  const resolvedTextColor = parseColor(get('color') as any, {
+    projectColors: options.projectColors,
+    appConfig: resolvedAppConfig,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
+  const textAlign = get('textAlign') as any;
+  if (textAlign)
+    style.textAlign = textAlign as React.CSSProperties['textAlign'];
+
+  return { ...extractViewStyle(node, options), ...style };
+}

package/src/utils/extractTextStyle.ts

@@ -1,160 +1,2 @@
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../types/PreviewConfig';
-import { defaultAppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-import { fs, parseSize } from '../size-matters';
-import { parseColor } from './parseColor';
-import { extractViewStyle } from './extractViewStyle';
-import { normalizeFontWeight } from './fontWeight';
-import { useRenderStore } from '../store';
-import {
-  findFontDefinition,
-  loadFontFamily,
-  resolveClosestFontWeightKey,
-} from './loadFontFamily';
-import { fontsDebug } from './fontsDebug';
-
-const inFlightFontLoads: Map<string, Promise<void>> = new Map();
-
-function weightToNumericKey(weight: unknown): string | undefined {
-  const normalized = normalizeFontWeight(weight);
-  if (!normalized) return undefined;
-  if (normalized === 'normal') return '400';
-  if (normalized === 'bold') return '700';
-  // already '100'..'900'
-  return normalized;
-}
-
-function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
-  if (typeof document === 'undefined') return;
-  const name = familyName.trim();
-  if (!name) return;
-  const weight = weightKey?.trim() || '400';
-  const cacheKey = `${name}@${weight}`;
-  if (inFlightFontLoads.has(cacheKey)) return;
-
-  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
-    familyName: name,
-    weight,
-  });
-
-  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
-  const promise = loadFontFamily(fonts, name, {
-    preferWeight: weight,
-    forceFetch: true,
-  })
-    .then(() => {
-      fontsDebug.info('extractTextStyle: font weight loaded', {
-        familyName: name,
-        weight,
-      });
-      markFontLoaded(name);
-    })
-    .catch((e) => {
-      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
-        familyName: name,
-        weight,
-      });
-      addError(
-        `Failed to load font "${name}" (weight ${weight}): ${
-          e instanceof Error ? e.message : String(e)
-        }`,
-      );
-    })
-    .finally(() => {
-      inFlightFontLoads.delete(cacheKey);
-    });
-
-  inFlightFontLoads.set(cacheKey, promise);
-}
-
-type ExtractTextStyleOptions = {
-  appConfig?: AppConfig;
-  projectColors?: ProjectColors;
-};
-
-export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
-  node: NodeData<T>,
-  options: ExtractTextStyleOptions = {},
-) {
-  const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
-  const get = <K extends keyof TextPropsGenerated['attributes']>(
-    key: K,
-  ): TextPropsGenerated['attributes'][K] | undefined => {
-    const direct = (attributes as any)?.[key];
-    if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key as unknown as string] as any;
-  };
-  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
-  const { screenStyle, theme } = resolvedAppConfig;
-  const fallbackColor =
-    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
-
-  const style: React.CSSProperties = {};
-
-  if (!attributes) {
-    style.fontSize = fs(14);
-    style.color = fallbackColor;
-    return style;
-  }
-
-  // Typography
-  const fontSize = get('fontSize') as any;
-  if (fontSize !== undefined) {
-    const parsed = parseSize(fontSize);
-    style.fontSize = parsed as React.CSSProperties['fontSize'];
-  } else {
-    style.fontSize = fs(14);
-  }
-  const fontFamily = get('fontFamily') as any;
-  const fontWeight = get('fontWeight') as any;
-  const requestedWeight = weightToNumericKey(fontWeight);
-  const normalizedFontFamily =
-    typeof fontFamily === 'string' && fontFamily.trim().length > 0
-      ? fontFamily.trim()
-      : undefined;
-  if (normalizedFontFamily) {
-    // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
-    const { fonts } = useRenderStore.getState();
-    const def = findFontDefinition(fonts, normalizedFontFamily);
-    const resolvedWeightKey =
-      def?.family && typeof def.family === 'object'
-        ? resolveClosestFontWeightKey(
-            def.family as Record<string, string>,
-            requestedWeight,
-          )
-        : requestedWeight;
-
-    fontsDebug.info('extractTextStyle: resolved font family/weight', {
-      fontFamily: normalizedFontFamily,
-      requestedWeight,
-      resolvedWeightKey,
-    });
-
-    style.fontFamily = `"${normalizedFontFamily}"`;
-    // Ensure the correct weight file is available (lazy-load per weight).
-    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
-    // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
-    if (resolvedWeightKey) {
-      style.fontWeight = resolvedWeightKey;
-    }
-  }
-  const normalizedFontWeight = normalizeFontWeight(fontWeight);
-  // If no fontFamily is set, keep previous behavior.
-  if (!normalizedFontFamily && normalizedFontWeight)
-    style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color') as any, {
-    projectColors: options.projectColors,
-    appConfig: resolvedAppConfig,
-  });
-  style.color = resolvedTextColor ?? fallbackColor;
-  const textAlign = get('textAlign') as any;
-  if (textAlign)
-    style.textAlign = textAlign as React.CSSProperties['textAlign'];
-
-  return { ...extractViewStyle(node, options), ...style };
-}
+export type { ExtractTextStyleOptions } from './extractTextStyle/extractTextStyle';
+export { extractTextStyle } from './extractTextStyle/extractTextStyle';