npm - juxscript - Versions diffs - 1.1.350 → 1.1.352 - Mend

juxscript 1.1.350 → 1.1.352

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/dist/lib/components/blocks/menu.d.ts +40 -0
package/dist/lib/components/blocks/menu.d.ts.map +1 -0
package/dist/lib/components/blocks/menu.js +136 -0
package/dist/lib/components/button.d.ts +33 -0
package/dist/lib/components/button.d.ts.map +1 -0
package/dist/lib/components/button.js +107 -0
package/dist/lib/components/checkbox.d.ts +62 -0
package/dist/lib/components/checkbox.d.ts.map +1 -0
package/dist/lib/components/checkbox.js +178 -0
package/dist/lib/components/container.d.ts +58 -0
package/dist/lib/components/container.d.ts.map +1 -0
package/dist/lib/components/container.js +151 -0
package/dist/lib/components/data.d.ts +58 -0
package/dist/lib/components/data.d.ts.map +1 -0
package/dist/lib/components/data.js +130 -0
package/dist/lib/components/grid.d.ts +58 -0
package/dist/lib/components/grid.d.ts.map +1 -0
package/dist/lib/components/grid.js +127 -0
package/dist/lib/components/include.d.ts +86 -0
package/dist/lib/components/include.d.ts.map +1 -0
package/dist/lib/components/include.js +238 -0
package/dist/lib/components/input.d.ts +58 -0
package/dist/lib/components/input.d.ts.map +1 -0
package/dist/lib/components/input.js +161 -0
package/dist/lib/components/link.d.ts +35 -0
package/dist/lib/components/link.d.ts.map +1 -0
package/dist/lib/components/link.js +135 -0
package/dist/lib/components/list.d.ts +48 -0
package/dist/lib/components/list.d.ts.map +1 -0
package/dist/lib/components/list.js +178 -0
package/dist/lib/components/nav.d.ts +46 -0
package/dist/lib/components/nav.d.ts.map +1 -0
package/dist/lib/components/nav.js +189 -0
package/dist/lib/components/radio.d.ts +40 -0
package/dist/lib/components/radio.d.ts.map +1 -0
package/dist/lib/components/radio.js +112 -0
package/dist/lib/components/select.d.ts +41 -0
package/dist/lib/components/select.d.ts.map +1 -0
package/dist/lib/components/select.js +111 -0
package/dist/lib/components/sidebar.d.ts +40 -0
package/dist/lib/components/sidebar.d.ts.map +1 -0
package/dist/lib/components/sidebar.js +141 -0
package/dist/lib/components/store.d.ts +78 -0
package/dist/lib/components/store.d.ts.map +1 -0
package/dist/lib/components/store.js +248 -0
package/dist/lib/components/style.d.ts +27 -0
package/dist/lib/components/style.d.ts.map +1 -0
package/dist/lib/components/style.js +52 -0
package/dist/lib/components/table.d.ts +56 -0
package/dist/lib/components/table.d.ts.map +1 -0
package/dist/lib/components/table.js +199 -0
package/dist/lib/components/tabs.d.ts +52 -0
package/dist/lib/components/tabs.d.ts.map +1 -0
package/dist/lib/components/tabs.js +206 -0
package/dist/lib/components/tag.d.ts +41 -0
package/dist/lib/components/tag.d.ts.map +1 -0
package/dist/lib/components/tag.js +103 -0
package/dist/lib/devtools/devtools.d.ts +3 -0
package/dist/lib/devtools/devtools.d.ts.map +1 -0
package/dist/lib/devtools/devtools.js +181 -0
package/dist/lib/index.d.ts +68 -0
package/dist/lib/index.d.ts.map +1 -0
package/dist/lib/index.js +63 -0
package/dist/lib/state/pageState.d.ts +19 -0
package/dist/lib/state/pageState.d.ts.map +1 -0
package/dist/lib/state/pageState.js +360 -0
package/dist/lib/utils/codeHighlight.d.ts +7 -0
package/dist/lib/utils/codeHighlight.d.ts.map +1 -0
package/dist/lib/utils/codeHighlight.js +105 -0
package/dist/lib/utils/codeparser.d.ts +29 -0
package/dist/lib/utils/codeparser.d.ts.map +1 -0
package/dist/lib/utils/codeparser.js +384 -0
package/dist/lib/utils/fetch.d.ts +176 -0
package/dist/lib/utils/fetch.d.ts.map +1 -0
package/dist/lib/utils/fetch.js +427 -0
package/dist/lib/utils/formatId.d.ts +16 -0
package/dist/lib/utils/formatId.d.ts.map +1 -0
package/dist/lib/utils/formatId.js +27 -0
package/dist/lib/utils/idgen.d.ts +2 -0
package/dist/lib/utils/idgen.d.ts.map +1 -0
package/dist/lib/utils/idgen.js +4 -0
package/dist/lib/utils/niceName.d.ts +14 -0
package/dist/lib/utils/niceName.d.ts.map +1 -0
package/dist/lib/utils/niceName.js +22 -0
package/package.json +1 -1

