@developer_tribe/react-builder 1.2.22 → 1.2.24

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

@@ -9,7 +9,9 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
   node = useNode(node);
-  const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    node.attributes as Parameters<typeof useEmblaCarousel>[0],
+  );
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'carouselProvider';
   const attributeKey = node.key ?? generatedId;

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

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -19,6 +18,7 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface ImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
@@ -55,6 +55,7 @@ export interface ImageStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
+  resizeMode?: ResizeModeOptionType;
 }
 
 export interface ImagePropsGenerated {
@@ -65,9 +66,6 @@ export interface ImagePropsGenerated {
     title?: string;
     description?: string;
     src?: string;
-    width?: string;
-    height?: string;
-    resizeMode?: ResizeModeOptionType;
   };
 }
 

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

@@ -8,16 +8,27 @@
       "title": "title",
       "description": "description",
       "src": "string",
-      "width": "size",
-      "height": "size",
-      "resizeMode": ["cover", "contain", "stretch", "center"]
+      "style": {
+        "resizeMode": ["cover", "contain", "stretch", "center"]
+      }
+    },
+    "defaults": {
+      "resizeMode": "contain"
     }
   },
   "meta": {
     "desiredParent": ["all"],
     "label": "Image",
     "description": "Shows an image or graphic.",
-    "styles": {},
+    "styles": {
+      "resizeMode": {
+        "label": "Resize Mode",
+        "description": "How the image fits the frame.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      }
+    },
     "attributes": {
       "src": {
         "label": "Src",
@@ -25,27 +36,6 @@
         "category": "other",
         "specialCategory": null,
         "sort": 1
-      },
-      "width": {
-        "label": "Width",
-        "description": "Image width.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 2
-      },
-      "height": {
-        "label": "Height",
-        "description": "Image height.",
-        "category": "container",
-        "specialCategory": null,
-        "sort": 3
-      },
-      "resizeMode": {
-        "label": "Resize Mode",
-        "description": "How the image fits the frame.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 4
       }
     }
   }

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

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import type { NavigationBarColorComponentProps } from './NavigationBarColorProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { parseColor } from '../../utils/parseColor';
+import { getStyleBag } from '../../utils/attributeStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+
+function NavigationBarColor({ node }: NavigationBarColorComponentProps) {
+  useLogRender('NavigationBarColor');
+  node = useNode(node);
+
+  const { appConfig, projectColors } = useBuilderParams();
+  const setNavBarOverrideColor = useRenderStore(
+    (s) => s.setNavBarOverrideColor,
+  );
+
+  const rawBg = getStyleBag(node.attributes)?.backgroundColor as
+    | string
+    | undefined;
+  const resolvedColor = parseColor(rawBg, {
+    projectColors,
+    theme: appConfig?.theme,
+  });
+
+  useEffect(() => {
+    if (resolvedColor) {
+      setNavBarOverrideColor(resolvedColor);
+    }
+    return () => {
+      setNavBarOverrideColor(null);
+    };
+  }, [resolvedColor, setNavBarOverrideColor]);
+
+  return null;
+}
+
+export default React.memo(NavigationBarColor);

package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts

@@ -0,0 +1,71 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface NavigationBarColorStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface NavigationBarColorPropsGenerated {
+  child: string;
+  attributes: {
+    style?: NavigationBarColorStyleGenerated;
+    scrollable?: boolean;
+    title?: string;
+    description?: string;
+  };
+}
+
+export interface NavigationBarColorComponentProps {
+  node: NodeData<NavigationBarColorPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,34 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "NavigationBarColor",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "title": "title",
+      "description": "description",
+      "style": {
+        "backgroundColor": "color"
+      }
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Navigation Bar Color",
+    "description": "Sets the OS navigation bar background color.",
+    "styles": {
+      "backgroundColor": {
+        "label": "Background Color",
+        "description": "Navigation bar background color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "backgroundColor": "THEME_COLORS.BACKGROUND"
+    }
+  }
+}

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

@@ -10,13 +10,16 @@ import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
+import { parseColor } from '../../utils/parseColor';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { appConfig } = useBuilderParams();
+  const { appConfig, projectColors } = useBuilderParams();
+  const theme = appConfig?.theme;
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
@@ -25,14 +28,25 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const attributeKey = node.key ?? generatedId;
 
   const attrs = node.attributes;
-  const styleBag = attrs?.style;
+  const attrRecord = toAttributeRecord(attrs);
+  const styleBag = getStyleBag(attrs);
   const labelRaw = attrs?.labelKey ?? '';
   const localize = useLocalize({ appConfig });
   const label = localize(labelRaw);
 
-  const flex = styleBag?.flex ?? 1;
-  const textColor = attrs?.button_text_color ?? '#FFFFFF';
-  const backgroundColor = attrs?.button_background_color ?? '#0066FF';
+  const flex = (attrRecord.flex ?? styleBag?.flex ?? 1) as number;
+
+  // The editor saves color attrs inside `styles` (meta category === 'style'),
+  // but legacy JSON may have them at the top level.
+  const rawTextColor = (attrRecord.button_text_color ??
+    styleBag?.button_text_color) as string | undefined;
+  const rawBgColor = (attrRecord.button_background_color ??
+    styleBag?.button_background_color) as string | undefined;
+
+  const textColor =
+    parseColor(rawTextColor, { projectColors, theme }) ?? '#FFFFFF';
+  const backgroundColor =
+    parseColor(rawBgColor, { projectColors, theme }) ?? '#0066FF';
   const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {

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

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
-import type { Node } from '../../types/Node';
+import type { Node, NodeData } from '../../types/Node';
 import type { OnboardButtonsComponentProps } from './OnboardButtonsProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
@@ -9,6 +9,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
@@ -28,13 +29,10 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     }
   }, [ctx.selectedIndex]);
 
