create-fluxstack 1.22.0 → 1.22.1

package/app/client/src/framework/RscHomePage.tsx

@@ -1,125 +1,125 @@
-// HomePage como SERVER COMPONENT (RSC) — a página bonita original, portada.
-// Sem estado/interatividade → roda 100% no server, 0 JS no client.
-// Diferenças vs HomePage.tsx original:
-//  - <Link> (react-router) → <a> (navegação RSC usa anchor + fetch do payload)
-//  - apiStatus vem como prop do server (sem fetch client no shell)
-import FluxStack from '@client/src/assets/fluxstack.svg'
-import {
-  FaArrowRight,
-  FaBolt,
-  FaCodeBranch,
-  FaLayerGroup,
-  FaServer,
-  FaShieldAlt,
-  FaTerminal,
-} from 'react-icons/fa'
-
-export function RscHomePage() {
-  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 bg-emerald-300" />
-              <span className="rounded-full border border-emerald-400/25 bg-emerald-400/10 text-emerald-200 px-2 py-0.5">Server Rendered (RSC)</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">
-              <a href="/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" />
-              </a>
-              <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\ncd my-app\nbun 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>
-  )
-}
+// HomePage como SERVER COMPONENT (RSC) — a página bonita original, portada.
+// Sem estado/interatividade → roda 100% no server, 0 JS no client.
+// Diferenças vs HomePage.tsx original:
+//  - <Link> (react-router) → <a> (navegação RSC usa anchor + fetch do payload)
+//  - apiStatus vem como prop do server (sem fetch client no shell)
+import FluxStack from '@client/src/assets/fluxstack.svg'
+import {
+  FaArrowRight,
+  FaBolt,
+  FaCodeBranch,
+  FaLayerGroup,
+  FaServer,
+  FaShieldAlt,
+  FaTerminal,
+} from 'react-icons/fa'
+
+export function RscHomePage() {
+  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 bg-emerald-300" />
+              <span className="rounded-full border border-emerald-400/25 bg-emerald-400/10 text-emerald-200 px-2 py-0.5">Server Rendered (RSC)</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">
+              <a href="/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" />
+              </a>
+              <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\ncd my-app\nbun 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/client/src/framework/RscLink.tsx

@@ -1,31 +1,31 @@
-'use client'
-// Link client-side para navegação RSC sem reload. Intercepta o clique e usa
-// o navigate do RootClient (fetch do .rsc + transition). Cai pra <a> normal
-// em ctrl/cmd-click, target _blank, ou links externos.
-import type { ReactNode, MouseEvent } from 'react'
-import { navigate } from './navigation'
-
-export function RscLink({
-  href,
-  className,
-  children,
-  external,
-}: {
-  href: string
-  className?: string
-  children: ReactNode
-  external?: boolean
-}) {
-  function onClick(e: MouseEvent<HTMLAnchorElement>) {
-    if (external) return // deixa o browser tratar (ex: /swagger, target _blank)
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return
-    e.preventDefault()
-    navigate(href)
-  }
-
-  return (
-    <a href={href} className={className} onClick={onClick} {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
-      {children}
-    </a>
-  )
-}
+'use client'
+// Link client-side para navegação RSC sem reload. Intercepta o clique e usa
+// o navigate do RootClient (fetch do .rsc + transition). Cai pra <a> normal
+// em ctrl/cmd-click, target _blank, ou links externos.
+import type { ReactNode, MouseEvent } from 'react'
+import { navigate } from './navigation'
+
+export function RscLink({
+  href,
+  className,
+  children,
+  external,
+}: {
+  href: string
+  className?: string
+  children: ReactNode
+  external?: boolean
+}) {
+  function onClick(e: MouseEvent<HTMLAnchorElement>) {
+    if (external) return // deixa o browser tratar (ex: /swagger, target _blank)
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return
+    e.preventDefault()
+    navigate(href)
+  }
+
+  return (
+    <a href={href} className={className} onClick={onClick} {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
+      {children}
+    </a>
+  )
+}

package/app/client/src/framework/RscNav.tsx

@@ -1,42 +1,42 @@
-// Navbar SERVER COMPONENT — gerada automaticamente a partir das rotas descobertas
-// (file-based). Adicionar uma página em pages/ a faz aparecer aqui sozinha
-// (a menos que a página exporte `nav = false`). Links via RscLink (SPA sem reload).
-import FluxStackLogo from '@client/src/assets/fluxstack.svg'
-import { RscLink } from './RscLink'
-import { routes } from './routes'
-
-export function RscNav({ active }: { active: string }) {
-  const navItems = routes.filter((r) => r.inNav)
-
-  return (
-    <header className="sticky top-0 z-50 border-b border-white/10 bg-black/60 backdrop-blur">
-      <div className="mx-auto flex max-w-7xl items-center gap-6 px-4 py-3">
-        <RscLink href="/" className="flex items-center gap-2">
-          <img src={FluxStackLogo} alt="FluxStack" className="h-6 w-6" />
-          <span className="font-semibold text-white">FluxStack</span>
-        </RscLink>
-        <nav className="flex flex-wrap items-center gap-1">
-          {navItems.map((item) => {
-            const isActive = item.path === active
-            return (
-              <RscLink
-                key={item.path}
-                href={item.path}
-                className={`rounded-lg px-3 py-1.5 text-sm transition ${
-                  isActive
-                    ? 'bg-white/10 text-white'
-                    : 'text-gray-400 hover:bg-white/[0.05] hover:text-white'
-                }`}
-              >
-                {item.navLabel}
-              </RscLink>
-            )
-          })}
-        </nav>
-        <RscLink href="/swagger" external className="ml-auto text-sm text-gray-400 hover:text-white">
-          API docs
-        </RscLink>
-      </div>
-    </header>
-  )
-}
+// Navbar SERVER COMPONENT — gerada automaticamente a partir das rotas descobertas
+// (file-based). Adicionar uma página em pages/ a faz aparecer aqui sozinha
+// (a menos que a página exporte `nav = false`). Links via RscLink (SPA sem reload).
+import FluxStackLogo from '@client/src/assets/fluxstack.svg'
+import { RscLink } from './RscLink'
+import { routes } from './routes'
+
+export function RscNav({ active }: { active: string }) {
+  const navItems = routes.filter((r) => r.inNav)
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-white/10 bg-black/60 backdrop-blur">
+      <div className="mx-auto flex max-w-7xl items-center gap-6 px-4 py-3">
+        <RscLink href="/" className="flex items-center gap-2">
+          <img src={FluxStackLogo} alt="FluxStack" className="h-6 w-6" />
+          <span className="font-semibold text-white">FluxStack</span>
+        </RscLink>
+        <nav className="flex flex-wrap items-center gap-1">
+          {navItems.map((item) => {
+            const isActive = item.path === active
+            return (
+              <RscLink
+                key={item.path}
+                href={item.path}
+                className={`rounded-lg px-3 py-1.5 text-sm transition ${
+                  isActive
+                    ? 'bg-white/10 text-white'
+                    : 'text-gray-400 hover:bg-white/[0.05] hover:text-white'
+                }`}
+              >
+                {item.navLabel}
+              </RscLink>
+            )
+          })}
+        </nav>
+        <RscLink href="/swagger" external className="ml-auto text-sm text-gray-400 hover:text-white">
+          API docs
+        </RscLink>
+      </div>
+    </header>
+  )
+}

package/app/client/src/framework/RscRoot.tsx

@@ -1,54 +1,54 @@
-// SERVER COMPONENTS do site FluxStack via RSC — agora com roteamento FILE-BASED.
-//
-// O dev NÃO edita este arquivo para adicionar páginas: basta criar um arquivo em
-// app/client/src/pages/ (ver framework/routes.ts). Aqui só montamos a casca
-// (navbar + a página que casa com o pathname) a partir do mapa descoberto.
-import '../index.css' // Tailwind + temas
-import { RscNav } from './RscNav'
-import { routes, matchRoute } from './routes'
-
-function NotFound({ pathname }: { pathname: string }) {
-  return (
-    <div className="flex min-h-[calc(100vh-57px)] flex-col items-center justify-center gap-4 text-center">
-      <h1 className="text-6xl font-black text-white">404</h1>
-      <p className="text-gray-400">A rota <code className="text-theme">{pathname}</code> não existe.</p>
-      <a href="/" className="rounded-lg bg-white px-5 py-2 text-sm font-semibold text-black">Voltar ao início</a>
-    </div>
-  )
-}
-
-/** Conteúdo da rota (nav + página). É o que as navegações client buscam (.rsc). */
-export function RscPage({ pathname = '/' }: { pathname?: string }) {
-  const match = matchRoute(pathname)
-  return (
-    <>
-      <RscNav active={pathname} />
-      {match
-        ? <match.route.Component params={match.params} />
-        : <NotFound pathname={pathname} />}
-    </>
-  )
-}
-
-/** Documento completo. Controle client (navegação + keep-alive WS) vive no
- *  entry.browser; o body renderiza o RscPage direto.
- *  csrfToken: injetado pelo server p/ o client não precisar fazer fetch('/api/__csrf'). */
-export function RscDocument({ pathname = '/', csrfToken }: { pathname?: string; csrfToken?: string }) {
-  return (
-    <html lang="pt-BR">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        {csrfToken && <meta name="csrf-token" content={csrfToken} />}
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <title>FluxStack</title>
-      </head>
-      <body>
-        <RscPage pathname={pathname} />
-      </body>
-    </html>
-  )
-}
-
-// re-export para conveniência
-export { routes }
+// SERVER COMPONENTS do site FluxStack via RSC — agora com roteamento FILE-BASED.
+//
+// O dev NÃO edita este arquivo para adicionar páginas: basta criar um arquivo em
+// app/client/src/pages/ (ver framework/routes.ts). Aqui só montamos a casca
+// (navbar + a página que casa com o pathname) a partir do mapa descoberto.
+import '../index.css' // Tailwind + temas
+import { RscNav } from './RscNav'
+import { routes, matchRoute } from './routes'
+
+function NotFound({ pathname }: { pathname: string }) {
+  return (
+    <div className="flex min-h-[calc(100vh-57px)] flex-col items-center justify-center gap-4 text-center">
+      <h1 className="text-6xl font-black text-white">404</h1>
+      <p className="text-gray-400">A rota <code className="text-theme">{pathname}</code> não existe.</p>
+      <a href="/" className="rounded-lg bg-white px-5 py-2 text-sm font-semibold text-black">Voltar ao início</a>
+    </div>
+  )
+}
+
+/** Conteúdo da rota (nav + página). É o que as navegações client buscam (.rsc). */
+export function RscPage({ pathname = '/' }: { pathname?: string }) {
+  const match = matchRoute(pathname)
+  return (
+    <>
+      <RscNav active={pathname} />
+      {match
+        ? <match.route.Component params={match.params} />
+        : <NotFound pathname={pathname} />}
+    </>
+  )
+}
+
+/** Documento completo. Controle client (navegação + keep-alive WS) vive no
+ *  entry.browser; o body renderiza o RscPage direto.
+ *  csrfToken: injetado pelo server p/ o client não precisar fazer fetch('/api/__csrf'). */
+export function RscDocument({ pathname = '/', csrfToken }: { pathname?: string; csrfToken?: string }) {
+  return (
+    <html lang="pt-BR">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {csrfToken && <meta name="csrf-token" content={csrfToken} />}
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <title>FluxStack</title>
+      </head>
+      <body>
+        <RscPage pathname={pathname} />
+      </body>
+    </html>
+  )
+}
+
+// re-export para conveniência
+export { routes }

package/app/client/src/framework/csrf.ts

@@ -1,22 +1,22 @@
-// CSRF via SSR — gera o token no server e o entrega já no HTML.
-//
-// Em vez do client fazer fetch('/api/__csrf') após carregar (round-trip extra),
-// o render SSR gera o token, injeta <meta name="csrf-token"> no <head> e seta o
-// cookie XSRF-TOKEN na resposta. O client nasce com o token — zero round-trip.
-// (Padrão Rails/Laravel/Livewire: token no HTML inicial.)
-
-import { randomBytes } from 'crypto'
-
-export const CSRF_COOKIE = 'XSRF-TOKEN'
-
-/** Gera um token CSRF hex (mesmo formato do CsrfService do plugin). */
-export function generateCsrfToken(bytes = 32): string {
-  return randomBytes(bytes).toString('hex')
-}
-
-/** Monta o Set-Cookie do token (NÃO httpOnly — o JS client precisa ler). */
-export function buildCsrfCookie(token: string, secure: boolean): string {
-  const parts = [`${CSRF_COOKIE}=${token}`, 'Path=/', 'SameSite=Lax']
-  if (secure) parts.push('Secure')
-  return parts.join('; ')
-}
+// CSRF via SSR — gera o token no server e o entrega já no HTML.
+//
+// Em vez do client fazer fetch('/api/__csrf') após carregar (round-trip extra),
+// o render SSR gera o token, injeta <meta name="csrf-token"> no <head> e seta o
+// cookie XSRF-TOKEN na resposta. O client nasce com o token — zero round-trip.
+// (Padrão Rails/Laravel/Livewire: token no HTML inicial.)
+
+import { randomBytes } from 'crypto'
+
+export const CSRF_COOKIE = 'XSRF-TOKEN'
+
+/** Gera um token CSRF hex (mesmo formato do CsrfService do plugin). */
+export function generateCsrfToken(bytes = 32): string {
+  return randomBytes(bytes).toString('hex')
+}
+
+/** Monta o Set-Cookie do token (NÃO httpOnly — o JS client precisa ler). */
+export function buildCsrfCookie(token: string, secure: boolean): string {
+  const parts = [`${CSRF_COOKIE}=${token}`, 'Path=/', 'SameSite=Lax']
+  if (secure) parts.push('Secure')
+  return parts.join('; ')
+}