@developer_tribe/react-builder 1.2.14 → 1.2.17

package/src/components/BuilderButton.tsx

@@ -68,14 +68,22 @@ export function BuilderButton({
   }
 
   const nodeData = node as NodeData<NodeDefaultAttribute>;
-  let extra = '';
+  let conditionText = '';
   if (nodeData.attributes?.condition) {
-    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
+    conditionText =
+      `${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable ?? ''}`.trim();
   }
   const patternLabel = getPatternByType(nodeData.type)?.meta?.label?.trim();
   const baseLabel =
     patternLabel && patternLabel.length > 0 ? patternLabel : nodeData.type;
-  const conditionLabel = extra.trim() ? extra : '';
+  const conditionLabel = conditionText.trim() ? conditionText : '';
+  const title =
+    typeof nodeData.attributes?.title === 'string'
+      ? nodeData.attributes.title.trim()
+      : '';
+  const hasTitle = title.length > 0;
+  const topLabel = hasTitle ? title : baseLabel;
+  const shouldShowBottom = hasTitle || conditionLabel.length > 0;
 
   return (
     <div className="builder__button">
@@ -108,7 +116,7 @@ export function BuilderButton({
         </div>
       )}
       <button type="button" className="builder__button-link" onClick={onClick}>
-        {baseLabel}
+        {topLabel}
       </button>
       <div className="builder__button-actions" ref={actionsRef}>
         <button
@@ -153,8 +161,17 @@ export function BuilderButton({
           </ul>
         )}
       </div>
-      {conditionLabel && (
-        <span className="builder__button-condition">{conditionLabel}</span>
+      {shouldShowBottom && (
+        <span className="builder__button-condition">
+          {hasTitle ? (
+            <>
+              <small>{baseLabel}</small>
+              {conditionLabel ? ` · ${conditionLabel}` : ''}
+            </>
+          ) : (
+            conditionLabel
+          )}
+        </span>
       )}
     </div>
   );

package/src/components/BuilderProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import type { AppConfig } from '../types/PreviewConfig';
@@ -21,7 +21,6 @@ export type BuilderProviderParams = {
    * - 'native': returns React Native-friendly styles (no DOM-only props like overflowX/Y).
    */
   platform?: 'web' | 'native';
-  onPaywallClose?: () => void;
   onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
   /**
    * Optional runtime config + styling inputs.
@@ -56,10 +55,6 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
         params?.benefits && typeof params.benefits === 'object'
           ? (params.benefits as PaywallBenefits)
           : {},
-      onPaywallClose:
-        typeof params?.onPaywallClose === 'function'
-          ? params.onPaywallClose
-          : undefined,
       onPaywallSubscribe:
         typeof params?.onPaywallSubscribe === 'function'
           ? params.onPaywallSubscribe
@@ -85,7 +80,6 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
       params?.benefits,
       params?.products,
       params?.platform,
-      params?.onPaywallClose,
       params?.onPaywallSubscribe,
       params?.appConfig,
       params?.projectColors,
@@ -96,6 +90,15 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
     ],
   );
 
+  useEffect(() => {
+    console.info('[preview] BuilderProvider params', {
+      previewMode: value.previewMode,
+      selectedKey: value.selectedKey,
+      platform: value.platform,
+      productsCount: Array.isArray(value.products) ? value.products.length : 0,
+    });
+  }, [value.previewMode, value.selectedKey, value.platform, value.products]);
+
   return (
     <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
   );

package/src/components/DeviceNavigationBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Device } from '../types/Device';
+import { emitMockOSBackPress } from '../mockOS/backHandler';
 import { useMockOSContext } from '../mockOS/context/MockOSContextBase';
 
 type DeviceNavigationBarProps = {
@@ -37,6 +38,10 @@ export function DeviceNavigationBar({
     : 'rgba(0, 0, 0, 0.4)';
 
   function handleBackButton() {
+    if (!emitMockOSBackPress()) {
+      return;
+    }
+
     if (context) {
       const canGoBack = context.goBack();
       // If can't go back, go to launchscreen

package/src/index.native.ts

@@ -0,0 +1,7 @@
+/**
+ * React Native entrypoint alias.
+ *
+ * Some consumers/tests expect `src/index.native` to exist.
+ * We keep the RN-safe exports in `src/index.ts` and re-export from here.
+ */
+export * from './index';

package/src/index.ts

@@ -27,11 +27,9 @@ export type {
 
 // Paywall hooks (RN-safe placeholders)
 export {
-  usePaywallCounter,
-  useCloseStatusPaywall,
-  useCarouselOptionsSeperator,
   useCalculateLocalizedPrice,
   useDiscountRate,
+  useChangeDelayByPaywall,
 } from './paywall/hooks';
 
 // Context (RN-safe). In React Native, `products` should come from an IAP wrapper
@@ -91,4 +89,5 @@ export {
   getBasicSamples,
   getOnboardSamples,
 } from './assets/samples/getSamples';
+export { getDefaultProject } from './utils/getDefaultProject';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';

package/src/mockOS/backHandler.ts

@@ -0,0 +1,35 @@
+export type MockOSBackHandler = () => boolean;
+
+const backHandlers: MockOSBackHandler[] = [];
+
+export function registerMockOSBackHandler(
+  handler: MockOSBackHandler,
+): () => void {
+  backHandlers.push(handler);
+
+  return () => {
+    const index = backHandlers.lastIndexOf(handler);
+    if (index >= 0) {
+      backHandlers.splice(index, 1);
+    }
+  };
+}
+
+export function emitMockOSBackPress(): boolean {
+  if (backHandlers.length === 0) {
+    return true;
+  }
+
+  for (let i = backHandlers.length - 1; i >= 0; i -= 1) {
+    const allow = backHandlers[i]?.();
+    if (!allow) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function clearMockOSBackHandlers(): void {
+  backHandlers.length = 0;
+}

package/src/mockOS/context/MockOSContext.tsx

@@ -78,6 +78,9 @@ export function MockOSProvider({
     // replace it instead of adding new item
     setNavigationStack((prev) => {
       const lastItem = prev[prev.length - 1];
+      if (lastItem && lastItem.route === route) {
+        return prev;
+      }
       if (
         lastItem &&
         lastItem.route === 'launchscreen' &&
@@ -94,17 +97,28 @@ export function MockOSProvider({
   }, []);
 
   const goBack = useCallback(() => {
-    if (navigationStack.length > 1) {
-      const newStack = [...navigationStack];
+    if (navigationStack.length <= 1) {
+      return false;
+    }
+
+    const newStack = [...navigationStack];
+    // Pop once, then keep popping if the route doesn't change (avoid duplicates).
+    do {
       newStack.pop();
-      const previousRoute = newStack[newStack.length - 1];
+    } while (
+      newStack.length > 0 &&
+      newStack[newStack.length - 1].route === currentRoute
+    );
 
-      setCurrentRoute(previousRoute.route);
-      setNavigationStack(newStack);
-      return true;
+    if (newStack.length === 0) {
+      return false;
     }
-    return false;
-  }, [navigationStack]);
+
+    const previousRoute = newStack[newStack.length - 1];
+    setCurrentRoute(previousRoute.route);
+    setNavigationStack(newStack);
+    return true;
+  }, [currentRoute, navigationStack]);
 
   const requestSubscriptionPurchase = useCallback((productId: string) => {
     // Cancel any existing pending request (resolve false)

package/src/mockOS/managers/navigationManager.ts

@@ -60,6 +60,10 @@ export class MockNavigationManager {
   }
 
   goBack(): boolean {
+    if (this.context?.goBack) {
+      return this.context.goBack();
+    }
+
     if (this.context === null) {
       alert('Go Back\n(Mock OS context not available)');
       return false;

package/src/pages/ProjectMigrationPage.tsx

@@ -71,7 +71,16 @@ export function ProjectMigrationPage({
               type="button"
               className="editor-button"
               disabled={!!migrating}
-              onClick={() => onMigrateNow?.()}
+              onClick={() => {
+                console.info('[ProjectMigrationPage] onMigrateNow clicked', {
+                  name,
+                  projectVersion,
+                  requiredVersion,
+                  pendingMigrationsCount: pendingMigrations.length,
+                  migrating: !!migrating,
+                });
+                onMigrateNow?.();
+              }}
             >
               {migrating ? 'Migrating…' : 'Migrate now'}
             </button>

package/src/pages/ProjectPage.tsx

@@ -289,6 +289,13 @@ export function ProjectPage({
       <EditorHeader
         onSaveProject={() => {
           try {
+            console.info('[ProjectPage] onSaveProject clicked', {
+              name: project.name,
+              hasOverrideProject: !!overrideProject,
+              hasEditorData: !!editorData,
+              hasResolvedProjectColors: !!resolvedProjectColors,
+              bypassValidation,
+            });
             logger.info('ProjectPage', 'save project', { name: project.name });
             if (onSaveProjectColors && resolvedProjectColors) {
               onSaveProjectColors(resolvedProjectColors);

package/src/pages/projectPageUtils.ts

@@ -1,5 +1,6 @@
 import type { Project } from '../types/Project';
 import type { Node } from '../types/Node';
+import { getDefaultProject } from '../utils/getDefaultProject';
 
 export function resolveProjectForSave(args: {
   project: Project;
@@ -7,8 +8,8 @@ export function resolveProjectForSave(args: {
   data: Node;
 }): Project {
   const base = args.overrideProject ?? args.project;
-  return {
+  return getDefaultProject({
     ...base,
     data: args.data,
-  };
+  });
 }

package/src/paywall/hooks/index.ts

@@ -1,5 +1,5 @@
-export { usePaywallCounter } from './usePaywallCounter';
-export { useCloseStatusPaywall } from './useCloseStatusPaywall';
-export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
 export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
 export { useDiscountRate } from './useDiscountRate';
+export { useChangeDelayByPaywall } from './useChangeDelayByPaywall';
+export { useHandleGoBack } from './useHandleGoBack';
+export { useMockOSBackHandler } from './useMockOSBackHandler';

package/src/paywall/hooks/useChangeDelayByPaywall.ts

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from 'react';
+import type { NodeData } from '../../types/Node';
+
+export function useChangeDelayByPaywall(
+  node: NodeData<{ delay?: number }> | null | undefined,
+  setIsBackAllowed: (value: boolean) => void,
+) {
+  const delay = useMemo(() => {
+    const delayAttribute = node?.attributes?.delay
+      ? parseInt(String(node?.attributes?.delay), 10)
+      : 1000;
+    return delayAttribute;
+  }, [node?.attributes?.delay]);
+
+  useEffect(() => {
+    if (!delay || delay <= 0) {
+      setIsBackAllowed(true);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setIsBackAllowed(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, setIsBackAllowed]);
+}

package/src/paywall/hooks/useHandleGoBack.ts

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { useMockOSContext } from '../../mockOS/context/MockOSContextBase';
+
+export function useHandleGoBack(
+  handleGoBack: () => boolean | null | undefined,
+) {
+  const mockOS = useMockOSContext();
+
+  useEffect(() => {
+    if (!mockOS?.isEnabled) {
+      return;
+    }
+
+    const handleBackPress = (event?: KeyboardEvent | PopStateEvent) => {
+      const result = handleGoBack();
+
+      // Only allow navigation if result is explicitly true
+      if (result !== true) {
+        // Prevent navigation
+        if (event instanceof KeyboardEvent) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else if (event instanceof PopStateEvent) {
+          // Prevent browser navigation by pushing state back
+          window.history.pushState(null, '', window.location.href);
+        }
+        return;
+      }
+
+      // Allow navigation - execute MockOS goBack
+      const canGoBack = mockOS.goBack();
+      if (!canGoBack) {
+        mockOS.navigation('launchscreen');
+      }
+    };
+
+    // Handle Escape key
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleBackPress(e);
+      }
+    };
+
+    // Handle browser back button
+    const handlePopState = (e: PopStateEvent) => {
+      handleBackPress(e);
+    };
+
+    // Push a state to track back navigation
+    window.history.pushState(null, '', window.location.href);
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('popstate', handlePopState);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, [handleGoBack, mockOS]);
+}

package/src/paywall/hooks/useMockOSBackHandler.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { registerMockOSBackHandler } from '../../mockOS/backHandler';
+
+export function useMockOSBackHandler(isBackAllowed: boolean) {
+  useEffect(() => {
+    const unsubscribe = registerMockOSBackHandler(() => isBackAllowed);
+    return unsubscribe;
+  }, [isBackAllowed]);
+}

package/src/utils/analyseNodeByPatterns.ts

@@ -244,6 +244,17 @@ function validatePrimitiveValue(
       return typeof value === 'string'
         ? ok()
         : fail(`Expected color (string)`, path);
+    case 'title':
+      if (typeof value !== 'string') {
+        return fail(`Expected title (string)`, path);
+      }
+      return value.length <= 20
+        ? ok()
+        : fail(`Expected title to be <= 20 characters`, path);
+    case 'description':
+      return typeof value === 'string'
+        ? ok()
+        : fail(`Expected description (string)`, path);
     case 'size':
       // Sizes can be numbers or strings like "16@fs" / "100%" / "20px"
       return typeof value === 'number' || typeof value === 'string'
@@ -403,6 +414,16 @@ function validateAttributesByPattern(
     if (attrName === 'style') continue;
     const attrSpec = schema?.[attrName] as AttributeTypeSpec | undefined;
     if (!attrSpec) {
+      if (attrName === 'title' || attrName === 'description') {
+        const res = validateAttributeValue(
+          pattern.pattern.type,
+          attrValue,
+          attrName,
+          joinPath(path, attrName),
+        );
+        if (!res.valid) return res;
+        continue;
+      }
       // Back-compat: allow legacy flat style keys even when the schema nests them.
       const legacyStyleSpec = styleSchema?.[attrName] as
         | AttributeTypeSpec

package/src/utils/getDefaultProject.ts

@@ -0,0 +1,34 @@
+import metaJson from '../assets/meta.json';
+import type { Project } from '../types/Project';
+import type { Node } from '../types/Node';
+
+type GetDefaultProjectArgs = Partial<Project>;
+
+export function getDefaultProject(
+  overrides: GetDefaultProjectArgs = {},
+): Project {
+  const supportedVersion =
+    typeof metaJson?.supportedProjectVersion === 'string' &&
+    metaJson.supportedProjectVersion.trim()
+      ? metaJson.supportedProjectVersion.trim()
+      : '0.0.0';
+
+  const version =
+    typeof overrides.version === 'string' && overrides.version.trim()
+      ? overrides.version.trim()
+      : supportedVersion;
+
+  const name =
+    typeof overrides.name === 'string' && overrides.name.trim()
+      ? overrides.name.trim()
+      : 'project';
+
+  return {
+    name,
+    version,
+    data: (overrides.data ?? null) as Node,
+    appConfig: overrides.appConfig,
+    projectColors: overrides.projectColors,
+    type: overrides.type,
+  };
+}

package/src/utils/patterns.ts

@@ -7,7 +7,10 @@ export type AttributeMeta = {
   category?: 'style' | 'container' | 'other' | string;
   specialCategory?: 'padding' | 'margin' | 'offset' | null | string;
   sort?: number;
+  /** Legacy typo kept for backwards compatibility with older patterns. */
   preferedScale?: 's' | 'vs' | 'f' | '%' | '' | string;
+  /** Correct spelling. Prefer this in new/updated patterns. */
+  preferredScale?: 's' | 'vs' | 'f' | '%' | '' | string;
   /**
    * When true, this attribute should remain visible even if the component
    * metadata requests hiding all attributes (e.g. `meta.hideAllAttributes`).
@@ -108,13 +111,7 @@ function adjustMetaForPlatform(
   // Values that are not directly style-friendly for the target platform should be shown under "other"
   // (so they remain editable, but are clearly non-style / platform-specific behavior).
   const moveToOtherAlways = new Set<string>(['scrollable']);
-  const moveToOtherOnWeb = new Set<string>([
-    // RN-only shorthands; on web they are translated to paddingLeft/Right, etc.
-    'paddingHorizontal',
-    'paddingVertical',
-    'marginHorizontal',
-    'marginVertical',
-  ]);
+  const moveToOtherOnWeb = new Set<string>([]);
   const moveToOtherOnNative = new Set<string>([
     // CSS-only layout convenience (not widely supported in RN style across versions).
     'gap',
@@ -277,6 +274,8 @@ export function getTypeSchema(
 export function isPrimitiveType(typeName: string): boolean {
   return (
     typeName === 'string' ||
+    typeName === 'title' ||
+    typeName === 'description' ||
     typeName === 'number' ||
     typeName === 'boolean' ||
     typeName === 'color' ||

package/dist/paywall/hooks/useCarouselOptionsSeperator.d.ts

@@ -1,6 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- *
- * NOTE: name kept as `Seperator` to match existing external API usage.
- */
-export declare function useCarouselOptionsSeperator(): string;

package/dist/paywall/hooks/useCloseStatusPaywall.d.ts

@@ -1,4 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export declare function useCloseStatusPaywall(): boolean;

package/dist/paywall/hooks/usePaywallCounter.d.ts

@@ -1,4 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export declare function usePaywallCounter(): number;

package/src/paywall/hooks/useCarouselOptionsSeperator.ts

@@ -1,8 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- *
- * NOTE: name kept as `Seperator` to match existing external API usage.
- */
-export function useCarouselOptionsSeperator(): string {
-  return '';
-}

package/src/paywall/hooks/useCloseStatusPaywall.ts

@@ -1,6 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export function useCloseStatusPaywall(): boolean {
-  return false;
-}

package/src/paywall/hooks/usePaywallCounter.ts

@@ -1,6 +0,0 @@
-/**
- * Placeholder hook — will be implemented later.
- */
-export function usePaywallCounter(): number {
-  return 0;
-}