juxscript 1.1.228 → 1.1.231

package/lib/components/dataframe.js

@@ -1,12 +1,11 @@
 import { BaseComponent } from './base/BaseComponent.js';
 import { DataFrame } from '../storage/DataFrame.js';
-import { TabularDriver } from '../storage/TabularDriver.js';
 import { FileUpload } from './fileupload.js';
 import { Table } from './table.js';
 import { Tabs } from './tabs.js';
-import { Modal } from './modal.js';
 import { Button } from './button.js';
-import { renderIcon } from './icons.js';
+import { dataFrameSource } from './dataframe/DataFrameSource.js';
+import { ImportSettingsModal } from './dataframe/ImportSettingsModal.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
 export class DataFrameComponent extends BaseComponent {
@@ -22,35 +21,35 @@ export class DataFrameComponent extends BaseComponent {
             rowCount: 0,
             colCount: 0
         });
-        this._df = null;
         this._table = null;
         this._tabs = null;
-        this._sheets = new Map();
         this._uploadRef = null;
-        this._storageKey = null;
-        this._pendingSource = null;
         this._inlineUpload = null;
-        this._showStatus = true;
-        this._icon = '';
-        this._maxSheetSize = 100000;
-        this._sheetChunkSize = 10000;
-        this._maxFileSize = 50;
-        this._showReshapeWarning = true;
-        this._rawFileData = null;
-        this._reshapeModal = null;
-        this._reshapeModalRendered = false;
-        this._persistToIndexedDB = false;
-        this._clearStorageOnFileRemove = true;
         this._uploadButtonLabel = 'Upload File';
         this._uploadButtonIcon = 'upload';
         this._uploadButtonVariant = 'outline';
         this._uploadAccept = '.csv,.tsv,.txt,.xlsx,.xls';
         this._uploadDescription = '';
         this._showUploadIcon = true;
-        this._settingsModal = null;
-        this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
-        this._showStatus = options.showStatus ?? true;
-        this._icon = options.icon ?? '';
+        this._pendingSource = null;
+        // Initialize data source
+        this._source = dataFrameSource({
+            maxFileSize: options.maxFileSize ?? 50,
+            maxSheetSize: options.maxSheetSize ?? 100000,
+            sheetChunkSize: options.sheetChunkSize ?? 10000,
+            persistToIndexedDB: options.persistToIndexedDB ?? false,
+            dbName: options.dbName ?? 'jux-dataframes',
+            storeName: options.storeName ?? 'frames'
+        });
+        // Wire up source callbacks
+        this._source.onLoad((result) => this._handleLoadResult(result));
+        this._source.onError((message) => this._handleError(message));
+        this._source.onProgress((loaded, total) => this._handleProgress(loaded, total));
+        // Initialize import settings modal
+        this._importModal = new ImportSettingsModal(id, this._source.driver, {
+            maxSheetSize: options.maxSheetSize ?? 100000,
+            sheetChunkSize: options.sheetChunkSize ?? 10000
+        });
         this._tableOptions = {
             striped: options.striped ?? true,
             hoverable: options.hoverable ?? true,
@@ -59,38 +58,20 @@ export class DataFrameComponent extends BaseComponent {
             paginated: options.paginated ?? true,
             rowsPerPage: options.rowsPerPage ?? 25
         };
-        this._maxSheetSize = options.maxSheetSize ?? 100000;
-        this._sheetChunkSize = options.sheetChunkSize ?? 10000;
-        this._maxFileSize = options.maxFileSize ?? 50;
-        this._showReshapeWarning = options.showReshapeWarning ?? true;
-        this._persistToIndexedDB = options.persistToIndexedDB ?? false;
-        this._clearStorageOnFileRemove = options.clearStorageOnFileRemove ?? true;
     }
     getTriggerEvents() { return TRIGGER_EVENTS; }
     getCallbackEvents() { return CALLBACK_EVENTS; }
     /* ═══════════════════════════════════════════════════
-     * DATA SOURCES
+     * DATA SOURCE METHODS (Delegate to DataFrameSource)
      * ═══════════════════════════════════════════════════ */
