@oddsquad/vite-plugin-lit 0.0.3 → 0.1.0

package/panel/devtools-settings.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { LitElement } from 'lit';
+/**
+ * Settings view. Shows the plugin's resolved feature settings and lets the
+ * HMR ones be overridden live — persisted (same-origin localStorage, read by
+ * the app runtime on load) and pushed over HMR for immediate effect. Settings
+ * whose feature is disabled at config time can't be enabled here (their runtime
+ * isn't injected); those stay read-only.
+ */
+export declare class DevtoolsSettings extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _settings;
+    private _override;
+    private _loaded;
+    private _colorScheme;
+    connectedCallback(): void;
+    private _readOverride;
+    private _setColorScheme;
+    private _fetch;
+    /** Persist the merged override and push it to the app runtime. */
+    private _push;
+    private _set;
+    /** Clear overrides and revert the runtime to the resolved env values. */
+    private _reset;
+    private _pill;
+    private _ovr;
+    private _readonlyRow;
+    private _renderAppearance;
+    private _renderHmr;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'devtools-settings': DevtoolsSettings;
+    }
+}
+//# sourceMappingURL=devtools-settings.d.ts.map

package/panel/devtools-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-settings.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/devtools-settings.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAkBnD;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAoIpB;IAEO,OAAO,CAAC,SAAS,CAAgC;IACjD,OAAO,CAAC,SAAS,CAAwB;IACzC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,YAAY,CAAiC;IAErD,iBAAiB;IAO1B,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,eAAe;YAKT,MAAM;IAWpB,kEAAkE;IAClE,OAAO,CAAC,KAAK;IAgBb,OAAO,CAAC,IAAI;IAOZ,yEAAyE;IACzE,OAAO,CAAC,MAAM;IAyBd,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,iBAAiB;IAsCzB,OAAO,CAAC,UAAU;IAmGT,MAAM;CAqFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}

package/panel/devtools-settings.js

