@bereasoftware/nexa 1.5.0 → 1.7.0

package/dist/nexa.es.js

@@ -1,4 +1,4 @@
-/*! Nexa v1.5.0 | (c) 2026 Berea-Soft | MIT License | https://github.com/Berea-Soft/Nexa */
+/*! Nexa v1.7.0 | (c) 2026 Berea-Soft | MIT License | https://github.com/Berea-Soft/Nexa */
 //#region src/types/index.ts
 var e = (e) => ({
 	ok: !0,
@@ -1499,7 +1499,9 @@ var q = class {
 			devOnly: e.devOnly ?? !0,
 			floatingButtonSize: e.floatingButtonSize ?? 48,
 			floatingButtonOffset: e.floatingButtonOffset ?? 24,
-			floatingButtonTheme: e.floatingButtonTheme ?? "inherit"
+			floatingButtonTheme: e.floatingButtonTheme ?? "inherit",
+			branding: e.branding ?? "Nexa DevTools",
+			icon: e.icon ?? "https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png"
 		};
 	}
 	track(e) {
@@ -1560,7 +1562,9 @@ var q = class {
 	clear: "<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=\"M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2\"/></svg>",
 	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>"
+	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>",
+	download: "<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=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>",
+	copy: "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"/></svg>"
 }, Y = {
 	bg: "#0b1120",
 	bgElevated: "#111827",
@@ -1709,6 +1713,34 @@ var q = class {
     box-shadow: 0 0 0 3px ${Y.accentSoft};
   }
   #nexa-dev-overlay .nexa-search-input::placeholder { color: ${Y.textDim}; }
+  #nexa-dev-overlay .nexa-filters {
+    display: flex;
+    gap: 6px;
+    padding: 12px 16px 12px 16px;
+    border-bottom: 1px solid ${Y.border};
+    overflow-x: auto;
+    scrollbar-width: none;
+    min-height: 50px;
+  }
+  #nexa-dev-overlay .nexa-filters::-webkit-scrollbar { display: none; }
+  #nexa-dev-overlay .nexa-filter-chip {
+    padding: 4px 10px;
+    background: ${Y.bgSurface};
+    border: 1px solid ${Y.border};
+    border-radius: 20px;
+    color: ${Y.textDim};
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  #nexa-dev-overlay .nexa-filter-chip:hover { border-color: ${Y.borderFocus}; color: ${Y.textMuted}; }
+  #nexa-dev-overlay .nexa-filter-chip-active {
+    background: ${Y.accentSoft};
+    border-color: ${Y.accent};
+    color: ${Y.accent};
+  }
   #nexa-dev-overlay .nexa-tabs {
     display: flex;
     gap: 4px;
@@ -1849,6 +1881,10 @@ var q = class {
     justify-content: space-between;
     margin-bottom: 16px;
   }
+  #nexa-dev-overlay .nexa-btn-group {
+    display: flex;
+    gap: 8px;
+  }
   #nexa-dev-overlay .nexa-btn {
     display: flex;
     align-items: center;
@@ -1866,6 +1902,8 @@ var q = class {
   #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-btn-copy { background: ${Y.accentSoft}; border-color: transparent; color: ${Y.accent}; }
+  #nexa-dev-overlay .nexa-btn-copy:hover { background: ${Y.accent}; color: #ffffff; }
   #nexa-dev-overlay .nexa-card {
     background: ${Y.bgSurface};
     border: 1px solid ${Y.border};
@@ -1881,6 +1919,28 @@ var q = class {
     letter-spacing: 0.05em;
     margin-bottom: 12px;
   }
+  #nexa-dev-overlay .nexa-notification {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: ${Y.bgElevated};
+    color: ${Y.text};
+    padding: 10px 18px;
+    border-radius: 12px;
+    border: 1px solid ${Y.borderFocus};
+    font-size: 13px;
+    font-weight: 500;
+    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
+    z-index: 2147483651;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  #nexa-dev-overlay .nexa-notification-show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
   #nexa-dev-overlay .nexa-row {
     display: flex;
     justify-content: space-between;
@@ -1917,7 +1977,6 @@ var q = 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;
@@ -1957,7 +2016,8 @@ var q = class {
   #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 {
+  #nexa-dev-overlay.nexa-theme-light .nexa-settings-panel,
+  #nexa-dev-overlay.nexa-theme-light .nexa-notification {
     background: #ffffff;
     border-color: #d8e4f2;
   }
@@ -1977,9 +2037,14 @@ var q = class {
   #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 {
+  #nexa-dev-overlay.nexa-theme-light .nexa-settings-row label,
+  #nexa-dev-overlay.nexa-theme-light .nexa-notification {
     color: #64748b;
   }
+  #nexa-dev-overlay.nexa-theme-light .nexa-notification {
+    box-shadow: 0 12px 32px rgba(15,23,42,0.12);
+    border-color: #e2e8f0;
+  }
   #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,
