@oddsquad/vite-plugin-lit 0.0.3 → 0.0.5

package/lib/runtime/timeline/install.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Timeline runtime install entry point.
+ *
+ * Injected by the plugin into the host page via `transformIndexHtml` when
+ * `timeline: true` is set. Sets up all capture layers and wires them to the
+ * transport.
+ *
+ * Recording starts off; the panel iframe toggles it via the Vite HMR channel
+ * (Phase 0/1) or devframe shared state (Phase 2+).
+ */
+import { emit, setHotClient } from './transport.js';
+import { resetClock } from './clock.js';
+import { installLifecycleLayer } from './lifecycle.js';
+import { installRenderLayer, setRenderDebugEnabled } from './render.js';
+import { installMouseLayer, installKeyboardLayer } from './input.js';
+// ---------------------------------------------------------------------------
+// Recording state — written by the panel toggle, read by all capture layers.
+// ---------------------------------------------------------------------------
+const state = {
+    recordingState: false,
+    litLifecycleEnabled: true,
+    litRenderEnabled: true,
+    mouseEventEnabled: false,
+    keyboardEventEnabled: false,
+};
+const recording = () => state.recordingState;
+const lifecycleEnabled = () => state.litLifecycleEnabled;
+const renderEnabled = () => state.litRenderEnabled;
+const mouseEnabled = () => state.mouseEventEnabled;
+const keyboardEnabled = () => state.keyboardEventEnabled;
+// Drive Lit's debug event flag from recording × render-layer-enabled so
+// lit-html only pays the per-render CustomEvent dispatch cost while we're
+// actually capturing the render layer.
+const syncRenderDebug = () => {
+    setRenderDebugEnabled(state.recordingState && state.litRenderEnabled);
+};
+// ---------------------------------------------------------------------------
+// Capture layer installation
+// ---------------------------------------------------------------------------
+installLifecycleLayer(emit, recording, lifecycleEnabled);
+installRenderLayer(emit, recording, renderEnabled);
+installMouseLayer(emit, recording, mouseEnabled);
+installKeyboardLayer(emit, recording, keyboardEnabled);
+const hot = import.meta.hot;
+if (hot !== undefined) {
+    setHotClient(hot);
+    // Panel → app: toggle recording and per-layer flags.
+    hot.on('lit:timeline:recording-changed', (data) => {
+        const next = data.recording;
+        // Re-zero the timeline clock on the rising edge so event times read as
+        // "ms since recording started" rather than since page load.
+        if (next && !state.recordingState)
+            resetClock();
+        state.recordingState = next;
+        syncRenderDebug();
+    });
+    hot.on('lit:timeline:layers-changed', (data) => {
+        Object.assign(state, data);
+        syncRenderDebug();
+    });
+    // Announce readiness so the panel can detect the runtime.
+    hot.send('lit:timeline:runtime-ready', {});
+}
+//# sourceMappingURL=install.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"install.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/install.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;GASG;AAEH,OAAO,EAAC,IAAI,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,YAAY,CAAC;AACtC,OAAO,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAC,kBAAkB,EAAE,qBAAqB,EAAC,MAAM,aAAa,CAAC;AACtE,OAAO,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,YAAY,CAAC;AAGnE,8EAA8E;AAC9E,6EAA6E;AAC7E,8EAA8E;AAE9E,MAAM,KAAK,GAAwB;IACjC,cAAc,EAAE,KAAK;IACrB,mBAAmB,EAAE,IAAI;IACzB,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,KAAK;IACxB,oBAAoB,EAAE,KAAK;CAC5B,CAAC;AAEF,MAAM,SAAS,GAAG,GAAY,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;AACtD,MAAM,gBAAgB,GAAG,GAAY,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;AAClE,MAAM,aAAa,GAAG,GAAY,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC;AAC5D,MAAM,YAAY,GAAG,GAAY,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;AAC5D,MAAM,eAAe,GAAG,GAAY,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC;AAElE,wEAAwE;AACxE,0EAA0E;AAC1E,uCAAuC;AACvC,MAAM,eAAe,GAAG,GAAS,EAAE;IACjC,qBAAqB,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACxE,CAAC,CAAC;AAEF,8EAA8E;AAC9E,6BAA6B;AAC7B,8EAA8E;AAE9E,qBAAqB,CAAC,IAAI,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;AACzD,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AACnD,iBAAiB,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AACjD,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC;AAYvD,MAAM,GAAG,GAAI,MAAM,CAAC,IAAwB,CAAC,GAAG,CAAC;AAEjD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;IACtB,YAAY,CAAC,GAAG,CAAC,CAAC;IAElB,qDAAqD;IACrD,GAAG,CAAC,EAAE,CAAC,gCAAgC,EAAE,CAAC,IAAI,EAAE,EAAE;QAChD,MAAM,IAAI,GAAI,IAA6B,CAAC,SAAS,CAAC;QACtD,uEAAuE;QACvE,4DAA4D;QAC5D,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;YAAE,UAAU,EAAE,CAAC;QAChD,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;QAC5B,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,GAAG,CAAC,EAAE,CAAC,6BAA6B,EAAE,CAAC,IAAI,EAAE,EAAE;QAC7C,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,IAAoC,CAAC,CAAC;QAC3D,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,0DAA0D;IAC1D,GAAG,CAAC,IAAI,CAAC,4BAA4B,EAAE,EAAE,CAAC,CAAC;AAC7C,CAAC","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} from './lifecycle.js';\nimport {installRenderLayer, setRenderDebugEnabled} from './render.js';\nimport {installMouseLayer, installKeyboardLayer} from './input.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  mouseEventEnabled: false,\n  keyboardEventEnabled: false,\n};\n\nconst recording = (): boolean => state.recordingState;\nconst lifecycleEnabled = (): boolean => state.litLifecycleEnabled;\nconst renderEnabled = (): boolean => state.litRenderEnabled;\nconst mouseEnabled = (): boolean => state.mouseEventEnabled;\nconst keyboardEnabled = (): boolean => state.keyboardEventEnabled;\n\n// Drive Lit's debug event flag from recording × render-layer-enabled so\n// lit-html only pays the per-render CustomEvent dispatch cost while we're\n// actually capturing the render layer.\nconst syncRenderDebug = (): void => {\n  setRenderDebugEnabled(state.recordingState && state.litRenderEnabled);\n};\n\n// ---------------------------------------------------------------------------\n// Capture layer installation\n// ---------------------------------------------------------------------------\n\ninstallLifecycleLayer(emit, recording, lifecycleEnabled);\ninstallRenderLayer(emit, recording, renderEnabled);\ninstallMouseLayer(emit, recording, mouseEnabled);\ninstallKeyboardLayer(emit, recording, keyboardEnabled);\n\n// ---------------------------------------------------------------------------\n// HMR channel wiring (Phase 0/1 transport)\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.\ntype ViteHot = {\n  send: (event: string, data: unknown) => void;\n  on: (event: string, handler: (data: unknown) => void) => void;\n};\nconst hot = (import.meta as {hot?: ViteHot}).hot;\n\nif (hot !== undefined) {\n  setHotClient(hot);\n\n  // Panel → app: toggle recording and per-layer flags.\n  hot.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  hot.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  hot.send('lit:timeline:runtime-ready', {});\n}\n"]}

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import type { TimelineEvent } from '../../../types/timeline.js';
+type EmitFn = (event: TimelineEvent) => void;
+type RecordingFn = () => boolean;
+type LayerEnabledFn = () => boolean;
+/**
+ * Install lifecycle instrumentation for *every* Lit element on the page.
+ *
+ * The phases live on the shared ReactiveElement/LitElement base prototypes, so
+ * wrapping them there instruments all components at once — not just the first
+ * one registered (the old behavior, which also silently no-op'd when Vite
+ * served the production Lit build, since that omits the `reactiveElementVersions`
+ * sentinel the resolver gated on).
+ *
+ * A component that overrides `willUpdate`/`updated`/`firstUpdated` *without*
+ * calling `super` shadows the base no-op and won't report that phase — an
+ * accepted limitation; the common case and `super`-calling overrides report.
+ *
+ * Idempotent — wrapping is brand-guarded per prototype+method.
+ */
+export declare const installLifecycleLayer: (emit: EmitFn, recording: RecordingFn, enabled: LayerEnabledFn) => void;
+export {};
+//# sourceMappingURL=lifecycle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/lifecycle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoBH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAC7C,KAAK,WAAW,GAAG,MAAM,OAAO,CAAC;AACjC,KAAK,cAAc,GAAG,MAAM,OAAO,CAAC;AA4KpC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,WAAW,WAAW,EACtB,SAAS,cAAc,KACtB,IAyBF,CAAC"}

