dev-inspector 1.0.5 → 1.1.1

package/README.md

@@ -19,6 +19,10 @@ In-page devtools-style logger panel for web apps. Capture **console** and **netw
 - Network interception: `fetch` + `XMLHttpRequest`
 - In-memory storage with events (`EventTarget`)
 - UI panel with tabs (Console / Network), counters, severity/status colors, and resize
+- Search across console messages and network requests (URL, method, status, body)
+- Auto-scroll lock with a "Latest" jump button that surfaces unread entries
+- Light / dark theme with `localStorage` persistence (defaults to light)
+- Configurable panel title (used in the header and the floating toggle)
 - Vite demo playground
 
 ## Installation
@@ -35,10 +39,27 @@ import { initDevInspector } from "dev-inspector";
 initDevInspector({
   maxSize: 500,
   networkOptions: { includeBodies: false },
-  panelOptions: { initiallyOpen: true, title: "Dev Inspector" },
+  panelOptions: {
+    initiallyOpen: true,
+    title: "My App Inspector",
+    theme: "light",
+    persistTheme: true,
+  },
 });
 ```
 
+### Panel options
+
+| Option            | Type                | Default                 | Description                                                                          |
+| ----------------- | ------------------- | ----------------------- | ------------------------------------------------------------------------------------ |
+| `title`           | `string`            | `"Dev Inspector"`       | Label shown in the panel header **and** the floating toggle pill in the bottom-right |
+| `initiallyOpen`   | `boolean`           | `true`                  | Open the panel on mount                                                              |
+| `theme`           | `"light" \| "dark"` | `"light"`               | Initial theme. Overridden by a stored value when `persistTheme` is `true`            |
+| `persistTheme`    | `boolean`           | `true`                  | Persist the user's theme choice in `localStorage`                                    |
+| `themeStorageKey` | `string`            | `"dev-inspector:theme"` | Key used by `localStorage` to remember the theme                                     |
+
+The theme can also be toggled at runtime via the sun/moon button in the panel header. When `persistTheme` is `true`, the choice is stored under `themeStorageKey` and restored on the next load.
+
 ## Important: Browser-only (SSR)
 
 Dev Inspector’s UI (`createPanel()` and the default `initDevInspector()` flow) requires a **browser environment** (it needs `document`).

package/lib/init.d.ts

@@ -1,8 +1,12 @@
-type InitOptions = {
+export type Theme = "light" | "dark";
+export type InitOptions = {
     maxSize?: number;
     panelOptions?: {
         title?: string;
         initiallyOpen?: boolean;
+        theme?: Theme;
+        persistTheme?: boolean;
+        themeStorageKey?: string;
     };
     networkOptions?: {
         includeBodies?: boolean;
@@ -10,4 +14,3 @@ type InitOptions = {
     };
 };
 export declare function initDevInspector(options?: InitOptions): void;
-export {};

package/lib/init.js

@@ -12,7 +12,7 @@ function getGlobalBag() {
     return globalThis;
 }
 function initDevInspector(options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const key = getGlobalInstanceKey();
     const bag = getGlobalBag();
     const prev = bag[key];
@@ -20,7 +20,7 @@ function initDevInspector(options = {}) {
         try {
             prev.destroy();
         }
-        catch (_k) {
+        catch (_o) {
             void 0;
         }
     }
@@ -35,6 +35,9 @@ function initDevInspector(options = {}) {
         storage,
         initiallyOpen: (_g = (_f = options.panelOptions) === null || _f === void 0 ? void 0 : _f.initiallyOpen) !== null && _g !== void 0 ? _g : true,
         title: (_j = (_h = options.panelOptions) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : "Dev Inspector",
+        theme: (_k = options.panelOptions) === null || _k === void 0 ? void 0 : _k.theme,
+        persistTheme: (_l = options.panelOptions) === null || _l === void 0 ? void 0 : _l.persistTheme,
+        themeStorageKey: (_m = options.panelOptions) === null || _m === void 0 ? void 0 : _m.themeStorageKey,
     });
     const destroy = () => {
         try {

package/lib/ui/panel/behavior/setupPanelBehavior.d.ts

@@ -2,4 +2,7 @@ import type { LogStorage } from "../../../storage/logStorage";
 import type { PanelHandle } from "..";
 import type { PanelDOM } from "../dom/types";
 import type { PanelState } from "../state/types";
-export declare function setupPanelBehavior(dom: PanelDOM, state: PanelState, storage: LogStorage): PanelHandle;
+export declare function setupPanelBehavior(dom: PanelDOM, state: PanelState, storage: LogStorage, themeConfig: {
+    storageKey: string;
+    persist: boolean;
+}): PanelHandle;

package/lib/ui/panel/behavior/setupPanelBehavior.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupPanelBehavior = setupPanelBehavior;
 const bindings_1 = require("../bindings");
 const resize_1 = require("../resize");
-function setupPanelBehavior(dom, state, storage) {
+const theme_1 = require("../theme");
+function setupPanelBehavior(dom, state, storage, themeConfig) {
     const applyVisibility = () => {
         if (state.open)
             dom.panel.classList.remove("di-hidden");
@@ -20,17 +21,36 @@ function setupPanelBehavior(dom, state, storage) {
             dom.consoleTab.classList.remove("di-tabActive");
         }
     };
+    const updateThemeButton = () => {
+        dom.themeBtn.setAttribute("aria-pressed", state.theme === "dark" ? "true" : "false");
+        dom.themeBtn.setAttribute("title", state.theme === "dark" ? "Switch to light theme" : "Switch to dark theme");
+    };
+    const setTheme = (next) => {
+        state.theme = next;
+        (0, theme_1.applyTheme)(dom.root, next);
+        updateThemeButton();
+        if (themeConfig.persist)
+            (0, theme_1.saveTheme)(themeConfig.storageKey, next);
+    };
+    (0, theme_1.applyTheme)(dom.root, state.theme);
+    updateThemeButton();
     const bindings = (0, bindings_1.bindStorageToPanelView)({
         storage,
         state,
         list: dom.list,
         body: dom.body,
+        jumpBtn: dom.jumpBtn,
+        jumpBtnLabel: dom.jumpBtnLabel,
         counters: dom.counters,
         updateTabStyles,
     });
     applyVisibility();
     updateTabStyles();
     const resizeControls = (0, resize_1.attachResizeHandling)(dom.panel, dom.resizeHandle);
+    const updateSearchClearVisibility = () => {
+        dom.searchClearBtn.classList.toggle("di-searchClear--visible", state.query.length > 0);
+    };
+    updateSearchClearVisibility();
     const open = () => {
         state.open = true;
         applyVisibility();
@@ -56,17 +76,44 @@ function setupPanelBehavior(dom, state, storage) {
         updateTabStyles();
         bindings.renderActiveTab();
     };
+    const onThemeClick = () => setTheme(state.theme === "dark" ? "light" : "dark");
+    const onSearchInput = () => {
+        state.query = dom.searchInput.value;
+        updateSearchClearVisibility();
+        bindings.renderActiveTab();
+    };
+    const onSearchClear = () => {
+        if (state.query.length === 0)
+            return;
+        state.query = "";
+        dom.searchInput.value = "";
+        updateSearchClearVisibility();
+        bindings.renderActiveTab();
+        dom.searchInput.focus();
+    };
+    const onBodyScroll = () => bindings.refreshScrollAffordances();
+    const onJumpClick = () => bindings.scrollToBottom();
     dom.toggleBtn.addEventListener("click", onToggleClick);
     dom.closeBtn.addEventListener("click", onCloseClick);
     dom.clearBtn.addEventListener("click", onClearClick);
+    dom.themeBtn.addEventListener("click", onThemeClick);
     dom.consoleTab.addEventListener("click", onConsoleTab);
     dom.networkTab.addEventListener("click", onNetworkTab);
+    dom.searchInput.addEventListener("input", onSearchInput);
+    dom.searchClearBtn.addEventListener("click", onSearchClear);
+    dom.body.addEventListener("scroll", onBodyScroll, { passive: true });
+    dom.jumpBtn.addEventListener("click", onJumpClick);
     const destroy = () => {
         dom.toggleBtn.removeEventListener("click", onToggleClick);
         dom.closeBtn.removeEventListener("click", onCloseClick);
         dom.clearBtn.removeEventListener("click", onClearClick);
+        dom.themeBtn.removeEventListener("click", onThemeClick);
         dom.consoleTab.removeEventListener("click", onConsoleTab);
         dom.networkTab.removeEventListener("click", onNetworkTab);
+        dom.searchInput.removeEventListener("input", onSearchInput);
+        dom.searchClearBtn.removeEventListener("click", onSearchClear);
+        dom.body.removeEventListener("scroll", onBodyScroll);
+        dom.jumpBtn.removeEventListener("click", onJumpClick);
         resizeControls.destroy();
         bindings.destroy();
         dom.root.remove();

package/lib/ui/panel/bindings/bindStorageToPanelView.d.ts

@@ -11,6 +11,8 @@ export declare function bindStorageToPanelView(args: {
         append: (entry: LogEntry) => void;
     };
     body: HTMLElement;
+    jumpBtn: HTMLElement;
+    jumpBtnLabel: HTMLElement;
     counters: PanelCountersDOM;
     updateTabStyles: () => void;
 }): DataBindings;

package/lib/ui/panel/bindings/bindStorageToPanelView.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bindStorageToPanelView = bindStorageToPanelView;
+const matchesQuery_1 = require("./matchesQuery");
+const SCROLL_PIN_THRESHOLD_PX = 32;
 function bindStorageToPanelView(args) {
     const isConsoleError = (e) => e.source === "console" && e.level === "error";
     const isNetworkError = (e) => e.source === "network" && (typeof e.status !== "number" || e.status >= 400);
@@ -11,13 +13,47 @@ function bindStorageToPanelView(args) {
         args.counters.toggleNetworkCount.textContent = String(args.state.entries.network.length);
         args.counters.toggleConsoleErrorCount.textContent = String(args.state.errorCounts.console);
         args.counters.toggleNetworkErrorCount.textContent = String(args.state.errorCounts.network);
-        args.counters.toggleConsoleErrorWrap.style.display = args.state.errorCounts.console > 0 ? "inline-flex" : "none";
-        args.counters.toggleNetworkErrorWrap.style.display = args.state.errorCounts.network > 0 ? "inline-flex" : "none";
+        args.counters.toggleConsoleErrorWrap.style.display =
+            args.state.errorCounts.console > 0 ? "inline-flex" : "none";
+        args.counters.toggleNetworkErrorWrap.style.display =
+            args.state.errorCounts.network > 0 ? "inline-flex" : "none";
+    };
+    const updateJumpAffordance = () => {
+        const visible = !args.state.pinnedToBottom;
+        args.jumpBtn.classList.toggle("di-jumpBtn--visible", visible);
+        if (args.state.pendingNew > 0) {
+            args.jumpBtnLabel.textContent = `${args.state.pendingNew} new`;
+            args.jumpBtn.classList.add("di-jumpBtn--hasNew");
+        }
+        else {
+            args.jumpBtnLabel.textContent = "Latest";
+            args.jumpBtn.classList.remove("di-jumpBtn--hasNew");
+        }
+    };
+    const scrollToBottom = () => {
+        args.body.scrollTop = args.body.scrollHeight;
+        args.state.pinnedToBottom = true;
+        args.state.pendingNew = 0;
+        updateJumpAffordance();
+    };
+    const measurePinned = () => {
+        const distance = args.body.scrollHeight - args.body.scrollTop - args.body.clientHeight;
+        return distance <= SCROLL_PIN_THRESHOLD_PX;
+    };
+    const refreshScrollAffordances = () => {
+        args.state.pinnedToBottom = measurePinned();
+        if (args.state.pinnedToBottom)
+            args.state.pendingNew = 0;
+        updateJumpAffordance();
     };
     const renderActiveTab = () => {
         args.list.clear();
-        args.state.entries[args.state.tab].forEach((e) => args.list.append(e));
+        const filtered = args.state.entries[args.state.tab].filter((e) => (0, matchesQuery_1.matchesQuery)(e, args.state.query));
+        filtered.forEach((e) => args.list.append(e));
+        args.state.pendingNew = 0;
+        args.state.pinnedToBottom = true;
         args.body.scrollTop = args.body.scrollHeight;
+        updateJumpAffordance();
     };
     const hydrate = () => {
         args.state.entries.console = [];
@@ -52,10 +88,18 @@ function bindStorageToPanelView(args) {
                 args.state.errorCounts.console += 1;
         }
         updateCounts();
-        if (entry.source === args.state.tab) {
-            args.list.append(entry);
+        if (entry.source !== args.state.tab)
+            return;
+        if (!(0, matchesQuery_1.matchesQuery)(entry, args.state.query))
+            return;
+        args.list.append(entry);
+        if (args.state.pinnedToBottom) {
             args.body.scrollTop = args.body.scrollHeight;
         }
+        else {
+            args.state.pendingNew += 1;
+            updateJumpAffordance();
+        }
     };
     const unsub = args.storage.onNewLog(onNewLog);
     const onCleared = () => {
@@ -72,5 +116,5 @@ function bindStorageToPanelView(args) {
         args.storage.removeEventListener("cleared", onCleared);
         unsub();
     };
-    return { destroy, renderActiveTab, hydrate };
+    return { destroy, renderActiveTab, hydrate, refreshScrollAffordances, scrollToBottom };
 }

package/lib/ui/panel/bindings/matchesQuery.d.ts

@@ -0,0 +1,2 @@
+import type { LogEntry } from "../../../utils/types";
+export declare function matchesQuery(entry: LogEntry, query: string): boolean;

package/lib/ui/panel/bindings/matchesQuery.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchesQuery = matchesQuery;
+function safeStringify(value) {
+    var _a;
+    const seen = new WeakSet();
+    try {
+        return (_a = JSON.stringify(value, (_k, v) => {
+            if (typeof v === "bigint")
+                return v.toString();
+            if (typeof v === "function")
+                return `[Function:${v.name || "anonymous"}]`;
+            if (v instanceof Error)
+                return { name: v.name, message: v.message };
+            if (v && typeof v === "object") {
+                if (seen.has(v))
+                    return "[Circular]";
+                seen.add(v);
+            }
+            return v;
+        })) !== null && _a !== void 0 ? _a : "";
+    }
+    catch (_b) {
+        return "";
+    }
+}
+function corpusForEntry(entry) {
+    const parts = [];
+    if (entry.message)
+        parts.push(entry.message);
+    if (entry.source === "console") {
+        parts.push(entry.level);
+        parts.push(safeStringify(entry.args));
+    }
+    else {
+        if (entry.method)
+            parts.push(entry.method);
+        if (entry.url)
+            parts.push(entry.url);
+        if (typeof entry.status === "number")
+            parts.push(String(entry.status));
+        if (typeof entry.requestBody !== "undefined")
+            parts.push(safeStringify(entry.requestBody));
+        if (typeof entry.responseBody !== "undefined")
+            parts.push(safeStringify(entry.responseBody));
+    }
+    return parts.join("\n").toLowerCase();
+}
+function matchesQuery(entry, query) {
+    const q = query.trim().toLowerCase();
+    if (q.length === 0)
+        return true;
+    return corpusForEntry(entry).includes(q);
+}

package/lib/ui/panel/bindings/types.d.ts

@@ -2,4 +2,6 @@ export type DataBindings = {
     destroy: () => void;
     renderActiveTab: () => void;
     hydrate: () => void;
+    refreshScrollAffordances: () => void;
+    scrollToBottom: () => void;
 };

package/lib/ui/panel/dom/buildPanelDOM.js

@@ -13,8 +13,8 @@ function buildPanelDOM(doc, options) {
     const toggleBtn = doc.createElement("button");
     toggleBtn.type = "button";
     toggleBtn.className = "di-toggle";
-    toggleBtn.setAttribute("aria-label", "Dev Inspector");
-    toggleBtn.innerHTML = constants_1.TOGGLE_BUTTON_HTML;
+    toggleBtn.setAttribute("aria-label", title);
+    toggleBtn.innerHTML = (0, constants_1.buildToggleButtonHTML)(title);
     const panel = doc.createElement("div");
     panel.className = "di-panel";
     const resizeHandle = doc.createElement("div");
@@ -30,6 +30,11 @@ function buildPanelDOM(doc, options) {
     titleEl.textContent = title;
     const actions = doc.createElement("div");
     actions.className = "di-actions";
+    const themeBtn = doc.createElement("button");
+    themeBtn.type = "button";
+    themeBtn.className = "di-iconBtn di-themeBtn";
+    themeBtn.setAttribute("aria-label", "Toggle theme");
+    themeBtn.innerHTML = `<span class="di-themeIcon di-themeIcon--sun">${constants_1.SUN_ICON_HTML}</span><span class="di-themeIcon di-themeIcon--moon">${constants_1.MOON_ICON_HTML}</span>`;
     const clearBtn = doc.createElement("button");
     clearBtn.type = "button";
     clearBtn.className = "di-btn";
@@ -38,7 +43,7 @@ function buildPanelDOM(doc, options) {
     closeBtn.type = "button";
     closeBtn.className = "di-btn";
     closeBtn.textContent = "Close";
-    actions.append(clearBtn, closeBtn);
+    actions.append(themeBtn, clearBtn, closeBtn);
     headerRow.append(resizeHandle, titleEl, actions);
     const tabs = doc.createElement("div");
     tabs.className = "di-tabs";
@@ -51,12 +56,47 @@ function buildPanelDOM(doc, options) {
     networkTab.className = "di-tab";
     networkTab.innerHTML = constants_1.NETWORK_TAB_HTML;
     tabs.append(consoleTab, networkTab);
-    header.append(headerRow, tabs);
+    const searchRow = doc.createElement("div");
+    searchRow.className = "di-searchRow";
+    const searchWrap = doc.createElement("div");
+    searchWrap.className = "di-searchWrap";
+    const searchIcon = doc.createElement("span");
+    searchIcon.className = "di-searchIconWrap";
+    searchIcon.innerHTML = constants_1.SEARCH_ICON_HTML;
+    const searchInput = doc.createElement("input");
+    searchInput.type = "search";
+    searchInput.className = "di-searchInput";
+    searchInput.placeholder = "Search logs (URL, method, status, message)";
+    searchInput.setAttribute("aria-label", "Search logs");
+    searchInput.autocomplete = "off";
+    searchInput.spellcheck = false;
+    const searchClearBtn = doc.createElement("button");
+    searchClearBtn.type = "button";
+    searchClearBtn.className = "di-searchClear";
+    searchClearBtn.setAttribute("aria-label", "Clear search");
+    searchClearBtn.textContent = "×";
+    searchWrap.append(searchIcon, searchInput, searchClearBtn);
+    searchRow.append(searchWrap);
+    header.append(headerRow, tabs, searchRow);
+    const bodyWrap = doc.createElement("div");
+    bodyWrap.className = "di-bodyWrap";
     const body = doc.createElement("div");
     body.className = "di-body";
     const list = (0, logList_1.createLogList)(doc);
     body.append(list.el);
-    panel.append(header, body);
+    const jumpBtn = doc.createElement("button");
+    jumpBtn.type = "button";
+    jumpBtn.className = "di-jumpBtn";
+    jumpBtn.setAttribute("aria-label", "Jump to latest");
+    const jumpBtnLabel = doc.createElement("span");
+    jumpBtnLabel.className = "di-jumpBtnLabel";
+    jumpBtnLabel.textContent = "Latest";
+    const jumpBtnIcon = doc.createElement("span");
+    jumpBtnIcon.className = "di-jumpBtnIcon";
+    jumpBtnIcon.innerHTML = constants_1.JUMP_ICON_HTML;
+    jumpBtn.append(jumpBtnIcon, jumpBtnLabel);
+    bodyWrap.append(body, jumpBtn);
+    panel.append(header, bodyWrap);
     root.append(toggleBtn, panel);
     mount.append(root);
     const counters = {
@@ -69,5 +109,24 @@ function buildPanelDOM(doc, options) {
         toggleConsoleErrorWrap: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-error="console"]'),
         toggleNetworkErrorWrap: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-error="network"]'),
     };
-    return { root, toggleBtn, panel, header, body, closeBtn, clearBtn, consoleTab, networkTab, resizeHandle, list, counters };
+    return {
+        root,
+        toggleBtn,
+        panel,
+        header,
+        body,
+        bodyWrap,
+        closeBtn,
+        clearBtn,
+        themeBtn,
+        consoleTab,
+        networkTab,
+        resizeHandle,
+        searchInput,
+        searchClearBtn,
+        jumpBtn,
+        jumpBtnLabel,
+        list,
+        counters,
+    };
 }

package/lib/ui/panel/dom/constants.d.ts

@@ -1,3 +1,7 @@
-export declare const TOGGLE_BUTTON_HTML: string;
+export declare function buildToggleButtonHTML(title: string): string;
 export declare const CONSOLE_TAB_HTML: string;
 export declare const NETWORK_TAB_HTML: string;
+export declare const SEARCH_ICON_HTML = "<svg class=\"di-searchIcon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M20 20L16 16\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>";
+export declare const SUN_ICON_HTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M12 3V5M12 19V21M3 12H5M19 12H21M5.6 5.6L7 7M17 17L18.4 18.4M5.6 18.4L7 17M17 7L18.4 5.6\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>";
+export declare const MOON_ICON_HTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M20 14.5C19 17.5 16 20 12.5 20C7.8 20 4 16.2 4 11.5C4 8 6.5 5 9.5 4C8.5 6.5 9 9.5 11 11.5C13 13.5 16 14 18.5 13C18.5 13.5 19 14 20 14.5Z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/></svg>";
+export declare const JUMP_ICON_HTML = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M12 4V18M12 18L6 12M12 18L18 12\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>";

package/lib/ui/panel/dom/constants.js

@@ -1,28 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NETWORK_TAB_HTML = exports.CONSOLE_TAB_HTML = exports.TOGGLE_BUTTON_HTML = void 0;
-exports.TOGGLE_BUTTON_HTML = `<span class="di-toggleTitle">Dev Inspector</span>` +
-    `<span class="di-toggleMeta">` +
-    `<span class="di-toggleBadge" data-di-toggle-count="console">` +
-    `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
-    `<span data-di-toggle-count-value="console">0</span>` +
-    `<span class="di-toggleErr" data-di-toggle-error="console" aria-label="Console errors">` +
-    `<span class="di-toggleErrIcon">!</span>` +
-    `<span data-di-toggle-error-value="console">0</span>` +
-    `</span>` +
-    `</span>` +
-    `<span class="di-toggleBadge" data-di-toggle-count="network">` +
-    `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
-    `<span data-di-toggle-count-value="network">0</span>` +
-    `<span class="di-toggleErr" data-di-toggle-error="network" aria-label="Network errors">` +
-    `<span class="di-toggleErrIcon">!</span>` +
-    `<span data-di-toggle-error-value="network">0</span>` +
-    `</span>` +
-    `</span>` +
-    `</span>`;
+exports.JUMP_ICON_HTML = exports.MOON_ICON_HTML = exports.SUN_ICON_HTML = exports.SEARCH_ICON_HTML = exports.NETWORK_TAB_HTML = exports.CONSOLE_TAB_HTML = void 0;
+exports.buildToggleButtonHTML = buildToggleButtonHTML;
+function escapeHTML(input) {
+    return input
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function buildToggleButtonHTML(title) {
+    return (`<span class="di-toggleTitle">${escapeHTML(title)}</span>` +
+        `<span class="di-toggleMeta">` +
+        `<span class="di-toggleBadge" data-di-toggle-count="console">` +
+        `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
+        `<span data-di-toggle-count-value="console">0</span>` +
+        `<span class="di-toggleErr" data-di-toggle-error="console" aria-label="Console errors">` +
+        `<span class="di-toggleErrIcon">!</span>` +
+        `<span data-di-toggle-error-value="console">0</span>` +
+        `</span>` +
+        `</span>` +
+        `<span class="di-toggleBadge" data-di-toggle-count="network">` +
+        `<svg class="di-toggleIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
+        `<span data-di-toggle-count-value="network">0</span>` +
+        `<span class="di-toggleErr" data-di-toggle-error="network" aria-label="Network errors">` +
+        `<span class="di-toggleErrIcon">!</span>` +
+        `<span data-di-toggle-error-value="network">0</span>` +
+        `</span>` +
+        `</span>` +
+        `</span>`);
+}
 exports.CONSOLE_TAB_HTML = `<svg class="di-tabIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V15.5C20 16.33 19.33 17 18.5 17H13.5L12 18.5L10.5 17H5.5C4.67 17 4 16.33 4 15.5V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 11H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>` +
     `<span>Console</span>` +
     `<span class="di-badge" data-di-count="console">0</span>`;
 exports.NETWORK_TAB_HTML = `<svg class="di-tabIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M8.5 12C8.5 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12L12 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="20" r="1.5" fill="currentColor"/></svg>` +
     `<span>Network</span>` +
     `<span class="di-badge" data-di-count="network">0</span>`;
