juxscript 1.1.185 → 1.1.187

package/lib/components/dataframe.ts

@@ -4,7 +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 Modal
 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;
@@ -39,7 +41,7 @@ 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
+    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 _tableOptions: {
         striped: boolean;
@@ -49,7 +51,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         paginated: boolean;
         rowsPerPage: number;
     };
-    private _uploadRef: FileUpload | null = null;
+    private _uploadRef: FileUpload | null = null; // @ts-ignore used for reference tracking
     private _storageKey: string | null = null;
     private _pendingSource: (() => Promise<void>) | null = null;
     private _inlineUpload: { label: string; accept: string; icon: string } | null = null;
@@ -59,7 +61,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _sheetChunkSize: number = 10000; // ✅ Default 10k chunk
     private _maxFileSize: number = 50; // ✅ Default 50MB
     private _showReshapeWarning: boolean = true;
-    private _rawFileData: { file: File; text?: string; isExcel?: boolean } | null = null; // ✅ Add isExcel flag
+    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
 
     constructor(id: string, options: DataFrameOptions = {}) {
         super(id, {
@@ -454,7 +458,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
 
-    private _updateStatus(text: string, type: 'loading' | 'success' | 'error' | 'empty' = 'empty'): void {
+    private _updateStatus(text: string, type: 'loading' | 'success' | 'error' | 'empty' | 'warning' = 'empty'): void {
         const el = document.getElementById(`${this._id}-status`);
         if (!el) return;
 
@@ -463,7 +467,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         el.innerHTML = '';
 
-        if (this._icon && type === 'success') {
+        if (this._icon && (type === 'success' || type === 'warning')) {
             const iconEl = renderIcon(this._icon);
             iconEl.style.width = '16px';
             iconEl.style.height = '16px';
@@ -490,117 +494,116 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             this._df = df.select(...cleanCols);
         }
 
-        this._updateTable();
-        this._updateStatus(
-            `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols`,
-            'success'
-        );
+        // Update the table with new data
+        if (this._table && this._df) {
+            const columnDefs = this._df.columns.map(col => ({
+                key: col,
+                label: col
+            }));
+            this._table.columns(columnDefs).rows(this._df.toRows());
+        }
 
-        // ✅ FIXED: Add reshape warning button if CSV OR Excel and enabled
-        if (this._showReshapeWarning && this._rawFileData) {
-            const statusEl = document.getElementById(`${this._id}-status`);
-            if (statusEl) {
-                const settingsBtn = document.createElement('button');
-                settingsBtn.textContent = 'Settings';
-                settingsBtn.className = 'jux-button jux-button-sm jux-button-ghost';
-                settingsBtn.style.marginLeft = '0.5rem';
-                settingsBtn.addEventListener('click', () => this._showReshapeModal());
-                statusEl.appendChild(settingsBtn);
+        // ✅ 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
+            requestAnimationFrame(() => {
+                const statusEl = document.getElementById(`${this._id}-status`);
+                if (statusEl) {
+                    const settingsBtn = document.createElement('button');
+                    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());
+                    statusEl.appendChild(settingsBtn);
+                }
+            });
+        } 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.className = 'jux-button jux-button-sm jux-button-ghost';
+                        settingsBtn.style.marginLeft = '0.5rem';
+                        settingsBtn.addEventListener('click', () => this._showReshapeModal());
+                        statusEl.appendChild(settingsBtn);
+                    }
+                });
             }
         }
 
         this._triggerCallback('load', this._df, null, this);
     }
 
