@nextsparkjs/core 0.1.0-beta.75 → 0.1.0-beta.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/core",
-  "version": "0.1.0-beta.75",
+  "version": "0.1.0-beta.77",
   "description": "NextSpark - The complete SaaS framework for Next.js",
   "license": "MIT",
   "author": "NextSpark <hello@nextspark.dev>",
@@ -228,6 +228,22 @@
       "types": "./dist/components/patterns/pages/index.d.ts",
       "import": "./dist/components/patterns/pages/index.js"
     },
+    "./components/app": {
+      "types": "./dist/components/app/index.d.ts",
+      "import": "./dist/components/app/index.js"
+    },
+    "./components/app/layouts": {
+      "types": "./dist/components/app/layouts/index.d.ts",
+      "import": "./dist/components/app/layouts/index.js"
+    },
+    "./components/app/layouts/PublicNavbar": {
+      "types": "./dist/components/app/layouts/PublicNavbar.d.ts",
+      "import": "./dist/components/app/layouts/PublicNavbar.js"
+    },
+    "./components/app/layouts/PublicFooter": {
+      "types": "./dist/components/app/layouts/PublicFooter.d.ts",
+      "import": "./dist/components/app/layouts/PublicFooter.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -279,6 +295,10 @@
     "./entities/*": {
       "types": "./dist/entities/*.d.ts",
       "import": "./dist/entities/*.js"
+    },
+    "./entities/patterns/*": {
+      "types": "./dist/entities/patterns/*.d.ts",
+      "import": "./dist/entities/patterns/*.js"
     }
   },
   "files": [
@@ -296,17 +316,6 @@
     "README.md",
     "scripts"
   ],
-  "scripts": {
-    "postinstall": "node scripts/postinstall.mjs || true",
-    "build": "tsup && pnpm build:dts && pnpm build:ui-css",
-    "build:js": "tsup",
-    "build:dts": "tsc -p tsconfig.dts.json || echo '⚠️  DTS generation completed with some type errors (partial coverage)'",
-    "build:ui-css": "node scripts/build/build-ui-css.mjs",
-    "dev": "tsup --watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
   "peerDependencies": {
     "next": ">=14.0.0",
     "react": ">=18.0.0",
@@ -340,7 +349,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.1",
     "@inquirer/prompts": "^7.2.0",
-    "@nextsparkjs/testing": "0.1.0-beta.53",
+    "@nextsparkjs/testing": "^0.1.0-beta.75",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -401,6 +410,18 @@
     "stripe": "^18.5.0",
     "tailwind-merge": "^3.3.1",
     "uuid": "^13.0.0",
-    "zod": "^4.1.5"
+    "zod": "^4.1.5",
+    "@nextsparkjs/ui": "0.1.0-beta.77"
+  },
+  "scripts": {
+    "postinstall": "node scripts/postinstall.mjs || true",
+    "build": "tsup && pnpm build:dts && pnpm build:ui-css",
+    "build:js": "tsup",
+    "build:dts": "tsc -p tsconfig.dts.json || echo '⚠️  DTS generation completed with some type errors (partial coverage)'",
+    "build:ui-css": "node scripts/build/build-ui-css.mjs",
+    "dev": "tsup --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
-}
+}

package/templates/app/(auth)/accept-invite/[token]/page.tsx

