@developer_tribe/react-builder 1.2.14 → 1.2.15

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/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

@@ -91,4 +91,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/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/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/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' ||