juxscript 1.1.89 → 1.1.91

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T18:39:00.380Z",
+  "generatedAt": "2026-02-12T19:43:12.253Z",
   "components": [
     {
       "file": "alert.js",

package/lib/components/button.d.ts

@@ -44,6 +44,11 @@ export declare class Button extends BaseComponent<ButtonState> {
      * Set button content as HTML (overrides label)
      */
     content(value: string): this;
+    icon(value: string): this;
+    iconPosition(value: 'left' | 'right'): this;
+    fullWidth(value: boolean): this;
+    variant(value: string): this;
+    size(value: 'small' | 'medium' | 'large'): this;
     /**
      * Alias for content() - more semantic
      */

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAmB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAmB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO/C;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}

package/lib/components/button.js

@@ -56,6 +56,26 @@ export class Button extends BaseComponent {
         this._updateButtonText();
         return this;
     }
+    icon(value) {
+        this.state.icon = value;
+        return this;
+    }
+    iconPosition(value) {
+        this.state.iconPosition = value;
+        return this;
+    }
+    fullWidth(value) {
+        this.state.fullWidth = value;
+        return this;
+    }
+    variant(value) {
+        this.state.variant = value;
+        return this;
+    }
+    size(value) {
+        this.state.size = value;
+        return this;
+    }
     /**
      * Alias for content() - more semantic
      */

package/lib/components/button.ts

@@ -96,6 +96,31 @@ export class Button extends BaseComponent<ButtonState> {
     return this;
   }
 
+  icon(value: string): this {
+    this.state.icon = value;
+    return this;
+  }
+  iconPosition(value: 'left' | 'right'): this {
+    this.state.iconPosition = value;
+    return this;
+  }
+  fullWidth(value: boolean): this {
+    this.state.fullWidth = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  size(value: 'small' | 'medium' | 'large'): this {
+    this.state.size = value;
+    return this;
+  }
+
+
+
   /**
    * Alias for content() - more semantic
    */

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

@@ -22,7 +22,6 @@ interface StackState extends BaseState {
 }
 /**
  * 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;
@@ -35,13 +34,7 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
     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;
@@ -57,53 +50,30 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
     backgroundColor(value: string): this;
     boxShadow(value: string): this;
     opacity(value: string | number): this;
-    position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this;
+    position(value: string): 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;
+    overflow(value: string): this;
+    overflowX(value: string): this;
+    overflowY(value: string): 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;
+    protected renderChild(child: any, index: number): HTMLElement;
     private getChildStyle;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
     update(prop: string, value: any): void;

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

@@ -4,11 +4,9 @@ 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);
@@ -27,7 +25,7 @@ export class BaseStack extends BaseComponent {
             children: childArray,
             childStyles: undefined
         });
-        this._inlineStyles = new Map(); // ✅ Stores individual CSS properties
+        this._inlineStyles = new Map();
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -59,134 +57,55 @@ export class BaseStack extends BaseComponent {
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT STYLE API - Comprehensive CSS properties
+     * FLUENT STYLE API
      * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Internal helper to add individual CSS properties
-     */
     _addStyle(property, value) {
-        this._inlineStyles.set(property, value); // ✅ Store in Map
-        this._updateStyleAttribute(); // ✅ Rebuild style string
+        this._inlineStyles.set(property, value);
+        this._updateStyleAttribute();
         return this;
     }
-    /**
-     * Build and apply the complete style attribute
-     */
     _updateStyleAttribute() {
-        const styleString = Array.from(this._inlineStyles.entries()) // ✅ Convert Map to array
-            .map(([prop, val]) => `${prop}: ${val}`) // ✅ Format each entry
-            .join('; '); // ✅ Join with semicolons
+        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);
-    }
+    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); }
+    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); }
+    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)); }
+    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(value) { return this._addStyle('overflow', value); }
+    overflowX(value) { return this._addStyle('overflow-x', value); }
+    overflowY(value) { return this._addStyle('overflow-y', value); }
+    display(value) { return this._addStyle('display', value); }
+    cursor(value) { return this._addStyle('cursor', value); }
+    transform(value) { return this._addStyle('transform', value); }
+    transformOrigin(value) { return this._addStyle('transform-origin', value); }
+    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;
@@ -202,9 +121,6 @@ export class BaseStack extends BaseComponent {
         };
         return this;
     }
