@developer_tribe/react-builder 1.2.39 → 1.2.40

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

@@ -4507,364 +4507,14 @@ export const patterns = [
       description: 'description',
       children: 'never',
       attributes: {
-        scrollable: 'boolean',
-        styles: {
-          flexDirection: ['row', 'column'],
-          flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
-          alignItems: [
-            'flex-start',
-            'center',
-            'flex-end',
-            'stretch',
-            'baseline',
-          ],
-          justifyContent: [
-            'flex-start',
-            'center',
-            'flex-end',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ],
-          gap: 'size',
-          padding: 'size',
-          paddingHorizontal: 'size',
-          paddingVertical: 'size',
-          paddingTop: 'size',
-          paddingBottom: 'size',
-          paddingLeft: 'size',
-          paddingRight: 'size',
-          margin: 'size',
-          marginHorizontal: 'size',
-          marginVertical: 'size',
-          marginTop: 'size',
-          marginBottom: 'size',
-          marginLeft: 'size',
-          marginRight: 'size',
-          backgroundColor: 'color',
-          borderRadius: 'size',
-          width: 'size',
-          minWidth: 'size',
-          maxWidth: 'size',
-          height: 'size',
-          minHeight: 'size',
-          maxHeight: 'size',
-          flex: 'number',
-          position: ['relative', 'absolute'],
-          top: 'size',
-          bottom: 'size',
-          left: 'size',
-          right: 'size',
-          zIndex: 'number',
-        },
-        testID: 'string',
+        styles: { backgroundColor: 'color' },
+        translucent: 'boolean',
       },
     },
     meta: {
       desiredParent: ['all'],
       label: 'Navigation Bar Color',
       description: 'Sets the OS navigation bar background color.',
-      specialCategories: {
-        padding: {
-          label: 'Padding',
-          description: 'Uniform padding on all sides.',
-          category: 'container',
-          sort: 1,
-        },
-        margin: {
-          label: 'Margin',
-          description: 'Uniform margin on all sides.',
-          category: 'container',
-          sort: 2,
-        },
-        size: {
-          label: 'Size',
-          description: 'Fixed dimensions.',
-          category: 'container',
-          sort: 3,
-        },
-        offset: {
-          label: 'Offset',
-          description: 'Absolute positioning offsets.',
-          category: 'container',
-          sort: 4,
-        },
-      },
-      attributes: {
-        scrollable: {
-          label: 'Scrollable',
-          description: 'Turns scroll interaction on.',
-          category: 'container',
-          specialCategory: null,
-          sort: -1,
-        },
-        styles: {
-          backgroundColor: {
-            label: 'Background Color',
-            description: 'Background fill color.',
-            category: 'style',
-            specialCategory: null,
-            sort: 20,
-          },
-          borderRadius: {
-            label: 'Border Radius',
-            description: 'Corner rounding amount.',
-            category: 'style',
-            specialCategory: null,
-            sort: 21,
-            preferredScale: 's',
-          },
-          flexDirection: {
-            label: 'Flex Direction',
-            description: 'Sets row or column layout.',
-            category: 'container',
-            specialCategory: null,
-            sort: 4,
-          },
-          flexWrap: {
-            label: 'Flex Wrap',
-            description: 'Controls whether flex items wrap to multiple lines.',
-            category: 'container',
-            specialCategory: null,
-            sort: 4.5,
-          },
-          alignItems: {
-            label: 'Align Items',
-            description: 'Controls cross-axis alignment.',
-            category: 'container',
-            specialCategory: null,
-            sort: 3,
-          },
-          justifyContent: {
-            label: 'Justify Content',
-            description: 'Controls main-axis alignment.',
-            category: 'container',
-            specialCategory: null,
-            sort: 5,
-          },
-          gap: {
-            label: 'Gap',
-            description: 'Space between children.',
-            category: 'container',
-            specialCategory: null,
-            sort: 10,
-            preferredScale: 's',
-          },
-          padding: {
-            label: 'Padding',
-            description: 'Uniform padding on all sides.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 6,
-            preferredScale: 's',
-          },
-          paddingHorizontal: {
-            label: 'Padding Horizontal',
-            description: 'Left and right padding.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 7,
-            preferredScale: 's',
-          },
-          paddingVertical: {
-            label: 'Padding Vertical',
-            description: 'Top and bottom padding.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 8,
-            preferredScale: 'vs',
-          },
-          paddingTop: {
-            label: 'Padding Top',
-            description: 'Top padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 9,
-            preferredScale: 'vs',
-          },
-          paddingBottom: {
-            label: 'Padding Bottom',
-            description: 'Bottom padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 10,
-            preferredScale: 'vs',
-          },
-          paddingLeft: {
-            label: 'Padding Left',
-            description: 'Left padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 11,
-            preferredScale: 's',
-          },
-          paddingRight: {
-            label: 'Padding Right',
-            description: 'Right padding only.',
-            category: 'container',
-            specialCategory: 'padding',
-            sort: 12,
-            preferredScale: 's',
-          },
-          margin: {
-            label: 'Margin',
-            description: 'Uniform margin on all sides.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 13,
-            preferredScale: 's',
-          },
-          marginHorizontal: {
-            label: 'Margin Horizontal',
-            description: 'Left and right margin.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 14,
-            preferredScale: 's',
-          },
-          marginVertical: {
-            label: 'Margin Vertical',
-            description: 'Top and bottom margin.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 15,
-            preferredScale: 'vs',
-          },
-          marginTop: {
-            label: 'Margin Top',
-            description: 'Top margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 16,
-            preferredScale: 'vs',
-          },
-          marginBottom: {
-            label: 'Margin Bottom',
-            description: 'Bottom margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 17,
-            preferredScale: 'vs',
-          },
-          marginLeft: {
-            label: 'Margin Left',
-            description: 'Left margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 18,
-            preferredScale: 's',
-          },
-          marginRight: {
-            label: 'Margin Right',
-            description: 'Right margin only.',
-            category: 'container',
-            specialCategory: 'margin',
-            sort: 19,
-            preferredScale: 's',
-          },
-          width: {
-            label: 'Width',
-            description: 'Fixed width value.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 0,
-            preferredScale: 's',
-          },
-          minWidth: {
-            label: 'Min Width',
-            description: 'Minimum width constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 1,
-            preferredScale: 's',
-          },
-          maxWidth: {
-            label: 'Max Width',
-            description: 'Maximum width constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 2,
-            preferredScale: 's',
-          },
-          height: {
-            label: 'Height',
-            description: 'Fixed height value.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 3,
-            preferredScale: 'vs',
-          },
-          minHeight: {
-            label: 'Min Height',
-            description: 'Minimum height constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 4,
-            preferredScale: 'vs',
-          },
-          maxHeight: {
-            label: 'Max Height',
-            description: 'Maximum height constraint.',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 5,
-            preferredScale: 'vs',
-          },
-          flex: {
-            label: 'Flex',
-            description: 'Flex grow factor (e.g. 1 fills available space).',
-            category: 'container',
-            specialCategory: 'size',
-            sort: 6,
-          },
-          position: {
-            label: 'Position',
-            description: 'Sets layout positioning mode.',
-            category: 'container',
-            specialCategory: null,
-            sort: 3,
-          },
-          top: {
-            label: 'Top',
-            description: 'Offset from the top edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 22,
-            preferredScale: 'vs',
-          },
-          bottom: {
-            label: 'Bottom',
-            description: 'Offset from the bottom edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 23,
-            preferredScale: 'vs',
-          },
-          left: {
-            label: 'Left',
-            description: 'Offset from the left edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 24,
-            preferredScale: 's',
-          },
-          right: {
-            label: 'Right',
-            description: 'Offset from the right edge.',
-            category: 'container',
-            specialCategory: 'offset',
-            sort: 25,
-            preferredScale: 's',
-          },
-          zIndex: {
-            label: 'Z-Index',
-            description: 'Controls stacking order.',
-            category: 'container',
-            specialCategory: null,
-            sort: 26,
-          },
-        },
-      },
       styles: {
         backgroundColor: {
           label: 'Background Color',
@@ -4874,19 +4524,17 @@ export const patterns = [
           sort: 1,
         },
       },
-    },
-    defaults: {
-      styles: {
-        flexDirection: 'column',
-        position: 'relative',
-        zIndex: 1,
-        alignSelf: 'flex-start',
-        flexGrow: 0,
-        flexShrink: 0,
-        backgroundColor: 'THEME_COLORS.BACKGROUND',
+      attributes: {
+        translucent: {
+          label: 'Translucent',
+          description: 'Sets the navigation bar to translucent.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+        },
       },
     },
-    types: {},
+    defaults: { styles: { backgroundColor: 'THEME_COLORS.BACKGROUND' } },
   },
   {
     schemaVersion: 2,
@@ -10058,6 +9706,7 @@ export const patterns = [
         alignItems: 'center',
       },
       translateCounter: 1,
+      testID: 'paywall-close-button',
       size: 24,
     },
     types: {},
@@ -13096,7 +12745,10 @@ export const patterns = [
       title: 'title',
       description: 'description',
       children: 'never',
-      attributes: { styles: { backgroundColor: 'color' }, testID: 'string' },
+      attributes: {
+        styles: { backgroundColor: 'color' },
+        translucent: 'boolean',
+      },
     },
     meta: {
       desiredParent: ['all'],
@@ -13111,6 +12763,15 @@ export const patterns = [
           sort: 1,
         },
       },
+      attributes: {
+        translucent: {
+          label: 'Translucent',
+          description: 'Sets the status bar to translucent.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
+        },
+      },
     },
     defaults: { styles: { backgroundColor: 'THEME_COLORS.BACKGROUND' } },
   },

