@oddsquad/vite-plugin-lit 0.3.0 → 0.5.0

package/dist/client/assets/{index-CFrVgNfS.js → index-Gn4Hk_9s.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 {
@@ -1289,67 +1198,6 @@ var n = e$1(class extends f {
 	}
 });
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
-/**
-* @license
-* Copyright 2017 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-var u = (e, s, t) => {
-	const r = /* @__PURE__ */ new Map();
-	for (let l = s; l <= t; l++) r.set(e[l], l);
-	return r;
-};
-var c = e$1(class extends i {
-	constructor(e) {
-		if (super(e), e.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
-	}
-	dt(e, s, t) {
-		let r;
-		void 0 === t ? t = s : void 0 !== s && (r = s);
-		const l = [], o = [];
-		let i = 0;
-		for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
-		return {
-			values: o,
-			keys: l
-		};
-	}
-	render(e, s, t) {
-		return this.dt(e, s, t).values;
-	}
-	update(s, [t, r, c]) {
-		const d = M(s), { values: p$3, keys: a } = this.dt(t, r, c);
-		if (!Array.isArray(d)) return this.ut = a, p$3;
-		const h = this.ut ??= [], v$2 = [];
-		let m, y, x = 0, j = d.length - 1, k = 0, w = p$3.length - 1;
-		for (; x <= j && k <= w;) if (null === d[x]) x++;
-		else if (null === d[j]) j--;
-		else if (h[x] === a[k]) v$2[k] = u$1(d[x], p$3[k]), x++, k++;
-		else if (h[j] === a[w]) v$2[w] = u$1(d[j], p$3[w]), j--, w--;
-		else if (h[x] === a[w]) v$2[w] = u$1(d[x], p$3[w]), v(s, v$2[w + 1], d[x]), x++, w--;
-		else if (h[j] === a[k]) v$2[k] = u$1(d[j], p$3[k]), v(s, d[x], d[j]), j--, k++;
-		else if (void 0 === m && (m = u(a, k, w), y = u(h, x, j)), m.has(h[x])) if (m.has(h[j])) {
-			const e = y.get(a[k]), t = void 0 !== e ? d[e] : null;
-			if (null === t) {
-				const e = v(s, d[x]);
-				u$1(e, p$3[k]), v$2[k] = e;
-			} else v$2[k] = u$1(t, p$3[k]), v(s, d[x], t), d[e] = null;
-			k++;
-		} else h$2(d[j]), j--;
-		else h$2(d[x]), x++;
-		for (; k <= w;) {
-			const e = v(s, v$2[w + 1]);
-			u$1(e, p$3[k]), v$2[k++] = e;
-		}
-		for (; x <= j;) {
-			const e = d[x++];
-			null !== e && h$2(e);
-		}
-		return this.ut = a, p(s, v$2), E;
-	}
-});
-//#endregion
 //#region src/lib/timeline/derive.ts
 /**
 * @license
@@ -1560,105 +1408,1353 @@ var attributeInput = (cycles, events, windowMs = 200) => {
 	});
 };
 //#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) {
-	const o = `\x1B[${open}m`;
-	const c = `\x1B[${close}m`;
-	return ((arg, ...values) => {
-		if (Array.isArray(arg) && "raw" in arg) {
-			const strings = arg;
-			let out = "";
-			for (let i = 0; i < strings.length; i++) {
-				out += strings[i];
-				if (i < values.length) out += String(values[i]);
-			}
-			return `${o}${out}${c}`;
-		}
-		return `${o}${String(arg)}${c}`;
-	});
-}
-var colors = {
-	blue: makeColor(34, 39),
-	cyan: makeColor(36, 39),
-	gray: makeColor(90, 39),
-	green: makeColor(32, 39),
-	red: makeColor(31, 39),
-	yellow: makeColor(33, 39),
-	bold: makeColor(1, 22),
-	dim: makeColor(2, 22),
-	reset: makeColor(0, 0),
-	underline: makeColor(4, 24)
-};
-//#endregion
-//#region node_modules/.pnpm/nostics@1.2.0/node_modules/nostics/dist/index.mjs
+//#region src/lib/timeline/filter.ts
 /**
-* Transforms a value or a function that returns a value to a value.
-*
-* @param valFn either a value or a function that returns a value
-* @param args  arguments to pass to the function if `valFn` is a function
-*
-* @internal
+* @license
+* Copyright 2026 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
 */
-function toValueWithArgs(valFn, ...args) {
-	return typeof valFn === "function" ? valFn(...args) : valFn;
-}
-var captureStackTrace = Error.captureStackTrace;
-var Diagnostic = class Diagnostic extends Error {
-	name;
-	/**
-	* The diagnostic code, e.g. `MATH_E001`.
-	* Also appears as the `name` property.
-	*/
-	code;
-	/**
-	* URL to extended documentation for this diagnostic code.
-	* Auto-generated from {@link DefineDiagnosticsOptions.docsBase}.
-	*/
-	docs;
-	/**
-	* Optional actionable instructions on how to resolve the problem.
-	*/
-	fix;
-	/**
-	* Locations in user code that contributed to this diagnostic, in
-	* `file:line:column` format. Relevant when the stack trace doesn't reflect
-	* the user's source (e.g. compilers, bundlers), otherwise redundant with the
-	* stack and should be omitted.
-	*/
-	sources;
-	/**
-	* Alias for {@link Error.message}: the reason this diagnostic was raised.
-	*/
-	get why() {
-		return this.message;
-	}
-	/**
-	* @param init        structured initializer; `why` is required
-	* @param captureFrom V8 stack-cutoff frame. Defaults to {@link Diagnostic}
-	* so the top of the trace is the `new Diagnostic(...)` call site.
-	* `defineDiagnostics` passes its action method to strip its own frames too.
-	* Ignored on engines without `Error.captureStackTrace`.
-	*/
-	constructor(init, captureFrom = Diagnostic) {
-		super(init.why, { cause: init.cause });
-		this.code = this.name = init.code;
-		this.fix = init.fix;
-		this.docs = init.docs;
-		this.sources = init.sources;
-		captureStackTrace?.(this, captureFrom);
-	}
-	/**
-	* Converts the diagnostic into a serializable structured object.
-	*/
-	toJSON() {
+/**
+* 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 {
-			name: this.name,
-			why: this.why,
-			fix: this.fix,
-			docs: this.docs,
-			sources: this.sources,
-			cause: this.cause,
-			stack: this.stack
+			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
+		}));
+	}
+	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
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var u = (e, s, t) => {
+	const r = /* @__PURE__ */ new Map();
+	for (let l = s; l <= t; l++) r.set(e[l], l);
+	return r;
+};
+var c = e$1(class extends i {
+	constructor(e) {
+		if (super(e), e.type !== t.CHILD) throw Error("repeat() can only be used in text expressions");
+	}
+	dt(e, s, t) {
+		let r;
+		void 0 === t ? t = s : void 0 !== s && (r = s);
+		const l = [], o = [];
+		let i = 0;
+		for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
+		return {
+			values: o,
+			keys: l
+		};
+	}
+	render(e, s, t) {
+		return this.dt(e, s, t).values;
+	}
+	update(s, [t, r, c]) {
+		const d = M(s), { values: p$3, keys: a } = this.dt(t, r, c);
+		if (!Array.isArray(d)) return this.ut = a, p$3;
+		const h = this.ut ??= [], v$2 = [];
+		let m, y, x = 0, j = d.length - 1, k = 0, w = p$3.length - 1;
+		for (; x <= j && k <= w;) if (null === d[x]) x++;
+		else if (null === d[j]) j--;
+		else if (h[x] === a[k]) v$2[k] = u$1(d[x], p$3[k]), x++, k++;
+		else if (h[j] === a[w]) v$2[w] = u$1(d[j], p$3[w]), j--, w--;
+		else if (h[x] === a[w]) v$2[w] = u$1(d[x], p$3[w]), v(s, v$2[w + 1], d[x]), x++, w--;
+		else if (h[j] === a[k]) v$2[k] = u$1(d[j], p$3[k]), v(s, d[x], d[j]), j--, k++;
+		else if (void 0 === m && (m = u(a, k, w), y = u(h, x, j)), m.has(h[x])) if (m.has(h[j])) {
+			const e = y.get(a[k]), t = void 0 !== e ? d[e] : null;
+			if (null === t) {
+				const e = v(s, d[x]);
+				u$1(e, p$3[k]), v$2[k] = e;
+			} else v$2[k] = u$1(t, p$3[k]), v(s, d[x], t), d[e] = null;
+			k++;
+		} else h$2(d[j]), j--;
+		else h$2(d[x]), x++;
+		for (; k <= w;) {
+			const e = v(s, v$2[w + 1]);
+			u$1(e, p$3[k]), v$2[k++] = e;
+		}
+		for (; x <= j;) {
+			const e = d[x++];
+			null !== e && h$2(e);
+		}
+		return this.ut = a, p(s, v$2), E;
+	}
+});
+//#endregion
+//#region node_modules/.pnpm/@lit-labs+virtualizer@2.1.1/node_modules/@lit-labs/virtualizer/events.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var RangeChangedEvent = class RangeChangedEvent extends Event {
+	constructor(range) {
+		super(RangeChangedEvent.eventName, { bubbles: false });
+		this.first = range.first;
+		this.last = range.last;
+	}
+};
+RangeChangedEvent.eventName = "rangeChanged";
+var VisibilityChangedEvent = class VisibilityChangedEvent extends Event {
+	constructor(range) {
+		super(VisibilityChangedEvent.eventName, { bubbles: false });
+		this.first = range.first;
+		this.last = range.last;
+	}
+};
+VisibilityChangedEvent.eventName = "visibilityChanged";
+var UnpinnedEvent = class UnpinnedEvent extends Event {
+	constructor() {
+		super(UnpinnedEvent.eventName, { bubbles: false });
+	}
+};
+UnpinnedEvent.eventName = "unpinned";
+//#endregion
+//#region node_modules/.pnpm/@lit-labs+virtualizer@2.1.1/node_modules/@lit-labs/virtualizer/ScrollerController.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var ScrollerShim = class {
+	constructor(element) {
+		this._element = null;
+		const node = element ?? window;
+		this._node = node;
+		if (element) this._element = element;
+	}
+	get element() {
+		return this._element || document.scrollingElement || document.documentElement;
+	}
+	get scrollTop() {
+		return this.element.scrollTop || window.scrollY;
+	}
+	get scrollLeft() {
+		return this.element.scrollLeft || window.scrollX;
+	}
+	get scrollHeight() {
+		return this.element.scrollHeight;
+	}
+	get scrollWidth() {
+		return this.element.scrollWidth;
+	}
+	get viewportHeight() {
+		return this._element ? this._element.getBoundingClientRect().height : window.innerHeight;
+	}
+	get viewportWidth() {
+		return this._element ? this._element.getBoundingClientRect().width : window.innerWidth;
+	}
+	get maxScrollTop() {
+		return this.scrollHeight - this.viewportHeight;
+	}
+	get maxScrollLeft() {
+		return this.scrollWidth - this.viewportWidth;
+	}
+};
+var ScrollerController = class extends ScrollerShim {
+	constructor(client, element) {
+		super(element);
+		this._clients = /* @__PURE__ */ new Set();
+		this._retarget = null;
+		this._end = null;
+		this.__destination = null;
+		this.correctingScrollError = false;
+		this._checkForArrival = this._checkForArrival.bind(this);
+		this._updateManagedScrollTo = this._updateManagedScrollTo.bind(this);
+		this.scrollTo = this.scrollTo.bind(this);
+		this.scrollBy = this.scrollBy.bind(this);
+		const node = this._node;
+		this._originalScrollTo = node.scrollTo;
+		this._originalScrollBy = node.scrollBy;
+		this._originalScroll = node.scroll;
+		this._attach(client);
+	}
+	get _destination() {
+		return this.__destination;
+	}
+	get scrolling() {
+		return this._destination !== null;
+	}
+	scrollTo(p1, p2) {
+		const options = typeof p1 === "number" && typeof p2 === "number" ? {
+			left: p1,
+			top: p2
+		} : p1;
+		this._scrollTo(options);
+	}
+	scrollBy(p1, p2) {
+		const options = typeof p1 === "number" && typeof p2 === "number" ? {
+			left: p1,
+			top: p2
+		} : p1;
+		if (options.top !== void 0) options.top += this.scrollTop;
+		if (options.left !== void 0) options.left += this.scrollLeft;
+		this._scrollTo(options);
+	}
+	_nativeScrollTo(options) {
+		this._originalScrollTo.bind(this._element || window)(options);
+	}
+	_scrollTo(options, retarget = null, end = null) {
+		if (this._end !== null) this._end();
+		if (options.behavior === "smooth") {
+			this._setDestination(options);
+			this._retarget = retarget;
+			this._end = end;
+		} else this._resetScrollState();
+		this._nativeScrollTo(options);
+	}
+	_setDestination(options) {
+		let { top, left } = options;
+		top = top === void 0 ? void 0 : Math.max(0, Math.min(top, this.maxScrollTop));
+		left = left === void 0 ? void 0 : Math.max(0, Math.min(left, this.maxScrollLeft));
+		if (this._destination !== null && left === this._destination.left && top === this._destination.top) return false;
+		this.__destination = {
+			top,
+			left,
+			behavior: "smooth"
+		};
+		return true;
+	}
+	_resetScrollState() {
+		this.__destination = null;
+		this._retarget = null;
+		this._end = null;
+	}
+	_updateManagedScrollTo(coordinates) {
+		if (this._destination) {
+			if (this._setDestination(coordinates)) this._nativeScrollTo(this._destination);
+		}
+	}
+	managedScrollTo(options, retarget, end) {
+		this._scrollTo(options, retarget, end);
+		return this._updateManagedScrollTo;
+	}
+	correctScrollError(coordinates) {
+		this.correctingScrollError = true;
+		requestAnimationFrame(() => requestAnimationFrame(() => this.correctingScrollError = false));
+		this._nativeScrollTo(coordinates);
+		if (this._retarget) this._setDestination(this._retarget());
+		if (this._destination) this._nativeScrollTo(this._destination);
+	}
+	_checkForArrival() {
+		if (this._destination !== null) {
+			const { scrollTop, scrollLeft } = this;
+			let { top, left } = this._destination;
+			top = Math.min(top || 0, this.maxScrollTop);
+			left = Math.min(left || 0, this.maxScrollLeft);
+			const topDiff = Math.abs(top - scrollTop);
+			const leftDiff = Math.abs(left - scrollLeft);
+			if (topDiff < 1 && leftDiff < 1) {
+				if (this._end) this._end();
+				this._resetScrollState();
+			}
+		}
+	}
+	detach(client) {
+		this._clients.delete(client);
+		/**
+		* If there aren't any more clients, then return the node's default
+		* scrolling methods
+		*/
+		if (this._clients.size === 0) {
+			this._node.scrollTo = this._originalScrollTo;
+			this._node.scrollBy = this._originalScrollBy;
+			this._node.scroll = this._originalScroll;
+			this._node.removeEventListener("scroll", this._checkForArrival);
+		}
+		return null;
+	}
+	_attach(client) {
+		this._clients.add(client);
+		/**
+		* The node should only have the methods shimmed when adding the first
+		* client – otherwise it's redundant
+		*/
+		if (this._clients.size === 1) {
+			this._node.scrollTo = this.scrollTo;
+			this._node.scrollBy = this.scrollBy;
+			this._node.scroll = this.scrollTo;
+			this._node.addEventListener("scroll", this._checkForArrival);
+		}
+	}
+};
+//#endregion
+//#region \0vite/preload-helper.js
+var scriptRel = "modulepreload";
+var assetsURL = function(dep, importerUrl) {
+	return new URL(dep, importerUrl).href;
+};
+var seen = {};
+var __vitePreload = function preload(baseModule, deps, importerUrl) {
+	let promise = Promise.resolve();
+	if (deps && deps.length > 0) {
+		const links = document.getElementsByTagName("link");
+		const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
+		const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
+		function allSettled(promises) {
+			return Promise.all(promises.map((p) => Promise.resolve(p).then((value) => ({
+				status: "fulfilled",
+				value
+			}), (reason) => ({
+				status: "rejected",
+				reason
+			}))));
+		}
+		function importMetaResolve(specifier) {
+			if (import.meta.resolve) return import.meta.resolve(specifier);
+			return new URL(
+				specifier,
+				/** #__KEEP__ */
+				import.meta.url
+			).href;
+		}
+		promise = allSettled(deps.map((dep) => {
+			dep = assetsURL(dep, importerUrl);
+			dep = importMetaResolve(dep);
+			if (dep in seen) return;
+			seen[dep] = true;
+			const isCss = dep.endsWith(".css");
+			for (let i = links.length - 1; i >= 0; i--) {
+				const link = links[i];
+				if (link.href === dep && (!isCss || link.rel === "stylesheet")) return;
+			}
+			const link = document.createElement("link");
+			link.rel = isCss ? "stylesheet" : scriptRel;
+			if (!isCss) link.as = "script";
+			link.crossOrigin = "";
+			link.href = dep;
+			if (cspNonce) link.setAttribute("nonce", cspNonce);
+			document.head.appendChild(link);
+			if (isCss) return new Promise((res, rej) => {
+				link.addEventListener("load", res);
+				link.addEventListener("error", () => rej(/* @__PURE__ */ new Error(`Unable to preload CSS for ${dep}`)));
+			});
+		}).filter((p) => p !== void 0));
+	}
+	function handlePreloadError(err) {
+		const e = new Event("vite:preloadError", { cancelable: true });
+		e.payload = err;
+		window.dispatchEvent(e);
+		if (!e.defaultPrevented) throw err;
+	}
+	return promise.then((res) => {
+		for (const item of res || []) {
+			if (item.status !== "rejected") continue;
+			handlePreloadError(item.reason);
+		}
+		return baseModule().catch(handlePreloadError);
+	});
+};
+//#endregion
+//#region node_modules/.pnpm/@lit-labs+virtualizer@2.1.1/node_modules/@lit-labs/virtualizer/Virtualizer.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var _ResizeObserver = typeof window !== "undefined" ? window.ResizeObserver : void 0;
+var virtualizerRef = Symbol("virtualizerRef");
+var SIZER_ATTRIBUTE = "virtualizer-sizer";
+var DefaultLayoutConstructor;
+/**
+* Provides virtual scrolling boilerplate.
+*
+* Extensions of this class must set hostElement and layout.
+*
+* Extensions of this class must also override VirtualRepeater's DOM
+* manipulation methods.
+*/
+var Virtualizer = class {
+	constructor(config) {
+		this._benchmarkStart = null;
+		this._layout = null;
+		this._clippingAncestors = [];
+		/**
+		* Layout provides these values, we set them on _render().
+		* TODO @straversi: Can we find an XOR type, usable for the key here?
+		*/
+		this._scrollSize = null;
+		/**
+		* Difference between scroll target's current and required scroll offsets.
+		* Provided by layout.
+		*/
+		this._scrollError = null;
+		/**
+		* A list of the positions (top, left) of the children in the current range.
+		*/
+		this._childrenPos = null;
+		this._childMeasurements = null;
+		this._toBeMeasured = /* @__PURE__ */ new Map();
+		this._rangeChanged = true;
+		this._itemsChanged = true;
+		this._visibilityChanged = true;
+		this._scrollerController = null;
+		this._isScroller = false;
+		this._sizer = null;
+		/**
+		* Resize observer attached to hostElement.
+		*/
+		this._hostElementRO = null;
+		/**
+		* Resize observer attached to children.
+		*/
+		this._childrenRO = null;
+		this._mutationObserver = null;
+		this._scrollEventListeners = [];
+		this._scrollEventListenerOptions = { passive: true };
+		this._loadListener = this._childLoaded.bind(this);
+		/**
+		* Index of element to scroll into view, plus scroll
+		* behavior options, as imperatively specified via
+		* `element(index).scrollIntoView()`
+		*/
+		this._scrollIntoViewTarget = null;
+		this._updateScrollIntoViewCoordinates = null;
+		/**
+		* Items to render. Set by items.
+		*/
+		this._items = [];
+		/**
+		* Index of the first child in the range, not necessarily the first visible child.
+		* TODO @straversi: Consider renaming these.
+		*/
+		this._first = -1;
+		/**
+		* Index of the last child in the range.
+		*/
+		this._last = -1;
+		/**
+		* Index of the first item intersecting the viewport.
+		*/
+		this._firstVisible = -1;
+		/**
+		* Index of the last item intersecting the viewport.
+		*/
+		this._lastVisible = -1;
+		this._scheduled = /* @__PURE__ */ new WeakSet();
+		/**
+		* Invoked at the end of each render cycle: children in the range are
+		* measured, and their dimensions passed to this callback. Use it to layout
+		* children as needed.
+		*/
+		this._measureCallback = null;
+		this._measureChildOverride = null;
+		/**
+		* State for `layoutComplete` promise
+		*/
+		this._layoutCompletePromise = null;
+		this._layoutCompleteResolver = null;
+		this._layoutCompleteRejecter = null;
+		this._pendingLayoutComplete = null;
+		/**
+		* Layout initialization is async because we dynamically load
+		* the default layout if none is specified. This state is to track
+		* whether init is complete.
+		*/
+		this._layoutInitialized = null;
+		/**
+		* Track connection state to guard against errors / unnecessary work
+		*/
+		this._connected = false;
+		if (!config) throw new Error("Virtualizer constructor requires a configuration object");
+		if (config.hostElement) this._init(config);
+		else throw new Error("Virtualizer configuration requires the \"hostElement\" property");
+	}
+	set items(items) {
+		if (Array.isArray(items) && items !== this._items) {
+			this._itemsChanged = true;
+			this._items = items;
+			this._schedule(this._updateLayout);
+		}
+	}
+	_init(config) {
+		this._isScroller = !!config.scroller;
+		this._initHostElement(config);
+		const layoutConfig = config.layout || {};
+		this._layoutInitialized = this._initLayout(layoutConfig);
+	}
+	_initObservers() {
+		this._mutationObserver = new MutationObserver(this._finishDOMUpdate.bind(this));
+		this._hostElementRO = new _ResizeObserver(() => this._hostElementSizeChanged());
+		this._childrenRO = new _ResizeObserver(this._childrenSizeChanged.bind(this));
+	}
+	_initHostElement(config) {
+		const hostElement = this._hostElement = config.hostElement;
+		this._applyVirtualizerStyles();
+		hostElement[virtualizerRef] = this;
+	}
+	connected() {
+		this._initObservers();
+		const includeSelf = this._isScroller;
+		this._clippingAncestors = getClippingAncestors(this._hostElement, includeSelf);
+		this._scrollerController = new ScrollerController(this, this._clippingAncestors[0]);
+		this._schedule(this._updateLayout);
+		this._observeAndListen();
+		this._connected = true;
+	}
+	_observeAndListen() {
+		this._mutationObserver.observe(this._hostElement, { childList: true });
+		this._hostElementRO.observe(this._hostElement);
+		this._scrollEventListeners.push(window);
+		window.addEventListener("scroll", this, this._scrollEventListenerOptions);
+		this._clippingAncestors.forEach((ancestor) => {
+			ancestor.addEventListener("scroll", this, this._scrollEventListenerOptions);
+			this._scrollEventListeners.push(ancestor);
+			this._hostElementRO.observe(ancestor);
+		});
+		this._hostElementRO.observe(this._scrollerController.element);
+		this._children.forEach((child) => this._childrenRO.observe(child));
+		this._scrollEventListeners.forEach((target) => target.addEventListener("scroll", this, this._scrollEventListenerOptions));
+	}
+	disconnected() {
+		this._scrollEventListeners.forEach((target) => target.removeEventListener("scroll", this, this._scrollEventListenerOptions));
+		this._scrollEventListeners = [];
+		this._clippingAncestors = [];
+		this._scrollerController?.detach(this);
+		this._scrollerController = null;
+		this._mutationObserver?.disconnect();
+		this._mutationObserver = null;
+		this._hostElementRO?.disconnect();
+		this._hostElementRO = null;
+		this._childrenRO?.disconnect();
+		this._childrenRO = null;
+		this._rejectLayoutCompletePromise("disconnected");
+		this._connected = false;
+	}
+	_applyVirtualizerStyles() {
+		const style = this._hostElement.style;
+		style.display = style.display || "block";
+		style.position = style.position || "relative";
+		style.contain = style.contain || "size layout";
+		if (this._isScroller) {
+			style.overflow = style.overflow || "auto";
+			style.minHeight = style.minHeight || "150px";
+		}
+	}
+	_getSizer() {
+		const hostElement = this._hostElement;
+		if (!this._sizer) {
+			let sizer = hostElement.querySelector(`[${SIZER_ATTRIBUTE}]`);
+			if (!sizer) {
+				sizer = document.createElement("div");
+				sizer.setAttribute(SIZER_ATTRIBUTE, "");
+				hostElement.appendChild(sizer);
+			}
+			Object.assign(sizer.style, {
+				position: "absolute",
+				margin: "-2px 0 0 0",
+				padding: 0,
+				visibility: "hidden",
+				fontSize: "2px"
+			});
+			sizer.textContent = "&nbsp;";
+			sizer.setAttribute(SIZER_ATTRIBUTE, "");
+			this._sizer = sizer;
+		}
+		return this._sizer;
+	}
+	async updateLayoutConfig(layoutConfig) {
+		await this._layoutInitialized;
+		const Ctor = layoutConfig.type || DefaultLayoutConstructor;
+		if (typeof Ctor === "function" && this._layout instanceof Ctor) {
+			const config = { ...layoutConfig };
+			delete config.type;
+			this._layout.config = config;
+			return true;
+		}
+		return false;
+	}
+	async _initLayout(layoutConfig) {
+		let config;
+		let Ctor;
+		if (typeof layoutConfig.type === "function") {
+			Ctor = layoutConfig.type;
+			const copy = { ...layoutConfig };
+			delete copy.type;
+			config = copy;
+		} else config = layoutConfig;
+		if (Ctor === void 0) DefaultLayoutConstructor = Ctor = (await __vitePreload(async () => {
+			const { FlowLayout } = await import("./flow-DK8vmxvN.js");
+			return { FlowLayout };
+		}, [], import.meta.url)).FlowLayout;
+		this._layout = new Ctor((message) => this._handleLayoutMessage(message), config);
+		if (this._layout.measureChildren && typeof this._layout.updateItemSizes === "function") {
+			if (typeof this._layout.measureChildren === "function") this._measureChildOverride = this._layout.measureChildren;
+			this._measureCallback = this._layout.updateItemSizes.bind(this._layout);
+		}
+		if (this._layout.listenForChildLoadEvents) this._hostElement.addEventListener("load", this._loadListener, true);
+		this._schedule(this._updateLayout);
+	}
+	startBenchmarking() {
+		if (this._benchmarkStart === null) this._benchmarkStart = window.performance.now();
+	}
+	stopBenchmarking() {
+		if (this._benchmarkStart !== null) {
+			const now = window.performance.now();
+			const timeElapsed = now - this._benchmarkStart;
+			const virtualizationTime = performance.getEntriesByName("uv-virtualizing", "measure").filter((e) => e.startTime >= this._benchmarkStart && e.startTime < now).reduce((t, m) => t + m.duration, 0);
+			this._benchmarkStart = null;
+			return {
+				timeElapsed,
+				virtualizationTime
+			};
+		}
+		return null;
+	}
+	_measureChildren() {
+		const mm = {};
+		const children = this._children;
+		const fn = this._measureChildOverride || this._measureChild;
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			const idx = this._first + i;
+			if (this._itemsChanged || this._toBeMeasured.has(child)) mm[idx] = fn.call(this, child, this._items[idx]);
+		}
+		this._childMeasurements = mm;
+		this._schedule(this._updateLayout);
+		this._toBeMeasured.clear();
+	}
+	/**
+	* Returns the width, height, and margins of the given child.
+	*/
+	_measureChild(element) {
+		const { width, height } = element.getBoundingClientRect();
+		return Object.assign({
+			width,
+			height
+		}, getMargins(element));
+	}
+	async _schedule(method) {
+		if (!this._scheduled.has(method)) {
+			this._scheduled.add(method);
+			await Promise.resolve();
+			this._scheduled.delete(method);
+			method.call(this);
+		}
+	}
+	async _updateDOM(state) {
+		this._scrollSize = state.scrollSize;
+		this._adjustRange(state.range);
+		this._childrenPos = state.childPositions;
+		this._scrollError = state.scrollError || null;
+		const { _rangeChanged, _itemsChanged } = this;
+		if (this._visibilityChanged) {
+			this._notifyVisibility();
+			this._visibilityChanged = false;
+		}
+		if (_rangeChanged || _itemsChanged) {
+			this._notifyRange();
+			this._rangeChanged = false;
+		}
+		this._finishDOMUpdate();
+	}
+	_finishDOMUpdate() {
+		if (this._connected) {
+			this._children.forEach((child) => this._childrenRO.observe(child));
+			this._checkScrollIntoViewTarget(this._childrenPos);
+			this._positionChildren(this._childrenPos);
+			this._sizeHostElement(this._scrollSize);
+			this._correctScrollError();
+			if (this._benchmarkStart && "mark" in window.performance) window.performance.mark("uv-end");
+		}
+	}
+	_updateLayout() {
+		if (this._layout && this._connected) {
+			this._layout.items = this._items;
+			this._updateView();
+			if (this._childMeasurements !== null) {
+				if (this._measureCallback) this._measureCallback(this._childMeasurements);
+				this._childMeasurements = null;
+			}
+			this._layout.reflowIfNeeded();
+			if (this._benchmarkStart && "mark" in window.performance) window.performance.mark("uv-end");
+		}
+	}
+	_handleScrollEvent() {
+		if (this._benchmarkStart && "mark" in window.performance) {
+			try {
+				window.performance.measure("uv-virtualizing", "uv-start", "uv-end");
+			} catch (e) {
+				console.warn("Error measuring performance data: ", e);
+			}
+			window.performance.mark("uv-start");
+		}
+		if (this._scrollerController.correctingScrollError === false) this._layout?.unpin();
+		this._schedule(this._updateLayout);
+	}
+	handleEvent(event) {
+		switch (event.type) {
+			case "scroll":
+				if (event.currentTarget === window || this._clippingAncestors.includes(event.currentTarget)) this._handleScrollEvent();
+				break;
+			default: console.warn("event not handled", event);
+		}
+	}
+	_handleLayoutMessage(message) {
+		if (message.type === "stateChanged") this._updateDOM(message);
+		else if (message.type === "visibilityChanged") {
+			this._firstVisible = message.firstVisible;
+			this._lastVisible = message.lastVisible;
+			this._notifyVisibility();
+		} else if (message.type === "unpinned") this._hostElement.dispatchEvent(new UnpinnedEvent());
+	}
+	get _children() {
+		const arr = [];
+		let next = this._hostElement.firstElementChild;
+		while (next) {
+			if (!next.hasAttribute(SIZER_ATTRIBUTE)) arr.push(next);
+			next = next.nextElementSibling;
+		}
+		return arr;
+	}
+	_updateView() {
+		const hostElement = this._hostElement;
+		const scrollingElement = this._scrollerController?.element;
+		const layout = this._layout;
+		if (hostElement && scrollingElement && layout) {
+			let top, left, bottom, right;
+			const hostElementBounds = hostElement.getBoundingClientRect();
+			top = 0;
+			left = 0;
+			bottom = window.innerHeight;
+			right = window.innerWidth;
+			const ancestorBounds = this._clippingAncestors.map((ancestor) => ancestor.getBoundingClientRect());
+			ancestorBounds.unshift(hostElementBounds);
+			for (const bounds of ancestorBounds) {
+				top = Math.max(top, bounds.top);
+				left = Math.max(left, bounds.left);
+				bottom = Math.min(bottom, bounds.bottom);
+				right = Math.min(right, bounds.right);
+			}
+			const scrollingElementBounds = scrollingElement.getBoundingClientRect();
+			const offsetWithinScroller = {
+				left: hostElementBounds.left - scrollingElementBounds.left,
+				top: hostElementBounds.top - scrollingElementBounds.top
+			};
+			const totalScrollSize = {
+				width: scrollingElement.scrollWidth,
+				height: scrollingElement.scrollHeight
+			};
+			const scrollTop = top - hostElementBounds.top + hostElement.scrollTop;
+			const scrollLeft = left - hostElementBounds.left + hostElement.scrollLeft;
+			const height = Math.max(0, bottom - top);
+			layout.viewportSize = {
+				width: Math.max(0, right - left),
+				height
+			};
+			layout.viewportScroll = {
+				top: scrollTop,
+				left: scrollLeft
+			};
+			layout.totalScrollSize = totalScrollSize;
+			layout.offsetWithinScroller = offsetWithinScroller;
+		}
+	}
+	/**
+	* Styles the host element so that its size reflects the
+	* total size of all items.
+	*/
+	_sizeHostElement(size) {
+		const max = 82e5;
+		const h = size && size.width !== null ? Math.min(max, size.width) : 0;
+		const v = size && size.height !== null ? Math.min(max, size.height) : 0;
+		if (this._isScroller) this._getSizer().style.transform = `translate(${h}px, ${v}px)`;
+		else {
+			const style = this._hostElement.style;
+			style.minWidth = h ? `${h}px` : "100%";
+			style.minHeight = v ? `${v}px` : "100%";
+		}
+	}
+	/**
+	* Sets the top and left transform style of the children from the values in
+	* pos.
+	*/
+	_positionChildren(pos) {
+		if (pos) pos.forEach(({ top, left, width, height, xOffset, yOffset }, index) => {
+			const child = this._children[index - this._first];
+			if (child) {
+				child.style.position = "absolute";
+				child.style.boxSizing = "border-box";
+				child.style.transform = `translate(${left}px, ${top}px)`;
+				if (width !== void 0) child.style.width = width + "px";
+				if (height !== void 0) child.style.height = height + "px";
+				child.style.left = xOffset === void 0 ? null : xOffset + "px";
+				child.style.top = yOffset === void 0 ? null : yOffset + "px";
+			}
+		});
+	}
+	async _adjustRange(range) {
+		const { _first, _last, _firstVisible, _lastVisible } = this;
+		this._first = range.first;
+		this._last = range.last;
+		this._firstVisible = range.firstVisible;
+		this._lastVisible = range.lastVisible;
+		this._rangeChanged = this._rangeChanged || this._first !== _first || this._last !== _last;
+		this._visibilityChanged = this._visibilityChanged || this._firstVisible !== _firstVisible || this._lastVisible !== _lastVisible;
+	}
+	_correctScrollError() {
+		if (this._scrollError) {
+			const { scrollTop, scrollLeft } = this._scrollerController;
+			const { top, left } = this._scrollError;
+			this._scrollError = null;
+			this._scrollerController.correctScrollError({
+				top: scrollTop - top,
+				left: scrollLeft - left
+			});
+		}
+	}
+	element(index) {
+		if (index === Infinity) index = this._items.length - 1;
+		return this._items?.[index] === void 0 ? void 0 : { scrollIntoView: (options = {}) => this._scrollElementIntoView({
+			...options,
+			index
+		}) };
+	}
+	_scrollElementIntoView(options) {
+		if (options.index >= this._first && options.index <= this._last) this._children[options.index - this._first].scrollIntoView(options);
+		else {
+			options.index = Math.min(options.index, this._items.length - 1);
+			if (options.behavior === "smooth") {
+				const coordinates = this._layout.getScrollIntoViewCoordinates(options);
+				const { behavior } = options;
+				this._updateScrollIntoViewCoordinates = this._scrollerController.managedScrollTo(Object.assign(coordinates, { behavior }), () => this._layout.getScrollIntoViewCoordinates(options), () => this._scrollIntoViewTarget = null);
+				this._scrollIntoViewTarget = options;
+			} else this._layout.pin = options;
+		}
+	}
+	/**
+	* If we are smoothly scrolling to an element and the target element
+	* is in the DOM, we update our target coordinates as needed
+	*/
+	_checkScrollIntoViewTarget(pos) {
+		const { index } = this._scrollIntoViewTarget || {};
+		if (index && pos?.has(index)) this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget));
+	}
+	/**
+	* Emits a rangechange event with the current first, last, firstVisible, and
+	* lastVisible.
+	*/
+	_notifyRange() {
+		this._hostElement.dispatchEvent(new RangeChangedEvent({
+			first: this._first,
+			last: this._last
+		}));
+	}
+	_notifyVisibility() {
+		this._hostElement.dispatchEvent(new VisibilityChangedEvent({
+			first: this._firstVisible,
+			last: this._lastVisible
+		}));
+	}
+	get layoutComplete() {
+		if (!this._layoutCompletePromise) this._layoutCompletePromise = new Promise((resolve, reject) => {
+			this._layoutCompleteResolver = resolve;
+			this._layoutCompleteRejecter = reject;
+		});
+		return this._layoutCompletePromise;
+	}
+	_rejectLayoutCompletePromise(reason) {
+		if (this._layoutCompleteRejecter !== null) this._layoutCompleteRejecter(reason);
+		this._resetLayoutCompleteState();
+	}
+	_scheduleLayoutComplete() {
+		if (this._layoutCompletePromise && this._pendingLayoutComplete === null) this._pendingLayoutComplete = requestAnimationFrame(() => requestAnimationFrame(() => this._resolveLayoutCompletePromise()));
+	}
+	_resolveLayoutCompletePromise() {
+		if (this._layoutCompleteResolver !== null) this._layoutCompleteResolver();
+		this._resetLayoutCompleteState();
+	}
+	_resetLayoutCompleteState() {
+		this._layoutCompletePromise = null;
+		this._layoutCompleteResolver = null;
+		this._layoutCompleteRejecter = null;
+		this._pendingLayoutComplete = null;
+	}
+	/**
+	* Render and update the view at the next opportunity with the given
+	* hostElement size.
+	*/
+	_hostElementSizeChanged() {
+		this._schedule(this._updateLayout);
+	}
+	_childLoaded() {}
+	_childrenSizeChanged(changes) {
+		if (this._layout?.measureChildren) {
+			for (const change of changes) this._toBeMeasured.set(change.target, change.contentRect);
+			this._measureChildren();
+		}
+		this._scheduleLayoutComplete();
+		this._itemsChanged = false;
+		this._rangeChanged = false;
+	}
+};
+function getMargins(el) {
+	const style = window.getComputedStyle(el);
+	return {
+		marginTop: getMarginValue(style.marginTop),
+		marginRight: getMarginValue(style.marginRight),
+		marginBottom: getMarginValue(style.marginBottom),
+		marginLeft: getMarginValue(style.marginLeft)
+	};
+}
+function getMarginValue(value) {
+	const float = value ? parseFloat(value) : NaN;
+	return Number.isNaN(float) ? 0 : float;
+}
+function getParentElement(el) {
+	if (el.assignedSlot !== null) return el.assignedSlot;
+	if (el.parentElement !== null) return el.parentElement;
+	const parentNode = el.parentNode;
+	if (parentNode && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return parentNode.host || null;
+	return null;
+}
+function getElementAncestors(el, includeSelf = false) {
+	const ancestors = [];
+	let parent = includeSelf ? el : getParentElement(el);
+	while (parent !== null) {
+		ancestors.push(parent);
+		parent = getParentElement(parent);
+	}
+	return ancestors;
+}
+function getClippingAncestors(el, includeSelf = false) {
+	let foundFixed = false;
+	return getElementAncestors(el, includeSelf).filter((a) => {
+		if (foundFixed) return false;
+		const style = getComputedStyle(a);
+		foundFixed = style.position === "fixed";
+		return style.overflow !== "visible";
+	});
+}
+//#endregion
+//#region node_modules/.pnpm/@lit-labs+virtualizer@2.1.1/node_modules/@lit-labs/virtualizer/virtualize.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var defaultKeyFunction = (item) => item;
+var defaultRenderItem = (item, idx) => b`${idx}: ${JSON.stringify(item, null, 2)}`;
+var VirtualizeDirective = class extends f {
+	constructor(part) {
+		super(part);
+		this._virtualizer = null;
+		this._first = 0;
+		this._last = -1;
+		this._renderItem = (item, idx) => defaultRenderItem(item, idx + this._first);
+		this._keyFunction = (item, idx) => defaultKeyFunction(item, idx + this._first);
+		this._items = [];
+		if (part.type !== t.CHILD) throw new Error("The virtualize directive can only be used in child expressions");
+	}
+	render(config) {
+		if (config) this._setFunctions(config);
+		const itemsToRender = [];
+		if (this._first >= 0 && this._last >= this._first) for (let i = this._first; i <= this._last; i++) itemsToRender.push(this._items[i]);
+		return c(itemsToRender, this._keyFunction, this._renderItem);
+	}
+	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 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) {
+	const o = `\x1B[${open}m`;
+	const c = `\x1B[${close}m`;
+	return ((arg, ...values) => {
+		if (Array.isArray(arg) && "raw" in arg) {
+			const strings = arg;
+			let out = "";
+			for (let i = 0; i < strings.length; i++) {
+				out += strings[i];
+				if (i < values.length) out += String(values[i]);
+			}
+			return `${o}${out}${c}`;
+		}
+		return `${o}${String(arg)}${c}`;
+	});
+}
+var colors = {
+	blue: makeColor(34, 39),
+	cyan: makeColor(36, 39),
+	gray: makeColor(90, 39),
+	green: makeColor(32, 39),
+	red: makeColor(31, 39),
+	yellow: makeColor(33, 39),
+	bold: makeColor(1, 22),
+	dim: makeColor(2, 22),
+	reset: makeColor(0, 0),
+	underline: makeColor(4, 24)
+};
+//#endregion
+//#region node_modules/.pnpm/nostics@1.2.0/node_modules/nostics/dist/index.mjs
+/**
+* Transforms a value or a function that returns a value to a value.
+*
+* @param valFn either a value or a function that returns a value
+* @param args  arguments to pass to the function if `valFn` is a function
+*
+* @internal
+*/
+function toValueWithArgs(valFn, ...args) {
+	return typeof valFn === "function" ? valFn(...args) : valFn;
+}
+var captureStackTrace = Error.captureStackTrace;
+var Diagnostic = class Diagnostic extends Error {
+	name;
+	/**
+	* The diagnostic code, e.g. `MATH_E001`.
+	* Also appears as the `name` property.
+	*/
+	code;
+	/**
+	* URL to extended documentation for this diagnostic code.
+	* Auto-generated from {@link DefineDiagnosticsOptions.docsBase}.
+	*/
+	docs;
+	/**
+	* Optional actionable instructions on how to resolve the problem.
+	*/
+	fix;
+	/**
+	* Locations in user code that contributed to this diagnostic, in
+	* `file:line:column` format. Relevant when the stack trace doesn't reflect
+	* the user's source (e.g. compilers, bundlers), otherwise redundant with the
+	* stack and should be omitted.
+	*/
+	sources;
+	/**
+	* Alias for {@link Error.message}: the reason this diagnostic was raised.
+	*/
+	get why() {
+		return this.message;
+	}
+	/**
+	* @param init        structured initializer; `why` is required
+	* @param captureFrom V8 stack-cutoff frame. Defaults to {@link Diagnostic}
+	* so the top of the trace is the `new Diagnostic(...)` call site.
+	* `defineDiagnostics` passes its action method to strip its own frames too.
+	* Ignored on engines without `Error.captureStackTrace`.
+	*/
+	constructor(init, captureFrom = Diagnostic) {
+		super(init.why, { cause: init.cause });
+		this.code = this.name = init.code;
+		this.fix = init.fix;
+		this.docs = init.docs;
+		this.sources = init.sources;
+		captureStackTrace?.(this, captureFrom);
+	}
+	/**
+	* Converts the diagnostic into a serializable structured object.
+	*/
+	toJSON() {
+		return {
+			name: this.name,
+			why: this.why,
+			fix: this.fix,
+			docs: this.docs,
+			sources: this.sources,
+			cause: this.cause,
+			stack: this.stack
 		};
 	}
 };
@@ -4013,73 +5109,6 @@ function toAgentToolName(id) {
 	return id.replace(/[^\w-]+/g, "_").slice(0, MAX_TOOL_NAME_LENGTH);
 }
 //#endregion
-//#region \0vite/preload-helper.js
-var scriptRel = "modulepreload";
-var assetsURL = function(dep, importerUrl) {
-	return new URL(dep, importerUrl).href;
-};
-var seen = {};
-var __vitePreload = function preload(baseModule, deps, importerUrl) {
-	let promise = Promise.resolve();
-	if (deps && deps.length > 0) {
-		const links = document.getElementsByTagName("link");
-		const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
-		const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
-		function allSettled(promises) {
-			return Promise.all(promises.map((p) => Promise.resolve(p).then((value) => ({
-				status: "fulfilled",
-				value
-			}), (reason) => ({
-				status: "rejected",
-				reason
-			}))));
-		}
-		function importMetaResolve(specifier) {
-			if (import.meta.resolve) return import.meta.resolve(specifier);
-			return new URL(
-				specifier,
-				/** #__KEEP__ */
-				import.meta.url
-			).href;
-		}
-		promise = allSettled(deps.map((dep) => {
-			dep = assetsURL(dep, importerUrl);
-			dep = importMetaResolve(dep);
-			if (dep in seen) return;
-			seen[dep] = true;
-			const isCss = dep.endsWith(".css");
-			for (let i = links.length - 1; i >= 0; i--) {
-				const link = links[i];
-				if (link.href === dep && (!isCss || link.rel === "stylesheet")) return;
-			}
-			const link = document.createElement("link");
-			link.rel = isCss ? "stylesheet" : scriptRel;
-			if (!isCss) link.as = "script";
-			link.crossOrigin = "";
-			link.href = dep;
-			if (cspNonce) link.setAttribute("nonce", cspNonce);
-			document.head.appendChild(link);
-			if (isCss) return new Promise((res, rej) => {
-				link.addEventListener("load", res);
-				link.addEventListener("error", () => rej(/* @__PURE__ */ new Error(`Unable to preload CSS for ${dep}`)));
-			});
-		}).filter((p) => p !== void 0));
-	}
-	function handlePreloadError(err) {
-		const e = new Event("vite:preloadError", { cancelable: true });
-		e.payload = err;
-		window.dispatchEvent(e);
-		if (!e.defaultPrevented) throw err;
-	}
-	return promise.then((res) => {
-		for (const item of res || []) {
-			if (item.status !== "rejected") continue;
-			handlePreloadError(item.reason);
-		}
-		return baseModule().catch(handlePreloadError);
-	});
-};
-//#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/client/index.mjs
 /** Devframe runtime routes and static output conventions. */
 var DEVFRAME_CONNECTION_META_FILENAME = "__connection.json";
@@ -5980,7 +7009,7 @@ async function getDevframeRpcClient(options = {}) {
 		bootstrapAuthSettled = true;
 	});
 	if (connectionMeta.mcp) __vitePreload(async () => {
-		const { setupBrowserAgentRpcBridge } = await import("./browser-agent-rpc-BXhoSh1z-BvWe4sTJ.js");
+		const { setupBrowserAgentRpcBridge } = await import("./browser-agent-rpc-BXhoSh1z-CRHFLjFo.js");
 		return { setupBrowserAgentRpcBridge };
 	}, [], import.meta.url).then(({ setupBrowserAgentRpcBridge }) => {
 		if (!closed) disposeBrowserAgentBridge = setupBrowserAgentRpcBridge(rpc);
@@ -6026,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
 /**
@@ -6042,6 +7073,7 @@ var SESSION_STATE_KEY = "session";
 var LAYER_FLAGS = {
 	"lit-lifecycle": "litLifecycleEnabled",
 	"lit-render": "litRenderEnabled",
+	"lit-render-verbose": "litRenderVerboseEnabled",
 	mouse: "mouseEventEnabled",
 	keyboard: "keyboardEventEnabled"
 };
@@ -6160,12 +7192,139 @@ var openInEditor = async (file, line) => {
 	} catch (err) {
 		console.warn("[lit-devtools] open-source failed, falling back to the endpoint", err);
 	}
-	try {
-		await openViaEndpoint(file, line);
-	} catch (err) {
-		console.warn("[lit-devtools] open-in-editor failed", err);
+	try {
+		await openViaEndpoint(file, line);
+	} catch (err) {
+		console.warn("[lit-devtools] open-in-editor failed", err);
+	}
+};
+//#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
 /**
@@ -6173,6 +7332,9 @@ var openInEditor = async (file, line) => {
 * 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
@@ -6180,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,
@@ -6198,14 +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 = [];
 	}
 	static {
 		this.styles = [tokens, i$5`
@@ -6225,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);
@@ -6288,6 +7426,9 @@ var TimelineEventList = class TimelineEventList extends i$2 {
         color: var(--lit-devtools-text-muted);
       }
       .row {
+        /* The virtualizer positions rows absolutely; stretch them back. */
+        box-sizing: border-box;
+        width: 100%;
         display: flex;
         align-items: baseline;
         gap: var(--lit-devtools-space-4);
@@ -6303,314 +7444,728 @@ var TimelineEventList = class TimelineEventList extends i$2 {
       .row.selected {
         background: var(--lit-devtools-surface-active);
       }
-      .time {
-        color: var(--lit-devtools-text-muted);
-        flex-shrink: 0;
-        width: 56px;
-        text-align: right;
+      .time {
+        color: var(--lit-devtools-text-muted);
+        flex-shrink: 0;
+        width: 56px;
+        text-align: right;
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        margin-top: 2px;
+      }
+      .title {
+        flex: 1;
+        color: var(--lit-devtools-text);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .subtitle {
+        color: var(--lit-devtools-text-muted);
+        flex-shrink: 0;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .changed {
+        color: var(--lit-devtools-accent);
+        flex-shrink: 0;
+        max-width: 220px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .dur {
+        color: var(--lit-devtools-text-secondary);
+        flex-shrink: 0;
+        width: 62px;
+        text-align: right;
+      }
+      .dur.open {
+        color: var(--lit-devtools-text-muted);
+      }
+    `];
+	}
+	willUpdate(changed) {
+		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")) {
+			const el = this._scrollRef.value;
+			if (el) el.scrollTop = el.scrollHeight;
+		}
+	}
+	_select(key) {
+		this.dispatchEvent(new CustomEvent("span-select", {
+			detail: { key },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* 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);
+	}
+	_layerOn(row) {
+		const l = this.layers.find((l) => l.id === row.layerId);
+		return !l || l.enabled;
+	}
+	render() {
+		const visible = this._visibleCache;
+		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">
+                <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
+                </button>
+                <span class="count"
+                  >${visible.length} / ${this._rowsCache.length}</span
+                >
+              </div>
+            ` : A}
+      ${visible.length === 0 ? b`
+              <div class="scroll">
+                <div class="empty">
+                  <span>No events recorded.</span>
+                  <span class="hint"
+                    >Press Record then interact with the page.</span
+                  >
+                </div>
+              </div>
+            ` : b`
+              <div class="scroll" ${n(this._scrollRef)}>
+                ${virtualize({
+			scroller: true,
+			items: visible,
+			keyFunction: (row, i) => row?.key ?? i,
+			renderItem: (row) => row ? this._renderRow(row) : b``
+		})}
+              </div>
+            `}
+      ${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._select(row.key)}
+      >
+        <span class="time">${row.start.toFixed(1)}ms</span>
+        <span
+          class="dot"
+          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}
+        <span class="subtitle">${row.subtitle ?? A}</span>
+        <span class="dur ${row.duration === void 0 ? "open" : ""}"
+          >${renderDuration(row)}</span
+        >
+      </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([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;
       }
-      .dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
+      .axis {
         flex-shrink: 0;
-        margin-top: 2px;
+        height: 20px;
+        border-bottom: 1px solid var(--lit-devtools-border);
+        color: var(--lit-devtools-text-muted);
       }
-      .title {
-        flex: 1;
-        color: var(--lit-devtools-text);
+      .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;
-        text-overflow: ellipsis;
         white-space: nowrap;
+        border-right: 1px solid var(--lit-devtools-border);
       }
-      .subtitle {
-        color: var(--lit-devtools-text-muted);
-        flex-shrink: 0;
-        max-width: 200px;
+      .ticks {
+        position: relative;
+        flex: 1;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
-      .changed {
-        color: var(--lit-devtools-accent);
-        flex-shrink: 0;
-        max-width: 220px;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      .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;
       }
-      .dur {
-        color: var(--lit-devtools-text-secondary);
-        flex-shrink: 0;
-        width: 62px;
-        text-align: right;
+      .lanes {
+        flex: 1;
+        overflow-y: auto;
+        cursor: grab;
+        user-select: none;
+        touch-action: none;
       }
-      .dur.open {
-        color: var(--lit-devtools-text-muted);
+      .lanes.dragging {
+        cursor: grabbing;
       }
-      .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);
+      .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;
-        max-height: 130px;
-        overflow-y: auto;
       }
-      table {
-        border-collapse: collapse;
-        width: 100%;
+      .plot {
+        flex: 1;
+        min-width: 0;
+        max-height: calc(8 * ${ROW_PX}px);
+        overflow-x: hidden;
+        overflow-y: auto;
       }
-      td {
-        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-4)
-          var(--lit-devtools-space-1) 0;
-        vertical-align: top;
+      .rows {
+        position: relative;
       }
-      .key {
-        color: var(--lit-devtools-text-muted);
+      .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;
       }
-      .val {
-        color: var(--lit-devtools-text);
-        word-break: break-all;
+      .mark.tick {
+        padding: 0;
       }
-      a {
-        color: var(--lit-devtools-accent);
-        text-decoration: none;
+      .mark.open {
+        opacity: 0.45;
       }
-      a:hover {
-        text-decoration: underline;
+      .mark:hover {
+        opacity: 1;
       }
-      .src-link {
-        cursor: pointer;
+      .mark.selected {
+        opacity: 1;
+        outline: 2px solid var(--lit-devtools-text);
+        outline-offset: 0;
+        z-index: 1;
       }
-      .filter-link {
-        cursor: pointer;
-        margin-left: var(--lit-devtools-space-4);
-        font-size: var(--lit-devtools-text-2xs);
+      .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);
       }
     `];
 	}
-	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;
-		}
-	}
-	updated(changed) {
-		if (changed.has("events")) {
-			const el = this._scrollRef.value;
-			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;
+	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);
 	}
-	/** 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");
+	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;
 		}
-		return [...seen].map(([id, tag]) => ({
-			id,
-			tag
-		}));
+		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);
 	}
-	_onFilterChange(e) {
-		const v = e.target.value;
-		this._elementFilter = v === "" ? null : Number(v);
+	_onPointerDown(e) {
+		if (e.button !== 0) return;
+		this._drag = {
+			x: e.clientX,
+			pan: this._currentPan(),
+			moved: false
+		};
 	}
-	/** Ask the panel shell to open the Components tab on this element. */
-	_inspect(id) {
-		this.dispatchEvent(new CustomEvent("inspect-element", {
-			detail: { id },
+	_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
 		}));
 	}
-	_onRegexInput(e) {
-		this._regex = e.target.value;
-	}
-	/** 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(" ")}`;
-	}
 	render() {
-		const elements = this._elementsCache;
-		let re = null;
-		let regexInvalid = false;
-		if (this._regex !== "") try {
-			re = new RegExp(this._regex, "i");
-		} catch {
-			regexInvalid = true;
-		}
-		const visible = this._rowsCache.filter((row) => this._isVisible(row) && (re === null || re.test(this._haystack(row))));
-		const selected = this._selectedKey === null ? void 0 : this._rowsCache.find((row) => row.key === this._selectedKey);
+		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`
-      ${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 ${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;
-		}}
-                >
-                  Raw
-                </button>
-                <span class="count"
-                  >${visible.length} / ${this._rowsCache.length}</span
-                >
-              </div>
-            ` : A}
-      <div class="scroll" ${n(this._scrollRef)}>
-        ${visible.length === 0 ? b`
-                <div class="empty">
-                  <span>No events recorded.</span>
-                  <span class="hint"
-                    >Press Record then interact with the page.</span
-                  >
-                </div>
-              ` : c(visible, (row) => row.key, (row) => b`
-                  <div
-                    class="row ${this._selectedKey === row.key ? "selected" : ""}"
-                    @click=${() => {
-			this._selectedKey = row.key;
-		}}
-                  >
-                    <span class="time">${row.start.toFixed(1)}ms</span>
-                    <span
-                      class="dot"
-                      style=${"background:" + this._colorOf(row.layerId)}
-                    ></span>
-                    <span class="title">${row.name}</span>
-                    ${row.changed?.length ? b`<span class="changed"
-                            >${row.changed.join(", ")}</span
-                          >` : A}
-                    <span class="subtitle">${row.subtitle ?? A}</span>
-                    <span
-                      class="dur ${row.duration === void 0 ? "open" : ""}"
-                      >${renderDuration(row)}</span
-                    >
-                  </div>
-                `)}
+      <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>
-      ${selected ? this._renderDetail(selected) : A}
+      ${detail}
     `;
 	}
-	_renderDetail(row) {
-		const { meta } = row;
-		const src = meta?.source;
-		const data = row.events[0]?.data;
+	_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="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 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 })], TimelineEventList.prototype, "events", 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([r$2()], TimelineEventList.prototype, "_raw", void 0);
-TimelineEventList = __decorate([t$2("timeline-event-list")], TimelineEventList);
+__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
 /**
@@ -6640,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;
@@ -6654,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();
 };
@@ -6679,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();
 		}
@@ -6696,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;
@@ -6749,20 +8403,57 @@ var TimelineView = class TimelineView extends i$2 {
       }
       .export-note {
         color: var(--lit-devtools-text-muted);
-        font-size: var(--lit-devtools-text-2xs);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        font-size: var(--lit-devtools-text-2xs);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .record.active {
+        border-color: var(--lit-devtools-error);
+        background: var(--lit-devtools-error-soft);
+        color: var(--lit-devtools-error);
+      }
+      .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);
       }
-      .record.active {
+      .filterbar input.regex.invalid {
         border-color: var(--lit-devtools-error);
-        background: var(--lit-devtools-error-soft);
-        color: var(--lit-devtools-error);
       }
-      timeline-event-list {
+      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);
@@ -6785,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();
@@ -6816,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);
 	}
@@ -6871,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
@@ -6896,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>
     `;
 	}
 };
@@ -6909,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
@@ -7723,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(() => {});
@@ -7742,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);
 };
@@ -7760,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);
 };
@@ -7773,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
 /**
@@ -8833,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 = {};
@@ -8840,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. */
@@ -8859,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}`);
@@ -8873,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 {
@@ -8888,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);
@@ -8896,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
@@ -8907,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;
@@ -9006,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;
@@ -9046,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();
@@ -9087,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) {
@@ -9117,43 +11108,91 @@ 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
 		});
 	}
+	/** 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>
@@ -9209,7 +11248,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>
@@ -9225,7 +11264,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"}>
@@ -9240,7 +11279,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"}>
@@ -9255,10 +11294,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>
     `;
 	}
 	/**
@@ -9329,24 +11399,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>.
@@ -9373,125 +11428,11 @@ var DevtoolsSettings = class DevtoolsSettings extends i$2 {
 };
 __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
@@ -9636,6 +11577,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;
@@ -9658,9 +11608,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 }
 		});
 	}
 	/**
@@ -9702,7 +11654,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
@@ -9726,6 +11681,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
@@ -9737,4 +11693,4 @@ LitDevtoolsPanel = __decorate([t$2("lit-devtools-panel")], LitDevtoolsPanel);
 //#endregion
 export { onBrowserAgentToolsChanged as n, nanoid as r, listBrowserAgentTools as t };
 
-//# sourceMappingURL=index-CFrVgNfS.js.map
+//# sourceMappingURL=index-Gn4Hk_9s.js.map