create-fluxstack 1.18.1 → 1.20.0

package/LLMD/resources/routes-eden.md

@@ -1,254 +1,254 @@
-# Routes with Eden Treaty
-
-**Version:** 1.11.0 | **Updated:** 2025-02-08
-
-## Quick Facts
-
-- Routes use Elysia with `t.Object()` validation schemas
-- **Response schemas are REQUIRED** for Eden Treaty type inference
-- Frontend gets automatic type inference via Eden Treaty
-- Route grouping uses `prefix` option
-- Validation happens automatically via schemas
-
-## Route Definition Pattern
-
-```typescript
-import { Elysia, t } from 'elysia'
-
-export const usersRoutes = new Elysia({ prefix: '/users', tags: ['Users'] })
-  .get('/', async () => {
-    // Handler logic
-    return { success: true, users: [], count: 0 }
-  }, {
-    detail: {
-      summary: 'Get All Users',
-      description: 'Retrieves a list of all registered users',
-      tags: ['Users', 'CRUD']
-    },
-    response: t.Object({
-      success: t.Boolean(),
-      users: t.Array(UserSchema),
-      count: t.Number()
-    })
-  })
-```
-
-## Schema Definition
-
-Define schemas at the top of route files:
-
-```typescript
-const UserSchema = t.Object({
-  id: t.Number(),
-  name: t.String(),
-  email: t.String()
-}, {
-  description: 'User object'
-})
-
-const CreateUserRequestSchema = t.Object({
-  name: t.String({ minLength: 2, description: 'User name (minimum 2 characters)' }),
-  email: t.String({ format: 'email', description: 'Valid email address' })
-}, {
-  description: 'Request body for creating a new user'
-})
-```
-
-## Response Schema (REQUIRED!)
-
-**Every route MUST define a response schema** for Eden Treaty type inference:
-
-```typescript
-.get('/users', async () => {
-  return { success: true, users: [] }
-}, {
-  response: t.Object({
-    success: t.Boolean(),
-    users: t.Array(UserSchema)
-  })
-})
-```
-
-Without response schema, frontend loses type inference.
-
-## Multiple Status Code Responses
-
-```typescript
-.post('/', async ({ body, set }) => {
-  // Validation error
-  if (!body.name) {
-    set.status = 400
-    return { success: false, error: 'Name required' }
-  }
-  
-  // Success
-  set.status = 201
-  return { success: true, user: newUser }
-}, {
-  body: CreateUserRequestSchema,
-  response: {
-    201: t.Object({
-      success: t.Literal(true),
-      user: UserSchema
-    }),
-    400: t.Object({
-      success: t.Literal(false),
-      error: t.String()
-    })
-  }
-})
-```
-
-## Route Parameters
-
-```typescript
-.get('/:id', async ({ params }) => {
-  const id = Number(params.id)
-  return { success: true, user: foundUser }
-}, {
-  params: t.Object({
-    id: t.String({ description: 'User ID' })
-  }),
-  response: {
-    200: GetUserResponseSchema,
-    404: ErrorResponseSchema
-  }
-})
-```
-
-## Request Body Validation
-
-```typescript
-.post('/', async ({ body }) => {
-  // body is automatically validated against schema
-  const user = await createUser(body)
-  return { success: true, user }
-}, {
-  body: t.Object({
-    name: t.String({ minLength: 2 }),
-    email: t.String({ format: 'email' })
-  }),
-  response: CreateUserResponseSchema
-})
-```
-
-## Route Grouping
-
-```typescript
-// Main API routes with prefix
-export const apiRoutes = new Elysia({ prefix: "/api" })
-  .get("/health", () => ({ status: "ok" }), {
-    response: t.Object({ status: t.String() })
-  })
-  // Register sub-routes
-  .use(usersRoutes)
-  .use(postsRoutes)
-```
-
-## Frontend Usage (Eden Treaty)
-
-Once routes are defined with response schemas, frontend gets automatic type inference:
-
-```typescript
-import { api } from '@/lib/eden-api'
-
-// GET request - types inferred from response schema
-const { data, error } = await api.users.get()
-// data: { success: boolean, users: User[], count: number } | undefined
-// error: Error | undefined
-
-// POST request - body type inferred from body schema
-const { data, error } = await api.users.post({
-  name: 'John Doe',
-  email: 'john@example.com'
-})
-// TypeScript validates body matches CreateUserRequestSchema
-
-// Path parameters
-const { data } = await api.users({ id: '123' }).get()
-
-// Query parameters
-const { data } = await api.users.get({ 
-  query: { page: 1, limit: 10 } 
-})
-```
-
-## Type Flow Diagram
-
-```
-Backend Route Definition
-  ↓
-t.Object() Schema (response)
-  ↓
-Eden Treaty Type Inference
-  ↓
-Frontend api.users.get()
-  ↓
-Typed { data, error }
-```
-
-## Common Validation Types
-
-```typescript
-// String validations
-t.String({ minLength: 2, maxLength: 100 })
-t.String({ format: 'email' })
-t.String({ pattern: '^[a-z]+$' })
-
-// Number validations
-t.Number({ minimum: 0, maximum: 100 })
-t.Integer()
-
-// Arrays
-t.Array(t.String())
-t.Array(UserSchema, { minItems: 1 })
-
-// Optional fields
-t.Optional(t.String())
-
-// Unions (multiple types)
-t.Union([
-  t.Object({ success: t.Literal(true), data: t.Any() }),
-  t.Object({ success: t.Literal(false), error: t.String() })
-])
-
-// Enums
-t.Union([t.Literal('active'), t.Literal('inactive')])
-```
-
-## OpenAPI Documentation
-
-The `detail` object generates OpenAPI/Swagger documentation:
-
-```typescript
-.get('/users', handler, {
-  detail: {
-    summary: 'Get All Users',
-    description: 'Retrieves a list of all registered users',
-    tags: ['Users', 'CRUD']
-  },
-  response: ResponseSchema
-})
-```
-
-Access Swagger UI at `/swagger` when server is running.
-
-## Critical Rules
-
-**ALWAYS:**
-- Define response schema for every route
-- Use `t.Object()` for validation
-- Set `set.status` for non-200 responses
-- Define schemas at file top for reusability
-
-**NEVER:**
-- Omit response schema (breaks type inference)
-- Use plain objects without `t.Object()`
-- Forget to validate user input
-- Mix route logic with business logic (use controllers)
-
-## Related
-
-- [Controllers & Services](./controllers.md)
-- [Type Safety Patterns](../patterns/type-safety.md)
-- [Anti-Patterns](../patterns/anti-patterns.md)
+# Routes with Eden Treaty
+
+**Version:** 1.19.0 | **Updated:** 2026-04-14
+
+## Quick Facts
+
+- Routes use Elysia with `t.Object()` validation schemas
+- **Response schemas are REQUIRED** for Eden Treaty type inference
+- Frontend gets automatic type inference via Eden Treaty
+- Route grouping uses `prefix` option
+- Validation happens automatically via schemas
+
+## Route Definition Pattern
+
+```typescript
+import { Elysia, t } from 'elysia'
+
+export const usersRoutes = new Elysia({ prefix: '/users', tags: ['Users'] })
+  .get('/', async () => {
+    // Handler logic
+    return { success: true, users: [], count: 0 }
+  }, {
+    detail: {
+      summary: 'Get All Users',
+      description: 'Retrieves a list of all registered users',
+      tags: ['Users', 'CRUD']
+    },
+    response: t.Object({
+      success: t.Boolean(),
+      users: t.Array(UserSchema),
+      count: t.Number()
+    })
+  })
+```
+
+## Schema Definition
+
+Define schemas at the top of route files:
+
+```typescript
+const UserSchema = t.Object({
+  id: t.Number(),
+  name: t.String(),
+  email: t.String()
+}, {
+  description: 'User object'
+})
+
+const CreateUserRequestSchema = t.Object({
+  name: t.String({ minLength: 2, description: 'User name (minimum 2 characters)' }),
+  email: t.String({ format: 'email', description: 'Valid email address' })
+}, {
+  description: 'Request body for creating a new user'
+})
+```
+
+## Response Schema (REQUIRED!)
+
+**Every route MUST define a response schema** for Eden Treaty type inference:
+
+```typescript
+.get('/users', async () => {
+  return { success: true, users: [] }
+}, {
+  response: t.Object({
+    success: t.Boolean(),
+    users: t.Array(UserSchema)
+  })
+})
+```
+
+Without response schema, frontend loses type inference.
+
+## Multiple Status Code Responses
+
+```typescript
+.post('/', async ({ body, set }) => {
+  // Validation error
+  if (!body.name) {
+    set.status = 400
+    return { success: false, error: 'Name required' }
+  }
+  
+  // Success
+  set.status = 201
+  return { success: true, user: newUser }
+}, {
+  body: CreateUserRequestSchema,
+  response: {
+    201: t.Object({
+      success: t.Literal(true),
+      user: UserSchema
+    }),
+    400: t.Object({
+      success: t.Literal(false),
+      error: t.String()
+    })
+  }
+})
+```
+
+## Route Parameters
+
+```typescript
+.get('/:id', async ({ params }) => {
+  const id = Number(params.id)
+  return { success: true, user: foundUser }
+}, {
+  params: t.Object({
+    id: t.String({ description: 'User ID' })
+  }),
+  response: {
+    200: GetUserResponseSchema,
+    404: ErrorResponseSchema
+  }
+})
+```
+
+## Request Body Validation
+
+```typescript
+.post('/', async ({ body }) => {
+  // body is automatically validated against schema
+  const user = await createUser(body)
+  return { success: true, user }
+}, {
+  body: t.Object({
+    name: t.String({ minLength: 2 }),
+    email: t.String({ format: 'email' })
+  }),
+  response: CreateUserResponseSchema
+})
+```
+
+## Route Grouping
+
+```typescript
+// Main API routes with prefix
+export const apiRoutes = new Elysia({ prefix: "/api" })
+  .get("/health", () => ({ status: "ok" }), {
+    response: t.Object({ status: t.String() })
+  })
+  // Register sub-routes
+  .use(usersRoutes)
+  .use(postsRoutes)
+```
+
+## Frontend Usage (Eden Treaty)
+
+Once routes are defined with response schemas, frontend gets automatic type inference:
+
+```typescript
+import { api } from '@/lib/eden-api'
+
+// GET request - types inferred from response schema
+const { data, error } = await api.users.get()
+// data: { success: boolean, users: User[], count: number } | undefined
+// error: Error | undefined
+
+// POST request - body type inferred from body schema
+const { data, error } = await api.users.post({
+  name: 'John Doe',
+  email: 'john@example.com'
+})
+// TypeScript validates body matches CreateUserRequestSchema
+
+// Path parameters
+const { data } = await api.users({ id: '123' }).get()
+
+// Query parameters
+const { data } = await api.users.get({ 
+  query: { page: 1, limit: 10 } 
+})
+```
+
+## Type Flow Diagram
+
+```
+Backend Route Definition
+  ↓
+t.Object() Schema (response)
+  ↓
+Eden Treaty Type Inference
+  ↓
+Frontend api.users.get()
+  ↓
+Typed { data, error }
+```
+
+## Common Validation Types
+
+```typescript
+// String validations
+t.String({ minLength: 2, maxLength: 100 })
+t.String({ format: 'email' })
+t.String({ pattern: '^[a-z]+$' })
+
+// Number validations
+t.Number({ minimum: 0, maximum: 100 })
+t.Integer()
+
+// Arrays
+t.Array(t.String())
+t.Array(UserSchema, { minItems: 1 })
+
+// Optional fields
+t.Optional(t.String())
+
+// Unions (multiple types)
+t.Union([
+  t.Object({ success: t.Literal(true), data: t.Any() }),
+  t.Object({ success: t.Literal(false), error: t.String() })
+])
+
+// Enums
+t.Union([t.Literal('active'), t.Literal('inactive')])
+```
+
+## OpenAPI Documentation
+
+The `detail` object generates OpenAPI/Swagger documentation:
+
+```typescript
+.get('/users', handler, {
+  detail: {
+    summary: 'Get All Users',
+    description: 'Retrieves a list of all registered users',
+    tags: ['Users', 'CRUD']
+  },
+  response: ResponseSchema
+})
+```
+
+Access Swagger UI at `/swagger` when server is running.
+
+## Critical Rules
+
+**ALWAYS:**
+- Define response schema for every route
+- Use `t.Object()` for validation
+- Set `set.status` for non-200 responses
+- Define schemas at file top for reusability
+
+**NEVER:**
+- Omit response schema (breaks type inference)
+- Use plain objects without `t.Object()`
+- Forget to validate user input
+- Mix route logic with business logic (use controllers)
+
+## Related
+
+- [Controllers & Services](./controllers.md)
+- [Type Safety Patterns](../patterns/type-safety.md)
+- [Anti-Patterns](../patterns/anti-patterns.md)

