juxscript 1.1.130 → 1.1.133

package/lib/components/stack/BaseStack.ts

@@ -1,22 +1,12 @@
 import { BaseComponent, BaseState } from '../base/BaseComponent.js';
-import { LayoutExtensions } from '../base/LayoutExtensions.js';
 
-// Event definitions
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = [] as const;
 
-export interface StackOptions {
-    spacing?: 'none' | 'tight' | 'normal' | 'loose';
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-    divider?: boolean;
-    responsive?: boolean;
-}
-
 export interface StackState extends BaseState {
-    spacing: string;
-    align: string;
-    justify: string;
+    spacing: 'none' | 'tight' | 'normal' | 'loose';
+    align: 'start' | 'center' | 'end' | 'stretch';
+    justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
     divider: boolean;
     responsive: boolean;
 }
@@ -24,9 +14,12 @@ export interface StackState extends BaseState {
 export abstract class BaseStack extends BaseComponent<StackState> {
     protected abstract baseClassName: string;
     protected _container: HTMLElement | null = null;
+    protected _children: any[] = [];
     protected _childStyleFunction: ((index: number) => string) | null = null;
+    protected _autoRendered: boolean = false;
 
-    constructor(id: string, protected children: Record<string, any> | any[], options: StackOptions = {}) {
+    // ✅ ULTRA-MINIMAL: Only id required
+    constructor(id: string) {
         super(id, {
             visible: true,
             disabled: false,
@@ -34,15 +27,20 @@ export abstract class BaseStack extends BaseComponent<StackState> {
             class: '',
             style: '',
             attributes: {},
-            spacing: options.spacing || 'normal',
-            align: options.align || 'start',
-            justify: options.justify || 'start',
-            divider: options.divider || false,
-            responsive: options.responsive || false
+            spacing: 'normal',
+            align: 'start',
+            justify: 'start',
+            divider: false,
+            responsive: false
         });
 
-        // ✅ Layout extensions are automatically applied in BaseComponent constructor
-        // No need to call applyLayoutExtensions() here
+        // ✅ Auto-render on next tick
+        queueMicrotask(() => {
+            if (!this._autoRendered && !this.container) {
+                this._autoRendered = true;
+                this.render('app');
+            }
+        });
     }
 
     protected getTriggerEvents(): readonly string[] {
@@ -54,7 +52,76 @@ export abstract class BaseStack extends BaseComponent<StackState> {
     }
 
     /* ═════════════════════════════════════════════════════════════════
-     * STACK-SPECIFIC LAYOUT API (NOT in LayoutExtensions)
+     * CHILDREN MANAGEMENT (Fluent API)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set all children at once (replaces existing)
+     */
+    items(children: any[]): this {
+        this._children = children;
+        this._refreshChildren();
+        return this;
+    }
+
+    /**
+     * Add children to the end
+     */
+    addItems(...children: any[]): this {
+        this._children.push(...children);
+        this._refreshChildren();
+        return this;
+    }
+
+    /**
+     * Add a single child
+     */
+    addItem(child: any): this {
+        this._children.push(child);
+        this._refreshChildren();
+        return this;
+    }
+
+    /**
+     * Replace child at index
+     */
+    replaceItem(index: number, child: any): this {
+        if (index >= 0 && index < this._children.length) {
+            this._children[index] = child;
+            this._refreshChildren();
+        }
+        return this;
+    }
+
+    /**
+     * Remove child at index
+     */
+    removeItem(index: number): this {
+        if (index >= 0 && index < this._children.length) {
+            this._children.splice(index, 1);
+            this._refreshChildren();
+        }
+        return this;
+    }
+
+    /**
+     * Remove all children
+     */
+    clearItems(): this {
+        this._children = [];
+        this._refreshChildren();
+        return this;
+    }
+
+    /**
+     * Get current children array (read-only)
+     */
+    getItems(): readonly any[] {
+        return this._children;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * STACK LAYOUT API
      * ═════════════════════════════════════════════════════════════════ */
 
     spacing(value: 'none' | 'tight' | 'normal' | 'loose'): this {
@@ -81,7 +148,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this;
     }
 
-    divider(value: boolean): this {
+    divider(value: boolean = true): this {
         this.state.divider = value;
         if (this._container) {
             this._container.className = this.buildClasses();
@@ -89,7 +156,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this;
     }
 
-    responsive(value: boolean): this {
+    responsive(value: boolean = true): this {
         this.state.responsive = value;
         if (this._container) {
             this._container.className = this.buildClasses();
@@ -98,11 +165,12 @@ export abstract class BaseStack extends BaseComponent<StackState> {
     }
 
     /* ═════════════════════════════════════════════════════════════════
-     * CHILD STYLING (Stack-specific)
+     * CHILD STYLING
      * ═════════════════════════════════════════════════════════════════ */
 
     childStyle(fn: (index: number) => string): this {
         this._childStyleFunction = fn;
+        this._refreshChildren();
         return this;
     }
 
@@ -116,6 +184,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
 
     fade(topOpacity: number = 1, step: number = 0.2): this {
         this._childStyleFunction = (index) => `opacity: ${Math.max(0, topOpacity - index * step)};`;
+        this._refreshChildren();
         return this;
     }
 
@@ -129,210 +198,18 @@ export abstract class BaseStack extends BaseComponent<StackState> {
                 return `margin-left: ${index * offset}px; margin-top: ${index * offset}px;`;
             }
         };
+        this._refreshChildren();
         return this;
     }
 
     scaleProgressive(topScale: number = 1, step: number = 0.1): this {
         this._childStyleFunction = (index) => `transform: scale(${Math.max(0.1, topScale - index * step)});`;
+        this._refreshChildren();
         return this;
     }
 
     /* ═════════════════════════════════════════════════════════════════
-     * ANIMATION API (Stack-specific)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /* Stack-Level Animations */
-    fadeIn(): this {
-        return this.addClass('jux-stack-fade-in');
-    }
-
-    slideIn(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
-        return this.addClass(`jux-stack-slide-${direction}`);
-    }
-
-    scaleIn(): this {
-        return this.addClass('jux-stack-scale-in');
-    }
-
-    zoomIn(): this {
-        return this.addClass('jux-stack-zoom-in');
-    }
-
-    rotateIn(): this {
-        return this.addClass('jux-stack-rotate-in');
-    }
-
-    flipIn(axis: 'x' | 'y' = 'x'): this {
-        return this.addClass(`jux-stack-flip-${axis}`);
-    }
-
-    bounceIn(): this {
-        return this.addClass('jux-stack-bounce-in');
-    }
-
-    elasticIn(): this {
-        return this.addClass('jux-stack-elastic-in');
-    }
-
-    blurIn(): this {
-        return this.addClass('jux-stack-blur-in');
-    }
-
-    glow(): this {
-        return this.addClass('jux-stack-glow');
-    }
-
-    /* Item-Level Animations */
-    fadeInItems(): this {
-        return this.addClass('jux-stack-fade-in-items');
-    }
-
-    slideInItems(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
-        return this.addClass(`jux-stack-slide-${direction}-items`);
-    }
-
-    scaleInItems(): this {
-        return this.addClass('jux-stack-scale-in-items');
-    }
-
-    zoomInItems(): this {
-        return this.addClass('jux-stack-zoom-in-items');
-    }
-
-    rotateInItems(): this {
-        return this.addClass('jux-stack-rotate-in-items');
-    }
-
-    flipInItems(axis: 'x' | 'y' = 'x'): this {
-        return this.addClass(`jux-stack-flip-${axis}-items`);
-    }
-
-    bounceInItems(): this {
-        return this.addClass('jux-stack-bounce-in-items');
-    }
-
-    elasticInItems(): this {
-        return this.addClass('jux-stack-elastic-in-items');
-    }
-
-    blurInItems(): this {
-        return this.addClass('jux-stack-blur-in-items');
-    }
-
-    glowItems(): this {
-        return this.addClass('jux-stack-glow-items');
-    }
-
-    /* Speed Modifiers */
-    instant(): this {
-        return this.addClass('jux-stack-instant');
-    }
-
-    fast(): this {
-        return this.addClass('jux-stack-fast');
-    }
-
-    normal(): this {
-        return this.addClass('jux-stack-normal');
-    }
-
-    slow(): this {
-        return this.addClass('jux-stack-slow');
-    }
-
-    slower(): this {
-        return this.addClass('jux-stack-slower');
-    }
-
-    /* Timing Functions */
-    linear(): this {
-        return this.addClass('jux-stack-linear');
-    }
-
-    ease(): this {
-        return this.addClass('jux-stack-ease');
-    }
-
-    easeIn(): this {
-        return this.addClass('jux-stack-ease-in');
-    }
-
-    easeOut(): this {
-        return this.addClass('jux-stack-ease-out');
-    }
-
-    easeInOut(): this {
-        return this.addClass('jux-stack-ease-in-out');
-    }
-
-    bounceTiming(): this {
-        return this.addClass('jux-stack-bounce-timing');
-    }
-
-    elasticTiming(): this {
-        return this.addClass('jux-stack-elastic-timing');
-    }
-
-    /* Delay Control */
-    delay(ms: 100 | 200 | 300 | 500 | 1000): this {
-        return this.addClass(`jux-stack-delay-${ms}`);
-    }
-
-    /* Stagger & Interactive */
-    staggered(): this {
-        return this.addClass('jux-stack-stagger');
-    }
-
-    stagger(delayMs: number = 100): this {
-        this.addClass('jux-stack-stagger');
-
-        if (delayMs !== 100 && this._container) {
-            const children = this._container.children;
-            for (let i = 0; i < Math.min(children.length, 10); i++) {
-                const child = children[i] as HTMLElement;
-                const currentStyle = child.getAttribute('style') || '';
-                const delay = i * delayMs;
-
-                const cleanedStyle = currentStyle
-                    .split(';')
-                    .filter(s => !s.trim().startsWith('animation-delay'))
-                    .join(';');
-
-                child.setAttribute('style', `${cleanedStyle}; animation-delay: ${delay}ms`);
-            }
-        }
-
-        return this;
-    }
-
-    interactive(): this {
-        return this.addClass('jux-stack-interactive');
-    }
-
-    smooth(): this {
-        return this.addClass('jux-stack-smooth');
-    }
-
-    smoothItems(): this {
-        return this.addClass('jux-stack-smooth-items');
-    }
-
-    /* Convenience Combos */
-    animateStagger(animation: 'fade' | 'slide' | 'scale' | 'bounce' = 'fade', direction?: 'up' | 'down' | 'left' | 'right'): this {
-        if (animation === 'slide' && direction) {
-            this.slideIn(direction);
-        } else if (animation === 'fade') {
-            this.fadeIn();
-        } else if (animation === 'scale') {
-            this.scaleIn();
-        } else if (animation === 'bounce') {
-            this.bounceIn();
-        }
-        return this.staggered();
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
+     * RENDER & UPDATE
      * ═════════════════════════════════════════════════════════════════ */
 
     protected buildClasses(): string {
@@ -405,6 +282,22 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return childElement;
     }
 
+    /**
+     * Refresh children when items change
+     */
+    protected _refreshChildren(): void {
+        if (!this._container) return;
+
+        // Clear existing children
+        this._container.innerHTML = '';
+
+        // Re-render all children
+        this._children.forEach((child, index) => {
+            const childEl = this.renderChild(child, index);
+            this._container!.appendChild(childEl);
+        });
+    }
+
     render(targetId?: string | HTMLElement | BaseComponent<any>): this {
         const container = this._setupContainer(targetId);
 
@@ -412,16 +305,11 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         stackDiv.id = this._id;
         stackDiv.className = this.buildClasses();
 
-        // ✅ THIS LINE - Does it capture inline styles from state.style?
         if (this.state.style) {
             stackDiv.setAttribute('style', this.state.style);
         }
 
-        const childArray = Array.isArray(this.children)
-            ? this.children
-            : Object.values(this.children);
-
-        childArray.forEach((child, index) => {
+        this._children.forEach((child, index) => {
             const childEl = this.renderChild(child, index);
             stackDiv.appendChild(childEl);
         });
@@ -438,6 +326,3 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         // Stacks don't need reactive updates
     }
 }
-
-// ✅ Type assertion for LayoutExtensions (inherited from BaseComponent)
-export interface BaseStack extends LayoutExtensions { }

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

@@ -1,8 +1,18 @@
-import { BaseStack, StackOptions } from './BaseStack.js';
+import { BaseStack } from './BaseStack.js';
 export declare class HStack extends BaseStack {
     protected baseClassName: string;
-    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
-    static create(children: Record<string, any> | any[], options?: StackOptions): HStack;
+    constructor(id: string);
 }
-export declare function hstack(id: string, children: Record<string, any> | any[], options?: StackOptions): HStack;
+/**
+ * Create a horizontal stack (auto-renders)
+ *
+ * @example
+ * hstack('nav')
+ *   .items([
+ *     jux.link('home').text('Home'),
+ *     jux.link('about').text('About')
+ *   ])
+ *   .spacing('tight');
+ */
+export declare function hstack(id: string): HStack;
 //# sourceMappingURL=HStack.d.ts.map

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,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;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"}
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["HStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAG3B,EAAE,EAAE,MAAM;CAGzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC"}

package/lib/components/stack/HStack.js

@@ -1,21 +1,22 @@
 import { BaseStack } from './BaseStack.js';
 export class HStack extends BaseStack {
-    constructor(id, children, options = {}) {
-        super(id, children, options);
+    // ✅ ULTRA-MINIMAL: Only id
+    constructor(id) {
+        super(id);
         this.baseClassName = 'jux-hstack';
     }
-    static create(children, options = {}) {
-        const id = `hstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        const instance = new HStack(id, children, options);
-        // ✅ Auto-render to 'app' on next tick
-        queueMicrotask(() => {
-            if (!instance._container) {
-                instance.render('app');
-            }
-        });
-        return instance;
-    }
 }
-export function hstack(id, children, options = {}) {
-    return new HStack(id, children, options);
+/**
+ * Create a horizontal stack (auto-renders)
+ *
+ * @example
+ * hstack('nav')
+ *   .items([
+ *     jux.link('home').text('Home'),
+ *     jux.link('about').text('About')
+ *   ])
+ *   .spacing('tight');
+ */
+export function hstack(id) {
+    return new HStack(id);
 }

package/lib/components/stack/HStack.ts

@@ -1,27 +1,25 @@
-import { BaseStack, StackOptions } from './BaseStack.js';
+import { BaseStack } from './BaseStack.js';
 
 export class HStack extends BaseStack {
     protected baseClassName = 'jux-hstack';
 
-    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
-        super(id, children, options);
-    }
-
-    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);
-
-        // ✅ Auto-render to 'app' on next tick
-        queueMicrotask(() => {
-            if (!instance._container) {
-                instance.render('app');
-            }
-        });
-
-        return instance;
+    // ✅ ULTRA-MINIMAL: Only id
+    constructor(id: string) {
+        super(id);
     }
 }
 
-export function hstack(id: string, children: Record<string, any> | any[], options: StackOptions = {}): HStack {
-    return new HStack(id, children, options);
+/**
+ * Create a horizontal stack (auto-renders)
+ *
+ * @example
+ * hstack('nav')
+ *   .items([
+ *     jux.link('home').text('Home'),
+ *     jux.link('about').text('About')
+ *   ])
+ *   .spacing('tight');
+ */
+export function hstack(id: string): HStack {
+    return new HStack(id);
 }

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

@@ -1,11 +1,19 @@
-import { BaseStack, StackOptions } from './BaseStack.js';
+import { BaseStack } from './BaseStack.js';
 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
-     */
-    static create(children: Record<string, any> | any[], options?: StackOptions): VStack;
+    constructor(id: string);
 }
-export declare function vstack(id: string, children: Record<string, any> | any[], options?: StackOptions): VStack;
+/**
+ * Create a vertical stack (auto-renders)
+ *
+ * @example
+ * vstack('my-stack')
+ *   .items([
+ *     jux.heading('title').content('Hello'),
+ *     jux.paragraph('text').text('World')
+ *   ])
+ *   .spacing('loose')
+ *   .align('center');
+ */
+export declare function vstack(id: string): VStack;
 //# sourceMappingURL=VStack.d.ts.map

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,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"}
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["VStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAG3B,EAAE,EAAE,MAAM;CAGzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC"}

package/lib/components/stack/VStack.js

@@ -1,23 +1,23 @@
 import { BaseStack } from './BaseStack.js';
 export class VStack extends BaseStack {
-    constructor(id, children, options = {}) {
-        super(id, children, options);
+    // ✅ ULTRA-MINIMAL: Only id
+    constructor(id) {
+        super(id);
         this.baseClassName = 'jux-vstack';
     }
-    /**
-     * ✅ Static create method with auto-render
-     */
-    static create(children, options = {}) {
-        const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        const instance = new VStack(id, children, options);
-        setTimeout(() => {
-            if (!instance._container) {
-                instance.render('app');
-            }
-        }, 0); // Use setTimeout instead of queueMicrotask for safer timing
-        return instance;
-    }
 }
-export function vstack(id, children, options = {}) {
-    return new VStack(id, children, options);
+/**
+ * Create a vertical stack (auto-renders)
+ *
+ * @example
+ * vstack('my-stack')
+ *   .items([
+ *     jux.heading('title').content('Hello'),
+ *     jux.paragraph('text').text('World')
+ *   ])
+ *   .spacing('loose')
+ *   .align('center');
+ */
+export function vstack(id) {
+    return new VStack(id);
 }

package/lib/components/stack/VStack.ts

@@ -1,30 +1,26 @@
-import { BaseStack, StackOptions } from './BaseStack.js';
+import { BaseStack } from './BaseStack.js';
 
 export class VStack extends BaseStack {
     protected baseClassName = 'jux-vstack';
 
-    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
-        super(id, children, options);
-    }
-
-    /**
-     * ✅ Static create method with auto-render
-     */
-    static create(children: Record<string, any> | any[], options: StackOptions = {}): VStack {
-        const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        const instance = new VStack(id, children, options);
-
-
-        setTimeout(() => {
-            if (!instance._container) {
-                instance.render('app');
-            }
-        }, 0); // Use setTimeout instead of queueMicrotask for safer timing
-
-        return instance;
+    // ✅ ULTRA-MINIMAL: Only id
+    constructor(id: string) {
+        super(id);
     }
 }
 
-export function vstack(id: string, children: Record<string, any> | any[], options: StackOptions = {}): VStack {
-    return new VStack(id, children, options);
+/**
+ * Create a vertical stack (auto-renders)
+ *
+ * @example
+ * vstack('my-stack')
+ *   .items([
+ *     jux.heading('title').content('Hello'),
+ *     jux.paragraph('text').text('World')
+ *   ])
+ *   .spacing('loose')
+ *   .align('center');
+ */
+export function vstack(id: string): VStack {
+    return new VStack(id);
 }