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

package/dist/esm/src/Templates/SnapTemplates.d.ts

@@ -1,82 +1,23 @@
 import { Snap } from '../Snap';
 import { TemplatesStore } from './Stores/TemplateStore';
-import { type SearchStoreConfigSettings, type AutocompleteStoreConfigSettings, ChatStoreConfigSettings } from '@athoscommerce/snap-store-mobx';
+import { type AutocompleteStoreConfigSettings } from '@athoscommerce/snap-store-mobx';
 import type { UrlTranslatorConfig } from '@athoscommerce/snap-url-manager';
 import type { PluginGrouping } from '@athoscommerce/snap-controller';
-import type { RecommendationInstantiatorConfigSettings, RecommendationComponentObject } from '../Instantiators/RecommendationInstantiator';
+import type { RecommendationComponentObject } from '../Instantiators/RecommendationInstantiator';
 import type { SnapFeatures } from '../types';
 import type { SnapConfig, ExtendedTarget } from '../Snap';
-import type { PluginsConfigs, PluginsConfigsUnlocked, TemplateStoreConfigConfig, TemplateStoreConfigConfigUnlocked } from './Stores/TemplateStore';
-import { LibraryImports } from './Stores/LibraryStore';
-export declare const TEMPLATE_EDIT_COOKIE = "athosEditor";
-export declare const TEMPLATE_EDITOR_PARAM = "athos-editor";
-export type SearchTargetConfig = {
-    selector: string;
-    component: keyof LibraryImports['component']['search'];
-};
-export type AutocompleteTargetConfig = {
-    selector: string;
-    inputSelector?: string;
-    component: keyof LibraryImports['component']['autocomplete'];
-};
-export type RecommendationDefaultTargetConfig = {
-    component: keyof LibraryImports['component']['recommendation']['default'];
-};
-export type RecommendationEmailTargetConfig = {
-    component: keyof LibraryImports['component']['recommendation']['email'];
-};
-export type RecommendationBundleTargetConfig = {
-    component: keyof LibraryImports['component']['recommendation']['bundle'];
-};
-export type ChatTargetConfig = {
-    selector: string;
-    component: keyof LibraryImports['component']['chat'];
-};
+import type { TemplatesStoreConfigLocked, TemplatesStoreConfigUnlocked } from './Stores/TemplateStore';
+export declare const TEMPLATE_EDITOR_COOKIE = "athosEditor";
+export declare const TEMPLATE_EDITOR_UI_PARAM = "athos-editor";
 export type SnapTemplatesConfig = SnapTemplatesConfigLocked;
