dev-inspector 1.1.1 → 1.2.0

package/README.md

@@ -22,6 +22,7 @@ In-page devtools-style logger panel for web apps. Capture **console** and **netw
 - 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)
+- Optional cartoon skin (Arc-inspired sticker look) selectable at init
 - Configurable panel title (used in the header and the floating toggle)
 - Vite demo playground
 
@@ -44,22 +45,26 @@ initDevInspector({
     title: "My App Inspector",
     theme: "light",
     persistTheme: true,
+    skin: "default",
   },
 });
 ```
 
 ### 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                                     |
+| 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                                     |
+| `skin`            | `"default" \| "cartoon"` | `"default"`             | Visual skin. `"cartoon"` switches to an Arc-inspired sticker look (light + dark)     |
 
 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.
 
+The **skin** is an init-time decision (not exposed to end users). The cartoon skin shares the same dark/light toggle behaviour — both palettes are themed.
+
 ## 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,4 +1,5 @@
 export type Theme = "light" | "dark";
+export type Skin = "default" | "cartoon";
 export type InitOptions = {
     maxSize?: number;
     panelOptions?: {
@@ -7,6 +8,14 @@ export type InitOptions = {
         theme?: Theme;
         persistTheme?: boolean;
         themeStorageKey?: string;
+        /**
+         * Visual skin for the inspector panel. Chosen at init time only —
+         * runtime users can still toggle dark/light, but the skin choice
+         * (e.g. cartoon branding) is a developer-side decision.
+         *
+         * @default "default"
+         */
+        skin?: Skin;
     };
     networkOptions?: {
         includeBodies?: boolean;

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, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const key = getGlobalInstanceKey();
     const bag = getGlobalBag();
     const prev = bag[key];
@@ -20,7 +20,7 @@ function initDevInspector(options = {}) {
         try {
             prev.destroy();
         }
-        catch (_o) {
+        catch (_p) {
             void 0;
         }
     }
@@ -38,6 +38,7 @@ function initDevInspector(options = {}) {
         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,
+        skin: (_o = options.panelOptions) === null || _o === void 0 ? void 0 : _o.skin,
     });
     const destroy = () => {
         try {

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

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

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

@@ -4,7 +4,8 @@ exports.setupPanelBehavior = setupPanelBehavior;
 const bindings_1 = require("../bindings");
 const resize_1 = require("../resize");
 const theme_1 = require("../theme");
-function setupPanelBehavior(dom, state, storage, themeConfig) {
+const skin_1 = require("../skin");
+function setupPanelBehavior(dom, state, storage, themeConfig, skinConfig) {
     const applyVisibility = () => {
         if (state.open)
             dom.panel.classList.remove("di-hidden");
@@ -32,6 +33,7 @@ function setupPanelBehavior(dom, state, storage, themeConfig) {
         if (themeConfig.persist)
             (0, theme_1.saveTheme)(themeConfig.storageKey, next);
     };
+    (0, skin_1.applySkin)(dom.root, skinConfig.skin);
     (0, theme_1.applyTheme)(dom.root, state.theme);
     updateThemeButton();
     const bindings = (0, bindings_1.bindStorageToPanelView)({

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

@@ -1,5 +1,6 @@
 import type { LogStorage } from "../../storage/logStorage";
 import { type Theme } from "./theme";
+import type { Skin } from "./skin";
 export type PanelOptions = {
     storage: LogStorage;
     title?: string;
@@ -8,6 +9,7 @@ export type PanelOptions = {
     theme?: Theme;
     persistTheme?: boolean;
     themeStorageKey?: string;
+    skin?: Skin;
 };
 export type PanelHandle = {
     open: () => void;

package/lib/ui/panel/index.js

@@ -8,7 +8,7 @@ const state_1 = require("./state");
 const behavior_1 = require("./behavior");
 const theme_1 = require("./theme");
 function createPanel(options) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const doc = (0, ensureDocument_1.ensureDocument)();
     (0, ensureStyle_1.ensureStyle)(doc);
     const persistTheme = (_a = options.persistTheme) !== null && _a !== void 0 ? _a : true;
@@ -17,5 +17,5 @@ function createPanel(options) {
     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)((_d = options.initiallyOpen) !== null && _d !== void 0 ? _d : false, initialTheme);
-    return (0, behavior_1.setupPanelBehavior)(dom, state, options.storage, { storageKey, persist: persistTheme });
+    return (0, behavior_1.setupPanelBehavior)(dom, state, options.storage, { storageKey, persist: persistTheme }, { skin: (_e = options.skin) !== null && _e !== void 0 ? _e : "default" });
 }

package/lib/ui/panel/shared/ensureStyle.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureStyle = ensureStyle;
 const panelStyles_1 = require("../../panelStyles");
+const skin_1 = require("../skin");
 function ensureStyle(doc) {
     const id = "dev-inspector-panel-style";
     const existing = doc.getElementById(id);
@@ -9,6 +10,6 @@ function ensureStyle(doc) {
         return;
     const style = doc.createElement("style");
     style.id = id;
-    style.textContent = panelStyles_1.PANEL_CSS;
+    style.textContent = `${panelStyles_1.PANEL_CSS}\n${skin_1.CARTOON_CSS}`;
     doc.head.append(style);
 }

package/lib/ui/panel/skin/applySkin.d.ts

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

package/lib/ui/panel/skin/applySkin.js

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

package/lib/ui/panel/skin/cartoonStyles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Cartoon skin — Arc-inspired sticker / comic look.
+ *
+ * Activated by `data-di-skin="cartoon"` on `.di-root`. Combined with the
+ * existing `data-di-theme` attribute so we ship two cartoon variants
+ * (light + dark) that swap palette but keep the chunky borders, hard
+ * offset shadows, and rounded sticker shapes.
+ *
+ * The strategy is to redeclare the public `--di-*` design tokens for
+ * cartoon mode (so every component picks up the new look automatically)
+ * and then layer a few targeted overrides on top of the chrome elements
+ * that need a slightly different shape (thicker borders, no blur shadow).
+ */
+export declare const CARTOON_CSS = "\n/* ---- Cartoon \u00B7 Light --------------------------------------------------- */\n.di-root[data-di-skin=\"cartoon\"][data-di-theme=\"light\"] {\n  --di-radius-sm: 10px;\n  --di-radius-md: 14px;\n  --di-radius-lg: 18px;\n  --di-radius-pill: 999px;\n\n  --di-bg: #FFF1D2;\n  --di-bg-elev: #FFE6A8;\n  --di-bg-soft: #FFF8E1;\n  --di-bg-hover: #FFD56F;\n  --di-bg-row: #FFF1D2;\n  --di-bg-row-alt: #FFEAB8;\n  --di-overlay: rgba(26, 31, 58, 0.06);\n\n  --di-border: #1A1F3A;\n  --di-border-strong: #1A1F3A;\n  --di-border-soft: #1A1F3A;\n\n  --di-text: #1A1F3A;\n  --di-text-muted: #4A4F6A;\n  --di-text-faint: #6A6F8A;\n  --di-text-on-accent: #FFF1D2;\n\n  --di-accent: #2E36C8;\n  --di-accent-hover: #1F26A8;\n  --di-accent-soft: rgba(46, 54, 200, 0.14);\n\n  --di-success: #1A8260;\n  --di-success-bg: rgba(167, 255, 0, 0.22);\n  --di-success-border: #1A1F3A;\n\n  --di-warning: #B5530A;\n  --di-warning-bg: rgba(255, 213, 111, 0.32);\n  --di-warning-border: #1A1F3A;\n\n  --di-error: #C8102E;\n  --di-error-bg: rgba(255, 110, 130, 0.20);\n  --di-error-border: #1A1F3A;\n\n  --di-shadow: 4px 4px 0 #1A1F3A;\n  --di-shadow-lg: 6px 6px 0 #1A1F3A;\n  --di-ring: 0 0 0 3px rgba(46, 54, 200, 0.32);\n}\n\n/* ---- Cartoon \u00B7 Dark ---------------------------------------------------- */\n.di-root[data-di-skin=\"cartoon\"][data-di-theme=\"dark\"] {\n  --di-radius-sm: 10px;\n  --di-radius-md: 14px;\n  --di-radius-lg: 18px;\n  --di-radius-pill: 999px;\n\n  --di-bg: #1A1D38;\n  --di-bg-elev: #232752;\n  --di-bg-soft: #2A2E5C;\n  --di-bg-hover: #353A6E;\n  --di-bg-row: #1A1D38;\n  --di-bg-row-alt: #232752;\n  --di-overlay: rgba(255, 238, 184, 0.06);\n\n  --di-border: #FFEEB8;\n  --di-border-strong: #FFEEB8;\n  --di-border-soft: #FFEEB8;\n\n  --di-text: #FFEEB8;\n  --di-text-muted: #C8C8E0;\n  --di-text-faint: #8A8DAA;\n  --di-text-on-accent: #1A1D38;\n\n  --di-accent: #A7FF00;\n  --di-accent-hover: #C5FF45;\n  --di-accent-soft: rgba(167, 255, 0, 0.18);\n\n  --di-success: #A7FF00;\n  --di-success-bg: rgba(167, 255, 0, 0.18);\n  --di-success-border: #FFEEB8;\n\n  --di-warning: #FFD56F;\n  --di-warning-bg: rgba(255, 213, 111, 0.18);\n  --di-warning-border: #FFEEB8;\n\n  --di-error: #FF8FA3;\n  --di-error-bg: rgba(255, 143, 163, 0.18);\n  --di-error-border: #FFEEB8;\n\n  --di-shadow: 4px 4px 0 #FFEEB8;\n  --di-shadow-lg: 6px 6px 0 #FFEEB8;\n  --di-ring: 0 0 0 3px rgba(167, 255, 0, 0.36);\n}\n\n/* ---- Cartoon \u00B7 shared chrome ------------------------------------------- */\n.di-root[data-di-skin=\"cartoon\"] .di-toggle,\n.di-root[data-di-skin=\"cartoon\"] .di-panel,\n.di-root[data-di-skin=\"cartoon\"] .di-tab,\n.di-root[data-di-skin=\"cartoon\"] .di-jumpBtn {\n  border-width: 2px;\n  border-style: solid;\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-toggle {\n  font-weight: 700;\n  letter-spacing: 0.01em;\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-toggle:hover,\n.di-root[data-di-skin=\"cartoon\"] .di-jumpBtn:hover {\n  transform: translate(-1px, -1px);\n  box-shadow: var(--di-shadow-lg);\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-toggle:active,\n.di-root[data-di-skin=\"cartoon\"] .di-jumpBtn:active {\n  transform: translate(2px, 2px);\n  box-shadow: 0 0 0 #1A1F3A;\n}\n\n.di-root[data-di-skin=\"cartoon\"][data-di-theme=\"dark\"] .di-toggle:active,\n.di-root[data-di-skin=\"cartoon\"][data-di-theme=\"dark\"] .di-jumpBtn:active {\n  box-shadow: 0 0 0 #FFEEB8;\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-tabActive {\n  font-weight: 700;\n}\n\n/* Search bar: tighter sticker-style chip instead of stretched outlined input. */\n.di-root[data-di-skin=\"cartoon\"] .di-searchRow {\n  padding: 6px 12px 10px;\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-searchWrap {\n  border: 2px solid var(--di-border);\n  border-radius: var(--di-radius-pill);\n  background: var(--di-bg-soft);\n  box-shadow: 2px 2px 0 var(--di-border);\n  transition: box-shadow 120ms ease, transform 120ms ease;\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-searchWrap:focus-within {\n  box-shadow: 3px 3px 0 var(--di-accent);\n  border-color: var(--di-border);\n  transform: translate(-1px, -1px);\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-searchInput {\n  font-weight: 600;\n  padding: 6px 10px;\n}\n\n.di-root[data-di-skin=\"cartoon\"] .di-searchInput::placeholder {\n  font-weight: 500;\n  color: var(--di-text-muted);\n  opacity: 0.7;\n}\n";

package/lib/ui/panel/skin/cartoonStyles.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CARTOON_CSS = void 0;
+/**
+ * Cartoon skin — Arc-inspired sticker / comic look.
+ *
+ * Activated by `data-di-skin="cartoon"` on `.di-root`. Combined with the
+ * existing `data-di-theme` attribute so we ship two cartoon variants
+ * (light + dark) that swap palette but keep the chunky borders, hard
+ * offset shadows, and rounded sticker shapes.
+ *
+ * The strategy is to redeclare the public `--di-*` design tokens for
+ * cartoon mode (so every component picks up the new look automatically)
+ * and then layer a few targeted overrides on top of the chrome elements
+ * that need a slightly different shape (thicker borders, no blur shadow).
+ */
+exports.CARTOON_CSS = `
+/* ---- Cartoon · Light --------------------------------------------------- */
+.di-root[data-di-skin="cartoon"][data-di-theme="light"] {
+  --di-radius-sm: 10px;
+  --di-radius-md: 14px;
+  --di-radius-lg: 18px;
+  --di-radius-pill: 999px;
+
+  --di-bg: #FFF1D2;
+  --di-bg-elev: #FFE6A8;
+  --di-bg-soft: #FFF8E1;
+  --di-bg-hover: #FFD56F;
+  --di-bg-row: #FFF1D2;
+  --di-bg-row-alt: #FFEAB8;
+  --di-overlay: rgba(26, 31, 58, 0.06);
+
+  --di-border: #1A1F3A;
+  --di-border-strong: #1A1F3A;
+  --di-border-soft: #1A1F3A;
+
+  --di-text: #1A1F3A;
+  --di-text-muted: #4A4F6A;
+  --di-text-faint: #6A6F8A;
+  --di-text-on-accent: #FFF1D2;
+
+  --di-accent: #2E36C8;
+  --di-accent-hover: #1F26A8;
+  --di-accent-soft: rgba(46, 54, 200, 0.14);
+
+  --di-success: #1A8260;
+  --di-success-bg: rgba(167, 255, 0, 0.22);
+  --di-success-border: #1A1F3A;
+
+  --di-warning: #B5530A;
+  --di-warning-bg: rgba(255, 213, 111, 0.32);
+  --di-warning-border: #1A1F3A;
+
+  --di-error: #C8102E;
+  --di-error-bg: rgba(255, 110, 130, 0.20);
+  --di-error-border: #1A1F3A;
+
+  --di-shadow: 4px 4px 0 #1A1F3A;
+  --di-shadow-lg: 6px 6px 0 #1A1F3A;
+  --di-ring: 0 0 0 3px rgba(46, 54, 200, 0.32);
+}
+
+/* ---- Cartoon · Dark ---------------------------------------------------- */
+.di-root[data-di-skin="cartoon"][data-di-theme="dark"] {
+  --di-radius-sm: 10px;
+  --di-radius-md: 14px;
+  --di-radius-lg: 18px;
+  --di-radius-pill: 999px;
+
+  --di-bg: #1A1D38;
+  --di-bg-elev: #232752;
+  --di-bg-soft: #2A2E5C;
+  --di-bg-hover: #353A6E;
+  --di-bg-row: #1A1D38;
+  --di-bg-row-alt: #232752;
+  --di-overlay: rgba(255, 238, 184, 0.06);
+
+  --di-border: #FFEEB8;
+  --di-border-strong: #FFEEB8;
+  --di-border-soft: #FFEEB8;
+
+  --di-text: #FFEEB8;
+  --di-text-muted: #C8C8E0;
+  --di-text-faint: #8A8DAA;
+  --di-text-on-accent: #1A1D38;
+
+  --di-accent: #A7FF00;
+  --di-accent-hover: #C5FF45;
+  --di-accent-soft: rgba(167, 255, 0, 0.18);
+
+  --di-success: #A7FF00;
+  --di-success-bg: rgba(167, 255, 0, 0.18);
+  --di-success-border: #FFEEB8;
+
+  --di-warning: #FFD56F;
+  --di-warning-bg: rgba(255, 213, 111, 0.18);
+  --di-warning-border: #FFEEB8;
+
+  --di-error: #FF8FA3;
+  --di-error-bg: rgba(255, 143, 163, 0.18);
+  --di-error-border: #FFEEB8;
+
+  --di-shadow: 4px 4px 0 #FFEEB8;
+  --di-shadow-lg: 6px 6px 0 #FFEEB8;
+  --di-ring: 0 0 0 3px rgba(167, 255, 0, 0.36);
+}
+
+/* ---- Cartoon · shared chrome ------------------------------------------- */
+.di-root[data-di-skin="cartoon"] .di-toggle,
+.di-root[data-di-skin="cartoon"] .di-panel,
+.di-root[data-di-skin="cartoon"] .di-tab,
+.di-root[data-di-skin="cartoon"] .di-jumpBtn {
+  border-width: 2px;
+  border-style: solid;
+}
+
+.di-root[data-di-skin="cartoon"] .di-toggle {
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.di-root[data-di-skin="cartoon"] .di-toggle:hover,
+.di-root[data-di-skin="cartoon"] .di-jumpBtn:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: var(--di-shadow-lg);
+}
+
+.di-root[data-di-skin="cartoon"] .di-toggle:active,
+.di-root[data-di-skin="cartoon"] .di-jumpBtn:active {
+  transform: translate(2px, 2px);
+  box-shadow: 0 0 0 #1A1F3A;
+}
+
+.di-root[data-di-skin="cartoon"][data-di-theme="dark"] .di-toggle:active,
+.di-root[data-di-skin="cartoon"][data-di-theme="dark"] .di-jumpBtn:active {
+  box-shadow: 0 0 0 #FFEEB8;
+}
+
+.di-root[data-di-skin="cartoon"] .di-tabActive {
+  font-weight: 700;
+}
+
+/* Search bar: tighter sticker-style chip instead of stretched outlined input. */
+.di-root[data-di-skin="cartoon"] .di-searchRow {
+  padding: 6px 12px 10px;
+}
+
+.di-root[data-di-skin="cartoon"] .di-searchWrap {
+  border: 2px solid var(--di-border);
+  border-radius: var(--di-radius-pill);
+  background: var(--di-bg-soft);
+  box-shadow: 2px 2px 0 var(--di-border);
+  transition: box-shadow 120ms ease, transform 120ms ease;
+}
+
+.di-root[data-di-skin="cartoon"] .di-searchWrap:focus-within {
+  box-shadow: 3px 3px 0 var(--di-accent);
+  border-color: var(--di-border);
+  transform: translate(-1px, -1px);
+}
+
+.di-root[data-di-skin="cartoon"] .di-searchInput {
+  font-weight: 600;
+  padding: 6px 10px;
+}
+
+.di-root[data-di-skin="cartoon"] .di-searchInput::placeholder {
+  font-weight: 500;
+  color: var(--di-text-muted);
+  opacity: 0.7;
+}
+`;

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

@@ -0,0 +1,3 @@
+export type { Skin, SkinOptions } from "./types";
+export { applySkin } from "./applySkin";
+export { CARTOON_CSS } from "./cartoonStyles";

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CARTOON_CSS = exports.applySkin = void 0;
+var applySkin_1 = require("./applySkin");
+Object.defineProperty(exports, "applySkin", { enumerable: true, get: function () { return applySkin_1.applySkin; } });
+var cartoonStyles_1 = require("./cartoonStyles");
+Object.defineProperty(exports, "CARTOON_CSS", { enumerable: true, get: function () { return cartoonStyles_1.CARTOON_CSS; } });

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

@@ -0,0 +1,4 @@
+export type Skin = "default" | "cartoon";
+export type SkinOptions = {
+    skin?: Skin;
+};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-inspector",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "In-page devtools-style logger panel for web apps (console + network).",
   "repository": {
     "type": "git",