snice 3.8.0 → 3.9.0

package/dist/components/file-gallery/snice-file-gallery.js

@@ -0,0 +1,892 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, request, ready, render, styles, dispatch, dispose, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.file-gallery{display:flex;flex-direction:column;gap:var(--snice-spacing-md,1rem)}.drop-zone{border:2px dashed var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-lg,.5rem);padding:var(--snice-spacing-xl,2rem);background:var(--snice-color-background-element,rgb(252 251 249));cursor:pointer;transition:all var(--snice-transition-normal, 200ms) ease;position:relative}.drop-zone:hover:not(.drop-zone--disabled){border-color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-background-element-hover,rgb(249 247 245))}.drop-zone--drag-over{border-color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-primary-subtle,rgb(219 234 254))}.drop-zone--disabled{opacity:.5;cursor:not-allowed}.drop-zone--has-files{padding:var(--snice-spacing-md,1rem)}.file-input{display:none}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:var(--snice-spacing-sm,.5rem);text-align:center}.drop-zone-icon{width:3rem;height:3rem;color:var(--snice-color-text-muted,rgb(115 115 115))}.drop-zone-text{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.25rem)}.drop-zone-primary{font-size:var(--snice-font-size-base, 1rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23))}.drop-zone-secondary{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-muted,rgb(115 115 115))}.drop-zone-hint{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-muted,rgb(115 115 115))}.gallery-header{display:flex;justify-content:space-between;align-items:center;padding:var(--snice-spacing-sm,.5rem) 0}.gallery-title{font-size:var(--snice-font-size-base, 1rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23))}.gallery-actions{display:flex;gap:var(--snice-spacing-xs,.25rem)}.gallery-action-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.375rem);background:var(--snice-color-background-element,rgb(252 251 249));color:var(--snice-color-text,rgb(23 23 23));cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease}.gallery-action-button:hover{background:var(--snice-color-background-element-hover,rgb(249 247 245));border-color:var(--snice-color-border-hover,rgb(163 163 163))}.gallery-action-button svg{width:1rem;height:1rem;stroke-width:2}.gallery{display:grid;gap:var(--snice-spacing-md,1rem)}.gallery--grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}.gallery--list{grid-template-columns:1fr}.gallery-item{display:flex;flex-direction:column;border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.375rem);background:var(--snice-color-background-element,rgb(252 251 249));overflow:hidden;transition:all var(--snice-transition-fast, 150ms) ease}.gallery--list .gallery-item{flex-direction:row}.gallery-item:hover{border-color:var(--snice-color-border-hover,rgb(163 163 163));box-shadow:var(--snice-shadow-sm,0 1px 2px 0 rgb(0 0 0 / .05))}.gallery-item--uploading{border-color:var(--snice-color-primary,rgb(37 99 235))}.gallery-item--error{border-color:var(--snice-color-danger,rgb(239 68 68))}.gallery-item--completed{border-color:var(--snice-color-success,rgb(34 197 94))}.gallery-item-preview{position:relative;aspect-ratio:1;background:var(--snice-color-background,rgb(255 255 255));overflow:hidden}.gallery--list .gallery-item-preview{width:6rem;aspect-ratio:1;flex-shrink:0}.gallery-item-image{width:100%;height:100%;object-fit:cover}.gallery-item-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--snice-color-text-muted,rgb(115 115 115))}.gallery-item-placeholder svg{width:3rem;height:3rem;stroke-width:1.5}.gallery-item-progress{position:absolute;bottom:0;left:0;right:0;height:.25rem;background:var(--snice-color-background-subtle,rgb(245 245 245))}.gallery-item-progress-bar{height:100%;background:var(--snice-color-primary,rgb(37 99 235));transition:width var(--snice-transition-fast, 150ms) ease}.gallery-item-status{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.gallery-item-status svg{width:1rem;height:1rem;stroke-width:2}.gallery-item-status--success{background:var(--snice-color-success,rgb(34 197 94));color:var(--snice-color-text-inverse,rgb(250 250 250))}.gallery-item-status--error{background:var(--snice-color-danger,rgb(239 68 68));color:var(--snice-color-text-inverse,rgb(250 250 250))}.gallery-item-info{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.25rem);padding:var(--snice-spacing-sm,.5rem);flex:1;min-width:0}.gallery-item-name{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-item-badge{position:absolute;z-index:2;pointer-events:none}.gallery-item-badge--top-left{top:var(--snice-spacing-xs,.25rem);left:var(--snice-spacing-xs,.25rem)}.gallery-item-badge--top-right{top:var(--snice-spacing-xs,.25rem);right:var(--snice-spacing-xs,.25rem)}.gallery-item-badge--bottom-left{bottom:var(--snice-spacing-xs,.25rem);left:var(--snice-spacing-xs,.25rem)}.gallery-item-badge--bottom-right{bottom:var(--snice-spacing-xs,.25rem);right:var(--snice-spacing-xs,.25rem)}.gallery-item-meta{display:flex;gap:var(--snice-spacing-sm,.5rem);font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-muted,rgb(115 115 115))}.gallery-item-error{color:var(--snice-color-danger,rgb(239 68 68))}.gallery-item-progress-text{color:var(--snice-color-primary,rgb(37 99 235));font-weight:var(--snice-font-weight-medium,500)}.gallery-item-actions{display:flex;gap:var(--snice-spacing-xs,.25rem);padding:var(--snice-spacing-sm,.5rem);border-top:1px solid var(--snice-color-border,rgb(226 226 226))}.gallery--list .gallery-item-actions{border-top:none;border-left:1px solid var(--snice-color-border,rgb(226 226 226));flex-direction:column;justify-content:center;align-items:center}.gallery-item-action{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--snice-border-radius-sm,.25rem);background:0 0;color:var(--snice-color-text,rgb(23 23 23));cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease}.gallery-item-action:hover{background:var(--snice-color-background-subtle,rgb(245 245 245))}.gallery-item-action--delete{color:var(--snice-color-danger,rgb(239 68 68))}.gallery-item-action--delete:hover{background:var(--snice-color-danger-subtle,rgb(254 226 226))}.gallery-item-action svg{width:1rem;height:1rem;stroke-width:2}.gallery-item--add-button{cursor:pointer;border-style:dashed;transition:all var(--snice-transition-fast, 150ms) ease}.gallery-item--add-button:hover:not(.gallery-item--disabled){border-color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-primary-subtle,rgb(219 234 254))}.gallery-item--add-button.gallery-item--disabled{opacity:.5;cursor:not-allowed}.gallery-item-add-icon{color:var(--snice-color-primary,rgb(37 99 235))}.gallery-item--add-button .gallery-item-name{color:var(--snice-color-primary,rgb(37 99 235));text-align:center}";
+
+let SniceFileGallery = (() => {
+    let _classDecorators = [element('snice-file-gallery')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _accept_decorators;
+    let _accept_initializers = [];
+    let _accept_extraInitializers = [];
+    let _multiple_decorators;
+    let _multiple_initializers = [];
+    let _multiple_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _maxSize_decorators;
+    let _maxSize_initializers = [];
+    let _maxSize_extraInitializers = [];
+    let _maxFiles_decorators;
+    let _maxFiles_initializers = [];
+    let _maxFiles_extraInitializers = [];
+    let _view_decorators;
+    let _view_initializers = [];
+    let _view_extraInitializers = [];
+    let _showProgress_decorators;
+    let _showProgress_initializers = [];
+    let _showProgress_extraInitializers = [];
+    let _allowPause_decorators;
+    let _allowPause_initializers = [];
+    let _allowPause_extraInitializers = [];
+    let _allowDelete_decorators;
+    let _allowDelete_initializers = [];
+    let _allowDelete_extraInitializers = [];
+    let _autoUpload_decorators;
+    let _autoUpload_initializers = [];
+    let _autoUpload_extraInitializers = [];
+    let _showAddButton_decorators;
+    let _showAddButton_initializers = [];
+    let _showAddButton_extraInitializers = [];
+    let _hideAddButton_decorators;
+    let _hideAddButton_initializers = [];
+    let _hideAddButton_extraInitializers = [];
+    let _input_decorators;
+    let _input_initializers = [];
+    let _input_extraInitializers = [];
+    let _dropZone_decorators;
+    let _dropZone_initializers = [];
+    let _dropZone_extraInitializers = [];
+    let _uploadFile_decorators;
+    let _setupComponent_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    let _emitFilesChange_decorators;
+    let _emitFileRemove_decorators;
+    let _emitUploadProgress_decorators;
+    let _emitUploadComplete_decorators;
+    let _emitUploadError_decorators;
+    let _emitUploadPause_decorators;
+    let _emitError_decorators;
+    let _cleanup_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.accept = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _accept_initializers, ''));
+            this.multiple = (__runInitializers(this, _accept_extraInitializers), __runInitializers(this, _multiple_initializers, true));
+            this.disabled = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.maxSize = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _maxSize_initializers, -1)); // in bytes, -1 for unlimited
+            this.maxFiles = (__runInitializers(this, _maxSize_extraInitializers), __runInitializers(this, _maxFiles_initializers, -1)); // -1 for unlimited
+            this.view = (__runInitializers(this, _maxFiles_extraInitializers), __runInitializers(this, _view_initializers, 'grid'));
+            this.showProgress = (__runInitializers(this, _view_extraInitializers), __runInitializers(this, _showProgress_initializers, true));
+            this.allowPause = (__runInitializers(this, _showProgress_extraInitializers), __runInitializers(this, _allowPause_initializers, true));
+            this.allowDelete = (__runInitializers(this, _allowPause_extraInitializers), __runInitializers(this, _allowDelete_initializers, true));
+            this.autoUpload = (__runInitializers(this, _allowDelete_extraInitializers), __runInitializers(this, _autoUpload_initializers, true));
+            this.showAddButton = (__runInitializers(this, _autoUpload_extraInitializers), __runInitializers(this, _showAddButton_initializers, false));
+            this.hideAddButton = (__runInitializers(this, _showAddButton_extraInitializers), __runInitializers(this, _hideAddButton_initializers, false));
+            this.input = (__runInitializers(this, _hideAddButton_extraInitializers), __runInitializers(this, _input_initializers, void 0));
+            this.dropZone = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _dropZone_initializers, void 0));
+            this.galleryFiles = (__runInitializers(this, _dropZone_extraInitializers), []);
+            this.galleryCustomActions = [];
+            this.isDragOver = false;
+            this.uploadAbortControllers = new Map();
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _accept_decorators = [property()];
+            _multiple_decorators = [property({ type: Boolean })];
+            _disabled_decorators = [property({ type: Boolean })];
+            _maxSize_decorators = [property({ type: Number, attribute: 'max-size' })];
+            _maxFiles_decorators = [property({ type: Number, attribute: 'max-files' })];
+            _view_decorators = [property()];
+            _showProgress_decorators = [property({ type: Boolean, attribute: 'show-progress' })];
+            _allowPause_decorators = [property({ type: Boolean, attribute: 'allow-pause' })];
+            _allowDelete_decorators = [property({ type: Boolean, attribute: 'allow-delete' })];
+            _autoUpload_decorators = [property({ type: Boolean, attribute: 'auto-upload' })];
+            _showAddButton_decorators = [property({ type: Boolean, attribute: 'show-add-button' })];
+            _hideAddButton_decorators = [property({ type: Boolean, attribute: 'hide-add-button' })];
+            _input_decorators = [query('.file-input')];
+            _dropZone_decorators = [query('.drop-zone')];
+            _uploadFile_decorators = [request('file-gallery-upload')];
+            _setupComponent_decorators = [ready()];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            _emitFilesChange_decorators = [dispatch('@snice/files-change')];
+            _emitFileRemove_decorators = [dispatch('@snice/file-remove')];
+            _emitUploadProgress_decorators = [dispatch('@snice/upload-progress')];
+            _emitUploadComplete_decorators = [dispatch('@snice/upload-complete')];
+            _emitUploadError_decorators = [dispatch('@snice/upload-error')];
+            _emitUploadPause_decorators = [dispatch('@snice/upload-pause')];
+            _emitError_decorators = [dispatch('@snice/error')];
+            _cleanup_decorators = [dispose()];
+            __esDecorate(this, null, _uploadFile_decorators, { kind: "method", name: "uploadFile", static: false, private: false, access: { has: obj => "uploadFile" in obj, get: obj => obj.uploadFile }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _setupComponent_decorators, { kind: "method", name: "setupComponent", static: false, private: false, access: { has: obj => "setupComponent" in obj, get: obj => obj.setupComponent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitFilesChange_decorators, { kind: "method", name: "emitFilesChange", static: false, private: false, access: { has: obj => "emitFilesChange" in obj, get: obj => obj.emitFilesChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitFileRemove_decorators, { kind: "method", name: "emitFileRemove", static: false, private: false, access: { has: obj => "emitFileRemove" in obj, get: obj => obj.emitFileRemove }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitUploadProgress_decorators, { kind: "method", name: "emitUploadProgress", static: false, private: false, access: { has: obj => "emitUploadProgress" in obj, get: obj => obj.emitUploadProgress }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitUploadComplete_decorators, { kind: "method", name: "emitUploadComplete", static: false, private: false, access: { has: obj => "emitUploadComplete" in obj, get: obj => obj.emitUploadComplete }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitUploadError_decorators, { kind: "method", name: "emitUploadError", static: false, private: false, access: { has: obj => "emitUploadError" in obj, get: obj => obj.emitUploadError }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitUploadPause_decorators, { kind: "method", name: "emitUploadPause", static: false, private: false, access: { has: obj => "emitUploadPause" in obj, get: obj => obj.emitUploadPause }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitError_decorators, { kind: "method", name: "emitError", static: false, private: false, access: { has: obj => "emitError" in obj, get: obj => obj.emitError }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _accept_decorators, { kind: "field", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
+            __esDecorate(null, null, _multiple_decorators, { kind: "field", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _maxSize_decorators, { kind: "field", name: "maxSize", static: false, private: false, access: { has: obj => "maxSize" in obj, get: obj => obj.maxSize, set: (obj, value) => { obj.maxSize = value; } }, metadata: _metadata }, _maxSize_initializers, _maxSize_extraInitializers);
+            __esDecorate(null, null, _maxFiles_decorators, { kind: "field", name: "maxFiles", static: false, private: false, access: { has: obj => "maxFiles" in obj, get: obj => obj.maxFiles, set: (obj, value) => { obj.maxFiles = value; } }, metadata: _metadata }, _maxFiles_initializers, _maxFiles_extraInitializers);
+            __esDecorate(null, null, _view_decorators, { kind: "field", name: "view", static: false, private: false, access: { has: obj => "view" in obj, get: obj => obj.view, set: (obj, value) => { obj.view = value; } }, metadata: _metadata }, _view_initializers, _view_extraInitializers);
+            __esDecorate(null, null, _showProgress_decorators, { kind: "field", name: "showProgress", static: false, private: false, access: { has: obj => "showProgress" in obj, get: obj => obj.showProgress, set: (obj, value) => { obj.showProgress = value; } }, metadata: _metadata }, _showProgress_initializers, _showProgress_extraInitializers);
+            __esDecorate(null, null, _allowPause_decorators, { kind: "field", name: "allowPause", static: false, private: false, access: { has: obj => "allowPause" in obj, get: obj => obj.allowPause, set: (obj, value) => { obj.allowPause = value; } }, metadata: _metadata }, _allowPause_initializers, _allowPause_extraInitializers);
+            __esDecorate(null, null, _allowDelete_decorators, { kind: "field", name: "allowDelete", static: false, private: false, access: { has: obj => "allowDelete" in obj, get: obj => obj.allowDelete, set: (obj, value) => { obj.allowDelete = value; } }, metadata: _metadata }, _allowDelete_initializers, _allowDelete_extraInitializers);
+            __esDecorate(null, null, _autoUpload_decorators, { kind: "field", name: "autoUpload", static: false, private: false, access: { has: obj => "autoUpload" in obj, get: obj => obj.autoUpload, set: (obj, value) => { obj.autoUpload = value; } }, metadata: _metadata }, _autoUpload_initializers, _autoUpload_extraInitializers);
+            __esDecorate(null, null, _showAddButton_decorators, { kind: "field", name: "showAddButton", static: false, private: false, access: { has: obj => "showAddButton" in obj, get: obj => obj.showAddButton, set: (obj, value) => { obj.showAddButton = value; } }, metadata: _metadata }, _showAddButton_initializers, _showAddButton_extraInitializers);
+            __esDecorate(null, null, _hideAddButton_decorators, { kind: "field", name: "hideAddButton", static: false, private: false, access: { has: obj => "hideAddButton" in obj, get: obj => obj.hideAddButton, set: (obj, value) => { obj.hideAddButton = value; } }, metadata: _metadata }, _hideAddButton_initializers, _hideAddButton_extraInitializers);
+            __esDecorate(null, null, _input_decorators, { kind: "field", name: "input", static: false, private: false, access: { has: obj => "input" in obj, get: obj => obj.input, set: (obj, value) => { obj.input = value; } }, metadata: _metadata }, _input_initializers, _input_extraInitializers);
+            __esDecorate(null, null, _dropZone_decorators, { kind: "field", name: "dropZone", static: false, private: false, access: { has: obj => "dropZone" in obj, get: obj => obj.dropZone, set: (obj, value) => { obj.dropZone = value; } }, metadata: _metadata }, _dropZone_initializers, _dropZone_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        async *uploadFile(request) {
+            const response = await (yield request);
+            return response;
+        }
+        get files() {
+            return [...this.galleryFiles];
+        }
+        get customActions() {
+            return [...this.galleryCustomActions];
+        }
+        getFile(fileId) {
+            return this.galleryFiles.find(f => f.id === fileId);
+        }
+        getCustomAction(actionId) {
+            return this.galleryCustomActions.find(a => a.id === actionId);
+        }
+        isPending(fileId) {
+            const file = this.getFile(fileId);
+            return file?.uploadStatus === 'pending';
+        }
+        isUploading(fileId) {
+            const file = this.getFile(fileId);
+            return file?.uploadStatus === 'uploading';
+        }
+        isPaused(fileId) {
+            const file = this.getFile(fileId);
+            return file?.uploadStatus === 'paused';
+        }
+        isCompleted(fileId) {
+            const file = this.getFile(fileId);
+            return file?.uploadStatus === 'completed';
+        }
+        hasError(fileId) {
+            const file = this.getFile(fileId);
+            return file?.uploadStatus === 'error';
+        }
+        canAddFiles() {
+            return this.maxFiles < 0 || this.galleryFiles.length < this.maxFiles;
+        }
+        setupComponent() {
+            // Use microtask to ensure render has completed
+            queueMicrotask(() => {
+                this.galleryContainer = this.shadowRoot?.querySelector('.gallery');
+                this.galleryHeader = this.shadowRoot?.querySelector('.gallery-header');
+                this.dropZone = this.shadowRoot?.querySelector('.drop-zone');
+                // Always render initial gallery to show add button or files
+                this.updateGalleryDOM();
+            });
+        }
+        updateGalleryDOM() {
+            if (!this.galleryContainer)
+                return;
+            this.galleryContainer.innerHTML = '';
+            // Add file items
+            for (const file of this.galleryFiles) {
+                const elem = this.createFileItem(file);
+                this.galleryContainer.appendChild(elem);
+            }
+            // Add "add files" button if in that mode (unless explicitly hidden)
+            if (this.showAddButton && !this.hideAddButton) {
+                const addBtn = this.createAddButton();
+                this.galleryContainer.appendChild(addBtn);
+            }
+            // Add custom action buttons
+            for (const action of this.galleryCustomActions) {
+                const elem = this.createCustomAction(action);
+                this.galleryContainer.appendChild(elem);
+            }
+            // Update header
+            this.updateHeaderDOM();
+        }
+        updateHeaderDOM() {
+            if (!this.galleryHeader)
+                return;
+            if (this.galleryFiles.length === 0) {
+                this.galleryHeader.innerHTML = '';
+                return;
+            }
+            this.galleryHeader.innerHTML = `
+      <div class="gallery-title">${this.galleryFiles.length} file${this.galleryFiles.length !== 1 ? 's' : ''}</div>
+      <div class="gallery-actions">
+        <button class="gallery-action-button" data-action="toggle-view" title="Toggle view">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            ${this.view === 'grid' ? `
+              <rect x="3" y="3" width="7" height="7" stroke-width="2"/>
+              <rect x="14" y="3" width="7" height="7" stroke-width="2"/>
+              <rect x="3" y="14" width="7" height="7" stroke-width="2"/>
+              <rect x="14" y="14" width="7" height="7" stroke-width="2"/>
+            ` : `
+              <line x1="8" y1="6" x2="21" y2="6" stroke-width="2" stroke-linecap="round"/>
+              <line x1="8" y1="12" x2="21" y2="12" stroke-width="2" stroke-linecap="round"/>
+              <line x1="8" y1="18" x2="21" y2="18" stroke-width="2" stroke-linecap="round"/>
+              <line x1="3" y1="6" x2="3.01" y2="6" stroke-width="2" stroke-linecap="round"/>
+              <line x1="3" y1="12" x2="3.01" y2="12" stroke-width="2" stroke-linecap="round"/>
+              <line x1="3" y1="18" x2="3.01" y2="18" stroke-width="2" stroke-linecap="round"/>
+            `}
+          </svg>
+        </button>
+        ${this.allowDelete ? `
+          <button class="gallery-action-button" data-action="clear-all" title="Clear all">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <polyline points="3 6 5 6 21 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        ` : ''}
+      </div>
+    `;
+            // Attach event listeners
+            const toggleBtn = this.galleryHeader.querySelector('[data-action="toggle-view"]');
+            toggleBtn?.addEventListener('click', () => this.handleViewToggle());
+            const clearBtn = this.galleryHeader.querySelector('[data-action="clear-all"]');
+            clearBtn?.addEventListener('click', () => this.handleClearAll());
+        }
+        updateFileItemDOM(fileId) {
+            if (!this.galleryContainer)
+                return;
+            const file = this.galleryFiles.find(f => f.id === fileId);
+            if (!file)
+                return;
+            const existingElem = this.galleryContainer.querySelector(`[data-file-id="${fileId}"]`);
+            if (!existingElem)
+                return;
+            const newElem = this.createFileItem(file);
+            existingElem.replaceWith(newElem);
+        }
+        createFileItem(file) {
+            const item = document.createElement('div');
+            item.className = `gallery-item gallery-item--${file.uploadStatus}`;
+            item.setAttribute('data-file-id', file.id);
+            const isImage = file.file.type.startsWith('image/');
+            const canPause = this.allowPause && file.uploadStatus === 'uploading';
+            const canResume = this.allowPause && file.uploadStatus === 'paused';
+            const canRetry = file.uploadStatus === 'error';
+            item.innerHTML = `
+      <div class="gallery-item-preview">
+        ${isImage && file.preview ? `
+          <img src="${file.preview}" alt="${file.file.name}" class="gallery-item-image" />
+        ` : `
+          <div class="gallery-item-placeholder">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <polyline points="13 2 13 9 20 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        `}
+        ${file.badge ? `
+          <div class="gallery-item-badge gallery-item-badge--${file.badgePosition || 'top-right'}">
+            ${file.badge}
+          </div>
+        ` : ''}
+        ${this.showProgress && file.uploadStatus === 'uploading' ? `
+          <div class="gallery-item-progress">
+            <div class="gallery-item-progress-bar" style="width: ${file.uploadProgress}%"></div>
+          </div>
+        ` : ''}
+        ${file.uploadStatus === 'completed' ? `
+          <div class="gallery-item-status gallery-item-status--success">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <polyline points="20 6 9 17 4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        ` : ''}
+        ${file.uploadStatus === 'error' ? `
+          <div class="gallery-item-status gallery-item-status--error">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <circle cx="12" cy="12" r="10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <line x1="12" y1="8" x2="12" y2="12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        ` : ''}
+      </div>
+      <div class="gallery-item-info">
+        <div class="gallery-item-name" title="${file.file.name}">
+          ${file.file.name}
+        </div>
+        <div class="gallery-item-meta">
+          <span class="gallery-item-size">${this.formatFileSize(file.file.size)}</span>
+          ${file.uploadStatus === 'uploading' && this.showProgress ? `
+            <span class="gallery-item-progress-text">${file.uploadProgress}%</span>
+          ` : ''}
+          ${file.uploadStatus === 'error' && file.error ? `
+            <span class="gallery-item-error" title="${file.error}">Upload failed</span>
+          ` : ''}
+        </div>
+      </div>
+      <div class="gallery-item-actions">
+        ${canPause ? `
+          <button class="gallery-item-action" data-action="pause" title="Pause upload">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <rect x="6" y="4" width="4" height="16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <rect x="14" y="4" width="4" height="16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        ` : ''}
+        ${canResume ? `
+          <button class="gallery-item-action" data-action="resume" title="Resume upload">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <polygon points="5 3 19 12 5 21 5 3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        ` : ''}
+        ${canRetry ? `
+          <button class="gallery-item-action" data-action="retry" title="Retry upload">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <polyline points="23 4 23 10 17 10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        ` : ''}
+        ${this.allowDelete ? `
+          <button class="gallery-item-action gallery-item-action--delete" data-action="delete" title="Remove file">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <line x1="18" y1="6" x2="6" y2="18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <line x1="6" y1="6" x2="18" y2="18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        ` : ''}
+      </div>
+    `;
+            // Attach event listeners
+            const pauseBtn = item.querySelector('[data-action="pause"]');
+            pauseBtn?.addEventListener('click', () => this.pauseUpload(file.id));
+            const resumeBtn = item.querySelector('[data-action="resume"]');
+            resumeBtn?.addEventListener('click', () => this.resumeUpload(file.id));
+            const retryBtn = item.querySelector('[data-action="retry"]');
+            retryBtn?.addEventListener('click', () => this.retryUpload(file.id));
+            const deleteBtn = item.querySelector('[data-action="delete"]');
+            deleteBtn?.addEventListener('click', () => this.removeFile(file.id));
+            return item;
+        }
+        createAddButton() {
+            const canAdd = this.maxFiles < 0 || this.galleryFiles.length < this.maxFiles;
+            const item = document.createElement('div');
+            item.className = `gallery-item gallery-item--add-button ${canAdd ? '' : 'gallery-item--disabled'}`;
+            item.title = canAdd ? 'Add files' : 'Maximum files reached';
+            item.innerHTML = `
+      <div class="gallery-item-preview">
+        <div class="gallery-item-placeholder gallery-item-add-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <line x1="12" y1="5" x2="12" y2="19" stroke-width="2" stroke-linecap="round"/>
+            <line x1="5" y1="12" x2="19" y2="12" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+      <div class="gallery-item-info">
+        <div class="gallery-item-name">Add files</div>
+      </div>
+    `;
+            if (canAdd) {
+                item.addEventListener('click', () => this.handleDropZoneClick());
+            }
+            return item;
+        }
+        createCustomAction(action) {
+            const item = document.createElement('div');
+            item.className = 'gallery-item gallery-item--add-button';
+            item.title = action.text;
+            const iconContent = action.icon
+                .replace(/<svg[^>]*>/, '')
+                .replace(/<\/svg>$/, '')
+                .trim();
+            item.innerHTML = `
+      <div class="gallery-item-preview">
+        <div class="gallery-item-placeholder gallery-item-add-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            ${iconContent}
+          </svg>
+        </div>
+      </div>
+      <div class="gallery-item-info">
+        <div class="gallery-item-name">${action.text}</div>
+      </div>
+    `;
+            item.addEventListener('click', () => this.handleCustomActionClick(action.id));
+            return item;
+        }
+        renderContent() {
+            const dropZoneClasses = [
+                'drop-zone',
+                this.disabled ? 'drop-zone--disabled' : '',
+                this.isDragOver ? 'drop-zone--drag-over' : '',
+                this.galleryFiles.length > 0 ? 'drop-zone--has-files' : ''
+            ].filter(Boolean).join(' ');
+            return html `
+      <div class="file-gallery">
+        <input
+          type="file"
+          class="file-input"
+          accept="${this.accept}"
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this.handleFileSelect}
+        />
+
+        <if ${!this.showAddButton}>
+          <div
+            class="${dropZoneClasses}"
+            @click=${() => this.handleDropZoneClick()}
+            @dragenter=${this.handleDragEnter}
+            @dragleave=${this.handleDragLeave}
+            @dragover=${this.handleDragOver}
+            @drop=${this.handleDrop}
+          >
+            <div class="drop-zone-content">
+              <svg class="drop-zone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <div class="drop-zone-text">
+                <span class="drop-zone-primary">Click to upload</span>
+                <span class="drop-zone-secondary">or drag and drop</span>
+              </div>
+              <if ${this.accept}>
+                <div class="drop-zone-hint">Accepted: ${this.formatAcceptTypes()}</div>
+              </if>
+              <if ${this.maxSize > 0}>
+                <div class="drop-zone-hint">Max size: ${this.formatFileSize(this.maxSize)}</div>
+              </if>
+            </div>
+          </div>
+        </if>
+
+        <div class="gallery-header">
+        </div>
+
+        <div class="gallery gallery--${this.view}">
+        </div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css `${cssContent}`;
+        }
+        handleDropZoneClick() {
+            if (this.disabled)
+                return;
+            // Query input if not already available
+            if (!this.input) {
+                this.input = this.shadowRoot?.querySelector('.file-input');
+            }
+            this.input?.click();
+        }
+        handleFileSelect(e) {
+            const input = e.target;
+            if (input.files && input.files.length > 0) {
+                this.addFiles(input.files);
+                input.value = ''; // Reset input
+            }
+        }
+        handleDragEnter(e) {
+            e.preventDefault();
+            if (!this.disabled && this.dropZone) {
+                this.isDragOver = true;
+                this.dropZone.classList.add('drop-zone--drag-over');
+            }
+        }
+        handleDragLeave(e) {
+            e.preventDefault();
+            const rect = this.dropZone?.getBoundingClientRect();
+            if (rect && (e.clientX <= rect.left ||
+                e.clientX >= rect.right ||
+                e.clientY <= rect.top ||
+                e.clientY >= rect.bottom)) {
+                this.isDragOver = false;
+                if (this.dropZone) {
+                    this.dropZone.classList.remove('drop-zone--drag-over');
+                }
+            }
+        }
+        handleDragOver(e) {
+            e.preventDefault();
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = this.disabled ? 'none' : 'copy';
+            }
+        }
+        handleDrop(e) {
+            e.preventDefault();
+            this.isDragOver = false;
+            if (this.dropZone) {
+                this.dropZone.classList.remove('drop-zone--drag-over');
+            }
+            if (!this.disabled && e.dataTransfer?.files) {
+                this.addFiles(e.dataTransfer.files);
+            }
+        }
+        handleViewToggle() {
+            this.view = this.view === 'grid' ? 'list' : 'grid';
+            if (this.galleryContainer) {
+                this.galleryContainer.className = `gallery gallery--${this.view}`;
+            }
+            this.updateHeaderDOM();
+        }
+        handleClearAll() {
+            if (confirm('Remove all files?')) {
+                this.clear();
+            }
+        }
+        addFiles(files) {
+            const fileArray = Array.from(files);
+            // Check max files limit
+            if (this.maxFiles > 0 && this.galleryFiles.length + fileArray.length > this.maxFiles) {
+                this.emitError(`Maximum ${this.maxFiles} file${this.maxFiles !== 1 ? 's' : ''} allowed`);
+                return;
+            }
+            // Validate and add files
+            for (const file of fileArray) {
+                // Check file size
+                if (this.maxSize > 0 && file.size > this.maxSize) {
+                    this.emitError(`File "${file.name}" exceeds maximum size of ${this.formatFileSize(this.maxSize)}`);
+                    continue;
+                }
+                // Check file type
+                if (this.accept && !this.isAcceptedType(file)) {
+                    this.emitError(`File type "${file.type}" not accepted`);
+                    continue;
+                }
+                const galleryFile = {
+                    id: this.generateFileId(),
+                    file,
+                    uploadProgress: 0,
+                    uploadStatus: 'pending'
+                };
+                // Generate preview for images
+                if (file.type.startsWith('image/')) {
+                    this.generatePreview(galleryFile);
+                }
+                this.galleryFiles.push(galleryFile);
+                if (this.autoUpload) {
+                    this.startUpload(galleryFile);
+                }
+            }
+            this.updateGalleryDOM();
+            this.emitFilesChange();
+        }
+        addFileWithPreview(file, previewDataUrl) {
+            // Check max files limit
+            if (this.maxFiles > 0 && this.galleryFiles.length >= this.maxFiles) {
+                this.emitError(`Maximum ${this.maxFiles} file${this.maxFiles !== 1 ? 's' : ''} allowed`);
+                return;
+            }
+            // Check file size
+            if (this.maxSize > 0 && file.size > this.maxSize) {
+                this.emitError(`File "${file.name}" exceeds maximum size of ${this.formatFileSize(this.maxSize)}`);
+                return;
+            }
+            // Check file type
+            if (this.accept && !this.isAcceptedType(file)) {
+                this.emitError(`File type "${file.type}" not accepted`);
+                return;
+            }
+            const galleryFile = {
+                id: this.generateFileId(),
+                file,
+                preview: previewDataUrl,
+                uploadProgress: 0,
+                uploadStatus: 'pending'
+            };
+            this.galleryFiles.push(galleryFile);
+            if (this.autoUpload) {
+                this.startUpload(galleryFile);
+            }
+            this.updateGalleryDOM();
+            this.emitFilesChange();
+        }
+        removeFile(fileId) {
+            const index = this.galleryFiles.findIndex(f => f.id === fileId);
+            if (index === -1)
+                return;
+            const file = this.galleryFiles[index];
+            // Cancel upload if in progress
+            if (file.uploadStatus === 'uploading' || file.uploadStatus === 'paused') {
+                this.uploadAbortControllers.get(fileId)?.abort();
+                this.uploadAbortControllers.delete(fileId);
+            }
+            // Revoke preview URL
+            if (file.preview) {
+                URL.revokeObjectURL(file.preview);
+            }
+            this.galleryFiles.splice(index, 1);
+            this.updateGalleryDOM();
+            this.emitFilesChange();
+            this.emitFileRemove(file);
+        }
+        pauseUpload(fileId) {
+            const file = this.galleryFiles.find(f => f.id === fileId);
+            if (!file || file.uploadStatus !== 'uploading')
+                return;
+            this.uploadAbortControllers.get(fileId)?.abort();
+            this.uploadAbortControllers.delete(fileId);
+            file.uploadStatus = 'paused';
+            this.updateFileItemDOM(fileId);
+            this.emitUploadPause(file);
+        }
+        resumeUpload(fileId) {
+            const file = this.galleryFiles.find(f => f.id === fileId);
+            if (!file || file.uploadStatus !== 'paused')
+                return;
+            this.startUpload(file);
+        }
+        retryUpload(fileId) {
+            const file = this.galleryFiles.find(f => f.id === fileId);
+            if (!file || file.uploadStatus !== 'error')
+                return;
+            file.uploadProgress = 0;
+            file.error = undefined;
+            this.startUpload(file);
+        }
+        clear() {
+            // Cancel all uploads
+            for (const controller of this.uploadAbortControllers.values()) {
+                controller.abort();
+            }
+            this.uploadAbortControllers.clear();
+            // Revoke all preview URLs
+            for (const file of this.galleryFiles) {
+                if (file.preview) {
+                    URL.revokeObjectURL(file.preview);
+                }
+            }
+            this.galleryFiles = [];
+            this.updateGalleryDOM();
+            this.emitFilesChange();
+        }
+        addCustomAction(icon, text) {
+            const id = `action-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            this.galleryCustomActions.push({ id, icon, text });
+            this.updateGalleryDOM();
+            return id;
+        }
+        removeCustomAction(actionId) {
+            const index = this.galleryCustomActions.findIndex(a => a.id === actionId);
+            if (index !== -1) {
+                this.galleryCustomActions.splice(index, 1);
+                this.updateGalleryDOM();
+            }
+        }
+        clearCustomActions() {
+            this.galleryCustomActions = [];
+            this.updateGalleryDOM();
+        }
+        clearCompleted() {
+            const completed = this.galleryFiles.filter(f => f.uploadStatus === 'completed');
+            for (const file of completed) {
+                this.removeFile(file.id);
+            }
+        }
+        clearErrors() {
+            const errors = this.galleryFiles.filter(f => f.uploadStatus === 'error');
+            for (const file of errors) {
+                this.removeFile(file.id);
+            }
+        }
+        pauseAll() {
+            for (const file of this.galleryFiles) {
+                if (file.uploadStatus === 'uploading') {
+                    this.pauseUpload(file.id);
+                }
+            }
+        }
+        resumeAll() {
+            for (const file of this.galleryFiles) {
+                if (file.uploadStatus === 'paused') {
+                    this.resumeUpload(file.id);
+                }
+            }
+        }
+        retryAll() {
+            for (const file of this.galleryFiles) {
+                if (file.uploadStatus === 'error') {
+                    this.retryUpload(file.id);
+                }
+            }
+        }
+        cancelUpload(fileId) {
+            const controller = this.uploadAbortControllers.get(fileId);
+            if (controller) {
+                controller.abort();
+                this.uploadAbortControllers.delete(fileId);
+            }
+            this.removeFile(fileId);
+        }
+        cancelAll() {
+            const uploading = this.galleryFiles.filter(f => f.uploadStatus === 'uploading' || f.uploadStatus === 'paused' || f.uploadStatus === 'pending');
+            for (const file of uploading) {
+                this.cancelUpload(file.id);
+            }
+        }
+        openFilePicker() {
+            this.handleDropZoneClick();
+        }
+        setFileBadge(fileId, badge, position = 'top-right') {
+            const file = this.galleryFiles.find(f => f.id === fileId);
+            if (file) {
+                file.badge = badge;
+                file.badgePosition = position;
+                this.updateFileItemDOM(fileId);
+            }
+        }
+        removeFileBadge(fileId) {
+            const file = this.galleryFiles.find(f => f.id === fileId);
+            if (file) {
+                file.badge = undefined;
+                file.badgePosition = undefined;
+                this.updateFileItemDOM(fileId);
+            }
+        }
+        handleCustomActionClick(actionId) {
+            this.dispatchEvent(new CustomEvent('@snice/custom-action-click', {
+                detail: { actionId, component: this },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        async startUpload(galleryFile) {
+            const controller = new AbortController();
+            this.uploadAbortControllers.set(galleryFile.id, controller);
+            galleryFile.uploadStatus = 'uploading';
+            galleryFile.uploadProgress = 0;
+            galleryFile.error = undefined;
+            this.updateFileItemDOM(galleryFile.id);
+            try {
+                const response = await this.uploadFile({
+                    file: galleryFile.file,
+                    fileId: galleryFile.id,
+                    onProgress: (progress) => {
+                        galleryFile.uploadProgress = Math.round(progress * 100);
+                        this.updateFileItemDOM(galleryFile.id);
+                        this.emitUploadProgress(galleryFile);
+                    },
+                    signal: controller.signal
+                });
+                if (response.success) {
+                    galleryFile.uploadStatus = 'completed';
+                    galleryFile.uploadProgress = 100;
+                    this.emitUploadComplete(galleryFile, response);
+                }
+                else {
+                    throw new Error(response.error || 'Upload failed');
+                }
+            }
+            catch (error) {
+                if (error.name === 'AbortError') {
+                    // Upload was paused, don't treat as error
+                    return;
+                }
+                galleryFile.uploadStatus = 'error';
+                galleryFile.error = error.message || 'Upload failed';
+                this.emitUploadError(galleryFile, error);
+            }
+            finally {
+                this.uploadAbortControllers.delete(galleryFile.id);
+                this.updateFileItemDOM(galleryFile.id);
+            }
+        }
+        generatePreview(galleryFile) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                galleryFile.preview = e.target?.result;
+                this.updateFileItemDOM(galleryFile.id);
+            };
+            reader.readAsDataURL(galleryFile.file);
+        }
+        generateFileId() {
+            return `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        }
+        isAcceptedType(file) {
+            if (!this.accept)
+                return true;
+            if (!file || !file.name)
+                return false;
+            const acceptTypes = this.accept.split(',').map(t => t.trim()).filter(Boolean);
+            for (const acceptType of acceptTypes) {
+                // Exact MIME type match
+                if (acceptType === file.type)
+                    return true;
+                // Wildcard match (e.g., image/*)
+                if (acceptType.endsWith('/*')) {
+                    const baseType = acceptType.split('/')[0];
+                    if (file.type && file.type.startsWith(baseType + '/'))
+                        return true;
+                }
+                // Extension match (e.g., .jpg)
+                if (acceptType.startsWith('.')) {
+                    if (file.name.toLowerCase().endsWith(acceptType.toLowerCase()))
+                        return true;
+                }
+            }
+            return false;
+        }
+        formatAcceptTypes() {
+            if (!this.accept)
+                return '';
+            return this.accept.split(',').map(t => t.trim()).join(', ');
+        }
+        formatFileSize(bytes) {
+            if (bytes === 0)
+                return '0 B';
+            if (bytes < 0)
+                return '';
+            const units = ['B', 'KB', 'MB', 'GB'];
+            const k = 1024;
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return `${(bytes / Math.pow(k, i)).toFixed(1)} ${units[i]}`;
+        }
+        emitFilesChange() {
+            return { files: this.files, component: this };
+        }
+        emitFileRemove(file) {
+            return { file, component: this };
+        }
+        emitUploadProgress(file) {
+            return { file, progress: file.uploadProgress, component: this };
+        }
+        emitUploadComplete(file, response) {
+            return { file, response, component: this };
+        }
+        emitUploadError(file, error) {
+            return { file, error: error.message, component: this };
+        }
+        emitUploadPause(file) {
+            return { file, component: this };
+        }
+        emitError(message) {
+            return { message, component: this };
+        }
+        cleanup() {
+            // Cancel all uploads
+            for (const controller of this.uploadAbortControllers.values()) {
+                controller.abort();
+            }
+            // Revoke all preview URLs
+            for (const file of this.galleryFiles) {
+                if (file.preview) {
+                    URL.revokeObjectURL(file.preview);
+                }
+            }
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceFileGallery };
+//# sourceMappingURL=snice-file-gallery.js.map