create-vexcms 0.0.20 → 0.1.0-alpha.2

package/templates/{marketing-site → base-nextjs}/src/components/ui/accordion.tsx

@@ -1,25 +1,46 @@
-"use client"
-
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 import { cn } from "~/lib/utils"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
     <AccordionPrimitive.Root
-      data-slot="accordion"
       className={cn("flex w-full flex-col", className)}
+      data-slot="accordion"
       {...props}
     />
   )
 }
 
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      data-slot="accordion-content"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
 function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
   return (
     <AccordionPrimitive.Item
-      data-slot="accordion-item"
       className={cn("not-last:border-b", className)}
+      data-slot="accordion-item"
       {...props}
     />
   )
@@ -33,42 +54,19 @@ function AccordionTrigger({
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
         className={cn(
           "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
+        data-slot="accordion-trigger"
         {...props}
       >
         {children}
-        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+        <ChevronDownIcon className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" data-slot="accordion-trigger-icon" />
+        <ChevronUpIcon className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" data-slot="accordion-trigger-icon" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
 }
 
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.Panel.Props) {
-  return (
-    <AccordionPrimitive.Panel
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Panel>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

package/templates/base-nextjs/src/components/ui/badge.tsx

@@ -5,39 +5,36 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "~/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
   {
+    defaultVariants: {
+      variant: "default",
+    },
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
       },
     },
-    defaultVariants: {
-      variant: "default",
-    },
   }
 )
 
 function Badge({
   className,
-  variant = "default",
   render,
+  variant = "default",
   ...props
 }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
   return useRender({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
-        className: cn(badgeVariants({ variant }), className),
+        className: cn(badgeVariants({ className, variant })),
       },
       props
     ),

package/templates/base-nextjs/src/components/ui/input.tsx

@@ -1,13 +1,31 @@
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import { Input as InputPrimitive } from "@base-ui/react"
+import { Loader2 } from "lucide-react"
 import * as React from "react"
 
-import { cn } from "~/lib/utils"
+import { cn } from "../../lib/utils"
 
-function Input({ type, className, ...props }: React.ComponentProps<"input">) {
-  return (
+/**
+ * Single-line text input with optional in-input loading spinner.
+ *
+ * When `loading` is true, a spinner renders on the right edge and the input
+ * gains right padding. The default path (no `loading` prop) is unchanged —
+ * a bare `<input>` element with no wrapper.
+ *
+ * @example
+ * ```tsx
+ * <Input value={query} onChange={onChange} loading={isPending} placeholder="Search…" />
+ */
+function Input({
+  className,
+  type,
+  loading,
+  ...props
+}: React.ComponentProps<"input"> & { loading?: boolean }) {
+  const input = (
     <InputPrimitive
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "h-8 w-full min-w-0 rounded-sm border border-input bg-card px-2.5 py-1 text-[13px] shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        loading && "pr-9",
         className
       )}
       data-slot="input"
@@ -15,6 +33,18 @@ function Input({ type, className, ...props }: React.ComponentProps<"input">) {
       {...props}
     />
   )
+  if (!loading) {
+    return input
+  }
+  return (
+    <span className="relative block w-full">
+      {input}
+      <Loader2
+        aria-hidden="true"
+        className="absolute right-2.5 top-1/2 -translate-y-1/2 size-4 animate-spin text-muted-foreground pointer-events-none"
+      />
+    </span>
+  )
 }
 
 export { Input }

package/templates/base-nextjs/src/context/AuthContext.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import { type OrganizationDoc, type UserDoc } from "~/db/constants";
+
+export interface CurrentAuth {
+  organization?: OrganizationDoc;
+  user: null | UserDoc; // null → unauthenticated → no roles → deny
+}
+export const AuthContext = createContext<CurrentAuth>({ user: null });
+
+export function AuthProvider(props: {
+  children: React.ReactNode;
+  value: {
+    organization?: OrganizationDoc;
+    user: null | UserDoc; // null → unauthenticated → no roles → deny
+  };
+}) {
+  return <AuthContext.Provider value={props.value}>{props.children}</AuthContext.Provider>;
+}
+/** @returns the current caller `{ user, organization }` from the server layout. */
+export function useAuth(): CurrentAuth {
+  const context = useContext(AuthContext);
+  if (context === null) {
+    throw new Error("useAuth must be used within a AuthProvider");
+  }
+  return context;
+}

package/templates/base-nextjs/src/db/constants/auth.ts

@@ -1,6 +1,5 @@
 export const USER_ROLES = {
   admin: "admin",
-  editor: "editor",
   user: "user",
 } as const
 export type UserRole = (typeof USER_ROLES)[keyof typeof USER_ROLES]

package/templates/base-nextjs/src/db/constants/index.ts

@@ -1,44 +1,31 @@
+import { type Doc, type Id } from "@convex/_generated/dataModel"
+
 export * from "./auth"
 
 // Better Auth
 export const TABLE_SLUG_USERS = "user" as const
+export type UserDoc = Doc<typeof TABLE_SLUG_USERS>
+export type UserID = Id<typeof TABLE_SLUG_USERS>
+
+export const TABLE_SLUG_ORGANIZATIONS = "organization" as const
+export type OrganizationDoc = Doc<typeof TABLE_SLUG_ORGANIZATIONS>
+export type OrganizationID = Id<typeof TABLE_SLUG_ORGANIZATIONS>
+
 export const TABLE_SLUG_ACCOUNTS = "account" as const
+
 export const TABLE_SLUG_SESSIONS = "session" as const
+export type Session = Doc<typeof TABLE_SLUG_SESSIONS>
+export type SessionID = Id<typeof TABLE_SLUG_SESSIONS>
+
 export const TABLE_SLUG_VERIFICATIONS = "verification" as const
 export const TABLE_SLUG_JWKS = "jwks" as const
+export const TABLE_SLUG_API_KEYS = "apikey" as const
+
+export const TABLE_SLUG_IMAGES = "images" as const
 
-export const TABLE_SLUG_MEDIA = "media" as const
-
-export const AUTH_PROVIDERS = {
-  apple: "apple",
-  atlassian: "atlassian",
-  cognito: "cognito",
-  discord: "discord",
-  dropbox: "dropbox",
-  facebook: "facebook",
-  figma: "figma",
-  github: "github",
-  gitlab: "gitlab",
-  google: "google",
-  huggingface: "huggingface",
-  kakao: "kakao",
-  kick: "kick",
-  line: "line",
-  linear: "linear",
-  linkedin: "linkedin",
-  microsoft: "microsoft",
-  naver: "naver",
-  notion: "notion",
-  paypal: "paypal",
-  reddit: "reddit",
-  roblox: "roblox",
-  salesforce: "salesforce",
-  slack: "slack",
-  spotify: "spotify",
-  tiktok: "tiktok",
-  twitch: "twitch",
-  twitter: "twitter",
-  vk: "vk",
-  zoom: "zoom",
-} as const
-export type AuthProvider = (typeof AUTH_PROVIDERS)[keyof typeof AUTH_PROVIDERS]
+// Site content (marketing-site overlay)
+export const TABLE_SLUG_PAGES = "pages" as const
+export const TABLE_SLUG_HEADERS = "headers" as const
+export const TABLE_SLUG_FOOTERS = "footers" as const
+export const TABLE_SLUG_THEMES = "themes" as const
+export const GLOBAL_SLUG_SITE_SETTINGS = "siteSettings" as const

package/templates/base-nextjs/src/lib/utils.ts

@@ -4,15 +4,3 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-
-/**
- * Normalize a page slug for consistent lookup.
- * - Strips leading/trailing slashes
- * - Treats "/" and "/home" and "home" all as "home"
- * - "/features" becomes "features"
- */
-export function normalizeSlug(slug?: string): string {
-  if (!slug) return "home"
-  const cleaned = slug.replace(/^\/+|\/+$/g, "")
-  return cleaned === "" ? "home" : cleaned
-}

package/templates/base-nextjs/src/proxy.ts

@@ -1,25 +1,110 @@
-import { cookies } from "next/headers"
-import { type NextRequest, NextResponse } from "next/server"
+import { api } from "@convex/_generated/api";
+import { fetchQuery } from "convex/nextjs";
+import { cookies } from "next/headers";
+import { type NextRequest, NextResponse } from "next/server";
 
+const SESSION_COOKIES = {
+  https: "__Secure-better-auth.session_token",
+  http: "better-auth.session_token",
+} as const;
+
+/**
+ * Paths the proxy must never guard, because they are where it sends people.
+ * Guarding them turns a Convex outage into an infinite redirect loop.
+ */
+const ALWAYS_ALLOWED: Record<string, true> = { "/": true, "/unauthorized": true };
+
+/**
+ * Session gate for every route except the public ones in `config.matcher`.
+ *
+ * Fails **closed**: if the session cannot be verified — no cookie, no matching
+ * session, or the Convex lookup throwing — the request is redirected rather than
+ * served. A verification error is not evidence of a valid session, and serving
+ * the page anyway would drop authentication for every guarded route the moment
+ * Convex became unreachable.
+ *
+ * Two distinct outcomes, deliberately:
+ * - **No/invalid session** → `/auth/sign-in`, clearing the stale cookie so the
+ *   presence check cannot lie on the next request.
+ * - **Verification failed** (Convex unreachable, timeout) → `/unauthorized`,
+ *   leaving cookies intact: the session may well be fine, so signing the user
+ *   out and discarding it would be wrong.
+ *
+ * @param request - The incoming request.
+ * @returns `NextResponse.next()` when the session is verified, otherwise a
+ *   redirect to sign-in or to the unauthorized page.
+ */
 export async function proxy(request: NextRequest) {
-  if (request.nextUrl.pathname === "/") {
-    return NextResponse.next()
+  if (ALWAYS_ALLOWED[request.nextUrl.pathname]) {
+    return NextResponse.next();
   }
 
-  const cookieStore = await cookies()
+  const cookieStore = await cookies();
   const sessionToken =
-    cookieStore.get("__Secure-better-auth.session_token") ??
-    cookieStore.get("better-auth.session_token")
-
+    cookieStore.get(SESSION_COOKIES.https)?.value ?? cookieStore.get(SESSION_COOKIES.http)?.value;
   if (!sessionToken) {
-    return NextResponse.redirect(new URL("/auth/sign-in", request.url))
+    return redirectToSignIn(request);
+  }
+
+  try {
+    const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
+      sessionToken: extractToken(sessionToken),
+    });
+    if (!session?.user) {
+      return redirectToSignIn(request);
+    }
+  } catch {
+    // Fail closed. Previously this returned `NextResponse.next()`, which served
+    // every guarded route unauthenticated whenever this lookup threw.
+    return redirectToUnauthorized(request);
+  }
+
+  return NextResponse.next();
+}
+
+/** Extract the raw token — better-auth stores "<raw_token>.<hmac_signature>" */
+function extractToken(cookieValue: string) {
+  return cookieValue.includes(".") ? cookieValue.split(".")[0] : cookieValue;
+}
+
+/**
+ * Redirect for a caller with no usable session. Clears the session cookies so
+ * the presence check cannot lie on the next request.
+ *
+ * @param request - The request being rejected.
+ * @returns A redirect to sign-in preserving the intended destination.
+ */
+function redirectToSignIn(request: NextRequest) {
+  const signInUrl = new URL("/auth/sign-in", request.url);
+  // Preserve where the user was headed (path + query)
+  signInUrl.searchParams.set("redirectTo", request.nextUrl.pathname + request.nextUrl.search);
+
+  const response = NextResponse.redirect(signInUrl);
+  for (const cookie of Object.values(SESSION_COOKIES)) {
+    // Clear the stale cookie so the presence-check never lies again
+    response.cookies.delete(cookie);
   }
+  return response;
+}
 
-  return NextResponse.next()
+/**
+ * Redirect for a caller whose session could not be *verified* — as opposed to
+ * one who has none.
+ *
+ * Cookies are deliberately left intact: the session is probably valid and the
+ * verification path (Convex) is simply unavailable, so discarding it would sign
+ * out every user during an outage. `/unauthorized` is exempt from this proxy, so
+ * this cannot loop.
+ *
+ * @param request - The request that could not be verified.
+ * @returns A redirect to the unauthorized page.
+ */
+function redirectToUnauthorized(request: NextRequest) {
+  return NextResponse.redirect(new URL("/unauthorized", request.url));
 }
 
 export const config = {
   matcher: [
-    "/((?!api|_next/static|_next/image|favicon.ico|models/*|staging/*|auth/sign-in|auth/sign-up|$).*)",
+    "/((?!api|_next/static|_next/image|favicon.ico|favicons|models/*|staging/*|auth/sign-in|auth/sign-up|$).*)",
   ],
-}
+};

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

@@ -0,0 +1,35 @@
+import { betterAuthAdapter } from "@vexcms/better-auth"
+import { defineConfig } from "@vexcms/core"
+import { convexFileStorage } from "@vexcms/file-storage-convex"
+
+import { authOptions } from "@convex/auth/options"
+
+import { access } from "~/auth/access"
+import { images, users } from "~/vexcms/collections"
+
+/**
+ * VexCMS 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.
+ *
+ * @see defineConfig in @vexcms/core
+ * @see betterAuthAdapter in @vexcms/better-auth
+ */
+const vexConfig = defineConfig({
+  access,
+  admin: {
+    sidebar: {
+      side: "right",
+    },
+  },
+  authAdapter: betterAuthAdapter({ config: authOptions }),
+  storage: {
+    adapters: [convexFileStorage({ mediaCollections: [images] })],
+  },
+  collections: [users],
+})
+
+export default vexConfig