@oddsquad/vite-plugin-lit 0.2.3 → 0.3.0

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

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

@@ -1,25 +0,0 @@
-/**
- * @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

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

@@ -1,96 +0,0 @@
-/**
- * @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

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

@@ -1,38 +0,0 @@
-/**
- * @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

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

@@ -1,234 +0,0 @@
-/**
- * @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

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