juxscript 1.1.227 → 1.1.228

package/lib/components/dataframe.ts

@@ -30,10 +30,6 @@ export interface DataFrameOptions {
     class?: string;
     persistToIndexedDB?: boolean;
     clearStorageOnFileRemove?: boolean;
-    // ✅ Collapsible options
-    collapsible?: boolean;
-    collapsed?: boolean;
-    summaryTemplate?: (df: DataFrame) => string;
 }
 
 type DataFrameState = BaseState & {
@@ -78,11 +74,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _uploadAccept: string = '.csv,.tsv,.txt,.xlsx,.xls';
     private _uploadDescription: string = '';
     private _showUploadIcon: boolean = true;
-    // ✅ Collapsible state
-    private _collapsible: boolean = false;
-    private _collapsed: boolean = false;
-    private _summaryTemplate: ((df: DataFrame) => string) | null = null;
-    private _detailsElement: HTMLDetailsElement | null = null;
     private _settingsModal: Modal | null = null;
 
     constructor(id: string, options: DataFrameOptions = {}) {
@@ -120,10 +111,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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;
     }
 
     protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
@@ -197,18 +184,12 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         return this;
     }
 
-    /**
-     * Set upload button label
-     */
     uploadLabel(label: string): this {
         this._uploadButtonLabel = label;
         if (this._inlineUpload) this._inlineUpload.label = label;
         return this;
     }
 
-    /**
-     * Set upload button icon
-     */
     uploadIcon(icon: string): this {
         this._uploadButtonIcon = icon;
         this._showUploadIcon = !!icon;
@@ -216,54 +197,36 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         return this;
     }
 
-    /**
-     * Set upload button variant (outline, primary, ghost, etc.)
-     */
     uploadVariant(variant: string): this {
         this._uploadButtonVariant = variant;
         return this;
     }
 
-    /**
-     * Set accepted file types
-     */
     uploadAccept(accept: string): this {
         this._uploadAccept = accept;
         if (this._inlineUpload) this._inlineUpload.accept = accept;
         return this;
     }
 
-    /**
-     * Set description text below the upload button
-     */
     uploadDescription(description: string): this {
         this._uploadDescription = description;
         return this;
     }
 
-    /**
-     * Show/hide upload icon
-     */
     showUploadIcon(show: boolean): this {
         this._showUploadIcon = show;
         return this;
     }
 
     /* ═══════════════════════════════════════════════════
-     * STORAGE OPTIONS (fluent API)
+     * STORAGE OPTIONS
      * ═══════════════════════════════════════════════════ */
 
-    /**
-     * Enable/disable IndexedDB persistence (default: false = session only)
-     */
     persistToIndexedDB(enabled: boolean): this {
         this._persistToIndexedDB = enabled;
         return this;
     }
 
-    /**
-     * Clear stored data when file is removed (default: true)
-     */
     clearStorageOnFileRemove(enabled: boolean): this {
         this._clearStorageOnFileRemove = enabled;
         return this;
@@ -273,11 +236,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * CLEAR / RESET
      * ═══════════════════════════════════════════════════ */
 
-    /**
-     * Clear the current data and reset the table
-     */
     async clear(): Promise<this> {
-        // Clear storage if enabled
         if (this._clearStorageOnFileRemove && this._persistToIndexedDB && this._rawFileData?.file) {
             try {
                 const tables = await this._driver.list();
@@ -290,7 +249,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             }
         }
 
-        // Reset state
         this._df = null;
         this._rawFileData = null;
         this._sheets.clear();
@@ -299,27 +257,18 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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();
         }
@@ -394,7 +343,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     }
 
     /* ═══════════════════════════════════════════════════
-     * TABLE OPTIONS (fluent, pre-render)
+     * TABLE OPTIONS
      * ═══════════════════════════════════════════════════ */
 
     striped(v: boolean): this { this._tableOptions.striped = v; return this; }
