@athoscommerce/snap-preact 1.2.3-beta.4 → 1.2.3-beta.5

package/dist/esm/src/Templates/Stores/TemplateEditor/TemplateEditorStore.js

@@ -1,9 +1,14 @@
-import { StorageStore, StorageType } from '@athoscommerce/snap-store-mobx';
-import { observable, makeObservable } from 'mobx';
+import { StorageStore, StorageType } from '@athoscommerce/snap-toolbox';
+import { observable, makeObservable, toJS } from 'mobx';
 import Color from 'color';
 import deepmerge from 'deepmerge';
 import { TEMPLATE_STORE_KEY } from '../TemplateStore';
-import { configUI, themeUI, searchControllerUI, autocompleteControllerUI, updateAutocompleteControllerState } from './uiAbstractions';
+import { configUI, themeUI, searchControllerUI, 
+// searchTargetUI,
+autocompleteControllerUI, 
+// autocompleteTargetUI,
+updateAutocompleteControllerState, searchTargetUI, autocompleteTargetUI, } from './uiAbstractions';
+import { combineMerge } from '../../../utils';
 const THEME_VARIABLE_DEFAULTS = {
     breakpoints: {
         mobile: 600,
@@ -19,20 +24,31 @@ const THEME_VARIABLE_DEFAULTS = {
 };
 export class TemplateEditorStore {
     constructor({ templatesStore }) {
-        this.state = {
+        this.storedState = {
             hidden: false,
             activeTab: 'configuration',
         };
+        this.state = {
+            activeDomSelector: '',
+        };
         this.overrides = {
             config: {},
             controller: {},
             theme: {},
+            targets: {
+                search: [],
+                autocomplete: [],
+            },
         };
         this.initial = {
             config: {
                 language: 'en',
                 currency: 'usd',
             },
+            targets: {
+                search: [],
+                autocomplete: [],
+            },
             controller: {},
             theme: {
                 extends: 'base',
@@ -49,6 +65,10 @@ export class TemplateEditorStore {
                 search: searchControllerUI(this),
                 autocomplete: autocompleteControllerUI(this),
             },
+            targets: {
+                search: searchTargetUI(this),
+                autocomplete: autocompleteTargetUI(this),
+            },
         };
         this.setThemeOverride = (obj) => {
             const { path, value } = obj;
@@ -57,40 +77,157 @@ export class TemplateEditorStore {
                 return acc && acc[key];
             }, this.initial.theme);
             const themeConfigOverrides = generateObject(path, value == initialValue ? undefined : value);
-            this.overrides.theme = removeEmptyObjects(deepmerge(this.overrides.theme || {}, themeConfigOverrides));
+            this.overrides.theme = removeEmptyObjects(deepmerge(this.overrides.theme || {}, themeConfigOverrides || {}));
             this.storage.set('overrides.theme', this.overrides.theme);
             const mergedOverrides = deepmerge(this.initial.theme || {}, this.overrides.theme || {});
+            const transformedMergedOverrides = transformThemeComponentOverrides(mergedOverrides);
             // update all themes with the new overrides
             Object.keys(this.templatesStore.themes.library).forEach((themeName) => {
                 const themeStore = this.templatesStore.themes.library[themeName];
-                themeStore.setEditorOverrides({ variables: mergedOverrides.variables || {} });
+                themeStore.setEditorOverrides(transformedMergedOverrides);
             });
         };
+        // ['variables', 'colors', 'primary']
+        // store.setThemeOverride({ path: ['variables', 'breakpoints', 'mobile'], value });
+        // ['search', '[0]', 'selector']
+        // store.setTargetOverride({ path: ['search', '[0]'], value });
+        // store.setTargetOverride({ path: ['search', '[0]', 'selector'], value });
+        // store.setTargetOverride({ path: ['search', '[0]'], value });  --- value = {...}
+        this.setTargetOverride = (obj) => {
+            const path = obj.path;
+            let value = obj.value;
+            /*
+            this.initial.targets = {
+                search: [
+                    {...},
+                    {...},
+                ]
+            }
+            */
+            const targetFeature = path[0];
+            // const lastPath = path[path.length - 1];
+            let targetIndex = -1;
+            // grab the initial config value using the path provided
+            const initialValue = path.reduce((acc, key) => {
+                // handle array index access
+                // e.g., [0], [1], etc.
+                // if the key is in the format of [index], convert it to a number and access the array
+                // otherwise, access the object property as usual
+                try {
+                    const keyIndex = Number(key.replace(/^\[(\d+)\]$/, '$1'));
+                    if (Number.isNaN(keyIndex)) {
+                        // not an index position
+                        return acc && acc[key];
+                    }
+                    else {
+                        // we have a string key - use it to set the accumulator
+                        targetIndex = keyIndex;
+                        return acc && acc[keyIndex];
+                    }
+                }
+                catch (error) {
+                    // handle error
+                    console.error('Error accessing path in initial targets:', error);
+                    return undefined;
+                }
+            }, this.initial.targets);
+            const targetOverrides = generateObject(path, value == initialValue ? undefined : value);
+            const merged = deepmerge(toJS(this.overrides.targets) || {}, toJS(targetOverrides) || {}, { arrayMerge: combineMerge });
+            this.overrides.targets = removeEmptyObjects(merged);
+            this.storage.set('overrides.targets', this.overrides.targets);
+            // const plainInitial = convertObservableToPlain(this.initial.targets);
+            // const plainOverrides = convertObservableToPlain(this.overrides.targets);
+            const mergedOverrides = deepmerge(toJS(this.initial.targets) || {}, toJS(this.overrides.targets) || {}, {
+                arrayMerge: combineMerge,
+            });
+            const finalPath = path[path.length - 1];
+            if (finalPath == 'selector' && targetIndex > -1) {
+                // if reset button was clicked value will be undefined
+                if (typeof value == 'undefined') {
+                    value = initialValue;
+                }
+                // needs to have a value and some actual elem to find
+                if (typeof value == 'string' && value.length > 1 && document.querySelector(value)) {
+                    const activeTargeterKey = Object.keys(window.athos.controller[targetFeature].targeters)[targetIndex];
+                    if (activeTargeterKey) {
+                        const oldSelector = window.athos.controller[targetFeature].targeters[activeTargeterKey].targets[0].selector;
+                        const elem = document.querySelector(oldSelector || '');
+                        if (targetFeature == 'search' && elem) {
+                            //create clone of elem with all attributes
+                            const clonedElement = elem.cloneNode(true);
+                            clonedElement.innerHTML = '';
+                            //inject clone right after elem
+                            elem.insertAdjacentElement('afterend', clonedElement);
+                            //delete elem so targeter can retarget an element thats already been targeted
+                            elem.remove();
+                        }
+                        window.athos.controller[targetFeature].targeters[activeTargeterKey].targets[0].selector = value;
+                        /*
+                            selector
+                            inputSelector
+                        
+                            targetSelector -> selector
+                            inputSelector (optional) -> inputSelector
+                            DomTargeter
+                                * selector = selector
+                                * props.input = inputSelector (optional)
+                        */
+                        window.athos.controller[targetFeature].retarget();
+                    }
+                }
+            }
+            else if (finalPath == 'inputSelector' && targetIndex > -1) {
+                const activeTargeterKey = Object.keys(window.athos.controller[targetFeature].targeters)[targetIndex];
+                window.athos.controller[targetFeature].targeters[activeTargeterKey].targets[0].props.input = value;
+                window.athos.controller[targetFeature].retarget();
+            }
+            // if the component changed we need to tell the targetStore about it via:
+            const targetFeatureSet = this.templatesStore.targets[targetFeature];
+            if (targetFeatureSet && targetIndex != -1) {
+                const target = targetFeatureSet[targetIndex];
+                // if (target && lastPath) {
+                // 	const finalValue = mergedOverrides[targetFeature][targetIndex]?.selector;
+                // 	finalValue && target.setValue(lastPath, finalValue);
+                // }
+                // update values in target
+                const mergedTarget = mergedOverrides[targetFeature][targetIndex];
+                Object.keys(mergedTarget).forEach((key) => {
+                    const value = mergedTarget[key];
+                    target.setValue(key, value);
+                });
+            }
+            // target.setComponent
+        };
         this.templatesStore = templatesStore;
         this.storage = new StorageStore({ type: StorageType.local, key: TEMPLATE_STORE_KEY });
-        this.state = this.storage.get('editor') || this.state;
-        this.overrides = this.storage.get('overrides') || this.overrides;
-        // prevent empty objects in overrides
-        this.overrides.config = this.overrides.config || {};
-        this.overrides.controller = this.overrides.controller || {};
-        this.overrides.theme = this.overrides.theme || {};
+        this.storedState = this.storage.get('editor') || this.storedState;
         this.initial.config = deepmerge(this.initial.config, templatesStore.config.config);
         this.initial.controller = {}; // set when registering controllers
+        // set initial targets
+        if (templatesStore.config.search?.targets)
+            this.initial.targets.search = templatesStore.config.search?.targets;
+        if (templatesStore.config.autocomplete?.targets)
+            this.initial.targets.autocomplete = templatesStore.config.autocomplete?.targets;
         const themeConfig = JSON.parse(JSON.stringify(templatesStore.config.theme || {}));
         delete themeConfig.style;
-        delete themeConfig.overrides;
         this.initial.theme = deepmerge(this.initial.theme, themeConfig);
-        // normalize all colors to hexadecimal format using the Color library
-        Object.keys(this.initial.theme.variables.colors).forEach((key) => {
-            const color = this.initial.theme.variables.colors[key];
-            this.initial.theme.variables.colors[key] = Color(color).hex();
+        // apply stored overrides (normalizes, persists, and triggers theme changes)
+        const storedOverrides = this.storage.get('overrides') || {};
+        this.setOverrides({
+            config: storedOverrides.config,
+            theme: storedOverrides.theme,
+            search: {
+                targets: storedOverrides.targets?.search,
+                settings: storedOverrides.controller?.search,
+            },
+            autocomplete: {
+                targets: storedOverrides.targets?.autocomplete,
+                settings: storedOverrides.controller?.autocomplete,
+            },
         });
-        // switch to the theme set in the initial config if no override is set
-        this.setTheme(this.overrides.theme.extends ?? this.initial.theme.extends);
-        // initialize themes with overrides
-        this.setThemeOverride({ path: [], value: undefined });
         this.storage.set('initial', this.initial);
         makeObservable(this, {
+            storedState: observable,
             state: observable,
             overrides: observable,
             initial: observable,
@@ -102,12 +239,77 @@ export class TemplateEditorStore {
         // });
     }
     switchTabs(tab) {
-        this.state.activeTab = tab;
-        this.storage.set('editor', this.state);
+        this.storedState.activeTab = tab;
+        this.storage.set('editor', this.storedState);
     }
     toggleHide(hide) {
-        this.state.hidden = hide;
-        this.storage.set('editor', this.state);
+        this.storedState.hidden = hide;
+        this.storage.set('editor', this.storedState);
+    }
+    setOverrides(overrides) {
+        // normalize and set overrides, preventing empty objects
+        this.overrides.config = overrides.config || {};
+        this.overrides.controller = {
+            search: overrides.search?.settings,
+            autocomplete: overrides.autocomplete?.settings,
+        };
+        this.overrides.theme = overrides.theme || {};
+        this.overrides.targets = {
+            search: overrides.search?.targets || [],
+            autocomplete: overrides.autocomplete?.targets || [],
+        };
+        // persist each section to storage
+        this.storage.set('overrides.config', this.overrides.config);
+        this.storage.set('overrides.controller', this.overrides.controller);
+        this.storage.set('overrides.targets', this.overrides.targets);
+        // apply language/currency overrides to the templates store
+        const language = (this.overrides.config.language || this.initial.config.language);
+        const currency = (this.overrides.config.currency || this.initial.config.currency);
+        this.templatesStore.setLanguage(language);
+        this.templatesStore.setCurrency(currency);
+        // re-apply controller configs with merged overrides
+        // (skip if initial.controller hasn't been populated yet — registerController handles that case)
+        ['search', 'autocomplete'].forEach((type) => {
+            const controller = window.athos?.controller?.[type];
+            if (controller && this.initial.controller[type]) {
+                // reset settings to initial values first, then merge overrides on top
+                // (controller.config.settings already has old overrides baked in, so we can't use it as a base)
+                const cleanConfig = { ...controller.config, settings: JSON.parse(JSON.stringify(this.initial.controller[type])) };
+                const mergedConfig = deepmerge(cleanConfig, {
+                    settings: this.overrides.controller[type] || {},
+                });
+                controller.setConfig(mergedConfig);
+            }
+        });
+        // re-apply target overrides (component, selector, etc.)
+        ['search', 'autocomplete'].forEach((feature) => {
+            const targetFeatureSet = this.templatesStore.targets[feature];
+            const mergedTargets = deepmerge(toJS(this.initial.targets[feature]) || [], toJS(this.overrides.targets[feature]) || [], { arrayMerge: combineMerge });
+            targetFeatureSet.forEach((target, index) => {
+                const mergedTarget = mergedTargets[index];
+                if (mergedTarget) {
+                    Object.keys(mergedTarget).forEach((key) => {
+                        target.setValue(key, mergedTarget[key]);
+                    });
+                }
+            });
+        });
+        // apply theme changes (also persists overrides.theme)
+        this.setTheme(this.overrides.theme.extends ?? this.initial.theme.extends);
+    }
+    resetOverrides() {
+        this.storage.set('overrides', undefined);
+        this.setOverrides({});
+    }
+    setActiveDomSelector(selectorId) {
+        if (selectorId?.length) {
+            this.state.activeDomSelector = selectorId;
+            this.toggleHide(true);
+        }
+        else {
+            this.state.activeDomSelector = '';
+            this.toggleHide(false);
+        }
     }
     setConfigOverride(obj) {
         const { path, value } = obj;
@@ -119,7 +321,6 @@ export class TemplateEditorStore {
         const updatedOverrides = removeEmptyObjects(deepmerge(this.overrides.config || {}, configOverrides));
         this.overrides.config = updatedOverrides;
         this.storage.set('overrides.config', updatedOverrides);
-        // TODO: handle setting language and currency separately
         if (path[0] === 'language') {
             this.templatesStore.setLanguage((value || initialValue)).then(() => {
                 this.storage.set('overrides.config', updatedOverrides);
@@ -138,24 +339,42 @@ export class TemplateEditorStore {
         }
         this.overrides.theme = deepmerge(this.overrides.theme, updatedConfig);
         this.storage.set('overrides.theme', this.overrides.theme);
+        // update initial variables from the newly selected theme's raw definition
+        const themeDefinition = this.templatesStore.library.themes[themeName];
+        if (themeDefinition) {
+            const themeConfig = JSON.parse(JSON.stringify(this.templatesStore.config.theme || {}));
+            delete themeConfig.style;
+            this.initial.theme.variables = deepmerge(themeDefinition.variables || {}, themeConfig.variables || {});
+            // normalize colors to hexadecimal format
+            Object.keys(this.initial.theme.variables.colors).forEach((key) => {
+                const color = this.initial.theme.variables.colors[key];
+                this.initial.theme.variables.colors[key] = Color(color).hex();
+            });
+            this.storage.set('initial', this.initial);
+        }
+        // update all library themes with recomputed editor overrides based on the new theme's variables
+        const mergedOverrides = deepmerge(this.initial.theme || {}, this.overrides.theme || {});
+        const transformedMergedOverrides = transformThemeComponentOverrides(mergedOverrides);
+        Object.keys(this.templatesStore.themes.library).forEach((libThemeName) => {
+            const themeStore = this.templatesStore.themes.library[libThemeName];
+            themeStore.setEditorOverrides(transformedMergedOverrides);
+        });
         // loop through all targets in templateStore and call setTheme on them all
         Object.keys(this.templatesStore.targets).forEach((feature) => {
             // loop through all the features (search, autocomplete, recommendations)
             if (feature == 'recommendation') {
-                const recommendationObj = this.templatesStore.targets[feature];
-                Object.keys(recommendationObj).forEach((recType) => {
-                    const targetMap = recommendationObj[recType];
-                    Object.keys(targetMap).forEach((target) => {
-                        const targetStore = targetMap[target];
-                        targetStore.setTheme(themeName, 'library');
+                const recommendationTargetObject = this.templatesStore.targets.recommendation;
+                Object.keys(recommendationTargetObject).forEach((recType) => {
+                    const featureTargets = recommendationTargetObject[recType];
+                    featureTargets.forEach((target) => {
+                        target.setTheme(themeName, 'library');
                     });
                 });
             }
             else {
-                const targetMap = this.templatesStore.targets[feature];
-                Object.keys(targetMap).forEach((target) => {
-                    const targetStore = targetMap[target];
-                    targetStore.setTheme(themeName, 'library');
+                const featureTargets = this.templatesStore.targets[feature];
+                featureTargets.forEach((target) => {
+                    target.setTheme(themeName, 'library');
                 });
             }
         });
@@ -201,35 +420,35 @@ export class TemplateEditorStore {
     }
     getTargets() {
         const storeTargets = this.templatesStore.targets;
-        const searchTargets = Object.keys(storeTargets.search || {}).map((target) => ({
+        const searchTargets = storeTargets.search.map((target) => ({
             type: 'search',
             target,
-            template: storeTargets.search[target],
-            selector: storeTargets.search[target].selector,
+            template: target.component,
+            selector: target.selector,
         }));
-        const autocompleteTargets = Object.keys(storeTargets.autocomplete || {}).map((target) => ({
+        const autocompleteTargets = storeTargets.autocomplete.map((target) => ({
             type: 'autocomplete',
             target,
-            template: storeTargets.autocomplete[target],
-            selector: storeTargets.autocomplete[target].selector,
+            template: target.component,
+            selector: target.selector,
         }));
-        const recommendationBundleTargets = Object.keys(storeTargets.recommendation.bundle || {}).map((target) => ({
+        const recommendationBundleTargets = storeTargets.recommendation.bundle.map((target) => ({
             type: 'recommendation/bundle',
             target,
-            template: storeTargets.recommendation.bundle[target],
-            selector: storeTargets.recommendation.bundle[target].selector,
+            template: target.component,
+            selector: target.selector,
         }));
-        const recommendationDefaultTargets = Object.keys(storeTargets.recommendation.default || {}).map((target) => ({
+        const recommendationDefaultTargets = storeTargets.recommendation.default.map((target) => ({
             type: 'recommendation/default',
             target,
-            template: storeTargets.recommendation.default[target],
-            selector: storeTargets.recommendation.default[target].selector,
+            template: target.component,
+            selector: target.selector,
         }));
-        const recommendationEmailTargets = Object.keys(storeTargets.recommendation.email || {}).map((target) => ({
+        const recommendationEmailTargets = storeTargets.recommendation.email.map((target) => ({
             type: 'recommendation/email',
             target,
-            template: storeTargets.recommendation.email[target],
-            selector: storeTargets.recommendation.email[target].selector,
+            template: target.component,
+            selector: target.selector,
         }));
         const targets = [
             ...searchTargets,
@@ -240,44 +459,125 @@ export class TemplateEditorStore {
         ];
         return targets;
     }
-    generateTemplatesConfig() {
+    generateTemplatesConfig(options) {
+        const resolveSource = (opt) => {
+            if (opt === undefined || opt === true)
+                return { initial: true, overrides: true };
+            if (opt === false)
+                return { initial: false, overrides: false };
+            return { initial: opt.initial ?? true, overrides: opt.overrides ?? true };
+        };
+        const configOpt = resolveSource(options?.config);
+        let themeExtendsOpt;
+        let themeVariablesOpt;
+        let themeOverridesOpt;
+        if (options?.theme === undefined || options?.theme === true) {
+            themeExtendsOpt = { initial: true, overrides: true };
+            themeVariablesOpt = { initial: true, overrides: true };
+            themeOverridesOpt = { initial: true, overrides: true };
+        }
+        else if (options?.theme === false) {
+            themeExtendsOpt = { initial: false, overrides: false };
+            themeVariablesOpt = { initial: false, overrides: false };
+            themeOverridesOpt = { initial: false, overrides: false };
+        }
+        else {
+            themeExtendsOpt = resolveSource(options.theme.extends);
+            themeVariablesOpt = resolveSource(options.theme.variables);
+            themeOverridesOpt = resolveSource(options.theme.overrides);
+        }
+        const includeTheme = themeExtendsOpt.initial ||
+            themeExtendsOpt.overrides ||
+            themeVariablesOpt.initial ||
+            themeVariablesOpt.overrides ||
+            themeOverridesOpt.initial ||
+            themeOverridesOpt.overrides;
         const originalConfig = JSON.parse(JSON.stringify(this.templatesStore.config));
         delete originalConfig.search;
         delete originalConfig.autocomplete;
         delete originalConfig.recommendation;
         delete originalConfig.components;
-        const storageConfigData = (this.storage.get('overrides.config') || {});
-        const themeConfigData = (this.storage.get('overrides.theme') || {});
-        const overrideConfig = { config: storageConfigData, theme: themeConfigData };
+        // selectively strip initial config
+        if (!configOpt.initial) {
+            delete originalConfig.config;
+        }
+        // selectively strip initial theme fields
+        if (!includeTheme) {
+            delete originalConfig.theme;
+        }
+        else if (originalConfig.theme) {
+            if (!themeExtendsOpt.initial)
+                delete originalConfig.theme.extends;
+            if (!themeVariablesOpt.initial)
+                delete originalConfig.theme.variables;
+            if (!themeOverridesOpt.initial)
+                delete originalConfig.theme.overrides;
+        }
+        const overrideConfig = {};
+        if (configOpt.overrides) {
+            overrideConfig.config = (this.storage.get('overrides.config') || {});
+        }
+        if (includeTheme) {
+            const themeOverrideData = (this.storage.get('overrides.theme') || {});
+            const filteredTheme = {};
+            if (themeExtendsOpt.overrides && themeOverrideData.extends !== undefined)
+                filteredTheme.extends = themeOverrideData.extends;
+            if (themeVariablesOpt.overrides && themeOverrideData.variables !== undefined)
+                filteredTheme.variables = themeOverrideData.variables;
+            if (themeOverridesOpt.overrides && themeOverrideData.overrides !== undefined)
+                filteredTheme.overrides = themeOverrideData.overrides;
+            if (Object.keys(filteredTheme).length) {
+                overrideConfig.theme = filteredTheme;
+            }
+        }
         const targets = this.getTargets();
-        const searchTargets = targets
-            .filter((target) => target.type === 'search')
-            .map((target) => ({
-            selector: target.selector,
-            component: target.template.component,
-        }));
-        const autocompleteTargets = targets
-            .filter((target) => target.type === 'autocomplete')
-            .map((target) => ({
-            selector: target.selector,
-            component: target.template.component,
-        }));
-        // add search controller settings
-        if (searchTargets.length) {
-            overrideConfig.search = {
-                targets: searchTargets,
-                settings: this.overrides.controller.search || {},
-            };
+        if (options?.search !== false) {
+            const searchTargets = targets
+                .filter((target) => target.type === 'search')
+                .map((target) => ({
+                selector: target.selector,
+                component: target.target.component,
+            }));
+            if (searchTargets.length) {
+                overrideConfig.search = {
+                    targets: searchTargets,
+                    settings: this.overrides.controller.search || {},
+                };
+            }
         }
-        // add autocomplete controller settings
-        if (autocompleteTargets.length) {
-            overrideConfig.autocomplete = {
-                targets: autocompleteTargets,
-                settings: this.overrides.controller.autocomplete || {},
-            };
+        if (options?.autocomplete !== false) {
+            const autocompleteTargets = targets
+                .filter((target) => target.type === 'autocomplete')
+                .map((target) => ({
+                selector: target.selector,
+                component: target.target.component,
+            }));
+            if (autocompleteTargets.length) {
+                overrideConfig.autocomplete = {
+                    targets: autocompleteTargets,
+                    settings: this.overrides.controller.autocomplete || {},
+                };
+            }
         }
         const config = deepmerge(originalConfig, overrideConfig);
-        return config;
+        const cleaned = removeEmptyObjects(config);
+        if (!options?.unlocked) {
+            delete cleaned.unlocked;
+        }
+        // reorder keys: unlocked, config, theme, search, autocomplete, then everything else
+        const orderedKeys = ['unlocked', 'config', 'theme', 'search', 'autocomplete'];
+        const ordered = {};
+        for (const key of orderedKeys) {
+            if (key in cleaned) {
+                ordered[key] = cleaned[key];
+            }
+        }
+        for (const key of Object.keys(cleaned)) {
+            if (!(key in ordered)) {
+                ordered[key] = cleaned[key];
+            }
+        }
+        return ordered;
     }
 }
 function removeEmptyObjects(object) {
@@ -286,16 +586,33 @@ function removeEmptyObjects(object) {
         if (obj === null || typeof obj !== 'object') {
             return obj;
         }
+        // Handle arrays differently from objects
+        if (Array.isArray(obj)) {
+            return obj
+                .map((item) => cleanObj(item))
+                .filter((item) => {
+                // Keep non-null/undefined items
+                if (item === null || item === undefined)
+                    return false;
+                // Keep non-empty objects/arrays
+                if (typeof item === 'object') {
+                    return Array.isArray(item) ? item.length > 0 : Object.keys(item).length > 0;
+                }
+                // Keep primitive values
+                return true;
+            });
+        }
+        // Handle regular objects
         const result = {};
         Object.entries(obj).forEach(([key, value]) => {
             // Skip undefined values
             if (value === undefined)
                 return;
             if (value !== null && typeof value === 'object') {
-                // Recursively clean nested objects
+                // Recursively clean nested objects/arrays
                 const cleanedValue = cleanObj(value);
-                // Only add non-empty objects
-                if (Object.keys(cleanedValue).length > 0) {
+                // Only add non-empty objects/arrays
+                if (Array.isArray(cleanedValue) ? cleanedValue.length > 0 : Object.keys(cleanedValue).length > 0) {
                     result[key] = cleanedValue;
                 }
             }
@@ -310,17 +627,58 @@ function removeEmptyObjects(object) {
     return cleanObj(object);
 }
 function generateObject(path, value) {
+    // modify this function to handle array index access
+    // e.g., [0], [1], etc.
+    // if the key is in the format of [index], convert it to a number and create an array
+    // otherwise, create an object property as usual
+    // Example:
+    // path = ['search', '[0]', 'selector'], value = '#new-selector'
+    // returns { search: [ { selector: '#new-selector' } ] }
+    // Example:
+    // path = ['search', '[0]'], value = { selector: '#new-selector', component: 'Search' }
+    // returns { search: [ { selector: '#new-selector', component: 'Search' } ] }
+    // Example:
+    // path = ['search', 'stuff', 'thing'], value = 'whatever'
+    // returns { search: { stuff: { thing: 'whatever' } } }
+    // Example:
+    // path = ['[0]'], value = { selector: '#new-selector', component: 'Search' }
+    // returns [ { selector: '#new-selector', component: 'Search' } ]
+    // if (typeof value == 'undefined') return {} as T;
     return path
         .slice()
         .reverse()
-        .reduce((res, key, index) => {
-        if (index === 0) {
-            return {
-                [key]: value,
-            };
+        .reduce((res, key) => {
+        // Check if key is array index notation like [0], [1], etc.
+        const arrayIndexMatch = key.match(/^\[(\d+)\]$/);
+        if (arrayIndexMatch) {
+            // Extract the index number
+            const index = parseInt(arrayIndexMatch[1], 10);
+            // Create an array with the element at the specified index
+            const arr = [];
+            arr[index] = res;
+            return arr;
         }
+        // Regular object property
         return {
             [key]: res,
         };
-    }, {});
+    }, value);
+}
+function transformThemeComponentOverrides(theme) {
+    const { overrides, variables } = theme;
+    const result = {};
+    if (variables) {
+        result.variables = variables;
+    }
+    if (overrides?.default) {
+        result.components = overrides.default;
+    }
+    if (overrides?.mobile || overrides?.tablet || overrides?.desktop) {
+        result.responsive = {
+            mobile: overrides?.mobile,
+            tablet: overrides?.tablet,
+            desktop: overrides?.desktop,
+        };
+    }
+    return result;
 }