juxscript 1.1.130 → 1.1.133

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 69,
-  "generatedAt": "2026-02-13T05:43:29.417Z",
+  "generatedAt": "2026-02-13T14:43:31.259Z",
   "components": [
     {
       "file": "alert.js",

package/index.d.ts

@@ -53,8 +53,7 @@ import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';
 export { Link, link, navLink, externalLink } from './lib/components/link.js';
 export type { LinkOptions } from './lib/components/link.js';
-export { Layer, layer, gradient, overlay, glassLayer, animatedGradient } from './lib/components/layer.js';
-export type { LayerOptions, LayerPreset } from './lib/components/layer.js';
+export { layer, overlay } from './lib/components/layer.js';
 /**
  * JUX Namespace - Main API
  */

package/index.d.ts.map

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

package/index.js

@@ -29,7 +29,7 @@ import { menu } from './lib/components/menu.js';
 import { modal } from './lib/components/modal.js';
 import { nav } from './lib/components/nav.js';
 import { paragraph } from './lib/components/paragraph.js';
-import { pen } from './lib/components/pen.js'; // ✅ Import pen
+import { pen } from './lib/components/pen.js';
 import { progress } from './lib/components/progress.js';
 import { radio } from './lib/components/radio.js';
 import { req } from './lib/components/req.js';
@@ -46,18 +46,18 @@ import { write } from './lib/components/write.js';
 import { fetchAPI } from './lib/utils/fetch.js';
 import { renderIcon, renderEmoji } from './lib/components/icons.js';
 import { state } from './lib/reactivity/state.js';
-import { registry } from './lib/components/registry.js'; // ✅ Import registry
-import { stateHistory } from './lib/components/history/StateHistory.js'; // ✅ Import history
+import { registry } from './lib/components/registry.js';
+import { stateHistory } from './lib/components/history/StateHistory.js';
 import { watcher } from './lib/components/watcher.js';
-export { state, registry, stateHistory }; // ✅ Export history
-// ✅ Import Stack components (already added earlier)
+export { state, registry, stateHistory };
+// Import Stack components (already added earlier)
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';
-// ✅ Link component
+// Link component
 export { Link, link, navLink, externalLink } from './lib/components/link.js';
-// ✅ Layer component
-export { Layer, layer, gradient, overlay, glassLayer, animatedGradient } from './lib/components/layer.js';
+// Layer component
+export { layer, overlay } from './lib/components/layer.js';
 /**
  * JUX Namespace - Main API
  */
@@ -109,7 +109,6 @@ export const jux = {
     themeToggle,
     tooltip,
     write,
-    // ✅ Stack components
     vstack,
     hstack,
     zstack,

package/lib/components/base/Animations.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Animation Modifiers Extension
+ *
+ * Provides animation and transition control for all components.
+ * This is the ONLY feature-oriented modifier we use at this phase.
+ *
+ * Automatically applied to BaseComponent - all components have these methods.
+ */
+import type { BaseComponent } from './BaseComponent.js';
+export interface Animations {
+    transform(value: string): this;
+    transformOrigin(value: string): this;
+    rotate(degrees: number): this;
+    rotateX(degrees: number): this;
+    rotateY(degrees: number): this;
+    rotateZ(degrees: number): this;
+    scale(value: number): this;
+    scaleX(value: number): this;
+    scaleY(value: number): this;
+    translateX(value: string): this;
+    translateY(value: string): this;
+    translate(x: string, y: string): this;
+    flipX(): this;
+    flipY(): this;
+    flipBoth(): this;
+    transition(value: string): this;
+    transitionDuration(value: string): this;
+    transitionDelay(value: string): this;
+    animation(value: string): this;
+}
+/**
+ * Apply animation extensions to a component instance
+ * Called automatically in BaseComponent constructor
+ */
+export declare function applyAnimations<T extends BaseComponent<any>>(component: T): T & Animations;
+//# sourceMappingURL=Animations.d.ts.map

package/lib/components/base/Animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Animations.d.ts","sourceRoot":"","sources":["Animations.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,UAAU;IAEvB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,IAAI,CAAC;IAGjB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAsCD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,UAAU,CAmC1F"}

package/lib/components/base/Animations.js

@@ -0,0 +1,70 @@
+/**
+ * Animation Modifiers Extension
+ *
+ * Provides animation and transition control for all components.
+ * This is the ONLY feature-oriented modifier we use at this phase.
+ *
+ * Automatically applied to BaseComponent - all components have these methods.
+ */
+/**
+ * Helper to add inline style
+ */
+function addInlineStyle(component, property, value) {
+    const currentStyle = component.state.style || '';
+    // Parse existing styles into a map
+    const styleMap = new Map();
+    currentStyle.split(';').forEach((style) => {
+        const trimmed = style.trim();
+        if (!trimmed)
+            return;
+        const colonIndex = trimmed.indexOf(':');
+        if (colonIndex === -1)
+            return;
+        const prop = trimmed.substring(0, colonIndex).trim();
+        const val = trimmed.substring(colonIndex + 1).trim();
+        if (prop && val) {
+            styleMap.set(prop, val);
+        }
+    });
+    // Update or add the new property
+    styleMap.set(property, value);
+    // Rebuild style string
+    const styles = [];
+    styleMap.forEach((val, prop) => {
+        styles.push(`${prop}: ${val}`);
+    });
+    component.state.style = styles.join('; ');
+}
+/**
+ * Apply animation extensions to a component instance
+ * Called automatically in BaseComponent constructor
+ */
+export function applyAnimations(component) {
+    const ext = component;
+    // Transform
+    ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
+    ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };
+    // Rotation (all axes)
+    ext.rotate = (deg) => { addInlineStyle(component, 'transform', `rotate(${deg}deg)`); return ext; };
+    ext.rotateX = (deg) => { addInlineStyle(component, 'transform', `rotateX(${deg}deg)`); return ext; };
+    ext.rotateY = (deg) => { addInlineStyle(component, 'transform', `rotateY(${deg}deg)`); return ext; };
+    ext.rotateZ = (deg) => { addInlineStyle(component, 'transform', `rotateZ(${deg}deg)`); return ext; };
+    // Scale (all axes)
+    ext.scale = (v) => { addInlineStyle(component, 'transform', `scale(${v})`); return ext; };
+    ext.scaleX = (v) => { addInlineStyle(component, 'transform', `scaleX(${v})`); return ext; };
+    ext.scaleY = (v) => { addInlineStyle(component, 'transform', `scaleY(${v})`); return ext; };
+    // Translate
+    ext.translateX = (v) => { addInlineStyle(component, 'transform', `translateX(${v})`); return ext; };
+    ext.translateY = (v) => { addInlineStyle(component, 'transform', `translateY(${v})`); return ext; };
+    ext.translate = (x, y) => { addInlineStyle(component, 'transform', `translate(${x}, ${y})`); return ext; };
+    // Flip (mirror) transforms
+    ext.flipX = () => { addInlineStyle(component, 'transform', 'scaleX(-1)'); return ext; };
+    ext.flipY = () => { addInlineStyle(component, 'transform', 'scaleY(-1)'); return ext; };
+    ext.flipBoth = () => { addInlineStyle(component, 'transform', 'scale(-1, -1)'); return ext; };
+    // Transition & Animation
+    ext.transition = (v) => { addInlineStyle(component, 'transition', v); return ext; };
+    ext.transitionDuration = (v) => { addInlineStyle(component, 'transition-duration', v); return ext; };
+    ext.transitionDelay = (v) => { addInlineStyle(component, 'transition-delay', v); return ext; };
+    ext.animation = (v) => { addInlineStyle(component, 'animation', v); return ext; };
+    return ext;
+}

package/lib/components/base/Animations.ts

@@ -0,0 +1,112 @@
+/**
+ * Animation Modifiers Extension
+ * 
+ * Provides animation and transition control for all components.
+ * This is the ONLY feature-oriented modifier we use at this phase.
+ * 
+ * Automatically applied to BaseComponent - all components have these methods.
+ */
+
+import type { BaseComponent } from './BaseComponent.js';
+
+export interface Animations {
+    // Transform (for animations)
+    transform(value: string): this;
+    transformOrigin(value: string): this;
+    rotate(degrees: number): this;
+    rotateX(degrees: number): this;
+    rotateY(degrees: number): this;
+    rotateZ(degrees: number): this;
+    scale(value: number): this;
+    scaleX(value: number): this;
+    scaleY(value: number): this;
+    translateX(value: string): this;
+    translateY(value: string): this;
+    translate(x: string, y: string): this;
+    flipX(): this;
+    flipY(): this;
+    flipBoth(): this;
+
+    // Transition & Animation
+    transition(value: string): this;
+    transitionDuration(value: string): this;
+    transitionDelay(value: string): this;
+    animation(value: string): this;
+}
+
+/**
+ * Helper to add inline style
+ */
+function addInlineStyle(component: BaseComponent<any>, property: string, value: string): void {
+    const currentStyle = component.state.style || '';
+
+    // Parse existing styles into a map
+    const styleMap = new Map<string, string>();
+
+    currentStyle.split(';').forEach((style: string) => {
+        const trimmed = style.trim();
+        if (!trimmed) return;
+
+        const colonIndex = trimmed.indexOf(':');
+        if (colonIndex === -1) return;
+
+        const prop = trimmed.substring(0, colonIndex).trim();
+        const val = trimmed.substring(colonIndex + 1).trim();
+
+        if (prop && val) {
+            styleMap.set(prop, val);
+        }
+    });
+
+    // Update or add the new property
+    styleMap.set(property, value);
+
+    // Rebuild style string
+    const styles: string[] = [];
+    styleMap.forEach((val, prop) => {
+        styles.push(`${prop}: ${val}`);
+    });
+
+    component.state.style = styles.join('; ');
+}
+
+/**
+ * Apply animation extensions to a component instance
+ * Called automatically in BaseComponent constructor
+ */
+export function applyAnimations<T extends BaseComponent<any>>(component: T): T & Animations {
+    const ext = component as T & Animations;
+
+    // Transform
+    ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
+    ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };
+
+    // Rotation (all axes)
+    ext.rotate = (deg) => { addInlineStyle(component, 'transform', `rotate(${deg}deg)`); return ext; };
+    ext.rotateX = (deg) => { addInlineStyle(component, 'transform', `rotateX(${deg}deg)`); return ext; };
+    ext.rotateY = (deg) => { addInlineStyle(component, 'transform', `rotateY(${deg}deg)`); return ext; };
+    ext.rotateZ = (deg) => { addInlineStyle(component, 'transform', `rotateZ(${deg}deg)`); return ext; };
+
+    // Scale (all axes)
+    ext.scale = (v) => { addInlineStyle(component, 'transform', `scale(${v})`); return ext; };
+    ext.scaleX = (v) => { addInlineStyle(component, 'transform', `scaleX(${v})`); return ext; };
+    ext.scaleY = (v) => { addInlineStyle(component, 'transform', `scaleY(${v})`); return ext; };
+
+    // Translate
+    ext.translateX = (v) => { addInlineStyle(component, 'transform', `translateX(${v})`); return ext; };
+    ext.translateY = (v) => { addInlineStyle(component, 'transform', `translateY(${v})`); return ext; };
+    ext.translate = (x, y) => { addInlineStyle(component, 'transform', `translate(${x}, ${y})`); return ext; };
+
+    // Flip (mirror) transforms
+    ext.flipX = () => { addInlineStyle(component, 'transform', 'scaleX(-1)'); return ext; };
+    ext.flipY = () => { addInlineStyle(component, 'transform', 'scaleY(-1)'); return ext; };
+    ext.flipBoth = () => { addInlineStyle(component, 'transform', 'scale(-1, -1)'); return ext; };
+
+    // Transition & Animation
+    ext.transition = (v) => { addInlineStyle(component, 'transition', v); return ext; };
+    ext.transitionDuration = (v) => { addInlineStyle(component, 'transition-duration', v); return ext; };
+    ext.transitionDelay = (v) => { addInlineStyle(component, 'transition-delay', v); return ext; };
+    ext.animation = (v) => { addInlineStyle(component, 'animation', v); return ext; };
+
+    return ext;
+}

package/lib/components/base/BaseComponent.d.ts

@@ -1,4 +1,5 @@
 import { State } from '../../reactivity/state.js';
+import { Animations } from './Animations.js';
 /**
  * Base state interface that ALL component states must extend
  */
@@ -224,4 +225,6 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
      */
     protected _wireFormSync(inputElement: HTMLElement, eventName?: string): void;
 }
