@bereasoftware/nexa 1.4.0 → 1.5.0

package/dist/nexa.es.js

@@ -1,4 +1,4 @@
-/*! Nexa v1.4.0 | (c) 2026 Berea-Soft | MIT License | https://github.com/Berea-Soft/Nexa */
+/*! Nexa v1.5.0 | (c) 2026 Berea-Soft | MIT License | https://github.com/Berea-Soft/Nexa */
 //#region src/types/index.ts
 var e = (e) => ({
 	ok: !0,
@@ -39,15 +39,15 @@ var i = { validate(n) {
 		code: "VALIDATION_ERROR"
 	});
 } }, o = { transform(e) {
-	return m(e, ee);
+	return h(e, ee);
 } }, s = { transform(e) {
-	return m(e, te);
+	return h(e, m);
 } }, c = { transform(e) {
-	return h(e);
+	return g(e);
 } };
 function l(e) {
 	return { transform(t) {
-		return Array.isArray(t) ? t.map((t) => g(t, e)) : g(t, e);
+		return Array.isArray(t) ? t.map((t) => _(t, e)) : _(t, e);
 	} };
 }
 function u(e) {
@@ -107,47 +107,47 @@ var d = class {
 function ee(e) {
 	return e.replace(/_([a-z])/g, (e, t) => t.toUpperCase());
 }
-function te(e) {
+function m(e) {
 	return e.replace(/[A-Z]/g, (e) => `_${e.toLowerCase()}`);
 }
-function m(e, t) {
+function h(e, t) {
 	if (!e || typeof e != "object") return e;
-	if (Array.isArray(e)) return e.map((e) => m(e, t));
+	if (Array.isArray(e)) return e.map((e) => h(e, t));
 	let n = {};
-	for (let [r, i] of Object.entries(e)) n[t(r)] = m(i, t);
+	for (let [r, i] of Object.entries(e)) n[t(r)] = h(i, t);
 	return n;
 }
-function h(e, t = "") {
+function g(e, t = "") {
 	let n = {};
 	if (Array.isArray(e)) e.forEach((e, r) => {
 		let i = t ? `${t}[${r}]` : `[${r}]`;
-		Object.assign(n, h(e, i));
+		Object.assign(n, g(e, i));
 	});
 	else if (e && typeof e == "object") for (let [r, i] of Object.entries(e)) {
 		let e = t ? `${t}.${r}` : r;
-		i && typeof i == "object" && !Array.isArray(i) ? Object.assign(n, h(i, e)) : n[e] = i;
+		i && typeof i == "object" && !Array.isArray(i) ? Object.assign(n, g(i, e)) : n[e] = i;
 	}
 	return n;
 }
-function g(e, t) {
+function _(e, t) {
 	if (!e || typeof e != "object") return {};
 	let n = e, r = {};
 	for (let e of t) e in n && (r[e] = n[e]);
 	return r;
 }
-function ne(e) {
+function te(e) {
 	let t = new AbortController(), n = setTimeout(() => t.abort(), e);
 	return t.signal.addEventListener("abort", () => clearTimeout(n), { once: !0 }), t;
 }
-async function _(e, t = 3) {
+async function v(e, t = 3) {
 	try {
 		return await e();
 	} catch (n) {
 		if (t <= 0) throw n;
-		return _(e, t - 1);
+		return v(e, t - 1);
 	}
 }
-var v = class {
+var y = class {
 	cache = /* @__PURE__ */ new Map();
 	get(e) {
 		let t = this.cache.get(e);
@@ -171,8 +171,8 @@ var v = class {
 		this.cache.delete(e);
 	}
 };
-function y(e = {}) {
-	let t = e.cache || new v(), n = e.ttlMs || 6e4, r = e.cacheableStatuses || [200, 304];
+function b(e = {}) {
+	let t = e.cache || new y(), n = e.ttlMs || 6e4, r = e.cacheableStatuses || [200, 304];
 	return async (e, i) => {
 		let a = (e.request.method || "GET").toUpperCase(), o = a === "GET", s = `${a}:${e.request.url}`;
 		if (o && t.has(s)) {
@@ -185,7 +185,7 @@ function y(e = {}) {
 		await i(), o && e.response && r.includes(e.response.status) && (t.set(s, e.response, n), e.state.cacheMiss = !0);
 	};
 }
-var b = y(), x = class {
+var x = b(), S = class {
 	pending = /* @__PURE__ */ new Map();
 	async execute(e, t) {
 		if (this.pending.has(e)) return this.pending.get(e);
@@ -198,8 +198,8 @@ var b = y(), x = class {
 		this.pending.clear();
 	}
 };
-function S(e = {}) {
-	let t = e.deduplicator || new x(), n = e.includeBody ?? !1, r = e.methods || ["GET"];
+function C(e = {}) {
+	let t = e.deduplicator || new S(), n = e.includeBody ?? !1, r = e.methods || ["GET"];
 	return async (e, i) => {
 		let a = (e.request.method || "GET").toUpperCase();
 		if (!r.includes(a)) {
@@ -215,8 +215,8 @@ function S(e = {}) {
 		}
 	};
 }
-var re = S();
-function C(e) {
+var ne = C();
+function w(e) {
 	return async (t) => {
 		let n = -1;
 		async function r(i) {
@@ -228,7 +228,7 @@ function C(e) {
 		await r(0);
 	};
 }
-var ie = class {
+var re = class {
 	middlewares = [];
 	use(e) {
 		return this.middlewares.push(e), this;
@@ -236,7 +236,7 @@ var ie = class {
 	async execute(e) {
 		if (e && typeof e == "object" && "request" in e && "response" in e) {
 			let t = e;
-			return await C(this.middlewares.map((e) => typeof e == "function" && e.length === 2 ? e : async (t, n) => {
+			return await w(this.middlewares.map((e) => typeof e == "function" && e.length === 2 ? e : async (t, n) => {
 				let r = e;
 				t.response.body = await r(t.response.body), await n();
 			}))(t), t.response.body;
@@ -249,7 +249,7 @@ var ie = class {
 		this.middlewares = [];
 	}
 };
-function w(e, t, n, r = {}) {
+function ie(e, t, n, r = {}) {
 	return {
 		ok: e >= 200 && e < 300,
 		data: t,
@@ -282,13 +282,13 @@ function T(e) {
 		return i;
 	};
 }
-function E(e) {
+function ae(e) {
 	return { request: async (t, n, r) => {
 		let i = e[n];
 		return await T(i)(t, r);
 	} };
 }
-var D = class e {
+var E = class e {
 	subscribers = [];
 	errorSubscribers = [];
 	completeSubscribers = [];
@@ -317,7 +317,7 @@ var D = class e {
 		}, (e) => n.error(e), () => n.complete()), n;
 	}
 };
-function ae(e) {
+function D(e) {
 	return (t) => {
 		if (!e(t)) throw TypeError("Value does not match expected type");
 		return t;
@@ -326,10 +326,10 @@ function ae(e) {
 function O(e) {
 	return e;
 }
-function oe(e) {
+function k(e) {
 	return O(e);
 }
-var se = class {
+var oe = class {
 	_promise;
 	resolveFunc;
 	rejectFunc;
@@ -351,7 +351,7 @@ var se = class {
 		return this._promise;
 	}
 };
-async function k(e, t = {}) {
+async function A(e, t = {}) {
 	let n = e.body?.getReader();
 	if (!n) throw Error("Response body is not readable");
 	let r = [], i = 0, a = parseInt(e.headers.get("content-length") || "0", 10);
@@ -360,22 +360,22 @@ async function k(e, t = {}) {
 		if (e) break;
 		r.push(o), i += o.length, t.onChunk && await t.onChunk(o), t.onProgress && a > 0 && t.onProgress(i, a);
 	}
-	return A(r, i);
+	return j(r, i);
 }
-function A(e, t) {
+function j(e, t) {
 	let n = new Uint8Array(t), r = 0;
 	for (let t of e) n.set(t, r), r += t.byteLength;
 	return n;
 }
-async function ce(e, t) {
-	let n = await k(e);
+async function se(e, t) {
+	let n = await A(e);
 	if (typeof window > "u") await (await import("fs").then((e) => e.promises)).writeFile(t, n);
 	else {
 		let e = new Blob([n.buffer], { type: "application/octet-stream" }), r = URL.createObjectURL(e), i = document.createElement("a");
 		i.href = r, i.download = t, i.click(), URL.revokeObjectURL(r);
 	}
 }
-function j(e = {}) {
+function M(e = {}) {
 	return async (t, n) => {
 		if (await n(), t.response && t.response.body && typeof t.response.body == "object" && "getReader" in t.response.body) {
 			let n = t.response.body.getReader(), r = [], i = 0, a = parseInt(t.response.headers?.["content-length"] || "0", 10);
@@ -385,7 +385,7 @@ function j(e = {}) {
 					if (o) break;
 					r.push(s), i += s.length, e.onChunk && await e.onChunk(s), e.onProgress && a > 0 && e.onProgress(i, a), t.state.streamedChunks = t.state.streamedChunks || [], t.state.streamedChunks.push(s);
 				}
-				let o = A(r, i);
+				let o = j(r, i);
 				t.response.body = o, t.state.streaming = !0, t.state.streamedBytes = i;
 			} finally {
 				n.releaseLock();
@@ -393,15 +393,15 @@ function j(e = {}) {
 		}
 	};
 }
-var le = j({ onProgress: (e, t) => {
+var ce = M({ onProgress: (e, t) => {
 	if (t > 0) {
 		let n = Math.round(e / t * 100);
 		console.warn(`Streaming: ${n}% (${e}/${t} bytes)`);
 	}
-} }), M = class {
+} }), N = class {
 	plugins = [];
-	cache = new v();
-	deduplicator = new x();
+	cache = new y();
+	deduplicator = new S();
 	middlewares = [];
 	listeners = /* @__PURE__ */ new Map();
 	register(e) {
@@ -417,7 +417,7 @@ var le = j({ onProgress: (e, t) => {
 		return this.deduplicator;
 	}
 	getPipeline() {
-		return C(this.middlewares);
+		return w(this.middlewares);
 	}
 	async executePipeline(e) {
 		await this.getPipeline()(e);
@@ -440,7 +440,7 @@ var le = j({ onProgress: (e, t) => {
 	clear() {
 		this.plugins = [], this.middlewares = [], this.listeners.clear(), this.cache.clear(), this.deduplicator.clear();
 	}
-}, ue = {
+}, le = {
 	name: "logger",
 	setup(e) {
 		e.on("request:start", (...e) => {
@@ -454,7 +454,7 @@ var le = j({ onProgress: (e, t) => {
 			console.error(`❌ Request failed: ${t}`, n);
 		});
 	}
-}, N = class {
+}, ue = class {
 	name = "metrics";
 	metrics = {
 		requests: 0,
@@ -471,22 +471,22 @@ var le = j({ onProgress: (e, t) => {
 	getMetrics() {
 		return { ...this.metrics };
 	}
-}, P = class {
+}, de = class {
 	name = "cache";
 	ttlMs;
 	constructor(e = 6e4) {
 		this.ttlMs = e;
 	}
 	setup(e) {
-		e.addMiddleware(y({ ttlMs: this.ttlMs }));
+		e.addMiddleware(b({ ttlMs: this.ttlMs }));
 	}
-}, F = class {
+}, fe = class {
 	name = "dedupe";
 	setup(e) {
-		e.addMiddleware(S());
+		e.addMiddleware(C());
 	}
-}, I = class {
-	store = new v();
+}, pe = class {
+	store = new y();
 	get(e) {
 		return this.store.get(e);
 	}
@@ -499,7 +499,7 @@ var le = j({ onProgress: (e, t) => {
 	clear() {
 		this.store.clear();
 	}
-}, L = class {
+}, P = class {
 	maxAttempts;
 	baseDelayMs;
 	constructor(e = 3, t = 100) {
@@ -513,7 +513,7 @@ var le = j({ onProgress: (e, t) => {
 		let t = this.baseDelayMs * 2 ** (e - 1), n = Math.random() * t * .1;
 		return Math.min(t + n, 3e4);
 	}
-}, R = class {
+}, F = class {
 	running = 0;
 	queue = [];
 	maxConcurrent;
@@ -543,7 +543,7 @@ var le = j({ onProgress: (e, t) => {
 		return this.running;
 	}
 };
-function z(e) {
+function I(e) {
 	return e == null ? {
 		serialized: void 0,
 		contentType: null
@@ -567,14 +567,14 @@ function z(e) {
 		contentType: "application/json"
 	};
 }
-function B(e, t) {
+function L(e, t) {
 	return t ? e.replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (e, n) => {
 		let r = t[n];
 		if (r === void 0) throw Error(`Missing path parameter: :${n}`);
 		return encodeURIComponent(String(r));
 	}) : e;
 }
-var V = class n {
+var R = class n {
 	requestInterceptors = [];
 	responseInterceptors = [];
 	cache;
@@ -588,12 +588,12 @@ var V = class n {
 			defaultHeaders: e.defaultHeaders ?? { "Content-Type": "application/json" },
 			defaultTimeout: e.defaultTimeout ?? 3e4,
 			validateStatus: e.validateStatus ?? ((e) => e >= 200 && e < 300),
-			cacheStrategy: e.cacheStrategy ?? new I(),
+			cacheStrategy: e.cacheStrategy ?? new pe(),
 			maxConcurrent: e.maxConcurrent ?? 0,
 			defaultResponseType: e.defaultResponseType ?? "auto",
 			defaultHooks: e.defaultHooks ?? {},
 			adapter: e.adapter
-		}, this.cache = this.config.cacheStrategy, this.requestQueue = this.config.maxConcurrent > 0 ? new R(this.config.maxConcurrent) : null, this.devTracker = e.devTracker ?? null;
+		}, this.cache = this.config.cacheStrategy, this.requestQueue = this.config.maxConcurrent > 0 ? new F(this.config.maxConcurrent) : null, this.devTracker = e.devTracker ?? null;
 	}
 	async request(n) {
 		if (!this.requestInterceptors.length && !this.responseInterceptors.length && !n.cache?.enabled && !n.hooks && !Object.keys(this.config.defaultHooks).length && !n.retry && !n.validate && !n.transform && !this.requestQueue && !n.onDownloadProgress && !n.signal) return this.fastPath(n);
@@ -711,7 +711,7 @@ var V = class n {
 		}
 	}
 	async fastPath(n) {
-		let r = B(n.url, n.params), i = this.buildUrl(r, n.query), { serialized: a, contentType: o } = z(n.body), s = {
+		let r = L(n.url, n.params), i = this.buildUrl(r, n.query), { serialized: a, contentType: o } = I(n.body), s = {
 			...this.config.defaultHeaders,
 			...n.headers
 		};
@@ -938,7 +938,7 @@ var V = class n {
 		});
 	}
 	buildRequest(e) {
-		let t = B(e.url, e.params);
+		let t = L(e.url, e.params);
 		return {
 			url: this.buildUrl(t, e.query),
 			method: e.method ?? "GET",
@@ -963,11 +963,11 @@ var V = class n {
 		return n;
 	}
 	getCacheKey(e) {
-		let t = B(e.url, e.params), n = e.query ? JSON.stringify(e.query) : "";
+		let t = L(e.url, e.params), n = e.query ? JSON.stringify(e.query) : "";
 		return `${e.method ?? "GET"}:${t}${n ? ":" + n : ""}`;
 	}
 	fetchWithTimeout(e, t, n) {
-		let { serialized: r, contentType: i } = z(e.body), a = { ...e.headers };
+		let { serialized: r, contentType: i } = I(e.body), a = { ...e.headers };
 		return i ? a["Content-Type"] = i : r instanceof FormData && delete a["Content-Type"], new Promise((i, o) => {
 			let s = setTimeout(() => {
 				n.abort(), o(new DOMException("Request timed out", "TimeoutError"));
@@ -1072,7 +1072,7 @@ var V = class n {
 		return e ? "maxAttempts" in e ? e.maxAttempts ?? 1 : 100 : 1;
 	}
 	getRetryStrategy(e) {
-		return e ? "shouldRetry" in e ? e : new L(e.maxAttempts, e.backoffMs) : {
+		return e ? "shouldRetry" in e ? e : new P(e.maxAttempts, e.backoffMs) : {
 			shouldRetry: () => !1,
 			delayMs: () => 0
 		};
@@ -1086,7 +1086,7 @@ var V = class n {
 	trackDev(e) {
 		this.devTracker && this.devTracker.track(e);
 	}
-}, H = class extends Error {
+}, z = class extends Error {
 	status;
 	code;
 	response;
@@ -1094,18 +1094,18 @@ var V = class n {
 		super(e), this.name = "HttpError", this.status = t, this.code = n, this.response = r;
 	}
 };
-function U(e) {
-	return e instanceof H;
+function B(e) {
+	return e instanceof z;
 }
-function de(e) {
-	return new V(e);
+function me(e) {
+	return new R(e);
 }
 //#endregion
 //#region src/realtime/websocket-client.ts
-function W() {
+function V() {
 	return typeof window > "u" && typeof process < "u" && process.versions?.node !== void 0;
 }
-var fe = class {
+var he = class {
 	url;
 	options;
 	pluginManager;
@@ -1127,7 +1127,7 @@ var fe = class {
 		message: /* @__PURE__ */ new Set()
 	};
 	constructor(e, t = {}) {
-		this.url = e, this.options = t, this.pluginManager = new M();
+		this.url = e, this.options = t, this.pluginManager = new N();
 	}
 	updateStatus(e) {
 		this.status = e, e === "open" ? this.connectionStartTime = Date.now() : e === "closed" && this.connectionStartTime > 0 && (this.stats.connectionTime += Date.now() - this.connectionStartTime, this.connectionStartTime = 0);
@@ -1204,7 +1204,7 @@ var fe = class {
 	cleanup() {
 		this.reconnectTimer &&= (clearTimeout(this.reconnectTimer), null), this.stopHeartbeat();
 	}
-}, G = class extends fe {
+}, H = class extends he {
 	socket = null;
 	messageTypeListeners = /* @__PURE__ */ new Map();
 	constructor(e, t = {}) {
@@ -1263,9 +1263,9 @@ var fe = class {
 		}
 		return e;
 	}
-}, pe = class extends G {
+}, ge = class extends H {
 	async connect() {
-		if (W()) try {
+		if (V()) try {
 			let { default: e } = await import("ws");
 			return super.connect();
 		} catch {
@@ -1274,15 +1274,15 @@ var fe = class {
 		return super.connect();
 	}
 };
-function me(e, t = {}) {
-	return W() ? new pe(e, t) : new G(e, t);
+function _e(e, t = {}) {
+	return V() ? new ge(e, t) : new H(e, t);
 }
 //#endregion
 //#region src/realtime/sse-client.ts
-function K() {
+function U() {
 	return typeof window > "u" && typeof process < "u" && process.versions?.node !== void 0;
 }
-var q = class {
+var W = class {
 	url;
 	options;
 	_source = null;
@@ -1306,7 +1306,7 @@ var q = class {
 	};
 	_lastEventId = null;
 	constructor(e, t = {}) {
-		this.url = e, this.options = t, this.pluginManager = new M();
+		this.url = e, this.options = t, this.pluginManager = new N();
 	}
 	updateStatus(e) {
 		this.status = e, e === "open" ? this.connectionStartTime = Date.now() : e === "closed" && this.connectionStartTime > 0 && (this.stats.connectionTime += Date.now() - this.connectionStartTime, this.connectionStartTime = 0);
@@ -1427,18 +1427,18 @@ var q = class {
 			return e;
 		}
 	}
-}, he = class extends q {
+}, ve = class extends W {
 	async connect() {
-		if (K()) throw Error("SSE client for Node.js requires a polyfill or custom implementation. Consider using a library like \"eventsource\" or implement using fetch with streaming.");
+		if (U()) throw Error("SSE client for Node.js requires a polyfill or custom implementation. Consider using a library like \"eventsource\" or implement using fetch with streaming.");
 		return super.connect();
 	}
 };
-function ge(e, t = {}) {
-	return K() ? new he(e, t) : new q(e, t);
+function ye(e, t = {}) {
+	return U() ? new ve(e, t) : new W(e, t);
 }
 //#endregion
 //#region src/realtime/plugin.ts
-var _e = class {
+var be = class {
 	name = "realtime";
 	setup(e) {
 		e.on("websocket:connect:start", (...t) => {
@@ -1462,12 +1462,28 @@ var _e = class {
 		});
 	}
 };
-function ve() {
-	return new _e();
+function xe() {
+	return new be();
 }
 //#endregion
 //#region src/dev-overlay/tracker.ts
-var J = class {
+var G = "nexa.devOverlay.config";
+function K() {
+	try {
+		if (typeof localStorage > "u") return {};
+		let e = localStorage.getItem(G);
+		return e ? JSON.parse(e) : {};
+	} catch {
+		return {};
+	}
+}
+function Se(e) {
+	try {
+		if (typeof localStorage > "u") return;
+		localStorage.setItem(G, JSON.stringify(e));
+	} catch {}
+}
+var q = class {
 	history = [];
 	maxHistory;
 	listeners = /* @__PURE__ */ new Set();
@@ -1479,7 +1495,11 @@ var J = class {
 			maxHistory: this.maxHistory,
 			keyboardShortcut: e.keyboardShortcut ?? "ctrl+shift+n",
 			position: e.position ?? "bottom-right",
-			theme: e.theme ?? "dark"
+			theme: e.theme ?? "dark",
+			devOnly: e.devOnly ?? !0,
+			floatingButtonSize: e.floatingButtonSize ?? 48,
+			floatingButtonOffset: e.floatingButtonOffset ?? 24,
+			floatingButtonTheme: e.floatingButtonTheme ?? "inherit"
 		};
 	}
 	track(e) {
@@ -1518,10 +1538,21 @@ var J = class {
 	getConfig() {
 		return this.config;
 	}
+	updateConfig(e) {
+		this.config = {
+			...this.config,
+			...e
+		}, this.maxHistory = this.config.maxHistory;
+		try {
+			Se(this.config);
+		} catch {}
+		return this.config;
+	}
 	generateId() {
 		return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 	}
-}, Y = {
+}, J = {
+	gear: "<svg width=\"16\" height=\"16\" viewBox=\"0 0 48 48\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M 24 4 C 22.423103 4 20.902664 4.1994284 19.451172 4.5371094 A 1.50015 1.50015 0 0 0 18.300781 5.8359375 L 17.982422 8.7382812 C 17.878304 9.6893592 17.328913 10.530853 16.5 11.009766 C 15.672739 11.487724 14.66862 11.540667 13.792969 11.15625 L 13.791016 11.15625 L 11.125 9.9824219 A 1.50015 1.50015 0 0 0 9.4257812 10.330078 C 7.3532865 12.539588 5.7626807 15.215064 4.859375 18.201172 A 1.50015 1.50015 0 0 0 5.4082031 19.845703 L 7.7734375 21.580078 C 8.5457929 22.147918 9 23.042801 9 24 C 9 24.95771 8.5458041 25.853342 7.7734375 26.419922 L 5.4082031 28.152344 A 1.50015 1.50015 0 0 0 4.859375 29.796875 C 5.7625845 32.782665 7.3519262 35.460112 9.4257812 37.669922 A 1.50015 1.50015 0 0 0 11.125 38.015625 L 13.791016 36.841797 C 14.667094 36.456509 15.672169 36.511947 16.5 36.990234 C 17.328913 37.469147 17.878304 38.310641 17.982422 39.261719 L 18.300781 42.164062 A 1.50015 1.50015 0 0 0 19.449219 43.460938 C 20.901371 43.799844 22.423103 44 24 44 C 25.576897 44 27.097336 43.800572 28.548828 43.462891 A 1.50015 1.50015 0 0 0 29.699219 42.164062 L 30.017578 39.261719 C 30.121696 38.310641 30.671087 37.469147 31.5 36.990234 C 32.327261 36.512276 33.33138 36.45738 34.207031 36.841797 L 36.875 38.015625 A 1.50015 1.50015 0 0 0 38.574219 37.669922 C 40.646713 35.460412 42.237319 32.782983 43.140625 29.796875 A 1.50015 1.50015 0 0 0 42.591797 28.152344 L 40.226562 26.419922 C 39.454197 25.853342 39 24.95771 39 24 C 39 23.04229 39.454197 22.146658 40.226562 21.580078 L 42.591797 19.847656 A 1.50015 1.50015 0 0 0 43.140625 18.203125 C 42.237319 15.217017 40.646713 12.539588 38.574219 10.330078 A 1.50015 1.50015 0 0 0 36.875 9.984375 L 34.207031 11.158203 C 33.33138 11.54262 32.327261 11.487724 31.5 11.009766 C 30.671087 10.530853 30.121696 9.6893592 30.017578 8.7382812 L 29.699219 5.8359375 A 1.50015 1.50015 0 0 0 28.550781 4.5390625 C 27.098629 4.2001555 25.576897 4 24 4 z M 24 7 C 24.974302 7 25.90992 7.1748796 26.847656 7.3398438 L 27.035156 9.0644531 C 27.243038 10.963375 28.346913 12.652335 30 13.607422 C 31.654169 14.563134 33.668094 14.673009 35.416016 13.904297 L 37.001953 13.207031 C 38.219788 14.669402 39.183985 16.321182 39.857422 18.130859 L 38.451172 19.162109 C 36.911538 20.291529 36 22.08971 36 24 C 36 25.91029 36.911538 27.708471 38.451172 28.837891 L 39.857422 29.869141 C 39.183985 31.678818 38.219788 33.330598 37.001953 34.792969 L 35.416016 34.095703 C 33.668094 33.326991 31.654169 33.436866 30 34.392578 C 28.346913 35.347665 27.243038 37.036625 27.035156 38.935547 L 26.847656 40.660156 C 25.910002 40.82466 24.973817 41 24 41 C 23.025698 41 22.09008 40.82512 21.152344 40.660156 L 20.964844 38.935547 C 20.756962 37.036625 19.653087 35.347665 18 34.392578 C 16.345831 33.436866 14.331906 33.326991 12.583984 34.095703 L 10.998047 34.792969 C 9.7799772 33.330806 8.8159425 31.678964 8.1425781 29.869141 L 9.5488281 28.837891 C 11.088462 27.708471 12 25.91029 12 24 C 12 22.08971 11.087719 20.290363 9.5488281 19.160156 L 8.1425781 18.128906 C 8.8163325 16.318532 9.7814501 14.667839 11 13.205078 L 12.583984 13.902344 C 14.331906 14.671056 16.345831 14.563134 18 13.607422 C 19.653087 12.652335 20.756962 10.963375 20.964844 9.0644531 L 21.152344 7.3398438 C 22.089998 7.1753403 23.026183 7 24 7 z M 24 16 C 19.599487 16 16 19.59949 16 24 C 16 28.40051 19.599487 32 24 32 C 28.400513 32 32 28.40051 32 24 C 32 19.59949 28.400513 16 24 16 z M 24 19 C 26.779194 19 29 21.220808 29 24 C 29 26.779192 26.779194 29 24 29 C 21.220806 29 19 26.779192 19 24 C 19 21.220808 21.220806 19 24 19 z\"></path>\n</svg>",
 	close: "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>",
 	chevron: "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"/></svg>",
 	back: "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 19l-7-7 7-7\"/></svg>",
@@ -1530,35 +1561,40 @@ var J = class {
 	search: "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"M21 21l-4.35-4.35\"/></svg>",
 	clock: "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>",
 	zap: "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg>"
-}, X = {
-	bg: "#09090b",
-	bgElevated: "#18181b",
-	border: "#27272a",
-	borderFocus: "#3f3f46",
-	text: "#fafafa",
-	textMuted: "#a1a1aa",
-	textDim: "#71717a",
-	accent: "#3b82f6",
-	accentHover: "#2563eb",
-	success: "#22c55e",
-	successBg: "rgba(34, 197, 94, 0.1)",
-	error: "#ef4444",
-	errorBg: "rgba(239, 68, 68, 0.1)",
-	warning: "#f59e0b",
-	get: "#22c55e",
-	post: "#3b82f6",
-	put: "#f59e0b",
-	patch: "#a855f7",
-	delete: "#ef4444"
-}, Z = `
+}, Y = {
+	bg: "#0b1120",
+	bgElevated: "#111827",
+	bgSurface: "#172033",
+	border: "#24324a",
+	borderFocus: "#35507a",
+	text: "#e5eefb",
+	textMuted: "#b4c4dd",
+	textDim: "#7f93b3",
+	accent: "#38bdf8",
+	accentHover: "#0ea5e9",
+	accentSoft: "rgba(56, 189, 248, 0.18)",
+	success: "#34d399",
+	successBg: "rgba(52, 211, 153, 0.16)",
+	error: "#fb7185",
+	errorBg: "rgba(251, 113, 133, 0.16)",
+	warning: "#fbbf24",
+	warningBg: "rgba(251, 191, 36, 0.16)",
+	info: "#a78bfa",
+	infoBg: "rgba(167, 139, 250, 0.16)",
+	get: "#34d399",
+	post: "#38bdf8",
+	put: "#fbbf24",
+	patch: "#a78bfa",
+	delete: "#fb7185"
+}, Ce = `
   #nexa-dev-overlay * { margin: 0; padding: 0; box-sizing: border-box; }
   #nexa-dev-overlay {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: ${X.bg};
-    color: ${X.text};
-    border: 1px solid ${X.border};
+    background: ${Y.bg};
+    color: ${Y.text};
+    border: 1px solid ${Y.border};
     border-radius: 16px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03);
+    box-shadow: 0 28px 60px -24px rgba(2, 6, 23, 0.78), 0 0 0 1px rgba(148, 163, 184, 0.08);
     overflow: hidden;
   }
   #nexa-dev-overlay .nexa-header {
@@ -1566,8 +1602,8 @@ var J = class {
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid ${X.border};
-    background: ${X.bgElevated};
+    border-bottom: 1px solid ${Y.border};
+    background: ${Y.bgElevated};
   }
   #nexa-dev-overlay .nexa-header-left {
     display: flex;
@@ -1580,7 +1616,7 @@ var J = class {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: ${X.bgElevated};
+    background: linear-gradient(135deg, ${Y.accentSoft}, rgba(255,255,255,0.02));
     border-radius: 8px;
     overflow: hidden;
   }
@@ -1602,20 +1638,20 @@ var J = class {
     background: transparent;
     border: none;
     border-radius: 8px;
-    color: ${X.textMuted};
+    color: ${Y.textMuted};
     cursor: pointer;
     transition: all 0.15s;
   }
   #nexa-dev-overlay .nexa-icon-btn:hover {
-    background: ${X.border};
-    color: ${X.text};
+    background: ${Y.bgSurface};
+    color: ${Y.text};
   }
   #nexa-dev-overlay .nexa-metrics-bar {
     display: flex;
     gap: 4px;
     padding: 12px 16px;
-    background: ${X.bg};
-    border-bottom: 1px solid ${X.border};
+    background: ${Y.bg};
+    border-bottom: 1px solid ${Y.border};
   }
   #nexa-dev-overlay .nexa-metric {
     flex: 1;
@@ -1624,30 +1660,30 @@ var J = class {
     align-items: center;
     gap: 2px;
     padding: 8px 12px;
-    background: ${X.bgElevated};
+    background: ${Y.bgSurface};
     border-radius: 10px;
     transition: all 0.2s;
   }
   #nexa-dev-overlay .nexa-metric:hover {
-    background: ${X.border};
+    background: rgba(53, 80, 122, 0.3);
   }
   #nexa-dev-overlay .nexa-metric-value {
     font-size: 18px;
     font-weight: 700;
     letter-spacing: -0.03em;
-    color: ${X.text};
+    color: ${Y.text};
   }
-  #nexa-dev-overlay .nexa-metric-ok .nexa-metric-value { color: ${X.success}; }
-  #nexa-dev-overlay .nexa-metric-err .nexa-metric-value { color: ${X.error}; }
+  #nexa-dev-overlay .nexa-metric-ok .nexa-metric-value { color: ${Y.success}; }
+  #nexa-dev-overlay .nexa-metric-err .nexa-metric-value { color: ${Y.error}; }
   #nexa-dev-overlay .nexa-metric-label {
     font-size: 11px;
-    color: ${X.textDim};
+    color: ${Y.textDim};
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
   #nexa-dev-overlay .nexa-search {
     padding: 12px 16px;
-    border-bottom: 1px solid ${X.border};
+    border-bottom: 1px solid ${Y.border};
     position: relative;
   }
   #nexa-dev-overlay .nexa-search-icon {
@@ -1655,29 +1691,29 @@ var J = class {
     left: 28px;
     top: 50%;
     transform: translateY(-50%);
-    color: ${X.textDim};
+    color: ${Y.textDim};
   }
   #nexa-dev-overlay .nexa-search-input {
     width: 100%;
     padding: 10px 12px 10px 38px;
-    background: ${X.bg};
-    border: 1px solid ${X.border};
+    background: ${Y.bg};
+    border: 1px solid ${Y.border};
     border-radius: 10px;
-    color: ${X.text};
+    color: ${Y.text};
     font-size: 13px;
     outline: none;
     transition: all 0.15s;
   }
   #nexa-dev-overlay .nexa-search-input:focus {
-    border-color: ${X.accent};
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    border-color: ${Y.accent};
+    box-shadow: 0 0 0 3px ${Y.accentSoft};
   }
-  #nexa-dev-overlay .nexa-search-input::placeholder { color: ${X.textDim}; }
+  #nexa-dev-overlay .nexa-search-input::placeholder { color: ${Y.textDim}; }
   #nexa-dev-overlay .nexa-tabs {
     display: flex;
     gap: 4px;
     padding: 8px 16px;
-    border-bottom: 1px solid ${X.border};
+    border-bottom: 1px solid ${Y.border};
   }
   #nexa-dev-overlay .nexa-tab {
     display: flex;
@@ -1687,18 +1723,18 @@ var J = class {
     background: transparent;
     border: none;
     border-radius: 8px;
-    color: ${X.textMuted};
+    color: ${Y.textMuted};
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.15s;
   }
-  #nexa-dev-overlay .nexa-tab:hover { color: ${X.text}; background: ${X.bgElevated}; }
-  #nexa-dev-overlay .nexa-tab-active { color: ${X.text}; background: ${X.accent} !important; }
+  #nexa-dev-overlay .nexa-tab:hover { color: ${Y.text}; background: ${Y.bgElevated}; }
+  #nexa-dev-overlay .nexa-tab-active { color: ${Y.text}; background: ${Y.accent} !important; }
   #nexa-dev-overlay .nexa-tab-count {
     font-size: 11px;
     padding: 2px 6px;
-    background: rgba(255,255,255,0.1);
+    background: rgba(148, 163, 184, 0.14);
     border-radius: 10px;
   }
   #nexa-dev-overlay .nexa-body { flex: 1; overflow: hidden; display: flex; }
@@ -1715,7 +1751,7 @@ var J = class {
     align-items: center;
     justify-content: space-between;
     padding: 12px 14px;
-    background: ${X.bgElevated};
+    background: ${Y.bgSurface};
     border: 1px solid transparent;
     border-radius: 12px;
     cursor: pointer;
@@ -1725,8 +1761,8 @@ var J = class {
   }
   @keyframes nexaFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
   #nexa-dev-overlay .nexa-request-item:hover {
-    background: ${X.border};
-    border-color: ${X.borderFocus};
+    background: rgba(23, 32, 51, 0.92);
+    border-color: ${Y.borderFocus};
     transform: translateX(2px);
   }
   #nexa-dev-overlay .nexa-req-left {
@@ -1742,11 +1778,11 @@ var J = class {
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }
-  #nexa-dev-overlay .nexa-method-get { background: ${X.successBg}; color: ${X.get}; }
-  #nexa-dev-overlay .nexa-method-post { background: rgba(59, 130, 246, 0.15); color: ${X.post}; }
-  #nexa-dev-overlay .nexa-method-put { background: rgba(245, 158, 11, 0.15); color: ${X.put}; }
-  #nexa-dev-overlay .nexa-method-patch { background: rgba(168, 85, 247, 0.15); color: ${X.patch}; }
-  #nexa-dev-overlay .nexa-method-delete { background: ${X.errorBg}; color: ${X.delete}; }
+  #nexa-dev-overlay .nexa-method-get { background: ${Y.successBg}; color: ${Y.get}; }
+  #nexa-dev-overlay .nexa-method-post { background: ${Y.accentSoft}; color: ${Y.post}; }
+  #nexa-dev-overlay .nexa-method-put { background: ${Y.warningBg}; color: ${Y.put}; }
+  #nexa-dev-overlay .nexa-method-patch { background: ${Y.infoBg}; color: ${Y.patch}; }
+  #nexa-dev-overlay .nexa-method-delete { background: ${Y.errorBg}; color: ${Y.delete}; }
   #nexa-dev-overlay .nexa-status {
     font-size: 12px;
     font-weight: 600;
@@ -1755,11 +1791,11 @@ var J = class {
     min-width: 36px;
     text-align: center;
   }
-  #nexa-dev-overlay .nexa-ok { background: ${X.successBg}; color: ${X.success}; }
-  #nexa-dev-overlay .nexa-err { background: ${X.errorBg}; color: ${X.error}; }
+  #nexa-dev-overlay .nexa-ok { background: ${Y.successBg}; color: ${Y.success}; }
+  #nexa-dev-overlay .nexa-err { background: ${Y.errorBg}; color: ${Y.error}; }
   #nexa-dev-overlay .nexa-url {
     font-size: 13px;
-    color: ${X.textMuted};
+    color: ${Y.textMuted};
     max-width: 180px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1778,15 +1814,15 @@ var J = class {
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }
-  #nexa-dev-overlay .nexa-badge-cache { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
-  #nexa-dev-overlay .nexa-badge-retry { background: rgba(245, 158, 11, 0.15); color: ${X.warning}; }
+  #nexa-dev-overlay .nexa-badge-cache { background: ${Y.infoBg}; color: ${Y.info}; }
+  #nexa-dev-overlay .nexa-badge-retry { background: ${Y.warningBg}; color: ${Y.warning}; }
   #nexa-dev-overlay .nexa-duration {
     font-size: 12px;
     font-weight: 600;
-    color: ${X.textDim};
+    color: ${Y.textDim};
     font-variant-numeric: tabular-nums;
   }
-  #nexa-dev-overlay .nexa-slow { color: ${X.warning}; }
+  #nexa-dev-overlay .nexa-slow { color: ${Y.warning}; }
   #nexa-dev-overlay .nexa-empty {
     display: flex;
     flex-direction: column;
@@ -1794,11 +1830,11 @@ var J = class {
     justify-content: center;
     padding: 48px 24px;
     text-align: center;
-    color: ${X.textDim};
+    color: ${Y.textDim};
   }
   #nexa-dev-overlay .nexa-empty svg { margin-bottom: 16px; opacity: 0.4; }
-  #nexa-dev-overlay .nexa-empty p { font-size: 14px; color: ${X.textMuted}; margin-bottom: 4px; }
-  #nexa-dev-overlay .nexa-empty span { font-size: 12px; color: ${X.textDim}; }
+  #nexa-dev-overlay .nexa-empty p { font-size: 14px; color: ${Y.textMuted}; margin-bottom: 4px; }
+  #nexa-dev-overlay .nexa-empty span { font-size: 12px; color: ${Y.textDim}; }
   #nexa-dev-overlay .nexa-detail {
     flex-direction: column;
     padding: 16px;
@@ -1818,21 +1854,21 @@ var J = class {
     align-items: center;
     gap: 6px;
     padding: 8px 14px;
-    background: ${X.bgElevated};
-    border: 1px solid ${X.border};
+    background: ${Y.bgSurface};
+    border: 1px solid ${Y.border};
     border-radius: 8px;
-    color: ${X.textMuted};
+    color: ${Y.textMuted};
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.15s;
   }
-  #nexa-dev-overlay .nexa-btn:hover { background: ${X.border}; color: ${X.text}; }
-  #nexa-dev-overlay .nexa-btn-retry { background: ${X.successBg}; border-color: transparent; color: ${X.success}; }
-  #nexa-dev-overlay .nexa-btn-retry:hover { background: ${X.success}; color: white; }
+  #nexa-dev-overlay .nexa-btn:hover { background: rgba(53, 80, 122, 0.24); color: ${Y.text}; }
+  #nexa-dev-overlay .nexa-btn-retry { background: ${Y.successBg}; border-color: transparent; color: ${Y.success}; }
+  #nexa-dev-overlay .nexa-btn-retry:hover { background: ${Y.success}; color: #052e26; }
   #nexa-dev-overlay .nexa-card {
-    background: ${X.bgElevated};
-    border: 1px solid ${X.border};
+    background: ${Y.bgSurface};
+    border: 1px solid ${Y.border};
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 12px;
@@ -1840,7 +1876,7 @@ var J = class {
   #nexa-dev-overlay .nexa-card h3 {
     font-size: 12px;
     font-weight: 600;
-    color: ${X.textDim};
+    color: ${Y.textDim};
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 12px;
@@ -1851,20 +1887,20 @@ var J = class {
     align-items: center;
     padding: 6px 0;
     font-size: 13px;
-    border-bottom: 1px solid ${X.border};
+    border-bottom: 1px solid ${Y.border};
   }
   #nexa-dev-overlay .nexa-row:last-child { border-bottom: none; }
-  #nexa-dev-overlay .nexa-row span { color: ${X.textMuted}; }
-  #nexa-dev-overlay .nexa-row strong { color: ${X.text}; font-weight: 500; font-variant-numeric: tabular-nums; }
-  #nexa-dev-overlay .nexa-row .nexa-ok { color: ${X.success}; }
-  #nexa-dev-overlay .nexa-row .nexa-err { color: ${X.error}; }
+  #nexa-dev-overlay .nexa-row span { color: ${Y.textMuted}; }
+  #nexa-dev-overlay .nexa-row strong { color: ${Y.text}; font-weight: 500; font-variant-numeric: tabular-nums; }
+  #nexa-dev-overlay .nexa-row .nexa-ok { color: ${Y.success}; }
+  #nexa-dev-overlay .nexa-row .nexa-err { color: ${Y.error}; }
   #nexa-dev-overlay .nexa-code {
-    background: ${X.bg};
+    background: ${Y.bg};
     border-radius: 8px;
     padding: 12px;
     font-size: 11px;
     font-family: 'JetBrains Mono', 'Fira Code', monospace;
-    color: ${X.textMuted};
+    color: ${Y.textMuted};
     overflow-x: auto;
     white-space: pre;
     max-height: 200px;
@@ -1873,7 +1909,7 @@ var J = class {
   #nexa-dev-overlay .nexa-url-full {
     font-size: 12px;
     word-break: break-all;
-    color: ${X.accent};
+    color: ${Y.accent};
   }
   #nexa-dev-overlay .nexa-metrics-content {
     padding: 16px;
@@ -1881,13 +1917,130 @@ var J = class {
     flex-direction: column;
     gap: 12px;
   }
+  /* Settings modal (overlays the content area without shifting layout) */
+  #nexa-dev-overlay .nexa-settings-panel {
+    position: absolute;
+    top: 72px;
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+    z-index: 2147483650;
+    display: none;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border-radius: 12px;
+    background: ${Y.bgElevated};
+    border: 1px solid ${Y.border};
+    box-shadow: 0 28px 60px -24px rgba(2, 6, 23, 0.76);
+    overflow: auto;
+  }
+  #nexa-dev-overlay .nexa-settings-row { display:flex;align-items:center;gap:8px;margin-bottom:8px }
+  #nexa-dev-overlay .nexa-settings-row label{font-size:13px;color:${Y.textDim};min-width:70px}
+  #nexa-dev-overlay .nexa-settings-row select{padding:6px 8px;border-radius:8px;border:1px solid ${Y.border};background:${Y.bg};color:${Y.text}}
+
+  #nexa-dev-overlay.nexa-theme-light {
+    background: #f8fbff;
+    color: #0f172a;
+    border-color: #d8e4f2;
+    box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(148, 163, 184, 0.16);
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-header,
+  #nexa-dev-overlay.nexa-theme-light .nexa-metrics-bar,
+  #nexa-dev-overlay.nexa-theme-light .nexa-search,
+  #nexa-dev-overlay.nexa-theme-light .nexa-tabs {
+    background: #f8fbff;
+    border-color: #d8e4f2;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-logo,
+  #nexa-dev-overlay.nexa-theme-light .nexa-metric,
+  #nexa-dev-overlay.nexa-theme-light .nexa-request-item,
+  #nexa-dev-overlay.nexa-theme-light .nexa-btn,
+  #nexa-dev-overlay.nexa-theme-light .nexa-card,
+  #nexa-dev-overlay.nexa-theme-light .nexa-settings-panel {
+    background: #ffffff;
+    border-color: #d8e4f2;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-metric:hover,
+  #nexa-dev-overlay.nexa-theme-light .nexa-icon-btn:hover,
+  #nexa-dev-overlay.nexa-theme-light .nexa-btn:hover,
+  #nexa-dev-overlay.nexa-theme-light .nexa-tab:hover,
+  #nexa-dev-overlay.nexa-theme-light .nexa-request-item:hover {
+    background: #eef6ff;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-request-item:hover {
+    border-color: #93c5fd;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-search-icon,
+  #nexa-dev-overlay.nexa-theme-light .nexa-metric-label,
+  #nexa-dev-overlay.nexa-theme-light .nexa-duration,
+  #nexa-dev-overlay.nexa-theme-light .nexa-empty,
+  #nexa-dev-overlay.nexa-theme-light .nexa-empty span,
+  #nexa-dev-overlay.nexa-theme-light .nexa-row span,
+  #nexa-dev-overlay.nexa-theme-light .nexa-settings-row label {
+    color: #64748b;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-url,
+  #nexa-dev-overlay.nexa-theme-light .nexa-empty p,
+  #nexa-dev-overlay.nexa-theme-light .nexa-icon-btn,
+  #nexa-dev-overlay.nexa-theme-light .nexa-tab,
+  #nexa-dev-overlay.nexa-theme-light .nexa-btn,
+  #nexa-dev-overlay.nexa-theme-light .nexa-code {
+    color: #334155;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-metric-value,
+  #nexa-dev-overlay.nexa-theme-light .nexa-title,
+  #nexa-dev-overlay.nexa-theme-light .nexa-row strong {
+    color: #0f172a;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-search-input,
+  #nexa-dev-overlay.nexa-theme-light .nexa-settings-row select,
+  #nexa-dev-overlay.nexa-theme-light .nexa-code {
+    background: #ffffff;
+    color: #0f172a;
+    border-color: #d8e4f2;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-search-input:focus {
+    border-color: #38bdf8;
+    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-tab-active {
+    color: #ffffff;
+    background: #0ea5e9 !important;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-tab-count {
+    background: rgba(14, 165, 233, 0.12);
+    color: #075985;
+  }
+  #nexa-dev-overlay.nexa-theme-light .nexa-code,
+  #nexa-dev-overlay.nexa-theme-light .nexa-detail,
+  #nexa-dev-overlay.nexa-theme-light .nexa-row {
+    border-color: #d8e4f2;
+  }
   #nexa-dev-overlay .nexa-slow-req {
     display: flex;
     align-items: center;
     gap: 8px;
   }
-`, ye = class {
+`;
+function X() {
+	try {
+		if (typeof process < "u") {
+			let e = process;
+			if (e.env && typeof e.env.NODE_ENV == "string") return e.env.NODE_ENV === "development";
+		}
+	} catch {}
+	try {
+		if (typeof location < "u" && location.hostname) {
+			let e = location.hostname;
+			if (e === "localhost" || e === "127.0.0.1" || e === "0.0.0.0") return !0;
+		}
+	} catch {}
+	return !1;
+}
+var we = class {
 	panel = null;
+	floatingIcon = null;
 	tracker;
 	visible = !1;
 	selectedRequest = null;
@@ -1902,18 +2055,18 @@ var J = class {
 	show() {
 		this.panel && (this.panel.style.display = "flex", this.panel.style.opacity = "0", this.panel.style.transform = "scale(0.96) translateY(8px)", (typeof requestAnimationFrame == "function" ? requestAnimationFrame : (e) => setTimeout(e, 0))(() => {
 			this.panel.style.transition = "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", this.panel.style.opacity = "1", this.panel.style.transform = "scale(1) translateY(0)";
-		}), this.visible = !0);
+		}), this.visible = !0, this.hideFloatingIcon());
 	}
 	hide() {
 		this.panel && (this.panel.style.transition = "all 0.15s ease-out", this.panel.style.opacity = "0", this.panel.style.transform = "scale(0.96) translateY(8px)", setTimeout(() => {
 			this.panel && (this.panel.style.display = "none");
-		}, 150), this.visible = !1);
+		}, 150), this.visible = !1, this.config.enabled && (!this.config.devOnly || X()) && this.showFloatingIcon());
 	}
 	toggle() {
 		this.visible ? this.hide() : this.show();
 	}
 	destroy() {
-		this.keyboardShortcutHandler &&= (document.removeEventListener("keydown", this.keyboardShortcutHandler), null), this.globalKeyboardHandler &&= (document.removeEventListener("keydown", this.globalKeyboardHandler), null), this.removeTrackerListener?.(), this.removeTrackerListener = null, this.panel?.remove(), this.panel = null, this.visible = !1, this.selectedRequest = null;
+		this.keyboardShortcutHandler &&= (document.removeEventListener("keydown", this.keyboardShortcutHandler), null), this.globalKeyboardHandler &&= (document.removeEventListener("keydown", this.globalKeyboardHandler), null), this.removeTrackerListener?.(), this.removeTrackerListener = null, this.panel?.remove(), this.panel = null, this.visible = !1, this.selectedRequest = null, this.floatingIcon &&= (this.floatingIcon.remove(), null);
 	}
 	setupKeyboardShortcut() {
 		let e = this.config.keyboardShortcut.split("+"), t = new Set(e.map((e) => e.toLowerCase()));
@@ -1930,30 +2083,58 @@ var J = class {
 	}
 	createPanel() {
 		if (!this.canUseDOM()) return;
+		try {
+			let e = document.getElementById("nexa-dev-overlay");
+			e && e.remove();
+		} catch {}
 		this.panel = document.createElement("div"), this.panel.id = "nexa-dev-overlay";
-		let e = this.config.position, t = e.includes("bottom"), n = e.includes("right");
+		let e = this.config.position, t = e.includes("bottom"), n = e.includes("right"), r = `${this.config.floatingButtonOffset ?? 24}px`;
 		this.panel.style.cssText = `
       position: fixed;
-      ${t ? "bottom: 24px;" : "top: 24px;"}
-      ${n ? "right: 24px;" : "left: 24px;"}
+      ${t ? `bottom: ${r};` : `top: ${r};`}
+      ${n ? `right: ${r};` : `left: ${r};`}
       width: 420px;
       max-height: 70vh;
-      z-index: 2147483647;
+      z-index: 2147483649;
       display: flex;
       flex-direction: column;
       overflow: hidden;
-    `, this.panel.innerHTML = `<style>${Z}</style>
+    `, this.panel.innerHTML = `<style>${Ce}</style>
 
       <div class="nexa-header">
-<div class="nexa-header-left">
+        <div class="nexa-header-left">
           <div class="nexa-logo">
-            <span style="display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b82f6,#238636);width:18px;height:18px;border-radius:4px;">N</span>
+            <img src="https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png" alt="Nexa" style="width:100%;height:auto;object-fit:cover;border-radius:8px;display:block;" />
           </div>
           <span class="nexa-title">Nexa DevTools</span>
         </div>
         <div class="nexa-header-actions">
-          <button class="nexa-icon-btn nexa-btn-clear" title="Clear history">${Y.clear}</button>
-          <button class="nexa-icon-btn nexa-btn-close" title="Close (Esc)">${Y.close}</button>
+                  <button class="nexa-icon-btn nexa-btn-settings" title="Settings">${J.gear}</button>
+          <button class="nexa-icon-btn nexa-btn-clear" title="Clear history">${J.clear}</button>
+          <button class="nexa-icon-btn nexa-btn-close" title="Close (Esc)">${J.close}</button>
+        </div>
+      </div>
+
+      <div class="nexa-settings-panel" style="display:none">
+        <div class="nexa-settings-row">
+          <label for="nexa-pos">Position</label>
+          <select id="nexa-pos" data-setting="position">
+            <option value="top-right">Top Right</option>
+            <option value="top-left">Top Left</option>
+            <option value="bottom-right">Bottom Right</option>
+            <option value="bottom-left">Bottom Left</option>
+          </select>
+        </div>
+        <div class="nexa-settings-row">
+          <label for="nexa-theme">Theme</label>
+          <select id="nexa-theme" data-setting="theme">
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+          </select>
+        </div>
+        <div style="display:flex;gap:8px;margin-top:8px">
+          <button class="nexa-btn nexa-btn-save">Save</button>
+          <button class="nexa-btn nexa-btn-cancel">Cancel</button>
         </div>
       </div>
 
@@ -1966,7 +2147,7 @@ var J = class {
       </div>
 
       <div class="nexa-search">
-        <span class="nexa-search-icon">${Y.search}</span>
+        <span class="nexa-search-icon">${J.search}</span>
         <input type="text" class="nexa-search-input" placeholder="Filter by URL, method, or status..." />
       </div>
 
@@ -1982,12 +2163,14 @@ var J = class {
 
       <div class="nexa-detail" style="display:none">
         <div class="nexa-detail-header">
-          <button class="nexa-btn nexa-btn-back">${Y.back} Back</button>
-          <button class="nexa-btn nexa-btn-retry">${Y.retry} Retry</button>
+          <button class="nexa-btn nexa-btn-back">${J.back} Back</button>
+          <button class="nexa-btn nexa-btn-retry">${J.retry} Retry</button>
         </div>
         <div class="nexa-detail-body"></div>
       </div>
-    `, document.body.appendChild(this.panel), this.bindEvents(), this.removeTrackerListener = this.tracker.onChange(() => this.render()), this.hide(), this.globalKeyboardHandler = (e) => {
+    `, document.body.appendChild(this.panel), this.config.theme === "light" ? this.panel.classList.add("nexa-theme-light") : this.panel.classList.remove("nexa-theme-light"), this.bindEvents(), this.removeTrackerListener = this.tracker.onChange(() => this.render());
+		let i = !this.config.devOnly || X();
+		this.config.enabled && i && this.createFloatingIcon(), this.hide(), this.globalKeyboardHandler = (e) => {
 			if (e.key === "Escape" && this.visible) {
 				this.hide();
 				return;
@@ -2008,6 +2191,21 @@ var J = class {
 			e.addEventListener("click", () => {
 				this.panel.querySelectorAll(".nexa-tab").forEach((e) => e.classList.remove("nexa-tab-active")), this.panel.querySelectorAll(".nexa-panel").forEach((e) => e.classList.remove("nexa-panel-active")), e.classList.add("nexa-tab-active"), this.panel.querySelector(`[data-panel="${e.dataset.tab}"]`)?.classList.add("nexa-panel-active"), e.dataset.tab === "metrics" && this.renderMetrics();
 			});
+		}), this.panel.querySelector(".nexa-btn-settings")?.addEventListener("click", () => {
+			let e = this.panel.querySelector(".nexa-settings-panel");
+			if (!e) return;
+			let t = this.panel.querySelector("[data-setting=\"position\"]"), n = this.panel.querySelector("[data-setting=\"theme\"]"), r = e.style.display === "flex";
+			e.style.display = r ? "none" : "flex", r || (this.hideFloatingIcon(), t && (t.value = this.config.position), n && (n.value = this.config.theme), t?.focus());
+		}), this.panel.querySelector(".nexa-btn-save")?.addEventListener("click", () => {
+			let e = this.panel.querySelector("[data-setting=\"position\"]"), t = this.panel.querySelector("[data-setting=\"theme\"]"), n = e?.value, r = t?.value, i = {};
+			n !== void 0 && (i.position = n), r !== void 0 && (i.theme = r);
+			let a = this.tracker.updateConfig(i);
+			this.applyConfigToUI(a);
+			let o = this.panel.querySelector(".nexa-settings-panel");
+			o && (o.style.display = "none");
+		}), this.panel.querySelector(".nexa-btn-cancel")?.addEventListener("click", () => {
+			let e = this.panel.querySelector(".nexa-settings-panel");
+			e && (e.style.display = "none");
 		}));
 	}
 	render() {
@@ -2043,7 +2241,7 @@ var J = class {
           ${e.cached ? "<span class=\"nexa-badge nexa-badge-cache\">Cache</span>" : ""}
           ${e.retryCount > 0 ? `<span class="nexa-badge nexa-badge-retry">${e.retryCount}R</span>` : ""}
           <span class="nexa-duration ${e.duration > 500 ? "nexa-slow" : ""}">${e.duration.toFixed(0)}ms</span>
-          ${Y.chevron}
+          ${J.chevron}
         </div>
       </div>
     `).join(""), e.querySelectorAll(".nexa-request-item").forEach((e) => {
@@ -2091,7 +2289,7 @@ var J = class {
 		!t || !n || !r || (t.style.display = "none", n.style.display = "flex", r.innerHTML = `
       <div class="nexa-card">
         <h3>Request</h3>
-        <div class="nexa-row"><span>Method</span><strong style="color:${e.method === "GET" ? X.get : e.method === "POST" ? X.post : e.method === "DELETE" ? X.delete : X.warning}">${e.method}</strong></div>
+        <div class="nexa-row"><span>Method</span><strong style="color:${e.method === "GET" ? Y.get : e.method === "POST" ? Y.post : e.method === "DELETE" ? Y.delete : Y.warning}">${e.method}</strong></div>
         <div class="nexa-row"><span>URL</span><span class="nexa-url-full">${e.url}</span></div>
         <div class="nexa-row"><span>Status</span><strong class="${e.ok ? "nexa-ok" : "nexa-err"}">${e.status || "N/A"}</strong></div>
         <div class="nexa-row"><span>Duration</span><strong>${e.duration.toFixed(1)}ms</strong></div>
@@ -2151,26 +2349,103 @@ var J = class {
 	canUseDOM() {
 		return typeof document < "u" && typeof document.createElement == "function" && !!document.body;
 	}
-}, Q = null, $ = null;
-function be(e = {}) {
-	return Q ? {
-		tracker: $,
-		ui: Q
-	} : ($ = new J(e), Q = new ye($), Q.show(), {
-		tracker: $,
-		ui: Q
-	});
+	createFloatingIcon() {
+		if (!this.canUseDOM()) return;
+		try {
+			let e = document.getElementById("nexa-dev-overlay-floating");
+			e && e.remove();
+		} catch {}
+		this.floatingIcon &&= (this.floatingIcon.remove(), null);
+		let e = document.createElement("button");
+		e.id = "nexa-dev-overlay-floating", e.title = "Toggle Nexa DevTools";
+		let t = this.config.floatingButtonSize ?? 48, n = this.config.floatingButtonOffset ?? 24, r = this.config.position || "bottom-right", i = r.includes("bottom"), a = r.includes("right"), o = `${i ? `bottom: ${n}px;` : `top: ${n}px;`} ${a ? `right: ${n}px;` : `left: ${n}px;`}`, s = this.config.floatingButtonTheme === "inherit" ? this.config.theme : this.config.floatingButtonTheme, c = "linear-gradient(135deg,#0ea5e9,#8b5cf6)", l = "#ffffff", u = "0 16px 36px rgba(2,6,23,0.34)", d = "none";
+		s === "light" && (c = "linear-gradient(135deg,#f8fbff,#e0f2fe)", l = "#0f172a", u = "0 14px 30px rgba(15,23,42,0.16)", d = "1px solid #d8e4f2"), e.style.cssText = `
+      position: fixed;
+      ${o}
+      width: ${t}px;
+      height: ${t}px;
+      border-radius: 50%;
+      border: ${d};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483648;
+      cursor: pointer;
+      box-shadow: ${u};
+      background: ${c};
+      color: ${l};
+      font-weight: 700;
+      font-size: ${Math.max(12, Math.floor(t / 3))}px;
+    `, e.innerHTML = `<img src="https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png" alt="Nexa" style="width:${t - 10}px;height:auto;object-fit:cover;border-radius:999px;display:block;" />`, e.addEventListener("click", (e) => {
+			e.stopPropagation(), this.toggle();
+		}), e.addEventListener("mousedown", (e) => e.preventDefault()), document.body.appendChild(e), e.style.display = this.visible ? "none" : "flex", this.floatingIcon = e;
+	}
+	showFloatingIcon() {
+		if (!this.floatingIcon) {
+			this.config.enabled && this.createFloatingIcon();
+			return;
+		}
+		this.floatingIcon.style.display = "flex";
+	}
+	hideFloatingIcon() {
+		this.floatingIcon && (this.floatingIcon.style.display = "none");
+	}
+	applyConfigToUI(e) {
+		this.config = e ?? this.tracker.getConfig();
+		let t = this.config.position, n = t.includes("bottom"), r = t.includes("right"), i = `${this.config.floatingButtonOffset ?? 24}px`;
+		this.panel && (this.panel.style.bottom = n ? i : "", this.panel.style.top = n ? "" : i, this.panel.style.right = r ? i : "", this.panel.style.left = r ? "" : i, this.config.theme === "light" ? this.panel.classList.add("nexa-theme-light") : this.panel.classList.remove("nexa-theme-light")), this.floatingIcon &&= (this.floatingIcon.remove(), null), this.config.enabled && (!this.config.devOnly || X()) && this.createFloatingIcon();
+	}
+	refreshConfig(e) {
+		this.applyConfigToUI(e);
+	}
+}, Z = null, Q = null, $ = {
+	enabled: !0,
+	maxHistory: 500,
+	keyboardShortcut: "ctrl+shift+n",
+	position: "bottom-right",
+	theme: "dark",
+	devOnly: !0,
+	floatingButtonSize: 48,
+	floatingButtonOffset: 24,
+	floatingButtonTheme: "inherit"
+};
+function Te(e = {}) {
+	if (Z && Q) {
+		let t = K(), n = {
+			...$,
+			...e,
+			...t
+		}, r = Q.updateConfig(n);
+		try {
+			Z.refreshConfig(r);
+		} catch {}
+		return {
+			tracker: Q,
+			ui: Z,
+			config: r
+		};
+	}
+	let t = K();
+	return Q = new q({
+		...$,
+		...e,
+		...t
+	}), Z = new we(Q), {
+		tracker: Q,
+		ui: Z,
+		config: Q.getConfig()
+	};
 }
-function xe() {
+function Ee() {
 	return {
-		tracker: $,
-		ui: Q
+		tracker: Q,
+		ui: Z
 	};
 }
-function Se() {
-	Q?.destroy(), Q = null, $ = null;
+function De() {
+	Z?.destroy(), Z = null, Q = null;
 }
 //#endregion
-export { d as AggressiveRetry, P as CachePlugin, v as CacheStore, p as CircuitBreakerRetry, f as ConservativeRetry, F as DedupePlugin, se as Defer, t as Err, V as HttpClient, H as HttpError, ue as LoggerPlugin, N as MetricsPlugin, ie as MiddlewarePipeline, e as Ok, M as PluginManager, x as RequestDeduplicator, J as RequestTracker, D as TypedObservable, b as cacheMiddleware, oe as createApiUrl, y as createCacheMiddleware, S as createDedupeMiddleware, be as createDevOverlay, de as createHttpClient, C as createPipeline, l as createProjectionTransformer, ve as createRealtimePlugin, r as createRequiredFieldsValidator, ge as createSSEClient, n as createSchemaValidator, j as createStreamingMiddleware, ae as createTypeGuard, E as createTypedApiClient, T as createTypedRequest, w as createTypedResponse, O as createUrl, me as createWebSocketClient, u as createWrapperTransformer, re as dedupeMiddleware, Se as destroyDevOverlay, xe as getDevOverlay, k as handleStream, U as isHttpError, _ as retry, ce as streamToFile, le as streamingMiddleware, s as transformCamelToSnake, c as transformFlatten, o as transformSnakeToCamel, i as validatorIsArray, a as validatorIsObject, ne as withTimeout };
+export { d as AggressiveRetry, de as CachePlugin, y as CacheStore, p as CircuitBreakerRetry, f as ConservativeRetry, fe as DedupePlugin, oe as Defer, t as Err, R as HttpClient, z as HttpError, le as LoggerPlugin, ue as MetricsPlugin, re as MiddlewarePipeline, e as Ok, N as PluginManager, S as RequestDeduplicator, q as RequestTracker, E as TypedObservable, x as cacheMiddleware, k as createApiUrl, b as createCacheMiddleware, C as createDedupeMiddleware, Te as createDevOverlay, me as createHttpClient, w as createPipeline, l as createProjectionTransformer, xe as createRealtimePlugin, r as createRequiredFieldsValidator, ye as createSSEClient, n as createSchemaValidator, M as createStreamingMiddleware, D as createTypeGuard, ae as createTypedApiClient, T as createTypedRequest, ie as createTypedResponse, O as createUrl, _e as createWebSocketClient, u as createWrapperTransformer, ne as dedupeMiddleware, De as destroyDevOverlay, Ee as getDevOverlay, A as handleStream, B as isHttpError, v as retry, se as streamToFile, ce as streamingMiddleware, s as transformCamelToSnake, c as transformFlatten, o as transformSnakeToCamel, i as validatorIsArray, a as validatorIsObject, te as withTimeout };
 
 //# sourceMappingURL=nexa.es.js.map