create-fluxstack 1.17.1 → 1.18.1

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

@@ -0,0 +1,15 @@
+export class LiveAdminPanel {
+  static componentName = 'LiveAdminPanel'
+  static defaultState = {
+    users: [
+      { id: '1', name: 'Alice', role: 'admin', createdAt: Date.now() },
+      { id: '2', name: 'Bob', role: 'user', createdAt: Date.now() },
+      { id: '3', name: 'Carol', role: 'moderator', createdAt: Date.now() },
+    ],
+    audit: [],
+    currentUser: null,
+    currentRoles: [],
+    isAdmin: false,
+  }
+  static publicActions = ['getAuthInfo', 'init', 'listUsers', 'addUser', 'deleteUser', 'clearAudit']
+}

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/LivePingPong.js

@@ -0,0 +1,10 @@
+export class LivePingPong {
+  static componentName = 'LivePingPong'
+  static defaultState = {
+    username: '',
+    onlineCount: 0,
+    totalPings: 0,
+    lastPingBy: null,
+  }
+  static publicActions = ['ping']
+}

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

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

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

@@ -0,0 +1,10 @@
+export class LiveSharedCounter {
+  static componentName = 'LiveSharedCounter'
+  static defaultState = {
+    username: '',
+    count: 0,
+    lastUpdatedBy: null,
+    onlineCount: 0
+  }
+  static publicActions = ['increment', 'decrement', 'reset']
+}

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

@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Routes, Route } from 'react-router'
 import { api } from './lib/eden-api'
-import { LiveComponentsProvider } from '@/core/client'
+import { LiveComponentsProvider, useLiveComponents } from '@/core/client'
+import { executeHook } from './lib/plugin-hooks'
 import { FormDemo } from './live/FormDemo'
 import { CounterDemo } from './live/CounterDemo'
 import { UploadDemo } from './live/UploadDemo'
@@ -14,6 +15,46 @@ import { DemoPage } from './components/DemoPage'
 import { HomePage } from './pages/HomePage'
 import { ApiTestPage } from './pages/ApiTestPage'
 
