@athoscommerce/snap-preact 1.2.3-beta.1 → 1.3.0

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -19,6 +30,7 @@ var color_1 = __importDefault(require("color"));
 var deepmerge_1 = __importDefault(require("deepmerge"));
 var TemplateStore_1 = require("../TemplateStore");
 var uiAbstractions_1 = require("./uiAbstractions");
+var utils_1 = require("../../../utils");
 var THEME_VARIABLE_DEFAULTS = {
     breakpoints: {
         mobile: 600,
@@ -36,21 +48,32 @@ var TemplateEditorStore = /** @class */ (function () {
     function TemplateEditorStore(_a) {
         var templatesStore = _a.templatesStore;
         var _this = this;
-        var _b;
-        this.state = {
+        var _b, _c, _d, _e, _f, _g, _h, _j;
+        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',
@@ -67,6 +90,10 @@ var TemplateEditorStore = /** @class */ (function () {
                 search: (0, uiAbstractions_1.searchControllerUI)(this),
                 autocomplete: (0, uiAbstractions_1.autocompleteControllerUI)(this),
             },
+            targets: {
+                search: (0, uiAbstractions_1.searchTargetUI)(this),
+                autocomplete: (0, uiAbstractions_1.autocompleteTargetUI)(this),
+            },
         };
         this.setThemeOverride = function (obj) {
             var path = obj.path, value = obj.value;
@@ -75,40 +102,157 @@ var TemplateEditorStore = /** @class */ (function () {
                 return acc && acc[key];
             }, _this.initial.theme);
             var themeConfigOverrides = generateObject(path, value == initialValue ? undefined : value);
-            _this.overrides.theme = removeEmptyObjects((0, deepmerge_1.default)(_this.overrides.theme || {}, themeConfigOverrides));
+            _this.overrides.theme = removeEmptyObjects((0, deepmerge_1.default)(_this.overrides.theme || {}, themeConfigOverrides || {}));
             _this.storage.set('overrides.theme', _this.overrides.theme);
             var mergedOverrides = (0, deepmerge_1.default)(_this.initial.theme || {}, _this.overrides.theme || {});
+            var transformedMergedOverrides = transformThemeComponentOverrides(mergedOverrides);
             // update all themes with the new overrides
             Object.keys(_this.templatesStore.themes.library).forEach(function (themeName) {
                 var 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 = function (obj) {
+            var path = obj.path;
+            var value = obj.value;
+            /*
+            this.initial.targets = {
+                search: [
+                    {...},
+                    {...},
+                ]
+            }
+            */
+            var targetFeature = path[0];
+            // const lastPath = path[path.length - 1];
+            var targetIndex = -1;
+            // grab the initial config value using the path provided
+            var initialValue = path.reduce(function (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 {
+                    var 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);
+            var targetOverrides = generateObject(path, value == initialValue ? undefined : value);
+            var merged = (0, deepmerge_1.default)((0, mobx_1.toJS)(_this.overrides.targets) || {}, (0, mobx_1.toJS)(targetOverrides) || {}, { arrayMerge: utils_1.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);
+            var mergedOverrides = (0, deepmerge_1.default)((0, mobx_1.toJS)(_this.initial.targets) || {}, (0, mobx_1.toJS)(_this.overrides.targets) || {}, {
+                arrayMerge: utils_1.combineMerge,
+            });
+            var 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)) {
+                    var activeTargeterKey = Object.keys(window.athos.controller[targetFeature].targeters)[targetIndex];
+                    if (activeTargeterKey) {
+                        var oldSelector = window.athos.controller[targetFeature].targeters[activeTargeterKey].targets[0].selector;
+                        var elem = document.querySelector(oldSelector || '');
+                        if (targetFeature == 'search' && elem) {
+                            //create clone of elem with all attributes
+                            var 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) {
+                var 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:
+            var targetFeatureSet = _this.templatesStore.targets[targetFeature];
+            if (targetFeatureSet && targetIndex != -1) {
+                var target_1 = targetFeatureSet[targetIndex];
+                // if (target && lastPath) {
+                // 	const finalValue = mergedOverrides[targetFeature][targetIndex]?.selector;
+                // 	finalValue && target.setValue(lastPath, finalValue);
+                // }
+                // update values in target
+                var mergedTarget_1 = mergedOverrides[targetFeature][targetIndex];
+                Object.keys(mergedTarget_1).forEach(function (key) {
+                    var value = mergedTarget_1[key];
+                    target_1.setValue(key, value);
+                });
+            }
+            // target.setComponent
+        };
         this.templatesStore = templatesStore;
         this.storage = new snap_store_mobx_1.StorageStore({ type: snap_store_mobx_1.StorageType.local, key: TemplateStore_1.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 = (0, deepmerge_1.default)(this.initial.config, templatesStore.config.config);
         this.initial.controller = {}; // set when registering controllers
+        // set initial targets
+        if ((_b = templatesStore.config.search) === null || _b === void 0 ? void 0 : _b.targets)
+            this.initial.targets.search = (_c = templatesStore.config.search) === null || _c === void 0 ? void 0 : _c.targets;
+        if ((_d = templatesStore.config.autocomplete) === null || _d === void 0 ? void 0 : _d.targets)
+            this.initial.targets.autocomplete = (_e = templatesStore.config.autocomplete) === null || _e === void 0 ? void 0 : _e.targets;
         var themeConfig = JSON.parse(JSON.stringify(templatesStore.config.theme || {}));
         delete themeConfig.style;
-        delete themeConfig.overrides;
         this.initial.theme = (0, deepmerge_1.default)(this.initial.theme, themeConfig);
-        // normalize all colors to hexadecimal format using the Color library
-        Object.keys(this.initial.theme.variables.colors).forEach(function (key) {
-            var color = _this.initial.theme.variables.colors[key];
-            _this.initial.theme.variables.colors[key] = (0, color_1.default)(color).hex();
+        // apply stored overrides (normalizes, persists, and triggers theme changes)
+        var storedOverrides = this.storage.get('overrides') || {};
+        this.setOverrides({
+            config: storedOverrides.config,
+            theme: storedOverrides.theme,
+            search: {
+                targets: (_f = storedOverrides.targets) === null || _f === void 0 ? void 0 : _f.search,
+                settings: (_g = storedOverrides.controller) === null || _g === void 0 ? void 0 : _g.search,
+            },
+            autocomplete: {
+                targets: (_h = storedOverrides.targets) === null || _h === void 0 ? void 0 : _h.autocomplete,
+                settings: (_j = storedOverrides.controller) === null || _j === void 0 ? void 0 : _j.autocomplete,
+            },
         });
-        // switch to the theme set in the initial config if no override is set
-        this.setTheme((_b = this.overrides.theme.extends) !== null && _b !== void 0 ? _b : this.initial.theme.extends);
-        // initialize themes with overrides
-        this.setThemeOverride({ path: [], value: undefined });
         this.storage.set('initial', this.initial);
         (0, mobx_1.makeObservable)(this, {
+            storedState: mobx_1.observable,
             state: mobx_1.observable,
             overrides: mobx_1.observable,
             initial: mobx_1.observable,
@@ -120,12 +264,80 @@ var TemplateEditorStore = /** @class */ (function () {
         // });
     }
     TemplateEditorStore.prototype.switchTabs = function (tab) {
-        this.state.activeTab = tab;
-        this.storage.set('editor', this.state);
+        this.storedState.activeTab = tab;
+        this.storage.set('editor', this.storedState);
     };
     TemplateEditorStore.prototype.toggleHide = function (hide) {
-        this.state.hidden = hide;
-        this.storage.set('editor', this.state);
+        this.storedState.hidden = hide;
+        this.storage.set('editor', this.storedState);
+    };
+    TemplateEditorStore.prototype.setOverrides = function (overrides) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        // normalize and set overrides, preventing empty objects
+        this.overrides.config = overrides.config || {};
+        this.overrides.controller = {
+            search: (_a = overrides.search) === null || _a === void 0 ? void 0 : _a.settings,
+            autocomplete: (_b = overrides.autocomplete) === null || _b === void 0 ? void 0 : _b.settings,
+        };
+        this.overrides.theme = overrides.theme || {};
+        this.overrides.targets = {
+            search: ((_c = overrides.search) === null || _c === void 0 ? void 0 : _c.targets) || [],
+            autocomplete: ((_d = overrides.autocomplete) === null || _d === void 0 ? void 0 : _d.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
+        var language = (this.overrides.config.language || this.initial.config.language);
+        var 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(function (type) {
+            var _a, _b;
+            var controller = (_b = (_a = window.athos) === null || _a === void 0 ? void 0 : _a.controller) === null || _b === void 0 ? void 0 : _b[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)
+                var cleanConfig = __assign(__assign({}, controller.config), { settings: JSON.parse(JSON.stringify(_this.initial.controller[type])) });
+                var mergedConfig = (0, deepmerge_1.default)(cleanConfig, {
+                    settings: _this.overrides.controller[type] || {},
+                });
+                controller.setConfig(mergedConfig);
+            }
+        });
+        // re-apply target overrides (component, selector, etc.)
+        ['search', 'autocomplete'].forEach(function (feature) {
+            var targetFeatureSet = _this.templatesStore.targets[feature];
+            var mergedTargets = (0, deepmerge_1.default)((0, mobx_1.toJS)(_this.initial.targets[feature]) || [], (0, mobx_1.toJS)(_this.overrides.targets[feature]) || [], { arrayMerge: utils_1.combineMerge });
+            targetFeatureSet.forEach(function (target, index) {
+                var mergedTarget = mergedTargets[index];
+                if (mergedTarget) {
+                    Object.keys(mergedTarget).forEach(function (key) {
+                        target.setValue(key, mergedTarget[key]);
+                    });
+                }
+            });
+        });
+        // apply theme changes (also persists overrides.theme)
+        this.setTheme((_e = this.overrides.theme.extends) !== null && _e !== void 0 ? _e : this.initial.theme.extends);
+    };
+    TemplateEditorStore.prototype.resetOverrides = function () {
+        this.storage.set('overrides', undefined);
+        this.setOverrides({});
+    };
+    TemplateEditorStore.prototype.setActiveDomSelector = function (selectorId) {
+        if (selectorId === null || selectorId === void 0 ? void 0 : selectorId.length) {
+            this.state.activeDomSelector = selectorId;
+            this.toggleHide(true);
+        }
+        else {
+            this.state.activeDomSelector = '';
+            this.toggleHide(false);
+        }
     };
     TemplateEditorStore.prototype.setConfigOverride = function (obj) {
         var _this = this;
@@ -138,7 +350,6 @@ var TemplateEditorStore = /** @class */ (function () {
         var updatedOverrides = removeEmptyObjects((0, deepmerge_1.default)(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(function () {
                 _this.storage.set('overrides.config', updatedOverrides);
@@ -158,24 +369,42 @@ var TemplateEditorStore = /** @class */ (function () {
         }
         this.overrides.theme = (0, deepmerge_1.default)(this.overrides.theme, updatedConfig);
         this.storage.set('overrides.theme', this.overrides.theme);
+        // update initial variables from the newly selected theme's raw definition
+        var themeDefinition = this.templatesStore.library.themes[themeName];
+        if (themeDefinition) {
+            var themeConfig = JSON.parse(JSON.stringify(this.templatesStore.config.theme || {}));
+            delete themeConfig.style;
+            this.initial.theme.variables = (0, deepmerge_1.default)(themeDefinition.variables || {}, themeConfig.variables || {});
+            // normalize colors to hexadecimal format
+            Object.keys(this.initial.theme.variables.colors).forEach(function (key) {
+                var color = _this.initial.theme.variables.colors[key];
+                _this.initial.theme.variables.colors[key] = (0, color_1.default)(color).hex();
+            });
+            this.storage.set('initial', this.initial);
+        }
+        // update all library themes with recomputed editor overrides based on the new theme's variables
+        var mergedOverrides = (0, deepmerge_1.default)(this.initial.theme || {}, this.overrides.theme || {});
+        var transformedMergedOverrides = transformThemeComponentOverrides(mergedOverrides);
+        Object.keys(this.templatesStore.themes.library).forEach(function (libThemeName) {
+            var 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(function (feature) {
             // loop through all the features (search, autocomplete, recommendations)
             if (feature == 'recommendation') {
-                var recommendationObj_1 = _this.templatesStore.targets[feature];
-                Object.keys(recommendationObj_1).forEach(function (recType) {
-                    var targetMap = recommendationObj_1[recType];
-                    Object.keys(targetMap).forEach(function (target) {
-                        var targetStore = targetMap[target];
-                        targetStore.setTheme(themeName, 'library');
+                var recommendationTargetObject_1 = _this.templatesStore.targets.recommendation;
+                Object.keys(recommendationTargetObject_1).forEach(function (recType) {
+                    var featureTargets = recommendationTargetObject_1[recType];
+                    featureTargets.forEach(function (target) {
+                        target.setTheme(themeName, 'library');
                     });
                 });
             }
             else {
-                var targetMap_1 = _this.templatesStore.targets[feature];
-                Object.keys(targetMap_1).forEach(function (target) {
-                    var targetStore = targetMap_1[target];
-                    targetStore.setTheme(themeName, 'library');
+                var featureTargets = _this.templatesStore.targets[feature];
+                featureTargets.forEach(function (target) {
+                    target.setTheme(themeName, 'library');
                 });
             }
         });
@@ -223,81 +452,165 @@ var TemplateEditorStore = /** @class */ (function () {
     };
     TemplateEditorStore.prototype.getTargets = function () {
         var storeTargets = this.templatesStore.targets;
-        var searchTargets = Object.keys(storeTargets.search || {}).map(function (target) { return ({
+        var searchTargets = storeTargets.search.map(function (target) { return ({
             type: 'search',
             target: target,
-            template: storeTargets.search[target],
-            selector: storeTargets.search[target].selector,
+            template: target.component,
+            selector: target.selector,
         }); });
-        var autocompleteTargets = Object.keys(storeTargets.autocomplete || {}).map(function (target) { return ({
+        var autocompleteTargets = storeTargets.autocomplete.map(function (target) { return ({
             type: 'autocomplete',
             target: target,
-            template: storeTargets.autocomplete[target],
-            selector: storeTargets.autocomplete[target].selector,
+            template: target.component,
+            selector: target.selector,
         }); });
-        var recommendationBundleTargets = Object.keys(storeTargets.recommendation.bundle || {}).map(function (target) { return ({
+        var recommendationBundleTargets = storeTargets.recommendation.bundle.map(function (target) { return ({
             type: 'recommendation/bundle',
             target: target,
-            template: storeTargets.recommendation.bundle[target],
-            selector: storeTargets.recommendation.bundle[target].selector,
+            template: target.component,
+            selector: target.selector,
         }); });
-        var recommendationDefaultTargets = Object.keys(storeTargets.recommendation.default || {}).map(function (target) { return ({
+        var recommendationDefaultTargets = storeTargets.recommendation.default.map(function (target) { return ({
             type: 'recommendation/default',
             target: target,
-            template: storeTargets.recommendation.default[target],
-            selector: storeTargets.recommendation.default[target].selector,
+            template: target.component,
+            selector: target.selector,
         }); });
-        var recommendationEmailTargets = Object.keys(storeTargets.recommendation.email || {}).map(function (target) { return ({
+        var recommendationEmailTargets = storeTargets.recommendation.email.map(function (target) { return ({
             type: 'recommendation/email',
             target: target,
-            template: storeTargets.recommendation.email[target],
-            selector: storeTargets.recommendation.email[target].selector,
+            template: target.component,
+            selector: target.selector,
         }); });
         var targets = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], searchTargets, true), autocompleteTargets, true), recommendationBundleTargets, true), recommendationDefaultTargets, true), recommendationEmailTargets, true);
         return targets;
     };
-    TemplateEditorStore.prototype.generateTemplatesConfig = function () {
+    TemplateEditorStore.prototype.generateTemplatesConfig = function (options) {
+        var resolveSource = function (opt) {
+            var _a, _b;
+            if (opt === undefined || opt === true)
+                return { initial: true, overrides: true };
+            if (opt === false)
+                return { initial: false, overrides: false };
+            return { initial: (_a = opt.initial) !== null && _a !== void 0 ? _a : true, overrides: (_b = opt.overrides) !== null && _b !== void 0 ? _b : true };
+        };
+        var configOpt = resolveSource(options === null || options === void 0 ? void 0 : options.config);
+        var themeExtendsOpt;
+        var themeVariablesOpt;
+        var themeOverridesOpt;
+        if ((options === null || options === void 0 ? void 0 : options.theme) === undefined || (options === null || options === void 0 ? void 0 : options.theme) === true) {
+            themeExtendsOpt = { initial: true, overrides: true };
+            themeVariablesOpt = { initial: true, overrides: true };
+            themeOverridesOpt = { initial: true, overrides: true };
+        }
+        else if ((options === null || options === void 0 ? void 0 : 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);
+        }
+        var includeTheme = themeExtendsOpt.initial ||
+            themeExtendsOpt.overrides ||
+            themeVariablesOpt.initial ||
+            themeVariablesOpt.overrides ||
+            themeOverridesOpt.initial ||
+            themeOverridesOpt.overrides;
         var originalConfig = JSON.parse(JSON.stringify(this.templatesStore.config));
         delete originalConfig.search;
         delete originalConfig.autocomplete;
         delete originalConfig.recommendation;
         delete originalConfig.components;
-        var storageConfigData = (this.storage.get('overrides.config') || {});
-        var themeConfigData = (this.storage.get('overrides.theme') || {});
-        var 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;
+        }
+        var overrideConfig = {};
+        if (configOpt.overrides) {
+            overrideConfig.config = (this.storage.get('overrides.config') || {});
+        }
+        if (includeTheme) {
+            var themeOverrideData = (this.storage.get('overrides.theme') || {});
+            var 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;
+            }
+        }
         var targets = this.getTargets();
-        var searchTargets = targets
-            .filter(function (target) { return target.type === 'search'; })
-            .map(function (target) {
-            return ({
-                selector: target.selector,
-                component: target.template.component,
-            });
-        });
-        var autocompleteTargets = targets
-            .filter(function (target) { return target.type === 'autocomplete'; })
-            .map(function (target) {
-            return ({
-                selector: target.selector,
-                component: target.template.component,
+        if ((options === null || options === void 0 ? void 0 : options.search) !== false) {
+            var searchTargets = targets
+                .filter(function (target) { return target.type === 'search'; })
+                .map(function (target) {
+                return ({
+                    selector: target.selector,
+                    component: target.target.component,
+                });
             });
-        });
-        // add search controller settings
-        if (searchTargets.length) {
-            overrideConfig.search = {
-                targets: searchTargets,
-                settings: this.overrides.controller.search || {},
-            };
+            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 === null || options === void 0 ? void 0 : options.autocomplete) !== false) {
+            var autocompleteTargets = targets
+                .filter(function (target) { return target.type === 'autocomplete'; })
+                .map(function (target) {
+                return ({
+                    selector: target.selector,
+                    component: target.target.component,
+                });
+            });
+            if (autocompleteTargets.length) {
+                overrideConfig.autocomplete = {
+                    targets: autocompleteTargets,
+                    settings: this.overrides.controller.autocomplete || {},
+                };
+            }
         }
         var config = (0, deepmerge_1.default)(originalConfig, overrideConfig);
-        return config;
+        var cleaned = removeEmptyObjects(config);
+        if (!(options === null || options === void 0 ? void 0 : options.unlocked)) {
+            delete cleaned.unlocked;
+        }
+        // reorder keys: unlocked, config, theme, search, autocomplete, then everything else
+        var orderedKeys = ['unlocked', 'config', 'theme', 'search', 'autocomplete'];
+        var ordered = {};
+        for (var _i = 0, orderedKeys_1 = orderedKeys; _i < orderedKeys_1.length; _i++) {
+            var key = orderedKeys_1[_i];
+            if (key in cleaned) {
+                ordered[key] = cleaned[key];
+            }
+        }
+        for (var _a = 0, _b = Object.keys(cleaned); _a < _b.length; _a++) {
+            var key = _b[_a];
+            if (!(key in ordered)) {
+                ordered[key] = cleaned[key];
+            }
+        }
+        return ordered;
     };
     return TemplateEditorStore;
 }());
@@ -308,6 +621,23 @@ function removeEmptyObjects(object) {
         if (obj === null || typeof obj !== 'object') {
             return obj;
         }
+        // Handle arrays differently from objects
+        if (Array.isArray(obj)) {
+            return obj
+                .map(function (item) { return cleanObj(item); })
+                .filter(function (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
         var result = {};
         Object.entries(obj).forEach(function (_a) {
             var key = _a[0], value = _a[1];
@@ -315,10 +645,10 @@ function removeEmptyObjects(object) {
             if (value === undefined)
                 return;
             if (value !== null && typeof value === 'object') {
-                // Recursively clean nested objects
+                // Recursively clean nested objects/arrays
                 var 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;
                 }
             }
@@ -333,18 +663,59 @@ 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(function (res, key, index) {
-        var _a, _b;
-        if (index === 0) {
-            return _a = {},
-                _a[key] = value,
-                _a;
+        .reduce(function (res, key) {
+        var _a;
+        // Check if key is array index notation like [0], [1], etc.
+        var arrayIndexMatch = key.match(/^\[(\d+)\]$/);
+        if (arrayIndexMatch) {
+            // Extract the index number
+            var index = parseInt(arrayIndexMatch[1], 10);
+            // Create an array with the element at the specified index
+            var arr = [];
+            arr[index] = res;
+            return arr;
         }
-        return _b = {},
-            _b[key] = res,
-            _b;
-    }, {});
+        // Regular object property
+        return _a = {},
+            _a[key] = res,
+            _a;
+    }, value);
+}
+function transformThemeComponentOverrides(theme) {
+    var overrides = theme.overrides, variables = theme.variables;
+    var result = {};
+    if (variables) {
+        result.variables = variables;
+    }
+    if (overrides === null || overrides === void 0 ? void 0 : overrides.default) {
+        result.components = overrides.default;
+    }
+    if ((overrides === null || overrides === void 0 ? void 0 : overrides.mobile) || (overrides === null || overrides === void 0 ? void 0 : overrides.tablet) || (overrides === null || overrides === void 0 ? void 0 : overrides.desktop)) {
+        result.responsive = {
+            mobile: overrides === null || overrides === void 0 ? void 0 : overrides.mobile,
+            tablet: overrides === null || overrides === void 0 ? void 0 : overrides.tablet,
+            desktop: overrides === null || overrides === void 0 ? void 0 : overrides.desktop,
+        };
+    }
+    return result;
 }