@oddsquad/vite-plugin-lit 0.2.3 → 0.4.0

package/lib/timeline/derive.js

@@ -0,0 +1,242 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/** Layer whose events describe Lit update ticks. */
+const LIFECYCLE_LAYER_ID = 'lit-lifecycle';
+/** Layers whose events are developer input, for {@link attributeInput}. */
+const INPUT_LAYER_IDS = ['mouse', 'keyboard'];
+/** The phase that brackets an entire update tick. */
+const ROOT_PHASE = 'performUpdate';
+const START_SUFFIX = ':start';
+const END_SUFFIX = ':end';
+/** Reads `data.changed` defensively — `data` is `unknown` on the wire. */
+const changedOf = (event) => {
+  const data = event.data;
+  if (data === null || typeof data !== 'object') return undefined;
+  const changed = data.changed;
+  if (!Array.isArray(changed)) return undefined;
+  const keys = changed.filter((key) => typeof key === 'string');
+  return keys.length > 0 ? keys : undefined;
+};
+const pointSpan = (event, index) => ({
+  layerId: event.layerId,
+  key: `${event.layerId}:point:${index}`,
+  name: event.title ?? event.layerId,
+  start: event.time,
+  changed: changedOf(event),
+  subtitle: event.subtitle,
+  logType: event.logType,
+  meta: event.meta,
+  events: [event],
+});
+/**
+ * Collapses `:start` / `:end` event pairs into spans, passing anything else
+ * through as a point span.
+ *
+ * Pairing is keyed on **layer + groupId + phase name**, never on `groupId`
+ * alone: a whole update tick shares one groupId (`runtime/timeline/
+ * lifecycle.ts` builds it as `${elementId}:${tick}`), so matching on the id
+ * would marry `willUpdate:start` to `performUpdate:end`. Each phase occurs at
+ * most once per tick, which makes the triple unique.
+ *
+ * Unmatched halves survive rather than disappear — the buffer is a bounded
+ * ring, so its oldest end and its newest start routinely have no partner, and
+ * an update that is still running has a genuinely open span.
+ */
+export const toSpans = (events) => {
+  const spans = [];
+  const open = new Map();
+  events.forEach((event, index) => {
+    const title = event.title ?? event.layerId;
+    const isStart = title.endsWith(START_SUFFIX);
+    const isEnd = !isStart && title.endsWith(END_SUFFIX);
+    if (event.groupId === undefined || (!isStart && !isEnd)) {
+      spans.push(pointSpan(event, index));
+      return;
+    }
+    const name = title.slice(
+      0,
+      -(isStart ? START_SUFFIX.length : END_SUFFIX.length)
+    );
+    const key = `${event.layerId}:${event.groupId}:${name}`;
+    if (isStart) {
+      const span = {
+        layerId: event.layerId,
+        key,
+        name,
+        groupId: event.groupId,
+        start: event.time,
+        changed: changedOf(event),
+        subtitle: event.subtitle,
+        logType: event.logType,
+        meta: event.meta,
+        events: [event],
+      };
+      open.set(key, span);
+      // Pushed on its start, so the list is already in start order and an
+      // open span keeps its place instead of appearing when it finally ends.
+      spans.push(span);
+      return;
+    }
+    const span = open.get(key);
+    if (span === undefined) {
+      spans.push(pointSpan(event, index));
+      return;
+    }
+    open.delete(key);
+    span.events.push(event);
+    // A negative delta means the buffer straddles a clock reset (the runtime
+    // re-zeroes on the rising edge of recording). Report no duration rather
+    // than a negative one; the span stays open, which is what it honestly is.
+    if (event.time >= span.start) {
+      span.end = event.time;
+      span.duration = event.time - span.start;
+    }
+    span.changed ??= changedOf(event);
+  });
+  return spans.sort((a, b) => a.start - b.start);
+};
+/**
+ * Groups lifecycle spans into update ticks.
+ *
+ * `duration` is taken from the `performUpdate` span alone, never from a sum of
+ * the phases: `willUpdate` / `update` / `updated` all run *inside*
+ * `performUpdate`, so summing counts the same milliseconds several times over.
+ *
+ * `changed` is the union across the tick's phases because only the phases that
+ * receive a `PropertyValues` argument carry it — `performUpdate` takes none,
+ * so the bracketing span is always silent about the reason.
+ */
+export const toUpdateCycles = (spans) => {
+  const byGroup = new Map();
+  for (const span of spans) {
+    const elementId = span.meta?.elementId;
+    if (
+      span.layerId !== LIFECYCLE_LAYER_ID ||
+      span.groupId === undefined ||
+      elementId === undefined
+    ) {
+      // Point lifecycle events (connect/disconnect) have no groupId and are
+      // not update ticks; other layers are not this function's business.
+      continue;
+    }
+    const key = String(span.groupId);
+    let cycle = byGroup.get(key);
+    if (cycle === undefined) {
+      cycle = {
+        key,
+        elementId,
+        tagName: span.meta?.tagName ?? 'unknown',
+        source: span.meta?.source,
+        start: span.start,
+        changed: [],
+        phases: [],
+      };
+      byGroup.set(key, cycle);
+    }
+    cycle.phases.push(span);
+    if (span.start < cycle.start) cycle.start = span.start;
+    if (span.name === ROOT_PHASE) cycle.duration = span.duration;
+    for (const changedKey of span.changed ?? []) {
+      if (!cycle.changed.includes(changedKey)) cycle.changed.push(changedKey);
+    }
+  }
+  return [...byGroup.values()].sort((a, b) => a.start - b.start);
+};
+/**
+ * Totals update cycles per component tag.
+ *
+ * Grouped by tag rather than by instance because the question this answers is
+ * "which *component* re-renders too much" — a list of 200 rows each updating
+ * twice is one component's problem, not 200. The instance ids are kept so the
+ * caller can still drill in.
+ */
+export const rollup = (cycles) => {
+  const byTag = new Map();
+  for (const cycle of cycles) {
+    let record = byTag.get(cycle.tagName);
+    if (record === undefined) {
+      record = {
+        entry: {
+          tagName: cycle.tagName,
+          elementIds: [],
+          updates: 0,
+          totalMs: 0,
+          maxMs: 0,
+          reasons: [],
+          source: cycle.source,
+        },
+        reasons: new Map(),
+      };
+      byTag.set(cycle.tagName, record);
+    }
+    const {entry, reasons} = record;
+    entry.updates++;
+    if (!entry.elementIds.includes(cycle.elementId)) {
+      entry.elementIds.push(cycle.elementId);
+    }
+    entry.source ??= cycle.source;
+    // An open or clock-straddling cycle contributes a count but no time —
+    // better than inventing one, and the count is what flags a hot component.
+    if (cycle.duration !== undefined) {
+      entry.totalMs += cycle.duration;
+      if (cycle.duration > entry.maxMs) entry.maxMs = cycle.duration;
+    }
+    for (const key of cycle.changed) {
+      reasons.set(key, (reasons.get(key) ?? 0) + 1);
+    }
+  }
+  const entries = [];
+  for (const {entry, reasons} of byTag.values()) {
+    entry.reasons = [...reasons]
+      .map(([key, count]) => ({key, count}))
+      .sort((a, b) => b.count - a.count || a.key.localeCompare(b.key));
+    entries.push(entry);
+  }
+  // Slowest first, then most frequent: a component with no measured durations
+  // still sorts above a quiet one.
+  return entries.sort((a, b) => b.totalMs - a.totalMs || b.updates - a.updates);
+};
+/**
+ * Attributes each update cycle to the input event that preceded it, within
+ * `windowMs`.
+ *
+ * This is what the mouse and keyboard layers are for. On their own they
+ * duplicate what the browser's own event log already shows; joined to the
+ * updates they precede they answer the question the raw layers only imply —
+ * an update with a cause is an interaction, and an update without one is a
+ * timer, a signal, or a stray `requestUpdate()`.
+ *
+ * Returns a new array; cycles with no cause are returned as-is.
+ */
+export const attributeInput = (cycles, events, windowMs = 200) => {
+  const inputs = events
+    .filter((event) => INPUT_LAYER_IDS.includes(event.layerId))
+    .sort((a, b) => a.time - b.time);
+  if (inputs.length === 0) return [...cycles];
+  // Both sides are sorted by time, so one forward pass suffices.
+  let cursor = 0;
+  return cycles.map((cycle) => {
+    while (
+      cursor + 1 < inputs.length &&
+      inputs[cursor + 1].time <= cycle.start
+    ) {
+      cursor++;
+    }
+    const candidate = inputs[cursor];
+    const delta = cycle.start - candidate.time;
+    if (delta < 0 || delta > windowMs) return cycle;
+    return {
+      ...cycle,
+      cause: {
+        layerId: candidate.layerId,
+        type: candidate.title ?? candidate.layerId,
+        detail: candidate.subtitle,
+        time: candidate.time,
+      },
+    };
+  });
+};
+//# sourceMappingURL=derive.js.map

