vite-plugin-devtools-vue2 0.1.1 → 0.1.3

package/lib/panel.js

@@ -3,25 +3,14 @@
 // on every Vue scheduler flush.
 
 import { LitElement, css, html } from 'lit';
+import { DragThreshold, EdgeMargin, PanelEdge, PanelH, PanelW, SectionFilterThreshold, StoreKey } from './config.js';
 import hook from './hook.js';
 import { hide, highlight } from './inspector.js';
 import { isPicking, startPicking, stopPicking } from './picker.js';
 import { commitAll, getSnapshots, getStore, hasStore, travelTo, subscribe as vuexSubscribe } from './vuex.js';
+import { clearEvents, getEvents, subscribe as eventsSubscribe } from './events.js';
 import { buildTree, formatValue, getInstance } from './walker.js';
 
-// Persisted UI state (survives reloads). Only stable, cheap bits — not the
-// component tree / expanded set (ids are regenerated each load).
-const STORE_KEY = 'vue-devtools:ui';
-
-// Panel size (keep in sync with .panel CSS) — used to keep it on-screen.
-const PANEL_W = 620;
-const PANEL_H = 420;
-const EDGE_MARGIN = 12;
-// Distance from the viewport edge to the panel when open (leaves room for the
-// floating entry to sit in the gutter, matching the official devtools).
-const PANEL_EDGE = EDGE_MARGIN + 30 / 2;
-const DRAG_THRESHOLD = 4;
-
 export class VueDevToolsPanel extends LitElement {
     static properties = {
         tree: { state: true },
@@ -32,6 +21,8 @@ export class VueDevToolsPanel extends LitElement {
         query: { state: true },
         tab: { state: true },
         vuexSelected: { state: true },
+        timelineSelected: { state: true },
+        theme: { state: true },
         renderCodeText: { state: true }
     };
 
@@ -47,9 +38,15 @@ export class VueDevToolsPanel extends LitElement {
         this.query = '';
         this.tab = ui.tab || 'components';
         this.vuexSelected = 0;
+        this.timelineSelected = null;
+        this.theme = ui.theme || 'light';
         this.renderCodeText = null;
         this.valueExpanded = new Set();
         this.sectionCollapsed = new Set();
+        // Nodes collapsed within search results (default: all shown expanded).
+        this._searchCollapsed = new Set();
+        // Per-section (props/data/…) key filter text, keyed by section title.
+        this._sectionFilter = {};
         // Docked position of the entry/panel. Defaults to the bottom edge near
         // the right; { edge: 'left'|'right'|'top'|'bottom', along: number }.
         this._pos = ui.pos || { edge: 'bottom', along: Number.POSITIVE_INFINITY };
@@ -66,14 +63,16 @@ export class VueDevToolsPanel extends LitElement {
         // derived from `el.__vue__` anyway.
         this._domObserver = null;
         this._onFlush = () => this._scheduleRefresh();
-        this._onKeydown = e => this._handleKeydown(e);
+        this._onKeydown = event => this._handleKeydown(event);
         // Keep the entry/panel on-screen when the viewport shrinks. resize can
         // fire many times per second while dragging the window edge, and
         // _applyPos reads layout then writes styles — so coalesce to at most one
         // call per frame via rAF to avoid layout thrashing.
         this._resizeRaf = 0;
         this._onResize = () => {
-            if (this._resizeRaf) return;
+            if (this._resizeRaf) {
+                return;
+            }
             this._resizeRaf = requestAnimationFrame(() => {
                 this._resizeRaf = 0;
                 this._applyPos();
@@ -83,8 +82,8 @@ export class VueDevToolsPanel extends LitElement {
 
     static _loadUiState() {
         try {
-            return JSON.parse(localStorage.getItem(STORE_KEY)) || {};
-        } catch (e) {
+            return JSON.parse(localStorage.getItem(StoreKey)) || {};
+        } catch (err) {
             return {};
         }
     }
@@ -92,8 +91,8 @@ export class VueDevToolsPanel extends LitElement {
     _persistUiState() {
         try {
             const pos = this._pos && Number.isFinite(this._pos.along) ? this._pos : undefined;
-            localStorage.setItem(STORE_KEY, JSON.stringify({ collapsed: this.collapsed, tab: this.tab, pos }));
-        } catch (e) {
+            localStorage.setItem(StoreKey, JSON.stringify({ collapsed: this.collapsed, tab: this.tab, theme: this.theme, pos }));
+        } catch (err) {
             /* storage unavailable — ignore */
         }
     }
@@ -103,97 +102,107 @@ export class VueDevToolsPanel extends LitElement {
     // the viewport; clamped to stay fully on-screen.
     _applyPos() {
         const entry = this.renderRoot && this.renderRoot.querySelector('.entry');
-        if (!entry) return;
-        const p = this._pos || { edge: 'bottom', along: Number.POSITIVE_INFINITY };
-        const M = EDGE_MARGIN;
+        if (!entry) {
+            return;
+        }
+        const pos = this._pos || { edge: 'bottom', along: Number.POSITIVE_INFINITY };
+        const margin = EdgeMargin;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         const er = entry.getBoundingClientRect();
         const ew = er.width || 40;
         const eh = er.height || 40;
-        const clamp = (v, max) => Math.min(Math.max(M, v), Math.max(M, max));
+        const clamp = (value, max) => Math.min(Math.max(margin, value), Math.max(margin, max));
 
         // Clamped offset of the entry along its docked edge. We derive the panel
         // position from these numbers directly rather than re-reading the entry's
         // live rect — on a fresh open/refresh that rect can still be stale (reads
         // ~0), which left the entry bottom-right but the panel bottom-left.
-        const alongX = clamp(p.along, vw - ew - M);
-        const alongY = clamp(p.along, vh - eh - M);
+        const alongX = clamp(pos.along, vw - ew - margin);
+        const alongY = clamp(pos.along, vh - eh - margin);
 
         const es = entry.style;
         es.insetInlineStart = es.insetBlockStart = es.insetInlineEnd = es.insetBlockEnd = 'auto';
-        if (p.edge === 'right' || p.edge === 'left') {
-            es['inset' + (p.edge === 'right' ? 'InlineEnd' : 'InlineStart')] = M + 'px';
+        if (pos.edge === 'right' || pos.edge === 'left') {
+            es['inset' + (pos.edge === 'right' ? 'InlineEnd' : 'InlineStart')] = margin + 'px';
             es.insetBlockStart = alongY + 'px';
         } else {
-            es['inset' + (p.edge === 'bottom' ? 'BlockEnd' : 'BlockStart')] = M + 'px';
+            es['inset' + (pos.edge === 'bottom' ? 'BlockEnd' : 'BlockStart')] = margin + 'px';
             es.insetInlineStart = alongX + 'px';
         }
-        this.setAttribute('dock', p.edge);
+        this.setAttribute('dock', pos.edge);
 
         const panel = this.renderRoot.querySelector('.panel');
-        if (!panel) return;
+        if (!panel) {
+            return;
+        }
         const ps = panel.style;
         ps.insetInlineStart = ps.insetBlockStart = ps.insetInlineEnd = ps.insetBlockEnd = 'auto';
         // Entry center along its edge, computed from the clamped offsets above.
         const cx = alongX + ew / 2;
         const cy = alongY + eh / 2;
-        if (p.edge === 'right') {
-            ps.insetInlineEnd = PANEL_EDGE + 'px';
-            ps.insetBlockStart = clamp(cy - PANEL_H / 2, vh - PANEL_H - M) + 'px';
-        } else if (p.edge === 'left') {
-            ps.insetInlineStart = PANEL_EDGE + 'px';
-            ps.insetBlockStart = clamp(cy - PANEL_H / 2, vh - PANEL_H - M) + 'px';
-        } else if (p.edge === 'top') {
-            ps.insetBlockStart = PANEL_EDGE + 'px';
-            ps.insetInlineStart = clamp(cx - PANEL_W / 2, vw - PANEL_W - M) + 'px';
+        if (pos.edge === 'right') {
+            ps.insetInlineEnd = PanelEdge + 'px';
+            ps.insetBlockStart = clamp(cy - PanelH / 2, vh - PanelH - margin) + 'px';
+        } else if (pos.edge === 'left') {
+            ps.insetInlineStart = PanelEdge + 'px';
+            ps.insetBlockStart = clamp(cy - PanelH / 2, vh - PanelH - margin) + 'px';
+        } else if (pos.edge === 'top') {
+            ps.insetBlockStart = PanelEdge + 'px';
+            ps.insetInlineStart = clamp(cx - PanelW / 2, vw - PanelW - margin) + 'px';
         } else {
-            ps.insetBlockEnd = PANEL_EDGE + 'px';
-            ps.insetInlineStart = clamp(cx - PANEL_W / 2, vw - PANEL_W - M) + 'px';
+            ps.insetBlockEnd = PanelEdge + 'px';
+            ps.insetInlineStart = clamp(cx - PanelW / 2, vw - PanelW - margin) + 'px';
         }
     }
 
     // Drag the always-visible entry. Movement over a threshold = drag (live snap
     // to nearest edge, panel follows); a plain click toggles the panel.
-    _startDrag(e) {
-        if (e.button !== 0) return;
-        e.preventDefault();
+    _startDrag(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
         hide(); // clear any hover highlight before dragging
         const entry = this.renderRoot.querySelector('.entry');
         const rect = entry.getBoundingClientRect();
         this._drag = {
-            startX: e.clientX,
-            startY: e.clientY,
-            offX: e.clientX - rect.left,
-            offY: e.clientY - rect.top,
+            startX: event.clientX,
+            startY: event.clientY,
+            offX: event.clientX - rect.left,
+            offY: event.clientY - rect.top,
             moved: false
         };
-        this._onDragMove = ev => this._dragMove(ev);
-        this._onDragUp = ev => this._dragUp(ev);
+        this._onDragMove = event => this._dragMove(event);
+        this._onDragUp = event => this._dragUp(event);
         window.addEventListener('pointermove', this._onDragMove, true);
         window.addEventListener('pointerup', this._onDragUp, true);
     }
 
-    _onFabPointerDown(e) {
-        this._startDrag(e);
+    _onFabPointerDown(event) {
+        this._startDrag(event);
     }
 
-    _dragMove(e) {
-        const d = this._drag;
-        if (!d) return;
-        if (!d.moved && Math.abs(e.clientX - d.startX) + Math.abs(e.clientY - d.startY) < DRAG_THRESHOLD) return;
-        d.moved = true;
+    _dragMove(event) {
+        const drag = this._drag;
+        if (!drag) {
+            return;
+        }
+        if (!drag.moved && Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) < DragThreshold) {
+            return;
+        }
+        drag.moved = true;
         // Snap to the nearest edge live during the drag (not on release).
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         const dist = {
-            left: e.clientX,
-            right: vw - e.clientX,
-            top: e.clientY,
-            bottom: vh - e.clientY
+            left: event.clientX,
+            right: vw - event.clientX,
+            top: event.clientY,
+            bottom: vh - event.clientY
         };
-        const edge = Object.keys(dist).reduce((a, b) => (dist[b] < dist[a] ? b : a));
-        const along = edge === 'left' || edge === 'right' ? e.clientY - d.offY : e.clientX - d.offX;
+        const edge = Object.keys(dist).reduce((best, current) => (dist[current] < dist[best] ? current : best));
+        const along = edge === 'left' || edge === 'right' ? event.clientY - drag.offY : event.clientX - drag.offX;
         this._pos = { edge, along };
         this._applyPos();
     }
@@ -201,10 +210,12 @@ export class VueDevToolsPanel extends LitElement {
     _dragUp() {
         window.removeEventListener('pointermove', this._onDragMove, true);
         window.removeEventListener('pointerup', this._onDragUp, true);
-        const d = this._drag;
+        const drag = this._drag;
         this._drag = null;
-        if (!d) return;
-        if (!d.moved) {
+        if (!drag) {
+            return;
+        }
+        if (!drag.moved) {
             // plain click → toggle the panel
             this.collapsed = !this.collapsed;
             return;
@@ -219,6 +230,7 @@ export class VueDevToolsPanel extends LitElement {
         window.addEventListener('keydown', this._onKeydown, true);
         window.addEventListener('resize', this._onResize);
         this._vuexUnsub = vuexSubscribe(() => this.requestUpdate());
+        this._eventsUnsub = eventsSubscribe(() => this.requestUpdate());
         // DOM-based fallback refresh (see constructor). Only childList/subtree —
         // our own panel renders inside a shadow root (not observed), and the
         // inspector highlight box only mutates via style, so this won't loop.
@@ -242,12 +254,22 @@ export class VueDevToolsPanel extends LitElement {
             this._domObserver.disconnect();
             this._domObserver = null;
         }
-        if (this._vuexUnsub) this._vuexUnsub();
+        if (this._vuexUnsub) {
+            this._vuexUnsub();
+        }
+        if (this._eventsUnsub) {
+            this._eventsUnsub();
+        }
         stopPicking();
     }
 
     firstUpdated() {
         this._applyPos();
+        this.setAttribute('theme', this.theme);
+    }
+
+    _toggleTheme() {
+        this.theme = this.theme === 'dark' ? 'light' : 'dark';
     }
 
     _scheduleRefresh() {
@@ -270,16 +292,23 @@ export class VueDevToolsPanel extends LitElement {
     }
 
     _toggle(id) {
-        if (this.expanded.has(id)) this.expanded.delete(id);
-        else this.expanded.add(id);
+        if (this.expanded.has(id)) {
+            this.expanded.delete(id);
+        } else {
+            this.expanded.add(id);
+        }
         this.requestUpdate();
     }
 
     // Highlight the page DOM only while hovering a tree row (vue-devtools style).
     _hoverEnter(id) {
-        if (this._drag) return; // don't highlight while dragging the entry/panel
+        if (this._drag) {
+            return; // don't highlight while dragging the entry/panel
+        }
         const vm = getInstance(id);
-        if (vm) highlight(vm);
+        if (vm) {
+            highlight(vm);
+        }
     }
 
     _hoverLeave() {
@@ -304,7 +333,9 @@ export class VueDevToolsPanel extends LitElement {
     _selectVm(vm) {
         this.refresh();
         const path = this._pathToVm(vm);
-        if (!path.length) return;
+        if (!path.length) {
+            return;
+        }
         for (let i = 0; i < path.length - 1; i++) this.expanded.add(path[i]);
         this._select(path[path.length - 1]);
         this._scrollToSelected = true;
@@ -319,10 +350,18 @@ export class VueDevToolsPanel extends LitElement {
                 found = next;
                 return true;
             }
-            for (const c of node.children || []) if (dfs(c, next)) return true;
+            for (const child of node.children || []) {
+                if (dfs(child, next)) {
+                    return true;
+                }
+            }
             return false;
         };
-        for (const r of this.tree) if (dfs(r, [])) break;
+        for (const root of this.tree) {
+            if (dfs(root, [])) {
+                break;
+            }
+        }
         return found || [];
     }
 
@@ -332,19 +371,23 @@ export class VueDevToolsPanel extends LitElement {
     // match nested inside another match is not promoted (it shows in the subtree).
     _computeFilter() {
         const q = this.query.trim().toLowerCase();
-        if (!q) return null;
+        if (!q) {
+            return null;
+        }
         const matched = new Set();
         const mark = node => {
-            if (node.name.toLowerCase().includes(q)) matched.add(node.id);
-            for (const c of node.children || []) mark(c);
+            if (node.name.toLowerCase().includes(q)) {
+                matched.add(node.id);
+            }
+            for (const child of node.children || []) mark(child);
         };
-        for (const r of this.tree) mark(r);
+        for (const root of this.tree) mark(root);
 
         const roots = [];
         const show = new Set();
         const collect = node => {
             show.add(node.id);
-            for (const c of node.children || []) collect(c);
+            for (const child of node.children || []) collect(child);
         };
         const walk = (node, hasMatchedAncestor) => {
             const isMatch = matched.has(node.id);
@@ -352,9 +395,9 @@ export class VueDevToolsPanel extends LitElement {
                 roots.push(node);
                 collect(node);
             }
-            for (const c of node.children || []) walk(c, hasMatchedAncestor || isMatch);
+            for (const child of node.children || []) walk(child, hasMatchedAncestor || isMatch);
         };
-        for (const r of this.tree) walk(r, false);
+        for (const root of this.tree) walk(root, false);
         return { roots, show, q };
     }
 
@@ -365,81 +408,130 @@ export class VueDevToolsPanel extends LitElement {
         const parent = new Map();
         const node = new Map();
         if (filter) {
-            const walk = (n, p) => {
-                node.set(n.id, n);
-                parent.set(n.id, p);
-                order.push(n.id);
-                for (const c of n.children || []) {
-                    if (filter.show.has(c.id)) walk(c, n.id);
+            const walk = (treeNode, parentId) => {
+                node.set(treeNode.id, treeNode);
+                parent.set(treeNode.id, parentId);
+                order.push(treeNode.id);
+                if (this._searchCollapsed.has(treeNode.id)) {
+                    return; // collapsed in search
+                }
+                for (const child of treeNode.children || []) {
+                    if (filter.show.has(child.id)) {
+                        walk(child, treeNode.id);
+                    }
                 }
             };
-            for (const r of filter.roots) walk(r, null);
+            for (const root of filter.roots) walk(root, null);
             return { order, parent, node };
         }
-        const walk = (n, p) => {
-            node.set(n.id, n);
-            parent.set(n.id, p);
-            order.push(n.id);
-            if (n.children && n.children.length && this.expanded.has(n.id)) {
-                for (const c of n.children) walk(c, n.id);
+        const walk = (treeNode, parentId) => {
+            node.set(treeNode.id, treeNode);
+            parent.set(treeNode.id, parentId);
+            order.push(treeNode.id);
+            if (treeNode.children && treeNode.children.length && this.expanded.has(treeNode.id)) {
+                for (const child of treeNode.children) walk(child, treeNode.id);
             }
         };
-        for (const r of this.tree) walk(r, null);
+        for (const root of this.tree) walk(root, null);
         return { order, parent, node };
     }
 
     // Arrow-key navigation once a component is selected (VS Code / devtools style):
     // ↑/↓ move through visible rows, → step into / expand, ← step out / collapse.
     // During search the subtree is always shown, so →/← just navigate in/out.
-    _handleKeydown(e) {
-        if (this.collapsed || this.selectedId == null) return;
-        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+    _handleKeydown(event) {
+        if (this.collapsed) {
+            return;
+        }
+        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            return;
+        }
         // Don't hijack arrow keys while typing in a field. composedPath sees into
         // our shadow root (the search box) as well as the app's own inputs.
-        const path = e.composedPath ? e.composedPath() : [];
+        const path = event.composedPath ? event.composedPath() : [];
         const inEditable = path.some(el => el && el.tagName && (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable));
-        if (inEditable) return;
+        if (inEditable) {
+            return;
+        }
 
+        // Timeline tab: ↑/↓ move between entries.
+        if (this.tab === 'timeline') {
+            if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+                return;
+            }
+            const entries = this._timelineEntries();
+            if (!entries.length) {
+                return;
+            }
+            const curIdx = entries.findIndex(item => item.id === this.timelineSelected);
+            const base = curIdx < 0 ? entries.length - 1 : curIdx;
+            const nextIdx = event.key === 'ArrowDown' ? Math.min(entries.length - 1, base + 1) : Math.max(0, base - 1);
+            this.timelineSelected = entries[nextIdx].id;
+            this._scrollToSelected = true;
+            event.preventDefault();
+            return;
+        }
+
+        // Components tab: tree navigation (needs a selected node).
+        if (this.selectedId == null) {
+            return;
+        }
         const filter = this._computeFilter();
         const searching = !!filter;
         const { order, parent, node } = this._index(filter);
         const id = this.selectedId;
         const cur = node.get(id);
-        if (!cur) return;
-        const i = order.indexOf(id);
-        if (i < 0) return;
-        const shownChildren = (cur.children || []).filter(c => !filter || filter.show.has(c.id));
+        if (!cur) {
+            return;
+        }
+        const index = order.indexOf(id);
+        if (index < 0) {
+            return;
+        }
+        const shownChildren = (cur.children || []).filter(item => !filter || filter.show.has(item.id));
         const hasChildren = shownChildren.length > 0;
-        // A node is "open" if its children are currently shown. In search mode the
-        // matched subtree is always shown.
-        const isOpen = searching || this.expanded.has(id);
+        // "open" respects the active mode: normal tree uses `expanded`, search
+        // uses `_searchCollapsed` (default open).
+        const isOpen = searching ? !this._searchCollapsed.has(id) : this.expanded.has(id);
         let next = null;
 
-        if (e.key === 'ArrowDown') {
-            next = order[Math.min(order.length - 1, i + 1)];
-        } else if (e.key === 'ArrowUp') {
-            next = order[Math.max(0, i - 1)];
-        } else if (e.key === 'ArrowRight') {
+        if (event.key === 'ArrowDown') {
+            next = order[Math.min(order.length - 1, index + 1)];
+        } else if (event.key === 'ArrowUp') {
+            next = order[Math.max(0, index - 1)];
+        } else if (event.key === 'ArrowRight') {
             // Closed with children -> open it; already open -> step into first child.
-            if (hasChildren && !isOpen) this.expanded.add(id);
-            else if (hasChildren && isOpen) next = shownChildren[0].id;
-        } else if (e.key === 'ArrowLeft') {
+            if (hasChildren && !isOpen) {
+                searching ? this._searchCollapsed.delete(id) : this.expanded.add(id);
+            } else if (hasChildren && isOpen) {
+                next = shownChildren[0].id;
+            }
+        } else if (event.key === 'ArrowLeft') {
             // Check open/closed FIRST: open -> collapse; closed (or leaf) -> parent.
-            if (isOpen && hasChildren && !searching) this.expanded.delete(id);
-            else next = parent.get(id);
+            if (isOpen && hasChildren) {
+                searching ? this._searchCollapsed.add(id) : this.expanded.delete(id);
+            } else {
+                next = parent.get(id);
+            }
         }
 
-        e.preventDefault();
-        if (next != null) this._select(next);
+        event.preventDefault();
+        if (next != null) {
+            this._select(next);
+        }
         this._scrollToSelected = true;
         this.requestUpdate();
     }
 
     updated(changed) {
         // Persist remembered UI bits across reloads.
-        if (changed && (changed.has('collapsed') || changed.has('tab'))) {
+        if (changed && (changed.has('collapsed') || changed.has('tab') || changed.has('theme'))) {
             this._persistUiState();
         }
+        // Reflect the theme onto the host so the CSS variable overrides apply.
+        if (changed && changed.has('theme')) {
+            this.setAttribute('theme', this.theme);
+        }
         // Re-clamp the docked position when switching fab <-> panel (sizes differ).
         if (changed && changed.has('collapsed')) {
             this._applyPos();
@@ -455,16 +547,20 @@ export class VueDevToolsPanel extends LitElement {
         }
         // When the query changes, auto-select the first match (like vue-devtools).
         if (changed && changed.has('query') && this.query.trim()) {
-            const f = this._computeFilter();
-            if (f && f.roots.length && !f.show.has(this.selectedId)) {
-                this._select(f.roots[0].id);
+            const filter = this._computeFilter();
+            if (filter && filter.roots.length && !filter.show.has(this.selectedId)) {
+                this._select(filter.roots[0].id);
                 this._scrollToSelected = true;
             }
         }
-        if (!this._scrollToSelected) return;
+        if (!this._scrollToSelected) {
+            return;
+        }
         this._scrollToSelected = false;
         const el = this.renderRoot.querySelector('.node.selected');
-        if (el) el.scrollIntoView({ block: 'nearest' });
+        if (el) {
+            el.scrollIntoView({ block: 'nearest' });
+        }
     }
 
     _renderNode(node, depth) {
@@ -482,8 +578,8 @@ export class VueDevToolsPanel extends LitElement {
                 >
                     <span
                         class="caret-btn"
-                        @click=${e => {
-                            e.stopPropagation();
+                        @click=${event => {
+                            event.stopPropagation();
                             this._toggle(node.id);
                         }}
                     >
@@ -491,7 +587,7 @@ export class VueDevToolsPanel extends LitElement {
                     </span>
                     <span class="tag">&lt;${node.name}&gt;</span>
                 </div>
-                ${hasChildren && isOpen ? node.children.map(c => this._renderNode(c, depth + 1)) : null}
+                ${hasChildren && isOpen ? node.children.map(item => this._renderNode(item, depth + 1)) : null}
             </div>
         `;
     }
@@ -499,8 +595,10 @@ export class VueDevToolsPanel extends LitElement {
     // Search result row: matched node as a subtree root, with all descendants
     // shown (always open). Ancestors are omitted. Arrow is non-interactive here.
     _renderSearchNode(node, depth, show) {
-        const kids = (node.children || []).filter(c => show.has(c.id));
+        const kids = (node.children || []).filter(item => show.has(item.id));
+        const hasKids = kids.length > 0;
         const isSelected = node.id === this.selectedId;
+        const open = !this._searchCollapsed.has(node.id); // default open in search
         return html`
             <div>
                 <div
@@ -510,35 +608,97 @@ export class VueDevToolsPanel extends LitElement {
                     @mouseenter=${() => this._hoverEnter(node.id)}
                     @mouseleave=${() => this._hoverLeave()}
                 >
-                    <span class="caret-btn static">${this._caret(kids.length > 0, kids.length === 0)}</span>
+                    <span
+                        class="caret-btn"
+                        @click=${event => {
+                            event.stopPropagation();
+                            if (hasKids) {
+                                this._toggleSearchNode(node.id);
+                            }
+                        }}
+                    >
+                        ${this._caret(open && hasKids, !hasKids)}
+                    </span>
                     <span class="tag">&lt;${node.name}&gt;</span>
                 </div>
-                ${kids.map(c => this._renderSearchNode(c, depth + 1, show))}
+                ${hasKids && open ? kids.map(item => this._renderSearchNode(item, depth + 1, show)) : null}
             </div>
         `;
     }
 
+    _toggleSearchNode(id) {
+        if (this._searchCollapsed.has(id)) {
+            this._searchCollapsed.delete(id);
+        } else {
+            this._searchCollapsed.add(id);
+        }
+        this.requestUpdate();
+    }
+
     // Render an object as a titled, collapsible section of expandable value rows.
     // `editable` enables inline editing of primitive leaves (writes back into obj).
+    // Sections with many keys get a live filter input in the header.
     _renderKvSection(title, obj, editable) {
-        const keys = obj ? Object.keys(obj) : [];
-        if (!keys.length) return null;
+        const allKeys = obj ? Object.keys(obj) : [];
+        if (!allKeys.length) {
+            return null;
+        }
         const collapsed = this.sectionCollapsed.has(title);
+        const showFilter = !collapsed && allKeys.length > SectionFilterThreshold;
+        const q = (this._sectionFilter[title] || '').trim().toLowerCase();
+        const keys = q ? allKeys.filter(item => item.toLowerCase().includes(q)) : allKeys;
         return html`
-            <div class="section-title" @click=${() => this._toggleSection(title)}>${this._caret(!collapsed, false)} ${title}</div>
-            ${collapsed ? null : keys.map(k => this._renderValueRow(k, obj[k], `${title}.${k}`, 0, obj, editable))}
+            <div class="section-title" @click=${() => this._toggleSection(title)}>
+                ${this._caret(!collapsed, false)}
+                <span class="section-name">${title}</span>
+                ${showFilter
+                    ? html`
+                          <input
+                              class="section-filter"
+                              type="search"
+                              placeholder="filter…"
+                              .value=${this._sectionFilter[title] || ''}
+                              @click=${event => event.stopPropagation()}
+                              @keydown=${event => {
+                                  if (event.key === 'Escape') {
+                                      this._sectionFilter[title] = '';
+                                      this.requestUpdate();
+                                  }
+                                  event.stopPropagation();
+                              }}
+                              @input=${event => {
+                                  this._sectionFilter[title] = event.target.value;
+                                  this.requestUpdate();
+                              }}
+                          />
+                      `
+                    : null}
+            </div>
+            ${collapsed
+                ? null
+                : keys.length
+                ? keys.map(item => this._renderValueRow(item, obj[item], `${title}.${item}`, 0, obj, editable))
+                : html`
+                      <div class="empty">No match</div>
+                  `}
         `;
     }
 
     _toggleSection(title) {
-        if (this.sectionCollapsed.has(title)) this.sectionCollapsed.delete(title);
-        else this.sectionCollapsed.add(title);
+        if (this.sectionCollapsed.has(title)) {
+            this.sectionCollapsed.delete(title);
+        } else {
+            this.sectionCollapsed.add(title);
+        }
         this.requestUpdate();
     }
 
     _toggleValue(path) {
-        if (this.valueExpanded.has(path)) this.valueExpanded.delete(path);
-        else this.valueExpanded.add(path);
+        if (this.valueExpanded.has(path)) {
+            this.valueExpanded.delete(path);
+        } else {
+            this.valueExpanded.add(path);
+        }
         this.requestUpdate();
     }
 
@@ -546,7 +706,7 @@ export class VueDevToolsPanel extends LitElement {
     // `editable` is set, primitive leaves can be clicked to edit in place.
     _renderValueRow(keyLabel, value, path, depth, parent, editable) {
         const isObj = value !== null && typeof value === 'object';
-        const keys = isObj ? (Array.isArray(value) ? value.map((_, i) => i) : Object.keys(value)) : [];
+        const keys = isObj ? (Array.isArray(value) ? value.map((_, index) => index) : Object.keys(value)) : [];
         const expandable = isObj && keys.length > 0;
         const open = this.valueExpanded.has(path);
         const canEdit = editable && !isObj && typeof value !== 'function';
@@ -564,18 +724,20 @@ export class VueDevToolsPanel extends LitElement {
                           <input
                               class="edit-input"
                               .value=${String(value)}
-                              @click=${e => e.stopPropagation()}
-                              @keydown=${e => this._onEditKeydown(e, parent, keyLabel, value)}
-                              @blur=${e => this._commitEdit(parent, keyLabel, e.target.value, value)}
+                              @click=${event => event.stopPropagation()}
+                              @keydown=${event => this._onEditKeydown(event, parent, keyLabel, value)}
+                              @blur=${event => this._commitEdit(parent, keyLabel, event.target.value, value)}
                           />
                       `
                     : html`
                           <span
                               class="val ${this._valClass(value)} ${canEdit ? 'editable' : ''}"
                               title=${preview}
-                              @click=${e => {
-                                  if (!canEdit) return;
-                                  e.stopPropagation();
+                              @click=${event => {
+                                  if (!canEdit) {
+                                      return;
+                                  }
+                                  event.stopPropagation();
                                   this._editingPath = path;
                                   this._focusEdit = true;
                                   this.requestUpdate();
@@ -589,8 +751,8 @@ export class VueDevToolsPanel extends LitElement {
                           <button
                               class="copy-btn"
                               title="Copy value"
-                              @click=${e => {
-                                  e.stopPropagation();
+                              @click=${event => {
+                                  event.stopPropagation();
                                   this._copyValue(value);
                               }}
                           >
@@ -599,7 +761,7 @@ export class VueDevToolsPanel extends LitElement {
                       `
                     : null}
             </div>
-            ${expandable && open ? keys.map(k => this._renderValueRow(k, value[k], `${path}.${k}`, depth + 1, value, editable)) : null}
+            ${expandable && open ? keys.map(item => this._renderValueRow(item, value[item], `${path}.${item}`, depth + 1, value, editable)) : null}
         `;
     }
 
@@ -608,7 +770,7 @@ export class VueDevToolsPanel extends LitElement {
         if (value !== null && typeof value === 'object') {
             try {
                 text = JSON.stringify(value, null, 2);
-            } catch (e) {
+            } catch (err) {
                 text = String(value);
             }
         } else {
@@ -636,17 +798,17 @@ export class VueDevToolsPanel extends LitElement {
         ta.select();
         try {
             document.execCommand('copy');
-        } catch (e) {
+        } catch (err) {
             /* ignore */
         }
         document.body.removeChild(ta);
     }
 
-    _onEditKeydown(e, parent, key, oldValue) {
-        e.stopPropagation();
-        if (e.key === 'Enter') {
-            this._commitEdit(parent, key, e.target.value, oldValue);
-        } else if (e.key === 'Escape') {
+    _onEditKeydown(event, parent, key, oldValue) {
+        event.stopPropagation();
+        if (event.key === 'Enter') {
+            this._commitEdit(parent, key, event.target.value, oldValue);
+        } else if (event.key === 'Escape') {
             this._editingPath = null;
             this.requestUpdate();
         }
@@ -657,34 +819,47 @@ export class VueDevToolsPanel extends LitElement {
     _commitEdit(parent, key, rawStr, oldValue) {
         this._editingPath = null;
         let parsed = rawStr;
-        const t = typeof oldValue;
-        if (t === 'number') {
-            const n = Number(rawStr);
-            parsed = Number.isNaN(n) ? oldValue : n;
-        } else if (t === 'boolean') {
+        const type = typeof oldValue;
+        if (type === 'number') {
+            const num = Number(rawStr);
+            parsed = Number.isNaN(num) ? oldValue : num;
+        } else if (type === 'boolean') {
             parsed = rawStr === 'true' || rawStr === '1';
         } else if (oldValue === null || oldValue === undefined) {
             try {
                 parsed = JSON.parse(rawStr);
-            } catch (e) {
+            } catch (err) {
                 parsed = rawStr;
             }
         }
         const Vue = hook.Vue;
         if (parent) {
-            if (Vue && Vue.set) Vue.set(parent, key, parsed);
-            else parent[key] = parsed;
+            if (Vue && Vue.set) {
+                Vue.set(parent, key, parsed);
+            } else {
+                parent[key] = parsed;
+            }
         }
         this.requestUpdate();
     }
 
     _valClass(value) {
-        if (value === null || value === undefined) return 'v-null';
-        const t = typeof value;
-        if (t === 'number') return 'v-num';
-        if (t === 'boolean') return 'v-bool';
-        if (t === 'string') return 'v-str';
-        if (t === 'function') return 'v-fn';
+        if (value === null || value === undefined) {
+            return 'v-null';
+        }
+        const type = typeof value;
+        if (type === 'number') {
+            return 'v-num';
+        }
+        if (type === 'boolean') {
+            return 'v-bool';
+        }
+        if (type === 'string') {
+            return 'v-str';
+        }
+        if (type === 'function') {
+            return 'v-fn';
+        }
         return 'v-obj';
     }
 
@@ -704,20 +879,21 @@ export class VueDevToolsPanel extends LitElement {
             `;
         }
         const vm = getInstance(this.selectedId);
-        if (!vm)
+        if (!vm) {
             return html`
                 <div class="empty">Component unmounted</div>
             `;
+        }
 
         const propsObj = vm._props || {};
         const dataObj = vm._data || vm.$data || {};
         const compDefs = (vm.$options && vm.$options.computed) || {};
         const compObj = {};
-        for (const k of Object.keys(compDefs)) {
+        for (const key of Object.keys(compDefs)) {
             try {
-                compObj[k] = vm[k];
+                compObj[key] = vm[key];
             } catch (err) {
-                compObj[k] = `⚠ ${err && err.message}`;
+                compObj[key] = `⚠ ${err && err.message}`;
             }
         }
         const attrsObj = vm.$attrs || {};
@@ -760,27 +936,34 @@ export class VueDevToolsPanel extends LitElement {
     }
 
     _vmName(vm) {
-        const o = vm.$options || {};
-        let n = o.name || o._componentTag;
-        if (!n && o.__file)
-            n = String(o.__file)
+        const options = vm.$options || {};
+        let name = options.name || options._componentTag;
+        if (!name && options.__file) {
+            name = String(options.__file)
                 .split(/[\\/]/)
                 .pop()
                 .replace(/\.vue$/, '');
-        if (!n && vm.$root === vm) n = 'Root';
-        return n || 'Anonymous';
+        }
+        if (!name && vm.$root === vm) {
+            name = 'Root';
+        }
+        return name || 'Anonymous';
     }
 
     // Ask the Vite dev server to open the component's source file in the editor.
     _openInEditor(file) {
-        if (!file) return;
+        if (!file) {
+            return;
+        }
         fetch('/__open-in-editor?file=' + encodeURIComponent(file)).catch(() => {});
     }
 
     // Scroll the component's root DOM element into view and flash the highlight.
     _scrollToComponent(vm) {
         const el = vm && vm.$el;
-        if (!el || !el.scrollIntoView) return;
+        if (!el || !el.scrollIntoView) {
+            return;
+        }
         el.scrollIntoView({
             behavior: 'smooth',
             block: 'center',
@@ -803,17 +986,23 @@ export class VueDevToolsPanel extends LitElement {
         const lines = code.split('\n');
         let min = Infinity;
         for (let i = 1; i < lines.length; i++) {
-            if (!lines[i].trim()) continue;
+            if (!lines[i].trim()) {
+                continue;
+            }
             const indent = lines[i].match(/^[ \t]*/)[0].length;
-            if (indent < min) min = indent;
+            if (indent < min) {
+                min = indent;
+            }
         }
-        if (!isFinite(min) || min === 0) return code;
-        return lines.map((l, i) => (i === 0 ? l : l.slice(min))).join('\n');
+        if (!isFinite(min) || min === 0) {
+            return code;
+        }
+        return lines.map((item, index) => (index === 0 ? item : item.slice(min))).join('\n');
     }
 
     render() {
         return html`
-            <div class="entry" @pointerdown=${e => this._onFabPointerDown(e)}>
+            <div class="entry" @pointerdown=${event => this._onFabPointerDown(event)}>
                 <span class="fab-icon">${this._vueLogo()}</span>
             </div>
             ${this.collapsed ? null : this._renderPanel()}
@@ -833,6 +1022,10 @@ export class VueDevToolsPanel extends LitElement {
                         ${this._icon('vuex')}
                         <span class="tip">Vuex</span>
                     </button>
+                    <button class="side-tab ${this.tab === 'timeline' ? 'active' : ''}" @click=${() => (this.tab = 'timeline')}>
+                        ${this._icon('timeline')}
+                        <span class="tip">Timeline</span>
+                    </button>
                     <span class="side-spacer"></span>
                     ${this.tab === 'components'
                         ? html`
@@ -842,12 +1035,18 @@ export class VueDevToolsPanel extends LitElement {
                               </button>
                           `
                         : null}
+                    <button class="side-tab" @click=${() => this._toggleTheme()}>
+                        ${this._icon(this.theme === 'dark' ? 'sun' : 'moon')}
+                        <span class="tip">${this.theme === 'dark' ? 'Light theme' : 'Dark theme'}</span>
+                    </button>
                     <button class="side-tab side-tab--min" @click=${() => (this.collapsed = true)}>
                         ${this._icon('min')}
                         <span class="tip">Minimize</span>
                     </button>
                 </nav>
-                <div class="main">${this.tab === 'components' ? this._renderComponents() : this._renderVuex()}</div>
+                <div class="main">
+                    ${this.tab === 'components' ? this._renderComponents() : this.tab === 'vuex' ? this._renderVuex() : this._renderTimeline()}
+                </div>
                 ${this.renderCodeText != null
                     ? html`
                           <div class="code-overlay">
@@ -873,11 +1072,11 @@ export class VueDevToolsPanel extends LitElement {
                     type="search"
                     placeholder="Search components…"
                     .value=${this.query}
-                    @input=${e => (this.query = e.target.value)}
-                    @keydown=${e => {
-                        if (e.key === 'Escape') {
+                    @input=${event => (this.query = event.target.value)}
+                    @keydown=${event => {
+                        if (event.key === 'Escape') {
                             this.query = '';
-                            e.stopPropagation();
+                            event.stopPropagation();
                         }
                     }}
                 />
@@ -893,8 +1092,8 @@ export class VueDevToolsPanel extends LitElement {
                               <div class="empty">No component matches</div>
                           `
                         : filter
-                        ? filter.roots.map(n => this._renderSearchNode(n, 0, filter.show))
-                        : this.tree.map(n => this._renderNode(n, 0))}
+                        ? filter.roots.map(item => this._renderSearchNode(item, 0, filter.show))
+                        : this.tree.map(item => this._renderNode(item, 0))}
                 </div>
                 <div class="detail">${this._renderDetail()}</div>
             </div>
@@ -928,10 +1127,10 @@ export class VueDevToolsPanel extends LitElement {
                         </button>
                     </div>
                     ${snaps.map(
-                        (s, i) => html`
-                            <div class="node ${i === sel ? 'selected' : ''}" @click=${() => (this.vuexSelected = i)}>
-                                <span class="mut-index">${s.base ? '' : i}</span>
-                                <span class="tag">${s.base ? 'Base State' : s.type}</span>
+                        (item, index) => html`
+                            <div class="node ${index === sel ? 'selected' : ''}" @click=${() => (this.vuexSelected = index)}>
+                                <span class="mut-index">${item.base ? '' : index}</span>
+                                <span class="tag">${item.base ? 'Base State' : item.type}</span>
                             </div>
                         `
                     )}
@@ -955,10 +1154,102 @@ export class VueDevToolsPanel extends LitElement {
         `;
     }
 
-    // Plugin logo (Baidu mark).
+    // Merge component events + Vuex mutations into one chronological timeline
+    // (like the vue-devtools v7 Timeline).
+    _timelineEntries() {
+        const entries = [];
+        for (const event of getEvents()) {
+            entries.push({ id: `e${event.id}`, kind: 'event', time: event.time, title: event.name, sub: `<${event.component}>`, event: event });
+        }
+        getSnapshots().forEach((item, index) => {
+            if (item.base) {
+                return;
+            }
+            entries.push({ id: `m${index}`, kind: 'mutation', time: item.time || 0, title: item.type, sub: 'vuex', snap: item, index });
+        });
+        entries.sort((first, second) => first.time - second.time);
+        return entries;
+    }
+
+    _renderTimeline() {
+        const entries = this._timelineEntries();
+        if (!entries.length) {
+            return html`
+                <div class="body"><div class="empty">No timeline activity yet</div></div>
+            `;
+        }
+        const sel = entries.find(item => item.id === this.timelineSelected) || entries[entries.length - 1];
+        return html`
+            <div class="body">
+                <div class="tree">
+                    <div class="vuex-bar">
+                        <button
+                            class="btn"
+                            title="Clear recorded events"
+                            @click=${() => {
+                                clearEvents();
+                                this.timelineSelected = null;
+                            }}
+                        >
+                            ✕ Clear events
+                        </button>
+                    </div>
+                    ${entries.map(
+                        item => html`
+                            <div class="node ${item.id === sel.id ? 'selected' : ''}" @click=${() => (this.timelineSelected = item.id)}>
+                                <span class="ev-time">${this._formatTime(item.time)}</span>
+                                <span class="tag">${item.title}</span>
+                                <span class="ev-comp">${item.sub}</span>
+                            </div>
+                        `
+                    )}
+                </div>
+                <div class="detail">${this._renderTimelineDetail(sel)}</div>
+            </div>
+        `;
+    }
+
+    _renderTimelineDetail(entry) {
+        if (!entry) {
+            return null;
+        }
+        if (entry.kind === 'event') {
+            const event = entry.event;
+            const argsObj = {};
+            (event.args || []).forEach((item, index) => {
+                argsObj[index] = item;
+            });
+            return html`
+                ${this._renderKvSection('event', { name: event.name, from: event.component, time: new Date(event.time).toLocaleTimeString() }, false)}
+                ${event.args && event.args.length
+                    ? this._renderKvSection('payload', argsObj, false)
+                    : html`
+                          <div class="empty">No payload</div>
+                      `}
+            `;
+        }
+        const snap = entry.snap;
+        const store = getStore();
+        const payloadObj = snap.payload === undefined ? null : { payload: snap.payload };
+        return html`
+            <button class="btn on time-travel" @click=${() => travelTo(entry.index)}>⏱ Time Travel</button>
+            ${this._renderKvSection('mutation', { type: snap.type, time: new Date(snap.time).toLocaleTimeString() }, false)}
+            ${payloadObj ? this._renderKvSection('payload', payloadObj, false) : null}
+            ${this._renderKvSection('state', snap.state || {}, false)}
+            ${store ? this._renderKvSection('getters (live)', store.getters || {}, false) : null}
+        `;
+    }
+
+    _formatTime(time) {
+        const date = new Date(time);
+        const pad = (num, length = 2) => String(num).padStart(length, '0');
+        return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
+    }
+
+    // Plugin logo
     _vueLogo() {
         return html`
-            <svg fill-rule="evenodd" viewBox="64 64 896 896" fill="#2932E1" aria-hidden="true">
+            <svg fill-rule="evenodd" viewBox="64 64 896 896" fill="var(--logo-fill)" aria-hidden="true">
                 <path
                     d="M250.02 547.04c92.37-19.8 79.77-130.07 76.95-154.18-4.56-37.2-48.26-102.16-107.63-97.02-74.7 6.7-85.65 114.58-85.65 114.58-10.04 49.88 24.2 156.43 116.33 136.62m84.7 214.14c10.28 38.7 43.95 40.43 43.95 40.43H427V683.55h-51.74c-23.22 6.96-34.5 25.1-36.98 32.8-2.74 7.8-8.71 27.6-3.57 44.83m169.07-531.1c0-72.42-41.13-131.08-92.2-131.08-50.92 0-92.21 58.66-92.21 131.07 0 72.5 41.3 131.16 92.2 131.16 51.08 0 92.21-58.66 92.21-131.16m248.1 9.1c8.86-54.92-35.08-118.88-83.34-129.82-48.34-11.1-108.7 66.28-114.18 116.74-6.55 61.72 8.79 123.28 76.86 132.06 68.16 8.87 112.03-63.87 120.65-118.97m46.35 433.02s-105.47-81.53-167-169.6c-83.4-129.91-201.98-77.05-241.62-11.02-39.47 66.03-101 107.87-109.7 118.9-8.87 10.93-127.36 74.8-101.07 191.55 26.28 116.65 118.73 114.5 118.73 114.5s68.08 6.7 147.1-10.94C523.7 888.03 591.7 910 591.7 910s184.57 61.72 235.07-57.18c50.41-118.97-28.53-180.61-28.53-180.61M362.42 849.17c-51.83-10.36-72.47-45.65-75.13-51.7-2.57-6.13-17.24-34.55-9.45-82.85 22.39-72.41 86.23-77.63 86.23-77.63h63.85v-78.46l54.4.82.08 289.82zm205.38-.83c-53.56-13.75-56.05-51.78-56.05-51.78V643.95l56.05-.92v137.12c3.4 14.59 21.65 17.32 21.65 17.32h56.88V643.95h59.62v204.39zm323.84-397.72c0-26.35-21.89-105.72-103.15-105.72-81.43 0-92.29 74.9-92.29 127.84 0 50.54 4.31 121.13 105.4 118.8 101.15-2.15 90.04-114.41 90.04-140.92"
                 />
@@ -969,6 +1260,19 @@ export class VueDevToolsPanel extends LitElement {
     // Inline stroked icons (currentColor) for the sidebar / toolbar.
     _icon(name) {
         switch (name) {
+            case 'moon':
+                return html`
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12.8A9 9 0 1111.2 3 7 7 0 0021 12.8z" />
+                    </svg>
+                `;
+            case 'sun':
+                return html`
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="4" />
+                        <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+                    </svg>
+                `;
             case 'components':
                 return html`
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
@@ -986,6 +1290,12 @@ export class VueDevToolsPanel extends LitElement {
                         <path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
                     </svg>
                 `;
+            case 'timeline':
+                return html`
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 12h4l3 8 4-16 3 8h4" />
+                    </svg>
+                `;
             case 'pick':
                 return html`
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
@@ -1068,6 +1378,7 @@ export class VueDevToolsPanel extends LitElement {
             --c-null: #b45309;
             --c-fn: #2563eb;
             --c-obj: #475467;
+            --logo-fill: #2932e1;
 
             position: fixed;
             inset: 0;
@@ -1077,6 +1388,25 @@ export class VueDevToolsPanel extends LitElement {
             font-size: 12px;
             color: var(--text);
         }
+        :host([theme='dark']) {
+            --bg: #1e1e20;
+            --surface: #26262a;
+            --border: #34343a;
+            --border-strong: #3a3a42;
+            --field-border: #3a3a42;
+            --text: #e4e4e7;
+            --text-strong: #f4f4f5;
+            --muted: #8b8b93;
+            --muted-2: #a1a1aa;
+            --c-key: #80cbc4;
+            --c-num: #ffcb6b;
+            --c-bool: #c792ea;
+            --c-str: #c3e88d;
+            --c-null: #f78c6c;
+            --c-fn: #82aaff;
+            --c-obj: #b0bec5;
+            --logo-fill: #ffffff;
+        }
         .entry {
             position: fixed;
             pointer-events: auto;
@@ -1440,7 +1770,23 @@ export class VueDevToolsPanel extends LitElement {
             cursor: pointer;
 
             &:hover {
-                color: #475467;
+                color: var(--text);
+            }
+            & .section-filter {
+                margin-inline-start: 6px;
+                inline-size: 96px;
+                padding: 1px 6px;
+                border: 1px solid var(--field-border);
+                border-radius: 5px;
+                background: var(--bg);
+                color: var(--text-strong);
+                font-size: 11px;
+                text-transform: none;
+                outline: none;
+                cursor: text;
+            }
+            & .section-filter:focus {
+                border-color: var(--accent);
             }
         }
         .vrow {
@@ -1544,6 +1890,21 @@ export class VueDevToolsPanel extends LitElement {
             display: inline-block;
             margin-block: 4px 8px;
         }
+        .ev-time {
+            flex: none;
+            font-size: 10px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+            color: var(--muted);
+        }
+        .ev-comp {
+            margin-inline-start: auto;
+            padding-inline-start: 8px;
+            color: var(--muted);
+        }
+        .node.selected .ev-time,
+        .node.selected .ev-comp {
+            color: rgb(255 255 255 / 0.85);
+        }
     `;
 }