juxscript 1.1.227 → 1.1.228

package/lib/components/dataframe.js

@@ -47,11 +47,6 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadAccept = '.csv,.tsv,.txt,.xlsx,.xls';
         this._uploadDescription = '';
         this._showUploadIcon = true;
-        // ✅ Collapsible state
-        this._collapsible = false;
-        this._collapsed = false;
-        this._summaryTemplate = null;
-        this._detailsElement = null;
         this._settingsModal = null;
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
         this._showStatus = options.showStatus ?? true;
@@ -70,10 +65,6 @@ export class DataFrameComponent extends BaseComponent {
         this._showReshapeWarning = options.showReshapeWarning ?? true;
         this._persistToIndexedDB = options.persistToIndexedDB ?? false;
         this._clearStorageOnFileRemove = options.clearStorageOnFileRemove ?? true;
-        // ✅ Collapsible options
-        this._collapsible = options.collapsible ?? false;
-        this._collapsed = options.collapsed ?? false;
-        this._summaryTemplate = options.summaryTemplate ?? null;
     }
     getTriggerEvents() { return TRIGGER_EVENTS; }
     getCallbackEvents() { return CALLBACK_EVENTS; }
@@ -149,18 +140,12 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadButtonIcon = icon;
         return this;
     }
-    /**
-     * Set upload button label
-     */
     uploadLabel(label) {
         this._uploadButtonLabel = label;
         if (this._inlineUpload)
             this._inlineUpload.label = label;
         return this;
     }
