juxscript 1.1.107 → 1.1.109

package/lib/components/stack/BaseStack.ts

@@ -1,61 +1,47 @@
 import { BaseComponent, BaseState } from '../base/BaseComponent.js';
+import { applyLayoutExtensions, LayoutExtensions } from '../base/LayoutExtensions.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = [] as const;
 
 export interface StackOptions {
-    spacing?: 'none' | 'tight' | 'default' | 'loose';
+    spacing?: 'none' | 'tight' | 'normal' | '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 {
+export interface StackState extends BaseState {
     spacing: string;
-    align?: string;
-    justify?: string;
+    align: string;
+    justify: string;
     divider: boolean;
     responsive: boolean;
-    children: Array<any>;
-    childStyles?: ChildStyleFunction | string[];
 }
 
-/**
- * BaseStack - Foundation for all stack layout components
- */
 export abstract class BaseStack extends BaseComponent<StackState> {
     protected abstract baseClassName: string;
-    private _inlineStyles: Map<string, string> = new Map();
-    public _container: HTMLElement | null = null; // ✅ Make public for nesting
-
-    constructor(id: string, children: Record<string, any> | any[], options: StackOptions = {}) {
-        const childArray = Array.isArray(children)
-            ? children
-            : Object.values(children);
+    protected _container: HTMLElement | null = null;
+    protected _childStyleFunction: ((index: number) => string) | null = null;
 
+    constructor(id: string, protected children: Record<string, any> | any[], options: StackOptions = {}) {
         super(id, {
             visible: true,
             disabled: false,
             loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
+            class: '',
+            style: '',
             attributes: {},
-            spacing: options.spacing ?? 'default',
-            align: options.align,
-            justify: options.justify,
-            divider: options.divider ?? false,
-            responsive: options.responsive ?? false,
-            children: childArray,
-            childStyles: undefined
+            spacing: options.spacing || 'normal',
+            align: options.align || 'start',
+            justify: options.justify || 'start',
+            divider: options.divider || false,
+            responsive: options.responsive || false
         });
+
+        // ✅ Layout extensions are automatically applied in BaseComponent constructor
     }
 
     protected getTriggerEvents(): readonly string[] {
@@ -70,139 +56,83 @@ export abstract class BaseStack extends BaseComponent<StackState> {
      * FLUENT LAYOUT API
      * ═════════════════════════════════════════════════════════════════ */
 
-    spacing(value: 'none' | 'tight' | 'default' | 'loose'): this {
+    spacing(value: 'none' | 'tight' | 'normal' | 'loose'): this {
         this.state.spacing = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
 
     align(value: 'start' | 'center' | 'end' | 'stretch'): this {
         this.state.align = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
 
     justify(value: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'): this {
         this.state.justify = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
 
-    divider(value: boolean = true): this {
+    divider(value: boolean): this {
         this.state.divider = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
 
-    responsive(value: boolean = true): this {
+    responsive(value: boolean): this {
         this.state.responsive = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
 
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT STYLE API
+     * CHILD STYLING
      * ═════════════════════════════════════════════════════════════════ */
 
-    private _addStyle(property: string, value: string): this {
-        this._inlineStyles.set(property, value);
-        this._updateStyleAttribute();
+    childStyle(fn: (index: number) => string): this {
+        this._childStyleFunction = fn;
         return this;
     }
 
-    private _updateStyleAttribute(): void {
-        const styleString = Array.from(this._inlineStyles.entries())
-            .map(([prop, val]) => `${prop}: ${val}`)
-            .join('; ');
-
-        this.state.style = styleString;
-    }
-
-    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); }
+    protected getChildStyle(index: number): string {
+        return this._childStyleFunction ? this._childStyleFunction(index) : '';
+    }
 
     /* ═════════════════════════════════════════════════════════════════
-     * PROGRESSIVE CHILD STYLING
+     * Z-STACK SPECIFIC EFFECTS
      * ═════════════════════════════════════════════════════════════════ */
 
-    childStyle(stylesOrFunction: string[] | ChildStyleFunction): this {
-        this.state.childStyles = stylesOrFunction;
+    fade(topOpacity: number = 1, step: number = 0.2): this {
+        this._childStyleFunction = (index) => `opacity: ${Math.max(0, topOpacity - index * step)};`;
         return this;
     }
 
-    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;`;
+    cascade(offset: number = 20, direction: 'horizontal' | 'vertical' | 'both' = 'both'): this {
+        this._childStyleFunction = (index) => {
+            if (direction === 'horizontal') {
+                return `margin-left: ${index * offset}px;`;
+            } else if (direction === 'vertical') {
+                return `margin-top: ${index * offset}px;`;
             } else {
-                return `margin-left: ${offset}px; margin-top: ${offset}px;`;
+                return `margin-left: ${index * offset}px; margin-top: ${index * offset}px;`;
             }
         };
         return this;
     }
 
-    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;
-    }
-
-    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(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(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(baseDelay: number = 100): this {
-        this.state.childStyles = (index: number) => {
-            const delay = baseDelay * index;
-            return `animation-delay: ${delay}ms;`;
-        };
+    scaleProgressive(topScale: number = 1, step: number = 0.1): this {
+        this._childStyleFunction = (index) => `transform: scale(${Math.max(0.1, topScale - index * step)});`;
         return this;
     }
 
@@ -210,8 +140,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
      * ANIMATION API (Fluent)
      * ═════════════════════════════════════════════════════════════════ */
 
-    /* Stack-Level Animations (Animate the container) */
-
+    /* Stack-Level Animations */
     fadeIn(): this {
         return this.addClass('jux-stack-fade-in');
     }
@@ -252,8 +181,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this.addClass('jux-stack-glow');
     }
 
-    /* Item-Level Animations (Animate the children) */
-
+    /* Item-Level Animations */
     fadeInItems(): this {
         return this.addClass('jux-stack-fade-in-items');
     }
@@ -294,14 +222,66 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this.addClass('jux-stack-glow-items');
     }
 
-    /* Stagger (Only works with item-level animations) */
+    /* 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');
     }
 
-    /* Interactive & Utility */
-
     interactive(): this {
         return this.addClass('jux-stack-interactive');
     }
@@ -314,9 +294,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         return this.addClass('jux-stack-smooth-items');
     }
 
-    /**
-     * Combine animation with stagger
-     */
+    /* Convenience Combos */
     animateStagger(animation: 'fade' | 'slide' | 'scale' | 'bounce' = 'fade', direction?: 'up' | 'down' | 'left' | 'right'): this {
         if (animation === 'slide' && direction) {
             this.slideIn(direction);
@@ -331,23 +309,23 @@ export abstract class BaseStack extends BaseComponent<StackState> {
     }
 
     /* ═════════════════════════════════════════════════════════════════
-     * RENDER HELPERS
+     * RENDER
      * ═════════════════════════════════════════════════════════════════ */
 
     protected buildClasses(): string {
-        const { spacing, align, justify, divider, responsive } = this.state;
+        const { spacing, align, justify, divider, responsive, class: userClass } = this.state;
 
         const classes = [this.baseClassName];
 
-        if (spacing !== 'default') {
+        if (spacing !== 'normal') {
             classes.push(`${this.baseClassName}-${spacing}`);
         }
 
-        if (align) {
+        if (align !== 'start') {
             classes.push(`jux-stack-${align}`);
         }
 
-        if (justify) {
+        if (justify !== 'start') {
             classes.push(`jux-stack-justify-${justify}`);
         }
 
@@ -359,8 +337,8 @@ export abstract class BaseStack extends BaseComponent<StackState> {
             classes.push(`${this.baseClassName}-responsive`);
         }
 
-        if (this.state.class) {
-            classes.push(this.state.class);
+        if (userClass) {
+            classes.push(userClass);
         }
 
         return classes.join(' ');
@@ -373,13 +351,13 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         if (child && typeof child === 'object' && '_container' in child && child._container instanceof HTMLElement) {
             childElement = child._container;
         }
-        // ✅ Priority 2: Check if it's a JUX Component (has render method and container property)
+        // ✅ Priority 2: Check if it's a JUX Component (has render method)
         else if (child && typeof child === 'object' && typeof child.render === 'function') {
             // Create temporary container to render into
             const tempContainer = document.createElement('div');
-            tempContainer.style.display = 'contents'; // Don't add extra wrapper
+            tempContainer.style.display = 'contents';
 
-            // Render the component into temp container
+            // Render the component
             child.render(tempContainer);
 
             // Extract the rendered element
@@ -391,7 +369,7 @@ export abstract class BaseStack extends BaseComponent<StackState> {
                 childElement = tempContainer;
             }
         }
-        // ✅ Priority 3: Check if it's already a DOM element
+        // ✅ Priority 3: Already a DOM element
         else if (child instanceof HTMLElement) {
             childElement = child;
         }
@@ -416,54 +394,39 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         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 '';
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * 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;
+        const stackDiv = document.createElement('div');
+        stackDiv.id = this._id;
+        stackDiv.className = this.buildClasses();
 
         if (this.state.style) {
-            wrapper.setAttribute('style', this.state.style);
+            stackDiv.setAttribute('style', this.state.style);
         }
 
-        // Render all children
-        this.state.children.forEach((child, index) => {
+        // Handle both array and object children
+        const childArray = Array.isArray(this.children)
+            ? this.children
+            : Object.values(this.children);
+
+        childArray.forEach((child, index) => {
             const childEl = this.renderChild(child, index);
-            wrapper.appendChild(childEl);
+            stackDiv.appendChild(childEl);
         });
 
-        this._wireStandardEvents(wrapper);
+        this._wireStandardEvents(stackDiv);
 
-        // ✅ Store wrapper as _container for nesting
-        this._container = wrapper;
-
-        container.appendChild(wrapper);
+        container.appendChild(stackDiv);
+        this._container = stackDiv;
 
         return this;
     }
 
     update(prop: string, value: any): void {
-        // Stack components are typically static
+        // Stacks don't need reactive updates
     }
 }
+
+// ✅ Type assertion for LayoutExtensions
+export interface BaseStack extends LayoutExtensions { }