feat(live): add Room Event Bus for server-side pub/sub

- Add RoomEventBus for internal server-side events between components
- Add RoomStateManager for typed in-memory room state storage
- Add room event helpers to LiveComponent (onRoomEvent, emitRoomEvent)
- Add typed broadcasts support with discriminated unions
- Add LiveCounter demo component using Room Events
- Add CounterDemo frontend component
- Export new modules from core/server/live/index.ts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: MarcosBrendonDePaula

app/client/src/App.tsx

@@ -3,10 +3,12 @@ import { api } from './lib/eden-api'
 import { FaFire, FaBook, FaGithub } from 'react-icons/fa'
 import { LiveComponentsProvider } from '@/core/client'
 import { FormDemo } from './live/FormDemo'
+import { CounterDemo } from './live/CounterDemo'
 
 function AppContent() {
   const [apiStatus, setApiStatus] = useState<'checking' | 'online' | 'offline'>('checking')
   const [showForm, setShowForm] = useState(false)
+  const [showCounter, setShowCounter] = useState(false)
   const [showApiTest, setShowApiTest] = useState(false)
   const [apiResponse, setApiResponse] = useState<string>('')
   const [isLoading, setIsLoading] = useState(false)
@@ -163,6 +165,23 @@ function AppContent() {
     )
   }
 
+  // Live Counter Demo
+  if (showCounter) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex flex-col items-center justify-center px-4">
+        <div className="mb-8">
+          <button
+            onClick={() => setShowCounter(false)}
+            className="px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 text-white rounded-lg font-medium hover:bg-white/20 transition-all"
+          >
+            ← Voltar
+          </button>
+        </div>
+        <CounterDemo />
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
       <div className="flex flex-col items-center justify-center min-h-screen px-6 text-center">