package/lib/runtime/timeline/lifecycle.js

@@ -0,0 +1,225 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * ReactiveElement prototype instrumentation for the lifecycle timeline layer.
+ *
+ * Wraps the lifecycle methods listed in PHASES on the prototype of the
+ * ReactiveElement class loaded by the app — not by importing lit directly,
+ * to avoid multi-copy issues. The proto is resolved from the already-defined
+ * custom element registry (same mechanism as the HMR patch module).
+ *
+ * Each wrapped method emits a paired start/end TimelineEvent so the panel
+ * can render duration bars. performUpdate brackets the whole update tick and
+ * bumps a per-instance tick counter that becomes the groupId shared by all
+ * phase events within that tick.
+ *
+ * Gated by the recording flag so overhead is near-zero when idle.
+ */
+import { idOf, sourceOf, changedKeys } from './identity.js';
+import { now } from './clock.js';
+/** Phases to instrument with start/end pairs. */
+const UPDATE_PHASES = [
+    'performUpdate',
+    'willUpdate',
+    'update',
+    'updated',
+    'firstUpdated',
+];
+/** Point-in-time lifecycle events (no end bracket). */
+const POINT_PHASES = ['connectedCallback', 'disconnectedCallback'];
+const BRAND = Symbol.for('@lit-labs/vite-plugin-lit#timeline-lifecycle');
+/** Per-instance update tick counter (bumped inside performUpdate wrapper). */
+const ticks = new WeakMap();
+const tickOf = (el) => ticks.get(el) ?? 0;
+/** Returns true if `proto[name]` is already our wrapper (idempotent install). */
+const isWrapped = (proto, name) => {
+    const fn = proto[name];
+    return (typeof fn === 'function' && fn[BRAND] === true);
+};
+/**
+ * Wrap `proto[name]` with a start/end pair emitting to `emit`.
+ * `isPoint` methods only emit a single event (no end bracket).
+ */
+const wrap = (proto, name, isPoint, emit, recording, enabled) => {
+    if (isWrapped(proto, name))
+        return;
+    const orig = proto[name];
+    const wrapper = function (...args) {
+        if (!recording() || !enabled()) {
+            return orig?.apply(this, args);
+        }
+        // Bump the per-instance tick at the *start* of each performUpdate, before
+        // computing the groupId, so this whole update cycle — performUpdate and the
+        // willUpdate/update/updated phases it nests — shares one groupId, distinct
+        // from the previous cycle's. (Reading the tick before bumping put
+        // performUpdate in a different group from its own phases and let adjacent
+        // cycles collide on the same tick.)
+        if (name === 'performUpdate') {
+            ticks.set(this, tickOf(this) + 1);
+        }
+        const elementId = idOf(this);
+        const tagName = this.localName ?? 'unknown';
+        const source = sourceOf(this);
+        const tick = tickOf(this);
+        const groupId = `${elementId}:${tick}`;
+        const time = now();
+        const changed = changedKeys(args[0]);
+        if (!isPoint) {
+            emit({
+                layerId: 'lit-lifecycle',
+                time,
+                groupId,
+                title: name + ':start',
+                subtitle: tagName,
+                data: { phase: name, changed },
+                meta: { elementId, tagName, source },
+            });
+        }
+        let result;
+        try {
+            result = orig?.apply(this, args);
+        }
+        finally {
+            if (!isPoint) {
+                emit({
+                    layerId: 'lit-lifecycle',
+                    time: now(),
+                    groupId,
+                    title: name + ':end',
+                    subtitle: tagName,
+                    data: { phase: name },
+                    meta: { elementId, tagName, source },
+                });
+            }
+            else {
+                emit({
+                    layerId: 'lit-lifecycle',
+                    time,
+                    title: name,
+                    subtitle: tagName,
+                    data: { phase: name },
+                    meta: { elementId, tagName, source },
+                });
+            }
+        }
+        return result;
+    };
+    wrapper[BRAND] = true;
+    try {
+        Object.defineProperty(proto, name, {
+            value: wrapper,
+            writable: true,
+            configurable: true,
+        });
+    }
+    catch {
+        // Non-configurable slot; instrumentation degrades gracefully.
+    }
+};
+/**
+ * Finds the prototype in `proto`'s chain that *owns* `name` as an own property,
+ * or null if none does.
+ */
+const ownerOf = (proto, name) => {
+    let p = proto;
+    while (p !== null && !Object.prototype.hasOwnProperty.call(p, name)) {
+        p = Object.getPrototypeOf(p);
+    }
+    return p;
+};
+/**
+ * Returns any defined Lit element's prototype (duck-typed by `performUpdate`),
+ * or null if none can be found yet. One sample is enough: its chain leads to
+ * the shared ReactiveElement/LitElement base prototypes every component
+ * inherits.
+ *
+ * Tries the non-standard `_registry` map first, then falls back to sampling a
+ * live upgraded element from the DOM — `_registry` isn't present in every
+ * engine (e.g. some Chrome builds), and without this fallback an app whose
+ * components were all defined before the runtime installed gets no lifecycle
+ * instrumentation at all.
+ */
+const findLitElementProto = () => {
+    const registry = customElements._registry;
+    if (registry !== undefined) {
+        for (const ctor of Object.values(registry)) {
+            const proto = ctor?.prototype;
+            if (proto != null && 'performUpdate' in proto)
+                return proto;
+        }
+    }
+    if (typeof document !== 'undefined') {
+        for (const el of document.querySelectorAll('*')) {
+            const proto = Object.getPrototypeOf(el);
+            if (proto != null && 'performUpdate' in proto)
+                return proto;
+        }
+    }
+    return null;
+};
+let installed = false;
+/**
+ * Install lifecycle instrumentation for *every* Lit element on the page.
+ *
+ * The phases live on the shared ReactiveElement/LitElement base prototypes, so
+ * wrapping them there instruments all components at once — not just the first
+ * one registered (the old behavior, which also silently no-op'd when Vite
+ * served the production Lit build, since that omits the `reactiveElementVersions`
+ * sentinel the resolver gated on).
+ *
+ * A component that overrides `willUpdate`/`updated`/`firstUpdated` *without*
+ * calling `super` shadows the base no-op and won't report that phase — an
+ * accepted limitation; the common case and `super`-calling overrides report.
+ *
+ * Idempotent — wrapping is brand-guarded per prototype+method.
+ */
+export const installLifecycleLayer = (emit, recording, enabled) => {
+    if (installed)
+        return;
+    installed = true;
+    // Instrument from a sample already on the page (covers components defined
+    // before the runtime installed — the common case, since the runtime is
+    // injected after the app's modules).
+    const proto = findLitElementProto();
+    if (proto !== null) {
+        patchBases(proto, emit, recording, enabled);
+    }
+    // Also instrument on future defines — both for components registered later
+    // and for the case where none were discoverable above. Kept installed for
+    // the page's lifetime; `patchBases` is idempotent (wrapping is brand-guarded
+    // per prototype+method), so re-running once the shared bases are wrapped is a
+    // cheap no-op.
+    const origDefine = customElements.define.bind(customElements);
+    customElements.define = (name, ctor, options) => {
+        origDefine(name, ctor, options);
+        const p = ctor?.prototype;
+        if (p != null && 'performUpdate' in p) {
+            patchBases(p, emit, recording, enabled);
+        }
+    };
+};
+/**
+ * Wraps the lifecycle phases on the shared base prototypes reachable from
+ * `sample`. `performUpdate` is never overridden by app code, so walking up from
+ * any Lit element lands on `ReactiveElement.prototype` — which owns the update/
+ * connect lifecycle, shared by all components. `update` is wrapped on its
+ * effective owner instead (`LitElement.prototype` overrides it to drive
+ * `render()`), so the timed call is the one that actually runs.
+ */
+const patchBases = (sample, emit, recording, enabled) => {
+    const reProto = ownerOf(sample, 'performUpdate');
+    if (reProto === null)
+        return;
+    for (const name of UPDATE_PHASES) {
+        const owner = name === 'update' ? ownerOf(sample, 'update') : reProto;
+        if (owner !== null)
+            wrap(owner, name, false, emit, recording, enabled);
+    }
+    for (const name of POINT_PHASES) {
+        wrap(reProto, name, true, emit, recording, enabled);
+    }
+};
+//# sourceMappingURL=lifecycle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/lifecycle.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 * ReactiveElement prototype instrumentation for the lifecycle timeline layer.\n *\n * Wraps the lifecycle methods listed in PHASES on the prototype of the\n * ReactiveElement class loaded by the app — not by importing lit directly,\n * to avoid multi-copy issues. The proto is resolved from the already-defined\n * custom element registry (same mechanism as the HMR patch module).\n *\n * Each wrapped method emits a paired start/end TimelineEvent so the panel\n * can render duration bars. performUpdate brackets the whole update tick and\n * bumps a per-instance tick counter that becomes the groupId shared by all\n * phase events within that tick.\n *\n * Gated by the recording flag so overhead is near-zero when idle.\n */\n\nimport {idOf, sourceOf, changedKeys} from './identity.js';\nimport {now} from './clock.js';\nimport type {TimelineEvent} from '../../../types/timeline.js';\n\ntype EmitFn = (event: TimelineEvent) => void;\ntype RecordingFn = () => boolean;\ntype LayerEnabledFn = () => boolean;\n\n/** Phases to instrument with start/end pairs. */\nconst UPDATE_PHASES = [\n  'performUpdate',\n  'willUpdate',\n  'update',\n  'updated',\n  'firstUpdated',\n] as const;\n\n/** Point-in-time lifecycle events (no end bracket). */\nconst POINT_PHASES = ['connectedCallback', 'disconnectedCallback'] as const;\n\nconst BRAND = Symbol.for('@lit-labs/vite-plugin-lit#timeline-lifecycle');\n\n/** Per-instance update tick counter (bumped inside performUpdate wrapper). */\nconst ticks = new WeakMap<object, number>();\n\nconst tickOf = (el: object): number => ticks.get(el) ?? 0;\n\ntype AnyFn = (...args: unknown[]) => unknown;\ntype Proto = Record<string | symbol, AnyFn | undefined>;\n\n/** Returns true if `proto[name]` is already our wrapper (idempotent install). */\nconst isWrapped = (proto: Proto, name: string): boolean => {\n  const fn = proto[name];\n  return (\n    typeof fn === 'function' && (fn as AnyFn & {[BRAND]?: true})[BRAND] === true\n  );\n};\n\n/**\n * Wrap `proto[name]` with a start/end pair emitting to `emit`.\n * `isPoint` methods only emit a single event (no end bracket).\n */\nconst wrap = (\n  proto: Proto,\n  name: string,\n  isPoint: boolean,\n  emit: EmitFn,\n  recording: RecordingFn,\n  enabled: LayerEnabledFn\n): void => {\n  if (isWrapped(proto, name)) return;\n  const orig = proto[name];\n\n  const wrapper: AnyFn & {[BRAND]?: true} = function (\n    this: object,\n    ...args: unknown[]\n  ) {\n    if (!recording() || !enabled()) {\n      return orig?.apply(this, args);\n    }\n\n    // Bump the per-instance tick at the *start* of each performUpdate, before\n    // computing the groupId, so this whole update cycle — performUpdate and the\n    // willUpdate/update/updated phases it nests — shares one groupId, distinct\n    // from the previous cycle's. (Reading the tick before bumping put\n    // performUpdate in a different group from its own phases and let adjacent\n    // cycles collide on the same tick.)\n    if (name === 'performUpdate') {\n      ticks.set(this, tickOf(this) + 1);\n    }\n\n    const elementId = idOf(this);\n    const tagName = (this as Element).localName ?? 'unknown';\n    const source = sourceOf(this);\n    const tick = tickOf(this);\n    const groupId = `${elementId}:${tick}`;\n    const time = now();\n    const changed = changedKeys(args[0]);\n\n    if (!isPoint) {\n      emit({\n        layerId: 'lit-lifecycle',\n        time,\n        groupId,\n        title: name + ':start',\n        subtitle: tagName,\n        data: {phase: name, changed},\n        meta: {elementId, tagName, source},\n      });\n    }\n\n    let result: unknown;\n    try {\n      result = orig?.apply(this, args);\n    } finally {\n      if (!isPoint) {\n        emit({\n          layerId: 'lit-lifecycle',\n          time: now(),\n          groupId,\n          title: name + ':end',\n          subtitle: tagName,\n          data: {phase: name},\n          meta: {elementId, tagName, source},\n        });\n      } else {\n        emit({\n          layerId: 'lit-lifecycle',\n          time,\n          title: name,\n          subtitle: tagName,\n          data: {phase: name},\n          meta: {elementId, tagName, source},\n        });\n      }\n    }\n    return result;\n  };\n  wrapper[BRAND] = true;\n\n  try {\n    Object.defineProperty(proto, name, {\n      value: wrapper,\n      writable: true,\n      configurable: true,\n    });\n  } catch {\n    // Non-configurable slot; instrumentation degrades gracefully.\n  }\n};\n\n/**\n * Finds the prototype in `proto`'s chain that *owns* `name` as an own property,\n * or null if none does.\n */\nconst ownerOf = (proto: Proto, name: string): Proto | null => {\n  let p: Proto | null = proto;\n  while (p !== null && !Object.prototype.hasOwnProperty.call(p, name)) {\n    p = Object.getPrototypeOf(p) as Proto | null;\n  }\n  return p;\n};\n\n/**\n * Returns any defined Lit element's prototype (duck-typed by `performUpdate`),\n * or null if none can be found yet. One sample is enough: its chain leads to\n * the shared ReactiveElement/LitElement base prototypes every component\n * inherits.\n *\n * Tries the non-standard `_registry` map first, then falls back to sampling a\n * live upgraded element from the DOM — `_registry` isn't present in every\n * engine (e.g. some Chrome builds), and without this fallback an app whose\n * components were all defined before the runtime installed gets no lifecycle\n * instrumentation at all.\n */\nconst findLitElementProto = (): Proto | null => {\n  const registry = (\n    customElements as unknown as {\n      _registry?: Record<string, CustomElementConstructor>;\n    }\n  )._registry;\n  if (registry !== undefined) {\n    for (const ctor of Object.values(registry)) {\n      const proto = ctor?.prototype;\n      if (proto != null && 'performUpdate' in proto) return proto as Proto;\n    }\n  }\n  if (typeof document !== 'undefined') {\n    for (const el of document.querySelectorAll('*')) {\n      const proto = Object.getPrototypeOf(el) as Proto | null;\n      if (proto != null && 'performUpdate' in proto) return proto;\n    }\n  }\n  return null;\n};\n\nlet installed = false;\n\n/**\n * Install lifecycle instrumentation for *every* Lit element on the page.\n *\n * The phases live on the shared ReactiveElement/LitElement base prototypes, so\n * wrapping them there instruments all components at once — not just the first\n * one registered (the old behavior, which also silently no-op'd when Vite\n * served the production Lit build, since that omits the `reactiveElementVersions`\n * sentinel the resolver gated on).\n *\n * A component that overrides `willUpdate`/`updated`/`firstUpdated` *without*\n * calling `super` shadows the base no-op and won't report that phase — an\n * accepted limitation; the common case and `super`-calling overrides report.\n *\n * Idempotent — wrapping is brand-guarded per prototype+method.\n */\nexport const installLifecycleLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  enabled: LayerEnabledFn\n): void => {\n  if (installed) return;\n  installed = true;\n\n  // Instrument from a sample already on the page (covers components defined\n  // before the runtime installed — the common case, since the runtime is\n  // injected after the app's modules).\n  const proto = findLitElementProto();\n  if (proto !== null) {\n    patchBases(proto, emit, recording, enabled);\n  }\n\n  // Also instrument on future defines — both for components registered later\n  // and for the case where none were discoverable above. Kept installed for\n  // the page's lifetime; `patchBases` is idempotent (wrapping is brand-guarded\n  // per prototype+method), so re-running once the shared bases are wrapped is a\n  // cheap no-op.\n  const origDefine = customElements.define.bind(customElements);\n  customElements.define = (name, ctor, options) => {\n    origDefine(name, ctor, options);\n    const p = ctor?.prototype as Proto | null;\n    if (p != null && 'performUpdate' in p) {\n      patchBases(p, emit, recording, enabled);\n    }\n  };\n};\n\n/**\n * Wraps the lifecycle phases on the shared base prototypes reachable from\n * `sample`. `performUpdate` is never overridden by app code, so walking up from\n * any Lit element lands on `ReactiveElement.prototype` — which owns the update/\n * connect lifecycle, shared by all components. `update` is wrapped on its\n * effective owner instead (`LitElement.prototype` overrides it to drive\n * `render()`), so the timed call is the one that actually runs.\n */\nconst patchBases = (\n  sample: Proto,\n  emit: EmitFn,\n  recording: RecordingFn,\n  enabled: LayerEnabledFn\n): void => {\n  const reProto = ownerOf(sample, 'performUpdate');\n  if (reProto === null) return;\n  for (const name of UPDATE_PHASES) {\n    const owner = name === 'update' ? ownerOf(sample, 'update') : reProto;\n    if (owner !== null) wrap(owner, name, false, emit, recording, enabled);\n  }\n  for (const name of POINT_PHASES) {\n    wrap(reProto, name, true, emit, recording, enabled);\n  }\n};\n"]}