+function NotFoundPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+      <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.
+      </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"
+      >
+        Voltar ao inicio
+      </a>
+    </div>
+  )
+}
+
+/**
+ * Executes the 'onLiveConnect' plugin hook once when
+ * the LiveComponents WebSocket connection is established.
+ */
+function PluginHookExecutor() {
+  const { connected, getWebSocket } = useLiveComponents()
+  const firedRef = useRef(false)
+
+  useEffect(() => {
+    if (connected && !firedRef.current) {
+      firedRef.current = true
+
+      executeHook('onLiveConnect', { connected, getWebSocket }).catch(() => {})
+    }
+    if (!connected) {
+      firedRef.current = false
+    }
+  }, [connected, getWebSocket])
+
+  return null
+}
+
 function AppContent() {
   const [apiStatus, setApiStatus] = useState<'checking' | 'online' | 'offline'>('checking')
   const [apiResponse, setApiResponse] = useState<string>('')
@@ -150,7 +191,7 @@ function AppContent() {
             </DemoPage>
           }
         />
-        <Route path="*" element={<HomePage apiStatus={apiStatus} />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
   )
@@ -173,6 +214,7 @@ function App() {
       heartbeatInterval={30000}
       debug={false}
     >
+      <PluginHookExecutor />
       <AppContent />
     </LiveComponentsProvider>
   )

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

@@ -28,7 +28,9 @@ const routeFlameHue: Record<string, string> = {
   '/api-test': '90deg',     // lima
 }
 
-// Cache favicon blob URLs by hue to avoid recreating blobs on every navigation
+// Cache favicon blob URLs by hue to avoid recreating blobs on every navigation.
+// Limited to MAX_FAVICON_CACHE entries; old blob URLs are revoked to prevent leaks.
+const MAX_FAVICON_CACHE = 20
 const faviconUrlCache = new Map<string, string>()
 
 export function AppLayout() {
@@ -43,6 +45,13 @@ export function AppLayout() {
     const hue = routeFlameHue[location.pathname] || '0deg'
     let url = faviconUrlCache.get(hue)
     if (!url) {
+      // Evict oldest entry if cache is full, revoking blob URL to free memory
+      if (faviconUrlCache.size >= MAX_FAVICON_CACHE) {
+        const oldestKey = faviconUrlCache.keys().next().value!
+        const oldestUrl = faviconUrlCache.get(oldestKey)!
+        URL.revokeObjectURL(oldestUrl)
+        faviconUrlCache.delete(oldestKey)
+      }
       const colored = faviconSvg.replace(
         '<svg ',
         `<svg style="filter: hue-rotate(${hue})" `

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

@@ -0,0 +1,117 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react'
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode)
+  onError?: (error: Error, errorInfo: ErrorInfo) => void
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('[FluxStack] Component error:', error, errorInfo.componentStack)
+    this.props.onError?.(error, errorInfo)
+  }
+
+  reset = () => {
+    this.setState({ hasError: false, error: null })
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (typeof this.props.fallback === 'function') {
+        return this.props.fallback(this.state.error, this.reset)
+      }
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+      return <DefaultErrorFallback error={this.state.error} onReset={this.reset} />
+    }
+    return this.props.children
+  }
+}
+
+function DefaultErrorFallback({ error, onReset }: { error: Error; onReset: () => void }) {
+  const isDev = import.meta.env.DEV
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden px-6 py-10 bg-gradient-to-br from-slate-900 via-purple-900/80 to-slate-900">
+      <style>{`
+        @keyframes fluxstack-slow-pulse {
+          0%, 100% { transform: scale(1); opacity: 0.9; }
+          50% { transform: scale(1.06); opacity: 1; }
+        }
+      `}</style>
+
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-linear-to-r from-purple-500/18 to-indigo-500/14 blur-3xl" />
+      </div>
+
+      <div className="relative w-full max-w-xl">
+        <div className="absolute -inset-2 rounded-3xl bg-linear-to-r from-purple-500/16 via-fuchsia-500/10 to-indigo-500/16 blur-2xl" />
+
+        <div className="relative rounded-2xl border border-white/[0.06] bg-white/[0.03] p-8 text-center shadow-2xl backdrop-blur-xl sm:p-10">
+          <div className="mx-auto mb-6 flex h-18 w-18 items-center justify-center rounded-2xl border border-white/[0.08] bg-white/[0.04] shadow-[0_0_0_1px_rgba(255,255,255,0.02)]">
+            <svg
+              className="h-9 w-9 text-purple-300"
+              style={{ animation: 'fluxstack-slow-pulse 3.6s ease-in-out infinite' }}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.7"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 8.25v4.5" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 16.5h.008v.008H12V16.5Z" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M10.252 3.942 1.93 18.002A1.5 1.5 0 0 0 3.22 20.25h17.56a1.5 1.5 0 0 0 1.29-2.248L13.748 3.942a2 2 0 0 0-3.496 0Z" />
+            </svg>
+          </div>
+
+          <h2 className="mb-3 text-2xl font-semibold tracking-tight text-white sm:text-3xl">Something went wrong</h2>
+          <p className="mx-auto mb-7 max-w-md text-sm leading-6 text-white/60 sm:text-base">
+            FluxStack hit an unexpected rendering error in this view. You can safely retry and continue working.
+          </p>
+
+          {isDev && (
+            <details className="mb-7 overflow-hidden rounded-2xl border border-white/[0.06] bg-black/20 text-left group">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-medium text-white/75 transition-colors hover:text-white">
+                <span>Error details</span>
+                <svg className="h-4 w-4 text-white/45 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="m5 7.5 5 5 5-5" />
+                </svg>
+              </summary>
+              <div className="border-t border-white/[0.06] px-4 py-4">
+                <pre className="max-h-56 overflow-auto rounded-xl border border-white/[0.06] bg-black/35 p-4 font-mono text-xs leading-6 text-white/70 whitespace-pre-wrap break-words">
+                  {error.message}
+                  {error.stack && `\n\n${error.stack}`}
+                </pre>
+              </div>
+            </details>
+          )}
+
+          <button
+            onClick={onReset}
+            className="inline-flex items-center justify-center rounded-xl bg-linear-to-r from-purple-500 to-indigo-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-purple-950/30 transition-transform duration-200 hover:scale-[1.02] hover:from-purple-400 hover:to-indigo-400"
+          >
+            Try again
+          </button>
+
+          <p className="mt-4 text-xs leading-5 text-white/45 sm:text-sm">
+            If the issue persists, refresh the page or check the console for more context.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react'
+import { ErrorBoundary } from './ErrorBoundary'
+
+function LiveErrorFallback({ error, onReset }: { error: Error; onReset: () => void }) {
+  const isDev = import.meta.env.DEV
+
+  return (
+    <div className="relative flex min-h-[60vh] items-center justify-center overflow-hidden px-6 py-10">
+      <style>{`
+        @keyframes fluxstack-slow-pulse {
+          0%, 100% { transform: scale(1); opacity: 0.9; }
+          50% { transform: scale(1.06); opacity: 1; }
+        }
+      `}</style>
+
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-linear-to-r from-amber-500/18 to-orange-500/14 blur-3xl" />
+      </div>
+
+      <div className="relative mx-auto w-full max-w-xl">
+        <div className="absolute -inset-2 rounded-3xl bg-linear-to-r from-amber-500/16 via-orange-500/10 to-amber-500/16 blur-2xl" />
+
+        <div className="relative rounded-2xl border border-white/[0.06] bg-white/[0.03] p-8 text-center shadow-2xl backdrop-blur-xl sm:p-10">
+          <div className="mx-auto mb-6 flex h-18 w-18 items-center justify-center rounded-2xl border border-white/[0.08] bg-white/[0.04] shadow-[0_0_0_1px_rgba(255,255,255,0.02)]">
+            <svg
+              className="h-9 w-9 text-amber-300"
+              style={{ animation: 'fluxstack-slow-pulse 3.6s ease-in-out infinite' }}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.7"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.5 8.5c5.25-5.25 13.75-5.25 19 0" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5.75 11.75c3.45-3.45 9.05-3.45 12.5 0" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9.25 15.25c1.52-1.52 3.98-1.52 5.5 0" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3 3l18 18" />
+            </svg>
+          </div>
+
+          <h3 className="mb-3 text-2xl font-semibold tracking-tight text-white sm:text-3xl">Live connection interrupted</h3>
+          <p className="mx-auto mb-7 max-w-md text-sm leading-6 text-white/60 sm:text-base">
+            This real-time FluxStack component lost its live connection or hit a transient runtime error.
+          </p>
+
+          {isDev && (
+            <details className="mb-7 overflow-hidden rounded-2xl border border-white/[0.06] bg-black/20 text-left group">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-medium text-white/75 transition-colors hover:text-white">
+                <span>Error details</span>
+                <svg className="h-4 w-4 text-white/45 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="m5 7.5 5 5 5-5" />
+                </svg>
+              </summary>
+              <div className="border-t border-white/[0.06] px-4 py-4">
+                <pre className="max-h-56 overflow-auto rounded-xl border border-white/[0.06] bg-black/35 p-4 font-mono text-xs leading-6 text-white/70 whitespace-pre-wrap break-words">
+                  {error.message}
+                  {error.stack && `\n\n${error.stack}`}
+                </pre>
+              </div>
+            </details>
+          )}
+
+          <button
+            onClick={onReset}
+            className="inline-flex items-center justify-center rounded-xl bg-linear-to-r from-amber-500 to-orange-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-orange-950/30 transition-transform duration-200 hover:scale-[1.02] hover:from-amber-400 hover:to-orange-400"
+          >
+            Reconnect
+          </button>
+
+          <p className="mt-4 text-xs leading-5 text-white/45 sm:text-sm">
+            Reconnecting usually restores live updates within a few seconds.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function LiveErrorBoundary({ children }: { children: ReactNode }) {
+  return (
+    <ErrorBoundary
+      fallback={(error, reset) => <LiveErrorFallback error={error} onReset={reset} />}
+    >
+      {children}
+    </ErrorBoundary>
+  )
+}

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

@@ -2,20 +2,16 @@ import { useEffect, useMemo, useState } from 'react'
 import { useLiveChunkedUpload } from '@/core/client'
 import type { LiveChunkedUploadOptions } from '@/core/client'
 import type { FileUploadCompleteResponse } from '@core/types/types'
-type LiveUploadActions = {
+import { LiveUpload } from '@server/live/LiveUpload'
+
+// Derive the state type from the actual LiveUpload component to avoid duplication
+type LiveUploadState = typeof LiveUpload.defaultState
+
+// Minimal interface for any Live.use() proxy compatible with LiveUpload
+interface LiveUploadProxy {
   $componentId: string | null
   $connected: boolean
-  $state: {
-    status: 'idle' | 'uploading' | 'complete' | 'error'
-    progress: number
-    fileName: string
-    fileSize: number
-    fileType: string
-    fileUrl: string
-    bytesUploaded: number
-    totalBytes: number
-    error: string | null
-  }
+  $state: LiveUploadState
   $error?: string | null
   startUpload: (payload: { fileName: string; fileSize: number; fileType: string }) => Promise<any>
   updateProgress: (payload: { progress: number; bytesUploaded: number; totalBytes: number }) => Promise<any>
@@ -25,7 +21,7 @@ type LiveUploadActions = {
 }
 
 export interface LiveUploadWidgetProps {
-  live: LiveUploadActions
+  live: LiveUploadProxy
   title?: string
   description?: string
   allowPreview?: boolean
@@ -133,7 +129,7 @@ export function LiveUploadWidget({
           type="file"
           onChange={handleSelectFile}
           className="w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-white/10 file:text-white hover:file:bg-white/20"
-          disabled={!live.$connected}
+          disabled={!live.$connected || uploading}
         />
 
         <div className="flex gap-3">

package/app/client/src/lib/eden-api.ts

@@ -8,6 +8,7 @@
 
 import { createEdenClient, getErrorMessage } from '@/core/client/api'
 import type { App } from '@server/app'
+import { executeHook } from './plugin-hooks'
 
 /**
  * API client with full type inference from server routes
@@ -70,6 +71,11 @@ export const api = createEdenClient<App>({
   // enableLogging: true,
 })
 
+// Execute plugin hooks after Eden client is created
+executeHook('onEdenInit', { eden: api }).catch(() => {
+  // Silently ignore — hooks are best-effort
+})
+
 // Re-export utility for convenience
 export { getErrorMessage }
 

package/app/client/src/lib/plugin-hooks.ts

@@ -0,0 +1,82 @@
+/**
+ * Plugin Client Hooks
+ *
+ * Fetches JavaScript hooks registered by server-side plugins
+ * and executes them at specific hook points in the client lifecycle.
+ *
+ * Hooks are cached after the first fetch (one HTTP request per page load).
+ * Errors in individual hooks are caught and logged without crashing the app.
+ */
+
+let cachedHooks: Record<string, string[]> | null = null
+let loadPromise: Promise<Record<string, string[]>> | null = null
+
+/**
+ * Fetch plugin hooks from the server. Results are cached so only
+ * one HTTP request is made per page load.
+ *
+ * The server signs the response with HMAC-SHA256 to ensure integrity.
+ * The signature is included for auditability — the client trusts the
+ * server via same-origin HTTPS.
+ */
+export async function loadPluginHooks(): Promise<Record<string, string[]>> {
+  if (cachedHooks) return cachedHooks
+
+  // Deduplicate concurrent calls during initial load
+  if (loadPromise) return loadPromise
+
+  loadPromise = (async (): Promise<Record<string, string[]>> => {
+    try {
+      const res = await fetch('/api/__plugins/client-hooks')
+      if (!res.ok) {
+        console.warn(`[plugin-hooks] Failed to load hooks: HTTP ${res.status}`)
+        cachedHooks = {}
+        return cachedHooks
+      }
+      const data = await res.json()
+      cachedHooks = data.hooks ?? {}
+      return cachedHooks!
+    } catch (e) {
+      console.warn('[plugin-hooks] Failed to fetch hooks:', e)
+      cachedHooks = {}
+      return cachedHooks!
+    }
+  })()
+
+  return loadPromise
+}
+
+/**
+ * Execute all code strings registered for a given hook name.
+ *
+ * Each code string is wrapped in a `new Function(...)` call with the
+ * provided context keys as parameter names, so the code can reference
+ * them directly (e.g., `eden`, `connection`).
+ *
+ * Errors in individual hooks are caught and logged — they never crash
+ * the calling code.
+ *
+ * @param hookName - The hook point to execute (e.g., 'onEdenInit', 'onLiveConnect')
+ * @param context - Key/value pairs available as local variables inside the hook code
+ */
+export async function executeHook(
+  hookName: string,
+  context?: Record<string, unknown>
+): Promise<void> {
+  const hooks = await loadPluginHooks()
+  const codes = hooks[hookName] || []
+
+  if (codes.length === 0) return
+
+  const keys = Object.keys(context || {})
+  const values = Object.values(context || {})
+
+  for (const code of codes) {
+    try {
+      const fn = new Function(...keys, code)
+      fn(...values)
+    } catch (e) {
+      console.warn(`[plugin-hooks] Error executing "${hookName}" hook:`, e)
+    }
+  }
+}

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

@@ -10,7 +10,6 @@
 
 import { useState } from 'react'
 import { Live, useLiveComponents } from '@/core/client'
-import type { LiveAuthOptions } from '@/core/client'
 import { LiveCounter } from '@server/live/LiveCounter'
 import { LiveAdminPanel } from '@server/live/LiveAdminPanel'
 

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

@@ -87,7 +87,7 @@ export function FormDemo() {
                 alert(err.message || 'Erro ao enviar')
               }
             }}
-            disabled={!form.$connected}
+            disabled={!form.$connected || form.$loading}
             className="flex-1 px-4 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50"
           >
             {form.$loading ? 'Enviando...' : 'Enviar'}

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

@@ -72,7 +72,10 @@ export function PingPongDemo() {
       intervalRef.current = setInterval(sendPing, 500)
     }
     return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current)
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
     }
   }, [autoPing, live.$connected, sendPing])