package/app/client/src/App.tsx

@@ -21,11 +21,11 @@ function NotFoundPage() {
       <h1 className="text-6xl font-black text-white mb-4">404</h1>
       <p className="text-xl text-gray-400 mb-6">Pagina nao encontrada</p>
       <p className="text-sm text-gray-500 mb-8">
-        O caminho <code className="text-purple-400">{window.location.pathname}</code> nao existe.
+        O caminho <code className="text-theme">{window.location.pathname}</code> nao existe.
       </p>
       <a
         href="/"
-        className="px-6 py-3 rounded-xl bg-purple-500/20 border border-purple-500/30 text-purple-200 hover:bg-purple-500/30 transition-all"
+        className="px-6 py-3 rounded-xl bg-theme-muted border border-theme-active text-theme hover:bg-theme-muted transition-all"
       >
         Voltar ao inicio
       </a>
@@ -129,7 +129,7 @@ function AppContent() {
           path="/form"
           element={
             <DemoPage
-              note={<>? Este formul?rio usa <code className="text-purple-400">Live.use()</code> - cada campo sincroniza automaticamente com o servidor!</>}
+              note={<>? Este formul?rio usa <code className="text-theme">Live.use()</code> - cada campo sincroniza automaticamente com o servidor!</>}
             >
               <FormDemo />
             </DemoPage>
@@ -155,7 +155,7 @@ function AppContent() {
           path="/shared-counter"
           element={
             <DemoPage
-              note={<>Contador compartilhado usando <code className="text-purple-400">LiveRoom</code> - abra em varias abas!</>}
+              note={<>Contador compartilhado usando <code className="text-theme">LiveRoom</code> - abra em varias abas!</>}
             >
               <SharedCounterDemo />
             </DemoPage>
@@ -165,7 +165,7 @@ function AppContent() {
           path="/room-chat"
           element={
             <DemoPage
-              note={<>Chat com múltiplas salas usando o sistema <code className="text-purple-400">$room</code>.</>}
+              note={<>Chat com múltiplas salas usando o sistema <code className="text-theme">$room</code>.</>}
             >
               <RoomChatDemo />
             </DemoPage>
@@ -175,7 +175,7 @@ function AppContent() {
           path="/auth"
           element={
             <DemoPage
-              note={<>🔒 Sistema de autenticação declarativo para Live Components com <code className="text-purple-400">$auth</code>!</>}
+              note={<>🔒 Sistema de autenticação declarativo para Live Components com <code className="text-theme">$auth</code>!</>}
             >
               <AuthDemo />
             </DemoPage>
@@ -185,7 +185,7 @@ function AppContent() {
           path="/ping-pong"
           element={
             <DemoPage
-              note={<>Latency demo com <code className="text-cyan-400">msgpack</code> binary codec - mensagens binárias no WebSocket!</>}
+              note={<>Latency demo com <code className="text-theme-secondary">msgpack</code> binary codec - mensagens binárias no WebSocket!</>}
             >
               <PingPongDemo />
             </DemoPage>