@developer_tribe/react-builder 1.2.34 → 1.2.36

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -81,22 +81,14 @@ export function useAttributesEditorModel({
 
   const isStyleKeyForWrite = useCallback(
     (name: string) => {
-      const metaCategory = attributeMeta?.[name]?.category;
-      if (metaCategory === 'style') return true;
+      // Primary: is this key explicitly declared under schema.styles (nested)?
+      const nestedStyles = (schema as Record<string, unknown>).styles;
+      if (isPlainObject(nestedStyles) && name in nestedStyles) return true;
+      // Fallback: global View+Text style keys (inherited properties not in own schema)
       return styleAttributeKeys.has(name);
     },
-    [attributeMeta, styleAttributeKeys],
+    [schema, styleAttributeKeys],
   );
-  const isStyleKeyForRead = useCallback(
-    (name: string) => {
-      if (isStyleKeyForWrite(name)) return true;
-      return !!(
-        styleBag && Object.prototype.hasOwnProperty.call(styleBag, name)
-      );
-    },
-    [isStyleKeyForWrite, styleBag],
-  );
-
   const legacyFlatStyleKeys = useMemo(
     () => findLegacyFlatStyleKeys(attributes, isStyleKeyForWrite),
     [attributes, isStyleKeyForWrite],
@@ -136,12 +128,12 @@ export function useAttributesEditorModel({
 
   const getAttributeValue = useCallback(
     (name: string) => {
-      if (isStyleKeyForRead(name)) {
+      if (isStyleKeyForWrite(name)) {
         return styleBag?.[name];
       }
       return (attributes as Record<string, unknown>)?.[name];
     },
-    [attributes, isStyleKeyForRead, styleBag],
+    [attributes, isStyleKeyForWrite, styleBag],
   );
 
   const projectColorsForPicker = useMemo<ProjectColors | undefined>(
@@ -379,6 +371,15 @@ export function useAttributesEditorModel({
         if (name in nextAttrs) delete nextAttrs[name];
       } else {
         nextAttrs[name] = val;
+        // If this key was previously misplaced inside styles bag (e.g. due to a
+        // past editor bug), clean it up so there is no stale duplicate.
+        if (isPlainObject(nextAttrs.styles) && name in nextAttrs.styles) {
+          const cleanedStyles = { ...nextAttrs.styles };
+          delete cleanedStyles[name];
+          nextAttrs.styles = Object.keys(cleanedStyles).length
+            ? cleanedStyles
+            : undefined;
+        }
       }
       const next: NodeData<NodeDefaultAttribute> = {
         ...baseData,

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

@@ -46,5 +46,3 @@ export function BIcon({ node }: BIconComponentProps) {
     />
   );
 }
-
-export default React.memo(BIcon);

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -24,6 +24,7 @@ export interface BIconStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/BackgroundImage/pattern.json

@@ -27,15 +27,7 @@
     "desiredParent": ["all", "background"],
     "label": "Background Image",
     "description": "Background image.",
-    "styles": {
-      "resizeMode": {
-        "label": "Resize Mode",
-        "description": "How the image fits its container.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 4
-      }
-    },
+    "styles": {},
     "attributes": {
       "src": {
         "label": "Src",
@@ -43,6 +35,13 @@
         "category": "other",
         "specialCategory": null,
         "sort": 1
+      },
+      "resizeMode": {
+        "label": "Resize Mode",
+        "description": "How the image fits its container.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 4
       }
     }
   },

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

@@ -74,5 +74,3 @@ export function Button({ node }: ButtonComponentProps) {
     </a>
   );
 }
-
-export default React.memo(Button);

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

@@ -134,7 +134,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
             style={{
               width: dotSize,
               height: dotSize,
-              backgroundColor: dotColor,
+              backgroundColor: dotColor ?? undefined,
               opacity: isDotSelected ? 1 : inactiveDotOpacity,
               borderRadius: '9999px',
               border: 0,

package/src/build-components/CarouselDots/pattern.json

@@ -32,7 +32,7 @@
     "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
-    "styles": {
+    "attributes": {
       "dotType": {
         "label": "Dot Type",
         "description": "Style used for the dots.",

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

@@ -23,5 +23,3 @@ export function CarouselItem({ node }: CarouselItemComponentProps) {
     </div>
   );
 }
-
-export default React.memo(CarouselItem);

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -24,6 +24,7 @@ export interface CountDownStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: never;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -58,7 +59,6 @@ export interface CountDownStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  textAlign?: never;
 }
 
 export interface CountDownPropsGenerated {

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

@@ -11,7 +11,6 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
-import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
@@ -76,7 +75,7 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
       onClick={handleClick}
       style={{
         ...viewStyle,
-        color: textColor,
+        color: textColor ?? undefined,
         border: 'none',
         display: 'flex',
         justifyContent: 'center',
@@ -87,5 +86,3 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
     </button>
   );
 }
-
-export default React.memo(OnboardButton);

package/src/build-components/OnboardButtons/pattern.json

@@ -31,16 +31,14 @@
     "desiredParent": ["=OnboardItem"],
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
-    "styles": {
+    "attributes": {
       "seperatorColor": {
         "label": "Seperator Color",
         "description": "Color of the divider line.",
         "category": "style",
         "specialCategory": null,
         "sort": 5
-      }
-    },
-    "attributes": {
+      },
       "buttonType": {
         "label": "Button Type",
         "description": "Which onboard button to show.",

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

@@ -21,10 +21,12 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
   const attrRecord = toAttributeRecord(attrs);
+  // Backward compat: existing JSON may still have these in styles bag (old editor bug).
+  // handleAttributeChange will clean them up on next edit.
   const stylesBag = getStyleBag(attrs);
   const dotType =
-    (stylesBag?.dotType as string | undefined) ??
     (attrRecord.dotType as string | undefined) ??
+    (stylesBag?.dotType as string | undefined) ??
     'normal_dot';
   const {
     previewMode,
@@ -35,15 +37,15 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
   } = useBuilderParams();
   // OnboardDot specific attributes
   const inactiveDotOpacity =
-    (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
     0.3;
   const inactiveDotColorOverride =
-    (stylesBag?.inactive_dot_color as string | undefined) ??
-    (attrRecord.inactive_dot_color as string | undefined);
+    (attrRecord.inactive_dot_color as string | undefined) ??
+    (stylesBag?.inactive_dot_color as string | undefined);
   const activeDotColor =
-    (stylesBag?.active_dot_color as string | undefined) ??
-    (attrRecord.active_dot_color as string | undefined);
+    (attrRecord.active_dot_color as string | undefined) ??
+    (stylesBag?.active_dot_color as string | undefined);
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
@@ -69,8 +71,8 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
   const dotThicknessRaw =
-    (stylesBag?.dot_thickness as string | number | undefined) ??
-    (attrRecord.dot_thickness as string | number | undefined);
+    (attrRecord.dot_thickness as string | number | undefined) ??
+    (stylesBag?.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
     const parsed = parseSize(dotThicknessRaw, baseSize);
     if (parsed === undefined) return '10px';
@@ -160,5 +162,3 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     </div>
   );
 }
-
-export default React.memo(OnboardDot);

package/src/build-components/OnboardDot/pattern.json

@@ -49,7 +49,7 @@
         "specialCategory": null,
         "sort": 1
       },
-          "dot_thickness": {
+      "dot_thickness": {
         "label": "Dot Thickness",
         "description": "Dot size/diameter.",
         "category": "style",
@@ -77,7 +77,6 @@
         "specialCategory": null,
         "sort": 5
       }
-  }
+    }
   }
 }
- 

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

@@ -9,7 +9,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { defaultLocalization } from '../../types/PreviewConfig';
 import { parseColor } from '../../utils/parseColor';
-import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
+import { toAttributeRecord } from '../../utils/attributeStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -94,6 +94,7 @@ function buildSegments(
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   useLogRender('OnboardFooter');
   node = useNode(node);
+  console.log('node', node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
   const {
     localization: builderLocalization,
@@ -110,18 +111,12 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
 
   const attrs = node?.attributes;
   const attrRecord = toAttributeRecord(attrs);
-  const styleBag = getStyleBag(attrs);
   const text = t(attrs?.textLocalizationKey);
   const textStyle = useExtractTextStyle(node, true);
   const viewStyle = useExtractViewStyle(node);
 
-  // Read linked-word colors from both top-level attributes and the styles bag.
-  // The editor saves them inside `styles` (meta category === 'style'),
-  // but legacy JSON may have them at the top level.
-  const rawFirstColor = (attrRecord.linkedWordFirstColor ??
-    styleBag?.linkedWordFirstColor) as string | undefined;
-  const rawSecondColor = (attrRecord.linkedWordSecondColor ??
-    styleBag?.linkedWordSecondColor) as string | undefined;
+  const rawFirstColor = attrRecord.linkedWordFirstColor as string | undefined;
+  const rawSecondColor = attrRecord.linkedWordSecondColor as string | undefined;
 
   // Parse colors for linked words
   const parsedFirstColor = useMemo(
@@ -169,12 +164,12 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
           const { segments, matchCount } = buildSegments(text, [
             {
               value: firstText,
-              color: parsedFirstColor,
+              color: parsedFirstColor ?? undefined,
               page: attrs?.linkedWordFirstPage,
             },
             {
               value: secondText,
-              color: parsedSecondColor,
+              color: parsedSecondColor ?? undefined,
               page: attrs?.linkedWordSecondPage,
             },
           ]);
@@ -209,7 +204,7 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
                     <span
                       style={{
                         ...mergedTextStyle,
-                        color: parsedFirstColor,
+                        color: parsedFirstColor ?? undefined,
                       }}
                       onClick={() => handleClick(attrs?.linkedWordFirstPage)}
                     >
@@ -220,7 +215,7 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
                     <span
                       style={{
                         ...mergedTextStyle,
-                        color: parsedSecondColor,
+                        color: parsedSecondColor ?? undefined,
                       }}
                       onClick={() => handleClick(attrs?.linkedWordSecondPage)}
                     >

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -24,6 +24,7 @@ export interface OnboardFooterStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -63,9 +63,6 @@ export interface OnboardItemPropsGenerated {
     styles?: OnboardItemStyleGenerated;
     scrollable?: boolean;
     display?: DisplayOptionType;
-    gap?: string;
-    flexDirection?: FlexDirectionOptionType;
-    paddingHorizontal?: string;
   };
 }
 

package/src/build-components/OnboardItem/pattern.json

@@ -8,9 +8,11 @@
     "extends": "View",
     "attributes": {
       "display": ["flex", "block"],
-      "gap": "size",
-      "flexDirection": ["row", "column"],
-      "paddingHorizontal": "size"
+      "styles": {
+        "gap": "size",
+        "flexDirection": ["row", "column"],
+        "paddingHorizontal": "size"
+      }
     }
   },
   "defaults": {
@@ -34,26 +36,28 @@
         "specialCategory": null,
         "sort": 1
       },
-      "gap": {
-        "label": "Gap",
-        "description": "Space between child blocks.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 2
-      },
-      "flexDirection": {
-        "label": "Flex Direction",
-        "description": "Order of child stacking.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 3
-      },
-      "paddingHorizontal": {
-        "label": "Padding Horizontal",
-        "description": "Left and right padding.",
-        "category": "container",
-        "specialCategory": "padding",
-        "sort": 4
+      "styles": {
+        "gap": {
+          "label": "Gap",
+          "description": "Space between child blocks.",
+          "category": "container",
+          "specialCategory": null,
+          "sort": 2
+        },
+        "flexDirection": {
+          "label": "Flex Direction",
+          "description": "Order of child stacking.",
+          "category": "container",
+          "specialCategory": null,
+          "sort": 3
+        },
+        "paddingHorizontal": {
+          "label": "Padding Horizontal",
+          "description": "Left and right padding.",
+          "category": "container",
+          "specialCategory": "padding",
+          "sort": 4
+        }
       }
     }
   }

package/src/build-components/OnboardProvider/pattern.json

@@ -30,33 +30,35 @@
         "specialCategory": null,
         "sort": -10
       },
-      "paddingTop": {
-        "label": "Padding Top",
-        "description": "Top padding for the provider.",
-        "category": "container",
-        "specialCategory": "padding",
-        "sort": 1
-      },
-      "paddingRight": {
-        "label": "Padding Right",
-        "description": "Right padding for the provider.",
-        "category": "container",
-        "specialCategory": "padding",
-        "sort": 2
-      },
-      "paddingBottom": {
-        "label": "Padding Bottom",
-        "description": "Bottom padding for the provider.",
-        "category": "container",
-        "specialCategory": "padding",
-        "sort": 3
-      },
-      "paddingLeft": {
-        "label": "Padding Left",
-        "description": "Left padding for the provider.",
-        "category": "container",
-        "specialCategory": "padding",
-        "sort": 4
+      "styles": {
+        "paddingTop": {
+          "label": "Padding Top",
+          "description": "Top padding for the provider.",
+          "category": "container",
+          "specialCategory": "padding",
+          "sort": 1
+        },
+        "paddingRight": {
+          "label": "Padding Right",
+          "description": "Right padding for the provider.",
+          "category": "container",
+          "specialCategory": "padding",
+          "sort": 2
+        },
+        "paddingBottom": {
+          "label": "Padding Bottom",
+          "description": "Bottom padding for the provider.",
+          "category": "container",
+          "specialCategory": "padding",
+          "sort": 3
+        },
+        "paddingLeft": {
+          "label": "Padding Left",
+          "description": "Left padding for the provider.",
+          "category": "container",
+          "specialCategory": "padding",
+          "sort": 4
+        }
       }
     }
   }

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -24,6 +24,7 @@ export interface OnboardSubtitleStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -24,6 +24,7 @@ export interface OnboardTitleStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

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

@@ -63,5 +63,3 @@ export function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
     </a>
   );
 }
-
-export default React.memo(PaywallCloseButton);

package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts

@@ -24,6 +24,7 @@ export interface PaywallCloseButtonStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/PriceTag/PriceTagProps.generated.ts

@@ -28,6 +28,7 @@ export interface PriceTagStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/Pricing/PricingProps.generated.ts

@@ -24,6 +24,7 @@ export interface PricingStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/Promo/PromoProps.generated.ts

@@ -24,6 +24,7 @@ export interface PromoStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;

package/src/build-components/RadioButton/pattern.json

@@ -16,7 +16,7 @@
     "desiredParent": ["all"],
     "label": "Radio Button",
     "description": "Generic radio button icon.",
-    "styles": {
+    "attributes": {
       "color": {
         "label": "Color",
         "description": "Radio color.",
@@ -30,9 +30,7 @@
         "category": "style",
         "specialCategory": null,
         "sort": 2
-      }
-    },
-    "attributes": {
+      },
       "selected": {
         "label": "Selected",
         "description": "Whether the radio is selected.",

package/src/build-components/Separator/pattern.json

@@ -21,31 +21,31 @@
     "desiredParent": ["all"],
     "label": "Separator",
     "description": "Horizontal line separator.",
-    "styles": {
-      "backgroundColor": {
-        "label": "Color",
-        "description": "Separator line color.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 1
-      }
-    },
     "attributes": {
-      "width": {
-        "label": "Width",
-        "description": "Separator width.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 1,
-        "preferredScale": "s"
-      },
-      "height": {
-        "label": "Height",
-        "description": "Separator thickness.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 2,
-        "preferredScale": "vs"
+      "styles": {
+        "backgroundColor": {
+          "label": "Color",
+          "description": "Separator line color.",
+          "category": "style",
+          "specialCategory": null,
+          "sort": 1
+        },
+        "width": {
+          "label": "Width",
+          "description": "Separator width.",
+          "category": "container",
+          "specialCategory": null,
+          "sort": 1,
+          "preferredScale": "s"
+        },
+        "height": {
+          "label": "Height",
+          "description": "Separator thickness.",
+          "category": "container",
+          "specialCategory": null,
+          "sort": 2,
+          "preferredScale": "vs"
+        }
       }
     }
   },

package/src/build-components/Text/TextProps.generated.ts

@@ -58,6 +58,7 @@ export interface TextStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
+  textAlign?: string;
 }
 
 export interface TextPropsGenerated {

package/src/build-components/Text/pattern.json

@@ -14,7 +14,8 @@
         "color": "color",
         "fontSize": "size",
         "fontFamily": "fontFamily",
-        "fontWeight": "fontWeight"
+        "fontWeight": "fontWeight",
+        "textAlign": "string"
       }
     },
     "defaults": {