juxscript 1.1.111 → 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);
+}

package/lib/components/stack/BaseStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}

package/lib/components/stack/BaseStack.js

@@ -324,6 +324,7 @@ export class BaseStack extends BaseComponent {
         const stackDiv = document.createElement('div');
         stackDiv.id = this._id;
         stackDiv.className = this.buildClasses();
+        // ✅ THIS LINE - Does it capture inline styles from state.style?
         if (this.state.style) {
             stackDiv.setAttribute('style', this.state.style);
         }

package/lib/components/stack/BaseStack.ts

@@ -412,6 +412,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         stackDiv.id = this._id;
         stackDiv.className = this.buildClasses();
 
+        // ✅ THIS LINE - Does it capture inline styles from state.style?
         if (this.state.style) {
             stackDiv.setAttribute('style', this.state.style);
         }

package/lib/components/stack/VStack.js

@@ -10,12 +10,11 @@ export class VStack extends BaseStack {
     static create(children, options = {}) {
         const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new VStack(id, children, options);
-        // ✅ Auto-render to 'app' on next tick
-        queueMicrotask(() => {
+        setTimeout(() => {
             if (!instance._container) {
                 instance.render('app');
             }
-        });
+        }, 0); // Use setTimeout instead of queueMicrotask for safer timing
         return instance;
     }
 }

package/lib/components/stack/VStack.ts

@@ -14,12 +14,12 @@ export class VStack extends BaseStack {
         const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new VStack(id, children, options);
 
-        // ✅ Auto-render to 'app' on next tick
-        queueMicrotask(() => {
+
+        setTimeout(() => {
             if (!instance._container) {
                 instance.render('app');
             }
-        });
+        }, 0); // Use setTimeout instead of queueMicrotask for safer timing
 
         return instance;
     }