-    /**
-     * Set upload button icon
-     */
     uploadIcon(icon) {
         this._uploadButtonIcon = icon;
         this._showUploadIcon = !!icon;
@@ -168,49 +153,31 @@ export class DataFrameComponent extends BaseComponent {
             this._inlineUpload.icon = icon;
         return this;
     }
-    /**
-     * Set upload button variant (outline, primary, ghost, etc.)
-     */
     uploadVariant(variant) {
         this._uploadButtonVariant = variant;
         return this;
     }
-    /**
-     * Set accepted file types
-     */
     uploadAccept(accept) {
         this._uploadAccept = accept;
         if (this._inlineUpload)
             this._inlineUpload.accept = accept;
         return this;
     }
-    /**
-     * Set description text below the upload button
-     */
     uploadDescription(description) {
         this._uploadDescription = description;
         return this;
     }
-    /**
-     * Show/hide upload icon
-     */
     showUploadIcon(show) {
         this._showUploadIcon = show;
         return this;
     }
     /* ═══════════════════════════════════════════════════
-     * STORAGE OPTIONS (fluent API)
+     * STORAGE OPTIONS
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Enable/disable IndexedDB persistence (default: false = session only)
-     */
     persistToIndexedDB(enabled) {
         this._persistToIndexedDB = enabled;
         return this;
     }
-    /**
-     * Clear stored data when file is removed (default: true)
-     */
     clearStorageOnFileRemove(enabled) {
         this._clearStorageOnFileRemove = enabled;
         return this;
@@ -218,11 +185,7 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * CLEAR / RESET
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Clear the current data and reset the table
-     */
     async clear() {
-        // Clear storage if enabled
         if (this._clearStorageOnFileRemove && this._persistToIndexedDB && this._rawFileData?.file) {
             try {
                 const tables = await this._driver.list();
@@ -235,7 +198,6 @@ export class DataFrameComponent extends BaseComponent {
                 console.warn('[DataFrame] Failed to clear storage:', err);
             }
         }
-        // Reset state
         this._df = null;
         this._rawFileData = null;
         this._sheets.clear();
@@ -243,24 +205,16 @@ export class DataFrameComponent extends BaseComponent {
         this.state.sourceName = '';
         this.state.rowCount = 0;
         this.state.colCount = 0;
-        // Clear table display
         if (this._table) {
             this._table.columns([]).rows([]);
         }
-        // Remove tabs if present
         const wrapper = document.getElementById(this._id);
         if (wrapper) {
             const existingTabs = wrapper.querySelector('.jux-tabs');
             if (existingTabs)
                 existingTabs.remove();
         }
-        // ✅ Hide data view, show upload
         this._hideDataView();
-        // ✅ Hide collapsible details
-        if (this._collapsible && this._detailsElement) {
-            this._detailsElement.style.display = 'none';
-        }
-        // ✅ Clear file from upload component
         if (this._uploadRef) {
             this._uploadRef.clear();
         }
@@ -321,7 +275,7 @@ export class DataFrameComponent extends BaseComponent {
         return this._driver.store(name, this._df);
     }
     /* ═══════════════════════════════════════════════════
-     * TABLE OPTIONS (fluent, pre-render)
+     * TABLE OPTIONS
      * ═══════════════════════════════════════════════════ */
     striped(v) { this._tableOptions.striped = v; return this; }
     hoverable(v) { this._tableOptions.hoverable = v; return this; }
@@ -333,76 +287,7 @@ export class DataFrameComponent extends BaseComponent {
     sheetChunkSize(v) { this._sheetChunkSize = v; return this; }
     maxFileSize(mb) { this._maxFileSize = mb; return this; }
     /* ═══════════════════════════════════════════════════
-     * COLLAPSIBLE OPTIONS (fluent API)
-     * ═══════════════════════════════════════════════════ */
-    /**
-     * Enable/disable collapsible mode
-     */
-    collapsible(enabled) {
-        this._collapsible = enabled;
-        return this;
-    }
-    /**
-     * Set initial collapsed state (true = collapsed, false = expanded)
-     */
-    collapsed(value) {
-        this._collapsed = value;
-        if (this._detailsElement) {
-            this._detailsElement.open = !value;
-        }
-        return this;
-    }
-    /**
-     * Expand the details (show table)
-     */
-    expand() {
-        this._collapsed = false;
-        if (this._detailsElement) {
-            this._detailsElement.open = true;
-        }
-        return this;
-    }
-    /**
-     * Collapse the details (hide table)
-     */
-    collapse() {
-        this._collapsed = true;
-        if (this._detailsElement) {
-            this._detailsElement.open = false;
-        }
-        return this;
-    }
-    /**
-     * Check if collapsible mode is enabled
-     */
-    isCollapsible() {
-        return this._collapsible;
-    }
-    /**
-     * Toggle collapsed state
-     */
-    toggle() {
-        this._collapsed = !this._collapsed;
-        if (this._detailsElement) {
-            this._detailsElement.open = !this._collapsed;
-        }
-        return this;
-    }
-    /**
-     * Set custom summary template
-     */
-    summaryTemplate(fn) {
-        this._summaryTemplate = fn;
-        return this;
-    }
-    /**
-     * Get current collapsed state
-     */
-    isCollapsed() {
-        return this._collapsed;
-    }
-    /* ═══════════════════════════════════════════════════
-     * FILE HANDLING (modified to use storage options)
+     * FILE HANDLING
      * ═══════════════════════════════════════════════════ */
     async _handleFile(file) {
         const fileSizeMB = file.size / (1024 * 1024);
@@ -431,7 +316,6 @@ export class DataFrameComponent extends BaseComponent {
                     this.state.loading = false;
                     return;
                 }
-                // ✅ Only store if persistence is enabled
                 if (this._persistToIndexedDB) {
                     await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
                 }
@@ -449,7 +333,6 @@ export class DataFrameComponent extends BaseComponent {
                     autoDetectDelimiter: true,
                     hasHeader: true
                 });
-                // ✅ Only store if persistence is enabled
                 if (this._persistToIndexedDB) {
                     await this._driver.store(file.name, df, { source: file.name });
                 }
@@ -481,7 +364,6 @@ export class DataFrameComponent extends BaseComponent {
             this._sheets.set(name, df);
         });
         const sheetNames = Object.keys(sheets);
-        // Sanitize sheet names for use as DOM IDs
         const sanitizeId = (name) => name.replace(/[^a-zA-Z0-9_-]/g, '_');
         const tabDefs = sheetNames.map(name => ({
             id: sanitizeId(name),
@@ -492,26 +374,28 @@ export class DataFrameComponent extends BaseComponent {
             tabs: tabDefs,
             activeTab: sanitizeId(sheetNames[0])
         });
-        // Map sanitized IDs back to original sheet names
         const idToSheetName = new Map();
         sheetNames.forEach(name => idToSheetName.set(sanitizeId(name), name));
         this._tabs.bind('tabChange', (tabId) => {
             const originalName = idToSheetName.get(tabId) || tabId;
             this._df = this._sheets.get(originalName) || null;
         });
+        const dataContainer = wrapper.querySelector('.jux-dataframe-data');
+        if (dataContainer) {
+            dataContainer.style.display = '';
+        }
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
-        wrapper.appendChild(tabsContainer);
+        if (dataContainer) {
+            dataContainer.appendChild(tabsContainer);
+        }
+        else {
+            wrapper.appendChild(tabsContainer);
+        }
         this._tabs.render(tabsContainer);
         sheetNames.forEach((sheetName) => {
             const df = sheets[sheetName];
             const safeId = sanitizeId(sheetName);
-            // ✅ DEBUG: Log table options
-            console.log(`[DataFrame] Creating table for sheet "${sheetName}" with options:`, {
-                filterable: this._tableOptions.filterable,
-                paginated: this._tableOptions.paginated,
-                sortable: this._tableOptions.sortable
-            });
             const table = new Table(`${this._id}-table-${safeId}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -532,6 +416,7 @@ export class DataFrameComponent extends BaseComponent {
         });
         const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
         this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
+        this._showDataView();
         this._df = sheets[sheetNames[0]];
         this._triggerCallback('load', this._df, null, this);
     }
@@ -542,7 +427,6 @@ export class DataFrameComponent extends BaseComponent {
         const el = document.getElementById(`${this._id}-status`);
         if (!el)
             return;
-        // ✅ Only show status during loading/error states
         if (type === 'loading' || type === 'error') {
             el.style.display = '';
             el.className = 'jux-dataframe-status';
@@ -561,7 +445,6 @@ export class DataFrameComponent extends BaseComponent {
             el.appendChild(span);
         }
         else {
-            // ✅ Hide status after successful load - table speaks for itself
             el.style.display = 'none';
         }
     }
@@ -572,7 +455,6 @@ export class DataFrameComponent extends BaseComponent {
         this.state.sourceName = sourceName;
         this.state.rowCount = df.height;
         this.state.colCount = df.width;
-        // Only strip __EMPTY columns that are ENTIRELY null/empty
         const cols = df.columns;
         const rows = df.toRows();
         const emptyColumns = cols.filter(c => {
@@ -593,58 +475,37 @@ export class DataFrameComponent extends BaseComponent {
             const columnDefs = this._df.columns.map(col => ({ key: col, label: col }));
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
-        // ✅ Show the table container, hide upload area
         this._showDataView();
-        // ✅ Update collapsible summary if enabled
-        if (this._collapsible && this._detailsElement) {
-            this._detailsElement.style.display = '';
-            this._updateSummary();
-        }
-        // ✅ Hide status - data is loaded
         this._updateStatus('', 'success');
         this._triggerCallback('load', this._df, null, this);
     }
-    /**
-     * Show the data view (table + settings gear), hide upload area
-     */
     _showDataView() {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Hide upload area
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
         if (uploadArea) {
             uploadArea.style.display = 'none';
         }
-        // Show data container (table + toolbar)
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
         if (dataContainer) {
             dataContainer.style.display = '';
         }
-        // Update settings gear with file info
         this._updateSettingsGear();
     }
-    /**
-     * Hide data view, show upload area
-     */
     _hideDataView() {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Show upload area
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
         if (uploadArea) {
             uploadArea.style.display = '';
         }
-        // Hide data container
         const dataContainer = wrapper.querySelector('.jux-dataframe-data');
         if (dataContainer) {
             dataContainer.style.display = 'none';
         }
     }
-    /**
-     * Update the settings gear tooltip/info
-     */
     _updateSettingsGear() {
         const gear = document.getElementById(`${this._id}-settings-gear`);
         if (!gear || !this._df)
@@ -659,9 +520,6 @@ export class DataFrameComponent extends BaseComponent {
             gear.title = `${this.state.sourceName} — ${this._df.height} rows × ${this._df.width} cols`;
         }
     }
-    /**
-     * Show the unified settings modal
-     */
     _showSettingsModal() {
         this._cleanupReshapeModal();
         const fileInfo = this._rawFileData?.file;
@@ -676,7 +534,6 @@ export class DataFrameComponent extends BaseComponent {
         const fileName = fileInfo?.name || this.state.sourceName || 'Unknown';
         let contentHTML = `
             <div class="jux-dataframe-settings-content">
-                <!-- File Info Section -->
                 <div class="jux-dataframe-settings-section">
                     <div class="jux-dataframe-settings-label">Source</div>
                     <div class="jux-dataframe-settings-value">
@@ -684,8 +541,6 @@ export class DataFrameComponent extends BaseComponent {
                         ${fileInfo ? `<span class="jux-muted" style="margin-left: 8px;">${fileSizeKB} KB</span>` : ''}
                     </div>
                 </div>
-
-                <!-- Data Info Section -->
                 <div class="jux-dataframe-settings-section">
                     <div class="jux-dataframe-settings-label">Data</div>
                     <div class="jux-dataframe-settings-value">
@@ -694,7 +549,6 @@ export class DataFrameComponent extends BaseComponent {
                     </div>
                 </div>
         `;
-        // Import Settings button (only if we have raw file data)
         if (this._rawFileData) {
             contentHTML += `
                 <div class="jux-dataframe-settings-section">
@@ -707,9 +561,7 @@ export class DataFrameComponent extends BaseComponent {
                 </div>
             `;
         }
-        contentHTML += `
-            </div>
-        `;
+        contentHTML += `</div>`;
         this._settingsModal
             .content(contentHTML)
             .actions([
@@ -729,7 +581,6 @@ export class DataFrameComponent extends BaseComponent {
         ]);
         this._settingsModal.render(document.body);
         this._settingsModal.open();
-        // Wire up import settings button
         requestAnimationFrame(() => {
             const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
             if (adjustBtn) {
@@ -740,79 +591,9 @@ export class DataFrameComponent extends BaseComponent {
             }
         });
     }
-    /**
-     * Update the collapsible summary text
-     */
-    _updateSummary(isMalformed) {
-        if (!this._collapsible || !this._detailsElement)
-            return;
-        const summaryEl = this._detailsElement.querySelector('.jux-dataframe-summary');
-        if (!summaryEl)
-            return;
-        const malformed = isMalformed ?? (this._df ? this._detectMalformedData(this._df) : false);
-        const summaryTextEl = summaryEl.querySelector('.jux-dataframe-summary-text');
-        if (summaryTextEl) {
-            if (!this._df) {
-                summaryTextEl.textContent = 'No data loaded';
-            }
-            else if (this._summaryTemplate) {
-                summaryTextEl.textContent = this._summaryTemplate(this._df);
-            }
-            else {
-                const suffix = malformed ? ' ⚠️' : '';
-                summaryTextEl.textContent = `${this.state.sourceName || 'Data'} — ${this._df.height} rows × ${this._df.width} cols${suffix}`;
-            }
-        }
-        // ✅ Add/update settings gear in summary
-        let gearBtn = summaryEl.querySelector('.jux-dataframe-summary-gear');
-        if (this._df) {
-            if (!gearBtn) {
-                gearBtn = document.createElement('button');
-                gearBtn.className = 'jux-dataframe-summary-gear';
-                gearBtn.type = 'button';
-                gearBtn.innerHTML = '⚙️';
-                gearBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this._showSettingsModal();
-                });
-                summaryEl.appendChild(gearBtn);
-            }
-            if (malformed) {
-                gearBtn.classList.add('jux-dataframe-gear-warning');
-            }
-            else {
-                gearBtn.classList.remove('jux-dataframe-gear-warning');
-            }
-        }
-        else if (gearBtn) {
-            gearBtn.remove();
-        }
-    }
     /* ═══════════════════════════════════════════════════
      * MALFORMED DATA DETECTION
      * ═══════════════════════════════════════════════════ */
-    _appendSettingsButton(label, variant) {
-        const statusEl = document.getElementById(`${this._id}-status`);
-        if (!statusEl)
-            return;
-        // Remove existing settings button if any
-        const existing = statusEl.querySelector('.jux-dataframe-settings-btn');
-        if (existing)
-            existing.remove();
-        const btn = document.createElement('button');
-        btn.className = `jux-dataframe-settings-btn jux-dataframe-settings-btn-${variant}`;
-        btn.type = 'button';
-        btn.textContent = `⚙️ ${label}`;
-        btn.style.marginLeft = '8px';
-        btn.style.cursor = 'pointer';
-        btn.style.fontSize = '0.8rem';
-        btn.style.padding = '2px 8px';
-        btn.style.borderRadius = 'var(--radius, 4px)';
-        btn.style.border = '1px solid hsl(var(--border))';
-        btn.style.background = variant === 'warning' ? 'hsl(38 92% 50% / 0.15)' : 'transparent';
-        btn.addEventListener('click', () => this._showReshapeModal());
-        statusEl.appendChild(btn);
-    }
     _detectMalformedData(df) {
         const columns = df.columns;
         const rows = df.toRows();
@@ -862,11 +643,6 @@ export class DataFrameComponent extends BaseComponent {
         div.textContent = text;
         return div.innerHTML;
     }
-    /**
-     * Build a clickable preview table from raw row data.
-     * Each row stores its actual sheet row index via data-sheet-row attribute.
-     * Returns the table HTML string.
-     */
     _buildClickablePreviewHTML(rawRows, selectedSheetRow) {
         let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
         for (const { sheetRow, values } of rawRows) {
@@ -880,7 +656,6 @@ export class DataFrameComponent extends BaseComponent {
                 rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
             }
             html += `<tr data-sheet-row="${sheetRow}" style="${rowStyle}" onmouseover="this.style.outline='2px solid hsl(142 71% 45% / 0.5)'" onmouseout="this.style.outline=''">`;
-            // Row index cell
             html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center; user-select: none;">`;
             if (isHeader) {
                 html += `<span style="color: hsl(142 71% 45%);">▶ ${sheetRow}</span>`;
@@ -889,7 +664,6 @@ export class DataFrameComponent extends BaseComponent {
                 html += `${sheetRow}`;
             }
             html += '</td>';
-            // Show first 6 columns
             const displayCols = values.slice(0, 6);
             displayCols.forEach(val => {
                 const displayVal = val != null ? String(val).substring(0, 20) : '';
@@ -901,7 +675,6 @@ export class DataFrameComponent extends BaseComponent {
             if (values.length > 6) {
                 html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
             }
-            // Status badge
             html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap; user-select: none;">`;
             if (isHeader) {
                 html += '<span style="background: hsl(142 71% 45%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;">HEADER</span>';
@@ -921,22 +694,17 @@ export class DataFrameComponent extends BaseComponent {
         if (!this._rawFileData?.file)
             return;
         this._cleanupReshapeModal();
-        // ✅ Use the SAME cell-reading method as the parser
         const rawRows = await this._driver.readRawExcelRows(this._rawFileData.file, 15);
         if (rawRows.length === 0)
             return;
-        // Log what we got so we can verify alignment
-        console.log('[DataFrame Preview] Raw rows from readRawExcelRows:');
-        rawRows.forEach(r => console.log(`  sheetRow ${r.sheetRow}:`, r.values.slice(0, 5)));
-        // Auto-detect best header row
         let selectedSheetRow = rawRows[0].sheetRow;
         for (const { sheetRow, values } of rawRows) {
             const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
             if (nonEmpty.length < values.length * 0.5)
                 continue;
             const nonNumeric = nonEmpty.filter(v => {
-                const trimmed = v.trim();
-                return isNaN(Number(trimmed)) && trimmed !== '';
+                const str = String(v).trim();
+                return isNaN(Number(str)) && str !== '';
             }).length;
             if (nonNumeric >= nonEmpty.length * 0.7) {
                 selectedSheetRow = sheetRow;
@@ -973,7 +741,6 @@ export class DataFrameComponent extends BaseComponent {
                 click: async () => {
                     const input = document.getElementById(`${this._id}-header-row`);
                     const headerRow = parseInt(input.value) || 0;
-                    console.log(`[DataFrame] Apply clicked: headerRow=${headerRow}`);
                     this.state.loading = true;
                     this._updateStatus('Re-parsing with new settings...', 'loading');
                     try {
@@ -1031,7 +798,6 @@ export class DataFrameComponent extends BaseComponent {
                 tr.addEventListener('click', () => {
                     const rowIdx = parseInt(tr.dataset.sheetRow);
                     hiddenInput.value = String(rowIdx);
-                    console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
                     updateHint(rowIdx);
                     renderPreview(rowIdx);
                 });
@@ -1047,7 +813,6 @@ export class DataFrameComponent extends BaseComponent {
         this._cleanupReshapeModal();
         const text = this._rawFileData.text;
         const detected = this._driver._detectDelimiter(text);
-        // Parse raw lines
         const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
         const rawRows = [];
         const maxPreviewRows = Math.min(lines.length, 15);
@@ -1059,7 +824,6 @@ export class DataFrameComponent extends BaseComponent {
             const values = this._driver._parseLine(lines[i], detected);
             rawRows.push({ sheetRow: i, values });
         }
-        // Auto-detect header row
         let selectedRow = 0;
         for (const { sheetRow, values } of rawRows) {
             const nonEmpty = values.filter((v) => v.trim() !== '');
@@ -1176,7 +940,6 @@ export class DataFrameComponent extends BaseComponent {
                     tr.addEventListener('click', () => {
                         const rowIdx = parseInt(tr.dataset.sheetRow);
                         hiddenInput.value = String(rowIdx);
-                        console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
                         updateHint(rowIdx);
                         renderPreview(rowIdx);
                     });
@@ -1196,7 +959,7 @@ export class DataFrameComponent extends BaseComponent {
         });
     }
     /* ═══════════════════════════════════════════════════
-     * UPDATE & RENDER (modified for better upload styling)
+     * UPDATE & RENDER
      * ═══════════════════════════════════════════════════ */
     update(_prop, _value) { }
     render(targetId) {
@@ -1209,9 +972,7 @@ export class DataFrameComponent extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
-        // ═══════════════════════════════════════════════════
-        // UPLOAD AREA (shown initially, hidden after data loads)
-        // ═══════════════════════════════════════════════════
+        // Upload area
         if (this._inlineUpload) {
             const uploadArea = document.createElement('div');
             uploadArea.className = 'jux-dataframe-upload-area';
@@ -1239,7 +1000,6 @@ export class DataFrameComponent extends BaseComponent {
             uploadContainer.className = 'jux-dataframe-upload';
             uploadContainer.id = `${this._id}-upload-container`;
             uploadArea.appendChild(uploadContainer);
-            // Status bar (for loading/error states only)
             if (this._showStatus) {
                 const statusBar = document.createElement('div');
                 statusBar.className = 'jux-dataframe-status';
@@ -1260,13 +1020,10 @@ export class DataFrameComponent extends BaseComponent {
         else {
             container.appendChild(wrapper);
         }
-        // ═══════════════════════════════════════════════════
-        // DATA CONTAINER (hidden initially, shown after data loads)
-        // ═══════════════════════════════════════════════════
+        // Data container
         const dataContainer = document.createElement('div');
         dataContainer.className = 'jux-dataframe-data';
-        dataContainer.style.display = 'none'; // Hidden until data loads
-        // ✅ Toolbar with settings gear
+        dataContainer.style.display = 'none';
         const toolbar = document.createElement('div');
         toolbar.className = 'jux-dataframe-toolbar';
         const settingsGear = document.createElement('button');
@@ -1278,42 +1035,8 @@ export class DataFrameComponent extends BaseComponent {
         settingsGear.addEventListener('click', () => this._showSettingsModal());
         toolbar.appendChild(settingsGear);
         dataContainer.appendChild(toolbar);
-        // ═══════════════════════════════════════════════════
-        // TABLE CONTAINER (inside data container or collapsible)
-        // ═══════════════════════════════════════════════════
-        let tableContainer;
-        if (this._collapsible) {
-            const details = document.createElement('details');
-            details.className = 'jux-dataframe-details';
-            details.open = !this._collapsed;
-            details.style.display = 'none'; // Hidden until data loads
-            this._detailsElement = details;
-            const summary = document.createElement('summary');
-            summary.className = 'jux-dataframe-summary';
-            const chevron = document.createElement('span');
-            chevron.className = 'jux-dataframe-summary-chevron';
-            chevron.innerHTML = '▶';
-            summary.appendChild(chevron);
-            const textSpan = document.createElement('span');
-            textSpan.className = 'jux-dataframe-summary-text';
-            summary.appendChild(textSpan);
-            details.appendChild(summary);
-            const content = document.createElement('div');
-            content.className = 'jux-dataframe-details-content';
-            details.appendChild(content);
-            dataContainer.appendChild(details);
-            tableContainer = content;
-            details.addEventListener('toggle', () => {
-                this._collapsed = !details.open;
-            });
-        }
-        else {
-            tableContainer = dataContainer;
-        }
         wrapper.appendChild(dataContainer);
-        // ═══════════════════════════════════════════════════
-        // TABLE
-        // ═══════════════════════════════════════════════════
+        // Table
         const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,
@@ -1322,7 +1045,7 @@ export class DataFrameComponent extends BaseComponent {
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });
-        tbl.render(tableContainer);
+        tbl.render(dataContainer);
         this._table = tbl;
         if (this._pendingSource) {
             const fn = this._pendingSource;