@jqhtml/core 2.3.2 → 2.3.6

package/dist/jqhtml-core.esm.js

@@ -1,5 +1,5 @@
 /**
- * JQHTML Core v2.2.222
+ * JQHTML Core v2.3.6
  * (c) 2025 JQHTML Team
  * Released under the MIT License
  */
@@ -884,7 +884,7 @@ function devWarn(message) {
     console.warn(`[JQHTML Dev Warning] ${message}`);
 }
 // Get global jqhtml object
-function getJqhtml$1() {
+function getJqhtml() {
     if (typeof window !== 'undefined' && window.jqhtml) {
         return window.jqhtml;
     }
@@ -897,7 +897,7 @@ function getJqhtml$1() {
 }
 // Visual flash effect
 function flashComponent(component, eventType) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     if (!jqhtml?.debug?.flashComponents)
         return;
     const duration = jqhtml.debug.flashDuration || 500;
@@ -919,7 +919,7 @@ function flashComponent(component, eventType) {
 }
 // Log lifecycle event
 function logLifecycle(component, phase, status) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     if (!jqhtml?.debug)
         return;
     const shouldLog = jqhtml.debug.logFullLifecycle ||
@@ -965,7 +965,7 @@ function logLifecycle(component, phase, status) {
 }
 // Apply delays based on lifecycle phase
 function applyDebugDelay(phase) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     if (!jqhtml?.debug)
         return;
     let delayMs = 0;
@@ -986,14 +986,14 @@ function applyDebugDelay(phase) {
 }
 // Log instruction processing
 function logInstruction(type, data) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     if (!jqhtml?.debug?.logInstructionProcessing)
         return;
     console.log(`[JQHTML Instruction] ${type}:`, data);
 }
 // Log data changes
 function logDataChange(component, property, oldValue, newValue) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     if (!jqhtml?.debug?.traceDataFlow)
         return;
     console.log(`[JQHTML Data] ${component.constructor.name}#${component._cid}.data.${property}:`, { old: oldValue, new: newValue });
@@ -1006,7 +1006,7 @@ function updateComponentTree() {
 }
 // Router dispatch logging
 function logDispatch(url, route, params, verbose = false) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     if (!jqhtml?.debug)
         return;
     const shouldLog = jqhtml.debug.logDispatch || jqhtml.debug.logDispatchVerbose;
@@ -1028,12 +1028,12 @@ function logDispatch(url, route, params, verbose = false) {
 }
 // Check if sequential processing is enabled
 function isSequentialProcessing() {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     return jqhtml?.debug?.sequentialProcessing || false;
 }
 // Error handling with break on error
 function handleComponentError(component, phase, error) {
-    const jqhtml = getJqhtml$1();
+    const jqhtml = getJqhtml();
     console.error(`[JQHTML Error] ${component.constructor.name}#${component._cid} failed in ${phase}:`, error);
     if (jqhtml?.debug?.breakOnError) {
         debugger; // This will pause execution in dev tools
@@ -1061,6 +1061,9 @@ function handleComponentError(component, phase, error) {
  * - Scoped IDs using _cid pattern
  * - Event emission and CSS class hierarchy
  */
+// WeakMap storage for protected lifecycle method implementations (Option 2)
+// See docs/internal/lifecycle-method-protection.md for design details
+const lifecycle_impls = new WeakMap();
 class Jqhtml_Component {
     constructor(element, args = {}) {
         this._ready_state = 0; // 0=created, 1=init, 2=loaded, 3=rendered, 4=ready
@@ -1081,6 +1084,7 @@ class Jqhtml_Component {
         this.__initial_data_snapshot = null; // Snapshot of this.data after on_create() for restoration before on_load()
         this.__data_frozen = false; // Track if this.data is currently frozen
         this.next_reload_force_refresh = null; // State machine for reload()/refresh() debounce precedence
+        this.__lifecycle_authorized = false; // Flag for lifecycle method protection
         this._cid = this._generate_cid();
         this._lifecycle_manager = LifecycleManager.get_instance();
         // Create or wrap element
@@ -1194,6 +1198,63 @@ class Jqhtml_Component {
         this.state = {};
         this._log_lifecycle('construct', 'complete');
     }
+    /**
+     * Protect lifecycle methods from manual invocation
+     * Stores original implementations in WeakMap, replaces with guarded wrappers
+     * @private
+     */
+    _protect_lifecycle_methods() {
+        const methods = {
+            on_create: 'Called automatically during creation.',
+            on_render: 'Use render() to trigger a re-render.',
+            on_load: 'Use reload() to refresh data.',
+            on_ready: 'Called automatically when ready.',
+            on_stop: 'Use stop() to stop the component.'
+        };
+        const impls = {};
+        const self = this;
+        for (const [name, help] of Object.entries(methods)) {
+            const original = this[name];
+            // Skip if using base class default (empty method)
+            if (original === Jqhtml_Component.prototype[name])
+                continue;
+            impls[name] = original;
+            // Create wrapper with same function name (for stack traces)
+            this[name] = {
+                [name](...args) {
+                    if (!self.__lifecycle_authorized) {
+                        throw new Error(`[JQHTML] ${name}() cannot be called manually. ${help}\n` +
+                            `Component: ${self.component_name()} (_cid: ${self._cid})`);
+                    }
+                    return lifecycle_impls.get(self)[name].apply(self, args);
+                }
+            }[name];
+        }
+        lifecycle_impls.set(this, impls);
+    }
+    /**
+     * Call a lifecycle method with authorization (async)
+     * Framework calls this to invoke lifecycle methods, bypassing the protection wrapper.
+     * The flag is set momentarily for the wrapper check, then reset BEFORE user code runs.
+     * This ensures any nested lifecycle calls from user code will fail the flag check.
+     * @private
+     */
+    async _call_lifecycle(name, context) {
+        // Get the original implementation (bypasses wrapper entirely)
+        const impl = lifecycle_impls.get(this)?.[name] || this[name];
+        // Call original directly - no flag needed since we bypass the wrapper
+        return await impl.call(context || this);
+    }
+    /**
+     * Call a lifecycle method with authorization (sync version for sync methods like on_stop)
+     * @private
+     */
+    _call_lifecycle_sync(name) {
+        // Get the original implementation (bypasses wrapper entirely)
+        const impl = lifecycle_impls.get(this)?.[name] || this[name];
+        // Call original directly - no flag needed since we bypass the wrapper
+        return impl.call(this);
+    }
     /**
      * Boot - Start the full component lifecycle
      * Called immediately after construction by instruction processor
@@ -1207,6 +1268,8 @@ class Jqhtml_Component {
         if (this._booted)
             return;
         this._booted = true;
+        // Protect lifecycle methods from manual invocation (must happen after subclass constructor)
+        this._protect_lifecycle_methods();
         await this._lifecycle_manager.boot_component(this);
     }
     // -------------------------------------------------------------------------
@@ -1417,9 +1480,9 @@ class Jqhtml_Component {
         // Don't update ready state here - let phases complete in order
         this._update_debug_attrs();
         this._log_lifecycle('render', 'complete');
-        // Call on_render() immediately after render completes
+        // Call on_render() with authorization (sync) immediately after render completes
         // This ensures event handlers are always re-attached after DOM updates
-        const renderResult = this.on_render();
+        const renderResult = this._call_lifecycle_sync('on_render');
         if (renderResult && typeof renderResult.then === 'function') {
             console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_render(). ` +
                 `on_render() must be synchronous code. Remove 'async' from the function declaration.`);
@@ -1484,8 +1547,8 @@ class Jqhtml_Component {
             if (this._render_count !== render_id) {
                 return; // Stale render, don't call on_ready
             }
-            // Call on_ready hook
-            await this.on_ready();
+            // Call on_ready hook with authorization
+            await this._call_lifecycle('on_ready');
             // Trigger ready event
             await this.trigger('ready');
         })();
@@ -1505,8 +1568,8 @@ class Jqhtml_Component {
         if (this._stopped || this._ready_state >= 1)
             return;
         this._log_lifecycle('create', 'start');
-        // Call on_create() and validate it's synchronous
-        const result = this.on_create();
+        // Call on_create() with authorization and validate it's synchronous
+        const result = await this._call_lifecycle('on_create');
         if (result && typeof result.then === 'function') {
             console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_create(). ` +
                 `on_create() must be synchronous code. Remove 'async' from the function declaration.`);
@@ -1621,8 +1684,8 @@ class Jqhtml_Component {
             if (window.jqhtml?.debug?.verbose) {
                 console.log(`[Cache] Component ${this._cid} (${this.component_name()}) has non-serializable args - load deduplication and caching disabled`, { uncacheable_property });
             }
-            // Execute on_load() without deduplication or caching
-            await this.on_load();
+            // Execute on_load() with authorization, without deduplication or caching
+            await this._call_lifecycle('on_load');
             this.__data_frozen = true;
             return;
         }
@@ -1731,7 +1794,7 @@ class Jqhtml_Component {
                 // - Should errors reset state machine flags (next_reload_force_refresh)?
                 // - Should partial data be preserved or rolled back?
                 // - Should followers be notified differently based on error type?
-                await this.on_load.call(restricted_this);
+                await this._call_lifecycle('on_load', restricted_this);
             }
             catch (error) {
                 // Handle error and notify coordinator
@@ -1803,7 +1866,7 @@ class Jqhtml_Component {
         this._log_lifecycle('ready', 'start');
         // Wait for all children to reach ready state (bottom-up execution)
         await this._wait_for_children_ready();
-        await this.on_ready();
+        await this._call_lifecycle('on_ready');
         this._ready_state = 4;
         this._update_debug_attrs();
         this._log_lifecycle('ready', 'complete');
@@ -1853,6 +1916,14 @@ class Jqhtml_Component {
      * @private
      */
     async _wait_for_children_ready() {
+        // Server-rendered components (created via jqhtml.boot()) may have children
+        // that were hydrated asynchronously during the 'render' event callback.
+        // Those children couldn't register via _find_dom_parent() because they were
+        // created after the parent's lifecycle started. Force DOM traversal fallback
+        // to reliably discover all children, including boot-hydrated ones.
+        if (this.args._inner_html !== undefined) {
+            this._use_dom_fallback = true;
+        }
         const children = this._get_dom_children();
         if (children.length === 0) {
             return; // No children, nothing to wait for
@@ -2011,7 +2082,7 @@ class Jqhtml_Component {
             this.data = JSON.parse(JSON.stringify(this.__initial_data_snapshot));
         }
         try {
-            await this.on_load();
+            await this._call_lifecycle('on_load');
         }
         finally {
             // Freeze this.data after on_load() completes
@@ -2087,7 +2158,7 @@ class Jqhtml_Component {
         // STEP 3.5 & 4: Wait for children and call on_ready (only if we rendered)
         if (rendered_from_cache || should_render) {
             await this._wait_for_children_ready();
-            await this.on_ready();
+            await this._call_lifecycle('on_ready');
         }
         this._log_lifecycle('reload', 'complete');
     }
@@ -2121,16 +2192,14 @@ class Jqhtml_Component {
         this.$.addClass('_Component_Stopped');
         // Unregister from lifecycle manager
         this._lifecycle_manager.unregister_component(this);
-        // Call user's on_stop() hook
-        const stopResult = this.on_stop();
+        // Call user's on_stop() hook with authorization (sync)
+        const stopResult = this._call_lifecycle_sync('on_stop');
         if (stopResult && typeof stopResult.then === 'function') {
             console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_stop(). ` +
                 `on_stop() must be synchronous code. Remove 'async' from the function declaration.`);
         }
-        // Fire registered destroy callbacks
-        this.trigger('destroy');
-        // Trigger jQuery destroy event
-        this.$.trigger('destroy');
+        // Fire registered stop callbacks
+        this.trigger('stop');
         // Remove from DOM parent's children
         if (this._dom_parent) {
             this._dom_parent._dom_children.delete(this);
@@ -2959,384 +3028,132 @@ function escape_html(str) {
 }
 
 /**
- * JQHTML Debug Overlay
+ * JQHTML Boot - Component Hydration System
+ *
+ * Bridges server-rendered HTML and client-side jqhtml components.
  *
- * Independent debug controls using pure jQuery DOM manipulation.
- * Does NOT use JQHTML components so it works even when components are broken.
+ * Server output:   <div class="_Component_Init" data-component-init-name="User_Card" data-component-args='{"id":1}'></div>
+ * After boot():    <div class="User_Card Component">...rendered template...</div>
+ *
+ * Usage:
+ *   await jqhtml.boot();           // Hydrate all placeholders, wait for ready
+ *   jqhtml.boot($('#container'));  // Hydrate within scope
  */
-// Get global jQuery
-function getJQuery() {
-    if (typeof window !== 'undefined' && window.$) {
-        return window.$;
-    }
-    if (typeof window !== 'undefined' && window.jQuery) {
-        return window.jQuery;
-    }
-    throw new Error('FATAL: jQuery is not defined. jQuery must be loaded before using JQHTML. ' +
-        'Add <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> before loading JQHTML.');
-}
-// Get global jqhtml object
-function getJqhtml() {
-    if (typeof window !== 'undefined' && window.jqhtml) {
-        return window.jqhtml;
-    }
-    if (typeof globalThis !== 'undefined' && globalThis.jqhtml) {
-        return globalThis.jqhtml;
-    }
-    throw new Error('FATAL: window.jqhtml is not defined. The JQHTML runtime must be loaded before using JQHTML components. ' +
-        'Ensure @jqhtml/core is imported and initialized before attempting to use debug features.');
-}
-class DebugOverlay {
-    constructor(options = {}) {
-        this.$container = null;
-        this.$statusIndicator = null;
-        this.$ = getJQuery();
-        if (!this.$) {
-            throw new Error('jQuery is required for DebugOverlay');
-        }
-        this.options = {
-            position: 'bottom',
-            theme: 'dark',
-            compact: false,
-            showStatus: true,
-            autoHide: false,
-            ...options
-        };
-    }
-    /**
-     * Static method to show debug overlay (singleton pattern)
-     */
-    static show(options) {
-        if (!DebugOverlay.instance) {
-            DebugOverlay.instance = new DebugOverlay(options);
-        }
-        DebugOverlay.instance.display();
-        return DebugOverlay.instance;
-    }
-    /**
-     * Static method to hide debug overlay
-     */
-    static hide() {
-        if (DebugOverlay.instance) {
-            DebugOverlay.instance.hide();
-        }
-    }
-    /**
-     * Static method to toggle debug overlay visibility
-     */
-    static toggle() {
-        if (DebugOverlay.instance && DebugOverlay.instance.$container) {
-            if (DebugOverlay.instance.$container.is(':visible')) {
-                DebugOverlay.hide();
-            }
-            else {
-                DebugOverlay.instance.display();
-            }
-        }
-        else {
-            DebugOverlay.show();
-        }
-    }
-    /**
-     * Static method to destroy debug overlay
-     */
-    static destroy() {
-        if (DebugOverlay.instance) {
-            DebugOverlay.instance.destroy();
-            DebugOverlay.instance = null;
-        }
-    }
-    /**
-     * Display the debug overlay
-     */
-    display() {
-        if (this.$container) {
-            this.$container.show();
+/**
+ * Hydrate all _Component_Init placeholders within a scope.
+ *
+ * @param scope - jQuery object, HTMLElement, or undefined (defaults to body)
+ * @returns Promise that resolves when all components (including nested) are ready
+ */
+function boot(scope) {
+    const jQ = typeof jQuery !== 'undefined' ? jQuery : $;
+    if (!scope) {
+        scope = jQ('body');
+    }
+    else if (!(scope instanceof jQ)) {
+        scope = jQ(scope);
+    }
+    const readyPromises = [];
+    // Find top-level placeholders only (skip those nested inside other placeholders)
+    scope.find('._Component_Init').each(function () {
+        const $element = jQ(this);
+        // Skip if removed from DOM
+        if (!document.contains($element[0])) {
             return;
         }
-        this.createOverlay();
-        if (this.options.showStatus) {
-            this.createStatusIndicator();
-        }
-    }
-    /**
-     * Hide the debug overlay
-     */
-    hide() {
-        if (this.$container) {
-            this.$container.hide();
-        }
-        if (this.$statusIndicator) {
-            this.$statusIndicator.hide();
-        }
-    }
-    /**
-     * Remove the debug overlay completely
-     */
-    destroy() {
-        if (this.$container) {
-            this.$container.remove();
-            this.$container = null;
-        }
-        if (this.$statusIndicator) {
-            this.$statusIndicator.remove();
-            this.$statusIndicator = null;
+        // Skip nested placeholders - they'll be hydrated by parent's render callback
+        let parent = $element[0].parentElement;
+        while (parent) {
+            if (parent.classList.contains('_Component_Init')) {
+                return;
+            }
+            parent = parent.parentElement;
         }
-    }
-    /**
-     * Update the status indicator
-     */
-    updateStatus(mode) {
-        if (!this.$statusIndicator)
+        // Hydrate this placeholder
+        const component = hydrateElement($element);
+        if (!component)
             return;
-        this.$statusIndicator.text('Debug: ' + mode);
-        this.$statusIndicator.attr('class', 'jqhtml-debug-status' + (mode !== 'Off' ? ' active' : ''));
-    }
-    createOverlay() {
-        // Add styles first
-        this.addStyles();
-        // Create container using jQuery
-        this.$container = this.$('<div>')
-            .addClass(`jqhtml-debug-overlay ${this.options.theme} ${this.options.position}`);
-        // Create content structure
-        const $content = this.$('<div>').addClass('jqhtml-debug-content');
-        const $controls = this.$('<div>').addClass('jqhtml-debug-controls');
-        // Add title
-        const $title = this.$('<span>')
-            .addClass('jqhtml-debug-title')
-            .html('<strong>🐛 JQHTML Debug:</strong>');
-        $controls.append($title);
-        // Create buttons
-        const buttons = [
-            { text: 'Slow Motion + Flash', action: 'enableSlowMotionDebug', class: 'success' },
-            { text: 'Basic Debug', action: 'enableBasicDebug', class: '' },
-            { text: 'Full Debug', action: 'enableFullDebug', class: '' },
-            { text: 'Sequential', action: 'enableSequentialMode', class: '' },
-            { text: 'Clear Debug', action: 'clearAllDebug', class: 'danger' },
-            { text: 'Settings', action: 'showDebugInfo', class: '' }
-        ];
-        buttons.forEach(btn => {
-            const $button = this.$('<button>')
-                .text(btn.text)
-                .addClass('jqhtml-debug-btn' + (btn.class ? ` ${btn.class}` : ''))
-                .on('click', () => this.executeAction(btn.action));
-            $controls.append($button);
+        // On render, recursively hydrate any nested placeholders
+        component.on('render', function () {
+            hydrateNested(component.$, jQ);
         });
-        // Add minimize/close button
-        const $toggleBtn = this.$('<button>')
-            .text(this.options.compact ? '▼' : '▲')
-            .addClass('jqhtml-debug-toggle')
-            .on('click', () => this.toggle());
-        $controls.append($toggleBtn);
-        // Assemble and add to page
-        $content.append($controls);
-        this.$container.append($content);
-        this.$('body').append(this.$container);
-    }
-    createStatusIndicator() {
-        this.$statusIndicator = this.$('<div>')
-            .addClass('jqhtml-debug-status')
-            .text('Debug: Off')
-            .css({
-            position: 'fixed',
-            top: '10px',
-            right: '10px',
-            background: '#2c3e50',
-            color: 'white',
-            padding: '5px 10px',
-            borderRadius: '4px',
-            fontSize: '0.75rem',
-            zIndex: '10001',
-            opacity: '0.8',
-            fontFamily: 'monospace'
-        });
-        this.$('body').append(this.$statusIndicator);
-    }
-    addStyles() {
-        // Check if styles already exist
-        if (this.$('#jqhtml-debug-styles').length > 0)
+        // Collect ready promise - parent.ready() waits for all children via _wait_for_children_ready()
+        readyPromises.push(component.ready());
+    });
+    // Fire jqhtml:ready event when all top-level components are ready
+    const result = Promise.all(readyPromises);
+    result.then(() => {
+        document.dispatchEvent(new CustomEvent('jqhtml:ready'));
+    });
+    return result;
+}
+/**
+ * Hydrate nested _Component_Init placeholders within a component's DOM.
+ * Called from parent's 'render' event.
+ */
+function hydrateNested($scope, jQ) {
+    $scope.find('._Component_Init').each(function () {
+        const $element = jQ(this);
+        if (!document.contains($element[0])) {
             return;
-        // Create and inject CSS using jQuery - concatenated strings for better minification
-        const $style = this.$('<style>')
-            .attr('id', 'jqhtml-debug-styles')
-            .text('.jqhtml-debug-overlay {' +
-            'position: fixed;' +
-            'left: 0;' +
-            'right: 0;' +
-            'z-index: 10000;' +
-            'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;' +
-            'font-size: 0.8rem;' +
-            'box-shadow: 0 2px 10px rgba(0,0,0,0.2);' +
-            '}' +
-            '.jqhtml-debug-overlay.top {' +
-            'top: 0;' +
-            '}' +
-            '.jqhtml-debug-overlay.bottom {' +
-            'bottom: 0;' +
-            '}' +
-            '.jqhtml-debug-overlay.dark {' +
-            'background: #34495e;' +
-            'color: #ecf0f1;' +
-            '}' +
-            '.jqhtml-debug-overlay.light {' +
-            'background: #f8f9fa;' +
-            'color: #333;' +
-            'border-bottom: 1px solid #dee2e6;' +
-            '}' +
-            '.jqhtml-debug-content {' +
-            'padding: 0.5rem 1rem;' +
-            '}' +
-            '.jqhtml-debug-controls {' +
-            'display: flex;' +
-            'flex-wrap: wrap;' +
-            'gap: 8px;' +
-            'align-items: center;' +
-            '}' +
-            '.jqhtml-debug-title {' +
-            'margin-right: 10px;' +
-            'font-weight: bold;' +
-            '}' +
-            '.jqhtml-debug-btn {' +
-            'padding: 4px 8px;' +
-            'border: none;' +
-            'border-radius: 3px;' +
-            'background: #3498db;' +
-            'color: white;' +
-            'cursor: pointer;' +
-            'font-size: 0.75rem;' +
-            'transition: background 0.2s;' +
-            '}' +
-            '.jqhtml-debug-btn:hover {' +
-            'background: #2980b9;' +
-            '}' +
-            '.jqhtml-debug-btn.success {' +
-            'background: #27ae60;' +
-            '}' +
-            '.jqhtml-debug-btn.success:hover {' +
-            'background: #229954;' +
-            '}' +
-            '.jqhtml-debug-btn.danger {' +
-            'background: #e74c3c;' +
-            '}' +
-            '.jqhtml-debug-btn.danger:hover {' +
-            'background: #c0392b;' +
-            '}' +
-            '.jqhtml-debug-toggle {' +
-            'padding: 4px 8px;' +
-            'border: none;' +
-            'border-radius: 3px;' +
-            'background: #7f8c8d;' +
-            'color: white;' +
-            'cursor: pointer;' +
-            'font-size: 0.75rem;' +
-            'margin-left: auto;' +
-            '}' +
-            '.jqhtml-debug-toggle:hover {' +
-            'background: #6c7b7d;' +
-            '}' +
-            '.jqhtml-debug-status.active {' +
-            'background: #27ae60 !important;' +
-            '}' +
-            '@media (max-width: 768px) {' +
-            '.jqhtml-debug-controls {' +
-            'flex-direction: column;' +
-            'align-items: flex-start;' +
-            '}' +
-            '.jqhtml-debug-title {' +
-            'margin-bottom: 5px;' +
-            '}' +
-            '}');
-        this.$('head').append($style);
-    }
-    toggle() {
-        // Toggle between compact and full view
-        this.options.compact = !this.options.compact;
-        const $toggleBtn = this.$container.find('.jqhtml-debug-toggle');
-        $toggleBtn.text(this.options.compact ? '▼' : '▲');
-        const $buttons = this.$container.find('.jqhtml-debug-btn');
-        if (this.options.compact) {
-            $buttons.hide();
         }
-        else {
-            $buttons.show();
+        // Skip if nested inside another placeholder
+        let parent = $element[0].parentElement;
+        while (parent && parent !== $scope[0]) {
+            if (parent.classList.contains('_Component_Init')) {
+                return;
+            }
+            parent = parent.parentElement;
         }
-    }
-    executeAction(action) {
-        const jqhtml = getJqhtml();
-        if (!jqhtml) {
-            console.warn('JQHTML not available - make sure it\'s loaded and exposed globally');
+        const component = hydrateElement($element);
+        if (!component)
             return;
+        // Recursively handle deeper nesting
+        component.on('render', function () {
+            hydrateNested(component.$, jQ);
+        });
+    });
+}
+/**
+ * Hydrate a single _Component_Init element into a live component.
+ */
+function hydrateElement($element, jQ) {
+    const componentName = $element.attr('data-component-init-name');
+    if (!componentName)
+        return null;
+    // Parse args
+    const argsString = $element.attr('data-component-args');
+    let args = {};
+    if (argsString) {
+        try {
+            args = JSON.parse(argsString);
         }
-        switch (action) {
-            case 'enableSlowMotionDebug':
-                jqhtml.setDebugSettings({
-                    logFullLifecycle: true,
-                    sequentialProcessing: true,
-                    delayAfterComponent: 150,
-                    delayAfterRender: 200,
-                    delayAfterRerender: 250,
-                    flashComponents: true,
-                    flashDuration: 800,
-                    flashColors: {
-                        create: '#3498db',
-                        render: '#27ae60',
-                        ready: '#9b59b6'
-                    },
-                    profilePerformance: true,
-                    highlightSlowRenders: 30,
-                    logDispatch: true
-                });
-                this.updateStatus('Slow Motion');
-                console.log('🐛 Slow Motion Debug Mode Enabled');
-                break;
-            case 'enableBasicDebug':
-                jqhtml.enableDebugMode('basic');
-                this.updateStatus('Basic');
-                console.log('🐛 Basic Debug Mode Enabled');
-                break;
-            case 'enableFullDebug':
-                jqhtml.enableDebugMode('full');
-                this.updateStatus('Full');
-                console.log('🐛 Full Debug Mode Enabled');
-                break;
-            case 'enableSequentialMode':
-                jqhtml.setDebugSettings({
-                    logCreationReady: true,
-                    sequentialProcessing: true,
-                    flashComponents: true,
-                    profilePerformance: true
-                });
-                this.updateStatus('Sequential');
-                console.log('🐛 Sequential Processing Mode Enabled');
-                break;
-            case 'clearAllDebug':
-                jqhtml.clearDebugSettings();
-                this.updateStatus('Off');
-                console.log('🐛 All Debug Modes Disabled');
-                break;
-            case 'showDebugInfo':
-                const settings = JSON.stringify(jqhtml.debug, null, 2);
-                console.log('🐛 Current Debug Settings:', settings);
-                alert('Debug settings logged to console:\n\n' + (Object.keys(jqhtml.debug).length > 0 ? settings : 'No debug settings active'));
-                break;
-        }
+        catch (e) {
+            console.error(`[jqhtml.boot] Failed to parse args for ${componentName}:`, e);
+        }
+    }
+    // Strip data- prefix from args if present
+    const filteredArgs = {};
+    for (const [key, value] of Object.entries(args)) {
+        filteredArgs[key.startsWith('data-') ? key.substring(5) : key] = value;
+    }
+    // Capture innerHTML for content() and mark as boot-created
+    filteredArgs._inner_html = $element.html();
+    filteredArgs._component_name = componentName;
+    // Cleanup placeholder
+    $element.removeAttr('data-component-init-name');
+    $element.removeAttr('data-component-args');
+    $element.removeData('component-init-name');
+    $element.removeData('component-args');
+    $element.removeClass('_Component_Init');
+    $element.empty();
+    // Create component
+    try {
+        return $element.component(componentName, filteredArgs).component();
     }
-}
-DebugOverlay.instance = null;
-// Simplified global convenience functions that use static methods
-function showDebugOverlay(options) {
-    return DebugOverlay.show(options);
-}
-function hideDebugOverlay() {
-    DebugOverlay.hide();
-}
-// Auto-initialize if debug query parameter is present
-if (typeof window !== 'undefined') {
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.get('debug') === 'true' || urlParams.get('jqhtml-debug') === 'true') {
-        document.addEventListener('DOMContentLoaded', () => {
-            DebugOverlay.show();
-        });
+    catch (error) {
+        console.error(`[jqhtml.boot] Failed to create ${componentName}:`, error);
+        return null;
     }
 }
 
@@ -4238,7 +4055,7 @@ function init(jQuery) {
     }
 }
 // Version - will be replaced during build with actual version from package.json
-const version = '2.2.222';
+const version = '2.3.6';
 // Default export with all functionality
 const jqhtml = {
     // Core
@@ -4262,6 +4079,8 @@ const jqhtml = {
     escape_html,
     // Version property - internal
     __version: version,
+    // state facts
+    tombstone: 'pepperoni and cheese',
     // Debug settings
     debug: {
         enabled: false,
@@ -4288,15 +4107,6 @@ const jqhtml = {
     clearDebugSettings() {
         this.debug = {};
     },
-    // Debug overlay methods
-    showDebugOverlay(options) {
-        return DebugOverlay.show(options);
-    },
-    hideDebugOverlay() {
-        return DebugOverlay.hide();
-    },
-    // Export DebugOverlay class for direct access
-    DebugOverlay,
     // Install globals function
     installGlobals() {
         if (typeof window !== 'undefined') {
@@ -4330,7 +4140,9 @@ const jqhtml = {
     // Cache key setter - enables component caching via local storage
     set_cache_key(cache_key) {
         Jqhtml_Local_Storage.set_cache_key(cache_key);
-    }
+    },
+    // Boot - hydrate server-rendered component placeholders
+    boot
 };
 // Auto-register on window for browser environments
 // This is REQUIRED for compiled templates which use window.jqhtml.register_template()
@@ -4348,5 +4160,5 @@ if (typeof window !== 'undefined' && !window.jqhtml) {
     }
 }
 
-export { DebugOverlay, Jqhtml_Component, LifecycleManager as Jqhtml_LifecycleManager, Jqhtml_Local_Storage, LifecycleManager, Load_Coordinator, applyDebugDelay, create_component, jqhtml as default, devWarn, escape_html, extract_slots, get_component_class, get_component_names, get_registered_templates, get_template, get_template_by_class, handleComponentError, has_component, hideDebugOverlay, init, init_jquery_plugin, isSequentialProcessing, list_components, logDataChange, logDispatch, logInstruction, logLifecycle, process_instructions, register_component, register_template, render_template, showDebugOverlay, version };
+export { Jqhtml_Component, LifecycleManager as Jqhtml_LifecycleManager, Jqhtml_Local_Storage, LifecycleManager, Load_Coordinator, applyDebugDelay, boot, create_component, jqhtml as default, devWarn, escape_html, extract_slots, get_component_class, get_component_names, get_registered_templates, get_template, get_template_by_class, handleComponentError, has_component, init, init_jquery_plugin, isSequentialProcessing, list_components, logDataChange, logDispatch, logInstruction, logLifecycle, process_instructions, register_component, register_template, render_template, version };
 //# sourceMappingURL=jqhtml-core.esm.js.map