@reqdesk/widget 0.1.0 → 0.3.0

package/dist/{react-8GCnIHnw.d.cts.map → react-SJ0r-FEh.d.cts.map}

@@ -1 +1 @@
-{"version":3,"file":"react-8GCnIHnw.d.cts","names":[],"sources":["../src/react/types.ts","../src/react/ReqdeskProvider.tsx","../src/react/TicketForm.tsx","../src/react/SupportPortal.tsx","../src/react/FloatingWidget.tsx","../src/react/useReqdesk.ts","../src/react/shadow-root.tsx","../src/storage.ts"],"mappings":";;;;;UAIiB,oBAAA;;SAER;EAFQ,KAAA,CAAA,EAGP,WAHO;EAAoB,QAAA,CAAA,EAAA,MAAA;UAE5B,CAAA,EAGI,cAHJ;cACC,CAAA,EAGO,MAHP,CAAA,MAAA,EAAA,MAAA,CAAA;UAEG,EAED,KAAA,CAAM,SAFL;;AAED,UAGK,eAAA,CAHC;EAAS,IAAA,CAAA,EAAA,UAAA,GAAA,QAAA;EAGV,QAAA,CAAA,EAAA,cAAe,GAAA,aAAA;EAAA,eAAA,CAAA,EAAA,MAAA;iBAIH,CAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,GAAA,IAAA;SACT,CAAA,EAAA,CAAA,KAAA,EAAA,WAAA,EAAA,GAAA,IAAA;WAEJ,CAAA,EAAA,MAAA;EAAa,KAAA,CAAA,EAAnB,KAAA,CAAM,aAAa;AAG7B;AAOiB,UAPA,kBAAA,CAOgB;EAAA,eAAA,CAAA,EAAA,MAAA;kBACZ,CAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,GAAA,IAAA;WAA2B,CAAA,EAAA,MAAA;OAAR,CAAA,EAJ9B,KAAA,CAAM,aAIwB;;AACV,UAFb,gBAAA,CAEa;cACsB,CAAA,IAAA,EAF/B,gBAE+B,CAAA,EAFZ,OAEY,CAFJ,YAEI,CAAA;aAE3C,CAAA,KAAA,EAAA,MAAA,CAAA,EAHqB,OAGrB,CAH6B,mBAG7B,CAAA;EAAW,mBAAA,CAAA,KAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,EAFgC,OAEhC,CAAA,IAAA,CAAA;;SAAX;;;;iBCAO,eAAA;;;;;;;;GAAqF,uBAAoB,kBAAA,CAAA,GAAA,CAAA;;;;iBCxBzG,UAAA;;;;;;GAA4E,kBAAe,kBAAA,CAAA,GAAA,CAAA;;;;iBCN3F,aAAA;;GAA6B,qBAAkB,kBAAA,CAAA,GAAA,CAAA;;;;UCYrD,mBAAA;;;6BAGmB;EJjBZ,OAAA,CAAA,EAAA,CAAA,KAAA,EIkBG,WJlBiB,EAAA,GAAA,IAAA;;AAE5B,iBIuCO,cAAA,CJvCP;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA;AAAA,CAAA,EI4CN,mBJ5CM,CAAA,EI4Ca,kBAAA,CAAA,GAAA,CAAA,OJ5Cb;;;iBKDO,UAAA,CAAA,GAAc;;;;UCDpB,eAAA;YACE;;iBAGI,UAAA;;GAAyB,kBAAe,kBAAA,CAAA,GAAA,CAAA;;;UCRvC,mBAAA;;;;;IPIA,IAAA,CAAA,EAAA,OAAA,GAAA,MAAoB,GAAA,MAAA;EAAA,CAAA;QAE5B,CAAA,EAAA,aAAA,GAAA,gBAAA;;AAYoB,iBO6Eb,gBAAA,CP7Ea,MAAA,EAAA,MAAA,CAAA,EO6EqB,mBP7ErB,GAAA,IAAA"}
+{"version":3,"file":"react-SJ0r-FEh.d.cts","names":[],"sources":["../src/react/types.ts","../src/react/ReqdeskProvider.tsx","../src/react/TicketForm.tsx","../src/react/SupportPortal.tsx","../src/react/FloatingWidget.tsx","../src/react/useReqdesk.ts","../src/react/shadow-root.tsx","../src/storage.ts"],"mappings":";;;;;UAIiB,oBAAA;;SAER;EAFQ,KAAA,CAAA,EAGP,WAHO;EAAoB,QAAA,CAAA,EAAA,MAAA;UAE5B,CAAA,EAGI,cAHJ;cACC,CAAA,EAGO,MAHP,CAAA,MAAA,EAAA,MAAA,CAAA;UAEG,EAED,KAAA,CAAM,SAFL;;AAED,UAGK,eAAA,CAHC;EAAS,IAAA,CAAA,EAAA,UAAA,GAAA,QAAA;EAGV,QAAA,CAAA,EAAA,cAAe,GAAA,aAAA;EAAA,eAAA,CAAA,EAAA,MAAA;iBAIH,CAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,GAAA,IAAA;SACT,CAAA,EAAA,CAAA,KAAA,EAAA,WAAA,EAAA,GAAA,IAAA;WAEJ,CAAA,EAAA,MAAA;EAAa,KAAA,CAAA,EAAnB,KAAA,CAAM,aAAa;AAG7B;AAOiB,UAPA,kBAAA,CAOgB;EAAA,eAAA,CAAA,EAAA,MAAA;kBACZ,CAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,GAAA,IAAA;WAA2B,CAAA,EAAA,MAAA;OAAR,CAAA,EAJ9B,KAAA,CAAM,aAIwB;;AACV,UAFb,gBAAA,CAEa;cACsB,CAAA,IAAA,EAF/B,gBAE+B,CAAA,EAFZ,OAEY,CAFJ,YAEI,CAAA;aAE3C,CAAA,KAAA,EAAA,MAAA,CAAA,EAHqB,OAGrB,CAH6B,mBAG7B,CAAA;EAAW,mBAAA,CAAA,KAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,EAFgC,OAEhC,CAAA,IAAA,CAAA;;SAAX;;;;iBCAO,eAAA;;;;;;;;GAAqF,uBAAoB,kBAAA,CAAA,GAAA,CAAA;;;;iBCxBzG,UAAA;;;;;;GAA4E,kBAAe,kBAAA,CAAA,GAAA,CAAA;;;;iBCN3F,aAAA;;GAA6B,qBAAkB,kBAAA,CAAA,GAAA,CAAA;;;;UCYrD,mBAAA;;;6BAGmB;EJjBZ,OAAA,CAAA,EAAA,CAAA,KAAA,EIkBG,WJlBiB,EAAA,GAAA,IAAA;;AAE5B,iBIuCO,cAAA,CJvCP;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA;AAAA,CAAA,EI4CN,mBJ5CM,CAAA,EI4Ca,kBAAA,CAAA,GAAA,CAAA,OJ5Cb;;;iBKDO,UAAA,CAAA,GAAc;;;;UCDpB,eAAA;YACE;;iBAGI,UAAA;;GAAyB,kBAAe,kBAAA,CAAA,GAAA,CAAA;;;UCRvC,mBAAA;;;;;IPIA,IAAA,CAAA,EAAA,OAAA,GAAA,MAAoB,GAAA,MAAA;EAAA,CAAA;QAE5B,CAAA,EAAA,aAAA,GAAA,gBAAA;;AAYoB,iBO6Eb,gBAAA,CP7Ea,MAAA,EAAA,MAAA,CAAA,EO6EqB,mBP7ErB,GAAA,IAAA"}

