@oddsquad/vite-plugin-lit 0.4.0 → 0.6.0

package/dist/client/assets/{index-DVe6M4HV.js → index-DVr5EnyB.js}

@@ -1044,103 +1044,12 @@ var setColorSchemePreference = (pref) => {
 		localStorage.setItem(COLOR_SCHEME_LS_KEY, pref);
 	} catch {}
 	applyColorScheme(pref);
-};
-//#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
-function __decorate(decorators, target, key, desc) {
-	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-	return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-//#endregion
-//#region src/panel/timeline-layers.ts
-/**
-* @license
-* Copyright 2026 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-var TimelineLayers = class TimelineLayers extends i$2 {
-	constructor(..._args) {
-		super(..._args);
-		this.layers = [];
-	}
-	static {
-		this.styles = [tokens, i$5`
-      :host {
-        display: flex;
-        gap: var(--lit-devtools-space-2);
-        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
-        border-bottom: 1px solid var(--lit-devtools-border);
-        background: var(--lit-devtools-surface-low);
-        flex-shrink: 0;
-        flex-wrap: wrap;
-      }
-      button {
-        display: flex;
-        align-items: center;
-        gap: var(--lit-devtools-space-2);
-        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-4);
-        border-radius: var(--lit-devtools-radius-pill);
-        background: var(--lit-devtools-surface-elevated);
-        border: 1px solid transparent;
-        color: var(--lit-devtools-text-secondary);
-        font-size: var(--lit-devtools-text-2xs);
-        cursor: pointer;
-        user-select: none;
-        transition: opacity var(--lit-devtools-dur-fast)
-          var(--lit-devtools-ease-standard);
-      }
-      button.on {
-        color: var(--lit-devtools-text);
-      }
-      button:hover {
-        background: var(--lit-devtools-surface-hover);
-      }
-      .dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-        opacity: 0.4;
-      }
-      button.on .dot {
-        opacity: 1;
-      }
-    `];
-	}
-	_toggle(id) {
-		this.dispatchEvent(new CustomEvent("layer-toggle", {
-			detail: { id },
-			bubbles: true,
-			composed: true
-		}));
-	}
-	render() {
-		return b`${this.layers.map((l) => b`
-        <button
-          class=${l.enabled ? "on" : ""}
-          title=${l.enabled ? `Hide ${l.label}` : `Show ${l.label}`}
-          @click=${() => this._toggle(l.id)}
-        >
-          <span
-            class="dot"
-            style=${"background:#" + l.color.toString(16).padStart(6, "0")}
-          ></span>
-          ${l.label}
-        </button>
-      `)}`;
-	}
-};
-__decorate([n$3({ type: Array })], TimelineLayers.prototype, "layers", void 0);
-TimelineLayers = __decorate([t$2("timeline-layers")], TimelineLayers);
-//#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive-helpers.js
-/**
-* @license
-* Copyright 2020 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/ var { I: t$1 } = j$1, i$1 = (o) => o, r$1 = (o) => void 0 === o.strings, s$1 = () => document.createComment(""), v = (o, n, e) => {
+}, { I: t$1 } = j$1, i$1 = (o) => o, r$1 = (o) => void 0 === o.strings, s$1 = () => document.createComment(""), v = (o, n, e) => {
+	/**
+	* @license
+	* Copyright 2020 Google LLC
+	* SPDX-License-Identifier: BSD-3-Clause
+	*/
 	const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
 	if (void 0 === e) e = new t$1(l.insertBefore(s$1(), d), l.insertBefore(s$1(), d), o, o.options);
 	else {
@@ -1281,13 +1190,488 @@ var n = e$1(class extends f {
 	get lt() {
 		return "function" == typeof this.G ? o.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
 	}
-	disconnected() {
-		this.lt === this.ct && this.rt(void 0);
+	disconnected() {
+		this.lt === this.ct && this.rt(void 0);
+	}
+	reconnected() {
+		this.rt(this.ct);
+	}
+});
+//#endregion
+//#region src/lib/timeline/derive.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/** Layer whose events describe Lit update ticks. */
+var LIFECYCLE_LAYER_ID = "lit-lifecycle";
+/** Layers whose events are developer input, for {@link attributeInput}. */
+var INPUT_LAYER_IDS = ["mouse", "keyboard"];
+/** The phase that brackets an entire update tick. */
+var ROOT_PHASE = "performUpdate";
+var START_SUFFIX = ":start";
+var END_SUFFIX = ":end";
+/** Reads `data.changed` defensively — `data` is `unknown` on the wire. */
+var changedOf = (event) => {
+	const data = event.data;
+	if (data === null || typeof data !== "object") return void 0;
+	const changed = data.changed;
+	if (!Array.isArray(changed)) return void 0;
+	const keys = changed.filter((key) => typeof key === "string");
+	return keys.length > 0 ? keys : void 0;
+};
+var pointSpan = (event, index) => ({
+	layerId: event.layerId,
+	key: `${event.layerId}:point:${index}`,
+	name: event.title ?? event.layerId,
+	start: event.time,
+	changed: changedOf(event),
+	subtitle: event.subtitle,
+	logType: event.logType,
+	meta: event.meta,
+	events: [event]
+});
+/**
+* Collapses `:start` / `:end` event pairs into spans, passing anything else
+* through as a point span.
+*
+* Pairing is keyed on **layer + groupId + phase name**, never on `groupId`
+* alone: a whole update tick shares one groupId (`runtime/timeline/
+* lifecycle.ts` builds it as `${elementId}:${tick}`), so matching on the id
+* would marry `willUpdate:start` to `performUpdate:end`. Each phase occurs at
+* most once per tick, which makes the triple unique.
+*
+* Unmatched halves survive rather than disappear — the buffer is a bounded
+* ring, so its oldest end and its newest start routinely have no partner, and
+* an update that is still running has a genuinely open span.
+*/
+var toSpans = (events) => {
+	const spans = [];
+	const open = /* @__PURE__ */ new Map();
+	events.forEach((event, index) => {
+		const title = event.title ?? event.layerId;
+		const isStart = title.endsWith(START_SUFFIX);
+		const isEnd = !isStart && title.endsWith(END_SUFFIX);
+		if (event.groupId === void 0 || !isStart && !isEnd) {
+			spans.push(pointSpan(event, index));
+			return;
+		}
+		const name = title.slice(0, -(isStart ? 6 : 4));
+		const key = `${event.layerId}:${event.groupId}:${name}`;
+		if (isStart) {
+			const span = {
+				layerId: event.layerId,
+				key,
+				name,
+				groupId: event.groupId,
+				start: event.time,
+				changed: changedOf(event),
+				subtitle: event.subtitle,
+				logType: event.logType,
+				meta: event.meta,
+				events: [event]
+			};
+			open.set(key, span);
+			spans.push(span);
+			return;
+		}
+		const span = open.get(key);
+		if (span === void 0) {
+			spans.push(pointSpan(event, index));
+			return;
+		}
+		open.delete(key);
+		span.events.push(event);
+		if (event.time >= span.start) {
+			span.end = event.time;
+			span.duration = event.time - span.start;
+		}
+		span.changed ??= changedOf(event);
+	});
+	return spans.sort((a, b) => a.start - b.start);
+};
+/**
+* Groups lifecycle spans into update ticks.
+*
+* `duration` is taken from the `performUpdate` span alone, never from a sum of
+* the phases: `willUpdate` / `update` / `updated` all run *inside*
+* `performUpdate`, so summing counts the same milliseconds several times over.
+*
+* `changed` is the union across the tick's phases because only the phases that
+* receive a `PropertyValues` argument carry it — `performUpdate` takes none,
+* so the bracketing span is always silent about the reason.
+*/
+var toUpdateCycles = (spans) => {
+	const byGroup = /* @__PURE__ */ new Map();
+	for (const span of spans) {
+		const elementId = span.meta?.elementId;
+		if (span.layerId !== LIFECYCLE_LAYER_ID || span.groupId === void 0 || elementId === void 0) continue;
+		const key = String(span.groupId);
+		let cycle = byGroup.get(key);
+		if (cycle === void 0) {
+			cycle = {
+				key,
+				elementId,
+				tagName: span.meta?.tagName ?? "unknown",
+				source: span.meta?.source,
+				start: span.start,
+				changed: [],
+				phases: []
+			};
+			byGroup.set(key, cycle);
+		}
+		cycle.phases.push(span);
+		if (span.start < cycle.start) cycle.start = span.start;
+		if (span.name === ROOT_PHASE) cycle.duration = span.duration;
+		for (const changedKey of span.changed ?? []) if (!cycle.changed.includes(changedKey)) cycle.changed.push(changedKey);
+	}
+	return [...byGroup.values()].sort((a, b) => a.start - b.start);
+};
+/**
+* Totals update cycles per component tag.
+*
+* Grouped by tag rather than by instance because the question this answers is
+* "which *component* re-renders too much" — a list of 200 rows each updating
+* twice is one component's problem, not 200. The instance ids are kept so the
+* caller can still drill in.
+*/
+var rollup = (cycles) => {
+	const byTag = /* @__PURE__ */ new Map();
+	for (const cycle of cycles) {
+		let record = byTag.get(cycle.tagName);
+		if (record === void 0) {
+			record = {
+				entry: {
+					tagName: cycle.tagName,
+					elementIds: [],
+					updates: 0,
+					totalMs: 0,
+					maxMs: 0,
+					reasons: [],
+					source: cycle.source
+				},
+				reasons: /* @__PURE__ */ new Map()
+			};
+			byTag.set(cycle.tagName, record);
+		}
+		const { entry, reasons } = record;
+		entry.updates++;
+		if (!entry.elementIds.includes(cycle.elementId)) entry.elementIds.push(cycle.elementId);
+		entry.source ??= cycle.source;
+		if (cycle.duration !== void 0) {
+			entry.totalMs += cycle.duration;
+			if (cycle.duration > entry.maxMs) entry.maxMs = cycle.duration;
+		}
+		for (const key of cycle.changed) reasons.set(key, (reasons.get(key) ?? 0) + 1);
+	}
+	const entries = [];
+	for (const { entry, reasons } of byTag.values()) {
+		entry.reasons = [...reasons].map(([key, count]) => ({
+			key,
+			count
+		})).sort((a, b) => b.count - a.count || a.key.localeCompare(b.key));
+		entries.push(entry);
+	}
+	return entries.sort((a, b) => b.totalMs - a.totalMs || b.updates - a.updates);
+};
+/**
+* Attributes each update cycle to the input event that preceded it, within
+* `windowMs`.
+*
+* This is what the mouse and keyboard layers are for. On their own they
+* duplicate what the browser's own event log already shows; joined to the
+* updates they precede they answer the question the raw layers only imply —
+* an update with a cause is an interaction, and an update without one is a
+* timer, a signal, or a stray `requestUpdate()`.
+*
+* Returns a new array; cycles with no cause are returned as-is.
+*/
+var attributeInput = (cycles, events, windowMs = 200) => {
+	const inputs = events.filter((event) => INPUT_LAYER_IDS.includes(event.layerId)).sort((a, b) => a.time - b.time);
+	if (inputs.length === 0) return [...cycles];
+	let cursor = 0;
+	return cycles.map((cycle) => {
+		while (cursor + 1 < inputs.length && inputs[cursor + 1].time <= cycle.start) cursor++;
+		const candidate = inputs[cursor];
+		const delta = cycle.start - candidate.time;
+		if (delta < 0 || delta > windowMs) return cycle;
+		return {
+			...cycle,
+			cause: {
+				layerId: candidate.layerId,
+				type: candidate.title ?? candidate.layerId,
+				detail: candidate.subtitle,
+				time: candidate.time
+			}
+		};
+	});
+};
+//#endregion
+//#region src/lib/timeline/filter.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/**
+* Compiles the regex box. An empty box matches everything. A pattern that
+* does not compile (the user is mid-typing `foo(`) disables the filter rather
+* than hiding every row, and is reported as `invalid` so the input can say so.
+*/
+var compileRegex = (source) => {
+	if (source === "") return {
+		re: null,
+		invalid: false
+	};
+	try {
+		return {
+			re: new RegExp(source, "i"),
+			invalid: false
+		};
+	} catch {
+		return {
+			re: null,
+			invalid: true
+		};
+	}
+};
+/** Text the regex filter searches: element tag, name, subtitle and the
+*  changed property keys (the reason is worth searching for by name). */
+var spanHaystack = (span) => `${span.meta?.tagName ?? ""} ${span.name} ${span.subtitle ?? ""} ${(span.changed ?? []).join(" ")}`;
+/**
+* Applies the element and regex filters. `re` comes from {@link compileRegex}
+* so a caller filtering on every keystroke compiles once, not per span.
+*/
+var filterSpans = (spans, elementId, re) => spans.filter((span) => (elementId === null || span.meta?.elementId === elementId) && (re === null || re.test(spanHaystack(span))));
+/** Distinct elements (by stable id) seen across the recorded events. */
+var listElements = (events) => {
+	const seen = /* @__PURE__ */ new Map();
+	for (const ev of events) {
+		const id = ev.meta?.elementId;
+		if (id != null && !seen.has(id)) seen.set(id, ev.meta?.tagName ?? "unknown");
+	}
+	return [...seen].map(([id, tag]) => ({
+		id,
+		tag
+	}));
+};
+//#endregion
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/lib/segmented-tabs.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var SegmentedTabs = class SegmentedTabs extends i$2 {
+	static {
+		this.styles = [tokens, i$5`
+      :host {
+        display: flex;
+        gap: var(--lit-devtools-space-1);
+        align-self: stretch;
+      }
+      button {
+        appearance: none;
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-2);
+        border: 0;
+        background: none;
+        font: inherit;
+        color: var(--lit-devtools-text-muted);
+        padding: 0 var(--lit-devtools-space-5);
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        white-space: nowrap;
+        transition:
+          color var(--lit-devtools-dur-fast) var(--lit-devtools-ease-standard),
+          border-color var(--lit-devtools-dur-fast)
+            var(--lit-devtools-ease-standard),
+          background var(--lit-devtools-dur-fast)
+            var(--lit-devtools-ease-standard);
+      }
+      button:hover {
+        color: var(--lit-devtools-text);
+        background: var(--lit-devtools-surface-hover);
+      }
+      button.active {
+        color: var(--lit-devtools-accent);
+        border-bottom-color: var(--lit-devtools-accent);
+      }
+      button:focus-visible {
+        outline: 2px solid var(--lit-devtools-accent-ring);
+        outline-offset: -2px;
+      }
+      button svg {
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+      }
+      .badge {
+        flex-shrink: 0;
+        min-width: 16px;
+        padding: 0 var(--lit-devtools-space-1);
+        border-radius: var(--lit-devtools-radius-pill);
+        background: var(--lit-devtools-error-soft);
+        color: var(--lit-devtools-error);
+        font-size: var(--lit-devtools-text-xs);
+        line-height: 16px;
+        text-align: center;
+      }
+      :host([size='sm']) button {
+        font-size: var(--lit-devtools-text-xs);
+        padding: 0 var(--lit-devtools-space-4);
+      }
+      :host([size='md']) button,
+      :host(:not([size])) button {
+        font-size: var(--lit-devtools-text-sm);
+        padding: 0 var(--lit-devtools-space-5);
+      }
+    `];
+	}
+	constructor() {
+		super();
+		this.items = [];
+		this.value = "";
+		this.size = "md";
+	}
+	_select(id) {
+		this.value = id;
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: id },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return b`
+      ${this.items.map((item) => b`
+          <button
+            role="tab"
+            aria-selected=${item.id === this.value}
+            class=${item.id === this.value ? "active" : ""}
+            @click=${() => this._select(item.id)}
+          >
+            ${item.icon ? b`<svg
+                    viewBox="0 0 256 256"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path d=${item.icon} />
+                  </svg>` : A}
+            ${item.label}
+            ${item.badge ? b`<span class="badge">${item.badge}</span>` : A}
+          </button>
+        `)}
+    `;
+	}
+};
+__decorate([n$3({ type: Array })], SegmentedTabs.prototype, "items", void 0);
+__decorate([n$3()], SegmentedTabs.prototype, "value", void 0);
+__decorate([n$3()], SegmentedTabs.prototype, "size", void 0);
+SegmentedTabs = __decorate([t$2("segmented-tabs")], SegmentedTabs);
+//#endregion
+//#region src/panel/timeline-layers.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/** A layer's `0xRRGGBB` colour as a CSS hex string. */
+var hexColor = (color) => "#" + color.toString(16).padStart(6, "0");
+/** CSS colour of layer `id`, grey for a layer `layers` does not know. */
+var layerColor = (layers, id) => {
+	const layer = layers.find((l) => l.id === id);
+	return layer ? hexColor(layer.color) : "#888";
+};
+var TimelineLayers = class TimelineLayers extends i$2 {
+	constructor(..._args) {
+		super(..._args);
+		this.layers = [];
+		this.caption = "";
+	}
+	static {
+		this.styles = [tokens, i$5`
+      :host {
+        display: flex;
+        gap: var(--lit-devtools-space-2);
+        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
+        border-bottom: 1px solid var(--lit-devtools-border);
+        background: var(--lit-devtools-surface-low);
+        flex-shrink: 0;
+        flex-wrap: wrap;
+      }
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-2);
+        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-4);
+        border-radius: var(--lit-devtools-radius-pill);
+        background: var(--lit-devtools-surface-elevated);
+        border: 1px solid transparent;
+        color: var(--lit-devtools-text-secondary);
+        font-size: var(--lit-devtools-text-2xs);
+        cursor: pointer;
+        user-select: none;
+        transition: opacity var(--lit-devtools-dur-fast)
+          var(--lit-devtools-ease-standard);
+      }
+      button.on {
+        color: var(--lit-devtools-text);
+      }
+      button:hover {
+        background: var(--lit-devtools-surface-hover);
+      }
+      .caption {
+        align-self: center;
+        color: var(--lit-devtools-text-muted);
+        font-size: var(--lit-devtools-text-2xs);
+        margin-right: var(--lit-devtools-space-2);
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        opacity: 0.4;
+      }
+      button.on .dot {
+        opacity: 1;
+      }
+    `];
+	}
+	_toggle(id) {
+		this.dispatchEvent(new CustomEvent("layer-toggle", {
+			detail: { id },
+			bubbles: true,
+			composed: true
+		}));
 	}
-	reconnected() {
-		this.rt(this.ct);
+	render() {
+		return b`${this.caption ? b`<span class="caption">${this.caption}</span>` : A}${this.layers.map((l) => b`
+        <button
+          class=${l.enabled ? "on" : ""}
+          title=${l.enabled ? `Hide ${l.label}` : `Show ${l.label}`}
+          @click=${() => this._toggle(l.id)}
+        >
+          <span class="dot" style=${"background:" + hexColor(l.color)}></span>
+          ${l.label}
+        </button>
+      `)}`;
 	}
-});
+};
+__decorate([n$3({ type: Array })], TimelineLayers.prototype, "layers", void 0);
+__decorate([n$3()], TimelineLayers.prototype, "caption", void 0);
+TimelineLayers = __decorate([t$2("timeline-layers")], TimelineLayers);
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
 /**
@@ -2223,264 +2607,54 @@ var VirtualizeDirective = class extends f {
 	}
 	update(part, [config]) {
 		this._setFunctions(config);
-		const itemsChanged = this._items !== config.items;
-		this._items = config.items || [];
-		if (this._virtualizer) this._updateVirtualizerConfig(part, config);
-		else this._initialize(part, config);
-		return itemsChanged ? E : this.render();
-	}
-	async _updateVirtualizerConfig(part, config) {
-		if (!await this._virtualizer.updateLayoutConfig(config.layout || {})) {
-			const hostElement = part.parentNode;
-			this._makeVirtualizer(hostElement, config);
-		}
-		this._virtualizer.items = this._items;
-	}
-	_setFunctions(config) {
-		const { renderItem, keyFunction } = config;
-		if (renderItem) this._renderItem = (item, idx) => renderItem(item, idx + this._first);
-		if (keyFunction) this._keyFunction = (item, idx) => keyFunction(item, idx + this._first);
-	}
-	_makeVirtualizer(hostElement, config) {
-		if (this._virtualizer) this._virtualizer.disconnected();
-		const { layout, scroller, items } = config;
-		this._virtualizer = new Virtualizer({
-			hostElement,
-			layout,
-			scroller
-		});
-		this._virtualizer.items = items;
-		this._virtualizer.connected();
-	}
-	_initialize(part, config) {
-		const hostElement = part.parentNode;
-		if (hostElement && hostElement.nodeType === 1) {
-			hostElement.addEventListener("rangeChanged", (e) => {
-				this._first = e.first;
-				this._last = e.last;
-				this.setValue(this.render());
-			});
-			this._makeVirtualizer(hostElement, config);
-		}
-	}
-	disconnected() {
-		this._virtualizer?.disconnected();
-	}
-	reconnected() {
-		this._virtualizer?.connected();
-	}
-};
-var virtualize = e$1(VirtualizeDirective);
-//#endregion
-//#region src/lib/timeline/derive.ts
-/**
-* @license
-* Copyright 2026 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-/** Layer whose events describe Lit update ticks. */
-var LIFECYCLE_LAYER_ID = "lit-lifecycle";
-/** Layers whose events are developer input, for {@link attributeInput}. */
-var INPUT_LAYER_IDS = ["mouse", "keyboard"];
-/** The phase that brackets an entire update tick. */
-var ROOT_PHASE = "performUpdate";
-var START_SUFFIX = ":start";
-var END_SUFFIX = ":end";
-/** Reads `data.changed` defensively — `data` is `unknown` on the wire. */
-var changedOf = (event) => {
-	const data = event.data;
-	if (data === null || typeof data !== "object") return void 0;
-	const changed = data.changed;
-	if (!Array.isArray(changed)) return void 0;
-	const keys = changed.filter((key) => typeof key === "string");
-	return keys.length > 0 ? keys : void 0;
-};
-var pointSpan = (event, index) => ({
-	layerId: event.layerId,
-	key: `${event.layerId}:point:${index}`,
-	name: event.title ?? event.layerId,
-	start: event.time,
-	changed: changedOf(event),
-	subtitle: event.subtitle,
-	logType: event.logType,
-	meta: event.meta,
-	events: [event]
-});
-/**
-* Collapses `:start` / `:end` event pairs into spans, passing anything else
-* through as a point span.
-*
-* Pairing is keyed on **layer + groupId + phase name**, never on `groupId`
-* alone: a whole update tick shares one groupId (`runtime/timeline/
-* lifecycle.ts` builds it as `${elementId}:${tick}`), so matching on the id
-* would marry `willUpdate:start` to `performUpdate:end`. Each phase occurs at
-* most once per tick, which makes the triple unique.
-*
-* Unmatched halves survive rather than disappear — the buffer is a bounded
-* ring, so its oldest end and its newest start routinely have no partner, and
-* an update that is still running has a genuinely open span.
-*/
-var toSpans = (events) => {
-	const spans = [];
-	const open = /* @__PURE__ */ new Map();
-	events.forEach((event, index) => {
-		const title = event.title ?? event.layerId;
-		const isStart = title.endsWith(START_SUFFIX);
-		const isEnd = !isStart && title.endsWith(END_SUFFIX);
-		if (event.groupId === void 0 || !isStart && !isEnd) {
-			spans.push(pointSpan(event, index));
-			return;
-		}
-		const name = title.slice(0, -(isStart ? 6 : 4));
-		const key = `${event.layerId}:${event.groupId}:${name}`;
-		if (isStart) {
-			const span = {
-				layerId: event.layerId,
-				key,
-				name,
-				groupId: event.groupId,
-				start: event.time,
-				changed: changedOf(event),
-				subtitle: event.subtitle,
-				logType: event.logType,
-				meta: event.meta,
-				events: [event]
-			};
-			open.set(key, span);
-			spans.push(span);
-			return;
-		}
-		const span = open.get(key);
-		if (span === void 0) {
-			spans.push(pointSpan(event, index));
-			return;
-		}
-		open.delete(key);
-		span.events.push(event);
-		if (event.time >= span.start) {
-			span.end = event.time;
-			span.duration = event.time - span.start;
-		}
-		span.changed ??= changedOf(event);
-	});
-	return spans.sort((a, b) => a.start - b.start);
-};
-/**
-* Groups lifecycle spans into update ticks.
-*
-* `duration` is taken from the `performUpdate` span alone, never from a sum of
-* the phases: `willUpdate` / `update` / `updated` all run *inside*
-* `performUpdate`, so summing counts the same milliseconds several times over.
-*
-* `changed` is the union across the tick's phases because only the phases that
-* receive a `PropertyValues` argument carry it — `performUpdate` takes none,
-* so the bracketing span is always silent about the reason.
-*/
-var toUpdateCycles = (spans) => {
-	const byGroup = /* @__PURE__ */ new Map();
-	for (const span of spans) {
-		const elementId = span.meta?.elementId;
-		if (span.layerId !== LIFECYCLE_LAYER_ID || span.groupId === void 0 || elementId === void 0) continue;
-		const key = String(span.groupId);
-		let cycle = byGroup.get(key);
-		if (cycle === void 0) {
-			cycle = {
-				key,
-				elementId,
-				tagName: span.meta?.tagName ?? "unknown",
-				source: span.meta?.source,
-				start: span.start,
-				changed: [],
-				phases: []
-			};
-			byGroup.set(key, cycle);
-		}
-		cycle.phases.push(span);
-		if (span.start < cycle.start) cycle.start = span.start;
-		if (span.name === ROOT_PHASE) cycle.duration = span.duration;
-		for (const changedKey of span.changed ?? []) if (!cycle.changed.includes(changedKey)) cycle.changed.push(changedKey);
-	}
-	return [...byGroup.values()].sort((a, b) => a.start - b.start);
-};
-/**
-* Totals update cycles per component tag.
-*
-* Grouped by tag rather than by instance because the question this answers is
-* "which *component* re-renders too much" — a list of 200 rows each updating
-* twice is one component's problem, not 200. The instance ids are kept so the
-* caller can still drill in.
-*/
-var rollup = (cycles) => {
-	const byTag = /* @__PURE__ */ new Map();
-	for (const cycle of cycles) {
-		let record = byTag.get(cycle.tagName);
-		if (record === void 0) {
-			record = {
-				entry: {
-					tagName: cycle.tagName,
-					elementIds: [],
-					updates: 0,
-					totalMs: 0,
-					maxMs: 0,
-					reasons: [],
-					source: cycle.source
-				},
-				reasons: /* @__PURE__ */ new Map()
-			};
-			byTag.set(cycle.tagName, record);
+		const itemsChanged = this._items !== config.items;
+		this._items = config.items || [];
+		if (this._virtualizer) this._updateVirtualizerConfig(part, config);
+		else this._initialize(part, config);
+		return itemsChanged ? E : this.render();
+	}
+	async _updateVirtualizerConfig(part, config) {
+		if (!await this._virtualizer.updateLayoutConfig(config.layout || {})) {
+			const hostElement = part.parentNode;
+			this._makeVirtualizer(hostElement, config);
 		}
-		const { entry, reasons } = record;
-		entry.updates++;
-		if (!entry.elementIds.includes(cycle.elementId)) entry.elementIds.push(cycle.elementId);
-		entry.source ??= cycle.source;
-		if (cycle.duration !== void 0) {
-			entry.totalMs += cycle.duration;
-			if (cycle.duration > entry.maxMs) entry.maxMs = cycle.duration;
+		this._virtualizer.items = this._items;
+	}
+	_setFunctions(config) {
+		const { renderItem, keyFunction } = config;
+		if (renderItem) this._renderItem = (item, idx) => renderItem(item, idx + this._first);
+		if (keyFunction) this._keyFunction = (item, idx) => keyFunction(item, idx + this._first);
+	}
+	_makeVirtualizer(hostElement, config) {
+		if (this._virtualizer) this._virtualizer.disconnected();
+		const { layout, scroller, items } = config;
+		this._virtualizer = new Virtualizer({
+			hostElement,
+			layout,
+			scroller
+		});
+		this._virtualizer.items = items;
+		this._virtualizer.connected();
+	}
+	_initialize(part, config) {
+		const hostElement = part.parentNode;
+		if (hostElement && hostElement.nodeType === 1) {
+			hostElement.addEventListener("rangeChanged", (e) => {
+				this._first = e.first;
+				this._last = e.last;
+				this.setValue(this.render());
+			});
+			this._makeVirtualizer(hostElement, config);
 		}
-		for (const key of cycle.changed) reasons.set(key, (reasons.get(key) ?? 0) + 1);
 	}
-	const entries = [];
-	for (const { entry, reasons } of byTag.values()) {
-		entry.reasons = [...reasons].map(([key, count]) => ({
-			key,
-			count
-		})).sort((a, b) => b.count - a.count || a.key.localeCompare(b.key));
-		entries.push(entry);
+	disconnected() {
+		this._virtualizer?.disconnected();
+	}
+	reconnected() {
+		this._virtualizer?.connected();
 	}
-	return entries.sort((a, b) => b.totalMs - a.totalMs || b.updates - a.updates);
-};
-/**
-* Attributes each update cycle to the input event that preceded it, within
-* `windowMs`.
-*
-* This is what the mouse and keyboard layers are for. On their own they
-* duplicate what the browser's own event log already shows; joined to the
-* updates they precede they answer the question the raw layers only imply —
-* an update with a cause is an interaction, and an update without one is a
-* timer, a signal, or a stray `requestUpdate()`.
-*
-* Returns a new array; cycles with no cause are returned as-is.
-*/
-var attributeInput = (cycles, events, windowMs = 200) => {
-	const inputs = events.filter((event) => INPUT_LAYER_IDS.includes(event.layerId)).sort((a, b) => a.time - b.time);
-	if (inputs.length === 0) return [...cycles];
-	let cursor = 0;
-	return cycles.map((cycle) => {
-		while (cursor + 1 < inputs.length && inputs[cursor + 1].time <= cycle.start) cursor++;
-		const candidate = inputs[cursor];
-		const delta = cycle.start - candidate.time;
-		if (delta < 0 || delta > windowMs) return cycle;
-		return {
-			...cycle,
-			cause: {
-				layerId: candidate.layerId,
-				type: candidate.title ?? candidate.layerId,
-				detail: candidate.subtitle,
-				time: candidate.time
-			}
-		};
-	});
 };
+var virtualize = e$1(VirtualizeDirective);
 //#endregion
 //#region node_modules/.pnpm/devframe@1.0.0_@devframes+agentic@1.0.0_cac@7.0.0_srvx@1.0.5/node_modules/devframe/dist/utils/colors.mjs
 function makeColor(open, close) {
@@ -6835,7 +7009,7 @@ async function getDevframeRpcClient(options = {}) {
 		bootstrapAuthSettled = true;
 	});
 	if (connectionMeta.mcp) __vitePreload(async () => {
-		const { setupBrowserAgentRpcBridge } = await import("./browser-agent-rpc-BXhoSh1z-CdtPhBL-.js");
+		const { setupBrowserAgentRpcBridge } = await import("./browser-agent-rpc-BXhoSh1z-DXAVFObe.js");
 		return { setupBrowserAgentRpcBridge };
 	}, [], import.meta.url).then(({ setupBrowserAgentRpcBridge }) => {
 		if (!closed) disposeBrowserAgentBridge = setupBrowserAgentRpcBridge(rpc);
@@ -6881,6 +7055,8 @@ var SOURCE_OVERLAY_EDITORS = [
 ];
 /** localStorage key holding the {@link SettingsOverride}. */
 var SETTINGS_OVERRIDE_LS_KEY = "lit-devtools-overrides";
+/** localStorage key holding the {@link OverrideBaselines}. */
+var OVERRIDE_BASELINES_LS_KEY = "lit-devtools-override-baselines";
 //#endregion
 //#region src/lib/devframe/protocol.ts
 /**
@@ -7023,12 +7199,142 @@ var openInEditor = async (file, line) => {
 	}
 };
 //#endregion
+//#region src/panel/timeline-span-detail.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var TimelineSpanDetail = class TimelineSpanDetail extends i$2 {
+	constructor(..._args) {
+		super(..._args);
+		this.filterable = false;
+	}
+	static {
+		this.styles = [tokens, i$5`
+      :host {
+        display: block;
+        border-top: 1px solid var(--lit-devtools-border);
+        background: var(--lit-devtools-surface-low);
+        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-5);
+        font-size: var(--lit-devtools-text-2xs);
+        font-family: var(--lit-devtools-font-mono);
+        color: var(--lit-devtools-text-secondary);
+        flex-shrink: 0;
+        max-height: 130px;
+        overflow-y: auto;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+      td {
+        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-4)
+          var(--lit-devtools-space-1) 0;
+        vertical-align: top;
+      }
+      .key {
+        color: var(--lit-devtools-text-muted);
+        white-space: nowrap;
+      }
+      .val {
+        color: var(--lit-devtools-text);
+        word-break: break-all;
+      }
+      a {
+        color: var(--lit-devtools-accent);
+        text-decoration: none;
+        cursor: pointer;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .filter-link {
+        margin-left: var(--lit-devtools-space-4);
+        font-size: var(--lit-devtools-text-2xs);
+      }
+    `];
+	}
+	_emit(type, id) {
+		this.dispatchEvent(new CustomEvent(type, {
+			detail: { id },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const row = this.span;
+		if (!row) return A;
+		const { meta } = row;
+		const src = meta?.source;
+		const data = row.events[0]?.data;
+		const id = meta?.elementId;
+		return b`
+      <table>
+        <tr>
+          <td class="key">layer</td>
+          <td class="val">${row.layerId}</td>
+        </tr>
+        <tr>
+          <td class="key">time</td>
+          <td class="val">${row.start.toFixed(3)} ms</td>
+        </tr>
+        ${row.duration !== void 0 ? b`<tr>
+                <td class="key">duration</td>
+                <td class="val">${row.duration.toFixed(3)} ms</td>
+              </tr>` : A}
+        ${row.changed?.length ? b`<tr>
+                <td class="key">changed</td>
+                <td class="val">${row.changed.join(", ")}</td>
+              </tr>` : A}
+        ${meta?.tagName ? b`<tr>
+                <td class="key">element</td>
+                <td class="val">
+                  &lt;${meta.tagName}&gt; #${id}
+                  ${id != null && this.filterable ? b`<a
+                          class="filter-link"
+                          @click=${() => this._emit("element-filter", id)}
+                          >filter</a
+                        >` : A}${id != null ? b`<a
+                          class="filter-link"
+                          title="Open this element in the Components tab"
+                          @click=${() => this._emit("inspect-element", id)}
+                          >inspect</a
+                        >` : A}
+                </td>
+              </tr>` : A}
+        ${src ? b`<tr>
+                <td class="key">source</td>
+                <td class="val">
+                  <a
+                    class="src-link"
+                    title="Open this file in your editor"
+                    @click=${() => openInEditor(src.file, src.line)}
+                    >${src.file}:${src.line}</a
+                  >
+                </td>
+              </tr>` : A}
+        ${data != null ? b`<tr>
+                <td class="key">data</td>
+                <td class="val">${JSON.stringify(data)}</td>
+              </tr>` : A}
+      </table>
+    `;
+	}
+};
+__decorate([n$3({ attribute: false })], TimelineSpanDetail.prototype, "span", void 0);
+__decorate([n$3({ type: Boolean })], TimelineSpanDetail.prototype, "filterable", void 0);
+TimelineSpanDetail = __decorate([t$2("timeline-span-detail")], TimelineSpanDetail);
+//#endregion
 //#region src/panel/timeline-event-list.ts
 /**
 * @license
 * Copyright 2026 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
+var RAW_KEY_PREFIX = "raw:";
+/** Whether `key` names a Raw-mode row rather than a collapsed span. */
+var isRawKey = (key) => key.startsWith(RAW_KEY_PREFIX);
 /**
 * Adapts one raw event to the row shape for the Raw toggle. Deliberately
 * drops `groupId`: pairing is what the collapsed mode is for, and without it
@@ -7036,7 +7342,7 @@ var openInEditor = async (file, line) => {
 */
 var rawRow = (event, index) => ({
 	layerId: event.layerId,
-	key: `raw:${index}`,
+	key: `${RAW_KEY_PREFIX}${index}`,
 	name: event.title ?? event.layerId,
 	start: event.time,
 	subtitle: event.subtitle,
@@ -7054,16 +7360,15 @@ var TimelineEventList = class TimelineEventList extends i$2 {
 	constructor(..._args) {
 		super(..._args);
 		this.events = [];
+		this.spans = [];
 		this.layers = [];
-		this._selectedKey = null;
-		this._elementFilter = null;
-		this._regex = "";
+		this.selectedKey = null;
+		this.elementFilter = null;
+		this.regex = "";
 		this._raw = false;
 		this._scrollRef = e();
-		this._elementsCache = [];
 		this._rowsCache = [];
 		this._visibleCache = [];
-		this._regexInvalid = false;
 	}
 	static {
 		this.styles = [tokens, i$5`
@@ -7083,31 +7388,6 @@ var TimelineEventList = class TimelineEventList extends i$2 {
         color: var(--lit-devtools-text-muted);
         flex-shrink: 0;
       }
-      .filterbar select {
-        background: var(--lit-devtools-surface-elevated);
-        color: var(--lit-devtools-text);
-        border: 1px solid var(--lit-devtools-border-strong);
-        border-radius: var(--lit-devtools-radius-sm);
-        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-3);
-        font-size: var(--lit-devtools-text-2xs);
-        font-family: var(--lit-devtools-font-mono);
-      }
-      .filterbar input.regex {
-        background: var(--lit-devtools-surface-elevated);
-        color: var(--lit-devtools-text);
-        border: 1px solid var(--lit-devtools-border-strong);
-        border-radius: var(--lit-devtools-radius-sm);
-        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-3);
-        font-size: var(--lit-devtools-text-2xs);
-        font-family: var(--lit-devtools-font-mono);
-        min-width: 140px;
-      }
-      .filterbar input.regex::placeholder {
-        color: var(--lit-devtools-text-muted);
-      }
-      .filterbar input.regex.invalid {
-        border-color: var(--lit-devtools-error);
-      }
       .filterbar button {
         background: var(--lit-devtools-surface-elevated);
         color: var(--lit-devtools-text-muted);
@@ -7209,70 +7489,11 @@ var TimelineEventList = class TimelineEventList extends i$2 {
       .dur.open {
         color: var(--lit-devtools-text-muted);
       }
-      .detail {
-        border-top: 1px solid var(--lit-devtools-border);
-        background: var(--lit-devtools-surface-low);
-        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-5);
-        font-size: var(--lit-devtools-text-2xs);
-        font-family: var(--lit-devtools-font-mono);
-        color: var(--lit-devtools-text-secondary);
-        flex-shrink: 0;
-        max-height: 130px;
-        overflow-y: auto;
-      }
-      table {
-        border-collapse: collapse;
-        width: 100%;
-      }
-      td {
-        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-4)
-          var(--lit-devtools-space-1) 0;
-        vertical-align: top;
-      }
-      .key {
-        color: var(--lit-devtools-text-muted);
-        white-space: nowrap;
-      }
-      .val {
-        color: var(--lit-devtools-text);
-        word-break: break-all;
-      }
-      a {
-        color: var(--lit-devtools-accent);
-        text-decoration: none;
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-      .src-link {
-        cursor: pointer;
-      }
-      .filter-link {
-        cursor: pointer;
-        margin-left: var(--lit-devtools-space-4);
-        font-size: var(--lit-devtools-text-2xs);
-      }
     `];
 	}
 	willUpdate(changed) {
-		if (changed.has("events") || changed.has("_raw")) {
-			this._rowsCache = this._raw ? this.events.map(rawRow) : toSpans(this.events);
-			if (this._selectedKey !== null && !this._rowsCache.some((row) => row.key === this._selectedKey)) this._selectedKey = null;
-		}
-		if (changed.has("events")) {
-			this._elementsCache = this._computeElements();
-			if (this._elementFilter !== null && !this.events.some((ev) => ev.meta?.elementId === this._elementFilter)) this._elementFilter = null;
-		}
-		if (changed.has("events") || changed.has("_raw") || changed.has("layers") || changed.has("_elementFilter") || changed.has("_regex")) {
-			let re = null;
-			this._regexInvalid = false;
-			if (this._regex !== "") try {
-				re = new RegExp(this._regex, "i");
-			} catch {
-				this._regexInvalid = true;
-			}
-			this._visibleCache = this._rowsCache.filter((row) => this._isVisible(row) && (re === null || re.test(this._haystack(row))));
-		}
+		if (changed.has("events") || changed.has("spans") || changed.has("_raw")) this._rowsCache = this._raw ? this.events.map(rawRow) : this.spans;
+		if (changed.has("events") || changed.has("spans") || changed.has("_raw") || changed.has("layers") || changed.has("elementFilter") || changed.has("regex")) this._visibleCache = filterSpans(this._rowsCache.filter((row) => this._layerOn(row)), this.elementFilter, compileRegex(this.regex).re);
 	}
 	updated(changed) {
 		if (changed.has("events")) {
@@ -7280,89 +7501,52 @@ var TimelineEventList = class TimelineEventList extends i$2 {
 			if (el) el.scrollTop = el.scrollHeight;
 		}
 	}
-	_colorOf(layerId) {
-		const l = this.layers.find((l) => l.id === layerId);
-		if (!l) return "#888";
-		return "#" + l.color.toString(16).padStart(6, "0");
-	}
-	_isVisible(row) {
-		const l = this.layers.find((l) => l.id === row.layerId);
-		if (l && !l.enabled) return false;
-		if (this._elementFilter !== null && row.meta?.elementId !== this._elementFilter) return false;
-		return true;
-	}
-	/** Distinct elements (by stable id) seen across the recorded events. */
-	_computeElements() {
-		const seen = /* @__PURE__ */ new Map();
-		for (const ev of this.events) {
-			const id = ev.meta?.elementId;
-			if (id != null && !seen.has(id)) seen.set(id, ev.meta?.tagName ?? "unknown");
-		}
-		return [...seen].map(([id, tag]) => ({
-			id,
-			tag
-		}));
-	}
-	_onFilterChange(e) {
-		const v = e.target.value;
-		this._elementFilter = v === "" ? null : Number(v);
-	}
-	/** Ask the panel shell to open the Components tab on this element. */
-	_inspect(id) {
-		this.dispatchEvent(new CustomEvent("inspect-element", {
-			detail: { id },
+	_select(key) {
+		this.dispatchEvent(new CustomEvent("span-select", {
+			detail: { key },
 			bubbles: true,
 			composed: true
 		}));
 	}
-	_onRegexInput(e) {
-		this._regex = e.target.value;
+	/**
+	* Scrolls the selected row into view, or to the newest row when nothing is
+	* selected. `timeline-view` calls this when switching back from Tracks: the
+	* list was hidden while the selection moved, so its own auto-scroll could
+	* not follow.
+	*/
+	reveal() {
+		const el = this._scrollRef.value;
+		if (!el) return;
+		const index = this.selectedKey === null ? -1 : this._visibleCache.findIndex((row) => row.key === this.selectedKey);
+		if (index === -1) {
+			el.scrollTop = el.scrollHeight;
+			return;
+		}
+		const attempt = (left) => {
+			try {
+				el[virtualizerRef]?.element(index)?.scrollIntoView({ block: "center" });
+			} catch {
+				if (left > 0) requestAnimationFrame(() => attempt(left - 1));
+			}
+		};
+		attempt(30);
 	}
-	/** Text searched by the regex filter — element tag, name, subtitle and the
-	*  changed property keys (the reason is worth searching for by name). */
-	_haystack(row) {
-		return `${row.meta?.tagName ?? ""} ${row.name} ${row.subtitle ?? ""} ${(row.changed ?? []).join(" ")}`;
+	_layerOn(row) {
+		const l = this.layers.find((l) => l.id === row.layerId);
+		return !l || l.enabled;
 	}
 	render() {
-		const elements = this._elementsCache;
 		const visible = this._visibleCache;
-		const selected = this._selectedKey === null ? void 0 : this._rowsCache.find((row) => row.key === this._selectedKey);
+		const selected = this.selectedKey === null ? void 0 : this._rowsCache.find((row) => row.key === this.selectedKey);
 		return b`
       ${this.events.length > 0 ? b`
               <div class="filterbar">
-                ${elements.length > 0 ? b`
-                        <span>Element:</span>
-                        <select @change=${this._onFilterChange}>
-                          <option
-                            value=""
-                            ?selected=${this._elementFilter === null}
-                          >
-                            All elements
-                          </option>
-                          ${elements.map((el) => b`
-                              <option
-                                value=${el.id}
-                                ?selected=${this._elementFilter === el.id}
-                              >
-                                &lt;${el.tag}&gt; #${el.id}
-                              </option>
-                            `)}
-                        </select>
-                      ` : A}
-                <input
-                  class="regex ${this._regexInvalid ? "invalid" : ""}"
-                  type="text"
-                  spellcheck="false"
-                  placeholder="filter regex…"
-                  title="Case-insensitive regex matched against element tag, title and subtitle"
-                  .value=${this._regex}
-                  @input=${this._onRegexInput}
-                />
                 <button
                   class=${this._raw ? "on" : ""}
                   title="Show one row per recorded event instead of collapsing start/end pairs"
                   @click=${() => {
 			this._raw = !this._raw;
+			this._select(null);
 		}}
                 >
                   Raw
@@ -7391,22 +7575,23 @@ var TimelineEventList = class TimelineEventList extends i$2 {
 		})}
               </div>
             `}
-      ${selected ? this._renderDetail(selected) : A}
+      ${selected ? b`<timeline-span-detail
+              filterable
+              .span=${selected}
+            ></timeline-span-detail>` : A}
     `;
 	}
 	/** One row of the virtualized list (`virtualize`'s `renderItem`). */
 	_renderRow(row) {
 		return b`
       <div
-        class="row ${this._selectedKey === row.key ? "selected" : ""}"
-        @click=${() => {
-			this._selectedKey = row.key;
-		}}
+        class="row ${this.selectedKey === row.key ? "selected" : ""}"
+        @click=${() => this._select(row.key)}
       >
         <span class="time">${row.start.toFixed(1)}ms</span>
         <span
           class="dot"
-          style=${"background:" + this._colorOf(row.layerId)}
+          style=${"background:" + layerColor(this.layers, row.layerId)}
         ></span>
         <span class="title">${row.name}</span>
         ${row.changed?.length ? b`<span class="changed">${row.changed.join(", ")}</span>` : A}
@@ -7417,75 +7602,571 @@ var TimelineEventList = class TimelineEventList extends i$2 {
       </div>
     `;
 	}
-	_renderDetail(row) {
-		const { meta } = row;
-		const src = meta?.source;
-		const data = row.events[0]?.data;
-		return b`
-      <div class="detail">
-        <table>
-          <tr>
-            <td class="key">layer</td>
-            <td class="val">${row.layerId}</td>
-          </tr>
-          <tr>
-            <td class="key">time</td>
-            <td class="val">${row.start.toFixed(3)} ms</td>
-          </tr>
-          ${row.duration !== void 0 ? b`<tr>
-                  <td class="key">duration</td>
-                  <td class="val">${row.duration.toFixed(3)} ms</td>
-                </tr>` : A}
-          ${row.changed?.length ? b`<tr>
-                  <td class="key">changed</td>
-                  <td class="val">${row.changed.join(", ")}</td>
-                </tr>` : A}
-          ${meta?.tagName ? b`<tr>
-                  <td class="key">element</td>
-                  <td class="val">
-                    &lt;${meta.tagName}&gt; #${meta.elementId}
-                    ${meta.elementId != null ? b`<a
-                              class="filter-link"
-                              @click=${() => {
-			this._elementFilter = meta.elementId;
-		}}
-                              >filter</a
-                            ><a
-                              class="filter-link"
-                              title="Open this element in the Components tab"
-                              @click=${() => this._inspect(meta.elementId)}
-                              >inspect</a
-                            >` : A}
-                  </td>
-                </tr>` : A}
-          ${src ? b`<tr>
-                  <td class="key">source</td>
-                  <td class="val">
-                    <a
-                      class="src-link"
-                      title="Open this file in your editor"
-                      @click=${() => openInEditor(src.file, src.line)}
-                      >${src.file}:${src.line}</a
-                    >
-                  </td>
-                </tr>` : A}
-          ${data != null ? b`<tr>
-                  <td class="key">data</td>
-                  <td class="val">${JSON.stringify(data)}</td>
-                </tr>` : A}
-        </table>
-      </div>
-    `;
-	}
 };
 __decorate([n$3({ type: Array })], TimelineEventList.prototype, "events", void 0);
+__decorate([n$3({ type: Array })], TimelineEventList.prototype, "spans", void 0);
 __decorate([n$3({ type: Array })], TimelineEventList.prototype, "layers", void 0);
-__decorate([r$2()], TimelineEventList.prototype, "_selectedKey", void 0);
-__decorate([r$2()], TimelineEventList.prototype, "_elementFilter", void 0);
-__decorate([r$2()], TimelineEventList.prototype, "_regex", void 0);
+__decorate([n$3({ attribute: false })], TimelineEventList.prototype, "selectedKey", void 0);
+__decorate([n$3({ attribute: false })], TimelineEventList.prototype, "elementFilter", void 0);
+__decorate([n$3({ attribute: false })], TimelineEventList.prototype, "regex", void 0);
 __decorate([r$2()], TimelineEventList.prototype, "_raw", void 0);
 TimelineEventList = __decorate([t$2("timeline-event-list")], TimelineEventList);
 //#endregion
+//#region src/lib/timeline/tracks.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/**
+* Where a span stops occupying its row. A point event occupies only its own
+* instant; a span whose end has not arrived (still running, or its end fell
+* out of the buffer) occupies the rest of the recording, because that is
+* where it is drawn — up to the live edge.
+*/
+var occupiedEnd = (span) => {
+	if (span.end !== void 0) return span.end;
+	return span.groupId === void 0 ? span.start : Infinity;
+};
+/**
+* Groups spans into one track per layer, in `layers` order, then any layer
+* the spans mention that `layers` does not (a custom layer announced after the
+* last `get-meta`), in first-seen order. A layer with no spans still gets an
+* empty track, so a lane does not appear and vanish as events arrive.
+*
+* Within a track, spans are packed greedily: each goes into the first row
+* whose last span has ended by the time it starts. Lit's lifecycle phases
+* nest, so one update tick lands as `performUpdate` on row 0 and
+* `willUpdate` / `update` / `updated` side by side on row 1 — the flame shape
+* falls out of the packing without modelling it.
+*/
+var buildTracks = (spans, layers) => {
+	const byLayer = /* @__PURE__ */ new Map();
+	for (const layer of layers) byLayer.set(layer.id, []);
+	for (const span of spans) {
+		let list = byLayer.get(span.layerId);
+		if (list === void 0) {
+			list = [];
+			byLayer.set(span.layerId, list);
+		}
+		list.push(span);
+	}
+	return [...byLayer].map(([layerId, list]) => ({
+		layerId,
+		rows: packRows(list)
+	}));
+};
+var packRows = (spans) => {
+	const sorted = spans.every((s, i) => i === 0 || spans[i - 1].start <= s.start) ? spans : [...spans].sort((a, b) => a.start - b.start);
+	const rows = [];
+	const rowEnds = [];
+	for (const span of sorted) {
+		let row = rowEnds.findIndex((end) => end <= span.start);
+		if (row === -1) {
+			row = rows.length;
+			rows.push([]);
+			rowEnds.push(-Infinity);
+		}
+		rows[row].push(span);
+		rowEnds[row] = occupiedEnd(span);
+	}
+	return rows;
+};
+/**
+* The recording's time bounds over `spans`: the earliest start, and the
+* latest instant anything is known to have happened (an end, or the start of
+* a span with none). The origin is the earliest start rather than zero
+* because the panel's buffer is capped and rolls its oldest events off; a
+* long recording would otherwise open on an empty stretch.
+*/
+var timeBounds = (spans) => {
+	if (spans.length === 0) return {
+		origin: 0,
+		extent: 0
+	};
+	let origin = Infinity;
+	let last = -Infinity;
+	for (const span of spans) {
+		origin = Math.min(origin, span.start);
+		last = Math.max(last, span.end ?? span.start);
+	}
+	return {
+		origin,
+		extent: last - origin
+	};
+};
+/** Deepest zoom, in multiples of "fit": about a microsecond per pixel on a
+*  second-long recording, past which there is nothing left to separate. */
+var MAX_ZOOM = 1e5;
+/** A recording with a single instant in it still needs a nonzero axis. */
+var MIN_EXTENT_MS = 1;
+/**
+* Builds the scale for a plot `width` pixels wide showing a recording that
+* begins at `originMs` and runs for `extentMs`.
+*
+* `zoom` is a multiple of "fit" (1 shows the whole recording); `pan` is how
+* many milliseconds past the origin the left edge sits. Both are clamped, so
+* callers can apply a raw wheel or drag delta and read back where it landed.
+*/
+var timeScale = (originMs, extentMs, width, zoom = 1, pan = 0) => {
+	const extent = Math.max(extentMs, MIN_EXTENT_MS);
+	const z = clampZoom(zoom);
+	const visibleMs = extent / z;
+	const p = clampPan(pan, extent, z);
+	const pxPerMs = Math.max(width, 1) / visibleMs;
+	const start = originMs + p;
+	return {
+		pxPerMs,
+		start,
+		end: start + visibleMs,
+		toX: (ms) => (ms - start) * pxPerMs,
+		toMs: (x) => start + x / pxPerMs
+	};
+};
+var clampZoom = (zoom) => Math.min(Math.max(Number.isNaN(zoom) ? 1 : zoom, 1), MAX_ZOOM);
+/** Keeps the visible window inside the recording. */
+var clampPan = (pan, extentMs, zoom) => {
+	const extent = Math.max(extentMs, MIN_EXTENT_MS);
+	const max = extent - extent / clampZoom(zoom);
+	return Math.min(Math.max(Number.isNaN(pan) ? 0 : pan, 0), max);
+};
+/** The pan that puts the live edge (the end of the recording) at the right
+*  of the plot, for following a recording in progress. */
+var livePan = (extentMs, zoom) => clampPan(Infinity, extentMs, zoom);
+/**
+* Zooms by `factor` while keeping the millisecond under pixel `x` where it
+* is, which is what a wheel over a timeline is expected to do.
+*/
+var zoomAt = (originMs, extentMs, width, zoom, pan, x, factor) => {
+	const anchor = timeScale(originMs, extentMs, width, zoom, pan).toMs(x);
+	const nextZoom = clampZoom(clampZoom(zoom) * factor);
+	const after = timeScale(originMs, extentMs, width, nextZoom, 0);
+	return {
+		zoom: nextZoom,
+		pan: clampPan(anchor - originMs - x / after.pxPerMs, extentMs, nextZoom)
+	};
+};
+/**
+* Index range `[from, to)` of the spans in `row` that intersect the window
+* `[start, end]`, found by binary search so a zoomed-in lane renders a
+* handful of marks rather than walking thousands.
+*
+* Only the span just before the first one starting inside the window can
+* reach into it, because a row's spans never overlap.
+*/
+var visibleRange = (row, start, end) => {
+	const firstAtOrAfter = (t, inclusive) => {
+		let lo = 0;
+		let hi = row.length;
+		while (lo < hi) {
+			const mid = lo + hi >> 1;
+			const s = row[mid].start;
+			if (inclusive ? s < t : s <= t) lo = mid + 1;
+			else hi = mid;
+		}
+		return lo;
+	};
+	let from = firstAtOrAfter(start, true);
+	if (from > 0 && occupiedEnd(row[from - 1]) >= start) from--;
+	const to = firstAtOrAfter(end, false);
+	return [from, Math.max(from, to)];
+};
+/**
+* A round tick interval (1, 2 or 5 times a power of ten, in milliseconds) at
+* least `minMs` long, for axis labels that land on readable numbers.
+*/
+var niceStep = (minMs) => {
+	if (!(minMs > 0) || !Number.isFinite(minMs)) return 1;
+	const pow = 10 ** Math.floor(Math.log10(minMs));
+	for (const m of [
+		1,
+		2,
+		5,
+		10
+	]) if (m * pow >= minMs) return m * pow;
+	return 10 * pow;
+};
+//#endregion
+//#region src/panel/timeline-tracks.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/** Height of one packed row inside a lane. */
+var ROW_PX = 14;
+/** Marks narrower than this draw as a fixed-width tick, so sub-millisecond
+*  Lit phases stay visible at any zoom. */
+var MIN_MARK_PX = 2;
+/** Rough spacing between axis labels. */
+var TICK_PX = 90;
+/** A pointer that moves less than this between down and up was a click. */
+var DRAG_SLOP_PX = 3;
+var formatAxis = (ms, step) => step >= 1e3 ? `${(ms / 1e3).toFixed(step >= 1e4 ? 0 : 1)}s` : `${ms.toFixed(step >= 1 ? 0 : step >= .1 ? 1 : 2)}ms`;
+var describe = (span) => {
+	const parts = [span.name];
+	if (span.subtitle) parts.push(span.subtitle);
+	parts.push(`@ ${span.start.toFixed(2)}ms`);
+	if (span.duration !== void 0) parts.push(`${span.duration.toFixed(3)}ms`);
+	else if (span.groupId !== void 0) parts.push("still open");
+	return parts.join(" · ");
+};
+var TimelineTracks = class TimelineTracks extends i$2 {
+	constructor(..._args) {
+		super(..._args);
+		this.spans = [];
+		this.layers = [];
+		this.selectedKey = null;
+		this.visibleTracks = [];
+		this.recording = false;
+		this._zoom = 1;
+		this._pan = 0;
+		this._follow = true;
+		this._width = 0;
+		this._ticksRef = e();
+		this._resize = null;
+		this._observed = null;
+		this._tracks = [];
+		this._visibleSpans = [];
+		this._bounds = {
+			origin: 0,
+			extent: 0
+		};
+		this._drag = null;
+		this._suppressClick = false;
+	}
+	static {
+		this.styles = [tokens, i$5`
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+        font-size: var(--lit-devtools-text-2xs);
+        font-family: var(--lit-devtools-font-mono);
+        --gutter: 120px;
+      }
+      .axis,
+      .lane {
+        display: flex;
+      }
+      .axis {
+        flex-shrink: 0;
+        height: 20px;
+        border-bottom: 1px solid var(--lit-devtools-border);
+        color: var(--lit-devtools-text-muted);
+      }
+      .gutter {
+        flex: 0 0 var(--gutter);
+        box-sizing: border-box;
+        padding: 0 var(--lit-devtools-space-4);
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-2);
+        overflow: hidden;
+        white-space: nowrap;
+        border-right: 1px solid var(--lit-devtools-border);
+      }
+      .ticks {
+        position: relative;
+        flex: 1;
+        overflow: hidden;
+      }
+      .tick-label {
+        position: absolute;
+        top: 3px;
+        padding-left: var(--lit-devtools-space-2);
+        border-left: 1px solid var(--lit-devtools-border-strong);
+        white-space: nowrap;
+      }
+      .lanes {
+        flex: 1;
+        overflow-y: auto;
+        cursor: grab;
+        user-select: none;
+        touch-action: none;
+      }
+      .lanes.dragging {
+        cursor: grabbing;
+      }
+      .lane {
+        border-bottom: 1px solid var(--lit-devtools-border);
+      }
+      .lane .gutter {
+        color: var(--lit-devtools-text-secondary);
+        cursor: default;
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .plot {
+        flex: 1;
+        min-width: 0;
+        max-height: calc(8 * ${ROW_PX}px);
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+      .rows {
+        position: relative;
+      }
+      .mark {
+        position: absolute;
+        box-sizing: border-box;
+        height: ${11}px;
+        margin-top: 1px;
+        border-radius: 2px;
+        opacity: 0.85;
+        overflow: hidden;
+        white-space: nowrap;
+        color: var(--lit-devtools-surface-low);
+        font-size: 9px;
+        line-height: ${11}px;
+        padding: 0 2px;
+        cursor: pointer;
+      }
+      .mark.tick {
+        padding: 0;
+      }
+      .mark.open {
+        opacity: 0.45;
+      }
+      .mark:hover {
+        opacity: 1;
+      }
+      .mark.selected {
+        opacity: 1;
+        outline: 2px solid var(--lit-devtools-text);
+        outline-offset: 0;
+        z-index: 1;
+      }
+      .mark:focus-visible {
+        outline: 2px solid var(--lit-devtools-accent-ring);
+        z-index: 1;
+      }
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        gap: var(--lit-devtools-space-4);
+        color: var(--lit-devtools-text-muted);
+        font-family: var(--lit-devtools-font-sans);
+        font-size: var(--lit-devtools-text-xs);
+      }
+    `];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resize?.disconnect();
+		this._resize = null;
+		this._observed = null;
+	}
+	updated() {
+		const el = this._ticksRef.value ?? null;
+		if (el === this._observed) return;
+		this._resize?.disconnect();
+		this._observed = el;
+		if (!el) return;
+		this._resize ??= new ResizeObserver(() => {
+			this._width = this._observed?.clientWidth ?? 0;
+		});
+		this._resize.observe(el);
+	}
+	willUpdate(changed) {
+		if (changed.has("spans") || changed.has("layers") || changed.has("visibleTracks")) {
+			const shown = new Set(this.visibleTracks);
+			this._visibleSpans = this.spans.filter((s) => shown.has(s.layerId));
+			this._tracks = buildTracks(this._visibleSpans, this.layers).filter((t) => shown.has(t.layerId));
+			this._bounds = timeBounds(this._visibleSpans);
+		}
+	}
+	_scale() {
+		const { origin, extent } = this._bounds;
+		const pan = this._follow && this.recording ? livePan(extent, this._zoom) : this._pan;
+		return timeScale(origin, extent, this._width, this._zoom, pan);
+	}
+	/** Commit a zoom/pan, and keep following only if it still ends at the live
+	*  edge. */
+	_setView(zoom, pan) {
+		const { extent } = this._bounds;
+		this._zoom = clampZoom(zoom);
+		this._pan = clampPan(pan, extent, this._zoom);
+		this._follow = this._pan >= livePan(extent, this._zoom) - 1e-9;
+	}
+	_currentPan() {
+		return this._scale().start - this._bounds.origin;
+	}
+	_onWheel(e) {
+		if (this._width === 0 || this._visibleSpans.length === 0) return;
+		const plot = this._ticksRef.value;
+		if (!plot) return;
+		const x = e.clientX - plot.getBoundingClientRect().left;
+		if (x < 0) return;
+		e.preventDefault();
+		const { origin, extent } = this._bounds;
+		const pan = this._currentPan();
+		if (Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.shiftKey) {
+			const delta = e.shiftKey ? e.deltaY : e.deltaX;
+			const scale = this._scale();
+			this._setView(this._zoom, pan + delta / scale.pxPerMs);
+			return;
+		}
+		const factor = Math.exp(-e.deltaY * .002);
+		const next = zoomAt(origin, extent, this._width, this._zoom, pan, x, factor);
+		this._setView(next.zoom, next.pan);
+	}
+	_onPointerDown(e) {
+		if (e.button !== 0) return;
+		this._drag = {
+			x: e.clientX,
+			pan: this._currentPan(),
+			moved: false
+		};
+	}
+	_onPointerMove(e) {
+		const drag = this._drag;
+		if (!drag) return;
+		const dx = e.clientX - drag.x;
+		if (!drag.moved && Math.abs(dx) < DRAG_SLOP_PX) return;
+		if (!drag.moved) {
+			drag.moved = true;
+			e.currentTarget.setPointerCapture(e.pointerId);
+			this.requestUpdate();
+		}
+		this._setView(this._zoom, drag.pan - dx / this._scale().pxPerMs);
+	}
+	_onPointerUp() {
+		if (this._drag?.moved) {
+			this._suppressClick = true;
+			setTimeout(() => this._suppressClick = false);
+			this.requestUpdate();
+		}
+		this._drag = null;
+	}
+	_refit() {
+		this._zoom = 1;
+		this._pan = 0;
+		this._follow = true;
+	}
+	_select(key) {
+		if (this._suppressClick) return;
+		this.dispatchEvent(new CustomEvent("span-select", {
+			detail: { key },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const selected = this.selectedSpan;
+		const detail = selected ? b`<timeline-span-detail
+          filterable
+          .span=${selected}
+        ></timeline-span-detail>` : A;
+		if (this._tracks.length === 0) return b`<div class="empty">
+          ${this.visibleTracks.length === 0 ? "No tracks shown. Pick some above." : "No events recorded."}
+        </div>
+        ${detail}`;
+		const scale = this._scale();
+		return b`
+      <div class="axis">
+        <div class="gutter"></div>
+        <div class="ticks" ${n(this._ticksRef)}>
+          ${this._width > 0 ? this._renderTicks(scale) : A}
+        </div>
+      </div>
+      <div
+        class="lanes ${this._drag?.moved ? "dragging" : ""}"
+        title="Wheel to zoom, drag to pan, double-click to fit"
+        @wheel=${this._onWheel}
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+        @pointerup=${this._onPointerUp}
+        @pointercancel=${this._onPointerUp}
+        @dblclick=${this._refit}
+      >
+        ${this._tracks.map((track) => this._renderLane(track, scale))}
+      </div>
+      ${detail}
+    `;
+	}
+	_renderTicks(scale) {
+		const step = niceStep(TICK_PX / scale.pxPerMs);
+		const labels = [];
+		for (let t = Math.ceil(scale.start / step) * step; t <= scale.end && labels.length < 200; t += step) labels.push(b`<span class="tick-label" style="left:${scale.toX(t)}px"
+          >${formatAxis(t, step)}</span
+        >`);
+		return labels;
+	}
+	_renderLane(track, scale) {
+		const layer = this.layers.find((l) => l.id === track.layerId);
+		const color = layerColor(this.layers, track.layerId);
+		const rows = Math.max(track.rows.length, 1);
+		return b`
+      <div class="lane">
+        <div class="gutter" title=${layer?.label ?? track.layerId}>
+          <span class="dot" style="background:${color}"></span>
+          ${layer?.label ?? track.layerId}
+        </div>
+        <div class="plot">
+          <div class="rows" style="height:${rows * ROW_PX}px">
+            ${this._width > 0 ? track.rows.map((row, i) => this._renderRow(row, i, scale, color)) : A}
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	_renderRow(row, rowIndex, scale, color) {
+		const [from, to] = visibleRange(row, scale.start, scale.end);
+		const liveEdge = this._bounds.origin + this._bounds.extent;
+		const marks = [];
+		let lastTickPx = -Infinity;
+		for (let i = from; i < to; i++) {
+			const span = row[i];
+			const open = span.end === void 0 && span.groupId !== void 0;
+			const x0 = scale.toX(span.start);
+			const x1 = scale.toX(span.end ?? (open ? liveEdge : span.start));
+			const isTick = x1 - x0 < MIN_MARK_PX;
+			const selected = span.key === this.selectedKey;
+			if (isTick && !selected && Math.round(x0) === lastTickPx) continue;
+			if (isTick) lastTickPx = Math.round(x0);
+			const left = Math.max(x0, -1);
+			const width = isTick ? MIN_MARK_PX : Math.min(x1, this._width + 1) - left;
+			marks.push(b`<div
+        class="mark ${isTick ? "tick" : ""} ${open ? "open" : ""} ${selected ? "selected" : ""}"
+        role="button"
+        tabindex="0"
+        title=${describe(span)}
+        style="left:${left}px;width:${width}px;top:${rowIndex * ROW_PX}px;background:${color}"
+        @click=${() => this._select(span.key)}
+        @keydown=${(e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					this._select(span.key);
+				}
+			}}
+      >
+        ${isTick || width < 40 ? A : span.name}
+      </div>`);
+		}
+		return marks;
+	}
+};
+__decorate([n$3({ type: Array })], TimelineTracks.prototype, "spans", void 0);
+__decorate([n$3({ type: Array })], TimelineTracks.prototype, "layers", void 0);
+__decorate([n$3({ attribute: false })], TimelineTracks.prototype, "selectedKey", void 0);
+__decorate([n$3({ attribute: false })], TimelineTracks.prototype, "selectedSpan", void 0);
+__decorate([n$3({ type: Array })], TimelineTracks.prototype, "visibleTracks", void 0);
+__decorate([n$3({ type: Boolean })], TimelineTracks.prototype, "recording", void 0);
+__decorate([r$2()], TimelineTracks.prototype, "_zoom", void 0);
+__decorate([r$2()], TimelineTracks.prototype, "_pan", void 0);
+__decorate([r$2()], TimelineTracks.prototype, "_follow", void 0);
+__decorate([r$2()], TimelineTracks.prototype, "_width", void 0);
+TimelineTracks = __decorate([t$2("timeline-tracks")], TimelineTracks);
+//#endregion
 //#region src/panel/timeline-store.ts
 /**
 * @license
@@ -7514,6 +8195,47 @@ TimelineEventList = __decorate([t$2("timeline-event-list")], TimelineEventList);
 * recent events; older ones scroll off.
 */
 var MAX_EVENTS = 5e3;
+/**
+* sessionStorage key for the id of the newest event Clear (or a fresh
+* recording) threw away. A reloaded panel is refilled from the node's
+* `timeline-history`, which Clear does not touch (agents still read the same
+* buffer through `recent-events`), so without this a reload would resurrect
+* everything the developer cleared. sessionStorage, not a module variable:
+* the point is to survive the reload. Ids are `${epoch}-${seq}` with a seq
+* that never resets across Clear (see `devframe/definition.ts`).
+*/
+var CLEARED_THROUGH_KEY = "lit-devtools:timeline-cleared-through";
+var parseEventId = (id) => {
+	if (id === void 0) return void 0;
+	const cut = id.lastIndexOf("-");
+	const seq = Number(id.slice(cut + 1));
+	return cut > 0 && Number.isInteger(seq) ? {
+		epoch: id.slice(0, cut),
+		seq
+	} : void 0;
+};
+var readClearedThrough = () => {
+	try {
+		return parseEventId(sessionStorage.getItem(CLEARED_THROUGH_KEY) ?? void 0);
+	} catch {
+		return;
+	}
+};
+var rememberClearedThrough = (id) => {
+	try {
+		sessionStorage.setItem(CLEARED_THROUGH_KEY, id);
+	} catch {}
+};
+/** Drops events at or before the cleared-through mark. A mark from another
+*  epoch belongs to an earlier dev server and says nothing about these ids. */
+var withoutCleared = (batch) => {
+	const mark = readClearedThrough();
+	if (mark === void 0) return batch;
+	return batch.filter((event) => {
+		const id = parseEventId(event.id);
+		return id === void 0 || id.epoch !== mark.epoch || id.seq > mark.seq;
+	});
+};
 var events = [];
 var error = null;
 var started = false;
@@ -7528,6 +8250,8 @@ var getTimelineEvents = () => events;
 var getTimelineError = () => error;
 var clearTimelineEvents = () => {
 	if (events.length === 0) return;
+	const newest = events[events.length - 1].id;
+	if (newest !== void 0) rememberClearedThrough(newest);
 	events = [];
 	notify$1();
 };
@@ -7553,8 +8277,16 @@ var start = async () => {
 			return;
 		}
 		const reader = rpc.rpc.streaming.subscribe(meta.stream.channel, meta.stream.id, { highWaterMark: 4096 });
+		const seeded = withoutCleared(await rpc.rpc.call("timeline-history").catch(() => [])).slice(-5e3);
+		const seededIds = new Set(seeded.map((event) => event.id));
+		if (seeded.length > 0) {
+			events = seeded;
+			notify$1();
+		}
 		for await (const batch of reader) {
-			const next = [...events, ...batch];
+			const fresh = withoutCleared(batch).filter((event) => event.id === void 0 || !seededIds.has(event.id));
+			if (fresh.length === 0) continue;
+			const next = [...events, ...fresh];
 			events = next.length > MAX_EVENTS ? next.slice(-5e3) : next;
 			notify$1();
 		}
@@ -7570,15 +8302,63 @@ var start = async () => {
 * Copyright 2026 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
+/** localStorage key remembering List vs Tracks. */
+var MODE_LS_KEY = "lit-devtools-timeline-mode";
+/** localStorage key remembering which tracks the user hid. Stored as the
+*  hidden set, not the shown one, so a layer seen for the first time (a
+*  custom layer, a new built-in) gets a track by default. */
+var HIDDEN_TRACKS_LS_KEY = "lit-devtools-timeline-hidden-tracks";
+var MODE_TABS = [{
+	id: "list",
+	label: "List"
+}, {
+	id: "tracks",
+	label: "Tracks"
+}];
+var readMode = () => {
+	try {
+		return localStorage.getItem(MODE_LS_KEY) === "tracks" ? "tracks" : "list";
+	} catch {
+		return "list";
+	}
+};
+var readHiddenTracks = () => {
+	try {
+		const parsed = JSON.parse(localStorage.getItem(HIDDEN_TRACKS_LS_KEY) ?? "[]");
+		return new Set(Array.isArray(parsed) ? parsed.filter((id) => typeof id === "string") : []);
+	} catch {
+		return /* @__PURE__ */ new Set();
+	}
+};
+var store = (key, value) => {
+	try {
+		localStorage.setItem(key, value);
+	} catch {}
+};
 var TimelineView = class TimelineView extends i$2 {
 	constructor(..._args) {
 		super(..._args);
 		this._recording = false;
+		this._sessionSeen = false;
 		this._exporting = false;
 		this._exportNote = null;
 		this._events = [];
 		this._layers = [];
 		this._error = null;
+		this._mode = readMode();
+		this._hiddenTracks = readHiddenTracks();
+		this._selectedKey = null;
+		this._elementFilter = null;
+		this._regex = "";
+		this._spans = [];
+		this._spansOf = null;
+		this._elements = [];
+		this._filteredSpans = [];
+		this._pendingEventId = null;
+		this._revealSelection = false;
+		this._pendingSettled = false;
+		this._listRef = e();
+		this._visibleTracks = [];
 		this._baseLayers = [];
 		this._rpc = null;
 		this._sessionOff = null;
@@ -7633,10 +8413,47 @@ var TimelineView = class TimelineView extends i$2 {
         background: var(--lit-devtools-error-soft);
         color: var(--lit-devtools-error);
       }
-      timeline-event-list {
+      .toolbar segmented-tabs {
+        align-self: stretch;
+        margin: calc(-1 * var(--lit-devtools-space-3)) 0;
+      }
+      .filterbar {
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-3);
+        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-5);
+        border-bottom: 1px solid var(--lit-devtools-border);
+        font-size: var(--lit-devtools-text-2xs);
+        color: var(--lit-devtools-text-muted);
+        flex-shrink: 0;
+      }
+      .filterbar select,
+      .filterbar input.regex {
+        background: var(--lit-devtools-surface-elevated);
+        color: var(--lit-devtools-text);
+        border: 1px solid var(--lit-devtools-border-strong);
+        border-radius: var(--lit-devtools-radius-sm);
+        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-3);
+        font-size: var(--lit-devtools-text-2xs);
+        font-family: var(--lit-devtools-font-mono);
+      }
+      .filterbar input.regex {
+        min-width: 140px;
+      }
+      .filterbar input.regex::placeholder {
+        color: var(--lit-devtools-text-muted);
+      }
+      .filterbar input.regex.invalid {
+        border-color: var(--lit-devtools-error);
+      }
+      timeline-event-list,
+      timeline-tracks {
         flex: 1;
         overflow: hidden;
       }
+      [hidden] {
+        display: none !important;
+      }
       .error {
         padding: var(--lit-devtools-space-5);
         color: var(--lit-devtools-text-secondary);
@@ -7659,6 +8476,60 @@ var TimelineView = class TimelineView extends i$2 {
 		this._storeOff?.();
 		this._storeOff = null;
 	}
+	willUpdate(changed) {
+		if (changed.has("_layers") || changed.has("_hiddenTracks")) this._visibleTracks = this._layers.filter((l) => l.enabled && !this._hiddenTracks.has(l.id)).map((l) => l.id);
+		if (this._events !== this._spansOf) {
+			this._spansOf = this._events;
+			this._spans = toSpans(this._events);
+			this._elements = listElements(this._events);
+			if (this._elementFilter !== null && !this._elements.some((el) => el.id === this._elementFilter)) this._elementFilter = null;
+			const key = this._selectedKey;
+			if (key !== null && !isRawKey(key) && !this._spans.some((s) => s.key === key)) this._selectedKey = null;
+			this._applyPendingEvent();
+		}
+		if (changed.has("_events") || changed.has("_elementFilter") || changed.has("_regex")) this._filteredSpans = filterSpans(this._spans, this._elementFilter, compileRegex(this._regex).re);
+	}
+	/**
+	* Select the span a deep link named. Its start event is the natural target
+	* (`span.events[0]`), but any of the span's events matches, so a link to
+	* either half of a pair lands on the same row.
+	*
+	* An id the buffer does not hold — evicted, or from another session — ends
+	* with no selection and no error, once there are events to have looked in.
+	*/
+	selectEvent(id) {
+		this._pendingEventId = id;
+		this._applyPendingEvent();
+		this.requestUpdate();
+	}
+	_applyPendingEvent() {
+		const id = this._pendingEventId;
+		if (id === null || this._spans.length === 0) return;
+		const span = this._spans.find((s) => s.events.some((e) => e.id === id));
+		this._pendingEventId = null;
+		this._pendingSettled = true;
+		this._selectedKey = span?.key ?? null;
+		if (span !== void 0) this._revealSelection = true;
+	}
+	/** Id of the selected span's start event, for the shell's URL sync. While a
+	*  linked id is still waiting on the store it is reported as-is, so the
+	*  address bar does not drop it before the events land. */
+	get selectedEventId() {
+		if (this._pendingEventId !== null) return this._pendingEventId;
+		const key = this._selectedKey;
+		if (key === null) return null;
+		return this._spans.find((s) => s.key === key)?.events[0]?.id ?? null;
+	}
+	updated(changed) {
+		if (this._revealSelection) {
+			this._revealSelection = false;
+			this.updateComplete.then(() => this._listRef.value?.updateComplete).then(() => this._listRef.value?.reveal());
+		}
+		if (changed.has("_selectedKey") || this._pendingSettled) {
+			this._pendingSettled = false;
+			this.dispatchEvent(new CustomEvent("selection-change"));
+		}
+	}
 	_readStore() {
 		if (!this._active) return;
 		this._events = getTimelineEvents();
@@ -7690,7 +8561,8 @@ var TimelineView = class TimelineView extends i$2 {
 	*  to the recording flag and merged layer list. */
 	_applySession(state) {
 		const { recordingState } = state.layers;
-		if (recordingState && !this._recording) clearTimelineEvents();
+		if (this._sessionSeen && recordingState && !this._recording) clearTimelineEvents();
+		this._sessionSeen = true;
 		this._recording = recordingState;
 		this._layers = this._mergeLayers(state.layers, state.customLayers);
 	}
@@ -7745,10 +8617,46 @@ var TimelineView = class TimelineView extends i$2 {
 			console.warn("[lit-devtools] toggle-layer failed", err);
 		});
 	}
+	_onModeChange(e) {
+		e.stopPropagation();
+		this._mode = e.detail.value === "tracks" ? "tracks" : "list";
+		store(MODE_LS_KEY, this._mode);
+		if (this._mode === "list") this.updateComplete.then(() => this._listRef.value?.reveal());
+	}
+	_onTrackToggle(e) {
+		e.stopPropagation();
+		const hidden = new Set(this._hiddenTracks);
+		if (!hidden.delete(e.detail.id)) hidden.add(e.detail.id);
+		this._hiddenTracks = hidden;
+		store(HIDDEN_TRACKS_LS_KEY, JSON.stringify([...hidden]));
+	}
+	_onElementSelect(e) {
+		const v = e.target.value;
+		this._elementFilter = v === "" ? null : Number(v);
+	}
+	_onRegexInput(e) {
+		this._regex = e.target.value;
+	}
+	/** The detail pane's **filter** link. */
+	_onElementFilter(e) {
+		this._elementFilter = e.detail.id;
+	}
+	_onSpanSelect(e) {
+		this._pendingEventId = null;
+		this._selectedKey = e.detail.key;
+	}
 	render() {
 		if (this._error !== null) return b`<div class="error">${this._error}</div>`;
+		const tracks = this._mode === "tracks";
+		const captured = this._layers.filter((l) => l.enabled);
 		return b`
       <div class="toolbar">
+        <segmented-tabs
+          size="sm"
+          .items=${MODE_TABS}
+          .value=${this._mode}
+          @change=${this._onModeChange}
+        ></segmented-tabs>
         ${this._exportNote === null ? A : b`<span class="export-note">${this._exportNote}</span>`}
         <span class="spacer"></span>
         <button
@@ -7770,10 +8678,67 @@ var TimelineView = class TimelineView extends i$2 {
         .layers=${this._layers}
         @layer-toggle=${this._onLayerToggle}
       ></timeline-layers>
+      ${tracks ? b`<timeline-layers
+              caption="Tracks"
+              .layers=${captured.map((l) => ({
+			...l,
+			enabled: !this._hiddenTracks.has(l.id)
+		}))}
+              @layer-toggle=${this._onTrackToggle}
+            ></timeline-layers>` : A}
+      ${this._events.length > 0 ? b`<div class="filterbar">
+              ${this._elements.length > 0 ? b`
+                      <span>Element:</span>
+                      <select @change=${this._onElementSelect}>
+                        <option
+                          value=""
+                          ?selected=${this._elementFilter === null}
+                        >
+                          All elements
+                        </option>
+                        ${this._elements.map((el) => b`
+                            <option
+                              value=${el.id}
+                              ?selected=${this._elementFilter === el.id}
+                            >
+                              &lt;${el.tag}&gt; #${el.id}
+                            </option>
+                          `)}
+                      </select>
+                    ` : A}
+              <input
+                class="regex ${compileRegex(this._regex).invalid ? "invalid" : ""}"
+                type="text"
+                spellcheck="false"
+                placeholder="filter regex…"
+                title="Case-insensitive regex matched against element tag, title and subtitle"
+                .value=${this._regex}
+                @input=${this._onRegexInput}
+              />
+            </div>` : A}
       <timeline-event-list
+        ${n(this._listRef)}
+        ?hidden=${tracks}
         .events=${this._events}
+        .spans=${this._spans}
         .layers=${this._layers}
+        .selectedKey=${this._selectedKey}
+        .elementFilter=${this._elementFilter}
+        .regex=${this._regex}
+        @span-select=${this._onSpanSelect}
+        @element-filter=${this._onElementFilter}
       ></timeline-event-list>
+      <timeline-tracks
+        ?hidden=${!tracks}
+        .spans=${this._filteredSpans}
+        .layers=${this._layers}
+        .visibleTracks=${this._visibleTracks}
+        .selectedKey=${this._selectedKey}
+        .selectedSpan=${this._selectedKey === null ? void 0 : this._spans.find((s) => s.key === this._selectedKey)}
+        ?recording=${this._recording}
+        @span-select=${this._onSpanSelect}
+        @element-filter=${this._onElementFilter}
+      ></timeline-tracks>
     `;
 	}
 };
@@ -7783,6 +8748,11 @@ __decorate([r$2()], TimelineView.prototype, "_exportNote", void 0);
 __decorate([r$2()], TimelineView.prototype, "_events", void 0);
 __decorate([r$2()], TimelineView.prototype, "_layers", void 0);
 __decorate([r$2()], TimelineView.prototype, "_error", void 0);
+__decorate([r$2()], TimelineView.prototype, "_mode", void 0);
+__decorate([r$2()], TimelineView.prototype, "_hiddenTracks", void 0);
+__decorate([r$2()], TimelineView.prototype, "_selectedKey", void 0);
+__decorate([r$2()], TimelineView.prototype, "_elementFilter", void 0);
+__decorate([r$2()], TimelineView.prototype, "_regex", void 0);
 TimelineView = __decorate([t$2("timeline-view")], TimelineView);
 //#endregion
 //#region src/types/hmr-incompatibility.ts
@@ -8597,6 +9567,29 @@ var writeLocal = (override) => {
 		else localStorage.setItem(SETTINGS_OVERRIDE_LS_KEY, JSON.stringify(override));
 	} catch {}
 };
+/**
+* The config values the current overrides were made against; `{}` when unset
+* or unparsable. Deliberately separate from the override itself, so the
+* runtime's apply and the live push never carry it.
+*/
+var readBaselines = () => {
+	try {
+		const raw = localStorage.getItem(OVERRIDE_BASELINES_LS_KEY);
+		if (raw !== null) return JSON.parse(raw);
+	} catch {}
+	return {};
+};
+var writeLocalBaselines = (baselines) => {
+	try {
+		if (baselines === null || Object.keys(baselines).length === 0) localStorage.removeItem(OVERRIDE_BASELINES_LS_KEY);
+		else localStorage.setItem(OVERRIDE_BASELINES_LS_KEY, JSON.stringify(baselines));
+	} catch {}
+};
+/** Write the durable baselines (or delete them when empty), best-effort. */
+var persistBaselines = (baselines) => {
+	const empty = baselines === void 0 || Object.keys(baselines).length === 0;
+	litRpc().then((rpc) => empty ? rpc.settings.global.delete("overrideBaselines") : rpc.settings.global.set("overrideBaselines", baselines)).catch(() => {});
+};
 /** Send an override to the app runtime over RPC, best-effort. */
 var pushLive = (override) => {
 	litRpc().then((rpc) => rpc.rpc.call("set-settings-override", override)).catch(() => {});
@@ -8616,10 +9609,18 @@ var onOverrideChange = (cb) => {
 		listeners.delete(cb);
 	};
 };
-/** A change made in this panel: all three copies, then listeners. */
-var commitOverride = (next) => {
+/**
+* A change made in this panel: all three copies, then listeners. `baselines`,
+* when given, replaces the recorded baselines (local and durable; never sent
+* to the page).
+*/
+var commitOverride = (next, baselines) => {
 	writeLocal(next);
 	persist(next);
+	if (baselines !== void 0) {
+		writeLocalBaselines(baselines);
+		persistBaselines(baselines);
+	}
 	pushLive(next);
 	notify(next);
 };
@@ -8634,8 +9635,9 @@ var patchOverride = (patch) => {
 * A value that arrived *from* the durable store: mirror it locally and to the
 * page, but don't write it back — that would be a pointless round trip.
 */
-var adoptOverride = (next) => {
+var adoptOverride = (next, baselines) => {
 	writeLocal(next);
+	if (baselines !== void 0) writeLocalBaselines(baselines);
 	pushLive(next);
 	notify(next);
 };
@@ -8647,9 +9649,46 @@ var adoptOverride = (next) => {
 var resetOverride = (envValues) => {
 	writeLocal(null);
 	persist(void 0);
+	writeLocalBaselines(null);
+	persistBaselines(void 0);
 	if (envValues !== void 0) pushLive(envValues);
 	notify({});
 };
+/**
+* Drop one key from the override, leaving the rest in place. `baseline` is
+* that key's resolved config value; it goes to the live runtime alongside the
+* remaining override (a missing field would leave the current live value in
+* place) but isn't stored, so the key reads as un-overridden again.
+*/
+var dropOverrideKey = (key, baseline) => {
+	const next = { ...readOverride() };
+	delete next[key];
+	const empty = Object.keys(next).length === 0;
+	writeLocal(empty ? null : next);
+	persist(empty ? void 0 : next);
+	const baselines = readBaselines();
+	delete baselines[key];
+	writeLocalBaselines(baselines);
+	persistBaselines(baselines);
+	pushLive({
+		...next,
+		[key]: baseline
+	});
+	notify(next);
+};
+/**
+* Re-stamp one key's baseline to the config value it has now ("Keep"), so the
+* changed-config hint goes away while the override stays.
+*/
+var keepBaseline = (key, current) => {
+	const next = {
+		...readBaselines(),
+		[key]: current
+	};
+	writeLocalBaselines(next);
+	persistBaselines(next);
+	notify(readOverride());
+};
 //#endregion
 //#region src/panel/components-view.ts
 /**
@@ -9707,6 +10746,8 @@ var DEEP_LINK_TABS = [
 	"settings"
 ];
 var isTab = (value) => typeof value === "string" && DEEP_LINK_TABS.includes(value);
+/** True when a link asks for anything at all. */
+var hasLink = (link) => link.tab !== void 0 || link.componentId !== void 0 || link.eventId !== void 0;
 /** Parse a `DeepLink` out of hash params, ignoring anything unrecognised. */
 var fromParams = (params) => {
 	const link = {};
@@ -9714,6 +10755,8 @@ var fromParams = (params) => {
 	if (isTab(tab)) link.tab = tab;
 	const id = Number(params.get("component"));
 	if (params.get("component") !== null && Number.isInteger(id)) link.componentId = id;
+	const eventId = params.get("event");
+	if (eventId !== null && eventId !== "") link.eventId = eventId;
 	return link;
 };
 /** Read the link encoded in the current URL hash, if any. */
@@ -9733,6 +10776,8 @@ var writeHashLink = (link) => {
 	else params.set("tab", link.tab);
 	if (link.componentId === void 0) params.delete("component");
 	else params.set("component", String(link.componentId));
+	if (link.eventId === void 0) params.delete("event");
+	else params.set("event", link.eventId);
 	const next = params.toString();
 	if (next === location.hash.replace(/^#/, "")) return;
 	history.replaceState(history.state, "", next === "" ? location.pathname : `#${next}`);
@@ -9747,7 +10792,7 @@ var writeHashLink = (link) => {
 */
 var onDeepLink = (apply) => {
 	const hashLink = readHashLink();
-	if (hashLink.tab !== void 0 || hashLink.componentId !== void 0) apply(hashLink);
+	if (hasLink(hashLink)) apply(hashLink);
 	window.addEventListener("hashchange", () => apply(readHashLink()));
 	(async () => {
 		try {
@@ -9762,7 +10807,9 @@ var onDeepLink = (apply) => {
 				if (isTab(tab)) link.tab = tab;
 				const id = params["componentId"];
 				if (typeof id === "number" && Number.isInteger(id)) link.componentId = id;
-				if (link.tab !== void 0 || link.componentId !== void 0) apply(link);
+				const eventId = params["eventId"];
+				if (typeof eventId === "string" && eventId !== "") link.eventId = eventId;
+				if (hasLink(link)) apply(link);
 			};
 			handle(state.value());
 			state.on("updated", handle);
@@ -9770,6 +10817,27 @@ var onDeepLink = (apply) => {
 	})();
 };
 //#endregion
+//#region src/lib/override-baselines.ts
+/**
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/**
+* Whether the config value an override was made against has since changed.
+*
+* `recorded` is `undefined` for a legacy override that predates baseline
+* tracking, which never counts as a change (no false positives). Values are
+* compared structurally. The source-overlay editor reports `'custom'` for an
+* `EditorConfig` object, which can't be compared meaningfully, so any side
+* being `'custom'` skips the check.
+*/
+var baselineChanged = (key, recorded, current) => {
+	if (recorded === void 0 || current === void 0) return false;
+	if (key === "sourceOverlayEditor" && (recorded === "custom" || current === "custom")) return false;
+	return JSON.stringify(recorded) !== JSON.stringify(current);
+};
+//#endregion
 //#region src/panel/devtools-settings.ts
 /**
 * @license
@@ -9781,6 +10849,7 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
 		super(..._args);
 		this._settings = null;
 		this._override = {};
+		this._recorded = {};
 		this._loaded = false;
 		this._colorScheme = "auto";
 		this._unsubscribeOverride = null;
@@ -9880,6 +10949,52 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
         margin-left: var(--lit-devtools-space-3);
         vertical-align: middle;
       }
+      .src {
+        margin-left: var(--lit-devtools-space-3);
+        vertical-align: middle;
+      }
+      .row-reset {
+        appearance: none;
+        border: 1px solid var(--lit-devtools-border-strong);
+        background: var(--lit-devtools-surface-elevated);
+        color: var(--lit-devtools-text-muted);
+        border-radius: var(--lit-devtools-radius-sm);
+        font: inherit;
+        font-size: var(--lit-devtools-text-2xs);
+        line-height: 1;
+        padding: 1px var(--lit-devtools-space-2);
+        margin-left: var(--lit-devtools-space-3);
+        vertical-align: middle;
+        cursor: pointer;
+      }
+      .row-reset:hover {
+        background: var(--lit-devtools-surface-hover);
+        color: var(--lit-devtools-text);
+      }
+      .nudge {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--lit-devtools-space-3);
+        margin-top: var(--lit-devtools-space-2);
+        color: var(--lit-devtools-warning);
+        font-family: inherit;
+        font-size: var(--lit-devtools-text-2xs);
+      }
+      .nudge button {
+        appearance: none;
+        border: 1px solid var(--lit-devtools-border-strong);
+        background: var(--lit-devtools-surface-elevated);
+        color: var(--lit-devtools-text);
+        border-radius: var(--lit-devtools-radius-sm);
+        font: inherit;
+        line-height: 1;
+        padding: 1px var(--lit-devtools-space-3);
+        cursor: pointer;
+      }
+      .nudge button:hover {
+        background: var(--lit-devtools-surface-hover);
+      }
       label.toggle {
         display: inline-flex;
         align-items: center;
@@ -9920,8 +11035,10 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
 	connectedCallback() {
 		super.connectedCallback();
 		this._override = readOverride();
+		this._recorded = readBaselines();
 		this._unsubscribeOverride = onOverrideChange((o) => {
 			this._override = o;
+			this._recorded = readBaselines();
 		});
 		this._colorScheme = readColorSchemePreference();
 		this._fetch();
@@ -9961,16 +11078,16 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
 	}
 	/**
 	* Apply a settings snapshot. Both branches no-op when the value already
-	* matches, which is what stops `_adopt` -> `_push` -> store write ->
+	* matches, which is what stops `_adopt` -> `commitOverride` -> store write ->
 	* `onChange` -> `_adopt` from looping.
 	*/
 	_adopt(all) {
-		const { appearance, override } = all;
+		const { appearance, override, overrideBaselines } = all;
 		if (appearance !== void 0 && appearance !== this._colorScheme) {
 			this._colorScheme = appearance;
 			setColorSchemePreference(appearance);
 		}
-		if (override !== void 0 && JSON.stringify(override) !== JSON.stringify(this._override)) adoptOverride(override);
+		if (override !== void 0 && (JSON.stringify(override) !== JSON.stringify(this._override) || JSON.stringify(overrideBaselines ?? {}) !== JSON.stringify(readBaselines()))) adoptOverride(override, overrideBaselines ?? {});
 	}
 	/** Write one preference through to the durable store, best-effort. */
 	_persist(key, value) {
@@ -9991,43 +11108,92 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
 			this._loaded = true;
 		}
 	}
-	/** Persist the merged override and push it to the app runtime. */
-	_push(override) {
-		commitOverride(override);
-	}
 	_set(key, value) {
-		this._push({
+		const s = this._settings;
+		const baselines = readBaselines();
+		if (s !== null && key in this._baselines(s)) baselines[key] = this._baselines(s)[key];
+		commitOverride({
 			...this._override,
 			[key]: value
-		});
+		}, baselines);
 	}
-	/** Clear overrides and revert the runtime to the resolved env values. */
-	_reset() {
-		const s = this._settings;
-		resetOverride(s === null ? void 0 : {
+	/** The resolved config value of every overridable setting. */
+	_baselines(s) {
+		return {
 			hmrReconnect: s.hmr.reconnect,
 			hmrOnIncompatible: s.hmr.onIncompatible,
 			hmrIndicatorVisible: s.hmr.indicatorEnabled,
 			hmrIndicatorCount: s.hmr.indicatorCount,
-			sourceOverlayEditor: s.sourceOverlay.editor,
+			sourceOverlayEditor: s.sourceOverlay.editor
+		};
+	}
+	/** Clear overrides and revert the runtime to the resolved env values. */
+	_reset() {
+		const s = this._settings;
+		resetOverride(s === null ? void 0 : {
+			...this._baselines(s),
 			flashUpdates: false,
-			flashUpdatesRamp: false
+			flashUpdatesRamp: false,
+			chromeTracks: false
 		});
 	}
+	/** Drop one overridden setting, reverting it (live) to its baseline. */
+	_resetKey(key) {
+		const s = this._settings;
+		if (s === null) return;
+		dropOverrideKey(key, this._baselines(s)[key]);
+	}
 	_pill(on) {
 		return b`<span class="pill ${on ? "on" : ""}"
       >${on ? "enabled" : "disabled"}</span
     >`;
 	}
-	_ovr(overridden) {
-		return overridden ? b`<span class="ovr">(overridden)</span>` : A;
+	/**
+	* Origin badge behind a value, from the server-side provenance:
+	* "(env)", "(option)" or "(default)". Nothing when the server sent none.
+	*/
+	_source(key) {
+		const src = this._settings?.sources?.[key];
+		return src ? b`<span class="env src">(${src})</span>` : A;
+	}
+	/**
+	* Badge for an overridable row. Without an override it's the plain origin
+	* badge; with one it's "(overridden)", the baseline it replaced
+	* ("env: Zed") and a reset for just this row. `baseline` is the config
+	* value as the row displays it, `fmt` renders a recorded raw value the same
+	* way. When the config value moved since the override was made, a second
+	* line says so and offers Reset or Keep.
+	*/
+	_ovrSource(key, baseline, fmt = String) {
+		if (this._override[key] === void 0) return this._source(key);
+		const src = this._settings?.sources?.[key] ?? "config";
+		const s = this._settings;
+		const current = s === null ? void 0 : this._baselines(s)[key];
+		return b`<span class="ovr">(overridden)</span>
+      <span class="env">${src}: ${baseline}</span>
+      <button
+        class="row-reset"
+        title="Reset to the ${src} value"
+        aria-label="Reset to the ${src} value"
+        @click=${() => this._resetKey(key)}
+      >
+        ×
+      </button>
+      ${baselineChanged(key, this._recorded[key], current) ? b`<div class="nudge" data-nudge=${key}>
+              <span
+                >Config changed since you overrode this: was
+                ${fmt(this._recorded[key])}, now ${baseline}</span
+              >
+              <button @click=${() => this._resetKey(key)}>Reset</button>
+              <button @click=${() => keepBaseline(key, current)}>Keep</button>
+            </div>` : A}`;
 	}
-	_readonlyRow(key, value, env) {
+	_readonlyRow(key, value, env, source) {
 		return b`
       <tr>
         <td class="key">${key}</td>
         <td class="val">
-          ${String(value)}
+          ${String(value)} ${source ? this._source(source) : A}
           ${env ? b`<span class="env">${env}</span>` : A}
         </td>
       </tr>
@@ -10083,7 +11249,7 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
               />
               ${reconnect ? "on" : "off"}
             </label>
-            ${this._ovr(o.hmrReconnect !== void 0)}
+            ${this._ovrSource("hmrReconnect", s.hmr.reconnect ? "on" : "off", (v) => v ? "on" : "off")}
           </td>
         </tr>
         <tr>
@@ -10099,7 +11265,7 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
                 warn
               </option>
             </select>
-            ${this._ovr(o.hmrOnIncompatible !== void 0)}
+            ${this._ovrSource("hmrOnIncompatible", s.hmr.onIncompatible)}
           </td>
         </tr>
         <tr class=${s.hmr.indicatorEnabled ? "" : "row-disabled"}>
@@ -10114,7 +11280,7 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
               />
               ${s.hmr.indicatorEnabled ? indicatorVisible ? "shown" : "hidden" : "off (config)"}
             </label>
-            ${this._ovr(o.hmrIndicatorVisible !== void 0)}
+            ${this._ovrSource("hmrIndicatorVisible", s.hmr.indicatorEnabled ? "shown" : "off (config)", (v) => v ? "shown" : "off (config)")}
           </td>
         </tr>
         <tr class=${s.hmr.indicatorEnabled ? "" : "row-disabled"}>
@@ -10129,10 +11295,41 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
               />
               ${indicatorCount ? "shown" : "hidden"}
             </label>
-            ${this._ovr(o.hmrIndicatorCount !== void 0)}
+            ${this._ovrSource("hmrIndicatorCount", s.hmr.indicatorCount ? "shown" : "hidden", (v) => v ? "shown" : "hidden")}
           </td>
         </tr>
       </table>
+    `;
+	}
+	/**
+	* The editor select. A custom `EditorConfig` object (reported as
+	* `'custom'`) isn't one of the built-in choices, so the select is disabled
+	* and just shows "Custom".
+	*/
+	_renderEditorRow(s) {
+		const baseline = s.sourceOverlay.editor;
+		const custom = baseline === "custom";
+		const current = this._override.sourceOverlayEditor ?? baseline;
+		const editorLabel = (value) => SOURCE_OVERLAY_EDITORS.find((ed) => ed.value === value)?.label ?? (value === "custom" ? "Custom" : value);
+		const label = editorLabel(baseline);
+		return b`
+      <tr>
+        <td class="key">editor</td>
+        <td class="val">
+          <select
+            ?disabled=${custom}
+            @change=${(e) => this._set("sourceOverlayEditor", e.target.value)}
+          >
+            ${custom ? b`<option value="custom" selected>Custom</option>` : SOURCE_OVERLAY_EDITORS.map((ed) => b`<option
+                        value=${ed.value}
+                        ?selected=${ed.value === current}
+                      >
+                        ${ed.label}
+                      </option>`)}
+          </select>
+          ${this._ovrSource("sourceOverlayEditor", label, (v) => editorLabel(String(v)))}
+        </td>
+      </tr>
     `;
 	}
 	/**
@@ -10174,6 +11371,30 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
           </td>
         </tr>
       </table>
+    `;
+	}
+	/**
+	* Timeline preferences. Pure preference, no config-time baseline, so an
+	* unset value means off.
+	*/
+	_renderTimelinePrefs() {
+		const chrome = this._override.chromeTracks ?? false;
+		return b`
+      <table>
+        <tr>
+          <td class="key">chrome performance tracks</td>
+          <td class="val">
+            <label class="toggle">
+              <input
+                type="checkbox"
+                .checked=${chrome}
+                @change=${(e) => this._set("chromeTracks", e.target.checked)}
+              />
+              ${chrome ? "on" : "off"}
+            </label>
+          </td>
+        </tr>
+      </table>
     `;
 	}
 	render() {
@@ -10203,24 +11424,9 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
       <section>
         <h3>Source Overlay ${this._pill(s.sourceOverlay.enabled)}</h3>
         ${s.sourceOverlay.enabled ? b`<table>
-                ${this._readonlyRow("hotkey", `Ctrl+Shift+${s.sourceOverlay.key.toUpperCase()}`, "LIT_PLUGIN_SOURCE_OVERLAY_KEY")}
-                <tr>
-                  <td class="key">editor</td>
-                  <td class="val">
-                    <select
-                      @change=${(e) => this._set("sourceOverlayEditor", e.target.value)}
-                    >
-                      ${SOURCE_OVERLAY_EDITORS.map((ed) => b`<option
-                            value=${ed.value}
-                            ?selected=${ed.value === (this._override.sourceOverlayEditor ?? s.sourceOverlay.editor)}
-                          >
-                            ${ed.label}
-                          </option>`)}
-                    </select>
-                    ${this._ovr(this._override.sourceOverlayEditor !== void 0)}
-                  </td>
-                </tr>
-                ${this._readonlyRow("throttle (ms)", s.sourceOverlay.throttleMs, "LIT_PLUGIN_SOURCE_OVERLAY_THROTTLE_MS")}
+                ${this._readonlyRow("hotkey", `Ctrl+Shift+${s.sourceOverlay.key.toUpperCase()}`, "LIT_PLUGIN_SOURCE_OVERLAY_KEY", "sourceOverlayKey")}
+                ${this._renderEditorRow(s)}
+                ${this._readonlyRow("throttle (ms)", s.sourceOverlay.throttleMs, "LIT_PLUGIN_SOURCE_OVERLAY_THROTTLE_MS", "sourceOverlayThrottleMs")}
               </table>` : b`<p class="empty">
                 Enable with <code>sourceOverlay: true</code> or
                 <code>LIT_PLUGIN_SOURCE_OVERLAY=true</code>.
@@ -10241,131 +11447,18 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
         <p class="empty">
           Layers and recording are controlled in the Timeline tab.
         </p>
+        ${s.timeline ? this._renderTimelinePrefs() : A}
       </section>
     `;
 	}
 };
 __decorate([r$2()], DevtoolsSettings.prototype, "_settings", void 0);
 __decorate([r$2()], DevtoolsSettings.prototype, "_override", void 0);
+__decorate([r$2()], DevtoolsSettings.prototype, "_recorded", void 0);
 __decorate([r$2()], DevtoolsSettings.prototype, "_loaded", void 0);
 __decorate([r$2()], DevtoolsSettings.prototype, "_colorScheme", void 0);
 DevtoolsSettings = __decorate([t$2("devtools-settings")], DevtoolsSettings);
 //#endregion
-//#region src/lib/segmented-tabs.ts
-/**
-* @license
-* Copyright 2026 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-var SegmentedTabs = class SegmentedTabs extends i$2 {
-	static {
-		this.styles = [tokens, i$5`
-      :host {
-        display: flex;
-        gap: var(--lit-devtools-space-1);
-        align-self: stretch;
-      }
-      button {
-        appearance: none;
-        display: flex;
-        align-items: center;
-        gap: var(--lit-devtools-space-2);
-        border: 0;
-        background: none;
-        font: inherit;
-        color: var(--lit-devtools-text-muted);
-        padding: 0 var(--lit-devtools-space-5);
-        cursor: pointer;
-        border-bottom: 2px solid transparent;
-        white-space: nowrap;
-        transition:
-          color var(--lit-devtools-dur-fast) var(--lit-devtools-ease-standard),
-          border-color var(--lit-devtools-dur-fast)
-            var(--lit-devtools-ease-standard),
-          background var(--lit-devtools-dur-fast)
-            var(--lit-devtools-ease-standard);
-      }
-      button:hover {
-        color: var(--lit-devtools-text);
-        background: var(--lit-devtools-surface-hover);
-      }
-      button.active {
-        color: var(--lit-devtools-accent);
-        border-bottom-color: var(--lit-devtools-accent);
-      }
-      button:focus-visible {
-        outline: 2px solid var(--lit-devtools-accent-ring);
-        outline-offset: -2px;
-      }
-      button svg {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-      }
-      .badge {
-        flex-shrink: 0;
-        min-width: 16px;
-        padding: 0 var(--lit-devtools-space-1);
-        border-radius: var(--lit-devtools-radius-pill);
-        background: var(--lit-devtools-error-soft);
-        color: var(--lit-devtools-error);
-        font-size: var(--lit-devtools-text-xs);
-        line-height: 16px;
-        text-align: center;
-      }
-      :host([size='sm']) button {
-        font-size: var(--lit-devtools-text-xs);
-        padding: 0 var(--lit-devtools-space-4);
-      }
-      :host([size='md']) button,
-      :host(:not([size])) button {
-        font-size: var(--lit-devtools-text-sm);
-        padding: 0 var(--lit-devtools-space-5);
-      }
-    `];
-	}
-	constructor() {
-		super();
-		this.items = [];
-		this.value = "";
-		this.size = "md";
-	}
-	_select(id) {
-		this.value = id;
-		this.dispatchEvent(new CustomEvent("change", {
-			detail: { value: id },
-			bubbles: true,
-			composed: true
-		}));
-	}
-	render() {
-		return b`
-      ${this.items.map((item) => b`
-          <button
-            role="tab"
-            aria-selected=${item.id === this.value}
-            class=${item.id === this.value ? "active" : ""}
-            @click=${() => this._select(item.id)}
-          >
-            ${item.icon ? b`<svg
-                    viewBox="0 0 256 256"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path d=${item.icon} />
-                  </svg>` : A}
-            ${item.label}
-            ${item.badge ? b`<span class="badge">${item.badge}</span>` : A}
-          </button>
-        `)}
-    `;
-	}
-};
-__decorate([n$3({ type: Array })], SegmentedTabs.prototype, "items", void 0);
-__decorate([n$3()], SegmentedTabs.prototype, "value", void 0);
-__decorate([n$3()], SegmentedTabs.prototype, "size", void 0);
-SegmentedTabs = __decorate([t$2("segmented-tabs")], SegmentedTabs);
-//#endregion
 //#region src/lib/icons.ts
 /**
 * @license
@@ -10510,6 +11603,15 @@ var LitDevtoolsPanel = class LitDevtoolsPanel extends i$2 {
 	firstUpdated() {
 		onDeepLink((link) => {
 			if (link.tab !== void 0) this._tab = link.tab;
+			if (link.componentId === void 0 && link.eventId !== void 0) {
+				this._tab = "timeline";
+				const eventId = link.eventId;
+				this.updateComplete.then(() => {
+					this._timelineView?.selectEvent(eventId);
+					this._syncHash();
+				});
+				return;
+			}
 			if (link.componentId === void 0) {
 				this._syncHash();
 				return;
@@ -10532,9 +11634,11 @@ var LitDevtoolsPanel = class LitDevtoolsPanel extends i$2 {
 	_syncHash() {
 		if (window.top !== window.self) return;
 		const selectedId = this._tab === "updates" ? this._updatesView?.selectedId : this._componentsView?.selectedId;
+		const eventId = this._tab === "timeline" ? this._timelineView?.selectedEventId : null;
 		writeHashLink({
 			tab: this._tab,
-			...selectedId === null || selectedId === void 0 ? {} : { componentId: selectedId }
+			...selectedId === null || selectedId === void 0 ? {} : { componentId: selectedId },
+			...eventId === null || eventId === void 0 ? {} : { eventId }
 		});
 	}
 	/**
@@ -10576,7 +11680,10 @@ var LitDevtoolsPanel = class LitDevtoolsPanel extends i$2 {
         ></segmented-tabs>
       </header>
       <div class="view" @inspect-element=${this._onInspectElement}>
-        <timeline-view ?hidden=${this._tab !== "timeline"}></timeline-view>
+        <timeline-view
+          ?hidden=${this._tab !== "timeline"}
+          @selection-change=${this._syncHash}
+        ></timeline-view>
         <!-- Kept mounted (like the timeline) so an overlay inspect-pick can
              arrive and switch us here even while another tab is in front. -->
         <components-view
@@ -10600,6 +11707,7 @@ __decorate([r$2()], LitDevtoolsPanel.prototype, "_tab", void 0);
 __decorate([r$2()], LitDevtoolsPanel.prototype, "_hmrCount", void 0);
 __decorate([e$3("components-view")], LitDevtoolsPanel.prototype, "_componentsView", void 0);
 __decorate([e$3("updates-view")], LitDevtoolsPanel.prototype, "_updatesView", void 0);
+__decorate([e$3("timeline-view")], LitDevtoolsPanel.prototype, "_timelineView", void 0);
 LitDevtoolsPanel = __decorate([t$2("lit-devtools-panel")], LitDevtoolsPanel);
 //#endregion
 //#region src/panel/main.ts
@@ -10611,4 +11719,4 @@ LitDevtoolsPanel = __decorate([t$2("lit-devtools-panel")], LitDevtoolsPanel);
 //#endregion
 export { onBrowserAgentToolsChanged as n, nanoid as r, listBrowserAgentTools as t };
 
-//# sourceMappingURL=index-DVe6M4HV.js.map
+//# sourceMappingURL=index-DVr5EnyB.js.map