@developer_tribe/react-builder 1.0.8 → 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/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>
   );

package/src/components/EditorHeader.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Device } from '../types/Device';
 import type { Node } from '../types/Node';
 import { copyNode } from '../utils/copyNode';
@@ -7,6 +7,9 @@ import { useRenderStore } from '../store';
 import { useLogRender } from '../utils/useLogRender';
 import { DeviceButton } from './DeviceButton';
 import { DeviceSelectorModal } from '../modals/DeviceSelectorModal';
+import { toast } from 'react-toastify';
+import { getSamples } from '../assets/samples/getSamples';
+import type { Project } from '../types/Project';
 
 const devices = getDevices();
 interface EditorHeaderProps {
@@ -26,17 +29,67 @@ export function EditorHeader({
 }: EditorHeaderProps) {
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
+  const [isActionsOpen, setIsActionsOpen] = useState(false);
+  const actionsRef = useRef<HTMLDivElement | null>(null);
   const copiedNode = useRenderStore((s) => s.copiedNode);
   const {
     device: selectedDevice,
     setDevice,
     setCurrent,
+    setAppConfig,
+    setProjectColors,
   } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
     setCurrent: s.setCurrent,
+    setAppConfig: s.setAppConfig,
+    setProjectColors: s.setProjectColors,
   }));
 
+  const sortedSamples = useMemo(() => {
+    const weight = (t?: Project['type']) => {
+      if (t === 'paywall') return 0;
+      if (t === 'onboard') return 1;
+      return 2;
+    };
+    return getSamples()
+      .slice()
+      .sort((a, b) => {
+        const w = weight(a.type) - weight(b.type);
+        if (w !== 0) return w;
+        return a.name.localeCompare(b.name);
+      });
+  }, []);
+
+  const actionsMenuId = useMemo(
+    () => `editor-actions-menu-${Math.random().toString(36).slice(2, 9)}`,
+    [],
+  );
+
+  useEffect(() => {
+    if (!isActionsOpen) return;
+
+    const handlePointerDown = (e: MouseEvent | TouchEvent) => {
+      const el = actionsRef.current;
+      if (!el) return;
+      if (e.target instanceof Element && el.contains(e.target)) return;
+      setIsActionsOpen(false);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsActionsOpen(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);
+    };
+  }, [isActionsOpen]);
+
   function replaceNode(root: Node, target: Node, next: Node): Node {
     if (root === target) return next;
     if (root === null || root === undefined) return root;
@@ -50,16 +103,13 @@ export function EditorHeader({
       });
       return changed ? arr : root;
     }
-    const data = root as any;
+    const data = root as Record<string, unknown>;
     if ('children' in data) {
-      const prev = data.children;
+      const prev = data.children as Node;
       const replaced = Array.isArray(prev)
-        ? prev.map((c: Node) => replaceNode(c, target, next))
-        : replaceNode(prev as Node, target, next);
-      if (replaced !== prev) {
-        data.children = replaced;
-        return { ...data, children: replaced } as Node;
-      }
+        ? prev.map((c) => replaceNode(c, target, next))
+        : replaceNode(prev, target, next);
+      if (replaced !== prev) return { ...data, children: replaced } as Node;
     }
     return root;
   }
