@oddsquad/vite-plugin-lit 0.0.3 → 0.1.0

package/panel/timeline-event-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-event-list.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/timeline-event-list.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 {LitElement, html, css, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {ref, createRef} from 'lit/directives/ref.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {tokens} from '../lib/tokens.js';\nimport type {TimelineEvent} from '../types/timeline.js';\nimport type {LayerState} from './timeline-layers.js';\n\n/** Scrollable list of recorded timeline events with an inline detail pane. */\n@customElement('timeline-event-list')\nexport class TimelineEventList extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        overflow: hidden;\n      }\n      .filterbar {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-3);\n        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-5);\n        border-bottom: 1px solid var(--lit-devtools-border);\n        font-size: var(--lit-devtools-text-2xs);\n        color: var(--lit-devtools-text-muted);\n        flex-shrink: 0;\n      }\n      .filterbar select {\n        background: var(--lit-devtools-surface-elevated);\n        color: var(--lit-devtools-text);\n        border: 1px solid var(--lit-devtools-border-strong);\n        border-radius: var(--lit-devtools-radius-sm);\n        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-3);\n        font-size: var(--lit-devtools-text-2xs);\n        font-family: var(--lit-devtools-font-mono);\n      }\n      .filterbar input.regex {\n        background: var(--lit-devtools-surface-elevated);\n        color: var(--lit-devtools-text);\n        border: 1px solid var(--lit-devtools-border-strong);\n        border-radius: var(--lit-devtools-radius-sm);\n        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-3);\n        font-size: var(--lit-devtools-text-2xs);\n        font-family: var(--lit-devtools-font-mono);\n        min-width: 140px;\n      }\n      .filterbar input.regex::placeholder {\n        color: var(--lit-devtools-text-muted);\n      }\n      .filterbar input.regex.invalid {\n        border-color: var(--lit-devtools-error);\n      }\n      .filterbar .count {\n        margin-left: auto;\n        color: var(--lit-devtools-text-muted);\n      }\n      .scroll {\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--lit-devtools-space-2) 0;\n      }\n      .empty {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        gap: var(--lit-devtools-space-4);\n        color: var(--lit-devtools-text-muted);\n        font-size: var(--lit-devtools-text-xs);\n      }\n      .hint {\n        font-size: var(--lit-devtools-text-2xs);\n        color: var(--lit-devtools-text-muted);\n      }\n      .row {\n        display: flex;\n        align-items: baseline;\n        gap: var(--lit-devtools-space-4);\n        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-5);\n        font-size: var(--lit-devtools-text-2xs);\n        font-family: var(--lit-devtools-font-mono);\n        border-bottom: 1px solid var(--lit-devtools-border);\n        cursor: pointer;\n      }\n      .row:hover {\n        background: var(--lit-devtools-surface-hover);\n      }\n      .row.selected {\n        background: var(--lit-devtools-surface-active);\n      }\n      .time {\n        color: var(--lit-devtools-text-muted);\n        flex-shrink: 0;\n        width: 56px;\n        text-align: right;\n      }\n      .dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        flex-shrink: 0;\n        margin-top: 2px;\n      }\n      .title {\n        flex: 1;\n        color: var(--lit-devtools-text);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .subtitle {\n        color: var(--lit-devtools-text-muted);\n        flex-shrink: 0;\n        max-width: 200px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .detail {\n        border-top: 1px solid var(--lit-devtools-border);\n        background: var(--lit-devtools-surface-low);\n        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-5);\n        font-size: var(--lit-devtools-text-2xs);\n        font-family: var(--lit-devtools-font-mono);\n        color: var(--lit-devtools-text-secondary);\n        flex-shrink: 0;\n        max-height: 130px;\n        overflow-y: auto;\n      }\n      table {\n        border-collapse: collapse;\n        width: 100%;\n      }\n      td {\n        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-4)\n          var(--lit-devtools-space-1) 0;\n        vertical-align: top;\n      }\n      .key {\n        color: var(--lit-devtools-text-muted);\n        white-space: nowrap;\n      }\n      .val {\n        color: var(--lit-devtools-text);\n        word-break: break-all;\n      }\n      a {\n        color: var(--lit-devtools-accent);\n        text-decoration: none;\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n      .filter-link {\n        cursor: pointer;\n        margin-left: var(--lit-devtools-space-4);\n        font-size: var(--lit-devtools-text-2xs);\n      }\n    `,\n  ];\n\n  @property({type: Array}) events: TimelineEvent[] = [];\n  @property({type: Array}) layers: LayerState[] = [];\n  @state() private _selected: TimelineEvent | null = null;\n  /** Element id to filter the list to, or null for all elements. */\n  @state() private _elementFilter: number | null = null;\n  /** Case-insensitive regex (source text) matched against tag/title/subtitle. */\n  @state() private _regex = '';\n\n  private readonly _scrollRef = createRef<HTMLDivElement>();\n  /** Distinct elements seen in `events`, recomputed only when `events` changes\n   *  (not on every render driven by selection/filter/regex state). */\n  private _elementsCache: Array<{id: number; tag: string}> = [];\n\n  override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('events')) {\n      this._elementsCache = this._computeElements();\n      // Drop a stale element filter when its element is no longer in the events\n      // (e.g. after Clear), otherwise the list would silently show nothing.\n      if (\n        this._elementFilter !== null &&\n        !this.events.some((ev) => ev.meta?.elementId === this._elementFilter)\n      ) {\n        this._elementFilter = null;\n      }\n    }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('events')) {\n      const el = this._scrollRef.value;\n      if (el) el.scrollTop = el.scrollHeight;\n    }\n  }\n\n  private _colorOf(layerId: string): string {\n    const l = this.layers.find((l) => l.id === layerId);\n    if (!l) return '#888';\n    return '#' + l.color.toString(16).padStart(6, '0');\n  }\n\n  private _isVisible(ev: TimelineEvent): boolean {\n    const l = this.layers.find((l) => l.id === ev.layerId);\n    if (l && !l.enabled) return false;\n    if (\n      this._elementFilter !== null &&\n      ev.meta?.elementId !== this._elementFilter\n    ) {\n      return false;\n    }\n    return true;\n  }\n\n  /** Distinct elements (by stable id) seen across the recorded events. */\n  private _computeElements(): Array<{id: number; tag: string}> {\n    const seen = new Map<number, string>();\n    for (const ev of this.events) {\n      const id = ev.meta?.elementId;\n      if (id != null && !seen.has(id)) {\n        seen.set(id, ev.meta?.tagName ?? 'unknown');\n      }\n    }\n    return [...seen].map(([id, tag]) => ({id, tag}));\n  }\n\n  private _onFilterChange(e: Event) {\n    const v = (e.target as HTMLSelectElement).value;\n    this._elementFilter = v === '' ? null : Number(v);\n  }\n\n  /** Ask the panel shell to open the Components tab on this element. */\n  private _inspect(id: number) {\n    this.dispatchEvent(\n      new CustomEvent('inspect-element', {\n        detail: {id},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _onRegexInput(e: Event) {\n    this._regex = (e.target as HTMLInputElement).value;\n  }\n\n  /** Text searched by the regex filter — element tag, title and subtitle. */\n  private _haystack(ev: TimelineEvent): string {\n    return `${ev.meta?.tagName ?? ''} ${ev.title ?? ''} ${ev.subtitle ?? ''}`;\n  }\n\n  override render() {\n    const elements = this._elementsCache;\n    // Compile the regex once per render; invalid patterns disable the filter\n    // (rather than hiding everything) and flag the input.\n    let re: RegExp | null = null;\n    let regexInvalid = false;\n    if (this._regex !== '') {\n      try {\n        re = new RegExp(this._regex, 'i');\n      } catch {\n        regexInvalid = true;\n      }\n    }\n    const visible = this.events.filter(\n      (ev) =>\n        this._isVisible(ev) && (re === null || re.test(this._haystack(ev)))\n    );\n    return html`\n      ${this.events.length > 0\n        ? html`\n            <div class=\"filterbar\">\n              ${elements.length > 0\n                ? html`\n                    <span>Element:</span>\n                    <select @change=${this._onFilterChange}>\n                      <option\n                        value=\"\"\n                        ?selected=${this._elementFilter === null}\n                      >\n                        All elements\n                      </option>\n                      ${elements.map(\n                        (el) => html`\n                          <option\n                            value=${el.id}\n                            ?selected=${this._elementFilter === el.id}\n                          >\n                            &lt;${el.tag}&gt; #${el.id}\n                          </option>\n                        `\n                      )}\n                    </select>\n                  `\n                : nothing}\n              <input\n                class=\"regex ${regexInvalid ? 'invalid' : ''}\"\n                type=\"text\"\n                spellcheck=\"false\"\n                placeholder=\"filter regex…\"\n                title=\"Case-insensitive regex matched against element tag, title and subtitle\"\n                .value=${this._regex}\n                @input=${this._onRegexInput}\n              />\n              <span class=\"count\"\n                >${visible.length} / ${this.events.length}</span\n              >\n            </div>\n          `\n        : nothing}\n      <div class=\"scroll\" ${ref(this._scrollRef)}>\n        ${visible.length === 0\n          ? html`\n              <div class=\"empty\">\n                <span>No events recorded.</span>\n                <span class=\"hint\"\n                  >Press Record then interact with the page.</span\n                >\n              </div>\n            `\n          : repeat(\n              visible,\n              (ev) => ev,\n              (ev) => html`\n                <div\n                  class=\"row ${this._selected === ev ? 'selected' : ''}\"\n                  @click=${() => {\n                    this._selected = ev;\n                  }}\n                >\n                  <span class=\"time\">${ev.time.toFixed(1)}ms</span>\n                  <span\n                    class=\"dot\"\n                    style=${'background:' + this._colorOf(ev.layerId)}\n                  ></span>\n                  <span class=\"title\">${ev.title ?? ev.layerId}</span>\n                  <span class=\"subtitle\">${ev.subtitle ?? nothing}</span>\n                </div>\n              `\n            )}\n      </div>\n      ${this._selected ? this._renderDetail(this._selected) : nothing}\n    `;\n  }\n\n  private _renderDetail(ev: TimelineEvent) {\n    const {meta} = ev;\n    const src = meta?.source;\n    return html`\n      <div class=\"detail\">\n        <table>\n          <tr>\n            <td class=\"key\">layer</td>\n            <td class=\"val\">${ev.layerId}</td>\n          </tr>\n          <tr>\n            <td class=\"key\">time</td>\n            <td class=\"val\">${ev.time.toFixed(3)} ms</td>\n          </tr>\n          ${meta?.tagName\n            ? html`<tr>\n                <td class=\"key\">element</td>\n                <td class=\"val\">\n                  &lt;${meta.tagName}&gt; #${meta.elementId}\n                  ${meta.elementId != null\n                    ? html`<a\n                          class=\"filter-link\"\n                          @click=${() => {\n                            this._elementFilter = meta.elementId!;\n                          }}\n                          >filter</a\n                        ><a\n                          class=\"filter-link\"\n                          title=\"Open this element in the Components tab\"\n                          @click=${() => this._inspect(meta.elementId!)}\n                          >inspect</a\n                        >`\n                    : nothing}\n                </td>\n              </tr>`\n            : nothing}\n          ${src\n            ? html`<tr>\n                <td class=\"key\">source</td>\n                <td class=\"val\">\n                  <a\n                    href=${'/__lit-open-in-editor?file=' +\n                    encodeURIComponent(src.file) +\n                    '&line=' +\n                    src.line}\n                    target=\"_blank\"\n                    >${src.file}:${src.line}</a\n                  >\n                </td>\n              </tr>`\n            : nothing}\n          ${ev.data != null\n            ? html`<tr>\n                <td class=\"key\">data</td>\n                <td class=\"val\">${JSON.stringify(ev.data)}</td>\n              </tr>`\n            : nothing}\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'timeline-event-list': TimelineEventList;\n  }\n}\n"]}

package/panel/timeline-layers.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { LitElement } from 'lit';
+export interface LayerState {
+    id: string;
+    label: string;
+    color: number;
+    enabled: boolean;
+}
+/** Strip of colored pill toggles — one per timeline layer. */
+export declare class TimelineLayers extends LitElement {
+    static styles: import("lit").CSSResult[];
+    layers: LayerState[];
+    private _toggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'timeline-layers': TimelineLayers;
+    }
+}
+//# sourceMappingURL=timeline-layers.d.ts.map

