juxscript 1.1.187 → 1.1.189

package/lib/components/dataframe.js

@@ -4,7 +4,7 @@ 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 Modal
+import { Modal } from './modal.js';
 import { renderIcon } from './icons.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
@@ -23,21 +23,21 @@ export class DataFrameComponent extends BaseComponent {
         });
         this._df = null;
         this._table = null;
-        this._tabs = null; // ✅ NEW: Tabs for multi-sheet Excel // @ts-ignore used for multi-sheet
-        this._sheets = new Map(); // ✅ NEW: Store all sheets
-        this._uploadRef = null; // @ts-ignore used for reference tracking
+        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; // ✅ Default 100k rows
-        this._sheetChunkSize = 10000; // ✅ Default 10k chunk
-        this._maxFileSize = 50; // ✅ Default 50MB
+        this._maxSheetSize = 100000;
+        this._sheetChunkSize = 10000;
+        this._maxFileSize = 50;
         this._showReshapeWarning = true;
         this._rawFileData = null;
-        this._reshapeModal = null; // ✅ ADD THIS LINE
-        this._reshapeModalRendered = false; // Track if modal already rendered
+        this._reshapeModal = null;
+        this._reshapeModalRendered = false;
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
         this._showStatus = options.showStatus ?? true;
         this._icon = options.icon ?? '';
