@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.81

package/dist/templates/ai-workflow/claude/config/context.json

@@ -0,0 +1,54 @@
+{
+  "context": "consumer",
+  "description": "NextSpark application development - Build your app using themes and plugins",
+
+  "capabilities": {
+    "modifyCore": false,
+    "allThemes": false,
+    "allPlugins": true,
+    "createReleases": false,
+    "maintainWorkflows": false
+  },
+
+  "allowedPaths": [
+    "contents/themes/${NEXT_PUBLIC_ACTIVE_THEME}/**/*",
+    "contents/plugins/**/*",
+    ".claude/sessions/**/*"
+  ],
+
+  "restrictions": {
+    "core": {
+      "level": "forbidden",
+      "message": "Core is installed via npm (node_modules/) and cannot be modified. To customize behavior, create a theme override or plugin instead."
+    },
+    "otherThemes": {
+      "level": "forbidden",
+      "message": "Only the active theme (NEXT_PUBLIC_ACTIVE_THEME) can be modified. To work on a different theme, update your .env file."
+    },
+    "app": {
+      "level": "discouraged",
+      "requiresExplicitConfirmation": true,
+      "message": "Modifying /app directly is discouraged as it reduces portability. Use theme page overrides when possible. Only proceed if user explicitly requests and understands the trade-offs."
+    }
+  },
+
+  "disabledCommands": [
+    "release:version",
+    "npm-publish",
+    "npm-version",
+    "npm-repackage",
+    "npm-test-local",
+    "npm-test-npm",
+    "workflow-update"
+  ],
+
+  "disabledAgents": [
+    "release-manager"
+  ],
+
+  "notes": {
+    "gettingStarted": "Your active theme is defined in .env (NEXT_PUBLIC_ACTIVE_THEME). All customizations should go there.",
+    "creatingPlugins": "Use /create:plugin to scaffold a new plugin in contents/plugins/.",
+    "needCoreChanges": "If you need functionality not available in core, create a plugin or request the feature in NextSpark repository."
+  }
+}

package/dist/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/dist/templates/app/(auth)/forgot-password/page.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { AlertCircle, ArrowLeft, CheckCircle, Loader2, Mail } from 'lucide-react';
 import Link from 'next/link';
 import { useState, useCallback } from 'react';
-import { sel } from '@nextsparkjs/core/lib/test';
+import { sel } from '@nextsparkjs/core/selectors';
 import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import { Button } from '@nextsparkjs/core/components/ui/button';

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

@@ -19,7 +19,7 @@ import { PasswordInput } from "@nextsparkjs/core/components/ui/password-input";
 import { Alert, AlertDescription } from "@nextsparkjs/core/components/ui/alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 
 function ResetPasswordContent() {
   const searchParams = useSearchParams();
@@ -84,7 +84,7 @@ function ResetPasswordContent() {
 
   if (success) {
     return (
-      <Card className="w-full max-w-md" data-cy={createCyId('reset-password', 'success')}>
+      <Card className="w-full max-w-md" data-cy={sel('auth.resetPassword.success')}>
         <CardContent className="pt-6">
           <div className="text-center space-y-4">
             <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
@@ -96,7 +96,7 @@ function ResetPasswordContent() {
                 Your password has been successfully reset. You can now sign in with your new password.
               </p>
             </div>
-            <Button asChild className="w-full" data-cy={createCyId('reset-password', 'login-link')}>
+            <Button asChild className="w-full" data-cy={sel('auth.resetPassword.loginLink')}>
               <Link href="/login">
                 Sign In Now
               </Link>
@@ -108,7 +108,7 @@ function ResetPasswordContent() {
   }
 
   return (
-    <Card className="w-full max-w-md" data-cy={createCyId('reset-password', 'form')}>
+    <Card className="w-full max-w-md" data-cy={sel('auth.resetPassword.form')}>
       <CardHeader className="space-y-1">
         <CardTitle className="text-2xl font-bold">Set New Password</CardTitle>
         <CardDescription>
@@ -117,7 +117,7 @@ function ResetPasswordContent() {
       </CardHeader>
       <CardContent>
         {error && (
-          <Alert variant="destructive" className="mb-4" data-cy={createCyId('reset-password', 'error')}>
+          <Alert variant="destructive" className="mb-4" data-cy={sel('auth.resetPassword.error')}>
             <AlertCircle className="h-4 w-4" />
             <AlertDescription>
               {error}
@@ -142,7 +142,7 @@ function ResetPasswordContent() {
               placeholder="Create a strong password"
               showRequirements={true}
               password={password || ""}
-              data-cy={createCyId('reset-password', 'password-input')}
+              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={createCyId('reset-password', 'confirm-input')}
+              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={createCyId('reset-password', 'submit')}
+            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={createCyId('reset-password', 'back')}
+            data-cy={sel('auth.resetPassword.back')}
           >
             Back to Login
           </Link>

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

@@ -6,7 +6,7 @@ import { Suspense, useEffect, useState } from "react";
 import { Button } from '@nextsparkjs/core/components/ui/button';
 import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert';
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { createCyId } from '@nextsparkjs/core/lib/test'
+import { sel } from '@nextsparkjs/core/selectors'
 
 function VerifyEmailContent() {
   const searchParams = useSearchParams();
@@ -116,7 +116,7 @@ function VerifyEmailContent() {
 
   if (status === 'loading') {
     return (
-      <div className="space-y-4" data-cy={createCyId('verify-email', 'loading')}>
+      <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={createCyId('verify-email', 'success')}>
+      <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" data-cy={createCyId('verify-email', 'error')}>
+    <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={createCyId('verify-email', 'error-message')}>
+        <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" data-cy={createCyId('verify-email', 'back-signup')}>
+        <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" data-cy={createCyId('verify-email', 'go-login')}>
+        <Button onClick={() => router.push('/login')} className="flex-1" data-cy={sel('auth.verifyEmail.goLogin')}>
           Go to Login
         </Button>
       </div>