@developer_tribe/react-builder 1.0.7 → 1.0.9

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

package/src/components/ParamsProvider.tsx

@@ -6,6 +6,11 @@ export type OtherParams = Record<string, string | boolean | number>;
 export type ParamsContextValue = {
   localizationParams: LocalizationParams;
   otherParams: OtherParams;
+  /**
+   * `true` when the value comes from an actual `<ParamsProvider />` in the tree.
+   * Used to detect nesting vs the default context value.
+   */
+  isProvided: boolean;
 };
 
 export type ParamsProviderProps = {
@@ -17,6 +22,7 @@ export type ParamsProviderProps = {
 export const ParamsContext = createContext<ParamsContextValue>({
   localizationParams: {},
   otherParams: {},
+  isProvided: false,
 });
 
 export function ParamsProvider({
@@ -28,6 +34,7 @@ export function ParamsProvider({
     () => ({
       localizationParams: localizationParams ?? {},
       otherParams: otherParams ?? {},
+      isProvided: true,
     }),
     [localizationParams, otherParams],
   );

package/src/components/RenderErrorBoundary.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+
+export type RenderErrorBoundaryProps = {
+  children: React.ReactNode;
+  /**
+   * Optional label to show under the title, to help identify which preview crashed
+   * (e.g. "caught by BuilderProvider" vs "caught by ProjectDebug").
+   */
+  subtitle?: string;
+  /** Optional callback invoked when an error is caught. */
+  onError?: (error: Error, componentStack?: string) => void;
+};
+
+type RenderErrorBoundaryState = {
+  error: Error | null;
+  errorStack?: string;
+  componentStack?: string;
+  copied?: boolean;
+  copyError?: string | null;
+};
+
+export class RenderErrorBoundary extends React.Component<
+  RenderErrorBoundaryProps,
+  RenderErrorBoundaryState
+> {
+  state: RenderErrorBoundaryState = {
+    error: null,
+    errorStack: undefined,
+    componentStack: undefined,
+    copied: false,
+    copyError: null,
+  };
+
+  static getDerivedStateFromError(
+    error: Error,
+  ): Partial<RenderErrorBoundaryState> {
+    return {
+      error,
+      errorStack: error?.stack,
+      copied: false,
+      copyError: null,
+    };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    const componentStack =
+      (info as unknown as { componentStack?: string })?.componentStack ??
+      undefined;
+
+    this.setState({
+      error,
+      errorStack: error?.stack,
+      componentStack,
+    });
+
+    this.props.onError?.(error, componentStack);
+  }
+
+  private buildDetails(): string {
+    const { error, errorStack, componentStack } = this.state;
+    return [
+      `Error: ${error?.message ?? ''}`,
+      '',
+      errorStack ? `Stack:\n${errorStack}` : 'Stack: (missing)',
+      '',
+      componentStack
+        ? `React component stack:\n${componentStack}`
+        : 'React component stack: (missing)',
+    ].join('\n');
+  }
+
+  private copyDetails = async () => {
+    const details = this.buildDetails();
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(details);
+        this.setState({ copied: true, copyError: null });
+        window.setTimeout(() => this.setState({ copied: false }), 900);
+        return;
+      }
+    } catch {
+      // fall through to legacy method
+    }
+
+    try {
+      if (typeof document === 'undefined') {
+        this.setState({ copied: false, copyError: 'Copy failed' });
+        return;
+      }
+      const el = document.createElement('textarea');
+      el.value = details;
+      el.setAttribute('readonly', 'true');
+      el.style.position = 'fixed';
+      el.style.opacity = '0';
+      document.body.appendChild(el);
+      el.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(el);
+      if (!ok) {
+        this.setState({ copied: false, copyError: 'Copy failed' });
+        return;
+      }
+      this.setState({ copied: true, copyError: null });
+      window.setTimeout(() => this.setState({ copied: false }), 900);
+    } catch (e) {
+      this.setState({
+        copied: false,
+        copyError: e instanceof Error ? e.message : 'Copy failed',
+      });
+    }
+  };
+
+  private reset = () => {
+    this.setState({
+      error: null,
+      errorStack: undefined,
+      componentStack: undefined,
+      copied: false,
+      copyError: null,
+    });
+  };
+
+  render() {
+    const { error, copied, copyError } = this.state;
+    if (!error) return this.props.children;
+
+    const details = this.buildDetails();
+
+    return (
+      <div
+        role="alert"
+        style={{
+          padding: 16,
+          borderRadius: 12,
+          background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+          color:
+            'hsl(var(--card-foreground, var(--rb-card-foreground, 220.9 39.3% 11%)))',
+          border:
+            '1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.9)',
+        }}
+      >
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <div style={{ fontWeight: 700 }}>Preview crashed</div>
+          {this.props.subtitle && (
+            <div style={{ opacity: 0.8, fontSize: 12 }}>
+              ({this.props.subtitle})
+            </div>
+          )}
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={this.copyDetails}
+            >
+              {copied ? 'Copied' : 'Copy details'}
+            </button>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={this.reset}
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+
+        {copyError && (
+          <div
+            style={{
+              marginTop: 8,
+              color:
+                'hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))',
+              fontSize: 12,
+            }}
+          >
+            {copyError}
+          </div>
+        )}
+
+        <pre
+          style={{
+            marginTop: 12,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontSize: 12,
+            lineHeight: 1.4,
+            background: 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)))',
+            padding: 12,
+            borderRadius: 10,
+            overflow: 'auto',
+            maxHeight: 360,
+          }}
+        >
+          {details}
+        </pre>
+      </div>
+    );
+  }
+}

