create-fluxstack 1.14.0 → 1.16.0

package/app/client/.live-stubs/LiveAdminPanel.js

@@ -0,0 +1,5 @@
+export class LiveAdminPanel {
+  static componentName = 'LiveAdminPanel'
+  static defaultState = {}
+  static publicActions = ['getAuthInfo', 'init', 'listUsers', 'addUser', 'deleteUser', 'clearAudit']
+}

package/app/client/.live-stubs/LiveCounter.js

@@ -0,0 +1,9 @@
+export class LiveCounter {
+  static componentName = 'LiveCounter'
+  static defaultState = {
+    count: 0,
+    lastUpdatedBy: null,
+    connectedUsers: 0
+  }
+  static publicActions = ['increment', 'decrement', 'reset']
+}

package/app/client/.live-stubs/LiveForm.js

@@ -0,0 +1,11 @@
+export class LiveForm {
+  static componentName = 'LiveForm'
+  static defaultState = {
+    name: '',
+    email: '',
+    message: '',
+    submitted: false,
+    submittedAt: null
+  }
+  static publicActions = ['submit', 'reset', 'validate', 'setValue']
+}

package/app/client/.live-stubs/LiveLocalCounter.js

@@ -0,0 +1,8 @@
+export class LiveLocalCounter {
+  static componentName = 'LiveLocalCounter'
+  static defaultState = {
+    count: 0,
+    clicks: 0
+  }
+  static publicActions = ['increment', 'decrement', 'reset']
+}

package/app/client/.live-stubs/LivePingPong.js

@@ -0,0 +1,10 @@
+export class LivePingPong {
+  static componentName = 'LivePingPong'
+  static defaultState = {
+    username: '',
+    onlineCount: 0,
+    totalPings: 0,
+    lastPingBy: null,
+  }
+  static publicActions = ['ping']
+}

package/app/client/.live-stubs/LiveRoomChat.js

@@ -0,0 +1,11 @@
+export class LiveRoomChat {
+  static componentName = 'LiveRoomChat'
+  static defaultState = {
+    username: '',
+    activeRoom: null,
+    rooms: [],
+    messages: {},
+    customRooms: []
+  }
+  static publicActions = ['createRoom', 'joinRoom', 'leaveRoom', 'switchRoom', 'sendMessage', 'setUsername']
+}

package/app/client/.live-stubs/LiveSharedCounter.js

@@ -0,0 +1,10 @@
+export class LiveSharedCounter {
+  static componentName = 'LiveSharedCounter'
+  static defaultState = {
+    username: '',
+    count: 0,
+    lastUpdatedBy: null,
+    onlineCount: 0
+  }
+  static publicActions = ['increment', 'decrement', 'reset']
+}

package/app/client/.live-stubs/LiveUpload.js

@@ -0,0 +1,15 @@
+export class LiveUpload {
+  static componentName = 'LiveUpload'
+  static defaultState = {
+    status: 'idle',
+    progress: 0,
+    fileName: '',
+    fileSize: 0,
+    fileType: '',
+    fileUrl: '',
+    bytesUploaded: 0,
+    totalBytes: 0,
+    error: null
+  }
+  static publicActions = ['startUpload', 'updateProgress', 'completeUpload', 'failUpload', 'reset']
+}

package/app/client/src/App.tsx

@@ -1,13 +1,14 @@
 import { useState, useEffect } from 'react'
 import { Routes, Route } from 'react-router'
 import { api } from './lib/eden-api'
-import { LiveComponentsProvider, LiveDebugger } from '@/core/client'
+import { LiveComponentsProvider } from '@/core/client'
 import { FormDemo } from './live/FormDemo'
 import { CounterDemo } from './live/CounterDemo'
 import { UploadDemo } from './live/UploadDemo'
-import { ChatDemo } from './live/ChatDemo'
 import { RoomChatDemo } from './live/RoomChatDemo'
+import { SharedCounterDemo } from './live/SharedCounterDemo'
 import { AuthDemo } from './live/AuthDemo'
+import { PingPongDemo } from './live/PingPongDemo'
 import { AppLayout } from './components/AppLayout'
 import { DemoPage } from './components/DemoPage'
 import { HomePage } from './pages/HomePage'
