@jqhtml/core 2.3.68 → 2.3.70

package/dist/jqhtml-core.esm.js

@@ -1,5 +1,5 @@
 /**
- * JQHTML Core v2.3.68
+ * JQHTML Core v2.3.70
  * (c) 2025 JQHTML Team
  * Released under the MIT License
  */
@@ -1914,7 +1914,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.68';
+const CORE_VERSION = '2.3.70';
 const CLASS_MARKER = '__jqhtml_class__';
 const PROPS_MARKER = '__jqhtml_props__';
 /**
@@ -3943,6 +3943,7 @@ function resolve_parent_template(template_def, ctor) {
 class Jqhtml_Component {
     constructor(element, args = {}) {
         this._ready_state = 0; // 0=created, 1=init, 2=loaded, 3=rendered, 4=ready
+        this._debug_no_data = false; // Set by _reload_without_data(); cleared by any real load
         this._instantiator = null; // Component that instantiated this one
         this._dom_parent = null; // Closest component in DOM tree (for lifecycle)
         this._dom_children = new Set(); // Components in DOM subtree (for lifecycle)
@@ -4555,6 +4556,8 @@ class Jqhtml_Component {
             // The queued executor can start long after load() was called - re-check.
             if (this._stopped)
                 return false;
+            // Any real load returns the component to normal, whatever the debug tool did.
+            this._debug_no_data = 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)
@@ -4744,6 +4747,8 @@ class Jqhtml_Component {
     async _load() {
         if (this._stopped || this._ready_state >= 2)
             return;
+        // Any real load returns the component to normal, whatever the debug tool did.
+        this._debug_no_data = false;
         this._log_lifecycle('load', 'start');
         // use_cached_data feature: If cache hit occurred and use_cached_data=true, skip on_load() entirely
         // The cached data is already in this.data from create() phase
@@ -5176,6 +5181,51 @@ class Jqhtml_Component {
     async refresh() {
         return this.reload(false);
     }
+    /**
+     * Re-render this component from its on_create() state with its cache dropped and
+     * WITHOUT running on_load()/on_loaded()/on_ready().
+     *
+     * @internal debug tool. Used by the debug overlay's lifecycle footer to see what a
+     * component looks like with no loaded data at all. Not public API, not documented,
+     * and no downstream code should call it: reload() or refresh() afterwards returns
+     * the component to normal (the snapshot is intact and the cache is gone, so the
+     * next load is a genuine fresh fetch).
+     */
+    _reload_without_data() {
+        if (this._stopped)
+            return Promise.resolve();
+        // Same marker invalidation reload()/render() do: later ready() waiters must wait
+        // for THIS cycle rather than resolve off the previous one.
+        this.invalidate('ready');
+        // Serialised with reload()/refresh() so it can never interleave with a real load.
+        return this._queue.enqueue('reload', async () => {
+            if (this._stopped)
+                return;
+            // Drop this component's own cache entries (data and html snapshot), so a later
+            // reload() genuinely re-fetches instead of hydrating from what is on screen now.
+            const { cache_key } = generate_cache_key(this);
+            if (cache_key !== null) {
+                Jqhtml_Local_Storage.remove(cache_key);
+                Jqhtml_Local_Storage.remove(`${cache_key}::html`);
+            }
+            // Back to the on_create() state. Components with no custom on_load() take no
+            // snapshot (nothing can have changed this.data), so they simply re-render.
+            if (this.__initial_data_snapshot !== null) {
+                this.__data_frozen = false;
+                this.data = JSON.parse(JSON.stringify(this.__initial_data_snapshot));
+                this.__data_frozen = true;
+            }
+            // Read by the debug overlay's lifecycle row; cleared by _reload()/load()/_load().
+            this._debug_no_data = true;
+            this._render();
+            await this._wait_for_children_ready();
+            if (this._stopped)
+                return;
+            this._ready_state = 4;
+            this._update_debug_attrs();
+            this.trigger('ready');
+        });
+    }
     /**
      * Internal reload implementation - re-fetch data and re-render
      *
@@ -5213,6 +5263,8 @@ class Jqhtml_Component {
     async _reload() {
         if (this._stopped)
             return;
+        // Any real load returns the component to normal, whatever the debug tool did.
+        this._debug_no_data = false;
         // Invalidate ready event so new handlers wait for this reload to complete
         // This prevents .on('ready') handlers from firing immediately based on previous lifecycle
         this.invalidate('ready');
@@ -5951,9 +6003,9 @@ 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 light_css = "html[data-jqhtml-debug] .jqhtml-debug-selected {\n  outline: 2px solid #b45309;\n  outline-offset: -2px;\n}\n\nhtml[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}";
+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: auto;\n  cursor: pointer;\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  overflow: hidden;\n  padding: 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-modal.jqhtml-debug-modal-left {\n  left: 24px;\n  right: auto;\n}\n\n.jqhtml-debug-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #1c1c1c;\n  color: #ffffff;\n  font-weight: bold;\n}\n\n.jqhtml-debug-body {\n  display: block;\n  box-sizing: border-box;\n  overflow-y: scroll;\n  min-height: 300px;\n  max-height: min(600px, 100vh - 200px);\n  padding: 0 0 12px 0;\n}\n\n.jqhtml-debug-footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #ffffff;\n  border-top: 1px solid #d0d0d0;\n}\n\n.jqhtml-debug-footer-label {\n  color: #666666;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\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-button.jqhtml-debug-footer-button {\n  color: #1c1c1c;\n  border-color: #d0d0d0;\n}\n\n.jqhtml-debug-button.jqhtml-debug-footer-button:hover {\n  background: #eef3ff;\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}";
 
 /**
  * Component debug overlay.
@@ -5965,6 +6017,12 @@ var shadow_css = ":host {\n  all: initial;\n  display: block;\n  position: fixed
  * data, state, ancestry, instantiator) instead of firing the click. Alt+click
  * passes through. `disable()` puts everything back.
  *
+ * The labels are part of the interaction, not just decoration: the pointer can
+ * move from a component onto one of its tabs without the hover set collapsing,
+ * and clicking a tab inspects that tab's component. The modal keeps an amber
+ * outline on whatever it is showing, and its title bar carries Parent / Back so
+ * the DOM chain can be walked without going back to the page.
+ *
  * 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
@@ -5983,8 +6041,11 @@ 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 SELECTED_CLASS = `${PREFIX}selected`; // on the element the modal is showing
 const DEPTH_COLORS = 6; // keep in step with $depth-colors in _tokens.scss
 const LABEL_HEIGHT = 18;
+const LABEL_MIN_WIDTH = 400; // a narrow component still gets a readable tab
+const VIEWPORT_MARGIN = 5; // gap kept between a label's right edge and the viewport
 const READY_STATES = ['created', 'init', 'loaded', 'rendered', 'ready'];
 const state = {
     enabled: false,
@@ -5994,7 +6055,10 @@ const state = {
     modal: null,
     chain: [],
     hit_elements: [],
+    label_hovered: false,
     modal_component: null,
+    nav_stack: [],
+    selected_element: null,
 };
 // ---------------------------------------------------------------------------
 // Public API
@@ -6051,7 +6115,7 @@ const debug_overlay = {
             : chain_for(target && target.jquery ? target[0] : target)[0];
         if (!component)
             return false;
-        open_modal(component);
+        select(component);
         return true;
     },
 };
@@ -6106,9 +6170,18 @@ function is_ours(event) {
 // ---------------------------------------------------------------------------
 // Hover
 // ---------------------------------------------------------------------------
+/**
+ * A hover on the page replaces the hover set - except while the pointer is on
+ * our own UI. An event from inside the shadow host (a label, the modal) never
+ * clears or changes the hover, and neither does a page hover raised while the
+ * pointer is parked on a label: that is what lets a label be reached and clicked
+ * without the outlines it belongs to vanishing on the way.
+ */
 function on_mouseover(event) {
     if (is_ours(event))
         return;
+    if (state.label_hovered)
+        return;
     const chain = chain_for(event.target);
     if (chain[0] === state.chain[0])
         return;
@@ -6118,6 +6191,32 @@ function on_mouseout(event) {
     if (!event.relatedTarget)
         clear_hover(); // pointer left the document
 }
+/**
+ * The pointer left a label. If it landed back inside the component the label
+ * belongs to (the usual case - the label sits on the component's own corner),
+ * the hover set stays; anywhere else it goes. `elementFromPoint` reports our
+ * shadow host for a point covered by another label, so the host is skipped and
+ * the page element underneath is used.
+ */
+function on_label_leave(event) {
+    state.label_hovered = false;
+    const innermost = state.chain[0];
+    if (!innermost)
+        return;
+    const under = element_under(event.clientX, event.clientY);
+    if (!under || !innermost.$[0].contains(under))
+        clear_hover();
+}
+function element_under(x, y) {
+    const all = document.elementsFromPoint;
+    const candidates = all
+        ? all.call(document, x, y)
+        : [document.elementFromPoint(x, y)].filter(Boolean);
+    for (const node of candidates)
+        if (node !== state.host)
+            return node;
+    return null;
+}
 function on_reposition() {
     if (state.chain.length)
         render_labels();
@@ -6140,18 +6239,23 @@ function clear_hover() {
     }
     state.hit_elements = [];
     state.chain = [];
+    state.label_hovered = false;
     if (state.layer)
         state.layer.textContent = '';
 }
 /**
  * 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.
+ * corner. Width: the component's, but a narrow component still gets up to
+ * LABEL_MIN_WIDTH so its name and args stay legible; a label that would then
+ * run off the right edge is slid back so its right edge sits at the margin.
+ * 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 render_labels() {
     const layer = state.layer;
     layer.textContent = '';
+    state.label_hovered = false; // the element the pointer was on is gone
     const taken = new Map();
     for (let depth = state.chain.length - 1; depth >= 0; depth--) {
         const component = state.chain[depth];
@@ -6164,14 +6268,33 @@ function render_labels() {
         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`;
+        // Laid out at the left edge FIRST, then moved. An absolutely positioned box
+        // shrink-to-fits into the room its own `left` leaves, so measuring it at its
+        // final position would report the squeezed width, and moving it would let it
+        // re-expand - the two chase each other. At left 0 it has the whole viewport,
+        // so the measurement below is the width it will actually keep.
+        label.style.left = '0px';
         label.style.top = `${top + stacked * LABEL_HEIGHT}px`;
-        label.style.maxWidth = `${Math.max(24, Math.round(rect.width))}px`;
+        label.style.maxWidth = `${rect.width < LABEL_MIN_WIDTH ? LABEL_MIN_WIDTH : 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));
+        // Each label knows its own component: it is a hover target that holds the set
+        // in place, and a click target that inspects THAT component, not the innermost.
+        label.addEventListener('mouseenter', () => { state.label_hovered = true; });
+        label.addEventListener('mouseleave', on_label_leave);
+        label.addEventListener('click', (event) => {
+            event.stopPropagation(); // the document handler already skips is_ours events
+            select(component);
+        });
         layer.appendChild(label);
+        // A label on a narrow component may be wider than the component, so a component
+        // near the right edge can push its label off-screen. Slide it back until its
+        // right edge sits on the margin, never past the left edge.
+        const width = label.getBoundingClientRect().width || label.offsetWidth;
+        const limit = window.innerWidth - VIEWPORT_MARGIN;
+        label.style.left = `${left + width > limit ? Math.max(0, Math.round(limit - width)) : left}px`;
     }
 }
 /** `$id=7 $title="Users"` - only strings, numbers and booleans, never internals. */
@@ -6201,7 +6324,7 @@ function on_click(event) {
         close_modal();
         return;
     }
-    open_modal(chain[0]);
+    select(chain[0]);
 }
 function on_keydown(event) {
     if (event.key === 'Escape' && state.modal_component) {
@@ -6215,17 +6338,82 @@ function close_modal() {
     state.modal.classList.remove(`${PREFIX}modal-open`);
     state.modal.textContent = '';
     state.modal_component = null;
+    state.nav_stack = [];
+    set_selected(null);
+}
+// ---------------------------------------------------------------------------
+// Selection and navigation
+//
+// Three ways in, and they differ only in what they do to the navigation stack:
+//   select()   - a FRESH selection (page click, label click, inspect()): the stack
+//                is dropped, so Back disappears.
+//   navigate() - a step along the chain (Parent, an Ancestry entry, the
+//                Instantiator link): the component being left is pushed.
+//   show()     - render only, stack untouched; what Back and the lifecycle
+//                buttons re-open with.
+// ---------------------------------------------------------------------------
+function select(component) {
+    state.nav_stack = [];
+    show(component);
+}
+function navigate(component) {
+    if (state.modal_component && state.modal_component !== component) {
+        state.nav_stack.push(state.modal_component);
+    }
+    show(component);
 }
-function open_modal(component) {
+/** Pop to the last component still alive; a stopped one is skipped, not shown. */
+function go_back() {
+    while (state.nav_stack.length) {
+        const previous = state.nav_stack.pop();
+        if (previous.$.hasClass('_Component_Stopped'))
+            continue;
+        show(previous);
+        return;
+    }
+    if (state.modal_component)
+        show(state.modal_component); // nothing left: drop Back
+}
+/** Move SELECTED_CLASS to `element`, or take it off the page entirely for null. */
+function set_selected(element) {
+    if (state.selected_element && state.selected_element !== element) {
+        state.selected_element.classList.remove(SELECTED_CLASS);
+    }
+    state.selected_element = element;
+    if (element)
+        element.classList.add(SELECTED_CLASS);
+}
+/**
+ * The inspector. Three children: a fixed title bar, a scrolling body holding every
+ * section, and a fixed footer of lifecycle buttons. The modal sits top-right, but
+ * moves to the left when the inspected component is itself in the right half of the
+ * viewport - otherwise the panel covers the thing being inspected.
+ */
+function show(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
+    set_selected(element);
+    modal.classList.toggle(`${PREFIX}modal-left`, element.getBoundingClientRect().left > window.innerWidth / 2);
+    // Title bar: the name, then [Back] [Parent] [Log to console] [Close]. Back is
+    // there only while something was navigated away from, Parent only while the
+    // component has a DOM parent component - the first Ancestry entry.
     const title = el('div', 'title');
     title.appendChild(el('span', 'title-name', `<${component.component_name()}>`));
+    if (state.nav_stack.length) {
+        const back = el('button', 'button', 'Back');
+        back.addEventListener('click', go_back);
+        title.appendChild(back);
+    }
+    const parent = ancestors[0];
+    if (parent) {
+        const up = el('button', 'button', 'Parent');
+        up.addEventListener('click', () => navigate(parent));
+        title.appendChild(up);
+    }
     const log = el('button', 'button', 'Log to console');
     log.addEventListener('click', () => {
         console.log(`[JQHTML debug] <${component.component_name()}>`, component, element);
@@ -6235,6 +6423,9 @@ function open_modal(component) {
     close.addEventListener('click', close_modal);
     title.appendChild(close);
     modal.appendChild(title);
+    // The only scrolling element: the title bar and the footer stay put.
+    const body = el('div', 'body');
+    modal.appendChild(body);
     // Identity
     const ctor = component.constructor;
     const hierarchy = ctor.get_class_hierarchy ? ctor.get_class_hierarchy() : [ctor.name];
@@ -6243,15 +6434,18 @@ function open_modal(component) {
     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 lifecycle = READY_STATES[component._ready_state] || String(component._ready_state);
+    row(identity, 'lifecycle', '', component._debug_no_data
+        ? `${lifecycle} (no data - reload w/o data)`
+        : lifecycle);
     const nocache = element.getAttribute('data-nocache');
     if (nocache)
         row(identity, 'cache', '', `declined: ${nocache}`);
-    modal.appendChild(section('Identity', identity));
+    body.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)));
+    body.appendChild(section('Args', object_table(component.args)));
+    body.appendChild(section('Data', object_table(component.data)));
+    body.appendChild(section('State', object_table(component.state)));
     // Ancestry
     const list = el('div', 'list');
     if (!ancestors.length)
@@ -6260,10 +6454,10 @@ function open_modal(component) {
         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));
+        link.addEventListener('click', () => navigate(ancestor));
         list.appendChild(link);
     }
-    modal.appendChild(section('Ancestry (DOM, nearest first)', list));
+    body.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;
@@ -6272,7 +6466,7 @@ function open_modal(component) {
         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));
+        link.addEventListener('click', () => navigate(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.'));
@@ -6281,9 +6475,49 @@ function open_modal(component) {
     else {
         inst.appendChild(el('div', 'empty', 'none - created directly'));
     }
-    modal.appendChild(section('Instantiator', inst));
+    body.appendChild(section('Instantiator', inst));
+    // Footer: lifecycle controls. Clicks land inside the shadow host, so the
+    // overlay's own click hijack lets them through (is_ours).
+    const footer = el('div', 'footer');
+    footer.appendChild(el('span', 'footer-label', 'Lifecycle:'));
+    footer.appendChild(lifecycle_button(component, 'Reload', (c) => c.reload()));
+    footer.appendChild(lifecycle_button(component, 'Refresh', (c) => c.refresh()));
+    footer.appendChild(lifecycle_button(component, 'Rerender', (c) => c.render()));
+    footer.appendChild(lifecycle_button(component, 'Reload w/o data', (c) => c._reload_without_data()));
+    modal.appendChild(footer);
     modal.classList.add(`${PREFIX}modal-open`);
 }
+/**
+ * One footer button. Runs its lifecycle call on a live component, logs whatever it
+ * throws or rejects with, and re-opens the modal once the call settles so the panel
+ * (lifecycle row above all) describes the state the button just produced.
+ */
+function lifecycle_button(component, label, run) {
+    const button = el('button', 'button footer-button', label);
+    button.addEventListener('click', () => {
+        if (component.$.hasClass('_Component_Stopped'))
+            return; // dead component: nothing to do
+        let result;
+        try {
+            result = run(component);
+        }
+        catch (error) {
+            console.error(`[JQHTML debug] ${label} threw on <${component.component_name()}>`, error);
+            return;
+        }
+        Promise.resolve(result)
+            .catch((error) => {
+            console.error(`[JQHTML debug] ${label} rejected on <${component.component_name()}>`, error);
+        })
+            .then(() => {
+            // `show`, not `select`: the lifecycle buttons re-render the panel in place
+            // and must not throw away the navigation stack behind it.
+            if (state.enabled && state.modal_component === component)
+                show(component);
+        });
+    });
+    return button;
+}
 // ---------------------------------------------------------------------------
 // DOM helpers (shadow side)
 // ---------------------------------------------------------------------------
@@ -7014,7 +7248,7 @@ function init(jQuery, config) {
     }
 }
 // Version - will be replaced during build with actual version from package.json
-const version = '2.3.68';
+const version = '2.3.70';
 // Default export with all functionality
 const jqhtml = {
     // Core