juxscript 1.1.178 → 1.1.180

package/lib/components/dataframe.d.ts

@@ -69,7 +69,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     paginated(v: boolean): this;
     rowsPerPage(v: number): this;
     /**
-     * ✅ NEW: Render multiple Excel sheets as tabs
+     * ✅ FIXED: Render multiple Excel sheets as tabs
      */
     private _renderMultiSheet;
     private _updateStatus;

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

@@ -212,7 +212,7 @@ export class DataFrameComponent extends BaseComponent {
      * MULTI-SHEET RENDERING
      * ═══════════════════════════════════════════════════ */
     /**
-     * ✅ NEW: Render multiple Excel sheets as tabs
+     * ✅ FIXED: Render multiple Excel sheets as tabs
      */
     _renderMultiSheet(sheets, sourceName) {
         this.state.loading = false;
@@ -228,25 +228,27 @@ export class DataFrameComponent extends BaseComponent {
         Object.entries(sheets).forEach(([name, df]) => {
             this._sheets.set(name, df);
         });
-        // Create tabs
         const sheetNames = Object.keys(sheets);
+        // ✅ FIX: Create tabs with EMPTY content first (just placeholders)
         const tabs = new Tabs(`${this._id}-tabs`, {
             tabs: sheetNames.map(name => ({
                 id: name,
                 label: name,
-                content: '' // We'll populate after render
+                content: '' // Empty - we'll fill after render
             })),
             activeTab: sheetNames[0]
         });
         this._tabs = tabs;
-        // Render tabs into wrapper
+        // Render tabs container
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
         wrapper.appendChild(tabsContainer);
+        // ✅ Render tabs NOW (creates all tab panels in DOM)
         tabs.render(tabsContainer);
-        // Populate each tab with its DataFrame table
+        // ✅ NOW populate each tab with its DataFrame table (panels exist now)
         sheetNames.forEach(sheetName => {
             const df = sheets[sheetName];
+            // Create table
             const table = new Table(`${this._id}-table-${sheetName}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -255,14 +257,20 @@ export class DataFrameComponent extends BaseComponent {
                 paginated: this._tableOptions.paginated,
                 rowsPerPage: this._tableOptions.rowsPerPage
             });
-            // ✅ Convert columns to ColumnDef[]
+            // Convert columns to ColumnDef[]
             const columnDefs = df.columns.map(col => ({
                 key: col,
                 label: col
             }));
             table.columns(columnDefs).rows(df.toRows());
-            // Add table to tab
-            tabs.addTabContent(sheetName, table);
+            // ✅ Find the tab panel (it exists now because tabs.render() was called)
+            const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
+            if (!tabPanel) {
+                console.error(`Tab panel not found: ${this._id}-tabs-${sheetName}-panel`);
+                return;
+            }
+            // ✅ Render table directly into tab panel
+            table.render(tabPanel);
             // Add filter if enabled
             if (this._tableOptions.filterable) {
                 const filterContainer = document.createElement('div');
@@ -290,13 +298,10 @@ export class DataFrameComponent extends BaseComponent {
                     });
                     table.rows(filtered.toRows());
                 });
-                // Insert filter before table in tab
-                const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
-                if (tabPanel) {
-                    const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
-                    if (tableWrapper) {
-                        tabPanel.insertBefore(filterContainer, tableWrapper);
-                    }
+                // ✅ Insert filter BEFORE the table wrapper (which exists now)
+                const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
+                if (tableWrapper) {
+                    tabPanel.insertBefore(filterContainer, tableWrapper);
                 }
             }
         });
@@ -305,7 +310,6 @@ export class DataFrameComponent extends BaseComponent {
         this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
         // Set first sheet as active DataFrame
         this._df = sheets[sheetNames[0]];
-        this._table = tabs._tabsWrapper?.querySelector(`#${this._id}-table-${sheetNames[0]}`);
         this._triggerCallback('load', this._df, null, this);
     }
     /* ═══════════════════════════════════════════════════

package/lib/components/dataframe.ts

@@ -262,7 +262,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * ═══════════════════════════════════════════════════ */
 
     /**
-     * ✅ NEW: Render multiple Excel sheets as tabs
+     * ✅ FIXED: Render multiple Excel sheets as tabs
      */
     private _renderMultiSheet(sheets: Record<string, DataFrame>, sourceName: string): void {
         this.state.loading = false;
@@ -280,28 +280,33 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             this._sheets.set(name, df);
         });
 
-        // Create tabs
         const sheetNames = Object.keys(sheets);
+
+        // ✅ FIX: Create tabs with EMPTY content first (just placeholders)
         const tabs = new Tabs(`${this._id}-tabs`, {
             tabs: sheetNames.map(name => ({
                 id: name,
                 label: name,
-                content: '' // We'll populate after render
+                content: '' // Empty - we'll fill after render
             })),
             activeTab: sheetNames[0]
         });
 
         this._tabs = tabs;
 
-        // Render tabs into wrapper
+        // Render tabs container
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
         wrapper.appendChild(tabsContainer);
+
+        // ✅ Render tabs NOW (creates all tab panels in DOM)
         tabs.render(tabsContainer);
 
-        // Populate each tab with its DataFrame table
+        // ✅ NOW populate each tab with its DataFrame table (panels exist now)
         sheetNames.forEach(sheetName => {
             const df = sheets[sheetName];
+
+            // Create table
             const table = new Table(`${this._id}-table-${sheetName}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -311,7 +316,7 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                 rowsPerPage: this._tableOptions.rowsPerPage
             });
 
-            // ✅ Convert columns to ColumnDef[]
+            // Convert columns to ColumnDef[]
             const columnDefs = df.columns.map(col => ({
                 key: col,
                 label: col
@@ -319,8 +324,15 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
             table.columns(columnDefs).rows(df.toRows());
 
-            // Add table to tab
-            tabs.addTabContent(sheetName, table);
+            // ✅ Find the tab panel (it exists now because tabs.render() was called)
+            const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
+            if (!tabPanel) {
+                console.error(`Tab panel not found: ${this._id}-tabs-${sheetName}-panel`);
+                return;
+            }
+
+            // ✅ Render table directly into tab panel
+            table.render(tabPanel);
 
             // Add filter if enabled
             if (this._tableOptions.filterable) {
@@ -357,13 +369,10 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
                     table.rows(filtered.toRows());
                 });
 
-                // Insert filter before table in tab
-                const tabPanel = document.getElementById(`${this._id}-tabs-${sheetName}-panel`);
-                if (tabPanel) {
-                    const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
-                    if (tableWrapper) {
-                        tabPanel.insertBefore(filterContainer, tableWrapper);
-                    }
+                // ✅ Insert filter BEFORE the table wrapper (which exists now)
+                const tableWrapper = tabPanel.querySelector('.jux-table-wrapper');
+                if (tableWrapper) {
+                    tabPanel.insertBefore(filterContainer, tableWrapper);
                 }
             }
         });
@@ -377,7 +386,6 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
 
         // Set first sheet as active DataFrame
         this._df = sheets[sheetNames[0]];
-        this._table = (tabs as any)._tabsWrapper?.querySelector(`#${this._id}-table-${sheetNames[0]}`);
 
         this._triggerCallback('load', this._df, null, this);
     }

package/lib/styles/shadcn.css

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

package/package.json

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