+export interface BaseComponent extends Animations {
+}
 //# sourceMappingURL=BaseComponent.d.ts.map

package/lib/components/base/BaseComponent.d.ts.map

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

package/lib/components/base/BaseComponent.js

@@ -1,8 +1,8 @@
 import { getOrCreateContainer } from '../helpers.js';
 import { registry } from '../registry.js';
 import { stateHistory } from '../history/StateHistory.js';
-import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
-import { applyLayoutExtensions } from './LayoutExtensions.js'; // ✅ Import
+import { formatIdAsLabel } from '../../utils/formatId.js';
+import { applyAnimations } from './Animations.js'; // ✅ Import Animations
 /**
  * Abstract base class for all JUX components
  * Provides common storage, event routing, and lifecycle methods
@@ -42,12 +42,9 @@ export class BaseComponent {
                 const key = prop;
                 const oldValue = target[key];
                 if (oldValue !== value) {
-                    // ✅ Record state change in history
                     stateHistory.recordStateChange(this._id, prop, oldValue, value);
                     target[key] = value;
-                    // 1️⃣ Update DOM via update()
                     this.update(prop, value);
-                    // 2️⃣ Notify synced State<T> objects (with guard)
                     if (!this._isUpdatingSync) {
                         this._notifySyncedState(prop, value);
                     }
@@ -55,8 +52,8 @@ export class BaseComponent {
                 return true;
             }
         });
-        // ✅ Automatically apply layout extensions to ALL components
-        applyLayoutExtensions(this);
+        // ✅ Apply ONLY animation extensions
+        applyAnimations(this);
     }
     /**
      * REACTIVE UPDATE HOOK (PUBLIC, CONCRETE)
@@ -637,4 +634,3 @@ export class BaseComponent {
         });
     }
 }
-// ...precision layout modifiers...

package/lib/components/base/BaseComponent.ts

@@ -2,8 +2,8 @@ import { State } from '../../reactivity/state.js';
 import { getOrCreateContainer } from '../helpers.js';
 import { registry } from '../registry.js';
 import { stateHistory } from '../history/StateHistory.js';
-import { formatIdAsLabel } from '../../utils/formatId.js';  // ✅ Import utility
-import { applyLayoutExtensions, LayoutExtensions } from './LayoutExtensions.js'; // ✅ Import
+import { formatIdAsLabel } from '../../utils/formatId.js';
+import { applyAnimations, Animations } from './Animations.js'; // ✅ Import Animations
 
 /**
  * Base state interface that ALL component states must extend
@@ -77,15 +77,10 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
                 const oldValue = target[key];
 
                 if (oldValue !== value) {
-                    // ✅ Record state change in history
                     stateHistory.recordStateChange(this._id, prop as string, oldValue, value);
-
                     target[key] = value;
-
-                    // 1️⃣ Update DOM via update()
                     this.update(prop as string, value);
 
-                    // 2️⃣ Notify synced State<T> objects (with guard)
                     if (!this._isUpdatingSync) {
                         this._notifySyncedState(prop as string, value);
                     }
@@ -94,8 +89,8 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
             }
         });
 
-        // ✅ Automatically apply layout extensions to ALL components
-        applyLayoutExtensions(this);
+        // ✅ Apply ONLY animation extensions
+        applyAnimations(this);
     }
 
     /* ═════════════════════════════════════════════════════════════════
@@ -769,4 +764,5 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
     }
 }
 
-// ...precision layout modifiers...
+// ✅ Type assertion for Animations (all components have animation methods)
+export interface BaseComponent extends Animations {}

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

@@ -1,81 +1,65 @@
 import { BaseComponent, BaseState } from '../base/BaseComponent.js';
-import { LayoutExtensions } from '../base/LayoutExtensions.js';
-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;
 }
 export declare abstract class BaseStack extends BaseComponent<StackState> {
-    protected children: Record<string, any> | any[];
     protected abstract baseClassName: string;
     protected _container: HTMLElement | null;
+    protected _children: any[];
     protected _childStyleFunction: ((index: number) => string) | null;
-    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
+    protected _autoRendered: boolean;
+    constructor(id: string);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    /**
+     * Set all children at once (replaces existing)
+     */
+    items(children: any[]): this;
+    /**
+     * Add children to the end
+     */
+    addItems(...children: any[]): this;
+    /**
+     * Add a single child
+     */
+    addItem(child: any): this;
+    /**
+     * Replace child at index
+     */
+    replaceItem(index: number, child: any): this;
+    /**
+     * Remove child at index
+     */
+    removeItem(index: number): this;
+    /**
+     * Remove all children
+     */
+    clearItems(): this;
+    /**
+     * Get current children array (read-only)
+     */
+    getItems(): readonly any[];
     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;
+    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;
-    zoomIn(): this;
-    rotateIn(): this;
-    flipIn(axis?: 'x' | 'y'): this;
-    bounceIn(): this;
-    elasticIn(): this;
-    blurIn(): this;
-    glow(): this;
-    fadeInItems(): this;
-    slideInItems(direction?: 'up' | 'down' | 'left' | 'right'): this;
-    scaleInItems(): this;
-    zoomInItems(): this;
-    rotateInItems(): this;
-    flipInItems(axis?: 'x' | 'y'): this;
-    bounceInItems(): this;
-    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;
-    stagger(delayMs?: number): this;
-    interactive(): this;
-    smooth(): this;
-    smoothItems(): this;
-    animateStagger(animation?: 'fade' | 'slide' | 'scale' | 'bounce', direction?: 'up' | 'down' | 'left' | 'right'): this;
     protected buildClasses(): string;
     protected renderChild(child: any, index: number): HTMLElement;
+    /**
+     * Refresh children when items change
+     */
+    protected _refreshChildren(): void;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
     update(prop: string, value: any): void;
 }
-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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"}