@developer_tribe/react-builder 1.2.18 → 1.2.20

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -20,8 +20,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeName = node.type ?? 'OnboardDot';
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
-  const styleBag = attrs?.style;
-  const dotType = attrs?.dotType || 'normal_dot';
+  const stylesBag =
+    ((attrs as any)?.styles as Record<string, unknown> | undefined) ??
+    ((attrs as any)?.style as Record<string, unknown> | undefined) ??
+    undefined;
+  const dotType =
+    (stylesBag?.dotType as any) ?? (attrs as any)?.dotType ?? 'normal_dot';
   const GHOST_DOT_DARK_COLOR = '#E4E5E7';
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const {
@@ -37,12 +41,32 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
   const inactiveDotColor = isDark
     ? GHOST_DOT_DARK_COLOR
     : GHOST_DOT_LIGHT_COLOR;
-  const inactiveDotOpacity = attrs?.inactive_dot_opacity ?? 0.3;
-  const activeDotColor = attrs?.active_dot_color;
+  const inactiveDotOpacity =
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
+    (attrs as any)?.inactive_dot_opacity ??
+    0.3;
+  const inactiveDotColorOverride =
+    (stylesBag?.inactive_dot_color as string | undefined) ??
+    (attrs as any)?.inactive_dot_color;
+  const activeDotColor =
+    (stylesBag?.active_dot_color as string | undefined) ??
+    (attrs as any)?.active_dot_color;
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
     [activeDotColor, appConfig.theme, projectColors],
   );
+  const resolvedInactiveDotColor = useMemo(() => {
+    const parsed = parseColor(inactiveDotColorOverride, {
+      theme: appConfig.theme,
+      projectColors,
+    });
+    return parsed ?? inactiveDotColor;
+  }, [
+    inactiveDotColor,
+    inactiveDotColorOverride,
+    appConfig.theme,
+    projectColors,
+  ]);
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
@@ -58,27 +82,31 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const expandingDotWidthRaw = attrs?.expanding_dot_width;
-  const expandingDotWidthOverride = useMemo(() => {
-    const parsed = parseSize(expandingDotWidthRaw);
-    if (parsed === undefined) return undefined;
-
-    // `parseSize` may return number (px) or a string (e.g. "50%").
-    const cssWidth =
-      typeof parsed === 'number'
-        ? `${parsed}px`
-        : typeof parsed === 'string'
-          ? parsed
-          : undefined;
-
-    if (!cssWidth) return undefined;
-
-    return {
-      // Controls the actual dot diameter (`.embla__dot:after`).
-      '--embla-dot-size': cssWidth,
-    } as React.CSSProperties & Record<`--${string}`, string>;
-  }, [expandingDotWidthRaw]);
-  const containerStyle = useMergedStyle(style, expandingDotWidthOverride);
+  const dotThicknessRaw =
+    (stylesBag?.dot_thickness as any) ?? (attrs as any)?.dot_thickness;
+  const dotSizeCss = useMemo((): string => {
+    const parsed = parseSize(dotThicknessRaw);
+    if (parsed === undefined) return '10px';
+    if (typeof parsed === 'number') return `${parsed}px`;
+    if (typeof parsed === 'string' && parsed.trim()) return parsed;
+    return '10px';
+  }, [dotThicknessRaw]);
+  const dotGapCss = useMemo((): string => {
+    // Prefer px math when possible; otherwise fall back to 10px/3.
+    const px =
+      typeof dotSizeCss === 'string' && dotSizeCss.trim().endsWith('px')
+        ? Number.parseFloat(dotSizeCss)
+        : Number.NaN;
+    const n = Number.isFinite(px) ? px : 10;
+    return `${Math.max(0, n / 3)}px`;
+  }, [dotSizeCss]);
+  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const containerStyle = useMergedStyle(style, {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: gapValue,
+    alignItems: 'center',
+  });
 
   const onboardApi = useContext(onboardContext);
   const emblaApi = onboardApi?.emblaApi;