@@ -110,10 +111,12 @@ function AppContent() {
           }
         />
         <Route
-          path="/chat"
+          path="/shared-counter"
           element={
-            <DemoPage>
-              <ChatDemo />
+            <DemoPage
+              note={<>Contador compartilhado usando <code className="text-purple-400">LiveRoom</code> - abra em varias abas!</>}
+            >
+              <SharedCounterDemo />
             </DemoPage>
           }
         />
@@ -121,7 +124,7 @@ function AppContent() {
           path="/room-chat"
           element={
             <DemoPage
-              note={<>🚀 Chat com múltiplas salas usando o novo sistema <code className="text-purple-400">$room</code>!</>}
+              note={<>Chat com múltiplas salas usando o sistema <code className="text-purple-400">$room</code>.</>}
             >
               <RoomChatDemo />
             </DemoPage>
@@ -137,6 +140,16 @@ function AppContent() {
             </DemoPage>
           }
         />
+        <Route
+          path="/ping-pong"
+          element={
+            <DemoPage
+              note={<>Latency demo com <code className="text-cyan-400">msgpack</code> binary codec - mensagens binárias no WebSocket!</>}
+            >
+              <PingPongDemo />
+            </DemoPage>
+          }
+        />
         <Route path="*" element={<HomePage apiStatus={apiStatus} />} />
       </Route>
     </Routes>
@@ -153,7 +166,6 @@ function App() {
       debug={false}
     >
       <AppContent />
-      {import.meta.env.DEV && <LiveDebugger />}
     </LiveComponentsProvider>
   )
 }

package/app/client/src/components/AppLayout.tsx

@@ -9,9 +9,10 @@ const navItems = [
   { to: '/counter', label: 'Counter' },
   { to: '/form', label: 'Form' },
   { to: '/upload', label: 'Upload' },
-  { to: '/chat', label: 'Chat' },
+  { to: '/shared-counter', label: 'Shared Counter' },
   { to: '/room-chat', label: 'Room Chat' },
   { to: '/auth', label: 'Auth' },
+  { to: '/ping-pong', label: 'Ping Pong' },
   { to: '/api-test', label: 'API Test' }
 ]
 
@@ -20,12 +21,16 @@ const routeFlameHue: Record<string, string> = {
   '/counter': '180deg',     // ciano
   '/form': '300deg',        // rosa
   '/upload': '60deg',       // amarelo
-  '/chat': '120deg',        // verde
+  '/shared-counter': '120deg', // verde
   '/room-chat': '240deg',   // azul
   '/auth': '330deg',        // vermelho
+  '/ping-pong': '200deg',   // ciano-azul
   '/api-test': '90deg',     // lima
 }
 
+// Cache favicon blob URLs by hue to avoid recreating blobs on every navigation
+const faviconUrlCache = new Map<string, string>()
+
 export function AppLayout() {
   const location = useLocation()
   const [menuOpen, setMenuOpen] = useState(false)
@@ -34,14 +39,18 @@ export function AppLayout() {
     const current = navItems.find(item => item.to === location.pathname)
     document.title = current ? `${current.label} - FluxStack` : 'FluxStack'
 
-    // Dynamic favicon with hue-rotate
+    // Dynamic favicon with hue-rotate (cached per hue value)
     const hue = routeFlameHue[location.pathname] || '0deg'
-    const colored = faviconSvg.replace(
-      '<svg ',
-      `<svg style="filter: hue-rotate(${hue})" `
-    )
-    const blob = new Blob([colored], { type: 'image/svg+xml' })
-    const url = URL.createObjectURL(blob)
+    let url = faviconUrlCache.get(hue)
+    if (!url) {
+      const colored = faviconSvg.replace(
+        '<svg ',
+        `<svg style="filter: hue-rotate(${hue})" `
+      )
+      const blob = new Blob([colored], { type: 'image/svg+xml' })
+      url = URL.createObjectURL(blob)
+      faviconUrlCache.set(hue, url)
+    }
     let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
     if (!link) {
       link = document.createElement('link')
@@ -50,7 +59,6 @@ export function AppLayout() {
     }
     link.type = 'image/svg+xml'
     link.href = url
-    return () => URL.revokeObjectURL(url)
   }, [location.pathname])
 
   return (

package/app/client/src/live/PingPongDemo.tsx

@@ -0,0 +1,199 @@
+// PingPongDemo - Demo de Binary Codec (msgpack)
+//
+// Mostra latencia round-trip de mensagens binárias.
+// Cada ping viaja como msgpack binário pelo WebSocket.
+// Abra em varias abas para ver o onlineCount e totalPings compartilhados.
+
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
+import { Live } from '@/core/client'
+import { LivePingPong } from '@server/live/LivePingPong'
+import type { PingRoom } from '@server/live/rooms/PingRoom'
+
+interface PingEntry {
+  seq: number
+  sentAt: number
+  rtt: number | null
+}
+
+export function PingPongDemo() {
+  const username = useMemo(() => {
+    const adj = ['Swift', 'Rapid', 'Quick', 'Turbo', 'Flash'][Math.floor(Math.random() * 5)]
+    const noun = ['Ping', 'Bolt', 'Wave', 'Pulse', 'Beam'][Math.floor(Math.random() * 5)]
+    return `${adj}${noun}${Math.floor(Math.random() * 100)}`
+  }, [])
+
+  const live = Live.use(LivePingPong, {
+    initialState: { ...LivePingPong.defaultState, username },
+  })
+
+  const [pings, setPings] = useState<PingEntry[]>([])
+  const [avgRtt, setAvgRtt] = useState<number | null>(null)
+  const [minRtt, setMinRtt] = useState<number | null>(null)
+  const [maxRtt, setMaxRtt] = useState<number | null>(null)
+  const seqRef = useRef(0)
+  const pendingRef = useRef<Map<number, number>>(new Map())
+
+  // Listen for pong events (binary msgpack from server)
+  useEffect(() => {
+    const unsub = live.$room<PingRoom>('ping:global').on('pong', (data) => {
+      const sentAt = pendingRef.current.get(data.seq)
+      if (sentAt == null) return
+      pendingRef.current.delete(data.seq)
+
+      const rtt = Date.now() - sentAt
+
+      setPings(prev => {
+        const updated = [{ seq: data.seq, sentAt, rtt }, ...prev].slice(0, 20)
+        // Compute stats
+        const rtts = updated.filter(p => p.rtt != null).map(p => p.rtt!)
+        if (rtts.length > 0) {
+          setAvgRtt(Math.round(rtts.reduce((a, b) => a + b, 0) / rtts.length))
+          setMinRtt(Math.min(...rtts))
+          setMaxRtt(Math.max(...rtts))
+        }
+        return updated
+      })
+    })
+    return unsub
+  }, [])
+
+  const sendPing = useCallback(() => {
+    const seq = ++seqRef.current
+    pendingRef.current.set(seq, Date.now())
+    live.ping({ seq })
+  }, [live])
+
+  // Auto-ping mode
+  const [autoPing, setAutoPing] = useState(false)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    if (autoPing && live.$connected) {
+      intervalRef.current = setInterval(sendPing, 500)
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [autoPing, live.$connected, sendPing])
+
+  const onlineCount = live.$state.onlineCount
+  const totalPings = live.$state.totalPings
+  const lastPingBy = live.$state.lastPingBy
+
+  const rttColor = (rtt: number) => {
+    if (rtt < 10) return 'text-emerald-400'
+    if (rtt < 50) return 'text-yellow-400'
+    return 'text-red-400'
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-8 w-full max-w-lg mx-auto">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-white mb-2">Ping Pong Binary</h2>
+        <p className="text-sm text-gray-400">
+          Mensagens binárias via <code className="text-cyan-400">msgpack</code> — round-trip latency demo
+        </p>
+      </div>
+
+      {/* Status bar */}
+      <div className="flex items-center gap-4 flex-wrap justify-center">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${live.$connected ? 'bg-emerald-400' : 'bg-red-400'}`} />
+          <span className="text-sm text-gray-400">{live.$connected ? 'Conectado' : 'Desconectado'}</span>
+        </div>
+        <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10">
+          <span className="text-sm text-gray-400">{onlineCount} online</span>
+        </div>
+        <div className="px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/20">
+          <span className="text-xs text-cyan-300">{username}</span>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-4 w-full">
+        <div className="bg-gray-800/50 border border-white/10 rounded-xl p-4 text-center">
+          <div className="text-2xl font-bold text-white tabular-nums">
+            {avgRtt != null ? `${avgRtt}ms` : '--'}
+          </div>
+          <div className="text-xs text-gray-500 mt-1">AVG RTT</div>
+        </div>
+        <div className="bg-gray-800/50 border border-white/10 rounded-xl p-4 text-center">
+          <div className="text-2xl font-bold text-emerald-400 tabular-nums">
+            {minRtt != null ? `${minRtt}ms` : '--'}
+          </div>
+          <div className="text-xs text-gray-500 mt-1">MIN RTT</div>
+        </div>
+        <div className="bg-gray-800/50 border border-white/10 rounded-xl p-4 text-center">
+          <div className="text-2xl font-bold text-red-400 tabular-nums">
+            {maxRtt != null ? `${maxRtt}ms` : '--'}
+          </div>
+          <div className="text-xs text-gray-500 mt-1">MAX RTT</div>
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={sendPing}
+          disabled={!live.$connected || live.$loading}
+          className="px-8 h-14 rounded-2xl bg-cyan-500/20 border border-cyan-500/30 text-cyan-300 text-lg font-bold hover:bg-cyan-500/30 active:scale-95 disabled:opacity-50 transition-all"
+        >
+          Ping!
+        </button>
+        <button
+          onClick={() => setAutoPing(!autoPing)}
+          disabled={!live.$connected}
+          className={`px-6 h-14 rounded-2xl border text-sm font-medium transition-all ${
+            autoPing
+              ? 'bg-yellow-500/20 border-yellow-500/30 text-yellow-300 hover:bg-yellow-500/30'
+              : 'bg-white/10 border-white/20 text-gray-300 hover:bg-white/20'
+          }`}
+        >
+          {autoPing ? 'Auto ON' : 'Auto OFF'}
+        </button>
+      </div>
+
+      {/* Global stats */}
+      <div className="flex items-center gap-6 text-sm text-gray-500">
+        <span>Total pings: <span className="text-white font-mono">{totalPings}</span></span>
+        {lastPingBy && <span>Ultimo: <span className="text-gray-300">{lastPingBy}</span></span>}
+      </div>
+
+      {/* Ping log */}
+      <div className="w-full bg-gray-800/30 border border-white/10 rounded-xl overflow-hidden">
+        <div className="px-4 py-2 bg-white/5 border-b border-white/10 flex items-center justify-between">
+          <span className="text-xs text-gray-400 font-medium">Ping Log</span>
+          <span className="text-xs text-gray-600">
+            wire format: <code className="text-cyan-400">msgpack</code> (binary)
+          </span>
+        </div>
+        <div className="max-h-60 overflow-y-auto">
+          {pings.length === 0 ? (
+            <div className="px-4 py-8 text-center text-gray-600 text-sm">
+              Clique Ping! para enviar uma mensagem binaria
+            </div>
+          ) : (
+            pings.map((p) => (
+              <div
+                key={p.seq}
+                className="px-4 py-2 border-b border-white/5 flex items-center justify-between text-sm"
+              >
+                <span className="text-gray-500 font-mono">#{p.seq}</span>
+                <span className={`font-mono font-bold ${p.rtt != null ? rttColor(p.rtt) : 'text-gray-600'}`}>
+                  {p.rtt != null ? `${p.rtt}ms` : 'pending...'}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Info */}
+      <div className="text-center text-xs text-gray-600 space-y-1">
+        <p>Powered by <code className="text-purple-400">LiveRoom</code> + <code className="text-cyan-400">msgpack codec</code></p>
+        <p>Wire format: binary frames <code className="text-cyan-400">0x02</code> (event) / <code className="text-cyan-400">0x03</code> (state)</p>
+      </div>
+    </div>
+  )
+}