juxscript 1.1.192 → 1.1.194

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

@@ -360,8 +360,8 @@ export class DataFrameComponent extends BaseComponent {
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
         const isMalformed = this._detectMalformedData(this._df);
-        if (isMalformed && this._showReshapeWarning && this._rawFileData) {
-            this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols (Data may be malformed — headers may be on wrong row)`, 'warning');
+        if (isMalformed && this._rawFileData) {
+            this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols (Data may need reformatting)`, 'warning');
             requestAnimationFrame(() => {
                 const statusEl = document.getElementById(`${this._id}-status`);
                 if (statusEl) {
@@ -376,12 +376,13 @@ export class DataFrameComponent extends BaseComponent {
         }
         else {
             this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-            if (this._showReshapeWarning && this._rawFileData) {
+            // Always show settings button if we have raw file data
+            if (this._rawFileData) {
                 requestAnimationFrame(() => {
                     const statusEl = document.getElementById(`${this._id}-status`);
                     if (statusEl) {
                         const settingsBtn = document.createElement('button');
-                        settingsBtn.textContent = 'Settings';
+                        settingsBtn.textContent = 'Import Settings';
                         settingsBtn.className = 'jux-button jux-button-sm jux-button-ghost';
                         settingsBtn.style.marginLeft = '0.5rem';
                         settingsBtn.addEventListener('click', () => this._showReshapeModal());
@@ -485,15 +486,12 @@ export class DataFrameComponent extends BaseComponent {
                     max="50"
                     style="width: 100%;"
                 />
-                <div class="jux-reshape-hint">
-                    <strong>Detected issue:</strong> The current header row appears to contain metadata or empty values.
-                    Row ${suggestedRow} looks like it contains the actual column headers.
-                    Adjust the value above and check the preview below. The Row column shows the index for each row.
+                <div id="${this._id}-reshape-hint" class="jux-reshape-hint">
                 </div>
             </div>
             <div class="jux-reshape-preview-container">
                 <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
-                    Preview (first 10 rows)
+                    Preview
                 </div>
                 <div id="${this._id}-preview" class="jux-reshape-preview"></div>
             </div>
@@ -526,7 +524,6 @@ export class DataFrameComponent extends BaseComponent {
                             this._renderMultiSheet(sheets, this._rawFileData.file.name);
                         }
                         else {
-                            this._showReshapeWarning = false;
                             this._setDataFrame(sheets[sheetNames[0]], this._rawFileData.file.name);
                         }
                         this._reshapeModal.closeModal();
@@ -542,29 +539,70 @@ export class DataFrameComponent extends BaseComponent {
         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) => {
+            if (!hintDiv)
+                return;
+            hintDiv.innerHTML = headerRow > 0
+                ? `Row <strong>${headerRow}</strong> will be used as column headers. ` +
+                    `The <strong>${headerRow}</strong> row${headerRow > 1 ? 's' : ''} above will be skipped.`
+                : `Row <strong>0</strong> (first row) will be used as column headers.`;
+        };
         const updatePreview = async () => {
             const headerRow = parseInt(headerRowInput?.value) || 0;
+            updateHint(headerRow);
             try {
-                const sheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
+                // First, get raw data (headerRow=0) to show skipped rows
+                const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
+                    headerRow: 0,
+                    maxSheetSize: headerRow + 15
+                });
+                const rawSheet = Object.values(rawSheets)[0];
+                // Then, get parsed data with the chosen header row
+                const parsedSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
                     headerRow,
-                    maxSheetSize: headerRow + 20
+                    maxSheetSize: headerRow + 15
                 });
-                const firstSheet = Object.values(sheets)[0];
-                if (!firstSheet) {
+                const parsedSheet = Object.values(parsedSheets)[0];
+                if (!rawSheet && !parsedSheet) {
                     if (previewDiv)
                         previewDiv.textContent = 'No data found';
                     return;
                 }
-                const dataRows = firstSheet.toRows().slice(0, 10);
-                const colHeader = 'Row'.padEnd(6) + firstSheet.columns.map(c => String(c).padEnd(20)).join(' | ');
-                const separator = '─'.repeat(Math.min(colHeader.length, 120));
-                const preview = dataRows.map((row, i) => {
-                    const rowIdx = String(headerRow + 1 + i).padEnd(6);
-                    const cols = Object.values(row).map(v => String(v ?? '').padEnd(20)).join(' | ');
-                    return `${rowIdx}${cols}`;
-                }).join('\n');
+                const colWidth = 22;
+                const idxWidth = 6;
+                const lines = [];
+                // Show skipped rows (rows before the header)
+                if (rawSheet && headerRow > 0) {
+                    const rawRows = rawSheet.toRows();
+                    // Row 0 in raw parse is the raw header, rows after are data
+                    // Show raw header as row 0
+                    const rawCols = rawSheet.columns;
+                    lines.push(`${'Idx'.padEnd(idxWidth)}${rawCols.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`);
+                    const skippedCount = Math.min(headerRow - 1, rawRows.length);
+                    for (let i = 0; i < skippedCount; i++) {
+                        const row = rawRows[i];
+                        const rowIdx = String(i + 1).padEnd(idxWidth);
+                        const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                        lines.push(`${rowIdx}${cols}`);
+                    }
+                    // Separator: everything above is skipped
+                    lines.push(`${'─'.repeat(6)}${'── skipped '.padEnd(colWidth * Math.min(rawCols.length, 5), '─')}`);
+                }
+                // Show header row and data rows from parsed result
+                if (parsedSheet) {
+                    const headerLine = `${'▶'.padEnd(idxWidth)}${parsedSheet.columns.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`;
+                    lines.push(headerLine);
+                    lines.push('═'.repeat(Math.min(headerLine.length, 140)));
+                    const dataRows = parsedSheet.toRows().slice(0, 8);
+                    dataRows.forEach((row, i) => {
+                        const rowIdx = String(headerRow + 1 + i).padEnd(idxWidth);
+                        const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                        lines.push(`${rowIdx}${cols}`);
+                    });
+                }
                 if (previewDiv) {
-                    previewDiv.textContent = `${'Row'.padEnd(6)}Columns: ${firstSheet.columns.join(' | ')}\n${separator}\n${preview}`;
+                    previewDiv.textContent = lines.join('\n');
                 }
             }
             catch (err) {
@@ -605,7 +643,8 @@ export class DataFrameComponent extends BaseComponent {
                 <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Skip Rows Before Header</label>
                 <input type="number" id="${this._id}-skip-rows" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
             </div>
-            <div class="jux-reshape-preview-container">
+            <div id="${this._id}-reshape-hint" class="jux-reshape-hint"></div>
+            <div class="jux-reshape-preview-container" style="margin-top: 1rem;">
                 <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
                 <div id="${this._id}-preview" class="jux-reshape-preview"></div>
             </div>
@@ -640,7 +679,6 @@ export class DataFrameComponent extends BaseComponent {
                             hasHeader: true
                         });
                         await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                        this._showReshapeWarning = false;
                         this._setDataFrame(df, this._rawFileData.file.name);
                         this._reshapeModal.closeModal();
                     }
@@ -657,6 +695,7 @@ export class DataFrameComponent extends BaseComponent {
             const headerRowInput = document.getElementById(`${this._id}-header-row`);
             const skipRowsInput = document.getElementById(`${this._id}-skip-rows`);
             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)
@@ -665,30 +704,69 @@ export class DataFrameComponent extends BaseComponent {
                 if (headerRowInput)
                     headerRowInput.value = String(detectedHeaderRow);
             }
+            const updateHint = () => {
+                if (!hintDiv)
+                    return;
+                const headerRow = parseInt(headerRowInput?.value) || 0;
+                const skipRows = parseInt(skipRowsInput?.value) || 0;
+                const totalSkipped = headerRow + skipRows;
+                hintDiv.innerHTML = totalSkipped > 0
+                    ? `Row <strong>${headerRow + skipRows}</strong> will be used as column headers. ` +
+                        `<strong>${totalSkipped}</strong> row${totalSkipped > 1 ? 's' : ''} above will be skipped.`
+                    : `Row <strong>0</strong> (first row) will be used as column headers.`;
+            };
             const updatePreview = () => {
                 if (!this._rawFileData?.text)
                     return;
                 const delim = delimiterSelect?.value || ',';
                 const headerRow = parseInt(headerRowInput?.value) || 0;
                 const skipRows = parseInt(skipRowsInput?.value) || 0;
+                updateHint();
                 try {
+                    const colWidth = 22;
+                    const idxWidth = 6;
+                    const lines = [];
+                    const totalOffset = headerRow + skipRows;
+                    // Parse raw (no header offset) to show skipped rows
+                    if (totalOffset > 0) {
+                        const rawDf = this._driver.parseCSV(this._rawFileData.text, {
+                            delimiter: delim,
+                            headerRow: 0,
+                            skipRows: 0,
+                            hasHeader: true,
+                            maxRows: totalOffset + 1
+                        });
+                        const rawCols = rawDf.columns;
+                        lines.push(`${'Idx'.padEnd(idxWidth)}${rawCols.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`);
+                        const rawRows = rawDf.toRows();
+                        const skippedCount = Math.min(totalOffset - 1, rawRows.length);
+                        for (let i = 0; i < skippedCount; i++) {
+                            const row = rawRows[i];
+                            const rowIdx = String(i + 1).padEnd(idxWidth);
+                            const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                            lines.push(`${rowIdx}${cols}`);
+                        }
+                        lines.push(`${'─'.repeat(6)}${'── skipped '.padEnd(colWidth * Math.min(rawCols.length, 5), '─')}`);
+                    }
+                    // Parse with actual settings for header + data rows
                     const df = this._driver.parseCSV(this._rawFileData.text, {
                         delimiter: delim,
                         headerRow,
                         skipRows,
                         hasHeader: true,
-                        maxRows: 10
+                        maxRows: 8
                     });
+                    const headerLine = `${'▶'.padEnd(idxWidth)}${df.columns.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`;
+                    lines.push(headerLine);
+                    lines.push('═'.repeat(Math.min(headerLine.length, 140)));
                     const dataRows = df.toRows();
-                    const colHeader = 'Row'.padEnd(6) + df.columns.map(c => String(c).padEnd(20)).join(' | ');
-                    const separator = '─'.repeat(Math.min(colHeader.length, 120));
-                    const preview = dataRows.map((row, i) => {
-                        const rowIdx = String(headerRow + skipRows + 1 + i).padEnd(6);
-                        const cols = Object.values(row).map(v => String(v ?? '').padEnd(20)).join(' | ');
-                        return `${rowIdx}${cols}`;
-                    }).join('\n');
+                    dataRows.forEach((row, i) => {
+                        const rowIdx = String(totalOffset + 1 + i).padEnd(idxWidth);
+                        const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                        lines.push(`${rowIdx}${cols}`);
+                    });
                     if (previewDiv) {
-                        previewDiv.textContent = `${'Row'.padEnd(6)}Columns: ${df.columns.join(' | ')}\n${separator}\n${preview}`;
+                        previewDiv.textContent = lines.join('\n');
                     }
                 }
                 catch (err) {

package/lib/components/dataframe.ts

@@ -452,9 +452,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         const isMalformed = this._detectMalformedData(this._df!);
 
-        if (isMalformed && this._showReshapeWarning && this._rawFileData) {
+        if (isMalformed && this._rawFileData) {
             this._updateStatus(
-                `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols (Data may be malformed — headers may be on wrong row)`,
+                `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols (Data may need reformatting)`,
                 'warning'
             );
 
@@ -475,12 +475,13 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 'success'
             );
 
-            if (this._showReshapeWarning && this._rawFileData) {
+            // Always show settings button if we have raw file data
+            if (this._rawFileData) {
                 requestAnimationFrame(() => {
                     const statusEl = document.getElementById(`${this._id}-status`);
                     if (statusEl) {
                         const settingsBtn = document.createElement('button');
-                        settingsBtn.textContent = 'Settings';
+                        settingsBtn.textContent = 'Import Settings';
                         settingsBtn.className = 'jux-button jux-button-sm jux-button-ghost';
                         settingsBtn.style.marginLeft = '0.5rem';
                         settingsBtn.addEventListener('click', () => this._showReshapeModal());
@@ -603,15 +604,12 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     max="50"
                     style="width: 100%;"
                 />
-                <div class="jux-reshape-hint">
-                    <strong>Detected issue:</strong> The current header row appears to contain metadata or empty values.
-                    Row ${suggestedRow} looks like it contains the actual column headers.
-                    Adjust the value above and check the preview below. The Row column shows the index for each row.
+                <div id="${this._id}-reshape-hint" class="jux-reshape-hint">
                 </div>
             </div>
             <div class="jux-reshape-preview-container">
                 <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
-                    Preview (first 10 rows)
+                    Preview
                 </div>
                 <div id="${this._id}-preview" class="jux-reshape-preview"></div>
             </div>
@@ -648,7 +646,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             if (sheetNames.length > 1) {
                                 this._renderMultiSheet(sheets, this._rawFileData!.file.name);
                             } else {
-                                this._showReshapeWarning = false;
                                 this._setDataFrame(sheets[sheetNames[0]], this._rawFileData!.file.name);
                             }
 
@@ -667,32 +664,80 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         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 updateHint = (headerRow: number) => {
+            if (!hintDiv) return;
+            hintDiv.innerHTML = headerRow > 0
+                ? `Row <strong>${headerRow}</strong> will be used as column headers. ` +
+                `The <strong>${headerRow}</strong> row${headerRow > 1 ? 's' : ''} above will be skipped.`
+                : `Row <strong>0</strong> (first row) will be used as column headers.`;
+        };
 
         const updatePreview = async () => {
             const headerRow = parseInt(headerRowInput?.value) || 0;
+            updateHint(headerRow);
+
             try {
-                const sheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
+                // First, get raw data (headerRow=0) to show skipped rows
+                const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
+                    headerRow: 0,
+                    maxSheetSize: headerRow + 15
+                });
+                const rawSheet = Object.values(rawSheets)[0];
+
+                // Then, get parsed data with the chosen header row
+                const parsedSheets = await this._driver.streamFileMultiSheet(this._rawFileData!.file, {
                     headerRow,
-                    maxSheetSize: headerRow + 20
+                    maxSheetSize: headerRow + 15
                 });
+                const parsedSheet = Object.values(parsedSheets)[0];
 
-                const firstSheet = Object.values(sheets)[0];
-                if (!firstSheet) {
+                if (!rawSheet && !parsedSheet) {
                     if (previewDiv) previewDiv.textContent = 'No data found';
                     return;
                 }
 
-                const dataRows = firstSheet.toRows().slice(0, 10);
-                const colHeader = 'Row'.padEnd(6) + firstSheet.columns.map(c => String(c).padEnd(20)).join(' | ');
-                const separator = '─'.repeat(Math.min(colHeader.length, 120));
-                const preview = dataRows.map((row, i) => {
-                    const rowIdx = String(headerRow + 1 + i).padEnd(6);
-                    const cols = Object.values(row).map(v => String(v ?? '').padEnd(20)).join(' | ');
-                    return `${rowIdx}${cols}`;
-                }).join('\n');
+                const colWidth = 22;
+                const idxWidth = 6;
+                const lines: string[] = [];
+
+                // Show skipped rows (rows before the header)
+                if (rawSheet && headerRow > 0) {
+                    const rawRows = rawSheet.toRows();
+                    // Row 0 in raw parse is the raw header, rows after are data
+                    // Show raw header as row 0
+                    const rawCols = rawSheet.columns;
+                    lines.push(`${'Idx'.padEnd(idxWidth)}${rawCols.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`);
+
+                    const skippedCount = Math.min(headerRow - 1, rawRows.length);
+                    for (let i = 0; i < skippedCount; i++) {
+                        const row = rawRows[i];
+                        const rowIdx = String(i + 1).padEnd(idxWidth);
+                        const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                        lines.push(`${rowIdx}${cols}`);
+                    }
+
+                    // Separator: everything above is skipped
+                    lines.push(`${'─'.repeat(6)}${'── skipped '.padEnd(colWidth * Math.min(rawCols.length, 5), '─')}`);
+                }
+
+                // Show header row and data rows from parsed result
+                if (parsedSheet) {
+                    const headerLine = `${'▶'.padEnd(idxWidth)}${parsedSheet.columns.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`;
+                    lines.push(headerLine);
+                    lines.push('═'.repeat(Math.min(headerLine.length, 140)));
+
+                    const dataRows = parsedSheet.toRows().slice(0, 8);
+                    dataRows.forEach((row, i) => {
+                        const rowIdx = String(headerRow + 1 + i).padEnd(idxWidth);
+                        const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                        lines.push(`${rowIdx}${cols}`);
+                    });
+                }
 
                 if (previewDiv) {
-                    previewDiv.textContent = `${'Row'.padEnd(6)}Columns: ${firstSheet.columns.join(' | ')}\n${separator}\n${preview}`;
+                    previewDiv.textContent = lines.join('\n');
                 }
             } catch (err: any) {
                 if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;
@@ -735,7 +780,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Skip Rows Before Header</label>
                 <input type="number" id="${this._id}-skip-rows" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
             </div>
-            <div class="jux-reshape-preview-container">
+            <div id="${this._id}-reshape-hint" class="jux-reshape-hint"></div>
+            <div class="jux-reshape-preview-container" style="margin-top: 1rem;">
                 <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
                 <div id="${this._id}-preview" class="jux-reshape-preview"></div>
             </div>
@@ -775,7 +821,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             });
 
                             await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
-                            this._showReshapeWarning = false;
                             this._setDataFrame(df, this._rawFileData.file.name);
 
                             this._reshapeModal!.closeModal();
@@ -794,6 +839,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
             const skipRowsInput = document.getElementById(`${this._id}-skip-rows`) as HTMLInputElement;
             const previewDiv = document.getElementById(`${this._id}-preview`)!;
+            const hintDiv = document.getElementById(`${this._id}-reshape-hint`)!;
 
             if (this._rawFileData?.text) {
                 const detected = (this._driver as any)._detectDelimiter(this._rawFileData.text);
@@ -803,6 +849,17 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 if (headerRowInput) headerRowInput.value = String(detectedHeaderRow);
             }
 
+            const updateHint = () => {
+                if (!hintDiv) return;
+                const headerRow = parseInt(headerRowInput?.value) || 0;
+                const skipRows = parseInt(skipRowsInput?.value) || 0;
+                const totalSkipped = headerRow + skipRows;
+                hintDiv.innerHTML = totalSkipped > 0
+                    ? `Row <strong>${headerRow + skipRows}</strong> will be used as column headers. ` +
+                    `<strong>${totalSkipped}</strong> row${totalSkipped > 1 ? 's' : ''} above will be skipped.`
+                    : `Row <strong>0</strong> (first row) will be used as column headers.`;
+            };
+
             const updatePreview = () => {
                 if (!this._rawFileData?.text) return;
 
@@ -810,26 +867,61 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 const headerRow = parseInt(headerRowInput?.value) || 0;
                 const skipRows = parseInt(skipRowsInput?.value) || 0;
 
+                updateHint();
+
                 try {
+                    const colWidth = 22;
+                    const idxWidth = 6;
+                    const lines: string[] = [];
+                    const totalOffset = headerRow + skipRows;
+
+                    // Parse raw (no header offset) to show skipped rows
+                    if (totalOffset > 0) {
+                        const rawDf = this._driver.parseCSV(this._rawFileData.text, {
+                            delimiter: delim,
+                            headerRow: 0,
+                            skipRows: 0,
+                            hasHeader: true,
+                            maxRows: totalOffset + 1
+                        });
+
+                        const rawCols = rawDf.columns;
+                        lines.push(`${'Idx'.padEnd(idxWidth)}${rawCols.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`);
+
+                        const rawRows = rawDf.toRows();
+                        const skippedCount = Math.min(totalOffset - 1, rawRows.length);
+                        for (let i = 0; i < skippedCount; i++) {
+                            const row = rawRows[i];
+                            const rowIdx = String(i + 1).padEnd(idxWidth);
+                            const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                            lines.push(`${rowIdx}${cols}`);
+                        }
+
+                        lines.push(`${'─'.repeat(6)}${'── skipped '.padEnd(colWidth * Math.min(rawCols.length, 5), '─')}`);
+                    }
+
+                    // Parse with actual settings for header + data rows
                     const df = this._driver.parseCSV(this._rawFileData.text, {
                         delimiter: delim,
                         headerRow,
                         skipRows,
                         hasHeader: true,
-                        maxRows: 10
+                        maxRows: 8
                     });
 
+                    const headerLine = `${'▶'.padEnd(idxWidth)}${df.columns.map(c => String(c).substring(0, colWidth - 2).padEnd(colWidth)).join('| ')}`;
+                    lines.push(headerLine);
+                    lines.push('═'.repeat(Math.min(headerLine.length, 140)));
+
                     const dataRows = df.toRows();
-                    const colHeader = 'Row'.padEnd(6) + df.columns.map(c => String(c).padEnd(20)).join(' | ');
-                    const separator = '─'.repeat(Math.min(colHeader.length, 120));
-                    const preview = dataRows.map((row, i) => {
-                        const rowIdx = String(headerRow + skipRows + 1 + i).padEnd(6);
-                        const cols = Object.values(row).map(v => String(v ?? '').padEnd(20)).join(' | ');
-                        return `${rowIdx}${cols}`;
-                    }).join('\n');
+                    dataRows.forEach((row, i) => {
+                        const rowIdx = String(totalOffset + 1 + i).padEnd(idxWidth);
+                        const cols = Object.values(row).map(v => String(v ?? '').substring(0, colWidth - 2).padEnd(colWidth)).join('| ');
+                        lines.push(`${rowIdx}${cols}`);
+                    });
 
                     if (previewDiv) {
-                        previewDiv.textContent = `${'Row'.padEnd(6)}Columns: ${df.columns.join(' | ')}\n${separator}\n${preview}`;
+                        previewDiv.textContent = lines.join('\n');
                     }
                 } catch (err: any) {
                     if (previewDiv) previewDiv.textContent = `Error: ${err.message}`;

package/package.json

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