juxscript 1.1.301 → 1.1.302

package/dist/lib/components/nav.js

@@ -0,0 +1,152 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Nav {
+    constructor(id, options = {}) {
+        this._items = [];
+        this._value = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            orientation: 'vertical',
+            activeClass: 'jux-nav-item--active',
+            itemClass: 'jux-nav-item',
+            ...options
+        };
+        this._element = document.createElement('nav');
+        this._element.id = this.id;
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        this._element.setAttribute('data-orientation', this.opts.orientation);
+        this._element.setAttribute('role', 'navigation');
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+        if (this.opts.items) {
+            this.addItems(this.opts.items);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // STANDARD COLLECTION API
+    // ═══════════════════════════════════════════════════════════
+    addItem(item) {
+        const navItem = { ...item, id: item.id || `${this.id}-item-${this._items.length}` };
+        this._items.push(navItem);
+        this._renderItem(navItem);
+        this._dispatchChange();
+        return this;
+    }
+    addItems(items) {
+        for (const item of items) {
+            const navItem = { ...item, id: item.id || `${this.id}-item-${this._items.length}` };
+            this._items.push(navItem);
+            this._renderItem(navItem);
+        }
+        this._dispatchChange();
+        return this;
+    }
+    removeItem(key) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items.splice(idx, 1);
+            this._renderAll();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    updateItem(key, updates) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items[idx] = { ...this._items[idx], ...updates };
+            this._renderAll();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    clearItems() {
+        this._items = [];
+        this._value = null;
+        this._element.innerHTML = '';
+        this._dispatchChange();
+        return this;
+    }
+    getItems() { return [...this._items]; }
+    getCount() { return this._items.length; }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._value; }
+    setValue(val) {
+        this._value = val;
+        this._updateActiveState();
+        this._dispatchChange();
+        return this;
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL
+    // ═══════════════════════════════════════════════════════════
+    _renderItem(item) {
+        const el = document.createElement('a');
+        el.id = item.id;
+        el.className = this.opts.itemClass || 'jux-nav-item';
+        el.textContent = item.label;
+        el.setAttribute('role', 'link');
+        if (item.path)
+            el.setAttribute('data-path', item.path);
+        if (item.disabled)
+            el.setAttribute('data-disabled', 'true');
+        if (item.icon)
+            el.setAttribute('data-icon', item.icon);
+        el.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (item.disabled)
+                return;
+            this._value = item.path || item.id;
+            this._updateActiveState();
+            if (this._onChange)
+                this._onChange(this._value);
+            this._element.dispatchEvent(new Event('change', { bubbles: false }));
+        });
+        this._element.appendChild(el);
+    }
+    _renderAll() {
+        this._element.innerHTML = '';
+        for (const item of this._items) {
+            this._renderItem(item);
+        }
+        this._updateActiveState();
+    }
+    _updateActiveState() {
+        const children = this._element.querySelectorAll('[role="link"]');
+        children.forEach(el => {
+            const path = el.getAttribute('data-path') || el.id;
+            if (path === this._value) {
+                el.classList.add(this.opts.activeClass);
+                el.setAttribute('data-active', 'true');
+            }
+            else {
+                el.classList.remove(this.opts.activeClass);
+                el.removeAttribute('data-active');
+            }
+        });
+    }
+    _dispatchChange() {
+        this._element.setAttribute('data-count', String(this._items.length));
+        this._element.dispatchEvent(new Event('change', { bubbles: false }));
+    }
+}
+export function nav(id, options = {}) {
+    const n = new Nav(id, options);
+    pageState.__register(n);
+    return n;
+}
+export { Nav };
+export default nav;

package/dist/lib/components/table.d.ts

@@ -0,0 +1,56 @@
+interface TableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: any, row: any) => string;
+}
+interface TableOptions {
+    columns?: TableColumn[];
+    items?: any[];
+    class?: string;
+    style?: string;
+    target?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    selectable?: boolean;
+    headerClass?: string;
+    rowClass?: string;
+    cellClass?: string;
+}
+declare class Table {
+    id: string;
+    opts: TableOptions;
+    private _element;
+    private _table;
+    private _thead;
+    private _tbody;
+    private _items;
+    private _columns;
+    private _value;
+    private _selectedIndex;
+    private _onChange;
+    constructor(id: string, options?: TableOptions);
+    setColumns(columns: TableColumn[]): this;
+    getColumns(): TableColumn[];
+    addItem(item: any): this;
+    addItems(items: any[]): this;
+    removeItem(key: string | number): this;
+    updateItem(key: string | number, updates: any): this;
+    clearItems(): this;
+    getItems(): any[];
+    getCount(): number;
+    getValue(): any | null;
+    setValue(val: any): this;
+    getElement(): HTMLElement;
+    onChange(fn: (value: any) => void): this;
+    private _autoColumns;
+    private _renderHeader;
+    private _renderBody;
+    private _highlightSelected;
+    private _dispatchChange;
+}
+export declare function table(id: string, options?: TableOptions): Table;
+export { Table, TableColumn, TableOptions };
+export default table;
+//# sourceMappingURL=table.d.ts.map