@@ -0,0 +1,463 @@
+/**
+ * @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 { readColorSchemePreference, setColorSchemePreference, } from '../lib/color-scheme.js';
+import { SETTINGS_OVERRIDE_LS_KEY, SOURCE_OVERLAY_EDITORS, } from '../types/timeline.js';
+/** GET resolved settings / POST a {@link SettingsOverride} (server rebroadcasts). */
+const SETTINGS_PATH = '/__lit-devtools-settings';
+/**
+ * Settings view. Shows the plugin's resolved feature settings and lets the
+ * HMR ones be overridden live — persisted (same-origin localStorage, read by
+ * the app runtime on load) and pushed over HMR for immediate effect. Settings
+ * whose feature is disabled at config time can't be enabled here (their runtime
+ * isn't injected); those stay read-only.
+ */
+let DevtoolsSettings = class DevtoolsSettings extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._settings = null;
+        this._override = {};
+        this._loaded = false;
+        this._colorScheme = 'auto';
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-6);
+        font-size: var(--lit-devtools-text-xs);
+        line-height: var(--lit-devtools-leading-normal);
+      }
+      .note {
+        color: var(--lit-devtools-text-muted);
+        margin: 0 0 var(--lit-devtools-space-5);
+      }
+      .note code {
+        color: var(--lit-devtools-accent);
+        font-family: var(--lit-devtools-font-mono);
+      }
+      section {
+        border: 1px solid var(--lit-devtools-border);
+        border-radius: var(--lit-devtools-radius-md);
+        margin-bottom: var(--lit-devtools-space-5);
+        overflow: hidden;
+      }
+      h3 {
+        display: flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-4);
+        margin: 0;
+        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
+        font-size: var(--lit-devtools-text-xs);
+        background: var(--lit-devtools-surface-low);
+        border-bottom: 1px solid var(--lit-devtools-border);
+      }
+      .pill {
+        font-size: var(--lit-devtools-text-2xs);
+        font-weight: var(--lit-devtools-weight-semibold);
+        text-transform: uppercase;
+        letter-spacing: var(--lit-devtools-tracking-caps);
+        padding: 1px var(--lit-devtools-space-4);
+        border-radius: var(--lit-devtools-radius-pill);
+        border: 1px solid var(--lit-devtools-border-strong);
+        color: var(--lit-devtools-text-muted);
+      }
+      .pill.on {
+        color: var(--lit-devtools-accent);
+        border-color: var(--lit-devtools-accent);
+        background: var(--lit-devtools-accent-soft);
+      }
+      .reset {
+        margin-left: auto;
+        appearance: none;
+        border: 1px solid var(--lit-devtools-border-strong);
+        background: var(--lit-devtools-surface-elevated);
+        color: var(--lit-devtools-text);
+        border-radius: var(--lit-devtools-radius-sm);
+        font: inherit;
+        font-size: var(--lit-devtools-text-2xs);
+        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-4);
+        cursor: pointer;
+      }
+      .reset:hover {
+        background: var(--lit-devtools-surface-hover);
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      td {
+        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
+        vertical-align: middle;
+      }
+      tr:not(:last-child) td {
+        border-bottom: 1px solid var(--lit-devtools-border);
+      }
+      .key {
+        color: var(--lit-devtools-text-muted);
+        white-space: nowrap;
+        width: 1%;
+      }
+      .val {
+        color: var(--lit-devtools-text);
+        font-family: var(--lit-devtools-font-mono);
+      }
+      .env {
+        color: var(--lit-devtools-text-muted);
+        font-family: var(--lit-devtools-font-mono);
+        font-size: var(--lit-devtools-text-2xs);
+      }
+      .ovr {
+        color: var(--lit-devtools-warning);
+        font-size: var(--lit-devtools-text-2xs);
+        margin-left: var(--lit-devtools-space-3);
+        vertical-align: middle;
+      }
+      label.toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--lit-devtools-space-3);
+        cursor: pointer;
+        vertical-align: middle;
+      }
+      input,
+      select {
+        accent-color: var(--lit-devtools-accent);
+        font: inherit;
+        font-family: var(--lit-devtools-font-mono);
+        vertical-align: middle;
+      }
+      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: 1px var(--lit-devtools-space-2);
+      }
+      .row-disabled {
+        opacity: 0.5;
+      }
+      .empty {
+        color: var(--lit-devtools-text-muted);
+        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);
+      }
+      .empty code {
+        color: var(--lit-devtools-accent);
+        font-family: var(--lit-devtools-font-mono);
+      }
+      .loading {
+        color: var(--lit-devtools-text-muted);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._override = this._readOverride();
+        this._colorScheme = readColorSchemePreference();
+        void this._fetch();
+    }
+    _readOverride() {
+        try {
+            const raw = localStorage.getItem(SETTINGS_OVERRIDE_LS_KEY);
+            if (raw !== null)
+                return JSON.parse(raw);
+        }
+        catch {
+            // ignore
+        }
+        return {};
+    }
+    _setColorScheme(scheme) {
+        this._colorScheme = scheme;
+        setColorSchemePreference(scheme);
+    }
+    async _fetch() {
+        try {
+            const res = await fetch(SETTINGS_PATH);
+            this._settings = (await res.json());
+        }
+        catch {
+            this._settings = null;
+        }
+        finally {
+            this._loaded = true;
+        }
+    }
+    /** Persist the merged override and push it to the app runtime. */
+    _push(override) {
+        this._override = override;
+        try {
+            localStorage.setItem(SETTINGS_OVERRIDE_LS_KEY, JSON.stringify(override));
+        }
+        catch {
+            // ignore
+        }
+        fetch(SETTINGS_PATH, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(override),
+        }).catch(() => {
+            // dev tool — ignore network errors
+        });
+    }
+    _set(key, value) {
+        this._push({ ...this._override, [key]: value });
+    }
+    /** Clear overrides and revert the runtime to the resolved env values. */
+    _reset() {
+        const s = this._settings;
+        try {
+            localStorage.removeItem(SETTINGS_OVERRIDE_LS_KEY);
+        }
+        catch {
+            // ignore
+        }
+        this._override = {};
+        if (s !== null) {
+            // Send the env values explicitly so the live runtime reverts now (an
+            // empty override would leave the current live values in place).
+            fetch(SETTINGS_PATH, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    hmrReconnect: s.hmr.reconnect,
+                    hmrOnIncompatible: s.hmr.onIncompatible,
+                    hmrIndicatorVisible: s.hmr.indicatorEnabled,
+                    hmrIndicatorCount: s.hmr.indicatorCount,
+                    sourceOverlayEditor: s.sourceOverlay.editor,
+                }),
+            }).catch(() => { });
+        }
+    }
+    _pill(on) {
+        return html `<span class="pill ${on ? 'on' : ''}"
+      >${on ? 'enabled' : 'disabled'}</span
+    >`;
+    }
+    _ovr(overridden) {
+        return overridden ? html `<span class="ovr">(overridden)</span>` : nothing;
+    }
+    _readonlyRow(key, value, env) {
+        return html `
+      <tr>
+        <td class="key">${key}</td>
+        <td class="val">
+          ${String(value)}
+          ${env ? html `<span class="env">${env}</span>` : nothing}
+        </td>
+      </tr>
+    `;
+    }
+    _renderAppearance() {
+        return html `
+      <section>
+        <h3>Appearance</h3>
+        <table>
+          <tr>
+            <td class="key">color scheme</td>
+            <td class="val">
+              <select
+                @change=${(e) => this._setColorScheme(e.target
+            .value)}
+              >
+                ${[
+            ['auto', 'Auto'],
+            ['dark', 'Dark'],
+            ['light', 'Light'],
+        ].map(([value, label]) => html `<option
+                      value=${value}
+                      ?selected=${this._colorScheme === value}
+                    >
+                      ${label}
+                    </option>`)}
+              </select>
+            </td>
+          </tr>
+        </table>
+      </section>
+    `;
+    }
+    _renderHmr(s) {
+        const o = this._override;
+        if (!s.hmr.enabled) {
+            return html `<p class="empty">
+        Enable with <code>hmr: true</code> or <code>LIT_PLUGIN_HMR=true</code>.
+      </p>`;
+        }
+        const reconnect = o.hmrReconnect ?? s.hmr.reconnect;
+        const onIncompatible = o.hmrOnIncompatible ?? s.hmr.onIncompatible;
+        // The indicator element only exists when enabled at config time, so it can
+        // be hidden/shown (and its count toggled) live but not created here.
+        const indicatorVisible = o.hmrIndicatorVisible ?? s.hmr.indicatorEnabled;
+        const indicatorCount = o.hmrIndicatorCount ?? s.hmr.indicatorCount;
+        return html `
+      <table>
+        <tr>
+          <td class="key">reconnect</td>
+          <td class="val">
+            <label class="toggle">
+              <input
+                type="checkbox"
+                .checked=${reconnect}
+                @change=${(e) => this._set('hmrReconnect', e.target.checked)}
+              />
+              ${reconnect ? 'on' : 'off'}
+            </label>
+            ${this._ovr(o.hmrReconnect !== undefined)}
+          </td>
+        </tr>
+        <tr>
+          <td class="key">on incompatible</td>
+          <td class="val">
+            <select
+              @change=${(e) => this._set('hmrOnIncompatible', e.target.value)}
+            >
+              <option value="reload" ?selected=${onIncompatible === 'reload'}>
+                reload
+              </option>
+              <option value="warn" ?selected=${onIncompatible === 'warn'}>
+                warn
+              </option>
+            </select>
+            ${this._ovr(o.hmrOnIncompatible !== undefined)}
+          </td>
+        </tr>
+        <tr class=${s.hmr.indicatorEnabled ? '' : 'row-disabled'}>
+          <td class="key">indicator</td>
+          <td class="val">
+            <label class="toggle">
+              <input
+                type="checkbox"
+                .checked=${indicatorVisible}
+                ?disabled=${!s.hmr.indicatorEnabled}
+                @change=${(e) => this._set('hmrIndicatorVisible', e.target.checked)}
+              />
+              ${s.hmr.indicatorEnabled
+            ? indicatorVisible
+                ? 'shown'
+                : 'hidden'
+            : 'off (config)'}
+            </label>
+            ${this._ovr(o.hmrIndicatorVisible !== undefined)}
+          </td>
+        </tr>
+        <tr class=${s.hmr.indicatorEnabled ? '' : 'row-disabled'}>
+          <td class="key">indicator count</td>
+          <td class="val">
+            <label class="toggle">
+              <input
+                type="checkbox"
+                .checked=${indicatorCount}
+                ?disabled=${!s.hmr.indicatorEnabled}
+                @change=${(e) => this._set('hmrIndicatorCount', e.target.checked)}
+              />
+              ${indicatorCount ? 'shown' : 'hidden'}
+            </label>
+            ${this._ovr(o.hmrIndicatorCount !== undefined)}
+          </td>
+        </tr>
+      </table>
+    `;
+    }
+    render() {
+        if (!this._loaded) {
+            return html `<p class="loading">Loading settings…</p>`;
+        }
+        const s = this._settings;
+        const appearance = this._renderAppearance();
+        if (s === null) {
+            return html `${appearance}
+        <p class="empty">Settings unavailable.</p>`;
+        }
+        const hasOverride = Object.keys(this._override).length > 0;
+        return html `
+      <p class="note">
+        Resolved from plugin options and <code>LIT_PLUGIN_*</code> env at
+        startup. Controls below override the running app live; the rest are
+        config-time (change them in your Vite config / <code>.env</code> and
+        restart).
+        ${hasOverride
+            ? html `<button class="reset" @click=${this._reset}>
+              Reset to env
+            </button>`
+            : nothing}
+      </p>
+
+      ${appearance}
+
+      <section>
+        <h3>HMR ${this._pill(s.hmr.enabled)}</h3>
+        ${this._renderHmr(s)}
+      </section>
+
+      <section>
+        <h3>Source Overlay ${this._pill(s.sourceOverlay.enabled)}</h3>
+        ${s.sourceOverlay.enabled
+            ? html `<table>
+              ${this._readonlyRow('hotkey', `Ctrl+Shift+${s.sourceOverlay.key.toUpperCase()}`, 'LIT_PLUGIN_SOURCE_OVERLAY_KEY')}
+              <tr>
+                <td class="key">editor</td>
+                <td class="val">
+                  <select
+                    @change=${(e) => this._set('sourceOverlayEditor', e.target.value)}
+                  >
+                    ${SOURCE_OVERLAY_EDITORS.map((ed) => html `<option
+                          value=${ed.value}
+                          ?selected=${ed.value ===
+                (this._override.sourceOverlayEditor ??
+                    s.sourceOverlay.editor)}
+                        >
+                          ${ed.label}
+                        </option>`)}
+                  </select>
+                  ${this._ovr(this._override.sourceOverlayEditor !== undefined)}
+                </td>
+              </tr>
+              ${this._readonlyRow('throttle (ms)', s.sourceOverlay.throttleMs, 'LIT_PLUGIN_SOURCE_OVERLAY_THROTTLE_MS')}
+            </table>`
+            : html `<p class="empty">
+              Enable with <code>sourceOverlay: true</code> or
+              <code>LIT_PLUGIN_SOURCE_OVERLAY=true</code>.
+            </p>`}
+      </section>
+
+      <section>
+        <h3>Timeline ${this._pill(s.timeline)}</h3>
+        <p class="empty">
+          Layers and recording are controlled in the Timeline tab.
+        </p>
+      </section>
+    `;
+    }
+};
+__decorate([
+    state()
+], DevtoolsSettings.prototype, "_settings", void 0);
+__decorate([
+    state()
+], DevtoolsSettings.prototype, "_override", void 0);
+__decorate([
+    state()
+], DevtoolsSettings.prototype, "_loaded", void 0);
+__decorate([
+    state()
+], DevtoolsSettings.prototype, "_colorScheme", void 0);
+DevtoolsSettings = __decorate([
+    customElement('devtools-settings')
+], DevtoolsSettings);
+export { DevtoolsSettings };
+//# sourceMappingURL=devtools-settings.js.map

