juxscript 1.1.184 → 1.1.186

package/lib/components/dataframe.d.ts

@@ -45,6 +45,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _maxFileSize;
     private _showReshapeWarning;
     private _rawFileData;
+    private _reshapeModal;
     constructor(id: string, options?: DataFrameOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -95,13 +96,23 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _renderMultiSheet;
     private _updateStatus;
     private _setDataFrame;
-    private _updateTable;
-    private _showFilterInput;
     /**
-     * ✅ NEW: Show settings modal to reshape CSV data
+     * ✅ NEW: Detect if data looks malformed
+     */
+    private _detectMalformedData;
+    /**
+     * ✅ UPDATED: Show settings modal using Modal component
      */
     private _showReshapeModal;
-    update(prop: string, value: any): void;
+    /**
+     * ✅ UPDATED: Excel reshape modal using Modal component
+     */
+    private _showExcelReshapeModal;
+    /**
+     * ✅ UPDATED: CSV reshape modal using Modal component
+     */
+    private _showCSVReshapeModal;
+    update(_prop: string, _value: any): void;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }
 export declare function dataframe(id: string, options?: DataFrameOptions): DataFrameComponent;

package/lib/components/dataframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}

package/lib/components/dataframe.js

@@ -4,6 +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 { renderIcon } from './icons.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
@@ -22,9 +23,9 @@ export class DataFrameComponent extends BaseComponent {
         });
         this._df = null;
         this._table = null;
-        this._tabs = null; // ✅ NEW: Tabs for multi-sheet Excel
+        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;
+        this._uploadRef = null; // @ts-ignore used for reference tracking
         this._storageKey = null;
         this._pendingSource = null;
         this._inlineUpload = null;
@@ -34,7 +35,8 @@ export class DataFrameComponent extends BaseComponent {
         this._sheetChunkSize = 10000; // ✅ Default 10k chunk
         this._maxFileSize = 50; // ✅ Default 50MB
         this._showReshapeWarning = true;
-        this._rawFileData = null; // ✅ Store for re-parsing
+        this._rawFileData = null;
+        this._reshapeModal = null; // ✅ ADD THIS LINE
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
         this._showStatus = options.showStatus ?? true;
         this._icon = options.icon ?? '';
@@ -104,6 +106,8 @@ export class DataFrameComponent extends BaseComponent {
                     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,
@@ -125,7 +129,7 @@ export class DataFrameComponent extends BaseComponent {
                     else {
                         // ✅ CSV/TSV: Store raw text for reshaping
                         const text = await file.text();
-                        this._rawFileData = { file, text };
+                        this._rawFileData = { file, text, isExcel: false };
                         const df = this._driver.parseCSV(text, {
                             autoDetectDelimiter: true,
                             hasHeader: true
@@ -368,7 +372,7 @@ export class DataFrameComponent extends BaseComponent {
         if (type)
             el.classList.add(`jux-dataframe-status-${type}`);
         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';
@@ -391,155 +395,307 @@ export class DataFrameComponent extends BaseComponent {
         if (cleanCols.length < df.columns.length) {
             this._df = df.select(...cleanCols);
         }
-        this._updateTable();
-        this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-        // ✅ Add reshape warning button if CSV and enabled
-        if (this._showReshapeWarning && this._rawFileData?.text) {
+        // 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());
+        }
+        // ✅ Detect malformed data
+        const isMalformed = this._detectMalformedData(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)`, 'warning');
+            // Add Settings button
             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.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) {
+                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);
     }
-    _updateTable() {
-        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');
-            if (wrapper) {
-                // Clear table content
-                tableElement.innerHTML = '';
-                // Rebuild header
-                const thead = this._table._buildTableHeader();
-                tableElement.appendChild(thead);
-                // Rebuild body
-                const tbody = document.createElement('tbody');
-                this._table._renderTableBody(tbody);
-                tableElement.appendChild(tbody);
-                // Re-wire events
-                this._table._wireTriggerEvents(tbody);
-                // ✅ FIX: Re-build pagination controls
-                if (this._tableOptions.paginated) {
-                    this._table._updatePagination(wrapper, tbody);
-                }
+    /**
+     * ✅ NEW: Detect if data looks malformed
+     */
+    _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(/^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 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;
     }
-    _showFilterInput() {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper)
-            return;
-        if (wrapper.querySelector('.jux-dataframe-filter'))
+    /**
+     * ✅ UPDATED: Show settings modal using Modal component
+     */
+    _showReshapeModal() {
+        if (!this._rawFileData)
             return;
-        const filterContainer = document.createElement('div');
-        filterContainer.className = 'jux-dataframe-filter';
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.placeholder = 'Filter rows...';
-        input.className = 'jux-input-element jux-dataframe-filter-input';
-        const iconEl = renderIcon('search');
-        iconEl.style.width = '16px';
-        iconEl.style.height = '16px';
-        const iconWrap = document.createElement('span');
-        iconWrap.className = 'jux-dataframe-filter-icon';
-        iconWrap.appendChild(iconEl);
-        filterContainer.appendChild(iconWrap);
-        filterContainer.appendChild(input);
-        const tableElement = wrapper.querySelector('.jux-table-wrapper table');
-        if (tableElement && tableElement.parentElement) {
-            tableElement.parentElement.insertBefore(filterContainer, tableElement);
+        const isExcel = this._rawFileData.isExcel;
+        if (isExcel) {
+            this._showExcelReshapeModal();
         }
         else {
-            wrapper.appendChild(filterContainer);
+            this._showCSVReshapeModal();
         }
-        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());
-        });
     }
     /**
-     * ✅ NEW: Show settings modal to reshape CSV data
+     * ✅ UPDATED: Excel reshape modal using Modal component
      */
-    _showReshapeModal() {
-        if (!this._rawFileData)
+    async _showExcelReshapeModal() {
+        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">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>
+        // Create modal if not exists
+        if (!this._reshapeModal) {
+            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>
+        `;
+        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`);
+                    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);
+                        }
+                        this._reshapeModal.closeModal();
+                    }
+                    catch (err) {
+                        this._updateStatus(`❌ ${err.message}`, 'error');
+                    }
+                }
+            }
+        ])
+            .render(document.body);
+        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
+                });
+                const firstSheet = Object.values(sheets)[0];
+                if (!firstSheet) {
+                    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}`;
+                }).join('\n');
+                previewDiv.textContent = `Columns: ${firstSheet.columns.join(' │ ')}\n${'─'.repeat(80)}\n${preview}`;
+            }
+            catch (err) {
+                previewDiv.textContent = `⚠️ Error: ${err.message}`;
+            }
+        };
+        headerRowInput.addEventListener('input', updatePreview);
+        updatePreview();
+        this._reshapeModal.open();
+    }
+    /**
+     * ✅ UPDATED: CSV reshape modal using Modal component
+     */
+    _showCSVReshapeModal() {
+        if (!this._rawFileData)
+            return;
+        // Create modal if not exists
+        if (!this._reshapeModal) {
+            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 = `
+            <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>
         `;
-        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 () => {
+                    if (!this._rawFileData?.text)
+                        return;
+                    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 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
+                        });
+                        await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
+                        this._setDataFrame(df, this._rawFileData.file.name);
+                        this._reshapeModal.closeModal();
+                    }
+                    catch (err) {
+                        this._updateStatus(`❌ ${err.message}`, 'error');
+                    }
+                }
+            }
+        ])
+            .render(document.body);
         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