+    /**
+     * Load from IndexedDB storage
+     */
     fromStorage(key) {
-        this._storageKey = key;
         const loadFn = async () => {
             this.state.loading = true;
             this._updateStatus('Loading...', 'loading');
-            try {
-                const df = await this._driver.loadByName(key);
-                if (!df) {
-                    this._triggerCallback('error', 'No table found with key: ' + key, null, this);
-                    this.state.loading = false;
-                    this._updateStatus('No table found: ' + key, 'empty');
-                    return;
-                }
-                this._setDataFrame(df, 'storage: ' + key);
-            }
-            catch (err) {
-                this._triggerCallback('error', err.message, null, this);
-                this.state.loading = false;
-                this._updateStatus(err.message, 'error');
-            }
+            await this._source.fromStorage(key);
         };
         if (this._table) {
             loadFn();
@@ -100,30 +81,24 @@ export class DataFrameComponent extends BaseComponent {
         }
         return this;
     }
+    /**
+     * Load from a FileUpload component
+     */
     fromUpload(upload) {
         this._uploadRef = upload;
         this._pendingSource = async () => {
-            upload.bind('change', async (files) => {
-                if (!files || files.length === 0)
-                    return;
-                await this._handleFile(files[0]);
-            });
+            this._source.fromUpload(upload);
         };
         return this;
     }
+    /**
+     * Load from inline data
+     */
     fromData(data) {
         const loadFn = async () => {
             this.state.loading = true;
             this._updateStatus('Loading data...', 'loading');
-            try {
-                const df = new DataFrame(data);
-                this._setDataFrame(df, 'inline data');
-            }
-            catch (err) {
-                this._triggerCallback('error', err.message, null, this);
-                this.state.loading = false;
-                this._updateStatus(err.message, 'error');
-            }
+            this._source.fromData(data);
         };
         if (this._table) {
             loadFn();
@@ -133,6 +108,26 @@ export class DataFrameComponent extends BaseComponent {
         }
         return this;
     }
+    /**
+     * Load from a URL
+     */
+    fromUrl(url) {
+        const loadFn = async () => {
+            this.state.loading = true;
+            this._updateStatus('Fetching...', 'loading');
+            await this._source.fromUrl(url);
+        };
+        if (this._table) {
+            loadFn();
+        }
+        else {
+            this._pendingSource = loadFn;
+        }
+        return this;
+    }
+    /**
+     * Enable inline file upload UI
+     */
     withUpload(label = 'Upload File', accept = '.csv,.tsv,.txt,.xlsx,.xls', icon = 'upload') {
         this._inlineUpload = { label, accept, icon };
         this._uploadButtonLabel = label;
@@ -140,99 +135,47 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadButtonIcon = icon;
         return this;
     }
-    uploadLabel(label) {
-        this._uploadButtonLabel = label;
-        if (this._inlineUpload)
-            this._inlineUpload.label = label;
-        return this;
-    }
-    uploadIcon(icon) {
-        this._uploadButtonIcon = icon;
-        this._showUploadIcon = !!icon;
-        if (this._inlineUpload)
-            this._inlineUpload.icon = icon;
-        return this;
-    }
-    uploadVariant(variant) {
-        this._uploadButtonVariant = variant;
-        return this;
-    }
-    uploadAccept(accept) {
-        this._uploadAccept = accept;
-        if (this._inlineUpload)
-            this._inlineUpload.accept = accept;
-        return this;
-    }
-    uploadDescription(description) {
-        this._uploadDescription = description;
-        return this;
-    }
-    showUploadIcon(show) {
-        this._showUploadIcon = show;
-        return this;
-    }
     /* ═══════════════════════════════════════════════════
-     * STORAGE OPTIONS
+     * UPLOAD UI CONFIGURATION
      * ═══════════════════════════════════════════════════ */
-    persistToIndexedDB(enabled) {
-        this._persistToIndexedDB = enabled;
-        return this;
-    }
-    clearStorageOnFileRemove(enabled) {
-        this._clearStorageOnFileRemove = enabled;
-        return this;
-    }
+    uploadLabel(label) { this._uploadButtonLabel = label; return this; }
+    uploadIcon(icon) { this._uploadButtonIcon = icon; this._showUploadIcon = !!icon; return this; }
+    uploadVariant(variant) { this._uploadButtonVariant = variant; return this; }
+    uploadAccept(accept) { this._uploadAccept = accept; return this; }
+    uploadDescription(description) { this._uploadDescription = description; return this; }
+    showUploadIcon(show) { this._showUploadIcon = show; return this; }
     /* ═══════════════════════════════════════════════════
-     * CLEAR / RESET
+     * TABLE OPTIONS
      * ═══════════════════════════════════════════════════ */
-    async clear() {
-        if (this._clearStorageOnFileRemove && this._persistToIndexedDB && this._rawFileData?.file) {
-            try {
-                const tables = await this._driver.list();
-                const matchingTables = tables.filter(t => t.name === this._rawFileData.file.name);
-                for (const table of matchingTables) {
-                    await this._driver.delete(table.id);
-                }
-            }
-            catch (err) {
-                console.warn('[DataFrame] Failed to clear storage:', err);
-            }
-        }
-        this._df = null;
-        this._rawFileData = null;
-        this._sheets.clear();
-        this.state.loaded = false;
-        this.state.sourceName = '';
-        this.state.rowCount = 0;
-        this.state.colCount = 0;
-        if (this._table) {
-            this._table.columns([]).rows([]);
-        }
-        const wrapper = document.getElementById(this._id);
-        if (wrapper) {
-            const existingTabs = wrapper.querySelector('.jux-tabs');
-            if (existingTabs)
-                existingTabs.remove();
-        }
-        this._hideDataView();
-        if (this._uploadRef) {
-            this._uploadRef.clear();
-        }
-        return this;
-    }
+    striped(v) { this._tableOptions.striped = v; return this; }
+    hoverable(v) { this._tableOptions.hoverable = v; return this; }
+    sortable(v) { this._tableOptions.sortable = v; return this; }
+    filterable(v) { this._tableOptions.filterable = v; return this; }
+    paginated(v) { this._tableOptions.paginated = v; return this; }
+    rowsPerPage(v) { this._tableOptions.rowsPerPage = v; return this; }
     /* ═══════════════════════════════════════════════════
-     * UI TOGGLES
+     * ACCESSORS (Delegate to DataFrameSource)
      * ═══════════════════════════════════════════════════ */
-    showStatus(v) { this._showStatus = v; return this; }
-    statusIcon(v) { this._icon = v; return this; }
+    get df() { return this._source.df; }
+    get source() { return this._source; }
+    get table() { return this._table; }
+    get shape() { return this._source.shape; }
+    get columns() { return this._source.columns; }
+    toRows() { return this._source.df?.toRows() ?? []; }
+    toCSV(delimiter) { return this._source.df?.toCSV(delimiter) ?? ''; }
+    describe() { return this._source.df?.describe() ?? null; }
+    async save(key) {
+        return this._source.save(key);
+    }
     /* ═══════════════════════════════════════════════════
-     * TRANSFORM API
+     * TRANSFORM API (Operate on underlying DataFrame)
      * ═══════════════════════════════════════════════════ */
     apply(fn) {
-        if (!this._df)
+        const df = this._source.df;
+        if (!df)
             return this;
-        const result = fn(this._df);
-        this._setDataFrame(result, this.state.sourceName + ' (transformed)');
+        const result = fn(df);
+        this._source.fromData(result.toRows(), this.state.sourceName + ' (transformed)');
         this._triggerCallback('transform', result, null, this);
         return this;
     }
@@ -251,118 +194,69 @@ export class DataFrameComponent extends BaseComponent {
     tail(n = 5) {
         return this.apply(df => df.tail(n));
     }
-    withColumn(name, fn) {
-        return this.apply(df => df.withColumn(name, fn));
-    }
-    where(col, op, value) {
-        return this.apply(df => df.where(col, op, value));
-    }
     /* ═══════════════════════════════════════════════════
-     * ACCESSORS
+     * CLEAR / RESET
      * ═══════════════════════════════════════════════════ */
-    get df() { return this._df; }
-    get driver() { return this._driver; }
-    get table() { return this._table; }
-    describe() { return this._df?.describe() ?? null; }
-    toCSV(delimiter) { return this._df?.toCSV(delimiter) ?? ''; }
-    toRows() { return this._df?.toRows() ?? []; }
-    get shape() { return this._df?.shape ?? [0, 0]; }
-    get columns() { return this._df?.columns ?? []; }
-    async save(key) {
-        if (!this._df)
-            return null;
-        const name = key ?? this._storageKey ?? this._id;
-        return this._driver.store(name, this._df);
+    async clear() {
+        await this._source.clearStorage();
+        this._source.clear();
+        this.state.loaded = false;
+        this.state.sourceName = '';
+        this.state.rowCount = 0;
+        this.state.colCount = 0;
+        if (this._table) {
+            this._table.columns([]).rows([]);
+        }
+        this._hideDataView();
+        this._uploadRef?.clear();
+        return this;
     }
     /* ═══════════════════════════════════════════════════
-     * TABLE OPTIONS
-     * ═══════════════════════════════════════════════════ */
-    striped(v) { this._tableOptions.striped = v; return this; }
-    hoverable(v) { this._tableOptions.hoverable = v; return this; }
-    sortable(v) { this._tableOptions.sortable = v; return this; }
-    filterable(v) { this._tableOptions.filterable = v; return this; }
-    paginated(v) { this._tableOptions.paginated = v; return this; }
-    rowsPerPage(v) { this._tableOptions.rowsPerPage = v; return this; }
-    maxSheetSize(v) { this._maxSheetSize = v; return this; }
-    sheetChunkSize(v) { this._sheetChunkSize = v; return this; }
-    maxFileSize(mb) { this._maxFileSize = mb; return this; }
-    /* ═══════════════════════════════════════════════════
-     * FILE HANDLING
+     * INTERNAL HANDLERS
      * ═══════════════════════════════════════════════════ */
-    async _handleFile(file) {
-        const fileSizeMB = file.size / (1024 * 1024);
-        if (fileSizeMB > this._maxFileSize) {
-            this._updateStatus(`File too large (${fileSizeMB.toFixed(1)}MB). Max: ${this._maxFileSize}MB`, 'error');
+    _handleLoadResult(result) {
+        if (result.error) {
+            this._handleError(result.error);
             return;
         }
-        this.state.loading = true;
-        this._updateStatus('Parsing ' + file.name + '...', 'loading');
-        try {
-            const isExcel = file.name.toLowerCase().endsWith('.xlsx') ||
-                file.name.toLowerCase().endsWith('.xls');
-            if (isExcel) {
-                this._rawFileData = { file, isExcel: true };
-                const sheets = await this._driver.streamFileMultiSheet(file, {
-                    maxSheetSize: this._maxSheetSize,
-                    sheetChunkSize: this._sheetChunkSize,
-                    onProgress: (loaded, total) => {
-                        const pct = total ? Math.round((loaded / total) * 100) : 0;
-                        this._updateStatus(`Parsing ${file.name}... ${pct}%`, 'loading');
-                    }
-                });
-                const sheetNames = Object.keys(sheets);
-                if (sheetNames.length === 0) {
-                    this._updateStatus('No data found in file', 'error');
-                    this.state.loading = false;
-                    return;
-                }
-                if (this._persistToIndexedDB) {
-                    await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
-                }
-                if (sheetNames.length > 1) {
-                    this._renderMultiSheet(sheets, file.name);
-                }
-                else {
-                    this._setDataFrame(sheets[sheetNames[0]], file.name);
-                }
-            }
-            else {
-                const text = await file.text();
-                this._rawFileData = { file, text, isExcel: false };
-                const df = this._driver.parseCSV(text, {
-                    autoDetectDelimiter: true,
-                    hasHeader: true
-                });
-                if (this._persistToIndexedDB) {
-                    await this._driver.store(file.name, df, { source: file.name });
-                }
-                this._setDataFrame(df, file.name);
-            }
+        this.state.loading = false;
+        this.state.loaded = true;
+        this.state.sourceName = result.sourceName;
+        this.state.rowCount = result.df?.height ?? 0;
+        this.state.colCount = result.df?.width ?? 0;
+        if (result.isMultiSheet && result.sheets) {
+            this._renderMultiSheet(result.sheets, result.sourceName);
         }
-        catch (err) {
-            this._triggerCallback('error', err.message, null, this);
-            this.state.loading = false;
-            this._updateStatus('Error: ' + err.message, 'error');
+        else if (result.df) {
+            this._renderSingleSheet(result.df);
         }
+        this._updateStatus('', 'success');
+        this._triggerCallback('load', result.df, null, this);
     }
-    /* ═══════════════════════════════════════════════════
-     * MULTI-SHEET RENDERING
-     * ═══════════════════════════════════════════════════ */
-    _renderMultiSheet(sheets, sourceName) {
+    _handleError(message) {
         this.state.loading = false;
-        this._sheets.clear();
+        this._updateStatus(message, 'error');
+        this._triggerCallback('error', message, null, this);
+    }
+    _handleProgress(loaded, total) {
+        const pct = total ? Math.round((loaded / total) * 100) : 0;
+        this._updateStatus(`Loading... ${pct}%`, 'loading');
+    }
+    _renderSingleSheet(df) {
+        if (this._table) {
+            const columnDefs = df.columns.map(col => ({ key: col, label: col }));
+            this._table.columns(columnDefs).rows(df.toRows());
+        }
+        this._showDataView();
+    }
+    _renderMultiSheet(sheets, sourceName) {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        const existingTable = wrapper.querySelector('.jux-table-wrapper');
-        if (existingTable)
-            existingTable.remove();
+        // Clear existing tabs
         const existingTabs = wrapper.querySelector('.jux-tabs');
         if (existingTabs)
             existingTabs.remove();
-        Object.entries(sheets).forEach(([name, df]) => {
-            this._sheets.set(name, df);
-        });
         const sheetNames = Object.keys(sheets);
         const sanitizeId = (name) => name.replace(/[^a-zA-Z0-9_-]/g, '_');
         const tabDefs = sheetNames.map(name => ({
@@ -374,36 +268,18 @@ export class DataFrameComponent extends BaseComponent {
             tabs: tabDefs,
             activeTab: sanitizeId(sheetNames[0])
         });
-        const idToSheetName = new Map();
-        sheetNames.forEach(name => idToSheetName.set(sanitizeId(name), name));
-        this._tabs.bind('tabChange', (tabId) => {
-            const originalName = idToSheetName.get(tabId) || tabId;
-            this._df = this._sheets.get(originalName) || null;
-        });
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
         if (dataContainer) {
             dataContainer.style.display = '';
-        }
-        const tabsContainer = document.createElement('div');
-        tabsContainer.className = 'jux-dataframe-tabs';
-        if (dataContainer) {
+            const tabsContainer = document.createElement('div');
+            tabsContainer.className = 'jux-dataframe-tabs';
             dataContainer.appendChild(tabsContainer);
+            this._tabs.render(tabsContainer);
         }
-        else {
-            wrapper.appendChild(tabsContainer);
-        }
-        this._tabs.render(tabsContainer);
-        sheetNames.forEach((sheetName) => {
+        sheetNames.forEach(sheetName => {
             const df = sheets[sheetName];
             const safeId = sanitizeId(sheetName);
-            const table = new Table(`${this._id}-table-${safeId}`, {
-                striped: this._tableOptions.striped,
-                hoverable: this._tableOptions.hoverable,
-                sortable: this._tableOptions.sortable,
-                filterable: this._tableOptions.filterable,
-                paginated: this._tableOptions.paginated,
-                rowsPerPage: this._tableOptions.rowsPerPage
-            });
+            const table = new Table(`${this._id}-table-${safeId}`, this._tableOptions);
             const columnDefs = df.columns.map(col => ({ key: col, label: col }));
             table.columns(columnDefs).rows(df.toRows());
             const settingsBtn = new Button(`${this._id}-settings-${safeId}`, {
@@ -411,86 +287,37 @@ export class DataFrameComponent extends BaseComponent {
                 variant: 'ghost',
                 size: 'small'
             });
-            settingsBtn.bind('click', () => this._showReshapeModal());
+            settingsBtn.bind('click', () => this._showImportSettings());
             this._tabs.addTabContent(safeId, [settingsBtn, table]);
         });
-        const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
-        this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
         this._showDataView();
-        this._df = sheets[sheetNames[0]];
-        this._triggerCallback('load', this._df, null, this);
     }
     /* ═══════════════════════════════════════════════════
-     * INTERNAL
+     * UI HELPERS
      * ═══════════════════════════════════════════════════ */
-    _updateStatus(text, type = 'empty') {
+    _updateStatus(text, type) {
         const el = document.getElementById(`${this._id}-status`);
         if (!el)
             return;
         if (type === 'loading' || type === 'error') {
             el.style.display = '';
-            el.className = 'jux-dataframe-status';
-            el.classList.add(`jux-dataframe-status-${type}`);
-            el.innerHTML = '';
-            if (this._icon && type === 'error') {
-                const iconEl = renderIcon(this._icon);
-                iconEl.style.width = '16px';
-                iconEl.style.height = '16px';
-                iconEl.style.marginRight = '6px';
-                iconEl.style.verticalAlign = 'middle';
-                el.appendChild(iconEl);
-            }
-            const span = document.createElement('span');
-            span.textContent = text;
-            el.appendChild(span);
+            el.className = `jux-dataframe-status jux-dataframe-status-${type}`;
+            el.textContent = text;
         }
         else {
             el.style.display = 'none';
         }
     }
-    _setDataFrame(df, sourceName) {
-        this._df = df;
-        this.state.loaded = true;
-        this.state.loading = false;
-        this.state.sourceName = sourceName;
-        this.state.rowCount = df.height;
-        this.state.colCount = df.width;
-        const cols = df.columns;
-        const rows = df.toRows();
-        const emptyColumns = cols.filter(c => {
-            if (!c.startsWith('__EMPTY'))
-                return false;
-            return rows.every(row => {
-                const val = row[c];
-                return val === null || val === undefined || String(val).trim() === '';
-            });
-        });
-        if (emptyColumns.length > 0) {
-            const keepCols = cols.filter(c => !emptyColumns.includes(c));
-            if (keepCols.length > 0) {
-                this._df = df.select(...keepCols);
-            }
-        }
-        if (this._table && this._df) {
-            const columnDefs = this._df.columns.map(col => ({ key: col, label: col }));
-            this._table.columns(columnDefs).rows(this._df.toRows());
-        }
-        this._showDataView();
-        this._updateStatus('', 'success');
-        this._triggerCallback('load', this._df, null, this);
-    }
     _showDataView() {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
-        if (uploadArea) {
+        if (uploadArea)
             uploadArea.style.display = 'none';
-        }
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
-        if (dataContainer) {
+        if (dataContainer)
             dataContainer.style.display = '';
-        }
         this._updateSettingsGear();
     }
     _hideDataView() {
@@ -498,468 +325,61 @@ export class DataFrameComponent extends BaseComponent {
         if (!wrapper)
             return;
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
-        if (uploadArea) {
+        if (uploadArea)
             uploadArea.style.display = '';
-        }
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
-        if (dataContainer) {
+        if (dataContainer)
             dataContainer.style.display = 'none';
-        }
     }
     _updateSettingsGear() {
         const gear = document.getElementById(`${this._id}-settings-gear`);
-        if (!gear || !this._df)
+        if (!gear || !this._source.df)
             return;
-        const isMalformed = this._detectMalformedData(this._df);
+        const isMalformed = this._source.detectMalformed();
         if (isMalformed) {
             gear.classList.add('jux-dataframe-gear-warning');
             gear.title = `${this.state.sourceName} — May need reformatting`;
         }
         else {
             gear.classList.remove('jux-dataframe-gear-warning');
-            gear.title = `${this.state.sourceName} — ${this._df.height} rows × ${this._df.width} cols`;
+            gear.title = `${this.state.sourceName} — ${this._source.height} rows × ${this._source.width} cols`;
         }
     }
     _showSettingsModal() {
-        this._cleanupReshapeModal();
-        const fileInfo = this._rawFileData?.file;
-        const isMalformed = this._df ? this._detectMalformedData(this._df) : false;
-        this._settingsModal = new Modal(`${this._id}-settings-modal`, {
-            title: 'Data Settings',
-            size: 'medium',
-            close: true,
-            backdropClose: true
-        });
-        const fileSizeKB = fileInfo ? (fileInfo.size / 1024).toFixed(1) : '0';
-        const fileName = fileInfo?.name || this.state.sourceName || 'Unknown';
-        let contentHTML = `
-            <div class="jux-dataframe-settings-content">
-                <div class="jux-dataframe-settings-section">
-                    <div class="jux-dataframe-settings-label">Source</div>
-                    <div class="jux-dataframe-settings-value">
-                        <strong>${this._escapeHtml(fileName)}</strong>
-                        ${fileInfo ? `<span class="jux-muted" style="margin-left: 8px;">${fileSizeKB} KB</span>` : ''}
-                    </div>
-                </div>
-                <div class="jux-dataframe-settings-section">
-                    <div class="jux-dataframe-settings-label">Data</div>
-                    <div class="jux-dataframe-settings-value">
-                        ${this._df ? `${this._df.height} rows × ${this._df.width} columns` : 'No data loaded'}
-                        ${isMalformed ? '<span style="color: hsl(var(--warning)); margin-left: 8px;">⚠️ May need reformatting</span>' : ''}
-                    </div>
-                </div>
-        `;
-        if (this._rawFileData) {
-            contentHTML += `
-                <div class="jux-dataframe-settings-section">
-                    <div class="jux-dataframe-settings-label">Import</div>
-                    <div class="jux-dataframe-settings-value">
-                        <button id="${this._id}-adjust-import" class="jux-button jux-button-outline jux-button-sm">
-                            ⚙️ Adjust Header Row / Delimiter
-                        </button>
-                    </div>
-                </div>
-            `;
-        }
-        contentHTML += `</div>`;
-        this._settingsModal
-            .content(contentHTML)
-            .actions([
-            {
-                label: 'Remove Data',
-                variant: 'secondary',
-                click: async () => {
-                    await this.clear();
-                    this._settingsModal.closeModal();
-                }
-            },
-            {
-                label: 'Done',
-                variant: 'primary',
-                click: () => this._settingsModal.closeModal()
-            }
-        ]);
-        this._settingsModal.render(document.body);
-        this._settingsModal.open();
-        requestAnimationFrame(() => {
-            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
-            if (adjustBtn) {
-                adjustBtn.addEventListener('click', () => {
-                    this._settingsModal.closeModal();
-                    this._showReshapeModal();
-                });
-            }
-        });
-    }
-    /* ═══════════════════════════════════════════════════
-     * MALFORMED DATA DETECTION
-     * ═══════════════════════════════════════════════════ */
-    _detectMalformedData(df) {
-        const columns = df.columns;
-        const rows = df.toRows();
-        const hasGenericColumns = columns.some(col => col.startsWith('__EMPTY') ||
-            col.match(/^_\d+$/) ||
-            col.match(/^col_\d+$/));
-        if (hasGenericColumns)
-            return true;
-        if (rows.length > 0) {
-            const firstRow = rows[0];
-            const values = Object.values(firstRow);
-            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
-            if (nonEmpty.length < columns.length * 0.5)
-                return true;
-            const hasMetadata = values.some(v => String(v).includes('Exported') ||
-                String(v).includes('Generated') ||
-                String(v).includes('Report'));
-            if (hasMetadata)
-                return true;
-        }
-        return false;
-    }
-    /* ═══════════════════════════════════════════════════
-     * RESHAPE MODAL
-     * ═══════════════════════════════════════════════════ */
-    _showReshapeModal() {
-        if (!this._rawFileData)
-            return;
-        if (this._rawFileData.isExcel) {
-            this._showExcelReshapeModal();
-        }
-        else {
-            this._showCSVReshapeModal();
-        }
-    }
-    _cleanupReshapeModal() {
-        if (this._reshapeModal && this._reshapeModalRendered) {
-            const oldEl = document.getElementById(`${this._id}-reshape-modal`);
-            if (oldEl)
-                oldEl.remove();
-            this._reshapeModal = null;
-            this._reshapeModalRendered = false;
-        }
-    }
-    _escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    _buildClickablePreviewHTML(rawRows, selectedSheetRow) {
-        let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
-        for (const { sheetRow, values } of rawRows) {
-            const isHeader = (sheetRow === selectedSheetRow);
-            const isSkipped = (sheetRow < selectedSheetRow);
-            let rowStyle = 'border-bottom: 1px solid hsl(var(--border)); cursor: pointer; transition: background 0.1s;';
-            if (isHeader) {
-                rowStyle += 'background: hsl(142 71% 45% / 0.15); font-weight: 600;';
-            }
-            else if (isSkipped) {
-                rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
-            }
-            html += `<tr data-sheet-row="${sheetRow}" style="${rowStyle}" onmouseover="this.style.outline='2px solid hsl(142 71% 45% / 0.5)'" onmouseout="this.style.outline=''">`;
-            html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center; user-select: none;">`;
-            if (isHeader) {
-                html += `<span style="color: hsl(142 71% 45%);">▶ ${sheetRow}</span>`;
-            }
-            else {
-                html += `${sheetRow}`;
-            }
-            html += '</td>';
-            const displayCols = values.slice(0, 6);
-            displayCols.forEach(val => {
-                const displayVal = val != null ? String(val).substring(0, 20) : '';
-                const cellStyle = isHeader
-                    ? 'padding: 8px 12px; font-weight: 600; color: hsl(var(--foreground));'
-                    : 'padding: 8px 12px;';
-                html += `<td style="${cellStyle}">${this._escapeHtml(displayVal)}</td>`;
-            });
-            if (values.length > 6) {
-                html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
-            }
-            html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap; user-select: none;">`;
-            if (isHeader) {
-                html += '<span style="background: hsl(142 71% 45%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;">HEADER</span>';
-            }
-            else if (isSkipped) {
-                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">skipped</span>';
-            }
-            else {
-                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
-            }
-            html += '</td></tr>';
-        }
-        html += '</table>';
-        return html;
-    }
-    async _showExcelReshapeModal() {
-        if (!this._rawFileData?.file)
-            return;
-        this._cleanupReshapeModal();
-        const rawRows = await this._driver.readRawExcelRows(this._rawFileData.file, 15);
-        if (rawRows.length === 0)
-            return;
-        let selectedSheetRow = rawRows[0].sheetRow;
-        for (const { sheetRow, values } of rawRows) {
-            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
-            if (nonEmpty.length < values.length * 0.5)
-                continue;
-            const nonNumeric = nonEmpty.filter(v => {
-                const str = String(v).trim();
-                return isNaN(Number(str)) && str !== '';
-            }).length;
-            if (nonNumeric >= nonEmpty.length * 0.7) {
-                selectedSheetRow = sheetRow;
-                break;
-            }
-        }
-        this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
-            title: 'Excel Import Settings',
-            size: 'large',
-            close: true,
-            backdropClose: false
+        this._importModal.showSettings({
+            fileName: this._source.rawFileData?.file?.name || this.state.sourceName,
+            fileSize: this._source.rawFileData?.file?.size,
+            rowCount: this._source.height,
+            colCount: this._source.width,
+            isMalformed: this._source.detectMalformed(),
+            hasRawFileData: !!this._source.rawFileData
+        }, {
+            onClear: async () => { await this.clear(); },
+            onAdjustImport: () => { this._showImportSettings(); }
         });
-        const modalContentHTML = `
-            <div style="margin-bottom: 1rem;">
-                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
-                <input type="hidden" id="${this._id}-header-row" value="${selectedSheetRow}" />
-            </div>
-            <div>
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
-                <div id="${this._id}-preview" style="font-family: ui-monospace, monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
-            </div>
-        `;
-        this._reshapeModal
-            .content(modalContentHTML)
-            .actions([
-            {
-                label: 'Cancel',
-                variant: 'secondary',
-                click: () => this._reshapeModal.closeModal()
-            },
-            {
-                label: 'Apply & Re-import',
-                variant: 'primary',
-                click: async () => {
-                    const input = document.getElementById(`${this._id}-header-row`);
-                    const headerRow = parseInt(input.value) || 0;
-                    this.state.loading = true;
-                    this._updateStatus('Re-parsing with new settings...', 'loading');
-                    try {
-                        const sheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
-                            headerRow,
-                            maxSheetSize: this._maxSheetSize,
-                            sheetChunkSize: this._sheetChunkSize
-                        });
-                        const sheetNames = Object.keys(sheets);
-                        if (sheetNames.length === 0) {
-                            this._updateStatus(`No data found with header at row ${headerRow}. Try a different row.`, 'error');
-                            this.state.loading = false;
-                            return;
-                        }
-                        await this._driver.store(this._rawFileData.file.name, sheets[sheetNames[0]], { source: this._rawFileData.file.name });
-                        if (sheetNames.length > 1) {
-                            this._renderMultiSheet(sheets, this._rawFileData.file.name);
-                        }
-                        else {
-                            this._setDataFrame(sheets[sheetNames[0]], this._rawFileData.file.name);
-                        }
-                        this._reshapeModal.closeModal();
-                    }
-                    catch (err) {
-                        this._updateStatus(`Error: ${err.message}`, 'error');
-                        this.state.loading = false;
-                    }
-                }
-            }
-        ]);
-        this._reshapeModal.render(document.body);
-        this._reshapeModalRendered = true;
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        const previewDiv = document.getElementById(`${this._id}-preview`);
-        const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-        const hiddenInput = document.getElementById(`${this._id}-header-row`);
-        const updateHint = (row) => {
-            if (!hintDiv)
-                return;
-            const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
-            const headerNames = vals.filter((v) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
-            const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
-            if (row > rawRows[0].sheetRow) {
-                hintDiv.innerHTML = `Sheet row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows before it will be skipped.`;
-            }
-            else {
-                hintDiv.innerHTML = `Sheet row <strong>${row}</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
-            }
-        };
-        const renderPreview = (selected) => {
-            if (!previewDiv)
-                return;
-            previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
-            previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
-                tr.addEventListener('click', () => {
-                    const rowIdx = parseInt(tr.dataset.sheetRow);
-                    hiddenInput.value = String(rowIdx);
-                    updateHint(rowIdx);
-                    renderPreview(rowIdx);
-                });
-            });
-        };
-        updateHint(selectedSheetRow);
-        renderPreview(selectedSheetRow);
-        this._reshapeModal.open();
     }
-    _showCSVReshapeModal() {
-        if (!this._rawFileData?.text)
+    _showImportSettings() {
+        const rawData = this._source.rawFileData;
+        if (!rawData)
             return;
-        this._cleanupReshapeModal();
-        const text = this._rawFileData.text;
-        const detected = this._driver._detectDelimiter(text);
-        const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
-        const rawRows = [];
-        const maxPreviewRows = Math.min(lines.length, 15);
-        for (let i = 0; i < maxPreviewRows; i++) {
-            if (!lines[i]) {
-                rawRows.push({ sheetRow: i, values: [''] });
-                continue;
-            }
-            const values = this._driver._parseLine(lines[i], detected);
-            rawRows.push({ sheetRow: i, values });
-        }
-        let selectedRow = 0;
-        for (const { sheetRow, values } of rawRows) {
-            const nonEmpty = values.filter((v) => v.trim() !== '');
-            if (nonEmpty.length < values.length * 0.5)
-                continue;
-            const nonNumeric = nonEmpty.filter((v) => {
-                const trimmed = v.trim();
-                return isNaN(Number(trimmed)) && trimmed !== '';
-            }).length;
-            if (nonNumeric >= nonEmpty.length * 0.7) {
-                selectedRow = sheetRow;
-                break;
-            }
-        }
-        this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
-            title: 'CSV Import Settings',
-            size: 'large',
-            close: true,
-            backdropClose: false
-        });
-        const modalContentHTML = `
-            <div style="margin-bottom: 1rem;">
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Delimiter</label>
-                <select id="${this._id}-delimiter" class="jux-input-element" style="width: 100%;">
-                    <option value=",">Comma (,)</option>
-                    <option value="|">Pipe (|)</option>
-                    <option value="&#9;">Tab (\\t)</option>
-                    <option value=";">Semicolon (;)</option>
-                </select>
-            </div>
-            <div style="margin-bottom: 1rem;">
-                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
-                <input type="hidden" id="${this._id}-header-row" value="${selectedRow}" />
-            </div>
-            <div>
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
-                <div id="${this._id}-preview" style="font-family: monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
-            </div>
-        `;
-        this._reshapeModal
-            .content(modalContentHTML)
-            .actions([
-            {
-                label: 'Cancel',
-                variant: 'secondary',
-                click: () => this._reshapeModal.closeModal()
-            },
-            {
-                label: 'Apply & Re-import',
-                variant: 'primary',
-                click: async () => {
-                    const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-                    const hiddenInput = document.getElementById(`${this._id}-header-row`);
-                    const delim = delimiterSelect.value;
-                    const headerRow = parseInt(hiddenInput.value) || 0;
-                    this.state.loading = true;
-                    this._updateStatus('Re-parsing with new settings...', 'loading');
-                    try {
-                        const df = this._driver.parseCSV(this._rawFileData.text, {
-                            delimiter: delim,
-                            headerRow,
-                            hasHeader: true
-                        });
-                        await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                        this._setDataFrame(df, this._rawFileData.file.name);
-                        this._reshapeModal.closeModal();
-                    }
-                    catch (err) {
-                        this._updateStatus(`Error: ${err.message}`, 'error');
-                        this.state.loading = false;
-                    }
-                }
-            }
-        ]);
-        this._reshapeModal.render(document.body);
-        this._reshapeModalRendered = true;
-        requestAnimationFrame(() => {
-            const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-            const previewDiv = document.getElementById(`${this._id}-preview`);
-            const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-            const hiddenInput = document.getElementById(`${this._id}-header-row`);
-            if (delimiterSelect)
-                delimiterSelect.value = detected;
-            const updateHint = (row) => {
-                if (!hintDiv)
-                    return;
-                const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
-                const headerNames = vals.filter((v) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
-                const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
-                if (row > rawRows[0].sheetRow) {
-                    hintDiv.innerHTML = `Sheet row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows before it will be skipped.`;
+        this._importModal.showImportSettings(rawData, {
+            onReimport: async (result, sourceName) => {
+                if (result instanceof DataFrame) {
+                    this._source.fromData(result.toRows(), sourceName);
                 }
                 else {
-                    hintDiv.innerHTML = `Sheet row <strong>${row}</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
-                }
-            };
-            const reparse = () => {
-                const delim = delimiterSelect?.value || ',';
-                rawRows.length = 0;
-                for (let i = 0; i < maxPreviewRows; i++) {
-                    if (!lines[i]) {
-                        rawRows.push({ sheetRow: i, values: [''] });
-                        continue;
-                    }
-                    const values = this._driver._parseLine(lines[i], delim);
-                    rawRows.push({ sheetRow: i, values });
+                    // Multi-sheet - handled by source callbacks
                 }
-            };
-            const renderPreview = (selected) => {
-                if (!previewDiv)
-                    return;
-                previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
-                previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
-                    tr.addEventListener('click', () => {
-                        const rowIdx = parseInt(tr.dataset.sheetRow);
-                        hiddenInput.value = String(rowIdx);
-                        updateHint(rowIdx);
-                        renderPreview(rowIdx);
-                    });
-                });
-            };
-            if (delimiterSelect) {
-                delimiterSelect.addEventListener('change', () => {
-                    reparse();
-                    const current = parseInt(hiddenInput.value) || 0;
-                    updateHint(current);
-                    renderPreview(current);
-                });
+            },
+            onError: (message) => this._handleError(message),
+            onStatusUpdate: (text, type) => {
+                this.state.loading = type === 'loading';
+                this._updateStatus(text, type);
             }
-            updateHint(selectedRow);
-            renderPreview(selectedRow);
-            this._reshapeModal.open();
         });
     }
     /* ═══════════════════════════════════════════════════
-     * UPDATE & RENDER
+     * RENDER
      * ═══════════════════════════════════════════════════ */
     update(_prop, _value) { }
     render(targetId) {
@@ -976,37 +396,33 @@ export class DataFrameComponent extends BaseComponent {
         if (this._inlineUpload) {
             const uploadArea = document.createElement('div');
             uploadArea.className = 'jux-dataframe-upload-area';
-            uploadArea.id = `${this._id}-upload-area`;
             const uploadOpts = {
                 label: this._uploadButtonLabel,
                 accept: this._uploadAccept,
                 variant: this._uploadButtonVariant,
             };
-            if (this._showUploadIcon && this._uploadButtonIcon) {
+            if (this._showUploadIcon)
                 uploadOpts.icon = this._uploadButtonIcon;
-            }
             const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
             this._uploadRef = upload;
-            this._pendingSource = async () => {
-                upload.bind('change', async (files) => {
-                    if (!files || files.length === 0) {
-                        await this.clear();
-                        return;
-                    }
-                    await this._handleFile(files[0]);
-                });
-            };
+            // Wire upload to source
+            upload.bind('change', async (files) => {
+                if (!files || files.length === 0) {
+                    await this.clear();
+                    return;
+                }
+                this.state.loading = true;
+                this._updateStatus(`Parsing ${files[0].name}...`, 'loading');
+                await this._source.fromFile(files[0]);
+            });
             const uploadContainer = document.createElement('div');
             uploadContainer.className = 'jux-dataframe-upload';
-            uploadContainer.id = `${this._id}-upload-container`;
             uploadArea.appendChild(uploadContainer);
-            if (this._showStatus) {
-                const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status';
-                statusBar.id = `${this._id}-status`;
-                statusBar.style.display = 'none';
-                uploadArea.appendChild(statusBar);
-            }
+            const statusBar = document.createElement('div');
+            statusBar.className = 'jux-dataframe-status';
+            statusBar.id = `${this._id}-status`;
+            statusBar.style.display = 'none';
+            uploadArea.appendChild(statusBar);
             if (this._uploadDescription) {
                 const descEl = document.createElement('div');
                 descEl.className = 'jux-dataframe-upload-description';
@@ -1037,14 +453,7 @@ export class DataFrameComponent extends BaseComponent {
         dataContainer.appendChild(toolbar);
         wrapper.appendChild(dataContainer);
         // Table
-        const tbl = new Table(`${this._id}-table`, {
-            striped: this._tableOptions.striped,
-            hoverable: this._tableOptions.hoverable,
-            sortable: this._tableOptions.sortable,
-            filterable: this._tableOptions.filterable,
-            paginated: this._tableOptions.paginated,
-            rowsPerPage: this._tableOptions.rowsPerPage
-        });
+        const tbl = new Table(`${this._id}-table`, this._tableOptions);
         tbl.render(dataContainer);
         this._table = tbl;
         if (this._pendingSource) {