@usero/sdk 0.1.0

package/dist/react.cjs

@@ -0,0 +1,1137 @@
+'use strict';
+
+var react = require('react');
+
+// src/react.tsx
+
+// src/types.ts
+var EMOJI_MAP = {
+  1: "\u{1F61E}",
+  2: "\u{1F610}",
+  3: "\u{1F60A}",
+  4: "\u{1F929}"
+};
+var RATING_LABELS = {
+  1: "Needs work",
+  2: "It's okay",
+  3: "Pretty good",
+  4: "Amazing!"
+};
+var EMOJI_BACKGROUNDS = {
+  1: "linear-gradient(135deg,#ff6b6b14,#ff6b6b1f)",
+  2: "linear-gradient(135deg,#9ca3af0f,#9ca3af1a)",
+  3: "linear-gradient(135deg,#3b82f614,#3b82f61f)",
+  4: "linear-gradient(135deg,#f59e0b14,#f59e0b1f)"
+};
+var DEFAULT_API_URL = "https://usero.io";
+var DEFAULT_THEME = {
+  primary: "#2563eb",
+  background: "#ffffff",
+  text: "#374151",
+  border: "#e5e7eb",
+  shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+};
+var DARK_THEME = {
+  primary: "#2563eb",
+  background: "#1f2937",
+  text: "#f9fafb",
+  border: "#374151",
+  shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)"
+};
+function mergeTheme(customTheme = {}) {
+  return { ...DEFAULT_THEME, ...customTheme };
+}
+
+// src/api.ts
+function isJsonErrorBody(value) {
+  return typeof value === "object" && value !== null && "error" in value;
+}
+function parseScreenshotUploadBody(value) {
+  if (typeof value !== "object" || value === null) {
+    return { success: false, error: "Invalid response" };
+  }
+  const obj = value;
+  const success = obj.success === true;
+  const error = typeof obj.error === "string" ? obj.error : void 0;
+  const rawShot = obj.screenshot;
+  let screenshot;
+  if (typeof rawShot === "object" && rawShot !== null) {
+    const s = rawShot;
+    if (typeof s.fileName === "string" && typeof s.url === "string" && typeof s.fileSize === "number" && typeof s.mimeType === "string") {
+      screenshot = {
+        fileName: s.fileName,
+        url: s.url,
+        fileSize: s.fileSize,
+        mimeType: s.mimeType,
+        width: typeof s.width === "number" ? s.width : void 0,
+        height: typeof s.height === "number" ? s.height : void 0
+      };
+    }
+  }
+  return { success, error, screenshot };
+}
+var FeedbackApiClient = class {
+  constructor(baseUrl = DEFAULT_API_URL) {
+    this.baseUrl = baseUrl.replace(/\/$/, "");
+  }
+  async submitFeedback(data) {
+    try {
+      const response = await fetch(`${this.baseUrl}/api/feedback`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify(data),
+        signal: AbortSignal.timeout(1e4)
+      });
+      if (!response.ok) {
+        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+        try {
+          const errorData = await response.json();
+          if (isJsonErrorBody(errorData) && typeof errorData.error === "string") {
+            errorMessage = errorData.error;
+          }
+        } catch {
+        }
+        throw new Error(errorMessage);
+      }
+      const result = await response.json();
+      const message = typeof result === "object" && result !== null && "message" in result && typeof result.message === "string" ? result.message : "Feedback submitted successfully";
+      return {
+        success: true,
+        data: result,
+        message
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "An unexpected error occurred"
+      };
+    }
+  }
+  async uploadScreenshot(file, clientId) {
+    const formData = new FormData();
+    formData.append("screenshot", file);
+    formData.append("clientId", clientId);
+    const response = await fetch(`${this.baseUrl}/api/screenshots`, {
+      method: "POST",
+      body: formData,
+      signal: AbortSignal.timeout(3e4)
+    });
+    let body = { success: false };
+    try {
+      const raw = await response.json();
+      body = parseScreenshotUploadBody(raw);
+    } catch {
+    }
+    if (!response.ok || !body.success || !body.screenshot) {
+      const message = body.error ?? `HTTP ${response.status}: ${response.statusText}`;
+      throw new Error(message);
+    }
+    return body.screenshot;
+  }
+  ping() {
+    fetch(`${this.baseUrl}/api/ping`, {
+      signal: AbortSignal.timeout(5e3)
+    }).catch(() => {
+    });
+  }
+};
+
+// src/colorUtils.ts
+function colorNameToHex(color) {
+  if (color.startsWith("#")) return color;
+  if (typeof document === "undefined") return color;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return color;
+  ctx.fillStyle = color;
+  return ctx.fillStyle;
+}
+function getGradientEnd(color) {
+  const hex = colorNameToHex(color);
+  if (!hex.startsWith("#") || hex.length < 7) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const shiftedR = Math.max(0, r - 60);
+  const shiftedG = Math.min(255, g + 40);
+  const shiftedB = Math.min(255, b + 20);
+  return `#${[shiftedR, shiftedG, shiftedB].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
+}
+
+// src/validation.ts
+function validateFeedbackSubmission(data) {
+  const errors = [];
+  const hasRating = data.rating != null;
+  const hasComment = !!data.comment?.trim();
+  if (!hasRating && !hasComment) {
+    errors.push("Add rating or comment");
+  }
+  if (hasRating && data.rating !== void 0 && ![1, 2, 3, 4].includes(data.rating)) {
+    errors.push("Invalid rating");
+  }
+  if (hasComment && data.comment !== void 0) {
+    if (data.comment.length > 1e3) {
+      errors.push("Comment too long");
+    }
+    if (/<script[^>]*>.*?<\/script>/gi.test(data.comment)) {
+      errors.push("Invalid comment");
+    }
+  }
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+
+// src/widgetCss.ts
+var FEEDBACK_CSS = `
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.fb-es {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  padding-bottom: 10px;
+}
+
+.fb-ec {
+  border-radius: 16px;
+  padding: 0 5px;
+  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  border: 3px solid transparent;
+  cursor: pointer;
+  text-align: center;
+}
+
+.fb-ec--sel {
+  border-color: #2563eb;
+  transform: scale(1.05);
+  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
+}
+
+.fb-ec--hov:not(.fb-ec--sel) {
+  transform: scale(1.05);
+}
+
+.fb-eb {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  padding: 0;
+  transition: all 200ms ease;
+}
+
+.fb-ei {
+  font-size: 36px;
+  transition: transform 200ms ease;
+}
+
+.fb-ei--hov {
+  transform: scale(1.1);
+}
+
+.fb-el {
+  font-size: 13px;
+  font-weight: 600;
+  color: currentColor;
+  line-height: 1.2;
+}
+
+.fb-hdr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 4px;
+  margin-bottom: 10px;
+}
+
+.fb-msg {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+}
+
+.fb-msg--header {
+  font-size: 12px;
+  padding: 4px 8px;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: 8px;
+}
+
+.fb-msg--ok {
+  background-color: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  color: #16a34a;
+}
+
+.fb-msg--err {
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+}
+
+.fb-sub {
+  width: 100%;
+  padding: 16px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 200ms ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.fb-sub--dis {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.fb-spin {
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.fb-cnt {
+  padding: 24px;
+  overflow: auto;
+  max-height: calc(90vh - 48px);
+}
+
+.fb-ttl {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.fb-ta {
+  width: 100%;
+  min-height: 100px;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  resize: vertical;
+  transition: border-color 150ms ease;
+  margin-bottom: 4px;
+  box-sizing: border-box;
+}
+
+.fb-charcount {
+  font-size: 12px;
+  margin-left: auto;
+  margin-bottom: 8px;
+  text-align: right;
+}
+
+.fb-charcount--low {
+  color: #dc2626;
+}
+
+.fb-email {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.fb-email-lbl {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.fb-email-cb {
+  margin: 0;
+  cursor: pointer;
+}
+
+.fb-email-inp {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 150ms ease;
+  box-sizing: border-box;
+}
+
+.fb-btn {
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  z-index: 9998;
+  color: #ffffff;
+  top: 50%;
+  transform: translateY(-50%);
+  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.fb-btn--right {
+  right: -25px;
+  border-radius: 40px 0 0 40px;
+  padding-right: 8px;
+  box-shadow: -4px 0 15px rgba(37, 99, 235, 0.3);
+}
+
+.fb-btn--left {
+  left: -25px;
+  border-radius: 0 40px 40px 0;
+  padding-left: 8px;
+  box-shadow: 4px 0 15px rgba(37, 99, 235, 0.3);
+}
+
+.fb-btn--right.fb-btn--open {
+  right: -15px;
+  transform: translateY(-50%) scale(1.05);
+}
+
+.fb-btn--left.fb-btn--open {
+  left: -15px;
+  transform: translateY(-50%) scale(1.05);
+}
+
+.fb-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  transition: opacity 300ms ease;
+  z-index: 9999;
+  backdrop-filter: blur(8px);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.fb-pnl-base {
+  position: fixed;
+  top: 10vh;
+  width: 400px;
+  max-width: 90vw;
+  max-height: 60vh;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.fb-pnl--right { right: 0; }
+.fb-pnl--right.fb-pnl--open { transform: translateX(0px); }
+.fb-pnl--right.fb-pnl--closed { transform: translateX(100%); }
+
+.fb-pnl--left { left: 0; }
+.fb-pnl--left.fb-pnl--open { transform: translateX(0px); }
+.fb-pnl--left.fb-pnl--closed { transform: translateX(-100%); }
+
+.fb-close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  opacity: 0.7;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 150ms ease;
+}
+
+.fb-up {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.fb-upb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms ease, opacity 150ms ease;
+  font-family: inherit;
+}
+
+.fb-upb:hover:not(.fb-upb--dis) {
+  background-color: rgba(37, 99, 235, 0.06);
+}
+
+.fb-upb--dis {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.fb-ups {
+  width: 12px;
+  height: 12px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+
+.fb-up-extras {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.fb-upe {
+  font-size: 12px;
+  color: #dc2626;
+}
+
+.fb-ss {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.fb-sp {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.fb-si {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.fb-sr {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fb-sr:hover {
+  background: rgba(0, 0, 0, 0.85);
+}
+
+.fb-sl {
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+@media (max-width: 768px) {
+  .fb-pnl-base {
+    width: 100% !important;
+    max-width: none !important;
+    top: 5vh !important;
+    max-height: 70vh !important;
+  }
+  .fb-cnt { padding: 20px !important; max-height: calc(100vh - 80px) !important; }
+  .fb-ta { font-size: 16px !important; min-height: 80px !important; }
+  .fb-ttl { font-size: 18px !important; }
+  .fb-ei { font-size: 24px !important; }
+  .fb-el { font-size: 11px !important; }
+  .fb-sub { padding: 14px 20px !important; font-size: 16px !important; }
+}
+`;
+
+// src/vanilla.ts
+var EMAIL_STORAGE_KEY = "feedback_user_email";
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (ch) => {
+    switch (ch) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      case "'":
+        return "&#x27;";
+      default:
+        return ch;
+    }
+  });
+}
+function readStoredEmail() {
+  if (typeof window === "undefined") return "";
+  try {
+    return window.localStorage.getItem(EMAIL_STORAGE_KEY) ?? "";
+  } catch {
+    return "";
+  }
+}
+function writeStoredEmail(email) {
+  try {
+    window.localStorage.setItem(EMAIL_STORAGE_KEY, email);
+  } catch {
+  }
+}
+function initUseroFeedbackWidget(props) {
+  if (typeof document === "undefined") {
+    return {
+      destroy: () => {
+      },
+      open: () => {
+      },
+      close: () => {
+      },
+      update: () => {
+      }
+    };
+  }
+  const { clientId, baseUrl } = props;
+  if (!clientId || clientId.length < 3) {
+    const err = new Error("Invalid config. Contact admin.");
+    props.onError?.(err);
+    return {
+      destroy: () => {
+      },
+      open: () => {
+      },
+      close: () => {
+      },
+      update: () => {
+      }
+    };
+  }
+  let position = props.position ?? "right";
+  let theme = mergeTheme(props.theme);
+  let title = props.title ?? "Share Feedback";
+  let placeholder = props.placeholder ?? "Tell us what you think... (optional)";
+  let showEmailOption = props.showEmailOption ?? true;
+  let showScreenshotOption = props.showScreenshotOption ?? true;
+  let environment = props.environment;
+  let metadata = props.metadata;
+  let onSubmit = props.onSubmit;
+  let onError = props.onError;
+  let onOpen = props.onOpen;
+  let onClose = props.onClose;
+  const apiClient = new FeedbackApiClient(baseUrl);
+  let isOpen = false;
+  let selectedRating = void 0;
+  let comment = "";
+  let shareEmail = false;
+  let userEmail = readStoredEmail();
+  let isSubmitting = false;
+  let submitMessage = null;
+  let screenshots = [];
+  let isUploadingScreenshot = false;
+  let screenshotError = null;
+  const MAX_SCREENSHOTS = 3;
+  const MAX_SCREENSHOT_BYTES = 10 * 1024 * 1024;
+  const host = document.createElement("div");
+  host.setAttribute("data-usero-widget", "");
+  host.style.cssText = "all: initial;";
+  document.body.appendChild(host);
+  const root = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = FEEDBACK_CSS;
+  root.appendChild(style);
+  const buttonEl = document.createElement("button");
+  const backdropEl = document.createElement("div");
+  const panelEl = document.createElement("div");
+  root.appendChild(buttonEl);
+  root.appendChild(backdropEl);
+  root.appendChild(panelEl);
+  function setSubmitMessage(next) {
+    submitMessage = next;
+    render();
+  }
+  function open() {
+    if (isOpen) return;
+    isOpen = true;
+    selectedRating = void 0;
+    comment = "";
+    shareEmail = false;
+    submitMessage = null;
+    screenshots = [];
+    screenshotError = null;
+    isUploadingScreenshot = false;
+    apiClient.ping();
+    onOpen?.();
+    render();
+  }
+  async function handleScreenshotFile(file) {
+    screenshotError = null;
+    if (!file.type.startsWith("image/")) {
+      screenshotError = "Image files only";
+      render();
+      return;
+    }
+    if (file.size > MAX_SCREENSHOT_BYTES) {
+      screenshotError = "Max 10MB";
+      render();
+      return;
+    }
+    if (screenshots.length >= MAX_SCREENSHOTS) {
+      screenshotError = `Max ${MAX_SCREENSHOTS} screenshots`;
+      render();
+      return;
+    }
+    isUploadingScreenshot = true;
+    render();
+    try {
+      const uploaded = await apiClient.uploadScreenshot(file, clientId);
+      screenshots = [...screenshots, uploaded];
+    } catch (err) {
+      screenshotError = err instanceof Error ? err.message : "Upload failed";
+    } finally {
+      isUploadingScreenshot = false;
+      render();
+    }
+  }
+  function removeScreenshot(index) {
+    screenshots = screenshots.filter((_, i) => i !== index);
+    render();
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    onClose?.();
+    render();
+  }
+  async function submitForm() {
+    if (isSubmitting) return;
+    isSubmitting = true;
+    submitMessage = null;
+    render();
+    const feedbackData = {
+      rating: selectedRating,
+      comment: comment.trim() || void 0,
+      userEmail: shareEmail ? userEmail : void 0,
+      screenshots: screenshots.length > 0 ? screenshots : void 0,
+      metadata: {
+        pageUrl: window.location.href,
+        pageTitle: document.title || "Untitled Page",
+        referrer: document.referrer || void 0,
+        timestamp: Date.now()
+      }
+    };
+    const submission = {
+      clientId,
+      rating: feedbackData.rating,
+      comment: feedbackData.comment,
+      userEmail: feedbackData.userEmail,
+      pageUrl: feedbackData.metadata.pageUrl,
+      pageTitle: feedbackData.metadata.pageTitle,
+      referrer: feedbackData.metadata.referrer,
+      environment
+    };
+    if (screenshots.length > 0) submission.screenshots = screenshots;
+    if (metadata !== void 0) submission.metadata = metadata;
+    const validation = validateFeedbackSubmission(submission);
+    if (!validation.isValid) {
+      isSubmitting = false;
+      setSubmitMessage({ type: "error", text: validation.errors.join(", ") });
+      return;
+    }
+    try {
+      const response = await apiClient.submitFeedback(submission);
+      if (response.success) {
+        if (shareEmail && userEmail) writeStoredEmail(userEmail);
+        onSubmit?.(feedbackData);
+        selectedRating = void 0;
+        comment = "";
+        shareEmail = false;
+        screenshots = [];
+        screenshotError = null;
+        submitMessage = { type: "success", text: "Thank you!" };
+      } else {
+        const msg = response.error ?? "Error occurred. Try again.";
+        onError?.(new Error(msg));
+        submitMessage = { type: "error", text: msg };
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Error occurred. Try again.";
+      onError?.(new Error(msg));
+      submitMessage = { type: "error", text: msg };
+    } finally {
+      isSubmitting = false;
+      render();
+    }
+  }
+  function renderButton() {
+    buttonEl.className = `fb-btn fb-btn--${position} ${isOpen ? "fb-btn--open" : ""}`;
+    buttonEl.setAttribute("aria-label", "Open feedback");
+    buttonEl.type = "button";
+    buttonEl.style.background = `linear-gradient(135deg, ${theme.primary}, ${getGradientEnd(theme.primary)})`;
+    buttonEl.innerHTML = isOpen ? `<span style="font-size:20px;">\u2715</span>` : "";
+  }
+  function renderBackdrop() {
+    backdropEl.className = "fb-backdrop";
+    backdropEl.style.display = isOpen ? "block" : "none";
+    backdropEl.setAttribute("aria-label", "Close modal");
+  }
+  function renderPanel() {
+    panelEl.className = `fb-pnl-base fb-pnl--${position} ${isOpen ? "fb-pnl--open" : "fb-pnl--closed"}`;
+    panelEl.style.backgroundColor = theme.background;
+    if (position === "right") {
+      panelEl.style.borderLeft = `1px solid ${theme.border}`;
+      panelEl.style.borderRight = "";
+    } else {
+      panelEl.style.borderRight = `1px solid ${theme.border}`;
+      panelEl.style.borderLeft = "";
+    }
+    panelEl.setAttribute("role", "dialog");
+    panelEl.setAttribute("aria-modal", "true");
+    panelEl.setAttribute("aria-labelledby", "usero-feedback-title");
+    const remaining = 1e3 - comment.length;
+    const lowChars = remaining < 50;
+    const ratingsHtml = [1, 2, 3, 4].map((r) => {
+      const sel = selectedRating === r;
+      const bg = EMOJI_BACKGROUNDS[r];
+      const cls = ["fb-ec", sel && "fb-ec--sel"].filter(Boolean).join(" ");
+      return `
+					<div class="${cls}" style="background:${bg}">
+						<button type="button" class="fb-eb" data-rating="${r}" role="radio" aria-checked="${sel}" aria-label="${r}: ${RATING_LABELS[r]}">
+							<div class="fb-ei"><span role="img" aria-label="${RATING_LABELS[r]}">${EMOJI_MAP[r]}</span></div>
+							<div class="fb-el">${RATING_LABELS[r]}</div>
+						</button>
+					</div>
+				`;
+    }).join("");
+    const messageHtml = submitMessage ? `<div class="fb-msg fb-msg--header ${submitMessage.type === "success" ? "fb-msg--ok" : "fb-msg--err"}">${submitMessage.type === "success" ? "\u2713" : "\u26A0"} ${escapeHtml(submitMessage.text)}</div>` : "";
+    const screenshotBlockHtml = showScreenshotOption ? (() => {
+      const atMax = screenshots.length >= MAX_SCREENSHOTS;
+      const btnDisabled = isUploadingScreenshot || atMax;
+      const previewsHtml = screenshots.map(
+        (shot, i) => `
+								<div class="fb-sp">
+									<img src="${escapeHtml(shot.url)}" alt="Screenshot ${i + 1}" class="fb-si" />
+									<button type="button" class="fb-sr" data-role="screenshot-remove" data-index="${i}" aria-label="Remove screenshot">\u2715</button>
+								</div>
+							`
+      ).join("");
+      const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
+      const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
+      const extrasHtml = screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
+      return `
+						<div class="fb-up">
+							<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
+							<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
+								${isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot"}
+							</button>
+							${extrasHtml}
+						</div>
+					`;
+    })() : "";
+    const emailBlockHtml = showEmailOption ? `
+				<div class="fb-email">
+					<label class="fb-email-lbl" style="color:${theme.text}">
+						<input type="checkbox" class="fb-email-cb" data-role="share-email" ${shareEmail ? "checked" : ""} aria-label="Share email" />
+						<span>Share my email</span>
+					</label>
+					${shareEmail ? `<input type="email" class="fb-email-inp" data-role="email-input" value="${escapeHtml(userEmail)}" placeholder="your.email@example.com" aria-label="Email" maxlength="254" autocomplete="email" style="border:1px solid ${theme.border};color:${theme.text};background-color:${theme.background};" />` : ""}
+				</div>
+			` : "";
+    const submitDisabled = isSubmitting;
+    const submitStyle = `background:linear-gradient(135deg, ${theme.primary}, ${getGradientEnd(theme.primary)});color:#ffffff;${submitDisabled ? "opacity:0.6;cursor:not-allowed;" : ""}`;
+    panelEl.innerHTML = `
+			<div class="fb-cnt">
+				<div class="fb-hdr" style="border-bottom:1px solid ${theme.border}">
+					<h2 id="usero-feedback-title" class="fb-ttl" style="color:${theme.text}">${escapeHtml(title)}</h2>
+					${messageHtml}
+					<button class="fb-close-btn" data-role="close" style="color:${theme.text}" aria-label="Close" type="button">\u2715</button>
+				</div>
+				<form data-role="form">
+					<div class="fb-es" role="radiogroup" aria-label="Rate experience">${ratingsHtml}</div>
+					<textarea class="fb-ta" data-role="comment" placeholder="${escapeHtml(placeholder)}" aria-label="Comments" maxlength="1000" rows="2" style="border:1px solid ${theme.border};color:${theme.text};background-color:${theme.background};">${escapeHtml(comment)}</textarea>
+					<div style="display:flex;justify-content:flex-end;margin-bottom:8px;">
+						<div style="font-size:12px;color:${lowChars ? "#dc2626" : theme.text};opacity:${lowChars ? 1 : 0.6};margin-left:auto;">
+							${remaining} chars remaining
+						</div>
+					</div>
+					${screenshotBlockHtml}
+					${emailBlockHtml}
+					<button class="fb-sub ${submitDisabled ? "fb-sub--dis" : ""}" type="submit" aria-label="Submit" ${submitDisabled ? "disabled" : ""} style="${submitStyle}">
+						${isSubmitting ? '<span class="fb-spin"></span>' : ""}
+						${isSubmitting ? "Submitting..." : "Send Feedback \u{1F680}"}
+					</button>
+				</form>
+			</div>
+		`;
+    const form = panelEl.querySelector('form[data-role="form"]');
+    form?.addEventListener("submit", (e) => {
+      e.preventDefault();
+      void submitForm();
+    });
+    panelEl.querySelector('button[data-role="close"]')?.addEventListener("click", close);
+    panelEl.querySelectorAll("button[data-rating]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const value = btn.dataset.rating;
+        if (value === "1" || value === "2" || value === "3" || value === "4") {
+          selectedRating = Number(value);
+          render();
+        }
+      });
+    });
+    const textarea = panelEl.querySelector(
+      'textarea[data-role="comment"]'
+    );
+    if (textarea) {
+      textarea.addEventListener("input", () => {
+        if (textarea.value.length <= 1e3) {
+          comment = textarea.value;
+          const counter = panelEl.querySelector(
+            ".fb-cnt form > div > div"
+          );
+          if (counter) {
+            const left = 1e3 - comment.length;
+            counter.textContent = `${left} chars remaining`;
+            counter.style.color = left < 50 ? "#dc2626" : theme.text;
+            counter.style.opacity = left < 50 ? "1" : "0.6";
+          }
+        }
+      });
+    }
+    const shareCb = panelEl.querySelector(
+      'input[data-role="share-email"]'
+    );
+    shareCb?.addEventListener("change", () => {
+      shareEmail = shareCb.checked;
+      render();
+    });
+    const emailInp = panelEl.querySelector(
+      'input[data-role="email-input"]'
+    );
+    emailInp?.addEventListener("input", () => {
+      if (emailInp.value.length <= 254) {
+        userEmail = emailInp.value;
+      }
+    });
+    const fileInput = panelEl.querySelector(
+      'input[data-role="screenshot-input"]'
+    );
+    const pickBtn = panelEl.querySelector(
+      'button[data-role="screenshot-pick"]'
+    );
+    pickBtn?.addEventListener("click", () => {
+      fileInput?.click();
+    });
+    fileInput?.addEventListener("change", () => {
+      const file = fileInput.files?.[0];
+      if (!file) return;
+      void handleScreenshotFile(file).finally(() => {
+        if (fileInput) fileInput.value = "";
+      });
+    });
+    panelEl.querySelectorAll(
+      'button[data-role="screenshot-remove"]'
+    ).forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const idx = Number(btn.dataset.index);
+        if (Number.isInteger(idx)) removeScreenshot(idx);
+      });
+    });
+  }
+  function render() {
+    renderButton();
+    renderBackdrop();
+    renderPanel();
+  }
+  buttonEl.addEventListener("click", () => {
+    if (isOpen) close();
+    else open();
+  });
+  backdropEl.addEventListener("click", close);
+  const onKeyDown = (e) => {
+    if (!isOpen) return;
+    if (e.key === "Escape") close();
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      void submitForm();
+    }
+  };
+  document.addEventListener("keydown", onKeyDown);
+  render();
+  let destroyed = false;
+  return {
+    destroy: () => {
+      if (destroyed) return;
+      destroyed = true;
+      document.removeEventListener("keydown", onKeyDown);
+      host.remove();
+    },
+    open,
+    close,
+    update: (next) => {
+      if (destroyed) return;
+      let needsRender = false;
+      if (next.position !== void 0 && next.position !== position) {
+        position = next.position;
+        needsRender = true;
+      }
+      if (next.theme !== void 0) {
+        theme = mergeTheme(next.theme);
+        needsRender = true;
+      }
+      if (next.title !== void 0 && next.title !== title) {
+        title = next.title;
+        needsRender = true;
+      }
+      if (next.placeholder !== void 0 && next.placeholder !== placeholder) {
+        placeholder = next.placeholder;
+        needsRender = true;
+      }
+      if (next.showEmailOption !== void 0 && next.showEmailOption !== showEmailOption) {
+        showEmailOption = next.showEmailOption;
+        needsRender = true;
+      }
+      if (next.showScreenshotOption !== void 0 && next.showScreenshotOption !== showScreenshotOption) {
+        showScreenshotOption = next.showScreenshotOption;
+        needsRender = true;
+      }
+      if ("environment" in next) environment = next.environment;
+      if ("metadata" in next) metadata = next.metadata;
+      if ("onSubmit" in next) onSubmit = next.onSubmit;
+      if ("onError" in next) onError = next.onError;
+      if ("onOpen" in next) onOpen = next.onOpen;
+      if ("onClose" in next) onClose = next.onClose;
+      if (needsRender) render();
+    }
+  };
+}
+
+// src/react.tsx
+function UseroFeedbackWidget(props) {
+  const handleRef = react.useRef(null);
+  const callbacksRef = react.useRef({
+    onSubmit: props.onSubmit,
+    onError: props.onError,
+    onOpen: props.onOpen,
+    onClose: props.onClose
+  });
+  callbacksRef.current = {
+    onSubmit: props.onSubmit,
+    onError: props.onError,
+    onOpen: props.onOpen,
+    onClose: props.onClose
+  };
+  const { clientId, baseUrl } = props;
+  react.useEffect(() => {
+    const handle = initUseroFeedbackWidget({
+      ...props,
+      onSubmit: (data) => callbacksRef.current.onSubmit?.(data),
+      onError: (err) => callbacksRef.current.onError?.(err),
+      onOpen: () => callbacksRef.current.onOpen?.(),
+      onClose: () => callbacksRef.current.onClose?.()
+    });
+    handleRef.current = handle;
+    return () => {
+      handle.destroy();
+      handleRef.current = null;
+    };
+  }, [clientId, baseUrl]);
+  const themeJson = JSON.stringify(props.theme ?? null);
+  const metadataJson = JSON.stringify(props.metadata ?? null);
+  react.useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) return;
+    const updates = {};
+    if (props.position !== void 0) updates.position = props.position;
+    if (props.theme !== void 0) updates.theme = props.theme;
+    if (props.title !== void 0) updates.title = props.title;
+    if (props.placeholder !== void 0) updates.placeholder = props.placeholder;
+    if (props.showEmailOption !== void 0) {
+      updates.showEmailOption = props.showEmailOption;
+    }
+    if (props.showScreenshotOption !== void 0) {
+      updates.showScreenshotOption = props.showScreenshotOption;
+    }
+    if (props.environment !== void 0) updates.environment = props.environment;
+    if (props.metadata !== void 0) updates.metadata = props.metadata;
+    handle.update(updates);
+  }, [
+    props.position,
+    themeJson,
+    props.title,
+    props.placeholder,
+    props.showEmailOption,
+    props.showScreenshotOption,
+    props.environment,
+    metadataJson
+  ]);
+  return null;
+}
+
+exports.DARK_THEME = DARK_THEME;
+exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.UseroFeedbackWidget = UseroFeedbackWidget;
+exports.mergeTheme = mergeTheme;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map