@developer_tribe/react-builder 1.0.8 → 1.0.9

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "BIcon",
     "children": "never",
@@ -9,18 +8,15 @@
       "iconType": "iconType",
       "size": "number",
       "strokeWidth": "number"
-    },
-    "defaults": {
-      "iconType": "activity",
-      "fontSize": "16",
-      "strokeWidth": 1.5
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
-    "attributes": {
+    "styles": {
       "iconType": {
         "label": "Icon",
         "description": "Which icon to render.",
@@ -43,5 +39,12 @@
         "sort": 3
       }
     }
+  },
+  "defaults": {
+    "iconType": "activity",
+    "strokeWidth": 1.5,
+    "style": {
+      "fontSize": "16"
+    }
   }
 }

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

@@ -3,6 +3,7 @@ import type { BackgroundImageComponentProps } from './BackgroundImageProps.gener
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -36,7 +37,8 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
     };
 
     if (attrs?.src) {
-      style.backgroundImage = `url(${attrs.src})`;
+      const resolved = resolveImageSrc(attrs.src);
+      if (resolved) style.backgroundImage = `url(${resolved})`;
     }
 
     switch (attrs?.resizeMode) {

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -22,6 +22,7 @@ export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,31 +1,27 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "BackgroundImage",
     "children": "never",
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
-    },
-    "defaults": {
-      "resizeMode": "cover",
-      "width": "100%",
-      "height": "100%",
-      "position": "absolute",
-      "top": 0,
-      "left": 0,
-      "right": 0,
-      "bottom": 0,
-      "zIndex": 0
+      "resizeMode": [
+        "cover",
+        "contain",
+        "stretch",
+        "center"
+      ]
     }
   },
   "meta": {
-    "desiredParent": ["all", "background"],
+    "desiredParent": [
+      "all",
+      "background"
+    ],
     "label": "Background Image",
     "description": "Background image.",
-    "attributes": {
+    "styles": {
       "src": {
         "label": "Src",
         "description": "Image source URL.",
@@ -41,5 +37,18 @@
         "sort": 4
       }
     }
+  },
+  "defaults": {
+    "resizeMode": "cover",
+    "style": {
+      "width": "100%",
+      "height": "100%",
+      "position": "absolute",
+      "top": 0,
+      "left": 0,
+      "right": 0,
+      "bottom": 0,
+      "zIndex": 0
+    }
   }
 }

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

@@ -4,8 +4,10 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { extractTextStyle } from '../../utils/extractTextStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useLocalize } from '../../hooks/useLocalize';
 
 function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
@@ -21,10 +23,23 @@ function Button({ node }: ButtonComponentProps) {
       projectColors: s.projectColors,
     }),
   );