package/lib/runtime/timeline/public-api.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import type { TimelineEvent, TimelineLayer } from '../../../types/timeline.js';
+export type { TimelineEvent, TimelineLayer };
+/**
+ * Emit a custom timeline event from app code.
+ *
+ * The event is forwarded to the Timeline panel when recording is active.
+ * Use a custom `layerId` registered with `addTimelineLayer`, or one of the
+ * built-in layer ids (`'lit-lifecycle'`, `'lit-render'`, `'mouse'`,
+ * `'keyboard'`).
+ *
+ * No-ops in production (the HMR channel is absent; events are dropped in the
+ * transport queue).
+ */
+export declare const addTimelineEvent: (event: TimelineEvent) => void;
+/**
+ * Register a custom timeline layer and announce it to the panel.
+ *
+ * The panel adds the layer to its toggle strip after the built-in layers.
+ * The registration message is sent once on first call; duplicate ids are
+ * ignored.
+ */
+export declare const addTimelineLayer: (layer: TimelineLayer) => void;
+//# sourceMappingURL=public-api.d.ts.map

package/lib/runtime/timeline/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/public-api.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,KAAK,EAAC,aAAa,EAAE,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAE7E,YAAY,EAAC,aAAa,EAAE,aAAa,EAAC,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,aAAa,KAAG,IAEvD,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,aAAa,KAAG,IAOvD,CAAC"}

