juxscript 1.1.179 → 1.1.181

package/lib/components/dataframe.d.ts

@@ -14,6 +14,8 @@ export interface DataFrameOptions {
     rowsPerPage?: number;
     showStatus?: boolean;
     icon?: string;
+    maxSheetSize?: number;
+    sheetChunkSize?: number;
     style?: string;
     class?: string;
 }
@@ -36,6 +38,8 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _inlineUpload;
     private _showStatus;
     private _icon;
+    private _maxSheetSize;
+    private _sheetChunkSize;
     constructor(id: string, options?: DataFrameOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -68,6 +72,14 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     filterable(v: boolean): this;
     paginated(v: boolean): this;
     rowsPerPage(v: number): this;
+    /**
+     * ✅ NEW: Set max rows per sheet (prevents memory issues with huge Excel files)
+     */
+    maxSheetSize(v: number): this;
+    /**
+     * ✅ NEW: Set chunk size for processing large sheets
+     */
+    sheetChunkSize(v: number): this;
     /**
      * ✅ FIXED: Render multiple Excel sheets as tabs
      */

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

@@ -30,6 +30,8 @@ export class DataFrameComponent extends BaseComponent {
         this._inlineUpload = null;
         this._showStatus = true;
         this._icon = '';
+        this._maxSheetSize = 100000; // ✅ Default 100k rows
+        this._sheetChunkSize = 10000; // ✅ Default 10k chunk
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
         this._showStatus = options.showStatus ?? true;
         this._icon = options.icon ?? '';
@@ -41,6 +43,8 @@ export class DataFrameComponent extends BaseComponent {
             paginated: options.paginated ?? true,
             rowsPerPage: options.rowsPerPage ?? 25
         };
+        this._maxSheetSize = options.maxSheetSize ?? 100000;
+        this._sheetChunkSize = options.sheetChunkSize ?? 10000;
     }
     getTriggerEvents() { return TRIGGER_EVENTS; }
     getCallbackEvents() { return CALLBACK_EVENTS; }
@@ -86,25 +90,29 @@ export class DataFrameComponent extends BaseComponent {
                 this.state.loading = true;
                 this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                 try {
-                    // ✅ 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);
+                        // ✅ Pass chunking options for large files
+                        const sheets = await this._driver.streamFileMultiSheet(file, {
+                            maxSheetSize: this._maxSheetSize,
+                            sheetChunkSize: this._sheetChunkSize,
+                            onProgress: (loaded, total) => {
+                                const pct = total ? Math.round((loaded / total) * 100) : 0;
+                                this._updateStatus(`⏳ Parsing ${file.name}... ${pct}%`, 'loading');
+                            }
+                        });
                         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
+                        // CSV/TSV: use existing streaming
                         const df = await this._driver.streamFile(file);
                         await this._driver.store(file.name, df, { source: file.name });
                         this._setDataFrame(df, file.name);
@@ -208,6 +216,20 @@ 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; }
+    /**
+     * ✅ NEW: Set max rows per sheet (prevents memory issues with huge Excel files)
+     */
+    maxSheetSize(v) {
+        this._maxSheetSize = v;
+        return this;
+    }
+    /**
+     * ✅ NEW: Set chunk size for processing large sheets
+     */
+    sheetChunkSize(v) {
+        this._sheetChunkSize = v;
+        return this;
+    }
     /* ═══════════════════════════════════════════════════
      * MULTI-SHEET RENDERING
      * ═══════════════════════════════════════════════════ */
@@ -460,25 +482,27 @@ export class DataFrameComponent extends BaseComponent {
                     this.state.loading = true;
                     this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                     try {
-                        // ✅ 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 sheets = await this._driver.streamFileMultiSheet(file, {
+                                maxSheetSize: this._maxSheetSize,
+                                sheetChunkSize: this._sheetChunkSize,
+                                onProgress: (loaded, total) => {
+                                    const pct = total ? Math.round((loaded / total) * 100) : 0;
+                                    this._updateStatus(`⏳ Parsing ${file.name}... ${pct}%`, 'loading');
+                                }
+                            });
                             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);

package/lib/components/dataframe.ts

@@ -20,6 +20,8 @@ export interface DataFrameOptions {
     rowsPerPage?: number;
     showStatus?: boolean;
     icon?: string;
+    maxSheetSize?: number; // ✅ NEW: Max rows per sheet (default: 100k)
+    sheetChunkSize?: number; // ✅ NEW: Chunk size for large sheets (default: 10k)
     style?: string;
     class?: string;
 }
@@ -51,6 +53,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _inlineUpload: { label: string; accept: string; icon: string } | null = null;
     private _showStatus: boolean = true;
     private _icon: string = '';
+    private _maxSheetSize: number = 100000; // ✅ Default 100k rows
+    private _sheetChunkSize: number = 10000; // ✅ Default 10k chunk
 
     constructor(id: string, options: DataFrameOptions = {}) {
         super(id, {
@@ -81,6 +85,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             paginated: options.paginated ?? true,
             rowsPerPage: options.rowsPerPage ?? 25
         };
+        this._maxSheetSize = options.maxSheetSize ?? 100000;
+        this._sheetChunkSize = options.sheetChunkSize ?? 10000;
     }
 
     protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
@@ -124,26 +130,31 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
 
                 try {
-                    // ✅ 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);
+                        // ✅ Pass chunking options for large files
+                        const sheets = await this._driver.streamFileMultiSheet(file, {
+                            maxSheetSize: this._maxSheetSize,
+                            sheetChunkSize: this._sheetChunkSize,
+                            onProgress: (loaded, total) => {
+                                const pct = total ? Math.round((loaded / total) * 100) : 0;
+                                this._updateStatus(`⏳ Parsing ${file.name}... ${pct}%`, 'loading');
+                            }
+                        });
+
                         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
+                        // CSV/TSV: use existing streaming
                         const df = await this._driver.streamFile(file);
                         await this._driver.store(file.name, df, { source: file.name });
                         this._setDataFrame(df, file.name);
@@ -257,6 +268,22 @@ 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; }
 
+    /**
+     * ✅ NEW: Set max rows per sheet (prevents memory issues with huge Excel files)
+     */
+    maxSheetSize(v: number): this {
+        this._maxSheetSize = v;
+        return this;
+    }
+
+    /**
+     * ✅ NEW: Set chunk size for processing large sheets
+     */
+    sheetChunkSize(v: number): this {
+        this._sheetChunkSize = v;
+        return this;
+    }
+
     /* ═══════════════════════════════════════════════════
      * MULTI-SHEET RENDERING
      * ═══════════════════════════════════════════════════ */
@@ -567,26 +594,29 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
 
                     try {
-                        // ✅ 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 sheets = await this._driver.streamFileMultiSheet(file, {
+                                maxSheetSize: this._maxSheetSize,
+                                sheetChunkSize: this._sheetChunkSize,
+                                onProgress: (loaded, total) => {
+                                    const pct = total ? Math.round((loaded / total) * 100) : 0;
+                                    this._updateStatus(`⏳ Parsing ${file.name}... ${pct}%`, 'loading');
+                                }
+                            });
+
                             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);

