@developer_tribe/react-builder 1.2.39 → 1.2.41

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/useLocalize.ts

@@ -23,7 +23,9 @@ export function useLocalize(options?: {
 
   return useCallback(
     (keyOrText: string) => {
-      const raw = localization?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
+      const langMap = localization?.[defaultLanguage];
+      const raw = langMap?.[keyOrText] ?? keyOrText;
+
       return replaceLocalizationParams(raw, params);
     },
     [defaultLanguage, localization, params],

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/index.web.ts

@@ -11,3 +11,22 @@ export * from './index';
 export * from './build-components';
 export { default as useNode } from './build-components/useNode';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+
+// Host-app API: let parent apps inject a custom "Text" field renderer.
+import { useRenderStore } from './store';
+import type { ComponentType } from 'react';
+import type { LocalizationApiConfig, LanguageColumn } from './store';
+
+export function setBuilderStringChildrenField(
+  comp?: ComponentType<{ value: string; onChange: (v: string) => void }>,
+) {
+  useRenderStore.getState().setRenderStringChildrenField(comp);
+}
+
+export function setBuilderLocalizationConfig(config?: LocalizationApiConfig) {
+  useRenderStore.getState().setLocalizationApiConfig(config);
+}
+
+export function setBuilderLanguageColumns(cols: LanguageColumn[]) {
+  useRenderStore.getState().setLanguageColumns(cols);
+}

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>
   );
 }

package/src/modals/DeviceSelectorModal.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { Device } from '../types/Device';
 import Modal from './Modal';
 import { DeviceButton } from '../components/DeviceButton';
+import { useRenderStore } from '../store';
 
 type DeviceSelectorModalProps = {
   devices: Device[];
@@ -16,11 +17,36 @@ export function DeviceSelectorModal({
   onSelect,
   onClose,
 }: DeviceSelectorModalProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const { favoriteDevices, toggleFavoriteDevice } = useRenderStore((state) => ({
+    favoriteDevices: state.favoriteDevices || [],
+    toggleFavoriteDevice: state.toggleFavoriteDevice,
+  }));
+
   const handleDeviceSelect = (device: Device) => {
     onSelect(device);
     onClose();
   };
 
+  const filteredDevices = useMemo(() => {
+    return devices.filter((device) =>
+      device.name.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [devices, searchTerm]);
+
+  const { favorites, others } = useMemo(() => {
+    const favs: Device[] = [];
+    const rest: Device[] = [];
+    filteredDevices.forEach((device) => {
+      if (favoriteDevices.includes(device.name)) {
+        favs.push(device);
+      } else {
+        rest.push(device);
+      }
+    });
+    return { favorites: favs, others: rest };
+  }, [filteredDevices, favoriteDevices]);
+
   return (
     <Modal
       onClose={onClose}
@@ -40,15 +66,73 @@ export function DeviceSelectorModal({
           Close
         </button>
       </div>
-      <div className="device-selector-modal__grid" role="list">
-        {devices.map((device) => (
-          <DeviceButton
-            key={device.name}
-            device={device}
-            selectedDevice={selectedDevice}
-            onSelect={handleDeviceSelect}
-          />
-        ))}
+      <div
+        className="device-selector-modal__search"
+        style={{ padding: '0 16px', marginBottom: '8px' }}
+      >
+        <input
+          type="text"
+          placeholder="Search devices..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="editor-input"
+          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
+        />
+      </div>
+      <div
+        className="device-selector-modal__body"
+        style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
+      >
+        {favorites.length > 0 && (
+          <section>
+            <h4
+              style={{
+                margin: '0 16px 8px',
+                fontSize: '14px',
+                fontWeight: 'bold',
+              }}
+            >
+              Favorites
+            </h4>
+            <div className="device-selector-modal__grid" role="list">
+              {favorites.map((device) => (
+                <DeviceButton
+                  key={`fav-${device.name}`}
+                  device={device}
+                  selectedDevice={selectedDevice}
+                  onSelect={handleDeviceSelect}
+                  isFavorite={true}
+                  onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+                />
+              ))}
+            </div>
+          </section>
+        )}
+        <section>
+          {favorites.length > 0 && (
+            <h4
+              style={{
+                margin: '0 16px 8px',
+                fontSize: '14px',
+                fontWeight: 'bold',
+              }}
+            >
+              All Devices
+            </h4>
+          )}
+          <div className="device-selector-modal__grid" role="list">
+            {others.map((device) => (
+              <DeviceButton
+                key={`other-${device.name}`}
+                device={device}
+                selectedDevice={selectedDevice}
+                onSelect={handleDeviceSelect}
+                isFavorite={false}
+                onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+              />
+            ))}
+          </div>
+        </section>
       </div>
     </Modal>
   );

package/src/modals/InspectModal.tsx

@@ -113,8 +113,41 @@ function LocalizationsTab({
     );
   }
 
+  const handleDownloadCSV = () => {
+    let csvContent = 'Key,Value,Source\n';
+    allKeys.forEach((key) => {
+      const hasCustom = key in langKeys;
+      const customValue = langKeys[key];
+      const defaultValue = defaultLangKeys[key];
+
+      const isCustom =
+        hasCustom && customValue !== defaultValue && customValue !== undefined;
+      const value = isCustom ? customValue : (defaultValue ?? '');
+
+      const escape = (str: string) => `"${String(str).replace(/"/g, '""')}"`;
+      csvContent += `${escape(key)},${escape(String(value))},${isCustom ? 'spreadsheet' : 'fallback'}\n`;
+    });
+
+    downloadCSV(`localizations-${language}.csv`, csvContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadCSV}
+        >
+          Download CSV
+        </button>
+      </div>
       <table className="inspect-modal__table">
         <thead>
           <tr>
@@ -148,7 +181,7 @@ function LocalizationsTab({
                         <span style={{ color: 'red' }}>!</span> fallback
                       </>
                     ) : (
-                      'custom'
+                      'spreadsheet'
                     )}
                   </span>
                 </td>
@@ -179,13 +212,43 @@ function ParamsTab({
   if (!hasAny) {
     return (
       <p className="inspect-modal__empty">
-        No params available. Params are populated inside a PaywallProvider.
+        No params available. Params are populated inside a ParamsProvider.
       </p>
     );
   }
 
+  const handleDownloadCSV = () => {
+    let csvContent = 'Param,Value,Type\n';
+    const escape = (str: string) => `"${String(str).replace(/"/g, '""')}"`;
+
+    flatEntries.forEach(([key, value]) => {
+      csvContent += `${escape(key)},${escape(formatValue(value))},Flat\n`;
+    });
+
+    nestedEntries.forEach(([key, value]) => {
+      csvContent += `${escape(key)},${escape(formatValue(value))},Nested\n`;
+    });
+
+    downloadCSV('params.csv', csvContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadCSV}
+        >
+          Download CSV
+        </button>
+      </div>
       <table className="inspect-modal__table">
         <thead>
           <tr>
@@ -249,8 +312,29 @@ function ColorsTab({
     return <p className="inspect-modal__empty">No project colors defined.</p>;
   }
 
+  const handleDownloadJSON = () => {
+    const data = projectColors ?? {};
+    const jsonContent = JSON.stringify(data, null, 2);
+    downloadJSON('colors.json', jsonContent);
+  };
+
   return (
     <div className="inspect-modal__table-wrap">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: '8px',
+        }}
+      >
+        <button
+          type="button"
+          className="editor-button"
+          onClick={handleDownloadJSON}
+        >
+          Download JSON
+        </button>
+      </div>
       {staticEntries.length > 0 && (
         <>
           <h4 className="inspect-modal__section-title">Static Colors</h4>
@@ -284,7 +368,7 @@ function ColorsTab({
                             <span style={{ color: 'red' }}>!</span> fallback
                           </>
                         ) : (
-                          'custom'
+                          'added to project'
                         )}
                       </span>
                     </td>
@@ -331,7 +415,7 @@ function ColorsTab({
                             <span style={{ color: 'red' }}>!</span> fallback
                           </>
                         ) : (
-                          'custom'
+                          'added to project'
                         )}
                       </span>
                     </td>
@@ -357,3 +441,27 @@ function formatValue(v: unknown): string {
   if (typeof v === 'number' || typeof v === 'boolean') return String(v);
   return JSON.stringify(v);
 }
+
+function downloadCSV(filename: string, csvContent: string) {
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function downloadJSON(filename: string, jsonContent: string) {
+  const blob = new Blob([jsonContent], {
+    type: 'application/json;charset=utf-8;',
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

package/src/product-base/buildPaywallLocalizationParams.ts

@@ -105,5 +105,8 @@ export function buildPaywallLocalizationParams(
     productCurreny: extractedParams.currency,
     productId: String(product.productId ?? ''),
     productSelected: 'true',
+    subscribe: hasTrial
+      ? resolve('base.builder.paywall.button.subscribe-free')
+      : resolve('base.builder.paywall.button.subscribe'),
   };
 }

package/src/product-base/extractAndroidParams.ts

@@ -70,7 +70,7 @@ export function extractAndroidParams(
       iapLogger.warn(['extractAndroidParams'], 'No offers found in product', {
         productId: product.id || product.productId,
       });
-      return getEmptyParams();
+      return getFallbackParams(product);
     }
 
     const pricingPhases =
@@ -81,7 +81,7 @@ export function extractAndroidParams(
         productId: product.id || product.productId,
         offerId: selectedOffer.id,
       });
-      return getEmptyParams();
+      return getFallbackParams(product);
     }
 
     // Trial phase: priceAmountMicros === "0"
@@ -105,7 +105,7 @@ export function extractAndroidParams(
         productId: product.id || product.productId,
         pricingPhasesCount: pricingPhases.length,
       });
-      return getEmptyParams();
+      return getFallbackParams(product);
     }
 
     const regularPeriod = parseBillingPeriod(regularPhase.billingPeriod);
@@ -142,15 +142,31 @@ export function extractAndroidParams(
     }
 
     const discountPercentage = calculateDiscount(price, promoPrice);
-    const priceNum = parseFloat(price);
+
+    // Apply root properties if they exist (allows mock edits to immediately bypass deep structures)
+    const finalPrice =
+      typeof product.price === 'string' && product.price !== ''
+        ? product.price
+        : price;
+    const finalCurrency =
+      typeof product.currency === 'string' && product.currency !== ''
+        ? product.currency
+        : currency;
+    const finalLocalizedPrice =
+      typeof product.localizedPrice === 'string' &&
+      product.localizedPrice !== ''
+        ? product.localizedPrice
+        : localizedPrice;
+
+    const priceNum = parseFloat(finalPrice);
     const pricePerMonth = calculatePricePerMonth(priceNum, regularPeriod.unit);
     const pricePerYear = calculatePricePerYear(priceNum, regularPeriod.unit);
 
     return {
-      price,
+      price: finalPrice,
       promoPrice,
-      currency,
-      localizedPrice,
+      currency: finalCurrency,
+      localizedPrice: finalLocalizedPrice,
       period: regularPeriod.unit,
       periodValue: String(regularPeriod.value),
       periodType,
@@ -173,10 +189,24 @@ export function extractAndroidParams(
         error: error instanceof Error ? error.message : String(error),
       },
     );
-    return getEmptyParams();
+    return getFallbackParams(product);
   }
 }
 
+/** Boş params ama mock product price'ları ile birleştirilmiş (fallback) */
+function getFallbackParams(product: Product): AndroidParams {
+  const price = String(product.price || product.localizedPrice || '').replace(
+    /[^0-9.]/g,
+    '',
+  );
+  return {
+    ...getEmptyParams(),
+    price,
+    currency: product.currency || product.currencyCode || '',
+    localizedPrice: product.localizedPrice || '',
+  };
+}
+
 /** Boş params döner (fallback) */
 function getEmptyParams(): AndroidParams {
   return {