@reqdesk/widget 0.1.0

package/dist/react.cjs

@@ -0,0 +1,1642 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_storage = require("./storage-Db9XjupR.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region src/auth/widget-auth.ts
+let authState = {
+	isAuthenticated: false,
+	isLoading: false
+};
+let listeners = [];
+let oidcInstance = null;
+function notify() {
+	for (const listener of listeners) try {
+		listener(authState);
+	} catch {}
+}
+function setState(update) {
+	authState = {
+		...authState,
+		...update
+	};
+	notify();
+}
+function getAuthState() {
+	return authState;
+}
+function onAuthStateChange(listener) {
+	listeners.push(listener);
+	return () => {
+		listeners = listeners.filter((l) => l !== listener);
+	};
+}
+async function initWidgetAuth(config) {
+	setState({ isLoading: true });
+	try {
+		const { createOidc } = await import("oidc-spa/core");
+		const oidc = await createOidc({
+			issuerUri: config.issuerUri,
+			clientId: config.clientId
+		});
+		oidcInstance = oidc;
+		if (oidc.isUserLoggedIn) {
+			require_storage.setOidcTokenProvider(() => oidc.getTokens());
+			const payload = decodeJwtPayload((await oidc.getTokens()).accessToken);
+			setState({
+				isAuthenticated: true,
+				isLoading: false,
+				userEmail: payload?.email,
+				userName: payload?.name ?? payload?.preferred_username
+			});
+			oidc.subscribeToTokensChange(async (newTokens) => {
+				const p = decodeJwtPayload(newTokens.accessToken);
+				setState({
+					userEmail: p?.email ?? authState.userEmail,
+					userName: p?.name ?? p?.preferred_username ?? authState.userName
+				});
+			});
+		} else setState({
+			isAuthenticated: false,
+			isLoading: false
+		});
+	} catch (err) {
+		console.warn("[reqdesk-widget] oidc-spa initialization failed:", err);
+		setState({
+			isAuthenticated: false,
+			isLoading: false
+		});
+	}
+}
+async function login() {
+	if (!oidcInstance) return;
+	await oidcInstance.login({ doesCurrentHrefRequiresAuth: false });
+}
+async function logout() {
+	if (!oidcInstance) return;
+	require_storage.setOidcTokenProvider(null);
+	setState({
+		isAuthenticated: false,
+		userEmail: void 0,
+		userName: void 0
+	});
+	await oidcInstance.logout({ redirectTo: "current page" });
+}
+function isAuthConfigured() {
+	return oidcInstance !== null;
+}
+function decodeJwtPayload(token) {
+	try {
+		const parts = token.split(".");
+		if (parts.length !== 3) return null;
+		const payload = atob(parts[1].replace(/-/g, "+").replace(/_/g, "/"));
+		return JSON.parse(payload);
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/react/ReqdeskProvider.tsx
+const ReqdeskContext = (0, react.createContext)(null);
+function useReqdeskContext() {
+	const ctx = (0, react.useContext)(ReqdeskContext);
+	if (!ctx) throw new Error("useReqdesk must be used within a <ReqdeskProvider>");
+	return ctx;
+}
+const widgetQueryClient = new _tanstack_react_query.QueryClient({ defaultOptions: {
+	queries: {
+		staleTime: 300 * 1e3,
+		gcTime: 600 * 1e3,
+		retry: (failureCount, error) => {
+			const status = error?.status ?? error?.statusCode;
+			if (status && status >= 400 && status < 500 && status !== 408) return false;
+			if (status && status >= 500) return false;
+			return failureCount < 2;
+		},
+		retryDelay: (attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4),
+		refetchOnWindowFocus: false
+	},
+	mutations: { retry: false }
+} });
+function ReqdeskProvider({ apiKey, auth, theme, language, customer, translations, children }) {
+	const initialized = (0, react.useRef)(false);
+	const [authState, setAuthState] = (0, react.useState)(getAuthState);
+	const saved = initialized.current ? null : require_storage.loadWidgetConfig(apiKey);
+	const resolvedLanguage = language ?? saved?.language ?? "en";
+	const resolvedTheme = theme ?? saved?.theme;
+	(0, react.useEffect)(() => {
+		if (!initialized.current) {
+			require_storage.configureWidgetClient(window.location.origin, apiKey);
+			initialized.current = true;
+			if (auth) initWidgetAuth(auth);
+		}
+	}, [apiKey, auth]);
+	(0, react.useEffect)(() => {
+		return onAuthStateChange(setAuthState);
+	}, []);
+	(0, react.useEffect)(() => {
+		require_storage.saveWidgetConfig(apiKey, {
+			language: resolvedLanguage,
+			theme: resolvedTheme
+		});
+	}, [
+		apiKey,
+		resolvedLanguage,
+		resolvedTheme
+	]);
+	const value = (0, react.useMemo)(() => ({
+		apiKey,
+		auth,
+		theme: resolvedTheme,
+		language: resolvedLanguage,
+		customer,
+		translations,
+		isAuthenticated: authState.isAuthenticated,
+		userEmail: authState.userEmail,
+		userName: authState.userName
+	}), [
+		apiKey,
+		auth,
+		resolvedTheme,
+		resolvedLanguage,
+		customer,
+		translations,
+		authState
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReqdeskContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_query.QueryClientProvider, {
+			client: widgetQueryClient,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/react/useReqdesk.ts
+function useReqdesk() {
+	useReqdeskContext();
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	return {
+		submitTicket: (0, react.useCallback)(async (data) => {
+			setIsLoading(true);
+			setError(null);
+			try {
+				return await require_storage.submitTicket("_current", data);
+			} catch (err) {
+				const widgetError = err;
+				setError(widgetError);
+				throw widgetError;
+			} finally {
+				setIsLoading(false);
+			}
+		}, []),
+		trackTicket: (0, react.useCallback)(async (token) => {
+			setIsLoading(true);
+			setError(null);
+			try {
+				return await require_storage.trackTicket(token);
+			} catch (err) {
+				const widgetError = err;
+				setError(widgetError);
+				throw widgetError;
+			} finally {
+				setIsLoading(false);
+			}
+		}, []),
+		submitTrackingReply: (0, react.useCallback)(async (token, body) => {
+			setIsLoading(true);
+			setError(null);
+			try {
+				await require_storage.submitTrackingReply(token, body);
+			} catch (err) {
+				const widgetError = err;
+				setError(widgetError);
+				throw widgetError;
+			} finally {
+				setIsLoading(false);
+			}
+		}, []),
+		isLoading,
+		error
+	};
+}
+//#endregion
+//#region src/react/shadow-root.tsx
+function ShadowRoot({ children }) {
+	const hostRef = (0, react.useRef)(null);
+	const [mountPoint, setMountPoint] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		const host = hostRef.current;
+		if (!host || host.shadowRoot) return;
+		const shadow = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = require_storage.getWidgetStyles();
+		shadow.appendChild(style);
+		const mount = document.createElement("div");
+		mount.className = "rqd-root";
+		shadow.appendChild(mount);
+		setMountPoint(mount);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: hostRef,
+		children: mountPoint && (0, react_dom.createPortal)(children, mountPoint)
+	});
+}
+//#endregion
+//#region src/react/TicketForm.tsx
+const translations$5 = {
+	en: require_storage.en,
+	ar: require_storage.ar
+};
+function TicketForm({ mode = "inline", onTicketCreated, onError, className, style }) {
+	const ctx = useReqdeskContext();
+	const { submitTicket, isLoading } = useReqdesk();
+	const [success, setSuccess] = (0, react.useState)(null);
+	const [errors, setErrors] = (0, react.useState)({});
+	const t = (0, react.useCallback)((key) => {
+		if (ctx.translations?.[key]) return ctx.translations[key];
+		return (translations$5[ctx.language] ?? translations$5.en)[key] ?? key;
+	}, [ctx.language, ctx.translations]);
+	const handleSubmit = (0, react.useCallback)(async (e) => {
+		e.preventDefault();
+		const form = e.currentTarget;
+		const formData = new FormData(form);
+		const title = formData.get("title")?.trim() ?? "";
+		const email = formData.get("email")?.trim() ?? "";
+		const newErrors = {};
+		if (!title) newErrors.title = t("error.required");
+		else if (title.length < 5) newErrors.title = t("error.titleMin");
+		if (!email) newErrors.email = t("error.required");
+		else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = t("error.emailInvalid");
+		if (Object.keys(newErrors).length > 0) {
+			setErrors(newErrors);
+			return;
+		}
+		setErrors({});
+		const data = {
+			title,
+			description: formData.get("description")?.trim() || void 0,
+			email,
+			priority: formData.get("priority") ?? "medium"
+		};
+		try {
+			const result = await submitTicket(data);
+			if (result.trackingToken) require_storage.saveTrackingToken(ctx.apiKey, result.trackingToken);
+			setSuccess(result);
+			onTicketCreated?.(result);
+		} catch (err) {
+			onError?.(err);
+		}
+	}, [
+		submitTicket,
+		ctx.apiKey,
+		ctx.translations,
+		ctx.language,
+		onTicketCreated,
+		onError,
+		t
+	]);
+	const cssVars = require_storage.themeToVars(ctx.theme);
+	const content = success ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rqd-success",
+		style: {
+			textAlign: "center",
+			padding: "24px 0"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					fontSize: 48,
+					marginBottom: 12
+				},
+				children: "✅"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				style: {
+					margin: "0 0 8px",
+					fontSize: 18
+				},
+				children: t("success.title")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [t("success.ticketNumber"), success.ticketNumber] }),
+			success.trackingToken && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						fontSize: 13,
+						color: "var(--rqd-text-secondary)"
+					},
+					children: t("success.trackingHint")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rqd-token-box",
+					children: success.trackingToken
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "rqd-btn rqd-btn-secondary",
+					onClick: () => navigator.clipboard.writeText(success.trackingToken),
+					children: t("success.copyToken")
+				})
+			] })
+		]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "rqd-form",
+		onSubmit: handleSubmit,
+		noValidate: true,
+		children: [
+			/* @__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.title")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "rqd-input",
+						name: "title",
+						placeholder: t("form.titlePlaceholder"),
+						required: true
+					}),
+					errors.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-error-text",
+						children: errors.title
+					})
+				]
+			}),
+			/* @__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.description")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+					className: "rqd-textarea",
+					name: "description",
+					placeholder: t("form.descriptionPlaceholder")
+				})]
+			}),
+			/* @__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.email")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "rqd-input",
+						name: "email",
+						type: "email",
+						placeholder: t("form.emailPlaceholder"),
+						required: true
+					}),
+					errors.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-error-text",
+						children: errors.email
+					})
+				]
+			}),
+			/* @__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.priority")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					className: "rqd-select",
+					name: "priority",
+					defaultValue: "medium",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "low",
+							children: t("form.priorityLow")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "medium",
+							children: t("form.priorityMedium")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "high",
+							children: t("form.priorityHigh")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "urgent",
+							children: t("form.priorityUrgent")
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "rqd-btn rqd-btn-primary",
+				type: "submit",
+				disabled: isLoading,
+				children: isLoading ? t("form.submitting") : t("form.submit")
+			})
+		]
+	});
+	if (mode === "floating") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			...style,
+			cssText: cssVars
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-body",
+			children: content
+		})
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rqd-inline ${className ?? ""}`,
+		style: { cssText: cssVars },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-body",
+			children: content
+		})
+	}) });
+}
+//#endregion
+//#region src/react/SupportPortal.tsx
+function SupportPortal({ className }) {
+	const ctx = useReqdeskContext();
+	const { isLoading } = useReqdesk();
+	const cssVars = require_storage.themeToVars(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 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-body",
+			children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					textAlign: "center",
+					color: "var(--rqd-text-secondary)"
+				},
+				children: "Loading..."
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					textAlign: "center",
+					color: "var(--rqd-text-secondary)",
+					padding: "24px 0"
+				},
+				children: "Support Portal — coming in a future update."
+			})
+		})
+	}) });
+}
+//#endregion
+//#region src/react/views/SubmitTicketView.tsx
+const translations$4 = {
+	en: require_storage.en,
+	ar: require_storage.ar
+};
+const ALLOWED_MIME_TYPES = new Set([
+	"image/jpeg",
+	"image/png",
+	"image/gif",
+	"image/webp",
+	"application/pdf",
+	"text/plain",
+	"text/csv",
+	"application/zip",
+	"application/x-zip-compressed",
+	"application/msword",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	"application/vnd.ms-excel",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	"application/vnd.ms-powerpoint",
+	"application/vnd.openxmlformats-officedocument.presentationml.presentation"
+]);
+const BLOCKED_EXTENSIONS = new Set([
+	".exe",
+	".bat",
+	".cmd",
+	".sh",
+	".ps1",
+	".msi",
+	".dll",
+	".scr"
+]);
+const MAX_FILES = 5;
+const MAX_SIZE_MB = 10;
+function formatFileSize$1(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, userEmail }) {
+	const ctx = useReqdeskContext();
+	const fileInputRef = (0, react.useRef)(null);
+	const savedEmail = require_storage.loadWidgetEmail(ctx.apiKey);
+	const [errors, setErrors] = (0, react.useState)({});
+	const [files, setFiles] = (0, react.useState)([]);
+	const [isDragOver, setIsDragOver] = (0, react.useState)(false);
+	const [uploadProgress, setUploadProgress] = (0, react.useState)(null);
+	const [success, setSuccess] = (0, react.useState)(null);
+	const [rememberEmail, setRememberEmail] = (0, react.useState)(!!savedEmail);
+	const t = (0, react.useCallback)((key) => {
+		if (ctx.translations?.[key]) return ctx.translations[key];
+		return (translations$4[ctx.language] ?? translations$4.en)[key] ?? key;
+	}, [ctx.language, ctx.translations]);
+	const submitMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: async ({ data, validFiles }) => {
+			const result = await require_storage.submitTicket(projectId, data);
+			if (result.trackingToken) require_storage.saveTrackingToken(ctx.apiKey, result.trackingToken);
+			for (const queued of validFiles) {
+				setUploadProgress({
+					fileId: queued.id,
+					fileName: queued.file.name,
+					percent: 0
+				});
+				await require_storage.uploadAttachment(result.id, queued.file, (percent) => {
+					setUploadProgress({
+						fileId: queued.id,
+						fileName: queued.file.name,
+						percent
+					});
+				});
+			}
+			setUploadProgress(null);
+			return result;
+		},
+		onSuccess: (result) => {
+			setSuccess(result);
+			onSuccess?.(result);
+		},
+		onError: (err) => {
+			setUploadProgress(null);
+			onError?.(err);
+		}
+	});
+	function validateFile(file) {
+		const ext = "." + file.name.split(".").pop()?.toLowerCase();
+		if (BLOCKED_EXTENSIONS.has(ext)) return t("attach.invalidType");
+		if (!ALLOWED_MIME_TYPES.has(file.type) && !file.type.startsWith("application/vnd.openxmlformats-officedocument.")) return t("attach.invalidType");
+		if (file.size > MAX_SIZE_MB * 1024 * 1024) return t("attach.tooLarge");
+		return null;
+	}
+	function addFiles(newFiles) {
+		const toAdd = [];
+		for (const file of Array.from(newFiles)) {
+			if (files.length + toAdd.length >= MAX_FILES) break;
+			const error = validateFile(file);
+			toAdd.push({
+				file,
+				id: crypto.randomUUID(),
+				error: error ?? void 0
+			});
+		}
+		setFiles((prev) => [...prev, ...toAdd]);
+	}
+	function removeFile(id) {
+		setFiles((prev) => prev.filter((f) => f.id !== id));
+	}
+	function handleDragOver(e) {
+		e.preventDefault();
+		setIsDragOver(true);
+	}
+	function handleDragLeave(e) {
+		e.preventDefault();
+		setIsDragOver(false);
+	}
+	function handleDrop(e) {
+		e.preventDefault();
+		setIsDragOver(false);
+		if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
+	}
+	function handleSubmit(e) {
+		e.preventDefault();
+		const form = e.currentTarget;
+		const formData = new FormData(form);
+		const title = formData.get("title")?.trim() ?? "";
+		const email = formData.get("email")?.trim() ?? userEmail ?? "";
+		const newErrors = {};
+		if (!title) newErrors.title = t("error.required");
+		else if (title.length < 5) newErrors.title = t("error.titleMin");
+		if (!isAuthenticated && email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = t("error.emailInvalid");
+		if (Object.keys(newErrors).length > 0) {
+			setErrors(newErrors);
+			return;
+		}
+		setErrors({});
+		if (rememberEmail && email) require_storage.saveWidgetEmail(ctx.apiKey, email);
+		const validFiles = files.filter((f) => !f.error);
+		const data = {
+			title,
+			description: formData.get("description")?.trim() || void 0,
+			email,
+			priority: formData.get("priority") ?? "medium"
+		};
+		submitMutation.mutate({
+			data,
+			validFiles
+		});
+	}
+	if (success) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rqd-success",
+		style: {
+			textAlign: "center",
+			padding: "24px 0"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					fontSize: 48,
+					marginBottom: 12
+				},
+				children: "✅"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				style: {
+					margin: "0 0 8px",
+					fontSize: 18
+				},
+				children: t("success.title")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [t("success.ticketNumber"), success.ticketNumber] }),
+			success.trackingToken && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						fontSize: 13,
+						color: "var(--rqd-text-secondary)"
+					},
+					children: t("success.trackingHint")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rqd-token-box",
+					children: success.trackingToken
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "rqd-btn rqd-btn-secondary",
+					onClick: () => navigator.clipboard.writeText(success.trackingToken),
+					children: t("success.copyToken")
+				})
+			] })
+		]
+	});
+	if (submitMutation.isPending && uploadProgress) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			padding: "24px 0",
+			textAlign: "center"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					marginBottom: 12,
+					fontWeight: 500
+				},
+				children: t("attach.uploading")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-file-item",
+				style: { marginBottom: 8 },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rqd-file-item-info",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-file-item-name",
+						children: uploadProgress.fileName
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--rqd-text-secondary)"
+					},
+					children: [uploadProgress.percent, "%"]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rqd-progress",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rqd-progress-bar",
+					style: { width: `${uploadProgress.percent}%` }
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "rqd-form",
+		onSubmit: handleSubmit,
+		noValidate: true,
+		children: [
+			/* @__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.title")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "rqd-input",
+						name: "title",
+						placeholder: t("form.titlePlaceholder"),
+						required: true
+					}),
+					errors.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-error-text",
+						children: errors.title
+					})
+				]
+			}),
+			/* @__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.description")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+					className: "rqd-textarea",
+					name: "description",
+					placeholder: t("form.descriptionPlaceholder")
+				})]
+			}),
+			!isAuthenticated && /* @__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.email")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "rqd-input",
+						name: "email",
+						type: "email",
+						placeholder: t("form.emailPlaceholder"),
+						defaultValue: userEmail ?? savedEmail ?? ""
+					}),
+					errors.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-error-text",
+						children: errors.email
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "rqd-checkbox-label",
+						style: { marginTop: 6 },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							checked: rememberEmail,
+							onChange: (e) => setRememberEmail(e.target.checked)
+						}), t("mytickets.rememberMe")]
+					})
+				]
+			}),
+			/* @__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.priority")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					className: "rqd-select",
+					name: "priority",
+					defaultValue: "medium",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "low",
+							children: t("form.priorityLow")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "medium",
+							children: t("form.priorityMedium")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "high",
+							children: t("form.priorityHigh")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "urgent",
+							children: t("form.priorityUrgent")
+						})
+					]
+				})]
+			}),
+			/* @__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.attachment")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `rqd-dropzone${isDragOver ? " rqd-dropzone-active" : ""}`,
+						onDragOver: handleDragOver,
+						onDragLeave: handleDragLeave,
+						onDrop: handleDrop,
+						onClick: () => fileInputRef.current?.click(),
+						children: [isDragOver ? t("attach.dropzoneActive") : t("attach.dropzone"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: fileInputRef,
+							type: "file",
+							multiple: true,
+							style: { display: "none" },
+							onChange: (e) => {
+								if (e.target.files) addFiles(e.target.files);
+								e.target.value = "";
+							}
+						})]
+					}),
+					files.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-file-list",
+						children: files.map((f) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "rqd-file-item",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "rqd-file-item-info",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "rqd-file-item-name",
+									children: f.file.name
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "rqd-file-item-size",
+									children: [formatFileSize$1(f.file.size), f.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: {
+											color: "#e74c3c",
+											marginLeft: 6
+										},
+										children: f.error
+									})]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "rqd-file-remove",
+								onClick: () => removeFile(f.id),
+								type: "button",
+								children: "×"
+							})]
+						}, f.id))
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "rqd-btn rqd-btn-primary",
+				type: "submit",
+				disabled: submitMutation.isPending,
+				children: submitMutation.isPending ? t("form.submitting") : t("form.submit")
+			})
+		]
+	});
+}
+//#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,
+	ar: require_storage.ar
+};
+function MyTicketsView({ projectId, onSelectTicket, isAuthenticated, userEmail }) {
+	const ctx = useReqdeskContext();
+	const savedEmail = require_storage.loadWidgetEmail(ctx.apiKey);
+	const [email, setEmail] = (0, react.useState)(userEmail ?? savedEmail ?? "");
+	const [rememberMe, setRememberMe] = (0, react.useState)(!!savedEmail);
+	const [submittedEmail, setSubmittedEmail] = (0, react.useState)(isAuthenticated && userEmail ? userEmail : savedEmail);
+	const [tokenTickets, setTokenTickets] = (0, react.useState)([]);
+	const t = (0, react.useCallback)((key) => {
+		if (ctx.translations?.[key]) return ctx.translations[key];
+		return (translations$3[ctx.language] ?? translations$3.en)[key] ?? key;
+	}, [ctx.language, ctx.translations]);
+	const { data: widgetUser } = (0, _tanstack_react_query.useQuery)(widgetUserOptions(projectId, submittedEmail ?? ""));
+	const { data: emailTickets = [], isLoading } = (0, _tanstack_react_query.useQuery)(widgetMyTicketsOptions(projectId, widgetUser?.userId ?? ""));
+	(0, react.useEffect)(() => {
+		const tokens = require_storage.getTrackingTokens(ctx.apiKey);
+		if (tokens.length === 0) return;
+		Promise.allSettled(tokens.slice(0, 5).map((tk) => require_storage.trackTicket(tk))).then((results) => {
+			const tracked = [];
+			for (const r of results) if (r.status === "fulfilled") {
+				const t = r.value;
+				if (!emailTickets.some((et) => et.id === t.id)) tracked.push({
+					id: t.id,
+					ticketNumber: t.ticketNumber,
+					title: t.title,
+					status: t.status,
+					priority: t.priority,
+					createdAt: t.createdAt
+				});
+			}
+			setTokenTickets(tracked);
+		});
+	}, [ctx.apiKey, emailTickets]);
+	const allTickets = [...emailTickets, ...tokenTickets];
+	function handleSubmit(e) {
+		e.preventDefault();
+		const trimmed = email.trim();
+		if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) return;
+		if (rememberMe) require_storage.saveWidgetEmail(ctx.apiKey, trimmed);
+		setSubmittedEmail(trimmed);
+	}
+	function formatDate(iso) {
+		try {
+			return new Date(iso).toLocaleDateString();
+		} catch {
+			return iso;
+		}
+	}
+	if (!submittedEmail && !isAuthenticated) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rqd-email-form",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("mytickets.emailPrompt") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			onSubmit: handleSubmit,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rqd-form-group",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "rqd-input",
+						type: "email",
+						value: email,
+						onChange: (e) => setEmail(e.target.value),
+						placeholder: t("mytickets.emailPlaceholder"),
+						required: true
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "rqd-checkbox-label",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: rememberMe,
+						onChange: (e) => setRememberMe(e.target.checked)
+					}), t("mytickets.rememberMe")]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "rqd-btn rqd-btn-primary",
+					type: "submit",
+					style: { marginTop: 12 },
+					children: t("mytickets.lookup")
+				})
+			]
+		})]
+	});
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "rqd-loading",
+		children: t("mytickets.lookingUp")
+	});
+	if (allTickets.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rqd-placeholder",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: submittedEmail && !widgetUser ? t("mytickets.noAccount") : t("mytickets.noTickets") }), submittedEmail && !isAuthenticated && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "rqd-btn rqd-btn-secondary",
+			style: {
+				width: "auto",
+				padding: "8px 20px"
+			},
+			onClick: () => setSubmittedEmail(null),
+			children: t("tracker.back")
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "rqd-ticket-list",
+		children: allTickets.map((ticket) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rqd-ticket-card",
+			onClick: () => onSelectTicket(ticket.id),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-ticket-card-top",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-ticket-card-number",
+						children: ticket.ticketNumber
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-badge",
+						children: ticket.status
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "rqd-ticket-card-title",
+					children: ticket.title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "rqd-ticket-card-date",
+					children: formatDate(ticket.createdAt)
+				})
+			]
+		}, ticket.id))
+	});
+}
+//#endregion
+//#region src/react/views/TicketDetailView.tsx
+const translations$2 = {
+	en: require_storage.en,
+	ar: require_storage.ar
+};
+function formatDate(iso) {
+	try {
+		return new Date(iso).toLocaleString();
+	} catch {
+		return iso;
+	}
+}
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function TicketDetailView({ ticketId, onBack }) {
+	const ctx = useReqdeskContext();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const [replyBody, setReplyBody] = (0, react.useState)("");
+	const t = (0, react.useCallback)((key) => {
+		if (ctx.translations?.[key]) return ctx.translations[key];
+		return (translations$2[ctx.language] ?? translations$2.en)[key] ?? key;
+	}, [ctx.language, ctx.translations]);
+	const { data: ticket, isLoading, error } = (0, _tanstack_react_query.useQuery)(widgetTicketDetailOptions(ticketId));
+	const replyMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (body) => require_storage.submitReply(ticketId, body),
+		onMutate: async (body) => {
+			await queryClient.cancelQueries({ queryKey: ["widget-ticket", ticketId] });
+			const previous = queryClient.getQueryData(["widget-ticket", ticketId]);
+			if (previous) queryClient.setQueryData(["widget-ticket", ticketId], {
+				...previous,
+				replies: [...previous.replies, {
+					id: `optimistic-${Date.now()}`,
+					body,
+					authorName: ctx.userName ?? ctx.userEmail ?? "You",
+					isStaff: false,
+					createdAt: (/* @__PURE__ */ new Date()).toISOString()
+				}]
+			});
+			return { previous };
+		},
+		onSuccess: () => {
+			setReplyBody("");
+			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")
+	});
+	if (error || !ticket) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rqd-placeholder",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("error.generic") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "rqd-btn rqd-btn-secondary",
+			style: {
+				width: "auto",
+				padding: "8px 20px"
+			},
+			onClick: onBack,
+			children: t("tracker.back")
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rqd-ticket-header",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: ticket.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-ticket-header-meta",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-ticket-card-number",
+						children: ticket.ticketNumber
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-badge",
+						children: ticket.status
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-badge",
+						style: {
+							background: "var(--rqd-bg-secondary)",
+							color: "var(--rqd-text-secondary)"
+						},
+						children: ticket.priority
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-ticket-card-date",
+						children: formatDate(ticket.createdAt)
+					})
+				]
+			})]
+		}),
+		ticket.description && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-section-title",
+			children: t("detail.description")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-ticket-desc",
+			children: ticket.description
+		})] }),
+		ticket.attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-section-title",
+			children: t("detail.attachments")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-attachment-list",
+			children: ticket.attachments.map((a) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-attachment-item",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-file-item-info",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-file-item-name",
+						children: a.fileName
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rqd-file-item-size",
+						children: formatFileSize(a.fileSize)
+					})]
+				}), a.downloadUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href: a.downloadUrl,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children: t("attach.download")
+				})]
+			}, a.id))
+		})] }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-section-title",
+			children: t("detail.replies")
+		}),
+		ticket.replies.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				color: "var(--rqd-text-secondary)",
+				fontSize: 13,
+				margin: "0 0 12px"
+			},
+			children: t("detail.noReplies")
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: ticket.replies.map((reply) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rqd-reply",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-reply-header",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: reply.isStaff ? "rqd-reply-staff" : "",
+					children: reply.isStaff ? `${reply.authorName} \u00b7 ${t("detail.staff")}` : reply.authorName
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatDate(reply.createdAt) })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rqd-reply-body",
+				children: reply.body
+			})]
+		}, reply.id)) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rqd-reply-compose",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+				className: "rqd-textarea",
+				value: replyBody,
+				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")
+			})]
+		})
+	] });
+}
+//#endregion
+//#region src/react/views/TrackTicketView.tsx
+const translations$1 = {
+	en: require_storage.en,
+	ar: require_storage.ar
+};
+function TrackTicketView({ onTrackSuccess }) {
+	const ctx = useReqdeskContext();
+	const [token, setToken] = (0, react.useState)("");
+	const savedTokens = require_storage.getTrackingTokens(ctx.apiKey);
+	const t = (0, react.useCallback)((key) => {
+		if (ctx.translations?.[key]) return ctx.translations[key];
+		return (translations$1[ctx.language] ?? translations$1.en)[key] ?? key;
+	}, [ctx.language, ctx.translations]);
+	const trackMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (trackToken) => require_storage.trackTicket(trackToken.trim()),
+		onSuccess: (result) => onTrackSuccess(result.id)
+	});
+	function handleSubmit(e) {
+		e.preventDefault();
+		if (token.trim()) trackMutation.mutate(token);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		onSubmit: handleSubmit,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rqd-form-group",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				className: "rqd-input",
+				value: token,
+				onChange: (e) => setToken(e.target.value),
+				placeholder: t("track.tokenPlaceholder"),
+				required: true
+			}), trackMutation.isError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rqd-error-text",
+				children: t("track.invalidToken")
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "rqd-btn rqd-btn-primary",
+			type: "submit",
+			disabled: trackMutation.isPending || !token.trim(),
+			children: trackMutation.isPending ? t("track.tracking") : t("track.submit")
+		})]
+	}), savedTokens.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { marginTop: 20 },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-section-title",
+			children: t("track.recentTickets")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rqd-ticket-list",
+			children: savedTokens.slice(0, 5).map((tk) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "rqd-ticket-card",
+				style: {
+					border: "none",
+					textAlign: "start",
+					width: "100%"
+				},
+				onClick: () => trackMutation.mutate(tk),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "rqd-ticket-card-number",
+					style: {
+						fontFamily: "monospace",
+						fontSize: 12
+					},
+					children: [tk.slice(0, 20), "..."]
+				})
+			}, tk))
+		})]
+	})] });
+}
+//#endregion
+//#region src/react/FloatingWidget.tsx
+const translations = {
+	en: require_storage.en,
+	ar: require_storage.ar
+};
+const ICONS = {
+	chat: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z",
+	close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+	newTicket: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
+	tickets: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z",
+	track: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",
+	kb: "M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z",
+	back: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
+	backRtl: "M4 11h12.17l-5.59-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4v-2z",
+	settings: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z"
+};
+function SvgIcon({ path, size = 20 }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		style: {
+			display: "block",
+			flexShrink: 0
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: path })
+	});
+}
+function FloatingWidget({ position = "bottom-right", contained = false, onTicketCreated, onError }) {
+	const ctx = useReqdeskContext();
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [view, setView] = (0, react.useState)("home");
+	const [selectedTicketId, setSelectedTicketId] = (0, react.useState)(null);
+	const [emailCleared, setEmailCleared] = (0, react.useState)(false);
+	const savedPrefs = require_storage.loadWidgetConfig(ctx.apiKey);
+	const [userLang, setUserLang] = (0, react.useState)(savedPrefs?.language ?? null);
+	const [userThemeMode, setUserThemeMode] = (0, react.useState)(savedPrefs?.theme?.mode ?? null);
+	const [userColor, setUserColor] = (0, react.useState)(savedPrefs?.theme?.primaryColor ?? null);
+	const activeLang = userLang ?? ctx.language ?? "en";
+	const activeThemeMode = userThemeMode ?? ctx.theme?.mode ?? "light";
+	const activeColor = userColor ?? ctx.theme?.primaryColor ?? "#42b983";
+	const activeTheme = {
+		...ctx.theme,
+		mode: activeThemeMode,
+		primaryColor: activeColor
+	};
+	const t = (0, react.useCallback)((key) => {
+		if (ctx.translations?.[key]) return ctx.translations[key];
+		return (translations[activeLang] ?? translations.en)[key] ?? key;
+	}, [activeLang, ctx.translations]);
+	const isRtl = activeLang === "ar";
+	const cssVars = require_storage.themeToVars(activeTheme);
+	const posClass = `rqd-${position}`;
+	const containedClass = contained ? " rqd-contained" : "";
+	const brandName = ctx.theme?.brandName;
+	const brandLogo = ctx.theme?.logo;
+	const hideBranding = ctx.theme?.hideBranding === true;
+	const projectId = "_current";
+	function toggleOpen() {
+		setIsOpen((prev) => !prev);
+		if (!isOpen) {
+			setView("home");
+			setSelectedTicketId(null);
+		}
+	}
+	function goHome() {
+		setView("home");
+		setSelectedTicketId(null);
+		setEmailCleared(false);
+	}
+	function handleLangChange(lang) {
+		setUserLang(lang);
+		require_storage.saveWidgetConfig(ctx.apiKey, { language: lang });
+	}
+	function handleThemeChange(mode) {
+		setUserThemeMode(mode);
+		require_storage.saveWidgetConfig(ctx.apiKey, { theme: {
+			...ctx.theme,
+			mode,
+			primaryColor: activeColor
+		} });
+	}
+	function handleColorChange(color) {
+		setUserColor(color);
+		require_storage.saveWidgetConfig(ctx.apiKey, { theme: {
+			...ctx.theme,
+			mode: activeThemeMode,
+			primaryColor: color
+		} });
+	}
+	const COLOR_PRESETS = [
+		{
+			color: "#42b983",
+			label: "Green"
+		},
+		{
+			color: "#3b82f6",
+			label: "Blue"
+		},
+		{
+			color: "#8b5cf6",
+			label: "Purple"
+		},
+		{
+			color: "#f59e0b",
+			label: "Orange"
+		},
+		{
+			color: "#ef4444",
+			label: "Red"
+		}
+	];
+	function handleClearEmail() {
+		require_storage.clearWidgetEmail(ctx.apiKey);
+		setEmailCleared(true);
+		setTimeout(() => setEmailCleared(false), 2e3);
+	}
+	function openTicketDetail(ticketId) {
+		setSelectedTicketId(ticketId);
+		setView("ticket-detail");
+	}
+	const menuItems = [
+		{
+			key: "new-ticket",
+			icon: ICONS.newTicket,
+			label: t("menu.newTicket"),
+			desc: t("menu.newTicketDesc")
+		},
+		{
+			key: "my-tickets",
+			icon: ICONS.tickets,
+			label: t("menu.myTickets"),
+			desc: t("menu.myTicketsDesc")
+		},
+		{
+			key: "track",
+			icon: ICONS.track,
+			label: t("menu.trackTicket"),
+			desc: t("menu.trackTicketDesc")
+		},
+		{
+			key: "kb",
+			icon: ICONS.kb,
+			label: t("menu.knowledgeBase"),
+			desc: t("menu.knowledgeBaseDesc")
+		},
+		{
+			key: "preferences",
+			icon: ICONS.settings,
+			label: t("menu.preferences"),
+			desc: t("menu.preferencesDesc")
+		}
+	];
+	function renderViewContent() {
+		switch (view) {
+			case "home": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rqd-menu",
+				children: menuItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					className: "rqd-menu-item",
+					onClick: () => setView(item.key),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-menu-icon",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgIcon, {
+							path: item.icon,
+							size: 22
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "rqd-menu-text",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rqd-menu-label",
+							children: item.label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rqd-menu-desc",
+							children: item.desc
+						})]
+					})]
+				}, item.key))
+			});
+			case "new-ticket": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmitTicketView, {
+				projectId,
+				onSuccess: (result) => {
+					onTicketCreated?.(result);
+				},
+				onError,
+				isAuthenticated: ctx.isAuthenticated,
+				userEmail: ctx.userEmail
+			});
+			case "my-tickets": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MyTicketsView, {
+				projectId,
+				onSelectTicket: openTicketDetail,
+				isAuthenticated: ctx.isAuthenticated,
+				userEmail: ctx.userEmail
+			});
+			case "ticket-detail":
+				if (!selectedTicketId) return null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TicketDetailView, {
+					ticketId: selectedTicketId,
+					onBack: () => setView("my-tickets")
+				});
+			case "track": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrackTicketView, { onTrackSuccess: openTicketDetail });
+			case "kb": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-placeholder",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgIcon, {
+					path: ICONS.kb,
+					size: 40
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("menu.kbPlaceholder") })]
+			});
+			case "preferences": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "rqd-prefs",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "rqd-prefs-group",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rqd-prefs-label",
+							children: t("prefs.language")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "rqd-prefs-options",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: `rqd-prefs-option${activeLang === "en" ? " rqd-active" : ""}`,
+								onClick: () => handleLangChange("en"),
+								children: "English"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: `rqd-prefs-option${activeLang === "ar" ? " rqd-active" : ""}`,
+								onClick: () => handleLangChange("ar"),
+								children: "العربية"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "rqd-prefs-group",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rqd-prefs-label",
+							children: t("prefs.theme")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "rqd-prefs-options",
+							children: [
+								"light",
+								"dark",
+								"auto"
+							].map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: `rqd-prefs-option${activeThemeMode === mode ? " rqd-active" : ""}`,
+								onClick: () => handleThemeChange(mode),
+								children: t(`prefs.${mode}`)
+							}, mode))
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "rqd-prefs-group",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rqd-prefs-label",
+							children: t("prefs.accentColor")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "rqd-color-presets",
+							children: COLOR_PRESETS.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: `rqd-color-preset${activeColor === preset.color ? " rqd-active" : ""}`,
+								style: {
+									background: preset.color,
+									color: preset.color
+								},
+								onClick: () => handleColorChange(preset.color),
+								"aria-label": preset.label,
+								title: preset.label
+							}, preset.color))
+						})]
+					}),
+					require_storage.loadWidgetEmail(ctx.apiKey) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rqd-prefs-group",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "rqd-btn rqd-btn-secondary",
+							onClick: handleClearEmail,
+							style: {
+								width: "auto",
+								padding: "8px 16px"
+							},
+							children: emailCleared ? t("prefs.emailCleared") : t("prefs.clearEmail")
+						})
+					})
+				]
+			});
+		}
+	}
+	const viewTitle = {
+		home: brandName ?? t("widget.title"),
+		"new-ticket": t("widget.newTicket"),
+		"my-tickets": t("menu.myTickets"),
+		"ticket-detail": t("menu.myTickets"),
+		track: t("widget.trackTicket"),
+		kb: t("menu.knowledgeBase"),
+		preferences: t("prefs.title")
+	};
+	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 },
+		...isRtl ? { dir: "rtl" } : {},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: `rqd-fab ${posClass}${containedClass}`,
+			onClick: toggleOpen,
+			"aria-label": isOpen ? t("widget.close") : t("widget.title"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgIcon, {
+				path: isOpen ? ICONS.close : ICONS.chat,
+				size: 24
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `rqd-panel ${posClass}${containedClass}${isOpen ? "" : " rqd-hidden"}`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-header",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "rqd-header-brand",
+						children: [
+							canGoBack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "rqd-header-close",
+								onClick: () => goBackTarget === "home" ? goHome() : setView(goBackTarget),
+								"aria-label": t("tracker.back"),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgIcon, {
+									path: isRtl ? ICONS.backRtl : ICONS.back,
+									size: 18
+								})
+							}),
+							view === "home" && brandLogo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: brandLogo,
+								alt: "",
+								className: "rqd-header-logo"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "rqd-header-title",
+								children: viewTitle[view]
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4
+						},
+						children: [(ctx.auth || isAuthConfigured()) && view === "home" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "rqd-auth-btn",
+							onClick: () => ctx.isAuthenticated ? logout() : login(),
+							"aria-label": ctx.isAuthenticated ? t("auth.logout") : t("auth.login"),
+							children: ctx.isAuthenticated ? ctx.userName ?? t("auth.logout") : t("auth.login")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "rqd-header-close",
+							onClick: toggleOpen,
+							"aria-label": t("widget.close"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgIcon, {
+								path: ICONS.close,
+								size: 18
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rqd-body",
+					children: renderViewContent()
+				}),
+				!hideBranding && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "rqd-footer",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("branding.poweredBy") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: "https://reqdesk.com",
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: "Reqdesk"
+					})]
+				})
+			]
+		})]
+	}) });
+}
+//#endregion
+exports.FloatingWidget = FloatingWidget;
+exports.ReqdeskProvider = ReqdeskProvider;
+exports.ShadowRoot = ShadowRoot;
+exports.SupportPortal = SupportPortal;
+exports.TicketForm = TicketForm;
+exports.getWidgetDefaults = require_storage.loadWidgetConfig;
+exports.useReqdesk = useReqdesk;