@oddsquad/vite-plugin-lit 0.5.0 → 0.6.0

package/dist/client/index.html

@@ -32,7 +32,7 @@
       `prefers-color-scheme` @media owns it, following the host/OS; an explicit
       light/dark pins a `.color-scheme-*` class on :root.
     -->
-    <script type="module" crossorigin src="./assets/index-Gn4Hk_9s.js"></script>
+    <script type="module" crossorigin src="./assets/index-DVr5EnyB.js"></script>
   </head>
   <body>
     <lit-devtools-panel></lit-devtools-panel>

package/lib/runtime/timeline/chrome-tracks.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Mirrors timeline events into Chrome DevTools' Performance panel as custom
+ * tracks, via `console.timeStamp(label, start, end, track, group, color)`.
+ *
+ * Start/end are `performance.now()` values. Paired `:start`/`:end` events
+ * become a range; everything else becomes a zero-length marker.
+ */
+import type { TimelineEvent } from '../../../types/timeline.js';
+type TrackColor = 'primary' | 'primary-light' | 'primary-dark' | 'secondary' | 'secondary-light' | 'secondary-dark' | 'tertiary' | 'tertiary-light' | 'tertiary-dark' | 'error';
+export type TimeStamp = (label: string, start: number, end: number, track: string, group: string, color: TrackColor) => void;
+export interface ChromeTracksSink {
+    push(event: TimelineEvent): void;
+    reset(): void;
+}
+export declare const createChromeTracksSink: (stamp?: TimeStamp, toPerf?: (t: number) => number) => ChromeTracksSink;
+export {};
+//# sourceMappingURL=chrome-tracks.d.ts.map

package/lib/runtime/timeline/chrome-tracks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chrome-tracks.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/chrome-tracks.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAG9D,KAAK,UAAU,GACX,SAAS,GACT,eAAe,GACf,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,gBAAgB,GAChB,UAAU,GACV,gBAAgB,GAChB,eAAe,GACf,OAAO,CAAC;AAEZ,MAAM,MAAM,SAAS,GAAG,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,UAAU,KACd,IAAI,CAAC;AAEV,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAuBD,eAAO,MAAM,sBAAsB,WAC1B,SAAS,WACR,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,KAC5B,gBAgDF,CAAC"}

package/lib/runtime/timeline/chrome-tracks.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import {toPerfTime} from './clock.js';
+const GROUP = 'Lit';
+const MAX_PENDING = 1000;
+const TRACKS = {
+  'lit-lifecycle': {track: 'Lifecycle', color: 'primary', lit: true},
+  'lit-render': {track: 'Render', color: 'secondary', lit: true},
+  'lit-render-verbose': {
+    track: 'Render (verbose)',
+    color: 'secondary-light',
+    lit: true,
+  },
+  mouse: {track: 'Input', color: 'tertiary', lit: false},
+  keyboard: {track: 'Input', color: 'tertiary', lit: false},
+};
+const consoleStamp = (...args) => {
+  const c = console;
+  if (typeof c.timeStamp === 'function') c.timeStamp(...args);
+};
+export const createChromeTracksSink = (
+  stamp = consoleStamp,
+  toPerf = toPerfTime
+) => {
+  // Start times are converted at receipt because the clock epoch can reset
+  // before the matching :end arrives.
+  const pending = new Map();
+  return {
+    push(event) {
+      const cfg = TRACKS[event.layerId];
+      if (cfg === undefined) return;
+      const title = event.title ?? '';
+      const isError = event.logType === 'error';
+      const isStart = title.endsWith(':start');
+      const isEnd = title.endsWith(':end');
+      const phase =
+        isStart || isEnd ? title.slice(0, title.lastIndexOf(':')) : title;
+      const tag = cfg.lit ? (event.meta?.tagName ?? event.subtitle) : undefined;
+      const label = tag ? `<${tag}> ${phase}` : phase;
+      if (isStart) {
+        const key = `${event.layerId}|${event.groupId}|${phase}`;
+        pending.delete(key);
+        pending.set(key, {start: toPerf(event.time), error: isError});
+        if (pending.size > MAX_PENDING) {
+          const oldest = pending.keys().next().value;
+          if (oldest !== undefined) pending.delete(oldest);
+        }
+      } else if (isEnd) {
+        const key = `${event.layerId}|${event.groupId}|${phase}`;
+        const p = pending.get(key);
+        if (p === undefined) return;
+        pending.delete(key);
+        stamp(
+          label,
+          p.start,
+          toPerf(event.time),
+          cfg.track,
+          GROUP,
+          p.error || isError ? 'error' : cfg.color
+        );
+      } else {
+        const t = toPerf(event.time);
+        stamp(label, t, t, cfg.track, GROUP, isError ? 'error' : cfg.color);
+      }
+    },
+    reset() {
+      pending.clear();
+    },
+  };
+};
+//# sourceMappingURL=chrome-tracks.js.map

