@oddsquad/vite-plugin-lit 0.3.0 → 0.5.0

package/lib/timeline/tracks.js

@@ -0,0 +1,168 @@
+/**
+ * @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.
+ */
+export const occupiedEnd = (span) => {
+  if (span.end !== undefined) return span.end;
+  return span.groupId === undefined ? 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.
+ */
+export const buildTracks = (spans, layers) => {
+  const byLayer = new Map();
+  for (const layer of layers) byLayer.set(layer.id, []);
+  for (const span of spans) {
+    let list = byLayer.get(span.layerId);
+    if (list === undefined) {
+      list = [];
+      byLayer.set(span.layerId, list);
+    }
+    list.push(span);
+  }
+  return [...byLayer].map(([layerId, list]) => ({
+    layerId,
+    rows: packRows(list),
+  }));
+};
+const packRows = (spans) => {
+  // `toSpans` already sorts by start; re-sort only if a caller did not.
+  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.
+ */
+export const 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. */
+export const MAX_ZOOM = 100_000;
+/** A recording with a single instant in it still needs a nonzero axis. */
+const 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.
+ */
+export const 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,
+  };
+};
+export const clampZoom = (zoom) =>
+  Math.min(Math.max(Number.isNaN(zoom) ? 1 : zoom, 1), MAX_ZOOM);
+/** Keeps the visible window inside the recording. */
+export const 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. */
+export const 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.
+ */
+export const zoomAt = (originMs, extentMs, width, zoom, pan, x, factor) => {
+  const before = timeScale(originMs, extentMs, width, zoom, pan);
+  const anchor = before.toMs(x);
+  const nextZoom = clampZoom(clampZoom(zoom) * factor);
+  const after = timeScale(originMs, extentMs, width, nextZoom, 0);
+  const nextPan = anchor - originMs - x / after.pxPerMs;
+  return {zoom: nextZoom, pan: clampPan(nextPan, 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.
+ */
+export const 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.
+ */
+export const 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;
+};
+//# sourceMappingURL=tracks.js.map

package/lib/timeline/tracks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracks.js","sourceRoot":"","sources":["../../src/lib/timeline/tracks.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Layout for the Timeline's track view: one horizontal lane per layer on a\n * shared time axis.\n *\n * The list answers \"what happened, in what order, to whom\". It cannot show\n * concurrency or rhythm — which layers fire together, how a click lines up\n * with the update tick it caused, how long a tick is next to its neighbours.\n * This module turns the same {@link TimelineSpan}s into lanes and rows, and\n * owns the arithmetic between milliseconds and pixels, so the element that\n * draws them (`panel/timeline-tracks.ts`) is only DOM.\n *\n * Pure and dependency-free, like `derive.ts`, so it is unit-tested without a\n * browser.\n */\n\nimport type {TimelineSpan} from './derive.js';\n\n/**\n * Spans in one row of a lane, sorted by start and never overlapping, so\n * {@link visibleRange} can binary-search them.\n */\nexport type TrackRow = TimelineSpan[];\n\n/** One lane: every span of one layer, packed into non-overlapping rows. */\nexport interface Track {\n  layerId: string;\n  rows: TrackRow[];\n}\n\n/**\n * Where a span stops occupying its row. A point event occupies only its own\n * instant; a span whose end has not arrived (still running, or its end fell\n * out of the buffer) occupies the rest of the recording, because that is\n * where it is drawn — up to the live edge.\n */\nexport const occupiedEnd = (span: TimelineSpan): number => {\n  if (span.end !== undefined) return span.end;\n  return span.groupId === undefined ? span.start : Infinity;\n};\n\n/**\n * Groups spans into one track per layer, in `layers` order, then any layer\n * the spans mention that `layers` does not (a custom layer announced after the\n * last `get-meta`), in first-seen order. A layer with no spans still gets an\n * empty track, so a lane does not appear and vanish as events arrive.\n *\n * Within a track, spans are packed greedily: each goes into the first row\n * whose last span has ended by the time it starts. Lit's lifecycle phases\n * nest, so one update tick lands as `performUpdate` on row 0 and\n * `willUpdate` / `update` / `updated` side by side on row 1 — the flame shape\n * falls out of the packing without modelling it.\n */\nexport const buildTracks = (\n  spans: readonly TimelineSpan[],\n  layers: readonly {id: string}[]\n): Track[] => {\n  const byLayer = new Map<string, TimelineSpan[]>();\n  for (const layer of layers) byLayer.set(layer.id, []);\n  for (const span of spans) {\n    let list = byLayer.get(span.layerId);\n    if (list === undefined) {\n      list = [];\n      byLayer.set(span.layerId, list);\n    }\n    list.push(span);\n  }\n  return [...byLayer].map(([layerId, list]) => ({\n    layerId,\n    rows: packRows(list),\n  }));\n};\n\nconst packRows = (spans: TimelineSpan[]): TrackRow[] => {\n  // `toSpans` already sorts by start; re-sort only if a caller did not.\n  const sorted = spans.every(\n    (s, i) => i === 0 || spans[i - 1]!.start <= s.start\n  )\n    ? spans\n    : [...spans].sort((a, b) => a.start - b.start);\n  const rows: TrackRow[] = [];\n  const rowEnds: number[] = [];\n  for (const span of sorted) {\n    let row = rowEnds.findIndex((end) => end <= span.start);\n    if (row === -1) {\n      row = rows.length;\n      rows.push([]);\n      rowEnds.push(-Infinity);\n    }\n    rows[row]!.push(span);\n    rowEnds[row] = occupiedEnd(span);\n  }\n  return rows;\n};\n\n/**\n * The recording's time bounds over `spans`: the earliest start, and the\n * latest instant anything is known to have happened (an end, or the start of\n * a span with none). The origin is the earliest start rather than zero\n * because the panel's buffer is capped and rolls its oldest events off; a\n * long recording would otherwise open on an empty stretch.\n */\nexport const timeBounds = (\n  spans: readonly TimelineSpan[]\n): {origin: number; extent: number} => {\n  if (spans.length === 0) return {origin: 0, extent: 0};\n  let origin = Infinity;\n  let last = -Infinity;\n  for (const span of spans) {\n    origin = Math.min(origin, span.start);\n    last = Math.max(last, span.end ?? span.start);\n  }\n  return {origin, extent: last - origin};\n};\n\n/** Deepest zoom, in multiples of \"fit\": about a microsecond per pixel on a\n *  second-long recording, past which there is nothing left to separate. */\nexport const MAX_ZOOM = 100_000;\n\n/** A recording with a single instant in it still needs a nonzero axis. */\nconst MIN_EXTENT_MS = 1;\n\n/** Mapping between recording time and pixels for the current zoom and pan. */\nexport interface TimeScale {\n  pxPerMs: number;\n  /** First and last millisecond inside the plot. */\n  start: number;\n  end: number;\n  toX(ms: number): number;\n  toMs(x: number): number;\n}\n\n/**\n * Builds the scale for a plot `width` pixels wide showing a recording that\n * begins at `originMs` and runs for `extentMs`.\n *\n * `zoom` is a multiple of \"fit\" (1 shows the whole recording); `pan` is how\n * many milliseconds past the origin the left edge sits. Both are clamped, so\n * callers can apply a raw wheel or drag delta and read back where it landed.\n */\nexport const timeScale = (\n  originMs: number,\n  extentMs: number,\n  width: number,\n  zoom = 1,\n  pan = 0\n): TimeScale => {\n  const extent = Math.max(extentMs, MIN_EXTENT_MS);\n  const z = clampZoom(zoom);\n  const visibleMs = extent / z;\n  const p = clampPan(pan, extent, z);\n  const pxPerMs = Math.max(width, 1) / visibleMs;\n  const start = originMs + p;\n  return {\n    pxPerMs,\n    start,\n    end: start + visibleMs,\n    toX: (ms) => (ms - start) * pxPerMs,\n    toMs: (x) => start + x / pxPerMs,\n  };\n};\n\nexport const clampZoom = (zoom: number): number =>\n  Math.min(Math.max(Number.isNaN(zoom) ? 1 : zoom, 1), MAX_ZOOM);\n\n/** Keeps the visible window inside the recording. */\nexport const clampPan = (\n  pan: number,\n  extentMs: number,\n  zoom: number\n): number => {\n  const extent = Math.max(extentMs, MIN_EXTENT_MS);\n  const max = extent - extent / clampZoom(zoom);\n  return Math.min(Math.max(Number.isNaN(pan) ? 0 : pan, 0), max);\n};\n\n/** The pan that puts the live edge (the end of the recording) at the right\n *  of the plot, for following a recording in progress. */\nexport const livePan = (extentMs: number, zoom: number): number =>\n  clampPan(Infinity, extentMs, zoom);\n\n/**\n * Zooms by `factor` while keeping the millisecond under pixel `x` where it\n * is, which is what a wheel over a timeline is expected to do.\n */\nexport const zoomAt = (\n  originMs: number,\n  extentMs: number,\n  width: number,\n  zoom: number,\n  pan: number,\n  x: number,\n  factor: number\n): {zoom: number; pan: number} => {\n  const before = timeScale(originMs, extentMs, width, zoom, pan);\n  const anchor = before.toMs(x);\n  const nextZoom = clampZoom(clampZoom(zoom) * factor);\n  const after = timeScale(originMs, extentMs, width, nextZoom, 0);\n  const nextPan = anchor - originMs - x / after.pxPerMs;\n  return {zoom: nextZoom, pan: clampPan(nextPan, extentMs, nextZoom)};\n};\n\n/**\n * Index range `[from, to)` of the spans in `row` that intersect the window\n * `[start, end]`, found by binary search so a zoomed-in lane renders a\n * handful of marks rather than walking thousands.\n *\n * Only the span just before the first one starting inside the window can\n * reach into it, because a row's spans never overlap.\n */\nexport const visibleRange = (\n  row: TrackRow,\n  start: number,\n  end: number\n): [number, number] => {\n  const firstAtOrAfter = (t: number, inclusive: boolean) => {\n    let lo = 0;\n    let hi = row.length;\n    while (lo < hi) {\n      const mid = (lo + hi) >> 1;\n      const s = row[mid]!.start;\n      if (inclusive ? s < t : s <= t) lo = mid + 1;\n      else hi = mid;\n    }\n    return lo;\n  };\n  let from = firstAtOrAfter(start, true);\n  if (from > 0 && occupiedEnd(row[from - 1]!) >= start) from--;\n  const to = firstAtOrAfter(end, false);\n  return [from, Math.max(from, to)];\n};\n\n/**\n * A round tick interval (1, 2 or 5 times a power of ten, in milliseconds) at\n * least `minMs` long, for axis labels that land on readable numbers.\n */\nexport const niceStep = (minMs: number): number => {\n  if (!(minMs > 0) || !Number.isFinite(minMs)) return 1;\n  const pow = 10 ** Math.floor(Math.log10(minMs));\n  for (const m of [1, 2, 5, 10]) {\n    if (m * pow >= minMs) return m * pow;\n  }\n  return 10 * pow;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddsquad/vite-plugin-lit",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Vite plugin providing true HMR for Lit components, plus CSS helpers and a DevTools panel",
   "license": "BSD-3-Clause",
   "author": "Oddsquad (based on @lit-labs/vite-hmr by Google LLC)",
@@ -28,6 +28,10 @@
       "types": "./lib/runtime/css.d.ts",
       "default": "./lib/runtime/css.js"
     },
+    "./connect.js": {
+      "types": "./lib/runtime/rpc-transport.d.ts",
+      "default": "./lib/runtime/rpc-transport.js"
+    },
     "./client": {
       "types": "./client.d.ts"
     }
@@ -77,9 +81,11 @@
     "@types/node": "^26.6.1",
     "@vitejs/devtools-kit": "0.7.5",
     "cac": "7.0.0",
+    "git-cliff": "^2.13.1",
     "lightningcss": "^1.33.0",
     "lit": "^3.3.3",
     "playwright-core": "^1.63.0",
+    "temporal-polyfill": "^1.0.5",
     "typescript": "^7.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.3.2",
     "vite-plus": "0.3.2"
@@ -107,10 +113,12 @@
     "test": "pnpm run test:unit && pnpm run test:e2e",
     "test:unit": "node scripts/check-client-types.mjs && vp test run --project unit",
     "test:e2e": "pnpm run build && vp test run --project e2e",
+    "changelog": "git-cliff --unreleased",
     "bench": "node bench/run.mjs",
     "bench:serve": "node bench/run.mjs --serve",
     "docs:dev": "pnpm --filter ./docs dev",
     "docs:build": "pnpm --filter ./docs build",
+    "docs:shots": "pnpm run build && node scripts/docs-shots.mjs",
     "format": "vp fmt \"**/*.{cjs,html,js,json,md,mdx,ts,yaml}\"",
     "format:check": "vp fmt \"**/*.{cjs,html,js,json,md,mdx,ts,yaml}\" --check",
     "build:panel": "vp build src/panel"

package/types/timeline.d.ts

@@ -9,8 +9,18 @@ export interface TimelineLayer {
     color: number;
 }
 export interface TimelineEvent<TData = unknown> {
+    /**
+     * Stable identity, stamped on the Node side (`${epoch}-${seq}`) when the
+     * event is received, so it survives the stream, `recent-events` and a
+     * snapshot export. Absent on events still in the page runtime.
+     */
+    id?: string;
     layerId: string;
-    /** `performance.now()` timestamp in the browser. */
+    /**
+     * Milliseconds since recording started, stamped in the browser page
+     * (`performance.now()` re-zeroed on each recording start; see
+     * `runtime/timeline/clock.ts`). Not comparable to any Node-side clock.
+     */
     time: number;
     data: TData;
     title?: string;
@@ -31,6 +41,13 @@ export interface TimelineLayersState {
     recordingState: boolean;
     litLifecycleEnabled: boolean;
     litRenderEnabled: boolean;
+    /**
+     * Per-part `lit-debug` events (`template updating`, `set part`, `commit
+     * *`, …) — one per binding on *every* render, so a ticking clock or
+     * animation floods the layer. Off by default; the `lit-render` layer's
+     * begin/end render pair already covers the common case.
+     */
+    litRenderVerboseEnabled: boolean;
     mouseEventEnabled: boolean;
     keyboardEventEnabled: boolean;
 }
@@ -59,6 +76,29 @@ export interface FeatureSettings {
         throttleMs: number;
     };
     timeline: boolean;
+    /**
+     * Which layer supplied each setting, keyed like {@link SettingsOverride}
+     * (plus the read-only source-overlay rows). Lets the panel label a value
+     * "Zed (env)" and name the baseline a panel override replaced. Optional so
+     * older producers (and snapshots) without it still type-check.
+     */
+    sources?: SettingSources;
+}
+/**
+ * Where a resolved setting came from, in precedence order after a panel
+ * override: an explicit `litPlugin({...})` option, a `LIT_PLUGIN_*` env var,
+ * or the built-in default.
+ */
+export type SettingSource = 'option' | 'env' | 'default';
+/** Per-setting {@link SettingSource}, as carried on {@link FeatureSettings}. */
+export interface SettingSources {
+    hmrReconnect?: SettingSource;
+    hmrOnIncompatible?: SettingSource;
+    hmrIndicatorVisible?: SettingSource;
+    hmrIndicatorCount?: SettingSource;
+    sourceOverlayEditor?: SettingSource;
+    sourceOverlayKey?: SettingSource;
+    sourceOverlayThrottleMs?: SettingSource;
 }
 /**
  * Runtime overrides the panel applies on top of the resolved env config, for
@@ -99,6 +139,15 @@ export declare const SOURCE_OVERLAY_EDITORS: ReadonlyArray<{
 }>;
 /** localStorage key holding the {@link SettingsOverride}. */
 export declare const SETTINGS_OVERRIDE_LS_KEY = "lit-devtools-overrides";
+/**
+ * The resolved config value each overridden key was set against, recorded so
+ * the Settings tab can notice when `.env` or plugin options moved on. Kept
+ * beside the {@link SettingsOverride}, never inside it: the runtime applies and
+ * receives the override as-is and has no use for these.
+ */
+export type OverrideBaselines = Partial<Record<'hmrReconnect' | 'hmrOnIncompatible' | 'hmrIndicatorVisible' | 'hmrIndicatorCount' | 'sourceOverlayEditor', unknown>>;
+/** localStorage key holding the {@link OverrideBaselines}. */
+export declare const OVERRIDE_BASELINES_LS_KEY = "lit-devtools-override-baselines";
 /** Vite HMR channel the server uses to push overrides to the app runtime. */
 export declare const SETTINGS_OVERRIDE_CHANNEL = "lit-devtools:settings-override";
 /**

package/types/timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../src/types/timeline.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,OAAO;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAC,CAAC;KACvC,CAAC;CACH;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAKnD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,mBAMlC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE;QACH,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;QAClC,gBAAgB,EAAE,OAAO,CAAC;QAC1B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,aAAa,EAAE;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,oEAAoE;QACpE,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,aAAa,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,wBAAwB,2BAA2B,CAAC;AAEjE,6EAA6E;AAC7E,eAAO,MAAM,yBAAyB,mCAAmC,CAAC;AAE1E;;;GAGG;AACH,eAAO,MAAM,6BAA6B,uCACJ,CAAC"}
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../src/types/timeline.ts"],"names":[],"mappings":"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"}

package/types/timeline.js

@@ -6,6 +6,7 @@
 export const TIMELINE_LAYERS = [
     { id: 'lit-lifecycle', label: 'Lit Lifecycle', color: 0x4d63ff },
     { id: 'lit-render', label: 'Lit Render', color: 0x325cff },
+    { id: 'lit-render-verbose', label: 'Lit Render (verbose)', color: 0x99aeff },
     { id: 'mouse', label: 'Mouse', color: 0xa451af },
     { id: 'keyboard', label: 'Keyboard', color: 0x8151af },
 ];
@@ -13,6 +14,7 @@ export const DEFAULT_LAYERS_STATE = {
     recordingState: false,
     litLifecycleEnabled: true,
     litRenderEnabled: true,
+    litRenderVerboseEnabled: false,
     mouseEventEnabled: false,
     keyboardEventEnabled: false,
 };
@@ -29,6 +31,8 @@ export const SOURCE_OVERLAY_EDITORS = [
 ];
 /** localStorage key holding the {@link SettingsOverride}. */
 export const SETTINGS_OVERRIDE_LS_KEY = 'lit-devtools-overrides';
+/** localStorage key holding the {@link OverrideBaselines}. */
+export const OVERRIDE_BASELINES_LS_KEY = 'lit-devtools-override-baselines';
 /** Vite HMR channel the server uses to push overrides to the app runtime. */
 export const SETTINGS_OVERRIDE_CHANNEL = 'lit-devtools:settings-override';
 /**

package/types/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../src/types/timeline.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAiCH,MAAM,CAAC,MAAM,eAAe,GAA6B;IACvD,EAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAC;IAC9D,EAAC,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAC;IACxD,EAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAC;IAC9C,EAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAC;CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,cAAc,EAAE,KAAK;IACrB,mBAAmB,EAAE,IAAI;IACzB,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,KAAK;IACxB,oBAAoB,EAAE,KAAK;CAC5B,CAAC;AAyDF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAG9B;IACH,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAC;IACnC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;IAClC,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;IAC5B,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAC;IAClC,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAC;CACvC,CAAC;AAEF,6DAA6D;AAC7D,MAAM,CAAC,MAAM,wBAAwB,GAAG,wBAAwB,CAAC;AAEjE,6EAA6E;AAC7E,MAAM,CAAC,MAAM,yBAAyB,GAAG,gCAAgC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GACxC,oCAAoC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nexport interface TimelineLayer {\n  id: string;\n  label: string;\n  color: number; // 0xRRGGBB\n}\n\nexport interface TimelineEvent<TData = unknown> {\n  layerId: string;\n  /** `performance.now()` timestamp in the browser. */\n  time: number;\n  data: TData;\n  title?: string;\n  subtitle?: string;\n  /** Pairs a start event with its matching end event in the same update group. */\n  groupId?: number | string;\n  logType?: 'default' | 'warning' | 'error';\n  meta?: {\n    elementId?: number;\n    tagName?: string;\n    source?: {file: string; line: number};\n  };\n}\n\nexport interface TimelineLayersState {\n  recordingState: boolean;\n  litLifecycleEnabled: boolean;\n  litRenderEnabled: boolean;\n  mouseEventEnabled: boolean;\n  keyboardEventEnabled: boolean;\n}\n\nexport const TIMELINE_LAYERS: readonly TimelineLayer[] = [\n  {id: 'lit-lifecycle', label: 'Lit Lifecycle', color: 0x4d63ff},\n  {id: 'lit-render', label: 'Lit Render', color: 0x325cff},\n  {id: 'mouse', label: 'Mouse', color: 0xa451af},\n  {id: 'keyboard', label: 'Keyboard', color: 0x8151af},\n];\n\nexport const DEFAULT_LAYERS_STATE: TimelineLayersState = {\n  recordingState: false,\n  litLifecycleEnabled: true,\n  litRenderEnabled: true,\n  mouseEventEnabled: false,\n  keyboardEventEnabled: false,\n};\n\n/**\n * Snapshot of the plugin's resolved feature settings, surfaced in the panel's\n * Settings tab. The plugin produces this at config time (explicit options >\n * LIT_PLUGIN_* env > defaults) and serves it from the panel server. It's the\n * baseline the panel shows; some HMR settings can then be overridden live (see\n * {@link SettingsOverride}).\n */\nexport interface FeatureSettings {\n  hmr: {\n    enabled: boolean;\n    reconnect: boolean;\n    onIncompatible: 'reload' | 'warn';\n    indicatorEnabled: boolean;\n    indicatorCount: boolean;\n  };\n  sourceOverlay: {\n    enabled: boolean;\n    /** Hotkey letter combined with Ctrl+Shift to toggle the overlay. */\n    key: string;\n    editor: string;\n    throttleMs: number;\n  };\n  timeline: boolean;\n}\n\n/**\n * Runtime overrides the panel applies on top of the resolved env config, for\n * settings whose runtime is already injected (so they can change live). A\n * feature disabled at config time has no runtime, so it can't be enabled here\n * — only the behaviour of already-enabled features is overridable.\n *\n * Persisted under {@link SETTINGS_OVERRIDE_LS_KEY} (the panel and app share an\n * origin) so overrides survive reloads, and pushed live over\n * {@link SETTINGS_OVERRIDE_CHANNEL} via Vite HMR for immediate effect.\n */\nexport interface SettingsOverride {\n  hmrReconnect?: boolean;\n  hmrOnIncompatible?: 'reload' | 'warn';\n  hmrIndicatorVisible?: boolean;\n  hmrIndicatorCount?: boolean;\n  /** Built-in editor key for the source overlay's open-in-editor target. */\n  sourceOverlayEditor?: string;\n  /**\n   * Flash a short outline over every Lit element that completes an update.\n   * Pure preference (no config-time baseline), so `undefined` reads as off.\n   */\n  flashUpdates?: boolean;\n  /**\n   * Colour the flash by how often the element updated in the last second,\n   * calm to hot, instead of one flat colour. Only meaningful with\n   * {@link SettingsOverride.flashUpdates}.\n   */\n  flashUpdatesRamp?: boolean;\n}\n\n/**\n * Built-in editors the source overlay can open files in. Keep in sync with\n * BUILTIN_EDITORS in lib/runtime/source-overlay/editors.ts.\n */\nexport const SOURCE_OVERLAY_EDITORS: ReadonlyArray<{\n  value: string;\n  label: string;\n}> = [\n  {value: 'vscode', label: 'VS Code'},\n  {value: 'cursor', label: 'Cursor'},\n  {value: 'zed', label: 'Zed'},\n  {value: 'idea', label: 'IntelliJ'},\n  {value: 'windsurf', label: 'Windsurf'},\n];\n\n/** localStorage key holding the {@link SettingsOverride}. */\nexport const SETTINGS_OVERRIDE_LS_KEY = 'lit-devtools-overrides';\n\n/** Vite HMR channel the server uses to push overrides to the app runtime. */\nexport const SETTINGS_OVERRIDE_CHANNEL = 'lit-devtools:settings-override';\n\n/**\n * Vite HMR channel the DevTools \"toggle source overlay\" command uses to tell\n * the app runtime to toggle the overlay (the command handler runs server-side).\n */\nexport const SOURCE_OVERLAY_TOGGLE_CHANNEL =\n  'lit-devtools:toggle-source-overlay';\n"]}
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../src/types/timeline.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAkDH,MAAM,CAAC,MAAM,eAAe,GAA6B;IACvD,EAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAC;IAC9D,EAAC,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAC;IACxD,EAAC,EAAE,EAAE,oBAAoB,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,QAAQ,EAAC;IAC1E,EAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAC;IAC9C,EAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAC;CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,cAAc,EAAE,KAAK;IACrB,mBAAmB,EAAE,IAAI;IACzB,gBAAgB,EAAE,IAAI;IACtB,uBAAuB,EAAE,KAAK;IAC9B,iBAAiB,EAAE,KAAK;IACxB,oBAAoB,EAAE,KAAK;CAC5B,CAAC;AAkFF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAG9B;IACH,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAC;IACnC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;IAClC,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;IAC5B,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAC;IAClC,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAC;CACvC,CAAC;AAEF,6DAA6D;AAC7D,MAAM,CAAC,MAAM,wBAAwB,GAAG,wBAAwB,CAAC;AAmBjE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,yBAAyB,GAAG,iCAAiC,CAAC;AAE3E,6EAA6E;AAC7E,MAAM,CAAC,MAAM,yBAAyB,GAAG,gCAAgC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GACxC,oCAAoC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nexport interface TimelineLayer {\n  id: string;\n  label: string;\n  color: number; // 0xRRGGBB\n}\n\nexport interface TimelineEvent<TData = unknown> {\n  /**\n   * Stable identity, stamped on the Node side (`${epoch}-${seq}`) when the\n   * event is received, so it survives the stream, `recent-events` and a\n   * snapshot export. Absent on events still in the page runtime.\n   */\n  id?: string;\n  layerId: string;\n  /**\n   * Milliseconds since recording started, stamped in the browser page\n   * (`performance.now()` re-zeroed on each recording start; see\n   * `runtime/timeline/clock.ts`). Not comparable to any Node-side clock.\n   */\n  time: number;\n  data: TData;\n  title?: string;\n  subtitle?: string;\n  /** Pairs a start event with its matching end event in the same update group. */\n  groupId?: number | string;\n  logType?: 'default' | 'warning' | 'error';\n  meta?: {\n    elementId?: number;\n    tagName?: string;\n    source?: {file: string; line: number};\n  };\n}\n\nexport interface TimelineLayersState {\n  recordingState: boolean;\n  litLifecycleEnabled: boolean;\n  litRenderEnabled: boolean;\n  /**\n   * Per-part `lit-debug` events (`template updating`, `set part`, `commit\n   * *`, …) — one per binding on *every* render, so a ticking clock or\n   * animation floods the layer. Off by default; the `lit-render` layer's\n   * begin/end render pair already covers the common case.\n   */\n  litRenderVerboseEnabled: boolean;\n  mouseEventEnabled: boolean;\n  keyboardEventEnabled: boolean;\n}\n\nexport const TIMELINE_LAYERS: readonly TimelineLayer[] = [\n  {id: 'lit-lifecycle', label: 'Lit Lifecycle', color: 0x4d63ff},\n  {id: 'lit-render', label: 'Lit Render', color: 0x325cff},\n  {id: 'lit-render-verbose', label: 'Lit Render (verbose)', color: 0x99aeff},\n  {id: 'mouse', label: 'Mouse', color: 0xa451af},\n  {id: 'keyboard', label: 'Keyboard', color: 0x8151af},\n];\n\nexport const DEFAULT_LAYERS_STATE: TimelineLayersState = {\n  recordingState: false,\n  litLifecycleEnabled: true,\n  litRenderEnabled: true,\n  litRenderVerboseEnabled: false,\n  mouseEventEnabled: false,\n  keyboardEventEnabled: false,\n};\n\n/**\n * Snapshot of the plugin's resolved feature settings, surfaced in the panel's\n * Settings tab. The plugin produces this at config time (explicit options >\n * LIT_PLUGIN_* env > defaults) and serves it from the panel server. It's the\n * baseline the panel shows; some HMR settings can then be overridden live (see\n * {@link SettingsOverride}).\n */\nexport interface FeatureSettings {\n  hmr: {\n    enabled: boolean;\n    reconnect: boolean;\n    onIncompatible: 'reload' | 'warn';\n    indicatorEnabled: boolean;\n    indicatorCount: boolean;\n  };\n  sourceOverlay: {\n    enabled: boolean;\n    /** Hotkey letter combined with Ctrl+Shift to toggle the overlay. */\n    key: string;\n    editor: string;\n    throttleMs: number;\n  };\n  timeline: boolean;\n  /**\n   * Which layer supplied each setting, keyed like {@link SettingsOverride}\n   * (plus the read-only source-overlay rows). Lets the panel label a value\n   * \"Zed (env)\" and name the baseline a panel override replaced. Optional so\n   * older producers (and snapshots) without it still type-check.\n   */\n  sources?: SettingSources;\n}\n\n/**\n * Where a resolved setting came from, in precedence order after a panel\n * override: an explicit `litPlugin({...})` option, a `LIT_PLUGIN_*` env var,\n * or the built-in default.\n */\nexport type SettingSource = 'option' | 'env' | 'default';\n\n/** Per-setting {@link SettingSource}, as carried on {@link FeatureSettings}. */\nexport interface SettingSources {\n  hmrReconnect?: SettingSource;\n  hmrOnIncompatible?: SettingSource;\n  hmrIndicatorVisible?: SettingSource;\n  hmrIndicatorCount?: SettingSource;\n  sourceOverlayEditor?: SettingSource;\n  sourceOverlayKey?: SettingSource;\n  sourceOverlayThrottleMs?: SettingSource;\n}\n\n/**\n * Runtime overrides the panel applies on top of the resolved env config, for\n * settings whose runtime is already injected (so they can change live). A\n * feature disabled at config time has no runtime, so it can't be enabled here\n * — only the behaviour of already-enabled features is overridable.\n *\n * Persisted under {@link SETTINGS_OVERRIDE_LS_KEY} (the panel and app share an\n * origin) so overrides survive reloads, and pushed live over\n * {@link SETTINGS_OVERRIDE_CHANNEL} via Vite HMR for immediate effect.\n */\nexport interface SettingsOverride {\n  hmrReconnect?: boolean;\n  hmrOnIncompatible?: 'reload' | 'warn';\n  hmrIndicatorVisible?: boolean;\n  hmrIndicatorCount?: boolean;\n  /** Built-in editor key for the source overlay's open-in-editor target. */\n  sourceOverlayEditor?: string;\n  /**\n   * Flash a short outline over every Lit element that completes an update.\n   * Pure preference (no config-time baseline), so `undefined` reads as off.\n   */\n  flashUpdates?: boolean;\n  /**\n   * Colour the flash by how often the element updated in the last second,\n   * calm to hot, instead of one flat colour. Only meaningful with\n   * {@link SettingsOverride.flashUpdates}.\n   */\n  flashUpdatesRamp?: boolean;\n}\n\n/**\n * Built-in editors the source overlay can open files in. Keep in sync with\n * BUILTIN_EDITORS in lib/runtime/source-overlay/editors.ts.\n */\nexport const SOURCE_OVERLAY_EDITORS: ReadonlyArray<{\n  value: string;\n  label: string;\n}> = [\n  {value: 'vscode', label: 'VS Code'},\n  {value: 'cursor', label: 'Cursor'},\n  {value: 'zed', label: 'Zed'},\n  {value: 'idea', label: 'IntelliJ'},\n  {value: 'windsurf', label: 'Windsurf'},\n];\n\n/** localStorage key holding the {@link SettingsOverride}. */\nexport const SETTINGS_OVERRIDE_LS_KEY = 'lit-devtools-overrides';\n\n/**\n * The resolved config value each overridden key was set against, recorded so\n * the Settings tab can notice when `.env` or plugin options moved on. Kept\n * beside the {@link SettingsOverride}, never inside it: the runtime applies and\n * receives the override as-is and has no use for these.\n */\nexport type OverrideBaselines = Partial<\n  Record<\n    | 'hmrReconnect'\n    | 'hmrOnIncompatible'\n    | 'hmrIndicatorVisible'\n    | 'hmrIndicatorCount'\n    | 'sourceOverlayEditor',\n    unknown\n  >\n>;\n\n/** localStorage key holding the {@link OverrideBaselines}. */\nexport const OVERRIDE_BASELINES_LS_KEY = 'lit-devtools-override-baselines';\n\n/** Vite HMR channel the server uses to push overrides to the app runtime. */\nexport const SETTINGS_OVERRIDE_CHANNEL = 'lit-devtools:settings-override';\n\n/**\n * Vite HMR channel the DevTools \"toggle source overlay\" command uses to tell\n * the app runtime to toggle the overlay (the command handler runs server-side).\n */\nexport const SOURCE_OVERLAY_TOGGLE_CHANNEL =\n  'lit-devtools:toggle-source-overlay';\n"]}