@mcp-elements/react 0.1.0

package/dist/index.js

@@ -0,0 +1,1793 @@
+// src/button.tsx
+import { forwardRef } from "react";
+import { cn } from "@mcp-elements/core";
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: cn("mcpe-btn", `mcpe-btn-${variant}`, `mcpe-btn-${size}`, className),
+      ...props
+    }
+  )
+);
+Button.displayName = "Button";
+
+// src/badge.tsx
+import { cn as cn2 } from "@mcp-elements/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Badge({ variant = "default", className, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn2("mcpe-badge", `mcpe-badge-${variant}`, className), ...props });
+}
+
+// src/card.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { cn as cn3 } from "@mcp-elements/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Card = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn3("mcpe-card", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn3("mcpe-card-header", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("h3", { ref, className: cn3("mcpe-card-title", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("p", { ref, className: cn3("mcpe-card-description", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn3("mcpe-card-content", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn3("mcpe-card-footer", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+
+// src/input.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { cn as cn4 } from "@mcp-elements/core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Input = forwardRef3(
+  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx4("input", { ref, type, className: cn4("mcpe-input", className), ...props })
+);
+Input.displayName = "Input";
+
+// src/textarea.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { cn as cn5 } from "@mcp-elements/core";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Textarea = forwardRef4(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5("textarea", { ref, className: cn5("mcpe-textarea", className), ...props })
+);
+Textarea.displayName = "Textarea";
+
+// src/avatar.tsx
+import { forwardRef as forwardRef5, useState } from "react";
+import { cn as cn6 } from "@mcp-elements/core";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Avatar = forwardRef5(
+  ({ src, alt, fallback, className, ...props }, ref) => {
+    const [hasError, setHasError] = useState(false);
+    return /* @__PURE__ */ jsx6("div", { ref, className: cn6("mcpe-avatar", className), ...props, children: src && !hasError ? /* @__PURE__ */ jsx6("img", { src, alt, className: "mcpe-avatar-image", onError: () => setHasError(true) }) : /* @__PURE__ */ jsx6("span", { className: "mcpe-avatar-fallback", children: fallback }) });
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/separator.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { cn as cn7 } from "@mcp-elements/core";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Separator = forwardRef6(
+  ({ orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cn7("mcpe-separator", `mcpe-separator-${orientation}`, className),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+
+// src/skeleton.tsx
+import { cn as cn8 } from "@mcp-elements/core";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx8("div", { className: cn8("mcpe-skeleton", className), ...props });
+}
+
+// src/dialog.tsx
+import { useEffect, useRef, useId, createContext, useContext } from "react";
+import { cn as cn9, trapFocus, lockScroll } from "@mcp-elements/core";
+
+// src/hooks/use-dialog.ts
+import { useState as useState2, useMemo } from "react";
+import { createDialog } from "@mcp-elements/core";
+function useDialog(config = {}) {
+  const [open, setOpen] = useState2(false);
+  const api = useMemo(
+    () => createDialog({ ...config, onOpenChange: setOpen }),
+    [config.modal]
+  );
+  return { open, setOpen, ...api };
+}
+
+// src/dialog.tsx
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var DialogIdContext = createContext("");
+function Dialog({ open: controlledOpen, onOpenChange, modal = true, children }) {
+  const dialog = useDialog({ modal });
+  const isOpen = controlledOpen ?? dialog.open;
+  const setOpen = onOpenChange ?? dialog.setOpen;
+  const contentRef = useRef(null);
+  const dialogId = useId();
+  useEffect(() => {
+    if (!isOpen || !modal) return;
+    const unlock = lockScroll();
+    return unlock;
+  }, [isOpen, modal]);
+  useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+    const el = contentRef.current;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      trapFocus(el, e);
+    };
+    el.addEventListener("keydown", handler);
+    return () => el.removeEventListener("keydown", handler);
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(DialogIdContext.Provider, { value: dialogId, children: [
+    /* @__PURE__ */ jsx9("div", { className: "mcpe-dialog-overlay", onClick: () => setOpen(false) }),
+    /* @__PURE__ */ jsxs("div", { ref: contentRef, className: "mcpe-dialog-content", role: "dialog", "aria-modal": modal, "aria-labelledby": `${dialogId}-title`, "aria-describedby": `${dialogId}-description`, children: [
+      children,
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "mcpe-dialog-close",
+          "aria-label": "Close",
+          onClick: () => setOpen(false),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx9("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx9("path", { d: "m6 6 12 12" })
+            ] }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx9("div", { className: cn9("mcpe-dialog-header", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx9("div", { className: cn9("mcpe-dialog-footer", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  const dialogId = useContext(DialogIdContext);
+  return /* @__PURE__ */ jsx9("h2", { id: `${dialogId}-title`, className: cn9("mcpe-dialog-title", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  const dialogId = useContext(DialogIdContext);
+  return /* @__PURE__ */ jsx9("p", { id: `${dialogId}-description`, className: cn9("mcpe-dialog-description", className), ...props });
+}
+
+// src/tabs.tsx
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { cn as cn10 } from "@mcp-elements/core";
+
+// src/hooks/use-tabs.ts
+import { useState as useState3, useMemo as useMemo2 } from "react";
+import { createTabs } from "@mcp-elements/core";
+function useTabs(items, config = {}) {
+  const [value, setValue] = useState3(config.defaultValue ?? items[0]?.value ?? "");
+  const api = useMemo2(
+    () => createTabs(items, { ...config, onValueChange: setValue }),
+    [items, config.defaultValue]
+  );
+  return { value, setValue, ...api };
+}
+
+// src/tabs.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Tabs({ items, defaultValue, children, className }) {
+  const api = useTabs(items, { defaultValue });
+  return /* @__PURE__ */ jsx10("div", { className, children: children(api) });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsx10("div", { role: "tablist", className: cn10("mcpe-tabs-list", className), ...props });
+}
+function TabsTrigger({ isActive, className, ...props }) {
+  const ref = useRef2(null);
+  useEffect2(() => {
+    if (isActive && ref.current) {
+      ref.current.focus();
+    }
+  }, [isActive]);
+  return /* @__PURE__ */ jsx10(
+    "button",
+    {
+      ref,
+      role: "tab",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
+      className: cn10("mcpe-tabs-trigger", isActive && "mcpe-tabs-trigger-active", className),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx10("div", { role: "tabpanel", className: cn10("mcpe-tabs-content", className), ...props });
+}
+
+// src/accordion.tsx
+import { cn as cn11 } from "@mcp-elements/core";
+
+// src/hooks/use-accordion.ts
+import { useState as useState4, useMemo as useMemo3 } from "react";
+import { createAccordion } from "@mcp-elements/core";
+function useAccordion(items, config = {}) {
+  const [expandedValues, setExpandedValues] = useState4([]);
+  const api = useMemo3(
+    () => createAccordion(items, { ...config, onValueChange: setExpandedValues }),
+    [items, config.type, config.collapsible]
+  );
+  return { expandedValues, setExpandedValues, ...api };
+}
+
+// src/accordion.tsx
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+function Accordion({ items, type, collapsible, children, className }) {
+  const api = useAccordion(items, { type, collapsible });
+  return /* @__PURE__ */ jsx11("div", { className, children: children(api) });
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { className: cn11("mcpe-accordion-item", className), ...props });
+}
+function AccordionTrigger({ isExpanded, className, children, ...props }) {
+  return /* @__PURE__ */ jsx11("h3", { children: /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      "aria-expanded": isExpanded,
+      className: cn11("mcpe-accordion-trigger", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx11("svg", { className: "mcpe-accordion-chevron", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx11("path", { d: "m6 9 6 6 6-6" }) })
+      ]
+    }
+  ) });
+}
+function AccordionContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { role: "region", className: cn11("mcpe-accordion-content", className), ...props });
+}
+
+// src/select.tsx
+import { useRef as useRef3, useEffect as useEffect3 } from "react";
+import { cn as cn12, createClickOutsideHandler } from "@mcp-elements/core";
+
+// src/hooks/use-select.ts
+import { useState as useState5, useMemo as useMemo4, useCallback } from "react";
+import { createSelect } from "@mcp-elements/core";
+function useSelect(options, config = {}) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const [selectedValue, setSelectedValue] = useState5(null);
+  const [highlightedIndex, setHighlightedIndex] = useState5(0);
+  const api = useMemo4(
+    () => createSelect(options, {
+      ...config,
+      onValueChange: setSelectedValue,
+      onOpenChange: setIsOpen
+    }),
+    [options]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      api.handleKeyDown(e.nativeEvent, isOpen, highlightedIndex, setHighlightedIndex);
+    },
+    [api, isOpen, highlightedIndex]
+  );
+  const { handleKeyDown: _coreHandleKeyDown, ...restApi } = api;
+  return {
+    isOpen,
+    setIsOpen,
+    selectedValue,
+    setSelectedValue,
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown,
+    ...restApi
+  };
+}
+
+// src/select.tsx
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+function Select({ options, placeholder = "Select...", className, onChange }) {
+  const select = useSelect(options);
+  const containerRef = useRef3(null);
+  const selectedLabel = options.find((o) => o.value === select.selectedValue)?.label;
+  useEffect3(() => {
+    if (!select.isOpen || !containerRef.current) return;
+    return createClickOutsideHandler(containerRef.current, () => select.setIsOpen(false));
+  }, [select.isOpen]);
+  useEffect3(() => {
+    if (select.selectedValue && onChange) {
+      onChange(select.selectedValue);
+    }
+  }, [select.selectedValue]);
+  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: cn12("relative", className), children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: "mcpe-select-trigger",
+        "aria-expanded": select.isOpen,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": select.isOpen && select.highlightedIndex >= 0 ? `select-option-${options[select.highlightedIndex]?.value}` : void 0,
+        onClick: () => select.setIsOpen(!select.isOpen),
+        onKeyDown: select.handleKeyDown,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx12("span", { className: cn12(!selectedLabel && "text-muted-foreground"), children: selectedLabel || placeholder }),
+          /* @__PURE__ */ jsx12(
+            "svg",
+            {
+              className: cn12("h-4 w-4 opacity-50 transition-transform", select.isOpen && "rotate-180"),
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    ),
+    select.isOpen && /* @__PURE__ */ jsx12("div", { className: "mcpe-select-content absolute top-full mt-1 w-full", children: /* @__PURE__ */ jsx12("div", { className: "mcpe-select-viewport", role: "listbox", children: options.map((option, index) => /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        role: "option",
+        "aria-selected": option.value === select.selectedValue,
+        "aria-disabled": option.disabled || void 0,
+        className: cn12(
+          "mcpe-select-item",
+          index === select.highlightedIndex && !option.disabled && "mcpe-select-item-active",
+          option.value === select.selectedValue && "mcpe-select-item-selected",
+          option.disabled && "opacity-50 pointer-events-none"
+        ),
+        onClick: () => {
+          if (!option.disabled) {
+            select.setSelectedValue(option.value);
+            select.setIsOpen(false);
+          }
+        },
+        onMouseEnter: () => {
+          if (!option.disabled) select.setHighlightedIndex(index);
+        },
+        children: [
+          option.value === select.selectedValue && /* @__PURE__ */ jsx12("svg", { className: "absolute right-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx12("path", { d: "M20 6 9 17l-5-5" }) }),
+          option.label
+        ]
+      },
+      option.value
+    )) }) })
+  ] });
+}
+
+// src/tooltip.tsx
+import { cn as cn13 } from "@mcp-elements/core";
+
+// src/hooks/use-tooltip.ts
+import { useState as useState6, useMemo as useMemo5, useEffect as useEffect4 } from "react";
+import { createTooltip } from "@mcp-elements/core";
+function useTooltip(config = {}) {
+  const [open, setOpen] = useState6(false);
+  const api = useMemo5(
+    () => createTooltip({ ...config, onOpenChange: setOpen }),
+    [config.delay]
+  );
+  useEffect4(() => {
+    return () => api.destroy();
+  }, [api]);
+  return { open, setOpen, ...api };
+}
+
+// src/tooltip.tsx
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+function Tooltip({ content, delay, children, className, side = "top" }) {
+  const tooltip = useTooltip({ delay });
+  const positionClasses = side === "top" ? "bottom-full left-1/2 -translate-x-1/2 mb-2" : "top-full left-1/2 -translate-x-1/2 mt-2";
+  const triggerProps = tooltip.getTriggerProps();
+  const contentProps = tooltip.getContentProps(tooltip.open);
+  return /* @__PURE__ */ jsxs4("div", { className: "relative inline-flex", ...triggerProps, children: [
+    children,
+    tooltip.open && /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ...contentProps,
+        className: cn13("mcpe-tooltip-content absolute", positionClasses, className),
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/popover.tsx
+import { useRef as useRef4, useEffect as useEffect5 } from "react";
+import { cn as cn14, createClickOutsideHandler as createClickOutsideHandler2 } from "@mcp-elements/core";
+
+// src/hooks/use-popover.ts
+import { useState as useState7, useMemo as useMemo6 } from "react";
+import { createPopover } from "@mcp-elements/core";
+function usePopover(config = {}) {
+  const [open, setOpen] = useState7(false);
+  const api = useMemo6(
+    () => createPopover({ ...config, onOpenChange: setOpen }),
+    []
+  );
+  return { open, setOpen, ...api };
+}
+
+// src/popover.tsx
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function Popover({ trigger, children, className }) {
+  const popover = usePopover();
+  const containerRef = useRef4(null);
+  useEffect5(() => {
+    if (!popover.open || !containerRef.current) return;
+    return createClickOutsideHandler2(containerRef.current, () => popover.setOpen(false));
+  }, [popover.open]);
+  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx14("div", { onClick: () => popover.setOpen(!popover.open), children: trigger }),
+    popover.open && /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className: cn14("mcpe-popover-content absolute top-full mt-2", className),
+        role: "dialog",
+        onKeyDown: (e) => {
+          if (e.key === "Escape") popover.setOpen(false);
+        },
+        children
+      }
+    )
+  ] });
+}
+
+// src/toast.tsx
+import { cn as cn15 } from "@mcp-elements/core";
+
+// src/hooks/use-toast.ts
+import { useState as useState8, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { toast as toastManager } from "@mcp-elements/core";
+function useToast() {
+  const [toasts, setToasts] = useState8([]);
+  useEffect6(() => {
+    return toastManager.subscribe((state) => {
+      setToasts([...state.toasts]);
+    });
+  }, []);
+  const dismiss = useCallback2((id) => {
+    toastManager.dismiss(id);
+  }, []);
+  return { toasts, dismiss, toast: toastManager };
+}
+
+// src/toast.tsx
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+function Toaster({ position = "bottom-right", className }) {
+  const { toasts, dismiss } = useToast();
+  return /* @__PURE__ */ jsx15("div", { className: cn15("mcpe-toaster", `mcpe-toaster-${position}`, className), children: toasts.map((t) => /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn15(
+        "mcpe-toast group",
+        t.variant === "destructive" && "mcpe-toast-destructive",
+        t.variant === "success" && "mcpe-toast-success"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex-1", children: [
+          t.title && /* @__PURE__ */ jsx15("div", { className: "mcpe-toast-title", children: t.title }),
+          t.description && /* @__PURE__ */ jsx15("div", { className: "mcpe-toast-description", children: t.description })
+        ] }),
+        t.action && /* @__PURE__ */ jsx15("button", { className: "mcpe-toast-action", onClick: t.action.onClick, type: "button", children: t.action.label }),
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            className: "mcpe-toast-close",
+            onClick: () => dismiss(t.id),
+            type: "button",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx15("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx15("path", { d: "m6 6 12 12" })
+            ] })
+          }
+        )
+      ]
+    },
+    t.id
+  )) });
+}
+
+// src/drawer.tsx
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
+import { cn as cn16, trapFocus as trapFocus2, lockScroll as lockScroll2 } from "@mcp-elements/core";
+
+// src/hooks/use-drawer.ts
+import { useState as useState9, useMemo as useMemo7 } from "react";
+import { createDrawer } from "@mcp-elements/core";
+function useDrawer(config = {}) {
+  const [open, setOpen] = useState9(false);
+  const api = useMemo7(
+    () => createDrawer({ ...config, onOpenChange: setOpen }),
+    [config.side]
+  );
+  return { open, setOpen, ...api };
+}
+
+// src/drawer.tsx
+import { Fragment, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+function Drawer({ open: controlledOpen, onOpenChange, side = "right", children }) {
+  const drawer = useDrawer({ side });
+  const isOpen = controlledOpen ?? drawer.open;
+  const setOpen = onOpenChange ?? drawer.setOpen;
+  const contentRef = useRef5(null);
+  useEffect7(() => {
+    if (!isOpen) return;
+    const unlock = lockScroll2();
+    return unlock;
+  }, [isOpen]);
+  useEffect7(() => {
+    if (!isOpen || !contentRef.current) return;
+    const el = contentRef.current;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      trapFocus2(el, e);
+    };
+    el.addEventListener("keydown", handler);
+    return () => el.removeEventListener("keydown", handler);
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx16("div", { className: "mcpe-drawer-overlay", onClick: () => setOpen(false) }),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: contentRef,
+        className: cn16("mcpe-drawer-content", `mcpe-drawer-content-${side}`),
+        role: "dialog",
+        "aria-modal": true,
+        children: [
+          children,
+          /* @__PURE__ */ jsx16("button", { className: "mcpe-drawer-close", "aria-label": "Close", onClick: () => setOpen(false), type: "button", children: /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx16("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx16("path", { d: "m6 6 12 12" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("div", { className: cn16("mcpe-drawer-header", className), ...props });
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("div", { className: cn16("mcpe-drawer-footer", className), ...props });
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("h2", { className: cn16("mcpe-drawer-title", className), ...props });
+}
+function DrawerDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("p", { className: cn16("mcpe-drawer-description", className), ...props });
+}
+function DrawerBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("div", { className: cn16("mcpe-drawer-body", className), ...props });
+}
+
+// src/dropdown-menu.tsx
+import { useRef as useRef6, useEffect as useEffect8 } from "react";
+import { cn as cn17, createClickOutsideHandler as createClickOutsideHandler3 } from "@mcp-elements/core";
+
+// src/hooks/use-dropdown-menu.ts
+import { useState as useState10, useMemo as useMemo8, useCallback as useCallback3 } from "react";
+import { createDropdownMenu } from "@mcp-elements/core";
+function useDropdownMenu(items, config = {}) {
+  const [isOpen, setIsOpen] = useState10(false);
+  const [highlightedIndex, setHighlightedIndex] = useState10(0);
+  const api = useMemo8(
+    () => createDropdownMenu(items, { ...config, onOpenChange: setIsOpen }),
+    [items]
+  );
+  const { handleKeyDown: _coreHandleKeyDown, ...restApi } = api;
+  const handleKeyDown = useCallback3(
+    (e) => {
+      api.handleKeyDown(e.nativeEvent, isOpen, highlightedIndex, setHighlightedIndex);
+    },
+    [api, isOpen, highlightedIndex]
+  );
+  return {
+    isOpen,
+    setIsOpen,
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown,
+    ...restApi
+  };
+}
+
+// src/dropdown-menu.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function DropdownMenu({ trigger, items, className, align = "end" }) {
+  const menu = useDropdownMenu(items);
+  const containerRef = useRef6(null);
+  useEffect8(() => {
+    if (!menu.isOpen || !containerRef.current) return;
+    return createClickOutsideHandler3(containerRef.current, () => menu.setIsOpen(false));
+  }, [menu.isOpen]);
+  const actionItems = items.filter((i) => i.type !== "separator" && i.type !== "label" && !i.disabled);
+  return /* @__PURE__ */ jsxs8("div", { ref: containerRef, className: "relative inline-block", onKeyDown: menu.handleKeyDown, children: [
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        onClick: () => menu.setIsOpen(!menu.isOpen),
+        "aria-haspopup": "menu",
+        "aria-expanded": menu.isOpen,
+        children: trigger
+      }
+    ),
+    menu.isOpen && /* @__PURE__ */ jsx17(
+      "div",
+      {
+        className: cn17(
+          "mcpe-dropdown-menu-content absolute top-full mt-1",
+          align === "end" ? "right-0" : "left-0",
+          className
+        ),
+        role: "menu",
+        children: items.map((item) => {
+          if (item.type === "separator") {
+            return /* @__PURE__ */ jsx17("div", { className: "mcpe-dropdown-menu-separator", role: "separator" }, item.id);
+          }
+          if (item.type === "label") {
+            return /* @__PURE__ */ jsx17("div", { className: "mcpe-dropdown-menu-label", children: item.label }, item.id);
+          }
+          const actionIndex = actionItems.findIndex((ai) => ai.id === item.id);
+          return /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              role: "menuitem",
+              "aria-disabled": item.disabled || void 0,
+              className: cn17(
+                "mcpe-dropdown-menu-item",
+                actionIndex === menu.highlightedIndex && !item.disabled && "mcpe-dropdown-menu-item-active",
+                item.disabled && "opacity-50 pointer-events-none"
+              ),
+              onClick: () => {
+                if (!item.disabled) {
+                  item.onSelect?.();
+                  menu.setIsOpen(false);
+                }
+              },
+              onMouseEnter: () => {
+                if (!item.disabled) menu.setHighlightedIndex(actionIndex);
+              },
+              children: [
+                /* @__PURE__ */ jsx17("span", { className: "flex-1", children: item.label }),
+                item.shortcut && /* @__PURE__ */ jsx17("span", { className: "mcpe-dropdown-menu-shortcut", children: item.shortcut })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/switch.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { cn as cn18 } from "@mcp-elements/core";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var Switch = forwardRef7(
+  ({ checked = false, onCheckedChange, disabled, className, id, name }, ref) => /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": checked,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      className: cn18("mcpe-switch", className),
+      onClick: () => onCheckedChange?.(!checked),
+      onKeyDown: (e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          onCheckedChange?.(!checked);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx18("span", { className: "mcpe-switch-thumb" }),
+        name && /* @__PURE__ */ jsx18("input", { type: "hidden", name, value: checked ? "on" : "off" })
+      ]
+    }
+  )
+);
+Switch.displayName = "Switch";
+
+// src/progress.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { cn as cn19 } from "@mcp-elements/core";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Progress = forwardRef8(
+  ({ value = 0, max = 100, className, ...props }, ref) => {
+    const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+    return /* @__PURE__ */ jsx19(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: cn19("mcpe-progress", className),
+        ...props,
+        children: /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "mcpe-progress-indicator",
+            style: { transform: `translateX(-${100 - percentage}%)` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+// src/loader.tsx
+import { cn as cn20 } from "@mcp-elements/core";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Loader({ size = "md", variant = "primary", className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn20("mcpe-loader", `mcpe-loader-${size}`, `mcpe-loader-${variant}`, className),
+      ...props,
+      children: /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+
+// src/chips.tsx
+import { cn as cn21 } from "@mcp-elements/core";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+function Chip({ variant = "default", onRemove, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs10(
+    "span",
+    {
+      className: cn21("mcpe-chip", `mcpe-chip-${variant}`, onRemove && "mcpe-chip-removable", className),
+      ...props,
+      children: [
+        children,
+        onRemove && /* @__PURE__ */ jsx21(
+          "button",
+          {
+            type: "button",
+            className: "mcpe-chip-remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx21("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx21("path", { d: "m6 6 12 12" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function Chips({ className, ...props }) {
+  return /* @__PURE__ */ jsx21("div", { className: cn21("mcpe-chips", className), ...props });
+}
+
+// src/password-input.tsx
+import { forwardRef as forwardRef9, useState as useState11 } from "react";
+import { cn as cn22 } from "@mcp-elements/core";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var PasswordInput = forwardRef9(
+  ({ className, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState11(false);
+    return /* @__PURE__ */ jsxs11("div", { className: "mcpe-password-input-wrapper", children: [
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          ref,
+          type: showPassword ? "text" : "password",
+          className: cn22("mcpe-password-input", className),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx22(
+        "button",
+        {
+          type: "button",
+          className: "mcpe-password-toggle",
+          onClick: () => setShowPassword(!showPassword),
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          children: showPassword ? /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx22("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+            /* @__PURE__ */ jsx22("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+          ] }) : /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx22("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+            /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "3" })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/counter.tsx
+import { cn as cn23 } from "@mcp-elements/core";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+function Counter({ value, onChange, min = 0, max = 99, step = 1, disabled, className }) {
+  const decrement = () => onChange(Math.max(min, value - step));
+  const increment = () => onChange(Math.min(max, value + step));
+  return /* @__PURE__ */ jsxs12("div", { className: cn23("mcpe-counter", className), children: [
+    /* @__PURE__ */ jsx23(
+      "button",
+      {
+        type: "button",
+        className: "mcpe-counter-button",
+        onClick: decrement,
+        disabled: disabled || value <= min,
+        "aria-label": "Decrease",
+        children: /* @__PURE__ */ jsx23("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx23("path", { d: "M5 12h14" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      "input",
+      {
+        type: "text",
+        inputMode: "numeric",
+        className: "mcpe-counter-input",
+        value,
+        onChange: (e) => {
+          const num = parseInt(e.target.value, 10);
+          if (!isNaN(num)) onChange(Math.max(min, Math.min(max, num)));
+        },
+        disabled,
+        "aria-label": "Count"
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      "button",
+      {
+        type: "button",
+        className: "mcpe-counter-button",
+        onClick: increment,
+        disabled: disabled || value >= max,
+        "aria-label": "Increase",
+        children: /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx23("path", { d: "M5 12h14" }),
+          /* @__PURE__ */ jsx23("path", { d: "M12 5v14" })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/alert.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { cn as cn24 } from "@mcp-elements/core";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Alert = forwardRef10(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn24("mcpe-alert", `mcpe-alert-${variant}`, className),
+      ...props
+    }
+  )
+);
+Alert.displayName = "Alert";
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx24("h5", { className: cn24("mcpe-alert-title", className), ...props });
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx24("div", { className: cn24("mcpe-alert-description", className), ...props });
+}
+
+// src/prompt-input.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { cn as cn25 } from "@mcp-elements/core";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+var PromptInput = forwardRef11(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn25("mcpe-prompt-input", className), ...props })
+);
+PromptInput.displayName = "PromptInput";
+var PromptInputTextarea = forwardRef11(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("textarea", { ref, className: cn25("mcpe-prompt-input-textarea", className), rows: 3, ...props })
+);
+PromptInputTextarea.displayName = "PromptInputTextarea";
+var PromptInputFooter = forwardRef11(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn25("mcpe-prompt-input-footer", className), ...props })
+);
+PromptInputFooter.displayName = "PromptInputFooter";
+var PromptInputActions = forwardRef11(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn25("mcpe-prompt-input-actions", className), ...props })
+);
+PromptInputActions.displayName = "PromptInputActions";
+function PromptInputCharCount({ count, max, className }) {
+  return /* @__PURE__ */ jsxs13("span", { className: cn25("mcpe-prompt-input-char-count", className), children: [
+    count,
+    max != null && `/${max}`
+  ] });
+}
+var PromptInputAttachments = forwardRef11(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn25("mcpe-prompt-input-attachments", className), ...props })
+);
+PromptInputAttachments.displayName = "PromptInputAttachments";
+function PromptInputAttachment({ onRemove, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs13("span", { className: cn25("mcpe-prompt-input-attachment", className), ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx25(
+      "button",
+      {
+        type: "button",
+        className: "mcpe-prompt-input-attachment-remove",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        "aria-label": "Remove",
+        children: /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx25("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx25("path", { d: "m6 6 12 12" })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/chat-bubble.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { cn as cn26 } from "@mcp-elements/core";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var ChatBubble = forwardRef12(
+  ({ variant = "ai", className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn26("mcpe-chat-bubble", `mcpe-chat-bubble-${variant}`, className), ...props })
+);
+ChatBubble.displayName = "ChatBubble";
+function ChatBubbleAvatar({ src, alt, className }) {
+  return /* @__PURE__ */ jsx26("img", { src, alt, className: cn26("mcpe-chat-bubble-avatar", className) });
+}
+var ChatBubbleContent = forwardRef12(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn26("mcpe-chat-bubble-content", className), ...props })
+);
+ChatBubbleContent.displayName = "ChatBubbleContent";
+var ChatBubbleTimestamp = forwardRef12(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx26("span", { ref, className: cn26("mcpe-chat-bubble-timestamp", className), ...props })
+);
+ChatBubbleTimestamp.displayName = "ChatBubbleTimestamp";
+function ChatBubbleTyping({ className }) {
+  return /* @__PURE__ */ jsxs14("div", { className: cn26("mcpe-chat-bubble-typing", className), children: [
+    /* @__PURE__ */ jsx26("span", { className: "mcpe-chat-bubble-typing-dot" }),
+    /* @__PURE__ */ jsx26("span", { className: "mcpe-chat-bubble-typing-dot" }),
+    /* @__PURE__ */ jsx26("span", { className: "mcpe-chat-bubble-typing-dot" })
+  ] });
+}
+
+// src/ai-badge.tsx
+import { cn as cn27 } from "@mcp-elements/core";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+function AiBadge({ variant = "default", showIcon = true, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs15("span", { className: cn27("mcpe-ai-badge", `mcpe-ai-badge-${variant}`, className), ...props, children: [
+    showIcon && /* @__PURE__ */ jsx27("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx27("path", { d: "M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 1-1.275-1.275L3 12l5.813-1.912a2 2 0 0 1 1.275-1.275L12 3z" }) }),
+    children
+  ] });
+}
+
+// src/suggestion-chips.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { cn as cn28 } from "@mcp-elements/core";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SuggestionChips = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn28("mcpe-suggestion-chips", className), ...props })
+);
+SuggestionChips.displayName = "SuggestionChips";
+var SuggestionChip = forwardRef13(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx28(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn28("mcpe-suggestion-chip", `mcpe-suggestion-chip-${variant}`, className),
+      ...props
+    }
+  )
+);
+SuggestionChip.displayName = "SuggestionChip";
+
+// src/source-card.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { cn as cn29 } from "@mcp-elements/core";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var SourceCards = forwardRef14(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: cn29("mcpe-source-cards", className), ...props })
+);
+SourceCards.displayName = "SourceCards";
+var SourceCard = forwardRef14(
+  ({ favicon, title, domain, index, className, ...props }, ref) => /* @__PURE__ */ jsxs16(
+    "a",
+    {
+      ref,
+      className: cn29("mcpe-source-card", className),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      ...props,
+      children: [
+        favicon && /* @__PURE__ */ jsx29("img", { className: "mcpe-source-card-favicon", src: favicon, alt: domain }),
+        /* @__PURE__ */ jsxs16("div", { className: "mcpe-source-card-body", children: [
+          /* @__PURE__ */ jsx29("p", { className: "mcpe-source-card-title", children: title }),
+          /* @__PURE__ */ jsx29("p", { className: "mcpe-source-card-domain", children: domain })
+        ] }),
+        index != null && /* @__PURE__ */ jsx29("span", { className: "mcpe-source-card-index", children: index })
+      ]
+    }
+  )
+);
+SourceCard.displayName = "SourceCard";
+
+// src/streaming-text.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { cn as cn30 } from "@mcp-elements/core";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var StreamingText = forwardRef15(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn30("mcpe-streaming-text-cursor", className), ...props })
+);
+StreamingText.displayName = "StreamingText";
+var StreamingTextFadeIn = forwardRef15(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("span", { ref, className: cn30("mcpe-streaming-text-fade-in", className), ...props })
+);
+StreamingTextFadeIn.displayName = "StreamingTextFadeIn";
+var StreamingTextWord = forwardRef15(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("span", { ref, className: cn30("mcpe-streaming-text-word", className), ...props })
+);
+StreamingTextWord.displayName = "StreamingTextWord";
+var StreamingTextLine = forwardRef15(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn30("mcpe-streaming-text-line", className), ...props })
+);
+StreamingTextLine.displayName = "StreamingTextLine";
+var StreamingTextSkeleton = forwardRef15(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn30("mcpe-streaming-text-skeleton", className), ...props })
+);
+StreamingTextSkeleton.displayName = "StreamingTextSkeleton";
+var StreamingTextSkeletonLine = forwardRef15(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: cn30("mcpe-streaming-text-skeleton-line", className), ...props })
+);
+StreamingTextSkeletonLine.displayName = "StreamingTextSkeletonLine";
+
+// src/feedback.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { cn as cn31 } from "@mcp-elements/core";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var Feedback = forwardRef16(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn31("mcpe-feedback", className), ...props })
+);
+Feedback.displayName = "Feedback";
+function FeedbackButton({ type, selected = false, className, ...props }) {
+  return /* @__PURE__ */ jsx31(
+    "button",
+    {
+      type: "button",
+      className: cn31(
+        "mcpe-feedback-btn",
+        `mcpe-feedback-btn-${type}`,
+        selected && "mcpe-feedback-btn-selected",
+        className
+      ),
+      ...props,
+      children: type === "up" ? /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx31("path", { d: "M7 10v12" }),
+        /* @__PURE__ */ jsx31("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })
+      ] }) : /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx31("path", { d: "M17 14V2" }),
+        /* @__PURE__ */ jsx31("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })
+      ] })
+    }
+  );
+}
+function FeedbackSeparator({ className }) {
+  return /* @__PURE__ */ jsx31("span", { className: cn31("mcpe-feedback-separator", className) });
+}
+var FeedbackForm = forwardRef16(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn31("mcpe-feedback-form", className), ...props })
+);
+FeedbackForm.displayName = "FeedbackForm";
+var FeedbackInput = forwardRef16(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx31("input", { ref, className: cn31("mcpe-feedback-input", className), placeholder: "Add a comment...", ...props })
+);
+FeedbackInput.displayName = "FeedbackInput";
+var FeedbackSubmit = forwardRef16(
+  ({ className, children = "Submit", ...props }, ref) => /* @__PURE__ */ jsx31("button", { ref, className: cn31("mcpe-feedback-submit", className), ...props, children })
+);
+FeedbackSubmit.displayName = "FeedbackSubmit";
+
+// src/mcp/mcp-server-status.tsx
+import { cn as cn32 } from "@mcp-elements/core";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+var STATUS_LABELS = {
+  connected: "Connected",
+  connecting: "Connecting",
+  disconnected: "Disconnected",
+  error: "Error"
+};
+function McpServerStatus({ status, serverName, className, ...props }) {
+  return /* @__PURE__ */ jsxs18(
+    "span",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": serverName ? `${serverName}: ${STATUS_LABELS[status]}` : STATUS_LABELS[status],
+      ...props,
+      className: cn32(
+        "mcpe-mcp-server-status",
+        `mcpe-mcp-server-status-${status}`,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx32("span", { className: "mcpe-mcp-server-status-dot", "aria-hidden": "true" }),
+        serverName ? `${serverName} \xB7 ${STATUS_LABELS[status]}` : STATUS_LABELS[status]
+      ]
+    }
+  );
+}
+
+// src/mcp/mcp-tool-call.tsx
+import { useEffect as useEffect9, useState as useState12 } from "react";
+import { cn as cn33 } from "@mcp-elements/core";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+var STATUS_LABELS2 = {
+  idle: "idle",
+  pending: "pending",
+  running: "running",
+  done: "done",
+  error: "error",
+  cancelled: "cancelled"
+};
+function snapFromState(state) {
+  return {
+    status: state.status,
+    tool: state.tool,
+    args: state.args,
+    result: state.result,
+    error: state.error,
+    startedAt: state.startedAt,
+    endedAt: state.endedAt
+  };
+}
+function McpToolCall({ state, toolName, args, onRetry, className }) {
+  const [snap, setSnap] = useState12(() => snapFromState(state));
+  useEffect9(() => {
+    setSnap(snapFromState(state));
+    return state.subscribe((s) => setSnap({ ...s }));
+  }, [state]);
+  const displayName = snap.tool ?? toolName ?? "unknown";
+  const displayArgs = snap.args ?? args;
+  return /* @__PURE__ */ jsxs19("div", { className: cn33("mcpe-mcp-tool-call", className), children: [
+    /* @__PURE__ */ jsxs19("div", { className: "mcpe-mcp-tool-call-header", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "mcpe-mcp-tool-call-name", children: [
+        /* @__PURE__ */ jsx33("span", { className: "mcpe-mcp-tool-call-icon", "aria-hidden": "true", children: "fn" }),
+        /* @__PURE__ */ jsx33("span", { className: "mcpe-mcp-tool-call-title", children: displayName })
+      ] }),
+      /* @__PURE__ */ jsxs19("span", { className: cn33("mcpe-mcp-tool-call-badge", `mcpe-mcp-tool-call-badge-${snap.status}`), children: [
+        snap.status === "running" && /* @__PURE__ */ jsxs19("svg", { className: "animate-spin h-3 w-3", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx33("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsx33("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+        ] }),
+        STATUS_LABELS2[snap.status]
+      ] })
+    ] }),
+    displayArgs && /* @__PURE__ */ jsx33("pre", { className: "mcpe-mcp-tool-call-args", children: JSON.stringify(displayArgs, null, 2) }),
+    snap.status === "running" && /* @__PURE__ */ jsx33("div", { className: "mcpe-mcp-tool-call-progress", role: "progressbar", "aria-label": "Tool running", children: /* @__PURE__ */ jsx33("div", { className: "mcpe-mcp-tool-call-progress-bar", style: { width: "60%" } }) }),
+    snap.status === "done" && snap.result && /* @__PURE__ */ jsx33("div", { className: "mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-done", children: snap.result.content.filter((c) => c.type === "text").map((c, i) => /* @__PURE__ */ jsx33("p", { className: "whitespace-pre-wrap text-sm", children: "text" in c ? c.text : null }, i)) }),
+    snap.status === "error" && snap.error && /* @__PURE__ */ jsxs19("div", { className: "mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-error", children: [
+      /* @__PURE__ */ jsx33("p", { className: "text-sm", children: snap.error.message }),
+      onRetry && /* @__PURE__ */ jsx33("div", { className: "mcpe-mcp-tool-call-footer mt-2", children: /* @__PURE__ */ jsx33(
+        "button",
+        {
+          onClick: onRetry,
+          className: "text-xs underline underline-offset-2 hover:no-underline",
+          children: "Retry"
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/mcp/mcp-tool-form.tsx
+import { useState as useState13 } from "react";
+import { cn as cn34, schemaToFields } from "@mcp-elements/core";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+function FieldInput({
+  field,
+  value,
+  onChange
+}) {
+  const str = typeof value === "string" ? value : value == null ? "" : String(value);
+  switch (field.kind) {
+    case "switch":
+      return /* @__PURE__ */ jsx34(
+        "input",
+        {
+          type: "checkbox",
+          id: field.key,
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked),
+          className: "mcpe-switch",
+          "aria-label": field.label
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsxs20(
+        "select",
+        {
+          id: field.key,
+          value: str,
+          onChange: (e) => onChange(e.target.value),
+          className: "mcpe-select",
+          required: field.required,
+          children: [
+            /* @__PURE__ */ jsx34("option", { value: "", children: "Select\u2026" }),
+            field.options?.map((opt) => /* @__PURE__ */ jsx34("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      );
+    case "multiselect":
+      return /* @__PURE__ */ jsx34(
+        "select",
+        {
+          id: field.key,
+          multiple: true,
+          value: Array.isArray(value) ? value.map(String) : [],
+          onChange: (e) => {
+            const selected = Array.from(e.target.selectedOptions).map((o) => o.value);
+            onChange(selected);
+          },
+          className: "mcpe-select",
+          required: field.required,
+          children: field.options?.map((opt) => /* @__PURE__ */ jsx34("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ jsx34(
+        "textarea",
+        {
+          id: field.key,
+          value: str,
+          onChange: (e) => onChange(e.target.value),
+          className: "mcpe-textarea",
+          required: field.required,
+          minLength: field.minLength,
+          maxLength: field.maxLength,
+          rows: 4
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx34(
+        "input",
+        {
+          type: "number",
+          id: field.key,
+          value: str,
+          onChange: (e) => onChange(e.target.valueAsNumber),
+          className: "mcpe-input",
+          required: field.required,
+          min: field.min,
+          max: field.max
+        }
+      );
+    case "unknown":
+      return /* @__PURE__ */ jsx34(
+        "input",
+        {
+          type: "text",
+          id: field.key,
+          value: str,
+          onChange: (e) => onChange(e.target.value),
+          className: "mcpe-input",
+          disabled: true,
+          placeholder: "(unsupported field type)"
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx34(
+        "input",
+        {
+          type: field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "date" ? "date" : "text",
+          id: field.key,
+          value: str,
+          onChange: (e) => onChange(e.target.value),
+          className: "mcpe-input",
+          required: field.required,
+          pattern: field.pattern,
+          minLength: field.minLength,
+          maxLength: field.maxLength
+        }
+      );
+  }
+}
+function McpToolForm({
+  schema,
+  onSubmit,
+  loading = false,
+  submitLabel = "Run",
+  className
+}) {
+  const fields = schemaToFields(schema);
+  const [values, setValues] = useState13(() => {
+    const defaults = {};
+    for (const f of fields) {
+      if (f.defaultValue !== void 0) defaults[f.key] = f.defaultValue;
+    }
+    return defaults;
+  });
+  function setValue(key, value) {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    onSubmit(values);
+  }
+  if (fields.length === 0) {
+    return /* @__PURE__ */ jsxs20("form", { onSubmit: handleSubmit, className: cn34("mcpe-mcp-tool-form", className), children: [
+      /* @__PURE__ */ jsx34("p", { className: "text-sm text-muted-foreground", children: "This tool takes no inputs." }),
+      /* @__PURE__ */ jsx34("div", { className: "mcpe-mcp-tool-form-submit", children: /* @__PURE__ */ jsx34("button", { type: "submit", className: "mcpe-btn mcpe-btn-primary mcpe-btn-sm", disabled: loading, children: loading ? "Running\u2026" : submitLabel }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs20("form", { onSubmit: handleSubmit, className: cn34("mcpe-mcp-tool-form", className), children: [
+    fields.map((field) => /* @__PURE__ */ jsxs20("div", { className: "mcpe-mcp-tool-form-field", children: [
+      /* @__PURE__ */ jsx34(
+        "label",
+        {
+          htmlFor: field.key,
+          className: cn34("mcpe-mcp-tool-form-label", field.required && "mcpe-mcp-tool-form-label-required"),
+          children: field.label
+        }
+      ),
+      /* @__PURE__ */ jsx34(FieldInput, { field, value: values[field.key], onChange: (v) => setValue(field.key, v) }),
+      field.help && /* @__PURE__ */ jsx34("p", { className: "mcpe-mcp-tool-form-help", children: field.help })
+    ] }, field.key)),
+    /* @__PURE__ */ jsx34("div", { className: "mcpe-mcp-tool-form-submit", children: /* @__PURE__ */ jsx34("button", { type: "submit", className: "mcpe-btn mcpe-btn-primary mcpe-btn-sm", disabled: loading, children: loading ? "Running\u2026" : submitLabel }) })
+  ] });
+}
+
+// src/mcp/mcp-consent-dialog.tsx
+import { cn as cn35, parseScopes } from "@mcp-elements/core";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+function McpConsentDialog({
+  open,
+  serverName,
+  serverIcon,
+  scopes,
+  onApprove,
+  onDeny,
+  className
+}) {
+  const parsed = parseScopes(scopes.join(" "));
+  return /* @__PURE__ */ jsx35(Dialog, { open, onOpenChange: (o) => {
+    if (!o) onDeny();
+  }, children: /* @__PURE__ */ jsxs21("div", { className: cn35(className), children: [
+    /* @__PURE__ */ jsxs21(DialogHeader, { children: [
+      /* @__PURE__ */ jsx35(DialogTitle, { children: "Permission Request" }),
+      /* @__PURE__ */ jsx35(DialogDescription, { children: "Review and approve the permissions this server is requesting." })
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: "mcpe-mcp-consent-dialog-server", children: [
+      /* @__PURE__ */ jsx35("div", { className: "mcpe-mcp-consent-dialog-icon", "aria-hidden": "true", children: serverIcon ? /* @__PURE__ */ jsx35("img", { src: serverIcon, alt: "", className: "h-full w-full object-cover" }) : serverName[0]?.toUpperCase() ?? "?" }),
+      /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsx35("p", { className: "mcpe-mcp-consent-dialog-server-name", children: serverName }),
+        /* @__PURE__ */ jsx35("p", { className: "mcpe-mcp-consent-dialog-server-meta", children: "is requesting access to" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx35(
+      "div",
+      {
+        className: "mcpe-mcp-consent-dialog-scopes",
+        role: "list",
+        "aria-label": "Requested permissions",
+        children: parsed.map((s) => /* @__PURE__ */ jsx35("div", { className: "mcpe-mcp-consent-dialog-scope-item", role: "listitem", children: /* @__PURE__ */ jsxs21("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx35("p", { className: "mcpe-mcp-consent-dialog-scope-resource", children: s.resource }),
+          /* @__PURE__ */ jsx35("div", { className: "mcpe-mcp-consent-dialog-scope-perms", children: s.permissions.map((p) => /* @__PURE__ */ jsx35("span", { className: "mcpe-mcp-consent-dialog-scope-perm", children: p }, p)) })
+        ] }) }, s.raw))
+      }
+    ),
+    /* @__PURE__ */ jsx35(DialogFooter, { children: /* @__PURE__ */ jsxs21("div", { className: "mcpe-mcp-consent-dialog-actions", children: [
+      /* @__PURE__ */ jsx35(Button, { variant: "outline", onClick: onDeny, className: "flex-1", children: "Deny" }),
+      /* @__PURE__ */ jsx35(Button, { variant: "primary", onClick: onApprove, className: "flex-1", children: "Allow" })
+    ] }) })
+  ] }) });
+}
+
+// src/mcp/mcp-scope-inspector.tsx
+import { useState as useState14 } from "react";
+import { cn as cn36, parseScopes as parseScopes2 } from "@mcp-elements/core";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+function ChevronIcon({ className }) {
+  return /* @__PURE__ */ jsx36(
+    "svg",
+    {
+      className: cn36("mcpe-mcp-scope-inspector-chevron", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx36("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function McpScopeInspector({ scopes, descriptions = {}, className }) {
+  const parsed = typeof scopes === "string" ? parseScopes2(scopes) : scopes;
+  const [openKeys, setOpenKeys] = useState14(/* @__PURE__ */ new Set());
+  function toggle(key) {
+    setOpenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsx36("div", { className: cn36("mcpe-mcp-scope-inspector", className), role: "list", children: parsed.map((s) => {
+    const rawKey = s.raw;
+    const isOpen = openKeys.has(rawKey);
+    const description = descriptions[rawKey] ?? descriptions[s.resource] ?? s.description;
+    const safeKey = rawKey.replace(/[^a-zA-Z0-9]/g, "-");
+    const triggerId = `scope-trigger-${safeKey}`;
+    const bodyId = `scope-body-${safeKey}`;
+    return /* @__PURE__ */ jsxs22("div", { className: "mcpe-mcp-scope-inspector-item", role: "listitem", children: [
+      /* @__PURE__ */ jsxs22(
+        "button",
+        {
+          id: triggerId,
+          className: "mcpe-mcp-scope-inspector-trigger",
+          "aria-expanded": isOpen,
+          "aria-controls": bodyId,
+          onClick: () => toggle(rawKey),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx36("span", { className: "mcpe-mcp-scope-inspector-resource", children: s.resource }),
+              /* @__PURE__ */ jsx36("div", { className: "mcpe-mcp-scope-inspector-perms", children: s.permissions.map((p) => /* @__PURE__ */ jsx36("span", { className: "mcpe-mcp-scope-inspector-perm", children: p }, p)) })
+            ] }),
+            /* @__PURE__ */ jsx36(ChevronIcon, { className: isOpen ? "mcpe-mcp-scope-inspector-chevron-open" : void 0 })
+          ]
+        }
+      ),
+      isOpen && description && /* @__PURE__ */ jsx36(
+        "div",
+        {
+          id: bodyId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          className: "mcpe-mcp-scope-inspector-body",
+          children: description
+        }
+      )
+    ] }, rawKey);
+  }) });
+}
+
+// src/mcp/mcp-resource-browser.tsx
+import { cn as cn37 } from "@mcp-elements/core";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+function mimeTypeLabel(mimeType) {
+  if (!mimeType) return "res";
+  if (mimeType.includes("json")) return "json";
+  if (mimeType.includes("text")) return "txt";
+  if (mimeType.includes("image")) return "img";
+  if (mimeType.includes("pdf")) return "pdf";
+  return mimeType.split("/")[1]?.slice(0, 4) ?? "res";
+}
+function McpResourceBrowser({
+  resources,
+  selectedUri,
+  onSelect,
+  loading = false,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx37("div", { className: cn37("mcpe-mcp-resource-browser", className), children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx37(Skeleton, { className: "h-8 w-8 rounded-md" }),
+      /* @__PURE__ */ jsx37(Skeleton, { className: "h-4 flex-1" }),
+      /* @__PURE__ */ jsx37(Skeleton, { className: "h-3 w-10" })
+    ] }, i)) });
+  }
+  if (resources.length === 0) {
+    return /* @__PURE__ */ jsx37("div", { className: cn37("mcpe-mcp-resource-browser", className), children: /* @__PURE__ */ jsx37("p", { className: "mcpe-mcp-resource-browser-empty", children: "No resources available" }) });
+  }
+  return /* @__PURE__ */ jsx37("div", { className: cn37("mcpe-mcp-resource-browser", className), role: "list", children: resources.map((r) => /* @__PURE__ */ jsxs23(
+    "button",
+    {
+      type: "button",
+      role: "listitem",
+      className: cn37(
+        "mcpe-mcp-resource-browser-item w-full text-left",
+        selectedUri === r.uri && "mcpe-mcp-resource-browser-item-selected"
+      ),
+      onClick: () => onSelect?.(r),
+      "aria-selected": selectedUri === r.uri,
+      "aria-label": r.name,
+      children: [
+        /* @__PURE__ */ jsx37("span", { className: "mcpe-mcp-resource-browser-icon", "aria-hidden": "true", children: mimeTypeLabel(r.mimeType) }),
+        /* @__PURE__ */ jsx37("span", { className: "mcpe-mcp-resource-browser-name", children: r.name }),
+        r.mimeType && /* @__PURE__ */ jsx37("span", { className: "mcpe-mcp-resource-browser-type", children: r.mimeType.split("/")[0] })
+      ]
+    },
+    r.uri
+  )) });
+}
+
+// src/mcp/mcp-app-frame.tsx
+import { useEffect as useEffect10, useRef as useRef7, useCallback as useCallback4 } from "react";
+import { cn as cn38, createAppBridge } from "@mcp-elements/core";
+import { jsx as jsx38 } from "react/jsx-runtime";
+function McpAppFrame({
+  src,
+  onMessage,
+  height = 480,
+  sandbox = "allow-scripts allow-same-origin",
+  className
+}) {
+  const frameRef = useRef7(null);
+  const postToFrame = useCallback4((msg) => {
+    frameRef.current?.contentWindow?.postMessage(msg, "*");
+  }, []);
+  useEffect10(() => {
+    if (!onMessage) return;
+    const bridge = createAppBridge({ postMessage: postToFrame });
+    const unsub = bridge.onMessage(onMessage);
+    const handler = (e) => {
+      bridge.receive(e.data);
+    };
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+      unsub();
+    };
+  }, [onMessage, postToFrame]);
+  return /* @__PURE__ */ jsx38("div", { className: cn38("mcpe-mcp-app-frame", className), children: /* @__PURE__ */ jsx38(
+    "iframe",
+    {
+      ref: frameRef,
+      src,
+      sandbox,
+      style: { height },
+      title: "MCP App",
+      "aria-label": "MCP App frame"
+    }
+  ) });
+}
+
+// src/hooks/use-mcp-tool-state.ts
+import { useEffect as useEffect11, useState as useState15 } from "react";
+import { createToolState } from "@mcp-elements/core";
+function useMcpToolState() {
+  const [api] = useState15(() => createToolState());
+  const [snap, setSnap] = useState15({
+    status: api.status,
+    tool: api.tool,
+    args: api.args,
+    result: api.result,
+    error: api.error,
+    startedAt: api.startedAt,
+    endedAt: api.endedAt
+  });
+  useEffect11(() => {
+    return api.subscribe((s) => setSnap({ ...s }));
+  }, [api]);
+  return { ...snap, ...api };
+}
+
+// src/hooks/use-mcp-oauth.ts
+import { useEffect as useEffect12, useState as useState16 } from "react";
+import { createOAuthFlow } from "@mcp-elements/core";
+function useMcpOAuth() {
+  const [api] = useState16(() => createOAuthFlow());
+  const [snap, setSnap] = useState16({
+    status: api.status,
+    verifier: api.verifier,
+    state: api.state,
+    tokens: api.tokens,
+    error: api.error
+  });
+  useEffect12(() => {
+    return api.subscribe((s) => setSnap({ ...s }));
+  }, [api]);
+  return { ...snap, ...api };
+}
+
+// src/hooks/use-mcp-app-bridge.ts
+import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef8 } from "react";
+import { createAppBridge as createAppBridge2 } from "@mcp-elements/core";
+function useMcpAppBridge(options = {}) {
+  const { onMessage } = options;
+  const frameRef = useRef8(null);
+  const onMessageRef = useRef8(onMessage);
+  useEffect13(() => {
+    onMessageRef.current = onMessage;
+  });
+  const postToFrame = useCallback5((env) => {
+    frameRef.current?.contentWindow?.postMessage(env, "*");
+  }, []);
+  const sendRef = useRef8(() => {
+  });
+  useEffect13(() => {
+    const bridge = createAppBridge2({ postMessage: postToFrame });
+    sendRef.current = (env) => bridge.send(env);
+    const handler = (e) => bridge.receive(e.data);
+    window.addEventListener("message", handler);
+    const unsub = bridge.onMessage((env) => onMessageRef.current?.(env));
+    return () => {
+      window.removeEventListener("message", handler);
+      unsub();
+    };
+  }, [postToFrame]);
+  const send = useCallback5((env) => {
+    sendRef.current(env);
+  }, []);
+  return { send, frameRef };
+}
+
+// src/hooks/use-mcp-schema-form.ts
+import { useCallback as useCallback6, useMemo as useMemo9, useState as useState17 } from "react";
+import { schemaToFields as schemaToFields2 } from "@mcp-elements/core";
+function buildDefaults(fs) {
+  const defaults = {};
+  for (const f of fs) {
+    if (f.defaultValue !== void 0) defaults[f.key] = f.defaultValue;
+  }
+  return defaults;
+}
+function useMcpSchemaForm(schema) {
+  const fields = useMemo9(() => schemaToFields2(schema), [schema]);
+  const [values, setValues] = useState17(() => buildDefaults(fields));
+  const setValue = useCallback6((key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  const reset = useCallback6(() => {
+    setValues(buildDefaults(fields));
+  }, [fields]);
+  return { fields, values, setValue, reset };
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  AiBadge,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChatBubble,
+  ChatBubbleAvatar,
+  ChatBubbleContent,
+  ChatBubbleTimestamp,
+  ChatBubbleTyping,
+  Chip,
+  Chips,
+  Counter,
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Drawer,
+  DrawerBody,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DropdownMenu,
+  Feedback,
+  FeedbackButton,
+  FeedbackForm,
+  FeedbackInput,
+  FeedbackSeparator,
+  FeedbackSubmit,
+  Input,
+  Loader,
+  McpAppFrame,
+  McpConsentDialog,
+  McpResourceBrowser,
+  McpScopeInspector,
+  McpServerStatus,
+  McpToolCall,
+  McpToolForm,
+  PasswordInput,
+  Popover,
+  Progress,
+  PromptInput,
+  PromptInputActions,
+  PromptInputAttachment,
+  PromptInputAttachments,
+  PromptInputCharCount,
+  PromptInputFooter,
+  PromptInputTextarea,
+  Select,
+  Separator,
+  Skeleton,
+  SourceCard,
+  SourceCards,
+  StreamingText,
+  StreamingTextFadeIn,
+  StreamingTextLine,
+  StreamingTextSkeleton,
+  StreamingTextSkeletonLine,
+  StreamingTextWord,
+  SuggestionChip,
+  SuggestionChips,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Toaster,
+  Tooltip,
+  useAccordion,
+  useDialog,
+  useDrawer,
+  useDropdownMenu,
+  useMcpAppBridge,
+  useMcpOAuth,
+  useMcpSchemaForm,
+  useMcpToolState,
+  usePopover,
+  useSelect,
+  useTabs,
+  useToast,
+  useTooltip
+};
+//# sourceMappingURL=index.js.map