juxscript 1.1.97 → 1.1.100

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T20:10:28.490Z",
+  "generatedAt": "2026-02-12T21:08:33.192Z",
   "components": [
     {
       "file": "alert.js",

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

@@ -0,0 +1,77 @@
+import { BaseComponent } from './BaseComponent.js';
+/**
+ * Base state interface for all form inputs
+ */
+export interface FormInputState extends Record<string, any> {
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+    errorMessage?: string;
+}
+/**
+ * Abstract base class for all form input components
+ * Extends BaseComponent with form-specific functionality
+ */
+export declare abstract class FormInput<TState extends FormInputState> extends BaseComponent<TState> {
+    protected _inputElement: HTMLElement | null;
+    protected _labelElement: HTMLLabelElement | null;
+    protected _errorElement: HTMLElement | null;
+    protected _onValidate?: (value: any) => boolean | string;
+    protected _hasBeenValidated: boolean;
+    /**
+     * Get the current value of the input
+     */
+    abstract getValue(): any;
+    /**
+     * Set the value of the input
+     */
+    abstract setValue(value: any): this;
+    /**
+     * Build the actual input element (input, select, textarea, etc.)
+     */
+    protected abstract _buildInputElement(): HTMLElement;
+    /**
+     * Validate the current value
+     */
+    protected abstract _validateValue(value: any): boolean | string;
+    label(value: string): this;
+    required(value: boolean): this;
+    name(value: string): this;
+    onValidate(handler: (value: any) => boolean | string): this;
+    /**
+     * Validate the current value and show/hide errors
+     */
+    validate(): boolean;
+    /**
+     * Check if current value is valid without showing errors
+     */
+    isValid(): boolean;
+    /**
+     * Show error message
+     */
+    protected _showError(message: string): void;
+    /**
+     * Clear error message
+     */
+    protected _clearError(): void;
+    /**
+     * Build label element with auto-generated text from ID if not provided
+     */
+    protected _renderLabel(): HTMLLabelElement;
+    /**
+     * Build error element
+     */
+    protected _renderError(): HTMLElement;
+    /**
+     * Default update implementation for form inputs
+     */
+    update(prop: string, value: any): void;
+    /**
+     * Wire up two-way sync for value property
+     */
+    protected _wireFormSync(inputElement: HTMLElement, eventName?: string): void;
+}
+//# sourceMappingURL=FormInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["FormInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,8BAAsB,SAAS,CAAC,MAAM,SAAS,cAAc,CAAE,SAAQ,aAAa,CAAC,MAAM,CAAC;IACxF,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,aAAa,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACxD,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,CAAC;IACzD,SAAS,CAAC,iBAAiB,EAAE,OAAO,CAAS;IAM7C;;OAEG;IACH,QAAQ,CAAC,QAAQ,IAAI,GAAG;IAExB;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAEnC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,WAAW;IAEpD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,GAAG,MAAM;IAM/D,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI;IAS3D;;OAEG;IACH,QAAQ,IAAI,OAAO;IAcnB;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa3C;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAiB7B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,gBAAgB;IAqB1C;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,WAAW;IAUrC;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAItC;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,YAAY,EAAE,WAAW,EAAE,SAAS,GAAE,MAAgB,GAAG,IAAI;CA8CxF"}

package/lib/components/base/FormInput.js

@@ -0,0 +1,171 @@
+import { BaseComponent } from './BaseComponent.js';
+import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
+/**
+ * Abstract base class for all form input components
+ * Extends BaseComponent with form-specific functionality
+ */
+export class FormInput extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._inputElement = null;
+        this._labelElement = null;
+        this._errorElement = null;
+        this._hasBeenValidated = false; // NEW: Track if user has submitted/validated
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON FORM INPUT API
+     * ═════════════════════════════════════════════════════════════════ */
+    label(value) {
+        this.state.label = value;
+        if (this._labelElement) {
+            this._labelElement.textContent = value;
+        }
+        return this;
+    }
+    required(value) {
+        this.state.required = value;
+        return this;
+    }
+    name(value) {
+        this.state.name = value;
+        return this;
+    }
+    onValidate(handler) {
+        this._onValidate = handler;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * VALIDATION
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Validate the current value and show/hide errors
+     */
+    validate() {
+        this._hasBeenValidated = true; // Mark as validated
+        const value = this.getValue();
+        const result = this._validateValue(value);
+        if (result === true) {
+            this._clearError();
+            return true;
+        }
+        else {
+            this._showError(result);
+            return false;
+        }
+    }
+    /**
+     * Check if current value is valid without showing errors
+     */
+    isValid() {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
+    /**
+     * Show error message
+     */
+    _showError(message) {
+        if (this._errorElement) {
+            this._errorElement.textContent = message;
+            this._errorElement.style.display = 'block';
+        }
+        if (this._inputElement) {
+            this._inputElement.classList.add('jux-input-invalid');
+        }
+        this.state.errorMessage = message;
+    }
+    /**
+     * Clear error message
+     */
+    _clearError() {
+        if (this._errorElement) {
+            this._errorElement.textContent = '';
+            this._errorElement.style.display = 'none';
+        }
+        if (this._inputElement) {
+            this._inputElement.classList.remove('jux-input-invalid');
+        }
+        this.state.errorMessage = undefined;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Build label element with auto-generated text from ID if not provided
+     */
+    _renderLabel() {
+        const { label, required } = this.state;
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-input-label';
+        labelEl.htmlFor = `${this._id}-input`;
+        // ✅ Use provided label or auto-generate from ID
+        labelEl.textContent = label || formatIdAsLabel(this._id);
+        if (required) {
+            const requiredSpan = document.createElement('span');
+            requiredSpan.className = 'jux-input-required';
+            requiredSpan.textContent = ' *';
+            labelEl.appendChild(requiredSpan);
+        }
+        this._labelElement = labelEl;
+        return labelEl;
+    }
+    /**
+     * Build error element
+     */
+    _renderError() {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'jux-input-error';
+        errorEl.id = `${this._id}-error`;
+        errorEl.style.display = 'none';
+        this._errorElement = errorEl;
+        return errorEl;
+    }
+    /**
+     * Default update implementation for form inputs
+     */
+    update(prop, value) {
+        // No reactive updates needed - form inputs handle their own state
+    }
+    /**
+     * Wire up two-way sync for value property
+     */
+    _wireFormSync(inputElement, eventName = 'input') {
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+            // Default transforms
+            const transformToState = toState || ((v) => v);
+            const transformToComponent = toComponent || ((v) => v);
+            let isUpdating = false;
+            // State → Component
+            stateObj.subscribe((val) => {
+                if (isUpdating)
+                    return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+            // Component → State
+            inputElement.addEventListener(eventName, () => {
+                if (isUpdating)
+                    return;
+                isUpdating = true;
+                const value = this.getValue();
+                const transformed = transformToState(value);
+                this._clearError();
+                stateObj.set(transformed);
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        }
+        else {
+            // Default behavior without sync
+            inputElement.addEventListener(eventName, () => {
+                this._clearError();
+            });
+        }
+        // Only validate on blur IF the field has been validated before (e.g., after submit)
+        inputElement.addEventListener('blur', () => {
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
+        });
+    }
+}

package/lib/components/base/FormInput.ts

@@ -0,0 +1,237 @@
+import { BaseComponent } from './BaseComponent.js';
+import { formatIdAsLabel } from '../../utils/formatId.js';  // ✅ Import utility
+
+/**
+ * Base state interface for all form inputs
+ */
+export interface FormInputState extends Record<string, any> {
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+    errorMessage?: string;
+}
+
+/**
+ * Abstract base class for all form input components
+ * Extends BaseComponent with form-specific functionality
+ */
+export abstract class FormInput<TState extends FormInputState> extends BaseComponent<TState> {
+    protected _inputElement: HTMLElement | null = null;
+    protected _labelElement: HTMLLabelElement | null = null;
+    protected _errorElement: HTMLElement | null = null;
+    protected _onValidate?: (value: any) => boolean | string;
+    protected _hasBeenValidated: boolean = false;  // NEW: Track if user has submitted/validated
+
+    /* ═════════════════════════════════════════════════════════════════
+     * ABSTRACT METHODS (Child must implement)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Get the current value of the input
+     */
+    abstract getValue(): any;
+
+    /**
+     * Set the value of the input
+     */
+    abstract setValue(value: any): this;
+
+    /**
+     * Build the actual input element (input, select, textarea, etc.)
+     */
+    protected abstract _buildInputElement(): HTMLElement;
+
+    /**
+     * Validate the current value
+     */
+    protected abstract _validateValue(value: any): boolean | string;
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON FORM INPUT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    label(value: string): this {
+        this.state.label = value;
+        if (this._labelElement) {
+            this._labelElement.textContent = value;
+        }
+        return this;
+    }
+
+    required(value: boolean): this {
+        this.state.required = value;
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    onValidate(handler: (value: any) => boolean | string): this {
+        this._onValidate = handler;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * VALIDATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Validate the current value and show/hide errors
+     */
+    validate(): boolean {
+        this._hasBeenValidated = true;  // Mark as validated
+        const value = this.getValue();
+        const result = this._validateValue(value);
+
+        if (result === true) {
+            this._clearError();
+            return true;
+        } else {
+            this._showError(result as string);
+            return false;
+        }
+    }
+
+    /**
+     * Check if current value is valid without showing errors
+     */
+    isValid(): boolean {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
+
+    /**
+     * Show error message
+     */
+    protected _showError(message: string): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = message;
+            this._errorElement.style.display = 'block';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.add('jux-input-invalid');
+        }
+
+        this.state.errorMessage = message;
+    }
+
+    /**
+     * Clear error message
+     */
+    protected _clearError(): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = '';
+            this._errorElement.style.display = 'none';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.remove('jux-input-invalid');
+        }
+
+        this.state.errorMessage = undefined;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Build label element with auto-generated text from ID if not provided
+     */
+    protected _renderLabel(): HTMLLabelElement {
+        const { label, required } = this.state;
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-input-label';
+        labelEl.htmlFor = `${this._id}-input`;
+
+        // ✅ Use provided label or auto-generate from ID
+        labelEl.textContent = label || formatIdAsLabel(this._id);
+
+        if (required) {
+            const requiredSpan = document.createElement('span');
+            requiredSpan.className = 'jux-input-required';
+            requiredSpan.textContent = ' *';
+            labelEl.appendChild(requiredSpan);
+        }
+
+        this._labelElement = labelEl;
+        return labelEl;
+    }
+
+    /**
+     * Build error element
+     */
+    protected _renderError(): HTMLElement {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'jux-input-error';
+        errorEl.id = `${this._id}-error`;
+        errorEl.style.display = 'none';
+
+        this._errorElement = errorEl;
+        return errorEl;
+    }
+
+    /**
+     * Default update implementation for form inputs
+     */
+    update(prop: string, value: any): void {
+        // No reactive updates needed - form inputs handle their own state
+    }
+
+    /**
+     * Wire up two-way sync for value property
+     */
+    protected _wireFormSync(inputElement: HTMLElement, eventName: string = 'input'): void {
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            // Default transforms
+            const transformToState = toState || ((v: any) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            inputElement.addEventListener(eventName, () => {
+                if (isUpdating) return;
+                isUpdating = true;
+
+                const value = this.getValue();
+                const transformed = transformToState(value);
+                this._clearError();
+
+                stateObj.set(transformed);
+
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputElement.addEventListener(eventName, () => {
+                this._clearError();
+            });
+        }
+
+        // Only validate on blur IF the field has been validated before (e.g., after submit)
+        inputElement.addEventListener('blur', () => {
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
+        });
+    }
+}

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

@@ -26,6 +26,7 @@ interface StackState extends BaseState {
 export declare abstract class BaseStack extends BaseComponent<StackState> {
     protected abstract baseClassName: string;
     private _inlineStyles;
+    _container: HTMLElement | null;
     constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];

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

@@ -26,6 +26,7 @@ export class BaseStack extends BaseComponent {
             childStyles: undefined
         });
         this._inlineStyles = new Map();
+        this._container = null; // ✅ Make public for nesting
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -184,22 +185,24 @@ export class BaseStack extends BaseComponent {
     }
     renderChild(child, index) {
         let childElement;
-        // String - wrap in div
-        if (typeof child === 'string') {
-            childElement = document.createElement('div');
-            childElement.textContent = child;
+        // ✅ Priority 1: Check if it's a Stack (has _container property)
+        if (child && typeof child === 'object' && '_container' in child && child._container instanceof HTMLElement) {
+            childElement = child._container;
         }
-        // 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;
+        // ✅ Priority 2: Check if it's a JUX Component (has container property)
+        else if (child && typeof child === 'object' && 'container' in child && child.container instanceof HTMLElement) {
+            childElement = child.container;
         }
-        // DOM Element - use directly
+        // ✅ Priority 3: Check if it's already a DOM element
         else if (child instanceof HTMLElement) {
             childElement = child;
         }
-        // Fallback
+        // ✅ Priority 4: String - wrap in div
+        else if (typeof child === 'string') {
+            childElement = document.createElement('div');
+            childElement.innerHTML = child;
+        }
+        // ✅ Fallback - stringify
         else {
             childElement = document.createElement('div');
             childElement.textContent = String(child);
@@ -241,6 +244,8 @@ export class BaseStack extends BaseComponent {
             wrapper.appendChild(childEl);
         });
         this._wireStandardEvents(wrapper);
+        // ✅ Store wrapper as _container for nesting
+        this._container = wrapper;
         container.appendChild(wrapper);
         return this;
     }

package/lib/components/stack/BaseStack.ts

@@ -34,6 +34,7 @@ interface StackState extends BaseState {
 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)
@@ -244,22 +245,24 @@ export abstract class BaseStack extends BaseComponent<StackState> {
     protected renderChild(child: any, index: number): HTMLElement {
         let childElement: HTMLElement;
 
-        // String - wrap in div
-        if (typeof child === 'string') {
-            childElement = document.createElement('div');
-            childElement.textContent = child;
+        // ✅ Priority 1: Check if it's a Stack (has _container property)
+        if (child && typeof child === 'object' && '_container' in child && child._container instanceof HTMLElement) {
+            childElement = child._container;
         }
-        // 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;
+        // ✅ Priority 2: Check if it's a JUX Component (has container property)
+        else if (child && typeof child === 'object' && 'container' in child && child.container instanceof HTMLElement) {
+            childElement = child.container;
         }
-        // DOM Element - use directly
+        // ✅ Priority 3: Check if it's already a DOM element
         else if (child instanceof HTMLElement) {
             childElement = child;
         }
-        // Fallback
+        // ✅ Priority 4: String - wrap in div
+        else if (typeof child === 'string') {
+            childElement = document.createElement('div');
+            childElement.innerHTML = child;
+        }
+        // ✅ Fallback - stringify
         else {
             childElement = document.createElement('div');
             childElement.textContent = String(child);
@@ -313,6 +316,10 @@ export abstract class BaseStack extends BaseComponent<StackState> {
         });
 
         this._wireStandardEvents(wrapper);
+
+        // ✅ Store wrapper as _container for nesting
+        this._container = wrapper;
+
         container.appendChild(wrapper);
 
         return this;

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;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;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/HStack.js

@@ -7,8 +7,9 @@ export class HStack extends BaseStack {
     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) {
+            if (!instance._container) {
                 instance.render('app');
             }
         });

package/lib/components/stack/HStack.ts

@@ -11,8 +11,9 @@ export class HStack extends BaseStack {
         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) {
+            if (!instance._container) {
                 instance.render('app');
             }
         });

package/lib/components/stack/VStack.js

@@ -10,9 +10,9 @@ export class VStack extends BaseStack {
     static create(children, options = {}) {
         const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new VStack(id, children, options);
-        // ✅ Auto-render after microtask
+        // ✅ Auto-render to 'app' on next tick
         queueMicrotask(() => {
-            if (!instance.container) {
+            if (!instance._container) {
                 instance.render('app');
             }
         });

package/lib/components/stack/VStack.ts

@@ -14,9 +14,9 @@ export class VStack extends BaseStack {
         const id = `vstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new VStack(id, children, options);
 
-        // ✅ Auto-render after microtask
+        // ✅ Auto-render to 'app' on next tick
         queueMicrotask(() => {
-            if (!instance.container) {
+            if (!instance._container) {
                 instance.render('app');
             }
         });

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,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"}
+{"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;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/ZStack.js

@@ -7,8 +7,9 @@ export class ZStack extends BaseStack {
     static create(children, options = {}) {
         const id = `zstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new ZStack(id, children, options);
+        // ✅ Auto-render to 'app' on next tick
         queueMicrotask(() => {
-            if (!instance.container) {
+            if (!instance._container) {
                 instance.render('app');
             }
         });

package/lib/components/stack/ZStack.ts

@@ -11,8 +11,9 @@ export class ZStack extends BaseStack {
         const id = `zstack-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const instance = new ZStack(id, children, options);
 
+        // ✅ Auto-render to 'app' on next tick
         queueMicrotask(() => {
-            if (!instance.container) {
+            if (!instance._container) {
                 instance.render('app');
             }
         });

package/lib/layouts/VStack.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=VStack.d.ts.map

package/lib/layouts/VStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["VStack.ts"],"names":[],"mappings":""}

package/lib/layouts/VStack.js

@@ -0,0 +1 @@
+"use strict";

package/lib/layouts/ZStack.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=ZStack.d.ts.map

package/lib/layouts/ZStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZStack.d.ts","sourceRoot":"","sources":["ZStack.ts"],"names":[],"mappings":""}

package/lib/layouts/ZStack.js

@@ -0,0 +1 @@
+"use strict";

package/machinery/compiler3.js

@@ -250,18 +250,56 @@ export class JuxCompiler {
         const sourceSnapshot = {};
 
         const juxImports = new Set();
+        const layoutImports = new Set();
+        let needsJuxFacade = false; // ✅ Track if jux facade is needed
+
         [...views, ...dataModules, ...sharedModules].forEach(m => {
+            // ✅ Detect jux.something() usage
+            if (/jux\s*\.\s*\w+\s*\(/g.test(m.content)) {
+                needsJuxFacade = true;
+            }
+
+            // Detect layout usage (both import and direct usage)
+            const layoutPattern = /(VStack|HStack|ZStack)\s*\.\s*create/g;
+            const layoutMatches = m.content.match(layoutPattern);
+            if (layoutMatches) {
+                layoutMatches.forEach(match => {
+                    const layoutName = match.split('.')[0].trim();
+                    layoutImports.add(layoutName);
+                });
+            }
+
+            // Regular juxscript imports
             for (const match of m.content.matchAll(/import\s*\{\s*([^}]+)\s*\}\s*from\s*['"]juxscript['"]/g)) {
                 match[1].split(',').map(s => s.trim()).forEach(imp => {
-                    if (imp) juxImports.add(imp);
+                    if (imp) {
+                        if (imp === 'VStack' || imp === 'HStack' || imp === 'ZStack') {
+                            layoutImports.add(imp);
+                        } else {
+                            juxImports.add(imp);
+                        }
+                    }
                 });
             }
         });
 
+        // ✅ Import layouts
+        if (layoutImports.size > 0) {
+            entry += `import { ${[...layoutImports].sort().join(', ')} } from 'juxscript';\n`;
+        }
+
+        // ✅ Import regular components
         if (juxImports.size > 0) {
             entry += `import { ${[...juxImports].sort().join(', ')} } from 'juxscript';\n\n`;
         }
 
+        // ✅ Import jux facade if needed
+        if (needsJuxFacade) {
+            entry += `import { jux } from 'juxscript';\n`;
+            entry += `window.jux = jux;\n`;
+        }
+
+        // Data and shared modules
         dataModules.forEach(m => {
             entry += `import * as ${this.sanitizeName(m.name)}Data from './jux/${m.file}';\n`;
         });
@@ -273,8 +311,18 @@ export class JuxCompiler {
         dataModules.forEach(m => entry += `Object.assign(window, ${this.sanitizeName(m.name)}Data);\n`);
         sharedModules.forEach(m => entry += `Object.assign(window, ${this.sanitizeName(m.name)}Shared);\n`);
 
+        // ✅ Expose layouts to window (critical for nested usage)
+        if (layoutImports.size > 0) {
+            entry += `\n// Expose layout components\n`;
+            layoutImports.forEach(layout => {
+                entry += `window.${layout} = ${layout};\n`;
+            });
+        }
+
+        // ✅ Expose regular components
         if (juxImports.size > 0) {
-            entry += `\nObject.assign(window, { ${[...juxImports].join(', ')} });\n`;
+            entry += `\n// Expose components\n`;
+            entry += `Object.assign(window, { ${[...juxImports].join(', ')} });\n`;
         }
 
         entry += `\n// --- VIEW FUNCTIONS ---\n`;
@@ -582,52 +630,43 @@ navigate(location.pathname);
                 target: 'es2020',
                 sourcemap: true,
                 external: [],
-                // ✅ Tell esbuild how to resolve .jux files
-                loader: {
+                // ✅ Tell esbuild how to resolve .jux filesharset="UTF-8">
+                loader: {  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     '.jux': 'js' // Treat .jux files as JavaScript
-                }
+                }  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxscript@latest/lib/layouts/default.css">
             });
 
-            // Generate index.html
+            // Generate index.html  <div id="app"></div>
             console.log('📄 Generating index.html...');
             const indexHtml = `<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>JUX App</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxscript@latest/lib/layouts/default.css">
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/bundle.js"></script>
 </body>
-</html>`;
+</html>`;this.distDir, 'index.html'), indexHtml);
 
             fs.writeFileSync(path.join(this.distDir, 'index.html'), indexHtml);
-
-            // Copy public folder
             this.copyPublicFolder();
-
-            // Write source snapshot for error overlay
+            // Copy public folder
+            this.copyPublicFolder();            // Write source snapshot for error overlay
+apshotPath = path.join(this.distDir, '__jux_sources.json');
+            // Write source snapshot for error overlaynapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
             const snapshotPath = path.join(this.distDir, '__jux_sources.json');
-            fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
-
-            const endTime = Date.now();
+            fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2)););
+nsole.log(`\n✅ Build complete in ${endTime - startTime}ms`);
+            const endTime = Date.now();            console.log(`   Output: ${this.distDir}`);
             console.log(`\n✅ Build complete in ${endTime - startTime}ms`);
             console.log(`   Output: ${this.distDir}`);
 
             this.reportValidationIssues();
 
-            return {
-                success: true,
-                errors: this._validationIssues || [],
+            return {ionIssues || [],
+                success: true,  distDir: this.distDir
+                errors: this._validationIssues || [],   };
                 distDir: this.distDir
-            };
-
+            };        } catch (err) {
+     console.error('❌ Build failed:', err.message);
         } catch (err) {
-            console.error('❌ Build failed:', err.message);
-            console.error(err.stack);
+            console.error('❌ Build failed:', err.message);     return {
+            console.error(err.stack); false,
             return {
                 success: false,
                 errors: [err.message]
@@ -636,77 +675,86 @@ navigate(location.pathname);
     }
 
     /**
-     * Copy public folder contents to dist
-     */
-    copyPublicFolder() {
-        // ✅ Use configured public path or resolve from paths object
+     * Copy public folder contents to dist    copyPublicFolder() {
+     */from paths object
+    copyPublicFolder() {        const publicSrc = this.paths.public
+        // ✅ Use configured public path or resolve from paths object this.paths.public
         const publicSrc = this.paths.public
             ? this.paths.public
-            : path.resolve(process.cwd(), this.publicDir);
+            : path.resolve(process.cwd(), this.publicDir);ync(publicSrc)) {
 
         if (!fs.existsSync(publicSrc)) {
             return; // No public folder, skip
-        }
+        }        console.log('📦 Copying public assets...');
 
         console.log('📦 Copying public assets...');
-
-        try {
+     this._copyDirRecursive(publicSrc, this.distDir, 0);
+        try {ed');
             this._copyDirRecursive(publicSrc, this.distDir, 0);
-            console.log('✅ Public assets copied');
+            console.log('✅ Public assets copied');            console.warn('⚠️  Error copying public folder:', err.message);
         } catch (err) {
             console.warn('⚠️  Error copying public folder:', err.message);
         }
-    }
+    }    /**
 
     /**
-     * Recursively copy directory contents
-     */
+     * Recursively copy directory contents    _copyDirRecursive(src, dest, depth = 0) {
+     */(src, { withFileTypes: true });
     _copyDirRecursive(src, dest, depth = 0) {
         const entries = fs.readdirSync(src, { withFileTypes: true });
 
-        entries.forEach(entry => {
+        entries.forEach(entry => {ntry.name.startsWith('.')) return;
             // Skip hidden files and directories
-            if (entry.name.startsWith('.')) return;
-
+            if (entry.name.startsWith('.')) return;cPath = path.join(src, entry.name);
+ path.join(dest, entry.name);
             const srcPath = path.join(src, entry.name);
-            const destPath = path.join(dest, entry.name);
+            const destPath = path.join(dest, entry.name);            if (entry.isDirectory()) {
 
-            if (entry.isDirectory()) {
-                // Create directory and recurse
+            if (entry.isDirectory()) {(destPath)) {
+                // Create directory and recurserue });
                 if (!fs.existsSync(destPath)) {
-                    fs.mkdirSync(destPath, { recursive: true });
-                }
-                this._copyDirRecursive(srcPath, destPath, depth + 1);
-            } else {
+                    fs.mkdirSync(destPath, { recursive: true });pth + 1);
+                }e {
+                this._copyDirRecursive(srcPath, destPath, depth + 1);   // Copy file
+            } else {     fs.copyFileSync(srcPath, destPath);
                 // Copy file
-                fs.copyFileSync(srcPath, destPath);
-
-                // Log files at root level only
-                if (depth === 0) {
-                    const ext = path.extname(entry.name);
+                fs.copyFileSync(srcPath, destPath);                // Log files at root level only
+         if (depth === 0) {
+                // Log files at root level only = path.extname(entry.name);
+                if (depth === 0) {             const icon = this._getFileIcon(ext);
+                    const ext = path.extname(entry.name);sole.log(`   ${icon} ${entry.name}`);
                     const icon = this._getFileIcon(ext);
                     console.log(`   ${icon} ${entry.name}`);
                 }
             }
         });
     }
-
+ype
     /**
      * Get icon for file type
      */
-    _getFileIcon(ext) {
+    _getFileIcon(ext) {,
         const icons = {
             '.html': '📄',
-            '.css': '🎨',
-            '.js': '📜',
-            '.json': '📋',
+            '.css': '🎨',,
+            '.js': '📜',',
+            '.json': '📋',  '.jpg': '🖼️',
             '.png': '🖼️',
-            '.jpg': '🖼️',
-            '.jpeg': '🖼️',
-            '.gif': '🖼️',
-            '.svg': '🎨',
-            '.ico': '🔖',
-            '.woff': '🔤',
+            '.jpg': '🖼️',       '.gif': '🖼️',
+            '.jpeg': '🖼️',           '.svg': '🎨',
+            '.gif': '🖼️',            '.ico': '🔖',
+
+
+
+
+
+
+
+
+
+
+
+}    }        return icons[ext.toLowerCase()] || '📦';        };            '.eot': '🔤'            '.ttf': '🔤',            '.woff2': '🔤',            '.woff': '🔤',            '.ico': '🔖',            '.svg': '🎨',            '.woff': '🔤',
             '.woff2': '🔤',
             '.ttf': '🔤',
             '.eot': '🔤'

package/package.json

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