juxscript 1.1.175 → 1.1.177

package/lib/components/dataframe.d.ts

@@ -27,6 +27,8 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _df;
     private _driver;
     private _table;
+    private _tabs;
+    private _sheets;
     private _tableOptions;
     private _uploadRef;
     private _storageKey;
@@ -66,6 +68,10 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     filterable(v: boolean): this;
     paginated(v: boolean): this;
     rowsPerPage(v: number): this;
+    /**
+     * ✅ NEW: Render multiple Excel sheets as tabs
+     */
+    private _renderMultiSheet;
     private _updateStatus;
     private _setDataFrame;
     private _updateTable;

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

@@ -1 +1 @@
-{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAMnC,MAAM,WAAW,gBAAgB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,cAAc,GAAG,SAAS,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,qBAAa,kBAAmB,SAAQ,aAAa,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,GAAG,CAA0B;IACrC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,aAAa,CAOnB;IACF,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,cAAc,CAAsC;IAC5D,OAAO,CAAC,aAAa,CAAgE;IACrF,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,KAAK,CAAc;gBAEf,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IA+BtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAC/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAMhD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAwB9B,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAsBpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI;IAiBnE,UAAU,CAAC,KAAK,GAAE,MAAsB,EAAE,MAAM,GAAE,MAAoC,EAAE,IAAI,GAAE,MAAiB,GAAG,IAAI;IAStH,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC5B,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAM3B,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI;IAQ7C,MAAM,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI;IAI7E,MAAM,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAI/B,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI;IAI7C,IAAI,CAAC,CAAC,GAAE,MAAU,GAAG,IAAI;IAIzB,IAAI,CAAC,CAAC,GAAE,MAAU,GAAG,IAAI;IAIzB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,GAAG,IAAI;IAIpF,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQxH,IAAI,EAAE,IAAI,SAAS,GAAG,IAAI,CAAqB;IAC/C,IAAI,MAAM,IAAI,aAAa,CAAyB;IACpD,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,CAAwB;IACjD,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IACtC,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM;IACjC,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;IAC/B,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAsC;IACnE,IAAI,OAAO,IAAI,MAAM,EAAE,CAAoC;IAErD,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAUhD,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IACzB,SAAS,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC3B,QAAQ,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC1B,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC5B,SAAS,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC3B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAM5B,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,gBAAgB;IA+CxB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAMtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA+ErE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,kBAAkB,CAExF"}
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}

package/lib/components/dataframe.js

@@ -3,6 +3,7 @@ import { DataFrame } from '../storage/DataFrame.js';
 import { TabularDriver } from '../storage/TabularDriver.js';
 import { FileUpload } from './fileupload.js';
 import { Table } from './table.js';
+import { Tabs } from './tabs.js';
 import { renderIcon } from './icons.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
@@ -21,6 +22,8 @@ export class DataFrameComponent extends BaseComponent {
         });
         this._df = null;
         this._table = null;
+        this._tabs = null; // ✅ NEW: Tabs for multi-sheet Excel
+        this._sheets = new Map(); // ✅ NEW: Store all sheets
         this._uploadRef = null;
         this._storageKey = null;
         this._pendingSource = null;
