create-fluxstack 1.17.1 → 1.18.0

package/core/config/index.ts

@@ -9,7 +9,14 @@
 
 import type { FluxStackConfig } from '@config'
 import { fluxStackConfig } from '@config'
-import { helpers } from '../utils/env'
+import { env } from '@fluxstack/config'
+
+const nodeEnv = (): string => env.get('NODE_ENV', 'development')
+const helpers = {
+  isDevelopment: () => nodeEnv() === 'development',
+  isProduction: () => nodeEnv() === 'production',
+  isTest: () => nodeEnv() === 'test',
+}
 import { logger } from '../utils/logger'
 
 // ============================================================================

package/core/framework/server.ts

@@ -7,11 +7,12 @@ import { fluxStackConfig } from "@config"
 import { getEnvironmentInfo } from "@core/config"
 import { logger, type Logger } from "@core/utils/logger"
 import { displayStartupBanner, type StartupInfo } from "@core/utils/logger/startup-banner"
-import { componentRegistry } from "@core/server/live"
+import { liveServer } from "@core/server/live"
 import { FluxStackError } from "@core/utils/errors"
 import { createTimer, formatBytes, isProduction, isDevelopment } from "@core/utils/helpers"
 import { createHash } from "crypto"
 import { createPluginUtils } from "@core/plugins/config"
