@developer_tribe/react-builder 1.2.19 → 1.2.21

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 (preferring styles)
+  const nodeStyle = {
+    ...(nodeAttributes?.style ?? {}),
+    ...(nodeAttributes?.styles ?? {}),
+  };
+  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/Builder.tsx

@@ -13,6 +13,7 @@ import { AddComponentModal } from '../modals/AddComponentModal';
 import { BuilderButton } from './BuilderButton';
 import { generateRandomKeyForNode } from '../utils/generateRandomKeyForNode';
 import { collectNodeKeys } from '../utils/repairNodeKeys';
+import { useRenderStore } from '../store';
 
 type BuilderEditorProps = {
   data: Node;
@@ -30,6 +31,68 @@ interface BuilderEditorComponentProps {
   onReorder?: (prev: Node[], next: Node[]) => void;
   onMoveChildUp?: (parent: Node, childIndex: number) => void;
   onMoveChildDown?: (parent: Node, childIndex: number) => void;
+  maxNestedDepth?: number;
+}
+
+type BuilderTreeNodeProps = {
+  node: Node;
+  depthRemaining: number;
+  onClick: (node: Node) => void;
+  onDelete?: (node: Node) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+};
+
+function BuilderTreeNode({
+  node,
+  depthRemaining,
+  onClick,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+}: BuilderTreeNodeProps) {
+  const children = getNodeChildren(node);
+  const hasChildren = children.length > 0;
+  const childrenCount =
+    hasChildren && depthRemaining <= 0 ? children.length : undefined;
+  const onMore =
+    hasChildren && depthRemaining <= 0 ? () => onClick(node) : undefined;
+  const button = (
+    <BuilderButton
+      onClick={() => {
+        onClick(node);
+      }}
+      node={node}
+      onDelete={onDelete}
+      onMoveUp={onMoveUp}
+      onMoveDown={onMoveDown}
+      childrenCount={childrenCount}
+      onMore={onMore}
+    />
+  );
+
+  if (!hasChildren) {
+    return button;
+  }
+
+  if (depthRemaining <= 0) {
+    return <div className="builder__children">{button}</div>;
+  }
+
+  return (
+    <div className="builder__children">
+      {button}
+      {children.map((child, index) => (
+        <BuilderTreeNode
+          key={index}
+          node={child}
+          depthRemaining={depthRemaining - 1}
+          onClick={onClick}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
 }
 
 function BuilderComponent({
@@ -40,6 +103,7 @@ function BuilderComponent({
   onReorder,
   onMoveChildUp,
   onMoveChildDown,
+  maxNestedDepth,
 }: BuilderEditorComponentProps) {
   if (isNodeString(node)) {
     return (
@@ -64,6 +128,12 @@ function BuilderComponent({
 
   if (isNodeArray(node)) {
     const list = node as Node[];
+    const depthRemaining = Math.max(
+      0,
+      Number.isFinite(maxNestedDepth) && (maxNestedDepth ?? 0) > 0
+        ? Math.floor(maxNestedDepth ?? 1) - 1
+        : 4,
+    );
 
     const moveItem = (index: number, direction: -1 | 1) => {
       if (!onReorder) return;
@@ -79,11 +149,10 @@ function BuilderComponent({
       <div className="builder__list">
         {list.map((item, index) => (
           <div key={index} className="builder__list-item">
-            <BuilderButton
-              onClick={() => {
-                onClick(item);
-              }}
+            <BuilderTreeNode
               node={item}
+              depthRemaining={depthRemaining}
+              onClick={onClick}
               onDelete={onDelete}
               onMoveUp={
                 onReorder && index > 0 ? () => moveItem(index, -1) : undefined
@@ -109,6 +178,12 @@ function BuilderComponent({
       ? (rawChildren as Node[])
       : [rawChildren]
     : null;
+  const depthRemaining = Math.max(
+    0,
+    Number.isFinite(maxNestedDepth) && (maxNestedDepth ?? 0) > 0
+      ? Math.floor(maxNestedDepth ?? 1) - 1
+      : 4,
+  );
 
   return (
     <div className="builder__node">
@@ -122,12 +197,11 @@ function BuilderComponent({
         />
         {children &&
           children.map((child, index) => (
-            <BuilderButton
-              onClick={() => {
-                onClick(child);
-              }}
+            <BuilderTreeNode
               key={index}
               node={child}
+              depthRemaining={depthRemaining}
+              onClick={onClick}
               onDelete={onDelete}
               onMoveUp={
                 onMoveChildUp && hasArrayChildren && index > 0
@@ -158,7 +232,12 @@ export function Builder({
 }: BuilderEditorProps) {
   useLogRender('Builder');
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const listMaxNested = useRenderStore((state) => state.listMaxNested);
   const usedKeys = useMemo(() => collectNodeKeys(data), [data]);
+  const resolvedListMaxNested =
+    Number.isFinite(listMaxNested) && listMaxNested > 0
+      ? Math.floor(listMaxNested)
+      : 5;
   const breadcrumbPath = useMemo(() => {
     const path = findNodePath(data, current);
     if (path.length) return path;
@@ -482,6 +561,7 @@ export function Builder({
         onReorder={handleReorder}
         onMoveChildUp={handleMoveChildUp}
         onMoveChildDown={handleMoveChildDown}
+        maxNestedDepth={resolvedListMaxNested}
         node={current}
       />
       {isAddModalOpen && (
@@ -510,6 +590,16 @@ function appendChild(children: Node, childToAppend: Node): Node {
   return [children as Node, childToAppend];
 }
 
+function getNodeChildren(node: Node): Node[] {
+  if (isNodeNullOrUndefined(node) || isNodeString(node) || isNodeArray(node)) {
+    return [];
+  }
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+  const children = nodeData.children;
+  if (!children) return [];
+  return Array.isArray(children) ? children : [children];
+}
+
 function getNodeLabel(node: Node): string {
   if (isNodeNullOrUndefined(node)) return 'Empty';
   if (isNodeString(node)) return node as string;

package/src/components/BuilderButton.tsx

@@ -10,6 +10,8 @@ export type BuilderButtonProps = {
   onDelete?: (node: Node) => void;
   onMoveUp?: () => void;
   onMoveDown?: () => void;
+  childrenCount?: number;
+  onMore?: () => void;
 };
 
 export function BuilderButton({
@@ -18,6 +20,8 @@ export function BuilderButton({
   onDelete,
   onMoveUp,
   onMoveDown,
+  childrenCount,
+  onMore,
 }: BuilderButtonProps) {
   // IMPORTANT: Hooks must be called unconditionally on every render.
   // (Early returns before hooks can trigger React internal invariants.)
@@ -83,7 +87,8 @@ export function BuilderButton({
       : '';
   const hasTitle = title.length > 0;
   const topLabel = hasTitle ? title : baseLabel;
-  const shouldShowBottom = hasTitle || conditionLabel.length > 0;
+  const shouldShowBottom =
+    hasTitle || conditionLabel.length > 0 || typeof childrenCount === 'number';
 
   return (
     <div className="builder__button">
@@ -140,6 +145,22 @@ export function BuilderButton({
             role="menu"
             aria-label="Node actions"
           >
+            {onMore ? (
+              <li role="none">
+                <button
+                  type="button"
+                  className="builder__button-actions-item"
+                  role="menuitem"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onMore();
+                    setIsMenuOpen(false);
+                  }}
+                >
+                  More
+                </button>
+              </li>
+            ) : null}
             <li role="none">
               <button
                 type="button"
@@ -163,14 +184,25 @@ export function BuilderButton({
       </div>
       {shouldShowBottom && (
         <span className="builder__button-condition">
-          {hasTitle ? (
-            <>
-              <small>{baseLabel}</small>
-              {conditionLabel ? ` · ${conditionLabel}` : ''}
-            </>
+          {hasTitle || conditionLabel.length > 0 ? (
+            <span className="builder__button-condition-text">
+              {hasTitle ? (
+                <>
+                  <small>{baseLabel}</small>
+                  {conditionLabel ? ` · ${conditionLabel}` : ''}
+                </>
+              ) : (
+                conditionLabel
+              )}
+            </span>
           ) : (
-            conditionLabel
+            <span className="builder__button-condition-text" />
           )}
+          {typeof childrenCount === 'number' ? (
+            <span className="builder__button-children-count">
+              {childrenCount} children
+            </span>
+          ) : null}
         </span>
       )}
     </div>

package/src/components/DeviceButton.tsx

@@ -38,7 +38,11 @@ export function DeviceButton({
     >
       {device.name} <br />
       {device.width}×{device.height} ({aspect})
-      {platformIcon && <img src={platformIcon} alt="" aria-hidden="true" />}
+      {platformIcon && (
+        <span>
+          <img src={platformIcon} alt="" aria-hidden="true" />
+        </span>
+      )}
     </button>
   );
 }

package/src/pages/DebugJsonPage.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import type { Node } from '../types/Node';
+import type { NodeData, NodeDefaultAttribute } from '../types/Node';
 import type { AppConfig } from '../types/PreviewConfig';
 import { Checkbox } from '../components/Checkbox';
 import { JsonTextEditor } from '../components/JsonTextEditor';
 import { analyseAndProccess } from '../utils/analyseNode';
 import { logRenderStore } from '../utils/logRenderStore';
 import { useRenderStore } from '../store';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../utils/nodeGuards';
 
 export type DebugJsonPageProps = {
   data: Node | null | undefined;
@@ -38,6 +44,11 @@ export function DebugJsonPage({
   logLabel,
 }: DebugJsonPageProps) {
   const setCurrent = useRenderStore((s) => s.setCurrent);
+  const listMaxNested = useRenderStore((s) => s.listMaxNested);
+  const setListMaxNested = useRenderStore((s) => s.setListMaxNested);
+  const [listMaxNestedInput, setListMaxNestedInput] = useState(
+    String(listMaxNested),
+  );
   const canTogglePreviewMode = typeof setPreviewMode === 'function';
   const canToggleTheme =
     typeof setAppConfig === 'function' && typeof appConfig?.theme === 'string';
@@ -58,6 +69,81 @@ export function DebugJsonPage({
     return value as Node;
   };
 
+  function isPlainObject(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+  }
+
+  function migrateStyleToStyles(node: Node): Node {
+    if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+      return node;
+    }
+    if (isNodeArray(node)) {
+      const arr = node as Node[];
+      return arr.map((n) => migrateStyleToStyles(n));
+    }
+    if (!isPlainObject(node)) {
+      return node;
+    }
+
+    const record = node as unknown as NodeData<NodeDefaultAttribute>;
+    const nextChildren = migrateStyleToStyles(record.children);
+
+    if (!isPlainObject(record.attributes)) {
+      return { ...record, children: nextChildren };
+    }
+
+    const attrs = { ...record.attributes };
+    if ('style' in attrs && isPlainObject(attrs.style)) {
+      attrs.styles = attrs.style;
+      delete attrs.style;
+    }
+
+    return {
+      ...record,
+      children: nextChildren,
+      attributes: attrs,
+    };
+  }
+
+  const hasStyleAttribute = useMemo(() => {
+    function checkNode(n: Node): boolean {
+      if (isNodeNullOrUndefined(n) || isNodeString(n)) return false;
+      if (isNodeArray(n)) {
+        const arr = n as Node[];
+        return arr.some(checkNode);
+      }
+      if (!isPlainObject(n)) return false;
+      const record = n as unknown as NodeData<NodeDefaultAttribute>;
+      if (isPlainObject(record.attributes) && 'style' in record.attributes) {
+        return true;
+      }
+      return checkNode(record.children);
+    }
+    return checkNode(data);
+  }, [data]);
+
+  useEffect(() => {
+    setListMaxNestedInput(String(listMaxNested));
+  }, [listMaxNested]);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      const next = Number.parseInt(listMaxNestedInput, 10);
+      if (!Number.isFinite(next) || next <= 0) return;
+      setListMaxNested(next);
+    }, 300);
+    return () => window.clearTimeout(handle);
+  }, [listMaxNestedInput, setListMaxNested]);
+
+  const handleFixStyleToStyles = () => {
+    if (!data) return;
+    const migrated = migrateStyleToStyles(data);
+    // Don't call analyseAndProccess here - let the user apply changes manually
+    // This avoids validation errors for unknown attributes that may exist
+    setData(migrated as Node);
+    setCurrent(migrated as Node);
+  };
+
   return (
     <>
       <div className="modal__header localication-modal__header">
@@ -87,6 +173,17 @@ export function DebugJsonPage({
           Log store
         </button>
 
+        {hasStyleAttribute ? (
+          <button
+            type="button"
+            className="editor-button"
+            title="Migrate attributes.style to attributes.styles (schemaVersion=2)"
+            onClick={handleFixStyleToStyles}
+          >
+            Fix style → styles
+          </button>
+        ) : null}
+
         {onClose ? (
           <button
             type="button"
@@ -134,6 +231,17 @@ export function DebugJsonPage({
           </div>
         ) : null}
 
+        <div className="localication-modal__controls">
+          <label>List max nested depth</label>
+          <input
+            type="number"
+            min={1}
+            className="input"
+            value={listMaxNestedInput}
+            onChange={(event) => setListMaxNestedInput(event.target.value)}
+          />
+        </div>
+
         <div className="localication-modal__editor">
           <JsonTextEditor
             rootName="node"

package/src/pages/ProjectDebug.tsx

@@ -300,7 +300,6 @@ export function ProjectDebug({
         className="rb-project-debug__preview"
         aria-label="Preview"
         style={{
-          // eslint-disable-next-line @typescript-eslint/naming-convention
           ['--rb-canvas-bg' as any]: canvasBg ?? 'none',
         }}
       >

package/src/pages/ProjectPage.tsx

@@ -265,7 +265,7 @@ export function ProjectPage({
       setEditorData(processed);
       setCurrent(processed);
     } catch (error) {
-      console.error(error);
+      logger.error('ProjectPage', 'Failed to process node', error);
       setValidationError(
         error instanceof Error ? error.message : 'Node is not valid',
       );
@@ -601,7 +601,7 @@ export function ProjectPage({
             <div
               style={{
                 // Set as a CSS variable so `.dark .split-right` can override it.
-                // eslint-disable-next-line @typescript-eslint/naming-convention
+
                 ['--rb-canvas-bg' as any]: `url(${getImage(
                   TribeAssetName.Background,
                 )})`,

package/src/store.ts

@@ -76,6 +76,8 @@ type RenderStore = {
   // Cache loaded font families to avoid repeated loads
   loadedFonts: string[];
   markFontLoaded: (fontFamily: string) => void;
+  listMaxNested: number;
+  setListMaxNested: (depth: number) => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
@@ -233,6 +235,11 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
           if (prev.includes(family)) return state;
           return { loadedFonts: [...prev, family] };
         }),
+      listMaxNested: 3,
+      setListMaxNested: (depth) =>
+        set({
+          listMaxNested: Number.isFinite(depth) && depth > 0 ? depth : 5,
+        }),
     }),
     {
       name: 'render-store',
@@ -242,6 +249,7 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
         logLevel: state.logLevel,
         products: state.products,
         benefits: state.benefits,
+        listMaxNested: state.listMaxNested,
       }),
       storage: createJSONStorage(() => localStorage),
     },

package/src/styles/base/_global.scss

@@ -135,11 +135,6 @@ body,
   }
 }
 
-/* Builder preview selection helpers */
-.rb-node-selected {
-  border: 1px solid colors.$accentColor;
-}
-
 /* Header */
 .app-header {
   position: sticky;

package/src/styles/components/_editor-shell.scss

@@ -94,12 +94,27 @@
   }
 }
 
-.editor-device-button img {
+.editor-device-button span {
   position: absolute;
   bottom: 4px;
   right: 4px;
-  width: 16px;
-  height: 16px;
+  background-color: colors.$muted;
+  border-radius: 50%;
+  display: block;
+  width: 22px;
+  height: 22px;
+  overflow: hidden;
+}
+
+.editor-device-button img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 11px;
+  max-height: 11px;
+  width: auto;
+  height: auto;
 }
 
 .editor-header__actions {

package/src/styles/components/_onboard.scss

@@ -4,20 +4,3 @@
   height: 1px;
   width: 100%;
 }
-
-.onboard__buttons {
-  display: flex;
-  height: 40px;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-  margin: 12px 24px;
-}
-
-.onboard__buttons--row {
-  flex-direction: row;
-}
-
-.onboard__buttons--column {
-  flex-direction: column;
-}

package/src/styles/foundation/_colors.scss

@@ -78,10 +78,7 @@ $primaryForeground: hsl(
 );
 $destructive: hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)));
 $destructiveForeground: hsl(
-  var(
-    --destructive-foreground,
-    var(--rb-destructive-foreground, 0 0% 100%)
-  )
+  var(--destructive-foreground, var(--rb-destructive-foreground, 0 0% 100%))
 );
 $border: hsl(var(--border, var(--rb-border, 220 13% 91%)));
 

package/src/styles/foundation/_typography.scss

@@ -1,4 +1,3 @@
 $bodyFont:
   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
-

package/src/styles/layout/_builder.scss

@@ -147,11 +147,19 @@
   position: absolute;
   bottom: -10px;
   font-size: 8px;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: sizes.$spaceComfy;
+  padding-right: sizes.$spaceTight;
 }
 
 .builder__node {
   @include card;
   padding: sizes.$spaceSnug;
+  box-shadow: none;
 }
 
 .builder__node-type {
@@ -178,6 +186,18 @@
   }
 }
 
+.builder__button-condition-text {
+  color: colors.$mutedTextColor;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.builder__button-children-count {
+  color: colors.$mutedTextColor;
+  white-space: nowrap;
+}
+
 .builder__text,
 .builder__placeholder {
   color: colors.$mutedTextColor;

package/src/styles/modals/_product-presets-modal.scss

@@ -77,5 +77,3 @@
   gap: sizes.$spaceCompact;
   margin-top: sizes.$spaceCompact;
 }
-
-

package/src/styles/utilities/_carousel.scss

@@ -78,38 +78,6 @@
   height: 50px;
   margin: 0 auto;
 }
-.embla__dot {
-  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  --embla-dot-color: var(--detail-medium-contrast);
-  touch-action: manipulation;
-  display: inline-flex;
-  text-decoration: none;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  /* Keep a reasonable hit-area, but allow bigger dots to grow it. */
-  width: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
-  height: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
-  display: flex;
-  align-items: center;
-  border-radius: 50%;
-}
-.embla__dot:after {
-  background-color: var(--embla-dot-color);
-  width: var(--embla-dot-size, 1.4rem);
-  height: var(--embla-dot-size, 1.4rem);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  content: '';
-}
-.embla__dot--selected {
-  --embla-dot-color: var(--text-body);
-}
 .carousel-provider {
   height: 100%;
 }