@developer_tribe/react-builder 1.2.20 → 1.2.22

package/src/build-components/useNode.ts

@@ -20,10 +20,10 @@ export default function useNode<
     ...(defaultAttributes?.styles ?? {}),
     ...(defaultAttributes?.style ?? {}),
   };
-  // Merge node style from both node.attributes.style and node.attributes.styles
+  // Merge node style from both node.attributes.style and node.attributes.styles (preferring styles)
   const nodeStyle = {
-    ...(nodeAttributes?.styles ?? {}),
     ...(nodeAttributes?.style ?? {}),
+    ...(nodeAttributes?.styles ?? {}),
   };
   const mergedStyle = {
     ...defaultStyle,

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,4 +1,4 @@
-import React, { useMemo } 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';
@@ -44,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';
@@ -117,6 +122,19 @@ export function DebugJsonPage({
     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);
@@ -213,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/utils/extractTextStyle/extractTextStyle.ts

@@ -1,5 +1,8 @@
 import type { NodeData } from '../../types/Node';
-import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type {
+  TextPropsGenerated,
+  TextStyleGenerated,
+} from '../../build-components/Text/TextProps.generated';
 import type { AppConfig } from '../../types/PreviewConfig';
 import { defaultAppConfig } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
@@ -86,6 +89,7 @@ export type ExtractTextStyleOptions = {
   fonts?: Fonts;
   onFontLoaded?: (fontFamily: string) => void;
   onError?: (error: string) => void;
+  directlyTextStyle?: boolean;
 };
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
@@ -93,13 +97,13 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
+  const styleBag = (attributes as Record<string, unknown>)?.style as
+    | TextStyleGenerated
     | undefined;
   const get = (key: string): unknown => {
-    const direct = (attributes as any)?.[key];
+    const direct = (attributes as Record<string, unknown>)?.[key];
     if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key];
+    return styleBag?.[key as keyof TextStyleGenerated];
   };
   const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
   const { screenStyle, theme } = resolvedAppConfig;
@@ -115,15 +119,15 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   }
 
   // Typography
-  const fontSize = get('fontSize') as any;
+  const fontSize = get('fontSize') as string | number | undefined;
   if (fontSize !== undefined) {
     const parsed = parseSize(fontSize);
     style.fontSize = parsed as React.CSSProperties['fontSize'];
   } else {
     style.fontSize = fs(14);
   }
-  const fontFamily = get('fontFamily') as any;
-  const fontWeight = get('fontWeight') as any;
+  const fontFamily = get('fontFamily') as string | undefined;
+  const fontWeight = get('fontWeight') as string | number | undefined;
   const requestedWeight = weightToNumericKey(fontWeight);
   const normalizedFontFamily =
     typeof fontFamily === 'string' && fontFamily.trim().length > 0
@@ -163,18 +167,48 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // If no fontFamily is set, keep previous behavior.
   if (!normalizedFontFamily && normalizedFontWeight)
     style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color') as any, {
+  const resolvedTextColor = parseColor(get('color') as string | undefined, {
     projectColors: options.projectColors,
     theme,
   });
   style.color = resolvedTextColor ?? fallbackColor;
-  const textAlign = get('textAlign');
-  if (textAlign)
-    style.textAlign = textAlign as React.CSSProperties['textAlign'];
+  const textAlign = get('textAlign') as
+    | React.CSSProperties['textAlign']
+    | undefined;
+  if (textAlign) {
+    style.textAlign = textAlign;
+  }
 
   const viewStyle = extractViewStyle(node, {
     projectColors: options.projectColors,
     theme,
   });
-  return { ...viewStyle, ...style };
+  const fullStyle = { ...viewStyle, ...style };
+
+  // If directlyTextStyle is true, return only text-related styles
+  if (options.directlyTextStyle) {
+    const textStyleProperties = new Set<keyof React.CSSProperties>([
+      'fontSize',
+      'fontFamily',
+      'fontWeight',
+      'color',
+      'textAlign',
+      'lineHeight',
+      'letterSpacing',
+      'textDecoration',
+      'textTransform',
+    ]);
+
+    const textStyle: React.CSSProperties = {};
+    for (const key in fullStyle) {
+      const typedKey = key as keyof React.CSSProperties;
+      if (textStyleProperties.has(typedKey)) {
+        (textStyle as Record<string, unknown>)[key] = fullStyle[typedKey];
+      }
+    }
+
+    return textStyle;
+  }
+
+  return fullStyle;
 }