@sesionario/blocks 1.13.1 → 1.15.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import * as React7 from 'react';
 import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useId, useMemo } from 'react';
-import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, User, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, BadgeCheck, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, XIcon } from 'lucide-react';
+import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, BadgeCheck, Settings, User, Activity, LayoutDashboard, Users, LogOut, LogIn, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, PictureInPicture2, Minimize, Maximize, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, ChevronRightIcon, XIcon, CircleIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -926,6 +926,38 @@ function DropdownMenuItem({
     }
   );
 }
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
 function DropdownMenuLabel({
   className,
   inset,
@@ -973,6 +1005,50 @@ function DropdownMenuShortcut({
     }
   );
 }
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var defaultLabels = {
   theme: "Theme",
   system: "System",
@@ -1465,7 +1541,7 @@ function LanguageSwitcher({
   const sizes = sizeClasses2[size];
   const shapeClass = shapeClasses2[shape];
   const reduceMotion = useReducedMotion();
-  const defaultLabels5 = {
+  const defaultLabels6 = {
     language: labels.language ?? "Language"
   };
   if (variant === "mini") {
@@ -1475,7 +1551,7 @@ function LanguageSwitcher({
         {
           variant: "ghost",
           size: "icon",
-          "aria-label": defaultLabels5.language,
+          "aria-label": defaultLabels6.language,
           className: cn(sizes.buttonMini, shapeClass, className),
           children: /* @__PURE__ */ jsx(Languages, { className: sizes.iconMini })
         }
@@ -1566,6 +1642,378 @@ function LanguageSwitcher({
     }
   );
 }
+function PlatformNavbar({
+  logo,
+  leading,
+  center,
+  right,
+  className,
+  innerClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-30 shrink-0 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        className
+      ),
+      "data-testid": "platform-navbar",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-14 min-h-14 items-center gap-2 px-4 md:px-6",
+            innerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: logo }),
+            leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
+            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center overflow-x-auto", children: center }),
+            right ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: right }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var LABELS = {
+  verified: "M\xE9dico verificado",
+  pending_review: "Verificaci\xF3n en revisi\xF3n"
+};
+var sizeClasses3 = {
+  sm: {
+    icon: "size-3.5",
+    text: "text-xs",
+    gap: "gap-1",
+    padding: "px-1.5 py-0.5"
+  },
+  md: {
+    icon: "size-4",
+    text: "text-sm",
+    gap: "gap-1.5",
+    padding: "px-2 py-0.5"
+  }
+};
+function VerifiedProfessionalBadge({
+  status,
+  size = "md",
+  showLabel = false,
+  className
+}) {
+  if (status === "unverified" || status === "pending_review" && !showLabel) {
+    return null;
+  }
+  const label = LABELS[status];
+  const sizes = sizeClasses3[size];
+  const Icon = status === "verified" ? BadgeCheck : Clock;
+  const colorClass = status === "verified" ? "text-primary" : "text-muted-foreground";
+  if (!showLabel) {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: cn(sizes.icon, colorClass, className),
+        "aria-label": label,
+        children: /* @__PURE__ */ jsx("title", { children: label })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      title: label,
+      "aria-label": label,
+      className: cn(
+        "inline-flex w-fit items-center rounded-full font-medium",
+        sizes.gap,
+        sizes.text,
+        sizes.padding,
+        status === "verified" ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: sizes.icon, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+var defaultLabels3 = {
+  accountMenu: "Account menu",
+  settingsMenu: "Settings",
+  personalProfile: "Personal profile",
+  activity: "Activity",
+  professionalProfile: "Professional profile",
+  mainApp: "Main app",
+  orgManagement: "Organization management",
+  backoffice: "Backoffice",
+  memberOrgs: "My organizations",
+  managementOrgs: "Management team",
+  language: "Language",
+  theme: "Theme",
+  themeLight: "Light",
+  themeDark: "Dark",
+  themeSystem: "System",
+  signIn: "Sign in",
+  signOut: "Sign out",
+  signingOut: "Signing out\u2026",
+  accountSettings: "Account settings"
+};
+function MenuAvatar({
+  name,
+  image,
+  sizeClass
+}) {
+  const initials = getInitials(name);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative flex shrink-0 overflow-hidden rounded-full",
+        sizeClass
+      ),
+      children: image ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image,
+          alt: "",
+          className: "aspect-square size-full object-cover"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex size-full items-center justify-center text-xs font-semibold",
+          style: avatarFallbackStyle(name),
+          children: initials
+        }
+      )
+    }
+  );
+}
+function LanguageThemeSubs({
+  languages,
+  currentLanguage,
+  onLanguageChange,
+  labels
+}) {
+  const { theme, setTheme } = useTheme();
+  const themeValue = theme ?? "system";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(Languages, { className: "size-4" }),
+        labels.language
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsx(
+        DropdownMenuRadioGroup,
+        {
+          value: currentLanguage,
+          onValueChange: onLanguageChange,
+          children: languages.map((lang) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: lang.key, children: lang.nativeName }, lang.key))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+        themeValue === "light" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsx(Moon, { className: "size-4" }) : /* @__PURE__ */ jsx(Monitor, { className: "size-4" }),
+        labels.theme
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, { value: themeValue, onValueChange: setTheme, children: [
+        /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "system", children: labels.themeSystem }),
+        /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "light", children: labels.themeLight }),
+        /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "dark", children: labels.themeDark })
+      ] }) })
+    ] })
+  ] });
+}
+function PlatformAccountMenu({
+  variant = "platform",
+  isPending = false,
+  user = null,
+  isAdmin = false,
+  verificationStatus = "unverified",
+  urls,
+  memberOrgs = [],
+  manageableOrgs = [],
+  languages = defaultLanguages,
+  currentLanguage,
+  onLanguageChange,
+  labels: labelsProp,
+  onSignOut,
+  extraItems,
+  className
+}) {
+  const labels = { ...defaultLabels3, ...labelsProp };
+  const [signingOut, setSigningOut] = useState(false);
+  const loginHref = `${urls.authAppUrl}${urls.loginPath ?? "/login"}`;
+  const accountHref = `${urls.authAppUrl}${urls.accountPath ?? "/account"}`;
+  const activityHref = `${urls.authAppUrl}${urls.activityPath ?? "/account/activity"}`;
+  const profileHref = `${urls.appUrl}${urls.professionalProfilePath ?? "/profile"}`;
+  async function handleSignOut() {
+    if (!onSignOut) return;
+    setSigningOut(true);
+    try {
+      await onSignOut();
+    } finally {
+      setSigningOut(false);
+    }
+  }
+  if (isPending) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "size-9 shrink-0 animate-pulse rounded-full bg-muted",
+          className
+        ),
+        "aria-hidden": true
+      }
+    );
+  }
+  const trigger = user ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-9 rounded-full", className),
+      "aria-label": labels.accountMenu,
+      children: /* @__PURE__ */ jsx(MenuAvatar, { name: user.name, image: user.image, sizeClass: "size-8" })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-9", className),
+      "aria-label": labels.settingsMenu,
+      children: /* @__PURE__ */ jsx(Settings, { className: "size-4" })
+    }
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-60 rounded-lg", children: user ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-3 p-2 font-normal", children: [
+        /* @__PURE__ */ jsx(
+          MenuAvatar,
+          {
+            name: user.name,
+            image: user.image,
+            sizeClass: "size-9"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: user.name }),
+            variant === "platform" ? /* @__PURE__ */ jsx(
+              VerifiedProfessionalBadge,
+              {
+                status: verificationStatus,
+                className: "shrink-0"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground leading-tight", children: user.email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      variant === "platform" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: accountHref, children: [
+          /* @__PURE__ */ jsx(User, { className: "size-4" }),
+          labels.personalProfile
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: activityHref, children: [
+          /* @__PURE__ */ jsx(Activity, { className: "size-4" }),
+          labels.activity
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: profileHref, children: [
+          /* @__PURE__ */ jsx(User, { className: "size-4" }),
+          labels.professionalProfile
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: urls.appUrl, children: [
+          /* @__PURE__ */ jsx(LayoutDashboard, { className: "size-4" }),
+          labels.mainApp
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: urls.adminUrl, children: [
+          /* @__PURE__ */ jsx(Building2, { className: "size-4" }),
+          labels.orgManagement
+        ] }) }),
+        isAdmin && urls.backofficeUrl ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: urls.backofficeUrl, children: [
+          /* @__PURE__ */ jsx(LayoutDashboard, { className: "size-4" }),
+          labels.backoffice
+        ] }) }) : null,
+        memberOrgs.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+            /* @__PURE__ */ jsx(Users, { className: "size-4" }),
+            labels.memberOrgs
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto", children: memberOrgs.map((org) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: `${urls.appUrl}/o/${org.slug}`, children: org.name }) }, org.id)) })
+        ] }) : null,
+        manageableOrgs.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
+            /* @__PURE__ */ jsx(Building2, { className: "size-4" }),
+            labels.managementOrgs
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto", children: manageableOrgs.map((org) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `${urls.adminUrl}/api/auth/org/select?id=${encodeURIComponent(org.id)}`,
+              children: org.name
+            }
+          ) }, org.id)) })
+        ] }) : null,
+        extraItems,
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: accountHref, children: [
+          /* @__PURE__ */ jsx(Settings, { className: "size-4" }),
+          labels.accountSettings
+        ] }) }),
+        extraItems,
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }),
+      /* @__PURE__ */ jsx(
+        LanguageThemeSubs,
+        {
+          languages,
+          currentLanguage,
+          onLanguageChange,
+          labels
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          variant: "destructive",
+          className: "gap-2",
+          disabled: signingOut || !onSignOut,
+          onSelect: (event) => {
+            event.preventDefault();
+            void handleSignOut();
+          },
+          children: [
+            /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
+            signingOut ? labels.signingOut : labels.signOut
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        LanguageThemeSubs,
+        {
+          languages,
+          currentLanguage,
+          onLanguageChange,
+          labels
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: loginHref, children: [
+        /* @__PURE__ */ jsx(LogIn, { className: "size-4" }),
+        labels.signIn
+      ] }) })
+    ] }) })
+  ] });
+}
 function Slider({
   className,
   defaultValue,
@@ -4884,7 +5332,7 @@ function SearchablePickerList({
     ] })
   ] });
 }
