juxscript 1.1.187 → 1.1.189

package/lib/components/dataframe.ts

@@ -4,9 +4,8 @@ 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';
-import { button } from './button.js'; // ✅ Import button factory
 
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = ['load', 'error', 'transform'] as const;
@@ -22,10 +21,10 @@ export interface DataFrameOptions {
     rowsPerPage?: number;
     showStatus?: boolean;
     icon?: string;
-    maxSheetSize?: number; // ✅ NEW: Max rows per sheet (default: 100k)
-    sheetChunkSize?: number; // ✅ NEW: Chunk size for large sheets (default: 10k)
-    maxFileSize?: number; // ✅ NEW: Max file size in MB (default: 50MB)
-    showReshapeWarning?: boolean; // ✅ NEW: Show warning when data looks malformed
+    maxSheetSize?: number;
+    sheetChunkSize?: number;
+    maxFileSize?: number;
+    showReshapeWarning?: boolean;
     style?: string;
     class?: string;
 }
@@ -41,8 +40,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _df: DataFrame | null = null;
     private _driver: TabularDriver;
     private _table: Table | null = null;
-    private _tabs: Tabs | null = null; // ✅ NEW: Tabs for multi-sheet Excel // @ts-ignore used for multi-sheet
-    private _sheets: Map<string, DataFrame> = new Map(); // ✅ NEW: Store all sheets
+    private _tabs: Tabs | null = null;
+    private _sheets: Map<string, DataFrame> = new Map();
     private _tableOptions: {
         striped: boolean;
         hoverable: boolean;
@@ -51,19 +50,19 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         paginated: boolean;
         rowsPerPage: number;
     };
-    private _uploadRef: FileUpload | null = null; // @ts-ignore used for reference tracking
+    private _uploadRef: FileUpload | null = null;
     private _storageKey: string | null = null;
     private _pendingSource: (() => Promise<void>) | null = null;
     private _inlineUpload: { label: string; accept: string; icon: string } | null = null;
     private _showStatus: boolean = true;
     private _icon: string = '';
-    private _maxSheetSize: number = 100000; // ✅ Default 100k rows
-    private _sheetChunkSize: number = 10000; // ✅ Default 10k chunk
-    private _maxFileSize: number = 50; // ✅ Default 50MB
+    private _maxSheetSize: number = 100000;
+    private _sheetChunkSize: number = 10000;
+    private _maxFileSize: number = 50;
     private _showReshapeWarning: boolean = true;
     private _rawFileData: { file: File; text?: string; isExcel?: boolean } | null = null;
-    private _reshapeModal: Modal | null = null; // ✅ ADD THIS LINE
-    private _reshapeModalRendered: boolean = false; // Track if modal already rendered
+    private _reshapeModal: Modal | null = null;
+    private _reshapeModalRendered: boolean = false;
 
     constructor(id: string, options: DataFrameOptions = {}) {
         super(id, {
@@ -111,7 +110,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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) {
@@ -124,7 +123,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             } catch (err: any) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
-                this._updateStatus('❌ ' + err.message, 'error');
+                this._updateStatus(err.message, 'error');
             }
         };
         if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
@@ -136,63 +135,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this._pendingSource = async () => {
             upload.bind('change', async (files: File[]) => {
                 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: any) {
-                    this._triggerCallback('error', err.message, null, this);
-                    this.state.loading = false;
-                    this._updateStatus('❌ ' + err.message, 'error');
-                }
+                await this._handleFile(files[0]);
             });
         };
         return this;
@@ -201,14 +144,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     fromData(data: Record<string, any>[] | Record<string, any[]>): this {
         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');
             } catch (err: any) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
-                this._updateStatus('❌ ' + err.message, 'error');
+                this._updateStatus(err.message, 'error');
             }
         };
         if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
@@ -296,38 +239,71 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     filterable(v: boolean): this { this._tableOptions.filterable = v; return this; }
     paginated(v: boolean): this { this._tableOptions.paginated = v; return this; }
     rowsPerPage(v: number): this { this._tableOptions.rowsPerPage = v; return this; }
+    maxSheetSize(v: number): this { this._maxSheetSize = v; return this; }
+    sheetChunkSize(v: number): this { this._sheetChunkSize = v; return this; }
+    maxFileSize(mb: number): this { this._maxFileSize = mb; return this; }
 
-    /**
-     * ✅ NEW: Set max rows per sheet (prevents memory issues with huge Excel files)
-     */
-    maxSheetSize(v: number): this {
-        this._maxSheetSize = v;
-        return this;
-    }
+    /* ═══════════════════════════════════════════════════
+     * FILE HANDLING
+     * ═══════════════════════════════════════════════════ */
 
-    /**
-     * ✅ NEW: Set chunk size for processing large sheets
-     */
-    sheetChunkSize(v: number): this {
-        this._sheetChunkSize = v;
-        return this;
-    }
+    private async _handleFile(file: File): Promise<void> {
+        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;
+        }
 