@@ -408,85 +357,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     maxFileSize(mb: number): this { this._maxFileSize = mb; return this; }
 
     /* ═══════════════════════════════════════════════════
-     * COLLAPSIBLE OPTIONS (fluent API)
-     * ═══════════════════════════════════════════════════ */
-
-    /**
-     * Enable/disable collapsible mode
-     */
-    collapsible(enabled: boolean): this {
-        this._collapsible = enabled;
-        return this;
-    }
-
-    /**
-     * Set initial collapsed state (true = collapsed, false = expanded)
-     */
-    collapsed(value: boolean): this {
-        this._collapsed = value;
-        if (this._detailsElement) {
-            this._detailsElement.open = !value;
-        }
-        return this;
-    }
-
-    /**
-     * Expand the details (show table)
-     */
-    expand(): this {
-        this._collapsed = false;
-        if (this._detailsElement) {
-            this._detailsElement.open = true;
-        }
-        return this;
-    }
-
-    /**
-     * Collapse the details (hide table)
-     */
-    collapse(): this {
-        this._collapsed = true;
-        if (this._detailsElement) {
-            this._detailsElement.open = false;
-        }
-        return this;
-    }
-
-    /**
-     * Check if collapsible mode is enabled
-     */
-    isCollapsible(): boolean {
-        return this._collapsible;
-    }
-
-    /**
-     * Toggle collapsed state
-     */
-    toggle(): this {
-        this._collapsed = !this._collapsed;
-        if (this._detailsElement) {
-            this._detailsElement.open = !this._collapsed;
-        }
-        return this;
-    }
-
-    /**
-     * Set custom summary template
-     */
-    summaryTemplate(fn: (df: DataFrame) => string): this {
-        this._summaryTemplate = fn;
-        return this;
-    }
-
-    /**
-     * Get current collapsed state
-     */
-    isCollapsed(): boolean {
-        return this._collapsed;
-    }
-
-    /* ═══════════════════════════════════════════════════
-     * FILE HANDLING (modified to use storage options)
+     * FILE HANDLING
      * ═══════════════════════════════════════════════════ */
 
     private async _handleFile(file: File): Promise<void> {
@@ -523,7 +394,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     return;
                 }
 
-                // ✅ Only store if persistence is enabled
                 if (this._persistToIndexedDB) {
                     await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
                 }
@@ -542,7 +412,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     hasHeader: true
                 });
 
-                // ✅ Only store if persistence is enabled
                 if (this._persistToIndexedDB) {
                     await this._driver.store(file.name, df, { source: file.name });
                 }
@@ -578,8 +447,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         });
 
         const sheetNames = Object.keys(sheets);
-
-        // Sanitize sheet names for use as DOM IDs
         const sanitizeId = (name: string) => name.replace(/[^a-zA-Z0-9_-]/g, '_');
 
         const tabDefs = sheetNames.map(name => ({
@@ -593,7 +460,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             activeTab: sanitizeId(sheetNames[0])
         });
 
-        // Map sanitized IDs back to original sheet names
         const idToSheetName = new Map<string, string>();
         sheetNames.forEach(name => idToSheetName.set(sanitizeId(name), name));
 
@@ -602,9 +468,19 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             this._df = this._sheets.get(originalName) || null;
         });
 
+        const dataContainer = wrapper.querySelector('.jux-dataframe-data') as HTMLElement;
+        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);
 
@@ -612,13 +488,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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,
@@ -647,6 +516,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             'success'
         );
 
+        this._showDataView();
+
         this._df = sheets[sheetNames[0]];
         this._triggerCallback('load', this._df, null, this);
     }
@@ -659,7 +530,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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';
@@ -679,7 +549,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             span.textContent = text;
             el.appendChild(span);
         } else {
-            // ✅ Hide status after successful load - table speaks for itself
             el.style.display = 'none';
         }
     }
@@ -692,7 +561,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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 => {
@@ -715,67 +583,43 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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
-     */
     private _showDataView(): void {
         const wrapper = document.getElementById(this._id);
         if (!wrapper) return;
 
-        // Hide upload area
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area') as HTMLElement;
         if (uploadArea) {
             uploadArea.style.display = 'none';
         }
 
-        // Show data container (table + toolbar)
         const dataContainer = wrapper.querySelector('.jux-dataframe-data') as HTMLElement;
         if (dataContainer) {
             dataContainer.style.display = '';
         }
 
-        // Update settings gear with file info
         this._updateSettingsGear();
     }
 
-    /**
-     * Hide data view, show upload area
-     */
     private _hideDataView(): void {
         const wrapper = document.getElementById(this._id);
         if (!wrapper) return;
 
-        // Show upload area
         const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area') as HTMLElement;
         if (uploadArea) {
             uploadArea.style.display = '';
         }
 
-        // Hide data container
         const dataContainer = wrapper.querySelector('.jux-dataframe-data') as HTMLElement;
         if (dataContainer) {
             dataContainer.style.display = 'none';
         }
     }
 
-    /**
-     * Update the settings gear tooltip/info
-     */
     private _updateSettingsGear(): void {
         const gear = document.getElementById(`${this._id}-settings-gear`);
         if (!gear || !this._df) return;
@@ -791,9 +635,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         }
     }
 