package/panel/timeline-layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-layers.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/timeline-layers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,8DAA8D;AAC9D,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BA4CpB;IAEuB,MAAM,EAAE,UAAU,EAAE,CAAM;IAEnD,OAAO,CAAC,OAAO;IAUN,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/panel/timeline-layers.js

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { tokens } from '../lib/tokens.js';
+/** Strip of colored pill toggles — one per timeline layer. */
+let TimelineLayers = class TimelineLayers extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.layers = [];
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: flex;
+        gap: var(--lit-devtools-space-2);
+        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
+        border-bottom: 1px solid var(--lit-devtools-border);
+        background: var(--lit-devtools-surface-low);
+        flex-shrink: 0;
+        flex-wrap: wrap;
+      }
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-2);
+        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-4);
+        border-radius: var(--lit-devtools-radius-pill);
+        background: var(--lit-devtools-surface-elevated);
+        border: 1px solid transparent;
+        color: var(--lit-devtools-text-secondary);
+        font-size: var(--lit-devtools-text-2xs);
+        cursor: pointer;
+        user-select: none;
+        transition: opacity var(--lit-devtools-dur-fast)
+          var(--lit-devtools-ease-standard);
+      }
+      button.on {
+        color: var(--lit-devtools-text);
+      }
+      button:hover {
+        background: var(--lit-devtools-surface-hover);
+      }
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        opacity: 0.4;
+      }
+      button.on .dot {
+        opacity: 1;
+      }
+    `,
+    ]; }
+    _toggle(id) {
+        this.dispatchEvent(new CustomEvent('layer-toggle', {
+            detail: { id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `${this.layers.map((l) => html `
+        <button
+          class=${l.enabled ? 'on' : ''}
+          title=${l.enabled ? `Hide ${l.label}` : `Show ${l.label}`}
+          @click=${() => this._toggle(l.id)}
+        >
+          <span
+            class="dot"
+            style=${'background:#' + l.color.toString(16).padStart(6, '0')}
+          ></span>
+          ${l.label}
+        </button>
+      `)}`;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TimelineLayers.prototype, "layers", void 0);
+TimelineLayers = __decorate([
+    customElement('timeline-layers')
+], TimelineLayers);
+export { TimelineLayers };
+//# sourceMappingURL=timeline-layers.js.map

package/panel/timeline-layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-layers.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/timeline-layers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AASxC,8DAA8D;AAEvD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QA+CoB,WAAM,GAAiB,EAAE,CAAC;IA6BrD,CAAC;aA3EiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;KACF,AA5CqB,CA4CpB;IAIM,OAAO,CAAC,EAAU;QACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAe,cAAc,EAAE;YAC5C,MAAM,EAAE,EAAC,EAAE,EAAC;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAC3B,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;kBACrB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;mBAChD,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;;;;oBAIvB,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;YAE9D,CAAC,CAAC,KAAK;;OAEZ,CACF,EAAE,CAAC;IACN,CAAC;;AA5BwB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;8CAA2B;AA/CxC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA4E1B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {tokens} from '../lib/tokens.js';\n\nexport interface LayerState {\n  id: string;\n  label: string;\n  color: number;\n  enabled: boolean;\n}\n\n/** Strip of colored pill toggles — one per timeline layer. */\n@customElement('timeline-layers')\nexport class TimelineLayers extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: flex;\n        gap: var(--lit-devtools-space-2);\n        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);\n        border-bottom: 1px solid var(--lit-devtools-border);\n        background: var(--lit-devtools-surface-low);\n        flex-shrink: 0;\n        flex-wrap: wrap;\n      }\n      button {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-2);\n        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-4);\n        border-radius: var(--lit-devtools-radius-pill);\n        background: var(--lit-devtools-surface-elevated);\n        border: 1px solid transparent;\n        color: var(--lit-devtools-text-secondary);\n        font-size: var(--lit-devtools-text-2xs);\n        cursor: pointer;\n        user-select: none;\n        transition: opacity var(--lit-devtools-dur-fast)\n          var(--lit-devtools-ease-standard);\n      }\n      button.on {\n        color: var(--lit-devtools-text);\n      }\n      button:hover {\n        background: var(--lit-devtools-surface-hover);\n      }\n      .dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        flex-shrink: 0;\n        opacity: 0.4;\n      }\n      button.on .dot {\n        opacity: 1;\n      }\n    `,\n  ];\n\n  @property({type: Array}) layers: LayerState[] = [];\n\n  private _toggle(id: string) {\n    this.dispatchEvent(\n      new CustomEvent<{id: string}>('layer-toggle', {\n        detail: {id},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render() {\n    return html`${this.layers.map(\n      (l) => html`\n        <button\n          class=${l.enabled ? 'on' : ''}\n          title=${l.enabled ? `Hide ${l.label}` : `Show ${l.label}`}\n          @click=${() => this._toggle(l.id)}\n        >\n          <span\n            class=\"dot\"\n            style=${'background:#' + l.color.toString(16).padStart(6, '0')}\n          ></span>\n          ${l.label}\n        </button>\n      `\n    )}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'timeline-layers': TimelineLayers;\n  }\n}\n"]}

package/panel/timeline-view.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { LitElement } from 'lit';
+import './timeline-layers.js';
+import './timeline-event-list.js';
+/**
+ * The Timeline view: records and lists Lit lifecycle / render / input events.
+ * One tab of the DevTools panel shell (\`lit-devtools-panel\`); owns its own event
+ * stream (SSE), recording state and layer toggles so it keeps recording while
+ * other tabs are in front.
+ */
+export declare class TimelineView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _recording;
+    private _events;
+    private _layers;
+    private _es;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _loadStorage;
+    private _saveStorage;
+    private _layersToState;
+    /** POST layer/recording state to the server control endpoint. */
+    private _postControl;
+    private _toggleRecord;
+    private _clear;
+    private _onLayerToggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'timeline-view': TimelineView;
+    }
+}
+//# sourceMappingURL=timeline-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-view.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/timeline-view.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAYlC;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA+CpB;IAEO,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,OAAO,CAGpB;IAEJ,OAAO,CAAC,GAAG,CAA4B;IAE9B,iBAAiB;IAgCjB,oBAAoB;IAU7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,cAAc;IAWtB,iEAAiE;IACjE,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,cAAc;IAQb,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/panel/timeline-view.js

@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { tokens } from '../lib/tokens.js';
+import { TIMELINE_LAYERS } from '../types/timeline.js';
+import './timeline-layers.js';
+import './timeline-event-list.js';
+const LS_KEY = 'lit-devtools-timeline-layers';
+/**
+ * Cap on retained timeline events. The stream is unbounded (the mouse/keyboard
+ * layers can emit at pointer-move rate), so without a cap the buffer — and the
+ * list that re-renders from it — grows for the whole session. Keep the most
+ * recent events; older ones scroll off.
+ */
+const MAX_EVENTS = 5000;
+/**
+ * The Timeline view: records and lists Lit lifecycle / render / input events.
+ * One tab of the DevTools panel shell (\`lit-devtools-panel\`); owns its own event
+ * stream (SSE), recording state and layer toggles so it keeps recording while
+ * other tabs are in front.
+ */
+let TimelineView = class TimelineView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._recording = false;
+        this._events = [];
+        this._layers = TIMELINE_LAYERS.map((l) => ({
+            ...l,
+            enabled: true,
+        }));
+        this._es = null;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-4);
+        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
+        border-bottom: 1px solid var(--lit-devtools-border);
+        background: var(--lit-devtools-surface-low);
+        flex-shrink: 0;
+      }
+      .spacer {
+        flex: 1;
+      }
+      button {
+        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-5);
+        border-radius: var(--lit-devtools-radius-sm);
+        border: 1px solid var(--lit-devtools-border);
+        background: var(--lit-devtools-surface-elevated);
+        color: var(--lit-devtools-text);
+        font-size: var(--lit-devtools-text-2xs);
+        cursor: pointer;
+      }
+      button:hover {
+        background: var(--lit-devtools-surface-hover);
+        border-color: var(--lit-devtools-border-strong);
+      }
+      .record.active {
+        border-color: var(--lit-devtools-error);
+        background: var(--lit-devtools-error-soft);
+        color: var(--lit-devtools-error);
+      }
+      timeline-event-list {
+        flex: 1;
+        overflow: hidden;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._loadStorage();
+        this._es = new EventSource('/__lit-devtools-events');
+        this._es.onmessage = (e) => {
+            if (!this._recording)
+                return;
+            try {
+                const batch = JSON.parse(e.data);
+                if (Array.isArray(batch)) {
+                    const next = [...this._events, ...batch];
+                    this._events =
+                        next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
+                }
+            }
+            catch {
+                // ignore malformed data
+            }
+        };
+        // Custom layers pushed from app code via addTimelineLayer().
+        this._es.addEventListener('layer', (e) => {
+            try {
+                const layer = JSON.parse(e.data);
+                if (layer?.id && !this._layers.some((l) => l.id === layer.id)) {
+                    this._layers = [...this._layers, { ...layer, enabled: true }];
+                }
+            }
+            catch {
+                // ignore
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._es?.close();
+        this._es = null;
+    }
+    // ---------------------------------------------------------------------------
+    // State persistence
+    // ---------------------------------------------------------------------------
+    _loadStorage() {
+        try {
+            const raw = localStorage.getItem(LS_KEY);
+            if (raw !== null) {
+                const saved = JSON.parse(raw);
+                this._layers = this._layers.map((l) => ({
+                    ...l,
+                    enabled: saved[l.id] ?? l.enabled,
+                }));
+            }
+        }
+        catch {
+            // ignore (private/storage unavailable)
+        }
+    }
+    _saveStorage() {
+        try {
+            localStorage.setItem(LS_KEY, JSON.stringify(Object.fromEntries(this._layers.map((l) => [l.id, l.enabled]))));
+        }
+        catch {
+            // ignore
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Server sync
+    // ---------------------------------------------------------------------------
+    _layersToState() {
+        const enabled = (id) => this._layers.find((l) => l.id === id)?.enabled ?? true;
+        return {
+            litLifecycleEnabled: enabled('lit-lifecycle'),
+            litRenderEnabled: enabled('lit-render'),
+            mouseEventEnabled: enabled('mouse'),
+            keyboardEventEnabled: enabled('keyboard'),
+        };
+    }
+    /** POST layer/recording state to the server control endpoint. */
+    _postControl(body) {
+        fetch('/__lit-devtools-control', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        }).catch((err) => {
+            console.warn('[lit-devtools] control POST failed', err);
+        });
+    }
+    // ---------------------------------------------------------------------------
+    // Actions
+    // ---------------------------------------------------------------------------
+    _toggleRecord() {
+        this._recording = !this._recording;
+        // On start, push the current layer enablement together with the recording
+        // flag: the runtime defaults mouse/keyboard capture off, and otherwise only
+        // hears about layers when one is toggled — so those layers wouldn't record
+        // on the first session until the user toggled one. Send the full state so
+        // the runtime matches what the panel shows from the first event.
+        this._postControl(this._recording
+            ? { recording: true, ...this._layersToState() }
+            : { recording: false });
+    }
+    _clear() {
+        this._events = [];
+    }
+    _onLayerToggle(e) {
+        this._layers = this._layers.map((l) => l.id === e.detail.id ? { ...l, enabled: !l.enabled } : l);
+        this._postControl(this._layersToState());
+        this._saveStorage();
+    }
+    render() {
+        return html `
+      <div class="toolbar">
+        <span class="spacer"></span>
+        <button @click=${this._clear}>Clear</button>
+        <button
+          class="record ${this._recording ? 'active' : ''}"
+          @click=${this._toggleRecord}
+        >
+          ${this._recording ? '⏹ Stop' : '▶ Record'}
+        </button>
+      </div>
+      <timeline-layers
+        .layers=${this._layers}
+        @layer-toggle=${this._onLayerToggle}
+      ></timeline-layers>
+      <timeline-event-list
+        .events=${this._events}
+        .layers=${this._layers}
+      ></timeline-event-list>
+    `;
+    }
+};
+__decorate([
+    state()
+], TimelineView.prototype, "_recording", void 0);
+__decorate([
+    state()
+], TimelineView.prototype, "_events", void 0);
+__decorate([
+    state()
+], TimelineView.prototype, "_layers", void 0);
+TimelineView = __decorate([
+    customElement('timeline-view')
+], TimelineView);
+export { TimelineView };
+//# sourceMappingURL=timeline-view.js.map

package/panel/timeline-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-view.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/timeline-view.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 {LitElement, html, css} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\nimport {tokens} from '../lib/tokens.js';\nimport type {TimelineEvent, TimelineLayer} from '../types/timeline.js';\nimport {TIMELINE_LAYERS} from '../types/timeline.js';\nimport type {LayerState} from './timeline-layers.js';\nimport './timeline-layers.js';\nimport './timeline-event-list.js';\n\nconst LS_KEY = 'lit-devtools-timeline-layers';\n\n/**\n * Cap on retained timeline events. The stream is unbounded (the mouse/keyboard\n * layers can emit at pointer-move rate), so without a cap the buffer — and the\n * list that re-renders from it — grows for the whole session. Keep the most\n * recent events; older ones scroll off.\n */\nconst MAX_EVENTS = 5000;\n\n/**\n * The Timeline view: records and lists Lit lifecycle / render / input events.\n * One tab of the DevTools panel shell (\\`lit-devtools-panel\\`); owns its own event\n * stream (SSE), recording state and layer toggles so it keeps recording while\n * other tabs are in front.\n */\n@customElement('timeline-view')\nexport class TimelineView extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        overflow: hidden;\n      }\n      :host([hidden]) {\n        display: none;\n      }\n      .toolbar {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-4);\n        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);\n        border-bottom: 1px solid var(--lit-devtools-border);\n        background: var(--lit-devtools-surface-low);\n        flex-shrink: 0;\n      }\n      .spacer {\n        flex: 1;\n      }\n      button {\n        padding: var(--lit-devtools-space-2) var(--lit-devtools-space-5);\n        border-radius: var(--lit-devtools-radius-sm);\n        border: 1px solid var(--lit-devtools-border);\n        background: var(--lit-devtools-surface-elevated);\n        color: var(--lit-devtools-text);\n        font-size: var(--lit-devtools-text-2xs);\n        cursor: pointer;\n      }\n      button:hover {\n        background: var(--lit-devtools-surface-hover);\n        border-color: var(--lit-devtools-border-strong);\n      }\n      .record.active {\n        border-color: var(--lit-devtools-error);\n        background: var(--lit-devtools-error-soft);\n        color: var(--lit-devtools-error);\n      }\n      timeline-event-list {\n        flex: 1;\n        overflow: hidden;\n      }\n    `,\n  ];\n\n  @state() private _recording = false;\n  @state() private _events: TimelineEvent[] = [];\n  @state() private _layers: LayerState[] = TIMELINE_LAYERS.map((l) => ({\n    ...l,\n    enabled: true,\n  }));\n\n  private _es: EventSource | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._loadStorage();\n    this._es = new EventSource('/__lit-devtools-events');\n    this._es.onmessage = (e: MessageEvent<string>) => {\n      if (!this._recording) return;\n      try {\n        const batch = JSON.parse(e.data) as TimelineEvent[];\n        if (Array.isArray(batch)) {\n          const next = [...this._events, ...batch];\n          this._events =\n            next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;\n        }\n      } catch {\n        // ignore malformed data\n      }\n    };\n    // Custom layers pushed from app code via addTimelineLayer().\n    this._es.addEventListener('layer', (e: Event) => {\n      try {\n        const layer = JSON.parse(\n          (e as MessageEvent<string>).data\n        ) as TimelineLayer;\n        if (layer?.id && !this._layers.some((l) => l.id === layer.id)) {\n          this._layers = [...this._layers, {...layer, enabled: true}];\n        }\n      } catch {\n        // ignore\n      }\n    });\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._es?.close();\n    this._es = null;\n  }\n\n  // ---------------------------------------------------------------------------\n  // State persistence\n  // ---------------------------------------------------------------------------\n\n  private _loadStorage(): void {\n    try {\n      const raw = localStorage.getItem(LS_KEY);\n      if (raw !== null) {\n        const saved = JSON.parse(raw) as Record<string, boolean>;\n        this._layers = this._layers.map((l) => ({\n          ...l,\n          enabled: saved[l.id] ?? l.enabled,\n        }));\n      }\n    } catch {\n      // ignore (private/storage unavailable)\n    }\n  }\n\n  private _saveStorage(): void {\n    try {\n      localStorage.setItem(\n        LS_KEY,\n        JSON.stringify(\n          Object.fromEntries(this._layers.map((l) => [l.id, l.enabled]))\n        )\n      );\n    } catch {\n      // ignore\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Server sync\n  // ---------------------------------------------------------------------------\n\n  private _layersToState(): Record<string, boolean> {\n    const enabled = (id: string): boolean =>\n      this._layers.find((l) => l.id === id)?.enabled ?? true;\n    return {\n      litLifecycleEnabled: enabled('lit-lifecycle'),\n      litRenderEnabled: enabled('lit-render'),\n      mouseEventEnabled: enabled('mouse'),\n      keyboardEventEnabled: enabled('keyboard'),\n    };\n  }\n\n  /** POST layer/recording state to the server control endpoint. */\n  private _postControl(body: Record<string, unknown>): void {\n    fetch('/__lit-devtools-control', {\n      method: 'POST',\n      headers: {'Content-Type': 'application/json'},\n      body: JSON.stringify(body),\n    }).catch((err) => {\n      console.warn('[lit-devtools] control POST failed', err);\n    });\n  }\n\n  // ---------------------------------------------------------------------------\n  // Actions\n  // ---------------------------------------------------------------------------\n\n  private _toggleRecord() {\n    this._recording = !this._recording;\n    // On start, push the current layer enablement together with the recording\n    // flag: the runtime defaults mouse/keyboard capture off, and otherwise only\n    // hears about layers when one is toggled — so those layers wouldn't record\n    // on the first session until the user toggled one. Send the full state so\n    // the runtime matches what the panel shows from the first event.\n    this._postControl(\n      this._recording\n        ? {recording: true, ...this._layersToState()}\n        : {recording: false}\n    );\n  }\n\n  private _clear() {\n    this._events = [];\n  }\n\n  private _onLayerToggle(e: CustomEvent<{id: string}>) {\n    this._layers = this._layers.map((l) =>\n      l.id === e.detail.id ? {...l, enabled: !l.enabled} : l\n    );\n    this._postControl(this._layersToState());\n    this._saveStorage();\n  }\n\n  override render() {\n    return html`\n      <div class=\"toolbar\">\n        <span class=\"spacer\"></span>\n        <button @click=${this._clear}>Clear</button>\n        <button\n          class=\"record ${this._recording ? 'active' : ''}\"\n          @click=${this._toggleRecord}\n        >\n          ${this._recording ? '⏹ Stop' : '▶ Record'}\n        </button>\n      </div>\n      <timeline-layers\n        .layers=${this._layers}\n        @layer-toggle=${this._onLayerToggle}\n      ></timeline-layers>\n      <timeline-event-list\n        .events=${this._events}\n        .layers=${this._layers}\n      ></timeline-event-list>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'timeline-view': TimelineView;\n  }\n}\n"]}