@@ -0,0 +1,335 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Alert, AlertDescription, AlertTitle } from '@nextsparkjs/core/components/ui/alert'
+import { Loader2, CheckCircle, XCircle, Users, LogIn, UserPlus } from 'lucide-react'
+import { toast } from 'sonner'
+import Link from 'next/link'
+import { sel } from '@nextsparkjs/core/selectors'
+
+type InvitationStatus = 'loading' | 'valid' | 'accepting' | 'accepted' | 'error' | 'expired' | 'not_found' | 'email_mismatch' | 'already_member' | 'requires_auth'
+
+interface InvitationInfo {
+  teamName: string
+  inviterName: string
+  role: string
+  email: string
+}
+
+export default function AcceptInvitePage() {
+  const params = useParams()
+  const router = useRouter()
+  const { user, isLoading: authLoading } = useAuth()
+  const token = params.token as string
+
+  const [status, setStatus] = useState<InvitationStatus>('loading')
+  const [invitationInfo, setInvitationInfo] = useState<InvitationInfo | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string>('')
+  const autoAcceptAttempted = useRef(false)
+
+  // Validate invitation and auto-accept when user is authenticated
+  useEffect(() => {
+    if (authLoading) return
+
+    async function validateAndAccept() {
+      try {
+        // First validate the invitation
+        const response = await fetch(`/api/v1/team-invitations/${token}`)
+        const data = await response.json()
+
+        if (!response.ok) {
+          if (data.code === 'INVITATION_NOT_FOUND') {
+            setStatus('not_found')
+          } else if (data.code === 'INVITATION_EXPIRED') {
+            setStatus('expired')
+          } else {
+            setStatus('error')
+            setErrorMessage(data.error || 'Failed to validate invitation')
+          }
+          return
+        }
+
+        const info = {
+          teamName: data.data.teamName || 'Unknown Team',
+          inviterName: data.data.inviterName || 'Someone',
+          role: data.data.role,
+          email: data.data.email
+        }
+        setInvitationInfo(info)
+
+        // Check if user is logged in
+        if (!user) {
+          setStatus('requires_auth')
+          return
+        }
+
+        // Check email match
+        if (user.email.toLowerCase() !== data.data.email.toLowerCase()) {
+          setStatus('email_mismatch')
+          setErrorMessage(`This invitation was sent to ${data.data.email}, but you are logged in as ${user.email}`)
+          return
+        }
+
+        // Auto-accept the invitation since user is authenticated and email matches
+        if (autoAcceptAttempted.current) return
+        autoAcceptAttempted.current = true
+
+        setStatus('accepting')
+
+        const acceptResponse = await fetch(`/api/v1/team-invitations/${token}/accept`, {
+          method: 'POST',
+          credentials: 'include'
+        })
+
+        const acceptData = await acceptResponse.json()
+
+        if (!acceptResponse.ok) {
+          if (acceptData.code === 'ALREADY_MEMBER') {
+            setStatus('already_member')
+          } else if (acceptData.code === 'EMAIL_MISMATCH') {
+            setStatus('email_mismatch')
+            setErrorMessage(acceptData.error)
+          } else if (acceptData.code === 'INVITATION_EXPIRED') {
+            setStatus('expired')
+          } else {
+            setStatus('error')
+            setErrorMessage(acceptData.error || 'Failed to accept invitation')
+          }
+          return
+        }
+
+        setStatus('accepted')
+        toast.success(`Welcome to ${info.teamName}!`, {
+          description: 'You have successfully joined the team'
+        })
+
+        // Redirect to dashboard after a short delay
+        setTimeout(() => {
+          router.push('/dashboard/settings/teams')
+        }, 1500)
+      } catch {
+        setStatus('error')
+        setErrorMessage('Failed to validate invitation')
+      }
+    }
+
+    validateAndAccept()
+  }, [token, user, authLoading, router])
+
+  // Accept invitation (manual fallback)
+  const handleAccept = async () => {
+    setStatus('accepting')
+
+    try {
+      const response = await fetch(`/api/v1/team-invitations/${token}/accept`, {
+        method: 'POST',
+        credentials: 'include'
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        if (data.code === 'ALREADY_MEMBER') {
+          setStatus('already_member')
+        } else if (data.code === 'EMAIL_MISMATCH') {
+          setStatus('email_mismatch')
+          setErrorMessage(data.error)
+        } else if (data.code === 'INVITATION_EXPIRED') {
+          setStatus('expired')
+        } else {
+          setStatus('error')
+          setErrorMessage(data.error || 'Failed to accept invitation')
+        }
+        return
+      }
+
+      setStatus('accepted')
+      toast.success(`Welcome to ${invitationInfo?.teamName}!`, {
+        description: 'You have successfully joined the team'
+      })
+
+      // Redirect to dashboard after a short delay
+      setTimeout(() => {
+        router.push('/dashboard/settings/teams')
+      }, 1500)
+    } catch {
+      setStatus('error')
+      setErrorMessage('Failed to accept invitation')
+    }
+  }
+
+  // Build auth URLs with invitation context
+  const buildAuthUrl = (path: string) => {
+    const params = new URLSearchParams({
+      callbackUrl: `/accept-invite/${token}`,
+      fromInvite: 'true',
+    })
+    if (invitationInfo?.email) {
+      params.set('email', invitationInfo.email)
+    }
+    // Pass token for signup to skip email verification
+    if (path === '/signup') {
+      params.set('inviteToken', token)
+    }
+    return `${path}?${params.toString()}`
+  }
+
+  const loginUrl = buildAuthUrl('/login')
+  const signupUrl = buildAuthUrl('/signup')
+
+  // Loading state
+  if (authLoading || status === 'loading') {
+    return (
+      <div className="flex flex-col items-center py-6" data-cy={sel('teams.acceptInvite.loading')}>
+        <Loader2 className="h-10 w-10 animate-spin text-primary" />
+        <p className="mt-4 text-muted-foreground">Validating invitation...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6" data-cy={sel('teams.acceptInvite.container')}>
+      {/* Header with icon */}
+      <div className="text-center" data-cy={sel('teams.acceptInvite.info')}>
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+          <Users className="h-6 w-6 text-primary" />
+        </div>
+        <h2 className="text-xl font-semibold">Team Invitation</h2>
+        {invitationInfo && (
+          <p className="text-sm text-muted-foreground mt-1">
+            You&apos;ve been invited to join <strong data-cy={sel('teams.acceptInvite.teamName')}>{invitationInfo.teamName}</strong>
+          </p>
+        )}
+      </div>
+
+      {/* Requires Authentication */}
+      {status === 'requires_auth' && invitationInfo && (
+        <div data-cy={sel('teams.acceptInvite.requiresAuth')}>
+          <div className="rounded-lg border p-4 space-y-2 bg-muted/50">
+            <p className="text-sm text-muted-foreground">
+              <strong data-cy={sel('teams.acceptInvite.inviter')}>{invitationInfo.inviterName}</strong> has invited you to join <strong>{invitationInfo.teamName}</strong> as a <strong data-cy={sel('teams.acceptInvite.role')}>{invitationInfo.role}</strong>.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              This invitation was sent to <strong>{invitationInfo.email}</strong>
+            </p>
+          </div>
+
+          <div className="space-y-3 mt-6">
+            <p className="text-sm text-center text-muted-foreground">
+              Please sign in or create an account to accept this invitation.
+            </p>
+            <Button asChild className="w-full" data-cy={sel('teams.acceptInvite.signin')}>
+              <Link href={loginUrl}>
+                <LogIn className="mr-2 h-4 w-4" />
+                Sign In
+              </Link>
+            </Button>
+            <Button asChild variant="outline" className="w-full" data-cy={sel('teams.acceptInvite.signup')}>
+              <Link href={signupUrl}>
+                <UserPlus className="mr-2 h-4 w-4" />
+                Create Account
+              </Link>
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Valid - Ready to Accept */}
+      {status === 'valid' && invitationInfo && (
+        <div data-cy={sel('teams.acceptInvite.valid')}>
+          <div className="rounded-lg border p-4 space-y-2 bg-muted/50">
+            <p className="text-sm text-muted-foreground">
+              <strong>{invitationInfo.inviterName}</strong> has invited you to join <strong>{invitationInfo.teamName}</strong> as a <strong>{invitationInfo.role}</strong>.
+            </p>
+          </div>
+
+          <Button onClick={handleAccept} className="w-full mt-6" data-cy={sel('teams.acceptInvite.accept')}>
+            Accept Invitation
+          </Button>
+        </div>
+      )}
+
+      {/* Accepting */}
+      {status === 'accepting' && (
+        <div className="flex flex-col items-center py-4" data-cy={sel('teams.acceptInvite.accepting')}>
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="mt-4 text-muted-foreground">Accepting invitation...</p>
+        </div>
+      )}
+
+      {/* Accepted */}
+      {status === 'accepted' && (
+        <Alert className="border-green-200 bg-green-50 dark:bg-green-950/20 dark:border-green-900" data-cy={sel('teams.acceptInvite.success')}>
+          <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
+          <AlertTitle className="text-green-800 dark:text-green-200">Welcome to the team!</AlertTitle>
+          <AlertDescription className="text-green-700 dark:text-green-300">
+            You&apos;ve successfully joined {invitationInfo?.teamName}. Redirecting to your dashboard...
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Already Member */}
+      {status === 'already_member' && (
+        <Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-900" data-cy={sel('teams.acceptInvite.alreadyMember')}>
+          <CheckCircle className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+          <AlertTitle className="text-blue-800 dark:text-blue-200">Already a member</AlertTitle>
+          <AlertDescription className="text-blue-700 dark:text-blue-300">
+            You&apos;re already a member of this team.
+            <Button asChild variant="link" className="p-0 h-auto ml-1">
+              <Link href="/dashboard/settings/teams">Go to Teams</Link>
+            </Button>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Email Mismatch */}
+      {status === 'email_mismatch' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.emailMismatch')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Email mismatch</AlertTitle>
+          <AlertDescription>
+            {errorMessage}
+            <br />
+            <Button asChild variant="link" className="p-0 h-auto">
+              <Link href={loginUrl}>Sign in with a different account</Link>
+            </Button>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Not Found */}
+      {status === 'not_found' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.notFound')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Invitation not found</AlertTitle>
+          <AlertDescription>
+            This invitation link is invalid or has already been used. Please contact the team owner for a new invitation.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Expired */}
+      {status === 'expired' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.expired')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Invitation expired</AlertTitle>
+          <AlertDescription>
+            This invitation has expired. Please contact the team owner for a new invitation.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Generic Error */}
+      {status === 'error' && (
+        <Alert variant="destructive" data-cy={sel('teams.acceptInvite.error')}>
+          <XCircle className="h-5 w-5" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{errorMessage || 'An error occurred. Please try again.'}</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  )
+}

package/templates/app/(auth)/reset-password/page.tsx

@@ -142,7 +142,7 @@ function ResetPasswordContent() {
               placeholder="Create a strong password"
               showRequirements={true}
               password={password || ""}
-              data-cy={sel('auth.resetPassword.password')}
+              data-cy={sel('auth.resetPassword.passwordInput')}
             />
             {errors.password && (
               <p className="text-sm text-destructive">{errors.password.message}</p>
@@ -156,7 +156,7 @@ function ResetPasswordContent() {
               id="confirmPassword"
               autoComplete="new-password"
               placeholder="Confirm your new password"
-              data-cy={sel('auth.resetPassword.confirmPassword')}
+              data-cy={sel('auth.resetPassword.confirmInput')}
             />
             {errors.confirmPassword && (
               <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
@@ -167,7 +167,7 @@ function ResetPasswordContent() {
             type="submit"
             disabled={loading || !token}
             className="w-full"
-            data-cy={sel('auth.resetPassword.submitButton')}
+            data-cy={sel('auth.resetPassword.submit')}
           >
             {loading ? (
               <>
@@ -184,7 +184,7 @@ function ResetPasswordContent() {
           <Link
             href="/login"
             className="text-sm text-primary hover:underline"
-            data-cy={sel('auth.resetPassword.backToLogin')}
+            data-cy={sel('auth.resetPassword.back')}
           >
             Back to Login
           </Link>

package/templates/app/(auth)/verify-email/page.tsx

@@ -116,7 +116,7 @@ function VerifyEmailContent() {
 
   if (status === 'loading') {
     return (
-      <div className="space-y-4" data-cy={sel('auth.verifyEmail.container')}>
+      <div className="space-y-4" data-cy={sel('auth.verifyEmail.loading')}>
         <div className="text-center">
           <h2 className="text-xl font-semibold">Verifying Email</h2>
           <p className="text-sm text-muted-foreground mt-2">Please wait while we verify your email address</p>
@@ -130,7 +130,7 @@ function VerifyEmailContent() {
 
   if (status === 'success') {
     return (
-      <div className="space-y-4" data-cy={sel('auth.verifyEmail.successMessage')}>
+      <div className="space-y-4" data-cy={sel('auth.verifyEmail.success')}>
         <div className="text-center">
           <div className="flex justify-center mb-2">
             <CheckCircle className="h-12 w-12 text-primary" />
@@ -148,7 +148,7 @@ function VerifyEmailContent() {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4" data-cy={sel('auth.verifyEmail.error')}>
       <div className="text-center">
         <div className="flex justify-center mb-2">
           <AlertCircle className="h-12 w-12 text-destructive" />
@@ -157,15 +157,15 @@ function VerifyEmailContent() {
         <p className="text-sm text-muted-foreground mt-2">We couldn&apos;t verify your email address</p>
       </div>
       {error && (
-        <Alert variant="destructive" data-cy={sel('auth.verifyEmail.error')}>
+        <Alert variant="destructive" data-cy={sel('auth.verifyEmail.errorMessage')}>
           <AlertDescription>{error}</AlertDescription>
         </Alert>
       )}
       <div className="flex gap-2">
-        <Button onClick={() => router.push('/signup')} variant="outline" className="flex-1">
+        <Button onClick={() => router.push('/signup')} variant="outline" className="flex-1" data-cy={sel('auth.verifyEmail.backSignup')}>
           Back to Sign Up
         </Button>
-        <Button onClick={() => router.push('/login')} className="flex-1">
+        <Button onClick={() => router.push('/login')} className="flex-1" data-cy={sel('auth.verifyEmail.goLogin')}>
           Go to Login
         </Button>
       </div>

package/templates/app/(public)/[...slug]/page.tsx

@@ -45,8 +45,7 @@ function getEntityConfigs(): Record<string, EntityConfig> {
   const registry = getEntityRegistry()
   const configs: Record<string, EntityConfig> = {}
   for (const [key, entry] of Object.entries(registry)) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    configs[key] = (entry as any).config as EntityConfig
+    configs[key] = entry.config as EntityConfig
   }
   return configs
 }

package/templates/app/(public)/docs/[section]/[page]/page.tsx

@@ -16,7 +16,7 @@ interface DocsPageProps {
 }
 
 export async function generateStaticParams() {
-  const params: Array<{ section: string; page: string }> = []
+  const params = []
 
   // Generate params for public docs only
   for (const section of DOCS_REGISTRY.public) {

package/templates/app/api/csp-report/route.ts

@@ -1,12 +1,34 @@
 import { randomUUID } from 'node:crypto';
 import { NextRequest, NextResponse } from 'next/server';
 
+// Dynamic import for rate limiting - graceful fallback if not available
+let checkDistributedRateLimit: ((id: string, tier: string) => Promise<{ allowed: boolean; limit: number; remaining: number; resetTime: number; retryAfter?: number }>) | null = null;
+let createRateLimitErrorResponse: ((result: { allowed: boolean; limit: number; remaining: number; resetTime: number; retryAfter?: number }) => NextResponse) | null = null;
+
+// Try to load rate limiting functions
+try {
+  const rateLimitModule = require('@nextsparkjs/core/lib/api');
+  checkDistributedRateLimit = rateLimitModule.checkDistributedRateLimit;
+  createRateLimitErrorResponse = rateLimitModule.createRateLimitErrorResponse;
+} catch {
+  // Rate limiting not available - will skip rate limit checks
+  console.warn('[CSP Report] Rate limiting not available - running without rate limits');
+}
+
 /**
  * CSP Violation Report Endpoint
  *
  * Receives Content-Security-Policy violation reports from browsers.
  * Reports are logged for monitoring and debugging CSP issues.
  *
+ * Rate limiting: Uses 'api' tier (100 requests/minute per IP) to prevent abuse.
+ * Falls back gracefully if rate limiting is not available.
+ *
+ * NOTE: This file exists in both apps/dev/app/api/csp-report/ and
+ * packages/core/templates/app/api/csp-report/. The template version
+ * is used when creating new projects from the core package.
+ * Changes should be synchronized between both files.
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#violation_report_syntax
  */
 
@@ -32,8 +54,52 @@ const getAllowedOrigin = () => {
   return process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
 };
 
+/**
+ * Get client IP address from request headers.
+ * Handles various proxy scenarios (X-Forwarded-For, X-Real-IP, etc.)
+ */
+function getClientIp(request: NextRequest): string {
+  const forwardedFor = request.headers.get('x-forwarded-for');
+  if (forwardedFor) {
+    const ips = forwardedFor.split(',').map(ip => ip.trim());
+    if (ips[0]) return ips[0];
+  }
+  const realIp = request.headers.get('x-real-ip');
+  if (realIp) return realIp;
+  const cfIp = request.headers.get('cf-connecting-ip');
+  if (cfIp) return cfIp;
+  return 'unknown';
+}
+
 export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8);
+  let rateLimitHeaders: Record<string, string> = {};
+
+  // Rate limiting: 100 requests per minute per IP (api tier)
+  // Skip if rate limiting is not available
+  if (checkDistributedRateLimit && createRateLimitErrorResponse) {
+    try {
+      const clientIp = getClientIp(request);
+      const rateLimitResult = await checkDistributedRateLimit(`csp-report:ip:${clientIp}`, 'api');
+
+      if (!rateLimitResult.allowed) {
+        console.warn(`[CSP Report ${requestId}] Rate limit exceeded for IP: ${clientIp}`);
+        return createRateLimitErrorResponse(rateLimitResult);
+      }
+
+      // Store rate limit headers to include in response
+      rateLimitHeaders = {
+        'X-RateLimit-Limit': rateLimitResult.limit.toString(),
+        'X-RateLimit-Remaining': rateLimitResult.remaining.toString(),
+        'X-RateLimit-Reset': rateLimitResult.resetTime.toString(),
+      };
+    } catch (rateLimitError) {
+      // Log but continue without rate limiting
+      console.warn(`[CSP Report ${requestId}] Rate limit check failed, continuing without:`, {
+        error: rateLimitError instanceof Error ? rateLimitError.message : 'Unknown error',
+      });
+    }
+  }
 
   try {
     const contentType = request.headers.get('content-type') || '';
@@ -41,7 +107,7 @@ export async function POST(request: NextRequest) {
     // CSP reports are sent as application/csp-report or application/json
     if (!contentType.includes('application/csp-report') && !contentType.includes('application/json')) {
       console.warn(`[CSP Report ${requestId}] Invalid content-type: ${contentType}`);
-      return new NextResponse('Invalid content type', { status: 400 });
+      return new Response('Invalid content type', { status: 400 });
     }
 
     let rawBody: string | undefined;
@@ -54,7 +120,7 @@ export async function POST(request: NextRequest) {
         console.warn(`[CSP Report ${requestId}] Invalid report format - missing csp-report key`, {
           bodyPreview: rawBody.slice(0, 200),
         });
-        return new NextResponse('Invalid report format', { status: 400 });
+        return new Response('Invalid report format', { status: 400 });
       }
 
       // Log the violation for monitoring
@@ -73,14 +139,17 @@ export async function POST(request: NextRequest) {
       });
 
       // Return 204 No Content - browsers don't expect a response body
-      return new NextResponse(null, { status: 204 });
+      return new Response(null, {
+        status: 204,
+        headers: rateLimitHeaders,
+      });
     } catch (parseError) {
       console.error(`[CSP Report ${requestId}] JSON parse error:`, {
         error: parseError instanceof Error ? parseError.message : 'Unknown error',
         bodyPreview: rawBody?.slice(0, 200),
       });
       // Still return 204 to not break browser behavior
-      return new NextResponse(null, { status: 204 });
+      return new Response(null, { status: 204 });
     }
   } catch (error) {
     console.error(`[CSP Report ${requestId}] Unexpected error:`, {
@@ -88,14 +157,14 @@ export async function POST(request: NextRequest) {
       stack: error instanceof Error ? error.stack : undefined,
     });
     // Still return 204 to not break browser behavior
-    return new NextResponse(null, { status: 204 });
+    return new Response(null, { status: 204 });
   }
 }
 
 // Handle preflight requests for CORS
 // Restrict to same origin instead of allowing all origins
 export async function OPTIONS() {
-  return new NextResponse(null, {
+  return new Response(null, {
     status: 204,
     headers: {
       'Access-Control-Allow-Origin': getAllowedOrigin(),