dev-inspector 1.0.5 → 1.1.1

package/lib/ui/panel/theme/applyTheme.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyTheme = applyTheme;
+function applyTheme(root, theme) {
+    root.setAttribute("data-di-theme", theme);
+}

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

@@ -0,0 +1,3 @@
+export type { Theme, ThemeOptions } from "./types";
+export { applyTheme } from "./applyTheme";
+export { loadTheme, saveTheme, DEFAULT_STORAGE_KEY } from "./storage";

package/lib/ui/panel/theme/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_STORAGE_KEY = exports.saveTheme = exports.loadTheme = exports.applyTheme = void 0;
+var applyTheme_1 = require("./applyTheme");
+Object.defineProperty(exports, "applyTheme", { enumerable: true, get: function () { return applyTheme_1.applyTheme; } });
+var storage_1 = require("./storage");
+Object.defineProperty(exports, "loadTheme", { enumerable: true, get: function () { return storage_1.loadTheme; } });
+Object.defineProperty(exports, "saveTheme", { enumerable: true, get: function () { return storage_1.saveTheme; } });
+Object.defineProperty(exports, "DEFAULT_STORAGE_KEY", { enumerable: true, get: function () { return storage_1.DEFAULT_STORAGE_KEY; } });

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

@@ -0,0 +1,4 @@
+import type { Theme } from "./types";
+export declare const DEFAULT_STORAGE_KEY = "dev-inspector:theme";
+export declare function loadTheme(storageKey: string): Theme | null;
+export declare function saveTheme(storageKey: string, theme: Theme): void;

