juxscript 1.1.205 → 1.1.207

package/lib/components/dataframe.ts

@@ -519,37 +519,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         return false;
     }
 
-    private _detectLikelyHeaderRow(df: DataFrame): number {
-        const rows = df.toRows();
-        const cols = df.columns;
-
-        const colsAreGeneric = cols.some(c =>
-            c.startsWith('__EMPTY') || c.match(/^_\d+$/) || c.match(/^col_\d+$/)
-        );
-
-        if (!colsAreGeneric) return 0;
-
-        for (let i = 0; i < Math.min(rows.length, 10); i++) {
-            const row = rows[i];
-            const values = Object.values(row);
-            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
-
-            if (nonEmpty.length < values.length * 0.5) continue;
-
-            const nonNumericCount = nonEmpty.filter(v => {
-                const str = String(v).trim();
-                return isNaN(Number(str)) && str !== '';
-            }).length;
-
-            if (nonNumericCount >= nonEmpty.length * 0.7) {
-                // toRows index i = file row (i + 1) since row 0 was used as headers
-                return i + 1;
-            }
-        }
-
-        return 0;
-    }
-
     /* ═══════════════════════════════════════════════════
      * RESHAPE MODAL
      * ═══════════════════════════════════════════════════ */
@@ -573,23 +542,103 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         }
     }
 
+    private _escapeHtml(text: string): string {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    /**
+     * Build a clickable preview table from raw row data.
+     * Each row stores its actual sheet row index via data-sheet-row attribute.
+     * Returns the table HTML string.
+     */
+    private _buildClickablePreviewHTML(
+        rawRows: { sheetRow: number; values: any[] }[],
+        selectedSheetRow: number
+    ): string {
+        let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
+
+        for (const { sheetRow, values } of rawRows) {
+            const isHeader = (sheetRow === selectedSheetRow);
+            const isSkipped = (sheetRow < selectedSheetRow);
+
+            let rowStyle = 'border-bottom: 1px solid hsl(var(--border)); cursor: pointer; transition: background 0.1s;';
+
+            if (isHeader) {
+                rowStyle += 'background: hsl(142 71% 45% / 0.15); font-weight: 600;';
+            } else if (isSkipped) {
+                rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
+            }
+
+            html += `<tr data-sheet-row="${sheetRow}" style="${rowStyle}" onmouseover="this.style.outline='2px solid hsl(142 71% 45% / 0.5)'" onmouseout="this.style.outline=''">`;
+
+            // Row index cell
+            html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center; user-select: none;">`;
+            if (isHeader) {
+                html += `<span style="color: hsl(142 71% 45%);">▶ ${sheetRow}</span>`;
+            } else {
+                html += `${sheetRow}`;
+            }
+            html += '</td>';
+
+            // Show first 6 columns
+            const displayCols = values.slice(0, 6);
+            displayCols.forEach(val => {
+                const displayVal = val != null ? String(val).substring(0, 20) : '';
+                const cellStyle = isHeader
+                    ? 'padding: 8px 12px; font-weight: 600; color: hsl(var(--foreground));'
+                    : 'padding: 8px 12px;';
+                html += `<td style="${cellStyle}">${this._escapeHtml(displayVal)}</td>`;
+            });
+
+            if (values.length > 6) {
+                html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
+            }
+
+            // Status badge
+            html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap; user-select: none;">`;
+            if (isHeader) {
+                html += '<span style="background: hsl(142 71% 45%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;">HEADER</span>';
+            } else if (isSkipped) {
+                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">skipped</span>';
+            } else {
+                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
+            }
+            html += '</td></tr>';
+        }
+
+        html += '</table>';
+        return html;
+    }
+
     private async _showExcelReshapeModal(): Promise<void> {
         if (!this._rawFileData?.file) return;
 
         this._cleanupReshapeModal();
 
-        let suggestedRow = 0;
-        try {
-            const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
-                headerRow: 0,
-                maxSheetSize: 20
-            });
-            const rawSheet = Object.values(rawSheets)[0];
-            if (rawSheet) {
-                suggestedRow = this._detectLikelyHeaderRow(rawSheet);
+        // ✅ Use the SAME cell-reading method as the parser
+        const rawRows = await this._driver.readRawExcelRows(this._rawFileData.file, 15);
+
+        if (rawRows.length === 0) return;
+
+        // Log what we got so we can verify alignment
+        console.log('[DataFrame Preview] Raw rows from readRawExcelRows:');
+        rawRows.forEach(r => console.log(`  sheetRow ${r.sheetRow}:`, r.values.slice(0, 5)));
+
+        // Auto-detect best header row
+        let selectedSheetRow = rawRows[0].sheetRow;
+        for (const { sheetRow, values } of rawRows) {
+            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
+            if (nonEmpty.length < values.length * 0.5) continue;
+            const nonNumeric = nonEmpty.filter(v => {
+                const str = String(v).trim();
+                return isNaN(Number(str)) && str !== '';
+            }).length;
+            if (nonNumeric >= nonEmpty.length * 0.7) {
+                selectedSheetRow = sheetRow;
+                break;
             }
-        } catch {
-            suggestedRow = 0;
         }
 
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
@@ -601,14 +650,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         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 index)
-                </label>
-                <input type="number" id="${this._id}-header-row" class="jux-input-element" value="${suggestedRow}" min="0" max="50" style="width: 100%;" />
-                <div id="${this._id}-reshape-hint" class="jux-reshape-hint" style="margin-top: 0.5rem; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
+                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
+                <input type="hidden" id="${this._id}-header-row" value="${selectedSheetRow}" />
             </div>
-            <div class="jux-reshape-preview-container">
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
+            <div>
+                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
                 <div id="${this._id}-preview" style="font-family: ui-monospace, monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
             </div>
         `;
@@ -628,6 +674,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         const input = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
                         const headerRow = parseInt(input.value) || 0;
 
+                        console.log(`[DataFrame] Apply clicked: headerRow=${headerRow}`);
+
                         this.state.loading = true;
                         this._updateStatus('Re-parsing with new settings...', 'loading');
 
@@ -668,134 +716,79 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         await new Promise(resolve => requestAnimationFrame(resolve));
 
-        const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
         const previewDiv = document.getElementById(`${this._id}-preview`)!;
         const hintDiv = document.getElementById(`${this._id}-reshape-hint`)!;
+        const hiddenInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
 
-        const updateHint = (headerRow: number) => {
+        const updateHint = (row: number) => {
             if (!hintDiv) return;
-            if (headerRow > 0) {
-                hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
+            const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
+            const headerNames = vals.filter((v: any) => v != null && String(v).trim() !== '').map((v: any) => String(v).trim());
+            const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
+            if (row > rawRows[0].sheetRow) {
+                hintDiv.innerHTML = `Sheet row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows before it will be skipped.`;
             } else {
-                hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                hintDiv.innerHTML = `Sheet row <strong>${row}</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
             }
         };
 
