juxscript 1.1.181 → 1.1.182

package/lib/components/dataframe.d.ts

@@ -16,6 +16,8 @@ export interface DataFrameOptions {
     icon?: string;
     maxSheetSize?: number;
     sheetChunkSize?: number;
+    maxFileSize?: number;
+    showReshapeWarning?: boolean;
     style?: string;
     class?: string;
 }
@@ -40,6 +42,9 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _icon;
     private _maxSheetSize;
     private _sheetChunkSize;
+    private _maxFileSize;
+    private _showReshapeWarning;
+    private _rawFileData;
     constructor(id: string, options?: DataFrameOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -80,6 +85,10 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
      * ✅ NEW: Set chunk size for processing large sheets
      */
     sheetChunkSize(v: number): this;
+    /**
+     * ✅ NEW: Set max file size in MB
+     */
+    maxFileSize(mb: number): this;
     /**
      * ✅ FIXED: Render multiple Excel sheets as tabs
      */
@@ -88,6 +97,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _setDataFrame;
     private _updateTable;
     private _showFilterInput;
+    private _showReshapeModal;
     update(prop: string, value: any): void;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }

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

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

@@ -32,6 +32,9 @@ export class DataFrameComponent extends BaseComponent {
         this._icon = '';
         this._maxSheetSize = 100000; // ✅ Default 100k rows
         this._sheetChunkSize = 10000; // ✅ Default 10k chunk
+        this._maxFileSize = 50; // ✅ Default 50MB
+        this._showReshapeWarning = true;
+        this._rawFileData = null; // ✅ Store for re-parsing
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
         this._showStatus = options.showStatus ?? true;
         this._icon = options.icon ?? '';
@@ -45,6 +48,8 @@ export class DataFrameComponent extends BaseComponent {
         };
         this._maxSheetSize = options.maxSheetSize ?? 100000;
         this._sheetChunkSize = options.sheetChunkSize ?? 10000;
+        this._maxFileSize = options.maxFileSize ?? 50;
+        this._showReshapeWarning = options.showReshapeWarning ?? true;
     }
     getTriggerEvents() { return TRIGGER_EVENTS; }
     getCallbackEvents() { return CALLBACK_EVENTS; }
@@ -87,6 +92,12 @@ export class DataFrameComponent extends BaseComponent {
                 if (!files || files.length === 0)
                     return;
                 const file = files[0];
+                // ✅ Check file size
+                const fileSizeMB = file.size / (1024 * 1024);
+                if (fileSizeMB > this._maxFileSize) {
+                    this._updateStatus(`❌ File too large (${fileSizeMB.toFixed(1)}MB). Max: ${this._maxFileSize}MB`, 'error');
+                    return;
+                }
                 this.state.loading = true;
                 this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                 try {
@@ -112,8 +123,13 @@ export class DataFrameComponent extends BaseComponent {
                         }
                     }
                     else {
-                        // CSV/TSV: use existing streaming
-                        const df = await this._driver.streamFile(file);
+                        // ✅ CSV/TSV: Store raw text for reshaping
+                        const text = await file.text();
+                        this._rawFileData = { file, text };
+                        const df = this._driver.parseCSV(text, {
+                            autoDetectDelimiter: true,
+                            hasHeader: true
+                        });
                         await this._driver.store(file.name, df, { source: file.name });
                         this._setDataFrame(df, file.name);
                     }
@@ -230,6 +246,13 @@ export class DataFrameComponent extends BaseComponent {
         this._sheetChunkSize = v;
         return this;
     }
+    /**
+     * ✅ NEW: Set max file size in MB
+     */
+    maxFileSize(mb) {
+        this._maxFileSize = mb;
+        return this;
+    }
     /* ═══════════════════════════════════════════════════
      * MULTI-SHEET RENDERING
      * ═══════════════════════════════════════════════════ */
@@ -370,8 +393,17 @@ export class DataFrameComponent extends BaseComponent {
         }
         this._updateTable();
         this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-        if (this._tableOptions.filterable) {
-            this._showFilterInput();
+        // ✅ Add reshape warning button if CSV and enabled
+        if (this._showReshapeWarning && this._rawFileData?.text) {
+            const statusEl = document.getElementById(`${this._id}-status`);
+            if (statusEl) {
+                const settingsBtn = document.createElement('button');
+                settingsBtn.textContent = 'Settings';
+                settingsBtn.className = 'jux-button jux-button-sm jux-button-ghost';
+                settingsBtn.style.marginLeft = '0.5rem';
+                settingsBtn.addEventListener('click', () => this._showReshapeModal());
+                statusEl.appendChild(settingsBtn);
+            }
         }
         this._triggerCallback('load', this._df, null, this);
     }
@@ -449,6 +481,10 @@ export class DataFrameComponent extends BaseComponent {
             this._table?.rows(filtered.toRows());
         });
     }
