juxscript 1.1.301 → 1.1.303

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

@@ -0,0 +1,33 @@
+interface ButtonOptions {
+    content?: string;
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+    style?: string;
+    target?: string;
+    icon?: string;
+    [key: string]: any;
+}
+declare class Button {
+    id: string;
+    opts: ButtonOptions;
+    private _element;
+    private _onChange;
+    constructor(id: string, options?: ButtonOptions);
+    getValue(): string;
+    getContent(): string;
+    setValue(val: string): this;
+    setContent(val: string): this;
+    setDisabled(val: boolean): this;
+    setClass(val: string): this;
+    setStyle(val: string): this;
+    getElement(): HTMLButtonElement;
+    onChange(fn: (value: string) => void): this;
+}
+export declare function button(id: string, options?: ButtonOptions): Button;
+export declare function btn(id: string, options?: ButtonOptions): Button;
+export { Button, ButtonOptions };
+export default button;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../lib/components/button.ts"],"names":[],"mappings":"AAIA,UAAU,aAAa;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;IACjF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,MAAM;IACR,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,SAAS,CAA0C;gBAE/C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IA4DnD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI;IAM/B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,UAAU,IAAI,iBAAiB;IAE/B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;CAI9C;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAItE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAInE;AAED,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AACjC,eAAe,MAAM,CAAC"}

package/dist/lib/components/button.js

@@ -0,0 +1,107 @@
+import generateId from '../utils/idgen.js';
+import niceName from '../utils/niceName.js';
+import { pageState } from '../state/pageState.js';
+class Button {
+    constructor(id, options = {}) {
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            variant: 'default',
+            size: 'default',
+            type: 'button',
+            disabled: false,
+            ...options
+        };
+        // Auto-generate content from ID if not provided
+        if (!this.opts.content && this.id) {
+            this.opts.content = niceName(this.id);
+        }
+        this._element = document.createElement('button');
+        this._element.id = this.id;
+        this._element.type = this.opts.type;
+        if (this.opts.disabled)
+            this._element.disabled = true;
+        // Build class list
+        const classes = ['jux-button'];
+        if (this.opts.variant)
+            classes.push(`jux-button--${this.opts.variant}`);
+        if (this.opts.size && this.opts.size !== 'default')
+            classes.push(`jux-button--${this.opts.size}`);
+        if (this.opts.class)
+            classes.push(this.opts.class);
+        this._element.className = classes.join(' ');
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        // Content
+        if (this.opts.icon) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'jux-button-icon';
+            iconSpan.textContent = this.opts.icon;
+            this._element.appendChild(iconSpan);
+        }
+        if (this.opts.content) {
+            const textSpan = document.createElement('span');
+            textSpan.className = 'jux-button-text';
+            textSpan.textContent = this.opts.content;
+            this._element.appendChild(textSpan);
+        }
+        // Extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['content', 'class', 'style', 'target', 'variant', 'size', 'type', 'disabled', 'icon'].includes(key))
+                continue;
+            this._element.setAttribute(`data-${key}`, String(value));
+        }
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this.opts.content ?? ''; }
+    getContent() { return this.opts.content ?? ''; }
+    setValue(val) {
+        this.opts.content = val;
+        const textEl = this._element.querySelector('.jux-button-text');
+        if (textEl) {
+            textEl.textContent = val;
+        }
+        else {
+            this._element.textContent = val;
+        }
+        return this;
+    }
+    setContent(val) { return this.setValue(val); }
+    setDisabled(val) {
+        this.opts.disabled = val;
+        this._element.disabled = val;
+        return this;
+    }
+    setClass(val) {
+        this._element.className = val;
+        return this;
+    }
+    setStyle(val) {
+        this._element.setAttribute('style', val);
+        return this;
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+}
+export function button(id, options = {}) {
+    const b = new Button(id, options);
+    pageState.__register(b);
+    return b;
+}
+export function btn(id, options = {}) {
+    const b = new Button(id, options);
+    pageState.__register(b);
+    return b;
+}
+export { Button };
+export default button;

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