+exports.SEARCH_ICON_HTML = `<svg class="di-searchIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M20 20L16 16" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>`;
+exports.SUN_ICON_HTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.6"/><path d="M12 3V5M12 19V21M3 12H5M19 12H21M5.6 5.6L7 7M17 17L18.4 18.4M5.6 18.4L7 17M17 7L18.4 5.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>`;
+exports.MOON_ICON_HTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M20 14.5C19 17.5 16 20 12.5 20C7.8 20 4 16.2 4 11.5C4 8 6.5 5 9.5 4C8.5 6.5 9 9.5 11 11.5C13 13.5 16 14 18.5 13C18.5 13.5 19 14 20 14.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>`;
+exports.JUMP_ICON_HTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 4V18M12 18L6 12M12 18L18 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/lib/ui/panel/dom/types.d.ts

@@ -15,11 +15,17 @@ export type PanelDOM = {
     panel: HTMLDivElement;
     header: HTMLDivElement;
     body: HTMLDivElement;
+    bodyWrap: HTMLDivElement;
     closeBtn: HTMLButtonElement;
     clearBtn: HTMLButtonElement;
+    themeBtn: HTMLButtonElement;
     consoleTab: HTMLButtonElement;
     networkTab: HTMLButtonElement;
     resizeHandle: HTMLDivElement;
+    searchInput: HTMLInputElement;
+    searchClearBtn: HTMLButtonElement;
+    jumpBtn: HTMLButtonElement;
+    jumpBtnLabel: HTMLElement;
     list: ReturnType<typeof createLogList>;
     counters: PanelCountersDOM;
 };