-var defaultLabels3 = {
+var defaultLabels4 = {
   placeholder: "Seleccionar\u2026",
   searchPlaceholder: "Buscar\u2026",
   empty: "No se encontraron resultados",
@@ -4957,7 +5405,7 @@ function SearchablePicker(props) {
     "aria-label": ariaLabel
   } = props;
   const mode = props.mode ?? "single";
-  const labels = { ...defaultLabels3, ...userLabels };
+  const labels = { ...defaultLabels4, ...userLabels };
   const resolvedEmptyLabel = emptyLabel ?? labels.emptyOption;
   const isMobile = useMediaQuery2("(max-width: 767px)");
   const generatedId = useId();
@@ -5297,7 +5745,7 @@ function SearchablePicker(props) {
     clearButton
   ] });
 }
-var defaultLabels4 = {
+var defaultLabels5 = {
   placeholder: "Buscar en toda la plataforma\u2026",
   dialogTitle: "Buscar",
   dialogDescription: "Busca funcionalidades, eventos, documentos y m\xE1s",
@@ -5331,7 +5779,7 @@ function SearchCommand({
   debounceMs = 200,
   className
 }) {
-  const labels = { ...defaultLabels4, ...userLabels };
+  const labels = { ...defaultLabels5, ...userLabels };
   const [query, setQuery] = useState("");
   const [hits, setHits] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -5773,67 +6221,6 @@ function MexicoMap({ selected, onToggle, className }) {
     }
   );
 }
-var LABELS = {
-  verified: "M\xE9dico verificado",
-  pending_review: "Verificaci\xF3n en revisi\xF3n"
-};
-var sizeClasses3 = {
-  sm: {
-    icon: "size-3.5",
-    text: "text-xs",
-    gap: "gap-1",
-    padding: "px-1.5 py-0.5"
-  },
-  md: {
-    icon: "size-4",
-    text: "text-sm",
-    gap: "gap-1.5",
-    padding: "px-2 py-0.5"
-  }
-};
-function VerifiedProfessionalBadge({
-  status,
-  size = "md",
-  showLabel = false,
-  className
-}) {
-  if (status === "unverified" || status === "pending_review" && !showLabel) {
-    return null;
-  }
-  const label = LABELS[status];
-  const sizes = sizeClasses3[size];
-  const Icon = status === "verified" ? BadgeCheck : Clock;
-  const colorClass = status === "verified" ? "text-primary" : "text-muted-foreground";
-  if (!showLabel) {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        className: cn(sizes.icon, colorClass, className),
-        "aria-label": label,
-        children: /* @__PURE__ */ jsx("title", { children: label })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      title: label,
-      "aria-label": label,
-      className: cn(
-        "inline-flex w-fit items-center rounded-full font-medium",
-        sizes.gap,
-        sizes.text,
-        sizes.padding,
-        status === "verified" ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { className: sizes.icon, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { children: label })
-      ]
-    }
-  );
-}
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -6954,6 +7341,162 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
 }
 var DEFAULT_RECONNECT_MS = 2e3;
 var MAX_RECONNECT_MS = 3e4;
