juxscript 1.1.225 → 1.1.227

package/lib/components/dataframe.d.ts

@@ -64,6 +64,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _collapsed;
     private _summaryTemplate;
     private _detailsElement;
+    private _settingsModal;
     constructor(id: string, options?: DataFrameOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -172,7 +173,23 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _updateStatus;
     private _setDataFrame;
     /**
-     * Update the collapsible summary text and add settings button
+     * Show the data view (table + settings gear), hide upload area
+     */
+    private _showDataView;
+    /**
+     * Hide data view, show upload area
+     */
+    private _hideDataView;
+    /**
+     * Update the settings gear tooltip/info
+     */
+    private _updateSettingsGear;
+    /**
+     * Show the unified settings modal
+     */
+    private _showSettingsModal;
+    /**
+     * Update the collapsible summary text
      */
     private _updateSummary;
     private _appendSettingsButton;

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

@@ -52,6 +52,7 @@ export class DataFrameComponent extends BaseComponent {
         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;
         this._icon = options.icon ?? '';
@@ -253,17 +254,15 @@ export class DataFrameComponent extends BaseComponent {
             if (existingTabs)
                 existingTabs.remove();
         }
-        // ✅ Hide details element when cleared
+        // ✅ Hide data view, show upload
+        this._hideDataView();
+        // ✅ Hide collapsible details
         if (this._collapsible && this._detailsElement) {
             this._detailsElement.style.display = 'none';
         }
-        // ✅ Hide status when cleared (for inline upload mode)
-        const statusEl = document.getElementById(`${this._id}-status`);
-        if (statusEl && this._inlineUpload) {
-            statusEl.style.display = 'none';
-        }
-        else if (statusEl) {
-            this._updateStatus('No data loaded.', 'empty');
+        // ✅ Clear file from upload component
+        if (this._uploadRef) {
+            this._uploadRef.clear();
         }
         return this;
     }
@@ -543,23 +542,28 @@ export class DataFrameComponent extends BaseComponent {
         const el = document.getElementById(`${this._id}-status`);
         if (!el)
             return;
-        // Always show status (inline with upload button)
-        el.style.display = '';
-        el.className = 'jux-dataframe-status';
-        if (type)
+        // ✅ Only show status during loading/error states
+        if (type === 'loading' || type === 'error') {
+            el.style.display = '';
+            el.className = 'jux-dataframe-status';
             el.classList.add(`jux-dataframe-status-${type}`);
-        el.innerHTML = '';
-        if (this._icon && (type === 'success' || type === 'warning')) {
-            const iconEl = renderIcon(this._icon);
-            iconEl.style.width = '16px';
-            iconEl.style.height = '16px';
-            iconEl.style.marginRight = '6px';
-            iconEl.style.verticalAlign = 'middle';
-            el.appendChild(iconEl);
+            el.innerHTML = '';
+            if (this._icon && type === 'error') {
+                const iconEl = renderIcon(this._icon);
+                iconEl.style.width = '16px';
+                iconEl.style.height = '16px';
+                iconEl.style.marginRight = '6px';
+                iconEl.style.verticalAlign = 'middle';
+                el.appendChild(iconEl);
+            }
+            const span = document.createElement('span');
+            span.textContent = text;
+            el.appendChild(span);
+        }
+        else {
+            // ✅ Hide status after successful load - table speaks for itself
+            el.style.display = 'none';
         }
-        const span = document.createElement('span');
-        span.textContent = text;
-        el.appendChild(span);
     }
     _setDataFrame(df, sourceName) {
         this._df = df;
@@ -589,36 +593,155 @@ export class DataFrameComponent extends BaseComponent {
             const columnDefs = this._df.columns.map(col => ({ key: col, label: col }));
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
-        const isMalformed = this._detectMalformedData(this._df);
-        // ✅ Show the details element now that data is loaded
+        // ✅ 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(isMalformed);
+            this._updateSummary();
         }
-        // ✅ Update status (for non-collapsible mode)
-        if (!this._collapsible) {
-            if (isMalformed && this._rawFileData) {
-                this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'warning');
-                this._appendSettingsButton('Fix Import Settings', 'warning');
-            }
-            else {
-                this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-                if (this._rawFileData) {
-                    this._appendSettingsButton('Import Settings', 'ghost');
-                }
-            }
+        // ✅ 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)
+            return;
+        const isMalformed = this._detectMalformedData(this._df);
+        if (isMalformed) {
+            gear.classList.add('jux-dataframe-gear-warning');
+            gear.title = `${this.state.sourceName} — May need reformatting`;
         }
         else {
-            // ✅ For collapsible mode, hide the status bar
-            const statusEl = document.getElementById(`${this._id}-status`);
-            if (statusEl) {
-                statusEl.style.display = 'none';
-            }
+            gear.classList.remove('jux-dataframe-gear-warning');
+            gear.title = `${this.state.sourceName} — ${this._df.height} rows × ${this._df.width} cols`;
         }
-        this._triggerCallback('load', this._df, null, this);
     }
     /**
-     * Update the collapsible summary text and add settings button
+     * Show the unified settings modal
+     */
+    _showSettingsModal() {
+        this._cleanupReshapeModal();
+        const fileInfo = this._rawFileData?.file;
+        const isMalformed = this._df ? this._detectMalformedData(this._df) : false;
+        this._settingsModal = new Modal(`${this._id}-settings-modal`, {
+            title: 'Data Settings',
+            size: 'medium',
+            close: true,
+            backdropClose: true
+        });
+        const fileSizeKB = fileInfo ? (fileInfo.size / 1024).toFixed(1) : '0';
+        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">
+                        <strong>${this._escapeHtml(fileName)}</strong>
+                        ${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">
+                        ${this._df ? `${this._df.height} rows × ${this._df.width} columns` : 'No data loaded'}
+                        ${isMalformed ? '<span style="color: hsl(var(--warning)); margin-left: 8px;">⚠️ May need reformatting</span>' : ''}
+                    </div>
+                </div>
+        `;
+        // Import Settings button (only if we have raw file data)
+        if (this._rawFileData) {
+            contentHTML += `
+                <div class="jux-dataframe-settings-section">
+                    <div class="jux-dataframe-settings-label">Import</div>
+                    <div class="jux-dataframe-settings-value">
+                        <button id="${this._id}-adjust-import" class="jux-button jux-button-outline jux-button-sm">
+                            ⚙️ Adjust Header Row / Delimiter
+                        </button>
+                    </div>
+                </div>
+            `;
+        }
+        contentHTML += `
+            </div>
+        `;
+        this._settingsModal
+            .content(contentHTML)
+            .actions([
+            {
+                label: 'Remove Data',
+                variant: 'secondary',
+                click: async () => {
+                    await this.clear();
+                    this._settingsModal.closeModal();
+                }
+            },
+            {
+                label: 'Done',
+                variant: 'primary',
+                click: () => this._settingsModal.closeModal()
+            }
+        ]);
+        this._settingsModal.render(document.body);
+        this._settingsModal.open();
+        // Wire up import settings button
+        requestAnimationFrame(() => {
+            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
+            if (adjustBtn) {
+                adjustBtn.addEventListener('click', () => {
+                    this._settingsModal.closeModal();
+                    this._showReshapeModal();
+                });
+            }
+        });
+    }
+    /**
+     * Update the collapsible summary text
      */
     _updateSummary(isMalformed) {
         if (!this._collapsible || !this._detailsElement)
@@ -626,9 +749,7 @@ export class DataFrameComponent extends BaseComponent {
         const summaryEl = this._detailsElement.querySelector('.jux-dataframe-summary');
         if (!summaryEl)
             return;
-        // Get or detect malformed status
         const malformed = isMalformed ?? (this._df ? this._detectMalformedData(this._df) : false);
-        // Update text
         const summaryTextEl = summaryEl.querySelector('.jux-dataframe-summary-text');
         if (summaryTextEl) {
             if (!this._df) {
@@ -642,32 +763,29 @@ export class DataFrameComponent extends BaseComponent {
                 summaryTextEl.textContent = `${this.state.sourceName || 'Data'} — ${this._df.height} rows × ${this._df.width} cols${suffix}`;
             }
         }
-        // ✅ Add settings button to summary if we have raw file data
-        let settingsBtn = summaryEl.querySelector('.jux-dataframe-summary-settings');
-        if (this._rawFileData && this._df) {
-            if (!settingsBtn) {
-                settingsBtn = document.createElement('button');
-                settingsBtn.className = 'jux-dataframe-summary-settings';
-                settingsBtn.type = 'button';
-                settingsBtn.addEventListener('click', (e) => {
-                    e.stopPropagation(); // Don't toggle the details
-                    this._showReshapeModal();
+        // ✅ 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(settingsBtn);
+                summaryEl.appendChild(gearBtn);
             }
-            // Update button text/style based on malformed status
             if (malformed) {
-                settingsBtn.textContent = '⚙️ Fix Settings';
-                settingsBtn.className = 'jux-dataframe-summary-settings jux-dataframe-summary-settings-warning';
+                gearBtn.classList.add('jux-dataframe-gear-warning');
             }
             else {
-                settingsBtn.textContent = '⚙️ Settings';
-                settingsBtn.className = 'jux-dataframe-summary-settings';
+                gearBtn.classList.remove('jux-dataframe-gear-warning');
             }
         }
-        else if (settingsBtn) {
-            // Remove settings button if no raw file data
-            settingsBtn.remove();
+        else if (gearBtn) {
+            gearBtn.remove();
         }
     }
     /* ═══════════════════════════════════════════════════
@@ -817,8 +935,8 @@ export class DataFrameComponent extends BaseComponent {
             if (nonEmpty.length < values.length * 0.5)
                 continue;
             const nonNumeric = nonEmpty.filter(v => {
-                const str = String(v).trim();
-                return isNaN(Number(str)) && str !== '';
+                const trimmed = v.trim();
+                return isNaN(Number(trimmed)) && trimmed !== '';
             }).length;
             if (nonNumeric >= nonEmpty.length * 0.7) {
                 selectedSheetRow = sheetRow;
@@ -1091,8 +1209,10 @@ export class DataFrameComponent extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
+        // ═══════════════════════════════════════════════════
+        // UPLOAD AREA (shown initially, hidden after data loads)
+        // ═══════════════════════════════════════════════════
         if (this._inlineUpload) {
-            // ✅ NEW: Enhanced upload area with better styling
             const uploadArea = document.createElement('div');
             uploadArea.className = 'jux-dataframe-upload-area';
             uploadArea.id = `${this._id}-upload-area`;
@@ -1106,32 +1226,27 @@ export class DataFrameComponent extends BaseComponent {
             }
             const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
             this._uploadRef = upload;
-            // ✅ Handle file change AND file clear
             this._pendingSource = async () => {
                 upload.bind('change', async (files) => {
                     if (!files || files.length === 0) {
-                        // File was cleared - reset the table
                         await this.clear();
                         return;
                     }
                     await this._handleFile(files[0]);
                 });
             };
-            const uploadRow = document.createElement('div');
-            uploadRow.className = 'jux-dataframe-upload-row';
             const uploadContainer = document.createElement('div');
             uploadContainer.className = 'jux-dataframe-upload';
             uploadContainer.id = `${this._id}-upload-container`;
-            uploadRow.appendChild(uploadContainer);
-            // ✅ Status bar INLINE in the same row
+            uploadArea.appendChild(uploadContainer);
+            // Status bar (for loading/error states only)
             if (this._showStatus) {
                 const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status jux-dataframe-status-inline';
+                statusBar.className = 'jux-dataframe-status';
                 statusBar.id = `${this._id}-status`;
-                statusBar.style.display = 'none'; // Hidden until needed
-                uploadRow.appendChild(statusBar);
+                statusBar.style.display = 'none';
+                uploadArea.appendChild(statusBar);
             }
-            uploadArea.appendChild(uploadRow);
             if (this._uploadDescription) {
                 const descEl = document.createElement('div');
                 descEl.className = 'jux-dataframe-upload-description';
@@ -1144,16 +1259,28 @@ export class DataFrameComponent extends BaseComponent {
         }
         else {
             container.appendChild(wrapper);
-            // Status bar for non-upload mode
-            if (this._showStatus) {
-                const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status jux-dataframe-status-empty';
-                statusBar.id = `${this._id}-status`;
-                statusBar.textContent = 'No data loaded.';
-                wrapper.appendChild(statusBar);
-            }
         }
-        // ✅ Collapsible details wrapper - HIDDEN until data loads
+        // ═══════════════════════════════════════════════════
+        // DATA CONTAINER (hidden initially, shown after data loads)
+        // ═══════════════════════════════════════════════════
+        const dataContainer = document.createElement('div');
+        dataContainer.className = 'jux-dataframe-data';
+        dataContainer.style.display = 'none'; // Hidden until data loads
+        // ✅ Toolbar with settings gear
+        const toolbar = document.createElement('div');
+        toolbar.className = 'jux-dataframe-toolbar';
+        const settingsGear = document.createElement('button');
+        settingsGear.className = 'jux-dataframe-gear';
+        settingsGear.id = `${this._id}-settings-gear`;
+        settingsGear.type = 'button';
+        settingsGear.innerHTML = '⚙️';
+        settingsGear.title = 'Data Settings';
+        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');
@@ -1174,15 +1301,19 @@ export class DataFrameComponent extends BaseComponent {
             const content = document.createElement('div');
             content.className = 'jux-dataframe-details-content';
             details.appendChild(content);
-            wrapper.appendChild(details);
+            dataContainer.appendChild(details);
             tableContainer = content;
             details.addEventListener('toggle', () => {
                 this._collapsed = !details.open;
             });
         }
         else {
-            tableContainer = wrapper;
+            tableContainer = dataContainer;
         }
+        wrapper.appendChild(dataContainer);
+        // ═══════════════════════════════════════════════════
+        // TABLE
+        // ═══════════════════════════════════════════════════
         const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,

package/lib/components/dataframe.ts

@@ -83,6 +83,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     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 = {}) {
         super(id, {
@@ -310,17 +311,17 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             if (existingTabs) existingTabs.remove();
         }
 
-        // ✅ Hide details element when cleared
+        // ✅ Hide data view, show upload
+        this._hideDataView();
+
+        // ✅ Hide collapsible details
         if (this._collapsible && this._detailsElement) {
             this._detailsElement.style.display = 'none';
         }
 
-        // ✅ Hide status when cleared (for inline upload mode)
-        const statusEl = document.getElementById(`${this._id}-status`);
-        if (statusEl && this._inlineUpload) {
-            statusEl.style.display = 'none';
-        } else if (statusEl) {
-            this._updateStatus('No data loaded.', 'empty');
+        // ✅ Clear file from upload component
+        if (this._uploadRef) {
+            this._uploadRef.clear();
         }
 
         return this;
@@ -658,25 +659,29 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const el = document.getElementById(`${this._id}-status`);
         if (!el) return;
 
-        // Always show status (inline with upload button)
-        el.style.display = '';
-        el.className = 'jux-dataframe-status';
-        if (type) el.classList.add(`jux-dataframe-status-${type}`);
-
-        el.innerHTML = '';
+        // ✅ Only show status during loading/error states
+        if (type === 'loading' || type === 'error') {
+            el.style.display = '';
+            el.className = 'jux-dataframe-status';
+            el.classList.add(`jux-dataframe-status-${type}`);
+            el.innerHTML = '';
+
+            if (this._icon && type === 'error') {
+                const iconEl = renderIcon(this._icon);
+                iconEl.style.width = '16px';
+                iconEl.style.height = '16px';
+                iconEl.style.marginRight = '6px';
+                iconEl.style.verticalAlign = 'middle';
+                el.appendChild(iconEl);
+            }
 
-        if (this._icon && (type === 'success' || type === 'warning')) {
-            const iconEl = renderIcon(this._icon);
-            iconEl.style.width = '16px';
-            iconEl.style.height = '16px';
-            iconEl.style.marginRight = '6px';
-            iconEl.style.verticalAlign = 'middle';
-            el.appendChild(iconEl);
+            const span = document.createElement('span');
+            span.textContent = text;
+            el.appendChild(span);
+        } else {
+            // ✅ Hide status after successful load - table speaks for itself
+            el.style.display = 'none';
         }
-
-        const span = document.createElement('span');
-        span.textContent = text;
-        el.appendChild(span);
     }
 
     private _setDataFrame(df: DataFrame, sourceName: string): void {
@@ -710,44 +715,175 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
 
-        const isMalformed = this._detectMalformedData(this._df!);
+        // ✅ Show the table container, hide upload area
+        this._showDataView();
 
-        // ✅ Show the details element now that data is loaded
+        // ✅ Update collapsible summary if enabled
         if (this._collapsible && this._detailsElement) {
             this._detailsElement.style.display = '';
-            this._updateSummary(isMalformed);
+            this._updateSummary();
         }
 
-        // ✅ Update status (for non-collapsible mode)
-        if (!this._collapsible) {
-            if (isMalformed && this._rawFileData) {
-                this._updateStatus(
-                    `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols`,
-                    'warning'
-                );
-                this._appendSettingsButton('Fix Import Settings', 'warning');
-            } else {
-                this._updateStatus(
-                    `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols`,
-                    'success'
-                );
-                if (this._rawFileData) {
-                    this._appendSettingsButton('Import Settings', 'ghost');
-                }
-            }
+        // ✅ 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;
+
+        const isMalformed = this._detectMalformedData(this._df);
+
+        if (isMalformed) {
+            gear.classList.add('jux-dataframe-gear-warning');
+            gear.title = `${this.state.sourceName} — May need reformatting`;
         } else {
-            // ✅ For collapsible mode, hide the status bar
-            const statusEl = document.getElementById(`${this._id}-status`);
-            if (statusEl) {
-                statusEl.style.display = 'none';
-            }
+            gear.classList.remove('jux-dataframe-gear-warning');
+            gear.title = `${this.state.sourceName} — ${this._df.height} rows × ${this._df.width} cols`;
         }
+    }
 
-        this._triggerCallback('load', this._df, null, this);
+    /**
+     * Show the unified settings modal
+     */
+    private _showSettingsModal(): void {
+        this._cleanupReshapeModal();
+
+        const fileInfo = this._rawFileData?.file;
+        const isMalformed = this._df ? this._detectMalformedData(this._df) : false;
+
+        this._settingsModal = new Modal(`${this._id}-settings-modal`, {
+            title: 'Data Settings',
+            size: 'medium',
+            close: true,
+            backdropClose: true
+        });
+
+        const fileSizeKB = fileInfo ? (fileInfo.size / 1024).toFixed(1) : '0';
+        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">
+                        <strong>${this._escapeHtml(fileName)}</strong>
+                        ${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">
+                        ${this._df ? `${this._df.height} rows × ${this._df.width} columns` : 'No data loaded'}
+                        ${isMalformed ? '<span style="color: hsl(var(--warning)); margin-left: 8px;">⚠️ May need reformatting</span>' : ''}
+                    </div>
+                </div>
+        `;
+
+        // Import Settings button (only if we have raw file data)
+        if (this._rawFileData) {
+            contentHTML += `
+                <div class="jux-dataframe-settings-section">
+                    <div class="jux-dataframe-settings-label">Import</div>
+                    <div class="jux-dataframe-settings-value">
+                        <button id="${this._id}-adjust-import" class="jux-button jux-button-outline jux-button-sm">
+                            ⚙️ Adjust Header Row / Delimiter
+                        </button>
+                    </div>
+                </div>
+            `;
+        }
+
+        contentHTML += `
+            </div>
+        `;
+
+        this._settingsModal
+            .content(contentHTML)
+            .actions([
+                {
+                    label: 'Remove Data',
+                    variant: 'secondary',
+                    click: async () => {
+                        await this.clear();
+                        this._settingsModal!.closeModal();
+                    }
+                },
+                {
+                    label: 'Done',
+                    variant: 'primary',
+                    click: () => this._settingsModal!.closeModal()
+                }
+            ]);
+
+        this._settingsModal.render(document.body);
+        this._settingsModal.open();
+
+        // Wire up import settings button
+        requestAnimationFrame(() => {
+            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
+            if (adjustBtn) {
+                adjustBtn.addEventListener('click', () => {
+                    this._settingsModal!.closeModal();
+                    this._showReshapeModal();
+                });
+            }
+        });
     }
 
     /**
-     * Update the collapsible summary text and add settings button
+     * Update the collapsible summary text
      */
     private _updateSummary(isMalformed?: boolean): void {
         if (!this._collapsible || !this._detailsElement) return;
@@ -755,10 +891,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         const summaryEl = this._detailsElement.querySelector('.jux-dataframe-summary');
         if (!summaryEl) return;
 
-        // Get or detect malformed status
         const malformed = isMalformed ?? (this._df ? this._detectMalformedData(this._df) : false);
 
-        // Update text
         const summaryTextEl = summaryEl.querySelector('.jux-dataframe-summary-text');
         if (summaryTextEl) {
             if (!this._df) {
@@ -771,32 +905,29 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             }
         }
 
-        // ✅ Add settings button to summary if we have raw file data
-        let settingsBtn = summaryEl.querySelector('.jux-dataframe-summary-settings') as HTMLButtonElement;
-
-        if (this._rawFileData && this._df) {
-            if (!settingsBtn) {
-                settingsBtn = document.createElement('button');
-                settingsBtn.className = 'jux-dataframe-summary-settings';
-                settingsBtn.type = 'button';
-                settingsBtn.addEventListener('click', (e) => {
-                    e.stopPropagation(); // Don't toggle the details
-                    this._showReshapeModal();
+        // ✅ 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(settingsBtn);
+                summaryEl.appendChild(gearBtn);
             }
 
-            // Update button text/style based on malformed status
             if (malformed) {
-                settingsBtn.textContent = '⚙️ Fix Settings';
-                settingsBtn.className = 'jux-dataframe-summary-settings jux-dataframe-summary-settings-warning';
+                gearBtn.classList.add('jux-dataframe-gear-warning');
             } else {
-                settingsBtn.textContent = '⚙️ Settings';
-                settingsBtn.className = 'jux-dataframe-summary-settings';
+                gearBtn.classList.remove('jux-dataframe-gear-warning');
             }
-        } else if (settingsBtn) {
-            // Remove settings button if no raw file data
-            settingsBtn.remove();
+        } else if (gearBtn) {
+            gearBtn.remove();
         }
     }
 
@@ -969,8 +1100,8 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             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 str = String(v).trim();
-                return isNaN(Number(str)) && str !== '';
+                const trimmed = v.trim();
+                return isNaN(Number(trimmed)) && trimmed !== '';
             }).length;
             if (nonNumeric >= nonEmpty.length * 0.7) {
                 selectedSheetRow = sheetRow;
@@ -1274,8 +1405,10 @@ 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)
+        // ═══════════════════════════════════════════════════
         if (this._inlineUpload) {
-            // ✅ NEW: Enhanced upload area with better styling
             const uploadArea = document.createElement('div');
             uploadArea.className = 'jux-dataframe-upload-area';
             uploadArea.id = `${this._id}-upload-area`;
@@ -1292,11 +1425,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
             this._uploadRef = upload;
 
-            // ✅ Handle file change AND file clear
             this._pendingSource = async () => {
                 upload.bind('change', async (files: File[]) => {
                     if (!files || files.length === 0) {
-                        // File was cleared - reset the table
                         await this.clear();
                         return;
                     }
@@ -1304,25 +1435,20 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 });
             };
 
-            const uploadRow = document.createElement('div');
-            uploadRow.className = 'jux-dataframe-upload-row';
-
             const uploadContainer = document.createElement('div');
             uploadContainer.className = 'jux-dataframe-upload';
             uploadContainer.id = `${this._id}-upload-container`;
-            uploadRow.appendChild(uploadContainer);
+            uploadArea.appendChild(uploadContainer);
 
-            // ✅ Status bar INLINE in the same row
+            // Status bar (for loading/error states only)
             if (this._showStatus) {
                 const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status jux-dataframe-status-inline';
+                statusBar.className = 'jux-dataframe-status';
                 statusBar.id = `${this._id}-status`;
-                statusBar.style.display = 'none'; // Hidden until needed
-                uploadRow.appendChild(statusBar);
+                statusBar.style.display = 'none';
+                uploadArea.appendChild(statusBar);
             }
 
-            uploadArea.appendChild(uploadRow);
-
             if (this._uploadDescription) {
                 const descEl = document.createElement('div');
                 descEl.className = 'jux-dataframe-upload-description';
@@ -1335,18 +1461,33 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             upload.render(uploadContainer);
         } else {
             container.appendChild(wrapper);
-
-            // Status bar for non-upload mode
-            if (this._showStatus) {
-                const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status jux-dataframe-status-empty';
-                statusBar.id = `${this._id}-status`;
-                statusBar.textContent = 'No data loaded.';
-                wrapper.appendChild(statusBar);
-            }
         }
 
-        // ✅ Collapsible details wrapper - HIDDEN until data loads
+        // ═══════════════════════════════════════════════════
+        // DATA CONTAINER (hidden initially, shown after data loads)
+        // ═══════════════════════════════════════════════════
+        const dataContainer = document.createElement('div');
+        dataContainer.className = 'jux-dataframe-data';
+        dataContainer.style.display = 'none'; // Hidden until data loads
+
+        // ✅ Toolbar with settings gear
+        const toolbar = document.createElement('div');
+        toolbar.className = 'jux-dataframe-toolbar';
+
+        const settingsGear = document.createElement('button');
+        settingsGear.className = 'jux-dataframe-gear';
+        settingsGear.id = `${this._id}-settings-gear`;
+        settingsGear.type = 'button';
+        settingsGear.innerHTML = '⚙️';
+        settingsGear.title = 'Data Settings';
+        settingsGear.addEventListener('click', () => this._showSettingsModal());
+        toolbar.appendChild(settingsGear);
+
+        dataContainer.appendChild(toolbar);
+
+        // ═══════════════════════════════════════════════════
+        // TABLE CONTAINER (inside data container or collapsible)
+        // ═══════════════════════════════════════════════════
         let tableContainer: HTMLElement;
 
         if (this._collapsible) {
@@ -1374,16 +1515,21 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             content.className = 'jux-dataframe-details-content';
             details.appendChild(content);
 
-            wrapper.appendChild(details);
+            dataContainer.appendChild(details);
             tableContainer = content;
 
             details.addEventListener('toggle', () => {
                 this._collapsed = !details.open;
             });
         } else {
-            tableContainer = wrapper;
+            tableContainer = dataContainer;
         }
 
+        wrapper.appendChild(dataContainer);
+
+        // ═══════════════════════════════════════════════════
+        // TABLE
+        // ═══════════════════════════════════════════════════
         const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,

package/lib/styles/shadcn.css

@@ -186,22 +186,20 @@ p { line-height: 1.75; color: hsl(var(--foreground)); }
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
-  padding: 1rem;
-  background: hsl(var(--muted) / 0.2);
-  border: 1px dashed hsl(var(--border));
-  border-radius: var(--radius);
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  border-radius: 0;
   transition: all 0.2s;
 }
 
 .jux-dataframe-upload-area:hover {
-  background: hsl(var(--muted) / 0.3);
-  border-color: hsl(var(--muted-foreground) / 0.3);
+  background: transparent;
 }
 
 .jux-dataframe-upload-area:has(.jux-fileupload-filelist:not(:empty)) {
-  background: hsl(var(--success) / 0.05);
-  border-color: hsl(var(--success) / 0.2);
-  border-style: solid;
+  background: transparent;
+  border: none;
 }
 
 .jux-dataframe-upload {
@@ -954,4 +952,96 @@ code {
 .jux-dataframe-details-content .jux-table-wrapper {
   border: none;
   border-radius: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * DATAFRAME DATA VIEW (Post-upload clean UI)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-dataframe-data {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.jux-dataframe-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.25rem 0;
+}
+
+.jux-dataframe-gear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 1rem;
+  color: hsl(var(--muted-foreground));
+  transition: all 0.15s;
+}
+
+.jux-dataframe-gear:hover {
+  background: hsl(var(--muted) / 0.5);
+  color: hsl(var(--foreground));
+}
+
+.jux-dataframe-gear-warning {
+  color: hsl(var(--warning));
+}
+
+.jux-dataframe-gear-warning:hover {
+  background: hsl(var(--warning) / 0.1);
+}
+
+/* Settings modal content */
+.jux-dataframe-settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.jux-dataframe-settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.jux-dataframe-settings-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: hsl(var(--muted-foreground));
+}
+
+.jux-dataframe-settings-value {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+
+/* Summary gear in collapsible mode */
+.jux-dataframe-summary-gear {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: hsl(var(--muted-foreground));
+  transition: all 0.15s;
+  margin-left: auto;
+}
+
+.jux-dataframe-summary-gear:hover {
+  color: hsl(var(--foreground));
+}
+
+.jux-dataframe-summary-gear.jux-dataframe-gear-warning {
+  color: hsl(var(--warning));
 }

package/package.json

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