juxscript 1.1.227 → 1.1.230

package/lib/components/dataframe.js

@@ -4,9 +4,9 @@ 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 { ImportSettingsModal } from './dataframe/ImportSettingsModal.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
 export class DataFrameComponent extends BaseComponent {
@@ -30,15 +30,11 @@ export class DataFrameComponent extends BaseComponent {
         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';
@@ -47,14 +43,7 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadAccept = '.csv,.tsv,.txt,.xlsx,.xls';
         this._uploadDescription = '';
         this._showUploadIcon = true;
-        // ✅ Collapsible state
-        this._collapsible = false;
-        this._collapsed = false;
-        this._summaryTemplate = null;
-        this._detailsElement = null;
-        this._settingsModal = null;
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
-        this._showStatus = options.showStatus ?? true;
         this._icon = options.icon ?? '';
         this._tableOptions = {
             striped: options.striped ?? true,
@@ -67,13 +56,13 @@ export class DataFrameComponent extends BaseComponent {
         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;
-        // ✅ Collapsible options
-        this._collapsible = options.collapsible ?? false;
-        this._collapsed = options.collapsed ?? false;
-        this._summaryTemplate = options.summaryTemplate ?? null;
+        // Initialize the import settings modal
+        this._importSettingsModal = new ImportSettingsModal(id, this._driver, {
+            maxSheetSize: this._maxSheetSize,
+            sheetChunkSize: this._sheetChunkSize
+        });
     }
     getTriggerEvents() { return TRIGGER_EVENTS; }
     getCallbackEvents() { return CALLBACK_EVENTS; }
@@ -149,18 +138,12 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadButtonIcon = icon;
         return this;
     }
-    /**
-     * Set upload button label
-     */
     uploadLabel(label) {
         this._uploadButtonLabel = label;
         if (this._inlineUpload)
             this._inlineUpload.label = label;
         return this;
     }
-    /**
-     * Set upload button icon
-     */
     uploadIcon(icon) {
         this._uploadButtonIcon = icon;
         this._showUploadIcon = !!icon;
@@ -168,49 +151,31 @@ export class DataFrameComponent extends BaseComponent {
             this._inlineUpload.icon = icon;
         return this;
     }
-    /**
-     * Set upload button variant (outline, primary, ghost, etc.)
-     */
     uploadVariant(variant) {
         this._uploadButtonVariant = variant;
         return this;
     }
-    /**
-     * Set accepted file types
-     */
     uploadAccept(accept) {
         this._uploadAccept = accept;
         if (this._inlineUpload)
             this._inlineUpload.accept = accept;
         return this;
     }
-    /**
-     * Set description text below the upload button
-     */
     uploadDescription(description) {
         this._uploadDescription = description;
         return this;
     }
-    /**
-     * Show/hide upload icon
-     */
     showUploadIcon(show) {
         this._showUploadIcon = show;
         return this;
     }
     /* ═══════════════════════════════════════════════════
-     * STORAGE OPTIONS (fluent API)
+     * STORAGE OPTIONS
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Enable/disable IndexedDB persistence (default: false = session only)
-     */
     persistToIndexedDB(enabled) {
         this._persistToIndexedDB = enabled;
         return this;
     }
-    /**
-     * Clear stored data when file is removed (default: true)
-     */
     clearStorageOnFileRemove(enabled) {
         this._clearStorageOnFileRemove = enabled;
         return this;
@@ -218,11 +183,7 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * CLEAR / RESET
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Clear the current data and reset the table
-     */
     async clear() {
-        // Clear storage if enabled
         if (this._clearStorageOnFileRemove && this._persistToIndexedDB && this._rawFileData?.file) {
             try {
                 const tables = await this._driver.list();
@@ -235,7 +196,6 @@ export class DataFrameComponent extends BaseComponent {
                 console.warn('[DataFrame] Failed to clear storage:', err);
             }
         }
-        // Reset state
         this._df = null;
         this._rawFileData = null;
         this._sheets.clear();
@@ -243,24 +203,16 @@ export class DataFrameComponent extends BaseComponent {
         this.state.sourceName = '';
         this.state.rowCount = 0;
         this.state.colCount = 0;
-        // Clear table display
         if (this._table) {
             this._table.columns([]).rows([]);
         }
-        // Remove tabs if present
         const wrapper = document.getElementById(this._id);
         if (wrapper) {
             const existingTabs = wrapper.querySelector('.jux-tabs');
             if (existingTabs)
                 existingTabs.remove();
         }
-        // ✅ Hide data view, show upload
         this._hideDataView();
-        // ✅ Hide collapsible details
-        if (this._collapsible && this._detailsElement) {
-            this._detailsElement.style.display = 'none';
-        }
-        // ✅ Clear file from upload component
         if (this._uploadRef) {
             this._uploadRef.clear();
         }
@@ -269,7 +221,6 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * UI TOGGLES
      * ═══════════════════════════════════════════════════ */
-    showStatus(v) { this._showStatus = v; return this; }
     statusIcon(v) { this._icon = v; return this; }
     /* ═══════════════════════════════════════════════════
      * TRANSFORM API
@@ -321,7 +272,7 @@ export class DataFrameComponent extends BaseComponent {
         return this._driver.store(name, this._df);
     }
     /* ═══════════════════════════════════════════════════
-     * TABLE OPTIONS (fluent, pre-render)
+     * TABLE OPTIONS
      * ═══════════════════════════════════════════════════ */
     striped(v) { this._tableOptions.striped = v; return this; }
     hoverable(v) { this._tableOptions.hoverable = v; return this; }
@@ -333,76 +284,7 @@ export class DataFrameComponent extends BaseComponent {
     sheetChunkSize(v) { this._sheetChunkSize = v; return this; }
     maxFileSize(mb) { this._maxFileSize = mb; return this; }
     /* ═══════════════════════════════════════════════════
-     * COLLAPSIBLE OPTIONS (fluent API)
-     * ═══════════════════════════════════════════════════ */
-    /**
-     * Enable/disable collapsible mode
-     */
-    collapsible(enabled) {
-        this._collapsible = enabled;
-        return this;
-    }
-    /**
-     * Set initial collapsed state (true = collapsed, false = expanded)
-     */
-    collapsed(value) {
-        this._collapsed = value;
-        if (this._detailsElement) {
-            this._detailsElement.open = !value;
-        }
-        return this;
-    }
-    /**
-     * Expand the details (show table)
-     */
-    expand() {
-        this._collapsed = false;
-        if (this._detailsElement) {
-            this._detailsElement.open = true;
-        }
-        return this;
-    }
-    /**
-     * Collapse the details (hide table)
-     */
-    collapse() {
-        this._collapsed = true;
-        if (this._detailsElement) {
-            this._detailsElement.open = false;
-        }
-        return this;
-    }
-    /**
-     * Check if collapsible mode is enabled
-     */
-    isCollapsible() {
-        return this._collapsible;
-    }
-    /**
-     * Toggle collapsed state
-     */
-    toggle() {
-        this._collapsed = !this._collapsed;
-        if (this._detailsElement) {
-            this._detailsElement.open = !this._collapsed;
-        }
-        return this;
-    }
-    /**
-     * Set custom summary template
-     */
-    summaryTemplate(fn) {
-        this._summaryTemplate = fn;
-        return this;
-    }
-    /**
-     * Get current collapsed state
-     */
-    isCollapsed() {
-        return this._collapsed;
-    }
-    /* ═══════════════════════════════════════════════════
-     * FILE HANDLING (modified to use storage options)
+     * FILE HANDLING
      * ═══════════════════════════════════════════════════ */
     async _handleFile(file) {
         const fileSizeMB = file.size / (1024 * 1024);
@@ -431,7 +313,6 @@ export class DataFrameComponent extends BaseComponent {
                     this.state.loading = false;
                     return;
                 }
-                // ✅ Only store if persistence is enabled
                 if (this._persistToIndexedDB) {
                     await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
                 }
@@ -449,7 +330,6 @@ export class DataFrameComponent extends BaseComponent {
                     autoDetectDelimiter: true,
                     hasHeader: true
                 });
-                // ✅ Only store if persistence is enabled
                 if (this._persistToIndexedDB) {
                     await this._driver.store(file.name, df, { source: file.name });
                 }
@@ -481,7 +361,6 @@ export class DataFrameComponent extends BaseComponent {
             this._sheets.set(name, df);
         });
         const sheetNames = Object.keys(sheets);
-        // Sanitize sheet names for use as DOM IDs
         const sanitizeId = (name) => name.replace(/[^a-zA-Z0-9_-]/g, '_');
         const tabDefs = sheetNames.map(name => ({
             id: sanitizeId(name),
@@ -492,26 +371,28 @@ export class DataFrameComponent extends BaseComponent {
             tabs: tabDefs,
             activeTab: sanitizeId(sheetNames[0])
         });
-        // Map sanitized IDs back to original sheet names
         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';
-        wrapper.appendChild(tabsContainer);
+        if (dataContainer) {
+            dataContainer.appendChild(tabsContainer);
+        }
+        else {
+            wrapper.appendChild(tabsContainer);
+        }
         this._tabs.render(tabsContainer);
         sheetNames.forEach((sheetName) => {
             const df = sheets[sheetName];
             const safeId = sanitizeId(sheetName);
-            // ✅ DEBUG: Log table options
-            console.log(`[DataFrame] Creating table for sheet "${sheetName}" with options:`, {
-                filterable: this._tableOptions.filterable,
-                paginated: this._tableOptions.paginated,
-                sortable: this._tableOptions.sortable
-            });
             const table = new Table(`${this._id}-table-${safeId}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -530,8 +411,7 @@ export class DataFrameComponent extends BaseComponent {
             settingsBtn.bind('click', () => this._showReshapeModal());
             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);
     }
@@ -542,7 +422,6 @@ export class DataFrameComponent extends BaseComponent {
         const el = document.getElementById(`${this._id}-status`);
         if (!el)
             return;
-        // ✅ Only show status during loading/error states
         if (type === 'loading' || type === 'error') {
             el.style.display = '';
             el.className = 'jux-dataframe-status';
@@ -561,7 +440,6 @@ export class DataFrameComponent extends BaseComponent {
             el.appendChild(span);
         }
         else {
-            // ✅ Hide status after successful load - table speaks for itself
             el.style.display = 'none';
         }
     }
@@ -572,7 +450,6 @@ export class DataFrameComponent extends BaseComponent {
         this.state.sourceName = sourceName;
         this.state.rowCount = df.height;
         this.state.colCount = df.width;
-        // Only strip __EMPTY columns that are ENTIRELY null/empty
         const cols = df.columns;
         const rows = df.toRows();
         const emptyColumns = cols.filter(c => {
@@ -593,58 +470,37 @@ export class DataFrameComponent extends BaseComponent {
             const columnDefs = this._df.columns.map(col => ({ key: col, label: col }));
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
-        // ✅ Show the table container, hide upload area
         this._showDataView();
-        // ✅ Update collapsible summary if enabled
-        if (this._collapsible && this._detailsElement) {
-            this._detailsElement.style.display = '';
-            this._updateSummary();
-        }
-        // ✅ Hide status - data is loaded
         this._updateStatus('', 'success');
         this._triggerCallback('load', this._df, null, this);
     }
-    /**
-     * Show the data view (table + settings gear), hide upload area
-     */
     _showDataView() {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Hide upload area
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
         if (uploadArea) {
             uploadArea.style.display = 'none';
         }
-        // Show data container (table + toolbar)
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
         if (dataContainer) {
             dataContainer.style.display = '';
         }
-        // Update settings gear with file info
         this._updateSettingsGear();
     }
-    /**
-     * Hide data view, show upload area
-     */
     _hideDataView() {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Show upload area
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
         if (uploadArea) {
             uploadArea.style.display = '';
         }
-        // Hide data container
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
         if (dataContainer) {
             dataContainer.style.display = 'none';
         }
     }
-    /**
-     * Update the settings gear tooltip/info
-     */
     _updateSettingsGear() {
         const gear = document.getElementById(`${this._id}-settings-gear`);
         if (!gear || !this._df)
@@ -660,159 +516,29 @@ export class DataFrameComponent extends BaseComponent {
         }
     }
     /**
-     * Show the unified settings modal
+     * Show the unified settings modal (now delegated to ImportSettingsModal)
      */
     _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">
-                <!-- File Info Section -->
-                <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>
-
-                <!-- Data Info Section -->
-                <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>
-        `;
-        // Import Settings button (only if we have raw file data)
-        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();
-                }
+        this._importSettingsModal.showSettings({
+            fileName: this._rawFileData?.file?.name || this.state.sourceName || 'Unknown',
+            fileSize: this._rawFileData?.file?.size,
+            rowCount: this._df?.height ?? 0,
+            colCount: this._df?.width ?? 0,
+            isMalformed,
+            hasRawFileData: !!this._rawFileData
+        }, {
+            onClear: async () => {
+                await this.clear();
             },
-            {
-                label: 'Done',
-                variant: 'primary',
-                click: () => this._settingsModal.closeModal()
-            }
-        ]);
-        this._settingsModal.render(document.body);
-        this._settingsModal.open();
-        // Wire up import settings button
-        requestAnimationFrame(() => {
-            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
-            if (adjustBtn) {
-                adjustBtn.addEventListener('click', () => {
-                    this._settingsModal.closeModal();
-                    this._showReshapeModal();
-                });
+            onAdjustImport: () => {
+                this._showReshapeModal();
             }
         });
     }
-    /**
-     * Update the collapsible summary text
-     */
-    _updateSummary(isMalformed) {
-        if (!this._collapsible || !this._detailsElement)
-            return;
-        const summaryEl = this._detailsElement.querySelector('.jux-dataframe-summary');
-        if (!summaryEl)
-            return;
-        const malformed = isMalformed ?? (this._df ? this._detectMalformedData(this._df) : false);
-        const summaryTextEl = summaryEl.querySelector('.jux-dataframe-summary-text');
-        if (summaryTextEl) {
-            if (!this._df) {
-                summaryTextEl.textContent = 'No data loaded';
-            }
-            else if (this._summaryTemplate) {
-                summaryTextEl.textContent = this._summaryTemplate(this._df);
-            }
-            else {
-                const suffix = malformed ? ' ⚠️' : '';
-                summaryTextEl.textContent = `${this.state.sourceName || 'Data'} — ${this._df.height} rows × ${this._df.width} cols${suffix}`;
-            }
-        }
-        // ✅ Add/update settings gear in summary
-        let gearBtn = summaryEl.querySelector('.jux-dataframe-summary-gear');
-        if (this._df) {
-            if (!gearBtn) {
-                gearBtn = document.createElement('button');
-                gearBtn.className = 'jux-dataframe-summary-gear';
-                gearBtn.type = 'button';
-                gearBtn.innerHTML = '⚙️';
-                gearBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this._showSettingsModal();
-                });
-                summaryEl.appendChild(gearBtn);
-            }
-            if (malformed) {
-                gearBtn.classList.add('jux-dataframe-gear-warning');
-            }
-            else {
-                gearBtn.classList.remove('jux-dataframe-gear-warning');
-            }
-        }
-        else if (gearBtn) {
-            gearBtn.remove();
-        }
-    }
     /* ═══════════════════════════════════════════════════
      * MALFORMED DATA DETECTION
      * ═══════════════════════════════════════════════════ */
-    _appendSettingsButton(label, variant) {
-        const statusEl = document.getElementById(`${this._id}-status`);
-        if (!statusEl)
-            return;
-        // Remove existing settings button if any
-        const existing = statusEl.querySelector('.jux-dataframe-settings-btn');
-        if (existing)
-            existing.remove();
-        const btn = document.createElement('button');
-        btn.className = `jux-dataframe-settings-btn jux-dataframe-settings-btn-${variant}`;
-        btn.type = 'button';
-        btn.textContent = `⚙️ ${label}`;
-        btn.style.marginLeft = '8px';
-        btn.style.cursor = 'pointer';
-        btn.style.fontSize = '0.8rem';
-        btn.style.padding = '2px 8px';
-        btn.style.borderRadius = 'var(--radius, 4px)';
-        btn.style.border = '1px solid hsl(var(--border))';
-        btn.style.background = variant === 'warning' ? 'hsl(38 92% 50% / 0.15)' : 'transparent';
-        btn.addEventListener('click', () => this._showReshapeModal());
-        statusEl.appendChild(btn);
-    }
     _detectMalformedData(df) {
         const columns = df.columns;
         const rows = df.toRows();
@@ -836,367 +562,38 @@ export class DataFrameComponent extends BaseComponent {
         return false;
     }
     /* ═══════════════════════════════════════════════════
-     * RESHAPE MODAL
+     * RESHAPE MODAL (delegated to ImportSettingsModal)
      * ═══════════════════════════════════════════════════ */
     _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;
-    }
-    /**
-     * Build a clickable preview table from raw row data.
-     * Each row stores its actual sheet row index via data-sheet-row attribute.
-     * Returns the table HTML string.
-     */
-    _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=''">`;
-            // Row index cell
-            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>';
-            // Show first 6 columns
-            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>`;
-            }
-            // Status badge
-            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();
-        // ✅ Use the SAME cell-reading method as the parser
-        const rawRows = await this._driver.readRawExcelRows(this._rawFileData.file, 15);
-        if (rawRows.length === 0)
-            return;
-        // Log what we got so we can verify alignment
-        console.log('[DataFrame Preview] Raw rows from readRawExcelRows:');
-        rawRows.forEach(r => console.log(`  sheetRow ${r.sheetRow}:`, r.values.slice(0, 5)));
-        // Auto-detect best header row
-        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 trimmed = v.trim();
-                return isNaN(Number(trimmed)) && trimmed !== '';
-            }).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
-        });
-        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;
-                    console.log(`[DataFrame] Apply clicked: headerRow=${headerRow}`);
-                    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);
-                    console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
-                    updateHint(rowIdx);
-                    renderPreview(rowIdx);
-                });
-            });
-        };
-        updateHint(selectedSheetRow);
-        renderPreview(selectedSheetRow);
-        this._reshapeModal.open();
-    }
-    _showCSVReshapeModal() {
-        if (!this._rawFileData?.text)
-            return;
-        this._cleanupReshapeModal();
-        const text = this._rawFileData.text;
-        const detected = this._driver._detectDelimiter(text);
-        // Parse raw lines
-        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 });
-        }
-        // Auto-detect header row
-        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._importSettingsModal.showImportSettings(this._rawFileData, {
+            onReimport: (result, sourceName) => {
+                if (result instanceof DataFrame) {
+                    this._setDataFrame(result, 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 sheetNames = Object.keys(result);
+                    if (sheetNames.length > 1) {
+                        this._renderMultiSheet(result, sourceName);
+                    }
+                    else {
+                        this._setDataFrame(result[sheetNames[0]], sourceName);
                     }
-                    const values = this._driver._parseLine(lines[i], delim);
-                    rawRows.push({ sheetRow: i, values });
                 }
-            };
-            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);
-                        console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
-                        updateHint(rowIdx);
-                        renderPreview(rowIdx);
-                    });
-                });
-            };
-            if (delimiterSelect) {
-                delimiterSelect.addEventListener('change', () => {
-                    reparse();
-                    const current = parseInt(hiddenInput.value) || 0;
-                    updateHint(current);
-                    renderPreview(current);
-                });
+            },
+            onError: (message) => {
+                this._updateStatus(message, 'error');
+                this.state.loading = false;
+            },
+            onStatusUpdate: (text, type) => {
+                this.state.loading = type === 'loading';
+                this._updateStatus(text, type);
             }
-            updateHint(selectedRow);
-            renderPreview(selectedRow);
-            this._reshapeModal.open();
         });
     }
     /* ═══════════════════════════════════════════════════
-     * UPDATE & RENDER (modified for better upload styling)
+     * UPDATE & RENDER
      * ═══════════════════════════════════════════════════ */
     update(_prop, _value) { }
     render(targetId) {
@@ -1209,9 +606,7 @@ export class DataFrameComponent extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
-        // ═══════════════════════════════════════════════════
-        // UPLOAD AREA (shown initially, hidden after data loads)
-        // ═══════════════════════════════════════════════════
+        // Upload area
         if (this._inlineUpload) {
             const uploadArea = document.createElement('div');
             uploadArea.className = 'jux-dataframe-upload-area';
@@ -1239,14 +634,11 @@ export class DataFrameComponent extends BaseComponent {
             uploadContainer.className = 'jux-dataframe-upload';
             uploadContainer.id = `${this._id}-upload-container`;
             uploadArea.appendChild(uploadContainer);
-            // Status bar (for loading/error states only)
-            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';
@@ -1260,13 +652,10 @@ export class DataFrameComponent extends BaseComponent {
         else {
             container.appendChild(wrapper);
         }
-        // ═══════════════════════════════════════════════════
-        // DATA CONTAINER (hidden initially, shown after data loads)
-        // ═══════════════════════════════════════════════════
+        // Data container
         const dataContainer = document.createElement('div');
         dataContainer.className = 'jux-dataframe-data';
-        dataContainer.style.display = 'none'; // Hidden until data loads
-        // ✅ Toolbar with settings gear
+        dataContainer.style.display = 'none';
         const toolbar = document.createElement('div');
         toolbar.className = 'jux-dataframe-toolbar';
         const settingsGear = document.createElement('button');
@@ -1278,42 +667,8 @@ export class DataFrameComponent extends BaseComponent {
         settingsGear.addEventListener('click', () => this._showSettingsModal());
         toolbar.appendChild(settingsGear);
         dataContainer.appendChild(toolbar);
-        // ═══════════════════════════════════════════════════
-        // TABLE CONTAINER (inside data container or collapsible)
-        // ═══════════════════════════════════════════════════
-        let tableContainer;
-        if (this._collapsible) {
-            const details = document.createElement('details');
-            details.className = 'jux-dataframe-details';
-            details.open = !this._collapsed;
-            details.style.display = 'none'; // Hidden until data loads
-            this._detailsElement = details;
-            const summary = document.createElement('summary');
-            summary.className = 'jux-dataframe-summary';
-            const chevron = document.createElement('span');
-            chevron.className = 'jux-dataframe-summary-chevron';
-            chevron.innerHTML = '▶';
-            summary.appendChild(chevron);
-            const textSpan = document.createElement('span');
-            textSpan.className = 'jux-dataframe-summary-text';
-            summary.appendChild(textSpan);
-            details.appendChild(summary);
-            const content = document.createElement('div');
-            content.className = 'jux-dataframe-details-content';
-            details.appendChild(content);
-            dataContainer.appendChild(details);
-            tableContainer = content;
-            details.addEventListener('toggle', () => {
-                this._collapsed = !details.open;
-            });
-        }
-        else {
-            tableContainer = dataContainer;
-        }
         wrapper.appendChild(dataContainer);
-        // ═══════════════════════════════════════════════════
-        // TABLE
-        // ═══════════════════════════════════════════════════
+        // Table
         const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,
@@ -1322,7 +677,7 @@ export class DataFrameComponent extends BaseComponent {
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });
-        tbl.render(tableContainer);
+        tbl.render(dataContainer);
         this._table = tbl;
         if (this._pendingSource) {
             const fn = this._pendingSource;