juxscript 1.1.203 → 1.1.205

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

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

package/lib/components/dataframe.js

@@ -217,6 +217,11 @@ export class DataFrameComponent extends BaseComponent {
                     }
                 });
                 const sheetNames = Object.keys(sheets);
+                if (sheetNames.length === 0) {
+                    this._updateStatus('No data found in file', 'error');
+                    this.state.loading = false;
+                    return;
+                }
                 await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
                 if (sheetNames.length > 1) {
                     this._renderMultiSheet(sheets, file.name);
@@ -251,7 +256,6 @@ export class DataFrameComponent extends BaseComponent {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Clean up existing content
         const existingTable = wrapper.querySelector('.jux-table-wrapper');
         if (existingTable)
             existingTable.remove();
@@ -262,11 +266,10 @@ export class DataFrameComponent extends BaseComponent {
             this._sheets.set(name, df);
         });
         const sheetNames = Object.keys(sheets);
-        // Build tabs using the Tabs component
         const tabDefs = sheetNames.map(name => ({
             id: name,
             label: name,
-            content: '' // Content will be added after render
+            content: ''
         }));
         this._tabs = new Tabs(`${this._id}-tabs`, {
             tabs: tabDefs,
@@ -275,15 +278,12 @@ export class DataFrameComponent extends BaseComponent {
         this._tabs.bind('tabChange', (tabId) => {
             this._df = this._sheets.get(tabId) || null;
         });
-        // Create container for tabs
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
         wrapper.appendChild(tabsContainer);
         this._tabs.render(tabsContainer);
-        // Now render tables into each tab panel
-        sheetNames.forEach((sheetName, idx) => {
+        sheetNames.forEach((sheetName) => {
             const df = sheets[sheetName];
-            const panelId = `${this._id}-tabs-${sheetName}-panel`;
             const table = new Table(`${this._id}-table-${sheetName}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -294,48 +294,13 @@ export class DataFrameComponent extends BaseComponent {
             });
             const columnDefs = df.columns.map(col => ({ key: col, label: col }));
             table.columns(columnDefs).rows(df.toRows());
-            // Add settings button to tab panel
             const settingsBtn = new Button(`${this._id}-settings-${sheetName}`, {
                 label: '⚙️ Import Settings',
                 variant: 'ghost',
                 size: 'small'
             });
             settingsBtn.bind('click', () => this._showReshapeModal());
-            // Use addTabContent to add components
             this._tabs.addTabContent(sheetName, [settingsBtn, table]);
-            if (this._tableOptions.filterable) {
-                // Add filter input above table
-                const panel = document.getElementById(panelId);
-                if (panel) {
-                    const filterContainer = document.createElement('div');
-                    filterContainer.className = 'jux-dataframe-filter';
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.placeholder = `Filter ${sheetName}...`;
-                    input.className = 'jux-input-element jux-dataframe-filter-input';
-                    const iconEl = renderIcon('search');
-                    iconEl.style.width = '16px';
-                    iconEl.style.height = '16px';
-                    const iconWrap = document.createElement('span');
-                    iconWrap.className = 'jux-dataframe-filter-icon';
-                    iconWrap.appendChild(iconEl);
-                    filterContainer.appendChild(iconWrap);
-                    filterContainer.appendChild(input);
-                    input.addEventListener('input', () => {
-                        const text = input.value.toLowerCase();
-                        if (!text) {
-                            table.rows(df.toRows());
-                            return;
-                        }
-                        const filtered = df.filter((row) => Object.values(row).some(v => v !== null && v !== undefined && String(v).toLowerCase().includes(text)));
-                        table.rows(filtered.toRows());
-                    });
-                    const tableWrapper = panel.querySelector('.jux-table-wrapper');
-                    if (tableWrapper) {
-                        panel.insertBefore(filterContainer, tableWrapper);
-                    }
-                }
-            }
         });
         const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
         this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
@@ -378,7 +343,6 @@ export class DataFrameComponent extends BaseComponent {
         const emptyColumns = cols.filter(c => {
             if (!c.startsWith('__EMPTY'))
                 return false;
-            // Check if ALL values in this column are null/empty
             return rows.every(row => {
                 const val = row[c];
                 return val === null || val === undefined || String(val).trim() === '';
@@ -411,7 +375,6 @@ export class DataFrameComponent extends BaseComponent {
         }
         else {
             this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-            // Always show settings button if we have raw file data
             if (this._rawFileData) {
                 requestAnimationFrame(() => {
                     const statusEl = document.getElementById(`${this._id}-status`);
@@ -455,6 +418,10 @@ export class DataFrameComponent extends BaseComponent {
     }
     _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);
@@ -465,10 +432,8 @@ export class DataFrameComponent extends BaseComponent {
                 const str = String(v).trim();
                 return isNaN(Number(str)) && str !== '';
             }).length;
-            if (nonNumericCount >= nonEmpty.length * 0.7 && i > 0) {
-                // i is the index in toRows(). Row 0 of the file was already consumed
-                // as the header during the initial parse, so the actual 0-based file
-                // row index is i + 1.
+            if (nonNumericCount >= nonEmpty.length * 0.7) {
+                // toRows index i = file row (i + 1) since row 0 was used as headers
                 return i + 1;
             }
         }
@@ -500,7 +465,6 @@ export class DataFrameComponent extends BaseComponent {
         if (!this._rawFileData?.file)
             return;
         this._cleanupReshapeModal();
-        // Always detect from a fresh raw parse, not from current _df
         let suggestedRow = 0;
         try {
             const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
@@ -526,22 +490,11 @@ export class DataFrameComponent extends BaseComponent {
                 <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>
+                <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>
             <div class="jux-reshape-preview-container">
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
-                    Preview
-                </div>
+                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</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>
         `;
@@ -568,6 +521,11 @@ export class DataFrameComponent extends BaseComponent {
                             sheetChunkSize: this._sheetChunkSize
                         });
                         const sheetNames = Object.keys(sheets);
+                        if (sheetNames.length === 0) {
+                            this._updateStatus(`No data found with header at row ${headerRow}. Try a different row.`, 'error');
+                            this.state.loading = false;
+                            return;
+                        }
                         await this._driver.store(this._rawFileData.file.name, sheets[sheetNames[0]], { source: this._rawFileData.file.name });
                         if (sheetNames.length > 1) {
                             this._renderMultiSheet(sheets, this._rawFileData.file.name);
@@ -579,6 +537,7 @@ export class DataFrameComponent extends BaseComponent {
                     }
                     catch (err) {
                         this._updateStatus(`Error: ${err.message}`, 'error');
+                        this.state.loading = false;
                     }
                 }
             }
@@ -593,8 +552,7 @@ export class DataFrameComponent extends BaseComponent {
             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.`;
+                hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
             }
             else {
                 hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
@@ -604,26 +562,46 @@ export class DataFrameComponent extends BaseComponent {
             const headerRow = parseInt(headerRowInput?.value) || 0;
             updateHint(headerRow);
             try {
-                // ALWAYS parse with headerRow=0 to get raw file structure
-                const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
-                    headerRow: 0,
-                    maxSheetSize: Math.max(headerRow + 12, 15)
+                // 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 rawSheet = Object.values(rawSheets)[0];
-                if (!rawSheet) {
+                const sheetName = workbook.SheetNames[0];
+                const worksheet = workbook.Sheets[sheetName];
+                const ref = worksheet['!ref'];
+                if (!ref) {
                     if (previewDiv)
                         previewDiv.textContent = 'No data found';
                     return;
                 }
-                // rawSheet.columns = row 0 values (when parsed with headerRow=0)
-                // rawSheet.toRows() = rows 1+ (data rows when parsed with headerRow=0)
-                const rawCols = rawSheet.columns;
-                const rawRows = rawSheet.toRows();
-                // Build HTML table showing raw file structure
+                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;">';
-                // We need to show rows 0 through headerRow+7 (or so)
-                // Row 0 = rawCols, Row 1+ = rawRows[i-1]
-                const totalRowsToShow = Math.min(headerRow + 8, rawRows.length + 1);
+                const totalRowsToShow = Math.min(headerRow + 8, endRow + 1);
                 for (let fileRow = 0; fileRow < totalRowsToShow; fileRow++) {
                     const isHeader = (fileRow === headerRow);
                     const isSkipped = (fileRow < headerRow);
@@ -635,7 +613,6 @@ export class DataFrameComponent extends BaseComponent {
                         rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
                     }
                     html += `<tr style="${rowStyle}">`;
-                    // 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;">`;
                     if (isHeader) {
                         html += `<span style="color: hsl(142 71% 45%);">▶ ${fileRow}</span>`;
@@ -644,15 +621,7 @@ export class DataFrameComponent extends BaseComponent {
                         html += `${fileRow}`;
                     }
                     html += '</td>';
-                    // Get values for this file row
-                    let values;
-                    if (fileRow === 0) {
-                        values = rawCols;
-                    }
-                    else {
-                        values = rawRows[fileRow - 1] ? Object.values(rawRows[fileRow - 1]) : [];
-                    }
-                    // Show first 6 columns
+                    const values = readRow(fileRow);
                     const displayCols = values.slice(0, 6);
                     displayCols.forEach(val => {
                         const displayVal = val != null ? String(val).substring(0, 20) : '';
@@ -662,26 +631,23 @@ export class DataFrameComponent extends BaseComponent {
                         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; color: hsl(var(--muted-foreground));">...</td>`;
                     }
-                    // Status badge cell
                     html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap;">`;
                     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>';
+                        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)); font-size: 10px;">skipped</span>';
+                        html += '<span style="color: hsl(var(--muted-foreground));">skipped</span>';
                     }
                     else {
-                        html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
+                        html += '<span style="color: hsl(var(--success));">data</span>';
                     }
-                    html += '</td>';
-                    html += '</tr>';
+                    html += '</td></tr>';
                 }
                 html += '</table>';
-                if (previewDiv) {
+                if (previewDiv)
                     previewDiv.innerHTML = html;
-                }
             }
             catch (err) {
                 if (previewDiv)
@@ -760,6 +726,7 @@ export class DataFrameComponent extends BaseComponent {
                     }
                     catch (err) {
                         this._updateStatus(`Error: ${err.message}`, 'error');
+                        this.state.loading = false;
                     }
                 }
             }
@@ -784,8 +751,7 @@ export class DataFrameComponent extends BaseComponent {
                     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.`;
+                    hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
                 }
                 else {
                     hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
@@ -798,7 +764,6 @@ export class DataFrameComponent extends BaseComponent {
                 const headerRow = parseInt(headerRowInput?.value) || 0;
                 updateHint();
                 try {
-                    // Parse raw to show all rows
                     const rawDf = this._driver.parseCSV(this._rawFileData.text, {
                         delimiter: delim,
                         headerRow: 0,
@@ -807,7 +772,6 @@ export class DataFrameComponent extends BaseComponent {
                     });
                     const rawCols = rawDf.columns;
                     const rawRows = rawDf.toRows();
-                    // Build HTML table
                     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++) {
@@ -821,11 +785,9 @@ export class DataFrameComponent extends BaseComponent {
                             rowStyle += 'background: hsl(var(--muted) / 0.3); color: hsl(var(--muted-foreground)); font-style: italic;';
                         }
                         html += `<tr style="${rowStyle}">`;
-                        // Row index
                         html += `<td style="padding: 6px 8px; width: 50px; color: hsl(var(--muted-foreground)); font-weight: 500;">`;
                         html += isHeader ? `<strong>→ ${i}</strong>` : `${i}`;
                         html += '</td>';
-                        // Data
                         let values;
                         if (i === 0) {
                             values = rawCols;
@@ -843,7 +805,6 @@ export class DataFrameComponent extends BaseComponent {
                         if (values.length > 6) {
                             html += `<td style="padding: 6px 8px; color: hsl(var(--muted-foreground));">...</td>`;
                         }
-                        // Status
                         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>';
@@ -854,8 +815,7 @@ export class DataFrameComponent extends BaseComponent {
                         else {
                             html += '<span style="color: hsl(var(--success));">data</span>';
                         }
-                        html += '</td>';
-                        html += '</tr>';
+                        html += '</td></tr>';
                     }
                     html += '</table>';
                     if (previewDiv)

package/lib/components/dataframe.ts

@@ -275,6 +275,13 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 });
 
                 const sheetNames = Object.keys(sheets);
+
+                if (sheetNames.length === 0) {
+                    this._updateStatus('No data found in file', 'error');
+                    this.state.loading = false;
+                    return;
+                }
+
                 await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
 
                 if (sheetNames.length > 1) {
@@ -312,7 +319,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const wrapper = document.getElementById(this._id);
         if (!wrapper) return;
 
-        // Clean up existing content
         const existingTable = wrapper.querySelector('.jux-table-wrapper');
         if (existingTable) existingTable.remove();
 
@@ -325,11 +331,10 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         const sheetNames = Object.keys(sheets);
 
-        // Build tabs using the Tabs component
         const tabDefs = sheetNames.map(name => ({
             id: name,
             label: name,
-            content: '' // Content will be added after render
+            content: ''
         }));
 
         this._tabs = new Tabs(`${this._id}-tabs`, {
@@ -341,17 +346,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             this._df = this._sheets.get(tabId) || null;
         });
 
-        // Create container for tabs
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
         wrapper.appendChild(tabsContainer);
 
         this._tabs.render(tabsContainer);
 
-        // Now render tables into each tab panel
-        sheetNames.forEach((sheetName, idx) => {
+        sheetNames.forEach((sheetName) => {
             const df = sheets[sheetName];
-            const panelId = `${this._id}-tabs-${sheetName}-panel`;
 
             const table = new Table(`${this._id}-table-${sheetName}`, {
                 striped: this._tableOptions.striped,
@@ -365,7 +367,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             const columnDefs = df.columns.map(col => ({ key: col, label: col }));
             table.columns(columnDefs).rows(df.toRows());
 
-            // Add settings button to tab panel
             const settingsBtn = new Button(`${this._id}-settings-${sheetName}`, {
                 label: '⚙️ Import Settings',
                 variant: 'ghost',
@@ -373,49 +374,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             });
             settingsBtn.bind('click', () => this._showReshapeModal());
 
-            // Use addTabContent to add components
             this._tabs!.addTabContent(sheetName, [settingsBtn, table]);
-
-            if (this._tableOptions.filterable) {
-                // Add filter input above table
-                const panel = document.getElementById(panelId);
-                if (panel) {
-                    const filterContainer = document.createElement('div');
-                    filterContainer.className = 'jux-dataframe-filter';
-
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.placeholder = `Filter ${sheetName}...`;
-                    input.className = 'jux-input-element jux-dataframe-filter-input';
-
-                    const iconEl = renderIcon('search');
-                    iconEl.style.width = '16px';
-                    iconEl.style.height = '16px';
-
-                    const iconWrap = document.createElement('span');
-                    iconWrap.className = 'jux-dataframe-filter-icon';
-                    iconWrap.appendChild(iconEl);
-
-                    filterContainer.appendChild(iconWrap);
-                    filterContainer.appendChild(input);
-
-                    input.addEventListener('input', () => {
-                        const text = input.value.toLowerCase();
-                        if (!text) { table.rows(df.toRows()); return; }
-                        const filtered = df.filter((row) =>
-                            Object.values(row).some(v =>
-                                v !== null && v !== undefined && String(v).toLowerCase().includes(text)
-                            )
-                        );
-                        table.rows(filtered.toRows());
-                    });
-
-                    const tableWrapper = panel.querySelector('.jux-table-wrapper');
-                    if (tableWrapper) {
-                        panel.insertBefore(filterContainer, tableWrapper);
-                    }
-                }
-            }
         });
 
         const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
@@ -468,7 +427,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const rows = df.toRows();
         const emptyColumns = cols.filter(c => {
             if (!c.startsWith('__EMPTY')) return false;
-            // Check if ALL values in this column are null/empty
             return rows.every(row => {
                 const val = row[c];
                 return val === null || val === undefined || String(val).trim() === '';
@@ -494,7 +452,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols (Data may need reformatting)`,
                 'warning'
             );
-
             requestAnimationFrame(() => {
                 const statusEl = document.getElementById(`${this._id}-status`);
                 if (statusEl) {
@@ -511,8 +468,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols`,
                 'success'
             );
-
-            // Always show settings button if we have raw file data
             if (this._rawFileData) {
                 requestAnimationFrame(() => {
                     const statusEl = document.getElementById(`${this._id}-status`);
@@ -566,6 +521,13 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
     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];
@@ -579,10 +541,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 return isNaN(Number(str)) && str !== '';
             }).length;
 
-            if (nonNumericCount >= nonEmpty.length * 0.7 && i > 0) {
-                // i is the index in toRows(). Row 0 of the file was already consumed
-                // as the header during the initial parse, so the actual 0-based file
-                // row index is i + 1.
+            if (nonNumericCount >= nonEmpty.length * 0.7) {
+                // toRows index i = file row (i + 1) since row 0 was used as headers
                 return i + 1;
             }
         }
@@ -618,7 +578,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         this._cleanupReshapeModal();
 
-        // Always detect from a fresh raw parse, not from current _df
         let suggestedRow = 0;
         try {
             const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
@@ -645,22 +604,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 <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>
+                <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>
             <div class="jux-reshape-preview-container">
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
-                    Preview
-                </div>
+                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</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>
         `;
@@ -691,6 +639,13 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             });
 
                             const sheetNames = Object.keys(sheets);
+
+                            if (sheetNames.length === 0) {
+                                this._updateStatus(`No data found with header at row ${headerRow}. Try a different row.`, 'error');
+                                this.state.loading = false;
+                                return;
+                            }
+
                             await this._driver.store(this._rawFileData!.file.name, sheets[sheetNames[0]], { source: this._rawFileData!.file.name });
 
                             if (sheetNames.length > 1) {
@@ -702,6 +657,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             this._reshapeModal!.closeModal();
                         } catch (err: any) {
                             this._updateStatus(`Error: ${err.message}`, 'error');
+                            this.state.loading = false;
                         }
                     }
                 }
@@ -719,8 +675,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const updateHint = (headerRow: 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.`;
+                hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
             } else {
                 hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
             }
@@ -731,36 +686,53 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             updateHint(headerRow);
 
             try {
-                // ALWAYS parse with headerRow=0 to get raw file structure
-                const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
-                    headerRow: 0,
-                    maxSheetSize: Math.max(headerRow + 12, 15)
+                // 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 rawSheet = Object.values(rawSheets)[0];
 
-                if (!rawSheet) {
+                const sheetName = workbook.SheetNames[0];
+                const worksheet = workbook.Sheets[sheetName];
+                const ref = worksheet['!ref'];
+                if (!ref) {
                     if (previewDiv) previewDiv.textContent = 'No data found';
                     return;
                 }
 
-                // rawSheet.columns = row 0 values (when parsed with headerRow=0)
-                // rawSheet.toRows() = rows 1+ (data rows when parsed with headerRow=0)
-                const rawCols = rawSheet.columns;
-                const rawRows = rawSheet.toRows();
+                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;
+                };
 
-                // Build HTML table showing raw file structure
                 let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
-
-                // We need to show rows 0 through headerRow+7 (or so)
-                // Row 0 = rawCols, Row 1+ = rawRows[i-1]
-                const totalRowsToShow = Math.min(headerRow + 8, rawRows.length + 1);
+                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) {
@@ -768,8 +740,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     }
 
                     html += `<tr style="${rowStyle}">`;
-
-                    // 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;">`;
                     if (isHeader) {
                         html += `<span style="color: hsl(142 71% 45%);">▶ ${fileRow}</span>`;
@@ -778,15 +748,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     }
                     html += '</td>';
 
-                    // Get values for this file row
-                    let values: any[];
-                    if (fileRow === 0) {
-                        values = rawCols;
-                    } else {
-                        values = rawRows[fileRow - 1] ? Object.values(rawRows[fileRow - 1]) : [];
-                    }
-
-                    // Show first 6 columns
+                    const values = readRow(fileRow);
                     const displayCols = values.slice(0, 6);
                     displayCols.forEach(val => {
                         const displayVal = val != null ? String(val).substring(0, 20) : '';
@@ -797,28 +759,22 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     });
 
                     if (values.length > 6) {
-                        html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
+                        html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">...</td>`;
                     }
 
-                    // Status badge cell
                     html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap;">`;
                     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>';
+                        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)); font-size: 10px;">skipped</span>';
+                        html += '<span style="color: hsl(var(--muted-foreground));">skipped</span>';
                     } else {
-                        html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
+                        html += '<span style="color: hsl(var(--success));">data</span>';
                     }
-                    html += '</td>';
-
-                    html += '</tr>';
+                    html += '</td></tr>';
                 }
 
                 html += '</table>';
-
-                if (previewDiv) {
-                    previewDiv.innerHTML = html;
-                }
+                if (previewDiv) previewDiv.innerHTML = html;
             } catch (err: any) {
                 if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;
             }
