@oddsquad/vite-plugin-lit 0.2.2 → 0.3.0

package/lib/runtime/timeline/flash.js

@@ -0,0 +1,169 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/** Fade length; long enough to catch, short enough not to smear. */
+const DURATION_MS = 450;
+/** How far back the ramp counts updates for one element. */
+const RAMP_WINDOW_MS = 1000;
+/**
+ * Outline/fill colours by heat level. Level 0 is also the flat colour used
+ * when the ramp is off. Deliberately not the selection blue, so a hovered
+ * element and a flashing one read differently.
+ */
+const COLORS = [
+  'hsl(158 74% 53%)', // calm — one update
+  '#f4bf4f', // warm
+  '#f4844f', // hot
+  '#ef4444', // on fire
+];
+/**
+ * Heat level for `count` updates of one element inside the ramp window.
+ * Exported for the unit test; the thresholds are the whole behaviour.
+ */
+export const rampLevel = (count) => {
+  if (count >= 8) return 3;
+  if (count >= 4) return 2;
+  if (count >= 2) return 1;
+  return 0;
+};
+let enabled = false;
+let ramp = false;
+let layer = null;
+/** Elements that updated since the last flush, with "was a first update". */
+const pending = new Map();
+let frame = null;
+/** Boxes currently on screen, so a re-flash restarts instead of stacking. */
+const active = new Map();
+/** Recent update timestamps per element, for the ramp. */
+const history = new WeakMap();
+const ensureLayer = () => {
+  if (layer === null) {
+    layer = document.createElement('div');
+    layer.setAttribute('data-lit-devtools-flash-layer', '');
+    Object.assign(layer.style, {
+      position: 'fixed',
+      inset: '0',
+      zIndex: '2147483645',
+      pointerEvents: 'none',
+      overflow: 'hidden',
+    });
+    document.body.append(layer);
+  }
+  return layer;
+};
+/** The runtime's own UI (indicator, panels) must not flash itself. */
+const isDevtoolsElement = (el) => el.localName.startsWith('lit-devtools-');
+const recordUpdate = (el, at) => {
+  let times = history.get(el);
+  if (times === undefined) {
+    times = [];
+    history.set(el, times);
+  }
+  times.push(at);
+  const cutoff = at - RAMP_WINDOW_MS;
+  while (times.length > 0 && times[0] < cutoff) times.shift();
+  return times.length;
+};
+const removeBox = (el, anim) => {
+  const entry = active.get(el);
+  // A newer flash may have replaced this one; only the owner cleans up.
+  if (entry === undefined || entry.anim !== anim) return;
+  entry.box.remove();
+  active.delete(el);
+};
+const paint = (el, rect, level, first) => {
+  const color = COLORS[level] ?? COLORS[0];
+  let entry = active.get(el);
+  if (entry === undefined) {
+    const box = document.createElement('div');
+    box.setAttribute('data-lit-devtools-flash', '');
+    Object.assign(box.style, {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      borderRadius: '2px',
+      willChange: 'opacity',
+    });
+    ensureLayer().append(box);
+    entry = {box, anim: box.animate([], {duration: 0})};
+    active.set(el, entry);
+  } else {
+    entry.anim.cancel();
+  }
+  const {box} = entry;
+  box.setAttribute('data-level', String(level));
+  Object.assign(box.style, {
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    outline: `2px solid ${color}`,
+    outlineOffset: '-1px',
+    background: color,
+  });
+  // Mounts flash fainter: a page filling in is not the churn we're hunting.
+  const peak = first ? 0.35 : 0.75;
+  const anim = box.animate(
+    [{opacity: peak}, {opacity: peak, offset: 0.3}, {opacity: 0}],
+    {duration: DURATION_MS, easing: 'ease-out', fill: 'forwards'}
+  );
+  entry.anim = anim;
+  anim.onfinish = () => removeBox(el, anim);
+  anim.oncancel = () => {
+    /* replaced by a newer flash; that one owns cleanup */
+  };
+};
+const flush = () => {
+  frame = null;
+  if (!enabled) {
+    pending.clear();
+    return;
+  }
+  const now = performance.now();
+  for (const [el, first] of pending) {
+    if (!el.isConnected) continue;
+    const rect = el.getBoundingClientRect();
+    // `display: contents` hosts, hidden elements, and off-DOM work have no
+    // box worth drawing.
+    if (rect.width === 0 || rect.height === 0) continue;
+    const count = recordUpdate(el, now);
+    paint(el, rect, ramp ? rampLevel(count) : 0, first);
+  }
+  pending.clear();
+};
+const clearAll = () => {
+  pending.clear();
+  if (frame !== null) {
+    cancelAnimationFrame(frame);
+    frame = null;
+  }
+  for (const {box, anim} of active.values()) {
+    anim.cancel();
+    box.remove();
+  }
+  active.clear();
+};
+/** Turn the overlay on or off; off also wipes whatever is mid-fade. */
+export const setFlashEnabled = (on) => {
+  if (enabled === on) return;
+  enabled = on;
+  if (!on) clearAll();
+};
+/** Colour by update frequency instead of the flat colour. */
+export const setFlashRamp = (on) => {
+  ramp = on;
+};
+/**
+ * The lifecycle layer's update hook. Cheap on the hot path: one Map write and,
+ * at most, one `requestAnimationFrame` per frame; all measuring happens in
+ * the flush.
+ */
+export const flashUpdate = (el, first) => {
+  if (!enabled || isDevtoolsElement(el)) return;
+  // Several updates of one element in the same frame collapse into one box;
+  // it only counts as a mount if every one of them was the first update.
+  pending.set(el, (pending.get(el) ?? true) && first);
+  if (frame === null) frame = requestAnimationFrame(flush);
+};
+//# sourceMappingURL=flash.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flash.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/flash.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 * \"Flash on update\": a short, non-interactive outline over every Lit element\n * that just finished an update cycle, so re-render churn is visible on the\n * page itself rather than only in the Updates tab.\n *\n * Sibling of the inspector's hover outline, not a reuse of it — many elements\n * can flash in the same frame, and each box has its own fade. Same drawing\n * rules though: one `position: fixed` layer with `pointer-events: none` so the\n * page stays fully interactive underneath.\n *\n * Fed by the lifecycle layer's update hook (see `setUpdateHook` in\n * `lifecycle.ts`), which fires whether or not the timeline is recording. Rects\n * are measured once per animation frame for every element that updated in it,\n * so a tick that updates a hundred components costs one layout, not a hundred.\n *\n * Off by default; the panel turns it on through the settings override.\n */\n\nimport type {UpdateHook} from './lifecycle.js';\n\n/** Fade length; long enough to catch, short enough not to smear. */\nconst DURATION_MS = 450;\n\n/** How far back the ramp counts updates for one element. */\nconst RAMP_WINDOW_MS = 1000;\n\n/**\n * Outline/fill colours by heat level. Level 0 is also the flat colour used\n * when the ramp is off. Deliberately not the selection blue, so a hovered\n * element and a flashing one read differently.\n */\nconst COLORS: readonly string[] = [\n  'hsl(158 74% 53%)', // calm — one update\n  '#f4bf4f', // warm\n  '#f4844f', // hot\n  '#ef4444', // on fire\n];\n\n/**\n * Heat level for `count` updates of one element inside the ramp window.\n * Exported for the unit test; the thresholds are the whole behaviour.\n */\nexport const rampLevel = (count: number): number => {\n  if (count >= 8) return 3;\n  if (count >= 4) return 2;\n  if (count >= 2) return 1;\n  return 0;\n};\n\nlet enabled = false;\nlet ramp = false;\n\nlet layer: HTMLElement | null = null;\n\n/** Elements that updated since the last flush, with \"was a first update\". */\nconst pending = new Map<Element, boolean>();\nlet frame: number | null = null;\n\n/** Boxes currently on screen, so a re-flash restarts instead of stacking. */\nconst active = new Map<Element, {box: HTMLElement; anim: Animation}>();\n\n/** Recent update timestamps per element, for the ramp. */\nconst history = new WeakMap<Element, number[]>();\n\nconst ensureLayer = (): HTMLElement => {\n  if (layer === null) {\n    layer = document.createElement('div');\n    layer.setAttribute('data-lit-devtools-flash-layer', '');\n    Object.assign(layer.style, {\n      position: 'fixed',\n      inset: '0',\n      zIndex: '2147483645',\n      pointerEvents: 'none',\n      overflow: 'hidden',\n    } satisfies Partial<CSSStyleDeclaration>);\n    document.body.append(layer);\n  }\n  return layer;\n};\n\n/** The runtime's own UI (indicator, panels) must not flash itself. */\nconst isDevtoolsElement = (el: Element): boolean =>\n  el.localName.startsWith('lit-devtools-');\n\nconst recordUpdate = (el: Element, at: number): number => {\n  let times = history.get(el);\n  if (times === undefined) {\n    times = [];\n    history.set(el, times);\n  }\n  times.push(at);\n  const cutoff = at - RAMP_WINDOW_MS;\n  while (times.length > 0 && times[0]! < cutoff) times.shift();\n  return times.length;\n};\n\nconst removeBox = (el: Element, anim: Animation): void => {\n  const entry = active.get(el);\n  // A newer flash may have replaced this one; only the owner cleans up.\n  if (entry === undefined || entry.anim !== anim) return;\n  entry.box.remove();\n  active.delete(el);\n};\n\nconst paint = (\n  el: Element,\n  rect: DOMRect,\n  level: number,\n  first: boolean\n): void => {\n  const color = COLORS[level] ?? COLORS[0]!;\n  let entry = active.get(el);\n  if (entry === undefined) {\n    const box = document.createElement('div');\n    box.setAttribute('data-lit-devtools-flash', '');\n    Object.assign(box.style, {\n      position: 'absolute',\n      boxSizing: 'border-box',\n      borderRadius: '2px',\n      willChange: 'opacity',\n    } satisfies Partial<CSSStyleDeclaration>);\n    ensureLayer().append(box);\n    entry = {box, anim: box.animate([], {duration: 0})};\n    active.set(el, entry);\n  } else {\n    entry.anim.cancel();\n  }\n  const {box} = entry;\n  box.setAttribute('data-level', String(level));\n  Object.assign(box.style, {\n    left: `${rect.left}px`,\n    top: `${rect.top}px`,\n    width: `${rect.width}px`,\n    height: `${rect.height}px`,\n    outline: `2px solid ${color}`,\n    outlineOffset: '-1px',\n    background: color,\n  } satisfies Partial<CSSStyleDeclaration>);\n  // Mounts flash fainter: a page filling in is not the churn we're hunting.\n  const peak = first ? 0.35 : 0.75;\n  const anim = box.animate(\n    [{opacity: peak}, {opacity: peak, offset: 0.3}, {opacity: 0}],\n    {duration: DURATION_MS, easing: 'ease-out', fill: 'forwards'}\n  );\n  entry.anim = anim;\n  anim.onfinish = () => removeBox(el, anim);\n  anim.oncancel = () => {\n    /* replaced by a newer flash; that one owns cleanup */\n  };\n};\n\nconst flush = (): void => {\n  frame = null;\n  if (!enabled) {\n    pending.clear();\n    return;\n  }\n  const now = performance.now();\n  for (const [el, first] of pending) {\n    if (!el.isConnected) continue;\n    const rect = el.getBoundingClientRect();\n    // `display: contents` hosts, hidden elements, and off-DOM work have no\n    // box worth drawing.\n    if (rect.width === 0 || rect.height === 0) continue;\n    const count = recordUpdate(el, now);\n    paint(el, rect, ramp ? rampLevel(count) : 0, first);\n  }\n  pending.clear();\n};\n\nconst clearAll = (): void => {\n  pending.clear();\n  if (frame !== null) {\n    cancelAnimationFrame(frame);\n    frame = null;\n  }\n  for (const {box, anim} of active.values()) {\n    anim.cancel();\n    box.remove();\n  }\n  active.clear();\n};\n\n/** Turn the overlay on or off; off also wipes whatever is mid-fade. */\nexport const setFlashEnabled = (on: boolean): void => {\n  if (enabled === on) return;\n  enabled = on;\n  if (!on) clearAll();\n};\n\n/** Colour by update frequency instead of the flat colour. */\nexport const setFlashRamp = (on: boolean): void => {\n  ramp = on;\n};\n\n/**\n * The lifecycle layer's update hook. Cheap on the hot path: one Map write and,\n * at most, one `requestAnimationFrame` per frame; all measuring happens in\n * the flush.\n */\nexport const flashUpdate: UpdateHook = (el, first) => {\n  if (!enabled || isDevtoolsElement(el)) return;\n  // Several updates of one element in the same frame collapse into one box;\n  // it only counts as a mount if every one of them was the first update.\n  pending.set(el, (pending.get(el) ?? true) && first);\n  if (frame === null) frame = requestAnimationFrame(flush);\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"identity.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/identity.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AA8BD,0EAA0E;AAC1E,eAAO,MAAM,IAAI,GAAI,IAAI,MAAM,KAAG,MASjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,MAAM,KAAG,OAAO,GAAG,SAOlD,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,QAAQ,GAAI,IAAI,MAAM,KAAG,aAAa,GAAG,SAQrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,SAAS,OAAO,KAAG,MAAM,EAAE,GAAG,SAKzD,CAAC"}
+{"version":3,"file":"identity.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/identity.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AA8BD,0EAA0E;AAC1E,eAAO,MAAM,IAAI,OAAQ,MAAM,KAAG,MASjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,OAAQ,MAAM,KAAG,OAAO,GAAG,SAOlD,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,QAAQ,OAAQ,MAAM,KAAG,aAAa,GAAG,SAQrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,MAAM,EAAE,GAAG,SAKzD,CAAC"}