package/lib/timeline/derive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive.js","sourceRoot":"","sources":["../../src/lib/timeline/derive.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 * Derivation over recorded timeline events.\n *\n * The capture layers emit one event per phase boundary, which is the right\n * wire format and the wrong thing to read: a single update tick of one\n * component is five to ten rows whose durations the reader has to subtract by\n * hand. Everything needed to do better is already on the events — `groupId`\n * pairs a start with its end, `data.changed` names the reactive properties\n * that caused the update — so this module turns a flat event list into the\n * three shapes the panel and agents actually ask for:\n *\n * - {@link TimelineSpan} — a start/end pair collapsed into one entry with a\n *   duration (\"`update` took 1.8ms\").\n * - {@link UpdateCycle} — one component's whole update tick, with the changed\n *   property keys that triggered it (\"`<hmr-counter>` updated because\n *   `count` changed\").\n * - {@link ComponentRollup} — per-component totals over a recording (\"this\n *   component updated 340 times for 120ms\").\n *\n * Pure and dependency-free by design: it imports only the shared event types,\n * so the panel derives client-side over its 5000-event buffer and\n * `devframe/definition.ts` — which must stay framework-neutral — can derive\n * server-side over the ring buffer for the agent-facing summary.\n */\n\nimport type {TimelineEvent} from '../../types/timeline.js';\n\n/** Layer whose events describe Lit update ticks. */\nconst LIFECYCLE_LAYER_ID = 'lit-lifecycle';\n\n/** Layers whose events are developer input, for {@link attributeInput}. */\nconst INPUT_LAYER_IDS: readonly string[] = ['mouse', 'keyboard'];\n\n/** The phase that brackets an entire update tick. */\nconst ROOT_PHASE = 'performUpdate';\n\nconst START_SUFFIX = ':start';\nconst END_SUFFIX = ':end';\n\n/**\n * A start/end pair collapsed into one entry, or a point event that never had\n * an end to begin with.\n */\nexport interface TimelineSpan {\n  layerId: string;\n  /**\n   * Stable across re-derivation of the same events, which a Lit `repeat()`\n   * key and a selection comparison both need — the span objects themselves\n   * are rebuilt whenever the event buffer changes.\n   */\n  key: string;\n  /** The event title with its `:start` / `:end` suffix removed. */\n  name: string;\n  /** Pairing id as emitted; `undefined` for point events. */\n  groupId?: number | string;\n  start: number;\n  /** Absent while the span is still open, or if its end was never recorded. */\n  end?: number;\n  /** `end - start`. Absent for open spans and for point events. */\n  duration?: number;\n  /** Reactive property keys that caused this update, where the phase has them. */\n  changed?: string[];\n  subtitle?: string;\n  logType?: TimelineEvent['logType'];\n  meta?: TimelineEvent['meta'];\n  /** The events this span was built from, for the detail pane. */\n  events: TimelineEvent[];\n}\n\n/** One component's complete update tick. */\nexport interface UpdateCycle {\n  /** The `${elementId}:${tick}` groupId the phases share. */\n  key: string;\n  elementId: number;\n  tagName: string;\n  source?: {file: string; line: number};\n  start: number;\n  /** The `performUpdate` span's duration — see {@link toUpdateCycles}. */\n  duration?: number;\n  /** Union of the changed reactive property keys across the tick's phases. */\n  changed: string[];\n  phases: TimelineSpan[];\n  /** The input event this update followed, if any. See {@link attributeInput}. */\n  cause?: {layerId: string; type: string; detail?: string; time: number};\n}\n\n/** Per-component totals over a set of update cycles. */\nexport interface ComponentRollup {\n  tagName: string;\n  /** Every instance of this component that updated, in first-seen order. */\n  elementIds: number[];\n  updates: number;\n  /** Summed `performUpdate` durations; excludes cycles with no measured end. */\n  totalMs: number;\n  maxMs: number;\n  /** Changed-key frequency across the cycles, most frequent first. */\n  reasons: Array<{key: string; count: number}>;\n  source?: {file: string; line: number};\n}\n\n/** Reads `data.changed` defensively — `data` is `unknown` on the wire. */\nconst changedOf = (event: TimelineEvent): string[] | undefined => {\n  const data = event.data;\n  if (data === null || typeof data !== 'object') return undefined;\n  const changed = (data as {changed?: unknown}).changed;\n  if (!Array.isArray(changed)) return undefined;\n  const keys = changed.filter((key): key is string => typeof key === 'string');\n  return keys.length > 0 ? keys : undefined;\n};\n\nconst pointSpan = (event: TimelineEvent, index: number): TimelineSpan => ({\n  layerId: event.layerId,\n  key: `${event.layerId}:point:${index}`,\n  name: event.title ?? event.layerId,\n  start: event.time,\n  changed: changedOf(event),\n  subtitle: event.subtitle,\n  logType: event.logType,\n  meta: event.meta,\n  events: [event],\n});\n\n/**\n * Collapses `:start` / `:end` event pairs into spans, passing anything else\n * through as a point span.\n *\n * Pairing is keyed on **layer + groupId + phase name**, never on `groupId`\n * alone: a whole update tick shares one groupId (`runtime/timeline/\n * lifecycle.ts` builds it as `${elementId}:${tick}`), so matching on the id\n * would marry `willUpdate:start` to `performUpdate:end`. Each phase occurs at\n * most once per tick, which makes the triple unique.\n *\n * Unmatched halves survive rather than disappear — the buffer is a bounded\n * ring, so its oldest end and its newest start routinely have no partner, and\n * an update that is still running has a genuinely open span.\n */\nexport const toSpans = (events: readonly TimelineEvent[]): TimelineSpan[] => {\n  const spans: TimelineSpan[] = [];\n  const open = new Map<string, TimelineSpan>();\n\n  events.forEach((event, index) => {\n    const title = event.title ?? event.layerId;\n    const isStart = title.endsWith(START_SUFFIX);\n    const isEnd = !isStart && title.endsWith(END_SUFFIX);\n\n    if (event.groupId === undefined || (!isStart && !isEnd)) {\n      spans.push(pointSpan(event, index));\n      return;\n    }\n\n    const name = title.slice(\n      0,\n      -(isStart ? START_SUFFIX.length : END_SUFFIX.length)\n    );\n    const key = `${event.layerId}:${event.groupId}:${name}`;\n\n    if (isStart) {\n      const span: TimelineSpan = {\n        layerId: event.layerId,\n        key,\n        name,\n        groupId: event.groupId,\n        start: event.time,\n        changed: changedOf(event),\n        subtitle: event.subtitle,\n        logType: event.logType,\n        meta: event.meta,\n        events: [event],\n      };\n      open.set(key, span);\n      // Pushed on its start, so the list is already in start order and an\n      // open span keeps its place instead of appearing when it finally ends.\n      spans.push(span);\n      return;\n    }\n\n    const span = open.get(key);\n    if (span === undefined) {\n      spans.push(pointSpan(event, index));\n      return;\n    }\n    open.delete(key);\n    span.events.push(event);\n    // A negative delta means the buffer straddles a clock reset (the runtime\n    // re-zeroes on the rising edge of recording). Report no duration rather\n    // than a negative one; the span stays open, which is what it honestly is.\n    if (event.time >= span.start) {\n      span.end = event.time;\n      span.duration = event.time - span.start;\n    }\n    span.changed ??= changedOf(event);\n  });\n\n  return spans.sort((a, b) => a.start - b.start);\n};\n\n/**\n * Groups lifecycle spans into update ticks.\n *\n * `duration` is taken from the `performUpdate` span alone, never from a sum of\n * the phases: `willUpdate` / `update` / `updated` all run *inside*\n * `performUpdate`, so summing counts the same milliseconds several times over.\n *\n * `changed` is the union across the tick's phases because only the phases that\n * receive a `PropertyValues` argument carry it — `performUpdate` takes none,\n * so the bracketing span is always silent about the reason.\n */\nexport const toUpdateCycles = (\n  spans: readonly TimelineSpan[]\n): UpdateCycle[] => {\n  const byGroup = new Map<string, UpdateCycle>();\n\n  for (const span of spans) {\n    const elementId = span.meta?.elementId;\n    if (\n      span.layerId !== LIFECYCLE_LAYER_ID ||\n      span.groupId === undefined ||\n      elementId === undefined\n    ) {\n      // Point lifecycle events (connect/disconnect) have no groupId and are\n      // not update ticks; other layers are not this function's business.\n      continue;\n    }\n\n    const key = String(span.groupId);\n    let cycle = byGroup.get(key);\n    if (cycle === undefined) {\n      cycle = {\n        key,\n        elementId,\n        tagName: span.meta?.tagName ?? 'unknown',\n        source: span.meta?.source,\n        start: span.start,\n        changed: [],\n        phases: [],\n      };\n      byGroup.set(key, cycle);\n    }\n\n    cycle.phases.push(span);\n    if (span.start < cycle.start) cycle.start = span.start;\n    if (span.name === ROOT_PHASE) cycle.duration = span.duration;\n    for (const changedKey of span.changed ?? []) {\n      if (!cycle.changed.includes(changedKey)) cycle.changed.push(changedKey);\n    }\n  }\n\n  return [...byGroup.values()].sort((a, b) => a.start - b.start);\n};\n\n/**\n * Totals update cycles per component tag.\n *\n * Grouped by tag rather than by instance because the question this answers is\n * \"which *component* re-renders too much\" — a list of 200 rows each updating\n * twice is one component's problem, not 200. The instance ids are kept so the\n * caller can still drill in.\n */\nexport const rollup = (cycles: readonly UpdateCycle[]): ComponentRollup[] => {\n  const byTag = new Map<\n    string,\n    {entry: ComponentRollup; reasons: Map<string, number>}\n  >();\n\n  for (const cycle of cycles) {\n    let record = byTag.get(cycle.tagName);\n    if (record === undefined) {\n      record = {\n        entry: {\n          tagName: cycle.tagName,\n          elementIds: [],\n          updates: 0,\n          totalMs: 0,\n          maxMs: 0,\n          reasons: [],\n          source: cycle.source,\n        },\n        reasons: new Map(),\n      };\n      byTag.set(cycle.tagName, record);\n    }\n\n    const {entry, reasons} = record;\n    entry.updates++;\n    if (!entry.elementIds.includes(cycle.elementId)) {\n      entry.elementIds.push(cycle.elementId);\n    }\n    entry.source ??= cycle.source;\n    // An open or clock-straddling cycle contributes a count but no time —\n    // better than inventing one, and the count is what flags a hot component.\n    if (cycle.duration !== undefined) {\n      entry.totalMs += cycle.duration;\n      if (cycle.duration > entry.maxMs) entry.maxMs = cycle.duration;\n    }\n    for (const key of cycle.changed) {\n      reasons.set(key, (reasons.get(key) ?? 0) + 1);\n    }\n  }\n\n  const entries: ComponentRollup[] = [];\n  for (const {entry, reasons} of byTag.values()) {\n    entry.reasons = [...reasons]\n      .map(([key, count]) => ({key, count}))\n      .sort((a, b) => b.count - a.count || a.key.localeCompare(b.key));\n    entries.push(entry);\n  }\n\n  // Slowest first, then most frequent: a component with no measured durations\n  // still sorts above a quiet one.\n  return entries.sort((a, b) => b.totalMs - a.totalMs || b.updates - a.updates);\n};\n\n/**\n * Attributes each update cycle to the input event that preceded it, within\n * `windowMs`.\n *\n * This is what the mouse and keyboard layers are for. On their own they\n * duplicate what the browser's own event log already shows; joined to the\n * updates they precede they answer the question the raw layers only imply —\n * an update with a cause is an interaction, and an update without one is a\n * timer, a signal, or a stray `requestUpdate()`.\n *\n * Returns a new array; cycles with no cause are returned as-is.\n */\nexport const attributeInput = (\n  cycles: readonly UpdateCycle[],\n  events: readonly TimelineEvent[],\n  windowMs = 200\n): UpdateCycle[] => {\n  const inputs = events\n    .filter((event) => INPUT_LAYER_IDS.includes(event.layerId))\n    .sort((a, b) => a.time - b.time);\n  if (inputs.length === 0) return [...cycles];\n\n  // Both sides are sorted by time, so one forward pass suffices.\n  let cursor = 0;\n  return cycles.map((cycle) => {\n    while (\n      cursor + 1 < inputs.length &&\n      inputs[cursor + 1]!.time <= cycle.start\n    ) {\n      cursor++;\n    }\n    const candidate = inputs[cursor]!;\n    const delta = cycle.start - candidate.time;\n    if (delta < 0 || delta > windowMs) return cycle;\n    return {\n      ...cycle,\n      cause: {\n        layerId: candidate.layerId,\n        type: candidate.title ?? candidate.layerId,\n        detail: candidate.subtitle,\n        time: candidate.time,\n      },\n    };\n  });\n};\n"]}