package/src/components/BuilderProvider.tsx

@@ -44,6 +44,7 @@ export type BuilderProviderParams = {
   fonts?: Fonts;
   previewMode?: boolean;
   selectedKey?: string;
+  device?: import('../types/Device').Device;
 };
 
 type BuilderProviderProps = {

package/src/components/DeviceButton.tsx

@@ -11,12 +11,16 @@ type DeviceButtonProps = {
   device: Device;
   selectedDevice: Device | null;
   onSelect: (device: Device) => void;
+  isFavorite?: boolean;
+  onToggleFavorite?: (device: Device, e: React.MouseEvent) => void;
 };
 
 export function DeviceButton({
   device,
   selectedDevice,
   onSelect,
+  isFavorite,
+  onToggleFavorite,
 }: DeviceButtonProps) {
   const platformIcon = platformIcons[device.platform];
   const aspect =
@@ -36,6 +40,37 @@ export function DeviceButton({
       }`}
       onClick={() => onSelect(device)}
     >
+      {onToggleFavorite && (
+        <span
+          className="editor-device-button__favorite"
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleFavorite(device, e);
+          }}
+          title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+          style={{
+            position: 'absolute',
+            top: 4,
+            right: 4,
+            cursor: 'pointer',
+            opacity: isFavorite ? 1 : 0.3,
+            color: isFavorite ? '#ecc538' : 'currentColor',
+          }}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill={isFavorite ? 'currentColor' : 'none'}
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+          </svg>
+        </span>
+      )}
       {device.name} <br />
       {device.width}×{device.height} ({aspect})
       {platformIcon && (

package/src/components/EditorHeader.tsx

@@ -40,6 +40,8 @@ export function EditorHeader({
     setLocalization,
     setBaseSize,
     setProjectColors,
+    favoriteDevices,
+    toggleFavoriteDevice,
   } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
@@ -47,8 +49,19 @@ export function EditorHeader({
     setLocalization: s.setLocalization,
     setBaseSize: s.setBaseSize,
     setProjectColors: s.setProjectColors,
+    favoriteDevices: s.favoriteDevices || [],
+    toggleFavoriteDevice: s.toggleFavoriteDevice,
   }));
 
+  const headerDevices = useMemo(() => {
+    const favs = favoriteDevices
+      .map((name) => devices.find((d) => d.name === name))
+      .filter((d): d is Device => d !== undefined);
+
+    const others = devices.filter((d) => !favoriteDevices.includes(d.name));
+    return [...favs, ...others].slice(0, 5);
+  }, [favoriteDevices]);
+
   const sortedSamples = useMemo(() => {
     const weight = (t?: Project['type']) => {
       if (t === 'paywall') return 0;
@@ -249,12 +262,14 @@ export function EditorHeader({
       aria-label="Editor utility header"
     >
       <div className="editor-header__devices">
-        {devices.slice(0, 5).map((deviceOption: Device) => (
+        {headerDevices.map((deviceOption: Device) => (
           <DeviceButton
             key={deviceOption.name}
             selectedDevice={selectedDevice}
             onSelect={setDevice}
             device={deviceOption}
+            isFavorite={favoriteDevices.includes(deviceOption.name)}
+            onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
           />
         ))}
         <button

package/src/hooks/useSafeAreaViewStyle.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import type { Device } from '../types/Device';
+import { useRenderStore } from '../store';
 
 function addInset(
   base: React.CSSProperties['paddingTop'],
@@ -30,17 +31,30 @@ export function useSafeAreaViewStyle(
   enabled: boolean,
   device?: Device,
 ) {
+  const statusBarOverrideTranslucent = useRenderStore(
+    (s) => s.statusBarOverrideTranslucent,
+  );
+  const navBarOverrideTranslucent = useRenderStore(
+    (s) => s.navBarOverrideTranslucent,
+  );
+
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
     const [insetTop, insetRight, , insetLeft] = device?.insets ?? [0, 0, 0, 0];
 
     // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
-    const top =
-      insetTop || (device?.platform === 'ios' ? 20 : device?.platform ? 24 : 0);
+    // If translucent is true, we do not apply safe area to top.
+    const top = statusBarOverrideTranslucent
+      ? 0
+      : insetTop ||
+        (device?.platform === 'ios' ? 20 : device?.platform ? 24 : 0);
 
     // Bottom safe area is handled visually by the mock navigation bar area, which takes layout space.
-    // So we intentionally don't add bottom padding here to avoid double-spacing.
+    // However, if we need to support insets for bottom when not rendered by the mock navigation bar,
+    // or if the navigation bar is translucent, we apply the inset here. But the mock frame handles it for now.
+    // Since Main acts as the safe area provider, if navigation bar is translucent it shouldn't have bottom inset,
+    // but right now it is 0. If it were relying on bottom inset, we would check `navBarOverrideTranslucent ? 0 : bottom`.
     const right = insetRight ?? 0;
     const left = insetLeft ?? 0;
     const bottom = 0;
@@ -60,5 +74,11 @@ export function useSafeAreaViewStyle(
       width: subtractInset(baseStyle.width ?? '100%', horizontal),
       height: subtractInset(baseStyle.height ?? '100%', vertical),
     };
-  }, [enabled, baseStyle, device]);
+  }, [
+    enabled,
+    baseStyle,
+    device,
+    statusBarOverrideTranslucent,
+    navBarOverrideTranslucent,
+  ]);
 }

package/src/mockOS/context/MockOSContext.tsx

@@ -32,12 +32,14 @@ interface MockOSProviderProps {
   statusBarBackgroundColor: string;
   statusBarPlatform: Device['platform'];
   statusBarIsDark: boolean;
+  statusBarTranslucent?: boolean;
   // Navigation Bar props
   navBarHeight: number;
   navBarBackgroundColor: string;
   navBarPlatform: Device['platform'];
   navBarNavigationBarType: Device['navigationBarType'];
   navBarIsDark: boolean;
+  navBarTranslucent?: boolean;
   // Insets
   insetLeft: number;
   insetRight: number;
@@ -51,11 +53,13 @@ export function MockOSProvider({
   statusBarBackgroundColor,
   statusBarPlatform,
   statusBarIsDark,
+  statusBarTranslucent = false,
   navBarHeight,
   navBarBackgroundColor,
   navBarPlatform,
   navBarNavigationBarType,
   navBarIsDark,
+  navBarTranslucent = false,
 }: MockOSProviderProps) {
   const [permission, setPermission] = useState<PermissionType | string | null>(
     null,
@@ -217,31 +221,55 @@ export function MockOSProvider({
           onCancel={() => resolveSubscriptionPurchase(false)}
         />
       )}
-      <DeviceStatusBar
-        height={statusBarHeight}
-        backgroundColor={statusBarBackgroundColor}
-        platform={statusBarPlatform}
-        isDark={statusBarIsDark}
-      />
+      <div
+        className="device-status-bar-container"
+        style={{
+          position: statusBarTranslucent ? 'absolute' : 'relative',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+        }}
+      >
+        <DeviceStatusBar
+          height={statusBarHeight}
+          backgroundColor={statusBarBackgroundColor}
+          platform={statusBarPlatform}
+          isDark={statusBarIsDark}
+        />
+      </div>
       <div
         className="device-content"
         style={{
           flex: 1,
           overflow: 'hidden',
           position: 'relative',
+          // If nav bar is translucent, let the content area stretch under it
+          marginBottom: navBarTranslucent ? -navBarHeight : 0,
         }}
       >
         <MockOSRouter childrenBelongTo="app" appName={appName}>
           {children}
         </MockOSRouter>
       </div>
-      <DeviceNavigationBar
-        height={navBarHeight}
-        backgroundColor={navBarBackgroundColor}
-        platform={navBarPlatform}
-        navigationBarType={navBarNavigationBarType}
-        isDark={navBarIsDark}
-      />
+      <div
+        className="device-navigation-bar-container"
+        style={{
+          position: navBarTranslucent ? 'absolute' : 'relative',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+        }}
+      >
+        <DeviceNavigationBar
+          height={navBarHeight}
+          backgroundColor={navBarBackgroundColor}
+          platform={navBarPlatform}
+          navigationBarType={navBarNavigationBarType}
+          isDark={navBarIsDark}
+        />
+      </div>
     </MockOSContext.Provider>
   );
 }