package/lib/storage/TabularDriver.d.ts

@@ -18,6 +18,8 @@ export interface ParseOptions {
     skipRows?: number;
     columns?: string[];
     sheet?: string | number;
+    maxSheetSize?: number;
+    sheetChunkSize?: number;
 }
 export declare class TabularDriver {
     private _dbName;
@@ -74,11 +76,10 @@ export declare class TabularDriver {
      */
     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>
+     * ✅ OPTIMIZED: Stream Excel file with chunked row processing
+     * Handles large files by processing rows in batches
      */
-    streamFileMultiSheet(file: File): Promise<Record<string, DataFrame>>;
+    streamFileMultiSheet(file: File, options?: ParseOptions): 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":"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"}
+{"version":3,"file":"TabularDriver.d.ts","sourceRoot":"","sources":["TabularDriver.ts"],"names":[],"mappings":"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"}

package/lib/storage/TabularDriver.js

@@ -419,12 +419,11 @@ export class TabularDriver {
         return df;
     }
     /**
-     * ✅ NEW: Stream Excel file and return all sheets
-     * @param file - Excel file (.xlsx or .xls)
-     * @returns Record<sheetName, DataFrame>
+     * ✅ OPTIMIZED: Stream Excel file with chunked row processing
+     * Handles large files by processing rows in batches
      */
-    async streamFileMultiSheet(file) {
-        // ✅ FIX: Dynamic import XLSX here
+    async streamFileMultiSheet(file, options = {}) {
+        const { maxSheetSize = 100000, sheetChunkSize = 10000, onProgress } = options;
         let XLSX;
         try {
             XLSX = await import('xlsx');
@@ -432,16 +431,79 @@ export class TabularDriver {
         catch {
             throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
         }
+        if (onProgress)
+            onProgress(0, file.size);
         const buffer = await file.arrayBuffer();
-        const workbook = XLSX.read(buffer, { type: 'array' });
+        if (onProgress)
+            onProgress(file.size * 0.3, file.size);
+        const workbook = XLSX.read(buffer, {
+            type: 'array',
+            sheetRows: maxSheetSize, // ✅ Limit rows read per sheet
+            dense: false // ✅ Use sparse format for memory efficiency
+        });
         const sheets = {};
-        workbook.SheetNames.forEach((sheetName) => {
+        const totalSheets = workbook.SheetNames.length;
+        let processedSheets = 0;
+        for (const sheetName of workbook.SheetNames) {
             const worksheet = workbook.Sheets[sheetName];
-            const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: null });
-            if (jsonData.length > 0) {
-                sheets[sheetName] = new DataFrame(jsonData);
+            // ✅ Get sheet range to determine size
+            const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
+            const totalRows = range.e.r - range.s.r + 1;
+            if (totalRows === 0) {
+                processedSheets++;
+                continue;
             }
-        });
+            // ✅ Process in chunks if sheet is large
+            if (totalRows > sheetChunkSize) {
+                const rows = [];
+                let headers = [];
+                for (let startRow = 0; startRow < totalRows; startRow += sheetChunkSize) {
+                    const endRow = Math.min(startRow + sheetChunkSize, totalRows);
+                    // ✅ Read chunk with limited row range
+                    const chunkData = XLSX.utils.sheet_to_json(worksheet, {
+                        range: startRow,
+                        header: startRow === 0 ? undefined : headers,
+                        defval: null,
+                        raw: false, // ✅ Convert dates/numbers to strings to reduce memory
+                        blankrows: false
+                    });
+                    if (startRow === 0 && chunkData.length > 0) {
+                        headers = Object.keys(chunkData[0]);
+                    }
+                    rows.push(...chunkData);
+                    if (onProgress) {
+                        const progress = 0.3 + (0.6 * (processedSheets + (startRow / totalRows)) / totalSheets);
+                        onProgress(file.size * progress, file.size);
+                    }
+                    // ✅ Stop if we hit max rows
+                    if (rows.length >= maxSheetSize) {
+                        console.warn(`⚠️  Sheet "${sheetName}" truncated to ${maxSheetSize} rows`);
+                        break;
+                    }
+                }
+                if (rows.length > 0) {
+                    sheets[sheetName] = new DataFrame(rows);
+                }
+            }
+            else {
+                // ✅ Small sheet: process normally
+                const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+                    defval: null,
+                    raw: false,
+                    blankrows: false
+                });
+                if (jsonData.length > 0) {
+                    sheets[sheetName] = new DataFrame(jsonData);
+                }
+            }
+            processedSheets++;
+            if (onProgress) {
+                const progress = 0.3 + (0.6 * (processedSheets / totalSheets));
+                onProgress(file.size * progress, file.size);
+            }
+        }
+        if (onProgress)
+            onProgress(file.size, file.size);
         return sheets;
     }
     /* ═══════════════════════════════════════════════════

package/lib/storage/TabularDriver.ts

@@ -19,7 +19,9 @@ export interface ParseOptions {
     maxRows?: number;
     skipRows?: number;
     columns?: string[];
-    sheet?: string | number; // ✅ For XLSX: sheet name or index
+    sheet?: string | number;
+    maxSheetSize?: number; // ✅ NEW: Max rows per sheet to prevent memory issues
+    sheetChunkSize?: number; // ✅ NEW: Process Excel in chunks
 }
 
 export class TabularDriver {
@@ -523,12 +525,12 @@ export class TabularDriver {
     }
 
     /**
-     * ✅ NEW: Stream Excel file and return all sheets
-     * @param file - Excel file (.xlsx or .xls)
-     * @returns Record<sheetName, DataFrame>
+     * ✅ OPTIMIZED: Stream Excel file with chunked row processing
+     * Handles large files by processing rows in batches
      */
-    async streamFileMultiSheet(file: File): Promise<Record<string, DataFrame>> {
-        // ✅ FIX: Dynamic import XLSX here
+    async streamFileMultiSheet(file: File, options: ParseOptions = {}): Promise<Record<string, DataFrame>> {
+        const { maxSheetSize = 100000, sheetChunkSize = 10000, onProgress } = options;
+
         let XLSX: any;
         try {
             XLSX = await import('xlsx');
@@ -536,19 +538,93 @@ export class TabularDriver {
             throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
         }
 
+        if (onProgress) onProgress(0, file.size);
+
         const buffer = await file.arrayBuffer();
-        const workbook = XLSX.read(buffer, { type: 'array' });
+
+        if (onProgress) onProgress(file.size * 0.3, file.size);
+
+        const workbook = XLSX.read(buffer, {
+            type: 'array',
+            sheetRows: maxSheetSize, // ✅ Limit rows read per sheet
+            dense: false // ✅ Use sparse format for memory efficiency
+        });
 
         const sheets: Record<string, DataFrame> = {};
+        const totalSheets = workbook.SheetNames.length;
+        let processedSheets = 0;
 
-        workbook.SheetNames.forEach((sheetName: string) => {
+        for (const sheetName of workbook.SheetNames) {
             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);
+            // ✅ Get sheet range to determine size
+            const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
+            const totalRows = range.e.r - range.s.r + 1;
+
+            if (totalRows === 0) {
+                processedSheets++;
+                continue;
             }
-        });
+
+            // ✅ Process in chunks if sheet is large
+            if (totalRows > sheetChunkSize) {
+                const rows: Record<string, any>[] = [];
+                let headers: string[] = [];
+
+                for (let startRow = 0; startRow < totalRows; startRow += sheetChunkSize) {
+                    const endRow = Math.min(startRow + sheetChunkSize, totalRows);
+
+                    // ✅ Read chunk with limited row range
+                    const chunkData: Record<string, any>[] = XLSX.utils.sheet_to_json(worksheet, {
+                        range: startRow,
+                        header: startRow === 0 ? undefined : headers,
+                        defval: null,
+                        raw: false, // ✅ Convert dates/numbers to strings to reduce memory
+                        blankrows: false
+                    });
+
+                    if (startRow === 0 && chunkData.length > 0) {
+                        headers = Object.keys(chunkData[0]);
+                    }
+
+                    rows.push(...chunkData);
+
+                    if (onProgress) {
+                        const progress = 0.3 + (0.6 * (processedSheets + (startRow / totalRows)) / totalSheets);
+                        onProgress(file.size * progress, file.size);
+                    }
+
+                    // ✅ Stop if we hit max rows
+                    if (rows.length >= maxSheetSize) {
+                        console.warn(`⚠️  Sheet "${sheetName}" truncated to ${maxSheetSize} rows`);
+                        break;
+                    }
+                }
+
+                if (rows.length > 0) {
+                    sheets[sheetName] = new DataFrame(rows);
+                }
+            } else {
+                // ✅ Small sheet: process normally
+                const jsonData: Record<string, any>[] = XLSX.utils.sheet_to_json(worksheet, {
+                    defval: null,
+                    raw: false,
+                    blankrows: false
+                });
+
+                if (jsonData.length > 0) {
+                    sheets[sheetName] = new DataFrame(jsonData);
+                }
+            }
+
+            processedSheets++;
+            if (onProgress) {
+                const progress = 0.3 + (0.6 * (processedSheets / totalSheets));
+                onProgress(file.size * progress, file.size);
+            }
+        }
+
+        if (onProgress) onProgress(file.size, file.size);
 
         return sheets;
     }

package/lib/styles/shadcn.css

@@ -1,11 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 /* ═══════════════════════════════════════════════════════════════════
- * DESIGN TOKENS (Shadcn Variables)
+ * DESIGN TOKENS
  * ═══════════════════════════════════════════════════════════════════ */
 
 :root {
-  /* Base colors */
   --background: 0 0% 100%;
   --foreground: 0 0% 3.9%;
   --muted: 0 0% 96.1%;
@@ -13,27 +12,19 @@
   --border: 0 0% 89.8%;
   --input: 0 0% 89.8%;
   --ring: 0 0% 3.9%;
-  
-  /* Accent colors */
   --primary: 0 0% 9%;
   --primary-foreground: 0 0% 98%;
   --secondary: 0 0% 96.1%;
   --secondary-foreground: 0 0% 9%;
   --accent: 0 0% 96.1%;
   --accent-foreground: 0 0% 9%;
-  
-  /* Semantic colors */
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
   --success: 142 71% 45%;
   --success-foreground: 0 0% 98%;
   --warning: 48 96% 53%;
   --warning-foreground: 0 0% 9%;
-  
-  /* Sizes */
-  --radius: 0.375rem;
-  
-  /* Font */
+  --radius: 0.5rem;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
@@ -54,13 +45,12 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * BASE INPUT STYLING (Shared across all inputs)
+ * BASE INPUTS
  * ═══════════════════════════════════════════════════════════════════ */
 
 .jux-input-element,
 .jux-table-filter,
 .jux-dataframe-filter-input {
-  display: flex;
   height: 2.5rem;
   width: 100%;
   border-radius: var(--radius);
@@ -70,8 +60,7 @@
   font-size: 0.875rem;
   color: hsl(var(--foreground));
   outline: none !important;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .jux-input-element::placeholder,
@@ -83,25 +72,18 @@
 .jux-input-element:focus,
 .jux-table-filter:focus,
 .jux-dataframe-filter-input:focus {
- 
-  box-shadow: 0 0 0 1px hsl(var(--input)) !important;
-}
-
-.jux-input-element:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * BUTTON BASE (Single source of truth)
+ * BUTTONS
  * ═══════════════════════════════════════════════════════════════════ */
 
 .jux-button,
 .jux-modal-action,
 .jux-table-pagination button,
-.jux-fileupload-button,
-.jux-dropdown-trigger,
-.jux-dmenu-trigger {
+.jux-fileupload-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -112,37 +94,24 @@
   height: 2.5rem;
   padding: 0 1rem;
   cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
+  transition: all 0.2s;
+  border: none;
   background: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
 }
 
 .jux-button:hover,
-.jux-modal-action:hover,
-.jux-table-pagination button:hover:not(:disabled),
-.jux-fileupload-button:hover,
-.jux-dropdown-trigger:hover,
-.jux-dmenu-trigger:hover {
+.jux-table-pagination button:hover:not(:disabled) {
   opacity: 0.9;
 }
 
-.jux-button:focus-visible,
-.jux-modal-action:focus-visible,
-.jux-fileupload-button:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
-}
-
 .jux-button:disabled,
 .jux-table-pagination button:disabled {
   pointer-events: none;
   opacity: 0.5;
 }
 
-/* Button variants */
 .jux-button-outline,
-.jux-modal-action-secondary,
 .jux-fileupload-button {
   border: 1px solid hsl(var(--input));
   background: hsl(var(--background));
@@ -150,101 +119,75 @@
 }
 
 .jux-button-outline:hover,
-.jux-modal-action-secondary:hover,
 .jux-fileupload-button:hover {
   background: hsl(var(--accent));
 }
 
-.jux-button-ghost,
-.jux-modal-action-ghost {
+.jux-button-ghost {
   background: transparent;
   color: hsl(var(--foreground));
-  border: none;
 }
 
-.jux-button-ghost:hover,
-.jux-modal-action-ghost:hover {
+.jux-button-ghost:hover {
   background: hsl(var(--accent));
 }
 
-.jux-button-destructive,
-.jux-modal-action-destructive {
-  background: hsl(var(--destructive));
-  color: hsl(var(--destructive-foreground));
-}
-
-.jux-button-destructive:hover,
-.jux-modal-action-destructive:hover {
-  opacity: 0.9;
-}
-
-/* Button sizes */
-.jux-button-sm { height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; }
-.jux-button-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
-.jux-button-xl { height: 3rem; padding: 0 1.5rem; font-size: 1rem; font-weight: 600; }
-
 /* ═══════════════════════════════════════════════════════════════════
- * TYPOGRAPHY (DRY headings)
+ * TYPOGRAPHY
  * ═══════════════════════════════════════════════════════════════════ */
 
-h1, h2, h3, h4, h5, h6,
-.jux-heading-1, .jux-heading-2, .jux-heading-3, .jux-heading-4, .jux-heading-5, .jux-heading-6 {
-  scroll-margin: 5rem;
+h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   letter-spacing: -0.025em;
   color: hsl(var(--foreground));
 }
 
-h1, .jux-heading-1 { font-size: 2.25rem; font-weight: 800; }
-h2, .jux-heading-2 { font-size: 1.875rem; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.5rem; }
-h3, .jux-heading-3 { font-size: 1.5rem; }
-h4, .jux-heading-4 { font-size: 1.25rem; }
-h5, .jux-heading-5 { font-size: 1.125rem; }
-h6, .jux-heading-6 { font-size: 1rem; }
+h1 { font-size: 2.25rem; font-weight: 800; }
+h2 { font-size: 1.875rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.25rem; }
 
-p, .jux-paragraph { line-height: 1.75; }
-p:not(:first-child) { margin-top: 1.5rem; }
-
-.jux-muted { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+p { line-height: 1.75; color: hsl(var(--foreground)); }
 
 /* ═══════════════════════════════════════════════════════════════════
- * DATAFRAME COMPONENT
+ * DATAFRAME
  * ═══════════════════════════════════════════════════════════════════ */
 
 .jux-dataframe {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
   width: 100%;
 }
 
 .jux-dataframe-status {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   border-radius: var(--radius);
   border: 1px solid hsl(var(--border));
-  background: hsl(var(--muted));
+  background: hsl(var(--muted) / 0.5);
   color: hsl(var(--muted-foreground));
 }
 
 .jux-dataframe-status-success {
   background: hsl(var(--success) / 0.1);
-  border-color: hsl(var(--success) / 0.3);
+  border-color: hsl(var(--success) / 0.2);
   color: hsl(var(--success));
 }
 
 .jux-dataframe-status-loading {
   background: hsl(var(--warning) / 0.1);
-  border-color: hsl(var(--warning) / 0.3);
+  border-color: hsl(var(--warning) / 0.2);
   color: hsl(var(--warning));
 }
 
 .jux-dataframe-status-error {
   background: hsl(var(--destructive) / 0.1);
-  border-color: hsl(var(--destructive) / 0.3);
+  border-color: hsl(var(--destructive) / 0.2);
   color: hsl(var(--destructive));
 }
 
@@ -252,7 +195,6 @@ p:not(:first-child) { margin-top: 1.5rem; }
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
   margin-bottom: 0.75rem;
 }
 
@@ -263,316 +205,220 @@ p:not(:first-child) { margin-top: 1.5rem; }
   transform: translateY(-50%);
   color: hsl(var(--muted-foreground));
   pointer-events: none;
-  display: flex;
-  align-items: center;
   z-index: 1;
 }
 
 .jux-dataframe-filter-input {
-  padding-left: 2.25rem !important;
+  padding-left: 2.5rem !important;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * FILE UPLOAD
+ * TABS
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-fileupload { gap: 0.5rem; }
+.jux-tabs {
+  width: 100%;
+}
 
-.jux-fileupload-item {
-  display: flex;
+.jux-tabs-list {
+  display: inline-flex;
+  height: 2.5rem;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
+  justify-content: flex-start;
+  gap: 0.25rem;
   border-radius: var(--radius);
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
+  background: hsl(var(--muted) / 0.3);
+  padding: 0.25rem;
+  border: 1px solid hsl(var(--border));
 }
 
-.jux-fileupload-filename {
-  flex: 1;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.jux-tabs-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   white-space: nowrap;
+  border-radius: calc(var(--radius) - 0.125rem);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: all 0.2s;
 }
 
-.jux-fileupload-filesize {
-  color: hsl(var(--muted-foreground));
-  font-size: 0.75rem;
+.jux-tabs-button:hover {
+  background: hsl(var(--muted) / 0.5);
+  color: hsl(var(--foreground));
 }
 
-.jux-fileupload-remove {
-  background: transparent;
+.jux-tabs-button-active {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-weight: 600;
+}
+
+.jux-tabs-panel {
+  margin-top: 1rem;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  padding: 0;
+  overflow: hidden;
+}
+
+/* ✅ Remove inner padding/border from tables inside tabs */
+.jux-tabs-panel .jux-table-wrapper {
   border: none;
-  color: hsl(var(--muted-foreground));
-  cursor: pointer;
-  padding: 0 0.25rem;
-  border-radius: 0.25rem;
-  transition: all 0.15s;
+  border-radius: 0;
 }
 
-.jux-fileupload-remove:hover {
-  color: hsl(var(--destructive));
-  background: hsl(var(--destructive) / 0.1);
+.jux-tabs-panel .jux-dataframe-filter {
+  padding: 1rem 1rem 0;
+  margin-bottom: 0.75rem;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
  * TABLE
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-table-wrapper { width: 100%; overflow-x: auto; }
+.jux-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+}
 
 .jux-table {
   width: 100%;
   border-collapse: collapse;
 }
 
-.jux-table thead tr { border-top: 1px solid hsl(var(--border)); }
-.jux-table tbody tr { border-top: 1px solid hsl(var(--border)); }
-.jux-table-striped tbody tr:nth-child(even) { background: hsl(var(--muted)); }
+.jux-table thead tr {
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+}
+
+.jux-table tbody tr {
+  border-bottom: 1px solid hsl(var(--border));
+  transition: background-color 0.15s;
+}
+
+.jux-table tbody tr:last-child {
+  border-bottom: none;
+}
 
 .jux-table th,
 .jux-table td {
-  border: 1px solid hsl(var(--border));
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
   text-align: left;
+  border: none;
+}
+
+.jux-table th {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
 }
 
-.jux-table th { font-weight: 700; }
+.jux-table td {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
 
-.jux-table-hoverable tbody tr {
-  transition: background-color 0.1s ease;
+.jux-table-striped tbody tr:nth-child(even) {
+  background: hsl(var(--muted) / 0.2);
 }
 
 .jux-table-hoverable tbody tr:hover {
-  background: hsl(var(--accent)) !important;
+  background: hsl(var(--muted) / 0.5);
 }
 
 .jux-table-pagination {
-  margin-top: 0.75rem;
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
   display: flex;
-  gap: 0.375rem;
+  gap: 0.5rem;
   justify-content: center;
   align-items: center;
-  padding: 0.5rem 0;
+  border-top: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.2);
 }
 
 .jux-table-pagination span {
   font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  padding: 0 0.75rem;
+  color: hsl(var(--foreground));
+  font-weight: 500;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * MODAL
+ * FILE UPLOAD
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(2px);
+.jux-fileupload-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.jux-modal {
-  position: relative;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 32rem;
-  z-index: 51;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
-}
-
-.jux-modal-header {
-  display: flex;
-  align-items: flex-start;
   gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  font-size: 0.875rem;
 }
 
-.jux-modal-header-title {
+.jux-fileupload-filename {
   flex: 1;
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: hsl(var(--foreground));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.jux-modal-content {
-  font-size: 0.875rem;
+.jux-fileupload-filesize {
   color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-}
-
-.jux-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
+  font-size: 0.8125rem;
 }
 
-.jux-modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+.jux-fileupload-remove {
   background: transparent;
   border: none;
-  cursor: pointer;
-  color: hsl(var(--muted-foreground));
-  padding: 0.25rem;
-}
-
-.jux-modal-close:hover {
-  color: hsl(var(--foreground));
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * TABS
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-tabs-list {
-  display: inline-flex;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  background: hsl(var(--muted));
-  padding: 0.25rem;
-}
-
-.jux-tabs-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: calc(var(--radius) - 2px);
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
   color: hsl(var(--muted-foreground));
   cursor: pointer;
-  border: none;
-  background: transparent;
-  transition: all 0.15s;
-}
-
-.jux-tabs-button-active {
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
 }
 
-.jux-tabs-panel {
-  margin-top: 0.5rem;
-  border-radius: var(--radius);
-  border: 1px solid hsl(var(--border));
-  padding: 1.5rem;
+.jux-fileupload-remove:hover {
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * CARD
+ * UTILITIES
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-card {
-  border-radius: 0.5rem;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-}
-
-.jux-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.5rem;
-  background: hsl(var(--muted) / 0.5);
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.jux-card-title {
-  flex: 1;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.jux-card-body {
-  padding: 1.5rem;
+.jux-muted {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }
 
-/* ═══════════════════════════════════════════════════════════════════
- * DROPDOWN MENU
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-dmenu-wrapper { position: relative; display: inline-block; }
-
-.jux-dmenu-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 220px;
-  padding: 4px;
-  border-radius: 0.5rem;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-  display: none;
-  flex-direction: column;
-}
-
-.jux-dmenu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 6px 8px;
-  font-size: 0.875rem;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: hsl(var(--foreground));
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.jux-dmenu-item:hover {
-  background: hsl(var(--accent));
-}
-
-.jux-dmenu-sep {
-  height: 1px;
-  margin: 4px -4px;
-  background: hsl(var(--border));
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * UTILITIES
- * ═══════════════════════════════════════════════════════════════════ */
-
-hr, .jux-hr {
+hr {
   margin: 1.5rem 0;
   border: none;
   border-top: 1px solid hsl(var(--border));
 }
 
-code, .jux-inline-code {
+code {
   border-radius: 0.25rem;
   background: hsl(var(--muted));
-  padding: 0.15rem 0.3rem;
+  padding: 0.2rem 0.4rem;
   font-family: ui-monospace, monospace;
   font-size: 0.875rem;
   font-weight: 600;
+  color: hsl(var(--foreground));
 }

package/package.json

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