-    private _updateTable(): void {
-        if (!this._table || !this._df) return;
-
-        // ✅ Convert string[] columns to ColumnDef[] with labels
-        const columnDefs = this._df.columns.map(col => ({
-            key: col,
-            label: col
-        }));
-
-        // ✅ Update columns and rows
-        this._table.columns(columnDefs).rows(this._df.toRows());
-
-        // ✅ FIX: Force full table rebuild (including pagination)
-        const tableElement = this._table['_tableElement'];
-        if (tableElement) {
-            const wrapper = tableElement.closest('.jux-table-wrapper') as HTMLElement;
-            if (wrapper) {
-                // Clear table content
-                tableElement.innerHTML = '';
-
-                // Rebuild header
-                const thead = (this._table as any)._buildTableHeader();
-                tableElement.appendChild(thead);
-
-                // Rebuild body
-                const tbody = document.createElement('tbody');
-                (this._table as any)._renderTableBody(tbody);
-                tableElement.appendChild(tbody);
-
-                // Re-wire events
-                (this._table as any)._wireTriggerEvents(tbody);
-
-                // ✅ FIX: Re-build pagination controls
-                if (this._tableOptions.paginated) {
-                    (this._table as any)._updatePagination(wrapper, tbody);
-                }
-            }
-        }
-    }
+    /**
+     * ✅ NEW: Detect if data looks malformed
+     */
+    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(/^col_\d+$/)
+        );
 
-    private _showFilterInput(): void {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper) return;
-        if (wrapper.querySelector('.jux-dataframe-filter')) return;
+        if (hasGenericColumns) return true;
 
-        const filterContainer = document.createElement('div');
-        filterContainer.className = 'jux-dataframe-filter';
+        // 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 hasMetadata = values.some(v =>
+                String(v).includes('Exported') ||
+                String(v).includes('Generated') ||
+                String(v).includes('Report')
+            );
 
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.placeholder = 'Filter rows...';
-        input.className = 'jux-input-element jux-dataframe-filter-input';
+            if (hasMetadata) return true;
+        }
 
-        const iconEl = renderIcon('search');
-        iconEl.style.width = '16px';
-        iconEl.style.height = '16px';
+        // 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 iconWrap = document.createElement('span');
-        iconWrap.className = 'jux-dataframe-filter-icon';
-        iconWrap.appendChild(iconEl);
+            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;
 
-        filterContainer.appendChild(iconWrap);
-        filterContainer.appendChild(input);
+                return nonNumeric >= values.length * 0.7; // 70% non-numeric
+            };
 
-        const tableElement = wrapper.querySelector('.jux-table-wrapper table');
-        if (tableElement && tableElement.parentElement) {
-            tableElement.parentElement.insertBefore(filterContainer, tableElement);
-        } else {
-            wrapper.appendChild(filterContainer);
+            if (checkRow(secondRow) || checkRow(thirdRow)) {
+                return true;
+            }
         }
 