-    /**
-     * Fan effect - rotate children progressively
-     */
     fan(angle = 5, origin = 'bottom center') {
         this.state.childStyles = (index) => {
             const rotation = angle * index;
@@ -212,9 +128,6 @@ export class BaseStack extends BaseComponent {
         };
         return this;
     }
-    /**
-     * Scale progression - shrink/grow children
-     */
     scaleProgressive(startScale = 1, step = 0.05, origin = 'center') {
         this.state.childStyles = (index) => {
             const scale = startScale - (step * index);
@@ -222,9 +135,6 @@ export class BaseStack extends BaseComponent {
         };
         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));
@@ -232,9 +142,6 @@ export class BaseStack extends BaseComponent {
         };
         return this;
     }
-    /**
-     * Blur effect - progressive blur
-     */
     blur(startBlur = 0, step = 2) {
         this.state.childStyles = (index) => {
             const blur = startBlur + (step * index);
@@ -242,9 +149,6 @@ export class BaseStack extends BaseComponent {
         };
         return this;
     }
-    /**
-     * Stagger animation delays
-     */
     stagger(baseDelay = 100) {
         this.state.childStyles = (index) => {
             const delay = baseDelay * index;
@@ -258,78 +162,55 @@ export class BaseStack extends BaseComponent {
     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
+        let childElement;
+        // String - wrap in div
         if (typeof child === 'string') {
-            return this.wrapChildWithStyle(child, index);
+            childElement = document.createElement('div');
+            childElement.textContent = child;
         }
-        // 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);
-            }
+        // JUX Component - render it
+        else if (child && typeof child.render === 'function' && 'container' in child) {
+            const tempContainer = document.createElement('div');
+            child.render(tempContainer);
+            childElement = child.container || tempContainer.firstElementChild;
         }
-        // DOM element
-        if (child && child.outerHTML) {
-            return this.injectChildStyle(child.outerHTML, index);
+        // DOM Element - use directly
+        else if (child instanceof HTMLElement) {
+            childElement = child;
         }
-        // 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
+        else {
+            childElement = document.createElement('div');
+            childElement.textContent = String(child);
         }
-        // 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}"`);
+        // Apply child styles
+        const styleStr = this.getChildStyle(index);
+        if (styleStr) {
+            const existingStyle = childElement.getAttribute('style') || '';
+            childElement.setAttribute('style', existingStyle + '; ' + styleStr);
         }
-        return html;
+        return childElement;
     }
     getChildStyle(index) {
         const { childStyles } = this.state;
@@ -351,18 +232,13 @@ export class BaseStack extends BaseComponent {
         const wrapper = document.createElement('div');
         wrapper.className = this.buildClasses();
         wrapper.id = this._id;
-        // ✅ Apply the built style string
         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);
-            }
+            const childEl = this.renderChild(child, index);
+            wrapper.appendChild(childEl);
         });
         this._wireStandardEvents(wrapper);
         container.appendChild(wrapper);

package/lib/components/stack/BaseStack.ts

@@ -30,16 +30,14 @@ interface StackState extends BaseState {
 
 /**
  * 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(); // ✅ Stores individual CSS properties
+    private _inlineStyles: Map<string, string> = new Map();
 
     constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
-        // Convert children object to array, preserving order
-        const childArray = Array.isArray(children)
-            ? children
+        const childArray = Array.isArray(children) 
+            ? children 
             : Object.values(children);
 
         super(id, {
@@ -97,173 +95,65 @@ export abstract class BaseStack extends BaseComponent<StackState> {
     }
 
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT STYLE API - Comprehensive CSS properties
+     * FLUENT STYLE API
      * ═════════════════════════════════════════════════════════════════ */
 
-    /**
-     * Internal helper to add individual CSS properties
-     */
     private _addStyle(property: string, value: string): this {
-        this._inlineStyles.set(property, value); // ✅ Store in Map
-        this._updateStyleAttribute();             // ✅ Rebuild style string
+        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())  // ✅ Convert Map to array
-            .map(([prop, val]) => `${prop}: ${val}`)                  // ✅ Format each entry
-            .join('; ');                                               // ✅ Join with semicolons
-
+        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);
-    }
+    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); }
+    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); }
+    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)); }
+    position(value: string): 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(value: string): this { return this._addStyle('overflow', value); }
+    overflowX(value: string): this { return this._addStyle('overflow-x', value); }
+    overflowY(value: string): this { return this._addStyle('overflow-y', value); }
+    display(value: string): this { return this._addStyle('display', value); }
+    cursor(value: string): this { return this._addStyle('cursor', value); }
+    transform(value: string): this { return this._addStyle('transform', value); }
+    transformOrigin(value: string): this { return this._addStyle('transform-origin', value); }
+    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') {
@@ -275,9 +165,6 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         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;
@@ -286,9 +173,6 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         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);
@@ -297,9 +181,6 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         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));
@@ -308,9 +189,6 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this;
     }
 
