@oddsquad/vite-plugin-lit 0.0.3 → 0.0.5

package/lib/runtime/indicator.js

@@ -0,0 +1,141 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Custom element for the HMR update indicator.
+ * Injected by the Vite plugin as an external module so that
+ * `import.meta.hot` is available.
+ */
+import { FONT_MONO_VAR } from './fonts.js';
+import { FLAME_ICON } from '../icons.js';
+import { subscribeOverride } from './overrides.js';
+import { observeEdgeInsets } from './edge-panel.js';
+import { injectTokens } from '../tokens.js';
+/**
+ * True when an HMR batch is purely a stylesheet swap — every update is either
+ * a `css-update` or a `js-update` whose accepted module is a `.css` source
+ * (the shared-sheet queries `?css-sheet`/`?raw`/`?url` all accept a `.css`
+ * path). Such a batch restyles adopted sheets in place with no re-render.
+ *
+ * Heuristic: keyed on the accepted path ending in `.css`. Robust for this
+ * plugin's own queries; a user hand-wiring `import.meta.hot.accept` on a raw
+ * `.css` would also read as a style swap, which is the intended grouping. An
+ * empty/missing payload can't be classified, so it counts as a re-render
+ * rather than being silently dropped.
+ */
+function isStyleSwap(data) {
+    const updates = data?.updates;
+    if (!Array.isArray(updates) || updates.length === 0)
+        return false;
+    return updates.every((u) => {
+        if (u.type === 'css-update')
+            return true;
+        if (u.type === 'js-update') {
+            return (u.acceptedPath ?? u.path ?? '').split('?')[0].endsWith('.css');
+        }
+        return false;
+    });
+}
+class LitDevtoolsIndicator extends HTMLElement {
+    #initialized = false;
+    #count = 0;
+    #container;
+    #countEl = null;
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'closed' });
+        // `--idle-op` is the at-rest opacity: 0 (invisible until a pulse) without a
+        // count, .5 (count stays legible) with one. The count display and idle
+        // opacity are both driven by the `.with-count` class so the panel can
+        // toggle the count on/off live (see #setCount).
+        root.innerHTML = `
+      <style>
+        @keyframes pulse{0%{opacity:var(--idle-op,0)}15%{opacity:1}80%{opacity:1}100%{opacity:var(--idle-op,0)}}
+        :host{
+          position:fixed;inset:0;display:grid;
+          z-index:2147483647;pointer-events:none;
+          /* Base padding plus the inset the Vite DevTools edge panel occupies
+             on each edge (set from JS), so the indicator never sits on it. */
+          padding:
+            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-top,0px))
+            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-right,0px))
+            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-bottom,0px))
+            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-left,0px))
+        }
+        #container{
+          place-self:var(--lit-devtools-hmr-indicator-align,end end);
+          display:flex;align-items:stretch;
+          background:var(--lit-devtools-surface-elevated);color:var(--lit-devtools-text-strong);
+          backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
+          border-radius:var(--lit-devtools-radius-md);
+          font:12px/1 ${FONT_MONO_VAR};font-variant-numeric:tabular-nums;
+          overflow:hidden;opacity:var(--idle-op,0)
+        }
+        #container.with-count{--idle-op:.5}
+        #container.active{animation:pulse 2.5s ease-out forwards}
+        #icon{display:flex;align-items:center;justify-content:center;padding:0 10px}
+        #icon svg{width:16px;height:16px;display:block;fill:currentColor}
+        #indicator{
+          display:flex;align-items:center;gap:6px;
+          padding:7px 12px;
+          border-left:1px solid var(--lit-devtools-border-subtle)
+        }
+        .dot{width:8px;height:8px;border-radius:50%;background:var(--lit-devtools-success);flex-shrink:0}
+        /* Style-only swaps (shared adopted stylesheet hot-swap, no re-render)
+           pulse in the calmer info color and don't bump the count. */
+        #container.style-swap .dot{background:var(--lit-devtools-info)}
+        .count{display:none}
+        #container.with-count .count{display:inline}
+      </style>
+      <div id="container"><span id="icon">${FLAME_ICON}</span><span id="indicator"><span class="dot"></span><span class="count">0</span></span></div>
+    `;
+        this.#container = root.getElementById('container');
+        this.#countEl = root.querySelector('.count');
+        this.#setCount(this.hasAttribute('count'));
+    }
+    /** Show/hide the cumulative update count (and the at-rest opacity). */
+    #setCount(enabled) {
+        this.#container.classList.toggle('with-count', enabled);
+    }
+    connectedCallback() {
+        if (this.#initialized)
+            return;
+        this.#initialized = true;
+        injectTokens();
+        const hot = import.meta.hot;
+        hot?.on('vite:afterUpdate', (data) => {
+            // Count only updates that actually re-render/re-execute a component;
+            // a pure shared-stylesheet swap (?css-sheet / ?raw / ?url adopted sheet)
+            // restyles in place without re-rendering, so it pulses but doesn't count.
+            const styleSwap = isStyleSwap(data);
+            if (!styleSwap && this.#countEl !== null) {
+                this.#countEl.textContent = String(++this.#count);
+            }
+            this.#container.classList.toggle('style-swap', styleSwap);
+            this.#container.classList.remove('active');
+            void this.#container.offsetWidth;
+            this.#container.classList.add('active');
+        });
+        // Let the DevTools panel hide/show the indicator and its count live (and
+        // across reloads).
+        subscribeOverride(hot, (o) => {
+            if (o.hmrIndicatorVisible !== undefined) {
+                this.style.display = o.hmrIndicatorVisible ? '' : 'none';
+            }
+            if (o.hmrIndicatorCount !== undefined) {
+                this.#setCount(o.hmrIndicatorCount);
+            }
+        });
+        // Stay clear of the Vite DevTools edge panel.
+        observeEdgeInsets((insets) => {
+            this.style.setProperty('--edge-top', `${insets.top}px`);
+            this.style.setProperty('--edge-right', `${insets.right}px`);
+            this.style.setProperty('--edge-bottom', `${insets.bottom}px`);
+            this.style.setProperty('--edge-left', `${insets.left}px`);
+        });
+    }
+}
+customElements.define('lit-devtools-hmr-indicator', LitDevtoolsIndicator);
+//# sourceMappingURL=indicator.js.map

