@revova/hydrogen 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1587 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FloatingReviewButton: () => FloatingReviewButton,
+  FloatingReviewsTab: () => FloatingReviewsTab,
+  QnAWidget: () => QnAWidget,
+  ReviewCarousel: () => ReviewCarousel,
+  ReviewCount: () => ReviewCount,
+  ReviewForm: () => ReviewForm,
+  ReviewGallery: () => ReviewGallery,
+  ReviewTicker: () => ReviewTicker,
+  ReviewWidget: () => ReviewWidget,
+  SocialProofPopup: () => SocialProofPopup,
+  StarRating: () => StarRating,
+  TrustBadge: () => TrustBadge,
+  useForm: () => useForm,
+  useHelpfulVote: () => useHelpfulVote,
+  useQnA: () => useQnA,
+  useReviews: () => useReviews,
+  useSubmitReview: () => useSubmitReview,
+  useWidgetGlobals: () => useWidgetGlobals
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ReviewWidget.tsx
+var import_react4 = require("react");
+
+// src/hooks/useReviews.ts
+var import_react = require("react");
+function useReviews({
+  proxyUrl,
+  productId,
+  page: initialPage = 1,
+  limit = 10,
+  sort: initialSort = "recent",
+  locale
+}) {
+  const [page, setPage] = (0, import_react.useState)(initialPage);
+  const [sort, setSort] = (0, import_react.useState)(initialSort);
+  const [state, setState] = (0, import_react.useState)({
+    data: null,
+    loading: true,
+    error: null
+  });
+  const [tick, setTick] = (0, import_react.useState)(0);
+  const refetch = (0, import_react.useCallback)(() => setTick((t) => t + 1), []);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    setState((s) => ({ ...s, loading: true, error: null }));
+    const params = new URLSearchParams({
+      productId,
+      page: String(page),
+      limit: String(limit),
+      sort,
+      ...locale ? { locale } : {}
+    });
+    fetch(`${proxyUrl}/reviews?${params.toString()}`).then((res) => {
+      if (!res.ok) throw new Error(`Revova: reviews fetch failed (${res.status})`);
+      return res.json();
+    }).then((data) => {
+      if (!cancelled) setState({ data, loading: false, error: null });
+    }).catch((err) => {
+      if (!cancelled)
+        setState({ data: null, loading: false, error: err instanceof Error ? err : new Error(String(err)) });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [proxyUrl, productId, page, limit, sort, locale, tick]);
+  return {
+    ...state,
+    refetch,
+    setPage,
+    setSort,
+    currentPage: page,
+    currentSort: sort
+  };
+}
+
+// src/components/StarRating.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function StarRating({ rating, max = 5, size = 16, color = "#f59e0b", className }) {
+  const stars = Array.from({ length: max }, (_, i) => {
+    const fill = Math.min(1, Math.max(0, rating - i));
+    return { index: i, fill };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", gap: 2 },
+      "aria-label": `${rating} out of ${max} stars`,
+      role: "img",
+      children: stars.map(({ index, fill }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `star-fill-${index}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: `${fill * 100}%`, stopColor: color }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: `${fill * 100}%`, stopColor: "#e5e7eb" })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+                fill: `url(#star-fill-${index})`,
+                stroke: color,
+                strokeWidth: "1"
+              }
+            )
+          ]
+        },
+        index
+      ))
+    }
+  );
+}
+
+// src/components/ReviewForm.tsx
+var import_react3 = require("react");
+
+// src/hooks/useSubmitReview.ts
+var import_react2 = require("react");
+var INITIAL_STATE = {
+  submitting: false,
+  success: false,
+  error: null,
+  result: null
+};
+function useSubmitReview(proxyUrl) {
+  const [state, setState] = (0, import_react2.useState)(INITIAL_STATE);
+  const submit = (0, import_react2.useCallback)(
+    async (payload) => {
+      setState({ submitting: true, success: false, error: null, result: null });
+      try {
+        const res = await fetch(`${proxyUrl}/reviews`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        const json = await res.json();
+        if (!res.ok) {
+          setState({
+            submitting: false,
+            success: false,
+            error: json.error ?? `Submission failed (${res.status})`,
+            result: null
+          });
+          return;
+        }
+        setState({ submitting: false, success: true, error: null, result: json });
+      } catch (err) {
+        setState({
+          submitting: false,
+          success: false,
+          error: err instanceof Error ? err.message : "An unexpected error occurred.",
+          result: null
+        });
+      }
+    },
+    [proxyUrl]
+  );
+  const reset = (0, import_react2.useCallback)(() => setState(INITIAL_STATE), []);
+  return { ...state, submit, reset };
+}
+
+// src/components/ReviewForm.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cfg(field) {
+  return field.config ?? {};
+}
+function AttributeRatingField({ field, value, onChange }) {
+  const { max = 5 } = cfg(field);
+  const current = Number(value ?? 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
+      Array.from({ length: max }, (_, i) => i + 1).map((val) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(val),
+          "aria-label": `${val} out of ${max}`,
+          style: { background: "none", border: "none", cursor: "pointer", padding: 2 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StarRating, { rating: val <= current ? 1 : 0, size: 22 })
+        },
+        val
+      )),
+      current > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: 12, color: "#6b7280", marginLeft: 4 }, children: [
+        current,
+        "/",
+        max
+      ] })
+    ] })
+  ] });
+}
+function SingleSelectField({ field, value, onChange }) {
+  const { options = [] } = cfg(field);
+  const id = `revova-${field.id}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "radiogroup", "aria-labelledby": id, style: { display: "flex", flexDirection: "column", gap: 6 }, children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "radio",
+          name: id,
+          value: opt,
+          checked: value === opt,
+          onChange: () => onChange(opt),
+          required: field.required && !value
+        }
+      ),
+      opt
+    ] }, opt)) })
+  ] });
+}
+function MultiSelectField({ field, value, onChange }) {
+  const { options = [], maxSelections } = cfg(field);
+  const selected = Array.isArray(value) ? value : [];
+  function toggle(opt) {
+    if (selected.includes(opt)) {
+      onChange(selected.filter((v) => v !== opt));
+    } else if (!maxSelections || selected.length < maxSelections) {
+      onChange([...selected, opt]);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      field.label,
+      maxSelections && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: 12, color: "#6b7280", marginLeft: 6 }, children: [
+        "(pick up to ",
+        maxSelections,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: options.map((opt) => {
+      const checked = selected.includes(opt);
+      const disabled = !checked && !!maxSelections && selected.length >= maxSelections;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: disabled ? "not-allowed" : "pointer", fontSize: 14, opacity: disabled ? 0.5 : 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: () => toggle(opt)
+          }
+        ),
+        opt
+      ] }, opt);
+    }) })
+  ] });
+}
+function ScaleField({ field, value, onChange }) {
+  const { min = 1, max = 10, minLabel, maxLabel } = cfg(field);
+  const current = value;
+  const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: steps.map((val) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(val),
+          "aria-label": String(val),
+          "aria-pressed": current === val,
+          style: {
+            width: 36,
+            height: 36,
+            border: "1px solid",
+            borderColor: current === val ? "#111827" : "#d1d5db",
+            borderRadius: 6,
+            background: current === val ? "#111827" : "#fff",
+            color: current === val ? "#fff" : "#374151",
+            cursor: "pointer",
+            fontSize: 13,
+            fontWeight: current === val ? 600 : 400
+          },
+          children: val
+        },
+        val
+      )) }),
+      (minLabel || maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 11, color: "#6b7280" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: minLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: maxLabel })
+      ] })
+    ] })
+  ] });
+}
+function TextShortField({ field, value, onChange }) {
+  const { placeholder } = cfg(field);
+  const id = `revova-${field.id}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        id,
+        type: "text",
+        placeholder,
+        required: field.required,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value)
+      }
+    )
+  ] });
+}
+function TextLongField({ field, value, onChange }) {
+  const { placeholder, minLength } = cfg(field);
+  const id = `revova-${field.id}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "textarea",
+      {
+        id,
+        rows: 4,
+        placeholder,
+        required: field.required,
+        minLength,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value)
+      }
+    )
+  ] });
+}
+function BooleanField({ field, value, onChange }) {
+  const id = `revova-${field.id}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        id,
+        type: "button",
+        role: "switch",
+        "aria-checked": value === true,
+        onClick: () => onChange(value === true ? false : true),
+        style: {
+          width: 44,
+          height: 24,
+          borderRadius: 999,
+          border: "none",
+          background: value === true ? "#111827" : "#d1d5db",
+          cursor: "pointer",
+          position: "relative",
+          transition: "background 0.2s",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: 3,
+              left: value === true ? 23 : 3,
+              width: 18,
+              height: 18,
+              borderRadius: "50%",
+              background: "#fff",
+              transition: "left 0.2s"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, style: { cursor: "pointer", fontSize: 14 }, children: field.label })
+  ] });
+}
+function MediaUploadField({ field, value, onChange }) {
+  const { maxFiles = 1, maxSizeMb = 2, allowVideo = false } = cfg(field);
+  const files = Array.isArray(value) ? value : [];
+  const id = `revova-${field.id}`;
+  const accept = allowVideo ? "image/*,video/*" : "image/*";
+  function handleChange(e) {
+    const selected = Array.from(e.target.files ?? []).slice(0, maxFiles);
+    const tooBig = selected.filter((f) => f.size > maxSizeMb * 1024 * 1024);
+    if (tooBig.length > 0) {
+      alert(`Each file must be under ${maxSizeMb}MB.`);
+      return;
+    }
+    onChange(selected);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: id, children: [
+      field.label,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: 12, color: "#6b7280", marginLeft: 6 }, children: [
+        "(max ",
+        maxFiles,
+        " file",
+        maxFiles > 1 ? "s" : "",
+        ", ",
+        maxSizeMb,
+        "MB each",
+        allowVideo ? ", photos & videos" : ", photos only",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        id,
+        type: "file",
+        accept,
+        multiple: maxFiles > 1,
+        required: field.required,
+        onChange: handleChange
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { style: { listStyle: "none", padding: 0, margin: "6px 0 0", display: "flex", gap: 6, flexWrap: "wrap" }, children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { style: { fontSize: 12, color: "#374151" }, children: file.name }, i)) })
+  ] });
+}
+function FieldRenderer(props) {
+  switch (props.field.type) {
+    case "ATTRIBUTE_RATING":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AttributeRatingField, { ...props });
+    case "SINGLE_SELECT":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SingleSelectField, { ...props });
+    case "MULTI_SELECT":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MultiSelectField, { ...props });
+    case "SCALE":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScaleField, { ...props });
+    case "TEXT_SHORT":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextShortField, { ...props });
+    case "TEXT_LONG":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextLongField, { ...props });
+    case "BOOLEAN":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BooleanField, { ...props });
+    case "MEDIA_UPLOAD":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MediaUploadField, { ...props });
+    // VERIFIED_ONLY is a wrapper — render its inner fields inline
+    case "VERIFIED_ONLY": {
+      const inner = cfg(props.field).fields ?? [];
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: inner.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        FieldRenderer,
+        {
+          field: f,
+          value: props.value,
+          onChange: props.onChange
+        },
+        f.id
+      )) });
+    }
+    default:
+      return null;
+  }
+}
+function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
+  const { submit, submitting, success, error, result } = useSubmitReview(proxyUrl);
+  const [answers, setAnswers] = (0, import_react3.useState)({});
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const starField = form.fields.find((f) => f.type === "STAR_RATING");
+  const titleField = form.fields.find((f) => f.type === "TITLE");
+  const descField = form.fields.find((f) => f.type === "DESCRIPTION");
+  const customFields = form.fields.filter(
+    (f) => !["STAR_RATING", "TITLE", "DESCRIPTION"].includes(f.type)
+  );
+  function setAnswer(fieldId, value) {
+    setAnswers((prev) => ({ ...prev, [fieldId]: value }));
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const fieldAnswers = Object.entries(answers).map(([fieldId, value]) => ({ fieldId, value }));
+    await submit({ productId, email, formId: form.id, fieldAnswers });
+    onSuccess?.();
+  }
+  if (success && result) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: result.requiresEmailVerification ? result.message ?? "Check your email to verify your review." : "Thanks for your review!" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { className, onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    starField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+        "Rating ",
+        starField.required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, children: "*" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 4 }, children: [1, 2, 3, 4, 5].map((val) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAnswer(starField.id, val),
+          "aria-label": `${val} star`,
+          style: { background: "none", border: "none", cursor: "pointer", padding: 2 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            StarRating,
+            {
+              rating: val <= Number(answers[starField.id] ?? 0) ? 1 : 0,
+              size: 28
+            }
+          )
+        },
+        val
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "revova-email", children: "Email *" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          id: "revova-email",
+          type: "email",
+          required: true,
+          value: email,
+          onChange: (e) => setEmail(e.target.value)
+        }
+      )
+    ] }),
+    titleField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: `revova-${titleField.id}`, children: [
+        titleField.label ?? "Title",
+        titleField.required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, children: " *" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          id: `revova-${titleField.id}`,
+          type: "text",
+          required: titleField.required,
+          value: String(answers[titleField.id] ?? ""),
+          onChange: (e) => setAnswer(titleField.id, e.target.value)
+        }
+      )
+    ] }),
+    descField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: `revova-${descField.id}`, children: [
+        descField.label ?? "Review",
+        descField.required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, children: " *" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "textarea",
+        {
+          id: `revova-${descField.id}`,
+          required: descField.required,
+          rows: 4,
+          value: String(answers[descField.id] ?? ""),
+          onChange: (e) => setAnswer(descField.id, e.target.value)
+        }
+      )
+    ] }),
+    customFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FieldRenderer,
+      {
+        field,
+        value: answers[field.id],
+        onChange: (val) => setAnswer(field.id, val)
+      },
+      field.id
+    )),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { color: "red", margin: 0 }, children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit Review" })
+  ] });
+}
+
+// src/components/ReviewWidget.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ReviewWidget({
+  proxyUrl,
+  productId,
+  locale,
+  pageSize = 10,
+  showForm = true,
+  starColor,
+  className
+}) {
+  const [showingForm, setShowingForm] = (0, import_react4.useState)(false);
+  const { data, loading, error, setPage, setSort, currentPage, currentSort } = useReviews({
+    proxyUrl,
+    productId,
+    limit: pageSize,
+    ...locale !== void 0 ? { locale } : {}
+  });
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: "Loading reviews\u2026" });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: "Could not load reviews." });
+  if (!data) return null;
+  const { reviews, pagination, form } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("strong", { children: [
+        pagination.total,
+        " review",
+        pagination.total !== 1 ? "s" : ""
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "select",
+        {
+          value: currentSort,
+          onChange: (e) => setSort(e.target.value),
+          "aria-label": "Sort reviews",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "recent", children: "Most Recent" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "helpful", children: "Most Helpful" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "rating_high", children: "Highest Rated" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "rating_low", children: "Lowest Rated" })
+          ]
+        }
+      )
+    ] }),
+    showForm && form && !showingForm && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setShowingForm(true), style: { marginBottom: 16 }, children: "Write a Review" }),
+    showingForm && form && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ReviewForm,
+      {
+        proxyUrl,
+        productId,
+        form,
+        onSuccess: () => setShowingForm(false)
+      }
+    ) }),
+    reviews.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "No reviews yet. Be the first!" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: reviews.map((review) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 16, marginBottom: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StarRating, { rating: review.rating, ...starColor !== void 0 ? { color: starColor } : {} }),
+      review.isPinned && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Pinned" }),
+      review.verifiedBuyer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Verified Buyer" }),
+      review.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { style: { display: "block", marginTop: 4 }, children: review.translatedTitle ?? review.title }),
+      review.body && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "4px 0" }, children: review.translatedBody ?? review.body }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("small", { children: [
+        review.isAnonymous ? "Anonymous" : review.email,
+        " \xB7",
+        " ",
+        new Date(review.createdAt).toLocaleDateString(),
+        review.variantTitle ? ` \xB7 ${review.variantTitle}` : ""
+      ] }),
+      review.media.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: review.media.map(
+        (m, i) => m.mimeType.startsWith("image") ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "img",
+          {
+            src: m.url,
+            alt: `Review image ${i + 1}`,
+            width: 80,
+            height: 80,
+            style: { objectFit: "cover", borderRadius: 4 }
+          },
+          i
+        ) : null
+      ) }),
+      review.reply && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 8, paddingLeft: 12, borderLeft: "2px solid #e5e7eb" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("small", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Store Reply" }),
+          " \xB7 ",
+          new Date(review.reply.createdAt).toLocaleDateString()
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "2px 0" }, children: review.reply.body })
+      ] })
+    ] }, review.id)) }),
+    pagination.totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setPage(currentPage - 1), disabled: currentPage <= 1, children: "Previous" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+        "Page ",
+        currentPage,
+        " of ",
+        pagination.totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setPage(currentPage + 1), disabled: currentPage >= pagination.totalPages, children: "Next" })
+    ] })
+  ] });
+}
+
+// src/hooks/useWidgetGlobals.ts
+var import_react5 = require("react");
+function useWidgetGlobals({ proxyUrl, limit = 20 }) {
+  const [state, setState] = (0, import_react5.useState)({
+    data: null,
+    loading: true,
+    error: null
+  });
+  (0, import_react5.useEffect)(() => {
+    let cancelled = false;
+    const params = new URLSearchParams({ limit: String(limit) });
+    fetch(`${proxyUrl}/widget-globals?${params.toString()}`).then((res) => {
+      if (!res.ok) throw new Error(`Revova: widget-globals fetch failed (${res.status})`);
+      return res.json();
+    }).then((data) => {
+      if (!cancelled) setState({ data, loading: false, error: null });
+    }).catch((err) => {
+      if (!cancelled)
+        setState({ data: null, loading: false, error: err instanceof Error ? err : new Error(String(err)) });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [proxyUrl, limit]);
+  return state;
+}
+
+// src/components/ReviewCount.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ReviewCount({ proxyUrl, starColor, starSize, className }) {
+  const { data, loading } = useWidgetGlobals({ proxyUrl });
+  if (loading || !data?.stats?.averageRating) return null;
+  const avg = parseFloat(data.stats.averageRating);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className, style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StarRating, { rating: avg, color: starColor, size: starSize }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: data.stats.averageRating }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      "(",
+      data.stats.totalReviews,
+      ")"
+    ] })
+  ] });
+}
+
+// src/components/ReviewCarousel.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ReviewCarousel({
+  proxyUrl,
+  limit = 10,
+  autoPlay = true,
+  intervalMs = 4e3,
+  starColor,
+  className
+}) {
+  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const [index, setIndex] = (0, import_react6.useState)(0);
+  const reviews = data?.reviews ?? [];
+  import_react6.default.useEffect(() => {
+    if (!autoPlay || reviews.length < 2) return;
+    const id = setInterval(() => setIndex((i) => (i + 1) % reviews.length), intervalMs);
+    return () => clearInterval(id);
+  }, [autoPlay, intervalMs, reviews.length]);
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: "Loading\u2026" });
+  if (reviews.length === 0) return null;
+  const prev = () => setIndex((i) => (i - 1 + reviews.length) % reviews.length);
+  const next = () => setIndex((i) => (i + 1) % reviews.length);
+  const review = reviews[index];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style: { position: "relative", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: prev, "aria-label": "Previous review", style: { flexShrink: 0 }, children: "\u2039" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1, textAlign: "center", padding: "8px 0" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StarRating, { rating: review.rating, color: starColor }),
+        review.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { style: { display: "block", marginTop: 8 }, children: review.title }),
+        review.body && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { margin: "6px 0" }, children: review.body }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("small", { children: review.authorName })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: next, "aria-label": "Next review", style: { flexShrink: 0 }, children: "\u203A" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", justifyContent: "center", gap: 6, marginTop: 8 }, children: reviews.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        onClick: () => setIndex(i),
+        "aria-label": `Go to review ${i + 1}`,
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          border: "none",
+          cursor: "pointer",
+          background: i === index ? "#374151" : "#d1d5db",
+          padding: 0
+        }
+      },
+      i
+    )) })
+  ] });
+}
+
+// src/components/ReviewGallery.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ReviewGallery({
+  proxyUrl,
+  limit = 20,
+  columns = 3,
+  starColor,
+  className
+}) {
+  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const [lightbox, setLightbox] = (0, import_react7.useState)(null);
+  const items = (data?.reviews ?? []).filter((r) => r.image).map((r) => ({ url: r.image, review: r })).slice(0, limit);
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, children: "Loading gallery\u2026" });
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className,
+        style: { columns, columnGap: 8 },
+        children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            onClick: () => setLightbox(item),
+            style: {
+              display: "block",
+              width: "100%",
+              marginBottom: 8,
+              border: "none",
+              padding: 0,
+              cursor: "pointer",
+              background: "none",
+              breakInside: "avoid"
+            },
+            "aria-label": `View review photo ${i + 1}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "img",
+              {
+                src: item.url,
+                alt: `Review photo ${i + 1}`,
+                style: { width: "100%", display: "block", borderRadius: 4 },
+                loading: "lazy"
+              }
+            )
+          },
+          i
+        ))
+      }
+    ),
+    lightbox && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Review photo",
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.85)",
+          zIndex: 99999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16
+        },
+        onClick: () => setLightbox(null),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            style: {
+              background: "#fff",
+              borderRadius: 12,
+              maxWidth: 540,
+              width: "100%",
+              overflow: "hidden"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "img",
+                {
+                  src: lightbox.url,
+                  alt: "Review",
+                  style: { width: "100%", display: "block", maxHeight: 320, objectFit: "cover" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: 16 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StarRating, { rating: lightbox.review.rating, color: starColor }),
+                lightbox.review.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { style: { display: "block", marginTop: 6 }, children: lightbox.review.title }),
+                lightbox.review.body && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { margin: "6px 0" }, children: lightbox.review.body }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("small", { children: lightbox.review.authorName })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: () => setLightbox(null),
+                  style: {
+                    position: "absolute",
+                    top: 12,
+                    right: 12,
+                    background: "#fff",
+                    border: "none",
+                    borderRadius: "50%",
+                    width: 32,
+                    height: 32,
+                    cursor: "pointer",
+                    fontSize: 18
+                  },
+                  "aria-label": "Close",
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/QnAWidget.tsx
+var import_react9 = require("react");
+
+// src/hooks/useQnA.ts
+var import_react8 = require("react");
+var INITIAL_SUBMIT = { submitting: false, success: false, error: null };
+function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" }) {
+  const [page, setPage] = (0, import_react8.useState)(initialPage);
+  const [tick, setTick] = (0, import_react8.useState)(0);
+  const [state, setState] = (0, import_react8.useState)({ data: null, loading: true, error: null });
+  const [submitState, setSubmitState] = (0, import_react8.useState)(INITIAL_SUBMIT);
+  const refetch = (0, import_react8.useCallback)(() => setTick((t) => t + 1), []);
+  (0, import_react8.useEffect)(() => {
+    let cancelled = false;
+    setState((s) => ({ ...s, loading: true, error: null }));
+    const params = new URLSearchParams({ productId, page: String(page), sort });
+    fetch(`${proxyUrl}/qna?${params.toString()}`).then((res) => {
+      if (!res.ok) throw new Error(`Revova: qna fetch failed (${res.status})`);
+      return res.json();
+    }).then((data) => {
+      if (!cancelled) setState({ data, loading: false, error: null });
+    }).catch((err) => {
+      if (!cancelled)
+        setState({ data: null, loading: false, error: err instanceof Error ? err : new Error(String(err)) });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [proxyUrl, productId, page, sort, tick]);
+  const submitQuestion = (0, import_react8.useCallback)(async (payload) => {
+    setSubmitState({ submitting: true, success: false, error: null });
+    try {
+      const res = await fetch(`${proxyUrl}/qna`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      const json = await res.json();
+      if (!res.ok) {
+        setSubmitState({ submitting: false, success: false, error: json.error ?? `Failed (${res.status})` });
+        return;
+      }
+      setSubmitState({ submitting: false, success: true, error: null });
+      refetch();
+    } catch (err) {
+      setSubmitState({ submitting: false, success: false, error: err instanceof Error ? err.message : "An error occurred." });
+    }
+  }, [proxyUrl, refetch]);
+  const submitAnswer = (0, import_react8.useCallback)(async (payload) => {
+    setSubmitState({ submitting: true, success: false, error: null });
+    try {
+      const res = await fetch(`${proxyUrl}/qna`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      const json = await res.json();
+      if (!res.ok) {
+        setSubmitState({ submitting: false, success: false, error: json.error ?? `Failed (${res.status})` });
+        return;
+      }
+      setSubmitState({ submitting: false, success: true, error: null });
+      refetch();
+    } catch (err) {
+      setSubmitState({ submitting: false, success: false, error: err instanceof Error ? err.message : "An error occurred." });
+    }
+  }, [proxyUrl, refetch]);
+  const resetSubmit = (0, import_react8.useCallback)(() => setSubmitState(INITIAL_SUBMIT), []);
+  return { ...state, setPage, currentPage: page, refetch, submitQuestion, submitAnswer, submitState, resetSubmit };
+}
+
+// src/components/QnAWidget.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function QnAWidget({ proxyUrl, productId, className }) {
+  const { data, loading, error, setPage, currentPage, submitQuestion, submitState, resetSubmit } = useQnA({
+    proxyUrl,
+    productId
+  });
+  const [showForm, setShowForm] = (0, import_react9.useState)(false);
+  const [email, setEmail] = (0, import_react9.useState)("");
+  const [displayName, setDisplayName] = (0, import_react9.useState)("");
+  const [body, setBody] = (0, import_react9.useState)("");
+  const [isAnonymous, setIsAnonymous] = (0, import_react9.useState)(false);
+  async function handleAsk(e) {
+    e.preventDefault();
+    await submitQuestion({ intent: "question", productId, email, displayName, body, isAnonymous });
+    setBody("");
+    setEmail("");
+    setDisplayName("");
+    setShowForm(false);
+  }
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, children: "Loading Q&A\u2026" });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, children: "Could not load Q&A." });
+  if (!data) return null;
+  const { questions, pagination } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { margin: 0 }, children: "Questions & Answers" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: () => {
+        setShowForm((s) => !s);
+        resetSubmit();
+      }, children: "Ask a Question" })
+    ] }),
+    showForm && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("form", { onSubmit: handleAsk, style: { marginBottom: 24 }, children: submitState.success ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Thanks! Your question has been submitted." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "qna-email", children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { id: "qna-email", type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "qna-name", children: "Name (optional)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { id: "qna-name", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: "qna-body", children: "Your Question" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "textarea",
+          {
+            id: "qna-body",
+            required: true,
+            rows: 3,
+            value: body,
+            onChange: (e) => setBody(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", checked: isAnonymous, onChange: (e) => setIsAnonymous(e.target.checked) }),
+        " ",
+        "Post anonymously"
+      ] }),
+      submitState.error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { color: "red" }, children: submitState.error }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", disabled: submitState.submitting, children: submitState.submitting ? "Submitting\u2026" : "Submit Question" })
+    ] }) }),
+    questions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "No questions yet. Be the first to ask!" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: questions.map((q) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 16, marginBottom: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: { fontWeight: 600, margin: "0 0 4px" }, children: [
+        "Q: ",
+        q.body
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("small", { children: [
+        q.displayName,
+        q.verifiedBuyer ? " \xB7 Verified Buyer" : ""
+      ] }),
+      q.answers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: { listStyle: "none", padding: "8px 0 0 16px", margin: 0 }, children: q.answers.map((a) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { style: { marginBottom: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: { margin: "0 0 2px" }, children: [
+          a.isAdminReply && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: "Store: " }),
+          a.body
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("small", { children: a.displayName })
+      ] }, a.id)) })
+    ] }, q.id)) }),
+    pagination.totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: () => setPage(currentPage - 1), disabled: currentPage <= 1, children: "Previous" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+        "Page ",
+        currentPage,
+        " of ",
+        pagination.totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: () => setPage(currentPage + 1), disabled: currentPage >= pagination.totalPages, children: "Next" })
+    ] })
+  ] });
+}
+
+// src/components/SocialProofPopup.tsx
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SocialProofPopup({
+  proxyUrl,
+  position = "bottom-left",
+  intervalMs = 8e3,
+  displayMs = 5e3,
+  starColor,
+  className
+}) {
+  const { data } = useWidgetGlobals({ proxyUrl });
+  const [current, setCurrent] = (0, import_react10.useState)(null);
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const [dismissed, setDismissed] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    const reviews = data?.reviews;
+    if (!reviews || reviews.length === 0 || dismissed) return;
+    let idx = 0;
+    function show() {
+      const review = reviews[idx % reviews.length];
+      if (review) {
+        setCurrent(review);
+        setVisible(true);
+        idx++;
+        setTimeout(() => setVisible(false), displayMs);
+      }
+    }
+    const initial = setTimeout(show, 2e3);
+    const interval = setInterval(show, intervalMs);
+    return () => {
+      clearTimeout(initial);
+      clearInterval(interval);
+    };
+  }, [data, intervalMs, displayMs, dismissed]);
+  if (!current || !visible) return null;
+  const posStyle = position === "bottom-right" ? { bottom: 20, right: 20 } : { bottom: 20, left: 20 };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        position: "fixed",
+        zIndex: 99999,
+        ...posStyle,
+        background: "#fff",
+        borderRadius: 12,
+        boxShadow: "0 4px 20px rgba(0,0,0,0.12)",
+        padding: "12px 16px",
+        maxWidth: 280,
+        display: "flex",
+        gap: 10,
+        alignItems: "flex-start",
+        animation: "fadeInUp 0.3s ease"
+      },
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        current.image ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "img",
+          {
+            src: current.image,
+            alt: "",
+            width: 44,
+            height: 44,
+            style: { borderRadius: "50%", objectFit: "cover", flexShrink: 0 }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            style: {
+              width: 44,
+              height: 44,
+              borderRadius: "50%",
+              background: "#e5e7eb",
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 18
+            },
+            children: current.authorName[0]?.toUpperCase() ?? "?"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StarRating, { rating: current.rating, size: 13, color: starColor }),
+          current.body && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { margin: "4px 0", fontSize: 13, lineHeight: 1.4, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }, children: current.body }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("small", { style: { fontSize: 11, color: "#6b7280" }, children: [
+            current.authorName,
+            current.verifiedBuyer ? " \xB7 Verified Buyer" : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            onClick: () => {
+              setVisible(false);
+              setDismissed(true);
+            },
+            "aria-label": "Dismiss",
+            style: { background: "none", border: "none", cursor: "pointer", fontSize: 16, color: "#9ca3af", padding: 0, flexShrink: 0 },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ReviewTicker.tsx
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ReviewTicker({
+  proxyUrl,
+  limit = 20,
+  speedSeconds = 30,
+  starColor,
+  className
+}) {
+  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const trackRef = (0, import_react11.useRef)(null);
+  const reviews = data?.reviews ?? [];
+  if (loading || reviews.length === 0) return null;
+  const items = [...reviews, ...reviews];
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className,
+      style: { overflow: "hidden", position: "relative" },
+      "aria-label": "Review ticker",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
+        @keyframes rvTicker {
+          from { transform: translateX(0); }
+          to   { transform: translateX(-50%); }
+        }
+      ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            ref: trackRef,
+            style: {
+              display: "flex",
+              gap: 32,
+              animation: `rvTicker ${speedSeconds}s linear infinite`,
+              width: "max-content"
+            },
+            children: items.map((review, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4,
+                  minWidth: 220,
+                  flexShrink: 0
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StarRating, { rating: review.rating, size: 14, color: starColor }),
+                  review.body && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { style: { margin: 0, fontSize: 13, overflow: "hidden", whiteSpace: "nowrap", maxWidth: 220, textOverflow: "ellipsis" }, children: [
+                    "\u201C",
+                    review.body,
+                    "\u201D"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("small", { style: { fontSize: 11, color: "#6b7280" }, children: review.authorName })
+                ]
+              },
+              `${review.id}-${i}`
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/FloatingReviewsTab.tsx
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FloatingReviewsTab({
+  proxyUrl,
+  label = "Reviews",
+  position = "right",
+  color = "#111827",
+  limit = 5,
+  starColor,
+  className
+}) {
+  const { data } = useWidgetGlobals({ proxyUrl, limit });
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const reviews = data?.reviews ?? [];
+  const stats = data?.stats;
+  const sideStyle = position === "right" ? { right: 0, top: "50%", transform: "translateY(-50%)" } : { left: 0, top: "50%", transform: "translateY(-50%)" };
+  const panelStyle = position === "right" ? { right: 0, top: "50%", transform: "translateY(-50%)" } : { left: 0, top: "50%", transform: "translateY(-50%)" };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        className,
+        onClick: () => setOpen((s) => !s),
+        "aria-expanded": open,
+        "aria-label": `${label} panel`,
+        style: {
+          position: "fixed",
+          zIndex: 9999,
+          ...sideStyle,
+          background: color,
+          color: "#fff",
+          border: "none",
+          cursor: "pointer",
+          padding: "10px 14px",
+          writingMode: "vertical-rl",
+          textOrientation: "mixed",
+          transform: `translateY(-50%) rotate(${position === "right" ? 180 : 0}deg)`,
+          borderRadius: position === "right" ? "8px 0 0 8px" : "0 8px 8px 0",
+          fontSize: 13,
+          fontWeight: 600
+        },
+        children: label
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": label,
+        style: {
+          position: "fixed",
+          zIndex: 99999,
+          ...panelStyle,
+          background: "#fff",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.16)",
+          width: 300,
+          maxHeight: "80vh",
+          overflowY: "auto",
+          padding: 20,
+          borderRadius: 8
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: () => setOpen(false), "aria-label": "Close", style: { background: "none", border: "none", cursor: "pointer", fontSize: 18 }, children: "\xD7" })
+          ] }),
+          stats && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { marginBottom: 12, display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StarRating, { rating: parseFloat(stats.averageRating ?? "0"), color: starColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: 13 }, children: [
+              stats.averageRating,
+              " (",
+              stats.totalReviews,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: reviews.map((r) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { style: { borderBottom: "1px solid #f3f4f6", paddingBottom: 12, marginBottom: 12 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StarRating, { rating: r.rating, size: 13, color: starColor }),
+            r.body && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { margin: "4px 0", fontSize: 13 }, children: r.body }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("small", { style: { fontSize: 11, color: "#6b7280" }, children: r.authorName })
+          ] }, r.id)) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/TrustBadge.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function TrustBadge({ proxyUrl, style: badgeStyle = "pill", starColor, className }) {
+  const { data, loading } = useWidgetGlobals({ proxyUrl });
+  if (loading || !data?.stats?.averageRating) return null;
+  const avg = parseFloat(data.stats.averageRating);
+  const count = data.stats.totalReviews;
+  if (badgeStyle === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className, style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarRating, { rating: avg, color: starColor, size: 14 }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: data.stats.averageRating }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: "#6b7280" }, children: [
+        "(",
+        count,
+        " review",
+        count !== 1 ? "s" : "",
+        ")"
+      ] })
+    ] });
+  }
+  if (badgeStyle === "card") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className,
+        style: {
+          display: "inline-flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 6,
+          padding: "16px 24px",
+          background: "#fff",
+          borderRadius: 12,
+          boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { style: { fontSize: 32, lineHeight: 1 }, children: data.stats.averageRating }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarRating, { rating: avg, size: 20, color: starColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { fontSize: 13, color: "#6b7280" }, children: [
+            count,
+            " review",
+            count !== 1 ? "s" : ""
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        background: "#fff",
+        border: "1px solid #e5e7eb",
+        borderRadius: 999,
+        padding: "4px 12px",
+        fontSize: 13,
+        fontWeight: 600
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarRating, { rating: avg, size: 13, color: starColor }),
+        data.stats.averageRating,
+        " \xB7 ",
+        count,
+        " review",
+        count !== 1 ? "s" : ""
+      ]
+    }
+  );
+}
+
+// src/components/FloatingReviewButton.tsx
+var import_react14 = require("react");
+
+// src/hooks/useForm.ts
+var import_react13 = require("react");
+function useForm(proxyUrl, productId) {
+  const [state, setState] = (0, import_react13.useState)({ form: null, loading: true, error: null });
+  (0, import_react13.useEffect)(() => {
+    let cancelled = false;
+    const params = new URLSearchParams({ productId, limit: "1", page: "1" });
+    fetch(`${proxyUrl}/reviews?${params.toString()}`).then((res) => {
+      if (!res.ok) throw new Error(`Revova: form fetch failed (${res.status})`);
+      return res.json();
+    }).then(({ form }) => {
+      if (!cancelled) setState({ form, loading: false, error: null });
+    }).catch((err) => {
+      if (!cancelled)
+        setState({
+          form: null,
+          loading: false,
+          error: err instanceof Error ? err : new Error(String(err))
+        });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [proxyUrl, productId]);
+  return state;
+}
+
+// src/components/FloatingReviewButton.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FloatingReviewButton({
+  proxyUrl,
+  productId,
+  text = "Write a Review",
+  color = "#111827",
+  position = "bottom-right",
+  className
+}) {
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const { form, loading } = useForm(proxyUrl, productId);
+  const posStyle = position === "bottom-right" ? { bottom: 24, right: 24 } : { bottom: 24, left: 24 };
+  if (!loading && !form) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        className,
+        onClick: () => setOpen(true),
+        disabled: loading,
+        "aria-label": text,
+        style: {
+          position: "fixed",
+          zIndex: 9998,
+          ...posStyle,
+          background: color,
+          color: "#fff",
+          border: "none",
+          borderRadius: 999,
+          padding: "12px 20px",
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: loading ? "wait" : "pointer",
+          boxShadow: "0 4px 16px rgba(0,0,0,0.2)",
+          opacity: loading ? 0.7 : 1
+        },
+        children: [
+          "\u270E ",
+          text
+        ]
+      }
+    ),
+    open && form && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Write a Review",
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.5)",
+          zIndex: 99999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16
+        },
+        onClick: () => setOpen(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            style: {
+              background: "#fff",
+              borderRadius: 12,
+              padding: 24,
+              maxWidth: 480,
+              width: "100%",
+              maxHeight: "90vh",
+              overflowY: "auto"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: { margin: 0, fontSize: 18 }, children: "Write a Review" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    onClick: () => setOpen(false),
+                    "aria-label": "Close",
+                    style: { background: "none", border: "none", cursor: "pointer", fontSize: 20, lineHeight: 1 },
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                ReviewForm,
+                {
+                  proxyUrl,
+                  productId,
+                  form,
+                  onSuccess: () => setOpen(false)
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/hooks/useHelpfulVote.ts
+var import_react15 = require("react");
+function useHelpfulVote(proxyUrl) {
+  const [loading, setLoading] = (0, import_react15.useState)(false);
+  const [voted, setVoted] = (0, import_react15.useState)(false);
+  const vote = (0, import_react15.useCallback)(
+    async (payload) => {
+      if (voted || loading) return;
+      setLoading(true);
+      try {
+        await fetch(`${proxyUrl}/helpful`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        setVoted(true);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [proxyUrl, voted, loading]
+  );
+  return { vote, loading, voted };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingReviewButton,
+  FloatingReviewsTab,
+  QnAWidget,
+  ReviewCarousel,
+  ReviewCount,
+  ReviewForm,
+  ReviewGallery,
+  ReviewTicker,
+  ReviewWidget,
+  SocialProofPopup,
+  StarRating,
+  TrustBadge,
+  useForm,
+  useHelpfulVote,
+  useQnA,
+  useReviews,
+  useSubmitReview,
+  useWidgetGlobals
+});