@developer_tribe/react-builder 1.2.24 → 1.2.26

package/src/components/AttributesEditorPanel.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useRef } from 'react';
 import { AttributesEditor } from '../AttributesEditor';
 import type { Node, NodeData } from '../types/Node';
 import type { ProjectColors } from '../types/Project';
@@ -11,6 +12,32 @@ interface AttributesEditorPanelProps {
   projectColors?: ProjectColors;
 }
 
+function replaceNode(root: Node, target: Node, next: Node): Node {
+  if (root === target) return next;
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+  if (Array.isArray(root)) {
+    let changed = false;
+    const arr = root.map((item) => {
+      const r = replaceNode(item, target, next);
+      if (r !== item) changed = true;
+      return r;
+    });
+    return changed ? arr : root;
+  }
+  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) {
+      return { ...data, children: replaced } as Node;
+    }
+  }
+  return root;
+}
+
 export function AttributesEditorPanel({
   attributes,
   onChange,
@@ -21,6 +48,27 @@ export function AttributesEditorPanel({
     current: s.current,
     setCurrent: s.setCurrent,
   }));
+
+  // Stable refs so the onChange callback doesn't change identity every render.
+  const attributesRef = useRef(attributes);
+  attributesRef.current = attributes;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const handleAttributesChange = useCallback(
+    (next: Node) => {
+      const root = attributesRef.current as Node;
+      const target = currentRef.current;
+      if (!target) return;
+      const updated = replaceNode(root, target, next);
+      onChangeRef.current(updated);
+      setCurrent(next);
+    },
+    [setCurrent],
+  );
+
   if (!current) return null;
 
   const currentKey =
@@ -33,38 +81,6 @@ export function AttributesEditorPanel({
       : 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;
-    if (typeof root === 'string') return root;
-    if (Array.isArray(root)) {
-      let changed = false;
-      const arr = root.map((item) => {
-        const r = replaceNode(item, target, next);
-        if (r !== item) changed = true;
-        return r;
-      });
-      return changed ? arr : root;
-    }
-    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) {
-        return { ...data, children: replaced } as Node;
-      }
-    }
-    return root;
-  }
-  const handleAttributesChange = (next: Node) => {
-    const root = attributes as Node;
-    const updated = replaceNode(root, current, next);
-    onChange(updated);
-    setCurrent(next);
-  };
-
   return (
     <div className="attributes-editor-panel">
       <AttributesEditor

package/src/components/Builder.tsx

@@ -330,11 +330,13 @@ export function Builder({
       setData(updatedRoot);
       setCurrent(updatedParent);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setData, setCurrent, usedKeys],
   );
 
   const allowedChildTypes = useMemo(
     () => getAllowedChildTypes(current),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current],
   );
   const parentType = useMemo(() => {
@@ -378,6 +380,7 @@ export function Builder({
         setCurrent(next);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setCurrent, setData],
   );
 
@@ -407,6 +410,7 @@ export function Builder({
         setCurrent(updatedParent);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setCurrent, setData],
   );
 
@@ -436,6 +440,7 @@ export function Builder({
         setCurrent(updatedParent);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setCurrent, setData],
   );
 
@@ -603,7 +608,10 @@ function getNodeLabel(node: Node): string {
   if (isNodeNullOrUndefined(node)) return 'Empty';
   if (isNodeString(node)) return node as string;
   if (isNodeArray(node)) return 'Collection';
-  return (node as NodeData<NodeDefaultAttribute>).type ?? 'Node';
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+  const title = (nodeData.attributes as Record<string, unknown>)?.title;
+  if (typeof title === 'string' && title.trim().length > 0) return title;
+  return nodeData.type ?? 'Node';
 }
 
 function findNodePath(root: Node, target: Node): Node[] {

package/src/components/BuilderProvider.tsx

@@ -4,6 +4,7 @@ import type { PaywallBenefits } from '../paywall/types/benefits';
 import type { AppConfig } from '../types/PreviewConfig';
 import type { Fonts } from '../types/Fonts';
 import type { ProjectColors } from '../types/Project';
+import { defaultProjectColors, mergeProjectColors } from '../utils';
 
 // NOTE: We keep this context intentionally tiny.
 // IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
@@ -65,7 +66,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
           : undefined,
       projectColors:
         params?.projectColors && typeof params.projectColors === 'object'
-          ? (params.projectColors as ProjectColors)
+          ? mergeProjectColors(defaultProjectColors, params.projectColors)
           : defaultProjectColors,
       fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
       appFont: params?.appFont,
@@ -95,42 +96,6 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
   );
 }
 
-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) ?? {

package/src/hooks/useSafeAreaViewStyle.ts

@@ -33,9 +33,7 @@ export function useSafeAreaViewStyle(
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
-    const [insetTop, insetRight, insetBottom, insetLeft] = device?.insets ?? [
-      0, 0, 0, 0,
-    ];
+    const [insetTop, insetRight, , insetLeft] = device?.insets ?? [0, 0, 0, 0];
 
     // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
     const top =

package/src/index.ts

@@ -13,7 +13,7 @@
 // Types
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project, ProjectColors } from './types/Project';
+export type { Project, ProjectColors, ProjectMeta } from './types/Project';
 export type { Device } from './types/Device';
 export type { AppConfig, Localication } from './types/PreviewConfig';
 export { defaultAppConfig } from './types/PreviewConfig';

package/src/mockOS/managers/navigationManager.ts

@@ -70,7 +70,7 @@ export class MockNavigationManager {
     }
 
     if (this.stack.length > 0) {
-      const popped = this.stack.pop();
+      this.stack.pop();
       return true;
     }
 

package/src/pages/ProjectPage.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Node, NodeData } from '../types/Node';
-import type { Project, ProjectColors } from '../types/Project';
+import type { Project, ProjectColors, ProjectMeta } from '../types/Project';
 import { ToastContainer, toast } from 'react-toastify';
 import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
