juxscript 1.1.240 → 1.1.244

package/lib/components/image.js

@@ -1,204 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['load', 'error'];
-export class Image extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            visible: true,
-            disabled: false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            src: options.src ?? '',
-            alt: options.alt ?? formatIdAsLabel(id),
-            objectFit: options.objectFit ?? 'cover',
-            loadingType: options.loading ?? 'lazy',
-            crossOrigin: options.crossOrigin,
-            isLoaded: false,
-            hasError: false
-        });
-        // Apply width/height if provided
-        if (options.width) {
-            this.state.style = this.state.style ? `${this.state.style}; width: ${options.width}` : `width: ${options.width}`;
-        }
-        if (options.height) {
-            this.state.style = this.state.style ? `${this.state.style}; height: ${options.height}` : `height: ${options.height}`;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    src(value) {
-        this.state.src = value;
-        if (this.container) {
-            const img = this.container.querySelector(`#${this._id}`);
-            if (img) {
-                img.src = value;
-                this.state.isLoaded = false;
-                this.state.hasError = false;
-            }
-        }
-        return this;
-    }
-    alt(value) {
-        this.state.alt = value;
-        if (this.container) {
-            const img = this.container.querySelector(`#${this._id}`);
-            if (img)
-                img.alt = value;
-        }
-        return this;
-    }
-    objectFit(value) {
-        this.state.objectFit = value;
-        if (this.container) {
-            const img = this.container.querySelector(`#${this._id}`);
-            if (img)
-                img.style.objectFit = value;
-        }
-        return this;
-    }
-    lazy() {
-        this.state.loadingType = 'lazy';
-        return this;
-    }
-    eager() {
-        this.state.loadingType = 'eager';
-        return this;
-    }
-    crossOrigin(value) {
-        this.state.crossOrigin = value;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * STATE GETTERS
-     * ═════════════════════════════════════════════════════════════════ */
-    isLoaded() {
-        return this.state.isLoaded;
-    }
-    hasError() {
-        return this.state.hasError;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { src, alt, objectFit, loadingType, crossOrigin, style, class: className } = this.state;
-        const img = document.createElement('img');
-        img.id = this._id;
-        img.className = 'jux-image';
-        if (className)
-            img.className += ` ${className}`;
-        if (style)
-            img.setAttribute('style', style);
-        img.src = src;
-        img.alt = alt;
-        img.style.objectFit = objectFit;
-        img.loading = loadingType;
-        if (crossOrigin) {
-            img.crossOrigin = crossOrigin;
-        }
-        // Wire load event
-        img.addEventListener('load', () => {
-            this.state.isLoaded = true;
-            this.state.hasError = false;
-            this._triggerCallback('load', img);
-        });
-        // Wire error event
-        img.addEventListener('error', () => {
-            this.state.isLoaded = false;
-            this.state.hasError = true;
-            this._triggerCallback('error', img);
-        });
-        // Wire standard events (click, mouseover, etc.)
-        this._wireStandardEvents(img);
-        // Sync src changes
-        const srcSync = this._syncBindings.find(b => b.property === 'src');
-        if (srcSync) {
-            const transform = srcSync.toComponent || ((v) => String(v));
-            srcSync.stateObj.subscribe((val) => {
-                this.src(transform(val));
-            });
-        }
-        // Sync alt changes
-        const altSync = this._syncBindings.find(b => b.property === 'alt');
-        if (altSync) {
-            const transform = altSync.toComponent || ((v) => String(v));
-            altSync.stateObj.subscribe((val) => {
-                this.alt(transform(val));
-            });
-        }
-        container.appendChild(img);
-        return this;
-    }
-    update(prop, value) {
-        if (!this.container)
-            return;
-        const img = this.container.querySelector(`#${this._id}`);
-        if (!img)
-            return;
-        // Handle image-specific updates
-        switch (prop) {
-            case 'src':
-                img.src = value;
-                this.state.isLoaded = false;
-                this.state.hasError = false;
-                break;
-            case 'alt':
-                img.alt = value;
-                break;
-            case 'objectFit':
-                img.style.objectFit = value;
-                break;
-            case 'loadingType':
-                img.loading = value;
-                break;
-            case 'crossOrigin':
-                img.crossOrigin = value;
-                break;
-            // Base properties handled by BaseComponent.update()
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-}
-export function image(id, options = {}) {
-    return new Image(id, options);
-}
-// Convenience helper for avatar/profile images
-export function avatar(id, src, alt) {
-    return new Image(id, {
-        src,
-        alt: alt || 'Avatar',
-        objectFit: 'cover',
-        style: 'border-radius: 50%'
-    });
-}
-// Convenience helper for logo images
-export function logo(id, src, alt) {
-    return new Image(id, {
-        src,
-        alt: alt || 'Logo',
-        objectFit: 'contain'
-    });
-}
-// Convenience helper for thumbnail images
-export function thumbnail(id, src, alt) {
-    return new Image(id, {
-        src,
-        alt: alt || 'Thumbnail',
-        objectFit: 'cover',
-        loading: 'lazy'
-    });
-}

package/lib/components/image.ts

@@ -1,260 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['load', 'error'] as const;
-
-export interface ImageOptions {
-    src?: string;
-    alt?: string;
-    width?: string;
-    height?: string;
-    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-    loading?: 'lazy' | 'eager';
-    crossOrigin?: 'anonymous' | 'use-credentials';
-    style?: string;
-    class?: string;
-}
-
-interface ImageState extends BaseState {
-    src: string;
-    alt: string;
-    objectFit: string;
-    loadingType: string;
-    crossOrigin?: string;
-    isLoaded: boolean;
-    hasError: boolean;
-}
-
-export class Image extends BaseComponent<ImageState> {
-    constructor(id: string, options: ImageOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            src: options.src ?? '',
-            alt: options.alt ?? formatIdAsLabel(id),
-            objectFit: options.objectFit ?? 'cover',
-            loadingType: options.loading ?? 'lazy',
-            crossOrigin: options.crossOrigin,
-            isLoaded: false,
-            hasError: false
-        });
-
-        // Apply width/height if provided
-        if (options.width) {
-            this.state.style = this.state.style ? `${this.state.style}; width: ${options.width}` : `width: ${options.width}`;
-        }
-        if (options.height) {
-            this.state.style = this.state.style ? `${this.state.style}; height: ${options.height}` : `height: ${options.height}`;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    src(value: string): this {
-        this.state.src = value;
-        if (this.container) {
-            const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
-            if (img) {
-                img.src = value;
-                this.state.isLoaded = false;
-                this.state.hasError = false;
-            }
-        }
-        return this;
-    }
-
-    alt(value: string): this {
-        this.state.alt = value;
-        if (this.container) {
-            const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
-            if (img) img.alt = value;
-        }
-        return this;
-    }
-
-    objectFit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'): this {
-        this.state.objectFit = value;
-        if (this.container) {
-            const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
-            if (img) img.style.objectFit = value;
-        }
-        return this;
-    }
-
-    lazy(): this {
-        this.state.loadingType = 'lazy';
-        return this;
-    }
-
-    eager(): this {
-        this.state.loadingType = 'eager';
-        return this;
-    }
-
-    crossOrigin(value: 'anonymous' | 'use-credentials'): this {
-        this.state.crossOrigin = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * STATE GETTERS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    isLoaded(): boolean {
-        return this.state.isLoaded;
-    }
-
-    hasError(): boolean {
-        return this.state.hasError;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { src, alt, objectFit, loadingType, crossOrigin, style, class: className } = this.state;
-
-        const img = document.createElement('img');
-        img.id = this._id;
-        img.className = 'jux-image';
-        if (className) img.className += ` ${className}`;
-        if (style) img.setAttribute('style', style);
-
-        img.src = src;
-        img.alt = alt;
-        img.style.objectFit = objectFit;
-        img.loading = loadingType as 'lazy' | 'eager';
-
-        if (crossOrigin) {
-            img.crossOrigin = crossOrigin;
-        }
-
-        // Wire load event
-        img.addEventListener('load', () => {
-            this.state.isLoaded = true;
-            this.state.hasError = false;
-            this._triggerCallback('load', img);
-        });
-
-        // Wire error event
-        img.addEventListener('error', () => {
-            this.state.isLoaded = false;
-            this.state.hasError = true;
-            this._triggerCallback('error', img);
-        });
-
-        // Wire standard events (click, mouseover, etc.)
-        this._wireStandardEvents(img);
-
-        // Sync src changes
-        const srcSync = this._syncBindings.find(b => b.property === 'src');
-        if (srcSync) {
-            const transform = srcSync.toComponent || ((v: any) => String(v));
-            srcSync.stateObj.subscribe((val: any) => {
-                this.src(transform(val));
-            });
-        }
-
-        // Sync alt changes
-        const altSync = this._syncBindings.find(b => b.property === 'alt');
-        if (altSync) {
-            const transform = altSync.toComponent || ((v: any) => String(v));
-            altSync.stateObj.subscribe((val: any) => {
-                this.alt(transform(val));
-            });
-        }
-
-        container.appendChild(img);
-
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        if (!this.container) return;
-
-        const img = this.container.querySelector(`#${this._id}`) as HTMLImageElement;
-        if (!img) return;
-
-        // Handle image-specific updates
-        switch (prop) {
-            case 'src':
-                img.src = value;
-                this.state.isLoaded = false;
-                this.state.hasError = false;
-                break;
-
-            case 'alt':
-                img.alt = value;
-                break;
-
-            case 'objectFit':
-                img.style.objectFit = value;
-                break;
-
-            case 'loadingType':
-                img.loading = value as 'lazy' | 'eager';
-                break;
-
-            case 'crossOrigin':
-                img.crossOrigin = value;
-                break;
-
-            // Base properties handled by BaseComponent.update()
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-}
-
-export function image(id: string, options: ImageOptions = {}): Image {
-    return new Image(id, options);
-}
-
-// Convenience helper for avatar/profile images
-export function avatar(id: string, src: string, alt?: string): Image {
-    return new Image(id, {
-        src,
-        alt: alt || 'Avatar',
-        objectFit: 'cover',
-        style: 'border-radius: 50%'
-    });
-}
-
-// Convenience helper for logo images
-export function logo(id: string, src: string, alt?: string): Image {
-    return new Image(id, {
-        src,
-        alt: alt || 'Logo',
-        objectFit: 'contain'
-    });
-}
-
-// Convenience helper for thumbnail images
-export function thumbnail(id: string, src: string, alt?: string): Image {
-    return new Image(id, {
-        src,
-        alt: alt || 'Thumbnail',
-        objectFit: 'cover',
-        loading: 'lazy'
-    });
-}

package/lib/components/include.d.ts

@@ -1,86 +0,0 @@
-/**
- * Include - Simplified resource injection for bundled and external resources
- * Supports page-specific scoping and cleanup
- */
-type ResourceType = 'css' | 'js' | 'module';
-interface IncludeOptions {
-    type?: ResourceType;
-    target?: string;
-    async?: boolean;
-    defer?: boolean;
-    crossOrigin?: 'anonymous' | 'use-credentials';
-    integrity?: string;
-    pageScoped?: boolean;
-}
-export declare class Include {
-    private url;
-    private options;
-    private element;
-    private pageId;
-    constructor(url: string, options?: IncludeOptions);
-    css(): this;
-    js(): this;
-    module(): this;
-    async(): this;
-    defer(): this;
-    /**
-     * Inject into specific container instead of <head>
-     * Useful for page-specific styles
-     *
-     * @example
-     * jux.include('/css/page1.css').into('#page1-container');
-     */
-    into(selector: string): this;
-    /**
-     * Mark as page-scoped for automatic cleanup
-     *
-     * @example
-     * jux.include('/css/dashboard.css').forPage('dashboard');
-     * // Later: Include.cleanupPage('dashboard');
-     */
-    forPage(pageId: string): this;
-    render(): this;
-    private createStylesheet;
-    private createScript;
-    private getContainer;
-    private isAlreadyLoaded;
-    remove(): this;
-    /**
-     * Remove all resources for a specific page
-     *
-     * @example
-     * Include.cleanupPage('dashboard');
-     */
-    static cleanupPage(pageId: string): void;
-    /**
-     * Remove all page-scoped resources
-     */
-    static cleanupAll(): void;
-}
-/**
- * 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 declare function include(url: string, options?: IncludeOptions): Include;
-export {};
-//# sourceMappingURL=include.d.ts.map

package/lib/components/include.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"include.d.ts","sourceRoot":"","sources":["include.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,KAAK,YAAY,GAAG,KAAK,GAAG,IAAI,GAAG,QAAQ,CAAC;AAE5C,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAKD,qBAAa,OAAO;IAClB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAuB;gBAEzB,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IAoBrD,GAAG,IAAI,IAAI;IAKX,EAAE,IAAI,IAAI;IAKV,MAAM,IAAI,IAAI;IAKd,KAAK,IAAI,IAAI;IAKb,KAAK,IAAI,IAAI;IAKb;;;;;;OAMG;IACH,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK5B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAU7B,MAAM,IAAI,IAAI;IAoDd,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAKvB,MAAM,IAAI,IAAI;IAYd;;;;;OAKG;IACH,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAYxC;;OAEG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;CAS1B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAItE"}