package/dist/lib/components/include.js ADDED Viewed

@@ -0,0 +1,238 @@
+/**
+ * Include - Simplified resource injection for bundled and external resources
+ * Supports page-specific scoping and cleanup
+ */
+// Global registry for page-scoped resources
+const scopedResources = new Map();
+export class Include {
+    constructor(url, options = {}) {
+        this.element = null;
+        this.pageId = null;
+        this.url = url;
+        this.options = options;
+        // Auto-detect type from extension if not provided
+        if (!options.type) {
+            if (url.endsWith('.css')) {
+                this.options.type = 'css';
+            }
+            else if (url.endsWith('.mjs') || url.endsWith('.module.js')) {
+                this.options.type = 'module';
+            }
+            else {
+                this.options.type = 'js';
+            }
+        }
+    }
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+    css() {
+        this.options.type = 'css';
+        return this;
+    }
+    js() {
+        this.options.type = 'js';
+        return this;
+    }
+    module() {
+        this.options.type = 'module';
+        return this;
+    }
+    async() {
+        this.options.async = true;
+        return this;
+    }
+    defer() {
+        this.options.defer = true;
+        return this;
+    }
+    /**
+     * Inject into specific container instead of <head>
+     * Useful for page-specific styles
+     *
+     * @example
+     * jux.include('/css/page1.css').into('#page1-container');
+     */
+    into(selector) {
+        this.options.target = selector;
+        return this;
+    }
+    /**
+     * Mark as page-scoped for automatic cleanup
+     *
+     * @example
+     * jux.include('/css/dashboard.css').forPage('dashboard');
+     * // Later: Include.cleanupPage('dashboard');
+     */
+    forPage(pageId) {
+        this.pageId = pageId;
+        this.options.pageScoped = true;
+        return this;
+    }
+    /* -------------------------
+     * Render
+     * ------------------------- */
+    render() {
+        if (typeof document === 'undefined')
+            return this;
+        try {
+            // Check if already loaded
+            if (this.isAlreadyLoaded()) {
+                console.log(`⚠️  Resource already loaded: ${this.url}`);
+                return this;
+            }
+            // Create element based on type
+            let element;
+            switch (this.options.type) {
+                case 'css':
+                    element = this.createStylesheet();
+                    break;
+                case 'js':
+                case 'module':
+                    element = this.createScript();
+                    break;
+                default:
+                    throw new Error(`Unknown resource type: ${this.options.type}`);
+            }
+            // Get target container
+            const container = this.getContainer();
+            container.appendChild(element);
+            this.element = element;
+            // Register for page cleanup if needed
+            if (this.options.pageScoped && this.pageId) {
+                if (!scopedResources.has(this.pageId)) {
+                    scopedResources.set(this.pageId, new Set());
+                }
+                scopedResources.get(this.pageId).add(element);
+            }
+            console.log(`✓ Loaded ${this.options.type}: ${this.url}`);
+        }
+        catch (error) {
+            console.error(`✗ Failed to load ${this.options.type}: ${this.url}`, error);
+            throw error;
+        }
+        return this;
+    }
+    /* -------------------------
+     * Element Creation
+     * ------------------------- */
+    createStylesheet() {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = this.url;
+        link.dataset.juxInclude = this.url;
+        if (this.options.crossOrigin)
+            link.crossOrigin = this.options.crossOrigin;
+        if (this.options.integrity)
+            link.integrity = this.options.integrity;
+        link.onload = () => console.log(`✓ Stylesheet loaded: ${this.url}`);
+        link.onerror = () => {
+            throw new Error(`Failed to load stylesheet: ${this.url}`);
+        };
+        return link;
+    }
+    createScript() {
+        const script = document.createElement('script');
+        script.src = this.url;
+        script.dataset.juxInclude = this.url;
+        if (this.options.type === 'module')
+            script.type = 'module';
+        if (this.options.async)
+            script.async = true;
+        if (this.options.defer)
+            script.defer = true;
+        if (this.options.crossOrigin)
+            script.crossOrigin = this.options.crossOrigin;
+        if (this.options.integrity)
+            script.integrity = this.options.integrity;
+        script.onload = () => console.log(`✓ Script loaded: ${this.url}`);
+        script.onerror = () => {
+            throw new Error(`Failed to load script: ${this.url}`);
+        };
+        return script;
+    }
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+    getContainer() {
+        if (this.options.target) {
+            const container = document.querySelector(this.options.target);
+            if (!container) {
+                throw new Error(`Target container not found: ${this.options.target}`);
+            }
+            return container;
+        }
+        return document.head;
+    }
+    isAlreadyLoaded() {
+        const selector = `[data-jux-include="${this.url}"]`;
+        return document.querySelector(selector) !== null;
+    }
+    remove() {
+        if (this.element?.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+            this.element = null;
+        }
+        return this;
+    }
+    /* -------------------------
+     * Static Page Cleanup
+     * ------------------------- */
+    /**
+     * Remove all resources for a specific page
+     *
+     * @example
+     * Include.cleanupPage('dashboard');
+     */
+    static cleanupPage(pageId) {
+        const resources = scopedResources.get(pageId);
+        if (!resources)
+            return;
+        resources.forEach(element => {
+            element.parentNode?.removeChild(element);
+        });
+        scopedResources.delete(pageId);
+        console.log(`✓ Cleaned up page resources: ${pageId}`);
+    }
+    /**
+     * Remove all page-scoped resources
+     */
+    static cleanupAll() {
+        scopedResources.forEach((resources, pageId) => {
+            resources.forEach(element => {
+                element.parentNode?.removeChild(element);
+            });
+        });
+        scopedResources.clear();
+        console.log('✓ Cleaned up all page-scoped resources');
+    }
+}
+/**
+ * Factory function - simplified usage
+ *
+ * Usage:
+ *   // Basic (auto-detects from extension)
+ *   jux.include('/css/styles.css');
+ *   jux.include('/js/app.js');
+ *
+ *   // Page-specific with cleanup
+ *   jux.include('/css/dashboard.css').forPage('dashboard');
+ *   jux.include('/js/dashboard.js').forPage('dashboard');
+ *
+ *   // Later cleanup:
+ *   Include.cleanupPage('dashboard');
+ *
+ *   // Inject into specific container
+ *   jux.include('/css/widget.css').into('#widget-container');
+ *
+ *   // External CDN
+ *   jux.include('https://cdn.tailwindcss.com').js();
+ *
+ *   // Module
+ *   jux.include('/js/app.mjs').module();
+ */
+export function include(url, options) {
+    const inc = new Include(url, options);
+    inc.render();
+    return inc;
+}