@@ -223,6 +242,12 @@ function AppContent() {
 
         {/* Action Buttons */}
         <div className="flex flex-wrap gap-4 justify-center">
+          <button
+            onClick={() => setShowCounter(true)}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-emerald-500/50 transition-all"
+          >
+            🔢 Live Counter
+          </button>
           <button
             onClick={() => setShowForm(true)}
             className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/50 transition-all"

app/client/src/live/CounterDemo.tsx

@@ -0,0 +1,110 @@
+// 🔥 CounterDemo - Demonstração do Room Events
+// Contador compartilhado entre todos os clientes
+
+import { Live } from '@/core/client'
+import { LiveCounter, defaultState } from '@server/live/LiveCounter'
+
+export function CounterDemo() {
+  const counter = Live.use(LiveCounter, {
+    room: 'global-counter',
+    initialState: defaultState
+  })
+
+  const handleIncrement = async () => {
+    await counter.increment()
+  }
+
+  const handleDecrement = async () => {
+    await counter.decrement()
+  }
+
+  const handleReset = async () => {
+    await counter.reset()
+  }
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold text-white mb-2 text-center">
+        Contador Compartilhado
+      </h2>
+
+      <p className="text-gray-400 text-sm text-center mb-6">
+        Abra em várias abas - todos veem o mesmo valor!
+      </p>
+
+      {/* Status de conexão */}
+      <div className="flex justify-center gap-4 mb-6">
+        <div className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs ${
+          counter.$connected
+            ? 'bg-emerald-500/20 text-emerald-300'
+            : 'bg-red-500/20 text-red-300'
+        }`}>
+          <div className={`w-2 h-2 rounded-full ${
+            counter.$connected ? 'bg-emerald-400' : 'bg-red-400'
+          }`} />
+          {counter.$connected ? 'Conectado' : 'Desconectado'}
+        </div>
+
+        <div className="flex items-center gap-2 px-3 py-1 rounded-full text-xs bg-blue-500/20 text-blue-300">
+          <span>👥</span>
+          {counter.$state.connectedUsers} usuário(s)
+        </div>
+      </div>
+
+      {/* Contador */}
+      <div className="text-center mb-8">
+        <div className="text-8xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+          {counter.$state.count}
+        </div>
+
+        {counter.$state.lastUpdatedBy && (
+          <p className="text-gray-500 text-sm mt-2">
+            Última atualização: {counter.$state.lastUpdatedBy}
+          </p>
+        )}
+      </div>
+
+      {/* Botões */}
+      <div className="flex gap-4 justify-center">
+        <button
+          onClick={handleDecrement}
+          disabled={counter.$loading}
+          className="w-14 h-14 flex items-center justify-center text-3xl bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-300 rounded-xl transition-all disabled:opacity-50"
+        >
+          −
+        </button>
+
+        <button
+          onClick={handleReset}
+          disabled={counter.$loading}
+          className="px-6 h-14 flex items-center justify-center text-sm bg-gray-500/20 hover:bg-gray-500/30 border border-gray-500/30 text-gray-300 rounded-xl transition-all disabled:opacity-50"
+        >
+          Reset
+        </button>
+
+        <button
+          onClick={handleIncrement}
+          disabled={counter.$loading}
+          className="w-14 h-14 flex items-center justify-center text-3xl bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 text-emerald-300 rounded-xl transition-all disabled:opacity-50"
+        >
+          +
+        </button>
+      </div>
+
+      {/* Loading indicator */}
+      {counter.$loading && (
+        <div className="flex justify-center mt-4">
+          <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+
+      {/* Info */}
+      <div className="mt-8 pt-6 border-t border-white/10">
+        <p className="text-gray-500 text-xs text-center">
+          ✨ Usando <code className="text-purple-400">Room Events</code> -
+          sincronização server-side sem broadcast manual
+        </p>
+      </div>
+    </div>
+  )
+}

app/server/live/LiveCounter.ts

@@ -0,0 +1,65 @@
+// 🔥 LiveCounter - Shared counter using Room Events
+
+import { LiveComponent } from '@core/types/types'
+
+export const defaultState = {
+  count: 0,
+  lastUpdatedBy: null as string | null,
+  connectedUsers: 0
+}
+
+export class LiveCounter extends LiveComponent<typeof defaultState> {
+  static defaultState = defaultState
+  protected roomType = 'counter'
+
+  constructor(initialState: Partial<typeof defaultState>, ws: any, options?: { room?: string; userId?: string }) {
+    super({ ...defaultState, ...initialState }, ws, options)
+
+    this.onRoomEvent<{ count: number; userId: string }>('COUNT_CHANGED', (data) => {
+      this.setState({ count: data.count, lastUpdatedBy: data.userId })
+    })
+
+    this.onRoomEvent<{ connectedUsers: number }>('USER_COUNT_CHANGED', (data) => {
+      this.setState({ connectedUsers: data.connectedUsers })
+    })
+
+    this.notifyUserJoined()
+  }
+
+  private notifyUserJoined() {
+    const newCount = this.state.connectedUsers + 1
+    this.emitRoomEventWithState('USER_COUNT_CHANGED', { connectedUsers: newCount }, { connectedUsers: newCount })
+  }
+
+  async increment() {
+    const newCount = this.state.count + 1
+    this.emitRoomEventWithState('COUNT_CHANGED', { count: newCount, userId: this.userId || 'anonymous' }, {
+      count: newCount,
+      lastUpdatedBy: this.userId || 'anonymous'
+    })
+    return { success: true, count: newCount }
+  }
+
+  async decrement() {
+    const newCount = this.state.count - 1
+    this.emitRoomEventWithState('COUNT_CHANGED', { count: newCount, userId: this.userId || 'anonymous' }, {
+      count: newCount,
+      lastUpdatedBy: this.userId || 'anonymous'
+    })
+    return { success: true, count: newCount }
+  }
+
+  async reset() {
+    this.emitRoomEventWithState('COUNT_CHANGED', { count: 0, userId: this.userId || 'anonymous' }, {
+      count: 0,
+      lastUpdatedBy: this.userId || 'anonymous'
+    })
+    return { success: true, count: 0 }
+  }
+
+  destroy() {
+    const newCount = Math.max(0, this.state.connectedUsers - 1)
+    this.emitRoomEvent('USER_COUNT_CHANGED', { connectedUsers: newCount })
+    super.destroy()
+  }
+}

core/client/LiveComponentsProvider.tsx

@@ -155,6 +155,25 @@ export function LiveComponentsProvider({
             return
           }
 
+          // Broadcast messages should go to ALL components (not just sender)
+          if (response.type === 'BROADCAST') {
+            // Send to all registered components in the same room
+            const registeredComponents = Array.from(componentCallbacksRef.current.keys())
+            log('📡 Broadcast routing:', {
+              sender: response.componentId,
+              registeredComponents,
+              totalRegistered: registeredComponents.length
+            })
+
+            componentCallbacksRef.current.forEach((callback, compId) => {
+              // Don't send back to the sender component
+              if (compId !== response.componentId) {
+                callback(response)
+              }
+            })
+            return
+          }
+
           // Route message to specific component
           if (response.componentId) {
             const callback = componentCallbacksRef.current.get(response.componentId)
@@ -165,14 +184,6 @@ export function LiveComponentsProvider({
             }
           }
 
-          // Broadcast messages (no specific componentId)
-          if (response.type === 'BROADCAST' && !response.componentId) {
-            // Send to all registered components
-            componentCallbacksRef.current.forEach(callback => {
-              callback(response)
-            })
-          }
-
         } catch (error) {
           log('❌ Failed to parse message', error)
           setError('Failed to parse message')

core/client/components/Live.tsx

@@ -14,9 +14,31 @@
 //     <input {...form.$field('name', { syncOn: 'blur' })} />
 //     <button onClick={() => form.submit()}>Enviar</button>
 //   )
+//
+// 🔥 Broadcasts Tipados (Discriminated Union):
+//   // No servidor, defina a interface de broadcasts:
+//   export interface LiveFormBroadcasts {
+//     FORM_SUBMITTED: { formId: string; data: any }
+//     FIELD_CHANGED: { field: string; value: any }
+//   }
+//
+//   // No cliente, use com tipagem automática (discriminated union):
+//   import { LiveForm, type LiveFormBroadcasts } from '@server/live/LiveForm'
+//
+//   const form = Live.use(LiveForm)
+//   form.$onBroadcast<LiveFormBroadcasts>((event) => {
+//     switch (event.type) {
+//       case 'FORM_SUBMITTED':
+//         console.log(event.data.formId) // ✅ Tipado como string!
+//         break
+//       case 'FIELD_CHANGED':
+//         console.log(event.data.field)  // ✅ Tipado como string!
+//         break
+//     }
+//   })
 
 import { useLiveComponent } from '../hooks/useLiveComponent'
-import type { UseLiveComponentOptions, LiveProxy } from '../hooks/useLiveComponent'
+import type { UseLiveComponentOptions, LiveProxy, LiveProxyWithBroadcasts } from '../hooks/useLiveComponent'
 
 // ===== Tipos para Inferência do Servidor =====
 
@@ -42,23 +64,33 @@ type ExtractActions<T> = T extends { new(...args: any[]): infer Instance }
     }
   : Record<string, never>
 
+// ===== Opções do Live.use() =====
+
+interface LiveUseOptions<TState> extends UseLiveComponentOptions {
+  /** Estado inicial para o componente */
+  initialState?: Partial<TState>
+}
+
 // ===== Hook Principal =====
 
-function useLive<T extends { new(...args: any[]): any; defaultState?: Record<string, any> }>(
+function useLive<
+  T extends { new(...args: any[]): any; defaultState?: Record<string, any> },
+  TBroadcasts extends Record<string, any> = Record<string, any>
+>(
   ComponentClass: T,
-  initialState?: Partial<ExtractState<T>>,
-  options?: UseLiveComponentOptions
-): LiveProxy<ExtractState<T>, ExtractActions<T>> {
+  options?: LiveUseOptions<ExtractState<T>>
+): LiveProxyWithBroadcasts<ExtractState<T>, ExtractActions<T>, TBroadcasts> {
   const componentName = ComponentClass.name.replace(/Component$/, '')
 
   // Usa defaultState da classe se não passar initialState
   const defaultState = (ComponentClass as any).defaultState || {}
+  const { initialState, ...restOptions } = options || {}
   const mergedState = { ...defaultState, ...initialState } as ExtractState<T>
 
-  return useLiveComponent<ExtractState<T>, ExtractActions<T>>(
+  return useLiveComponent<ExtractState<T>, ExtractActions<T>, TBroadcasts>(
     componentName,
     mergedState,
-    options
+    restOptions
   )
 }