package/lib/runtime/timeline/public-api.js

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Public timeline API — re-exported by the `virtual:lit-plugin/timeline`
+ * virtual module so app code and other plugins can contribute events and
+ * custom layers without reaching into plugin internals.
+ *
+ * This module shares the same `transport.ts` instance as `install.ts`, so
+ * events emitted here flow through the same batched HMR channel to the panel.
+ */
+import { emit, setHotClientCallback } from './transport.js';
+/**
+ * Emit a custom timeline event from app code.
+ *
+ * The event is forwarded to the Timeline panel when recording is active.
+ * Use a custom `layerId` registered with `addTimelineLayer`, or one of the
+ * built-in layer ids (`'lit-lifecycle'`, `'lit-render'`, `'mouse'`,
+ * `'keyboard'`).
+ *
+ * No-ops in production (the HMR channel is absent; events are dropped in the
+ * transport queue).
+ */
+export const addTimelineEvent = (event) => {
+    emit(event);
+};
+/**
+ * Register a custom timeline layer and announce it to the panel.
+ *
+ * The panel adds the layer to its toggle strip after the built-in layers.
+ * The registration message is sent once on first call; duplicate ids are
+ * ignored.
+ */
+export const addTimelineLayer = (layer) => {
+    const send = () => {
+        import.meta.hot?.send('lit:timeline:custom-layer', {
+            layer,
+        });
+    };
+    setHotClientCallback(send);
+};
+//# sourceMappingURL=public-api.js.map

