dev-inspector 1.0.4 → 1.1.0

package/lib/storage/localStorage.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocalStorageAccess = getLocalStorageAccess;
+exports.readLocalStorageSnapshot = readLocalStorageSnapshot;
+exports.createLocalStorageWatcher = createLocalStorageWatcher;
+function safeTruncate(value, maxLen) {
+    if (maxLen <= 0)
+        return "";
+    if (value.length <= maxLen)
+        return value;
+    return `${value.slice(0, maxLen)}…`;
+}
+function getLocalStorageAccess() {
+    try {
+        const w = globalThis;
+        const storage = w.localStorage;
+        if (!storage)
+            return { ok: false, message: "localStorage is not available in this environment." };
+        // Some environments expose the object but throw on access (privacy modes / blocked cookies).
+        void storage.length;
+        return { ok: true, storage };
+    }
+    catch (_a) {
+        return { ok: false, message: "localStorage access is blocked in this environment (privacy settings / permissions)." };
+    }
+}
+function readLocalStorageSnapshot(storage, opts) {
+    var _a;
+    const items = [];
+    let totalApproxBytes = 0;
+    const len = storage.length;
+    for (let i = 0; i < len; i += 1) {
+        const key = storage.key(i);
+        if (!key)
+            continue;
+        const value = (_a = storage.getItem(key)) !== null && _a !== void 0 ? _a : "";
+        const approxBytes = (key.length + value.length) * 2; // UTF-16-ish approximation
+        totalApproxBytes += approxBytes;
+        items.push({
+            key,
+            value,
+            preview: safeTruncate(value, opts.maxPreviewLength),
+            valueLength: value.length,
+            approxBytes,
+        });
+    }
+    items.sort((a, b) => a.key.localeCompare(b.key));
+    return { items, totalApproxBytes };
+}
+function buildSignature(storage) {
+    var _a;
+    try {
+        const parts = [String(storage.length)];
+        const len = storage.length;
+        for (let i = 0; i < len; i += 1) {
+            const k = storage.key(i);
+            if (!k)
+                continue;
+            const v = (_a = storage.getItem(k)) !== null && _a !== void 0 ? _a : "";
+            parts.push(`${k}:${v.length}`);
+        }
+        return parts.join("|");
+    }
+    catch (_b) {
+        return "err";
+    }
+}
+function createLocalStorageWatcher(args) {
+    var _a, _b, _c, _d;
+    const { storage, onChange } = args;
+    const pollIntervalMs = Math.max(250, args.pollIntervalMs);
+    let destroyed = false;
+    let lastSig = buildSignature(storage);
+    const trigger = () => {
+        if (destroyed)
+            return;
+        onChange();
+    };
+    const win = globalThis;
+    const onStorageEvent = () => {
+        const sig = buildSignature(storage);
+        if (sig !== lastSig) {
+            lastSig = sig;
+            trigger();
+        }
+    };
+    try {
+        (_a = win.addEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "storage", onStorageEvent);
+    }
+    catch (_e) {
+        void 0;
+    }
+    // Same-tab changes don't fire "storage" events. We try to patch methods; if that fails, polling still keeps UI fresh.
+    const orig = {
+        setItem: (_b = storage.setItem) === null || _b === void 0 ? void 0 : _b.bind(storage),
+        removeItem: (_c = storage.removeItem) === null || _c === void 0 ? void 0 : _c.bind(storage),
+        clear: (_d = storage.clear) === null || _d === void 0 ? void 0 : _d.bind(storage),
+    };
+    const patch = () => {
+        try {
+            storage.setItem = ((key, value) => {
+                var _a;
+                (_a = orig.setItem) === null || _a === void 0 ? void 0 : _a.call(orig, key, value);
+                const sig = buildSignature(storage);
+                if (sig !== lastSig) {
+                    lastSig = sig;
+                    trigger();
+                }
+            });
+            storage.removeItem = ((key) => {
+                var _a;
+                (_a = orig.removeItem) === null || _a === void 0 ? void 0 : _a.call(orig, key);
+                const sig = buildSignature(storage);
+                if (sig !== lastSig) {
+                    lastSig = sig;
+                    trigger();
+                }
+            });
+            storage.clear = (() => {
+                var _a;
+                (_a = orig.clear) === null || _a === void 0 ? void 0 : _a.call(orig);
+                const sig = buildSignature(storage);
+                if (sig !== lastSig) {
+                    lastSig = sig;
+                    trigger();
+                }
+            });
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    };
+    const patched = patch();
+    const timer = globalThis.setInterval(() => {
+        const sig = buildSignature(storage);
+        if (sig !== lastSig) {
+            lastSig = sig;
+            trigger();
+        }
+    }, patched ? Math.max(800, pollIntervalMs) : pollIntervalMs);
+    const destroy = () => {
+        var _a;
+        destroyed = true;
+        globalThis.clearInterval(timer);
+        try {
+            (_a = win.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(win, "storage", onStorageEvent);
+        }
+        catch (_b) {
+            void 0;
+        }
+        // best-effort restore
+        try {
+            if (orig.setItem)
+                storage.setItem = orig.setItem;
+            if (orig.removeItem)
+                storage.removeItem = orig.removeItem;
+            if (orig.clear)
+                storage.clear = orig.clear;
+        }
+        catch (_c) {
+            void 0;
+        }
+    };
+    return { destroy, trigger };
+}

package/lib/ui/logList/createLogList.d.ts

@@ -0,0 +1,2 @@
+import type { LogList } from "./types";
+export declare function createLogList(doc: Document): LogList;

package/lib/ui/logList/createLogList.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = createLogList;
+const jsonViewer_1 = require("../jsonViewer");
+const networkDetails_1 = require("./networkDetails");
+const shared_1 = require("./shared");
+const shared_2 = require("./shared");
+function createLogList(doc) {
+    const el = doc.createElement("ul");
+    el.className = "di-list";
+    const append = (entry) => {
+        const li = doc.createElement("li");
+        const tone = (0, shared_2.toneForEntry)(entry);
+        li.className = `di-item ${(0, shared_2.classForTone)(tone)}`;
+        const meta = doc.createElement("div");
+        meta.className = "di-meta";
+        const time = doc.createElement("span");
+        time.textContent = (0, shared_2.fmtTime)(entry.timestamp);
+        const source = doc.createElement("span");
+        source.textContent = entry.source;
+        const detail = doc.createElement("span");
+        if (entry.source === "console") {
+            detail.textContent = entry.level;
+        }
+        else {
+            detail.className = `di-statusChip ${(0, shared_2.isNetworkFailure)(entry) ? "di-statusChipError" : "di-statusChipSuccess"}`;
+            detail.textContent = typeof entry.status === "number" ? String(entry.status) : "ERR";
+        }
+        meta.append(time, source, detail);
+        li.append(meta);
+        if (entry.message && entry.message.trim().length > 0) {
+            const msg = doc.createElement("div");
+            msg.className = "di-msg";
+            msg.textContent = entry.message;
+            li.append(msg);
+        }
+        if (entry.source === "console") {
+            const inspectable = (0, shared_1.getInspectableArgs)(entry.args);
+            if (inspectable.length > 0) {
+                const details = doc.createElement("details");
+                details.className = "di-details";
+                const summary = doc.createElement("summary");
+                summary.className = "di-detailsSummary";
+                summary.textContent = "Inspect";
+                const viewerWrap = doc.createElement("div");
+                viewerWrap.className = "di-detailsBody";
+                viewerWrap.append((0, jsonViewer_1.createJsonViewer)(doc, inspectable.length === 1 ? inspectable[0] : inspectable, {
+                    maxDepth: 6,
+                    maxKeys: 200,
+                    maxNodes: 2000,
+                }));
+                details.append(summary, viewerWrap);
+                li.append(details);
+            }
+        }
+        if (entry.source === "network") {
+            const details = (0, networkDetails_1.createNetworkDetails)(doc, entry);
+            if (details)
+                li.append(details);
+        }
+        el.append(li);
+    };
+    const clear = () => {
+        el.replaceChildren();
+    };
+    return { el, append, clear };
+}

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

@@ -0,0 +1,2 @@
+export { createLogList } from "./createLogList";
+export type { LogList } from "./types";

package/lib/ui/logList/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = void 0;
+var createLogList_1 = require("./createLogList");
+Object.defineProperty(exports, "createLogList", { enumerable: true, get: function () { return createLogList_1.createLogList; } });

package/lib/ui/logList/networkDetails/copy.d.ts

@@ -0,0 +1,2 @@
+export declare function launchMiniConfetti(anchor: HTMLElement): void;
+export declare function copyText(text: string): Promise<boolean>;

package/lib/ui/logList/networkDetails/copy.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.launchMiniConfetti = launchMiniConfetti;
+exports.copyText = copyText;
+function prefersReducedMotion() {
+    var _a, _b;
+    try {
+        const mm = globalThis;
+        return ((_b = (_a = mm.matchMedia) === null || _a === void 0 ? void 0 : _a.call(mm, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches) === true;
+    }
+    catch (_c) {
+        return false;
+    }
+}
+function rand(min, max) {
+    return min + Math.random() * (max - min);
+}
+function launchMiniConfetti(anchor) {
+    if (prefersReducedMotion())
+        return;
+    if (typeof document === "undefined")
+        return;
+    const rect = anchor.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const root = document.createElement("div");
+    root.style.position = "fixed";
+    root.style.left = "0";
+    root.style.top = "0";
+    root.style.width = "0";
+    root.style.height = "0";
+    root.style.pointerEvents = "none";
+    root.style.zIndex = "2147483647";
+    document.body.append(root);
+    const colors = ["#a7ff00", "#7c5cff", "#00c4ff", "#ff9030", "#ef4444"];
+    const n = 14;
+    const duration = 520;
+    for (let i = 0; i < n; i += 1) {
+        const p = document.createElement("span");
+        const size = Math.round(rand(3, 6));
+        p.style.position = "fixed";
+        p.style.left = `${cx}px`;
+        p.style.top = `${cy}px`;
+        p.style.width = `${size}px`;
+        p.style.height = `${size}px`;
+        p.style.borderRadius = Math.random() < 0.35 ? "999px" : "2px";
+        p.style.background = colors[i % colors.length];
+        p.style.opacity = "1";
+        p.style.willChange = "transform, opacity";
+        root.append(p);
+        const angle = rand(0, Math.PI * 2);
+        const dist = rand(18, 46);
+        const dx = Math.cos(angle) * dist;
+        const dy = Math.sin(angle) * dist + rand(8, 16);
+        const rot = rand(-220, 220);
+        const delay = Math.round(rand(0, 60));
+        try {
+            const anim = p.animate([
+                { transform: `translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1)`, opacity: 1 },
+                { transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(0.9)`, opacity: 0 },
+            ], { duration, delay, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)", fill: "forwards" });
+            anim.addEventListener("finish", () => p.remove());
+        }
+        catch (_a) {
+            globalThis.setTimeout(() => p.remove(), duration + delay + 50);
+        }
+    }
+    globalThis.setTimeout(() => root.remove(), duration + 120);
+}
+async function copyText(text) {
+    var _a, _b;
+    try {
+        const nav = globalThis;
+        const fn = (_b = (_a = nav.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText;
+        if (typeof fn === "function") {
+            await fn(text);
+            return true;
+        }
+    }
+    catch (_c) {
+        void 0;
+    }
+    try {
+        if (typeof document === "undefined")
+            return false;
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "true");
+        ta.style.position = "fixed";
+        ta.style.left = "-9999px";
+        ta.style.top = "0";
+        document.body.append(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        ta.remove();
+        return ok;
+    }
+    catch (_d) {
+        return false;
+    }
+}

package/lib/ui/logList/{networkDetails.d.ts → networkDetails/createNetworkDetails.d.ts}

@@ -1,2 +1,2 @@
-import type { NetworkLogEntry } from "../../utils/types";
+import type { NetworkLogEntry } from "../../../utils/types";
 export declare function createNetworkDetails(doc: Document, entry: NetworkLogEntry): HTMLElement | null;

package/lib/ui/logList/networkDetails/createNetworkDetails.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = createNetworkDetails;
+const copy_1 = require("./copy");
+const renderValue_1 = require("./renderValue");
+function createBodyDetails(doc, title, value, truncated, maxLen) {
+    const details = doc.createElement("details");
+    details.className = "di-details di-netBodyDetails";
+    const summary = doc.createElement("summary");
+    summary.className = "di-detailsSummary di-netDetailsSummary";
+    const titleEl = doc.createElement("span");
+    titleEl.className = "di-netDetailsTitle";
+    titleEl.textContent = title;
+    const copyBtn = doc.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "di-copyBtn";
+    copyBtn.textContent = "Copy";
+    copyBtn.setAttribute("aria-label", `Copy ${title.toLowerCase()}`);
+    copyBtn.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const txt = (0, renderValue_1.valueToCopyText)(value);
+        void (0, copy_1.copyText)(txt).then((ok) => {
+            if (!ok)
+                return;
+            (0, copy_1.launchMiniConfetti)(copyBtn);
+            const prev = copyBtn.textContent;
+            copyBtn.textContent = "Copied";
+            globalThis.setTimeout(() => {
+                copyBtn.textContent = prev !== null && prev !== void 0 ? prev : "Copy";
+            }, 900);
+        });
+    });
+    summary.append(titleEl, copyBtn);
+    const body = doc.createElement("div");
+    body.className = "di-detailsBody";
+    if (truncated) {
+        const warn = doc.createElement("div");
+        warn.className = "di-netTrunc";
+        warn.textContent = typeof maxLen === "number" ? `Truncated to first ${maxLen} characters.` : "Truncated.";
+        body.append(warn);
+    }
+    body.append((0, renderValue_1.valueToElement)(doc, value));
+    details.append(summary, body);
+    return details;
+}
+function createNetworkDetails(doc, entry) {
+    const hasReq = typeof entry.requestBody !== "undefined";
+    const hasRes = typeof entry.responseBody !== "undefined";
+    if (!hasReq && !hasRes)
+        return null;
+    const wrap = doc.createElement("div");
+    wrap.className = "di-netDetailsWrap";
+    if (hasReq) {
+        wrap.append(createBodyDetails(doc, "Request", entry.requestBody, entry.requestBodyTruncated === true, entry.bodyMaxLength));
+    }
+    if (hasRes) {
+        wrap.append(createBodyDetails(doc, "Response", entry.responseBody, entry.responseBodyTruncated === true, entry.bodyMaxLength));
+    }
+    return wrap;
+}

package/lib/ui/logList/networkDetails/index.d.ts

@@ -0,0 +1 @@
+export { createNetworkDetails } from "./createNetworkDetails";

package/lib/ui/logList/networkDetails/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = void 0;
+var createNetworkDetails_1 = require("./createNetworkDetails");
+Object.defineProperty(exports, "createNetworkDetails", { enumerable: true, get: function () { return createNetworkDetails_1.createNetworkDetails; } });

package/lib/ui/logList/networkDetails/renderValue.d.ts

@@ -0,0 +1,2 @@
+export declare function valueToElement(doc: Document, value: unknown): HTMLElement;
+export declare function valueToCopyText(value: unknown): string;

package/lib/ui/logList/{networkDetails.js → networkDetails/renderValue.js}

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNetworkDetails = createNetworkDetails;
-const jsonViewer_1 = require("../jsonViewer");
+exports.valueToElement = valueToElement;
+exports.valueToCopyText = valueToCopyText;
+const jsonViewer_1 = require("../../jsonViewer");
 function tryParseJson(text) {
     const t = text.trim();
     if (t.length < 2)
@@ -17,6 +18,29 @@ function tryParseJson(text) {
         return undefined;
     }
 }
+function safeStringify(value) {
+    const seen = new WeakSet();
+    const replacer = (_key, v) => {
+        if (typeof v === "object" && v !== null) {
+            const o = v;
+            if (seen.has(o))
+                return "[circular]";
+            seen.add(o);
+        }
+        return v;
+    };
+    try {
+        return JSON.stringify(value, replacer, 2);
+    }
+    catch (_a) {
+        try {
+            return String(value);
+        }
+        catch (_b) {
+            return "[unserializable]";
+        }
+    }
+}
 function valueToElement(doc, value) {
     if (typeof value === "string") {
         const parsed = tryParseJson(value);
@@ -42,34 +66,10 @@ function valueToElement(doc, value) {
     }
     return (0, jsonViewer_1.createJsonViewer)(doc, value, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
 }
-function appendSection(doc, wrap, label, value) {
-    if (typeof value === "undefined")
-        return;
-    const section = doc.createElement("div");
-    section.className = "di-netBodySection";
-    const title = doc.createElement("div");
-    title.className = "di-netBodyLabel";
-    title.textContent = label;
-    section.append(title, valueToElement(doc, value));
-    wrap.append(section);
-}
-function createNetworkDetails(doc, entry) {
-    const hasReq = typeof entry.requestBody !== "undefined";
-    const hasRes = typeof entry.responseBody !== "undefined";
-    if (!hasReq && !hasRes)
-        return null;
-    const details = doc.createElement("details");
-    details.className = "di-details";
-    const summary = doc.createElement("summary");
-    summary.className = "di-detailsSummary";
-    summary.textContent = "Body";
-    const body = doc.createElement("div");
-    body.className = "di-detailsBody";
-    const grid = doc.createElement("div");
-    grid.className = "di-netBodies";
-    appendSection(doc, grid, "Request body", entry.requestBody);
-    appendSection(doc, grid, "Response body", entry.responseBody);
-    body.append(grid);
-    details.append(summary, body);
-    return details;
+function valueToCopyText(value) {
+    if (typeof value === "string")
+        return value;
+    if (value instanceof Error)
+        return `${value.name}: ${value.message}`;
+    return safeStringify(value);
 }

package/lib/ui/logList/shared/consoleInspect.d.ts

@@ -0,0 +1 @@
+export declare function getInspectableArgs(args: unknown[]): unknown[];

package/lib/ui/logList/shared/consoleInspect.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectableArgs = getInspectableArgs;
+function isInspectableValue(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    if (value instanceof Error)
+        return false;
+    if (value instanceof Date)
+        return false;
+    if (value instanceof RegExp)
+        return false;
+    return true;
+}
+function getInspectableArgs(args) {
+    return args.filter(isInspectableValue);
+}

package/lib/ui/logList/shared/index.d.ts

@@ -0,0 +1,3 @@
+export { fmtTime } from "./time";
+export { toneForEntry, classForTone, isNetworkFailure } from "./tone";
+export { getInspectableArgs } from "./consoleInspect";

package/lib/ui/logList/shared/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectableArgs = exports.isNetworkFailure = exports.classForTone = exports.toneForEntry = exports.fmtTime = void 0;
+var time_1 = require("./time");
+Object.defineProperty(exports, "fmtTime", { enumerable: true, get: function () { return time_1.fmtTime; } });
+var tone_1 = require("./tone");
+Object.defineProperty(exports, "toneForEntry", { enumerable: true, get: function () { return tone_1.toneForEntry; } });
+Object.defineProperty(exports, "classForTone", { enumerable: true, get: function () { return tone_1.classForTone; } });
+Object.defineProperty(exports, "isNetworkFailure", { enumerable: true, get: function () { return tone_1.isNetworkFailure; } });
+var consoleInspect_1 = require("./consoleInspect");
+Object.defineProperty(exports, "getInspectableArgs", { enumerable: true, get: function () { return consoleInspect_1.getInspectableArgs; } });

package/lib/ui/logList/shared/time.d.ts

@@ -0,0 +1 @@
+export declare function fmtTime(ts: number): string;

package/lib/ui/logList/shared/time.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fmtTime = fmtTime;
+function fmtTime(ts) {
+    const d = new Date(ts);
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mm = String(d.getMinutes()).padStart(2, "0");
+    const ss = String(d.getSeconds()).padStart(2, "0");
+    return `${hh}:${mm}:${ss}`;
+}

package/lib/ui/logList/shared/tone.d.ts

@@ -0,0 +1,6 @@
+import type { LogEntry } from "../../../utils/types";
+type Tone = "neutral" | "warning" | "error" | "success";
+export declare function toneForEntry(entry: LogEntry): Tone;
+export declare function classForTone(tone: Tone): string;
+export declare function isNetworkFailure(entry: LogEntry): boolean;
+export {};

package/lib/ui/logList/shared/tone.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toneForEntry = toneForEntry;
+exports.classForTone = classForTone;
+exports.isNetworkFailure = isNetworkFailure;
+function toneForEntry(entry) {
+    if (entry.source === "console") {
+        if (entry.level === "error")
+            return "error";
+        if (entry.level === "warn")
+            return "warning";
+        return "neutral";
+    }
+    const s = entry.status;
+    if (typeof s !== "number")
+        return "error";
+    if (s >= 400)
+        return "error";
+    if (s >= 300)
+        return "warning";
+    return "success";
+}
+function classForTone(tone) {
+    if (tone === "error")
+        return "di-itemToneError";
+    if (tone === "warning")
+        return "di-itemToneWarning";
+    if (tone === "success")
+        return "di-itemToneSuccess";
+    return "di-itemToneNeutral";
+}
+function isNetworkFailure(entry) {
+    if (entry.source !== "network")
+        return false;
+    return typeof entry.status !== "number" || entry.status >= 400;
+}

package/lib/ui/logList/types.d.ts

@@ -0,0 +1,6 @@
+import type { LogEntry } from "../../utils/types";
+export type LogList = {
+    el: HTMLUListElement;
+    append: (entry: LogEntry) => void;
+    clear: () => void;
+};

package/lib/ui/logList/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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;