create-fluxstack 1.18.1 → 1.20.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-12T17:15:28.136Z
 
 import { LiveAdminPanel } from "./LiveAdminPanel"
 import { LiveCounter } from "./LiveCounter"

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'