-        input.addEventListener('input', () => {
-            if (!this._df) return;
-            const text = input.value.toLowerCase();
-            if (!text) {
-                this._table?.rows(this._df.toRows());
-                return;
-            }
-            const filtered = this._df.filter((row) => {
-                return Object.values(row).some(v =>
-                    v !== null && v !== undefined && String(v).toLowerCase().includes(text)
-                );
-            });
-            this._table?.rows(filtered.toRows());
-        });
+        return false;
     }
 
     /**
-     * ✅ UPDATED: Show settings modal for CSV OR Excel reshaping
+     * ✅ UPDATED: Show settings modal using Modal component
      */
     private _showReshapeModal(): void {
         if (!this._rawFileData) return;
@@ -608,252 +611,304 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const isExcel = this._rawFileData.isExcel;
 
         if (isExcel) {
-            // ✅ Excel-specific modal: Let user pick header row from sheet
             this._showExcelReshapeModal();
         } else {
-            // ✅ CSV-specific modal: delimiter + header row
             this._showCSVReshapeModal();
         }
     }
 
     /**
-     * ✅ NEW: Excel-specific reshape modal (header row picker)
+     * ✅ UPDATED: Excel reshape modal using Modal component
      */
     private async _showExcelReshapeModal(): Promise<void> {
         if (!this._rawFileData?.file) return;
 
-        const modal = document.createElement('div');
-        modal.className = 'jux-modal-overlay';
-        modal.innerHTML = `
-            <div class="jux-modal" style="max-width: 800px;">
-                <div class="jux-modal-header">
-                    <div class="jux-modal-header-title">Excel Import Settings</div>
-                    <button class="jux-modal-close" id="${this._id}-modal-close">×</button>
-                </div>
-                <div class="jux-modal-content" style="padding: 1.5rem;">
-                    <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 style="font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem;">
-                            ⚠️ Detected: Row 0 has "Exported On:", row 2 has "340B ID". Try setting this to 2.
-                        </div>
-                    </div>
-                    
-                    <div style="border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; background: hsl(var(--muted) / 0.3); max-height: 300px; overflow-y: auto;">
-                        <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: monospace; font-size: 0.75rem; white-space: pre; color: hsl(var(--muted-foreground));"></div>
-                    </div>
+        // 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._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 = `
+            <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%;" 
+                />
+                <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>
-                <div class="jux-modal-footer">
-                    <button id="${this._id}-cancel-reshape" class="jux-button jux-button-ghost">Cancel</button>
-                    <button id="${this._id}-apply-reshape" class="jux-button">Apply & Re-import</button>
+            </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 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>
         `;
 
-        document.body.appendChild(modal);
+        this._reshapeModal
+            .content(modalContent.innerHTML)
+            .actions([
+                {
+                    label: 'Cancel',
+                    variant: 'secondary',
+                    click: () => this._reshapeModal!.closeModal()
+                },
+                {
+                    label: 'Apply & Re-import',
+                    variant: 'primary',
+                    click: async () => {
+                        const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
+                        const headerRow = parseInt(headerRowInput.value) || 0;
+
+                        this.state.loading = true;
+                        this._updateStatus('⏳ Re-parsing with new settings...', 'loading');
+
+                        try {
+                            const sheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
+                                headerRow,
+                                maxSheetSize: this._maxSheetSize,
+                                sheetChunkSize: this._sheetChunkSize
+                            });
+
+                            const sheetNames = Object.keys(sheets);
+                            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._showReshapeWarning = false; // Prevent recursive warning after manual fix
+                                this._setDataFrame(sheets[sheetNames[0]], this._rawFileData!.file.name);
+                            }
+
+                            this._reshapeModal!.closeModal();
+                        } catch (err: any) {
+                            this._updateStatus(`❌ ${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
+        // Update preview on header row change
         const updatePreview = async () => {
-            const headerRow = parseInt(headerRowInput.value) || 0;
+            const headerRow = parseInt(headerRowInput?.value) || 0;
 
             try {
-                // Re-parse Excel with specified header row
                 const sheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
-                    headerRow, // ✅ Pass header row to parser
-                    maxSheetSize: 10 // Preview only
+                    headerRow,
+                    maxSheetSize: 10
                 });
 
                 const firstSheet = Object.values(sheets)[0];
                 if (!firstSheet) {
-                    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(' | ');
+                    const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' │ ');
                     return `${i === 0 ? '📌 ' : '   '}${cols}`;
                 }).join('\n');
 
-                previewDiv.textContent = `Columns: ${firstSheet.columns.join(' | ')}\n\n${preview}`;
+                if (previewDiv) previewDiv.textContent = `Columns: ${firstSheet.columns.join(' │ ')}\n${'─'.repeat(80)}\n${preview}`;
             } catch (err: any) {
-                previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                if (previewDiv) previewDiv.textContent = `⚠️ Error: ${err.message}`;
             }
         };
 
-        headerRowInput.addEventListener('input', updatePreview);
+        if (headerRowInput) headerRowInput.addEventListener('input', updatePreview);
         updatePreview();
 
