@stephenov/feedbackwidget 0.2.2 → 0.3.1

package/dist/index.mjs

@@ -1,1455 +1,17 @@
-// src/components/FeedbackWidget.tsx
-import { useState as useState4, useEffect as useEffect4 } from "react";
-
-// src/components/FeedbackTrigger.tsx
-import { useState, useEffect, useRef, useCallback } from "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
-import { jsx, jsxs } from "react/jsx-runtime";
-function ZapIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
-    }
-  );
-}
-function MicIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
-        /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
-      ]
-    }
-  );
-}
-function TypeIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
-        /* @__PURE__ */ jsx("line", { x1: "9", x2: "15", y1: "20", y2: "20" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "4", y2: "20" })
-      ]
-    }
-  );
-}
-function XIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-      ]
-    }
-  );
-}
-function ImagePlusIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" }),
-        /* @__PURE__ */ jsx("line", { x1: "16", x2: "22", y1: "5", y2: "5" }),
-        /* @__PURE__ */ jsx("line", { x1: "19", x2: "19", y1: "2", y2: "8" }),
-        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
-      ]
-    }
-  );
-}
-function CheckIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
-    }
-  );
-}
-function LoaderIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-    }
-  );
-}
-function SquareIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("rect", { width: "14", height: "14", x: "5", y: "5", rx: "2" })
-    }
-  );
-}
-function AlertCircleIcon({ className, size = 24 }) {
-  return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-      ]
-    }
-  );
-}
-
-// src/components/FeedbackTrigger.tsx
-import { jsx as jsx2 } from "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] = useState(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragStart, setDragStart] = useState(null);
-  const [hasMoved, setHasMoved] = useState(false);
-  const buttonRef = useRef(null);
-  const getDefaultPosition = 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]);
-  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]);
-  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 = 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 = 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 = useCallback(
-    (e) => handleMove(e.clientX, e.clientY),
-    [handleMove]
-  );
-  const handleTouchMove = useCallback(
-    (e) => handleMove(e.touches[0].clientX, e.touches[0].clientY),
-    [handleMove]
-  );
-  const handleEnd = useCallback(() => {
-    if (isDragging && coords) {
-      savePosition(coords);
-    }
-    setIsDragging(false);
-    setDragStart(null);
-  }, [isDragging, coords, savePosition]);
-  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__ */ jsx2(
-    "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__ */ jsx2(ZapIcon, { size: 24 })
-    }
-  );
-}
-
-// src/components/FeedbackPanel.tsx
-import * as React from "react";
-import { useState as useState3, useRef as useRef3, useEffect as useEffect3 } from "react";
-
-// src/components/VoiceRecorder.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var MAX_DURATION_SECONDS = 120;
-function VoiceRecorder({
-  onSubmit,
-  isSubmitting,
-  maxDuration = MAX_DURATION_SECONDS,
-  accentColor = "#BDE0C2"
-}) {
-  const [isRecording, setIsRecording] = useState2(false);
-  const [duration, setDuration] = useState2(0);
-  const [error, setError] = useState2(null);
-  const [isSupported, setIsSupported] = useState2(true);
-  const [audioLevel, setAudioLevel] = useState2(0);
-  const mediaRecorderRef = useRef2(null);
-  const chunksRef = useRef2([]);
-  const timerRef = useRef2(null);
-  const streamRef = useRef2(null);
-  const analyzerRef = useRef2(null);
-  const animationRef = useRef2(null);
-  const durationRef = useRef2(0);
-  useEffect2(() => {
-    setIsSupported(isVoiceSupported());
-  }, []);
-  useEffect2(() => {
-    return () => {
-      stopRecording();
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    };
-  }, []);
-  const updateAudioLevel = useCallback2(() => {
-    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__ */ jsxs2("div", { className: "fw-voice-unsupported", children: [
-      /* @__PURE__ */ jsx3("div", { className: "fw-voice-error-icon", children: /* @__PURE__ */ jsx3(AlertCircleIcon, { size: 32 }) }),
-      /* @__PURE__ */ jsxs2("p", { children: [
-        "Voice recording not supported in this browser.",
-        /* @__PURE__ */ jsx3("br", {}),
-        "Please use the Type option instead."
-      ] })
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs2("div", { className: "fw-voice-error", children: [
-      /* @__PURE__ */ jsx3("div", { className: "fw-voice-error-icon fw-voice-error-icon--error", children: /* @__PURE__ */ jsx3(AlertCircleIcon, { size: 32 }) }),
-      /* @__PURE__ */ jsx3("p", { children: error }),
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          onClick: () => setError(null),
-          className: "fw-voice-retry-btn",
-          children: "Try Again"
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: "fw-voice-recorder", children: [
-    /* @__PURE__ */ jsxs2(
-      "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__ */ jsx3(
-            "div",
-            {
-              className: "fw-voice-pulse",
-              style: {
-                transform: `scale(${1 + audioLevel * 0.3})`,
-                opacity: 0.5 + audioLevel * 0.5
-              }
-            }
-          ),
-          isSubmitting ? /* @__PURE__ */ jsx3(LoaderIcon, { size: 40, className: "fw-voice-icon fw-voice-icon--spin" }) : isRecording ? /* @__PURE__ */ jsx3(SquareIcon, { size: 40, className: "fw-voice-icon" }) : /* @__PURE__ */ jsx3(MicIcon, { size: 40, className: "fw-voice-icon" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx3("div", { className: "fw-voice-status", children: isSubmitting ? /* @__PURE__ */ jsx3("p", { className: "fw-voice-text", children: "Sending feedback..." }) : isRecording ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx3("p", { className: "fw-voice-timer", children: formatDuration(duration) }),
-      /* @__PURE__ */ jsx3("p", { className: "fw-voice-hint", children: "Tap to stop and send" }),
-      /* @__PURE__ */ jsxs2("p", { className: "fw-voice-limit", children: [
-        "Max ",
-        Math.floor(maxDuration / 60),
-        " minutes"
-      ] })
-    ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx3("p", { className: "fw-voice-cta", children: "Tap to record" }),
-      /* @__PURE__ */ jsx3("p", { className: "fw-voice-hint", children: "Share your feedback by voice" })
-    ] }) }),
-    isRecording && /* @__PURE__ */ jsx3("div", { className: "fw-voice-visualizer", children: [...Array(7)].map((_, i) => /* @__PURE__ */ jsx3(
-      "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
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "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] = useState3(defaultMode);
-  const [message, setMessage] = useState3("");
-  const [screenshots, setScreenshots] = useState3([]);
-  const [isSubmitting, setIsSubmitting] = useState3(false);
-  const [isSuccess, setIsSuccess] = useState3(false);
-  const fileInputRef = useRef3(null);
-  const apiClient = React.useMemo(
-    () => createApiClient(apiKey, apiBaseUrl),
-    [apiKey, apiBaseUrl]
-  );
-  useEffect3(() => {
-    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__ */ jsxs3(Fragment2, { children: [
-    isOpen && /* @__PURE__ */ jsx4("div", { className: "fw-backdrop", onClick: onClose }),
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: cn(
-          "fw-panel",
-          isOpen ? "fw-panel--open" : "fw-panel--closed"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs3("div", { className: "fw-panel-header", children: [
-            /* @__PURE__ */ jsx4("h2", { className: "fw-panel-title", children: mergedLabels.panelTitle }),
-            /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "fw-panel-close", children: /* @__PURE__ */ jsx4(XIcon, { size: 20 }) })
-          ] }),
-          /* @__PURE__ */ jsx4("div", { className: "fw-panel-content", children: isSuccess ? /* @__PURE__ */ jsxs3("div", { className: "fw-success", children: [
-            /* @__PURE__ */ jsx4(
-              "div",
-              {
-                className: "fw-success-icon",
-                style: { backgroundColor: accentColor },
-                children: /* @__PURE__ */ jsx4(CheckIcon, { size: 40 })
-              }
-            ),
-            /* @__PURE__ */ jsx4("h3", { className: "fw-success-title", children: "Thanks!" }),
-            /* @__PURE__ */ jsx4("p", { className: "fw-success-text", children: mergedLabels.successMessage })
-          ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-            /* @__PURE__ */ jsxs3("div", { className: "fw-context", children: [
-              /* @__PURE__ */ jsx4("span", { className: "fw-context-label", children: "Page:" }),
-              /* @__PURE__ */ jsx4("span", { className: "fw-context-value", children: pagePath })
-            ] }),
-            allowVoice && allowText && /* @__PURE__ */ jsxs3("div", { className: "fw-mode-selector", children: [
-              /* @__PURE__ */ jsxs3(
-                "button",
-                {
-                  onClick: () => setMode("voice"),
-                  disabled: isSubmitting,
-                  className: cn(
-                    "fw-mode-btn",
-                    mode === "voice" && "fw-mode-btn--active"
-                  ),
-                  style: mode === "voice" ? { backgroundColor: accentColor } : {},
-                  children: [
-                    /* @__PURE__ */ jsx4(MicIcon, { size: 16 }),
-                    mergedLabels.voiceButton
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs3(
-                "button",
-                {
-                  onClick: () => setMode("text"),
-                  disabled: isSubmitting,
-                  className: cn(
-                    "fw-mode-btn",
-                    mode === "text" && "fw-mode-btn--active"
-                  ),
-                  style: mode === "text" ? { backgroundColor: accentColor } : {},
-                  children: [
-                    /* @__PURE__ */ jsx4(TypeIcon, { size: 16 }),
-                    mergedLabels.textButton
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx4("div", { className: "fw-input-area", children: mode === "voice" ? /* @__PURE__ */ jsx4(
-              VoiceRecorder,
-              {
-                onSubmit: handleVoiceSubmit,
-                isSubmitting,
-                maxDuration: maxVoiceDuration,
-                accentColor
-              }
-            ) : /* @__PURE__ */ jsxs3("div", { className: "fw-text-input", children: [
-              /* @__PURE__ */ jsx4(
-                "textarea",
-                {
-                  value: message,
-                  onChange: (e) => setMessage(e.target.value),
-                  placeholder: mergedLabels.placeholder,
-                  className: "fw-textarea",
-                  disabled: isSubmitting
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  onClick: handleTextSubmit,
-                  disabled: !message.trim() || isSubmitting,
-                  className: "fw-submit-btn",
-                  children: isSubmitting ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                    /* @__PURE__ */ jsx4(LoaderIcon, { size: 16, className: "fw-icon-spin" }),
-                    "Sending..."
-                  ] }) : mergedLabels.submitButton
-                }
-              )
-            ] }) }),
-            allowScreenshots && /* @__PURE__ */ jsxs3("div", { className: "fw-screenshots", children: [
-              /* @__PURE__ */ jsxs3("div", { className: "fw-screenshots-header", children: [
-                /* @__PURE__ */ jsx4("span", { className: "fw-screenshots-label", children: "Screenshots" }),
-                /* @__PURE__ */ jsxs3(
-                  "button",
-                  {
-                    onClick: () => fileInputRef.current?.click(),
-                    disabled: screenshots.length >= 5 || isSubmitting,
-                    className: "fw-screenshots-add",
-                    children: [
-                      /* @__PURE__ */ jsx4(ImagePlusIcon, { size: 16 }),
-                      "Add"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    type: "file",
-                    accept: "image/*",
-                    multiple: true,
-                    onChange: handleScreenshotUpload,
-                    style: { display: "none" }
-                  }
-                )
-              ] }),
-              screenshots.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "fw-screenshots-grid", children: screenshots.map((file, index) => /* @__PURE__ */ jsxs3("div", { className: "fw-screenshot", children: [
-                /* @__PURE__ */ jsx4(
-                  "img",
-                  {
-                    src: URL.createObjectURL(file),
-                    alt: `Screenshot ${index + 1}`
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    onClick: () => removeScreenshot(index),
-                    className: "fw-screenshot-remove",
-                    children: /* @__PURE__ */ jsx4(XIcon, { size: 12 })
-                  }
-                )
-              ] }, index)) }) : /* @__PURE__ */ jsx4("p", { className: "fw-screenshots-hint", children: "Optional: Add screenshots to illustrate your feedback" })
-            ] })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/components/FeedbackWidget.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "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] = useState4(false);
-  const [mounted, setMounted] = useState4(false);
-  useEffect4(() => {
-    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__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx5(FeedbackStyles, { theme }),
-    triggerComponent ? /* @__PURE__ */ jsx5("div", { onClick: handleOpen, children: triggerComponent }) : /* @__PURE__ */ jsx5(
-      FeedbackTrigger,
-      {
-        onClick: handleOpen,
-        isOpen,
-        position,
-        accentColor,
-        tooltip: labels?.triggerTooltip
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      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__ */ jsx5("style", { dangerouslySetInnerHTML: { __html: styles } });
-}
+import {
+  FeedbackApiClient,
+  FeedbackPanel,
+  FeedbackTrigger,
+  FeedbackWidget,
+  VoiceRecorder,
+  cn,
+  createApiClient,
+  formatDuration,
+  isVoiceSupported
+} from "./chunk-QQLLK6MC.mjs";
 
 // src/hooks/useFeedback.ts
-import { useState as useState5, useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import { useState, useCallback, useMemo } from "react";
 function useFeedback({
   apiKey,
   apiBaseUrl,
@@ -1458,18 +20,18 @@ function useFeedback({
   onSubmit,
   onError
 }) {
-  const [isOpen, setIsOpen] = useState5(false);
-  const [isSubmitting, setIsSubmitting] = useState5(false);
-  const [lastSubmission, setLastSubmission] = useState5(null);
-  const [error, setError] = useState5(null);
-  const apiClient = useMemo2(
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [lastSubmission, setLastSubmission] = useState(null);
+  const [error, setError] = useState(null);
+  const apiClient = useMemo(
     () => createApiClient(apiKey, apiBaseUrl),
     [apiKey, apiBaseUrl]
   );
-  const open = useCallback3(() => setIsOpen(true), []);
-  const close = useCallback3(() => setIsOpen(false), []);
-  const toggle = useCallback3(() => setIsOpen((prev) => !prev), []);
-  const submit = useCallback3(
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  const submit = useCallback(
     async (params) => {
       setIsSubmitting(true);
       setError(null);