package/lib/ui/panel/index.d.ts

@@ -1,9 +1,13 @@
 import type { LogStorage } from "../../storage/logStorage";
+import { type Theme } from "./theme";
 export type PanelOptions = {
     storage: LogStorage;
     title?: string;
     initiallyOpen?: boolean;
     mount?: HTMLElement;
+    theme?: Theme;
+    persistTheme?: boolean;
+    themeStorageKey?: string;
 };
 export type PanelHandle = {
     open: () => void;

package/lib/ui/panel/index.js

@@ -6,11 +6,16 @@ const ensureStyle_1 = require("./shared/ensureStyle");
 const dom_1 = require("./dom");
 const state_1 = require("./state");
 const behavior_1 = require("./behavior");
+const theme_1 = require("./theme");
 function createPanel(options) {
-    var _a;
+    var _a, _b, _c, _d;
     const doc = (0, ensureDocument_1.ensureDocument)();
     (0, ensureStyle_1.ensureStyle)(doc);
+    const persistTheme = (_a = options.persistTheme) !== null && _a !== void 0 ? _a : true;
+    const storageKey = (_b = options.themeStorageKey) !== null && _b !== void 0 ? _b : theme_1.DEFAULT_STORAGE_KEY;
+    const stored = persistTheme ? (0, theme_1.loadTheme)(storageKey) : null;
+    const initialTheme = (_c = stored !== null && stored !== void 0 ? stored : options.theme) !== null && _c !== void 0 ? _c : "light";
     const dom = (0, dom_1.buildPanelDOM)(doc, options);
-    const state = (0, state_1.createPanelState)((_a = options.initiallyOpen) !== null && _a !== void 0 ? _a : false);
-    return (0, behavior_1.setupPanelBehavior)(dom, state, options.storage);
+    const state = (0, state_1.createPanelState)((_d = options.initiallyOpen) !== null && _d !== void 0 ? _d : false, initialTheme);
+    return (0, behavior_1.setupPanelBehavior)(dom, state, options.storage, { storageKey, persist: persistTheme });
 }

package/lib/ui/panel/state/createPanelState.d.ts

@@ -1,2 +1,3 @@
+import type { Theme } from "../theme/types";
 import type { PanelState } from "./types";
-export declare function createPanelState(initiallyOpen: boolean): PanelState;
+export declare function createPanelState(initiallyOpen: boolean, theme: Theme): PanelState;

package/lib/ui/panel/state/createPanelState.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPanelState = createPanelState;
-function createPanelState(initiallyOpen) {
+function createPanelState(initiallyOpen, theme) {
     return {
         open: initiallyOpen,
         tab: "console",
         entries: { console: [], network: [] },
         errorCounts: { console: 0, network: 0 },
+        query: "",
+        pinnedToBottom: true,
+        pendingNew: 0,
+        theme,
     };
 }

package/lib/ui/panel/state/types.d.ts

@@ -1,8 +1,13 @@
 import type { LogEntry } from "../../../utils/types";
 import type { TabKey } from "../shared/types";
+import type { Theme } from "../theme/types";
 export type PanelState = {
     open: boolean;
     tab: TabKey;
     entries: Record<TabKey, LogEntry[]>;
     errorCounts: Record<TabKey, number>;
+    query: string;
+    pinnedToBottom: boolean;
+    pendingNew: number;
+    theme: Theme;
 };

package/lib/ui/panel/theme/applyTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "./types";
+export declare function applyTheme(root: HTMLElement, theme: Theme): void;