-export type SnapTemplatesConfigLocked = TemplateStoreConfigConfig & {
-    unlocked?: false;
+export type SnapTemplatesConfigUnlocked = TemplatesStoreConfigUnlocked & {
+    unlocked: true;
     url?: UrlTranslatorConfig;
     features?: SnapFeatures;
-    search?: {
-        targets: SearchTargetConfig[];
-        settings?: SearchStoreConfigSettings;
-        plugins?: PluginsConfigs;
-    };
-    autocomplete?: {
-        targets: AutocompleteTargetConfig[];
-        settings?: AutocompleteStoreConfigSettings;
-        plugins?: PluginsConfigs;
-    };
-    recommendation?: {
-        email?: {
-            [profileComponentName: string]: RecommendationEmailTargetConfig;
-        };
-        default?: {
-            [profileComponentName: string]: RecommendationDefaultTargetConfig;
-        };
-        bundle?: {
-            [profileComponentName: string]: RecommendationBundleTargetConfig;
-        };
-        settings?: RecommendationInstantiatorConfigSettings;
-        plugins?: PluginsConfigs;
-    };
-    chat?: {
-        targets: ChatTargetConfig[];
-        settings?: ChatStoreConfigSettings;
-        plugins?: PluginsConfigs;
-    };
 };
-export type SnapTemplatesConfigUnlocked = Omit<SnapTemplatesConfigLocked, 'unlocked' | 'plugins' | 'search' | 'autocomplete' | 'recommendation'> & TemplateStoreConfigConfigUnlocked & {
-    unlocked: true;
-    search?: Omit<NonNullable<SnapTemplatesConfigLocked['search']>, 'plugins'> & {
-        plugins?: PluginsConfigsUnlocked;
-    };
-    autocomplete?: Omit<NonNullable<SnapTemplatesConfigLocked['autocomplete']>, 'plugins'> & {
-        plugins?: PluginsConfigsUnlocked;
-    };
-    recommendation?: Omit<NonNullable<SnapTemplatesConfigLocked['recommendation']>, 'plugins'> & {
-        plugins?: PluginsConfigsUnlocked;
-    };
+export type SnapTemplatesConfigLocked = TemplatesStoreConfigLocked & {
+    url?: UrlTranslatorConfig;
+    features?: SnapFeatures;
 };
 export declare const DEFAULT_FEATURES: SnapFeatures;
 export declare const DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS: AutocompleteStoreConfigSettings;
@@ -87,9 +28,9 @@ export declare class SnapTemplates extends Snap {
 export declare function mapBreakpoints<ControllerConfigSettings>(breakpointsKeys: number[], breakpointSettings: ControllerConfigSettings[]): {
     [key: string]: ControllerConfigSettings | Record<string, never>;
 };
-export declare const createSearchTargeters: (templateConfig: SnapTemplatesConfig | SnapTemplatesConfigUnlocked, templatesStore: TemplatesStore) => ExtendedTarget[];
-export declare const createChatTargeters: (templateConfig: SnapTemplatesConfig | SnapTemplatesConfigUnlocked, templatesStore: TemplatesStore) => ExtendedTarget[];
-export declare function createAutocompleteTargeters(templateConfig: SnapTemplatesConfig | SnapTemplatesConfigUnlocked, templatesStore: TemplatesStore): ExtendedTarget[];
+export declare const createSearchTargeters: (templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore) => ExtendedTarget[];
+export declare const createChatTargeters: (templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore) => ExtendedTarget[];
+export declare function createAutocompleteTargeters(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): ExtendedTarget[];
 export declare function createRecommendationComponentMapping(templateConfig: SnapTemplatesConfig | SnapTemplatesConfigUnlocked, templatesStore: TemplatesStore): {
     [name: string]: RecommendationComponentObject;
 };

package/dist/esm/src/Templates/SnapTemplates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,KAAK,+BAA+B,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,KAAK,EAA0C,cAAc,EAAoB,MAAM,gCAAgC,CAAC;AAC/H,OAAO,KAAK,EAAE,6BAA6B,EAAoC,MAAM,6CAA6C,CAAC;AACnI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,KAAK,EAOX,0BAA0B,EAC1B,4BAA4B,EAE5B,MAAM,wBAAwB,CAAC;AAoChC,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC;AAC5D,MAAM,MAAM,2BAA2B,GAAG,4BAA4B,GAAG;IACxE,QAAQ,EAAE,IAAI,CAAC;IACf,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG;IACpE,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAwBF,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAC;AAEjD,eAAO,MAAM,wCAAwC,EAAE,+BAItD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI;IACtC,SAAS,EAAE,cAAc,CAAC;gBACd,MAAM,EAAE,mBAAmB,GAAG,2BAA2B;CAoGrE;AAED,wBAAgB,cAAc,CAAC,wBAAwB,EACtD,eAAe,EAAE,MAAM,EAAE,EACzB,kBAAkB,EAAE,wBAAwB,EAAE,GAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;CAAE,CAKrE;AAED,eAAO,MAAM,qBAAqB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EAoCzH,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAAoB,mBAAmB,kBAAkB,cAAc,KAAG,cAAc,EA2CvH,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,GAAG,cAAc,EAAE,CAqCjI;AAED,wBAAgB,oCAAoC,CACnD,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,GAC5B;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,6BAA6B,CAAA;CAAE,CAiDnD;AAED,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EAAE,cAAc,EAAE,cAAc,GAAG,UAAU,CA0J9I;AAED,wBAAgB,aAAa,CAC5B,cAAc,EAAE,mBAAmB,GAAG,2BAA2B,EACjE,cAAc,EAAE,cAAc,EAC9B,cAAc,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,gBAAgB,GAAG,MAAM,GACpE,cAAc,EAAE,CAmFlB"}

package/dist/esm/src/Templates/SnapTemplates.js

@@ -3,10 +3,11 @@ import { render } from 'preact';
 import deepmerge from 'deepmerge';
 import { Snap } from '../Snap';
 import { TemplateSelect } from '../../components/src/components/Atoms/TemplateSelect';
-import { DomTargeter, url, cookies, version } from '@athoscommerce/snap-toolbox';
+import { DomTargeter, url, cookies, version, getContext } from '@athoscommerce/snap-toolbox';
 import { TemplatesStore } from './Stores/TemplateStore';
-export const TEMPLATE_EDIT_COOKIE = 'athosEditor';
-export const TEMPLATE_EDITOR_PARAM = 'athos-editor';
+import { combineMerge } from '../utils';
+export const TEMPLATE_EDITOR_COOKIE = 'athosEditor';
+export const TEMPLATE_EDITOR_UI_PARAM = 'athos-editor';
 export const DEFAULT_FEATURES = {};
 export const DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
     trending: {
@@ -15,61 +16,79 @@ export const DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
 };
 export class SnapTemplates extends Snap {
     constructor(config) {
+        let context = {};
+        try {
+            context = getContext(['editor']);
+        }
+        catch {
+            context = {};
+        }
+        const { editor } = context;
         const urlParams = url(window.location.href);
-        const editMode = Boolean((urlParams?.params?.query && TEMPLATE_EDITOR_PARAM in urlParams.params.query) || cookies.get(TEMPLATE_EDIT_COOKIE));
+        const editorCookieValue = cookies.get(TEMPLATE_EDITOR_COOKIE);
+        const editUIMode = Boolean((urlParams?.params?.query && TEMPLATE_EDITOR_UI_PARAM in urlParams.params.query) || editorCookieValue === 'ui' || editor?.mode === 'ui');
+        const editMode = Boolean(editorCookieValue) || editUIMode || Boolean(editor?.mode === 'headless');
         const templatesStore = new TemplatesStore({ config, settings: { editMode } });
         const snapConfig = createSnapConfig(config, templatesStore);
         super(snapConfig, { templatesStore });
         this.templates = templatesStore;
-        if (editMode) {
-            cookies.set(TEMPLATE_EDIT_COOKIE, 'true');
-            setTimeout(async () => {
+        setTimeout(async () => {
+            if (editMode) {
+                // create templateditor store
                 // preload the library
                 await templatesStore.preLoad();
-                new DomTargeter([
-                    {
-                        selector: 'body',
-                        inject: {
-                            action: 'append',
-                            element: () => {
-                                const themeEditContainer = document.createElement('div');
-                                themeEditContainer.id = 'athos-template-editor';
-                                return themeEditContainer;
+                // create editor store and register controllers
+                const TemplateEditorStore = (await import('./Stores/TemplateEditor/TemplateEditorStore')).TemplateEditorStore;
+                const templateEditorStore = new TemplateEditorStore({ templatesStore });
+                // attach to the window object
+                window.athos = window.athos || {};
+                window.athos.editor = templateEditorStore;
+                const searchController = this.controllers['search'];
+                const autocompleteController = this.controllers['autocomplete'];
+                if (searchController) {
+                    templateEditorStore.registerController(searchController);
+                }
+                if (autocompleteController) {
+                    templateEditorStore.registerController(autocompleteController);
+                }
+                // render ui editor
+                if (editUIMode) {
+                    cookies.set(TEMPLATE_EDITOR_COOKIE, 'ui');
+                    new DomTargeter([
+                        {
+                            selector: 'body',
+                            inject: {
+                                action: 'append',
+                                element: () => {
+                                    const themeEditContainer = document.createElement('div');
+                                    themeEditContainer.id = 'athos-template-editor';
+                                    return themeEditContainer;
+                                },
                             },
                         },
-                    },
-                ], async (target, elem) => {
-                    try {
-                        const TemplateEditor = (await import('../../components/src')).TemplatesEditor;
-                        const TemplateEditorStore = (await import('./Stores/TemplateEditor/TemplateEditorStore')).TemplateEditorStore;
-                        const templateEditorStore = new TemplateEditorStore({ templatesStore });
-                        const searchController = this.controllers['search'];
-                        const autocompleteController = this.controllers['autocomplete'];
-                        if (searchController) {
-                            templateEditorStore.registerController(searchController);
+                    ], async (target, elem) => {
+                        try {
+                            const TemplateEditor = (await import('../../components/src')).TemplatesEditor;
+                            render(_jsx(TemplateEditor, { templatesStore: templatesStore, editorStore: templateEditorStore, snap: this, onRemoveClick: () => {
+                                    cookies.unset(TEMPLATE_EDITOR_COOKIE);
+                                    const urlState = url(window.location.href);
+                                    delete urlState?.params.query[TEMPLATE_EDITOR_UI_PARAM];
+                                    const newUrl = urlState?.url();
+                                    if (newUrl && newUrl != window.location.href) {
+                                        window.location.href = newUrl;
+                                    }
+                                    else {
+                                        window.location.reload();
+                                    }
+                                } }), elem);
                         }
-                        if (autocompleteController) {
-                            templateEditorStore.registerController(autocompleteController);
+                        catch (error) {
+                            console.error('Error rendering TemplateEditor:', error);
                         }
-                        render(_jsx(TemplateEditor, { templatesStore: templatesStore, editorStore: templateEditorStore, snap: this, onRemoveClick: () => {
-                                cookies.unset(TEMPLATE_EDIT_COOKIE);
-                                const urlState = url(window.location.href);
-                                delete urlState?.params.query[TEMPLATE_EDITOR_PARAM];
-                                const newUrl = urlState?.url();
-                                if (newUrl && newUrl != window.location.href) {
-                                    window.location.href = newUrl;
-                                }
-                                else {
-                                    window.location.reload();
-                                }
-                            } }), elem);
-                    }
-                    catch (error) {
-                        console.error('Error rendering TemplateEditor:', error);
-                    }
-                });
-            });
-        }
+                    });
+                }
+            }
+        });
     }
 }
 export function mapBreakpoints(breakpointsKeys, breakpointSettings) {
@@ -79,40 +98,63 @@ export function mapBreakpoints(breakpointsKeys, breakpointSettings) {
     }, {});
 }
 export const createSearchTargeters = (templateConfig, templatesStore) => {
-    const targets = templateConfig.search?.targets || [];
-    return targets.map((target) => {
-        const targetId = templatesStore.addTarget('search', target);
+    // initial target configs
+    const targetConfigs = templateConfig.search?.targets || [];
+    let mergedConfigs;
+    if (templatesStore.settings.editMode) {
+        const overrideConfigs = (templatesStore.storage.get('overrides.targets.search') || []);
+        mergedConfigs = deepmerge(targetConfigs, overrideConfigs, { arrayMerge: combineMerge });
+    }
+    else {
+        mergedConfigs = targetConfigs;
+    }
+    // loop through mergedConfigs ---
+    return mergedConfigs.map((targetConfig) => {
+        const target = templatesStore.addTarget({ ...targetConfig, type: 'search' });
+        // const overrideTemplateStoreTarget = templatesStore.getTarget('search', target.index);
+        // console.log("templatesStore", templatesStore)
+        // console.log('selector', targetConfig.selector);
+        // console.log('overrideTemplateStoreTarget', overrideTemplateStoreTarget);
         const targeter = {
-            selector: target.selector,
+            selector: targetConfig.selector,
             hideTarget: true,
             component: async () => {
                 const componentImportPromises = [];
-                componentImportPromises.push(templatesStore.library.import.component.search[target.component]());
+                componentImportPromises.push(templatesStore.library.import.component.search[targetConfig.component]());
                 await Promise.all(componentImportPromises);
                 return TemplateSelect;
             },
-            props: { type: 'search', templatesStore, targetId },
+            props: { target, templatesStore },
         };
         return targeter;
     });
 };
 export const createChatTargeters = (templateConfig, templatesStore) => {
-    const targets = templateConfig.chat?.targets || [];
-    return targets.map((target) => {
-        const targetId = templatesStore.addTarget('chat', target);
+    // initial target configs
+    const targetConfigs = templateConfig.chat?.targets || [];
+    let mergedConfigs;
+    if (templatesStore.settings.editMode) {
+        const overrideConfigs = (templatesStore.storage.get('overrides.targets.chat') || []);
+        mergedConfigs = deepmerge(targetConfigs, overrideConfigs, { arrayMerge: combineMerge });
+    }
+    else {
+        mergedConfigs = targetConfigs;
+    }
+    return mergedConfigs.map((targetConfig) => {
+        const target = templatesStore.addTarget({ ...targetConfig, type: 'chat' });
         const targeter = {
-            selector: target.selector,
+            selector: targetConfig.selector,
             hideTarget: true,
             component: async () => {
                 const componentImportPromises = [];
-                componentImportPromises.push(templatesStore.library.import.component.chat[target.component]());
+                componentImportPromises.push(templatesStore.library.import.component.chat[targetConfig.component]());
                 await Promise.all(componentImportPromises);
                 return TemplateSelect;
             },
-            props: { type: 'chat', templatesStore, targetId },
+            props: { target, templatesStore },
         };
         // temporary change to allow injecting into body to append target
-        if (target.selector == 'body') {
+        if (targetConfig.selector == 'body') {
             targeter.hideTarget = false;
             targeter.inject = {
                 action: 'append',
@@ -127,22 +169,36 @@ export const createChatTargeters = (templateConfig, templatesStore) => {
     });
 };
 export function createAutocompleteTargeters(templateConfig, templatesStore) {
-    const targets = templateConfig.autocomplete?.targets || [];
-    return targets.map((target) => {
-        const targetId = templatesStore.addTarget('autocomplete', target);
+    // initial target configs
+    const targetConfigs = templateConfig.autocomplete?.targets || [];
+    let mergedConfigs;
+    if (templatesStore.settings.editMode) {
+        const overrideConfigs = (templatesStore.storage.get('overrides.targets.autocomplete') || []);
+        mergedConfigs = deepmerge(targetConfigs, overrideConfigs, { arrayMerge: combineMerge });
+    }
+    else {
+        mergedConfigs = targetConfigs;
+    }
+    // load target override from localstorage OR from the editorStore (would be better);
+    return mergedConfigs.map((targetConfig) => {
+        const target = templatesStore.addTarget({ ...targetConfig, type: 'autocomplete', selector: targetConfig.selector || targetConfig.inputSelector });
         const targeter = {
-            selector: target.selector,
+            selector: targetConfig.selector || targetConfig.inputSelector,
             component: async () => {
                 const componentImportPromises = [];
-                componentImportPromises.push(templatesStore.library.import.component.autocomplete[target.component]());
+                componentImportPromises.push(templatesStore.library.import.component.autocomplete[targetConfig.component]());
                 await Promise.all(componentImportPromises);
                 return TemplateSelect;
             },
-            props: { type: 'autocomplete', templatesStore, targetId },
+            props: {
+                target,
+                templatesStore,
+                //only set input if selector and inputSelector are different. else bind to orinalElem
+                ...(targetConfig.selector && targetConfig.selector !== targetConfig.inputSelector ? { input: targetConfig.inputSelector } : {}),
+            },
             hideTarget: true,
+            createControllerBeforeTargeting: templatesStore.settings.editMode,
         };
-        if (target.inputSelector)
-            targeter.props.input = target.inputSelector;
         return targeter;
     });
 }
@@ -152,38 +208,41 @@ export function createRecommendationComponentMapping(templateConfig, templatesSt
         .filter((key) => ['default', 'email', 'bundle'].includes(key))
         .reduce((mapping, type) => {
         const recsType = type;
-        Object.keys(templateConfig.recommendation[recsType] || {}).forEach((targetName) => {
+        Object.keys(templateConfig.recommendation[recsType] || {}).forEach((targetName, index) => {
             const type = `recommendation/${recsType}`;
-            const target = templateConfig.recommendation[recsType][targetName];
+            const targetConfig = {
+                ...templateConfig.recommendation[recsType][targetName],
+                index,
+                type,
+            };
             const mappedConfig = {
                 component: async () => {
                     const componentImportPromises = [];
                     switch (recsType) {
                         case 'default': {
                             const importLocation = templatesStore.library.import.component.recommendation.default;
-                            componentImportPromises.push(importLocation[target.component]());
+                            componentImportPromises.push(importLocation[targetConfig.component]());
                             break;
                         }
                         case 'bundle': {
                             const importLocation = templatesStore.library.import.component.recommendation.bundle;
-                            componentImportPromises.push(importLocation[target.component]());
+                            componentImportPromises.push(importLocation[targetConfig.component]());
                             break;
                         }
                         case 'email': {
                             const importLocation = templatesStore.library.import.component.recommendation.email;
-                            componentImportPromises.push(importLocation[target.component]());
+                            componentImportPromises.push(importLocation[targetConfig.component]());
                             break;
                         }
                     }
                     await Promise.all(componentImportPromises);
                     return TemplateSelect;
                 },
-                props: { type, templatesStore },
+                props: { templatesStore },
                 onTarget: function (domTarget, elem, injectedElem, controller) {
-                    target.selector = `#${controller.id}`;
-                    const targetId = templatesStore.addTarget(type, target);
+                    targetConfig.selector = `#${controller.id}`;
                     this.props = this.props || {};
-                    this.props.targetId = targetId;
+                    this.props.target = templatesStore.addTarget(targetConfig);
                 },
             };
             mapping[targetName] = mappedConfig;
@@ -243,7 +302,7 @@ export function createSnapConfig(templateConfig, templatesStore) {
             config: {
                 id: 'autocomplete',
                 plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
-                selector: templateConfig.autocomplete.targets.map((target) => target.inputSelector || target.selector).join(', '),
+                selector: templateConfig.autocomplete.targets.map((target) => target.inputSelector).join(', '),
                 settings: autocompleteControllerSettings,
             },
             targeters: createAutocompleteTargeters(templateConfig, templatesStore),

package/dist/esm/src/Templates/Stores/TargetStore.d.ts

@@ -1,20 +1,21 @@
-import { TemplateTarget, type TemplatesStoreConfigSettings, type TemplatesStoreDependencies, type TemplateThemeTypes } from './TemplateStore';
+import { TemplateTarget, type TemplateTypes, type TemplateThemeTypes } from './TemplateStore';
 export declare const GLOBAL_THEME_NAME = "global";
 type TargetStoreConfig = {
-    target: TemplateTarget;
-    dependencies: TemplatesStoreDependencies;
-    settings: TemplatesStoreConfigSettings;
+    target: TemplateTarget & {
+        index: number;
+    };
 };
 export declare class TargetStore {
+    index: number;
+    type: TemplateTypes;
     selector: string;
     component: string;
     theme: {
         location: TemplateThemeTypes;
         name: string;
     };
-    private dependencies;
     constructor(params: TargetStoreConfig);
-    setComponent(componentName: string): void;
+    setValue(name: string, value: string): void;
     setTheme(themeName: string, location: TemplateThemeTypes): void;
 }
 export {};

package/dist/esm/src/Templates/Stores/TargetStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TargetStore.d.ts","sourceRoot":"","sources":["../../../../../src/Templates/Stores/TargetStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,KAAK,4BAA4B,EAAE,KAAK,0BAA0B,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE9I,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACxB,MAAM,EAAE,cAAc,CAAC;IACvB,YAAY,EAAE,0BAA0B,CAAC;IACzC,QAAQ,EAAE,4BAA4B,CAAC;CACvC,CAAC;AACF,qBAAa,WAAW;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE;QACb,QAAQ,EAAE,kBAAkB,CAAC;QAC7B,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,CAAC,YAAY,CAA6B;gBAErC,MAAM,EAAE,iBAAiB;IAiB9B,YAAY,CAAC,aAAa,EAAE,MAAM;IAKlC,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB;CAO/D"}
+{"version":3,"file":"TargetStore.d.ts","sourceRoot":"","sources":["../../../../../src/Templates/Stores/TargetStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE9F,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACxB,MAAM,EAAE,cAAc,GAAG;QACxB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;CACF,CAAC;AACF,qBAAa,WAAW;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE;QACb,QAAQ,EAAE,kBAAkB,CAAC;QAC7B,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;gBAEU,MAAM,EAAE,iBAAiB;IAmB9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAWpC,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB;CAM/D"}

package/dist/esm/src/Templates/Stores/TargetStore.js

@@ -2,11 +2,12 @@ import { observable, makeObservable } from 'mobx';
 export const GLOBAL_THEME_NAME = 'global';
 export class TargetStore {
     constructor(params) {
-        const { target, dependencies, settings } = params;
-        this.dependencies = dependencies;
+        const { target } = params;
+        this.index = target.index;
+        this.type = target.type;
         this.selector = target.selector || '';
-        this.component = (settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.component`)) || target.component;
-        this.theme = (settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.theme`)) || {
+        this.component = target.component || '';
+        this.theme = {
             location: 'local',
             name: GLOBAL_THEME_NAME,
         };
@@ -16,15 +17,20 @@ export class TargetStore {
             theme: observable,
         });
     }
-    setComponent(componentName) {
-        this.component = componentName;
-        this.dependencies.storage.set(['templates', this.selector, 'component'], this.component);
+    setValue(name, value) {
+        switch (name) {
+            case 'selector':
+                this.selector = value;
+                break;
+            case 'component':
+                this.component = value;
+                break;
+        }
     }
     setTheme(themeName, location) {
         this.theme = {
             location,
             name: themeName,
         };
-        this.dependencies.storage.set(['templates', this.selector, 'theme'], this.theme);
     }
 }

package/dist/esm/src/Templates/Stores/TemplateEditor/TemplateEditorStore.d.ts

@@ -1,35 +1,62 @@
-import { AutocompleteStoreConfigSettings, SearchStoreConfigSettings, StorageStore } from '@athoscommerce/snap-store-mobx';
-import { TemplatesStore } from '../TemplateStore';
+import { AutocompleteStoreConfigSettings, SearchStoreConfigSettings } from '@athoscommerce/snap-store-mobx';
+import { StorageStore } from '@athoscommerce/snap-toolbox';
+import { TemplatesStore, TemplateTarget } from '../TemplateStore';
 import { AutocompleteController, SearchController } from '@athoscommerce/snap-controller';
 import type { AbstractionGroup } from '../../../types';
-import { ThemeVariables, ThemeVariablesPartial } from '../../../../components/src';
+import { ThemeVariables, ThemeVariablesPartial, ThemeResponsiveComplete } from '../../../../components/src';
 import { TargetStore } from '../TargetStore';
-import { SnapTemplatesConfig, SnapTemplatesConfigUnlocked } from '../../SnapTemplates';
+import { SnapTemplatesConfig } from '../../SnapTemplates';
 import { CurrencyCodes, LanguageCodes } from '../LibraryStore';
 export type EditorTabs = 'templates' | 'configuration';
-type EditorState = {
+type EditorStoredState = {
     hidden: boolean;
     activeTab: EditorTabs;
 };
+type EditorState = {
+    activeDomSelector: string;
+};
 type EditorControllerConfigs = {
     search?: SearchStoreConfigSettings;
     autocomplete?: AutocompleteStoreConfigSettings;
 };
+type EditorTargets = {
+    search: Partial<TemplateTarget>[];
+    autocomplete: Partial<TemplateTarget>[];
+};
 type EditorInitialThemeConfig = {
     extends: string;
     variables: ThemeVariables;
+    overrides?: ThemeResponsiveComplete;
 };
 type EditorOverridesThemeConfig = {
     extends?: string;
     variables?: ThemeVariablesPartial;
+    overrides?: ThemeResponsiveComplete;
+};
+type SourceControl = {
+    initial?: boolean;
+    overrides?: boolean;
+};
+type GenerateTemplatesConfigOptions = {
+    config?: boolean | SourceControl;
+    theme?: boolean | {
+        extends?: boolean | SourceControl;
+        variables?: boolean | SourceControl;
+        overrides?: boolean | SourceControl;
+    };
+    search?: boolean;
+    autocomplete?: boolean;
+    unlocked?: boolean;
 };
 export declare class TemplateEditorStore {
     storage: StorageStore;
+    storedState: EditorStoredState;
     state: EditorState;
     overrides: {
         config: SnapTemplatesConfig['config'];
         controller: EditorControllerConfigs;
         theme: EditorOverridesThemeConfig;
+        targets: EditorTargets;
     };
     initial: {
         config: SnapTemplatesConfig['config'] & {
@@ -38,6 +65,7 @@ export declare class TemplateEditorStore {
         };
         controller: EditorControllerConfigs;
         theme: EditorInitialThemeConfig;
+        targets: EditorTargets;
     };
     tabs: EditorTabs[];
     templatesStore: TemplatesStore;
@@ -50,12 +78,30 @@ export declare class TemplateEditorStore {
             search: AbstractionGroup<SearchController>[];
             autocomplete: AbstractionGroup<AutocompleteController>[];
         };
+        targets: {
+            search?: AbstractionGroup<number>[];
+            autocomplete?: AbstractionGroup<number>[];
+        };
     };
     constructor({ templatesStore }: {
         templatesStore: TemplatesStore;
     });
     switchTabs(tab: EditorTabs): void;
     toggleHide(hide: boolean): void;
+    setOverrides(overrides: {
+        config?: SnapTemplatesConfig['config'];
+        theme?: EditorOverridesThemeConfig;
+        search?: {
+            targets?: Partial<TemplateTarget>[];
+            settings?: SearchStoreConfigSettings;
+        };
+        autocomplete?: {
+            targets?: Partial<TemplateTarget>[];
+            settings?: AutocompleteStoreConfigSettings;
+        };
+    }): void;
+    resetOverrides(): void;
+    setActiveDomSelector(selectorId: string | null): void;
     setConfigOverride(obj: {
         path: string[];
         value: unknown;
@@ -70,14 +116,18 @@ export declare class TemplateEditorStore {
         value?: unknown;
         controller: ControllerType;
     }): void;
+    setTargetOverride: (obj: {
+        path: string[];
+        value: string | undefined;
+    }) => void;
     registerController<ControllerType extends SearchController | AutocompleteController>(controller: ControllerType): void;
     getTargets(): {
         type: string;
-        target: string;
-        template: TargetStore;
+        target: TargetStore;
+        template: string;
         selector: string;
     }[];
-    generateTemplatesConfig(): SnapTemplatesConfig | SnapTemplatesConfigUnlocked;
+    generateTemplatesConfig(options?: GenerateTemplatesConfigOptions): SnapTemplatesConfig;
 }
 export {};
 //# sourceMappingURL=TemplateEditorStore.d.ts.map