package/dist/react.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_storage = require("./storage-Db9XjupR.cjs");
+const require_storage = require("./storage-Cx5p1yP-.cjs");
 let react = require("react");
 let _tanstack_react_query = require("@tanstack/react-query");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -32,7 +32,11 @@ function onAuthStateChange(listener) {
 		listeners = listeners.filter((l) => l !== listener);
 	};
 }
-async function initWidgetAuth(config) {
+function initWidgetAuth(config) {
+	initPromise = _initWidgetAuth(config);
+	return initPromise;
+}
+async function _initWidgetAuth(config) {
 	setState({ isLoading: true });
 	try {
 		const { createOidc } = await import("oidc-spa/core");
@@ -69,8 +73,13 @@ async function initWidgetAuth(config) {
 		});
 	}
 }
+let initPromise = null;
 async function login() {
-	if (!oidcInstance) return;
+	if (!oidcInstance && initPromise) await initPromise;
+	if (!oidcInstance) {
+		console.warn("[reqdesk-widget] Cannot login: OIDC not initialized. Check auth config.");
+		return;
+	}
 	await oidcInstance.login({ doesCurrentHrefRequiresAuth: false });
 }
 async function logout() {
@@ -298,7 +307,7 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 		onError,
 		t
 	]);
-	const cssVars = require_storage.themeToVars(ctx.theme);
+	const cssVars = require_storage.themeToStyle(ctx.theme);
 	const content = success ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "rqd-success",
 		style: {
@@ -436,7 +445,7 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 		className,
 		style: {
 			...style,
-			cssText: cssVars
+			...cssVars
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "rqd-body",
@@ -445,7 +454,7 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rqd-inline ${className ?? ""}`,
-		style: { cssText: cssVars },
+		style: cssVars,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "rqd-body",
 			children: content
@@ -457,10 +466,10 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 function SupportPortal({ className }) {
 	const ctx = useReqdeskContext();
 	const { isLoading } = useReqdesk();
-	const cssVars = require_storage.themeToVars(ctx.theme);
+	const cssVars = require_storage.themeToStyle(ctx.theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rqd-inline ${className ?? ""}`,
-		style: { cssText: cssVars },
+		style: cssVars,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "rqd-body",
 			children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -481,6 +490,132 @@ function SupportPortal({ className }) {
 	}) });
 }
 //#endregion