+    _showReshapeModal() {
+        // TODO: Implement reshape modal for re-parsing CSV with different options
+        console.warn('Reshape modal not yet implemented');
+    }
     update(prop, value) { }
     /* ═══════════════════════════════════════════════════
      * RENDER

package/lib/components/dataframe.ts

@@ -22,6 +22,8 @@ export interface DataFrameOptions {
     icon?: string;
     maxSheetSize?: number; // ✅ NEW: Max rows per sheet (default: 100k)
     sheetChunkSize?: number; // ✅ NEW: Chunk size for large sheets (default: 10k)
+    maxFileSize?: number; // ✅ NEW: Max file size in MB (default: 50MB)
+    showReshapeWarning?: boolean; // ✅ NEW: Show warning when data looks malformed
     style?: string;
     class?: string;
 }
@@ -55,6 +57,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _icon: string = '';
     private _maxSheetSize: number = 100000; // ✅ Default 100k rows
     private _sheetChunkSize: number = 10000; // ✅ Default 10k chunk
+    private _maxFileSize: number = 50; // ✅ Default 50MB
+    private _showReshapeWarning: boolean = true;
+    private _rawFileData: { file: File; text?: string } | null = null; // ✅ Store for re-parsing
 
     constructor(id: string, options: DataFrameOptions = {}) {
         super(id, {
@@ -87,6 +92,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         };
         this._maxSheetSize = options.maxSheetSize ?? 100000;
         this._sheetChunkSize = options.sheetChunkSize ?? 10000;
+        this._maxFileSize = options.maxFileSize ?? 50;
+        this._showReshapeWarning = options.showReshapeWarning ?? true;
     }
 
     protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
@@ -126,6 +133,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             upload.bind('change', async (files: File[]) => {
                 if (!files || files.length === 0) return;
                 const file = files[0];
+
+                // ✅ Check file size
+                const fileSizeMB = file.size / (1024 * 1024);
+                if (fileSizeMB > this._maxFileSize) {
+                    this._updateStatus(`❌ File too large (${fileSizeMB.toFixed(1)}MB). Max: ${this._maxFileSize}MB`, 'error');
+                    return;
+                }
+
                 this.state.loading = true;
                 this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
 
@@ -154,8 +169,15 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                             this._setDataFrame(sheets[sheetNames[0]], file.name);
                         }
                     } else {
-                        // CSV/TSV: use existing streaming
-                        const df = await this._driver.streamFile(file);
+                        // ✅ CSV/TSV: Store raw text for reshaping
+                        const text = await file.text();
+                        this._rawFileData = { file, text };
+
+                        const df = this._driver.parseCSV(text, {
+                            autoDetectDelimiter: true,
+                            hasHeader: true
+                        });
+
                         await this._driver.store(file.name, df, { source: file.name });
                         this._setDataFrame(df, file.name);
                     }
@@ -284,6 +306,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         return this;
     }
 
+    /**
+     * ✅ NEW: Set max file size in MB
+     */
+    maxFileSize(mb: number): this {
+        this._maxFileSize = mb;
+        return this;
+    }
+
     /* ═══════════════════════════════════════════════════
      * MULTI-SHEET RENDERING
      * ═══════════════════════════════════════════════════ */
@@ -463,8 +493,17 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             'success'
         );
 
-        if (this._tableOptions.filterable) {
-            this._showFilterInput();
+        // ✅ Add reshape warning button if CSV and enabled
+        if (this._showReshapeWarning && this._rawFileData?.text) {
+            const statusEl = document.getElementById(`${this._id}-status`);
+            if (statusEl) {
+                const settingsBtn = document.createElement('button');
+                settingsBtn.textContent = 'Settings';
+                settingsBtn.className = 'jux-button jux-button-sm jux-button-ghost';
+                settingsBtn.style.marginLeft = '0.5rem';
+                settingsBtn.addEventListener('click', () => this._showReshapeModal());
+                statusEl.appendChild(settingsBtn);
+            }
         }
 
         this._triggerCallback('load', this._df, null, this);
@@ -557,6 +596,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         });
     }
 
+    private _showReshapeModal(): void {
+        // TODO: Implement reshape modal for re-parsing CSV with different options
+        console.warn('Reshape modal not yet implemented');
+    }
+
     update(prop: string, value: any): void { }
 
     /* ═══════════════════════════════════════════════════

package/lib/storage/TabularDriver.d.ts

@@ -20,6 +20,8 @@ export interface ParseOptions {
     sheet?: string | number;
     maxSheetSize?: number;
     sheetChunkSize?: number;
+    headerRow?: number;
+    autoDetectDelimiter?: boolean;
 }
 export declare class TabularDriver {
     private _dbName;
@@ -27,6 +29,16 @@ export declare class TabularDriver {
     private _db;
     constructor(dbName?: string, storeName?: string);
     open(): Promise<IDBDatabase>;
+    /**
+     * ✅ NEW: Auto-detect delimiter from first N lines of CSV
+     * Checks for: , | \t ;
+     */
+    private _detectDelimiter;
+    /**
+     * ✅ NEW: Detect which row contains the header
+     * Looks for first row with mostly string values
+     */
+    private _detectHeaderRow;
     /**
      * Parse a CSV/TSV string into a DataFrame
      */

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

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

