create-fluxstack 1.20.0 → 1.21.0

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

@@ -1,104 +1,170 @@
-import FluxStack from '@client/src/assets/fluxstack.svg'
-
-export function HomePage({ apiStatus }: { apiStatus: 'checking' | 'online' | 'offline' }) {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-72px)] px-4 sm:px-6 py-12 text-center relative overflow-hidden">
-
-      {/* Background glow */}
-      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-theme-accent rounded-full blur-[120px] pointer-events-none" />
-
-      <div className="relative z-10 flex flex-col items-center w-full max-w-3xl">
-
-        {/* Icon */}
-        <div className="relative mb-5">
-          <div className="absolute inset-0 bg-theme-muted rounded-full blur-2xl animate-pulse-slow" />
-          <img
-            src={FluxStack}
-            alt="FluxStack"
-            className="relative w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 drop-shadow-[0_0_24px_rgba(168,85,247,0.35)] animate-float"
-          />
-        </div>
-
-        {/* Title */}
-        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-3 bg-theme-gradient bg-clip-text text-transparent tracking-tight leading-none">
-          FluxStack
-        </h1>
-
-        {/* Subtitle */}
-        <p className="text-sm sm:text-base md:text-lg text-gray-400 mb-6 leading-relaxed">
-          <span className="text-theme font-semibold">Bun</span>
-          {' + '}
-          <span className="text-theme-secondary font-semibold">Elysia</span>
-          {' + '}
-          <span className="text-theme-secondary font-semibold">React</span>
-          {' = '}
-          <span className="text-white font-semibold">FluxStack</span>
-        </p>
-
-        {/* API Status */}
-        <div className="mb-10 md:mb-12">
-          <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] sm:text-xs font-medium tracking-wide uppercase transition-all ${
-            apiStatus === 'online'
-              ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
-              : apiStatus === 'offline'
-              ? 'bg-red-500/10 text-red-400 border border-red-500/20'
-              : 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20'
-          }`}>
-            <div className={`w-1.5 h-1.5 rounded-full animate-pulse ${
-              apiStatus === 'online' ? 'bg-emerald-400' : apiStatus === 'offline' ? 'bg-red-400' : 'bg-yellow-400'
-            }`} />
-            <span>{apiStatus === 'checking' ? 'Checking API...' : apiStatus === 'online' ? 'API Online' : 'API Offline'}</span>
-          </div>
-        </div>
-
-        {/* Feature cards */}
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 w-full mb-12">
-          <div className="group bg-white/[0.03] border border-white/[0.06] rounded-xl p-4 sm:p-5 hover:bg-white/[0.06] hover:border-theme transition-all duration-300">
-            <div className="w-8 h-8 rounded-lg bg-theme-accent flex items-center justify-center mb-3 group-hover:bg-theme-muted transition-colors">
-              <span className="text-sm">⚡</span>
-            </div>
-            <h3 className="text-xs sm:text-sm font-semibold text-white mb-1 text-left">Ultra Rápido</h3>
-            <p className="text-gray-500 text-[11px] sm:text-xs text-left leading-relaxed">Bun runtime com performance 3x superior ao Node.js</p>
-          </div>
-
-          <div className="group bg-white/[0.03] border border-white/[0.06] rounded-xl p-4 sm:p-5 hover:bg-white/[0.06] hover:border-theme transition-all duration-300">
-            <div className="w-8 h-8 rounded-lg bg-theme-accent flex items-center justify-center mb-3 group-hover:bg-theme-muted transition-colors">
-              <span className="text-sm">🔒</span>
-            </div>
-            <h3 className="text-xs sm:text-sm font-semibold text-white mb-1 text-left">Type Safe</h3>
-            <p className="text-gray-500 text-[11px] sm:text-xs text-left leading-relaxed">Eden Treaty com inferência end-to-end automática</p>
-          </div>
-
-          <div className="group bg-white/[0.03] border border-white/[0.06] rounded-xl p-4 sm:p-5 hover:bg-white/[0.06] hover:border-theme transition-all duration-300">
-            <div className="w-8 h-8 rounded-lg bg-theme-accent flex items-center justify-center mb-3 group-hover:bg-theme-muted transition-colors">
-              <span className="text-sm">🔥</span>
-            </div>
-            <h3 className="text-xs sm:text-sm font-semibold text-white mb-1 text-left">Live Components</h3>
-            <p className="text-gray-500 text-[11px] sm:text-xs text-left leading-relaxed">Estado reativo no servidor inspirado no Livewire</p>
-          </div>
-        </div>
-
-        <p className="text-gray-600 text-[11px] tracking-wide">
-          Desenvolvido com ❤️ usando TypeScript
-        </p>
-      </div>
-
-      <style>{`
-        @keyframes pulse-slow {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0.5; }
-        }
-        @keyframes float {
-          0%, 100% { transform: translateY(0); }
-          50% { transform: translateY(-6px); }
-        }
-        .animate-pulse-slow {
-          animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-        }
-        .animate-float {
-          animation: float 5s ease-in-out infinite;
-        }
-      `}</style>
-    </div>
-  )
-}
+import FluxStack from '@client/src/assets/fluxstack.svg'
+import { Link } from 'react-router'
+import {
+  FaArrowRight,
+  FaBolt,
+  FaCodeBranch,
+  FaLayerGroup,
+  FaServer,
+  FaShieldAlt,
+  FaTerminal,
+} from 'react-icons/fa'
+
+export function HomePage({ apiStatus }: { apiStatus: 'checking' | 'online' | 'offline' }) {
+  const statusCopy = {
+    checking: 'Checking API',
+    online: 'API Online',
+    offline: 'API Offline',
+  }[apiStatus]
+
+  const statusClass = {
+    checking: 'border-amber-400/25 bg-amber-400/10 text-amber-200',
+    online: 'border-emerald-400/25 bg-emerald-400/10 text-emerald-200',
+    offline: 'border-red-400/25 bg-red-400/10 text-red-200',
+  }[apiStatus]
+
+  const statusDotClass = {
+    checking: 'bg-amber-300',
+    online: 'bg-emerald-300',
+    offline: 'bg-red-300',
+  }[apiStatus]
+
+  const features = [
+    {
+      icon: FaBolt,
+      title: 'Runtime rapido',
+      copy: 'Bun no centro do fluxo de dev e build, com feedback curto para projetos full stack.',
+    },
+    {
+      icon: FaShieldAlt,
+      title: 'Type-safe',
+      copy: 'Contratos compartilhados entre Elysia, Eden Treaty e React sem duplicar modelos.',
+    },
+    {
+      icon: FaLayerGroup,
+      title: 'Live Components',
+      copy: 'Estado no servidor com UI reativa, salas em tempo real e componentes declarativos.',
+    },
+  ]
+
+  const stackItems = ['Bun', 'Elysia', 'React', 'TypeScript']
+
+  return (
+    <div className="relative min-h-[calc(100vh-72px)] overflow-hidden px-4 py-10 sm:px-6 lg:px-8">
+      <div className="absolute inset-0 app-grid-bg opacity-70" />
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/25 to-transparent" />
+
+      <div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col gap-10 lg:min-h-[calc(100vh-144px)] lg:justify-center">
+        <section className="grid items-center gap-8 lg:grid-cols-[1.04fr_0.96fr]">
+          <div className="max-w-3xl">
+            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
+              <span className={`h-1.5 w-1.5 rounded-full ${statusDotClass}`} />
+              <span className={`rounded-full border px-2 py-0.5 ${statusClass}`}>{statusCopy}</span>
+              <span className="hidden sm:inline">Full-stack starter for production apps</span>
+            </div>
+
+            <div className="mb-5 flex items-center gap-4">
+              <div className="relative flex h-16 w-16 items-center justify-center rounded-lg border border-white/10 bg-white/[0.04] shadow-2xl shadow-black/30">
+                <img src={FluxStack} alt="FluxStack" className="h-11 w-11 glow-theme" />
+              </div>
+              <div className="hidden h-px flex-1 bg-gradient-to-r from-white/20 to-transparent sm:block" />
+            </div>
+
+            <h1 className="max-w-4xl text-left text-5xl font-semibold tracking-tight text-white sm:text-6xl lg:text-7xl">
+              FluxStack
+              <span className="block bg-theme-gradient bg-clip-text text-transparent">
+                TypeScript full stack.
+              </span>
+            </h1>
+
+            <p className="mt-5 max-w-2xl text-left text-base leading-8 text-gray-400 sm:text-lg">
+              Um framework direto ao ponto para construir APIs Elysia, interfaces React,
+              componentes em tempo real e contratos type-safe em uma unica base.
+            </p>
+
+            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <Link
+                to="/counter"
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-lg bg-white px-5 text-sm font-semibold text-black transition hover:bg-gray-200"
+              >
+                Ver demos
+                <FaArrowRight className="h-3.5 w-3.5" />
+              </Link>
+              <a
+                href="/swagger"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-5 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.06]"
+              >
+                <FaServer className="h-3.5 w-3.5 text-theme" />
+                API docs
+              </a>
+            </div>
+
+            <div className="mt-8 flex flex-wrap gap-2">
+              {stackItems.map(item => (
+                <span key={item} className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs font-medium text-gray-300">
+                  {item}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative">
+            <div className="rounded-lg border border-white/10 bg-[#050508]/80 shadow-2xl shadow-black/40 backdrop-blur">
+              <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
+                <div className="flex items-center gap-2">
+                  <span className="h-2.5 w-2.5 rounded-full bg-red-400/80" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-amber-300/80" />
+                  <span className="h-2.5 w-2.5 rounded-full bg-emerald-300/80" />
+                </div>
+                <span className="font-mono text-xs text-gray-500">fluxstack.config.ts</span>
+              </div>
+              <div className="space-y-5 p-5 sm:p-6">
+                <div className="rounded-lg border border-white/10 bg-white/[0.03] p-4">
+                  <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
+                    <FaTerminal className="text-theme" />
+                    Ship from one command
+                  </div>
+                  <pre className="overflow-x-auto rounded-md bg-black/50 p-4 text-left text-xs leading-6 text-gray-300">
+                    <code>{`bunx create-fluxstack my-app
+cd my-app
+bun dev`}</code>
+                  </pre>
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div className="rounded-lg border border-white/10 bg-white/[0.03] p-4">
+                    <FaCodeBranch className="mb-4 text-theme-secondary" />
+                    <p className="text-sm font-semibold text-white">Typed routes</p>
+                    <p className="mt-1 text-xs leading-5 text-gray-500">Client e server compartilham o contrato.</p>
+                  </div>
+                  <div className="rounded-lg border border-white/10 bg-white/[0.03] p-4">
+                    <FaLayerGroup className="mb-4 text-theme" />
+                    <p className="text-sm font-semibold text-white">Live UI</p>
+                    <p className="mt-1 text-xs leading-5 text-gray-500">WebSocket, rooms e estado remoto.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="grid gap-3 sm:grid-cols-3">
+          {features.map(({ icon: Icon, title, copy }) => (
+            <article
+              key={title}
+              className="group rounded-lg border border-white/10 bg-white/[0.025] p-5 text-left transition hover:border-white/20 hover:bg-white/[0.045]"
+            >
+              <div className="mb-5 flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-black/30 text-theme transition group-hover:border-theme-active">
+                <Icon className="h-4 w-4" />
+              </div>
+              <h2 className="text-sm font-semibold text-white">{title}</h2>
+              <p className="mt-2 text-sm leading-6 text-gray-500">{copy}</p>
+            </article>
+          ))}
+        </section>
+      </div>
+    </div>
+  )
+}

package/app/server/live/LiveCounter.ts

@@ -1,68 +1,71 @@
-// LiveCounter - Contador compartilhado usando Room Events
-
-import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
-
-// Componente Cliente (Ctrl+Click para navegar)
-import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
-
-export class LiveCounter extends LiveComponent<typeof LiveCounter.defaultState> {
-  static componentName = 'LiveCounter'
-  static publicActions = ['increment', 'decrement', 'reset'] as const
-  static defaultState = {
-    count: 0,
-    lastUpdatedBy: null as string | null,
-    connectedUsers: 0
-  }
-  protected roomType = 'counter'
-
-  constructor(initialState: Partial<typeof LiveCounter.defaultState> = {}, ws: FluxStackWebSocket, options?: { room?: string; userId?: string }) {
-    super(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()
-  }
-}
+import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+import { CounterRoom } from './rooms/CounterRoom'
+
+import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
+
+export class LiveCounter extends LiveComponent<typeof LiveCounter.defaultState> {
+  static componentName = 'LiveCounter'
+  static publicActions = ['increment', 'decrement', 'reset'] as const
+  static defaultState = {
+    count: 0,
+    lastUpdatedBy: null as string | null,
+    connectedUsers: 0,
+  }
+
+  private roomId: string
+  private unsubscribeCounter: (() => void) | null = null
+  private unsubscribePresence: (() => void) | null = null
+
+  constructor(
+    initialState: Partial<typeof LiveCounter.defaultState> = {},
+    ws: FluxStackWebSocket,
+    options?: { room?: string; userId?: string }
+  ) {
+    super(initialState, ws, options)
+
+    this.roomId = options?.room ?? 'default'
+    const room = this.$room(CounterRoom, this.roomId)
+    room.join()
+
+    this.setState({
+      count: room.state.count,
+      lastUpdatedBy: room.state.lastUpdatedBy,
+      connectedUsers: room.state.onlineCount,
+    })
+
+    this.unsubscribeCounter = room.on('counter:updated', (data) => {
+      this.setState({
+        count: data.count,
+        lastUpdatedBy: data.updatedBy,
+      })
+    })
+
+    this.unsubscribePresence = room.on('presence:changed', (data) => {
+      this.setState({ connectedUsers: data.onlineCount })
+    })
+  }
+
+  async increment() {
+    const room = this.$room(CounterRoom, this.roomId)
+    const count = room.increment(this.userId || 'anonymous')
+    return { success: true, count }
+  }
+
+  async decrement() {
+    const room = this.$room(CounterRoom, this.roomId)
+    const count = room.decrement(this.userId || 'anonymous')
+    return { success: true, count }
+  }
+
+  async reset() {
+    const room = this.$room(CounterRoom, this.roomId)
+    const count = room.reset(this.userId || 'anonymous')
+    return { success: true, count }
+  }
+
+  destroy() {
+    this.unsubscribeCounter?.()
+    this.unsubscribePresence?.()
+    super.destroy()
+  }
+}

package/app/server/live/LiveSharedCounter.ts

@@ -19,7 +19,8 @@ export class LiveSharedCounter extends LiveComponent<typeof LiveSharedCounter.de
     onlineCount: 0
   }
 
-  private counterUnsub: (() => void) | null = null
+  private counterUnsub: (() => void) | null = null
+  private presenceUnsub: (() => void) | null = null
 
   constructor(
     initialState: Partial<typeof LiveSharedCounter.defaultState> = {},
@@ -40,12 +41,16 @@ export class LiveSharedCounter extends LiveComponent<typeof LiveSharedCounter.de
     })
 
     // Listen for updates from other users
-    this.counterUnsub = room.on('counter:updated', (data) => {
-      this.setState({
-        count: data.count,
-        lastUpdatedBy: data.updatedBy
-      })
-    })
+    this.counterUnsub = room.on('counter:updated', (data) => {
+      this.setState({
+        count: data.count,
+        lastUpdatedBy: data.updatedBy
+      })
+    })
+
+    this.presenceUnsub = room.on('presence:changed', (data) => {
+      this.setState({ onlineCount: data.onlineCount })
+    })
   }
 
   async increment() {
@@ -66,8 +71,9 @@ export class LiveSharedCounter extends LiveComponent<typeof LiveSharedCounter.de
     return { success: true, count }
   }
 
-  destroy() {
-    this.counterUnsub?.()
-    super.destroy()
-  }
-}
+  destroy() {
+    this.counterUnsub?.()
+    this.presenceUnsub?.()
+    super.destroy()
+  }
+}

package/app/server/live/auto-generated-components.ts

@@ -1,6 +1,6 @@
 // Auto-generated Live Components Registration
 // Generated by @fluxstack/live — DO NOT EDIT MANUALLY
-// Generated at: 2026-04-12T17:15:28.136Z
+// Generated at: 2026-04-15T23:06:28.958Z
 
 import { LiveAdminPanel } from "./LiveAdminPanel"
 import { LiveCounter } from "./LiveCounter"
@@ -10,7 +10,6 @@ import { LivePingPong } from "./LivePingPong"
 import { LiveProtectedChat } from "./LiveProtectedChat"
 import { LiveRoomChat } from "./LiveRoomChat"
 import { LiveSharedCounter } from "./LiveSharedCounter"
-import { LiveUpload } from "./LiveUpload"
 
 // Component classes array for LiveServer({ components }) option
 export const liveComponentClasses = [
@@ -22,5 +21,4 @@ export const liveComponentClasses = [
   LiveProtectedChat,
   LiveRoomChat,
   LiveSharedCounter,
-  LiveUpload,
 ]

package/app/server/live/rooms/CounterRoom.ts

@@ -12,22 +12,27 @@ interface CounterState {
   onlineCount: number
 }
 
-interface CounterEvents {
-  'counter:updated': { count: number; updatedBy: string }
-}
+interface CounterEvents {
+  'counter:updated': { count: number; updatedBy: string }
+  'presence:changed': { onlineCount: number }
+}
 
 export class CounterRoom extends LiveRoom<CounterState, {}, CounterEvents> {
   static roomName = 'counter'
   static defaultState: CounterState = { count: 0, lastUpdatedBy: null, onlineCount: 0 }
   static defaultMeta = {}
 
-  onJoin(_ctx: RoomJoinContext) {
-    this.setState({ onlineCount: this.state.onlineCount + 1 })
-  }
-
-  onLeave(_ctx: RoomLeaveContext) {
-    this.setState({ onlineCount: Math.max(0, this.state.onlineCount - 1) })
-  }
+  onJoin(_ctx: RoomJoinContext) {
+    const onlineCount = this.state.onlineCount + 1
+    this.setState({ onlineCount })
+    this.emit('presence:changed', { onlineCount })
+  }
+
+  onLeave(_ctx: RoomLeaveContext) {
+    const onlineCount = Math.max(0, this.state.onlineCount - 1)
+    this.setState({ onlineCount })
+    this.emit('presence:changed', { onlineCount })
+  }
 
   increment(username: string) {
     const count = this.state.count + 1

package/core/client/index.ts

@@ -30,6 +30,3 @@ export {
   treaty,
   type EdenClientOptions
 } from './api'
-
-// useLiveUpload (FluxStack-specific convenience wrapper)
-export { useLiveUpload } from './hooks/useLiveUpload'