@geenius/feedback 0.1.0 → 0.3.0

package/packages/react/dist/index.js

@@ -0,0 +1,545 @@
+import { createContext, useContext, useState, useMemo, useCallback, useEffect } from 'react';
+import { defaultFeedbackConfig, calcFeedbackStats, STATUS_CONFIG, PRIORITY_CONFIG, TYPE_CONFIG, formatRelativeTime, FEEDBACK_TYPES, calcNPSStats, FEEDBACK_STATUSES, FEEDBACK_PRIORITIES } from '@geenius/feedback-shared';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/provider/FeedbackProvider.tsx
+var FeedbackContext = createContext(defaultFeedbackConfig);
+function FeedbackProvider({ children, config }) {
+  const value = { ...defaultFeedbackConfig, ...config };
+  return /* @__PURE__ */ jsx(FeedbackContext.Provider, { value, children });
+}
+function useFeedbackConfig() {
+  return useContext(FeedbackContext);
+}
+function useFeedback(items) {
+  const [filter, setFilter] = useState({ sort: "newest" });
+  const isLoading = items === void 0;
+  const stats = useMemo(() => calcFeedbackStats(items ?? []), [items]);
+  const filteredItems = useMemo(() => {
+    let result = items ?? [];
+    if (filter.type) result = result.filter((i) => i.type === filter.type);
+    if (filter.status) result = result.filter((i) => i.status === filter.status);
+    if (filter.priority) result = result.filter((i) => i.priority === filter.priority);
+    if (filter.search) {
+      const q = filter.search.toLowerCase();
+      result = result.filter((i) => i.title.toLowerCase().includes(q) || i.description.toLowerCase().includes(q));
+    }
+    if (filter.sort === "votes") result = [...result].sort((a, b) => b.votes - a.votes);
+    return result;
+  }, [items, filter]);
+  return { items: filteredItems, allItems: items ?? [], stats, filter, setFilter, isLoading };
+}
+function useFeedbackForm(submitFn) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const [formData, setFormData] = useState({ type: "general", title: "", description: "" });
+  const validate = useCallback(() => {
+    if (!formData.title.trim()) return "Title is required";
+    if (formData.title.trim().length < 3) return "Title must be at least 3 characters";
+    if (!formData.description.trim()) return "Description is required";
+    if (formData.description.trim().length < 10) return "Description must be at least 10 characters";
+    return null;
+  }, [formData]);
+  const submit = useCallback(async () => {
+    const err = validate();
+    if (err) {
+      setError(err);
+      return;
+    }
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const browser = typeof navigator !== "undefined" ? navigator.userAgent : void 0;
+      await submitFn({ ...formData, browser, url: formData.url || (typeof window !== "undefined" ? window.location.href : void 0) });
+      setSuccess(true);
+      setFormData({ type: "general", title: "", description: "" });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Submission failed");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [formData, submitFn, validate]);
+  const reset = useCallback(() => {
+    setFormData({ type: "general", title: "", description: "" });
+    setError(null);
+    setSuccess(false);
+  }, []);
+  return { formData, setFormData, submit, isSubmitting, error, success, reset, validate };
+}
+var NPS_STORAGE_KEY = "geenius-nps-last-shown";
+function useNPS(submitFn, intervalDays = 90) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showSurvey, setShowSurvey] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const last = localStorage.getItem(NPS_STORAGE_KEY);
+    if (!last) {
+      setShowSurvey(true);
+      return;
+    }
+    const daysSince = (Date.now() - Number(last)) / (1e3 * 60 * 60 * 24);
+    if (daysSince >= intervalDays) setShowSurvey(true);
+  }, [intervalDays]);
+  const submit = useCallback(async (score, comment) => {
+    setIsSubmitting(true);
+    try {
+      await submitFn(score, comment);
+      localStorage.setItem(NPS_STORAGE_KEY, String(Date.now()));
+      setShowSurvey(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [submitFn]);
+  const dismiss = useCallback(() => {
+    setShowSurvey(false);
+    localStorage.setItem(NPS_STORAGE_KEY, String(Date.now()));
+  }, []);
+  return { submit, isSubmitting, showSurvey, dismiss };
+}
+function useFeedbackAdmin(items, mutations) {
+  const [search, setSearch] = useState("");
+  const isLoading = items === void 0;
+  const stats = useMemo(() => calcFeedbackStats(items ?? []), [items]);
+  const filteredItems = useMemo(() => {
+    if (!search) return items ?? [];
+    const q = search.toLowerCase();
+    return (items ?? []).filter((i) => i.title.toLowerCase().includes(q) || i.description.toLowerCase().includes(q) || i.userEmail?.toLowerCase().includes(q));
+  }, [items, search]);
+  return { items: filteredItems, allItems: items ?? [], stats, search, setSearch, isLoading, ...mutations };
+}
+function StatusBadge({ status }) {
+  const cfg = STATUS_CONFIG[status];
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-medium", style: { background: `${cfg.color}22`, color: cfg.color }, children: [
+    /* @__PURE__ */ jsx("span", { children: cfg.emoji }),
+    cfg.label
+  ] });
+}
+function PriorityBadge({ priority }) {
+  const cfg = PRIORITY_CONFIG[priority];
+  return /* @__PURE__ */ jsx("span", { className: "rounded-full px-2 py-0.5 text-[10px] font-medium", style: { background: `${cfg.color}22`, color: cfg.color }, children: cfg.label });
+}
+function TypeBadge({ type }) {
+  const cfg = TYPE_CONFIG[type];
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium", style: { background: `${cfg.color}22`, color: cfg.color }, children: [
+    /* @__PURE__ */ jsx("span", { children: cfg.icon }),
+    cfg.label
+  ] });
+}
+function FeedbackCard({ item, onVote, onClick, hasVoted }) {
+  return /* @__PURE__ */ jsxs("div", { className: "group flex gap-3 rounded-xl border border-white/8 bg-white/[0.02] p-4 transition-all hover:border-indigo-500/20 hover:bg-white/[0.04] cursor-pointer", onClick: () => onClick?.(item.id), children: [
+    onVote && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onVote(item.id);
+        },
+        className: `flex flex-col items-center gap-0.5 rounded-lg px-2 py-1.5 text-xs font-bold transition-colors ${hasVoted ? "bg-indigo-500/15 text-indigo-400" : "bg-white/5 text-white/30 hover:bg-white/10 hover:text-white/50"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: hasVoted ? "\u25B2" : "\u25B3" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: item.votes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1 flex-wrap", children: [
+        /* @__PURE__ */ jsx(TypeBadge, { type: item.type }),
+        /* @__PURE__ */ jsx(StatusBadge, { status: item.status }),
+        /* @__PURE__ */ jsx(PriorityBadge, { priority: item.priority })
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white/90 mb-0.5 truncate", children: item.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-white/40 line-clamp-2", children: item.description }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3 text-[10px] text-white/25", children: [
+        item.userName && /* @__PURE__ */ jsx("span", { children: item.userName }),
+        /* @__PURE__ */ jsx("span", { children: formatRelativeTime(item.createdAt) }),
+        item.tags.length > 0 && item.tags.map((t) => /* @__PURE__ */ jsx("span", { className: "rounded bg-white/5 px-1.5 py-0.5", children: t }, t))
+      ] })
+    ] })
+  ] });
+}
+function FeedbackList({ items, onVote, votedIds, onStatusChange }) {
+  if (items.length === 0) return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-16", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 text-5xl opacity-20", children: "\u{1F4AC}" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40", children: "No feedback yet" })
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item) => /* @__PURE__ */ jsx(FeedbackCard, { item, onVote, hasVoted: votedIds?.includes(item.id) }, item.id)) });
+}
+function FeedbackTypeSelector({ value, onChange }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: FEEDBACK_TYPES.map((t) => {
+    const cfg = TYPE_CONFIG[t];
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(t),
+        className: `flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition-all ${value === t ? "text-white" : "bg-white/5 text-white/50 hover:bg-white/10"}`,
+        style: value === t ? { background: cfg.color } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: cfg.icon }),
+          cfg.label
+        ]
+      },
+      t
+    );
+  }) });
+}
+function FeedbackForm({ onSubmit, onClose }) {
+  const form = useFeedbackForm(onSubmit);
+  if (form.success) return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 text-4xl", children: "\u{1F389}" }),
+    /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-white/90 mb-1", children: "Thank you!" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-white/50 mb-4", children: "Your feedback has been submitted." }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
+      form.reset();
+      onClose?.();
+    }, className: "rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium text-white", children: "Done" })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(FeedbackTypeSelector, { value: form.formData.type, onChange: (t) => form.setFormData((d) => ({ ...d, type: t })) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Short title for your feedback\u2026",
+        value: form.formData.title,
+        onChange: (e) => form.setFormData((d) => ({ ...d, title: e.target.value })),
+        className: "w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        placeholder: "Describe your feedback in detail\u2026",
+        value: form.formData.description,
+        onChange: (e) => form.setFormData((d) => ({ ...d, description: e.target.value })),
+        rows: 4,
+        className: "w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40 resize-none"
+      }
+    ),
+    form.error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-400", children: form.error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      onClose && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: "rounded-lg border border-white/10 px-4 py-2 text-xs text-white/50 hover:bg-white/5", children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: form.submit,
+          disabled: form.isSubmitting,
+          className: "rounded-lg bg-indigo-600 px-5 py-2 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50",
+          children: form.isSubmitting ? "Submitting\u2026" : "Submit"
+        }
+      )
+    ] })
+  ] });
+}
+function FeedbackWidget({ onSubmit, position = "right" }) {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(true),
+        className: `fixed top-1/2 -translate-y-1/2 z-40 rounded-l-xl bg-indigo-600 px-2 py-4 text-white shadow-lg hover:bg-indigo-500 transition-all ${position === "right" ? "right-0" : "left-0 rounded-l-none rounded-r-xl"}`,
+        style: { writingMode: "vertical-rl" },
+        children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-wider", children: "Feedback" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex justify-end", onClick: () => setIsOpen(false), children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-md bg-[#0f0f17] border-l border-white/10 p-6 overflow-y-auto", onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: "Send Feedback" }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "rounded-lg p-1.5 text-white/30 hover:bg-white/5 hover:text-white/50", children: "\u2715" })
+        ] }),
+        /* @__PURE__ */ jsx(FeedbackForm, { onSubmit, onClose: () => setIsOpen(false) })
+      ] })
+    ] })
+  ] });
+}
+function NPSSurvey({ onSubmit, onDismiss }) {
+  const [score, setScore] = useState(null);
+  const [comment, setComment] = useState("");
+  const [step, setStep] = useState("score");
+  const handleScore = (s) => {
+    setScore(s);
+    setStep("comment");
+  };
+  const handleSubmit = () => {
+    if (score !== null) {
+      onSubmit(score, comment || void 0);
+      setStep("thanks");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 z-50 w-96 rounded-2xl border border-white/10 bg-[#111118] p-6 shadow-2xl", children: [
+    step === "score" && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white/90", children: "How likely are you to recommend us?" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "text-white/20 hover:text-white/40", children: "\u2715" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-white/40 mb-4", children: "0 = Not at all, 10 = Extremely likely" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: Array.from({ length: 11 }).map((_, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleScore(i),
+          className: `flex-1 rounded-lg py-2.5 text-xs font-bold transition-all ${i <= 6 ? "hover:bg-red-500/20 hover:text-red-400" : i <= 8 ? "hover:bg-amber-500/20 hover:text-amber-400" : "hover:bg-emerald-500/20 hover:text-emerald-400"} bg-white/5 text-white/50`,
+          children: i
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between text-[10px] text-white/20", children: [
+        /* @__PURE__ */ jsx("span", { children: "Not likely" }),
+        /* @__PURE__ */ jsx("span", { children: "Very likely" })
+      ] })
+    ] }),
+    step === "comment" && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white/90 mb-1", children: "Thanks! Any additional thoughts?" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-white/40 mb-3", children: [
+        "Score: ",
+        /* @__PURE__ */ jsx("span", { className: `font-bold ${score <= 6 ? "text-red-400" : score <= 8 ? "text-amber-400" : "text-emerald-400"}`, children: score })
+      ] }),
+      /* @__PURE__ */ jsx("textarea", { value: comment, onChange: (e) => setComment(e.target.value), placeholder: "Optional feedback\u2026", rows: 3, className: "w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder-white/30 outline-none resize-none mb-3" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: handleSubmit, className: "flex-1 rounded-lg bg-indigo-600 py-2 text-xs font-medium text-white hover:bg-indigo-500", children: "Submit" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
+          onSubmit(score, void 0);
+          setStep("thanks");
+        }, className: "rounded-lg border border-white/10 px-3 py-2 text-xs text-white/50", children: "Skip" })
+      ] })
+    ] }),
+    step === "thanks" && /* @__PURE__ */ jsxs("div", { className: "text-center py-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-3xl mb-2", children: "\u{1F389}" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-white/80", children: "Thank you for your feedback!" })
+    ] })
+  ] });
+}
+function NPSResults({ responses }) {
+  const stats = calcNPSStats(responses);
+  const total = stats.totalResponses || 1;
+  const scoreColor = stats.npsScore >= 50 ? "text-emerald-400" : stats.npsScore >= 0 ? "text-amber-400" : "text-red-400";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-white/80", children: "NPS Score" }),
+      /* @__PURE__ */ jsx("span", { className: `text-3xl font-black tabular-nums ${scoreColor}`, children: stats.npsScore })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex h-5 overflow-hidden rounded-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-red-500/70", style: { width: `${stats.detractors / total * 100}%` }, title: `Detractors: ${stats.detractors}` }),
+      /* @__PURE__ */ jsx("div", { className: "bg-amber-500/70", style: { width: `${stats.passives / total * 100}%` }, title: `Passives: ${stats.passives}` }),
+      /* @__PURE__ */ jsx("div", { className: "bg-emerald-500/70", style: { width: `${stats.promoters / total * 100}%` }, title: `Promoters: ${stats.promoters}` })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2 text-center text-xs", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "block text-red-400 font-bold", children: stats.detractors }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "Detractors" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "block text-amber-400 font-bold", children: stats.passives }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "Passives" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "block text-emerald-400 font-bold", children: stats.promoters }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "Promoters" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-white/5 flex justify-between text-xs text-white/40", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Avg: ",
+        stats.averageScore,
+        "/10"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        stats.totalResponses,
+        " responses"
+      ] })
+    ] })
+  ] });
+}
+function FeedbackPublicPage({ items, onVote, votedIds }) {
+  const feedback = useFeedback(items);
+  const [activeType, setActiveType] = useState("all");
+  if (feedback.isLoading) return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-8 h-10 w-48 animate-pulse rounded-lg bg-white/5" }),
+    /* @__PURE__ */ jsx("div", { className: "mb-6 flex gap-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-9 w-24 animate-pulse rounded-lg bg-white/5" }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-24 animate-pulse rounded-xl bg-white/5" }, i)) })
+  ] }) });
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl px-6 py-12", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight mb-1", children: "Feedback Board" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-white/40", children: [
+        feedback.stats.total,
+        " submissions \xB7 ",
+        feedback.stats.byStatus.open,
+        " open"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search feedback\u2026",
+          value: feedback.filter.search ?? "",
+          onChange: (e) => feedback.setFilter({ ...feedback.filter, search: e.target.value || void 0 }),
+          className: "w-56 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveType("all");
+              feedback.setFilter({ ...feedback.filter, type: void 0 });
+            },
+            className: `rounded-lg px-3 py-1.5 text-xs font-medium ${activeType === "all" ? "bg-indigo-600 text-white" : "bg-white/5 text-white/50 hover:bg-white/10"}`,
+            children: [
+              "All (",
+              feedback.stats.total,
+              ")"
+            ]
+          }
+        ),
+        FEEDBACK_TYPES.map((t) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveType(t);
+              feedback.setFilter({ ...feedback.filter, type: t });
+            },
+            className: `rounded-lg px-3 py-1.5 text-xs font-medium ${activeType === t ? "text-white" : "bg-white/5 text-white/50 hover:bg-white/10"}`,
+            style: activeType === t ? { background: TYPE_CONFIG[t].color } : void 0,
+            children: [
+              TYPE_CONFIG[t].icon,
+              " ",
+              TYPE_CONFIG[t].label,
+              " (",
+              feedback.stats.byType[t],
+              ")"
+            ]
+          },
+          t
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-1.5", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => feedback.setFilter({ ...feedback.filter, sort: "newest" }), className: `rounded-lg px-3 py-1.5 text-xs ${feedback.filter.sort === "newest" ? "bg-white/10 text-white/80" : "text-white/40"}`, children: "Newest" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => feedback.setFilter({ ...feedback.filter, sort: "votes" }), className: `rounded-lg px-3 py-1.5 text-xs ${feedback.filter.sort === "votes" ? "bg-white/10 text-white/80" : "text-white/40"}`, children: "Top voted" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FeedbackList, { items: feedback.items, onVote, votedIds })
+  ] }) });
+}
+function FeedbackAdminPage({ items, npsResponses, mutations }) {
+  const admin = useFeedbackAdmin(items, mutations);
+  if (admin.isLoading) return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-8 h-10 w-48 animate-pulse rounded-lg bg-white/5" }),
+    /* @__PURE__ */ jsx("div", { className: "mb-6 grid grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-white/5" }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "h-96 animate-pulse rounded-xl bg-white/5" })
+  ] }) });
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6 py-12", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight mb-8", children: "Feedback Admin" }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 grid grid-cols-2 gap-4 md:grid-cols-5", children: [
+      /* @__PURE__ */ jsx(StatCard, { label: "Total", value: admin.stats.total, icon: "\u{1F4CA}" }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Open", value: admin.stats.byStatus.open, icon: "\u{1F4EC}", color: "text-blue-400" }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Planned", value: admin.stats.byStatus.planned, icon: "\u{1F4CB}", color: "text-purple-300" }),
+      /* @__PURE__ */ jsx(StatCard, { label: "In Progress", value: admin.stats.byStatus["in-progress"], icon: "\u{1F6A7}", color: "text-indigo-300" }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Done", value: admin.stats.byStatus.done, icon: "\u2705", color: "text-emerald-400" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Search\u2026", value: admin.search, onChange: (e) => admin.setSearch(e.target.value), className: "w-64 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/30", children: [
+            admin.items.length,
+            " items"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-xl border border-white/8", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-white/8 bg-white/[0.02]", children: [
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-white/40 uppercase", children: "Type" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-white/40 uppercase", children: "Title" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-white/40 uppercase", children: "Status" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-white/40 uppercase", children: "Priority" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-white/40 uppercase", children: "Votes" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-white/40 uppercase", children: "Date" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right text-xs font-medium text-white/40 uppercase", children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-white/5", children: admin.items.map((item) => /* @__PURE__ */ jsxs("tr", { className: "group hover:bg-white/[0.02]", children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(TypeBadge, { type: item.type }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 max-w-xs truncate text-white/80 font-medium", children: item.title }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("select", { value: item.status, onChange: (e) => admin.updateStatus(item.id, e.target.value), className: "rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-xs text-white outline-none", children: FEEDBACK_STATUSES.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: STATUS_CONFIG[s].label }, s)) }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("select", { value: item.priority, onChange: (e) => admin.updatePriority(item.id, e.target.value), className: "rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-xs text-white outline-none", children: FEEDBACK_PRIORITIES.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: PRIORITY_CONFIG[p].label }, p)) }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 tabular-nums text-white/50", children: item.votes }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs text-white/30", children: formatRelativeTime(item.createdAt) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => admin.deleteFeedback(item.id), className: "rounded px-2 py-1 text-xs text-white/20 hover:text-red-400 hover:bg-red-500/10 opacity-0 group-hover:opacity-100", children: "Delete" }) })
+          ] }, item.id)) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        npsResponses && /* @__PURE__ */ jsx(NPSResults, { responses: npsResponses }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-5", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-white/80 mb-3", children: "By Type" }),
+          Object.entries(admin.stats.byType).map(([t, c]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-1.5", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/50 capitalize", children: [
+              TYPE_CONFIG[t]?.icon,
+              " ",
+              t
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-white/70", children: c })
+          ] }, t))
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function StatCard({ label, value, icon, color }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-lg", children: icon }),
+      /* @__PURE__ */ jsx("span", { className: `text-2xl font-bold tabular-nums ${color ?? "text-white/90"}`, children: value })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-white/40", children: label })
+  ] });
+}
+function FeedbackWidgetPage({ onSubmit }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[#090a0f] text-white flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-2", children: "Feedback Widget" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40 mb-8", children: 'Click the floating "Feedback" tab on the right edge to open the feedback form.' }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-6 text-left", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white/80 mb-3", children: "Features" }),
+        /* @__PURE__ */ jsxs("ul", { className: "space-y-2 text-xs text-white/50", children: [
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: "\u2713" }),
+            " Floating edge tab trigger"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: "\u2713" }),
+            " Type selector (Bug/Feature/Suggestion/General)"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: "\u2713" }),
+            " Title + description form with validation"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: "\u2713" }),
+            " Auto-captures page URL + browser"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: "\u2713" }),
+            " Success confirmation"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FeedbackWidget, { onSubmit })
+  ] });
+}
+
+export { FeedbackAdminPage, FeedbackCard, FeedbackForm, FeedbackList, FeedbackProvider, FeedbackPublicPage, FeedbackTypeSelector, FeedbackWidget, FeedbackWidgetPage, NPSResults, NPSSurvey, PriorityBadge, StatusBadge, TypeBadge, useFeedback, useFeedbackAdmin, useFeedbackConfig, useFeedbackForm, useNPS };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map