package/lib/ui/panel/theme/storage.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_STORAGE_KEY = void 0;
+exports.loadTheme = loadTheme;
+exports.saveTheme = saveTheme;
+exports.DEFAULT_STORAGE_KEY = "dev-inspector:theme";
+function getLocalStorage() {
+    try {
+        const ls = globalThis.localStorage;
+        if (!ls)
+            return null;
+        const probeKey = "__dev_inspector_probe__";
+        ls.setItem(probeKey, "1");
+        ls.removeItem(probeKey);
+        return ls;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function loadTheme(storageKey) {
+    const ls = getLocalStorage();
+    if (!ls)
+        return null;
+    try {
+        const v = ls.getItem(storageKey);
+        if (v === "light" || v === "dark")
+            return v;
+        return null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function saveTheme(storageKey, theme) {
+    const ls = getLocalStorage();
+    if (!ls)
+        return;
+    try {
+        ls.setItem(storageKey, theme);
+    }
+    catch (_a) {
+        void 0;
+    }
+}

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

@@ -0,0 +1,6 @@
+export type Theme = "light" | "dark";
+export type ThemeOptions = {
+    theme?: Theme;
+    persistTheme?: boolean;
+    storageKey?: string;
+};

package/lib/ui/panel/theme/types.js

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

package/lib/ui/panelStyles.d.ts

@@ -1 +1 @@
-export declare const PANEL_CSS = "\n.di-root, .di-root * {\n  box-sizing: border-box;\n}\n\n.di-toggle {\n  position: fixed;\n  right: 12px;\n  bottom: 12px;\n  z-index: 2147483647;\n  border: 1px solid rgba(255,255,255,0.18);\n  background: rgba(20,20,20,0.92);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 8px 10px;\n  border-radius: 10px;\n  cursor: pointer;\n  backdrop-filter: blur(8px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.35);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.di-toggleTitle {\n  font-weight: 600;\n}\n\n.di-toggleMeta {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.di-toggleBadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.16);\n  background: rgba(0,0,0,0.28);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-toggleErr {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 2px;\n  padding: 2px 6px;\n  border-radius: 999px;\n  background: rgba(239, 68, 68, 0.95);\n  color: #fff;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-toggleErrIcon {\n  font-weight: 700;\n  transform: translateY(-0.5px);\n}\n\n.di-toggleIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-panel {\n  position: fixed;\n  right: 12px;\n  bottom: 56px;\n  width: min(520px, calc(100vw - 24px));\n  height: min(380px, calc(100vh - 84px));\n  z-index: 2147483647;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(16,16,16,0.92);\n  color: #eaeaea;\n  border-radius: 12px;\n  overflow: hidden;\n  display: grid;\n  grid-template-rows: auto 1fr;\n  backdrop-filter: blur(8px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.45);\n}\n\n.di-resizeHandle {\n  width: 18px;\n  height: 18px;\n  flex: 0 0 18px;\n  border-radius: 8px;\n  cursor: nwse-resize;\n  touch-action: none;\n  opacity: 0.9;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  position: relative;\n}\n\n.di-resizeHandle::before {\n  content: \"\";\n  position: absolute;\n  inset: 4px;\n  border-radius: 6px;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,0.65) 0 2px, transparent 0) 0 0 / 6px 6px,\n    linear-gradient(135deg, rgba(255,255,255,0.35) 0 2px, transparent 0) 3px 3px / 6px 6px;\n}\n\n.di-resizeHandle:hover {\n  opacity: 1;\n  border-color: rgba(255,255,255,0.24);\n  background: rgba(255,255,255,0.10);\n}\n\n.di-hidden {\n  display: none;\n}\n\n.di-header {\n  display: grid;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid rgba(255,255,255,0.12);\n}\n\n.di-headerRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.di-title {\n  font: 600 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.95;\n}\n\n.di-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.di-btn {\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 6px 8px;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.di-tabs {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.di-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  padding: 6px 10px;\n  border-radius: 999px;\n  cursor: pointer;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.9;\n}\n\n.di-tab:hover {\n  background: rgba(255,255,255,0.10);\n  border-color: rgba(255,255,255,0.22);\n}\n\n.di-tabActive {\n  opacity: 1;\n  background: rgba(255,255,255,0.14);\n  border-color: rgba(255,255,255,0.28);\n}\n\n.di-tabIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.16);\n  background: rgba(0,0,0,0.28);\n  font-size: 11px;\n  line-height: 1;\n}\n\n.di-body {\n  overflow: auto;\n}\n\n.di-list {\n  margin: 0;\n  padding: 8px 10px;\n  list-style: none;\n  display: grid;\n  gap: 6px;\n}\n\n.di-item {\n  padding: 8px 10px;\n  border: 1px solid rgba(255,255,255,0.10);\n  border-radius: 10px;\n  background: rgba(255,255,255,0.04);\n}\n\n.di-itemToneNeutral {\n  border-color: rgba(255,255,255,0.10);\n  background: rgba(255,255,255,0.04);\n}\n\n.di-itemToneSuccess {\n  border-color: rgba(34, 197, 94, 0.35);\n  background: rgba(34, 197, 94, 0.10);\n}\n\n.di-itemToneWarning {\n  border-color: rgba(245, 158, 11, 0.42);\n  background: rgba(245, 158, 11, 0.12);\n}\n\n.di-itemToneError {\n  border-color: rgba(239, 68, 68, 0.45);\n  background: rgba(239, 68, 68, 0.12);\n}\n\n.di-meta {\n  display: flex;\n  gap: 10px;\n  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.85;\n  margin-bottom: 4px;\n}\n\n.di-statusChip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  line-height: 1;\n  color: #fff;\n}\n\n.di-statusChipSuccess {\n  background: rgba(34, 197, 94, 0.95);\n}\n\n.di-statusChipError {\n  background: rgba(239, 68, 68, 0.95);\n}\n\n.di-msg {\n  white-space: pre-wrap;\n  word-break: break-word;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n.di-details {\n  margin-top: 8px;\n}\n\n.di-detailsSummary {\n  cursor: pointer;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  opacity: 0.9;\n  user-select: none;\n}\n\n.di-netBodyDetails {\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  overflow: visible;\n}\n\n\n\n.di-netBodyDetails > summary.di-netDetailsSummary:hover {\n  background: rgba(255,255,255,0.06);\n}\n\n.di-netBodyDetails[open] > summary.di-netDetailsSummary {\n  background: rgba(255,255,255,0.08);\n  border-bottom: 0;\n}\n\n.di-netBodyDetails[open] > .di-detailsBody {\n  margin-top: 1px;\n}\n\n.di-netDetailsWrap {\n  display: grid;\n  gap: 1px;\n}\n\n.di-netDetailsSummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.di-netDetailsTitle {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n.di-copyBtn {\n  margin-left: auto;\n  border: 1px solid rgba(255,255,255,0.14);\n  background: rgba(255,255,255,0.06);\n  color: #fff;\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  padding: 4px 8px;\n  border-radius: 999px;\n  cursor: pointer;\n}\n\n.di-copyBtn:hover {\n  background: rgba(255,255,255,0.10);\n  border-color: rgba(255,255,255,0.22);\n}\n\n.di-copyBtn:active {\n  transform: translateY(1px);\n}\n\n.di-netTrunc {\n  border: 1px solid rgba(245, 158, 11, 0.42);\n  background: rgba(245, 158, 11, 0.10);\n  color: rgba(255,255,255,0.92);\n  border-radius: 10px;\n  padding: 8px 10px;\n  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  margin-bottom: 8px;\n}\n\n.di-detailsBody {\n  margin-top: 6px;\n  padding: 8px 10px;\n  border-radius: 10px;\n  border: 1px solid rgba(255,255,255,0.10);\n  background: rgba(0,0,0,0.22);\n}\n\n.di-netBodyText {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  opacity: 0.95;\n}\n\n.di-jsonRoot {\n  font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.di-jsonNode {\n  margin-left: 0;\n}\n\n.di-jsonSummary {\n  cursor: pointer;\n  user-select: none;\n  opacity: 0.95;\n}\n\n.di-jsonBody {\n  margin-top: 6px;\n  padding-left: 12px;\n  display: grid;\n  gap: 4px;\n}\n\n.di-jsonRow {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 10px;\n  align-items: start;\n}\n\n.di-jsonKey {\n  opacity: 0.85;\n  color: rgba(255,255,255,0.78);\n}\n\n.di-jsonValue {\n  opacity: 0.95;\n  color: rgba(255,255,255,0.92);\n}\n\n.di-jsonMore, .di-jsonTrunc {\n  opacity: 0.75;\n}\n";
+export declare const PANEL_CSS = "\n.di-root {\n  --di-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --di-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --di-radius-sm: 8px;\n  --di-radius-md: 10px;\n  --di-radius-lg: 14px;\n  --di-radius-pill: 999px;\n  --di-z: 2147483647;\n\n  --di-bg: #ffffff;\n  --di-bg-elev: #f8fafc;\n  --di-bg-soft: #f1f5f9;\n  --di-bg-hover: #e2e8f0;\n  --di-bg-row: #ffffff;\n  --di-bg-row-alt: #f8fafc;\n  --di-overlay: rgba(15, 23, 42, 0.04);\n\n  --di-border: #e2e8f0;\n  --di-border-strong: #cbd5e1;\n  --di-border-soft: #eef2f6;\n\n  --di-text: #0f172a;\n  --di-text-muted: #475569;\n  --di-text-faint: #94a3b8;\n  --di-text-on-accent: #ffffff;\n\n  --di-accent: #6366f1;\n  --di-accent-hover: #4f46e5;\n  --di-accent-soft: rgba(99, 102, 241, 0.10);\n\n  --di-success: #059669;\n  --di-success-bg: rgba(16, 185, 129, 0.10);\n  --di-success-border: rgba(16, 185, 129, 0.32);\n\n  --di-warning: #d97706;\n  --di-warning-bg: rgba(245, 158, 11, 0.12);\n  --di-warning-border: rgba(245, 158, 11, 0.36);\n\n  --di-error: #dc2626;\n  --di-error-bg: rgba(239, 68, 68, 0.10);\n  --di-error-border: rgba(239, 68, 68, 0.34);\n\n  --di-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);\n  --di-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);\n  --di-ring: 0 0 0 3px rgba(99, 102, 241, 0.25);\n}\n\n.di-root[data-di-theme=\"dark\"] {\n  --di-bg: #0b0e13;\n  --di-bg-elev: #11151c;\n  --di-bg-soft: #161b23;\n  --di-bg-hover: #1e2530;\n  --di-bg-row: #14181f;\n  --di-bg-row-alt: #181d25;\n  --di-overlay: rgba(255, 255, 255, 0.04);\n\n  --di-border: #232a35;\n  --di-border-strong: #313a48;\n  --di-border-soft: #1b212b;\n\n  --di-text: #f1f5f9;\n  --di-text-muted: #94a3b8;\n  --di-text-faint: #64748b;\n  --di-text-on-accent: #ffffff;\n\n  --di-accent: #818cf8;\n  --di-accent-hover: #a5b4fc;\n  --di-accent-soft: rgba(129, 140, 248, 0.16);\n\n  --di-success: #34d399;\n  --di-success-bg: rgba(16, 185, 129, 0.16);\n  --di-success-border: rgba(16, 185, 129, 0.40);\n\n  --di-warning: #fbbf24;\n  --di-warning-bg: rgba(245, 158, 11, 0.16);\n  --di-warning-border: rgba(245, 158, 11, 0.42);\n\n  --di-error: #f87171;\n  --di-error-bg: rgba(239, 68, 68, 0.16);\n  --di-error-border: rgba(239, 68, 68, 0.40);\n\n  --di-shadow: 0 8px 24px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.30);\n  --di-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);\n  --di-ring: 0 0 0 3px rgba(129, 140, 248, 0.32);\n}\n\n.di-root, .di-root * {\n  box-sizing: border-box;\n}\n\n.di-root {\n  font-family: var(--di-font);\n  color: var(--di-text);\n}\n\n.di-toggle {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  z-index: var(--di-z);\n  border: 1px solid var(--di-border);\n  background: var(--di-bg);\n  color: var(--di-text);\n  font-family: var(--di-font);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 8px 12px;\n  border-radius: var(--di-radius-pill);\n  cursor: pointer;\n  box-shadow: var(--di-shadow);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;\n}\n\n.di-toggle:hover {\n  border-color: var(--di-border-strong);\n  box-shadow: var(--di-shadow-lg);\n  transform: translateY(-1px);\n}\n\n.di-toggle:focus-visible {\n  outline: none;\n  box-shadow: var(--di-shadow), var(--di-ring);\n}\n\n.di-toggleTitle {\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.di-toggleMeta {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.di-toggleBadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: var(--di-radius-pill);\n  background: var(--di-bg-soft);\n  color: var(--di-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n}\n\n.di-toggleErr {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 2px;\n  padding: 2px 6px;\n  border-radius: var(--di-radius-pill);\n  background: var(--di-error);\n  color: var(--di-text-on-accent);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n}\n\n.di-toggleErrIcon {\n  font-weight: 700;\n  transform: translateY(-0.5px);\n}\n\n.di-toggleIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-panel {\n  position: fixed;\n  right: 16px;\n  bottom: 64px;\n  width: min(560px, calc(100vw - 32px));\n  height: min(440px, calc(100vh - 96px));\n  z-index: var(--di-z);\n  border: 1px solid var(--di-border);\n  background: var(--di-bg);\n  color: var(--di-text);\n  border-radius: var(--di-radius-lg);\n  overflow: hidden;\n  display: grid;\n  grid-template-rows: auto 1fr;\n  box-shadow: var(--di-shadow-lg);\n}\n\n.di-resizeHandle {\n  width: 16px;\n  height: 16px;\n  flex: 0 0 16px;\n  border-radius: var(--di-radius-sm);\n  cursor: nwse-resize;\n  touch-action: none;\n  border: 1px solid var(--di-border);\n  background: var(--di-bg-soft);\n  position: relative;\n  transition: background 160ms ease, border-color 160ms ease;\n}\n\n.di-resizeHandle::before {\n  content: \"\";\n  position: absolute;\n  inset: 4px;\n  border-radius: 4px;\n  background:\n    linear-gradient(135deg, var(--di-text-faint) 0 1.5px, transparent 0) 0 0 / 5px 5px,\n    linear-gradient(135deg, var(--di-text-faint) 0 1.5px, transparent 0) 2.5px 2.5px / 5px 5px;\n  opacity: 0.7;\n}\n\n.di-resizeHandle:hover {\n  border-color: var(--di-border-strong);\n  background: var(--di-bg-hover);\n}\n\n.di-hidden {\n  display: none !important;\n}\n\n.di-header {\n  display: grid;\n  gap: 10px;\n  padding: 12px 14px 10px;\n  border-bottom: 1px solid var(--di-border);\n  background: var(--di-bg-elev);\n}\n\n.di-headerRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.di-title {\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--di-text);\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.di-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.di-btn {\n  border: 1px solid var(--di-border);\n  background: var(--di-bg);\n  color: var(--di-text);\n  font-family: var(--di-font);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 6px 10px;\n  border-radius: var(--di-radius-md);\n  cursor: pointer;\n  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;\n}\n\n.di-btn:hover {\n  background: var(--di-bg-soft);\n  border-color: var(--di-border-strong);\n}\n\n.di-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--di-ring);\n}\n\n.di-iconBtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: 1px solid var(--di-border);\n  background: var(--di-bg);\n  color: var(--di-text-muted);\n  border-radius: var(--di-radius-md);\n  cursor: pointer;\n  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;\n}\n\n.di-iconBtn:hover {\n  background: var(--di-bg-soft);\n  border-color: var(--di-border-strong);\n  color: var(--di-text);\n}\n\n.di-iconBtn:focus-visible {\n  outline: none;\n  box-shadow: var(--di-ring);\n}\n\n.di-iconBtn svg {\n  width: 16px;\n  height: 16px;\n  display: block;\n}\n\n.di-themeIcon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n}\n\n.di-root[data-di-theme=\"light\"] .di-themeIcon--moon {\n  display: inline-flex;\n}\n\n.di-root[data-di-theme=\"dark\"] .di-themeIcon--sun {\n  display: inline-flex;\n}\n\n.di-tabs {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.di-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--di-text-muted);\n  padding: 6px 12px;\n  border-radius: var(--di-radius-pill);\n  cursor: pointer;\n  font-family: var(--di-font);\n  font-size: 12px;\n  font-weight: 500;\n  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;\n}\n\n.di-tab:hover {\n  background: var(--di-bg-soft);\n  color: var(--di-text);\n}\n\n.di-tab:focus-visible {\n  outline: none;\n  box-shadow: var(--di-ring);\n}\n\n.di-tabActive {\n  background: var(--di-accent-soft);\n  color: var(--di-accent);\n  border-color: transparent;\n}\n\n.di-tabActive:hover {\n  background: var(--di-accent-soft);\n  color: var(--di-accent);\n}\n\n.di-tabIcon {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.di-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: var(--di-radius-pill);\n  background: var(--di-overlay);\n  color: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n}\n\n.di-tabActive .di-badge {\n  background: var(--di-accent);\n  color: var(--di-text-on-accent);\n}\n\n.di-searchRow {\n  display: flex;\n}\n\n.di-searchWrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: 1;\n  background: var(--di-bg);\n  border: 1px solid var(--di-border);\n  border-radius: var(--di-radius-md);\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n}\n\n.di-searchWrap:focus-within {\n  border-color: var(--di-accent);\n  box-shadow: var(--di-ring);\n}\n\n.di-searchIconWrap {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  color: var(--di-text-faint);\n  pointer-events: none;\n}\n\n.di-searchIcon {\n  width: 14px;\n  height: 14px;\n  display: block;\n}\n\n.di-searchInput {\n  flex: 1;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--di-text);\n  font-family: var(--di-font);\n  font-size: 12px;\n  padding: 7px 10px;\n  min-width: 0;\n}\n\n.di-searchInput::placeholder {\n  color: var(--di-text-faint);\n}\n\n.di-searchInput::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.di-searchClear {\n  display: none;\n  border: 0;\n  background: transparent;\n  color: var(--di-text-faint);\n  cursor: pointer;\n  font-size: 16px;\n  line-height: 1;\n  padding: 4px 10px;\n  border-radius: var(--di-radius-md);\n  transition: color 120ms ease;\n}\n\n.di-searchClear:hover {\n  color: var(--di-text);\n}\n\n.di-searchClear--visible {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.di-bodyWrap {\n  position: relative;\n  overflow: hidden;\n}\n\n.di-body {\n  height: 100%;\n  overflow: auto;\n  background: var(--di-bg);\n  scrollbar-width: thin;\n  scrollbar-color: var(--di-border-strong) transparent;\n}\n\n.di-body::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n.di-body::-webkit-scrollbar-thumb {\n  background: var(--di-border-strong);\n  border-radius: var(--di-radius-pill);\n  border: 2px solid var(--di-bg);\n}\n\n.di-body::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.di-list {\n  margin: 0;\n  padding: 10px 12px 14px;\n  list-style: none;\n  display: grid;\n  gap: 6px;\n}\n\n.di-item {\n  padding: 10px 12px;\n  border: 1px solid var(--di-border);\n  border-radius: var(--di-radius-md);\n  background: var(--di-bg-row);\n  transition: border-color 160ms ease, background 160ms ease;\n}\n\n.di-item:hover {\n  border-color: var(--di-border-strong);\n}\n\n.di-itemToneNeutral {\n  border-color: var(--di-border);\n  background: var(--di-bg-row);\n}\n\n.di-itemToneSuccess {\n  border-color: var(--di-success-border);\n  background: var(--di-success-bg);\n}\n\n.di-itemToneWarning {\n  border-color: var(--di-warning-border);\n  background: var(--di-warning-bg);\n}\n\n.di-itemToneError {\n  border-color: var(--di-error-border);\n  background: var(--di-error-bg);\n}\n\n.di-meta {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-family: var(--di-font-mono);\n  font-size: 11px;\n  color: var(--di-text-muted);\n  margin-bottom: 4px;\n}\n\n.di-statusChip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 8px;\n  border-radius: var(--di-radius-pill);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  color: var(--di-text-on-accent);\n}\n\n.di-statusChipSuccess {\n  background: var(--di-success);\n}\n\n.di-statusChipError {\n  background: var(--di-error);\n}\n\n.di-msg {\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--di-font-mono);\n  font-size: 12px;\n  color: var(--di-text);\n  line-height: 1.55;\n}\n\n.di-details {\n  margin-top: 8px;\n}\n\n.di-detailsSummary {\n  cursor: pointer;\n  font-family: var(--di-font-mono);\n  font-size: 12px;\n  color: var(--di-text-muted);\n  user-select: none;\n  padding: 4px 6px;\n  border-radius: var(--di-radius-sm);\n  display: inline-block;\n  transition: background 160ms ease, color 160ms ease;\n}\n\n.di-detailsSummary:hover {\n  background: var(--di-bg-soft);\n  color: var(--di-text);\n}\n\n.di-netBodyDetails {\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  overflow: visible;\n}\n\n.di-netBodyDetails > summary.di-netDetailsSummary:hover {\n  background: var(--di-bg-soft);\n}\n\n.di-netBodyDetails[open] > summary.di-netDetailsSummary {\n  background: var(--di-bg-soft);\n  border-bottom: 0;\n}\n\n.di-netBodyDetails[open] > .di-detailsBody {\n  margin-top: 1px;\n}\n\n.di-netDetailsWrap {\n  display: grid;\n  gap: 1px;\n}\n\n.di-netDetailsSummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 4px 6px;\n  border-radius: var(--di-radius-sm);\n}\n\n.di-netDetailsTitle {\n  font-family: var(--di-font-mono);\n  font-size: 12px;\n  color: var(--di-text);\n}\n\n.di-copyBtn {\n  margin-left: auto;\n  border: 1px solid var(--di-border);\n  background: var(--di-bg);\n  color: var(--di-text-muted);\n  font-family: var(--di-font);\n  font-size: 11px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: var(--di-radius-pill);\n  cursor: pointer;\n  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;\n}\n\n.di-copyBtn:hover {\n  background: var(--di-bg-soft);\n  border-color: var(--di-border-strong);\n  color: var(--di-text);\n}\n\n.di-copyBtn:active {\n  transform: translateY(1px);\n}\n\n.di-netTrunc {\n  border: 1px solid var(--di-warning-border);\n  background: var(--di-warning-bg);\n  color: var(--di-text);\n  border-radius: var(--di-radius-md);\n  padding: 8px 10px;\n  font-family: var(--di-font-mono);\n  font-size: 11px;\n  margin-bottom: 8px;\n}\n\n.di-detailsBody {\n  margin-top: 6px;\n  padding: 10px 12px;\n  border-radius: var(--di-radius-md);\n  border: 1px solid var(--di-border);\n  background: var(--di-bg-elev);\n}\n\n.di-netBodyText {\n  font-family: var(--di-font-mono);\n  font-size: 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--di-text);\n}\n\n.di-jsonRoot {\n  font-family: var(--di-font-mono);\n  font-size: 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--di-text);\n}\n\n.di-jsonNode {\n  margin-left: 0;\n}\n\n.di-jsonSummary {\n  cursor: pointer;\n  user-select: none;\n  color: var(--di-text);\n}\n\n.di-jsonBody {\n  margin-top: 6px;\n  padding-left: 12px;\n  display: grid;\n  gap: 4px;\n}\n\n.di-jsonRow {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 10px;\n  align-items: start;\n}\n\n.di-jsonKey {\n  color: var(--di-accent);\n}\n\n.di-jsonValue {\n  color: var(--di-text);\n}\n\n.di-jsonMore, .di-jsonTrunc {\n  color: var(--di-text-faint);\n}\n\n.di-jumpBtn {\n  position: absolute;\n  right: 14px;\n  bottom: 14px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  border: 1px solid var(--di-border-strong);\n  background: var(--di-bg);\n  color: var(--di-text);\n  font-family: var(--di-font);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 6px 12px 6px 10px;\n  border-radius: var(--di-radius-pill);\n  cursor: pointer;\n  box-shadow: var(--di-shadow);\n  opacity: 0;\n  transform: translateY(6px);\n  pointer-events: none;\n  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;\n}\n\n.di-jumpBtn--visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.di-jumpBtn--hasNew {\n  background: var(--di-accent);\n  border-color: var(--di-accent);\n  color: var(--di-text-on-accent);\n}\n\n.di-jumpBtn--hasNew:hover {\n  background: var(--di-accent-hover);\n  border-color: var(--di-accent-hover);\n}\n\n.di-jumpBtn:hover {\n  background: var(--di-bg-soft);\n}\n\n.di-jumpBtn:focus-visible {\n  outline: none;\n  box-shadow: var(--di-ring);\n}\n\n.di-jumpBtnIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.di-jumpBtnIcon svg {\n  width: 14px;\n  height: 14px;\n  display: block;\n}\n\n.di-jumpBtnLabel {\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n";