package/panel/devtools-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-settings.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/devtools-settings.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, state} from 'lit/decorators.js';\nimport {tokens} from '../lib/tokens.js';\nimport {\n  readColorSchemePreference,\n  setColorSchemePreference,\n  type ColorSchemePreference,\n} from '../lib/color-scheme.js';\nimport {\n  SETTINGS_OVERRIDE_LS_KEY,\n  SOURCE_OVERLAY_EDITORS,\n  type FeatureSettings,\n  type SettingsOverride,\n} from '../types/timeline.js';\n\n/** GET resolved settings / POST a {@link SettingsOverride} (server rebroadcasts). */\nconst SETTINGS_PATH = '/__lit-devtools-settings';\n\n/**\n * Settings view. Shows the plugin's resolved feature settings and lets the\n * HMR ones be overridden live — persisted (same-origin localStorage, read by\n * the app runtime on load) and pushed over HMR for immediate effect. Settings\n * whose feature is disabled at config time can't be enabled here (their runtime\n * isn't injected); those stay read-only.\n */\n@customElement('devtools-settings')\nexport class DevtoolsSettings extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        flex: 1;\n        overflow-y: auto;\n        padding: var(--lit-devtools-space-5) var(--lit-devtools-space-6);\n        font-size: var(--lit-devtools-text-xs);\n        line-height: var(--lit-devtools-leading-normal);\n      }\n      .note {\n        color: var(--lit-devtools-text-muted);\n        margin: 0 0 var(--lit-devtools-space-5);\n      }\n      .note code {\n        color: var(--lit-devtools-accent);\n        font-family: var(--lit-devtools-font-mono);\n      }\n      section {\n        border: 1px solid var(--lit-devtools-border);\n        border-radius: var(--lit-devtools-radius-md);\n        margin-bottom: var(--lit-devtools-space-5);\n        overflow: hidden;\n      }\n      h3 {\n        display: flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-4);\n        margin: 0;\n        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);\n        font-size: var(--lit-devtools-text-xs);\n        background: var(--lit-devtools-surface-low);\n        border-bottom: 1px solid var(--lit-devtools-border);\n      }\n      .pill {\n        font-size: var(--lit-devtools-text-2xs);\n        font-weight: var(--lit-devtools-weight-semibold);\n        text-transform: uppercase;\n        letter-spacing: var(--lit-devtools-tracking-caps);\n        padding: 1px var(--lit-devtools-space-4);\n        border-radius: var(--lit-devtools-radius-pill);\n        border: 1px solid var(--lit-devtools-border-strong);\n        color: var(--lit-devtools-text-muted);\n      }\n      .pill.on {\n        color: var(--lit-devtools-accent);\n        border-color: var(--lit-devtools-accent);\n        background: var(--lit-devtools-accent-soft);\n      }\n      .reset {\n        margin-left: auto;\n        appearance: none;\n        border: 1px solid var(--lit-devtools-border-strong);\n        background: var(--lit-devtools-surface-elevated);\n        color: var(--lit-devtools-text);\n        border-radius: var(--lit-devtools-radius-sm);\n        font: inherit;\n        font-size: var(--lit-devtools-text-2xs);\n        padding: var(--lit-devtools-space-1) var(--lit-devtools-space-4);\n        cursor: pointer;\n      }\n      .reset:hover {\n        background: var(--lit-devtools-surface-hover);\n      }\n      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      td {\n        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);\n        vertical-align: middle;\n      }\n      tr:not(:last-child) td {\n        border-bottom: 1px solid var(--lit-devtools-border);\n      }\n      .key {\n        color: var(--lit-devtools-text-muted);\n        white-space: nowrap;\n        width: 1%;\n      }\n      .val {\n        color: var(--lit-devtools-text);\n        font-family: var(--lit-devtools-font-mono);\n      }\n      .env {\n        color: var(--lit-devtools-text-muted);\n        font-family: var(--lit-devtools-font-mono);\n        font-size: var(--lit-devtools-text-2xs);\n      }\n      .ovr {\n        color: var(--lit-devtools-warning);\n        font-size: var(--lit-devtools-text-2xs);\n        margin-left: var(--lit-devtools-space-3);\n        vertical-align: middle;\n      }\n      label.toggle {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--lit-devtools-space-3);\n        cursor: pointer;\n        vertical-align: middle;\n      }\n      input,\n      select {\n        accent-color: var(--lit-devtools-accent);\n        font: inherit;\n        font-family: var(--lit-devtools-font-mono);\n        vertical-align: middle;\n      }\n      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: 1px var(--lit-devtools-space-2);\n      }\n      .row-disabled {\n        opacity: 0.5;\n      }\n      .empty {\n        color: var(--lit-devtools-text-muted);\n        padding: var(--lit-devtools-space-3) var(--lit-devtools-space-5);\n      }\n      .empty code {\n        color: var(--lit-devtools-accent);\n        font-family: var(--lit-devtools-font-mono);\n      }\n      .loading {\n        color: var(--lit-devtools-text-muted);\n      }\n    `,\n  ];\n\n  @state() private _settings: FeatureSettings | null = null;\n  @state() private _override: SettingsOverride = {};\n  @state() private _loaded = false;\n  @state() private _colorScheme: ColorSchemePreference = 'auto';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._override = this._readOverride();\n    this._colorScheme = readColorSchemePreference();\n    void this._fetch();\n  }\n\n  private _readOverride(): SettingsOverride {\n    try {\n      const raw = localStorage.getItem(SETTINGS_OVERRIDE_LS_KEY);\n      if (raw !== null) return JSON.parse(raw) as SettingsOverride;\n    } catch {\n      // ignore\n    }\n    return {};\n  }\n\n  private _setColorScheme(scheme: ColorSchemePreference): void {\n    this._colorScheme = scheme;\n    setColorSchemePreference(scheme);\n  }\n\n  private async _fetch() {\n    try {\n      const res = await fetch(SETTINGS_PATH);\n      this._settings = (await res.json()) as FeatureSettings | null;\n    } catch {\n      this._settings = null;\n    } finally {\n      this._loaded = true;\n    }\n  }\n\n  /** Persist the merged override and push it to the app runtime. */\n  private _push(override: SettingsOverride) {\n    this._override = override;\n    try {\n      localStorage.setItem(SETTINGS_OVERRIDE_LS_KEY, JSON.stringify(override));\n    } catch {\n      // ignore\n    }\n    fetch(SETTINGS_PATH, {\n      method: 'POST',\n      headers: {'Content-Type': 'application/json'},\n      body: JSON.stringify(override),\n    }).catch(() => {\n      // dev tool — ignore network errors\n    });\n  }\n\n  private _set<K extends keyof SettingsOverride>(\n    key: K,\n    value: SettingsOverride[K]\n  ) {\n    this._push({...this._override, [key]: value});\n  }\n\n  /** Clear overrides and revert the runtime to the resolved env values. */\n  private _reset() {\n    const s = this._settings;\n    try {\n      localStorage.removeItem(SETTINGS_OVERRIDE_LS_KEY);\n    } catch {\n      // ignore\n    }\n    this._override = {};\n    if (s !== null) {\n      // Send the env values explicitly so the live runtime reverts now (an\n      // empty override would leave the current live values in place).\n      fetch(SETTINGS_PATH, {\n        method: 'POST',\n        headers: {'Content-Type': 'application/json'},\n        body: JSON.stringify({\n          hmrReconnect: s.hmr.reconnect,\n          hmrOnIncompatible: s.hmr.onIncompatible,\n          hmrIndicatorVisible: s.hmr.indicatorEnabled,\n          hmrIndicatorCount: s.hmr.indicatorCount,\n          sourceOverlayEditor: s.sourceOverlay.editor,\n        } satisfies SettingsOverride),\n      }).catch(() => {});\n    }\n  }\n\n  private _pill(on: boolean) {\n    return html`<span class=\"pill ${on ? 'on' : ''}\"\n      >${on ? 'enabled' : 'disabled'}</span\n    >`;\n  }\n\n  private _ovr(overridden: boolean) {\n    return overridden ? html`<span class=\"ovr\">(overridden)</span>` : nothing;\n  }\n\n  private _readonlyRow(key: string, value: unknown, env?: string) {\n    return html`\n      <tr>\n        <td class=\"key\">${key}</td>\n        <td class=\"val\">\n          ${String(value)}\n          ${env ? html`<span class=\"env\">${env}</span>` : nothing}\n        </td>\n      </tr>\n    `;\n  }\n\n  private _renderAppearance() {\n    return html`\n      <section>\n        <h3>Appearance</h3>\n        <table>\n          <tr>\n            <td class=\"key\">color scheme</td>\n            <td class=\"val\">\n              <select\n                @change=${(e: Event) =>\n                  this._setColorScheme(\n                    (e.target as HTMLSelectElement)\n                      .value as ColorSchemePreference\n                  )}\n              >\n                ${(\n                  [\n                    ['auto', 'Auto'],\n                    ['dark', 'Dark'],\n                    ['light', 'Light'],\n                  ] as Array<[ColorSchemePreference, string]>\n                ).map(\n                  ([value, label]) =>\n                    html`<option\n                      value=${value}\n                      ?selected=${this._colorScheme === value}\n                    >\n                      ${label}\n                    </option>`\n                )}\n              </select>\n            </td>\n          </tr>\n        </table>\n      </section>\n    `;\n  }\n\n  private _renderHmr(s: FeatureSettings) {\n    const o = this._override;\n    if (!s.hmr.enabled) {\n      return html`<p class=\"empty\">\n        Enable with <code>hmr: true</code> or <code>LIT_PLUGIN_HMR=true</code>.\n      </p>`;\n    }\n    const reconnect = o.hmrReconnect ?? s.hmr.reconnect;\n    const onIncompatible = o.hmrOnIncompatible ?? s.hmr.onIncompatible;\n    // The indicator element only exists when enabled at config time, so it can\n    // be hidden/shown (and its count toggled) live but not created here.\n    const indicatorVisible = o.hmrIndicatorVisible ?? s.hmr.indicatorEnabled;\n    const indicatorCount = o.hmrIndicatorCount ?? s.hmr.indicatorCount;\n    return html`\n      <table>\n        <tr>\n          <td class=\"key\">reconnect</td>\n          <td class=\"val\">\n            <label class=\"toggle\">\n              <input\n                type=\"checkbox\"\n                .checked=${reconnect}\n                @change=${(e: Event) =>\n                  this._set(\n                    'hmrReconnect',\n                    (e.target as HTMLInputElement).checked\n                  )}\n              />\n              ${reconnect ? 'on' : 'off'}\n            </label>\n            ${this._ovr(o.hmrReconnect !== undefined)}\n          </td>\n        </tr>\n        <tr>\n          <td class=\"key\">on incompatible</td>\n          <td class=\"val\">\n            <select\n              @change=${(e: Event) =>\n                this._set(\n                  'hmrOnIncompatible',\n                  (e.target as HTMLSelectElement).value as 'reload' | 'warn'\n                )}\n            >\n              <option value=\"reload\" ?selected=${onIncompatible === 'reload'}>\n                reload\n              </option>\n              <option value=\"warn\" ?selected=${onIncompatible === 'warn'}>\n                warn\n              </option>\n            </select>\n            ${this._ovr(o.hmrOnIncompatible !== undefined)}\n          </td>\n        </tr>\n        <tr class=${s.hmr.indicatorEnabled ? '' : 'row-disabled'}>\n          <td class=\"key\">indicator</td>\n          <td class=\"val\">\n            <label class=\"toggle\">\n              <input\n                type=\"checkbox\"\n                .checked=${indicatorVisible}\n                ?disabled=${!s.hmr.indicatorEnabled}\n                @change=${(e: Event) =>\n                  this._set(\n                    'hmrIndicatorVisible',\n                    (e.target as HTMLInputElement).checked\n                  )}\n              />\n              ${s.hmr.indicatorEnabled\n                ? indicatorVisible\n                  ? 'shown'\n                  : 'hidden'\n                : 'off (config)'}\n            </label>\n            ${this._ovr(o.hmrIndicatorVisible !== undefined)}\n          </td>\n        </tr>\n        <tr class=${s.hmr.indicatorEnabled ? '' : 'row-disabled'}>\n          <td class=\"key\">indicator count</td>\n          <td class=\"val\">\n            <label class=\"toggle\">\n              <input\n                type=\"checkbox\"\n                .checked=${indicatorCount}\n                ?disabled=${!s.hmr.indicatorEnabled}\n                @change=${(e: Event) =>\n                  this._set(\n                    'hmrIndicatorCount',\n                    (e.target as HTMLInputElement).checked\n                  )}\n              />\n              ${indicatorCount ? 'shown' : 'hidden'}\n            </label>\n            ${this._ovr(o.hmrIndicatorCount !== undefined)}\n          </td>\n        </tr>\n      </table>\n    `;\n  }\n\n  override render() {\n    if (!this._loaded) {\n      return html`<p class=\"loading\">Loading settings…</p>`;\n    }\n    const s = this._settings;\n    const appearance = this._renderAppearance();\n    if (s === null) {\n      return html`${appearance}\n        <p class=\"empty\">Settings unavailable.</p>`;\n    }\n    const hasOverride = Object.keys(this._override).length > 0;\n    return html`\n      <p class=\"note\">\n        Resolved from plugin options and <code>LIT_PLUGIN_*</code> env at\n        startup. Controls below override the running app live; the rest are\n        config-time (change them in your Vite config / <code>.env</code> and\n        restart).\n        ${hasOverride\n          ? html`<button class=\"reset\" @click=${this._reset}>\n              Reset to env\n            </button>`\n          : nothing}\n      </p>\n\n      ${appearance}\n\n      <section>\n        <h3>HMR ${this._pill(s.hmr.enabled)}</h3>\n        ${this._renderHmr(s)}\n      </section>\n\n      <section>\n        <h3>Source Overlay ${this._pill(s.sourceOverlay.enabled)}</h3>\n        ${s.sourceOverlay.enabled\n          ? html`<table>\n              ${this._readonlyRow(\n                'hotkey',\n                `Ctrl+Shift+${s.sourceOverlay.key.toUpperCase()}`,\n                'LIT_PLUGIN_SOURCE_OVERLAY_KEY'\n              )}\n              <tr>\n                <td class=\"key\">editor</td>\n                <td class=\"val\">\n                  <select\n                    @change=${(e: Event) =>\n                      this._set(\n                        'sourceOverlayEditor',\n                        (e.target as HTMLSelectElement).value\n                      )}\n                  >\n                    ${SOURCE_OVERLAY_EDITORS.map(\n                      (ed) =>\n                        html`<option\n                          value=${ed.value}\n                          ?selected=${ed.value ===\n                          (this._override.sourceOverlayEditor ??\n                            s.sourceOverlay.editor)}\n                        >\n                          ${ed.label}\n                        </option>`\n                    )}\n                  </select>\n                  ${this._ovr(this._override.sourceOverlayEditor !== undefined)}\n                </td>\n              </tr>\n              ${this._readonlyRow(\n                'throttle (ms)',\n                s.sourceOverlay.throttleMs,\n                'LIT_PLUGIN_SOURCE_OVERLAY_THROTTLE_MS'\n              )}\n            </table>`\n          : html`<p class=\"empty\">\n              Enable with <code>sourceOverlay: true</code> or\n              <code>LIT_PLUGIN_SOURCE_OVERLAY=true</code>.\n            </p>`}\n      </section>\n\n      <section>\n        <h3>Timeline ${this._pill(s.timeline)}</h3>\n        <p class=\"empty\">\n          Layers and recording are controlled in the Timeline tab.\n        </p>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'devtools-settings': DevtoolsSettings;\n  }\n}\n"]}

