juxscript 1.1.224 → 1.1.226

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,13 +173,26 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _updateStatus;
     private _setDataFrame;
     /**
-     * Append settings button to status bar
+     * Show the data view (table + settings gear), hide upload area
      */
-    private _appendSettingsButton;
+    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;
     private _detectMalformedData;
     private _showReshapeModal;
     private _cleanupReshapeModal;

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,66 +593,226 @@ 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 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();
         }
+        // ✅ 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);
-        // ✅ Update status with settings button
-        if (isMalformed && this._rawFileData) {
-            this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'warning');
-            this._appendSettingsButton('Fix Import Settings', 'warning');
+        if (isMalformed) {
+            gear.classList.add('jux-dataframe-gear-warning');
+            gear.title = `${this.state.sourceName} — May need reformatting`;
         }
         else {
-            this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-            if (this._rawFileData) {
-                this._appendSettingsButton('Import Settings', 'ghost');
-            }
+            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);
     }
     /**
-     * Append settings button to status bar
+     * Show the unified settings modal
      */
-    _appendSettingsButton(label, variant) {
+    _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 statusEl = document.getElementById(`${this._id}-status`);
-            if (statusEl) {
-                const settingsBtn = document.createElement('button');
-                settingsBtn.textContent = label;
-                settingsBtn.className = `jux-button jux-button-sm jux-button-${variant}`;
-                settingsBtn.style.marginLeft = '0.5rem';
-                settingsBtn.addEventListener('click', () => this._showReshapeModal());
-                statusEl.appendChild(settingsBtn);
+            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
+            if (adjustBtn) {
+                adjustBtn.addEventListener('click', () => {
+                    this._settingsModal.closeModal();
+                    this._showReshapeModal();
+                });
             }
         });
     }
     /**
      * Update the collapsible summary text
      */
-    _updateSummary() {
+    _updateSummary(isMalformed) {
         if (!this._collapsible || !this._detailsElement)
             return;
-        const summaryTextEl = this._detailsElement.querySelector('.jux-dataframe-summary-text');
-        if (!summaryTextEl)
-            return;
-        if (!this._df) {
-            // Don't show anything if no data
+        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}`;
+            }
         }
-        if (this._summaryTemplate) {
-            summaryTextEl.textContent = this._summaryTemplate(this._df);
+        // ✅ 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 {
-            const isMalformed = this._detectMalformedData(this._df);
-            const suffix = isMalformed ? ' ⚠️' : '';
-            summaryTextEl.textContent = `${this.state.sourceName || 'Data'} — ${this._df.height} rows × ${this._df.width} cols${suffix}`;
+        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();
@@ -771,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;
@@ -1045,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`;
@@ -1060,11 +1226,9 @@ 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;
                     }
@@ -1075,12 +1239,12 @@ export class DataFrameComponent extends BaseComponent {
             uploadContainer.className = 'jux-dataframe-upload';
             uploadContainer.id = `${this._id}-upload-container`;
             uploadArea.appendChild(uploadContainer);
-            // ✅ Status bar INLINE with upload (inside upload area)
+            // Status bar (for loading/error states only)
             if (this._showStatus) {
                 const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status jux-dataframe-status-empty';
+                statusBar.className = 'jux-dataframe-status';
                 statusBar.id = `${this._id}-status`;
-                statusBar.style.display = 'none'; // Hidden until needed
+                statusBar.style.display = 'none';
                 uploadArea.appendChild(statusBar);
             }
             if (this._uploadDescription) {
@@ -1095,22 +1259,34 @@ 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');
             details.className = 'jux-dataframe-details';
             details.open = !this._collapsed;
-            details.style.display = 'none'; // ✅ Hidden until data loads
+            details.style.display = 'none'; // Hidden until data loads
             this._detailsElement = details;
             const summary = document.createElement('summary');
             summary.className = 'jux-dataframe-summary';
@@ -1120,21 +1296,24 @@ export class DataFrameComponent extends BaseComponent {
             summary.appendChild(chevron);
             const textSpan = document.createElement('span');
             textSpan.className = 'jux-dataframe-summary-text';
-            // Don't set text - will be set when data loads
             summary.appendChild(textSpan);
             details.appendChild(summary);
             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,47 +715,169 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             this._table.columns(columnDefs).rows(this._df.toRows());
         }
 
-        // ✅ 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();
         }
 
-        const isMalformed = this._detectMalformedData(this._df!);
+        // ✅ Hide status - data is loaded
+        this._updateStatus('', 'success');
 
-        // ✅ Update status with settings button
-        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');
-            }
+        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';
         }
 
