@handled-ai/design-system 0.3.0 → 0.4.2

package/dist/index.js

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React52 from 'react';
-import { AlertCircle, Phone, Mail, MessageSquare, ArrowLeft, ExternalLink, ChevronDown, ArrowRight, Plus, Square, Video, Clock, Eye, CheckCircle2, CheckSquare, CheckIcon, CircleIcon, ChevronRightIcon, X, ListFilter, Search, ChevronDownIcon, ChevronUpIcon, LayoutGrid, ArrowUpDown, ArrowDown, ArrowUp, XIcon, ThumbsUp, ThumbsDown, Check, CirclePlus, Lock, ChevronUp, Briefcase, History, Calendar, DollarSign, Users, TrendingUp, User, Link, SearchX, CalendarDays, Minimize2, Maximize2, MessageCircle, FileText, Building2, List, Filter, SlidersHorizontal, LayoutTemplate, ArrowDownAZ, ArrowUpAZ, RotateCcw, Info, ChevronLeft, ChevronRight, Paperclip, Inbox, Building, Activity, BarChart2, MoreHorizontal, Settings, Code, LogOut, PanelLeftOpen, PanelLeftClose, MoreVertical, HelpCircle, SkipForward, PanelLeftIcon, Tag, Columns2, LayoutList, Heart, Scale, AlertTriangle, Undo2, Copy, RefreshCw, Redo2, Bold, Italic, Underline, AlignLeft, Trash, PenLine, Sparkles } from 'lucide-react';
+import { useRef, useEffect, useMemo } from 'react';
+import { AlertCircle, Phone, Mail, MessageSquare, ArrowLeft, ExternalLink, ChevronDown, ArrowRight, Plus, Square, Video, Clock, Eye, CheckCircle2, CheckSquare, CheckIcon, CircleIcon, ChevronRightIcon, X, ListFilter, Search, ChevronDownIcon, ChevronUpIcon, LayoutGrid, ArrowUpDown, ArrowDown, ArrowUp, XIcon, ThumbsUp, ThumbsDown, Check, CirclePlus, Lock, ChevronUp, Briefcase, History, Calendar, DollarSign, Users, TrendingUp, User, Link, SearchX, CalendarDays, Minimize2, Maximize2, MessageCircle, FileText, Building2, List, Filter, SlidersHorizontal, LayoutTemplate, ArrowDownAZ, ArrowUpAZ, RotateCcw, Info, ChevronLeft, ChevronRight, Paperclip, Inbox, Building, Activity, BarChart2, MoreHorizontal, Settings, Code, LogOut, PanelLeftOpen, PanelLeftClose, MoreVertical, HelpCircle, SkipForward, PanelLeftIcon, Tag, Columns2, LayoutList, Sparkles, Mic, PhoneOff, Send, Heart, Scale, AlertTriangle, Undo2, Copy, RefreshCw, Redo2, Bold, Italic, Underline, AlignLeft, Trash, PenLine } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Slot, Avatar as Avatar$1, DropdownMenu as DropdownMenu$1, Select as Select$1, Dialog as Dialog$1, HoverCard as HoverCard$1, Separator as Separator$1, Popover, ScrollArea as ScrollArea$1, Tooltip as Tooltip$1, Progress as Progress$1, Tabs as Tabs$1 } from 'radix-ui';
 import { format } from 'date-fns';
