@developer_tribe/react-builder 1.2.1 → 1.2.3

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -0,0 +1,179 @@
+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 type { Fonts } from '../../types/Fonts';
+import { fs, parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+import { extractViewStyle } from '../extractViewStyle';
+import { normalizeFontWeight } from '../fontWeight';
+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 | undefined,
+  options: {
+    fonts?: Fonts;
+    onFontLoaded?: (fontFamily: string) => void;
+    onError?: (error: string) => void;
+  },
+) {
+  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;
+  if (!options.fonts) return;
+
+  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
+    familyName: name,
+    weight,
+  });
+
+  const promise = loadFontFamily(options.fonts, name, {
+    preferWeight: weight,
+    forceFetch: true,
+  })
+    .then(() => {
+      fontsDebug.info('extractTextStyle: font weight loaded', {
+        familyName: name,
+        weight,
+      });
+      options.onFontLoaded?.(name);
+    })
+    .catch((e) => {
+      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
+        familyName: name,
+        weight,
+      });
+      options.onError?.(
+        `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;
+  fonts?: Fonts;
+  onFontLoaded?: (fontFamily: string) => void;
+  onError?: (error: string) => void;
+};
+
+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 def = findFontDefinition(options.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).
+    //Optimzation trade off by readability: we only attempt font loading when a fonts registry is provided.
+    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey, {
+      fonts: options.fonts,
+      onFontLoaded: options.onFontLoaded,
+      onError: options.onError,
+    });
+    // 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'), {
+    projectColors: options.projectColors,
+    theme,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
+  const textAlign = get('textAlign');
+  if (textAlign)
+    style.textAlign = textAlign as React.CSSProperties['textAlign'];
+
+  const viewStyle = extractViewStyle(node, {
+    projectColors: options.projectColors,
+    theme,
+  });
+  return { ...viewStyle, ...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';

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -0,0 +1,144 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { ProjectColors } from '../../types/Project';
+import { parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+
+export type ExtractViewStyleOptions = {
+  projectColors?: ProjectColors;
+  theme?: string;
+};
+
+export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
+) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof ViewPropsGenerated['attributes']>(
+    key: K,
+  ): ViewPropsGenerated['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 scrollable = (get('scrollable') as any) ?? false;
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+  if (!attributes) return style;
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
+  if (scrollable) {
+    // Important for flex children: allow the element to shrink so overflow scroll can work.
+    style.minWidth = 0;
+    style.minHeight = 0;
+    if (get('flexDirection') === 'row') {
+      style.overflowX = 'auto';
+      style.overflowY = 'hidden';
+      style.maxWidth = '100%';
+      style.maxHeight = '100%';
+    } else {
+      style.overflowY = 'auto';
+      style.overflowX = 'hidden';
+      style.maxHeight = '100%';
+      style.maxWidth = '100%';
+    }
+  }
+  const flexDirection = get('flexDirection');
+  if (flexDirection) style.flexDirection = flexDirection as any;
+  const alignItems = get('alignItems');
+  if (alignItems)
+    style.alignItems = alignItems as React.CSSProperties['alignItems'];
+  const justifyContent = get('justifyContent');
+  if (justifyContent)
+    style.justifyContent =
+      justifyContent as React.CSSProperties['justifyContent'];
+  const setParsedSize = <K extends keyof React.CSSProperties>(
+    property: K,
+    rawValue: string | number | undefined,
+  ) => {
+    if (isEmptySizeValue(rawValue)) return;
+    const parsed = parseSize(rawValue);
+    style[property] = parsed as React.CSSProperties[K];
+  };
+
+  setParsedSize('gap', get('gap') as any);
+  setParsedSize('padding', get('padding') as any);
+  setParsedSize('margin', get('margin') as any);
+
+  const paddingHorizontal = get('paddingHorizontal') as any;
+  if (!isEmptySizeValue(paddingHorizontal)) {
+    const parsed = parseSize(paddingHorizontal);
+    style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
+    style.paddingRight = parsed as React.CSSProperties['paddingRight'];
+  }
+  const paddingVertical = get('paddingVertical') as any;
+  if (!isEmptySizeValue(paddingVertical)) {
+    const parsed = parseSize(paddingVertical);
+    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
+    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
+  }
+
+  // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
+  setParsedSize('paddingTop', get('paddingTop') as any);
+  setParsedSize('paddingBottom', get('paddingBottom') as any);
+  setParsedSize('paddingLeft', get('paddingLeft') as any);
+  setParsedSize('paddingRight', get('paddingRight') as any);
+
+  const marginHorizontalRaw =
+    ((attributes as Record<string, unknown>).marginHorizontal as
+      | string
+      | number
+      | undefined) ?? (styleBag?.marginHorizontal as any);
+  if (!isEmptySizeValue(marginHorizontalRaw)) {
+    const parsed = parseSize(marginHorizontalRaw);
+    style.marginLeft = parsed as React.CSSProperties['marginLeft'];
+    style.marginRight = parsed as React.CSSProperties['marginRight'];
+  }
+
+  const marginVertical = get('marginVertical') as any;
+  if (!isEmptySizeValue(marginVertical)) {
+    const parsed = parseSize(marginVertical);
+    style.marginTop = parsed as React.CSSProperties['marginTop'];
+    style.marginBottom = parsed as React.CSSProperties['marginBottom'];
+  }
+
+  setParsedSize('marginTop', get('marginTop') as any);
+  setParsedSize('marginBottom', get('marginBottom') as any);
+  setParsedSize('marginLeft', get('marginLeft') as any);
+  setParsedSize('marginRight', get('marginRight') as any);
+  const backgroundColor = get('backgroundColor') as any;
+  if (backgroundColor) {
+    style.backgroundColor =
+      parseColor(backgroundColor, {
+        projectColors: options.projectColors,
+        theme: options.theme,
+      }) ?? backgroundColor;
+  }
+  setParsedSize('borderRadius', get('borderRadius') as any);
+  setParsedSize('width', get('width') as any);
+  setParsedSize('minWidth', get('minWidth') as any);
+  setParsedSize('maxWidth', get('maxWidth') as any);
+  setParsedSize('height', get('height') as any);
+  setParsedSize('minHeight', get('minHeight') as any);
+  setParsedSize('maxHeight', get('maxHeight') as any);
+  const flex = get('flex') as any;
+  if (flex !== undefined) style.flex = flex as React.CSSProperties['flex'];
+  const position = get('position') as any;
+  if (position) style.position = position as React.CSSProperties['position'];
+  setParsedSize('top', get('top') as any);
+  setParsedSize('bottom', get('bottom') as any);
+  setParsedSize('left', get('left') as any);
+  setParsedSize('right', get('right') as any);
+  const zIndex = get('zIndex') as any;
+  if (zIndex !== undefined)
+    style.zIndex = zIndex as React.CSSProperties['zIndex'];
+  return style;
+}

package/src/utils/extractViewStyle.ts

@@ -1,145 +1,2 @@
-import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-import type { NodeData } from '../types/Node';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-import { parseSize } from '../size-matters';
-import { parseColor } from './parseColor';
-
-export type ExtractViewStyleOptions = {
-  appConfig?: AppConfig;
-  projectColors?: ProjectColors;
-};
-
-export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
-  node: NodeData<T>,
-  options: ExtractViewStyleOptions = {},
-) {
-  const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
-  const get = <K extends keyof ViewPropsGenerated['attributes']>(
-    key: K,
-  ): ViewPropsGenerated['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 scrollable = (get('scrollable') as any) ?? false;
-  const style: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-  };
-  if (!attributes) return style;
-  const isEmptySizeValue = (value: unknown) =>
-    value === undefined ||
-    value === null ||
-    (typeof value === 'string' && value.trim() === '');
-  if (scrollable) {
-    // Important for flex children: allow the element to shrink so overflow scroll can work.
-    style.minWidth = 0;
-    style.minHeight = 0;
-    if (get('flexDirection') === 'row') {
-      style.overflowX = 'auto';
-      style.overflowY = 'hidden';
-      style.maxWidth = '100%';
-      style.maxHeight = '100%';
-    } else {
-      style.overflowY = 'auto';
-      style.overflowX = 'hidden';
-      style.maxHeight = '100%';
-      style.maxWidth = '100%';
-    }
-  }
-  const flexDirection = get('flexDirection');
-  if (flexDirection) style.flexDirection = flexDirection as any;
-  const alignItems = get('alignItems');
-  if (alignItems)
-    style.alignItems = alignItems as React.CSSProperties['alignItems'];
-  const justifyContent = get('justifyContent');
-  if (justifyContent)
-    style.justifyContent =
-      justifyContent as React.CSSProperties['justifyContent'];
-  const setParsedSize = <K extends keyof React.CSSProperties>(
-    property: K,
-    rawValue: string | number | undefined,
-  ) => {
-    if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue);
-    style[property] = parsed as React.CSSProperties[K];
-  };
-
-  setParsedSize('gap', get('gap') as any);
-  setParsedSize('padding', get('padding') as any);
-  setParsedSize('margin', get('margin') as any);
-
-  const paddingHorizontal = get('paddingHorizontal') as any;
-  if (!isEmptySizeValue(paddingHorizontal)) {
-    const parsed = parseSize(paddingHorizontal);
-    style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
-    style.paddingRight = parsed as React.CSSProperties['paddingRight'];
-  }
-  const paddingVertical = get('paddingVertical') as any;
-  if (!isEmptySizeValue(paddingVertical)) {
-    const parsed = parseSize(paddingVertical);
-    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
-    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
-  }
-
-  // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
-  setParsedSize('paddingTop', get('paddingTop') as any);
-  setParsedSize('paddingBottom', get('paddingBottom') as any);
-  setParsedSize('paddingLeft', get('paddingLeft') as any);
-  setParsedSize('paddingRight', get('paddingRight') as any);
-
-  const marginHorizontalRaw =
-    ((attributes as Record<string, unknown>).marginHorizontal as
-      | string
-      | number
-      | undefined) ?? (styleBag?.marginHorizontal as any);
-  if (!isEmptySizeValue(marginHorizontalRaw)) {
-    const parsed = parseSize(marginHorizontalRaw);
-    style.marginLeft = parsed as React.CSSProperties['marginLeft'];
-    style.marginRight = parsed as React.CSSProperties['marginRight'];
-  }
-
-  const marginVertical = get('marginVertical') as any;
-  if (!isEmptySizeValue(marginVertical)) {
-    const parsed = parseSize(marginVertical);
-    style.marginTop = parsed as React.CSSProperties['marginTop'];
-    style.marginBottom = parsed as React.CSSProperties['marginBottom'];
-  }
-
-  setParsedSize('marginTop', get('marginTop') as any);
-  setParsedSize('marginBottom', get('marginBottom') as any);
-  setParsedSize('marginLeft', get('marginLeft') as any);
-  setParsedSize('marginRight', get('marginRight') as any);
-  const backgroundColor = get('backgroundColor') as any;
-  if (backgroundColor) {
-    style.backgroundColor =
-      parseColor(backgroundColor, {
-        projectColors: options.projectColors,
-        appConfig: options.appConfig,
-      }) ?? backgroundColor;
-  }
-  setParsedSize('borderRadius', get('borderRadius') as any);
-  setParsedSize('width', get('width') as any);
-  setParsedSize('minWidth', get('minWidth') as any);
-  setParsedSize('maxWidth', get('maxWidth') as any);
-  setParsedSize('height', get('height') as any);
-  setParsedSize('minHeight', get('minHeight') as any);
-  setParsedSize('maxHeight', get('maxHeight') as any);
-  const flex = get('flex') as any;
-  if (flex !== undefined) style.flex = flex as React.CSSProperties['flex'];
-  const position = get('position') as any;
-  if (position) style.position = position as React.CSSProperties['position'];
-  setParsedSize('top', get('top') as any);
-  setParsedSize('bottom', get('bottom') as any);
-  setParsedSize('left', get('left') as any);
-  setParsedSize('right', get('right') as any);
-  const zIndex = get('zIndex') as any;
-  if (zIndex !== undefined)
-    style.zIndex = zIndex as React.CSSProperties['zIndex'];
-  return style;
-}
+export type { ExtractViewStyleOptions } from './extractViewStyle/extractViewStyle';
+export { extractViewStyle } from './extractViewStyle/extractViewStyle';

package/src/utils/parseColor.ts

@@ -1,4 +1,3 @@
-import type { AppConfig } from '../types/PreviewConfig';
 import type { ProjectColors } from '../types/Project';
 
 const STATIC_PREFIX = 'STATIC_COLORS.';
@@ -6,7 +5,7 @@ const THEME_PREFIX = 'THEME_COLORS.';
 
 export type ParseColorOptions = {
   projectColors?: ProjectColors;
-  appConfig?: AppConfig;
+  theme?: string;
 };
 
 export function parseColor(value?: string, options: ParseColorOptions = {}) {
@@ -14,7 +13,7 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
   const trimmed = value.trim();
   if (!trimmed) return undefined;
 
-  const { projectColors, appConfig } = options;
+  const { projectColors, theme } = options;
   if (!projectColors) return trimmed;
 
   if (trimmed.startsWith(STATIC_PREFIX)) {
@@ -29,8 +28,8 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
     const token = trimmed.slice(THEME_PREFIX.length);
     if (!token) return trimmed;
 
-    const theme = appConfig?.theme ?? 'light';
-    const themeTokens = projectColors.THEME_COLORS?.[theme];
+    const resolvedTheme = theme ?? 'light';
+    const themeTokens = projectColors.THEME_COLORS?.[resolvedTheme];
     const resolved = themeTokens?.[token];
     if (typeof resolved === 'string' && resolved.trim()) {
       return resolved.trim();