+//#region src/react/queries.ts
+const widgetTicketDetailOptions = (ticketId) => (0, _tanstack_react_query.queryOptions)({
+	queryKey: ["widget-ticket", ticketId],
+	queryFn: () => require_storage.getTicketDetail(ticketId),
+	staleTime: 6e4,
+	enabled: !!ticketId
+});
+const widgetMyTicketsOptions = (projectId, userId) => (0, _tanstack_react_query.queryOptions)({
+	queryKey: [
+		"widget-tickets",
+		projectId,
+		userId
+	],
+	queryFn: () => require_storage.listMyTickets(projectId, userId),
+	staleTime: 3e4,
+	placeholderData: _tanstack_react_query.keepPreviousData,
+	enabled: !!userId
+});
+const widgetUserOptions = (projectId, email) => (0, _tanstack_react_query.queryOptions)({
+	queryKey: [
+		"widget-user",
+		projectId,
+		email
+	],
+	queryFn: () => require_storage.resolveWidgetUser(projectId, email),
+	staleTime: 5 * 6e4,
+	enabled: !!email
+});
+const widgetCategoriesOptions = (projectId, parentId) => (0, _tanstack_react_query.queryOptions)({
+	queryKey: [
+		"widget-categories",
+		projectId,
+		parentId ?? "root"
+	],
+	queryFn: () => require_storage.getCategories(projectId, parentId),
+	staleTime: 5 * 6e4
+});
+//#endregion
+//#region src/client-metadata.ts
+const STORAGE_PREFIX = "reqdesk_diag_";
+const DEFAULT_PREFS = {
+	screenResolution: false,
+	deviceType: false,
+	timezone: false,
+	referrerUrl: false,
+	language: false,
+	platform: false
+};
+/** Always collected — minimal, non-sensitive */
+function collectMinimalMetadata() {
+	const meta = {};
+	try {
+		meta.pageUrl = window.location.href;
+		meta.userAgent = navigator.userAgent;
+	} catch {}
+	return meta;
+}
+/** Full diagnostic set — only included for opted-in fields */
+function collectDiagnosticMetadata(prefs) {
+	const meta = {};
+	try {
+		if (prefs.screenResolution) meta.screenResolution = `${screen.width}x${screen.height}`;
+		if (prefs.deviceType) meta.deviceType = detectDeviceType();
+		if (prefs.timezone) meta.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		if (prefs.referrerUrl && document.referrer) meta.referrerUrl = document.referrer;
+		if (prefs.language) meta.language = navigator.language;
+		if (prefs.platform) meta.platform = navigator.platform;
+	} catch {}
+	return meta;
+}
+/** Combine minimal + opted-in diagnostic metadata */
+function collectAllMetadata(apiKey) {
+	const prefs = getMetadataPreferences(apiKey);
+	return {
+		...collectMinimalMetadata(),
+		...collectDiagnosticMetadata(prefs)
+	};
+}
+function getMetadataPreferences(apiKey) {
+	try {
+		const raw = localStorage.getItem(`${STORAGE_PREFIX}${apiKey}`);
+		if (raw) return {
+			...DEFAULT_PREFS,
+			...JSON.parse(raw)
+		};
+	} catch {}
+	return { ...DEFAULT_PREFS };
+}
+function saveMetadataPreferences(apiKey, prefs) {
+	try {
+		localStorage.setItem(`${STORAGE_PREFIX}${apiKey}`, JSON.stringify(prefs));
+	} catch {}
+}
+function detectDeviceType() {
+	const ua = navigator.userAgent.toLowerCase();
+	if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+	if (/mobile|iphone|ipod|android.*mobile|windows phone/i.test(ua)) return "mobile";
+	return "desktop";
+}
+const DIAGNOSTIC_FIELDS = [
+	{
+		key: "screenResolution",
+		labelKey: "diag.screenResolution"
+	},
+	{
+		key: "deviceType",
+		labelKey: "diag.deviceType"
+	},
+	{
+		key: "timezone",
+		labelKey: "diag.timezone"
+	},
+	{
+		key: "referrerUrl",
+		labelKey: "diag.referrerUrl"
+	},
+	{
+		key: "language",
+		labelKey: "diag.language"
+	},
+	{
+		key: "platform",
+		labelKey: "diag.platform"
+	}
+];
+//#endregion
 //#region src/react/views/SubmitTicketView.tsx
 const translations$4 = {
 	en: require_storage.en,
@@ -530,6 +665,19 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 	const [uploadProgress, setUploadProgress] = (0, react.useState)(null);
 	const [success, setSuccess] = (0, react.useState)(null);
 	const [rememberEmail, setRememberEmail] = (0, react.useState)(!!savedEmail);
+	const [categoryPath, setCategoryPath] = (0, react.useState)([]);
+	const [selectedCategory, setSelectedCategory] = (0, react.useState)(null);
+	const { data: categories = [] } = (0, _tanstack_react_query.useQuery)(widgetCategoriesOptions(projectId, categoryPath.length > 0 ? categoryPath[categoryPath.length - 1].id : null));
+	const [diagOpen, setDiagOpen] = (0, react.useState)(false);
+	const [diagPrefs, setDiagPrefs] = (0, react.useState)(getMetadataPreferences(ctx.apiKey));
+	const diagValues = collectDiagnosticMetadata({
+		screenResolution: true,
+		deviceType: true,
+		timezone: true,
+		referrerUrl: true,
+		language: true,
+		platform: true
+	});
 	const t = (0, react.useCallback)((key) => {
 		if (ctx.translations?.[key]) return ctx.translations[key];
 		return (translations$4[ctx.language] ?? translations$4.en)[key] ?? key;
@@ -616,12 +764,15 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 		}
 		setErrors({});
 		if (rememberEmail && email) require_storage.saveWidgetEmail(ctx.apiKey, email);
+		saveMetadataPreferences(ctx.apiKey, diagPrefs);
 		const validFiles = files.filter((f) => !f.error);
 		const data = {
 			title,
 			description: formData.get("description")?.trim() || void 0,
 			email,
-			priority: formData.get("priority") ?? "medium"
+			priority: formData.get("priority") ?? "medium",
+			categoryId: selectedCategory?.id,
+			clientMetadata: collectAllMetadata(ctx.apiKey)
 		};
 		submitMutation.mutate({
 			data,
@@ -802,6 +953,97 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 					]
 				})]
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-form-group",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					className: "rqd-label",
+					children: t("form.categorySelected")
+				}), selectedCategory ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-category-selected",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						categoryPath.map((c) => c.name).join(" > "),
+						categoryPath.length > 0 ? " > " : "",
+						selectedCategory.name
+					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => {
+							setSelectedCategory(null);
+							setCategoryPath([]);
+						},
+						children: "×"
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [categoryPath.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-category-breadcrumb",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => setCategoryPath([]),
+						children: t("form.categoryPlaceholder")
+					}), categoryPath.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-category-breadcrumb-sep",
+						children: "›"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => setCategoryPath((prev) => prev.slice(0, i + 1)),
+						children: c.name
+					})] }, c.id))]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-category-list",
+					children: [categories.map((cat) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "rqd-category-item",
+						onClick: () => {
+							if (cat.hasChildren) setCategoryPath((prev) => [...prev, cat]);
+							else setSelectedCategory(cat);
+						},
+						children: [cat.name, cat.hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rqd-category-item-chevron",
+							children: "›"
+						})]
+					}, cat.id)), categories.length === 0 && categoryPath.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: 13,
+							color: "var(--rqd-text-secondary)"
+						},
+						children: t("form.categoryPlaceholder")
+					})]
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-form-group",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "rqd-diag-toggle",
+					onClick: () => setDiagOpen((prev) => !prev),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("diag.title") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: diagOpen ? "▲" : "▼" })]
+				}), diagOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-diag-panel",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: {
+							fontSize: 12,
+							color: "var(--rqd-text-secondary)",
+							margin: "0 0 6px"
+						},
+						children: t("diag.hint")
+					}), DIAGNOSTIC_FIELDS.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "rqd-diag-item",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								checked: diagPrefs[field.key],
+								onChange: (e) => setDiagPrefs((prev) => ({
+									...prev,
+									[field.key]: e.target.checked
+								}))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(field.labelKey) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "rqd-diag-item-value",
+								children: diagValues[field.key] ?? "—"
+							})
+						]
+					}, field.key))]
+				})]
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "rqd-form-group",
 				children: [
@@ -865,35 +1107,6 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 	});
 }
 //#endregion
