@xlabs-store/core 0.0.1

package/dist/esm/x-finder.entry.js

@@ -0,0 +1,645 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, H as Host } from './index-ig_mFsVk.js';
+import { M as Modal } from './modal-service-C_e0SaFZ.js';
+import './portal-controller-COpzIi1n.js';
+import './locale.service-D66tF8_2.js';
+
+class FinderService {
+    config;
+    state = {
+        items: [],
+        filteredItems: [],
+        selectedItems: [],
+        pathTrail: [{ id: null, name: 'Home' }],
+        currentFolderId: null,
+        loading: false,
+        viewMode: 'grid',
+        filterMode: 'all',
+        searchQuery: '',
+        sortBy: 'name',
+        sortOrder: 'asc',
+        showDetails: true,
+        storage: { used: 12.4, total: 20 }
+    };
+    onChange;
+    constructor(config, onStateChange) {
+        this.config = config;
+        this.onChange = onStateChange;
+        if (config.defaultViewMode) {
+            this.state.viewMode = config.defaultViewMode;
+        }
+    }
+    getState() {
+        return { ...this.state };
+    }
+    updateState(newState) {
+        this.state = { ...this.state, ...newState };
+        this.applyFilters();
+        this.onChange(this.state);
+    }
+    /**
+     * API Actions
+     */
+    async loadItems(folderId = this.state.currentFolderId) {
+        if (!this.config.list)
+            return;
+        this.updateState({ loading: true, currentFolderId: folderId, selectedItems: [] });
+        try {
+            const items = await this.config.list(folderId);
+            this.updateState({ items, loading: false });
+        }
+        catch (e) {
+            console.error('Failed to load items', e);
+            this.updateState({ loading: false });
+        }
+    }
+    async createFolder() {
+        if (!this.config.createFolder)
+            return;
+        const modalRef = Modal.create({
+            title: 'Create New Folder',
+            content: this.renderInputTemplate('Enter folder name...', ''),
+            onOk: async () => {
+                const name = this.getInputValue(modalRef);
+                if (!name)
+                    return false;
+                const newItem = await this.config.createFolder(name, this.state.currentFolderId);
+                if (newItem) {
+                    await this.loadItems();
+                    return true;
+                }
+                return false;
+            }
+        });
+    }
+    async createProject() {
+        if (!this.config.createProject)
+            return;
+        const modalRef = Modal.create({
+            title: 'Create New Project',
+            content: this.renderInputTemplate('Enter project name...', ''),
+            onOk: async () => {
+                const name = this.getInputValue(modalRef);
+                if (!name)
+                    return false;
+                const newItem = await this.config.createProject(name);
+                if (newItem) {
+                    await this.loadItems();
+                    return true;
+                }
+                return false;
+            }
+        });
+    }
+    async upload(file) {
+        if (!this.config.upload)
+            return;
+        this.updateState({ loading: true });
+        try {
+            const newItem = await this.config.upload(file, this.state.currentFolderId);
+            if (newItem) {
+                await this.loadItems();
+            }
+        }
+        finally {
+            this.updateState({ loading: false });
+        }
+    }
+    async rename(item) {
+        if (!this.config.update)
+            return;
+        const modalRef = Modal.create({
+            title: 'Rename Item',
+            content: this.renderInputTemplate('Enter new name...', item.name),
+            onOk: async () => {
+                const name = this.getInputValue(modalRef);
+                if (!name || name === item.name)
+                    return false;
+                const updatedItem = await this.config.update(item, { name });
+                if (updatedItem) {
+                    await this.loadItems();
+                    return true;
+                }
+                return false;
+            }
+        });
+    }
+    async delete(item) {
+        if (!this.config.delete)
+            return;
+        Modal.confirm({
+            title: 'Confirm Delete',
+            content: `Are you sure you want to delete <strong>${item.name}</strong>?`,
+            okText: 'Delete',
+            okDanger: true,
+            onOk: async () => {
+                const success = await this.config.delete(item);
+                if (success) {
+                    await this.loadItems();
+                }
+            }
+        });
+    }
+    download(item) {
+        if (this.config.download) {
+            this.config.download(item);
+        }
+        else if (item.url) {
+            const link = document.createElement('a');
+            link.href = item.url;
+            link.download = item.name;
+            link.click();
+        }
+    }
+    /**
+     * UI Navigation & State Control
+     */
+    navigateTo(folderId, name) {
+        const idx = this.state.pathTrail.findIndex(p => p.id === folderId);
+        let newTrail = [];
+        if (idx !== -1) {
+            newTrail = this.state.pathTrail.slice(0, idx + 1);
+        }
+        else {
+            newTrail = [...this.state.pathTrail, { id: folderId, name }];
+        }
+        this.updateState({ pathTrail: newTrail });
+        this.loadItems(folderId);
+    }
+    setSearchQuery(query) {
+        this.updateState({ searchQuery: query });
+    }
+    setFilterMode(mode) {
+        this.updateState({ filterMode: mode });
+    }
+    setViewMode(mode) {
+        this.updateState({ viewMode: mode });
+    }
+    setSorting(field, order) {
+        const newOrder = order || (this.state.sortBy === field && this.state.sortOrder === 'asc' ? 'desc' : 'asc');
+        this.updateState({ sortBy: field, sortOrder: newOrder });
+    }
+    toggleDetails(show) {
+        this.updateState({ showDetails: show !== undefined ? show : !this.state.showDetails });
+    }
+    selectItem(item, multi = false) {
+        if (multi) {
+            const index = this.state.selectedItems.findIndex(i => i.id === item.id);
+            const newSelection = index > -1
+                ? this.state.selectedItems.filter(i => i.id !== item.id)
+                : [...this.state.selectedItems, item];
+            this.updateState({ selectedItems: newSelection });
+        }
+        else {
+            this.updateState({ selectedItems: [item], showDetails: true });
+        }
+    }
+    clearSelection() {
+        this.updateState({ selectedItems: [] });
+    }
+    /**
+     * Helpers
+     */
+    applyFilters() {
+        let result = [...this.state.items];
+        if (this.state.filterMode === 'images') {
+            result = result.filter(i => i.type === 'file' && this.isImageItem(i));
+        }
+        // Search
+        if (this.state.searchQuery) {
+            const q = this.state.searchQuery.toLowerCase();
+            result = result.filter(i => i.name.toLowerCase().includes(q));
+        }
+        // Sort
+        result.sort((a, b) => {
+            let valA = a[this.state.sortBy];
+            let valB = b[this.state.sortBy];
+            if (this.state.sortBy === 'name') {
+                valA = a.name.toLowerCase();
+                valB = b.name.toLowerCase();
+            }
+            const order = this.state.sortOrder === 'asc' ? 1 : -1;
+            return valA > valB ? order : (valA < valB ? -order : 0);
+        });
+        this.state.filteredItems = result;
+    }
+    getFileExtension(name) {
+        const n = (name || '').trim();
+        const idx = n.lastIndexOf('.');
+        if (idx === -1)
+            return '';
+        return n.slice(idx + 1).toLowerCase();
+    }
+    isImageItem(item) {
+        const mime = (item.mimeType || '').toLowerCase();
+        if (mime.startsWith('image/'))
+            return true;
+        const ext = this.getFileExtension(item.name);
+        return ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg', 'avif'].includes(ext);
+    }
+    renderInputTemplate(placeholder, value) {
+        return `
+      <div style="padding: 8px 0;">
+        <div style="font-size: 14px; font-weight: 500; color: #64748b; margin-bottom: 8px;">Name</div>
+        <input type="text" id="finder-modal-input" value="${value}" placeholder="${placeholder}" 
+          style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; box-sizing: border-box; font-family: inherit;" 
+        />
+      </div>
+    `;
+    }
+    getInputValue(modalRef) {
+        const contentEl = modalRef.getContentElement();
+        const input = contentEl.querySelector('#finder-modal-input');
+        return input?.value?.trim() || '';
+    }
+}
+
+const xFinderCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;font-family:inherit;border-radius:var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) var(--x-modal-content-border-radius, var(--x-border-radius-lg, 8px)) 0 0;overflow:hidden}.page-wrapper{height:100%;background-color:white;position:relative;overflow:hidden}.finder-container{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:80vh}.details-sidebar,.finder-sidebar{--x-sider-bg:#fff !important}.finder-header{height:64px;background:var(--x-finder-header-bg, var(--x-color-bg-container, #ffffff));border-bottom:var(--x-border-width-base, 1px) solid var(--x-finder-border-color, var(--x-color-border-secondary, #f0f0f0));-ms-flex-negative:0;flex-shrink:0;z-index:10}.finder-header .header-logo{font-size:20px;font-weight:700;color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap}.finder-header .nav-link{text-decoration:none;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b)) !important;font-weight:500;font-size:14px;-webkit-transition:color 0.2s;transition:color 0.2s;white-space:nowrap}.finder-header .nav-link:hover{color:var(--x-finder-text-color, var(--x-text-color, #1e293b)) !important}.finder-header .nav-link.active{color:var(--x-color-primary, #137fec) !important;font-weight:600}.finder-sidebar{overflow:hidden}.finder-sidebar .sidebar-top{padding:24px;-ms-flex-negative:0;flex-shrink:0}.finder-sidebar .sidebar-section{padding:0 24px}.finder-sidebar .sidebar-section .section-title{font-size:12px;font-weight:600;color:var(--x-text-color-secondary);margin-bottom:12px;letter-spacing:0.5px}.main-content{background:var(--x-finder-content-bg, var(--x-color-bg-layout, #f1f5f9));padding:0px 15px 15px;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;min-height:0}.main-content .content-toolbar{margin:20px 0px;-ms-flex-negative:0;flex-shrink:0}.items-grid{width:100%}.grid-item{height:100%;cursor:pointer;border-radius:var(--x-finder-border-radius-lg, var(--x-border-radius-lg, 16px));border:2px solid transparent;-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.grid-item::part(body){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.grid-item.selected{border-color:var(--x-color-primary, #137fec)}.grid-item.selected::part(card){background-color:var(--x-finder-item-selected-bg, var(--x-color-primary-bg, #f0f9ff))}.grid-item .thumbnail{background-color:var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9));border-radius:var(--x-finder-border-radius-md, var(--x-border-radius-base, 12px));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:12px;position:relative;overflow:hidden;width:100%;aspect-ratio:16/10}.grid-item .thumbnail img,.grid-item .thumbnail x-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.grid-item .thumbnail .badge{position:absolute;top:8px;right:8px;background:var(--x-color-primary, #137fec);color:var(--x-finder-item-bg, var(--x-color-bg-container, #ffffff));width:22px;height:22px;border-radius:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.grid-item .info{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.grid-item .info .name{font-weight:600;font-size:var(--x-finder-font-size-md, var(--x-font-size-lg, 14px));color:var(--x-finder-text-color, var(--x-text-color, #1e293b));margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-item .info .meta{font-size:var(--x-finder-font-size-sm, var(--x-font-size-base, 12px));color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.items-list{position:relative}.virtual-spacer{width:100%;position:relative}.virtual-items{position:absolute;top:0;left:0;right:0}.list-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 16px;border-radius:var(--x-finder-border-radius-sm, var(--x-border-radius-sm, 8px));cursor:pointer;-webkit-transition:background 0.2s;transition:background 0.2s;height:56px;-webkit-box-sizing:border-box;box-sizing:border-box}.list-item:hover{background:var(--x-finder-item-hover-bg, var(--x-color-fill-tertiary, #f8fafc))}.list-item.selected{background:var(--x-finder-item-selected-bg, var(--x-color-primary-bg, #f0f9ff))}.list-item.selected .name{color:var(--x-color-primary, #137fec);font-weight:600}.list-item .name{font-size:var(--x-finder-font-size-md, var(--x-font-size-lg, 14px));color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .type,.list-item .size,.list-item .date{font-size:13px;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));width:120px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .type{-ms-flex-negative:0;flex-shrink:0;width:150px;text-align:left;margin-left:16px}.details-sidebar .preview{aspect-ratio:16/10;background:var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9));border-radius:var(--x-finder-border-radius-lg, var(--x-border-radius-lg, 16px));margin-bottom:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}.details-sidebar .preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details-sidebar .info-section{margin-bottom:32px}.details-sidebar .info-section .filename{font-size:var(--x-finder-font-size-lg, 16px);font-weight:600;color:var(--x-finder-text-color, var(--x-text-color, #1e293b));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.details-sidebar .info-section .time{font-size:var(--x-finder-font-size-xs, var(--x-font-size-sm, 11px));color:var(--x-finder-text-muted, var(--x-text-color-description, #94a3b8));font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-top:4px}.details-sidebar .actions{margin-top:auto;padding-top:24px;border-top:var(--x-border-width-base, 1px) solid var(--x-finder-thumbnail-bg, var(--x-color-fill-quaternary, #f1f5f9))}.details-sidebar .actions .label{font-size:var(--x-finder-font-size-xs, var(--x-font-size-sm, 11px));font-weight:700;color:var(--x-finder-text-muted, var(--x-text-color-description, #94a3b8));margin-bottom:20px}.details-sidebar .actions .action-btn{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:10px;cursor:pointer;color:var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));-webkit-transition:all 0.2s;transition:all 0.2s}.details-sidebar .actions .action-btn span{font-size:var(--x-finder-font-size-sm, var(--x-font-size-base, 12px));font-weight:600}.details-sidebar .actions .action-btn:hover{color:var(--x-color-primary, #137fec);-webkit-transform:translateY(-2px);transform:translateY(-2px)}.details-sidebar .actions .action-btn.danger:hover{color:var(--x-finder-danger-color, var(--x-color-error, #ef4444))}.selection-footer{height:80px;background:var(--x-finder-footer-bg, var(--x-color-bg-container, #ffffff));border-top:var(--x-border-width-base, 1px) solid var(--x-finder-border-color, var(--x-color-border-secondary, #f0f0f0));padding:0 40px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.selection-footer .text{font-size:15px;font-weight:600;color:var(--x-finder-text-color, var(--x-text-color, #1e293b))}.clickable{cursor:pointer;-webkit-transition:opacity 0.2s;transition:opacity 0.2s}.clickable:hover{opacity:0.7}x-layout{position:relative !important}`;
+
+const XFinder = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xSelect = createEvent(this, "xSelect", 7);
+        this.xClose = createEvent(this, "xClose", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Interface mode for the finder.
+     * 'page' takes up full height/width of container.
+     * 'dialog' shows up in a modal.
+     */
+    displayMode = 'page';
+    /**
+     * Visibility state, mainly for 'dialog' mode.
+     */
+    visible = false;
+    /**
+     * Configuration for CRUD operations.
+     */
+    config = {};
+    /**
+     * Title of the finder shown in the header.
+     */
+    finderTitle = 'File Manager';
+    async handleConfigChange(newConfig) {
+        this.initService(newConfig);
+        await this.service.loadItems();
+    }
+    state;
+    /**
+     * Triggered when user selects files/folders and confirms (e.g. in dialog mode).
+     */
+    xSelect;
+    /**
+     * Triggered when dialog is closed.
+     */
+    xClose;
+    service;
+    fileInput;
+    itemsViewportRef;
+    itemsResizeObserver;
+    itemsViewportHeight = 0;
+    itemsViewportScrollTop = 0;
+    async componentWillLoad() {
+        this.initService(this.config);
+        await this.service.loadItems();
+    }
+    componentDidLoad() {
+        this.initItemsViewportObserver();
+    }
+    disconnectedCallback() {
+        this.itemsResizeObserver?.disconnect();
+    }
+    initService(config) {
+        this.service = new FinderService(config, (newState) => {
+            this.state = { ...newState };
+        });
+        this.state = this.service.getState();
+    }
+    initItemsViewportObserver() {
+        if (this.itemsResizeObserver)
+            return;
+        if (!this.itemsViewportRef)
+            return;
+        this.itemsResizeObserver = new ResizeObserver(() => {
+            const h = this.itemsViewportRef?.clientHeight || 0;
+            if (h !== this.itemsViewportHeight)
+                this.itemsViewportHeight = h;
+        });
+        this.itemsResizeObserver.observe(this.itemsViewportRef);
+        this.itemsViewportHeight = this.itemsViewportRef.clientHeight || 0;
+    }
+    setItemsViewportRef = (el) => {
+        this.itemsViewportRef = el;
+        this.initItemsViewportObserver();
+    };
+    handleItemsViewportScroll = (ev) => {
+        const target = ev.target;
+        this.itemsViewportScrollTop = target.scrollTop;
+    };
+    handleFileSelected = async (ev) => {
+        const target = ev.target;
+        const file = target.files?.[0];
+        if (file) {
+            await this.service.upload(file);
+        }
+        target.value = '';
+    };
+    handleConfirmSelect = (e) => {
+        if (e && e.stopPropagation)
+            e.stopPropagation();
+        this.xSelect.emit(this.state.selectedItems);
+        if (this.displayMode === 'dialog') {
+            this.visible = false;
+            this.xClose.emit();
+        }
+    };
+    renderHeader() {
+        const filterMode = this.state?.filterMode || 'all';
+        return (h("x-header", { class: "finder-header" }, h("x-flex", { justify: "space-between", align: "center", style: { width: '100%', height: '100%' } }, h("x-flex", { align: "center", gap: "32" }, h("div", { class: "header-logo" }, this.finderTitle), h("x-flex", { align: "center", gap: "24" }, h("a", { href: "#", class: { 'nav-link': true, 'active': filterMode === 'all' }, onClick: (e) => {
+                e.preventDefault();
+                this.service.setFilterMode('all');
+            } }, "All Files"), h("a", { href: "#", class: { 'nav-link': true, 'active': filterMode === 'images' }, onClick: (e) => {
+                e.preventDefault();
+                this.service.setFilterMode('images');
+            } }, "Images"))), h("x-flex", { align: "center", gap: "16" }, h("div", null, h("x-input", { placeholder: "Search assets...", prefixIcon: "search", size: "small", style: { width: '240px' }, onXChange: (ev) => this.service.setSearchQuery(ev.detail.value) })), h("x-segmented", { value: this.state.viewMode, options: [
+                { label: 'Grid', value: 'grid', icon: 'grid_view' },
+                { label: 'List', value: 'list', icon: 'list' }
+            ], onXChange: (ev) => this.service.setViewMode(ev.detail) }), h("x-flex", { align: "center", gap: "12" }, h("x-icon", { name: "settings", size: "18", color: "#64748b", class: "clickable", onClick: () => this.openSettings() }), h("x-icon", { name: "info", size: "18", color: "#64748b", class: "clickable", onClick: () => this.openInfo() }))))));
+    }
+    openSettings() {
+        const modalRef = Modal.create({
+            title: 'Finder Settings',
+            content: `
+        <div style="display:flex;flex-direction:column;gap:12px;padding-top:6px;">
+          <label style="font-size:13px;color:#64748b;display:flex;flex-direction:column;gap:6px;">
+            View Mode
+            <select id="finder-setting-viewmode" style="padding:8px;border:1px solid #d9d9d9;border-radius:6px;">
+              <option value="grid"${this.state.viewMode === 'grid' ? ' selected' : ''}>Grid</option>
+              <option value="list"${this.state.viewMode === 'list' ? ' selected' : ''}>List</option>
+            </select>
+          </label>
+          <label style="font-size:13px;color:#64748b;display:flex;flex-direction:column;gap:6px;">
+            Filter
+            <select id="finder-setting-filter" style="padding:8px;border:1px solid #d9d9d9;border-radius:6px;">
+              <option value="all"${this.state.filterMode === 'all' ? ' selected' : ''}>All Files</option>
+              <option value="images"${this.state.filterMode === 'images' ? ' selected' : ''}>Images</option>
+            </select>
+          </label>
+          <label style="font-size:13px;color:#64748b;display:flex;align-items:center;gap:8px;">
+            <input type="checkbox" id="finder-setting-showdetails"${this.state.showDetails ? ' checked' : ''} />
+            Show Details Panel
+          </label>
+        </div>
+      `,
+            onOk: async () => {
+                const el = modalRef.getContentElement();
+                const vm = el.querySelector('#finder-setting-viewmode')?.value;
+                const fm = el.querySelector('#finder-setting-filter')?.value;
+                const sd = el.querySelector('#finder-setting-showdetails')?.checked;
+                if (vm)
+                    this.service.setViewMode(vm);
+                if (fm)
+                    this.service.setFilterMode(fm);
+                this.service.toggleDetails(sd);
+                return true;
+            }
+        });
+    }
+    openInfo() {
+        const total = (this.state.items || []).length;
+        const filtered = (this.state.filteredItems || []).length;
+        const selected = (this.state.selectedItems || []).length;
+        const path = (this.state.pathTrail || []).map(p => p.name).join(' / ');
+        const storage = this.state.storage ? `${this.state.storage.used} GB / ${this.state.storage.total} GB` : 'N/A';
+        Modal.info({
+            title: 'Finder Info',
+            content: `
+        <div style="display:flex;flex-direction:column;gap:8px;">
+          <div><strong>Path:</strong> ${path || 'Home'}</div>
+          <div><strong>Total Items:</strong> ${total}</div>
+          <div><strong>Visible Items:</strong> ${filtered}</div>
+          <div><strong>Selected:</strong> ${selected}</div>
+          <div><strong>Storage:</strong> ${storage}</div>
+        </div>
+      `
+        });
+    }
+    renderSidebar() {
+        const folders = (this.state.items || []).filter(i => i.type === 'folder');
+        const selectedKey = this.state.currentFolderId == null ? '__root__' : String(this.state.currentFolderId);
+        const rootNode = { key: '__root__', title: 'Home', icon: 'home', folderId: null, children: [] };
+        const trail = this.state.pathTrail || [{ id: null, name: 'Home' }];
+        let cursor = rootNode;
+        for (let i = 1; i < trail.length; i++) {
+            const seg = trail[i];
+            const node = {
+                key: String(seg.id),
+                title: seg.name,
+                icon: 'folder',
+                folderId: seg.id,
+                children: [],
+            };
+            cursor.children = [node];
+            cursor = node;
+        }
+        cursor.children = folders.map(f => ({
+            key: String(f.id),
+            title: f.name,
+            icon: 'folder',
+            folderId: f.id,
+        }));
+        const treeData = [rootNode];
+        const expandedKeys = ['__root__', ...trail.slice(1).map(t => String(t.id))];
+        return (h("x-sider", { class: "finder-sidebar", width: 240, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", style: { height: '100%' }, justify: 'space-between', gap: "12" }, h("x-button", { type: "primary", style: { width: '100%' }, block: true, size: "large", onClick: () => this.fileInput.click() }, h("x-icon", { slot: "icon", name: "cloud_upload" }), "Upload"))), h("x-layout", { hasSiderProp: false, fixed: true }, h("div", { class: "sidebar-section" }, h("div", { class: "section-title" }, "FOLDERS"), h("x-tree", { treeData: treeData, selectedKeys: [selectedKey], expandedKeys: expandedKeys, showIcon: true, blockNode: true, onXSelect: (ev) => {
+                if (ev && ev.stopPropagation) {
+                    ev.stopPropagation();
+                }
+                const node = ev?.detail?.node;
+                const folderId = node?.folderId ?? null;
+                const name = node?.title || 'Home';
+                this.service.navigateTo(folderId, name);
+            } }))))));
+    }
+    renderBreadcrumbs() {
+        return (h("div", null, h("x-breadcrumb", null, this.state.pathTrail.map(p => (h("x-breadcrumb-item", { onClick: (e) => {
+                if (e && e.stopPropagation)
+                    e.stopPropagation();
+                this.service.navigateTo(p.id, p.name);
+            } }, h("a", { href: "javascript:void(0)" }, p.name))))), h("x-flex", { justify: "space-between", align: "center", style: { marginTop: '16px' } }, h("div", null), h("div", null))));
+    }
+    getFileExtension(name) {
+        const n = (name || '').trim();
+        const idx = n.lastIndexOf('.');
+        if (idx === -1)
+            return '';
+        return n.slice(idx + 1).toLowerCase();
+    }
+    formatMiddleEllipsis(text, head, tail) {
+        const s = (text || '').trim();
+        if (!s)
+            return '';
+        if (head <= 0 || tail <= 0)
+            return s;
+        if (s.length <= head + tail + 1)
+            return s;
+        return `${s.slice(0, head)}…${s.slice(-tail)}`;
+    }
+    isImageFile(item) {
+        const mime = (item.mimeType || '').toLowerCase();
+        if (mime.startsWith('image/'))
+            return true;
+        const ext = this.getFileExtension(item.name);
+        return ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg', 'avif'].includes(ext);
+    }
+    getFileIconName(item) {
+        if (item.type === 'folder')
+            return 'folder';
+        const mime = (item.mimeType || '').toLowerCase();
+        const ext = this.getFileExtension(item.name);
+        if (this.isImageFile(item))
+            return 'image';
+        if (mime === 'application/pdf' || ext === 'pdf')
+            return 'picture_as_pdf';
+        if (mime.includes('spreadsheet') || ['xls', 'xlsx', 'csv'].includes(ext))
+            return 'table_chart';
+        if (mime.includes('word') || ['doc', 'docx', 'rtf'].includes(ext))
+            return 'article';
+        if (mime.includes('presentation') || ['ppt', 'pptx'].includes(ext))
+            return 'slideshow';
+        if (mime.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'm4a', 'flac'].includes(ext))
+            return 'audiotrack';
+        if (mime.startsWith('video/') || ['mp4', 'mov', 'mkv', 'webm'].includes(ext))
+            return 'movie';
+        if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext))
+            return 'folder_zip';
+        if (['txt', 'md', 'log'].includes(ext))
+            return 'text_snippet';
+        if (['json', 'xml', 'yml', 'yaml', 'js', 'ts', 'tsx', 'jsx', 'css', 'scss', 'html'].includes(ext))
+            return 'code';
+        return 'description';
+    }
+    getFileIconColor(item) {
+        if (item.type === 'folder')
+            return '#f59e0b';
+        const ext = this.getFileExtension(item.name);
+        const mime = (item.mimeType || '').toLowerCase();
+        if (this.isImageFile(item))
+            return '#0ea5e9';
+        if (mime === 'application/pdf' || ext === 'pdf')
+            return '#ef4444';
+        if (mime.includes('spreadsheet') || ['xls', 'xlsx', 'csv'].includes(ext))
+            return '#16a34a';
+        if (mime.includes('word') || ['doc', 'docx', 'rtf'].includes(ext))
+            return '#2563eb';
+        if (mime.includes('presentation') || ['ppt', 'pptx'].includes(ext))
+            return '#f97316';
+        if (mime.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'm4a', 'flac'].includes(ext))
+            return '#8b5cf6';
+        if (mime.startsWith('video/') || ['mp4', 'mov', 'mkv', 'webm'].includes(ext))
+            return '#a855f7';
+        if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext))
+            return '#64748b';
+        return '#94a3b8';
+    }
+    formatDate(date) {
+        if (!date)
+            return '-';
+        const d = new Date(date);
+        if (isNaN(d.getTime()))
+            return String(date);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        const hours = String(d.getHours()).padStart(2, '0');
+        const minutes = String(d.getMinutes()).padStart(2, '0');
+        const seconds = String(d.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+    renderItemThumb(item, isSelected, size) {
+        if (item.type === 'folder') {
+            return (h("x-icon", { name: "folder", size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }));
+        }
+        if (this.isImageFile(item) && (item.thumbnail || item.url)) {
+            return (h("x-image", { src: item.thumbnail || item.url, alt: item.name, width: "100%", height: "100%", loading: "lazy", preview: false, style: { pointerEvents: 'none' } }));
+        }
+        return (h("x-icon", { name: this.getFileIconName(item), size: size, color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }));
+    }
+    renderGridItem(item) {
+        const isSelected = this.state.selectedItems.some(i => i.id === item.id);
+        const displayName = this.formatMiddleEllipsis(item.name, 18, 12);
+        return (h("x-col", { flex: "0 0 240px", style: { width: '240px', minWidth: '240px', maxWidth: '240px', marginBottom: '24px' } }, h("x-card", { class: `grid-item ${isSelected ? 'selected' : ''}`, hoverable: true, onClick: (e) => {
+                e.stopPropagation();
+                const multi = e.ctrlKey || e.metaKey;
+                if (item.type === 'folder' && !multi) {
+                    this.service.navigateTo(item.id, item.name);
+                    return;
+                }
+                this.service.selectItem(item, multi);
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                item.type === 'folder' ? this.service.navigateTo(item.id, item.name) : this.service.download(item);
+            } }, h("div", { class: "thumbnail", slot: 'cover' }, this.renderItemThumb(item, isSelected, 48), isSelected && h("div", { class: "badge" }, h("x-icon", { name: "check", size: 12 }))), h("div", { class: "info" }, h("div", { class: "name", title: item.name }, displayName), h("div", { class: "meta" }, item.size ? `${item.size} MB` : '-', " \u2022 ", item.mimeType || (item.type === 'folder' ? 'Folder' : ''))))));
+    }
+    renderListItem(item) {
+        const isSelected = this.state.selectedItems.some(i => i.id === item.id);
+        const displayName = this.formatMiddleEllipsis(item.name, 28, 16);
+        return (h("div", { class: `list-item ${isSelected ? 'selected' : ''}`, onClick: (e) => {
+                e.stopPropagation();
+                const multi = e.ctrlKey || e.metaKey;
+                if (item.type === 'folder' && !multi) {
+                    this.service.navigateTo(item.id, item.name);
+                    return;
+                }
+                this.service.selectItem(item, multi);
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                item.type === 'folder' ? this.service.navigateTo(item.id, item.name) : this.service.download(item);
+            } }, h("x-flex", { align: "center", gap: "12", style: { flex: '1', minWidth: '0' } }, h("x-icon", { name: this.getFileIconName(item), size: "20", color: isSelected ? 'var(--x-color-primary)' : this.getFileIconColor(item) }), h("span", { class: "name", title: item.name }, displayName)), h("span", { class: "type" }, item.mimeType || item.type), h("span", { class: "size" }, item.size ? `${item.size} MB` : '-'), h("span", { class: "date" }, this.formatDate(item.updatedAt))));
+    }
+    renderVirtualList(items) {
+        const itemHeight = 56;
+        const overscan = 8;
+        const totalHeight = items.length * itemHeight;
+        const start = Math.max(0, Math.floor(this.itemsViewportScrollTop / itemHeight) - overscan);
+        const end = Math.min(items.length - 1, Math.ceil((this.itemsViewportScrollTop + this.itemsViewportHeight) / itemHeight) + overscan);
+        const visibleItems = items.slice(start, end + 1);
+        const offsetY = start * itemHeight;
+        return (h("div", { class: "virtual-spacer", style: { height: `${totalHeight}px` } }, h("div", { class: "virtual-items", style: { transform: `translateY(${offsetY}px)` } }, visibleItems.map((item) => (h("div", { key: String(item.id), style: { height: `${itemHeight}px` } }, this.renderListItem(item)))))));
+    }
+    renderDetails() {
+        if (!this.state.showDetails || this.state.selectedItems.length === 0)
+            return null;
+        const item = this.state.selectedItems[0];
+        const displayName = this.formatMiddleEllipsis(item.name, 28, 16);
+        return (h("x-sider", { class: "details-sidebar", width: 320, style: { display: 'flex', flexDirection: 'column' } }, h("x-layout", { hasSiderProp: false, fixed: false }, h("x-header", { class: "finder-header" }, h("x-flex", { align: "center", justify: 'space-between', gap: "12" }, h("x-flex", { flex: '1', align: "center", gap: "4" }, h("x-typography", { type: 'title', level: 4 }, "Details")), h("x-icon", { name: "close", onClick: () => this.service.toggleDetails(false), class: "clickable" }))), h("x-layout", { hasSiderProp: false, fixed: true }, h("x-content", null, h("div", { class: "details-content" }, h("div", { class: "preview" }, this.isImageFile(item) && (item.url || item.thumbnail) ? (h("x-image", { src: item.url || item.thumbnail, alt: item.name, width: "100%", height: "100%", loading: "lazy", placeholder: true, preview: true })) : (h("x-icon", { name: item.type === 'folder' ? 'folder' : this.getFileIconName(item), size: "80", color: "#cbd5e1" }))), h("div", { class: "info-section" }, h("x-flex", { align: "center", gap: "8", style: { marginBottom: '4px', minWidth: '0' } }, h("x-icon", { name: "description", size: 16, color: "var(--x-color-primary)" }), h("div", { class: "filename", title: item.name }, displayName)), h("div", { class: "time" }, item.updatedAt ? `MODIFIED ${this.formatDate(item.updatedAt)}` : '')), h("x-descriptions", { column: 1, size: "small", style: { marginTop: '24px' } }, h("x-descriptions-item", { label: "Type" }, item.mimeType || item.type), h("x-descriptions-item", { label: "Size" }, item.size ? `${item.size} MB` : '-'), h("x-descriptions-item", { label: "Dimensions" }, item.dimensions || '-'), h("x-descriptions-item", { label: "Created" }, this.formatDate(item.createdAt)), h("x-descriptions-item", { label: "Modified" }, this.formatDate(item.updatedAt)))))), h("x-footer", null, h("div", { class: "actions" }, h("div", { class: "label" }, "QUICK ACTIONS"), h("x-flex", { justify: "space-around", style: { marginTop: '16px' } }, h("div", { class: "action-btn", onClick: (e) => { e.stopPropagation(); this.service.download(item); } }, h("x-icon", { name: "download", size: 20 }), h("span", null, "Download")), h("div", { class: "action-btn", onClick: (e) => { e.stopPropagation(); this.service.rename(item); } }, h("x-icon", { name: "edit", size: 20 }), h("span", null, "Rename")), h("div", { class: "action-btn danger", onClick: (e) => { e.stopPropagation(); this.service.delete(item); } }, h("x-icon", { name: "delete", size: 20 }), h("span", null, "Delete"))))))));
+    }
+    renderFooter() {
+        const hasSelection = this.state.selectedItems.length > 0;
+        return (h("x-footer", { class: "selection-footer" }, h("x-flex", { justify: "space-between", align: "center", style: { width: '100%' } }, h("x-flex", { align: "center", gap: "8" }, hasSelection && (h(Fragment, null, h("x-icon", { name: "check_circle", size: "18", color: "var(--x-color-primary)" }), h("span", { class: "text" }, this.state.selectedItems.length, " items selected")))), h("x-flex", { align: "center", gap: "8" }, h("x-space", null, h("x-button", { type: "text", onClick: (e) => {
+                e.stopPropagation();
+                this.service.clearSelection();
+                if (this.displayMode === 'dialog') {
+                    this.visible = false;
+                    this.xClose.emit();
+                }
+            } }, "Cancel"), h("x-button", { type: "primary", disabled: !hasSelection, onClick: this.handleConfirmSelect }, "Select Files"))))));
+    }
+    render() {
+        const isGrid = this.state.viewMode === 'grid';
+        const items = this.state.filteredItems || [];
+        const content = (h("x-layout", { key: '5094b9695720b295e038e97f3f18726e926970ba', class: "finder-container", fixed: true }, this.renderHeader(), h("x-layout", { key: '123f21a544c21a73658e4ff9a98458bb691e9104', hasSiderProp: true, fixed: false }, this.renderSidebar(), h("x-layout", { key: 'aea9694a8167a070dd16102dcaa1a8262d580dcd', hasSiderProp: true, fixed: true }, h("x-content", { key: '5f27961a6e0dbe85b16b5ad590429bcb0515eaf5', class: "main-content" }, this.renderBreadcrumbs(), h("div", { key: '07ca6371d162b9f0a3f99e5db0c1f2e514765b47', class: {
+                'items-viewport': true,
+                'items-viewport-grid': isGrid,
+                'items-viewport-list': !isGrid,
+            }, ref: this.setItemsViewportRef, onScroll: this.handleItemsViewportScroll }, h("x-spin", { key: '61612ab7ff99bfb22649673f8c791ce95a749007', spinning: this.state.loading, style: { width: '100%' } }, items.length === 0 ? (h("div", { class: "empty-center" }, h("x-empty", { description: "No items found" }))) : isGrid ? (h("div", { class: "items-grid" }, h("x-row", { gutter: 24 }, items.map((item) => this.renderGridItem(item))))) : (h("div", { class: "items-list" }, this.renderVirtualList(items))))))), this.renderDetails()), this.renderFooter(), h("input", { key: 'a613a663e1cf46ea33b807544a853bdbcb7f9c05', type: "file", ref: (el) => (this.fileInput = el), style: { display: 'none' }, onChange: this.handleFileSelected })));
+        return (h(Host, { key: 'ee145b2cabb7020bf1db35477ed2299774408844' }, h("div", { key: 'f56a8f764b044a4842c5cb121e393475db16b762', class: "page-wrapper" }, content)));
+    }
+    static get watchers() { return {
+        "config": [{
+                "handleConfigChange": 0
+            }]
+    }; }
+};
+XFinder.style = xFinderCss();
+
+export { XFinder as x_finder };