package/lib/runtime/timeline/chrome-tracks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chrome-tracks.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/chrome-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 * Mirrors timeline events into Chrome DevTools' Performance panel as custom\n * tracks, via `console.timeStamp(label, start, end, track, group, color)`.\n *\n * Start/end are `performance.now()` values. Paired `:start`/`:end` events\n * become a range; everything else becomes a zero-length marker.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\nimport {toPerfTime} from './clock.js';\n\ntype TrackColor =\n  | 'primary'\n  | 'primary-light'\n  | 'primary-dark'\n  | 'secondary'\n  | 'secondary-light'\n  | 'secondary-dark'\n  | 'tertiary'\n  | 'tertiary-light'\n  | 'tertiary-dark'\n  | 'error';\n\nexport type TimeStamp = (\n  label: string,\n  start: number,\n  end: number,\n  track: string,\n  group: string,\n  color: TrackColor\n) => void;\n\nexport interface ChromeTracksSink {\n  push(event: TimelineEvent): void;\n  reset(): void;\n}\n\nconst GROUP = 'Lit';\nconst MAX_PENDING = 1000;\n\nconst TRACKS: Record<string, {track: string; color: TrackColor; lit: boolean}> =\n  {\n    'lit-lifecycle': {track: 'Lifecycle', color: 'primary', lit: true},\n    'lit-render': {track: 'Render', color: 'secondary', lit: true},\n    'lit-render-verbose': {\n      track: 'Render (verbose)',\n      color: 'secondary-light',\n      lit: true,\n    },\n    mouse: {track: 'Input', color: 'tertiary', lit: false},\n    keyboard: {track: 'Input', color: 'tertiary', lit: false},\n  };\n\nconst consoleStamp: TimeStamp = (...args) => {\n  const c = console as unknown as {timeStamp?: TimeStamp};\n  if (typeof c.timeStamp === 'function') c.timeStamp(...args);\n};\n\nexport const createChromeTracksSink = (\n  stamp: TimeStamp = consoleStamp,\n  toPerf: (t: number) => number = toPerfTime\n): ChromeTracksSink => {\n  // Start times are converted at receipt because the clock epoch can reset\n  // before the matching :end arrives.\n  const pending = new Map<string, {start: number; error: boolean}>();\n\n  return {\n    push(event) {\n      const cfg = TRACKS[event.layerId];\n      if (cfg === undefined) return;\n      const title = event.title ?? '';\n      const isError = event.logType === 'error';\n      const isStart = title.endsWith(':start');\n      const isEnd = title.endsWith(':end');\n      const phase =\n        isStart || isEnd ? title.slice(0, title.lastIndexOf(':')) : title;\n      const tag = cfg.lit ? (event.meta?.tagName ?? event.subtitle) : undefined;\n      const label = tag ? `<${tag}> ${phase}` : phase;\n\n      if (isStart) {\n        const key = `${event.layerId}|${event.groupId}|${phase}`;\n        pending.delete(key);\n        pending.set(key, {start: toPerf(event.time), error: isError});\n        if (pending.size > MAX_PENDING) {\n          const oldest = pending.keys().next().value;\n          if (oldest !== undefined) pending.delete(oldest);\n        }\n      } else if (isEnd) {\n        const key = `${event.layerId}|${event.groupId}|${phase}`;\n        const p = pending.get(key);\n        if (p === undefined) return;\n        pending.delete(key);\n        stamp(\n          label,\n          p.start,\n          toPerf(event.time),\n          cfg.track,\n          GROUP,\n          p.error || isError ? 'error' : cfg.color\n        );\n      } else {\n        const t = toPerf(event.time);\n        stamp(label, t, t, cfg.track, GROUP, isError ? 'error' : cfg.color);\n      }\n    },\n    reset() {\n      pending.clear();\n    },\n  };\n};\n"]}

