@dodlhuat/basix 1.2.1 → 1.2.3

package/js/carousel.ts

@@ -16,6 +16,7 @@ class Carousel {
     private dotsNav!: HTMLDivElement;
     private dots!: HTMLButtonElement[];
     private autoPlayTimer: number | null = null;
+    private abortController = new AbortController();
 
     constructor(elementOrSelector: string | HTMLElement, options: CarouselOptions = {}) {
         const element = typeof elementOrSelector === 'string'
@@ -96,33 +97,35 @@ class Carousel {
     }
 
     private bindEvents(): void {
-        this.nextButton.addEventListener('click', () => this.moveToNextSlide());
-        this.prevButton.addEventListener('click', () => this.moveToPrevSlide());
+        const sig = { signal: this.abortController.signal };
+
+        this.nextButton.addEventListener('click', () => this.moveToNextSlide(), sig);
+        this.prevButton.addEventListener('click', () => this.moveToPrevSlide(), sig);
 
         this.dotsNav.addEventListener('click', (e: MouseEvent) => {
             const targetDot = (e.target as HTMLElement).closest('button');
             if (!targetDot) return;
             const targetIndex = this.dots.findIndex(dot => dot === targetDot);
             this.moveToSlide(targetIndex);
-        });
+        }, sig);
 
         window.addEventListener('resize', () => {
             this.slideWidth = this.slides[0].getBoundingClientRect().width;
             this.moveToSlide(this.currentIndex, false);
-        });
+        }, sig);
 
         // Keyboard navigation
         this.root.addEventListener('keydown', (e: KeyboardEvent) => {
             if (e.key === 'ArrowLeft')  this.moveToPrevSlide();
             if (e.key === 'ArrowRight') this.moveToNextSlide();
-        });
+        }, sig);
 
         // Pause autoplay on hover / focus
         if (this.options.autoPlay) {
-            this.root.addEventListener('mouseenter', () => this.pauseAutoPlay());
-            this.root.addEventListener('mouseleave', () => this.resumeAutoPlay());
-            this.root.addEventListener('focusin',    () => this.pauseAutoPlay());
-            this.root.addEventListener('focusout',   () => this.resumeAutoPlay());
+            this.root.addEventListener('mouseenter', () => this.pauseAutoPlay(), sig);
+            this.root.addEventListener('mouseleave', () => this.resumeAutoPlay(), sig);
+            this.root.addEventListener('focusin',    () => this.pauseAutoPlay(), sig);
+            this.root.addEventListener('focusout',   () => this.resumeAutoPlay(), sig);
         }
 
         this.addTouchSupport();