package/types/inspector.d.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Shared types and channel/path constants for the Components inspector.
+ *
+ * The inspector lets the DevTools panel show a hierarchical tree of the Lit
+ * components on the page plus a detail view (reactive properties, internal
+ * state, attributes, source) of a selected element. The panel can't touch the
+ * page DOM directly (separate iframe document), so everything flows over the
+ * existing transport: panel → server (POST {@link INSPECT_PATH}) → app runtime
+ * (HMR {@link INSPECT_CMD_CHANNEL}); app → server (HMR
+ * {@link INSPECT_DATA_CHANNEL}) → panel (SSE `event: {@link INSPECT_SSE_EVENT}`).
+ *
+ * Elements are referenced across the boundary by the stable numeric id from the
+ * timeline's `idOf()` WeakMap, so a tree node, a details payload, and an
+ * inspector pick all agree on identity.
+ */
+export interface ElementSource {
+    file: string;
+    line: number;
+}
+/** A node in the component render tree (one inspectable Lit element). */
+export interface InspectorTreeNode {
+    id: number;
+    tagName: string;
+    componentName?: string;
+    source?: ElementSource;
+    children: InspectorTreeNode[];
+}
+/** One reactive property (or internal `@state`) of an inspected element. */
+export interface InspectorProp {
+    name: string;
+    /** Serialized, depth-limited preview of the current value. */
+    value: string;
+    /** A short type tag (`string`, `number`, `Array(3)`, `MyClass`, …). */
+    type: string;
+    /** The reflected attribute name, or `false` when `attribute: false`. */
+    attribute: string | false;
+    /** Whether the property reflects to its attribute. */
+    reflects: boolean;
+    /** Whether it's an internal `@state()` (no public attribute). */
+    state: boolean;
+}
+/** Full detail snapshot for a single inspected element. */
+export interface InspectorDetails {
+    id: number;
+    tagName: string;
+    componentName?: string;
+    source?: ElementSource;
+    attributes: Array<{
+        name: string;
+        value: string;
+    }>;
+    properties: InspectorProp[];
+    flags: {
+        hasUpdated: boolean;
+        isUpdatePending: boolean;
+        hasShadowRoot: boolean;
+    };
+}
+/** App runtime → panel messages, carried on SSE `event: inspect`. */
+export type InspectorMessage = 
+/** The runtime came online; the panel should (re)request the tree. */
+{
+    type: 'ready';
+} | {
+    type: 'tree';
+    roots: InspectorTreeNode[];
+} | {
+    type: 'details';
+    details: InspectorDetails;
+}
+/** The requested element id couldn't be resolved (removed / GC'd). */
+ | {
+    type: 'gone';
+    id: number;
+}
+/** An inspect-mode overlay pick — select this element in the panel. */
+ | {
+    type: 'pick';
+    id: number;
+};
+/** Panel → app runtime commands, POSTed to {@link INSPECT_PATH}. */
+export type InspectorCommand = {
+    type: 'tree';
+} | {
+    type: 'details';
+    id: number;
+}
+/** Keep pushing fresh details for `id` as it updates; `null` stops. */
+ | {
+    type: 'watch';
+    id: number | null;
+}
+/** Outline element `id` in the page on tree hover; `null` clears it. */
+ | {
+    type: 'highlight';
+    id: number | null;
+}
+/**
+ * Opt-in live tree: when enabled, the runtime watches the DOM and pushes a
+ * fresh `tree` message whenever the component hierarchy changes. Off by
+ * default (the panel otherwise refreshes on demand / on pick).
+ */
+ | {
+    type: 'observe';
+    enabled: boolean;
+}
+/**
+ * Start the overlay's inspect-mode picker (the panel's "Pick" button). Handled
+ * by the server (it broadcasts {@link INSPECT_OVERLAY_TOGGLE_CHANNEL}), not the
+ * app runtime, so it never reaches the runtime's command handler.
+ */
+ | {
+    type: 'pick';
+};
+/** HMR channel the server uses to forward a panel command to the app runtime. */
+export declare const INSPECT_CMD_CHANNEL = "lit:inspect:cmd";
+/** HMR channel the app runtime uses to push an {@link InspectorMessage}. */
+export declare const INSPECT_DATA_CHANNEL = "lit:inspect:data";
+/** Vite HMR channel the DevTools "inspect element" command broadcasts on. */
+export declare const INSPECT_OVERLAY_TOGGLE_CHANNEL = "lit-devtools:toggle-inspect";
+/** POST endpoint the panel uses to send an {@link InspectorCommand}. */
+export declare const INSPECT_PATH = "/__lit-devtools-inspect";
+/** Named SSE event the server relays {@link InspectorMessage}s to the panel on. */
+export declare const INSPECT_SSE_EVENT = "inspect";
+//# sourceMappingURL=inspector.d.ts.map

