create-tigra 2.7.0 → 2.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tigra",
-    "version": "2.7.0",
+    "version": "2.7.2",
   "type": "module",
   "description": "Create a production-ready full-stack app with Next.js 16 + Fastify 5 + Prisma + Redis",
   "bin": {

package/template/_claude/skills/clean-ui/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: clean-ui
+description: Remove the starter welcome page UI and replace with a blank canvas, preserving all client-side functionality (auth, hooks, services, store, middleware, utils)
+---
+
+The user wants to remove the starter/welcome UI from the scaffolded client and start with a blank page.
+
+## What this skill does
+
+Replaces the demo welcome page (`src/app/page.tsx`) with the absolute bare minimum — just a centered "Ready to build." text. **Nothing else is touched** — all functional infrastructure remains intact.
+
+## What gets replaced
+
+| File | Action | Reason |
+|------|--------|--------|
+| `src/app/page.tsx` | **Replace** with blank canvas | Remove ALL demo content — hero, ambient glow, GitHub links, buttons, everything |
+
+## What is NOT touched (preserved as-is)
+
+- `src/components/layout/` — Header, Footer, MainLayout
+- `src/app/layout.tsx` — root layout with providers
+- `src/app/providers.tsx` — Redux, React Query, themes, AuthInitializer
+- `src/app/error.tsx`, `src/app/not-found.tsx`, `src/app/loading.tsx`
+- `src/middleware.ts` — route protection
+- `src/features/auth/**` — entire auth system
+- `src/components/common/**` — ThemeToggle, EmptyState, LoadingSpinner, etc.
+- `src/components/ui/**` — all shadcn/ui components
+- `src/hooks/**`, `src/store/**`, `src/lib/**`, `src/styles/**`
+- All config files
+
+## Steps
+
+1. Read `src/app/page.tsx` to confirm it exists.
+2. Replace its contents with the clean page below. Use the **exact** template — do not add anything.
+3. Confirm to the user what was done.
+
+## Clean page template
+
+Replace `src/app/page.tsx` with **exactly** this — no additions, no modifications:
+
+```tsx
+import type React from 'react';
+
+export default function HomePage(): React.ReactElement {
+  return (
+    <main className="flex min-h-dvh items-center justify-center">
+      <p className="text-sm text-muted-foreground">Ready to build.</p>
+    </main>
+  );
+}
+```
+
+**CRITICAL**: Do NOT add anything beyond what is in the template above. No heading, no links, no buttons, no metadata, no imports beyond React. The entire point is a blank canvas.
+
+## Response format
+
+After completing, respond with:
+
+```
+Starter UI cleaned. `src/app/page.tsx` is now a blank canvas.
+
+Everything else is untouched — auth, hooks, services, store, middleware, components, and design system are all intact.
+```

package/template/_claude/skills/theme/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: theme
+description: Change the color palette in the client theme file. Only swaps HEX values — never touches variable names, file structure, or conventions.
+argument-hint: "[color description or specific HEX values]"
+---
+
+# Theme Palette Changer
+
+The user wants to change the color palette. Their input: **$ARGUMENTS**
+
+## Your ONLY job
+
+Replace HEX color values in `src/styles/themes/default.css` (or the equivalent theme file in the active project's client directory). That's it.
+
+## What you MUST NOT do
+
+- **DO NOT** rename, add, or remove any CSS variable names (e.g., `--primary`, `--background`, `--muted`)
+- **DO NOT** change the file structure, move files, or create new files
+- **DO NOT** touch `globals.css`, components, or any other file
+- **DO NOT** change `--radius` or any non-color value
+- **DO NOT** convert HEX to OKLCH, HSL, or any other format — stay in HEX
+- **DO NOT** remove the `.dark` selector or the `:root` selector
+- **DO NOT** remove or rewrite comments unless updating the palette description at the top
+- **DO NOT** change `rgba()` values to HEX — keep `rgba()` where it already exists (e.g., dark mode `--border`, `--input`)
+- **DO NOT** touch any code outside the theme file — no components, no Tailwind config, no globals
+
+## Before making changes — ask these questions if not answered
+
+You MUST gather enough information before editing. If the user's input doesn't cover these, ask BEFORE making any changes:
+
+### Required information
+
+1. **Primary/brand color** — What is the main accent color? (at minimum, you need this)
+
+### Clarifying questions (ask if not addressed)
+
+2. **Dark mode** — one of:
+   - "Will you provide dark mode colors yourself, or should I generate them from your palette?"
+   - Skip if user explicitly says "light mode only" or provides both sets
+
+3. **Palette vibe/mood** — if the user only gave a single color or vague description:
+   - "What's the mood? (e.g., warm, cool, corporate, playful, minimal, luxury)"
+   - This helps you pick complementary background, muted, secondary, and accent colors
+
+4. **Background preference** — if not obvious from context:
+   - "Do you want a light cream/warm background, a cool/gray background, or pure white?"
+
+5. **Destructive/success/warning/info** — if the user provides a full custom palette but skips these:
+   - "Should I keep the current red/green/amber/blue for status colors, or adjust them to match your new palette?"
+
+### When you have enough
+
+- User gives a full palette with explicit HEX values for most tokens → just apply them, generate any missing ones
+- User gives a brand color + mood → generate a cohesive palette and present it for approval before applying
+- User gives a full set of colors for both light and dark → apply directly
+
+## How to apply changes
+
+1. **Read** the current `default.css` theme file first
+2. **Locate** the correct theme file:
+   - In a scaffolded project: `client/src/styles/themes/default.css`
+   - In the template: `template/client/src/styles/themes/default.css`
+   - Check which one exists in the current working directory
+3. **Present** your proposed palette to the user in a readable table BEFORE editing:
+
+   | Token | Current | New (Light) | New (Dark) |
+   |-------|---------|-------------|------------|
+   | --background | #f4f3ee | #... | #... |
+   | --primary | #c15f3c | #... | #... |
+   | ... | ... | ... | ... |
+
+4. **Wait for user approval** — do not edit until they confirm
+5. **Edit** the file using the Edit tool — only change HEX values
+6. **Update** the comment block at the top to reflect the new palette name/vibe (e.g., "Ocean blue palette" instead of "Claude-inspired warm palette")
+7. **Confirm** what was changed in a brief summary
+
+## Palette generation guidelines
+
+When generating colors from a brand color, follow these principles:
+
+- **Background**: Very desaturated, light tint of the brand hue (light mode) / very dark shade (dark mode)
+- **Foreground**: Near-black with a hint of the brand hue (light mode) / near-white (dark mode)
+- **Primary**: The brand color itself (light) / slightly lighter/more vibrant version (dark)
+- **Primary-foreground**: White or near-white for contrast against primary
+- **Secondary/muted/accent**: Desaturated, low-contrast versions of the brand palette
+- **Card/popover**: White or very slight tint (light) / slightly elevated dark shade (dark)
+- **Border/input**: Very subtle, low-contrast separator colors
+- **Ring**: Same as primary (focus ring should match brand)
+- **Destructive**: Red family (#e7000b light / #ff6467 dark) — adjust warmth/coolness to match palette
+- **Success**: Green family — adjust to match palette temperature
+- **Warning**: Amber/yellow family — adjust to match palette temperature
+- **Info**: Blue family — adjust to match palette temperature
+- **Chart colors**: 5 distinct, harmonious colors for data visualization
+- **Sidebar**: Slightly different shade than main background for visual separation
+
+### Dark mode rules
+
+- Increase brightness of the primary color (not just invert)
+- Background should be very dark (not pure black) with a hint of the brand hue
+- Borders use `rgba()` for subtle transparency — keep this pattern
+- Foreground colors should be off-white, not pure #ffffff
+- Reduce contrast slightly compared to light mode to reduce eye strain
+
+## Edge cases
+
+- If user says "make it blue" → ask for a specific shade or suggest 3 options (e.g., ocean #0066cc, royal #4169e1, navy #1a237e)
+- If user provides only RGB or HSL → convert to HEX yourself, don't ask them to convert
+- If user wants to keep some colors and change others → only change the ones they specified
+- If the theme file doesn't exist → tell the user to scaffold the project first, don't create the file

package/template/client/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "{{PROJECT_NAME}}-client",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint src/",
-    "generate:env": "node -e \"import('fs').then(f=>{if(f.existsSync('.env'))console.log('.env already exists, skipping');else{f.copyFileSync('.env.example','.env');console.log('.env created from .env.example')}})\""
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@tanstack/react-query": "^5.90.21",
-    "axios": "^1.13.5",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "next": "16.1.6",
-    "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-hook-form": "^7.71.1",
-    "react-redux": "^9.2.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.3.6"
-  },
-  "overrides": {
-    "minimatch": ">=10.2.1"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.6",
-    "shadcn": "^3.8.4",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "{{PROJECT_NAME}}-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint src/",
+    "generate:env": "node -e \"import('fs').then(f=>{if(f.existsSync('.env'))console.log('.env already exists, skipping');else{f.copyFileSync('.env.example','.env');console.log('.env created from .env.example')}})\""
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.1",
+    "react-redux": "^9.2.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.3.6"
+  },
+  "overrides": {
+    "minimatch": ">=10.2.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

package/template/client/src/components/common/Pagination.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type React from 'react';
-import { useCallback } from 'react';
+import { Suspense, useCallback } from 'react';
 
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
@@ -13,7 +13,7 @@ interface PaginationProps {
   totalPages: number;
 }
 
-export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactElement => {
+const PaginationInner = ({ page, totalPages }: PaginationProps): React.ReactElement => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -53,3 +53,11 @@ export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactEl
     </div>
   );
 };
+
+export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactElement => {
+  return (
+    <Suspense>
+      <PaginationInner page={page} totalPages={totalPages} />
+    </Suspense>
+  );
+};

package/template/client/src/features/auth/components/LoginForm.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import type React from 'react';
+import { Suspense } from 'react';
 
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -22,8 +24,11 @@ const loginSchema = z.object({
 
 type LoginFormData = z.infer<typeof loginSchema>;
 
-export const LoginForm = (): React.ReactElement => {
+const LoginFormInner = (): React.ReactElement => {
   const { login, isLoggingIn } = useAuth();
+  const searchParams = useSearchParams();
+  const from = searchParams.get('from');
+  const redirectTo = from && from.startsWith('/') && !from.startsWith('//') ? from : undefined;
 
   const {
     register,
@@ -34,7 +39,7 @@ export const LoginForm = (): React.ReactElement => {
   });
 
   const onSubmit = (data: LoginFormData): void => {
-    login(data);
+    login(data, redirectTo);
   };
 
   return (
@@ -105,3 +110,11 @@ export const LoginForm = (): React.ReactElement => {
     </div>
   );
 };
+
+export const LoginForm = (): React.ReactElement => {
+  return (
+    <Suspense>
+      <LoginFormInner />
+    </Suspense>
+  );
+};

package/template/client/src/features/auth/hooks/useAuth.ts

@@ -1,9 +1,9 @@
 'use client';
 
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { useMutation } from '@tanstack/react-query';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
@@ -18,7 +18,7 @@ interface UseAuthReturn {
   user: IUser | null;
   isAuthenticated: boolean;
   isInitializing: boolean;
-  login: (data: ILoginRequest) => void;
+  login: (data: ILoginRequest, redirectTo?: string) => void;
   register: (data: IRegisterRequest) => void;
   logout: () => Promise<void>;
   isLoggingIn: boolean;
@@ -29,17 +29,15 @@ interface UseAuthReturn {
 export const useAuth = (): UseAuthReturn => {
   const dispatch = useAppDispatch();
   const router = useRouter();
-  const searchParams = useSearchParams();
   const { user, isAuthenticated, isInitializing, isLoggingOut } = useAppSelector((state) => state.auth);
+  const pendingRedirectRef = useRef<string>(ROUTES.DASHBOARD);
 
   const loginMutation = useMutation({
     mutationFn: (data: ILoginRequest) => authService.login(data),
     onSuccess: (data) => {
       dispatch(setUser(data.user));
       toast.success('Signed in successfully');
-      const from = searchParams.get('from');
-      const redirectTo = from && from.startsWith('/') && !from.startsWith('//') ? from : ROUTES.DASHBOARD;
-      router.push(redirectTo);
+      router.push(pendingRedirectRef.current);
     },
     onError: (error) => {
       if (isErrorCode(error, ERROR_CODES.ACCOUNT_NOT_ACTIVE)) {
@@ -83,7 +81,12 @@ export const useAuth = (): UseAuthReturn => {
     user,
     isAuthenticated,
     isInitializing,
-    login: loginMutation.mutate,
+    login: (data: ILoginRequest, redirectTo?: string) => {
+      if (redirectTo) {
+        pendingRedirectRef.current = redirectTo;
+      }
+      loginMutation.mutate(data);
+    },
     register: registerMutation.mutate,
     logout,
     isLoggingIn: loginMutation.isPending,

package/template/client/src/styles/themes/default.css

@@ -1,92 +1,92 @@
-/*
- * Default Theme — Claude-inspired warm palette
- * Accent: Terracotta orange
- * Vibe: Earthy, warm, approachable
- *
- * This is the single theme file. Colors use HEX values.
- * Light mode: :root selectors. Dark mode: .dark selectors.
- * To customize: edit the HEX values below.
- */
-
-:root {
-  --radius: 0.625rem;
-  /* Warm cream background with terracotta orange accent */
-  --background: #f4f3ee;
-  --foreground: #1a170f;
-  --card: #ffffff;
-  --card-foreground: #1a170f;
-  --popover: #ffffff;
-  --popover-foreground: #1a170f;
-  --primary: #c15f3c;
-  --primary-foreground: #ffffff;
-  --secondary: #ebeae3;
-  --secondary-foreground: #302e25;
-  --muted: #ebeae3;
-  --muted-foreground: #b1ada1;
-  --accent: #ebeae3;
-  --accent-foreground: #302e25;
-  --destructive: #e7000b;
-  --border: #deddd4;
-  --input: #deddd4;
-  --ring: #c15f3c;
-  --success: #008339;
-  --success-foreground: #ffffff;
-  --warning: #e99b2a;
-  --warning-foreground: #242119;
-  --info: #0079bf;
-  --info-foreground: #ffffff;
-  --chart-1: #c15f3c;
-  --chart-2: #009689;
-  --chart-3: #104e64;
-  --chart-4: #ebc065;
-  --chart-5: #b1ada1;
-  --sidebar: #f0efe9;
-  --sidebar-foreground: #1a170f;
-  --sidebar-primary: #302e25;
-  --sidebar-primary-foreground: #f4f3ee;
-  --sidebar-accent: #ebeae3;
-  --sidebar-accent-foreground: #302e25;
-  --sidebar-border: #deddd4;
-  --sidebar-ring: #c15f3c;
-}
-
-.dark {
-  /* Dark mode: inverted with same warm undertone */
-  --background: #15130d;
-  --foreground: #e9e8e3;
-  --card: #201e18;
-  --card-foreground: #e9e8e3;
-  --popover: #201e18;
-  --popover-foreground: #e9e8e3;
-  --primary: #d6724f;
-  --primary-foreground: #15130d;
-  --secondary: #2b2922;
-  --secondary-foreground: #e9e8e3;
-  --muted: #2b2922;
-  --muted-foreground: #928f85;
-  --accent: #2b2922;
-  --accent-foreground: #e9e8e3;
-  --destructive: #ff6467;
-  --border: rgba(255, 255, 250, 0.12);
-  --input: rgba(255, 255, 250, 0.15);
-  --ring: #d6724f;
-  --success: #009c50;
-  --success-foreground: #ffffff;
-  --warning: #faab3f;
-  --warning-foreground: #242119;
-  --info: #0099e0;
-  --info-foreground: #ffffff;
-  --chart-1: #d6724f;
-  --chart-2: #00bc7d;
-  --chart-3: #e5a658;
-  --chart-4: #a066df;
-  --chart-5: #e25969;
-  --sidebar: #201e18;
-  --sidebar-foreground: #e9e8e3;
-  --sidebar-primary: #d6724f;
-  --sidebar-primary-foreground: #e9e8e3;
-  --sidebar-accent: #2b2922;
-  --sidebar-accent-foreground: #e9e8e3;
-  --sidebar-border: rgba(255, 255, 250, 0.12);
-  --sidebar-ring: #d6724f;
-}
+/*
+ * Default Theme — Claude-inspired warm palette
+ * Accent: Terracotta orange
+ * Vibe: Earthy, warm, approachable
+ *
+ * This is the single theme file. Colors use HEX values.
+ * Light mode: :root selectors. Dark mode: .dark selectors.
+ * To customize: edit the HEX values below.
+ */
+
+:root {
+  --radius: 0.625rem;
+  /* Warm cream background with terracotta orange accent */
+  --background: #f4f3ee;
+  --foreground: #1a170f;
+  --card: #ffffff;
+  --card-foreground: #1a170f;
+  --popover: #ffffff;
+  --popover-foreground: #1a170f;
+  --primary: #c15f3c;
+  --primary-foreground: #ffffff;
+  --secondary: #ebeae3;
+  --secondary-foreground: #302e25;
+  --muted: #ebeae3;
+  --muted-foreground: #b1ada1;
+  --accent: #ebeae3;
+  --accent-foreground: #302e25;
+  --destructive: #e7000b;
+  --border: #deddd4;
+  --input: #deddd4;
+  --ring: #c15f3c;
+  --success: #008339;
+  --success-foreground: #ffffff;
+  --warning: #e99b2a;
+  --warning-foreground: #242119;
+  --info: #0079bf;
+  --info-foreground: #ffffff;
+  --chart-1: #c15f3c;
+  --chart-2: #009689;
+  --chart-3: #104e64;
+  --chart-4: #ebc065;
+  --chart-5: #b1ada1;
+  --sidebar: #f0efe9;
+  --sidebar-foreground: #1a170f;
+  --sidebar-primary: #302e25;
+  --sidebar-primary-foreground: #f4f3ee;
+  --sidebar-accent: #ebeae3;
+  --sidebar-accent-foreground: #302e25;
+  --sidebar-border: #deddd4;
+  --sidebar-ring: #c15f3c;
+}
+
+.dark {
+  /* Dark mode: inverted with same warm undertone */
+  --background: #15130d;
+  --foreground: #e9e8e3;
+  --card: #201e18;
+  --card-foreground: #e9e8e3;
+  --popover: #201e18;
+  --popover-foreground: #e9e8e3;
+  --primary: #d6724f;
+  --primary-foreground: #15130d;
+  --secondary: #2b2922;
+  --secondary-foreground: #e9e8e3;
+  --muted: #2b2922;
+  --muted-foreground: #928f85;
+  --accent: #2b2922;
+  --accent-foreground: #e9e8e3;
+  --destructive: #ff6467;
+  --border: rgba(255, 255, 250, 0.12);
+  --input: rgba(255, 255, 250, 0.15);
+  --ring: #d6724f;
+  --success: #009c50;
+  --success-foreground: #ffffff;
+  --warning: #faab3f;
+  --warning-foreground: #242119;
+  --info: #0099e0;
+  --info-foreground: #ffffff;
+  --chart-1: #d6724f;
+  --chart-2: #00bc7d;
+  --chart-3: #e5a658;
+  --chart-4: #a066df;
+  --chart-5: #e25969;
+  --sidebar: #201e18;
+  --sidebar-foreground: #e9e8e3;
+  --sidebar-primary: #d6724f;
+  --sidebar-primary-foreground: #e9e8e3;
+  --sidebar-accent: #2b2922;
+  --sidebar-accent-foreground: #e9e8e3;
+  --sidebar-border: rgba(255, 255, 250, 0.12);
+  --sidebar-ring: #d6724f;
+}

package/template/server/.env.example

@@ -93,10 +93,16 @@ MAX_FILE_SIZE_MB=10
 # Without this, all uploaded files are lost on every redeployment.
 
 # ===================================================================
-# DOCKER PORTS (auto-generated, unique per project)
+# DOCKER PORTS — LOCAL DEVELOPMENT ONLY
 # ===================================================================
+#
+# These ports are used by docker-compose to expose MySQL, Redis, and
+# their admin UIs on your local machine. They are NOT needed in
+# production — production connects via DATABASE_URL and REDIS_URL
+# (typically over a private network), not through exposed ports.
+#
+# Change these if they conflict with other services on your machine.
 
-# Change these if they conflict with other services on your machine
 MYSQL_PORT={{MYSQL_PORT}}
 PHPMYADMIN_PORT={{PHPMYADMIN_PORT}}
 REDIS_PORT={{REDIS_PORT}}

package/template/server/package.json

@@ -19,6 +19,7 @@
     "prisma:seed": "prisma db seed",
     "prisma:studio": "prisma studio",
     "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
     "redis:flush": "tsx scripts/flush-redis.ts",
     "docker:up": "docker compose up -d",
     "docker:down": "docker compose down",

package/template/server/src/app.ts

@@ -61,6 +61,7 @@ export async function buildApp() {
   await app.register(cors, {
     origin: corsOrigin,
     credentials: true,
+    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
   });
 
   // Enhanced security headers for production