package/lib/runtime/timeline/clock.d.ts

@@ -7,4 +7,10 @@
 export declare const resetClock: () => void;
 /** Milliseconds since the last {@link resetClock}. */
 export declare const now: () => number;
+/**
+ * Convert a recording-relative time (from {@link now}) back to a
+ * `performance.now()` value, i.e. milliseconds since `performance.timeOrigin`.
+ * Chrome DevTools' `console.timeStamp` expects that timebase.
+ */
+export declare const toPerfTime: (t: number) => number;
 //# sourceMappingURL=clock.d.ts.map

package/lib/runtime/timeline/clock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/clock.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,qEAAqE;AACrE,eAAO,MAAM,UAAU,QAAO,IAE7B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,GAAG,QAAO,MAAmC,CAAC"}
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/clock.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,qEAAqE;AACrE,eAAO,MAAM,UAAU,QAAO,IAE7B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,GAAG,QAAO,MAAmC,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,UAAU,MAAO,MAAM,KAAG,MAAmB,CAAC"}

package/lib/runtime/timeline/clock.js

@@ -19,4 +19,10 @@ export const resetClock = () => {
 };
 /** Milliseconds since the last {@link resetClock}. */
 export const now = () => performance.now() - epoch;
+/**
+ * Convert a recording-relative time (from {@link now}) back to a
+ * `performance.now()` value, i.e. milliseconds since `performance.timeOrigin`.
+ * Chrome DevTools' `console.timeStamp` expects that timebase.
+ */
+export const toPerfTime = (t) => t + epoch;
 //# sourceMappingURL=clock.js.map

package/lib/runtime/timeline/clock.js.map

@@ -1 +1 @@
-{"version":3,"file":"clock.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/clock.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;GAQG;AAEH,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAS,EAAE;IACnC,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;AAC5B,CAAC,CAAC;AAEF,sDAAsD;AACtD,MAAM,CAAC,MAAM,GAAG,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Recording-relative clock for the timeline.\n *\n * Built-in capture layers timestamp events with {@link now} rather than raw\n * `performance.now()`, so event times read as \"ms since recording started\"\n * (the first event is ~0) instead of \"ms since the app page loaded\" — which is\n * also meaningless to the panel, an iframe with its own time origin. The origin\n * is re-zeroed on each rising edge of recording via {@link resetClock}.\n */\n\nlet epoch = 0;\n\n/** Re-zero the clock; called when recording transitions off → on. */\nexport const resetClock = (): void => {\n  epoch = performance.now();\n};\n\n/** Milliseconds since the last {@link resetClock}. */\nexport const now = (): number => performance.now() - epoch;\n"]}
+{"version":3,"file":"clock.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/clock.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;GAQG;AAEH,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAS,EAAE;IACnC,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;AAC5B,CAAC,CAAC;AAEF,sDAAsD;AACtD,MAAM,CAAC,MAAM,GAAG,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Recording-relative clock for the timeline.\n *\n * Built-in capture layers timestamp events with {@link now} rather than raw\n * `performance.now()`, so event times read as \"ms since recording started\"\n * (the first event is ~0) instead of \"ms since the app page loaded\" — which is\n * also meaningless to the panel, an iframe with its own time origin. The origin\n * is re-zeroed on each rising edge of recording via {@link resetClock}.\n */\n\nlet epoch = 0;\n\n/** Re-zero the clock; called when recording transitions off → on. */\nexport const resetClock = (): void => {\n  epoch = performance.now();\n};\n\n/** Milliseconds since the last {@link resetClock}. */\nexport const now = (): number => performance.now() - epoch;\n\n/**\n * Convert a recording-relative time (from {@link now}) back to a\n * `performance.now()` value, i.e. milliseconds since `performance.timeOrigin`.\n * Chrome DevTools' `console.timeStamp` expects that timebase.\n */\nexport const toPerfTime = (t: number): number => t + epoch;\n"]}

