create-vexcms 0.1.0-alpha.16 → 0.1.0-alpha.19

package/README.md

@@ -100,6 +100,17 @@ site:
 - `convex/seed.ts` — an idempotent `init` mutation seeding site settings, a header, a footer, the
   starter palettes, and a complete home page from the blocks' own defaults (`pnpm seed`)
 
+### Configuration
+
+Every scaffold ships two config files: `src/vex.config.ts` — client-safe, holds collections,
+globals, media collections, access rules, and the auth collections
+`betterAuthCollections(authSchema)` derives from `src/auth/schema.ts` — and
+`src/vex.config.server.ts`, which layers the Better Auth adapter and the storage adapter(s)
+onto it via `defineServerConfig`. Nothing is generated for auth: `src/auth/schema.ts` is the
+one source of truth for model names and fields (organizations on or off, per the `--orgs`
+flag) — the client config calls `betterAuthCollections()` on it directly, and
+`src/auth/options.ts` spreads it into the real Better Auth options.
+
 ## Getting started
 
 After scaffolding:

package/dist/index.js

@@ -2339,7 +2339,8 @@ var VexFrameworkInstaller = class {
   }
   /**
    * Configure the Better Auth organizations plugin.
-   * When enabled, replaces placeholders with organization import and plugin,
+   * When enabled, replaces placeholders with the organization import, plugin
+   * instance, and schema descriptor,
    * and leaves every org-aware file (`createGetAuth` call sites, `access.ts`,
    * `AuthContext.tsx`, `hasPermission.ts`, `convex/auth/api.ts`,
    * `db/constants/index.ts`) untouched.
@@ -2369,6 +2370,12 @@ var VexFrameworkInstaller = class {
       }
       await fs5.writeFile(pluginsPath, content);
     }
+    const schemaPath = path2.join(this.targetPath, "convex/auth/schema.ts");
+    if (await fs5.pathExists(schemaPath)) {
+      let content = await fs5.readFile(schemaPath, "utf-8");
+      content = enabled ? content.replace("    // {{ORGANIZATIONS_SCHEMA}}", "    organization: true,") : content.replace(/.*\/\/ \{\{ORGANIZATIONS_SCHEMA\}\}\n?/, "");
+      await fs5.writeFile(schemaPath, content);
+    }
     if (!enabled) {
       await this.stripOrganizationWiring();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vexcms",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.19",
   "description": "Scaffold a new VexCMS project",
   "keywords": [
     "cms",

package/templates/base-nextjs/README.md

@@ -77,10 +77,11 @@ see `convex/vex/firstUser.ts`. From there, "Go to Admin Panel" opens `/admin`.
 │   ├── auth/                   # Auth client + server helpers, access control
 │   ├── components/             # React components
 │   ├── vexcms/collections/     # Collection definitions
-│   ├── vex.config.ts           # VexCMS config
+│   ├── vex.config.ts           # VexCMS client config (collections, globals, access)
+│   ├── vex.config.server.ts    # VexCMS server config (auth adapter, storage adapters)
 │   └── env.mjs                 # Typed environment variables
 ├── convex/                     # Convex backend
-│   ├── auth/                   # Better Auth config + plugins
+│   ├── auth/                   # Better Auth config + plugins (schema.ts, options.ts)
 │   ├── vex/                    # Bootstrap, media, globals endpoints
 │   └── schema.ts               # Database schema
 └── .env.local                  # Environment variables (not committed)

package/templates/base-nextjs/convex/auth/options.ts

@@ -2,20 +2,28 @@ import type { BetterAuthOptions } from "better-auth"
 
 import { anonRoleDatabaseHook } from "@vexcms/better-auth"
 
-import {
-  TABLE_SLUG_ACCOUNTS,
-  TABLE_SLUG_SESSIONS,
-  TABLE_SLUG_USERS,
-  TABLE_SLUG_VERIFICATIONS,
-  USER_ROLES,
-} from "~/db/constants"
+import { USER_ROLES } from "~/db/constants"
 
 import { createPlugins } from "./plugins"
+import { authSchema } from "./schema"
 
+// `plugins` on the shared schema is a descriptor map for
+// `betterAuthCollections`, not Better Auth plugin instances — dropped by name
+// so the intent survives a reordering of the object literal below.
+const { plugins: _pluginDescriptors, ...schemaOptions } = authSchema
+
+/**
+ * Better Auth options for this project.
+ *
+ * Model names and `user.additionalFields` come from `./schema`, the one module
+ * both this file and `src/vex.config.ts` read, so a field added there reaches
+ * the database and the admin panel without being written twice. Everything
+ * below the spread is server-only.
+ *
+ * @see ./schema for the shared, client-safe half
+ */
 export const authOptions: BetterAuthOptions = {
-  account: {
-    modelName: TABLE_SLUG_ACCOUNTS,
-  },
+  ...schemaOptions,
   baseURL: process.env.SITE_URL,
   databaseHooks: {
     // Ties Better Auth's anonymous-plugin users to `access.anonRole` (see
@@ -28,21 +36,5 @@ export const authOptions: BetterAuthOptions = {
   // {{OAUTH_PROVIDERS}}
   plugins: createPlugins(),
   secret: process.env.BETTER_AUTH_SECRET,
-  session: {
-    modelName: TABLE_SLUG_SESSIONS,
-  },
   trustedOrigins: [process.env.SITE_URL!],
-  user: {
-    additionalFields: {
-      roles: {
-        type: "string[]",
-        defaultValue: [USER_ROLES.user],
-        required: true,
-      },
-    },
-    modelName: TABLE_SLUG_USERS,
-  },
-  verification: {
-    modelName: TABLE_SLUG_VERIFICATIONS,
-  },
 }

package/templates/base-nextjs/convex/auth/schema.ts

@@ -0,0 +1,51 @@
+import type { BetterAuthSchemaInput } from "@vexcms/better-auth/client"
+
+import {
+  TABLE_SLUG_ACCOUNTS,
+  TABLE_SLUG_SESSIONS,
+  TABLE_SLUG_USERS,
+  TABLE_SLUG_VERIFICATIONS,
+  USER_ROLES,
+} from "~/db/constants"
+
+/**
+ * Everything about your Better Auth setup that determines which collections
+ * exist and which fields they carry — and nothing else.
+ *
+ * This is the one auth module the browser reads: `src/vex.config.ts` passes it
+ * to `betterAuthCollections()` to build the admin panel's auth collections,
+ * and `./options` spreads it so the same model names and fields reach the
+ * database. Add a `user.additionalFields` entry here and it shows up in both.
+ *
+ * Keep it inert. `./options` reads `process.env` and `./plugins` pulls
+ * `better-auth/next-js` (→ `next/headers`), which is why they are separate
+ * files — importing either from the client config would drag the server into
+ * your browser bundle. Runtime plugin options (admin roles, mailers, OAuth
+ * secrets) belong on the real plugin instances in `./plugins`; only options
+ * that change which TABLES exist belong here.
+ *
+ * @see betterAuthCollections in @vexcms/better-auth/client
+ * @see ./options for the server-side options that spread this
+ */
+export const authSchema = {
+  account: { modelName: TABLE_SLUG_ACCOUNTS },
+  session: { modelName: TABLE_SLUG_SESSIONS },
+  user: {
+    modelName: TABLE_SLUG_USERS,
+    additionalFields: {
+      roles: {
+        type: "string[]",
+        defaultValue: [USER_ROLES.user],
+        required: true,
+      },
+    },
+  },
+  verification: { modelName: TABLE_SLUG_VERIFICATIONS },
+  plugins: {
+    admin: true,
+    anonymous: true,
+    apiKey: true,
+    convex: true,
+    // {{ORGANIZATIONS_SCHEMA}}
+  },
+} satisfies BetterAuthSchemaInput

package/templates/base-nextjs/convex/vex/globals.ts

@@ -2,7 +2,7 @@ import { createGetAuth } from "@vexcms/better-auth";
 import { globalsApi } from "@vexcms/core/server";
 
 import { TABLE_SLUG_ORGANIZATIONS, TABLE_SLUG_SESSIONS, TABLE_SLUG_USERS } from "~/db/constants";
-import config from "~/vex.config";
+import config from "~/vex.config.server";
 
 import { mutation, query } from "../_generated/server";
 

package/templates/base-nextjs/convex/vex/media.ts

@@ -2,7 +2,7 @@ import { createGetAuth } from "@vexcms/better-auth";
 import { mediaApi } from "@vexcms/core";
 
 import { TABLE_SLUG_ORGANIZATIONS, TABLE_SLUG_SESSIONS, TABLE_SLUG_USERS } from "~/db/constants";
-import config from "~/vex.config";
+import config from "~/vex.config.server";
 
 import { mutation, query } from "../_generated/server";
 

package/templates/base-nextjs/convex/vex.ts

@@ -2,7 +2,7 @@ import { createGetAuth } from "@vexcms/better-auth";
 import { collectionsApi } from "@vexcms/core/server";
 
 import { TABLE_SLUG_ORGANIZATIONS, TABLE_SLUG_SESSIONS, TABLE_SLUG_USERS } from "~/db/constants";
-import config from "~/vex.config";
+import config from "~/vex.config.server";
 
 import { mutation, query } from "./_generated/server";
 

package/templates/base-nextjs/package.json

@@ -24,11 +24,11 @@
     "@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.16",
-    "@vexcms/core": "~0.1.0-alpha.16",
-    "@vexcms/file-storage-convex": "~0.1.0-alpha.16",
-    "@vexcms/next": "~0.1.0-alpha.16",
-    "@vexcms/react": "~0.1.0-alpha.16",
+    "@vexcms/better-auth": "~0.1.0-alpha.19",
+    "@vexcms/core": "~0.1.0-alpha.19",
+    "@vexcms/file-storage-convex": "~0.1.0-alpha.19",
+    "@vexcms/next": "~0.1.0-alpha.19",
+    "@vexcms/react": "~0.1.0-alpha.19",
     "better-auth": "1.6.23",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -52,7 +52,7 @@
     "@types/node": "20.19.43",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vexcms/cli": "~0.1.0-alpha.16",
+    "@vexcms/cli": "~0.1.0-alpha.19",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.9",

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

@@ -1,12 +1,13 @@
 "use client";
 
 import { AuthView } from "@daveyplate/better-auth-ui";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Activity } from "react";
 
 import { Dialog, DialogContent, DialogTitle } from "~/components/ui/dialog";
 
 export default function AuthCard({ pathname }: { pathname: string }) {
+  const router = useRouter();
   const searchParams = useSearchParams();
   const isGuardRedirect = searchParams.has("redirectTo");
   if (isGuardRedirect) {
@@ -16,20 +17,31 @@ export default function AuthCard({ pathname }: { pathname: string }) {
       </main>
     );
   }
+  // No in-flow wrapper here on purpose. The Dialog portals into <body>, so a
+  // wrapping <main> would be an empty element sitting after the footer (the
+  // @auth slot renders last in the frontend layout). Next's post-navigation
+  // scroll handler targets the new segment's first DOM node and would scroll
+  // that empty element into view — i.e. jump the page to the bottom behind
+  // the modal. With only a portal rendered there is no node to target.
   return (
-    <main>
-      <Dialog open>
-        <Activity mode="hidden">
-          <DialogTitle />
-        </Activity>
-        <DialogContent
-          aria-describedby={undefined}
-          className="grid place-items-center bg-transparent shadow-none ring-transparent"
-          showCloseButton={false}
-        >
-          <AuthView path={pathname} />
-        </DialogContent>
-      </Dialog>
-    </main>
+    <Dialog
+      onOpenChange={(open) => {
+        if (!open) {
+          router.back();
+        }
+      }}
+      open
+    >
+      <Activity mode="hidden">
+        <DialogTitle />
+      </Activity>
+      <DialogContent
+        aria-describedby={undefined}
+        className="grid place-items-center bg-transparent shadow-none ring-transparent"
+        showCloseButton={false}
+      >
+        <AuthView path={pathname} />
+      </DialogContent>
+    </Dialog>
   );
 }

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

@@ -4,7 +4,7 @@ import { NextAdminPage } from "@vexcms/next/server";
 import { redirect } from "next/navigation";
 
 import { fetchAuthQuery, getToken } from "~/auth/server";
-import config from "~/vex.config";
+import config from "~/vex.config.server";
 
 export const dynamic = "force-dynamic";
 

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

@@ -1,22 +1,17 @@
-"use client";
+"use client"
 
-import { uploadFile } from "@vexcms/file-storage-convex";
-import { StorageAdapterContextProvider, VexAccessProvider } from "@vexcms/react";
+import { VexConfigProvider } from "@vexcms/react"
 
-import { access } from "~/auth/access";
+import config from "~/vex.config"
 
 /**
- * Provides client-side upload functions for VexCMS storage adapters.
+ * Mounts the single `VexConfigProvider` for the admin panel's client tree.
  *
- * 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.
+ * This is a "use client" component so `vex.config` is imported and owned on
+ * the client — it never crosses the RSC boundary as a prop. `access` and
+ * `storage.clientUploads` (the two fields that used to need their own
+ * providers) are already part of the config this imports.
  */
 export function ClientProviders({ children }: { children: React.ReactNode }) {
-  return (
-    <StorageAdapterContextProvider adapterClients={{ convex: uploadFile }}>
-      <VexAccessProvider access={access}>{children}</VexAccessProvider>
-    </StorageAdapterContextProvider>
-  );
+  return <VexConfigProvider config={config}>{children}</VexConfigProvider>
 }

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

@@ -4,7 +4,6 @@ import { NextAdminLayout } from "@vexcms/next/client"
 
 import { AuthServerProvider } from "~/components/providers/auth"
 import { getCurrentUser } from "~/auth/serverUtils"
-import config from "~/vex.config"
 
 import { ClientProviders } from "./clientProviders"
 
@@ -13,7 +12,7 @@ export default async function AdminLayout({ children }: { children: ReactNode })
   return (
     <AuthServerProvider>
       <ClientProviders>
-        <NextAdminLayout config={config} user={user ?? undefined}>
+        <NextAdminLayout user={user ?? undefined}>
           {children}
         </NextAdminLayout>
       </ClientProviders>

package/templates/base-nextjs/src/app/api/vex/revalidate/route.ts

@@ -2,7 +2,7 @@ import { api } from "@convex/_generated/api"
 import { createVexRevalidateRoute } from "@vexcms/next/cache"
 
 import { fetchAuthQuery, getToken } from "~/auth/server"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 /**
  * `POST /api/vex/revalidate` — session-authorized path purge.

package/templates/base-nextjs/src/auth/access.ts

@@ -11,8 +11,16 @@ import { images, users } from "~/vexcms/collections"
  * Access control (RBAC) for the admin panel and every registered collection.
  *
  * `admin` gets unrestricted access. `user` can read and update only their own
- * profile row and cannot reach the admin panel. Add a resource here whenever
- * you register a new collection in `vex.config.ts`.
+ * profile row, cannot reach the admin panel, and can read `images`. Add a
+ * resource here whenever you register a new collection in `vex.config.ts`.
+ *
+ * `anonRole: user` also covers every unauthenticated public-site request,
+ * including the build-time metadata fetch. `images.read` is what lets the
+ * public site show uploaded media at all: `MediaImage` and
+ * `src/lib/metadata.ts` resolve uploads through the RBAC-gated
+ * `vex/media:getUrl`, so without it anonymous visitors get no images and the
+ * page ships no `og:image`. Narrow it with a `constraints` rule if some media
+ * must stay private; do not remove it.
  *
  * @see https://vexcms.dev/docs/access-control
  */
@@ -32,6 +40,10 @@ export const access = defineAccess({
       adminPanel: {
         access: false,
       },
+      images: {
+        "*": false,
+        read: true,
+      },
       user: {
         "*": false,
         read: {

package/templates/base-nextjs/src/vex.config.server.ts

@@ -0,0 +1,30 @@
+import { betterAuthAdapter } from "@vexcms/better-auth"
+import { defineServerConfig } from "@vexcms/core"
+import { convexFileStorage } from "@vexcms/file-storage-convex"
+
+import { authOptions } from "@convex/auth/options"
+
+import vexConfig from "./vex.config"
+
+/**
+ * VexCMS server-only configuration for this project.
+ *
+ * Layers the Better Auth adapter and Convex file storage onto the
+ * client-safe `vexConfig`. You write this file once at scaffold time and
+ * rarely revisit it — day-to-day settings live in `vex.config.ts`.
+ *
+ * @see defineServerConfig in @vexcms/core
+ * @see betterAuthAdapter in @vexcms/better-auth
+ * @see ./vex.config for the client-safe half this layers onto
+ */
+const config = defineServerConfig({
+  config: vexConfig,
+  server: {
+    auth: { adapter: betterAuthAdapter({ config: authOptions }) },
+    storage: {
+      adapters: [convexFileStorage()],
+    },
+  },
+})
+
+export default config

package/templates/base-nextjs/src/vex.config.ts

@@ -1,35 +1,38 @@
-import { betterAuthAdapter } from "@vexcms/better-auth"
+import { betterAuthCollections } from "@vexcms/better-auth/client"
 import { defineConfig } from "@vexcms/core"
-import { convexFileStorage } from "@vexcms/file-storage-convex"
+import { uploadFile } from "@vexcms/file-storage-convex/client"
 
-import { authOptions } from "@convex/auth/options"
+import { authSchema } from "@convex/auth/schema"
 
 import { access } from "~/auth/access"
 import { images, users } from "~/vexcms/collections"
 
 /**
- * VexCMS configuration for this project.
+ * VexCMS client-safe configuration for this project.
  *
- * Registers the admin sidebar layout, the Better Auth adapter, Convex file
- * storage, and every collection. Add collections/globals here as you define
- * them — `vex dev` / `vex generate` derive the Convex schema and TypeScript
- * types from this file.
+ * Registers the admin sidebar layout and every collection, global, and
+ * media collection. Add collections/globals here as you define them —
+ * `vex dev` / `vex generate` derive the Convex schema and TypeScript types
+ * from this file, and the browser imports it directly via
+ * `VexConfigProvider`, so nothing here may reach a server SDK or an
+ * environment variable.
  *
  * @see defineConfig in @vexcms/core
- * @see betterAuthAdapter in @vexcms/better-auth
+ * @see ./vex.config.server for the auth adapter and storage adapter wiring
  */
 const vexConfig = defineConfig({
   access,
+  authCollections: betterAuthCollections(authSchema),
   admin: {
     sidebar: {
       side: "right",
     },
   },
-  authAdapter: betterAuthAdapter({ config: authOptions }),
   storage: {
-    adapters: [convexFileStorage({ mediaCollections: [images] })],
+    clientUploads: { convex: uploadFile },
   },
   collections: [users],
+  mediaCollections: [images],
 })
 
 export default vexConfig

package/templates/base-nextjs/src/vexcms/collections/images.ts

@@ -1,4 +1,4 @@
-import { defineMediaCollection } from "@vexcms/file-storage-convex";
+import { defineMediaCollection } from "@vexcms/file-storage-convex/client";
 
 import { TABLE_SLUG_IMAGES } from "~/db/constants";
 

package/templates/marketing-site/convex/seed.ts

@@ -7,12 +7,15 @@ import {
   TABLE_SLUG_PAGES,
   TABLE_SLUG_THEMES,
 } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 import {
   BLOCK_SLUG_CODE_SHOWCASE,
   BLOCK_SLUG_CTA,
   BLOCK_SLUG_FAQ,
   BLOCK_SLUG_FEATURES,
+  BLOCK_SLUG_FOOTER,
+  BLOCK_SLUG_HEADER,
+  BLOCK_SLUG_HERO,
   BLOCK_SLUG_HOW_IT_WORKS,
   BLOCK_SLUG_ROADMAP,
   BLOCK_SLUG_STATS,
@@ -389,7 +392,7 @@ export const init = internalMutation({
         name: "Main Header",
         content: [
           {
-            blockType: "header",
+            blockType: BLOCK_SLUG_HEADER,
             blockName: "Site Header",
             id: "main-header",
             logoText: "VexCMS",
@@ -427,7 +430,7 @@ export const init = internalMutation({
         name: "Main Footer",
         content: [
           {
-            blockType: "footer",
+            blockType: BLOCK_SLUG_FOOTER,
             blockName: "Site Footer",
             id: "main-footer",
             logoText: "VexCMS",
@@ -461,7 +464,7 @@ export const init = internalMutation({
         slug: "home",
         blocks: [
           {
-            blockType: "hero",
+            blockType: BLOCK_SLUG_HERO,
             blockName: "Hero",
             id: "home-hero",
             variant: ["full"],
@@ -507,7 +510,7 @@ export const init = internalMutation({
             ],
           },
           {
-            blockType: "features",
+            blockType: BLOCK_SLUG_FEATURES,
             blockName: "Features",
             id: "home-features",
             heading: "Everything comes from one schema.",
@@ -618,7 +621,7 @@ export const posts = defineTable({
             ],
           },
           {
-            blockType: "how_it_works",
+            blockType: BLOCK_SLUG_HOW_IT_WORKS,
             blockName: "How It Works",
             id: "home-how-it-works",
             heading: "From zero to a live CMS in four steps.",
@@ -651,7 +654,7 @@ export const posts = defineTable({
             ],
           },
           {
-            blockType: "roadmap",
+            blockType: BLOCK_SLUG_ROADMAP,
             blockName: "Roadmap",
             id: "home-roadmap",
             heading: "Roadmap",
@@ -769,7 +772,7 @@ export const posts = defineTable({
             ],
           },
           {
-            blockType: "faq",
+            blockType: BLOCK_SLUG_FAQ,
             blockName: "FAQ",
             id: "home-faq",
             heading: "Questions we keep getting.",
@@ -809,7 +812,7 @@ export const posts = defineTable({
             ],
           },
           {
-            blockType: "cta",
+            blockType: BLOCK_SLUG_CTA,
             blockName: "CTA",
             id: "home-cta",
             heading: "Start with a schema. Ship in an hour.",
@@ -836,7 +839,7 @@ export const posts = defineTable({
         slug: "features",
         blocks: [
           {
-            blockType: "hero",
+            blockType: BLOCK_SLUG_HERO,
             blockName: "Hero",
             id: "features-hero",
             variant: ["compact"],
@@ -937,7 +940,7 @@ export const posts = defineTable({
         slug: "roadmap",
         blocks: [
           {
-            blockType: "hero",
+            blockType: BLOCK_SLUG_HERO,
             blockName: "Hero",
             id: "roadmap-hero",
             variant: ["compact"],

package/templates/marketing-site/convex/siteSettings.ts

@@ -1,7 +1,7 @@
 import { getGlobal } from "@vexcms/core/server"
 
 import { GLOBAL_SLUG_SITE_SETTINGS } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 import { query } from "./_generated/server"
 

package/templates/marketing-site/convex/theme.ts

@@ -1,7 +1,7 @@
 import { getGlobal } from "@vexcms/core/server"
 
 import { GLOBAL_SLUG_SITE_SETTINGS, type TABLE_SLUG_THEMES } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 import type { Doc, Id } from "./_generated/dataModel"
 import type { QueryCtx } from "./_generated/server"

package/templates/marketing-site/src/app/(vexcms)/admin/layout.tsx

@@ -6,7 +6,6 @@ import { AuthServerProvider } from "~/components/providers/auth";
 import { getCurrentUser } from "~/auth/serverUtils";
 import { ThemeLive } from "~/components/ThemeLive";
 import { ThemeStyle } from "~/components/ThemeStyle";
-import config from "~/vex.config";
 
 import { ClientProviders } from "./clientProviders";
 
@@ -26,9 +25,7 @@ export default async function AdminLayout({ children }: { children: ReactNode })
       <ClientProviders>
         <ThemeStyle scope="admin" />
         <ThemeLive scope="admin" />
-        <NextAdminLayout config={config} user={user ?? undefined}>
-          {children}
-        </NextAdminLayout>
+        <NextAdminLayout user={user ?? undefined}>{children}</NextAdminLayout>
       </ClientProviders>
     </AuthServerProvider>
   );

package/templates/marketing-site/src/lib/metadata.ts

@@ -75,8 +75,15 @@ export async function generatePageMetadata(props: { slug?: string }): Promise<Me
       imageUrl: ogImageUrl,
     })
 
-    if (twitterHandle) {
-      metadata.twitter = { card: "summary_large_image", site: twitterHandle }
+    // Discord, Slack and X pick the large-image layout from `twitter:card`, not
+    // from `og:image` alone — and Next auto-fills `card: "summary"` (a small
+    // thumbnail) whenever `twitter` is omitted. So the card type must be emitted
+    // whenever an image resolved, independently of whether a handle exists.
+    if (ogImageUrl || twitterHandle) {
+      metadata.twitter = {
+        card: ogImageUrl ? "summary_large_image" : "summary",
+        ...(twitterHandle ? { site: twitterHandle } : {}),
+      }
     }
 
     return metadata

package/templates/marketing-site/src/vex.config.server.ts

@@ -0,0 +1,27 @@
+import { authOptions } from "@convex/auth/options"
+import { betterAuthAdapter } from "@vexcms/better-auth"
+import { defineServerConfig } from "@vexcms/core"
+import { convexFileStorage } from "@vexcms/file-storage-convex"
+
+import vexConfig from "./vex.config"
+
+/**
+ * VexCMS server-only configuration for the marketing site.
+ *
+ * Layers the Better Auth adapter and Convex file storage onto the
+ * client-safe `vexConfig`. You write this file once at scaffold time and
+ * rarely revisit it — day-to-day settings live in `vex.config.ts`.
+ *
+ * @see ./vex.config for the client-safe half this layers onto
+ */
+const config = defineServerConfig({
+  config: vexConfig,
+  server: {
+    auth: { adapter: betterAuthAdapter({ config: authOptions }) },
+    storage: {
+      adapters: [convexFileStorage()],
+    },
+  },
+})
+
+export default config

package/templates/marketing-site/src/vex.config.ts

@@ -1,33 +1,36 @@
-import { authOptions } from "@convex/auth/options"
-import { betterAuthAdapter } from "@vexcms/better-auth"
+import { betterAuthCollections } from "@vexcms/better-auth/client"
 import { defineConfig } from "@vexcms/core"
-import { convexFileStorage } from "@vexcms/file-storage-convex"
+import { uploadFile } from "@vexcms/file-storage-convex/client"
+
+import { authSchema } from "@convex/auth/schema"
 
 import { access } from "~/auth/access"
 import { footers, headers, images, pages, themes, users } from "~/vexcms/collections"
 import { siteSettings } from "~/vexcms/globals"
 
 /**
- * VexCMS configuration for the marketing site.
+ * VexCMS client-safe configuration for the marketing site.
  *
  * Replaces `templates/base-nextjs`'s bare config wholesale (overlay copy is
  * file-level, not a merge): carries base's `users`/`images` forward unchanged
- * and adds the four marketing collections plus `siteSettings`. `vex dev`/
- * `vex generate` consume this to produce the Convex schema and TypeScript
- * types.
+ * and adds the four marketing collections plus `siteSettings`. Imported
+ * directly by the browser via `VexConfigProvider`.
+ *
+ * @see ./vex.config.server for the auth adapter and storage adapter wiring
  */
 const vexConfig = defineConfig({
   access,
+  authCollections: betterAuthCollections(authSchema),
   admin: {
     sidebar: {
       side: "right",
     },
   },
-  authAdapter: betterAuthAdapter({ config: authOptions }),
   storage: {
-    adapters: [convexFileStorage({ mediaCollections: [images] })],
+    clientUploads: { convex: uploadFile },
   },
   collections: [users, pages, headers, footers, themes],
+  mediaCollections: [images],
   globals: [siteSettings],
   routes: {
     map: ({ collection, doc }) => {

package/templates/marketing-site/src/vexcms/api.ts

@@ -3,7 +3,7 @@ import { createGetAuth } from "@vexcms/better-auth"
 import { vexServerApi } from "@vexcms/core/server"
 
 import { TABLE_SLUG_ORGANIZATIONS, TABLE_SLUG_SESSIONS, TABLE_SLUG_USERS } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 /**
  * Bound server API — `config`/`getAuth` are threaded once here so

package/templates/marketing-site/src/vexcms/blocks/Roadmap/index.tsx

@@ -2,7 +2,7 @@
 
 import type { BlockComponentProps } from "@vexcms/react"
 
-import { cn, ScrollArea, Tabs, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger } from "@vexcms/react"
+import { cn, ScrollArea, ScrollBar, Tabs, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger } from "@vexcms/react"
 import { Check } from "lucide-react"
 import { useState } from "react"
 
@@ -88,6 +88,7 @@ export default function RoadmapBlock({ block }: BlockComponentProps) {
                   </TabsTrigger>
                 ))}
               </TabsList>
+              <ScrollBar orientation="horizontal" />
             </ScrollArea>
           </Tabs>
         ) : null}