@jqhtml/core 2.3.4 → 2.3.9

package/dist/index.js

@@ -351,6 +351,50 @@ function list_components() {
     }
     return result;
 }
+/**
+ * Unified registration function - auto-detects source type and delegates
+ *
+ * Accepts either:
+ * - A compiled JQHTML template (has __jqhtml_template: true)
+ * - A component class extending Jqhtml_Component (has static __jqhtml_component: true and static component_name)
+ *
+ * @param source - Compiled template or component class
+ */
+function register(source) {
+    // Check for template (compiled .jqhtml file)
+    if (source && typeof source === 'object' && '__jqhtml_template' in source && source.__jqhtml_template === true) {
+        register_template(source);
+        return;
+    }
+    // Check for component class (extends Jqhtml_Component)
+    if (source && typeof source === 'function' && '__jqhtml_component' in source && source.__jqhtml_component === true) {
+        const component_name = source.component_name;
+        if (!component_name || typeof component_name !== 'string') {
+            throw new Error('[JQHTML] Component class must define static component_name property.\n\n' +
+                'Example:\n' +
+                '  class My_Component extends Jqhtml_Component {\n' +
+                '    static component_name = "My_Component";\n' +
+                '    // ...\n' +
+                '  }\n\n' +
+                'Alternatively, use register_component(name, class) to specify the name explicitly:\n' +
+                '  jqhtml.register_component("My_Component", My_Component);');
+        }
+        register_component(component_name, source);
+        return;
+    }
+    // Unknown type - provide helpful error
+    throw new Error('[JQHTML] register() requires a compiled JQHTML template or a component class.\n\n' +
+        'For templates:\n' +
+        '  import My_Template from "./my_component.jqhtml";\n' +
+        '  jqhtml.register(My_Template);\n\n' +
+        'For classes (with static component_name):\n' +
+        '  class My_Component extends Jqhtml_Component {\n' +
+        '    static component_name = "My_Component";\n' +
+        '  }\n' +
+        '  jqhtml.register(My_Component);\n\n' +
+        'For classes (without static component_name):\n' +
+        '  jqhtml.register_component("My_Component", My_Component);');
+}
 
 /**
  * JQHTML v2 Instruction Processor
@@ -879,7 +923,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;
     }
@@ -892,7 +936,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;
@@ -914,7 +958,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 ||
@@ -960,7 +1004,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;
@@ -981,14 +1025,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 });
@@ -1001,7 +1045,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;
@@ -1023,12 +1067,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
@@ -1056,6 +1100,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
@@ -1076,6 +1123,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
@@ -1189,6 +1237,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
@@ -1202,6 +1307,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);
     }
     // -------------------------------------------------------------------------
@@ -1412,9 +1519,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.`);
@@ -1479,8 +1586,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');
         })();
@@ -1500,8 +1607,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.`);
@@ -1616,8 +1723,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;
         }
@@ -1726,7 +1833,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
@@ -1798,7 +1905,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');
@@ -2014,7 +2121,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
@@ -2090,7 +2197,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');
     }
@@ -2124,16 +2231,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);
@@ -2696,6 +2801,8 @@ class Jqhtml_Component {
         };
     }
 }
+// Static properties
+Jqhtml_Component.__jqhtml_component = true; // Marker for unified register() detection
 
 /**
  * JQHTML v2 Template Renderer
@@ -3091,388 +3198,6 @@ function hydrateElement($element, jQ) {
     }
 }
 
-/**
- * JQHTML Debug Overlay
- *
- * Independent debug controls using pure jQuery DOM manipulation.
- * Does NOT use JQHTML components so it works even when components are broken.
- */
-// 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();
-            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;
-        }
-    }
-    /**
-     * Update the status indicator
-     */
-    updateStatus(mode) {
-        if (!this.$statusIndicator)
-            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);
-        });
-        // 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)
-            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();
-        }
-    }
-    executeAction(action) {
-        const jqhtml = getJqhtml();
-        if (!jqhtml) {
-            console.warn('JQHTML not available - make sure it\'s loaded and exposed globally');
-            return;
-        }
-        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;
-        }
-    }
-}
-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();
-        });
-    }
-}
-
 /**
  * JQHTML v2 jQuery Plugin
  *
@@ -3669,47 +3394,6 @@ function init_jquery_plugin(jQuery) {
         // Return the jQuery element to enable chaining (fluent interface pattern)
         return targetElement;
     };
-    // Store original jQuery methods for overriding
-    const _jqhtml_jquery_overrides = {};
-    // EXPERIMENTAL: Override DOM manipulation methods to support component instances as arguments
-    // and to trigger ready() when components are added to the DOM
-    // NOTE: This feature needs thorough testing in production scenarios
-    const dom_insertion_methods = ['append', 'prepend', 'before', 'after', 'replaceWith'];
-    for (const fnname of dom_insertion_methods) {
-        _jqhtml_jquery_overrides[fnname] = jQuery.fn[fnname];
-        jQuery.fn[fnname] = function (...args) {
-            // Resolve all component instances into jQuery elements
-            const resolvedArgs = args.map(arg => {
-                if (arg && typeof arg === 'object' && arg instanceof Jqhtml_Component) {
-                    return arg.$;
-                }
-                return arg;
-            });
-            // Make a list of all jQuery elements in the arguments
-            const $elements = resolvedArgs.filter((arg) => arg instanceof jQuery);
-            // Call the original jQuery method with resolved arguments
-            const ret = _jqhtml_jquery_overrides[fnname].apply(this, resolvedArgs);
-            // For each jQuery element that is now in the DOM and hasn't triggered ready yet,
-            // find any uninitialized components and boot them
-            for (const $e of $elements) {
-                // Check if element is in the DOM
-                if ($e.closest('html').length > 0) {
-                    // Find any components that haven't been initialized yet
-                    $e.find('.Component').addBack('.Component').each(function () {
-                        const $comp = jQuery(this);
-                        const component = $comp.data('_component');
-                        // If component exists and hasn't been booted yet, boot it
-                        if (component && !component._ready_state) {
-                            component._boot();
-                        }
-                    });
-                }
-            }
-            return ret;
-        };
-    }
-    // Note: Component destruction is handled automatically by MutationObserver
-    // in lifecycle-manager.ts. No jQuery method overrides needed for cleanup.
     /**
      * shallowFind - Find nearest descendants matching selector
      *
@@ -4371,16 +4055,17 @@ function init(jQuery) {
     }
 }
 // Version - will be replaced during build with actual version from package.json
-const version = '2.3.4';
+const version = '2.3.9';
 // Default export with all functionality
 const jqhtml = {
     // Core
     Jqhtml_Component,
     LifecycleManager,
     // Registry
+    register,
     register_component,
-    get_component_class,
     register_template,
+    get_component_class,
     get_template,
     get_template_by_class,
     create_component,
@@ -4395,6 +4080,8 @@ const jqhtml = {
     escape_html,
     // Version property - internal
     __version: version,
+    // state facts
+    tombstone: 'pepperoni and cheese',
     // Debug settings
     debug: {
         enabled: false,
@@ -4421,15 +4108,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') {
@@ -4483,5 +4161,5 @@ if (typeof window !== 'undefined' && !window.jqhtml) {
     }
 }
 
-export { DebugOverlay, 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, 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, register_component, register_template, render_template, version };
 //# sourceMappingURL=index.js.map