@@ -171,11 +174,12 @@ class Carousel {
     private addTouchSupport(): void {
         let startX = 0;
         let isDragging = false;
+        const sig = { signal: this.abortController.signal };
 
         this.track.addEventListener('touchstart', (e: TouchEvent) => {
             startX = e.touches[0].clientX;
             isDragging = true;
-        }, { passive: true });
+        }, { passive: true, signal: this.abortController.signal });
 
         this.track.addEventListener('touchend', (e: TouchEvent) => {
             if (!isDragging) return;
@@ -186,7 +190,7 @@ class Carousel {
                 else this.moveToPrevSlide();
             }
             isDragging = false;
-        });
+        }, sig);
     }
 
     private startAutoPlay(): void {
@@ -210,6 +214,7 @@ class Carousel {
 
     public destroy(): void {
         this.pauseAutoPlay();
+        this.abortController.abort();
     }
 }
 

package/js/chart.js

@@ -1,4 +1,4 @@
-// ─── Types ──────────────────────────────────────────────────────────────────
+import { escapeHtml } from './utils.js';
 const MARGIN_XY = { top: 16, right: 24, bottom: 44, left: 52 };
 const MARGIN_BAR = { top: 8, right: 52, bottom: 24, left: 120 };
 const MARGIN_PIE = { top: 8, right: 8, bottom: 8, left: 8 };
@@ -294,7 +294,7 @@ class Chart {
             const { x: dx, y: dy } = this.polar(0, 0, 8, midAngle);
             path.addEventListener('mouseenter', (e) => {
                 path.style.transform = `translate(${dx}px, ${dy}px)`;
-                this.showTooltip(e, `<strong>${d.label}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`);
+                this.showTooltip(e, `<strong>${escapeHtml(d.label)}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`);
             }, { signal: this.abortController.signal });
             path.addEventListener('mouseleave', () => {
                 path.style.transform = '';
@@ -483,7 +483,7 @@ class Chart {
     onPoint(g, s, d, i) {
         const sig = { signal: this.abortController.signal };
         g.addEventListener('mouseenter', (e) => {
-            this.showTooltip(e, `<strong>${d.label}</strong>${s.name}: ${this.fmt(d.value)}`);
+            this.showTooltip(e, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
         }, sig);
         g.addEventListener('mousemove', (e) => this.moveTooltip(e), sig);
         g.addEventListener('mouseleave', () => this.hideTooltip(), sig);
@@ -493,7 +493,7 @@ class Chart {
         const sig = { signal: this.abortController.signal };
         rect.style.cursor = 'pointer';
         rect.addEventListener('mouseenter', (e) => {
-            this.showTooltip(e, `<strong>${d.label}</strong>${s.name}: ${this.fmt(d.value)}`);
+            this.showTooltip(e, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
         }, sig);
         rect.addEventListener('mousemove', (e) => this.moveTooltip(e), sig);
         rect.addEventListener('mouseleave', () => this.hideTooltip(), sig);

package/js/chart.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 // ─── Types ──────────────────────────────────────────────────────────────────
 
 export type ChartType  = 'line' | 'area' | 'column' | 'bar' | 'pie';
@@ -380,7 +382,7 @@ class Chart {
             path.addEventListener('mouseenter', (e) => {
                 path.style.transform = `translate(${dx}px, ${dy}px)`;
                 this.showTooltip(e as MouseEvent,
-                    `<strong>${d.label}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`
+                    `<strong>${escapeHtml(d.label)}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`
                 );
             }, { signal: this.abortController.signal });
 
@@ -589,7 +591,7 @@ class Chart {
     private onPoint(g: SVGElement, s: ChartSeries, d: ChartDataPoint, i: number): void {
         const sig = { signal: this.abortController.signal };
         g.addEventListener('mouseenter', (e) => {
-            this.showTooltip(e as MouseEvent, `<strong>${d.label}</strong>${s.name}: ${this.fmt(d.value)}`);
+            this.showTooltip(e as MouseEvent, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
         }, sig);
         g.addEventListener('mousemove', (e) => this.moveTooltip(e as MouseEvent), sig);
         g.addEventListener('mouseleave', () => this.hideTooltip(), sig);
@@ -600,7 +602,7 @@ class Chart {
         const sig = { signal: this.abortController.signal };
         rect.style.cursor = 'pointer';
         rect.addEventListener('mouseenter', (e) => {
-            this.showTooltip(e as MouseEvent, `<strong>${d.label}</strong>${s.name}: ${this.fmt(d.value)}`);
+            this.showTooltip(e as MouseEvent, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
         }, sig);
         rect.addEventListener('mousemove', (e) => this.moveTooltip(e as MouseEvent), sig);
         rect.addEventListener('mouseleave', () => this.hideTooltip(), sig);

package/js/datepicker.js

@@ -1,5 +1,6 @@
 class DatePicker {
     constructor(elementOrSelector, options = {}) {
+        this.abortController = new AbortController();
         this.input = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -52,7 +53,7 @@ class DatePicker {
         this.backdrop = document.createElement('div');
         this.backdrop.className = 'datepicker-backdrop';
         document.body.appendChild(this.backdrop);
-        this.backdrop.addEventListener('click', () => this.hide());
+        this.backdrop.addEventListener('click', () => this.hide(), { signal: this.abortController.signal });
     }
     attachEvents() {
         const toggle = (e) => {
@@ -65,12 +66,13 @@ class DatePicker {
                 this.show();
             }
         };
-        this.input?.addEventListener('click', toggle);
+        const sig = { signal: this.abortController.signal };
+        this.input?.addEventListener('click', toggle, sig);
         this.backdrop.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
             this.hide();
-        });
+        }, sig);
         this.handleDocumentClick = (e) => {
             if (this.calendar.classList.contains('mobile'))
                 return;
@@ -501,5 +503,11 @@ class DatePicker {
             this.input.value = value;
         }
     }
+    destroy() {
+        this.hide();
+        this.abortController.abort();
+        this.calendar.remove();
+        this.backdrop.remove();
+    }
 }
 export { DatePicker };

package/js/datepicker.ts

@@ -35,6 +35,7 @@ class DatePicker {
   private calendar!: HTMLDivElement;
   private backdrop!: HTMLDivElement;
   private handleDocumentClick!: (e: Event) => void;
+  private abortController = new AbortController();
 
 
   constructor(elementOrSelector: string | HTMLInputElement, options: DatePickerOptions = {}) {
@@ -102,7 +103,7 @@ class DatePicker {
     this.backdrop.className = 'datepicker-backdrop';
     document.body.appendChild(this.backdrop);
 
-    this.backdrop.addEventListener('click', () => this.hide());
+    this.backdrop.addEventListener('click', () => this.hide(), { signal: this.abortController.signal });
   }
 
   private attachEvents(): void {
@@ -117,13 +118,15 @@ class DatePicker {
       }
     };
 
-    this.input?.addEventListener('click', toggle);
+    const sig = { signal: this.abortController.signal };
+
+    this.input?.addEventListener('click', toggle, sig);
 
     this.backdrop.addEventListener('click', (e: Event) => {
       e.preventDefault();
       e.stopPropagation();
       this.hide();
-    });
+    }, sig);
 
     this.handleDocumentClick = (e: Event): void => {
       if (this.calendar.classList.contains('mobile')) return;
@@ -622,6 +625,13 @@ class DatePicker {
       this.input.value = value;
     }
   }
+
+  public destroy(): void {
+    this.hide();
+    this.abortController.abort();
+    this.calendar.remove();
+    this.backdrop.remove();
+  }
 }
 
 export { DatePicker };

package/js/docs-nav.js

@@ -39,6 +39,7 @@ const NAV = [
             { label: 'Tooltip',          href: 'overlays/tooltip.html' },
             { label: 'Bottom Sheet',     href: 'overlays/bottom-sheet.html' },
             { label: 'Toast',            href: 'overlays/toast.html' },
+            { label: 'Lightbox',         href: 'overlays/lightbox.html' },
         ],
     },
     {

package/js/editor.js

@@ -2,6 +2,7 @@ class Editor {
     constructor(options = {}) {
         this.undoStack = [];
         this.redoStack = [];
+        this.abortController = new AbortController();
         const editable = document.getElementById('editable');
         if (!editable) {
             throw new Error('Editor: #editable element not found');
@@ -35,23 +36,25 @@ class Editor {
         this.saveState();
     }
     bindToolbar() {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll('[data-cmd]').forEach(btn => {
             btn.addEventListener('click', () => {
                 const cmd = btn.dataset.cmd;
                 const val = btn.dataset.value ?? null;
                 this.exec(cmd, val);
                 this.editable.focus();
-            });
+            }, sig);
         });
     }
     bindActions() {
+        const sig = { signal: this.abortController.signal };
         document.getElementById('linkBtn')?.addEventListener('click', () => {
             const url = prompt('Enter URL:', 'https://');
             if (url)
                 this.exec('createLink', url);
-        });
+        }, sig);
         const imageFile = document.getElementById('imageFile');
-        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click());
+        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click(), sig);
         imageFile?.addEventListener('change', () => {
             const file = imageFile.files?.[0];
             if (!file)
@@ -64,7 +67,7 @@ class Editor {
             };
             reader.readAsDataURL(file);
             imageFile.value = '';
-        });
+        }, sig);
         document.getElementById('cleanBtn')?.addEventListener('click', () => {
             const sel = window.getSelection();
             if (!sel || sel.rangeCount === 0)
@@ -74,13 +77,13 @@ class Editor {
             range.deleteContents();
             range.insertNode(document.createTextNode(text));
             this.onContentChange();
-        });
-        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
-        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
+        }, sig);
+        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo(), sig);
+        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo(), sig);
         document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
             this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
-        });
+        }, sig);
         // Code action buttons — matched by position within .code-actions
         if (this.code) {
             const code = this.code;
@@ -88,27 +91,27 @@ class Editor {
             codeActions[0]?.addEventListener('click', () => {
                 this.editable.innerHTML = this.sanitizeHTML(code.value);
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[1]?.addEventListener('click', () => {
                 code.value = this.sanitizeHTML(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[2]?.addEventListener('click', () => {
                 code.value = code.value
                     .replace(/\n/g, '')
                     .replace(/>\s+</g, '><')
                     .trim();
-            });
+            }, sig);
         }
         const saveBtn = document.getElementById('saveBtn');
-        saveBtn?.addEventListener('click', () => this.downloadHTML());
+        saveBtn?.addEventListener('click', () => this.downloadHTML(), sig);
         document.getElementById('clearBtn')?.addEventListener('click', () => {
             if (confirm('Clear all content?')) {
                 this.editable.innerHTML = '';
                 this.onContentChange();
             }
-        });
+        }, sig);
     }
     bindKeyboard() {
         const saveBtn = document.getElementById('saveBtn');
@@ -147,19 +150,21 @@ class Editor {
                 e.preventDefault();
                 this.redo();
             }
-        });
+        }, { signal: this.abortController.signal });
     }
     bindEditable() {
-        this.editable.addEventListener('input', () => this.onContentChange());
+        const sig = { signal: this.abortController.signal };
+        this.editable.addEventListener('input', () => this.onContentChange(), sig);
         this.editable.addEventListener('paste', (e) => {
             e.preventDefault();
             const text = e.clipboardData?.getData('text/plain') ?? '';
             this.insertText(text);
-        });
-        this.editable.addEventListener('keyup', () => this.refreshActiveState());
-        this.editable.addEventListener('mouseup', () => this.refreshActiveState());
+        }, sig);
+        this.editable.addEventListener('keyup', () => this.refreshActiveState(), sig);
+        this.editable.addEventListener('mouseup', () => this.refreshActiveState(), sig);
     }
     bindTabs() {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll('.side-tab[data-tab]').forEach(tab => {
             tab.addEventListener('click', () => {
                 const targetId = tab.dataset.tab;
@@ -167,7 +172,7 @@ class Editor {
                 document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('active'));
                 tab.classList.add('active');
                 document.getElementById(targetId)?.classList.add('active');
-            });
+            }, sig);
         });
     }
     onContentChange() {
@@ -178,7 +183,7 @@ class Editor {
         if (this.code)
             this.code.value = this.editable.innerHTML.trim();
         if (this.preview)
-            this.preview.innerHTML = this.editable.innerHTML;
+            this.preview.innerHTML = this.sanitizeHTML(this.editable.innerHTML);
         this.updateWordCount();
     }
     updateWordCount() {
@@ -458,5 +463,8 @@ ${content}
             btn.classList.toggle('active', active);
         });
     }
