@oddsquad/vite-plugin-lit 0.2.3 → 0.4.0

package/panel/lit-devtools-panel.js

@@ -1,185 +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, nothing } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
-import { tokens, injectTokens } from '../lib/tokens.js';
-import { applyColorScheme, readColorSchemePreference, } from '../lib/color-scheme.js';
-import './timeline-view.js';
-// Install the shared design tokens on the panel iframe's :root before the
-// views render. Panel components inherit the semantic aliases from :root.
-// The panel owns this document, so it also declares `color-scheme` (host-page
-// injections must not — see `injectTokens`).
-injectTokens({ colorScheme: true });
-// Own the color-scheme class once the panel module is live: re-assert the
-// saved preference (the Settings tab mounts lazily, so it can't). `auto` needs
-// no JS — the tokens' `prefers-color-scheme` @media rule resolves it live.
-applyColorScheme(readColorSchemePreference());
-import './components-view.js';
-import './devtools-settings.js';
-import '../lib/segmented-tabs.js';
-import { CUBE_ICON, CLOCK_ICON, GEAR_ICON } from '../lib/icons.js';
-/**
- * Tabs hosted by the panel. The Timeline is the first; this list is the
- * extension point for future Lit DevTools views.
- */
-const TABS = [
-    { id: 'components', label: 'Components', icon: CUBE_ICON },
-    { id: 'timeline', label: 'Timeline', icon: CLOCK_ICON },
-    { id: 'settings', label: 'Settings', icon: GEAR_ICON },
-];
-/** Inline Lit logo mark. */
-const LIT_LOGO_SVG = html `<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="-32 0 320 320"
-  width="20"
-  height="20"
-  aria-hidden="true"
->
-  <path
-    fill="#00e8ff"
-    d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"
-  />
-  <path
-    fill="#283198"
-    d="M128 256V128l64-64v128zM0 256l64 64l9.202-60.602L64 192l-37.542 23.71z"
-  />
-  <path
-    fill="#324fff"
-    d="M64 192V64l64-64v128zm128 128V192l64-64v128zM0 256V128l64 64z"
-  />
-  <path fill="#0ff" d="M64 320V192l64 64z" />
-</svg>`;
-/**
- * Root of the Lit DevTools panel — a tabbed shell. Each tab's view is kept
- * mounted and merely hidden when inactive, so the Timeline keeps recording
- * (and holds its events) while another tab is in front.
- */
-let LitDevtoolsPanel = class LitDevtoolsPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._tab = 'components';
-    }
-    static { this.styles = [
-        tokens,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-        font-family: var(--lit-devtools-font-sans);
-        font-size: var(--lit-devtools-text-sm);
-        background: var(--lit-devtools-bg);
-        color: var(--lit-devtools-text);
-        overflow: hidden;
-      }
-      header {
-        display: flex;
-        align-items: center;
-        gap: var(--lit-devtools-space-6);
-        padding: 0 var(--lit-devtools-space-5);
-        border-bottom: 1px solid var(--lit-devtools-border);
-        background: var(--lit-devtools-surface-low);
-        flex-shrink: 0;
-      }
-      .brand {
-        display: flex;
-        align-items: center;
-        gap: var(--lit-devtools-space-4);
-        color: var(--lit-devtools-text-strong);
-        font-weight: var(--lit-devtools-weight-bold);
-        font-size: var(--lit-devtools-text-xs);
-        letter-spacing: var(--lit-devtools-tracking-caps);
-        text-transform: uppercase;
-        padding: var(--lit-devtools-space-5) 0;
-      }
-      .brand svg {
-        display: block;
-      }
-      .view {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-      }
-    `,
-    ]; }
-    _onTabChange(e) {
-        this._tab = e.detail.value;
-    }
-    /** A timeline event's "inspect" link — open the Components tab on it. */
-    _onInspectElement(e) {
-        this._tab = 'components';
-        // The view is always mounted, so it can select without waiting for render.
-        this._componentsView?.selectById(e.detail.id);
-    }
-    /**
-     * A component was picked via the overlay inspector — switch to the Components
-     * tab and request the parent DevTools shell to bring this dock entry to the
-     * front, so the user can see the picked element without having to manually
-     * open the Lit panel first.
-     */
-    _onInspectorActivate() {
-        this._tab = 'components';
-        // The panel iframe is same-origin with the Vite DevTools shell — the
-        // parent exposes its DevTools client context on
-        // window.__VITE_DEVTOOLS_CLIENT_CONTEXT__ (set by @vitejs/devtools's
-        // inject.ts). Ask it to select the Lit dock entry so the panel becomes
-        // visible.
-        try {
-            const parent = window.parent;
-            if (parent &&
-                parent !== window &&
-                '__VITE_DEVTOOLS_CLIENT_CONTEXT__' in parent) {
-                const ctx = parent.__VITE_DEVTOOLS_CLIENT_CONTEXT__;
-                ctx?.docks?.switchEntry?.('lit-devtools');
-            }
-        }
-        catch {
-            // Cross-origin or not running inside the DevTools shell — ignore.
-        }
-    }
-    render() {
-        return html `
-      <header>
-        <span class="brand">${LIT_LOGO_SVG} Lit DevTools</span>
-        <segmented-tabs
-          .items=${TABS}
-          .value=${this._tab}
-          @change=${this._onTabChange}
-        ></segmented-tabs>
-      </header>
-      <div class="view" @inspect-element=${this._onInspectElement}>
-        <timeline-view ?hidden=${this._tab !== 'timeline'}></timeline-view>
-        <!-- Kept mounted (like the timeline) so an overlay inspect-pick can
-             arrive and switch us here even while another tab is in front. -->
-        <components-view
-          ?hidden=${this._tab !== 'components'}
-          @inspector-activate=${this._onInspectorActivate}
-        ></components-view>
-        ${this._tab === 'settings'
-            ? html `<devtools-settings></devtools-settings>`
-            : nothing}
-      </div>
-    `;
-    }
-};
-__decorate([
-    state()
-], LitDevtoolsPanel.prototype, "_tab", void 0);
-__decorate([
-    query('components-view')
-], LitDevtoolsPanel.prototype, "_componentsView", void 0);
-LitDevtoolsPanel = __decorate([
-    customElement('lit-devtools-panel')
-], LitDevtoolsPanel);
-export { LitDevtoolsPanel };
-//# sourceMappingURL=lit-devtools-panel.js.map

package/panel/lit-devtools-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lit-devtools-panel.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/lit-devtools-panel.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, query, state} from 'lit/decorators.js';\nimport {tokens, injectTokens} from '../lib/tokens.js';\nimport {\n  applyColorScheme,\n  readColorSchemePreference,\n} from '../lib/color-scheme.js';\nimport './timeline-view.js';\n\n// Install the shared design tokens on the panel iframe's :root before the\n// views render. Panel components inherit the semantic aliases from :root.\n// The panel owns this document, so it also declares `color-scheme` (host-page\n// injections must not — see `injectTokens`).\ninjectTokens({colorScheme: true});\n// Own the color-scheme class once the panel module is live: re-assert the\n// saved preference (the Settings tab mounts lazily, so it can't). `auto` needs\n// no JS — the tokens' `prefers-color-scheme` @media rule resolves it live.\napplyColorScheme(readColorSchemePreference());\nimport './components-view.js';\nimport type {ComponentsView} from './components-view.js';\nimport './devtools-settings.js';\nimport '../lib/segmented-tabs.js';\nimport type {TabItem} from '../lib/segmented-tabs.js';\nimport {CUBE_ICON, CLOCK_ICON, GEAR_ICON} from '../lib/icons.js';\n\n/**\n * Tabs hosted by the panel. The Timeline is the first; this list is the\n * extension point for future Lit DevTools views.\n */\nconst TABS: readonly TabItem[] = [\n  {id: 'components', label: 'Components', icon: CUBE_ICON},\n  {id: 'timeline', label: 'Timeline', icon: CLOCK_ICON},\n  {id: 'settings', label: 'Settings', icon: GEAR_ICON},\n];\n\n/** Inline Lit logo mark. */\nconst LIT_LOGO_SVG = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"-32 0 320 320\"\n  width=\"20\"\n  height=\"20\"\n  aria-hidden=\"true\"\n>\n  <path\n    fill=\"#00e8ff\"\n    d=\"m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z\"\n  />\n  <path\n    fill=\"#283198\"\n    d=\"M128 256V128l64-64v128zM0 256l64 64l9.202-60.602L64 192l-37.542 23.71z\"\n  />\n  <path\n    fill=\"#324fff\"\n    d=\"M64 192V64l64-64v128zm128 128V192l64-64v128zM0 256V128l64 64z\"\n  />\n  <path fill=\"#0ff\" d=\"M64 320V192l64 64z\" />\n</svg>`;\n\n/**\n * Root of the Lit DevTools panel — a tabbed shell. Each tab's view is kept\n * mounted and merely hidden when inactive, so the Timeline keeps recording\n * (and holds its events) while another tab is in front.\n */\n@customElement('lit-devtools-panel')\nexport class LitDevtoolsPanel extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100vh;\n        font-family: var(--lit-devtools-font-sans);\n        font-size: var(--lit-devtools-text-sm);\n        background: var(--lit-devtools-bg);\n        color: var(--lit-devtools-text);\n        overflow: hidden;\n      }\n      header {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-6);\n        padding: 0 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      .brand {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-4);\n        color: var(--lit-devtools-text-strong);\n        font-weight: var(--lit-devtools-weight-bold);\n        font-size: var(--lit-devtools-text-xs);\n        letter-spacing: var(--lit-devtools-tracking-caps);\n        text-transform: uppercase;\n        padding: var(--lit-devtools-space-5) 0;\n      }\n      .brand svg {\n        display: block;\n      }\n      .view {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        overflow: hidden;\n      }\n    `,\n  ];\n\n  @state() private _tab = 'components';\n\n  @query('components-view') private _componentsView?: ComponentsView;\n\n  private _onTabChange(e: CustomEvent<{value: string}>) {\n    this._tab = e.detail.value;\n  }\n\n  /** A timeline event's \"inspect\" link — open the Components tab on it. */\n  private _onInspectElement(e: CustomEvent<{id: number}>) {\n    this._tab = 'components';\n    // The view is always mounted, so it can select without waiting for render.\n    this._componentsView?.selectById(e.detail.id);\n  }\n\n  /**\n   * A component was picked via the overlay inspector — switch to the Components\n   * tab and request the parent DevTools shell to bring this dock entry to the\n   * front, so the user can see the picked element without having to manually\n   * open the Lit panel first.\n   */\n  private _onInspectorActivate() {\n    this._tab = 'components';\n    // The panel iframe is same-origin with the Vite DevTools shell — the\n    // parent exposes its DevTools client context on\n    // window.__VITE_DEVTOOLS_CLIENT_CONTEXT__ (set by @vitejs/devtools's\n    // inject.ts). Ask it to select the Lit dock entry so the panel becomes\n    // visible.\n    try {\n      const parent = window.parent;\n      if (\n        parent &&\n        parent !== window &&\n        '__VITE_DEVTOOLS_CLIENT_CONTEXT__' in parent\n      ) {\n        const ctx = (\n          parent as unknown as Record<\n            string,\n            | undefined\n            | {docks?: {switchEntry?: (id: string) => Promise<boolean>}}\n          >\n        ).__VITE_DEVTOOLS_CLIENT_CONTEXT__;\n        ctx?.docks?.switchEntry?.('lit-devtools');\n      }\n    } catch {\n      // Cross-origin or not running inside the DevTools shell — ignore.\n    }\n  }\n\n  override render() {\n    return html`\n      <header>\n        <span class=\"brand\">${LIT_LOGO_SVG} Lit DevTools</span>\n        <segmented-tabs\n          .items=${TABS}\n          .value=${this._tab}\n          @change=${this._onTabChange}\n        ></segmented-tabs>\n      </header>\n      <div class=\"view\" @inspect-element=${this._onInspectElement}>\n        <timeline-view ?hidden=${this._tab !== 'timeline'}></timeline-view>\n        <!-- Kept mounted (like the timeline) so an overlay inspect-pick can\n             arrive and switch us here even while another tab is in front. -->\n        <components-view\n          ?hidden=${this._tab !== 'components'}\n          @inspector-activate=${this._onInspectorActivate}\n        ></components-view>\n        ${this._tab === 'settings'\n          ? html`<devtools-settings></devtools-settings>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-devtools-panel': LitDevtoolsPanel;\n  }\n}\n"]}