-        // ✅ Apply button
-        document.getElementById(`${this._id}-apply-reshape`)!.addEventListener('click', async () => {
-            const headerRow = parseInt(headerRowInput.value) || 0;
-
-            this.state.loading = true;
-            this._updateStatus('⏳ Re-parsing with new settings...', 'loading');
-
-            try {
-                const sheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
-                    headerRow,
-                    maxSheetSize: this._maxSheetSize,
-                    sheetChunkSize: this._sheetChunkSize
-                });
-
-                const sheetNames = Object.keys(sheets);
-                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);
-                }
-
-                modal.remove();
-            } catch (err: any) {
-                this._updateStatus(`❌ ${err.message}`, 'error');
-            }
-        });
-
-        // ✅ Cancel/Close buttons
-        const closeModal = () => modal.remove();
-        document.getElementById(`${this._id}-cancel-reshape`)!.addEventListener('click', closeModal);
-        document.getElementById(`${this._id}-modal-close`)!.addEventListener('click', closeModal);
+        this._reshapeModal.open();
     }
 
     /**
-     * ✅ CSV-specific reshape modal (existing implementation)
+     * ✅ UPDATED: CSV reshape modal using Modal component
      */
     private _showCSVReshapeModal(): void {
         if (!this._rawFileData) return;
 
-        const modal = document.createElement('div');
-        modal.className = 'jux-modal-overlay';
-        modal.innerHTML = `
-            <div class="jux-modal" style="max-width: 800px;">
-                <div class="jux-modal-header">
-                    <div class="jux-modal-header-title">Data Import Settings</div>
-                    <button class="jux-modal-close" id="${this._id}-modal-close">×</button>
-                </div>
-                <div class="jux-modal-content" style="padding: 1.5rem;">
-                    <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=";">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: 300px; overflow-y: auto;">
-                        <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
-                        <div id="${this._id}-preview" style="font-family: monospace; font-size: 0.75rem; white-space: pre; color: hsl(var(--muted-foreground));"></div>
-                    </div>
-                </div>
-                <div class="jux-modal-footer">
-                    <button id="${this._id}-cancel-reshape" class="jux-button jux-button-ghost">Cancel</button>
-                    <button id="${this._id}-apply-reshape" class="jux-button">Apply & Re-import</button>
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(modal);
-
-        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);
-            delimiterSelect.value = detected === '\t' ? '\\t' : detected;
-
-            const headerRow = (this._driver as any)._detectHeaderRow(this._rawFileData.text, detected);
-            headerRowInput.value = String(headerRow);
+        // 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;
         }
 
-        // ✅ Update preview on changes
-        const updatePreview = async () => {
-            if (!this._rawFileData?.text) return;
+        // Create fresh modal
+        this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
+            title: 'CSV Import Settings',
+            size: 'large',
+            close: true,
+            backdropClose: false
+        });
 
-            const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
-            const headerRow = parseInt(headerRowInput.value) || 0;
-            const skipRows = parseInt(skipRowsInput.value) || 0;
+        // Build modal content
+        const modalContent = document.createElement('div');
+        modalContent.innerHTML = `
+            <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=";">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 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>
+        `;
 
-            try {
-                const df = this._driver.parseCSV(this._rawFileData.text, {
-                    delimiter: delim,
-                    headerRow,
-                    skipRows,
-                    hasHeader: true,
-                    maxRows: 10 // Preview first 10 rows
-                });
+        this._reshapeModal
+            .content(modalContent.innerHTML)
+            .actions([
+                {
+                    label: 'Cancel',
+                    variant: 'secondary',
+                    click: () => this._reshapeModal!.closeModal()
+                },
+                {
+                    label: 'Apply & Re-import',
+                    variant: 'primary',
+                    click: async () => {
+                        if (!this._rawFileData?.text) return;
+
+                        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 delim = delimiterSelect.value === '\\t' ? '\t' : 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');
+
+                        try {
+                            const df = this._driver.parseCSV(this._rawFileData.text, {
+                                delimiter: delim,
+                                headerRow,
+                                skipRows,
+                                hasHeader: true
+                            });
 
-                const preview = df.toRows().map((row, i) => {
-                    const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' | ');
-                    return `${i === 0 ? '📌 ' : '   '}${cols}`;
-                }).join('\n');
+                            await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
+                            this._showReshapeWarning = false; // Prevent recursive warning after manual fix
+                            this._setDataFrame(df, this._rawFileData.file.name);
 
-                previewDiv.textContent = `Columns: ${df.columns.join(' | ')}\n\n${preview}`;
-            } catch (err: any) {
-                previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                            this._reshapeModal!.closeModal();
+                        } catch (err: any) {
+                            this._updateStatus(`❌ ${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;
+
+                const headerRow = (this._driver as any)._detectHeaderRow(this._rawFileData.text, detected);
+                if (headerRowInput) headerRowInput.value = String(headerRow);
             }
-        };
 
