juxscript 1.1.205 → 1.1.206

package/lib/components/dataframe.d.ts

@@ -87,11 +87,16 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _updateStatus;
     private _setDataFrame;
     private _detectMalformedData;
-    private _detectLikelyHeaderRow;
     private _showReshapeModal;
     private _cleanupReshapeModal;
-    private _showExcelReshapeModal;
     private _escapeHtml;
+    /**
+     * 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;
+    private _showExcelReshapeModal;
     private _showCSVReshapeModal;
     update(_prop: string, _value: any): void;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;

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

@@ -1 +1 @@
-{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,cAAc,GAAG,SAAS,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,qBAAa,kBAAmB,SAAQ,aAAa,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,GAAG,CAA0B;IACrC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,aAAa,CAOnB;IACF,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,cAAc,CAAsC;IAC5D,OAAO,CAAC,aAAa,CAAgE;IACrF,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,eAAe,CAAiB;IACxC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,mBAAmB,CAAiB;IAC5C,OAAO,CAAC,YAAY,CAAiE;IACrF,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,qBAAqB,CAAkB;gBAEnC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAmCtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAC/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAMhD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAwB9B,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAWpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI;IAiBnE,UAAU,CAAC,KAAK,GAAE,MAAsB,EAAE,MAAM,GAAE,MAAoC,EAAE,IAAI,GAAE,MAAiB,GAAG,IAAI;IAStH,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC5B,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAM3B,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI;IAQ7C,MAAM,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI;IAI7E,MAAM,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAI/B,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI;IAI7C,IAAI,CAAC,CAAC,GAAE,MAAU,GAAG,IAAI;IAIzB,IAAI,CAAC,CAAC,GAAE,MAAU,GAAG,IAAI;IAIzB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,GAAG,IAAI;IAIpF,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQxH,IAAI,EAAE,IAAI,SAAS,GAAG,IAAI,CAAqB;IAC/C,IAAI,MAAM,IAAI,aAAa,CAAyB;IACpD,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,CAAwB;IACjD,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IACtC,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM;IACjC,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;IAC/B,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAsC;IACnE,IAAI,OAAO,IAAI,MAAM,EAAE,CAAoC;IAErD,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAUhD,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IACzB,SAAS,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC3B,QAAQ,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC1B,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC5B,SAAS,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC3B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAC5B,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAC7B,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAC/B,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;YAMf,WAAW;IAgEzB,OAAO,CAAC,iBAAiB;IA+EzB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,aAAa;IA4ErB,OAAO,CAAC,oBAAoB;IA6B5B,OAAO,CAAC,sBAAsB;IAmC9B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,oBAAoB;YASd,sBAAsB;IAoNpC,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IA0L5B,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,IAAI;IAExC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAoErE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,kBAAkB,CAExF"}
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}

package/lib/components/dataframe.js

@@ -416,29 +416,6 @@ export class DataFrameComponent extends BaseComponent {
         }
         return false;
     }
-    _detectLikelyHeaderRow(df) {
-        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
      * ═══════════════════════════════════════════════════ */
@@ -461,23 +438,121 @@ export class DataFrameComponent extends BaseComponent {
             this._reshapeModalRendered = false;
         }
     }
+    _escapeHtml(text) {
+        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.
+     */
+    _buildClickablePreviewHTML(rawRows, selectedSheetRow) {
+        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;
+    }
     async _showExcelReshapeModal() {
         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);
+        // Read raw cells from the file
+        const XLSX = await import('xlsx');
+        const buffer = await this._rawFileData.file.arrayBuffer();
+        const workbook = XLSX.read(buffer, {
+            type: 'array',
+            sheetRows: 20,
+            dense: false
+        });
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        const ref = worksheet['!ref'];
+        if (!ref)
+            return;
+        const range = XLSX.utils.decode_range(ref);
+        const endRow = Math.min(range.e.r, 14); // Show up to 15 rows
+        const startCol = range.s.c;
+        const endCol = range.e.c;
+        const readCellValue = (r, c) => {
+            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;
+        };
+        // Build raw row data with actual sheet row indices
+        const rawRows = [];
+        for (let r = 0; r <= endRow; r++) {
+            const values = [];
+            for (let c = startCol; c <= endCol; c++) {
+                values.push(readCellValue(r, c));
             }
+            rawRows.push({ sheetRow: r, values });
         }
-        catch {
-            suggestedRow = 0;
+        // Auto-detect best header row
+        let selectedSheetRow = 0;
+        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;
+            }
         }
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'Excel Import Settings',
@@ -487,14 +562,11 @@ export class DataFrameComponent extends BaseComponent {
         });
         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>
         `;
@@ -545,129 +617,73 @@ export class DataFrameComponent extends BaseComponent {
         this._reshapeModal.render(document.body);
         this._reshapeModalRendered = true;
         await new Promise(resolve => requestAnimationFrame(resolve));
-        const headerRowInput = document.getElementById(`${this._id}-header-row`);
         const previewDiv = document.getElementById(`${this._id}-preview`);
         const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-        const updateHint = (headerRow) => {
+        const hiddenInput = document.getElementById(`${this._id}-header-row`);
+        const updateHint = (row) => {
             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) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
+            const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
+            if (row > 0) {
+                hintDiv.innerHTML = `Row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows 0–${row - 1} will be skipped.`;
             }
             else {
-                hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                hintDiv.innerHTML = `Row <strong>0</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) => {
+            if (!previewDiv)
+                return;
+            previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
+            // Wire click handlers on each row
+            previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                tr.addEventListener('click', () => {
+                    const rowIdx = parseInt(tr.dataset.sheetRow);
+                    hiddenInput.value = String(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, c) => {
-                    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) => {
-                    const vals = [];
-                    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) {
-                if (previewDiv)
-                    previewDiv.textContent = `Error: ${err.message}`;
-            }
+            });
         };