package/lib/runtime/timeline/install.js

@@ -11,10 +11,14 @@
  * transport.
  *
  * Recording starts off; the panel iframe toggles it via the Vite HMR channel
- * (Phase 0/1) or devframe shared state (Phase 2+).
+ * (Phase 0/1) or devframe shared state (Phase 2+). Layers capture while the
+ * panel is recording OR the "chrome performance tracks" preference is on; the
+ * panel transport only receives events while recording, the Chrome tracks sink
+ * only while the preference is on.
  */
 import {emit, setHotClient} from './transport.js';
 import {resetClock} from './clock.js';
+import {createChromeTracksSink} from './chrome-tracks.js';
 import {installLifecycleLayer, setUpdateHook} from './lifecycle.js';
 import {installRenderLayer, setRenderDebugEnabled} from './render.js';
 import {installMouseLayer, installKeyboardLayer} from './input.js';
@@ -32,28 +36,36 @@ const state = {
   mouseEventEnabled: false,
   keyboardEventEnabled: false,
 };
-const recording = () => state.recordingState;
+// Mirror to Chrome DevTools' Performance panel; a page-side preference driven
+// by the settings override, independent of panel recording.
+let chromeTracks = false;
+const sink = createChromeTracksSink();
+// Layers run when either consumer wants events.
+const capturing = () => state.recordingState || chromeTracks;
+const out = (e) => {
+  if (state.recordingState) emit(e);
+  if (chromeTracks) sink.push(e);
+};
 const lifecycleEnabled = () => state.litLifecycleEnabled;
 const renderEnabled = () => state.litRenderEnabled;
 const renderVerboseEnabled = () => state.litRenderVerboseEnabled;
 const mouseEnabled = () => state.mouseEventEnabled;
 const keyboardEnabled = () => state.keyboardEventEnabled;
-// Drive Lit's debug event flag from recording × (render-layer-enabled OR
+// Drive Lit's debug event flag from capturing × (render-layer-enabled OR
 // verbose-layer-enabled) so lit-html only pays the per-render CustomEvent
 // dispatch cost while we're actually capturing one of the two render layers.
 const syncRenderDebug = () => {
   setRenderDebugEnabled(
-    state.recordingState &&
-      (state.litRenderEnabled || state.litRenderVerboseEnabled)
+    capturing() && (state.litRenderEnabled || state.litRenderVerboseEnabled)
   );
 };
 // ---------------------------------------------------------------------------
 // Capture layer installation
 // ---------------------------------------------------------------------------
-installLifecycleLayer(emit, recording, lifecycleEnabled);
-installRenderLayer(emit, recording, renderEnabled, renderVerboseEnabled);
-installMouseLayer(emit, recording, mouseEnabled);
-installKeyboardLayer(emit, recording, keyboardEnabled);
+installLifecycleLayer(out, capturing, lifecycleEnabled);
+installRenderLayer(out, capturing, renderEnabled, renderVerboseEnabled);
+installMouseLayer(out, capturing, mouseEnabled);
+installKeyboardLayer(out, capturing, keyboardEnabled);
 // Flash-on-update rides the lifecycle wrappers but not the recording gate:
 // it's a page-side visual the panel toggles as a preference, so it follows the
 // settings override (read at boot, pushed live) rather than the layer state.
