create-vexcms 0.0.19 → 0.1.0-alpha.2

package/templates/base-nextjs/eslint.config.mjs

@@ -98,7 +98,7 @@ export default tseslint.config(
       "perfectionist/sort-named-imports": "warn",
       "perfectionist/sort-object-types": "warn",
       "perfectionist/sort-objects": [
-        "warn",
+        "off",
         {
           customGroups: [
             {
@@ -124,26 +124,6 @@ export default tseslint.config(
       "import/no-anonymous-default-export": "off",
     },
   },
-  {
-    // Disable object sorting in VEX collection/config files — field order determines
-    // the order of fields in admin panel forms
-    files: [
-      "**/vexcms/collections/**/*.ts",
-      "**/vexcms/access.*",
-      "**/vex.config.*",
-      "**/db/constants/**/*.ts",
-    ],
-    rules: {
-      "perfectionist/sort-objects": "off",
-    },
-  },
-  {
-    files: ["**/src/convex/**/*.ts"],
-    plugins: {
-      "@convex-dev": convexPlugin,
-    },
-    rules: convexRules,
-  },
   {
     languageOptions: {
       parserOptions: {

package/templates/base-nextjs/next.config.ts

@@ -3,8 +3,18 @@ import type { NextConfig } from "next"
 import "./src/env.mjs"
 
 const nextConfig: NextConfig = {
+  devIndicators: {
+    position: "bottom-right",
+  },
   allowedDevOrigins: ["127.0.01", "localhost"],
   reactCompiler: true,
+  images: {
+    remotePatterns: [
+      // Add your Convex deployment's hostname here once `npx convex dev` has
+      // run — Convex file storage URLs are served from `<deployment>.convex.cloud`,
+      // e.g. { hostname: "your-deployment-575.convex.cloud" }.
+    ],
+  },
 }
 
 export default nextConfig

package/templates/base-nextjs/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev --port=3010",
     "vex:dev": "vex dev",
     "vex:generate": "vex dev --once",
-    "vex:update": "pnpm add @vexcms/core@latest @vexcms/cli@latest @vexcms/admin-next@latest @vexcms/ui@latest @vexcms/richtext@latest @vexcms/better-auth@latest @vexcms/file-storage-convex@latest",
+    "vex:update": "pnpm add @vexcms/core@latest @vexcms/react@latest @vexcms/next@latest @vexcms/better-auth@latest @vexcms/file-storage-convex@latest @vexcms/cli@latest",
+    "seed": "convex run seed:init",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
@@ -15,55 +16,53 @@
     "secret:create": "openssl rand -base64 32 | tr -d '\\n' | tee /dev/stderr | pbcopy && echo '\\n✓ Secret copied to clipboard'"
   },
   "dependencies": {
-    "@base-ui/react": "^1.1.0",
-    "@convex-dev/better-auth": "0.10.11",
-    "@convex-dev/react-query": "^0.1.0",
-    "@daveyplate/better-auth-ui": "^3.3.15",
-    "@t3-oss/env-nextjs": "^0.13.10",
-    "@tanstack/react-form": "^1.27.7",
-    "@tanstack/react-query": "^5.90.17",
-    "@vexcms/admin-next": "~0.0.19",
-    "@vexcms/better-auth": "~0.0.19",
-    "@vexcms/core": "~0.0.19",
-    "@vexcms/richtext": "~0.0.19",
-    "@vexcms/ui": "~0.0.19",
-    "@vexcms/file-storage-convex": "~0.0.19",
-    "better-auth": ">=1.4.9 <1.5.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "convex": "^1.31.5",
-    "culori": "^4.0.2",
-    "convex-helpers": "^0.1.111",
-    "lucide-react": "^0.562.0",
-    "motion": "^12.38.0",
-    "next": "^16.2.1",
-    "next-themes": "^0.4.6",
-    "nuqs": "^2.8.8",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "shadcn": "^3.6.3",
-    "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0",
-    "zod": "^4.3.5"
+    "@base-ui/react": "1.2.0",
+    "@better-auth/api-key": "1.6.23",
+    "@convex-dev/better-auth": "0.11.5",
+    "@convex-dev/react-query": "0.1.0",
+    "@daveyplate/better-auth-ui": "3.4.0",
+    "@t3-oss/env-nextjs": "0.13.11",
+    "@tanstack/react-form": "1.33.1",
+    "@tanstack/react-query": "5.101.2",
+    "@vexcms/better-auth": "~0.1.0-alpha.2",
+    "@vexcms/core": "~0.1.0-alpha.2",
+    "@vexcms/file-storage-convex": "~0.1.0-alpha.2",
+    "@vexcms/next": "~0.1.0-alpha.2",
+    "@vexcms/react": "~0.1.0-alpha.2",
+    "better-auth": "1.6.23",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "convex": "1.44.0",
+    "convex-helpers": "0.1.120",
+    "lucide-react": "0.577.0",
+    "motion": "13.1.1",
+    "next": "16.3.3",
+    "nuqs": "2.9.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "shadcn": "3.6.3",
+    "tailwind-merge": "3.5.0",
+    "tw-animate-css": "1.4.0",
+    "zod": "4.4.3"
   },
   "devDependencies": {
-    "@convex-dev/eslint-plugin": "^1.1.1",
-    "@eslint/eslintrc": "^3.3.3",
-    "@next/eslint-plugin-next": "^15.4.3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@vexcms/cli": "~0.0.19",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^9",
+    "@convex-dev/eslint-plugin": "1.2.2",
+    "@eslint/eslintrc": "3.3.6",
+    "@next/eslint-plugin-next": "15.5.20",
+    "@tailwindcss/postcss": "4.3.2",
+    "@types/node": "20.19.43",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vexcms/cli": "~0.1.0-alpha.2",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "9.39.5",
     "eslint-config-next": "15.5.9",
-    "eslint-plugin-import-x": "^4.16.1",
-    "eslint-plugin-perfectionist": "^5.3.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "prettier": "^3.8.1",
-    "tailwindcss": "^4",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0"
+    "eslint-plugin-import-x": "4.17.1",
+    "eslint-plugin-perfectionist": "5.10.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "prettier": "3.9.5",
+    "tailwindcss": "4.3.2",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.63.0"
   }
 }

package/templates/base-nextjs/src/app/(frontend)/@auth/(...)auth/[pathname]/view.tsx

@@ -1,9 +1,21 @@
-import { AuthView } from "@daveyplate/better-auth-ui"
-import { Activity } from "react"
+"use client";
 
-import { Dialog, DialogContent, DialogTitle } from "~/components/ui/dialog"
+import { AuthView } from "@daveyplate/better-auth-ui";
+import { useSearchParams } from "next/navigation";
+import { Activity } from "react";
+
+import { Dialog, DialogContent, DialogTitle } from "~/components/ui/dialog";
 
 export default function AuthCard({ pathname }: { pathname: string }) {
+  const searchParams = useSearchParams();
+  const isGuardRedirect = searchParams.has("redirectTo");
+  if (isGuardRedirect) {
+    return (
+      <main className="absolute inset-0 grid place-items-center">
+        <AuthView path={pathname} />
+      </main>
+    );
+  }
   return (
     <main>
       <Dialog open>
@@ -12,12 +24,12 @@ export default function AuthCard({ pathname }: { pathname: string }) {
         </Activity>
         <DialogContent
           aria-describedby={undefined}
-          className="grid place-items-center border-none bg-transparent shadow-none ring-0"
+          className="grid place-items-center bg-transparent shadow-none ring-transparent"
           showCloseButton={false}
         >
           <AuthView path={pathname} />
         </DialogContent>
       </Dialog>
     </main>
-  )
+  );
 }

package/templates/base-nextjs/src/app/(frontend)/auth/[pathname]/view.tsx

@@ -1,11 +1,9 @@
-"use client"
-
-import { AuthView } from "@daveyplate/better-auth-ui"
+import { AuthView } from "@daveyplate/better-auth-ui";
 
 export default function AuthCard({ pathname }: { pathname: string }) {
   return (
     <main className="absolute inset-0 grid place-items-center">
       <AuthView path={pathname} />
     </main>
-  )
+  );
 }

package/templates/base-nextjs/src/app/(frontend)/layout.tsx

@@ -1,9 +1,19 @@
+import type { ReactNode } from "react"
+
+/**
+ * Public-site layout.
+ *
+ * Exists so the `@auth` parallel slot is received by the route group that
+ * declares it, rather than leaking up to the root layout — which is also shared
+ * with `/admin`, where an auth modal slot means nothing. Restores the structure
+ * the marketing template and the pre-rebuild app both used.
+ */
 export default function FrontendLayout({
   auth,
   children,
 }: Readonly<{
-  auth: React.ReactNode
-  children: React.ReactNode
+  auth: ReactNode
+  children: ReactNode
 }>) {
   return (
     <>

package/templates/base-nextjs/src/app/(frontend)/page.tsx

@@ -1,116 +1,5 @@
-"use client"
-
-import { useMutation, useQuery } from "convex/react"
-import { usePathname, useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
-
-import { api } from "@convex/_generated/api"
-import { useSession } from "~/auth/client"
-
-function LoadingSpinner() {
-  return (
-    <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-    </svg>
-  )
-}
+import { WelcomePage } from "~/components/WelcomePage"
 
 export default function Page() {
-  const isBootstrapped = useQuery(api.vex.firstUser.isBootstrapped)
-  const promoteFirstAdmin = useMutation(api.vex.firstUser.promoteFirstAdmin)
-  const { data: session } = useSession()
-  const router = useRouter()
-  const pathname = usePathname()
-  const [promoting, setPromoting] = useState(false)
-  const [navigating, setNavigating] = useState(false)
-
-  // Reset navigating state when the user comes back to the home page
-  // (e.g. closing the intercepting auth dialog)
-  useEffect(() => {
-    if (pathname === "/") {
-      setNavigating(false)
-    }
-  }, [pathname])
-
-  // If user is signed in and this is a fresh project, try to promote them
-  useEffect(() => {
-    if (session?.user && isBootstrapped === false && !promoting) {
-      setPromoting(true)
-      setNavigating(true)
-      promoteFirstAdmin()
-        .then((result) => {
-          if (result.promoted) {
-            router.push("/admin")
-          } else {
-            setNavigating(false)
-          }
-        })
-        .catch(() => {
-          setPromoting(false)
-          setNavigating(false)
-        })
-    }
-  }, [session, isBootstrapped, promoting, promoteFirstAdmin, router])
-
-  // Treat undefined (query still loading) as not bootstrapped — show the welcome page immediately
-  const bootstrapped = isBootstrapped === true
-
-  const buttonClass =
-    "inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
-
-  const handleNavigate = (path: string) => {
-    setNavigating(true)
-    router.push(path)
-  }
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold tracking-tight">VEX CMS</h1>
-        <p className="mt-3 text-lg text-muted-foreground">
-          {bootstrapped
-            ? "Your content management system is ready."
-            : "Welcome! Create your admin account to get started."}
-        </p>
-      </div>
-
-      <div className="flex gap-4">
-        {session?.user ? (
-          <button
-            onClick={() => handleNavigate("/admin")}
-            disabled={navigating}
-            className={buttonClass}
-          >
-            {navigating && <LoadingSpinner />}
-            {navigating ? "Loading..." : "Go to Admin Panel"}
-          </button>
-        ) : bootstrapped ? (
-          <button
-            onClick={() => handleNavigate("/auth/sign-in")}
-            disabled={navigating}
-            className={buttonClass}
-          >
-            {navigating && <LoadingSpinner />}
-            {navigating ? "Loading..." : "Sign In"}
-          </button>
-        ) : (
-          <button
-            onClick={() => handleNavigate("/auth/sign-up")}
-            disabled={navigating}
-            className={buttonClass}
-          >
-            {navigating && <LoadingSpinner />}
-            {navigating ? "Loading..." : "Create Admin Account"}
-          </button>
-        )}
-      </div>
-
-      {promoting && (
-        <p className="text-sm text-muted-foreground animate-pulse">
-          Setting up your admin account...
-        </p>
-      )}
-    </div>
-  )
+  return <WelcomePage />
 }

package/templates/base-nextjs/src/app/(vexcms)/admin/[[...path]]/page.tsx

@@ -0,0 +1,40 @@
+import { api } from "@convex/_generated/api";
+import { NextAdminPage } from "@vexcms/next/server";
+import { canAccessAdminPanel } from "@vexcms/core";
+import { redirect } from "next/navigation";
+
+import { fetchAuthQuery, getToken } from "~/auth/server";
+import config from "~/vex.config";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Admin panel route. Gates on two separate things, in order:
+ *
+ * 1. **Authentication** — no session token means sign in first.
+ * 2. **Authorization** — a valid session is not enough; the caller must also
+ *    satisfy `adminPanel.access` in the access matrix. Without this second check
+ *    any authenticated user reaches the full panel regardless of their roles.
+ *
+ * Both run server-side, before the panel renders, so an unauthorized caller
+ * never receives the admin shell (which would leak collection and global names).
+ */
+export default async function AdminPage({ params }: { params: Promise<{ path?: string[] }> }) {
+  const token = await getToken();
+  if (!token) {
+    redirect("/auth/sign-in?redirectTo=/admin");
+  }
+
+  const auth = await fetchAuthQuery(api.auth.api.getUserOrg, {});
+  if (
+    !canAccessAdminPanel({
+      access: config.access,
+      user: auth.user,
+      organization: auth.organization,
+    })
+  ) {
+    redirect("/unauthorized");
+  }
+
+  return <NextAdminPage config={config} params={params} token={token} />;
+}

package/templates/base-nextjs/src/app/(vexcms)/admin/clientProviders.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { uploadFile } from "@vexcms/file-storage-convex";
+import { StorageAdapterContextProvider, VexAccessProvider } from "@vexcms/react";
+
+import { access } from "~/auth/access";
+
+/**
+ * Provides client-side upload functions for VexCMS storage adapters.
+ *
+ * This is a "use client" component so that uploadFile is imported and
+ * owned on the client — it never crosses the RSC boundary as a prop.
+ *
+ * Add a new entry here when registering an additional storage adapter.
+ */
+export function ClientProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <StorageAdapterContextProvider adapterClients={{ convex: uploadFile }}>
+      <VexAccessProvider access={access}>{children}</VexAccessProvider>
+    </StorageAdapterContextProvider>
+  );
+}

package/templates/base-nextjs/src/app/(vexcms)/admin/layout.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react"
+
+import { NextAdminLayout } from "@vexcms/next/client"
+
+import { getCurrentUser } from "~/auth/serverUtils"
+import config from "~/vex.config"
+
+import { ClientProviders } from "./clientProviders"
+
+export default async function AdminLayout({ children }: { children: ReactNode }) {
+  const user = await getCurrentUser()
+  return (
+    <ClientProviders>
+      <NextAdminLayout config={config} user={user ?? undefined}>
+        {children}
+      </NextAdminLayout>
+    </ClientProviders>
+  )
+}