selective-ui 1.1.0 → 1.1.2

package/dist/selective-ui.esm.js

@@ -1,4 +1,4 @@
-/*! Selective UI v1.1.0 | MIT License */
+/*! Selective UI v1.1.2 | MIT License */
 /**
  * @class
  */
@@ -66,6 +66,126 @@ class iStorage {
     }
 }
 
+class CallbackScheduler {
+    constructor() {
+        /**
+         * Stores callbacks by key in registration order.
+         *
+         * Notes:
+         * - Entries may become `undefined` after execution when `once` is enabled.
+         *   This preserves indices so timer bookkeeping remains stable.
+         */
+        this.executeStored = new Map();
+        /**
+         * Per-key timer registry.
+         *
+         * - Outer Map: groups timers by `TimerKey`
+         * - Inner Map: maps callback index -> active timeout handle
+         *
+         * Each callback index has its own debounce timer, allowing independent scheduling.
+         */
+        this.timerRunner = new Map();
+    }
+    /**
+     * Registers a callback under a key.
+     *
+     * @param key - Group identifier for callbacks.
+     * @param callback - Function to execute after the debounce timeout.
+     * @param options - Scheduling options.
+     * @returns The index of the registered callback within its key bucket.
+     *
+     * Behavior:
+     * - Callbacks are stored in registration order.
+     * - `options.debounce` is treated as a per-callback delay (milliseconds).
+     * - `options.once` removes the entry after its first execution (index is preserved).
+     */
+    on(key, callback, options = {}) {
+        const timeout = options.debounce ?? 50;
+        const once = options.once ?? false;
+        if (!this.executeStored.has(key))
+            this.executeStored.set(key, []);
+        const bucket = this.executeStored.get(key);
+        bucket.push({ callback, timeout, once });
+    }
+    /**
+     * Removes all callbacks associated with a key and clears any active timers.
+     *
+     * @param key - Key whose callbacks and timers will be removed.
+     */
+    off(key) {
+        const runner = this.timerRunner.get(key);
+        if (runner) {
+            for (const t of runner.values())
+                clearTimeout(t);
+            runner.clear();
+            this.timerRunner.delete(key);
+        }
+        this.executeStored.delete(key);
+    }
+    /**
+     * Schedules execution for all callbacks registered under a key.
+     *
+     * @param key - Key whose callbacks will be scheduled.
+     * @param params - Parameters collected and passed as a single payload.
+     *
+     * Payload rules:
+     * - If `run(key)` is called without params, callbacks receive `null`.
+     * - If `run(key, ...params)` is called with params, callbacks receive `params` as an array.
+     *
+     * Debounce rules:
+     * - Each callback has its own timer (by index).
+     * - Calling `run()` again before the timeout clears the previous timer for that callback.
+     *
+     * Once rules:
+     * - If an entry has `once = true`, it is removed after execution by setting its slot to `undefined`.
+     *   (The list is not spliced to preserve indices.)
+     */
+    run(key, ...params) {
+        const executes = this.executeStored.get(key);
+        if (!executes)
+            return;
+        if (!this.timerRunner.has(key))
+            this.timerRunner.set(key, new Map());
+        const runner = this.timerRunner.get(key);
+        for (let i = 0; i < executes.length; i++) {
+            const entry = executes[i];
+            if (!entry)
+                continue;
+            const prev = runner.get(i);
+            if (prev)
+                clearTimeout(prev);
+            const timer = setTimeout(() => {
+                entry.callback(params.length > 0 ? params : null);
+                if (entry.once) {
+                    // Preserve index stability by leaving an empty slot.
+                    executes[i] = undefined;
+                    // Cleanup the timer handle for this index.
+                    const current = runner.get(i);
+                    if (current)
+                        clearTimeout(current);
+                    runner.delete(i);
+                }
+            }, entry.timeout);
+            runner.set(i, timer);
+        }
+    }
+    /**
+     * Clears callbacks and timers.
+     *
+     * @param key - When provided, clears only that key; otherwise clears all keys.
+     */
+    clear(key) {
+        if (key !== undefined) {
+            this.off(key);
+            return;
+        }
+        // Iterate over a snapshot of keys because `off()` mutates the maps.
+        for (const k of Array.from(this.executeStored.keys())) {
+            this.off(k);
+        }
+    }
+}
+
 /**
  * @class
  */
