dev-inspector 1.1.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-inspector",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "In-page devtools-style logger panel for web apps (console + network).",
   "repository": {
     "type": "git",
@@ -16,7 +16,8 @@
     "lint-staged": "lint-staged",
     "demo": "vite demo --open",
     "demo:build": "vite build demo",
-    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf lib",
+    "build": "npm run clean && tsc -p tsconfig.json",
     "lint": "eslint \"src/**/*.{ts,tsx,js}\"",
     "prepublishOnly": "npm run build"
   },

package/lib/integrations/index.d.ts

@@ -1,2 +0,0 @@
-export type { CreateIssueInput, CreateIssueResult, IntegrationContext, IntegrationId, IntegrationsConfig, JiraIntegrationConfig } from "./types";
-export { createJiraIssue, fetchJiraIssueTypes, JiraIntegrationError } from "./jira";

package/lib/integrations/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JiraIntegrationError = exports.fetchJiraIssueTypes = exports.createJiraIssue = void 0;
-var jira_1 = require("./jira");
-Object.defineProperty(exports, "createJiraIssue", { enumerable: true, get: function () { return jira_1.createJiraIssue; } });
-Object.defineProperty(exports, "fetchJiraIssueTypes", { enumerable: true, get: function () { return jira_1.fetchJiraIssueTypes; } });
-Object.defineProperty(exports, "JiraIntegrationError", { enumerable: true, get: function () { return jira_1.JiraIntegrationError; } });

package/lib/integrations/jira/adf.d.ts

@@ -1,11 +0,0 @@
-export declare function textToAdf(text: string): {
-    type: string;
-    version: number;
-    content: {
-        type: string;
-        content: {
-            type: string;
-            text: string;
-        }[];
-    }[];
-};

package/lib/integrations/jira/adf.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.textToAdf = textToAdf;
-function paragraph(text) {
-    return {
-        type: "paragraph",
-        content: text.length > 0 ? [{ type: "text", text }] : [],
-    };
-}
-function textToAdf(text) {
-    const lines = text.split(/\r?\n/);
-    return {
-        type: "doc",
-        version: 1,
-        content: lines.map((l) => paragraph(l)),
-    };
-}

package/lib/integrations/jira/client.d.ts

@@ -1,4 +0,0 @@
-import type { CreateIssueInput, CreateIssueResult, JiraIntegrationConfig } from "../types";
-import type { JiraIssueTypeOption } from "../types";
-export declare function fetchJiraIssueTypes(config: JiraIntegrationConfig, projectKey?: string): Promise<JiraIssueTypeOption[]>;
-export declare function createJiraIssue(input: CreateIssueInput, config: JiraIntegrationConfig): Promise<CreateIssueResult>;

package/lib/integrations/jira/client.js

