reflet-sdk 0.1.5 → 0.2.0

package/dist/react.js

@@ -1,355 +1,1263 @@
-import { Reflet } from './chunk-GD7FQQBT.js';
-export { Reflet } from './chunk-GD7FQQBT.js';
-import { createContext, useState, useMemo, useEffect, useContext, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var RefletContext = createContext(null);
-function RefletProvider({
-  publicKey,
-  baseUrl,
-  user: initialUser,
-  userToken,
-  children
-}) {
-  const [user, setUser] = useState(initialUser);
-  const [isReady, setIsReady] = useState(false);
-  const client = useMemo(() => {
-    const config = {
-      publicKey,
-      baseUrl,
-      user,
-      userToken
-    };
-    return new Reflet(config);
-  }, [publicKey, baseUrl, user, userToken]);
-  useEffect(() => {
-    if (userToken) {
-      client.setUserToken(userToken);
-    } else {
-      client.setUser(user);
-    }
-  }, [client, user, userToken]);
-  useEffect(() => {
-    setIsReady(true);
-  }, []);
-  const value = useMemo(
-    () => ({
-      client,
-      isReady,
-      user,
-      setUser
-    }),
-    [client, isReady, user]
-  );
-  return /* @__PURE__ */ jsx(RefletContext.Provider, { value, children });
-}
-function useRefletContext() {
-  const context = useContext(RefletContext);
-  if (!context) {
-    throw new Error("useRefletContext must be used within a RefletProvider");
+import { t as Reflet } from "./client-BYuSKJw5.js";
+import { i as useRefletContext, n as RefletProvider, r as useRefletClient, t as RefletContext } from "./react-context-DZw_HHjj.js";
+import { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react-changelog-widget.tsx
+/**
+* React component that wraps the Reflet Changelog Widget.
+*
+* Dynamically loads and initializes a RefletChangelogWidget instance.
+*
+* @example
+* ```tsx
+* import { ChangelogWidget } from 'reflet-sdk/react';
+*
+* export function MyApp() {
+*   return <ChangelogWidget publicKey="fb_pub_xxx" mode="card" theme="auto" />;
+* }
+* ```
+*/
+function ChangelogWidget({ publicKey, mode = "card", position = "bottom-right", theme = "light", primaryColor, maxEntries, triggerSelector, autoOpenForNew, locale, onOpen, onClose, onEntryClick }) {
+	const widgetRef = useRef(null);
+	const initWidget = useCallback(async () => {
+		const WidgetClass = window.RefletChangelogWidget;
+		if (WidgetClass) {
+			const instance = new WidgetClass({
+				autoOpenForNew,
+				locale,
+				maxEntries,
+				mode,
+				onClose,
+				onEntryClick,
+				onOpen,
+				position,
+				primaryColor,
+				publicKey,
+				theme,
+				triggerSelector
+			});
+			widgetRef.current = instance;
+			await instance.init();
+			return;
+		}
+		if (!document.querySelector("script[src*=\"reflet-changelog\"]")) {
+			const script = document.createElement("script");
+			script.src = "https://cdn.reflet.app/widget/reflet-changelog.v1.js";
+			script.async = true;
+			script.onload = () => {
+				const LoadedClass = window.RefletChangelogWidget;
+				if (LoadedClass) {
+					const instance = new LoadedClass({
+						autoOpenForNew,
+						locale,
+						maxEntries,
+						mode,
+						onClose,
+						onEntryClick,
+						onOpen,
+						position,
+						primaryColor,
+						publicKey,
+						theme,
+						triggerSelector
+					});
+					widgetRef.current = instance;
+					instance.init();
+				}
+			};
+			document.head.appendChild(script);
+		}
+	}, [
+		publicKey,
+		mode,
+		position,
+		theme,
+		primaryColor,
+		maxEntries,
+		triggerSelector,
+		autoOpenForNew,
+		locale,
+		onOpen,
+		onClose,
+		onEntryClick
+	]);
+	useEffect(() => {
+		initWidget();
+		return () => {
+			if (widgetRef.current) {
+				widgetRef.current.destroy();
+				widgetRef.current = null;
+			}
+		};
+	}, [initWidget]);
+	return null;
+}
+//#endregion
+//#region src/react-feedback-dialog-types.ts
+const DEFAULT_LABELS = {
+	cancel: "Cancel",
+	categoryBug: "Bug",
+	categoryFeature: "Feature",
+	categoryQuestion: "Question",
+	descriptionPlaceholder: "Tell us more... (optional)",
+	emailLabel: "Email",
+	emailPlaceholder: "your@email.com (optional)",
+	required: "Required",
+	submit: "Send Feedback",
+	successMessage: "Your feedback has been received. We appreciate your input.",
+	successTitle: "Thank you!",
+	title: "Send Feedback",
+	titlePlaceholder: "What's on your mind?"
+};
+const CATEGORY_ICONS = {
+	bug: "🐛",
+	feature: "✨",
+	question: "💬"
+};
+const AUTO_CLOSE_DELAY = 2500;
+//#endregion
+//#region src/react-feedback-styles-parts.ts
+function getFeedbackChromeCSS() {
+	return `
+/* ===== Footer ===== */
+.reflet-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.reflet-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--reflet-radius-sm);
+  font-family: var(--reflet-font);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 150ms;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  line-height: 1;
+}
+
+.reflet-btn-primary {
+  background: var(--reflet-primary);
+  color: #ffffff;
+}
+
+.reflet-btn-primary:hover:not(:disabled) {
+  background: var(--reflet-primary-hover);
+}
+
+.reflet-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.reflet-btn-secondary {
+  background: transparent;
+  color: var(--reflet-text-secondary);
+}
+
+.reflet-btn-secondary:hover {
+  background: var(--reflet-bg-secondary);
+  color: var(--reflet-text);
+}
+
+/* ===== Spinner ===== */
+.reflet-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: reflet-spin 600ms linear infinite;
+}
+
+/* ===== Success State ===== */
+.reflet-success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  gap: 16px;
+}
+
+.reflet-success-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--reflet-success) 12%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reflet-success-icon svg {
+  width: 28px;
+  height: 28px;
+  color: var(--reflet-success);
+}
+
+.reflet-success-icon svg path {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 24;
+  animation: reflet-checkmark 400ms ease-out 100ms forwards;
+}
+
+.reflet-success-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--reflet-text);
+  margin: 0;
+}
+
+.reflet-success-text {
+  font-size: 14px;
+  color: var(--reflet-text-secondary);
+  margin: 0;
+}
+
+/* ===== Error State ===== */
+.reflet-error-msg {
+  font-size: 13px;
+  color: var(--reflet-error);
+  margin: 0;
+}
+
+/* ===== Trigger Button ===== */
+.reflet-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  background: var(--reflet-primary);
+  color: #ffffff;
+  border: none;
+  border-radius: var(--reflet-radius-sm);
+  font-family: var(--reflet-font);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms;
+  line-height: 1;
+}
+
+.reflet-trigger:hover {
+  background: var(--reflet-primary-hover);
+}
+
+.reflet-trigger svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ===== Honeypot ===== */
+.reflet-hp {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
+}
+
+/* ===== Powered by ===== */
+.reflet-powered {
+  text-align: center;
+  padding: 0 24px 16px;
+  font-size: 11px;
+  color: var(--reflet-text-tertiary);
+}
+
+.reflet-powered a {
+  color: var(--reflet-text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.reflet-powered a:hover {
+  color: var(--reflet-primary);
+}
+
+/* ===== Mobile handle ===== */
+@media (max-width: 640px) {
+  .reflet-header::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--reflet-border);
+  }
+
+  .reflet-header {
+    position: relative;
+    padding-top: 24px;
   }
-  return context;
 }
-function useRefletClient() {
-  const { client } = useRefletContext();
-  return client;
+`;
 }
-function useOrganizationConfig() {
-  const client = useRefletClient();
-  const [data, setData] = useState();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetch = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await client.getConfig();
-      setData(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch organization config")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-  return { data, isLoading, error, refetch: fetch };
+//#endregion
+//#region src/react-feedback-styles.ts
+/**
+* Self-contained styles for the FeedbackButton and FeedbackDialog components.
+* Uses CSS custom properties for theming. Injected via <style> tag with a unique ID
+* to avoid duplication. All selectors are scoped under `[data-reflet-feedback]`.
+*/
+const STYLE_ID = "reflet-feedback-styles";
+function injectFeedbackStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = getFeedbackCSS();
+	document.head.appendChild(style);
 }
-function useFeedbackList(options = {}) {
-  const client = useRefletClient();
-  const { enabled = true, ...params } = options;
-  const { statusId, status, search, sortBy, limit, offset } = params;
-  const [data, setData] = useState();
-  const [isLoading, setIsLoading] = useState(enabled);
-  const [error, setError] = useState(null);
-  const fetch = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await client.list({
-        statusId,
-        status,
-        search,
-        sortBy,
-        limit,
-        offset
-      });
-      setData(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch feedback")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client, statusId, status, search, sortBy, limit, offset]);
-  useEffect(() => {
-    if (enabled) {
-      fetch();
-    }
-  }, [fetch, enabled]);
-  return { data, isLoading, error, refetch: fetch };
+function getFeedbackCSS() {
+	return `
+[data-reflet-feedback] {
+  --reflet-primary: #6366f1;
+  --reflet-primary-hover: #4f46e5;
+  --reflet-bg: #ffffff;
+  --reflet-bg-secondary: #f9fafb;
+  --reflet-text: #111827;
+  --reflet-text-secondary: #6b7280;
+  --reflet-text-tertiary: #9ca3af;
+  --reflet-border: #e5e7eb;
+  --reflet-radius: 12px;
+  --reflet-radius-sm: 8px;
+  --reflet-shadow: 0 20px 60px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
+  --reflet-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --reflet-success: #22c55e;
+  --reflet-error: #ef4444;
 }
-function useFeedback(feedbackId) {
-  const client = useRefletClient();
-  const [data, setData] = useState();
-  const [isLoading, setIsLoading] = useState(!!feedbackId);
-  const [error, setError] = useState(null);
-  const fetch = useCallback(async () => {
-    if (!feedbackId) {
-      setData(void 0);
-      setIsLoading(false);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await client.get(feedbackId);
-      setData(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch feedback")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client, feedbackId]);
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-  return { data, isLoading, error, refetch: fetch };
+
+@media (prefers-color-scheme: dark) {
+  [data-reflet-feedback][data-theme="auto"] {
+    --reflet-bg: #1f2937;
+    --reflet-bg-secondary: #111827;
+    --reflet-text: #f9fafb;
+    --reflet-text-secondary: #9ca3af;
+    --reflet-text-tertiary: #6b7280;
+    --reflet-border: #374151;
+    --reflet-shadow: 0 20px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+  }
 }
-function useComments(feedbackId, sortBy = "oldest") {
-  const client = useRefletClient();
-  const [data, setData] = useState();
-  const [isLoading, setIsLoading] = useState(!!feedbackId);
-  const [error, setError] = useState(null);
-  const fetch = useCallback(async () => {
-    if (!feedbackId) {
-      setData(void 0);
-      setIsLoading(false);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await client.getComments(feedbackId, sortBy);
-      setData(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch comments")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client, feedbackId, sortBy]);
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-  return { data, isLoading, error, refetch: fetch };
+
+[data-reflet-feedback][data-theme="dark"] {
+  --reflet-bg: #1f2937;
+  --reflet-bg-secondary: #111827;
+  --reflet-text: #f9fafb;
+  --reflet-text-secondary: #9ca3af;
+  --reflet-text-tertiary: #6b7280;
+  --reflet-border: #374151;
+  --reflet-shadow: 0 20px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
 }
-function useRoadmap() {
-  const client = useRefletClient();
-  const [data, setData] = useState();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetch = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await client.getRoadmap();
-      setData(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch roadmap")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-  return { data, isLoading, error, refetch: fetch };
+
+/* ===== Overlay ===== */
+.reflet-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 99998;
+  animation: reflet-fade-in 150ms ease-out;
 }
-function useChangelog(limit) {
-  const client = useRefletClient();
-  const [data, setData] = useState();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetch = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await client.getChangelog(limit);
-      setData(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch changelog")
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client, limit]);
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-  return { data, isLoading, error, refetch: fetch };
+
+@keyframes reflet-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes reflet-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
 }
+
+@keyframes reflet-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes reflet-slide-down {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+@keyframes reflet-scale-in {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+@keyframes reflet-scale-out {
+  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  to { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+}
+
+@keyframes reflet-checkmark {
+  0% { stroke-dashoffset: 24; }
+  100% { stroke-dashoffset: 0; }
+}
+
+@keyframes reflet-spin {
+  to { transform: rotate(360deg); }
+}
+
+.reflet-overlay[data-closing="true"] {
+  animation: reflet-fade-out 150ms ease-in forwards;
+}
+
+/* ===== Dialog (Desktop) ===== */
+.reflet-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+  background: var(--reflet-bg);
+  border-radius: var(--reflet-radius);
+  box-shadow: var(--reflet-shadow);
+  width: 480px;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 64px);
+  overflow: hidden;
+  font-family: var(--reflet-font);
+  color: var(--reflet-text);
+  animation: reflet-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reflet-dialog[data-closing="true"] {
+  animation: reflet-scale-out 150ms ease-in forwards;
+}
+
+/* ===== Sheet (Mobile) ===== */
+@media (max-width: 640px) {
+  .reflet-dialog {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: none;
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--reflet-radius) var(--reflet-radius) 0 0;
+    max-height: 90vh;
+    animation: reflet-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .reflet-dialog[data-closing="true"] {
+    animation: reflet-slide-down 200ms ease-in forwards;
+  }
+}
+
+/* ===== Header ===== */
+.reflet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 0;
+}
+
+.reflet-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--reflet-text);
+  line-height: 1.3;
+}
+
+.reflet-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  color: var(--reflet-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 150ms, color 150ms;
+}
+
+.reflet-close:hover {
+  background: var(--reflet-bg-secondary);
+  color: var(--reflet-text);
+}
+
+.reflet-close svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ===== Form ===== */
+.reflet-form {
+  padding: 20px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.reflet-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.reflet-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--reflet-text-secondary);
+}
+
+.reflet-input,
+.reflet-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--reflet-border);
+  border-radius: var(--reflet-radius-sm);
+  background: var(--reflet-bg);
+  color: var(--reflet-text);
+  font-family: var(--reflet-font);
+  font-size: 14px;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color 150ms, box-shadow 150ms;
+  box-sizing: border-box;
+}
+
+.reflet-input::placeholder,
+.reflet-textarea::placeholder {
+  color: var(--reflet-text-tertiary);
+}
+
+.reflet-input:focus,
+.reflet-textarea:focus {
+  border-color: var(--reflet-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reflet-primary) 15%, transparent);
+}
+
+.reflet-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* ===== Category Selector ===== */
+.reflet-categories {
+  display: flex;
+  gap: 8px;
+}
+
+.reflet-category {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--reflet-border);
+  border-radius: var(--reflet-radius-sm);
+  background: var(--reflet-bg);
+  color: var(--reflet-text-secondary);
+  font-family: var(--reflet-font);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: center;
+  transition: all 150ms;
+}
+
+.reflet-category:hover {
+  border-color: var(--reflet-primary);
+  color: var(--reflet-text);
+}
+
+.reflet-category[data-selected="true"] {
+  border-color: var(--reflet-primary);
+  background: color-mix(in srgb, var(--reflet-primary) 8%, transparent);
+  color: var(--reflet-primary);
+}
+${getFeedbackChromeCSS()}
+`;
+}
+//#endregion
+//#region src/react-feedback-dialog-hook.ts
+function useFeedbackDialog({ open, onOpenChange, publicKey: publicKeyProp, baseUrl, user: userProp, userToken: userTokenProp, primaryColor, defaultCategory = "feature", labels: labelsProp, onSubmit, onOpen, onClose }) {
+	const context = useContext(RefletContext);
+	const publicKey = publicKeyProp ?? context?.publicKey;
+	const user = userProp ?? context?.user;
+	const userToken = userTokenProp ?? context?.userToken;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const [title, setTitle] = useState("");
+	const [description, setDescription] = useState("");
+	const [email, setEmail] = useState("");
+	const [category, setCategory] = useState(defaultCategory);
+	const [honeypot, setHoneypot] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isSuccess, setIsSuccess] = useState(false);
+	const [error, setError] = useState(null);
+	const [isClosing, setIsClosing] = useState(false);
+	const titleInputRef = useRef(null);
+	const dialogRef = useRef(null);
+	const previousActiveElement = useRef(null);
+	const isAnonymous = !(user || userToken);
+	useEffect(() => {
+		injectFeedbackStyles();
+	}, []);
+	useEffect(() => {
+		if (!(primaryColor && dialogRef.current)) return;
+		const el = dialogRef.current.closest("[data-reflet-feedback]");
+		if (el instanceof HTMLElement) el.style.setProperty("--reflet-primary", primaryColor);
+	}, [primaryColor]);
+	useEffect(() => {
+		if (open) {
+			previousActiveElement.current = document.activeElement;
+			onOpen?.();
+			requestAnimationFrame(() => {
+				titleInputRef.current?.focus();
+			});
+		}
+	}, [open, onOpen]);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				handleClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	});
+	useEffect(() => {
+		if (!open) return;
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	}, [open]);
+	const resetForm = useCallback(() => {
+		setTitle("");
+		setDescription("");
+		setEmail("");
+		setCategory(defaultCategory);
+		setHoneypot("");
+		setError(null);
+		setIsSuccess(false);
+		setIsSubmitting(false);
+	}, [defaultCategory]);
+	const handleClose = useCallback(() => {
+		setIsClosing(true);
+		setTimeout(() => {
+			setIsClosing(false);
+			onOpenChange(false);
+			onClose?.();
+			resetForm();
+			if (previousActiveElement.current instanceof HTMLElement) previousActiveElement.current.focus();
+		}, 200);
+	}, [
+		onOpenChange,
+		onClose,
+		resetForm
+	]);
+	return {
+		category,
+		description,
+		dialogRef,
+		email,
+		error,
+		handleClose,
+		handleSubmit: useCallback(async (e) => {
+			e.preventDefault();
+			if (honeypot) {
+				setIsSuccess(true);
+				return;
+			}
+			if (!publicKey) {
+				setError("Missing publicKey. Provide it as a prop or via RefletProvider.");
+				return;
+			}
+			if (!title.trim()) {
+				setError(labels.required);
+				return;
+			}
+			setIsSubmitting(true);
+			setError(null);
+			try {
+				const client = new Reflet({
+					baseUrl,
+					publicKey,
+					user,
+					userToken
+				});
+				const categoryPrefix = `[${category.charAt(0).toUpperCase() + category.slice(1)}] `;
+				const fullDescription = description.trim() ? description.trim() : "No additional details provided.";
+				const result = await client.create({
+					description: `${categoryPrefix}${fullDescription}${isAnonymous && email ? `\n\n---\nContact: ${email}` : ""}`,
+					title: title.trim()
+				});
+				setIsSuccess(true);
+				onSubmit?.(result);
+				setTimeout(() => {
+					handleClose();
+				}, AUTO_CLOSE_DELAY);
+			} catch (err) {
+				const message = err instanceof Error ? err.message : "Something went wrong. Please try again.";
+				setError(message);
+			} finally {
+				setIsSubmitting(false);
+			}
+		}, [
+			honeypot,
+			publicKey,
+			title,
+			description,
+			email,
+			category,
+			baseUrl,
+			user,
+			userToken,
+			isAnonymous,
+			labels.required,
+			onSubmit,
+			handleClose
+		]),
+		handleTrapFocus: useCallback((e) => {
+			if (e.key !== "Tab" || !dialogRef.current) return;
+			const focusable = dialogRef.current.querySelectorAll("button, input, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (!(first && last)) return;
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		}, []),
+		honeypot,
+		isAnonymous,
+		isClosing,
+		isSubmitting,
+		isSuccess,
+		labels,
+		setCategory,
+		setDescription,
+		setEmail,
+		setError,
+		setHoneypot,
+		setTitle,
+		title,
+		titleInputRef
+	};
+}
+//#endregion
+//#region src/react-feedback-dialog.tsx
+function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToken, theme = "auto", primaryColor, defaultCategory = "feature", categories = [
+	"feature",
+	"bug",
+	"question"
+], labels: labelsProp, onSubmit, onOpen, onClose }) {
+	const { labels, title, setTitle, description, setDescription, email, setEmail, category, setCategory, honeypot, setHoneypot, isSubmitting, isSuccess, error, setError, isClosing, isAnonymous, titleInputRef, dialogRef, handleClose, handleSubmit, handleTrapFocus } = useFeedbackDialog({
+		baseUrl,
+		defaultCategory,
+		labels: labelsProp,
+		onClose,
+		onOpen,
+		onOpenChange,
+		onSubmit,
+		open,
+		primaryColor,
+		publicKey,
+		user,
+		userToken
+	});
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-reflet-feedback": "",
+		"data-theme": theme,
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-label": "Close feedback dialog",
+			className: "reflet-overlay",
+			"data-closing": isClosing ? "true" : void 0,
+			onClick: handleClose,
+			tabIndex: 0,
+			type: "button"
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-label": labels.title,
+			"aria-modal": "true",
+			className: "reflet-dialog",
+			"data-closing": isClosing ? "true" : void 0,
+			onKeyDown: handleTrapFocus,
+			ref: dialogRef,
+			role: "dialog",
+			children: isSuccess ? /* @__PURE__ */ jsxs("div", {
+				className: "reflet-success",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "reflet-success-icon",
+						children: /* @__PURE__ */ jsx("svg", {
+							"aria-hidden": "true",
+							fill: "none",
+							stroke: "currentColor",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: "2.5",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+						})
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "reflet-success-title",
+						children: labels.successTitle
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "reflet-success-text",
+						children: labels.successMessage
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "reflet-header",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "reflet-title",
+						children: labels.title
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": "Close",
+						className: "reflet-close",
+						onClick: handleClose,
+						type: "button",
+						children: /* @__PURE__ */ jsxs("svg", {
+							"aria-hidden": "true",
+							fill: "none",
+							stroke: "currentColor",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: "2",
+							viewBox: "0 0 24 24",
+							children: [/* @__PURE__ */ jsx("line", {
+								x1: "18",
+								x2: "6",
+								y1: "6",
+								y2: "18"
+							}), /* @__PURE__ */ jsx("line", {
+								x1: "6",
+								x2: "18",
+								y1: "6",
+								y2: "18"
+							})]
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("form", {
+					className: "reflet-form",
+					onSubmit: handleSubmit,
+					children: [
+						categories.length > 1 && /* @__PURE__ */ jsx("div", {
+							className: "reflet-categories",
+							children: categories.map((cat) => /* @__PURE__ */ jsxs("button", {
+								className: "reflet-category",
+								"data-selected": cat === category ? "true" : void 0,
+								onClick: () => setCategory(cat),
+								type: "button",
+								children: [
+									CATEGORY_ICONS[cat],
+									" ",
+									labels[`category${cat.charAt(0).toUpperCase()}${cat.slice(1)}`]
+								]
+							}, cat))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "reflet-field",
+							children: /* @__PURE__ */ jsx("input", {
+								"aria-label": "Feedback title",
+								autoComplete: "off",
+								className: "reflet-input",
+								maxLength: 100,
+								onChange: (e) => {
+									setTitle(e.target.value);
+									if (error) setError(null);
+								},
+								placeholder: labels.titlePlaceholder,
+								ref: titleInputRef,
+								required: true,
+								type: "text",
+								value: title
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "reflet-field",
+							children: /* @__PURE__ */ jsx("textarea", {
+								"aria-label": "Feedback description",
+								className: "reflet-textarea",
+								maxLength: 2e3,
+								onChange: (e) => setDescription(e.target.value),
+								placeholder: labels.descriptionPlaceholder,
+								rows: 3,
+								value: description
+							})
+						}),
+						isAnonymous && /* @__PURE__ */ jsxs("div", {
+							className: "reflet-field",
+							children: [/* @__PURE__ */ jsx("label", {
+								className: "reflet-label",
+								htmlFor: "reflet-email",
+								children: labels.emailLabel
+							}), /* @__PURE__ */ jsx("input", {
+								"aria-label": "Email address",
+								autoComplete: "email",
+								className: "reflet-input",
+								id: "reflet-email",
+								onChange: (e) => setEmail(e.target.value),
+								placeholder: labels.emailPlaceholder,
+								type: "email",
+								value: email
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: "reflet-hp",
+							children: /* @__PURE__ */ jsx("input", {
+								autoComplete: "off",
+								name: "website",
+								onChange: (e) => setHoneypot(e.target.value),
+								tabIndex: -1,
+								type: "text",
+								value: honeypot
+							})
+						}),
+						error && /* @__PURE__ */ jsx("p", {
+							className: "reflet-error-msg",
+							children: error
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "reflet-footer",
+							children: [/* @__PURE__ */ jsx("button", {
+								className: "reflet-btn reflet-btn-secondary",
+								onClick: handleClose,
+								type: "button",
+								children: labels.cancel
+							}), /* @__PURE__ */ jsx("button", {
+								className: "reflet-btn reflet-btn-primary",
+								disabled: isSubmitting || !title.trim(),
+								type: "submit",
+								children: isSubmitting ? /* @__PURE__ */ jsx("span", { className: "reflet-spinner" }) : labels.submit
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "reflet-powered",
+					children: [
+						"Powered by",
+						" ",
+						/* @__PURE__ */ jsx("a", {
+							href: "https://reflet.app",
+							rel: "noopener noreferrer",
+							target: "_blank",
+							children: "Reflet"
+						})
+					]
+				})
+			] })
+		})]
+	});
+}
+//#endregion
+//#region src/react-feedback-button.tsx
+function FeedbackIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		height: "16",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		width: "16",
+		children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+	});
+}
+function FeedbackButton({ publicKey, baseUrl, user, userToken, theme = "auto", primaryColor, defaultCategory = "feature", categories, labels, onSubmit, onOpen, onClose, className, asChild = false, children }) {
+	const [open, setOpen] = useState(false);
+	useState(() => {
+		injectFeedbackStyles();
+	});
+	const handleClick = useCallback(() => {
+		setOpen(true);
+	}, []);
+	let trigger;
+	if (asChild && isValidElement(children)) trigger = cloneElement(children, { onClick: handleClick });
+	else {
+		const triggerLabel = labels?.trigger ?? "Feedback";
+		trigger = /* @__PURE__ */ jsx("div", {
+			"data-reflet-feedback": "",
+			"data-theme": theme,
+			children: /* @__PURE__ */ jsxs("button", {
+				"aria-label": triggerLabel,
+				className: className ?? "reflet-trigger",
+				onClick: handleClick,
+				style: primaryColor ? {
+					"--reflet-primary": primaryColor,
+					"--reflet-primary-hover": primaryColor
+				} : void 0,
+				type: "button",
+				children: [/* @__PURE__ */ jsx(FeedbackIcon, {}), triggerLabel]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, /* @__PURE__ */ jsx(FeedbackDialog, {
+		baseUrl,
+		categories,
+		defaultCategory,
+		labels,
+		onClose,
+		onOpen,
+		onOpenChange: setOpen,
+		onSubmit,
+		open,
+		primaryColor,
+		publicKey,
+		theme,
+		user,
+		userToken
+	})] });
+}
+//#endregion
+//#region src/react-mutation-hooks.ts
+function useRefletMutation(mutateFn) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [data, setData] = useState();
+	return {
+		data,
+		error,
+		isLoading,
+		mutate: useCallback(async (variables) => {
+			setIsLoading(true);
+			setError(null);
+			try {
+				const result = await mutateFn(variables);
+				setData(result);
+				return result;
+			} catch (err) {
+				const wrapped = err instanceof Error ? err : /* @__PURE__ */ new Error("Request failed");
+				setError(wrapped);
+				throw wrapped;
+			} finally {
+				setIsLoading(false);
+			}
+		}, [mutateFn]),
+		reset: useCallback(() => {
+			setData(void 0);
+			setError(null);
+		}, [])
+	};
+}
+/**
+* Hook to create new feedback
+*
+* @example
+* ```tsx
+* const { mutate: createFeedback, isLoading } = useCreateFeedback();
+*
+* const handleSubmit = async (data) => {
+*   const result = await createFeedback(data);
+*   console.log('Created:', result.feedbackId);
+* };
+* ```
+*/
 function useCreateFeedback() {
-  const client = useRefletClient();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState();
-  const mutate = useCallback(
-    async (params) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const result = await client.create(params);
-        setData(result);
-        return result;
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to create feedback");
-        setError(error2);
-        throw error2;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client]
-  );
-  const reset = useCallback(() => {
-    setData(void 0);
-    setError(null);
-  }, []);
-  return { mutate, isLoading, error, data, reset };
+	const client = useRefletClient();
+	return useRefletMutation(useCallback((params) => client.create(params), [client]));
 }
+/**
+* Hook to vote on feedback
+*
+* @example
+* ```tsx
+* const { mutate: vote } = useVote();
+*
+* <button onClick={() => vote({ feedbackId: 'xxx' })}>
+*   Vote
+* </button>
+* ```
+*/
 function useVote() {
-  const client = useRefletClient();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState();
-  const mutate = useCallback(
-    async ({
-      feedbackId,
-      type = "upvote"
-    }) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const result = await client.vote(feedbackId, type);
-        setData(result);
-        return result;
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to vote");
-        setError(error2);
-        throw error2;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client]
-  );
-  const reset = useCallback(() => {
-    setData(void 0);
-    setError(null);
-  }, []);
-  return { mutate, isLoading, error, data, reset };
+	const client = useRefletClient();
+	return useRefletMutation(useCallback(({ feedbackId, type = "upvote" }) => client.vote(feedbackId, type), [client]));
 }
+/**
+* Hook to add a comment
+*/
 function useAddComment() {
-  const client = useRefletClient();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState();
-  const mutate = useCallback(
-    async (params) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const result = await client.comment(params);
-        setData(result);
-        return result;
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to add comment");
-        setError(error2);
-        throw error2;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client]
-  );
-  const reset = useCallback(() => {
-    setData(void 0);
-    setError(null);
-  }, []);
-  return { mutate, isLoading, error, data, reset };
+	const client = useRefletClient();
+	return useRefletMutation(useCallback((params) => client.comment(params), [client]));
 }
+/**
+* Hook to subscribe/unsubscribe to feedback
+*/
 function useSubscription() {
-  const client = useRefletClient();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const subscribe = useCallback(
-    async (feedbackId) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const result = await client.subscribe(feedbackId);
-        return result;
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to subscribe");
-        setError(error2);
-        throw error2;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client]
-  );
-  const unsubscribe = useCallback(
-    async (feedbackId) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const result = await client.unsubscribe(feedbackId);
-        return result;
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to unsubscribe");
-        setError(error2);
-        throw error2;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client]
-  );
-  return { subscribe, unsubscribe, isLoading, error };
-}
-
-export { RefletProvider, useAddComment, useChangelog, useComments, useCreateFeedback, useFeedback, useFeedbackList, useOrganizationConfig, useRefletClient, useRefletContext, useRoadmap, useSubscription, useVote };
-//# sourceMappingURL=react.js.map
+	const client = useRefletClient();
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		error,
+		isLoading,
+		subscribe: useCallback(async (feedbackId) => {
+			setIsLoading(true);
+			setError(null);
+			try {
+				return await client.subscribe(feedbackId);
+			} catch (err) {
+				const wrapped = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to subscribe");
+				setError(wrapped);
+				throw wrapped;
+			} finally {
+				setIsLoading(false);
+			}
+		}, [client]),
+		unsubscribe: useCallback(async (feedbackId) => {
+			setIsLoading(true);
+			setError(null);
+			try {
+				return await client.unsubscribe(feedbackId);
+			} catch (err) {
+				const wrapped = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to unsubscribe");
+				setError(wrapped);
+				throw wrapped;
+			} finally {
+				setIsLoading(false);
+			}
+		}, [client])
+	};
+}
+//#endregion
+//#region src/react-query-hooks.ts
+function useRefletQuery(fetchFn, enabled = true) {
+	const [data, setData] = useState();
+	const [isLoading, setIsLoading] = useState(enabled);
+	const [error, setError] = useState(null);
+	const refetch = useCallback(async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const result = await fetchFn();
+			setData(result);
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Request failed"));
+		} finally {
+			setIsLoading(false);
+		}
+	}, [fetchFn]);
+	useEffect(() => {
+		if (enabled) refetch();
+	}, [refetch, enabled]);
+	return {
+		data,
+		error,
+		isLoading,
+		refetch
+	};
+}
+function useOrganizationConfig() {
+	const client = useRefletClient();
+	return useRefletQuery(useCallback(() => client.getConfig(), [client]));
+}
+function useFeedbackList(options = {}) {
+	const client = useRefletClient();
+	const { enabled = true, statusId, status, search, sortBy, limit, offset } = options;
+	const params = useMemo(() => ({
+		limit,
+		offset,
+		search,
+		sortBy,
+		status,
+		statusId
+	}), [
+		statusId,
+		status,
+		search,
+		sortBy,
+		limit,
+		offset
+	]);
+	return useRefletQuery(useCallback(() => client.list(params), [client, params]), enabled);
+}
+function useFeedback(feedbackId) {
+	const client = useRefletClient();
+	return useRefletQuery(useCallback(() => {
+		if (!feedbackId) return Promise.resolve(void 0);
+		return client.get(feedbackId);
+	}, [client, feedbackId]), !!feedbackId);
+}
+function useComments(feedbackId, sortBy = "oldest") {
+	const client = useRefletClient();
+	return useRefletQuery(useCallback(() => {
+		if (!feedbackId) return Promise.resolve(void 0);
+		return client.getComments(feedbackId, sortBy);
+	}, [
+		client,
+		feedbackId,
+		sortBy
+	]), !!feedbackId);
+}
+function useRoadmap() {
+	const client = useRefletClient();
+	return useRefletQuery(useCallback(() => client.getRoadmap(), [client]));
+}
+function useChangelog(limit) {
+	const client = useRefletClient();
+	return useRefletQuery(useCallback(() => client.getChangelog(limit), [client, limit]));
+}
+const CHANGELOG_STORAGE_KEY_PREFIX = "reflet_changelog_seen_";
+function useUnreadChangelogCount(publicKey) {
+	const { data: entries } = useChangelog();
+	const [unreadCount, setUnreadCount] = useState(0);
+	const storageKey = `${CHANGELOG_STORAGE_KEY_PREFIX}${publicKey}`;
+	useEffect(() => {
+		if (!entries || entries.length === 0) {
+			setUnreadCount(0);
+			return;
+		}
+		let lastSeen = 0;
+		try {
+			const stored = localStorage.getItem(storageKey);
+			lastSeen = stored ? Number(stored) : 0;
+		} catch {}
+		let count = 0;
+		for (const entry of entries) if (entry.publishedAt && entry.publishedAt > lastSeen) count++;
+		setUnreadCount(count);
+	}, [entries, storageKey]);
+	return {
+		markAsRead: useCallback(() => {
+			if (!entries || entries.length === 0) return;
+			let latestTimestamp = 0;
+			for (const entry of entries) if (entry.publishedAt && entry.publishedAt > latestTimestamp) latestTimestamp = entry.publishedAt;
+			if (latestTimestamp > 0) {
+				try {
+					localStorage.setItem(storageKey, String(latestTimestamp));
+				} catch {}
+				setUnreadCount(0);
+			}
+		}, [entries, storageKey]),
+		unreadCount
+	};
+}
+//#endregion
+export { ChangelogWidget, FeedbackButton, FeedbackDialog, Reflet, RefletContext, RefletProvider, useAddComment, useChangelog, useComments, useCreateFeedback, useFeedback, useFeedbackList, useOrganizationConfig, useRefletClient, useRefletContext, useRoadmap, useSubscription, useUnreadChangelogCount, useVote };
+
 //# sourceMappingURL=react.js.map