-        const updatePreview = async () => {
-            const headerRow = parseInt(headerRowInput?.value) || 0;
-            updateHint(headerRow);
-
-            try {
-                // Read cells directly from XLSX to match parser behavior exactly
-                const XLSX = await import('xlsx');
-                const buffer = await this._rawFileData!.file.arrayBuffer();
-                const workbook = XLSX.read(buffer, {
-                    type: 'array',
-                    sheetRows: Math.max(headerRow + 12, 15),
-                    dense: false
+        const renderPreview = (selected: number) => {
+            if (!previewDiv) return;
+            previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
+
+            previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                tr.addEventListener('click', () => {
+                    const rowIdx = parseInt((tr as HTMLElement).dataset.sheetRow!);
+                    hiddenInput.value = String(rowIdx);
+                    console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
+                    updateHint(rowIdx);
+                    renderPreview(rowIdx);
                 });
-
-                const sheetName = workbook.SheetNames[0];
-                const worksheet = workbook.Sheets[sheetName];
-                const ref = worksheet['!ref'];
-                if (!ref) {
-                    if (previewDiv) previewDiv.textContent = 'No data found';
-                    return;
-                }
-
-                const range = XLSX.utils.decode_range(ref);
-                const endRow = range.e.r;
-                const startCol = range.s.c;
-                const endCol = range.e.c;
-
-                const readCellValue = (r: number, c: number): any => {
-                    const addr = XLSX.utils.encode_cell({ r, c });
-                    const cell = worksheet[addr];
-                    if (!cell) return null;
-                    if (cell.w !== undefined) return cell.w;
-                    if (cell.v !== undefined) return cell.v;
-                    return null;
-                };
-
-                const readRow = (r: number): any[] => {
-                    const vals: any[] = [];
-                    for (let c = startCol; c <= endCol; c++) {
-                        vals.push(readCellValue(r, c));
-                    }
-                    return vals;
-                };
-
-                let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
-                const totalRowsToShow = Math.min(headerRow + 8, endRow + 1);
-
-                for (let fileRow = 0; fileRow < totalRowsToShow; fileRow++) {
-                    const isHeader = (fileRow === headerRow);
-                    const isSkipped = (fileRow < headerRow);
-
-                    let rowStyle = 'border-bottom: 1px solid hsl(var(--border));';
-                    if (isHeader) {
-                        rowStyle += 'background: hsl(142 71% 45% / 0.15); font-weight: 600;';
-                    } else if (isSkipped) {
-                        rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
-                    }
-
-                    html += `<tr style="${rowStyle}">`;
-                    html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center;">`;
-                    if (isHeader) {
-                        html += `<span style="color: hsl(142 71% 45%);">▶ ${fileRow}</span>`;
-                    } else {
-                        html += `${fileRow}`;
-                    }
-                    html += '</td>';
-
-                    const values = readRow(fileRow);
-                    const displayCols = values.slice(0, 6);
-                    displayCols.forEach(val => {
-                        const displayVal = val != null ? String(val).substring(0, 20) : '';
-                        const cellStyle = isHeader
-                            ? 'padding: 8px 12px; font-weight: 600; color: hsl(var(--foreground));'
-                            : 'padding: 8px 12px;';
-                        html += `<td style="${cellStyle}">${this._escapeHtml(displayVal)}</td>`;
-                    });
-
-                    if (values.length > 6) {
-                        html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">...</td>`;
-                    }
-
-                    html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap;">`;
-                    if (isHeader) {
-                        html += '<span style="background: hsl(var(--primary)); color: white; padding: 2px 6px; border-radius: 4px;">HEADER</span>';
-                    } else if (isSkipped) {
-                        html += '<span style="color: hsl(var(--muted-foreground));">skipped</span>';
-                    } else {
-                        html += '<span style="color: hsl(var(--success));">data</span>';
-                    }
-                    html += '</td></tr>';
-                }
-
-                html += '</table>';
-                if (previewDiv) previewDiv.innerHTML = html;
-            } catch (err: any) {
-                if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;
-            }
+            });
         };
 
-        if (headerRowInput) headerRowInput.addEventListener('input', updatePreview);
-        updatePreview();
+        updateHint(selectedSheetRow);
+        renderPreview(selectedSheetRow);
         this._reshapeModal.open();
     }
 
