create-fluxstack 1.14.0 → 1.15.0

package/LLMD/resources/live-components.md

@@ -1,12 +1,16 @@
 # Live Components
 
-**Version:** 1.13.0 | **Updated:** 2025-02-09
+**Version:** 1.14.0 | **Updated:** 2025-02-27
 
 ## Quick Facts
 
 - Server-side state management with WebSocket sync
 - **Direct state access** - `this.count++` auto-syncs (v1.13.0)
+- **Lifecycle hooks** - `onMount()` / `onDestroy()` for proper initialization and cleanup (v1.14.0)
+- **HMR persistence** - `static persistent` + `this.$persistent` survives hot reloads (v1.14.0)
+- **Singleton components** - `static singleton = true` for shared server-side instances (v1.14.0)
 - **Mandatory `publicActions`** - Only whitelisted methods are callable from client (secure by default)
+- **Helpful error messages** - Forgotten `publicActions` entries show exactly what to fix (v1.14.0)
 - Automatic state persistence and re-hydration (with anti-replay nonces)
 - Room-based event system for multi-user sync
 - Type-safe client-server communication (FluxStackWebSocket)
@@ -53,6 +57,13 @@ export class LiveCounter extends LiveComponent<typeof LiveCounter.defaultState>
 }
 ```
 
+### Key Changes in v1.14.0
+
+1. **Lifecycle hooks** - `onMount()` (async) and `onDestroy()` (sync) replace constructor/destroy workarounds
+2. **HMR persistence** - `static persistent` + `this.$persistent` for data that survives hot module reloads
+3. **Singleton components** - `static singleton = true` for shared state across all connected clients
+4. **Better publicActions errors** - Clear message when a method exists but is missing from `publicActions`
+
 ### Key Changes in v1.13.0
 
 1. **Direct state access** - `this.count++` instead of `this.state.count++`
@@ -111,27 +122,207 @@ export class LiveCounter extends LiveComponent<typeof LiveCounter.defaultState>
 }
 ```
 
