@djangocfg/centrifugo 2.1.110 → 2.1.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/centrifugo",
-  "version": "2.1.110",
+  "version": "2.1.112",
   "description": "Production-ready Centrifugo WebSocket client for React with real-time subscriptions, RPC patterns, and connection state management",
   "keywords": [
     "centrifugo",
@@ -63,10 +63,11 @@
     "centrifuge": "^5.2.2"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.110",
-    "@djangocfg/ui-core": "^2.1.110",
-    "@djangocfg/ui-tools": "^2.1.110",
-    "@djangocfg/layouts": "^2.1.110",
+    "@djangocfg/api": "^2.1.112",
+    "@djangocfg/i18n": "^2.1.112",
+    "@djangocfg/ui-core": "^2.1.112",
+    "@djangocfg/ui-tools": "^2.1.112",
+    "@djangocfg/layouts": "^2.1.112",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -74,11 +75,12 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.110",
-    "@djangocfg/layouts": "^2.1.110",
-    "@djangocfg/typescript-config": "^2.1.110",
-    "@djangocfg/ui-core": "^2.1.110",
-    "@djangocfg/ui-tools": "^2.1.110",
+    "@djangocfg/api": "^2.1.112",
+    "@djangocfg/i18n": "^2.1.112",
+    "@djangocfg/layouts": "^2.1.112",
+    "@djangocfg/typescript-config": "^2.1.112",
+    "@djangocfg/ui-core": "^2.1.112",
+    "@djangocfg/ui-tools": "^2.1.112",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/CentrifugoMonitor/CentrifugoMonitor.tsx

@@ -7,8 +7,9 @@
 
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui-core/components';
 
 import { ConnectionStatus } from '../ConnectionStatus';
@@ -54,6 +55,14 @@ export function CentrifugoMonitor({
   onSubscriptionClick,
   className = '',
 }: CentrifugoMonitorProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    connection: t('centrifugo.tabs.connection'),
+    messages: t('centrifugo.tabs.messages'),
+    subscriptions: t('centrifugo.tabs.subscriptions'),
+  }), [t]);
+
   // Minimal variant - only connection status
   if (variant === 'minimal') {
     return (
@@ -86,9 +95,9 @@ export function CentrifugoMonitor({
 
   // Full variant - tabs with all features
   const tabsToShow = [
-    showConnectionStatus && { value: 'connection', label: 'Connection' },
-    showMessagesFeed && { value: 'messages', label: 'Messages' },
-    showSubscriptions && { value: 'subscriptions', label: 'Subscriptions' },
+    showConnectionStatus && { value: 'connection', label: labels.connection },
+    showMessagesFeed && { value: 'messages', label: labels.messages },
+    showSubscriptions && { value: 'subscriptions', label: labels.subscriptions },
   ].filter(Boolean) as { value: string; label: string }[];
 
   if (tabsToShow.length === 0) {

package/src/components/CentrifugoMonitor/CentrifugoMonitorDialog.tsx

@@ -8,8 +8,9 @@
 'use client';
 
 import { Activity } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { useEventListener } from '@djangocfg/ui-core';
 import {
     Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle
@@ -23,9 +24,15 @@ import { CentrifugoMonitor } from './CentrifugoMonitor';
 // ─────────────────────────────────────────────────────────────────────────
 
 export function CentrifugoMonitorDialog() {
+  const t = useTypedT<I18nTranslations>();
   const [open, setOpen] = useState(false);
   const [variant, setVariant] = useState<'compact' | 'full' | 'minimal'>('full');
 
+  const labels = useMemo(() => ({
+    title: t('centrifugo.monitor.title'),
+    description: t('centrifugo.monitor.description'),
+  }), [t]);
+
   // Listen for dialog open event
   useEventListener<typeof CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG, OpenMonitorDialogPayload>(
     CENTRIFUGO_MONITOR_EVENTS.OPEN_MONITOR_DIALOG,
@@ -58,10 +65,10 @@ export function CentrifugoMonitorDialog() {
         <SheetHeader>
           <SheetTitle className="flex items-center gap-2">
             <Activity className="h-5 w-5" />
-            Centrifugo Monitor
+            {labels.title}
           </SheetTitle>
           <SheetDescription>
-            Real-time WebSocket monitoring and debugging
+            {labels.description}
           </SheetDescription>
         </SheetHeader>
 

package/src/components/CentrifugoMonitor/CentrifugoMonitorFAB.tsx

@@ -8,7 +8,9 @@
 'use client';
 
 import { Activity } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 
 import { emitOpenMonitorDialog, OpenMonitorDialogPayload} from '../../events';
 
@@ -31,6 +33,11 @@ export function CentrifugoMonitorFAB({
   size = 'md',
   variant = 'full',
 }: CentrifugoMonitorFABProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    openMonitor: t('centrifugo.monitor.openMonitor'),
+  }), [t]);
 
   // Position styles
   const positionStyles = {
@@ -67,7 +74,7 @@ export function CentrifugoMonitorFAB({
         ...sizeStyles[size],
         zIndex: 9999,
       }}
-      aria-label="Open Centrifugo Monitor"
+      aria-label={labels.openMonitor}
     >
       <Activity className={iconSizes[size]} />
     </button>

package/src/components/CentrifugoMonitor/CentrifugoMonitorWidget.tsx

@@ -8,8 +8,9 @@
 'use client';
 
 import { Activity, Maximize2 } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button, Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
 
 import { emitOpenMonitorDialog } from '../../events';
@@ -30,10 +31,18 @@ export interface CentrifugoMonitorWidgetProps {
 // ─────────────────────────────────────────────────────────────────────────
 
 export function CentrifugoMonitorWidget({
-  title = 'WebSocket Monitor',
+  title,
   showExpandButton = true,
   className = '',
 }: CentrifugoMonitorWidgetProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    widgetTitle: t('centrifugo.monitor.widgetTitle'),
+  }), [t]);
+
+  const displayTitle = title ?? labels.widgetTitle;
+
   const handleExpand = () => {
     emitOpenMonitorDialog({ variant: 'full' });
   };
@@ -43,7 +52,7 @@ export function CentrifugoMonitorWidget({
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium flex items-center gap-2">
           <Activity className="h-4 w-4" />
-          {title}
+          {displayTitle}
         </CardTitle>
         {showExpandButton && (
           <Button

package/src/components/ConnectionStatus/ConnectionStatus.tsx

@@ -9,8 +9,9 @@
 
 import { Clock, Radio, Wifi, WifiOff } from 'lucide-react';
 import moment from 'moment';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Badge } from '@djangocfg/ui-core/components';
 
 import { getConsolaLogger } from '../../core/logger/consolaLogger';
@@ -39,11 +40,20 @@ export function ConnectionStatus({
   showSubscriptions = false,
   className = '',
 }: ConnectionStatusProps) {
+  const t = useTypedT<I18nTranslations>();
   const { isConnected, client } = useCentrifugo();
   const [connectionTime, setConnectionTime] = useState<moment.Moment | null>(null);
   const [uptime, setUptime] = useState<string>('');
   const [activeSubscriptions, setActiveSubscriptions] = useState<number>(0);
 
+  const labels = useMemo(() => ({
+    connected: t('centrifugo.status.connected'),
+    disconnected: t('centrifugo.status.disconnected'),
+    uptime: t('centrifugo.status.uptime'),
+    subscriptions: t('centrifugo.status.subscriptions'),
+    realtimeUnavailable: t('centrifugo.status.realtimeUnavailable'),
+  }), [t]);
+
   // Track connection time
   useEffect(() => {
     if (isConnected && !connectionTime) {
@@ -114,7 +124,7 @@ export function ConnectionStatus({
         className={`flex items-center gap-1 ${isConnected ? 'animate-pulse' : ''} ${className}`}
       >
         <span className={`h-2 w-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-        {isConnected ? 'Connected' : 'Disconnected'}
+        {isConnected ? labels.connected : labels.disconnected}
       </Badge>
     );
   }
@@ -129,7 +139,7 @@ export function ConnectionStatus({
           <WifiOff className="h-4 w-4 text-red-600" />
         )}
         <span className="text-sm font-medium">
-          {isConnected ? 'Connected' : 'Disconnected'}
+          {isConnected ? labels.connected : labels.disconnected}
         </span>
         {showUptime && uptime && (
           <span className="text-xs text-muted-foreground">({uptime})</span>
@@ -154,7 +164,7 @@ export function ConnectionStatus({
           className={`flex items-center gap-1 ${isConnected ? 'animate-pulse' : ''}`}
         >
           <span className={`h-2 w-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-          {isConnected ? 'Connected' : 'Disconnected'}
+          {isConnected ? labels.connected : labels.disconnected}
         </Badge>
       </div>
 
@@ -166,7 +176,7 @@ export function ConnectionStatus({
             <div className="flex items-center justify-between text-xs">
               <span className="text-muted-foreground flex items-center gap-1">
                 <Clock className="h-3 w-3" />
-                Uptime:
+                {labels.uptime}
               </span>
               <span className="font-mono font-medium">{uptime}</span>
             </div>
@@ -177,7 +187,7 @@ export function ConnectionStatus({
             <div className="flex items-center justify-between text-xs">
               <span className="text-muted-foreground flex items-center gap-1">
                 <Radio className="h-3 w-3" />
-                Subscriptions:
+                {labels.subscriptions}
               </span>
               <span className="font-mono font-medium">{activeSubscriptions}</span>
             </div>
@@ -185,7 +195,7 @@ export function ConnectionStatus({
         </div>
       ) : (
         <div className="text-xs text-muted-foreground p-2 rounded bg-red-50 dark:bg-red-950/20">
-          Real-time features unavailable
+          {labels.realtimeUnavailable}
         </div>
       )}
     </div>

package/src/components/MessagesFeed/MessageFilters.tsx

@@ -7,8 +7,9 @@
 'use client';
 
 import { Filter, Search, X } from 'lucide-react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Badge, Button, Input } from '@djangocfg/ui-core/components';
 
 import type { MessageFilters as MessageFiltersType } from './types';
@@ -34,6 +35,18 @@ export function MessageFilters({
   autoScroll,
   onAutoScrollChange,
 }: MessageFiltersProps) {
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    title: t('centrifugo.filters.title'),
+    active: t('centrifugo.filters.active'),
+    clear: t('centrifugo.filters.clear'),
+    searchMessages: t('centrifugo.filters.searchMessages'),
+    level: t('centrifugo.filters.level'),
+    type: t('centrifugo.filters.type'),
+    autoScrollToLatest: t('centrifugo.filters.autoScrollToLatest'),
+  }), [t]);
+
   const hasActiveFilters =
     (filters.channels && filters.channels.length > 0) ||
     (filters.types && filters.types.length > 0) ||
@@ -78,17 +91,17 @@ export function MessageFilters({
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Filter className="h-4 w-4 text-muted-foreground" />
-          <span className="text-sm font-medium">Filters</span>
+          <span className="text-sm font-medium">{labels.title}</span>
           {hasActiveFilters && (
             <Badge variant="secondary" className="text-xs">
-              Active
+              {labels.active}
             </Badge>
           )}
         </div>
         {hasActiveFilters && (
           <Button size="sm" variant="ghost" onClick={handleClearFilters}>
             <X className="h-3 w-3 mr-1" />
-            Clear
+            {labels.clear}
           </Button>
         )}
       </div>
@@ -98,7 +111,7 @@ export function MessageFilters({
         <Search className="h-4 w-4 text-muted-foreground" />
         <Input
           type="text"
-          placeholder="Search messages..."
+          placeholder={labels.searchMessages}
           value={filters.searchQuery || ''}
           onChange={handleSearchChange}
           className="flex-1"
@@ -107,7 +120,7 @@ export function MessageFilters({
 
       {/* Level Filters */}
       <div className="space-y-2">
-        <span className="text-xs text-muted-foreground">Level:</span>
+        <span className="text-xs text-muted-foreground">{labels.level}</span>
         <div className="flex flex-wrap gap-2">
           {(['info', 'success', 'warning', 'error'] as const).map((level) => {
             const isActive = filters.levels?.includes(level);
@@ -127,7 +140,7 @@ export function MessageFilters({
 
       {/* Type Filters */}
       <div className="space-y-2">
-        <span className="text-xs text-muted-foreground">Type:</span>
+        <span className="text-xs text-muted-foreground">{labels.type}</span>
         <div className="flex flex-wrap gap-2">
           {(['connection', 'subscription', 'publication', 'unsubscription', 'error', 'system'] as const).map((type) => {
             const isActive = filters.types?.includes(type);
@@ -155,7 +168,7 @@ export function MessageFilters({
               onChange={(e) => onAutoScrollChange(e.target.checked)}
               className="h-4 w-4 rounded border-gray-300"
             />
-            <span>Auto-scroll to latest</span>
+            <span>{labels.autoScrollToLatest}</span>
           </label>
         </div>
       )}

package/src/components/MessagesFeed/MessagesFeed.tsx

@@ -13,6 +13,7 @@ import {
 import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Badge, Button, Card, CardContent, CardHeader, CardTitle, ScrollArea
 } from '@djangocfg/ui-core/components';
@@ -35,7 +36,15 @@ export function MessagesFeed({
   onMessageClick,
   className = '',
 }: MessagesFeedProps) {
+  const t = useTypedT<I18nTranslations>();
   const { isConnected, client } = useCentrifugo();
+
+  const labels = useMemo(() => ({
+    title: t('centrifugo.feed.title'),
+    noMessages: t('centrifugo.feed.noMessages'),
+    pausedClickToResume: t('centrifugo.feed.pausedClickToResume'),
+    viewData: t('centrifugo.feed.viewData'),
+  }), [t]);
   const [messages, setMessages] = useState<CentrifugoMessage[]>([]);
   const [isPaused, setIsPaused] = useState(false);
   const [autoScroll, setAutoScroll] = useState(initialAutoScroll);
@@ -273,7 +282,7 @@ export function MessagesFeed({
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2">
             <Activity className="h-5 w-5" />
-            Messages Feed
+            {labels.title}
             <Badge variant="outline">{filteredMessages.length}</Badge>
           </CardTitle>
 
@@ -326,7 +335,7 @@ export function MessagesFeed({
             <div className="flex flex-col items-center justify-center py-12 text-center">
               <Activity className="h-12 w-12 text-muted-foreground mb-4" />
               <p className="text-sm text-muted-foreground">
-                {isPaused ? 'Paused - Click play to resume' : 'No messages yet'}
+                {isPaused ? labels.pausedClickToResume : labels.noMessages}
               </p>
             </div>
           ) : (
@@ -359,7 +368,7 @@ export function MessagesFeed({
                       {msg.formattedData && (
                         <details className="text-xs">
                           <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
-                            View data
+                            {labels.viewData}
                           </summary>
                           <pre className="mt-2 p-2 bg-muted rounded overflow-x-auto">
                             {msg.formattedData}

package/src/components/SubscriptionsList/SubscriptionsList.tsx

@@ -8,8 +8,9 @@
 
 import { Subscription, SubscriptionState } from 'centrifuge';
 import { Radio, RefreshCw, Trash2 } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Badge, Button, Card, CardContent, CardHeader, CardTitle, ScrollArea
 } from '@djangocfg/ui-core/components';
@@ -43,9 +44,16 @@ export function SubscriptionsList({
   onSubscriptionClick,
   className = '',
 }: SubscriptionsListProps) {
+  const t = useTypedT<I18nTranslations>();
   const { isConnected, client } = useCentrifugo();
   const [subscriptions, setSubscriptions] = useState<SubscriptionItem[]>([]);
 
+  const labels = useMemo(() => ({
+    title: t('centrifugo.subscriptionsList.title'),
+    notConnected: t('centrifugo.subscriptionsList.notConnected'),
+    noActiveSubscriptions: t('centrifugo.subscriptionsList.noActiveSubscriptions'),
+  }), [t]);
+
   // Update subscriptions list
   const updateSubscriptions = () => {
     if (!client || !isConnected) {
@@ -113,7 +121,7 @@ export function SubscriptionsList({
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2">
             <Radio className="h-5 w-5" />
-            Active Subscriptions
+            {labels.title}
             <Badge variant="outline">{subscriptions.length}</Badge>
           </CardTitle>
 
@@ -128,11 +136,11 @@ export function SubscriptionsList({
       <CardContent>
         {!isConnected ? (
           <div className="text-center py-8 text-sm text-muted-foreground">
-            Not connected to Centrifugo
+            {labels.notConnected}
           </div>
         ) : subscriptions.length === 0 ? (
           <div className="text-center py-8 text-sm text-muted-foreground">
-            No active subscriptions
+            {labels.noActiveSubscriptions}
           </div>
         ) : (
           <ScrollArea className="h-[300px]">

package/src/debug/DebugPanel/DebugPanel.tsx

@@ -8,8 +8,9 @@
 'use client';
 
 import { Bug } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Tabs, TabsContent, TabsList,
     TabsTrigger
@@ -24,9 +25,19 @@ import { SubscriptionsTab } from '../SubscriptionsTab';
 // ─────────────────────────────────────────────────────────────────────────
 
 export function DebugPanel() {
+  const t = useTypedT<I18nTranslations>();
   const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('connection');
 
+  const labels = useMemo(() => ({
+    title: t('centrifugo.debug.title'),
+    description: t('centrifugo.debug.description'),
+    openDebugPanel: t('centrifugo.debug.openDebugPanel'),
+    tabConnection: t('centrifugo.debug.tabConnection'),
+    tabLogs: t('centrifugo.debug.tabLogs'),
+    tabSubscriptions: t('centrifugo.debug.tabSubscriptions'),
+  }), [t]);
+
   return (
     <>
       {/* FAB Button (fixed bottom-left) */}
@@ -41,7 +52,7 @@ export function DebugPanel() {
           height: '56px',
           zIndex: 9999,
         }}
-        aria-label="Open Centrifugo Debug Panel"
+        aria-label={labels.openDebugPanel}
       >
         <Bug className="h-6 w-6" />
       </button>
@@ -50,18 +61,18 @@ export function DebugPanel() {
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
         <SheetContent side="right" className="w-full sm:max-w-2xl">
           <SheetHeader>
-            <SheetTitle>Centrifugo Debug</SheetTitle>
+            <SheetTitle>{labels.title}</SheetTitle>
             <SheetDescription>
-              WebSocket connection status, logs, and subscriptions
+              {labels.description}
             </SheetDescription>
           </SheetHeader>
 
           {/* Tabs */}
           <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
             <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="connection">Connection</TabsTrigger>
-              <TabsTrigger value="logs">Logs</TabsTrigger>
-              <TabsTrigger value="subscriptions">Subscriptions</TabsTrigger>
+              <TabsTrigger value="connection">{labels.tabConnection}</TabsTrigger>
+              <TabsTrigger value="logs">{labels.tabLogs}</TabsTrigger>
+              <TabsTrigger value="subscriptions">{labels.tabSubscriptions}</TabsTrigger>
             </TabsList>
 
             <TabsContent value="connection" className="mt-4">