@@ -11,6 +12,9 @@ import { Slot as Slot$1 } from '@radix-ui/react-slot';
 import { createColumnHelper, useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { ResponsiveSankey } from '@nivo/sankey';
+import { useTexture } from '@react-three/drei';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
+import { Color, RepeatWrapping, Uniform } from 'three';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -5878,8 +5882,11 @@ function NavItemRow({
   item,
   isActive,
   isCollapsed,
+  activeVariant = "default",
   onClick
 }) {
+  const activeClasses = activeVariant === "gradient" ? "bg-gradient-to-r from-primary/10 to-transparent text-primary" : "bg-sidebar-accent text-sidebar-accent-foreground";
+  const iconActiveClasses = activeVariant === "gradient" ? "text-primary" : "";
   const content = /* @__PURE__ */ React52.createElement(
     "button",
     {
@@ -5888,10 +5895,10 @@ function NavItemRow({
       className: cn(
         "flex w-full items-center gap-3 rounded-lg text-sm font-medium transition-colors",
         isCollapsed ? "justify-center p-2" : "px-3 py-2",
-        isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
+        isActive ? activeClasses : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
       )
     },
-    /* @__PURE__ */ React52.createElement(item.icon, { className: cn("shrink-0", isCollapsed ? "w-5 h-5" : "w-4 h-4") }),
+    /* @__PURE__ */ React52.createElement(item.icon, { className: cn("shrink-0", isCollapsed ? "w-5 h-5" : "w-4 h-4", isActive && iconActiveClasses) }),
     !isCollapsed && /* @__PURE__ */ React52.createElement("span", { className: "flex-1 truncate text-left" }, item.label)
   );
   if (isCollapsed) {
@@ -5903,6 +5910,7 @@ function NavSection({
   section,
   activeItemId,
   isCollapsed,
+  activeVariant = "default",
   onNavigate
 }) {
   var _a;
@@ -5932,6 +5940,7 @@ function NavSection({
       item,
       isActive: activeItemId === item.id,
       isCollapsed,
+      activeVariant,
       onClick: () => onNavigate == null ? void 0 : onNavigate(item.id)
     }
   )), !isCollapsed && section.moreItems && section.moreItems.length > 0 && /* @__PURE__ */ React52.createElement(DropdownMenu, null, /* @__PURE__ */ React52.createElement(DropdownMenuTrigger, { className: "flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors outline-none" }, /* @__PURE__ */ React52.createElement(MoreHorizontal, { className: "shrink-0 w-4 h-4" }), /* @__PURE__ */ React52.createElement("span", { className: "flex-1 text-left" }, "More")), /* @__PURE__ */ React52.createElement(DropdownMenuContent, { align: "start", side: "bottom", className: "w-48" }, section.moreItems.map((item) => /* @__PURE__ */ React52.createElement(
@@ -5950,6 +5959,7 @@ function NavSection({
       item,
       isActive: activeItemId === item.id,
       isCollapsed,
+      activeVariant,
       onClick: () => onNavigate == null ? void 0 : onNavigate(item.id)
     }
   )))));
@@ -5961,6 +5971,7 @@ function QuickActionSidebarNav(_a) {
     brandSubtitle = "Placeholder",
     navSections = DEFAULT_NAV_SECTIONS,
     activeItemId = "inbox",
+    activeVariant = "default",
     onNavigate,
     user = DEFAULT_USER,
     userMenuItems = DEFAULT_USER_MENU,
@@ -5973,6 +5984,7 @@ function QuickActionSidebarNav(_a) {
     "brandSubtitle",
     "navSections",
     "activeItemId",
+    "activeVariant",
     "onNavigate",
     "user",
     "userMenuItems",
@@ -6024,6 +6036,7 @@ function QuickActionSidebarNav(_a) {
           section,
           activeItemId,
           isCollapsed,
+          activeVariant,
           onNavigate
         }
       ));
@@ -9346,9 +9359,10 @@ var DEFAULT_ENTITY_SECTIONS = [
 function PrototypeShell({
   config,
   headerActions,
-  entityPanelChildren
+  entityPanelChildren,
+  onNavigate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const [currentView, setCurrentView] = React52.useState(config.defaultView);
   const [isEntityPanelOpen, setIsEntityPanelOpen] = React52.useState(false);
   const navigableViews = React52.useMemo(() => {
@@ -9365,8 +9379,9 @@ function PrototypeShell({
       if (navigableViews.includes(id)) {
         setCurrentView(id);
       }
+      onNavigate == null ? void 0 : onNavigate(id);
     },
-    [navigableViews]
+    [navigableViews, onNavigate]
   );
   const handleOpenEntityPanel = React52.useCallback(() => setIsEntityPanelOpen(true), []);
   const handleOpenRecentActivity = React52.useCallback(() => {
@@ -9383,6 +9398,8 @@ function PrototypeShell({
     QuickActionSidebarNav,
     {
       className: "z-20 h-screen shrink-0",
+      brandLabel: (_f = config.brand) == null ? void 0 : _f.name,
+      brandSubtitle: void 0,
       navSections: config.sidebar,
       activeItemId: currentView,
       onNavigate: handleNavigate,
@@ -9393,7 +9410,7 @@ function PrototypeShell({
   ), /* @__PURE__ */ React52.createElement("main", { className: "flex min-w-0 flex-1 flex-col overflow-hidden bg-background" }, /* @__PURE__ */ React52.createElement("div", { className: "relative h-full flex-1 overflow-auto" }, resolvedViewKey === "insights" && config.views.insights ? /* @__PURE__ */ React52.createElement(
     PrototypeInsightsView,
     __spreadProps(__spreadValues({}, config.views.insights), {
-      assistantName: (_f = config.brand) == null ? void 0 : _f.assistantName,
+      assistantName: (_g = config.brand) == null ? void 0 : _g.assistantName,
       headerActions,
       onNavigateToInbox: () => setCurrentView("inbox")
     })
@@ -9415,7 +9432,7 @@ function PrototypeShell({
     {
       headerActions
     }
-  ) : null)), /* @__PURE__ */ React52.createElement(EntityPanel, { isOpen: isEntityPanelOpen, onClose: setIsEntityPanelOpen }, (_g = typeof entityPanelChildren === "function" ? entityPanelChildren({ onClose: () => setIsEntityPanelOpen(false) }) : entityPanelChildren) != null ? _g : /* @__PURE__ */ React52.createElement(React52.Fragment, null, entitySections.map((section, i) => {
+  ) : null)), /* @__PURE__ */ React52.createElement(EntityPanel, { isOpen: isEntityPanelOpen, onClose: setIsEntityPanelOpen }, (_h = typeof entityPanelChildren === "function" ? entityPanelChildren({ onClose: () => setIsEntityPanelOpen(false) }) : entityPanelChildren) != null ? _h : /* @__PURE__ */ React52.createElement(React52.Fragment, null, entitySections.map((section, i) => {
     var _a2, _b2;
     switch (section.type) {
       case "details":
@@ -9457,7 +9474,927 @@ function PrototypeShell({
     }
   }))));
 }
+var Message = (_a) => {
+  var _b = _a, { className, from } = _b, props = __objRest(_b, ["className", "from"]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      "data-slot": "message",
+      className: cn(
+        "group flex w-full items-end gap-3 py-2",
+        from === "user" ? "is-user justify-end" : "is-assistant justify-start",
+        className
+      )
+    }, props)
+  );
+};
+var messageContentVariants = cva(
+  "flex flex-col gap-2 overflow-hidden text-sm leading-relaxed shadow-sm whitespace-pre-wrap",
+  {
+    variants: {
+      variant: {
+        contained: [
+          "max-w-[85%] px-6 py-4 rounded-[24px]",
+          "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:rounded-br-sm",
+          "group-[.is-assistant]:bg-muted group-[.is-assistant]:text-foreground group-[.is-assistant]:rounded-bl-sm"
+        ],
+        flat: [
+          "group-[.is-user]:max-w-[85%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+          "group-[.is-assistant]:text-foreground"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "contained"
+    }
+  }
+);
+var MessageContent = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    variant
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      "data-slot": "message-content",
+      className: cn(messageContentVariants({ variant, className }))
+    }, props),
+    children
+  );
+};
+var MessageAvatar = (_a) => {
+  var _b = _a, {
+    src,
+    name,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "src",
+    "name",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ React.createElement(Avatar, __spreadValues({ className: cn("ring-border size-8 ring-1 shrink-0", className) }, props), children, src && /* @__PURE__ */ React.createElement(AvatarImage, { alt: "", className: "mt-0 mb-0", src }), !children && !src && /* @__PURE__ */ React.createElement(AvatarFallback, null, (name == null ? void 0 : name.slice(0, 2)) || "ME"));
+};
+var DEFAULT_STATUS_MAP = {};
+var STATUS_KEYWORDS = {
+  success: ["active", "hired", "completed", "success", "shortlist", "approved", "resolved", "done"],
+  warning: ["pending", "new", "scheduled", "screening", "draft", "paused", "in_progress", "review"],
+  error: ["rejected", "failed", "cancelled", "error", "no_answer", "dropped", "blocked"],
+  neutral: []
+};
+function inferStatusType(status, statusMap) {
+  const lower = status.toLowerCase();
+  if (statusMap[lower]) return statusMap[lower];
+  for (const [type, keywords] of Object.entries(STATUS_KEYWORDS)) {
+    if (keywords.some((kw) => lower.includes(kw))) return type;
+  }
+  return "neutral";
+}
+var STATUS_STYLES = {
+  success: "bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100",
+  warning: "bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100",
+  error: "bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100",
+  neutral: "bg-muted text-foreground"
+};
+function formatStatus(status) {
+  return status.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function StatusBadge(_a) {
+  var _b = _a, { status, statusMap = DEFAULT_STATUS_MAP, className } = _b, props = __objRest(_b, ["status", "statusMap", "className"]);
+  const type = inferStatusType(status, statusMap);
+  return /* @__PURE__ */ React52.createElement(
+    "div",
+    __spreadValues({
+      "data-slot": "status-badge",
+      "data-status": type,
+      className: cn(
+        "inline-flex items-center justify-center rounded-full px-2.5 h-6 text-xs font-medium transition-colors",
+        STATUS_STYLES[type],
+        className
+      )
+    }, props),
+    formatStatus(status)
+  );
+}
+function SimpleDataTable({
+  columns,
+  data,
+  onRowClick,
+  emptyIcon,
+  emptyMessage = "No rows found",
+  emptyDescription = "Try adjusting your filters",
+  className
+}) {
+  const [sorting, setSorting] = React52.useState([]);
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
+  });
+  return /* @__PURE__ */ React52.createElement("div", { className: cn("w-full", className) }, /* @__PURE__ */ React52.createElement("table", { className: "w-full border-collapse text-sm" }, /* @__PURE__ */ React52.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React52.createElement(
+    "tr",
+    {
+      key: headerGroup.id,
+      className: "border-b border-border/50 hover:bg-transparent"
+    },
+    headerGroup.headers.map((header) => /* @__PURE__ */ React52.createElement(
+      "th",
+      {
+        key: header.id,
+        className: "h-9 px-3 text-left align-middle text-xs font-medium text-muted-foreground whitespace-nowrap"
+      },
+      header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ React52.createElement(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
+          onClick: header.column.getToggleSortingHandler()
+        },
+        flexRender(header.column.columnDef.header, header.getContext()),
+        header.column.getIsSorted() === "asc" ? /* @__PURE__ */ React52.createElement(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ React52.createElement(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ React52.createElement(ArrowUpDown, { className: "w-3 h-3 opacity-0 group-hover:opacity-50" })
+      ) : flexRender(header.column.columnDef.header, header.getContext())
+    ))
+  ))), /* @__PURE__ */ React52.createElement("tbody", null, table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React52.createElement(
+    "tr",
+    {
+      key: row.id,
+      onClick: () => onRowClick == null ? void 0 : onRowClick(row.original),
+      className: cn(
+        "group border-none transition-colors",
+        onRowClick && "cursor-pointer"
+      )
+    },
+    row.getVisibleCells().map((cell, cellIdx) => /* @__PURE__ */ React52.createElement(
+      "td",
+      {
+        key: cell.id,
+        className: cn(
+          "px-3 py-3 align-middle whitespace-nowrap group-hover:bg-muted/50",
+          cellIdx === 0 && "rounded-l-lg",
+          cellIdx === row.getVisibleCells().length - 1 && "rounded-r-lg"
+        )
+      },
+      flexRender(cell.column.columnDef.cell, cell.getContext())
+    ))
+  )) : /* @__PURE__ */ React52.createElement("tr", null, /* @__PURE__ */ React52.createElement("td", { colSpan: columns.length, className: "h-52 px-4 text-center" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col items-center gap-1 text-muted-foreground" }, emptyIcon != null ? emptyIcon : /* @__PURE__ */ React52.createElement(SearchX, { className: "h-7 w-7 opacity-40" }), /* @__PURE__ */ React52.createElement("p", { className: "text-sm font-medium" }, emptyMessage), /* @__PURE__ */ React52.createElement("p", { className: "text-xs" }, emptyDescription)))))));
+}
+var PERLIN_NOISE_URL = "https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png";
+function AgentOrb({
+  state = null,
+  colors,
+  volumeMode = "auto",
+  manualInput,
+  manualOutput,
+  inputVolumeRef,
+  outputVolumeRef,
+  getInputVolume,
+  getOutputVolume,
+  seed,
+  showGlow = true,
+  className
+}) {
+  const resolvedColors = useResolvedColors(colors);
+  const isSpeaking = state === "talking";
+  const isListening = state === "listening";
+  return /* @__PURE__ */ React.createElement("div", { className: cn("relative h-full w-full", className) }, showGlow && /* @__PURE__ */ React.createElement(
+    GlowLayer,
+    {
+      isSpeaking,
+      isListening
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "relative z-10 w-full h-full transition-transform duration-700 ease-out",
+        isListening ? "scale-90" : "scale-100"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      AgentOrbCanvas,
+      {
+        colors: resolvedColors,
+        seed,
+        agentState: state,
+        volumeMode,
+        manualInput,
+        manualOutput,
+        inputVolumeRef,
+        outputVolumeRef,
+        getInputVolume,
+        getOutputVolume,
+        className: "w-full h-full"
+      }
+    )
+  ));
+}
+function useResolvedColors(colors) {
+  const ref = useRef(colors != null ? colors : ["#000000", "#000000"]);
+  useEffect(() => {
+    if (colors) {
+      ref.current = colors;
+      return;
+    }
+    if (typeof document === "undefined") return;
+    const style = getComputedStyle(document.documentElement);
+    const primary = style.getPropertyValue("--primary").trim() || "#000000";
+    ref.current = [primary, primary];
+  }, [colors]);
+  return ref.current;
+}
+function GlowLayer({ isSpeaking, isListening }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 flex items-center justify-center transition-all duration-700 ease-out",
+        isListening ? "scale-90" : "scale-100"
+      )
+    },
+    isListening && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full animate-[spin_8s_linear_infinite]",
+        style: {
+          background: "conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 30%, transparent) 0deg, transparent 60deg, color-mix(in srgb, var(--primary) 30%, transparent) 120deg, transparent 180deg, color-mix(in srgb, var(--primary) 30%, transparent) 240deg, transparent 300deg)",
+          filter: "blur(20px)"
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full animate-[spin_12s_linear_infinite_reverse]",
+        style: {
+          background: "conic-gradient(from 45deg, transparent 0deg, color-mix(in srgb, var(--primary) 20%, transparent) 90deg, transparent 180deg, color-mix(in srgb, var(--primary) 20%, transparent) 270deg)",
+          filter: "blur(25px)"
+        }
+      }
+    )),
+    isSpeaking && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full animate-[spin_6s_linear_infinite]",
+        style: {
+          background: "conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 40%, transparent) 0deg, transparent 45deg, color-mix(in srgb, var(--primary) 40%, transparent) 90deg, transparent 135deg, color-mix(in srgb, var(--primary) 40%, transparent) 180deg, transparent 225deg, color-mix(in srgb, var(--primary) 40%, transparent) 270deg, transparent 315deg)",
+          filter: "blur(30px)"
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full animate-pulse",
+        style: {
+          animationDuration: "2s",
+          background: "radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 70%)",
+          filter: "blur(20px)"
+        }
+      }
+    )),
+    !isSpeaking && !isListening && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full",
+        style: {
+          background: "radial-gradient(circle, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 70%)",
+          filter: "blur(25px)"
+        }
+      }
+    )
+  );
+}
+function AgentOrbCanvas({
+  colors = ["#000000", "#000000"],
+  seed,
+  agentState = null,
+  volumeMode = "auto",
+  manualInput,
+  manualOutput,
+  inputVolumeRef,
+  outputVolumeRef,
+  getInputVolume,
+  getOutputVolume,
+  className,
+  resizeDebounce = 100
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: className != null ? className : "relative h-full w-full" }, /* @__PURE__ */ React.createElement(
+    Canvas,
+    {
+      resize: { debounce: resizeDebounce },
+      gl: { alpha: true, antialias: true, premultipliedAlpha: true }
+    },
+    /* @__PURE__ */ React.createElement(
+      OrbScene,
+      {
+        colors,
+        seed,
+        agentState,
+        volumeMode,
+        manualInput,
+        manualOutput,
+        inputVolumeRef,
+        outputVolumeRef,
+        getInputVolume,
+        getOutputVolume
+      }
+    )
+  ));
+}
+function OrbScene({
+  colors,
+  seed,
+  agentState,
+  volumeMode,
+  manualInput,
+  manualOutput,
+  inputVolumeRef,
+  outputVolumeRef,
+  getInputVolume,
+  getOutputVolume
+}) {
+  const { gl } = useThree();
+  const circleRef = useRef(null);
+  const initialColorsRef = useRef(colors);
+  const targetColor1Ref = useRef(new Color(colors[0]));
+  const targetColor2Ref = useRef(new Color(colors[1]));
+  const animSpeedRef = useRef(0.1);
+  const perlinNoiseTexture = useTexture(PERLIN_NOISE_URL);
+  const agentRef = useRef(agentState);
+  const modeRef = useRef(volumeMode);
+  const curInRef = useRef(0);
+  const curOutRef = useRef(0);
+  useEffect(() => {
+    agentRef.current = agentState;
+  }, [agentState]);
+  useEffect(() => {
+    modeRef.current = volumeMode;
+  }, [volumeMode]);
+  useEffect(() => {
+    targetColor1Ref.current = new Color(colors[0]);
+    targetColor2Ref.current = new Color(colors[1]);
+  }, [colors]);
+  const random = useMemo(
+    () => splitmix32(seed != null ? seed : Math.floor(Math.random() * 2 ** 32)),
+    [seed]
+  );
+  const offsets = useMemo(
+    () => new Float32Array(Array.from({ length: 7 }, () => random() * Math.PI * 2)),
+    [random]
+  );
+  useEffect(() => {
+    const apply = () => {
+      if (!circleRef.current) return;
+      const isDark = document.documentElement.classList.contains("dark");
+      circleRef.current.material.uniforms.uInverted.value = isDark ? 1 : 0;
+    };
+    apply();
+    const observer = new MutationObserver(apply);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  useFrame((_, delta) => {
+    var _a, _b, _c, _d, _e;
+    const mat = (_a = circleRef.current) == null ? void 0 : _a.material;
+    if (!mat) return;
+    const u = mat.uniforms;
+    u.uTime.value += delta * 0.5;
+    if (u.uOpacity.value < 1) {
+      u.uOpacity.value = Math.min(1, u.uOpacity.value + delta * 2);
+    }
+    let targetIn = 0;
+    let targetOut = 0.3;
+    if (modeRef.current === "manual") {
+      targetIn = clamp01((_c = (_b = manualInput != null ? manualInput : inputVolumeRef == null ? void 0 : inputVolumeRef.current) != null ? _b : getInputVolume == null ? void 0 : getInputVolume()) != null ? _c : 0);
+      targetOut = clamp01((_e = (_d = manualOutput != null ? manualOutput : outputVolumeRef == null ? void 0 : outputVolumeRef.current) != null ? _d : getOutputVolume == null ? void 0 : getOutputVolume()) != null ? _e : 0);
+    } else {
+      const t = u.uTime.value * 2;
+      if (agentRef.current === null) {
+        targetIn = 0;
+        targetOut = 0.3;
+      } else if (agentRef.current === "listening") {
+        targetIn = clamp01(0.55 + Math.sin(t * 3.2) * 0.35);
+        targetOut = 0.45;
+      } else if (agentRef.current === "talking") {
+        targetIn = clamp01(0.65 + Math.sin(t * 4.8) * 0.22);
+        targetOut = clamp01(0.75 + Math.sin(t * 3.6) * 0.22);
+      } else {
+        const base = 0.38 + 0.07 * Math.sin(t * 0.7);
+        const wander = 0.05 * Math.sin(t * 2.1) * Math.sin(t * 0.37 + 1.2);
+        targetIn = clamp01(base + wander);
+        targetOut = clamp01(0.48 + 0.12 * Math.sin(t * 1.05 + 0.6));
+      }
+    }
+    curInRef.current += (targetIn - curInRef.current) * 0.2;
+    curOutRef.current += (targetOut - curOutRef.current) * 0.2;
+    const targetSpeed = 0.1 + (1 - Math.pow(curOutRef.current - 1, 2)) * 0.9;
+    animSpeedRef.current += (targetSpeed - animSpeedRef.current) * 0.12;
+    u.uAnimation.value += delta * animSpeedRef.current;
+    u.uInputVolume.value = curInRef.current;
+    u.uOutputVolume.value = curOutRef.current;
+    u.uColor1.value.lerp(targetColor1Ref.current, 0.08);
+    u.uColor2.value.lerp(targetColor2Ref.current, 0.08);
+  });
+  useEffect(() => {
+    const canvas = gl.domElement;
+    const onContextLost = (event) => {
+      event.preventDefault();
+      setTimeout(() => {
+        gl.forceContextRestore();
+      }, 1);
+    };
+    canvas.addEventListener("webglcontextlost", onContextLost, false);
+    return () => canvas.removeEventListener("webglcontextlost", onContextLost, false);
+  }, [gl]);
+  const uniforms = useMemo(() => {
+    perlinNoiseTexture.wrapS = RepeatWrapping;
+    perlinNoiseTexture.wrapT = RepeatWrapping;
+    const isDark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+    return {
+      uColor1: new Uniform(new Color(initialColorsRef.current[0])),
+      uColor2: new Uniform(new Color(initialColorsRef.current[1])),
+      uOffsets: { value: offsets },
+      uPerlinTexture: new Uniform(perlinNoiseTexture),
+      uTime: new Uniform(0),
+      uAnimation: new Uniform(0.1),
+      uInverted: new Uniform(isDark ? 1 : 0),
+      uInputVolume: new Uniform(0),
+      uOutputVolume: new Uniform(0),
+      uOpacity: new Uniform(0)
+    };
+  }, [perlinNoiseTexture, offsets]);
+  return /* @__PURE__ */ React.createElement("mesh", { ref: circleRef }, /* @__PURE__ */ React.createElement("circleGeometry", { args: [3.5, 64] }), /* @__PURE__ */ React.createElement(
+    "shaderMaterial",
+    {
+      uniforms,
+      fragmentShader,
+      vertexShader,
+      transparent: true
+    }
+  ));
+}
+function splitmix32(a) {
+  return function() {
+    a |= 0;
+    a = a + 2654435769 | 0;
+    let t = a ^ a >>> 16;
+    t = Math.imul(t, 569420461);
+    t = t ^ t >>> 15;
+    t = Math.imul(t, 1935289751);
+    return ((t = t ^ t >>> 15) >>> 0) / 4294967296;
+  };
+}
+function clamp01(n) {
+  if (!Number.isFinite(n)) return 0;
+  return Math.min(1, Math.max(0, n));
+}
+var vertexShader = (
+  /* glsl */
+  `
+uniform float uTime;
+uniform sampler2D uPerlinTexture;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+);
+var fragmentShader = (
+  /* glsl */
+  `
+uniform float uTime;
+uniform float uAnimation;
+uniform float uInverted;
+uniform float uOffsets[7];
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform float uInputVolume;
+uniform float uOutputVolume;
+uniform float uOpacity;
+uniform sampler2D uPerlinTexture;
+varying vec2 vUv;
+
+const float PI = 3.14159265358979323846;
+
+bool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) {
+  vec2 p = polarUv - polarCenter;
+  float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b);
+  float edge = smoothstep(1.0, 1.0 - softness, oval);
+  if (edge > 0.0) {
+    float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0);
+    gradient = mix(0.5, gradient, 0.1);
+    color = vec4(vec3(gradient), 0.85 * edge);
+    return true;
+  }
+  return false;
+}
+
+vec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) {
+  if (grayscale < 0.33) return mix(color1, color2, grayscale * 3.0);
+  else if (grayscale < 0.66) return mix(color2, color3, (grayscale - 0.33) * 3.0);
+  else return mix(color3, color4, (grayscale - 0.66) * 3.0);
+}
+
+vec2 hash2(vec2 p) {
+  return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);
+}
+
+float noise2D(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float n = mix(
+    mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+        dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+    mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+        dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+  return 0.5 + 0.5 * n;
+}
+
+float sharpRing(vec3 decomposed, float time) {
+  float ringStart = 1.0;
+  float ringWidth = 0.3;
+  float noiseScale = 5.0;
+  float noise = mix(
+    noise2D(vec2(decomposed.x, time) * noiseScale),
+    noise2D(vec2(decomposed.y, time) * noiseScale),
+    decomposed.z
+  );
+  noise = (noise - 0.5) * 2.5;
+  return ringStart + noise * ringWidth * 1.5;
+}
+
+float smoothRing(vec3 decomposed, float time) {
+  float ringStart = 0.9;
+  float ringWidth = 0.2;
+  float noiseScale = 6.0;
+  float noise = mix(
+    noise2D(vec2(decomposed.x, time) * noiseScale),
+    noise2D(vec2(decomposed.y, time) * noiseScale),
+    decomposed.z
+  );
+  noise = (noise - 0.5) * 5.0;
+  return ringStart + noise * ringWidth;
+}
+
+float flow(vec3 decomposed, float time) {
+  return mix(
+    texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r,
+    texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r,
+    decomposed.z
+  );
+}
+
+void main() {
+  vec2 uv = vUv * 2.0 - 1.0;
+  float radius = length(uv);
+  float theta = atan(uv.y, uv.x);
+  if (theta < 0.0) theta += 2.0 * PI;
+
+  vec3 decomposed = vec3(
+    theta / (2.0 * PI),
+    mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0,
+    abs(theta / PI - 1.0)
+  );
+
+  float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5;
+  theta += noise * mix(0.08, 0.25, uOutputVolume);
+
+  vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
+  float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI);
+  float centers[7];
+  for (int i = 0; i < 7; i++) {
+    centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]);
+  }
+  float a, b;
+  vec4 ovalColor;
+  for (int i = 0; i < 7; i++) {
+    float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r;
+    a = 0.5 + noise * 0.3;
+    b = noise * mix(3.5, 2.5, uInputVolume);
+    bool reverseGradient = (i % 2 == 1);
+    float distTheta = min(abs(theta - centers[i]), min(abs(theta + 2.0 * PI - centers[i]), abs(theta - 2.0 * PI - centers[i])));
+    float distRadius = radius;
+    float softness = 0.6;
+    if (drawOval(vec2(distTheta, distRadius), vec2(0.0, 0.0), a, b, reverseGradient, softness, ovalColor)) {
+      color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a);
+      color.a = max(color.a, ovalColor.a);
+    }
+  }
+
+  float ringRadius1 = sharpRing(decomposed, uTime * 0.1);
+  float ringRadius2 = smoothRing(decomposed, uTime * 0.1);
+  float inputRadius1 = radius + uInputVolume * 0.2;
+  float inputRadius2 = radius + uInputVolume * 0.15;
+  float opacity1 = mix(0.2, 0.6, uInputVolume);
+  float opacity2 = mix(0.15, 0.45, uInputVolume);
+  float ringAlpha1 = (inputRadius2 >= ringRadius1) ? opacity1 : 0.0;
+  float ringAlpha2 = smoothstep(ringRadius2 - 0.05, ringRadius2 + 0.05, inputRadius1) * opacity2;
+  float totalRingAlpha = max(ringAlpha1, ringAlpha2);
+  vec3 ringColor = vec3(1.0);
+  color.rgb = 1.0 - (1.0 - color.rgb) * (1.0 - ringColor * totalRingAlpha);
+
+  vec3 color1 = vec3(0.0, 0.0, 0.0);
+  vec3 color2 = uColor1;
+  vec3 color3 = uColor2;
+  vec3 color4 = vec3(1.0, 1.0, 1.0);
+  float luminance = mix(color.r, 1.0 - color.r, uInverted);
+  color.rgb = colorRamp(luminance, color1, color2, color3, color4);
+  color.a *= uOpacity;
+  gl_FragColor = color;
+}
+`
+);
+function AgentWidget({
+  status = "idle",
+  mode = null,
+  messages = [],
+  onSendMessage,
+  onEndSession,
+  inputMode = "voice+text",
+  visualSlot,
+  assistantAvatarSlot,
+  header,
+  footer,
+  className
+}) {
+  const [textInput, setTextInput] = React52.useState("");
+  const messagesEndRef = React52.useRef(null);
+  React52.useEffect(() => {
+    var _a;
+    (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleSend = () => {
+    if (!textInput.trim()) return;
+    onSendMessage == null ? void 0 : onSendMessage(textInput);
+    setTextInput("");
+  };
+  const showTextInput = inputMode === "text" || inputMode === "voice+text";
+  const isConnected = status === "connected";
+  return /* @__PURE__ */ React52.createElement("div", { className: cn("flex flex-col h-full overflow-hidden", className) }, header, /* @__PURE__ */ React52.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 bg-muted/20" }, messages.length === 0 ? /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground space-y-2 opacity-50" }, visualSlot != null ? visualSlot : /* @__PURE__ */ React52.createElement("div", { className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center" }, /* @__PURE__ */ React52.createElement(Sparkles, { className: "w-5 h-5" })), /* @__PURE__ */ React52.createElement("p", { className: "text-sm" }, status === "connecting" ? "Connecting..." : "Conversation started...")) : /* @__PURE__ */ React52.createElement(React52.Fragment, null, messages.map((msg, idx) => /* @__PURE__ */ React52.createElement(Message, { key: idx, from: msg.from }, msg.from === "assistant" && assistantAvatarSlot ? /* @__PURE__ */ React52.createElement(MessageAvatar, null, assistantAvatarSlot) : null, /* @__PURE__ */ React52.createElement(MessageContent, null, msg.text.replace(/^["']|["']$/g, "")))), /* @__PURE__ */ React52.createElement("div", { ref: messagesEndRef }))), inputMode !== "text" && isConnected && /* @__PURE__ */ React52.createElement("div", { className: "flex justify-center py-2 bg-background" }, mode === "listening" ? /* @__PURE__ */ React52.createElement("div", { className: "inline-flex items-center gap-2 px-4 py-2 bg-primary/5 rounded-full border border-primary/10" }, /* @__PURE__ */ React52.createElement("div", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }), /* @__PURE__ */ React52.createElement("span", { className: "text-sm font-medium text-foreground" }, "Listening")) : mode === "speaking" ? /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      type: "button",
+      className: "inline-flex items-center gap-2 px-4 py-2 bg-background rounded-full border border-border hover:border-primary transition-colors"
+    },
+    /* @__PURE__ */ React52.createElement(Mic, { className: "w-4 h-4 text-primary" }),
+    /* @__PURE__ */ React52.createElement("span", { className: "text-sm font-medium text-foreground" }, "Talk to interrupt")
+  ) : null), /* @__PURE__ */ React52.createElement("div", { className: "flex-none p-4 bg-background border-t border-border" }, showTextInput ? /* @__PURE__ */ React52.createElement("div", { className: "relative border-2 border-foreground rounded-2xl p-4 bg-background shadow-sm transition-all focus-within:shadow-md" }, /* @__PURE__ */ React52.createElement(
+    "textarea",
+    {
+      className: "w-full resize-none border-none focus:ring-0 p-0 text-sm placeholder:text-muted-foreground min-h-[60px] bg-transparent outline-none focus:outline-none pr-24",
+      placeholder: "Send a message...",
+      value: textInput,
+      onChange: (e) => setTextInput(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSend();
+        }
+      }
+    }
+  ), /* @__PURE__ */ React52.createElement("div", { className: "absolute bottom-4 right-4 flex items-center gap-3" }, onEndSession && /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onEndSession,
+      className: "w-10 h-10 flex items-center justify-center rounded-full bg-background border border-border shadow-sm hover:bg-muted transition-colors group",
+      title: "End session"
+    },
+    /* @__PURE__ */ React52.createElement(PhoneOff, { className: "w-5 h-5 text-foreground group-hover:text-destructive transition-colors" })
+  ), /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleSend,
+      disabled: !textInput.trim(),
+      className: "w-10 h-10 flex items-center justify-center rounded-full bg-muted-foreground hover:bg-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-background shadow-sm"
+    },
+    /* @__PURE__ */ React52.createElement(Send, { className: "w-5 h-5 ml-0.5" })
+  ))) : onEndSession ? /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onEndSession,
+      className: "flex items-center justify-center gap-2 w-full px-6 py-3 bg-destructive/5 hover:bg-destructive/10 text-destructive border border-destructive/20 rounded-full font-medium transition-all"
+    },
+    /* @__PURE__ */ React52.createElement("span", { className: "w-2 h-2 bg-destructive rounded-full" }),
+    "End Session"
+  ) : null), footer);
+}
+
+// registry/new-york/ui/agent-popover.tsx
+var AgentPopoverContext = React52.createContext(null);
+function useAgentPopover() {
+  const ctx = React52.useContext(AgentPopoverContext);
+  if (!ctx) throw new Error("useAgentPopover must be used within <AgentPopover>");
+  return ctx;
+}
+function AgentPopover({
+  open,
+  onOpenChange,
+  defaultStep = "details",
+  step: controlledStep,
+  onStepChange,
+  children,
+  className
+}) {
+  const [uncontrolledStep, setUncontrolledStep] = React52.useState(defaultStep);
+  const step = controlledStep != null ? controlledStep : uncontrolledStep;
+  const setStep = React52.useCallback(
+    (s) => {
+      if (controlledStep === void 0) setUncontrolledStep(s);
+      onStepChange == null ? void 0 : onStepChange(s);
+    },
+    [controlledStep, onStepChange]
+  );
+  React52.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ React52.createElement(AgentPopoverContext.Provider, { value: { step, setStep } }, /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm animate-in fade-in duration-200",
+      onClick: () => onOpenChange(false)
+    }
+  ), /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      className: cn(
+        "fixed inset-4 z-50 flex overflow-hidden rounded-3xl bg-background shadow-2xl ring-1 ring-border/50 animate-in zoom-in-95 fade-in duration-300",
+        "md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:max-w-5xl md:w-[92vw] md:h-[85vh]",
+        className
+      )
+    },
+    /* @__PURE__ */ React52.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => onOpenChange(false),
+        className: "absolute right-4 top-4 z-20 p-2 rounded-full bg-background/80 hover:bg-muted transition-colors text-foreground"
+      },
+      /* @__PURE__ */ React52.createElement(X, { className: "w-4 h-4" })
+    ),
+    children
+  ));
+}
+function AgentPopoverBranding({
+  title,
+  subtitle,
+  badge,
+  visualSlot,
+  statusIndicator = "ready",
+  className
+}) {
+  return /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      className: cn(
+        "relative hidden w-[40%] shrink-0 flex-col items-center justify-center p-8 md:flex",
+        "bg-gradient-to-br from-primary/5 via-background to-primary/10",
+        className
+      )
+    },
+    /* @__PURE__ */ React52.createElement(
+      "div",
+      {
+        className: "absolute inset-0 pointer-events-none opacity-[0.06]",
+        style: {
+          backgroundImage: "radial-gradient(circle, var(--primary) 1px, transparent 1px)",
+          backgroundSize: "24px 24px"
+        }
+      }
+    ),
+    /* @__PURE__ */ React52.createElement("div", { className: "relative z-10 flex flex-col items-center gap-6 text-center" }, visualSlot && /* @__PURE__ */ React52.createElement("div", { className: "w-[200px] h-[200px] flex items-center justify-center" }, visualSlot), badge && /* @__PURE__ */ React52.createElement("span", { className: "inline-flex px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium border border-primary/10" }, badge), title && /* @__PURE__ */ React52.createElement("h2", { className: "text-xl font-semibold text-foreground" }, title), subtitle && /* @__PURE__ */ React52.createElement("p", { className: "text-sm text-muted-foreground max-w-[240px]" }, subtitle), /* @__PURE__ */ React52.createElement(StatusPill, { status: statusIndicator }))
+  );
+}
+function StatusPill({ status }) {
+  const label = {
+    ready: "Ready to connect",
+    connected: "Connected",
+    listening: "Listening...",
+    speaking: "Speaking..."
+  };
+  const dotColor = {
+    ready: "bg-muted-foreground",
+    connected: "bg-green-500",
+    listening: "bg-green-500 animate-pulse",
+    speaking: "bg-primary animate-pulse"
+  };
+  return /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2 rounded-full border border-border px-3 py-1.5 bg-background/50" }, /* @__PURE__ */ React52.createElement("div", { className: cn("h-2 w-2 rounded-full", dotColor[status]) }), /* @__PURE__ */ React52.createElement("span", { className: "text-xs text-muted-foreground" }, label[status]));
+}
+function AgentPopoverStepContent({ step, children, className }) {
+  const { step: currentStep } = useAgentPopover();
+  if (currentStep !== step) return null;
+  return /* @__PURE__ */ React52.createElement("div", { className: cn("flex-1 flex flex-col overflow-hidden", className) }, children);
+}
+function AgentPopoverForm({
+  fields = [],
+  submitLabel = "Continue",
+  onSubmit,
+  className,
+  children
+}) {
+  const [values, setValues] = React52.useState({});
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit == null ? void 0 : onSubmit(values);
+  };
+  return /* @__PURE__ */ React52.createElement(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn("flex flex-col h-full p-8 overflow-y-auto", className)
+    },
+    /* @__PURE__ */ React52.createElement("div", { className: "flex-1 space-y-4" }, fields.map(
+      (field) => {
+        var _a, _b, _c;
+        return field.type === "textarea" ? /* @__PURE__ */ React52.createElement("label", { key: field.name, className: "block space-y-1.5" }, /* @__PURE__ */ React52.createElement("span", { className: "text-sm font-medium text-foreground" }, field.label, field.required && /* @__PURE__ */ React52.createElement("span", { className: "text-destructive ml-0.5" }, "*")), /* @__PURE__ */ React52.createElement(
+          "textarea",
+          {
+            className: "w-full rounded-xl border border-border bg-background px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary min-h-[80px] resize-none",
+            placeholder: field.placeholder,
+            required: field.required,
+            value: (_a = values[field.name]) != null ? _a : "",
+            onChange: (e) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [field.name]: e.target.value }))
+          }
+        )) : /* @__PURE__ */ React52.createElement("label", { key: field.name, className: "block space-y-1.5" }, /* @__PURE__ */ React52.createElement("span", { className: "text-sm font-medium text-foreground" }, field.label, field.required && /* @__PURE__ */ React52.createElement("span", { className: "text-destructive ml-0.5" }, "*")), /* @__PURE__ */ React52.createElement(
+          "input",
+          {
+            type: (_b = field.type) != null ? _b : "text",
+            className: "w-full rounded-xl border border-border bg-background px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+            placeholder: field.placeholder,
+            required: field.required,
+            value: (_c = values[field.name]) != null ? _c : "",
+            onChange: (e) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [field.name]: e.target.value }))
+          }
+        ));
+      }
+    ), children),
+    /* @__PURE__ */ React52.createElement(
+      "button",
+      {
+        type: "submit",
+        className: "mt-6 w-full px-6 py-3 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 font-medium transition-colors"
+      },
+      submitLabel
+    )
+  );
+}
+function AgentPopoverOverview({
+  userSummary,
+  discussionPoints,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ React52.createElement("div", { className: cn("flex flex-col h-full p-8 overflow-y-auto", className) }, userSummary && Object.keys(userSummary).length > 0 && /* @__PURE__ */ React52.createElement("div", { className: "mb-6 rounded-xl bg-muted/50 p-4 space-y-2" }, Object.entries(userSummary).map(([key, val]) => /* @__PURE__ */ React52.createElement("div", { key, className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React52.createElement("span", { className: "text-muted-foreground capitalize" }, key), /* @__PURE__ */ React52.createElement("span", { className: "text-foreground font-medium" }, val)))), discussionPoints && discussionPoints.length > 0 && /* @__PURE__ */ React52.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React52.createElement("h3", { className: "text-sm font-semibold text-foreground mb-3" }, "Discussion Points"), /* @__PURE__ */ React52.createElement("ul", { className: "space-y-2" }, discussionPoints.map((point, i) => /* @__PURE__ */ React52.createElement("li", { key: i, className: "flex items-start gap-2 text-sm text-foreground" }, /* @__PURE__ */ React52.createElement("div", { className: "mt-1.5 w-1.5 h-1.5 rounded-full bg-primary shrink-0" }), point)))), actions && /* @__PURE__ */ React52.createElement("div", { className: "mt-auto pt-6" }, actions));
+}
+function AgentPopoverChat({
+  messages = [],
+  onSendMessage,
+  onEndSession,
+  inputMode = "voice+text",
+  visualSlot,
+  assistantAvatarSlot,
+  status = "connected",
+  mode = null,
+  className
+}) {
+  return /* @__PURE__ */ React52.createElement(
+    AgentWidget,
+    {
+      messages,
+      onSendMessage,
+      onEndSession,
+      inputMode,
+      visualSlot,
+      assistantAvatarSlot,
+      status,
+      mode,
+      className: cn("h-full", className)
+    }
+  );
+}
 
-export { ActivityDetail, ActivityLog, ActivityRow, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartComponent, Button, CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckInsCard, Citation, ConnectedApps, ContactList, DataTable, DataTableDisplay, DataTableFilter, DataTableQuickViews, DataTableToolbar, DetailViewHeader, DetailViewSummary, DetailViewThread, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityActivityItem, EntityDetails, EntityMetadataGrid, EntityPanel, EntityPanelHeader, EntityPanelTabs, EntitySection, GroupedListView, InboxGroupHeader, InboxRow, InboxToolbar, Input, ItemList, ItemListDisplay, ItemListFilter, ItemListToolbar, Label2 as Label, MetricCard, PerformanceMetricsTable, PipelineOverview, PotentialContacts, PreviewList, PreviewListItem, Progress, PrototypeAccountsView, PrototypeInboxView, PrototypeInsightsView, PrototypeShell, PrototypeWorkQueueView, QuickActionChatArea, QuickActionModal, QuickActionSidebarNav, RecentActivity, RecentlyCompletedCard, RecommendedActionsSection, ReportCard, SankeyChart, ScoreAnalysisModal, ScoreAnalysisPanel, ScoreBreakdown, ScoreFeedback, ScoreRing, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignalApproval, Actions as SignalApprovalActions, Gate as SignalApprovalGate, Root as SignalApprovalRoot, SimpleChartTooltip, Skeleton, SourceList, StyledBarList, SuggestedActions, SystemActivity, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadMessage, TimelineActivity, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLineMetrics, TopTasksCard, TrendAreaChart, UpcomingMeetingsCard, ViewModeToggle, VolumeAnalysisChart, badgeVariants, buttonVariants, cn, getScoreColor, tabsListVariants, useIsMobile, useScoreFeedback, useSidebar, useSignalApproval };
+export { ActivityDetail, ActivityLog, ActivityRow, AgentOrb, AgentOrbCanvas, AgentPopover, AgentPopoverBranding, AgentPopoverChat, AgentPopoverForm, AgentPopoverOverview, AgentPopoverStepContent, AgentWidget, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartComponent, Button, CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckInsCard, Citation, ConnectedApps, ContactList, DataTable, DataTableDisplay, DataTableFilter, DataTableQuickViews, DataTableToolbar, DetailViewHeader, DetailViewSummary, DetailViewThread, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityActivityItem, EntityDetails, EntityMetadataGrid, EntityPanel, EntityPanelHeader, EntityPanelTabs, EntitySection, GroupedListView, InboxGroupHeader, InboxRow, InboxToolbar, Input, ItemList, ItemListDisplay, ItemListFilter, ItemListToolbar, Label2 as Label, Message, MessageAvatar, MessageContent, MetricCard, PerformanceMetricsTable, PipelineOverview, PotentialContacts, PreviewList, PreviewListItem, Progress, PrototypeAccountsView, PrototypeInboxView, PrototypeInsightsView, PrototypeShell, PrototypeWorkQueueView, QuickActionChatArea, QuickActionModal, QuickActionSidebarNav, RecentActivity, RecentlyCompletedCard, RecommendedActionsSection, ReportCard, SankeyChart, ScoreAnalysisModal, ScoreAnalysisPanel, ScoreBreakdown, ScoreFeedback, ScoreRing, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignalApproval, Actions as SignalApprovalActions, Gate as SignalApprovalGate, Root as SignalApprovalRoot, SimpleChartTooltip, SimpleDataTable, Skeleton, SourceList, StatusBadge, StyledBarList, SuggestedActions, SystemActivity, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadMessage, TimelineActivity, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLineMetrics, TopTasksCard, TrendAreaChart, UpcomingMeetingsCard, ViewModeToggle, VolumeAnalysisChart, badgeVariants, buttonVariants, cn, getScoreColor, tabsListVariants, useAgentPopover, useIsMobile, useScoreFeedback, useSidebar, useSignalApproval };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map