-  const attributes = node.attributes as any;
-  const styleBag = attributes?.style as Record<string, unknown> | undefined as
-    | Record<string, unknown>
-    | undefined;
+  const attrRecord = toAttributeRecord(node.attributes);
+  const styleBag = getStyleBag(node.attributes);
   const direction =
-    (attributes?.buttons_direction ?? (styleBag as any)?.buttons_direction) ===
-    'column'
+    (attrRecord.buttons_direction ?? styleBag?.buttons_direction) === 'column'
       ? 'column'
       : 'row';
 
@@ -62,9 +60,9 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   const generatedId = useId();
 
   // New condition logic: hide when condition is carousel-index and does not match
-  const condition = attributes?.condition ?? (styleBag as any)?.condition;
+  const condition = attrRecord.condition ?? styleBag?.condition;
   const conditionVariable =
-    attributes?.conditionVariable ?? (styleBag as any)?.conditionVariable;
+    attrRecord.conditionVariable ?? styleBag?.conditionVariable;
   const shouldHide =
     condition === 'carousel-index' &&
     typeof conditionVariable === 'number' &&
@@ -81,7 +79,7 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
       style={{ ...viewStyle, boxSizing: 'border-box' }}
     >
       {children.map((child, idx) => (
-        <RenderNode key={(child as any)?.key ?? idx} node={child} />
+        <RenderNode key={(child as NodeData)?.key ?? idx} node={child} />
       ))}
     </div>
   );

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

@@ -10,6 +10,7 @@ import { useMergedStyle } from '../../utils/useMergedStyle';
 import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
 import { defaultAppConfig } from '../../types/PreviewConfig';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
@@ -20,12 +21,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
-  const stylesBag =
-    ((attrs as any)?.styles as Record<string, unknown> | undefined) ??
-    ((attrs as any)?.style as Record<string, unknown> | undefined) ??
-    undefined;
+  const attrRecord = toAttributeRecord(attrs);
+  const stylesBag = getStyleBag(attrs);
   const dotType =
-    (stylesBag?.dotType as any) ?? (attrs as any)?.dotType ?? 'normal_dot';
+    (stylesBag?.dotType as string | undefined) ??
+    (attrRecord.dotType as string | undefined) ??
+    'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -43,14 +44,14 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     : GHOST_DOT_LIGHT_COLOR;
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
-    (attrs as any)?.inactive_dot_opacity ??
+    (attrRecord.inactive_dot_opacity as number | undefined) ??
     0.3;
   const inactiveDotColorOverride =
     (stylesBag?.inactive_dot_color as string | undefined) ??
