@intentai/react 1.0.2 → 2.0.1

package/dist/index.mjs

@@ -1,2 +1,1571 @@
-import $,{createContext,forwardRef,useContext,useState,useRef,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';var Y="https://intetnt-ai-v1-web-app-production.up.railway.app/widget/v1.js",k=null,E=false;function H(e){return E&&window.IntentAI?Promise.resolve():k||(k=new Promise((t,r)=>{if(document.querySelector(`script[src^="${Y}"]`)){window.IntentAI?(E=true,t()):window.addEventListener("intentai:ready",()=>{E=true,t();},{once:true});return}let n=document.createElement("script");n.src=Y,n.async=true,n.id="intentai-widget-script",n.setAttribute("data-api-key",e.apiKey),n.onload=()=>{window.addEventListener("intentai:ready",()=>{E=true,t();},{once:true}),setTimeout(()=>{!E&&window.IntentAI&&(E=true,t());},3e3);},n.onerror=()=>{k=null,r(new Error("Failed to load Intent AI widget script"));},document.head.appendChild(n);}),k)}var L={};var G=createContext(null),v=typeof window!="undefined";function j(e){if(e)return e;if(typeof process!="undefined"&&process.env){let t=process.env.NEXT_PUBLIC_INTENT_AI_KEY||process.env.REACT_APP_INTENT_AI_KEY||process.env.VITE_INTENT_AI_KEY;if(t)return t}try{if(typeof L!="undefined"&&L.env)return L.env.VITE_INTENT_AI_KEY}catch(t){}}function ee({children:e,apiKey:t,user:r,position:n="bottom-right",theme:p="auto",primaryColor:s,autoShow:a=true,metadata:I,onReady:f,onOpen:x,onClose:m,onSubmit:O,onError:C}){let[b,z]=useState(false),[N,F]=useState(null),R=useRef(r),l=useRef({onReady:f,onOpen:x,onClose:m,onSubmit:O,onError:C});l.current={onReady:f,onOpen:x,onClose:m,onSubmit:O,onError:C};let w=useMemo(()=>j(t),[t]);useEffect(()=>{w&&!w.startsWith("pk_")&&console.error('[IntentAI] Invalid API key format. Public keys should start with "pk_". Never use secret keys (sk_*) in client-side code.');},[w]),useEffect(()=>{if(!v)return;if(!w){console.warn("[IntentAI] No API key provided. Set the apiKey prop or NEXT_PUBLIC_INTENT_AI_KEY environment variable.");return}window.IntentAIConfig={apiKey:w,position:n,theme:p,primaryColor:s,autoShow:a,metadata:I};let d=()=>{var i,o,c;z(true),(o=(i=l.current).onReady)==null||o.call(i),R.current&&((c=window.IntentAI)==null||c.identify(R.current));},y=()=>{var i,o;(o=(i=l.current).onOpen)==null||o.call(i);},A=()=>{var i,o;(o=(i=l.current).onClose)==null||o.call(i);},W=i=>{var o,c;(c=(o=l.current).onSubmit)==null||c.call(o,i.detail);},V=i=>{var o,c;F(i.detail),(c=(o=l.current).onError)==null||c.call(o,i.detail);};return window.addEventListener("intentai:ready",d),window.addEventListener("intentai:open",y),window.addEventListener("intentai:close",A),window.addEventListener("intentai:submit",W),window.addEventListener("intentai:error",V),H({apiKey:w}).catch(i=>{var o,c;F(i),(c=(o=l.current).onError)==null||c.call(o,i);}),()=>{window.removeEventListener("intentai:ready",d),window.removeEventListener("intentai:open",y),window.removeEventListener("intentai:close",A),window.removeEventListener("intentai:submit",W),window.removeEventListener("intentai:error",V);}},[w,n,p,s,a,I]),useEffect(()=>{R.current=r,v&&b&&r&&window.IntentAI&&window.IntentAI.identify(r);},[r,b]);let M=useCallback(d=>{v&&(window.IntentAI?window.IntentAI.open(d):console.warn("[IntentAI] Widget not ready. Call will be ignored."));},[]),U=useCallback(()=>{var d;v&&((d=window.IntentAI)==null||d.close());},[]),B=useCallback(d=>{v&&(window.IntentAI?window.IntentAI.identify(d):R.current=d);},[]),K=useCallback((d,y)=>{var A;v&&((A=window.IntentAI)==null||A.track(d,y));},[]),S=useCallback(d=>{var y;v&&((y=window.IntentAI)==null||y.setMetadata(d));},[]),J=useMemo(()=>({isReady:b,error:N,open:M,close:U,identify:B,track:K,setMetadata:S}),[b,N,M,U,B,K,S]);return jsx(G.Provider,{value:J,children:e})}function u(){let e=useContext(G);if(!e)throw new Error('useIntentAI must be used within an IntentAIProvider. Wrap your app with <IntentAIProvider apiKey="pk_...">.');return e}function te(e){let{identify:t,isReady:r}=u();useEffect(()=>{r&&(e!=null&&e.id)&&t(e);},[r,e==null?void 0:e.id,e==null?void 0:e.email,e==null?void 0:e.name,t,e]);}var oe=forwardRef(function({openOptions:t,children:r="Feedback",onClick:n,disabled:p,...s},a){let{open:I,isReady:f}=u();return jsx("button",{ref:a,type:"button",onClick:m=>{n==null||n(m),m.defaultPrevented||I(t);},disabled:p||!f,"aria-label":"Open feedback",...s,children:r})});function ie({children:e,openOptions:t}){let{open:r,isReady:n,error:p}=u(),s=a=>{r(a||t);};return typeof e=="function"?e({open:s,isReady:n,error:p}):$.cloneElement(e,{onClick:a=>{var I,f;(f=(I=e.props).onClick)==null||f.call(I,a),a.defaultPrevented||s();},disabled:e.props.disabled||!n})}function de({user:e,children:t}){let{identify:r,isReady:n}=u();return useEffect(()=>{n&&(e!=null&&e.id)&&r(e);},[n,e,r]),jsx(Fragment,{children:t})}function ae({metadata:e,children:t}){let{setMetadata:r,isReady:n}=u();return useEffect(()=>{n&&e&&r(e);},[n,e,r]),jsx(Fragment,{children:t})}function se({event:e,properties:t,trigger:r="mount",children:n}){let{track:p,isReady:s}=u(),a=$.useRef(false);return useEffect(()=>{r==="mount"&&s&&!a.current&&(p(e,t),a.current=true);},[s,e,t,p,r]),r==="render"&&s&&p(e,t),jsx(Fragment,{children:n})}
-export{oe as FeedbackButton,ie as FeedbackTrigger,de as IdentifyUser,ee as IntentAIProvider,ae as SetMetadata,se as TrackEvent,te as useIdentify,u as useIntentAI};
+"use client";
+
+// src/index.tsx
+import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+
+// src/components/PremiumVoiceWidget.tsx
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  createContext,
+  useContext
+} from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WidgetContext = createContext(null);
+var useWidget = () => {
+  const context = useContext(WidgetContext);
+  if (!context) throw new Error("useWidget must be used within WidgetProvider");
+  return context;
+};
+var useReducedMotion = () => {
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mediaQuery.matches);
+    const handler = (e) => setReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  return reducedMotion;
+};
+var useScrollAwareness = () => {
+  const [scrollState, setScrollState] = useState("idle");
+  const scrollTimeout = useRef(null);
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollState("scrolling");
+      if (scrollTimeout.current) {
+        clearTimeout(scrollTimeout.current);
+      }
+      scrollTimeout.current = setTimeout(() => {
+        setScrollState("stopped");
+        setTimeout(() => setScrollState("idle"), 300);
+      }, 150);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return scrollState;
+};
+var useFrustrationDetection = () => {
+  const [frustrationLevel, setFrustrationLevel] = useState(0);
+  const clickTimestamps = useRef([]);
+  const signals = useRef([]);
+  useEffect(() => {
+    const handleClick = () => {
+      const now = Date.now();
+      clickTimestamps.current.push(now);
+      clickTimestamps.current = clickTimestamps.current.filter((t) => now - t < 500);
+      if (clickTimestamps.current.length >= 4) {
+        signals.current.push({ weight: 3, timestamp: now });
+        clickTimestamps.current = [];
+      }
+    };
+    const handleFormError = () => {
+      signals.current.push({ weight: 2, timestamp: Date.now() });
+    };
+    document.addEventListener("click", handleClick);
+    document.addEventListener("invalid", handleFormError, true);
+    const decayInterval = setInterval(() => {
+      const now = Date.now();
+      signals.current = signals.current.filter((s) => now - s.timestamp < 3e4);
+      const totalWeight = signals.current.reduce((sum, s) => sum + s.weight, 0);
+      setFrustrationLevel(Math.min(10, totalWeight));
+    }, 1e3);
+    return () => {
+      document.removeEventListener("click", handleClick);
+      document.removeEventListener("invalid", handleFormError, true);
+      clearInterval(decayInterval);
+    };
+  }, []);
+  return frustrationLevel;
+};
+var useTimeOnPage = () => {
+  const [timeOnPage, setTimeOnPage] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeOnPage((prev) => prev + 1);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  return timeOnPage;
+};
+var useAudioLevel = (isRecording) => {
+  const [audioLevel, setAudioLevel] = useState(0);
+  const analyserRef = useRef(null);
+  const animationRef = useRef();
+  useEffect(() => {
+    if (!isRecording) {
+      setAudioLevel(0);
+      return;
+    }
+    const initAudio = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const audioContext = new AudioContext();
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 256;
+        source.connect(analyser);
+        analyserRef.current = analyser;
+        const dataArray = new Uint8Array(analyser.frequencyBinCount);
+        const updateLevel = () => {
+          if (!analyserRef.current) return;
+          analyserRef.current.getByteFrequencyData(dataArray);
+          const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
+          setAudioLevel(average / 255);
+          animationRef.current = requestAnimationFrame(updateLevel);
+        };
+        updateLevel();
+      } catch (error) {
+        console.error("Failed to access microphone:", error);
+      }
+    };
+    initAudio();
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [isRecording]);
+  return audioLevel;
+};
+var springPresets = {
+  snappy: { type: "spring", stiffness: 500, damping: 30 },
+  bouncy: { type: "spring", stiffness: 400, damping: 15 },
+  smooth: { type: "spring", stiffness: 300, damping: 30 },
+  gentle: { type: "spring", stiffness: 200, damping: 25 }
+};
+var triggerVariants = {
+  idle: {
+    scale: 1,
+    opacity: 1
+  },
+  hover: {
+    scale: 1.08,
+    transition: springPresets.bouncy
+  },
+  tap: {
+    scale: 0.95,
+    transition: springPresets.snappy
+  },
+  scrolling: {
+    scale: 0.85,
+    opacity: 0.3,
+    transition: { duration: 0.2 }
+  },
+  hidden: {
+    scale: 0,
+    opacity: 0,
+    transition: springPresets.smooth
+  }
+};
+var containerVariants = {
+  trigger: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    transition: springPresets.smooth
+  },
+  expanded: {
+    width: 360,
+    height: "auto",
+    borderRadius: 20,
+    transition: {
+      ...springPresets.smooth,
+      staggerChildren: 0.05,
+      delayChildren: 0.15
+    }
+  }
+};
+var contentVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20,
+    scale: 0.95
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: springPresets.smooth
+  },
+  exit: {
+    opacity: 0,
+    y: -10,
+    scale: 0.95,
+    transition: { duration: 0.2 }
+  }
+};
+var categoryVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.9 },
+  visible: (i) => ({
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      delay: i * 0.05,
+      ...springPresets.smooth
+    }
+  }),
+  hover: {
+    scale: 1.05,
+    y: -2,
+    transition: springPresets.bouncy
+  },
+  tap: {
+    scale: 0.95
+  },
+  selected: {
+    scale: 1,
+    borderColor: "var(--widget-primary)"
+  }
+};
+var BreathingRing = ({ isActive }) => {
+  const { reducedMotion } = useWidget();
+  if (reducedMotion) return null;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "fiq-breathing-ring",
+      animate: {
+        scale: isActive ? [1, 1.15, 1] : 1,
+        opacity: isActive ? [0.5, 0.8, 0.5] : 0.5
+      },
+      transition: {
+        duration: 3,
+        repeat: Infinity,
+        ease: "easeInOut"
+      },
+      style: {
+        position: "absolute",
+        inset: -8,
+        borderRadius: "50%",
+        background: "radial-gradient(circle, var(--widget-primary-glow) 0%, transparent 70%)",
+        pointerEvents: "none"
+      }
+    }
+  );
+};
+var AmbientOrb = ({ audioLevel, isRecording }) => {
+  const { reducedMotion } = useWidget();
+  const [particles, setParticles] = useState([]);
+  useEffect(() => {
+    if (!isRecording || audioLevel < 0.3 || reducedMotion) return;
+    const particleCount = Math.floor(audioLevel * 4);
+    const newParticles = Array.from({ length: particleCount }, () => ({
+      id: Math.random().toString(36).slice(2, 11),
+      x: 70,
+      y: 70,
+      angle: Math.random() * Math.PI * 2,
+      speed: 1 + Math.random() * 3,
+      size: 2 + Math.random() * 3,
+      color: Math.random() > 0.5 ? "var(--widget-primary-light)" : "var(--widget-accent)"
+    }));
+    setParticles((prev) => [...prev, ...newParticles].slice(-40));
+  }, [audioLevel, isRecording, reducedMotion]);
+  useEffect(() => {
+    if (particles.length === 0) return;
+    const timeout = setTimeout(() => {
+      setParticles((prev) => prev.slice(1));
+    }, 100);
+    return () => clearTimeout(timeout);
+  }, [particles]);
+  const orbScale = 1 + audioLevel * 0.2;
+  return /* @__PURE__ */ jsx("div", { className: "fiq-ambient-orb", style: { position: "relative", width: 140, height: 140, margin: "0 auto" }, children: /* @__PURE__ */ jsxs("svg", { width: 140, height: 140, viewBox: "0 0 140 140", children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("radialGradient", { id: "orbGradient", cx: "30%", cy: "30%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--widget-accent-light)" }),
+        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "var(--widget-primary)" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--widget-primary-hover)" })
+      ] }),
+      /* @__PURE__ */ jsxs("filter", { id: "orbGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "8", result: "blur" }),
+        /* @__PURE__ */ jsx("feComposite", { in: "SourceGraphic", in2: "blur", operator: "over" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      motion.circle,
+      {
+        cx: 70,
+        cy: 70,
+        r: 50,
+        fill: "none",
+        stroke: "var(--widget-primary-glow)",
+        strokeWidth: 2,
+        animate: {
+          r: isRecording ? [50, 58, 50] : 50,
+          opacity: isRecording ? [0.3, 0.6, 0.3] : 0.3
+        },
+        transition: {
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.circle,
+      {
+        cx: 70,
+        cy: 70,
+        r: 40,
+        fill: "url(#orbGradient)",
+        filter: "url(#orbGlow)",
+        animate: { scale: reducedMotion ? 1 : orbScale },
+        transition: springPresets.snappy,
+        style: { transformOrigin: "center" }
+      }
+    ),
+    /* @__PURE__ */ jsxs("g", { transform: "translate(58, 55)", children: [
+      /* @__PURE__ */ jsx(
+        motion.path,
+        {
+          d: "M20 4a6 6 0 0 0-6 6v16a6 6 0 0 0 12 0V10a6 6 0 0 0-6-6z",
+          fill: "none",
+          stroke: "white",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          animate: {
+            opacity: isRecording ? [1, 0.7, 1] : 1
+          },
+          transition: {
+            duration: 1,
+            repeat: isRecording ? Infinity : 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M32 20v4a14 14 0 0 1-28 0v-4M20 38v10M12 48h16",
+          fill: "none",
+          stroke: "white",
+          strokeWidth: "2.5",
+          strokeLinecap: "round"
+        }
+      )
+    ] }),
+    particles.map((particle) => /* @__PURE__ */ jsx(
+      motion.circle,
+      {
+        cx: 70,
+        cy: 70,
+        r: particle.size,
+        fill: particle.color,
+        initial: { opacity: 0.8, scale: 1 },
+        animate: {
+          cx: 70 + Math.cos(particle.angle) * 50,
+          cy: 70 + Math.sin(particle.angle) * 50,
+          opacity: 0,
+          scale: 0.5
+        },
+        transition: { duration: 1.5, ease: "easeOut" }
+      },
+      particle.id
+    ))
+  ] }) });
+};
+var RecordingTimer = ({
+  seconds,
+  maxDuration
+}) => {
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  const progress = seconds / maxDuration;
+  const isNearLimit = seconds >= maxDuration - 30;
+  return /* @__PURE__ */ jsxs("div", { className: "fiq-timer", style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        style: {
+          fontSize: 36,
+          fontWeight: 700,
+          fontFamily: "ui-monospace, monospace",
+          color: isNearLimit ? "var(--widget-recording)" : "var(--widget-text-primary)"
+        },
+        animate: isNearLimit ? { scale: [1, 1.05, 1] } : {},
+        transition: { duration: 0.5, repeat: isNearLimit ? Infinity : 0 },
+        children: [
+          String(minutes).padStart(2, "0"),
+          ":",
+          String(secs).padStart(2, "0")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 160,
+          height: 4,
+          background: "var(--widget-glass-border)",
+          borderRadius: 2,
+          margin: "12px auto",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: {
+              height: "100%",
+              background: isNearLimit ? "var(--widget-recording)" : "var(--widget-primary)",
+              borderRadius: 2
+            },
+            initial: { width: 0 },
+            animate: { width: `${progress * 100}%` },
+            transition: { duration: 0.5 }
+          }
+        )
+      }
+    )
+  ] });
+};
+var TranscriptionDisplay = ({ text, isLive }) => {
+  const { reducedMotion } = useWidget();
+  const [displayedText, setDisplayedText] = useState("");
+  const [cursorVisible, setCursorVisible] = useState(true);
+  useEffect(() => {
+    if (reducedMotion) {
+      setDisplayedText(text);
+      return;
+    }
+    if (text.length > displayedText.length) {
+      const timeout = setTimeout(() => {
+        setDisplayedText(text.slice(0, displayedText.length + 1));
+      }, 30 + Math.random() * 40);
+      return () => clearTimeout(timeout);
+    }
+  }, [text, displayedText, reducedMotion]);
+  useEffect(() => {
+    if (!isLive) return;
+    const interval = setInterval(() => setCursorVisible((v) => !v), 530);
+    return () => clearInterval(interval);
+  }, [isLive]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fiq-transcription",
+      style: {
+        padding: 16,
+        background: "var(--widget-glass-bg)",
+        borderRadius: 12,
+        border: "1px solid var(--widget-glass-border)",
+        minHeight: 80,
+        maxHeight: 120,
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("p", { style: { color: "var(--widget-text-primary)", fontSize: 14, lineHeight: 1.6, margin: 0 }, children: [
+          displayedText || /* @__PURE__ */ jsx("span", { style: { color: "var(--widget-text-muted)", fontStyle: "italic" }, children: "Start speaking..." }),
+          isLive && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              animate: { opacity: cursorVisible ? 1 : 0 },
+              style: {
+                display: "inline-block",
+                width: 2,
+                height: "1.2em",
+                background: "var(--widget-primary)",
+                marginLeft: 2,
+                verticalAlign: "text-bottom"
+              }
+            }
+          )
+        ] }),
+        isLive && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 5 },
+            animate: { opacity: 1, y: 0 },
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginTop: 12,
+              color: "var(--widget-text-secondary)",
+              fontSize: 12
+            },
+            children: [
+              /* @__PURE__ */ jsx(ListeningDots, {}),
+              /* @__PURE__ */ jsx("span", { children: "Listening..." })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var CategoryIcon = ({ icon, selected }) => {
+  const color = selected ? "white" : "var(--widget-primary)";
+  const size = 20;
+  const icons = {
+    bug: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 2l1.88 1.88M14.12 3.88L16 2M9 7.13v-1a3.003 3.003 0 116 0v1" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 014-4h4a4 4 0 014 4v3c0 3.3-2.7 6-6 6" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20v-9M6.53 9C4.6 8.8 3 7.1 3 5M6 13H2M3 21c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+    ] }),
+    sparkles: /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" }) }),
+    message: /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z" }) })
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: icons[icon] || icons.message });
+};
+var ListeningDots = () => /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+  motion.span,
+  {
+    animate: {
+      scale: [1, 1.4, 1],
+      opacity: [0.5, 1, 0.5]
+    },
+    transition: {
+      duration: 1,
+      repeat: Infinity,
+      delay: i * 0.15
+    },
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: "50%",
+      background: "var(--widget-primary)"
+    }
+  },
+  i
+)) });
+var CategorySelector = ({ categories, selected, onSelect }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "fiq-category-selector", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        style: {
+          display: "block",
+          fontSize: 13,
+          fontWeight: 600,
+          color: "var(--widget-text-secondary)",
+          marginBottom: 10,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        children: "Category"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
+          gap: 10
+        },
+        children: categories.map((category, index) => /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            custom: index,
+            variants: categoryVariants,
+            initial: "hidden",
+            animate: selected === category.id ? "selected" : "visible",
+            whileHover: "hover",
+            whileTap: "tap",
+            onClick: () => onSelect(category.id),
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 6,
+              padding: "12px 8px",
+              background: selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-bg)",
+              border: `2px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
+              borderRadius: 12,
+              cursor: "pointer",
+              transition: "background 0.2s, border-color 0.2s"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                  animate: selected === category.id ? { scale: [1, 1.2, 1] } : {},
+                  transition: { duration: 0.3 },
+                  children: /* @__PURE__ */ jsx(CategoryIcon, { icon: category.icon, selected: selected === category.id })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: selected === category.id ? "white" : "var(--widget-text-primary)"
+                  },
+                  children: category.label
+                }
+              )
+            ]
+          },
+          category.id
+        ))
+      }
+    )
+  ] });
+};
+var SuccessCelebration = ({ onComplete }) => {
+  const { reducedMotion } = useWidget();
+  const confettiParticles = useMemo(
+    () => reducedMotion ? [] : Array.from({ length: 30 }, (_, i) => ({
+      id: i,
+      angle: i / 30 * Math.PI * 2,
+      distance: 100 + Math.random() * 80,
+      size: 4 + Math.random() * 6,
+      color: ["#10b981", "#22d3d3", "#fbbf24", "#f472b6"][Math.floor(Math.random() * 4)],
+      rotation: Math.random() * 360
+    })),
+    [reducedMotion]
+  );
+  useEffect(() => {
+    const timer = setTimeout(onComplete, 3e3);
+    return () => clearTimeout(timer);
+  }, [onComplete]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, scale: 0.8 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.8 },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 40,
+        textAlign: "center",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: [
+        confettiParticles.map((particle) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { x: 0, y: 0, scale: 0, rotate: 0 },
+            animate: {
+              x: Math.cos(particle.angle) * particle.distance,
+              y: Math.sin(particle.angle) * particle.distance + 50,
+              scale: [0, 1, 1, 0],
+              rotate: particle.rotation
+            },
+            transition: { duration: 1.2, ease: [0.22, 1, 0.36, 1] },
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              width: particle.size,
+              height: particle.size,
+              background: particle.color,
+              borderRadius: Math.random() > 0.5 ? "50%" : 2
+            }
+          },
+          particle.id
+        )),
+        /* @__PURE__ */ jsx(motion.div, { style: { marginBottom: 20 }, children: /* @__PURE__ */ jsxs("svg", { width: 80, height: 80, viewBox: "0 0 80 80", children: [
+          /* @__PURE__ */ jsx(
+            motion.circle,
+            {
+              cx: 40,
+              cy: 40,
+              r: 36,
+              fill: "var(--widget-success)",
+              initial: { scale: 0 },
+              animate: { scale: 1 },
+              transition: springPresets.bouncy
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: "M24 40 L35 51 L56 28",
+              fill: "none",
+              stroke: "white",
+              strokeWidth: 5,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: { delay: 0.3, duration: 0.5, ease: "easeOut" }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          motion.h3,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.5 },
+            style: {
+              fontSize: 24,
+              fontWeight: 700,
+              color: "var(--widget-text-primary)",
+              margin: 0,
+              marginBottom: 8
+            },
+            children: "Thank you!"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.p,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.6 },
+            style: {
+              fontSize: 14,
+              color: "var(--widget-text-secondary)",
+              margin: 0
+            },
+            children: "Your feedback helps us improve"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: {
+              position: "absolute",
+              bottom: 20,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: 100,
+              height: 3,
+              background: "var(--widget-glass-border)",
+              borderRadius: 2,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { width: "100%" },
+                animate: { width: 0 },
+                transition: { duration: 3, ease: "linear" },
+                style: {
+                  height: "100%",
+                  background: "var(--widget-primary)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var MagneticButton = ({ children, onClick, variant = "primary", disabled, loading }) => {
+  const buttonRef = useRef(null);
+  const [magnetOffset, setMagnetOffset] = useState({ x: 0, y: 0 });
+  const handleMouseMove = (e) => {
+    if (!buttonRef.current || disabled) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    setMagnetOffset({
+      x: (e.clientX - centerX) * 0.1,
+      y: (e.clientY - centerY) * 0.1
+    });
+  };
+  const handleMouseLeave = () => {
+    setMagnetOffset({ x: 0, y: 0 });
+  };
+  const baseStyles = {
+    width: "100%",
+    padding: "14px 24px",
+    fontSize: 15,
+    fontWeight: 600,
+    borderRadius: 12,
+    border: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "background 0.2s, opacity 0.2s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  };
+  const variantStyles = {
+    primary: {
+      background: "var(--widget-primary)",
+      color: "white"
+    },
+    secondary: {
+      background: "var(--widget-glass-bg)",
+      color: "var(--widget-text-primary)",
+      border: "1px solid var(--widget-glass-border)"
+    },
+    ghost: {
+      background: "transparent",
+      color: "var(--widget-text-secondary)"
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      ref: buttonRef,
+      onClick,
+      disabled: disabled || loading,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      animate: {
+        x: magnetOffset.x,
+        y: magnetOffset.y,
+        opacity: disabled ? 0.5 : 1
+      },
+      whileHover: { scale: disabled ? 1 : 1.02 },
+      whileTap: { scale: disabled ? 1 : 0.97 },
+      transition: springPresets.snappy,
+      style: { ...baseStyles, ...variantStyles[variant] },
+      children: loading ? /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          animate: { rotate: 360 },
+          transition: { duration: 1, repeat: Infinity, ease: "linear" },
+          style: {
+            width: 18,
+            height: 18,
+            border: "2px solid rgba(255,255,255,0.3)",
+            borderTopColor: "white",
+            borderRadius: "50%"
+          }
+        }
+      ) : children
+    }
+  );
+};
+var DEFAULT_CATEGORIES = [
+  { id: "bug", label: "Bug", icon: "bug" },
+  { id: "feature", label: "Feature", icon: "sparkles" },
+  { id: "feedback", label: "Feedback", icon: "message" }
+];
+var PremiumVoiceWidget = ({
+  position = "bottom-right",
+  primaryColor = "#10b981",
+  accentColor = "#22d3d3",
+  theme = "dark",
+  categories = DEFAULT_CATEGORIES,
+  allowVoice = true,
+  allowText = true,
+  maxRecordingDuration = 180,
+  onSubmit,
+  onOpen,
+  onClose
+}) => {
+  const [state, setState] = useState("idle");
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [activeTab, setActiveTab] = useState(allowVoice ? "voice" : "text");
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingSeconds, setRecordingSeconds] = useState(0);
+  const [transcription, setTranscription] = useState("");
+  const [textContent, setTextContent] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const reducedMotion = useReducedMotion();
+  const scrollState = useScrollAwareness();
+  const frustrationLevel = useFrustrationDetection();
+  const timeOnPage = useTimeOnPage();
+  const audioLevel = useAudioLevel(isRecording);
+  const triggerRef = useRef(null);
+  const recordingInterval = useRef(null);
+  const positionStyles = {
+    "bottom-right": { bottom: 24, right: 24 },
+    "bottom-left": { bottom: 24, left: 24 },
+    "top-right": { top: 24, right: 24 },
+    "top-left": { top: 24, left: 24 }
+  };
+  const cssVariables = {
+    "--widget-primary": primaryColor,
+    "--widget-primary-hover": adjustColor(primaryColor, -20),
+    "--widget-primary-light": adjustColor(primaryColor, 30),
+    "--widget-primary-glow": `${primaryColor}66`,
+    "--widget-accent": accentColor,
+    "--widget-accent-light": adjustColor(accentColor, 30),
+    "--widget-accent-glow": `${accentColor}4d`,
+    "--widget-glass-bg": theme === "dark" ? "rgba(24, 24, 27, 0.85)" : "rgba(255, 255, 255, 0.85)",
+    "--widget-glass-border": theme === "dark" ? "rgba(63, 63, 70, 0.5)" : "rgba(0, 0, 0, 0.1)",
+    "--widget-glass-highlight": theme === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)",
+    "--widget-text-primary": theme === "dark" ? "#fafafa" : "#18181b",
+    "--widget-text-secondary": theme === "dark" ? "#a1a1aa" : "#71717a",
+    "--widget-text-muted": theme === "dark" ? "#71717a" : "#a1a1aa",
+    "--widget-recording": "#ef4444",
+    "--widget-recording-glow": "rgba(239, 68, 68, 0.4)",
+    "--widget-success": "#22c55e",
+    "--widget-success-glow": "rgba(34, 197, 94, 0.4)",
+    "--widget-frustrated": "#f97316"
+  };
+  const handleOpen = useCallback(() => {
+    setIsExpanded(true);
+    setState("open");
+    onOpen?.();
+  }, [onOpen]);
+  const handleClose = useCallback(() => {
+    setIsExpanded(false);
+    setState("idle");
+    setIsRecording(false);
+    setRecordingSeconds(0);
+    setTranscription("");
+    onClose?.();
+  }, [onClose]);
+  const handleStartRecording = useCallback(() => {
+    setIsRecording(true);
+    setState("recording");
+    setRecordingSeconds(0);
+    const samplePhrases = [
+      "I really like the new dashboard design, ",
+      "but I think the navigation could be improved. ",
+      "Sometimes I have trouble finding the settings page."
+    ];
+    let phraseIndex = 0;
+    recordingInterval.current = setInterval(() => {
+      setRecordingSeconds((prev) => {
+        if (prev >= maxRecordingDuration) {
+          handleStopRecording();
+          return prev;
+        }
+        return prev + 1;
+      });
+      if (phraseIndex < samplePhrases.length && Math.random() > 0.7) {
+        setTranscription((prev) => prev + samplePhrases[phraseIndex]);
+        phraseIndex++;
+      }
+    }, 1e3);
+  }, [maxRecordingDuration]);
+  const handleStopRecording = useCallback(() => {
+    setIsRecording(false);
+    setState("open");
+    if (recordingInterval.current) {
+      clearInterval(recordingInterval.current);
+    }
+  }, []);
+  const handleSubmit = useCallback(async () => {
+    if (!selectedCategory) return;
+    setIsSubmitting(true);
+    setState("processing");
+    try {
+      await onSubmit?.({
+        type: activeTab,
+        content: activeTab === "voice" ? transcription : textContent,
+        category: selectedCategory,
+        transcription: activeTab === "voice" ? transcription : void 0
+      });
+      setState("success");
+    } catch (error) {
+      setState("error");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [activeTab, selectedCategory, transcription, textContent, onSubmit]);
+  const handleSuccessComplete = useCallback(() => {
+    handleClose();
+    setSelectedCategory(null);
+    setTextContent("");
+    setTranscription("");
+  }, [handleClose]);
+  const contextValue = {
+    state,
+    setState,
+    audioLevel,
+    isRecording,
+    transcription,
+    selectedCategory,
+    setSelectedCategory,
+    frustrationLevel,
+    reducedMotion
+  };
+  const triggerState = useMemo(() => {
+    if (isExpanded) return "hidden";
+    if (scrollState === "scrolling") return "scrolling";
+    if (state === "hover") return "hover";
+    return "idle";
+  }, [isExpanded, scrollState, state]);
+  const shouldShowAttentionPulse = timeOnPage === 60 && !isExpanded && frustrationLevel < 3;
+  const [showPrompt, setShowPrompt] = useState(false);
+  const promptMessages = [
+    "Help us improve!",
+    "Got feedback?",
+    "Share your thoughts",
+    "We'd love to hear from you"
+  ];
+  const [promptMessage, setPromptMessage] = useState(promptMessages[0]);
+  useEffect(() => {
+    if (isExpanded) return;
+    const showTimes = [30, 90, 180];
+    if (showTimes.includes(timeOnPage)) {
+      setPromptMessage(promptMessages[Math.floor(Math.random() * promptMessages.length)]);
+      setShowPrompt(true);
+      const timer = setTimeout(() => setShowPrompt(false), 4e3);
+      return () => clearTimeout(timer);
+    }
+  }, [timeOnPage, isExpanded]);
+  return /* @__PURE__ */ jsx(WidgetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fiq-premium-widget",
+      style: {
+        ...cssVariables,
+        position: "fixed",
+        ...positionStyles[position],
+        zIndex: 2147483640,
+        fontFamily: "system-ui, -apple-system, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
+          !isExpanded && /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              ref: triggerRef,
+              variants: triggerVariants,
+              initial: "idle",
+              animate: triggerState,
+              exit: "hidden",
+              whileHover: "hover",
+              whileTap: "tap",
+              onClick: handleOpen,
+              onMouseEnter: () => setState("hover"),
+              onMouseLeave: () => setState("idle"),
+              "aria-label": "Open feedback widget",
+              "aria-expanded": isExpanded,
+              style: {
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                border: "none",
+                cursor: "pointer",
+                position: "relative",
+                background: "var(--widget-glass-bg)",
+                backdropFilter: "blur(20px) saturate(180%)",
+                WebkitBackdropFilter: "blur(20px) saturate(180%)",
+                boxShadow: `
+                  inset 0 0 0 1px var(--widget-glass-highlight),
+                  0 4px 24px -4px rgba(0, 0, 0, 0.5),
+                  0 0 40px -10px var(--widget-primary-glow)
+                `
+              },
+              children: [
+                /* @__PURE__ */ jsx(BreathingRing, { isActive: !reducedMotion && triggerState === "idle" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 3,
+                      borderRadius: "50%",
+                      background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
+                      opacity: 0.9
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: 24,
+                    height: 24,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    style: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      zIndex: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+                      /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+                    ]
+                  }
+                ),
+                shouldShowAttentionPulse && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { scale: 1, opacity: 1 },
+                    animate: { scale: 1.5, opacity: 0 },
+                    transition: { duration: 1, repeat: 3 },
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      borderRadius: "50%",
+                      border: "2px solid var(--widget-primary)",
+                      pointerEvents: "none"
+                    }
+                  }
+                ),
+                frustrationLevel >= 5 && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { scale: 0 },
+                    animate: { scale: 1 },
+                    style: {
+                      position: "absolute",
+                      top: -4,
+                      right: -4,
+                      width: 16,
+                      height: 16,
+                      borderRadius: "50%",
+                      background: "var(--widget-frustrated)",
+                      border: "2px solid var(--widget-glass-bg)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 10
+                    },
+                    children: "?"
+                  }
+                )
+              ]
+            },
+            "trigger"
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showPrompt && !isExpanded && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, x: 10, scale: 0.9 },
+              animate: { opacity: 1, x: 0, scale: 1 },
+              exit: { opacity: 0, x: 10, scale: 0.9 },
+              transition: springPresets.smooth,
+              onClick: handleOpen,
+              style: {
+                position: "absolute",
+                right: 70,
+                top: "50%",
+                transform: "translateY(-50%)",
+                background: "var(--widget-glass-bg)",
+                backdropFilter: "blur(12px)",
+                WebkitBackdropFilter: "blur(12px)",
+                border: "1px solid var(--widget-glass-border)",
+                borderRadius: 12,
+                padding: "10px 16px",
+                boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                cursor: "pointer",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: "var(--widget-text-primary)"
+                }, children: promptMessage }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      right: -6,
+                      top: "50%",
+                      transform: "translateY(-50%) rotate(45deg)",
+                      width: 12,
+                      height: 12,
+                      background: "var(--widget-glass-bg)",
+                      borderRight: "1px solid var(--widget-glass-border)",
+                      borderTop: "1px solid var(--widget-glass-border)"
+                    }
+                  }
+                )
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isExpanded && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: containerVariants,
+            initial: "trigger",
+            animate: "expanded",
+            exit: "trigger",
+            style: {
+              background: "var(--widget-glass-bg)",
+              backdropFilter: "blur(20px) saturate(180%)",
+              WebkitBackdropFilter: "blur(20px) saturate(180%)",
+              border: "1px solid var(--widget-glass-border)",
+              boxShadow: "0 20px 60px -12px rgba(0, 0, 0, 0.5)",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column"
+            },
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "widget-title",
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: state === "success" ? /* @__PURE__ */ jsx(SuccessCelebration, { onComplete: handleSuccessComplete }, "success") : /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                variants: contentVariants,
+                initial: "hidden",
+                animate: "visible",
+                exit: "exit",
+                style: { display: "flex", flexDirection: "column", height: "100%" },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        padding: "20px 24px",
+                        borderBottom: "1px solid var(--widget-glass-border)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "h2",
+                          {
+                            id: "widget-title",
+                            style: {
+                              fontSize: 18,
+                              fontWeight: 700,
+                              color: "var(--widget-text-primary)",
+                              margin: 0
+                            },
+                            children: "Share Your Thoughts"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          motion.button,
+                          {
+                            whileHover: { scale: 1.1, rotate: 90 },
+                            whileTap: { scale: 0.9 },
+                            onClick: handleClose,
+                            "aria-label": "Close widget",
+                            style: {
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              border: "none",
+                              background: "transparent",
+                              color: "var(--widget-text-secondary)",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center"
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                width: 20,
+                                height: 20,
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: 2,
+                                children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  allowVoice && allowText && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        borderBottom: "1px solid var(--widget-glass-border)"
+                      },
+                      children: ["voice", "text"].map((tab) => /* @__PURE__ */ jsxs(
+                        motion.button,
+                        {
+                          onClick: () => setActiveTab(tab),
+                          whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
+                          style: {
+                            flex: 1,
+                            padding: "14px 0",
+                            border: "none",
+                            background: "transparent",
+                            fontSize: 14,
+                            fontWeight: 500,
+                            color: activeTab === tab ? "var(--widget-primary)" : "var(--widget-text-secondary)",
+                            cursor: "pointer",
+                            position: "relative"
+                          },
+                          children: [
+                            tab === "voice" ? "Voice" : "Text",
+                            activeTab === tab && /* @__PURE__ */ jsx(
+                              motion.div,
+                              {
+                                layoutId: "activeTab",
+                                style: {
+                                  position: "absolute",
+                                  bottom: -1,
+                                  left: 0,
+                                  right: 0,
+                                  height: 2,
+                                  background: "var(--widget-primary)"
+                                },
+                                transition: springPresets.smooth
+                              }
+                            )
+                          ]
+                        },
+                        tab
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { style: { padding: "20px 24px" }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx(
+                      CategorySelector,
+                      {
+                        categories,
+                        selected: selectedCategory,
+                        onSelect: setSelectedCategory
+                      }
+                    ) }),
+                    activeTab === "voice" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+                      /* @__PURE__ */ jsx(AmbientOrb, { audioLevel, isRecording }),
+                      isRecording && /* @__PURE__ */ jsx(
+                        RecordingTimer,
+                        {
+                          seconds: recordingSeconds,
+                          maxDuration: maxRecordingDuration
+                        }
+                      ),
+                      !isRecording && recordingSeconds === 0 && /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          style: {
+                            color: "var(--widget-text-secondary)",
+                            fontSize: 14,
+                            marginTop: 16
+                          },
+                          children: "Tap the orb to start recording"
+                        }
+                      ),
+                      (isRecording || transcription) && /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
+                        TranscriptionDisplay,
+                        {
+                          text: transcription,
+                          isLive: isRecording
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ jsx(
+                        MagneticButton,
+                        {
+                          onClick: isRecording ? handleStopRecording : handleStartRecording,
+                          variant: isRecording ? "secondary" : "primary",
+                          children: isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                width: 16,
+                                height: 16,
+                                viewBox: "0 0 24 24",
+                                fill: "currentColor",
+                                children: /* @__PURE__ */ jsx("rect", { x: 6, y: 6, width: 12, height: 12, rx: 2 })
+                              }
+                            ),
+                            "Stop Recording"
+                          ] }) : recordingSeconds > 0 ? "Record Again" : "Start Recording"
+                        }
+                      ) })
+                    ] }),
+                    activeTab === "text" && /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "textarea",
+                        {
+                          value: textContent,
+                          onChange: (e) => setTextContent(e.target.value),
+                          placeholder: "Tell us what you think...",
+                          style: {
+                            width: "100%",
+                            minHeight: 150,
+                            padding: 16,
+                            fontSize: 14,
+                            lineHeight: 1.6,
+                            color: "var(--widget-text-primary)",
+                            background: "var(--widget-glass-bg)",
+                            border: "1px solid var(--widget-glass-border)",
+                            borderRadius: 12,
+                            resize: "vertical",
+                            fontFamily: "inherit"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "flex-end",
+                            marginTop: 8,
+                            fontSize: 12,
+                            color: "var(--widget-text-muted)"
+                          },
+                          children: [
+                            textContent.length,
+                            " / 5000"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "16px 24px",
+                        borderTop: "1px solid var(--widget-glass-border)"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        MagneticButton,
+                        {
+                          onClick: handleSubmit,
+                          disabled: !selectedCategory || activeTab === "voice" && !transcription || activeTab === "text" && !textContent.trim(),
+                          loading: isSubmitting,
+                          children: "Submit Feedback"
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              "content"
+            ) })
+          },
+          "modal"
+        ) }),
+        /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: "sr-only", style: { position: "absolute", width: 1, height: 1, overflow: "hidden" }, children: [
+          isRecording && "Recording started. Speak now.",
+          !isRecording && transcription && `Transcription complete.`,
+          state === "success" && "Feedback submitted successfully."
+        ] })
+      ]
+    }
+  ) });
+};
+function adjustColor(color, amount) {
+  const hex = color.replace("#", "");
+  const num = parseInt(hex, 16);
+  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
+  const b = Math.min(255, Math.max(0, (num & 255) + amount));
+  return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
+}
+
+// src/index.tsx
+function IntentAIWidget({
+  apiKey,
+  apiUrl,
+  widgetUrl,
+  position = "bottom-right",
+  theme = "light",
+  primaryColor,
+  allowVoice = true,
+  allowText = true,
+  allowScreenshot = true,
+  customMetadata,
+  user,
+  onOpen: _onOpen,
+  onClose: _onClose,
+  onFeedbackSubmitted: _onFeedbackSubmitted,
+  onError
+}) {
+  const widgetRef = useRef2(null);
+  const scriptLoadedRef = useRef2(false);
+  const initWidget = useCallback2(() => {
+    if (!window.FeedbackIQ || widgetRef.current) return;
+    try {
+      widgetRef.current = new window.FeedbackIQ({
+        apiKey,
+        apiUrl,
+        widgetUrl,
+        position,
+        theme,
+        primaryColor,
+        allowVoice,
+        allowText,
+        allowScreenshot,
+        customMetadata,
+        user
+      });
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Failed to initialize widget"));
+    }
+    void _onOpen;
+    void _onClose;
+    void _onFeedbackSubmitted;
+  }, [apiKey, apiUrl, widgetUrl, position, theme, primaryColor, allowVoice, allowText, allowScreenshot, customMetadata, user, onError]);
+  useEffect2(() => {
+    if (!widgetUrl) {
+      onError?.(new Error("widgetUrl is required for IntentAIWidget"));
+      return;
+    }
+    if (window.FeedbackIQ) {
+      initWidget();
+      return;
+    }
+    if (scriptLoadedRef.current) return;
+    const existingScript = document.querySelector(`script[src="${widgetUrl}"]`);
+    if (existingScript) {
+      existingScript.addEventListener("load", initWidget);
+      return;
+    }
+    scriptLoadedRef.current = true;
+    const script = document.createElement("script");
+    script.src = widgetUrl;
+    script.async = true;
+    script.onload = initWidget;
+    script.onerror = () => {
+      onError?.(new Error("Failed to load Intent AI widget script"));
+    };
+    document.head.appendChild(script);
+    return () => {
+      if (widgetRef.current) {
+        widgetRef.current.destroy();
+        widgetRef.current = null;
+      }
+    };
+  }, [initWidget, onError, widgetUrl]);
+  useEffect2(() => {
+    if (widgetRef.current && user) {
+      widgetRef.current.identify(user);
+    }
+  }, [user]);
+  useEffect2(() => {
+    if (widgetRef.current && customMetadata) {
+      widgetRef.current.setMetadata(customMetadata);
+    }
+  }, [customMetadata]);
+  return null;
+}
+function useIntentAI() {
+  const open = useCallback2(() => {
+    const widget = document.getElementById("feedbackiq-widget");
+    if (widget) {
+      const trigger = widget.shadowRoot?.querySelector(".fiq-trigger");
+      trigger?.click();
+    }
+  }, []);
+  const close = useCallback2(() => {
+    const widget = document.getElementById("feedbackiq-widget");
+    if (widget) {
+      const closeBtn = widget.shadowRoot?.querySelector(".fiq-close");
+      closeBtn?.click();
+    }
+  }, []);
+  const identify = useCallback2((user) => {
+    if (window.IntentAI?.widget) {
+      window.IntentAI.widget.identify(user);
+    }
+  }, []);
+  const setMetadata = useCallback2((metadata) => {
+    if (window.IntentAI?.widget) {
+      window.IntentAI.widget.setMetadata(metadata);
+    }
+  }, []);
+  return { open, close, identify, setMetadata };
+}
+var index_default = IntentAIWidget;
+export {
+  IntentAIWidget,
+  PremiumVoiceWidget,
+  index_default as default,
+  useIntentAI
+};