@jqhtml/core 2.2.222

package/dist/index.cjs

@@ -0,0 +1,4384 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * JQHTML v2 Lifecycle Manager
+ *
+ * Simple lifecycle orchestration - no queues, no batching.
+ * Components boot when created. That's it.
+ *
+ * Lifecycle order:
+ * 1. create() - Calls on_create() BEFORE first render
+ * 2. render() - Creates DOM, instantiates child components, calls on_render()
+ * 3. _load() - Calls on_load(), may trigger re-render if this.data changes
+ * 4. ready() - Waits for children to be ready, calls on_ready()
+ */
+class LifecycleManager {
+    static get_instance() {
+        if (!LifecycleManager.instance) {
+            LifecycleManager.instance = new LifecycleManager();
+        }
+        return LifecycleManager.instance;
+    }
+    constructor() {
+        this.active_components = new Set();
+        // No automatic cleanup on DOM removal - components stop explicitly via:
+        // 1. Parent component re-render (calls .empty() which stops children)
+        // 2. Manual .empty(), .html(), .text() calls (overridden to stop children)
+        // 3. Explicit .stop() call
+        // This allows components to be moved in DOM without lifecycle interruption
+    }
+    /**
+     * Boot a component - run its full lifecycle
+     * Called when component is created
+     */
+    async boot_component(component) {
+        this.active_components.add(component);
+        try {
+            // Create phase - runs BEFORE first render
+            await component.create();
+            // Check if stopped during create
+            if (component._stopped)
+                return;
+            // Trigger create event
+            component.trigger('create');
+            // Render phase - creates DOM and child components
+            // Note: _render() now calls on_render() internally after DOM update
+            // Capture render ID to detect if another render happens before ready
+            let render_id = component._render();
+            // Check if stopped during render
+            if (component._stopped)
+                return;
+            // Load phase - may modify this.data
+            await component._load();
+            // Check if stopped during load
+            if (component._stopped)
+                return;
+            // If data changed during load, re-render
+            // Note: _render() now calls on_render() internally after DOM update
+            if (component._should_rerender()) {
+                render_id = component._render();
+                // Check if stopped during re-render
+                if (component._stopped)
+                    return;
+            }
+            // Check if this render is still current before proceeding to ready
+            // If _render_count changed, another render happened and we should skip ready
+            if (component._render_count !== render_id) {
+                return; // Stale render, don't call ready
+            }
+            // Ready phase - waits for children, then calls on_ready()
+            await component._ready();
+            // Check if stopped during ready
+            if (component._stopped)
+                return;
+        }
+        catch (error) {
+            console.error(`Error booting component ${component.component_name()}:`, error);
+            throw error;
+        }
+    }
+    /**
+     * Unregister a component (called on destroy)
+     */
+    unregister_component(component) {
+        this.active_components.delete(component);
+    }
+    /**
+     * Wait for all active components to reach ready state
+     */
+    async wait_for_ready() {
+        const ready_promises = [];
+        for (const component of this.active_components) {
+            if (component._ready_state < 4) {
+                ready_promises.push(new Promise((resolve) => {
+                    component.on('ready', () => resolve());
+                }));
+            }
+        }
+        await Promise.all(ready_promises);
+    }
+}
+
+/**
+ * JQHTML v2 Component Registry
+ *
+ * Global registry for component classes and templates
+ * Enables dynamic component instantiation and template association
+ */
+// Registry storage
+const component_classes = new Map();
+const component_templates = new Map();
+// Track warnings to only show once per component name
+const warned_components = new Set();
+// Default template for components without registered templates
+const DEFAULT_TEMPLATE = {
+    name: 'Jqhtml_Component', // Default name
+    tag: 'div',
+    render: function (data, args, content) {
+        const _output = [];
+        // Check for _inner_html first (server-rendered content)
+        if (args._inner_html) {
+            _output.push(args._inner_html);
+            return [_output, this];
+        }
+        // Just render the content/slots
+        if (content && typeof content === 'function') {
+            const result = content(); // Call with no args to get default content
+            // Handle both tuple and string returns
+            if (Array.isArray(result) && result.length === 2) {
+                // It's a [instructions, context] tuple
+                _output.push(...result[0]);
+            }
+            else if (typeof result === 'string') {
+                // It's a plain string
+                _output.push(result);
+            }
+        }
+        return [_output, this];
+    }
+};
+function register_component(nameOrClass, component_class, template) {
+    // Handle overloaded signatures
+    if (typeof nameOrClass === 'string') {
+        // Called with (name, class, template?)
+        const name = nameOrClass;
+        if (!component_class) {
+            throw new Error('Component class is required when registering by name');
+        }
+        // Validate component name starts with capital letter
+        if (!/^[A-Z]/.test(name)) {
+            throw new Error(`Component name '${name}' must start with a capital letter. Convention is First_Letter_With_Underscores.`);
+        }
+        component_classes.set(name, component_class);
+        // If template provided, register it
+        if (template) {
+            // Validate template name matches component name
+            if (template.name !== name) {
+                throw new Error(`Template name '${template.name}' must match component name '${name}'`);
+            }
+            register_template(template);
+        }
+    }
+    else {
+        // Called with just (class) - extract name from class
+        const component_class = nameOrClass;
+        const name = component_class.name;
+        if (!name || name === 'Jqhtml_Component') {
+            throw new Error('Component class must have a name when registering without explicit name');
+        }
+        component_classes.set(name, component_class);
+    }
+}
+/**
+ * Get a component class by name
+ * If no class found, walks the template extends chain to find parent class
+ */
+function get_component_class(name) {
+    // First check if class directly registered
+    const directClass = component_classes.get(name);
+    if (directClass) {
+        return directClass;
+    }
+    // No direct class found - walk template extends chain to find parent with class
+    const template = component_templates.get(name);
+    if (template && template.extends) {
+        // Recursively check parent templates
+        const visited = new Set([name]); // Prevent infinite loops
+        let currentTemplateName = template.extends;
+        while (currentTemplateName && !visited.has(currentTemplateName)) {
+            visited.add(currentTemplateName);
+            // Check if this parent has a registered class
+            const parentClass = component_classes.get(currentTemplateName);
+            if (parentClass) {
+                if (window.jqhtml?.debug?.enabled) {
+                    console.log(`[JQHTML] Component '${name}' using class from parent '${currentTemplateName}' via extends chain`);
+                }
+                return parentClass;
+            }
+            // Continue walking up the chain
+            const parentTemplate = component_templates.get(currentTemplateName);
+            if (parentTemplate && parentTemplate.extends) {
+                currentTemplateName = parentTemplate.extends;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return undefined;
+}
+/**
+ * Register a template - name is extracted from template.name property
+ * Returns true if registered, false if duplicate
+ */
+function register_template(template_def) {
+    const name = template_def.name;
+    if (!name) {
+        throw new Error('Template must have a name property');
+    }
+    // Validate template name starts with capital letter
+    if (!/^[A-Z]/.test(name)) {
+        throw new Error(`Template name '${name}' must start with a capital letter. Convention is First_Letter_With_Underscores.`);
+    }
+    // Check for duplicate registration
+    if (component_templates.has(name)) {
+        console.warn(`[JQHTML] Template '${name}' already registered, skipping duplicate registration`);
+        return false;
+    }
+    component_templates.set(name, template_def);
+    if (window.jqhtml?.debug?.enabled) {
+        console.log(`[JQHTML] Successfully registered template: ${name}`);
+    }
+    // Also attach metadata to the component class if it exists
+    const component_class = component_classes.get(name);
+    if (component_class) {
+        component_class._jqhtml_metadata = {
+            tag: template_def.tag,
+            defaultAttributes: template_def.defaultAttributes || {}
+        };
+    }
+    return true;
+}
+/**
+ * Get template for a component by name
+ */
+function get_template(name) {
+    const template = component_templates.get(name);
+    if (!template) {
+        // Check if we have a class but no template - walk prototype chain
+        const component_class = component_classes.get(name);
+        if (component_class) {
+            // Class exists but no template - walk up prototype chain to find ancestor template
+            const inherited_template = get_template_by_class(component_class);
+            if (inherited_template !== DEFAULT_TEMPLATE) {
+                if (window.jqhtml?.debug?.enabled) {
+                    console.log(`[JQHTML] Component '${name}' has no template, using template from prototype chain`);
+                }
+                return inherited_template;
+            }
+            // Class exists but no template in chain
+            if (window.jqhtml?.debug?.enabled && !warned_components.has(name)) {
+                warned_components.add(name);
+                console.log(`[JQHTML] No template found for class: ${name}, using default div template`);
+            }
+        }
+        else {
+            // No class and no template
+            // Suppress warning for _Jqhtml_Component and Redrawable (internal components)
+            // Only warn once per component name
+            if (name !== '_Jqhtml_Component' && name !== 'Redrawable' && !warned_components.has(name)) {
+                warned_components.add(name);
+                console.warn(`[JQHTML] Creating ${name} with defaults - no template or class defined`);
+            }
+        }
+        if (window.jqhtml?.debug?.verbose) {
+            const registered = Array.from(component_templates.keys());
+            console.log(`[JQHTML] Looking for template '${name}' in: [${registered.join(', ')}]`);
+        }
+        return DEFAULT_TEMPLATE;
+    }
+    return template;
+}
+/**
+ * Get template for a component class - walks up inheritance chain
+ */
+function get_template_by_class(component_class) {
+    // First check if class has static template property
+    if (component_class.template) {
+        return component_class.template;
+    }
+    // Then check registered templates by class name
+    let currentClass = component_class;
+    while (currentClass && currentClass.name !== 'Object') {
+        // Normalize class name - handle different import patterns
+        let normalizedName = currentClass.name;
+        if (normalizedName === '_Jqhtml_Component' || normalizedName === '_Base_Jqhtml_Component') {
+            normalizedName = 'Jqhtml_Component';
+        }
+        const template = component_templates.get(normalizedName);
+        if (template) {
+            return template;
+        }
+        // Walk up the prototype chain
+        currentClass = Object.getPrototypeOf(currentClass);
+    }
+    return DEFAULT_TEMPLATE;
+}
+/**
+ * Create a component instance by name
+ * If no component class is registered, uses the default Component class
+ */
+function create_component(name, element, args = {}) {
+    const ComponentClass = get_component_class(name) || Jqhtml_Component;
+    return new ComponentClass(element, args);
+}
+/**
+ * Check if a component is registered
+ */
+function has_component(name) {
+    return component_classes.has(name);
+}
+/**
+ * Get all registered component names
+ */
+function get_component_names() {
+    return Array.from(component_classes.keys());
+}
+/**
+ * Get all registered template names
+ */
+function get_registered_templates() {
+    return Array.from(component_templates.keys());
+}
+/**
+ * List all registered components with their template status
+ */
+function list_components() {
+    const result = {};
+    // Add all classes
+    for (const name of component_classes.keys()) {
+        result[name] = {
+            has_class: true,
+            has_template: component_templates.has(name)
+        };
+    }
+    // Add any templates without classes
+    for (const name of component_templates.keys()) {
+        if (!result[name]) {
+            result[name] = {
+                has_class: false,
+                has_template: true
+            };
+        }
+    }
+    return result;
+}
+
+/**
+ * JQHTML v2 Instruction Processor
+ *
+ * Processes instruction arrays generated by the parser
+ * Uses v1's HTML string building approach for performance
+ */
+// Base36 incrementing CID generator
+// Format: aa, ab, ..., az, a0, ..., a9, ba, ..., zz, z9, aaa, ...
+// First digit must always be a letter (a-z), subsequent digits can be a-z0-9
+let _cid_increment = 'aa';
+function uid() {
+    const current = _cid_increment;
+    // Increment for next use
+    const chars = _cid_increment.split('');
+    let carry = true;
+    // Process from right to left
+    for (let i = chars.length - 1; i >= 0 && carry; i--) {
+        const char = chars[i];
+        if (char >= 'a' && char < 'z') {
+            // a-y increments to next letter
+            chars[i] = String.fromCharCode(char.charCodeAt(0) + 1);
+            carry = false;
+        }
+        else if (char === 'z') {
+            // z transitions to '0' (start of numeric range)
+            chars[i] = '0';
+            carry = false;
+        }
+        else if (char >= '0' && char < '9') {
+            // 0-8 increments to next number
+            chars[i] = String.fromCharCode(char.charCodeAt(0) + 1);
+            carry = false;
+        }
+        else if (char === '9') {
+            // 9 wraps back to 'a' with carry
+            chars[i] = 'a';
+            carry = true;
+        }
+    }
+    // If we still have carry after processing all digits, we need more digits
+    if (carry) {
+        chars.unshift('a'); // Prepend new 'a' (first digit must be letter)
+    }
+    // Ensure first digit is never numeric
+    if (chars[0] >= '0' && chars[0] <= '9') {
+        chars[0] = 'a';
+        chars.unshift('a');
+    }
+    _cid_increment = chars.join('');
+    return current;
+}
+/**
+ * Process an array of instructions and append to target
+ * Uses v1 approach: build HTML string, set innerHTML, then initialize
+ */
+function process_instructions(instructions, target, context, slots) {
+    // Build HTML string and track elements that need initialization
+    const html = [];
+    const tagElements = {};
+    const components = {};
+    // Process all instructions to build HTML
+    for (const instruction of instructions) {
+        process_instruction_to_html(instruction, html, tagElements, components, context, slots);
+    }
+    // Set innerHTML once - this is the performance win
+    // Use native innerHTML for better performance
+    target[0].innerHTML = html.join('');
+    // Second pass: initialize special attributes and events
+    for (const [tid, tagData] of Object.entries(tagElements)) {
+        // Use native querySelector for better performance
+        const el = target[0].querySelector(`[data-tid="${tid}"]`);
+        if (el) {
+            const element = $(el);
+            el.removeAttribute('data-tid');
+            apply_attributes(element, tagData.attrs, context);
+        }
+    }
+    // Third pass: initialize and boot components in parallel
+    // Like v1, all sibling components at this level boot simultaneously
+    // DO NOT await - let children boot in background while parent continues
+    for (const [cid, compData] of Object.entries(components)) {
+        // Use native querySelector for better performance
+        const el = target[0].querySelector(`[data-cid="${cid}"]`);
+        if (el) {
+            const element = $(el);
+            el.removeAttribute('data-cid');
+            // Boot this component (which will render and boot its children recursively)
+            // Fire and forget - don't wait for boot to complete
+            initialize_component(element, compData);
+        }
+    }
+}
+/**
+ * Process a single instruction into HTML
+ */
+function process_instruction_to_html(instruction, html, tagElements, components, context, slots) {
+    if (typeof instruction === 'string') {
+        // Raw HTML/text - no escaping, as requested
+        html.push(instruction);
+    }
+    else if ('tag' in instruction) {
+        // HTML tag
+        process_tag_to_html(instruction, html, tagElements, components, context);
+    }
+    else if ('comp' in instruction) {
+        // Component
+        process_component_to_html(instruction, html, components, context);
+    }
+    else if ('slot' in instruction) {
+        // Slot content
+        process_slot_to_html(instruction, html, tagElements, components, context, slots);
+    }
+    else if ('rawtag' in instruction) {
+        // Raw content tag (textarea, pre)
+        process_rawtag_to_html(instruction, html);
+    }
+}
+/**
+ * Process a tag instruction to HTML
+ */
+function process_tag_to_html(instruction, html, tagElements, components, context) {
+    const [tagName, attrs, selfClosing] = instruction.tag;
+    // Check if we need to track this element for second pass
+    const needsTracking = Object.keys(attrs).some(key => key === '$sid' || key.startsWith('$') || key.startsWith('@') ||
+        key.startsWith('on') ||
+        key.startsWith('data-bind-') || key.startsWith('data-__-on-'));
+    // Start building tag
+    html.push(`<${tagName}`);
+    // Add tracking ID if needed
+    let tid = null;
+    if (needsTracking) {
+        tid = uid();
+        html.push(` data-tid="${tid}"`);
+        tagElements[tid] = { attrs, context };
+    }
+    // Add simple string/numeric attributes directly
+    for (const [key, value] of Object.entries(attrs)) {
+        if (!key.startsWith('$') && !key.startsWith('on') && !key.startsWith('@') &&
+            !key.startsWith('data-bind-') && !key.startsWith('data-__-on-') &&
+            (typeof value === 'string' || typeof value === 'number')) {
+            if (key === 'id' && tid) {
+                // Special handling for id attribute - scope to parent component's _cid
+                // This is for regular id="foo" attributes that need scoping (rare case)
+                // Most scoping happens via $sid attribute which becomes data-sid
+                // Don't double-scope if already scoped (contains :)
+                if (typeof value === 'string' && value.includes(':')) {
+                    html.push(` id="${value}"`);
+                }
+                else {
+                    html.push(` id="${value}:${context._cid}"`);
+                }
+            }
+            else {
+                html.push(` ${key}="${value}"`);
+            }
+        }
+    }
+    // Close opening tag
+    if (selfClosing) {
+        html.push(' />');
+    }
+    else {
+        html.push('>');
+    }
+}
+/**
+ * Process a component instruction to HTML
+ */
+function process_component_to_html(instruction, html, components, context) {
+    const [componentName, props, contentOrSlots] = instruction.comp;
+    // Determine if third parameter is a function (default content) or object (named slots)
+    let contentFn;
+    let slots;
+    if (contentOrSlots) {
+        if (typeof contentOrSlots === 'function') {
+            // Single function = default content
+            contentFn = contentOrSlots;
+        }
+        else if (typeof contentOrSlots === 'object') {
+            // Object = named slots
+            slots = contentOrSlots;
+        }
+    }
+    // Generate unique ID for this component
+    const cid = uid();
+    // Get component class (or default) and template to determine tag name
+    get_component_class(componentName) || Jqhtml_Component;
+    const template = get_template(componentName);
+    // Get tag name with precedence: _tag (invocation) > tag (template) > 'div'
+    const tagName = props._tag || template.tag || 'div';
+    // Create element with tracking ID
+    html.push(`<${tagName} data-cid="${cid}"`);
+    // Handle id attributes for components
+    // The compiled code always generates both 'id' (scoped) and 'data-sid' (base) for $sid attributes
+    // We just pass through what the compiler gave us - NEVER regenerate
+    if (props['data-sid']) {
+        const baseId = props['data-sid'];
+        // The compiled code ALWAYS sets props['id'] with the correct scoped value
+        // Just use it directly - it already has the correct parent _cid baked in
+        html.push(` id="${props['id']}" data-sid="${baseId}"`);
+    }
+    // Regular id passes through unchanged
+    else if (props['id']) {
+        html.push(` id="${props['id']}"`);
+    }
+    // Close tag - other attributes will be added during initialization
+    html.push('></' + tagName + '>');
+    // Track for initialization
+    components[cid] = {
+        name: componentName,
+        props,
+        contentFn,
+        slots,
+        context
+    };
+}
+/**
+ * Process a slot instruction to HTML
+ */
+function process_slot_to_html(instruction, html, tagElements, components, context, parentSlots) {
+    const [slotName] = instruction.slot;
+    // Check if parent provided content for this slot
+    if (parentSlots && slotName in parentSlots) {
+        const parentSlot = parentSlots[slotName];
+        const [, slotProps, contentFn] = parentSlot.slot;
+        // Execute slot content function with props
+        const [content] = contentFn.call(context, slotProps);
+        // Process the content to HTML
+        for (const item of content) {
+            process_instruction_to_html(item, html, tagElements, components, context);
+        }
+    }
+    else if (slotName === 'default' && instruction.slot[2]) {
+        // Use default slot content
+        const [, , defaultFn] = instruction.slot;
+        const [content] = defaultFn.call(context, {});
+        for (const item of content) {
+            process_instruction_to_html(item, html, tagElements, components, context);
+        }
+    }
+}
+/**
+ * Process a rawtag instruction to HTML
+ *
+ * Raw content tags (textarea, pre) preserve exact whitespace without collapsing.
+ * Content is inserted as textContent (not innerHTML) to prevent any interpretation.
+ */
+function process_rawtag_to_html(instruction, html) {
+    const [tagName, attrs, rawContent] = instruction.rawtag;
+    // Build opening tag
+    html.push(`<${tagName}`);
+    // Add attributes
+    for (const [key, value] of Object.entries(attrs)) {
+        if (typeof value === 'string' || typeof value === 'number') {
+            const escaped_value = String(value).replace(/"/g, '&quot;');
+            html.push(` ${key}="${escaped_value}"`);
+        }
+        else if (typeof value === 'boolean' && value) {
+            // Boolean attribute (e.g., disabled, readonly)
+            html.push(` ${key}`);
+        }
+    }
+    html.push('>');
+    // Add raw content - escape HTML entities but preserve whitespace
+    const escaped_content = rawContent
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    html.push(escaped_content);
+    // Close tag
+    html.push(`</${tagName}>`);
+}
+/**
+ * Apply attributes with special handling to a DOM element
+ *
+ * This function processes various attribute types and applies them to the element:
+ * - $sid: Creates component-scoped IDs (handled elsewhere in HTML generation)
+ * - $*: Stored via jQuery .data() only (added to context.args for components)
+ * - @*: Event handlers with automatic preventDefault and context binding
+ * - on*: Standard event handlers with context binding
+ * - data-*: Data attributes (stored both as attributes and via .data(), added to context.args)
+ * - class: Merges with existing classes (no duplicates)
+ * - style: Merges with existing styles (rule by rule, new values override)
+ * - All other attributes: Applied directly to the element as standard HTML attributes
+ *
+ * For class and style attributes, merge logic is applied:
+ * - class: Splits both existing and new, combines without duplicates
+ * - style: Parses both into property maps, merges (new overrides), rebuilds
+ *
+ * Regular HTML attributes (href, title, role, etc.) are applied directly to the DOM
+ * and are NOT converted to data attributes or added to component args.
+ */
+function apply_attributes(element, attrs, context) {
+    for (const [key, value] of Object.entries(attrs)) {
+        if (key === '$sid' || key === 'id') {
+            // Already handled in HTML generation
+            continue;
+        }
+        else if (key.startsWith('$')) {
+            // $ attributes: store via jQuery .data() only
+            // Does NOT create data-* attributes on the DOM element
+            const dataKey = key.substring(1);
+            element.data(dataKey, value);
+            // } else if (key.startsWith('@')) {
+            //   // Event handler with @ prefix (e.g., @click)
+            //   const eventName = key.substring(1);  // Remove @ to get 'click'
+            //   if (typeof value === 'function') {
+            //     element.on(eventName, function(e: any) {
+            //       e.preventDefault();  // Auto-preventDefault as per JQHTML design
+            //       // Bind 'this' to the component context and call the function
+            //       value.bind(context)(e, element);
+            //     });
+            //   } else {
+            //     console.warn("(JQHTML) Tried to assign a non function to @ event handler "+key)
+            //   }
+        }
+        else if (key.startsWith('data-__-on-')) {
+            // Event handler
+            const eventName = key.substring(11); // 'data-__-on-'.length = 11
+            if (typeof value === 'function') {
+                element.on(eventName, function (e) {
+                    value.bind(context)(e, element);
+                });
+            }
+            else {
+                console.warn("(JQHTML) Tried to assign a non function to on event handler " + key);
+            }
+        }
+        else if (key.startsWith('on')) {
+            // Event handler
+            const eventName = key.substring(2);
+            if (typeof value === 'function') {
+                element.on(eventName, function (e) {
+                    value.bind(context)(e, element);
+                });
+            }
+            else {
+                console.warn("(JQHTML) Tried to assign a non function to on event handler " + key);
+            }
+        }
+        else if (key.startsWith('data-')) {
+            // Data attributes - go into DOM
+            const attrValue = typeof value === "string" ? value.trim() : value;
+            element.attr(key, attrValue);
+            // Get version without 'data-' prefix
+            const dataKey = key.substring(5);
+            // Always set element.data
+            element.data(dataKey, value);
+        }
+        else if (key === 'class') {
+            // Handle class attribute with merge logic
+            const existingClasses = element.attr('class');
+            // Debug logging
+            if (window.jqhtml?.debug?.enabled) {
+                console.log(`[InstructionProcessor] Merging class attribute:`, {
+                    existing: existingClasses,
+                    new: value
+                });
+            }
+            if (!existingClasses) {
+                // No existing classes - set directly
+                const attrValue = typeof value === "string" ? value.trim() : value;
+                element.attr('class', attrValue);
+            }
+            else {
+                // Merge classes - split and add if not present
+                const existing = existingClasses.split(/\s+/).filter(c => c);
+                const newClasses = String(value).split(/\s+/).filter(c => c);
+                for (const newClass of newClasses) {
+                    if (!existing.includes(newClass)) {
+                        existing.push(newClass);
+                    }
+                }
+                element.attr('class', existing.join(' '));
+            }
+            // Debug logging result
+            if (window.jqhtml?.debug?.enabled) {
+                console.log(`[InstructionProcessor] Class after merge:`, element.attr('class'));
+            }
+        }
+        else if (key === 'style') {
+            // Handle style attribute with merge logic
+            const existingStyle = element.attr('style');
+            if (!existingStyle) {
+                // No existing style - set directly
+                const attrValue = typeof value === "string" ? value.trim() : value;
+                element.attr('style', attrValue);
+            }
+            else {
+                // Merge styles rule by rule
+                // Parse existing styles into map
+                const styleMap = {};
+                existingStyle.split(';').forEach(rule => {
+                    const [prop, val] = rule.split(':').map(s => s.trim());
+                    if (prop && val) {
+                        styleMap[prop] = val;
+                    }
+                });
+                // Parse and merge new styles
+                String(value).split(';').forEach(rule => {
+                    const [prop, val] = rule.split(':').map(s => s.trim());
+                    if (prop && val) {
+                        styleMap[prop] = val; // Override existing or add new
+                    }
+                });
+                // Rebuild style string
+                const mergedStyle = Object.entries(styleMap)
+                    .map(([prop, val]) => `${prop}: ${val}`)
+                    .join('; ');
+                element.attr('style', mergedStyle);
+            }
+        }
+        else {
+            // Regular HTML attributes - apply directly to the element
+            // These do NOT become data attributes or go into context.args
+            // Examples: href, title, role, aria-*, tabindex, etc.
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                const attrValue = typeof value === "string" ? value.trim() : String(value);
+                element.attr(key, attrValue);
+            }
+            else if (typeof value === 'object') {
+                // Complex values can't be DOM attributes, store as jQuery data only
+                console.warn(`(JQHTML) Unexpected value for '${key}' on`, element);
+                // element.data(key, value);
+            }
+        }
+    }
+}
+/**
+ * Initialize a component on a DOM element
+ *
+ * This function sets up a component instance on the given element by:
+ * 1. Building the component's CSS classes (component name + Jqhtml_Component)
+ * 2. Applying attributes from Define tag (template.defaultAttributes) first
+ * 3. Applying attributes from invocation (props) second, which override Define attributes
+ * 4. Creating the component instance
+ *
+ * Attribute handling rules:
+ * - 'as': Determines tag name (handled in process_component_to_html)
+ * - 'class': Merged from both Define and invocation
+ * - 'style': Merged with rule-by-rule precedence (invocation wins conflicts)
+ * - '$*' and 'data-*': Become data attributes and component args
+ * - '@*': Event handlers (only allowed in invocation, not Define)
+ * - All other attributes: Applied directly to DOM element
+ */
+async function initialize_component(element, compData) {
+    const { name, props, contentFn, slots, context } = compData;
+    // Get component class (use default Jqhtml_Component if not registered)
+    const ComponentClass = get_component_class(name) || Jqhtml_Component;
+    // Apply invocation attributes to the element
+    // The component constructor will handle defaultAttributes
+    // Filter out internal props that start with underscore
+    const invocationAttrs = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (!key.startsWith('_')) {
+            invocationAttrs[key] = value;
+        }
+    }
+    // Debug logging
+    if (window.jqhtml?.debug?.enabled) {
+        console.log(`[InstructionProcessor] Applying invocation attributes for ${name}:`, invocationAttrs);
+    }
+    // Apply invocation attributes (component constructor will apply defaultAttributes first)
+    apply_attributes(element, invocationAttrs, context);
+    // Component will set its own data-cid during construction
+    // No need to add any tracking attributes here
+    // Prepare options for component constructor
+    // Only pass the content function - all other attributes are already on the DOM
+    const options = {};
+    if (contentFn) {
+        options._innerhtml_function = contentFn;
+    }
+    // Pass named slots if provided
+    if (slots) {
+        options._slots = slots;
+    }
+    // Always pass _component_name when component name differs from class name
+    // This happens when:
+    // 1. No class registered for component (uses Jqhtml_Component)
+    // 2. Class inherited from parent via extends chain (uses parent class but child template)
+    if (ComponentClass.name !== name) {
+        options._component_name = name;
+    }
+    // Create component instance - element first, then options
+    const instance = new ComponentClass(element, options);
+    // Set the instantiator (the component that rendered this one in their template)
+    instance._instantiator = context;
+    // Boot the component immediately - this runs its full lifecycle
+    await instance._boot();
+}
+/**
+ * Utility to extract slots from instructions
+ */
+function extract_slots(instructions) {
+    const slots = {};
+    for (const instruction of instructions) {
+        if (typeof instruction === 'object' && 'slot' in instruction) {
+            const [name] = instruction.slot;
+            slots[name] = instruction;
+        }
+    }
+    return slots;
+}
+
+/**
+ * JQHTML Debug Module
+ *
+ * Provides comprehensive debugging capabilities for JQHTML components
+ */
+// Global debug state
+let performanceMetrics = new Map();
+/**
+ * Development warning helper
+ * Warnings are suppressed in production builds or when JQHTML_SUPPRESS_WARNINGS is set
+ */
+function devWarn(message) {
+    // Check if warnings are suppressed
+    if (typeof window !== 'undefined' && window.JQHTML_SUPPRESS_WARNINGS) {
+        return;
+    }
+    // Check if in production mode
+    if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production') {
+        return;
+    }
+    console.warn(`[JQHTML Dev Warning] ${message}`);
+}
+// Get global jqhtml object
+function getJqhtml$1() {
+    if (typeof window !== 'undefined' && window.jqhtml) {
+        return window.jqhtml;
+    }
+    // Fallback: try to get from global if available
+    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 debug features. ' +
+        'Import and initialize @jqhtml/core before attempting to use debug functionality.');
+}
+// Visual flash effect
+function flashComponent(component, eventType) {
+    const jqhtml = getJqhtml$1();
+    if (!jqhtml?.debug?.flashComponents)
+        return;
+    const duration = jqhtml.debug.flashDuration || 500;
+    const colors = jqhtml.debug.flashColors || {};
+    const color = colors[eventType] || (eventType === 'create' ? '#3498db' :
+        eventType === 'render' ? '#27ae60' :
+            '#9b59b6');
+    // Store original border
+    const originalBorder = component.$.css('border');
+    // Apply flash border
+    component.$.css({
+        'border': `2px solid ${color}`,
+        'transition': `border ${duration}ms ease-out`
+    });
+    // Remove after duration
+    setTimeout(() => {
+        component.$.css('border', originalBorder || '');
+    }, duration);
+}
+// Log lifecycle event
+function logLifecycle(component, phase, status) {
+    const jqhtml = getJqhtml$1();
+    if (!jqhtml?.debug)
+        return;
+    const shouldLog = jqhtml.debug.logFullLifecycle ||
+        (jqhtml.debug.logCreationReady && (phase === 'create' || phase === 'ready'));
+    if (!shouldLog)
+        return;
+    const componentName = component.constructor.name;
+    const timestamp = new Date().toISOString();
+    const prefix = `[JQHTML ${timestamp}]`;
+    if (status === 'start') {
+        console.log(`${prefix} ${componentName}#${component._cid} → ${phase} starting...`);
+        // Start performance tracking
+        if (jqhtml.debug.profilePerformance) {
+            performanceMetrics.set(`${component._cid}_${phase}`, Date.now());
+        }
+    }
+    else {
+        let message = `${prefix} ${componentName}#${component._cid} ✓ ${phase} complete`;
+        // Add performance data
+        if (jqhtml.debug.profilePerformance) {
+            const startTime = performanceMetrics.get(`${component._cid}_${phase}`);
+            if (startTime) {
+                const duration = Date.now() - startTime;
+                message += ` (${duration}ms)`;
+                // Highlight slow renders
+                if (phase === 'render' && jqhtml.debug.highlightSlowRenders &&
+                    duration > jqhtml.debug.highlightSlowRenders) {
+                    console.warn(`${prefix} SLOW RENDER: ${componentName}#${component._cid} took ${duration}ms`);
+                    component.$.css('outline', '2px dashed red');
+                }
+            }
+        }
+        console.log(message);
+        // Visual feedback
+        if (jqhtml.debug.flashComponents && (phase === 'create' || phase === 'render' || phase === 'ready')) {
+            flashComponent(component, phase);
+        }
+    }
+    // Update component tree if enabled
+    if (jqhtml.debug.showComponentTree) {
+        updateComponentTree();
+    }
+}
+// Apply delays based on lifecycle phase
+function applyDebugDelay(phase) {
+    const jqhtml = getJqhtml$1();
+    if (!jqhtml?.debug)
+        return;
+    let delayMs = 0;
+    switch (phase) {
+        case 'component':
+            delayMs = jqhtml.debug.delayAfterComponent || 0;
+            break;
+        case 'render':
+            delayMs = jqhtml.debug.delayAfterRender || 0;
+            break;
+        case 'rerender':
+            delayMs = jqhtml.debug.delayAfterRerender || 0;
+            break;
+    }
+    if (delayMs > 0) {
+        console.log(`[JQHTML Debug] Applying ${delayMs}ms delay after ${phase}`);
+    }
+}
+// Log instruction processing
+function logInstruction(type, data) {
+    const jqhtml = getJqhtml$1();
+    if (!jqhtml?.debug?.logInstructionProcessing)
+        return;
+    console.log(`[JQHTML Instruction] ${type}:`, data);
+}
+// Log data changes
+function logDataChange(component, property, oldValue, newValue) {
+    const jqhtml = getJqhtml$1();
+    if (!jqhtml?.debug?.traceDataFlow)
+        return;
+    console.log(`[JQHTML Data] ${component.constructor.name}#${component._cid}.data.${property}:`, { old: oldValue, new: newValue });
+}
+// Update component tree visualization
+function updateComponentTree() {
+    // This would update a debug panel if implemented
+    // For now, just log the tree structure periodically
+    console.log('[JQHTML Tree] Component hierarchy updated');
+}
+// Router dispatch logging
+function logDispatch(url, route, params, verbose = false) {
+    const jqhtml = getJqhtml$1();
+    if (!jqhtml?.debug)
+        return;
+    const shouldLog = jqhtml.debug.logDispatch || jqhtml.debug.logDispatchVerbose;
+    if (!shouldLog)
+        return;
+    const isVerbose = jqhtml.debug.logDispatchVerbose || verbose;
+    if (isVerbose) {
+        console.group(`[JQHTML Router] Dispatching: ${url}`);
+        console.log('Matched route:', route);
+        console.log('Extracted params:', params);
+        console.log('Route component:', route.component);
+        console.log('Route layout:', route.layout);
+        console.log('Route meta:', route.meta);
+        console.groupEnd();
+    }
+    else {
+        console.log(`[JQHTML Router] ${url} → ${route.component} (params: ${JSON.stringify(params)})`);
+    }
+}
+// Check if sequential processing is enabled
+function isSequentialProcessing() {
+    const jqhtml = getJqhtml$1();
+    return jqhtml?.debug?.sequentialProcessing || false;
+}
+// Error handling with break on error
+function handleComponentError(component, phase, error) {
+    const jqhtml = getJqhtml$1();
+    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
+    }
+}
+// Additional debug suggestions that could be implemented:
+// 
+// 1. Component Inspector - Click on any component to see its data/args/state
+// 2. Time Travel Debugging - Record state changes and replay them
+// 3. Network Request Tracking - Log all AJAX calls made during load()
+// 4. Memory Leak Detection - Track component creation/destruction
+// 5. Template Compilation Debugging - Show compiled template functions
+// 6. Event Flow Visualization - Show event bubbling through components
+// 7. Dependency Graph - Show which components depend on which data
+// 8. Hot Reload Support - Reload components without losing state
+// 9. Performance Budgets - Warn when components exceed size/time limits
+// 10. Accessibility Auditing - Check for missing ARIA attributes
+
+/**
+ * JQHTML v2 Component Base Class
+ *
+ * Core component implementation following v2 specification:
+ * - 5-stage lifecycle coordinated by LifecycleManager
+ * - Direct jQuery manipulation (no virtual DOM)
+ * - Scoped IDs using _cid pattern
+ * - Event emission and CSS class hierarchy
+ */
+class Jqhtml_Component {
+    constructor(element, args = {}) {
+        this._ready_state = 0; // 0=created, 1=init, 2=loaded, 3=rendered, 4=ready
+        this._instantiator = null; // Component that instantiated this one
+        this._dom_parent = null; // Closest component in DOM tree (for lifecycle)
+        this._dom_children = new Set(); // Components in DOM subtree (for lifecycle)
+        this._use_dom_fallback = false; // If true, use find() fallback instead of _dom_children optimization
+        this._stopped = false;
+        this._booted = false; // Guard to prevent double boot() calls
+        this._data_before_render = null; // Store data state before initial render
+        this._lifecycle_callbacks = new Map();
+        this._lifecycle_states = new Set(); // Track which lifecycle events have occurred
+        this.__loading = false; // Flag to prevent render() calls during on_load()
+        this._did_first_render = false; // Track if component has rendered at least once
+        this._render_count = 0; // Incremented each time _render() is called, used to detect stale renders
+        this._args_on_last_render = null; // Args snapshot from last render (for reload() comparison)
+        this._data_on_last_render = null; // Data snapshot from last render (for refresh() comparison)
+        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._cid = this._generate_cid();
+        this._lifecycle_manager = LifecycleManager.get_instance();
+        // Create or wrap element
+        if (element) {
+            this.$ = $(element);
+        }
+        else {
+            // Use native createElement for better performance
+            const div = document.createElement('div');
+            this.$ = $(div);
+        }
+        // Extract $ attributes from element and merge with args
+        // $ attributes are stored via jQuery .data() (not as data-* attributes in DOM)
+        const dataAttrs = {};
+        // Get all jQuery .data() values from the element
+        if (this.$.length > 0) {
+            // Get all data via jQuery .data() without arguments (returns all data as object)
+            const allData = this.$.data() || {};
+            for (const key in allData) {
+                // Skip internal attributes
+                if (key !== 'cid' && key !== 'tid' && key !== 'componentName' && key !== 'readyState' &&
+                    key !== '_lifecycleState' && !key.startsWith('_')) {
+                    dataAttrs[key] = allData[key];
+                }
+            }
+        }
+        // Get template to check for defineArgs
+        let template_for_args;
+        if (args._component_name) {
+            template_for_args = get_template(args._component_name);
+        }
+        else {
+            template_for_args = get_template_by_class(this.constructor);
+        }
+        // Merge in order: defineArgs (defaults from Define tag) < dataAttrs < args (invocation overrides)
+        const defineArgs = template_for_args?.defineArgs || {};
+        this.args = { ...defineArgs, ...dataAttrs, ...args };
+        // Attach component to element
+        this.$.data('_component', this);
+        // Apply CSS classes and attributes
+        this._apply_css_classes();
+        this._apply_default_attributes(); // Apply defaultAttributes from template
+        this._set_attributes();
+        // Find DOM parent component (for lifecycle coordination)
+        this._find_dom_parent();
+        // Setup data property with freeze enforcement using Proxy
+        let _data = {};
+        // Helper to create frozen proxy for data object
+        const createDataProxy = (obj) => {
+            return new Proxy(obj, {
+                set: (target, prop, value) => {
+                    if (this.__data_frozen) {
+                        console.error(`[JQHTML] ERROR: Component "${this.component_name()}" attempted to modify this.data.${String(prop)} outside of on_create() or on_load().\n\n` +
+                            `RESTRICTION: this.data can ONLY be modified in:\n` +
+                            `  - on_create() (set initial defaults, synchronous only)\n` +
+                            `  - on_load() (fetch data from APIs, can be async)\n\n` +
+                            `WHY: this.data represents loaded state. Modifying it outside these methods bypasses the framework's render cycle.\n\n` +
+                            `FIX: Modify this.data in on_create() (for defaults) or on_load() (for fetched data):\n` +
+                            `  ❌ In on_ready(): this.data.${String(prop)} = ${JSON.stringify(value)};\n` +
+                            `  ✅ In on_create(): this.data.${String(prop)} = ${JSON.stringify(value)}; // Set default\n` +
+                            `  ✅ In on_load(): this.data.${String(prop)} = ${JSON.stringify(value)}; // Fetch from API\n` +
+                            `  ✅ For component state: this.args.${String(prop)} = ${JSON.stringify(value)}; (accessible in on_load)`);
+                        throw new Error(`[JQHTML] Cannot modify this.data.${String(prop)} outside of on_create() or on_load(). ` +
+                            `this.data is frozen after on_create() and unfrozen only during on_load().`);
+                    }
+                    target[prop] = value;
+                    return true;
+                },
+                deleteProperty: (target, prop) => {
+                    if (this.__data_frozen) {
+                        console.error(`[JQHTML] ERROR: Component "${this.component_name()}" attempted to delete this.data.${String(prop)} outside of on_create() or on_load().\n\n` +
+                            `RESTRICTION: this.data can ONLY be modified in:\n` +
+                            `  - on_create() (set initial defaults, synchronous only)\n` +
+                            `  - on_load() (fetch data from APIs, can be async)\n\n` +
+                            `WHY: this.data represents loaded state. Modifying it outside these methods bypasses the framework's render cycle.`);
+                        throw new Error(`[JQHTML] Cannot delete this.data.${String(prop)} outside of on_create() or on_load(). ` +
+                            `this.data is frozen after on_create() and unfrozen only during on_load().`);
+                    }
+                    delete target[prop];
+                    return true;
+                }
+            });
+        };
+        // Create initial proxied data object
+        _data = createDataProxy({});
+        Object.defineProperty(this, 'data', {
+            get: () => _data,
+            set: (value) => {
+                if (this.__data_frozen) {
+                    console.error(`[JQHTML] ERROR: Component "${this.component_name()}" attempted to reassign this.data outside of on_create() or on_load().\n\n` +
+                        `RESTRICTION: this.data can ONLY be modified in:\n` +
+                        `  - on_create() (set initial defaults, synchronous only)\n` +
+                        `  - on_load() (fetch data from APIs, can be async)\n\n` +
+                        `WHY: this.data represents loaded state. Modifying it outside these methods bypasses the framework's render cycle.\n\n` +
+                        `FIX: Modify this.data in on_create() (for defaults) or on_load() (for fetched data):\n` +
+                        `  ❌ In on_ready(): this.data = {...};\n` +
+                        `  ✅ In on_create(): this.data.count = 0; // Set default\n` +
+                        `  ✅ In on_load(): this.data = await fetch(...); // Fetch from API\n` +
+                        `  ✅ For component state: this.args.count = 5; (accessible in on_load)`);
+                    throw new Error(`[JQHTML] Cannot reassign this.data outside of on_create() or on_load(). ` +
+                        `this.data is frozen after on_create() and unfrozen only during on_load().`);
+                }
+                // When setting, wrap the new value in a proxy too
+                _data = createDataProxy(value);
+            },
+            enumerable: true,
+            configurable: false
+        });
+        // Initialize this.state as an empty object (convention for arbitrary component state)
+        // No special meaning to framework - mutable anywhere, not cached, not frozen
+        this.state = {};
+        this._log_lifecycle('construct', 'complete');
+    }
+    /**
+     * Boot - Start the full component lifecycle
+     * Called immediately after construction by instruction processor
+     */
+    /**
+     * Internal boot method - starts component lifecycle
+     * @private
+     */
+    async _boot() {
+        // Guard: prevent double boot() calls
+        if (this._booted)
+            return;
+        this._booted = true;
+        await this._lifecycle_manager.boot_component(this);
+    }
+    // -------------------------------------------------------------------------
+    // Lifecycle Methods (called by LifecycleManager)
+    // -------------------------------------------------------------------------
+    /**
+     * Internal render phase - Create DOM structure
+     * Called top-down (parent before children) when part of lifecycle
+     * This is an internal method - users should call render() instead
+     *
+     * @param id Optional scoped ID - if provided, delegates to child component's _render()
+     * @returns The current _render_count after incrementing (used to detect stale renders)
+     * @private
+     */
+    _render(id = null) {
+        // Increment render count to track this specific render
+        this._render_count++;
+        const current_render_id = this._render_count;
+        if (this._stopped)
+            return current_render_id;
+        // If id provided, delegate to child component
+        if (id) {
+            // First check if element with scoped ID exists
+            const $element = this.$sid(id);
+            if ($element.length === 0) {
+                throw new Error(`[JQHTML] render("${id}") - no such id.\n` +
+                    `Component "${this.component_name()}" has no child element with $sid="${id}".`);
+            }
+            // Element exists, check if it's a component
+            const child = $element.data('_component');
+            if (!child) {
+                throw new Error(`[JQHTML] render("${id}") - element is not a component or does not have $redrawable attribute set.\n` +
+                    `Element with $sid="${id}" exists but is not initialized as a component.\n` +
+                    `Add $redrawable attribute or make it a proper component.`);
+            }
+            return child._render();
+        }
+        // Prevent render() calls during on_load()
+        if (this.__loading) {
+            throw new Error(`[JQHTML] Component "${this.component_name()}" attempted to call render() during on_load().\n` +
+                `on_load() should ONLY modify this.data. DOM updates happen automatically after on_load() completes.\n\n` +
+                `Fix: Remove the this.render() call from on_load().\n` +
+                `The framework will automatically re-render if this.data changes during on_load().`);
+        }
+        this._log_lifecycle('render', 'start');
+        // Determine child-finding strategy: If component is off-DOM, children can't register
+        // via _find_dom_parent() (no parent in DOM to find), so we'll need find() fallback later.
+        // If attached to DOM, children register normally and we can use the fast _dom_children path.
+        // Check is cheap ($.contains uses native Node.contains, ~500K ops/sec).
+        if (!$.contains(document.documentElement, this.$[0])) {
+            this._use_dom_fallback = true;
+        }
+        else {
+            this._use_dom_fallback = false;
+        }
+        // If this is not the first render, stop child components and clear DOM
+        if (this._did_first_render) {
+            // Stop all child components before clearing DOM
+            this.$.find('.Component').each(function () {
+                const child = $(this).data('_component');
+                if (child && !child._stopped) {
+                    child._stop(); // Stop just the component, DOM will be cleared next
+                }
+            });
+            // Clear the DOM
+            this.$[0].innerHTML = '';
+        }
+        else {
+            this._did_first_render = true;
+        }
+        // Remove _Component_Stopped class if present (allows re-render after stop)
+        this.$.removeClass('_Component_Stopped');
+        // Capture data state before first render for comparison later
+        if (this._data_before_render === null) {
+            this._data_before_render = JSON.stringify(this.data);
+        }
+        // Clear DOM children tracking - they're destroyed by innerHTML = '' anyway
+        this._dom_children.clear();
+        // Get template and render it
+        let template_def;
+        // If we have a component name, try looking up by name first (for unregistered components)
+        if (this.args._component_name) {
+            template_def = get_template(this.args._component_name);
+        }
+        else {
+            // Otherwise look up by class
+            template_def = get_template_by_class(this.constructor);
+        }
+        if (template_def && template_def.render) {
+            // Create jqhtml utilities object
+            const jqhtml = {
+                escape_html: (str) => {
+                    const div = document.createElement('div');
+                    div.textContent = String(str);
+                    return div.innerHTML;
+                }
+            };
+            // Execute template function
+            // Commented out debug logging
+            // console.log('[Component] About to call render, this:', this);
+            // console.log('[Component] this.constructor.name:', this.constructor.name);
+            // console.log('[Component] this.data:', this.data);
+            // console.log('[Component] this.args:', this.args);
+            // Create content function that handles both default content and named slots
+            const createContentFunction = () => {
+                const defaultContentFn = this.args._innerhtml_function;
+                const slotsObj = this.args._slots;
+                // Return a function that handles both slot names and default content
+                return (slotName, ...slotArgs) => {
+                    // If slot name provided and slots object exists, try to use named slot
+                    if (slotName && slotsObj && slotsObj[slotName]) {
+                        // Call the slot function - it returns [instructions, context]
+                        return slotsObj[slotName](...slotArgs);
+                    }
+                    // If slot name provided but not found, return empty
+                    else if (slotName) {
+                        return '';
+                    }
+                    // No slot name = default content
+                    else if (defaultContentFn) {
+                        return defaultContentFn(this);
+                    }
+                    // No content at all
+                    else {
+                        return '';
+                    }
+                };
+            };
+            const contentFunction = createContentFunction();
+            let [instructions, context] = template_def.render.bind(this)(this.data, this.args, contentFunction, // Content function with slot support
+            jqhtml // Utilities object
+            );
+            // Check for template inheritance (slot-only OR explicit extends)
+            // If instructions is {_slots: {...}}, find parent template and invoke it
+            if (instructions && typeof instructions === 'object' && instructions._slots && !Array.isArray(instructions)) {
+                const componentName = template_def.name || this.args._component_name || this.constructor.name;
+                console.log(`[JQHTML] Slot-only template detected for ${componentName}`);
+                let parentTemplate = null;
+                let parentTemplateName = null;
+                // First check for explicit extends attribute in template metadata
+                if (template_def.extends) {
+                    console.log(`[JQHTML]   Using explicit extends: ${template_def.extends}`);
+                    parentTemplate = get_template(template_def.extends);
+                    parentTemplateName = template_def.extends;
+                }
+                // If no explicit extends, walk the prototype chain to find parent class with template
+                if (!parentTemplate) {
+                    let currentClass = Object.getPrototypeOf(this.constructor);
+                    while (currentClass && currentClass.name !== 'Object' && currentClass.name !== 'Jqhtml_Component') {
+                        const className = currentClass.name;
+                        console.log(`[JQHTML]   Checking parent: ${className}`);
+                        try {
+                            const classTemplate = get_template(className);
+                            if (classTemplate && classTemplate.name !== 'Jqhtml_Component') {
+                                console.log(`[JQHTML]   Found parent template: ${className}`);
+                                parentTemplate = classTemplate;
+                                parentTemplateName = className;
+                                break;
+                            }
+                        }
+                        catch (error) {
+                            console.warn(`[JQHTML] Error finding parent template ${className}:`, error);
+                        }
+                        currentClass = Object.getPrototypeOf(currentClass);
+                    }
+                }
+                // If we found a parent template, invoke it with child's slots
+                if (parentTemplate) {
+                    try {
+                        // Create a content function that invokes child slots
+                        // When parent calls content('slotName'), it invokes the child's slot function
+                        const childSlots = instructions._slots;
+                        const contentFunction = (slotName, data) => {
+                            if (childSlots[slotName] && typeof childSlots[slotName] === 'function') {
+                                // Invoke the slot function with data parameter
+                                const [slotInstructions, slotContext] = childSlots[slotName](data);
+                                // Return in render function format: [instructions, context]
+                                // The template expression handler expects this format
+                                return [slotInstructions, slotContext];
+                            }
+                            // Slot not found, return empty
+                            return '';
+                        };
+                        // Invoke parent template with child's slots as content function
+                        const [parentInstructions, parentContext] = parentTemplate.render.bind(this)(this.data, this.args, contentFunction, // Pass content function that invokes child slots
+                        jqhtml);
+                        console.log(`[JQHTML]   Parent template invoked successfully`);
+                        instructions = parentInstructions;
+                        context = parentContext;
+                    }
+                    catch (error) {
+                        console.warn(`[JQHTML] Error invoking parent template ${parentTemplateName}:`, error);
+                        instructions = [];
+                    }
+                }
+                else {
+                    console.warn(`[JQHTML] No parent template found for ${this.constructor.name}, rendering empty`);
+                    instructions = [];
+                }
+            }
+            // Flatten any nested content instructions before processing
+            // Instructions may contain ['_content', [...]] markers from content() calls
+            const flattenedInstructions = this._flatten_instructions(instructions);
+            // Process instructions to generate DOM
+            // This kicks off child component boots but doesn't wait for them
+            process_instructions(flattenedInstructions, this.$, this);
+        }
+        // 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
+        // This ensures event handlers are always re-attached after DOM updates
+        const renderResult = this.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.`);
+        }
+        // Emit lifecycle event
+        this.trigger('render');
+        // Apply debug delay after render
+        const isRerender = this._ready_state >= 3; // Already rendered once
+        applyDebugDelay(isRerender ? 'rerender' : 'render');
+        // Store args snapshot for reload() comparison (skip if non-serializable)
+        try {
+            this._args_on_last_render = JSON.parse(JSON.stringify(this.args));
+        }
+        catch (error) {
+            // Args contain circular references - skip snapshot (reload comparison will be disabled)
+            this._args_on_last_render = null;
+        }
+        // Store data snapshot for refresh() comparison
+        this._data_on_last_render = JSON.stringify(this.data);
+        // Return the render ID so callers can check if this render is still current
+        return current_render_id;
+    }
+    /**
+     * Public render method - re-renders component and completes lifecycle
+     * This is what users should call when they want to update a component.
+     *
+     * Lifecycle sequence:
+     * 1. _render() - Updates DOM synchronously, calls on_render(), fires 'render' event
+     * 2. Async continuation (fire and forget):
+     *    - _wait_for_children_ready() - Waits for all children to reach ready state
+     *    - on_ready() - Calls user's ready hook
+     *    - trigger('ready') - Fires ready event
+     *
+     * Returns immediately after _render() completes - does NOT wait for children
+     */
+    render(id = null) {
+        if (this._stopped)
+            return;
+        // If id provided, delegate to child component
+        if (id) {
+            const $element = this.$sid(id);
+            if ($element.length === 0) {
+                throw new Error(`[JQHTML] render("${id}") - no such id.\n` +
+                    `Component "${this.component_name()}" has no child element with $sid="${id}".`);
+            }
+            const child = $element.data('_component');
+            if (!child) {
+                throw new Error(`[JQHTML] render("${id}") - element is not a component or does not have $redrawable attribute set.\n` +
+                    `Element with $sid="${id}" exists but is not initialized as a component.\n` +
+                    `Add $redrawable attribute or make it a proper component.`);
+            }
+            return child.render();
+        }
+        // Execute render phase synchronously and capture render ID
+        const render_id = this._render();
+        // Fire off async lifecycle completion in background (don't await)
+        (async () => {
+            // Wait for all child components to be ready
+            await this._wait_for_children_ready();
+            // Check if this render is still current before calling on_ready
+            // If _render_count changed, another render happened and we should skip on_ready
+            if (this._render_count !== render_id) {
+                return; // Stale render, don't call on_ready
+            }
+            // Call on_ready hook
+            await this.on_ready();
+            // Trigger ready event
+            await this.trigger('ready');
+        })();
+    }
+    /**
+     * Alias for render() - re-renders component with current data
+     * Provided for API consistency and clarity
+     */
+    redraw(id = null) {
+        return this.render(id);
+    }
+    /**
+     * Create phase - Quick setup, prepare UI
+     * Called bottom-up (children before parent)
+     */
+    async create() {
+        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();
+        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.`);
+            await result; // Still wait for it to avoid breaking existing code
+        }
+        // CACHE READ - Hydrate this.data from cache BEFORE first render
+        // This happens after on_create() but before render, allowing instant first render with cached data
+        const { Load_Coordinator } = await Promise.resolve().then(function () { return loadCoordinator; });
+        const { Jqhtml_Local_Storage } = await Promise.resolve().then(function () { return localStorage$1; });
+        // Check if component implements cache_id() for custom cache key
+        let cache_key = null;
+        let uncacheable_property;
+        if (typeof this.cache_id === 'function') {
+            try {
+                const custom_cache_id = this.cache_id();
+                cache_key = `${this.component_name()}::${String(custom_cache_id)}`;
+            }
+            catch (error) {
+                // cache_id() threw error - disable caching
+                uncacheable_property = 'cache_id()';
+            }
+        }
+        else {
+            // Use standard args-based cache key generation
+            const result = Load_Coordinator.generate_invocation_key(this.component_name(), this.args);
+            cache_key = result.key;
+            uncacheable_property = result.uncacheable_property;
+        }
+        // If cache_key is null, caching disabled
+        if (cache_key === null) {
+            // Set data-nocache attribute for debugging (shows which property prevented caching)
+            if (uncacheable_property) {
+                this.$.attr('data-nocache', uncacheable_property);
+            }
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Cache] Component ${this._cid} (${this.component_name()}) has non-serializable args - caching disabled`, { uncacheable_property });
+            }
+            return; // Skip cache check
+        }
+        if (window.jqhtml?.debug?.verbose) {
+            console.log(`[Cache] Component ${this._cid} (${this.component_name()}) checking cache in create()`, { cache_key, has_cache_key_set: Jqhtml_Local_Storage.has_cache_key() });
+        }
+        const cached_data = Jqhtml_Local_Storage.get(cache_key);
+        if (cached_data !== null) {
+            this.data = cached_data;
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Cache] Component ${this._cid} (${this.component_name()}) hydrated from cache in create()`, { cache_key, data: this.data });
+            }
+        }
+        else {
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Cache] Component ${this._cid} (${this.component_name()}) cache miss in create()`, { cache_key });
+            }
+        }
+        // Snapshot this.data after on_create() completes
+        // This will be restored before each on_load() execution to reset state
+        this.__initial_data_snapshot = JSON.parse(JSON.stringify(this.data));
+        // Freeze this.data after on_create() - only on_load() can modify it now
+        this.__data_frozen = true;
+        this._ready_state = 1;
+        this._update_debug_attrs();
+        this._log_lifecycle('create', 'complete');
+        // Emit lifecycle event
+        this.trigger('create');
+    }
+    /**
+     * Load phase - Fetch data from APIs
+     * Called bottom-up, fully parallel
+     * NO DOM MODIFICATIONS ALLOWED IN THIS PHASE
+     * @private - Internal lifecycle method, not for external use
+     */
+    async _load() {
+        if (this._stopped || this._ready_state >= 2)
+            return;
+        this._log_lifecycle('load', 'start');
+        // Restore this.data to initial state from snapshot (skip on first load)
+        // This ensures on_load() always starts with clean state
+        const is_first_load = this._ready_state < 2;
+        if (!is_first_load && this.__initial_data_snapshot) {
+            this.data = JSON.parse(JSON.stringify(this.__initial_data_snapshot));
+        }
+        // Unfreeze this.data so on_load() can modify it
+        this.__data_frozen = false;
+        // Import coordinator and storage lazily to avoid circular dependency
+        const { Load_Coordinator } = await Promise.resolve().then(function () { return loadCoordinator; });
+        const { Jqhtml_Local_Storage } = await Promise.resolve().then(function () { return localStorage$1; });
+        // Check if component implements cache_id() for custom cache key
+        let cache_key = null;
+        let uncacheable_property;
+        if (typeof this.cache_id === 'function') {
+            try {
+                const custom_cache_id = this.cache_id();
+                cache_key = `${this.component_name()}::${String(custom_cache_id)}`;
+            }
+            catch (error) {
+                // cache_id() threw error - disable caching
+                uncacheable_property = 'cache_id()';
+            }
+        }
+        else {
+            // Use standard args-based cache key generation
+            const result = Load_Coordinator.generate_invocation_key(this.component_name(), this.args);
+            cache_key = result.key;
+            uncacheable_property = result.uncacheable_property;
+        }
+        // If cache_key is null, args are not serializable - skip load deduplication and caching
+        if (cache_key === null) {
+            // Set data-nocache attribute for debugging (shows which property prevented caching)
+            if (uncacheable_property) {
+                this.$.attr('data-nocache', uncacheable_property);
+            }
+            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();
+            this.__data_frozen = true;
+            return;
+        }
+        // Store "before" snapshot for comparison after on_load()
+        const data_before_load = JSON.stringify(this.data);
+        // Check if this component should execute on_load() or wait for existing request
+        const should_execute = Load_Coordinator.should_execute_on_load(this);
+        if (!should_execute) {
+            // This component is a follower - wait for leader to complete
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Load Deduplication] Component ${this._cid} (${this.component_name()}) is a follower, waiting for leader`, { args: this.args });
+            }
+            const coordination_promise = Load_Coordinator.get_coordination_promise(this);
+            if (coordination_promise) {
+                try {
+                    // Wait for leader to complete
+                    await coordination_promise;
+                    // Data has already been copied by coordinator
+                    if (window.jqhtml?.debug?.verbose) {
+                        console.log(`[Load Deduplication] Component ${this._cid} received data from leader`, { data: this.data });
+                    }
+                }
+                catch (error) {
+                    // Leader failed - error will propagate naturally
+                    console.error(`[Load Deduplication] Component ${this._cid} failed due to leader error:`, error);
+                    throw error;
+                }
+            }
+            this._ready_state = 2;
+            this._update_debug_attrs();
+            this._log_lifecycle('load', 'complete (follower)');
+            this.trigger('load');
+            return;
+        }
+        // This component is a leader - execute on_load() normally
+        if (window.jqhtml?.debug?.verbose) {
+            console.log(`[Load Deduplication] Component ${this._cid} (${this.component_name()}) is the leader`, { args: this.args });
+        }
+        // Capture state before on_load() for validation
+        let argsBeforeLoad = null;
+        try {
+            argsBeforeLoad = JSON.stringify(this.args);
+        }
+        catch (error) {
+            // Args contain circular references - skip validation
+        }
+        const propertiesBeforeLoad = new Set(Object.keys(this));
+        // Set loading flag to prevent render() calls during on_load()
+        this.__loading = true;
+        // Create restricted proxy to prevent DOM access during on_load()
+        const restricted_this = new Proxy(this, {
+            get(target, prop) {
+                // Only allow access to this.args and this.data
+                if (prop === 'args' || prop === 'data') {
+                    return target[prop];
+                }
+                // Block everything else
+                console.error(`[JQHTML] ERROR: Component "${target.component_name()}" attempted to access this.${String(prop)} during on_load().\n\n` +
+                    `RESTRICTION: on_load() may ONLY access:\n` +
+                    `  - this.args (read during on_load, modify before/after)\n` +
+                    `  - this.data (read/write)\n\n` +
+                    `WHY: on_load() is for data fetching only. All other component functionality should happen in other lifecycle methods.\n\n` +
+                    `FIX:\n` +
+                    `  - DOM manipulation → use on_render() or on_ready()\n` +
+                    `  - Component methods → call them before/after on_load(), not inside it\n` +
+                    `  - Other properties → restructure code to only use this.args and this.data in on_load()`);
+                throw new Error(`[JQHTML] Cannot access this.${String(prop)} during on_load(). ` +
+                    `on_load() may only access this.args and this.data.`);
+            },
+            set(target, prop, value) {
+                // Only allow setting this.data
+                if (prop === 'data') {
+                    target[prop] = value;
+                    return true;
+                }
+                // Block setting this.args
+                if (prop === 'args') {
+                    console.error(`[JQHTML] ERROR: Component "${target.component_name()}" attempted to modify this.args during on_load().\n\n` +
+                        `RESTRICTION: on_load() may ONLY modify:\n` +
+                        `  - this.data (read/write)\n\n` +
+                        `WHY: this.args is component state that on_load() depends on. Modifying it inside on_load() creates circular dependencies.\n\n` +
+                        `FIX: Modify this.args BEFORE calling on_load() (in on_create() or other lifecycle methods), not inside on_load():\n` +
+                        `  ❌ Inside on_load(): this.args.filter = 'new_value';\n` +
+                        `  ✅ In on_create(): this.args.filter = this.args.initial_filter || 'default';`);
+                    throw new Error(`[JQHTML] Cannot modify this.args during on_load(). ` +
+                        `Modify this.args in other lifecycle methods, not inside on_load().`);
+                }
+                // Block setting any other properties
+                console.error(`[JQHTML] ERROR: Component "${target.component_name()}" attempted to modify this.${String(prop)} during on_load().\n\n` +
+                    `RESTRICTION: on_load() may ONLY modify:\n` +
+                    `  - this.data (read/write)\n\n` +
+                    `WHY: on_load() is for data fetching only. Setting properties on the component instance should happen in other lifecycle methods.\n\n` +
+                    `FIX: Store your data in this.data instead:\n` +
+                    `  ❌ this.${String(prop)} = value;\n` +
+                    `  ✅ this.data.${String(prop)} = value;`);
+                throw new Error(`[JQHTML] Cannot modify this.${String(prop)} during on_load(). ` +
+                    `Only this.data can be modified in on_load().`);
+            }
+        });
+        // Create promise for this on_load() call with restricted this context
+        const on_load_promise = (async () => {
+            try {
+                // TODO: Implement proper error handling for on_load() failures
+                // - Should errors trigger re-render with error state?
+                // - Should errors clear cached data?
+                // - 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);
+            }
+            catch (error) {
+                // Handle error and notify coordinator
+                Load_Coordinator.handle_leader_error(this, error);
+                throw error;
+            }
+        })();
+        // Register as leader and get cleanup function
+        const complete_coordination = Load_Coordinator.register_leader(this, on_load_promise);
+        try {
+            await on_load_promise;
+        }
+        finally {
+            // Always clear loading flag and complete coordination
+            this.__loading = false;
+            complete_coordination();
+            // Freeze this.data after on_load() completes
+            this.__data_frozen = true;
+        }
+        // Validate that on_load() only modified this.data
+        let argsAfterLoad = null;
+        try {
+            argsAfterLoad = JSON.stringify(this.args);
+        }
+        catch (error) {
+            // Args contain circular references - skip validation
+        }
+        const propertiesAfterLoad = Object.keys(this);
+        // Check if args were modified (skip if args are non-serializable)
+        if (argsBeforeLoad !== null && argsAfterLoad !== null && argsBeforeLoad !== argsAfterLoad) {
+            console.error(`[JQHTML] WARNING: Component "${this.component_name()}" modified this.args in on_load().\n` +
+                `on_load() should ONLY modify this.data.\n\n` +
+                `Before: ${argsBeforeLoad}\n` +
+                `After:  ${argsAfterLoad}\n\n` +
+                `Fix: Modify this.args in on_create() or other lifecycle methods, not in on_load().\n` +
+                `this.args stores state that on_load() depends on. Modifying it inside on_load() creates circular dependencies.`);
+        }
+        // Check if new properties were added to the component instance
+        const newProperties = propertiesAfterLoad.filter(prop => !propertiesBeforeLoad.has(prop) && prop !== 'data');
+        if (newProperties.length > 0) {
+            console.error(`[JQHTML] WARNING: Component "${this.component_name()}" added new properties in on_load().\n` +
+                `on_load() should ONLY modify this.data. New properties detected: ${newProperties.join(', ')}\n\n` +
+                `Fix: Store your data in this.data instead:\n` +
+                `  ❌ this.${newProperties[0]} = value;\n` +
+                `  ✅ this.data.${newProperties[0]} = value;`);
+        }
+        // Check if data changed during on_load() - if so, update cache (but not if empty)
+        const data_after_load = JSON.stringify(this.data);
+        if (data_after_load !== data_before_load && data_after_load !== '{}') {
+            Jqhtml_Local_Storage.set(cache_key, this.data);
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Cache] Component ${this._cid} (${this.component_name()}) updated cache after on_load()`, { cache_key, data: this.data });
+            }
+        }
+        this._ready_state = 2;
+        this._update_debug_attrs();
+        this._log_lifecycle('load', 'complete');
+        // Emit lifecycle event
+        this.trigger('load');
+    }
+    /**
+     * Ready phase - Component fully initialized
+     * Called bottom-up (children before parent)
+     * @private
+     */
+    async _ready() {
+        if (this._stopped || this._ready_state >= 4)
+            return;
+        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();
+        this._ready_state = 4;
+        this._update_debug_attrs();
+        this._log_lifecycle('ready', 'complete');
+        // Emit lifecycle event
+        this.trigger('ready');
+    }
+    /**
+     * Public API: Wait for component to be fully ready
+     * Returns a promise that resolves when the component reaches ready state.
+     * Optionally accepts a callback that executes when ready.
+     *
+     * @example
+     * // Promise pattern
+     * await component.ready();
+     *
+     * @example
+     * // Callback pattern
+     * component.ready(() => {
+     *   console.log('Component is ready!');
+     * });
+     *
+     * @example
+     * // Both patterns work together
+     * await component.ready(() => console.log('Callback fired'));
+     *
+     * @param callback Optional callback to execute when ready
+     */
+    ready(callback) {
+        // If already ready, execute callback immediately and resolve
+        if (this._ready_state >= 4) {
+            if (callback)
+                callback();
+            return Promise.resolve();
+        }
+        // Return promise that resolves when ready event fires
+        return new Promise((resolve) => {
+            this.on('ready', () => {
+                if (callback)
+                    callback();
+                resolve();
+            });
+        });
+    }
+    /**
+     * Wait for all child components to reach ready state
+     * Ensures bottom-up ordering (children ready before parent)
+     * @private
+     */
+    async _wait_for_children_ready() {
+        const children = this._get_dom_children();
+        if (children.length === 0) {
+            return; // No children, nothing to wait for
+        }
+        // Create promises for each child that hasn't reached ready yet
+        const ready_promises = [];
+        for (const child of children) {
+            // If child already ready, skip
+            if (child._ready_state >= 4) {
+                continue;
+            }
+            // Create promise that resolves when child reaches ready
+            const ready_promise = new Promise((resolve) => {
+                child.on('ready', () => resolve());
+            });
+            ready_promises.push(ready_promise);
+        }
+        // Wait for all children to be ready
+        await Promise.all(ready_promises);
+    }
+    /**
+     * Reload component - re-fetch data and re-render (debounced)
+     *
+     * This is the public API that automatically debounces calls to _reload()
+     * Multiple rapid calls to reload() will be coalesced into a single execution
+     *
+     * @param always_render - If true (default), always re-render after on_load().
+     *                        If false, only re-render if data actually changed.
+     */
+    async reload(always_render) {
+        // Default to true if undefined
+        const force_refresh = always_render !== undefined ? always_render : true;
+        // State machine: reload(true) takes precedence over reload(false)
+        if (force_refresh) {
+            this.next_reload_force_refresh = true;
+        }
+        else {
+            // Only set to false if not already true
+            if (this.next_reload_force_refresh !== true) {
+                this.next_reload_force_refresh = false;
+            }
+        }
+        // Lazy-create debounced _reload function on first use
+        if (!this._reload_debounced) {
+            this._reload_debounced = this._create_debounced_function(this._reload.bind(this), 0);
+        }
+        return this._reload_debounced();
+    }
+    /**
+     * Refresh component - re-fetch data and re-render only if data changed (debounced)
+     *
+     * Similar to reload() but only re-renders if the data actually changed after on_load().
+     * Useful for checking server for updates without forcing unnecessary re-renders.
+     *
+     * Uses the same debouncing as reload() and plays nice with it - if reload() is called
+     * while refresh() is queued, reload() takes precedence and will always render.
+     */
+    async refresh() {
+        return this.reload(false);
+    }
+    /**
+     * Internal reload implementation - re-fetch data and re-render
+     *
+     * COMPLETE RELOAD PROCESS (Source of Truth):
+     *
+     * STEP 1: Cache check (if args changed since last render)
+     *   - Generate cache key from component name + current args
+     *   - If cached data exists and is non-empty:
+     *     - Unfreeze this.data (temporarily)
+     *     - Hydrate this.data with cached data
+     *     - Re-freeze this.data
+     *     - Render immediately (stale-while-revalidate)
+     *     - Set rendered_from_cache flag
+     *
+     * STEP 2: Call on_load() to fetch fresh data
+     *   - Unfreeze this.data
+     *   - Restore this.data to on_create() snapshot
+     *   - Call on_load() directly (no _load() wrapper)
+     *   - Freeze this.data after completion
+     *   - If data changed and non-empty: write to cache
+     *
+     * STEP 3: Conditionally re-render
+     *   - If didn't render from cache yet, OR data changed after on_load():
+     *     - Call render() to update DOM
+     *
+     * STEP 3.5: Wait for all children to be ready
+     *   - Bottom-up ordering (children ready before parent)
+     *   - Same as main lifecycle
+     *
+     * STEP 4: Call on_ready()
+     *   - Always call on_ready() after reload completes
+     *
+     * @private - Use reload() instead (debounced wrapper)
+     */
+    async _reload() {
+        if (this._stopped)
+            return;
+        this._log_lifecycle('reload', 'start');
+        // STEP 1: Cache check (if args changed)
+        let rendered_from_cache = false;
+        let data_before_load = null;
+        // Check if args changed (skip if args are non-serializable)
+        let args_changed = false;
+        if (this._args_on_last_render) {
+            try {
+                args_changed = JSON.stringify(this.args) !== JSON.stringify(this._args_on_last_render);
+            }
+            catch (error) {
+                // Args contain circular references - cannot detect change, assume changed
+                args_changed = true;
+            }
+        }
+        if (args_changed) {
+            const { Load_Coordinator } = await Promise.resolve().then(function () { return loadCoordinator; });
+            const { Jqhtml_Local_Storage } = await Promise.resolve().then(function () { return localStorage$1; });
+            // Check if component implements cache_id() for custom cache key
+            let cache_key = null;
+            if (typeof this.cache_id === 'function') {
+                try {
+                    const custom_cache_id = this.cache_id();
+                    cache_key = `${this.component_name()}::${String(custom_cache_id)}`;
+                }
+                catch (error) {
+                    // cache_id() threw error - disable caching
+                    cache_key = null;
+                }
+            }
+            else {
+                // Use standard args-based cache key generation
+                const result = Load_Coordinator.generate_invocation_key(this.component_name(), this.args);
+                cache_key = result.key;
+            }
+            // Only use cache if args are serializable
+            if (cache_key !== null) {
+                const cached_data = Jqhtml_Local_Storage.get(cache_key);
+                if (cached_data !== null && JSON.stringify(cached_data) !== '{}') {
+                    if (window.jqhtml?.debug?.verbose) {
+                        console.log(`[Cache] reload() - Component ${this._cid} (${this.component_name()}) hydrated from cache (args changed)`, { cache_key, data: cached_data });
+                    }
+                    // Unfreeze to set cached data, then re-freeze
+                    this.__data_frozen = false;
+                    this.data = cached_data;
+                    this.__data_frozen = true;
+                    await this.render();
+                    rendered_from_cache = true;
+                }
+            }
+        }
+        // Capture data state before on_load for comparison
+        data_before_load = JSON.stringify(this.data);
+        // STEP 2: Call on_load() to fetch fresh data
+        // Unfreeze this.data so we can restore snapshot and on_load() can modify it
+        this.__data_frozen = false;
+        // Restore this.data to initial state from snapshot (if not first load)
+        if (this.__initial_data_snapshot) {
+            this.data = JSON.parse(JSON.stringify(this.__initial_data_snapshot));
+        }
+        try {
+            await this.on_load();
+        }
+        finally {
+            // Freeze this.data after on_load() completes
+            this.__data_frozen = true;
+        }
+        // Check if data changed during on_load() - if so, update cache (but not if empty)
+        const data_after_load = JSON.stringify(this.data);
+        const data_changed = data_after_load !== data_before_load;
+        if (data_changed && data_after_load !== '{}') {
+            const { Load_Coordinator } = await Promise.resolve().then(function () { return loadCoordinator; });
+            const { Jqhtml_Local_Storage } = await Promise.resolve().then(function () { return localStorage$1; });
+            // Check if component implements cache_id() for custom cache key
+            let cache_key = null;
+            if (typeof this.cache_id === 'function') {
+                try {
+                    const custom_cache_id = this.cache_id();
+                    cache_key = `${this.component_name()}::${String(custom_cache_id)}`;
+                }
+                catch (error) {
+                    // cache_id() threw error - disable caching
+                    cache_key = null;
+                }
+            }
+            else {
+                // Use standard args-based cache key generation
+                const result = Load_Coordinator.generate_invocation_key(this.component_name(), this.args);
+                cache_key = result.key;
+            }
+            // Only update cache if args are serializable
+            if (cache_key !== null) {
+                Jqhtml_Local_Storage.set(cache_key, this.data);
+                if (window.jqhtml?.debug?.verbose) {
+                    console.log(`[Cache] Component ${this._cid} (${this.component_name()}) updated cache after on_load() in reload()`, { cache_key, data: this.data });
+                }
+            }
+        }
+        // STEP 3: Conditionally re-render (with refresh() support)
+        // Read force_refresh from state machine (default true)
+        const force_refresh = this.next_reload_force_refresh !== null ? this.next_reload_force_refresh : true;
+        // Track if we need to render
+        let should_render = false;
+        if (force_refresh) {
+            // reload(true) or reload() - always render if we haven't yet, OR data changed
+            should_render = !rendered_from_cache || data_changed;
+        }
+        else {
+            // refresh() / reload(false) - only render if data changed from last render
+            if (rendered_from_cache) {
+                // First render was called (args changed, cache available)
+                // Compare data after on_load() vs data used in that first render
+                const data_from_first_render = this._data_on_last_render;
+                should_render = data_after_load !== data_from_first_render;
+            }
+            else {
+                // First render was NOT called (args same or no cache)
+                // Compare data after on_load() vs last recorded render
+                const last_rendered_data = this._data_on_last_render;
+                should_render = data_after_load !== last_rendered_data;
+            }
+        }
+        // STEP 3: Perform second render if needed
+        if (should_render) {
+            this._render();
+        }
+        // Reset state machine based on what we just executed
+        if (force_refresh === false && this.next_reload_force_refresh === false) {
+            this.next_reload_force_refresh = null;
+        }
+        else if (force_refresh === true && this.next_reload_force_refresh === true) {
+            this.next_reload_force_refresh = null;
+        }
+        // If they don't match, another call was queued - leave it
+        // 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();
+        }
+        this._log_lifecycle('reload', 'complete');
+    }
+    /**
+     * Destroy the component and cleanup
+     * Called automatically by MutationObserver when component is removed from DOM
+     * Can also be called manually for explicit cleanup
+     */
+    /**
+     * Internal stop method - stops just this component (no children)
+     * Sets stopped flag, calls lifecycle hooks, but leaves DOM intact
+     * @private
+     */
+    _stop() {
+        // Guard: prevent double _stop() calls
+        if (this._stopped)
+            return;
+        this._stopped = true;
+        // Early bailout: skip expensive cleanup if no handlers registered
+        // Only matters for aborting boot() lifecycle - minimal cleanup sufficient
+        const has_custom_stop = this.on_stop !== Jqhtml_Component.prototype.on_stop;
+        const has_destroy_callbacks = this._on_registered('destroy');
+        if (!has_custom_stop && !has_destroy_callbacks) {
+            // Fast path: no cleanup logic defined, just mark as stopped
+            this._lifecycle_manager.unregister_component(this);
+            this._ready_state = 99;
+            return;
+        }
+        // Full cleanup path: component has custom stop logic
+        this._log_lifecycle('destroy', 'start');
+        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();
+        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');
+        // Remove from DOM parent's children
+        if (this._dom_parent) {
+            this._dom_parent._dom_children.delete(this);
+        }
+        this._ready_state = 99;
+        this._update_debug_attrs();
+        this._log_lifecycle('destroy', 'complete');
+    }
+    /**
+     * Stop component lifecycle - stops all descendant components then self
+     * Leaves DOM intact, just stops lifecycle engine and fires cleanup hooks
+     */
+    stop() {
+        // Stop all descendant components (flat iteration, no recursion needed)
+        this.$.find('.Component').each(function () {
+            const child = $(this).data('_component');
+            if (child && !child._stopped) {
+                child._stop(); // Not recursive - we already have all descendants
+            }
+        });
+        // Then stop self
+        this._stop();
+    }
+    // -------------------------------------------------------------------------
+    // Overridable Lifecycle Hooks
+    // -------------------------------------------------------------------------
+    on_render() { }
+    on_create() { }
+    async on_load() { }
+    async on_ready() { }
+    on_stop() { }
+    /**
+     * Should component re-render after load?
+     * By default, only re-renders if data has changed
+     * Override to control re-rendering behavior
+     */
+    /**
+     * Internal method to determine if component should re-render after on_load()
+     * @private
+     */
+    _should_rerender() {
+        // Compare current data state with data state before initial render
+        const currentDataState = JSON.stringify(this.data);
+        const dataChanged = this._data_before_render !== currentDataState;
+        // Update stored state for next comparison
+        if (dataChanged) {
+            this._data_before_render = currentDataState;
+        }
+        return dataChanged;
+    }
+    // -------------------------------------------------------------------------
+    // Public API
+    // -------------------------------------------------------------------------
+    /**
+     * Get component name for debugging
+     */
+    component_name() {
+        return this.constructor.name;
+    }
+    /**
+     * Register event callback
+     * Supports lifecycle events ('render', 'create', 'load', 'ready', 'stop') and custom events
+     * Lifecycle event callbacks fire after the lifecycle method completes
+     * If a lifecycle event has already occurred, the callback fires immediately AND registers for future occurrences
+     * Custom events only fire when explicitly triggered via .trigger()
+     */
+    on(event_name, callback) {
+        // Initialize callback array for this event if needed
+        if (!this._lifecycle_callbacks.has(event_name)) {
+            this._lifecycle_callbacks.set(event_name, []);
+        }
+        // Add callback to queue
+        this._lifecycle_callbacks.get(event_name).push(callback);
+        // If this lifecycle event has already occurred, fire the callback immediately
+        // (only for lifecycle events - custom events don't have this behavior)
+        if (this._lifecycle_states.has(event_name)) {
+            try {
+                callback(this);
+            }
+            catch (error) {
+                console.error(`[JQHTML] Error in ${event_name} callback:`, error);
+            }
+        }
+        return this;
+    }
+    /**
+     * Trigger a lifecycle event - fires all registered callbacks
+     * Marks event as occurred so future .on() calls fire immediately
+     */
+    trigger(event_name) {
+        // Mark this event as occurred
+        this._lifecycle_states.add(event_name);
+        // Fire all registered callbacks for this event
+        const callbacks = this._lifecycle_callbacks.get(event_name);
+        if (callbacks) {
+            for (const callback of callbacks) {
+                try {
+                    callback.bind(this)(this);
+                }
+                catch (error) {
+                    console.error(`[JQHTML] Error in ${event_name} callback:`, error);
+                }
+            }
+        }
+    }
+    /**
+     * Check if any callbacks are registered for a given event
+     * Used to determine if cleanup logic needs to run
+     */
+    _on_registered(event_name) {
+        const callbacks = this._lifecycle_callbacks.get(event_name);
+        return !!(callbacks && callbacks.length > 0);
+    }
+    /**
+     * Find element by scoped ID
+     *
+     * Searches for elements with id="local_id:THIS_COMPONENT_CID"
+     *
+     * Example:
+     *   Template: <button $sid="save_btn">Save</button>
+     *   Rendered: <button id="save_btn:abc123" data-sid="save_btn">Save</button>
+     *   Access:   this.$sid('save_btn')  // Returns jQuery element
+     *
+     * Performance: Uses native document.getElementById() when component is in DOM,
+     * falls back to jQuery.find() for components not yet attached to DOM.
+     *
+     * @param local_id The local ID (without _cid suffix)
+     * @returns jQuery element with id="local_id:_cid", or empty jQuery object if not found
+     */
+    $sid(local_id) {
+        const scopedId = `${local_id}:${this._cid}`;
+        // Try getElementById first (fast path - works when component is in DOM)
+        const el = document.getElementById(scopedId);
+        if (el) {
+            return $(el);
+        }
+        // Fallback: component not in DOM yet, search within component subtree
+        // This allows $sid() to work on components before they're appended to body
+        // Must escape the ID because it contains ':' which jQuery treats as a pseudo-selector
+        return this.$.find(`#${$.escapeSelector(scopedId)}`);
+    }
+    /**
+     * Get component instance by scoped ID
+     *
+     * Convenience method that finds element by scoped ID and returns the component instance.
+     *
+     * Example:
+     *   Template: <User_Card $sid="active_user" />
+     *   Access:   const user = this.sid('active_user');  // Returns User_Card instance
+     *             user.data.name  // Access component's data
+     *
+     * To get the scoped ID string itself:
+     *   this.$sid('active_user').attr('id')  // Returns "active_user:abc123xyz"
+     *
+     * @param local_id The local ID (without _cid suffix)
+     * @returns Component instance or null if not found or not a component
+     */
+    sid(local_id) {
+        const element = this.$sid(local_id);
+        const component = element.data('_component');
+        // If no component found but element exists, warn developer
+        if (!component && element.length > 0) {
+            console.warn(`Component ${this.constructor.name} tried to call .sid('${local_id}') - ` +
+                `${local_id} exists, however, it is not a component or $redrawable. ` +
+                `Did you forget to add $redrawable to the tag?`);
+        }
+        return component || null;
+    }
+    /**
+     * Get the component that instantiated this component (rendered it in their template)
+     * Returns null if component was created programmatically via $().component()
+     */
+    instantiator() {
+        return this._instantiator;
+    }
+    /**
+     * Find descendant components by CSS selector
+     */
+    find(selector) {
+        const components = [];
+        this.$.find(selector).each((_, el) => {
+            const comp = $(el).data('_component');
+            if (comp instanceof Jqhtml_Component) {
+                components.push(comp);
+            }
+        });
+        return components;
+    }
+    /**
+     * Find closest ancestor component matching selector
+     */
+    closest(selector) {
+        let current = this.$.parent();
+        while (current.length > 0) {
+            if (current.is(selector)) {
+                const comp = current.data('_component');
+                if (comp instanceof Jqhtml_Component) {
+                    return comp;
+                }
+            }
+            current = current.parent();
+        }
+        return null;
+    }
+    // -------------------------------------------------------------------------
+    // Static Methods
+    // -------------------------------------------------------------------------
+    /**
+     * Get CSS class hierarchy for this component type
+     */
+    static get_class_hierarchy() {
+        // v2.2.13 - Fixed to handle undefined values in prototype chain
+        const classes = [];
+        let ctor = this;
+        while (ctor) {
+            // Check if constructor has a valid name property
+            if (!ctor.name || typeof ctor.name !== 'string') {
+                // console.warn('[JQHTML v2.2.13] Invalid constructor name in hierarchy:', ctor);
+                break;
+            }
+            // Only add valid class names (non-empty strings, not 'Object')
+            if (ctor.name !== 'Object' && ctor.name !== '') {
+                // Normalize base class names - handle different import patterns
+                let normalizedName = ctor.name;
+                if (normalizedName === '_Jqhtml_Component' || normalizedName === '_Base_Jqhtml_Component') {
+                    normalizedName = 'Component'; // Use 'Component' instead of 'Jqhtml_Component' for CSS class
+                }
+                else if (normalizedName === 'Jqhtml_Component') {
+                    normalizedName = 'Component'; // Use 'Component' instead of 'Jqhtml_Component' for CSS class
+                }
+                classes.push(normalizedName);
+            }
+            // Get the next prototype
+            const nextProto = Object.getPrototypeOf(ctor);
+            // Stop if we've reached the end of the chain
+            if (!nextProto || nextProto === Object.prototype || nextProto.constructor === Object) {
+                break;
+            }
+            ctor = nextProto;
+        }
+        return classes;
+    }
+    // -------------------------------------------------------------------------
+    // Private Implementation
+    // -------------------------------------------------------------------------
+    _generate_cid() {
+        return uid();
+    }
+    /**
+     * Flatten instruction array - converts ['_content', [...]] markers to flat array
+     * Recursively flattens nested content from content() calls
+     */
+    _flatten_instructions(instructions) {
+        const result = [];
+        for (const instruction of instructions) {
+            // Check if this is a _content marker: ['_content', [...]]
+            if (Array.isArray(instruction) && instruction[0] === '_content' && Array.isArray(instruction[1])) {
+                // Recursively flatten the content instructions
+                const contentInstructions = this._flatten_instructions(instruction[1]);
+                result.push(...contentInstructions);
+            }
+            else {
+                // Regular instruction - keep as is
+                result.push(instruction);
+            }
+        }
+        return result;
+    }
+    _apply_css_classes() {
+        const hierarchy = this.constructor.get_class_hierarchy();
+        // If component name differs from class name, add component name to hierarchy
+        // This happens when:
+        // 1. Using base Jqhtml_Component with _component_name
+        // 2. Using parent class via extends chain (e.g., Contacts_DataGrid using DataGrid_Abstract class)
+        const classesToAdd = [...hierarchy];
+        if (this.args._component_name && this.args._component_name !== this.constructor.name) {
+            // Add component name at the beginning (most specific)
+            classesToAdd.unshift(this.args._component_name);
+        }
+        // Filter out private classes (starting with _) and invalid class names
+        const publicClasses = classesToAdd.filter(className => {
+            // Guard against undefined, null, or non-string values
+            if (!className || typeof className !== 'string') {
+                console.warn('[JQHTML] Filtered out invalid class name:', className);
+                return false;
+            }
+            return !className.startsWith('_');
+        });
+        if (publicClasses.length > 0) {
+            this.$.addClass(publicClasses.join(' '));
+        }
+    }
+    _apply_default_attributes() {
+        // Get template using same logic as render() method
+        let template;
+        // If we have a component name, try looking up by name first (for unregistered components)
+        if (this.args._component_name) {
+            template = get_template(this.args._component_name);
+        }
+        else {
+            // Otherwise look up by class
+            template = get_template_by_class(this.constructor);
+        }
+        if (!template)
+            return;
+        // Walk the extends chain to collect all defaultAttributes from parent templates
+        // Apply from parent to child so child attributes take precedence
+        const templateChain = [];
+        let currentTemplate = template;
+        // Build chain from child to parent
+        while (currentTemplate) {
+            templateChain.unshift(currentTemplate); // Add to front so parent comes first
+            // Check if this template extends another
+            if (currentTemplate.extends) {
+                try {
+                    currentTemplate = get_template(currentTemplate.extends);
+                }
+                catch (error) {
+                    // Parent template not found, stop chain
+                    break;
+                }
+            }
+            else {
+                break;
+            }
+        }
+        // Apply defaultAttributes from each template in the chain (parent first, child last)
+        for (const tmpl of templateChain) {
+            if (!tmpl.defaultAttributes)
+                continue;
+            // Filter out 'tag' since it determines tag name, not an attribute
+            const defineAttrs = { ...tmpl.defaultAttributes };
+            delete defineAttrs.tag;
+            // Debug logging
+            if (window.jqhtml?.debug?.enabled) {
+                const componentName = tmpl.name || this.args._component_name || this.constructor.name;
+                console.log(`[Component] Applying defaultAttributes for ${componentName}:`, defineAttrs);
+            }
+            // Apply each default attribute
+            for (const [key, value] of Object.entries(defineAttrs)) {
+                if (key === 'class') {
+                    // Special handling for class - merge with existing
+                    const existingClasses = this.$.attr('class');
+                    if (existingClasses) {
+                        const existing = existingClasses.split(/\s+/).filter(c => c);
+                        const newClasses = String(value).split(/\s+/).filter(c => c);
+                        for (const newClass of newClasses) {
+                            if (!existing.includes(newClass)) {
+                                existing.push(newClass);
+                            }
+                        }
+                        this.$.attr('class', existing.join(' '));
+                    }
+                    else {
+                        this.$.attr('class', value);
+                    }
+                }
+                else if (key === 'style') {
+                    // Special handling for style - merge with existing
+                    // Define attributes are applied AFTER invocation attributes
+                    // So we only add Define style properties that don't already exist
+                    // This ensures invocation wins conflicts (invocation overrides Define)
+                    const existingStyle = this.$.attr('style');
+                    if (existingStyle) {
+                        // Parse existing styles (from invocation)
+                        const existingRules = new Map();
+                        existingStyle.split(';').forEach(rule => {
+                            const [prop, val] = rule.split(':').map(s => s.trim());
+                            if (prop && val)
+                                existingRules.set(prop, val);
+                        });
+                        // Parse Define styles and only add if not already present
+                        String(value).split(';').forEach(rule => {
+                            const [prop, val] = rule.split(':').map(s => s.trim());
+                            if (prop && val && !existingRules.has(prop)) {
+                                // Only add if property doesn't exist (invocation wins)
+                                existingRules.set(prop, val);
+                            }
+                        });
+                        // Build merged style string
+                        const merged = Array.from(existingRules.entries())
+                            .map(([prop, val]) => `${prop}: ${val}`)
+                            .join('; ');
+                        this.$.attr('style', merged);
+                    }
+                    else {
+                        this.$.attr('style', value);
+                    }
+                }
+                else if (key.startsWith('$') || key.startsWith('data-')) {
+                    // Data attributes - also update args
+                    const dataKey = key.startsWith('$') ? key.substring(1) :
+                        key.startsWith('data-') ? key.substring(5) : key;
+                    // Only apply if not already set in args
+                    if (!(dataKey in this.args)) {
+                        this.args[dataKey] = value;
+                        this.$.data(dataKey, value);
+                        this.$.attr(key.startsWith('$') ? `data-${dataKey}` : key, String(value));
+                    }
+                }
+                else {
+                    // Regular attributes - apply directly if not already set
+                    if (!this.$.attr(key)) {
+                        this.$.attr(key, value);
+                    }
+                }
+            }
+        }
+    }
+    _set_attributes() {
+        // Always set data-cid
+        this.$.attr('data-cid', this._cid);
+        // Only set lifecycle state attribute if verbose mode enabled
+        if (window.jqhtml?.debug?.verbose) {
+            this.$.attr('data-_lifecycle-state', this._ready_state.toString());
+        }
+    }
+    _update_debug_attrs() {
+        // Only update lifecycle state attribute if verbose mode enabled
+        if (window.jqhtml?.debug?.verbose) {
+            this.$.attr('data-_lifecycle-state', this._ready_state.toString());
+        }
+    }
+    _find_dom_parent() {
+        let current = this.$.parent();
+        while (current.length > 0) {
+            const parent = current.data('_component');
+            if (parent instanceof Jqhtml_Component) {
+                this._dom_parent = parent;
+                parent._dom_children.add(this);
+                break;
+            }
+            current = current.parent();
+        }
+    }
+    /**
+     * Get DOM children (components in DOM subtree)
+     * Uses fast _dom_children registry when possible, falls back to DOM traversal for off-DOM components
+     * @private - Used internally for lifecycle coordination
+     */
+    _get_dom_children() {
+        // If component was off-DOM during render, children couldn't register via _find_dom_parent()
+        // Use DOM traversal to find direct children (works off-DOM, slightly slower)
+        if (this._use_dom_fallback) {
+            const directChildren = [];
+            this.$.find('.Component').each((_, el) => {
+                const $el = $(el);
+                const comp = $el.data('_component');
+                if (comp instanceof Jqhtml_Component) {
+                    // Only include if this component is the direct parent (not a grandparent)
+                    // Check: closest parent component is us (or no parent = we're the root)
+                    const closestParent = $el.parent().closest('.Component');
+                    if (closestParent.length === 0 || closestParent.data('_component') === this) {
+                        directChildren.push(comp);
+                    }
+                }
+            });
+            return directChildren;
+        }
+        // Fast path: component was in-DOM during render, children registered normally
+        // Filter out any that have since been removed from DOM (destroyed/replaced)
+        const children = Array.from(this._dom_children);
+        return children.filter(child => {
+            return $.contains(document.documentElement, child.$[0]);
+        });
+    }
+    _log_lifecycle(phase, status) {
+        // Use new debug module
+        logLifecycle(this, phase, status);
+        // Keep legacy support for window.JQHTML_DEBUG
+        if (typeof window !== 'undefined' && window.JQHTML_DEBUG) {
+            window.JQHTML_DEBUG.log(this.component_name(), phase, status, {
+                cid: this._cid,
+                ready_state: this._ready_state,
+                args: this.args
+            });
+        }
+    }
+    _log_debug(action, ...args) {
+        if (typeof window !== 'undefined' && window.JQHTML_DEBUG) {
+            window.JQHTML_DEBUG.log(this.component_name(), 'debug', `${action}: ${args.map(a => JSON.stringify(a)).join(', ')}`);
+        }
+    }
+    /**
+     * Creates a debounced function with exclusivity and promise fan-in
+     *
+     * When invoked, immediately runs the callback exclusively.
+     * For subsequent invocations, applies a delay before running the callback exclusively again.
+     * The delay starts after the current asynchronous operation resolves.
+     *
+     * If delay is 0, the function only prevents enqueueing multiple executions,
+     * but will still run them immediately in an exclusive sequential manner.
+     *
+     * The most recent invocation's parameters are used when the function executes.
+     * Returns a promise that resolves when the next exclusive execution completes.
+     *
+     * @private
+     */
+    _create_debounced_function(callback, delay) {
+        let running = false;
+        let queued = false;
+        let last_end_time = 0; // timestamp of last completed run
+        let timer = null;
+        let next_args = [];
+        let resolve_queue = [];
+        let reject_queue = [];
+        const run_function = async () => {
+            const these_resolves = resolve_queue;
+            const these_rejects = reject_queue;
+            const args = next_args;
+            resolve_queue = [];
+            reject_queue = [];
+            next_args = [];
+            queued = false;
+            running = true;
+            try {
+                const result = await callback(...args);
+                for (const resolve of these_resolves)
+                    resolve(result);
+            }
+            catch (err) {
+                for (const reject of these_rejects)
+                    reject(err);
+            }
+            finally {
+                running = false;
+                last_end_time = Date.now();
+                if (queued) {
+                    clearTimeout(timer);
+                    timer = setTimeout(run_function, Math.max(delay, 0));
+                }
+                else {
+                    timer = null;
+                }
+            }
+        };
+        return function (...args) {
+            next_args = args;
+            return new Promise((resolve, reject) => {
+                resolve_queue.push(resolve);
+                reject_queue.push(reject);
+                // Nothing running and nothing scheduled
+                if (!running && !timer) {
+                    const first_call = last_end_time === 0;
+                    const since = first_call ? Infinity : Date.now() - last_end_time;
+                    if (since >= delay) {
+                        run_function();
+                    }
+                    else {
+                        const wait = Math.max(delay - since, 0);
+                        clearTimeout(timer);
+                        timer = setTimeout(run_function, wait);
+                    }
+                    return;
+                }
+                // If already running or timer exists, just mark queued
+                // The finally{} of run_function handles scheduling after full delay
+                queued = true;
+            });
+        };
+    }
+}
+
+/**
+ * JQHTML v2 Template Renderer
+ *
+ * Connects compiled templates to components
+ * Processes instruction arrays and handles bindings
+ */
+/**
+ * Process slot-only template inheritance
+ *
+ * When a component's template returns {_slots: {...}}, walk the prototype
+ * chain to find a parent template and invoke it with the child's slots as content.
+ *
+ * @param component The component instance
+ * @param childSlots The slots object from the child template
+ * @returns [instructions, context] tuple or null if no parent found
+ */
+async function process_slot_inheritance(component, childSlots) {
+    // Walk the prototype chain to find parent class with template
+    let currentClass = Object.getPrototypeOf(component.constructor);
+    console.log(`[JQHTML] Walking prototype chain for ${component.constructor.name}`);
+    while (currentClass && currentClass !== Jqhtml_Component && currentClass.name !== 'Object') {
+        const className = currentClass.name;
+        console.log(`[JQHTML]   Checking parent class: ${className}`);
+        // Skip internal framework classes
+        if (className === '_Jqhtml_Component' || className === '_Base_Jqhtml_Component') {
+            currentClass = Object.getPrototypeOf(currentClass);
+            continue;
+        }
+        // Try to find template for this parent class
+        try {
+            const parentTemplate = get_template(className);
+            console.log(`[JQHTML]   Template found for ${className}:`, parentTemplate ? parentTemplate.name : 'null');
+            // Check if we got the default template (means no real template found)
+            if (parentTemplate && parentTemplate.name !== 'Jqhtml_Component') {
+                console.log(`[JQHTML]   Invoking parent template ${className}`);
+                // Found a real parent template - invoke it with child's slots as content
+                const [parentInstructions, parentContext] = parentTemplate.render.call(component, component.data, component.args, childSlots // Pass child slots as content parameter
+                );
+                // Check if parent also returns slots (recursive inheritance)
+                if (parentInstructions && typeof parentInstructions === 'object' && parentInstructions._slots) {
+                    // Parent also has slot-only template - recurse
+                    console.log(`[JQHTML]   Parent also slot-only, recursing`);
+                    return await process_slot_inheritance(component, parentInstructions._slots);
+                }
+                // Parent returned HTML - we're done
+                console.log(`[JQHTML]   Parent returned instructions, inheritance complete`);
+                return [parentInstructions, parentContext];
+            }
+        }
+        catch (error) {
+            console.warn(`[JQHTML] Error looking up parent template for ${className}:`, error);
+        }
+        // Move to next parent
+        currentClass = Object.getPrototypeOf(currentClass);
+    }
+    // No parent template found
+    console.warn(`[JQHTML] No parent template found after walking chain`);
+    return null;
+}
+/**
+ * Render a template for a component
+ * Templates are functions that return [instructions, context] tuples
+ */
+async function render_template(component, template_fn) {
+    // Get template from registry if not provided
+    let render_fn = template_fn;
+    if (!render_fn) {
+        const template_def = get_template_by_class(component.constructor);
+        render_fn = template_def.render;
+    }
+    if (!render_fn) {
+        // No template, component should handle its own rendering
+        return;
+    }
+    // Clear existing content
+    component.$.empty();
+    // Execute template function
+    // Templates receive: (data, args, content)
+    // Provide a default empty content function if none provided
+    const defaultContent = () => '';
+    let [instructions, context] = render_fn.call(component, component.data, component.args, defaultContent // Default content function that returns empty string
+    );
+    // Check for slot-only template inheritance
+    // If instructions is {_slots: {...}}, this is a slot-only template
+    // We need to find the parent template and invoke it with these slots
+    if (instructions && typeof instructions === 'object' && instructions._slots) {
+        console.log(`[JQHTML] Slot-only template detected for ${component.constructor.name}, invoking inheritance`);
+        const result = await process_slot_inheritance(component, instructions._slots);
+        if (result) {
+            console.log(`[JQHTML] Parent template found, using parent instructions`);
+            instructions = result[0];
+            context = result[1];
+        }
+        else {
+            console.warn(`[JQHTML] No parent template found for ${component.constructor.name}, rendering empty`);
+            // No parent template found - return empty
+            instructions = [];
+        }
+    }
+    // Process instructions to generate DOM
+    await process_instructions(instructions, component.$, component);
+    // Process bindings after DOM is created
+    await process_bindings(component);
+    // Attach event handlers
+    await attach_event_handlers(component);
+}
+/**
+ * Process data bindings (attributes created by :prop syntax)
+ */
+async function process_bindings(component) {
+    // Find all elements with data-bind-* attributes
+    component.$.find('[data-bind-prop], [data-bind-value], [data-bind-text], [data-bind-html], [data-bind-class], [data-bind-style]').each((_, element) => {
+        const el = $(element);
+        const attrs = element.attributes;
+        for (let i = 0; i < attrs.length; i++) {
+            const attr = attrs[i];
+            if (attr.name.startsWith('data-bind-')) {
+                const binding_type = attr.name.substring(10); // Remove 'data-bind-'
+                const expression = attr.value;
+                try {
+                    // Evaluate expression in component context
+                    const value = evaluate_expression(expression, component);
+                    // Apply binding based on type
+                    switch (binding_type) {
+                        case 'prop':
+                            // Generic property binding
+                            const prop_name = el.attr('data-bind-prop-name') || 'value';
+                            el.prop(prop_name, value);
+                            break;
+                        case 'value':
+                            el.val(value);
+                            break;
+                        case 'text':
+                            el.text(value);
+                            break;
+                        case 'html':
+                            el.html(value);
+                            break;
+                        case 'class':
+                            if (typeof value === 'object') {
+                                // Object syntax: {active: true, disabled: false}
+                                Object.entries(value).forEach(([className, enabled]) => {
+                                    el.toggleClass(className, !!enabled);
+                                });
+                            }
+                            else {
+                                // String syntax
+                                el.addClass(String(value));
+                            }
+                            break;
+                        case 'style':
+                            if (typeof value === 'object') {
+                                el.css(value);
+                            }
+                            else {
+                                el.attr('style', String(value));
+                            }
+                            break;
+                        default:
+                            // Custom binding - set as attribute
+                            el.attr(binding_type, value);
+                    }
+                }
+                catch (error) {
+                    console.error(`Error evaluating binding "${expression}":`, error);
+                }
+            }
+        }
+    });
+}
+/**
+ * Attach event handlers (attributes created by @event syntax)
+ */
+async function attach_event_handlers(component) {
+    // Find all elements with data-on-* attributes
+    component.$.find('[data-on-click], [data-on-change], [data-on-submit], [data-on-keyup], [data-on-keydown], [data-on-focus], [data-on-blur]').each((_, element) => {
+        const el = $(element);
+        const attrs = element.attributes;
+        for (let i = 0; i < attrs.length; i++) {
+            const attr = attrs[i];
+            if (attr.name.startsWith('data-on-')) {
+                const event_name = attr.name.substring(8); // Remove 'data-on-'
+                const handler_expr = attr.value;
+                // Remove the attribute to avoid re-processing
+                el.removeAttr(attr.name);
+                // Attach event handler
+                el.on(event_name, function (event) {
+                    try {
+                        // Create handler function in component context
+                        const handler = evaluate_handler(handler_expr, component);
+                        if (typeof handler === 'function') {
+                            // Call with component as 'this' and pass event
+                            handler.call(component, event);
+                        }
+                        else {
+                            // Expression to execute
+                            evaluate_expression(handler_expr, component, { $event: event });
+                        }
+                    }
+                    catch (error) {
+                        console.error(`Error in ${event_name} handler "${handler_expr}":`, error);
+                    }
+                });
+            }
+        }
+    });
+}
+/**
+ * Evaluate an expression in component context
+ */
+function evaluate_expression(expression, component, locals = {}) {
+    // Create evaluation context
+    const context = {
+        // Component properties
+        data: component.data,
+        args: component.args,
+        $: component.$,
+        // Component methods
+        $sid: component.$sid.bind(component),
+        // Locals (like $event)
+        ...locals
+    };
+    // Build function that evaluates in context
+    const keys = Object.keys(context);
+    const values = Object.values(context);
+    try {
+        // Use Function constructor for better performance than eval
+        const fn = new Function(...keys, `return (${expression})`);
+        return fn(...values);
+    }
+    catch (error) {
+        console.error(`Invalid expression: ${expression}`, error);
+        return undefined;
+    }
+}
+/**
+ * Evaluate a handler expression (might be method name or inline code)
+ */
+function evaluate_handler(expression, component) {
+    // Check if it's a method name on the component
+    if (expression in component && typeof component[expression] === 'function') {
+        return component[expression];
+    }
+    // Otherwise treat as inline code
+    try {
+        return new Function('$event', `
+      const { data, args, $, emit, $sid } = this;
+      ${expression}
+    `).bind(component);
+    }
+    catch (error) {
+        console.error(`Invalid handler: ${expression}`, error);
+        return null;
+    }
+}
+/**
+ * Helper to escape HTML for safe output
+ */
+function escape_html(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+/**
+ * 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
+ *
+ * Extends jQuery with component method:
+ * - $(el).component() - Get component instance
+ * - $(el).component(ComponentClass, args) - Create component
+ */
+// Function to initialize jQuery plugin with the correct jQuery instance
+function init_jquery_plugin(jQuery) {
+    if (!jQuery || !jQuery.fn) {
+        throw new Error('jQuery is required for JQHTML. Please ensure jQuery is loaded before initializing JQHTML.');
+    }
+    // Check if jQuery is from global scope (recommended)
+    if (typeof window !== 'undefined' && window.$ !== jQuery && !jQuery.__jqhtml_checked) {
+        devWarn('jQuery instance appears to be bundled with webpack/modules rather than loaded globally.\n' +
+            'For best compatibility, it is recommended to:\n' +
+            '1. Include jQuery via <script> tag from a CDN (UMD format)\n' +
+            '2. Configure webpack with: externals: { jquery: "$" }\n' +
+            '3. Remove jquery from package.json dependencies\n\n' +
+            'To suppress this warning, set: window.JQHTML_SUPPRESS_WARNINGS = true');
+        // Mark this jQuery instance as checked to avoid duplicate warnings
+        jQuery.__jqhtml_checked = true;
+    }
+    // Store original jQuery constructor
+    const _jqhtml_original_jquery = jQuery;
+    // Override jQuery constructor to handle component instances
+    const JQueryWithComponentSupport = function (selector, context) {
+        // Check if selector is a JQHTML component instance
+        if (selector &&
+            typeof selector === 'object' &&
+            selector.$ &&
+            typeof selector.$sid === 'function' &&
+            typeof selector.id === 'function') {
+            // Return the component's jQuery element
+            return selector.$;
+        }
+        // Otherwise, call original jQuery constructor
+        return new _jqhtml_original_jquery(selector, context);
+    };
+    // Copy all jQuery static properties/methods to the new constructor
+    Object.setPrototypeOf(JQueryWithComponentSupport, _jqhtml_original_jquery);
+    for (const key in _jqhtml_original_jquery) {
+        if (_jqhtml_original_jquery.hasOwnProperty(key)) {
+            JQueryWithComponentSupport[key] = _jqhtml_original_jquery[key];
+        }
+    }
+    // Copy prototype and fn
+    JQueryWithComponentSupport.prototype = _jqhtml_original_jquery.prototype;
+    JQueryWithComponentSupport.fn = _jqhtml_original_jquery.fn;
+    // Replace global jQuery and $ (if in browser environment)
+    if (typeof window !== 'undefined') {
+        window.jQuery = JQueryWithComponentSupport;
+        window.$ = JQueryWithComponentSupport;
+    }
+    // Update local reference for rest of this function
+    jQuery = JQueryWithComponentSupport;
+    // Store original jQuery.fn.val
+    const originalVal = jQuery.fn.val;
+    // Override jQuery.fn.val to support component delegation
+    jQuery.fn.val = function (value) {
+        if (arguments.length === 0) {
+            // Getter mode - return value from first element
+            const firstEl = this.first();
+            if (firstEl.length === 0)
+                return undefined;
+            const component = firstEl.data('_component');
+            const tagName = firstEl.prop('tagName');
+            if (component && typeof component.val === 'function' && tagName !== 'INPUT' && tagName !== 'TEXTAREA') {
+                // Delegate to component's val() method (but not if the component IS an input/textarea)
+                return component.val();
+            }
+            // Fall back to original jQuery val()
+            return originalVal.call(this);
+        }
+        else {
+            // Setter mode - set value on all elements
+            this.each(function () {
+                const $el = jQuery(this);
+                const component = $el.data('_component');
+                const tagName = $el.prop('tagName');
+                if (component && typeof component.val === 'function' && tagName !== 'INPUT' && tagName !== 'TEXTAREA') {
+                    // Delegate to component's val() method (but not if the component IS an input/textarea)
+                    component.val(value);
+                }
+                else {
+                    // Fall back to original jQuery val()
+                    originalVal.call($el, value);
+                }
+            });
+            // Return this for jQuery chaining
+            return this;
+        }
+    };
+    // Component instance method
+    jQuery.fn.component = function (componentOrName, args = {}) {
+        const element = this.first ? this.first() : this;
+        if (!componentOrName) {
+            // Getter mode - return existing component or null
+            // Handle empty selector (no elements matched)
+            if (element.length === 0) {
+                return null;
+            }
+            const comp = element.data('_component');
+            // Return null if no component found (instead of throwing)
+            return comp || null;
+        }
+        // Check if component already exists on this element
+        const existingComponent = element.data('_component');
+        if (existingComponent) {
+            // Stop existing component (with error handling to continue on failure)
+            try {
+                existingComponent.stop();
+            }
+            catch (error) {
+                console.warn('[JQHTML] Error stopping existing component during replacement:', error);
+            }
+            // Remove component classes (any class starting with capital letter)
+            const classes = element.attr('class');
+            if (classes) {
+                const classList = classes.split(/\s+/);
+                const nonComponentClasses = classList.filter((cls) => {
+                    // Keep class if it doesn't start with capital letter
+                    return !cls || cls[0] !== cls[0].toUpperCase() || cls[0] === cls[0].toLowerCase();
+                });
+                element.attr('class', nonComponentClasses.join(' '));
+            }
+            // Remove component data
+            element.removeData('_component');
+        }
+        // Setter mode - create new component
+        let ComponentClass;
+        let componentName;
+        if (typeof componentOrName === 'string') {
+            // Look up by name (use default Component if not found)
+            componentName = componentOrName;
+            const found = get_component_class(componentOrName);
+            // Always pass _component_name when instantiating by string name
+            // This is critical for template resolution, especially when class is inherited via extends chain
+            // Example: 'Contacts_DataGrid' uses DataGrid_Abstract class but needs Contacts_DataGrid template
+            args = { ...args, _component_name: componentName };
+            if (!found) {
+                // Only warn if no template is defined either (truly undefined component)
+                // The get_template() call will handle the warning appropriately
+                // Use the base Jqhtml_Component class
+                ComponentClass = Jqhtml_Component;
+            }
+            else {
+                ComponentClass = found;
+            }
+        }
+        else {
+            // Direct class reference
+            ComponentClass = componentOrName;
+        }
+        // Check if element tag matches expected tag from template
+        let targetElement = element;
+        if (componentName) {
+            const template = get_template(componentName);
+            // Tag precedence: _tag (invocation) > tag (template) > 'div'
+            const expectedTag = args._tag || template.tag || 'div';
+            const currentTag = element.prop('tagName').toLowerCase();
+            if (currentTag !== expectedTag.toLowerCase()) {
+                // Tag mismatch
+                if (args._inner_html) {
+                    // Replace element with correct tag (only when using server-rendered content)
+                    const newElement = jQuery(`<${expectedTag}></${expectedTag}>`);
+                    // Copy all attributes from old element to new element
+                    const oldEl = element[0];
+                    if (oldEl && oldEl.attributes) {
+                        for (let i = 0; i < oldEl.attributes.length; i++) {
+                            const attr = oldEl.attributes[i];
+                            newElement.attr(attr.name, attr.value);
+                        }
+                    }
+                    // Copy innerHTML
+                    newElement.html(element.html());
+                    // Replace in DOM
+                    element.replaceWith(newElement);
+                    targetElement = newElement;
+                }
+                else if (currentTag !== 'body') {
+                    // Just warn - don't replace (suppress warning for <body> tags)
+                    console.warn(`[JQHTML] Component '${componentName}' expects tag '<${expectedTag}>' but element is '<${currentTag}>'. ` +
+                        `Element tag will not be changed. Consider using the correct tag.`);
+                }
+            }
+        }
+        // Create component instance - element first, then args
+        const component = new ComponentClass(targetElement, args);
+        // Boot the component (async, runs in background)
+        component._boot();
+        // Apply debug delay after component creation
+        applyDebugDelay('component');
+        // 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
+     *
+     * Opposite of closest(): searches downward instead of upward
+     * Stops traversal when a match is found (does not recurse into matched elements)
+     *
+     * Example:
+     *   <div id="root">
+     *     <div class="Widget">        <!-- MATCHED -->
+     *       <div class="Widget">      <!-- EXCLUDED (nested inside another .Widget) -->
+     *       </div>
+     *     </div>
+     *     <div class="Widget">        <!-- MATCHED -->
+     *     </div>
+     *   </div>
+     *
+     *   $('#root').shallowFind('.Widget') returns 2 elements (excludes nested one)
+     */
+    jQuery.fn.shallowFind = function (selector) {
+        const results = [];
+        // Process each element in the jQuery collection
+        this.each(function () {
+            // Recursive traversal function
+            const traverse = (parent) => {
+                // Check direct children
+                for (let i = 0; i < parent.children.length; i++) {
+                    const child = parent.children[i];
+                    // Check if this child matches the selector
+                    if (jQuery(child).is(selector)) {
+                        // Match found - add to results and DON'T recurse into it
+                        results.push(child);
+                    }
+                    else {
+                        // No match - recurse into this child
+                        traverse(child);
+                    }
+                }
+            };
+            // Start traversal from this element
+            traverse(this);
+        });
+        // Return jQuery collection of results
+        return jQuery(results);
+    };
+    // Store original jQuery methods
+    const originalEmpty = jQuery.fn.empty;
+    const originalHtml = jQuery.fn.html;
+    const originalText = jQuery.fn.text;
+    /**
+     * Override jQuery.fn.empty() to stop child components before clearing DOM
+     * This ensures component cleanup hooks fire when DOM is cleared
+     */
+    jQuery.fn.empty = function () {
+        return this.each(function () {
+            // Stop all child components before clearing DOM
+            jQuery(this).find('.Component').each(function () {
+                const component = jQuery(this).data('_component');
+                if (component && !component._stopped) {
+                    component._stop(); // Stop just the component, DOM will be cleared anyway
+                }
+            });
+            // Call original empty
+            originalEmpty.call(jQuery(this));
+        });
+    };
+    /**
+     * Override jQuery.fn.html() to stop child components when setting new content
+     * When used as setter, calls .empty() first to properly cleanup components
+     */
+    jQuery.fn.html = function (value) {
+        // Getter - just pass through
+        if (arguments.length === 0) {
+            return originalHtml.call(this);
+        }
+        // Setter - empty first (which stops components), then set content
+        return this.each(function () {
+            jQuery(this).empty();
+            originalHtml.call(jQuery(this), value);
+        });
+    };
+    /**
+     * Override jQuery.fn.text() to stop child components when setting new content
+     * When used as setter, calls .empty() first to properly cleanup components
+     */
+    jQuery.fn.text = function (value) {
+        // Getter - just pass through
+        if (arguments.length === 0) {
+            return originalText.call(this);
+        }
+        // Setter - empty first (which stops components), then set content
+        return this.each(function () {
+            jQuery(this).empty();
+            originalText.call(jQuery(this), value);
+        });
+    };
+}
+// Try to auto-initialize if global jQuery exists
+if (typeof window !== 'undefined' && window.jQuery) {
+    init_jquery_plugin(window.jQuery);
+}
+
+/**
+ * Jqhtml_Local_Storage - Scoped local storage for JQHTML component caching
+ *
+ * Provides safe, scoped access to localStorage with automatic handling of
+ * unavailable storage, quota exceeded errors, and scope invalidation.
+ *
+ * Key Features:
+ * - **Manual scoping**: Cache key must be set via set_cache_key() before use
+ * - **Graceful degradation**: Returns null when storage unavailable or cache key not set
+ * - **Quota management**: Auto-clears storage when full and retries operation
+ * - **Scope validation**: Clears storage when cache key changes
+ * - **Developer-friendly keys**: Scoped suffix allows easy inspection in dev tools
+ *
+ * Scoping Strategy:
+ * Storage is scoped by a user-provided cache key (typically a session identifier,
+ * user ID, or combination of relevant scope factors). This scope is stored in
+ * `_jqhtml_cache_key`. If the cache key changes between page loads, all JQHTML
+ * storage is cleared to prevent stale data from different sessions/users.
+ *
+ * Key Format:
+ * Keys are stored as: `jqhtml::developer_key::cache_key`
+ * Example: `jqhtml::User_Profile_data::user_123`
+ *
+ * The `jqhtml::` prefix identifies JQHTML keys, allowing safe clearing of only our keys
+ * without affecting other JavaScript libraries. This enables transparent coexistence
+ * with third-party libraries that also use browser storage.
+ *
+ * Quota Exceeded Handling:
+ * When storage quota is exceeded during a set operation, only JQHTML keys (prefixed with
+ * `jqhtml::`) are cleared, preserving other libraries' data. The operation is then retried
+ * once. This ensures the application continues functioning even when storage is full.
+ *
+ * Usage:
+ *   // Must set cache key first (typically done once on page load)
+ *   Jqhtml_Local_Storage.set_cache_key('user_123');
+ *
+ *   // Then use storage normally
+ *   Jqhtml_Local_Storage.set('cached_component', {html: '...', timestamp: Date.now()});
+ *   const cached = Jqhtml_Local_Storage.get('cached_component');
+ *   Jqhtml_Local_Storage.remove('cached_component');
+ *
+ * IMPORTANT - Volatile Storage:
+ * Storage can be cleared at any time due to:
+ * - User clearing browser data
+ * - Private browsing mode restrictions
+ * - Quota exceeded errors
+ * - Cache key changes
+ * - Browser storage unavailable
+ *
+ * Therefore, NEVER store critical data. Only use for:
+ * - Cached component HTML (performance optimization)
+ * - Transient UI state (convenience, not required)
+ *
+ * @internal This class is not exposed in the public API
+ */
+class Jqhtml_Local_Storage {
+    /**
+     * Set the cache key and initialize storage
+     * Must be called before any get/set operations
+     * @param {string} cache_key - Unique identifier for this cache scope
+     */
+    static set_cache_key(cache_key) {
+        this._cache_key = cache_key;
+        this._init();
+    }
+    /**
+     * Check if cache key has been set
+     * @returns {boolean} True if cache key is configured
+     */
+    static has_cache_key() {
+        return this._cache_key !== null;
+    }
+    /**
+     * Initialize storage system and validate scope
+     * Called automatically after cache key is set
+     * @private
+     */
+    static _init() {
+        // Check storage availability
+        if (this._storage_available === null) {
+            this._storage_available = this._is_storage_available();
+        }
+        if (!this._storage_available || !this._cache_key) {
+            return;
+        }
+        // Validate scope
+        this._validate_scope();
+        this._initialized = true;
+    }
+    /**
+     * Check if localStorage is available
+     * @returns {boolean}
+     * @private
+     */
+    static _is_storage_available() {
+        try {
+            const storage = window.localStorage;
+            const test = '__jqhtml_storage_test__';
+            storage.setItem(test, test);
+            storage.removeItem(test);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    /**
+     * Validate storage scope and clear JQHTML keys if cache key changed
+     * Only clears keys prefixed with 'jqhtml::' to preserve other libraries' data
+     * @private
+     */
+    static _validate_scope() {
+        if (!this._storage_available) {
+            return;
+        }
+        try {
+            const stored_key = localStorage.getItem('_jqhtml_cache_key');
+            // If cache key exists and has changed, clear only JQHTML keys
+            if (stored_key !== null && stored_key !== this._cache_key) {
+                console.log('[JQHTML Local Storage] Cache key changed, clearing JQHTML keys:', {
+                    old_key: stored_key,
+                    new_key: this._cache_key,
+                });
+                this._clear_jqhtml_keys();
+                localStorage.setItem('_jqhtml_cache_key', this._cache_key);
+            }
+            else if (stored_key === null) {
+                // First time JQHTML is using this storage - just set the key, don't clear
+                console.log('[JQHTML Local Storage] Initializing cache key (first use):', {
+                    new_key: this._cache_key,
+                });
+                localStorage.setItem('_jqhtml_cache_key', this._cache_key);
+            }
+        }
+        catch (e) {
+            console.error('[JQHTML Local Storage] Failed to validate scope:', e);
+        }
+    }
+    /**
+     * Clear only JQHTML keys from storage (keys starting with 'jqhtml::')
+     * Preserves keys from other libraries
+     * @private
+     */
+    static _clear_jqhtml_keys() {
+        if (!this._storage_available) {
+            return;
+        }
+        const keys_to_remove = [];
+        // Collect all JQHTML keys
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith('jqhtml::')) {
+                keys_to_remove.push(key);
+            }
+        }
+        // Remove collected keys
+        keys_to_remove.forEach(key => {
+            try {
+                localStorage.removeItem(key);
+            }
+            catch (e) {
+                console.error('[JQHTML Local Storage] Failed to remove key:', key, e);
+            }
+        });
+        console.log(`[JQHTML Local Storage] Cleared ${keys_to_remove.length} JQHTML keys`);
+    }
+    /**
+     * Build scoped key with JQHTML namespace prefix
+     * @param {string} key - Developer-provided key
+     * @returns {string}
+     * @private
+     */
+    static _build_key(key) {
+        return `jqhtml::${key}::${this._cache_key}`;
+    }
+    /**
+     * Check if storage is ready for use
+     * @returns {boolean}
+     * @private
+     */
+    static _is_ready() {
+        return this._storage_available === true && this._cache_key !== null && this._initialized;
+    }
+    /**
+     * Set item in localStorage
+     * @param {string} key - Storage key
+     * @param {*} value - Value to store (will be JSON serialized)
+     */
+    static set(key, value) {
+        if (!this._is_ready()) {
+            return;
+        }
+        // Check size before attempting to store (1MB limit)
+        const serialized = JSON.stringify(value);
+        const size_bytes = new Blob([serialized]).size;
+        const size_mb = size_bytes / (1024 * 1024);
+        if (size_mb > 1) {
+            console.warn(`[JQHTML Local Storage] Skipping set - value too large (${size_mb.toFixed(2)}MB > 1MB limit)`, { key, size_bytes, size_mb });
+            return;
+        }
+        this._set_item(key, value, serialized);
+    }
+    /**
+     * Get item from localStorage
+     * @param {string} key - Storage key
+     * @returns {*|null} Parsed value or null if not found/unavailable
+     */
+    static get(key) {
+        if (!this._is_ready()) {
+            return null;
+        }
+        return this._get_item(key);
+    }
+    /**
+     * Remove item from localStorage
+     * @param {string} key - Storage key
+     */
+    static remove(key) {
+        if (!this._is_ready()) {
+            return;
+        }
+        this._remove_item(key);
+    }
+    /**
+     * Internal set implementation with scope validation and quota handling
+     * @param {string} key
+     * @param {*} value - Original value (not used, kept for clarity)
+     * @param {string} serialized - Pre-serialized JSON string
+     * @private
+     */
+    static _set_item(key, value, serialized) {
+        // Validate scope before every write
+        this._validate_scope();
+        const scoped_key = this._build_key(key);
+        try {
+            localStorage.setItem(scoped_key, serialized);
+        }
+        catch (e) {
+            // Check if quota exceeded
+            if (e.name === 'QuotaExceededError' || e.code === 22) {
+                console.warn('[JQHTML Local Storage] Quota exceeded, clearing JQHTML keys and retrying');
+                // Clear only JQHTML keys and retry once
+                this._clear_jqhtml_keys();
+                localStorage.setItem('_jqhtml_cache_key', this._cache_key);
+                try {
+                    localStorage.setItem(scoped_key, serialized);
+                }
+                catch (retry_error) {
+                    console.error('[JQHTML Local Storage] Failed to set item after clearing JQHTML keys:', retry_error);
+                }
+            }
+            else {
+                console.error('[JQHTML Local Storage] Failed to set item:', e);
+            }
+        }
+    }
+    /**
+     * Internal get implementation
+     * @param {string} key
+     * @returns {*|null}
+     * @private
+     */
+    static _get_item(key) {
+        const scoped_key = this._build_key(key);
+        try {
+            const serialized = localStorage.getItem(scoped_key);
+            if (serialized === null) {
+                return null;
+            }
+            return JSON.parse(serialized);
+        }
+        catch (e) {
+            console.error('[JQHTML Local Storage] Failed to get item:', e);
+            return null;
+        }
+    }
+    /**
+     * Internal remove implementation
+     * @param {string} key
+     * @private
+     */
+    static _remove_item(key) {
+        const scoped_key = this._build_key(key);
+        try {
+            localStorage.removeItem(scoped_key);
+        }
+        catch (e) {
+            console.error('[JQHTML Local Storage] Failed to remove item:', e);
+        }
+    }
+}
+Jqhtml_Local_Storage._cache_key = null;
+Jqhtml_Local_Storage._storage_available = null;
+Jqhtml_Local_Storage._initialized = false;
+
+var localStorage$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Jqhtml_Local_Storage: Jqhtml_Local_Storage
+});
+
+/**
+ * Load Coordinator - Request deduplication for component on_load() calls
+ *
+ * Coordinates parallel component loading to prevent duplicate requests.
+ * When multiple components with identical names and args load simultaneously,
+ * only the first (leader) executes on_load(). Others (followers) wait for
+ * the leader's result.
+ *
+ * Key Concepts:
+ * - **INVOCATION_KEY**: Unique identifier for component name + args combination
+ * - **Leader**: First component to reach on_load() for a given INVOCATION_KEY
+ * - **Follower**: Subsequent components that wait for leader's result
+ *
+ * Lifecycle:
+ * 1. Leader reaches on_load() → create coordination entry
+ * 2. Followers reach on_load() → join waiting queue
+ * 3. Leader completes → distribute data to all followers
+ * 4. Clear coordination entry (no caching)
+ *
+ * @internal This class is not exposed in the public API
+ */
+class Load_Coordinator {
+    /**
+     * Generate INVOCATION_KEY from component name and args
+     * Uses deterministic JSON serialization (sorted keys)
+     * Excludes internal properties (those starting with _)
+     *
+     * For functions/objects:
+     * - Checks for ._jqhtml_cache_id property (assigned by RSpade)
+     * - Falls back to .jqhtml_cache_id() method if property doesn't exist
+     * - If neither exists, marks property as uncacheable
+     *
+     * Returns object with:
+     * - key: Cache key string, or null if uncacheable
+     * - uncacheable_property: Name of first property that prevented caching (for debugging)
+     */
+    static generate_invocation_key(component_name, args) {
+        let uncacheable_property;
+        // Filter out internal properties (starting with _) and serialize args
+        const serializable_args = {};
+        for (const key of Object.keys(args).sort()) {
+            if (key.startsWith('_')) {
+                continue; // Skip internal properties
+            }
+            const value = args[key];
+            const value_type = typeof value;
+            // Handle primitives (string, number, boolean, null, undefined)
+            if (value === null || value === undefined ||
+                value_type === 'string' || value_type === 'number' ||
+                value_type === 'boolean') {
+                serializable_args[key] = value;
+                continue;
+            }
+            // Handle functions and objects
+            if (value_type === 'function' || value_type === 'object') {
+                // Check for ._jqhtml_cache_id property (fastest, what RSpade assigns)
+                if (value._jqhtml_cache_id !== undefined) {
+                    serializable_args[key] = `__JQHTML_CACHE_ID__:${String(value._jqhtml_cache_id)}`;
+                    continue;
+                }
+                // Check for .jqhtml_cache_id() method (more flexible, for custom objects)
+                if (typeof value.jqhtml_cache_id === 'function') {
+                    try {
+                        const cache_id = value.jqhtml_cache_id();
+                        serializable_args[key] = `__JQHTML_CACHE_ID__:${String(cache_id)}`;
+                        continue;
+                    }
+                    catch (error) {
+                        // Method threw error - treat as uncacheable
+                        if (!uncacheable_property) {
+                            uncacheable_property = key;
+                        }
+                        return { key: null, uncacheable_property };
+                    }
+                }
+                // No cache ID available - this property is uncacheable
+                if (!uncacheable_property) {
+                    uncacheable_property = key;
+                }
+                return { key: null, uncacheable_property };
+            }
+            // Unknown type (symbol, bigint, etc.) - uncacheable
+            if (!uncacheable_property) {
+                uncacheable_property = key;
+            }
+            return { key: null, uncacheable_property };
+        }
+        // Try to serialize - if it fails (shouldn't happen now, but safety net), return null
+        try {
+            const sorted_args = JSON.stringify(serializable_args);
+            return { key: `${component_name}::${sorted_args}` };
+        }
+        catch (error) {
+            // Serialization failed unexpectedly
+            return { key: null, uncacheable_property };
+        }
+    }
+    /**
+     * Check if a component should execute on_load() or wait for existing request
+     * Returns true if component should execute (is leader), false if should wait (is follower)
+     */
+    static should_execute_on_load(component) {
+        const { key } = this.generate_invocation_key(component.component_name(), component.args);
+        const entry = this._registry.get(key);
+        if (!entry) {
+            // No existing request - this component becomes the leader
+            return true;
+        }
+        if (entry.status === 'loading') {
+            // Request in progress - this component becomes a follower
+            entry.waiting.push(component);
+            return false;
+        }
+        // Entry exists but completed/failed - should have been cleaned up
+        // Treat as new leader
+        return true;
+    }
+    /**
+     * Register a leader component that will execute on_load()
+     * Creates coordination entry and returns a function to call when on_load() completes
+     */
+    static register_leader(component, on_load_promise) {
+        const { key } = this.generate_invocation_key(component.component_name(), component.args);
+        const entry = {
+            status: 'loading',
+            promise: on_load_promise,
+            leader_component: component,
+            leader_data: null,
+            leader_error: null,
+            waiting: []
+        };
+        this._registry.set(key, entry);
+        // Return cleanup function to be called after on_load() completes
+        return () => this._complete_coordination(key, component);
+    }
+    /**
+     * Get the coordination promise for a follower component
+     * Returns a promise that resolves when the leader completes
+     */
+    static get_coordination_promise(component) {
+        const { key } = this.generate_invocation_key(component.component_name(), component.args);
+        const entry = this._registry.get(key);
+        if (!entry || entry.status !== 'loading') {
+            return null;
+        }
+        return entry.promise;
+    }
+    /**
+     * Complete coordination after leader's on_load() finishes
+     * Distributes data to all waiting followers and cleans up entry
+     * @private
+     */
+    static _complete_coordination(key, leader) {
+        const entry = this._registry.get(key);
+        if (!entry) {
+            return;
+        }
+        // Capture leader's final state
+        entry.leader_data = leader.data;
+        entry.status = 'completed';
+        // Distribute data to all waiting followers
+        for (const follower of entry.waiting) {
+            try {
+                // Copy leader's data to follower
+                follower.data = entry.leader_data;
+                if (window.jqhtml?.debug?.verbose) {
+                    console.log(`[Load Coordinator] Follower ${follower._cid} received data from leader ${leader._cid}`, { key, data: entry.leader_data });
+                }
+            }
+            catch (error) {
+                console.error(`[Load Coordinator] Failed to distribute data to follower ${follower._cid}:`, error);
+            }
+        }
+        // Clear coordination entry immediately (no caching)
+        this._registry.delete(key);
+        if (window.jqhtml?.debug?.verbose) {
+            console.log(`[Load Coordinator] Coordination complete for key: ${key}`, {
+                leader_cid: leader._cid,
+                followers_count: entry.waiting.length,
+                registry_size: this._registry.size
+            });
+        }
+    }
+    /**
+     * Handle leader on_load() error
+     * Propagates error to all followers and cleans up entry
+     */
+    static handle_leader_error(component, error) {
+        const { key } = this.generate_invocation_key(component.component_name(), component.args);
+        const entry = this._registry.get(key);
+        if (!entry) {
+            return;
+        }
+        entry.leader_error = error;
+        entry.status = 'failed';
+        console.error(`[Load Coordinator] Leader ${component._cid} on_load() failed for key: ${key}`, error);
+        // Propagate error to all followers
+        // Note: Followers will handle errors the same way as if their own on_load() failed
+        // This is transparent to the developer
+        for (const follower of entry.waiting) {
+            console.error(`[Load Coordinator] Follower ${follower._cid} failed due to leader error`, error);
+            // The follower's lifecycle will handle the error naturally
+            // as the promise rejection will propagate
+        }
+        // Clear coordination entry so future requests can retry
+        this._registry.delete(key);
+        if (window.jqhtml?.debug?.verbose) {
+            console.log(`[Load Coordinator] Cleared failed coordination for key: ${key}`, { followers_count: entry.waiting.length });
+        }
+    }
+    /**
+     * Get current registry state (for debugging)
+     */
+    static get_registry_state() {
+        const state = {};
+        for (const [key, entry] of this._registry.entries()) {
+            state[key] = {
+                status: entry.status,
+                leader_cid: entry.leader_component._cid,
+                waiting_count: entry.waiting.length,
+                waiting_cids: entry.waiting.map(c => c._cid)
+            };
+        }
+        return state;
+    }
+    /**
+     * Clear all coordination entries (for testing/debugging)
+     */
+    static clear_all() {
+        this._registry.clear();
+    }
+}
+Load_Coordinator._registry = new Map();
+
+var loadCoordinator = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Load_Coordinator: Load_Coordinator
+});
+
+/**
+ * JQHTML v2 Core Runtime
+ *
+ * Main entry point for the JQHTML runtime library
+ */
+// Core exports
+// Main initialization function
+function init(jQuery) {
+    // If jQuery is provided, initialize the plugin
+    if (jQuery) {
+        init_jquery_plugin(jQuery);
+    }
+    else if (typeof window !== 'undefined' && window.jQuery) {
+        // Try to use global jQuery
+        init_jquery_plugin(window.jQuery);
+    }
+    else {
+        throw new Error('jQuery is required for JQHTML. Please pass jQuery to init() or ensure it is available globally.');
+    }
+}
+// Version - will be replaced during build with actual version from package.json
+const version = '2.2.222';
+// Default export with all functionality
+const jqhtml = {
+    // Core
+    Jqhtml_Component,
+    LifecycleManager,
+    // Registry
+    register_component,
+    get_component_class,
+    register_template,
+    get_template,
+    get_template_by_class,
+    create_component,
+    has_component,
+    get_component_names,
+    get_registered_templates,
+    list_components,
+    // Template system
+    process_instructions,
+    extract_slots,
+    render_template,
+    escape_html,
+    // Version property - internal
+    __version: version,
+    // Debug settings
+    debug: {
+        enabled: false,
+        verbose: false
+    },
+    // Debug helper functions (mainly for internal use but exposed for advanced debugging)
+    setDebugSettings(settings) {
+        Object.assign(this.debug, settings);
+    },
+    enableDebugMode(level = 'basic') {
+        if (level === 'basic') {
+            this.debug.logCreationReady = true;
+            this.debug.logDispatch = true;
+            this.debug.flashComponents = true;
+        }
+        else {
+            this.debug.logFullLifecycle = true;
+            this.debug.logDispatchVerbose = true;
+            this.debug.flashComponents = true;
+            this.debug.profilePerformance = true;
+            this.debug.traceDataFlow = true;
+        }
+    },
+    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') {
+            window.jqhtml = this;
+            // Also install class references
+            window.Jqhtml_Component = Jqhtml_Component;
+            window.Jqhtml_LifecycleManager = LifecycleManager;
+        }
+    },
+    // Version display function - shows version of core library and all registered templates
+    _version() {
+        console.log(`JQHTML Core v${this.__version}`);
+        console.log('Registered Templates:');
+        const templateNames = get_component_names();
+        if (templateNames.length === 0) {
+            console.log('  (no templates registered)');
+        }
+        else {
+            for (const name of templateNames) {
+                const template = get_template(name);
+                const templateVersion = template ? (template._jqhtml_version || 'unknown') : 'unknown';
+                console.log(`  - ${name}: v${templateVersion}`);
+            }
+        }
+        return this.__version;
+    },
+    // Public version function - returns the stamped version number
+    version() {
+        return version;
+    },
+    // Cache key setter - enables component caching via local storage
+    set_cache_key(cache_key) {
+        Jqhtml_Local_Storage.set_cache_key(cache_key);
+    }
+};
+// Auto-register on window for browser environments
+// This is REQUIRED for compiled templates which use window.jqhtml.register_template()
+// Templates generated by @jqhtml/webpack-loader and other build tools expect this global
+// This ensures compatibility whether jqhtml is imported as ES module or loaded via script tag
+if (typeof window !== 'undefined' && !window.jqhtml) {
+    window.jqhtml = jqhtml;
+    // Also register the component classes for convenience
+    window.Jqhtml_Component = Jqhtml_Component;
+    window.Component = Jqhtml_Component; // For backwards compatibility
+    window.Jqhtml_LifecycleManager = LifecycleManager;
+    // Log in debug mode
+    if (jqhtml.debug?.enabled) {
+        console.log('[JQHTML] Auto-registered window.jqhtml global for template compatibility');
+    }
+}
+
+exports.DebugOverlay = DebugOverlay;
+exports.Jqhtml_Component = Jqhtml_Component;
+exports.Jqhtml_LifecycleManager = LifecycleManager;
+exports.Jqhtml_Local_Storage = Jqhtml_Local_Storage;
+exports.LifecycleManager = LifecycleManager;
+exports.Load_Coordinator = Load_Coordinator;
+exports.applyDebugDelay = applyDebugDelay;
+exports.create_component = create_component;
+exports.default = jqhtml;
+exports.devWarn = devWarn;
+exports.escape_html = escape_html;
+exports.extract_slots = extract_slots;
+exports.get_component_class = get_component_class;
+exports.get_component_names = get_component_names;
+exports.get_registered_templates = get_registered_templates;
+exports.get_template = get_template;
+exports.get_template_by_class = get_template_by_class;
+exports.handleComponentError = handleComponentError;
+exports.has_component = has_component;
+exports.hideDebugOverlay = hideDebugOverlay;
+exports.init = init;
+exports.init_jquery_plugin = init_jquery_plugin;
+exports.isSequentialProcessing = isSequentialProcessing;
+exports.list_components = list_components;
+exports.logDataChange = logDataChange;
+exports.logDispatch = logDispatch;
+exports.logInstruction = logInstruction;
+exports.logLifecycle = logLifecycle;
+exports.process_instructions = process_instructions;
+exports.register_component = register_component;
+exports.register_template = register_template;
+exports.render_template = render_template;
+exports.showDebugOverlay = showDebugOverlay;
+exports.version = version;
+//# sourceMappingURL=index.cjs.map