+    destroy() {
+        this.abortController.abort();
+    }
 }
 export { Editor };

package/js/editor.ts

@@ -12,6 +12,7 @@ class Editor {
     private readonly wordCount: HTMLElement | null;
     private undoStack: string[] = [];
     private redoStack: string[] = [];
+    private abortController = new AbortController();
 
     constructor(options: EditorOptions = {}) {
         const editable = document.getElementById('editable');
@@ -53,24 +54,26 @@ class Editor {
     }
 
     private bindToolbar(): void {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll<HTMLElement>('[data-cmd]').forEach(btn => {
             btn.addEventListener('click', () => {
                 const cmd = btn.dataset.cmd!;
                 const val = btn.dataset.value ?? null;
                 this.exec(cmd, val);
                 this.editable.focus();
-            });
+            }, sig);
         });
     }
 
     private bindActions(): void {
+        const sig = { signal: this.abortController.signal };
         document.getElementById('linkBtn')?.addEventListener('click', () => {
             const url = prompt('Enter URL:', 'https://');
             if (url) this.exec('createLink', url);
-        });
+        }, sig);
 
         const imageFile = document.getElementById('imageFile') as HTMLInputElement;
-        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click());
+        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click(), sig);
         imageFile?.addEventListener('change', () => {
             const file = imageFile.files?.[0];
             if (!file) return;
@@ -82,7 +85,7 @@ class Editor {
             };
             reader.readAsDataURL(file);
             imageFile.value = '';
-        });
+        }, sig);
 
         document.getElementById('cleanBtn')?.addEventListener('click', () => {
             const sel = window.getSelection();
@@ -92,15 +95,15 @@ class Editor {
             range.deleteContents();
             range.insertNode(document.createTextNode(text));
             this.onContentChange();
-        });
+        }, sig);
 
