juxscript 1.1.161 → 1.1.163

package/index.d.ts

@@ -12,6 +12,7 @@ import { datepicker } from './lib/components/datepicker.js';
 import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
+import { dropdownMenu } from './lib/components/dropdown-menu.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -76,6 +77,7 @@ export declare const jux: {
     dialog: typeof dialog;
     divider: typeof divider;
     dropdown: typeof dropdown;
+    dropdownMenu: typeof dropdownMenu;
     element: typeof element;
     fileupload: typeof fileupload;
     grid: typeof grid;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAGzC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAG3D;;GAEG;AACH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Df,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -12,6 +12,7 @@ import { datepicker } from './lib/components/datepicker.js';
 import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
+import { dropdownMenu } from './lib/components/dropdown-menu.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -82,6 +83,7 @@ export const jux = {
     dialog,
     divider,
     dropdown,
+    dropdownMenu,
     element,
     fileupload,
     grid,

package/lib/components/dropdown-menu.d.ts

@@ -0,0 +1,42 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface DropdownMenuItem {
+    type?: 'item' | 'label' | 'separator';
+    label?: string;
+    value?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    submenu?: boolean;
+}
+export interface DropdownMenuOptions {
+    trigger?: string;
+    items?: DropdownMenuItem[];
+    style?: string;
+    class?: string;
+}
+type DropdownMenuState = BaseState & {
+    trigger: string;
+    items: DropdownMenuItem[];
+    open: boolean;
+};
+export declare class DropdownMenu extends BaseComponent<DropdownMenuState> {
+    private _wrapper;
+    private _menuEl;
+    constructor(id: string, options?: DropdownMenuOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    trigger(value: string): this;
+    items(value: DropdownMenuItem[]): this;
+    addItem(item: DropdownMenuItem): this;
+    separator(): this;
+    label(text: string): this;
+    item(label: string, value?: string, shortcut?: string): this;
+    open(): this;
+    close(): this;
+    toggle(): this;
+    update(prop: string, value: any): void;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+    private _buildItems;
+}
+export declare function dropdownMenu(id: string, options?: DropdownMenuOptions): DropdownMenu;
+export {};
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/lib/components/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAKnE,MAAM,WAAW,gBAAgB;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,qBAAa,YAAa,SAAQ,aAAa,CAAC,iBAAiB,CAAC;IAC9D,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA4B;gBAE/B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB;IAUzD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAC/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE5B,KAAK,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI;IAEtC,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAKrC,SAAS,IAAI,IAAI;IAIjB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIzB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAI5D,IAAI,IAAI,IAAI;IAMZ,KAAK,IAAI,IAAI;IAMb,MAAM,IAAI,IAAI;IAId,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAItC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IA2ElE,OAAO,CAAC,WAAW;CA+CtB;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB,GAAG,YAAY,CAExF"}

package/lib/components/dropdown-menu.js

@@ -0,0 +1,177 @@
+import { BaseComponent } from './base/BaseComponent.js';
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['select'];
+export class DropdownMenu extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            trigger: options.trigger ?? 'Open',
+            items: options.items ?? [],
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._wrapper = null;
+        this._menuEl = null;
+    }
+    getTriggerEvents() { return TRIGGER_EVENTS; }
+    getCallbackEvents() { return CALLBACK_EVENTS; }
+    /* ═══════════════════════ FLUENT API ═══════════════════════ */
+    trigger(value) { this.state.trigger = value; return this; }
+    items(value) { this.state.items = value; return this; }
+    addItem(item) {
+        this.state.items = [...this.state.items, item];
+        return this;
+    }
+    separator() {
+        return this.addItem({ type: 'separator' });
+    }
+    label(text) {
+        return this.addItem({ type: 'label', label: text });
+    }
+    item(label, value, shortcut) {
+        return this.addItem({ label, value: value ?? label, shortcut });
+    }
+    open() {
+        this.state.open = true;
+        if (this._menuEl)
+            this._menuEl.style.display = 'flex';
+        return this;
+    }
+    close() {
+        this.state.open = false;
+        if (this._menuEl)
+            this._menuEl.style.display = 'none';
+        return this;
+    }
+    toggle() {
+        return this.state.open ? this.close() : this.open();
+    }
+    update(prop, value) { }
+    /* ═══════════════════════ RENDER ═══════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { trigger, items, style, class: className } = this.state;
+        // Inject styles once
+        if (!document.getElementById('jux-dropdown-menu-styles')) {
+            const styleEl = document.createElement('style');
+            styleEl.id = 'jux-dropdown-menu-styles';
+            styleEl.textContent = `
+                .jux-dmenu-wrapper { position:relative; display:inline-block; }
+                .jux-dmenu-trigger { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; font-size:14px; font-weight:500; border-radius:6px; border:1px solid hsl(var(--border,0 0% 80%)); background:hsl(var(--background,0 0% 100%)); color:hsl(var(--foreground,0 0% 9%)); cursor:pointer; transition:background .15s; }
+                .jux-dmenu-trigger:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:220px; padding:4px; border-radius:8px; border:1px solid hsl(var(--border,0 0% 90%)); background:hsl(var(--popover,0 0% 100%)); color:hsl(var(--popover-foreground,0 0% 9%)); box-shadow:0 4px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06); z-index:100; display:none; flex-direction:column; animation:jux-dmenu-in .12s ease-out; }
+                @keyframes jux-dmenu-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
+                .jux-dmenu-label { padding:6px 8px 4px; font-size:12px; font-weight:600; color:hsl(var(--muted-foreground,0 0% 45%)); user-select:none; }
+                .jux-dmenu-sep { height:1px; margin:4px -4px; background:hsl(var(--border,0 0% 90%)); }
+                .jux-dmenu-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:6px 8px; font-size:14px; border-radius:4px; border:none; background:transparent; color:hsl(var(--popover-foreground,0 0% 9%)); cursor:pointer; text-align:left; transition:background .1s; gap:8px; font-family:inherit; }
+                .jux-dmenu-item:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-item:focus-visible { outline:2px solid hsl(var(--ring,0 0% 63%)); outline-offset:-2px; }
+                .jux-dmenu-item[disabled] { opacity:.5; pointer-events:none; }
+                .jux-dmenu-item-label { flex:1; }
+                .jux-dmenu-shortcut { font-size:12px; color:hsl(var(--muted-foreground,0 0% 45%)); letter-spacing:.04em; }
+                .jux-dmenu-arrow { font-size:10px; color:hsl(var(--muted-foreground,0 0% 45%)); }
+            `;
+            document.head.appendChild(styleEl);
+        }
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dmenu-wrapper';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dmenu-trigger';
+        triggerBtn.textContent = trigger;
+        triggerBtn.type = 'button';
+        wrapper.appendChild(triggerBtn);
+        const menu = document.createElement('div');
+        menu.className = 'jux-dmenu-menu';
+        this._menuEl = menu;
+        this._buildItems(menu, items);
+        wrapper.appendChild(menu);
+        // Toggle
+        triggerBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(); });
+        document.addEventListener('click', (e) => { if (!wrapper.contains(e.target))
+            this.close(); });
+        // Keyboard
+        triggerBtn.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.open();
+                const first = menu.querySelector('.jux-dmenu-item:not([disabled])');
+                if (first)
+                    first.focus();
+            }
+        });
+        menu.addEventListener('keydown', (e) => {
+            const btns = Array.from(menu.querySelectorAll('.jux-dmenu-item:not([disabled])'));
+            const idx = btns.indexOf(document.activeElement);
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                btns[(idx + 1) % btns.length]?.focus();
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                btns[(idx - 1 + btns.length) % btns.length]?.focus();
+            }
+            else if (e.key === 'Escape') {
+                this.close();
+                triggerBtn.focus();
+            }
+        });
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        this._wrapper = wrapper;
+        return this;
+    }
+    _buildItems(menu, items) {
+        menu.innerHTML = '';
+        items.forEach(item => {
+            if (item.type === 'separator') {
+                const sep = document.createElement('div');
+                sep.className = 'jux-dmenu-sep';
+                menu.appendChild(sep);
+            }
+            else if (item.type === 'label') {
+                const lbl = document.createElement('div');
+                lbl.className = 'jux-dmenu-label';
+                lbl.textContent = item.label ?? '';
+                menu.appendChild(lbl);
+            }
+            else {
+                const btn = document.createElement('button');
+                btn.className = 'jux-dmenu-item';
+                btn.type = 'button';
+                if (item.disabled)
+                    btn.disabled = true;
+                const labelSpan = document.createElement('span');
+                labelSpan.className = 'jux-dmenu-item-label';
+                labelSpan.textContent = item.label ?? '';
+                btn.appendChild(labelSpan);
+                if (item.submenu) {
+                    const arrow = document.createElement('span');
+                    arrow.className = 'jux-dmenu-arrow';
+                    arrow.textContent = '›';
+                    btn.appendChild(arrow);
+                }
+                else if (item.shortcut) {
+                    const sc = document.createElement('span');
+                    sc.className = 'jux-dmenu-shortcut';
+                    sc.textContent = item.shortcut;
+                    btn.appendChild(sc);
+                }
+                btn.addEventListener('click', (e) => {
+                    if (!item.disabled) {
+                        this._triggerCallback('select', item.value || item.label, e, this);
+                        this.close();
+                    }
+                });
+                menu.appendChild(btn);
+            }
+        });
+    }
+}
+export function dropdownMenu(id, options = {}) {
+    return new DropdownMenu(id, options);
+}

package/lib/components/dropdown-menu.ts

@@ -0,0 +1,214 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['select'] as const;
+
+export interface DropdownMenuItem {
+    type?: 'item' | 'label' | 'separator';
+    label?: string;
+    value?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    submenu?: boolean;
+}
+
+export interface DropdownMenuOptions {
+    trigger?: string;
+    items?: DropdownMenuItem[];
+    style?: string;
+    class?: string;
+}
+
+type DropdownMenuState = BaseState & {
+    trigger: string;
+    items: DropdownMenuItem[];
+    open: boolean;
+};
+
+export class DropdownMenu extends BaseComponent<DropdownMenuState> {
+    private _wrapper: HTMLElement | null = null;
+    private _menuEl: HTMLElement | null = null;
+
+    constructor(id: string, options: DropdownMenuOptions = {}) {
+        super(id, {
+            trigger: options.trigger ?? 'Open',
+            items: options.items ?? [],
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
+    protected getCallbackEvents(): readonly string[] { return CALLBACK_EVENTS; }
+
+    /* ═══════════════════════ FLUENT API ═══════════════════════ */
+
+    trigger(value: string): this { this.state.trigger = value; return this; }
+
+    items(value: DropdownMenuItem[]): this { this.state.items = value; return this; }
+
+    addItem(item: DropdownMenuItem): this {
+        this.state.items = [...this.state.items, item];
+        return this;
+    }
+
+    separator(): this {
+        return this.addItem({ type: 'separator' });
+    }
+
+    label(text: string): this {
+        return this.addItem({ type: 'label', label: text });
+    }
+
+    item(label: string, value?: string, shortcut?: string): this {
+        return this.addItem({ label, value: value ?? label, shortcut });
+    }
+
+    open(): this {
+        this.state.open = true;
+        if (this._menuEl) this._menuEl.style.display = 'flex';
+        return this;
+    }
+
+    close(): this {
+        this.state.open = false;
+        if (this._menuEl) this._menuEl.style.display = 'none';
+        return this;
+    }
+
+    toggle(): this {
+        return this.state.open ? this.close() : this.open();
+    }
+
+    update(prop: string, value: any): void { }
+
+    /* ═══════════════════════ RENDER ═══════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+        const { trigger, items, style, class: className } = this.state;
+
+        // Inject styles once
+        if (!document.getElementById('jux-dropdown-menu-styles')) {
+            const styleEl = document.createElement('style');
+            styleEl.id = 'jux-dropdown-menu-styles';
+            styleEl.textContent = `
+                .jux-dmenu-wrapper { position:relative; display:inline-block; }
+                .jux-dmenu-trigger { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; font-size:14px; font-weight:500; border-radius:6px; border:1px solid hsl(var(--border,0 0% 80%)); background:hsl(var(--background,0 0% 100%)); color:hsl(var(--foreground,0 0% 9%)); cursor:pointer; transition:background .15s; }
+                .jux-dmenu-trigger:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:220px; padding:4px; border-radius:8px; border:1px solid hsl(var(--border,0 0% 90%)); background:hsl(var(--popover,0 0% 100%)); color:hsl(var(--popover-foreground,0 0% 9%)); box-shadow:0 4px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06); z-index:100; display:none; flex-direction:column; animation:jux-dmenu-in .12s ease-out; }
+                @keyframes jux-dmenu-in { from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
+                .jux-dmenu-label { padding:6px 8px 4px; font-size:12px; font-weight:600; color:hsl(var(--muted-foreground,0 0% 45%)); user-select:none; }
+                .jux-dmenu-sep { height:1px; margin:4px -4px; background:hsl(var(--border,0 0% 90%)); }
+                .jux-dmenu-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:6px 8px; font-size:14px; border-radius:4px; border:none; background:transparent; color:hsl(var(--popover-foreground,0 0% 9%)); cursor:pointer; text-align:left; transition:background .1s; gap:8px; font-family:inherit; }
+                .jux-dmenu-item:hover { background:hsl(var(--accent,0 0% 96%)); }
+                .jux-dmenu-item:focus-visible { outline:2px solid hsl(var(--ring,0 0% 63%)); outline-offset:-2px; }
+                .jux-dmenu-item[disabled] { opacity:.5; pointer-events:none; }
+                .jux-dmenu-item-label { flex:1; }
+                .jux-dmenu-shortcut { font-size:12px; color:hsl(var(--muted-foreground,0 0% 45%)); letter-spacing:.04em; }
+                .jux-dmenu-arrow { font-size:10px; color:hsl(var(--muted-foreground,0 0% 45%)); }
+            `;
+            document.head.appendChild(styleEl);
+        }
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dmenu-wrapper';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dmenu-trigger';
+        triggerBtn.textContent = trigger;
+        triggerBtn.type = 'button';
+        wrapper.appendChild(triggerBtn);
+
+        const menu = document.createElement('div');
+        menu.className = 'jux-dmenu-menu';
+        this._menuEl = menu;
+
+        this._buildItems(menu, items);
+
+        wrapper.appendChild(menu);
+
+        // Toggle
+        triggerBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(); });
+        document.addEventListener('click', (e) => { if (!wrapper.contains(e.target as Node)) this.close(); });
+
+        // Keyboard
+        triggerBtn.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault(); this.open();
+                const first = menu.querySelector('.jux-dmenu-item:not([disabled])') as HTMLElement;
+                if (first) first.focus();
+            }
+        });
+
+        menu.addEventListener('keydown', (e) => {
+            const btns = Array.from(menu.querySelectorAll('.jux-dmenu-item:not([disabled])')) as HTMLElement[];
+            const idx = btns.indexOf(document.activeElement as HTMLElement);
+            if (e.key === 'ArrowDown') { e.preventDefault(); btns[(idx + 1) % btns.length]?.focus(); }
+            else if (e.key === 'ArrowUp') { e.preventDefault(); btns[(idx - 1 + btns.length) % btns.length]?.focus(); }
+            else if (e.key === 'Escape') { this.close(); triggerBtn.focus(); }
+        });
+
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        this._wrapper = wrapper;
+
+        return this;
+    }
+
+    private _buildItems(menu: HTMLElement, items: DropdownMenuItem[]): void {
+        menu.innerHTML = '';
+
+        items.forEach(item => {
+            if (item.type === 'separator') {
+                const sep = document.createElement('div');
+                sep.className = 'jux-dmenu-sep';
+                menu.appendChild(sep);
+            } else if (item.type === 'label') {
+                const lbl = document.createElement('div');
+                lbl.className = 'jux-dmenu-label';
+                lbl.textContent = item.label ?? '';
+                menu.appendChild(lbl);
+            } else {
+                const btn = document.createElement('button');
+                btn.className = 'jux-dmenu-item';
+                btn.type = 'button';
+                if (item.disabled) btn.disabled = true;
+
+                const labelSpan = document.createElement('span');
+                labelSpan.className = 'jux-dmenu-item-label';
+                labelSpan.textContent = item.label ?? '';
+                btn.appendChild(labelSpan);
+
+                if (item.submenu) {
+                    const arrow = document.createElement('span');
+                    arrow.className = 'jux-dmenu-arrow';
+                    arrow.textContent = '›';
+                    btn.appendChild(arrow);
+                } else if (item.shortcut) {
+                    const sc = document.createElement('span');
+                    sc.className = 'jux-dmenu-shortcut';
+                    sc.textContent = item.shortcut;
+                    btn.appendChild(sc);
+                }
+
+                btn.addEventListener('click', (e) => {
+                    if (!item.disabled) {
+                        this._triggerCallback('select', item.value || item.label, e, this);
+                        this.close();
+                    }
+                });
+
+                menu.appendChild(btn);
+            }
+        });
+    }
+}
+
+export function dropdownMenu(id: string, options: DropdownMenuOptions = {}): DropdownMenu {
+    return new DropdownMenu(id, options);
+}

package/lib/storage/TabularDriver.d.ts

@@ -17,6 +17,7 @@ export interface ParseOptions {
     maxRows?: number;
     skipRows?: number;
     columns?: string[];
+    sheet?: string | number;
 }
 export declare class TabularDriver {
     private _dbName;
@@ -29,9 +30,18 @@ export declare class TabularDriver {
      */
     parseCSV(text: string, options?: ParseOptions): DataFrame;
     /**
-     * Stream-parse a File into a DataFrame, with progress callback
+     * Stream-parse a File into a DataFrame, with progress callback.
+     * Auto-detects XLSX/XLS and routes accordingly.
      */
     streamFile(file: File, options?: ParseOptions): Promise<DataFrame>;
