create-fluxstack 1.13.0 → 1.14.0

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

@@ -1,5 +1,8 @@
+import { useState, useEffect } from 'react'
 import { Link, Outlet, useLocation } from 'react-router'
-import { FaBook, FaGithub } from 'react-icons/fa'
+import { FaBook, FaGithub, FaBars, FaTimes } from 'react-icons/fa'
+import FluxStackLogo from '@client/src/assets/fluxstack.svg'
+import faviconSvg from '@client/src/assets/fluxstack-static.svg?raw'
 
 const navItems = [
   { to: '/', label: 'Home' },
@@ -12,17 +15,60 @@ const navItems = [
   { to: '/api-test', label: 'API Test' }
 ]
 
+const routeFlameHue: Record<string, string> = {
+  '/': '0deg',              // roxo original
+  '/counter': '180deg',     // ciano
+  '/form': '300deg',        // rosa
+  '/upload': '60deg',       // amarelo
+  '/chat': '120deg',        // verde
+  '/room-chat': '240deg',   // azul
+  '/auth': '330deg',        // vermelho
+  '/api-test': '90deg',     // lima
+}
+
 export function AppLayout() {
   const location = useLocation()
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const current = navItems.find(item => item.to === location.pathname)
+    document.title = current ? `${current.label} - FluxStack` : 'FluxStack'
+
+    // Dynamic favicon with hue-rotate
+    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 link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+    if (!link) {
+      link = document.createElement('link')
+      link.rel = 'icon'
+      document.head.appendChild(link)
+    }
+    link.type = 'image/svg+xml'
+    link.href = url
+    return () => URL.revokeObjectURL(url)
+  }, [location.pathname])
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
-      <header className="sticky top-0 z-10 backdrop-blur-md bg-slate-900/60 border-b border-white/10">
-        <div className="container mx-auto px-6 py-4 flex flex-wrap items-center justify-between gap-4">
-          <div className="text-white font-semibold tracking-wide">
+      <header className="sticky top-0 z-50 backdrop-blur-md bg-slate-900/60 border-b border-white/10">
+        <div className="container mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between gap-4">
+          <Link to="/" className="flex items-center gap-2 text-white font-semibold tracking-wide">
+            <img
+              src={FluxStackLogo}
+              alt="FluxStack"
+              className="w-9 h-9 transition-[filter] duration-500 drop-shadow-[0_0_8px_rgba(168,85,247,0.5)]"
+              style={{ filter: `hue-rotate(${routeFlameHue[location.pathname] || '0deg'})` }}
+            />
             FluxStack
