@developer_tribe/react-builder 1.0.7 → 1.0.9

package/src/build-components/useNode.ts

@@ -7,9 +7,28 @@ export default function useNode<
   const type = node?.type;
   const defaults = getDefaultsForType(type) as Partial<T> | undefined;
   if (!defaults) return node;
-  const mergedAttributes: T = {
-    ...(defaults as T),
-    ...((node.attributes as T) ?? ({} as T)),
+  const nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T & {
+    style?: Record<string, unknown>;
+  };
+  const defaultAttributes = defaults as T as T & {
+    style?: Record<string, unknown>;
   };
+  const mergedAttributes: T = {
+    ...(defaultAttributes as T),
+    ...(nodeAttributes as T),
+    // Deep merge `style` so default style values aren't lost when the node provides partial style overrides.
+    style: {
+      ...(defaultAttributes?.style ?? {}),
+      ...(nodeAttributes?.style ?? {}),
+    },
+  } as T;
+  if (
+    mergedAttributes &&
+    typeof (mergedAttributes as any).style === 'object' &&
+    (mergedAttributes as any).style != null &&
+    Object.keys((mergedAttributes as any).style).length === 0
+  ) {
+    delete (mergedAttributes as any).style;
+  }
   return { ...node, attributes: mergedAttributes };
 }

package/src/components/BottomBar.tsx

@@ -26,7 +26,7 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
   const colorIcon: IconsType = 'colors';
 
   const { appConfig, setAppConfig, previewMode, setPreviewMode } =