@@ -83,9 +86,29 @@ export class DataFrameComponent extends BaseComponent {
                 this.state.loading = true;
                 this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                 try {
-                    const df = await this._driver.streamFile(file);
-                    await this._driver.store(file.name, df, { source: file.name });
-                    this._setDataFrame(df, file.name);
+                    // ✅ FIX: Check if multi-sheet Excel
+                    const isExcel = file.name.toLowerCase().endsWith('.xlsx') ||
+                        file.name.toLowerCase().endsWith('.xls');
+                    if (isExcel) {
+                        const sheets = await this._driver.streamFileMultiSheet(file);
+                        const sheetNames = Object.keys(sheets);
+                        // Store first sheet to IndexedDB
+                        await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
+                        if (sheetNames.length > 1) {
+                            // Multi-sheet: render tabs
+                            this._renderMultiSheet(sheets, file.name);
+                        }
+                        else {
+                            // Single sheet: render normally
+                            this._setDataFrame(sheets[sheetNames[0]], file.name);
+                        }
+                    }
+                    else {
+                        // CSV/TSV: single sheet
+                        const df = await this._driver.streamFile(file);
+                        await this._driver.store(file.name, df, { source: file.name });
+                        this._setDataFrame(df, file.name);
+                    }
                 }
                 catch (err) {
                     this._triggerCallback('error', err.message, null, this);
@@ -185,6 +208,106 @@ export class DataFrameComponent extends BaseComponent {
     filterable(v) { this._tableOptions.filterable = v; return this; }
     paginated(v) { this._tableOptions.paginated = v; return this; }
     rowsPerPage(v) { this._tableOptions.rowsPerPage = v; return this; }
+    /* ═══════════════════════════════════════════════════
+     * MULTI-SHEET RENDERING
+     * ═══════════════════════════════════════════════════ */
+    /**
+     * ✅ NEW: Render multiple Excel sheets as tabs
+     */
+    _renderMultiSheet(sheets, sourceName) {
+        this.state.loading = false;
+        this._sheets.clear();
+        const wrapper = document.getElementById(this._id);
+        if (!wrapper)
+            return;
+        // Clear existing table if any
+        const existingTable = wrapper.querySelector('.jux-table-wrapper');
+        if (existingTable)
+            existingTable.remove();
+        // Store all sheets
+        Object.entries(sheets).forEach(([name, df]) => {
+            this._sheets.set(name, df);
+        });
+        // Create tabs
+        const sheetNames = Object.keys(sheets);
+        const tabs = new Tabs(`${this._id}-tabs`, {
+            tabs: sheetNames.map(name => ({
+                id: name,
+                label: name,
+                content: '' // We'll populate after render
+            })),
+            activeTab: sheetNames[0]
+        });
+        this._tabs = tabs;
+        // Render tabs into wrapper
+        const tabsContainer = document.createElement('div');
+        tabsContainer.className = 'jux-dataframe-tabs';
+        wrapper.appendChild(tabsContainer);
+        tabs.render(tabsContainer);
+        // Populate each tab with its DataFrame table
+        sheetNames.forEach(sheetName => {
+            const df = sheets[sheetName];
+            const table = new Table(`${this._id}-table-${sheetName}`, {
+                striped: this._tableOptions.striped,
+                hoverable: this._tableOptions.hoverable,
+                sortable: this._tableOptions.sortable,
+                filterable: false,
+                paginated: this._tableOptions.paginated,
+                rowsPerPage: this._tableOptions.rowsPerPage
+            });
+            // ✅ Convert columns to ColumnDef[]
+            const columnDefs = df.columns.map(col => ({
+                key: col,
+                label: col
+            }));
+            table.columns(columnDefs).rows(df.toRows());
+            // Add table to tab
+            tabs.addTabContent(sheetName, table);
+            // Add filter if enabled
+            if (this._tableOptions.filterable) {
+                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) => {
+                        return Object.values(row).some(v => v !== null && v !== undefined && String(v).toLowerCase().includes(text));
+                    });
+                    table.rows(filtered.toRows());
+                });
+                // Insert filter before table in tab
+                const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
+                if (tabPanel) {
+                    const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
+                    if (tableWrapper) {
+                        tabPanel.insertBefore(filterContainer, tableWrapper);
+                    }
+                }
+            }
+        });
+        // Update status
+        const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
+        this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
+        // Set first sheet as active DataFrame
+        this._df = sheets[sheetNames[0]];
+        this._table = tabs._tabsWrapper?.querySelector(`#${this._id}-table-${sheetNames[0]}`);
+        this._triggerCallback('load', this._df, null, this);
+    }
     /* ═══════════════════════════════════════════════════
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
@@ -234,7 +357,26 @@ export class DataFrameComponent extends BaseComponent {
             key: col,
             label: col // Use column name as label
         }));
+        // ✅ Update both columns AND rows (force table rebuild)
         this._table.columns(columnDefs).rows(this._df.toRows());
+        // ✅ Force table to re-render header and body
+        const tableElement = this._table['_tableElement']; // Access private property
+        if (tableElement) {
+            const wrapper = tableElement.closest('.jux-table-wrapper');
+            if (wrapper) {
+                // Clear and rebuild the entire table
+                tableElement.innerHTML = '';
+                // Rebuild header
+                const thead = this._table._buildTableHeader();
+                tableElement.appendChild(thead);
+                // Rebuild body
+                const tbody = document.createElement('tbody');
+                this._table._renderTableBody(tbody);
+                tableElement.appendChild(tbody);
+                // Re-wire events
+                this._table._wireTriggerEvents(tbody);
+            }
+        }
     }
     _showFilterInput() {
         const wrapper = document.getElementById(this._id);

package/lib/components/dataframe.ts

@@ -3,6 +3,7 @@ import { DataFrame } from '../storage/DataFrame.js';
 import { TabularDriver } from '../storage/TabularDriver.js';
 import { FileUpload } from './fileupload.js';
 import { Table } from './table.js';
+import { Tabs } from './tabs.js';
 import { renderIcon } from './icons.js';
 
 const TRIGGER_EVENTS = [] as const;
@@ -34,6 +35,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _df: DataFrame | null = null;
     private _driver: TabularDriver;
     private _table: Table | null = null;
+    private _tabs: Tabs | null = null; // ✅ NEW: Tabs for multi-sheet Excel
+    private _sheets: Map<string, DataFrame> = new Map(); // ✅ NEW: Store all sheets
     private _tableOptions: {
         striped: boolean;
         hoverable: boolean;
@@ -119,10 +122,32 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 const file = files[0];
                 this.state.loading = true;
                 this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
+
                 try {
-                    const df = await this._driver.streamFile(file);
-                    await this._driver.store(file.name, df, { source: file.name });
-                    this._setDataFrame(df, file.name);
+                    // ✅ FIX: Check if multi-sheet Excel
+                    const isExcel = file.name.toLowerCase().endsWith('.xlsx') ||
+                        file.name.toLowerCase().endsWith('.xls');
+
+                    if (isExcel) {
+                        const sheets = await this._driver.streamFileMultiSheet(file);
+                        const sheetNames = Object.keys(sheets);
+
+                        // Store first sheet to IndexedDB
+                        await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
+
+                        if (sheetNames.length > 1) {
+                            // Multi-sheet: render tabs
+                            this._renderMultiSheet(sheets, file.name);
+                        } else {
+                            // Single sheet: render normally
+                            this._setDataFrame(sheets[sheetNames[0]], file.name);
+                        }
+                    } else {
+                        // CSV/TSV: single sheet
+                        const df = await this._driver.streamFile(file);
+                        await this._driver.store(file.name, df, { source: file.name });
+                        this._setDataFrame(df, file.name);
+                    }
                 } catch (err: any) {
                     this._triggerCallback('error', err.message, null, this);
                     this.state.loading = false;
@@ -232,6 +257,131 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     paginated(v: boolean): this { this._tableOptions.paginated = v; return this; }
     rowsPerPage(v: number): this { this._tableOptions.rowsPerPage = v; return this; }
 
+    /* ═══════════════════════════════════════════════════
+     * MULTI-SHEET RENDERING
+     * ═══════════════════════════════════════════════════ */
+
+    /**
+     * ✅ NEW: Render multiple Excel sheets as tabs
+     */
+    private _renderMultiSheet(sheets: Record<string, DataFrame>, sourceName: string): void {
+        this.state.loading = false;
+        this._sheets.clear();
+
+        const wrapper = document.getElementById(this._id);
+        if (!wrapper) return;
+
+        // Clear existing table if any
+        const existingTable = wrapper.querySelector('.jux-table-wrapper');
+        if (existingTable) existingTable.remove();
+
+        // Store all sheets
+        Object.entries(sheets).forEach(([name, df]) => {
+            this._sheets.set(name, df);
+        });
+
+        // Create tabs
+        const sheetNames = Object.keys(sheets);
+        const tabs = new Tabs(`${this._id}-tabs`, {
+            tabs: sheetNames.map(name => ({
+                id: name,
+                label: name,
+                content: '' // We'll populate after render
+            })),
+            activeTab: sheetNames[0]
+        });
+
+        this._tabs = tabs;
+
+        // Render tabs into wrapper
+        const tabsContainer = document.createElement('div');
+        tabsContainer.className = 'jux-dataframe-tabs';
+        wrapper.appendChild(tabsContainer);
+        tabs.render(tabsContainer);
+
+        // Populate each tab with its DataFrame table
+        sheetNames.forEach(sheetName => {
+            const df = sheets[sheetName];
+            const table = new Table(`${this._id}-table-${sheetName}`, {
+                striped: this._tableOptions.striped,
+                hoverable: this._tableOptions.hoverable,
+                sortable: this._tableOptions.sortable,
+                filterable: false,
+                paginated: this._tableOptions.paginated,
+                rowsPerPage: this._tableOptions.rowsPerPage
+            });
+
+            // ✅ Convert columns to ColumnDef[]
+            const columnDefs = df.columns.map(col => ({
+                key: col,
+                label: col
+            }));
+
+            table.columns(columnDefs).rows(df.toRows());
+
+            // Add table to tab
+            tabs.addTabContent(sheetName, table);
+
+            // Add filter if enabled
+            if (this._tableOptions.filterable) {
+                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) => {
+                        return Object.values(row).some(v =>
+                            v !== null && v !== undefined && String(v).toLowerCase().includes(text)
+                        );
+                    });
+                    table.rows(filtered.toRows());
+                });
+
+                // Insert filter before table in tab
+                const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
+                if (tabPanel) {
+                    const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
+                    if (tableWrapper) {
+                        tabPanel.insertBefore(filterContainer, tableWrapper);
+                    }
+                }
+            }
+        });
+
+        // Update status
+        const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
+        this._updateStatus(
+            `${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`,
+            'success'
+        );
+
+        // Set first sheet as active DataFrame
+        this._df = sheets[sheetNames[0]];
+        this._table = (tabs as any)._tabsWrapper?.querySelector(`#${this._id}-table-${sheetNames[0]}`);
+
+        this._triggerCallback('load', this._df, null, this);
+    }
+
     /* ═══════════════════════════════════════════════════
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
@@ -294,7 +444,30 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             label: col // Use column name as label
         }));
 
+        // ✅ Update both columns AND rows (force table rebuild)
         this._table.columns(columnDefs).rows(this._df.toRows());
+
+        // ✅ Force table to re-render header and body
+        const tableElement = this._table['_tableElement']; // Access private property
+        if (tableElement) {
+            const wrapper = tableElement.closest('.jux-table-wrapper');
+            if (wrapper) {
+                // Clear and rebuild the entire table
+                tableElement.innerHTML = '';
+
+                // Rebuild header
+                const thead = (this._table as any)._buildTableHeader();
+                tableElement.appendChild(thead);
+
+                // Rebuild body
+                const tbody = document.createElement('tbody');
+                (this._table as any)._renderTableBody(tbody);
+                tableElement.appendChild(tbody);
+
+                // Re-wire events
+                (this._table as any)._wireTriggerEvents(tbody);
+            }
+        }
     }
 
     private _showFilterInput(): void {
@@ -378,6 +551,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     const file = files[0];
                     this.state.loading = true;
                     this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
+
                     try {
                         const df = await this._driver.streamFile(file);
                         await this._driver.store(file.name, df, { source: file.name });

package/lib/storage/TabularDriver.d.ts

@@ -73,6 +73,12 @@ export declare class TabularDriver {
      * Fetch and stream-parse a remote CSV/TSV file
      */
     fetch(url: string, options?: ParseOptions): Promise<DataFrame>;