+var HEARTBEAT_MS = 3e4;
+var registry = /* @__PURE__ */ new Map();
+function channelKeyFromUrl(url) {
+  const q = url.indexOf("?");
+  return q === -1 ? url : url.slice(0, q);
+}
+function stopHeartbeat(shared) {
+  if (shared.heartbeatTimer) {
+    clearInterval(shared.heartbeatTimer);
+    shared.heartbeatTimer = null;
+  }
+}
+function startHeartbeat(shared, gen) {
+  stopHeartbeat(shared);
+  shared.heartbeatTimer = setInterval(() => {
+    if (gen !== shared.gen) return;
+    if (shared.ws?.readyState === WebSocket.OPEN) {
+      try {
+        shared.ws.send("ping");
+      } catch {
+      }
+    }
+  }, HEARTBEAT_MS);
+}
+function clearReconnect(shared) {
+  if (shared.reconnectTimer) {
+    clearTimeout(shared.reconnectTimer);
+    shared.reconnectTimer = null;
+  }
+}
+function openSocket(shared, url) {
+  const gen = ++shared.gen;
+  clearReconnect(shared);
+  if (shared.ws) {
+    try {
+      shared.ws.close();
+    } catch {
+    }
+  }
+  const ws = new WebSocket(url);
+  shared.ws = ws;
+  ws.onopen = () => {
+    if (gen !== shared.gen) return;
+    shared.attempt = 0;
+    startHeartbeat(shared, gen);
+  };
+  ws.onmessage = (msg) => {
+    if (gen !== shared.gen) return;
+    let data;
+    try {
+      data = JSON.parse(String(msg.data));
+    } catch {
+      return;
+    }
+    if (typeof data?.type !== "string") return;
+    if (data.type === "pong") return;
+    for (const listener of shared.listeners) {
+      listener(data);
+    }
+  };
+  ws.onclose = () => {
+    if (gen !== shared.gen) return;
+    shared.ws = null;
+    stopHeartbeat(shared);
+    scheduleReconnect(shared);
+  };
+  ws.onerror = () => {
+  };
+}
+function scheduleReconnect(shared) {
+  if (shared.listeners.size === 0) return;
+  clearReconnect(shared);
+  const delay = Math.min(
+    shared.reconnectDelayMs * 2 ** shared.attempt,
+    MAX_RECONNECT_MS
+  );
+  shared.attempt += 1;
+  shared.reconnectTimer = setTimeout(() => {
+    shared.reconnectTimer = null;
+    void connectShared(shared);
+  }, delay);
+}
+async function connectShared(shared) {
+  if (shared.connecting || shared.listeners.size === 0) return;
+  shared.connecting = true;
+  let url = null;
+  try {
+    url = await shared.getWsUrl();
+  } finally {
+    shared.connecting = false;
+  }
+  if (shared.listeners.size === 0) return;
+  if (!url) return;
+  openSocket(shared, url);
+}
+function destroyShared(shared) {
+  shared.gen += 1;
+  clearReconnect(shared);
+  stopHeartbeat(shared);
+  if (shared.ws) {
+    try {
+      shared.ws.close();
+    } catch {
+    }
+    shared.ws = null;
+  }
+}
+function joinChannel(key, url, getWsUrl, reconnectDelayMs, listener) {
+  ensureVisibilityHook();
+  let shared = registry.get(key);
+  if (!shared) {
+    shared = {
+      key,
+      listeners: /* @__PURE__ */ new Set(),
+      getWsUrl,
+      reconnectDelayMs,
+      ws: null,
+      attempt: 0,
+      reconnectTimer: null,
+      heartbeatTimer: null,
+      connecting: false,
+      gen: 0
+    };
+    registry.set(key, shared);
+    shared.listeners.add(listener);
+    openSocket(shared, url);
+    return;
+  }
+  shared.getWsUrl = getWsUrl;
+  shared.listeners.add(listener);
+  if (!shared.ws && !shared.connecting && !shared.reconnectTimer) {
+    openSocket(shared, url);
+  }
+}
+function leaveChannel(key, listener) {
+  const shared = registry.get(key);
+  if (!shared) return;
+  shared.listeners.delete(listener);
+  if (shared.listeners.size === 0) {
+    destroyShared(shared);
+    registry.delete(key);
+  }
+}
+var visibilityHooked = false;
+function ensureVisibilityHook() {
+  if (visibilityHooked || typeof document === "undefined") return;
+  visibilityHooked = true;
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState !== "visible") return;
+    for (const shared of registry.values()) {
+      if (!shared.ws && !shared.reconnectTimer && !shared.connecting) {
+        void connectShared(shared);
+      }
+    }
+  });
+}
 function useRealtimeChannel({
   getWsUrl,
   onEvent,
@@ -6967,91 +7510,30 @@ function useRealtimeChannel({
   useEffect(() => {
     if (!enabled) return;
     let cancelled = false;
-    let socket = null;
-    let reconnectTimer = null;
-    let attempt = 0;
-    const connectGen = { current: 0 };
-    const clearReconnect = () => {
-      if (reconnectTimer) {
-        clearTimeout(reconnectTimer);
-        reconnectTimer = null;
-      }
-    };
-    const scheduleReconnect = () => {
-      if (cancelled) return;
-      clearReconnect();
-      const delay = Math.min(reconnectDelayMs * 2 ** attempt, MAX_RECONNECT_MS);
-      attempt += 1;
-      reconnectTimer = setTimeout(() => {
-        void connect();
-      }, delay);
-    };
-    const connect = async () => {
-      const gen = ++connectGen.current;
-      clearReconnect();
-      const url = await getWsUrlRef.current();
-      if (cancelled || gen !== connectGen.current) return;
-      if (!url) {
-        scheduleReconnect();
-        return;
-      }
-      if (socket) {
-        try {
-          socket.close();
-        } catch {
-        }
-        socket = null;
-      }
-      const ws = new WebSocket(url);
-      socket = ws;
-      ws.onopen = () => {
-        if (cancelled || gen !== connectGen.current) return;
-        attempt = 0;
-      };
-      ws.onmessage = (msg) => {
-        if (cancelled || gen !== connectGen.current) return;
-        let data;
-        try {
-          data = JSON.parse(String(msg.data));
-        } catch {
-          return;
-        }
-        if (typeof data?.type !== "string") return;
-        if (data.type === "pong") return;
-        onEventRef.current(data);
-      };
-      ws.onclose = () => {
-        if (cancelled || gen !== connectGen.current) return;
-        socket = null;
-        scheduleReconnect();
-      };
-      ws.onerror = () => {
-      };
+    let joinedKey = null;
+    const listener = (event) => onEventRef.current(event);
+    const resolver = () => getWsUrlRef.current();
+    const join = async () => {
+      if (cancelled || joinedKey) return;
+      const url = await resolver();
+      if (cancelled || !url) return;
+      joinedKey = channelKeyFromUrl(url);
+      joinChannel(joinedKey, url, resolver, reconnectDelayMs, listener);
     };
     const onVisibility = () => {
       if (document.visibilityState !== "visible" || cancelled) return;
-      if (!socket || socket.readyState === WebSocket.CLOSED) {
-        void connect();
-      }
+      if (!joinedKey) void join();
     };
-    void connect();
+    void join();
     document.addEventListener("visibilitychange", onVisibility);
     return () => {
       cancelled = true;
-      connectGen.current += 1;
-      clearReconnect();
       document.removeEventListener("visibilitychange", onVisibility);
-      if (socket) {
-        try {
-          socket.close();
-        } catch {
-        }
-        socket = null;
-      }
+      if (joinedKey) leaveChannel(joinedKey, listener);
     };
   }, [enabled, reconnectDelayMs]);
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map