juxscript 1.1.112 → 1.1.113

package/lib/components/layer.js

@@ -0,0 +1,219 @@
+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

@@ -0,0 +1,304 @@
+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);
+}