@stephenov/feedbackwidget 0.2.1 → 0.3.1

package/dist/auto.js

@@ -0,0 +1,1529 @@
+"use strict";
+"use client";
+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/auto.tsx
+var auto_exports = {};
+__export(auto_exports, {
+  AutoFeedbackWidget: () => AutoFeedbackWidget,
+  default: () => auto_default
+});
+module.exports = __toCommonJS(auto_exports);
+var import_react5 = require("react");
+
+// src/components/FeedbackWidget.tsx
+var import_react4 = require("react");
+
+// src/components/FeedbackTrigger.tsx
+var import_react = require("react");
+
+// src/utils.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+function getBrowserInfo() {
+  if (typeof window === "undefined") return {};
+  return {
+    userAgent: navigator.userAgent,
+    language: navigator.language,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    screen: {
+      width: screen.width,
+      height: screen.height
+    },
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function isVoiceSupported() {
+  if (typeof window === "undefined") return false;
+  return !!(navigator.mediaDevices && typeof MediaRecorder !== "undefined");
+}
+var DEFAULT_LABELS = {
+  triggerTooltip: "Send feedback",
+  panelTitle: "Send Feedback",
+  voiceButton: "Voice",
+  textButton: "Type",
+  submitButton: "Send Feedback",
+  successMessage: "Thanks for your feedback!",
+  placeholder: "What's on your mind?"
+};
+
+// src/components/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ZapIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+    }
+  );
+}
+function MicIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+      ]
+    }
+  );
+}
+function TypeIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "4 7 4 4 20 4 20 7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", x2: "15", y1: "20", y2: "20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "4", y2: "20" })
+      ]
+    }
+  );
+}
+function XIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function ImagePlusIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", x2: "22", y1: "5", y2: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "19", x2: "19", y1: "2", y2: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+      ]
+    }
+  );
+}
+function CheckIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function LoaderIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      style: { animation: "spin 1s linear infinite" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function SquareIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "14", height: "14", x: "5", y: "5", rx: "2" })
+    }
+  );
+}
+function AlertCircleIcon({ className, size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+      ]
+    }
+  );
+}
+
+// src/components/FeedbackTrigger.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var POSITION_KEY = "feedbackwidget-trigger-position";
+var DEFAULT_OFFSET = 24;
+var BUTTON_SIZE = 52;
+function FeedbackTrigger({
+  onClick,
+  isOpen,
+  position = "bottom-right",
+  accentColor = "#BDE0C2",
+  tooltip = "Send feedback"
+}) {
+  const [coords, setCoords] = (0, import_react.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [dragStart, setDragStart] = (0, import_react.useState)(null);
+  const [hasMoved, setHasMoved] = (0, import_react.useState)(false);
+  const buttonRef = (0, import_react.useRef)(null);
+  const getDefaultPosition = (0, import_react.useCallback)(() => {
+    const w = typeof window !== "undefined" ? window.innerWidth : 1024;
+    const h = typeof window !== "undefined" ? window.innerHeight : 768;
+    switch (position) {
+      case "top-left":
+        return { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+      case "top-right":
+        return { x: w - BUTTON_SIZE - DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+      case "bottom-left":
+        return { x: DEFAULT_OFFSET, y: h - BUTTON_SIZE - DEFAULT_OFFSET - 80 };
+      case "bottom-right":
+      default:
+        return { x: w - BUTTON_SIZE - DEFAULT_OFFSET, y: h - BUTTON_SIZE - DEFAULT_OFFSET - 80 };
+    }
+  }, [position]);
+  (0, import_react.useEffect)(() => {
+    const saved = localStorage.getItem(POSITION_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        const maxX = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
+        const maxY = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
+        setCoords({
+          x: Math.min(Math.max(DEFAULT_OFFSET, parsed.x), maxX),
+          y: Math.min(Math.max(DEFAULT_OFFSET, parsed.y), maxY)
+        });
+      } catch {
+        setCoords(getDefaultPosition());
+      }
+    } else {
+      setCoords(getDefaultPosition());
+    }
+  }, [getDefaultPosition]);
+  (0, import_react.useEffect)(() => {
+    const handleResize = () => {
+      if (coords) {
+        const maxX = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
+        const maxY = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
+        const newX = Math.min(coords.x, maxX);
+        const newY = Math.min(coords.y, maxY);
+        if (newX !== coords.x || newY !== coords.y) {
+          setCoords({ x: newX, y: newY });
+        }
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [coords]);
+  const savePosition = (0, import_react.useCallback)((pos) => {
+    localStorage.setItem(POSITION_KEY, JSON.stringify(pos));
+  }, []);
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    setIsDragging(true);
+    setHasMoved(false);
+    setDragStart({ x: e.clientX, y: e.clientY });
+  };
+  const handleTouchStart = (e) => {
+    const touch = e.touches[0];
+    setIsDragging(true);
+    setHasMoved(false);
+    setDragStart({ x: touch.clientX, y: touch.clientY });
+  };
+  const handleMove = (0, import_react.useCallback)(
+    (clientX, clientY) => {
+      if (!isDragging || !dragStart || !coords) return;
+      const deltaX = clientX - dragStart.x;
+      const deltaY = clientY - dragStart.y;
+      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+        setHasMoved(true);
+      }
+      const maxX = window.innerWidth - BUTTON_SIZE - DEFAULT_OFFSET;
+      const maxY = window.innerHeight - BUTTON_SIZE - DEFAULT_OFFSET;
+      const newX = Math.min(Math.max(DEFAULT_OFFSET, coords.x + deltaX), maxX);
+      const newY = Math.min(Math.max(DEFAULT_OFFSET, coords.y + deltaY), maxY);
+      setCoords({ x: newX, y: newY });
+      setDragStart({ x: clientX, y: clientY });
+    },
+    [isDragging, dragStart, coords]
+  );
+  const handleMouseMove = (0, import_react.useCallback)(
+    (e) => handleMove(e.clientX, e.clientY),
+    [handleMove]
+  );
+  const handleTouchMove = (0, import_react.useCallback)(
+    (e) => handleMove(e.touches[0].clientX, e.touches[0].clientY),
+    [handleMove]
+  );
+  const handleEnd = (0, import_react.useCallback)(() => {
+    if (isDragging && coords) {
+      savePosition(coords);
+    }
+    setIsDragging(false);
+    setDragStart(null);
+  }, [isDragging, coords, savePosition]);
+  (0, import_react.useEffect)(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleEnd);
+      window.addEventListener("touchmove", handleTouchMove, { passive: false });
+      window.addEventListener("touchend", handleEnd);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleEnd);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, handleMouseMove, handleTouchMove, handleEnd]);
+  const handleClick = () => {
+    if (!hasMoved) {
+      onClick();
+    }
+  };
+  if (!coords || isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref: buttonRef,
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      onClick: handleClick,
+      className: cn(
+        "fw-trigger",
+        isDragging && "fw-trigger--dragging"
+      ),
+      style: {
+        left: coords.x,
+        top: coords.y,
+        width: BUTTON_SIZE,
+        height: BUTTON_SIZE,
+        backgroundColor: accentColor
+      },
+      title: tooltip,
+      "aria-label": tooltip,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZapIcon, { size: 24 })
+    }
+  );
+}
+
+// src/components/FeedbackPanel.tsx
+var React = __toESM(require("react"));
+var import_react3 = require("react");
+
+// src/components/VoiceRecorder.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MAX_DURATION_SECONDS = 120;
+function VoiceRecorder({
+  onSubmit,
+  isSubmitting,
+  maxDuration = MAX_DURATION_SECONDS,
+  accentColor = "#BDE0C2"
+}) {
+  const [isRecording, setIsRecording] = (0, import_react2.useState)(false);
+  const [duration, setDuration] = (0, import_react2.useState)(0);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [isSupported, setIsSupported] = (0, import_react2.useState)(true);
+  const [audioLevel, setAudioLevel] = (0, import_react2.useState)(0);
+  const mediaRecorderRef = (0, import_react2.useRef)(null);
+  const chunksRef = (0, import_react2.useRef)([]);
+  const timerRef = (0, import_react2.useRef)(null);
+  const streamRef = (0, import_react2.useRef)(null);
+  const analyzerRef = (0, import_react2.useRef)(null);
+  const animationRef = (0, import_react2.useRef)(null);
+  const durationRef = (0, import_react2.useRef)(0);
+  (0, import_react2.useEffect)(() => {
+    setIsSupported(isVoiceSupported());
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      stopRecording();
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  const updateAudioLevel = (0, import_react2.useCallback)(() => {
+    if (!analyzerRef.current || !isRecording) return;
+    const dataArray = new Uint8Array(analyzerRef.current.frequencyBinCount);
+    analyzerRef.current.getByteFrequencyData(dataArray);
+    const average = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
+    setAudioLevel(average / 255);
+    animationRef.current = requestAnimationFrame(updateAudioLevel);
+  }, [isRecording]);
+  const startRecording = async () => {
+    setError(null);
+    chunksRef.current = [];
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const audioContext = new AudioContext();
+      const source = audioContext.createMediaStreamSource(stream);
+      const analyzer = audioContext.createAnalyser();
+      analyzer.fftSize = 256;
+      source.connect(analyzer);
+      analyzerRef.current = analyzer;
+      const mimeType = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : MediaRecorder.isTypeSupported("audio/mp4") ? "audio/mp4" : "audio/ogg";
+      const mediaRecorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+      mediaRecorder.onstop = async () => {
+        const audioBlob = new Blob(chunksRef.current, { type: mimeType });
+        const finalDuration = durationRef.current;
+        if (streamRef.current) {
+          streamRef.current.getTracks().forEach((track) => track.stop());
+          streamRef.current = null;
+        }
+        if (audioBlob.size > 0 && finalDuration > 0) {
+          await onSubmit(audioBlob, finalDuration);
+        }
+      };
+      mediaRecorder.start(1e3);
+      setIsRecording(true);
+      setDuration(0);
+      durationRef.current = 0;
+      timerRef.current = setInterval(() => {
+        setDuration((prev) => {
+          const newDuration = prev + 1;
+          durationRef.current = newDuration;
+          if (newDuration >= maxDuration) {
+            stopRecording();
+          }
+          return newDuration;
+        });
+      }, 1e3);
+      animationRef.current = requestAnimationFrame(updateAudioLevel);
+    } catch (err) {
+      console.error("Error starting recording:", err);
+      if (err instanceof Error) {
+        if (err.name === "NotAllowedError") {
+          setError("Microphone access denied. Please allow microphone access.");
+        } else if (err.name === "NotFoundError") {
+          setError("No microphone found. Please connect a microphone.");
+        } else {
+          setError("Failed to start recording. Please try typing instead.");
+        }
+      }
+    }
+  };
+  const stopRecording = () => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsRecording(false);
+    setAudioLevel(0);
+  };
+  if (!isSupported) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fw-voice-unsupported", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fw-voice-error-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertCircleIcon, { size: 32 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
+        "Voice recording not supported in this browser.",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+        "Please use the Type option instead."
+      ] })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fw-voice-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fw-voice-error-icon fw-voice-error-icon--error", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertCircleIcon, { size: 32 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: () => setError(null),
+          className: "fw-voice-retry-btn",
+          children: "Try Again"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fw-voice-recorder", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        onClick: isRecording ? stopRecording : startRecording,
+        disabled: isSubmitting,
+        className: cn(
+          "fw-voice-btn",
+          isRecording && "fw-voice-btn--recording",
+          isSubmitting && "fw-voice-btn--disabled"
+        ),
+        style: {
+          backgroundColor: isRecording ? "#ef4444" : accentColor
+        },
+        children: [
+          isRecording && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "fw-voice-pulse",
+              style: {
+                transform: `scale(${1 + audioLevel * 0.3})`,
+                opacity: 0.5 + audioLevel * 0.5
+              }
+            }
+          ),
+          isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderIcon, { size: 40, className: "fw-voice-icon fw-voice-icon--spin" }) : isRecording ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SquareIcon, { size: 40, className: "fw-voice-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicIcon, { size: 40, className: "fw-voice-icon" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fw-voice-status", children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fw-voice-text", children: "Sending feedback..." }) : isRecording ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fw-voice-timer", children: formatDuration(duration) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fw-voice-hint", children: "Tap to stop and send" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "fw-voice-limit", children: [
+        "Max ",
+        Math.floor(maxDuration / 60),
+        " minutes"
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fw-voice-cta", children: "Tap to record" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fw-voice-hint", children: "Share your feedback by voice" })
+    ] }) }),
+    isRecording && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fw-voice-visualizer", children: [...Array(7)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: "fw-voice-bar",
+        style: {
+          height: `${Math.max(8, audioLevel * 100 * Math.sin(i + Date.now() / 200) % 32)}px`,
+          backgroundColor: "#ef4444"
+        }
+      },
+      i
+    )) })
+  ] });
+}
+
+// src/api/client.ts
+var API_BASE = "https://feedbackwidget-api.vercel.app/api/v1";
+var FeedbackApiClient = class {
+  constructor(apiKey, baseUrl) {
+    this.apiKey = apiKey;
+    this.baseUrl = baseUrl || API_BASE;
+  }
+  /** Validate API key and get project config */
+  async validate() {
+    try {
+      const response = await fetch(`${this.baseUrl}/validate`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${this.apiKey}`
+        }
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        return {
+          valid: false,
+          error: error.message || `HTTP ${response.status}`
+        };
+      }
+      return await response.json();
+    } catch (error) {
+      return {
+        valid: false,
+        error: error instanceof Error ? error.message : "Network error"
+      };
+    }
+  }
+  /** Submit feedback */
+  async submit(params) {
+    const formData = new FormData();
+    formData.append("type", params.type);
+    formData.append("page_path", params.pagePath);
+    formData.append("page_title", params.pageTitle);
+    formData.append("browser_info", JSON.stringify(getBrowserInfo()));
+    if (params.type === "text" && params.message) {
+      formData.append("message", params.message);
+    }
+    if (params.type === "voice" && params.audioBlob) {
+      formData.append("audio", params.audioBlob, "feedback.webm");
+      if (params.audioDuration) {
+        formData.append("audio_duration", String(Math.round(params.audioDuration)));
+      }
+    }
+    if (params.screenshots && params.screenshots.length > 0) {
+      params.screenshots.forEach((file, index) => {
+        formData.append(`screenshot_${index}`, file);
+      });
+      formData.append("screenshot_count", String(params.screenshots.length));
+    }
+    if (params.user) {
+      if (params.user.id) formData.append("user_id", params.user.id);
+      if (params.user.email) formData.append("user_email", params.user.email);
+      if (params.user.name) formData.append("user_name", params.user.name);
+      const { id, email, name, ...rest } = params.user;
+      if (Object.keys(rest).length > 0) {
+        formData.append("user_metadata", JSON.stringify(rest));
+      }
+    }
+    if (params.metadata) {
+      formData.append("custom_metadata", JSON.stringify(params.metadata));
+    }
+    const response = await fetch(`${this.baseUrl}/feedback`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.apiKey}`
+      },
+      body: formData
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.message || error.error || `HTTP ${response.status}`);
+    }
+    return await response.json();
+  }
+};
+function createApiClient(apiKey, baseUrl) {
+  return new FeedbackApiClient(apiKey, baseUrl);
+}
+
+// src/components/FeedbackPanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function FeedbackPanel({
+  isOpen,
+  onClose,
+  apiKey,
+  apiBaseUrl,
+  accentColor = "#BDE0C2",
+  allowVoice = true,
+  allowText = true,
+  allowScreenshots = true,
+  maxVoiceDuration = 120,
+  user,
+  metadata,
+  labels = {},
+  onSubmit,
+  onError
+}) {
+  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+  const defaultMode = allowVoice ? "voice" : "text";
+  const [mode, setMode] = (0, import_react3.useState)(defaultMode);
+  const [message, setMessage] = (0, import_react3.useState)("");
+  const [screenshots, setScreenshots] = (0, import_react3.useState)([]);
+  const [isSubmitting, setIsSubmitting] = (0, import_react3.useState)(false);
+  const [isSuccess, setIsSuccess] = (0, import_react3.useState)(false);
+  const fileInputRef = (0, import_react3.useRef)(null);
+  const apiClient = React.useMemo(
+    () => createApiClient(apiKey, apiBaseUrl),
+    [apiKey, apiBaseUrl]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (!isOpen) {
+      const timer = setTimeout(() => {
+        setMode(defaultMode);
+        setMessage("");
+        setScreenshots([]);
+        setIsSuccess(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, defaultMode]);
+  const handleScreenshotUpload = (e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+    const remaining = 5 - screenshots.length;
+    if (remaining <= 0) return;
+    const newFiles = files.slice(0, remaining);
+    setScreenshots((prev) => [...prev, ...newFiles]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const removeScreenshot = (index) => {
+    setScreenshots((prev) => prev.filter((_, i) => i !== index));
+  };
+  const getPageInfo = () => ({
+    pagePath: typeof window !== "undefined" ? window.location.pathname : "/",
+    pageTitle: typeof document !== "undefined" ? document.title : "Unknown"
+  });
+  const handleVoiceSubmit = async (audioBlob, duration) => {
+    await submitFeedback("voice", void 0, audioBlob, duration);
+  };
+  const handleTextSubmit = async () => {
+    if (!message.trim()) return;
+    await submitFeedback("text", message.trim());
+  };
+  const submitFeedback = async (type, text, audioBlob, audioDuration) => {
+    setIsSubmitting(true);
+    try {
+      const { pagePath: pagePath2, pageTitle } = getPageInfo();
+      const result = await apiClient.submit({
+        type,
+        message: text,
+        audioBlob,
+        audioDuration,
+        screenshots,
+        pagePath: pagePath2,
+        pageTitle,
+        user,
+        metadata
+      });
+      setIsSuccess(true);
+      if (onSubmit) {
+        onSubmit({
+          id: result.id,
+          type,
+          message: text,
+          pagePath: pagePath2,
+          pageTitle,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      }
+      setTimeout(() => {
+        onClose();
+      }, 1500);
+    } catch (error) {
+      console.error("Feedback submission error:", error);
+      if (onError && error instanceof Error) {
+        onError(error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const { pagePath } = getPageInfo();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fw-backdrop", onClick: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: cn(
+          "fw-panel",
+          isOpen ? "fw-panel--open" : "fw-panel--closed"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-panel-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "fw-panel-title", children: mergedLabels.panelTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: onClose, className: "fw-panel-close", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XIcon, { size: 20 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fw-panel-content", children: isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-success", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "fw-success-icon",
+                style: { backgroundColor: accentColor },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, { size: 40 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "fw-success-title", children: "Thanks!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "fw-success-text", children: mergedLabels.successMessage })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-context", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fw-context-label", children: "Page:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fw-context-value", children: pagePath })
+            ] }),
+            allowVoice && allowText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-mode-selector", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  onClick: () => setMode("voice"),
+                  disabled: isSubmitting,
+                  className: cn(
+                    "fw-mode-btn",
+                    mode === "voice" && "fw-mode-btn--active"
+                  ),
+                  style: mode === "voice" ? { backgroundColor: accentColor } : {},
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MicIcon, { size: 16 }),
+                    mergedLabels.voiceButton
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  onClick: () => setMode("text"),
+                  disabled: isSubmitting,
+                  className: cn(
+                    "fw-mode-btn",
+                    mode === "text" && "fw-mode-btn--active"
+                  ),
+                  style: mode === "text" ? { backgroundColor: accentColor } : {},
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypeIcon, { size: 16 }),
+                    mergedLabels.textButton
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fw-input-area", children: mode === "voice" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              VoiceRecorder,
+              {
+                onSubmit: handleVoiceSubmit,
+                isSubmitting,
+                maxDuration: maxVoiceDuration,
+                accentColor
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-text-input", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "textarea",
+                {
+                  value: message,
+                  onChange: (e) => setMessage(e.target.value),
+                  placeholder: mergedLabels.placeholder,
+                  className: "fw-textarea",
+                  disabled: isSubmitting
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  onClick: handleTextSubmit,
+                  disabled: !message.trim() || isSubmitting,
+                  className: "fw-submit-btn",
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderIcon, { size: 16, className: "fw-icon-spin" }),
+                    "Sending..."
+                  ] }) : mergedLabels.submitButton
+                }
+              )
+            ] }) }),
+            allowScreenshots && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-screenshots", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-screenshots-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fw-screenshots-label", children: "Screenshots" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "button",
+                  {
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: screenshots.length >= 5 || isSubmitting,
+                    className: "fw-screenshots-add",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImagePlusIcon, { size: 16 }),
+                      "Add"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    accept: "image/*",
+                    multiple: true,
+                    onChange: handleScreenshotUpload,
+                    style: { display: "none" }
+                  }
+                )
+              ] }),
+              screenshots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fw-screenshots-grid", children: screenshots.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fw-screenshot", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "img",
+                  {
+                    src: URL.createObjectURL(file),
+                    alt: `Screenshot ${index + 1}`
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    onClick: () => removeScreenshot(index),
+                    className: "fw-screenshot-remove",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XIcon, { size: 12 })
+                  }
+                )
+              ] }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "fw-screenshots-hint", children: "Optional: Add screenshots to illustrate your feedback" })
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/FeedbackWidget.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FeedbackWidget({
+  apiKey,
+  position = "bottom-right",
+  theme = "light",
+  accentColor = "#BDE0C2",
+  allowVoice = true,
+  allowText = true,
+  allowScreenshots = true,
+  maxVoiceDuration = 120,
+  user,
+  metadata,
+  onOpen,
+  onClose,
+  onSubmit,
+  onError,
+  triggerComponent,
+  labels
+}) {
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+  const [mounted, setMounted] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const handleOpen = () => {
+    setIsOpen(true);
+    onOpen?.();
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  if (!mounted) return null;
+  const apiBaseUrl = typeof window !== "undefined" ? window.__FEEDBACK_API_URL__ : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FeedbackStyles, { theme }),
+    triggerComponent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: handleOpen, children: triggerComponent }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FeedbackTrigger,
+      {
+        onClick: handleOpen,
+        isOpen,
+        position,
+        accentColor,
+        tooltip: labels?.triggerTooltip
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FeedbackPanel,
+      {
+        isOpen,
+        onClose: handleClose,
+        apiKey,
+        apiBaseUrl,
+        accentColor,
+        allowVoice,
+        allowText,
+        allowScreenshots,
+        maxVoiceDuration,
+        user,
+        metadata,
+        labels,
+        onSubmit,
+        onError
+      }
+    )
+  ] });
+}
+function FeedbackStyles({ theme }) {
+  const styles = `
+    @keyframes fw-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .fw-trigger {
+      position: fixed;
+      z-index: 9998;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      border: none;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      cursor: pointer;
+      transition: transform 0.15s, box-shadow 0.15s;
+      user-select: none;
+      touch-action: none;
+      color: #0a0a0a;
+    }
+    .fw-trigger:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+    }
+    .fw-trigger:active {
+      transform: scale(0.95);
+    }
+    .fw-trigger--dragging {
+      transform: scale(1.1);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+      cursor: grabbing;
+    }
+
+    .fw-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.3);
+      z-index: 9998;
+    }
+
+    .fw-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      max-width: 400px;
+      background: ${theme === "dark" ? "#1a1a1a" : "#ffffff"};
+      z-index: 9999;
+      box-shadow: -4px 0 24px rgba(0,0,0,0.15);
+      border-left: 1px solid ${theme === "dark" ? "#333" : "#e5e5e5"};
+      transform: translateX(100%);
+      transition: transform 0.3s ease-out;
+    }
+    .fw-panel--open {
+      transform: translateX(0);
+    }
+    .fw-panel--closed {
+      transform: translateX(100%);
+    }
+
+    .fw-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid ${theme === "dark" ? "#333" : "#f0f0f0"};
+    }
+    .fw-panel-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: ${theme === "dark" ? "#fff" : "#0a0a0a"};
+    }
+    .fw-panel-close {
+      padding: 8px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      border-radius: 8px;
+      color: ${theme === "dark" ? "#999" : "#666"};
+      transition: background 0.15s;
+    }
+    .fw-panel-close:hover {
+      background: ${theme === "dark" ? "#333" : "#f5f5f5"};
+    }
+
+    .fw-panel-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 65px);
+      overflow-y: auto;
+    }
+
+    .fw-context {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      background: ${theme === "dark" ? "#222" : "#f9f9f9"};
+      border-bottom: 1px solid ${theme === "dark" ? "#333" : "#f0f0f0"};
+      font-size: 14px;
+    }
+    .fw-context-label {
+      font-weight: 500;
+      color: ${theme === "dark" ? "#999" : "#666"};
+    }
+    .fw-context-value {
+      color: ${theme === "dark" ? "#ccc" : "#333"};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .fw-mode-selector {
+      display: flex;
+      gap: 8px;
+      padding: 16px 20px;
+      border-bottom: 1px solid ${theme === "dark" ? "#333" : "#f0f0f0"};
+    }
+    .fw-mode-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border-radius: 8px;
+      border: none;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+      background: ${theme === "dark" ? "#333" : "#f0f0f0"};
+      color: ${theme === "dark" ? "#ccc" : "#666"};
+    }
+    .fw-mode-btn:hover:not(:disabled) {
+      background: ${theme === "dark" ? "#444" : "#e5e5e5"};
+    }
+    .fw-mode-btn--active {
+      color: #0a0a0a;
+    }
+    .fw-mode-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .fw-input-area {
+      flex: 1;
+      padding: 20px;
+    }
+
+    .fw-text-input {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .fw-textarea {
+      width: 100%;
+      min-height: 150px;
+      padding: 12px;
+      border: 1px solid ${theme === "dark" ? "#444" : "#e5e5e5"};
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: inherit;
+      resize: none;
+      background: ${theme === "dark" ? "#222" : "#fff"};
+      color: ${theme === "dark" ? "#fff" : "#0a0a0a"};
+    }
+    .fw-textarea:focus {
+      outline: none;
+      border-color: #BDE0C2;
+    }
+    .fw-textarea::placeholder {
+      color: ${theme === "dark" ? "#666" : "#999"};
+    }
+    .fw-submit-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 12px 16px;
+      background: #0a0a0a;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .fw-submit-btn:hover:not(:disabled) {
+      background: #1a1a1a;
+    }
+    .fw-submit-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .fw-screenshots {
+      padding: 16px 20px;
+      border-top: 1px solid ${theme === "dark" ? "#333" : "#f0f0f0"};
+    }
+    .fw-screenshots-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .fw-screenshots-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: ${theme === "dark" ? "#ccc" : "#333"};
+    }
+    .fw-screenshots-add {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: ${theme === "dark" ? "#333" : "#f0f0f0"};
+      border: none;
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+      color: ${theme === "dark" ? "#ccc" : "#666"};
+      transition: background 0.15s;
+    }
+    .fw-screenshots-add:hover:not(:disabled) {
+      background: ${theme === "dark" ? "#444" : "#e5e5e5"};
+    }
+    .fw-screenshots-add:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .fw-screenshots-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .fw-screenshot {
+      position: relative;
+    }
+    .fw-screenshot img {
+      width: 64px;
+      height: 64px;
+      object-fit: cover;
+      border-radius: 8px;
+      border: 1px solid ${theme === "dark" ? "#444" : "#e5e5e5"};
+    }
+    .fw-screenshot-remove {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #ef4444;
+      color: #fff;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+    .fw-screenshot:hover .fw-screenshot-remove {
+      opacity: 1;
+    }
+    .fw-screenshots-hint {
+      margin: 0;
+      font-size: 13px;
+      color: ${theme === "dark" ? "#666" : "#999"};
+    }
+
+    .fw-success {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 32px;
+    }
+    .fw-success-icon {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+      color: #0a0a0a;
+    }
+    .fw-success-title {
+      margin: 0 0 8px 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: ${theme === "dark" ? "#fff" : "#0a0a0a"};
+    }
+    .fw-success-text {
+      margin: 0;
+      color: ${theme === "dark" ? "#999" : "#666"};
+    }
+
+    /* Voice Recorder */
+    .fw-voice-recorder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 32px 0;
+    }
+    .fw-voice-btn {
+      position: relative;
+      width: 96px;
+      height: 96px;
+      border-radius: 50%;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: transform 0.15s, box-shadow 0.15s;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      color: #0a0a0a;
+    }
+    .fw-voice-btn:hover:not(:disabled) {
+      transform: scale(1.05);
+      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+    }
+    .fw-voice-btn:active:not(:disabled) {
+      transform: scale(0.95);
+    }
+    .fw-voice-btn--recording {
+      box-shadow: 0 4px 20px rgba(239,68,68,0.4);
+    }
+    .fw-voice-btn--recording:hover {
+      box-shadow: 0 6px 24px rgba(239,68,68,0.5);
+    }
+    .fw-voice-btn--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .fw-voice-pulse {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      border: 4px solid rgba(239,68,68,0.3);
+      animation: fw-pulse 1s infinite;
+    }
+    @keyframes fw-pulse {
+      0%, 100% { opacity: 0.5; }
+      50% { opacity: 1; }
+    }
+    .fw-voice-icon {
+      color: #fff;
+    }
+    .fw-voice-icon--spin {
+      animation: fw-spin 1s linear infinite;
+    }
+    .fw-voice-status {
+      margin-top: 24px;
+      text-align: center;
+    }
+    .fw-voice-timer {
+      font-size: 32px;
+      font-family: monospace;
+      font-weight: 600;
+      color: ${theme === "dark" ? "#fff" : "#0a0a0a"};
+      margin: 0;
+    }
+    .fw-voice-cta {
+      font-size: 16px;
+      font-weight: 500;
+      color: ${theme === "dark" ? "#ccc" : "#333"};
+      margin: 0;
+    }
+    .fw-voice-hint {
+      font-size: 14px;
+      color: ${theme === "dark" ? "#666" : "#999"};
+      margin: 4px 0 0 0;
+    }
+    .fw-voice-limit {
+      font-size: 12px;
+      color: ${theme === "dark" ? "#555" : "#bbb"};
+      margin: 8px 0 0 0;
+    }
+    .fw-voice-text {
+      color: ${theme === "dark" ? "#999" : "#666"};
+      margin: 0;
+    }
+    .fw-voice-visualizer {
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: 4px;
+      height: 32px;
+      margin-top: 24px;
+    }
+    .fw-voice-bar {
+      width: 6px;
+      border-radius: 3px;
+      transition: height 0.075s;
+    }
+    .fw-voice-unsupported,
+    .fw-voice-error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 32px;
+      text-align: center;
+    }
+    .fw-voice-error-icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: ${theme === "dark" ? "#333" : "#f5f5f5"};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16px;
+      color: ${theme === "dark" ? "#666" : "#999"};
+    }
+    .fw-voice-error-icon--error {
+      background: #fef2f2;
+      color: #ef4444;
+    }
+    .fw-voice-unsupported p,
+    .fw-voice-error p {
+      margin: 0;
+      font-size: 14px;
+      color: ${theme === "dark" ? "#999" : "#666"};
+    }
+    .fw-voice-retry-btn {
+      margin-top: 16px;
+      padding: 8px 16px;
+      background: ${theme === "dark" ? "#333" : "#f0f0f0"};
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      cursor: pointer;
+      color: ${theme === "dark" ? "#ccc" : "#333"};
+    }
+    .fw-voice-retry-btn:hover {
+      background: ${theme === "dark" ? "#444" : "#e5e5e5"};
+    }
+
+    .fw-icon-spin {
+      animation: fw-spin 1s linear infinite;
+    }
+  `;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { dangerouslySetInnerHTML: { __html: styles } });
+}
+
+// src/auto.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function AutoFeedbackWidget() {
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const apiKey = typeof process !== "undefined" && (process.env?.NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY || process.env?.VITE_FEEDBACKWIDGET_API_KEY || process.env?.REACT_APP_FEEDBACKWIDGET_API_KEY);
+  if (!mounted || !apiKey) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FeedbackWidget, { apiKey });
+}
+if (typeof window !== "undefined") {
+  const init = () => {
+    const scriptTag = document.querySelector(
+      "script[data-feedbackwidget-key]"
+    );
+    const apiKey = window.FEEDBACKWIDGET_API_KEY || scriptTag?.dataset.feedbackwidgetKey;
+    if (apiKey) {
+      const container = document.createElement("div");
+      container.id = "feedbackwidget-auto";
+      document.body.appendChild(container);
+      import("react-dom/client").then(({ createRoot }) => {
+        const root = createRoot(container);
+        root.render(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FeedbackWidget, { apiKey }));
+      });
+    }
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+}
+var auto_default = AutoFeedbackWidget;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoFeedbackWidget
+});