juxscript 1.1.107 → 1.1.109

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

@@ -1,78 +1,37 @@
 import { BaseComponent, BaseState } from '../base/BaseComponent.js';
+import { LayoutExtensions } from '../base/LayoutExtensions.js';
 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 declare abstract class BaseStack extends BaseComponent<StackState> {
+    protected children: Record<string, any> | any[];
     protected abstract baseClassName: string;
-    private _inlineStyles;
-    _container: HTMLElement | null;
+    protected _container: HTMLElement | null;
+    protected _childStyleFunction: ((index: number) => string) | null;
     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;
+    spacing(value: 'none' | 'tight' | 'normal' | '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;
-    private _addStyle;
-    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: 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: 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;
-    childStyle(stylesOrFunction: string[] | ChildStyleFunction): this;
-    cascade(baseOffset?: number, axis?: 'x' | 'y' | 'both' | 'horizontal' | 'vertical' | 'xy'): this;
-    fan(angle?: number, origin?: string): this;
-    scaleProgressive(startScale?: number, step?: number, origin?: string): this;
-    fade(startOpacity?: number, step?: number): this;
-    blur(startBlur?: number, step?: number): this;
-    stagger(baseDelay?: number): this;
+    divider(value: boolean): this;
+    responsive(value: boolean): this;
+    childStyle(fn: (index: number) => string): this;
+    protected getChildStyle(index: number): string;
+    fade(topOpacity?: number, step?: number): this;
+    cascade(offset?: number, direction?: 'horizontal' | 'vertical' | 'both'): this;
+    scaleProgressive(topScale?: number, step?: number): this;
     fadeIn(): this;
     slideIn(direction?: 'up' | 'down' | 'left' | 'right'): this;
     scaleIn(): this;
@@ -93,19 +52,29 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
     elasticInItems(): this;
     blurInItems(): this;
     glowItems(): this;
+    instant(): this;
+    fast(): this;
+    normal(): this;
+    slow(): this;
+    slower(): this;
+    linear(): this;
+    ease(): this;
+    easeIn(): this;
+    easeOut(): this;
+    easeInOut(): this;
+    bounceTiming(): this;
+    elasticTiming(): this;
+    delay(ms: 100 | 200 | 300 | 500 | 1000): this;
     staggered(): this;
     interactive(): this;
     smooth(): this;
     smoothItems(): this;
-    /**
-     * Combine animation with stagger
-     */
     animateStagger(animation?: 'fade' | 'slide' | 'scale' | 'bounce', direction?: 'up' | 'down' | 'left' | 'right'): this;
     protected buildClasses(): string;
     protected renderChild(child: any, index: number): HTMLElement;
-    private getChildStyle;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
     update(prop: string, value: any): void;
 }
-export {};
+export interface BaseStack extends LayoutExtensions {
+}
 //# sourceMappingURL=BaseStack.d.ts.map

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

@@ -2,31 +2,25 @@ import { BaseComponent } from '../base/BaseComponent.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = [];
-/**
- * BaseStack - Foundation for all stack layout components
- */
 export class BaseStack extends BaseComponent {
     constructor(id, children, options = {}) {
-        const childArray = Array.isArray(children)
-            ? children
-            : Object.values(children);
         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
         });
-        this._inlineStyles = new Map();
-        this._container = null; // ✅ Make public for nesting
+        this.children = children;
+        this._container = null;
+        this._childStyleFunction = null;
+        // ✅ Layout extensions are automatically applied in BaseComponent constructor
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -39,128 +33,78 @@ export class BaseStack extends BaseComponent {
      * ═════════════════════════════════════════════════════════════════ */
     spacing(value) {
         this.state.spacing = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
     align(value) {
         this.state.align = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
     justify(value) {
         this.state.justify = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
-    divider(value = true) {
+    divider(value) {
         this.state.divider = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
-    responsive(value = true) {
+    responsive(value) {
         this.state.responsive = value;
+        if (this._container) {
+            this._container.className = this.buildClasses();
+        }
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT STYLE API
+     * CHILD STYLING
      * ═════════════════════════════════════════════════════════════════ */
-    _addStyle(property, value) {
-        this._inlineStyles.set(property, value);
-        this._updateStyleAttribute();
+    childStyle(fn) {
+        this._childStyleFunction = fn;
         return this;
     }
-    _updateStyleAttribute() {
-        const styleString = Array.from(this._inlineStyles.entries())
-            .map(([prop, val]) => `${prop}: ${val}`)
-            .join('; ');
-        this.state.style = styleString;
-    }
-    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); }
+    getChildStyle(index) {
+        return this._childStyleFunction ? this._childStyleFunction(index) : '';
+    }
     /* ═════════════════════════════════════════════════════════════════
-     * PROGRESSIVE CHILD STYLING
+     * Z-STACK SPECIFIC EFFECTS
      * ═════════════════════════════════════════════════════════════════ */
-    childStyle(stylesOrFunction) {
-        this.state.childStyles = stylesOrFunction;
+    fade(topOpacity = 1, step = 0.2) {
+        this._childStyleFunction = (index) => `opacity: ${Math.max(0, topOpacity - index * step)};`;
         return this;
     }
-    cascade(baseOffset = 20, axis = 'both') {
-        this.state.childStyles = (index) => {
-            const offset = baseOffset * index;
-            if (axis === 'horizontal' || axis === 'x') {
-                return `margin-left: ${offset}px;`;
+    cascade(offset = 20, direction = 'both') {
+        this._childStyleFunction = (index) => {
+            if (direction === 'horizontal') {
+                return `margin-left: ${index * offset}px;`;
             }
-            else if (axis === 'vertical' || axis === 'y') {
-                return `margin-top: ${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 = 5, origin = 'bottom center') {
-        this.state.childStyles = (index) => {
-            const rotation = angle * index;
-            return `transform: rotate(${rotation}deg); transform-origin: ${origin};`;
-        };
-        return this;
-    }
-    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(startOpacity = 1, step = 0.15) {
-        this.state.childStyles = (index) => {
-            const opacity = Math.max(0.1, startOpacity - (step * index));
-            return `opacity: ${opacity};`;
-        };
-        return this;
-    }
-    blur(startBlur = 0, step = 2) {
-        this.state.childStyles = (index) => {
-            const blur = startBlur + (step * index);
-            return `filter: blur(${blur}px);`;
-        };
-        return this;
-    }
-    stagger(baseDelay = 100) {
-        this.state.childStyles = (index) => {
-            const delay = baseDelay * index;
-            return `animation-delay: ${delay}ms;`;
-        };
+    scaleProgressive(topScale = 1, step = 0.1) {
+        this._childStyleFunction = (index) => `transform: scale(${Math.max(0.1, topScale - index * step)});`;
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════
      * ANIMATION API (Fluent)
      * ═════════════════════════════════════════════════════════════════ */
-    /* Stack-Level Animations (Animate the container) */
+    /* Stack-Level Animations */
     fadeIn() {
         return this.addClass('jux-stack-fade-in');
     }
@@ -191,7 +135,7 @@ export class BaseStack extends BaseComponent {
     glow() {
         return this.addClass('jux-stack-glow');
     }
-    /* Item-Level Animations (Animate the children) */
+    /* Item-Level Animations */
     fadeInItems() {
         return this.addClass('jux-stack-fade-in-items');
     }
@@ -222,11 +166,52 @@ export class BaseStack extends BaseComponent {
     glowItems() {
         return this.addClass('jux-stack-glow-items');
     }
-    /* Stagger (Only works with item-level animations) */
+    /* Speed Modifiers */
+    instant() {
+        return this.addClass('jux-stack-instant');
+    }
+    fast() {
+        return this.addClass('jux-stack-fast');
+    }
+    normal() {
+        return this.addClass('jux-stack-normal');
+    }
+    slow() {
+        return this.addClass('jux-stack-slow');
+    }
+    slower() {
+        return this.addClass('jux-stack-slower');
+    }
+    /* Timing Functions */
+    linear() {
+        return this.addClass('jux-stack-linear');
+    }
+    ease() {
+        return this.addClass('jux-stack-ease');
+    }
+    easeIn() {
+        return this.addClass('jux-stack-ease-in');
+    }
+    easeOut() {
+        return this.addClass('jux-stack-ease-out');
+    }
+    easeInOut() {
+        return this.addClass('jux-stack-ease-in-out');
+    }
+    bounceTiming() {
+        return this.addClass('jux-stack-bounce-timing');
+    }
+    elasticTiming() {
+        return this.addClass('jux-stack-elastic-timing');
+    }
+    /* Delay Control */
+    delay(ms) {
+        return this.addClass(`jux-stack-delay-${ms}`);
+    }
+    /* Stagger & Interactive */
     staggered() {
         return this.addClass('jux-stack-stagger');
     }
-    /* Interactive & Utility */
     interactive() {
         return this.addClass('jux-stack-interactive');
     }
@@ -236,9 +221,7 @@ export class BaseStack extends BaseComponent {
     smoothItems() {
         return this.addClass('jux-stack-smooth-items');
     }
-    /**
-     * Combine animation with stagger
-     */
+    /* Convenience Combos */
     animateStagger(animation = 'fade', direction) {
         if (animation === 'slide' && direction) {
             this.slideIn(direction);
@@ -255,18 +238,18 @@ export class BaseStack extends BaseComponent {
         return this.staggered();
     }
     /* ═════════════════════════════════════════════════════════════════
-     * RENDER HELPERS
+     * RENDER
      * ═════════════════════════════════════════════════════════════════ */
     buildClasses() {
-        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}`);
         }
         if (divider) {
@@ -275,8 +258,8 @@ export class BaseStack extends BaseComponent {
         if (responsive) {
             classes.push(`${this.baseClassName}-responsive`);
         }
-        if (this.state.class) {
-            classes.push(this.state.class);
+        if (userClass) {
+            classes.push(userClass);
         }
         return classes.join(' ');
     }
@@ -286,12 +269,12 @@ export class BaseStack extends BaseComponent {
         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
-            // Render the component into temp container
+            tempContainer.style.display = 'contents';
+            // Render the component
             child.render(tempContainer);
             // Extract the rendered element
             if (child.container && child.container.firstElementChild) {
@@ -304,7 +287,7 @@ export class BaseStack extends BaseComponent {
                 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;
         }
@@ -326,41 +309,28 @@ export class BaseStack extends BaseComponent {
         }
         return childElement;
     }
-    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;
+        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);
-        // ✅ Store wrapper as _container for nesting
-        this._container = wrapper;
-        container.appendChild(wrapper);
+        this._wireStandardEvents(stackDiv);
+        container.appendChild(stackDiv);
+        this._container = stackDiv;
         return this;
     }
     update(prop, value) {
-        // Stack components are typically static
+        // Stacks don't need reactive updates
     }
 }