package/lib/storage/TabularDriver.js

@@ -28,17 +28,85 @@ export class TabularDriver {
     /* ═══════════════════════════════════════════════════
      * CSV / TSV PARSING
      * ═══════════════════════════════════════════════════ */
+    /**
+     * ✅ NEW: Auto-detect delimiter from first N lines of CSV
+     * Checks for: , | \t ;
+     */
+    _detectDelimiter(text, sampleLines = 5) {
+        const lines = this._splitLines(text).slice(0, sampleLines).filter(l => l.trim());
+        if (lines.length === 0)
+            return ',';
+        const delimiters = [',', '|', '\t', ';'];
+        const scores = {};
+        delimiters.forEach(delim => {
+            const counts = lines.map(line => {
+                // Count occurrences of delimiter NOT inside quotes
+                let count = 0;
+                let inQuotes = false;
+                for (let i = 0; i < line.length; i++) {
+                    if (line[i] === '"')
+                        inQuotes = !inQuotes;
+                    if (!inQuotes && line[i] === delim)
+                        count++;
+                }
+                return count;
+            });
+            // Delimiter should have consistent count across lines
+            const avg = counts.reduce((sum, c) => sum + c, 0) / counts.length;
+            const variance = counts.reduce((sum, c) => sum + Math.pow(c - avg, 2), 0) / counts.length;
+            // Score: high count, low variance
+            scores[delim] = avg > 0 ? avg / (1 + variance) : 0;
+        });
+        // Return delimiter with highest score
+        const best = Object.entries(scores).sort((a, b) => b[1] - a[1])[0];
+        return best[0];
+    }
+    /**
+     * ✅ NEW: Detect which row contains the header
+     * Looks for first row with mostly string values
+     */
+    _detectHeaderRow(text, delimiter, maxCheck = 10) {
+        const lines = this._splitLines(text).slice(0, maxCheck).filter(l => l.trim());
+        for (let i = 0; i < lines.length; i++) {
+            const values = this._parseLine(lines[i], delimiter);
+            // Skip if mostly empty
+            const nonEmpty = values.filter(v => v.trim()).length;
+            if (nonEmpty < values.length * 0.5)
+                continue;
+            // Check if mostly non-numeric (likely headers)
+            const nonNumeric = values.filter(v => {
+                const trimmed = v.trim();
+                return isNaN(Number(trimmed)) && trimmed !== '';
+            }).length;
+            if (nonNumeric >= values.length * 0.7) {
+                return i;
+            }
+        }
+        return 0; // Fallback to first row
+    }
     /**
      * Parse a CSV/TSV string into a DataFrame
      */
     parseCSV(text, options = {}) {
-        const { delimiter = ',', hasHeader = true, maxRows, skipRows = 0, columns: selectCols } = options;
+        const { delimiter: userDelimiter, hasHeader = true, maxRows, skipRows: userSkipRows = 0, columns: selectCols, headerRow: userHeaderRow, autoDetectDelimiter = true } = options;
+        // ✅ Auto-detect delimiter if not provided
+        const delimiter = userDelimiter || (autoDetectDelimiter ? this._detectDelimiter(text) : ',');
+        // ✅ Auto-detect header row if not provided
+        const headerRow = userHeaderRow !== undefined ? userHeaderRow : (hasHeader ? this._detectHeaderRow(text, delimiter) : -1);
         const lines = this._splitLines(text);
-        let startIdx = skipRows;
         let headers;
-        if (hasHeader && lines.length > startIdx) {
-            headers = this._parseLine(lines[startIdx], delimiter);
-            startIdx++;
+        // Skip rows before header
+        let startIdx = userSkipRows;
+        if (hasHeader && headerRow >= 0) {
+            const headerLine = lines[headerRow + userSkipRows];
+            if (headerLine) {
+                headers = this._parseLine(headerLine, delimiter);
+                startIdx = headerRow + userSkipRows + 1;
+            }
+            else {
+                const firstLine = this._parseLine(lines[startIdx] || '', delimiter);
+                headers = firstLine.map((_, i) => `col_${i}`);
+            }
         }
         else {
             const firstLine = this._parseLine(lines[startIdx] || '', delimiter);

package/lib/storage/TabularDriver.ts

@@ -22,6 +22,8 @@ export interface ParseOptions {
     sheet?: string | number;
     maxSheetSize?: number; // ✅ NEW: Max rows per sheet to prevent memory issues
     sheetChunkSize?: number; // ✅ NEW: Process Excel in chunks
+    headerRow?: number; // ✅ NEW: Which row contains headers (default: 0)
+    autoDetectDelimiter?: boolean; // ✅ NEW: Auto-detect delimiter from first lines
 }
 
 export class TabularDriver {
@@ -62,25 +64,105 @@ export class TabularDriver {
      * CSV / TSV PARSING
      * ═══════════════════════════════════════════════════ */
 
+    /**
+     * ✅ NEW: Auto-detect delimiter from first N lines of CSV
+     * Checks for: , | \t ;
+     */
+    private _detectDelimiter(text: string, sampleLines: number = 5): string {
+        const lines = this._splitLines(text).slice(0, sampleLines).filter(l => l.trim());
+        if (lines.length === 0) return ',';
+
+        const delimiters = [',', '|', '\t', ';'];
+        const scores: Record<string, number> = {};
+
+        delimiters.forEach(delim => {
+            const counts = lines.map(line => {
+                // Count occurrences of delimiter NOT inside quotes
+                let count = 0;
+                let inQuotes = false;
+                for (let i = 0; i < line.length; i++) {
+                    if (line[i] === '"') inQuotes = !inQuotes;
+                    if (!inQuotes && line[i] === delim) count++;
+                }
+                return count;
+            });
+
+            // Delimiter should have consistent count across lines
+            const avg = counts.reduce((sum, c) => sum + c, 0) / counts.length;
+            const variance = counts.reduce((sum, c) => sum + Math.pow(c - avg, 2), 0) / counts.length;
+
+            // Score: high count, low variance
+            scores[delim] = avg > 0 ? avg / (1 + variance) : 0;
+        });
+
+        // Return delimiter with highest score
+        const best = Object.entries(scores).sort((a, b) => b[1] - a[1])[0];
+        return best[0];
+    }
+
+    /**
+     * ✅ NEW: Detect which row contains the header
+     * Looks for first row with mostly string values
+     */
+    private _detectHeaderRow(text: string, delimiter: string, maxCheck: number = 10): number {
+        const lines = this._splitLines(text).slice(0, maxCheck).filter(l => l.trim());
+
+        for (let i = 0; i < lines.length; i++) {
+            const values = this._parseLine(lines[i], delimiter);
+
+            // Skip if mostly empty
+            const nonEmpty = values.filter(v => v.trim()).length;
+            if (nonEmpty < values.length * 0.5) continue;
+
+            // Check if mostly non-numeric (likely headers)
+            const nonNumeric = values.filter(v => {
+                const trimmed = v.trim();
+                return isNaN(Number(trimmed)) && trimmed !== '';
+            }).length;
+
+            if (nonNumeric >= values.length * 0.7) {
+                return i;
+            }
+        }
+
+        return 0; // Fallback to first row
+    }
+
     /**
      * Parse a CSV/TSV string into a DataFrame
      */
     parseCSV(text: string, options: ParseOptions = {}): DataFrame {
         const {
-            delimiter = ',',
+            delimiter: userDelimiter,
             hasHeader = true,
             maxRows,
-            skipRows = 0,
-            columns: selectCols
+            skipRows: userSkipRows = 0,
+            columns: selectCols,
+            headerRow: userHeaderRow,
+            autoDetectDelimiter = true
         } = options;
 
+        // ✅ Auto-detect delimiter if not provided
+        const delimiter = userDelimiter || (autoDetectDelimiter ? this._detectDelimiter(text) : ',');
+
+        // ✅ Auto-detect header row if not provided
+        const headerRow = userHeaderRow !== undefined ? userHeaderRow : (hasHeader ? this._detectHeaderRow(text, delimiter) : -1);
+
         const lines = this._splitLines(text);
-        let startIdx = skipRows;
         let headers: string[];
 
-        if (hasHeader && lines.length > startIdx) {
-            headers = this._parseLine(lines[startIdx], delimiter);
-            startIdx++;
+        // Skip rows before header
+        let startIdx = userSkipRows;
+
+        if (hasHeader && headerRow >= 0) {
+            const headerLine = lines[headerRow + userSkipRows];
+            if (headerLine) {
+                headers = this._parseLine(headerLine, delimiter);
+                startIdx = headerRow + userSkipRows + 1;
+            } else {
+                const firstLine = this._parseLine(lines[startIdx] || '', delimiter);
+                headers = firstLine.map((_, i) => `col_${i}`);
+            }
         } else {
             const firstLine = this._parseLine(lines[startIdx] || '', delimiter);
             headers = firstLine.map((_, i) => `col_${i}`);

package/package.json

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