-          </div>
-          <nav className="flex flex-wrap items-center gap-2">
+          </Link>
+
+          {/* Desktop nav */}
+          <nav className="hidden md:flex items-center gap-2">
             {navItems.map((item) => {
               const active = location.pathname === item.to
               return (
@@ -40,27 +86,110 @@ export function AppLayout() {
               )
             })}
           </nav>
+
           <div className="flex items-center gap-2">
+            <a
+              href="https://live-docs.marcosbrendon.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hidden sm:inline-flex items-center gap-2 px-3 py-1.5 bg-purple-500/20 border border-purple-500/30 text-purple-200 rounded-lg text-sm hover:bg-purple-500/30 transition-all"
+            >
+              <FaBook />
+              Live Docs
+            </a>
             <a
               href="/swagger"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
+              className="hidden sm:inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
             >
               <FaBook />
-              Docs
+              API Docs
             </a>
             <a
               href="https://github.com/MarcosBrendonDePaula/FluxStack"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
+              className="hidden sm:inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
             >
               <FaGithub />
               GitHub
             </a>
+
+            {/* Mobile menu toggle */}
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="md:hidden p-2 text-gray-300 hover:text-white transition-colors"
+              aria-label="Toggle menu"
+            >
+              {menuOpen ? <FaTimes size={20} /> : <FaBars size={20} />}
+            </button>
           </div>
         </div>
+
+        {/* Mobile nav */}
+        {menuOpen && (
+          <div className="md:hidden border-t border-white/10 bg-slate-900/90 backdrop-blur-md">
+            <nav className="container mx-auto px-4 py-3 flex gap-4 relative">
+              <div className="flex flex-col gap-1 flex-1">
+              {navItems.map((item) => {
+                const active = location.pathname === item.to
+                return (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    onClick={() => setMenuOpen(false)}
+                    className={`px-3 py-2 rounded-lg text-sm transition-all ${
+                      active
+                        ? 'bg-white/15 text-white'
+                        : 'text-gray-300 hover:bg-white/10'
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                )
+              })}
+              <div className="flex flex-wrap gap-2 mt-2 pt-2 border-t border-white/10">
+                <a
+                  href="https://live-docs.marcosbrendon.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-2 bg-purple-500/20 border border-purple-500/30 text-purple-200 rounded-lg text-sm hover:bg-purple-500/30 transition-all"
+                >
+                  <FaBook />
+                  Live Docs
+                </a>
+                <a
+                  href="/swagger"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
+                >
+                  <FaBook />
+                  API Docs
+                </a>
+                <a
+                  href="https://github.com/MarcosBrendonDePaula/FluxStack"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
+                >
+                  <FaGithub />
+                  GitHub
+                </a>
+              </div>
+              </div>
+
+              {/* Logo floating right */}
+              <img
+                src={FluxStackLogo}
+                alt=""
+                className="absolute right-4 top-1/2 -translate-y-1/2 w-40 h-40 opacity-15 pointer-events-none transition-[filter] duration-500"
+                style={{ filter: `hue-rotate(${routeFlameHue[location.pathname] || '0deg'})` }}
+              />
+            </nav>
+          </div>
+        )}
       </header>
 
       <Outlet />

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

@@ -1,13 +1,13 @@
-import { useNavigate } from 'react-router'
-
-export function BackButton() {
-  const navigate = useNavigate()
-  return (
-    <button
-      onClick={() => navigate(-1)}
-      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>
-  )
-}
+import { useNavigate } from 'react-router'
+
+export function BackButton() {
+  const navigate = useNavigate()
+  return (
+    <button
+      onClick={() => navigate(-1)}
+      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>
+  )
+}

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

@@ -3,15 +3,15 @@ import { BackButton } from './BackButton'
 
 export function DemoPage({ children, note }: { children: ReactNode; note?: ReactNode }) {
   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">
+    <div className="min-h-[calc(100vh-56px)] sm:min-h-[calc(100vh-64px)] flex flex-col items-center justify-center px-3 sm:px-4 py-6 sm:py-8">
+      <div className="mb-4 sm:mb-8">
         <BackButton />
       </div>
-      <div className="w-full max-w-6xl">
+      <div className="w-full max-w-6xl mx-auto flex flex-col items-center">
         {children}
       </div>
       {note && (
-        <p className="mt-6 text-gray-400 text-sm max-w-md text-center">
+        <p className="mt-4 sm:mt-6 text-gray-400 text-xs sm:text-sm max-w-md text-center px-2">
           {note}
         </p>
       )}

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

@@ -27,7 +27,7 @@ function PublicSection() {
   })
 
   return (
-    <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+    <div className="bg-white/5 border border-white/10 rounded-xl p-4 sm:p-6">
       <h3 className="text-lg font-semibold text-white mb-1">Contador Público</h3>
       <p className="text-gray-400 text-xs mb-4">Sem autenticação necessária</p>
 
@@ -113,8 +113,8 @@ function AdminSection() {
   }
 
   return (
-    <div className="bg-white/5 border border-white/10 rounded-xl p-6">
-      <div className="flex items-center justify-between mb-4">
+    <div className="bg-white/5 border border-white/10 rounded-xl p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-4">
         <div>
           <h3 className="text-lg font-semibold text-white">Painel Admin</h3>
           <p className="text-gray-400 text-xs">
@@ -227,7 +227,7 @@ function AuthControls() {
   }
 
   return (
-    <div className="bg-white/5 border border-white/10 rounded-xl p-6 mb-6">
+    <div className="bg-white/5 border border-white/10 rounded-xl p-4 sm:p-6 mb-6">
       <h3 className="text-lg font-semibold text-white mb-2">Autenticação</h3>
 
       <div className="flex items-center gap-3 mb-4">
@@ -237,7 +237,7 @@ function AuthControls() {
         </span>
       </div>
 
-      <div className="flex gap-2">
+      <div className="flex flex-col sm:flex-row gap-2">
         <input
           value={token}
           onChange={e => setToken(e.target.value)}
@@ -245,26 +245,28 @@ function AuthControls() {
           placeholder="Token (JWT, API key, etc.)"
           className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
         />
-        <button
-          onClick={handleLogin}
-          disabled={isLoggingIn}
-          className="px-4 py-2 rounded-lg bg-emerald-500/20 border border-emerald-500/30 text-emerald-200 text-sm hover:bg-emerald-500/30 disabled:opacity-50"
-        >
-          {isLoggingIn ? 'Autenticando...' : 'Login'}
-        </button>
-        {authenticated && (
+        <div className="flex gap-2">
           <button
-            onClick={handleLogout}
-            className="px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-200 text-sm hover:bg-red-500/30"
+            onClick={handleLogin}
+            disabled={isLoggingIn}
+            className="flex-1 sm:flex-initial px-4 py-2 rounded-lg bg-emerald-500/20 border border-emerald-500/30 text-emerald-200 text-sm hover:bg-emerald-500/30 disabled:opacity-50"
           >
-            Logout
+            {isLoggingIn ? 'Autenticando...' : 'Login'}
           </button>
-        )}
+          {authenticated && (
+            <button
+              onClick={handleLogout}
+              className="flex-1 sm:flex-initial px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-200 text-sm hover:bg-red-500/30"
+            >
+              Logout
+            </button>
+          )}
+        </div>
       </div>
 
       <div className="mt-4 p-3 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
         <p className="text-emerald-300 text-xs font-semibold mb-2">Tokens de teste (dev only):</p>
-        <div className="grid grid-cols-3 gap-2 text-xs">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
           <button
             onClick={() => { setToken('admin-token'); }}
             className="px-2 py-1 rounded bg-purple-500/20 text-purple-300 hover:bg-purple-500/30"
@@ -304,8 +306,8 @@ function AuthControls() {
 export function AuthDemo() {
   return (
     <div className="space-y-6 w-full max-w-2xl mx-auto">
-      <div className="text-center mb-8">
-        <h2 className="text-3xl font-bold text-white mb-2">Live Components Auth</h2>
+      <div className="text-center mb-6 sm:mb-8">
+        <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">Live Components Auth</h2>
         <p className="text-gray-400">
           Sistema de autenticação declarativo para componentes real-time
         </p>
@@ -318,7 +320,7 @@ export function AuthDemo() {
         <AdminSection />
       </div>
 
-      <div className="bg-white/5 border border-white/10 rounded-xl p-6 text-xs text-gray-500 space-y-2">
+      <div className="bg-white/5 border border-white/10 rounded-xl p-4 sm:p-6 text-xs text-gray-500 space-y-2 overflow-x-auto">
         <h4 className="text-sm font-semibold text-gray-300 mb-3">Como funciona</h4>
         <p><strong className="text-purple-300">Server:</strong> <code>static auth = &#123; required: true, roles: [&apos;admin&apos;] &#125;</code></p>
         <p><strong className="text-purple-300">Server:</strong> <code>static actionAuth = &#123; deleteUser: &#123; permissions: [&apos;users.delete&apos;] &#125; &#125;</code></p>

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

@@ -44,7 +44,7 @@ export function ChatDemo() {
   }
 
   return (
-    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 w-full mx-auto">
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-4 sm:p-6 md:p-8 w-full max-w-2xl mx-auto">
       <h2 className="text-2xl font-bold text-white mb-2 text-center">Chat Compartilhado</h2>
       <p className="text-gray-400 text-sm text-center mb-4">
         Sala global em tempo real. Abra em várias abas para testar.
@@ -70,7 +70,7 @@ export function ChatDemo() {
       <div
         ref={containerRef}
         onScroll={handleScroll}
-        className="bg-black/40 border border-white/10 rounded-xl p-5 h-[28rem] overflow-auto space-y-3"
+        className="bg-black/40 border border-white/10 rounded-xl p-3 sm:p-5 h-72 sm:h-96 md:h-[28rem] overflow-auto space-y-3"
       >
         {chat.$state.messages.length === 0 && (
           <div className="text-gray-500 text-sm text-center">Nenhuma mensagem ainda</div>

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

@@ -47,16 +47,16 @@ export function CounterDemo() {
     }
 
     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">
+      <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-sm text-center mb-6">
+        <p className="text-gray-400 text-xs sm:text-sm text-center mb-4 sm:mb-6">
           {description}
         </p>
 
-        <div className="flex justify-center gap-4 mb-6">
+        <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'
@@ -74,8 +74,8 @@ export function CounterDemo() {
           </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">
+        <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-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
             {counter.$state.count}
           </div>
 
@@ -139,16 +139,16 @@ export function CounterDemo() {
     }
 
     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">
+      <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-sm text-center mb-6">
+        <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-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">
+        <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>
@@ -189,7 +189,7 @@ export function CounterDemo() {
   }
 
   return (
-    <div className="flex flex-col lg:flex-row gap-6 items-start justify-center">
+    <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 items-stretch justify-center">
       {renderLocalCounter()}
       {renderCounter(
         'Contador Isolado',

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

@@ -9,7 +9,7 @@ export function FormDemo() {
   // Sucesso
   if (form.submitted) {
     return (
-      <div className="p-6 bg-green-500/20 border border-green-500/30 rounded-xl text-center">
+      <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>
@@ -27,7 +27,7 @@ export function FormDemo() {
   }
 
   return (
-    <div className="p-6 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
+    <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 ${