@@ -81,6 +131,104 @@ export function EditorHeader({
     // in sync with what’s rendered/edited.
     setCurrent(cloned);
   };
+
+  const cloneNode = (node: Node): Node =>
+    JSON.parse(JSON.stringify(node)) as Node;
+
+  const handleReplaceFromSample = (sample: Project) => {
+    if (!setEditorData) return;
+    const next = cloneNode(sample.data);
+    setEditorData(next);
+    setCurrent(next);
+    if (sample.appConfig) setAppConfig(sample.appConfig);
+    setProjectColors(sample.projectColors);
+    toast.success(`Replaced with "${sample.name}"`);
+  };
+
+  const handlePasteFromSample = (sample: Project) => {
+    if (!current || !editorData || !setEditorData) return;
+    const incoming = cloneNode(sample.data);
+
+    const isRecord = (v: unknown): v is Record<string, unknown> =>
+      typeof v === 'object' && v !== null && !Array.isArray(v);
+
+    const isNodeData = (v: unknown): v is Record<string, unknown> =>
+      isRecord(v) && 'type' in v && 'children' in v;
+
+    const getPasteNodes = (node: Node): Node[] => {
+      if (isNodeData(node)) {
+        const t = node.type;
+        const isMainLike = t === 'main' || node.isMain === true;
+        if (isMainLike) {
+          const ch = node.children as Node;
+          if (!ch) return [];
+          return Array.isArray(ch) ? ch : [ch];
+        }
+      }
+      return [node];
+    };
+
+    // "Paste from sample" should ADD the sample into the selected node (not replace it).
+    // We do this by appending the sample's root node into current.children.
+    if (!isNodeData(current)) {
+      toast.error('Select a component node to paste into');
+      return;
+    }
+
+    const prevChildren = current.children as Node;
+    const pasteNodes = getPasteNodes(incoming);
+    if (pasteNodes.length === 0) {
+      toast.error('Sample has no children to paste');
+      return;
+    }
+    let nextChildren: Node;
+    if (!prevChildren) {
+      nextChildren = pasteNodes.length === 1 ? pasteNodes[0] : pasteNodes;
+    } else if (Array.isArray(prevChildren)) {
+      nextChildren = [...prevChildren, ...pasteNodes];
+    } else {
+      nextChildren = [prevChildren, ...pasteNodes];
+    }
+
+    const nextNode: Node = { ...current, children: nextChildren } as Node;
+
+    const updated = replaceNode(editorData, current, nextNode);
+    setEditorData(updated);
+    setCurrent(nextNode);
+    toast.success(`Pasted from "${sample.name}"`);
+  };
+
+  const closeActions = () => setIsActionsOpen(false);
+  const handleSaveProject = () => {
+    onSaveProject?.();
+    closeActions();
+  };
+  const handleRestoreProject = () => {
+    try {
+      onRestoreProject?.();
+      toast.info('Restored');
+    } catch {
+      toast.error('Restore failed');
+    } finally {
+      closeActions();
+    }
+  };
+  const handleCopyAndClose = () => {
+    if (!canCopy) return;
+    handleCopy();
+    toast.info('Copied');
+    closeActions();
+  };
+  const handlePasteAndClose = () => {
+    if (!canPaste) return;
+    handlePaste();
+    toast.success('Pasted');
+    closeActions();
+  };
+
+  const canCopy = !!current;
+  const canPaste = !!current && !!editorData && !!setEditorData && !!copiedNode;
+
   return (
     <div
       className="editor-header"
@@ -105,38 +253,148 @@ export function EditorHeader({
         </button>
       </div>
       <div className="editor-header__actions">
-        <button
-          className="editor-button editor-save-button"
-          aria-label="Save project data"
-          onClick={() => onSaveProject && onSaveProject()}
-        >
-          Save
-        </button>
-        {onRestoreProject && (
-          <button
-            className="editor-button editor-save-previewconfig-button"
-            aria-label="Restore project data"
-            onClick={() => onRestoreProject()}
-          >
-            Restore
-          </button>
-        )}
-        <button
-          className="editor-button"
-          aria-label="Copy node"
-          onClick={handleCopy}
-        >
-          Copy
-        </button>
-        {copiedNode && (
+        <div className="editor-actions-dropdown" ref={actionsRef}>
           <button
-            className="editor-button"
-            aria-label="Paste node"
-            onClick={handlePaste}
+            className="editor-button editor-actions-dropdown__trigger"
+            aria-label="Open actions menu"
+            aria-haspopup="menu"
+            aria-expanded={isActionsOpen}
+            aria-controls={actionsMenuId}
+            onClick={() => setIsActionsOpen((v) => !v)}
           >
-            Paste
+            Actions
+            <span className="editor-actions-dropdown__caret" aria-hidden="true">
+              ▾
+            </span>
           </button>
-        )}
+          {isActionsOpen && (
+            <ul
+              id={actionsMenuId}
+              className="editor-actions-dropdown__menu"
+              role="menu"
+              aria-label="Editor actions"
+            >
+              <li role="none" className="editor-actions-dropdown__submenu-root">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  aria-haspopup="menu"
+                  aria-label="Replace from samples"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  Replace from samples
+                  <span
+                    className="editor-actions-dropdown__submenu-caret"
+                    aria-hidden="true"
+                  >
+                    ◂
+                  </span>
+                </button>
+                <ul
+                  className="editor-actions-dropdown__submenu"
+                  role="menu"
+                  aria-label="Replace from sample"
+                >
+                  {sortedSamples.map((s) => (
+                    <li role="none" key={`replace-${s.name}`}>
+                      <button
+                        className="editor-actions-dropdown__item editor-actions-dropdown__item--compact"
+                        role="menuitem"
+                        onClick={() => {
+                          handleReplaceFromSample(s);
+                          closeActions();
+                        }}
+                      >
+                        {s.name}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+              <li role="none" className="editor-actions-dropdown__submenu-root">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  aria-haspopup="menu"
+                  aria-label="Paste from samples"
+                  onClick={(e) => e.preventDefault()}
+                  disabled={!current}
+                  title={!current ? 'Select a node first' : undefined}
+                >
+                  Paste from samples
+                  <span
+                    className="editor-actions-dropdown__submenu-caret"
+                    aria-hidden="true"
+                  >
+                    ◂
+                  </span>
+                </button>
+                <ul
+                  className="editor-actions-dropdown__submenu"
+                  role="menu"
+                  aria-label="Paste from sample"
+                >
+                  {sortedSamples.map((s) => (
+                    <li role="none" key={`paste-${s.name}`}>
+                      <button
+                        className="editor-actions-dropdown__item editor-actions-dropdown__item--compact"
+                        role="menuitem"
+                        onClick={() => {
+                          handlePasteFromSample(s);
+                          closeActions();
+                        }}
+                        disabled={!current}
+                      >
+                        {s.name}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+              <li role="none">
+                <button
+                  className="editor-actions-dropdown__item editor-save-button"
+                  role="menuitem"
+                  onClick={handleSaveProject}
+                  disabled={!onSaveProject}
+                >
+                  Save
+                </button>
+              </li>
+              {onRestoreProject && (
+                <li role="none">
+                  <button
+                    className="editor-actions-dropdown__item editor-save-previewconfig-button"
+                    role="menuitem"
+                    onClick={handleRestoreProject}
+                  >
+                    Restore
+                  </button>
+                </li>
+              )}
+              <li role="none">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  onClick={handleCopyAndClose}
+                  disabled={!canCopy}
+                >
+                  Copy
+                </button>
+              </li>
+              <li role="none">
+                <button
+                  className="editor-actions-dropdown__item"
+                  role="menuitem"
+                  onClick={handlePasteAndClose}
+                  disabled={!canPaste}
+                >
+                  Paste
+                </button>
+              </li>
+            </ul>
+          )}
+        </div>
       </div>
       {isDevicesModalOpen && (
         <DeviceSelectorModal