package/lib/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA2MH;;;;GAIG;AACH,eAAO,MAAM,QAAQ,stKAAqC,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,yBAIlB,CAAC;AAIF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,mBAE5B,mBAAwB,KAAG,MAwB7B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,mBAAmB,KAAG,IAO5D,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA2MH;;;;GAIG;AACH,eAAO,MAAM,QAAQ,stKAAqC,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,yBAIlB,CAAC;AAIF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,sBAExB,mBAAmB,KAAQ,MAwB7B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,aAAc,mBAAmB,KAAG,IAO5D,CAAC"}

package/lib/tokens.js

@@ -3,7 +3,7 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-import { css, unsafeCSS } from 'lit';
+import {css, unsafeCSS} from 'lit';
 /**
  * Design token CSS custom properties for the Lit DevTools.
  *
@@ -217,7 +217,7 @@ export const tokenCSS = `${baseTokenCSS}\n${darkThemeCSS}`;
  * by {@link injectTokens}. The panel iframe calls `injectTokens()` from
  * \`lit-devtools-panel.ts\` so all components inherit the same dark/light theme.
  */
-export const tokens = css `
+export const tokens = css`
   :host {
     ${unsafeCSS(baseTokenCSS)}
   }
@@ -231,14 +231,14 @@ let _injected = false;
  * the owning document's UA surfaces (canvas, form controls, scrollbars)
  * follow the devtools theme.
  */