-    /**
-     * ✅ NEW: Set max file size in MB
-     */
-    maxFileSize(mb: number): this {
-        this._maxFileSize = mb;
-        return this;
+        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: any) {
+            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
-     */
     private _renderMultiSheet(sheets: Record<string, DataFrame>, sourceName: string): void {
         this.state.loading = false;
         this._sheets.clear();
@@ -335,42 +311,35 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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,
@@ -380,25 +349,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 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`);
-                return;
-            }
+            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';
@@ -421,19 +379,15 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
                 input.addEventListener('input', () => {
                     const text = input.value.toLowerCase();
-                    if (!text) {
-                        table.rows(df.toRows());
-                        return;
-                    }
-                    const filtered = df.filter((row) => {
-                        return Object.values(row).some(v =>
+                    if (!text) { table.rows(df.toRows()); return; }
+                    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);
@@ -441,16 +395,13 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             }
         });
 
-        // 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);
     }
 
@@ -494,31 +445,24 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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)`,
+                `${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
             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());
@@ -531,13 +475,12 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 '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());
@@ -550,88 +493,94 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this._triggerCallback('load', this._df, null, this);
     }
 
-    /**
-     * ✅ NEW: Detect if data looks malformed
-     */
+    /* ═══════════════════════════════════════════════════
+     * MALFORMED DATA DETECTION
+     * ═══════════════════════════════════════════════════ */
+
     private _detectMalformedData(df: DataFrame): boolean {
         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];
+        return false;
+    }
+
+    private _detectLikelyHeaderRow(df: DataFrame): number {
+        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() !== '');
 
-            const checkRow = (row: Record<string, any>) => {
-                const values = Object.values(row);
-                const nonNumeric = values.filter(v => {
-                    const str = String(v).trim();
-                    return isNaN(Number(str)) && str !== '';
-                }).length;
+            if (nonEmpty.length < values.length * 0.5) continue;
 
-                return nonNumeric >= values.length * 0.7; // 70% non-numeric
-            };
+            const nonNumericCount = nonEmpty.filter(v => {
+                const str = String(v).trim();
+                return isNaN(Number(str)) && str !== '';
+            }).length;
 
-            if (checkRow(secondRow) || checkRow(thirdRow)) {
-                return true;
+            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
+     * ═══════════════════════════════════════════════════ */
+
     private _showReshapeModal(): void {
         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
-     */
-    private async _showExcelReshapeModal(): Promise<void> {
-        if (!this._rawFileData?.file) return;
-
-        // Remove old modal from DOM if it was previously rendered
+    private _cleanupReshapeModal(): void {
         if (this._reshapeModal && this._reshapeModalRendered) {
             const oldEl = document.getElementById(`${this._id}-reshape-modal`);
             if (oldEl) oldEl.remove();
             this._reshapeModal = null;
             this._reshapeModalRendered = false;
         }
+    }
+
+    private async _showExcelReshapeModal(): Promise<void> {
+        if (!this._rawFileData?.file) return;
+
+        this._cleanupReshapeModal();
+
+        const suggestedRow = this._df ? this._detectLikelyHeaderRow(this._df) : 0;
 
-        // Create fresh modal
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'Excel Import Settings',
             size: 'large',
@@ -639,37 +588,36 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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',
@@ -680,11 +628,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     label: 'Apply & Re-import',
                     variant: 'primary',
                     click: async () => {
-                        const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
-                        const headerRow = parseInt(headerRowInput.value) || 0;
+                        const input = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
+                        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, {
@@ -699,52 +647,50 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             if (sheetNames.length > 1) {
                                 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: any) {
-                            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`) as HTMLInputElement;
         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';
+                    if (previewDiv) 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: any) {
-                if (previewDiv) previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;
             }
         };
 
@@ -754,21 +700,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this._reshapeModal.open();
     }
 
-    /**
-     * ✅ UPDATED: CSV reshape modal using Modal component
-     */
     private _showCSVReshapeModal(): void {
         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;
-        }
+        this._cleanupReshapeModal();
 
-        // Create fresh modal
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'CSV Import Settings',
             size: 'large',
@@ -776,37 +712,32 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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',
@@ -823,12 +754,12 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
                         const skipRowsInput = document.getElementById(`${this._id}-skip-rows`) as HTMLInputElement;
 
-                        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, {
@@ -839,42 +770,38 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             });
 
                             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: any) {
-                            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`) as HTMLSelectElement;
             const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
             const skipRowsInput = document.getElementById(`${this._id}-skip-rows`) as HTMLInputElement;
             const previewDiv = document.getElementById(`${this._id}-preview`)!;
 
-            // Auto-detect initial values
             if (this._rawFileData?.text) {
                 const detected = (this._driver as any)._detectDelimiter(this._rawFileData.text);
-                if (delimiterSelect) delimiterSelect.value = detected === '\t' ? '\\t' : detected;
+                if (delimiterSelect) delimiterSelect.value = detected;
 
-                const headerRow = (this._driver as any)._detectHeaderRow(this._rawFileData.text, detected);
-                if (headerRowInput) headerRowInput.value = String(headerRow);
+                const detectedHeaderRow = (this._driver as any)._detectHeaderRow(this._rawFileData.text, detected);
+                if (headerRowInput) 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;
 
@@ -888,13 +815,15 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     });
 
                     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: any) {
-                    if (previewDiv) previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                    if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;
                 }
             };
 
@@ -903,17 +832,16 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             if (skipRowsInput) skipRowsInput.addEventListener('input', updatePreview);
 
             updatePreview();
-
             this._reshapeModal!.open();
         });
     }
 
-    update(_prop: string, _value: any): void { }
-
     /* ═══════════════════════════════════════════════════
-     * RENDER
+     * UPDATE & RENDER
      * ═══════════════════════════════════════════════════ */
 
+    update(_prop: string, _value: any): void { }
+
     render(targetId?: string | HTMLElement | BaseComponent<any>): this {
         const container = this._setupContainer(targetId);
         const { style, class: className } = this.state;
@@ -934,52 +862,12 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             }
 
             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: File[]) => {
                     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: any) {
-                        this._triggerCallback('error', err.message, null, this);
-                        this.state.loading = false;
-                        this._updateStatus('❌ ' + err.message, 'error');
-                    }
+                    await this._handleFile(files[0]);
                 });
             };