+  const localize = useLocalize();
   const baseStyle = useMemo(
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
+  const textStyle = useMemo(() => {
+    const combined = extractTextStyle(node as any, {
+      appConfig,
+      projectColors,
+    });
+    return {
+      color: combined.color,
+      fontSize: combined.fontSize,
+      fontWeight: combined.fontWeight,
+      textAlign: combined.textAlign,
+    } as React.CSSProperties;
+  }, [node, appConfig, projectColors]);
   const buttonDefaults = useMemo(() => {
     const hasExplicitBackground =
       node?.attributes?.backgroundColor !== undefined &&
@@ -32,6 +47,7 @@ function Button({ node }: ButtonComponentProps) {
       String(node?.attributes?.backgroundColor).trim() !== '';
     return {
       cursor: 'pointer',
+      textDecoration: 'none',
       ...(hasExplicitBackground
         ? undefined
         : { backgroundColor: 'transparent' }),
@@ -44,14 +60,21 @@ function Button({ node }: ButtonComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
+  const label =
+    typeof node.children === 'string' && node.children.trim().length > 0
+      ? node.children
+      : 'Button';
+
   return (
-    <div
+    <a
       attribute-name={attributeName}
       attribute-key={attributeKey}
+      href="#"
+      onClick={(e) => e.preventDefault()}
       style={style}
     >
-      {String(node?.type ?? 'button')}
-    </div>
+      <span style={textStyle}>{localize(label)}</span>
+    </a>
   );
 }
 

package/src/build-components/Button/ButtonProps.generated.ts

@@ -33,6 +33,7 @@ export type FontWeightOptionType =
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "Button",
     "children": "string",
@@ -21,16 +20,13 @@
         "800",
         "900"
       ]
-    },
-    "defaults": {
-      "backgroundColor": "transparent"
     }
   },
   "meta": {
     "desiredParent": ["all"],
     "label": "Button",
     "description": "Simple action button.",
-    "attributes": {
+    "styles": {
       "color": {
         "label": "Color",
         "description": "Text color of the button.",
@@ -53,5 +49,13 @@
         "sort": 3
       }
     }
+  },
+  "defaults": {
+    "style": {
+      "display": "flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "backgroundColor": "transparent"
+    }
   }
 }

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -17,10 +17,12 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
+export type AlignOptionType = 'start' | 'center' | 'end';
 
 export interface CarouselPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -54,6 +56,9 @@ export interface CarouselPropsGenerated {
     left?: string;
     right?: string;
     zIndex?: number;
+    loop?: boolean;
+    dragFree?: boolean;
+    align?: AlignOptionType;
   };
 }
 

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

@@ -1,19 +1,30 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "extends": "View",
     "type": "Carousel",
-    "children": "CarouselItem",
-    "attributes": {},
-    "defaults": {
-      "flexDirection": "row"
+    "children": "node",
+    "attributes": {
+      "loop": "boolean",
+      "dragFree": "boolean",
+      "align": [
+        "start",
+        "center",
+        "end"
+      ]
     }
   },
   "meta": {
-    "desiredParent": ["=CarouselProvider"],
+    "desiredParent": [
+      "=CarouselProvider"
+    ],
     "label": "Carousel",
     "description": "Container for carousel items.",
-    "attributes": {}
+    "styles": {}
+  },
+  "defaults": {
+    "style": {
+      "flexDirection": "row"
+    }
   }
 }

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -25,6 +25,7 @@ export type ButtonTypeOptionType =
 export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,20 +1,26 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "CarouselButtons",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "buttonType": ["previous_button", "next_button", "skip_button"],