package/dist/lib/components/input.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'color' | 'range' | 'file' | 'hidden';
+interface InputOptions {
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
+    pattern?: string;
+    autocomplete?: string;
+    class?: string;
+    style?: string;
+}
+declare class Input {
+    id: string;
+    options: InputOptions;
+    private _element;
+    private _wrapper;
+    private _onChange;
+    constructor(id: string, options?: InputOptions);
+    type(value: InputType): this;
+    label(value: string): this;
+    placeholder(value: string): this;
+    value(value: string): this;
+    name(value: string): this;
+    required(value?: boolean): this;
+    disabled(value?: boolean): this;
+    readonly(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    onChange(fn: (value: string, event: Event) => void): this;
+    getValue(): string;
+    getFiles(): FileList | null;
+    setValue(val: string): this;
+    setContent(val: string): this;
+    render(target?: string | HTMLElement): this;
+}
+export declare function input(id: string, options?: InputOptions): Input;
+export declare function email(id: string, options?: InputOptions): Input;
+export declare function password(id: string, options?: InputOptions): Input;
+export declare function number(id: string, options?: InputOptions): Input;
+export declare function tel(id: string, options?: InputOptions): Input;
+export declare function url(id: string, options?: InputOptions): Input;
+export declare function search(id: string, options?: InputOptions): Input;
+export declare function date(id: string, options?: InputOptions): Input;
+export declare function time(id: string, options?: InputOptions): Input;
+export declare function datetime(id: string, options?: InputOptions): Input;
+export declare function color(id: string, options?: InputOptions): Input;
+export declare function range(id: string, options?: InputOptions): Input;
+export declare function file(id: string, options?: InputOptions): Input;
+export declare function hidden(id: string, options?: InputOptions): Input;
+export { Input, InputOptions };
+//# sourceMappingURL=input.d.ts.map

package/dist/lib/components/input.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../lib/components/input.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/input.js ADDED Viewed

@@ -0,0 +1,161 @@
+import generateId from '../utils/idgen.js';
+import niceName from '../utils/niceName.js';
+import { pageState } from '../state/pageState.js';
+class Input {
+    constructor(id, options = {}) {
+        this._element = null;
+        this._wrapper = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.options = {
+            type: 'text',
+            ...options
+        };
+        // Auto-generate label from ID if not provided
+        if (!this.options.label && this.id) {
+            this.options.label = niceName(this.id);
+        }
+    }
+    // Fluent API
+    type(value) { this.options.type = value; return this; }
+    label(value) { this.options.label = value; return this; }
+    placeholder(value) { this.options.placeholder = value; return this; }
+    value(value) { this.options.value = value; if (this._element)
+        this._element.value = value; return this; }
+    name(value) { this.options.name = value; return this; }
+    required(value = true) { this.options.required = value; return this; }
+    disabled(value = true) { this.options.disabled = value; if (this._element)
+        this._element.disabled = value; return this; }
+    readonly(value = true) { this.options.readonly = value; return this; }
+    style(value) { this.options.style = value; return this; }
+    class(value) { this.options.class = value; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        return this._element?.value ?? this.options.value ?? '';
+    }
+    getFiles() {
+        return this._element?.files ?? null;
+    }
+    setValue(val) {
+        if (this._element)
+            this._element.value = val;
+        this.options.value = val;
+        return this;
+    }
+    setContent(val) {
+        return this.setValue(val);
+    }
+    render(target) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-input';
+        wrapper.id = `${this.id}-wrapper`;
+        if (this.options.class)
+            wrapper.className += ` ${this.options.class}`;
+        if (this.options.style)
+            wrapper.setAttribute('style', this.options.style);
+        if (this.options.label) {
+            const labelEl = document.createElement('label');
+            labelEl.htmlFor = this.id;
+            labelEl.textContent = this.options.label;
+            labelEl.className = 'jux-input-label';
+            wrapper.appendChild(labelEl);
+        }
+        const input = document.createElement('input');
+        input.id = this.id;
+        input.type = this.options.type || 'text';
+        input.className = 'jux-input-element';
+        if (this.options.placeholder)
+            input.placeholder = this.options.placeholder;
+        if (this.options.value)
+            input.value = this.options.value;
+        if (this.options.name)
+            input.name = this.options.name;
+        if (this.options.required)
+            input.required = true;
+        if (this.options.disabled)
+            input.disabled = true;
+        if (this.options.readonly)
+            input.readOnly = true;
+        if (this.options.min != null)
+            input.min = String(this.options.min);
+        if (this.options.max != null)
+            input.max = String(this.options.max);
+        if (this.options.step != null)
+            input.step = String(this.options.step);
+        if (this.options.pattern)
+            input.pattern = this.options.pattern;
+        if (this.options.autocomplete)
+            input.autocomplete = this.options.autocomplete;
+        input.addEventListener('input', (e) => {
+            if (this._onChange)
+                this._onChange(input.value, e);
+        });
+        // For file inputs, also listen to 'change'
+        if (this.options.type === 'file') {
+            input.addEventListener('change', (e) => {
+                if (this._onChange)
+                    this._onChange(input.value, e);
+            });
+        }
+        wrapper.appendChild(input);
+        this._element = input;
+        this._wrapper = wrapper;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+export function input(id, options = {}) {
+    const inp = new Input(id, options);
+    inp.render();
+    pageState.__register(inp);
+    return inp;
+}
+// ═══════════════════════════════════════════════════════════════
+// TYPE-SPECIFIC FACTORY METHODS
+// ═══════════════════════════════════════════════════════════════
+export function email(id, options = {}) {
+    return input(id, { placeholder: 'name@example.com', autocomplete: 'email', ...options, type: 'email' });
+}
+export function password(id, options = {}) {
+    return input(id, { placeholder: '••••••••', autocomplete: 'current-password', ...options, type: 'password' });
+}
+export function number(id, options = {}) {
+    return input(id, { placeholder: '0', ...options, type: 'number' });
+}
+export function tel(id, options = {}) {
+    return input(id, { placeholder: '+1 (555) 000-0000', autocomplete: 'tel', ...options, type: 'tel' });
+}
+export function url(id, options = {}) {
+    return input(id, { placeholder: 'https://', autocomplete: 'url', ...options, type: 'url' });
+}
+export function search(id, options = {}) {
+    return input(id, { placeholder: 'Search...', ...options, type: 'search' });
+}
+export function date(id, options = {}) {
+    return input(id, { ...options, type: 'date' });
+}
+export function time(id, options = {}) {
+    return input(id, { ...options, type: 'time' });
+}
+export function datetime(id, options = {}) {
+    return input(id, { ...options, type: 'datetime-local' });
+}
+export function color(id, options = {}) {
+    return input(id, { ...options, type: 'color' });
+}
+export function range(id, options = {}) {
+    return input(id, { min: '0', max: '100', ...options, type: 'range' });
+}
+export function file(id, options = {}) {
+    return input(id, { ...options, type: 'file' });
+}
+export function hidden(id, options = {}) {
+    return input(id, { ...options, type: 'hidden' });
+}
+export { Input };

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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