package/panel/timeline-event-list.d.ts

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-import { LitElement } from 'lit';
-import type { TimelineEvent } from '../types/timeline.js';
-import type { LayerState } from './timeline-layers.js';
-/** Scrollable list of recorded timeline events with an inline detail pane. */
-export declare class TimelineEventList extends LitElement {
-    static styles: import("lit").CSSResult[];
-    events: TimelineEvent[];
-    layers: LayerState[];
-    private _selected;
-    /** Element id to filter the list to, or null for all elements. */
-    private _elementFilter;
-    /** Case-insensitive regex (source text) matched against tag/title/subtitle. */
-    private _regex;
-    private readonly _scrollRef;
-    /** Distinct elements seen in `events`, recomputed only when `events` changes
-     *  (not on every render driven by selection/filter/regex state). */
-    private _elementsCache;
-    willUpdate(changed: Map<string, unknown>): void;
-    updated(changed: Map<string, unknown>): void;
-    private _colorOf;
-    private _isVisible;
-    /** Distinct elements (by stable id) seen across the recorded events. */
-    private _computeElements;
-    private _onFilterChange;
-    /** Ask the panel shell to open the Components tab on this element. */
-    private _inspect;
-    private _onRegexInput;
-    /** Text searched by the regex filter — element tag, title and subtitle. */
-    private _haystack;
-    render(): import("lit-html").TemplateResult<1>;
-    private _renderDetail;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'timeline-event-list': TimelineEventList;
-    }
-}
-//# sourceMappingURL=timeline-event-list.d.ts.map

package/panel/timeline-event-list.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeline-event-list.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/timeline-event-list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAKnD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAErD,8EAA8E;AAC9E,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAwJpB;IAEuB,MAAM,EAAE,aAAa,EAAE,CAAM;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAM;IAC1C,OAAO,CAAC,SAAS,CAA8B;IACxD,kEAAkE;IACzD,OAAO,CAAC,cAAc,CAAuB;IACtD,+EAA+E;IACtE,OAAO,CAAC,MAAM,CAAM;IAE7B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA+B;IAC1D;wEACoE;IACpE,OAAO,CAAC,cAAc,CAAwC;IAErD,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAcxC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAYlB,wEAAwE;IACxE,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,eAAe;IAKvB,sEAAsE;IACtE,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,aAAa;IAIrB,2EAA2E;IAC3E,OAAO,CAAC,SAAS;IAIR,MAAM;IA8Ff,OAAO,CAAC,aAAa;CA6DtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/panel/timeline-event-list.js

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