package/lib/runtime/timeline/public-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/public-api.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAE,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAK1D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAoB,EAAQ,EAAE;IAC7D,IAAI,CAAC,KAAK,CAAC,CAAC;AACd,CAAC,CAAC;AAIF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAoB,EAAQ,EAAE;IAC7D,MAAM,IAAI,GAAG,GAAS,EAAE;QACrB,MAAM,CAAC,IAAwB,CAAC,GAAG,EAAE,IAAI,CAAC,2BAA2B,EAAE;YACtE,KAAK;SACN,CAAC,CAAC;IACL,CAAC,CAAC;IACF,oBAAoB,CAAC,IAAI,CAAC,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Public timeline API — re-exported by the `virtual:lit-plugin/timeline`\n * virtual module so app code and other plugins can contribute events and\n * custom layers without reaching into plugin internals.\n *\n * This module shares the same `transport.ts` instance as `install.ts`, so\n * events emitted here flow through the same batched HMR channel to the panel.\n */\n\nimport {emit, setHotClientCallback} from './transport.js';\nimport type {TimelineEvent, TimelineLayer} from '../../../types/timeline.js';\n\nexport type {TimelineEvent, TimelineLayer};\n\n/**\n * Emit a custom timeline event from app code.\n *\n * The event is forwarded to the Timeline panel when recording is active.\n * Use a custom `layerId` registered with `addTimelineLayer`, or one of the\n * built-in layer ids (`'lit-lifecycle'`, `'lit-render'`, `'mouse'`,\n * `'keyboard'`).\n *\n * No-ops in production (the HMR channel is absent; events are dropped in the\n * transport queue).\n */\nexport const addTimelineEvent = (event: TimelineEvent): void => {\n  emit(event);\n};\n\ntype ViteHot = {send: (event: string, data: unknown) => void};\n\n/**\n * Register a custom timeline layer and announce it to the panel.\n *\n * The panel adds the layer to its toggle strip after the built-in layers.\n * The registration message is sent once on first call; duplicate ids are\n * ignored.\n */\nexport const addTimelineLayer = (layer: TimelineLayer): void => {\n  const send = (): void => {\n    (import.meta as {hot?: ViteHot}).hot?.send('lit:timeline:custom-layer', {\n      layer,\n    });\n  };\n  setHotClientCallback(send);\n};\n"]}

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * lit-render timeline layer — listens to the built-in lit-debug CustomEvents
+ * instead of patching prototypes, so it's zero-cost when the Lit debug flag
+ * is off and perfectly accurate for the render layer.
+ *
+ * `globalThis.emitLitDebugLogEvents = true` gates the events, and lit-html
+ * dispatches a CustomEvent per render whenever it's set — a real per-render
+ * cost. So the caller drives the flag via {@link setRenderDebugEnabled} from
+ * `recording × layer-enabled` rather than leaving it on for the whole session.
+ * The events are tagged `*Unstable` in the Lit source; we tolerate missing
+ * `kind` values gracefully.
+ *
+ * begin render / end render share a numeric `id` → we use it as groupId so
+ * the panel can show a duration bar for each render call.
+ */
+import type { TimelineEvent } from '../../../types/timeline.js';
+type EmitFn = (event: TimelineEvent) => void;
+type RecordingFn = () => boolean;
+type LayerEnabledFn = () => boolean;
+/**
+ * Install the lit-debug render layer.
+ * Idempotent — calling again when already installed is a no-op.
+ */
+export declare const installRenderLayer: (emit: EmitFn, recording: RecordingFn, layerEnabled: LayerEnabledFn) => void;
+/**
+ * Toggle Lit's debug event system. Enabling makes lit-html dispatch a
+ * CustomEvent on every render (dev-only; no-op in prod builds), so the caller
+ * keeps it off unless the render layer is actively recording.
+ */
+export declare const setRenderDebugEnabled: (enabled: boolean) => void;
+/** Remove the listener and clear the Lit debug flag. */
+export declare const uninstallRenderLayer: () => void;
+export {};
+//# sourceMappingURL=render.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/render.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAI9D,KAAK,MAAM,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAC7C,KAAK,WAAW,GAAG,MAAM,OAAO,CAAC;AACjC,KAAK,cAAc,GAAG,MAAM,OAAO,CAAC;AAmGpC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,MAAM,EACZ,WAAW,WAAW,EACtB,cAAc,cAAc,KAC3B,IASF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,OAAO,KAAG,IAGxD,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,oBAAoB,QAAO,IAIvC,CAAC"}