+      "buttonType": [
+        "previous_button",
+        "next_button",
+        "skip_button"
+      ],
       "skipNumber": "number"
     }
   },
   "meta": {
-    "desiredParent": [">OnboardProvider", ">CarouselProvider"],
+    "desiredParent": [
+      ">OnboardProvider",
+      ">CarouselProvider"
+    ],
     "label": "Carousel Buttons",
     "description": "Renders built-in carousel buttons.",
-    "attributes": {
+    "styles": {
       "buttonType": {
         "label": "Button Type",
         "description": "Which carousel button to show.",

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -28,6 +28,7 @@ export type DotTypeOptionType =
 export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "CarouselDots",
     "children": "never",
@@ -17,10 +16,12 @@
     }
   },
   "meta": {
-    "desiredParent": [">CarouselProvider"],
+    "desiredParent": [
+      ">CarouselProvider"
+    ],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
-    "attributes": {
+    "styles": {
       "dotType": {
         "label": "Dot Type",
         "description": "Style used for the dots.",

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface CarouselItemPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "CarouselItem",
     "children": "node",
@@ -8,9 +7,11 @@
     "attributes": {}
   },
   "meta": {
-    "desiredParent": ["=Carousel"],
+    "desiredParent": [
+      "=Carousel"
+    ],
     "label": "Carousel Item",
     "description": "Single slide inside a carousel.",
-    "attributes": {}
+    "styles": {}
   }
 }

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

@@ -5,6 +5,8 @@ import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useRenderStore } from '../../store';
+import { isCarousel } from '../../utils/isCarousel';
+import type { Node, NodeData } from '../../types/Node';
 
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
@@ -22,6 +24,38 @@ function CarouselProvider({ node }: CarouselProviderComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
+
+  const { carouselChild, otherChildren } = useMemo(() => {
+    const children = node.children as Node;
+
+    if (!children) {
+      return {
+        carouselChild: null as NodeData | null,
+        otherChildren: [] as Node[],
+      };
+    }
+
+    if (Array.isArray(children)) {
+      const idx = children.findIndex((c) => isCarousel(c));
+      const carousel = idx >= 0 ? (children[idx] as NodeData) : null;
+      const rest = idx >= 0 ? children.filter((_, i) => i !== idx) : children;
+      return { carouselChild: carousel, otherChildren: rest };
+    }
+
+    if (isCarousel(children)) {
+      return {
+        carouselChild: children as NodeData,
+        otherChildren: [] as Node[],
+      };
+    }
+
+    // Non-carousel single child (e.g. dots/buttons): treat as "other" so we don't mount embla with an invalid DOM.
+    return {
+      carouselChild: null as NodeData | null,
+      otherChildren: [children],
+    };
+  }, [node.children]);
+
   return (
     <carouselContext.Provider value={emblaApi}>
       <div
@@ -31,10 +65,18 @@ function CarouselProvider({ node }: CarouselProviderComponentProps) {
         style={viewStyle}
       >
         <div className="embla">
-          <div className="embla__viewport" ref={emblaRef}>
-            {node.children && <RenderNode node={node.children} />}
+          <div
+            className="embla__viewport"
+            ref={carouselChild ? emblaRef : undefined}
+          >
+            {carouselChild ? <RenderNode node={carouselChild} /> : null}
           </div>
         </div>
+        {otherChildren.length > 0
+          ? otherChildren.map((child, index) => (
+              <RenderNode key={index} node={child} />
+            ))
+          : null}
       </div>
     </carouselContext.Provider>
   );

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface CarouselProviderPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -3,6 +3,7 @@ import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractImageStyle } from '../../utils/extractImageStyle';
+import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -36,7 +37,7 @@ function Image({ node }: ImageComponentProps) {
       key={node.key + (node.attributes?.src ?? '-')}
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      src={node.attributes?.src}
+      src={resolveImageSrc(node.attributes?.src)}
       style={style}
       alt=""
     />

package/src/build-components/Image/ImageProps.generated.ts

@@ -22,6 +22,7 @@ export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export interface ImagePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "Image",
     "children": "never",
@@ -9,14 +8,21 @@
       "src": "string",
       "width": "size",
       "height": "size",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "resizeMode": [
+        "cover",
+        "contain",
+        "stretch",
+        "center"
+      ]
     }
   },
   "meta": {
-    "desiredParent": ["all"],
+    "desiredParent": [
+      "all"
+    ],
     "label": "Image",
     "description": "Shows an image or graphic.",
-    "attributes": {
+    "styles": {
       "src": {
         "label": "Src",
         "description": "Image source URL.",

package/src/build-components/Main/MainProps.generated.ts

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface MainPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
@@ -55,7 +56,6 @@ export interface MainPropsGenerated {
     right?: string;
     zIndex?: number;
     useSafeAreaView?: boolean;
-    [key: string]: string | number | boolean | undefined;
   };
 }
 

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

@@ -1,9 +1,8 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": true,
+  "schemaVersion": 2,
   "pattern": {
     "type": "Main",
-    "children": ["node", "array"],
+    "children": "node",
     "extends": "View",
     "attributes": {
       "useSafeAreaView": "boolean"
@@ -11,17 +10,21 @@
   },
   "defaults": {
     "useSafeAreaView": true,
-    "width": "100%",
-    "height": "100%",
-    "flex": 1,
-    "position": "relative"
+    "style": {
+      "width": "100%",
+      "height": "100%",
+      "flex": 1,
+      "position": "relative"
+    }
   },
   "meta": {
-    "desiredParent": ["root"],
+    "desiredParent": [
+      "root"
+    ],
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,
-    "attributes": {
+    "styles": {
       "useSafeAreaView": {
         "label": "Use Safe Area View",
         "description": "Wraps content with a safe-area-aware container (when supported by the target).",

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -21,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 export interface OnboardPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;

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

@@ -1,20 +1,25 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "Onboard",
     "children": "node",
     "extends": "View",
-    "attributes": {},
-    "defaults": {
-      "flexDirection": "row"
-    }
+    "attributes": {}
   },
   "meta": {
-    "desiredParent": ["=OnboardProvider"],
-    "desiredChildren": ["=OnboardItem"],
+    "desiredParent": [
+      "=OnboardProvider"
+    ],
+    "desiredChildren": [
+      "=OnboardItem"
+    ],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
-    "attributes": {}
+    "styles": {}
+  },
+  "defaults": {
+    "style": {
+      "flexDirection": "row"
+    }
   }
 }

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -36,6 +36,7 @@ export interface EventObjectGenerated {
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;