juxscript 1.1.85 → 1.1.87

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T14:48:56.457Z",
+  "generatedAt": "2026-02-12T18:17:52.009Z",
   "components": [
     {
       "file": "alert.js",

package/index.d.ts

@@ -46,6 +46,9 @@ import { registry } from './lib/components/registry.js';
 import { stateHistory } from './lib/components/history/StateHistory.js';
 import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory };
+import { vstack } from './lib/components/stack/VStack.js';
+import { hstack } from './lib/components/stack/HStack.js';
+import { zstack } from './lib/components/stack/ZStack.js';
 export declare const jux: {
     alert: typeof alert;
     app: typeof app;
@@ -89,6 +92,9 @@ export declare const jux: {
     themeToggle: typeof themeToggle;
     tooltip: typeof tooltip;
     write: typeof write;
+    vstack: typeof vstack;
+    hstack: typeof hstack;
+    zstack: typeof zstack;
     fetch: typeof import("./lib/utils/fetch.js").juxFetch & {
         all: typeof import("./lib/utils/fetch.js").fetchAll;
         get: <T = any>(url: string, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method">) => {
@@ -201,4 +207,5 @@ export declare const jux: {
     getOrCreateContainer: typeof getOrCreateContainer;
     watcher: typeof watcher;
 };
+export { vstack, hstack, zstack };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

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

package/index.js

@@ -48,6 +48,10 @@ import { registry } from './lib/components/registry.js'; // ✅ Import registry
 import { stateHistory } from './lib/components/history/StateHistory.js'; // ✅ Import history
 import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory }; // ✅ Export history
+// ✅ Import Stack components
+import { vstack } from './lib/components/stack/VStack.js';
+import { hstack } from './lib/components/stack/HStack.js';
+import { zstack } from './lib/components/stack/ZStack.js';
 // Utilities
 export const jux = {
     alert,
@@ -92,6 +96,10 @@ export const jux = {
     themeToggle,
     tooltip,
     write,
+    // ✅ Stack components
+    vstack,
+    hstack,
+    zstack,
     // Utilities
     fetch: fetchAPI,
     renderIcon,
@@ -99,3 +107,5 @@ export const jux = {
     getOrCreateContainer,
     watcher
 };
+// ✅ Export Stack components directly
+export { vstack, hstack, zstack };

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

@@ -0,0 +1,112 @@
+import { BaseComponent, BaseState } from '../base/BaseComponent.js';
+export interface StackOptions {
+    spacing?: 'none' | 'tight' | 'default' | 'loose';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    divider?: boolean;
+    responsive?: boolean;
+    class?: string;
+    style?: string;
+}
+export interface ChildStyleFunction {
+    (index: number): string;
+}
+interface StackState extends BaseState {
+    spacing: string;
+    align?: string;
+    justify?: string;
+    divider: boolean;
+    responsive: boolean;
+    children: Array<any>;
+    childStyles?: ChildStyleFunction | string[];
+}
+/**
+ * BaseStack - Foundation for all stack layout components
+ * Provides common styling, child management, and progressive effects
+ */
+export declare abstract class BaseStack extends BaseComponent<StackState> {
+    protected abstract baseClassName: string;
+    private _inlineStyles;
+    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    spacing(value: 'none' | 'tight' | 'default' | 'loose'): this;
+    align(value: 'start' | 'center' | 'end' | 'stretch'): this;
+    justify(value: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'): this;
+    divider(value?: boolean): this;
+    responsive(value?: boolean): this;
+    /**
+     * Internal helper to add individual CSS properties
+     */
+    private _addStyle;
+    /**
+     * Build and apply the complete style attribute
+     */
+    private _updateStyleAttribute;
+    padding(value: string): this;
+    margin(value: string): this;
+    border(value: string): this;
+    borderRadius(value: string): this;
+    width(value: string): this;
+    height(value: string): this;
+    minWidth(value: string): this;
+    maxWidth(value: string): this;
+    minHeight(value: string): this;
+    maxHeight(value: string): this;
+    background(value: string): this;
+    backgroundColor(value: string): this;
+    boxShadow(value: string): this;
+    opacity(value: string | number): this;
+    position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this;
+    top(value: string): this;
+    right(value: string): this;
+    bottom(value: string): this;
+    left(value: string): this;
+    zIndex(value: string | number): this;
+    overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
+    overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
+    overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
+    display(value: string): this;
+    cursor(value: string): this;
+    transform(value: string): this;
+    transformOrigin(value: string): this;
+    transition(value: string): this;
+    animation(value: string): this;
+    /**
+     * Apply custom styles to each child progressively
+     */
+    childStyle(stylesOrFunction: string[] | ChildStyleFunction): this;
+    /**
+     * Cascade effect - offset children progressively
+     */
+    cascade(baseOffset?: number, axis?: 'x' | 'y' | 'both' | 'horizontal' | 'vertical' | 'xy'): this;
+    /**
+     * Fan effect - rotate children progressively
+     */
+    fan(angle?: number, origin?: string): this;
+    /**
+     * Scale progression - shrink/grow children
+     */
+    scaleProgressive(startScale?: number, step?: number, origin?: string): this;
+    /**
+     * Fade effect - progressive opacity
+     */
+    fade(startOpacity?: number, step?: number): this;
+    /**
+     * Blur effect - progressive blur
+     */
+    blur(startBlur?: number, step?: number): this;
+    /**
+     * Stagger animation delays
+     */
+    stagger(baseDelay?: number): this;
+    protected buildClasses(): string;
+    protected renderChild(child: any, index: number): string;
+    private wrapChildWithStyle;
+    private injectChildStyle;
+    private getChildStyle;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+    update(prop: string, value: any): void;
+}
+export {};
+//# sourceMappingURL=BaseStack.d.ts.map

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

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

package/lib/components/stack/BaseStack.js

@@ -0,0 +1,373 @@
+import { BaseComponent } from '../base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+/**
+ * BaseStack - Foundation for all stack layout components
+ * Provides common styling, child management, and progressive effects
+ */
+export class BaseStack extends BaseComponent {
+    constructor(id, children, options = {}) {
+        // Convert children object to array, preserving order
+        const childArray = Array.isArray(children)
+            ? children
+            : Object.values(children);
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            spacing: options.spacing ?? 'default',
+            align: options.align,
+            justify: options.justify,
+            divider: options.divider ?? false,
+            responsive: options.responsive ?? false,
+            children: childArray,
+            childStyles: undefined
+        });
+        this._inlineStyles = new Map(); // ✅ Internal style storage
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT LAYOUT API
+     * ═════════════════════════════════════════════════════════════════ */
+    spacing(value) {
+        this.state.spacing = value;
+        return this;
+    }
+    align(value) {
+        this.state.align = value;
+        return this;
+    }
+    justify(value) {
+        this.state.justify = value;
+        return this;
+    }
+    divider(value = true) {
+        this.state.divider = value;
+        return this;
+    }
+    responsive(value = true) {
+        this.state.responsive = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT STYLE API - Comprehensive CSS properties
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Internal helper to add individual CSS properties
+     */
+    _addStyle(property, value) {
+        this._inlineStyles.set(property, value);
+        this._updateStyleAttribute();
+        return this;
+    }
+    /**
+     * Build and apply the complete style attribute
+     */
+    _updateStyleAttribute() {
+        const styleString = Array.from(this._inlineStyles.entries())
+            .map(([prop, val]) => `${prop}: ${val}`)
+            .join('; ');
+        this.state.style = styleString;
+    }
+    // Box Model
+    padding(value) {
+        return this._addStyle('padding', value);
+    }
+    margin(value) {
+        return this._addStyle('margin', value);
+    }
+    border(value) {
+        return this._addStyle('border', value);
+    }
+    borderRadius(value) {
+        return this._addStyle('border-radius', value);
+    }
+    // Sizing
+    width(value) {
+        return this._addStyle('width', value);
+    }
+    height(value) {
+        return this._addStyle('height', value);
+    }
+    minWidth(value) {
+        return this._addStyle('min-width', value);
+    }
+    maxWidth(value) {
+        return this._addStyle('max-width', value);
+    }
+    minHeight(value) {
+        return this._addStyle('min-height', value);
+    }
+    maxHeight(value) {
+        return this._addStyle('max-height', value);
+    }
+    // Visual
+    background(value) {
+        return this._addStyle('background', value);
+    }
+    backgroundColor(value) {
+        return this._addStyle('background-color', value);
+    }
+    boxShadow(value) {
+        return this._addStyle('box-shadow', value);
+    }
+    opacity(value) {
+        return this._addStyle('opacity', String(value));
+    }
+    // Positioning
+    position(value) {
+        return this._addStyle('position', value);
+    }
+    top(value) {
+        return this._addStyle('top', value);
+    }
+    right(value) {
+        return this._addStyle('right', value);
+    }
+    bottom(value) {
+        return this._addStyle('bottom', value);
+    }
+    left(value) {
+        return this._addStyle('left', value);
+    }
+    zIndex(value) {
+        return this._addStyle('z-index', String(value));
+    }
+    // Overflow
+    overflow(value) {
+        return this._addStyle('overflow', value);
+    }
+    overflowX(value) {
+        return this._addStyle('overflow-x', value);
+    }
+    overflowY(value) {
+        return this._addStyle('overflow-y', value);
+    }
+    // Display
+    display(value) {
+        return this._addStyle('display', value);
+    }
+    // Cursor
+    cursor(value) {
+        return this._addStyle('cursor', value);
+    }
+    // Transform
+    transform(value) {
+        return this._addStyle('transform', value);
+    }
+    transformOrigin(value) {
+        return this._addStyle('transform-origin', value);
+    }
+    // Transition & Animation
+    transition(value) {
+        return this._addStyle('transition', value);
+    }
+    animation(value) {
+        return this._addStyle('animation', value);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PROGRESSIVE CHILD STYLING
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Apply custom styles to each child progressively
+     */
+    childStyle(stylesOrFunction) {
+        this.state.childStyles = stylesOrFunction;
+        return this;
+    }
+    /**
+     * Cascade effect - offset children progressively
+     */
+    cascade(baseOffset = 20, axis = 'both') {
+        this.state.childStyles = (index) => {
+            const offset = baseOffset * index;
+            if (axis === 'horizontal' || axis === 'x') {
+                return `margin-left: ${offset}px;`;
+            }
+            else if (axis === 'vertical' || axis === 'y') {
+                return `margin-top: ${offset}px;`;
+            }
+            else {
+                return `margin-left: ${offset}px; margin-top: ${offset}px;`;
+            }
+        };
+        return this;
+    }
+    /**
+     * Fan effect - rotate children progressively
+     */
+    fan(angle = 5, origin = 'bottom center') {
+        this.state.childStyles = (index) => {
+            const rotation = angle * index;
+            return `transform: rotate(${rotation}deg); transform-origin: ${origin};`;
+        };
+        return this;
+    }
+    /**
+     * Scale progression - shrink/grow children
+     */
+    scaleProgressive(startScale = 1, step = 0.05, origin = 'center') {
+        this.state.childStyles = (index) => {
+            const scale = startScale - (step * index);
+            return `transform: scale(${scale}); transform-origin: ${origin};`;
+        };
+        return this;
+    }
+    /**
+     * Fade effect - progressive opacity
+     */
+    fade(startOpacity = 1, step = 0.15) {
+        this.state.childStyles = (index) => {
+            const opacity = Math.max(0.1, startOpacity - (step * index));
+            return `opacity: ${opacity};`;
+        };
+        return this;
+    }
+    /**
+     * Blur effect - progressive blur
+     */
+    blur(startBlur = 0, step = 2) {
+        this.state.childStyles = (index) => {
+            const blur = startBlur + (step * index);
+            return `filter: blur(${blur}px);`;
+        };
+        return this;
+    }
+    /**
+     * Stagger animation delays
+     */
+    stagger(baseDelay = 100) {
+        this.state.childStyles = (index) => {
+            const delay = baseDelay * index;
+            return `animation-delay: ${delay}ms;`;
+        };
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+    buildClasses() {
+        const { spacing, align, justify, divider, responsive } = this.state;
+        const classes = [this.baseClassName];
+        // Spacing modifier
+        if (spacing !== 'default') {
+            classes.push(`${this.baseClassName}-${spacing}`);
+        }
+        // Alignment
+        if (align) {
+            classes.push(`jux-stack-${align}`);
+        }
+        // Justification
+        if (justify) {
+            classes.push(`jux-stack-justify-${justify}`);
+        }
+        // Divider
+        if (divider) {
+            classes.push(`${this.baseClassName}-divider`);
+        }
+        // Responsive
+        if (responsive) {
+            classes.push(`${this.baseClassName}-responsive`);
+        }
+        // Custom classes
+        if (this.state.class) {
+            classes.push(this.state.class);
+        }
+        return classes.join(' ');
+    }
+    renderChild(child, index) {
+        // Already a string
+        if (typeof child === 'string') {
+            return this.wrapChildWithStyle(child, index);
+        }
+        // JUX component with render method
+        if (child && typeof child.render === 'function') {
+            // Create temporary container
+            const temp = document.createElement('div');
+            child.render(temp);
+            if (child.container) {
+                let html = child.container.outerHTML;
+                child.container = null; // Reset for reuse
+                return this.injectChildStyle(html, index);
+            }
+        }
+        // DOM element
+        if (child && child.outerHTML) {
+            return this.injectChildStyle(child.outerHTML, index);
+        }
+        // Object with render method that returns string/element
+        if (child && typeof child.render === 'function') {
+            const rendered = child.render();
+            if (typeof rendered === 'string') {
+                return this.wrapChildWithStyle(rendered, index);
+            }
+            if (rendered && rendered.outerHTML) {
+                return this.injectChildStyle(rendered.outerHTML, index);
+            }
+        }
+        // Fallback to string
+        return this.wrapChildWithStyle(String(child), index);
+    }
+    wrapChildWithStyle(html, index) {
+        const style = this.getChildStyle(index);
+        if (style) {
+            return `<div style="${style}">${html}</div>`;
+        }
+        return html;
+    }
+    injectChildStyle(html, index) {
+        const style = this.getChildStyle(index);
+        if (style) {
+            return html.replace(/^<(\w+)/, `<$1 style="${style}"`);
+        }
+        return html;
+    }
+    getChildStyle(index) {
+        const { childStyles } = this.state;
+        if (!childStyles)
+            return '';
+        if (typeof childStyles === 'function') {
+            return childStyles(index);
+        }
+        if (Array.isArray(childStyles)) {
+            return childStyles[index] || '';
+        }
+        return '';
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const wrapper = document.createElement('div');
+        wrapper.className = this.buildClasses();
+        wrapper.id = this._id;
+        if (this.state.style) {
+            wrapper.setAttribute('style', this.state.style);
+        }
+        // Render all children
+        this.state.children.forEach((child, index) => {
+            const childHtml = this.renderChild(child, index);
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = childHtml;
+            if (tempDiv.firstChild) {
+                wrapper.appendChild(tempDiv.firstChild);
+            }
+        });
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        return this;
+    }
+    update(prop, value) {
+        // Stack components are typically static
+    }
+}

package/lib/components/stack/BaseStack.ts

@@ -0,0 +1,483 @@
+import { BaseComponent, BaseState } from '../base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface StackOptions {
+    spacing?: 'none' | 'tight' | 'default' | 'loose';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    divider?: boolean;
+    responsive?: boolean;
+    class?: string;
+    style?: string;
+}
+
+export interface ChildStyleFunction {
+    (index: number): string;
+}
+
+interface StackState extends BaseState {
+    spacing: string;
+    align?: string;
+    justify?: string;
+    divider: boolean;
+    responsive: boolean;
+    children: Array<any>;
+    childStyles?: ChildStyleFunction | string[];
+}
+
+/**
+ * BaseStack - Foundation for all stack layout components
+ * Provides common styling, child management, and progressive effects
+ */
+export abstract class BaseStack extends BaseComponent<StackState> {
+    protected abstract baseClassName: string;
+    private _inlineStyles: Map<string, string> = new Map(); // ✅ Internal style storage
+
+    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
+        // Convert children object to array, preserving order
+        const childArray = Array.isArray(children)
+            ? children
+            : Object.values(children);
+
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            spacing: options.spacing ?? 'default',
+            align: options.align,
+            justify: options.justify,
+            divider: options.divider ?? false,
+            responsive: options.responsive ?? false,
+            children: childArray,
+            childStyles: undefined
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT LAYOUT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    spacing(value: 'none' | 'tight' | 'default' | 'loose'): this {
+        this.state.spacing = value;
+        return this;
+    }
+
+    align(value: 'start' | 'center' | 'end' | 'stretch'): this {
+        this.state.align = value;
+        return this;
+    }
+
+    justify(value: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'): this {
+        this.state.justify = value;
+        return this;
+    }
+
+    divider(value: boolean = true): this {
+        this.state.divider = value;
+        return this;
+    }
+
+    responsive(value: boolean = true): this {
+        this.state.responsive = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT STYLE API - Comprehensive CSS properties
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Internal helper to add individual CSS properties
+     */
+    private _addStyle(property: string, value: string): this {
+        this._inlineStyles.set(property, value);
+        this._updateStyleAttribute();
+        return this;
+    }
+
+    /**
+     * Build and apply the complete style attribute
+     */
+    private _updateStyleAttribute(): void {
+        const styleString = Array.from(this._inlineStyles.entries())
+            .map(([prop, val]) => `${prop}: ${val}`)
+            .join('; ');
+
+        this.state.style = styleString;
+    }
+
+    // Box Model
+    padding(value: string): this {
+        return this._addStyle('padding', value);
+    }
+
+    margin(value: string): this {
+        return this._addStyle('margin', value);
+    }
+
+    border(value: string): this {
+        return this._addStyle('border', value);
+    }
+
+    borderRadius(value: string): this {
+        return this._addStyle('border-radius', value);
+    }
+
+    // Sizing
+    width(value: string): this {
+        return this._addStyle('width', value);
+    }
+
+    height(value: string): this {
+        return this._addStyle('height', value);
+    }
+
+    minWidth(value: string): this {
+        return this._addStyle('min-width', value);
+    }
+
+    maxWidth(value: string): this {
+        return this._addStyle('max-width', value);
+    }
+
+    minHeight(value: string): this {
+        return this._addStyle('min-height', value);
+    }
+
+    maxHeight(value: string): this {
+        return this._addStyle('max-height', value);
+    }
+
+    // Visual
+    background(value: string): this {
+        return this._addStyle('background', value);
+    }
+
+    backgroundColor(value: string): this {
+        return this._addStyle('background-color', value);
+    }
+
+    boxShadow(value: string): this {
+        return this._addStyle('box-shadow', value);
+    }
+
+    opacity(value: string | number): this {
+        return this._addStyle('opacity', String(value));
+    }
+
+    // Positioning
+    position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this {
+        return this._addStyle('position', value);
+    }
+
+    top(value: string): this {
+        return this._addStyle('top', value);
+    }
+
+    right(value: string): this {
+        return this._addStyle('right', value);
+    }
+
+    bottom(value: string): this {
+        return this._addStyle('bottom', value);
+    }
+
+    left(value: string): this {
+        return this._addStyle('left', value);
+    }
+
+    zIndex(value: string | number): this {
+        return this._addStyle('z-index', String(value));
+    }
+
+    // Overflow
+    overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this {
+        return this._addStyle('overflow', value);
+    }
+
+    overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this {
+        return this._addStyle('overflow-x', value);
+    }
+
+    overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this {
+        return this._addStyle('overflow-y', value);
+    }
+
+    // Display
+    display(value: string): this {
+        return this._addStyle('display', value);
+    }
+
+    // Cursor
+    cursor(value: string): this {
+        return this._addStyle('cursor', value);
+    }
+
+    // Transform
+    transform(value: string): this {
+        return this._addStyle('transform', value);
+    }
+
+    transformOrigin(value: string): this {
+        return this._addStyle('transform-origin', value);
+    }
+
+    // Transition & Animation
+    transition(value: string): this {
+        return this._addStyle('transition', value);
+    }
+
+    animation(value: string): this {
+        return this._addStyle('animation', value);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PROGRESSIVE CHILD STYLING
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Apply custom styles to each child progressively
+     */
+    childStyle(stylesOrFunction: string[] | ChildStyleFunction): this {
+        this.state.childStyles = stylesOrFunction;
+        return this;
+    }
+
+    /**
+     * Cascade effect - offset children progressively
+     */
+    cascade(baseOffset: number = 20, axis: 'x' | 'y' | 'both' | 'horizontal' | 'vertical' | 'xy' = 'both'): this {
+        this.state.childStyles = (index: number) => {
+            const offset = baseOffset * index;
+
+            if (axis === 'horizontal' || axis === 'x') {
+                return `margin-left: ${offset}px;`;
+            } else if (axis === 'vertical' || axis === 'y') {
+                return `margin-top: ${offset}px;`;
+            } else {
+                return `margin-left: ${offset}px; margin-top: ${offset}px;`;
+            }
+        };
+        return this;
+    }
+
+    /**
+     * Fan effect - rotate children progressively
+     */
+    fan(angle: number = 5, origin: string = 'bottom center'): this {
+        this.state.childStyles = (index: number) => {
+            const rotation = angle * index;
+            return `transform: rotate(${rotation}deg); transform-origin: ${origin};`;
+        };
+        return this;
+    }
+
+    /**
+     * Scale progression - shrink/grow children
+     */
+    scaleProgressive(startScale: number = 1, step: number = 0.05, origin: string = 'center'): this {
+        this.state.childStyles = (index: number) => {
+            const scale = startScale - (step * index);
+            return `transform: scale(${scale}); transform-origin: ${origin};`;
+        };
+        return this;
+    }
+
+    /**
+     * Fade effect - progressive opacity
+     */
+    fade(startOpacity: number = 1, step: number = 0.15): this {
+        this.state.childStyles = (index: number) => {
+            const opacity = Math.max(0.1, startOpacity - (step * index));
+            return `opacity: ${opacity};`;
+        };
+        return this;
+    }
+
+    /**
+     * Blur effect - progressive blur
+     */
+    blur(startBlur: number = 0, step: number = 2): this {
+        this.state.childStyles = (index: number) => {
+            const blur = startBlur + (step * index);
+            return `filter: blur(${blur}px);`;
+        };
+        return this;
+    }
+
+    /**
+     * Stagger animation delays
+     */
+    stagger(baseDelay: number = 100): this {
+        this.state.childStyles = (index: number) => {
+            const delay = baseDelay * index;
+            return `animation-delay: ${delay}ms;`;
+        };
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    protected buildClasses(): string {
+        const { spacing, align, justify, divider, responsive } = this.state;
+
+        const classes = [this.baseClassName];
+
+        // Spacing modifier
+        if (spacing !== 'default') {
+            classes.push(`${this.baseClassName}-${spacing}`);
+        }
+
+        // Alignment
+        if (align) {
+            classes.push(`jux-stack-${align}`);
+        }
+
+        // Justification
+        if (justify) {
+            classes.push(`jux-stack-justify-${justify}`);
+        }
+
+        // Divider
+        if (divider) {
+            classes.push(`${this.baseClassName}-divider`);
+        }
+
+        // Responsive
+        if (responsive) {
+            classes.push(`${this.baseClassName}-responsive`);
+        }
+
+        // Custom classes
+        if (this.state.class) {
+            classes.push(this.state.class);
+        }
+
+        return classes.join(' ');
+    }
+
+    protected renderChild(child: any, index: number): string {
+        // Already a string
+        if (typeof child === 'string') {
+            return this.wrapChildWithStyle(child, index);
+        }
+
+        // JUX component with render method
+        if (child && typeof child.render === 'function') {
+            // Create temporary container
+            const temp = document.createElement('div');
+            child.render(temp);
+
+            if (child.container) {
+                let html = child.container.outerHTML;
+                child.container = null; // Reset for reuse
+                return this.injectChildStyle(html, index);
+            }
+        }
+
+        // DOM element
+        if (child && child.outerHTML) {
+            return this.injectChildStyle(child.outerHTML, index);
+        }
+
+        // Object with render method that returns string/element
+        if (child && typeof child.render === 'function') {
+            const rendered = child.render();
+
+            if (typeof rendered === 'string') {
+                return this.wrapChildWithStyle(rendered, index);
+            }
+
+            if (rendered && rendered.outerHTML) {
+                return this.injectChildStyle(rendered.outerHTML, index);
+            }
+        }
+
+        // Fallback to string
+        return this.wrapChildWithStyle(String(child), index);
+    }
+
+    private wrapChildWithStyle(html: string, index: number): string {
+        const style = this.getChildStyle(index);
+        if (style) {
+            return `<div style="${style}">${html}</div>`;
+        }
+        return html;
+    }
+
+    private injectChildStyle(html: string, index: number): string {
+        const style = this.getChildStyle(index);
+        if (style) {
+            return html.replace(/^<(\w+)/, `<$1 style="${style}"`);
+        }
+        return html;
+    }
+
+    private getChildStyle(index: number): string {
+        const { childStyles } = this.state;
+
+        if (!childStyles) return '';
+
+        if (typeof childStyles === 'function') {
+            return childStyles(index);
+        }
+
+        if (Array.isArray(childStyles)) {
+            return childStyles[index] || '';
+        }
+
+        return '';
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+
+        const wrapper = document.createElement('div');
+        wrapper.className = this.buildClasses();
+        wrapper.id = this._id;
+
+        if (this.state.style) {
+            wrapper.setAttribute('style', this.state.style);
+        }
+
+        // Render all children
+        this.state.children.forEach((child, index) => {
+            const childHtml = this.renderChild(child, index);
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = childHtml;
+
+            if (tempDiv.firstChild) {
+                wrapper.appendChild(tempDiv.firstChild);
+            }
+        });
+
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+
+        return this;
+    }
+
+    update(prop: string, value: any): void {
+        // Stack components are typically static
+    }
+}

package/lib/components/stack/HStack.d.ts

@@ -0,0 +1,11 @@
+import { BaseStack, StackOptions } from './BaseStack.js';
+/**
+ * HStack - Horizontal Stack Component
+ * Arranges children in a horizontal row
+ */
+export declare class HStack extends BaseStack {
+    protected baseClassName: string;
+    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
+}
+export declare function hstack(id: string, children: Record<string, any> | any[], options?: StackOptions): HStack;
+//# sourceMappingURL=HStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["HStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD;;;GAGG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAE3B,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB;CAG5F;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAE5G"}

package/lib/components/stack/HStack.js

@@ -0,0 +1,14 @@
+import { BaseStack } from './BaseStack.js';
+/**
+ * HStack - Horizontal Stack Component
+ * Arranges children in a horizontal row
+ */
+export class HStack extends BaseStack {
+    constructor(id, children, options = {}) {
+        super(id, children, options);
+        this.baseClassName = 'jux-hstack';
+    }
+}
+export function hstack(id, children, options = {}) {
+    return new HStack(id, children, options);
+}

package/lib/components/stack/HStack.ts

@@ -0,0 +1,17 @@
+import { BaseStack, StackOptions } from './BaseStack.js';
+
+/**
+ * HStack - Horizontal Stack Component
+ * Arranges children in a horizontal row
+ */
+export class HStack extends BaseStack {
+    protected baseClassName = 'jux-hstack';
+
+    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
+        super(id, children, options);
+    }
+}
+
+export function hstack(id: string, children: Record<string, any> | any[], options: StackOptions = {}): HStack {
+    return new HStack(id, children, options);
+}

package/lib/components/stack/VStack.d.ts

@@ -0,0 +1,11 @@
+import { BaseStack, StackOptions } from './BaseStack.js';
+/**
+ * VStack - Vertical Stack Component
+ * Arranges children in a vertical column
+ */
+export declare class VStack extends BaseStack {
+    protected baseClassName: string;
+    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
+}
+export declare function vstack(id: string, children: Record<string, any> | any[], options?: StackOptions): VStack;
+//# sourceMappingURL=VStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["VStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD;;;GAGG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAE3B,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB;CAG5F;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAE5G"}

package/lib/components/stack/VStack.js

@@ -0,0 +1,14 @@
+import { BaseStack } from './BaseStack.js';
+/**
+ * VStack - Vertical Stack Component
+ * Arranges children in a vertical column
+ */
+export class VStack extends BaseStack {
+    constructor(id, children, options = {}) {
+        super(id, children, options);
+        this.baseClassName = 'jux-vstack';
+    }
+}
+export function vstack(id, children, options = {}) {
+    return new VStack(id, children, options);
+}

package/lib/components/stack/VStack.ts

@@ -0,0 +1,17 @@
+import { BaseStack, StackOptions } from './BaseStack.js';
+
+/**
+ * VStack - Vertical Stack Component
+ * Arranges children in a vertical column
+ */
+export class VStack extends BaseStack {
+    protected baseClassName = 'jux-vstack';
+
+    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
+        super(id, children, options);
+    }
+}
+
+export function vstack(id: string, children: Record<string, any> | any[], options: StackOptions = {}): VStack {
+    return new VStack(id, children, options);
+}

package/lib/components/stack/ZStack.d.ts

@@ -0,0 +1,11 @@
+import { BaseStack, StackOptions } from './BaseStack.js';
+/**
+ * ZStack - Layered/Overlapping Stack Component
+ * Stacks children on top of each other (z-axis)
+ */
+export declare class ZStack extends BaseStack {
+    protected baseClassName: string;
+    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
+}
+export declare function zstack(id: string, children: Record<string, any> | any[], options?: StackOptions): ZStack;
+//# sourceMappingURL=ZStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZStack.d.ts","sourceRoot":"","sources":["ZStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD;;;GAGG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAE3B,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB;CAG5F;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAE5G"}

package/lib/components/stack/ZStack.js

@@ -0,0 +1,14 @@
+import { BaseStack } from './BaseStack.js';
+/**
+ * ZStack - Layered/Overlapping Stack Component
+ * Stacks children on top of each other (z-axis)
+ */
+export class ZStack extends BaseStack {
+    constructor(id, children, options = {}) {
+        super(id, children, options);
+        this.baseClassName = 'jux-zstack';
+    }
+}
+export function zstack(id, children, options = {}) {
+    return new ZStack(id, children, options);
+}

package/lib/components/stack/ZStack.ts

@@ -0,0 +1,17 @@
+import { BaseStack, StackOptions } from './BaseStack.js';
+
+/**
+ * ZStack - Layered/Overlapping Stack Component
+ * Stacks children on top of each other (z-axis)
+ */
+export class ZStack extends BaseStack {
+    protected baseClassName = 'jux-zstack';
+
+    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
+        super(id, children, options);
+    }
+}
+
+export function zstack(id: string, children: Record<string, any> | any[], options: StackOptions = {}): ZStack {
+    return new ZStack(id, children, options);
+}

package/lib/styles/stack.css

@@ -0,0 +1,133 @@
+/* ═══════════════════════════════════════════════════════════════════
+ * STACK LAYOUT COMPONENTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Vertical Stack */
+.jux-vstack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; /* Default spacing */
+}
+
+.jux-vstack-tight {
+  gap: 0.5rem; /* 8px */
+}
+
+.jux-vstack-loose {
+  gap: 1.5rem; /* 24px */
+}
+
+.jux-vstack-none {
+  gap: 0;
+}
+
+/* Horizontal Stack */
+.jux-hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem; /* Default spacing */
+}
+
+.jux-hstack-tight {
+  gap: 0.5rem;
+}
+
+.jux-hstack-loose {
+  gap: 1.5rem;
+}
+
+.jux-hstack-none {
+  gap: 0;
+}
+
+/* Z-Stack (Layered/Overlapping) */
+.jux-zstack {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  position: relative;
+}
+
+.jux-zstack > * {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.jux-zstack-tight > * {
+  margin: 0.25rem;
+}
+
+.jux-zstack-loose > * {
+  margin: 0.75rem;
+}
+
+.jux-zstack-none > * {
+  margin: 0;
+}
+
+/* Stack Alignment Options */
+.jux-stack-start {
+  align-items: flex-start;
+}
+
+.jux-stack-center {
+  align-items: center;
+}
+
+.jux-stack-end {
+  align-items: flex-end;
+}
+
+.jux-stack-stretch {
+  align-items: stretch;
+}
+
+/* Stack Justification Options */
+.jux-stack-justify-start {
+  justify-content: flex-start;
+}
+
+.jux-stack-justify-center {
+  justify-content: center;
+}
+
+.jux-stack-justify-end {
+  justify-content: flex-end;
+}
+
+.jux-stack-justify-between {
+  justify-content: space-between;
+}
+
+.jux-stack-justify-around {
+  justify-content: space-around;
+}
+
+.jux-stack-justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* Responsive Stacks */
+@media (max-width: 768px) {
+  .jux-hstack-responsive {
+    flex-direction: column;
+  }
+}
+
+/* Stack with Dividers */
+.jux-vstack-divider > *:not(:last-child) {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e4e4e7;
+  margin-bottom: 1rem;
+}
+
+.jux-hstack-divider > *:not(:last-child) {
+  padding-right: 1rem;
+  border-right: 1px solid #e4e4e7;
+  margin-right: 1rem;
+}
+
+.jux-zstack-divider > * {
+  border: 1px solid #e4e4e7;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.85",
+  "version": "1.1.87",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",