create-fluxstack 1.20.0 → 1.21.0

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

@@ -1,206 +1,151 @@
-// 🔥 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-5 sm:p-8 max-w-md w-full flex flex-col">
-        <h2 className="text-xl sm:text-2xl font-bold text-white mb-2 text-center">
-          {title}
-        </h2>
-
-        <p className="text-gray-400 text-xs sm:text-sm text-center mb-4 sm:mb-6">
-          {description}
-        </p>
-
-        <div className="flex flex-wrap justify-center gap-2 sm:gap-4 mb-4 sm: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-6 sm:mb-8 flex-1 flex flex-col justify-center">
-          <div className="text-6xl sm:text-8xl font-bold bg-theme-gradient 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 btn-complement disabled:opacity-50"
-          >
-            −
-          </button>
-
-          <button
-            onClick={handleReset}
-            disabled={counter.$loading}
-            className="px-6 h-14 flex items-center justify-center text-sm btn-theme-outline disabled:opacity-50"
-          >
-            Reset
-          </button>
-
-          <button
-            onClick={handleIncrement}
-            disabled={counter.$loading}
-            className="w-14 h-14 flex items-center justify-center text-3xl btn-accent disabled:opacity-50"
-          >
-            +
-          </button>
-        </div>
-
-        {counter.$loading && (
-          <div className="flex justify-center mt-4">
-            <div className="w-5 h-5 border-2 border-theme 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-theme">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-5 sm:p-8 max-w-md w-full flex flex-col">
-        <h2 className="text-xl sm:text-2xl font-bold text-white mb-2 text-center">
-          Contador Local (sem Room)
-        </h2>
-        <p className="text-gray-400 text-xs sm:text-sm text-center mb-4 sm:mb-6">
-          Estado local do componente, sem eventos de sala.
-        </p>
-
-        <div className="text-center mb-6 sm:mb-8 flex-1 flex flex-col justify-center">
-          <div className="text-6xl sm: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 btn-complement disabled:opacity-50"
-          >
-            −
-          </button>
-
-          <button
-            onClick={handleReset}
-            disabled={localCounter.$loading}
-            className="px-6 h-14 flex items-center justify-center text-sm btn-theme-outline disabled:opacity-50"
-          >
-            Reset
-          </button>
-
-          <button
-            onClick={handleIncrement}
-            disabled={localCounter.$loading}
-            className="w-14 h-14 flex items-center justify-center text-3xl btn-accent disabled:opacity-50"
-          >
-            +
-          </button>
-        </div>
-
-        {localCounter.$loading && (
-          <div className="flex justify-center mt-4">
-            <div className="w-5 h-5 border-2 border-theme border-t-transparent rounded-full animate-spin" />
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 items-stretch 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>
-  )
-}
+import { useMemo } from 'react'
+import { Live } from '@/core/client'
+import { LiveCounter } from '@server/live/LiveCounter'
+import { LiveLocalCounter } from '@server/live/LiveLocalCounter'
+import { FaMinus, FaPlus, FaRotateRight, FaUsers } from 'react-icons/fa6'
+
+type CounterProxy = ReturnType<typeof Live.use>
+
+function ConnectionPill({ connected }: { connected: boolean }) {
+  return (
+    <span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs ${
+      connected
+        ? 'border-emerald-400/25 bg-emerald-400/10 text-emerald-200'
+        : 'border-red-400/25 bg-red-400/10 text-red-200'
+    }`}>
+      <span className={`h-1.5 w-1.5 rounded-full ${connected ? 'bg-emerald-300' : 'bg-red-300'}`} />
+      {connected ? 'Connected' : 'Offline'}
+    </span>
+  )
+}
+
+function CounterCard({
+  title,
+  description,
+  mode,
+  counter,
+  accent = 'theme',
+}: {
+  title: string
+  description: string
+  mode: string
+  counter: CounterProxy
+  accent?: 'theme' | 'warm'
+}) {
+  const valueClass = accent === 'warm'
+    ? 'bg-gradient-to-r from-amber-300 via-orange-300 to-rose-300'
+    : 'bg-theme-gradient'
+
+  return (
+    <article className="flex min-h-[430px] w-full flex-col rounded-lg border border-white/10 bg-[#07070b]/85 p-5 shadow-2xl shadow-black/20">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <span className="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1 text-xs text-gray-400">
+            {mode}
+          </span>
+          <h2 className="mt-4 text-xl font-semibold tracking-tight text-white">{title}</h2>
+          <p className="mt-2 text-sm leading-6 text-gray-500">{description}</p>
+        </div>
+        {'$connected' in counter && <ConnectionPill connected={counter.$connected} />}
+      </div>
+
+      <div className="flex flex-1 items-center justify-center py-8">
+        <div className={`bg-clip-text text-7xl font-semibold tabular-nums tracking-tight text-transparent sm:text-8xl ${valueClass}`}>
+          {counter.$state.count}
+        </div>
+      </div>
+
+      {'connectedUsers' in counter.$state && (
+        <div className="mb-5 flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.025] px-3 py-2 text-xs text-gray-400">
+          <span className="inline-flex items-center gap-2">
+            <FaUsers className="text-theme" />
+            Users in room
+          </span>
+          <span className="font-mono text-white">{counter.$state.connectedUsers}</span>
+        </div>
+      )}
+
+      {counter.$state.lastUpdatedBy && (
+        <p className="mb-5 truncate text-xs text-gray-500">
+          Last update: <span className="text-gray-300">{counter.$state.lastUpdatedBy}</span>
+        </p>
+      )}
+
+      <div className="grid grid-cols-[56px_1fr_56px] gap-3">
+        <button
+          onClick={() => counter.decrement()}
+          disabled={counter.$loading}
+          className="flex h-12 items-center justify-center rounded-lg border border-white/10 bg-white/[0.03] text-gray-200 transition hover:bg-white/[0.07] disabled:opacity-50"
+          aria-label={`Decrease ${title}`}
+        >
+          <FaMinus />
+        </button>
+        <button
+          onClick={() => counter.reset()}
+          disabled={counter.$loading}
+          className="inline-flex h-12 items-center justify-center gap-2 rounded-lg border border-theme-active bg-theme-muted px-4 text-sm font-semibold text-theme transition hover:shadow-theme disabled:opacity-50"
+        >
+          <FaRotateRight className="h-3.5 w-3.5" />
+          Reset
+        </button>
+        <button
+          onClick={() => counter.increment()}
+          disabled={counter.$loading}
+          className="flex h-12 items-center justify-center rounded-lg bg-white text-black transition hover:bg-gray-200 disabled:opacity-50"
+          aria-label={`Increase ${title}`}
+        >
+          <FaPlus />
+        </button>
+      </div>
+    </article>
+  )
+}
+
+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 localCounter = Live.use(LiveLocalCounter, {
+    initialState: LiveLocalCounter.defaultState,
+    persistState: false,
+  })
+
+  const isolatedCounter = Live.use(LiveCounter, {
+    room: isolatedRoom,
+    initialState: LiveCounter.defaultState,
+    persistState: false,
+  })
+
+  const sharedCounter = Live.use(LiveCounter, {
+    room: 'global-counter',
+    initialState: LiveCounter.defaultState,
+  })
+
+  return (
+    <div className="grid w-full gap-4 lg:grid-cols-3">
+      <CounterCard
+        title="Local state"
+        description="A component-local counter for quick state updates without a shared room."
+        mode="No room"
+        counter={localCounter}
+        accent="warm"
+      />
+      <CounterCard
+        title="Isolated room"
+        description="A private room per tab. The server owns the state, but the session is isolated."
+        mode="Private room"
+        counter={isolatedCounter}
+      />
+      <CounterCard
+        title="Shared room"
+        description="One global room. Open another tab and every client sees the same counter."
+        mode="Global room"
+        counter={sharedCounter}
+      />
+    </div>
+  )
+}

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

@@ -1,119 +1,140 @@
-// 🔥 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-4 sm:p-6 bg-green-500/20 border border-green-500/30 rounded-xl text-center w-full max-w-xl mx-auto">
-        <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 btn-theme"
-        >
-          Novo Formulário
-        </button>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-4 sm:p-6 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl w-full max-w-xl mx-auto">
-      <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-theme text-xs">(sync: blur)</span>
-          </label>
-          <input
-            {...form.$field('name', { syncOn: 'blur' })}
-            placeholder="Seu nome"
-            className="w-full input-theme"
-          />
-        </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 input-theme"
-          />
-        </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 input-theme 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 || form.$loading}
-            className="flex-1 px-4 py-3 bg-theme-gradient text-white rounded-lg font-medium hover:shadow-theme transition-all disabled:opacity-50"
-          >
-            {form.$loading ? 'Enviando...' : 'Enviar'}
-          </button>
-          <button
-            onClick={() => form.reset()}
-            className="px-4 py-3 btn-theme-ghost"
-          >
-            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-theme">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>
-  )
-}
+import { Live } from '@/core/client'
+import { LiveForm } from '@server/live/LiveForm'
+import { FaCheck, FaCode, FaEnvelope, FaRegMessage, FaUser } from 'react-icons/fa6'
+
+function FieldHint({ children }: { children: string }) {
+  return (
+    <span className="rounded-full border border-white/10 bg-white/[0.03] px-2 py-0.5 text-[11px] text-gray-500">
+      {children}
+    </span>
+  )
+}
+
+export function FormDemo() {
+  const form = Live.use(LiveForm)
+
+  if (form.submitted) {
+    return (
+      <div className="w-full max-w-2xl rounded-lg border border-emerald-400/20 bg-emerald-400/10 p-6 text-center shadow-2xl shadow-black/20">
+        <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-400 text-black">
+          <FaCheck />
+        </div>
+        <h2 className="text-2xl font-semibold text-white">Message received</h2>
+        <p className="mt-2 text-sm leading-6 text-gray-300">
+          Thanks, <span className="text-emerald-200">{form.name || 'there'}</span>. The server state was updated and submitted.
+        </p>
+        <p className="mt-3 text-xs text-gray-500">
+          Submitted at {form.submittedAt ? new Date(form.submittedAt).toLocaleString() : '-'}
+        </p>
+        <button onClick={() => form.reset()} className="mt-6 h-11 rounded-lg bg-white px-5 text-sm font-semibold text-black transition hover:bg-gray-200">
+          Start another form
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid w-full max-w-5xl gap-4 lg:grid-cols-[1fr_360px]">
+      <section className="rounded-lg border border-white/10 bg-[#07070b]/85 p-5 shadow-2xl shadow-black/20 sm:p-6">
+        <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <h2 className="text-2xl font-semibold tracking-tight text-white">Contact workflow</h2>
+            <p className="mt-2 text-sm leading-6 text-gray-500">
+              Fields sync with the server using different strategies so the UI stays responsive.
+            </p>
+          </div>
+          <span className={`inline-flex w-fit items-center gap-2 rounded-full border px-3 py-1 text-xs ${
+            form.$connected
+              ? 'border-emerald-400/25 bg-emerald-400/10 text-emerald-200'
+              : 'border-red-400/25 bg-red-400/10 text-red-200'
+          }`}>
+            <span className={`h-1.5 w-1.5 rounded-full ${form.$connected ? 'bg-emerald-300' : 'bg-red-300'}`} />
+            {form.$connected ? 'Connected' : 'Offline'}
+          </span>
+        </div>
+
+        <div className="space-y-4">
+          <label className="block">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-gray-200">
+                <FaUser className="text-theme" />
+                Name
+              </span>
+              <FieldHint>sync on blur</FieldHint>
+            </div>
+            <input
+              {...form.$field('name', { syncOn: 'blur' })}
+              placeholder="Ada Lovelace"
+              className="w-full input-theme"
+            />
+          </label>
+
+          <label className="block">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-gray-200">
+                <FaEnvelope className="text-theme-secondary" />
+                Email
+              </span>
+              <FieldHint>debounce 500ms</FieldHint>
+            </div>
+            <input
+              {...form.$field('email', { syncOn: 'change', debounce: 500 })}
+              type="email"
+              placeholder="ada@company.dev"
+              className="w-full input-theme"
+            />
+          </label>
+
+          <label className="block">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-gray-200">
+                <FaRegMessage className="text-theme" />
+                Message
+              </span>
+              <FieldHint>sync on blur</FieldHint>
+            </div>
+            <textarea
+              {...form.$field('message', { syncOn: 'blur' })}
+              rows={5}
+              placeholder="Tell us what you want to build..."
+              className="w-full resize-none input-theme"
+            />
+          </label>
+
+          <div className="flex flex-col gap-3 pt-2 sm:flex-row">
+            <button
+              onClick={async () => {
+                try {
+                  await form.$sync()
+                  await form.submit()
+                } catch (err: any) {
+                  alert(err.message || 'Submit failed')
+                }
+              }}
+              disabled={!form.$connected || form.$loading}
+              className="h-11 flex-1 rounded-lg bg-white px-5 text-sm font-semibold text-black transition hover:bg-gray-200 disabled:opacity-50"
+            >
+              {form.$loading ? 'Sending...' : 'Submit'}
+            </button>
+            <button
+              onClick={() => form.reset()}
+              className="h-11 rounded-lg border border-white/10 bg-white/[0.03] px-5 text-sm font-semibold text-white transition hover:bg-white/[0.06]"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <aside className="rounded-lg border border-white/10 bg-black/30 p-5">
+        <div className="mb-4 flex items-center gap-2 text-sm font-semibold text-white">
+          <FaCode className="text-theme" />
+          Server state
+        </div>
+        <pre className="max-h-[460px] overflow-auto rounded-lg border border-white/10 bg-black/50 p-4 text-xs leading-6 text-emerald-300">
+          <code>{JSON.stringify(form.$state, null, 2)}</code>
+        </pre>
+      </aside>
+    </div>
+  )
+}