package/lib/runtime/timeline/identity.js

@@ -21,21 +21,22 @@ const byId = new Map();
  * page (a list re-rendering thousands of rows) dead entries accumulate for the
  * whole dev session. Guarded for environments without `FinalizationRegistry`.
  */
-const byIdRegistry = typeof FinalizationRegistry === 'function'
+const byIdRegistry =
+  typeof FinalizationRegistry === 'function'
     ? new FinalizationRegistry((id) => {
         byId.delete(id);
-    })
+      })
     : undefined;
 /** Returns (and memoises) a stable numeric id for an element instance. */
 export const idOf = (el) => {
-    let id = ids.get(el);
-    if (id === undefined) {
-        id = nextId++;
-        ids.set(el, id);
-        byId.set(id, new WeakRef(el));
-        byIdRegistry?.register(el, id);
-    }
-    return id;
+  let id = ids.get(el);
+  if (id === undefined) {
+    id = nextId++;
+    ids.set(el, id);
+    byId.set(id, new WeakRef(el));
+    byIdRegistry?.register(el, id);
+  }
+  return id;
 };
 /**
  * Resolves an id back to its element instance, or `undefined` if it was never
@@ -43,22 +44,20 @@ export const idOf = (el) => {
  * id the panel sends (details, watch, highlight).
  */
 export const elementById = (id) => {
-    const el = byId.get(id)?.deref();
-    if (el === undefined) {
-        byId.delete(id);
-        return undefined;
-    }
-    return el;
+  const el = byId.get(id)?.deref();
+  if (el === undefined) {
+    byId.delete(id);
+    return undefined;
+  }
+  return el;
 };
 /** Reads the file/line source metadata injected by the plugin transform. */
 export const sourceOf = (el) => {
-    const ctor = el.constructor;
-    if (ctor === undefined)
-        return undefined;
-    const meta = ctor[SOURCE_META_KEY];
-    if (meta?.filePath === undefined)
-        return undefined;
-    return { file: meta.filePath, line: meta.lineNumber ?? 1 };
+  const ctor = el.constructor;
+  if (ctor === undefined) return undefined;
+  const meta = ctor[SOURCE_META_KEY];
+  if (meta?.filePath === undefined) return undefined;
+  return {file: meta.filePath, line: meta.lineNumber ?? 1};
 };
 /**
  * Extracts the changed property keys from a PropertyValues argument.
@@ -66,8 +65,9 @@ export const sourceOf = (el) => {
  * that don't receive a changed-properties argument).
  */
 export const changedKeys = (changed) => {
-    if (!(changed instanceof Map))
-        return undefined;
-    return [...changed.keys()].map((k) => typeof k === 'symbol' ? k.toString() : String(k));
+  if (!(changed instanceof Map)) return undefined;
+  return [...changed.keys()].map((k) =>
+    typeof k === 'symbol' ? k.toString() : String(k)
+  );
 };