-    private _escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
     private _showCSVReshapeModal(): void {
-        if (!this._rawFileData) return;
+        if (!this._rawFileData?.text) return;
 
         this._cleanupReshapeModal();
 
+        const text = this._rawFileData.text;
+        const detected = (this._driver as any)._detectDelimiter(text);
+
+        // Parse raw lines
+        const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
+        const rawRows: { sheetRow: number; values: any[] }[] = [];
+        const maxPreviewRows = Math.min(lines.length, 15);
+
+        for (let i = 0; i < maxPreviewRows; i++) {
+            if (!lines[i]) {
+                rawRows.push({ sheetRow: i, values: [''] });
+                continue;
+            }
+            const values = (this._driver as any)._parseLine(lines[i], detected);
+            rawRows.push({ sheetRow: i, values });
+        }
+
+        // Auto-detect header row
+        let selectedRow = 0;
+        for (const { sheetRow, values } of rawRows) {
+            const nonEmpty = values.filter((v: string) => v.trim() !== '');
+            if (nonEmpty.length < values.length * 0.5) continue;
+            const nonNumeric = nonEmpty.filter((v: string) => {
+                const trimmed = v.trim();
+                return isNaN(Number(trimmed)) && trimmed !== '';
+            }).length;
+            if (nonNumeric >= nonEmpty.length * 0.7) {
+                selectedRow = sheetRow;
+                break;
+            }
+        }
+
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'CSV Import Settings',
             size: 'large',
@@ -814,12 +807,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 </select>
             </div>
             <div style="margin-bottom: 1rem;">
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Header Row (0-based index)</label>
-                <input type="number" id="${this._id}-header-row" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
+                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
+                <input type="hidden" id="${this._id}-header-row" value="${selectedRow}" />
             </div>
-            <div id="${this._id}-reshape-hint" class="jux-reshape-hint" style="margin-top: 0.5rem; margin-bottom: 1rem; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
-            <div class="jux-reshape-preview-container">
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
+            <div>
+                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
                 <div id="${this._id}-preview" style="font-family: monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
             </div>
         `;
@@ -836,26 +828,24 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     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 hiddenInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
 
                         const delim = delimiterSelect.value;
-                        const headerRow = parseInt(headerRowInput.value) || 0;
+                        const headerRow = parseInt(hiddenInput.value) || 0;
 
                         this.state.loading = true;
                         this._updateStatus('Re-parsing with new settings...', 'loading');
 
                         try {
-                            const df = this._driver.parseCSV(this._rawFileData.text, {
+                            const df = this._driver.parseCSV(this._rawFileData!.text!, {
                                 delimiter: delim,
                                 headerRow,
                                 hasHeader: true
                             });
 
-                            await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                            this._setDataFrame(df, this._rawFileData.file.name);
+                            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: any) {
                             this._updateStatus(`Error: ${err.message}`, 'error');
@@ -870,105 +860,63 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         requestAnimationFrame(() => {
             const delimiterSelect = document.getElementById(`${this._id}-delimiter`) as HTMLSelectElement;
-            const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
             const previewDiv = document.getElementById(`${this._id}-preview`)!;
             const hintDiv = document.getElementById(`${this._id}-reshape-hint`)!;
+            const hiddenInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
 
-            if (this._rawFileData?.text) {
-                const detected = (this._driver as any)._detectDelimiter(this._rawFileData.text);
-                if (delimiterSelect) delimiterSelect.value = detected;
-
-                const detectedHeaderRow = (this._driver as any)._detectHeaderRow(this._rawFileData.text, detected);
-                if (headerRowInput) headerRowInput.value = String(detectedHeaderRow);
-            }
+            if (delimiterSelect) delimiterSelect.value = detected;
 
-            const updateHint = () => {
+            const updateHint = (row: number) => {
                 if (!hintDiv) return;
-                const headerRow = parseInt(headerRowInput?.value) || 0;
-                if (headerRow > 0) {
-                    hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
+                const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
+                const headerNames = vals.filter((v: any) => v != null && String(v).trim() !== '').map((v: any) => String(v).trim());
+                const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
+                if (row > rawRows[0].sheetRow) {
+                    hintDiv.innerHTML = `Sheet row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows before it will be skipped.`;
                 } else {
-                    hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                    hintDiv.innerHTML = `Sheet row <strong>${row}</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
                 }
             };
 