-    /**
-     * Blur effect - progressive blur
-     */
     blur(startBlur: number = 0, step: number = 2): this {
         this.state.childStyles = (index: number) => {
             const blur = startBlur + (step * index);
@@ -319,9 +197,6 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this;
     }
 
-    /**
-     * Stagger animation delays
-     */
     stagger(baseDelay: number = 100): this {
         this.state.childStyles = (index: number) => {
             const delay = baseDelay * index;
@@ -336,112 +211,83 @@ export abstract class BaseStack extends BaseComponent<StackState> {
 
     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
+    protected renderChild(child: any, index: number): HTMLElement {
+        let childElement: HTMLElement;
+
+        // String - wrap in div
         if (typeof child === 'string') {
-            return this.wrapChildWithStyle(child, index);
+            childElement = document.createElement('div');
+            childElement.textContent = child;
         }
-
-        // 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);
-            }
+        // JUX Component - render it
+        else if (child && typeof child.render === 'function' && 'container' in child) {
+            const tempContainer = document.createElement('div');
+            child.render(tempContainer);
+            childElement = child.container || tempContainer.firstElementChild as HTMLElement;
         }
-
-        // DOM element
-        if (child && child.outerHTML) {
-            return this.injectChildStyle(child.outerHTML, index);
+        // DOM Element - use directly
+        else if (child instanceof HTMLElement) {
+            childElement = child;
         }
-
-        // 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
+        else {
+            childElement = document.createElement('div');
+            childElement.textContent = String(child);
         }
 
-        // 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>`;
+        // Apply child styles
+        const styleStr = this.getChildStyle(index);
+        if (styleStr) {
+            const existingStyle = childElement.getAttribute('style') || '';
+            childElement.setAttribute('style', existingStyle + '; ' + styleStr);
         }
-        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;
+        return childElement;
     }
 
     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 '';
     }
 
@@ -455,21 +301,15 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         const wrapper = document.createElement('div');
         wrapper.className = this.buildClasses();
         wrapper.id = this._id;
-
-        // ✅ Apply the built style string
+        
         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);
-            }
+            const childEl = this.renderChild(child, index);
+            wrapper.appendChild(childEl);
         });
 
         this._wireStandardEvents(wrapper);

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

@@ -1,15 +1,7 @@
 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);
-    /**
-     * ✅ Static create method with auto-render
-     * Allows: hstack.create({ children }, options).padding('20px').render()
-     */
     static create(children: Record<string, any> | any[], options?: StackOptions): HStack;
 }
 export declare function hstack(id: string, children: Record<string, any> | any[], options?: StackOptions): HStack;

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

