@developer_tribe/react-builder 1.2.34 → 1.2.36

package/dist/migrations/migratePipe.d.ts

@@ -1,7 +1,7 @@
 import type { Project } from '../types/Project';
 import type { Migration } from './types';
 export declare const CURRENT_PROJECT_VERSION: string;
-export type MigrationPipe = {
+type MigrationPipe = {
     projectVersion: string;
     requiredVersion: string;
     required: boolean;
@@ -12,3 +12,4 @@ export declare function runProjectMigrations(project: Project): {
     project: Project;
     applied: Migration[];
 };
+export {};

package/dist/migrations/semver.d.ts

@@ -1,8 +1 @@
-export type Semver = {
-    major: number;
-    minor: number;
-    patch: number;
-};
-export declare function parseSemver(input?: string | null): Semver;
-export declare function compareSemver(a: string, b: string): number;
 export declare function isSemverLess(a: string, b: string): boolean;

package/dist/pages/DebugJsonPage.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Node } from '../types/Node';
-export type DebugJsonPageProps = {
+type DebugJsonPageProps = {
     data: Node | null | undefined;
     setData: React.Dispatch<React.SetStateAction<Node>>;
     project?: unknown;
@@ -12,3 +12,4 @@ export type DebugJsonPageProps = {
     logLabel?: string;
 };
 export declare function DebugJsonPage({ data, setData, project, onClose, title, description, previewMode, setPreviewMode, logLabel, }: DebugJsonPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/ProjectDebug.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
-export type ProjectDebugProps = {
+type ProjectDebugProps = {
     name: string;
     rawData: unknown;
     validationError: string;
@@ -20,3 +20,4 @@ export type ProjectDebugProps = {
     };
 };
 export declare function ProjectDebug({ name, rawData, validationError, validationErrorStack, products, benefits, canvasBg, belowName, jsonEditor, }: ProjectDebugProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/ProjectMigrationPage.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
-export type ProjectMigrationPageProps = {
+type ProjectMigrationPageProps = {
     name: string;
     rawData: unknown;
     projectVersion: string;
@@ -23,3 +23,4 @@ export type ProjectMigrationPageProps = {
     onFixVersionMeta?: () => void;
 };
 export declare function ProjectMigrationPage({ name, rawData, projectVersion, requiredVersion, showFixVersionMeta, pendingMigrations, products, benefits, canvasBg, belowName, migrating, onContinueWithoutValidation, onMigrateNow, onFixVersionMeta, }: ProjectMigrationPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/ProjectPage.d.ts

@@ -2,7 +2,7 @@ import type { Project, ProjectColors, ProjectMeta } from '../types/Project';
 import { type Localication } from '../types/PreviewConfig';
 import type { LogLevel } from '../types/Project';
 import type { Fonts } from '../types/Fonts';
-export type ProjectPageProps = {
+type ProjectPageProps = {
     project: Project;
     onSaveProject: (project: ProjectMeta) => void;
     localization?: Localication;
@@ -21,3 +21,4 @@ export type ProjectPageProps = {
     appFont?: string | undefined;
 };
 export declare function ProjectPage({ project, localization, onSaveProject, logLevel, projectColors, onSaveProjectColors, name, typography, appFont, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/ProjectValidationPage.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
-export type ProjectValidationPageProps = {
+type ProjectValidationPageProps = {
     name: string;
     rawData: unknown;
     validationError: string;
@@ -14,3 +14,4 @@ export type ProjectValidationPageProps = {
     onSaveEditedRawData?: (nextRawData: unknown) => void;
 };
 export declare function ProjectValidationPage({ name, rawData, validationError, validationErrorStack, products, benefits, canvasBg, belowName, onContinueWithoutValidation, onSaveEditedRawData, }: ProjectValidationPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/tabs/SideTool.d.ts

@@ -1,8 +1 @@
-import React from 'react';
-import type { Node } from '../../types/Node';
-type SideToolProps = {
-    data: Node;
-    setData: React.Dispatch<React.SetStateAction<Node>>;
-};
-export declare function SideTool({ data, setData }: SideToolProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/utils/parseColor.d.ts

@@ -3,4 +3,4 @@ export type ParseColorOptions = {
     projectColors?: ProjectColors;
     theme?: string;
 };
-export declare function parseColor(value?: string, options?: ParseColorOptions): string | undefined;
+export declare function parseColor(value?: string, options?: ParseColorOptions): string | null | undefined;

package/package.json

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

package/scripts/prebuild/assets/prompt_scheme.md

@@ -2,12 +2,9 @@ You are a React Native UI builder assistant. Your goal is to generate a valid **
 
 ## Available Components & Their Props
 
-Each component is listed as `ComponentName: {attr: TypeScriptType, styles: {prop: TypeScriptType}}`.
-Use ONLY these component names and attribute names. Do NOT invent new components or attributes.
+Each component is listed as `ComponentName: {attr: TypeScriptType, styles: {prop: TypeScriptType}}`. Use ONLY these component names and attribute names. Do NOT invent new components or attributes.
 
-Union enum values must match exactly (e.g. `"expanding_dot"` not `expandingDot`).
-Color values: prefer `THEME_COLORS.KEY` or `STATIC_COLORS.KEY` for theme-aware colors. Literal values like `"red"` or `"#000fff"` are also valid when a specific color is intended.
-Localization string values should use a localization key from the **Available Localization Keys** section. Do NOT invent new keys.
+Union enum values must match exactly (e.g. `"expanding_dot"` not `expandingDot`). Color values: prefer `THEME_COLORS.KEY` or `STATIC_COLORS.KEY` for theme-aware colors. Literal values like `"red"` or `"#000fff"` are also valid when a specific color is intended. Localization string values should use a localization key from the **Available Localization Keys** section. Do NOT invent new keys.
 
 ```
 {patterns}
@@ -33,18 +30,15 @@ Use one of these values for `iconType` attributes:
 
 ## Embla Carousel Constraints
 
-> **IMPORTANT – Web uses Embla carousel under the hood.**
-> For `OnboardProvider` and `OnboardItem`, do **NOT** set any of the following outer layout styles via `styles`, because Embla manages them internally through its own CSS classes (`embla`, `embla__viewport`, `embla__slide`):
+> **IMPORTANT – Web uses Embla carousel under the hood.** For `OnboardProvider` and `OnboardItem`, do **NOT** set any of the following outer layout styles via `styles`, because Embla manages them internally through its own CSS classes (`embla`, `embla__viewport`, `embla__slide`):
 >
 > `flex`, `flexGrow`, `flexShrink`, `margin`, `marginTop`, `marginBottom`, `marginLeft`, `marginRight`, `marginHorizontal`, `marginVertical`, `height`, `minHeight`, `maxHeight`, `width`, `minWidth`, `maxWidth`, `position`, `top`, `bottom`, `left`, `right`, `zIndex`, `display`
 >
-> Only **visual** styles are safe to set on `OnboardProvider` and `OnboardItem`:
-> `padding`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingHorizontal`, `paddingVertical`, `backgroundColor`, `borderRadius`, `gap`, `alignItems`, `justifyContent`, `flexDirection`, `flexWrap`
+> Only **visual** styles are safe to set on `OnboardProvider` and `OnboardItem`: `padding`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingHorizontal`, `paddingVertical`, `backgroundColor`, `borderRadius`, `gap`, `alignItems`, `justifyContent`, `flexDirection`, `flexWrap`
 
 ## Available Localization Keys
 
-Use ONLY the keys listed below for localization attributes (`labelKey`, `textLocalizationKey`, etc.).
-Do NOT invent new keys or use keys not in this list.
+Use ONLY the keys listed below for localization attributes (`labelKey`, `textLocalizationKey`, etc.). Do NOT invent new keys or use keys not in this list.
 
 ```
 {localization_keys}

package/scripts/prebuild/generate-prompt-schemes.js

@@ -93,7 +93,7 @@ function nodeToXmlInner(node, indent) {
   if (typeof node === 'string') return `${pad}${node}`;
 
   if (Array.isArray(node)) {
-    return node.map((child) => nodeToXmlInner(child, indent)).join('\n');
+    return node.map(child => nodeToXmlInner(child, indent)).join('\n');
   }
 
   if (typeof node !== 'object') return '';
@@ -157,13 +157,12 @@ function parsePropsFile(filePath, componentName) {
   // ── Collect enum/union types ──────────────────────────────────────
   // e.g.  export type DotTypeOptionType = 'a' | 'b';
   const enumMap = {};
-  const enumRe =
-    /export\s+type\s+(\w+)\s*=\s*((?:'[^']*'|\||\s)+);/g;
+  const enumRe = /export\s+type\s+(\w+)\s*=\s*((?:'[^']*'|\||\s)+);/g;
   let m;
   while ((m = enumRe.exec(src)) !== null) {
     const typeName = m[1];
     // Collect all quoted values
-    const values = [...m[2].matchAll(/'([^']*)'/g)].map((x) => `"${x[1]}"`);
+    const values = [...m[2].matchAll(/'([^']*)'/g)].map(x => `"${x[1]}"`);
     if (values.length > 0) enumMap[typeName] = values.join('|');
   }
 
@@ -213,7 +212,9 @@ function parsePropsFile(filePath, componentName) {
   // ── Also check for child type ───────────────────────────────────
   const childRe = /^\s+child\s*:\s*(.+?);/m;
   const childMatch = childRe.exec(piMatch[1]);
-  const childType = childMatch ? resolveType(childMatch[1].trim(), enumMap) : null;
+  const childType = childMatch
+    ? resolveType(childMatch[1].trim(), enumMap)
+    : null;
 
   // ── Build compact string ────────────────────────────────────────
   const parts = [];
@@ -319,7 +320,8 @@ function collectLocalizationAndColors() {
   const previewConfigSrc = fs.readFileSync(previewConfigPath, 'utf8');
 
   // Extract all string literal keys from the LocalizationKey type union
-  const locKeyTypeRe = /export\s+type\s+LocalizationKey\s*=[\s\S]*?(?=export\s|$)/;
+  const locKeyTypeRe =
+    /export\s+type\s+LocalizationKey\s*=[\s\S]*?(?=export\s|$)/;
   const locKeyTypeMatch = locKeyTypeRe.exec(previewConfigSrc);
   const localizationKeys = [];
   if (locKeyTypeMatch) {
@@ -387,8 +389,9 @@ function collectLocalizationAndColors() {
     }
   }
 
-  const defaultColors =
-    [...staticLines, ...lightLines, ...darkLines].join('\n');
+  const defaultColors = [...staticLines, ...lightLines, ...darkLines].join(
+    '\n'
+  );
 
   return {
     localizationKeys: localizationKeys.join('\n'),

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -459,6 +459,56 @@ async function validatePatternJson(componentDir, componentName) {
     };
   }
 
+  // ── Meta alignment validation ─────────────────────────────────────────────
+  // meta must mirror the pattern.attributes structure (after extends merge):
+  //   pattern.attributes.X          → meta.attributes.X  (NOT under meta.attributes.styles)
+  //   pattern.attributes.styles.X   → meta.attributes.styles.X  (or meta.styles.X)
+  if (data.meta) {
+    const resolvedAttrs = data.pattern.attributes ?? {};
+    const styleKeys = new Set(
+      Object.keys(
+        isPlainObject(resolvedAttrs.styles) ? resolvedAttrs.styles : {}
+      )
+    );
+
+    // Check meta.attributes: flat keys must NOT belong to pattern.attributes.styles
+    const metaAttrFlat = data.meta?.attributes;
+    if (isPlainObject(metaAttrFlat)) {
+      for (const key of Object.keys(metaAttrFlat)) {
+        if (key === 'styles' || key === 'style') continue;
+        if (styleKeys.has(key)) {
+          return fail(
+            `[${componentName}] pattern.json -> meta.attributes.${key} should be meta.attributes.styles.${key} (key is defined under pattern.attributes.styles)`
+          );
+        }
+      }
+
+      // Check meta.attributes.styles: keys must be in pattern.attributes.styles
+      const metaAttrStyles = metaAttrFlat?.styles;
+      if (isPlainObject(metaAttrStyles)) {
+        for (const key of Object.keys(metaAttrStyles)) {
+          if (!styleKeys.has(key)) {
+            return fail(
+              `[${componentName}] pattern.json -> meta.attributes.styles.${key} should be meta.attributes.${key} (key is not defined under pattern.attributes.styles)`
+            );
+          }
+        }
+      }
+    }
+
+    // Check meta.styles (legacy shorthand): keys must be in pattern.attributes.styles
+    const metaStyles = data.meta?.styles;
+    if (isPlainObject(metaStyles)) {
+      for (const key of Object.keys(metaStyles)) {
+        if (!styleKeys.has(key)) {
+          return fail(
+            `[${componentName}] pattern.json -> meta.styles.${key} should be meta.attributes.${key} (key is not defined under pattern.attributes.styles)`
+          );
+        }
+      }
+    }
+  }
+
   return data;
 }
 

package/scripts/prebuild/utils/validatePatternJson.js

@@ -105,9 +105,82 @@ export async function validatePatternJson(componentDir, componentName) {
       continue;
     }
 
+    if (attrName === 'styles') {
+      if (!isPlainObject(attrType)) {
+        return fail(
+          `[${componentName}] pattern.json -> 'pattern.attributes.styles' must be an object`
+        );
+      }
+      for (const [styleKey, styleType] of Object.entries(attrType)) {
+        const res = validateAttrType(
+          styleKey,
+          styleType,
+          'pattern.attributes.styles'
+        );
+        if (res) return res;
+      }
+      continue;
+    }
+
     const res = validateAttrType(attrName, attrType, 'pattern.attributes');
     if (res) return res;
   }
 
+  // ── Meta alignment validation ─────────────────────────────────────────────
+  // meta must mirror the pattern.attributes structure:
+  //   pattern.attributes.X          → meta under meta.attributes.X  (NOT meta.attributes.styles.X)
+  //   pattern.attributes.styles.X   → meta under meta.attributes.styles.X (or meta.styles.X)
+  if (data.meta) {
+    const styleKeys = new Set(
+      Object.keys(
+        isPlainObject(pattern.attributes?.styles)
+          ? pattern.attributes.styles
+          : {}
+      )
+    );
+    const topLevelKeys = new Set(
+      Object.keys(pattern.attributes ?? {}).filter(
+        k => k !== 'styles' && k !== 'style'
+      )
+    );
+
+    // Check meta.attributes: keys here must NOT be style keys
+    const metaAttrs = data.meta?.attributes;
+    if (isPlainObject(metaAttrs)) {
+      for (const key of Object.keys(metaAttrs)) {
+        if (key === 'styles' || key === 'style') continue; // nested object, skip
+        if (styleKeys.has(key)) {
+          return fail(
+            `[${componentName}] pattern.json -> meta.attributes.${key} should be meta.attributes.styles.${key} (it is defined under pattern.attributes.styles)`
+          );
+        }
+      }
+
+      // Check meta.attributes.styles: keys here must be style keys
+      const metaAttrStyles = metaAttrs?.styles;
+      if (isPlainObject(metaAttrStyles)) {
+        for (const key of Object.keys(metaAttrStyles)) {
+          if (!styleKeys.has(key)) {
+            return fail(
+              `[${componentName}] pattern.json -> meta.attributes.styles.${key} should be meta.attributes.${key} (it is not defined under pattern.attributes.styles)`
+            );
+          }
+        }
+      }
+    }
+
+    // Check meta.styles (legacy shorthand for meta.attributes.styles): keys must be style keys
+    const metaStyles = data.meta?.styles;
+    if (isPlainObject(metaStyles)) {
+      for (const key of Object.keys(metaStyles)) {
+        if (!styleKeys.has(key)) {
+          return fail(
+            `[${componentName}] pattern.json -> meta.styles.${key} should be meta.attributes.${key} (it is not defined under pattern.attributes.styles)`
+          );
+        }
+      }
+    }
+  }
+
   return data;
 }

package/src/RenderPage.tsx

@@ -12,7 +12,7 @@ import { RenderErrorBoundary } from './components/RenderErrorBoundary';
 import { usePreviewSelection } from './hooks/usePreviewSelection';
 import { defaultLocalization } from './types/PreviewConfig';
 import { defaultProjectColors } from './utils/projectColors';
-export type ScreenStyle = {
+type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
 };
@@ -88,12 +88,6 @@ export function RenderPage({
     const locKeys = overrideLocalization
       ? Object.keys(overrideLocalization)
       : [];
-    const pcKeys = overrideProjectColors
-      ? [
-          ...Object.keys(overrideProjectColors.STATIC_COLORS ?? {}),
-          ...Object.keys(overrideProjectColors.THEME_COLORS ?? {}),
-        ]
-      : [];
 
     const isDefaultLocalization =
       !overrideLocalization ||

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.34"
+  "reactBuilderVersion": "1.2.35"
 }