bariweb-widget 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# BariWeb Accessibility Widget
+
+Modern AI-powered accessibility widget for websites.
+
+## Features
+- **AI-powered Chat**: Assistance in finding elements and filling forms.
+- **Accessibility Tools**: Text scaling, monochrome mode, dark contrast, and more.
+- **Natural Language Support**: Kazakh, Russian, and English.
+- **Mobile Friendly**: Fully responsive design.
+
+## Installation
+
+### Via Script Tag
+Add the following script to your HTML file:
+
+```html
+<script 
+  src="https://unpkg.com/bariweb-widget@latest/dist/bariweb.iife.js" 
+  data-client-id="YOUR_CLIENT_ID"
+></script>
+```
+
+### Via NPM
+Install the package:
+
+```bash
+npm install bariweb-widget
+```
+
+Then import it in your application:
+
+```javascript
+import 'bariweb-widget';
+```
+
+## Configuration
+
+The widget uses `data-client-id` attribute on the script tag or `client-id` attribute on the `<bw-widget>` element to identify the client.
+
+## License
+Proprietary

package/dist/AdminUI-CGKuDZdZ.js

@@ -0,0 +1,66 @@
+import { n as e, r as t, t as n } from "./Watcher-CrSaF4Ov.js";
+//#region src/lib/AdminUI.ts
+var r = "\n  #bw-admin-panel {\n    position: fixed;\n    bottom: 160px;\n    right: 20px;\n    z-index: 2147483647;\n    width: 320px;\n    background: #0f172a;\n    border: 1px solid #334155;\n    border-radius: 16px;\n    padding: 16px;\n    box-shadow: 0 12px 50px rgba(0,0,0,0.6);\n    font-family: Inter, system-ui, sans-serif;\n    color: #f1f5f9;\n    transition: border-color 0.3s;\n  }\n  #bw-admin-panel.trained {\n    border-color: #10b981;\n  }\n  #bw-admin-panel.discovering {\n    border-color: #a78bfa;\n  }\n\n  .bw-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n  }\n  .bw-panel-title {\n    font-size: 13px;\n    font-weight: 700;\n    color: #a78bfa;\n  }\n  .bw-panel-close {\n    background: none;\n    border: none;\n    color: #64748b;\n    cursor: pointer;\n    font-size: 16px;\n    padding: 0;\n    line-height: 1;\n  }\n  .bw-panel-close:hover { color: #f87171; }\n\n  .bw-status-box {\n    background: #1e293b;\n    border-radius: 10px;\n    padding: 12px;\n    margin-bottom: 12px;\n    border: 1px solid #334155;\n    transition: all 0.3s;\n  }\n  .bw-status-box.trained {\n    border-color: #10b981;\n    background: rgba(16, 185, 129, 0.08);\n  }\n  .bw-status-box.draft {\n    border-color: #f59e0b;\n    background: rgba(245, 158, 11, 0.05);\n  }\n\n  .bw-status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n  }\n  .bw-status-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n  .bw-status-dot.active { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: bw-pulse 2s infinite; }\n  .bw-status-dot.draft  { background: #f59e0b; }\n  .bw-status-dot.idle   { background: #475569; }\n\n  @keyframes bw-pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n\n  .bw-status-text {\n    font-size: 11px;\n    font-weight: 600;\n  }\n  .bw-status-text.trained { color: #4ade80; }\n  .bw-status-text.draft   { color: #f59e0b; }\n  .bw-status-text.idle    { color: #94a3b8; }\n\n  .bw-label-display {\n    font-size: 14px;\n    font-weight: 700;\n    color: #e2e8f0;\n    margin: 4px 0;\n    word-break: break-word;\n  }\n  .bw-desc-display {\n    font-size: 11px;\n    color: #94a3b8;\n    line-height: 1.4;\n    margin-top: 4px;\n  }\n\n  .bw-fp-mini {\n    font-family: monospace;\n    font-size: 9px;\n    color: #475569;\n    margin-bottom: 10px;\n    word-break: break-all;\n  }\n\n  .bw-tokens-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  .bw-token-tag {\n    background: #334155;\n    color: #e2e8f0;\n    font-size: 9px;\n    padding: 2px 6px;\n    border-radius: 4px;\n    cursor: help;\n    transition: all 0.15s;\n  }\n  .bw-token-tag:hover {\n    background: #7c3aed;\n    color: white;\n    transform: translateY(-1px);\n  }\n\n  .bw-discovery-bar {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 10px;\n    background: rgba(167, 139, 250, 0.08);\n    border: 1px solid rgba(167, 139, 250, 0.2);\n    border-radius: 8px;\n    font-size: 10px;\n    color: #a78bfa;\n    margin-top: 8px;\n  }\n  .bw-discovery-bar .spinner {\n    width: 12px;\n    height: 12px;\n    border: 2px solid rgba(167, 139, 250, 0.3);\n    border-top-color: #a78bfa;\n    border-radius: 50%;\n    animation: bw-spin 0.8s linear infinite;\n  }\n  @keyframes bw-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  .bw-highlight-rect {\n    position: absolute;\n    pointer-events: none;\n    border: 2px solid #7c3aed;\n    background: rgba(124, 58, 237, 0.1);\n    box-shadow: 0 0 10px #7c3aed;\n    z-index: 100000;\n    border-radius: 4px;\n    transition: all 0.15s ease-out;\n  }\n", i = null, a = null;
+function o() {
+	if (!i) return;
+	let n = e(), r = t(), o = a?.is_trained === !0, c = a && !a.is_trained, l = a?.label || null, u = a?.description || null, d = o ? "active" : c ? "draft" : "idle", f = o ? "trained" : c ? "draft" : "idle", p = o ? "✅ Обучено" : c ? "📝 Черновик (не подтверждено)" : "🔍 Сканирование...", m = i.querySelector("#bw-admin-panel");
+	m && (m.className = o ? "trained" : "discovering", m.id = "bw-admin-panel", o && m.classList.add("trained"));
+	let h = i.querySelector("#bw-panel-content");
+	h && (h.innerHTML = `
+      <div class="bw-status-box ${o ? "trained" : c ? "draft" : ""}">
+        <div class="bw-status-indicator">
+          <span class="bw-status-dot ${d}"></span>
+          <span class="bw-status-text ${f}">${p}</span>
+        </div>
+        ${l ? `<div class="bw-label-display">${l}</div>` : ""}
+        ${u ? `<div class="bw-desc-display">${u}</div>` : ""}
+      </div>
+
+      <div class="bw-fp-mini">🔑 ${r}</div>
+
+      <div class="bw-tokens-list">
+        ${n.map((e) => `<span class="bw-token-tag" data-token="${e}">${e}</span>`).join("")}
+      </div>
+
+      <div class="bw-discovery-bar">
+        <div class="spinner"></div>
+        🤖 Система обучается в фоновом режиме...
+      </div>
+    `, h.querySelectorAll(".bw-token-tag").forEach((e) => {
+		let t = e;
+		t.onmouseenter = () => s(t.dataset.token || ""), t.onmouseleave = () => document.querySelectorAll(".bw-highlight-rect").forEach((e) => e.remove());
+	}));
+}
+function s(e) {
+	document.querySelectorAll(".bw-highlight-rect").forEach((e) => e.remove());
+	let t = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT), n;
+	for (; n = t.nextNode();) if ((n.innerText || "").toLowerCase() === e.toLowerCase() && n.offsetWidth > 0) {
+		let e = n.getBoundingClientRect(), t = document.createElement("div");
+		t.className = "bw-highlight-rect", t.style.top = `${e.top + window.scrollY}px`, t.style.left = `${e.left + window.scrollX}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, document.body.appendChild(t);
+	}
+}
+async function c() {
+	if (i) return;
+	let e = document.createElement("div");
+	e.id = "bw-admin-wrapper", e.innerHTML = `
+      <style>${r}</style>
+      <div id="bw-admin-panel">
+        <div class="bw-panel-header">
+          <span class="bw-panel-title">🧠 Discovery Mode</span>
+          <button class="bw-panel-close" id="bw-admin-close">✕</button>
+        </div>
+        <div id="bw-panel-content"></div>
+      </div>
+    `, document.body.appendChild(e), i = e;
+	let t = e.querySelector("#bw-admin-close");
+	t.onclick = () => {
+		i?.remove(), i = null;
+	}, n.onDiscovery((e) => {
+		a = e, o();
+	}), o(), await n.forceDiscovery();
+}
+function l() {
+	c();
+}
+//#endregion
+export { l as initAdminMode };

package/dist/Watcher-CrSaF4Ov.js

@@ -0,0 +1,226 @@
+//#region src/lib/Fingerprint.ts
+var e = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi, t = /\/\d{1,20}(?=\/|$)/g, n = /\/[a-z0-9]+(?:-[a-z0-9]+)*-\d+(?=\/|$)/g, r = /\/[0-9a-f]{8,}(?=\/|$)/gi, i = new Set([
+	"id",
+	"userId",
+	"user_id",
+	"orderId",
+	"order_id",
+	"itemId",
+	"item_id",
+	"productId",
+	"product_id",
+	"token",
+	"key",
+	"ref",
+	"code",
+	"session"
+]);
+function a(a) {
+	try {
+		let o = new URL(a), s = o.pathname;
+		s = s.replace(e, ":id"), s = s.replace(t, "/:id"), s = s.replace(n, "/:slug"), s = s.replace(r, "/:id");
+		let c = new URLSearchParams();
+		o.searchParams.forEach((e, t) => {
+			i.has(t) ? c.set(`:${t}`, "") : e.length < 30 && !/^\d+$/.test(e) && c.set(t, e);
+		});
+		let l = c.toString();
+		return s.replace(/\/$/, "") + (l ? `?${l}` : "");
+	} catch {
+		return a.replace(e, ":id").replace(/\/\d{1,20}(?=\/|$)/g, "/:id").split("?")[0];
+	}
+}
+var o = new Set(/* @__PURE__ */ "ok,ок,okay,close,закрыть,cancel,отмена,yes,da,no,нет,да,submit,отправить,back,назад,next,далее,more,ещё,еще,menu,меню,...,•,·,loading,загрузка,open,открыть,expand,collapse,toggle,sort".split(","));
+function s(e) {
+	let t = [
+		"dialog",
+		"tooltip",
+		"menu",
+		"listbox",
+		"alertdialog"
+	], n = e;
+	for (; n && n !== document.body;) {
+		let e = n.getAttribute("role") || "";
+		if (t.includes(e) || n.hasAttribute("data-radix-popper-content-wrapper") || n.hasAttribute("data-floating-ui-portal")) return !0;
+		let r = typeof n.className == "string" ? n.className : "";
+		if (/popover|tooltip|dropdown-menu|floating|overlay/i.test(r)) return !0;
+		n = n.parentElement;
+	}
+	return !1;
+}
+function c(e) {
+	let t = [
+		"li",
+		"article",
+		"tr",
+		"dd"
+	], n = e.parentElement, r = 0;
+	for (; n && n !== document.body && r < 8;) {
+		let e = n.tagName.toLowerCase();
+		if (t.includes(e)) return !0;
+		let i = typeof n.className == "string" ? n.className : "";
+		if (/\b(card|item|tile|post|entry|product|row-item|list-item|feed-item|cell)\b/i.test(i)) {
+			let e = n.parentElement?.children;
+			if (e && e.length > 2) return !0;
+		}
+		let a = n.getAttribute("role") || "";
+		if (a === "listitem" || a === "row" || a === "gridcell") return !0;
+		n = n.parentElement, r++;
+	}
+	return !1;
+}
+function l(e) {
+	let t = e, n = (t.getAttribute("aria-label") || t.getAttribute("title") || t.innerText || t.getAttribute("placeholder") || "").trim().toLowerCase();
+	return !n || n.length < 2 || n.length > 40 || /^[\d\s₸$€%.,\-+:()]+$/.test(n) || /^\d{1,2}[./]\d{1,2}/.test(n) || o.has(n) ? "" : n.replace(/^[\p{Emoji}\s]+/u, "").trim().slice(0, 30);
+}
+function u(e) {
+	let t = 5381;
+	for (let n = 0; n < e.length; n++) t = (t << 5) + t ^ e.charCodeAt(n);
+	return (t >>> 0).toString(16);
+}
+function d() {
+	let e = [], t = a(window.location.href);
+	e.push(`route:${t}`);
+	let n = document.querySelector("h1");
+	if (n) {
+		let t = n.innerText?.trim().toLowerCase();
+		t && t.length > 1 && t.length < 50 && !/\d{3,}/.test(t) && e.push(`h1:${t.slice(0, 30)}`);
+	}
+	let r = Array.from(document.querySelectorAll("input:not([type=\"hidden\"]):not([type=\"submit\"]):not([type=\"radio\"]):not([type=\"checkbox\"]), textarea, select")).slice(0, 8);
+	for (let t of r) {
+		if (s(t)) continue;
+		let n = t, r = (n.getAttribute("name") || n.getAttribute("placeholder") || n.getAttribute("aria-label") || "").toLowerCase().trim().slice(0, 25);
+		r && r.length > 1 && !o.has(r) && e.push(`field:${r}`);
+	}
+	let i = Array.from(document.querySelectorAll("nav a, [role=\"navigation\"] a")).slice(0, 6);
+	for (let t of i) {
+		if (s(t)) continue;
+		let n = l(t);
+		n && e.push(`nav:${n}`);
+	}
+	let u = document.querySelector("main") || document.querySelector("[role=\"main\"]") || document.getElementById("root");
+	return u && Array.from(u.querySelectorAll("button:not([aria-hidden=\"true\"]), [role=\"button\"]:not([aria-hidden=\"true\"])")).filter((e) => !s(e) && !c(e)).map(l).filter((e) => e.length > 1).reduce((e, t) => e.includes(t) ? e : [...e, t], []).slice(0, 3).forEach((t) => e.push(`btn:${t}`)), [...new Set(e)].sort().slice(0, 15);
+}
+function f() {
+	return `bw-${u(d().join("|"))}`;
+}
+//#endregion
+//#region src/lib/Watcher.ts
+function p(e, t) {
+	let n = new Set([...e].filter((e) => t.has(e))), r = new Set([...e, ...t]);
+	return r.size === 0 ? 1 : n.size / r.size;
+}
+var m = new class {
+	constructor(e = 1500) {
+		this._observer = null, this._debounceTimer = null, this._lastTokens = /* @__PURE__ */ new Set(), this._lastUrl = "", this._callbacks = [], this._discoveryCallbacks = [], this._isDiscovering = !1, this.isAutoDiscoveryEnabled = !1, this._debounceMs = e;
+	}
+	start() {
+		this._observer || (this._lastTokens = new Set(d()), this._lastUrl = a(window.location.href), this._observer = new MutationObserver(() => {
+			this._debounceTimer && clearTimeout(this._debounceTimer), this._debounceTimer = setTimeout(() => this._onMutation(), this._debounceMs);
+		}), this._observer.observe(document.body, {
+			childList: !0,
+			subtree: !0,
+			attributes: !1,
+			characterData: !1
+		}));
+	}
+	stop() {
+		this._observer?.disconnect(), this._observer = null, this._debounceTimer && clearTimeout(this._debounceTimer);
+	}
+	onStateChange(e) {
+		this._callbacks.push(e);
+	}
+	onDiscovery(e) {
+		this._discoveryCallbacks.push(e);
+	}
+	get isDiscovering() {
+		return this._isDiscovering;
+	}
+	getLiveSnapshot() {
+		let e = (e, t) => {
+			if (e.hasAttribute("bw-private") || e.hasAttribute("data-bw-private")) return "[MASKED]";
+			if (!t) return t;
+			let n = t.replace(/(?:\d[ \-]*?){13,16}/g, "****");
+			return n = n.replace(/\b\d{12}\b/g, "****"), n;
+		}, t = Array.from(document.querySelectorAll("h1, h2")).map((t) => e(t, t.innerText?.trim() || "")).filter(Boolean).slice(0, 3), n = Array.from(document.querySelectorAll("button, a[href], [role=\"button\"]")).map((t) => {
+			let n = t, r = e(n, (n.getAttribute("aria-label") || n.innerText || "").trim().slice(0, 60));
+			return {
+				id: n.id || "",
+				text: r
+			};
+		}).filter((e) => e.text.length > 0).slice(0, 30);
+		return {
+			url: window.location.href,
+			headings: t,
+			fingerprint: f(),
+			elements: n
+		};
+	}
+	async _onMutation() {
+		if (document.readyState !== "complete") return;
+		let e = a(window.location.href), t = new Set(d());
+		if (t.size < 2) return;
+		let n = f(), r = e !== this._lastUrl, i = p(this._lastTokens, t);
+		if (r || i < .55) {
+			let a = r ? `URL: ${this._lastUrl} → ${e}` : `Sim: ${i.toFixed(2)}`;
+			console.log(`[Watcher] Screen change (${a})`), this._lastUrl = e, this._lastTokens = t;
+			let o = this.getLiveSnapshot();
+			if (this.isAutoDiscoveryEnabled) {
+				let e = this._buildTypedTokens();
+				this._discover(n, e).catch(() => {});
+			}
+			this._callbacks.forEach((e) => e(o));
+		}
+	}
+	_buildTypedTokens() {
+		let e = /* @__PURE__ */ new Set(), t = [], n = (n, r) => {
+			let i = r.trim().slice(0, 40);
+			if (!i || i.length < 2) return;
+			let a = `${n}:${i}`;
+			e.has(a) || (e.add(a), t.push(a));
+		};
+		return document.querySelectorAll("button, [role=\"button\"]").forEach((e) => {
+			let t = e.innerText?.trim();
+			t && n("btn", t);
+		}), document.querySelectorAll("a[href]").forEach((e) => {
+			let t = (e.getAttribute("aria-label") || e.innerText)?.trim();
+			t && n("a", t);
+		}), document.querySelectorAll("input:not([type=hidden]), textarea, select").forEach((e) => {
+			let t = e.placeholder || e.name;
+			t && n("input", t);
+		}), t.slice(0, 8);
+	}
+	async _discover(e, t) {
+		let n = localStorage.getItem("bw_admin_token");
+		if (n) {
+			this._isDiscovering = !0;
+			try {
+				let r = await fetch("http://localhost:8000/v1/training/discover", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						Authorization: `Bearer ${n}`
+					},
+					body: JSON.stringify({
+						fingerprint: e,
+						tokens: t,
+						page_url: window.location.href
+					})
+				});
+				if (r.ok) {
+					let e = await r.json();
+					console.log(`[Discovery] ${e.status} — ${e.label}`), this._discoveryCallbacks.forEach((t) => t(e));
+				} else r.status === 401 ? (console.warn("[Discovery] Token expired — disabling auto-discovery"), localStorage.removeItem("bw_admin_token"), this.isAutoDiscoveryEnabled = !1) : console.warn(`[Discovery] Server error ${r.status}`);
+			} catch (e) {
+				console.warn("[Discovery] Network error", e);
+			} finally {
+				this._isDiscovering = !1;
+			}
+		}
+	}
+	async forceDiscovery() {
+		let e = [...new Set(d())], t = f();
+		await this._discover(t, e);
+	}
+}(1500);
+//#endregion
+export { d as n, f as r, m as t };