@@ -0,0 +1,35 @@
+interface LinkOptions {
+    content?: string;
+    href?: string;
+    spa?: boolean;
+    external?: boolean;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    target?: string;
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    icon?: string;
+    [key: string]: any;
+}
+declare class Link {
+    id: string;
+    opts: LinkOptions;
+    private _element;
+    private _onChange;
+    constructor(id: string, options?: LinkOptions);
+    getValue(): string;
+    getContent(): string;
+    setValue(val: string): this;
+    setContent(val: string): this;
+    setHref(val: string): this;
+    setDisabled(val: boolean): this;
+    setClass(val: string): this;
+    setStyle(val: string): this;
+    getElement(): HTMLAnchorElement;
+    onChange(fn: (value: string) => void): this;
+}
+export declare function link(id: string, options?: LinkOptions): Link;
+export declare function a(id: string, options?: LinkOptions): Link;
+export { Link, LinkOptions };
+export default link;
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../lib/components/link.ts"],"names":[],"mappings":"AAIA,UAAU,WAAW;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,SAAS,CAA0C;gBAE/C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IA4EjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW7B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE1B,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI;IAU/B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,UAAU,IAAI,iBAAiB;IAE/B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;CAI9C;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAI7D;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;AAC7B,eAAe,IAAI,CAAC"}

package/dist/lib/components/link.js

@@ -0,0 +1,135 @@
+import generateId from '../utils/idgen.js';
+import niceName from '../utils/niceName.js';
+import { pageState } from '../state/pageState.js';
+class Link {
+    constructor(id, options = {}) {
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            spa: true,
+            external: false,
+            disabled: false,
+            ...options
+        };
+        // Auto-generate content from ID if not provided
+        if (!this.opts.content && this.id) {
+            this.opts.content = niceName(this.id);
+        }
+        this._element = document.createElement('a');
+        this._element.id = this.id;
+        this._element.className = this.opts.class || 'jux-link';
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        if (this.opts.href)
+            this._element.href = this.opts.href;
+        if (this.opts.disabled)
+            this._element.setAttribute('data-disabled', 'true');
+        // External link handling
+        if (this.opts.external || this.opts.linkTarget === '_blank') {
+            this._element.target = this.opts.linkTarget || '_blank';
+            this._element.rel = 'noopener noreferrer';
+        }
+        // Content
+        if (this.opts.icon) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'jux-link-icon';
+            iconSpan.textContent = this.opts.icon;
+            this._element.appendChild(iconSpan);
+        }
+        if (this.opts.content) {
+            const textSpan = document.createElement('span');
+            textSpan.className = 'jux-link-text';
+            textSpan.textContent = this.opts.content;
+            this._element.appendChild(textSpan);
+        }
+        // Extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['content', 'class', 'style', 'target', 'href', 'spa', 'external', 'disabled', 'icon', 'linkTarget'].includes(key))
+                continue;
+            this._element.setAttribute(`data-${key}`, String(value));
+        }
+        // SPA navigation
+        if (this.opts.spa && !this.opts.external) {
+            this._element.addEventListener('click', (e) => {
+                if (this.opts.disabled) {
+                    e.preventDefault();
+                    return;
+                }
+                const href = this._element.href;
+                if (href && !href.startsWith('http') && !href.startsWith('//')) {
+                    e.preventDefault();
+                    const path = new URL(href, window.location.origin).pathname;
+                    if (typeof window.navigateTo === 'function') {
+                        window.navigateTo(path);
+                    }
+                    else {
+                        window.history.pushState({}, '', path);
+                        window.dispatchEvent(new PopStateEvent('popstate'));
+                    }
+                }
+            });
+        }
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this.opts.href ?? ''; }
+    getContent() { return this.opts.content ?? ''; }
+    setValue(val) {
+        this.opts.href = val;
+        this._element.href = val;
+        return this;
+    }
+    setContent(val) {
+        this.opts.content = val;
+        const textEl = this._element.querySelector('.jux-link-text');
+        if (textEl) {
+            textEl.textContent = val;
+        }
+        else {
+            this._element.textContent = val;
+        }
+        return this;
+    }
+    setHref(val) { return this.setValue(val); }
+    setDisabled(val) {
+        this.opts.disabled = val;
+        if (val) {
+            this._element.setAttribute('data-disabled', 'true');
+        }
+        else {
+            this._element.removeAttribute('data-disabled');
+        }
+        return this;
+    }
+    setClass(val) {
+        this._element.className = val;
+        return this;
+    }
+    setStyle(val) {
+        this._element.setAttribute('style', val);
+        return this;
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+}
+export function link(id, options = {}) {
+    const l = new Link(id, options);
+    pageState.__register(l);
+    return l;
+}
+export function a(id, options = {}) {
+    const l = new Link(id, options);
+    pageState.__register(l);
+    return l;
+}
+export { Link };
+export default link;

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

