juxscript 1.1.98 → 1.1.101

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T20:48:20.139Z",
+  "generatedAt": "2026-02-12T21:09:49.606Z",
   "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":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAMpE,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IAC/B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,UAAU,UAAW,SAAQ,SAAS;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,WAAW,CAAC,EAAE,kBAAkB,GAAG,MAAM,EAAE,CAAC;CAC/C;AAED;;GAEG;AACH,8BAAsB,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC7D,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IACzC,OAAO,CAAC,aAAa,CAAkC;IAChD,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;gBAEjC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EAAE,OAAO,GAAE,YAAiB;IAsBzF,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK5D,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI;IAK1D,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI;IAKlF,OAAO,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IAKpC,UAAU,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IASvC,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACjC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACzB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC7B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC3B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC9B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACpC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM9B,UAAU,CAAC,gBAAgB,EAAE,MAAM,EAAE,GAAG,kBAAkB,GAAG,IAAI;IAKjE,OAAO,CAAC,UAAU,GAAE,MAAW,EAAE,IAAI,GAAE,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,IAAa,GAAG,IAAI;IAc5G,GAAG,CAAC,KAAK,GAAE,MAAU,EAAE,MAAM,GAAE,MAAwB,GAAG,IAAI;IAQ9D,gBAAgB,CAAC,UAAU,GAAE,MAAU,EAAE,IAAI,GAAE,MAAa,EAAE,MAAM,GAAE,MAAiB,GAAG,IAAI;IAQ9F,IAAI,CAAC,YAAY,GAAE,MAAU,EAAE,IAAI,GAAE,MAAa,GAAG,IAAI;IAQzD,IAAI,CAAC,SAAS,GAAE,MAAU,EAAE,IAAI,GAAE,MAAU,GAAG,IAAI;IAQnD,OAAO,CAAC,SAAS,GAAE,MAAY,GAAG,IAAI;IAYtC,SAAS,CAAC,YAAY,IAAI,MAAM;IAgChC,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW;IAoC7D,OAAO,CAAC,aAAa;IAoBrB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IA2BlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC"}

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/package.json

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