-            const updatePreview = () => {
-                if (!this._rawFileData?.text) return;
-
+            const reparse = () => {
                 const delim = delimiterSelect?.value || ',';
-                const headerRow = parseInt(headerRowInput?.value) || 0;
-                updateHint();
-
-                try {
-                    const rawDf = this._driver.parseCSV(this._rawFileData.text, {
-                        delimiter: delim,
-                        headerRow: 0,
-                        hasHeader: true,
-                        maxRows: headerRow + 10
-                    });
-
-                    const rawCols = rawDf.columns;
-                    const rawRows = rawDf.toRows();
-
-                    let html = '<table style="width: 100%; border-collapse: collapse; font-size: 11px;">';
-                    const totalRows = Math.min(headerRow + 8, rawRows.length + 1);
-
-                    for (let i = 0; i < totalRows; i++) {
-                        const isHeader = (i === headerRow);
-                        const isSkipped = (i < headerRow);
-
-                        let rowStyle = 'border-bottom: 1px solid hsl(var(--border));';
-                        if (isHeader) {
-                            rowStyle += 'background: hsl(var(--primary) / 0.15); font-weight: bold;';
-                        } else if (isSkipped) {
-                            rowStyle += 'background: hsl(var(--muted) / 0.3); color: hsl(var(--muted-foreground)); font-style: italic;';
-                        }
-
-                        html += `<tr style="${rowStyle}">`;
-                        html += `<td style="padding: 6px 8px; width: 50px; color: hsl(var(--muted-foreground)); font-weight: 500;">`;
-                        html += isHeader ? `<strong>→ ${i}</strong>` : `${i}`;
-                        html += '</td>';
-
-                        let values: any[];
-                        if (i === 0) {
-                            values = rawCols;
-                        } else if (i - 1 < rawRows.length) {
-                            values = Object.values(rawRows[i - 1]);
-                        } else {
-                            values = [];
-                        }
-
-                        values.slice(0, 6).forEach(val => {
-                            const displayVal = val != null ? String(val).substring(0, 25) : '';
-                            html += `<td style="padding: 6px 8px;">${this._escapeHtml(displayVal)}</td>`;
-                        });
-
-                        if (values.length > 6) {
-                            html += `<td style="padding: 6px 8px; color: hsl(var(--muted-foreground));">...</td>`;
-                        }
-
-                        html += `<td style="padding: 6px 8px; text-align: right; font-size: 10px;">`;
-                        if (isHeader) {
-                            html += '<span style="background: hsl(var(--primary)); color: white; padding: 2px 6px; border-radius: 4px;">HEADER</span>';
-                        } else if (isSkipped) {
-                            html += '<span style="color: hsl(var(--muted-foreground));">skipped</span>';
-                        } else {
-                            html += '<span style="color: hsl(var(--success));">data</span>';
-                        }
-                        html += '</td></tr>';
+                rawRows.length = 0;
+                for (let i = 0; i < maxPreviewRows; i++) {
+                    if (!lines[i]) {
+                        rawRows.push({ sheetRow: i, values: [''] });
+                        continue;
                     }
-
-                    html += '</table>';
-                    if (previewDiv) previewDiv.innerHTML = html;
-                } catch (err: any) {
-                    if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;
+                    const values = (this._driver as any)._parseLine(lines[i], delim);
+                    rawRows.push({ sheetRow: i, values });
                 }
             };
 
-            if (delimiterSelect) delimiterSelect.addEventListener('change', updatePreview);
-            if (headerRowInput) headerRowInput.addEventListener('input', updatePreview);
+            const renderPreview = (selected: number) => {
+                if (!previewDiv) return;
+                previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
+
+                previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                    tr.addEventListener('click', () => {
+                        const rowIdx = parseInt((tr as HTMLElement).dataset.sheetRow!);
+                        hiddenInput.value = String(rowIdx);
+                        console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
+                        updateHint(rowIdx);
+                        renderPreview(rowIdx);
+                    });
+                });
+            };
+
+            if (delimiterSelect) {
+                delimiterSelect.addEventListener('change', () => {
+                    reparse();
+                    const current = parseInt(hiddenInput.value) || 0;
+                    updateHint(current);
+                    renderPreview(current);
+                });
+            }
 
-            updatePreview();
+            updateHint(selectedRow);
+            renderPreview(selectedRow);
             this._reshapeModal!.open();
         });
     }

package/lib/storage/TabularDriver.d.ts

@@ -87,12 +87,18 @@ export declare class TabularDriver {
      * Fetch and stream-parse a remote CSV/TSV file
      */
     fetch(url: string, options?: ParseOptions): Promise<DataFrame>;
+    /**
+     * Read raw cell values from first sheet of an Excel file.
+     * Returns rows with their actual sheet row indices.
+     * Used by both the preview UI and the parser to ensure consistency.
+     */
+    readRawExcelRows(file: File, maxRows?: number): Promise<{
+        sheetRow: number;
+        values: any[];
+    }[]>;
     /**
      * ✅ FIXED: Stream Excel file with optional headerRow override
-     * headerRow is 0-based: 0 = first row, 1 = second row, etc.
-     *
-     * Uses direct cell access instead of sheet_to_json to avoid
-     * issues with blank row handling and sparse arrays.
+     * headerRow is the absolute sheet row index (same as sheetRow from readRawExcelRows).
      */
     streamFileMultiSheet(file: File, options?: ParseOptions): Promise<Record<string, DataFrame>>;
     private _splitLines;

package/lib/storage/TabularDriver.d.ts.map

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