@@ -0,0 +1,48 @@
+interface ListItem {
+    id?: string;
+    content: string;
+    icon?: string;
+    class?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface ListOptions {
+    items?: ListItem[];
+    ordered?: boolean;
+    selectable?: boolean;
+    class?: string;
+    style?: string;
+    target?: string;
+    itemClass?: string;
+    activeClass?: string;
+}
+declare class List {
+    id: string;
+    opts: ListOptions;
+    private _element;
+    private _items;
+    private _value;
+    private _selectedIndex;
+    private _onChange;
+    constructor(id: string, options?: ListOptions);
+    addItem(item: ListItem): this;
+    addItems(items: ListItem[]): this;
+    removeItem(key: string | number): this;
+    updateItem(key: string | number, updates: Partial<ListItem>): this;
+    clearItems(): this;
+    getItems(): ListItem[];
+    getCount(): number;
+    getValue(): string | null;
+    setValue(val: string | null): this;
+    getContent(): string;
+    getElement(): HTMLElement;
+    onChange(fn: (value: string | null) => void): this;
+    private _renderItem;
+    private _renderAll;
+    private _updateActiveState;
+    private _dispatchChange;
+}
+export declare function list(id: string, options?: ListOptions): List;
+export { List, ListItem, ListOptions };
+export default list;
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../lib/components/list.ts"],"names":[],"mappings":"AAIA,UAAU,QAAQ;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,WAAW;IACjB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,SAAS,CAAiD;gBAEtD,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgCjD,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAY7B,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI;IAcjC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAUtC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI;IAUlE,UAAU,IAAI,IAAI;IASlB,QAAQ,IAAI,QAAQ,EAAE;IACtB,QAAQ,IAAI,MAAM;IAMlB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQlC,UAAU,IAAI,MAAM;IAIpB,UAAU,IAAI,WAAW;IAEzB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IASlD,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;CAI1B;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;AACvC,eAAe,IAAI,CAAC"}

package/dist/lib/components/list.js

@@ -0,0 +1,178 @@
+import generateId from '../utils/idgen.js';
+import niceName from '../utils/niceName.js';
+import { pageState } from '../state/pageState.js';
+class List {
+    constructor(id, options = {}) {
+        this._items = [];
+        this._value = null;
+        this._selectedIndex = -1;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            ordered: false,
+            selectable: false,
+            itemClass: 'jux-list-item',
+            activeClass: 'jux-list-item--active',
+            ...options
+        };
+        const tagName = this.opts.ordered ? 'ol' : 'ul';
+        this._element = document.createElement(tagName);
+        this._element.id = this.id;
+        this._element.setAttribute('role', 'list');
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        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 listItem = {
+            ...item,
+            id: item.id || `${this.id}-item-${this._items.length}`,
+            content: item.content || niceName(item.id || `item-${this._items.length}`)
+        };
+        this._items.push(listItem);
+        this._renderItem(listItem);
+        this._dispatchChange();
+        return this;
+    }
+    addItems(items) {
+        for (const item of items) {
+            const listItem = {
+                ...item,
+                id: item.id || `${this.id}-item-${this._items.length}`,
+                content: item.content || niceName(item.id || `item-${this._items.length}`)
+            };
+            this._items.push(listItem);
+            this._renderItem(listItem);
+        }
+        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._selectedIndex = -1;
+        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._selectedIndex = this._items.findIndex(i => i.id === val);
+        this._updateActiveState();
+        this._dispatchChange();
+        return this;
+    }
+    getContent() {
+        return this._items.map(i => i.content).join(', ');
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL
+    // ═══════════════════════════════════════════════════════════
+    _renderItem(item) {
+        const li = document.createElement('li');
+        li.id = item.id;
+        li.className = item.class || this.opts.itemClass || 'jux-list-item';
+        li.setAttribute('role', 'listitem');
+        if (item.icon) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'jux-list-item-icon';
+            iconSpan.textContent = item.icon;
+            li.appendChild(iconSpan);
+            const textSpan = document.createElement('span');
+            textSpan.className = 'jux-list-item-text';
+            textSpan.textContent = item.content;
+            li.appendChild(textSpan);
+        }
+        else {
+            li.textContent = item.content;
+        }
+        if (item.disabled)
+            li.setAttribute('data-disabled', 'true');
+        if (this.opts.selectable) {
+            li.style.cursor = 'pointer';
+            li.addEventListener('click', () => {
+                if (item.disabled)
+                    return;
+                this._value = item.id;
+                this._selectedIndex = this._items.indexOf(item);
+                this._updateActiveState();
+                if (this._onChange)
+                    this._onChange(this._value);
+                this._element.dispatchEvent(new Event('change', { bubbles: false }));
+            });
+        }
+        this._element.appendChild(li);
+    }
+    _renderAll() {
+        this._element.innerHTML = '';
+        for (const item of this._items) {
+            this._renderItem(item);
+        }
+        this._updateActiveState();
+    }
+    _updateActiveState() {
+        const children = this._element.querySelectorAll('[role="listitem"]');
+        children.forEach((el, idx) => {
+            if (idx === this._selectedIndex) {
+                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 list(id, options = {}) {
+    const l = new List(id, options);
+    pageState.__register(l);
+    return l;
+}
+export { List };
+export default list;

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

@@ -0,0 +1,46 @@
+interface NavItem {
+    id?: string;
+    label: string;
+    path?: string;
+    icon?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface NavOptions {
+    label?: string;
+    items?: NavItem[];
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    style?: string;
+    target?: string;
+    activeClass?: string;
+    itemClass?: string;
+}
+declare class Nav {
+    id: string;
+    opts: NavOptions;
+    private _element;
+    private _items;
+    private _value;
+    private _onChange;
+    constructor(id: string, options?: NavOptions);
+    addItem(item: NavItem): this;
+    addItems(items: NavItem[]): this;
+    removeItem(key: string | number): this;
+    updateItem(key: string | number, updates: Partial<NavItem>): this;
+    clearItems(): this;
+    getItems(): NavItem[];
+    getCount(): number;
+    getValue(): string | null;
+    setValue(val: string | null): this;
+    getElement(): HTMLElement;
+    onChange(fn: (value: string | null) => void): this;
+    private _renderItem;
+    private _renderAll;
+    private _updateActiveState;
+    private _dispatchChange;
+}
+export declare function nav(id: string, options?: NavOptions): Nav;
+export { Nav, NavItem, NavOptions };
+export default nav;
+//# sourceMappingURL=nav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../lib/components/nav.ts"],"names":[],"mappings":"AAIA,UAAU,OAAO;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,UAAU;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAiD;gBAEtD,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IA+BhD,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAY5B,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI;IAchC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAUtC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI;IAUjE,UAAU,IAAI,IAAI;IAQlB,QAAQ,IAAI,OAAO,EAAE;IACrB,QAAQ,IAAI,MAAM;IAMlB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOlC,UAAU,IAAI,WAAW;IAEzB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IASlD,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,eAAe;CAI1B;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,GAAG,CAI7D;AAED,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AACpC,eAAe,GAAG,CAAC"}