uicore-ts 1.1.310 → 1.1.312

package/compiledScripts/UILayoutDebugger.js

@@ -0,0 +1,2535 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var UILayoutDebugger_exports = {};
+__export(UILayoutDebugger_exports, {
+  UILayoutDebugger: () => UILayoutDebugger
+});
+module.exports = __toCommonJS(UILayoutDebugger_exports);
+const _UILayoutDebugger = class {
+  static get isEnabled() {
+    return _UILayoutDebugger._isEnabled;
+  }
+  static get breakpointsEnabled() {
+    return _UILayoutDebugger._breakpointsEnabled;
+  }
+  static enable() {
+    _UILayoutDebugger._isEnabled = true;
+    _UILayoutDebugger._ensureOverlay();
+    _UILayoutDebugger._renderOverlay();
+    console.log(
+      "%c[UILayoutDebugger] ENABLED \u2014 recording layout traces and showing overlay.",
+      "color: #4CAF50; font-weight: bold"
+    );
+  }
+  static disable() {
+    _UILayoutDebugger._isEnabled = false;
+    _UILayoutDebugger._breakpointsEnabled = false;
+    _UILayoutDebugger._removeOverlay();
+    console.log(
+      "%c[UILayoutDebugger] DISABLED.",
+      "color: #9E9E9E; font-weight: bold"
+    );
+  }
+  static enableBreakpoints() {
+    if (!_UILayoutDebugger._isEnabled) {
+      _UILayoutDebugger.enable();
+    }
+    _UILayoutDebugger._breakpointsEnabled = true;
+    console.log(
+      "%c[UILayoutDebugger] Breakpoint mode ON. Search for 'breakpointOnThisLine' in Sources to set your breakpoint.",
+      "color: #FF9800; font-weight: bold"
+    );
+  }
+  static disableBreakpoints() {
+    _UILayoutDebugger._breakpointsEnabled = false;
+    console.log(
+      "%c[UILayoutDebugger] Breakpoint mode OFF.",
+      "color: #9E9E9E"
+    );
+  }
+  static stepForward() {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const trace = _UILayoutDebugger._currentReplayTrace;
+    if (!trace) {
+      return;
+    }
+    const next = _UILayoutDebugger._replayStepIndex + 1;
+    _UILayoutDebugger.goToStep(Math.min(next, trace.steps.length - 1));
+  }
+  static stepBack() {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    _UILayoutDebugger.goToStep(Math.max(_UILayoutDebugger._replayStepIndex - 1, -1));
+  }
+  static goToStep(stepIndex) {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    _UILayoutDebugger._replayStepIndex = stepIndex;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static goToCompareStep(stepIndex) {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    _UILayoutDebugger._compareStepIndex = stepIndex;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static showTrace(traceIndex) {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const clamped = Math.max(0, Math.min(traceIndex, _UILayoutDebugger._traces.length - 1));
+    _UILayoutDebugger._replayTraceIndex = clamped;
+    _UILayoutDebugger._replayStepIndex = -1;
+    _UILayoutDebugger._singleExpandState = /* @__PURE__ */ new Map();
+    _UILayoutDebugger._renderOverlay();
+  }
+  static showCompareTrace(traceIndex) {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const clamped = Math.max(0, Math.min(traceIndex, _UILayoutDebugger._traces.length - 1));
+    _UILayoutDebugger._compareTraceIndex = clamped;
+    _UILayoutDebugger._compareStepIndex = -1;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static get _currentReplayTrace() {
+    var _a;
+    return (_a = _UILayoutDebugger._traces[_UILayoutDebugger._replayTraceIndex]) != null ? _a : null;
+  }
+  static get _currentCompareTrace() {
+    var _a;
+    return (_a = _UILayoutDebugger._traces[_UILayoutDebugger._compareTraceIndex]) != null ? _a : null;
+  }
+  static willBeginLayoutPass(viewsToLayout) {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    _UILayoutDebugger._currentTrace = {
+      passIndex: _UILayoutDebugger._passIndex++,
+      steps: [],
+      roots: [],
+      cacheChanges: [],
+      totalIterations: 0
+    };
+    _UILayoutDebugger._currentIteration = 0;
+    _UILayoutDebugger._layoutCountsThisPass = /* @__PURE__ */ new Map();
+    _UILayoutDebugger._liveViewRegistry = /* @__PURE__ */ new Map();
+    _UILayoutDebugger._pendingStep = null;
+    _UILayoutDebugger._pendingSubviewsBefore = /* @__PURE__ */ new Map();
+  }
+  static willBeginIteration(iteration) {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    _UILayoutDebugger._currentIteration = iteration;
+  }
+  static viewDidCallSetNeedsLayout(view) {
+    var _a, _b;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const viewIdx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+    if (viewIdx < 0) {
+      return;
+    }
+    if (_UILayoutDebugger._triggerMap.has(viewIdx)) {
+      return;
+    }
+    const rawStack = (_b = new Error().stack) != null ? _b : "";
+    const cleanStack = _UILayoutDebugger._cleanStack(rawStack);
+    const callerFunction = _UILayoutDebugger._extractCallerFunctionName(cleanStack);
+    _UILayoutDebugger._triggerMap.set(viewIdx, { callerFunction, cleanStack });
+  }
+  static didSetCachedIntrinsicSize(view, cacheKey, value) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const trace = _UILayoutDebugger._currentTrace;
+    if (!trace) {
+      return;
+    }
+    const viewIdx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+    if (viewIdx < 0) {
+      return;
+    }
+    const rawStack = (_b = new Error().stack) != null ? _b : "";
+    const cleanStack = _UILayoutDebugger._cleanStack(rawStack);
+    const callerFunction = _UILayoutDebugger._extractCallerFunctionName(cleanStack);
+    const event = {
+      eventIndex: trace.cacheChanges.length,
+      stepIndex: (_d = (_c = _UILayoutDebugger._pendingStep) == null ? void 0 : _c.stepIndex) != null ? _d : -1,
+      iteration: _UILayoutDebugger._currentIteration,
+      viewIndex: viewIdx,
+      className: (_f = (_e = view == null ? void 0 : view.constructor) == null ? void 0 : _e.name) != null ? _f : "UnknownView",
+      elementID: (_g = view == null ? void 0 : view.elementID) != null ? _g : String(viewIdx),
+      cacheKey,
+      newValue: { width: (_h = value == null ? void 0 : value.width) != null ? _h : 0, height: (_i = value == null ? void 0 : value.height) != null ? _i : 0 },
+      callerFunction,
+      cleanStack
+    };
+    trace.cacheChanges.push(event);
+  }
+  static willLayoutView(view) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const stepIndex = (_b = (_a = _UILayoutDebugger._currentTrace) == null ? void 0 : _a.steps.length) != null ? _b : 0;
+    const viewIdx = (_c = view == null ? void 0 : view._UIViewIndex) != null ? _c : -1;
+    if (viewIdx >= 0) {
+      _UILayoutDebugger._liveViewRegistry.set(viewIdx, view);
+    }
+    _UILayoutDebugger._pendingStep = {
+      stepIndex,
+      iteration: _UILayoutDebugger._currentIteration,
+      viewIndex: viewIdx,
+      className: (_e = (_d = view == null ? void 0 : view.constructor) == null ? void 0 : _d.name) != null ? _e : "UnknownView",
+      elementID: (_f = view == null ? void 0 : view.elementID) != null ? _f : String(viewIdx),
+      frameBefore: _UILayoutDebugger._captureFrame(view),
+      frameAfter: null,
+      cacheBefore: _UILayoutDebugger._captureCache(view),
+      cacheAfter: null,
+      subviewRecords: [],
+      trigger: (_g = _UILayoutDebugger._triggerMap.get(viewIdx)) != null ? _g : null
+    };
+    _UILayoutDebugger._triggerMap.delete(viewIdx);
+    _UILayoutDebugger._pendingSubviewsBefore = /* @__PURE__ */ new Map();
+    const subviews = (_h = view == null ? void 0 : view.subviews) != null ? _h : [];
+    for (let i = 0; i < subviews.length; i++) {
+      const sv = subviews[i];
+      const idx = (_i = sv == null ? void 0 : sv._UIViewIndex) != null ? _i : -i;
+      _UILayoutDebugger._pendingSubviewsBefore.set(idx, _UILayoutDebugger._captureFrame(sv));
+    }
+  }
+  static didLayoutView(view) {
+    var _a, _b, _c;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const step = _UILayoutDebugger._pendingStep;
+    if (!step) {
+      return;
+    }
+    step.frameAfter = _UILayoutDebugger._captureFrame(view);
+    step.cacheAfter = _UILayoutDebugger._captureCache(view);
+    const viewIdx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+    const prev = (_b = _UILayoutDebugger._layoutCountsThisPass.get(viewIdx)) != null ? _b : 0;
+    _UILayoutDebugger._layoutCountsThisPass.set(viewIdx, prev + 1);
+    (_c = _UILayoutDebugger._currentTrace) == null ? void 0 : _c.steps.push(step);
+    _UILayoutDebugger._pendingStep = null;
+  }
+  static didFinishLayoutPass(iterationCount) {
+    var _a;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const trace = _UILayoutDebugger._currentTrace;
+    if (!trace) {
+      return;
+    }
+    trace.totalIterations = iterationCount;
+    const anyView = _UILayoutDebugger._liveViewRegistry.values().next().value;
+    const rootView = anyView == null ? void 0 : anyView.rootView;
+    if (rootView) {
+      _UILayoutDebugger._lastKnownRootView = rootView;
+      const visited = /* @__PURE__ */ new Set();
+      const rootIdx = (_a = rootView._UIViewIndex) != null ? _a : -1;
+      if (rootIdx >= 0) {
+        visited.add(rootIdx);
+      }
+      trace.roots = [_UILayoutDebugger._buildTreeSnapshot(rootView, 0, visited)];
+    }
+    _UILayoutDebugger._traces.unshift(trace);
+    if (_UILayoutDebugger._traces.length > _UILayoutDebugger.maxStoredTraces) {
+      _UILayoutDebugger._traces.length = _UILayoutDebugger.maxStoredTraces;
+    }
+    _UILayoutDebugger._replayTraceIndex = 0;
+    _UILayoutDebugger._replayStepIndex = -1;
+    _UILayoutDebugger._currentTrace = null;
+    _UILayoutDebugger._liveViewRegistry.clear();
+    _UILayoutDebugger._renderOverlay();
+  }
+  static clearTraces() {
+    _UILayoutDebugger._traces = [];
+    _UILayoutDebugger._passIndex = 0;
+    _UILayoutDebugger._replayTraceIndex = 0;
+    _UILayoutDebugger._compareTraceIndex = 1;
+    _UILayoutDebugger._replayStepIndex = -1;
+    _UILayoutDebugger._compareStepIndex = -1;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static captureBaseline() {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const snap = _UILayoutDebugger._captureStateSnapshot("Baseline");
+    if (!snap) {
+      console.warn("[UILayoutDebugger] captureBaseline: no root view found yet \u2014 trigger a layout pass first.");
+      return;
+    }
+    _UILayoutDebugger._baseline = snap;
+    _UILayoutDebugger._diffSnapshot = null;
+    _UILayoutDebugger._diffMode = false;
+    _UILayoutDebugger._renderOverlay();
+    console.log(
+      `%c[UILayoutDebugger] Baseline captured \u2014 ${snap.views.size} views.`,
+      "color: #88ddff; font-weight: bold"
+    );
+  }
+  static captureAndDiff() {
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    if (!_UILayoutDebugger._baseline) {
+      console.warn("[UILayoutDebugger] captureAndDiff: no baseline set. Call captureBaseline() first.");
+      return;
+    }
+    const snap = _UILayoutDebugger._captureStateSnapshot("Current");
+    if (!snap) {
+      console.warn("[UILayoutDebugger] captureAndDiff: could not find root view.");
+      return;
+    }
+    _UILayoutDebugger._diffSnapshot = snap;
+    _UILayoutDebugger._diffMode = true;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static clearDiff() {
+    _UILayoutDebugger._baseline = null;
+    _UILayoutDebugger._diffSnapshot = null;
+    _UILayoutDebugger._diffMode = false;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static captureStaleLayoutReport() {
+    var _a, _b, _c;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const rootView = _UILayoutDebugger._lastKnownRootView;
+    if (!rootView) {
+      console.warn(
+        "[UILayoutDebugger] captureStaleLayoutReport: no root view found yet \u2014 trigger a layout pass first."
+      );
+      return;
+    }
+    const before = _UILayoutDebugger._captureStateSnapshotFromRoot(rootView, "Before (potentially stale)");
+    (_a = rootView.performForcedSubtreeLayout) == null ? void 0 : _a.call(rootView);
+    const after = _UILayoutDebugger._captureStateSnapshotFromRoot(rootView, "After (forced cold remeasure)");
+    const diffs = _UILayoutDebugger._diffSnapshots(before, after).filter((d) => d.kind !== "unchanged");
+    const forcedPassCacheChanges = /* @__PURE__ */ new Map();
+    const forcedTrace = (_b = _UILayoutDebugger._traces[0]) != null ? _b : null;
+    const forcedPassIndex = (_c = forcedTrace == null ? void 0 : forcedTrace.passIndex) != null ? _c : -1;
+    if (forcedTrace) {
+      for (const ev of forcedTrace.cacheChanges) {
+        let bucket = forcedPassCacheChanges.get(ev.viewIndex);
+        if (!bucket) {
+          bucket = [];
+          forcedPassCacheChanges.set(ev.viewIndex, bucket);
+        }
+        bucket.push(ev);
+      }
+    }
+    _UILayoutDebugger._staleReportResult = { before, after, diffs, forcedPassCacheChanges, passIndex: forcedPassIndex };
+    _UILayoutDebugger._staleReportMode = true;
+    _UILayoutDebugger._renderOverlay();
+    const correctedCount = diffs.length;
+    console.log(
+      `%c[UILayoutDebugger] Stale layout report: ${correctedCount} view(s) had stale state corrected by forced layout.`,
+      "color: #ffaa55; font-weight: bold"
+    );
+  }
+  static clearStaleReport() {
+    _UILayoutDebugger._staleReportResult = null;
+    _UILayoutDebugger._staleReportMode = false;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static toggleLiveInspector() {
+    _UILayoutDebugger._liveInspectorMode = !_UILayoutDebugger._liveInspectorMode;
+    _UILayoutDebugger._renderOverlay();
+  }
+  static _captureStateSnapshot(label) {
+    const rootView = _UILayoutDebugger._lastKnownRootView;
+    if (!rootView) {
+      return null;
+    }
+    return _UILayoutDebugger._captureStateSnapshotFromRoot(rootView, label);
+  }
+  static _captureStateSnapshotFromRoot(rootView, label) {
+    var _a, _b, _c, _d;
+    const views = /* @__PURE__ */ new Map();
+    _UILayoutDebugger._walkViewTree(rootView, views, /* @__PURE__ */ new Set());
+    const tm = window.UITextMeasurement;
+    const textMeasurement = {
+      preparedCacheSize: (_b = (_a = tm == null ? void 0 : tm._preparedCache) == null ? void 0 : _a.size) != null ? _b : -1,
+      styleCacheSize: (_d = (_c = tm == null ? void 0 : tm.globalStyleCache) == null ? void 0 : _c.size) != null ? _d : -1
+    };
+    return { label, takenAt: Date.now(), views, textMeasurement };
+  }
+  static _walkViewTree(view, out, visited) {
+    var _a, _b, _c, _d, _e;
+    const idx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+    if (idx < 0 || visited.has(idx)) {
+      return;
+    }
+    visited.add(idx);
+    out.set(idx, {
+      viewIndex: idx,
+      className: (_c = (_b = view == null ? void 0 : view.constructor) == null ? void 0 : _b.name) != null ? _c : "UnknownView",
+      elementID: (_d = view == null ? void 0 : view.elementID) != null ? _d : String(idx),
+      frame: _UILayoutDebugger._captureFrame(view),
+      cache: _UILayoutDebugger._captureCache(view)
+    });
+    const subviews = (_e = view == null ? void 0 : view.subviews) != null ? _e : [];
+    for (const sv of subviews) {
+      _UILayoutDebugger._walkViewTree(sv, out, visited);
+    }
+  }
+  static _diffSnapshots(baseline, current) {
+    var _a, _b;
+    const diffs = [];
+    const allKeys = /* @__PURE__ */ new Set([...baseline.views.keys(), ...current.views.keys()]);
+    for (const idx of allKeys) {
+      const b = (_a = baseline.views.get(idx)) != null ? _a : null;
+      const c = (_b = current.views.get(idx)) != null ? _b : null;
+      if (!b) {
+        diffs.push({
+          kind: "appeared",
+          viewIndex: idx,
+          className: c.className,
+          elementID: c.elementID,
+          baselineFrame: null,
+          currentFrame: c.frame,
+          baselineCache: null,
+          currentCache: c.cache
+        });
+        continue;
+      }
+      if (!c) {
+        diffs.push({
+          kind: "disappeared",
+          viewIndex: idx,
+          className: b.className,
+          elementID: b.elementID,
+          baselineFrame: b.frame,
+          currentFrame: null,
+          baselineCache: b.cache,
+          currentCache: null
+        });
+        continue;
+      }
+      const frameChanged = _UILayoutDebugger._framesEqual(b.frame, c.frame) === false;
+      const cacheChanged = _UILayoutDebugger._cachesEqual(b.cache, c.cache) === false;
+      const kind = frameChanged && cacheChanged ? "both" : frameChanged ? "frame" : cacheChanged ? "cache" : "unchanged";
+      diffs.push({
+        kind,
+        viewIndex: idx,
+        className: c.className,
+        elementID: c.elementID,
+        baselineFrame: b.frame,
+        currentFrame: c.frame,
+        baselineCache: b.cache,
+        currentCache: c.cache
+      });
+    }
+    const order = {
+      appeared: 0,
+      disappeared: 1,
+      both: 2,
+      frame: 3,
+      cache: 4,
+      unchanged: 5
+    };
+    diffs.sort((a, b) => order[a.kind] - order[b.kind]);
+    return diffs;
+  }
+  static _framesEqual(a, b) {
+    if (!a && !b) {
+      return true;
+    }
+    if (!a || !b) {
+      return false;
+    }
+    if (_UILayoutDebugger._boundsBasedDiff) {
+      return a.width === b.width && a.height === b.height;
+    }
+    return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
+  }
+  static _cachesEqual(a, b) {
+    if (!a && !b) {
+      return true;
+    }
+    if (!a || !b) {
+      return false;
+    }
+    if (a.entryCount !== b.entryCount) {
+      return false;
+    }
+    for (const key of Object.keys(a.entries)) {
+      const ae = a.entries[key];
+      const be = b.entries[key];
+      if (!be || ae.width !== be.width || ae.height !== be.height) {
+        return false;
+      }
+    }
+    if (a.hasFrameCache !== b.hasFrameCache) {
+      return false;
+    }
+    if (a.hasFrameCache && b.hasFrameCache) {
+      const af = a.frameCache, bf = b.frameCache;
+      if (!af || !bf || af.top !== bf.top || af.left !== bf.left || af.width !== bf.width || af.height !== bf.height) {
+        return false;
+      }
+    }
+    if (a.hasVirtualFrameCache !== b.hasVirtualFrameCache) {
+      return false;
+    }
+    if (a.hasVirtualFrameCache && b.hasVirtualFrameCache) {
+      const av = a.virtualFrameCache, bv = b.virtualFrameCache;
+      if (!av || !bv || av.top !== bv.top || av.left !== bv.left || av.width !== bv.width || av.height !== bv.height) {
+        return false;
+      }
+    }
+    return true;
+  }
+  static willSetSubviewFrames(_view) {
+  }
+  static didSetSubviewFrames(view) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!_UILayoutDebugger._isEnabled) {
+      return;
+    }
+    const step = _UILayoutDebugger._pendingStep;
+    if (!step) {
+      return;
+    }
+    const subviews = (_a = view == null ? void 0 : view.subviews) != null ? _a : [];
+    for (let i = 0; i < subviews.length; i++) {
+      const sv = subviews[i];
+      const idx = (_b = sv == null ? void 0 : sv._UIViewIndex) != null ? _b : -i;
+      const record = {
+        viewIndex: idx,
+        className: (_d = (_c = sv == null ? void 0 : sv.constructor) == null ? void 0 : _c.name) != null ? _d : "UnknownView",
+        elementID: (_e = sv == null ? void 0 : sv.elementID) != null ? _e : String(idx),
+        frameBefore: (_f = _UILayoutDebugger._pendingSubviewsBefore.get(idx)) != null ? _f : null,
+        frameAfter: _UILayoutDebugger._captureFrame(sv)
+      };
+      step.subviewRecords.push(record);
+    }
+  }
+  static _shouldHitBreakpoint(_view) {
+    return _UILayoutDebugger._isEnabled && _UILayoutDebugger._breakpointsEnabled;
+  }
+  static _cleanStack(rawStack) {
+    const lines = rawStack.split("\n");
+    let firstAppFrameIndex = 1;
+    for (let i = 1; i < lines.length; i++) {
+      const trimmed = lines[i].trim();
+      const atMatch = trimmed.match(/^at\s+([\w.<>$\s]+?)\s*(?:\(|$)/);
+      const frameName = atMatch ? atMatch[1].trim() : trimmed;
+      const methodName = frameName.includes(".") ? frameName.slice(frameName.lastIndexOf(".") + 1) : frameName;
+      const isNoise = _UILayoutDebugger._noiseFramePrefixes.some((prefix) => {
+        return frameName === prefix || methodName === prefix || frameName.endsWith("." + prefix);
+      });
+      if (!isNoise) {
+        firstAppFrameIndex = i;
+        break;
+      }
+    }
+    return lines.slice(firstAppFrameIndex).join("\n");
+  }
+  static _extractCallerFunctionName(cleanStack) {
+    var _a, _b;
+    const firstLine = (_b = (_a = cleanStack.split("\n")[0]) == null ? void 0 : _a.trim()) != null ? _b : "";
+    const atMatch = firstLine.match(/^at\s+([\w.<>$\s]+?)\s*(?:\(|$)/);
+    if (atMatch) {
+      return atMatch[1].trim();
+    }
+    return firstLine.substring(0, 80) || "(unknown)";
+  }
+  static _captureFrame(view) {
+    var _a, _b, _c, _d, _e, _f;
+    const f = view == null ? void 0 : view._frame;
+    if (!f) {
+      return null;
+    }
+    return {
+      top: (_b = (_a = f.top) != null ? _a : f.y) != null ? _b : 0,
+      left: (_d = (_c = f.left) != null ? _c : f.x) != null ? _d : 0,
+      width: (_e = f.width) != null ? _e : 0,
+      height: (_f = f.height) != null ? _f : 0
+    };
+  }
+  static _captureCache(view) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    if (!view) {
+      return null;
+    }
+    const sharedKey = view.sharedIntrinsicSizeCacheIdentifier;
+    const isShared = !!sharedKey;
+    let rawEntries;
+    if (isShared) {
+      rawEntries = (_f = (_e = (_d = (_a = view.constructor) == null ? void 0 : _a._sharedIntrinsicSizeCaches) != null ? _d : (_c = (_b = view.__proto__) == null ? void 0 : _b.constructor) == null ? void 0 : _c._sharedIntrinsicSizeCaches) == null ? void 0 : _e.get(sharedKey)) != null ? _f : {};
+    } else {
+      rawEntries = (_g = view._intrinsicSizesCache) != null ? _g : {};
+    }
+    const entries = {};
+    for (const key of Object.keys(rawEntries)) {
+      const r = rawEntries[key];
+      entries[key] = { width: (_h = r == null ? void 0 : r.width) != null ? _h : 0, height: (_i = r == null ? void 0 : r.height) != null ? _i : 0 };
+    }
+    const rawFrameCache = view._frameCache;
+    const rawVirtualFrameCache = view._frameCacheForVirtualLayouting;
+    const frameCache = rawFrameCache ? { top: (_k = (_j = rawFrameCache.top) != null ? _j : rawFrameCache.y) != null ? _k : 0, left: (_m = (_l = rawFrameCache.left) != null ? _l : rawFrameCache.x) != null ? _m : 0, width: (_n = rawFrameCache.width) != null ? _n : 0, height: (_o = rawFrameCache.height) != null ? _o : 0 } : null;
+    const virtualFrameCache = rawVirtualFrameCache ? { top: (_q = (_p = rawVirtualFrameCache.top) != null ? _p : rawVirtualFrameCache.y) != null ? _q : 0, left: (_s = (_r = rawVirtualFrameCache.left) != null ? _r : rawVirtualFrameCache.x) != null ? _s : 0, width: (_t = rawVirtualFrameCache.width) != null ? _t : 0, height: (_u = rawVirtualFrameCache.height) != null ? _u : 0 } : null;
+    return {
+      entryCount: Object.keys(entries).length,
+      entries,
+      isShared,
+      sharedKey,
+      hasFrameCache: rawFrameCache !== void 0,
+      frameCache,
+      hasVirtualFrameCache: rawVirtualFrameCache !== void 0,
+      virtualFrameCache
+    };
+  }
+  static _buildTreeSnapshot(view, depth, visited = /* @__PURE__ */ new Set()) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const idx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+    const node = {
+      viewIndex: idx,
+      className: (_c = (_b = view == null ? void 0 : view.constructor) == null ? void 0 : _b.name) != null ? _c : "UnknownView",
+      elementID: (_d = view == null ? void 0 : view.elementID) != null ? _d : String(idx),
+      depth,
+      frame: _UILayoutDebugger._captureFrame(view),
+      layoutCount: (_e = _UILayoutDebugger._layoutCountsThisPass.get(idx)) != null ? _e : 0,
+      cacheAfterPass: _UILayoutDebugger._captureCache(view),
+      children: []
+    };
+    const subviews = (_f = view == null ? void 0 : view.subviews) != null ? _f : [];
+    for (let i = 0; i < subviews.length; i++) {
+      const sv = subviews[i];
+      const svIdx = (_g = sv == null ? void 0 : sv._UIViewIndex) != null ? _g : -1;
+      if (svIdx < 0 || visited.has(svIdx)) {
+        continue;
+      }
+      visited.add(svIdx);
+      node.children.push(_UILayoutDebugger._buildTreeSnapshot(sv, depth + 1, visited));
+    }
+    return node;
+  }
+  static _findCausingTrace(viewIndex, baselineTakenAt) {
+    for (let ti = _UILayoutDebugger._traces.length - 1; ti >= 0; ti--) {
+      const trace = _UILayoutDebugger._traces[ti];
+      const si = trace.steps.findIndex((s) => s.viewIndex === viewIndex);
+      if (si >= 0) {
+        return { traceIndex: ti, stepIndex: si, passIndex: trace.passIndex };
+      }
+    }
+    return null;
+  }
+  static _ensureOverlay() {
+    if (_UILayoutDebugger._overlayRoot) {
+      return;
+    }
+    const root = document.createElement("div");
+    root.id = "__UILayoutDebugger_overlay";
+    root.style.cssText = [
+      "position: fixed",
+      "top: 8px",
+      "right: 8px",
+      "max-height: calc(100vh - 16px)",
+      "background: rgba(15, 15, 20, 0.96)",
+      "color: #e8e8e8",
+      "font: 11px/1.4 'SF Mono', 'Menlo', 'Consolas', monospace",
+      "border-radius: 8px",
+      "border: 1px solid rgba(255,255,255,0.12)",
+      "box-shadow: 0 8px 32px rgba(0,0,0,0.6)",
+      "z-index: 2147483647",
+      "display: flex",
+      "flex-direction: column",
+      "overflow: hidden",
+      "user-select: none"
+    ].join("; ");
+    document.body.appendChild(root);
+    _UILayoutDebugger._overlayRoot = root;
+    _UILayoutDebugger._makeDraggable(root);
+  }
+  static _removeOverlay() {
+    var _a;
+    (_a = _UILayoutDebugger._overlayRoot) == null ? void 0 : _a.remove();
+    _UILayoutDebugger._overlayRoot = null;
+  }
+  static _renderOverlay() {
+    const root = _UILayoutDebugger._overlayRoot;
+    if (!root) {
+      return;
+    }
+    const cmp = _UILayoutDebugger._compareMode;
+    const diff = _UILayoutDebugger._diffMode && !!_UILayoutDebugger._baseline && !!_UILayoutDebugger._diffSnapshot;
+    const live = _UILayoutDebugger._liveInspectorMode && !!_UILayoutDebugger._lastKnownRootView;
+    const stale = _UILayoutDebugger._staleReportMode && !!_UILayoutDebugger._staleReportResult;
+    const passWidth = cmp ? 1140 : 570;
+    const extraWidth = (diff ? 320 : 0) + (live ? 320 : 0) + (stale ? 360 : 0);
+    root.style.width = passWidth + extraWidth + "px";
+    root.innerHTML = "";
+    const headerRow1 = _UILayoutDebugger._el("div", [
+      "padding: 8px 10px 5px",
+      "background: rgba(255,255,255,0.05)",
+      "display: flex",
+      "align-items: center",
+      "gap: 6px",
+      "cursor: move",
+      "flex-shrink: 0"
+    ]);
+    headerRow1.dataset.dragHandle = "1";
+    const title = _UILayoutDebugger._el("span", ["flex: 1", "font-weight: bold", "font-size: 11px", "color: #c8d8ff"]);
+    title.textContent = "\u2699 UILayoutDebugger";
+    const helpBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      _UILayoutDebugger._helpMode ? "#ffcc88" : "#9090a8"
+    ));
+    helpBtn.textContent = "\u24D8";
+    helpBtn.title = "Show help";
+    helpBtn.onclick = () => {
+      _UILayoutDebugger._helpMode = !_UILayoutDebugger._helpMode;
+      _UILayoutDebugger._renderOverlay();
+    };
+    const bpBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      _UILayoutDebugger._breakpointsEnabled ? "#ffaa33" : "#9090a8"
+    ));
+    bpBtn.textContent = _UILayoutDebugger._breakpointsEnabled ? "\u23F8 BP ON" : "\u23F8 BP OFF";
+    bpBtn.title = "Toggle breakpoint step-through";
+    bpBtn.onclick = () => {
+      _UILayoutDebugger._breakpointsEnabled ? _UILayoutDebugger.disableBreakpoints() : _UILayoutDebugger.enableBreakpoints();
+      _UILayoutDebugger._renderOverlay();
+    };
+    const cmpBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(cmp ? "#7bc8ff" : "#9090a8"));
+    cmpBtn.textContent = cmp ? "\u29C9 Compare ON" : "\u29C9 Compare";
+    cmpBtn.title = "Toggle side-by-side pass comparison";
+    cmpBtn.onclick = () => {
+      _UILayoutDebugger._compareMode = !_UILayoutDebugger._compareMode;
+      if (_UILayoutDebugger._compareMode) {
+        _UILayoutDebugger._compareTraceIndex = Math.min(1, _UILayoutDebugger._traces.length - 1);
+        _UILayoutDebugger._compareStepIndex = -1;
+        _UILayoutDebugger._sharedExpandState = /* @__PURE__ */ new Map();
+      }
+      _UILayoutDebugger._renderOverlay();
+    };
+    const filterLabels = {
+      all: "\u2298 All",
+      changed: "\u2298 Changed",
+      unchanged: "\u2298 Unchanged"
+    };
+    const filterColors = {
+      all: "#9090a8",
+      changed: "#7bc8ff",
+      unchanged: "#ffcc88"
+    };
+    const filterCycle = {
+      all: "changed",
+      changed: "unchanged",
+      unchanged: "all"
+    };
+    const filterBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      filterColors[_UILayoutDebugger._frameFilter]
+    ));
+    filterBtn.textContent = filterLabels[_UILayoutDebugger._frameFilter];
+    filterBtn.title = "Cycle: show all steps \u2192 only changed frames \u2192 only unchanged frames";
+    filterBtn.onclick = () => {
+      _UILayoutDebugger._frameFilter = filterCycle[_UILayoutDebugger._frameFilter];
+      _UILayoutDebugger._replayStepIndex = -1;
+      _UILayoutDebugger._compareStepIndex = -1;
+      _UILayoutDebugger._renderOverlay();
+    };
+    const clearBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#9090a8"));
+    clearBtn.textContent = "\u232B Clear";
+    clearBtn.title = "Clear all recorded traces and restart recording";
+    clearBtn.onclick = () => _UILayoutDebugger.clearTraces();
+    const toggleBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#9090a8"));
+    toggleBtn.textContent = _UILayoutDebugger._overlayVisible ? "\u25BE" : "\u25B8";
+    toggleBtn.title = "Collapse / expand";
+    toggleBtn.onclick = () => {
+      _UILayoutDebugger._overlayVisible = !_UILayoutDebugger._overlayVisible;
+      _UILayoutDebugger._renderOverlay();
+    };
+    const closeBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#dd5555"));
+    closeBtn.textContent = "\u2715";
+    closeBtn.title = "Disable UILayoutDebugger";
+    closeBtn.onclick = () => _UILayoutDebugger.disable();
+    headerRow1.append(title, helpBtn, bpBtn, cmpBtn, filterBtn, clearBtn, toggleBtn, closeBtn);
+    const headerRow2 = _UILayoutDebugger._el("div", [
+      "padding: 4px 10px 6px",
+      "background: rgba(255,255,255,0.05)",
+      "border-bottom: 1px solid rgba(255,255,255,0.10)",
+      "display: flex",
+      "align-items: center",
+      "gap: 6px",
+      "flex-shrink: 0",
+      "flex-wrap: wrap"
+    ]);
+    headerRow2.dataset.dragHandle = "1";
+    const hasBaseline = !!_UILayoutDebugger._baseline;
+    const baselineBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      _UILayoutDebugger._diffMode ? "#88ddff" : hasBaseline ? "#ffcc88" : "#9090a8"
+    ));
+    baselineBtn.textContent = _UILayoutDebugger._diffMode ? "\u2295 Diff ON" : hasBaseline ? "\u{1F4CD} Baseline set" : "\u{1F4CD} Baseline";
+    baselineBtn.title = hasBaseline ? "Baseline captured \u2014 click to recapture, or use \u2295 to diff against it" : "Capture current view tree state as baseline";
+    baselineBtn.onclick = () => {
+      if (_UILayoutDebugger._diffMode) {
+        _UILayoutDebugger.clearDiff();
+      } else {
+        _UILayoutDebugger.captureBaseline();
+      }
+    };
+    const diffBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      hasBaseline ? "#88ff99" : "#9090a8"
+    ));
+    diffBtn.textContent = "\u2295 Diff";
+    diffBtn.title = "Capture current state and diff against baseline";
+    diffBtn.disabled = !hasBaseline;
+    diffBtn.onclick = () => _UILayoutDebugger.captureAndDiff();
+    const liveBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      live ? "#88ff99" : "#9090a8"
+    ));
+    liveBtn.textContent = live ? "\u{1F441} Live ON" : "\u{1F441} Live";
+    liveBtn.title = "Show live view tree with current frames and cache state";
+    liveBtn.onclick = () => _UILayoutDebugger.toggleLiveInspector();
+    const hasStaleResult = !!_UILayoutDebugger._staleReportResult;
+    const staleBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      stale ? "#ffaa55" : hasStaleResult ? "#a06030" : "#9090a8"
+    ));
+    staleBtn.textContent = stale ? "\u2622 Stale ON" : "\u2622 Stale";
+    staleBtn.title = hasStaleResult ? "Stale layout report available \u2014 click to toggle the panel, or re-run to refresh" : "Run a forced full-tree remeasure and show which views had stale/missing invalidations";
+    staleBtn.onclick = () => {
+      if (stale) {
+        _UILayoutDebugger._staleReportMode = false;
+        _UILayoutDebugger._renderOverlay();
+      } else if (hasStaleResult) {
+        _UILayoutDebugger._staleReportMode = true;
+        _UILayoutDebugger._renderOverlay();
+      } else {
+        _UILayoutDebugger.captureStaleLayoutReport();
+      }
+    };
+    staleBtn.oncontextmenu = (e) => {
+      e.preventDefault();
+      _UILayoutDebugger.captureStaleLayoutReport();
+    };
+    const boundsToggleBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle(
+      _UILayoutDebugger._boundsBasedDiff ? "#c8d8ff" : "#9090a8"
+    ));
+    boundsToggleBtn.textContent = _UILayoutDebugger._boundsBasedDiff ? "\u2B1A Bounds" : "\u2B1A Frame";
+    boundsToggleBtn.title = _UILayoutDebugger._boundsBasedDiff ? "Diffing by bounds (size only \u2014 origin ignored). Click to switch to frame diffing (position + size)." : "Diffing by frame (position + size). Click to switch to bounds diffing (size only \u2014 position changes are ignored).";
+    boundsToggleBtn.onclick = () => {
+      _UILayoutDebugger._boundsBasedDiff = !_UILayoutDebugger._boundsBasedDiff;
+      _UILayoutDebugger._renderOverlay();
+    };
+    headerRow2.append(baselineBtn, diffBtn, liveBtn, staleBtn, boundsToggleBtn);
+    const header = _UILayoutDebugger._el("div", ["flex-shrink: 0"]);
+    header.append(headerRow1, headerRow2);
+    root.appendChild(header);
+    if (!_UILayoutDebugger._overlayVisible) {
+      return;
+    }
+    if (_UILayoutDebugger._helpMode) {
+      root.appendChild(_UILayoutDebugger._renderHelpPanel());
+      return;
+    }
+    if (_UILayoutDebugger._baseline && !diff) {
+      const msg = _UILayoutDebugger._el("div", [
+        "padding: 8px 12px",
+        "color: #ffcc88",
+        "font-size: 10px",
+        "border-bottom: 1px solid rgba(255,255,255,0.08)",
+        "flex-shrink: 0"
+      ]);
+      const ts = new Date(_UILayoutDebugger._baseline.takenAt);
+      msg.textContent = `\u{1F4CD} Baseline set at ${ts.toLocaleTimeString()} \u2014 ${_UILayoutDebugger._baseline.views.size} views. Hit \u2295 Diff to compare.`;
+      root.appendChild(msg);
+    }
+    if (_UILayoutDebugger._traces.length === 0 && !diff) {
+      const msg = _UILayoutDebugger._el("div", ["padding: 10px 12px", "color: #9090a8", "font-size: 10px"]);
+      msg.textContent = "No layout pass recorded yet. Trigger a layout to begin.";
+      root.appendChild(msg);
+      return;
+    }
+    const body = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "flex: 1",
+      "overflow: hidden",
+      "min-height: 0"
+    ]);
+    root.appendChild(body);
+    if (_UILayoutDebugger._traces.length > 0) {
+      const passSection = _UILayoutDebugger._el("div", [
+        "display: flex",
+        "flex: 1",
+        "overflow: hidden",
+        "min-height: 0"
+      ]);
+      if (cmp) {
+        let leftTreeEl = null;
+        let rightTreeEl = null;
+        const leftCol = _UILayoutDebugger._renderPassColumn(
+          _UILayoutDebugger._replayTraceIndex,
+          _UILayoutDebugger._replayStepIndex,
+          (si) => {
+            _UILayoutDebugger._replayStepIndex = si;
+            _UILayoutDebugger._renderOverlay();
+          },
+          (ti) => {
+            _UILayoutDebugger._replayTraceIndex = ti;
+            _UILayoutDebugger._replayStepIndex = -1;
+            _UILayoutDebugger._renderOverlay();
+          },
+          _UILayoutDebugger._sharedExpandState,
+          (el) => {
+            leftTreeEl = el;
+          },
+          () => rightTreeEl
+        );
+        const colDivider = _UILayoutDebugger._el("div", [
+          "width: 1px",
+          "background: rgba(255,255,255,0.10)",
+          "flex-shrink: 0"
+        ]);
+        const rightCol = _UILayoutDebugger._renderPassColumn(
+          _UILayoutDebugger._compareTraceIndex,
+          _UILayoutDebugger._compareStepIndex,
+          (si) => {
+            _UILayoutDebugger._compareStepIndex = si;
+            _UILayoutDebugger._renderOverlay();
+          },
+          (ti) => {
+            _UILayoutDebugger._compareTraceIndex = ti;
+            _UILayoutDebugger._compareStepIndex = -1;
+            _UILayoutDebugger._renderOverlay();
+          },
+          _UILayoutDebugger._sharedExpandState,
+          (el) => {
+            rightTreeEl = el;
+          },
+          () => leftTreeEl
+        );
+        passSection.append(leftCol, colDivider, rightCol);
+      } else {
+        const col = _UILayoutDebugger._renderPassColumn(
+          _UILayoutDebugger._replayTraceIndex,
+          _UILayoutDebugger._replayStepIndex,
+          (si) => {
+            _UILayoutDebugger._replayStepIndex = si;
+            _UILayoutDebugger._renderOverlay();
+          },
+          (ti) => {
+            _UILayoutDebugger._replayTraceIndex = ti;
+            _UILayoutDebugger._replayStepIndex = -1;
+            _UILayoutDebugger._renderOverlay();
+          },
+          _UILayoutDebugger._singleExpandState,
+          () => {
+          },
+          () => null
+        );
+        col.style.flex = "1";
+        passSection.appendChild(col);
+      }
+      body.appendChild(passSection);
+    }
+    if (diff) {
+      const divider = _UILayoutDebugger._el("div", [
+        "width: 1px",
+        "background: rgba(255,255,255,0.10)",
+        "flex-shrink: 0"
+      ]);
+      const diffPanel = _UILayoutDebugger._renderDiffPanel(
+        _UILayoutDebugger._baseline,
+        _UILayoutDebugger._diffSnapshot,
+        (viewIndex) => {
+          for (let ti = 0; ti < _UILayoutDebugger._traces.length; ti++) {
+            const trace = _UILayoutDebugger._traces[ti];
+            const si = trace.steps.findIndex((s) => s.viewIndex === viewIndex);
+            if (si >= 0) {
+              _UILayoutDebugger._replayTraceIndex = ti;
+              _UILayoutDebugger._replayStepIndex = si;
+              _UILayoutDebugger._renderOverlay();
+              return;
+            }
+          }
+        },
+        _UILayoutDebugger._baseline.takenAt
+      );
+      diffPanel.style.width = "320px";
+      diffPanel.style.flexShrink = "0";
+      body.append(divider, diffPanel);
+    }
+    if (live) {
+      const divider = _UILayoutDebugger._el("div", [
+        "width: 1px",
+        "background: rgba(255,255,255,0.10)",
+        "flex-shrink: 0"
+      ]);
+      const livePanel = _UILayoutDebugger._renderLiveInspectorPanel();
+      livePanel.style.width = "320px";
+      livePanel.style.flexShrink = "0";
+      body.append(divider, livePanel);
+    }
+    if (stale) {
+      const divider = _UILayoutDebugger._el("div", [
+        "width: 1px",
+        "background: rgba(255,255,255,0.10)",
+        "flex-shrink: 0"
+      ]);
+      const stalePanel = _UILayoutDebugger._renderStaleReportPanel(_UILayoutDebugger._staleReportResult);
+      stalePanel.style.width = "360px";
+      stalePanel.style.flexShrink = "0";
+      body.append(divider, stalePanel);
+    }
+  }
+  static _renderPassColumn(traceIndex, stepIndex, onStepChange, onTraceChange, expandState, registerTree, getPeerTree) {
+    var _a, _b, _c, _d;
+    const col = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "flex-direction: column",
+      "flex: 1",
+      "min-width: 0",
+      "overflow: hidden"
+    ]);
+    const trace = (_a = _UILayoutDebugger._traces[traceIndex]) != null ? _a : null;
+    const pickerRow = _UILayoutDebugger._el("div", [
+      "padding: 5px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "display: flex",
+      "align-items: center",
+      "gap: 6px",
+      "flex-shrink: 0",
+      "font-size: 10px"
+    ]);
+    const pickerLabel = _UILayoutDebugger._el("span", ["color: #a0a0b8", "flex-shrink: 0"]);
+    pickerLabel.textContent = "Pass:";
+    const sel = document.createElement("select");
+    sel.style.cssText = [
+      "flex: 1",
+      "background: #1e1e2e",
+      "color: #d8d8f0",
+      "border: 1px solid #444",
+      "border-radius: 3px",
+      "font: inherit",
+      "padding: 1px 4px"
+    ].join("; ");
+    for (let i = 0; i < _UILayoutDebugger._traces.length; i++) {
+      const t = _UILayoutDebugger._traces[i];
+      const opt = document.createElement("option");
+      opt.value = String(i);
+      opt.textContent = `#${t.passIndex}  (${t.steps.length} steps, ${t.totalIterations} iter)`;
+      if (i === traceIndex) {
+        opt.selected = true;
+      }
+      sel.appendChild(opt);
+    }
+    sel.onchange = () => onTraceChange(parseInt(sel.value, 10));
+    pickerRow.append(pickerLabel, sel);
+    col.appendChild(pickerRow);
+    if (!trace) {
+      return col;
+    }
+    const frameFilter = _UILayoutDebugger._frameFilter;
+    const visibleSteps = frameFilter === "all" ? trace.steps : trace.steps.filter((s) => {
+      const f = s.frameBefore;
+      const g = s.frameAfter;
+      const changed = !f || !g || f.left !== g.left || f.top !== g.top || f.width !== g.width || f.height !== g.height;
+      return frameFilter === "changed" ? changed : !changed;
+    });
+    const clampedStep = Math.max(-1, Math.min(stepIndex, visibleSteps.length - 1));
+    const activeStep = (_b = visibleSteps[clampedStep]) != null ? _b : null;
+    const activeViewIndex = (_c = activeStep == null ? void 0 : activeStep.viewIndex) != null ? _c : -1;
+    const countMap = /* @__PURE__ */ new Map();
+    const stepMap = /* @__PURE__ */ new Map();
+    for (const step of trace.steps) {
+      countMap.set(step.viewIndex, ((_d = countMap.get(step.viewIndex)) != null ? _d : 0) + 1);
+      stepMap.set(step.viewIndex, step);
+    }
+    const stepBar = _UILayoutDebugger._el("div", [
+      "padding: 5px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "display: flex",
+      "align-items: center",
+      "gap: 6px",
+      "flex-shrink: 0"
+    ]);
+    const backBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#59599b"));
+    backBtn.textContent = "\u25C0";
+    backBtn.title = "Step back";
+    backBtn.disabled = clampedStep <= -1;
+    backBtn.onclick = () => onStepChange(Math.max(clampedStep - 1, -1));
+    const fwdBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#59599b"));
+    fwdBtn.textContent = "\u25B6";
+    fwdBtn.title = "Step forward";
+    fwdBtn.disabled = clampedStep >= visibleSteps.length - 1;
+    fwdBtn.onclick = () => onStepChange(Math.min(clampedStep + 1, visibleSteps.length - 1));
+    const slider = document.createElement("input");
+    slider.type = "range";
+    slider.min = "-1";
+    slider.max = String(visibleSteps.length - 1);
+    slider.value = String(clampedStep);
+    slider.style.cssText = "flex: 1; cursor: pointer; accent-color: #59599b;";
+    slider.oninput = () => onStepChange(parseInt(slider.value, 10));
+    const stepLabel = _UILayoutDebugger._el("span", ["color: #b0b0c8", "font-size: 10px", "white-space: nowrap"]);
+    const totalLabel = frameFilter === "all" ? String(visibleSteps.length) : `${visibleSteps.length}/${trace.steps.length}`;
+    stepLabel.textContent = clampedStep < 0 ? `\u2014 / ${totalLabel}` : `${clampedStep + 1} / ${totalLabel}`;
+    stepBar.append(backBtn, slider, fwdBtn, stepLabel);
+    col.appendChild(stepBar);
+    if (activeStep) {
+      col.appendChild(_UILayoutDebugger._renderStepDetail(activeStep));
+    }
+    const treeContainer = _UILayoutDebugger._el("div", [
+      "overflow-y: scroll",
+      "flex: 1",
+      "padding: 4px 0",
+      "min-height: 0",
+      "position: relative"
+    ]);
+    registerTree(treeContainer);
+    treeContainer.addEventListener("scroll", () => {
+      const peer = getPeerTree();
+      if (peer && peer.scrollTop !== treeContainer.scrollTop) {
+        peer.scrollTop = treeContainer.scrollTop;
+      }
+    });
+    if (trace.roots.length > 0) {
+      let activeRow = null;
+      for (const treeRoot of trace.roots) {
+        const result = _UILayoutDebugger._renderTreeNode(
+          treeRoot,
+          treeContainer,
+          countMap,
+          activeViewIndex,
+          expandState,
+          stepMap
+        );
+        if (result) {
+          activeRow = result;
+        }
+      }
+      if (activeRow) {
+        const rowRef = activeRow;
+        const containerRef = treeContainer;
+        setTimeout(() => {
+          const rowTop = rowRef.offsetTop;
+          const rowBottom = rowTop + rowRef.offsetHeight;
+          const visTop = containerRef.scrollTop;
+          const visBottom = visTop + containerRef.clientHeight;
+          if (rowTop < visTop || rowBottom > visBottom) {
+            containerRef.scrollTop = rowTop - containerRef.clientHeight / 2;
+          }
+        }, 0);
+      }
+    } else {
+      const msg = _UILayoutDebugger._el("div", ["padding: 8px 10px", "color: #6a6a80"]);
+      msg.textContent = "No steps recorded in this pass.";
+      treeContainer.appendChild(msg);
+    }
+    col.appendChild(treeContainer);
+    if (trace.cacheChanges.length > 0) {
+      let cacheListExpanded = false;
+      const cacheHeader = _UILayoutDebugger._el("div", [
+        "padding: 5px 10px",
+        "border-top: 1px solid rgba(255,255,255,0.08)",
+        "display: flex",
+        "align-items: center",
+        "gap: 5px",
+        "flex-shrink: 0",
+        "cursor: pointer",
+        "font-size: 10px"
+      ]);
+      const cacheChevron = _UILayoutDebugger._el("span", ["color: #7070a0", "font-size: 8px", "width: 10px"]);
+      cacheChevron.textContent = "\u25B8";
+      const cacheTitle = _UILayoutDebugger._el("span", ["color: #a0a0b8"]);
+      cacheTitle.textContent = `Cache writes (${trace.cacheChanges.length})`;
+      cacheHeader.append(cacheChevron, cacheTitle);
+      col.appendChild(cacheHeader);
+      const cacheList = _UILayoutDebugger._el("div", [
+        "display: none",
+        "overflow-y: auto",
+        "max-height: 180px",
+        "flex-shrink: 0",
+        "font-size: 10px",
+        "padding: 2px 0"
+      ]);
+      for (const ev of trace.cacheChanges) {
+        const evRow = _UILayoutDebugger._el("div", [
+          "padding: 2px 10px 2px 14px",
+          "display: flex",
+          "flex-direction: column",
+          "gap: 1px",
+          "border-bottom: 1px solid rgba(255,255,255,0.04)"
+        ]);
+        const topLine = _UILayoutDebugger._el("div", ["display: flex", "gap: 5px", "align-items: baseline"]);
+        const evIdx = _UILayoutDebugger._el("span", ["color: #5a5a70", "flex-shrink: 0"]);
+        evIdx.textContent = `#${ev.eventIndex}`;
+        const evClass = _UILayoutDebugger._el("span", ["color: #ffcc88", "font-weight: bold"]);
+        evClass.textContent = ev.className;
+        const evEid = _UILayoutDebugger._el("span", ["color: #6a6a80"]);
+        evEid.textContent = `#${ev.elementID}`;
+        const evKey = _UILayoutDebugger._el("span", ["color: #9090a8"]);
+        const match = ev.cacheKey.match(/h_(\d+(?:\.\d+)?)__w_(\d+(?:\.\d+)?)/);
+        evKey.textContent = match ? match[1] !== "0" && match[2] !== "0" ? `h\u2264${match[1]} w\u2264${match[2]}` : match[2] !== "0" ? `w\u2264${match[2]}` : `h\u2264${match[1]}` : ev.cacheKey;
+        const evVal = _UILayoutDebugger._el("span", ["color: #88ddff", "margin-left: auto"]);
+        evVal.textContent = `${ev.newValue.width.toFixed(0)}\xD7${ev.newValue.height.toFixed(0)}`;
+        topLine.append(evIdx, evClass, evEid, evKey, evVal);
+        const callerLine = _UILayoutDebugger._el("div", [
+          "display: flex",
+          "gap: 5px",
+          "align-items: baseline"
+        ]);
+        const stepRef = _UILayoutDebugger._el("span", ["color: #5a5a70", "flex-shrink: 0"]);
+        stepRef.textContent = ev.stepIndex >= 0 ? `step ${ev.stepIndex}` : "between steps";
+        const callerFn = _UILayoutDebugger._el("span", ["color: #7878a0", "cursor: pointer"]);
+        callerFn.textContent = ev.callerFunction + "()";
+        callerFn.title = ev.cleanStack;
+        let stackExpanded = false;
+        const stackEl = _UILayoutDebugger._el("div", [
+          "display: none",
+          "margin-top: 2px",
+          "padding: 3px 6px",
+          "background: rgba(255,255,255,0.04)",
+          "border-radius: 3px",
+          "color: #6060808",
+          "font-size: 9px",
+          "white-space: pre",
+          "overflow-x: auto"
+        ]);
+        stackEl.textContent = ev.cleanStack;
+        callerFn.onclick = () => {
+          stackExpanded = !stackExpanded;
+          stackEl.style.display = stackExpanded ? "block" : "none";
+        };
+        callerLine.append(stepRef, callerFn);
+        evRow.append(topLine, callerLine, stackEl);
+        cacheList.appendChild(evRow);
+      }
+      cacheHeader.onclick = () => {
+        cacheListExpanded = !cacheListExpanded;
+        cacheList.style.display = cacheListExpanded ? "block" : "none";
+        cacheChevron.textContent = cacheListExpanded ? "\u25BE" : "\u25B8";
+      };
+      col.appendChild(cacheList);
+    }
+    return col;
+  }
+  static _renderStaleReportPanel(result) {
+    const panel = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "flex-direction: column",
+      "flex: 1",
+      "min-height: 0",
+      "overflow: hidden"
+    ]);
+    const bar = _UILayoutDebugger._el("div", [
+      "padding: 5px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "display: flex",
+      "align-items: center",
+      "gap: 6px",
+      "flex-shrink: 0",
+      "font-size: 10px"
+    ]);
+    const barTitle = _UILayoutDebugger._el("span", ["color: #ffaa55", "flex: 1", "font-weight: bold"]);
+    barTitle.textContent = "\u2622 Stale Layout Report";
+    const rerunBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#ffaa55"));
+    rerunBtn.textContent = "\u21BA Re-run";
+    rerunBtn.title = "Re-run performForcedSubtreeLayout and refresh the report";
+    rerunBtn.onclick = () => _UILayoutDebugger.captureStaleLayoutReport();
+    const closeBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#9090a8"));
+    closeBtn.textContent = "\u2715";
+    closeBtn.title = "Close stale report panel";
+    closeBtn.onclick = () => {
+      _UILayoutDebugger._staleReportMode = false;
+      _UILayoutDebugger._renderOverlay();
+    };
+    bar.append(barTitle, rerunBtn, closeBtn);
+    panel.appendChild(bar);
+    const { diffs, forcedPassCacheChanges, passIndex } = result;
+    const counts = { frame: 0, cache: 0, both: 0, appeared: 0, disappeared: 0 };
+    for (const d of diffs) {
+      if (d.kind === "frame") {
+        counts.frame++;
+      } else if (d.kind === "cache") {
+        counts.cache++;
+      } else if (d.kind === "both") {
+        counts.both++;
+      } else if (d.kind === "appeared") {
+        counts.appeared++;
+      } else if (d.kind === "disappeared") {
+        counts.disappeared++;
+      }
+    }
+    const totalCorrected = diffs.length;
+    const summaryBar = _UILayoutDebugger._el("div", [
+      "padding: 5px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "display: flex",
+      "gap: 8px",
+      "align-items: center",
+      "flex-shrink: 0",
+      "font-size: 10px",
+      "flex-wrap: wrap"
+    ]);
+    if (totalCorrected === 0) {
+      const clean = _UILayoutDebugger._el("span", ["color: #88ff99", "font-weight: bold"]);
+      clean.textContent = "\u2713 No stale state detected \u2014 all views were already correct.";
+      summaryBar.appendChild(clean);
+    } else {
+      const total = _UILayoutDebugger._el("span", ["color: #ffaa55", "font-weight: bold"]);
+      total.textContent = `${totalCorrected} stale view${totalCorrected !== 1 ? "s" : ""} corrected`;
+      summaryBar.appendChild(total);
+      const summaryItems = [
+        ["frame+cache", counts.both, "#ffaa55"],
+        ["frame", counts.frame, "#7bc8ff"],
+        ["cache", counts.cache, "#ffcc88"],
+        ["appeared", counts.appeared, "#88ff99"],
+        ["disappeared", counts.disappeared, "#ff8888"]
+      ];
+      for (const [label, count, color] of summaryItems) {
+        if (count === 0) {
+          continue;
+        }
+        const chip = _UILayoutDebugger._el("span", [`color: ${color}`]);
+        chip.textContent = `${count} ${label}`;
+        summaryBar.appendChild(chip);
+      }
+    }
+    const passTag = _UILayoutDebugger._el("span", ["color: #5a5a70", "margin-left: auto", "white-space: nowrap", "flex-shrink: 0"]);
+    passTag.textContent = passIndex >= 0 ? `forced pass #${passIndex}` : "";
+    summaryBar.appendChild(passTag);
+    panel.appendChild(summaryBar);
+    const tmBefore = result.before.textMeasurement;
+    const tmAfter = result.after.textMeasurement;
+    const tmPreparedCleared = tmBefore.preparedCacheSize > 0 && tmAfter.preparedCacheSize === 0;
+    const tmStyleCleared = tmBefore.styleCacheSize > 0 && tmAfter.styleCacheSize === 0;
+    const tmKnown = tmBefore.preparedCacheSize >= 0;
+    if (tmKnown) {
+      const tmBar = _UILayoutDebugger._el("div", [
+        "padding: 4px 10px",
+        "border-bottom: 1px solid rgba(255,255,255,0.08)",
+        "display: flex",
+        "gap: 10px",
+        "flex-shrink: 0",
+        "font-size: 9px",
+        "color: #7060a0",
+        "flex-wrap: wrap"
+      ]);
+      const tmLabel = _UILayoutDebugger._el("span", ["color: #7060a0", "font-weight: bold", "flex-shrink: 0"]);
+      tmLabel.textContent = "UITextMeasurement (global):";
+      tmBar.appendChild(tmLabel);
+      const prepChip = _UILayoutDebugger._el("span", [
+        "color: " + (tmPreparedCleared ? "#ffaa55" : "#5a5a70")
+      ]);
+      prepChip.textContent = `preparedCache ${tmBefore.preparedCacheSize} \u2192 ${tmAfter.preparedCacheSize}` + (tmPreparedCleared ? " \u2713 cleared" : "");
+      tmBar.appendChild(prepChip);
+      const styleChip = _UILayoutDebugger._el("span", [
+        "color: " + (tmStyleCleared ? "#ffaa55" : "#5a5a70")
+      ]);
+      styleChip.textContent = `styleCache ${tmBefore.styleCacheSize} \u2192 ${tmAfter.styleCacheSize}` + (tmStyleCleared ? " \u2713 cleared" : "");
+      tmBar.appendChild(styleChip);
+      panel.appendChild(tmBar);
+    }
+    let staleFilter = totalCorrected > 0 ? "all" : "all";
+    const tabBar = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "flex-shrink: 0",
+      "font-size: 10px"
+    ]);
+    const list = _UILayoutDebugger._el("div", [
+      "overflow-y: auto",
+      "flex: 1",
+      "padding: 4px 0"
+    ]);
+    const renderList = (filter) => {
+      var _a;
+      list.innerHTML = "";
+      if (diffs.length === 0) {
+        const msg = _UILayoutDebugger._el("div", ["padding: 10px 12px", "color: #88ff99", "font-size: 10px"]);
+        msg.textContent = "\u2713 Nothing was corrected \u2014 no missing invalidations detected.";
+        list.appendChild(msg);
+        return;
+      }
+      const visible = filter === "all" ? diffs : filter === "frame" ? diffs.filter((d) => d.kind === "frame" || d.kind === "both") : diffs.filter((d) => d.kind === "cache" || d.kind === "both");
+      if (visible.length === 0) {
+        const msg = _UILayoutDebugger._el("div", ["padding: 8px 12px", "color: #5a5a70", "font-size: 10px"]);
+        msg.textContent = "No items.";
+        list.appendChild(msg);
+        return;
+      }
+      for (const d of visible) {
+        const cacheWrites = (_a = forcedPassCacheChanges.get(d.viewIndex)) != null ? _a : [];
+        const row = _UILayoutDebugger._el("div", [
+          "padding: 5px 10px",
+          "border-bottom: 1px solid rgba(255,255,255,0.05)",
+          "font-size: 10px"
+        ]);
+        const topLine = _UILayoutDebugger._el("div", ["display: flex", "gap: 6px", "align-items: baseline", "margin-bottom: 2px"]);
+        const kindColors = {
+          appeared: "#88ff99",
+          disappeared: "#ff8888",
+          both: "#ffaa55",
+          frame: "#7bc8ff",
+          cache: "#ffcc88",
+          unchanged: "#5a5a70"
+        };
+        const kindTag = _UILayoutDebugger._el("span", [
+          `color: ${kindColors[d.kind]}`,
+          "flex-shrink: 0",
+          "font-size: 9px",
+          "font-weight: bold",
+          "min-width: 70px"
+        ]);
+        kindTag.textContent = d.kind.toUpperCase();
+        const cls = _UILayoutDebugger._el("span", ["color: #ffcc88", "font-weight: bold"]);
+        cls.textContent = d.className;
+        const eid = _UILayoutDebugger._el("span", ["color: #6a6a80"]);
+        eid.textContent = ` #${d.elementID}`;
+        const jumpBtn = _UILayoutDebugger._el("span", [
+          "color: #59599b",
+          "margin-left: auto",
+          "font-size: 9px",
+          "cursor: pointer",
+          "flex-shrink: 0"
+        ]);
+        jumpBtn.textContent = `pass #${passIndex} \u2197`;
+        jumpBtn.title = "Jump to this view in the forced-layout pass";
+        jumpBtn.onclick = () => {
+          const trace = _UILayoutDebugger._traces.find((t) => t.passIndex === passIndex);
+          if (!trace) {
+            return;
+          }
+          const ti = _UILayoutDebugger._traces.indexOf(trace);
+          const si = trace.steps.findIndex((s) => s.viewIndex === d.viewIndex);
+          if (si < 0) {
+            return;
+          }
+          _UILayoutDebugger._replayTraceIndex = ti;
+          _UILayoutDebugger._replayStepIndex = si;
+          _UILayoutDebugger._renderOverlay();
+        };
+        topLine.append(kindTag, cls, eid, jumpBtn);
+        row.appendChild(topLine);
+        if (d.kind === "frame" || d.kind === "both") {
+          const frameLine = _UILayoutDebugger._el("div", ["padding-left: 76px", "color: #b0b0c8", "font-size: 9px", "margin-bottom: 1px"]);
+          frameLine.textContent = "frame: " + _UILayoutDebugger._formatFrameDiff(d.baselineFrame, d.currentFrame);
+          row.appendChild(frameLine);
+        }
+        if (d.kind === "cache" || d.kind === "both") {
+          const cacheLine = _UILayoutDebugger._el("div", ["padding-left: 76px", "color: #a0a090", "font-size: 9px", "margin-bottom: 1px"]);
+          cacheLine.textContent = "cache: " + _UILayoutDebugger._formatCacheDiff(d.baselineCache, d.currentCache);
+          row.appendChild(cacheLine);
+          if (cacheWrites.length > 0) {
+            const xrefHeader = _UILayoutDebugger._el("div", [
+              "padding-left: 76px",
+              "color: #7060a0",
+              "font-size: 9px",
+              "margin-top: 3px",
+              "margin-bottom: 1px",
+              "font-weight: bold"
+            ]);
+            xrefHeader.textContent = `\u21B3 recomputed by (${cacheWrites.length} write${cacheWrites.length !== 1 ? "s" : ""} in forced pass):`;
+            row.appendChild(xrefHeader);
+            for (const ev of cacheWrites) {
+              const writeRow = _UILayoutDebugger._el("div", [
+                "padding-left: 84px",
+                "display: flex",
+                "gap: 5px",
+                "align-items: baseline",
+                "font-size: 9px"
+              ]);
+              const keyMatch = ev.cacheKey.match(/h_(\d+(?:\.\d+)?)__w_(\d+(?:\.\d+)?)/);
+              const keyLabel = keyMatch ? keyMatch[1] !== "0" && keyMatch[2] !== "0" ? `h\u2264${keyMatch[1]} w\u2264${keyMatch[2]}` : keyMatch[2] !== "0" ? `w\u2264${keyMatch[2]}` : `h\u2264${keyMatch[1]}` : ev.cacheKey;
+              const keySpan = _UILayoutDebugger._el("span", ["color: #6060808", "flex-shrink: 0"]);
+              keySpan.textContent = keyLabel;
+              const valSpan = _UILayoutDebugger._el("span", ["color: #88ddff", "flex-shrink: 0"]);
+              valSpan.textContent = `\u2192 ${ev.newValue.width.toFixed(0)}\xD7${ev.newValue.height.toFixed(0)}`;
+              const callerSpan = _UILayoutDebugger._el("span", ["color: #7070a8", "cursor: pointer"]);
+              callerSpan.textContent = ev.callerFunction + "()";
+              callerSpan.title = ev.cleanStack;
+              let stackOpen = false;
+              const stackEl = _UILayoutDebugger._el("div", [
+                "display: none",
+                "margin-top: 2px",
+                "padding: 3px 6px",
+                "background: rgba(255,255,255,0.04)",
+                "border-radius: 3px",
+                "color: #6060808",
+                "font-size: 9px",
+                "white-space: pre",
+                "overflow-x: auto"
+              ]);
+              stackEl.textContent = ev.cleanStack;
+              callerSpan.onclick = () => {
+                stackOpen = !stackOpen;
+                stackEl.style.display = stackOpen ? "block" : "none";
+              };
+              writeRow.append(keySpan, valSpan, callerSpan);
+              row.appendChild(writeRow);
+              row.appendChild(stackEl);
+            }
+          }
+        }
+        list.appendChild(row);
+      }
+    };
+    const filterTabs = [
+      ["All", "all", diffs.length, "#ffaa55"],
+      ["Frame", "frame", counts.frame + counts.both, "#7bc8ff"],
+      ["Cache", "cache", counts.cache + counts.both, "#ffcc88"]
+    ];
+    const buildTabs = () => {
+      tabBar.innerHTML = "";
+      for (const [label, filter, count, color] of filterTabs) {
+        if (count === 0 && filter !== "all") {
+          continue;
+        }
+        const tab = _UILayoutDebugger._el("div", [
+          "padding: 4px 8px",
+          "cursor: pointer",
+          "border-bottom: 2px solid " + (staleFilter === filter ? color : "transparent"),
+          `color: ${staleFilter === filter ? color : "#6a6a80"}`,
+          "white-space: nowrap",
+          "font-size: 10px"
+        ]);
+        tab.textContent = `${label} (${count})`;
+        tab.onclick = () => {
+          staleFilter = filter;
+          buildTabs();
+          renderList(staleFilter);
+        };
+        tabBar.appendChild(tab);
+      }
+    };
+    buildTabs();
+    panel.appendChild(tabBar);
+    panel.appendChild(list);
+    renderList(staleFilter);
+    return panel;
+  }
+  static _renderHelpPanel() {
+    const panel = _UILayoutDebugger._el("div", [
+      "overflow-y: auto",
+      "flex: 1",
+      "padding: 14px 16px",
+      "font-size: 11px",
+      "line-height: 1.6",
+      "color: #c0c0d8"
+    ]);
+    const section = (heading, body) => {
+      const h = _UILayoutDebugger._el("div", [
+        "font-weight: bold",
+        "color: #c8d8ff",
+        "margin-top: 14px",
+        "margin-bottom: 4px",
+        "font-size: 11px",
+        "border-bottom: 1px solid rgba(255,255,255,0.08)",
+        "padding-bottom: 3px"
+      ]);
+      h.textContent = heading;
+      const b = _UILayoutDebugger._el("div", ["color: #a0a0b8", "white-space: pre-wrap"]);
+      b.textContent = body;
+      panel.appendChild(h);
+      panel.appendChild(b);
+    };
+    const kv = (key, value) => {
+      const row = _UILayoutDebugger._el("div", ["display: flex", "gap: 8px", "margin-bottom: 4px"]);
+      const k = _UILayoutDebugger._el("span", [
+        "color: #ffcc88",
+        "font-weight: bold",
+        "flex-shrink: 0",
+        "min-width: 110px"
+      ]);
+      k.textContent = key;
+      const v = _UILayoutDebugger._el("span", ["color: #a0a0b8"]);
+      v.textContent = value;
+      row.append(k, v);
+      panel.appendChild(row);
+    };
+    section("Core concepts", "");
+    kv(
+      "Pass",
+      "One full run of layoutViewsIfNeeded(). The scheduler collects every view that called setNeedsLayout() and works through them all. A single user action typically triggers one pass."
+    );
+    kv(
+      "Iteration",
+      "One loop of the while-loop inside a pass. Laying out a view can call setNeedsLayout() on another view, adding it to the queue mid-pass. The loop repeats until the queue is empty. Most passes have 1 iteration; more than 1 signals that layout is triggering further layout."
+    );
+    kv(
+      "Step",
+      "One view being laid out within a pass \u2014 one call to layoutIfNeeded(). A pass with 8 steps means 8 views had their layout computed. Steps are the atomic unit you step through in the scrubber."
+    );
+    kv(
+      "Trigger",
+      "The call stack at the moment setNeedsLayout() was called on a view. Tells you what caused the view to enter the layout queue."
+    );
+    kv(
+      "Heat colour",
+      "Green = laid out once. Orange = laid out twice (possible unnecessary work). Red = laid out 3+ times (likely a layout cycle or redundant invalidation)."
+    );
+    section("Pass inspector", "");
+    kv(
+      "Pass picker",
+      "Selects which recorded pass to inspect. The most recent pass is shown first. Up to 20 passes are stored."
+    );
+    kv(
+      "\u25C0 \u25B6 scrubber",
+      "Steps through the views laid out in the selected pass one at a time. The active view is highlighted in the tree and its frame diff, intrinsic cache diff, trigger stack, and subview changes are shown above."
+    );
+    kv(
+      "Frame filter",
+      "All: show every step. Changed: only steps where the frame actually moved or resized. Unchanged: only no-ops. The counter shows n/total when filtered."
+    );
+    kv(
+      "Compare \u29C9",
+      "Splits the panel into two columns, each showing an independent pass. The tree expands and collapses in sync between both columns."
+    );
+    kv(
+      "Cache writes",
+      "Collapsible section at the bottom of each column. Every write to a view's intrinsic size cache during that pass is listed, with the value written and the caller that triggered the measurement."
+    );
+    section("Baseline & diff", "");
+    kv(
+      "\u{1F4CD} Baseline",
+      "Captures a flat snapshot of every view's frame and intrinsic cache right now. Requires at least one layout pass to have run so the root view is known. Click again to recapture."
+    );
+    kv(
+      "\u2295 Diff",
+      "Captures a second snapshot and shows what changed since the baseline. Changes are sorted: appeared, disappeared, frame+cache, frame-only, cache-only. Click any row to jump to the pass that caused that change."
+    );
+    kv(
+      "pass #N tag",
+      "Shown on each diff row. Indicates the first recorded pass (by pass number) in which that view was laid out after the baseline was taken."
+    );
+    kv(
+      "\u2B1A Frame / Bounds",
+      "Toggles how frame comparisons are made across all diff panels. Frame mode (default): a view is considered changed if its position or size changed. Bounds mode: only size changes are counted \u2014 origin (x/y) is ignored. Use bounds mode when you care only about content-affecting size changes and want to suppress noise from views that merely moved."
+    );
+    section("Stale layout report  \u2622", "");
+    kv(
+      "\u2622 Stale",
+      "The primary tool for finding missing cache invalidations. Click once to snapshot the current tree state, then immediately call performForcedSubtreeLayout() for a complete cold remeasure, then diff the two snapshots. Any view that changed was holding stale/incorrect state \u2014 its invalidation was missed somewhere."
+    );
+    kv(
+      "Corrected views",
+      "Each row in the \u2622 panel is a view the forced pass corrected. The kind tag shows whether the frame, intrinsic cache, or both were stale."
+    );
+    kv(
+      "\u21B3 recomputed by",
+      "For cache corrections, the exact call path(s) that recomputed the correct value during the forced pass are listed below each row, with expandable stack traces. Work backwards from that call site to find where the corresponding invalidation should have been triggered but wasn't."
+    );
+    kv(
+      "pass #N \u2197",
+      "Each row has a jump link to the forced-layout pass in the pass inspector so you can step through the remeasure for that view in full detail."
+    );
+    kv(
+      "Re-run",
+      "Right-click the \u2622 Stale button (or use \u21BA Re-run in the panel) to re-run the report without closing and reopening. Useful after you've applied a fix and want to verify the stale count drops to zero."
+    );
+    kv(
+      "When to use it",
+      "Reproduce the bug, then immediately click \u2622 Stale before triggering any other layout. The tree must be in its incorrect state at the moment you click. The forced layout will correct it, which is visible in the UI after the report runs."
+    );
+    section("Live inspector  \u{1F441}", "");
+    kv(
+      "\u{1F441} Live",
+      "Shows the current view tree as it exists right now \u2014 not a recorded snapshot. Frames and cache entries reflect the live DOM state. Use \u21BA Refresh to re-read after triggering layout manually."
+    );
+    section("Breakpoint mode  \u23F8", "");
+    kv(
+      "\u23F8 BP",
+      "When enabled, a sentinel line executes before every layoutIfNeeded() call. Set a browser debugger breakpoint on that line to pause before each step with the full live JS stack in scope."
+    );
+    kv(
+      "Finding the line",
+      "In Chrome DevTools Sources, press Cmd+Opt+F (Mac) or Ctrl+Shift+F (Windows) and search for: breakpointOnThisLine"
+    );
+    section("Console API", "All methods are on the global UILayoutDebugger object.");
+    kv("UILayoutDebugger.enable()", "Start or stop recording and show/hide the overlay.");
+    kv("UILayoutDebugger.disable()", "Stop recording and hide the overlay.");
+    kv("UILayoutDebugger.enableBreakpoints()", "Turn on breakpoint step-through mode.");
+    kv("UILayoutDebugger.captureBaseline()", "Snapshot current state as baseline.");
+    kv("UILayoutDebugger.captureAndDiff()", "Snapshot and diff against baseline.");
+    kv("UILayoutDebugger.captureStaleLayoutReport()", "Snapshot \u2192 forced remeasure \u2192 diff. Primary cache-staleness diagnostic.");
+    kv("UILayoutDebugger.clearStaleReport()", "Clear the stale report result and close the panel.");
+    kv("UILayoutDebugger.clearTraces()", "Discard all recorded passes and reset the counter.");
+    kv("UILayoutDebugger.goToStep(n)", "Jump to step n (0-based) in the current pass.");
+    kv("UILayoutDebugger.toggleLiveInspector()", "Show or hide the live view tree panel.");
+    kv("UILayoutDebugger._boundsBasedDiff = true", "Switch all frame diffs to size-only (bounds) mode from the console.");
+    return panel;
+  }
+  static _renderLiveInspectorPanel() {
+    const panel = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "flex-direction: column",
+      "flex: 1",
+      "min-height: 0",
+      "overflow: hidden"
+    ]);
+    const bar = _UILayoutDebugger._el("div", [
+      "padding: 5px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "display: flex",
+      "align-items: center",
+      "gap: 6px",
+      "flex-shrink: 0",
+      "font-size: 10px"
+    ]);
+    const barTitle = _UILayoutDebugger._el("span", ["color: #a0a0b8", "flex: 1", "font-weight: bold"]);
+    barTitle.textContent = "\u{1F441} Live View Tree";
+    const refreshBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#9090a8"));
+    refreshBtn.textContent = "\u21BA Refresh";
+    refreshBtn.title = "Re-capture current state";
+    refreshBtn.onclick = () => _UILayoutDebugger._renderOverlay();
+    const syncBtn = _UILayoutDebugger._el("button", _UILayoutDebugger._btnStyle("#9090a8"));
+    syncBtn.textContent = "\u21C4 Sync";
+    syncBtn.title = "Sync collapse/expand state from pass inspector. Views not in the pass inspector are kept collapsed.";
+    syncBtn.onclick = () => {
+      const source = _UILayoutDebugger._compareMode ? _UILayoutDebugger._sharedExpandState : _UILayoutDebugger._singleExpandState;
+      const tracedViews = /* @__PURE__ */ new Set();
+      for (const trace of _UILayoutDebugger._traces) {
+        for (const step of trace.steps) {
+          tracedViews.add(step.viewIndex);
+        }
+      }
+      const newState = /* @__PURE__ */ new Map();
+      for (const [idx, expanded] of source) {
+        newState.set(idx, expanded);
+      }
+      _UILayoutDebugger._walkViewTree(
+        _UILayoutDebugger._lastKnownRootView,
+        /* @__PURE__ */ new Map(),
+        /* @__PURE__ */ new Set()
+      );
+      const liveIndices = /* @__PURE__ */ new Set();
+      const collectIndices = (view, visited) => {
+        var _a, _b;
+        const idx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+        if (idx < 0 || visited.has(idx)) {
+          return;
+        }
+        visited.add(idx);
+        liveIndices.add(idx);
+        for (const sv of (_b = view == null ? void 0 : view.subviews) != null ? _b : []) {
+          collectIndices(sv, visited);
+        }
+      };
+      collectIndices(_UILayoutDebugger._lastKnownRootView, /* @__PURE__ */ new Set());
+      for (const idx of liveIndices) {
+        if (!newState.has(idx)) {
+          newState.set(idx, tracedViews.has(idx));
+        }
+      }
+      _UILayoutDebugger._liveExpandState = newState;
+      _UILayoutDebugger._renderOverlay();
+    };
+    bar.append(barTitle, refreshBtn, syncBtn);
+    panel.appendChild(bar);
+    const root = _UILayoutDebugger._lastKnownRootView;
+    if (!root) {
+      const msg = _UILayoutDebugger._el("div", ["padding: 10px 12px", "color: #6a6a80", "font-size: 10px"]);
+      msg.textContent = "No root view found yet \u2014 trigger a layout pass first.";
+      panel.appendChild(msg);
+      return panel;
+    }
+    const treeContainer = _UILayoutDebugger._el("div", [
+      "overflow-y: auto",
+      "flex: 1",
+      "padding: 4px 0",
+      "position: relative"
+    ]);
+    _UILayoutDebugger._renderLiveNode(
+      root,
+      treeContainer,
+      0,
+      /* @__PURE__ */ new Set(),
+      _UILayoutDebugger._liveExpandState
+    );
+    panel.appendChild(treeContainer);
+    return panel;
+  }
+  static _renderLiveNode(view, container, depth, visited, expandState) {
+    var _a, _b, _c, _d, _e;
+    const idx = (_a = view == null ? void 0 : view._UIViewIndex) != null ? _a : -1;
+    if (idx < 0 || visited.has(idx)) {
+      return;
+    }
+    visited.add(idx);
+    const frame = _UILayoutDebugger._captureFrame(view);
+    const cache = _UILayoutDebugger._captureCache(view);
+    const className = (_c = (_b = view == null ? void 0 : view.constructor) == null ? void 0 : _b.name) != null ? _c : "UnknownView";
+    const elementID = (_d = view == null ? void 0 : view.elementID) != null ? _d : String(idx);
+    const subviews = (_e = view == null ? void 0 : view.subviews) != null ? _e : [];
+    const hasChildren = subviews.length > 0;
+    if (!expandState.has(idx)) {
+      expandState.set(idx, true);
+    }
+    let expanded = expandState.get(idx);
+    const row = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "align-items: baseline",
+      "padding: 1px 10px 1px " + (10 + depth * 12) + "px",
+      "cursor: " + (hasChildren ? "pointer" : "default"),
+      "border-radius: 3px",
+      "margin: 0 4px"
+    ]);
+    const chevron = _UILayoutDebugger._el("span", [
+      "display: inline-block",
+      "width: 10px",
+      "flex-shrink: 0",
+      "color: #7070a0",
+      "font-size: 8px",
+      "margin-right: 2px",
+      "text-align: center"
+    ]);
+    chevron.textContent = !hasChildren ? "" : expanded ? "\u25BE" : "\u25B8";
+    const dot = _UILayoutDebugger._el("span", [
+      "display: inline-block",
+      "width: 7px",
+      "height: 7px",
+      "border-radius: 50%",
+      "margin-right: 5px",
+      "flex-shrink: 0",
+      "background: #4a4a5a"
+    ]);
+    const classSpan = _UILayoutDebugger._el("span", ["color: #9090a8"]);
+    classSpan.textContent = className;
+    const eidSpan = _UILayoutDebugger._el("span", ["color: #6a6a80", "margin-left: 4px"]);
+    eidSpan.textContent = `#${elementID}`;
+    const frameSpan = _UILayoutDebugger._el("span", ["color: #55556a", "margin-left: 4px", "font-size: 9px"]);
+    frameSpan.textContent = frame ? `${frame.left.toFixed(0)},${frame.top.toFixed(0)}  ${frame.width.toFixed(0)}\xD7${frame.height.toFixed(0)}` : "";
+    row.append(chevron, dot, classSpan, eidSpan, frameSpan);
+    row.title = [
+      `${className} #${elementID}`,
+      frame ? `frame: ${frame.left.toFixed(1)},${frame.top.toFixed(1)}  ${frame.width.toFixed(1)}\xD7${frame.height.toFixed(1)}` : "frame: (none)",
+      "cache: " + _UILayoutDebugger._formatCacheSnapshot(cache)
+    ].join("\n");
+    container.appendChild(row);
+    if (!hasChildren) {
+      return;
+    }
+    const childContainer = _UILayoutDebugger._el("div", [
+      "display: " + (expanded ? "block" : "none")
+    ]);
+    container.appendChild(childContainer);
+    for (const sv of subviews) {
+      _UILayoutDebugger._renderLiveNode(sv, childContainer, depth + 1, visited, expandState);
+    }
+    row.onclick = () => {
+      expanded = !expanded;
+      expandState.set(idx, expanded);
+      childContainer.style.display = expanded ? "block" : "none";
+      chevron.textContent = expanded ? "\u25BE" : "\u25B8";
+    };
+  }
+  static _renderDiffPanel(baseline, current, onNavigate, baselineTakenAt) {
+    const panel = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "flex-direction: column",
+      "flex: 1",
+      "min-height: 0",
+      "overflow: hidden"
+    ]);
+    const diffs = _UILayoutDebugger._diffSnapshots(baseline, current);
+    const counts = { appeared: 0, disappeared: 0, frame: 0, cache: 0, both: 0, unchanged: 0 };
+    for (const d of diffs) {
+      counts[d.kind]++;
+    }
+    const changed = counts.appeared + counts.disappeared + counts.frame + counts.cache + counts.both;
+    const summaryBar = _UILayoutDebugger._el("div", [
+      "padding: 5px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "display: flex",
+      "gap: 8px",
+      "align-items: center",
+      "flex-shrink: 0",
+      "font-size: 10px",
+      "flex-wrap: wrap"
+    ]);
+    const summaryItems = [
+      ["appeared", counts.appeared, "#88ff99"],
+      ["disappeared", counts.disappeared, "#ff8888"],
+      ["frame+cache", counts.both, "#ffaa55"],
+      ["frame", counts.frame, "#7bc8ff"],
+      ["cache", counts.cache, "#ffcc88"],
+      ["unchanged", counts.unchanged, "#5a5a70"]
+    ];
+    for (const [label, count, color] of summaryItems) {
+      if (count === 0) {
+        continue;
+      }
+      const chip = _UILayoutDebugger._el("span", [`color: ${color}`]);
+      chip.textContent = `${count} ${label}`;
+      summaryBar.appendChild(chip);
+    }
+    if (changed === 0) {
+      const chip = _UILayoutDebugger._el("span", ["color: #9090a8"]);
+      chip.textContent = "No changes";
+      summaryBar.appendChild(chip);
+    }
+    const ts = _UILayoutDebugger._el("span", ["color: #5a5a70", "margin-left: auto", "white-space: nowrap"]);
+    const elapsed = ((current.takenAt - baseline.takenAt) / 1e3).toFixed(1);
+    ts.textContent = `+${elapsed}s`;
+    summaryBar.appendChild(ts);
+    panel.appendChild(summaryBar);
+    let diffFilter = changed > 0 ? "frame" : "all";
+    const tabBar = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "flex-shrink: 0",
+      "font-size: 10px"
+    ]);
+    const list = _UILayoutDebugger._el("div", [
+      "overflow-y: auto",
+      "flex: 1",
+      "padding: 4px 0"
+    ]);
+    const renderList = (filter) => {
+      list.innerHTML = "";
+      const visible = filter === "all" ? diffs : diffs.filter((d) => d.kind === filter || filter === "frame" && d.kind === "both");
+      if (visible.length === 0) {
+        const msg = _UILayoutDebugger._el("div", ["padding: 8px 12px", "color: #5a5a70"]);
+        msg.textContent = "No items.";
+        list.appendChild(msg);
+        return;
+      }
+      for (const d of visible) {
+        const kindColors = {
+          appeared: "#88ff99",
+          disappeared: "#ff8888",
+          both: "#ffaa55",
+          frame: "#7bc8ff",
+          cache: "#ffcc88",
+          unchanged: "#5a5a70"
+        };
+        const causingTrace = d.kind !== "disappeared" ? _UILayoutDebugger._findCausingTrace(d.viewIndex, baselineTakenAt) : null;
+        const hasTrace = !!causingTrace;
+        const row = _UILayoutDebugger._el("div", [
+          "padding: 3px 10px",
+          "border-bottom: 1px solid rgba(255,255,255,0.04)",
+          "font-size: 10px",
+          hasTrace ? "cursor: pointer" : "cursor: default"
+        ]);
+        if (hasTrace) {
+          row.title = `Click to jump to pass #${causingTrace.passIndex} in the pass inspector`;
+          row.onmouseenter = () => {
+            row.style.background = "rgba(255,255,255,0.06)";
+          };
+          row.onmouseleave = () => {
+            row.style.background = "";
+          };
+          row.onclick = () => onNavigate(d.viewIndex);
+        }
+        const topLine = _UILayoutDebugger._el("div", ["display: flex", "gap: 6px", "align-items: baseline"]);
+        const kindTag = _UILayoutDebugger._el("span", [
+          `color: ${kindColors[d.kind]}`,
+          "flex-shrink: 0",
+          "font-size: 9px",
+          "font-weight: bold",
+          "min-width: 70px"
+        ]);
+        kindTag.textContent = d.kind.toUpperCase();
+        const cls = _UILayoutDebugger._el("span", ["color: #ffcc88", "font-weight: bold"]);
+        cls.textContent = d.className;
+        const eid = _UILayoutDebugger._el("span", ["color: #6a6a80"]);
+        eid.textContent = `#${d.elementID}`;
+        if (causingTrace) {
+          const passTag = _UILayoutDebugger._el("span", [
+            "color: #59599b",
+            "margin-left: auto",
+            "font-size: 9px",
+            "flex-shrink: 0"
+          ]);
+          passTag.textContent = `pass #${causingTrace.passIndex}`;
+          topLine.append(kindTag, cls, eid, passTag);
+        } else {
+          topLine.append(kindTag, cls, eid);
+        }
+        row.appendChild(topLine);
+        if (d.kind !== "appeared" && d.kind !== "disappeared") {
+          if (d.kind === "frame" || d.kind === "both") {
+            const frameLine = _UILayoutDebugger._el("div", ["padding-left: 76px", "color: #b0b0c8", "font-size: 9px"]);
+            frameLine.textContent = "frame: " + _UILayoutDebugger._formatFrameDiff(d.baselineFrame, d.currentFrame);
+            row.appendChild(frameLine);
+          }
+          if (d.kind === "cache" || d.kind === "both") {
+            const cacheLine = _UILayoutDebugger._el("div", ["padding-left: 76px", "color: #a0a090", "font-size: 9px"]);
+            cacheLine.textContent = "cache: " + _UILayoutDebugger._formatCacheDiff(d.baselineCache, d.currentCache);
+            row.appendChild(cacheLine);
+          }
+        } else {
+          const frameLine = _UILayoutDebugger._el("div", ["padding-left: 76px", "color: #b0b0c8", "font-size: 9px"]);
+          frameLine.textContent = "frame: " + _UILayoutDebugger._formatFrame(
+            d.kind === "appeared" ? d.currentFrame : d.baselineFrame
+          );
+          row.appendChild(frameLine);
+        }
+        list.appendChild(row);
+      }
+    };
+    const tabs = [
+      ["All", "all", diffs.length, "#9090a8"],
+      ["Frame", "frame", counts.frame + counts.both, "#7bc8ff"],
+      ["Cache", "cache", counts.cache + counts.both, "#ffcc88"],
+      ["Appeared", "appeared", counts.appeared, "#88ff99"],
+      ["Disappeared", "disappeared", counts.disappeared, "#ff8888"]
+    ];
+    const buildTabs = () => {
+      tabBar.innerHTML = "";
+      for (const [label, filter, count, color] of tabs) {
+        if (count === 0 && filter !== "all") {
+          continue;
+        }
+        const tab = _UILayoutDebugger._el("div", [
+          "padding: 4px 8px",
+          "cursor: pointer",
+          "border-bottom: 2px solid " + (diffFilter === filter ? color : "transparent"),
+          `color: ${diffFilter === filter ? color : "#6a6a80"}`,
+          "white-space: nowrap",
+          "font-size: 10px"
+        ]);
+        tab.textContent = `${label} (${count})`;
+        tab.onclick = () => {
+          diffFilter = filter;
+          buildTabs();
+          renderList(diffFilter);
+        };
+        tabBar.appendChild(tab);
+      }
+    };
+    buildTabs();
+    panel.appendChild(tabBar);
+    panel.appendChild(list);
+    renderList(diffFilter);
+    return panel;
+  }
+  static _renderStepDetail(activeStep) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const detail = _UILayoutDebugger._el("div", [
+      "padding: 6px 10px",
+      "border-bottom: 1px solid rgba(255,255,255,0.08)",
+      "flex-shrink: 0",
+      "font-size: 10px"
+    ]);
+    const titleRow = _UILayoutDebugger._el("div", ["margin-bottom: 3px"]);
+    const stepTag = _UILayoutDebugger._el("span", [
+      "background: #2a2a44",
+      "border-radius: 3px",
+      "padding: 0 4px",
+      "margin-right: 5px",
+      "color: #aac8ff",
+      "font-weight: bold"
+    ]);
+    stepTag.textContent = `step ${activeStep.stepIndex}`;
+    const iterTag = _UILayoutDebugger._el("span", ["color: #9090a8", "margin-right: 6px"]);
+    iterTag.textContent = `iter ${activeStep.iteration + 1}`;
+    const className = _UILayoutDebugger._el("span", ["color: #ffcc88", "font-weight: bold"]);
+    className.textContent = activeStep.className;
+    const eid = _UILayoutDebugger._el("span", ["color: #9090a8", "margin-left: 4px"]);
+    eid.textContent = `#${activeStep.elementID}`;
+    titleRow.append(stepTag, iterTag, className, eid);
+    detail.appendChild(titleRow);
+    const frameRow = _UILayoutDebugger._el("div", ["color: #c0c0d8", "margin-bottom: 2px"]);
+    frameRow.textContent = "frame: " + _UILayoutDebugger._formatFrameDiff(activeStep.frameBefore, activeStep.frameAfter);
+    detail.appendChild(frameRow);
+    const cacheDiffStr = _UILayoutDebugger._formatCacheDiff(activeStep.cacheBefore, activeStep.cacheAfter);
+    const cacheRow = _UILayoutDebugger._el("div", ["margin-bottom: 3px"]);
+    const cacheLabel = _UILayoutDebugger._el("span", ["color: #8888a0", "margin-right: 4px"]);
+    cacheLabel.textContent = "cache:";
+    const cacheChanged = ((_b = (_a = activeStep.cacheBefore) == null ? void 0 : _a.entryCount) != null ? _b : 0) !== ((_d = (_c = activeStep.cacheAfter) == null ? void 0 : _c.entryCount) != null ? _d : 0) || cacheDiffStr.includes("~") || cacheDiffStr.includes("+") || cacheDiffStr.includes("-");
+    const cacheSummary = _UILayoutDebugger._el("span", [
+      "color: " + (cacheChanged ? "#ffcc88" : "#7878a0"),
+      "cursor: pointer",
+      "font-weight: " + (cacheChanged ? "bold" : "normal")
+    ]);
+    const bCount = (_f = (_e = activeStep.cacheBefore) == null ? void 0 : _e.entryCount) != null ? _f : 0;
+    const aCount = (_h = (_g = activeStep.cacheAfter) == null ? void 0 : _g.entryCount) != null ? _h : 0;
+    cacheSummary.textContent = bCount === aCount ? `${aCount} entr${aCount === 1 ? "y" : "ies"}${cacheChanged ? " (changed)" : ""}` : `${bCount} \u2192 ${aCount} entries`;
+    let cacheExpanded = false;
+    const cacheDetail = _UILayoutDebugger._el("div", [
+      "display: none",
+      "margin-top: 2px",
+      "padding: 4px 6px",
+      "background: rgba(255,255,255,0.04)",
+      "border-radius: 3px",
+      "color: #9090a8",
+      "font-size: 9px",
+      "line-height: 1.6",
+      "white-space: pre"
+    ]);
+    cacheDetail.textContent = cacheDiffStr;
+    cacheSummary.onclick = () => {
+      cacheExpanded = !cacheExpanded;
+      cacheDetail.style.display = cacheExpanded ? "block" : "none";
+    };
+    cacheRow.append(cacheLabel, cacheSummary);
+    detail.appendChild(cacheRow);
+    detail.appendChild(cacheDetail);
+    const trigger = activeStep.trigger;
+    const triggerRow = _UILayoutDebugger._el("div", ["margin-top: 4px", "margin-bottom: 2px"]);
+    if (trigger) {
+      const triggerLabel = _UILayoutDebugger._el("span", ["color: #8888a0", "margin-right: 4px"]);
+      triggerLabel.textContent = "setNeedsLayout from";
+      const triggerFn = _UILayoutDebugger._el("span", ["color: #88ddff", "font-weight: bold", "cursor: pointer"]);
+      triggerFn.textContent = trigger.callerFunction + "()";
+      triggerFn.title = trigger.cleanStack;
+      let stackExpanded = false;
+      const stackEl = _UILayoutDebugger._el("div", [
+        "display: none",
+        "margin-top: 3px",
+        "padding: 4px 6px",
+        "background: rgba(255,255,255,0.04)",
+        "border-radius: 3px",
+        "color: #7878a0",
+        "font-size: 9px",
+        "line-height: 1.5",
+        "white-space: pre",
+        "overflow-x: auto"
+      ]);
+      stackEl.textContent = trigger.cleanStack;
+      triggerFn.onclick = () => {
+        stackExpanded = !stackExpanded;
+        stackEl.style.display = stackExpanded ? "block" : "none";
+      };
+      triggerRow.append(triggerLabel, triggerFn);
+      detail.appendChild(triggerRow);
+      detail.appendChild(stackEl);
+    } else {
+      const triggerLabel = _UILayoutDebugger._el("span", ["color: #5a5a70"]);
+      triggerLabel.textContent = "setNeedsLayout trigger not captured";
+      triggerRow.appendChild(triggerLabel);
+      detail.appendChild(triggerRow);
+    }
+    if (activeStep.subviewRecords.length > 0) {
+      const svHeader = _UILayoutDebugger._el("div", ["color: #8888a0", "margin-top: 4px", "margin-bottom: 2px"]);
+      svHeader.textContent = `Subviews set (${activeStep.subviewRecords.length}):`;
+      detail.appendChild(svHeader);
+      for (const sv of activeStep.subviewRecords) {
+        const svRow = _UILayoutDebugger._el("div", ["padding-left: 8px", "color: #a0a0b8"]);
+        const svClass = _UILayoutDebugger._el("span", ["color: #d8aacc"]);
+        svClass.textContent = sv.className;
+        const svEid = _UILayoutDebugger._el("span", ["color: #6a6a80"]);
+        svEid.textContent = ` #${sv.elementID}  `;
+        const svFrames = _UILayoutDebugger._el("span", ["color: #9090a8"]);
+        svFrames.textContent = _UILayoutDebugger._formatFrameDiff(sv.frameBefore, sv.frameAfter);
+        svRow.append(svClass, svEid, svFrames);
+        detail.appendChild(svRow);
+      }
+    }
+    return detail;
+  }
+  static _subtreeHasTouched(node, countMap) {
+    var _a;
+    if (((_a = countMap.get(node.viewIndex)) != null ? _a : 0) > 0) {
+      return true;
+    }
+    for (const child of node.children) {
+      if (_UILayoutDebugger._subtreeHasTouched(child, countMap)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  static _subtreeContains(node, viewIndex) {
+    if (node.viewIndex === viewIndex) {
+      return true;
+    }
+    for (const child of node.children) {
+      if (_UILayoutDebugger._subtreeContains(child, viewIndex)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  static _renderTreeNode(node, container, countMap, activeViewIndex, expandState, stepMap) {
+    var _a;
+    const count = (_a = countMap.get(node.viewIndex)) != null ? _a : 0;
+    const isActive = node.viewIndex === activeViewIndex && activeViewIndex >= 0;
+    const hasChildren = node.children.length > 0;
+    const isAncestorOfActive = activeViewIndex >= 0 ? _UILayoutDebugger._subtreeContains(node, activeViewIndex) : node.children.some((c) => _UILayoutDebugger._subtreeHasTouched(c, countMap));
+    const defaultExpanded = isAncestorOfActive || isActive;
+    let childrenExpanded;
+    if (expandState !== null) {
+      if (!expandState.has(node.viewIndex)) {
+        expandState.set(node.viewIndex, defaultExpanded);
+      }
+      childrenExpanded = expandState.get(node.viewIndex);
+    } else {
+      childrenExpanded = defaultExpanded;
+    }
+    const row = _UILayoutDebugger._el("div", [
+      "display: flex",
+      "align-items: baseline",
+      "padding: 1px 10px 1px " + (10 + node.depth * 12) + "px",
+      "cursor: " + (hasChildren ? "pointer" : "default"),
+      "border-radius: 3px",
+      "margin: 0 4px",
+      isActive ? "background: rgba(100,120,220,0.35); outline: 1px solid #59599b" : "background: transparent"
+    ]);
+    const chevron = _UILayoutDebugger._el("span", [
+      "display: inline-block",
+      "width: 10px",
+      "flex-shrink: 0",
+      "color: #7070a0",
+      "font-size: 8px",
+      "margin-right: 2px",
+      "text-align: center"
+    ]);
+    chevron.textContent = !hasChildren ? "" : childrenExpanded ? "\u25BE" : "\u25B8";
+    const dot = _UILayoutDebugger._el("span", [
+      "display: inline-block",
+      "width: 7px",
+      "height: 7px",
+      "border-radius: 50%",
+      "margin-right: 5px",
+      "flex-shrink: 0",
+      "background: " + _UILayoutDebugger._heatColor(count)
+    ]);
+    const untouchedColor = count === 0 ? "#9090a8" : "#ffcc88";
+    const className = _UILayoutDebugger._el("span", [
+      "color: " + untouchedColor,
+      "font-weight: " + (count > 0 ? "bold" : "normal")
+    ]);
+    className.textContent = node.className;
+    const eid = _UILayoutDebugger._el("span", [
+      "color: " + (count === 0 ? "#6a6a80" : "#a0a0b8"),
+      "margin-left: 4px"
+    ]);
+    eid.textContent = `#${node.elementID}`;
+    const frameStr = node.frame ? `  ${node.frame.left.toFixed(0)},${node.frame.top.toFixed(0)}  ${node.frame.width.toFixed(0)}\xD7${node.frame.height.toFixed(0)}` : "";
+    const frameSpan = _UILayoutDebugger._el("span", [
+      "color: " + (count === 0 ? "#55556a" : "#7878a0"),
+      "margin-left: 4px"
+    ]);
+    frameSpan.textContent = frameStr;
+    const step = stepMap.get(node.viewIndex);
+    const frameChanged = step ? !_UILayoutDebugger._framesEqual(step.frameBefore, step.frameAfter) : false;
+    const cacheChanged = step ? !_UILayoutDebugger._cachesEqual(step.cacheBefore, step.cacheAfter) : false;
+    const deltaSpan = _UILayoutDebugger._el("span", [
+      "margin-left: 5px",
+      "font-size: 9px",
+      "flex-shrink: 0"
+    ]);
+    if (frameChanged && cacheChanged) {
+      deltaSpan.style.color = "#ffaa55";
+      deltaSpan.textContent = "frame+cache";
+    } else if (frameChanged) {
+      deltaSpan.style.color = "#7bc8ff";
+      deltaSpan.textContent = _UILayoutDebugger._formatFrameDiff(step.frameBefore, step.frameAfter);
+    } else if (cacheChanged) {
+      deltaSpan.style.color = "#ffcc88";
+      deltaSpan.textContent = "cache changed";
+    }
+    if (count > 0) {
+      const countBadge = _UILayoutDebugger._el("span", [
+        "margin-left: 5px",
+        "background: " + _UILayoutDebugger._heatColor(count),
+        "color: #000",
+        "border-radius: 8px",
+        "padding: 0 4px",
+        "font-size: 9px",
+        "font-weight: bold"
+      ]);
+      countBadge.textContent = String(count) + "\xD7";
+      if (frameChanged || cacheChanged) {
+        row.append(chevron, dot, className, eid, frameSpan, deltaSpan, countBadge);
+      } else {
+        row.append(chevron, dot, className, eid, frameSpan, countBadge);
+      }
+    } else {
+      row.append(chevron, dot, className, eid, frameSpan);
+    }
+    const cacheStr = _UILayoutDebugger._formatCacheSnapshot(node.cacheAfterPass);
+    const tooltipLines = [
+      node.className + " #" + node.elementID,
+      "viewIndex: " + node.viewIndex,
+      node.frame ? `frame: ${node.frame.left.toFixed(1)}, ${node.frame.top.toFixed(1)}  ${node.frame.width.toFixed(1)}\xD7${node.frame.height.toFixed(1)}` : "frame: (none)",
+      "laid out: " + count + "\xD7",
+      "intrinsic cache (post-pass): " + cacheStr
+    ];
+    if (step && frameChanged) {
+      tooltipLines.push("frame \u0394: " + _UILayoutDebugger._formatFrameDiff(step.frameBefore, step.frameAfter));
+    }
+    if (step && cacheChanged) {
+      tooltipLines.push("cache \u0394: " + _UILayoutDebugger._formatCacheDiff(step.cacheBefore, step.cacheAfter));
+    }
+    row.title = tooltipLines.join("\n");
+    container.appendChild(row);
+    if (!hasChildren) {
+      return isActive ? row : null;
+    }
+    const childContainer = _UILayoutDebugger._el("div", [
+      "display: " + (childrenExpanded ? "block" : "none")
+    ]);
+    container.appendChild(childContainer);
+    let activeRow = isActive ? row : null;
+    for (const child of node.children) {
+      const result = _UILayoutDebugger._renderTreeNode(
+        child,
+        childContainer,
+        countMap,
+        activeViewIndex,
+        expandState,
+        stepMap
+      );
+      if (result) {
+        activeRow = result;
+      }
+    }
+    row.onclick = () => {
+      childrenExpanded = !childrenExpanded;
+      if (expandState !== null) {
+        expandState.set(node.viewIndex, childrenExpanded);
+      }
+      childContainer.style.display = childrenExpanded ? "block" : "none";
+      chevron.textContent = childrenExpanded ? "\u25BE" : "\u25B8";
+    };
+    return activeRow;
+  }
+  static _formatFrame(f) {
+    if (!f) {
+      return "(none)";
+    }
+    return `${f.left.toFixed(0)},${f.top.toFixed(0)}  ${f.width.toFixed(0)}\xD7${f.height.toFixed(0)}`;
+  }
+  static _formatFrameDiff(before, after) {
+    if (!before && !after) {
+      return "(no frame data)";
+    }
+    const bounds = _UILayoutDebugger._boundsBasedDiff;
+    const fmt = (f) => {
+      if (!f) {
+        return "(none)";
+      }
+      return bounds ? `${f.width.toFixed(0)}\xD7${f.height.toFixed(0)}` : _UILayoutDebugger._formatFrame(f);
+    };
+    if (!before) {
+      return `\u2192 ${fmt(after)}`;
+    }
+    if (!after) {
+      return `${fmt(before)} \u2192 (none)`;
+    }
+    const changed = bounds ? before.width !== after.width || before.height !== after.height : before.left !== after.left || before.top !== after.top || before.width !== after.width || before.height !== after.height;
+    if (!changed) {
+      return `= ${fmt(after)}`;
+    }
+    return `${fmt(before)}  \u2192  ${fmt(after)}`;
+  }
+  static _formatCacheSnapshot(c) {
+    if (!c) {
+      return "(none)";
+    }
+    const lines = [];
+    if (c.entryCount === 0) {
+      lines.push("intrinsic: empty");
+    } else {
+      const intrinsicLines = Object.entries(c.entries).map(([key, val]) => {
+        const match = key.match(/h_(\d+(?:\.\d+)?)__w_(\d+(?:\.\d+)?)/);
+        const label = match ? match[1] !== "0" && match[2] !== "0" ? `h\u2264${match[1]} w\u2264${match[2]}` : match[2] !== "0" ? `w\u2264${match[2]}` : `h\u2264${match[1]}` : key;
+        return `  ${label}: ${val.width.toFixed(0)}\xD7${val.height.toFixed(0)}`;
+      });
+      const prefix = c.isShared ? `shared(${c.sharedKey}) ` : "";
+      lines.push(`${prefix}${c.entryCount} entr${c.entryCount === 1 ? "y" : "ies"}`);
+      lines.push(...intrinsicLines);
+    }
+    lines.push(c.hasFrameCache ? `frameCache: ${_UILayoutDebugger._formatFrame(c.frameCache)}` : "frameCache: (empty)");
+    lines.push(c.hasVirtualFrameCache ? `virtualFrameCache: ${_UILayoutDebugger._formatFrame(c.virtualFrameCache)}` : "virtualFrameCache: (empty)");
+    return lines.join("\n");
+  }
+  static _formatCacheDiff(before, after) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!before && !after) {
+      return "(no cache data)";
+    }
+    const bCount = (_a = before == null ? void 0 : before.entryCount) != null ? _a : 0;
+    const aCount = (_b = after == null ? void 0 : after.entryCount) != null ? _b : 0;
+    if (bCount === 0 && aCount === 0 && !(before == null ? void 0 : before.hasFrameCache) && !(after == null ? void 0 : after.hasFrameCache) && !(before == null ? void 0 : before.hasVirtualFrameCache) && !(after == null ? void 0 : after.hasVirtualFrameCache)) {
+      return "empty \u2192 empty";
+    }
+    const lines = [];
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys((_c = before == null ? void 0 : before.entries) != null ? _c : {}),
+      ...Object.keys((_d = after == null ? void 0 : after.entries) != null ? _d : {})
+    ]);
+    for (const key of allKeys) {
+      const b = before == null ? void 0 : before.entries[key];
+      const a = after == null ? void 0 : after.entries[key];
+      const match = key.match(/h_(\d+(?:\.\d+)?)__w_(\d+(?:\.\d+)?)/);
+      const label = match ? match[1] !== "0" && match[2] !== "0" ? `h\u2264${match[1]} w\u2264${match[2]}` : match[2] !== "0" ? `w\u2264${match[2]}` : `h\u2264${match[1]}` : key;
+      if (!b) {
+        lines.push(`  + ${label}: ${a.width.toFixed(0)}\xD7${a.height.toFixed(0)}`);
+      } else if (!a) {
+        lines.push(`  - ${label}: ${b.width.toFixed(0)}\xD7${b.height.toFixed(0)}`);
+      } else if (b.width !== a.width || b.height !== a.height) {
+        lines.push(`  ~ ${label}: ${b.width.toFixed(0)}\xD7${b.height.toFixed(0)} \u2192 ${a.width.toFixed(0)}\xD7${a.height.toFixed(0)}`);
+      } else {
+        lines.push(`  = ${label}: ${a.width.toFixed(0)}\xD7${a.height.toFixed(0)}`);
+      }
+    }
+    const bHasF = (_e = before == null ? void 0 : before.hasFrameCache) != null ? _e : false;
+    const aHasF = (_f = after == null ? void 0 : after.hasFrameCache) != null ? _f : false;
+    if (bHasF || aHasF) {
+      if (bHasF && !aHasF) {
+        lines.push(`  - frameCache: ${_UILayoutDebugger._formatFrame(before.frameCache)}`);
+      } else if (!bHasF && aHasF) {
+        lines.push(`  + frameCache: ${_UILayoutDebugger._formatFrame(after.frameCache)}`);
+      } else {
+        const bf = before.frameCache, af = after.frameCache;
+        const changed = !bf || !af || bf.top !== af.top || bf.left !== af.left || bf.width !== af.width || bf.height !== af.height;
+        lines.push(changed ? `  ~ frameCache: ${_UILayoutDebugger._formatFrame(bf)} \u2192 ${_UILayoutDebugger._formatFrame(af)}` : `  = frameCache: ${_UILayoutDebugger._formatFrame(af)}`);
+      }
+    } else {
+      lines.push("  = frameCache: (empty)");
+    }
+    const bHasV = (_g = before == null ? void 0 : before.hasVirtualFrameCache) != null ? _g : false;
+    const aHasV = (_h = after == null ? void 0 : after.hasVirtualFrameCache) != null ? _h : false;
+    if (bHasV || aHasV) {
+      if (bHasV && !aHasV) {
+        lines.push(`  - virtualFrameCache: ${_UILayoutDebugger._formatFrame(before.virtualFrameCache)}`);
+      } else if (!bHasV && aHasV) {
+        lines.push(`  + virtualFrameCache: ${_UILayoutDebugger._formatFrame(after.virtualFrameCache)}`);
+      } else {
+        const bv = before.virtualFrameCache, av = after.virtualFrameCache;
+        const changed = !bv || !av || bv.top !== av.top || bv.left !== av.left || bv.width !== av.width || bv.height !== av.height;
+        lines.push(changed ? `  ~ virtualFrameCache: ${_UILayoutDebugger._formatFrame(bv)} \u2192 ${_UILayoutDebugger._formatFrame(av)}` : `  = virtualFrameCache: ${_UILayoutDebugger._formatFrame(av)}`);
+      }
+    }
+    const header = bCount === aCount ? `${aCount} entr${aCount === 1 ? "y" : "ies"}` : `${bCount} \u2192 ${aCount} entries`;
+    return lines.length ? `${header}
+${lines.join("\n")}` : header;
+  }
+  static _heatColor(count) {
+    if (count === 0) {
+      return "#4a4a5a";
+    }
+    if (count === 1) {
+      return "#3a8";
+    }
+    if (count === 2) {
+      return "#e80";
+    }
+    return "#d33";
+  }
+  static _el(tag, styles) {
+    const el = document.createElement(tag);
+    el.style.cssText = styles.join("; ");
+    return el;
+  }
+  static _btnStyle(color) {
+    return [
+      `color: ${color}`,
+      "background: rgba(255,255,255,0.06)",
+      "border: 1px solid rgba(255,255,255,0.1)",
+      "border-radius: 4px",
+      "padding: 1px 6px",
+      "font: inherit",
+      "cursor: pointer",
+      "flex-shrink: 0"
+    ];
+  }
+  static _makeDraggable(panel) {
+    let dragging = false;
+    let startX = 0, startY = 0, origRight = 8, origTop = 8;
+    panel.addEventListener("mousedown", (e) => {
+      const target = e.target;
+      if (!target.closest("[data-drag-handle]")) {
+        return;
+      }
+      dragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      origRight = parseInt(panel.style.right, 10) || 8;
+      origTop = parseInt(panel.style.top, 10) || 8;
+      e.preventDefault();
+    });
+    document.addEventListener("mousemove", (e) => {
+      if (!dragging) {
+        return;
+      }
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      panel.style.right = origRight - dx + "px";
+      panel.style.top = origTop + dy + "px";
+    });
+    document.addEventListener("mouseup", () => {
+      dragging = false;
+    });
+  }
+};
+let UILayoutDebugger = _UILayoutDebugger;
+UILayoutDebugger._isEnabled = false;
+UILayoutDebugger._breakpointsEnabled = false;
+UILayoutDebugger._passIndex = 0;
+UILayoutDebugger._currentTrace = null;
+UILayoutDebugger._currentIteration = 0;
+UILayoutDebugger._pendingStep = null;
+UILayoutDebugger._pendingSubviewsBefore = /* @__PURE__ */ new Map();
+UILayoutDebugger._layoutCountsThisPass = /* @__PURE__ */ new Map();
+UILayoutDebugger._liveViewRegistry = /* @__PURE__ */ new Map();
+UILayoutDebugger._triggerMap = /* @__PURE__ */ new Map();
+UILayoutDebugger._noiseFramePrefixes = [
+  "UILayoutDebugger",
+  "UIView.setNeedsLayout",
+  "setNeedsLayout",
+  "UIView.didLayoutSubviews",
+  "didLayoutSubviews",
+  "UIView.layoutSubviews",
+  "UIView.layoutIfNeeded",
+  "layoutIfNeeded",
+  "UIView.layoutViewsIfNeeded",
+  "layoutViewsIfNeeded",
+  "UIView._setCachedIntrinsicSize",
+  "_setCachedIntrinsicSize"
+];
+UILayoutDebugger._traces = [];
+UILayoutDebugger.maxStoredTraces = 20;
+UILayoutDebugger._replayTraceIndex = 0;
+UILayoutDebugger._replayStepIndex = -1;
+UILayoutDebugger._compareMode = false;
+UILayoutDebugger._frameFilter = "all";
+UILayoutDebugger._boundsBasedDiff = false;
+UILayoutDebugger._compareTraceIndex = 1;
+UILayoutDebugger._compareStepIndex = -1;
+UILayoutDebugger._sharedExpandState = /* @__PURE__ */ new Map();
+UILayoutDebugger._singleExpandState = /* @__PURE__ */ new Map();
+UILayoutDebugger._liveExpandState = /* @__PURE__ */ new Map();
+UILayoutDebugger._baseline = null;
+UILayoutDebugger._diffSnapshot = null;
+UILayoutDebugger._diffMode = false;
+UILayoutDebugger._liveInspectorMode = false;
+UILayoutDebugger._staleReportResult = null;
+UILayoutDebugger._staleReportMode = false;
+UILayoutDebugger._lastKnownRootView = null;
+UILayoutDebugger._overlayRoot = null;
+UILayoutDebugger._overlayVisible = true;
+UILayoutDebugger._helpMode = false;
+window.UILayoutDebugger = UILayoutDebugger;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UILayoutDebugger
+});
+//# sourceMappingURL=UILayoutDebugger.js.map