+    /**
+     * ✅ NEW: Stream Excel file and return all sheets
+     * @param file - Excel file (.xlsx or .xls)
+     * @returns Record<sheetName, DataFrame>
+     */
+    streamFileMultiSheet(file: File): Promise<Record<string, DataFrame>>;
     private _splitLines;
     private _parseLine;
     private _autoType;

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;CAC3B;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;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,SAAS;IA6C7D;;;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;IA8ExE,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

@@ -418,6 +418,32 @@ export class TabularDriver {
             df = df.select(...selectCols);
         return df;
     }
+    /**
+     * ✅ NEW: Stream Excel file and return all sheets
+     * @param file - Excel file (.xlsx or .xls)
+     * @returns Record<sheetName, DataFrame>
+     */
+    async streamFileMultiSheet(file) {
+        // ✅ FIX: Dynamic import XLSX here
+        let XLSX;
+        try {
+            XLSX = await import('xlsx');
+        }
+        catch {
+            throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
+        }
+        const buffer = await file.arrayBuffer();
+        const workbook = XLSX.read(buffer, { type: 'array' });
+        const sheets = {};
+        workbook.SheetNames.forEach((sheetName) => {
+            const worksheet = workbook.Sheets[sheetName];
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: null });
+            if (jsonData.length > 0) {
+                sheets[sheetName] = new DataFrame(jsonData);
+            }
+        });
+        return sheets;
+    }
     /* ═══════════════════════════════════════════════════
      * INTERNAL PARSING HELPERS
      * ═══════════════════════════════════════════════════ */