@@ -80,18 +200,6 @@ class Libs {
             this._iStorage = new iStorage();
         return this._iStorage;
     }
-    /**
-     * Checks whether a value is null/undefined/empty-string/"0"/0.
-     * Booleans are always considered non-empty.
-     *
-     * @param {unknown} value - The value to test.
-     * @returns {boolean} - True if considered empty; otherwise false.
-     */
-    static isNullOrEmpty(value) {
-        if (typeof value === "boolean")
-            return false;
-        return value == null || value === "" || value === 0 || value === "0";
-    }
     /**
      * Deep-copies plain objects/arrays recursively. Returns primitives as-is.
      *
@@ -289,23 +397,6 @@ class Libs {
         }
         return recursiveTemp;
     }
-    /**
-     * Applies inline CSS styles to all matched elements. Accepts either a style
-     * object or a single property + value pair.
-     *
-     * @param {string|NodeListOf<HTMLElement>|HTMLElement} queryCommon - Selector or element(s).
-     * @param {Record<string, string>|string} styles - Style object or a single property name.
-     * @param {string|null} [value=null] - Value for the single property form.
-     */
-    static setStyle(queryCommon, styles, value = null) {
-        const apply_styles = typeof styles === "string" ? { [styles]: value } : { ...styles };
-        const queryItems = this.getElements(queryCommon);
-        for (let i = 0; i < queryItems.length; i++) {
-            const item = queryItems[i];
-            if (item)
-                Object.assign(item.style, apply_styles);
-        }
-    }
     /**
      * Builds a configuration object by copying defaults and then overriding with
      * matching element properties or data-* attributes when present.
@@ -590,41 +681,7 @@ Libs._iStorage = null;
  * Schedules and batches function executions keyed by name, with debounced timers.
  * Provides setExecute(), clearExecute(), and run() to manage deferred callbacks.
  */