-        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo());
-        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo());
+        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo(), sig);
+        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo(), sig);
 
         document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
             this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
-        });
+        }, sig);
 
         // Code action buttons — matched by position within .code-actions
         if (this.code) {
@@ -109,29 +112,29 @@ class Editor {
             codeActions[0]?.addEventListener('click', () => {
                 this.editable.innerHTML = this.sanitizeHTML(code.value);
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[1]?.addEventListener('click', () => {
                 code.value = this.sanitizeHTML(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
-            });
+            }, sig);
             codeActions[2]?.addEventListener('click', () => {
                 code.value = code.value
                     .replace(/\n/g, '')
                     .replace(/>\s+</g, '><')
                     .trim();
-            });
+            }, sig);
         }
 
         const saveBtn = document.getElementById('saveBtn');
-        saveBtn?.addEventListener('click', () => this.downloadHTML());
+        saveBtn?.addEventListener('click', () => this.downloadHTML(), sig);
 
         document.getElementById('clearBtn')?.addEventListener('click', () => {
             if (confirm('Clear all content?')) {
                 this.editable.innerHTML = '';
                 this.onContentChange();
             }
-        });
+        }, sig);
     }
 
     private bindKeyboard(): void {
@@ -154,23 +157,25 @@ class Editor {
             else if (key === 's') { e.preventDefault(); saveBtn?.click(); }
             else if (key === 'z' && !e.shiftKey) { e.preventDefault(); this.undo(); }
             else if (key === 'y' || (key === 'z' && e.shiftKey)) { e.preventDefault(); this.redo(); }
-        });
+        }, { signal: this.abortController.signal });
     }
 
     private bindEditable(): void {
-        this.editable.addEventListener('input', () => this.onContentChange());
+        const sig = { signal: this.abortController.signal };
+        this.editable.addEventListener('input', () => this.onContentChange(), sig);
 
         this.editable.addEventListener('paste', (e: ClipboardEvent) => {
             e.preventDefault();
             const text = e.clipboardData?.getData('text/plain') ?? '';
             this.insertText(text);
-        });
+        }, sig);
 