-//# sourceMappingURL=identity.js.map
+//# sourceMappingURL=identity.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"identity.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/identity.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAmBH,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;AAEvE,kEAAkE;AAClE,MAAM,GAAG,GAAG,IAAI,OAAO,EAAkB,CAAC;AAC1C,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;GAIG;AACH,MAAM,IAAI,GAAG,IAAI,GAAG,EAA2B,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,YAAY,GAChB,OAAO,oBAAoB,KAAK,UAAU;IACxC,CAAC,CAAC,IAAI,oBAAoB,CAAS,CAAC,EAAE,EAAE,EAAE;QACtC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IACJ,CAAC,CAAC,SAAS,CAAC;AAEhB,0EAA0E;AAC1E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAU,EAAU,EAAE;IACzC,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACrB,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACrB,EAAE,GAAG,MAAM,EAAE,CAAC;QACd,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAChB,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QAC9B,YAAY,EAAE,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAU,EAAuB,EAAE;IAC7D,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;IACjC,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAChB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,OAAO,EAAa,CAAC;AACvB,CAAC,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAU,EAA6B,EAAE;IAChE,MAAM,IAAI,GAAI,EAA8C,CAAC,WAAW,CAAC;IACzE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACzC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAEpB,CAAC;IACd,IAAI,IAAI,EAAE,QAAQ,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACnD,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,EAAC,CAAC;AAC3D,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAwB,EAAE;IACpE,IAAI,CAAC,CAAC,OAAO,YAAY,GAAG,CAAC;QAAE,OAAO,SAAS,CAAC;IAChD,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACnC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACjD,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Stable per-instance id and source-meta lookup for the timeline.\n *\n * Assigns monotonic numeric ids to ReactiveElement instances via a WeakMap\n * so we never mutate the elements themselves and ids survive HMR (same\n * instance identity after in-place patching).\n *\n * Source metadata is read from the Symbol injected by the source-meta\n * transform — the same one the source-overlay feature uses — so timeline\n * events can deep-link to the component's definition file.\n */\n\nexport interface ElementSource {\n  file: string;\n  line: number;\n}\n\nconst SOURCE_META_KEY = Symbol.for('@lit-labs/vite-plugin-lit#source');\n\n/** WeakMap avoids retaining elements after disconnection + GC. */\nconst ids = new WeakMap<object, number>();\nlet nextId = 0;\n\n/**\n * Reverse map for {@link elementById}, so a panel request (which only carries\n * an id) can be resolved back to the live instance. WeakRef-valued so we never\n * keep an element alive past GC; dead entries are pruned on lookup.\n */\nconst byId = new Map<number, WeakRef<object>>();\n\n/**\n * Drops `byId` entries as their elements are garbage-collected. The `WeakRef`\n * already lets the element itself be reclaimed, but the Map slot (id + WeakRef\n * wrapper) would otherwise linger until the next `elementById(id)` lookup —\n * which only happens on a panel request for that specific id, so on a churning\n * page (a list re-rendering thousands of rows) dead entries accumulate for the\n * whole dev session. Guarded for environments without `FinalizationRegistry`.\n */\nconst byIdRegistry =\n  typeof FinalizationRegistry === 'function'\n    ? new FinalizationRegistry<number>((id) => {\n        byId.delete(id);\n      })\n    : undefined;\n\n/** Returns (and memoises) a stable numeric id for an element instance. */\nexport const idOf = (el: object): number => {\n  let id = ids.get(el);\n  if (id === undefined) {\n    id = nextId++;\n    ids.set(el, id);\n    byId.set(id, new WeakRef(el));\n    byIdRegistry?.register(el, id);\n  }\n  return id;\n};\n\n/**\n * Resolves an id back to its element instance, or `undefined` if it was never\n * seen or has since been garbage-collected. Used by the inspector to act on the\n * id the panel sends (details, watch, highlight).\n */\nexport const elementById = (id: number): Element | undefined => {\n  const el = byId.get(id)?.deref();\n  if (el === undefined) {\n    byId.delete(id);\n    return undefined;\n  }\n  return el as Element;\n};\n\n/** Reads the file/line source metadata injected by the plugin transform. */\nexport const sourceOf = (el: object): ElementSource | undefined => {\n  const ctor = (el as {constructor?: Record<symbol, unknown>}).constructor;\n  if (ctor === undefined) return undefined;\n  const meta = ctor[SOURCE_META_KEY] as\n    | {filePath?: string; lineNumber?: number}\n    | undefined;\n  if (meta?.filePath === undefined) return undefined;\n  return {file: meta.filePath, line: meta.lineNumber ?? 1};\n};\n\n/**\n * Extracts the changed property keys from a PropertyValues argument.\n * Returns undefined when `changed` is not a Map (e.g. for lifecycle hooks\n * that don't receive a changed-properties argument).\n */\nexport const changedKeys = (changed: unknown): string[] | undefined => {\n  if (!(changed instanceof Map)) return undefined;\n  return [...changed.keys()].map((k) =>\n    typeof k === 'symbol' ? k.toString() : String(k)\n  );\n};\n"]}
+{"version":3,"file":"identity.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/identity.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAmBH,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;AAEvE,kEAAkE;AAClE,MAAM,GAAG,GAAG,IAAI,OAAO,EAAkB,CAAC;AAC1C,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;GAIG;AACH,MAAM,IAAI,GAAG,IAAI,GAAG,EAA2B,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,YAAY,GAChB,OAAO,oBAAoB,KAAK,UAAU;IACxC,CAAC,CAAC,IAAI,oBAAoB,CAAS,CAAC,EAAE,EAAE,EAAE;QACtC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IACJ,CAAC,CAAC,SAAS,CAAC;AAEhB,0EAA0E;AAC1E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAU,EAAU,EAAE;IACzC,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACrB,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACrB,EAAE,GAAG,MAAM,EAAE,CAAC;QACd,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAChB,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QAC9B,YAAY,EAAE,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAU,EAAuB,EAAE;IAC7D,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;IACjC,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAChB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,OAAO,EAAa,CAAC;AACvB,CAAC,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAU,EAA6B,EAAE;IAChE,MAAM,IAAI,GAAI,EAA8C,CAAC,WAAW,CAAC;IACzE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACzC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAEpB,CAAC;IACd,IAAI,IAAI,EAAE,QAAQ,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACnD,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,EAAC,CAAC;AAC3D,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAwB,EAAE;IACpE,IAAI,CAAC,CAAC,OAAO,YAAY,GAAG,CAAC;QAAE,OAAO,SAAS,CAAC;IAChD,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACnC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACjD,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Stable per-instance id and source-meta lookup for the timeline.\n *\n * Assigns monotonic numeric ids to ReactiveElement instances via a WeakMap\n * so we never mutate the elements themselves and ids survive HMR (same\n * instance identity after in-place patching).\n *\n * Source metadata is read from the Symbol injected by the source-meta\n * transform — the same one the source-overlay feature uses — so timeline\n * events can deep-link to the component's definition file.\n */\n\nexport interface ElementSource {\n  file: string;\n  line: number;\n}\n\nconst SOURCE_META_KEY = Symbol.for('@lit-labs/vite-plugin-lit#source');\n\n/** WeakMap avoids retaining elements after disconnection + GC. */\nconst ids = new WeakMap<object, number>();\nlet nextId = 0;\n\n/**\n * Reverse map for {@link elementById}, so a panel request (which only carries\n * an id) can be resolved back to the live instance. WeakRef-valued so we never\n * keep an element alive past GC; dead entries are pruned on lookup.\n */\nconst byId = new Map<number, WeakRef<object>>();\n\n/**\n * Drops `byId` entries as their elements are garbage-collected. The `WeakRef`\n * already lets the element itself be reclaimed, but the Map slot (id + WeakRef\n * wrapper) would otherwise linger until the next `elementById(id)` lookup —\n * which only happens on a panel request for that specific id, so on a churning\n * page (a list re-rendering thousands of rows) dead entries accumulate for the\n * whole dev session. Guarded for environments without `FinalizationRegistry`.\n */\nconst byIdRegistry =\n  typeof FinalizationRegistry === 'function'\n    ? new FinalizationRegistry<number>((id) => {\n        byId.delete(id);\n      })\n    : undefined;\n\n/** Returns (and memoises) a stable numeric id for an element instance. */\nexport const idOf = (el: object): number => {\n  let id = ids.get(el);\n  if (id === undefined) {\n    id = nextId++;\n    ids.set(el, id);\n    byId.set(id, new WeakRef(el));\n    byIdRegistry?.register(el, id);\n  }\n  return id;\n};\n\n/**\n * Resolves an id back to its element instance, or `undefined` if it was never\n * seen or has since been garbage-collected. Used by the inspector to act on the\n * id the panel sends (details, watch, highlight).\n */\nexport const elementById = (id: number): Element | undefined => {\n  const el = byId.get(id)?.deref();\n  if (el === undefined) {\n    byId.delete(id);\n    return undefined;\n  }\n  return el as Element;\n};\n\n/** Reads the file/line source metadata injected by the plugin transform. */\nexport const sourceOf = (el: object): ElementSource | undefined => {\n  const ctor = (el as {constructor?: Record<symbol, unknown>}).constructor;\n  if (ctor === undefined) return undefined;\n  const meta = ctor[SOURCE_META_KEY] as\n    | {filePath?: string; lineNumber?: number}\n    | undefined;\n  if (meta?.filePath === undefined) return undefined;\n  return {file: meta.filePath, line: meta.lineNumber ?? 1};\n};\n\n/**\n * Extracts the changed property keys from a PropertyValues argument.\n * Returns undefined when `changed` is not a Map (e.g. for lifecycle hooks\n * that don't receive a changed-properties argument).\n */\nexport const changedKeys = (changed: unknown): string[] | undefined => {\n  if (!(changed instanceof Map)) return undefined;\n  return [...changed.keys()].map((k) =>\n    typeof k === 'symbol' ? k.toString() : String(k)\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAG9D,KAAK,MAAM,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAC7C,KAAK,WAAW,GAAG,MAAM,OAAO,CAAC;AAyEjC,eAAO,MAAM,iBAAiB,GAC5B,MAAM,MAAM,EACZ,WAAW,WAAW,EACtB,cAAc,MAAM,OAAO,KAC1B,IAWF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,MAAM,MAAM,EACZ,WAAW,WAAW,EACtB,YAAY,MAAM,OAAO,KACxB,IAWF,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAG9D,KAAK,MAAM,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAC7C,KAAK,WAAW,GAAG,MAAM,OAAO,CAAC;AAyEjC,eAAO,MAAM,iBAAiB,SACtB,MAAM,aACD,WAAW,gBACR,MAAM,OAAO,KAC1B,IAWF,CAAC;AAEF,eAAO,MAAM,oBAAoB,SACzB,MAAM,aACD,WAAW,cACV,MAAM,OAAO,KACxB,IAWF,CAAC"}