-Libs.timerProcess = {
-    executeStored: {},
-    timerRunner: {},
-    setExecute(keyExecute, execute, timeout = 50, once = false) {
-        if (!this.executeStored[keyExecute])
-            this.executeStored[keyExecute] = [];
-        this.executeStored[keyExecute].push({ execute, timeout, once });
-    },
-    clearExecute(keyExecute) {
-        delete this.executeStored[keyExecute];
-    },
-    run(keyExecute, ...params) {
-        const executes = this.executeStored[keyExecute];
-        if (!executes)
-            return;
-        if (!this.timerRunner[keyExecute])
-            this.timerRunner[keyExecute] = {};
-        for (const key in executes) {
-            const entry = executes[Number(key)];
-            if (!entry)
-                continue;
-            if (!this.timerRunner[keyExecute][key]) {
-                // placeholder, will be overwritten by setTimeout
-                this.timerRunner[keyExecute][key] = setTimeout(() => { }, 0);
-                clearTimeout(this.timerRunner[keyExecute][key]);
-            }
-            clearTimeout(this.timerRunner[keyExecute][key]);
-            this.timerRunner[keyExecute][key] = setTimeout(() => {
-                entry.execute(params.length > 0 ? params : null);
-                if (entry.once)
-                    delete this.executeStored[keyExecute][Number(key)];
-            }, entry.timeout);
-        }
-    },
-};
+Libs.callbackScheduler = new CallbackScheduler();
 
 /**
  * Provides a lightweight event utility with cancel/continue control:
@@ -743,7 +800,7 @@ class Refresher {
             width = options.width;
         if (cfgHeight > 0)
             height = options.height;
-        Libs.setStyle(view, { width, height, minWidth, minHeight });
+        Object.assign(view.style, { width, height, minWidth, minHeight });
     }
 }
 
@@ -756,9 +813,6 @@ class PlaceHolder {
      * Supports HTML content based on configuration and provides methods to get or set the placeholder value.
      */
     constructor(options) {
-        /**
-         * @type {HTMLElement | null}
-         */
         this.node = null;
         this._options = null;
         if (options)
@@ -843,14 +897,9 @@ class OptionHandle {
      */
     constructor(options = null) {
         this.nodeMounted = null;
-        /**
-         * @type {HTMLDivElement | null}
-         */
         this.node = null;
         this.options = null;
-        /** @type {Function[]} */
         this._ActionOnSelectAll = [];
-        /** @type {Function[]} */
         this._ActionOnDeSelectAll = [];
         if (options)
             this.init(options);
@@ -959,9 +1008,6 @@ class EmptyState {
      * Provides methods to show/hide the state and check its visibility.
      */
     constructor(options = null) {
-        /**
-         * @type {HTMLDivElement | null}
-         */
         this.node = null;
         this.options = null;
         if (options)
@@ -1012,13 +1058,15 @@ class EmptyState {
     }
 }
 
+/**
+ * @class
+ */
 class LoadingState {
     /**
      * Represents a loading state component that displays a loading message during data fetch or processing.
      * Provides methods to show/hide the state and check its visibility.
      */
     constructor(options = null) {
-        /** @type {HTMLDivElement | null} */
         this.node = null;
         this.options = null;
         if (options)
@@ -1080,7 +1128,6 @@ class ResizeObserverService {
     constructor() {
         this.isInit = false;
         this.element = null;
-        /** @type {ResizeObserver|null} */
         this._resizeObserver = null;
         this._mutationObserver = null;
         this.isInit = true;
@@ -1210,27 +1257,17 @@ class Popup {
     constructor(select = null, options = null, modelManager = null) {
         this.options = null;
         this.isCreated = false;
-        /** @type {MixedAdapter | null} */
         this.optionAdapter = null;
-        /** @type {HTMLDivElement | null} */
         this.node = null;
-        /** @type {EffectorInterface | null} */
         this._effSvc = null;
-        /** @type {ResizeObserverService | null} */
         this._resizeObser = null;
         this._parent = null;
-        /** @type {OptionHandle | null} */
         this.optionHandle = null;
-        /** @type {EmptyState | null} */
         this.emptyState = null;
-        /** @type {LoadingState | null} */
         this.loadingState = null;
-        /** @type {RecyclerViewContract<MixedAdapter> | null} */
         this.recyclerView = null;
-        /** @type {HTMLDivElement | null} */
         this._optionsContainer = null;
         this._scrollListener = null;
-        /** @type {ReturnType<typeof setTimeout> | null} */
         this._hideLoadHandle = null;
         this._modelManager = modelManager;
         if (select && options) {
@@ -1449,6 +1486,9 @@ class Popup {
     /**
      * Enables infinite scroll by listening to container scroll events and loading more data
      * when nearing the bottom, respecting pagination state (enabled/loading/hasMore).
+     *
+     * @param searchController - Provides pagination state and a method to load more items.
+     * @param _options - Optional SelectiveOptions (reserved for future behavior tuning).
      */
     setupInfiniteScroll(searchController, _options) {
         if (!this.node)
@@ -1473,6 +1513,65 @@ class Popup {
         };
         this.node.addEventListener("scroll", this._scrollListener);
     }
+    /**
+     * Completely tear down the popup instance and release all resources.
+     *
+     * Responsibilities:
+     *  - Clear any pending timeouts and cancel animations/effects.
+     *  - Remove event listeners (scroll, mousedown) and disconnect ResizeObserver.
+     *  - Unmount and remove the DOM node; sever references to Effector/ModelManager.
+     *  - Dispose adapter/recycler and child components (OptionHandle, EmptyState, LoadingState).
+     *  - Reset flags and null out references to avoid memory leaks.
+     *
+     * Safe to call multiple times; all operations are guarded via optional chaining.
+     */
+    detroy() {
+        if (this._hideLoadHandle) {
+            clearTimeout(this._hideLoadHandle);
+            this._hideLoadHandle = null;
+        }
+        if (this.node && this._scrollListener) {
+            this.node.removeEventListener("scroll", this._scrollListener);
+            this._scrollListener = null;
+        }
+        try {
+            this._resizeObser?.disconnect();
+        }
+        catch (_) { }
+        this._resizeObser = null;
+        try {
+            this._effSvc?.setElement?.(null);
+        }
+        catch (_) { }
+        this._effSvc = null;
+        if (this.node) {
+            try {
+                const clone = this.node.cloneNode(true);
+                this.node.replaceWith(clone);
+                clone.remove();
+            }
+            catch (_) {
+                this.node.remove();
+            }
+        }
+        this.node = null;
+        this._optionsContainer = null;
+        try {
+            this._modelManager?.skipEvent?.(false);
+            this.recyclerView?.clear?.();
+            this.recyclerView = null;
+            this.optionAdapter = null;
+            this.node.remove();
+        }
+        catch (_) { }
+        this._modelManager = null;
+        this.optionHandle = null;
+        this.emptyState = null;
+        this.loadingState = null;
+        this._parent = null;
+        this.options = null;
+        this.isCreated = false;
+    }
     /**
      * Computes the parent panel's location and box metrics, including size, position,
      * padding, and border, accounting for iOS visual viewport offsets.
@@ -1578,21 +1677,9 @@ class SearchBox {
      * @param {object|null} [options=null] - Configuration (e.g., placeholder, accessibility IDs).
      */
     constructor(options = null) {
-        /**
-         * @type {MountViewResult<any> | null}
-         */
         this.nodeMounted = null;
-        /**
-         * @type {HTMLDivElement | null}
-         */
         this.node = null;
-        /**
-         * @type {HTMLInputElement | null}
-         */
         this.SearchInput = null;
-        /**
-         * @type {Function|null}
-         */
         this.onSearch = null;
         this.options = null;
         this.onNavigate = null;
@@ -1999,7 +2086,9 @@ class EffectorImpl {
             }
             else {
                 this._resizeTimeout = setTimeout(() => {
-                    this.element.style.transition = "none";
+                    if (this.element?.style) {
+                        this.element.style.transition = "none";
+                    }
                 }, duration);
             }
             Object.assign(this.element.style, styles);
@@ -2053,7 +2142,6 @@ class Model {
     constructor(options, targetElement = null, view = null) {
         /** @type {TTarget | null} */
         this.targetElement = null;
-        /** @type {TView | null} */
         this.view = null;
         this.position = -1;
         this.isInit = false;
@@ -2091,7 +2179,6 @@ class GroupModel extends Model {
     constructor(options, targetElement) {
         super(options, targetElement ?? null, null);
         this.label = "";
-        /** @type {OptionModel[]} */
         this.items = [];
         this.collapsed = false;
         this._privOnCollapsedChanged = [];
@@ -2289,7 +2376,7 @@ class OptionModel extends Model {
      * @type {boolean}
      */
     set selectedNonTrigger(value) {
-        const input = this.view?.getTag?.("OptionInput");
+        const input = this.view?.view?.tags?.OptionInput;
         const viewEl = this.view?.getView?.();
         if (input)
             input.checked = value;
@@ -2384,7 +2471,7 @@ class OptionModel extends Model {
     onTargetChanged() {
         if (!this.view)
             return;
-        const labelContent = this.view.getTag("LabelContent");
+        const labelContent = this.view.view.tags.LabelContent;
         if (labelContent) {
             if (this.options.allowHtml) {
                 labelContent.innerHTML = this.text;
@@ -2393,7 +2480,7 @@ class OptionModel extends Model {
                 labelContent.textContent = this.textContent;
             }
         }
-        const imageTag = this.view.getTag("OptionImage");
+        const imageTag = this.view.view.tags.OptionImage;
         if (imageTag && this.hasImage) {
             imageTag.src = this.imageSrc;
             imageTag.alt = this.text;
@@ -2570,7 +2657,6 @@ class ModelManager {
         });
         let currentGroup = null;
         let position = 0;
-        const changesToApply = [];
         modelData.forEach((data) => {
             if (data.tagName === "OPTGROUP") {
                 const dataVset = data;
@@ -2579,7 +2665,7 @@ class ModelManager {
                     // Label is used as key; keep original behavior.
                     const hasLabelChange = existingGroup.label !== dataVset.label;
                     if (hasLabelChange) {
-                        changesToApply.push(() => existingGroup.update(dataVset));
+                        existingGroup.update(dataVset);
                     }
                     existingGroup.position = position;
                     existingGroup.items = [];
@@ -2599,17 +2685,8 @@ class ModelManager {
                 const key = `${dataVset.value}::${dataVset.text}`;
                 const existingOption = oldOptionMap.get(key);
                 if (existingOption) {
-                    const hasSelectedChange = existingOption.selected !== dataVset.selected;
-                    const hasPositionChange = existingOption.position !== position;
-                    if (hasSelectedChange || hasPositionChange) {
-                        changesToApply.push(() => {
-                            existingOption.update(dataVset);
-                            existingOption.position = position;
-                        });
-                    }
-                    else {
-                        existingOption.position = position;
-                    }
+                    existingOption.update(dataVset);
+                    existingOption.position = position;
                     const parentGroup = dataVset["__parentGroup"];
                     if (parentGroup && currentGroup) {
                         currentGroup.addItem(existingOption);
@@ -2636,11 +2713,6 @@ class ModelManager {
                 position++;
             }
         });
-        if (changesToApply.length > 0) {
-            requestAnimationFrame(() => {
-                changesToApply.forEach((change) => change());
-            });
-        }
         oldGroupMap.forEach((removedGroup) => {
             removedGroup.view?.getView?.()?.remove?.();
         });
@@ -2683,9 +2755,6 @@ class ModelManager {
      * adapter instance, and recycler view instance.
      */
     getResources() {
-        if (!this._privAdapterHandle || !this._privRecyclerViewHandle) {
-            throw new Error("ModelManager resources not loaded. Call load() first.");
-        }
         return {
             modelList: this._privModelList,
             adapter: this._privAdapterHandle,
@@ -2720,13 +2789,7 @@ class RecyclerView {
      * @param {HTMLDivElement|null} [viewElement=null] - The root element where the adapter will render items.
      */
     constructor(viewElement = null) {
-        /**
-         * @type {HTMLDivElement|null}
-         */
         this.viewElement = null;
-        /**
-         * @type {TAdapter|null}
-         */
         this.adapter = null;
         this.viewElement = viewElement;
     }
@@ -2793,20 +2856,11 @@ class AccessoryBox {
      * @param {object|null} options - Configuration options for the accessory box (e.g., layout and behavior).
      */
     constructor(options = null) {
-        /**
-         * @type {MountViewResult<any> | null}
-         */
         this.nodeMounted = null;
-        /**
-         * @type {HTMLDivElement | null}
-         */
         this.node = null;
         this.options = null;
-        /** @type {HTMLDivElement | null} */
         this.selectUIMask = null;
-        /** @type {HTMLDivElement | null} */
         this.parentMask = null;
-        /** @type {ModelManager<MixedItem> | null} */
         this.modelManager = null;
         if (options)
             this.init(options);
@@ -3507,7 +3561,6 @@ class Adapter {
      * @param {TItem[]} [items=[]] - Initial items to be managed by the adapter.
      */
     constructor(items = []) {
-        /** @type {TItem[]} */
         this.items = [];
         this.adapterKey = Libs.randomString(12);
         this.isSkipEvent = false;
@@ -3544,7 +3597,7 @@ class Adapter {
      * @param {Function} callback - Function to execute before the property changes.
      */
     onPropChanging(propName, callback) {
-        Libs.timerProcess.setExecute(`${propName}ing_${this.adapterKey}`, callback, 1);
+        Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 1 });
     }
     /**
      * Registers a post-change callback for a property change pipeline.
@@ -3554,7 +3607,7 @@ class Adapter {
      * @param {Function} callback - Function to execute after the property changes.
      */
     onPropChanged(propName, callback) {
-        Libs.timerProcess.setExecute(`${propName}_${this.adapterKey}`, callback);
+        Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback);
     }
     /**
      * Triggers the post-change pipeline for a given property, passing optional parameters
@@ -3564,7 +3617,7 @@ class Adapter {
      * @param {...any} params - Parameters forwarded to the callbacks.
      */
     changeProp(propName, ...params) {
-        Libs.timerProcess.run(`${propName}_${this.adapterKey}`, ...params);
+        Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params);
     }
     /**
      * Triggers the pre-change pipeline for a given property, passing optional parameters
@@ -3574,7 +3627,7 @@ class Adapter {
      * @param {...any} params - Parameters forwarded to the callbacks.
      */
     changingProp(propName, ...params) {
-        Libs.timerProcess.run(`${propName}ing_${this.adapterKey}`, ...params);
+        Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params);
     }
     /**
      * Creates and returns a viewer instance for the given item within the specified parent container.
@@ -3654,9 +3707,7 @@ class View {
      * @param {HTMLElement} parent - The parent element into which this view will render.
      */
     constructor(parent) {
-        /** @type {HTMLElement|null} */
         this.parent = null;
-        /** @type {MountViewResult<TTags> | null} */
         this.view = null;
         this.parent = parent;
     }
@@ -3680,28 +3731,6 @@ class View {
             throw new Error("View is not mounted. Did you forget to set this.view?");
         return this.view.view;
     }
-    /**
-     * Retrieves a single tagged element from the mounted view.
-     *
-     * @template K
-     * @param {K} tag - The tag key corresponding to the desired element.
-     * @returns {TTags[K]} - The element associated with the provided tag key.
-     */
-    getTag(tag) {
-        if (!this.view)
-            throw new Error("View is not mounted. Did you forget to set this.view?");
-        return this.view.tags[tag];
-    }
-    /**
-     * Retrieves the full tag map for the mounted view.
-     *
-     * @returns {TTags} - An object map of all tagged elements.
-     */
-    getTags() {
-        if (!this.view)
-            throw new Error("View is not mounted. Did you forget to set this.view?");
-        return this.view.tags;
-    }
 }
 
 /**
@@ -3710,7 +3739,6 @@ class View {
 class GroupView extends View {
     constructor() {
         super(...arguments);
-        /** @type {GroupViewResult} */
         this.view = null;
     }
     /**
@@ -4158,7 +4186,7 @@ class MixedAdapter extends Adapter {
     _handleGroupView(groupModel, groupView, position) {
         super.onViewHolder(groupModel, groupView, position);
         groupModel.view = groupView;
-        const header = groupView.getTag("GroupHeader");
+        const header = groupView.view.tags.GroupHeader;
         header.textContent = groupModel.label;
         if (!groupModel.isInit) {
             header.style.cursor = "pointer";
@@ -4210,7 +4238,7 @@ class MixedAdapter extends Adapter {
         }
         optionModel.view = optionViewer;
         if (optionModel.hasImage) {
-            const imageTag = optionViewer.getTag("OptionImage");
+            const imageTag = optionViewer.view.tags.OptionImage;
             if (imageTag) {
                 if (imageTag.src !== optionModel.imageSrc)
                     imageTag.src = optionModel.imageSrc;
@@ -4218,9 +4246,9 @@ class MixedAdapter extends Adapter {
                     imageTag.alt = optionModel.text;
             }
         }
-        optionViewer.getTag("LabelContent").innerHTML = optionModel.text;
+        optionViewer.view.tags.LabelContent.innerHTML = optionModel.text;
         if (!optionModel.isInit) {
-            optionViewer.getTag("OptionView").addEventListener("click", (ev) => {
+            optionViewer.view.tags.OptionView.addEventListener("click", (ev) => {
                 ev.stopPropagation();
                 ev.preventDefault();
                 if (this.isSkipEvent)
@@ -4240,8 +4268,8 @@ class MixedAdapter extends Adapter {
                     }, 5);
                 }
             });
-            optionViewer.getTag("OptionView").title = optionModel.textContent;
-            optionViewer.getTag("OptionView").addEventListener("mouseenter", () => {
+            optionViewer.view.tags.OptionView.title = optionModel.textContent;
+            optionViewer.view.tags.OptionView.addEventListener("mouseenter", () => {
                 if (this.isSkipEvent)
                     return;
                 this.setHighlight(this.flatOptions.indexOf(optionModel), false);
@@ -4464,10 +4492,8 @@ class SelectBox {
     constructor(select = null, Selective = null) {
         this.container = {};
         this.oldValue = null;
-        /** @type {HTMLDivElement|null} */
         this.node = null;
         this.options = null;
-        /** @type {ModelManager<MixedItem, MixedAdapter> | null} */
         this.optionModelManager = null;
         this.isOpen = false;
         this.hasLoadedOnce = false;
@@ -5044,6 +5070,9 @@ class SelectBox {
         }
         return flatOptions;
     }
+    detroy() {
+        this.container.popup.detroy();
+    }
 }
 
 /**
@@ -5052,9 +5081,7 @@ class SelectBox {
 class ElementAdditionObserver {
     constructor() {
         this._isActive = false;
-        /** @type {MutationObserver|null} */
         this._observer = null;
-        /** @type {Array<(el: T) => void>} */
         this._actions = [];
     }
     /**
@@ -5139,9 +5166,9 @@ class Selective {
         merged.on.load = (merged.on.load ?? []);
         this.bindedQueries.set(query, merged);
         const doneToken = Libs.randomString();
-        Libs.timerProcess.setExecute(doneToken, () => {
+        Libs.callbackScheduler.on(doneToken, () => {
             iEvents.callEvent([this.find(query)], ...merged.on.load);
-            Libs.timerProcess.clearExecute(doneToken);
+            Libs.callbackScheduler.clear(doneToken);
             merged.on.load = [];
         });
         const selectElements = Libs.getElements(query);
@@ -5150,7 +5177,7 @@ class Selective {
                 if (item.tagName === "SELECT") {
                     Libs.removeUnbinderMap(item);
                     if (this.applySelectBox(item, merged)) {
-                        Libs.timerProcess.run(doneToken);
+                        Libs.callbackScheduler.run(doneToken);
                     }
                 }
             })();
@@ -5275,6 +5302,8 @@ class Selective {
         const bindMap = Libs.getBinderMap(selectElement);
         if (!bindMap)
             return;
+        const popup = bindMap.container?.popup;
+        popup?.detroy();
         Libs.setUnbinderMap(selectElement, bindMap);
         const wasObserving = !!this.EAObserver;
         if (wasObserving)
@@ -5415,7 +5444,6 @@ Selective.bindedQueries = new Map();
 
 /**
  * Checks for a previously loaded global library instance by name.
- * If found (with `__loaded` flag), logs a warning and returns true; otherwise
  * initializes a loading placeholder on `window[name]` and returns false.
  *
  * @param {string} LIB_NAME - The global namespace key to check on `window`.
@@ -5425,13 +5453,12 @@ function checkDuplicate(LIB_NAME) {
     if (typeof window === "undefined")
         return false;
     const existing = window[LIB_NAME];
-    if (existing && existing.__loaded) {
-        console.warn(`[${LIB_NAME}] Already loaded (v${existing.__version}). ` +
+    if (existing) {
+        console.warn(`[${LIB_NAME}] Already loaded (v${existing.version}). ` +
             `Using existing instance. Please remove duplicate <script> tags.`);
         return true;
     }
     const base = existing ?? {};
-    base.__loading = true;
     window[LIB_NAME] = base;
     return false;
 }
@@ -5449,16 +5476,14 @@ function markLoaded(name, version, api) {
     if (typeof window === "undefined")
         return;
     const ns = (window[name] ?? {});
-    ns.__loaded = true;
-    ns.__loading = false;
-    ns.__version = version;
+    ns.version = version;
     Object.assign(ns, api);
     Object.freeze(ns);
     window[name] = ns;
     console.log(`[${name}] v${version} loaded successfully`);
 }
 
-const version = "1.1.0";
+const version = "1.1.2";
 const name = "SelectiveUI";
 const alreadyLoaded = checkDuplicate(name);
 function getGlobal() {
@@ -5490,7 +5515,7 @@ function find(query) {
  * Destroys Selective instances associated with the given query.
  * Proxies to a global loaded instance if available; otherwise uses local Selective.destroy.
  */
-function destroy(query) {
+function destroy(query = null) {
     const global = getGlobal();
     if (alreadyLoaded && global)
         return global.destroy(query);
@@ -5517,11 +5542,13 @@ function effector(element) {
     return Effector(element);
 }
 if (!alreadyLoaded) {
-    let initialized = false;
+    const api = { bind, find, destroy, rebind, effector, version };
+    markLoaded(name, version, api);
+    let domInitialized = false;
     function init() {
-        if (initialized)
+        if (domInitialized)
             return;
-        initialized = true;
+        domInitialized = true;
         document.addEventListener("mousedown", () => {
             const sels = Libs.getBindedCommand();
             if (sels.length > 0) {
@@ -5531,8 +5558,6 @@ if (!alreadyLoaded) {
             }
         });
         Selective.Observer();
-        const api = { bind, find, destroy, rebind, effector, version };
-        markLoaded(name, version, api);
     }
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", init);