package/lib/runtime/timeline/render.js

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { idOf, sourceOf } from './identity.js';
+import { now } from './clock.js';
+/**
+ * Builds the element-identity `meta` for a render event from the render
+ * `host` (the LitElement whose `render()` produced these debug events).
+ * Uses the same id/source maps as the lifecycle layer so an element keeps one
+ * stable id across both layers. Returns undefined for host-less renders
+ * (e.g. a bare lit-html `render()` call not driven by a LitElement).
+ */
+const hostMeta = (host) => {
+    if (host === null || typeof host !== 'object')
+        return undefined;
+    return {
+        elementId: idOf(host),
+        tagName: host.localName ?? 'unknown',
+        source: sourceOf(host),
+    };
+};
+let removeListener = null;
+const onLitDebug = (e, emit, recording, layerEnabled) => {
+    if (!recording() || !layerEnabled())
+        return;
+    const detail = e.detail;
+    if (!detail?.kind)
+        return;
+    const time = now();
+    const { kind, id } = detail;
+    switch (kind) {
+        case 'begin render': {
+            const meta = hostMeta(detail.options?.host);
+            emit({
+                layerId: 'lit-render',
+                time,
+                groupId: id,
+                title: 'render:start',
+                subtitle: meta?.tagName,
+                data: { kind, id },
+                meta,
+            });
+            break;
+        }
+        case 'end render': {
+            const meta = hostMeta(detail.options?.host);
+            emit({
+                layerId: 'lit-render',
+                time,
+                groupId: id,
+                title: 'render:end',
+                subtitle: meta?.tagName,
+                data: { kind, id },
+                meta,
+            });
+            break;
+        }
+        // `template prep` fires once per *unique* template, the first time it's
+        // compiled — low volume, useful as a "new template" marker.
+        case 'template prep':
+            emit({
+                layerId: 'lit-render',
+                time,
+                title: kind,
+                data: { kind, id },
+            });
+            break;
+        // `template updating` / `template instantiated` / `…and updated` fire once
+        // per template-bound ChildPart on *every* render — extremely high volume
+        // (a ticking clock or animation floods the layer). The begin/end render
+        // pair above already captures each render as a grouped duration, so these
+        // add noise without signal. Skip them; re-expose behind a "verbose" toggle
+        // if per-part detail is ever needed. Same rationale for commit * / set part.
+        default:
+            break;
+    }
+};
+/**
+ * Install the lit-debug render layer.
+ * Idempotent — calling again when already installed is a no-op.
+ */
+export const installRenderLayer = (emit, recording, layerEnabled) => {
+    if (removeListener !== null)
+        return;
+    // The listener is cheap and always attached; the per-render cost lives in the
+    // `emitLitDebugLogEvents` flag, which the caller toggles via
+    // `setRenderDebugEnabled` only while actively capturing.
+    const handler = (e) => onLitDebug(e, emit, recording, layerEnabled);
+    window.addEventListener('lit-debug', handler);
+    removeListener = () => window.removeEventListener('lit-debug', handler);
+};
+/**
+ * Toggle Lit's debug event system. Enabling makes lit-html dispatch a
+ * CustomEvent on every render (dev-only; no-op in prod builds), so the caller
+ * keeps it off unless the render layer is actively recording.
+ */
+export const setRenderDebugEnabled = (enabled) => {
+    globalThis.emitLitDebugLogEvents =
+        enabled;
+};
+/** Remove the listener and clear the Lit debug flag. */
+export const uninstallRenderLayer = () => {
+    removeListener?.();
+    removeListener = null;
+    setRenderDebugEnabled(false);
+};
+//# sourceMappingURL=render.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/render.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 * lit-render timeline layer — listens to the built-in lit-debug CustomEvents\n * instead of patching prototypes, so it's zero-cost when the Lit debug flag\n * is off and perfectly accurate for the render layer.\n *\n * `globalThis.emitLitDebugLogEvents = true` gates the events, and lit-html\n * dispatches a CustomEvent per render whenever it's set — a real per-render\n * cost. So the caller drives the flag via {@link setRenderDebugEnabled} from\n * `recording × layer-enabled` rather than leaving it on for the whole session.\n * The events are tagged `*Unstable` in the Lit source; we tolerate missing\n * `kind` values gracefully.\n *\n * begin render / end render share a numeric `id` → we use it as groupId so\n * the panel can show a duration bar for each render call.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\nimport {idOf, sourceOf} from './identity.js';\nimport {now} from './clock.js';\n\ntype EmitFn = (event: TimelineEvent) => void;\ntype RecordingFn = () => boolean;\ntype LayerEnabledFn = () => boolean;\n\n/** Minimal shape of the lit-debug event detail we care about. */\ninterface LitDebugDetail {\n  kind: string;\n  id?: number;\n  template?: unknown;\n  instance?: unknown;\n  /** Render options passed to lit-html's `render()`; `host` is the element. */\n  options?: {host?: unknown};\n}\n\n/**\n * Builds the element-identity `meta` for a render event from the render\n * `host` (the LitElement whose `render()` produced these debug events).\n * Uses the same id/source maps as the lifecycle layer so an element keeps one\n * stable id across both layers. Returns undefined for host-less renders\n * (e.g. a bare lit-html `render()` call not driven by a LitElement).\n */\nconst hostMeta = (\n  host: unknown\n): NonNullable<TimelineEvent['meta']> | undefined => {\n  if (host === null || typeof host !== 'object') return undefined;\n  return {\n    elementId: idOf(host),\n    tagName: (host as Element).localName ?? 'unknown',\n    source: sourceOf(host),\n  };\n};\n\ntype LitDebugEvent = CustomEvent<LitDebugDetail>;\n\nlet removeListener: (() => void) | null = null;\n\nconst onLitDebug = (\n  e: Event,\n  emit: EmitFn,\n  recording: RecordingFn,\n  layerEnabled: LayerEnabledFn\n): void => {\n  if (!recording() || !layerEnabled()) return;\n\n  const detail = (e as LitDebugEvent).detail;\n  if (!detail?.kind) return;\n\n  const time = now();\n  const {kind, id} = detail;\n\n  switch (kind) {\n    case 'begin render': {\n      const meta = hostMeta(detail.options?.host);\n      emit({\n        layerId: 'lit-render',\n        time,\n        groupId: id,\n        title: 'render:start',\n        subtitle: meta?.tagName,\n        data: {kind, id},\n        meta,\n      });\n      break;\n    }\n\n    case 'end render': {\n      const meta = hostMeta(detail.options?.host);\n      emit({\n        layerId: 'lit-render',\n        time,\n        groupId: id,\n        title: 'render:end',\n        subtitle: meta?.tagName,\n        data: {kind, id},\n        meta,\n      });\n      break;\n    }\n\n    // `template prep` fires once per *unique* template, the first time it's\n    // compiled — low volume, useful as a \"new template\" marker.\n    case 'template prep':\n      emit({\n        layerId: 'lit-render',\n        time,\n        title: kind,\n        data: {kind, id},\n      });\n      break;\n\n    // `template updating` / `template instantiated` / `…and updated` fire once\n    // per template-bound ChildPart on *every* render — extremely high volume\n    // (a ticking clock or animation floods the layer). The begin/end render\n    // pair above already captures each render as a grouped duration, so these\n    // add noise without signal. Skip them; re-expose behind a \"verbose\" toggle\n    // if per-part detail is ever needed. Same rationale for commit * / set part.\n    default:\n      break;\n  }\n};\n\n/**\n * Install the lit-debug render layer.\n * Idempotent — calling again when already installed is a no-op.\n */\nexport const installRenderLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  layerEnabled: LayerEnabledFn\n): void => {\n  if (removeListener !== null) return;\n\n  // The listener is cheap and always attached; the per-render cost lives in the\n  // `emitLitDebugLogEvents` flag, which the caller toggles via\n  // `setRenderDebugEnabled` only while actively capturing.\n  const handler = (e: Event) => onLitDebug(e, emit, recording, layerEnabled);\n  window.addEventListener('lit-debug', handler);\n  removeListener = () => window.removeEventListener('lit-debug', handler);\n};\n\n/**\n * Toggle Lit's debug event system. Enabling makes lit-html dispatch a\n * CustomEvent on every render (dev-only; no-op in prod builds), so the caller\n * keeps it off unless the render layer is actively recording.\n */\nexport const setRenderDebugEnabled = (enabled: boolean): void => {\n  (globalThis as {emitLitDebugLogEvents?: boolean}).emitLitDebugLogEvents =\n    enabled;\n};\n\n/** Remove the listener and clear the Lit debug flag. */\nexport const uninstallRenderLayer = (): void => {\n  removeListener?.();\n  removeListener = null;\n  setRenderDebugEnabled(false);\n};\n"]}