@@ -2022,6 +2087,13 @@ var q = class {
     align-items: center;
     gap: 8px;
   }
+  #nexa-dev-overlay.nexa-view-detail .nexa-metrics-bar,
+  #nexa-dev-overlay.nexa-view-detail .nexa-search,
+  #nexa-dev-overlay.nexa-view-detail .nexa-filters,
+  #nexa-dev-overlay.nexa-view-detail .nexa-tabs,
+  #nexa-dev-overlay.nexa-view-detail .nexa-body {
+    display: none !important;
+  }
 `;
 function X() {
 	try {
@@ -2046,6 +2118,7 @@ var we = class {
 	selectedRequest = null;
 	config;
 	searchQuery = "";
+	filterType = "all";
 	removeTrackerListener = null;
 	keyboardShortcutHandler = null;
 	globalKeyboardHandler = null;
@@ -2088,7 +2161,7 @@ var we = class {
 			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"), r = `${this.config.floatingButtonOffset ?? 24}px`;
+		let e = this.config.position, t = e.includes("bottom"), n = e.includes("right"), r = `${this.config.floatingButtonOffset ?? 24}px`, i = this.config.branding || "Nexa DevTools", a = this.config.icon || "https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png";
 		this.panel.style.cssText = `
       position: fixed;
       ${t ? `bottom: ${r};` : `top: ${r};`}