package/lib/runtime/timeline/input.js

@@ -3,85 +3,72 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-import { now } from './clock.js';
-const MOUSE_EVENTS = [
-    'mousedown',
-    'mouseup',
-    'click',
-    'dblclick',
-];
+import {now} from './clock.js';
+const MOUSE_EVENTS = ['mousedown', 'mouseup', 'click', 'dblclick'];
 const KEY_EVENTS = ['keydown', 'keyup'];
 const mouseHandler = (emit, recording, mouseEnabled) => (e) => {
-    if (!recording() || !mouseEnabled())
-        return;
-    const me = e;
-    const data = {
-        type: e.type,
-        x: Math.round(me.clientX),
-        y: Math.round(me.clientY),
-        button: me.button,
-    };
-    emit({
-        layerId: 'mouse',
-        time: now(),
-        title: e.type,
-        subtitle: `(${data.x}, ${data.y})`,
-        data,
-    });
+  if (!recording() || !mouseEnabled()) return;
+  const me = e;
+  const data = {
+    type: e.type,
+    x: Math.round(me.clientX),
+    y: Math.round(me.clientY),
+    button: me.button,
+  };
+  emit({
+    layerId: 'mouse',
+    time: now(),
+    title: e.type,
+    subtitle: `(${data.x}, ${data.y})`,
+    data,
+  });
 };
 const keyHandler = (emit, recording, keyEnabled) => (e) => {
-    if (!recording() || !keyEnabled())
-        return;
-    const ke = e;
-    const modifiers = [];
-    if (ke.ctrlKey)
-        modifiers.push('Ctrl');
-    if (ke.metaKey)
-        modifiers.push('Meta');
-    if (ke.altKey)
-        modifiers.push('Alt');
-    if (ke.shiftKey)
-        modifiers.push('Shift');
-    const data = {
-        type: e.type,
-        key: ke.key,
-        code: ke.code,
-        modifiers,
-    };
-    emit({
-        layerId: 'keyboard',
-        time: now(),
-        title: ke.key,
-        subtitle: modifiers.length ? modifiers.join('+') : undefined,
-        data,
-    });
+  if (!recording() || !keyEnabled()) return;
+  const ke = e;
+  const modifiers = [];
+  if (ke.ctrlKey) modifiers.push('Ctrl');
+  if (ke.metaKey) modifiers.push('Meta');
+  if (ke.altKey) modifiers.push('Alt');
+  if (ke.shiftKey) modifiers.push('Shift');
+  const data = {
+    type: e.type,
+    key: ke.key,
+    code: ke.code,
+    modifiers,
+  };
+  emit({
+    layerId: 'keyboard',
+    time: now(),
+    title: ke.key,
+    subtitle: modifiers.length ? modifiers.join('+') : undefined,
+    data,
+  });
 };
 let mouseCleanup = null;
 let keyCleanup = null;
 export const installMouseLayer = (emit, recording, mouseEnabled) => {
-    if (mouseCleanup !== null)
-        return;
-    const handler = mouseHandler(emit, recording, mouseEnabled);
+  if (mouseCleanup !== null) return;
+  const handler = mouseHandler(emit, recording, mouseEnabled);
+  for (const type of MOUSE_EVENTS) {
+    window.addEventListener(type, handler, {capture: true, passive: true});
+  }
+  mouseCleanup = () => {
     for (const type of MOUSE_EVENTS) {
-        window.addEventListener(type, handler, { capture: true, passive: true });
+      window.removeEventListener(type, handler, {capture: true});
     }
-    mouseCleanup = () => {
-        for (const type of MOUSE_EVENTS) {
-            window.removeEventListener(type, handler, { capture: true });
-        }
-    };
+  };
 };
 export const installKeyboardLayer = (emit, recording, keyEnabled) => {
-    if (keyCleanup !== null)
-        return;
-    const handler = keyHandler(emit, recording, keyEnabled);
+  if (keyCleanup !== null) return;
+  const handler = keyHandler(emit, recording, keyEnabled);
+  for (const type of KEY_EVENTS) {
+    window.addEventListener(type, handler, {capture: true, passive: true});
+  }
+  keyCleanup = () => {
     for (const type of KEY_EVENTS) {
-        window.addEventListener(type, handler, { capture: true, passive: true });
+      window.removeEventListener(type, handler, {capture: true});
     }
-    keyCleanup = () => {
-        for (const type of KEY_EVENTS) {
-            window.removeEventListener(type, handler, { capture: true });
-        }
-    };
+  };
 };
