@oddsquad/vite-plugin-lit 0.0.3 → 0.0.5

package/lib/tokens.js

@@ -0,0 +1,263 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { css, unsafeCSS } from 'lit';
+/**
+ * Design token CSS custom properties for the Lit DevTools.
+ *
+ * Two entry points:
+ *  - **`tokens`** — Lit `css` template that defines the theme-agnostic base
+ *    tokens on `:host`. Semantic color aliases (`--lit-devtools-bg`, `--lit-devtools-surface`, `--lit-devtools-text`,
+ *    etc.) are inherited from `:root`, where {@link injectTokens} installs them.
+ *    Use as `static styles = [tokens, css`…`]`.
+ *  - **`injectTokens()`** — injects `:root { … }` into the page `<head>` once.
+ *    This makes semantic aliases available to every devtools surface, both
+ *    runtime elements (indicator, source-overlay) that build their shadow DOM
+ *    via `innerHTML` and Lit panel components that inherit from `:root`.
+ *    The injected stylesheet reacts to `prefers-color-scheme` and to
+ *    `.color-scheme-light` / `.color-scheme-dark` classes on `:root`.
+ *
+ * Sourced from the lit-design skill (`tokens/colors.css`). Defaults to the
+ * dark DevTools theme; the light lit.dev website palette is applied when the
+ * OS/browser requests a light color scheme or when `:root` has the matching
+ * theme class.
+ *
+ * Fonts are system stacks (no webfonts). For the branded Manrope + Roboto Mono
+ * see the lit-design skill's `fonts/` directory.
+ */
+const baseTokenCSS = `
+  /* ---- Brand · the Lit flame ---- */
+  --lit-devtools-lit-blue:        #324fff;
+  --lit-devtools-lit-blue-bright: #4d63ff;
+  --lit-devtools-lit-indigo:      #2a2c9d;
+  --lit-devtools-lit-dark-blue:   #283198;
+  --lit-devtools-lit-cyan:        #00ffff;
+  --lit-devtools-lit-dark-cyan:   #00e8ff;
+
+  /* ---- Neutral ink scale (0 = near-black, 13 = white) ---- */
+  --lit-devtools-ink-0:  hsl(0 0% 1%);
+  --lit-devtools-ink-1:  hsl(0 0% 5%);
+  --lit-devtools-ink-2:  hsl(0 0% 7%);
+  --lit-devtools-ink-3:  hsl(0 0% 11%);
+  --lit-devtools-ink-4:  hsl(0 0% 13%);
+  --lit-devtools-ink-5:  hsl(0 0% 16%);
+  --lit-devtools-ink-6:  hsl(0 0% 21%);
+  --lit-devtools-ink-7:  hsl(0 0% 28%);
+  --lit-devtools-ink-8:  hsl(0 0% 38%);
+  --lit-devtools-ink-9:  hsl(0 0% 57%);
+  --lit-devtools-ink-10: hsl(0 0% 63%);
+  --lit-devtools-ink-11: hsl(0 0% 78%);
+  --lit-devtools-ink-12: hsl(0 0% 89%);
+  --lit-devtools-ink-13: hsl(0 0% 100%);
+
+  /* ---- Typography ---- */
+  --lit-devtools-font-sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --lit-devtools-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+  --lit-devtools-weight-regular:   400;
+  --lit-devtools-weight-medium:    500;
+  --lit-devtools-weight-semibold:  600;
+  --lit-devtools-weight-bold:      700;
+  --lit-devtools-weight-extrabold: 800;
+
+  --lit-devtools-text-2xs: 11px;
+  --lit-devtools-text-xs:  12px;
+  --lit-devtools-text-sm:  13px;
+  --lit-devtools-text-md:  14px;
+  --lit-devtools-text-base:16px;
+
+  --lit-devtools-leading-tight:   1.15;
+  --lit-devtools-leading-snug:    1.3;
+  --lit-devtools-leading-normal:  1.5;
+
+  --lit-devtools-tracking-tight:  -0.02em;
+  --lit-devtools-tracking-snug:   -0.01em;
+  --lit-devtools-tracking-normal: 0;
+  --lit-devtools-tracking-wide:   0.02em;
+  --lit-devtools-tracking-caps:   0.06em;
+
+  /* ---- Spacing (4px base) ---- */
+  --lit-devtools-space-0:  0;
+  --lit-devtools-space-1:  2px;
+  --lit-devtools-space-2:  4px;
+  --lit-devtools-space-3:  6px;
+  --lit-devtools-space-4:  8px;
+  --lit-devtools-space-5:  12px;
+  --lit-devtools-space-6:  16px;
+  --lit-devtools-space-7:  20px;
+  --lit-devtools-space-8:  24px;
+  --lit-devtools-space-9:  32px;
+
+  /* ---- Radius ---- */
+  --lit-devtools-radius-xs:   3px;
+  --lit-devtools-radius-sm:   5px;
+  --lit-devtools-radius-md:   8px;
+  --lit-devtools-radius-lg:   12px;
+  --lit-devtools-radius-xl:   16px;
+  --lit-devtools-radius-pill: 999px;
+
+  /* ---- Elevation ---- */
+  --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);
+  --lit-devtools-shadow-sm: 0 1px 5px hsl(0 0% 0% / 0.35);
+  --lit-devtools-shadow-md: 0 4px 14px hsl(0 0% 0% / 0.40);
+  --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);
+  --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);
+  --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),
+    0 0 0 1px hsl(0 0% 100% / 0.06);
+  --lit-devtools-ring: 0 0 0 2px var(--lit-devtools-accent-ring);
+
+  /* ---- Motion ---- */
+  --lit-devtools-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --lit-devtools-dur-fast:    140ms;
+  --lit-devtools-dur-normal:  220ms;
+`;
+const darkThemeCSS = `
+  /* ---- DARK · DevTools theme ---- */
+  --lit-devtools-accent:               var(--lit-devtools-lit-blue-bright);
+  --lit-devtools-accent-hover:         #6478ff;
+  --lit-devtools-accent-pressed:       #3d54f0;
+  --lit-devtools-accent-soft:          hsla(232 100% 65% / 0.16);
+  --lit-devtools-accent-ring:          hsla(232 100% 65% / 0.45);
+  --lit-devtools-on-accent:            #ffffff;
+  --lit-devtools-accent-cyan:          var(--lit-devtools-lit-dark-cyan);
+
+  --lit-devtools-bg:                   var(--lit-devtools-ink-0);
+  --lit-devtools-surface:             var(--lit-devtools-ink-2);
+  --lit-devtools-surface-low:          var(--lit-devtools-ink-1);
+  --lit-devtools-surface-container:    var(--lit-devtools-ink-4);
+  --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);
+  --lit-devtools-surface-elevated:     var(--lit-devtools-ink-6);
+  --lit-devtools-surface-hover:        hsl(0 0% 100% / 0.04);
+  --lit-devtools-surface-active:       hsl(0 0% 100% / 0.07);
+
+  --lit-devtools-text:                 var(--lit-devtools-ink-12);
+  --lit-devtools-text-strong:          var(--lit-devtools-ink-13);
+  --lit-devtools-text-secondary:       var(--lit-devtools-ink-10);
+  --lit-devtools-text-muted:           var(--lit-devtools-ink-8);
+  --lit-devtools-text-link:            var(--lit-devtools-lit-blue-bright);
+
+  --lit-devtools-border:               var(--lit-devtools-ink-6);
+  --lit-devtools-border-strong:        var(--lit-devtools-ink-7);
+  --lit-devtools-border-subtle:        hsl(0 0% 100% / 0.06);
+
+  --lit-devtools-success:              hsl(158 74% 53%);
+  --lit-devtools-success-soft:         hsl(158 74% 53% / 0.15);
+  --lit-devtools-warning:              #f4bf4f;
+  --lit-devtools-warning-soft:         hsl(43 88% 63% / 0.15);
+  --lit-devtools-error:                #ff6b6b;
+  --lit-devtools-error-soft:           hsl(0 100% 71% / 0.15);
+  --lit-devtools-info:                 var(--lit-devtools-lit-dark-cyan);
+  --lit-devtools-info-soft:            hsl(187 100% 47% / 0.15);
+
+  --lit-devtools-selection-bg:         var(--lit-devtools-accent);
+  --lit-devtools-on-selection:         #ffffff;
+
+  color-scheme: dark;
+`;
+const lightThemeCSS = `
+  /* ---- LIGHT · lit.dev website theme ---- */
+  --lit-devtools-accent:               var(--lit-devtools-lit-blue);
+  --lit-devtools-accent-hover:         #1f3bff;
+  --lit-devtools-accent-pressed:       #2a2c9d;
+  --lit-devtools-accent-soft:          hsla(232 100% 60% / 0.12);
+  --lit-devtools-accent-ring:          hsla(232 100% 60% / 0.40);
+  --lit-devtools-on-accent:            #ffffff;
+  --lit-devtools-accent-cyan:          var(--lit-devtools-lit-dark-cyan);
+
+  --lit-devtools-bg:                   #f4f4f4;
+  --lit-devtools-surface:              #ffffff;
+  --lit-devtools-surface-low:          #f3f3f3;
+  --lit-devtools-surface-container:    #ffffff;
+  --lit-devtools-surface-container-high: #e8e8e8;
+  --lit-devtools-surface-elevated:     #ffffff;
+  --lit-devtools-surface-hover:        hsl(0 0% 0% / 0.04);
+  --lit-devtools-surface-active:       hsl(0 0% 0% / 0.07);
+
+  --lit-devtools-text:                 #242424;
+  --lit-devtools-text-strong:          #000000;
+  --lit-devtools-text-secondary:       #6e6e6e;
+  --lit-devtools-text-muted:           #949494;
+  --lit-devtools-text-link:            #005dc7;
+
+  --lit-devtools-border:               #e2e2e2;
+  --lit-devtools-border-strong:        #c6c6c6;
+  --lit-devtools-border-subtle:        hsl(0 0% 0% / 0.07);
+
+  --lit-devtools-success:              #00865b;
+  --lit-devtools-success-soft:         hsl(158 100% 26% / 0.10);
+  --lit-devtools-warning:              #b26a00;
+  --lit-devtools-warning-soft:         hsl(40 100% 35% / 0.10);
+  --lit-devtools-error:                #ba1a1a;
+  --lit-devtools-error-soft:           hsl(0 75% 42% / 0.10);
+  --lit-devtools-info:                 #005dc7;
+  --lit-devtools-info-soft:            hsl(210 100% 39% / 0.10);
+
+  --lit-devtools-selection-bg:         var(--lit-devtools-accent);
+  --lit-devtools-on-selection:         #ffffff;
+
+  color-scheme: light;
+`;
+/**
+ * Default dark theme tokens as a flat string, primarily for use by
+ * {@link injectTokens}. Prefer importing `tokens` for Lit components so the
+ * semantic aliases are inherited from `:root`.
+ */
+export const tokenCSS = `${baseTokenCSS}\n${darkThemeCSS}`;
+/**
+ * Lit `css` template for use in panel component shadow roots.
+ *
+ * ```ts
+ * import {tokens} from '../lib/tokens.js';
+ * // ...
+ * static override styles = [tokens, css`…`];
+ * ```
+ *
+ * This installs the theme-agnostic base tokens on `:host`. Semantic aliases
+ * (`--lit-devtools-bg`, `--lit-devtools-text`, etc.) are inherited from `:root`, where they are installed
+ * 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 `
+  :host {
+    ${unsafeCSS(baseTokenCSS)}
+  }
+`;
+let _injected = false;
+/**
+ * Injects `:root { … }` into the page `<head>` once.
+ *
+ * CSS custom properties defined on `:root` cascade through shadow DOM
+ * boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both
+ * runtime elements (indicator, source-overlay) and Lit panel components.
+ *
+ * The injected stylesheet reacts to `prefers-color-scheme` and to
+ * `.color-scheme-light` / `.color-scheme-dark` classes on the document root.
+ */
+export const injectTokens = () => {
+    if (_injected)
+        return;
+    _injected = true;
+    const style = document.createElement('style');
+    style.setAttribute('data-lit-devtools-tokens', '');
+    style.textContent = `
+    :root {
+      ${baseTokenCSS}
+      ${darkThemeCSS}
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        ${lightThemeCSS}
+      }
+    }
+    :root.color-scheme-light {
+      ${lightThemeCSS}
+    }
+    :root.color-scheme-dark {
+      ${darkThemeCSS}
+    }
+  `;
+    document.head.prepend(style);
+};
+//# sourceMappingURL=tokens.js.map