@@ -115,16 +143,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     >
       {scrollSnaps.map((snap, index) => {
         const isDotSelected = selectedIndex === index;
-        const dotStyles: React.CSSProperties & Record<`--${string}`, string> = {
-          opacity: isDotSelected ? 1 : inactiveDotOpacity,
-        };
-
-        if (resolvedActiveDotColor && isDotSelected) {
-          // Style the actual visual dot (rendered via `.embla__dot:after`) using a CSS variable.
-          dotStyles['--embla-dot-color'] = resolvedActiveDotColor;
-        } else if (!isDotSelected) {
-          dotStyles['--embla-dot-color'] = inactiveDotColor;
-        }
+        const resolvedColor =
+          isDotSelected && resolvedActiveDotColor
+            ? resolvedActiveDotColor
+            : resolvedInactiveDotColor;
+        const activeFallback = '#007AFF';
+        const dotColor = resolvedColor ?? activeFallback;
 
         return (
           <button
@@ -132,13 +156,23 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
             onClick={() => {
               emblaApi?.scrollTo(snap);
             }}
-            className={`embla__dot ${isDotSelected ? 'embla__dot--selected' : ''}`}
-            style={dotStyles}
+            className="embla__dot"
+            style={{
+              width: dotSizeCss,
+              height: dotSizeCss,
+              backgroundColor: dotColor,
+              opacity: isDotSelected ? 1 : inactiveDotOpacity,
+              borderRadius: '9999px',
+              border: 0,
+              padding: 0,
+              margin: 0,
+              display: 'inline-block',
+              cursor: 'pointer',
+              boxSizing: 'border-box',
+            }}
             aria-label={`Go to slide ${index + 1}`}
             aria-current={isDotSelected ? 'true' : undefined}
-          >
-            {/* Dot visuals are rendered via CSS (`.embla__dot:after`). */}
-          </button>
+          />
         );
       })}
     </div>

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -69,8 +69,9 @@ export interface OnboardDotPropsGenerated {
     title?: string;
     description?: string;
     dotType?: DotTypeOptionType;
+    dot_thickness?: string;
     inactive_dot_opacity?: number;
-    expanding_dot_width?: string;
+    inactive_dot_color?: string;
     active_dot_color?: string;
     flexDirection?: never;
     alignItems?: never;

package/src/build-components/OnboardDot/pattern.json

@@ -15,18 +15,29 @@
         "sliding_dot",
         "liquid_like"
       ],
+      "dot_thickness": "size",
       "inactive_dot_opacity": "number",
-      "expanding_dot_width": "size",
+      "inactive_dot_color": "color",
       "active_dot_color": "color",
       "flexDirection": "never",
       "alignItems": "never",
       "justifyContent": "never"
     }
   },
+  "defaults": {
+    "dotType": "expanding_dot",
+    "dot_thickness": 10,
+    "inactive_dot_opacity": 0.3,
+    "active_dot_color": "#007AFF",
+    "style": {
+      "flexDirection": "row",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "gap": "12@s"
+    }
+  },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider"
-    ],
+    "desiredParent": [">OnboardProvider"],
     "label": "Onboard Dot",
     "description": "Renders onboarding progress dots.",
     "styles": {
@@ -42,21 +53,28 @@
         "description": "Opacity for inactive dots.",
         "category": "style",
         "specialCategory": null,
-        "sort": 2
+        "sort": 3
       },
-      "expanding_dot_width": {
-        "label": "Expanding Dot Width",
-        "description": "Width used while expanding.",
+      "inactive_dot_color": {
+        "label": "Inactive Dot Color",
+        "description": "Color of inactive dots.",
         "category": "style",
         "specialCategory": null,
-        "sort": 3
+        "sort": 4
+      },
+      "dot_thickness": {
+        "label": "Dot Thickness",
+        "description": "Dot size/diameter.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
       },
       "active_dot_color": {
         "label": "Active Dot Color",
         "description": "Color of the active dot.",
         "category": "style",
         "specialCategory": null,
-        "sort": 4
+        "sort": 5
       }
     }
   }

package/src/build-components/PaywallProvider/PaywallProvider.tsx

@@ -62,6 +62,8 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
 
   const [selectedProductId, setSelectedProductId] = useState<string>('');
   const [isBackAllowed, setIsBackAllowed] = useState<boolean>(false);