package/src/hooks/useParams.ts

@@ -3,6 +3,10 @@ import { ParamsContext } from '../components/ParamsProvider';
 
 export function useParams() {
   return (
-    useContext(ParamsContext) ?? { localizationParams: {}, otherParams: {} }
+    useContext(ParamsContext) ?? {
+      localizationParams: {},
+      otherParams: {},
+      isProvided: false,
+    }
   );
 }

package/src/hooks/useSyncHtmlThemeClass.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useRenderStore } from '../store';
+
+/**
+ * Syncs the builder's `appConfig.theme` to the DOM so CSS can react to `.dark`.
+ *
+ * - Uses `html.dark` as the toggle (shadcn/tailwind convention).
+ * - Also toggles `html.light` so system dark can be overridden back to light.
+ */
+export function useSyncHtmlThemeClass() {
+  const theme = useRenderStore((s) => s.appConfig.theme);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    root.classList.toggle('dark', theme === 'dark');
+    root.classList.toggle('light', theme === 'light');
+  }, [theme]);
+}

package/src/index.native.ts

@@ -57,6 +57,13 @@ export {
 export { novaToJson } from './utils/novaToJson';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
 export { querySelector } from './utils/querySelector';
+export {
+  getImage,
+  TRIBE_ASSETS_BASE_URL,
+  TribeAssetName,
+  parseTribeAssetName,
+  resolveImageSrc,
+} from './utils/getImage';
 export {
   getPatternByType,
   getAttributeSchema,

package/src/index.ts

@@ -8,6 +8,7 @@ export {
 } from './components/BuilderProvider';
 export { ParamsProvider } from './components/ParamsProvider';
 export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
+export { RenderErrorBoundary } from './components/RenderErrorBoundary';
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
@@ -39,6 +40,13 @@ export { querySelector } from './utils/querySelector';
 export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
+export {
+  getImage,
+  TRIBE_ASSETS_BASE_URL,
+  TribeAssetName,
+  parseTribeAssetName,
+  resolveImageSrc,
+} from './utils/getImage';
 export { ProjectPage } from './pages/ProjectPage';
 export type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';