juxscript 1.1.240 → 1.1.244

package/lib/components/layer.js

@@ -1,219 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = [];
-export class Layer extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            visible: true,
-            disabled: false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            preset: options.preset,
-            content: typeof options.content === 'string' ? options.content : undefined
-        });
-        // Apply initial options via layout extensions
-        if (options.opacity !== undefined) {
-            this.opacity(options.opacity);
-        }
-        if (options.zIndex !== undefined) {
-            this.zIndex(options.zIndex);
-        }
-        if (options.blur !== undefined) {
-            this.backdropBlur(options.blur);
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Set layer opacity
-     */
-    opacity(value) {
-        const opacityValue = Math.max(0, Math.min(1, value));
-        const currentStyle = this.state.style || '';
-        // Remove existing opacity
-        const styles = currentStyle
-            .split(';')
-            .filter(s => !s.trim().startsWith('opacity'))
-            .map(s => s.trim());
-        styles.push(`opacity: ${opacityValue}`);
-        this.state.style = styles.join('; ');
-        return this;
-    }
-    /**
-     * Set layer z-index
-     */
-    zIndex(value) {
-        const currentStyle = this.state.style || '';
-        // Remove existing z-index
-        const styles = currentStyle
-            .split(';')
-            .filter(s => !s.trim().startsWith('z-index'))
-            .map(s => s.trim());
-        styles.push(`z-index: ${value}`);
-        this.state.style = styles.join('; ');
-        return this;
-    }
-    /**
-     * Apply a gradient preset from gradients.css
-     */
-    preset(value) {
-        this.state.preset = value;
-        this.addClass(`jux-gradient-${value}`);
-        return this;
-    }
-    /**
-     * Set layer content (text or component)
-     */
-    content(value) {
-        if (typeof value === 'string') {
-            this.state.content = value;
-            if (this.container) {
-                const el = this.container.querySelector(`#${this._id}`);
-                if (el)
-                    el.innerHTML = value;
-            }
-        }
-        return this;
-    }
-    /**
-     * Apply backdrop blur (for overlay effects)
-     */
-    backdropBlur(value) {
-        const blurValue = `blur(${value}px)`;
-        const currentStyle = this.state.style || '';
-        // Remove existing backdrop-filter
-        const styles = currentStyle
-            .split(';')
-            .filter(s => !s.trim().startsWith('backdrop-filter'))
-            .map(s => s.trim());
-        styles.push(`backdrop-filter: ${blurValue}`);
-        this.state.style = styles.join('; ');
-        return this;
-    }
-    /**
-     * Make layer cover entire parent (position: absolute with inset: 0)
-     */
-    fullCover() {
-        const currentStyle = this.state.style || '';
-        const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-        styles.push('position: absolute', 'top: 0', 'left: 0', 'right: 0', 'bottom: 0');
-        this.state.style = styles.join('; ');
-        return this;
-    }
-    /**
-     * Make layer fixed to viewport
-     */
-    fixed() {
-        const currentStyle = this.state.style || '';
-        const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-        styles.push('position: fixed', 'top: 0', 'left: 0', 'right: 0', 'bottom: 0');
-        this.state.style = styles.join('; ');
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { preset, content, style, class: className } = this.state;
-        const layer = document.createElement('div');
-        layer.id = this._id;
-        layer.className = 'jux-layer';
-        if (preset) {
-            layer.className += ` jux-gradient-${preset}`;
-        }
-        if (className) {
-            layer.className += ` ${className}`;
-        }
-        if (style) {
-            layer.setAttribute('style', style);
-        }
-        if (content) {
-            layer.innerHTML = content;
-        }
-        this._wireStandardEvents(layer);
-        container.appendChild(layer);
-        return this;
-    }
-    update(prop, value) {
-        if (!this.container)
-            return;
-        const el = this.container.querySelector(`#${this._id}`);
-        if (!el)
-            return;
-        switch (prop) {
-            case 'preset':
-                // Remove old gradient classes
-                el.className = el.className
-                    .split(' ')
-                    .filter(c => !c.startsWith('jux-gradient-'))
-                    .join(' ');
-                // Add new gradient class
-                if (value) {
-                    el.classList.add(`jux-gradient-${value}`);
-                }
-                break;
-            case 'content':
-                el.innerHTML = value;
-                break;
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-}
-export function layer(id, options = {}) {
-    return new Layer(id, options);
-}
-// ✅ Convenience helpers for common use cases
-/**
- * Create a gradient layer with preset
- */
-export function gradient(id, preset, options = {}) {
-    return new Layer(id, { ...options, preset });
-}
-/**
- * Create a dark overlay (for hero images, etc.)
- */
-export function overlay(id, opacity = 0.5) {
-    const layer = new Layer(id, { preset: 'overlay-dark', opacity }).fullCover();
-    const currentStyle = layer.state.style || '';
-    const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-    styles.push('pointer-events: none');
-    layer.state.style = styles.join('; ');
-    return layer;
-}
-/**
- * Create a blur overlay (glassmorphism effect)
- */
-export function glassLayer(id, blur = 10, opacity = 0.8) {
-    const layer = new Layer(id, { blur, opacity }).fullCover();
-    const currentStyle = layer.state.style || '';
-    const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-    styles.push('background-color: rgba(255, 255, 255, 0.1)');
-    layer.state.style = styles.join('; ');
-    return layer;
-}
-/**
- * Create an animated gradient background
- */
-export function animatedGradient(id, speed = 'normal') {
-    const presetMap = {
-        fast: 'animated-fast',
-        normal: 'animated',
-        slow: 'animated-slow'
-    };
-    return new Layer(id, { preset: presetMap[speed] })
-        .fullCover()
-        .zIndex(-1);
-}

package/lib/components/layer.ts

@@ -1,304 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface LayerOptions {
-    preset?: LayerPreset;
-    opacity?: number;
-    zIndex?: number;
-    blur?: number;
-    content?: string | BaseComponent<any>;
-    style?: string;
-    class?: string;
-}
-
-interface LayerState extends BaseState {
-    preset?: string;
-    content?: string;
-}
-
-/**
- * Gradient preset names from gradients.css
- */
-export type LayerPreset =
-    // Linear Gradients
-    | 'ocean' | 'sunset' | 'forest' | 'fire' | 'ice' | 'candy' | 'emerald'
-    | 'midnight' | 'peach' | 'royal' | 'coral' | 'mint' | 'grape' | 'cherry' | 'sky'
-    // Multi-Stop Linear
-    | 'aurora' | 'tropical' | 'cosmic' | 'neon' | 'volcano'
-    // Radial Gradients
-    | 'radial-sun' | 'radial-moon' | 'radial-blue' | 'radial-purple'
-    | 'radial-fire' | 'radial-ocean' | 'radial-emerald' | 'radial-sunset'
-    // Conic Gradients
-    | 'conic-rainbow' | 'conic-sunset' | 'conic-ocean' | 'conic-fire' | 'conic-neon'
-    // Dark Gradients
-    | 'dark-space' | 'dark-navy' | 'dark-purple' | 'dark-forest'
-    | 'dark-crimson' | 'dark-slate'
-    // Transparent Overlays
-    | 'overlay-dark' | 'overlay-light' | 'overlay-blue' | 'overlay-purple' | 'overlay-sunset'
-    // Mesh/Textured
-    | 'mesh-purple' | 'mesh-ocean' | 'mesh-fire' | 'mesh-neon'
-    // Pastel
-    | 'pastel-pink' | 'pastel-blue' | 'pastel-green' | 'pastel-purple'
-    | 'pastel-peach' | 'pastel-lavender'
-    // Animated
-    | 'animated' | 'animated-fast' | 'animated-slow';
-
-export class Layer extends BaseComponent<LayerState> {
-    constructor(id: string, options: LayerOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            preset: options.preset,
-            content: typeof options.content === 'string' ? options.content : undefined
-        });
-
-        // Apply initial options via layout extensions
-        if (options.opacity !== undefined) {
-            this.opacity(options.opacity);
-        }
-        if (options.zIndex !== undefined) {
-            this.zIndex(options.zIndex);
-        }
-        if (options.blur !== undefined) {
-            this.backdropBlur(options.blur);
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set layer opacity
-     */
-    opacity(value: number): this {
-        const opacityValue = Math.max(0, Math.min(1, value));
-        const currentStyle = this.state.style || '';
-
-        // Remove existing opacity
-        const styles = currentStyle
-            .split(';')
-            .filter(s => !s.trim().startsWith('opacity'))
-            .map(s => s.trim());
-
-        styles.push(`opacity: ${opacityValue}`);
-        this.state.style = styles.join('; ');
-
-        return this;
-    }
-
-    /**
-     * Set layer z-index
-     */
-    zIndex(value: number): this {
-        const currentStyle = this.state.style || '';
-
-        // Remove existing z-index
-        const styles = currentStyle
-            .split(';')
-            .filter(s => !s.trim().startsWith('z-index'))
-            .map(s => s.trim());
-
-        styles.push(`z-index: ${value}`);
-        this.state.style = styles.join('; ');
-
-        return this;
-    }
-
-    /**
-     * Apply a gradient preset from gradients.css
-     */
-    preset(value: LayerPreset): this {
-        this.state.preset = value;
-        this.addClass(`jux-gradient-${value}`);
-        return this;
-    }
-
-    /**
-     * Set layer content (text or component)
-     */
-    content(value: string | BaseComponent<any>): this {
-        if (typeof value === 'string') {
-            this.state.content = value;
-            if (this.container) {
-                const el = this.container.querySelector(`#${this._id}`) as HTMLElement;
-                if (el) el.innerHTML = value;
-            }
-        }
-        return this;
-    }
-
-    /**
-     * Apply backdrop blur (for overlay effects)
-     */
-    backdropBlur(value: number): this {
-        const blurValue = `blur(${value}px)`;
-        const currentStyle = this.state.style || '';
-
-        // Remove existing backdrop-filter
-        const styles = currentStyle
-            .split(';')
-            .filter(s => !s.trim().startsWith('backdrop-filter'))
-            .map(s => s.trim());
-
-        styles.push(`backdrop-filter: ${blurValue}`);
-        this.state.style = styles.join('; ');
-
-        return this;
-    }
-
-    /**
-     * Make layer cover entire parent (position: absolute with inset: 0)
-     */
-    fullCover(): this {
-        const currentStyle = this.state.style || '';
-        const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-        styles.push('position: absolute', 'top: 0', 'left: 0', 'right: 0', 'bottom: 0');
-        this.state.style = styles.join('; ');
-        return this;
-    }
-
-    /**
-     * Make layer fixed to viewport
-     */
-    fixed(): this {
-        const currentStyle = this.state.style || '';
-        const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-        styles.push('position: fixed', 'top: 0', 'left: 0', 'right: 0', 'bottom: 0');
-        this.state.style = styles.join('; ');
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { preset, content, style, class: className } = this.state;
-
-        const layer = document.createElement('div');
-        layer.id = this._id;
-        layer.className = 'jux-layer';
-
-        if (preset) {
-            layer.className += ` jux-gradient-${preset}`;
-        }
-
-        if (className) {
-            layer.className += ` ${className}`;
-        }
-
-        if (style) {
-            layer.setAttribute('style', style);
-        }
-
-        if (content) {
-            layer.innerHTML = content;
-        }
-
-        this._wireStandardEvents(layer);
-
-        container.appendChild(layer);
-
-        return this;
-    }
-
-    update(prop: string, value: any): void {
-        if (!this.container) return;
-
-        const el = this.container.querySelector(`#${this._id}`) as HTMLElement;
-        if (!el) return;
-
-        switch (prop) {
-            case 'preset':
-                // Remove old gradient classes
-                el.className = el.className
-                    .split(' ')
-                    .filter(c => !c.startsWith('jux-gradient-'))
-                    .join(' ');
-
-                // Add new gradient class
-                if (value) {
-                    el.classList.add(`jux-gradient-${value}`);
-                }
-                break;
-
-            case 'content':
-                el.innerHTML = value;
-                break;
-
-            default:
-                super.update(prop, value);
-                break;
-        }
-    }
-}
-
-export function layer(id: string, options: LayerOptions = {}): Layer {
-    return new Layer(id, options);
-}
-
-// ✅ Convenience helpers for common use cases
-
-/**
- * Create a gradient layer with preset
- */
-export function gradient(id: string, preset: LayerPreset, options: Omit<LayerOptions, 'preset'> = {}): Layer {
-    return new Layer(id, { ...options, preset });
-}
-
-/**
- * Create a dark overlay (for hero images, etc.)
- */
-export function overlay(id: string, opacity: number = 0.5): Layer {
-    const layer = new Layer(id, { preset: 'overlay-dark', opacity }).fullCover();
-    const currentStyle = layer.state.style || '';
-    const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-    styles.push('pointer-events: none');
-    layer.state.style = styles.join('; ');
-    return layer;
-}
-
-/**
- * Create a blur overlay (glassmorphism effect)
- */
-export function glassLayer(id: string, blur: number = 10, opacity: number = 0.8): Layer {
-    const layer = new Layer(id, { blur, opacity }).fullCover();
-    const currentStyle = layer.state.style || '';
-    const styles = currentStyle.split(';').map(s => s.trim()).filter(Boolean);
-    styles.push('background-color: rgba(255, 255, 255, 0.1)');
-    layer.state.style = styles.join('; ');
-    return layer;
-}
-
-/**
- * Create an animated gradient background
- */
-export function animatedGradient(id: string, speed: 'fast' | 'normal' | 'slow' = 'normal'): Layer {
-    const presetMap = {
-        fast: 'animated-fast' as LayerPreset,
-        normal: 'animated' as LayerPreset,
-        slow: 'animated-slow' as LayerPreset
-    };
-
-    return new Layer(id, { preset: presetMap[speed] })
-        .fullCover()
-        .zIndex(-1);
-}

package/lib/components/link.d.ts

@@ -1,41 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface LinkOptions {
-    href?: string;
-    text?: string;
-    icon?: string;
-    iconPosition?: 'left' | 'right';
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    external?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    style?: string;
-    class?: string;
-}
-interface LinkState extends BaseState {
-    href: string;
-    text: string;
-    icon: string;
-    iconPosition: 'left' | 'right';
-    target: string;
-    external: boolean;
-    active: boolean;
-}
-export declare class Link extends BaseComponent<LinkState> {
-    constructor(id: string, options?: LinkOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    href(value: string): this;
-    text(value: string): this;
-    icon(value: string): this;
-    iconPosition(value: 'left' | 'right'): this;
-    target(value: '_self' | '_blank' | '_parent' | '_top'): this;
-    external(value?: boolean): this;
-    active(value?: boolean): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
-}
-export declare function link(id: string, options?: LinkOptions): Link;
-export declare function navLink(id: string, text?: string): Link;
-export declare function externalLink(id: string, href: string, text?: string): Link;
-export {};
-//# sourceMappingURL=link.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,WAAW;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,SAAU,SAAQ,SAAS;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBAClC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAkBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASzB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAYzB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAK3C,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI;IAS5D,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAQrC,MAAM,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAanC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAyFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAiCzC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE;AAGD,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAKvD;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAQ1E"}