+        // Auto-detect initial values
         if (this._rawFileData.text) {
             const detected = this._driver._detectDelimiter(this._rawFileData.text);
             delimiterSelect.value = detected === '\t' ? '\\t' : detected;
             const headerRow = this._driver._detectHeaderRow(this._rawFileData.text, detected);
             headerRowInput.value = String(headerRow);
         }
-        // ✅ Update preview on changes
+        // Update preview on changes
         const updatePreview = async () => {
             if (!this._rawFileData?.text)
                 return;
@@ -552,13 +708,13 @@ export class DataFrameComponent extends BaseComponent {
                     headerRow,
                     skipRows,
                     hasHeader: true,
-                    maxRows: 10 // Preview first 10 rows
+                    maxRows: 10
                 });
                 const preview = df.toRows().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: ${df.columns.join(' | ')}\n\n${preview}`;
+                previewDiv.textContent = `Columns: ${df.columns.join(' │ ')}\n${'─'.repeat(80)}\n${preview}`;
             }
             catch (err) {
                 previewDiv.textContent = `⚠️ Error: ${err.message}`;
@@ -568,36 +724,9 @@ export class DataFrameComponent extends BaseComponent {
         headerRowInput.addEventListener('input', updatePreview);
         skipRowsInput.addEventListener('input', updatePreview);
         updatePreview();
-        // ✅ Apply button
-        document.getElementById(`${this._id}-apply-reshape`).addEventListener('click', async () => {
-            if (!this._rawFileData?.text)
-                return;
-            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
-                });
-                await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                this._setDataFrame(df, this._rawFileData.file.name);
-                modal.remove();
-            }
-            catch (err) {
-                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();
     }
-    update(prop, value) { }
+    update(_prop, _value) { }
     /* ═══════════════════════════════════════════════════
      * RENDER
      * ═══════════════════════════════════════════════════ */
@@ -633,6 +762,8 @@ export class DataFrameComponent extends BaseComponent {
                         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,