@@ -67,6 +79,12 @@ const hot = import.meta.hot;
 subscribeOverride(hot, (o) => {
   setFlashEnabled(o.flashUpdates ?? false);
   setFlashRamp(o.flashUpdatesRamp ?? false);
+  const next = o.chromeTracks ?? false;
+  if (next !== chromeTracks) {
+    chromeTracks = next;
+    if (!next) sink.reset();
+    syncRenderDebug();
+  }
 });
 if (hot !== undefined) {
   pageChannel.useViteHot(hot);

package/lib/runtime/timeline/install.js.map

@@ -1 +1 @@
-{"version":3,"file":"install.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/install.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 * Timeline runtime install entry point.\n *\n * Injected by the plugin into the host page via `transformIndexHtml` when\n * `timeline: true` is set. Sets up all capture layers and wires them to the\n * transport.\n *\n * Recording starts off; the panel iframe toggles it via the Vite HMR channel\n * (Phase 0/1) or devframe shared state (Phase 2+).\n */\n\nimport {emit, setHotClient} from './transport.js';\nimport {resetClock} from './clock.js';\nimport {installLifecycleLayer, setUpdateHook} from './lifecycle.js';\nimport {installRenderLayer, setRenderDebugEnabled} from './render.js';\nimport {installMouseLayer, installKeyboardLayer} from './input.js';\nimport {flashUpdate, setFlashEnabled, setFlashRamp} from './flash.js';\nimport {subscribeOverride} from '../overrides.js';\nimport {pageChannel} from '../page-channel.js';\nimport type {ViteHotLike} from '../page-channel.js';\nimport type {TimelineLayersState} from '../../../types/timeline.js';\n\n// ---------------------------------------------------------------------------\n// Recording state — written by the panel toggle, read by all capture layers.\n// ---------------------------------------------------------------------------\n\nconst state: TimelineLayersState = {\n  recordingState: false,\n  litLifecycleEnabled: true,\n  litRenderEnabled: true,\n  litRenderVerboseEnabled: false,\n  mouseEventEnabled: false,\n  keyboardEventEnabled: false,\n};\n\nconst recording = (): boolean => state.recordingState;\nconst lifecycleEnabled = (): boolean => state.litLifecycleEnabled;\nconst renderEnabled = (): boolean => state.litRenderEnabled;\nconst renderVerboseEnabled = (): boolean => state.litRenderVerboseEnabled;\nconst mouseEnabled = (): boolean => state.mouseEventEnabled;\nconst keyboardEnabled = (): boolean => state.keyboardEventEnabled;\n\n// Drive Lit's debug event flag from recording × (render-layer-enabled OR\n// verbose-layer-enabled) so lit-html only pays the per-render CustomEvent\n// dispatch cost while we're actually capturing one of the two render layers.\nconst syncRenderDebug = (): void => {\n  setRenderDebugEnabled(\n    state.recordingState &&\n      (state.litRenderEnabled || state.litRenderVerboseEnabled)\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Capture layer installation\n// ---------------------------------------------------------------------------\n\ninstallLifecycleLayer(emit, recording, lifecycleEnabled);\ninstallRenderLayer(emit, recording, renderEnabled, renderVerboseEnabled);\ninstallMouseLayer(emit, recording, mouseEnabled);\ninstallKeyboardLayer(emit, recording, keyboardEnabled);\n\n// Flash-on-update rides the lifecycle wrappers but not the recording gate:\n// it's a page-side visual the panel toggles as a preference, so it follows the\n// settings override (read at boot, pushed live) rather than the layer state.\nsetUpdateHook(flashUpdate);\n\n// ---------------------------------------------------------------------------\n// Page channel wiring\n// ---------------------------------------------------------------------------\n\n// `import.meta.hot` exists in Vite dev builds; the tsconfig lib set doesn't\n// include it, so we access it through the un-typed global shape.\nconst hot = (import.meta as {hot?: ViteHotLike}).hot;\n\nsubscribeOverride(hot, (o) => {\n  setFlashEnabled(o.flashUpdates ?? false);\n  setFlashRamp(o.flashUpdatesRamp ?? false);\n});\n\nif (hot !== undefined) {\n  pageChannel.useViteHot(hot);\n  setHotClient(pageChannel);\n\n  // Panel → app: toggle recording and per-layer flags.\n  pageChannel.on('lit:timeline:recording-changed', (data) => {\n    const next = (data as {recording: boolean}).recording;\n    // Re-zero the timeline clock on the rising edge so event times read as\n    // \"ms since recording started\" rather than since page load.\n    if (next && !state.recordingState) resetClock();\n    state.recordingState = next;\n    syncRenderDebug();\n  });\n\n  pageChannel.on('lit:timeline:layers-changed', (data) => {\n    Object.assign(state, data as Partial<TimelineLayersState>);\n    syncRenderDebug();\n  });\n\n  // Announce readiness so the panel can detect the runtime.\n  pageChannel.send('lit:timeline:runtime-ready', {});\n  // A carrier attached later starts with no idea a runtime exists.\n  pageChannel.onAttach(() =>\n    pageChannel.send('lit:timeline:runtime-ready', {})\n  );\n}\n"]}
+{"version":3,"file":"install.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/install.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 * Timeline runtime install entry point.\n *\n * Injected by the plugin into the host page via `transformIndexHtml` when\n * `timeline: true` is set. Sets up all capture layers and wires them to the\n * transport.\n *\n * Recording starts off; the panel iframe toggles it via the Vite HMR channel\n * (Phase 0/1) or devframe shared state (Phase 2+). Layers capture while the\n * panel is recording OR the \"chrome performance tracks\" preference is on; the\n * panel transport only receives events while recording, the Chrome tracks sink\n * only while the preference is on.\n */\n\nimport {emit, setHotClient} from './transport.js';\nimport {resetClock} from './clock.js';\nimport {createChromeTracksSink} from './chrome-tracks.js';\nimport {installLifecycleLayer, setUpdateHook} from './lifecycle.js';\nimport {installRenderLayer, setRenderDebugEnabled} from './render.js';\nimport {installMouseLayer, installKeyboardLayer} from './input.js';\nimport {flashUpdate, setFlashEnabled, setFlashRamp} from './flash.js';\nimport {subscribeOverride} from '../overrides.js';\nimport {pageChannel} from '../page-channel.js';\nimport type {ViteHotLike} from '../page-channel.js';\nimport type {\n  TimelineEvent,\n  TimelineLayersState,\n} from '../../../types/timeline.js';\n\n// ---------------------------------------------------------------------------\n// Recording state — written by the panel toggle, read by all capture layers.\n// ---------------------------------------------------------------------------\n\nconst state: TimelineLayersState = {\n  recordingState: false,\n  litLifecycleEnabled: true,\n  litRenderEnabled: true,\n  litRenderVerboseEnabled: false,\n  mouseEventEnabled: false,\n  keyboardEventEnabled: false,\n};\n\n// Mirror to Chrome DevTools' Performance panel; a page-side preference driven\n// by the settings override, independent of panel recording.\nlet chromeTracks = false;\nconst sink = createChromeTracksSink();\n\n// Layers run when either consumer wants events.\nconst capturing = (): boolean => state.recordingState || chromeTracks;\nconst out = (e: TimelineEvent): void => {\n  if (state.recordingState) emit(e);\n  if (chromeTracks) sink.push(e);\n};\nconst lifecycleEnabled = (): boolean => state.litLifecycleEnabled;\nconst renderEnabled = (): boolean => state.litRenderEnabled;\nconst renderVerboseEnabled = (): boolean => state.litRenderVerboseEnabled;\nconst mouseEnabled = (): boolean => state.mouseEventEnabled;\nconst keyboardEnabled = (): boolean => state.keyboardEventEnabled;\n\n// Drive Lit's debug event flag from capturing × (render-layer-enabled OR\n// verbose-layer-enabled) so lit-html only pays the per-render CustomEvent\n// dispatch cost while we're actually capturing one of the two render layers.\nconst syncRenderDebug = (): void => {\n  setRenderDebugEnabled(\n    capturing() && (state.litRenderEnabled || state.litRenderVerboseEnabled)\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Capture layer installation\n// ---------------------------------------------------------------------------\n\ninstallLifecycleLayer(out, capturing, lifecycleEnabled);\ninstallRenderLayer(out, capturing, renderEnabled, renderVerboseEnabled);\ninstallMouseLayer(out, capturing, mouseEnabled);\ninstallKeyboardLayer(out, capturing, keyboardEnabled);\n\n// Flash-on-update rides the lifecycle wrappers but not the recording gate:\n// it's a page-side visual the panel toggles as a preference, so it follows the\n// settings override (read at boot, pushed live) rather than the layer state.\nsetUpdateHook(flashUpdate);\n\n// ---------------------------------------------------------------------------\n// Page channel wiring\n// ---------------------------------------------------------------------------\n\n// `import.meta.hot` exists in Vite dev builds; the tsconfig lib set doesn't\n// include it, so we access it through the un-typed global shape.\nconst hot = (import.meta as {hot?: ViteHotLike}).hot;\n\nsubscribeOverride(hot, (o) => {\n  setFlashEnabled(o.flashUpdates ?? false);\n  setFlashRamp(o.flashUpdatesRamp ?? false);\n  const next = o.chromeTracks ?? false;\n  if (next !== chromeTracks) {\n    chromeTracks = next;\n    if (!next) sink.reset();\n    syncRenderDebug();\n  }\n});\n\nif (hot !== undefined) {\n  pageChannel.useViteHot(hot);\n  setHotClient(pageChannel);\n\n  // Panel → app: toggle recording and per-layer flags.\n  pageChannel.on('lit:timeline:recording-changed', (data) => {\n    const next = (data as {recording: boolean}).recording;\n    // Re-zero the timeline clock on the rising edge so event times read as\n    // \"ms since recording started\" rather than since page load.\n    if (next && !state.recordingState) resetClock();\n    state.recordingState = next;\n    syncRenderDebug();\n  });\n\n  pageChannel.on('lit:timeline:layers-changed', (data) => {\n    Object.assign(state, data as Partial<TimelineLayersState>);\n    syncRenderDebug();\n  });\n\n  // Announce readiness so the panel can detect the runtime.\n  pageChannel.send('lit:timeline:runtime-ready', {});\n  // A carrier attached later starts with no idea a runtime exists.\n  pageChannel.onAttach(() =>\n    pageChannel.send('lit:timeline:runtime-ready', {})\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddsquad/vite-plugin-lit",
-  "version": "0.5.0",
+  "version": "0.6.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)",

package/types/timeline.d.ts

@@ -128,6 +128,12 @@ export interface SettingsOverride {
      * {@link SettingsOverride.flashUpdates}.
      */
     flashUpdatesRamp?: boolean;
+    /**
+     * Mirror the timeline into Chrome DevTools' Performance panel as custom
+     * tracks (via `console.timeStamp`), independent of panel recording. Pure
+     * preference (no config-time baseline), so `undefined` reads as off.
+     */
+    chromeTracks?: boolean;
 }
 /**
  * Built-in editors the source overlay can open files in. Keep in sync with

package/types/timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../src/types/timeline.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../src/types/timeline.ts"],"names":[],"mappings":"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"}

package/types/timeline.js.map

@@ -1 +1 @@
-{"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"]}
+{"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;AAwFF;;;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   * Mirror the timeline into Chrome DevTools' Performance panel as custom\n   * tracks (via `console.timeStamp`), independent of panel recording. Pure\n   * preference (no config-time baseline), so `undefined` reads as off.\n   */\n  chromeTracks?: 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"]}