create-fluxstack 1.10.1 → 1.12.1

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

@@ -0,0 +1,206 @@
+// 🔥 CounterDemo - Contador isolado e compartilhado
+
+import { useMemo } from 'react'
+import { Live } from '@/core/client'
+import { LiveCounter } from '@server/live/LiveCounter'
+import { LiveLocalCounter } from '@server/live/LiveLocalCounter'
+
+export function CounterDemo() {
+  const isolatedRoom = useMemo(() => {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+      return `local-${crypto.randomUUID()}`
+    }
+    return `local-${Math.random().toString(36).slice(2)}`
+  }, [])
+
+  const sharedCounter = Live.use(LiveCounter, {
+    room: 'global-counter',
+    initialState: LiveCounter.defaultState
+  })
+
+  const isolatedCounter = Live.use(LiveCounter, {
+    room: isolatedRoom,
+    initialState: LiveCounter.defaultState,
+    persistState: false
+  })
+
+  const localCounter = Live.use(LiveLocalCounter, {
+    initialState: LiveLocalCounter.defaultState,
+    persistState: false
+  })
+  
+  const renderCounter = (
+    title: string,
+    description: string,
+    counter: ReturnType<typeof Live.use>
+  ) => {
+    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 w-full">
+        <h2 className="text-2xl font-bold text-white mb-2 text-center">
+          {title}
+        </h2>
+
+        <p className="text-gray-400 text-sm text-center mb-6">
+          {description}
+        </p>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        {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>
+        )}
+
+        <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>
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const renderLocalCounter = () => {
+    const handleIncrement = async () => {
+      await localCounter.increment()
+    }
+    const handleDecrement = async () => {
+      await localCounter.decrement()
+    }
+    const handleReset = async () => {
+      await localCounter.reset()
+    }
+
+    return (
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 max-w-md w-full">
+        <h2 className="text-2xl font-bold text-white mb-2 text-center">
+          Contador Local (sem Room)
+        </h2>
+        <p className="text-gray-400 text-sm text-center mb-6">
+          Estado local do componente, sem eventos de sala.
+        </p>
+
+        <div className="text-center mb-8">
+          <div className="text-8xl font-bold bg-gradient-to-r from-amber-400 via-orange-400 to-rose-400 bg-clip-text text-transparent">
+            {localCounter.$state.count}
+          </div>
+        </div>
+
+        <div className="flex gap-4 justify-center">
+          <button
+            onClick={handleDecrement}
+            disabled={localCounter.$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={localCounter.$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={localCounter.$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>
+
+        {localCounter.$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>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6 items-start justify-center">
+      {renderLocalCounter()}
+      {renderCounter(
+        'Contador Isolado',
+        'Cada aba tem seu próprio valor (room único).',
+        isolatedCounter
+      )}
+      {renderCounter(
+        'Contador Compartilhado',
+        'Abra em várias abas - todos veem o mesmo valor!',
+        sharedCounter
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,119 @@
+// 🔥 FormDemo - Exemplo de Live Component
+import { Live } from '@/core/client'
+import { LiveForm } from '@server/live/LiveForm'
+
+export function FormDemo() {
+  // ✨ Usa defaultState do backend automaticamente
+  const form = Live.use(LiveForm)
+
+  // Sucesso
+  if (form.submitted) {
+    return (
+      <div className="p-6 bg-green-500/20 border border-green-500/30 rounded-xl text-center">
+        <div className="text-4xl mb-3">✅</div>
+        <h2 className="text-xl font-bold text-white mb-2">Enviado!</h2>
+        <p className="text-gray-300">Obrigado, <span className="text-green-400">{form.name}</span>!</p>
+        <p className="text-gray-400 text-sm mt-2">
+          Enviado em: {form.submittedAt ? new Date(form.submittedAt).toLocaleString() : '-'}
+        </p>
+        <button
+          onClick={() => form.reset()}
+          className="mt-4 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all"
+        >
+          Novo Formulário
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-white">Live Form</h2>
+        <span className={`px-3 py-1 rounded-full text-xs ${
+          form.$connected ? 'bg-green-500/20 text-green-300' : 'bg-red-500/20 text-red-300'
+        }`}>
+          {form.$connected ? '🟢 Conectado' : '🔴 Desconectado'}
+        </span>
+      </div>
+
+      <div className="space-y-4">
+        {/* Nome - sync on blur */}
+        <div>
+          <label className="block text-gray-300 text-sm mb-1">
+            Nome <span className="text-purple-400 text-xs">(sync: blur)</span>
+          </label>
+          <input
+            {...form.$field('name', { syncOn: 'blur' })}
+            placeholder="Seu nome"
+            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Email - sync on change with debounce */}
+        <div>
+          <label className="block text-gray-300 text-sm mb-1">
+            Email <span className="text-blue-400 text-xs">(sync: 500ms)</span>
+          </label>
+          <input
+            {...form.$field('email', { syncOn: 'change', debounce: 500 })}
+            type="email"
+            placeholder="seu@email.com"
+            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Mensagem - sync on blur */}
+        <div>
+          <label className="block text-gray-300 text-sm mb-1">
+            Mensagem <span className="text-orange-400 text-xs">(sync: blur)</span>
+          </label>
+          <textarea
+            {...form.$field('message', { syncOn: 'blur' })}
+            rows={3}
+            placeholder="Sua mensagem..."
+            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none resize-none"
+          />
+        </div>
+
+        {/* Botões */}
+        <div className="flex gap-2">
+          <button
+            onClick={async () => {
+              try {
+                await form.$sync()
+                await form.submit()
+              } catch (err: any) {
+                alert(err.message || 'Erro ao enviar')
+              }
+            }}
+            disabled={!form.$connected}
+            className="flex-1 px-4 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50"
+          >
+            {form.$loading ? 'Enviando...' : 'Enviar'}
+          </button>
+          <button
+            onClick={() => form.reset()}
+            className="px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-500 transition-all"
+          >
+            Limpar
+          </button>
+        </div>
+      </div>
+
+      {/* Legenda */}
+      <div className="mt-4 p-3 bg-white/5 rounded-lg text-xs text-gray-400 space-y-1">
+        <p><span className="text-purple-400">blur:</span> Sincroniza ao sair do campo</p>
+        <p><span className="text-blue-400">500ms:</span> Sincroniza 500ms após parar de digitar</p>
+      </div>
+
+      {/* Debug */}
+      <details className="mt-4">
+        <summary className="text-gray-400 text-sm cursor-pointer">Debug State (servidor)</summary>
+        <pre className="mt-2 p-3 bg-black/40 rounded-lg text-xs text-green-400 overflow-auto">
+{JSON.stringify(form.$state, null, 2)}
+        </pre>
+      </details>
+    </div>
+  )
+}

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

@@ -0,0 +1,161 @@
+// 🔥 RoomChatDemo - Chat multi-salas simplificado
+
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { Live } from '@/core/client'
+import { LiveRoomChat } from '@server/live/LiveRoomChat'
+
+const AVAILABLE_ROOMS = [
+  { id: 'geral', name: '💬 Geral' },
+  { id: 'tech', name: '💻 Tecnologia' },
+  { id: 'random', name: '🎲 Random' },
+  { id: 'vip', name: '⭐ VIP' }
+]
+
+export function RoomChatDemo() {
+  const [text, setText] = useState('')
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const defaultUsername = useMemo(() => {
+    const adj = ['Happy', 'Cool', 'Fast', 'Smart', 'Brave'][Math.floor(Math.random() * 5)]
+    const noun = ['Panda', 'Tiger', 'Eagle', 'Wolf', 'Bear'][Math.floor(Math.random() * 5)]
+    return `${adj}${noun}${Math.floor(Math.random() * 100)}`
+  }, [])
+
+  const chat = Live.use(LiveRoomChat, {
+    initialState: { ...LiveRoomChat.defaultState, username: defaultUsername }
+  })
+
+  const activeRoom = chat.$state.activeRoom
+  const activeMessages = activeRoom ? (chat.$state.messages[activeRoom] || []) : []
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [activeMessages.length])
+
+  const handleJoinRoom = async (roomId: string, roomName: string) => {
+    if (chat.$rooms.includes(roomId)) {
+      await chat.switchRoom({ roomId })
+    } else {
+      await chat.joinRoom({ roomId, roomName })
+    }
+  }
+
+  const handleSendMessage = async () => {
+    if (!text.trim() || !activeRoom) return
+    await chat.sendMessage({ text })
+    setText('')
+  }
+
+  return (
+    <div className="flex h-[600px] bg-gray-900 rounded-2xl overflow-hidden border border-white/10">
+      {/* Sidebar */}
+      <div className="w-64 bg-gray-800/50 border-r border-white/10 flex flex-col">
+        <div className="p-4 border-b border-white/10">
+          <h2 className="text-lg font-bold text-white mb-2">💬 Room Chat</h2>
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${chat.$connected ? 'bg-emerald-400' : 'bg-red-400'}`} />
+            <span className="text-sm text-gray-400">{chat.$state.username}</span>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-auto p-2">
+          <p className="text-xs text-gray-500 px-2 py-1">SALAS</p>
+          {AVAILABLE_ROOMS.map(room => {
+            const isJoined = chat.$rooms.includes(room.id)
+            const isActive = activeRoom === room.id
+
+            return (
+              <div
+                key={room.id}
+                onClick={() => handleJoinRoom(room.id, room.name)}
+                className={`
+                  flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer mb-1 transition-all group
+                  ${isActive ? 'bg-purple-500/20 text-purple-300' : isJoined ? 'bg-white/5 text-gray-300 hover:bg-white/10' : 'text-gray-500 hover:bg-white/5'}
+                `}
+              >
+                <span className="flex items-center gap-2">
+                  {room.name}
+                  {isJoined && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />}
+                </span>
+                {isJoined && !isActive && (
+                  <button
+                    onClick={(e) => { e.stopPropagation(); chat.leaveRoom({ roomId: room.id }) }}
+                    className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 text-xs"
+                  >✕</button>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="p-3 border-t border-white/10">
+          <p className="text-xs text-gray-500">Em {chat.$rooms.length} sala(s)</p>
+        </div>
+      </div>
+
+      {/* Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {activeRoom ? (
+          <>
+            <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between">
+              <div>
+                <h3 className="text-white font-semibold">
+                  {chat.$state.rooms.find(r => r.id === activeRoom)?.name || activeRoom}
+                </h3>
+                <p className="text-xs text-gray-500">{activeMessages.length} mensagens</p>
+              </div>
+              <button
+                onClick={() => chat.leaveRoom({ roomId: activeRoom })}
+                className="px-3 py-1 text-sm bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30"
+              >Sair</button>
+            </div>
+
+            <div className="flex-1 overflow-auto p-4 space-y-3">
+              {activeMessages.length === 0 ? (
+                <div className="text-center text-gray-500 py-8">
+                  <p>Nenhuma mensagem ainda</p>
+                  <p className="text-sm">Seja o primeiro a enviar!</p>
+                </div>
+              ) : (
+                activeMessages.map(msg => (
+                  <div key={msg.id} className={`flex flex-col ${msg.user === chat.$state.username ? 'items-end' : 'items-start'}`}>
+                    <div className={`max-w-[80%] rounded-2xl px-4 py-2 ${msg.user === chat.$state.username ? 'bg-purple-500/30 text-purple-100' : 'bg-white/10 text-gray-200'}`}>
+                      <p className="text-xs text-gray-400 mb-1">{msg.user}</p>
+                      <p>{msg.text}</p>
+                    </div>
+                    <span className="text-xs text-gray-600 mt-1">{new Date(msg.timestamp).toLocaleTimeString()}</span>
+                  </div>
+                ))
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            <div className="p-4 border-t border-white/10">
+              <div className="flex gap-2">
+                <input
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage() } }}
+                  placeholder="Digite uma mensagem..."
+                  className="flex-1 px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+                />
+                <button
+                  onClick={handleSendMessage}
+                  disabled={!text.trim()}
+                  className="px-6 py-2 rounded-xl bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 disabled:opacity-50"
+                >Enviar</button>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-gray-500">
+            <div className="text-center">
+              <p className="text-4xl mb-4">👈</p>
+              <p>Selecione uma sala para começar</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { LiveUploadWidget } from '../components/LiveUploadWidget'
+import { useLiveUpload } from '@/core/client'
+
+export function UploadDemo() {
+  const [lastUrl, setLastUrl] = useState<string | null>(null)
+  const { live } = useLiveUpload({
+    onComplete: (response) => setLastUrl(response.fileUrl || null)
+  })
+
+  return (
+    <div className="flex flex-col gap-4 max-w-xl w-full mx-auto">
+      <LiveUploadWidget live={live} />
+      {lastUrl && (
+        <div className="text-xs text-gray-500 text-center">
+          Ultimo arquivo: {lastUrl}
+        </div>
+      )}
+    </div>
+  )
+}

package/app/client/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

package/app/client/src/pages/ApiTestPage.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import { BackButton } from '../components/BackButton'
+
+export function ApiTestPage({
+  apiResponse,
+  isLoading,
+  onHealth,
+  onGetUsers,
+  onCreateUser
+}: {
+  apiResponse: string
+  isLoading: boolean
+  onHealth: () => void
+  onGetUsers: () => void
+  onCreateUser: () => void
+}) {
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="flex items-center gap-4 mb-8">
+        <BackButton />
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+          Eden Treaty API Test
+        </h1>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <ActionCard
+          icon="🏥"
+          title="GET /api/health"
+          subtitle="Health Check"
+          onClick={onHealth}
+          disabled={isLoading}
+          className="bg-emerald-500/20 border-emerald-500/30 text-emerald-300 hover:bg-emerald-500/30"
+        />
+        <ActionCard
+          icon="👥"
+          title="GET /api/users"
+          subtitle="List Users"
+          onClick={onGetUsers}
+          disabled={isLoading}
+          className="bg-blue-500/20 border-blue-500/30 text-blue-300 hover:bg-blue-500/30"
+        />
+        <ActionCard
+          icon="➕"
+          title="POST /api/users"
+          subtitle="Create User"
+          onClick={onCreateUser}
+          disabled={isLoading}
+          className="bg-purple-500/20 border-purple-500/30 text-purple-300 hover:bg-purple-500/30"
+        />
+      </div>
+
+      <div className="bg-black/40 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-white">Response</h2>
+          {isLoading && (
+            <div className="flex items-center gap-2 text-yellow-400">
+              <div className="w-4 h-4 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin"></div>
+              Loading...
+            </div>
+          )}
+        </div>
+        <pre className="bg-black/60 rounded-xl p-4 overflow-auto max-h-96 text-sm font-mono">
+          <code className="text-green-400">
+            {apiResponse || '// Click a button above to test the API\\n// Type inference works automatically!'}
+          </code>
+        </pre>
+      </div>
+
+      <div className="mt-8 bg-white/5 border border-white/10 rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-white mb-3">How it works</h3>
+        <div className="text-gray-400 text-sm space-y-2">
+          <p>OK <code className="text-purple-400">api.health.get()</code> - Full type inference from server</p>
+          <p>OK <code className="text-purple-400">api.users.post({'{ name, email }'})</code> - Request body is typed</p>
+          <p>OK <code className="text-purple-400">{'{ data, error }'}</code> - Response is typed automatically</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ActionCard({
+  icon,
+  title,
+  subtitle,
+  onClick,
+  disabled,
+  className
+}: {
+  icon: ReactNode
+  title: string
+  subtitle: string
+  onClick: () => void
+  disabled: boolean
+  className: string
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`px-6 py-4 border rounded-xl font-medium transition-all disabled:opacity-50 ${className}`}
+    >
+      <div className="text-2xl mb-2">{icon}</div>
+      <div>{title}</div>
+      <div className="text-xs opacity-70 mt-1">{subtitle}</div>
+    </button>
+  )
+}