-//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/input.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 * Mouse and keyboard timeline layers — plain window listeners, direct port\n * of the Vue DevTools timeline input capture pattern.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\nimport {now} from './clock.js';\n\ntype EmitFn = (event: TimelineEvent) => void;\ntype RecordingFn = () => boolean;\n\nconst MOUSE_EVENTS = [\n  'mousedown',\n  'mouseup',\n  'click',\n  'dblclick',\n] as const satisfies readonly string[];\n\nconst KEY_EVENTS = ['keydown', 'keyup'] as const satisfies readonly string[];\n\ninterface MouseData {\n  type: string;\n  x: number;\n  y: number;\n  button: number;\n}\n\ninterface KeyData {\n  type: string;\n  key: string;\n  code: string;\n  modifiers: string[];\n}\n\nconst mouseHandler =\n  (emit: EmitFn, recording: RecordingFn, mouseEnabled: () => boolean) =>\n  (e: Event): void => {\n    if (!recording() || !mouseEnabled()) return;\n    const me = e as MouseEvent;\n    const data: MouseData = {\n      type: e.type,\n      x: Math.round(me.clientX),\n      y: Math.round(me.clientY),\n      button: me.button,\n    };\n    emit({\n      layerId: 'mouse',\n      time: now(),\n      title: e.type,\n      subtitle: `(${data.x}, ${data.y})`,\n      data,\n    });\n  };\n\nconst keyHandler =\n  (emit: EmitFn, recording: RecordingFn, keyEnabled: () => boolean) =>\n  (e: Event): void => {\n    if (!recording() || !keyEnabled()) return;\n    const ke = e as KeyboardEvent;\n    const modifiers: string[] = [];\n    if (ke.ctrlKey) modifiers.push('Ctrl');\n    if (ke.metaKey) modifiers.push('Meta');\n    if (ke.altKey) modifiers.push('Alt');\n    if (ke.shiftKey) modifiers.push('Shift');\n    const data: KeyData = {\n      type: e.type,\n      key: ke.key,\n      code: ke.code,\n      modifiers,\n    };\n    emit({\n      layerId: 'keyboard',\n      time: now(),\n      title: ke.key,\n      subtitle: modifiers.length ? modifiers.join('+') : undefined,\n      data,\n    });\n  };\n\nlet mouseCleanup: (() => void) | null = null;\nlet keyCleanup: (() => void) | null = null;\n\nexport const installMouseLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  mouseEnabled: () => boolean\n): void => {\n  if (mouseCleanup !== null) return;\n  const handler = mouseHandler(emit, recording, mouseEnabled);\n  for (const type of MOUSE_EVENTS) {\n    window.addEventListener(type, handler, {capture: true, passive: true});\n  }\n  mouseCleanup = () => {\n    for (const type of MOUSE_EVENTS) {\n      window.removeEventListener(type, handler, {capture: true});\n    }\n  };\n};\n\nexport const installKeyboardLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  keyEnabled: () => boolean\n): void => {\n  if (keyCleanup !== null) return;\n  const handler = keyHandler(emit, recording, keyEnabled);\n  for (const type of KEY_EVENTS) {\n    window.addEventListener(type, handler, {capture: true, passive: true});\n  }\n  keyCleanup = () => {\n    for (const type of KEY_EVENTS) {\n      window.removeEventListener(type, handler, {capture: true});\n    }\n  };\n};\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/input.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 * Mouse and keyboard timeline layers — plain window listeners, direct port\n * of the Vue DevTools timeline input capture pattern.\n */\n\nimport type {TimelineEvent} from '../../../types/timeline.js';\nimport {now} from './clock.js';\n\ntype EmitFn = (event: TimelineEvent) => void;\ntype RecordingFn = () => boolean;\n\nconst MOUSE_EVENTS = [\n  'mousedown',\n  'mouseup',\n  'click',\n  'dblclick',\n] as const satisfies readonly string[];\n\nconst KEY_EVENTS = ['keydown', 'keyup'] as const satisfies readonly string[];\n\ninterface MouseData {\n  type: string;\n  x: number;\n  y: number;\n  button: number;\n}\n\ninterface KeyData {\n  type: string;\n  key: string;\n  code: string;\n  modifiers: string[];\n}\n\nconst mouseHandler =\n  (emit: EmitFn, recording: RecordingFn, mouseEnabled: () => boolean) =>\n  (e: Event): void => {\n    if (!recording() || !mouseEnabled()) return;\n    const me = e as MouseEvent;\n    const data: MouseData = {\n      type: e.type,\n      x: Math.round(me.clientX),\n      y: Math.round(me.clientY),\n      button: me.button,\n    };\n    emit({\n      layerId: 'mouse',\n      time: now(),\n      title: e.type,\n      subtitle: `(${data.x}, ${data.y})`,\n      data,\n    });\n  };\n\nconst keyHandler =\n  (emit: EmitFn, recording: RecordingFn, keyEnabled: () => boolean) =>\n  (e: Event): void => {\n    if (!recording() || !keyEnabled()) return;\n    const ke = e as KeyboardEvent;\n    const modifiers: string[] = [];\n    if (ke.ctrlKey) modifiers.push('Ctrl');\n    if (ke.metaKey) modifiers.push('Meta');\n    if (ke.altKey) modifiers.push('Alt');\n    if (ke.shiftKey) modifiers.push('Shift');\n    const data: KeyData = {\n      type: e.type,\n      key: ke.key,\n      code: ke.code,\n      modifiers,\n    };\n    emit({\n      layerId: 'keyboard',\n      time: now(),\n      title: ke.key,\n      subtitle: modifiers.length ? modifiers.join('+') : undefined,\n      data,\n    });\n  };\n\nlet mouseCleanup: (() => void) | null = null;\nlet keyCleanup: (() => void) | null = null;\n\nexport const installMouseLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  mouseEnabled: () => boolean\n): void => {\n  if (mouseCleanup !== null) return;\n  const handler = mouseHandler(emit, recording, mouseEnabled);\n  for (const type of MOUSE_EVENTS) {\n    window.addEventListener(type, handler, {capture: true, passive: true});\n  }\n  mouseCleanup = () => {\n    for (const type of MOUSE_EVENTS) {\n      window.removeEventListener(type, handler, {capture: true});\n    }\n  };\n};\n\nexport const installKeyboardLayer = (\n  emit: EmitFn,\n  recording: RecordingFn,\n  keyEnabled: () => boolean\n): void => {\n  if (keyCleanup !== null) return;\n  const handler = keyHandler(emit, recording, keyEnabled);\n  for (const type of KEY_EVENTS) {\n    window.addEventListener(type, handler, {capture: true, passive: true});\n  }\n  keyCleanup = () => {\n    for (const type of KEY_EVENTS) {\n      window.removeEventListener(type, handler, {capture: true});\n    }\n  };\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"install.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/timeline/install.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}
+{"version":3,"file":"install.d.ts","sourceRoot":"","sources":["../../../src/lib/runtime/timeline/install.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/lib/runtime/timeline/install.js

@@ -13,20 +13,22 @@
  * 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';
+import {emit, setHotClient} from './transport.js';
+import {resetClock} from './clock.js';
+import {installLifecycleLayer, setUpdateHook} from './lifecycle.js';
+import {installRenderLayer, setRenderDebugEnabled} from './render.js';
+import {installMouseLayer, installKeyboardLayer} from './input.js';
+import {flashUpdate, setFlashEnabled, setFlashRamp} from './flash.js';
+import {subscribeOverride} from '../overrides.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,
+  recordingState: false,
+  litLifecycleEnabled: true,
+  litRenderEnabled: true,
+  mouseEventEnabled: false,
+  keyboardEventEnabled: false,
 };
 const recording = () => state.recordingState;
 const lifecycleEnabled = () => state.litLifecycleEnabled;
@@ -37,7 +39,7 @@ const keyboardEnabled = () => state.keyboardEventEnabled;
 // 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);
+  setRenderDebugEnabled(state.recordingState && state.litRenderEnabled);
 };
 // ---------------------------------------------------------------------------
 // Capture layer installation