package/lib/runtime/indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.js","sourceRoot":"","sources":["../../../../packages/labs/vite-plugin-lit/src/lib/runtime/indicator.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 * Custom element for the HMR update indicator.\n * Injected by the Vite plugin as an external module so that\n * `import.meta.hot` is available.\n */\n\nimport {FONT_MONO_VAR} from './fonts.js';\nimport {FLAME_ICON} from '../icons.js';\nimport {subscribeOverride} from './overrides.js';\nimport {observeEdgeInsets} from './edge-panel.js';\nimport {injectTokens} from '../tokens.js';\n\n/** One entry of a Vite `vite:afterUpdate` payload. */\ninterface ViteUpdate {\n  type?: string;\n  path?: string;\n  acceptedPath?: string;\n}\n\n/**\n * True when an HMR batch is purely a stylesheet swap — every update is either\n * a `css-update` or a `js-update` whose accepted module is a `.css` source\n * (the shared-sheet queries `?css-sheet`/`?raw`/`?url` all accept a `.css`\n * path). Such a batch restyles adopted sheets in place with no re-render.\n *\n * Heuristic: keyed on the accepted path ending in `.css`. Robust for this\n * plugin's own queries; a user hand-wiring `import.meta.hot.accept` on a raw\n * `.css` would also read as a style swap, which is the intended grouping. An\n * empty/missing payload can't be classified, so it counts as a re-render\n * rather than being silently dropped.\n */\nfunction isStyleSwap(data: unknown): boolean {\n  const updates = (data as {updates?: ViteUpdate[]} | undefined)?.updates;\n  if (!Array.isArray(updates) || updates.length === 0) return false;\n  return updates.every((u) => {\n    if (u.type === 'css-update') return true;\n    if (u.type === 'js-update') {\n      return (u.acceptedPath ?? u.path ?? '').split('?')[0].endsWith('.css');\n    }\n    return false;\n  });\n}\n\nclass LitDevtoolsIndicator extends HTMLElement {\n  #initialized = false;\n  #count = 0;\n  #container: HTMLElement;\n  #countEl: HTMLElement | null = null;\n\n  constructor() {\n    super();\n    const root = this.attachShadow({mode: 'closed'});\n    // `--idle-op` is the at-rest opacity: 0 (invisible until a pulse) without a\n    // count, .5 (count stays legible) with one. The count display and idle\n    // opacity are both driven by the `.with-count` class so the panel can\n    // toggle the count on/off live (see #setCount).\n    root.innerHTML = `\n      <style>\n        @keyframes pulse{0%{opacity:var(--idle-op,0)}15%{opacity:1}80%{opacity:1}100%{opacity:var(--idle-op,0)}}\n        :host{\n          position:fixed;inset:0;display:grid;\n          z-index:2147483647;pointer-events:none;\n          /* Base padding plus the inset the Vite DevTools edge panel occupies\n             on each edge (set from JS), so the indicator never sits on it. */\n          padding:\n            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-top,0px))\n            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-right,0px))\n            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-bottom,0px))\n            calc(var(--lit-devtools-hmr-indicator-padding,16px) + var(--edge-left,0px))\n        }\n        #container{\n          place-self:var(--lit-devtools-hmr-indicator-align,end end);\n          display:flex;align-items:stretch;\n          background:var(--lit-devtools-surface-elevated);color:var(--lit-devtools-text-strong);\n          backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n          border-radius:var(--lit-devtools-radius-md);\n          font:12px/1 ${FONT_MONO_VAR};font-variant-numeric:tabular-nums;\n          overflow:hidden;opacity:var(--idle-op,0)\n        }\n        #container.with-count{--idle-op:.5}\n        #container.active{animation:pulse 2.5s ease-out forwards}\n        #icon{display:flex;align-items:center;justify-content:center;padding:0 10px}\n        #icon svg{width:16px;height:16px;display:block;fill:currentColor}\n        #indicator{\n          display:flex;align-items:center;gap:6px;\n          padding:7px 12px;\n          border-left:1px solid var(--lit-devtools-border-subtle)\n        }\n        .dot{width:8px;height:8px;border-radius:50%;background:var(--lit-devtools-success);flex-shrink:0}\n        /* Style-only swaps (shared adopted stylesheet hot-swap, no re-render)\n           pulse in the calmer info color and don't bump the count. */\n        #container.style-swap .dot{background:var(--lit-devtools-info)}\n        .count{display:none}\n        #container.with-count .count{display:inline}\n      </style>\n      <div id=\"container\"><span id=\"icon\">${FLAME_ICON}</span><span id=\"indicator\"><span class=\"dot\"></span><span class=\"count\">0</span></span></div>\n    `;\n    this.#container = root.getElementById('container')!;\n    this.#countEl = root.querySelector('.count');\n    this.#setCount(this.hasAttribute('count'));\n  }\n\n  /** Show/hide the cumulative update count (and the at-rest opacity). */\n  #setCount(enabled: boolean) {\n    this.#container.classList.toggle('with-count', enabled);\n  }\n\n  connectedCallback() {\n    if (this.#initialized) return;\n    this.#initialized = true;\n    injectTokens();\n    const hot = (\n      import.meta as {\n        hot?: {on: (event: string, cb: (data?: unknown) => void) => void};\n      }\n    ).hot;\n    hot?.on('vite:afterUpdate', (data) => {\n      // Count only updates that actually re-render/re-execute a component;\n      // a pure shared-stylesheet swap (?css-sheet / ?raw / ?url adopted sheet)\n      // restyles in place without re-rendering, so it pulses but doesn't count.\n      const styleSwap = isStyleSwap(data);\n      if (!styleSwap && this.#countEl !== null) {\n        this.#countEl.textContent = String(++this.#count);\n      }\n      this.#container.classList.toggle('style-swap', styleSwap);\n      this.#container.classList.remove('active');\n      void this.#container.offsetWidth;\n      this.#container.classList.add('active');\n    });\n    // Let the DevTools panel hide/show the indicator and its count live (and\n    // across reloads).\n    subscribeOverride(hot, (o) => {\n      if (o.hmrIndicatorVisible !== undefined) {\n        this.style.display = o.hmrIndicatorVisible ? '' : 'none';\n      }\n      if (o.hmrIndicatorCount !== undefined) {\n        this.#setCount(o.hmrIndicatorCount);\n      }\n    });\n    // Stay clear of the Vite DevTools edge panel.\n    observeEdgeInsets((insets) => {\n      this.style.setProperty('--edge-top', `${insets.top}px`);\n      this.style.setProperty('--edge-right', `${insets.right}px`);\n      this.style.setProperty('--edge-bottom', `${insets.bottom}px`);\n      this.style.setProperty('--edge-left', `${insets.left}px`);\n    });\n  }\n}\n\ncustomElements.define('lit-devtools-hmr-indicator', LitDevtoolsIndicator);\n"]}

package/lib/runtime/inspector/collect.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import type { InspectorDetails, InspectorTreeNode } from '../../../types/inspector.js';
+/**
+ * An element worth showing in the tree: an upgraded custom element that
+ * duck-types as a ReactiveElement. Catches Lit components regardless of whether
+ * the source-meta transform touched them, while skipping devtools' own UI.
+ */
+export declare const isInspectable: (el: Element) => boolean;
+/** Build the full component render tree rooted at the document body. */
+export declare const buildTree: () => InspectorTreeNode[];
+/** Snapshot one element's reactive properties, attributes, and flags. */
+export declare const collectDetails: (el: Element) => InspectorDetails;
+//# sourceMappingURL=collect.d.ts.map

package/lib/runtime/inspector/collect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/inspector/collect.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,OAAO,KAAK,EAEV,gBAAgB,EAEhB,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AAsCrC;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,IAAI,OAAO,KAAG,OAO3C,CAAC;AA2CF,wEAAwE;AACxE,eAAO,MAAM,SAAS,QAAO,iBAAiB,EAI7C,CAAC;AAWF,yEAAyE;AACzE,eAAO,MAAM,cAAc,GAAI,IAAI,OAAO,KAAG,gBA6C5C,CAAC"}

package/lib/runtime/inspector/collect.js

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Walks the page to build the component render tree and to snapshot a single
+ * element's reactive state for the inspector panel. Runs entirely in the page;
+ * the results are sent over the transport as plain JSON.
+ */
+import { idOf } from '../timeline/identity.js';
+import { serialize, typeTag } from './serialize.js';
+const SOURCE_META_KEY = Symbol.for('@lit-labs/vite-plugin-lit#source');
+const metaOf = (el) => el.constructor[SOURCE_META_KEY];
+const sourceOf = (el) => {
+    const meta = metaOf(el);
+    return meta === undefined
+        ? undefined
+        : { file: meta.filePath, line: meta.lineNumber };
+};
+/**
+ * An element worth showing in the tree: an upgraded custom element that
+ * duck-types as a ReactiveElement. Catches Lit components regardless of whether
+ * the source-meta transform touched them, while skipping devtools' own UI.
+ */
+export const isInspectable = (el) => {
+    const tag = el.tagName.toLowerCase();
+    if (!tag.includes('-'))
+        return false;
+    if (tag === 'lit-source-overlay' || tag.startsWith('lit-devtools-')) {
+        return false;
+    }
+    return typeof el.requestUpdate === 'function';
+};
+const nodeFor = (el, children) => {
+    const meta = metaOf(el);
+    return {
+        id: idOf(el),
+        tagName: el.tagName.toLowerCase(),
+        componentName: meta?.componentName,
+        source: meta === undefined
+            ? undefined
+            : { file: meta.filePath, line: meta.lineNumber },
+        children,
+    };
+};
+/**
+ * Visits `el`: if it's inspectable it becomes a node whose children are the
+ * inspectables nested in its shadow + light DOM; otherwise we descend, pushing
+ * any inspectables we find into the current `sink` (so non-component wrappers
+ * are flattened away).
+ */
+const visit = (el, sink) => {
+    if (isInspectable(el)) {
+        const children = [];
+        descend(el, children);
+        sink.push(nodeFor(el, children));
+    }
+    else {
+        descend(el, sink);
+    }
+};
+const descend = (el, sink) => {
+    const shadow = el.shadowRoot;
+    if (shadow !== null) {
+        for (const child of shadow.children)
+            visit(child, sink);
+    }
+    for (const child of el.children)
+        visit(child, sink);
+};
+/** Build the full component render tree rooted at the document body. */
+export const buildTree = () => {
+    const roots = [];
+    for (const child of document.body.children)
+        visit(child, roots);
+    return roots;
+};
+const attributeName = (key, decl) => {
+    if (decl.attribute === false)
+        return false;
+    if (typeof decl.attribute === 'string')
+        return decl.attribute;
+    return String(key).toLowerCase();
+};
+/** Snapshot one element's reactive properties, attributes, and flags. */
+export const collectDetails = (el) => {
+    const re = el;
+    const declarations = re.constructor.elementProperties;
+    const properties = [];
+    if (declarations !== undefined) {
+        for (const [key, decl] of declarations) {
+            // Reading a reactive property runs its accessor, which may throw; one bad
+            // getter must not take out the whole details snapshot.
+            let value;
+            let threw = false;
+            try {
+                value = el[key];
+            }
+            catch {
+                threw = true;
+            }
+            properties.push({
+                name: typeof key === 'symbol' ? key.toString() : String(key),
+                value: threw ? '[getter threw]' : serialize(value),
+                type: threw ? 'error' : typeTag(value),
+                attribute: attributeName(key, decl),
+                reflects: decl.reflect === true,
+                state: decl.state === true,
+            });
+        }
+    }
+    const attributes = Array.from(el.attributes, (a) => ({
+        name: a.name,
+        value: a.value,
+    }));
+    const meta = metaOf(el);
+    return {
+        id: idOf(el),
+        tagName: el.tagName.toLowerCase(),
+        componentName: meta?.componentName,
+        source: sourceOf(el),
+        attributes,
+        properties,
+        flags: {
+            hasUpdated: re.hasUpdated === true,
+            isUpdatePending: re.isUpdatePending === true,
+            hasShadowRoot: el.shadowRoot !== null,
+        },
+    };
+};
+//# sourceMappingURL=collect.js.map

package/lib/runtime/inspector/collect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/inspector/collect.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 * Walks the page to build the component render tree and to snapshot a single\n * element's reactive state for the inspector panel. Runs entirely in the page;\n * the results are sent over the transport as plain JSON.\n */\n\nimport {idOf} from '../timeline/identity.js';\nimport {serialize, typeTag} from './serialize.js';\nimport type {\n  ElementSource,\n  InspectorDetails,\n  InspectorProp,\n  InspectorTreeNode,\n} from '../../../types/inspector.js';\n\nconst SOURCE_META_KEY = Symbol.for('@lit-labs/vite-plugin-lit#source');\n\ninterface LitSourceMeta {\n  filePath: string;\n  lineNumber: number;\n  componentName: string;\n}\n\n/** Subset of ReactiveElement's `PropertyDeclaration` we read. */\ninterface PropertyDeclaration {\n  attribute?: boolean | string;\n  reflect?: boolean;\n  state?: boolean;\n}\n\n/** Subset of a ReactiveElement instance/constructor we duck-type against. */\ninterface ReactiveElementLike extends Element {\n  requestUpdate?: unknown;\n  hasUpdated?: boolean;\n  isUpdatePending?: boolean;\n  constructor: {\n    elementProperties?: Map<PropertyKey, PropertyDeclaration>;\n    [SOURCE_META_KEY]?: LitSourceMeta;\n  };\n}\n\nconst metaOf = (el: Element): LitSourceMeta | undefined =>\n  (el as ReactiveElementLike).constructor[SOURCE_META_KEY];\n\nconst sourceOf = (el: Element): ElementSource | undefined => {\n  const meta = metaOf(el);\n  return meta === undefined\n    ? undefined\n    : {file: meta.filePath, line: meta.lineNumber};\n};\n\n/**\n * An element worth showing in the tree: an upgraded custom element that\n * duck-types as a ReactiveElement. Catches Lit components regardless of whether\n * the source-meta transform touched them, while skipping devtools' own UI.\n */\nexport const isInspectable = (el: Element): boolean => {\n  const tag = el.tagName.toLowerCase();\n  if (!tag.includes('-')) return false;\n  if (tag === 'lit-source-overlay' || tag.startsWith('lit-devtools-')) {\n    return false;\n  }\n  return typeof (el as ReactiveElementLike).requestUpdate === 'function';\n};\n\nconst nodeFor = (\n  el: Element,\n  children: InspectorTreeNode[]\n): InspectorTreeNode => {\n  const meta = metaOf(el);\n  return {\n    id: idOf(el),\n    tagName: el.tagName.toLowerCase(),\n    componentName: meta?.componentName,\n    source:\n      meta === undefined\n        ? undefined\n        : {file: meta.filePath, line: meta.lineNumber},\n    children,\n  };\n};\n\n/**\n * Visits `el`: if it's inspectable it becomes a node whose children are the\n * inspectables nested in its shadow + light DOM; otherwise we descend, pushing\n * any inspectables we find into the current `sink` (so non-component wrappers\n * are flattened away).\n */\nconst visit = (el: Element, sink: InspectorTreeNode[]): void => {\n  if (isInspectable(el)) {\n    const children: InspectorTreeNode[] = [];\n    descend(el, children);\n    sink.push(nodeFor(el, children));\n  } else {\n    descend(el, sink);\n  }\n};\n\nconst descend = (el: Element, sink: InspectorTreeNode[]): void => {\n  const shadow = el.shadowRoot;\n  if (shadow !== null) {\n    for (const child of shadow.children) visit(child, sink);\n  }\n  for (const child of el.children) visit(child, sink);\n};\n\n/** Build the full component render tree rooted at the document body. */\nexport const buildTree = (): InspectorTreeNode[] => {\n  const roots: InspectorTreeNode[] = [];\n  for (const child of document.body.children) visit(child, roots);\n  return roots;\n};\n\nconst attributeName = (\n  key: PropertyKey,\n  decl: PropertyDeclaration\n): string | false => {\n  if (decl.attribute === false) return false;\n  if (typeof decl.attribute === 'string') return decl.attribute;\n  return String(key).toLowerCase();\n};\n\n/** Snapshot one element's reactive properties, attributes, and flags. */\nexport const collectDetails = (el: Element): InspectorDetails => {\n  const re = el as ReactiveElementLike;\n  const declarations = re.constructor.elementProperties;\n  const properties: InspectorProp[] = [];\n  if (declarations !== undefined) {\n    for (const [key, decl] of declarations) {\n      // Reading a reactive property runs its accessor, which may throw; one bad\n      // getter must not take out the whole details snapshot.\n      let value: unknown;\n      let threw = false;\n      try {\n        value = (el as unknown as Record<PropertyKey, unknown>)[key];\n      } catch {\n        threw = true;\n      }\n      properties.push({\n        name: typeof key === 'symbol' ? key.toString() : String(key),\n        value: threw ? '[getter threw]' : serialize(value),\n        type: threw ? 'error' : typeTag(value),\n        attribute: attributeName(key, decl),\n        reflects: decl.reflect === true,\n        state: decl.state === true,\n      });\n    }\n  }\n\n  const attributes = Array.from(el.attributes, (a) => ({\n    name: a.name,\n    value: a.value,\n  }));\n\n  const meta = metaOf(el);\n  return {\n    id: idOf(el),\n    tagName: el.tagName.toLowerCase(),\n    componentName: meta?.componentName,\n    source: sourceOf(el),\n    attributes,\n    properties,\n    flags: {\n      hasUpdated: re.hasUpdated === true,\n      isUpdatePending: re.isUpdatePending === true,\n      hasShadowRoot: el.shadowRoot !== null,\n    },\n  };\n};\n"]}

package/lib/runtime/inspector/install.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+export {};
+//# sourceMappingURL=install.d.ts.map

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

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

package/lib/runtime/inspector/install.js

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Components inspector runtime.
+ *
+ * Injected into the host page (alongside the timeline runtime) when the
+ * DevTools panel is enabled. Answers the panel's tree/details requests over the
+ * Vite HMR channel, keeps a watched element's details fresh as it updates, and
+ * outlines elements the panel hovers in its tree.
+ */
+import { elementById } from '../timeline/identity.js';
+import { buildTree, collectDetails } from './collect.js';
+import { INSPECT_CMD_CHANNEL, INSPECT_DATA_CHANNEL, } from '../../../types/inspector.js';
+const hot = import.meta.hot;
+if (hot !== undefined && typeof window !== 'undefined') {
+    const send = (msg) => {
+        try {
+            hot.send(INSPECT_DATA_CHANNEL, msg);
+        }
+        catch {
+            // HMR channel temporarily unavailable; the panel can re-request.
+        }
+    };
+    // Hold the watched element via a WeakRef so an active watch doesn't keep a
+    // removed element alive: the override and `restore` only reach `el` through
+    // the ref, leaving the DOM as its sole strong root.
+    let watched = null;
+    const unwatch = () => {
+        watched?.restore();
+        watched = null;
+    };
+    const watch = (id) => {
+        unwatch();
+        const el = elementById(id);
+        if (el === undefined) {
+            send({ type: 'gone', id });
+            return;
+        }
+        const hadOwn = Object.prototype.hasOwnProperty.call(el, 'updated');
+        const prev = el.updated;
+        const ref = new WeakRef(el);
+        el.updated = function (changed) {
+            prev?.call(this, changed);
+            const cur = ref.deref();
+            if (cur !== undefined) {
+                send({ type: 'details', details: collectDetails(cur) });
+            }
+        };
+        watched = {
+            ref,
+            restore: () => {
+                const cur = ref.deref();
+                if (cur === undefined)
+                    return;
+                if (hadOwn)
+                    cur.updated = prev;
+                else
+                    delete cur.updated;
+            },
+        };
+        // Push an immediate snapshot so the panel doesn't wait for the next update.
+        send({ type: 'details', details: collectDetails(el) });
+    };
+    // -------------------------------------------------------------------------
+    // Highlight box: a lightweight fixed-position outline drawn over an element
+    // the panel hovers in its tree. Independent of the source overlay so it works
+    // whether or not that feature is enabled.
+    // -------------------------------------------------------------------------
+    let highlightBox = null;
+    const showHighlight = (el) => {
+        if (highlightBox === null) {
+            highlightBox = document.createElement('div');
+            highlightBox.setAttribute('data-lit-devtools-highlight', '');
+            Object.assign(highlightBox.style, {
+                position: 'fixed',
+                zIndex: '2147483646',
+                pointerEvents: 'none',
+                background: 'rgba(77, 99, 255, 0.25)',
+                outline: '1px solid #4d63ff',
+                borderRadius: '2px',
+                transition: 'all 80ms ease-out',
+            });
+            document.body.append(highlightBox);
+        }
+        const r = el.getBoundingClientRect();
+        Object.assign(highlightBox.style, {
+            display: 'block',
+            left: `${r.left}px`,
+            top: `${r.top}px`,
+            width: `${r.width}px`,
+            height: `${r.height}px`,
+        });
+    };
+    const clearHighlight = () => {
+        if (highlightBox !== null)
+            highlightBox.style.display = 'none';
+    };
+    // -------------------------------------------------------------------------
+    // Opt-in live tree: watch the DOM (light + every shadow root) and push a
+    // fresh tree when the component hierarchy actually changes. Off by default.
+    // childList-only (no attributes), so cosmetic changes — including our own
+    // highlight box toggling — don't churn; identical rebuilds are also deduped.
+    // -------------------------------------------------------------------------
+    let observer = null;
+    let observeTimer;
+    let lastTreeJson = '';
+    /** Re-attach the observer to the body and every shadow root in the page. */
+    const syncObserverTargets = (obs) => {
+        obs.disconnect();
+        obs.observe(document.body, { childList: true, subtree: true });
+        const walk = (root) => {
+            for (const el of root.querySelectorAll('*')) {
+                if (el.shadowRoot !== null) {
+                    obs.observe(el.shadowRoot, { childList: true, subtree: true });
+                    walk(el.shadowRoot);
+                }
+            }
+        };
+        walk(document);
+    };
+    const pushTreeIfChanged = () => {
+        const roots = buildTree();
+        const json = JSON.stringify(roots);
+        if (json === lastTreeJson)
+            return;
+        lastTreeJson = json;
+        send({ type: 'tree', roots });
+    };
+    const onMutation = () => {
+        if (observeTimer !== undefined)
+            clearTimeout(observeTimer);
+        observeTimer = setTimeout(() => {
+            observeTimer = undefined;
+            if (observer !== null)
+                syncObserverTargets(observer);
+            pushTreeIfChanged();
+        }, 100);
+    };
+    const setObserving = (enabled) => {
+        if (enabled) {
+            if (observer === null)
+                observer = new MutationObserver(onMutation);
+            lastTreeJson = '';
+            syncObserverTargets(observer);
+            pushTreeIfChanged();
+        }
+        else if (observer !== null) {
+            observer.disconnect();
+            observer = null;
+            if (observeTimer !== undefined) {
+                clearTimeout(observeTimer);
+                observeTimer = undefined;
+            }
+        }
+    };
+    // -------------------------------------------------------------------------
+    // Command dispatch
+    // -------------------------------------------------------------------------
+    hot.on(INSPECT_CMD_CHANNEL, (data) => {
+        const cmd = data;
+        switch (cmd.type) {
+            case 'tree':
+                send({ type: 'tree', roots: buildTree() });
+                break;
+            case 'details': {
+                const el = elementById(cmd.id);
+                if (el !== undefined) {
+                    send({ type: 'details', details: collectDetails(el) });
+                }
+                else {
+                    send({ type: 'gone', id: cmd.id });
+                }
+                break;
+            }
+            case 'watch':
+                if (cmd.id === null)
+                    unwatch();
+                else
+                    watch(cmd.id);
+                break;
+            case 'highlight': {
+                if (cmd.id === null) {
+                    clearHighlight();
+                    break;
+                }
+                const el = elementById(cmd.id);
+                if (el !== undefined)
+                    showHighlight(el);
+                else
+                    clearHighlight();
+                break;
+            }
+            case 'observe':
+                setObserving(cmd.enabled);
+                break;
+        }
+    });
+    // Announce readiness so a panel that loaded first re-requests the tree.
+    send({ type: 'ready' });
+}
+//# sourceMappingURL=install.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"install.js","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/inspector/install.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AACvD,OAAO,EACL,mBAAmB,EACnB,oBAAoB,GAGrB,MAAM,6BAA6B,CAAC;AAOrC,MAAM,GAAG,GAAI,MAAM,CAAC,IAAwB,CAAC,GAAG,CAAC;AAEjD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACvD,MAAM,IAAI,GAAG,CAAC,GAAqB,EAAQ,EAAE;QAC3C,IAAI,CAAC;YACH,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAC;QACtC,CAAC;QAAC,MAAM,CAAC;YACP,iEAAiE;QACnE,CAAC;IACH,CAAC,CAAC;IAYF,2EAA2E;IAC3E,4EAA4E;IAC5E,oDAAoD;IACpD,IAAI,OAAO,GAA0D,IAAI,CAAC;IAE1E,MAAM,OAAO,GAAG,GAAS,EAAE;QACzB,OAAO,EAAE,OAAO,EAAE,CAAC;QACnB,OAAO,GAAG,IAAI,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CAAC,EAAU,EAAQ,EAAE;QACjC,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,GAAG,WAAW,CAAC,EAAE,CAA0B,CAAC;QACpD,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACrB,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;QACnE,MAAM,IAAI,GAAG,EAAE,CAAC,OAAO,CAAC;QACxB,MAAM,GAAG,GAAG,IAAI,OAAO,CAAC,EAAE,CAAC,CAAC;QAC5B,EAAE,CAAC,OAAO,GAAG,UAAU,OAAgB;YACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,EAAC,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC;QACF,OAAO,GAAG;YACR,GAAG;YACH,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;gBACxB,IAAI,GAAG,KAAK,SAAS;oBAAE,OAAO;gBAC9B,IAAI,MAAM;oBAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;;oBAC1B,OAAO,GAAG,CAAC,OAAO,CAAC;YAC1B,CAAC;SACF,CAAC;QACF,4EAA4E;QAC5E,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,4EAA4E;IAC5E,4EAA4E;IAC5E,8EAA8E;IAC9E,0CAA0C;IAC1C,4EAA4E;IAE5E,IAAI,YAAY,GAAuB,IAAI,CAAC;IAE5C,MAAM,aAAa,GAAG,CAAC,EAAW,EAAQ,EAAE;QAC1C,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC7C,YAAY,CAAC,YAAY,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAC;YAC7D,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE;gBAChC,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,YAAY;gBACpB,aAAa,EAAE,MAAM;gBACrB,UAAU,EAAE,yBAAyB;gBACrC,OAAO,EAAE,mBAAmB;gBAC5B,YAAY,EAAE,KAAK;gBACnB,UAAU,EAAE,mBAAmB;aACO,CAAC,CAAC;YAC1C,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;QACD,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACrC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE;YAChC,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI;YACnB,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI;YACjB,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,IAAI;YACrB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,IAAI;SACxB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,IAAI,YAAY,KAAK,IAAI;YAAE,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACjE,CAAC,CAAC;IAEF,4EAA4E;IAC5E,yEAAyE;IACzE,4EAA4E;IAC5E,0EAA0E;IAC1E,6EAA6E;IAC7E,4EAA4E;IAE5E,IAAI,QAAQ,GAA4B,IAAI,CAAC;IAC7C,IAAI,YAAuD,CAAC;IAC5D,IAAI,YAAY,GAAG,EAAE,CAAC;IAEtB,4EAA4E;IAC5E,MAAM,mBAAmB,GAAG,CAAC,GAAqB,EAAQ,EAAE;QAC1D,GAAG,CAAC,UAAU,EAAE,CAAC;QACjB,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC7D,MAAM,IAAI,GAAG,CAAC,IAAgB,EAAQ,EAAE;YACtC,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5C,IAAI,EAAE,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;oBAC3B,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;oBAC7D,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAS,EAAE;QACnC,MAAM,KAAK,GAAG,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,IAAI,KAAK,YAAY;YAAE,OAAO;QAClC,YAAY,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAS,EAAE;QAC5B,IAAI,YAAY,KAAK,SAAS;YAAE,YAAY,CAAC,YAAY,CAAC,CAAC;QAC3D,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;YAC7B,YAAY,GAAG,SAAS,CAAC;YACzB,IAAI,QAAQ,KAAK,IAAI;gBAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;YACrD,iBAAiB,EAAE,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAgB,EAAQ,EAAE;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,QAAQ,KAAK,IAAI;gBAAE,QAAQ,GAAG,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;YACnE,YAAY,GAAG,EAAE,CAAC;YAClB,mBAAmB,CAAC,QAAQ,CAAC,CAAC;YAC9B,iBAAiB,EAAE,CAAC;QACtB,CAAC;aAAM,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC7B,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,QAAQ,GAAG,IAAI,CAAC;YAChB,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;gBAC/B,YAAY,CAAC,YAAY,CAAC,CAAC;gBAC3B,YAAY,GAAG,SAAS,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,mBAAmB;IACnB,4EAA4E;IAE5E,GAAG,CAAC,EAAE,CAAC,mBAAmB,EAAE,CAAC,IAAI,EAAE,EAAE;QACnC,MAAM,GAAG,GAAG,IAAwB,CAAC;QACrC,QAAQ,GAAG,CAAC,IAAI,EAAE,CAAC;YACjB,KAAK,MAAM;gBACT,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,CAAC,CAAC;gBACzC,MAAM;YACR,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC/B,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;oBACrB,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;gBACvD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAC,CAAC,CAAC;gBACnC,CAAC;gBACD,MAAM;YACR,CAAC;YACD,KAAK,OAAO;gBACV,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI;oBAAE,OAAO,EAAE,CAAC;;oBAC1B,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACnB,MAAM;YACR,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;oBACpB,cAAc,EAAE,CAAC;oBACjB,MAAM;gBACR,CAAC;gBACD,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC/B,IAAI,EAAE,KAAK,SAAS;oBAAE,aAAa,CAAC,EAAE,CAAC,CAAC;;oBACnC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,CAAC;YACD,KAAK,SAAS;gBACZ,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBAC1B,MAAM;QACV,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,wEAAwE;IACxE,IAAI,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAC;AACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Components inspector runtime.\n *\n * Injected into the host page (alongside the timeline runtime) when the\n * DevTools panel is enabled. Answers the panel's tree/details requests over the\n * Vite HMR channel, keeps a watched element's details fresh as it updates, and\n * outlines elements the panel hovers in its tree.\n */\n\nimport {elementById} from '../timeline/identity.js';\nimport {buildTree, collectDetails} from './collect.js';\nimport {\n  INSPECT_CMD_CHANNEL,\n  INSPECT_DATA_CHANNEL,\n  type InspectorCommand,\n  type InspectorMessage,\n} from '../../../types/inspector.js';\n\ntype ViteHot = {\n  send: (event: string, data: unknown) => void;\n  on: (event: string, handler: (data: unknown) => void) => void;\n};\n\nconst hot = (import.meta as {hot?: ViteHot}).hot;\n\nif (hot !== undefined && typeof window !== 'undefined') {\n  const send = (msg: InspectorMessage): void => {\n    try {\n      hot.send(INSPECT_DATA_CHANNEL, msg);\n    } catch {\n      // HMR channel temporarily unavailable; the panel can re-request.\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // Live-watch: re-push details whenever the watched element finishes updating.\n  // We wrap the instance's `updated` (not the prototype) so the hook is scoped\n  // to one element and trivially removable, and it works without the timeline's\n  // recording gate.\n  // -------------------------------------------------------------------------\n\n  type Updatable = Element & {\n    updated?: (changed: unknown) => void;\n  };\n  // Hold the watched element via a WeakRef so an active watch doesn't keep a\n  // removed element alive: the override and `restore` only reach `el` through\n  // the ref, leaving the DOM as its sole strong root.\n  let watched: {ref: WeakRef<Updatable>; restore: () => void} | null = null;\n\n  const unwatch = (): void => {\n    watched?.restore();\n    watched = null;\n  };\n\n  const watch = (id: number): void => {\n    unwatch();\n    const el = elementById(id) as Updatable | undefined;\n    if (el === undefined) {\n      send({type: 'gone', id});\n      return;\n    }\n    const hadOwn = Object.prototype.hasOwnProperty.call(el, 'updated');\n    const prev = el.updated;\n    const ref = new WeakRef(el);\n    el.updated = function (changed: unknown) {\n      prev?.call(this, changed);\n      const cur = ref.deref();\n      if (cur !== undefined) {\n        send({type: 'details', details: collectDetails(cur)});\n      }\n    };\n    watched = {\n      ref,\n      restore: () => {\n        const cur = ref.deref();\n        if (cur === undefined) return;\n        if (hadOwn) cur.updated = prev;\n        else delete cur.updated;\n      },\n    };\n    // Push an immediate snapshot so the panel doesn't wait for the next update.\n    send({type: 'details', details: collectDetails(el)});\n  };\n\n  // -------------------------------------------------------------------------\n  // Highlight box: a lightweight fixed-position outline drawn over an element\n  // the panel hovers in its tree. Independent of the source overlay so it works\n  // whether or not that feature is enabled.\n  // -------------------------------------------------------------------------\n\n  let highlightBox: HTMLElement | null = null;\n\n  const showHighlight = (el: Element): void => {\n    if (highlightBox === null) {\n      highlightBox = document.createElement('div');\n      highlightBox.setAttribute('data-lit-devtools-highlight', '');\n      Object.assign(highlightBox.style, {\n        position: 'fixed',\n        zIndex: '2147483646',\n        pointerEvents: 'none',\n        background: 'rgba(77, 99, 255, 0.25)',\n        outline: '1px solid #4d63ff',\n        borderRadius: '2px',\n        transition: 'all 80ms ease-out',\n      } satisfies Partial<CSSStyleDeclaration>);\n      document.body.append(highlightBox);\n    }\n    const r = el.getBoundingClientRect();\n    Object.assign(highlightBox.style, {\n      display: 'block',\n      left: `${r.left}px`,\n      top: `${r.top}px`,\n      width: `${r.width}px`,\n      height: `${r.height}px`,\n    });\n  };\n\n  const clearHighlight = (): void => {\n    if (highlightBox !== null) highlightBox.style.display = 'none';\n  };\n\n  // -------------------------------------------------------------------------\n  // Opt-in live tree: watch the DOM (light + every shadow root) and push a\n  // fresh tree when the component hierarchy actually changes. Off by default.\n  // childList-only (no attributes), so cosmetic changes — including our own\n  // highlight box toggling — don't churn; identical rebuilds are also deduped.\n  // -------------------------------------------------------------------------\n\n  let observer: MutationObserver | null = null;\n  let observeTimer: ReturnType<typeof setTimeout> | undefined;\n  let lastTreeJson = '';\n\n  /** Re-attach the observer to the body and every shadow root in the page. */\n  const syncObserverTargets = (obs: MutationObserver): void => {\n    obs.disconnect();\n    obs.observe(document.body, {childList: true, subtree: true});\n    const walk = (root: ParentNode): void => {\n      for (const el of root.querySelectorAll('*')) {\n        if (el.shadowRoot !== null) {\n          obs.observe(el.shadowRoot, {childList: true, subtree: true});\n          walk(el.shadowRoot);\n        }\n      }\n    };\n    walk(document);\n  };\n\n  const pushTreeIfChanged = (): void => {\n    const roots = buildTree();\n    const json = JSON.stringify(roots);\n    if (json === lastTreeJson) return;\n    lastTreeJson = json;\n    send({type: 'tree', roots});\n  };\n\n  const onMutation = (): void => {\n    if (observeTimer !== undefined) clearTimeout(observeTimer);\n    observeTimer = setTimeout(() => {\n      observeTimer = undefined;\n      if (observer !== null) syncObserverTargets(observer);\n      pushTreeIfChanged();\n    }, 100);\n  };\n\n  const setObserving = (enabled: boolean): void => {\n    if (enabled) {\n      if (observer === null) observer = new MutationObserver(onMutation);\n      lastTreeJson = '';\n      syncObserverTargets(observer);\n      pushTreeIfChanged();\n    } else if (observer !== null) {\n      observer.disconnect();\n      observer = null;\n      if (observeTimer !== undefined) {\n        clearTimeout(observeTimer);\n        observeTimer = undefined;\n      }\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // Command dispatch\n  // -------------------------------------------------------------------------\n\n  hot.on(INSPECT_CMD_CHANNEL, (data) => {\n    const cmd = data as InspectorCommand;\n    switch (cmd.type) {\n      case 'tree':\n        send({type: 'tree', roots: buildTree()});\n        break;\n      case 'details': {\n        const el = elementById(cmd.id);\n        if (el !== undefined) {\n          send({type: 'details', details: collectDetails(el)});\n        } else {\n          send({type: 'gone', id: cmd.id});\n        }\n        break;\n      }\n      case 'watch':\n        if (cmd.id === null) unwatch();\n        else watch(cmd.id);\n        break;\n      case 'highlight': {\n        if (cmd.id === null) {\n          clearHighlight();\n          break;\n        }\n        const el = elementById(cmd.id);\n        if (el !== undefined) showHighlight(el);\n        else clearHighlight();\n        break;\n      }\n      case 'observe':\n        setObserving(cmd.enabled);\n        break;\n    }\n  });\n\n  // Announce readiness so a panel that loaded first re-requests the tree.\n  send({type: 'ready'});\n}\n"]}

package/lib/runtime/inspector/serialize.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/** A short type label for the details table's "type" column. */
+export declare const typeTag: (value: unknown) => string;
+/** Produce a readable one-line preview of `value`. Never throws. */
+export declare const serialize: (value: unknown) => string;
+//# sourceMappingURL=serialize.d.ts.map

package/lib/runtime/inspector/serialize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../../../../../packages/labs/vite-plugin-lit/src/lib/runtime/inspector/serialize.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,gEAAgE;AAChE,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,KAAG,MAWxC,CAAC;AAwFF,oEAAoE;AACpE,eAAO,MAAM,SAAS,GAAI,OAAO,OAAO,KAAG,MAM1C,CAAC"}