-        this._triggerCallback('load', this._df, null, this);
+        // 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();
     }
 
     /**
-     * Append settings button to status bar
+     * Hide data view, show upload area
      */
-    private _appendSettingsButton(label: string, variant: 'warning' | 'ghost'): void {
+    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 {
+            gear.classList.remove('jux-dataframe-gear-warning');
+            gear.title = `${this.state.sourceName} — ${this._df.height} rows × ${this._df.width} cols`;
+        }
+    }
+
+    /**
+     * 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 statusEl = document.getElementById(`${this._id}-status`);
-            if (statusEl) {
-                const settingsBtn = document.createElement('button');
-                settingsBtn.textContent = label;
-                settingsBtn.className = `jux-button jux-button-sm jux-button-${variant}`;
-                settingsBtn.style.marginLeft = '0.5rem';
-                settingsBtn.addEventListener('click', () => this._showReshapeModal());
-                statusEl.appendChild(settingsBtn);
+            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
+            if (adjustBtn) {
+                adjustBtn.addEventListener('click', () => {
+                    this._settingsModal!.closeModal();
+                    this._showReshapeModal();
+                });
             }
         });
     }
@@ -758,23 +885,49 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     /**
      * Update the collapsible summary text
      */
-    private _updateSummary(): void {
+    private _updateSummary(isMalformed?: boolean): void {
         if (!this._collapsible || !this._detailsElement) return;
 
-        const summaryTextEl = this._detailsElement.querySelector('.jux-dataframe-summary-text');
-        if (!summaryTextEl) return;
+        const summaryEl = this._detailsElement.querySelector('.jux-dataframe-summary');
+        if (!summaryEl) return;
 
-        if (!this._df) {
-            // Don't show anything if no data
-            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}`;
+            }
         }
 
-        if (this._summaryTemplate) {
-            summaryTextEl.textContent = this._summaryTemplate(this._df);
-        } else {
-            const isMalformed = this._detectMalformedData(this._df);
-            const suffix = isMalformed ? ' ⚠️' : '';
-            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();
         }
     }
 
@@ -782,6 +935,29 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * 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();
@@ -924,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;
@@ -1229,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`;
@@ -1247,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;
                     }
@@ -1264,12 +1440,12 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             uploadContainer.id = `${this._id}-upload-container`;
             uploadArea.appendChild(uploadContainer);
 
-            // ✅ Status bar INLINE with upload (inside upload area)
+            // Status bar (for loading/error states only)
             if (this._showStatus) {
                 const statusBar = document.createElement('div');
-                statusBar.className = 'jux-dataframe-status jux-dataframe-status-empty';
+                statusBar.className = 'jux-dataframe-status';
                 statusBar.id = `${this._id}-status`;
-                statusBar.style.display = 'none'; // Hidden until needed
+                statusBar.style.display = 'none';
                 uploadArea.appendChild(statusBar);
             }
 
@@ -1285,25 +1461,40 @@ 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) {
             const details = document.createElement('details');
             details.className = 'jux-dataframe-details';
             details.open = !this._collapsed;
-            details.style.display = 'none'; // ✅ Hidden until data loads
+            details.style.display = 'none'; // Hidden until data loads
             this._detailsElement = details;
 
             const summary = document.createElement('summary');
@@ -1316,7 +1507,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
             const textSpan = document.createElement('span');
             textSpan.className = 'jux-dataframe-summary-text';
-            // Don't set text - will be set when data loads
             summary.appendChild(textSpan);
 
             details.appendChild(summary);
@@ -1325,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

@@ -916,6 +916,36 @@ code {
   flex: 1;
 }
 
+/* ✅ Settings button in summary */
+.jux-dataframe-summary-settings {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border: 1px solid hsl(var(--border));
+  border-radius: calc(var(--radius) - 2px);
+  background: hsl(var(--background));
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-left: auto;
+}
+
+.jux-dataframe-summary-settings:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+  border-color: hsl(var(--muted-foreground) / 0.3);
+}
+
+.jux-dataframe-summary-settings-warning {
+  background: hsl(var(--warning) / 0.1);
+  border-color: hsl(var(--warning) / 0.3);
+  color: hsl(var(--warning-foreground));
+}
+
+.jux-dataframe-summary-settings-warning:hover {
+  background: hsl(var(--warning) / 0.2);
+}
+
 .jux-dataframe-details-content {
   padding: 0;
 }
@@ -924,4 +954,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.224",
+  "version": "1.1.226",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",