@developer_tribe/react-builder 1.2.31 → 1.2.33

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

@@ -13,7 +13,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -478,7 +478,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -879,7 +879,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -1297,7 +1297,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -1678,7 +1678,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2072,7 +2072,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2474,7 +2474,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -2852,7 +2852,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -3235,7 +3235,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -3683,7 +3683,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4078,7 +4078,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4471,7 +4471,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -4850,7 +4850,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -5229,7 +5229,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -5277,6 +5277,7 @@ export const patterns = [
           left: 'size',
           right: 'size',
           zIndex: 'number',
+          color: 'color',
         },
         labelKey: 'string',
         animation: [
@@ -5287,7 +5288,6 @@ export const patterns = [
           'blur-line-animation',
         ],
         animation_color: 'color',
-        flex: 'number',
         events: 'EventObject[]',
       },
     },
@@ -5337,20 +5337,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        animation: {
-          label: 'Animation',
-          description: 'Animation style for the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 3,
-        },
-        animation_color: {
-          label: 'Animation Color',
-          description: 'Color used by the animation.',
-          category: 'style',
-          specialCategory: null,
-          sort: 4,
-        },
       },
       attributes: {
         scrollable: {
@@ -5558,9 +5544,9 @@ export const patterns = [
         },
         flex: {
           label: 'Flex',
-          description: 'Flex grow value in layout.',
+          description: 'Flex grow factor (e.g. 1 fills available space).',
           category: 'container',
-          specialCategory: null,
+          specialCategory: 'size',
           sort: 6,
         },
         position: {
@@ -5623,6 +5609,29 @@ export const patterns = [
           specialCategory: null,
           sort: 7,
         },
+        animation: {
+          label: 'Animation',
+          description: 'Animation style for the button.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
+        animation_color: {
+          label: 'Animation Color',
+          description: 'Color used by the animation.',
+          category: 'style',
+          specialCategory: null,
+          sort: 4,
+        },
+        styles: {
+          color: {
+            label: 'Color',
+            description: 'Text color.',
+            category: 'style',
+            specialCategory: null,
+            sort: 1,
+          },
+        },
       },
     },
     defaults: {
@@ -5635,6 +5644,7 @@ export const patterns = [
         flexShrink: 0,
         height: '40@vs',
         borderRadius: '12@s',
+        color: 'THEME_COLORS.ONBOARD_BUTTON_PRIMARY_TEXT',
       },
     },
     types: {
@@ -5655,7 +5665,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6095,7 +6105,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -6533,7 +6543,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -7033,7 +7043,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         src: 'string',
-        style: {
+        styles: {
           resizeMode: ['cover', 'contain', 'stretch', 'center'],
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
@@ -7444,7 +7454,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -7834,7 +7844,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -8222,7 +8232,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -8663,7 +8673,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -9105,7 +9115,7 @@ export const patterns = [
         src: 'string',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -9509,7 +9519,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -9976,7 +9986,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10357,7 +10367,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -10746,7 +10756,7 @@ export const patterns = [
       description: 'description',
       children: 'string',
       attributes: {
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontWeight: [
@@ -11173,7 +11183,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -11640,7 +11650,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -12083,7 +12093,7 @@ export const patterns = [
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
         translateCounter: 'number',
-        style: {
+        styles: {
           color: 'color',
           fontSize: 'size',
           fontFamily: 'fontFamily',
@@ -12524,7 +12534,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -12925,7 +12935,7 @@ export const patterns = [
       description: 'description',
       children: 'never',
       attributes: {
-        style: {
+        styles: {
           backgroundColor: 'color',
           width: 'size',
           height: 'size',
@@ -12981,7 +12991,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -13360,7 +13370,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [
@@ -13801,7 +13811,7 @@ export const patterns = [
       children: 'node',
       attributes: {
         scrollable: 'boolean',
-        style: {
+        styles: {
           flexDirection: ['row', 'column'],
           flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
           alignItems: [

package/src/build-components/useNode.ts

@@ -2,7 +2,6 @@ import { NodeData, NodeDefaultAttribute } from '../types/Node';
 import { getDefaultsForType } from '../utils/patterns';
 
 type WithStyleBags = {
-  style?: Record<string, unknown>;
   styles?: Record<string, unknown>;
 };
 
@@ -15,29 +14,16 @@ export default function useNode<
   const nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T &
     WithStyleBags;
   const defaultAttributes = defaults as T & WithStyleBags;
-  // Merge styles from both defaults and node (schemaVersion=2 uses `styles` only).
-  // Read legacy `style` for back-compat with old persisted data, but output only `styles`.
-  const defaultStyle = {
-    ...(defaultAttributes?.style ?? {}),
+  // Deep-merge styles so default style values aren't lost when the node provides partial overrides.
+  const mergedStyle = {
     ...(defaultAttributes?.styles ?? {}),
-  };
-  const nodeStyle = {
-    ...(nodeAttributes?.style ?? {}),
     ...(nodeAttributes?.styles ?? {}),
   };
-  const mergedStyle = {
-    ...defaultStyle,
-    ...nodeStyle,
-  };
   const mergedRecord: Record<string, unknown> = {
     ...(defaultAttributes as Record<string, unknown>),
     ...(nodeAttributes as Record<string, unknown>),
-    // Deep merge styles so default style values aren't lost when the node provides partial overrides.
-    // Only use `styles` (schemaVersion=2). Remove legacy `style` to avoid validator rejection.
     styles: mergedStyle,
   };
-  // Remove legacy `style` key if it was inherited from defaults or node attributes.
-  delete mergedRecord.style;
   if (
     typeof mergedRecord.styles === 'object' &&
     mergedRecord.styles != null &&

package/src/components/BottomBar.tsx

@@ -3,7 +3,12 @@ import { Icon } from './Icon.generated';
 import type { IconsType } from '../types/Icons.generated';
 import { useRenderStore } from '../store';
 import type { Localication } from '../types/PreviewConfig';
-import { InspectModal, LocalicationModal, Modal } from '../modals';
+import {
+  InspectModal,
+  LocalicationModal,
+  Modal,
+  PromptManagerModal,
+} from '../modals';
 import type { Node } from '../types/Node';
 import type { Project } from '../types/Project';
 import { DebugJsonPage } from '../pages/DebugJsonPage';
@@ -29,6 +34,7 @@ export function BottomBar({
   const debugIcon: IconsType = 'speedometer-03';
   const localizationIcon: IconsType = 'globe-01';
   const inspectIcon: IconsType = 'info-circle';
+  const promptAiIcon: IconsType = 'star';
 
   const {
     localization,
@@ -57,6 +63,7 @@ export function BottomBar({
   const [isDebugOpen, setIsDebugOpen] = useState(false);
   const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
   const [isInspectOpen, setIsInspectOpen] = useState(false);
+  const [isPromptManagerOpen, setIsPromptManagerOpen] = useState(false);
 
   const languages = useMemo(() => ['en', 'tr', 'ar'], []);
   const activeLanguage = defaultLanguage;
@@ -150,6 +157,18 @@ export function BottomBar({
           <Icon iconType={inspectIcon} size={20} color="currentColor" alt="" />
         </button>
 
+        <button
+          type="button"
+          className={`rb-bottom-bar__button${
+            isPromptManagerOpen ? ' is-active' : ''
+          }`}
+          aria-label="Prompt Manager"
+          aria-pressed={isPromptManagerOpen}
+          onClick={() => setIsPromptManagerOpen(true)}
+        >
+          <Icon iconType={promptAiIcon} size={20} color="currentColor" alt="" />
+        </button>
+
         <div className="rb-bottom-bar__spacer" />
 
         <div className="rb-bottom-bar__langs" aria-label="Language">
@@ -199,6 +218,14 @@ export function BottomBar({
       {isInspectOpen && (
         <InspectModal onClose={() => setIsInspectOpen(false)} />
       )}
+
+      {isPromptManagerOpen && (
+        <PromptManagerModal
+          data={data}
+          setData={setData}
+          onClose={() => setIsPromptManagerOpen(false)}
+        />
+      )}
     </>
   );
 }

package/src/components/BuilderProvider.tsx

@@ -36,19 +36,14 @@ export type BuilderProviderParams = {
   // but internally we prefer store values.
   mockProducts?: Products[];
   mockBenefits?: PaywallBenefits;
-  mockTheme?: Theme;
-  mockDefaultLanguage?: string;
+  selectedLanguage?: string;
+  selectedTheme?: Theme;
   localization?: Localication;
   baseSize?: BaseSize;
-  // projectColors, fonts, previewMode, selectedKey kept as they are commonly used and not explicitly asked to rename
   projectColors?: ProjectColors;
   fonts?: Fonts;
   previewMode?: boolean;
   selectedKey?: string;
-
-  // Derived / Convenience values provided by the context (populated from mock* if present)
-  theme?: Theme;
-  defaultLanguage?: string;
 };
 
 type BuilderProviderProps = {
@@ -63,17 +58,13 @@ const builderContext = createContext<BuilderProviderParams | undefined>(
 export function BuilderProvider({ params, children }: BuilderProviderProps) {
   // We rely purely on params passed from parent (which reads from store)
   const value = useMemo<BuilderProviderParams>(() => {
-    const theme = params.mockTheme ?? defaultTheme;
-    const lang = params.mockDefaultLanguage ?? defaultLanguage;
+    const lang = params.selectedLanguage ?? defaultLanguage;
     return {
       ...params,
-      // Ensure defaults if mxissing
       mockProducts: params.mockProducts ?? [],
       mockBenefits: params.mockBenefits ?? {},
-      mockTheme: theme,
-      mockDefaultLanguage: lang,
-      theme,
-      defaultLanguage: lang,
+      selectedLanguage: lang,
+      selectedTheme: params.selectedTheme ?? defaultTheme,
       baseSize: params.baseSize ?? defaultBaseSize,
       projectColors: params.projectColors
         ? mergeProjectColors(defaultProjectColors, params.projectColors)

package/src/hooks/useLocalize.ts

@@ -12,7 +12,7 @@ export function useLocalize(options?: {
 }): LocalizeFn {
   const {
     localization: builderLocalization,
-    mockDefaultLanguage: builderDefaultLanguage,
+    selectedLanguage: builderDefaultLanguage,
   } = useBuilderParams();
   //TODO: genelle (react-native ksımına export et)
   const localization =

package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts

@@ -50,11 +50,16 @@ function normalizeStyleAttributes(node: Node, styleKeys: Set<string>): Node {
   }
 
   const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
-  const prevStyle = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
-  const nextStyle: Record<string, unknown> = { ...prevStyle };
+  // Read from both legacy `style` and `styles` for backwards compatibility.
+  const prevStyleLegacy = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
+  const prevStyles = isPlainObject(nextAttrs.styles) ? nextAttrs.styles : {};
+  const nextStyle: Record<string, unknown> = {
+    ...prevStyleLegacy,
+    ...prevStyles,
+  };
 
   for (const [k, v] of Object.entries(nextAttrs)) {
-    if (k === 'style') continue;
+    if (k === 'style' || k === 'styles') continue;
     if (!styleKeys.has(k)) continue;
 
     // If already set in style, prefer style (drop legacy flat key).
@@ -62,8 +67,10 @@ function normalizeStyleAttributes(node: Node, styleKeys: Set<string>): Node {
     delete nextAttrs[k];
   }
 
+  // Always output as `styles` (schemaVersion=2). Remove legacy `style`.
+  delete nextAttrs.style;
   if (Object.keys(nextStyle).length > 0) {
-    nextAttrs.style = nextStyle;
+    nextAttrs.styles = nextStyle;
   }
 
   return {
@@ -77,16 +84,16 @@ function getStyleSubSchemaKeys(
   schema: Record<string, unknown> | undefined,
 ): Set<string> {
   if (!schema) return new Set();
-  const style = schema.style;
-  if (!isPlainObject(style)) return new Set();
-  return new Set(Object.keys(style));
+  const styles = schema.styles;
+  if (!isPlainObject(styles)) return new Set();
+  return new Set(Object.keys(styles));
 }
 
 function getTopLevelAttributeKeys(
   schema: Record<string, unknown> | undefined,
 ): Set<string> {
   if (!schema) return new Set();
-  const keys = Object.keys(schema).filter((k) => k !== 'style');
+  const keys = Object.keys(schema).filter((k) => k !== 'styles');
   return new Set(keys);
 }
 
@@ -131,7 +138,18 @@ function extractAttributesFromStyle(
   }
 
   const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
-  const style = nextAttrs.style;
+  // Read from both legacy `style` and canonical `styles`.
+  const legacyStyle = nextAttrs.style;
+  const canonicalStyles = nextAttrs.styles;
+  const style = isPlainObject(canonicalStyles)
+    ? canonicalStyles
+    : isPlainObject(legacyStyle)
+      ? legacyStyle
+      : undefined;
+
+  if (!style) {
+    return { ...record, children: nextChildren, attributes: nextAttrs };
+  }
 
   if (!isPlainObject(style)) {
     return { ...record, children: nextChildren, attributes: nextAttrs };
@@ -174,8 +192,11 @@ function extractAttributesFromStyle(
 
   if (Object.keys(nextStyle).length === 0) {
     delete nextAttrs.style;
+    delete nextAttrs.styles;
   } else {
-    nextAttrs.style = nextStyle;
+    // Always output as `styles` (schemaVersion=2). Remove legacy `style`.
+    delete nextAttrs.style;
+    nextAttrs.styles = nextStyle;
   }
 
   return {