wexts 3.0.2 → 4.1.0

package/templates/nextjs-web/README.md

@@ -1,68 +1,76 @@
-# Fusion Next.js Web
-
-Modern Next.js 16 frontend with wexts integration.
-
-## Features
-
-- ✅ Next.js 16 (App Router)
-- ✅ React 19
-- ✅ Tailwind CSS v4
-- ✅ TypeScript
-- ✅ wexts Provider & Hooks
-- ✅ Authentication Flow
-- ✅ Todo Management Dashboard
-
-## Setup
-
-```bash
-# Install dependencies
-npm install
-
-# Copy environment variables
-cp .env.local.example .env.local
-
-# Update NEXT_PUBLIC_API_URL in .env.local to point to your API
-
-# Start development server
-npm run dev
-```
-
-## Project Structure
-
-```
-app/
-├── layout.tsx          # Root layout with FusionProvider
-├── page.tsx            # Homepage with auth redirect
-├── globals.css         # Global styles
-├── login/
-│   └── page.tsx        # Login page
-├── register/
-│   └── page.tsx        # Registration page
-└── dashboard/
-    └── page.tsx        # Protected dashboard with todos
-```
-
-## Using Fusion Hooks
-
-```tsx
-import { useFusion, useAuth } from 'wexts/next';
-
-function MyComponent() {
-  const { client } = useFusion();
-  const { user, isAuthenticated } = useAuth();
-
-  // Make API calls
-  const data = await client.get('/endpoint');
-}
-```
-
-## Building for Production
-
-```bash
-npm run build
-npm start
-```
-
-## Environment Variables
-
-- `NEXT_PUBLIC_API_URL` - Backend API URL (default: http://localhost:5050)
+# Deprecated Legacy Web Template
+
+This template predates the verified `examples/hello-rpc` runtime/RPC/security model. It is retained for compatibility and should not be used as the production reference.
+
+Use `examples/hello-rpc` for the canonical generated-RPC path.
+
+---
+
+# Fusion Next.js Web
+
+Modern Next.js 16 frontend with wexts integration.
+
+## Features
+
+- ✅ Next.js 16 (App Router)
+- ✅ React 19
+- ✅ Tailwind CSS v4
+- ✅ TypeScript
+- ✅ wexts Provider & Hooks
+- ✅ Authentication Flow
+- ✅ Todo Management Dashboard
+
+## Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Copy environment variables
+cp .env.local.example .env.local
+
+# Update NEXT_PUBLIC_API_URL in .env.local to point to your API
+
+# Start development server
+npm run dev
+```
+
+## Project Structure
+
+```
+app/
+├── layout.tsx          # Root layout with FusionProvider
+├── page.tsx            # Homepage with auth redirect
+├── globals.css         # Global styles
+├── login/
+│   └── page.tsx        # Login page
+├── register/
+│   └── page.tsx        # Registration page
+└── dashboard/
+    └── page.tsx        # Protected dashboard with todos
+```
+
+## Using Fusion Hooks
+
+```tsx
+import { useFusion, useAuth } from 'wexts/next';
+
+function MyComponent() {
+  const { client } = useFusion();
+  const { user, isAuthenticated } = useAuth();
+
+  // Make API calls
+  const data = await client.get('/endpoint');
+}
+```
+
+## Building for Production
+
+```bash
+npm run build
+npm start
+```
+
+## Environment Variables
+
+- `NEXT_PUBLIC_API_URL` - Backend API URL (default: http://localhost:5050)

package/templates/nextjs-web/app/actions/auth.ts

@@ -1,108 +1,108 @@
-'use server';
-
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
-import { api } from '@/lib/api';
-
-export type ActionState = {
-    message?: string;
-    errors?: {
-        email?: string[];
-        password?: string[];
-    };
-};
-
-export async function loginAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
-    const email = formData.get('email') as string;
-    const password = formData.get('password') as string;
-
-    const errors: { email?: string[]; password?: string[] } = {};
-
-    if (!email || !email.includes('@')) {
-        errors.email = ['Invalid email address'];
-    }
-
-    if (!password || password.length < 6) {
-        errors.password = ['Password must be at least 6 characters'];
-    }
-
-    if (Object.keys(errors).length > 0) {
-        return { errors };
-    }
-
-    try {
-        // Use SDK - no URLs needed!
-        const data = await api.auth.login({ email, password });
-
-        // Store JWT token
-        if (data.access_token) {
-            const cookieStore = await cookies();
-            cookieStore.set('wexts_token', data.access_token, {
-                httpOnly: true,
-                secure: process.env.NODE_ENV === 'production',
-                maxAge: 60 * 60 * 24 * 7, // 1 week
-                path: '/',
-            });
-        } else {
-            return {
-                message: 'Login failed: No token received',
-            };
-        }
-    } catch (error: any) {
-        console.error('Login error:', error);
-        return {
-            message: error.message || 'Invalid credentials',
-        };
-    }
-
-    redirect('/dashboard');
-}
-
-export async function registerAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
-    const email = formData.get('email') as string;
-    const password = formData.get('password') as string;
-    const name = formData.get('name') as string;
-
-    const errors: { email?: string[]; password?: string[] } = {};
-
-    if (!email || !email.includes('@')) {
-        errors.email = ['Invalid email address'];
-    }
-
-    if (!password || password.length < 6) {
-        errors.password = ['Password must be at least 6 characters'];
-    }
-
-    if (Object.keys(errors).length > 0) {
-        return { errors };
-    }
-
-    try {
-        // Use SDK - no URLs needed!
-        const data = await api.auth.register({ email, password, name });
-
-        // Store JWT token
-        if (data.access_token) {
-            const cookieStore = await cookies();
-            cookieStore.set('wexts_token', data.access_token, {
-                httpOnly: true,
-                secure: process.env.NODE_ENV === 'production',
-                maxAge: 60 * 60 * 24 * 7,
-                path: '/',
-            });
-        }
-    } catch (error: any) {
-        console.error('Register error:', error);
-        return {
-            message: error.message || 'Registration failed',
-        };
-    }
-
-    redirect('/dashboard');
-}
-
-export async function logoutAction() {
-    const cookieStore = await cookies();
-    cookieStore.delete('wexts_token');
-    redirect('/login');
-}
+'use server';
+
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { api } from '@/lib/api';
+
+export type ActionState = {
+    message?: string;
+    errors?: {
+        email?: string[];
+        password?: string[];
+    };
+};
+
+export async function loginAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+
+    const errors: { email?: string[]; password?: string[] } = {};
+
+    if (!email || !email.includes('@')) {
+        errors.email = ['Invalid email address'];
+    }
+
+    if (!password || password.length < 6) {
+        errors.password = ['Password must be at least 6 characters'];
+    }
+
+    if (Object.keys(errors).length > 0) {
+        return { errors };
+    }
+
+    try {
+        // Legacy SDK call retained for deprecated template compatibility.
+        const data = await api.auth.login({ email, password });
+
+        // Store JWT token
+        if (data.access_token) {
+            const cookieStore = await cookies();
+            cookieStore.set('wexts_token', data.access_token, {
+                httpOnly: true,
+                secure: process.env.NODE_ENV === 'production',
+                maxAge: 60 * 60 * 24 * 7, // 1 week
+                path: '/',
+            });
+        } else {
+            return {
+                message: 'Login failed: No token received',
+            };
+        }
+    } catch (error: any) {
+        console.error('Login error:', error);
+        return {
+            message: error.message || 'Invalid credentials',
+        };
+    }
+
+    redirect('/dashboard');
+}
+
+export async function registerAction(prevState: ActionState, formData: FormData): Promise<ActionState> {
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+    const name = formData.get('name') as string;
+
+    const errors: { email?: string[]; password?: string[] } = {};
+
+    if (!email || !email.includes('@')) {
+        errors.email = ['Invalid email address'];
+    }
+
+    if (!password || password.length < 6) {
+        errors.password = ['Password must be at least 6 characters'];
+    }
+
+    if (Object.keys(errors).length > 0) {
+        return { errors };
+    }
+
+    try {
+        // Legacy SDK call retained for deprecated template compatibility.
+        const data = await api.auth.register({ email, password, name });
+
+        // Store JWT token
+        if (data.access_token) {
+            const cookieStore = await cookies();
+            cookieStore.set('wexts_token', data.access_token, {
+                httpOnly: true,
+                secure: process.env.NODE_ENV === 'production',
+                maxAge: 60 * 60 * 24 * 7,
+                path: '/',
+            });
+        }
+    } catch (error: any) {
+        console.error('Register error:', error);
+        return {
+            message: error.message || 'Registration failed',
+        };
+    }
+
+    redirect('/dashboard');
+}
+
+export async function logoutAction() {
+    const cookieStore = await cookies();
+    cookieStore.delete('wexts_token');
+    redirect('/login');
+}

package/templates/nextjs-web/app/dashboard/error.tsx

@@ -1,39 +1,39 @@
-'use client';
-
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { AlertTriangle } from 'lucide-react';
-
-export default function DashboardError({
-    error,
-    reset,
-}: {
-    error: Error & { digest?: string };
-    reset: () => void;
-}) {
-    useEffect(() => {
-        console.error(error);
-    }, [error]);
-
-    return (
-        <div className="min-h-screen bg-background flex items-center justify-center p-8">
-            <Card className="glass border-destructive/20 max-w-md w-full">
-                <CardHeader>
-                    <CardTitle className="text-destructive flex items-center gap-2">
-                        <AlertTriangle className="w-5 h-5" />
-                        Something went wrong
-                    </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                    <p className="text-muted-foreground">
-                        We encountered an error while loading your dashboard. Please try again.
-                    </p>
-                    <Button onClick={reset} className="w-full">
-                        Try again
-                    </Button>
-                </CardContent>
-            </Card>
-        </div>
-    );
-}
+'use client';
+
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertTriangle } from 'lucide-react';
+
+export default function DashboardError({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    useEffect(() => {
+        console.error(error);
+    }, [error]);
+
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center p-8">
+            <Card className="glass border-destructive/20 max-w-md w-full">
+                <CardHeader>
+                    <CardTitle className="text-destructive flex items-center gap-2">
+                        <AlertTriangle className="w-5 h-5" />
+                        Something went wrong
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <p className="text-muted-foreground">
+                        We encountered an error while loading your dashboard. Please try again.
+                    </p>
+                    <Button onClick={reset} className="w-full">
+                        Try again
+                    </Button>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

package/templates/nextjs-web/app/dashboard/loading.tsx

@@ -1,14 +1,14 @@
-import { Loader2 } from 'lucide-react';
-
-export default function DashboardLoading() {
-    return (
-        <div className="min-h-screen bg-background flex items-center justify-center">
-            <div className="text-center space-y-4">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 text-primary animate-pulse">
-                    <Loader2 className="w-8 h-8 animate-spin" />
-                </div>
-                <p className="text-muted-foreground animate-pulse">Loading dashboard...</p>
-            </div>
-        </div>
-    );
-}
+import { Loader2 } from 'lucide-react';
+
+export default function DashboardLoading() {
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center">
+            <div className="text-center space-y-4">
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 text-primary animate-pulse">
+                    <Loader2 className="w-8 h-8 animate-spin" />
+                </div>
+                <p className="text-muted-foreground animate-pulse">Loading dashboard...</p>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-web/app/dashboard/page.tsx

@@ -1,5 +1,5 @@
-import { DashboardView } from '@/features/dashboard';
-
-export default function DashboardPage() {
-    return <DashboardView />;
-}
+import { DashboardView } from '@/features/dashboard';
+
+export default function DashboardPage() {
+    return <DashboardView />;
+}

package/templates/nextjs-web/app/globals.css

@@ -1,93 +1,93 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* Brand Colors - Deep Violet & Electric Purple */
-    --background: 260 30% 98%;
-    --foreground: 260 40% 10%;
-    
-    --primary: 265 89% 66%;
-    --primary-foreground: 210 40% 98%;
-    
-    --secondary: 260 20% 90%;
-    --secondary-foreground: 260 40% 10%;
-    
-    --muted: 260 20% 96%;
-    --muted-foreground: 260 20% 40%;
-    
-    --accent: 265 89% 96%;
-    --accent-foreground: 265 89% 66%;
-    
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 260 20% 90%;
-    --input: 260 20% 90%;
-    --ring: 265 89% 66%;
-    
-    --radius: 1rem;
-  }
-
-  .dark {
-    --background: 260 40% 5%;
-    --foreground: 210 40% 98%;
-    
-    --primary: 265 89% 66%;
-    --primary-foreground: 210 40% 98%;
-    
-    --secondary: 260 30% 15%;
-    --secondary-foreground: 210 40% 98%;
-    
-    --muted: 260 30% 15%;
-    --muted-foreground: 215 20% 65%;
-    
-    --accent: 260 30% 15%;
-    --accent-foreground: 210 40% 98%;
-    
-    --destructive: 0 62% 30%;
-    --destructive-foreground: 210 40% 98%;
-    
-    --border: 260 30% 15%;
-    --input: 260 30% 15%;
-    --ring: 265 89% 66%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
-@layer utilities {
-  .glass {
-    @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl;
-  }
-  .glass-dark {
-    @apply bg-black/30 backdrop-blur-lg border border-white/10 shadow-xl;
-  }
-  
-  .text-gradient {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 dark:from-violet-400 dark:to-indigo-400;
-  }
-
-  .animate-float {
-    animation: float 6s ease-in-out infinite;
-  }
-  
-  .animate-pulse-slow {
-    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-}
-
-@keyframes float {
-  0% { transform: translateY(0px); }
-  50% { transform: translateY(-20px); }
-  100% { transform: translateY(0px); }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Brand Colors - Deep Violet & Electric Purple */
+    --background: 260 30% 98%;
+    --foreground: 260 40% 10%;
+    
+    --primary: 265 89% 66%;
+    --primary-foreground: 210 40% 98%;
+    
+    --secondary: 260 20% 90%;
+    --secondary-foreground: 260 40% 10%;
+    
+    --muted: 260 20% 96%;
+    --muted-foreground: 260 20% 40%;
+    
+    --accent: 265 89% 96%;
+    --accent-foreground: 265 89% 66%;
+    
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 260 20% 90%;
+    --input: 260 20% 90%;
+    --ring: 265 89% 66%;
+    
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 260 40% 5%;
+    --foreground: 210 40% 98%;
+    
+    --primary: 265 89% 66%;
+    --primary-foreground: 210 40% 98%;
+    
+    --secondary: 260 30% 15%;
+    --secondary-foreground: 210 40% 98%;
+    
+    --muted: 260 30% 15%;
+    --muted-foreground: 215 20% 65%;
+    
+    --accent: 260 30% 15%;
+    --accent-foreground: 210 40% 98%;
+    
+    --destructive: 0 62% 30%;
+    --destructive-foreground: 210 40% 98%;
+    
+    --border: 260 30% 15%;
+    --input: 260 30% 15%;
+    --ring: 265 89% 66%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl;
+  }
+  .glass-dark {
+    @apply bg-black/30 backdrop-blur-lg border border-white/10 shadow-xl;
+  }
+  
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 dark:from-violet-400 dark:to-indigo-400;
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+  
+  .animate-pulse-slow {
+    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+  100% { transform: translateY(0px); }
+}