-        delimiterSelect.addEventListener('change', updatePreview);
-        headerRowInput.addEventListener('input', updatePreview);
-        skipRowsInput.addEventListener('input', updatePreview);
+            // Update preview on changes
+            const updatePreview = async () => {
+                if (!this._rawFileData?.text) return;
 
-        updatePreview();
+                const delim = delimiterSelect?.value === '\\t' ? '\t' : (delimiterSelect?.value || ',');
+                const headerRow = parseInt(headerRowInput?.value) || 0;
+                const skipRows = parseInt(skipRowsInput?.value) || 0;
 
-        // ✅ Apply button
-        document.getElementById(`${this._id}-apply-reshape`)!.addEventListener('click', async () => {
-            if (!this._rawFileData?.text) return;
+                try {
+                    const df = this._driver.parseCSV(this._rawFileData.text, {
+                        delimiter: delim,
+                        headerRow,
+                        skipRows,
+                        hasHeader: true,
+                        maxRows: 10
+                    });
 
-            const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
-            const headerRow = parseInt(headerRowInput.value) || 0;
-            const skipRows = parseInt(skipRowsInput.value) || 0;
+                    const preview = df.toRows().map((row, i) => {
+                        const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' │ ');
+                        return `${i === 0 ? '📌 ' : '   '}${cols}`;
+                    }).join('\n');
 
-            this.state.loading = true;
-            this._updateStatus('⏳ Re-parsing with new settings...', 'loading');
+                    if (previewDiv) previewDiv.textContent = `Columns: ${df.columns.join(' │ ')}\n${'─'.repeat(80)}\n${preview}`;
+                } catch (err: any) {
+                    if (previewDiv) previewDiv.textContent = `⚠️ Error: ${err.message}`;
+                }
+            };
 
-            try {
-                const df = this._driver.parseCSV(this._rawFileData.text, {
-                    delimiter: delim,
-                    headerRow,
-                    skipRows,
-                    hasHeader: true
-                });
+            if (delimiterSelect) delimiterSelect.addEventListener('change', updatePreview);
+            if (headerRowInput) headerRowInput.addEventListener('input', updatePreview);
+            if (skipRowsInput) skipRowsInput.addEventListener('input', updatePreview);
 
-                await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                this._setDataFrame(df, this._rawFileData.file.name);
+            updatePreview();
 
-                modal.remove();
-            } catch (err: any) {
-                this._updateStatus(`❌ ${err.message}`, 'error');
-            }
+            this._reshapeModal!.open();
         });
-
-        // ✅ Cancel/Close buttons
-        const closeModal = () => modal.remove();
-        document.getElementById(`${this._id}-cancel-reshape`)!.addEventListener('click', closeModal);
-        document.getElementById(`${this._id}-modal-close`)!.addEventListener('click', closeModal);
     }
 
-    update(prop: string, value: any): void { }
+    update(_prop: string, _value: any): void { }
 
     /* ═══════════════════════════════════════════════════
      * RENDER