-    useRenderStore(s => ({
+    useRenderStore((s) => ({
       appConfig: s.appConfig,
       setAppConfig: s.setAppConfig,
       previewMode: s.previewMode,
@@ -53,9 +53,9 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
     <>
       <div className={['rb-bottom-bar', className].filter(Boolean).join(' ')}>
         <button
-          type='button'
+          type="button"
           className={`rb-bottom-bar__button${themeIsActive ? ' is-active' : ''}`}
-          aria-label='Theme'
+          aria-label="Theme"
           aria-pressed={themeIsActive}
           onClick={() =>
             setAppConfig({
@@ -64,85 +64,85 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
             })
           }
         >
-          <Icon iconType={themeIcon} size={20} color='currentColor' alt='' />
+          <Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
         </button>
 
         <button
-          type='button'
+          type="button"
           className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
             rtlIsActive ? ' is-active' : ''
           }`}
-          aria-label='RTL'
+          aria-label="RTL"
           aria-pressed={rtlIsActive}
           onClick={() =>
             setAppConfig({ ...appConfig, isRtl: !(appConfig.isRtl ?? false) })
           }
         >
-          <Icon iconType={rtlIcon} size={18} color='currentColor' alt='' />
-          <span className='rb-bottom-bar__rtl-text'>RTL</span>
+          <Icon iconType={rtlIcon} size={18} color="currentColor" alt="" />
+          <span className="rb-bottom-bar__rtl-text">RTL</span>
         </button>
 
         <button
-          type='button'
+          type="button"
           className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
             previewIsActive ? ' is-active' : ''
           }`}
-          aria-label='Magic cursor tool'
+          aria-label="Magic cursor tool"
           aria-pressed={previewIsActive}
           onClick={() => setPreviewMode(!previewMode)}
         >
           <Icon
             iconType={magicCursorIcon}
             size={20}
-            color='currentColor'
-            alt=''
+            color="currentColor"
+            alt=""
           />
         </button>
 
         <button
-          type='button'
+          type="button"
           className={`rb-bottom-bar__button${isDebugOpen ? ' is-active' : ''}`}
-          aria-label='Debug'
+          aria-label="Debug"
           aria-pressed={isDebugOpen}
           onClick={() => setIsDebugOpen(true)}
         >
-          <Icon iconType={debugIcon} size={20} color='currentColor' alt='' />
+          <Icon iconType={debugIcon} size={20} color="currentColor" alt="" />
         </button>
 
         <button
-          type='button'
+          type="button"
           className={`rb-bottom-bar__button${
             isLocalizationOpen ? ' is-active' : ''
           }`}
-          aria-label='Localization'
+          aria-label="Localization"
           aria-pressed={isLocalizationOpen}
           onClick={() => setIsLocalizationOpen(true)}
         >
           <Icon
             iconType={localizationIcon}
             size={20}
-            color='currentColor'
-            alt=''
+            color="currentColor"
+            alt=""
           />
         </button>
 
         <button
-          type='button'
+          type="button"
           className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
-          aria-label='Color'
+          aria-label="Color"
           aria-pressed={isColorsOpen}
           onClick={() => setIsColorsOpen(true)}
         >
-          <Icon iconType={colorIcon} size={20} color='currentColor' alt='' />
+          <Icon iconType={colorIcon} size={20} color="currentColor" alt="" />
         </button>
 
-        <div className='rb-bottom-bar__spacer' />
+        <div className="rb-bottom-bar__spacer" />
 
-        <div className='rb-bottom-bar__langs' aria-label='Language'>
-          {languages.map(language => (
+        <div className="rb-bottom-bar__langs" aria-label="Language">
+          {languages.map((language) => (
             <button
               key={language}
-              type='button'
+              type="button"
               className={`rb-bottom-bar__lang${
                 activeLanguage === language ? ' is-active' : ''
               }`}
@@ -175,38 +175,38 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
       {isDebugOpen && (
         <Modal
           onClose={() => setIsDebugOpen(false)}
-          ariaLabelledBy='debug-json-editor-title'
-          className='modal--large modal--scrollable'
-          contentClassName='localication-modal__content'
+          ariaLabelledBy="debug-json-editor-title"
+          className="modal--large modal--scrollable"
+          contentClassName="localication-modal__content"
         >
-          <div className='modal__header localication-modal__header'>
-            <div className='localication-modal__header-main'>
-              <h3 id='debug-json-editor-title' className='modal__title'>
+          <div className="modal__header localication-modal__header">
+            <div className="localication-modal__header-main">
+              <h3 id="debug-json-editor-title" className="modal__title">
                 Debug JSON
               </h3>
-              <p className='localication-modal__description'>
+              <p className="localication-modal__description">
                 Inspect and edit raw node JSON.
               </p>
             </div>
             <button
-              type='button'
-              className='editor-button'
+              type="button"
+              className="editor-button"
               onClick={() => setIsDebugOpen(false)}
             >
               Close
             </button>
           </div>
-          <div className='localication-modal__body'>
+          <div className="localication-modal__body">
             <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
               <Checkbox
-                label='Preview mode'
+                label="Preview mode"
                 checked={previewMode}
                 onChange={setPreviewMode}
               />
               <Checkbox
-                label='Dark Mode'
+                label="Dark Mode"
                 checked={appConfig.theme === 'dark'}
-                onChange={checked =>
+                onChange={(checked) =>
                   setAppConfig({
                     ...appConfig,
                     theme: checked ? 'dark' : 'light',
@@ -214,24 +214,24 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
                 }
               />
               <Checkbox
-                label='Is RTL'
+                label="Is RTL"
                 checked={appConfig.isRtl ?? false}
-                onChange={checked =>
+                onChange={(checked) =>
                   setAppConfig({ ...appConfig, isRtl: checked })
                 }
               />
             </div>
             <div
-              className='localication-modal__editor'
+              className="localication-modal__editor"
               style={{ marginTop: 12 }}
             >
               <JsonTextEditor
-                rootName='node'
+                rootName="node"
                 value={data ?? {}}
-                onChange={next =>
+                onChange={(next) =>
                   setData(analyseAndProccess(next as Node) as Node)
                 }
-                className='localication-modal__json-editor'
+                className="localication-modal__json-editor"
               />
             </div>
           </div>

package/src/components/Builder.tsx

@@ -386,23 +386,37 @@ export function Builder({
   function createDefaultNode(type: string): NodeData<NodeDefaultAttribute> {
     const pattern = getPatternByType(type)?.pattern;
     const defaults = getDefaultsForType(type) ?? {};
-    let children: Node = '';
     const childrenSchema = pattern?.children as unknown;
+
+    // Special-case: CarouselProvider MUST contain a Carousel container inside the viewport
+    // otherwise embla-carousel will crash (it expects viewport.firstChild.children).
+    if (type === 'CarouselProvider') {
+      return {
+        type,
+        children: createDefaultNode('Carousel'),
+        attributes: { ...defaults },
+      } as NodeData<NodeDefaultAttribute>;
+    }
+
+    let children: Node = null;
     if (childrenSchema === 'never') {
-      children = '';
+      children = null;
     } else if (childrenSchema === 'string') {
       children = '';
     } else if (
       childrenSchema === 'node' ||
       (Array.isArray(childrenSchema) && childrenSchema.includes('node'))
     ) {
-      children = [];
+      // Default to "no children yet". Using [] here is truthy and can mount
+      // child-dependent widgets (e.g. Embla) with an empty DOM, causing crashes.
+      children = null;
     } else if (typeof childrenSchema === 'string') {
-      // Specific child type like 'carouselItem' – initialize as empty array to allow multiple
-      children = [];
+      // Specific child type like 'CarouselItem' – seed with one child to match the pattern.
+      children = [createDefaultNode(childrenSchema)];
     } else {
-      children = '';
+      children = null;
     }
+
     return {
       type,
       children,

package/src/components/BuilderButton.tsx

@@ -1,7 +1,8 @@
-import { useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { isNodeNullOrUndefined, isNodeString } from '../utils/analyseNode';
 import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
 import { getPatternByType } from '../utils/patterns';
+import { Icon } from './Icon.generated';
 
 export type BuilderButtonProps = {
   node: Node;
@@ -26,8 +27,12 @@ export function BuilderButton({
   }
   const nodeData = node as NodeData<NodeDefaultAttribute>;
 
-  const longPressTimeoutRef = useRef<number | null>(null);
-  const longPressTriggeredRef = useRef(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const actionsRef = useRef<HTMLDivElement | null>(null);
+  const menuId = useMemo(
+    () => `builder-node-actions-${Math.random().toString(36).slice(2, 9)}`,
+    [],
+  );
 
   const handleDelete = () => {
     if (onDelete) {
@@ -35,34 +40,31 @@ export function BuilderButton({
     }
   };
 
-  const clearLongPress = () => {
-    if (longPressTimeoutRef.current !== null) {
-      window.clearTimeout(longPressTimeoutRef.current);
-      longPressTimeoutRef.current = null;
-    }
-  };
+  // Copy/Paste intentionally removed for now.
 
-  const handlePressStart = () => {
-    longPressTriggeredRef.current = false;
-    longPressTimeoutRef.current = window.setTimeout(() => {
-      longPressTriggeredRef.current = true;
-      const shouldDelete = window.confirm('Do you want to delete');
-      if (shouldDelete) {
-        handleDelete();
-      }
-    }, 600);
-  };
+  useEffect(() => {
+    if (!isMenuOpen) return;
 
-  const handlePressEnd = () => {
-    if (!longPressTriggeredRef.current) {
-      onClick();
-    }
-    clearLongPress();
-  };
+    const handlePointerDown = (e: MouseEvent | TouchEvent) => {
+      const el = actionsRef.current;
+      if (!el) return;
+      if (e.target instanceof Element && el.contains(e.target)) return;
+      setIsMenuOpen(false);
+    };
 
-  const handlePressCancel = () => {
-    clearLongPress();
-  };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsMenuOpen(false);
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('touchstart', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('touchstart', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isMenuOpen]);
 
   let extra = '';
   if (nodeData.attributes?.condition) {
@@ -103,17 +105,52 @@ export function BuilderButton({
           </button>
         </div>
       )}
-      <a
-        className="builder__button-link"
-        onMouseDown={handlePressStart}
-        onMouseUp={handlePressEnd}
-        onMouseLeave={handlePressCancel}
-        onTouchStart={handlePressStart}
-        onTouchEnd={handlePressEnd}
-        onTouchCancel={handlePressCancel}
-      >
+      <button type="button" className="builder__button-link" onClick={onClick}>
         {baseLabel}
-      </a>
+      </button>
+      <div className="builder__button-actions" ref={actionsRef}>
+        <button
+          type="button"
+          className="builder__button-actions-trigger"
+          aria-label="Open node actions"
+          aria-haspopup="menu"
+          aria-expanded={isMenuOpen}
+          aria-controls={menuId}
+          onClick={(event) => {
+            event.stopPropagation();
+            setIsMenuOpen((v) => !v);
+          }}
+        >
+          <Icon iconType="chevron-right" size={16} />
+        </button>
+        {isMenuOpen && (
+          <ul
+            id={menuId}
+            className="builder__button-actions-menu"
+            role="menu"
+            aria-label="Node actions"
+          >
+            <li role="none">
+              <button
+                type="button"
+                className="builder__button-actions-item builder__button-actions-item--danger"
+                role="menuitem"
+                disabled={!onDelete}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!onDelete) return;
+                  const shouldDelete = window.confirm('Do you want to delete?');
+                  if (!shouldDelete) return;
+                  handleDelete();
+                  setIsMenuOpen(false);
+                }}
+              >
+                Delete
+              </button>
+            </li>
+          </ul>
+        )}
+      </div>
       {conditionLabel && (
         <span className="builder__button-condition">{conditionLabel}</span>
       )}

package/src/components/BuilderProvider.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
+import { RenderErrorBoundary } from './RenderErrorBoundary';
 
 // NOTE: We keep this context intentionally tiny.
 // IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
@@ -12,6 +13,8 @@ export type Products = Product;
 export type BuilderProviderParams = {
   products: Products[];
   benefits: PaywallBenefits;
+  onPaywallClose?: () => void;
+  onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
 };
 
 type BuilderProviderProps = {
@@ -31,12 +34,29 @@ 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
+          : undefined,
     }),
-    [params?.benefits, params?.products],
+    [
+      params?.benefits,
+      params?.products,
+      params?.onPaywallClose,
+      params?.onPaywallSubscribe,
+    ],
   );
 
   return (
-    <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
+    <BuilderContext.Provider value={value}>
+      <RenderErrorBoundary subtitle="caught by BuilderProvider">
+        {children}
+      </RenderErrorBoundary>
+    </BuilderContext.Provider>
   );
 }
 

package/src/components/DeviceButton.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Device } from '../types/Device';
-import androidIcon from '../assets/images/android.svg';
-import iosIcon from '../assets/images/apple.svg';
+import { getImage, TribeAssetName } from '../utils/getImage';
 
 const platformIcons: Record<string, string> = {
-  android: androidIcon,
-  ios: iosIcon,
+  android: getImage(TribeAssetName.Android),
+  ios: getImage(TribeAssetName.Apple),
 };
 
 type DeviceButtonProps = {
@@ -20,6 +19,14 @@ export function DeviceButton({
   onSelect,
 }: DeviceButtonProps) {
   const platformIcon = platformIcons[device.platform];
+  const aspect =
+    device.aspect ??
+    (() => {
+      const r = device.height / device.width;
+      if (r >= 2.05) return 'tall' as const;
+      if (r <= 1.75) return 'wide' as const;
+      return 'regular' as const;
+    })();
 
   return (
     <button
@@ -30,7 +37,7 @@ export function DeviceButton({
       onClick={() => onSelect(device)}
     >
       {device.name} <br />
-      {device.width}x{device.height}
+      {device.width}×{device.height} ({aspect})
       {platformIcon && <img src={platformIcon} alt="" aria-hidden="true" />}
     </button>
   );