+    /**
+     * Parse an XLSX/XLS file into a DataFrame using SheetJS
+     */
+    private _parseXLSX;
+    /**
+     * Get sheet names from an XLSX file (useful for UI)
+     */
+    getSheetNames(file: File): Promise<string[]>;
     /**
      * Store a DataFrame to IndexedDB
      */

package/lib/storage/TabularDriver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabularDriver.d.ts","sourceRoot":"","sources":["TabularDriver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,qBAAa,aAAa;IACtB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,GAAG,CAA4B;gBAE3B,MAAM,GAAE,MAAsB,EAAE,SAAS,GAAE,MAAiB;IAKlE,IAAI,IAAI,OAAO,CAAC,WAAW,CAAC;IA4BlC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,SAAS;IA6C7D;;OAEG;IACG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,SAAS,CAAC;IA8F5E;;OAEG;IACG,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAuBzF;;OAEG;IACG,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IAwBjD;;OAEG;IACG,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IA4BzD;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAqBlH;;OAEG;IACG,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAYjC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAgB5B;;OAEG;IACG,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,SAAS,CAAC;IA8ExE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAmClB,OAAO,CAAC,SAAS;IAYjB,KAAK,IAAI,IAAI;CAMhB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAEhF"}
+{"version":3,"file":"TabularDriver.d.ts","sourceRoot":"","sources":["TabularDriver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,qBAAa,aAAa;IACtB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,GAAG,CAA4B;gBAE3B,MAAM,GAAE,MAAsB,EAAE,SAAS,GAAE,MAAiB;IAKlE,IAAI,IAAI,OAAO,CAAC,WAAW,CAAC;IA4BlC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,SAAS;IA6C7D;;;OAGG;IACG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,SAAS,CAAC;IAoG5E;;OAEG;YACW,UAAU;IAuExB;;OAEG;IACG,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAiBlD;;OAEG;IACG,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAuBzF;;OAEG;IACG,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IAwBjD;;OAEG;IACG,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IA4BzD;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAqBlH;;OAEG;IACG,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAYjC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAgB5B;;OAEG;IACG,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,OAAO,CAAC,SAAS,CAAC;IA8ExE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAmClB,OAAO,CAAC,SAAS;IAYjB,KAAK,IAAI,IAAI;CAMhB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAEhF"}

package/lib/storage/TabularDriver.js

@@ -63,9 +63,14 @@ export class TabularDriver {
         return df;
     }
     /**
-     * Stream-parse a File into a DataFrame, with progress callback
+     * Stream-parse a File into a DataFrame, with progress callback.
+     * Auto-detects XLSX/XLS and routes accordingly.
      */
     async streamFile(file, options = {}) {
+        const ext = file.name.split('.').pop()?.toLowerCase();
+        if (ext === 'xlsx' || ext === 'xls') {
+            return this._parseXLSX(file, options);
+        }
         const { delimiter = file.name.endsWith('.tsv') ? '\t' : ',', hasHeader = true, chunkSize = 64 * 1024, onProgress, maxRows, skipRows = 0, columns: selectCols } = options;
         const totalSize = file.size;
         let bytesRead = 0;
@@ -136,6 +141,89 @@ export class TabularDriver {
             df = df.select(...selectCols);
         return df;
     }
+    /* ═══════════════════════════════════════════════════
+     * XLSX / XLS PARSING
+     * ═══════════════════════════════════════════════════ */
+    /**
+     * Parse an XLSX/XLS file into a DataFrame using SheetJS
+     */
+    async _parseXLSX(file, options = {}) {
+        const { maxRows, skipRows = 0, columns: selectCols, sheet, onProgress, hasHeader = true } = options;
+        // Dynamic import — fails gracefully if xlsx not installed
+        let XLSX;
+        try {
+            XLSX = await import('xlsx');
+        }
+        catch {
+            throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
+        }
+        if (onProgress)
+            onProgress(0, file.size);
+        const buffer = await file.arrayBuffer();
+        if (onProgress)
+            onProgress(file.size * 0.5, file.size);
+        const workbook = XLSX.read(buffer, { type: 'array' });
+        // Select sheet
+        let sheetName;
+        if (typeof sheet === 'number') {
+            sheetName = workbook.SheetNames[sheet] || workbook.SheetNames[0];
+        }
+        else if (typeof sheet === 'string') {
+            sheetName = sheet;
+        }
+        else {
+            sheetName = workbook.SheetNames[0];
+        }
+        const worksheet = workbook.Sheets[sheetName];
+        if (!worksheet) {
+            throw new Error(`Sheet "${sheetName}" not found. Available: ${workbook.SheetNames.join(', ')}`);
+        }
+        // Convert to JSON rows
+        const jsonRows = XLSX.utils.sheet_to_json(worksheet, {
+            header: hasHeader ? undefined : 1,
+            defval: null,
+            raw: true
+        });
+        if (onProgress)
+            onProgress(file.size * 0.8, file.size);
+        // Apply skipRows and maxRows
+        let rows = jsonRows;
+        if (skipRows > 0) {
+            rows = rows.slice(skipRows);
+        }
+        if (maxRows !== undefined) {
+            rows = rows.slice(0, maxRows);
+        }
+        // Auto-type values
+        rows = rows.map(row => {
+            const typed = {};
+            for (const [key, value] of Object.entries(row)) {
+                typed[key] = this._autoType(value === null || value === undefined ? '' : String(value));
+            }
+            return typed;
+        });
+        if (onProgress)
+            onProgress(file.size, file.size);
+        let df = new DataFrame(rows);
+        if (selectCols)
+            df = df.select(...selectCols);
+        return df;
+    }
+    /**
+     * Get sheet names from an XLSX file (useful for UI)
+     */
+    async getSheetNames(file) {
+        let XLSX;
+        try {
+            XLSX = await import('xlsx');
+        }
+        catch {
+            throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
+        }
+        const buffer = await file.arrayBuffer();
+        const workbook = XLSX.read(buffer, { type: 'array' });
+        return workbook.SheetNames;
+    }
     /* ═══════════════════════════════════════════════════
      * INDEXEDDB PERSISTENCE
      * ═══════════════════════════════════════════════════ */

package/lib/storage/TabularDriver.ts

@@ -19,6 +19,7 @@ export interface ParseOptions {
     maxRows?: number;
     skipRows?: number;
     columns?: string[];
+    sheet?: string | number; // ✅ For XLSX: sheet name or index
 }
 
 export class TabularDriver {
@@ -108,9 +109,16 @@ export class TabularDriver {
     }
 
     /**
-     * Stream-parse a File into a DataFrame, with progress callback
+     * Stream-parse a File into a DataFrame, with progress callback.
+     * Auto-detects XLSX/XLS and routes accordingly.
      */
     async streamFile(file: File, options: ParseOptions = {}): Promise<DataFrame> {
+        const ext = file.name.split('.').pop()?.toLowerCase();
+
+        if (ext === 'xlsx' || ext === 'xls') {
+            return this._parseXLSX(file, options);
+        }
+
         const {
             delimiter = file.name.endsWith('.tsv') ? '\t' : ',',
             hasHeader = true,
@@ -200,6 +208,100 @@ export class TabularDriver {
         return df;
     }
 
+    /* ═══════════════════════════════════════════════════
+     * XLSX / XLS PARSING
+     * ═══════════════════════════════════════════════════ */
+
+    /**
+     * Parse an XLSX/XLS file into a DataFrame using SheetJS
+     */
+    private async _parseXLSX(file: File, options: ParseOptions = {}): Promise<DataFrame> {
+        const { maxRows, skipRows = 0, columns: selectCols, sheet, onProgress, hasHeader = true } = options;
+
+        // Dynamic import — fails gracefully if xlsx not installed
+        let XLSX: any;
+        try {
+            XLSX = await import('xlsx');
+        } catch {
+            throw new Error(
+                'XLSX support requires the "xlsx" package. Install it with: npm install xlsx'
+            );
+        }
+
+        if (onProgress) onProgress(0, file.size);
+
+        const buffer = await file.arrayBuffer();
+
+        if (onProgress) onProgress(file.size * 0.5, file.size);
+
+        const workbook = XLSX.read(buffer, { type: 'array' });
+
+        // Select sheet
+        let sheetName: string;
+        if (typeof sheet === 'number') {
+            sheetName = workbook.SheetNames[sheet] || workbook.SheetNames[0];
+        } else if (typeof sheet === 'string') {
+            sheetName = sheet;
+        } else {
+            sheetName = workbook.SheetNames[0];
+        }
+
+        const worksheet = workbook.Sheets[sheetName];
+        if (!worksheet) {
+            throw new Error(`Sheet "${sheetName}" not found. Available: ${workbook.SheetNames.join(', ')}`);
+        }
+
+        // Convert to JSON rows
+        const jsonRows: Record<string, any>[] = XLSX.utils.sheet_to_json(worksheet, {
+            header: hasHeader ? undefined : 1,
+            defval: null,
+            raw: true
+        });
+
+        if (onProgress) onProgress(file.size * 0.8, file.size);
+
+        // Apply skipRows and maxRows
+        let rows = jsonRows;
+        if (skipRows > 0) {
+            rows = rows.slice(skipRows);
+        }
+        if (maxRows !== undefined) {
+            rows = rows.slice(0, maxRows);
+        }
+
+        // Auto-type values
+        rows = rows.map(row => {
+            const typed: Record<string, any> = {};
+            for (const [key, value] of Object.entries(row)) {
+                typed[key] = this._autoType(value === null || value === undefined ? '' : String(value));
+            }
+            return typed;
+        });
+
+        if (onProgress) onProgress(file.size, file.size);
+
+        let df = new DataFrame(rows);
+        if (selectCols) df = df.select(...selectCols);
+
+        return df;
+    }
+
+    /**
+     * Get sheet names from an XLSX file (useful for UI)
+     */
+    async getSheetNames(file: File): Promise<string[]> {
+        let XLSX: any;
+        try {
+            XLSX = await import('xlsx');
+        } catch {
+            throw new Error('XLSX support requires the "xlsx" package. Install it with: npm install xlsx');
+        }
+
+        const buffer = await file.arrayBuffer();
+        const workbook = XLSX.read(buffer, { type: 'array' });
+        return workbook.SheetNames;
+    }
+
     /* ═══════════════════════════════════════════════════
      * INDEXEDDB PERSISTENCE
      * ═══════════════════════════════════════════════════ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.161",
+  "version": "1.1.163",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",
@@ -59,7 +59,8 @@
     "chart.js": "^4.5.1",
     "esbuild": "^0.19.0",
     "express": "^4.18.2",
-    "ws": "^8.13.0"
+    "ws": "^8.13.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/express": "^4.17.17",