@avatarfirst/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1731 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AvatarAgent: () => AvatarAgent,
+  AvatarContext: () => AvatarContext,
+  AvatarFallback: () => AvatarFallback,
+  AvatarFirst: () => AvatarFirst,
+  AvatarProvider: () => AvatarProvider,
+  AvatarView: () => AvatarView,
+  CalendarOverlay: () => CalendarOverlay,
+  CardOverlay: () => CardOverlay,
+  ChartOverlay: () => ChartOverlay,
+  ChatOverlay: () => ChatOverlay,
+  ComparisonOverlay: () => ComparisonOverlay,
+  ConfirmOverlay: () => ConfirmOverlay,
+  DetailCardOverlay: () => DetailCardOverlay,
+  FileUploadOverlay: () => FileUploadOverlay,
+  FormOverlay: () => FormOverlay,
+  InsightOverlay: () => InsightOverlay,
+  MapOverlay: () => MapOverlay,
+  MediaOverlay: () => MediaOverlay,
+  OverlayContainer: () => OverlayContainer,
+  ProgressOverlay: () => ProgressOverlay,
+  RichTextOverlay: () => RichTextOverlay,
+  TableOverlay: () => TableOverlay,
+  avatarPulse: () => avatarPulse,
+  cardHover: () => cardHover,
+  cn: () => cn,
+  fadeIn: () => fadeIn,
+  fadeInUp: () => fadeInUp,
+  getOverlayVariants: () => getOverlayVariants,
+  pageTransition: () => pageTransition,
+  scaleIn: () => scaleIn,
+  slideIn: () => slideIn,
+  staggerContainer: () => staggerContainer,
+  useAction: () => useAction,
+  useAvatar: () => useAvatar,
+  useAvatarEvent: () => useAvatarEvent,
+  useAvatarFirst: () => useAvatarFirst,
+  useOverlay: () => useOverlay
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context/AvatarProvider.tsx
+var import_react2 = require("react");
+
+// src/context/AvatarContext.ts
+var import_react = require("react");
+var AvatarContext = (0, import_react.createContext)(null);
+
+// src/context/AvatarProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AvatarProvider({ agent, autoStart = false, children }) {
+  const [state, setState] = (0, import_react2.useState)(agent.getState());
+  const [overlays, setOverlays] = (0, import_react2.useState)(agent.getVisibleOverlays());
+  (0, import_react2.useEffect)(() => {
+    const unsubState = agent.on("state:changed", ({ to }) => {
+      setState(to);
+    });
+    const unsubOverlay = agent.overlays.events.on("overlay:change", (visible) => {
+      setOverlays([...visible]);
+    });
+    if (autoStart) {
+      agent.start();
+    }
+    return () => {
+      unsubState();
+      unsubOverlay();
+    };
+  }, [agent, autoStart]);
+  const isConnected = state === "connected" || state === "speaking" || state === "listening" || state === "thinking";
+  const value = (0, import_react2.useMemo)(
+    () => ({ agent, state, isConnected, overlays }),
+    [agent, state, isConnected, overlays]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarContext.Provider, { value, children });
+}
+
+// src/hooks/useAvatar.ts
+var import_react3 = require("react");
+function useAvatar() {
+  const ctx = (0, import_react3.useContext)(AvatarContext);
+  if (!ctx) {
+    throw new Error("useAvatar must be used within an AvatarProvider");
+  }
+  const { agent, state, isConnected } = ctx;
+  const start = (0, import_react3.useCallback)(async () => {
+    await agent?.start();
+  }, [agent]);
+  const stop = (0, import_react3.useCallback)(async () => {
+    await agent?.stop();
+  }, [agent]);
+  const speak = (0, import_react3.useCallback)(
+    async (text) => {
+      await agent?.speak(text);
+    },
+    [agent]
+  );
+  const message = (0, import_react3.useCallback)(
+    async (text) => {
+      await agent?.message(text);
+    },
+    [agent]
+  );
+  const interrupt = (0, import_react3.useCallback)(async () => {
+    await agent?.interrupt();
+  }, [agent]);
+  const startListening = (0, import_react3.useCallback)(() => {
+    agent?.startListening();
+  }, [agent]);
+  const stopListening = (0, import_react3.useCallback)(() => {
+    agent?.stopListening();
+  }, [agent]);
+  const attachVideoElement = (0, import_react3.useCallback)(
+    (el) => {
+      agent?.attachVideoElement(el);
+    },
+    [agent]
+  );
+  return {
+    agent,
+    state,
+    isConnected,
+    start,
+    stop,
+    speak,
+    message,
+    interrupt,
+    startListening,
+    stopListening,
+    attachVideoElement
+  };
+}
+
+// src/hooks/useOverlay.ts
+var import_react4 = require("react");
+function useOverlay(overlayId) {
+  const ctx = (0, import_react4.useContext)(AvatarContext);
+  if (!ctx) {
+    throw new Error("useOverlay must be used within an AvatarProvider");
+  }
+  const { agent, overlays } = ctx;
+  const isVisible = (0, import_react4.useMemo)(() => {
+    if (!overlayId) return false;
+    return overlays.some((o) => o.id === overlayId);
+  }, [overlayId, overlays]);
+  const overlayData = (0, import_react4.useMemo)(() => {
+    if (!overlayId) return void 0;
+    return overlays.find((o) => o.id === overlayId);
+  }, [overlayId, overlays]);
+  const show = (0, import_react4.useCallback)(
+    (config) => {
+      agent?.showOverlay(config);
+    },
+    [agent]
+  );
+  const hide = (0, import_react4.useCallback)(
+    (id) => {
+      agent?.hideOverlay(id ?? overlayId ?? "");
+    },
+    [agent, overlayId]
+  );
+  return {
+    overlays,
+    isVisible,
+    overlayData,
+    show,
+    hide
+  };
+}
+
+// src/hooks/useAvatarEvent.ts
+var import_react5 = require("react");
+function useAvatarEvent(event, handler) {
+  const ctx = (0, import_react5.useContext)(AvatarContext);
+  if (!ctx) {
+    throw new Error("useAvatarEvent must be used within an AvatarProvider");
+  }
+  (0, import_react5.useEffect)(() => {
+    if (!ctx.agent) return;
+    const unsub = ctx.agent.on(event, handler);
+    return unsub;
+  }, [ctx.agent, event, handler]);
+}
+
+// src/hooks/useAction.ts
+var import_react6 = require("react");
+function useAction() {
+  const ctx = (0, import_react6.useContext)(AvatarContext);
+  if (!ctx) {
+    throw new Error("useAction must be used within an AvatarProvider");
+  }
+  const trigger = (0, import_react6.useCallback)(
+    (actionId) => {
+      ctx.agent?.triggerAction(actionId);
+    },
+    [ctx.agent]
+  );
+  return { trigger };
+}
+
+// src/hooks/useAvatarFirst.ts
+var import_react7 = require("react");
+var import_core = require("@avatarfirst/core");
+function useAvatarFirst(options) {
+  const [state, setState] = (0, import_react7.useState)("idle");
+  const [sessionId, setSessionId] = (0, import_react7.useState)(null);
+  const [greeting, setGreeting] = (0, import_react7.useState)(null);
+  const [avatarToken, setAvatarToken] = (0, import_react7.useState)(null);
+  const [overlays, setOverlays] = (0, import_react7.useState)([]);
+  const [isProcessing, setIsProcessing] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const clientRef = (0, import_react7.useRef)(null);
+  const optionsRef = (0, import_react7.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react7.useEffect)(() => {
+    clientRef.current = new import_core.AvatarFirstClient({
+      apiKey: options.apiKey,
+      baseUrl: options.baseUrl
+    });
+  }, [options.apiKey, options.baseUrl]);
+  const connect = (0, import_react7.useCallback)(async () => {
+    if (!clientRef.current) return null;
+    setState("connecting");
+    setError(null);
+    optionsRef.current.onStateChange?.("connecting");
+    try {
+      const session = await clientRef.current.createSession();
+      setSessionId(session.sessionId);
+      setGreeting(session.greeting);
+      setAvatarToken(session.avatar ?? null);
+      setState("connected");
+      optionsRef.current.onStateChange?.("connected");
+      return session;
+    } catch (err) {
+      const msg = err.message;
+      setError(msg);
+      setState("error");
+      optionsRef.current.onStateChange?.("error");
+      return null;
+    }
+  }, []);
+  const sendMessage = (0, import_react7.useCallback)(async (text) => {
+    if (!clientRef.current || !sessionId || isProcessing) return null;
+    setIsProcessing(true);
+    try {
+      const response = await clientRef.current.sendMessage(sessionId, text);
+      if (response.overlay) {
+        setOverlays((prev) => [...prev, response.overlay]);
+        optionsRef.current.onOverlay?.(response.overlay);
+      }
+      if (response.actions) {
+        for (const action of response.actions) {
+          optionsRef.current.onAction?.(action);
+        }
+      }
+      setIsProcessing(false);
+      return response;
+    } catch (err) {
+      setError(err.message);
+      setIsProcessing(false);
+      return null;
+    }
+  }, [sessionId, isProcessing]);
+  const disconnect = (0, import_react7.useCallback)(() => {
+    if (clientRef.current && sessionId) {
+      clientRef.current.endSession(sessionId);
+    }
+    setSessionId(null);
+    setGreeting(null);
+    setAvatarToken(null);
+    setOverlays([]);
+    setState("idle");
+    optionsRef.current.onStateChange?.("idle");
+  }, [sessionId]);
+  return {
+    state,
+    sessionId,
+    greeting,
+    avatarToken,
+    overlays,
+    isProcessing,
+    error,
+    connect,
+    sendMessage,
+    disconnect
+  };
+}
+
+// src/components/overlays/OverlayContainer.tsx
+var import_framer_motion = require("framer-motion");
+
+// src/animations/overlayAnimations.ts
+function getOverlayVariants(animation = "fade") {
+  if (typeof animation === "object") {
+    return {
+      initial: animation.enter,
+      animate: animation.enter,
+      exit: animation.exit
+    };
+  }
+  switch (animation) {
+    case "fade":
+      return {
+        initial: { opacity: 0 },
+        animate: { opacity: 1, transition: { duration: 0.3 } },
+        exit: { opacity: 0, transition: { duration: 0.2 } }
+      };
+    case "slide-up":
+      return {
+        initial: { opacity: 0, y: 40 },
+        animate: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 25 } },
+        exit: { opacity: 0, y: 40, transition: { duration: 0.2 } }
+      };
+    case "slide-down":
+      return {
+        initial: { opacity: 0, y: -40 },
+        animate: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 25 } },
+        exit: { opacity: 0, y: -40, transition: { duration: 0.2 } }
+      };
+    case "slide-left":
+      return {
+        initial: { opacity: 0, x: 40 },
+        animate: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 300, damping: 25 } },
+        exit: { opacity: 0, x: 40, transition: { duration: 0.2 } }
+      };
+    case "slide-right":
+      return {
+        initial: { opacity: 0, x: -40 },
+        animate: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 300, damping: 25 } },
+        exit: { opacity: 0, x: -40, transition: { duration: 0.2 } }
+      };
+    case "scale":
+      return {
+        initial: { opacity: 0, scale: 0.85 },
+        animate: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 300, damping: 25 } },
+        exit: { opacity: 0, scale: 0.85, transition: { duration: 0.2 } }
+      };
+    case "none":
+      return {
+        initial: {},
+        animate: {},
+        exit: {}
+      };
+    default:
+      return {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 }
+      };
+  }
+}
+
+// src/components/overlays/OverlayContainer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getPositionStyles(position = "bottom-center") {
+  if (typeof position === "object") {
+    return { position: "absolute", left: position.x, top: position.y };
+  }
+  const base = { position: "absolute" };
+  switch (position) {
+    case "center":
+      return { ...base, top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+    case "bottom-center":
+      return { ...base, bottom: "2rem", left: "50%", transform: "translateX(-50%)" };
+    case "bottom-right":
+      return { ...base, bottom: "2rem", right: "2rem" };
+    case "bottom-left":
+      return { ...base, bottom: "2rem", left: "2rem" };
+    case "top-center":
+      return { ...base, top: "2rem", left: "50%", transform: "translateX(-50%)" };
+    case "right-center":
+      return { ...base, top: "50%", right: "2rem", transform: "translateY(-50%)" };
+    case "fullscreen":
+      return { ...base, inset: 0 };
+    default:
+      return { ...base, bottom: "2rem", left: "50%", transform: "translateX(-50%)" };
+  }
+}
+function OverlayContainer({ components }) {
+  const { overlays, hide } = useOverlay();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 pointer-events-none z-40", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: overlays.map((overlay) => {
+    const Component = components[overlay.component];
+    if (!Component) return null;
+    const variants = getOverlayVariants(overlay.animation);
+    const positionStyle = getPositionStyles(overlay.position);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_framer_motion.motion.div,
+      {
+        variants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        style: positionStyle,
+        className: "pointer-events-auto",
+        onClick: overlay.dismissOnClickOutside ? (e) => {
+          if (e.target === e.currentTarget) hide(overlay.id);
+        } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Component,
+          {
+            data: overlay.data,
+            overlayId: overlay.id,
+            onDismiss: () => hide(overlay.id)
+          }
+        )
+      },
+      overlay.id
+    );
+  }) }) });
+}
+
+// src/components/AvatarAgent.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AvatarAgent({
+  config,
+  overlayComponents = {},
+  autoStart = false,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(AvatarProvider, { agent: config, autoStart, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OverlayContainer, { components: overlayComponents })
+  ] });
+}
+
+// src/components/AvatarFirst.tsx
+var import_react14 = require("react");
+var import_core2 = require("@avatarfirst/core");
+
+// src/components/AvatarView.tsx
+var import_react8 = require("react");
+var import_framer_motion3 = require("framer-motion");
+
+// src/components/AvatarFallback.tsx
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AvatarFallback({ size, state }) {
+  const isSmall = size === "small";
+  const isMedium = size === "medium";
+  const faceSize = isSmall ? "w-12 h-12" : isMedium ? "w-24 h-24" : "w-full h-full";
+  const eyeSize = isSmall ? 4 : isMedium ? 6 : 12;
+  const mouthWidth = isSmall ? 15 : isMedium ? 25 : 50;
+  if (state === "connecting") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full h-full flex items-center justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.div,
+        {
+          className: "absolute inset-4 rounded-full border-4 border-blue-500/30",
+          animate: { scale: [1, 1.2, 1], opacity: [0.5, 0, 0.5] },
+          transition: { duration: 2, repeat: Infinity }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.div,
+        {
+          className: "absolute inset-8 rounded-full border-4 border-purple-500/30",
+          animate: { scale: [1, 1.3, 1], opacity: [0.5, 0, 0.5] },
+          transition: { duration: 2, repeat: Infinity, delay: 0.3 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.div,
+        {
+          className: "w-10 h-10 border-4 border-white/30 border-t-white rounded-full",
+          animate: { rotate: 360 },
+          transition: { duration: 1, repeat: Infinity, ease: "linear" }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `relative ${faceSize}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_framer_motion2.motion.div,
+      {
+        className: "absolute inset-0 rounded-full bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500",
+        animate: {
+          background: [
+            "linear-gradient(135deg, #60a5fa, #a855f7, #ec4899)",
+            "linear-gradient(135deg, #a855f7, #ec4899, #60a5fa)",
+            "linear-gradient(135deg, #ec4899, #60a5fa, #a855f7)",
+            "linear-gradient(135deg, #60a5fa, #a855f7, #ec4899)"
+          ]
+        },
+        transition: { duration: 8, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-2 rounded-full bg-gradient-to-br from-white/30 to-transparent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.ellipse,
+        {
+          cx: "35",
+          cy: "42",
+          rx: eyeSize,
+          ry: eyeSize,
+          fill: "white",
+          animate: { ry: [eyeSize, eyeSize * 0.1, eyeSize] },
+          transition: { duration: 0.15, repeat: Infinity, repeatDelay: 4, times: [0, 0.5, 1] }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.circle,
+        {
+          cx: "35",
+          cy: "42",
+          r: eyeSize * 0.5,
+          fill: "#1e293b",
+          animate: { cx: [35, 37, 35, 33, 35] },
+          transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "37", cy: "40", r: eyeSize * 0.2, fill: "white", opacity: "0.8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.ellipse,
+        {
+          cx: "65",
+          cy: "42",
+          rx: eyeSize,
+          ry: eyeSize,
+          fill: "white",
+          animate: { ry: [eyeSize, eyeSize * 0.1, eyeSize] },
+          transition: { duration: 0.15, repeat: Infinity, repeatDelay: 4, times: [0, 0.5, 1] }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.circle,
+        {
+          cx: "65",
+          cy: "42",
+          r: eyeSize * 0.5,
+          fill: "#1e293b",
+          animate: { cx: [65, 67, 65, 63, 65] },
+          transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "67", cy: "40", r: eyeSize * 0.2, fill: "white", opacity: "0.8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_framer_motion2.motion.path,
+        {
+          d: state === "speaking" ? `M ${50 - mouthWidth / 2} 62 Q 50 75 ${50 + mouthWidth / 2} 62` : `M ${50 - mouthWidth / 2} 65 Q 50 72 ${50 + mouthWidth / 2} 65`,
+          stroke: "white",
+          strokeWidth: isSmall ? 2 : isMedium ? 3 : 4,
+          fill: state === "speaking" ? "rgba(255,255,255,0.3)" : "none",
+          strokeLinecap: "round",
+          animate: state === "speaking" ? {
+            d: [
+              `M ${50 - mouthWidth / 2} 62 Q 50 75 ${50 + mouthWidth / 2} 62`,
+              `M ${50 - mouthWidth / 2} 62 Q 50 68 ${50 + mouthWidth / 2} 62`,
+              `M ${50 - mouthWidth / 2} 62 Q 50 78 ${50 + mouthWidth / 2} 62`,
+              `M ${50 - mouthWidth / 2} 62 Q 50 70 ${50 + mouthWidth / 2} 62`
+            ]
+          } : {},
+          transition: { duration: 0.3, repeat: Infinity, ease: "easeInOut" }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/AvatarView.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var sizeClasses = {
+  small: "w-16 h-16",
+  medium: "w-32 h-32",
+  large: "w-64 h-64",
+  fullscreen: "w-full h-full",
+  hero: "w-[500px] h-[500px]"
+};
+function AvatarView({ size = "medium", showStatus = true, className = "" }) {
+  const { state, attachVideoElement } = useAvatar();
+  const videoRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (videoRef.current) {
+      attachVideoElement(videoRef.current);
+    }
+  }, [attachVideoElement]);
+  const isConnected = state === "connected" || state === "speaking" || state === "listening" || state === "thinking";
+  const isFullscreen = size === "fullscreen";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_framer_motion3.motion.div,
+      {
+        className: `relative overflow-hidden ${isFullscreen ? "rounded-2xl" : "rounded-full"} ${sizeClasses[size]}`,
+        animate: {
+          scale: state === "speaking" ? [1, 1.02, 1] : 1
+        },
+        transition: {
+          duration: state === "speaking" ? 0.5 : 0.3,
+          repeat: state === "speaking" ? Infinity : 0
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "video",
+            {
+              ref: videoRef,
+              autoPlay: true,
+              playsInline: true,
+              className: `absolute inset-0 w-full h-full object-cover ${!isConnected ? "hidden" : ""}`
+            }
+          ),
+          !isConnected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarFallback, { state, size }) }),
+          state === "connecting" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_framer_motion3.motion.div,
+            {
+              className: "absolute inset-0 rounded-full border-4 border-yellow-500",
+              animate: { rotate: 360 },
+              transition: { duration: 2, repeat: Infinity, ease: "linear" },
+              style: { borderTopColor: "transparent", borderLeftColor: "transparent" }
+            }
+          ),
+          state === "connected" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_framer_motion3.motion.div,
+            {
+              className: "absolute inset-0 rounded-full border-4 border-green-500/50",
+              animate: { opacity: [0.3, 0.6, 0.3] },
+              transition: { duration: 2, repeat: Infinity }
+            }
+          ),
+          state === "speaking" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_framer_motion3.motion.div,
+            {
+              className: "absolute inset-0 rounded-full border-4 border-blue-400",
+              animate: { scale: [1, 1.03, 1], opacity: [0.7, 1, 0.7] },
+              transition: { duration: 0.5, repeat: Infinity }
+            }
+          )
+        ]
+      }
+    ),
+    showStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_framer_motion3.motion.div,
+      {
+        className: `absolute flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium shadow-lg ${state === "disconnected" ? "bg-slate-600 text-white" : state === "connecting" ? "bg-yellow-500 text-white" : state === "connected" ? "bg-green-500 text-white" : state === "speaking" ? "bg-blue-500 text-white" : state === "listening" ? "bg-purple-500 text-white" : "bg-slate-600 text-white"} ${size === "small" ? "-bottom-1 -right-1 text-[10px] px-1.5 py-0.5" : size === "medium" ? "bottom-0 right-0" : size === "large" ? "bottom-2 right-2" : "bottom-4 right-4 text-sm px-3 py-1.5"}`,
+        initial: { scale: 0 },
+        animate: { scale: 1 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "capitalize", children: state === "disconnected" ? "Offline" : state })
+      },
+      state
+    )
+  ] });
+}
+
+// src/components/overlays/CardOverlay.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CardOverlay({ data, onDismiss }) {
+  const { title, description, items, actions } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[300px] max-w-md", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-lg font-semibold mb-1", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-gray-500 mb-4", children: description }),
+    items && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-2 mb-4", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between py-2 border-b border-gray-100 last:border-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-gray-700", children: item.label }),
+      item.value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm text-gray-500", children: item.value })
+    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2 justify-end", children: [
+      actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          onClick: action.onClick,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors",
+          children: action.label
+        },
+        i
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          onClick: onDismiss,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+          children: "Close"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/overlays/FormOverlay.tsx
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function FormOverlay({ data, onDismiss }) {
+  const { title, fields = [], submitLabel = "Submit", onSubmit } = data ?? {};
+  const [values, setValues] = (0, import_react9.useState)({});
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.(values);
+    onDismiss();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-md", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
+      fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: field.label }),
+        field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "textarea",
+          {
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
+            placeholder: field.placeholder,
+            required: field.required,
+            value: values[field.name] ?? "",
+            onChange: (e) => setValues((v) => ({ ...v, [field.name]: e.target.value }))
+          }
+        ) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "select",
+          {
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
+            required: field.required,
+            value: values[field.name] ?? "",
+            onChange: (e) => setValues((v) => ({ ...v, [field.name]: e.target.value })),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: field.placeholder ?? "Select..." }),
+              field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt, children: opt }, opt))
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: field.type ?? "text",
+            className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
+            placeholder: field.placeholder,
+            required: field.required,
+            value: values[field.name] ?? "",
+            onChange: (e) => setValues((v) => ({ ...v, [field.name]: e.target.value }))
+          }
+        )
+      ] }, field.name)),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "submit",
+            className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors",
+            children: submitLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/overlays/TableOverlay.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TableOverlay({ data, onDismiss }) {
+  const { title, columns = [], rows = [] } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[400px] max-w-2xl overflow-x-auto", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onDismiss, className: "text-gray-400 hover:text-gray-600 text-sm", children: "Close" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { className: "w-full", children: [
+      columns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { className: "border-b", children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "text-left py-2 px-3 text-sm font-medium text-gray-500", children: col }, i)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { className: "border-b last:border-0 hover:bg-gray-50", children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: "py-2 px-3 text-sm text-gray-700", children: cell }, j)) }, i)) })
+    ] })
+  ] });
+}
+
+// src/components/overlays/ProgressOverlay.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ProgressOverlay({ data, onDismiss }) {
+  const { title, steps = [] } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          className: `w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${step.completed ? "bg-green-500 text-white" : step.active ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-400"}`,
+          children: step.completed ? "\u2713" : i + 1
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `text-sm ${step.completed ? "text-gray-500 line-through" : step.active ? "text-gray-900 font-medium" : "text-gray-400"}`, children: step.label })
+    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "mt-4 w-full py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+        children: "Close"
+      }
+    )
+  ] });
+}
+
+// src/components/overlays/ConfirmOverlay.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ConfirmOverlay({ data, onDismiss }) {
+  const { title, message, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[300px] max-w-sm", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-lg font-semibold mb-2", children: title }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-gray-500 mb-6", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          onClick: () => {
+            onConfirm?.();
+            onDismiss();
+          },
+          className: "flex-1 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors",
+          children: confirmLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          onClick: () => {
+            onCancel?.();
+            onDismiss();
+          },
+          className: "flex-1 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+          children: cancelLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/overlays/ChatOverlay.tsx
+var import_react10 = require("react");
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ChatOverlay({ data, onDismiss }) {
+  const { title = "Chat", messages: initialMessages = [], suggestions = [] } = data ?? {};
+  const [messages, setMessages] = (0, import_react10.useState)(initialMessages);
+  const [input, setInput] = (0, import_react10.useState)("");
+  const { speak } = useAvatar();
+  const handleSend = async () => {
+    if (!input.trim()) return;
+    const userMsg = {
+      id: Date.now().toString(),
+      role: "user",
+      content: input,
+      timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setInput("");
+    await speak(`I understand you want to ${input.toLowerCase()}. Let me help you with that.`);
+    const aiMsg = {
+      id: (Date.now() + 1).toString(),
+      role: "assistant",
+      content: `I'll help you ${input.toLowerCase()}. This action has been queued.`,
+      timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    };
+    setMessages((prev) => [...prev, aiMsg]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl overflow-hidden w-96 flex flex-col", style: { maxHeight: "500px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "bg-gradient-to-r from-blue-500 to-blue-600 p-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-white font-semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { onClick: onDismiss, className: "text-white/70 hover:text-white text-sm", children: "Close" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-center text-gray-400 py-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium mb-4", children: "How can I help?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children: suggestions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          className: "block w-full text-left text-sm p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors",
+          onClick: () => setInput(s),
+          children: s
+        },
+        s
+      )) })
+    ] }) : messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_framer_motion4.motion.div,
+      {
+        className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`,
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `max-w-[80%] p-3 rounded-2xl ${msg.role === "user" ? "bg-blue-500 text-white rounded-br-none" : "bg-gray-100 text-gray-800 rounded-bl-none"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm", children: msg.content }),
+          msg.timestamp && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: `text-xs mt-1 ${msg.role === "user" ? "text-blue-100" : "text-gray-400"}`, children: msg.timestamp })
+        ] })
+      },
+      msg.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-3 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "input",
+        {
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && handleSend(),
+          placeholder: "Type a message...",
+          className: "flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          onClick: handleSend,
+          disabled: !input.trim(),
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors",
+          children: "Send"
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/components/overlays/InsightOverlay.tsx
+var import_framer_motion5 = require("framer-motion");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var insightStyles = {
+  recommendation: { bg: "bg-green-50", border: "border-green-200", icon: "\u2191", iconColor: "text-green-500" },
+  comparison: { bg: "bg-blue-50", border: "border-blue-200", icon: "\u2261", iconColor: "text-blue-500" },
+  warning: { bg: "bg-yellow-50", border: "border-yellow-200", icon: "\u26A0", iconColor: "text-yellow-500" }
+};
+function InsightOverlay({ data, onDismiss }) {
+  const { title, subtitle, insights = [], actions = [], onAction } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-gray-500", children: subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: onDismiss, className: "text-gray-400 hover:text-gray-600 text-sm", children: "Close" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: insights.map((insight, i) => {
+      const style = insightStyles[insight.type];
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_framer_motion5.motion.div,
+        {
+          className: `p-3 rounded-lg border ${style.bg} ${style.border}`,
+          initial: { opacity: 0, x: -10 },
+          animate: { opacity: 1, x: 0 },
+          transition: { delay: i * 0.1 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: style.iconColor, children: style.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm", children: insight.text }),
+              insight.confidence != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-xs text-gray-400 mt-1", children: [
+                "Confidence: ",
+                Math.round(insight.confidence * 100),
+                "%"
+              ] })
+            ] })
+          ] })
+        },
+        i
+      );
+    }) }),
+    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-4 pt-3 border-t flex flex-wrap gap-2", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        onClick: () => onAction?.(action),
+        className: "text-xs px-3 py-1.5 rounded-full bg-purple-100 text-purple-700 hover:bg-purple-200 transition-colors",
+        children: action
+      },
+      action
+    )) })
+  ] });
+}
+
+// src/components/overlays/DetailCardOverlay.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function DetailCardOverlay({ data, onDismiss }) {
+  const { title, body, image, metadata, actions } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
+    image && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "img",
+      {
+        src: image,
+        alt: title ?? "Detail",
+        className: "w-full h-48 object-cover rounded-xl mb-4"
+      }
+    ),
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-lg font-semibold mb-1", children: title }),
+    body && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-gray-600 mb-4 leading-relaxed", children: body }),
+    metadata && Object.keys(metadata).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-1.5 mb-4", children: Object.entries(metadata).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-100 last:border-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xs font-medium text-gray-400 uppercase tracking-wider", children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-gray-700", children: value })
+    ] }, key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-2 justify-end", children: [
+      actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          onClick: action.onClick,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors",
+          children: action.label
+        },
+        i
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          onClick: onDismiss,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+          children: "Close"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/overlays/ComparisonOverlay.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ComparisonOverlay({ data, onDismiss }) {
+  const { title, items } = data ?? {};
+  const attributeKeys = items?.length ? [...new Set(items.flatMap((item) => Object.keys(item.attributes)))] : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[400px] max-w-2xl", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    items && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-x-auto mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "border-b border-gray-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("th", { className: "text-left py-2 pr-4 text-gray-400 font-medium text-xs uppercase tracking-wider", children: "Feature" }),
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("th", { className: "text-center py-2 px-3 font-semibold text-gray-800", children: item.name }, item.name))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: attributeKeys.map((key, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: i % 2 === 0 ? "bg-gray-50" : "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "py-2 pr-4 text-gray-600 font-medium", children: key }),
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "text-center py-2 px-3 text-gray-700", children: String(item.attributes[key] ?? "\u2014") }, item.name))
+      ] }, key)) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+        children: "Close"
+      }
+    ) })
+  ] });
+}
+
+// src/components/overlays/CalendarOverlay.tsx
+var import_react11 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CalendarOverlay({ data, onDismiss }) {
+  const { title, available_slots, onSelect } = data ?? {};
+  const [selectedDate, setSelectedDate] = (0, import_react11.useState)(null);
+  const [selectedSlot, setSelectedSlot] = (0, import_react11.useState)(null);
+  const groupedSlots = (0, import_react11.useMemo)(() => {
+    if (!available_slots) return /* @__PURE__ */ new Map();
+    const groups = /* @__PURE__ */ new Map();
+    for (const slot of available_slots) {
+      const existing = groups.get(slot.date) ?? [];
+      existing.push(slot);
+      groups.set(slot.date, existing);
+    }
+    return groups;
+  }, [available_slots]);
+  const dates = [...groupedSlots.keys()];
+  const activeDate = selectedDate ?? dates[0] ?? null;
+  const slotsForDate = activeDate ? groupedSlots.get(activeDate) ?? [] : [];
+  const handleConfirm = () => {
+    if (selectedSlot) {
+      onSelect?.(selectedSlot);
+      onDismiss();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    dates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex gap-2 overflow-x-auto pb-2 mb-3", children: dates.map((date) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          onClick: () => {
+            setSelectedDate(date);
+            setSelectedSlot(null);
+          },
+          className: `px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap transition-colors ${activeDate === date ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+          children: date
+        },
+        date
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-wrap gap-2 mb-4", children: slotsForDate.map((slot, i) => {
+        const isAvailable = slot.available !== false;
+        const isSelected = selectedSlot === slot;
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            disabled: !isAvailable,
+            onClick: () => setSelectedSlot(slot),
+            className: `px-3 py-1.5 text-sm rounded-lg transition-colors ${!isAvailable ? "bg-gray-50 text-gray-300 cursor-not-allowed" : isSelected ? "bg-blue-500 text-white ring-2 ring-blue-300" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+            children: slot.time
+          },
+          i
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2 justify-end", children: [
+      selectedSlot && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          onClick: handleConfirm,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors",
+          children: "Confirm"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          onClick: onDismiss,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+          children: "Close"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/overlays/MediaOverlay.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function MediaOverlay({ data, onDismiss }) {
+  const { title, url, type = "image", alt, autoplay } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-xl", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    url && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mb-4 rounded-xl overflow-hidden bg-gray-100", children: [
+      type === "video" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "video",
+        {
+          src: url,
+          controls: true,
+          autoPlay: autoplay,
+          className: "w-full max-h-80 object-contain"
+        }
+      ),
+      type === "audio" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "p-6 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("audio", { src: url, controls: true, autoPlay: autoplay, className: "w-full" }) }),
+      type === "image" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "img",
+        {
+          src: url,
+          alt: alt ?? title ?? "Media",
+          className: "w-full max-h-80 object-contain"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+        children: "Close"
+      }
+    ) })
+  ] });
+}
+
+// src/components/overlays/MapOverlay.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function MapOverlay({ data, onDismiss }) {
+  const { title, locations } = data ?? {};
+  const getMapsUrl = (loc) => `https://www.google.com/maps/search/?api=1&query=${loc.lat},${loc.lng}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-md", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    locations && locations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-3 mb-4", children: locations.map((loc, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-start gap-3 p-3 rounded-xl bg-gray-50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-8 h-8 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-4 h-4 text-red-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fillRule: "evenodd", d: "M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z", clipRule: "evenodd" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        loc.label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm font-medium text-gray-800", children: loc.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-xs text-gray-400", children: [
+          loc.lat.toFixed(4),
+          ", ",
+          loc.lng.toFixed(4)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "a",
+          {
+            href: getMapsUrl(loc),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-xs text-blue-500 hover:text-blue-600 font-medium",
+            children: "Open in Maps \u2192"
+          }
+        )
+      ] })
+    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+        children: "Close"
+      }
+    ) })
+  ] });
+}
+
+// src/components/overlays/RichTextOverlay.tsx
+var import_react12 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function parseMarkdown(md) {
+  let html = md.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto my-2"><code>$2</code></pre>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-xs">$1</code>').replace(/^### (.+)$/gm, '<h4 class="text-base font-semibold mt-3 mb-1">$1</h4>').replace(/^## (.+)$/gm, '<h3 class="text-lg font-semibold mt-4 mb-1">$1</h3>').replace(/^# (.+)$/gm, '<h2 class="text-xl font-bold mt-4 mb-2">$1</h2>').replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 underline">$1</a>').replace(/^- (.+)$/gm, '<li class="ml-4 list-disc text-sm">$1</li>').replace(/^(?!<[hlupao])(.*\S.*)$/gm, '<p class="text-sm text-gray-600 my-1">$1</p>');
+  return html;
+}
+function RichTextOverlay({ data, onDismiss }) {
+  const { title, content } = data ?? {};
+  const html = (0, import_react12.useMemo)(() => content ? parseMarkdown(content) : "", [content]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    html && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        className: "max-h-96 overflow-y-auto mb-4",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+        children: "Close"
+      }
+    ) })
+  ] });
+}
+
+// src/components/overlays/ChartOverlay.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#06b6d4", "#ef4444", "#84cc16"];
+function BarChart({ series }) {
+  const max = Math.max(...series.map((s) => s.value), 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-2", children: series.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs text-gray-500 w-20 truncate text-right", children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-1 h-6 bg-gray-100 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: "h-full rounded-full transition-all duration-500",
+        style: {
+          width: `${item.value / max * 100}%`,
+          backgroundColor: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length]
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-medium text-gray-700 w-12", children: item.value })
+  ] }, i)) });
+}
+function PieChart({ series }) {
+  const total = series.reduce((sum, s) => sum + s.value, 0) || 1;
+  const radius = 60;
+  const circumference = 2 * Math.PI * radius;
+  let offset = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: "160", height: "160", viewBox: "0 0 160 160", className: "flex-shrink-0", children: series.map((item, i) => {
+      const dash = item.value / total * circumference;
+      const currentOffset = offset;
+      offset += dash;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "circle",
+        {
+          cx: "80",
+          cy: "80",
+          r: radius,
+          fill: "none",
+          stroke: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+          strokeWidth: "24",
+          strokeDasharray: `${dash} ${circumference - dash}`,
+          strokeDashoffset: -currentOffset,
+          transform: "rotate(-90 80 80)"
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-1.5", children: series.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "div",
+        {
+          className: "w-3 h-3 rounded-sm flex-shrink-0",
+          style: { backgroundColor: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length] }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs text-gray-600", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-xs font-medium text-gray-800", children: [
+        Math.round(item.value / total * 100),
+        "%"
+      ] })
+    ] }, i)) })
+  ] });
+}
+function LineChart({ series }) {
+  const max = Math.max(...series.map((s) => s.value), 1);
+  const width = 300;
+  const height = 120;
+  const padding = 8;
+  const points = series.map((item, i) => ({
+    x: padding + i / Math.max(series.length - 1, 1) * (width - padding * 2),
+    y: height - padding - item.value / max * (height - padding * 2)
+  }));
+  const pathD = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width, height, viewBox: `0 0 ${width} ${height}`, className: "w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: pathD, fill: "none", stroke: "#3b82f6", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+      points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: p.x, cy: p.y, r: "3", fill: "#3b82f6" }, i))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-between mt-1", children: series.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] text-gray-400", children: item.label }, i)) })
+  ] });
+}
+function ChartOverlay({ data, onDismiss }) {
+  const { title, type = "bar", series } = data ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-md", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    series && series.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mb-4", children: [
+      type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BarChart, { series }),
+      type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PieChart, { series }),
+      type === "line" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LineChart, { series })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+        children: "Close"
+      }
+    ) })
+  ] });
+}
+
+// src/components/overlays/FileUploadOverlay.tsx
+var import_react13 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var MIME_MAP = {
+  pdf: "application/pdf",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  doc: "application/msword",
+  txt: "text/plain",
+  csv: "text/csv",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  svg: "image/svg+xml"
+};
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+function FileUploadOverlay({ data, onDismiss }) {
+  const { title, accept, max_size, multiple, onUpload } = data ?? {};
+  const inputRef = (0, import_react13.useRef)(null);
+  const [files, setFiles] = (0, import_react13.useState)([]);
+  const [dragging, setDragging] = (0, import_react13.useState)(false);
+  const acceptMime = accept?.map((ext) => MIME_MAP[ext.toLowerCase()] ?? `.${ext}`).join(",");
+  const addFiles = (0, import_react13.useCallback)((newFiles) => {
+    if (!newFiles) return;
+    const arr = Array.from(newFiles).filter((f) => {
+      if (max_size && f.size > max_size) return false;
+      return true;
+    });
+    setFiles((prev) => multiple ? [...prev, ...arr] : arr.slice(0, 1));
+  }, [max_size, multiple]);
+  const removeFile = (index) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const handleSubmit = () => {
+    if (files.length > 0) {
+      onUpload?.(files);
+      onDismiss();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        className: `border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-colors mb-3 ${dragging ? "border-blue-400 bg-blue-50" : "border-gray-200 hover:border-gray-300"}`,
+        onClick: () => inputRef.current?.click(),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragging(false);
+          addFiles(e.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { className: "w-8 h-8 text-gray-300 mx-auto mb-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-gray-500", children: "Drop files here or click to browse" }),
+          accept && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-gray-400 mt-1", children: accept.map((e) => `.${e}`).join(", ") }),
+          max_size && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-xs text-gray-400", children: [
+            "Max ",
+            formatSize(max_size)
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "hidden",
+              accept: acceptMime,
+              multiple,
+              onChange: (e) => addFiles(e.target.files)
+            }
+          )
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2 mb-4", children: files.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between py-1.5 px-3 bg-gray-50 rounded-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-gray-700 truncate", children: file.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-gray-400", children: formatSize(file.size) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => removeFile(i), className: "text-gray-400 hover:text-red-500 text-sm ml-2", children: "\xD7" })
+    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 justify-end", children: [
+      files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          onClick: handleSubmit,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors",
+          children: "Upload"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          onClick: onDismiss,
+          className: "px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors",
+          children: "Close"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/AvatarFirst.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var defaultOverlays = {
+  card: CardOverlay,
+  form: FormOverlay,
+  table: TableOverlay,
+  progress: ProgressOverlay,
+  confirm: ConfirmOverlay,
+  chat: ChatOverlay,
+  insight: InsightOverlay
+};
+function AvatarFirstInner({
+  client,
+  onOverlay,
+  onAction
+}) {
+  const { state: avatarState, speak } = useAvatar();
+  const { show } = useOverlay();
+  const [sessionId, setSessionId] = (0, import_react14.useState)(null);
+  const [greeting, setGreeting] = (0, import_react14.useState)(null);
+  const [hasGreeted, setHasGreeted] = (0, import_react14.useState)(false);
+  const [isProcessing, setIsProcessing] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    if (avatarState === "connected" && !sessionId) {
+      client.createSession().then((session) => {
+        setSessionId(session.sessionId);
+        setGreeting(session.greeting);
+      }).catch((err) => {
+        console.error("[AvatarFirst] Session init failed:", err);
+      });
+    }
+  }, [avatarState, sessionId, client]);
+  (0, import_react14.useEffect)(() => {
+    if (sessionId && avatarState === "connected" && greeting && !hasGreeted) {
+      setHasGreeted(true);
+      speak(greeting);
+    }
+  }, [sessionId, avatarState, greeting, hasGreeted, speak]);
+  const handleResponse = (0, import_react14.useCallback)((data) => {
+    if (data.speech) {
+      speak(data.speech);
+    }
+    if (data.overlay) {
+      const overlayId = `overlay-${Date.now()}`;
+      show({
+        id: overlayId,
+        component: data.overlay.type,
+        data: data.overlay.data,
+        position: "right-center",
+        animation: "slide-left",
+        dismissOnClickOutside: true
+      });
+      onOverlay?.(data.overlay);
+    }
+    if (data.actions) {
+      for (const action of data.actions) {
+        onAction?.(action);
+      }
+    }
+  }, [speak, show, onOverlay, onAction]);
+  const handleSend = (0, import_react14.useCallback)(async (text) => {
+    if (!sessionId || isProcessing) return;
+    setIsProcessing(true);
+    try {
+      const response = await client.sendMessage(sessionId, text);
+      handleResponse(response);
+    } catch (err) {
+      console.error("[AvatarFirst] Message failed:", err);
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [client, sessionId, isProcessing, handleResponse]);
+  const isConnected = avatarState === "connected" || avatarState === "speaking" || avatarState === "listening" || avatarState === "thinking";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarView, { size: "fullscreen", showStatus: false, className: "w-full h-full" }),
+    isConnected && sessionId && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-20 w-full max-w-md px-4", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+          const input = e.currentTarget.elements.namedItem("message");
+          if (input.value.trim()) {
+            handleSend(input.value.trim());
+            input.value = "";
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "input",
+          {
+            name: "message",
+            type: "text",
+            placeholder: "Type a message...",
+            disabled: isProcessing,
+            className: "w-full px-4 py-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-white placeholder-white/50 outline-none focus:border-white/40"
+          }
+        )
+      }
+    ) }),
+    !isConnected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-slate-950/80 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-12 h-12 border-2 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-white/60 text-sm", children: "Connecting..." })
+    ] }) })
+  ] });
+}
+function AvatarFirst({
+  apiKey,
+  baseUrl,
+  onOverlay,
+  onAction,
+  onStateChange,
+  className,
+  overlayComponents
+}) {
+  const [agent, setAgent] = (0, import_react14.useState)(null);
+  const [error, setError] = (0, import_react14.useState)(false);
+  const client = (0, import_react14.useMemo)(
+    () => new import_core2.AvatarFirstClient({ apiKey, baseUrl }),
+    [apiKey, baseUrl]
+  );
+  const mergedOverlays = (0, import_react14.useMemo)(
+    () => ({ ...defaultOverlays, ...overlayComponents }),
+    [overlayComponents]
+  );
+  const onStateChangeRef = (0, import_react14.useRef)(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  (0, import_react14.useEffect)(() => {
+    let cancelled = false;
+    async function init() {
+      try {
+        onStateChangeRef.current?.("connecting");
+        const session = await client.createSession();
+        if (cancelled) return;
+        const engine = new import_core2.HeyGenAdapter();
+        const avatarAgent = (0, import_core2.createAvatarAgent)({
+          engine,
+          engineConfig: {
+            serverUrl: baseUrl || "https://avatarfirst.dev",
+            sessionToken: session.avatar?.token,
+            language: "en",
+            voiceChat: false
+          },
+          actions: []
+        });
+        setAgent(avatarAgent);
+        onStateChangeRef.current?.("connected");
+      } catch (err) {
+        if (!cancelled) {
+          console.error("[AvatarFirst] Init failed:", err);
+          setError(true);
+          onStateChangeRef.current?.("error");
+        }
+      }
+    }
+    init();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, baseUrl]);
+  (0, import_react14.useEffect)(() => {
+    return () => {
+      agent?.destroy();
+    };
+  }, [agent]);
+  if (error || !agent) {
+    if (error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `flex items-center justify-center bg-slate-950 ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-red-400 mb-2 text-sm", children: "Failed to connect" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "button",
+          {
+            onClick: () => window.location.reload(),
+            className: "text-white/60 text-xs underline hover:text-white/80",
+            children: "Retry"
+          }
+        )
+      ] }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `flex items-center justify-center bg-slate-950 ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-12 h-12 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AvatarProvider, { agent, autoStart: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(OverlayContainer, { components: mergedOverlays }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarFirstInner, { client, onOverlay, onAction })
+  ] }) });
+}
+
+// src/animations/variants.ts
+var pageTransition = {
+  initial: { opacity: 0, x: -20 },
+  animate: { opacity: 1, x: 0, transition: { duration: 0.3 } },
+  exit: { opacity: 0, x: 20, transition: { duration: 0.2 } }
+};
+var fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: { duration: 0.5 } },
+  exit: { opacity: 0 }
+};
+var fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0, transition: { duration: 0.4 } }
+};
+var cardHover = {
+  initial: { scale: 1, y: 0 },
+  hover: {
+    scale: 1.03,
+    y: -8,
+    transition: { type: "spring", stiffness: 300, damping: 20 }
+  },
+  tap: { scale: 0.98 }
+};
+var avatarPulse = {
+  idle: {
+    scale: [1, 1.02, 1],
+    transition: { repeat: Infinity, duration: 3, ease: "easeInOut" }
+  },
+  speaking: {
+    scale: [1, 1.03, 1],
+    transition: { repeat: Infinity, duration: 0.5, ease: "easeInOut" }
+  },
+  listening: {
+    scale: 1,
+    transition: { duration: 0.2 }
+  },
+  thinking: {
+    scale: [1, 1.01, 1],
+    transition: { repeat: Infinity, duration: 1, ease: "easeInOut" }
+  }
+};
+var staggerContainer = {
+  initial: {},
+  animate: {
+    transition: { staggerChildren: 0.1 }
+  }
+};
+var slideIn = {
+  initial: { x: "100%", opacity: 0 },
+  animate: { x: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } },
+  exit: { x: "100%", opacity: 0 }
+};
+var scaleIn = {
+  initial: { scale: 0.8, opacity: 0 },
+  animate: { scale: 1, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 25 } },
+  exit: { scale: 0.8, opacity: 0 }
+};
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvatarAgent,
+  AvatarContext,
+  AvatarFallback,
+  AvatarFirst,
+  AvatarProvider,
+  AvatarView,
+  CalendarOverlay,
+  CardOverlay,
+  ChartOverlay,
+  ChatOverlay,
+  ComparisonOverlay,
+  ConfirmOverlay,
+  DetailCardOverlay,
+  FileUploadOverlay,
+  FormOverlay,
+  InsightOverlay,
+  MapOverlay,
+  MediaOverlay,
+  OverlayContainer,
+  ProgressOverlay,
+  RichTextOverlay,
+  TableOverlay,
+  avatarPulse,
+  cardHover,
+  cn,
+  fadeIn,
+  fadeInUp,
+  getOverlayVariants,
+  pageTransition,
+  scaleIn,
+  slideIn,
+  staggerContainer,
+  useAction,
+  useAvatar,
+  useAvatarEvent,
+  useAvatarFirst,
+  useOverlay
+});