@@ -46,24 +48,31 @@ installLifecycleLayer(emit, recording, lifecycleEnabled);
 installRenderLayer(emit, recording, renderEnabled);
 installMouseLayer(emit, recording, mouseEnabled);
 installKeyboardLayer(emit, recording, 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.
+setUpdateHook(flashUpdate);
 const hot = import.meta.hot;
+subscribeOverride(hot, (o) => {
+  setFlashEnabled(o.flashUpdates ?? false);
+  setFlashRamp(o.flashUpdatesRamp ?? false);
+});
 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', {});
+  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
+//# sourceMappingURL=install.js.map

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

@@ -1 +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"]}
+{"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 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// 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// 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\nsubscribeOverride(hot, (o) => {\n  setFlashEnabled(o.flashUpdates ?? false);\n  setFlashRamp(o.flashUpdatesRamp ?? false);\n});\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

@@ -7,6 +7,14 @@ import type { TimelineEvent } from '../../../types/timeline.js';
 type EmitFn = (event: TimelineEvent) => void;
 type RecordingFn = () => boolean;
 type LayerEnabledFn = () => boolean;
+/**
+ * Called once per completed `performUpdate`, with the element and whether that
+ * was its first update. Independent of the recording gate: the flash overlay
+ * wants every update while it is on, whether or not the timeline is recording.
+ */
+export type UpdateHook = (el: Element, first: boolean) => void;
+/** Install (or clear, with `null`) the per-update hook. One consumer. */
+export declare const setUpdateHook: (hook: UpdateHook | null) => void;
 /**
  * Install lifecycle instrumentation for *every* Lit element on the page.
  *