@@ -2104,17 +2177,20 @@ var we = class {
       <div class="nexa-header">
         <div class="nexa-header-left">
           <div class="nexa-logo">
-            <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;" />
+            <img src="${a}" alt="${i}" style="width:100%;height:auto;object-fit:cover;border-radius:8px;display:block;" />
           </div>
-          <span class="nexa-title">Nexa DevTools</span>
+          <span class="nexa-title">${i}</span>
         </div>
         <div class="nexa-header-actions">
-                  <button class="nexa-icon-btn nexa-btn-settings" title="Settings">${J.gear}</button>
+          <button class="nexa-icon-btn nexa-btn-export" title="Export history (JSON)">${J.download}</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-notification"></div>
+
       <div class="nexa-settings-panel" style="display:none">
         <div class="nexa-settings-row">
           <label for="nexa-pos">Position</label>
@@ -2151,6 +2227,13 @@ var we = class {
         <input type="text" class="nexa-search-input" placeholder="Filter by URL, method, or status..." />
       </div>
 
+      <div class="nexa-filters">
+        <div class="nexa-filter-chip nexa-filter-chip-active" data-filter="all">All</div>
+        <div class="nexa-filter-chip" data-filter="err">Errors</div>
+        <div class="nexa-filter-chip" data-filter="xhr">JSON</div>
+        <div class="nexa-filter-chip" data-filter="slow">Slow</div>
+      </div>
+
       <div class="nexa-tabs">
         <button class="nexa-tab nexa-tab-active" data-tab="requests"><span>Requests</span><span class="nexa-tab-count" data-count="requests">0</span></button>
         <button class="nexa-tab" data-tab="metrics"><span>Metrics</span></button>
@@ -2164,13 +2247,16 @@ var we = class {
       <div class="nexa-detail" style="display:none">
         <div class="nexa-detail-header">
           <button class="nexa-btn nexa-btn-back">${J.back} Back</button>
-          <button class="nexa-btn nexa-btn-retry">${J.retry} Retry</button>
+          <div class="nexa-btn-group">
+            <button class="nexa-btn nexa-btn-copy">${J.copy} Copy as fetch</button>
+            <button class="nexa-btn nexa-btn-retry">${J.retry} Retry</button>
+          </div>
         </div>
         <div class="nexa-detail-body"></div>
       </div>
     `, 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) => {
+		let o = !this.config.devOnly || X();
+		this.config.enabled && o && this.createFloatingIcon(), this.updateHeaderActionsVisibility(), this.hide(), this.globalKeyboardHandler = (e) => {
 			if (e.key === "Escape" && this.visible) {
 				this.hide();
 				return;
@@ -2183,10 +2269,14 @@ var we = class {
 		}, document.addEventListener("keydown", this.globalKeyboardHandler);
 	}
 	bindEvents() {
-		this.panel && (this.panel.querySelector(".nexa-btn-close")?.addEventListener("click", () => this.hide()), this.panel.querySelector(".nexa-btn-clear")?.addEventListener("click", () => {
+		this.panel && (this.panel.querySelector(".nexa-btn-close")?.addEventListener("click", () => this.hide()), this.panel.querySelector(".nexa-btn-export")?.addEventListener("click", () => this.exportHistory()), this.panel.querySelector(".nexa-btn-copy")?.addEventListener("click", () => this.copyAsFetch()), this.panel.querySelector(".nexa-btn-clear")?.addEventListener("click", () => {
 			this.tracker.clear(), this.render();
 		}), this.panel.querySelector(".nexa-btn-back")?.addEventListener("click", () => this.showMainView()), this.panel.querySelector(".nexa-btn-retry")?.addEventListener("click", () => this.retrySelected()), this.panel.querySelector(".nexa-search-input")?.addEventListener("input", (e) => {
 			this.searchQuery = e.target.value.toLowerCase(), this.renderRequestList();
+		}), this.panel.querySelectorAll(".nexa-filter-chip").forEach((e) => {
+			e.addEventListener("click", () => {
+				this.panel.querySelectorAll(".nexa-filter-chip").forEach((e) => e.classList.remove("nexa-filter-chip-active")), e.classList.add("nexa-filter-chip-active"), this.filterType = e.dataset.filter, this.renderRequestList();
+			});
 		}), this.panel.querySelectorAll(".nexa-tab").forEach((e) => {
 			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();
@@ -2213,13 +2303,17 @@ var we = class {
 	}
 	renderMetricsBar() {
 		let e = this.tracker.getMetrics(), t = this.panel;
-		t && (t.querySelector("[data-metric=\"total\"]").textContent = String(e.totalRequests), t.querySelector("[data-metric=\"avg\"]").textContent = `${e.avgDuration.toFixed(0)}ms`, t.querySelector("[data-metric=\"rate\"]").textContent = `${e.requestsPerSecond.toFixed(1)}`, t.querySelector("[data-metric=\"success\"]").textContent = String(e.successfulRequests), t.querySelector("[data-metric=\"fail\"]").textContent = String(e.failedRequests), t.querySelector("[data-count=\"requests\"]").textContent = String(e.totalRequests));
+		t && (t.querySelector("[data-metric=\"total\"]").textContent = String(e.totalRequests), t.querySelector("[data-metric=\"avg\"]").textContent = `${e.avgDuration.toFixed(0)}ms`, t.querySelector("[data-metric=\"rate\"]").textContent = `${e.requestsPerSecond.toFixed(1)}`, t.querySelector("[data-metric=\"success\"]").textContent = String(e.successfulRequests), t.querySelector("[data-metric=\"fail\"]").textContent = String(e.failedRequests), t.querySelector("[data-count=\"requests\"]").textContent = String(e.totalRequests), this.updateHeaderActionsVisibility());
+	}
+	updateHeaderActionsVisibility() {
+		let e = this.tracker.getHistory().length > 0, t = this.panel?.querySelector(".nexa-btn-export"), n = this.panel?.querySelector(".nexa-btn-clear");
+		t && (t.style.display = e ? "flex" : "none"), n && (n.style.display = e ? "flex" : "none");
 	}
 	renderRequestList() {
 		let e = this.panel?.querySelector(".nexa-request-list");
 		if (!e) return;
 		let t = this.tracker.getHistory();
-		if (this.searchQuery && (t = t.filter((e) => e.url.toLowerCase().includes(this.searchQuery) || e.method.toLowerCase().includes(this.searchQuery) || String(e.status).includes(this.searchQuery))), t.length === 0) {
+		if (this.filterType === "err" ? t = t.filter((e) => !e.ok) : this.filterType === "xhr" ? t = t.filter((e) => e.headers["content-type"] && e.headers["content-type"].includes("json") || e.responseHeaders && e.responseHeaders["content-type"] && e.responseHeaders["content-type"].includes("json")) : this.filterType === "slow" && (t = t.filter((e) => e.duration > 500)), this.searchQuery && (t = t.filter((e) => e.url.toLowerCase().includes(this.searchQuery) || e.method.toLowerCase().includes(this.searchQuery) || String(e.status).includes(this.searchQuery))), t.length === 0) {
 			e.innerHTML = `
         <div class="nexa-empty">
           <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -2284,9 +2378,9 @@ var we = class {
       ` : ""}`;
 	}
 	showDetail(e) {
-		this.selectedRequest = e;
-		let t = this.panel?.querySelector(".nexa-body"), n = this.panel?.querySelector(".nexa-detail"), r = this.panel?.querySelector(".nexa-detail-body");
-		!t || !n || !r || (t.style.display = "none", n.style.display = "flex", r.innerHTML = `
+		if (this.selectedRequest = e, !this.panel) return;
+		let t = this.panel.querySelector(".nexa-body"), n = this.panel.querySelector(".nexa-detail"), r = this.panel.querySelector(".nexa-detail-body");
+		!t || !n || !r || (this.panel.classList.add("nexa-view-detail"), 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" ? Y.get : e.method === "POST" ? Y.post : e.method === "DELETE" ? Y.delete : Y.warning}">${e.method}</strong></div>
@@ -2311,6 +2405,7 @@ var we = class {
       ` : ""}`);
 	}
 	showMainView() {
+		this.panel && this.panel.classList.remove("nexa-view-detail");
 		let e = this.panel?.querySelector(".nexa-body"), t = this.panel?.querySelector(".nexa-detail");
 		e && (e.style.display = "flex"), t && (t.style.display = "none"), this.selectedRequest = null;
 	}
@@ -2331,6 +2426,27 @@ var we = class {
 			}, this.showDetail(this.selectedRequest));
 		}).catch(() => {});
 	}
+	exportHistory() {
+		let e = this.tracker.getHistory(), t = JSON.stringify(e, null, 2), n = new Blob([t], { type: "application/json" }), r = URL.createObjectURL(n), i = document.createElement("a");
+		i.href = r, i.download = `nexa-history-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[:]/g, "-")}.json`, document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(r), this.showNotification("History exported as JSON");
+	}
+	copyAsFetch() {
+		if (!this.selectedRequest) return;
+		let e = this.selectedRequest, t = { ...e.headers };
+		delete t.host;
+		let n = `fetch("${e.url}", {\n`;
+		n += `  "method": "${e.method}",\n`, Object.keys(t).length > 0 && (n += `  "headers": ${JSON.stringify(t, null, 4).replace(/\n/g, "\n  ")},\n`), e.body && (n += `  "body": ${JSON.stringify(e.body, null, 4).replace(/\n/g, "\n  ")},\n`), n += "});", navigator.clipboard.writeText(n).then(() => {
+			this.showNotification("Copied as fetch to clipboard");
+		}).catch(() => {
+			this.showNotification("Failed to copy to clipboard");
+		});
+	}
+	showNotification(e) {
+		let t = this.panel?.querySelector(".nexa-notification");
+		t && (t.textContent = e, t.classList.add("nexa-notification-show"), setTimeout(() => {
+			t.classList.remove("nexa-notification-show");
+		}, 2500));
+	}
 	truncateUrl(e, t = 35) {
 		try {
 			let t = new URL(e);
@@ -2359,7 +2475,9 @@ var we = class {
 		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 = `
+		s === "light" && (c = "linear-gradient(135deg,#f8fbff,#e0f2fe)", l = "#0f172a", u = "0 14px 30px rgba(15,23,42,0.16)", d = "1px solid #d8e4f2");
+		let f = this.config.branding || "Nexa DevTools", p = this.config.icon || "https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png";
+		e.style.cssText = `
       position: fixed;
       ${o}
       width: ${t}px;
@@ -2376,7 +2494,7 @@ var we = class {
       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.innerHTML = `<img src="${p}" alt="${f}" 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;
 	}
@@ -2393,7 +2511,12 @@ var we = class {
 	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();
+		if (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");
+			let e = this.panel.querySelector(".nexa-logo img"), t = this.panel.querySelector(".nexa-title"), a = this.config.branding || "Nexa DevTools", o = this.config.icon || "https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png";
+			e && (e.src = o, e.alt = a), t && (t.textContent = a);
+		}
+		this.floatingIcon &&= (this.floatingIcon.remove(), null), this.config.enabled && (!this.config.devOnly || X()) && this.createFloatingIcon();
 	}
 	refreshConfig(e) {
 		this.applyConfigToUI(e);
@@ -2407,7 +2530,9 @@ var we = class {
 	devOnly: !0,
 	floatingButtonSize: 48,
 	floatingButtonOffset: 24,
-	floatingButtonTheme: "inherit"
+	floatingButtonTheme: "inherit",
+	branding: "Nexa DevTools",
+	icon: "https://raw.githubusercontent.com/Berea-Soft/nexa/refs/heads/main/src/assets/faviconNew.png"
 };
 function Te(e = {}) {
 	if (Z && Q) {