@@ -826,7 +782,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         if (headerRowInput) headerRowInput.addEventListener('input', updatePreview);
         updatePreview();
-
         this._reshapeModal.open();
     }
 
@@ -901,10 +856,10 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
                             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');
+                            this.state.loading = false;
                         }
                     }
                 }
@@ -931,8 +886,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 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.`;
+                    hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
                 } else {
                     hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
                 }
@@ -943,11 +897,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
                 const delim = delimiterSelect?.value || ',';
                 const headerRow = parseInt(headerRowInput?.value) || 0;
-
                 updateHint();
 
                 try {
-                    // Parse raw to show all rows
                     const rawDf = this._driver.parseCSV(this._rawFileData.text, {
                         delimiter: delim,
                         headerRow: 0,
@@ -958,9 +910,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     const rawCols = rawDf.columns;
                     const rawRows = rawDf.toRows();
 
-                    // Build HTML table
                     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++) {
@@ -968,7 +918,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         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) {
@@ -976,13 +925,10 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         }
 
                         html += `<tr style="${rowStyle}">`;
-
-                        // Row index
                         html += `<td style="padding: 6px 8px; width: 50px; color: hsl(var(--muted-foreground)); font-weight: 500;">`;
                         html += isHeader ? `<strong>→ ${i}</strong>` : `${i}`;
                         html += '</td>';
 
-                        // Data
                         let values: any[];
                         if (i === 0) {
                             values = rawCols;
@@ -1001,7 +947,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             html += `<td style="padding: 6px 8px; color: hsl(var(--muted-foreground));">...</td>`;
                         }
 
-                        // Status
                         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>';
@@ -1010,13 +955,10 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         } else {
                             html += '<span style="color: hsl(var(--success));">data</span>';
                         }
-                        html += '</td>';
-
-                        html += '</tr>';
+                        html += '</td></tr>';
                     }
 
                     html += '</table>';
-
                     if (previewDiv) previewDiv.innerHTML = html;
                 } catch (err: any) {
                     if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;

package/lib/storage/TabularDriver.d.ts

@@ -90,6 +90,9 @@ export declare class TabularDriver {
     /**
      * ✅ 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.
      */
     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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,qBAAa,aAAa;IACtB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,GAAG,CAA4B;gBAE3B,MAAM,GAAE,MAAsB,EAAE,SAAS,GAAE,MAAiB;IAKlE,IAAI,IAAI,OAAO,CAAC,WAAW,CAAC;IA4BlC;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAgCxB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAwBxB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,SAAS;IA6D7D;;;OAGG;IACG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,SAAS,CAAC;IAoG5E;;OAEG;YACW,UAAU;IAuExB;;OAEG;IACG,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAiBlD;;OAEG;IACG,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAuBzF;;OAEG;IACG,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IAwBjD;;OAEG;IACG,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IA4BzD;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAqBlH;;OAEG;IACG,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAYjC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAgB5B;;OAEG;IACG,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,SAAS,CAAC;IA0ExE;;;OAGG;IACG,oBAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IA0JtG,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAmClB,OAAO,CAAC,SAAS;IAYjB,KAAK,IAAI,IAAI;CAMhB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAEhF"}
+{"version":3,"file":"TabularDriver.d.ts","sourceRoot":"","sources":["TabularDriver.ts"],"names":[],"mappings":"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"}

package/lib/storage/TabularDriver.js

@@ -489,6 +489,9 @@ export class TabularDriver {
     /**
      * ✅ 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.
      */
     async streamFileMultiSheet(file, options = {}) {
         const { maxSheetSize = 100000, sheetChunkSize = 10000, onProgress, headerRow = 0 } = options;
@@ -528,80 +531,76 @@ export class TabularDriver {
                 processedSheets++;
                 continue;
             }
-            // Use sheet_to_json with header:1 to get array-of-arrays
-            // This is the most reliable way to read all data
-            const rawData = XLSX.utils.sheet_to_json(worksheet, {
-                header: 1,
-                defval: null,
-                blankrows: true,
-                raw: true
-            });
-            if (rawData.length === 0) {
-                processedSheets++;
-                continue;
-            }
-            // Ensure all rows have the same number of columns
-            const maxCols = Math.max(endCol - startCol + 1, ...rawData.map(r => (r ? r.length : 0)));
-            // Pad short rows with nulls
-            for (let i = 0; i < rawData.length; i++) {
-                if (!rawData[i]) {
-                    rawData[i] = new Array(maxCols).fill(null);
-                }
-                else {
-                    while (rawData[i].length < maxCols) {
-                        rawData[i].push(null);
-                    }
+            // Direct cell reader - bypasses sheet_to_json completely
+            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));
                 }
-            }
-            // Validate headerRow is within bounds
-            if (headerRow >= rawData.length) {
-                console.warn(`[TabularDriver] headerRow ${headerRow} exceeds data length ${rawData.length}`);
+                return vals;
+            };
+            // ✅ FIX: headerRow is the user's 0-based index counting from
+            // the first row of the file. Do NOT add startRow — the user
+            // sees row 0 as the first row regardless of where the sheet
+            // range begins. We simply use headerRow as the absolute sheet
+            // row index.
+            const headerSheetRow = headerRow;
+            console.log(`[TabularDriver] Sheet "${sheetName}": range=${ref}, startRow=${startRow}, endRow=${endRow}, startCol=${startCol}, endCol=${endCol}`);
+            console.log(`[TabularDriver] headerRow=${headerRow}, headerSheetRow=${headerSheetRow} (absolute, no startRow offset)`);
+            if (headerSheetRow > endRow) {
+                console.warn(`[TabularDriver] headerRow ${headerRow} (sheet row ${headerSheetRow}) exceeds endRow ${endRow}`);
                 processedSheets++;
                 continue;
             }
-            // Debug: log what we see at the header row
-            console.log(`[TabularDriver] Sheet "${sheetName}" headerRow=${headerRow}, rawData.length=${rawData.length}, maxCols=${maxCols}`);
-            console.log(`[TabularDriver] Header row data:`, rawData[headerRow]);
-            // Extract headers from the specified row
-            const headerRowData = rawData[headerRow];
-            const headers = [];
-            for (let j = 0; j < maxCols; j++) {
-                const h = headerRowData[j];
+            // Read header values directly from cells
+            const headerValues = readRow(headerSheetRow);
+            console.log(`[TabularDriver] Raw header values at sheet row ${headerSheetRow}:`, headerValues);
+            // Build headers array
+            const headers = headerValues.map((h, i) => {
                 if (h === null || h === undefined || String(h).trim() === '') {
-                    headers.push(`__EMPTY${j > 0 ? '_' + j : ''}`);
-                }
-                else {
-                    headers.push(String(h).trim());
+                    return `__EMPTY${i > 0 ? '_' + i : ''}`;
                 }
-            }
-            // Count valid (non-empty) headers
+                return String(h).trim();
+            });
+            // Count valid headers
             const validHeaders = headers.filter(h => !h.startsWith('__EMPTY'));
-            console.log(`[TabularDriver] Headers:`, headers);
-            console.log(`[TabularDriver] Valid headers: ${validHeaders.length}/${headers.length}`);
+            console.log(`[TabularDriver] Headers (${validHeaders.length} valid / ${headers.length} total):`, headers);
             if (validHeaders.length === 0) {
-                console.warn(`[TabularDriver] No valid headers found at row ${headerRow} in sheet "${sheetName}"`);
+                console.warn(`[TabularDriver] No valid headers found at row ${headerRow} (sheet row ${headerSheetRow}) in sheet "${sheetName}"`);
+                // Log surrounding rows for debugging
+                for (let debugR = Math.max(startRow, headerSheetRow - 2); debugR <= Math.min(endRow, headerSheetRow + 2); debugR++) {
+                    console.log(`[TabularDriver]   row ${debugR}:`, readRow(debugR));
+                }
                 processedSheets++;
                 continue;
             }
-            // Build rows from data AFTER the header row
+            // Build data rows: everything after the header row
             const rows = [];
-            for (let i = headerRow + 1; i < rawData.length; i++) {
-                const rowData = rawData[i];
+            for (let r = headerSheetRow + 1; r <= endRow; r++) {
+                const rowData = readRow(r);
                 // Skip completely empty rows
-                if (!rowData)
-                    continue;
-                const hasContent = rowData.some((cell) => cell !== null && cell !== undefined && String(cell).trim() !== '');
+                const hasContent = rowData.some(cell => cell !== null && cell !== undefined && String(cell).trim() !== '');
                 if (!hasContent)
                     continue;
                 const row = {};
                 for (let j = 0; j < headers.length; j++) {
-                    row[headers[j]] = j < rowData.length ? rowData[j] : null;
+                    row[headers[j]] = rowData[j];
                 }
                 rows.push(row);
             }
-            console.log(`[TabularDriver] Built ${rows.length} data rows`);
+            console.log(`[TabularDriver] Built ${rows.length} data rows for sheet "${sheetName}"`);
             if (rows.length > 0) {
-                console.log(`[TabularDriver] First row keys:`, Object.keys(rows[0]));
                 console.log(`[TabularDriver] First row:`, rows[0]);
             }
             if (rows.length > 0) {

package/lib/storage/TabularDriver.ts

@@ -609,6 +609,9 @@ export class TabularDriver {
     /**
      * ✅ 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.
      */
     async streamFileMultiSheet(file: File, options: ParseOptions = {}): Promise<Record<string, DataFrame>> {
         const { maxSheetSize = 100000, sheetChunkSize = 10000, onProgress, headerRow = 0 } = options;
@@ -656,91 +659,86 @@ export class TabularDriver {
                 continue;
             }
 
-            // Use sheet_to_json with header:1 to get array-of-arrays
-            // This is the most reliable way to read all data
-            const rawData: any[][] = XLSX.utils.sheet_to_json(worksheet, {
-                header: 1,
-                defval: null,
-                blankrows: true,
-                raw: true
-            });
+            // Direct cell reader - bypasses sheet_to_json completely
+            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;
+            };
 
-            if (rawData.length === 0) {
-                processedSheets++;
-                continue;
-            }
+            const readRow = (r: number): any[] => {
+                const vals: any[] = [];
+                for (let c = startCol; c <= endCol; c++) {
+                    vals.push(readCellValue(r, c));
+                }
+                return vals;
+            };
 
-            // Ensure all rows have the same number of columns
-            const maxCols = Math.max(endCol - startCol + 1, ...rawData.map(r => (r ? r.length : 0)));
+            // ✅ FIX: headerRow is the user's 0-based index counting from
+            // the first row of the file. Do NOT add startRow — the user
+            // sees row 0 as the first row regardless of where the sheet
+            // range begins. We simply use headerRow as the absolute sheet
+            // row index.
+            const headerSheetRow = headerRow;
 
-            // Pad short rows with nulls
-            for (let i = 0; i < rawData.length; i++) {
-                if (!rawData[i]) {
-                    rawData[i] = new Array(maxCols).fill(null);
-                } else {
-                    while (rawData[i].length < maxCols) {
-                        rawData[i].push(null);
-                    }
-                }
-            }
+            console.log(`[TabularDriver] Sheet "${sheetName}": range=${ref}, startRow=${startRow}, endRow=${endRow}, startCol=${startCol}, endCol=${endCol}`);
+            console.log(`[TabularDriver] headerRow=${headerRow}, headerSheetRow=${headerSheetRow} (absolute, no startRow offset)`);
 
-            // Validate headerRow is within bounds
-            if (headerRow >= rawData.length) {
-                console.warn(`[TabularDriver] headerRow ${headerRow} exceeds data length ${rawData.length}`);
+            if (headerSheetRow > endRow) {
+                console.warn(`[TabularDriver] headerRow ${headerRow} (sheet row ${headerSheetRow}) exceeds endRow ${endRow}`);
                 processedSheets++;
                 continue;
             }
 
-            // Debug: log what we see at the header row
-            console.log(`[TabularDriver] Sheet "${sheetName}" headerRow=${headerRow}, rawData.length=${rawData.length}, maxCols=${maxCols}`);
-            console.log(`[TabularDriver] Header row data:`, rawData[headerRow]);
+            // Read header values directly from cells
+            const headerValues = readRow(headerSheetRow);
+            console.log(`[TabularDriver] Raw header values at sheet row ${headerSheetRow}:`, headerValues);
 
-            // Extract headers from the specified row
-            const headerRowData = rawData[headerRow];
-            const headers: string[] = [];
-            for (let j = 0; j < maxCols; j++) {
-                const h = headerRowData[j];
+            // Build headers array
+            const headers: string[] = headerValues.map((h: any, i: number) => {
                 if (h === null || h === undefined || String(h).trim() === '') {
-                    headers.push(`__EMPTY${j > 0 ? '_' + j : ''}`);
-                } else {
-                    headers.push(String(h).trim());
+                    return `__EMPTY${i > 0 ? '_' + i : ''}`;
                 }
-            }
+                return String(h).trim();
+            });
 
-            // Count valid (non-empty) headers
+            // Count valid headers
             const validHeaders = headers.filter(h => !h.startsWith('__EMPTY'));
-            console.log(`[TabularDriver] Headers:`, headers);
-            console.log(`[TabularDriver] Valid headers: ${validHeaders.length}/${headers.length}`);
+            console.log(`[TabularDriver] Headers (${validHeaders.length} valid / ${headers.length} total):`, headers);
 
             if (validHeaders.length === 0) {
-                console.warn(`[TabularDriver] No valid headers found at row ${headerRow} in sheet "${sheetName}"`);
+                console.warn(`[TabularDriver] No valid headers found at row ${headerRow} (sheet row ${headerSheetRow}) in sheet "${sheetName}"`);
+                // Log surrounding rows for debugging
+                for (let debugR = Math.max(startRow, headerSheetRow - 2); debugR <= Math.min(endRow, headerSheetRow + 2); debugR++) {
+                    console.log(`[TabularDriver]   row ${debugR}:`, readRow(debugR));
+                }
                 processedSheets++;
                 continue;
             }
 
-            // Build rows from data AFTER the header row
+            // Build data rows: everything after the header row
             const rows: Record<string, any>[] = [];
-            for (let i = headerRow + 1; i < rawData.length; i++) {
-                const rowData = rawData[i];
+            for (let r = headerSheetRow + 1; r <= endRow; r++) {
+                const rowData = readRow(r);
 
                 // Skip completely empty rows
-                if (!rowData) continue;
-
-                const hasContent = rowData.some((cell: any) =>
+                const hasContent = rowData.some(cell =>
                     cell !== null && cell !== undefined && String(cell).trim() !== ''
                 );
                 if (!hasContent) continue;
 
                 const row: Record<string, any> = {};
                 for (let j = 0; j < headers.length; j++) {
-                    row[headers[j]] = j < rowData.length ? rowData[j] : null;
+                    row[headers[j]] = rowData[j];
                 }
                 rows.push(row);
             }
 
-            console.log(`[TabularDriver] Built ${rows.length} data rows`);
+            console.log(`[TabularDriver] Built ${rows.length} data rows for sheet "${sheetName}"`);
             if (rows.length > 0) {
-                console.log(`[TabularDriver] First row keys:`, Object.keys(rows[0]));
                 console.log(`[TabularDriver] First row:`, rows[0]);
             }
 

package/package.json

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