package/lib/storage/TabularDriver.ts

@@ -522,6 +522,37 @@ export class TabularDriver {
         return df;
     }
 
+    /**
+     * ✅ NEW: Stream Excel file and return all sheets
+     * @param file - Excel file (.xlsx or .xls)
+     * @returns Record<sheetName, DataFrame>
+     */
+    async streamFileMultiSheet(file: File): Promise<Record<string, DataFrame>> {
+        // ✅ FIX: Dynamic import XLSX here
+        let XLSX: any;
+        try {
+            XLSX = await import('xlsx');
+        } catch {
+            throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
+        }
+
+        const buffer = await file.arrayBuffer();
+        const workbook = XLSX.read(buffer, { type: 'array' });
+
+        const sheets: Record<string, DataFrame> = {};
+
+        workbook.SheetNames.forEach((sheetName: string) => {
+            const worksheet = workbook.Sheets[sheetName];
+            const jsonData: Record<string, any>[] = XLSX.utils.sheet_to_json(worksheet, { defval: null });
+
+            if (jsonData.length > 0) {
+                sheets[sheetName] = new DataFrame(jsonData);
+            }
+        });
+
+        return sheets;
+    }
+
     /* ═══════════════════════════════════════════════════
      * INTERNAL PARSING HELPERS
      * ═══════════════════════════════════════════════════ */

package/package.json

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