-//#region src/react/queries.ts
-const widgetTicketDetailOptions = (ticketId) => (0, _tanstack_react_query.queryOptions)({
-	queryKey: ["widget-ticket", ticketId],
-	queryFn: () => require_storage.getTicketDetail(ticketId),
-	staleTime: 6e4,
-	enabled: !!ticketId
-});
-const widgetMyTicketsOptions = (projectId, userId) => (0, _tanstack_react_query.queryOptions)({
-	queryKey: [
-		"widget-tickets",
-		projectId,
-		userId
-	],
-	queryFn: () => require_storage.listMyTickets(projectId, userId),
-	staleTime: 3e4,
-	placeholderData: _tanstack_react_query.keepPreviousData,
-	enabled: !!userId
-});
-const widgetUserOptions = (projectId, email) => (0, _tanstack_react_query.queryOptions)({
-	queryKey: [
-		"widget-user",
-		projectId,
-		email
-	],
-	queryFn: () => require_storage.resolveWidgetUser(projectId, email),
-	staleTime: 5 * 6e4,
-	enabled: !!email
-});
-//#endregion
 //#region src/react/views/MyTicketsView.tsx
 const translations$3 = {
 	en: require_storage.en,
@@ -1075,6 +1288,24 @@ function TicketDetailView({ ticketId, onBack }) {
 			if (context?.previous) queryClient.setQueryData(["widget-ticket", ticketId], context.previous);
 		}
 	});
