@oddsquad/vite-plugin-lit 0.2.3 → 0.4.0

package/panel/components-view.js

@@ -1,587 +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, state } from 'lit/decorators.js';
-import { tokens } from '../lib/tokens.js';
-import { INSPECT_PATH, INSPECT_SSE_EVENT, } from '../types/inspector.js';
-/** localStorage key remembering the opt-in live-tree toggle. */
-const LIVE_LS_KEY = 'lit-devtools-components-live';
-/**
- * The Components view: a hierarchical tree of the page's Lit elements (left)
- * and a details pane for the selected one (right). A tab of the DevTools panel
- * shell (\`lit-devtools-panel\`).
- *
- * It can't touch the page DOM directly (separate iframe), so it drives the
- * page's inspector runtime over the transport: it POSTs {@link InspectorCommand}s
- * to {@link INSPECT_PATH} and receives {@link InspectorMessage}s on the shared
- * SSE stream's `inspect` event. An overlay inspect-pick arrives as a `pick`
- * message; the view selects that node and asks its host to switch to this tab.
- */
-let ComponentsView = class ComponentsView extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._roots = [];
-        this._selectedId = null;
-        this._details = null;
-        /** True when the selected element is no longer in the page (removed / GC'd). */
-        this._gone = false;
-        this._expanded = new Set();
-        this._picking = false;
-        /** Opt-in live tree (MutationObserver in the page); persisted, default off. */
-        this._live = false;
-        this._es = null;
-        /** Refresh the tree (and re-arm watch / live mode) once the SSE connects. */
-        this._onOpen = () => {
-            this._post({ type: 'tree' });
-            if (this._selectedId !== null) {
-                this._post({ type: 'watch', id: this._selectedId });
-            }
-            if (this._live)
-                this._post({ type: 'observe', enabled: true });
-        };
-        this._onMessage = (e) => {
-            let msg;
-            try {
-                msg = JSON.parse(e.data);
-            }
-            catch {
-                return;
-            }
-            switch (msg.type) {
-                case 'ready':
-                    // Runtime (re)connected — refresh the tree and re-arm any selection.
-                    this._post({ type: 'tree' });
-                    if (this._selectedId !== null) {
-                        this._post({ type: 'watch', id: this._selectedId });
-                    }
-                    break;
-                case 'tree':
-                    this._roots = msg.roots;
-                    // Re-reveal the selection against the fresh tree: a just-picked node may
-                    // not have existed in the previous _roots, so the reveal in _select()
-                    // found no ancestors to expand and the node stayed hidden.
-                    if (this._selectedId !== null) {
-                        this._revealAncestors(this._selectedId);
-                    }
-                    break;
-                case 'details':
-                    if (msg.details.id === this._selectedId) {
-                        this._details = msg.details;
-                        this._gone = false;
-                    }
-                    break;
-                case 'gone':
-                    if (msg.id === this._selectedId) {
-                        this._details = null;
-                        this._gone = true;
-                    }
-                    break;
-                case 'pick':
-                    this._picking = false;
-                    this._select(msg.id);
-                    // Bring this tab to the front so the pick is visible.
-                    this.dispatchEvent(new CustomEvent('inspector-activate', { bubbles: true, composed: true }));
-                    break;
-            }
-        };
-    }
-    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);
-      }
-      button.pick.active,
-      button.live.active {
-        border-color: var(--lit-devtools-accent);
-        background: var(--lit-devtools-accent-soft);
-        color: var(--lit-devtools-accent);
-      }
-      button:disabled {
-        opacity: 0.4;
-        cursor: default;
-      }
-      .body {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-      }
-      .tree {
-        flex: 1;
-        overflow: auto;
-        padding: var(--lit-devtools-space-2) 0;
-        min-width: 0;
-      }
-      .empty {
-        padding: var(--lit-devtools-space-6);
-        color: var(--lit-devtools-text-muted);
-        font-size: var(--lit-devtools-text-xs);
-      }
-      .row {
-        display: flex;
-        align-items: center;
-        gap: var(--lit-devtools-space-2);
-        padding: 1px var(--lit-devtools-space-5);
-        white-space: nowrap;
-        cursor: pointer;
-        font-family: var(--lit-devtools-font-mono);
-        font-size: var(--lit-devtools-text-xs);
-        line-height: 18px;
-      }
-      .row:hover {
-        background: var(--lit-devtools-surface-hover);
-      }
-      .row.selected {
-        background: var(--lit-devtools-surface-active);
-      }
-      .twisty {
-        width: 12px;
-        text-align: center;
-        color: var(--lit-devtools-text-muted);
-        flex-shrink: 0;
-      }
-      .twisty.leaf {
-        visibility: hidden;
-      }
-      .tag {
-        color: var(--lit-devtools-accent);
-      }
-      .tag .punct {
-        color: var(--lit-devtools-text-muted);
-      }
-      .details {
-        width: 340px;
-        flex-shrink: 0;
-        border-left: 1px solid var(--lit-devtools-border);
-        overflow: auto;
-        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-5);
-        font-size: var(--lit-devtools-text-xs);
-      }
-      .details h2 {
-        font-size: var(--lit-devtools-text-xs);
-        font-family: var(--lit-devtools-font-mono);
-        color: var(--lit-devtools-accent);
-        margin: 0 0 var(--lit-devtools-space-1);
-      }
-      .src {
-        background: none;
-        border: 0;
-        padding: 0;
-        color: var(--lit-devtools-text-link);
-        font-size: var(--lit-devtools-text-2xs);
-        cursor: pointer;
-        text-decoration: underline;
-        word-break: break-all;
-        text-align: left;
-      }
-      section {
-        margin-top: var(--lit-devtools-space-5);
-      }
-      section > .label {
-        text-transform: uppercase;
-        letter-spacing: var(--lit-devtools-tracking-caps);
-        font-size: var(--lit-devtools-text-2xs);
-        color: var(--lit-devtools-text-muted);
-        margin-bottom: var(--lit-devtools-space-2);
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        font-family: var(--lit-devtools-font-mono);
-      }
-      td {
-        padding: 2px var(--lit-devtools-space-4) 2px 0;
-        vertical-align: top;
-        word-break: break-word;
-      }
-      td.name {
-        color: var(--lit-devtools-text);
-        white-space: nowrap;
-      }
-      td.val {
-        color: var(--lit-devtools-warning);
-        width: 100%;
-      }
-      .badge {
-        display: inline-block;
-        margin-left: var(--lit-devtools-space-2);
-        padding: 0 var(--lit-devtools-space-2);
-        border-radius: var(--lit-devtools-radius-xs);
-        font-size: 9px;
-        background: var(--lit-devtools-surface-elevated);
-        color: var(--lit-devtools-text-secondary);
-        vertical-align: middle;
-      }
-      .flags {
-        display: flex;
-        gap: var(--lit-devtools-space-4);
-        flex-wrap: wrap;
-      }
-      .flag {
-        padding: 1px var(--lit-devtools-space-4);
-        border-radius: var(--lit-devtools-radius-xs);
-        background: var(--lit-devtools-surface-elevated);
-        color: var(--lit-devtools-text-secondary);
-        font-size: var(--lit-devtools-text-2xs);
-      }
-      .flag.on {
-        background: var(--lit-devtools-accent-soft);
-        color: var(--lit-devtools-accent);
-      }
-      .placeholder {
-        color: var(--lit-devtools-text-muted);
-        padding: var(--lit-devtools-space-8) 0;
-        text-align: center;
-      }
-    `,
-    ]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this._live = localStorage.getItem(LIVE_LS_KEY) === 'true';
-        this._es = new EventSource('/__lit-devtools-events');
-        this._es.addEventListener(INSPECT_SSE_EVENT, this._onMessage);
-        // Request only once the stream is open — a command sent before we're
-        // subscribed would have its reply broadcast before we could receive it.
-        this._es.addEventListener('open', this._onOpen);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._es?.removeEventListener(INSPECT_SSE_EVENT, this._onMessage);
-        this._es?.removeEventListener('open', this._onOpen);
-        this._es?.close();
-        this._es = null;
-        this._post({ type: 'watch', id: null });
-        if (this._live)
-            this._post({ type: 'observe', enabled: false });
-    }
-    // ---------------------------------------------------------------------------
-    // Transport
-    // ---------------------------------------------------------------------------
-    _post(cmd) {
-        fetch(INSPECT_PATH, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(cmd),
-        }).catch((err) => {
-            console.warn('[lit-devtools] inspector POST failed', err);
-        });
-    }
-    // ---------------------------------------------------------------------------
-    // Selection / expansion
-    // ---------------------------------------------------------------------------
-    /**
-     * Select an element by id from outside (e.g. a timeline event's "inspect"
-     * link). Same as a tree click; the host is responsible for switching tabs.
-     */
-    selectById(id) {
-        this._select(id);
-    }
-    _select(id) {
-        if (this._selectedId === id)
-            return;
-        if (this._selectedId !== null) {
-            this._post({ type: 'watch', id: null });
-        }
-        this._selectedId = id;
-        this._details = null;
-        this._gone = false;
-        this._revealAncestors(id);
-        this._post({ type: 'tree' }); // refresh in case the picked node is new
-        this._post({ type: 'details', id });
-        this._post({ type: 'watch', id });
-    }
-    /** Expand every ancestor of `id` so the selected node is visible. */
-    _revealAncestors(id) {
-        const path = findAncestors(this._roots, id);
-        if (path === null)
-            return;
-        const next = new Set(this._expanded);
-        for (const ancestorId of path)
-            next.add(ancestorId);
-        this._expanded = next;
-    }
-    _toggleExpand(id) {
-        const next = new Set(this._expanded);
-        if (next.has(id))
-            next.delete(id);
-        else
-            next.add(id);
-        this._expanded = next;
-    }
-    // ---------------------------------------------------------------------------
-    // Actions
-    // ---------------------------------------------------------------------------
-    _refresh() {
-        this._post({ type: 'tree' });
-        if (this._selectedId !== null) {
-            this._post({ type: 'details', id: this._selectedId });
-        }
-    }
-    _togglePick() {
-        this._picking = !this._picking;
-        this._post({ type: 'pick' });
-    }
-    _toggleLive() {
-        this._live = !this._live;
-        try {
-            localStorage.setItem(LIVE_LS_KEY, String(this._live));
-        }
-        catch {
-            // ignore (private/storage unavailable)
-        }
-        this._post({ type: 'observe', enabled: this._live });
-        // Leaving live mode, pull one fresh tree so it doesn't go stale silently.
-        if (!this._live)
-            this._post({ type: 'tree' });
-    }
-    _highlight(id) {
-        this._post({ type: 'highlight', id });
-    }
-    _openSource() {
-        const src = this._details?.source;
-        if (src === undefined)
-            return;
-        const params = new URLSearchParams({
-            file: src.file,
-            line: String(src.line),
-        });
-        fetch(`/__lit-open-in-editor?${params.toString()}`)
-            .then(async (res) => {
-            if (!res.ok) {
-                console.warn(`[lit-devtools] open-in-editor failed (${res.status})`, await res.text());
-            }
-        })
-            .catch((err) => {
-            console.warn('[lit-devtools] open-in-editor failed', err);
-        });
-    }
-    // ---------------------------------------------------------------------------
-    // Render
-    // ---------------------------------------------------------------------------
-    _renderNode(node, depth) {
-        const hasChildren = node.children.length > 0;
-        const expanded = this._expanded.has(node.id);
-        return html `
-      <div
-        class="row ${node.id === this._selectedId ? 'selected' : ''}"
-        style="padding-left:${8 + depth * 14}px"
-        @click=${() => this._select(node.id)}
-        @mouseenter=${() => this._highlight(node.id)}
-      >
-        <span
-          class="twisty ${hasChildren ? '' : 'leaf'}"
-          @click=${(e) => {
-            e.stopPropagation();
-            this._toggleExpand(node.id);
-        }}
-          >${hasChildren ? (expanded ? '▾' : '▸') : '•'}</span
-        >
-        <span class="tag"
-          ><span class="punct">&lt;</span>${node.tagName}<span class="punct"
-            >&gt;</span
-          ></span
-        >
-      </div>
-      ${hasChildren && expanded
-            ? node.children.map((c) => this._renderNode(c, depth + 1))
-            : nothing}
-    `;
-    }
-    _renderPropTable(props) {
-        return html `
-      <table>
-        ${props.map((p) => html `
-            <tr>
-              <td class="name">
-                ${p.name}${p.reflects
-            ? html `<span class="badge" title="reflects to attribute"
-                      >${typeof p.attribute === 'string'
-                ? p.attribute
-                : 'attr'}</span
-                    >`
-            : nothing}
-              </td>
-              <td class="val">${p.value}</td>
-            </tr>
-          `)}
-      </table>
-    `;
-    }
-    _renderDetails() {
-        const d = this._details;
-        if (d === null) {
-            let message;
-            if (this._gone) {
-                message = 'This element is no longer in the page.';
-            }
-            else if (this._selectedId === null) {
-                message = 'Select a component to inspect.';
-            }
-            else {
-                message = 'Loading…';
-            }
-            return html `<div class="placeholder">${message}</div>`;
-        }
-        const props = d.properties.filter((p) => !p.state);
-        const stateProps = d.properties.filter((p) => p.state);
-        return html `
-      <h2>&lt;${d.tagName}&gt;</h2>
-      ${d.source !== undefined
-            ? html `<button class="src" @click=${this._openSource}>
-            ${d.source.file}:${d.source.line}
-          </button>`
-            : nothing}
-      <section>
-        <div class="flags">
-          <span class="flag ${d.flags.hasUpdated ? 'on' : ''}">updated</span>
-          <span class="flag ${d.flags.isUpdatePending ? 'on' : ''}"
-            >update pending</span
-          >
-          <span class="flag ${d.flags.hasShadowRoot ? 'on' : ''}"
-            >shadow root</span
-          >
-        </div>
-      </section>
-      ${props.length > 0
-            ? html `<section>
-            <div class="label">Properties</div>
-            ${this._renderPropTable(props)}
-          </section>`
-            : nothing}
-      ${stateProps.length > 0
-            ? html `<section>
-            <div class="label">State</div>
-            ${this._renderPropTable(stateProps)}
-          </section>`
-            : nothing}
-      ${d.attributes.length > 0
-            ? html `<section>
-            <div class="label">Attributes</div>
-            <table>
-              ${d.attributes.map((a) => html `<tr>
-                    <td class="name">${a.name}</td>
-                    <td class="val">${a.value}</td>
-                  </tr>`)}
-            </table>
-          </section>`
-            : nothing}
-    `;
-    }
-    render() {
-        return html `
-      <div class="toolbar">
-        <button
-          class="pick ${this._picking ? 'active' : ''}"
-          title="Pick an element on the page (Meta+Shift+E)"
-          @click=${this._togglePick}
-        >
-          ⌖ Pick
-        </button>
-        <span class="spacer"></span>
-        <button
-          class="live ${this._live ? 'active' : ''}"
-          title="Update the tree automatically as the page changes"
-          @click=${this._toggleLive}
-        >
-          ${this._live ? '● Live' : '○ Live'}
-        </button>
-        <button @click=${this._refresh} ?disabled=${this._live}>Refresh</button>
-      </div>
-      <div class="body">
-        <div class="tree" @mouseleave=${() => this._highlight(null)}>
-          ${this._roots.length === 0
-            ? html `<div class="empty">
-                No Lit components found on the page.
-              </div>`
-            : this._roots.map((n) => this._renderNode(n, 0))}
-        </div>
-        <div class="details">${this._renderDetails()}</div>
-      </div>
-    `;
-    }
-};
-__decorate([
-    state()
-], ComponentsView.prototype, "_roots", void 0);
-__decorate([
-    state()
-], ComponentsView.prototype, "_selectedId", void 0);
-__decorate([
-    state()
-], ComponentsView.prototype, "_details", void 0);
-__decorate([
-    state()
-], ComponentsView.prototype, "_gone", void 0);
-__decorate([
-    state()
-], ComponentsView.prototype, "_expanded", void 0);
-__decorate([
-    state()
-], ComponentsView.prototype, "_picking", void 0);
-__decorate([
-    state()
-], ComponentsView.prototype, "_live", void 0);
-ComponentsView = __decorate([
-    customElement('components-view')
-], ComponentsView);
-export { ComponentsView };
-/**
- * Returns the ids of every ancestor of `id` (nearest last), or `null` if `id`
- * isn't in the tree. The target id itself is not included.
- */
-const findAncestors = (nodes, id) => {
-    const trail = [];
-    const walk = (list) => {
-        for (const node of list) {
-            if (node.id === id)
-                return true;
-            trail.push(node.id);
-            if (walk(node.children))
-                return true;
-            trail.pop();
-        }
-        return false;
-    };
-    return walk(nodes) ? [...trail] : null;
-};
-//# sourceMappingURL=components-view.js.map

package/panel/components-view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components-view.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/components-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, nothing, type TemplateResult} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\nimport {tokens} from '../lib/tokens.js';\nimport {\n  INSPECT_PATH,\n  INSPECT_SSE_EVENT,\n  type InspectorCommand,\n  type InspectorDetails,\n  type InspectorMessage,\n  type InspectorTreeNode,\n} from '../types/inspector.js';\n\n/** localStorage key remembering the opt-in live-tree toggle. */\nconst LIVE_LS_KEY = 'lit-devtools-components-live';\n\n/**\n * The Components view: a hierarchical tree of the page's Lit elements (left)\n * and a details pane for the selected one (right). A tab of the DevTools panel\n * shell (\\`lit-devtools-panel\\`).\n *\n * It can't touch the page DOM directly (separate iframe), so it drives the\n * page's inspector runtime over the transport: it POSTs {@link InspectorCommand}s\n * to {@link INSPECT_PATH} and receives {@link InspectorMessage}s on the shared\n * SSE stream's `inspect` event. An overlay inspect-pick arrives as a `pick`\n * message; the view selects that node and asks its host to switch to this tab.\n */\n@customElement('components-view')\nexport class ComponentsView 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      button.pick.active,\n      button.live.active {\n        border-color: var(--lit-devtools-accent);\n        background: var(--lit-devtools-accent-soft);\n        color: var(--lit-devtools-accent);\n      }\n      button:disabled {\n        opacity: 0.4;\n        cursor: default;\n      }\n      .body {\n        display: flex;\n        flex: 1;\n        overflow: hidden;\n      }\n      .tree {\n        flex: 1;\n        overflow: auto;\n        padding: var(--lit-devtools-space-2) 0;\n        min-width: 0;\n      }\n      .empty {\n        padding: var(--lit-devtools-space-6);\n        color: var(--lit-devtools-text-muted);\n        font-size: var(--lit-devtools-text-xs);\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-2);\n        padding: 1px var(--lit-devtools-space-5);\n        white-space: nowrap;\n        cursor: pointer;\n        font-family: var(--lit-devtools-font-mono);\n        font-size: var(--lit-devtools-text-xs);\n        line-height: 18px;\n      }\n      .row:hover {\n        background: var(--lit-devtools-surface-hover);\n      }\n      .row.selected {\n        background: var(--lit-devtools-surface-active);\n      }\n      .twisty {\n        width: 12px;\n        text-align: center;\n        color: var(--lit-devtools-text-muted);\n        flex-shrink: 0;\n      }\n      .twisty.leaf {\n        visibility: hidden;\n      }\n      .tag {\n        color: var(--lit-devtools-accent);\n      }\n      .tag .punct {\n        color: var(--lit-devtools-text-muted);\n      }\n      .details {\n        width: 340px;\n        flex-shrink: 0;\n        border-left: 1px solid var(--lit-devtools-border);\n        overflow: auto;\n        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-5);\n        font-size: var(--lit-devtools-text-xs);\n      }\n      .details h2 {\n        font-size: var(--lit-devtools-text-xs);\n        font-family: var(--lit-devtools-font-mono);\n        color: var(--lit-devtools-accent);\n        margin: 0 0 var(--lit-devtools-space-1);\n      }\n      .src {\n        background: none;\n        border: 0;\n        padding: 0;\n        color: var(--lit-devtools-text-link);\n        font-size: var(--lit-devtools-text-2xs);\n        cursor: pointer;\n        text-decoration: underline;\n        word-break: break-all;\n        text-align: left;\n      }\n      section {\n        margin-top: var(--lit-devtools-space-5);\n      }\n      section > .label {\n        text-transform: uppercase;\n        letter-spacing: var(--lit-devtools-tracking-caps);\n        font-size: var(--lit-devtools-text-2xs);\n        color: var(--lit-devtools-text-muted);\n        margin-bottom: var(--lit-devtools-space-2);\n      }\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        font-family: var(--lit-devtools-font-mono);\n      }\n      td {\n        padding: 2px var(--lit-devtools-space-4) 2px 0;\n        vertical-align: top;\n        word-break: break-word;\n      }\n      td.name {\n        color: var(--lit-devtools-text);\n        white-space: nowrap;\n      }\n      td.val {\n        color: var(--lit-devtools-warning);\n        width: 100%;\n      }\n      .badge {\n        display: inline-block;\n        margin-left: var(--lit-devtools-space-2);\n        padding: 0 var(--lit-devtools-space-2);\n        border-radius: var(--lit-devtools-radius-xs);\n        font-size: 9px;\n        background: var(--lit-devtools-surface-elevated);\n        color: var(--lit-devtools-text-secondary);\n        vertical-align: middle;\n      }\n      .flags {\n        display: flex;\n        gap: var(--lit-devtools-space-4);\n        flex-wrap: wrap;\n      }\n      .flag {\n        padding: 1px var(--lit-devtools-space-4);\n        border-radius: var(--lit-devtools-radius-xs);\n        background: var(--lit-devtools-surface-elevated);\n        color: var(--lit-devtools-text-secondary);\n        font-size: var(--lit-devtools-text-2xs);\n      }\n      .flag.on {\n        background: var(--lit-devtools-accent-soft);\n        color: var(--lit-devtools-accent);\n      }\n      .placeholder {\n        color: var(--lit-devtools-text-muted);\n        padding: var(--lit-devtools-space-8) 0;\n        text-align: center;\n      }\n    `,\n  ];\n\n  @state() private _roots: InspectorTreeNode[] = [];\n  @state() private _selectedId: number | null = null;\n  @state() private _details: InspectorDetails | null = null;\n  /** True when the selected element is no longer in the page (removed / GC'd). */\n  @state() private _gone = false;\n  @state() private _expanded = new Set<number>();\n  @state() private _picking = false;\n  /** Opt-in live tree (MutationObserver in the page); persisted, default off. */\n  @state() private _live = false;\n\n  private _es: EventSource | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._live = localStorage.getItem(LIVE_LS_KEY) === 'true';\n    this._es = new EventSource('/__lit-devtools-events');\n    this._es.addEventListener(INSPECT_SSE_EVENT, this._onMessage);\n    // Request only once the stream is open — a command sent before we're\n    // subscribed would have its reply broadcast before we could receive it.\n    this._es.addEventListener('open', this._onOpen);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._es?.removeEventListener(INSPECT_SSE_EVENT, this._onMessage);\n    this._es?.removeEventListener('open', this._onOpen);\n    this._es?.close();\n    this._es = null;\n    this._post({type: 'watch', id: null});\n    if (this._live) this._post({type: 'observe', enabled: false});\n  }\n\n  /** Refresh the tree (and re-arm watch / live mode) once the SSE connects. */\n  private _onOpen = (): void => {\n    this._post({type: 'tree'});\n    if (this._selectedId !== null) {\n      this._post({type: 'watch', id: this._selectedId});\n    }\n    if (this._live) this._post({type: 'observe', enabled: true});\n  };\n\n  // ---------------------------------------------------------------------------\n  // Transport\n  // ---------------------------------------------------------------------------\n\n  private _post(cmd: InspectorCommand): void {\n    fetch(INSPECT_PATH, {\n      method: 'POST',\n      headers: {'Content-Type': 'application/json'},\n      body: JSON.stringify(cmd),\n    }).catch((err) => {\n      console.warn('[lit-devtools] inspector POST failed', err);\n    });\n  }\n\n  private _onMessage = (e: Event): void => {\n    let msg: InspectorMessage;\n    try {\n      msg = JSON.parse((e as MessageEvent<string>).data) as InspectorMessage;\n    } catch {\n      return;\n    }\n    switch (msg.type) {\n      case 'ready':\n        // Runtime (re)connected — refresh the tree and re-arm any selection.\n        this._post({type: 'tree'});\n        if (this._selectedId !== null) {\n          this._post({type: 'watch', id: this._selectedId});\n        }\n        break;\n      case 'tree':\n        this._roots = msg.roots;\n        // Re-reveal the selection against the fresh tree: a just-picked node may\n        // not have existed in the previous _roots, so the reveal in _select()\n        // found no ancestors to expand and the node stayed hidden.\n        if (this._selectedId !== null) {\n          this._revealAncestors(this._selectedId);\n        }\n        break;\n      case 'details':\n        if (msg.details.id === this._selectedId) {\n          this._details = msg.details;\n          this._gone = false;\n        }\n        break;\n      case 'gone':\n        if (msg.id === this._selectedId) {\n          this._details = null;\n          this._gone = true;\n        }\n        break;\n      case 'pick':\n        this._picking = false;\n        this._select(msg.id);\n        // Bring this tab to the front so the pick is visible.\n        this.dispatchEvent(\n          new CustomEvent('inspector-activate', {bubbles: true, composed: true})\n        );\n        break;\n    }\n  };\n\n  // ---------------------------------------------------------------------------\n  // Selection / expansion\n  // ---------------------------------------------------------------------------\n\n  /**\n   * Select an element by id from outside (e.g. a timeline event's \"inspect\"\n   * link). Same as a tree click; the host is responsible for switching tabs.\n   */\n  selectById(id: number): void {\n    this._select(id);\n  }\n\n  private _select(id: number): void {\n    if (this._selectedId === id) return;\n    if (this._selectedId !== null) {\n      this._post({type: 'watch', id: null});\n    }\n    this._selectedId = id;\n    this._details = null;\n    this._gone = false;\n    this._revealAncestors(id);\n    this._post({type: 'tree'}); // refresh in case the picked node is new\n    this._post({type: 'details', id});\n    this._post({type: 'watch', id});\n  }\n\n  /** Expand every ancestor of `id` so the selected node is visible. */\n  private _revealAncestors(id: number): void {\n    const path = findAncestors(this._roots, id);\n    if (path === null) return;\n    const next = new Set(this._expanded);\n    for (const ancestorId of path) next.add(ancestorId);\n    this._expanded = next;\n  }\n\n  private _toggleExpand(id: number): void {\n    const next = new Set(this._expanded);\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    this._expanded = next;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Actions\n  // ---------------------------------------------------------------------------\n\n  private _refresh(): void {\n    this._post({type: 'tree'});\n    if (this._selectedId !== null) {\n      this._post({type: 'details', id: this._selectedId});\n    }\n  }\n\n  private _togglePick(): void {\n    this._picking = !this._picking;\n    this._post({type: 'pick'});\n  }\n\n  private _toggleLive(): void {\n    this._live = !this._live;\n    try {\n      localStorage.setItem(LIVE_LS_KEY, String(this._live));\n    } catch {\n      // ignore (private/storage unavailable)\n    }\n    this._post({type: 'observe', enabled: this._live});\n    // Leaving live mode, pull one fresh tree so it doesn't go stale silently.\n    if (!this._live) this._post({type: 'tree'});\n  }\n\n  private _highlight(id: number | null): void {\n    this._post({type: 'highlight', id});\n  }\n\n  private _openSource(): void {\n    const src = this._details?.source;\n    if (src === undefined) return;\n    const params = new URLSearchParams({\n      file: src.file,\n      line: String(src.line),\n    });\n    fetch(`/__lit-open-in-editor?${params.toString()}`)\n      .then(async (res) => {\n        if (!res.ok) {\n          console.warn(\n            `[lit-devtools] open-in-editor failed (${res.status})`,\n            await res.text()\n          );\n        }\n      })\n      .catch((err) => {\n        console.warn('[lit-devtools] open-in-editor failed', err);\n      });\n  }\n\n  // ---------------------------------------------------------------------------\n  // Render\n  // ---------------------------------------------------------------------------\n\n  private _renderNode(node: InspectorTreeNode, depth: number): TemplateResult {\n    const hasChildren = node.children.length > 0;\n    const expanded = this._expanded.has(node.id);\n    return html`\n      <div\n        class=\"row ${node.id === this._selectedId ? 'selected' : ''}\"\n        style=\"padding-left:${8 + depth * 14}px\"\n        @click=${() => this._select(node.id)}\n        @mouseenter=${() => this._highlight(node.id)}\n      >\n        <span\n          class=\"twisty ${hasChildren ? '' : 'leaf'}\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n            this._toggleExpand(node.id);\n          }}\n          >${hasChildren ? (expanded ? '▾' : '▸') : '•'}</span\n        >\n        <span class=\"tag\"\n          ><span class=\"punct\">&lt;</span>${node.tagName}<span class=\"punct\"\n            >&gt;</span\n          ></span\n        >\n      </div>\n      ${hasChildren && expanded\n        ? node.children.map((c) => this._renderNode(c, depth + 1))\n        : nothing}\n    `;\n  }\n\n  private _renderPropTable(\n    props: InspectorDetails['properties']\n  ): TemplateResult {\n    return html`\n      <table>\n        ${props.map(\n          (p) => html`\n            <tr>\n              <td class=\"name\">\n                ${p.name}${p.reflects\n                  ? html`<span class=\"badge\" title=\"reflects to attribute\"\n                      >${typeof p.attribute === 'string'\n                        ? p.attribute\n                        : 'attr'}</span\n                    >`\n                  : nothing}\n              </td>\n              <td class=\"val\">${p.value}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `;\n  }\n\n  private _renderDetails(): TemplateResult {\n    const d = this._details;\n    if (d === null) {\n      let message: string;\n      if (this._gone) {\n        message = 'This element is no longer in the page.';\n      } else if (this._selectedId === null) {\n        message = 'Select a component to inspect.';\n      } else {\n        message = 'Loading…';\n      }\n      return html`<div class=\"placeholder\">${message}</div>`;\n    }\n    const props = d.properties.filter((p) => !p.state);\n    const stateProps = d.properties.filter((p) => p.state);\n    return html`\n      <h2>&lt;${d.tagName}&gt;</h2>\n      ${d.source !== undefined\n        ? html`<button class=\"src\" @click=${this._openSource}>\n            ${d.source.file}:${d.source.line}\n          </button>`\n        : nothing}\n      <section>\n        <div class=\"flags\">\n          <span class=\"flag ${d.flags.hasUpdated ? 'on' : ''}\">updated</span>\n          <span class=\"flag ${d.flags.isUpdatePending ? 'on' : ''}\"\n            >update pending</span\n          >\n          <span class=\"flag ${d.flags.hasShadowRoot ? 'on' : ''}\"\n            >shadow root</span\n          >\n        </div>\n      </section>\n      ${props.length > 0\n        ? html`<section>\n            <div class=\"label\">Properties</div>\n            ${this._renderPropTable(props)}\n          </section>`\n        : nothing}\n      ${stateProps.length > 0\n        ? html`<section>\n            <div class=\"label\">State</div>\n            ${this._renderPropTable(stateProps)}\n          </section>`\n        : nothing}\n      ${d.attributes.length > 0\n        ? html`<section>\n            <div class=\"label\">Attributes</div>\n            <table>\n              ${d.attributes.map(\n                (a) =>\n                  html`<tr>\n                    <td class=\"name\">${a.name}</td>\n                    <td class=\"val\">${a.value}</td>\n                  </tr>`\n              )}\n            </table>\n          </section>`\n        : nothing}\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"toolbar\">\n        <button\n          class=\"pick ${this._picking ? 'active' : ''}\"\n          title=\"Pick an element on the page (Meta+Shift+E)\"\n          @click=${this._togglePick}\n        >\n          ⌖ Pick\n        </button>\n        <span class=\"spacer\"></span>\n        <button\n          class=\"live ${this._live ? 'active' : ''}\"\n          title=\"Update the tree automatically as the page changes\"\n          @click=${this._toggleLive}\n        >\n          ${this._live ? '● Live' : '○ Live'}\n        </button>\n        <button @click=${this._refresh} ?disabled=${this._live}>Refresh</button>\n      </div>\n      <div class=\"body\">\n        <div class=\"tree\" @mouseleave=${() => this._highlight(null)}>\n          ${this._roots.length === 0\n            ? html`<div class=\"empty\">\n                No Lit components found on the page.\n              </div>`\n            : this._roots.map((n) => this._renderNode(n, 0))}\n        </div>\n        <div class=\"details\">${this._renderDetails()}</div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Returns the ids of every ancestor of `id` (nearest last), or `null` if `id`\n * isn't in the tree. The target id itself is not included.\n */\nconst findAncestors = (\n  nodes: InspectorTreeNode[],\n  id: number\n): number[] | null => {\n  const trail: number[] = [];\n  const walk = (list: InspectorTreeNode[]): boolean => {\n    for (const node of list) {\n      if (node.id === id) return true;\n      trail.push(node.id);\n      if (walk(node.children)) return true;\n      trail.pop();\n    }\n    return false;\n  };\n  return walk(nodes) ? [...trail] : null;\n};\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'components-view': ComponentsView;\n  }\n}\n"]}