-    /**
-     * Show the unified settings modal
-     */
     private _showSettingsModal(): void {
         this._cleanupReshapeModal();
 
@@ -812,7 +653,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         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">
@@ -820,8 +660,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         ${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">
@@ -831,7 +669,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 </div>
         `;
 
-        // Import Settings button (only if we have raw file data)
         if (this._rawFileData) {
             contentHTML += `
                 <div class="jux-dataframe-settings-section">
@@ -845,9 +682,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             `;
         }
 
-        contentHTML += `
-            </div>
-        `;
+        contentHTML += `</div>`;
 
         this._settingsModal
             .content(contentHTML)
@@ -870,7 +705,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this._settingsModal.render(document.body);
         this._settingsModal.open();
 
-        // Wire up import settings button
         requestAnimationFrame(() => {
             const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
             if (adjustBtn) {
@@ -882,82 +716,10 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         });
     }
 
-    /**
-     * Update the collapsible summary text
-     */
-    private _updateSummary(isMalformed?: boolean): void {
-        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') as HTMLButtonElement;
-
-        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
      * ═══════════════════════════════════════════════════ */
 
-    private _appendSettingsButton(label: string, variant: string): void {
-        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);
-    }
-
     private _detectMalformedData(df: DataFrame): boolean {
         const columns = df.columns;
         const rows = df.toRows();
@@ -1016,11 +778,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         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.
-     */
     private _buildClickablePreviewHTML(
         rawRows: { sheetRow: number; values: any[] }[],
         selectedSheetRow: number
@@ -1041,7 +798,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
             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>`;
@@ -1050,7 +806,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             }
             html += '</td>';
 
-            // Show first 6 columns
             const displayCols = values.slice(0, 6);
             displayCols.forEach(val => {
                 const displayVal = val != null ? String(val).substring(0, 20) : '';
@@ -1064,7 +819,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 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>';
@@ -1085,23 +839,17 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         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;
@@ -1142,8 +890,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                         const input = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
                         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');
 
@@ -1208,7 +954,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 tr.addEventListener('click', () => {
                     const rowIdx = parseInt((tr as HTMLElement).dataset.sheetRow!);
                     hiddenInput.value = String(rowIdx);
-                    console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
                     updateHint(rowIdx);
                     renderPreview(rowIdx);
                 });
@@ -1228,7 +973,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const text = this._rawFileData.text;
         const detected = (this._driver as any)._detectDelimiter(text);
 
-        // Parse raw lines
         const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
         const rawRows: { sheetRow: number; values: any[] }[] = [];
         const maxPreviewRows = Math.min(lines.length, 15);
@@ -1242,7 +986,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             rawRows.push({ sheetRow: i, values });
         }
 
-        // Auto-detect header row
         let selectedRow = 0;
         for (const { sheetRow, values } of rawRows) {
             const nonEmpty = values.filter((v: string) => v.trim() !== '');
@@ -1367,7 +1110,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     tr.addEventListener('click', () => {
                         const rowIdx = parseInt((tr as HTMLElement).dataset.sheetRow!);
                         hiddenInput.value = String(rowIdx);
-                        console.log(`[DataFrame Preview] Clicked sheetRow=${rowIdx}`);
                         updateHint(rowIdx);
                         renderPreview(rowIdx);
                     });
@@ -1390,7 +1132,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     }
 
     /* ═══════════════════════════════════════════════════
-     * UPDATE & RENDER (modified for better upload styling)
+     * UPDATE & RENDER
      * ═══════════════════════════════════════════════════ */
 
     update(_prop: string, _value: any): void { }
@@ -1405,9 +1147,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         if (className) 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';
@@ -1440,7 +1180,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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';
@@ -1463,14 +1202,11 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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
+        dataContainer.style.display = 'none';
 
-        // ✅ Toolbar with settings gear
         const toolbar = document.createElement('div');
         toolbar.className = 'jux-dataframe-toolbar';
 
@@ -1484,52 +1220,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         toolbar.appendChild(settingsGear);
 
         dataContainer.appendChild(toolbar);
-
-        // ═══════════════════════════════════════════════════
-        // TABLE CONTAINER (inside data container or collapsible)
-        // ═══════════════════════════════════════════════════
-        let tableContainer: HTMLElement;
-
-        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,
@@ -1538,7 +1231,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });
-        tbl.render(tableContainer);
+        tbl.render(dataContainer);
         this._table = tbl;
 
         if (this._pendingSource) {