+  useChangeDelayByPaywall(node, setIsBackAllowed);
+  useMockOSBackHandler(isBackAllowed);
   useEffect(() => {
     const list = Array.isArray(products) ? products : [];
     if (list.length === 0) {
@@ -75,9 +77,6 @@ function PaywallProvider({ node }: PaywallProviderComponentProps) {
     }
   }, [products, selectedProductId]);
 
-  useChangeDelayByPaywall(node, setIsBackAllowed);
-  useMockOSBackHandler(isBackAllowed);
-
   const selectedProduct = useMemo(() => {
     const list = Array.isArray(products) ? products : [];
     return (

package/src/build-components/Text/Text.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
@@ -17,9 +11,10 @@ import { useLocalize } from '../../hooks/useLocalize';
 function Text({ node }: TextComponentProps) {
   useLogRender('Text');
   node = useNode(node);
-  const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'text';
-  const attributeKey = node.key ?? generatedId;
+  // Only use real node keys for selection. `useId()` values (e.g. ":r13:") are
+  // not present in the persisted node tree, so they break click-to-select.
+  const attributeKey = node.key;
   const textRef = useRef<HTMLParagraphElement | null>(null);
   const [autoFontSizePx, setAutoFontSizePx] = useState<number | null>(null);
   const { appConfig, previewMode, selectedKey } = useBuilderParams();

package/src/build-components/patterns.generated.ts

@@ -6103,8 +6103,9 @@ export const patterns = [
           'sliding_dot',
           'liquid_like',
         ],
+        dot_thickness: 'size',
         inactive_dot_opacity: 'number',
-        expanding_dot_width: 'size',
+        inactive_dot_color: 'color',
         active_dot_color: 'color',
         flexDirection: 'never',
         alignItems: 'never',
@@ -6169,21 +6170,28 @@ export const patterns = [
           description: 'Opacity for inactive dots.',
           category: 'style',
           specialCategory: null,
-          sort: 2,
+          sort: 3,
         },
-        expanding_dot_width: {
-          label: 'Expanding Dot Width',
-          description: 'Width used while expanding.',
+        inactive_dot_color: {
+          label: 'Inactive Dot Color',
+          description: 'Color of inactive dots.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
+        },
+        dot_thickness: {
+          label: 'Dot Thickness',
+          description: 'Dot size/diameter.',
+          category: 'style',
+          specialCategory: null,
+          sort: 2,
         },
         active_dot_color: {
           label: 'Active Dot Color',
           description: 'Color of the active dot.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
       },
       attributes: {
@@ -6440,13 +6448,20 @@ export const patterns = [
     },
     defaults: {
       style: {
-        flexDirection: 'column',
+        flexDirection: 'row',
         position: 'relative',
         zIndex: 1,
         alignSelf: 'flex-start',
         flexGrow: 0,
         flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '12@s',
       },
+      dotType: 'expanding_dot',
+      dot_thickness: 10,
+      inactive_dot_opacity: 0.3,
+      active_dot_color: '#007AFF',
     },
     types: {},
   },

package/src/build-components/useNode.ts

@@ -9,18 +9,33 @@ export default function useNode<
   if (!defaults) return node;
   const nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T & {
     style?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
   };
   const defaultAttributes = defaults as T as T & {
     style?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
+  };
+  // Merge style from both defaults.style and defaults.styles (for schemaVersion=2 compatibility)
+  const defaultStyle = {
+    ...(defaultAttributes?.styles ?? {}),
+    ...(defaultAttributes?.style ?? {}),
+  };
+  // Merge node style from both node.attributes.style and node.attributes.styles
+  const nodeStyle = {
+    ...(nodeAttributes?.styles ?? {}),
+    ...(nodeAttributes?.style ?? {}),
+  };
+  const mergedStyle = {
+    ...defaultStyle,
+    ...nodeStyle,
   };
   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 ?? {}),
-    },
+    // Keep both `style` (for runtime back-compat) and `styles` (for editor schemaVersion=2) in sync.
+    style: mergedStyle,
+    styles: mergedStyle,
   } as T;
   if (
     mergedAttributes &&
@@ -29,6 +44,7 @@ export default function useNode<
     Object.keys((mergedAttributes as any).style).length === 0
   ) {
     delete (mergedAttributes as any).style;
+    delete (mergedAttributes as any).styles;
   }
   return { ...node, attributes: mergedAttributes };
 }

package/src/components/AttributesEditorPanel.tsx

@@ -3,6 +3,7 @@ import type { Node } from '../types/Node';
 import type { ProjectColors } from '../types/Project';
 import { useLogRender } from '../utils/useLogRender';
 import { useRenderStore } from '../store';
+import { findNodeByKey } from '../utils/nodeTree';
 
 interface AttributesEditorPanelProps {
   attributes: any;
@@ -22,6 +23,16 @@ export function AttributesEditorPanel({
   }));
   if (!current) return null;
 
+  const currentKey =
+    typeof current === 'object' && !Array.isArray(current) && 'key' in current
+      ? ((current as any).key as string | undefined)
+      : undefined;
+  const resolvedCurrent =
+    currentKey && attributes
+      ? findNodeByKey(attributes as Node, currentKey)
+      : null;
+  const nodeForEditor = resolvedCurrent ?? current;
+
   function replaceNode(root: Node, target: Node, next: Node): Node {
     if (root === target) return next;
     if (root === null || root === undefined) return root;
@@ -58,7 +69,8 @@ export function AttributesEditorPanel({
   return (
     <div className="attributes-editor-panel">
       <AttributesEditor
-        node={current}
+        key={currentKey ?? undefined}
+        node={nodeForEditor}
         onChange={handleAttributesChange}
         projectColors={projectColors}
       />

package/src/components/Builder.tsx

@@ -11,6 +11,8 @@ import { useLogRender } from '../utils/useLogRender';
 import { getDefaultsForType, getPatternByType } from '../utils/patterns';
 import { AddComponentModal } from '../modals/AddComponentModal';
 import { BuilderButton } from './BuilderButton';
+import { generateRandomKeyForNode } from '../utils/generateRandomKeyForNode';
+import { collectNodeKeys } from '../utils/repairNodeKeys';
 
 type BuilderEditorProps = {
   data: Node;
@@ -156,6 +158,7 @@ export function Builder({
 }: BuilderEditorProps) {
   useLogRender('Builder');
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const usedKeys = useMemo(() => collectNodeKeys(data), [data]);
   const breadcrumbPath = useMemo(() => {
     const path = findNodePath(data, current);
     if (path.length) return path;
@@ -190,7 +193,8 @@ export function Builder({
 
   const handleAddChild = useCallback(
     (type: string) => {
-      const nextChild = createDefaultNode(type);
+      const nextUsedKeys = new Set(usedKeys);
+      const nextChild = createDefaultNode(type, nextUsedKeys);
 
       // Root (or selection) can be empty/null-ish: allow creating the first node.
       if (isNodeNullOrUndefined(current)) {
@@ -247,7 +251,7 @@ export function Builder({
       setData(updatedRoot);
       setCurrent(updatedParent);
     },
-    [current, data, setData, setCurrent],
+    [current, data, setData, setCurrent, usedKeys],
   );
 
   const allowedChildTypes = useMemo(
@@ -383,17 +387,26 @@ export function Builder({
     return root;
   }
 
-  function createDefaultNode(type: string): NodeData<NodeDefaultAttribute> {
+  function createDefaultNode(
+    type: string,
+    nextUsedKeys: Set<string>,
+  ): NodeData<NodeDefaultAttribute> {
     const pattern = getPatternByType(type)?.pattern;
     const defaults = getDefaultsForType(type) ?? {};
     const childrenSchema = pattern?.children as unknown;
+    let key = '';
+    do {
+      key = generateRandomKeyForNode(type);
+    } while (nextUsedKeys.has(key));
+    nextUsedKeys.add(key);
 
     // 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'),
+        key,
+        children: createDefaultNode('Carousel', nextUsedKeys),
         attributes: { ...defaults },
       } as NodeData<NodeDefaultAttribute>;
     }
@@ -412,13 +425,14 @@ export function Builder({
       children = null;
     } else if (typeof childrenSchema === 'string') {
       // Specific child type like 'CarouselItem' – seed with one child to match the pattern.
-      children = [createDefaultNode(childrenSchema)];
+      children = [createDefaultNode(childrenSchema, nextUsedKeys)];
     } else {
       children = null;
     }
 
     return {
       type,
+      key,
       children,
       attributes: { ...defaults },
     } as NodeData<NodeDefaultAttribute>;

package/src/components/EditorHeader.tsx

@@ -3,6 +3,7 @@ import type { Device } from '../types/Device';
 import type { Node } from '../types/Node';
 import { copyNode } from '../utils/copyNode';
 import { getDevices } from '../utils/getDevices';
+import { collectNodeKeys, repairNodeKeys } from '../utils/repairNodeKeys';
 import { useRenderStore } from '../store';
 import { useLogRender } from '../utils/useLogRender';
 import { DeviceButton } from './DeviceButton';
@@ -120,7 +121,9 @@ export function EditorHeader({
     if (!current || !editorData || !setEditorData) return;
     if (!copiedNode) return;
     const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
-    const updated = replaceNode(editorData, current, cloned);
+    const usedKeys = collectNodeKeys(editorData);
+    const repaired = repairNodeKeys(cloned, usedKeys);
+    const updated = replaceNode(editorData, current, repaired);
     useRenderStore.setState({
       copiedNode: null,
     });
@@ -129,7 +132,7 @@ export function EditorHeader({
     // Important: selection is stored by reference. After replacing `current` in the tree,
     // we must point selection to the new (cloned) node reference to keep "current node"
     // in sync with what’s rendered/edited.
-    setCurrent(cloned);
+    setCurrent(repaired);
   };
 
   const cloneNode = (node: Node): Node =>
@@ -137,7 +140,7 @@ export function EditorHeader({
 
   const handleReplaceFromSample = (sample: Project) => {
     if (!setEditorData) return;
-    const next = cloneNode(sample.data);
+    const next = repairNodeKeys(cloneNode(sample.data));
     setEditorData(next);
     setCurrent(next);
     if (sample.appConfig) setAppConfig(sample.appConfig);
@@ -148,6 +151,7 @@ export function EditorHeader({
   const handlePasteFromSample = (sample: Project) => {
     if (!current || !editorData || !setEditorData) return;
     const incoming = cloneNode(sample.data);
+    const usedKeys = collectNodeKeys(editorData);
 
     const isRecord = (v: unknown): v is Record<string, unknown> =>
       typeof v === 'object' && v !== null && !Array.isArray(v);
@@ -181,13 +185,19 @@ export function EditorHeader({
       toast.error('Sample has no children to paste');
       return;
     }
+    const repairedPasteNodes = pasteNodes.map((node) =>
+      repairNodeKeys(node, usedKeys),
+    );
     let nextChildren: Node;
     if (!prevChildren) {
-      nextChildren = pasteNodes.length === 1 ? pasteNodes[0] : pasteNodes;
+      nextChildren =
+        repairedPasteNodes.length === 1
+          ? repairedPasteNodes[0]
+          : repairedPasteNodes;
     } else if (Array.isArray(prevChildren)) {
-      nextChildren = [...prevChildren, ...pasteNodes];
+      nextChildren = [...prevChildren, ...repairedPasteNodes];
     } else {
-      nextChildren = [prevChildren, ...pasteNodes];
+      nextChildren = [prevChildren, ...repairedPasteNodes];
     }
 
     const nextNode: Node = { ...current, children: nextChildren } as Node;

package/src/components/JsonTextEditor.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import type { Node } from '../types/Node';
+import { wrapNodeInMain } from '../utils/wrapNodeInMain';
 
 type JsonTextEditorProps = {
   value: unknown;
@@ -74,6 +76,34 @@ export function JsonTextEditor({
     }
   };
 
+  const handleWrapInMain = () => {
+    try {
+      const parsed = JSON.parse(text) as unknown;
+      const isRecord = (v: unknown): v is Record<string, unknown> =>
+        typeof v === 'object' && v !== null && !Array.isArray(v);
+
+      // Support both:
+      // - node JSON (wrap root)
+      // - project JSON (wrap `data`)
+      const nextValue =
+        isRecord(parsed) && 'data' in parsed
+          ? {
+              ...(parsed as any),
+              data: wrapNodeInMain((parsed as any).data as Node),
+            }
+          : wrapNodeInMain(parsed as Node);
+
+      setText(JSON.stringify(nextValue, null, 2));
+      setParseError(null);
+      setApplyError(null);
+      setParsedValue(nextValue);
+      // Intentionally NOT calling onChange here:
+      // user can review diff and press "Apply" explicitly.
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+    }
+  };
+
   const headerLabel = rootName ? `${rootName}.json` : 'data.json';
 
   return (
@@ -108,6 +138,17 @@ export function JsonTextEditor({
           >
             Format
           </button>
+          {!readOnly && (
+            <button
+              type="button"
+              className="editor-button"
+              onClick={handleWrapInMain}
+              disabled={!onChange}
+              title={onChange ? 'Wrap root in Main and apply' : 'Read only'}
+            >
+              Wrap in Main
+            </button>
+          )}
           {!readOnly && (
             <button
               type="button"