+	const resolveMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: () => require_storage.closeTicket(ticketId),
+		onMutate: async () => {
+			await queryClient.cancelQueries({ queryKey: ["widget-ticket", ticketId] });
+			const previous = queryClient.getQueryData(["widget-ticket", ticketId]);
+			if (previous) queryClient.setQueryData(["widget-ticket", ticketId], {
+				...previous,
+				status: "resolved"
+			});
+			return { previous };
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["widget-ticket", ticketId] });
+		},
+		onError: (_err, _vars, context) => {
+			if (context?.previous) queryClient.setQueryData(["widget-ticket", ticketId], context.previous);
+		}
+	});
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "rqd-loading",
 		children: t("detail.loading")
@@ -1183,11 +1414,28 @@ function TicketDetailView({ ticketId, onBack }) {
 				onChange: (e) => setReplyBody(e.target.value),
 				placeholder: t("detail.replyPlaceholder"),
 				rows: 3
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				className: "rqd-btn rqd-btn-primary",
-				onClick: () => replyMutation.mutate(replyBody.trim()),
-				disabled: !replyBody.trim() || replyMutation.isPending,
-				children: replyMutation.isPending ? t("detail.sending") : t("detail.sendReply")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "rqd-btn rqd-btn-primary",
+					style: { flex: 1 },
+					onClick: () => replyMutation.mutate(replyBody.trim()),
+					disabled: !replyBody.trim() || replyMutation.isPending,
+					children: replyMutation.isPending ? t("detail.sending") : t("detail.sendReply")
+				}), ticket.status !== "resolved" && ticket.status !== "closed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "rqd-btn rqd-btn-secondary",
+					style: {
+						flex: 0,
+						whiteSpace: "nowrap",
+						padding: "10px 16px"
+					},
+					onClick: () => resolveMutation.mutate(),
+					disabled: resolveMutation.isPending,
+					children: resolveMutation.isPending ? t("detail.resolving") : t("detail.resolve")
+				})]
 			})]
 		})
 	] });