-        if (headerRowInput)
-            headerRowInput.addEventListener('input', updatePreview);
-        updatePreview();
+        updateHint(selectedSheetRow);
+        renderPreview(selectedSheetRow);
         this._reshapeModal.open();
     }
-    _escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
     _showCSVReshapeModal() {
-        if (!this._rawFileData)
+        if (!this._rawFileData?.text)
             return;
         this._cleanupReshapeModal();
+        const text = this._rawFileData.text;
+        const detected = this._driver._detectDelimiter(text);
+        // Parse raw lines
+        const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
+        const rawRows = [];
+        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._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) => v.trim() !== '');
+            if (nonEmpty.length < values.length * 0.5)
+                continue;
+            const nonNumeric = nonEmpty.filter((v) => {
+                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',
@@ -685,12 +701,11 @@ export class DataFrameComponent extends BaseComponent {
                 </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>
         `;
@@ -706,12 +721,10 @@ export class DataFrameComponent extends BaseComponent {
                 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 hiddenInput = document.getElementById(`${this._id}-header-row`);
                     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 {
@@ -735,102 +748,59 @@ export class DataFrameComponent extends BaseComponent {
         this._reshapeModalRendered = true;
         requestAnimationFrame(() => {
             const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-            const headerRowInput = document.getElementById(`${this._id}-header-row`);
             const previewDiv = document.getElementById(`${this._id}-preview`);
             const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-            if (this._rawFileData?.text) {
-                const detected = this._driver._detectDelimiter(this._rawFileData.text);
-                if (delimiterSelect)
-                    delimiterSelect.value = detected;
-                const detectedHeaderRow = this._driver._detectHeaderRow(this._rawFileData.text, detected);
-                if (headerRowInput)
-                    headerRowInput.value = String(detectedHeaderRow);
-            }
-            const updateHint = () => {
+            const hiddenInput = document.getElementById(`${this._id}-header-row`);
+            if (delimiterSelect)
+                delimiterSelect.value = detected;
+            const updateHint = (row) => {
                 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) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
+                const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
+                if (row > 0) {
+                    hintDiv.innerHTML = `Row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows 0–${row - 1} will be skipped.`;
                 }
                 else {
-                    hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                    hintDiv.innerHTML = `Row <strong>0</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;
-                        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) {
-                    if (previewDiv)
-                        previewDiv.textContent = `Error: ${err.message}`;
+                    const values = this._driver._parseLine(lines[i], delim);
+                    rawRows.push({ sheetRow: i, values });
                 }
             };
-            if (delimiterSelect)
-                delimiterSelect.addEventListener('change', updatePreview);
-            if (headerRowInput)
-                headerRowInput.addEventListener('input', updatePreview);
-            updatePreview();
+            const renderPreview = (selected) => {
+                if (!previewDiv)
+                    return;
+                previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
+                previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                    tr.addEventListener('click', () => {
+                        const rowIdx = parseInt(tr.dataset.sheetRow);
+                        hiddenInput.value = String(rowIdx);
+                        updateHint(rowIdx);
+                        renderPreview(rowIdx);
+                    });
+                });
+            };
+            if (delimiterSelect) {
+                delimiterSelect.addEventListener('change', () => {
+                    reparse();
+                    const current = parseInt(hiddenInput.value) || 0;
+                    updateHint(current);
+                    renderPreview(current);
+                });
+            }
+            updateHint(selectedRow);
+            renderPreview(selectedRow);
             this._reshapeModal.open();
         });
     }

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,132 @@ 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);
+        // Read raw cells from the file
+        const XLSX = await import('xlsx');
+        const buffer = await this._rawFileData.file.arrayBuffer();
+        const workbook = XLSX.read(buffer, {
+            type: 'array',
+            sheetRows: 20,
+            dense: false
+        });
+
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        const ref = worksheet['!ref'];
+        if (!ref) return;
+
+        const range = XLSX.utils.decode_range(ref);
+        const endRow = Math.min(range.e.r, 14); // Show up to 15 rows
+        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;
+        };
+
+        // Build raw row data with actual sheet row indices
+        const rawRows: { sheetRow: number; values: any[] }[] = [];
+        for (let r = 0; r <= endRow; r++) {
+            const values: any[] = [];
+            for (let c = startCol; c <= endCol; c++) {
+                values.push(readCellValue(r, c));
+            }
+            rawRows.push({ sheetRow: r, values });
+        }
+
+        // Auto-detect best header row
+        let selectedSheetRow = 0;
+        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 +679,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>
         `;
@@ -668,134 +743,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 > 0) {
+                hintDiv.innerHTML = `Row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows 0–${row - 1} will be skipped.`;
             } else {
-                hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                hintDiv.innerHTML = `Row <strong>0</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);
+
+            // Wire click handlers on each row
+            previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                tr.addEventListener('click', () => {
+                    const rowIdx = parseInt((tr as HTMLElement).dataset.sheetRow!);
+                    hiddenInput.value = String(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 +834,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 +855,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 +887,62 @@ 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 > 0) {
+                    hintDiv.innerHTML = `Row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows 0–${row - 1} will be skipped.`;
                 } else {
-                    hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                    hintDiv.innerHTML = `Row <strong>0</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);
+                        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.205",
+  "version": "1.1.206",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",