+import { pluginClientHooks } from "@core/server/plugin-client-hooks"
 import type { Plugin } from "@core/plugins"
 
 export class FluxStackFramework {
@@ -142,7 +143,10 @@ export class FluxStackFramework {
       config: fullConfig,
       logger: pluginLogger,
       app: this.app,
-      utils: pluginUtils
+      utils: pluginUtils,
+      clientHooks: {
+        register: (hookName: string, jsCode: string) => pluginClientHooks.register(hookName, jsCode)
+      }
     }
 
     // Initialize plugin manager
@@ -826,7 +830,7 @@ export class FluxStackFramework {
         vitePort: this.cfg.client?.port,
         viteEmbedded: vitePluginActive, // Vite is embedded when plugin is active
         swaggerPath: '/swagger', // TODO: Get from swagger plugin config
-        liveComponents: componentRegistry.getRegisteredComponentNames()
+        liveComponents: liveServer?.registry.getRegisteredComponentNames() ?? []
       }
 
       // Display banner if enabled

package/core/index.ts

@@ -24,7 +24,7 @@ export * from './cli/generators'
 
 // Plugin system (avoid wildcard to prevent conflicts)
 export { PluginRegistry } from './plugins/registry'
-export { PluginDiscovery, pluginDiscovery } from './plugins/discovery'
+export { PluginDiscovery } from './plugins/discovery'
 export { PluginManager } from './plugins/manager'
 export { PluginUtils } from './plugins'
 

package/core/plugins/index.ts

@@ -34,7 +34,7 @@ export { PluginRegistry } from './registry'
 export type { PluginRegistryConfig } from './registry'
 
 // Plugin discovery
-export { PluginDiscovery, pluginDiscovery } from './discovery'
+export { PluginDiscovery } from './discovery'
 export type { PluginDiscoveryConfig } from './discovery'
 
 // Plugin configuration management

package/core/plugins/manager.ts

@@ -24,6 +24,7 @@ import type { Logger } from "@core/utils/logger"
 import { PluginRegistry } from "./registry"
 import { createPluginUtils } from "./config"
 import { FluxStackError } from "@core/utils/errors"
+import { pluginClientHooks } from "@core/server/plugin-client-hooks"
 import { EventEmitter } from "events"
 
 /**
@@ -505,7 +506,10 @@ export class PluginManager extends EventEmitter {
       logger: this.logger.child ? this.logger.child({ plugin: plugin.name }) : this.logger,
       app: this.app,
       utils: createPluginUtils(this.logger),
-      registry: this.registry
+      registry: this.registry,
+      clientHooks: {
+        register: (hookName: string, jsCode: string) => pluginClientHooks.register(hookName, jsCode)
+      }
     }
 
     this.contexts.set(plugin.name, context)

package/core/plugins/types.ts

@@ -33,12 +33,28 @@ export type PluginHook =
 
 export type PluginPriority = 'highest' | 'high' | 'normal' | 'low' | 'lowest' | number
 
+export interface PluginClientHooksAPI {
+  /**
+   * Register JavaScript code to be executed on the client at a specific hook point.
+   *
+   * Built-in hook points:
+   * - 'onEdenInit'    — runs after the Eden Treaty client is created
+   * - 'onLiveConnect'  — runs when the LiveComponents WebSocket connects
+   *
+   * @param hookName - The hook point name
+   * @param jsCode - JavaScript code string to execute on the client
+   */
+  register(hookName: string, jsCode: string): void
+}
+
 export interface PluginContext {
   config: FluxStackConfig
   logger: Logger
   app: unknown // Elysia app
   utils: PluginUtils
   registry?: unknown // Plugin registry reference
+  /** Register client-side JS hooks that plugins can inject */
+  clientHooks: PluginClientHooksAPI
 }
 
 export interface PluginUtils {
@@ -190,7 +206,7 @@ export namespace FluxStack {
    * @example
    * // ✅ New way (recommended):
    * // plugins/my-plugin/config/index.ts
-   * import { defineConfig, config } from '@core/utils/config-schema'
+   * import { defineConfig, config } from '@fluxstack/config'
    * export const myConfig = defineConfig({ ... })
    *
    * // ❌ Old way (deprecated):

package/core/server/index.ts

@@ -1,15 +1,18 @@
 // FluxStack framework exports
 export { FluxStackFramework } from "../framework/server"
-export { vitePlugin, staticPlugin } from "../plugins/built-in"
+export { vitePlugin } from "../plugins/built-in"
 export { swaggerPlugin } from "../plugins/built-in/swagger"
 export { PluginRegistry } from "../plugins/registry"
 export * from "../types"
 
 // Live Components exports
-export { liveComponentsPlugin, componentRegistry } from "./live"
+export { liveComponentsPlugin, liveServer, registerAuthProvider } from "./live"
 export { LiveComponent } from "../types/types"
 
 // Static Files Plugin
 export { staticFilesPlugin } from "./plugins/static-files-plugin"
 
+// Plugin Client Hooks
+export { pluginClientHooks } from "./plugin-client-hooks"
+
 export * from "../types/types"

package/core/server/live/index.ts

@@ -24,6 +24,7 @@ export { AuthenticatedContext, AnonymousContext, ANONYMOUS_CONTEXT } from '@flux
 export type {
   LiveAuthProvider,
   LiveAuthCredentials,
+  LiveAuthSession,
   LiveAuthUser,
   LiveAuthContext,
   LiveComponentAuth,
@@ -32,78 +33,14 @@ export type {
   LiveAuthResult,
 } from '@fluxstack/live'
 
-// Backward-compatible singleton accessors
-// These lazily access the LiveServer instance created by the plugin
-import { liveServer, pendingAuthProviders } from './websocket-plugin'
+// Register auth provider — buffers if LiveServer not yet initialized
+import { liveServer as _ls, pendingAuthProviders } from './websocket-plugin'
 import type { LiveAuthProvider as _LiveAuthProvider } from '@fluxstack/live'
-import type { ComponentRegistry as _ComponentRegistry } from '@fluxstack/live'
-import type { WebSocketConnectionManager as _WebSocketConnectionManager } from '@fluxstack/live'
-import type { RoomStateManager as _RoomStateManager } from '@fluxstack/live'
-import type { LiveRoomManager as _LiveRoomManager } from '@fluxstack/live'
-import type { RoomEventBus as _RoomEventBus } from '@fluxstack/live'
-import type { FileUploadManager as _FileUploadManager } from '@fluxstack/live'
-import type { PerformanceMonitor as _PerformanceMonitor } from '@fluxstack/live'
-import type { StateSignatureManager as _StateSignatureManager } from '@fluxstack/live'
-import type { LiveAuthManager as _LiveAuthManager } from '@fluxstack/live'
 
-function requireLiveServer() {
-  if (!liveServer) {
-    throw new Error(
-      'LiveComponents plugin not initialized. ' +
-      'Ensure the live-components plugin is loaded before accessing Live singletons.'
-    )
+export function registerAuthProvider(provider: _LiveAuthProvider) {
+  if (_ls) {
+    _ls.useAuth(provider)
+  } else {
+    pendingAuthProviders.push(provider)
   }
-  return liveServer
 }
-
-/**
- * Backward-compatible liveAuthManager.
- * Buffers register() calls that happen before the plugin setup(),
- * then delegates to liveServer.authManager once available.
- * @deprecated Access via liveServer.authManager instead
- */
-export const liveAuthManager: Pick<_LiveAuthManager, 'authenticate' | 'hasProviders' | 'authorizeRoom' | 'authorizeAction' | 'authorizeComponent'> & { register: (provider: _LiveAuthProvider) => void } = {
-  register(provider: _LiveAuthProvider) {
-    if (liveServer) {
-      liveServer.useAuth(provider)
-    } else {
-      pendingAuthProviders.push(provider)
-    }
-  },
-  get authenticate() { return requireLiveServer().authManager.authenticate.bind(requireLiveServer().authManager) },
-  get hasProviders() { return requireLiveServer().authManager.hasProviders.bind(requireLiveServer().authManager) },
-  get authorizeRoom() { return requireLiveServer().authManager.authorizeRoom.bind(requireLiveServer().authManager) },
-  get authorizeAction() { return requireLiveServer().authManager.authorizeAction.bind(requireLiveServer().authManager) },
-  get authorizeComponent() { return requireLiveServer().authManager.authorizeComponent.bind(requireLiveServer().authManager) },
-}
-
-/** Helper to create a typed lazy proxy that delegates to a LiveServer property */
-function createLazyProxy<T extends object>(accessor: () => T): T {
-  return new Proxy({} as T, {
-    get(_, prop) { return (accessor() as Record<string | symbol, unknown>)[prop] }
-  })
-}
-
-/** @deprecated Access via liveServer.registry instead */
-export const componentRegistry = createLazyProxy<_ComponentRegistry>(() => requireLiveServer().registry)
-
-/** @deprecated Access via liveServer.connectionManager instead */
-export const connectionManager = createLazyProxy<_WebSocketConnectionManager>(() => requireLiveServer().connectionManager)
-
-/** @deprecated Access via liveServer.roomManager instead */
-export const liveRoomManager = createLazyProxy<_LiveRoomManager>(() => requireLiveServer().roomManager)
-
-/** @deprecated Access via liveServer.roomEvents instead */
-export const roomEvents = createLazyProxy<_RoomEventBus>(() => requireLiveServer().roomEvents)
-
-/** @deprecated Access via liveServer.fileUploadManager instead */
-export const fileUploadManager = createLazyProxy<_FileUploadManager>(() => requireLiveServer().fileUploadManager)
-
-/** @deprecated Access via liveServer.performanceMonitor instead */
-export const performanceMonitor = createLazyProxy<_PerformanceMonitor>(() => requireLiveServer().performanceMonitor)
-
-/** @deprecated Access via liveServer.stateSignature instead */
-export const stateSignature = createLazyProxy<_StateSignatureManager>(() => requireLiveServer().stateSignature)
-
-// Room state backward compat
-export const roomState = createLazyProxy<_LiveRoomManager>(() => requireLiveServer().roomManager)

package/core/server/plugin-client-hooks.ts

@@ -0,0 +1,97 @@
+/**
+ * Plugin Client Hook Registry
+ *
+ * Singleton registry where server-side plugins register JavaScript code
+ * to be executed on the client. The client fetches these hooks via
+ * GET /api/__plugins/client-hooks and executes them at the right moment
+ * (e.g., when Eden Treaty initializes, when LiveComponents WebSocket connects).
+ *
+ * Plugins call `pluginClientHooks.register(hookName, jsCode)` during their
+ * setup phase to inject client-side behavior.
+ *
+ * Built-in hook points:
+ * - 'onEdenInit'    — runs after the Eden Treaty client is created
+ * - 'onLiveConnect'  — runs when the LiveComponents WebSocket connects
+ */
+
+class PluginClientHookRegistry {
+  private hooks = new Map<string, string[]>()
+  private _cachedSignature: string | null = null
+
+  /**
+   * Register a JavaScript code string to be executed on the client
+   * for the given hook name.
+   *
+   * @param hookName - The hook point name (e.g., 'onEdenInit', 'onLiveConnect')
+   * @param jsCode - JavaScript code string to execute on the client
+   */
+  register(hookName: string, jsCode: string): void {
+    const existing = this.hooks.get(hookName)
+    if (existing) {
+      existing.push(jsCode)
+    } else {
+      this.hooks.set(hookName, [jsCode])
+    }
+    this._cachedSignature = null // invalidate on change
+  }
+
+  /**
+   * Get all registered hooks as a plain object.
+   * Used by the HTTP endpoint to serialize the response.
+   */
+  getHooks(): Record<string, string[]> {
+    const result: Record<string, string[]> = {}
+    for (const [name, codes] of this.hooks) {
+      result[name] = [...codes]
+    }
+    return result
+  }
+
+  /**
+   * Get code strings for a specific hook name.
+   */
+  getHook(name: string): string[] {
+    return this.hooks.get(name) ? [...this.hooks.get(name)!] : []
+  }
+
+  /**
+   * Get HMAC-SHA256 signature of the hooks payload.
+   * Uses a per-process secret (random on startup) so the signature
+   * is only valid for this server instance.
+   *
+   * The client receives this signature via WebSocket (CONNECTION_ESTABLISHED)
+   * and verifies it against the HTTP response to prevent injection.
+   */
+  getSignature(): string {
+    if (this._cachedSignature) return this._cachedSignature
+    const { createHmac, randomBytes } = require('crypto')
+    if (!this._secret) this._secret = randomBytes(32)
+    const payload = JSON.stringify(this.getHooks())
+    this._cachedSignature = createHmac('sha256', this._secret).update(payload).digest('hex') as string
+    return this._cachedSignature!
+  }
+
+  /** @internal Per-process secret for HMAC signing */
+  private _secret: Buffer | null = null
+
+  /**
+   * Get hooks + signature for the HTTP response.
+   */
+  getSignedResponse(): { hooks: Record<string, string[]>; signature: string } {
+    return {
+      hooks: this.getHooks(),
+      signature: this.getSignature(),
+    }
+  }
+
+  /**
+   * Clear all registered hooks. Useful for testing.
+   */
+  clear(): void {
+    this.hooks.clear()
+    this._cachedSignature = null
+  }
+}
+
+export const pluginClientHooks = new PluginClientHookRegistry()
+export type { PluginClientHookRegistry }

package/core/types/types.ts

@@ -48,6 +48,7 @@ export type {
   LiveActionAuthMap,
   LiveAuthProvider,
   LiveAuthCredentials,
+  LiveAuthSession,
   LiveAuthUser,
   LiveAuthResult,
 } from '@fluxstack/live'

package/core/utils/version.ts

@@ -3,4 +3,4 @@
  * Single source of truth for version number
  * Auto-synced with package.json
  */
-export const FLUXSTACK_VERSION = '1.17.1'
+export const FLUXSTACK_VERSION = '1.18.0'

package/create-fluxstack.ts

@@ -418,7 +418,7 @@ FluxStack includes several built-in plugins that are ready to use:
 
 \`\`\`typescript
 // app/server/index.ts
-import { loggerPlugin, swaggerPlugin, staticPlugin } from "@core/server"
+import { swaggerPlugin } from "@core/server"
 
 // Add built-in plugins
 app.use(loggerPlugin)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fluxstack",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "⚡ Revolutionary full-stack TypeScript framework with Declarative Config System, Elysia + React + Bun",
   "keywords": [
     "framework",
@@ -75,12 +75,15 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@fluxstack/live": "^0.3.1",
-    "@fluxstack/live-elysia": "^0.2.1",
-    "@fluxstack/live-client": "^0.3.1",
-    "@fluxstack/live-react": "^0.3.1",
     "@elysiajs/eden": "^1.3.2",
     "@elysiajs/swagger": "^1.3.1",
+    "@fluxstack/config": "^1.0.0",
+    "@fluxstack/live": "^0.5.1",
+    "@fluxstack/live-client": "^0.5.1",
+    "@fluxstack/live-elysia": "^0.5.1",
+    "@fluxstack/live-react": "^0.5.1",
+    "@fluxstack/plugin-crypto-auth": "^1.0.0",
+    "@fluxstack/plugin-csrf-protection": "^1.1.0",
     "@vitejs/plugin-react": "^4.6.0",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",

package/src/client/components/ui/StatusBadge.tsx

@@ -0,0 +1,23 @@
+type StatusBadgeProps = {
+  status: 'online' | 'offline' | 'away'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export default function StatusBadge({ status, size = 'md' }: StatusBadgeProps) {
+  const statusClasses = {
+    online: 'bg-green-100 text-green-700',
+    offline: 'bg-gray-100 text-gray-700',
+    away: 'bg-yellow-100 text-yellow-700',
+  }
+  const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-1 text-sm',
+    lg: 'px-3 py-1.5 text-base',
+  }
+
+  return (
+    <span className={`inline-flex items-center rounded-full font-medium ${statusClasses[status]} ${sizeClasses[size]}`}>
+      {status}
+    </span>
+  )
+}