@developer_tribe/react-builder 1.2.22 → 1.2.24

package/src/build-components/useNode.ts

@@ -1,26 +1,26 @@
 import { NodeData, NodeDefaultAttribute } from '../types/Node';
 import { getDefaultsForType } from '../utils/patterns';
 
+type WithStyleBags = {
+  style?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+};
+
 export default function useNode<
   T extends NodeDefaultAttribute = NodeDefaultAttribute,
 >(node: NodeData<T>): NodeData<T> {
   const type = node?.type;
   const defaults = getDefaultsForType(type) as Partial<T> | undefined;
   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 nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T &
+    WithStyleBags;
+  const defaultAttributes = defaults as T & WithStyleBags;
+  // Merge styles from both defaults and node (schemaVersion=2 uses `styles` only).
+  // Read legacy `style` for back-compat with old persisted data, but output only `styles`.
   const defaultStyle = {
-    ...(defaultAttributes?.styles ?? {}),
     ...(defaultAttributes?.style ?? {}),
+    ...(defaultAttributes?.styles ?? {}),
   };
-  // Merge node style from both node.attributes.style and node.attributes.styles (preferring styles)
   const nodeStyle = {
     ...(nodeAttributes?.style ?? {}),
     ...(nodeAttributes?.styles ?? {}),
@@ -29,22 +29,21 @@ export default function useNode<
     ...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.
-    // Keep both `style` (for runtime back-compat) and `styles` (for editor schemaVersion=2) in sync.
-    style: mergedStyle,
+  const mergedRecord: Record<string, unknown> = {
+    ...(defaultAttributes as Record<string, unknown>),
+    ...(nodeAttributes as Record<string, unknown>),
+    // Deep merge styles so default style values aren't lost when the node provides partial overrides.
+    // Only use `styles` (schemaVersion=2). Remove legacy `style` to avoid validator rejection.
     styles: mergedStyle,
-  } as T;
+  };
+  // Remove legacy `style` key if it was inherited from defaults or node attributes.
+  delete mergedRecord.style;
   if (
-    mergedAttributes &&
-    typeof (mergedAttributes as any).style === 'object' &&
-    (mergedAttributes as any).style != null &&
-    Object.keys((mergedAttributes as any).style).length === 0
+    typeof mergedRecord.styles === 'object' &&
+    mergedRecord.styles != null &&
+    Object.keys(mergedRecord.styles as Record<string, unknown>).length === 0
   ) {
-    delete (mergedAttributes as any).style;
-    delete (mergedAttributes as any).styles;
+    delete mergedRecord.styles;
   }
-  return { ...node, attributes: mergedAttributes };
+  return { ...node, attributes: mergedRecord as T };
 }

package/src/components/AttributesEditorPanel.tsx

@@ -1,12 +1,12 @@
 import { AttributesEditor } from '../AttributesEditor';
-import type { Node } from '../types/Node';
+import type { Node, NodeData } 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;
+  attributes: Node;
   onChange: (data: Node) => void;
   projectColors?: ProjectColors;
 }
@@ -25,7 +25,7 @@ export function AttributesEditorPanel({
 
   const currentKey =
     typeof current === 'object' && !Array.isArray(current) && 'key' in current
-      ? ((current as any).key as string | undefined)
+      ? (current as NodeData).key
       : undefined;
   const resolvedCurrent =
     currentKey && attributes
@@ -46,14 +46,13 @@ export function AttributesEditorPanel({
       });
       return changed ? arr : root;
     }
-    const data = root as any;
+    const data = root as NodeData;
     if ('children' in data) {
       const prev = data.children;
       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;
       }
     }

package/src/components/Builder.tsx

@@ -452,14 +452,13 @@ export function Builder({
       });
       return changed ? arr : root;
     }
-    const data = root as any;
+    const data = root as NodeData;
     if ('children' in data) {
       const prev = data.children;
       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;
       }
     }

package/src/components/BuilderProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import type { AppConfig } from '../types/PreviewConfig';
@@ -43,7 +43,7 @@ type BuilderProviderProps = {
   children: React.ReactNode;
 };
 
-const BuilderContext = createContext<BuilderProviderParams | undefined>(
+const builderContext = createContext<BuilderProviderParams | undefined>(
   undefined,
 );
 
@@ -66,7 +66,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
       projectColors:
         params?.projectColors && typeof params.projectColors === 'object'
           ? (params.projectColors as ProjectColors)
-          : undefined,
+          : defaultProjectColors,
       fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
       appFont: params?.appFont,
       platform: params?.platform === 'native' ? 'native' : 'web',
@@ -91,16 +91,53 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
   );
 
   return (
-    <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
+    <builderContext.Provider value={value}>{children}</builderContext.Provider>
   );
 }
 
