@jqhtml/core 2.3.64 → 2.3.68

package/dist/index.js

@@ -1,3 +1,194 @@
+/**
+ * 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() {
+    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();
+    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();
+    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();
+    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();
+    if (!jqhtml?.debug?.logInstructionProcessing)
+        return;
+    console.log(`[JQHTML Instruction] ${type}:`, data);
+}
+// Log data changes
+function logDataChange(component, property, oldValue, newValue) {
+    const jqhtml = getJqhtml();
+    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();
+    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();
+    return jqhtml?.debug?.sequentialProcessing || false;
+}
+// Error handling with break on error
+function handleComponentError(component, phase, error) {
+    const jqhtml = getJqhtml();
+    console.error(`[JQHTML Error] ${component.constructor.name}#${component._cid} failed in ${phase}:`, error);
+    if (jqhtml?.debug?.breakOnError) {
+        debugger; // This will pause execution in dev tools
+    }
+}
+// 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 Lifecycle Manager
  *
@@ -46,8 +237,9 @@ class LifecycleManager {
             // Check if stopped during create
             if (component._stopped)
                 return;
-            // Trigger create event
-            component.trigger('create');
+            // NOTE: no trigger('create') here. component.create() already fires it exactly
+            // once - its `_ready_state >= 1` guard makes a second create() a no-op, so this
+            // duplicate trigger only ever double-fired the event for subscribers.
             // Check for lifecycle truncation flags
             const load_only = component._load_only;
             const load_render_only = component._load_render_only;
@@ -173,8 +365,30 @@ class LifecycleManager {
                 return;
         }
         catch (error) {
-            console.error(`Error booting component ${component.component_name()}:`, error);
-            throw error;
+            // A boot that throws must leave a STOPPED component behind, not a half-booted
+            // one. The component never reaches 'ready', so an ancestor parked in
+            // _wait_for_children_ready() can only be released by the child's 'stop' event;
+            // nothing else stops it, so the whole subtree above it would hang forever.
+            //
+            // And the throw must stop here: _boot() is called unawaited by
+            // instruction-processor.initialize_component() and by the jQuery plugin, so a
+            // rethrow surfaces as an unhandled promise rejection instead of an error report.
+            // The error object stays a console.error argument so callers (and tests) that
+            // grep the console for the thrown message still see it.
+            try {
+                handleComponentError(component, 'boot', error);
+            }
+            catch {
+                // handleComponentError needs the global jqhtml object and throws without it.
+                // Never lose the original error to a failure in the reporting path.
+                console.error(`Error booting component ${component.component_name()}:`, error);
+            }
+            try {
+                component._stop();
+            }
+            catch (stop_error) {
+                console.error(`[JQHTML] on_stop() threw while unwinding a failed boot:`, stop_error);
+            }
         }
     }
     /**
@@ -183,20 +397,6 @@ class LifecycleManager {
     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);
-    }
 }
 
 /**
@@ -213,6 +413,23 @@ const COMPONENT_NAME_RULE = 'must start with a capital letter, optionally preced
 function is_component_name(name) {
     return COMPONENT_NAME_PATTERN.test(name);
 }
+/**
+ * The render-time check behind <{expression}>: the expression must evaluate
+ * to a component name string that a literal tag would accept - no more, no
+ * less. A valid name that names nothing renders the ordinary placeholder
+ * component, exactly as an undefined literal tag does.
+ */
+function dynamic_component_name(value) {
+    if (typeof value !== 'string' || value === '') {
+        const shown = value === '' ? 'an empty string' : typeof value === 'string' ? `'${value}'` : `${value === null ? 'null' : typeof value}`;
+        throw new Error(`[JQHTML] Dynamic component tag <{...}> evaluated to ${shown}; expected a non-empty component name string`);
+    }
+    if (!is_component_name(value)) {
+        throw new Error(`[JQHTML] Dynamic component tag <{...}> evaluated to '${value}', which is not a valid component name: ` +
+            `a component name ${COMPONENT_NAME_RULE}, then letters, digits and underscores`);
+    }
+    return value;
+}
 
 /**
  * JQHTML v2 Component Registry
@@ -642,30 +859,32 @@ function process_instructions(instructions, target, 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');
+    // Second pass: initialize special attributes and events.
+    // One querySelectorAll over the freshly injected subtree, in document
+    // order, rather than one querySelector per tracked element: a scan per
+    // element made this pass quadratic in the size of the template. Child
+    // components have not rendered yet (their elements are empty), so every
+    // data-tid here belongs to this level.
+    const root = target[0];
+    for (const el of Array.from(root.querySelectorAll('[data-tid]'))) {
+        const tagData = tagElements[el.getAttribute('data-tid')];
+        el.removeAttribute('data-tid');
+        if (tagData) {
             // Bind to the component whose template wrote this element, which for
             // spliced content is not the component being rendered.
-            apply_attributes(element, tagData.attrs, tagData.context);
+            apply_attributes($(el), tagData.attrs, tagData.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');
+    for (const el of Array.from(root.querySelectorAll('[data-cid]'))) {
+        const compData = components[el.getAttribute('data-cid')];
+        el.removeAttribute('data-cid');
+        if (compData) {
             // 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);
+            initialize_component($(el), compData);
         }
     }
 }
@@ -730,21 +949,13 @@ function process_tag_to_html(instruction, html, tagElements, components, context
         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}"`);
-            }
+            // A hand-written `id` is emitted exactly as written - including on a tracked
+            // element. It used to be rewritten to `<value>:<cid>` whenever the element
+            // happened to carry some OTHER tracked attribute, so `<label id="x" @click=…>`
+            // and `<label id="x">` disagreed. Per-instance ids are what $sid is for, and
+            // the compiler emits those already scoped (codegen.ts), so they arrive here as
+            // ordinary values and pass straight through.
+            html.push(` ${key}="${escape_attribute(value)}"`);
         }
     }
     // Close opening tag
@@ -755,6 +966,16 @@ function process_tag_to_html(instruction, html, tagElements, components, context
         html.push('>');
     }
 }
+/**
+ * A double quote inside an attribute value would end the attribute in the
+ * HTML string this pass builds; an interpolated value can never legitimately
+ * do that, so it is encoded. Nothing else is touched - the value is otherwise
+ * emitted exactly as the template produced it.
+ */
+function escape_attribute(value) {
+    const s = typeof value === 'string' ? value : String(value);
+    return s.indexOf('"') === -1 ? s : s.replace(/"/g, '&quot;');
+}
 /**
  * Process a component instruction to HTML
  */
@@ -1111,13 +1332,10 @@ async function initialize_component(element, compData) {
     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;
-    }
+    // Always pass the invocation name: it is what component_name() reports, it
+    // selects the template when the class is inherited via an extends chain or
+    // is the bare Jqhtml_Component, and it is the class the element carries.
+    options._component_name = name;
     // Pass lifecycle truncation flags via options (not DOM attributes, since _ prefix is filtered).
     // Accept both the plain key (cascaded/programmatic) and the '$'-prefixed key (template-authored).
     if (props._load_only === true || props['$_load_only'] === true) {
@@ -1133,210 +1351,19 @@ async function initialize_component(element, compData) {
     // 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() {
-    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();
-    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();
-    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();
-    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();
-    if (!jqhtml?.debug?.logInstructionProcessing)
-        return;
-    console.log(`[JQHTML Instruction] ${type}:`, data);
-}
-// Log data changes
-function logDataChange(component, property, oldValue, newValue) {
-    const jqhtml = getJqhtml();
-    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();
-    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();
-    return jqhtml?.debug?.sequentialProcessing || false;
-}
-// Error handling with break on error
-function handleComponentError(component, phase, error) {
-    const jqhtml = getJqhtml();
-    console.error(`[JQHTML Error] ${component.constructor.name}#${component._cid} failed in ${phase}:`, error);
-    if (jqhtml?.debug?.breakOnError) {
-        debugger; // This will pause execution in dev tools
+/**
+ * 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;
 }
-// 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 Cache Key Serializer
@@ -1605,15 +1632,12 @@ class Load_Coordinator {
     /**
      * 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)
+     *
+     * @param key - The dedup key the caller captured for this load. Every coordinator
+     *              method takes it, because args may legally change during on_load()
+     *              and a recomputed key would address a different (or no) entry.
      */
-    static should_execute_on_load(component) {
-        const { key } = this.generate_invocation_key(component.component_name(), component.args);
-        // No identity means no coordination. Without this, every un-keyable component
-        // would share the single `null` registry entry and adopt an unrelated
-        // component's data - the worst failure this system can produce.
-        if (key === null) {
-            return true;
-        }
+    static should_execute_on_load(component, key) {
         const entry = this._registry.get(key);
         if (!entry) {
             // No existing request - this component becomes the leader
@@ -1632,26 +1656,27 @@ class Load_Coordinator {
      * Register a leader component that will execute on_load()
      * Creates coordination entry and returns a function to call when data is ready
      *
+     * @param key - The dedup key captured by the caller (see should_execute_on_load)
      * @returns A function that accepts the final data and completes coordination
      */
-    static register_leader(component, on_load_promise) {
-        const { key } = this.generate_invocation_key(component.component_name(), component.args);
-        // Un-keyable component: run alone, register nothing. See should_execute_on_load().
-        if (key === null) {
-            return () => { };
-        }
-        // Create a promise that we control - it resolves when complete_coordination is called
+    static register_leader(component, key) {
+        // Create a promise that we control - it settles when coordination completes or fails
         let resolve_promise;
-        const coordination_promise = new Promise((resolve) => {
+        let reject_promise;
+        const coordination_promise = new Promise((resolve, reject) => {
             resolve_promise = resolve;
+            reject_promise = reject;
         });
+        // A leader with no followers still has to be able to reject this promise on
+        // error; without a handler that rejection surfaces as an unhandled rejection.
+        coordination_promise.catch(() => { });
         const entry = {
             status: 'loading',
-            promise: coordination_promise, // Followers await THIS promise, not on_load_promise
+            promise: coordination_promise, // Followers await THIS promise, not on_load's
             resolve_promise,
+            reject_promise,
             leader_component: component,
             leader_data: null,
-            leader_error: null,
             waiting: []
         };
         this._registry.set(key, entry);
@@ -1660,10 +1685,9 @@ class Load_Coordinator {
     }
     /**
      * Get the coordination promise for a follower component
-     * Returns a promise that resolves when the leader completes
+     * Returns a promise that resolves when the leader completes, or rejects if it failed
      */
-    static get_coordination_promise(component) {
-        const { key } = this.generate_invocation_key(component.component_name(), component.args);
+    static get_coordination_promise(key) {
         const entry = this._registry.get(key);
         if (!entry || entry.status !== 'loading') {
             return null;
@@ -1675,7 +1699,7 @@ class Load_Coordinator {
      * Stores leader's data, marks entry as completed, and resolves the promise.
      * Followers retrieve the data themselves via get_leader_data().
      *
-     * @param key - The coordination key
+     * @param key - The coordination key captured at registration
      * @param leader - The leader component
      * @param final_data - The final data after on_load and normalization
      * @private
@@ -1685,14 +1709,14 @@ class Load_Coordinator {
         if (!entry) {
             return;
         }
-        // Store the final data (already normalized by _apply_load_result)
-        // Deep clone to avoid sharing proxy objects between components
+        // Stored as TEXT so each follower parses its own object graph - sharing one
+        // decoded object would let one component's mutation reach every other.
         try {
-            entry.leader_data = JSON.parse(JSON.stringify(final_data));
+            entry.leader_data = JSON.stringify(final_data);
         }
         catch (error) {
-            // If data can't be serialized, use direct reference (may have issues)
-            entry.leader_data = final_data;
+            // Unserializable data cannot be shared; followers load independently.
+            entry.leader_data = null;
         }
         entry.status = 'completed';
         if (window.jqhtml?.debug?.verbose) {
@@ -1700,22 +1724,22 @@ class Load_Coordinator {
         }
         // Resolve the promise - followers waiting on it will now wake up
         entry.resolve_promise();
-        // Note: We do NOT delete the entry here anymore.
-        // Followers need to retrieve the data after the promise resolves.
-        // Entry will be cleaned up when last follower retrieves data.
+        // Nobody is waiting, so nothing will ever come back to collect the data.
+        // Without this the registry grows once per distinct name+args, forever.
+        if (entry.waiting.length === 0) {
+            this._registry.delete(key);
+        }
     }
     /**
      * Get leader's data for a follower component
      * Called by follower after coordination promise resolves
-     * Returns the data and cleans up if this is the last follower
+     * Returns a freshly parsed copy and cleans up if this is the last follower
+     *
+     * @param key - The dedup key captured by the follower before it began waiting
      */
-    static get_leader_data(component) {
-        const { key } = this.generate_invocation_key(component.component_name(), component.args);
-        if (!key) {
-            return null;
-        }
+    static get_leader_data(component, key) {
         const entry = this._registry.get(key);
-        if (!entry || entry.status !== 'completed') {
+        if (!entry || entry.status !== 'completed' || entry.leader_data === null) {
             return null;
         }
         // Remove this follower from the waiting list
@@ -1723,6 +1747,8 @@ class Load_Coordinator {
         if (follower_index !== -1) {
             entry.waiting.splice(follower_index, 1);
         }
+        // One parse per follower: each gets its OWN object, never a shared reference.
+        const data = JSON.parse(entry.leader_data);
         if (window.jqhtml?.debug?.verbose) {
             console.log(`[Load Coordinator] Follower ${component._cid} retrieving data from leader ${entry.leader_component._cid}`, { key, remaining_followers: entry.waiting.length });
         }
@@ -1733,29 +1759,25 @@ class Load_Coordinator {
                 console.log(`[Load Coordinator] Coordination complete for key: ${key}`, { registry_size: this._registry.size });
             }
         }
-        return entry.leader_data;
+        return data;
     }
     /**
      * Handle leader on_load() error
-     * Propagates error to all followers and cleans up entry
+     * Rejects every waiting follower and clears the entry so the next component retries
+     *
+     * @param key - The dedup key captured at registration
      */
-    static handle_leader_error(component, error) {
-        const { key } = this.generate_invocation_key(component.component_name(), component.args);
+    static handle_leader_error(key, error) {
         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
-        }
+        console.error(`[Load Coordinator] Leader ${entry.leader_component._cid} on_load() failed for key: ${key}`, error);
+        // Reject FIRST: followers are parked on this promise and their catch in _load()
+        // propagates the failure exactly as if their own on_load() had thrown. Deleting
+        // without rejecting left them awaiting a promise nobody could ever settle.
+        entry.reject_promise(error);
         // Clear coordination entry so future requests can retry
         this._registry.delete(key);
         if (window.jqhtml?.debug?.verbose) {
@@ -1854,6 +1876,31 @@ Load_Coordinator._registry = new Map();
  * - Transient UI state (convenience, not required)
  *
  * @internal This class is not exposed in the public API
+ *
+ * ---------------------------------------------------------------------------
+ * REPORTING WHAT WAS DROPPED
+ *
+ * `this.data` is always the serialized copy this file produces - in EVERY cache
+ * mode, including 'none' (see component.ts `_apply_load_result`). Whatever the
+ * serializer cannot express is therefore not merely missing from the cache, it
+ * is missing from `this.data`, and an author needs to be told once rather than
+ * discover it on the next cache hit.
+ *
+ * Two small optional parameters carry that:
+ *
+ *   process_for_serialization(value, verbose, seen, path, collector?)
+ *       `collector(path, kind)` is invoked for every value that is dropped or
+ *       degraded. `path` is a dotted/bracketed path from the root the caller
+ *       named; `kind` is one of Strip_Kind. Paths are only BUILT when a
+ *       collector is present, so the no-collector path costs nothing.
+ *
+ *   Jqhtml_Local_Storage.normalize_for_cache(value, component_name?)
+ *       With a component name, and only in development mode, each dropped path
+ *       prints exactly ONE console.warn for the life of the page (keyed
+ *       `${component_name}:${path}`, the same once-only shape as
+ *       warn_uncacheable_args in component-cache.ts). Production converts
+ *       silently. Neither ever throws.
+ * ---------------------------------------------------------------------------
  */
 // ============================================================================
 // Class Registry for Serialization
@@ -1862,7 +1909,7 @@ Load_Coordinator._registry = new Map();
 const class_registry = Object.create(null);
 // Markers for serialized class instances (unique to avoid collisions with user data)
 // Replaced at build time by rollup (see rollup.config.js).
-const CORE_VERSION = '2.3.64';
+const CORE_VERSION = '2.3.68';
 const CLASS_MARKER = '__jqhtml_class__';
 const PROPS_MARKER = '__jqhtml_props__';
 /**
@@ -1878,21 +1925,20 @@ function register_cache_class(klass) {
     }
     class_registry[klass.name] = klass;
 }
-// ============================================================================
-// Serialization (Object → String)
-// ============================================================================
 /**
  * Serialize a value to JSON string, handling ES6 class instances recursively.
  * Returns null if serialization fails for any reason.
  *
  * @param value - The value to serialize
  * @param verbose - Whether to log warnings
+ * @param path - Root path used when reporting drops (only used with a collector)
+ * @param collector - Optional reporter, see the file header
  * @returns Serialized JSON string, or null if serialization failed
  */
-function serialize_value(value, verbose) {
+function serialize_value(value, verbose, path = '', collector) {
     try {
         const seen = new WeakSet();
-        const processed = process_for_serialization(value, verbose, seen);
+        const processed = process_for_serialization(value, verbose, seen, path, collector);
         if (processed === undefined) {
             // Serialization failed - undefined signals failure
             return null;
@@ -1908,14 +1954,23 @@ function serialize_value(value, verbose) {
 }
 /**
  * Recursively process a value for serialization.
- * Returns undefined if serialization should fail (unserializable value encountered).
+ *
+ * Values the serializer cannot express are DROPPED, never passed through: the
+ * result of this function is what becomes `this.data`, so letting a function or
+ * a DOM node survive here would make `this.data` differ from what the cache can
+ * ever return. A dropped property is omitted from an object and becomes `null`
+ * in an array - JSON's own semantics for the same situation.
+ *
+ * Returns undefined for a value that has to be dropped.
  *
  * @param value - The value to process
  * @param verbose - Whether to log warnings
  * @param seen - WeakSet to detect circular references
- * @returns Processed value ready for JSON.stringify, or undefined if failed
+ * @param path - Dotted path of this value (only built when a collector is present)
+ * @param collector - Optional reporter for dropped/degraded values
+ * @returns Processed value ready for JSON.stringify, or undefined if dropped
  */
-function process_for_serialization(value, verbose, seen) {
+function process_for_serialization(value, verbose, seen, path = '', collector) {
     // Handle null and undefined
     if (value === null) {
         return null;
@@ -1930,12 +1985,44 @@ function process_for_serialization(value, verbose, seen) {
             return value;
         }
         // bigint, symbol, function cannot be serialized
+        if (typeof value === 'function') {
+            collector?.(path, 'function');
+        }
+        else if (typeof value === 'symbol') {
+            collector?.(path, 'symbol');
+        }
+        else if (typeof value === 'bigint') {
+            collector?.(path, 'bigint');
+        }
         if (verbose) {
             console.warn(`[JQHTML Cache] Cannot serialize ${typeof value} - value will be omitted`);
         }
         // Return undefined to omit this value (not fail entire serialization)
         return undefined;
     }
+    // Live objects that only LOOK like data. Each is checked before anything
+    // treats it as a bag of properties, because walking one produces a
+    // meaningless husk (a jQuery object becomes {0: ..., length: 1}) instead of
+    // the drop the author needs to hear about.
+    if (typeof value.nodeType === 'number') {
+        collector?.(path, 'dom-node');
+        return undefined;
+    }
+    if (value.jquery) {
+        collector?.(path, 'jquery');
+        return undefined;
+    }
+    // Duck-typed on purpose: importing Jqhtml_Component here would be a cycle
+    // (component.ts imports this file). _cid + component_name() is the pair no
+    // plain data object carries.
+    if (value._cid !== undefined && typeof value.component_name === 'function') {
+        collector?.(path, 'component');
+        return undefined;
+    }
+    if (typeof value.then === 'function') {
+        collector?.(path, 'promise');
+        return undefined;
+    }
     // Handle circular references.
     // `seen` tracks only the current ancestor path (the DFS stack): an object is
     // added on the way down and removed on the way back up (see finally below).
@@ -1944,10 +2031,11 @@ function process_for_serialization(value, verbose, seen) {
     // JSON round-trip semantics do not preserve identity anyway, so emitting a
     // copy per reference is correct; silently omitting the property is not.
     if (seen.has(value)) {
+        collector?.(path, 'circular');
         if (verbose) {
-            console.warn('[JQHTML Cache] Circular reference detected - cannot serialize');
+            console.warn('[JQHTML Cache] Circular reference detected - cutting the cycle');
         }
-        return undefined; // Fail entire serialization
+        return undefined; // Cut the cycle here; the rest of the tree still serializes
     }
     seen.add(value);
     try {
@@ -1956,7 +2044,7 @@ function process_for_serialization(value, verbose, seen) {
             const result = [];
             for (let i = 0; i < value.length; i++) {
                 const item = value[i];
-                const processed = process_for_serialization(item, verbose, seen);
+                const processed = process_for_serialization(item, verbose, seen, collector ? `${path}[${i}]` : '', collector);
                 // For arrays, we keep undefined as null to preserve indices
                 result.push(processed === undefined ? null : processed);
             }
@@ -1973,8 +2061,9 @@ function process_for_serialization(value, verbose, seen) {
         if (value instanceof Map) {
             const entries = [];
             for (const [k, v] of value) {
-                const processedKey = process_for_serialization(k, verbose, seen);
-                const processedValue = process_for_serialization(v, verbose, seen);
+                const entry_path = collector ? `${path}.get(${String(k)})` : '';
+                const processedKey = process_for_serialization(k, verbose, seen, entry_path, collector);
+                const processedValue = process_for_serialization(v, verbose, seen, entry_path, collector);
                 entries.push([processedKey, processedValue]);
             }
             return {
@@ -1985,8 +2074,9 @@ function process_for_serialization(value, verbose, seen) {
         // Handle Set objects
         if (value instanceof Set) {
             const items = [];
+            let index = 0;
             for (const item of value) {
-                items.push(process_for_serialization(item, verbose, seen));
+                items.push(process_for_serialization(item, verbose, seen, collector ? `${path}[Set ${index++}]` : '', collector));
             }
             return {
                 [CLASS_MARKER]: 'Set',
@@ -1997,58 +2087,115 @@ function process_for_serialization(value, verbose, seen) {
         const ctor = value.constructor;
         // Handle registered class instances
         if (ctor && ctor.name && class_registry[ctor.name]) {
-            const props = {};
-            // Extract own enumerable properties (bypass any toJSON method)
-            for (const key of Object.keys(value)) {
-                const propValue = value[key];
-                const processed = process_for_serialization(propValue, verbose, seen);
-                // Only include if not undefined (failed serialization)
-                if (processed !== undefined || propValue === undefined) {
-                    props[key] = processed;
-                }
-            }
             return {
                 [CLASS_MARKER]: ctor.name,
-                [PROPS_MARKER]: props
+                [PROPS_MARKER]: process_own_properties(value, verbose, seen, path, collector)
             };
         }
         // Handle plain objects (constructor is Object or no constructor)
         if (ctor === Object || ctor === undefined || ctor === null) {
-            const result = {};
-            for (const key of Object.keys(value)) {
-                const propValue = value[key];
-                const processed = process_for_serialization(propValue, verbose, seen);
-                // Only include if not undefined (unless original was undefined)
-                if (processed !== undefined || propValue === undefined) {
-                    result[key] = processed;
-                }
-            }
-            return result;
+            return process_own_properties(value, verbose, seen, path, collector);
         }
-        // Unregistered class instance - convert to plain object for hot/cold parity
-        // This ensures developers catch missing class registrations during development
-        // (methods will be lost, only properties preserved)
+        // Unregistered class instance - convert to plain object for hot/cold parity.
+        // Properties are preserved, prototype methods are lost, exactly as a cache
+        // hit would produce, so the loss shows up on the first load rather than on
+        // the next page view.
+        collector?.(path, 'unregistered-class', ctor.name);
         if (verbose) {
             console.warn(`[JQHTML Cache] Converting unregistered class "${ctor.name}" to plain object. ` +
                 `Methods will be lost. Call jqhtml.register_cache_class(${ctor.name}) to preserve the class.`);
         }
-        // Convert to plain object - properties are preserved, prototype methods are lost
-        const result = {};
-        for (const key of Object.keys(value)) {
-            const propValue = value[key];
-            const processed = process_for_serialization(propValue, verbose, seen);
-            // Only include if not undefined (unless original was undefined)
-            if (processed !== undefined || propValue === undefined) {
-                result[key] = processed;
-            }
-        }
-        return result;
+        return process_own_properties(value, verbose, seen, path, collector);
     }
     finally {
         // Pop this object off the ancestor path now that its subtree is done.
         seen.delete(value);
     }
 }
+/**
+ * Walk an object's own enumerable properties (bypassing any toJSON) into a plain
+ * object. Shared by plain objects, registered class instances and degraded
+ * unregistered instances - all three keep exactly the same property semantics.
+ */
+function process_own_properties(value, verbose, seen, path, collector) {
+    const result = {};
+    for (const key of Object.keys(value)) {
+        const propValue = value[key];
+        const processed = process_for_serialization(propValue, verbose, seen, collector ? `${path}.${key}` : '', collector);
+        // Only include if not undefined (unless original was undefined)
+        if (processed !== undefined || propValue === undefined) {
+            result[key] = processed;
+        }
+    }
+    return result;
+}
+// ============================================================================
+// Development warnings for dropped values
+// ============================================================================
+// One warning per component + path, for the life of the page. A list of 50 rows
+// each carrying an $on_select callback must print ONE warning, not 50, and must
+// not print it again on the next reload() or on the next instance of the same
+// component. Same shape as _warned_uncacheable in component-cache.ts.
+const _warned_stripped = new Set();
+/**
+ * What was lost, and where the value actually belongs. Every message names a
+ * destination, because "it was dropped" without "put it here instead" is not
+ * actionable.
+ */
+function strip_advice(kind, detail) {
+    switch (kind) {
+        case 'function':
+            return 'a function cannot be serialized. Callbacks are configuration, not loaded data - ' +
+                'pass it in this.args (from the parent template) and keep only ids in this.data.';
+        case 'promise':
+            return 'a promise cannot be serialized. Await it inside on_load() and store the RESULT, ' +
+                'or hold the pending promise in this.state.';
+        case 'dom-node':
+            return 'a DOM node cannot be serialized. Elements, timers, files and sockets belong in this.state.';
+        case 'jquery':
+            return 'a jQuery object cannot be serialized. Elements, timers, files and sockets belong in this.state.';
+        case 'component':
+            return 'a Jqhtml_Component cannot be serialized. Keep component references in this.state ' +
+                'and address children with this.sid().';
+        case 'symbol':
+            return 'a symbol cannot be serialized. Use a string, or keep it in this.state.';
+        case 'bigint':
+            return 'a bigint cannot be serialized. Convert it to a string in on_load(), or keep it in this.state.';
+        case 'circular':
+            return 'it points back to one of its own ancestors, and the cycle was cut. Store the graph ' +
+                'flat (ids instead of back-references) in this.data, or keep the linked form in this.state.';
+        case 'unregistered-class':
+            return `it is an instance of the unregistered class "${detail}", so it was degraded to a plain ` +
+                `object and its methods are gone. Call jqhtml.register_cache_class(${detail}) at startup ` +
+                `to get real instances back.`;
+    }
+}
+/**
+ * Build the collector normalize_for_cache() hands to the serializer, or
+ * `undefined` when nobody is listening - production, or a caller that named no
+ * component. Returning undefined (rather than a no-op function) is what keeps
+ * the serializer from building path strings at all on the hot path.
+ */
+function make_strip_collector(component_name) {
+    if (!component_name)
+        return undefined;
+    if (get_config().mode !== 'development')
+        return undefined;
+    return (path, kind, detail) => {
+        try {
+            const dedupe_key = `${component_name}:${path}`;
+            if (_warned_stripped.has(dedupe_key))
+                return;
+            _warned_stripped.add(dedupe_key);
+            console.warn(`[JQHTML] <${component_name}> dropped ${path} from this.data: ${strip_advice(kind, detail)}\n` +
+                `  this.data is always the serialized copy jqhtml stores in and restores from cache, ` +
+                `so only serializable values survive on_load() - in every cache mode.`, { component: component_name, path, kind });
+        }
+        catch {
+            // A warning must never be able to break a load.
+        }
+    };
+}
 // ============================================================================
 // Deserialization (String → Object)
 // ============================================================================
@@ -2392,36 +2539,36 @@ class Jqhtml_Local_Storage {
     /**
      * Perform a serialize/deserialize round-trip on a value.
      *
-     * This ensures "hot" data (fresh from on_load) behaves identically to "cold" data
-     * (restored from cache). Unregistered class instances will be converted to plain
-     * objects, exactly as they would be if restored from cache.
-     *
-     * Use this to normalize data after on_load() so developers catch missing class
-     * registrations immediately rather than only after a page reload.
+     * The result is ALWAYS jqhtml's own copy: nothing of the caller's object graph
+     * is aliased through, and a value the serializer cannot express is dropped
+     * rather than smuggled out. That is what makes `this.data` identical whether it
+     * came from on_load() or from a cache hit - the old "on failure return the
+     * original" branch broke exactly that promise, and only on the hard cases.
      *
      * @param {any} value - The value to normalize
-     * @returns {any} The value after serialize/deserialize round-trip, or original if serialization fails
+     * @param {string} [component_name] - Names the component in development warnings.
+     *        Omit to convert silently (the unit tests and non-component callers).
+     * @returns {any} The round-tripped value. Never the original object.
      */
-    static normalize_for_cache(value) {
+    static normalize_for_cache(value, component_name) {
         const verbose = this._is_verbose();
+        const collector = make_strip_collector(component_name);
         // Serialize to JSON string
-        const serialized = serialize_value(value, verbose);
+        const serialized = serialize_value(value, verbose, 'this.data', collector);
         if (serialized === null) {
-            // Serialization failed completely - return original
-            // (This happens with circular references or other fatal issues)
-            if (verbose) {
-                console.warn('[JQHTML Cache] normalize_for_cache: Serialization failed, returning original value');
-            }
-            return value;
+            // The value as a WHOLE could not be expressed (it was itself a function,
+            // a promise, a DOM node...). The round trip of such a value is nothing;
+            // returning the original would put an uncacheable object into this.data.
+            return {};
         }
         // Deserialize back to object
         const deserialized = deserialize_value(serialized, verbose);
-        if (deserialized === null) {
-            // Deserialization failed - return original
-            if (verbose) {
-                console.warn('[JQHTML Cache] normalize_for_cache: Deserialization failed, returning original value');
-            }
-            return value;
+        // `null` from deserialize_value() is ambiguous: it means "failed", but a value
+        // that legitimately serialized to the text `null` also comes back as null. The
+        // serialized text disambiguates.
+        if (deserialized === null && serialized !== 'null') {
+            // Only reachable when a registered class constructor blew up on restore.
+            return {};
         }
         return deserialized;
     }
@@ -2444,7 +2591,10 @@ class Jqhtml_Local_Storage {
                 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);
+                // Re-stamp the SCOPE MARKER, not the raw developer key: _validate_scope()
+                // compares against `${CORE_VERSION}::${key}`, so writing the bare key here
+                // made the very next write look like a scope change and wipe the cache again.
+                localStorage.setItem('_jqhtml_cache_key', this._scope_marker);
                 try {
                     localStorage.setItem(scoped_key, serialized);
                 }
@@ -2485,17 +2635,22 @@ Jqhtml_Local_Storage._initialized = false;
  * Extracted from component.ts - handles lifecycle event registration,
  * triggering, and state tracking.
  *
- * Events have "sticky" semantics for lifecycle events: if an event has already
- * occurred, new .on() handlers fire immediately with the stored data.
+ * EVERY event is "sticky", not just the lifecycle ones: trigger() records the event
+ * name and its payload, and a handler registered afterwards fires immediately with that
+ * last payload. This is deliberate and applies to custom events too - a subscriber that
+ * arrives after `trigger('row_selected', row)` still learns which row is selected,
+ * which is what makes late-attaching UI work without a separate "current state" read.
  */
 /**
  * Register a callback for an event.
  *
- * Lifecycle events (create, render, load, loaded, ready) are "sticky":
- * If a lifecycle event has already occurred, the callback fires immediately
- * AND registers for future occurrences.
+ * All events are "sticky", lifecycle (create, render, load, loaded, ready, stop) and
+ * custom alike: if the event has already been triggered, the callback fires immediately
+ * with the payload of that last trigger AND registers for future occurrences.
  *
- * Custom events only fire when explicitly triggered via trigger().
+ * invalidate(event_name) drops the stored marker when a component wants later
+ * subscribers to wait for the next real occurrence instead (reload() does this for
+ * 'ready').
  *
  * @param component - The component instance
  * @param event_name - Name of the event
@@ -2627,6 +2782,20 @@ function event_invalidate(component, event_name) {
  * - Data freeze/unfreeze enforcement via Proxy
  * - Detached on_load() execution with restricted access
  */
+/**
+ * JSON for an error message. The value being rejected is arbitrary author data and may
+ * be cyclic or otherwise unserializable - the diagnostic must never throw over the
+ * error it is trying to report.
+ */
+function safe_json(value) {
+    try {
+        const text = JSON.stringify(value);
+        return text === undefined ? String(value) : text;
+    }
+    catch {
+        return String(value);
+    }
+}
 /**
  * Set up the `this.data` property on a component using Object.defineProperty
  * with a Proxy that enforces freeze/unfreeze semantics.
@@ -2640,9 +2809,78 @@ function event_invalidate(component, event_name) {
  */
 function setup_data_property(component) {
     let _data = {};
+    // Wrapper memo for the deep-freeze proxies. Keyed by the RAW target object, so a
+    // value read twice returns the same wrapper and `this.data.items === this.data.items`
+    // holds - identity comparisons and `Set`/`Map` membership on nested data keep working.
+    // WeakMap: a wrapper dies with the object it wraps.
+    const frozen_wrappers = new WeakMap();
+    // Only plain objects and arrays are wrapped. Anything with a real prototype
+    // (Date, Map, Set, and classes restored by register_cache_class()) carries internal
+    // slots that a Proxy receiver cannot satisfy: `this.data.created.getTime()` would
+    // call the method with the proxy as `this` and throw. Those values pass through raw -
+    // a shallow hole we accept, because breaking Date/Map/Set reads would be worse than
+    // missing a rare mutation of one.
+    const is_wrappable = (value) => {
+        if (value === null || typeof value !== 'object')
+            return false;
+        if (Array.isArray(value))
+            return true;
+        const proto = Object.getPrototypeOf(value);
+        return proto === Object.prototype || proto === null;
+    };
+    // Dotted path for error messages: array indices read as [0], keys as .name
+    const join_path = (path, target, prop) => Array.isArray(target) ? `${path}[${String(prop)}]` : `${path}.${String(prop)}`;
+    const frozen_violation = (path, verb, value) => {
+        const value_text = verb === 'modify' ? ` = ${safe_json(value)}` : '';
+        console.error(`[JQHTML] ERROR: Component "${component.component_name()}" attempted to ${verb} ${path} 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` +
+            `NESTED VALUES COUNT: the freeze is DEEP. Mutating an object or array inside\n` +
+            `this.data (push, splice, assigning a property, delete) is modifying this.data.\n\n` +
+            `WHY: this.data represents loaded state. Modifying it outside these methods bypasses the framework's render cycle.\n\n` +
+            `FIX:\n` +
+            `  ❌ In on_ready(): ${path}${value_text};\n` +
+            `  ✅ In on_load(): fetch the value, so the framework can re-render\n` +
+            `  ✅ For component-local bookkeeping: this.state (unrestricted, never cached)`);
+        throw new Error(`[JQHTML] Cannot ${verb} ${path} outside of on_create() or on_load(). ` +
+            `this.data is frozen after on_create() and unfrozen only during on_load(). ` +
+            `The freeze is deep - nested objects and arrays are frozen too.`);
+    };
+    // Read-only view of a nested value. Handed out ONLY while __data_frozen is true
+    // (the top-level get trap checks), so the traps here never need to re-check: a
+    // wrapper the author kept a reference to stays read-only for its whole life.
+    const create_frozen_wrapper = (obj, path) => {
+        const existing = frozen_wrappers.get(obj);
+        if (existing)
+            return existing;
+        const wrapper = new Proxy(obj, {
+            get: (target, prop) => {
+                const value = target[prop];
+                // Functions are returned raw: array methods are invoked with the wrapper as
+                // `this`, so push/splice still land in this trap's set/deleteProperty.
+                return is_wrappable(value) ? create_frozen_wrapper(value, join_path(path, target, prop)) : value;
+            },
+            set: (target, prop, value) => frozen_violation(join_path(path, target, prop), 'modify', value),
+            deleteProperty: (target, prop) => frozen_violation(join_path(path, target, prop), 'delete')
+        });
+        frozen_wrappers.set(obj, wrapper);
+        return wrapper;
+    };
     // Helper to create frozen proxy for data object
     const create_proxy = (obj) => {
         return new Proxy(obj, {
+            get: (target, prop) => {
+                const value = target[prop];
+                // Deep freeze: while frozen, every nested object/array is read through a
+                // read-only wrapper, so this.data.items.push(x) throws instead of silently
+                // mutating. Unfrozen (on_create, on_load's detached run, _apply_load_result)
+                // reads return the raw value, because those phases may legally mutate it.
+                if (component.__data_frozen && is_wrappable(value)) {
+                    return create_frozen_wrapper(value, `this.data.${String(prop)}`);
+                }
+                return value;
+            },
             set: (target, prop, value) => {
                 if (component.__data_frozen) {
                     console.error(`[JQHTML] ERROR: Component "${component.component_name()}" attempted to modify this.data.${String(prop)} outside of on_create() or on_load().\n\n` +
@@ -2712,10 +2950,13 @@ function setup_data_property(component) {
  * All other property access (this.$, this.$sid, etc.) throws errors.
  *
  * @param component - The component instance
- * @param use_load_coordinator - Whether to use Load_Coordinator for deduplication
+ * @param dedup_key - The dedup key captured by the caller, or null to run uncoordinated.
+ *                    The key is passed in rather than recomputed because args may legally
+ *                    change while on_load() runs, and a recomputed key would address a
+ *                    different entry than the one this leader registered.
  * @returns The resulting data and optional coordination completion function
  */
-async function execute_on_load_detached(component, use_load_coordinator = false) {
+async function execute_on_load_detached(component, dedup_key = null) {
     // Clone this.data from the snapshot captured after on_create()
     const data_clone = component.__initial_data_snapshot
         ? JSON.parse(JSON.stringify(component.__initial_data_snapshot))
@@ -2723,14 +2964,23 @@ async function execute_on_load_detached(component, use_load_coordinator = false)
     // Create a read-only proxy for args that blocks all modifications
     // Can't use JSON clone because args may contain functions (_slots, callbacks)
     const component_name = component.component_name();
+    // Wrapper memo for this one on_load() run. Without it every nested read built a
+    // fresh Proxy, so `this.args.filter !== this.args.filter` for an object arg and
+    // identity comparisons inside on_load() silently failed. Lives only for the duration
+    // of this call - args may legally be replaced between loads.
+    const readonly_wrappers = new WeakMap();
     const create_readonly_proxy = (obj, path = 'this.args') => {
         if (obj === null || typeof obj !== 'object')
             return obj;
-        return new Proxy(obj, {
+        const existing = readonly_wrappers.get(obj);
+        if (existing)
+            return existing;
+        const proxy = new Proxy(obj, {
             get(target, prop) {
                 const value = target[prop];
-                // Recursively wrap nested objects (but not functions)
-                if (value !== null && typeof value === 'object' && typeof value !== 'function') {
+                // Recursively wrap nested objects. Functions are returned raw - `typeof value`
+                // is already 'object' here, so a function never reaches this branch.
+                if (value !== null && typeof value === 'object') {
                     return create_readonly_proxy(value, `${path}.${String(prop)}`);
                 }
                 return value;
@@ -2752,6 +3002,8 @@ async function execute_on_load_detached(component, use_load_coordinator = false)
                     `this.args is read-only in on_load().`);
             }
         });
+        readonly_wrappers.set(obj, proxy);
+        return proxy;
     };
     // Create a detached context object that on_load will operate on
     const detached_context = {
@@ -2811,27 +3063,22 @@ async function execute_on_load_detached(component, use_load_coordinator = false)
                 `Only this.data can be modified in on_load().`);
         }
     });
-    // Create promise for this on_load() call
-    const on_load_promise = (async () => {
-        try {
-            await component._call_lifecycle('on_load', restricted_this);
-        }
-        catch (error) {
-            if (use_load_coordinator) {
-                // Handle error and notify coordinator
-                Load_Coordinator.handle_leader_error(component, error);
-            }
-            throw error;
-        }
-    })();
-    // If using Load_Coordinator, register as leader
-    // Note: We store the completion function but DON'T call it here
-    // It will be called by _load() after _apply_load_result() updates this.data
+    // Register as leader BEFORE on_load() runs, so the error path always finds the entry
+    // it has to reject. The completion function is stored, not called here: _load() calls
+    // it after _apply_load_result() has updated this.data.
     let complete_coordination = null;
-    if (use_load_coordinator) {
-        complete_coordination = Load_Coordinator.register_leader(component, on_load_promise);
+    if (dedup_key !== null) {
+        complete_coordination = Load_Coordinator.register_leader(component, dedup_key);
+    }
+    try {
+        await component._call_lifecycle('on_load', restricted_this);
+    }
+    catch (error) {
+        if (dedup_key !== null) {
+            Load_Coordinator.handle_leader_error(dedup_key, error);
+        }
+        throw error;
     }
-    await on_load_promise;
     // Note: We don't validate args changes here because external code (like parent
     // components calling reload()) is allowed to modify component.args during on_load().
     // The read-only proxy only prevents code INSIDE on_load() from modifying args.
@@ -2933,6 +3180,21 @@ function warn_uncacheable_component(component, uncacheable_property, uncacheable
         all_args: component.args ? Object.keys(component.args) : [],
     });
 }
+/**
+ * Read an HTML-cache entry, rejecting anything that is not a well-formed snapshot.
+ * Entries written by an older core are bare strings; they are treated as a miss (and
+ * are cleared wholesale by the CORE_VERSION scope marker on the next version bump).
+ */
+function read_html_snapshot(html_cache_key) {
+    const entry = Jqhtml_Local_Storage.get(html_cache_key);
+    if (entry !== null &&
+        typeof entry === 'object' &&
+        typeof entry.cid === 'string' &&
+        typeof entry.html === 'string') {
+        return entry;
+    }
+    return null;
+}
 /**
  * Read cache during create() phase.
  * Sets component._cache_key, _cached_html, _use_cached_data_hit as side effects.
@@ -2964,11 +3226,11 @@ function read_cache_in_create(component) {
     if (cache_mode === 'html') {
         // HTML cache mode - check for cached HTML to inject on first render
         const html_cache_key = `${cache_key}::html`;
-        const cached_html = Jqhtml_Local_Storage.get(html_cache_key);
-        if (cached_html !== null && typeof cached_html === 'string') {
+        const cached_html = read_html_snapshot(html_cache_key);
+        if (cached_html !== null) {
             component._cached_html = cached_html;
             if (window.jqhtml?.debug?.verbose) {
-                console.log(`[Cache html] Component ${component._cid} (${component.component_name()}) found cached HTML`, { cache_key: html_cache_key, html_length: cached_html.length });
+                console.log(`[Cache html] Component ${component._cid} (${component.component_name()}) found cached HTML`, { cache_key: html_cache_key, html_length: cached_html.html.length, snapshot_cid: cached_html.cid });
             }
         }
         else {
@@ -3025,10 +3287,10 @@ function check_cache_on_reload(component) {
     if (cache_mode === 'html') {
         // HTML cache mode - check for cached HTML
         const html_cache_key = `${cache_key}::html`;
-        const cached_html = Jqhtml_Local_Storage.get(html_cache_key);
-        if (cached_html !== null && typeof cached_html === 'string') {
+        const cached_html = read_html_snapshot(html_cache_key);
+        if (cached_html !== null) {
             if (window.jqhtml?.debug?.verbose) {
-                console.log(`[Cache html] reload() - Component ${component._cid} (${component.component_name()}) found cached HTML (args changed)`, { cache_key: html_cache_key, html_length: cached_html.length });
+                console.log(`[Cache html] reload() - Component ${component._cid} (${component.component_name()}) found cached HTML (args changed)`, { cache_key: html_cache_key, html_length: cached_html.html.length, snapshot_cid: cached_html.cid });
             }
             component._cached_html = cached_html;
             // Call _render() directly (not render()) since _reload() manages the full lifecycle
@@ -3069,7 +3331,11 @@ function write_html_cache_snapshot(component) {
         component._should_cache_html_after_ready = false;
         const html = component.$.html();
         const html_cache_key = `${component._cache_key}::html`;
-        Jqhtml_Local_Storage.set(html_cache_key, html);
+        // Store the cid this markup was rendered under alongside it: every scoped id inside
+        // reads "<name>:<cid>", and a reader cannot tell the snapshotting component's own
+        // elements from its children's without knowing which cid was the owner's.
+        // See Jqhtml_Component._rescope_cached_html().
+        Jqhtml_Local_Storage.set(html_cache_key, { cid: component._cid, html });
         if (window.jqhtml?.debug?.verbose) {
             console.log(`[Cache html] Component ${component._cid} (${component.component_name()}) cached HTML after children on_render complete`, { cache_key: html_cache_key, html_length: html.length });
         }
@@ -3109,16 +3375,158 @@ function write_cache_on_loaded(component, data_changed) {
     }
 }
 
+/**
+ * HTML escaping for interpolated text.
+ *
+ * Output matches what `div.textContent = s; div.innerHTML` produced before -
+ * a text node serialises only &, < and > as entities, and null/undefined as
+ * "" - but without touching the DOM. Interpolation runs for every value of
+ * every render, and a createElement per value was the most expensive thing a
+ * text-heavy template did.
+ */
+const NEEDS_ESCAPE = /[&<>]/;
+const ESCAPE_ALL = /[&<>]/g;
+const ENTITY = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
+const to_entity = (c) => ENTITY[c];
+function escape_html(value) {
+    if (value === null || value === undefined)
+        return '';
+    const s = typeof value === 'string' ? value : String(value);
+    return NEEDS_ESCAPE.test(s) ? s.replace(ESCAPE_ALL, to_entity) : s;
+}
+/** Escaped, then newlines become <br /> - the <%br= %> construct. */
+function escape_html_nl2br(value) {
+    return escape_html(value).replace(/\n/g, '<br />');
+}
+
+/**
+ * Value printers: how <%= %> renders an OBJECT.
+ *
+ * Primitives never come here - the generated template code routes only
+ * non-null, non-array objects to print_object(), so a hundred-row list of
+ * strings costs exactly what it did before. An object reaching an
+ * interpolation is walked through the printer chain in registration order;
+ * the first printer to return anything but undefined handles it. A printer
+ * returns a string (escaped or not according to the construct, exactly as a
+ * string literal at that site) or a component descriptor:
+ *
+ *   { component: { name: 'Rich_Text_Display', args: { value }, attrs: { class: 'x' } } }
+ *
+ * which jqhtml mounts as if the template had written the tag - live in the
+ * browser, server-rendered under SSR - with no environment awareness on the
+ * printer's side. A descriptor carries no content.
+ *
+ * Attribute position (<div title="<%= v %>">) compiles through a different
+ * path and never consults printers.
+ */
+const printers = [];
+/**
+ * Register a printer at the end of the chain. Printers run in registration
+ * order; return undefined to decline, a string, or a component descriptor.
+ */
+function add_object_printer(printer) {
+    if (typeof printer !== 'function') {
+        throw new Error('[JQHTML] add_object_printer() expects a function (value) => undefined | string | descriptor');
+    }
+    printers.push(printer);
+}
+/** The registered printers, in order. Read-only view for diagnostics. */
+function get_object_printers() {
+    return printers;
+}
+/**
+ * Render an object at an interpolation site. Called by compiled templates for
+ * every non-null, non-array object reaching <%= %>, <%!= %> or <%br= %>.
+ * Throws when nothing handles the value or a printer returns garbage.
+ */
+function print_object(value, mode) {
+    if (value === null || typeof value !== 'object') {
+        throw new TypeError(`[JQHTML] print_object() is the object branch of interpolation; got ${typeof value}`);
+    }
+    for (let i = 0; i < printers.length; i++) {
+        const result = printers[i](value);
+        if (result === undefined)
+            continue;
+        if (typeof result === 'string')
+            return print_string(result, mode);
+        if (is_descriptor(result))
+            return descriptor_to_instruction(result, i);
+        throw new Error(`[JQHTML] Object printer #${i + 1} of ${printers.length} returned ${describe(result)}; ` +
+            `a printer must return undefined (decline), a string, or a { component: { name, args, attrs } } descriptor`);
+    }
+    throw new Error(`[JQHTML] Cannot interpolate a ${constructor_name(value)} object: ` +
+        (printers.length
+            ? `none of the ${printers.length} registered object printer(s) handled it. `
+            : `no object printers are registered. `) +
+        `Register one with jqhtml.add_object_printer(fn), or interpolate a primitive.`);
+}
+function print_string(text, mode) {
+    if (mode === 'escape')
+        return escape_html(text);
+    if (mode === 'nl2br')
+        return escape_html_nl2br(text);
+    return text;
+}
+function is_descriptor(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value) &&
+        !!value.component && typeof value.component === 'object' && !Array.isArray(value.component);
+}
+function descriptor_to_instruction(descriptor, index) {
+    const { name, args, attrs } = descriptor.component;
+    const where = `Object printer #${index + 1}`;
+    if (typeof name !== 'string' || !is_component_name(name)) {
+        throw new Error(`[JQHTML] ${where} returned a descriptor whose component name ${describe(name)} is invalid: ` +
+            `a component name ${COMPONENT_NAME_RULE}, then letters, digits and underscores`);
+    }
+    const props = {};
+    if (attrs !== undefined) {
+        if (!is_plain_object(attrs))
+            throw new Error(`[JQHTML] ${where}: descriptor attrs must be a plain object`);
+        for (const [key, value] of Object.entries(attrs)) {
+            if (key.startsWith('$'))
+                throw new Error(`[JQHTML] ${where}: descriptor attrs key '${key}' - component arguments go in args, without the $ sigil`);
+            props[key] = value;
+        }
+    }
+    if (args !== undefined) {
+        if (!is_plain_object(args))
+            throw new Error(`[JQHTML] ${where}: descriptor args must be a plain object`);
+        for (const [key, value] of Object.entries(args)) {
+            if (key.startsWith('$'))
+                throw new Error(`[JQHTML] ${where}: descriptor args key '${key}' - the $ sigil is template syntax, not part of the argument name`);
+            props[`$${key}`] = value;
+        }
+    }
+    return { comp: [name, props] };
+}
+function is_plain_object(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function constructor_name(value) {
+    const ctor = value.constructor;
+    return ctor && ctor.name ? ctor.name : 'Object';
+}
+function describe(value) {
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return `'${value}'`;
+    if (typeof value === 'object')
+        return Array.isArray(value) ? 'an array' : `a ${constructor_name(value)} object without a valid component property`;
+    return `${typeof value} ${String(value)}`;
+}
+
 /**
  * JQHTML Component Lifecycle Queue
  *
- * Serializes lifecycle operations (render, reload, refresh) per component.
+ * Serializes lifecycle operations (render, reload, refresh, load) per component.
  * Replaces _create_debounced_function with a proper queue that:
  *
  * - At most one operation runs at a time per component
- * - At most one operation is pending (waiting for the current to finish)
- * - Same-type pending operations collapse (fan-in: all callers share one execution)
- * - Different-type pending operations: new replaces old (old callers get the new result)
+ * - At most one PENDING entry per type; different types queue behind each other FIFO
+ * - Same-type pending operations collapse: the newest executor wins, and every
+ *   collapsed caller is settled with the value of the executor that actually ran
+ * - A caller is settled BEFORE the next pending entry starts
  *
  * Boot bypasses this queue entirely - it runs the lifecycle directly.
  */
@@ -3126,92 +3534,106 @@ class Component_Queue {
     constructor() {
         /** Currently executing operation */
         this._current = null;
-        /** Next operation waiting to execute after current completes */
-        this._pending = null;
+        /**
+         * Operations waiting to run after the current one, in FIFO order.
+         * At most one entry per type: a second reload() while a reload is pending
+         * collapses into it, but a render() queued over a pending reload() is its
+         * own entry and both run. Replacing the older entry (the previous behaviour)
+         * dropped that operation entirely while still resolving its callers as if it
+         * had run.
+         */
+        this._pending = [];
     }
     /**
      * Enqueue a lifecycle operation.
      *
      * Behavior:
      * - Nothing running → execute immediately
-     * - Something running, no pending → create pending entry
-     * - Something running, same type pending → collapse (share pending promise)
-     * - Something running, different type pending → replace pending (all callers get new result)
+     * - Something running, no pending entry of this type → queue one (FIFO)
+     * - Something running, same type pending → collapse: keep every caller, but
+     *   swap in the newest executor ("only the most recent call executes")
+     *
+     * Every caller collapsed onto one entry receives the value that entry's
+     * executor returned - or its error, if it threw.
      *
      * @param type - Operation type ('render', 'reload', 'refresh', 'load')
      * @param executor - The async function to execute
-     * @returns Promise that resolves when the operation completes
+     * @returns Promise that settles with the result of the execution that ran
      */
     enqueue(type, executor) {
-        // If nothing running, execute immediately
+        // If nothing running, execute immediately.
+        // The Promise executor runs synchronously, so the operation's synchronous
+        // prologue (_render(), the ready invalidation) still happens in the calling
+        // tick, as it did before the queue existed.
         if (!this._current) {
-            return this._execute(type, executor);
-        }
-        // Something is running — add to pending
-        if (this._pending) {
-            if (this._pending.type === type) {
-                // Same type pending → collapse (fan-in)
-                // All callers share the same future execution
-                return new Promise((resolve, reject) => {
-                    this._pending.resolvers.push(resolve);
-                    this._pending.rejecters.push(reject);
-                });
-            }
-            else {
-                // Different type pending → replace
-                // Old pending callers join the new operation
-                // (their operation was superseded by a different type)
-                const old_resolvers = this._pending.resolvers;
-                const old_rejecters = this._pending.rejecters;
-                return new Promise((resolve, reject) => {
-                    this._pending = {
-                        type,
-                        executor,
-                        resolvers: [...old_resolvers, resolve],
-                        rejecters: [...old_rejecters, reject]
-                    };
-                });
-            }
+            return new Promise((resolve, reject) => {
+                this._run({ type, executor, resolvers: [resolve], rejecters: [reject] });
+            });
         }
-        // No pending entry yet — create one
+        const existing = this._pending.find(entry => entry.type === type);
+        if (existing) {
+            // Same type already pending → collapse (fan-in).
+            // The newest executor replaces the pending one: the documented rule is
+            // "only the most recent call executes", and the older closure may carry
+            // stale arguments. Keeping the OLD executor made two rapid `await load()`
+            // calls resolve the second one `false` without ever running on_load().
+            existing.executor = executor;
+            return new Promise((resolve, reject) => {
+                existing.resolvers.push(resolve);
+                existing.rejecters.push(reject);
+            });
+        }
+        // No pending entry of this type yet — queue one behind whatever is already waiting.
         return new Promise((resolve, reject) => {
-            this._pending = {
-                type,
-                executor,
-                resolvers: [resolve],
-                rejecters: [reject]
-            };
+            this._pending.push({ type, executor, resolvers: [resolve], rejecters: [reject] });
         });
     }
     /**
-     * Execute an operation and handle pending queue after completion.
+     * Run one entry, settle its callers, then start the next pending entry.
      * @private
      */
-    _execute(type, executor) {
+    _run(entry) {
+        // Mark busy BEFORE invoking the executor: the executor's synchronous prologue
+        // can call back into enqueue(), and that call must queue rather than start a
+        // second concurrent operation.
+        this._current = { type: entry.type };
         const promise = (async () => {
             try {
-                await executor();
+                const value = await entry.executor();
+                // Settle this entry's callers FIRST, while the queue still reads as busy.
+                for (const resolve of entry.resolvers)
+                    resolve(value);
             }
-            finally {
-                this._current = null;
-                // Run pending if exists
-                if (this._pending) {
-                    const pending = this._pending;
-                    this._pending = null;
-                    try {
-                        await this._execute(pending.type, pending.executor);
-                        for (const resolve of pending.resolvers)
-                            resolve();
-                    }
-                    catch (err) {
-                        for (const reject of pending.rejecters)
-                            reject(err);
-                    }
-                }
+            catch (error) {
+                // A throwing executor rejects only its own callers; the queue continues.
+                for (const reject of entry.rejecters)
+                    reject(error);
             }
         })();
-        this._current = { type, promise };
-        return promise;
+        // The drain is deliberately OUTSIDE the awaited chain above: chaining it
+        // inside made `await c.render()` also wait for a reload that was queued
+        // after it.
+        promise.then(() => {
+            if (this._pending.length === 0) {
+                // Nothing queued: release immediately, so the very common
+                // `await c.reload(); c.render();` still starts the render in that tick.
+                this._current = null;
+                return;
+            }
+            // A queued entry must not start until every caller of the operation that
+            // just finished has actually resumed. Those callers sit behind an unknown
+            // number of microtask hops - an `async` public method adds two just by
+            // returning the queue's promise - so draining on a microtask would start
+            // the next on_load() before the previous caller's `await` came back. A
+            // macrotask is the only boundary that is after all of them. _current stays
+            // set until then, so nothing can start concurrently in the meantime.
+            setTimeout(() => {
+                this._current = null;
+                const next = this._pending.shift();
+                if (next)
+                    this._run(next);
+            }, 0);
+        });
     }
     /**
      * Check if any operation is currently running.
@@ -3223,7 +3645,7 @@ class Component_Queue {
      * Check if there's a pending operation waiting.
      */
     get has_pending() {
-        return this._pending !== null;
+        return this._pending.length > 0;
     }
 }
 
@@ -3274,11 +3696,16 @@ function capture_component_data(component_name, args, data, cache_key) {
     try {
         const cloned_args = JSON.parse(JSON.stringify(args));
         const cloned_data = JSON.parse(JSON.stringify(data));
-        _capture_buffer.push({
+        const entry = {
             component: component_name,
             args: cloned_args,
             data: cloned_data,
-        });
+        };
+        // Carry the key forward so the client matches on the SAME identity the server
+        // used, rather than re-deriving one from args and hoping the shapes agree.
+        if (cache_key !== null)
+            entry.key = cache_key;
+        _capture_buffer.push(entry);
     }
     catch (error) {
         // Non-serializable data — skip capture for this component
@@ -3324,10 +3751,15 @@ function set_preload_data(entries) {
         return;
     _preload_cache.clear();
     for (const entry of entries) {
-        // Generate key using the same algorithm as Load Coordinator
-        const result = Load_Coordinator.generate_invocation_key(entry.component, entry.args);
-        if (result.key !== null) {
-            _preload_cache.set(result.key, entry.data);
+        // The captured key wins. Falling back to args means matching what
+        // generate_cache_key() computes for a component with no cache_id(), which
+        // INCLUDES content serialization - without it an object arg keyed to null
+        // here and the entry was dropped, so preload never applied to it.
+        const key = entry.key !== undefined
+            ? entry.key
+            : Load_Coordinator.generate_invocation_key(entry.component, entry.args, { allow_content_serialization: true }).key;
+        if (key !== null) {
+            _preload_cache.set(key, entry.data);
         }
     }
 }
@@ -3440,9 +3872,69 @@ function init_viewport_resize(jQuery) {
  * - Scoped IDs using _cid pattern
  * - Event emission and CSS class hierarchy
  */
+/**
+ * The `jqhtml` argument every compiled render function receives: the same
+ * escaping the runtime exports, the object-printer entry point, and the
+ * dynamic tag name check. One shared object, not one per render.
+ */
+const render_utilities = {
+    escape_html,
+    escape_html_nl2br,
+    print_object,
+    dynamic_component_name,
+};
 // WeakMap storage for protected lifecycle method implementations (Option 2)
 // See docs/internal/lifecycle-method-protection.md for design details
 const lifecycle_impls = new WeakMap();
+/**
+ * Resolve the template a template inherits FROM, in the one order CLAUDE.md
+ * documents ("Template Inheritance Resolution"): the explicit `extends=""`
+ * attribute first, then the JS class prototype chain.
+ *
+ * This is the single implementation. Both slot-only rendering (which invokes the
+ * parent template with the child's slots) and default-attribute collection walk
+ * it, so a `<Define>`'s class/attrs can never resolve through a different chain
+ * than its markup does.
+ *
+ * @param template_def The template whose parent is wanted
+ * @param ctor The component class to walk the prototype chain of (null skips it)
+ * @returns The parent template and the name it was found under, or null
+ */
+function resolve_parent_template(template_def, ctor) {
+    const verbose = window.jqhtml?.debug?.verbose;
+    // 1. Explicit extends="" wins - the author said exactly which template to use.
+    if (template_def?.extends) {
+        const parent = get_template(template_def.extends);
+        // get_template() never returns null: a miss yields DEFAULT_TEMPLATE, whose
+        // name is 'Jqhtml_Component'. That is "not found", not a parent.
+        if (parent && parent.name !== 'Jqhtml_Component') {
+            if (verbose)
+                console.log(`[JQHTML] resolve_parent_template: explicit extends -> ${template_def.extends}`);
+            return { template: parent, name: template_def.extends };
+        }
+        if (verbose)
+            console.log(`[JQHTML] resolve_parent_template: extends="${template_def.extends}" has no template`);
+    }
+    // 2. Otherwise walk the JS prototype chain for the nearest ancestor with a template.
+    // Stop at the framework base, at Object, and at Function.prototype (name === ''),
+    // which is what getPrototypeOf() hands back once the class chain is exhausted.
+    let current_class = ctor ? Object.getPrototypeOf(ctor) : null;
+    while (typeof current_class === 'function' && current_class.name &&
+        current_class.name !== 'Object' && current_class.name !== 'Jqhtml_Component') {
+        const class_name = current_class.name;
+        // Internal base classes are aliases of Jqhtml_Component, never a parent template.
+        if (class_name !== '_Jqhtml_Component' && class_name !== '_Base_Jqhtml_Component') {
+            const class_template = get_template(class_name);
+            if (class_template && class_template.name !== 'Jqhtml_Component' && class_template !== template_def) {
+                if (verbose)
+                    console.log(`[JQHTML] resolve_parent_template: prototype chain -> ${class_name}`);
+                return { template: class_template, name: class_name };
+            }
+        }
+        current_class = Object.getPrototypeOf(current_class);
+    }
+    return null;
+}
 class Jqhtml_Component {
     constructor(element, args = {}) {
         this._ready_state = 0; // 0=created, 1=init, 2=loaded, 3=rendered, 4=ready
@@ -3467,7 +3959,10 @@ class Jqhtml_Component {
         // Cache mode properties
         this._cache_key = null; // Cache key for caching
         // 'html' mode caching
-        this._cached_html = null; // Cached HTML to inject on first render
+        // The snapshot carries the cid it was taken under, not just markup: every scoped id
+        // inside it reads "<name>:<cid>", so replaying it into a different instance requires
+        // knowing which cid was the snapshotting component's own. See _rescope_cached_html().
+        this._cached_html = null; // Cached HTML snapshot to inject on first render
         this._used_cached_html = false; // Flag if cached HTML was used (forces re-render after on_load)
         this._should_cache_html_after_ready = false; // Flag to cache HTML after on_ready lifecycle
         this._is_dynamic = false; // True if this.data changed during on_load() (used for HTML cache sync)
@@ -3542,6 +4037,14 @@ class Jqhtml_Component {
         // Merge in order: defineArgs (defaults from Define tag) < dataAttrs < args (invocation overrides)
         const defineArgs = template_for_args?.defineArgs || {};
         this.args = { ...defineArgs, ...dataAttrs, ...args };
+        // The name this instance was invoked as. Every invocation path passes it
+        // in args._component_name (template tag, $(el).component('Name'), boot
+        // placeholder); a class handed directly to $(el).component(Class) has
+        // only its own name to offer.
+        const ctor = this.constructor;
+        this._component_name = (typeof args._component_name === 'string' && args._component_name)
+            || ctor.component_name
+            || ctor.name;
         // Set lifecycle truncation flags from args
         if (this.args._load_only === true) {
             this._load_only = true;
@@ -3703,41 +4206,12 @@ class Jqhtml_Component {
             return child._render(null, options);
         }
         this._log_lifecycle('render', 'start');
-        // HTML CACHE MODE - If we have cached HTML, inject it directly and skip template rendering
-        if (this._cached_html !== null) {
-            if (window.jqhtml?.debug?.verbose) {
-                console.log(`[Cache html] Component ${this._cid} (${this.component_name()}) injecting cached HTML`, { html_length: this._cached_html.length });
-            }
-            // Inject cached HTML directly
-            this.$[0].innerHTML = this._cached_html;
-            // Mark that we used cached HTML (forces re-render after on_load)
-            this._used_cached_html = true;
-            // Clear cached HTML so next render uses template
-            this._cached_html = null;
-            // Mark first render complete
-            this._did_first_render = true;
-            this._log_lifecycle('render', 'complete (cached HTML)');
-            // Call on_render() after cache inject (unless suppressed by _load_render_only)
-            if (!options.skip_on_render) {
-                const cacheRenderResult = this._call_lifecycle_sync('on_render');
-                if (cacheRenderResult && typeof cacheRenderResult.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.`);
-                }
-                this._fire_viewport_resize();
-            }
-            // Emit lifecycle event
-            this.trigger('render');
-            // Store args/data snapshots for later comparison
-            try {
-                this._args_on_last_render = JSON.parse(JSON.stringify(this.args));
-            }
-            catch (error) {
-                this._args_on_last_render = null;
-            }
-            this._data_on_last_render = JSON.stringify(this.data);
-            return current_render_id;
-        }
+        // --- Shared re-render prologue -------------------------------------------------
+        // Everything below runs for BOTH the cached-HTML path and the template path. The
+        // cached path used to return before it, so a cache-mode reload injected over a live
+        // subtree without ever stopping the old children: their on_stop() never ran (timers
+        // and listeners leaked) and they stayed in _dom_children as dead entries that every
+        // later _wait_for_children_ready() walked.
         // 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.
@@ -3756,21 +4230,60 @@ class Jqhtml_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;
+            });
+            // Clear the DOM
+            this.$[0].innerHTML = '';
+        }
+        else {
+            this._did_first_render = true;
+        }
+        // (No removeClass('_Component_Stopped') here: _render() returns above when
+        // _stopped, and nothing ever clears _stopped, so a stopped component can never
+        // reach this line. Clearing the class would only ever hide a real stopped state.)
+        // Clear DOM children tracking - they're destroyed by innerHTML = '' anyway
+        this._dom_children.clear();
+        // --- End shared re-render prologue ---------------------------------------------
+        // HTML CACHE MODE - If we have cached HTML, inject it directly and skip template rendering
+        if (this._cached_html !== null) {
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Cache html] Component ${this._cid} (${this.component_name()}) injecting cached HTML`, { html_length: this._cached_html.html.length, snapshot_cid: this._cached_html.cid });
+            }
+            // Inject cached HTML directly, with every scoped id re-scoped to THIS instance.
+            // The snapshot was taken from another component instance (or an earlier life of
+            // this one), so its ids carry that instance's cids verbatim. Injecting them as-is
+            // put duplicate ids in the document, and $sid() - which is getElementById first -
+            // could hand this component the other instance's element.
+            this.$[0].innerHTML = this._rescope_cached_html(this._cached_html);
+            // Mark that we used cached HTML (forces re-render after on_load)
+            this._used_cached_html = true;
+            // Clear cached HTML so next render uses template
+            this._cached_html = null;
+            this._log_lifecycle('render', 'complete (cached HTML)');
+            // Call on_render() after cache inject (unless suppressed by _load_render_only)
+            if (!options.skip_on_render) {
+                const cacheRenderResult = this._call_lifecycle_sync('on_render');
+                if (cacheRenderResult && typeof cacheRenderResult.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.`);
+                }
+                this._fire_viewport_resize();
+            }
+            // Emit lifecycle event
+            this.trigger('render');
+            // Store args/data snapshots for later comparison
+            try {
+                this._args_on_last_render = JSON.parse(JSON.stringify(this.args));
+            }
+            catch (error) {
+                this._args_on_last_render = null;
+            }
+            this._data_on_last_render = JSON.stringify(this.data);
+            return current_render_id;
         }
-        // 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)
@@ -3782,20 +4295,8 @@ class Jqhtml_Component {
             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;
-                },
-                escape_html_nl2br: (str) => {
-                    const div = document.createElement('div');
-                    div.textContent = String(str);
-                    // Escape HTML first, then replace newlines with <br />
-                    return div.innerHTML.replace(/\n/g, '<br />');
-                }
-            };
+            // Utilities the compiled render function calls (see render_utilities)
+            const jqhtml = render_utilities;
             // Execute template function
             // Commented out debug logging
             // console.log('[Component] About to call render, this:', this);
@@ -3834,69 +4335,48 @@ class Jqhtml_Component {
             // 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);
-                    }
+                const component_name = template_def.name || this.args._component_name || this.constructor.name;
+                const parent = resolve_parent_template(template_def, this.constructor);
+                // A slot-only template is nothing but an override of a parent. With no parent
+                // there is nothing to render, and rendering empty hides the mistake (usually a
+                // missing register_template) behind a blank element. Fail loudly instead.
+                if (!parent) {
+                    throw new Error(`[JQHTML] ${component_name}: slot-only template has no parent template. ` +
+                        `Add extends="Parent_Name" to <Define:${component_name}>, extend a class whose ` +
+                        `template is registered, or give the template markup of its own.`);
                 }
-                // 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, ...slotArgs) => {
-                            if (childSlots[slotName] && typeof childSlots[slotName] === 'function') {
-                                // Invoke the slot function with everything content() was given
-                                const [slotInstructions, slotContext] = childSlots[slotName](...slotArgs);
-                                // 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 = [];
+                // 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, ...slotArgs) => {
+                    if (childSlots[slotName] && typeof childSlots[slotName] === 'function') {
+                        // Invoke the slot function with everything content() was given
+                        const [slotInstructions, slotContext] = childSlots[slotName](...slotArgs);
+                        // 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.
+                // A parent template that throws is a real defect in the parent's markup. It used
+                // to be swallowed into an empty render plus a warning nobody reads; it is now
+                // re-thrown, which routes it through the boot error path: logged, this component
+                // stopped, its waiting ancestors released.
+                try {
+                    const [parentInstructions, parentContext] = parent.template.render.bind(this)(this.data, this.args, contentFunction, // Pass content function that invokes child slots
+                    jqhtml);
+                    instructions = parentInstructions;
+                    context = parentContext;
                 }
-                else {
-                    console.warn(`[JQHTML] No parent template found for ${this.constructor.name}, rendering empty`);
-                    instructions = [];
+                catch (error) {
+                    // Rethrown, not swallowed - only re-labelled so the report names both ends
+                    // of the inheritance, which the raw template error does not.
+                    const wrapped = new Error(`[JQHTML] ${component_name}: parent template ${parent.name} threw while ` +
+                        `rendering slot-only child: ${error?.message ?? error}`);
+                    wrapped.cause = error; // ES2020 target: Error(message, {cause}) is not typed
+                    throw wrapped;
                 }
             }
             // Process instructions to generate DOM. ['_content', ...] markers from
@@ -3917,10 +4397,33 @@ class Jqhtml_Component {
             }
             this._fire_viewport_resize();
         }
+        // "Already rendered once" - read before the state below can move to 3.
+        const isRerender = this._ready_state >= 3;
+        // HTML CACHE MODE: Mark on_render complete after the post-on_load render.
+        // This signals to parent components that this component's DOM is fully rendered
+        // with fresh data and ready for HTML snapshot. It is set BEFORE trigger('render')
+        // because _wait_for_children_on_render() waits on that very event and reads the
+        // flag from its handler.
+        if (this._ready_state >= 2) {
+            this._on_render_complete = true;
+            // State 3 = "rendered with loaded data, ready phase not finished yet".
+            // Only meaningful once the load phase has happened (>= 2); before that the
+            // component is still walking 0 -> 1 -> 2 and must not be pushed forward.
+            // The ready phase (_ready(), render()'s executor, _reload()) restores 4.
+            this._ready_state = 3;
+            this._update_debug_attrs();
+        }
+        else if (!this.__has_custom_on_load) {
+            // A component with no custom on_load() skips the load phase entirely, so it never
+            // reaches _ready_state 2 and would never set the flag above - and its data cannot
+            // change, so this first render IS its final, fresh render. Without this, an
+            // html-cache parent waited forever in _wait_for_children_on_render() for a
+            // template-only child and never snapshotted, rendered or fired 'ready'.
+            this._on_render_complete = true;
+        }
         // 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 {
@@ -3932,12 +4435,6 @@ class Jqhtml_Component {
         }
         // Store data snapshot for refresh() comparison
         this._data_on_last_render = JSON.stringify(this.data);
-        // HTML CACHE MODE: Mark on_render complete after second render (post-on_load)
-        // This signals to parent components that this component's DOM is fully rendered
-        // with fresh data and ready for HTML snapshot
-        if (this._ready_state >= 2) {
-            this._on_render_complete = true;
-        }
         // Return the render ID so callers can check if this render is still current
         return current_render_id;
     }
@@ -3957,10 +4454,12 @@ class Jqhtml_Component {
     render(id = null) {
         if (this._stopped)
             return Promise.resolve();
-        // Invalidate ready event so new handlers wait for this render cycle to complete
-        // This prevents .on('ready') handlers from firing immediately based on previous lifecycle
-        this.invalidate('ready');
-        // If id provided, delegate to child component
+        // If id provided, delegate to child component.
+        // NOTE: this runs BEFORE invalidate('ready'). render(sid) does not start a
+        // lifecycle on THIS component - it delegates to the redrawable child, which
+        // invalidates and re-triggers its own 'ready'. Invalidating here would delete
+        // this component's sticky ready marker with nothing left to re-trigger it, so
+        // every later `await comp.ready()` would hang.
         if (id) {
             const $element = this.$sid(id);
             if ($element.length === 0) {
@@ -3975,14 +4474,23 @@ class Jqhtml_Component {
             }
             return child.render();
         }
+        // Invalidate ready event so new handlers wait for this render cycle to complete
+        // This prevents .on('ready') handlers from firing immediately based on previous lifecycle
+        this.invalidate('ready');
         // Enqueue the full render lifecycle through the component queue
         // Return the queue promise so `await this.render()` resolves when the
         // full render lifecycle (DOM update, children ready, on_ready) completes
         return this._queue.enqueue('render', async () => {
+            // The queued executor can start long after render() was called - re-check.
+            if (this._stopped)
+                return;
             // Execute render phase synchronously and capture render ID
             const render_id = this._render();
             // Wait for all child components to be ready
             await this._wait_for_children_ready();
+            // Stopped while waiting for children: no hook, no event on a dead component.
+            if (this._stopped)
+                return;
             // 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) {
@@ -3990,7 +4498,15 @@ class Jqhtml_Component {
             }
             // Call on_ready hook with authorization
             await this._call_lifecycle('on_ready');
+            // on_ready() may itself have awaited long enough for a stop().
+            if (this._stopped)
+                return;
             this._fire_viewport_resize();
+            // Back to the ready state: _render() dropped it to 3. Set BEFORE the trigger
+            // so a handler that calls ready() during dispatch takes the already-ready
+            // fast path instead of waiting for another trigger that will never come.
+            this._ready_state = 4;
+            this._update_debug_attrs();
             // Trigger ready event
             this.trigger('ready');
         });
@@ -4020,40 +4536,54 @@ class Jqhtml_Component {
     async load() {
         if (this._stopped)
             return false;
-        // Capture result through queue closure
-        let data_changed = false;
-        await this._queue.enqueue('load', async () => {
+        // No custom on_load() means there is nothing to run and nothing can have changed.
+        // Running the detached execution anyway seeded this.data with the empty detached
+        // clone (create() takes no snapshot for these components), silently wiping whatever
+        // on_create() had set.
+        if (!this.__has_custom_on_load)
+            return false;
+        // The queue settles this caller with the value of the executor that actually
+        // ran - including one that collapsed two rapid load() calls into one run - so
+        // the result is returned from the executor, not read back out of a closure
+        // variable that a discarded executor would have left at its initial value.
+        return this._queue.enqueue('load', async () => {
+            // The queued executor can start long after load() was called - re-check.
+            if (this._stopped)
+                return false;
             // Snapshot current data for change detection
             const data_before = JSON.stringify(this.data);
             // Execute on_load() on detached proxy (restores data to on_create snapshot)
-            const { data: result_data } = await this._execute_on_load_detached(false);
-            // Atomically update this.data: unfreeze → assign → normalize → refreeze
+            const { data: result_data } = await this._execute_on_load_detached(null);
+            // Stopped during on_load(): don't write data or cache for a dead component.
+            if (this._stopped)
+                return false;
+            // Atomically update this.data: unfreeze → normalize → assign → refreeze.
+            // The round trip runs in EVERY cache mode - see _apply_load_result().
             this.__data_frozen = false;
-            this.data = result_data;
-            const cache_mode = Jqhtml_Local_Storage.get_cache_mode();
-            if (cache_mode === 'data') {
-                const normalized = Jqhtml_Local_Storage.normalize_for_cache(this.data);
-                this.data = normalized;
-            }
+            this.data = Jqhtml_Local_Storage.normalize_for_cache(result_data, this.component_name());
             this.__data_frozen = true;
+            const cache_mode = Jqhtml_Local_Storage.get_cache_mode();
             // Detect if data changed
             const data_after = JSON.stringify(this.data);
-            data_changed = data_before !== data_after;
+            const data_changed = data_before !== data_after;
             // Update cache with fresh data if changed
             if (data_changed) {
-                // Regenerate cache key (args may have changed since boot)
-                let cache_key = null;
-                if (typeof this.cache_id === 'function') {
-                    try {
-                        cache_key = `${this.component_name()}::${String(this.cache_id())}`;
+                // ONE derivation, shared with the cache read in create() and with _load().
+                // The copy that used to live here omitted content serialization, so an
+                // object-arg component computed a null key and silently never wrote the
+                // cache that create() would later read with the content-serialized key.
+                // Recomputed rather than reused: args may have changed since boot.
+                const { cache_key, uncacheable_property, uncacheable_reason } = generate_cache_key(this);
+                if (cache_key === null) {
+                    // Leave the same record _load() leaves: the offending arg on the element,
+                    // and one dev warning. A silent catch here made a throwing cache_id()
+                    // undiagnosable - the component simply stopped being cached.
+                    if (uncacheable_property) {
+                        this.$.attr('data-nocache', uncacheable_reason ? `${uncacheable_property}:${uncacheable_reason}` : uncacheable_property);
                     }
-                    catch { /* cache_id() threw - skip caching */ }
-                }
-                else {
-                    const result = Load_Coordinator.generate_invocation_key(this.component_name(), this.args);
-                    cache_key = result.key;
+                    warn_uncacheable_component(this, uncacheable_property, uncacheable_reason);
                 }
-                if (cache_key && cache_mode !== 'html') {
+                else if (cache_mode !== 'html') {
                     Jqhtml_Local_Storage.set(cache_key, this.data);
                 }
             }
@@ -4061,10 +4591,13 @@ class Jqhtml_Component {
             // Suppressed by _load_only and _load_render_only flags (preloading mode)
             if (!this._load_only && !this._load_render_only) {
                 await this._call_lifecycle('on_loaded');
+                // on_loaded() may have awaited across a stop(); don't fire 'loaded' after it.
+                if (this._stopped)
+                    return data_changed;
                 this.trigger('loaded');
             }
+            return data_changed;
         });
-        return data_changed;
     }
     /**
      * Create phase - Quick setup, prepare UI
@@ -4087,15 +4620,18 @@ class Jqhtml_Component {
         // OPTIMIZATION: Skip cache operations and snapshot if no custom on_load()
         // Components without on_load() don't fetch data, so nothing to cache or restore
         if (this.__has_custom_on_load) {
+            // Snapshot this.data the moment on_create() returns, BEFORE any cache read.
+            // on_load() restarts from this snapshot every time, and CLAUDE.md promises that
+            // is the on_create() state. read_cache_in_create() REPLACES this.data on a warm
+            // 'data' cache, so snapshotting after it made a warm boot restart on_load() from
+            // cached data - `this.data.items.push(x)` doubled its rows on every reload.
+            this.__initial_data_snapshot = JSON.parse(JSON.stringify(this.data));
             // CACHE CHECK - Read from cache based on cache mode ('data' or 'html')
             // Skip cache for detached elements — no point hydrating from cache when not in DOM
             // @see component-cache.ts for full implementation
             if (!this._is_detached) {
                 read_cache_in_create(this);
             }
-            // 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;
@@ -4226,26 +4762,7 @@ class Jqhtml_Component {
         //              follower never runs on_load() and adopts the leader's data with NO
         //              revalidation, so a wrong key here is permanently wrong data. Redundant
         //              concurrent requests are the cheaper failure.
-        let cache_key = null;
-        let uncacheable_property;
-        let uncacheable_reason;
-        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()';
-                uncacheable_reason = 'cache-id-threw';
-            }
-        }
-        else {
-            const result = Load_Coordinator.generate_invocation_key(this.component_name(), this.args, { allow_content_serialization: true });
-            cache_key = result.key;
-            uncacheable_property = result.uncacheable_property;
-            uncacheable_reason = result.uncacheable_reason;
-        }
+        const { cache_key, uncacheable_property, uncacheable_reason } = generate_cache_key(this);
         const dedup_key = Load_Coordinator.generate_invocation_key(this.component_name(), this.args).key;
         // SSR preload check: if preloaded data exists for this component+args, use it
         if (cache_key !== null && has_preload_data()) {
@@ -4276,24 +4793,26 @@ class Jqhtml_Component {
             if (window.jqhtml?.debug?.verbose) {
                 console.log(`[Load Deduplication] Component ${this._cid} (${this.component_name()}) has no dedup key - loading independently`);
             }
-            const { data: result_data } = await this._execute_on_load_detached();
+            const { data: result_data } = await this._execute_on_load_detached(null);
             await this._apply_load_result(result_data, data_before_load);
             return;
         }
         // Check if this component should execute on_load() or wait for existing request
-        const should_execute = Load_Coordinator.should_execute_on_load(this);
+        const should_execute = Load_Coordinator.should_execute_on_load(this, dedup_key);
         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);
+            // Every coordinator call uses the key captured ABOVE, before on_load() began.
+            // Recomputing it here would miss the entry whenever args changed meanwhile.
+            const coordination_promise = Load_Coordinator.get_coordination_promise(dedup_key);
             if (coordination_promise) {
                 try {
-                    // Wait for leader to complete
+                    // Wait for leader to complete (rejects if the leader's on_load() threw)
                     await coordination_promise;
                     // Retrieve leader's data from coordinator
-                    const leader_data = Load_Coordinator.get_leader_data(this);
+                    const leader_data = Load_Coordinator.get_leader_data(this, dedup_key);
                     if (leader_data !== null) {
                         // Apply leader's data using the same method as leader
                         // This properly handles freeze/unfreeze and normalization
@@ -4311,15 +4830,11 @@ class Jqhtml_Component {
                     throw error;
                 }
             }
-            // Fallback: if we couldn't get leader data, just mark as complete
-            this._ready_state = 2;
-            this._update_debug_attrs();
-            this._log_lifecycle('load', 'complete (follower)');
-            this.trigger('load');
-            if (!this._load_only && !this._load_render_only) {
-                await this._call_lifecycle('on_loaded');
-                this.trigger('loaded');
-            }
+            // No leader data to adopt (the entry was already collected, or its data could
+            // not be serialized). Load independently rather than firing load/loaded with the
+            // untouched on_create() data.
+            const { data: result_data } = await this._execute_on_load_detached(null);
+            await this._apply_load_result(result_data, data_before_load);
             return;
         }
         // This component is a leader - execute on_load() on detached proxy
@@ -4327,7 +4842,7 @@ class Jqhtml_Component {
             console.log(`[Load Deduplication] Component ${this._cid} (${this.component_name()}) is the leader`, { args: this.args });
         }
         // Execute on_load on detached proxy with Load_Coordinator registration
-        const { data: result_data, complete_coordination } = await this._execute_on_load_detached(true);
+        const { data: result_data, complete_coordination } = await this._execute_on_load_detached(dedup_key);
         // Apply result via sequential queue
         await this._apply_load_result(result_data, data_before_load);
         // Complete coordination AFTER this.data is updated
@@ -4341,8 +4856,8 @@ class Jqhtml_Component {
      * @see data-proxy.ts for full implementation
      * @private
      */
-    async _execute_on_load_detached(use_load_coordinator = false) {
-        return execute_on_load_detached(this, use_load_coordinator);
+    async _execute_on_load_detached(dedup_key = null) {
+        return execute_on_load_detached(this, dedup_key);
     }
     /**
      * Apply the result of on_load() to this.data via the sequential queue.
@@ -4365,21 +4880,22 @@ class Jqhtml_Component {
         await my_turn;
         try {
             // Now it's our turn to set this.data
-            // Unfreeze, set data, freeze
+            // Every on_load() result is round-tripped through the cache serializer before it
+            // becomes this.data - in EVERY cache mode, not just 'data'. Two consequences the
+            // rest of the framework depends on:
+            //   - this.data is jqhtml's own copy. The author's object graph is never aliased,
+            //     so mutating what on_load() returned cannot reach a frozen this.data.
+            //   - this.data is BY CONSTRUCTION what the cache stores and what a cache hit
+            //     returns. Hot and cold are the same object shape in every mode, so turning
+            //     caching on can never change what a component sees.
+            // Dates, Maps, Sets and register_cache_class() classes are reconstructed; anything
+            // the serializer cannot express is dropped and warned about once (local-storage.ts).
             this.__data_frozen = false;
-            this.data = result_data;
-            // DATA MODE: Normalize this.data through serialize/deserialize round-trip
-            // This ensures "hot" data (fresh from on_load) behaves identically to "cold" data
-            const cache_mode = Jqhtml_Local_Storage.get_cache_mode();
-            if (cache_mode === 'data') {
-                const normalized = Jqhtml_Local_Storage.normalize_for_cache(this.data);
-                this.data = normalized;
-                if (window.jqhtml?.debug?.verbose) {
-                    console.log(`[Cache data] Component ${this._cid} (${this.component_name()}) normalized this.data after on_load()`, { data: this.data });
-                }
-            }
-            // Freeze this.data
+            this.data = Jqhtml_Local_Storage.normalize_for_cache(result_data, this.component_name());
             this.__data_frozen = true;
+            if (window.jqhtml?.debug?.verbose) {
+                console.log(`[Cache] Component ${this._cid} (${this.component_name()}) normalized this.data after on_load()`, { data: this.data });
+            }
             // SSR data capture: record this component's data for preloading
             if (is_capture_enabled() && this._has_on_load()) {
                 capture_component_data(this.component_name(), this.args, this.data, this._cache_key);
@@ -4465,9 +4981,11 @@ class Jqhtml_Component {
                 callback();
             return Promise.resolve();
         }
-        // Return promise that resolves when ready event fires
+        // Return promise that resolves when ready event fires.
+        // once(), not on(): a promise can only settle once, so a permanent listener
+        // just accumulates on the component - one per ready() call, forever.
         return new Promise((resolve) => {
-            this.on('ready', () => {
+            this.once('ready', () => {
                 if (callback)
                     callback();
                 resolve();
@@ -4525,9 +5043,18 @@ class Jqhtml_Component {
             if (child._ready_state >= 4) {
                 continue;
             }
-            // Create promise that resolves when child reaches ready
+            // A stopped child will never fire 'ready' again - waiting on it would wedge
+            // this parent (and everything awaiting its ready()) forever.
+            if (child._stopped) {
+                continue;
+            }
+            // Create promise that resolves when child reaches ready.
+            // once(), not on(): a permanent listener would be appended to the child on
+            // every render/reload cycle of a polling parent and never removed.
+            // Raced against 'stop' so a child stopped mid-wait releases the parent.
             const ready_promise = new Promise((resolve) => {
-                child.on('ready', () => resolve());
+                child.once('ready', () => resolve());
+                child.once('stop', () => resolve());
             });
             ready_promises.push(ready_promise);
         }
@@ -4553,22 +5080,42 @@ class Jqhtml_Component {
         // Create promises for each child that hasn't completed on_render yet
         const render_promises = [];
         for (const child of children) {
-            // If child already completed on_render post-on_load, skip
-            if (child._on_render_complete) {
+            // If child already completed on_render post-on_load (or is dead), skip
+            if (child._on_render_complete || child._stopped) {
                 continue;
             }
-            // Create promise that resolves when child completes on_render
+            // Event-driven, not polled: the child sets _on_render_complete just before it
+            // fires 'render', and 'stop' ends the wait for a child that dies first.
+            //
+            // A plain once('render') would be wrong: events are sticky, and this child has
+            // already rendered at least once (the pre-on_load render), so once() would fire
+            // immediately off that stale marker and let the parent snapshot half-rendered DOM.
+            // The handler therefore re-checks the flag and stays registered until it is set.
             const render_promise = new Promise((resolve) => {
-                // Poll for completion (simple approach - could use events for more efficiency)
-                const check = () => {
-                    if (child._on_render_complete || child._stopped) {
-                        resolve();
-                    }
-                    else {
-                        setTimeout(check, 10);
+                let settled = false;
+                const on_child_event = () => {
+                    if (settled)
+                        return;
+                    if (!child._on_render_complete && !child._stopped)
+                        return; // pre-load render
+                    settled = true;
+                    // There is no off() in the event API; splice this handler out of both queues
+                    // the way once() does, so a long-lived child does not accumulate handlers
+                    // across repeated waits.
+                    for (const event_name of ['render', 'stop']) {
+                        const callbacks = child._lifecycle_callbacks.get(event_name);
+                        if (callbacks) {
+                            const idx = callbacks.indexOf(on_child_event);
+                            if (idx !== -1)
+                                callbacks.splice(idx, 1);
+                        }
                     }
+                    resolve();
                 };
-                check();
+                // 'stop' first: registering 'render' can fire the handler synchronously (sticky),
+                // and the handler must be able to deregister both queues when it does.
+                child.on('stop', on_child_event);
+                child.on('render', on_child_event);
             });
             render_promises.push(render_promise);
         }
@@ -4672,8 +5219,17 @@ class Jqhtml_Component {
             this.next_reload_force_refresh = null;
             this._render();
             await this._wait_for_children_ready();
+            // Stopped while waiting for children: no hook, no event on a dead component.
+            if (this._stopped)
+                return;
             await this._call_lifecycle('on_ready');
+            // on_ready() may itself have awaited long enough for a stop().
+            if (this._stopped)
+                return;
             this._fire_viewport_resize();
+            // Restore the ready state (_render() dropped it to 3) before the trigger
+            this._ready_state = 4;
+            this._update_debug_attrs();
             this.trigger('ready');
             this._log_lifecycle('reload', 'complete (no on_load)');
             return;
@@ -4701,10 +5257,16 @@ class Jqhtml_Component {
         // STEP 2: Call on_load() on detached proxy
         // This uses the same detached execution as _load() - on_load runs isolated
         // and result is applied via sequential queue
-        const { data: result_data } = await this._execute_on_load_detached(false); // false = don't use Load_Coordinator
+        const { data: result_data } = await this._execute_on_load_detached(null); // null = no coordination
+        // Stopped during on_load(): don't write data or re-render a dead component.
+        if (this._stopped)
+            return;
         // Apply result via sequential queue
         // This handles normalization, caching, and setting _is_dynamic
         await this._apply_load_result(result_data, data_before_load);
+        // The apply queue can yield; a stop() there must abort the render/ready tail.
+        if (this._stopped)
+            return;
         // Re-read data state after apply (for render decision below)
         const data_after_load = JSON.stringify(this.data);
         const data_changed = data_after_load !== data_before_load;
@@ -4713,6 +5275,15 @@ class Jqhtml_Component {
         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;
+        // HTML CACHE MODE: a cache injection above replaced the subtree with inert markup -
+        // a snapshot string, with no live child components in it. It must be re-rendered
+        // from the template regardless of what the load decided, exactly as _should_rerender()
+        // forces it at boot. Without this, a reload whose data came back unchanged left dead
+        // HTML (stopped children, no instances) on screen.
+        const used_cached_html = this._used_cached_html;
+        if (used_cached_html) {
+            this._used_cached_html = 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;
@@ -4733,6 +5304,11 @@ class Jqhtml_Component {
             }
         }
         // STEP 3: Perform second render if needed
+        // The cache injection's inert markup is not optional to replace - this overrides both
+        // the reload() and the refresh()/reload(false) decision above.
+        if (used_cached_html) {
+            should_render = true;
+        }
         if (should_render) {
             this._render();
         }
@@ -4747,11 +5323,33 @@ class Jqhtml_Component {
         // STEP 3.5 & 4: Wait for children and call on_ready (only if we rendered)
         if (rendered_from_cache || should_render) {
             await this._wait_for_children_ready();
+            // Stopped while waiting for children: no hook, no event on a dead component.
+            if (this._stopped)
+                return;
             await this._call_lifecycle('on_ready');
+            // on_ready() may itself have awaited long enough for a stop().
+            if (this._stopped)
+                return;
             this._fire_viewport_resize();
+            // Restore the ready state (the load phase dropped it to 2, _render() to 3)
+            // before the trigger, so handlers see a ready component.
+            this._ready_state = 4;
+            this._update_debug_attrs();
             // Trigger ready event so parent callbacks fire on subsequent reloads
             this.trigger('ready');
         }
+        else {
+            // refresh()/reload(false) found unchanged data: no re-render, and on_ready()
+            // is deliberately NOT called (documented behaviour). But the component IS
+            // ready - and this cycle deleted the sticky 'ready' marker at the top of
+            // _reload() and dropped _ready_state to 2 in the load phase. Without
+            // restoring both, ready() never resolves again and a parent re-entering
+            // _wait_for_children_ready() hangs on this child forever (the documented
+            // polling pattern breaks after its first quiet refresh).
+            this._ready_state = 4;
+            this._update_debug_attrs();
+            this.trigger('ready');
+        }
         this._log_lifecycle('reload', 'complete');
     }
     /**
@@ -4776,26 +5374,28 @@ class Jqhtml_Component {
             this.__gate_resume = null;
             resume();
         }
-        // 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_stop_callbacks = this._on_registered('stop');
-        if (!has_custom_stop && !has_stop_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
+        // There is deliberately NO fast path for components without stop logic. The
+        // marker class, the parent de-registration and the 'stop' event are not cleanup
+        // the component asked for, they are how the rest of the framework learns this
+        // component is dead: the class is the documented, observable stopped state; a
+        // child left in _dom_parent._dom_children is a dead component every later
+        // _wait_for_children_ready() and _get_dom_children() walks; and 'stop' is what
+        // releases a parent (and boot's failure path) waiting on a child that will never
+        // fire 'ready'. Skipping them for the common no-on_stop() child was what leaked
+        // stopped children into the parent's registry.
         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 with authorization (sync)
-        const stopResult = this._call_lifecycle_sync('on_stop');
-        if (stopResult && typeof stopResult.then === 'function') {
-            console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_stop(). ` +
-                `on_stop() must be synchronous code. Remove 'async' from the function declaration.`);
+        // Call user's on_stop() hook with authorization (sync) - only when actually
+        // overridden, since _call_lifecycle_sync() on the base no-op costs per child
+        // on every re-render.
+        if (this.on_stop !== Jqhtml_Component.prototype.on_stop) {
+            const stopResult = this._call_lifecycle_sync('on_stop');
+            if (stopResult && typeof stopResult.then === 'function') {
+                console.warn(`[JQHTML] Component "${this.component_name()}" returned a Promise from on_stop(). ` +
+                    `on_stop() must be synchronous code. Remove 'async' from the function declaration.`);
+            }
         }
         // Fire registered stop callbacks
         this.trigger('stop');
@@ -4880,8 +5480,15 @@ class Jqhtml_Component {
     /**
      * Get component name for debugging
      */
+    /**
+     * The name this component was invoked as - the tag written in the template
+     * (<User_Card> -> 'User_Card'), the name given to $(el).component('User_Card'),
+     * or the boot placeholder's data-component-init-name. For a template-only
+     * component this is the template name, not 'Jqhtml_Component'. Falls back to
+     * the class's static component_name, then its JS class name.
+     */
     component_name() {
-        return this.constructor.name;
+        return this._component_name;
     }
     /**
      * Register event callback - delegates to component-events.ts
@@ -5064,6 +5671,48 @@ class Jqhtml_Component {
     _generate_cid() {
         return uid();
     }
+    /**
+     * Re-scope every scoped id in an HTML-cache snapshot so it belongs to THIS instance.
+     *
+     * A snapshot is the inner HTML of some component instance, so it contains ids of the
+     * form `<name>:<cid>`: the snapshotting component's own elements carry its cid, and
+     * elements rendered by nested children carry each child's cid. Replayed verbatim into
+     * a second instance those ids are duplicates of the originals, and $sid() resolves via
+     * getElementById(), which returns whichever matching element is first in the document -
+     * so one instance could read and write another instance's DOM.
+     *
+     * Mapping: the snapshot owner's cid becomes this._cid (so $sid() finds the elements
+     * this component is about to treat as its own), and every other cid becomes a fresh
+     * uid(), consistently within one injection. Two instances hydrated from one snapshot
+     * therefore share no id at all.
+     *
+     * The ':' separator is written only by the compiler ($sid) and the instruction
+     * processor (a scoped plain id), and cids are uid() output - [a-z][a-z0-9]* - so the
+     * pattern is exact. A plain unscoped id has no ':' and is left alone.
+     *
+     * data-cid is the debug mirror of a component's own _cid (config.ts debug_attributes).
+     * The snapshot's values are stale cids belonging to components that no longer exist,
+     * so they go through the same mapping rather than being left to lie in DevTools.
+     *
+     * @private
+     */
+    _rescope_cached_html(snapshot) {
+        const cid_map = new Map();
+        cid_map.set(snapshot.cid, this._cid);
+        const remap = (old_cid) => {
+            let new_cid = cid_map.get(old_cid);
+            if (new_cid === undefined) {
+                new_cid = uid();
+                cid_map.set(old_cid, new_cid);
+            }
+            return new_cid;
+        };
+        return snapshot.html
+            // id="<name>:<cid>" - the name half may itself contain ':' (an author-written
+            // id="a:b" is scoped as "a:b:cid"), so the cid is anchored at the end.
+            .replace(/ id="([^"]*):([a-z][a-z0-9]*)"/g, (_match, name, old_cid) => ` id="${name}:${remap(old_cid)}"`)
+            .replace(/ data-cid="([a-z][a-z0-9]*)"/g, (_match, old_cid) => ` data-cid="${remap(old_cid)}"`);
+    }
     _apply_css_classes() {
         const hierarchy = this.constructor.get_class_hierarchy();
         // If component name differs from class name, add component name to hierarchy
@@ -5103,26 +5752,29 @@ class Jqhtml_Component {
         }
         if (!template)
             return;
-        // Walk the extends chain to collect all defaultAttributes from parent templates
-        // Apply from parent to child so child attributes take precedence
+        // Walk the inheritance chain to collect defaultAttributes from parent templates,
+        // applying parent first so the child's own attributes take precedence.
+        //
+        // This uses resolve_parent_template(), the same helper the slot-only render path
+        // uses, so a <Define>'s class/attrs resolve through EXACTLY the chain its markup
+        // does. It previously followed only `extends=`, so a slot-only JS subclass
+        // (class Users_Grid extends Grid_Abstract) inherited the parent's template but
+        // none of the parent <Define>'s class="" or attributes.
         const templateChain = [];
         let currentTemplate = template;
-        // Build chain from child to parent
-        while (currentTemplate) {
+        let currentClass = this.constructor;
+        const seen = new Set();
+        while (currentTemplate && !seen.has(currentTemplate)) {
+            seen.add(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 {
+            const parent = resolve_parent_template(currentTemplate, currentClass);
+            if (!parent)
                 break;
-            }
+            currentTemplate = parent.template;
+            // Advance the prototype walk too: the next parent must be resolved relative to
+            // the class we just landed on, not the original one. A template-only parent has
+            // no class, which is correct - its own chain can only be an explicit extends=.
+            currentClass = get_component_class(parent.name) || null;
         }
         // Apply defaultAttributes from each template in the chain (parent first, child last)
         for (const tmpl of templateChain) {
@@ -5199,8 +5851,10 @@ class Jqhtml_Component {
                     }
                 }
                 else {
-                    // Regular attributes - apply directly if not already set
-                    if (!this.$.attr(key)) {
+                    // Regular attributes - apply directly if not already set.
+                    // === undefined, not falsy: tabindex="0" and an empty-string attribute
+                    // written at the invocation are SET, and a Define default must not win.
+                    if (this.$.attr(key) === undefined) {
                         this.$.attr(key, value);
                     }
                 }
@@ -5292,278 +5946,416 @@ Jqhtml_Component.__jqhtml_component = true; // Marker for unified register() det
 // A bare component name, as accepted by closest() in place of a class selector
 Jqhtml_Component.COMPONENT_NAME_PATTERN = COMPONENT_NAME_PATTERN;
 
+var light_css = "html[data-jqhtml-debug] .jqhtml-debug-hit {\n  outline: 2px solid #e5322d;\n  outline-offset: -2px;\n}\n\nhtml[data-jqhtml-debug] .jqhtml-debug-hit.jqhtml-debug-depth-0 {\n  outline-color: #e5322d;\n}\n\nhtml[data-jqhtml-debug] .jqhtml-debug-hit.jqhtml-debug-depth-1 {\n  outline-color: #2f6fe4;\n}\n\nhtml[data-jqhtml-debug] .jqhtml-debug-hit.jqhtml-debug-depth-2 {\n  outline-color: #1f9d55;\n}\n\nhtml[data-jqhtml-debug] .jqhtml-debug-hit.jqhtml-debug-depth-3 {\n  outline-color: #d97706;\n}\n\nhtml[data-jqhtml-debug] .jqhtml-debug-hit.jqhtml-debug-depth-4 {\n  outline-color: #7c3aed;\n}\n\nhtml[data-jqhtml-debug] .jqhtml-debug-hit.jqhtml-debug-depth-5 {\n  outline-color: #0e7490;\n}";
+
+var shadow_css = ":host {\n  all: initial;\n  display: block;\n  position: fixed;\n  box-sizing: border-box;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 2147483647;\n  pointer-events: none;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n  font-size: 12px;\n  font-weight: normal;\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.4;\n  color: #1c1c1c;\n  text-align: left;\n  text-transform: none;\n  text-indent: 0;\n  text-shadow: none;\n  letter-spacing: normal;\n  word-spacing: normal;\n  white-space: normal;\n  word-break: normal;\n  overflow-wrap: anywhere;\n  hyphens: none;\n  tab-size: 4;\n  direction: ltr;\n  visibility: visible;\n  cursor: default;\n  list-style: none;\n  quotes: none;\n}\n\n.jqhtml-debug-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.jqhtml-debug-label {\n  position: absolute;\n  box-sizing: border-box;\n  display: block;\n  padding: 1px 5px;\n  min-height: 18px;\n  color: #ffffff;\n  background: #e5322d;\n  border-radius: 0 0 3px 0;\n  font-size: 11px;\n  line-height: 16px;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.jqhtml-debug-label.jqhtml-debug-depth-0 {\n  background: #e5322d;\n}\n\n.jqhtml-debug-label.jqhtml-debug-depth-1 {\n  background: #2f6fe4;\n}\n\n.jqhtml-debug-label.jqhtml-debug-depth-2 {\n  background: #1f9d55;\n}\n\n.jqhtml-debug-label.jqhtml-debug-depth-3 {\n  background: #d97706;\n}\n\n.jqhtml-debug-label.jqhtml-debug-depth-4 {\n  background: #7c3aed;\n}\n\n.jqhtml-debug-label.jqhtml-debug-depth-5 {\n  background: #0e7490;\n}\n\n.jqhtml-debug-label-name {\n  font-weight: bold;\n}\n\n.jqhtml-debug-label-args {\n  opacity: 0.9;\n  margin-left: 6px;\n}\n\n.jqhtml-debug-modal {\n  display: none;\n  position: absolute;\n  box-sizing: border-box;\n  top: 24px;\n  right: 24px;\n  width: 520px;\n  max-width: calc(100% - 48px);\n  max-height: calc(100% - 48px);\n  overflow: auto;\n  padding: 0 0 12px 0;\n  background: #ffffff;\n  color: #1c1c1c;\n  border: 1px solid #d0d0d0;\n  border-radius: 6px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);\n  pointer-events: auto;\n}\n\n.jqhtml-debug-modal.jqhtml-debug-modal-open {\n  display: block;\n}\n\n.jqhtml-debug-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  padding: 8px 12px;\n  background: #1c1c1c;\n  color: #ffffff;\n  font-weight: bold;\n}\n\n.jqhtml-debug-title-name {\n  flex: 1 1 auto;\n  font-size: 13px;\n}\n\n.jqhtml-debug-button {\n  all: unset;\n  display: inline-block;\n  box-sizing: border-box;\n  padding: 2px 8px;\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 3px;\n  color: #ffffff;\n  font-size: 11px;\n  line-height: 16px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.jqhtml-debug-button:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.jqhtml-debug-section {\n  padding: 8px 12px 0 12px;\n}\n\n.jqhtml-debug-h {\n  margin: 4px 0;\n  color: #666666;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.jqhtml-debug-table {\n  display: grid;\n  grid-template-columns: max-content max-content 1fr;\n  column-gap: 12px;\n  row-gap: 2px;\n  align-items: baseline;\n}\n\n.jqhtml-debug-key {\n  color: #005cc5;\n  white-space: nowrap;\n}\n\n.jqhtml-debug-type {\n  color: #666666;\n  font-size: 11px;\n  white-space: nowrap;\n}\n\n.jqhtml-debug-value {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.jqhtml-debug-empty {\n  color: #666666;\n  font-style: italic;\n}\n\n.jqhtml-debug-list {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.jqhtml-debug-link {\n  display: block;\n  padding: 2px 4px;\n  margin: 0 -4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.jqhtml-debug-link:hover {\n  background: #eef3ff;\n}\n\n.jqhtml-debug-link-cid {\n  color: #666666;\n  margin-left: 6px;\n}\n\n.jqhtml-debug-note {\n  margin-top: 4px;\n  color: #92400e;\n  font-size: 11px;\n}";
+
 /**
- * JQHTML v2 Template Renderer
- *
- * Connects compiled templates to components
- * Processes instruction arrays and handles bindings
- */
-/**
- * Process slot-only template inheritance
+ * Component debug overlay.
  *
- * 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.
+ * `jqhtml.debug_overlay.enable()` turns the page into an inspector: hovering
+ * any element outlines the component under the pointer and every component
+ * above it, each with a small tab naming the component and its simple args;
+ * clicking opens a modal describing the innermost component (identity, args,
+ * data, state, ancestry, instantiator) instead of firing the click. Alt+click
+ * passes through. `disable()` puts everything back.
  *
- * @param component The component instance
- * @param childSlots The slots object from the child template
- * @returns [instructions, context] tuple or null if no parent found
+ * Non-invasiveness, the design goal (details in ./CLAUDE.md):
+ *   - The overlay's own UI lives in a shadow root on a host element appended to
+ *     <body>, styled by shadow.scss. Page CSS cannot select into it and :host
+ *     cuts inheritance, so its look is fixed whatever the page does.
+ *   - The only thing added to application elements is a pair of classes,
+ *     .jqhtml-debug-hit / .jqhtml-debug-depth-N, which light.scss paints as an
+ *     inset outline (no layout effect) and only while <html data-jqhtml-debug>.
+ *   - Listeners are attached on enable and removed on disable. The stylesheets
+ *     and the (detached) host stay once installed: inert, and cheap to re-enable.
+ *   - Nothing is registered per component, so components created after enable
+ *     are covered automatically.
  */
-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);
+const PREFIX = 'jqhtml-debug-';
+const ROOT_ATTR = 'data-jqhtml-debug'; // on <html> while enabled - gates light.scss
+const HOST_ATTR = 'data-jqhtml-debug-root'; // the shadow host
+const LIGHT_STYLE_ID = 'jqhtml-debug-light-styles';
+const HIT_CLASS = `${PREFIX}hit`;
+const DEPTH_CLASS = `${PREFIX}depth-`;
+const DEPTH_COLORS = 6; // keep in step with $depth-colors in _tokens.scss
+const LABEL_HEIGHT = 18;
+const READY_STATES = ['created', 'init', 'loaded', 'rendered', 'ready'];
+const state = {
+    enabled: false,
+    host: null,
+    shadow: null,
+    layer: null,
+    modal: null,
+    chain: [],
+    hit_elements: [],
+    modal_component: null,
+};
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+const debug_overlay = {
+    /** Turn the overlay on. Returns false where there is no DOM (SSR). */
+    enable() {
+        if (typeof document === 'undefined' || !document.documentElement)
+            return false;
+        if (state.enabled)
+            return true;
+        install();
+        if (!state.host.isConnected)
+            (document.body || document.documentElement).appendChild(state.host);
+        document.documentElement.setAttribute(ROOT_ATTR, '');
+        document.addEventListener('mouseover', on_mouseover, true);
+        document.addEventListener('mouseout', on_mouseout, true);
+        document.addEventListener('click', on_click, true);
+        document.addEventListener('keydown', on_keydown, true);
+        document.addEventListener('scroll', on_reposition, true);
+        window.addEventListener('resize', on_reposition);
+        state.enabled = true;
+        return true;
+    },
+    /** Turn the overlay off. Styles stay installed but match nothing. */
+    disable() {
+        if (!state.enabled)
+            return;
+        document.removeEventListener('mouseover', on_mouseover, true);
+        document.removeEventListener('mouseout', on_mouseout, true);
+        document.removeEventListener('click', on_click, true);
+        document.removeEventListener('keydown', on_keydown, true);
+        document.removeEventListener('scroll', on_reposition, true);
+        window.removeEventListener('resize', on_reposition);
+        clear_hover();
+        close_modal();
+        document.documentElement.removeAttribute(ROOT_ATTR);
+        if (state.host && state.host.isConnected)
+            state.host.remove();
+        state.enabled = false;
+    },
+    is_enabled() {
+        return state.enabled;
+    },
+    /**
+     * Open the modal for a component, an element inside one, or a jQuery
+     * object, without needing a click. Handy from the console and from tests.
+     */
+    inspect(target) {
+        if (!state.enabled)
+            return false;
+        const component = target instanceof Jqhtml_Component
+            ? target
+            : chain_for(target && target.jquery ? target[0] : target)[0];
+        if (!component)
+            return false;
+        open_modal(component);
+        return true;
+    },
+};
+// ---------------------------------------------------------------------------
+// Installation (once)
+// ---------------------------------------------------------------------------
+function install() {
+    if (state.host)
+        return;
+    if (!document.getElementById(LIGHT_STYLE_ID)) {
+        const style = document.createElement('style');
+        style.id = LIGHT_STYLE_ID;
+        style.textContent = light_css;
+        document.head.appendChild(style);
+    }
+    const host = document.createElement('div');
+    host.setAttribute(HOST_ATTR, '');
+    const shadow = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = shadow_css;
+    shadow.appendChild(style);
+    const layer = el('div', 'layer');
+    shadow.appendChild(layer);
+    const modal = el('div', 'modal');
+    shadow.appendChild(modal);
+    state.host = host;
+    state.shadow = shadow;
+    state.layer = layer;
+    state.modal = modal;
+}
+// ---------------------------------------------------------------------------
+// Component chain
+// ---------------------------------------------------------------------------
+/** Components from the one containing `node` outward to the root. */
+function chain_for(node) {
+    const chain = [];
+    let element = node instanceof Element ? node : (node && node.parentElement) || null;
+    while (element) {
+        const owner = element.closest('.Component');
+        if (!owner)
+            break;
+        const component = $(owner).data('_component');
+        if (component instanceof Jqhtml_Component && !component.$.hasClass('_Component_Stopped'))
+            chain.push(component);
+        element = owner.parentElement;
     }
-    // No parent template found
-    console.warn(`[JQHTML] No parent template found after walking chain`);
-    return null;
+    return chain;
 }
-/**
- * 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
+function is_ours(event) {
+    return !!state.host && event.composedPath().includes(state.host);
+}
+// ---------------------------------------------------------------------------
+// Hover
+// ---------------------------------------------------------------------------
+function on_mouseover(event) {
+    if (is_ours(event))
         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);
+    const chain = chain_for(event.target);
+    if (chain[0] === state.chain[0])
+        return;
+    set_hover(chain);
 }
-/**
- * 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);
-                }
-            }
-        }
-    });
+function on_mouseout(event) {
+    if (!event.relatedTarget)
+        clear_hover(); // pointer left the document
 }
-/**
- * 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);
-                    }
-                });
-            }
-        }
+function on_reposition() {
+    if (state.chain.length)
+        render_labels();
+}
+function set_hover(chain) {
+    clear_hover();
+    state.chain = chain;
+    chain.forEach((component, depth) => {
+        const element = component.$[0];
+        element.classList.add(HIT_CLASS, DEPTH_CLASS + (depth % DEPTH_COLORS));
+        state.hit_elements.push(element);
     });
+    render_labels();
+}
+function clear_hover() {
+    for (const element of state.hit_elements) {
+        element.classList.remove(HIT_CLASS);
+        for (let i = 0; i < DEPTH_COLORS; i++)
+            element.classList.remove(DEPTH_CLASS + i);
+    }
+    state.hit_elements = [];
+    state.chain = [];
+    if (state.layer)
+        state.layer.textContent = '';
 }
 /**
- * Evaluate an expression in component context
+ * One tab per component in the chain, pinned to the component's top-left
+ * corner and no wider than the component. Outermost first so the innermost
+ * paints on top; tabs that share a corner (a child filling its parent, the
+ * usual case) stack downward instead of hiding each other.
  */
-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);
+function render_labels() {
+    const layer = state.layer;
+    layer.textContent = '';
+    const taken = new Map();
+    for (let depth = state.chain.length - 1; depth >= 0; depth--) {
+        const component = state.chain[depth];
+        const rect = component.$[0].getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            continue;
+        const left = Math.max(0, Math.round(rect.left));
+        const top = Math.max(0, Math.round(rect.top));
+        const key = `${left},${top}`;
+        const stacked = taken.get(key) || 0;
+        taken.set(key, stacked + 1);
+        const label = el('div', `label ${PREFIX}depth-${depth % DEPTH_COLORS}`);
+        label.style.left = `${left}px`;
+        label.style.top = `${top + stacked * LABEL_HEIGHT}px`;
+        label.style.maxWidth = `${Math.max(24, Math.round(rect.width))}px`;
+        label.appendChild(el('span', 'label-name', component.component_name()));
+        const args = simple_args(component);
+        if (args)
+            label.appendChild(el('span', 'label-args', args));
+        layer.appendChild(label);
     }
-    catch (error) {
-        console.error(`Invalid expression: ${expression}`, error);
-        return undefined;
+}
+/** `$id=7 $title="Users"` - only strings, numbers and booleans, never internals. */
+function simple_args(component) {
+    const parts = [];
+    for (const [key, value] of Object.entries(component.args || {})) {
+        if (key.startsWith('_'))
+            continue;
+        if (typeof value === 'string')
+            parts.push(`$${key}=${JSON.stringify(truncate(value, 24))}`);
+        else if (typeof value === 'number' || typeof value === 'boolean')
+            parts.push(`$${key}=${value}`);
     }
+    return parts.join(' ');
 }
-/**
- * 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];
+// ---------------------------------------------------------------------------
+// Click -> modal
+// ---------------------------------------------------------------------------
+function on_click(event) {
+    if (is_ours(event) || event.altKey)
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    const chain = chain_for(event.target);
+    if (!chain.length) {
+        close_modal();
+        return;
+    }
+    open_modal(chain[0]);
+}
+function on_keydown(event) {
+    if (event.key === 'Escape' && state.modal_component) {
+        close_modal();
+        event.stopPropagation();
+    }
+}
+function close_modal() {
+    if (!state.modal)
+        return;
+    state.modal.classList.remove(`${PREFIX}modal-open`);
+    state.modal.textContent = '';
+    state.modal_component = null;
+}
+function open_modal(component) {
+    const modal = state.modal;
+    modal.textContent = '';
+    state.modal_component = component;
+    const chain = chain_for(component.$[0]);
+    const ancestors = chain.slice(1);
+    const element = component.$[0];
+    // Title bar
+    const title = el('div', 'title');
+    title.appendChild(el('span', 'title-name', `<${component.component_name()}>`));
+    const log = el('button', 'button', 'Log to console');
+    log.addEventListener('click', () => {
+        console.log(`[JQHTML debug] <${component.component_name()}>`, component, element);
+    });
+    title.appendChild(log);
+    const close = el('button', 'button', 'Close');
+    close.addEventListener('click', close_modal);
+    title.appendChild(close);
+    modal.appendChild(title);
+    // Identity
+    const ctor = component.constructor;
+    const hierarchy = ctor.get_class_hierarchy ? ctor.get_class_hierarchy() : [ctor.name];
+    const identity = table();
+    row(identity, 'name', '', component.component_name());
+    row(identity, 'class', '', hierarchy.join(' → '));
+    row(identity, 'element', '', describe_element(element));
+    row(identity, '_cid', '', String(component._cid));
+    row(identity, 'lifecycle', '', READY_STATES[component._ready_state] || String(component._ready_state));
+    const nocache = element.getAttribute('data-nocache');
+    if (nocache)
+        row(identity, 'cache', '', `declined: ${nocache}`);
+    modal.appendChild(section('Identity', identity));
+    // Args / data / state
+    modal.appendChild(section('Args', object_table(component.args)));
+    modal.appendChild(section('Data', object_table(component.data)));
+    modal.appendChild(section('State', object_table(component.state)));
+    // Ancestry
+    const list = el('div', 'list');
+    if (!ancestors.length)
+        list.appendChild(el('div', 'empty', 'none - this is a root component'));
+    for (const ancestor of ancestors) {
+        const link = el('div', 'link');
+        link.appendChild(el('span', 'link-name', `<${ancestor.component_name()}>`));
+        link.appendChild(el('span', 'link-cid', String(ancestor._cid)));
+        link.addEventListener('click', () => open_modal(ancestor));
+        list.appendChild(link);
+    }
+    modal.appendChild(section('Ancestry (DOM, nearest first)', list));
+    // Instantiator - the component whose template wrote this tag. Differs from
+    // the DOM parent for markup written in a slot body or default content.
+    const instantiator = component.instantiator ? component.instantiator() : null;
+    const inst = el('div', 'list');
+    if (instantiator) {
+        const link = el('div', 'link');
+        link.appendChild(el('span', 'link-name', `<${instantiator.component_name()}>`));
+        link.appendChild(el('span', 'link-cid', String(instantiator._cid)));
+        link.addEventListener('click', () => open_modal(instantiator));
+        inst.appendChild(link);
+        if (ancestors[0] && instantiator !== ancestors[0]) {
+            inst.appendChild(el('div', 'note', 'Written in this component\'s template but rendered inside a different parent (slot or default content): handlers and $sid bind here.'));
+        }
     }
-    // Otherwise treat as inline code
+    else {
+        inst.appendChild(el('div', 'empty', 'none - created directly'));
+    }
+    modal.appendChild(section('Instantiator', inst));
+    modal.classList.add(`${PREFIX}modal-open`);
+}
+// ---------------------------------------------------------------------------
+// DOM helpers (shadow side)
+// ---------------------------------------------------------------------------
+function el(tag, classes, text) {
+    const node = document.createElement(tag);
+    node.className = classes.split(' ').map((c) => (c.startsWith(PREFIX) ? c : PREFIX + c)).join(' ');
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+function section(heading, body) {
+    const wrap = el('div', 'section');
+    wrap.appendChild(el('div', 'h', heading));
+    wrap.appendChild(body);
+    return wrap;
+}
+function table() {
+    return el('div', 'table');
+}
+function row(t, key, type, value) {
+    t.appendChild(el('span', 'key', key));
+    t.appendChild(el('span', 'type', type));
+    t.appendChild(el('span', 'value', value));
+}
+function object_table(source) {
+    const entries = source && typeof source === 'object' ? Object.entries(source) : [];
+    if (!entries.length)
+        return el('div', 'empty', 'empty');
+    const t = table();
+    for (const [key, value] of entries)
+        row(t, key, type_of(value), preview(value));
+    return t;
+}
+function type_of(value) {
+    if (value === null)
+        return 'null';
+    if (Array.isArray(value))
+        return `array(${value.length})`;
+    if (value instanceof Jqhtml_Component)
+        return 'component';
+    if (value && value.jquery)
+        return `jQuery(${value.length})`;
+    if (typeof value === 'object' && value instanceof Element)
+        return 'element';
+    return typeof value;
+}
+function preview(value) {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return JSON.stringify(truncate(value, 200));
+    if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint')
+        return String(value);
+    if (typeof value === 'function')
+        return `ƒ ${value.name || 'anonymous'}()`;
+    if (value instanceof Jqhtml_Component)
+        return `<${value.component_name()}> ${value._cid}`;
+    if (value.jquery)
+        return value.length ? describe_element(value[0]) : 'empty';
+    if (value instanceof Element)
+        return describe_element(value);
     try {
-        return new Function('$event', `
-      const { data, args, $, emit, $sid } = this;
-      ${expression}
-    `).bind(component);
+        return truncate(JSON.stringify(value), 200);
     }
-    catch (error) {
-        console.error(`Invalid handler: ${expression}`, error);
-        return null;
+    catch {
+        return `{${Object.keys(value).join(', ')}}`;
     }
 }
-/**
- * Helper to escape HTML for safe output
- */
-function escape_html(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
+function describe_element(element) {
+    const id = element.id ? `#${element.id}` : '';
+    const classes = element.classList.length ? `.${Array.from(element.classList).join('.')}` : '';
+    return `${element.tagName.toLowerCase()}${id}${classes}`;
 }
-/**
- * Helper to escape HTML and convert newlines to <br /> tags
- * Used by <%br= %> syntax for displaying user-entered text with line breaks
- */
-function escape_html_nl2br(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    // Escape HTML first, then replace newlines with <br />
-    return div.innerHTML.replace(/\n/g, '<br />');
+function truncate(text, max) {
+    return text.length > max ? `${text.slice(0, max - 1)}…` : text;
 }
 
 /**
@@ -5723,13 +6515,12 @@ function init_jquery_plugin(jQuery) {
     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
+        // Unwrap a component instance to its root element, so $(component) behaves
+        // exactly like component.$ (addClass, find, [0] and every other jQuery method).
+        // The check is an instanceof on the class itself: the previous duck-type tested
+        // for an id() method, which Jqhtml_Component has never had, so this branch was
+        // dead and $(component) wrapped the plain object instead.
+        if (selector instanceof Jqhtml_Component) {
             return selector.$;
         }
         // Otherwise, call original jQuery constructor
@@ -5805,13 +6596,12 @@ function init_jquery_plugin(jQuery) {
         // 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);
-            }
+            // Stop the existing component. A throwing stop() is NOT swallowed: the caller
+            // asked to replace a live component, and overwriting one whose on_stop() failed
+            // would leave its timers, intervals and listeners running against DOM that is
+            // about to be destroyed. Let the throw reach the caller with the old component
+            // still in place, so the failure is visible and recoverable.
+            existingComponent.stop();
             // Remove component classes (any class starting with a capital letter, or a
             // component name with the reserved underscore prefix - except BEM classes)
             const classes = element.attr('class');
@@ -5827,7 +6617,15 @@ function init_jquery_plugin(jQuery) {
                     const capital_first = cls[0] === cls[0].toUpperCase() && cls[0] !== cls[0].toLowerCase();
                     return !capital_first && !is_component_name(cls);
                 });
-                element.attr('class', nonComponentClasses.join(' '));
+                // Drop the attribute entirely when nothing survived the strip: attr('class', '')
+                // leaves a `class=""` in the markup, which is noise in the DOM and in snapshot
+                // comparisons for an element that now has no classes at all.
+                if (nonComponentClasses.length > 0) {
+                    element.attr('class', nonComponentClasses.join(' '));
+                }
+                else {
+                    element.removeAttr('class');
+                }
             }
             // Remove component data
             element.removeData('_component');
@@ -5854,8 +6652,11 @@ function init_jquery_plugin(jQuery) {
             }
         }
         else {
-            // Direct class reference
+            // Direct class reference. The invocation name is the class's own; it is
+            // recorded for component_name() but does not drive the template tag
+            // check below, which is for named (template-backed) invocations.
             ComponentClass = componentOrName;
+            args = { ...args, _component_name: componentOrName.component_name || componentOrName.name };
         }
         // Check if element tag matches expected tag from template
         let targetElement = element;
@@ -5865,18 +6666,35 @@ function init_jquery_plugin(jQuery) {
             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)
+                // Tag mismatch. Replace whenever we can actually do it: the element must be in
+                // a document (replaceWith() on a parentless element is a silent no-op that would
+                // strand the component on a detached node) and must not be <body>.
+                //
+                // This used to require a truthy args._inner_html, i.e. server-rendered content.
+                // boot.ts always sets _inner_html - but it empties the placeholder first, so a
+                // placeholder with no server content carries '' and fell through to a warning,
+                // hydrating into the wrong tag. Hydration of an empty placeholder still works:
+                // the copied innerHTML is simply ''.
+                const oldEl = element[0];
+                const can_replace = currentTag !== 'body' && !!(oldEl && oldEl.parentNode);
+                if (can_replace) {
                     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);
                         }
                     }
+                    // Carry the jQuery data store across. $-args and anything the caller stashed
+                    // with .data() live there, and they are read back off the element during
+                    // component construction - dropping them silently changed the component's args.
+                    const old_data = element.data();
+                    if (old_data) {
+                        for (const key of Object.keys(old_data)) {
+                            newElement.data(key, old_data[key]);
+                        }
+                    }
                     // Copy innerHTML
                     newElement.html(element.html());
                     // Replace in DOM
@@ -6191,12 +7009,14 @@ function init(jQuery, config) {
     }
 }
 // Version - will be replaced during build with actual version from package.json
-const version = '2.3.64';
+const version = '2.3.68';
 // Default export with all functionality
 const jqhtml = {
     // Core
     Jqhtml_Component,
     LifecycleManager,
+    // Internal - exposed for debugging and for tests that inspect coordination state
+    Load_Coordinator,
     // Registry
     register,
     register_component,
@@ -6212,7 +7032,6 @@ const jqhtml = {
     // Template system
     process_instructions,
     extract_slots,
-    render_template,
     escape_html,
     escape_html_nl2br,
     // Version property - internal
@@ -6222,6 +7041,14 @@ const jqhtml = {
     // Integration configuration - see config.ts
     configure,
     get_config,
+    // Value printers: how <%= %> renders an object (see value-printers.ts).
+    // print_object and dynamic_component_name are called by compiled templates.
+    add_object_printer,
+    print_object,
+    dynamic_component_name,
+    // Component debug overlay: hover outlines + click-to-inspect modal.
+    // jqhtml.debug_overlay.enable() / .disable() / .is_enabled() / .inspect(x)
+    debug_overlay,
     // Debug settings
     debug: {
         enabled: false,
@@ -6327,5 +7154,5 @@ if (typeof window !== 'undefined' && !window.jqhtml) {
     }
 }
 
-export { COMPONENT_NAME_PATTERN, COMPONENT_NAME_RULE, Jqhtml_Component, LifecycleManager as Jqhtml_LifecycleManager, Jqhtml_Local_Storage, LifecycleManager, Load_Coordinator, applyDebugDelay, boot, clear_preload_data, configure, create_component, jqhtml as default, devWarn, escape_html, escape_html_nl2br, extract_slots, get_captured_data, get_component_class, get_component_names, get_config, get_registered_templates, get_template, get_template_by_class, handleComponentError, has_component, init, init_jquery_plugin, isSequentialProcessing, is_component_name, list_components, logDataChange, logDispatch, logInstruction, logLifecycle, process_instructions, register, register_cache_class, register_component, register_template, render_template, set_preload_data, start_data_capture, stop_data_capture, version };
+export { COMPONENT_NAME_PATTERN, COMPONENT_NAME_RULE, Jqhtml_Component, LifecycleManager as Jqhtml_LifecycleManager, Jqhtml_Local_Storage, LifecycleManager, Load_Coordinator, add_object_printer, applyDebugDelay, boot, clear_preload_data, configure, create_component, debug_overlay, jqhtml as default, devWarn, dynamic_component_name, escape_html, escape_html_nl2br, extract_slots, get_captured_data, get_component_class, get_component_names, get_config, get_object_printers, get_registered_templates, get_template, get_template_by_class, handleComponentError, has_component, init, init_jquery_plugin, isSequentialProcessing, is_component_name, list_components, logDataChange, logDispatch, logInstruction, logLifecycle, print_object, process_instructions, register, register_cache_class, register_component, register_template, set_preload_data, start_data_capture, stop_data_capture, version };
 //# sourceMappingURL=index.js.map