juxscript 1.1.165 → 1.1.166

package/lib/components/dataframe.d.ts

@@ -29,6 +29,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _uploadRef;
     private _storageKey;
     private _pendingSource;
+    private _inlineUpload;
     constructor(id: string, options?: DataFrameOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -44,6 +45,14 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
      * Load from raw data — array of objects or Record<string, any[]>
      */
     fromData(data: Record<string, any>[] | Record<string, any[]>): this;
+    /**
+     * Add an inline file upload control above the table.
+     * Auto-wires parsing, storage, and display — zero callbacks needed.
+     *
+     * @param label - Button/label text (default: 'Upload File')
+     * @param accept - File types (default: '.csv,.tsv,.txt,.xlsx,.xls')
+     */
+    withUpload(label?: string, accept?: string): this;
     /**
      * Apply a transform to the current DataFrame and update the table
      */
@@ -100,6 +109,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     filterable(v: boolean): this;
     paginated(v: boolean): this;
     rowsPerPage(v: number): this;
+    private _updateStatus;
     private _setDataFrame;
     private _updateTable;
     update(prop: string, value: any): void;

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

@@ -1,6 +1,7 @@
 import { BaseComponent } from './base/BaseComponent.js';
 import { DataFrame } from '../storage/DataFrame.js';
 import { TabularDriver } from '../storage/TabularDriver.js';
+import { FileUpload } from './fileupload.js';
 import { Table } from './table.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
@@ -22,6 +23,7 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadRef = null;
         this._storageKey = null;
         this._pendingSource = null;
+        this._inlineUpload = null;
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
         this._tableOptions = {
             striped: options.striped ?? true,
@@ -103,6 +105,17 @@ export class DataFrameComponent extends BaseComponent {
         };
         return this;
     }
+    /**
+     * Add an inline file upload control above the table.
+     * Auto-wires parsing, storage, and display — zero callbacks needed.
+     *
+     * @param label - Button/label text (default: 'Upload File')
+     * @param accept - File types (default: '.csv,.tsv,.txt,.xlsx,.xls')
+     */
+    withUpload(label = 'Upload File', accept = '.csv,.tsv,.txt,.xlsx,.xls') {
+        this._inlineUpload = { label, accept };
+        return this;
+    }
     /* ═══════════════════════════════════════════════════
      * TRANSFORM API (returns new DataFrameComponent view)
      * ═══════════════════════════════════════════════════ */
@@ -207,6 +220,11 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
+    _updateStatus(text) {
+        const el = document.getElementById(`${this._id}-status`);
+        if (el)
+            el.textContent = text;
+    }
     _setDataFrame(df, sourceName) {
         this._df = df;
         this.state.loaded = true;
@@ -214,12 +232,12 @@ export class DataFrameComponent extends BaseComponent {
         this.state.sourceName = sourceName;
         this.state.rowCount = df.height;
         this.state.colCount = df.width;
-        // Clean __EMPTY columns from xlsx artifacts
         const cleanCols = df.columns.filter(c => !c.startsWith('__EMPTY'));
         if (cleanCols.length < df.columns.length) {
             this._df = df.select(...cleanCols);
         }
         this._updateTable();
+        this._updateStatus(`✅ ${sourceName} — ${this._df.height} rows × ${this._df.width} cols`);
         this._triggerCallback('load', this._df, null, this);
     }
     _updateTable() {
@@ -241,6 +259,44 @@ export class DataFrameComponent extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
+        // Inline upload (if withUpload was called)
+        if (this._inlineUpload) {
+            const upload = new FileUpload(`${this._id}-upload`, {
+                label: this._inlineUpload.label,
+                accept: this._inlineUpload.accept
+            });
+            // Wire it as a fromUpload source
+            this._uploadRef = upload;
+            this._pendingSource = async () => {
+                upload.bind('change', async (files) => {
+                    if (!files || files.length === 0)
+                        return;
+                    const file = files[0];
+                    this.state.loading = true;
+                    this._updateStatus('⏳ Parsing ' + file.name + '...');
+                    try {
+                        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);
+                        this.state.loading = false;
+                        this._updateStatus('❌ ' + err.message);
+                    }
+                });
+            };
+            // Render upload into wrapper before status/table
+            const uploadContainer = document.createElement('div');
+            uploadContainer.className = 'jux-dataframe-upload';
+            uploadContainer.id = `${this._id}-upload-container`;
+            wrapper.appendChild(uploadContainer);
+            container.appendChild(wrapper);
+            upload.render(uploadContainer);
+        }
+        else {
+            container.appendChild(wrapper);
+        }
         // Status bar
         const statusBar = document.createElement('div');
         statusBar.className = 'jux-dataframe-status';
@@ -248,9 +304,8 @@ export class DataFrameComponent extends BaseComponent {
         statusBar.style.cssText = 'font-size:13px;color:#888;margin-bottom:8px;';
         statusBar.textContent = 'No data loaded.';
         wrapper.appendChild(statusBar);
-        container.appendChild(wrapper);
         // Create internal table
-        this._table = new Table(`${this._id}-table`, {
+        const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,
             sortable: this._tableOptions.sortable,
@@ -258,30 +313,13 @@ export class DataFrameComponent extends BaseComponent {
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });
-        this._table.render(wrapper);
-        // Watch state for status updates
-        const origUpdate = this.update.bind(this);
-        this.update = (prop, value) => {
-            origUpdate(prop, value);
-            if (prop === 'loaded' || prop === 'loading' || prop === 'rowCount' || prop === 'colCount' || prop === 'sourceName') {
-                const el = document.getElementById(`${this._id}-status`);
-                if (el) {
-                    if (this.state.loading) {
-                        el.textContent = '⏳ Loading...';
-                    }
-                    else if (this.state.loaded) {
-                        el.textContent = `✅ ${this.state.sourceName} — ${this.state.rowCount} rows × ${this.state.colCount} cols`;
-                    }
-                    else {
-                        el.textContent = 'No data loaded.';
-                    }
-                }
-            }
-        };
+        tbl.render(wrapper);
+        this._table = tbl;
         // Execute pending data source
         if (this._pendingSource) {
-            this._pendingSource();
+            const fn = this._pendingSource;
             this._pendingSource = null;
+            fn();
         }
         this._wireStandardEvents(wrapper);
         return this;

package/lib/components/dataframe.ts

@@ -42,6 +42,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _uploadRef: FileUpload | null = null;
     private _storageKey: string | null = null;
     private _pendingSource: (() => Promise<void>) | null = null;
+    private _inlineUpload: { label: string; accept: string } | null = null;
 
     constructor(id: string, options: DataFrameOptions = {}) {
         super(id, {
@@ -144,6 +145,18 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         return this;
     }
 
+    /**
+     * Add an inline file upload control above the table.
+     * Auto-wires parsing, storage, and display — zero callbacks needed.
+     *
+     * @param label - Button/label text (default: 'Upload File')
+     * @param accept - File types (default: '.csv,.tsv,.txt,.xlsx,.xls')
+     */
+    withUpload(label: string = 'Upload File', accept: string = '.csv,.tsv,.txt,.xlsx,.xls'): this {
+        this._inlineUpload = { label, accept };
+        return this;
+    }
+
     /* ═══════════════════════════════════════════════════
      * TRANSFORM API (returns new DataFrameComponent view)
      * ═══════════════════════════════════════════════════ */
@@ -268,6 +281,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
 
+    private _updateStatus(text: string): void {
+        const el = document.getElementById(`${this._id}-status`);
+        if (el) el.textContent = text;
+    }
+
     private _setDataFrame(df: DataFrame, sourceName: string): void {
         this._df = df;
         this.state.loaded = true;
@@ -276,13 +294,13 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this.state.rowCount = df.height;
         this.state.colCount = df.width;
 
-        // Clean __EMPTY columns from xlsx artifacts
         const cleanCols = df.columns.filter(c => !c.startsWith('__EMPTY'));
         if (cleanCols.length < df.columns.length) {
             this._df = df.select(...cleanCols);
         }
 
         this._updateTable();
+        this._updateStatus(`✅ ${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols`);
         this._triggerCallback('load', this._df, null, this);
     }
 
@@ -307,6 +325,45 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         if (className) wrapper.className += ` ${className}`;
         if (style) wrapper.setAttribute('style', style);
 
+        // Inline upload (if withUpload was called)
+        if (this._inlineUpload) {
+            const upload = new FileUpload(`${this._id}-upload`, {
+                label: this._inlineUpload.label,
+                accept: this._inlineUpload.accept
+            });
+
+            // Wire it as a fromUpload source
+            this._uploadRef = upload;
+            this._pendingSource = async () => {
+                upload.bind('change', async (files: File[]) => {
+                    if (!files || files.length === 0) return;
+                    const file = files[0];
+                    this.state.loading = true;
+                    this._updateStatus('⏳ Parsing ' + file.name + '...');
+
+                    try {
+                        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;
+                        this._updateStatus('❌ ' + err.message);
+                    }
+                });
+            };
+
+            // Render upload into wrapper before status/table
+            const uploadContainer = document.createElement('div');
+            uploadContainer.className = 'jux-dataframe-upload';
+            uploadContainer.id = `${this._id}-upload-container`;
+            wrapper.appendChild(uploadContainer);
+            container.appendChild(wrapper);
+            upload.render(uploadContainer);
+        } else {
+            container.appendChild(wrapper);
+        }
+
         // Status bar
         const statusBar = document.createElement('div');
         statusBar.className = 'jux-dataframe-status';
@@ -315,10 +372,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         statusBar.textContent = 'No data loaded.';
         wrapper.appendChild(statusBar);
 
-        container.appendChild(wrapper);
-
         // Create internal table
-        this._table = new Table(`${this._id}-table`, {
+        const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,
             sortable: this._tableOptions.sortable,
@@ -326,30 +381,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });
-        this._table.render(wrapper);
-
-        // Watch state for status updates
-        const origUpdate = this.update.bind(this);
-        this.update = (prop: string, value: any) => {
-            origUpdate(prop, value);
-            if (prop === 'loaded' || prop === 'loading' || prop === 'rowCount' || prop === 'colCount' || prop === 'sourceName') {
-                const el = document.getElementById(`${this._id}-status`);
-                if (el) {
-                    if (this.state.loading) {
-                        el.textContent = '⏳ Loading...';
-                    } else if (this.state.loaded) {
-                        el.textContent = `✅ ${this.state.sourceName} — ${this.state.rowCount} rows × ${this.state.colCount} cols`;
-                    } else {
-                        el.textContent = 'No data loaded.';
-                    }
-                }
-            }
-        };
+        tbl.render(wrapper);
+        this._table = tbl;
 
         // Execute pending data source
         if (this._pendingSource) {
-            this._pendingSource();
+            const fn = this._pendingSource;
             this._pendingSource = null;
+            fn();
         }
 
         this._wireStandardEvents(wrapper);

package/package.json

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