@@ -1 +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;IAIzF;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM;CAY3F;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"}
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["HStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,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;IAIzF,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM;CAY3F;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

@@ -1,17 +1,9 @@
 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';
     }
-    /**
-     * ✅ Static create method with auto-render
-     * Allows: hstack.create({ children }, options).padding('20px').render()
-     */
     static create(children, options = {}) {
         const id = `hstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new HStack(id, children, options);

package/lib/components/stack/HStack.ts

@@ -1,9 +1,5 @@
 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';
 
@@ -11,10 +7,6 @@ export class HStack extends BaseStack {
         super(id, children, options);
     }
 
-    /**
-     * ✅ Static create method with auto-render
-     * Allows: hstack.create({ children }, options).padding('20px').render()
-     */
     static create(children: Record<string, any> | any[], options: StackOptions = {}): HStack {
         const id = `hstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new HStack(id, children, options);

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

@@ -1,14 +1,9 @@
 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);
     /**
      * ✅ Static create method with auto-render
-     * Allows: vstack.create({ children }, options).padding('20px').render()
      */
     static create(children: Record<string, any> | any[], options?: StackOptions): VStack;
 }

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

@@ -1 +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;IAIzF;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM;CAc3F;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"}
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["VStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,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;IAIzF;;OAEG;IACH,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM;CAa3F;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

@@ -1,8 +1,4 @@
 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);
@@ -10,13 +6,11 @@ export class VStack extends BaseStack {
     }
     /**
      * ✅ Static create method with auto-render
-     * Allows: vstack.create({ children }, options).padding('20px').render()
      */
     static create(children, options = {}) {
-        // Generate unique ID for anonymous stacks
         const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new VStack(id, children, options);
-        // Auto-render after microtask to allow chaining
+        // ✅ Auto-render after microtask
         queueMicrotask(() => {
             if (!instance.container) {
                 instance.render('app');

package/lib/components/stack/VStack.ts

@@ -1,9 +1,5 @@
 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';
 
@@ -13,14 +9,12 @@ export class VStack extends BaseStack {
 
     /**
      * ✅ Static create method with auto-render
-     * Allows: vstack.create({ children }, options).padding('20px').render()
      */
     static create(children: Record<string, any> | any[], options: StackOptions = {}): VStack {
-        // Generate unique ID for anonymous stacks
         const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new VStack(id, children, options);
 
-        // Auto-render after microtask to allow chaining
+        // ✅ Auto-render after microtask
         queueMicrotask(() => {
             if (!instance.container) {
                 instance.render('app');

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

@@ -1,15 +1,7 @@
 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);
-    /**
-     * ✅ Static create method with auto-render
-     * Allows: zstack.create({ children }, options).cascade(30).render()
-     */
     static create(children: Record<string, any> | any[], options?: StackOptions): ZStack;
 }
 export declare function zstack(id: string, children: Record<string, any> | any[], options?: StackOptions): ZStack;

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

@@ -1 +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;IAIzF;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM;CAY3F;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"}
+{"version":3,"file":"ZStack.d.ts","sourceRoot":"","sources":["ZStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,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;IAIzF,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM;CAY3F;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

@@ -1,17 +1,9 @@
 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';
     }
-    /**
-     * ✅ Static create method with auto-render
-     * Allows: zstack.create({ children }, options).cascade(30).render()
-     */
     static create(children, options = {}) {
         const id = `zstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new ZStack(id, children, options);

package/lib/components/stack/ZStack.ts

@@ -1,9 +1,5 @@
 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';
 
@@ -11,10 +7,6 @@ export class ZStack extends BaseStack {
         super(id, children, options);
     }
 
-    /**
-     * ✅ Static create method with auto-render
-     * Allows: zstack.create({ children }, options).cascade(30).render()
-     */
     static create(children: Record<string, any> | any[], options: StackOptions = {}): ZStack {
         const id = `zstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new ZStack(id, children, options);

package/package.json

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