create-fluxstack 1.18.0 → 1.19.0

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

@@ -5,13 +5,13 @@ export function HomePage({ apiStatus }: { apiStatus: 'checking' | 'online' | 'of
     <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-purple-500/10 rounded-full blur-[120px] pointer-events-none" />
+      <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-purple-500/20 rounded-full blur-2xl animate-pulse-slow" />
+          <div className="absolute inset-0 bg-theme-muted rounded-full blur-2xl animate-pulse-slow" />
           <img
             src={FluxStack}
             alt="FluxStack"
@@ -20,17 +20,17 @@ export function HomePage({ apiStatus }: { apiStatus: 'checking' | 'online' | 'of
         </div>
 
         {/* Title */}
-        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-3 bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent tracking-tight leading-none">
+        <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-purple-400 font-semibold">Bun</span>
+          <span className="text-theme font-semibold">Bun</span>
           {' + '}
-          <span className="text-indigo-400 font-semibold">Elysia</span>
+          <span className="text-theme-secondary font-semibold">Elysia</span>
           {' + '}
-          <span className="text-cyan-400 font-semibold">React</span>
+          <span className="text-theme-secondary font-semibold">React</span>
           {' = '}
           <span className="text-white font-semibold">FluxStack</span>
         </p>
@@ -53,24 +53,24 @@ export function HomePage({ apiStatus }: { apiStatus: 'checking' | 'online' | 'of
 
         {/* 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-purple-500/20 transition-all duration-300">
-            <div className="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center mb-3 group-hover:bg-purple-500/20 transition-colors">
+          <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-indigo-500/20 transition-all duration-300">
-            <div className="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center mb-3 group-hover:bg-indigo-500/20 transition-colors">
+          <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-cyan-500/20 transition-all duration-300">
-            <div className="w-8 h-8 rounded-lg bg-cyan-500/10 flex items-center justify-center mb-3 group-hover:bg-cyan-500/20 transition-colors">
+          <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>

package/app/server/index.ts

@@ -17,6 +17,13 @@ import { liveComponentsPlugin, registerAuthProvider } from "@core/server/live"
 import { appInstance } from "@server/app"
 import { appConfig } from "@config"
 
+// 🔒 External plugins — registered explicitly via .use() so the bundler
+// includes them statically. Auto-discovery via node_modules/ was removed
+// in @fluxstack/plugin-kit@0.4.0 because it broke silently in production
+// bundles (dist/node_modules/ does not exist). Every plugin the app
+// wants to enable must be imported + `.use()`-d here.
+import { csrfProtectionPlugin } from "@fluxstack/plugin-csrf-protection"
+
 // 🔒 Auth provider para Live Components
 import { DevAuthProvider } from "./auth/DevAuthProvider"
 
@@ -33,6 +40,7 @@ initAuth()
 const framework = new FluxStackFramework()
   .use(swaggerPlugin)
   .use(liveComponentsPlugin)
+  .use(csrfProtectionPlugin)
 
 // Vite apenas em full-stack
 if (appConfig.mode !== 'backend-only') {

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-09T02:31:46.153Z
+// Generated at: 2026-04-11T19:00:17.642Z
 
 import { LiveAdminPanel } from "./LiveAdminPanel"
 import { LiveCounter } from "./LiveCounter"

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

@@ -2,7 +2,7 @@
 
 import { LiveRoom } from '@fluxstack/live'
 import type { RoomJoinContext, RoomLeaveContext } from '@fluxstack/live'
-import { createHash, timingSafeEqual } from 'crypto'
+import { createHash, randomBytes, timingSafeEqual } from 'crypto'
 
 export interface ChatMessage {
   id: string
@@ -33,15 +33,20 @@ export class ChatRoom extends LiveRoom<ChatState, ChatMeta, ChatEvents> {
   static defaultMeta: ChatMeta = { password: null, createdBy: null }
   static $options = { maxMembers: 100 }
 
-  /** Hash a password using SHA-256. */
+  /** Hash a password using SHA-256 with a random salt. Returns "salt:hash". */
   private static hashPassword(password: string): string {
-    return createHash('sha256').update(password).digest('hex')
+    const salt = randomBytes(16).toString('hex')
+    const hash = createHash('sha256').update(salt + password).digest('hex')
+    return salt + ':' + hash
   }
 
-  /** Constant-time comparison of two hex strings. */
-  private static safeCompare(a: string, b: string): boolean {
-    const bufA = Buffer.from(a, 'hex')
-    const bufB = Buffer.from(b, 'hex')
+  /** Verify a password against a stored "salt:hash" string using constant-time comparison. */
+  private static verifyPassword(password: string, stored: string): boolean {
+    const [salt, hash] = stored.split(':')
+    if (!salt || !hash) return false
+    const computed = createHash('sha256').update(salt + password).digest('hex')
+    const bufA = Buffer.from(computed, 'hex')
+    const bufB = Buffer.from(hash, 'hex')
     if (bufA.length !== bufB.length) return false
     return timingSafeEqual(bufA, bufB)
   }
@@ -56,7 +61,7 @@ export class ChatRoom extends LiveRoom<ChatState, ChatMeta, ChatEvents> {
     // Validate password if room is protected
     if (this.meta.password) {
       const provided = ctx.payload?.password
-      if (!provided || !ChatRoom.safeCompare(ChatRoom.hashPassword(provided), this.meta.password)) {
+      if (!provided || !ChatRoom.verifyPassword(provided, this.meta.password)) {
         return false // Rejected — wrong or missing password
       }
     }

package/app/server/routes/index.ts

@@ -3,6 +3,7 @@ import { usersRoutes } from "./users.routes"
 import { roomRoutes } from "./room.routes"
 import { authRoutes } from "./auth.routes"
 import { pluginClientHooks } from "@core/server/plugin-client-hooks"
+import { FLUXSTACK_VERSION } from "@core/utils/version"
 
 export const apiRoutes = new Elysia({ prefix: "/api" })
   .get("/", () => ({ message: "🔥 Hot Reload funcionando! FluxStack API v1.4.0 ⚡" }), {
@@ -15,24 +16,33 @@ export const apiRoutes = new Elysia({ prefix: "/api" })
       description: 'Returns a welcome message from the FluxStack API'
     }
   })
-  .get("/health", () => ({
-    status: "🚀 Hot Reload ativo!",
-    timestamp: new Date().toISOString(),
-    uptime: `${Math.floor(process.uptime())}s`,
-    version: "1.4.0",
-    environment: "development"
-  }), {
+  .get("/health", () => {
+    const checks = {
+      status: 'ok' as 'ok' | 'degraded' | 'error',
+      timestamp: new Date().toISOString(),
+      uptime: process.uptime(),
+      memory: {
+        used: Math.round(process.memoryUsage().heapUsed / 1024 / 1024),
+        total: Math.round(process.memoryUsage().heapTotal / 1024 / 1024),
+      },
+      version: FLUXSTACK_VERSION,
+    }
+    return checks
+  }, {
     response: t.Object({
       status: t.String(),
       timestamp: t.String(),
-      uptime: t.String(),
+      uptime: t.Number(),
+      memory: t.Object({
+        used: t.Number(),
+        total: t.Number(),
+      }),
       version: t.String(),
-      environment: t.String()
     }),
     detail: {
       tags: ['Health'],
       summary: 'Health Check',
-      description: 'Returns the current health status of the API server'
+      description: 'Returns the current health status of the API including uptime, memory usage, and version'
     }
   })
   // Plugin client hooks endpoint

package/core/build/index.ts

@@ -6,7 +6,7 @@ import { Bundler } from "./bundler"
 import { Optimizer } from "./optimizer"
 import { FLUXSTACK_VERSION } from "../utils/version"
 import { buildLogger } from "../utils/build-logger"
-import type { PluginRegistry } from "../plugins/registry"
+import type { PluginRegistry } from "@fluxstack/plugin-kit"
 import type { BuildContext, BuildAssetContext, BuildErrorContext } from "../plugins/types"
 
 /**

package/core/cli/command-registry.ts

@@ -4,7 +4,7 @@ import { logger } from "@core/utils/logger"
 import { buildLogger } from "@core/utils/build-logger"
 import { createTimer, formatBytes, isProduction, isDevelopment } from "../utils/helpers"
 import { createHash } from "crypto"
-import { createPluginUtils } from "../plugins/config"
+import { createPluginUtils } from "@fluxstack/plugin-kit"
 
 export class CliCommandRegistry {
   private commands = new Map<string, CliCommand>()

package/core/cli/commands/build.ts

@@ -6,6 +6,13 @@
 import type { CLICommand } from '../command-registry'
 import { FluxStackBuilder } from '@core/build'
 import { fluxStackConfig } from '@config'
+import {
+  PluginRegistry,
+  PluginManager,
+  type FluxStack,
+} from '@fluxstack/plugin-kit'
+import type { FluxStackConfig } from '@config'
+import { pluginClientHooks } from '@core/server/plugin-client-hooks'
 
 export const buildCommand: CLICommand = {
   name: 'build',
@@ -38,18 +45,30 @@ export const buildCommand: CLICommand = {
   handler: async (args, options, context) => {
     const config = fluxStackConfig
 
-    // Load plugins for build hooks
-    const { PluginRegistry } = await import('@core/plugins/registry')
-    const { PluginManager } = await import('@core/plugins/manager')
-    const pluginRegistry = new PluginRegistry({ config, logger: context.logger })
-    const pluginManager = new PluginManager({ config, logger: context.logger })
+    // Load plugins for build hooks. PluginRegistry + PluginManager now
+    // come from @fluxstack/plugin-kit (the single source of truth).
+    // Both constructors expect the plugin-related config slice explicitly
+    // via `settings`, and the manager additionally requires `clientHooks`.
+    const pluginRegistry = new PluginRegistry({
+      logger: context.logger,
+      settings: config.plugins,
+    })
+    const pluginManager = new PluginManager<FluxStackConfig>({
+      config,
+      settings: config.plugins,
+      logger: context.logger,
+      clientHooks: {
+        register: (hookName: string, jsCode: string) =>
+          pluginClientHooks.register(hookName, jsCode),
+      },
+    })
 
     try {
       await pluginManager.initialize()
       // Sync plugins to registry (same as framework does)
       const discoveredPlugins = pluginManager.getRegistry().getAll()
       const registryInternals = pluginRegistry as unknown as {
-        plugins: Map<string, import('@core/plugins/types').FluxStack.Plugin>
+        plugins: Map<string, FluxStack.Plugin>
         dependencies: Map<string, string[]>
         loadOrder: string[]
         updateLoadOrder(): void

package/core/cli/commands/plugin-deps.ts

@@ -4,8 +4,7 @@
 
 import { Command } from 'commander'
 import { buildLogger } from '@core/utils/build-logger'
-import { PluginDependencyManager } from '@core/plugins/dependency-manager'
-import { PluginRegistry } from '@core/plugins/registry'
+import { PluginDependencyManager, PluginRegistry } from '@fluxstack/plugin-kit'
 import { existsSync, readFileSync } from 'fs'
 import { join } from 'path'