@@ -63,7 +63,7 @@ export class DataFrameComponent extends BaseComponent {
         this._storageKey = key;
         const loadFn = async () => {
             this.state.loading = true;
-            this._updateStatus('⏳ Loading...', 'loading');
+            this._updateStatus('Loading...', 'loading');
             try {
                 const df = await this._driver.loadByName(key);
                 if (!df) {
@@ -77,7 +77,7 @@ export class DataFrameComponent extends BaseComponent {
             catch (err) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
-                this._updateStatus('❌ ' + err.message, 'error');
+                this._updateStatus(err.message, 'error');
             }
         };
         if (this._table) {
@@ -94,56 +94,7 @@ export class DataFrameComponent extends BaseComponent {
             upload.bind('change', async (files) => {
                 if (!files || files.length === 0)
                     return;
-                const file = files[0];
-                // ✅ Check file size
-                const fileSizeMB = file.size / (1024 * 1024);
-                if (fileSizeMB > this._maxFileSize) {
-                    this._updateStatus(`❌ File too large (${fileSizeMB.toFixed(1)}MB). Max: ${this._maxFileSize}MB`, '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) {
-                        // ✅ Store raw file for reshape
-                        this._rawFileData = { file, isExcel: true };
-                        // ✅ Pass chunking options for large files
-                        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);
-                        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 {
-                        // ✅ CSV/TSV: Store raw text for reshaping
-                        const text = await file.text();
-                        this._rawFileData = { file, text, isExcel: false };
-                        const df = this._driver.parseCSV(text, {
-                            autoDetectDelimiter: true,
-                            hasHeader: true
-                        });
-                        await this._driver.store(file.name, df, { source: file.name });
-                        this._setDataFrame(df, file.name);
-                    }
-                }
-                catch (err) {
-                    this._triggerCallback('error', err.message, null, this);
-                    this.state.loading = false;
-                    this._updateStatus('❌ ' + err.message, 'error');
-                }
+                await this._handleFile(files[0]);
             });
         };
         return this;
@@ -151,7 +102,7 @@ export class DataFrameComponent extends BaseComponent {
     fromData(data) {
         const loadFn = async () => {
             this.state.loading = true;
-            this._updateStatus('⏳ Loading data...', 'loading');
+            this._updateStatus('Loading data...', 'loading');
             try {
                 const df = new DataFrame(data);
                 this._setDataFrame(df, 'inline data');
@@ -159,7 +110,7 @@ export class DataFrameComponent extends BaseComponent {
             catch (err) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
-                this._updateStatus('❌ ' + err.message, 'error');
+                this._updateStatus(err.message, 'error');
             }
         };
         if (this._table) {
@@ -237,68 +188,90 @@ export class DataFrameComponent extends BaseComponent {
     filterable(v) { this._tableOptions.filterable = v; return this; }
     paginated(v) { this._tableOptions.paginated = v; return this; }
     rowsPerPage(v) { this._tableOptions.rowsPerPage = v; return this; }
-    /**
-     * ✅ NEW: Set max rows per sheet (prevents memory issues with huge Excel files)
-     */
-    maxSheetSize(v) {
-        this._maxSheetSize = v;
-        return this;
-    }
-    /**
-     * ✅ NEW: Set chunk size for processing large sheets
-     */
-    sheetChunkSize(v) {
-        this._sheetChunkSize = v;
-        return this;
-    }
-    /**
-     * ✅ NEW: Set max file size in MB
-     */
-    maxFileSize(mb) {
-        this._maxFileSize = mb;
-        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
+     * ═══════════════════════════════════════════════════ */
+    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');
+            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);
+                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
+                });
+                await this._driver.store(file.name, df, { source: file.name });
+                this._setDataFrame(df, file.name);
+            }
+        }
+        catch (err) {
+            this._triggerCallback('error', err.message, null, this);
+            this.state.loading = false;
+            this._updateStatus('Error: ' + err.message, 'error');
+        }
     }
     /* ═══════════════════════════════════════════════════
      * MULTI-SHEET RENDERING
      * ═══════════════════════════════════════════════════ */
-    /**
-     * ✅ FIXED: Render multiple Excel sheets as tabs
-     */
     _renderMultiSheet(sheets, sourceName) {
         this.state.loading = false;
         this._sheets.clear();
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Clear existing table if any
         const existingTable = wrapper.querySelector('.jux-table-wrapper');
         if (existingTable)
             existingTable.remove();
-        // Store all sheets
         Object.entries(sheets).forEach(([name, df]) => {
             this._sheets.set(name, df);
         });
         const sheetNames = Object.keys(sheets);
-        // ✅ FIX: Create tabs with EMPTY content first (just placeholders)
         const tabs = new Tabs(`${this._id}-tabs`, {
             tabs: sheetNames.map(name => ({
                 id: name,
                 label: name,
-                content: '' // Empty - we'll fill after render
+                content: ''
             })),
             activeTab: sheetNames[0]
         });
         this._tabs = tabs;
-        // Render tabs container
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
         wrapper.appendChild(tabsContainer);
-        // ✅ Render tabs NOW (creates all tab panels in DOM)
         tabs.render(tabsContainer);
-        // ✅ NOW populate each tab with its DataFrame table (panels exist now)
         sheetNames.forEach(sheetName => {
             const df = sheets[sheetName];
-            // Create table
             const table = new Table(`${this._id}-table-${sheetName}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -307,21 +280,12 @@ export class DataFrameComponent extends BaseComponent {
                 paginated: this._tableOptions.paginated,
                 rowsPerPage: this._tableOptions.rowsPerPage
             });
-            // Convert columns to ColumnDef[]
-            const columnDefs = df.columns.map(col => ({
-                key: col,
-                label: col
-            }));
+            const columnDefs = df.columns.map(col => ({ key: col, label: col }));
             table.columns(columnDefs).rows(df.toRows());
-            // ✅ Find the tab panel (it exists now because tabs.render() was called)
             const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
-            if (!tabPanel) {
-                console.error(`Tab panel not found: ${this._id}-tabs-${sheetName}-panel`);
+            if (!tabPanel)
                 return;
-            }
-            // ✅ Render table directly into tab panel
             table.render(tabPanel);
-            // Add filter if enabled
             if (this._tableOptions.filterable) {
                 const filterContainer = document.createElement('div');
                 filterContainer.className = 'jux-dataframe-filter';
@@ -343,22 +307,17 @@ export class DataFrameComponent extends BaseComponent {
                         table.rows(df.toRows());
                         return;
                     }
-                    const filtered = df.filter((row) => {
-                        return Object.values(row).some(v => v !== null && v !== undefined && String(v).toLowerCase().includes(text));
-                    });
+                    const filtered = df.filter((row) => Object.values(row).some(v => v !== null && v !== undefined && String(v).toLowerCase().includes(text)));
                     table.rows(filtered.toRows());
                 });
-                // ✅ Insert filter BEFORE the table wrapper (which exists now)
                 const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
                 if (tableWrapper) {
                     tabPanel.insertBefore(filterContainer, tableWrapper);
                 }
             }
         });
-        // Update status
         const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
         this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
-        // Set first sheet as active DataFrame
         this._df = sheets[sheetNames[0]];
         this._triggerCallback('load', this._df, null, this);
     }
@@ -396,25 +355,18 @@ export class DataFrameComponent extends BaseComponent {
         if (cleanCols.length < df.columns.length) {
             this._df = df.select(...cleanCols);
         }
-        // Update the table with new data
         if (this._table && this._df) {
-            const columnDefs = this._df.columns.map(col => ({
-                key: col,
-                label: col
-            }));
+            const columnDefs = this._df.columns.map(col => ({ key: col, label: col }));
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
-        // ✅ Detect malformed data
         const isMalformed = this._detectMalformedData(this._df);
-        // ✅ Show warning if malformed
         if (isMalformed && this._showReshapeWarning && this._rawFileData) {
-            this._updateStatus(`⚠️ ${sourceName} — ${this._df.height} rows × ${this._df.width} cols (Data may be malformed — headers may be on wrong row)`, 'warning');
-            // Add Fix Import Settings button after a tick to ensure status DOM is ready
+            this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols (Data may be malformed — headers may be on wrong row)`, 'warning');
             requestAnimationFrame(() => {
                 const statusEl = document.getElementById(`${this._id}-status`);
                 if (statusEl) {
                     const settingsBtn = document.createElement('button');
-                    settingsBtn.textContent = '⚙️ Fix Import Settings';
+                    settingsBtn.textContent = 'Fix Import Settings';
                     settingsBtn.className = 'jux-button jux-button-sm jux-button-warning';
                     settingsBtn.style.marginLeft = '0.5rem';
                     settingsBtn.addEventListener('click', () => this._showReshapeModal());
@@ -424,13 +376,12 @@ export class DataFrameComponent extends BaseComponent {
         }
         else {
             this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-            // ✅ Still add Settings button for manual adjustment
             if (this._showReshapeWarning && this._rawFileData) {
                 requestAnimationFrame(() => {
                     const statusEl = document.getElementById(`${this._id}-status`);
                     if (statusEl) {
                         const settingsBtn = document.createElement('button');
-                        settingsBtn.textContent = '⚙️ Settings';
+                        settingsBtn.textContent = 'Settings';
                         settingsBtn.className = 'jux-button jux-button-sm jux-button-ghost';
                         settingsBtn.style.marginLeft = '0.5rem';
                         settingsBtn.addEventListener('click', () => this._showReshapeModal());
@@ -441,67 +392,65 @@ export class DataFrameComponent extends BaseComponent {
         }
         this._triggerCallback('load', this._df, null, this);
     }
-    /**
-     * ✅ NEW: Detect if data looks malformed
-     */
+    /* ═══════════════════════════════════════════════════
+     * MALFORMED DATA DETECTION
+     * ═══════════════════════════════════════════════════ */
     _detectMalformedData(df) {
         const columns = df.columns;
         const rows = df.toRows();
-        // Check 1: Columns have generic names like "__EMPTY", "_1", "col_0"
         const hasGenericColumns = columns.some(col => col.startsWith('__EMPTY') ||
-            col.startsWith('_') ||
+            col.match(/^_\d+$/) ||
             col.match(/^col_\d+$/));
         if (hasGenericColumns)
             return true;
-        // Check 2: First row values look like metadata (e.g., "Exported On:", "12/4/2025")
         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;
         }
-        // Check 3: Row 2 or 3 has values that look like headers (mostly strings, no numbers)
-        if (rows.length >= 3) {
-            const secondRow = rows[1];
-            const thirdRow = rows[2];
-            const checkRow = (row) => {
-                const values = Object.values(row);
-                const nonNumeric = values.filter(v => {
-                    const str = String(v).trim();
-                    return isNaN(Number(str)) && str !== '';
-                }).length;
-                return nonNumeric >= values.length * 0.7; // 70% non-numeric
-            };
-            if (checkRow(secondRow) || checkRow(thirdRow)) {
-                return true;
+        return false;
+    }
+    _detectLikelyHeaderRow(df) {
+        const rows = df.toRows();
+        for (let i = 0; i < Math.min(rows.length, 10); i++) {
+            const row = rows[i];
+            const values = Object.values(row);
+            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
+            if (nonEmpty.length < values.length * 0.5)
+                continue;
+            const nonNumericCount = nonEmpty.filter(v => {
+                const str = String(v).trim();
+                return isNaN(Number(str)) && str !== '';
+            }).length;
+            if (nonNumericCount >= nonEmpty.length * 0.7 && i > 0) {
+                // i is index in toRows() but row 0 of the file was consumed as header,
+                // so the actual file row index is i + 1
+                return i + 1;
             }
         }
-        return false;
+        return 0;
     }
-    /**
-     * ✅ UPDATED: Show settings modal using Modal component
-     */
+    /* ═══════════════════════════════════════════════════
+     * RESHAPE MODAL
+     * ═══════════════════════════════════════════════════ */
     _showReshapeModal() {
         if (!this._rawFileData)
             return;
-        const isExcel = this._rawFileData.isExcel;
-        if (isExcel) {
+        if (this._rawFileData.isExcel) {
             this._showExcelReshapeModal();
         }
         else {
             this._showCSVReshapeModal();
         }
     }
-    /**
-     * ✅ UPDATED: Excel reshape modal using Modal component
-     */
-    async _showExcelReshapeModal() {
-        if (!this._rawFileData?.file)
-            return;
-        // Remove old modal from DOM if it was previously rendered
+    _cleanupReshapeModal() {
         if (this._reshapeModal && this._reshapeModalRendered) {
             const oldEl = document.getElementById(`${this._id}-reshape-modal`);
             if (oldEl)
@@ -509,43 +458,47 @@ export class DataFrameComponent extends BaseComponent {
             this._reshapeModal = null;
             this._reshapeModalRendered = false;
         }
-        // Create fresh modal
+    }
+    async _showExcelReshapeModal() {
+        if (!this._rawFileData?.file)
+            return;
+        this._cleanupReshapeModal();
+        const suggestedRow = this._df ? this._detectLikelyHeaderRow(this._df) : 0;
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'Excel Import Settings',
             size: 'large',
             close: true,
             backdropClose: false
         });
-        // Build modal content
-        const modalContent = document.createElement('div');
-        modalContent.innerHTML = `
+        const modalContentHTML = `
             <div style="margin-bottom: 1rem;">
                 <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
                     Header Row (0-based)
                 </label>
-                <input 
-                    type="number" 
-                    id="${this._id}-header-row" 
-                    class="jux-input-element" 
-                    value="0" 
-                    min="0" 
-                    max="50" 
-                    style="width: 100%;" 
+                <input
+                    type="number"
+                    id="${this._id}-header-row"
+                    class="jux-input-element"
+                    value="${suggestedRow}"
+                    min="0"
+                    max="50"
+                    style="width: 100%;"
                 />
-                <div style="font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; padding: 0.5rem; background: hsl(var(--warning) / 0.1); border-radius: var(--radius); border: 1px solid hsl(var(--warning) / 0.3);">
-                    ⚠️ <strong>Detected issue:</strong> Row 0 contains metadata ("Exported On:"), row 2 contains actual headers ("340B ID"). Try setting this to <strong>2</strong>.
+                <div class="jux-reshape-hint">
+                    <strong>Detected issue:</strong> The current header row appears to contain metadata or empty values.
+                    Row ${suggestedRow} looks like it contains the actual column headers.
+                    Adjust the value above and check the preview below.
                 </div>
             </div>
-            
-            <div style="border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; background: hsl(var(--muted) / 0.3); max-height: 400px; overflow-y: auto;">
+            <div class="jux-reshape-preview-container">
                 <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
                     Preview (first 10 rows)
                 </div>
-                <div id="${this._id}-preview" style="font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.75rem; white-space: pre; color: hsl(var(--foreground)); line-height: 1.5;"></div>
+                <div id="${this._id}-preview" class="jux-reshape-preview"></div>
             </div>
         `;
         this._reshapeModal
-            .content(modalContent.innerHTML)
+            .content(modalContentHTML)
             .actions([
             {
                 label: 'Cancel',
@@ -556,10 +509,10 @@ export class DataFrameComponent extends BaseComponent {
                 label: 'Apply & Re-import',
                 variant: 'primary',
                 click: async () => {
-                    const headerRowInput = document.getElementById(`${this._id}-header-row`);
-                    const headerRow = parseInt(headerRowInput.value) || 0;
+                    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');
+                    this._updateStatus('Re-parsing with new settings...', 'loading');
                     try {
                         const sheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
                             headerRow,
@@ -572,48 +525,46 @@ export class DataFrameComponent extends BaseComponent {
                             this._renderMultiSheet(sheets, this._rawFileData.file.name);
                         }
                         else {
-                            this._showReshapeWarning = false; // Prevent recursive warning after manual fix
+                            this._showReshapeWarning = false;
                             this._setDataFrame(sheets[sheetNames[0]], this._rawFileData.file.name);
                         }
                         this._reshapeModal.closeModal();
                     }
                     catch (err) {
-                        this._updateStatus(`❌ ${err.message}`, 'error');
+                        this._updateStatus(`Error: ${err.message}`, 'error');
                     }
                 }
             }
         ]);
-        // Render modal to document.body and open it
         this._reshapeModal.render(document.body);
         this._reshapeModalRendered = true;
-        // Wait a tick for DOM to update after render
         await new Promise(resolve => requestAnimationFrame(resolve));
         const headerRowInput = document.getElementById(`${this._id}-header-row`);
         const previewDiv = document.getElementById(`${this._id}-preview`);
-        // Update preview on header row change
         const updatePreview = async () => {
             const headerRow = parseInt(headerRowInput?.value) || 0;
             try {
                 const sheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
                     headerRow,
-                    maxSheetSize: 10
+                    maxSheetSize: headerRow + 20
                 });
                 const firstSheet = Object.values(sheets)[0];
                 if (!firstSheet) {
                     if (previewDiv)
-                        previewDiv.textContent = '⚠️ No data found';
+                        previewDiv.textContent = 'No data found';
                     return;
                 }
                 const preview = firstSheet.toRows().slice(0, 10).map((row, i) => {
-                    const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' │ ');
-                    return `${i === 0 ? '📌 ' : '   '}${cols}`;
+                    const cols = Object.values(row).map(v => String(v ?? '').padEnd(20)).join(' | ');
+                    return `${i === 0 ? '>> ' : '   '}${cols}`;
                 }).join('\n');
-                if (previewDiv)
-                    previewDiv.textContent = `Columns: ${firstSheet.columns.join(' │ ')}\n${'─'.repeat(80)}\n${preview}`;
+                if (previewDiv) {
+                    previewDiv.textContent = `Columns: ${firstSheet.columns.join(' | ')}\n${'─'.repeat(80)}\n${preview}`;
+                }
             }
             catch (err) {
                 if (previewDiv)
-                    previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                    previewDiv.textContent = `Error: ${err.message}`;
             }
         };
         if (headerRowInput)
@@ -621,57 +572,41 @@ export class DataFrameComponent extends BaseComponent {
         updatePreview();
         this._reshapeModal.open();
     }
-    /**
-     * ✅ UPDATED: CSV reshape modal using Modal component
-     */
     _showCSVReshapeModal() {
         if (!this._rawFileData)
             return;
-        // Remove old modal from DOM if it was previously rendered
-        if (this._reshapeModal && this._reshapeModalRendered) {
-            const oldEl = document.getElementById(`${this._id}-reshape-modal`);
-            if (oldEl)
-                oldEl.remove();
-            this._reshapeModal = null;
-            this._reshapeModalRendered = false;
-        }
-        // Create fresh modal
+        this._cleanupReshapeModal();
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'CSV Import Settings',
             size: 'large',
             close: true,
             backdropClose: false
         });
-        // Build modal content
-        const modalContent = document.createElement('div');
-        modalContent.innerHTML = `
+        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="\t">Tab (\\t)</option>
+                    <option value="&#9;">Tab (\\t)</option>
                     <option value=";">Semicolon (;)</option>
                 </select>
             </div>
-            
             <div style="margin-bottom: 1rem;">
                 <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Header Row (0-based)</label>
                 <input type="number" id="${this._id}-header-row" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
             </div>
-            
             <div style="margin-bottom: 1rem;">
                 <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Skip Rows Before Header</label>
                 <input type="number" id="${this._id}-skip-rows" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
             </div>
-            
-            <div style="border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; background: hsl(var(--muted) / 0.3); max-height: 400px; overflow-y: auto;">
+            <div class="jux-reshape-preview-container">
                 <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
-                <div id="${this._id}-preview" style="font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.75rem; white-space: pre; color: hsl(var(--foreground)); line-height: 1.5;"></div>
+                <div id="${this._id}-preview" class="jux-reshape-preview"></div>
             </div>
         `;
         this._reshapeModal
-            .content(modalContent.innerHTML)
+            .content(modalContentHTML)
             .actions([
             {
                 label: 'Cancel',
@@ -687,11 +622,11 @@ export class DataFrameComponent extends BaseComponent {
                     const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
                     const headerRowInput = document.getElementById(`${this._id}-header-row`);
                     const skipRowsInput = document.getElementById(`${this._id}-skip-rows`);
-                    const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
+                    const delim = delimiterSelect.value;
                     const headerRow = parseInt(headerRowInput.value) || 0;
                     const skipRows = parseInt(skipRowsInput.value) || 0;
                     this.state.loading = true;
-                    this._updateStatus('⏳ Re-parsing with new settings...', 'loading');
+                    this._updateStatus('Re-parsing with new settings...', 'loading');
                     try {
                         const df = this._driver.parseCSV(this._rawFileData.text, {
                             delimiter: delim,
@@ -700,39 +635,35 @@ export class DataFrameComponent extends BaseComponent {
                             hasHeader: true
                         });
                         await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                        this._showReshapeWarning = false; // Prevent recursive warning after manual fix
+                        this._showReshapeWarning = false;
                         this._setDataFrame(df, this._rawFileData.file.name);
                         this._reshapeModal.closeModal();
                     }
                     catch (err) {
-                        this._updateStatus(`❌ ${err.message}`, 'error');
+                        this._updateStatus(`Error: ${err.message}`, 'error');
                     }
                 }
             }
         ]);
-        // Render modal to document.body and open it
         this._reshapeModal.render(document.body);
         this._reshapeModalRendered = true;
-        // Use requestAnimationFrame to ensure DOM is ready
         requestAnimationFrame(() => {
             const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
             const headerRowInput = document.getElementById(`${this._id}-header-row`);
             const skipRowsInput = document.getElementById(`${this._id}-skip-rows`);
             const previewDiv = document.getElementById(`${this._id}-preview`);
-            // Auto-detect initial values
             if (this._rawFileData?.text) {
                 const detected = this._driver._detectDelimiter(this._rawFileData.text);
                 if (delimiterSelect)
-                    delimiterSelect.value = detected === '\t' ? '\\t' : detected;
-                const headerRow = this._driver._detectHeaderRow(this._rawFileData.text, detected);
+                    delimiterSelect.value = detected;
+                const detectedHeaderRow = this._driver._detectHeaderRow(this._rawFileData.text, detected);
                 if (headerRowInput)
-                    headerRowInput.value = String(headerRow);
+                    headerRowInput.value = String(detectedHeaderRow);
             }
-            // Update preview on changes
-            const updatePreview = async () => {
+            const updatePreview = () => {
                 if (!this._rawFileData?.text)
                     return;
-                const delim = delimiterSelect?.value === '\\t' ? '\t' : (delimiterSelect?.value || ',');
+                const delim = delimiterSelect?.value || ',';
                 const headerRow = parseInt(headerRowInput?.value) || 0;
                 const skipRows = parseInt(skipRowsInput?.value) || 0;
                 try {
@@ -744,15 +675,16 @@ export class DataFrameComponent extends BaseComponent {
                         maxRows: 10
                     });
                     const preview = df.toRows().map((row, i) => {
-                        const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' │ ');
-                        return `${i === 0 ? '📌 ' : '   '}${cols}`;
+                        const cols = Object.values(row).map(v => String(v ?? '').padEnd(20)).join(' | ');
+                        return `${i === 0 ? '>> ' : '   '}${cols}`;
                     }).join('\n');
-                    if (previewDiv)
-                        previewDiv.textContent = `Columns: ${df.columns.join(' │ ')}\n${'─'.repeat(80)}\n${preview}`;
+                    if (previewDiv) {
+                        previewDiv.textContent = `Columns: ${df.columns.join(' | ')}\n${'─'.repeat(80)}\n${preview}`;
+                    }
                 }
                 catch (err) {
                     if (previewDiv)
-                        previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                        previewDiv.textContent = `Error: ${err.message}`;
                 }
             };
             if (delimiterSelect)
@@ -765,10 +697,10 @@ export class DataFrameComponent extends BaseComponent {
             this._reshapeModal.open();
         });
     }
-    update(_prop, _value) { }
     /* ═══════════════════════════════════════════════════
-     * RENDER
+     * UPDATE & RENDER
      * ═══════════════════════════════════════════════════ */
+    update(_prop, _value) { }
     render(targetId) {
         const container = this._setupContainer(targetId);
         const { style, class: className } = this.state;
@@ -789,48 +721,11 @@ export class DataFrameComponent extends BaseComponent {
             }
             const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
             this._uploadRef = upload;
-            // ✅ FIX: Use the SAME logic as fromUpload() to handle multi-sheet
             this._pendingSource = async () => {
                 upload.bind('change', async (files) => {
                     if (!files || files.length === 0)
                         return;
-                    const file = files[0];
-                    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) {
-                            // ✅ Store raw file for reshape
-                            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);
-                            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 df = await this._driver.streamFile(file);
-                            await this._driver.store(file.name, df, { source: file.name });
-                            this._setDataFrame(df, file.name);
-                        }
-                    }
-                    catch (err) {
-                        this._triggerCallback('error', err.message, null, this);
-                        this.state.loading = false;
-                        this._updateStatus('❌ ' + err.message, 'error');
-                    }
+                    await this._handleFile(files[0]);
                 });
             };
             const uploadContainer = document.createElement('div');