@@ -31,16 +31,16 @@ import {
   deleteNodeFromTree,
   findNodeByKey,
   isNodeRecord,
-  nodeHasChild,
 } from '../utils/nodeTree';
 import type { Fonts } from '../types/Fonts';
 import { useProjectFonts } from '../hooks/useProjectFonts';
-import { resolveProjectForSave } from './projectPageUtils';
+import { resolveProjectForSave, toProjectMeta } from './projectPageUtils';
 import { getDefaultProject } from '../utils/getDefaultProject';
 import { CURRENT_PROJECT_VERSION } from '../migrations/migratePipe';
 export type ProjectPageProps = {
   project: Project;
-  onSaveProject: (project: Project) => void;
+  // TODO: Tüm onSaveProject call-site'ları toProjectMeta kullanacak şekilde migrate et
+  onSaveProject: (project: ProjectMeta) => void;
   appConfig?: AppConfig;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
@@ -151,16 +151,18 @@ export function ProjectPage({
         return;
       }
 
-      if (isNodeRecord(current) && nodeHasChild(current, nodeToDelete)) {
-        const currentKey = current.key;
-        if (currentKey) {
-          const nextCurrent = findNodeByKey(updated, currentKey);
-          setCurrent(nextCurrent ?? updated);
-        } else {
-          setCurrent(updated);
-        }
+      // Refresh current's reference so the Builder re-renders the updated subtree.
+      // deleteNodeFromTree creates new objects for ancestors of the removed node,
+      // so the old `current` reference becomes stale when the deleted node was a
+      // descendant of `current`.
+      if (isNodeRecord(current) && current.key) {
+        const nextCurrent = findNodeByKey(updated, current.key);
+        setCurrent(nextCurrent ?? updated);
+      } else {
+        setCurrent(updated);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [editorData, current],
   );
 
@@ -224,10 +226,29 @@ export function ProjectPage({
     setMinLoadingDelayDone(false);
     const timer = setTimeout(() => setMinLoadingDelayDone(true), 1000);
     return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeProject.data]);
 
+  // Ref for the full project (used inside effect for migration check etc.)
+  const activeProjectRef = useRef(activeProject);
+  activeProjectRef.current = activeProject;
+  // Ref for current editorData so the effect can compare without depending on it.
+  const editorDataRef = useRef(editorData);
+  editorDataRef.current = editorData;
+
   useEffect(() => {
     try {
+      const currentProject = activeProjectRef.current;
+      const projectData = currentProject.data;
+
+      // Guard: skip reinit when the incoming project data is the same reference
+      // we already hold in editorData. After a save round-trip the parent pushes
+      // a new project object whose .data is the very same reference as editorData.
+      // Re-processing it would flash a loading state and discard in-flight changes.
+      if (projectData != null && projectData === editorDataRef.current) {
+        return;
+      }
+
       // Reset to "loading" immediately on project change so the loader is shown
       // until a valid node is available (and for at least 2 seconds).
       if (!isEmptyProjectData) {
@@ -237,7 +258,7 @@ export function ProjectPage({
       setValidationError(null);
       setValidationErrorStack(null);
       // Version gate: if project is older than the current schema, show migration UI.
-      const pipe = getMigrationPipe(activeProject);
+      const pipe = getMigrationPipe(currentProject);
       if (!bypassValidation && pipe.required) {
         setMigrationGate(pipe);
         setEditorData(null);
@@ -248,8 +269,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 Node);
-        setCurrent(activeProject.data as Node);
+        setEditorData(currentProject.data as Node);
+        setCurrent(currentProject.data as Node);
         return;
       }
       if (isEmptyProjectData) {
@@ -258,7 +279,7 @@ export function ProjectPage({
         return;
       }
 
-      const inputNode: Node = activeProject.data as Node;
+      const inputNode: Node = currentProject.data as Node;
 
       const processed = analyseAndProccess(inputNode);
       if (!processed) return;
@@ -275,7 +296,9 @@ export function ProjectPage({
       setEditorData(null);
       setCurrent(null);
     }
-  }, [activeProject, activeProject.data, bypassValidation, setCurrent]);
+    // Note: depend on activeProject.data (not activeProject object) to avoid
+    // reinit when the project wrapper changes but data is the same reference.
+  }, [activeProject.data, isEmptyProjectData, bypassValidation, setCurrent]);
 
   const showLoading =
     !isEmptyProjectData && (editorData === null || !minLoadingDelayDone);
@@ -300,13 +323,15 @@ export function ProjectPage({
             if (onSaveProjectColors && resolvedProjectColors) {
               onSaveProjectColors(resolvedProjectColors);
             }
-            onSaveProject(
+            const projectMeta = toProjectMeta(
               resolveProjectForSave({
                 project,
                 overrideProject,
                 data: editorData,
               }),
             );
+            logger.info('ProjectPage', 'saving project meta', projectMeta);
+            onSaveProject(projectMeta);
             toast.success('Saved');
           } catch (e) {
             logger.error('ProjectPage', 'save project failed', e);
@@ -377,7 +402,7 @@ export function ProjectPage({
 
               const { project: migratedProject } =
                 runProjectMigrations(projectForMigration);
-              onSaveProject(migratedProject);
+              onSaveProject(toProjectMeta(migratedProject));
               setOverrideProject(migratedProject);
               setBypassValidation(true);
               setMigrationGate(null);
@@ -430,7 +455,7 @@ export function ProjectPage({
 
             // This action only fixes project metadata. It intentionally does NOT
             // validate/normalize node data (it might still be invalid).
-            onSaveProject(fixedProject);
+            onSaveProject(toProjectMeta(fixedProject));
             setOverrideProject(fixedProject);
             setBypassValidation(false);
             setMigrationGate(null);
@@ -488,7 +513,7 @@ export function ProjectPage({
                 data: nodeCandidate as Project['data'],
               };
 
-              onSaveProject(nextProject);
+              onSaveProject(toProjectMeta(nextProject));
               setOverrideProject(nextProject);
               setBypassValidation(false);
               setValidationError(null);

package/src/pages/projectPageUtils.ts

@@ -1,4 +1,4 @@
-import type { Project } from '../types/Project';
+import type { Project, ProjectMeta } from '../types/Project';
 import type { Node } from '../types/Node';
 import { getDefaultProject } from '../utils/getDefaultProject';
 
@@ -13,3 +13,17 @@ export function resolveProjectForSave(args: {
     data: args.data,
   });
 }
+
+/**
+ * Strips a full Project down to its essential persistence fields.
+ * Use before handing the project to onSaveProject so consumers only
+ * receive the canonical metadata (name, version, type, data).
+ */
+export function toProjectMeta(project: Project): ProjectMeta {
+  return {
+    name: project.name,
+    version: project.version,
+    ...(project.type ? { type: project.type } : {}),
+    data: project.data,
+  };
+}

package/src/pages/tabs/SideTool.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Modal } from '../../modals';
 import type { Node } from '../../types/Node';
 import type { Localication } from '../../types/PreviewConfig';
@@ -52,12 +52,6 @@ export function SideTool({ data, setData }: SideToolProps) {
   useLogRender('SideTool');
   const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
   const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
-  const [isCompactMode, setIsCompactMode] = useState(() => {
-    if (typeof window === 'undefined') {
-      return false;
-    }
-    return window.innerWidth < 1000;
-  });
   const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
   const { appConfig, setAppConfig, previewMode, setPreviewMode } =
     useRenderStore((s) => ({
@@ -67,21 +61,6 @@ export function SideTool({ data, setData }: SideToolProps) {
       setPreviewMode: s.setPreviewMode,
     }));
 
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const handleResize = () => {
-      const compact = window.innerWidth < 1000;
-      setIsCompactMode(compact);
-    };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
   const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
     appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
 

package/src/paywall/hooks/index.ts

@@ -1,5 +1,4 @@
 export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
 export { useDiscountRate } from './useDiscountRate';
 export { useChangeDelayByPaywall } from './useChangeDelayByPaywall';
-export { useHandleGoBack } from './useHandleGoBack';
 export { useMockOSBackHandler } from './useMockOSBackHandler';

package/src/store.ts

@@ -1,13 +1,8 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import {
-  defaultAppConfig,
-  type AppConfig,
-  type Localication,
-} from './types/PreviewConfig';
+import { defaultAppConfig, type AppConfig } from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
-import { ScreenStyle } from './RenderPage';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';

package/src/styles/base/_global.scss

@@ -61,6 +61,8 @@ body,
   min-width: 200px;
   border-right: 1px solid colors.$borderColor;
   overflow: auto;
+  max-height: calc(100vh - 120px);
+  padding-bottom: 80px;
 }
 
 .split-right {

package/src/types/Project.ts

@@ -29,6 +29,13 @@ export interface ProjectBase<T> {
 
 export interface Project extends ProjectBase<Node> {}
 
+/**
+ * Lightweight subset of Project containing only the essential metadata
+ * needed for persistence (name, version, type, data).
+ * Excludes runtime/editor-only fields like appConfig and projectColors.
+ */
+export type ProjectMeta = Pick<Project, 'name' | 'version' | 'type' | 'data'>;
+
 export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
 
 export type LogSource = string;

package/src/utils/analyseNodeByPatterns.ts

@@ -344,6 +344,10 @@ function validateAttributeValue(
   // null to clear fields (e.g. events[].navigate_to = null).
   if (value == null) return ok();
 
+  // "never" type means the attribute is marked as not to be validated.
+  // Skip validation for attributes with "never" type.
+  if (spec === 'never') return ok();
+
   if (Array.isArray(spec)) {
     return validateEnumValue(value, spec, path);
   }

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { defaultProjectColors, mergeProjectColors } from './projectColors';

package/src/utils/logRenderStore.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 // This file is a debug utility specifically designed to log to console for debugging purposes.
 import { useRenderStore } from '../store';
 

package/src/utils/novaToJson.ts

@@ -1,5 +1,5 @@
 import { Node, NodeData } from '../types/Node';
-import { Project, ProjectBase } from '../types/Project';
+import { ProjectBase } from '../types/Project';
 //TODO: deprecated olmasına rağmen snapshot testi ekle
 /**
  * @deprecated Legacy converter for old "nova" onboard JSON formats.
@@ -226,7 +226,6 @@ function buildCarouselItem(
         const flex = attrs?.flex ? Number(attrs.flex) : undefined;
 
         // Normalize events and compute Navigate target indices when resolvable
-        let targetIndex: number | undefined = undefined;
         //@eslint-disable-next-line @typescript-eslint/no-explicit-any
         const actions = (attrs?.actions || []) as any[];
         const normalizedEvents: {
@@ -263,9 +262,6 @@ function buildCarouselItem(
                   ? { targetIndex: pageKeyToIndex.get(nextKey!)! }
                   : {}),
               });
-              if (hasTarget) {
-                targetIndex = pageKeyToIndex.get(nextKey!)!;
-              }
             }
           }
         }

package/src/utils/parseColor.ts

@@ -19,6 +19,7 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
   if (trimmed.startsWith(STATIC_PREFIX)) {
     const token = trimmed.slice(STATIC_PREFIX.length);
     const resolved = projectColors.STATIC_COLORS?.[token];
+    console.log('resolved', value, resolved);
     return typeof resolved === 'string' && resolved.trim()
       ? resolved.trim()
       : trimmed;

package/src/utils/patterns.ts

@@ -48,6 +48,8 @@ type Pattern = {
   schemaVersion: number;
   pattern: {
     type: string;
+    title?: string;
+    description?: string;
     children: unknown;
     attributes?: Record<string, string | string[]>;
   };

package/src/utils/projectColors.ts

@@ -0,0 +1,71 @@
+import type {
+  ProjectColors,
+  ProjectColorTokenMap,
+  ProjectThemeColors,
+} from '../types/Project';
+
+export const defaultProjectColors: ProjectColors = {
+  STATIC_COLORS: {
+    BLACK: '#000',
+    WHITE: '#FFFFFF',
+    TRANSPARENT: '#ffffff00',
+    ONBOARD_DOT_INACTIVE: '#E4E5E7',
+    ONBOARD_DOT_ACTIVE: '#007AFF',
+    ONBOARD_BUTTON_PRIMARY_BACKGROUND: '#0000FF',
+    ONBOARD_BUTTON_PRIMARY_TEXT: '#000',
+    ONBOARD_LINK_COLOR: '#1778F2',
+    ONBOARD_SEPARATOR_COLOR: '#44454D',
+  },
+  THEME_COLORS: {
+    light: {
+      TEXT: '#161827',
+      BACKGROUND: '#F4F5FF',
+      ICON: '#0450E2',
+      LINE: '#E9EBF9',
+      ONBOARD_TITLE: '#161827',
+      ONBOARD_SUBTITLE: '#44454D',
+      ONBOARD_BUTTON_SECONDARY_TEXT: '#81838F',
+      ONBOARD_FOOTER_TEXT: '#81838F',
+    },
+    dark: {
+      TEXT: '#E9EBF9',
+      BACKGROUND: '#080A17',
+      ICON: '#0450E2',
+      LINE: '#161827',
+      ONBOARD_TITLE: '#FDFDFD',
+      ONBOARD_SUBTITLE: '#C7C7C7',
+      ONBOARD_BUTTON_SECONDARY_TEXT: '#A9AAAC',
+      ONBOARD_FOOTER_TEXT: '#A2A4B1',
+    },
+  },
+};
+
+/**
+ * Merges custom project colors with base colors.
+ * Custom colors override base colors on a per-token basis.
+ */
+export function mergeProjectColors(
+  baseColors: ProjectColors,
+  customColors: ProjectColors,
+): ProjectColors {
+  const staticColors: ProjectColorTokenMap = {
+    ...baseColors.STATIC_COLORS,
+    ...(customColors.STATIC_COLORS || {}),
+  };
+
+  const themeColors: ProjectThemeColors = {
+    light: {
+      ...(baseColors.THEME_COLORS?.light || {}),
+      ...(customColors.THEME_COLORS?.light || {}),
+    },
+    dark: {
+      ...(baseColors.THEME_COLORS?.dark || {}),
+      ...(customColors.THEME_COLORS?.dark || {}),
+    },
+  };
+
+  return {
+    STATIC_COLORS: staticColors,
+    THEME_COLORS: themeColors,
+  };
+}

package/dist/build-components/Counter/Counter.d.ts

@@ -1,2 +0,0 @@
-import type { CounterComponentProps } from './CounterProps.generated';
-export declare function Counter({ node }: CounterComponentProps): import("react/jsx-runtime").JSX.Element;