package/lib/tokens.js.map

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CpB,CAAC;AAEF,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CrB,CAAC;AAEF;;;;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;AAEtB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAS,EAAE;IACrC,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;;QAEd,YAAY;QACZ,YAAY;;;;UAIV,aAAa;;;;QAIf,aAAa;;;QAGb,YAAY;;GAEjB,CAAC;IACF,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  color-scheme: dark;\n`;\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  color-scheme: light;\n`;\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 * 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 */\nexport const injectTokens = (): void => {\n  if (_injected) return;\n  _injected = true;\n  const style = document.createElement('style');\n  style.setAttribute('data-lit-devtools-tokens', '');\n  style.textContent = `\n    :root {\n      ${baseTokenCSS}\n      ${darkThemeCSS}\n    }\n    @media (prefers-color-scheme: light) {\n      :root {\n        ${lightThemeCSS}\n      }\n    }\n    :root.color-scheme-light {\n      ${lightThemeCSS}\n    }\n    :root.color-scheme-dark {\n      ${darkThemeCSS}\n    }\n  `;\n  document.head.prepend(style);\n};\n"]}

package/lib/transform.d.ts

@@ -10,9 +10,9 @@ import MagicString from 'magic-string';
  * import-analysis resolves them through our `resolveId` and encodes the
  * `\0` for the browser, so it never reaches the network.
  */
