@kupola/kupola 1.4.2 → 1.4.3

package/dist/types/kupola.d.ts

@@ -468,6 +468,18 @@ declare class KupolaUtils {
 
 declare const kupolaUtils: KupolaUtils;
 
+declare const stringUtils: KupolaUtils['string'];
+declare const arrayUtils: KupolaUtils['array'];
+declare const objectUtils: KupolaUtils['object'];
+declare const numberUtils: KupolaUtils['number'];
+declare const dateUtils: KupolaUtils['date'];
+declare const validatorUtils: KupolaUtils['validator'];
+declare const cryptoUtils: KupolaUtils['crypto'];
+declare const preloadUtils: KupolaUtils['preload'];
+
+declare function debounce<T extends (...args: unknown[]) => void>(func: T, wait: number, options?: DebounceOptions): T;
+declare function throttle<T extends (...args: unknown[]) => void>(func: T, limit: number, options?: ThrottleOptions): T;
+
 declare interface FormState {
   valid: boolean;
   errors: Record<string, string>;
@@ -681,14 +693,14 @@ declare class KupolaModalElement extends HTMLElement {
   close(): void;
 }
 
-declare function createModal(options?: Record<string, unknown>): any;
-declare function confirmModal(options: Record<string, unknown> | string): any;
-declare function alertModal(options: Record<string, unknown> | string): any;
+declare function createModal(options?: Record<string, unknown>): Modal;
+declare function confirmModal(options: Record<string, unknown> | string): Modal;
+declare function alertModal(options: Record<string, unknown> | string): Modal;
 
 declare function cleanupAllDropdowns(): void;
 declare function cleanupAllSlideCaptchas(): void;
 
-declare function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function> };
+declare function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function>; subscribe: (callback: Function) => { unsubscribe: () => void } };
 
 declare class Modal {
   constructor(element: HTMLElement, options?: Record<string, unknown>);
@@ -720,7 +732,7 @@ interface KupolaHttpResponse {
   statusText?: string;
   headers: Record<string, string>;
   url?: string;
-  json(): Promise<any>;
+  json(): Promise<unknown>;
   text(): Promise<string>;
 }
 
@@ -816,16 +828,16 @@ declare function clearCache(): void;
 // Table & Pagination Components
 // ============================================================
 
-interface KupolaTableColumn {
+interface KupolaTableColumn<T = Record<string, unknown>> {
   key: string;
   title: string;
   width?: string | number;
   minWidth?: string | number;
   align?: 'left' | 'center' | 'right';
   sortable?: boolean;
-  sorter?: (a: unknown, b: unknown, order?: string) => number;
+  sorter?: (a: T, b: T, order?: string) => number;
   fixed?: 'left' | 'right';
-  render?: (value: unknown, row: unknown, index?: number) => string | HTMLElement;
+  render?: (value: unknown, row: T, index?: number) => string | HTMLElement;
   editable?: boolean;
   editType?: string;
   editOptions?: Array<{ value: string; label: string }>;
@@ -842,8 +854,8 @@ interface KupolaTableVirtualScrollOptions {
   maxHeight?: string;
 }
 
-interface KupolaTableOptions {
-  columns: KupolaTableColumn[];
+interface KupolaTableOptions<T = Record<string, unknown>> {
+  columns: KupolaTableColumn<T>[];
   rowKey?: string;
   striped?: boolean;
   bordered?: boolean;
@@ -858,31 +870,31 @@ interface KupolaTableOptions {
   showExport?: boolean;
   showPageSize?: boolean;
   selection?: 'checkbox' | 'radio';
-  expandable?: (row: unknown) => string | HTMLElement;
+  expandable?: (row: T) => string | HTMLElement;
   editable?: boolean;
   resizable?: boolean;
   draggable?: boolean;
   multiSort?: boolean;
   tree?: KupolaTableTreeOptions;
   virtualScroll?: KupolaTableVirtualScrollOptions;
-  mergeCells?: (data: unknown[]) => Array<{ row: number; col: number; rowSpan: number; colSpan: number }>;
+  mergeCells?: (data: T[]) => Array<{ row: number; col: number; rowSpan: number; colSpan: number }>;
   onSort?: (sorts: Array<{ key: string; order: string }>) => void;
   onFilter?: (text: string) => void;
-  onRowClick?: (row: unknown, index: number, event: Event) => void;
+  onRowClick?: (row: T, index: number, event: Event) => void;
   onPageChange?: (page: number, pageSize: number) => void;
-  onSelect?: (selectedKeys: unknown[], selectedRows: unknown[]) => void;
+  onSelect?: (selectedKeys: unknown[], selectedRows: T[]) => void;
   onExpand?: (key: unknown, isExpanded: boolean) => void;
-  onEditSave?: (row: unknown, colKey: string, newValue: unknown, allData: unknown[]) => void;
-  onEditCancel?: (editingCell: unknown) => void;
+  onEditSave?: (row: T, colKey: string, newValue: unknown, allData: T[]) => void;
+  onEditCancel?: (editingCell: { row: T; colKey: string; value: unknown }) => void;
   onColumnResize?: (colKey: string, newWidth: number) => void;
-  onRowDragEnd?: (movedRow: unknown, fromIndex: number, toIndex: number, newData: unknown[]) => void;
+  onRowDragEnd?: (movedRow: T, fromIndex: number, toIndex: number, newData: T[]) => void;
 }
 
-declare class KupolaTable {
-  constructor(element: HTMLElement | string, options?: KupolaTableOptions);
-  setData(data: unknown[] | { value: unknown[] | null }): void;
+declare class KupolaTable<T = Record<string, unknown>> {
+  constructor(element: HTMLElement | string, options?: KupolaTableOptions<T>);
+  setData(data: T[] | { value: T[] | null }): void;
   setLoading(loading: boolean): void;
-  setColumns(columns: KupolaTableColumn[]): void;
+  setColumns(columns: KupolaTableColumn<T>[]): void;
   setPageSize(size: number): void;
   getSortState(): { key: string | null; order: string | null } | Array<{ key: string; order: string }>;
   getPage(): { current: number; pageSize: number; total: number };
@@ -894,11 +906,11 @@ declare class KupolaTable {
   selectRow(key: unknown): void;
   deselectRow(key: unknown): void;
   getSelectedKeys(): unknown[];
-  getSelectedRows(): unknown[];
+  getSelectedRows(): T[];
   destroy(): void;
 }
 
-declare function initTable(element: HTMLElement | string, options?: KupolaTableOptions): KupolaTable;
+declare function initTable<T = Record<string, unknown>>(element: HTMLElement | string, options?: KupolaTableOptions<T>): KupolaTable<T>;
 declare function initAllTables(): KupolaTable[];
 
 interface KupolaPaginationOptions {
@@ -1334,7 +1346,7 @@ declare module 'kupola' {
   export function cleanupAllDropdowns(): void;
   export function cleanupAllSlideCaptchas(): void;
 
-  export function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function> };
+  export function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function>; subscribe: (callback: Function) => { unsubscribe: () => void } };
 
   export class Modal {
     constructor(element: HTMLElement, options?: Record<string, unknown>);
@@ -1358,7 +1370,7 @@ declare module 'kupola' {
     statusText?: string;
     headers: Record<string, string>;
     url?: string;
-    json(): Promise<any>;
+    json(): Promise<unknown>;
     text(): Promise<string>;
   }
 
@@ -1454,4 +1466,8 @@ declare module 'kupola' {
   export { KupolaTable, KupolaTableColumn, KupolaTableOptions, KupolaPagination, KupolaPaginationOptions };
   export { initTable, initAllTables, initPagination };
 
+  // Utils (tree-shakeable namespace exports)
+  export { KupolaUtils, stringUtils, arrayUtils, objectUtils, numberUtils, dateUtils };
+  export { debounce, throttle, validatorUtils, cryptoUtils, preloadUtils };
+
 }

package/js/calendar.js

@@ -1,3 +1,5 @@
+import { kupolaInitializer } from './initializer.js';
+
 class Calendar {
     constructor(element, options = {}) {
         this.element = element;
@@ -481,13 +483,4 @@ function initCalendars() {
 
 export { Calendar, initCalendars, initCalendar, cleanupCalendar };
 
-if (typeof window !== 'undefined') {
-    window.Calendar = Calendar;
-    window.initCalendar = initCalendar;
-    window.cleanupCalendar = cleanupCalendar;
-    window.initCalendars = initCalendars;
-    
-    if (window.kupolaInitializer) {
-        window.kupolaInitializer.register('calendar', initCalendar, cleanupCalendar);
-    }
-}
+kupolaInitializer.register('calendar', initCalendar, cleanupCalendar);

package/js/carousel.js

@@ -1,3 +1,5 @@
+import { kupolaInitializer } from './initializer.js';
+
 class Carousel {
   constructor(element, options = {}) {
     this.element = element;
@@ -295,13 +297,4 @@ function cleanupCarousel(element) {
 
 export { Carousel, initCarousel, initCarousels, cleanupCarousel };
 
-if (typeof window !== 'undefined') {
-  window.Carousel = Carousel;
-  window.initCarousel = initCarousel;
-  window.initCarousels = initCarousels;
-  
-  if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('carousel', initCarousel, cleanupCarousel);
-  }
-}
-
+kupolaInitializer.register('carousel', initCarousel, cleanupCarousel);

package/js/collapse.js

@@ -1,3 +1,5 @@
+import { kupolaInitializer } from './initializer.js';
+
 class Collapse {
     constructor(element, options = {}) {
         this.element = element;
@@ -229,13 +231,4 @@ function initCollapses() {
 
 export { Collapse, initCollapses, initCollapse, cleanupCollapse };
 
-if (typeof window !== 'undefined') {
-    window.Collapse = Collapse;
-    window.initCollapse = initCollapse;
-    window.cleanupCollapse = cleanupCollapse;
-    window.initCollapses = initCollapses;
-    
-    if (window.kupolaInitializer) {
-        window.kupolaInitializer.register('collapse', initCollapse, cleanupCollapse);
-    }
-}
+kupolaInitializer.register('collapse', initCollapse, cleanupCollapse);

package/js/color-picker.js

@@ -1,3 +1,6 @@
+import { globalEvents } from './global-events.js';
+import { kupolaInitializer } from './initializer.js';
+
 class ColorPicker {
     constructor(element, options = {}) {
         this.element = element;
@@ -251,11 +254,7 @@ class ColorPicker {
             }
         });
 
-        if (window.globalEvents) {
-            this._documentClickListener = window.globalEvents.on(document, 'click', this._documentClickHandler, { scope: this.scope });
-        } else {
-            document.addEventListener('click', this._documentClickHandler);
-        }
+        this._documentClickListener = globalEvents.on(document, 'click', this._documentClickHandler, { scope: this.scope });
 
         this._renderPreviousColors();
         this._renderColorPanel();
@@ -439,14 +438,4 @@ function cleanupAllColorPickers() {
 
 export { ColorPicker, initColorPicker, initColorPickers, cleanupColorPicker, cleanupAllColorPickers };
 
-if (typeof window !== 'undefined') {
-    window.ColorPicker = ColorPicker;
-    window.initColorPicker = initColorPicker;
-    window.initColorPickers = initColorPickers;
-    window.cleanupColorPicker = cleanupColorPicker;
-    window.cleanupAllColorPickers = cleanupAllColorPickers;
-    
-    if (window.kupolaInitializer) {
-        window.kupolaInitializer.register('color-picker', initColorPicker, cleanupColorPicker);
-    }
-}
+kupolaInitializer.register('color-picker', initColorPicker, cleanupColorPicker);

package/js/component.js

@@ -120,15 +120,10 @@ export class KupolaComponent {
 
       await this.lifecycle.bootstrap();
 
-      if (typeof window !== 'undefined' && window._setCurrentSetupContext && window.SetupContext) {
-        this.setupContext = new window.SetupContext(this);
-        window._setCurrentSetupContext(this.setupContext);
-        
-        if (typeof this.setup === 'function') {
-          const result = this.setup();
-          if (result instanceof Promise) {
-            await result;
-          }
+      if (typeof this.setup === 'function') {
+        const result = this.setup();
+        if (result instanceof Promise) {
+          await result;
         }
       }
 
@@ -136,10 +131,6 @@ export class KupolaComponent {
       await this.lifecycle.mount();
 
       this.setupContext?._executeMounted();
-      
-      if (typeof window !== 'undefined' && window._clearSetupContext) {
-        window._clearSetupContext();
-      }
     } catch (error) {
       console.error(`[KupolaComponent] Error mounting component "${this.constructor.name}":`, error);
       
@@ -257,9 +248,4 @@ export function applyMixin(componentClass, mixin) {
       componentClass.prototype[key] = mixin[key];
     }
   });
-}
-
-if (typeof window !== 'undefined') {
-  window.KupolaComponent = KupolaComponent;
-  window.applyMixin = applyMixin;
 }

package/js/countdown.js

@@ -1,3 +1,5 @@
+import { kupolaInitializer } from './initializer.js';
+
 class Countdown {
   constructor(element) {
     this.element = element;
@@ -133,13 +135,4 @@ function initCountdowns() {
 
 export { Countdown, initCountdowns, initCountdown, cleanupCountdown };
 
-if (typeof window !== 'undefined') {
-  window.Countdown = Countdown;
-  window.initCountdown = initCountdown;
-  window.cleanupCountdown = cleanupCountdown;
-  window.initCountdowns = initCountdowns;
-  
-  if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('countdown', initCountdown, cleanupCountdown);
-  }
-}
+kupolaInitializer.register('countdown', initCountdown, cleanupCountdown);

package/js/data-bind.js

@@ -11,13 +11,26 @@
  */
 function sanitizeHtml(html) {
   if (!html) return '';
-  const str = String(html);
-  return str
-    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-    .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
-    .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
-    .replace(/<embed\b[^>]*\/?>/gi, '')
-    .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+  let str = String(html);
+
+  // Iteratively remove dangerous tags (handles nested attempts like <scr<script>ipt>)
+  const dangerousTags = /<\s*(script|iframe|object|embed|applet|form|base|link|meta|style)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>|<\s*(script|iframe|object|embed|applet|form|base|link|meta|style)\b[^>]*\/?>/gi;
+  let prev;
+  do {
+    prev = str;
+    str = str.replace(dangerousTags, '');
+  } while (str !== prev);
+
+  // Remove event handler attributes (on* = ...)
+  str = str.replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+
+  // Remove javascript:, vbscript:, data: URIs in href/src/action attributes
+  str = str.replace(/(href|src|action|background)\s*=\s*(?:"[^"]*(?:javascript|vbscript|data)\s*:[^"]*"|'[^']*(?:javascript|vbscript|data)\s*:[^']*'|[^\s>]*(?:javascript|vbscript|data)\s*:[^\s>]*)/gi, '$1=""');
+
+  // Remove expression() in style attributes (IE CSS expression)
+  str = str.replace(/expression\s*\([^)]*\)/gi, '');
+
+  return str;
 }
 
 class TrieNode {
@@ -946,18 +959,26 @@ class KupolaDataBind {
     });
     
     if (!this._mutationObserver) {
+      this._isObserving = false;
       this._mutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach(mutation => {
-          mutation.addedNodes.forEach(node => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              const bindElements = node.querySelectorAll('[data-bind]');
-              bindElements.forEach(element => this._bindElement(element));
-              if (node.hasAttribute && node.hasAttribute('data-bind')) {
-                this._bindElement(node);
+        // Re-entry guard: skip mutations caused by _bindElement itself
+        if (this._isObserving) return;
+        this._isObserving = true;
+        try {
+          mutations.forEach(mutation => {
+            mutation.addedNodes.forEach(node => {
+              if (node.nodeType === Node.ELEMENT_NODE) {
+                const bindElements = node.querySelectorAll('[data-bind]');
+                bindElements.forEach(element => this._bindElement(element));
+                if (node.hasAttribute && node.hasAttribute('data-bind')) {
+                  this._bindElement(node);
+                }
               }
-            }
+            });
           });
-        });
+        } finally {
+          this._isObserving = false;
+        }
       });
       
       this._mutationObserver.observe(document.body, {
@@ -1052,12 +1073,12 @@ class KupolaStore {
     
     this.observers = {};
     
-    if (window.kupolaData) {
-      window.kupolaData.set(this._stateKey, initialState);
-      this.state = window.kupolaData.data?.[this._stateKey] || 
-        window.kupolaData.createReactive(initialState, this._stateKey);
+    if (kupolaData) {
+      kupolaData.set(this._stateKey, initialState);
+      this.state = kupolaData.data?.[this._stateKey] || 
+        kupolaData.createReactive(initialState, this._stateKey);
       
-      window.kupolaData.observe(this._stateKey, (newState) => {
+      kupolaData.observe(this._stateKey, (newState) => {
         this.notify(newState);
       });
     } else {
@@ -1140,8 +1161,8 @@ class KupolaStore {
       });
     }
     
-    if (window.kupolaData) {
-      window.kupolaData.set(this.name, newState);
+    if (kupolaData) {
+      kupolaData.set(this.name, newState);
     }
   }
 
@@ -1303,6 +1324,18 @@ function ref(initialValue = null) {
         }
     });
 
+    /**
+     * Subscribe to value changes.
+     * @param {Function} callback - Called with new value on change
+     * @returns {{ unsubscribe: Function }} Unsubscribe handle
+     */
+    refObj.subscribe = (callback) => {
+        refObj._subscribers.add(callback);
+        return {
+            unsubscribe() { refObj._subscribers.delete(callback); }
+        };
+    };
+
     return refObj;
 }
 
@@ -1328,16 +1361,3 @@ export { KupolaDataBind, KupolaEventBus, KupolaStore, KupolaStoreManager };
 export { kupolaData, kupolaEvents, kupolaStoreManager };
 export { createStore, getStore };
 export { ref };
-
-if (typeof window !== 'undefined') {
-  window.KupolaDataBind = KupolaDataBind;
-  window.KupolaEventBus = KupolaEventBus;
-  window.KupolaStore = KupolaStore;
-  window.KupolaStoreManager = KupolaStoreManager;
-  window.kupolaData = kupolaData;
-  window.kupolaEvents = kupolaEvents;
-  window.kupolaStoreManager = kupolaStoreManager;
-  window.createStore = createStore;
-  window.getStore = getStore;
-  window.kupolaRef = ref;
-}

package/js/datepicker.js

@@ -1,3 +1,6 @@
+import { globalEvents } from './global-events.js';
+import { kupolaInitializer } from './initializer.js';
+
 class Datepicker {
   constructor(element, options = {}) {
     this.element = element;
@@ -35,6 +38,7 @@ class Datepicker {
     
     this._iconClickHandler = null;
     this._inputClickHandler = null;
+    this._endInputClickHandler = null;
     this._documentClickHandler = null;
     this._documentClickListener = null;
     this._resizeHandler = null;
@@ -70,21 +74,17 @@ class Datepicker {
 
     if (this.icon) this.icon.addEventListener('click', this._iconClickHandler);
     if (this.input) this.input.addEventListener('click', this._inputClickHandler);
-    if (this.endInput) this.endInput.addEventListener('click', (e) => {
-      this.isSelectingEnd = true;
-      this.toggleCalendar(e);
-    });
-
-    if (window.globalEvents) {
-      this._documentClickListener = window.globalEvents.on(document, 'click', (e) => this.hideCalendar(e), { scope: this.scope });
-      this._resizeListener = window.globalEvents.on(window, 'resize', () => this.resizeHandler(), { scope: this.scope });
-    } else {
-      document.addEventListener('click', (e) => this.hideCalendar(e));
-      window.addEventListener('resize', () => this.resizeHandler());
-      this._documentClickHandler = (e) => this.hideCalendar(e);
-      this._resizeHandler = () => this.resizeHandler();
+    if (this.endInput) {
+      this._endInputClickHandler = (e) => {
+        this.isSelectingEnd = true;
+        this.toggleCalendar(e);
+      };
+      this.endInput.addEventListener('click', this._endInputClickHandler);
     }
 
+    this._documentClickListener = globalEvents.on(document, 'click', (e) => this.hideCalendar(e), { scope: this.scope });
+    this._resizeListener = globalEvents.on(window, 'resize', () => this.resizeHandler(), { scope: this.scope });
+
     // Keyboard
     this._keydownHandler = (e) => {
       if (e.key === 'Escape' && this.calendarEl.style.display === 'block') {
@@ -577,6 +577,7 @@ class Datepicker {
 
     if (this.icon && this._iconClickHandler) this.icon.removeEventListener('click', this._iconClickHandler);
     if (this.input && this._inputClickHandler) this.input.removeEventListener('click', this._inputClickHandler);
+    if (this.endInput && this._endInputClickHandler) this.endInput.removeEventListener('click', this._endInputClickHandler);
     if (this._keydownHandler) document.removeEventListener('keydown', this._keydownHandler);
 
     if (this._documentClickListener && this._documentClickListener.unsubscribe) {
@@ -603,6 +604,7 @@ class Datepicker {
     this._resizeListener = null;
     this._iconClickHandler = null;
     this._inputClickHandler = null;
+    this._endInputClickHandler = null;
     this._keydownHandler = null;
     this.element.__kupolaInitialized = false;
   }
@@ -635,14 +637,4 @@ function cleanupAllDatepickers() {
 
 export { Datepicker, initDatepicker, initDatepickers, cleanupDatepicker, cleanupAllDatepickers };
 
-if (typeof window !== 'undefined') {
-  window.Datepicker = Datepicker;
-  window.initDatepicker = initDatepicker;
-  window.initDatepickers = initDatepickers;
-  window.cleanupDatepicker = cleanupDatepicker;
-  window.cleanupAllDatepickers = cleanupAllDatepickers;
-  
-  if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('datepicker', initDatepicker, cleanupDatepicker);
-  }
-}
+kupolaInitializer.register('datepicker', initDatepicker, cleanupDatepicker);

package/js/depends.js

@@ -8,6 +8,8 @@ class Scheduler {
     constructor() {
         this._queue = new Set();
         this._scheduled = false;
+        this._flushDepth = 0;
+        this._maxDepth = 10;
     }
 
     schedule(fn) {
@@ -19,9 +21,16 @@ class Scheduler {
     }
 
     _flush() {
+        if (this._flushDepth >= this._maxDepth) {
+            console.warn('[Kupola Scheduler] Max flush depth reached, possible infinite loop detected');
+            this._queue.clear();
+            this._scheduled = false;
+            return;
+        }
         const tasks = Array.from(this._queue);
         this._queue.clear();
         this._scheduled = false;
+        this._flushDepth++;
         // Deduplicate: same function only runs once
         const seen = new Set();
         for (const task of tasks) {
@@ -30,6 +39,7 @@ class Scheduler {
                 try { task(); } catch (e) { console.error('[DependsScheduler]', e); }
             }
         }
+        this._flushDepth--;
     }
 }
 
@@ -216,7 +226,10 @@ class DependsSource {
             return result;
         } catch (error) {
             if (attempt < this.retryCount) {
-                const delay = this.retryDelay * Math.pow(2, attempt);
+                // Exponential backoff + random jitter to prevent thundering herd
+                const baseDelay = this.retryDelay * Math.pow(2, attempt);
+                const jitter = Math.random() * baseDelay * 0.5;
+                const delay = baseDelay + jitter;
                 await new Promise(resolve => setTimeout(resolve, delay));
                 return this._fetchWithRetry(params, attempt + 1);
             }
@@ -400,8 +413,11 @@ class WebSocketSource extends DependsSource {
         this.ws = null;
         this.reconnect = config.reconnect !== false;
         this.reconnectDelay = config.reconnectDelay || 3000;
+        this._reconnectAttempt = 0;
+        this._maxReconnectDelay = config.maxReconnectDelay || 30000;
         this.messageHandler = null;
         this._connected = false;
+        this._destroyed = false;
     }
 
     async fetch() {
@@ -411,6 +427,7 @@ class WebSocketSource extends DependsSource {
 
                 this.ws.onopen = () => {
                     this._connected = true;
+                    this._reconnectAttempt = 0; // Reset on successful connection
                     // Resolve with current cached data or null
                     resolve(this.cache.getStale(this.cacheKey));
                 };
@@ -432,10 +449,15 @@ class WebSocketSource extends DependsSource {
 
                 this.ws.onclose = () => {
                     this._connected = false;
-                    if (this.reconnect) {
+                    if (this.reconnect && !this._destroyed) {
+                        // Exponential backoff + jitter for reconnection
+                        const baseDelay = this.reconnectDelay * Math.pow(2, this._reconnectAttempt);
+                        const jitter = Math.random() * baseDelay * 0.3;
+                        const delay = Math.min(baseDelay + jitter, this._maxReconnectDelay);
+                        this._reconnectAttempt++;
                         setTimeout(() => {
-                            this.fetch().catch(() => {});
-                        }, this.reconnectDelay);
+                            if (!this._destroyed) this.fetch().catch(() => {});
+                        }, delay);
                     }
                 };
             } catch (e) {
@@ -451,6 +473,7 @@ class WebSocketSource extends DependsSource {
     }
 
     destroy() {
+        this._destroyed = true;
         super.destroy();
         if (this.ws) {
             this.ws.onmessage = null;
@@ -696,15 +719,3 @@ export {
 };
 
 // HTTP Client Plugin System exports are above (configureHttpClient, getHttpClient, resetHttpClient)
-
-if (typeof window !== 'undefined') {
-    window.useDeps = useDeps;
-    window.useQuery = useQuery;
-    window.clearCache = clearCache;
-    window.DependsError = DependsError;
-    window.CacheManager = CacheManager;
-    window.Scheduler = Scheduler;
-    window.configureHttpClient = configureHttpClient;
-    window.getHttpClient = getHttpClient;
-    window.resetHttpClient = resetHttpClient;
-}

package/js/dialog.js

@@ -126,8 +126,4 @@ class Dialog {
   }
 }
 
-export { Dialog };
-
-if (typeof window !== 'undefined') {
-  window.Dialog = Dialog;
-}
+export { Dialog };

package/js/drawer.js

@@ -1,3 +1,5 @@
+import { kupolaInitializer } from './initializer.js';
+
 class Drawer {
     constructor(element, options = {}) {
         this.element = element;
@@ -269,14 +271,4 @@ function initDrawers() {
 
 export { Drawer, initDrawer, initDrawers, cleanupDrawer, createDrawer };
 
-if (typeof window !== 'undefined') {
-    window.Drawer = Drawer;
-    window.initDrawer = initDrawer;
-    window.initDrawers = initDrawers;
-    window.cleanupDrawer = cleanupDrawer;
-    window.createDrawer = createDrawer;
-    
-    if (window.kupolaInitializer) {
-        window.kupolaInitializer.register('drawer', initDrawer, cleanupDrawer);
-    }
-}
+kupolaInitializer.register('drawer', initDrawer, cleanupDrawer);