@@ -1,113 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fetchJiraIssueTypes = fetchJiraIssueTypes;
-exports.createJiraIssue = createJiraIssue;
-const adf_1 = require("./adf");
-const errors_1 = require("./errors");
-async function readJsonSafe(res) {
-    try {
-        return (await res.json());
-    }
-    catch (_a) {
-        return undefined;
-    }
-}
-function mapStatus(status) {
-    if (status === 400)
-        return { code: "bad_request", message: "Bad request. Check required fields and Jira configuration." };
-    if (status === 401)
-        return { code: "unauthorized", message: "Unauthorized. Check Jira credentials." };
-    if (status === 403)
-        return { code: "forbidden", message: "Forbidden. Check Jira permissions." };
-    if (status === 429)
-        return { code: "rate_limited", message: "Rate limited by Jira. Try again later." };
-    if (status >= 500)
-        return { code: "server_error", message: "Jira server error. Try again later." };
-    return { code: "unknown", message: "Unexpected Jira error." };
-}
-function isRecord(value) {
-    return typeof value === "object" && value !== null;
-}
-function toQuery(params) {
-    const sp = new URLSearchParams();
-    for (const [k, v] of Object.entries(params)) {
-        if (typeof v === "string" && v.length > 0)
-            sp.set(k, v);
-    }
-    const s = sp.toString();
-    return s.length > 0 ? `?${s}` : "";
-}
-async function fetchJiraIssueTypes(config, projectKey) {
-    var _a;
-    const proxyUrl = config.proxyUrl;
-    if (!proxyUrl)
-        throw new errors_1.JiraIntegrationError("Missing Jira proxyUrl.", "not_configured");
-    const url = `${proxyUrl}${toQuery({ op: "issueTypes", projectKey: (_a = projectKey !== null && projectKey !== void 0 ? projectKey : config.projectKey) !== null && _a !== void 0 ? _a : "" })}`;
-    let res;
-    try {
-        res = await fetch(url, { method: "GET", headers: { accept: "application/json" } });
-    }
-    catch (e) {
-        throw new errors_1.JiraIntegrationError("Network error while loading Jira issue types.", "network_error", { details: String(e) });
-    }
-    const data = await readJsonSafe(res);
-    if (!res.ok) {
-        const mapped = mapStatus(res.status);
-        throw new errors_1.JiraIntegrationError(mapped.message, mapped.code, { status: res.status, details: data });
-    }
-    if (!Array.isArray(data))
-        return [];
-    const out = [];
-    for (const it of data) {
-        if (!isRecord(it))
-            continue;
-        const id = typeof it.id === "string" ? it.id : undefined;
-        const name = typeof it.name === "string" ? it.name : undefined;
-        if (id && name)
-            out.push({ id, name });
-    }
-    return out;
-}
-async function createJiraIssue(input, config) {
-    var _a, _b, _c, _d, _e, _f;
-    const title = input.title.trim();
-    if (title.length === 0)
-        throw new errors_1.JiraIntegrationError("Title is required.", "bad_request");
-    const projectKey = (_b = (_a = input.jira) === null || _a === void 0 ? void 0 : _a.projectKey) !== null && _b !== void 0 ? _b : config.projectKey;
-    if (!projectKey)
-        throw new errors_1.JiraIntegrationError("Missing Jira project key.", "not_configured");
-    const issueType = (_e = (_d = (_c = input.jira) === null || _c === void 0 ? void 0 : _c.issueType) !== null && _d !== void 0 ? _d : config.issueType) !== null && _e !== void 0 ? _e : {};
-    if (!issueType.name && !issueType.id)
-        throw new errors_1.JiraIntegrationError("Missing Jira issue type (name or id).", "not_configured");
-    const descriptionText = (_f = input.description) !== null && _f !== void 0 ? _f : "";
-    const adf = (0, adf_1.textToAdf)(descriptionText);
-    const proxyUrl = config.proxyUrl;
-    if (!proxyUrl)
-        throw new errors_1.JiraIntegrationError("Missing Jira proxyUrl.", "not_configured");
-    const res = await fetch(proxyUrl, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-            provider: "jira",
-            input: {
-                title,
-                descriptionAdf: adf,
-                context: input.context,
-                screenshot: input.screenshot,
-                projectKey,
-                issueType,
-            },
-        }),
-    });
-    const data = await readJsonSafe(res);
-    if (!res.ok) {
-        const mapped = mapStatus(res.status);
-        throw new errors_1.JiraIntegrationError(mapped.message, mapped.code, { status: res.status, details: data });
-    }
-    const rec = isRecord(data) ? data : {};
-    return {
-        id: typeof rec.id === "string" ? rec.id : undefined,
-        key: typeof rec.key === "string" ? rec.key : undefined,
-        url: typeof rec.url === "string" ? rec.url : undefined,
-    };
-}

package/lib/integrations/jira/errors.d.ts

@@ -1,10 +0,0 @@
-export type JiraErrorCode = "not_configured" | "bad_request" | "unauthorized" | "forbidden" | "rate_limited" | "server_error" | "network_error" | "unknown";
-export declare class JiraIntegrationError extends Error {
-    code: JiraErrorCode;
-    status?: number;
-    details?: unknown;
-    constructor(message: string, code: JiraErrorCode, options?: {
-        status?: number;
-        details?: unknown;
-    });
-}

package/lib/integrations/jira/errors.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JiraIntegrationError = void 0;
-class JiraIntegrationError extends Error {
-    constructor(message, code, options) {
-        super(message);
-        this.name = "JiraIntegrationError";
-        this.code = code;
-        this.status = options === null || options === void 0 ? void 0 : options.status;
-        this.details = options === null || options === void 0 ? void 0 : options.details;
-    }
-}
-exports.JiraIntegrationError = JiraIntegrationError;

package/lib/integrations/jira/index.d.ts

@@ -1,2 +0,0 @@
-export { createJiraIssue, fetchJiraIssueTypes } from "./client";
-export { JiraIntegrationError } from "./errors";

package/lib/integrations/jira/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JiraIntegrationError = exports.fetchJiraIssueTypes = exports.createJiraIssue = void 0;
-var client_1 = require("./client");
-Object.defineProperty(exports, "createJiraIssue", { enumerable: true, get: function () { return client_1.createJiraIssue; } });
-Object.defineProperty(exports, "fetchJiraIssueTypes", { enumerable: true, get: function () { return client_1.fetchJiraIssueTypes; } });
-var errors_1 = require("./errors");
-Object.defineProperty(exports, "JiraIntegrationError", { enumerable: true, get: function () { return errors_1.JiraIntegrationError; } });