-        this.editable.addEventListener('keyup', () => this.refreshActiveState());
-        this.editable.addEventListener('mouseup', () => this.refreshActiveState());
+        this.editable.addEventListener('keyup', () => this.refreshActiveState(), sig);
+        this.editable.addEventListener('mouseup', () => this.refreshActiveState(), sig);
     }
 
     private bindTabs(): void {
+        const sig = { signal: this.abortController.signal };
         document.querySelectorAll<HTMLElement>('.side-tab[data-tab]').forEach(tab => {
             tab.addEventListener('click', () => {
                 const targetId = tab.dataset.tab!;
@@ -180,7 +185,7 @@ class Editor {
 
                 tab.classList.add('active');
                 document.getElementById(targetId)?.classList.add('active');
-            });
+            }, sig);
         });
     }
 
@@ -191,7 +196,7 @@ class Editor {
 
     private syncViews(): void {
         if (this.code)    this.code.value          = this.editable.innerHTML.trim();
-        if (this.preview) this.preview.innerHTML   = this.editable.innerHTML;
+        if (this.preview) this.preview.innerHTML   = this.sanitizeHTML(this.editable.innerHTML);
         this.updateWordCount();
     }
 
@@ -477,7 +482,10 @@ ${content}
 
             btn.classList.toggle('active', active);
         });
