@flaredev/cli 0.1.2 → 0.3.0

package/templates/app/app/dashboard/page.tsx

@@ -1,18 +1,132 @@
-import { SignOutButton } from "@/components/sign-out-button";
+import Link from "next/link";
+import { count, eq } from "drizzle-orm";
+import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { resourceIcon } from "@/components/dashboard/resource-icon";
+import { StatCards, type Stat } from "@/components/dashboard/stat-card";
+import { getDb } from "@/db";
+import { passkey } from "@/db/auth-schema";
+import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { adminPermissions, recentCounts, recordCount, resourcePath, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
 
+export const metadata = { title: "Dashboard" };
+
+/** The first thing you see when you sign in: how much data there is, and what's left to set up. */
 export default async function DashboardPage() {
   const { user } = await requireSession("/dashboard");
+  const resources = await visibleResources();
+
+  const cards = await Promise.all(
+    resources.map(async (resource) => {
+      const [total, recent, permissions] = await Promise.all([
+        recordCount(resource.name),
+        recentCounts(resource.name),
+        adminPermissions(resource.name),
+      ]);
+      return { resource, total, recent, permissions };
+    }),
+  );
+
+  const stats: Stat[] = cards.slice(0, 4).map(({ resource, total, recent }) => ({
+    label: resource.pluralLabel,
+    value: total,
+    hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
+    change: trend(recent.current, recent.previous),
+    icon: resourceIcon(resource.icon),
+    href: resourcePath(resource),
+  }));
+
+  const [{ passkeys } = { passkeys: 0 }] = await getDb().select({ passkeys: count() }).from(passkey).where(eq(passkey.userId, user.id));
+  const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
+  const steps = [
+    { done: user.emailVerified, label: "Verify your email address", href: "/verify-email" },
+    ...(twoFactorAvailable ? [{ done: twoFactorOn, label: "Turn on two-factor authentication", href: "/dashboard/account#two-factor" }] : []),
+    ...(authConfig.passkeys ? [{ done: passkeys > 0, label: "Add a passkey for one-tap sign-in", href: "/dashboard/account#passkeys" }] : []),
+  ];
+  const remaining = steps.filter((step) => !step.done).length;
 
   return (
-    <main className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-8">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Dashboard</h1>
-        <SignOutButton />
+    <>
+      <PageHeader
+        title={`Welcome${user.name ? `, ${user.name.split(" ")[0]}` : ""}`}
+        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource to fill this page."}
+      />
+
+      <StatCards stats={stats} />
+
+      {resources.length === 0 && (
+        <Empty className="rounded-xl border border-dashed">
+          <EmptyHeader>
+            <EmptyTitle>No resources yet</EmptyTitle>
+            <EmptyDescription>
+              Generate one with <code>flare gen resource Contact --fields &quot;name:string, email:string&quot;</code>, then fill it with{" "}
+              <code>flare seed:resource Contact --count 1000</code>.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+        {cards.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Your data</CardTitle>
+              <CardDescription>Every resource you can see.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col">
+              {cards.map(({ resource, total, permissions }) => {
+                const Icon = resourceIcon(resource.icon);
+                return (
+                  <div key={resource.name} className="flex items-center gap-3 border-b py-3 last:border-b-0 last:pb-0">
+                    <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+                      <Icon className="size-4.5" />
+                    </span>
+                    <div className="flex min-w-0 flex-col">
+                      <Link href={resourcePath(resource)} className="truncate text-sm font-medium hover:underline">
+                        {resource.pluralLabel}
+                      </Link>
+                      <span className="text-xs text-muted-foreground">{total.toLocaleString()} records</span>
+                    </div>
+                    <div className="ml-auto flex items-center gap-1">
+                      {permissions.create && (
+                        <Button variant="ghost" size="icon" aria-label={`New ${resource.label.toLowerCase()}`} asChild>
+                          <Link href={resourcePath(resource, "new")}>
+                            <PlusIcon />
+                          </Link>
+                        </Button>
+                      )}
+                      <Button variant="ghost" size="icon" aria-label={`Open ${resource.pluralLabel.toLowerCase()}`} asChild>
+                        <Link href={resourcePath(resource)}>
+                          <ArrowRightIcon />
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </CardContent>
+          </Card>
+        )}
+
+        <Card className="h-fit">
+          <CardHeader>
+            <CardTitle className="text-base">Secure your account</CardTitle>
+            <CardDescription>{remaining === 0 ? "All done." : `${remaining} to go.`}</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {steps.map((step) => (
+              <Link key={step.label} href={step.href} className="flex items-center gap-3 border-b py-3 text-sm last:border-b-0 last:pb-0 hover:text-primary">
+                {step.done ? <CheckCircle2Icon className="size-4.5 text-success" /> : <CircleIcon className="size-4.5 text-muted-foreground" />}
+                <span className={step.done ? "text-muted-foreground line-through" : "font-medium"}>{step.label}</span>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
       </div>
-      <p className="text-sm text-[var(--foreground-muted)]">
-        Signed in as <span className="font-medium text-[var(--foreground)]">{user.email}</span>
-      </p>
-    </main>
+    </>
   );
 }

package/templates/app/app/forgot-password/page.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ForgotPasswordForm } from "@/components/auth/password-forms";
+
+export const metadata = { title: "Reset your password" };
+
+export default async function ForgotPasswordPage({ searchParams }: { searchParams: Promise<{ email?: string }> }) {
+  const { email } = await searchParams;
+  return (
+    <AuthShell
+      title="Reset your password"
+      subtitle="We'll email you a link to choose a new one."
+      footer={
+        <Link href="/sign-in" className="font-medium text-link hover:underline">
+          Back to sign in
+        </Link>
+      }
+    >
+      <ForgotPasswordForm initialEmail={email ?? ""} />
+    </AuthShell>
+  );
+}

package/templates/app/app/globals.css

@@ -1,5 +1,11 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+/* One typeface per theme (self-hosted; only the active theme's font is downloaded). */
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/plus-jakarta-sans";
+@import "@fontsource-variable/noto-sans";
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/figtree";
 
 /*
  * Dark mode: the `dark` class on <html> (set from the theme cookie) or, with no
@@ -66,8 +72,6 @@
   --card-foreground: var(--foreground);
   --popover: var(--surface);
   --popover-foreground: var(--foreground);
-  --primary: var(--foreground);
-  --primary-foreground: var(--background);
   --secondary: var(--surface-muted);
   --secondary-foreground: var(--foreground);
   --muted: var(--surface-muted);
@@ -76,7 +80,6 @@
   --accent-foreground: var(--foreground);
   --destructive: var(--danger);
   --input: var(--border);
-  --ring: var(--foreground-muted);
   --chart-1: var(--foreground);
   --chart-2: #71717a;
   --chart-3: #a1a1aa;
@@ -101,8 +104,104 @@
   }
 }
 
+/*
+ * Themes (lib/theme.ts): <html data-theme="…">. Each sets the brand colour, link colour,
+ * button shape, heading weight and typeface; --primary and --ring follow the brand, so
+ * the admin, dashboard, auth screens and home page all change together.
+ */
+:root,
+[data-theme="default"] {
+  --brand: #5b5bd6;
+  --brand-foreground: #ffffff;
+  --link: #5b5bd6;
+  --radius: 0.5rem;
+  --button-radius: 0.5rem;
+  --heading-weight: 600;
+  --heading-tracking: -0.02em;
+  --font-theme: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-theme="coral"] {
+  --brand: #e31c5f;
+  --brand-foreground: #ffffff;
+  --brand-gradient: linear-gradient(90deg, #e61e4d 0%, #e31c5f 50%, #d70466 100%);
+  --link: #d70466;
+  --radius: 0.75rem;
+  --button-radius: 0.5rem;
+  --heading-weight: 700;
+  --heading-tracking: -0.025em;
+  --font-theme: "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-theme="amber"] {
+  --brand: #ffd814;
+  --brand-foreground: #0f1111;
+  --link: #2162a1;
+  --radius: 0.5rem;
+  --button-radius: 999px;
+  --heading-weight: 400;
+  --heading-tracking: 0;
+  --font-theme: "Noto Sans Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-theme="sky"] {
+  --brand: #0051c3;
+  --brand-foreground: #ffffff;
+  --link: #0051c3;
+  --radius: 0.375rem;
+  --button-radius: 0.375rem;
+  --heading-weight: 650;
+  --heading-tracking: -0.025em;
+  --font-theme: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-theme="mono"] {
+  --brand: var(--foreground);
+  --brand-foreground: var(--background);
+  --link: var(--foreground);
+  --radius: 0.5rem;
+  --button-radius: 0.5rem;
+  --heading-weight: 600;
+  --heading-tracking: -0.03em;
+  --font-theme: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+[data-theme="emerald"] {
+  --brand: #3ecf8e;
+  --brand-foreground: #0f1f17;
+  --link: #11784a;
+  --radius: 0.375rem;
+  --button-radius: 0.375rem;
+  --heading-weight: 500;
+  --heading-tracking: -0.02em;
+  --font-theme: "Figtree Variable", ui-sans-serif, system-ui, sans-serif;
+}
+
+/* Links stay readable on dark grounds. */
+.dark {
+  --link: color-mix(in oklab, var(--brand) 65%, white);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --link: color-mix(in oklab, var(--brand) 65%, white);
+  }
+}
+[data-theme="mono"].dark,
+[data-theme="amber"].dark {
+  --link: var(--foreground);
+}
+
+:root {
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --ring: var(--brand);
+}
+
 @theme inline {
-  --font-sans: ui-sans-serif, -apple-system, "Inter", "Segoe UI", sans-serif;
+  --font-sans: var(--font-theme);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-link: var(--link);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-surface: var(--surface);
@@ -153,4 +252,10 @@
   body {
     @apply bg-background text-foreground font-sans antialiased;
   }
+  h1,
+  h2,
+  h3 {
+    font-weight: var(--heading-weight);
+    letter-spacing: var(--heading-tracking);
+  }
 }

package/templates/app/app/layout.tsx

@@ -1,26 +1,28 @@
-import type { Metadata } from "next";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "__APP_NAME__",
-  description: "Built with Flare",
-};
-
-/**
- * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
- * first paint. It runs in the browser rather than reading cookies() here: a layout
- * that reads cookies makes every page under it dynamic, and dynamic pages can never
- * be served from the CDN cache.
- */
-const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
-
-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { activeTheme } from "@/lib/theme";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: { default: site.name, template: `%s · ${site.name}` },
+  description: site.description,
+};
+
+/**
+ * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
+ * first paint. It runs in the browser rather than reading cookies() here: a layout
+ * that reads cookies makes every page under it dynamic, and dynamic pages can never
+ * be served from the CDN cache.
+ */
+const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" data-theme={activeTheme} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/app/app/page.tsx

@@ -1,19 +1,132 @@
 import Link from "next/link";
+import { ArrowRightIcon, CreditCardIcon, LayoutDashboardIcon, PlugIcon, ShieldCheckIcon, SparklesIcon, UsersIcon, ZapIcon } from "lucide-react";
+import { ProductPreview } from "@/components/marketing/product-preview";
+import { SiteHeader } from "@/components/marketing/site-header";
+import { site } from "@/lib/site";
 
+const ICONS = { zap: ZapIcon, "shield-check": ShieldCheckIcon, "layout-dashboard": LayoutDashboardIcon, users: UsersIcon, plug: PlugIcon, "credit-card": CreditCardIcon };
+
+/** The public home page. Every word comes from lib/site.ts; the look from the theme. */
 export default function Home() {
   return (
-    <main className="mx-auto flex min-h-screen max-w-2xl flex-col justify-center gap-4 p-8">
-      <p className="text-sm font-medium text-[var(--foreground-muted)]">Flare</p>
-      <h1 className="text-2xl font-semibold">__APP_NAME__</h1>
-      <p className="text-sm text-[var(--foreground-muted)]">
-        Edit <code>app/page.tsx</code> to get started, or generate a resource with{" "}
-        <code>flare gen resource</code>.
-      </p>
-      <nav className="flex gap-3 text-sm font-medium">
-        <Link href="/sign-in" className="underline">Sign in</Link>
-        <Link href="/sign-up" className="underline">Sign up</Link>
-        <Link href="/dashboard" className="underline">Dashboard</Link>
-      </nav>
-    </main>
+    <>
+      <SiteHeader />
+      <main>
+        {/* Hero */}
+        <section className="relative overflow-hidden">
+          <div
+            aria-hidden="true"
+            className="absolute inset-0 -z-10 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:64px_64px] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black,transparent_75%)] opacity-70"
+          />
+          <div aria-hidden="true" className="absolute top-[-12rem] left-1/2 -z-10 h-[28rem] w-[48rem] -translate-x-1/2 rounded-full bg-[conic-gradient(from_120deg,var(--brand),#f9a8d4,#a5b4fc,#99f6e4,var(--brand))] opacity-20 blur-3xl" />
+          <div className="mx-auto flex max-w-4xl flex-col items-center px-6 pt-20 pb-16 text-center md:pt-28">
+            {site.announcement && (
+              <Link
+                href={site.announcement.href}
+                className="mb-8 inline-flex items-center gap-2 rounded-full border border-border bg-surface/80 py-1 pr-3 pl-1 text-sm text-foreground-muted shadow-sm backdrop-blur hover:text-foreground"
+              >
+                <span className="rounded-full bg-brand/15 px-2 py-0.5 text-xs font-semibold text-link">{site.announcement.label}</span>
+                {site.announcement.text}
+                <ArrowRightIcon className="size-3.5" />
+              </Link>
+            )}
+            <h1 className="text-5xl leading-[1.05] text-balance md:text-7xl">{site.tagline}</h1>
+            <p className="mt-6 max-w-2xl text-lg text-foreground-muted text-pretty md:text-xl">{site.description}</p>
+            <div className="mt-10 flex flex-wrap justify-center gap-3">
+              <Link
+                href="/sign-up"
+                className="inline-flex h-12 items-center gap-2 rounded-[var(--button-radius)] bg-brand px-6 font-medium text-brand-foreground [background-image:var(--brand-gradient,none)] hover:brightness-95"
+              >
+                Start for free
+              </Link>
+              <a href="#features" className="inline-flex h-12 items-center rounded-[var(--button-radius)] border border-border bg-surface px-6 font-medium hover:bg-surface-muted">
+                See how it works
+              </a>
+            </div>
+          </div>
+          <div className="px-6 pb-24">
+            <ProductPreview />
+          </div>
+        </section>
+
+        {/* Logos */}
+        {site.customers.length > 0 && (
+          <section id="customers" aria-label="Customers" className="border-y border-border bg-surface-muted/50 py-12">
+            <p className="text-center text-sm text-foreground-muted">Trusted by teams at</p>
+            <ul className="mx-auto mt-6 flex max-w-5xl flex-wrap items-center justify-center gap-x-12 gap-y-4 px-6">
+              {site.customers.map((name) => (
+                <li key={name} className="text-2xl font-semibold tracking-tight text-foreground/35">
+                  {name}
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {/* Features */}
+        <section id="features" className="mx-auto max-w-6xl px-6 py-24">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-4xl text-balance">Everything your team needs, in one place</h2>
+            <p className="mt-4 text-lg text-foreground-muted">{site.name} takes care of the busywork so you can focus on your customers.</p>
+          </div>
+          <ul className="mt-16 grid gap-px overflow-hidden rounded-[calc(var(--radius)+8px)] border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
+            {site.features.map((feature) => {
+              const Icon = ICONS[feature.icon as keyof typeof ICONS] ?? SparklesIcon;
+              return (
+                <li key={feature.title} className="flex flex-col gap-3 bg-surface p-8">
+                  <span className="grid size-10 place-items-center rounded-[var(--radius)] bg-brand/10 text-link">
+                    <Icon className="size-5" />
+                  </span>
+                  <h3 className="text-lg">{feature.title}</h3>
+                  <p className="text-sm leading-relaxed text-foreground-muted">{feature.description}</p>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+
+        {/* Testimonial */}
+        <section className="border-t border-border bg-surface-muted/50 px-6 py-24">
+          <figure className="mx-auto flex max-w-3xl flex-col items-center gap-8 text-center">
+            <blockquote className="text-3xl leading-snug text-balance">&ldquo;{site.testimonial.quote}&rdquo;</blockquote>
+            <figcaption className="text-sm">
+              <span className="font-semibold">{site.testimonial.author}</span>
+              <span className="text-foreground-muted">, {site.testimonial.role}</span>
+            </figcaption>
+          </figure>
+        </section>
+
+        {/* Closing call to action */}
+        <section className="px-6 py-24">
+          <div className="relative mx-auto flex max-w-5xl flex-col items-center gap-6 overflow-hidden rounded-[calc(var(--radius)+12px)] bg-foreground px-8 py-16 text-center text-background">
+            <div aria-hidden="true" className="absolute -top-24 left-1/2 h-64 w-[36rem] -translate-x-1/2 rounded-full bg-brand opacity-40 blur-3xl" />
+            <h2 className="relative text-4xl text-balance">Get started with {site.name} today</h2>
+            <p className="relative max-w-xl text-background/70">Create an account in seconds. No credit card, nothing to install.</p>
+            <Link href="/sign-up" className="relative inline-flex h-12 items-center gap-2 rounded-[var(--button-radius)] bg-background px-6 font-medium text-foreground hover:bg-background/90">
+              Create your account <ArrowRightIcon className="size-4" />
+            </Link>
+          </div>
+        </section>
+      </main>
+
+      <footer className="border-t border-border">
+        <div className="mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 text-sm text-foreground-muted md:flex-row md:items-center md:justify-between">
+          <p>
+            © {new Date().getFullYear()} {site.name}
+          </p>
+          <nav aria-label="Footer" className="flex gap-6">
+            <Link href={site.links.terms} className="hover:text-foreground">
+              Terms
+            </Link>
+            <Link href={site.links.privacy} className="hover:text-foreground">
+              Privacy
+            </Link>
+            <a href={site.links.support} className="hover:text-foreground">
+              Contact
+            </a>
+          </nav>
+        </div>
+      </footer>
+    </>
   );
 }

package/templates/app/app/reset-password/page.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ResetPasswordForm } from "@/components/auth/password-forms";
+import { FormMessage } from "@/components/auth/ui";
+
+export const metadata = { title: "Choose a new password" };
+
+export default async function ResetPasswordPage({ searchParams }: { searchParams: Promise<{ token?: string; error?: string }> }) {
+  const { token, error } = await searchParams;
+  return (
+    <AuthShell
+      title="Choose a new password"
+      footer={
+        <Link href="/sign-in" className="font-medium text-link hover:underline">
+          Back to sign in
+        </Link>
+      }
+    >
+      {token && !error ? (
+        <ResetPasswordForm token={token} />
+      ) : (
+        <div className="flex flex-col gap-4">
+          <FormMessage>This reset link has expired or was already used.</FormMessage>
+          <Link href="/forgot-password" className="text-center text-sm font-medium text-link hover:underline">
+            Ask for a new link
+          </Link>
+        </div>
+      )}
+    </AuthShell>
+  );
+}

package/templates/app/app/sign-in/page.tsx

@@ -1,33 +1,49 @@
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { AuthForm } from "@/components/auth-form";
-import { enabledSocialProviders } from "@/lib/auth";
-import { getSession, safeRedirectPath } from "@/lib/session";
-
-export default async function SignInPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ next?: string; error?: string }>;
-}) {
-  const params = await searchParams;
-  const next = safeRedirectPath(params.next);
-  if (await getSession()) redirect(next);
-
-  return (
-    <main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 p-6">
-      <h1 className="text-2xl font-semibold">Sign in</h1>
-      <AuthForm
-        mode="sign-in"
-        next={next}
-        socialProviders={enabledSocialProviders()}
-        initialError={params.error ? "Sign-in with that provider failed. Please try again." : null}
-      />
-      <p className="text-sm text-[var(--foreground-muted)]">
-        No account?{" "}
-        <Link href={`/sign-up?next=${encodeURIComponent(next)}`} className="font-medium text-[var(--foreground)] underline">
-          Create one
-        </Link>
-      </p>
-    </main>
-  );
-}
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { SignInFlow } from "@/components/auth/sign-in-flow";
+import { enabledSocialProviders } from "@/lib/auth";
+import { authConfig } from "@/lib/auth-config";
+import { getSession, safeRedirectPath } from "@/lib/session";
+import { site } from "@/lib/site";
+import { theme } from "@/lib/theme";
+
+export const metadata = { title: "Sign in" };
+
+const ERRORS: Record<string, string> = {
+  oauth: "Sign-in with that provider didn't finish. Try again.",
+  link: "That sign-in link has expired or was already used. Ask for a new one.",
+};
+
+export default async function SignInPage({ searchParams }: { searchParams: Promise<{ next?: string; error?: string; reset?: string }> }) {
+  const params = await searchParams;
+  const next = safeRedirectPath(params.next);
+  if (await getSession()) redirect(next);
+
+  const copy = theme.signIn(site.name);
+  return (
+    <AuthShell
+      page="sign-in"
+      title={copy.title}
+      subtitle={(copy as { subtitle?: string }).subtitle}
+      footer={
+        <>
+          Don&apos;t have an account?{" "}
+          <Link href={`/sign-up?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
+            Sign up
+          </Link>
+        </>
+      }
+    >
+      <SignInFlow
+        providers={enabledSocialProviders()}
+        socialPlacement={theme.social}
+        socialStyle={theme.socialStyle}
+        methods={{ magicLink: authConfig.magicLink, emailOtp: authConfig.emailOtp, passkeys: authConfig.passkeys }}
+        next={next}
+        initialError={params.error ? (ERRORS[params.error] ?? "Sign-in didn't finish. Try again.") : null}
+        initialNotice={params.reset ? "Your password is changed. Sign in with the new one." : null}
+      />
+    </AuthShell>
+  );
+}