-## Lifecycle Methods
+## Lifecycle Hooks (v1.14.0)
+
+Full lifecycle hook system — no more constructor workarounds:
 
 ```typescript
 export class MyComponent extends LiveComponent<typeof MyComponent.defaultState> {
   static componentName = 'MyComponent'
+  static publicActions = ['doWork'] as const
+  static defaultState = { users: [] as string[], ready: false, currentRoom: '' }
+
+  private _pollTimer?: NodeJS.Timeout
+
+  // 1️⃣ Called when WebSocket connection is established (before onMount)
+  protected onConnect() {
+    console.log('WebSocket connected for this component')
+  }
+
+  // 2️⃣ Called AFTER component is fully mounted (rooms, auth, injections ready)
+  // Can be async!
+  protected async onMount() {
+    this.$room.join()
+    this.$room.on('user:joined', (user) => {
+      this.state.users = [...this.state.users, user]
+    })
+    const data = await fetchInitialData(this.$auth.user?.id)
+    this.state.ready = true
+    this._pollTimer = setInterval(() => this.poll(), 5000)
+  }
+
+  // Called after state is restored from localStorage (rehydration)
+  protected onRehydrate(previousState: typeof MyComponent.defaultState) {
+    if (!previousState.ready) {
+      this.state.ready = false // Re-validate stale state
+    }
+  }
+
+  // Called after any state mutation (proxy or setState)
+  protected onStateChange(changes: Partial<typeof MyComponent.defaultState>) {
+    if ('users' in changes) {
+      console.log(`User count: ${this.state.users.length}`)
+    }
+  }
+
+  // Called when joining a room
+  protected onRoomJoin(roomId: string) {
+    this.state.currentRoom = roomId
+  }
+
+  // Called when leaving a room
+  protected onRoomLeave(roomId: string) {
+    if (this.state.currentRoom === roomId) this.state.currentRoom = ''
+  }
+
+  // Called before each action — return false to cancel
+  protected onAction(action: string, payload: any) {
+    console.log(`[${this.id}] ${action}`, payload)
+    // return false  // ← would cancel the action
+  }
+
+  // Called when WebSocket drops (NOT on intentional unmount)
+  protected onDisconnect() {
+    console.log('Connection lost — saving recovery data')
+  }
+
+  // Called BEFORE internal cleanup (sync only)
+  protected onDestroy() {
+    clearInterval(this._pollTimer)
+  }
+
+  async doWork() { /* ... */ }
+  private poll() { /* ... */ }
+}
+```
+
+### Lifecycle Order
+
+```
+WebSocket connects
+  └→ onConnect()
+       └→ onMount()          ← async, rooms/auth ready
+            └→ [component active]
+                 ├→ onAction(action, payload)  ← before each action (return false to cancel)
+                 ├→ onStateChange(changes)     ← after each state mutation
+                 ├→ onRoomJoin(roomId)         ← when joining a room
+                 └→ onRoomLeave(roomId)        ← when leaving a room
+
+Connection drops:
+  └→ onDisconnect()          ← only on unexpected disconnect
+       └→ onDestroy()        ← sync, before internal cleanup
+
+Rehydration (reconnect with saved state):
+  └→ onConnect()
+       └→ onRehydrate(previousState)
+            └→ onMount()
+```
+
+### Rules
+
+| Hook | Async? | When |
+|------|--------|------|
+| `onConnect()` | No | WebSocket established, before mount |
+| `onMount()` | **Yes** | After all setup (rooms, auth, DI) |
+| `onRehydrate(prevState)` | No | After state restored from localStorage |
+| `onStateChange(changes)` | No | After every state mutation |
+| `onRoomJoin(roomId)` | No | After `$room.join()` |
+| `onRoomLeave(roomId)` | No | After `$room.leave()` |
+| `onAction(action, payload)` | **Yes** | Before action execution (return `false` to cancel) |
+| `onDisconnect()` | No | Connection lost (NOT intentional unmount) |
+| `onDestroy()` | No | Before internal cleanup |
+
+- All hooks are optional — override only what you need
+- All hook errors are caught and logged — they never break the system
+- Constructor is still needed ONLY for `this.onRoomEvent()` subscriptions
+- All hooks are in BLOCKED_ACTIONS — clients cannot call them remotely
+
+## HMR Persistence (v1.14.0)
+
+Data in `static persistent` survives Hot Module Replacement reloads via `globalThis`:
+
+```typescript
+export class LiveMigration extends LiveComponent<typeof LiveMigration.defaultState> {
+  static componentName = 'LiveMigration'
+  static publicActions = ['runMigration'] as const
+  static defaultState = { status: 'idle', lastResult: '' }
+
+  // Define shape and defaults for persistent data
+  static persistent = {
+    cache: {} as Record<string, any>,
+    runCount: 0
+  }
+
+  protected onMount() {
+    this.$persistent.runCount++
+    console.log(`Mount #${this.$persistent.runCount}`) // Survives HMR!
+  }
+
+  async runMigration(payload: { key: string }) {
+    // Check HMR-safe cache
+    if (this.$persistent.cache[payload.key]) {
+      return { cached: true, result: this.$persistent.cache[payload.key] }
+    }
+
+    const result = await expensiveComputation(payload.key)
+    this.$persistent.cache[payload.key] = result
+    this.state.lastResult = result
+    return { cached: false, result }
+  }
+}
+```
+
+**Key facts:**
+- `this.$persistent` reads from `globalThis.__fluxstack_persistent_{ComponentName}`
+- Each component class has its own namespace
+- Defaults come from `static persistent` — initialized once, then persisted
+- Not sent to client — server-only
+- `$persistent` is in BLOCKED_ACTIONS (can't be called from client)
+
+## Singleton Components (v1.14.0)
+
+When `static singleton = true`, only ONE server-side instance exists. All clients share the same state:
+
+```typescript
+export class LiveDashboard extends LiveComponent<typeof LiveDashboard.defaultState> {
+  static componentName = 'LiveDashboard'
+  static singleton = true  // All clients share this instance
+  static publicActions = ['refresh', 'addAlert'] as const
   static defaultState = {
-    // Define state here
+    visitors: 0,
+    alerts: [] as string[],
+    lastRefresh: ''
   }
 
-  // Constructor ONLY needed if:
-  // - Subscribing to room events
-  // - Custom initialization logic
-  // Otherwise, omit it entirely!
+  protected async onMount() {
+    this.state.visitors++
+    this.state.lastRefresh = new Date().toISOString()
+  }
 
-  destroy() {
-    // Cleanup subscriptions, timers, etc.
-    super.destroy()
+  async refresh() {
+    const data = await fetchDashboardData()
+    this.setState(data) // Broadcasts to ALL connected clients
+    return { success: true }
+  }
+
+  async addAlert(payload: { message: string }) {
+    this.state.alerts = [...this.state.alerts, payload.message]
+    // All clients see the new alert instantly
+    return { success: true }
   }
 }
 ```
 
+**How it works:**
+- First client to mount creates the singleton instance
+- Subsequent clients join the existing instance and receive current state
+- `emit` / `setState` / `this.state.x = y` broadcast to ALL connected WebSockets
+- When a client disconnects, it's removed from the singleton's connections
+- When the LAST client disconnects, the singleton is destroyed
+- Stats visible at `/api/live/stats` (shows singleton connection counts)
+
+**Use cases:** Shared dashboards, global migration state, admin panels, live counters
+
 ## State Management
 
 ### Reactive State Proxy (How It Works)
@@ -665,19 +856,23 @@ export class MyComponent extends LiveComponent<State> {
 - Define `static defaultState` inside the class
 - Use `typeof ClassName.defaultState` for type parameter
 - Use `declare` for each state property (TypeScript type hint)
-- Call `super.destroy()` in destroy method if overriding
+- Use `onMount()` for async initialization (rooms, auth, data fetching)
+- Use `onDestroy()` for cleanup (timers, connections) — sync only
 - Use `emitRoomEventWithState` for state changes in rooms
 - Handle errors in actions (throw Error)
 - Add client link: `import type { Demo as _Client } from '@client/...'`
+- Use `$persistent` for data that should survive HMR reloads
+- Use `static singleton = true` for shared cross-client state
 
 **NEVER:**
 - Omit `static publicActions` (component will deny ALL remote actions)
 - Export separate `defaultState` constant (use static)
 - Create constructor just to call super() (not needed)
 - Forget `static componentName` (breaks minification)
+- Override `destroy()` directly — use `onDestroy()` instead (v1.14.0)
 - Emit room events without subscribing first
 - Store non-serializable data in state
-- Use reserved names for state properties (id, state, ws, room, userId, $room, $rooms, $private, broadcastToRoom, roomType)
+- Use reserved names for state properties (id, state, ws, room, userId, $room, $rooms, $private, $persistent, broadcastToRoom, roomType)
 - Include `setValue` in `publicActions` unless you trust clients to modify any state key
 - Store sensitive data (tokens, API keys, secrets) in `state` — use `$private` instead
 

package/app/client/.live-stubs/LiveAdminPanel.js

@@ -0,0 +1,5 @@
+export class LiveAdminPanel {
+  static componentName = 'LiveAdminPanel'
+  static defaultState = {}
+  static publicActions = ['getAuthInfo', 'init', 'listUsers', 'addUser', 'deleteUser', 'clearAudit']
+}

package/app/client/.live-stubs/LiveChat.js

@@ -0,0 +1,7 @@
+export class LiveChat {
+  static componentName = 'LiveChat'
+  static defaultState = {
+    messages: []
+  }
+  static publicActions = ['sendMessage']
+}

package/app/client/.live-stubs/LiveCounter.js

@@ -0,0 +1,9 @@
+export class LiveCounter {
+  static componentName = 'LiveCounter'
+  static defaultState = {
+    count: 0,
+    lastUpdatedBy: null,
+    connectedUsers: 0
+  }
+  static publicActions = ['increment', 'decrement', 'reset']
+}

package/app/client/.live-stubs/LiveForm.js

@@ -0,0 +1,11 @@
+export class LiveForm {
+  static componentName = 'LiveForm'
+  static defaultState = {
+    name: '',
+    email: '',
+    message: '',
+    submitted: false,
+    submittedAt: null
+  }
+  static publicActions = ['submit', 'reset', 'validate', 'setValue']
+}

package/app/client/.live-stubs/LiveLocalCounter.js

@@ -0,0 +1,8 @@
+export class LiveLocalCounter {
+  static componentName = 'LiveLocalCounter'
+  static defaultState = {
+    count: 0,
+    clicks: 0
+  }
+  static publicActions = ['increment', 'decrement', 'reset']
+}

package/app/client/.live-stubs/LiveRoomChat.js

@@ -0,0 +1,10 @@
+export class LiveRoomChat {
+  static componentName = 'LiveRoomChat'
+  static defaultState = {
+    username: '',
+    activeRoom: null,
+    rooms: [],
+    messages: {}
+  }
+  static publicActions = ['joinRoom', 'leaveRoom', 'switchRoom', 'sendMessage', 'setUsername']
+}

package/app/client/.live-stubs/LiveTodoList.js

@@ -0,0 +1,9 @@
+export class LiveTodoList {
+  static componentName = 'LiveTodoList'
+  static defaultState = {
+    todos: [],
+    totalCreated: 0,
+    connectedUsers: 0
+  }
+  static publicActions = ['addTodo', 'toggleTodo', 'removeTodo', 'clearCompleted']
+}

package/app/client/.live-stubs/LiveUpload.js

@@ -0,0 +1,15 @@
+export class LiveUpload {
+  static componentName = 'LiveUpload'
+  static defaultState = {
+    status: 'idle',
+    progress: 0,
+    fileName: '',
+    fileSize: 0,
+    fileType: '',
+    fileUrl: '',
+    bytesUploaded: 0,
+    totalBytes: 0,
+    error: null
+  }
+  static publicActions = ['startUpload', 'updateProgress', 'completeUpload', 'failUpload', 'reset']
+}

package/app/client/src/App.tsx

@@ -8,6 +8,7 @@ import { UploadDemo } from './live/UploadDemo'
 import { ChatDemo } from './live/ChatDemo'
 import { RoomChatDemo } from './live/RoomChatDemo'
 import { AuthDemo } from './live/AuthDemo'
+import { TodoListDemo } from './live/TodoListDemo'
 import { AppLayout } from './components/AppLayout'
 import { DemoPage } from './components/DemoPage'
 import { HomePage } from './pages/HomePage'
@@ -127,6 +128,16 @@ function AppContent() {
             </DemoPage>
           }
         />
+        <Route
+          path="/todo"
+          element={
+            <DemoPage
+              note={<>Lista de tarefas colaborativa usando <code className="text-purple-400">Live.use()</code> + <code className="text-purple-400">Room Events</code>!</>}
+            >
+              <TodoListDemo />
+            </DemoPage>
+          }
+        />
         <Route
           path="/auth"
           element={

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

@@ -12,6 +12,7 @@ const navItems = [
   { to: '/chat', label: 'Chat' },
   { to: '/room-chat', label: 'Room Chat' },
   { to: '/auth', label: 'Auth' },
+  { to: '/todo', label: 'Todo List' },
   { to: '/api-test', label: 'API Test' }
 ]
 
@@ -23,9 +24,13 @@ const routeFlameHue: Record<string, string> = {
   '/chat': '120deg',        // verde
   '/room-chat': '240deg',   // azul
   '/auth': '330deg',        // vermelho
+  '/todo': '45deg',          // laranja
   '/api-test': '90deg',     // lima
 }
 
+// Cache favicon blob URLs by hue to avoid recreating blobs on every navigation
+const faviconUrlCache = new Map<string, string>()
+
 export function AppLayout() {
   const location = useLocation()
   const [menuOpen, setMenuOpen] = useState(false)
@@ -34,14 +39,18 @@ export function AppLayout() {
     const current = navItems.find(item => item.to === location.pathname)
     document.title = current ? `${current.label} - FluxStack` : 'FluxStack'
 
-    // Dynamic favicon with hue-rotate
+    // Dynamic favicon with hue-rotate (cached per hue value)
     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 url = faviconUrlCache.get(hue)
+    if (!url) {
+      const colored = faviconSvg.replace(
+        '<svg ',
+        `<svg style="filter: hue-rotate(${hue})" `
+      )
+      const blob = new Blob([colored], { type: 'image/svg+xml' })
+      url = URL.createObjectURL(blob)
+      faviconUrlCache.set(hue, url)
+    }
     let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
     if (!link) {
       link = document.createElement('link')
@@ -50,7 +59,6 @@ export function AppLayout() {
     }
     link.type = 'image/svg+xml'
     link.href = url
-    return () => URL.revokeObjectURL(url)
   }, [location.pathname])
 
   return (

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

@@ -7,7 +7,7 @@
 // - Filtering by component, event type, and search
 
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { useLiveDebugger, type DebugEvent, type DebugEventType, type ComponentSnapshot, type DebugFilter } from '@/core/client/hooks/useLiveDebugger'
+import { useLiveDebugger, type DebugEvent, type DebugEventType, type ComponentSnapshot, type DebugFilter } from '@fluxstack/live-react'
 
 // ===== Debugger Settings (shared with floating widget) =====
 

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

@@ -0,0 +1,158 @@
+// TodoListDemo - Lista de tarefas colaborativa em tempo real
+
+import { useState } from 'react'
+import { Live } from '@/core/client'
+import { LiveTodoList } from '@server/live/LiveTodoList'
+
+export function TodoListDemo() {
+  const [text, setText] = useState('')
+
+  const todoList = Live.use(LiveTodoList, {
+    room: 'global-todos'
+  })
+
+  const handleAdd = async () => {
+    if (!text.trim()) return
+    await todoList.addTodo({ text })
+    setText('')
+  }
+
+  const todos = todoList.$state.todos ?? []
+  const doneCount = todos.filter((t: any) => t.done).length
+  const pendingCount = todos.length - doneCount
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-5 sm:p-8 max-w-lg w-full mx-auto">
+      <h2 className="text-xl sm:text-2xl font-bold text-white mb-2 text-center">
+        Todo List Colaborativo
+      </h2>
+
+      <p className="text-gray-400 text-xs sm:text-sm text-center mb-4">
+        Abra em várias abas - todos compartilham a mesma lista!
+      </p>
+
+      {/* Status bar */}
+      <div className="flex flex-wrap justify-center gap-2 mb-6">
+        <div className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs ${
+          todoList.$connected
+            ? 'bg-emerald-500/20 text-emerald-300'
+            : 'bg-red-500/20 text-red-300'
+        }`}>
+          <div className={`w-2 h-2 rounded-full ${
+            todoList.$connected ? 'bg-emerald-400' : 'bg-red-400'
+          }`} />
+          {todoList.$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">
+          {todoList.$state.connectedUsers} online
+        </div>
+
+        <div className="flex items-center gap-2 px-3 py-1 rounded-full text-xs bg-purple-500/20 text-purple-300">
+          {todoList.$state.totalCreated} criadas
+        </div>
+      </div>
+
+      {/* Input */}
+      <div className="flex gap-2 mb-6">
+        <input
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
+          placeholder="Nova tarefa..."
+          className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500/50 transition-colors"
+        />
+        <button
+          onClick={handleAdd}
+          disabled={!todoList.$connected || !text.trim()}
+          className="px-5 py-3 bg-purple-500/20 hover:bg-purple-500/30 border border-purple-500/30 text-purple-300 rounded-xl transition-all disabled:opacity-50 font-medium"
+        >
+          +
+        </button>
+      </div>
+
+      {/* Stats */}
+      {todos.length > 0 && (
+        <div className="flex justify-between items-center mb-4 text-xs text-gray-500">
+          <span>{pendingCount} pendente(s) / {doneCount} feita(s)</span>
+          {doneCount > 0 && (
+            <button
+              onClick={() => todoList.clearCompleted()}
+              className="text-red-400 hover:text-red-300 transition-colors"
+            >
+              Limpar feitas
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Todo list */}
+      <div className="space-y-2 max-h-80 overflow-y-auto">
+        {todos.length === 0 ? (
+          <p className="text-gray-500 text-sm text-center py-8">
+            Nenhuma tarefa ainda. Adicione uma acima!
+          </p>
+        ) : (
+          todos.map((todo: any) => (
+            <div
+              key={todo.id}
+              className={`flex items-center gap-3 p-3 rounded-xl border transition-all ${
+                todo.done
+                  ? 'bg-emerald-500/5 border-emerald-500/20'
+                  : 'bg-white/5 border-white/10'
+              }`}
+            >
+              <button
+                onClick={() => todoList.toggleTodo({ id: todo.id })}
+                className={`w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all flex-shrink-0 ${
+                  todo.done
+                    ? 'bg-emerald-500 border-emerald-500 text-white'
+                    : 'border-gray-500 hover:border-purple-400'
+                }`}
+              >
+                {todo.done && (
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </button>
+
+              <span className={`flex-1 text-sm ${
+                todo.done ? 'text-gray-500 line-through' : 'text-white'
+              }`}>
+                {todo.text}
+              </span>
+
+              <span className="text-[10px] text-gray-600 flex-shrink-0">
+                {todo.createdBy}
+              </span>
+
+              <button
+                onClick={() => todoList.removeTodo({ id: todo.id })}
+                className="text-gray-600 hover:text-red-400 transition-colors flex-shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Loading indicator */}
+      {todoList.$loading && (
+        <div className="flex justify-center mt-4">
+          <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+
+      <div className="mt-6 pt-4 border-t border-white/10">
+        <p className="text-gray-500 text-xs text-center">
+          Usando <code className="text-purple-400">Live.use()</code> + <code className="text-purple-400">Room Events</code>
+        </p>
+      </div>
+    </div>
+  )
+}

package/app/server/auth/DevAuthProvider.ts

@@ -12,8 +12,8 @@ import type {
   LiveAuthProvider,
   LiveAuthCredentials,
   LiveAuthContext,
-} from '@core/server/live/auth/types'
-import { AuthenticatedContext } from '@core/server/live/auth/LiveAuthContext'
+} from '@fluxstack/live'
+import { AuthenticatedContext } from '@fluxstack/live'
 
 interface DevUser {
   id: string

package/app/server/auth/JWTAuthProvider.example.ts

@@ -13,8 +13,8 @@ import type {
   LiveAuthProvider,
   LiveAuthCredentials,
   LiveAuthContext,
-} from '@core/server/live/auth/types'
-import { AuthenticatedContext } from '@core/server/live/auth/LiveAuthContext'
+} from '@fluxstack/live'
+import { AuthenticatedContext } from '@fluxstack/live'
 
 /**
  * Exemplo de provider JWT para Live Components.

package/app/server/index.ts

@@ -13,12 +13,12 @@
 import { FluxStackFramework } from "@core/server"
 import { vitePlugin } from "@core/plugins/built-in/vite"
 import { swaggerPlugin } from "@core/plugins/built-in/swagger"
-import { liveComponentsPlugin } from "@core/server/live/websocket-plugin"
+import { liveComponentsPlugin } from "@core/server/live"
 import { appInstance } from "@server/app"
 import { appConfig } from "@config"
 
 // 🔒 Auth provider para Live Components
-import { liveAuthManager } from "@core/server/live/auth"
+import { liveAuthManager } from "@core/server/live"
 import { DevAuthProvider } from "./auth/DevAuthProvider"
 
 // 🔐 Auth system (Guard + Provider, Laravel-inspired)

package/app/server/live/LiveAdminPanel.ts

@@ -11,7 +11,7 @@
 // Client link: import type { AdminPanelDemo as _Client } from '@client/src/live/AdminPanelDemo'
 
 import { LiveComponent } from '@core/types/types'
-import type { LiveComponentAuth, LiveActionAuthMap } from '@core/server/live/auth/types'
+import type { LiveComponentAuth, LiveActionAuthMap } from '@core/types/types'
 
 // ===== State =====
 

package/app/server/live/LiveProtectedChat.ts

@@ -9,7 +9,7 @@
 //   import type { LiveProtectedChat as _Client } from '@client/src/live/ProtectedChat'
 
 import { LiveComponent } from '@core/types/types'
-import type { LiveComponentAuth, LiveActionAuthMap } from '@core/server/live/auth/types'
+import type { LiveComponentAuth, LiveActionAuthMap } from '@core/types/types'
 
 interface ChatMessage {
   id: number