+    }
 
+    public destroy(): void {
+        this.abortController.abort();
     }
 }
 

package/js/file-uploader.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class FileUploader {
     constructor(elementOrSelector, config = {}) {
         this.files = new Map();
@@ -51,10 +52,10 @@ class FileUploader {
         }
         this.container = container;
         this.container.classList.add('file-uploader');
-        const dropZone = container.querySelector('#drop-zone');
-        const fileInput = container.querySelector('#file-input');
-        const fileList = container.querySelector('#file-list');
-        const uploadBtn = container.querySelector('#upload-btn');
+        const dropZone = container.querySelector('.drop-zone');
+        const fileInput = container.querySelector('.file-input');
+        const fileList = container.querySelector('.file-list');
+        const uploadBtn = container.querySelector('.upload-btn');
         if (!dropZone || !fileInput || !fileList || !uploadBtn) {
             throw new Error('Required elements not found in container');
         }
@@ -119,7 +120,7 @@ class FileUploader {
         const key = this.fileKey(file);
         const item = document.createElement('div');
         item.className = 'file-item';
-        const escapedFileName = this.escapeHtml(file.name);
+        const escapedFileName = escapeHtml(file.name);
         item.innerHTML = `
       <div class="file-item-header">
         <div class="file-info">
@@ -255,11 +256,6 @@ class FileUploader {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
     }
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
     destroy() {
         this.abortControllers.forEach(abort => abort());
         this.abortControllers.clear();

package/js/file-uploader.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface FileData {
     file: File;
     element: HTMLDivElement;
@@ -44,10 +46,10 @@ class FileUploader {
         this.container = container;
         this.container.classList.add('file-uploader');
 
-        const dropZone = container.querySelector<HTMLElement>('#drop-zone');
-        const fileInput = container.querySelector<HTMLInputElement>('#file-input');
-        const fileList = container.querySelector<HTMLElement>('#file-list');
-        const uploadBtn = container.querySelector<HTMLButtonElement>('#upload-btn');
+        const dropZone = container.querySelector<HTMLElement>('.drop-zone');
+        const fileInput = container.querySelector<HTMLInputElement>('.file-input');
+        const fileList = container.querySelector<HTMLElement>('.file-list');
+        const uploadBtn = container.querySelector<HTMLButtonElement>('.upload-btn');
 
         if (!dropZone || !fileInput || !fileList || !uploadBtn) {
             throw new Error('Required elements not found in container');
@@ -182,7 +184,7 @@ class FileUploader {
         const item = document.createElement('div');
         item.className = 'file-item';
 
-        const escapedFileName = this.escapeHtml(file.name);
+        const escapedFileName = escapeHtml(file.name);
 
         item.innerHTML = `
       <div class="file-item-header">
@@ -332,12 +334,6 @@ class FileUploader {
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
     }
 
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
     public destroy(): void {
         this.abortControllers.forEach(abort => abort());
         this.abortControllers.clear();