-export function useBuilderParams(): BuilderProviderParams {
+const defaultProjectColors: Readonly<ProjectColors> = {
+  STATIC_COLORS: {
+    BLACK: '#000',
+    WHITE: '#FFFFFF',
+    TRANSPARENT: '#ffffff00',
+    ONBOARD_DOT_INACTIVE: '#E4E5E7',
+    ONBOARD_DOT_ACTIVE: '#007AFF',
+    BUTTON_PRIMARY_BACKGROUND: '#0066FF',
+    BUTTON_PRIMARY_TEXT: '#FFFFFF',
+    LINK_COLOR: '#1778F2',
+    SEPARATOR_COLOR: '#44454D',
+  },
+  THEME_COLORS: {
+    light: {
+      TEXT: '#161827',
+      BACKGROUND: '#F4F5FF',
+      ICON: '#0450E2',
+      LINE: '#E9EBF9',
+      ONBOARD_TITLE: '#161827',
+      ONBOARD_SUBTITLE: '#44454D',
+      BUTTON_SECONDARY_TEXT: '#81838F',
+      FOOTER_TEXT: '#81838F',
+    },
+    dark: {
+      TEXT: '#E9EBF9',
+      BACKGROUND: '#080A17',
+      ICON: '#0450E2',
+      LINE: '#161827',
+      ONBOARD_TITLE: '#FDFDFD',
+      ONBOARD_SUBTITLE: '#C7C7C7',
+      BUTTON_SECONDARY_TEXT: '#A9AAAC',
+      FOOTER_TEXT: '#A2A4B1',
+    },
+  },
+} as const;
+
+export function useBuilderParams(): Readonly<BuilderProviderParams> {
   return (
-    useContext(BuilderContext) ?? {
+    useContext(builderContext) ?? {
       products: [],
       benefits: {},
       platform: 'web',
+      projectColors: defaultProjectColors,
     }
   );
 }

package/src/components/JsonTextEditor.tsx

@@ -88,8 +88,8 @@ export function JsonTextEditor({
       const nextValue =
         isRecord(parsed) && 'data' in parsed
           ? {
-              ...(parsed as any),
-              data: wrapNodeInMain((parsed as any).data as Node),
+              ...parsed,
+              data: wrapNodeInMain(parsed.data as Node),
             }
           : wrapNodeInMain(parsed as Node);
 

package/src/components/LoadingComponent.tsx

@@ -4,7 +4,7 @@ import loadingAnimation from '../assets/loading_animation.json';
 export function LoadingComponent() {
   return (
     <div className="rb-loading">
-      <Lottie animationData={loadingAnimation as any} loop autoplay />
+      <Lottie animationData={loadingAnimation} loop autoplay />
     </div>
   );
 }

package/src/components/RenderErrorBoundary.tsx

@@ -43,9 +43,7 @@ export class RenderErrorBoundary extends React.Component<
   }
 
   componentDidCatch(error: Error, info: React.ErrorInfo) {
-    const componentStack =
-      (info as unknown as { componentStack?: string })?.componentStack ??
-      undefined;
+    const componentStack = info.componentStack ?? undefined;
 
     this.setState({
       error,

package/src/index.ts

@@ -91,3 +91,6 @@ export {
 } from './assets/samples/getSamples';
 export { getDefaultProject } from './utils/getDefaultProject';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+
+export { parseColor } from './utils/parseColor';
+export type { ParseColorOptions } from './utils/parseColor';

package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts

@@ -77,7 +77,7 @@ function getStyleSubSchemaKeys(
   schema: Record<string, unknown> | undefined,
 ): Set<string> {
   if (!schema) return new Set();
-  const style = (schema as any).style;
+  const style = schema.style;
   if (!isPlainObject(style)) return new Set();
   return new Set(Object.keys(style));
 }
@@ -195,7 +195,7 @@ export const migration_1_1_2_extract_component_attributes_from_style: Migration
     run: (project: Project): Project => {
       const styleKeys = buildStyleKeySet();
       const normalized = normalizeStyleAttributes(
-        project.data as unknown as Node,
+        project.data as Node,
         styleKeys,
       );
 
@@ -205,7 +205,7 @@ export const migration_1_1_2_extract_component_attributes_from_style: Migration
       return {
         ...project,
         version: '1.1.2',
-        data: migrated as any,
+        data: migrated as Project['data'],
       };
     },
   };

package/src/modals/BenefitPresetsModal.tsx

@@ -34,7 +34,7 @@ function normalizeBenefits(raw: unknown): PaywallBenefits {
 }
 
 function getPresetMap(): PresetMap {
-  const raw = presetsJson as unknown as PresetMap;
+  const raw = presetsJson as PresetMap;
   const safe: PresetMap = {};
   Object.entries(raw ?? {}).forEach(([key, map]) => {
     const normalizedKey = typeof key === 'string' ? key.trim() : '';

package/src/modals/ProductPresetsModal.tsx

@@ -25,7 +25,7 @@ function normalizeProduct(p: Product): Product {
 }
 
 function getPresetMap(): PresetMap {
-  const raw = presetsJson as unknown as PresetMap;
+  const raw = presetsJson as PresetMap;
   const safe: PresetMap = {};
   Object.entries(raw ?? {}).forEach(([key, list]) => {
     if (!key || typeof key !== 'string') return;

package/src/pages/DebugJsonPage.tsx

@@ -54,7 +54,8 @@ export function DebugJsonPage({
     typeof setAppConfig === 'function' && typeof appConfig?.theme === 'string';
   const canToggleRtl =
     typeof setAppConfig === 'function' &&
-    typeof (appConfig as any)?.isRtl !== 'undefined';
+    appConfig != null &&
+    'isRtl' in appConfig;
 
   const isRecord = (v: unknown): v is Record<string, unknown> =>
     typeof v === 'object' && v !== null && !Array.isArray(v);
@@ -64,7 +65,7 @@ export function DebugJsonPage({
     // - raw Node JSON
     // - Project wrapper JSON { name, version, data: Node }
     if (isRecord(value) && 'data' in value) {
-      return (value as any).data as Node;
+      return value.data as Node;
     }
     return value as Node;
   };
@@ -222,7 +223,9 @@ export function DebugJsonPage({
             {canToggleRtl ? (
               <Checkbox
                 label="Is RTL"
-                checked={Boolean((appConfig as any)?.isRtl)}
+                checked={Boolean(
+                  (appConfig as AppConfig & { isRtl?: boolean })?.isRtl,
+                )}
                 onChange={(checked) =>
                   setAppConfig!({ ...(appConfig as AppConfig), isRtl: checked })
                 }
@@ -245,7 +248,7 @@ export function DebugJsonPage({
         <div className="localication-modal__editor">
           <JsonTextEditor
             rootName="node"
-            value={data ?? ({} as any)}
+            value={data ?? ({} as Record<string, unknown>)}
             onChange={(next) => {
               const nodeCandidate = extractNode(next);
               const processed = analyseAndProccess(

package/src/pages/ProjectDebug.tsx

@@ -300,7 +300,7 @@ export function ProjectDebug({
         className="rb-project-debug__preview"
         aria-label="Preview"
         style={{
-          ['--rb-canvas-bg' as any]: canvasBg ?? 'none',
+          ['--rb-canvas-bg' as string]: canvasBg ?? 'none',
         }}
       >
         <RenderErrorBoundary

package/src/pages/ProjectPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import type { Node } from '../types/Node';
+import type { Node, NodeData } from '../types/Node';
 import type { Project, ProjectColors } from '../types/Project';
 import { ToastContainer, toast } from 'react-toastify';
 import { RenderPage } from '../RenderPage';
@@ -248,8 +248,8 @@ export function ProjectPage({
       if (bypassValidation) {
         // Best-effort: let the user continue with the raw data even if invalid.
         // This may still crash the preview, but it unblocks users for debugging.
-        setEditorData(activeProject.data as unknown as Node);
-        setCurrent(activeProject.data as unknown as Node);
+        setEditorData(activeProject.data as Node);
+        setCurrent(activeProject.data as Node);
         return;
       }
       if (isEmptyProjectData) {
@@ -346,8 +346,8 @@ export function ProjectPage({
           onContinueWithoutValidation={() => {
             setBypassValidation(true);
             setMigrationGate(null);
-            setEditorData(activeProject.data as unknown as Node);
-            setCurrent(activeProject.data as unknown as Node);
+            setEditorData(activeProject.data as Node);
+            setCurrent(activeProject.data as Node);
             setMinLoadingDelayDone(true);
           }}
           onMigrateNow={() => {
@@ -366,12 +366,12 @@ export function ProjectPage({
                 isNodeLike(activeProject) &&
                 !(
                   isRecord(activeProject) &&
-                  typeof (activeProject as any).version === 'string'
+                  typeof activeProject.version === 'string'
                 )
                   ? getDefaultProject({
                       name: `imported-${Math.random().toString(36).slice(2, 8)}`,
                       version: CURRENT_PROJECT_VERSION,
-                      data: activeProject as unknown as Node,
+                      data: activeProject as Node,
                     })
                   : activeProject;
 
@@ -381,8 +381,8 @@ export function ProjectPage({
               setOverrideProject(migratedProject);
               setBypassValidation(true);
               setMigrationGate(null);
-              setEditorData(migratedProject.data as unknown as Node);
-              setCurrent(migratedProject.data as unknown as Node);
+              setEditorData(migratedProject.data as Node);
+              setCurrent(migratedProject.data as Node);
               setMinLoadingDelayDone(true);
             } finally {
               setIsMigrating(false);
@@ -400,20 +400,18 @@ export function ProjectPage({
             ): v is 'paywall' | 'onboard' | 'other' =>
               v === 'paywall' || v === 'onboard' || v === 'other';
 
+            const activeRecord = isRecord(activeProject) ? activeProject : null;
             const fixedName =
-              typeof (activeProject as any)?.name === 'string' &&
-              String((activeProject as any).name).trim()
-                ? String((activeProject as any).name).trim()
+              typeof activeRecord?.name === 'string' &&
+              String(activeRecord.name).trim()
+                ? String(activeRecord.name).trim()
                 : `imported-${Math.random().toString(36).slice(2, 8)}`;
 
-            const activeAny = (
-              isRecord(activeProject) ? activeProject : null
-            ) as Record<string, unknown> | null;
             const nodeCandidate = (
-              activeAny && 'data' in activeAny
-                ? (activeAny as any).data
+              activeRecord && 'data' in activeRecord
+                ? activeRecord.data
                 : isNodeLike(activeProject)
-                  ? (activeProject as unknown as Node)
+                  ? (activeProject as Node)
                   : null
             ) as Node | null;
 
@@ -421,10 +419,12 @@ export function ProjectPage({
               name: fixedName,
               version: CURRENT_PROJECT_VERSION,
               data: nodeCandidate,
-              appConfig: (activeAny as any)?.appConfig,
-              projectColors: (activeAny as any)?.projectColors,
-              type: isAllowedProjectType((activeAny as any)?.type)
-                ? ((activeAny as any).type as any)
+              appConfig: activeRecord?.appConfig,
+              projectColors: activeRecord?.projectColors as
+                | ProjectColors
+                | undefined,
+              type: isAllowedProjectType(activeRecord?.type)
+                ? (activeRecord.type as 'paywall' | 'onboard' | 'other')
                 : undefined,
             });
 
@@ -452,8 +452,8 @@ export function ProjectPage({
             setBypassValidation(true);
             setValidationError(null);
             setValidationErrorStack(null);
-            setEditorData(activeProject.data as unknown as Node);
-            setCurrent(activeProject.data as unknown as Node);
+            setEditorData(activeProject.data as Node);
+            setCurrent(activeProject.data as Node);
             setMinLoadingDelayDone(true);
           }}
           onSaveEditedRawData={(nextRawData) => {
@@ -470,10 +470,9 @@ export function ProjectPage({
               let nextVersion: string | undefined;
 
               if (isRecord(parsed) && 'data' in parsed) {
-                nodeCandidate = (parsed as Record<string, unknown>).data;
-                const maybeName = (parsed as Record<string, unknown>).name;
-                const maybeVersion = (parsed as Record<string, unknown>)
-                  .version;
+                nodeCandidate = parsed.data;
+                const maybeName = parsed.name;
+                const maybeVersion = parsed.version;
                 if (typeof maybeName === 'string') nextName = maybeName;
                 if (typeof maybeVersion === 'string')
                   nextVersion = maybeVersion;
@@ -602,7 +601,7 @@ export function ProjectPage({
               style={{
                 // Set as a CSS variable so `.dark .split-right` can override it.
 
-                ['--rb-canvas-bg' as any]: `url(${getImage(
+                ['--rb-canvas-bg' as string]: `url(${getImage(
                   TribeAssetName.Background,
                 )})`,
               }}
@@ -632,7 +631,7 @@ export function ProjectPage({
                     previewMode,
                     selectedKey:
                       current && typeof current === 'object' && 'key' in current
-                        ? ((current as any).key as string | undefined)
+                        ? ((current as NodeData).key as string | undefined)
                         : undefined,
                   }}
                 />
@@ -669,9 +668,9 @@ export function ProjectPage({
                     data &&
                     typeof data === 'object' &&
                     !Array.isArray(data) &&
-                    'key' in (data as any)
+                    'key' in data
                   ) {
-                    nodeKey = (data as any).key as string | undefined;
+                    nodeKey = (data as NodeData).key;
                   }
                   logger.verbose(
                     'ProjectPage',

package/src/pages/ProjectValidationPage.tsx

@@ -43,12 +43,12 @@ export function ProjectValidationPage({
         typeof v === 'object' && v !== null && !Array.isArray(v);
 
       const nodeCandidate: unknown =
-        isRecord(parsed) && 'data' in parsed ? (parsed as any).data : parsed;
+        isRecord(parsed) && 'data' in parsed ? parsed.data : parsed;
 
       const wrapped = wrapNodeInMain(nodeCandidate as Node);
       const nextValue =
         isRecord(parsed) && 'data' in parsed
-          ? { ...(parsed as any), data: wrapped }
+          ? { ...parsed, data: wrapped }
           : wrapped;
 
       setJsonText(JSON.stringify(nextValue, null, 2));

package/src/store.ts

@@ -78,6 +78,12 @@ type RenderStore = {
   markFontLoaded: (fontFamily: string) => void;
   listMaxNested: number;
   setListMaxNested: (depth: number) => void;
+
+  // OS bar color overrides (set by StatusBarColor / NavigationBarColor build components)
+  statusBarOverrideColor: string | null;
+  setStatusBarOverrideColor: (color: string | null) => void;
+  navBarOverrideColor: string | null;
+  setNavBarOverrideColor: (color: string | null) => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
@@ -240,6 +246,13 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
         set({
           listMaxNested: Number.isFinite(depth) && depth > 0 ? depth : 5,
         }),
+
+      // OS bar color overrides
+      statusBarOverrideColor: null,
+      setStatusBarOverrideColor: (color) =>
+        set({ statusBarOverrideColor: color }),
+      navBarOverrideColor: null,
+      setNavBarOverrideColor: (color) => set({ navBarOverrideColor: color }),
     }),
     {
       name: 'render-store',

package/src/styles/layout/_builder.scss

@@ -175,6 +175,12 @@
   > :not(:first-child) {
     margin-left: sizes.$spaceComfy;
   }
+  // When the parent button has sort controls (↑↓), the button text is pushed
+  // right by the sort-controls width (32px). Increase child indent so children
+  // stay visually nested under the parent label, not under the sort icons.
+  > .builder__button:first-child:has(.builder__sort-controls) ~ * {
+    margin-left: 32px + sizes.$spaceComfy;
+  }
   &::before {
     content: '';
     position: absolute;

package/src/utils/__special_exceptions.ts

@@ -19,7 +19,7 @@ function looksLikeSelectOptionObject(
   if (keys.length < 1 || keys.length > 3) return false;
   const allowed = new Set(['value', 'label', 'id']);
   for (const k of keys) if (!allowed.has(k)) return false;
-  const v = (value as Record<string, unknown>).value;
+  const v = value.value;
   return (
     v == null ||
     typeof v === 'string' ||
@@ -61,10 +61,10 @@ export function normalizeNodeForValidation(
   }
 
   if (isNodeArray(node)) {
-    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    const nodeArray = node as Node<NodeDefaultAttribute>[];
     return nodeArray.map(
       normalizeNodeForValidation,
-    ) as unknown as Node<NodeDefaultAttribute>;
+    ) as Node<NodeDefaultAttribute>;
   }
 
   const recordData = node as NodeData<NodeDefaultAttribute>;
@@ -76,7 +76,7 @@ export function normalizeNodeForValidation(
     attributes = {};
   }
   attributes = isPlainObject(attributes)
-    ? (normalizeUnknownValue(attributes) as Record<string, unknown>)
+    ? normalizeUnknownValue(attributes)
     : attributes;
 
   const children =
@@ -88,7 +88,7 @@ export function normalizeNodeForValidation(
 
   return {
     ...recordData,
-    attributes: attributes as any,
+    attributes: attributes as NodeDefaultAttribute,
     children,
   };
 }

package/src/utils/analyseNode.ts

@@ -21,10 +21,10 @@ function assignMissingKeys(
   }
 
   if (isNodeArray(node)) {
-    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    const nodeArray = node as Node<NodeDefaultAttribute>[];
     return nodeArray.map((child) =>
       assignMissingKeys(child, usedKeys),
-    ) as unknown as Node<NodeDefaultAttribute>;
+    ) as Node<NodeDefaultAttribute>;
   }
 
   const recordData = node as NodeData<NodeDefaultAttribute>;