-export const tokenStyleText = ({ colorScheme = false, } = {}) => {
-    const dark = colorScheme
-        ? `${darkThemeCSS}\n  ${darkSchemeCSS}`
-        : darkThemeCSS;
-    const light = colorScheme
-        ? `${lightThemeCSS}\n  ${lightSchemeCSS}`
-        : lightThemeCSS;
-    return `
+export const tokenStyleText = ({colorScheme = false} = {}) => {
+  const dark = colorScheme
+    ? `${darkThemeCSS}\n  ${darkSchemeCSS}`
+    : darkThemeCSS;
+  const light = colorScheme
+    ? `${lightThemeCSS}\n  ${lightSchemeCSS}`
+    : lightThemeCSS;
+  return `
     :root {
       ${baseTokenCSS}
       ${dark}
@@ -269,12 +269,11 @@ export const tokenStyleText = ({ colorScheme = false, } = {}) => {
  * {@link InjectTokensOptions.colorScheme} for its own document.
  */
 export const injectTokens = (options) => {
-    if (_injected)
-        return;
-    _injected = true;
-    const style = document.createElement('style');
-    style.setAttribute('data-lit-devtools-tokens', '');
-    style.textContent = tokenStyleText(options);
-    document.head.prepend(style);
+  if (_injected) return;
+  _injected = true;
+  const style = document.createElement('style');
+  style.setAttribute('data-lit-devtools-tokens', '');
+  style.textContent = tokenStyleText(options);
+  document.head.prepend(style);
 };
-//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map

package/lib/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFpB,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCpB,CAAC;AAEF,MAAM,aAAa,GAAG,qBAAqB,CAAC;AAE5C,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCrB,CAAC;AAEF,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,KAAK,YAAY,EAAE,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;MAEnB,SAAS,CAAC,YAAY,CAAC;;CAE5B,CAAC;AAEF,IAAI,SAAS,GAAG,KAAK,CAAC;AAgBtB;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,GAAG,KAAK,MACI,EAAE,EAAU,EAAE;IACrC,MAAM,IAAI,GAAG,WAAW;QACtB,CAAC,CAAC,GAAG,YAAY,OAAO,aAAa,EAAE;QACvC,CAAC,CAAC,YAAY,CAAC;IACjB,MAAM,KAAK,GAAG,WAAW;QACvB,CAAC,CAAC,GAAG,aAAa,OAAO,cAAc,EAAE;QACzC,CAAC,CAAC,aAAa,CAAC;IAClB,OAAO;;QAED,YAAY;QACZ,IAAI;;;;UAIF,KAAK;;;;QAIP,KAAK;;;QAGL,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAA6B,EAAQ,EAAE;IAClE,IAAI,SAAS;QAAE,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC;IACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,YAAY,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;IACnD,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC5C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {css, unsafeCSS} from 'lit';\n\n/**\n * Design token CSS custom properties for the Lit DevTools.\n *\n * Two entry points:\n *  - **`tokens`** — Lit `css` template that defines the theme-agnostic base\n *    tokens on `:host`. Semantic color aliases (`--lit-devtools-bg`, `--lit-devtools-surface`, `--lit-devtools-text`,\n *    etc.) are inherited from `:root`, where {@link injectTokens} installs them.\n *    Use as `static styles = [tokens, css`…`]`.\n *  - **`injectTokens()`** — injects `:root { … }` into the page `<head>` once.\n *    This makes semantic aliases available to every devtools surface, both\n *    runtime elements (indicator, source-overlay) that build their shadow DOM\n *    via `innerHTML` and Lit panel components that inherit from `:root`.\n *    The injected stylesheet reacts to `prefers-color-scheme` and to\n *    `.color-scheme-light` / `.color-scheme-dark` classes on `:root`.\n *\n * Sourced from the lit-design skill (`tokens/colors.css`). Defaults to the\n * dark DevTools theme; the light lit.dev website palette is applied when the\n * OS/browser requests a light color scheme or when `:root` has the matching\n * theme class.\n *\n * Fonts are system stacks (no webfonts). For the branded Manrope + Roboto Mono\n * see the lit-design skill's `fonts/` directory.\n */\n\nconst baseTokenCSS = `\n  /* ---- Brand · the Lit flame ---- */\n  --lit-devtools-lit-blue:        #324fff;\n  --lit-devtools-lit-blue-bright: #4d63ff;\n  --lit-devtools-lit-indigo:      #2a2c9d;\n  --lit-devtools-lit-dark-blue:   #283198;\n  --lit-devtools-lit-cyan:        #00ffff;\n  --lit-devtools-lit-dark-cyan:   #00e8ff;\n\n  /* ---- Neutral ink scale (0 = near-black, 13 = white) ---- */\n  --lit-devtools-ink-0:  hsl(0 0% 1%);\n  --lit-devtools-ink-1:  hsl(0 0% 5%);\n  --lit-devtools-ink-2:  hsl(0 0% 7%);\n  --lit-devtools-ink-3:  hsl(0 0% 11%);\n  --lit-devtools-ink-4:  hsl(0 0% 13%);\n  --lit-devtools-ink-5:  hsl(0 0% 16%);\n  --lit-devtools-ink-6:  hsl(0 0% 21%);\n  --lit-devtools-ink-7:  hsl(0 0% 28%);\n  --lit-devtools-ink-8:  hsl(0 0% 38%);\n  --lit-devtools-ink-9:  hsl(0 0% 57%);\n  --lit-devtools-ink-10: hsl(0 0% 63%);\n  --lit-devtools-ink-11: hsl(0 0% 78%);\n  --lit-devtools-ink-12: hsl(0 0% 89%);\n  --lit-devtools-ink-13: hsl(0 0% 100%);\n\n  /* ---- Typography ---- */\n  --lit-devtools-font-sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;\n  --lit-devtools-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n\n  --lit-devtools-weight-regular:   400;\n  --lit-devtools-weight-medium:    500;\n  --lit-devtools-weight-semibold:  600;\n  --lit-devtools-weight-bold:      700;\n  --lit-devtools-weight-extrabold: 800;\n\n  --lit-devtools-text-2xs: 11px;\n  --lit-devtools-text-xs:  12px;\n  --lit-devtools-text-sm:  13px;\n  --lit-devtools-text-md:  14px;\n  --lit-devtools-text-base:16px;\n\n  --lit-devtools-leading-tight:   1.15;\n  --lit-devtools-leading-snug:    1.3;\n  --lit-devtools-leading-normal:  1.5;\n\n  --lit-devtools-tracking-tight:  -0.02em;\n  --lit-devtools-tracking-snug:   -0.01em;\n  --lit-devtools-tracking-normal: 0;\n  --lit-devtools-tracking-wide:   0.02em;\n  --lit-devtools-tracking-caps:   0.06em;\n\n  /* ---- Spacing (4px base) ---- */\n  --lit-devtools-space-0:  0;\n  --lit-devtools-space-1:  2px;\n  --lit-devtools-space-2:  4px;\n  --lit-devtools-space-3:  6px;\n  --lit-devtools-space-4:  8px;\n  --lit-devtools-space-5:  12px;\n  --lit-devtools-space-6:  16px;\n  --lit-devtools-space-7:  20px;\n  --lit-devtools-space-8:  24px;\n  --lit-devtools-space-9:  32px;\n\n  /* ---- Radius ---- */\n  --lit-devtools-radius-xs:   3px;\n  --lit-devtools-radius-sm:   5px;\n  --lit-devtools-radius-md:   8px;\n  --lit-devtools-radius-lg:   12px;\n  --lit-devtools-radius-xl:   16px;\n  --lit-devtools-radius-pill: 999px;\n\n  /* ---- Elevation ---- */\n  --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);\n  --lit-devtools-shadow-sm: 0 1px 5px hsl(0 0% 0% / 0.35);\n  --lit-devtools-shadow-md: 0 4px 14px hsl(0 0% 0% / 0.40);\n  --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);\n  --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n  --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),\n    0 0 0 1px hsl(0 0% 100% / 0.06);\n  --lit-devtools-ring: 0 0 0 2px var(--lit-devtools-accent-ring);\n\n  /* ---- Motion ---- */\n  --lit-devtools-ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --lit-devtools-dur-fast:    140ms;\n  --lit-devtools-dur-normal:  220ms;\n`;\n\nconst darkThemeCSS = `\n  /* ---- DARK · DevTools theme ---- */\n  --lit-devtools-accent:               var(--lit-devtools-lit-blue-bright);\n  --lit-devtools-accent-hover:         #6478ff;\n  --lit-devtools-accent-pressed:       #3d54f0;\n  --lit-devtools-accent-soft:          hsla(232 100% 65% / 0.16);\n  --lit-devtools-accent-ring:          hsla(232 100% 65% / 0.45);\n  --lit-devtools-on-accent:            #ffffff;\n  --lit-devtools-accent-cyan:          var(--lit-devtools-lit-dark-cyan);\n\n  --lit-devtools-bg:                   var(--lit-devtools-ink-0);\n  --lit-devtools-surface:             var(--lit-devtools-ink-2);\n  --lit-devtools-surface-low:          var(--lit-devtools-ink-1);\n  --lit-devtools-surface-container:    var(--lit-devtools-ink-4);\n  --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);\n  --lit-devtools-surface-elevated:     var(--lit-devtools-ink-6);\n  --lit-devtools-surface-hover:        hsl(0 0% 100% / 0.04);\n  --lit-devtools-surface-active:       hsl(0 0% 100% / 0.07);\n\n  --lit-devtools-text:                 var(--lit-devtools-ink-12);\n  --lit-devtools-text-strong:          var(--lit-devtools-ink-13);\n  --lit-devtools-text-secondary:       var(--lit-devtools-ink-10);\n  --lit-devtools-text-muted:           var(--lit-devtools-ink-8);\n  --lit-devtools-text-link:            var(--lit-devtools-lit-blue-bright);\n\n  --lit-devtools-border:               var(--lit-devtools-ink-6);\n  --lit-devtools-border-strong:        var(--lit-devtools-ink-7);\n  --lit-devtools-border-subtle:        hsl(0 0% 100% / 0.06);\n\n  --lit-devtools-success:              hsl(158 74% 53%);\n  --lit-devtools-success-soft:         hsl(158 74% 53% / 0.15);\n  --lit-devtools-warning:              #f4bf4f;\n  --lit-devtools-warning-soft:         hsl(43 88% 63% / 0.15);\n  --lit-devtools-error:                #ff6b6b;\n  --lit-devtools-error-soft:           hsl(0 100% 71% / 0.15);\n  --lit-devtools-info:                 var(--lit-devtools-lit-dark-cyan);\n  --lit-devtools-info-soft:            hsl(187 100% 47% / 0.15);\n\n  --lit-devtools-selection-bg:         var(--lit-devtools-accent);\n  --lit-devtools-on-selection:         #ffffff;\n`;\n\nconst darkSchemeCSS = `color-scheme: dark;`;\n\nconst lightThemeCSS = `\n  /* ---- LIGHT · lit.dev website theme ---- */\n  --lit-devtools-accent:               var(--lit-devtools-lit-blue);\n  --lit-devtools-accent-hover:         #1f3bff;\n  --lit-devtools-accent-pressed:       #2a2c9d;\n  --lit-devtools-accent-soft:          hsla(232 100% 60% / 0.12);\n  --lit-devtools-accent-ring:          hsla(232 100% 60% / 0.40);\n  --lit-devtools-on-accent:            #ffffff;\n  --lit-devtools-accent-cyan:          var(--lit-devtools-lit-dark-cyan);\n\n  --lit-devtools-bg:                   #f4f4f4;\n  --lit-devtools-surface:              #ffffff;\n  --lit-devtools-surface-low:          #f3f3f3;\n  --lit-devtools-surface-container:    #ffffff;\n  --lit-devtools-surface-container-high: #e8e8e8;\n  --lit-devtools-surface-elevated:     #ffffff;\n  --lit-devtools-surface-hover:        hsl(0 0% 0% / 0.04);\n  --lit-devtools-surface-active:       hsl(0 0% 0% / 0.07);\n\n  --lit-devtools-text:                 #242424;\n  --lit-devtools-text-strong:          #000000;\n  --lit-devtools-text-secondary:       #6e6e6e;\n  --lit-devtools-text-muted:           #949494;\n  --lit-devtools-text-link:            #005dc7;\n\n  --lit-devtools-border:               #e2e2e2;\n  --lit-devtools-border-strong:        #c6c6c6;\n  --lit-devtools-border-subtle:        hsl(0 0% 0% / 0.07);\n\n  --lit-devtools-success:              #00865b;\n  --lit-devtools-success-soft:         hsl(158 100% 26% / 0.10);\n  --lit-devtools-warning:              #b26a00;\n  --lit-devtools-warning-soft:         hsl(40 100% 35% / 0.10);\n  --lit-devtools-error:                #ba1a1a;\n  --lit-devtools-error-soft:           hsl(0 75% 42% / 0.10);\n  --lit-devtools-info:                 #005dc7;\n  --lit-devtools-info-soft:            hsl(210 100% 39% / 0.10);\n\n  --lit-devtools-selection-bg:         var(--lit-devtools-accent);\n  --lit-devtools-on-selection:         #ffffff;\n`;\n\nconst lightSchemeCSS = `color-scheme: light;`;\n\n/**\n * Default dark theme tokens as a flat string, primarily for use by\n * {@link injectTokens}. Prefer importing `tokens` for Lit components so the\n * semantic aliases are inherited from `:root`.\n */\nexport const tokenCSS = `${baseTokenCSS}\\n${darkThemeCSS}`;\n\n/**\n * Lit `css` template for use in panel component shadow roots.\n *\n * ```ts\n * import {tokens} from '../lib/tokens.js';\n * // ...\n * static override styles = [tokens, css`…`];\n * ```\n *\n * This installs the theme-agnostic base tokens on `:host`. Semantic aliases\n * (`--lit-devtools-bg`, `--lit-devtools-text`, etc.) are inherited from `:root`, where they are installed\n * by {@link injectTokens}. The panel iframe calls `injectTokens()` from\n * \\`lit-devtools-panel.ts\\` so all components inherit the same dark/light theme.\n */\nexport const tokens = css`\n  :host {\n    ${unsafeCSS(baseTokenCSS)}\n  }\n`;\n\nlet _injected = false;\n\n/**\n * Options for {@link injectTokens} / {@link tokenStyleText}.\n */\nexport interface InjectTokensOptions {\n  /**\n   * Also declare `color-scheme` on `:root`. Only safe when the devtools OWN\n   * the target document (the panel iframe / standalone panel page). Never set\n   * this when injecting into the host page: `color-scheme` on the embedder's\n   * `:root` makes the UA repaint the canvas dark for apps that don't declare\n   * an opaque background. Defaults to `false`.\n   */\n  colorScheme?: boolean;\n}\n\n/**\n * Builds the token stylesheet text injected by {@link injectTokens}.\n *\n * By default the sheet defines custom properties only — inert for the host\n * page. With `colorScheme: true` it additionally declares `color-scheme` so\n * the owning document's UA surfaces (canvas, form controls, scrollbars)\n * follow the devtools theme.\n */\nexport const tokenStyleText = ({\n  colorScheme = false,\n}: InjectTokensOptions = {}): string => {\n  const dark = colorScheme\n    ? `${darkThemeCSS}\\n  ${darkSchemeCSS}`\n    : darkThemeCSS;\n  const light = colorScheme\n    ? `${lightThemeCSS}\\n  ${lightSchemeCSS}`\n    : lightThemeCSS;\n  return `\n    :root {\n      ${baseTokenCSS}\n      ${dark}\n    }\n    @media (prefers-color-scheme: light) {\n      :root {\n        ${light}\n      }\n    }\n    :root.color-scheme-light {\n      ${light}\n    }\n    :root.color-scheme-dark {\n      ${dark}\n    }\n  `;\n};\n\n/**\n * Injects `:root { … }` into the page `<head>` once.\n *\n * CSS custom properties defined on `:root` cascade through shadow DOM\n * boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both\n * runtime elements (indicator, source-overlay) and Lit panel components.\n *\n * The injected stylesheet reacts to `prefers-color-scheme` and to\n * `.color-scheme-light` / `.color-scheme-dark` classes on the document root.\n * It never sets `color-scheme` on the host page; the panel opts in via\n * {@link InjectTokensOptions.colorScheme} for its own document.\n */\nexport const injectTokens = (options?: InjectTokensOptions): void => {\n  if (_injected) return;\n  _injected = true;\n  const style = document.createElement('style');\n  style.setAttribute('data-lit-devtools-tokens', '');\n  style.textContent = tokenStyleText(options);\n  document.head.prepend(style);\n};\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFpB,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCpB,CAAC;AAEF,MAAM,aAAa,GAAG,qBAAqB,CAAC;AAE5C,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCrB,CAAC;AAEF,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,KAAK,YAAY,EAAE,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;MAEnB,SAAS,CAAC,YAAY,CAAC;;CAE5B,CAAC;AAEF,IAAI,SAAS,GAAG,KAAK,CAAC;AAgBtB;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,GAAG,KAAK,GACpB,GAAwB,EAAE,EAAU,EAAE;IACrC,MAAM,IAAI,GAAG,WAAW;QACtB,CAAC,CAAC,GAAG,YAAY,OAAO,aAAa,EAAE;QACvC,CAAC,CAAC,YAAY,CAAC;IACjB,MAAM,KAAK,GAAG,WAAW;QACvB,CAAC,CAAC,GAAG,aAAa,OAAO,cAAc,EAAE;QACzC,CAAC,CAAC,aAAa,CAAC;IAClB,OAAO;;QAED,YAAY;QACZ,IAAI;;;;UAIF,KAAK;;;;QAIP,KAAK;;;QAGL,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAA6B,EAAQ,EAAE;IAClE,IAAI,SAAS;QAAE,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC;IACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,YAAY,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;IACnD,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC5C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {css, unsafeCSS} from 'lit';\n\n/**\n * Design token CSS custom properties for the Lit DevTools.\n *\n * Two entry points:\n *  - **`tokens`** — Lit `css` template that defines the theme-agnostic base\n *    tokens on `:host`. Semantic color aliases (`--lit-devtools-bg`, `--lit-devtools-surface`, `--lit-devtools-text`,\n *    etc.) are inherited from `:root`, where {@link injectTokens} installs them.\n *    Use as `static styles = [tokens, css`…`]`.\n *  - **`injectTokens()`** — injects `:root { … }` into the page `<head>` once.\n *    This makes semantic aliases available to every devtools surface, both\n *    runtime elements (indicator, source-overlay) that build their shadow DOM\n *    via `innerHTML` and Lit panel components that inherit from `:root`.\n *    The injected stylesheet reacts to `prefers-color-scheme` and to\n *    `.color-scheme-light` / `.color-scheme-dark` classes on `:root`.\n *\n * Sourced from the lit-design skill (`tokens/colors.css`). Defaults to the\n * dark DevTools theme; the light lit.dev website palette is applied when the\n * OS/browser requests a light color scheme or when `:root` has the matching\n * theme class.\n *\n * Fonts are system stacks (no webfonts). For the branded Manrope + Roboto Mono\n * see the lit-design skill's `fonts/` directory.\n */\n\nconst baseTokenCSS = `\n  /* ---- Brand · the Lit flame ---- */\n  --lit-devtools-lit-blue:        #324fff;\n  --lit-devtools-lit-blue-bright: #4d63ff;\n  --lit-devtools-lit-indigo:      #2a2c9d;\n  --lit-devtools-lit-dark-blue:   #283198;\n  --lit-devtools-lit-cyan:        #00ffff;\n  --lit-devtools-lit-dark-cyan:   #00e8ff;\n\n  /* ---- Neutral ink scale (0 = near-black, 13 = white) ---- */\n  --lit-devtools-ink-0:  hsl(0 0% 1%);\n  --lit-devtools-ink-1:  hsl(0 0% 5%);\n  --lit-devtools-ink-2:  hsl(0 0% 7%);\n  --lit-devtools-ink-3:  hsl(0 0% 11%);\n  --lit-devtools-ink-4:  hsl(0 0% 13%);\n  --lit-devtools-ink-5:  hsl(0 0% 16%);\n  --lit-devtools-ink-6:  hsl(0 0% 21%);\n  --lit-devtools-ink-7:  hsl(0 0% 28%);\n  --lit-devtools-ink-8:  hsl(0 0% 38%);\n  --lit-devtools-ink-9:  hsl(0 0% 57%);\n  --lit-devtools-ink-10: hsl(0 0% 63%);\n  --lit-devtools-ink-11: hsl(0 0% 78%);\n  --lit-devtools-ink-12: hsl(0 0% 89%);\n  --lit-devtools-ink-13: hsl(0 0% 100%);\n\n  /* ---- Typography ---- */\n  --lit-devtools-font-sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;\n  --lit-devtools-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n\n  --lit-devtools-weight-regular:   400;\n  --lit-devtools-weight-medium:    500;\n  --lit-devtools-weight-semibold:  600;\n  --lit-devtools-weight-bold:      700;\n  --lit-devtools-weight-extrabold: 800;\n\n  --lit-devtools-text-2xs: 11px;\n  --lit-devtools-text-xs:  12px;\n  --lit-devtools-text-sm:  13px;\n  --lit-devtools-text-md:  14px;\n  --lit-devtools-text-base:16px;\n\n  --lit-devtools-leading-tight:   1.15;\n  --lit-devtools-leading-snug:    1.3;\n  --lit-devtools-leading-normal:  1.5;\n\n  --lit-devtools-tracking-tight:  -0.02em;\n  --lit-devtools-tracking-snug:   -0.01em;\n  --lit-devtools-tracking-normal: 0;\n  --lit-devtools-tracking-wide:   0.02em;\n  --lit-devtools-tracking-caps:   0.06em;\n\n  /* ---- Spacing (4px base) ---- */\n  --lit-devtools-space-0:  0;\n  --lit-devtools-space-1:  2px;\n  --lit-devtools-space-2:  4px;\n  --lit-devtools-space-3:  6px;\n  --lit-devtools-space-4:  8px;\n  --lit-devtools-space-5:  12px;\n  --lit-devtools-space-6:  16px;\n  --lit-devtools-space-7:  20px;\n  --lit-devtools-space-8:  24px;\n  --lit-devtools-space-9:  32px;\n\n  /* ---- Radius ---- */\n  --lit-devtools-radius-xs:   3px;\n  --lit-devtools-radius-sm:   5px;\n  --lit-devtools-radius-md:   8px;\n  --lit-devtools-radius-lg:   12px;\n  --lit-devtools-radius-xl:   16px;\n  --lit-devtools-radius-pill: 999px;\n\n  /* ---- Elevation ---- */\n  --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);\n  --lit-devtools-shadow-sm: 0 1px 5px hsl(0 0% 0% / 0.35);\n  --lit-devtools-shadow-md: 0 4px 14px hsl(0 0% 0% / 0.40);\n  --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);\n  --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n  --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),\n    0 0 0 1px hsl(0 0% 100% / 0.06);\n  --lit-devtools-ring: 0 0 0 2px var(--lit-devtools-accent-ring);\n\n  /* ---- Motion ---- */\n  --lit-devtools-ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --lit-devtools-dur-fast:    140ms;\n  --lit-devtools-dur-normal:  220ms;\n`;\n\nconst darkThemeCSS = `\n  /* ---- DARK · DevTools theme ---- */\n  --lit-devtools-accent:               var(--lit-devtools-lit-blue-bright);\n  --lit-devtools-accent-hover:         #6478ff;\n  --lit-devtools-accent-pressed:       #3d54f0;\n  --lit-devtools-accent-soft:          hsla(232 100% 65% / 0.16);\n  --lit-devtools-accent-ring:          hsla(232 100% 65% / 0.45);\n  --lit-devtools-on-accent:            #ffffff;\n  --lit-devtools-accent-cyan:          var(--lit-devtools-lit-dark-cyan);\n\n  --lit-devtools-bg:                   var(--lit-devtools-ink-0);\n  --lit-devtools-surface:             var(--lit-devtools-ink-2);\n  --lit-devtools-surface-low:          var(--lit-devtools-ink-1);\n  --lit-devtools-surface-container:    var(--lit-devtools-ink-4);\n  --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);\n  --lit-devtools-surface-elevated:     var(--lit-devtools-ink-6);\n  --lit-devtools-surface-hover:        hsl(0 0% 100% / 0.04);\n  --lit-devtools-surface-active:       hsl(0 0% 100% / 0.07);\n\n  --lit-devtools-text:                 var(--lit-devtools-ink-12);\n  --lit-devtools-text-strong:          var(--lit-devtools-ink-13);\n  --lit-devtools-text-secondary:       var(--lit-devtools-ink-10);\n  --lit-devtools-text-muted:           var(--lit-devtools-ink-8);\n  --lit-devtools-text-link:            var(--lit-devtools-lit-blue-bright);\n\n  --lit-devtools-border:               var(--lit-devtools-ink-6);\n  --lit-devtools-border-strong:        var(--lit-devtools-ink-7);\n  --lit-devtools-border-subtle:        hsl(0 0% 100% / 0.06);\n\n  --lit-devtools-success:              hsl(158 74% 53%);\n  --lit-devtools-success-soft:         hsl(158 74% 53% / 0.15);\n  --lit-devtools-warning:              #f4bf4f;\n  --lit-devtools-warning-soft:         hsl(43 88% 63% / 0.15);\n  --lit-devtools-error:                #ff6b6b;\n  --lit-devtools-error-soft:           hsl(0 100% 71% / 0.15);\n  --lit-devtools-info:                 var(--lit-devtools-lit-dark-cyan);\n  --lit-devtools-info-soft:            hsl(187 100% 47% / 0.15);\n\n  --lit-devtools-selection-bg:         var(--lit-devtools-accent);\n  --lit-devtools-on-selection:         #ffffff;\n`;\n\nconst darkSchemeCSS = `color-scheme: dark;`;\n\nconst lightThemeCSS = `\n  /* ---- LIGHT · lit.dev website theme ---- */\n  --lit-devtools-accent:               var(--lit-devtools-lit-blue);\n  --lit-devtools-accent-hover:         #1f3bff;\n  --lit-devtools-accent-pressed:       #2a2c9d;\n  --lit-devtools-accent-soft:          hsla(232 100% 60% / 0.12);\n  --lit-devtools-accent-ring:          hsla(232 100% 60% / 0.40);\n  --lit-devtools-on-accent:            #ffffff;\n  --lit-devtools-accent-cyan:          var(--lit-devtools-lit-dark-cyan);\n\n  --lit-devtools-bg:                   #f4f4f4;\n  --lit-devtools-surface:              #ffffff;\n  --lit-devtools-surface-low:          #f3f3f3;\n  --lit-devtools-surface-container:    #ffffff;\n  --lit-devtools-surface-container-high: #e8e8e8;\n  --lit-devtools-surface-elevated:     #ffffff;\n  --lit-devtools-surface-hover:        hsl(0 0% 0% / 0.04);\n  --lit-devtools-surface-active:       hsl(0 0% 0% / 0.07);\n\n  --lit-devtools-text:                 #242424;\n  --lit-devtools-text-strong:          #000000;\n  --lit-devtools-text-secondary:       #6e6e6e;\n  --lit-devtools-text-muted:           #949494;\n  --lit-devtools-text-link:            #005dc7;\n\n  --lit-devtools-border:               #e2e2e2;\n  --lit-devtools-border-strong:        #c6c6c6;\n  --lit-devtools-border-subtle:        hsl(0 0% 0% / 0.07);\n\n  --lit-devtools-success:              #00865b;\n  --lit-devtools-success-soft:         hsl(158 100% 26% / 0.10);\n  --lit-devtools-warning:              #b26a00;\n  --lit-devtools-warning-soft:         hsl(40 100% 35% / 0.10);\n  --lit-devtools-error:                #ba1a1a;\n  --lit-devtools-error-soft:           hsl(0 75% 42% / 0.10);\n  --lit-devtools-info:                 #005dc7;\n  --lit-devtools-info-soft:            hsl(210 100% 39% / 0.10);\n\n  --lit-devtools-selection-bg:         var(--lit-devtools-accent);\n  --lit-devtools-on-selection:         #ffffff;\n`;\n\nconst lightSchemeCSS = `color-scheme: light;`;\n\n/**\n * Default dark theme tokens as a flat string, primarily for use by\n * {@link injectTokens}. Prefer importing `tokens` for Lit components so the\n * semantic aliases are inherited from `:root`.\n */\nexport const tokenCSS = `${baseTokenCSS}\\n${darkThemeCSS}`;\n\n/**\n * Lit `css` template for use in panel component shadow roots.\n *\n * ```ts\n * import {tokens} from '../lib/tokens.js';\n * // ...\n * static override styles = [tokens, css`…`];\n * ```\n *\n * This installs the theme-agnostic base tokens on `:host`. Semantic aliases\n * (`--lit-devtools-bg`, `--lit-devtools-text`, etc.) are inherited from `:root`, where they are installed\n * by {@link injectTokens}. The panel iframe calls `injectTokens()` from\n * \\`lit-devtools-panel.ts\\` so all components inherit the same dark/light theme.\n */\nexport const tokens = css`\n  :host {\n    ${unsafeCSS(baseTokenCSS)}\n  }\n`;\n\nlet _injected = false;\n\n/**\n * Options for {@link injectTokens} / {@link tokenStyleText}.\n */\nexport interface InjectTokensOptions {\n  /**\n   * Also declare `color-scheme` on `:root`. Only safe when the devtools OWN\n   * the target document (the panel iframe / standalone panel page). Never set\n   * this when injecting into the host page: `color-scheme` on the embedder's\n   * `:root` makes the UA repaint the canvas dark for apps that don't declare\n   * an opaque background. Defaults to `false`.\n   */\n  colorScheme?: boolean;\n}\n\n/**\n * Builds the token stylesheet text injected by {@link injectTokens}.\n *\n * By default the sheet defines custom properties only — inert for the host\n * page. With `colorScheme: true` it additionally declares `color-scheme` so\n * the owning document's UA surfaces (canvas, form controls, scrollbars)\n * follow the devtools theme.\n */\nexport const tokenStyleText = ({\n  colorScheme = false,\n}: InjectTokensOptions = {}): string => {\n  const dark = colorScheme\n    ? `${darkThemeCSS}\\n  ${darkSchemeCSS}`\n    : darkThemeCSS;\n  const light = colorScheme\n    ? `${lightThemeCSS}\\n  ${lightSchemeCSS}`\n    : lightThemeCSS;\n  return `\n    :root {\n      ${baseTokenCSS}\n      ${dark}\n    }\n    @media (prefers-color-scheme: light) {\n      :root {\n        ${light}\n      }\n    }\n    :root.color-scheme-light {\n      ${light}\n    }\n    :root.color-scheme-dark {\n      ${dark}\n    }\n  `;\n};\n\n/**\n * Injects `:root { … }` into the page `<head>` once.\n *\n * CSS custom properties defined on `:root` cascade through shadow DOM\n * boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both\n * runtime elements (indicator, source-overlay) and Lit panel components.\n *\n * The injected stylesheet reacts to `prefers-color-scheme` and to\n * `.color-scheme-light` / `.color-scheme-dark` classes on the document root.\n * It never sets `color-scheme` on the host page; the panel opts in via\n * {@link InjectTokensOptions.colorScheme} for its own document.\n */\nexport const injectTokens = (options?: InjectTokensOptions): void => {\n  if (_injected) return;\n  _injected = true;\n  const style = document.createElement('style');\n  style.setAttribute('data-lit-devtools-tokens', '');\n  style.textContent = tokenStyleText(options);\n  document.head.prepend(style);\n};\n"]}

package/lib/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/transform.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,WAAW,MAAM,cAAc,CAAC;AAGvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,kBAAkB,CAAC;AAE9C,2DAA2D;AAC3D,eAAO,MAAM,UAAU,yBAA6B,CAAC;AASrD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAC5B,MAAM,MAAM,EACZ,oBAAoB,OAAO,KAC1B,OAIwD,CAAC;AAE5D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;CAC7C;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,MAAM,KACX,OAAO,CAAC,wBAAwB,GAAG,IAAI,CAqDzC,CAAC"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../src/lib/transform.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,WAAW,MAAM,cAAc,CAAC;AAGvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,kBAAkB,CAAC;AAE9C,2DAA2D;AAC3D,eAAO,MAAM,UAAU,yBAA6B,CAAC;AASrD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,SACtB,MAAM,sBACQ,OAAO,KAC1B,OAIwD,CAAC;AAE5D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;CAC7C;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,SACvB,MAAM,KACX,OAAO,CAAC,wBAAwB,GAAG,IAAI,CAwDzC,CAAC"}

package/lib/transform.js

@@ -3,9 +3,9 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-import { init, parse } from 'es-module-lexer';
+import {init, parse} from 'es-module-lexer';
 import MagicString from 'magic-string';
-import { WRAP_TABLE } from './wrap-table.js';
+import {WRAP_TABLE} from './wrap-table.js';
 /**
  * Prefix for this plugin's virtual module ids. Rewritten specifiers carry
  * the `\0` convention directly in the transformed source; Vite's
@@ -17,16 +17,20 @@ export const VIRTUAL_PREFIX = '\0lit-plugin:';
 export const INSTALL_ID = `${VIRTUAL_PREFIX}install`;
 const LIT_FAMILY_PACKAGES = ['lit', 'lit-html', 'lit-element'];
 const LIT_FAMILY_SCOPES = ['@lit/', '@lit-labs/'];
-const isLitFamilySpecifier = (spec) => LIT_FAMILY_PACKAGES.some((p) => spec === p || spec.startsWith(`${p}/`)) ||
-    LIT_FAMILY_SCOPES.some((s) => spec.startsWith(s));
+const isLitFamilySpecifier = (spec) =>
+  LIT_FAMILY_PACKAGES.some((p) => spec === p || spec.startsWith(`${p}/`)) ||
+  LIT_FAMILY_SCOPES.some((s) => spec.startsWith(s));
 /**
  * A module needs the define interceptor + self-accept if it registers
  * custom elements: a textual `customElements.define(` call, or — only when
  * a lit-family import is present — a `customElement(` decorator call (the
  * decorator runtime call stays textually present after TS transpilation).
  */
-export const isComponentModule = (code, hasLitFamilyImport) => /(?<![.\w$])(?:(?:window|globalThis|self)\.)?customElements\.define\s*\(/.test(code) ||
-    (hasLitFamilyImport && /\bcustomElement\s*\(/.test(code));
+export const isComponentModule = (code, hasLitFamilyImport) =>
+  /(?<![.\w$])(?:(?:window|globalThis|self)\.)?customElements\.define\s*\(/.test(
+    code
+  ) ||
+  (hasLitFamilyImport && /\bcustomElement\s*\(/.test(code));
 /**
  * The whole dev transform, as a pure function of the module source:
  *
@@ -41,59 +45,60 @@ export const isComponentModule = (code, hasLitFamilyImport) => /(?<![.\w$])(?:(?
  * Returns `null` when the module needs no changes.
  */
 export const transformLitModule = async (code) => {
-    // Cheap pre-filter before parsing.
-    if (!code.includes('lit') && !code.includes('customElements')) {
-        return null;
+  // Cheap pre-filter before parsing.
+  if (!code.includes('lit') && !code.includes('customElements')) {
+    return null;
+  }
+  // Idempotency: never re-instrument our own output.
+  if (code.includes(VIRTUAL_PREFIX)) {
+    return null;
+  }
+  await init();
+  let imports;
+  try {
+    [imports] = parse(code);
+  } catch {
+    // Not parseable as a module; leave it to Vite to error.
+    return null;
+  }
+  const ms = new MagicString(code);
+  let changed = false;
+  let hasLitFamilyImport = false;
+  for (const imp of imports) {
+    // `import.meta` reports a null specifier; a dynamic import reports
+    // undefined when its argument is not statically analyzable, and a glob
+    // (template literal) specifier is a pattern rather than a real id.
+    const spec = imp.specifier;
+    if (spec == null || (imp.type === 'dynamic' && imp.glob)) {
+      continue;
     }
-    // Idempotency: never re-instrument our own output.
-    if (code.includes(VIRTUAL_PREFIX)) {
-        return null;
+    if (isLitFamilySpecifier(spec)) {
+      hasLitFamilyImport = true;
     }
-    await init;
-    let imports;
-    try {
-        [imports] = parse(code);
+    if (!WRAP_TABLE.has(spec)) {
+      continue;
     }
-    catch {
-        // Not parseable as a module; leave it to Vite to error.
-        return null;
+    if (imp.type === 'dynamic') {
+      // Dynamic import: [start, end) includes the quotes (or backticks) —
+      // narrow them to plain quotes around the rewritten specifier.
+      ms.overwrite(imp.start, imp.end, `'${VIRTUAL_PREFIX}${spec}'`);
+    } else {
+      // Static import / export-from: [start, end) is the bare specifier text.
+      ms.overwrite(imp.start, imp.end, `${VIRTUAL_PREFIX}${spec}`);
     }
-    const ms = new MagicString(code);
-    let changed = false;
-    let hasLitFamilyImport = false;
-    for (const imp of imports) {
-        const spec = imp.n;
-        if (spec === undefined) {
-            continue;
-        }
-        if (isLitFamilySpecifier(spec)) {
-            hasLitFamilyImport = true;
-        }
-        if (!WRAP_TABLE.has(spec)) {
-            continue;
-        }
-        if (imp.d > -1) {
-            // Dynamic import: [s, e) includes the quotes (or backticks) — narrow
-            // them to plain quotes around the rewritten specifier.
-            ms.overwrite(imp.s, imp.e, `'${VIRTUAL_PREFIX}${spec}'`);
-        }
-        else {
-            // Static import / export-from: [s, e) is the bare specifier text.
-            ms.overwrite(imp.s, imp.e, `${VIRTUAL_PREFIX}${spec}`);
-        }
-        changed = true;
-    }
-    if (isComponentModule(code, hasLitFamilyImport)) {
-        ms.prepend(`import '${INSTALL_ID}';\n`);
-        ms.append(`\nimport.meta.hot?.accept();\n`);
-        changed = true;
-    }
-    if (!changed) {
-        return null;
-    }
-    return {
-        code: ms.toString(),
-        map: ms.generateMap({ hires: 'boundary' }),
-    };
+    changed = true;
+  }
+  if (isComponentModule(code, hasLitFamilyImport)) {
+    ms.prepend(`import '${INSTALL_ID}';\n`);
+    ms.append(`\nimport.meta.hot?.accept();\n`);
+    changed = true;
+  }
+  if (!changed) {
+    return null;
+  }
+  return {
+    code: ms.toString(),
+    map: ms.generateMap({hires: 'boundary'}),
+  };
 };
-//# sourceMappingURL=transform.js.map
+//# sourceMappingURL=transform.js.map

package/lib/transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/transform.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {init, parse} from 'es-module-lexer';\nimport MagicString from 'magic-string';\nimport {WRAP_TABLE} from './wrap-table.js';\n\n/**\n * Prefix for this plugin's virtual module ids. Rewritten specifiers carry\n * the `\\0` convention directly in the transformed source; Vite's\n * import-analysis resolves them through our `resolveId` and encodes the\n * `\\0` for the browser, so it never reaches the network.\n */\nexport const VIRTUAL_PREFIX = '\\0lit-plugin:';\n\n/** Virtual module that installs the define interceptor. */\nexport const INSTALL_ID = `${VIRTUAL_PREFIX}install`;\n\nconst LIT_FAMILY_PACKAGES = ['lit', 'lit-html', 'lit-element'];\nconst LIT_FAMILY_SCOPES = ['@lit/', '@lit-labs/'];\n\nconst isLitFamilySpecifier = (spec: string): boolean =>\n  LIT_FAMILY_PACKAGES.some((p) => spec === p || spec.startsWith(`${p}/`)) ||\n  LIT_FAMILY_SCOPES.some((s) => spec.startsWith(s));\n\n/**\n * A module needs the define interceptor + self-accept if it registers\n * custom elements: a textual `customElements.define(` call, or — only when\n * a lit-family import is present — a `customElement(` decorator call (the\n * decorator runtime call stays textually present after TS transpilation).\n */\nexport const isComponentModule = (\n  code: string,\n  hasLitFamilyImport: boolean\n): boolean =>\n  /(?<![.\\w$])(?:(?:window|globalThis|self)\\.)?customElements\\.define\\s*\\(/.test(\n    code\n  ) ||\n  (hasLitFamilyImport && /\\bcustomElement\\s*\\(/.test(code));\n\nexport interface LitPluginTransformResult {\n  code: string;\n  map: ReturnType<MagicString['generateMap']>;\n}\n\n/**\n * The whole dev transform, as a pure function of the module source:\n *\n * - Pass 1 (all user modules — shared template-partial modules must intern\n *   too): rewrite import/export-from/dynamic-import specifiers found in the\n *   wrap table to their `\\0lit-plugin:` wrapper module.\n * - Pass 2 (component modules): prepend the interceptor install import\n *   (static imports hoist, so the interceptor is installed before this\n *   module's defines) and append a self-accept (re-execution alone triggers\n *   the define interceptor — no hotUpdate hook needed).\n *\n * Returns `null` when the module needs no changes.\n */\nexport const transformLitModule = async (\n  code: string\n): Promise<LitPluginTransformResult | null> => {\n  // Cheap pre-filter before parsing.\n  if (!code.includes('lit') && !code.includes('customElements')) {\n    return null;\n  }\n  // Idempotency: never re-instrument our own output.\n  if (code.includes(VIRTUAL_PREFIX)) {\n    return null;\n  }\n  await init;\n  let imports;\n  try {\n    [imports] = parse(code);\n  } catch {\n    // Not parseable as a module; leave it to Vite to error.\n    return null;\n  }\n  const ms = new MagicString(code);\n  let changed = false;\n  let hasLitFamilyImport = false;\n  for (const imp of imports) {\n    const spec = imp.n;\n    if (spec === undefined) {\n      continue;\n    }\n    if (isLitFamilySpecifier(spec)) {\n      hasLitFamilyImport = true;\n    }\n    if (!WRAP_TABLE.has(spec)) {\n      continue;\n    }\n    if (imp.d > -1) {\n      // Dynamic import: [s, e) includes the quotes (or backticks) — narrow\n      // them to plain quotes around the rewritten specifier.\n      ms.overwrite(imp.s, imp.e, `'${VIRTUAL_PREFIX}${spec}'`);\n    } else {\n      // Static import / export-from: [s, e) is the bare specifier text.\n      ms.overwrite(imp.s, imp.e, `${VIRTUAL_PREFIX}${spec}`);\n    }\n    changed = true;\n  }\n  if (isComponentModule(code, hasLitFamilyImport)) {\n    ms.prepend(`import '${INSTALL_ID}';\\n`);\n    ms.append(`\\nimport.meta.hot?.accept();\\n`);\n    changed = true;\n  }\n  if (!changed) {\n    return null;\n  }\n  return {\n    code: ms.toString(),\n    map: ms.generateMap({hires: 'boundary'}),\n  };\n};\n"]}
+{"version":3,"file":"transform.js","sourceRoot":"","sources":["../src/lib/transform.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {init, parse} from 'es-module-lexer';\nimport MagicString from 'magic-string';\nimport {WRAP_TABLE} from './wrap-table.js';\n\n/**\n * Prefix for this plugin's virtual module ids. Rewritten specifiers carry\n * the `\\0` convention directly in the transformed source; Vite's\n * import-analysis resolves them through our `resolveId` and encodes the\n * `\\0` for the browser, so it never reaches the network.\n */\nexport const VIRTUAL_PREFIX = '\\0lit-plugin:';\n\n/** Virtual module that installs the define interceptor. */\nexport const INSTALL_ID = `${VIRTUAL_PREFIX}install`;\n\nconst LIT_FAMILY_PACKAGES = ['lit', 'lit-html', 'lit-element'];\nconst LIT_FAMILY_SCOPES = ['@lit/', '@lit-labs/'];\n\nconst isLitFamilySpecifier = (spec: string): boolean =>\n  LIT_FAMILY_PACKAGES.some((p) => spec === p || spec.startsWith(`${p}/`)) ||\n  LIT_FAMILY_SCOPES.some((s) => spec.startsWith(s));\n\n/**\n * A module needs the define interceptor + self-accept if it registers\n * custom elements: a textual `customElements.define(` call, or — only when\n * a lit-family import is present — a `customElement(` decorator call (the\n * decorator runtime call stays textually present after TS transpilation).\n */\nexport const isComponentModule = (\n  code: string,\n  hasLitFamilyImport: boolean\n): boolean =>\n  /(?<![.\\w$])(?:(?:window|globalThis|self)\\.)?customElements\\.define\\s*\\(/.test(\n    code\n  ) ||\n  (hasLitFamilyImport && /\\bcustomElement\\s*\\(/.test(code));\n\nexport interface LitPluginTransformResult {\n  code: string;\n  map: ReturnType<MagicString['generateMap']>;\n}\n\n/**\n * The whole dev transform, as a pure function of the module source:\n *\n * - Pass 1 (all user modules — shared template-partial modules must intern\n *   too): rewrite import/export-from/dynamic-import specifiers found in the\n *   wrap table to their `\\0lit-plugin:` wrapper module.\n * - Pass 2 (component modules): prepend the interceptor install import\n *   (static imports hoist, so the interceptor is installed before this\n *   module's defines) and append a self-accept (re-execution alone triggers\n *   the define interceptor — no hotUpdate hook needed).\n *\n * Returns `null` when the module needs no changes.\n */\nexport const transformLitModule = async (\n  code: string\n): Promise<LitPluginTransformResult | null> => {\n  // Cheap pre-filter before parsing.\n  if (!code.includes('lit') && !code.includes('customElements')) {\n    return null;\n  }\n  // Idempotency: never re-instrument our own output.\n  if (code.includes(VIRTUAL_PREFIX)) {\n    return null;\n  }\n  await init();\n  let imports;\n  try {\n    [imports] = parse(code);\n  } catch {\n    // Not parseable as a module; leave it to Vite to error.\n    return null;\n  }\n  const ms = new MagicString(code);\n  let changed = false;\n  let hasLitFamilyImport = false;\n  for (const imp of imports) {\n    // `import.meta` reports a null specifier; a dynamic import reports\n    // undefined when its argument is not statically analyzable, and a glob\n    // (template literal) specifier is a pattern rather than a real id.\n    const spec = imp.specifier;\n    if (spec == null || (imp.type === 'dynamic' && imp.glob)) {\n      continue;\n    }\n    if (isLitFamilySpecifier(spec)) {\n      hasLitFamilyImport = true;\n    }\n    if (!WRAP_TABLE.has(spec)) {\n      continue;\n    }\n    if (imp.type === 'dynamic') {\n      // Dynamic import: [start, end) includes the quotes (or backticks) —\n      // narrow them to plain quotes around the rewritten specifier.\n      ms.overwrite(imp.start, imp.end, `'${VIRTUAL_PREFIX}${spec}'`);\n    } else {\n      // Static import / export-from: [start, end) is the bare specifier text.\n      ms.overwrite(imp.start, imp.end, `${VIRTUAL_PREFIX}${spec}`);\n    }\n    changed = true;\n  }\n  if (isComponentModule(code, hasLitFamilyImport)) {\n    ms.prepend(`import '${INSTALL_ID}';\\n`);\n    ms.append(`\\nimport.meta.hot?.accept();\\n`);\n    changed = true;\n  }\n  if (!changed) {\n    return null;\n  }\n  return {\n    code: ms.toString(),\n    map: ms.generateMap({hires: 'boundary'}),\n  };\n};\n"]}

package/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,2EAA2E;IAC3E,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAE/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,OAAO,CAAC;IAEnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,2EAA2E;IAC3E,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAE/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,OAAO,CAAC;IAEnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC"}

package/lib/types.js

@@ -4,4 +4,4 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 export {};
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nexport interface ElementInfo {\n  tagName: string;\n  componentName?: string;\n  source: {\n    filePath: string;\n    lineNumber: number;\n  };\n}\n\nexport interface EditorConfig {\n  name: string;\n  url: (path: string, line: number) => string;\n}\n\nexport interface SourceOverlayOptions {\n  /**\n   * Hotkey letter with Ctrl+Shift (default `s` -> Ctrl+Shift+S).\n   */\n  key?: string;\n\n  /** Built-in editor key or custom `{ name, url }`. Defaults to `vscode`. */\n  editor?: EditorConfig | string;\n\n  /** Optional workspace root prefix for absolute file paths. */\n  workspaceRoot?: string;\n\n  /** Mouse move throttle in ms (default 50). */\n  throttleMs?: number;\n\n  /** Filter elements to skip during inspection. */\n  exclude?: (el: Element) => boolean;\n\n  /** Callback fired when the user clicks a component. */\n  onSelect?: (info: ElementInfo) => void;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nexport interface ElementInfo {\n  tagName: string;\n  componentName?: string;\n  source: {\n    filePath: string;\n    lineNumber: number;\n  };\n}\n\nexport interface EditorConfig {\n  name: string;\n  url: (path: string, line: number) => string;\n}\n\nexport interface SourceOverlayOptions {\n  /**\n   * Hotkey letter with Ctrl+Shift (default `s` -> Ctrl+Shift+S).\n   */\n  key?: string;\n\n  /** Built-in editor key or custom `{ name, url }`. Defaults to `vscode`. */\n  editor?: EditorConfig | string;\n\n  /** Optional workspace root prefix for absolute file paths. */\n  workspaceRoot?: string;\n\n  /** Mouse move throttle in ms (default 50). */\n  throttleMs?: number;\n\n  /** Filter elements to skip during inspection. */\n  exclude?: (el: Element) => boolean;\n\n  /** Callback fired when the user clicks a component. */\n  onSelect?: (info: ElementInfo) => void;\n}\n"]}