-export declare const VIRTUAL_PREFIX = "\0lit-hmr:";
+export declare const VIRTUAL_PREFIX = "\0lit-plugin:";
 /** Virtual module that installs the define interceptor. */
-export declare const INSTALL_ID = "\0lit-hmr:install";
+export declare const INSTALL_ID = "\0lit-plugin:install";
 /**
  * A module needs the define interceptor + self-accept if it registers
  * custom elements: a textual `customElements.define(` call, or — only when
@@ -20,7 +20,7 @@ export declare const INSTALL_ID = "\0lit-hmr:install";
  * decorator runtime call stays textually present after TS transpilation).
  */
 export declare const isComponentModule: (code: string, hasLitFamilyImport: boolean) => boolean;
-export interface LitHmrTransformResult {
+export interface LitPluginTransformResult {
     code: string;
     map: ReturnType<MagicString['generateMap']>;
 }
@@ -29,7 +29,7 @@ export interface LitHmrTransformResult {
  *
  * - Pass 1 (all user modules — shared template-partial modules must intern
  *   too): rewrite import/export-from/dynamic-import specifiers found in the
- *   wrap table to their `\0lit-hmr:` wrapper module.
+ *   wrap table to their `\0lit-plugin:` wrapper module.
  * - Pass 2 (component modules): prepend the interceptor install import
  *   (static imports hoist, so the interceptor is installed before this
  *   module's defines) and append a self-accept (re-execution alone triggers
@@ -37,5 +37,5 @@ export interface LitHmrTransformResult {
  *
  * Returns `null` when the module needs no changes.
  */
-export declare const transformLitModule: (code: string) => Promise<LitHmrTransformResult | null>;
+export declare const transformLitModule: (code: string) => Promise<LitPluginTransformResult | null>;
 //# sourceMappingURL=transform.d.ts.map

package/lib/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-hmr/src/lib/transform.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,WAAW,MAAM,cAAc,CAAC;AAGvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,eAAe,CAAC;AAE3C,2DAA2D;AAC3D,eAAO,MAAM,UAAU,sBAA6B,CAAC;AASrD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAC5B,MAAM,MAAM,EACZ,oBAAoB,OAAO,KAC1B,OAEwD,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,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,qBAAqB,GAAG,IAAI,CAqDtC,CAAC"}
+{"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"}

package/lib/transform.js

@@ -12,7 +12,7 @@ import { WRAP_TABLE } from './wrap-table.js';
  * import-analysis resolves them through our `resolveId` and encodes the
  * `\0` for the browser, so it never reaches the network.
  */
-export const VIRTUAL_PREFIX = '\0lit-hmr:';
+export const VIRTUAL_PREFIX = '\0lit-plugin:';
 /** Virtual module that installs the define interceptor. */
 export const INSTALL_ID = `${VIRTUAL_PREFIX}install`;
 const LIT_FAMILY_PACKAGES = ['lit', 'lit-html', 'lit-element'];
@@ -25,14 +25,14 @@ const isLitFamilySpecifier = (spec) => LIT_FAMILY_PACKAGES.some((p) => spec ===
  * 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) => code.includes('customElements.define(') ||
+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:
  *
  * - Pass 1 (all user modules — shared template-partial modules must intern
  *   too): rewrite import/export-from/dynamic-import specifiers found in the
- *   wrap table to their `\0lit-hmr:` wrapper module.
+ *   wrap table to their `\0lit-plugin:` wrapper module.
  * - Pass 2 (component modules): prepend the interceptor install import
  *   (static imports hoist, so the interceptor is installed before this
  *   module's defines) and append a self-accept (re-execution alone triggers

package/lib/transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform.js","sourceRoot":"","sources":["../../../packages/labs/vite-hmr/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-hmr:';\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  code.includes('customElements.define(') ||\n  (hasLitFamilyImport && /\\bcustomElement\\s*\\(/.test(code));\n\nexport interface LitHmrTransformResult {\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-hmr:` 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<LitHmrTransformResult | 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":["../../../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"]}

package/lib/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+export interface ElementInfo {
+    tagName: string;
+    componentName?: string;
+    source: {
+        filePath: string;
+        lineNumber: number;
+    };
+}
+export interface EditorConfig {
+    name: string;
+    url: (path: string, line: number) => string;
+}
+export interface SourceOverlayOptions {
+    /**
+     * Hotkey letter with Ctrl+Shift (default `s` -> Ctrl+Shift+S).
+     */
+    key?: string;
+    /** Built-in editor key or custom `{ name, url }`. Defaults to `vscode`. */
+    editor?: EditorConfig | string;
+    /** Optional workspace root prefix for absolute file paths. */
+    workspaceRoot?: string;
+    /** Mouse move throttle in ms (default 50). */
+    throttleMs?: number;
+    /** Filter elements to skip during inspection. */
+    exclude?: (el: Element) => boolean;
+    /** Callback fired when the user clicks a component. */
+    onSelect?: (info: ElementInfo) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +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"}

package/lib/types.js

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

package/lib/types.js.map

@@ -0,0 +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"]}

package/lib/wrap-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrap-table.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-hmr/src/lib/wrap-table.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAQD,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAehE,CAAC"}
+{"version":3,"file":"wrap-table.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/wrap-table.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAQD,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAehE,CAAC"}

package/lib/wrap-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrap-table.js","sourceRoot":"","sources":["../../../packages/labs/vite-hmr/src/lib/wrap-table.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAsBH,MAAM,IAAI,GAAG,CAAC,GAAG,KAAsC,EAAgB,EAAE,CACvE,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,UAAU,GAAG,CAAC,GAAG,KAAsC,EAAgB,EAAE,CAC7E,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,EAAE,EAAE,UAAU,UAAU,EAAE,EAAC,CAAC,CAAC,CAAC;AAExE,MAAM,CAAC,MAAM,UAAU,GAA+C,IAAI,GAAG,CAAC;IAC5E,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC7C,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC9C,CAAC,oBAAoB,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC,oBAAoB,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IACrD,CAAC,4BAA4B,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IACpE,CAAC,uBAAuB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,kCAAkC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACjD,qEAAqE;IACrE,uEAAuE;IACvE,sEAAsE;IACtE,qBAAqB;IACrB,CAAC,mBAAmB,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;CAC3C,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * The exact wrap surface: which template-tag exports of which lit-family\n * module specifiers get interned, and in which namespace.\n *\n * Namespaces are per tag *type*, not per module — `html` from `'lit'` and\n * from `'lit-html'` feed the same lit-html template cache, so they must\n * share canonical arrays. But content-equal `html` and `svg` templates must\n * never share one (a shared Template would parse SVG as HTML), and the\n * static-html tags pass zero-statics calls straight through to lit-html, so\n * they get their own namespaces too.\n *\n * Specifiers must be valid export-map subpaths (e.g. `lit/index.js` and\n * `lit-html/lit-html.js` are not, and are deliberately absent).\n */\n\nexport interface WrappedTag {\n  readonly exportName: 'html' | 'svg' | 'mathml' | 'css';\n  readonly ns: string;\n}\n\nconst tags = (...names: Array<WrappedTag['exportName']>): WrappedTag[] =>\n  names.map((exportName) => ({exportName, ns: exportName}));\n\nconst staticTags = (...names: Array<WrappedTag['exportName']>): WrappedTag[] =>\n  names.map((exportName) => ({exportName, ns: `static-${exportName}`}));\n\nexport const WRAP_TABLE: ReadonlyMap<string, readonly WrappedTag[]> = new Map([\n  ['lit', tags('html', 'svg', 'mathml', 'css')],\n  ['lit/html.js', tags('html', 'svg', 'mathml')],\n  ['lit/static-html.js', staticTags('html', 'svg', 'mathml')],\n  ['lit-html', tags('html', 'svg', 'mathml')],\n  ['lit-html/static.js', staticTags('html', 'svg', 'mathml')],\n  ['lit-element', tags('html', 'svg', 'mathml', 'css')],\n  ['lit-element/lit-element.js', tags('html', 'svg', 'mathml', 'css')],\n  ['@lit/reactive-element', tags('css')],\n  ['@lit/reactive-element/css-tag.js', tags('css')],\n  // The signals tags wrap the user's values but pass the strings array\n  // straight through to lit-html's core tags, so they intern in the same\n  // namespaces as plain html/svg (content-equal templates share a cache\n  // entry either way).\n  ['@lit-labs/signals', tags('html', 'svg')],\n]);\n"]}
+{"version":3,"file":"wrap-table.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/wrap-table.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAsBH,MAAM,IAAI,GAAG,CAAC,GAAG,KAAsC,EAAgB,EAAE,CACvE,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,UAAU,GAAG,CAAC,GAAG,KAAsC,EAAgB,EAAE,CAC7E,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,EAAE,EAAE,UAAU,UAAU,EAAE,EAAC,CAAC,CAAC,CAAC;AAExE,MAAM,CAAC,MAAM,UAAU,GAA+C,IAAI,GAAG,CAAC;IAC5E,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC7C,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC9C,CAAC,oBAAoB,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC,oBAAoB,EAAE,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IACrD,CAAC,4BAA4B,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IACpE,CAAC,uBAAuB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,kCAAkC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACjD,qEAAqE;IACrE,uEAAuE;IACvE,sEAAsE;IACtE,qBAAqB;IACrB,CAAC,mBAAmB,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;CAC3C,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * The exact wrap surface: which template-tag exports of which lit-family\n * module specifiers get interned, and in which namespace.\n *\n * Namespaces are per tag *type*, not per module — `html` from `'lit'` and\n * from `'lit-html'` feed the same lit-html template cache, so they must\n * share canonical arrays. But content-equal `html` and `svg` templates must\n * never share one (a shared Template would parse SVG as HTML), and the\n * static-html tags pass zero-statics calls straight through to lit-html, so\n * they get their own namespaces too.\n *\n * Specifiers must be valid export-map subpaths (e.g. `lit/index.js` and\n * `lit-html/lit-html.js` are not, and are deliberately absent).\n */\n\nexport interface WrappedTag {\n  readonly exportName: 'html' | 'svg' | 'mathml' | 'css';\n  readonly ns: string;\n}\n\nconst tags = (...names: Array<WrappedTag['exportName']>): WrappedTag[] =>\n  names.map((exportName) => ({exportName, ns: exportName}));\n\nconst staticTags = (...names: Array<WrappedTag['exportName']>): WrappedTag[] =>\n  names.map((exportName) => ({exportName, ns: `static-${exportName}`}));\n\nexport const WRAP_TABLE: ReadonlyMap<string, readonly WrappedTag[]> = new Map([\n  ['lit', tags('html', 'svg', 'mathml', 'css')],\n  ['lit/html.js', tags('html', 'svg', 'mathml')],\n  ['lit/static-html.js', staticTags('html', 'svg', 'mathml')],\n  ['lit-html', tags('html', 'svg', 'mathml')],\n  ['lit-html/static.js', staticTags('html', 'svg', 'mathml')],\n  ['lit-element', tags('html', 'svg', 'mathml', 'css')],\n  ['lit-element/lit-element.js', tags('html', 'svg', 'mathml', 'css')],\n  ['@lit/reactive-element', tags('css')],\n  ['@lit/reactive-element/css-tag.js', tags('css')],\n  // The signals tags wrap the user's values but pass the strings array\n  // straight through to lit-html's core tags, so they intern in the same\n  // namespaces as plain html/svg (content-equal templates share a cache\n  // entry either way).\n  ['@lit-labs/signals', tags('html', 'svg')],\n]);\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oddsquad/vite-plugin-lit",
-  "version": "0.0.3",
-  "description": "Vite plugin providing true HMR for Lit components",
+  "version": "0.0.5",
+  "description": "Vite plugin providing true HMR for Lit components, plus CSS helpers and a DevTools panel",
   "license": "BSD-3-Clause",
   "author": "Oddsquad (based on @lit-labs/vite-hmr by Google LLC)",
   "type": "module",
@@ -9,24 +9,38 @@
   "module": "index.js",
   "files": [
     "/lib/",
+    "/types/",
+    "/panel/",
     "/index.{d.ts,d.ts.map,js,js.map}"
   ],
   "exports": {
     ".": {
       "types": "./index.d.ts",
       "default": "./index.js"
+    },
+    "./css.js": {
+      "types": "./lib/runtime/css.d.ts",
+      "default": "./lib/runtime/css.js"
     }
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && node scripts/copy-panel-html.mjs",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "es-module-lexer": "^1.5.4",
+    "launch-editor": "^2.10.0",
     "magic-string": "^0.30.11"
   },
   "peerDependencies": {
-    "vite": "^8.0.0"
+    "lightningcss": "^1.30.0",
+    "lit": "^3.0.0",
+    "vite": "^7.0.0 || ^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "lightningcss": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "typescript": "^5.7.0"

package/panel/components-view.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The Components view: a hierarchical tree of the page's Lit elements (left)
+ * and a details pane for the selected one (right). A tab of the DevTools panel
+ * shell (\`lit-devtools-panel\`).
+ *
+ * It can't touch the page DOM directly (separate iframe), so it drives the
+ * page's inspector runtime over the transport: it POSTs {@link InspectorCommand}s
+ * to {@link INSPECT_PATH} and receives {@link InspectorMessage}s on the shared
+ * SSE stream's `inspect` event. An overlay inspect-pick arrives as a `pick`
+ * message; the view selects that node and asks its host to switch to this tab.
+ */
+export declare class ComponentsView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _roots;
+    private _selectedId;
+    private _details;
+    /** True when the selected element is no longer in the page (removed / GC'd). */
+    private _gone;
+    private _expanded;
+    private _picking;
+    /** Opt-in live tree (MutationObserver in the page); persisted, default off. */
+    private _live;
+    private _es;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Refresh the tree (and re-arm watch / live mode) once the SSE connects. */
+    private _onOpen;
+    private _post;
+    private _onMessage;
+    /**
+     * Select an element by id from outside (e.g. a timeline event's "inspect"
+     * link). Same as a tree click; the host is responsible for switching tabs.
+     */
+    selectById(id: number): void;
+    private _select;
+    /** Expand every ancestor of `id` so the selected node is visible. */
+    private _revealAncestors;
+    private _toggleExpand;
+    private _refresh;
+    private _togglePick;
+    private _toggleLive;
+    private _highlight;
+    private _openSource;
+    private _renderNode;
+    private _renderPropTable;
+    private _renderDetails;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'components-view': ComponentsView;
+    }
+}
+//# sourceMappingURL=components-view.d.ts.map

package/panel/components-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-view.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/components-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAsB,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAexE;;;;;;;;;;GAUG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAoLpB;IAEO,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,QAAQ,CAAiC;IAC1D,gFAAgF;IACvE,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,QAAQ,CAAS;IAClC,+EAA+E;IACtE,OAAO,CAAC,KAAK,CAAS;IAE/B,OAAO,CAAC,GAAG,CAA4B;IAE9B,iBAAiB;IAUjB,oBAAoB;IAU7B,6EAA6E;IAC7E,OAAO,CAAC,OAAO,CAMb;IAMF,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,UAAU,CA6ChB;IAMF;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAI5B,OAAO,CAAC,OAAO;IAcf,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAyBxB,OAAO,CAAC,cAAc;IA8Db,MAAM;CAgChB;AAuBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}