-    (attrs as any)?.inactive_dot_color;
+    (attrRecord.inactive_dot_color as string | undefined);
   const activeDotColor =
     (stylesBag?.active_dot_color as string | undefined) ??
-    (attrs as any)?.active_dot_color;
+    (attrRecord.active_dot_color as string | undefined);
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
@@ -83,7 +84,8 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
   const dotThicknessRaw =
-    (stylesBag?.dot_thickness as any) ?? (attrs as any)?.dot_thickness;
+    (stylesBag?.dot_thickness as string | number | undefined) ??
+    (attrRecord.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
     const parsed = parseSize(dotThicknessRaw);
     if (parsed === undefined) return '10px';
@@ -100,7 +102,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     const n = Number.isFinite(px) ? px : 10;
     return `${Math.max(0, n / 3)}px`;
   }, [dotSizeCss]);
-  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const gapValue = style.gap ?? dotGapCss;
   const containerStyle = useMergedStyle(style, {
     display: 'flex',
     flexWrap: 'wrap',

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

@@ -9,6 +9,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { defaultAppConfig } from '../../types/PreviewConfig';
 import { parseColor } from '../../utils/parseColor';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -107,26 +108,36 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   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;
+
   // Parse colors for linked words
   const parsedFirstColor = useMemo(
     () =>
-      parseColor(attrs?.linkedWordFirstColor, {
+      parseColor(rawFirstColor, {
         projectColors,
         theme,
       }),
-    [attrs?.linkedWordFirstColor, projectColors, theme],
+    [rawFirstColor, projectColors, theme],
   );
   const parsedSecondColor = useMemo(
     () =>
-      parseColor(attrs?.linkedWordSecondColor, {
+      parseColor(rawSecondColor, {
         projectColors,
         theme,
       }),
-    [attrs?.linkedWordSecondColor, projectColors, theme],
+    [rawSecondColor, projectColors, theme],
   );
 
   const mergedTextStyle = useMergedStyle(textStyle, {

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

@@ -70,7 +70,7 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
           ...node,
           type: 'image',
           sourceType: attributeName,
-        } as unknown as ImageComponentProps['node']
+        } as ImageComponentProps['node']
       }
     />
   );

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -21,6 +21,7 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImageStyleGenerated {
+  resizeMode?: ResizeModeOptionType;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -64,9 +65,6 @@ export interface OnboardImagePropsGenerated {
     title?: string;
     description?: string;
     src?: string;
-    width?: string;
-    height?: string;
-    resizeMode?: ResizeModeOptionType;
     scrollable?: boolean;
     video_url?: string;
     lottie?: string;

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

@@ -20,7 +20,9 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   node = useNode(node);
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'OnboardProvider';
-  const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    node.attributes as Parameters<typeof useEmblaCarousel>[0],
+  );
   const [selectedIndex, setSelectedIndex] = useState(0);
   const attributeKey = node.key ?? generatedId;
 

package/src/build-components/RenderNode.generated.tsx

@@ -25,6 +25,7 @@ import type { CountDownComponentProps } from './CountDown/CountDownProps.generat
 import type { CounterComponentProps } from './Counter/CounterProps.generated';
 import type { ImageComponentProps } from './Image/ImageProps.generated';
 import type { MainComponentProps } from './Main/MainProps.generated';
+import type { NavigationBarColorComponentProps } from './NavigationBarColor/NavigationBarColorProps.generated';
 import type { OnboardComponentProps } from './Onboard/OnboardProps.generated';
 import type { OnboardButtonComponentProps } from './OnboardButton/OnboardButtonProps.generated';
 import type { OnboardButtonsComponentProps } from './OnboardButtons/OnboardButtonsProps.generated';
@@ -42,6 +43,8 @@ import type { PaywallOptionsComponentProps } from './PaywallOptions/PaywallOptio
 import type { PaywallProviderComponentProps } from './PaywallProvider/PaywallProviderProps.generated';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
 import type { RadioButtonComponentProps } from './RadioButton/RadioButtonProps.generated';
+import type { SeparatorComponentProps } from './Separator/SeparatorProps.generated';
+import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
 import type { TextComponentProps } from './Text/TextProps.generated';
 import type { ViewComponentProps } from './View/ViewProps.generated';
 import BIcon from './BIcon/BIcon';
@@ -56,6 +59,7 @@ import { CountDown } from './CountDown/CountDown';
 import { Counter } from './Counter/Counter';
 import Image from './Image/Image';
 import Main from './Main/Main';
+import NavigationBarColor from './NavigationBarColor/NavigationBarColor';
 import Onboard from './Onboard/Onboard';
 import OnboardButton from './OnboardButton/OnboardButton';
 import OnboardButtons from './OnboardButtons/OnboardButtons';
@@ -73,6 +77,8 @@ import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
 import RadioButton from './RadioButton/RadioButton';
+import Separator from './Separator/Separator';
+import StatusBarColor from './StatusBarColor/StatusBarColor';
 import Text from './Text/Text';
 import View from './View/View';
 
@@ -89,6 +95,7 @@ type BuilderNode =
   | (CounterComponentProps['node'] & { type: 'Counter' })
   | (ImageComponentProps['node'] & { type: 'Image' })
   | (MainComponentProps['node'] & { type: 'Main' })
+  | (NavigationBarColorComponentProps['node'] & { type: 'NavigationBarColor' })
   | (OnboardComponentProps['node'] & { type: 'Onboard' })
   | (OnboardButtonComponentProps['node'] & { type: 'OnboardButton' })
   | (OnboardButtonsComponentProps['node'] & { type: 'OnboardButtons' })
@@ -108,6 +115,8 @@ type BuilderNode =
       type: 'PaywallSubscribeButton';
     })
   | (RadioButtonComponentProps['node'] & { type: 'RadioButton' })
+  | (SeparatorComponentProps['node'] & { type: 'Separator' })
+  | (StatusBarColorComponentProps['node'] & { type: 'StatusBarColor' })
   | (TextComponentProps['node'] & { type: 'Text' })
   | (ViewComponentProps['node'] & { type: 'View' });
 
@@ -165,6 +174,8 @@ function RenderNode({ node }: { node: Node }) {
       return <Image node={normalizedNode} />;
     case 'Main':
       return <Main node={normalizedNode} />;
+    case 'NavigationBarColor':
+      return <NavigationBarColor node={normalizedNode} />;
     case 'Onboard':
       return <Onboard node={normalizedNode} />;
     case 'OnboardButton':
@@ -199,6 +210,10 @@ function RenderNode({ node }: { node: Node }) {
       return <PaywallSubscribeButton node={normalizedNode} />;
     case 'RadioButton':
       return <RadioButton node={normalizedNode} />;
+    case 'Separator':
+      return <Separator node={normalizedNode} />;
+    case 'StatusBarColor':
+      return <StatusBarColor node={normalizedNode} />;
     case 'Text':
       return <Text node={normalizedNode} />;
     case 'View':

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

@@ -0,0 +1,41 @@
+import React, { useId } from 'react';
+import type { SeparatorComponentProps } from './SeparatorProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+function Separator({ node }: SeparatorComponentProps) {
+  useLogRender('Separator');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'Separator';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+
+  const baseStyle = useExtractViewStyle(node);
+
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(Separator);

package/src/build-components/Separator/SeparatorProps.generated.ts

@@ -0,0 +1,26 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export interface SeparatorStyleGenerated {
+  backgroundColor?: string;
+  width?: string;
+  height?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+}
+
+export interface SeparatorPropsGenerated {
+  child: string;
+  attributes: {
+    style?: SeparatorStyleGenerated;
+    title?: string;
+    description?: string;
+  };
+}
+
+export interface SeparatorComponentProps {
+  node: NodeData<SeparatorPropsGenerated['attributes']>;
+}