@djangocfg/centrifugo 2.1.101 → 2.1.103

package/dist/components.mjs

@@ -0,0 +1,857 @@
+import { Filter, X, Search, Activity, Play, Pause, Trash2, Download, Radio, RefreshCw, Wifi, WifiOff, Clock, Maximize2, Circle, Info, CheckCircle2, AlertCircle } from 'lucide-react';
+import moment from 'moment';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import { Badge, Button, Input, Card, CardHeader, CardTitle, CardContent, ScrollArea, Tabs, TabsList, TabsTrigger, TabsContent, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@djangocfg/ui-nextjs';
+import { createConsola } from 'consola';
+import '@djangocfg/api/auth';
+import { useEventListener, events } from '@djangocfg/ui-core/hooks';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'centrifuge';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var consolaLogger = createConsola({
+  level: 4 ,
+  formatOptions: {
+    colors: true,
+    date: false,
+    compact: false
+  }
+}).withTag("[Centrifugo]");
+function getConsolaLogger(tag) {
+  const consola = consolaLogger.withTag(`[${tag}]`);
+  return {
+    debug: /* @__PURE__ */ __name((message, data) => consola.debug(message, data || ""), "debug"),
+    info: /* @__PURE__ */ __name((message, data) => consola.info(message, data || ""), "info"),
+    success: /* @__PURE__ */ __name((message, data) => consola.success(message, data || ""), "success"),
+    warning: /* @__PURE__ */ __name((message, data) => consola.warn(message, data || ""), "warning"),
+    error: /* @__PURE__ */ __name((message, error) => consola.error(message, error || ""), "error")
+  };
+}
+__name(getConsolaLogger, "getConsolaLogger");
+var CENTRIFUGO_MONITOR_EVENTS = {
+  OPEN_MONITOR_DIALOG: "CENTRIFUGO_OPEN_MONITOR_DIALOG",
+  CLOSE_MONITOR_DIALOG: "CENTRIFUGO_CLOSE_MONITOR_DIALOG"
+};
+var emitOpenMonitorDialog = /* @__PURE__ */ __name((payload) => {
+  events.publish({
+    type: CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG,
+    payload: payload || {}
+  });
+}, "emitOpenMonitorDialog");
+function MessageFilters({
+  filters,
+  onFiltersChange,
+  autoScroll,
+  onAutoScrollChange
+}) {
+  const hasActiveFilters = filters.channels && filters.channels.length > 0 || filters.types && filters.types.length > 0 || filters.levels && filters.levels.length > 0 || filters.searchQuery;
+  const handleClearFilters = /* @__PURE__ */ __name(() => {
+    onFiltersChange({});
+  }, "handleClearFilters");
+  const handleSearchChange = /* @__PURE__ */ __name((e) => {
+    onFiltersChange({ ...filters, searchQuery: e.target.value });
+  }, "handleSearchChange");
+  const handleToggleLevel = /* @__PURE__ */ __name((level) => {
+    const currentLevels = filters.levels || [];
+    const newLevels = currentLevels.includes(level) ? currentLevels.filter((l) => l !== level) : [...currentLevels, level];
+    onFiltersChange({
+      ...filters,
+      levels: newLevels.length > 0 ? newLevels : void 0
+    });
+  }, "handleToggleLevel");
+  const handleToggleType = /* @__PURE__ */ __name((type) => {
+    const currentTypes = filters.types || [];
+    const newTypes = currentTypes.includes(type) ? currentTypes.filter((t) => t !== type) : [...currentTypes, type];
+    onFiltersChange({
+      ...filters,
+      types: newTypes.length > 0 ? newTypes : void 0
+    });
+  }, "handleToggleType");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3 border rounded-lg bg-muted/30", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Filters" }),
+        hasActiveFilters && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Active" })
+      ] }),
+      hasActiveFilters && /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "ghost", onClick: handleClearFilters, children: [
+        /* @__PURE__ */ jsx(X, { className: "h-3 w-3 mr-1" }),
+        "Clear"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          placeholder: "Search messages...",
+          value: filters.searchQuery || "",
+          onChange: handleSearchChange,
+          className: "flex-1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Level:" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["info", "success", "warning", "error"].map((level) => {
+        const isActive = filters.levels?.includes(level);
+        return /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: isActive ? "default" : "outline",
+            className: "cursor-pointer",
+            onClick: () => handleToggleLevel(level),
+            children: level
+          },
+          level
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Type:" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["connection", "subscription", "publication", "unsubscription", "error", "system"].map((type) => {
+        const isActive = filters.types?.includes(type);
+        return /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: isActive ? "default" : "outline",
+            className: "cursor-pointer",
+            onClick: () => handleToggleType(type),
+            children: type
+          },
+          type
+        );
+      }) })
+    ] }),
+    onAutoScrollChange && /* @__PURE__ */ jsx("div", { className: "pt-2 border-t", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: autoScroll,
+          onChange: (e) => onAutoScrollChange(e.target.checked),
+          className: "h-4 w-4 rounded border-gray-300"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: "Auto-scroll to latest" })
+    ] }) })
+  ] });
+}
+__name(MessageFilters, "MessageFilters");
+function MessagesFeed({
+  maxMessages = 100,
+  showFilters = true,
+  showControls = true,
+  channels = [],
+  autoScroll: initialAutoScroll = true,
+  onMessageClick,
+  className = ""
+}) {
+  const { isConnected, client } = useCentrifugo();
+  const [messages, setMessages] = useState([]);
+  const [isPaused, setIsPaused] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(initialAutoScroll);
+  const [filters, setFilters] = useState({
+    channels: channels.length > 0 ? channels : void 0
+  });
+  const scrollRef = useRef(null);
+  const addMessage = useCallback(
+    (message) => {
+      if (isPaused) return;
+      setMessages((prev) => {
+        const newMessages = [message, ...prev];
+        return newMessages.slice(0, maxMessages);
+      });
+    },
+    [isPaused, maxMessages]
+  );
+  useEffect(() => {
+    if (!client) return;
+    const centrifuge = client.getCentrifuge();
+    const handleConnected = /* @__PURE__ */ __name(() => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `conn-${now}`,
+        timestamp: now,
+        type: "connection",
+        level: "success",
+        message: "Connected to Centrifugo"
+      });
+    }, "handleConnected");
+    const handleDisconnected = /* @__PURE__ */ __name(() => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `disconn-${now}`,
+        timestamp: now,
+        type: "connection",
+        level: "error",
+        message: "Disconnected from Centrifugo"
+      });
+    }, "handleDisconnected");
+    const handleError = /* @__PURE__ */ __name((ctx) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `error-${now}`,
+        timestamp: now,
+        type: "error",
+        level: "error",
+        message: ctx.error?.message || "Connection error",
+        data: ctx
+      });
+    }, "handleError");
+    centrifuge.on("connected", handleConnected);
+    centrifuge.on("disconnected", handleDisconnected);
+    centrifuge.on("error", handleError);
+    return () => {
+      centrifuge.off("connected", handleConnected);
+      centrifuge.off("disconnected", handleDisconnected);
+      centrifuge.off("error", handleError);
+    };
+  }, [client, addMessage]);
+  useEffect(() => {
+    if (!client) return;
+    const centrifuge = client.getCentrifuge();
+    const handleSubscribed = /* @__PURE__ */ __name((ctx) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `sub-${now}`,
+        timestamp: now,
+        type: "subscription",
+        level: "info",
+        channel: ctx.channel,
+        message: `Subscribed to ${ctx.channel}`,
+        data: ctx
+      });
+    }, "handleSubscribed");
+    const handleUnsubscribed = /* @__PURE__ */ __name((ctx) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `unsub-${now}`,
+        timestamp: now,
+        type: "unsubscription",
+        level: "info",
+        channel: ctx.channel,
+        message: `Unsubscribed from ${ctx.channel}`,
+        data: ctx
+      });
+    }, "handleUnsubscribed");
+    const handlePublication = /* @__PURE__ */ __name((ctx) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `pub-${now}-${Math.random()}`,
+        timestamp: now,
+        type: "publication",
+        level: "success",
+        channel: ctx.channel,
+        message: `Message from ${ctx.channel}`,
+        data: ctx.data
+      });
+    }, "handlePublication");
+    centrifuge.on("subscribed", handleSubscribed);
+    centrifuge.on("unsubscribed", handleUnsubscribed);
+    centrifuge.on("publication", handlePublication);
+    return () => {
+      centrifuge.off("subscribed", handleSubscribed);
+      centrifuge.off("unsubscribed", handleUnsubscribed);
+      centrifuge.off("publication", handlePublication);
+    };
+  }, [client, addMessage]);
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [messages, autoScroll]);
+  const filteredMessages = useMemo(() => {
+    return messages.filter((msg) => {
+      if (filters.channels && filters.channels.length > 0) {
+        if (!msg.channel || !filters.channels.includes(msg.channel)) {
+          return false;
+        }
+      }
+      if (filters.types && filters.types.length > 0) {
+        if (!filters.types.includes(msg.type)) {
+          return false;
+        }
+      }
+      if (filters.levels && filters.levels.length > 0) {
+        if (!filters.levels.includes(msg.level)) {
+          return false;
+        }
+      }
+      if (filters.searchQuery) {
+        const query = filters.searchQuery.toLowerCase();
+        const searchableText = [
+          msg.message,
+          msg.channel,
+          JSON.stringify(msg.data)
+        ].filter(Boolean).join(" ").toLowerCase();
+        if (!searchableText.includes(query)) {
+          return false;
+        }
+      }
+      return true;
+    }).map((msg) => ({
+      ...msg,
+      formattedTime: moment.utc(msg.timestamp).format("HH:mm:ss"),
+      formattedData: msg.data ? JSON.stringify(msg.data, null, 2) : null
+    }));
+  }, [messages, filters]);
+  const handleClear = /* @__PURE__ */ __name(() => {
+    setMessages([]);
+  }, "handleClear");
+  const handleDownload = /* @__PURE__ */ __name(() => {
+    const json = JSON.stringify(filteredMessages, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `centrifugo-messages-${moment.utc().format("YYYY-MM-DD-HHmmss")}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, "handleDownload");
+  const getLevelIcon = /* @__PURE__ */ __name((level) => {
+    switch (level) {
+      case "error":
+        return /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 text-red-500" });
+      case "warning":
+        return /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 text-yellow-500" });
+      case "success":
+        return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-green-500" });
+      case "info":
+        return /* @__PURE__ */ jsx(Info, { className: "h-4 w-4 text-blue-500" });
+      default:
+        return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4 text-gray-500" });
+    }
+  }, "getLevelIcon");
+  const getLevelVariant = /* @__PURE__ */ __name((level) => {
+    switch (level) {
+      case "error":
+        return "destructive";
+      case "warning":
+        return "secondary";
+      case "success":
+        return "outline";
+      default:
+        return "default";
+    }
+  }, "getLevelVariant");
+  return /* @__PURE__ */ jsxs(Card, { className, children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5" }),
+        "Messages Feed",
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", children: filteredMessages.length })
+      ] }),
+      showControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: () => setIsPaused(!isPaused),
+            children: isPaused ? /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Pause, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: handleClear,
+            disabled: messages.length === 0,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: handleDownload,
+            disabled: filteredMessages.length === 0,
+            children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      showFilters && /* @__PURE__ */ jsx(
+        MessageFilters,
+        {
+          filters,
+          onFiltersChange: setFilters,
+          autoScroll,
+          onAutoScrollChange: setAutoScroll
+        }
+      ),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-[400px]", viewportRef: scrollRef, children: filteredMessages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "h-12 w-12 text-muted-foreground mb-4" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isPaused ? "Paused - Click play to resume" : "No messages yet" })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filteredMessages.map((msg) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "p-3 rounded border hover:bg-muted/50 transition-colors cursor-pointer",
+          onClick: () => onMessageClick?.(msg),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: getLevelIcon(msg.level) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsx(Badge, { variant: getLevelVariant(msg.level), className: "text-xs", children: msg.type }),
+                msg.channel && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: msg.channel }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: msg.formattedTime })
+              ] }),
+              msg.message && /* @__PURE__ */ jsx("p", { className: "text-sm break-words", children: msg.message }),
+              msg.formattedData && /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
+                /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-muted-foreground hover:text-foreground", children: "View data" }),
+                /* @__PURE__ */ jsx("pre", { className: "mt-2 p-2 bg-muted rounded overflow-x-auto", children: msg.formattedData })
+              ] })
+            ] })
+          ] })
+        },
+        msg.id
+      )) }) })
+    ] })
+  ] });
+}
+__name(MessagesFeed, "MessagesFeed");
+var logger = getConsolaLogger("SubscriptionsList");
+function SubscriptionsList({
+  showControls = true,
+  onSubscriptionClick,
+  className = ""
+}) {
+  const { isConnected, client } = useCentrifugo();
+  const [subscriptions, setSubscriptions] = useState([]);
+  const updateSubscriptions = /* @__PURE__ */ __name(() => {
+    if (!client || !isConnected) {
+      setSubscriptions([]);
+      return;
+    }
+    try {
+      const centrifuge = client.getCentrifuge();
+      const subs = centrifuge.subscriptions();
+      const subscriptionsList = [];
+      for (const [channel, sub] of Object.entries(subs)) {
+        subscriptionsList.push({
+          channel,
+          state: sub.state
+        });
+      }
+      setSubscriptions(subscriptionsList);
+    } catch (error) {
+      logger.error("Failed to get subscriptions", error);
+      setSubscriptions([]);
+    }
+  }, "updateSubscriptions");
+  useEffect(() => {
+    updateSubscriptions();
+    if (!client) return;
+    const centrifuge = client.getCentrifuge();
+    const handleSubscribed = /* @__PURE__ */ __name(() => updateSubscriptions(), "handleSubscribed");
+    const handleUnsubscribed = /* @__PURE__ */ __name(() => updateSubscriptions(), "handleUnsubscribed");
+    centrifuge.on("subscribed", handleSubscribed);
+    centrifuge.on("unsubscribed", handleUnsubscribed);
+    const interval = setInterval(updateSubscriptions, 3e3);
+    return () => {
+      centrifuge.off("subscribed", handleSubscribed);
+      centrifuge.off("unsubscribed", handleUnsubscribed);
+      clearInterval(interval);
+    };
+  }, [client, isConnected]);
+  const handleUnsubscribe = /* @__PURE__ */ __name(async (channel) => {
+    if (!client) return;
+    try {
+      await client.unsubscribe(channel);
+      updateSubscriptions();
+    } catch (error) {
+      logger.error("Failed to unsubscribe", error);
+    }
+  }, "handleUnsubscribe");
+  return /* @__PURE__ */ jsxs(Card, { className, children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Radio, { className: "h-5 w-5" }),
+        "Active Subscriptions",
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", children: subscriptions.length })
+      ] }),
+      showControls && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: updateSubscriptions, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardContent, { children: !isConnected ? /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-sm text-muted-foreground", children: "Not connected to Centrifugo" }) : subscriptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-sm text-muted-foreground", children: "No active subscriptions" }) : /* @__PURE__ */ jsx(ScrollArea, { className: "h-[300px]", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: subscriptions.map((sub) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between p-3 rounded border hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex-1 min-w-0 cursor-pointer",
+              onClick: () => onSubscriptionClick?.(sub.channel),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: sub.state }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-mono truncate", children: sub.channel })
+              ] })
+            }
+          ),
+          showControls && /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              onClick: () => handleUnsubscribe(sub.channel),
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-destructive" })
+            }
+          )
+        ]
+      },
+      sub.channel
+    )) }) }) })
+  ] });
+}
+__name(SubscriptionsList, "SubscriptionsList");
+function CentrifugoMonitor({
+  variant = "full",
+  showConnectionStatus = true,
+  showMessagesFeed = true,
+  showSubscriptions = true,
+  showFilters = true,
+  showControls = true,
+  maxMessages = 100,
+  channels = [],
+  autoScroll = true,
+  onMessageClick,
+  onSubscriptionClick,
+  className = ""
+}) {
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ConnectionStatus, { variant: "detailed", showUptime: true, showSubscriptions: true }) });
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
+      showConnectionStatus && /* @__PURE__ */ jsx(ConnectionStatus, { variant: "detailed", showUptime: true, showSubscriptions: true }),
+      showMessagesFeed && /* @__PURE__ */ jsx(
+        MessagesFeed,
+        {
+          maxMessages,
+          showFilters: false,
+          showControls,
+          channels,
+          autoScroll,
+          onMessageClick
+        }
+      )
+    ] });
+  }
+  const tabsToShow = [
+    showConnectionStatus && { value: "connection", label: "Connection" },
+    showMessagesFeed && { value: "messages", label: "Messages" },
+    showSubscriptions && { value: "subscriptions", label: "Subscriptions" }
+  ].filter(Boolean);
+  if (tabsToShow.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: tabsToShow[0].value, children: [
+    /* @__PURE__ */ jsx(TabsList, { className: `grid w-full grid-cols-${tabsToShow.length}`, children: tabsToShow.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }),
+    showConnectionStatus && /* @__PURE__ */ jsx(TabsContent, { value: "connection", className: "mt-4", children: /* @__PURE__ */ jsx(ConnectionStatus, { variant: "detailed", showUptime: true, showSubscriptions: true }) }),
+    showMessagesFeed && /* @__PURE__ */ jsx(TabsContent, { value: "messages", className: "mt-4", children: /* @__PURE__ */ jsx(
+      MessagesFeed,
+      {
+        maxMessages,
+        showFilters,
+        showControls,
+        channels,
+        autoScroll,
+        onMessageClick
+      }
+    ) }),
+    showSubscriptions && /* @__PURE__ */ jsx(TabsContent, { value: "subscriptions", className: "mt-4", children: /* @__PURE__ */ jsx(
+      SubscriptionsList,
+      {
+        showControls,
+        onSubscriptionClick
+      }
+    ) })
+  ] }) });
+}
+__name(CentrifugoMonitor, "CentrifugoMonitor");
+function CentrifugoMonitorDialog() {
+  const [open, setOpen] = useState(false);
+  const [variant, setVariant] = useState("full");
+  useEventListener(
+    CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG,
+    (payload) => {
+      if (payload?.variant) {
+        setVariant(payload.variant);
+      }
+      setOpen(true);
+    }
+  );
+  useEventListener(
+    CENTRIFUGO_MONITOR_EVENTS.CLOSE_MONITOR_DIALOG,
+    () => {
+      setOpen(false);
+    }
+  );
+  const handleClose = /* @__PURE__ */ __name(() => {
+    setOpen(false);
+  }, "handleClose");
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "right",
+      className: "max-w-2xl w-[90vw] sm:w-[672px]",
+      children: [
+        /* @__PURE__ */ jsxs(SheetHeader, { children: [
+          /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5" }),
+            "Centrifugo Monitor"
+          ] }),
+          /* @__PURE__ */ jsx(SheetDescription, { children: "Real-time WebSocket monitoring and debugging" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(CentrifugoMonitor, { variant }) })
+      ]
+    }
+  ) });
+}
+__name(CentrifugoMonitorDialog, "CentrifugoMonitorDialog");
+
+// src/config.ts
+process.env.NEXT_PUBLIC_STATIC_BUILD === "true";
+createContext(void 0);
+var CentrifugoContext = createContext(void 0);
+function useCentrifugo() {
+  const context = useContext(CentrifugoContext);
+  if (context === void 0) {
+    throw new Error("useCentrifugo must be used within a CentrifugoProvider");
+  }
+  return context;
+}
+__name(useCentrifugo, "useCentrifugo");
+var logger2 = getConsolaLogger("ConnectionStatus");
+function ConnectionStatus({
+  variant = "badge",
+  showUptime = false,
+  showSubscriptions = false,
+  className = ""
+}) {
+  const { isConnected, client } = useCentrifugo();
+  const [connectionTime, setConnectionTime] = useState(null);
+  const [uptime, setUptime] = useState("");
+  const [activeSubscriptions, setActiveSubscriptions] = useState(0);
+  useEffect(() => {
+    if (isConnected && !connectionTime) {
+      setConnectionTime(moment.utc());
+    } else if (!isConnected) {
+      setConnectionTime(null);
+    }
+  }, [isConnected, connectionTime]);
+  useEffect(() => {
+    if (!isConnected || !connectionTime) {
+      setUptime("");
+      return;
+    }
+    const updateUptime = /* @__PURE__ */ __name(() => {
+      const now = moment.utc();
+      const duration = moment.duration(now.diff(connectionTime));
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+      if (hours > 0) {
+        setUptime(`${hours}h ${minutes}m`);
+      } else if (minutes > 0) {
+        setUptime(`${minutes}m ${seconds}s`);
+      } else {
+        setUptime(`${seconds}s`);
+      }
+    }, "updateUptime");
+    updateUptime();
+    const interval = setInterval(updateUptime, 1e3);
+    return () => clearInterval(interval);
+  }, [isConnected, connectionTime]);
+  useEffect(() => {
+    if (!client || !isConnected) {
+      setActiveSubscriptions(0);
+      return;
+    }
+    const updateCount = /* @__PURE__ */ __name(() => {
+      try {
+        const centrifuge = client.getCentrifuge();
+        const subs = centrifuge.subscriptions();
+        setActiveSubscriptions(Object.keys(subs).length);
+      } catch (error) {
+        logger2.error("Failed to get active subscriptions", error);
+      }
+    }, "updateCount");
+    updateCount();
+    const interval = setInterval(updateCount, 2e3);
+    return () => clearInterval(interval);
+  }, [client, isConnected]);
+  if (variant === "badge") {
+    return /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: isConnected ? "default" : "destructive",
+        className: `flex items-center gap-1 ${isConnected ? "animate-pulse" : ""} ${className}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}` }),
+          isConnected ? "Connected" : "Disconnected"
+        ]
+      }
+    );
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+      isConnected ? /* @__PURE__ */ jsx(Wifi, { className: "h-4 w-4 text-green-600" }) : /* @__PURE__ */ jsx(WifiOff, { className: "h-4 w-4 text-red-600" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: isConnected ? "Connected" : "Disconnected" }),
+      showUptime && uptime && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "(",
+        uptime,
+        ")"
+      ] }),
+      showSubscriptions && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3" }),
+        activeSubscriptions
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-3 ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: isConnected ? "default" : "destructive",
+        className: `flex items-center gap-1 ${isConnected ? "animate-pulse" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}` }),
+          isConnected ? "Connected" : "Disconnected"
+        ]
+      }
+    ) }),
+    isConnected ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      showUptime && uptime && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+          "Uptime:"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: uptime })
+      ] }),
+      showSubscriptions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3" }),
+          "Subscriptions:"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: activeSubscriptions })
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground p-2 rounded bg-red-50 dark:bg-red-950/20", children: "Real-time features unavailable" })
+  ] });
+}
+__name(ConnectionStatus, "ConnectionStatus");
+function ConnectionStatusCard({
+  showUptime = true,
+  showSubscriptions = true,
+  className = ""
+}) {
+  const { isConnected } = useCentrifugo();
+  const statusColor = isConnected ? "border-green-500" : "border-red-500";
+  const handleClick = /* @__PURE__ */ __name(() => {
+    emitOpenMonitorDialog({ variant: "full" });
+  }, "handleClick");
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: `${statusColor} ${className} cursor-pointer hover:shadow-lg transition-shadow`,
+      style: { borderLeftWidth: "4px" },
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "WebSocket" }),
+          /* @__PURE__ */ jsx("div", { className: isConnected ? "text-green-600" : "text-red-600", children: isConnected ? /* @__PURE__ */ jsx(Wifi, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(WifiOff, { className: "h-4 w-4" }) })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+          ConnectionStatus,
+          {
+            variant: "detailed",
+            showUptime,
+            showSubscriptions
+          }
+        ) })
+      ]
+    }
+  );
+}
+__name(ConnectionStatusCard, "ConnectionStatusCard");
+function CentrifugoMonitorFAB({
+  position = "bottom-left",
+  size = "md",
+  variant = "full"
+}) {
+  const positionStyles = {
+    "bottom-left": { bottom: "1rem", left: "1rem" },
+    "bottom-right": { bottom: "1rem", right: "1rem" },
+    "top-left": { top: "1rem", left: "1rem" },
+    "top-right": { top: "1rem", right: "1rem" }
+  };
+  const sizeStyles = {
+    sm: { width: "48px", height: "48px" },
+    md: { width: "56px", height: "56px" },
+    lg: { width: "64px", height: "64px" }
+  };
+  const iconSizes = {
+    sm: "h-5 w-5",
+    md: "h-6 w-6",
+    lg: "h-7 w-7"
+  };
+  const handleClick = /* @__PURE__ */ __name(() => {
+    emitOpenMonitorDialog({ variant });
+  }, "handleClick");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleClick,
+      className: "rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-all duration-200 flex items-center justify-center hover:scale-110",
+      style: {
+        position: "fixed",
+        ...positionStyles[position],
+        ...sizeStyles[size],
+        zIndex: 9999
+      },
+      "aria-label": "Open Centrifugo Monitor",
+      children: /* @__PURE__ */ jsx(Activity, { className: iconSizes[size] })
+    }
+  );
+}
+__name(CentrifugoMonitorFAB, "CentrifugoMonitorFAB");
+function CentrifugoMonitorWidget({
+  title = "WebSocket Monitor",
+  showExpandButton = true,
+  className = ""
+}) {
+  const handleExpand = /* @__PURE__ */ __name(() => {
+    emitOpenMonitorDialog({ variant: "full" });
+  }, "handleExpand");
+  return /* @__PURE__ */ jsxs(Card, { className, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "text-sm font-medium flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4" }),
+        title
+      ] }),
+      showExpandButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: handleExpand,
+          children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ConnectionStatus, { variant: "detailed", showUptime: true, showSubscriptions: true }) })
+  ] });
+}
+__name(CentrifugoMonitorWidget, "CentrifugoMonitorWidget");
+
+export { CentrifugoMonitor, CentrifugoMonitorDialog, CentrifugoMonitorFAB, CentrifugoMonitorWidget, ConnectionStatus, ConnectionStatusCard, MessageFilters, MessagesFeed, SubscriptionsList };
+//# sourceMappingURL=components.mjs.map
+//# sourceMappingURL=components.mjs.map