package/types/inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/types/inspector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,yEAAyE;AACzE,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,4EAA4E;AAC5E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,2DAA2D;AAC3D,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACjD,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,KAAK,EAAE;QACL,UAAU,EAAE,OAAO,CAAC;QACpB,eAAe,EAAE,OAAO,CAAC;QACzB,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,qEAAqE;AACrE,MAAM,MAAM,gBAAgB;AAC1B,sEAAsE;AACpE;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,GACf;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAAC,GAC1C;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,gBAAgB,CAAA;CAAC;AAC9C,sEAAsE;GACpE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAC;AAC5B,uEAAuE;GACrE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAC,CAAC;AAE/B,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GACxB;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GACd;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAC;AAC/B,uEAAuE;GACrE;IAAC,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;CAAC;AACpC,wEAAwE;GACtE;IAAC,IAAI,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;CAAC;AACxC;;;;GAIG;GACD;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAC;AACrC;;;;GAIG;GACD;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAC;AAEnB,iFAAiF;AACjF,eAAO,MAAM,mBAAmB,oBAAoB,CAAC;AAErD,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,6EAA6E;AAC7E,eAAO,MAAM,8BAA8B,gCAAgC,CAAC;AAE5E,wEAAwE;AACxE,eAAO,MAAM,YAAY,4BAA4B,CAAC;AAEtD,mFAAmF;AACnF,eAAO,MAAM,iBAAiB,YAAY,CAAC"}

package/types/inspector.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/** HMR channel the server uses to forward a panel command to the app runtime. */
+export const INSPECT_CMD_CHANNEL = 'lit:inspect:cmd';
+/** HMR channel the app runtime uses to push an {@link InspectorMessage}. */
+export const INSPECT_DATA_CHANNEL = 'lit:inspect:data';
+/** Vite HMR channel the DevTools "inspect element" command broadcasts on. */
+export const INSPECT_OVERLAY_TOGGLE_CHANNEL = 'lit-devtools:toggle-inspect';
+/** POST endpoint the panel uses to send an {@link InspectorCommand}. */
+export const INSPECT_PATH = '/__lit-devtools-inspect';
+/** Named SSE event the server relays {@link InspectorMessage}s to the panel on. */
+export const INSPECT_SSE_EVENT = 'inspect';
+//# sourceMappingURL=inspector.js.map