package/dist/lib/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../lib/components/table.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC;CAC7C;AAED,UAAU,YAAY;IAClB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IA8ClD,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI;IAOxC,UAAU,IAAI,WAAW,EAAE;IAM3B,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAQxB,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAU5B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAUtC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,IAAI;IAUpD,UAAU,IAAI,IAAI;IASlB,QAAQ,IAAI,GAAG,EAAE;IACjB,QAAQ,IAAI,MAAM;IAMlB,QAAQ,IAAI,GAAG,GAAG,IAAI;IAEtB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKxB,UAAU,IAAI,WAAW;IAEzB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IASxC,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,WAAW;IAuCnB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,eAAe;CAI1B;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAInE;AAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC;AAC5C,eAAe,KAAK,CAAC"}

package/dist/lib/components/table.js

@@ -0,0 +1,199 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Table {
+    constructor(id, options = {}) {
+        this._items = [];
+        this._columns = [];
+        this._value = null;
+        this._selectedIndex = -1;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            striped: false,
+            hoverable: true,
+            selectable: false,
+            ...options
+        };
+        // Wrapper
+        this._element = document.createElement('div');
+        this._element.id = this.id;
+        this._element.setAttribute('data-jux-table', '');
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        // Table
+        this._table = document.createElement('table');
+        this._table.className = 'jux-table';
+        this._table.setAttribute('role', 'table');
+        this._thead = document.createElement('thead');
+        this._tbody = document.createElement('tbody');
+        this._table.appendChild(this._thead);
+        this._table.appendChild(this._tbody);
+        this._element.appendChild(this._table);
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+        if (this.opts.columns) {
+            this._columns = this.opts.columns;
+            this._renderHeader();
+        }
+        if (this.opts.items) {
+            this.addItems(this.opts.items);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // COLUMNS
+    // ═══════════════════════════════════════════════════════════
+    setColumns(columns) {
+        this._columns = columns;
+        this._renderHeader();
+        this._renderBody();
+        return this;
+    }
+    getColumns() { return [...this._columns]; }
+    // ═══════════════════════════════════════════════════════════
+    // STANDARD COLLECTION API
+    // ═══════════════════════════════════════════════════════════
+    addItem(item) {
+        this._items.push(item);
+        this._autoColumns(item);
+        this._renderBody();
+        this._dispatchChange();
+        return this;
+    }
+    addItems(items) {
+        for (const item of items) {
+            this._items.push(item);
+            this._autoColumns(item);
+        }
+        this._renderBody();
+        this._dispatchChange();
+        return this;
+    }
+    removeItem(key) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items.splice(idx, 1);
+            this._renderBody();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    updateItem(key, updates) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items[idx] = { ...this._items[idx], ...updates };
+            this._renderBody();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    clearItems() {
+        this._items = [];
+        this._value = null;
+        this._selectedIndex = -1;
+        this._renderBody();
+        this._dispatchChange();
+        return this;
+    }
+    getItems() { return [...this._items]; }
+    getCount() { return this._items.length; }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._value; }
+    setValue(val) {
+        this._value = val;
+        return this;
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL
+    // ═══════════════════════════════════════════════════════════
+    _autoColumns(item) {
+        if (this._columns.length > 0)
+            return;
+        const keys = Object.keys(item);
+        this._columns = keys.map(k => ({ key: k, label: k.charAt(0).toUpperCase() + k.slice(1) }));
+        this._renderHeader();
+    }
+    _renderHeader() {
+        this._thead.innerHTML = '';
+        const tr = document.createElement('tr');
+        for (const col of this._columns) {
+            const th = document.createElement('th');
+            th.textContent = col.label;
+            th.className = this.opts.headerClass || 'jux-table-th';
+            if (col.width)
+                th.style.width = col.width;
+            if (col.align)
+                th.style.textAlign = col.align;
+            tr.appendChild(th);
+        }
+        this._thead.appendChild(tr);
+    }
+    _renderBody() {
+        this._tbody.innerHTML = '';
+        this._items.forEach((item, idx) => {
+            const tr = document.createElement('tr');
+            tr.className = this.opts.rowClass || 'jux-table-tr';
+            if (this.opts.striped && idx % 2 === 1) {
+                tr.classList.add('jux-table-tr--striped');
+            }
+            if (this.opts.hoverable) {
+                tr.classList.add('jux-table-tr--hoverable');
+            }
+            for (const col of this._columns) {
+                const td = document.createElement('td');
+                td.className = this.opts.cellClass || 'jux-table-td';
+                if (col.align)
+                    td.style.textAlign = col.align;
+                const raw = item[col.key];
+                td.textContent = col.render ? col.render(raw, item) : String(raw ?? '');
+                tr.appendChild(td);
+            }
+            if (this.opts.selectable) {
+                tr.style.cursor = 'pointer';
+                tr.addEventListener('click', () => {
+                    this._value = item;
+                    this._selectedIndex = idx;
+                    if (this._onChange)
+                        this._onChange(item);
+                    this._element.dispatchEvent(new Event('change', { bubbles: false }));
+                    this._highlightSelected();
+                });
+            }
+            this._tbody.appendChild(tr);
+        });
+        this._highlightSelected();
+    }
+    _highlightSelected() {
+        const rows = this._tbody.querySelectorAll('tr');
+        rows.forEach((row, idx) => {
+            if (idx === this._selectedIndex) {
+                row.classList.add('jux-table-tr--selected');
+            }
+            else {
+                row.classList.remove('jux-table-tr--selected');
+            }
+        });
+    }
+    _dispatchChange() {
+        this._element.setAttribute('data-count', String(this._items.length));
+        this._element.dispatchEvent(new Event('change', { bubbles: false }));
+    }
+}
+export function table(id, options = {}) {
+    const t = new Table(id, options);
+    pageState.__register(t);
+    return t;
+}
+export { Table };
+export default table;

package/dist/lib/components/tabs.d.ts

@@ -0,0 +1,52 @@
+interface TabItem {
+    id?: string;
+    label: string;
+    content?: string;
+    icon?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface TabsOptions {
+    items?: TabItem[];
+    defaultTab?: string;
+    class?: string;
+    style?: string;
+    target?: string;
+    tabListClass?: string;
+    tabClass?: string;
+    tabActiveClass?: string;
+    panelClass?: string;
+}
+declare class Tabs {
+    id: string;
+    opts: TabsOptions;
+    private _element;
+    private _tabList;
+    private _panelContainer;
+    private _items;
+    private _value;
+    private _onChange;
+    constructor(id: string, options?: TabsOptions);
+    addItem(item: TabItem): this;
+    addItems(items: TabItem[]): this;
+    removeItem(key: string | number): this;
+    updateItem(key: string | number, updates: Partial<TabItem>): this;
+    clearItems(): this;
+    getItems(): TabItem[];
+    getCount(): number;
+    /** Get the panel element for a tab so you can render jux components into it */
+    getPanel(tabId: string): HTMLElement | null;
+    getValue(): string | null;
+    setValue(val: string | null): this;
+    getElement(): HTMLElement;
+    onChange(fn: (value: string | null) => void): this;
+    private _renderTab;
+    private _renderPanel;
+    private _renderAll;
+    private _updateActiveState;
+    private _dispatchChange;
+}
+export declare function tabs(id: string, options?: TabsOptions): Tabs;
+export { Tabs, TabItem, TabsOptions };
+export default tabs;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/lib/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs.ts"],"names":[],"mappings":"AAGA,UAAU,OAAO;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,WAAW;IACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAiD;gBAEtD,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgDjD,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAU5B,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI;IAchC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAetC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI;IAWjE,UAAU,IAAI,IAAI;IASlB,QAAQ,IAAI,OAAO,EAAE;IACrB,QAAQ,IAAI,MAAM;IAMlB,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAQ3C,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAMlC,UAAU,IAAI,WAAW;IAEzB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IASlD,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,eAAe;CAI1B;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AACtC,eAAe,IAAI,CAAC"}

package/dist/lib/components/tabs.js

@@ -0,0 +1,206 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Tabs {
+    constructor(id, options = {}) {
+        this._items = [];
+        this._value = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            tabListClass: 'jux-tabs-list',
+            tabClass: 'jux-tab',
+            tabActiveClass: 'jux-tab--active',
+            panelClass: 'jux-tab-panel',
+            ...options
+        };
+        this._element = document.createElement('div');
+        this._element.id = this.id;
+        this._element.setAttribute('data-jux-tabs', '');
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        // Tab list (the clickable triggers)
+        this._tabList = document.createElement('div');
+        this._tabList.className = this.opts.tabListClass;
+        this._tabList.setAttribute('role', 'tablist');
+        this._element.appendChild(this._tabList);
+        // Panel container (the content areas)
+        this._panelContainer = document.createElement('div');
+        this._panelContainer.className = 'jux-tabs-panels';
+        this._element.appendChild(this._panelContainer);
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+        if (this.opts.items) {
+            this.addItems(this.opts.items);
+        }
+        if (this.opts.defaultTab) {
+            this.setValue(this.opts.defaultTab);
+        }
+        else if (this._items.length > 0) {
+            this.setValue(this._items[0].id);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // STANDARD COLLECTION API
+    // ═══════════════════════════════════════════════════════════
+    addItem(item) {
+        const tabItem = { ...item, id: item.id || `${this.id}-tab-${this._items.length}` };
+        this._items.push(tabItem);
+        this._renderTab(tabItem);
+        this._renderPanel(tabItem);
+        if (this._items.length === 1)
+            this.setValue(tabItem.id);
+        this._dispatchChange();
+        return this;
+    }
+    addItems(items) {
+        for (const item of items) {
+            const tabItem = { ...item, id: item.id || `${this.id}-tab-${this._items.length}` };
+            this._items.push(tabItem);
+            this._renderTab(tabItem);
+            this._renderPanel(tabItem);
+        }
+        if (this._items.length > 0 && !this._value) {
+            this.setValue(this._items[0].id);
+        }
+        this._dispatchChange();
+        return this;
+    }
+    removeItem(key) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            const removed = this._items.splice(idx, 1)[0];
+            this._renderAll();
+            if (this._value === removed.id && this._items.length > 0) {
+                this.setValue(this._items[0].id);
+            }
+            else if (this._items.length === 0) {
+                this._value = null;
+            }
+            this._dispatchChange();
+        }
+        return this;
+    }
+    updateItem(key, updates) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items[idx] = { ...this._items[idx], ...updates };
+            this._renderAll();
+            this._updateActiveState();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    clearItems() {
+        this._items = [];
+        this._value = null;
+        this._tabList.innerHTML = '';
+        this._panelContainer.innerHTML = '';
+        this._dispatchChange();
+        return this;
+    }
+    getItems() { return [...this._items]; }
+    getCount() { return this._items.length; }
+    // ═══════════════════════════════════════════════════════════
+    // PANEL ACCESS (for rendering content into tab panels)
+    // ═══════════════════════════════════════════════════════════
+    /** Get the panel element for a tab so you can render jux components into it */
+    getPanel(tabId) {
+        return this._panelContainer.querySelector(`[data-tab-panel="${tabId}"]`);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._value; }
+    setValue(val) {
+        this._value = val;
+        this._updateActiveState();
+        return this;
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL
+    // ═══════════════════════════════════════════════════════════
+    _renderTab(item) {
+        const btn = document.createElement('button');
+        btn.id = `${item.id}-trigger`;
+        btn.className = this.opts.tabClass;
+        btn.setAttribute('role', 'tab');
+        btn.setAttribute('data-tab-id', item.id);
+        btn.textContent = item.label;
+        if (item.disabled) {
+            btn.disabled = true;
+            btn.setAttribute('data-disabled', 'true');
+        }
+        btn.addEventListener('click', () => {
+            if (item.disabled)
+                return;
+            this._value = item.id;
+            this._updateActiveState();
+            if (this._onChange)
+                this._onChange(this._value);
+            this._element.dispatchEvent(new Event('change', { bubbles: false }));
+        });
+        this._tabList.appendChild(btn);
+    }
+    _renderPanel(item) {
+        const panel = document.createElement('div');
+        panel.id = `${item.id}-panel`;
+        panel.className = this.opts.panelClass;
+        panel.setAttribute('role', 'tabpanel');
+        panel.setAttribute('data-tab-panel', item.id);
+        if (item.content)
+            panel.innerHTML = item.content;
+        panel.style.display = 'none';
+        this._panelContainer.appendChild(panel);
+    }
+    _renderAll() {
+        this._tabList.innerHTML = '';
+        this._panelContainer.innerHTML = '';
+        for (const item of this._items) {
+            this._renderTab(item);
+            this._renderPanel(item);
+        }
+        this._updateActiveState();
+    }
+    _updateActiveState() {
+        // Tabs
+        const tabs = this._tabList.querySelectorAll('[role="tab"]');
+        tabs.forEach(tab => {
+            const tabId = tab.getAttribute('data-tab-id');
+            if (tabId === this._value) {
+                tab.classList.add(this.opts.tabActiveClass);
+                tab.setAttribute('aria-selected', 'true');
+            }
+            else {
+                tab.classList.remove(this.opts.tabActiveClass);
+                tab.setAttribute('aria-selected', 'false');
+            }
+        });
+        // Panels
+        const panels = this._panelContainer.querySelectorAll('[role="tabpanel"]');
+        panels.forEach(panel => {
+            const panelId = panel.getAttribute('data-tab-panel');
+            panel.style.display = panelId === this._value ? '' : 'none';
+        });
+    }
+    _dispatchChange() {
+        this._element.setAttribute('data-count', String(this._items.length));
+        this._element.dispatchEvent(new Event('change', { bubbles: false }));
+    }
+}
+export function tabs(id, options = {}) {
+    const t = new Tabs(id, options);
+    pageState.__register(t);
+    return t;
+}
+export { Tabs };
+export default tabs;