package/panel/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lit DevTools</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        height: 100vh;
+        overflow: hidden;
+      }
+    </style>
+    <!--
+      Color scheme: lit-devtools-panel.ts applies the saved preference on load
+      (see lib/color-scheme.ts). The default `auto` needs no JS — the injected
+      tokens'
+      `prefers-color-scheme` @media owns it, following the host/OS; an explicit
+      light/dark pins a `.color-scheme-*` class on :root.
+    -->
+  </head>
+  <body>
+    <lit-devtools-panel></lit-devtools-panel>
+  </body>
+</html>

package/panel/lit-devtools-panel.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { LitElement } from 'lit';
+import './timeline-view.js';
+import './components-view.js';
+import './devtools-settings.js';
+import '../lib/segmented-tabs.js';
+/**
+ * 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.
+ */
+export declare class LitDevtoolsPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _tab;
+    private _componentsView?;
+    private _onTabChange;
+    /** A timeline event's "inspect" link — open the Components tab on it. */
+    private _onInspectElement;
+    /**
+     * 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.
+     */
+    private _onInspectorActivate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-devtools-panel': LitDevtoolsPanel;
+    }
+}
+//# sourceMappingURL=lit-devtools-panel.d.ts.map

package/panel/lit-devtools-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-devtools-panel.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/lit-devtools-panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAOnD,OAAO,oBAAoB,CAAC;AAS5B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAqClC;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA2CpB;IAEO,OAAO,CAAC,IAAI,CAAgB;IAEX,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEnE,OAAO,CAAC,YAAY;IAIpB,yEAAyE;IACzE,OAAO,CAAC,iBAAiB;IAMzB;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IA4BnB,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}