@@ -1314,7 +1562,7 @@ function FloatingWidget({ position = "bottom-right", contained = false, onTicket
 		return (translations[activeLang] ?? translations.en)[key] ?? key;
 	}, [activeLang, ctx.translations]);
 	const isRtl = activeLang === "ar";
-	const cssVars = require_storage.themeToVars(activeTheme);
+	const cssVars = require_storage.themeToStyle(activeTheme);
 	const posClass = `rqd-${position}`;
 	const containedClass = contained ? " rqd-contained" : "";
 	const brandName = ctx.theme?.brandName;
@@ -1556,7 +1804,7 @@ function FloatingWidget({ position = "bottom-right", contained = false, onTicket
 	const canGoBack = view !== "home";
 	const goBackTarget = view === "ticket-detail" ? "my-tickets" : "home";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: { cssText: cssVars },
+		style: cssVars,
 		...isRtl ? { dir: "rtl" } : {},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			className: `rqd-fab ${posClass}${containedClass}`,

package/dist/react.d.cts

@@ -1 +1 @@
-export * from './react-8GCnIHnw.cjs';
+export * from './react-SJ0r-FEh.cjs';

package/dist/react.d.ts

@@ -1 +1 @@
-export * from './react-D69QlAm1.js';
+export * from './react-BLAoKiUb.js';