@flaredev/cli 0.4.1 → 0.5.0

package/templates/app/lib/costs.ts

@@ -0,0 +1,138 @@
+/**
+ * What Cloudflare charges, in one place.
+ *
+ * Checked against Cloudflare's pricing pages on 24 September 2026. They change; when
+ * they do, change them here rather than in the page that displays them. The docs cover
+ * the reasoning behind these numbers:
+ * https://flare-docs.codetotech.com/guides/costs/
+ *
+ * Nothing here is a bill. The app can see how much it stores; it cannot see how many
+ * requests it served or how many rows it read — those live in Cloudflare's analytics,
+ * behind an API token this app deliberately doesn't hold. So this is a model, and the
+ * page that shows it says so.
+ */
+
+/** The Workers Paid subscription, which is the whole bill for most apps. */
+export const SUBSCRIPTION_USD = 5;
+
+/** Free plan allowances. Daily where Cloudflare counts them daily. */
+export const FREE = {
+  requestsPerDay: 100_000,
+  /** CPU milliseconds per invocation — the one that bites a server-rendered app. */
+  cpuMsPerRequest: 10,
+  d1RowsReadPerDay: 5_000_000,
+  d1RowsWrittenPerDay: 100_000,
+  d1StorageGb: 5,
+  r2StorageGb: 10,
+  kvReadsPerDay: 100_000,
+  /** A thousand a day, and every cache miss is a write. */
+  kvWritesPerDay: 1_000,
+} as const;
+
+/** Paid plan: what's included each month, then the rate past it. */
+export const PAID = {
+  requests: { included: 10_000_000, perMillionUsd: 0.3 },
+  cpuMs: { included: 30_000_000, perMillionUsd: 0.02 },
+  d1RowsRead: { included: 25_000_000_000, perMillionUsd: 0.001 },
+  d1RowsWritten: { included: 50_000_000, perMillionUsd: 1 },
+  d1StorageGb: { included: 5, perGbMonthUsd: 0.75 },
+  r2StorageGb: { included: 10, perGbMonthUsd: 0.015 },
+  kvReads: { included: 10_000_000, perMillionUsd: 0.5 },
+  kvWrites: { included: 1_000_000, perMillionUsd: 5 },
+} as const;
+
+/**
+ * What one page view costs, measured on the example shop.
+ *
+ * A dashboard page runs the stats query, the chart, the table's page and its capped
+ * count, plus one lookup per relation shown — four to six queries, reading around a
+ * hundred rows between them once the indexes are doing their job. A page on the public
+ * side is lighter. These are the assumptions the estimate below rests on, and they are
+ * written down so you can argue with them.
+ */
+export const PER_VIEW = {
+  d1RowsRead: 100,
+  d1RowsWritten: 0.2,
+  kvReads: 4,
+  /** Cache misses are rarer than hits; most views read a warm entry. */
+  kvWrites: 0.3,
+  cpuMs: 25,
+} as const;
+
+export interface Estimate {
+  monthlyViews: number;
+  requests: number;
+  d1RowsRead: number;
+  d1RowsWritten: number;
+  kvReads: number;
+  kvWrites: number;
+  cpuMs: number;
+  /** Dollars on top of the subscription. */
+  overageUsd: number;
+  totalUsd: number;
+  /** Which free-plan allowance this traffic would break first, if any. */
+  freePlanVerdict: string;
+}
+
+const over = (used: number, included: number, perMillionUsd: number) =>
+  used <= included ? 0 : ((used - included) / 1_000_000) * perMillionUsd;
+
+/** What a month at this traffic would cost, and whether the free plan could carry it. */
+export function estimate(monthlyViews: number, storedGb: { d1: number; r2: number }): Estimate {
+  const requests = monthlyViews;
+  const d1RowsRead = monthlyViews * PER_VIEW.d1RowsRead;
+  const d1RowsWritten = monthlyViews * PER_VIEW.d1RowsWritten;
+  const kvReads = monthlyViews * PER_VIEW.kvReads;
+  const kvWrites = monthlyViews * PER_VIEW.kvWrites;
+  const cpuMs = monthlyViews * PER_VIEW.cpuMs;
+
+  const overageUsd =
+    over(requests, PAID.requests.included, PAID.requests.perMillionUsd) +
+    over(cpuMs, PAID.cpuMs.included, PAID.cpuMs.perMillionUsd) +
+    over(d1RowsRead, PAID.d1RowsRead.included, PAID.d1RowsRead.perMillionUsd) +
+    over(d1RowsWritten, PAID.d1RowsWritten.included, PAID.d1RowsWritten.perMillionUsd) +
+    over(kvReads, PAID.kvReads.included, PAID.kvReads.perMillionUsd) +
+    over(kvWrites, PAID.kvWrites.included, PAID.kvWrites.perMillionUsd) +
+    Math.max(0, storedGb.d1 - PAID.d1StorageGb.included) * PAID.d1StorageGb.perGbMonthUsd +
+    Math.max(0, storedGb.r2 - PAID.r2StorageGb.included) * PAID.r2StorageGb.perGbMonthUsd;
+
+  const daily = monthlyViews / 30;
+  const broken: string[] = [];
+  if (daily > FREE.requestsPerDay) broken.push("requests");
+  if (daily * PER_VIEW.d1RowsRead > FREE.d1RowsReadPerDay) broken.push("D1 rows read");
+  if (daily * PER_VIEW.kvWrites > FREE.kvWritesPerDay) broken.push("KV writes");
+  if (storedGb.r2 > FREE.r2StorageGb) broken.push("R2 storage");
+  if (storedGb.d1 > FREE.d1StorageGb) broken.push("D1 storage");
+
+  return {
+    monthlyViews,
+    requests,
+    d1RowsRead,
+    d1RowsWritten,
+    kvReads,
+    kvWrites,
+    cpuMs,
+    overageUsd,
+    totalUsd: SUBSCRIPTION_USD + overageUsd,
+    freePlanVerdict: broken.length === 0
+      ? "Within the free allowances — but see the CPU note below."
+      : `Past the free plan on ${broken.join(", ")}.`,
+  };
+}
+
+/** "1.2M", "34k", "912" — counts that have to fit on a card. */
+export function compact(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}k`;
+  return Math.round(value).toLocaleString();
+}
+
+/** "$5.00", "$12.34". */
+export const usd = (value: number) => `$${value.toFixed(2)}`;
+
+/** "2.4 GB", "812 MB". */
+export function gb(value: number): string {
+  if (value >= 1) return `${value.toFixed(value >= 10 ? 0 : 2)} GB`;
+  const mb = value * 1024;
+  return mb >= 1 ? `${mb.toFixed(mb >= 10 ? 0 : 1)} MB` : `${Math.round(mb * 1024)} KB`;
+}

package/templates/app/lib/dashboard-nav.ts

@@ -12,4 +12,8 @@ export const generatedDashboardLinks: DashboardLink[] = [];
 // generated:end
 
 /** Links shown under "Platform" in the dashboard sidebar. */
-export const dashboardLinks: DashboardLink[] = [...generatedDashboardLinks, { label: "API reference", href: "/api/reference", icon: "book" }];
+export const dashboardLinks: DashboardLink[] = [
+  { label: "Costs", href: "/dashboard/costs", icon: "wallet" },
+  ...generatedDashboardLinks,
+  { label: "API reference", href: "/api/reference", icon: "book" },
+];

package/templates/app/lib/dashboard.ts

@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
 import { allowedActions, can, type Policy, type PolicyAction, type Resource } from "@flaredev/core";
-import { and, count, gte, lt } from "drizzle-orm";
+import { count, sql } from "drizzle-orm";
 import type { SQLiteTable } from "drizzle-orm/sqlite-core";
 import { createResourceStore, type ResourceStore } from "@flaredev/core/server";
 import { getDb } from "@/db";
@@ -73,74 +73,79 @@ export function dashboardStore(name: string): ResourceStore {
 }
 
 /**
- * How many records a resource has. Cached in the data cache under the resource's tag,
- * so the dashboard does not count every table on every visit, and a write through the
- * admin or the API drops the count on its way out.
+ * Every number the stats above a resource's table need, in one query.
+ *
+ * The total, how many arrived in the last week and the week before, and how many hold
+ * each value of a status field — all of it from a single grouped scan, summed up here.
+ * It was four queries and three cache entries; on the free plan the cache entries were
+ * the expensive half, because Workers KV allows a thousand writes a day and every write
+ * to a record drops the entries tagged for it.
+ *
+ * Cached under the resource's tag, so a write through the admin or the API drops it on
+ * the way out and the next view recomputes it.
  */
-export function recordCount(name: string): Promise<number> {
-  const counted = cached(
-    async (resourceName: string) => {
-      // Counted straight off the table, not through the store: a list stops counting at
-      // 10,000 so that paging stays quick, and a stat wants the real number.
-      const entry = (resourceTables as unknown as Record<string, { table: SQLiteTable } | undefined>)[resourceName];
-      if (!entry) return 0;
-      const [row] = await getDb().select({ total: count() }).from(entry.table);
-      return row?.total ?? 0;
-    },
-    ["flare", "record-count"],
-    { tags: [resourceTag(name)], revalidate: TTL.short },
-  );
-  return counted(name);
+export interface ResourceStats {
+  total: number;
+  /** Created in the last `days` days, and in the `days` before that. */
+  current: number;
+  previous: number;
+  /** Rows per value of the grouped field, when one was asked for. */
+  values: Record<string, number>;
 }
 
-/**
- * How many records hold each value of a field, in one grouped query rather than one
- * count per option. Used by the stats above a resource's table.
- */
-export function valueCounts(name: string, field: string): Promise<Record<string, number>> {
-  const counted = cached(
-    async (resourceName: string, key: string) => {
+export function resourceStats(name: string, field?: string, days = 7): Promise<ResourceStats> {
+  const read = cached(
+    async (resourceName: string, key: string | undefined, windowDays: number): Promise<ResourceStats> => {
       const entry = (resourceTables as unknown as Record<string, { table: SQLiteTable } | undefined>)[resourceName];
-      const column = entry ? (entry.table as unknown as Record<string, unknown>)[key] : undefined;
-      if (!entry || !column) return {};
-      const rows = (await getDb()
-        .select({ value: column as never, total: count() })
-        .from(entry.table)
-        .groupBy(column as never)) as { value: unknown; total: number }[];
-      return Object.fromEntries(rows.map((row) => [String(row.value ?? ""), row.total]));
-    },
-    ["flare", "value-counts"],
-    { tags: [resourceTag(name)], revalidate: TTL.short },
-  );
-  return counted(name, field);
-}
+      if (!entry) return { total: 0, current: 0, previous: 0, values: {} };
 
-/**
- * How many records a resource gained in the last `days` days, and in the `days` before
- * that, so a stat can show which way it's going. Cached like the totals.
- */
-export function recentCounts(name: string, days = 7): Promise<{ current: number; previous: number }> {
-  const counts = cached(
-    async (resourceName: string, windowDays: number) => {
-      const entry = (resourceTables as unknown as Record<string, { table: SQLiteTable } | undefined>)[resourceName];
-      const createdAt = entry ? (entry.table as unknown as Record<string, unknown>).createdAt : undefined;
-      // A resource whose table has no createdAt (a custom one) simply has no trend.
-      if (!entry || !createdAt) return { current: 0, previous: 0 };
+      const columns = entry.table as unknown as Record<string, unknown>;
+      const createdAt = columns.createdAt;
+      const grouped = key ? columns[key] : undefined;
+      // Milliseconds, not Dates: these go into a raw `sql` fragment, which doesn't pass
+      // through the column's mapper, and D1 refuses to bind an object.
       const window = windowDays * 86_400_000;
-      const since = new Date(Date.now() - window);
-      const before = new Date(Date.now() - window * 2);
-      const column = createdAt as never;
-      const [current] = await getDb().select({ total: count() }).from(entry.table).where(gte(column, since));
-      const [previous] = await getDb()
-        .select({ total: count() })
-        .from(entry.table)
-        .where(and(gte(column, before), lt(column, since)));
-      return { current: current?.total ?? 0, previous: previous?.total ?? 0 };
+      const since = Date.now() - window;
+      const before = Date.now() - window * 2;
+
+      // A resource whose table has no createdAt (a custom one) simply has no trend.
+      const windows = createdAt
+        ? {
+            current: sql<number>`sum(case when ${createdAt as never} >= ${since} then 1 else 0 end)`,
+            previous: sql<number>`sum(case when ${createdAt as never} >= ${before} and ${createdAt as never} < ${since} then 1 else 0 end)`,
+          }
+        : { current: sql<number>`0`, previous: sql<number>`0` };
+
+      const select: Record<string, unknown> = { total: count(), ...windows };
+      if (grouped) select.value = grouped;
+      const query = getDb()
+        .select(select as never)
+        .from(entry.table);
+      const rows = (await (grouped ? query.groupBy(grouped as never) : query)) as {
+        total: number;
+        current: number;
+        previous: number;
+        value?: unknown;
+      }[];
+
+      const stats: ResourceStats = { total: 0, current: 0, previous: 0, values: {} };
+      for (const row of rows) {
+        stats.total += Number(row.total ?? 0);
+        stats.current += Number(row.current ?? 0);
+        stats.previous += Number(row.previous ?? 0);
+        if (grouped) stats.values[String(row.value ?? "")] = Number(row.total ?? 0);
+      }
+      return stats;
     },
-    ["flare", "recent-count"],
-    { tags: [resourceTag(name)], revalidate: TTL.short },
+    ["flare", "resource-stats"],
+    { tags: [resourceTag(name)], revalidate: TTL.medium },
   );
-  return counts(name, days);
+  return read(name, field, days);
+}
+
+/** How many records a resource has. One field of {@link resourceStats}. */
+export async function recordCount(name: string): Promise<number> {
+  return (await resourceStats(name)).total;
 }
 
 /** Percentage change between two periods, or undefined when there's nothing to compare. */

package/templates/app/lib/number.ts

@@ -0,0 +1,33 @@
+/**
+ * Numbers as people read and type them.
+ *
+ * A price typed as 2000 is easier to check at a glance as 2,000, but the form and the
+ * API only ever see the plain number — the grouping is put on for display and taken off
+ * again on every keystroke, so nothing downstream has to unpick a comma.
+ *
+ * Kept free of server imports: the field widgets that use it run in the browser.
+ */
+
+/** "2000.5" → "2,000.5". A half-typed "1," or "12." is left alone so typing isn't fought. */
+export function groupDigits(value: string): string {
+  if (!value) return "";
+  const negative = value.startsWith("-");
+  const body = negative ? value.slice(1) : value;
+  const [whole = "", ...rest] = body.split(".");
+  const grouped = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  // Keep a trailing "." while someone is still typing the decimals.
+  const decimals = rest.length > 0 ? `.${rest.join("")}` : "";
+  return `${negative ? "-" : ""}${grouped}${decimals}`;
+}
+
+/**
+ * "2,000.50" → "2000.50". Everything that isn't a digit goes, along with any minus sign
+ * that isn't leading and any second decimal point.
+ */
+export function ungroup(value: string, allowDecimal: boolean): string {
+  const negative = value.trimStart().startsWith("-");
+  const digits = value.replace(/[^\d.]/g, "");
+  const [whole = "", ...rest] = digits.split(".");
+  const body = allowDecimal && rest.length > 0 ? `${whole}.${rest.join("")}` : whole;
+  return `${negative && body ? "-" : ""}${body}`;
+}

package/templates/app/lib/site.ts

@@ -1,56 +1,56 @@
-import type { ThemeName } from "./theme";
-
-/**
- * What the site says about itself: the home page, the sign-in screens' side panels and
- * the page titles read from here. Edit freely.
- */
-export const site = {
-  name: "__APP_NAME__",
-  tagline: "The fastest way to run your business",
-  description: "__APP_NAME__ keeps your team, your customers and your data in one place, and it's live on the edge in every region.",
-  /**
-   * The look of the whole app: sign-in screens, dashboard, admin and home page.
-   * One of: default, coral, amber, sky, mono, emerald. FLARE_THEME (shell or .env)
-   * overrides it when the app is built or run with `flare dev`.
-   */
-  theme: "__THEME__" as ThemeName,
-  /** How the dashboard behaves. */
-  dashboard: {
-    /**
-     * Where a record is created and edited: in a dialog over the list ("modal", the
-     * default, which keeps the list, its filters and your place in it), or on its own
-     * page ("page", better for long forms).
-     */
-    forms: "modal" as "modal" | "page",
-  },
-  /** The small pill above the home page headline; set to null to hide it. */
-  announcement: { label: "New", text: "Passkeys and two-factor sign-in are here", href: "/sign-up" } as { label: string; text: string; href: string } | null,
-  /** The home page's feature grid (icon names from lucide.dev). */
-  features: [
-    { icon: "zap", title: "Fast everywhere", description: "Served from the edge in every region, so pages load in milliseconds wherever your customers are." },
-    { icon: "shield-check", title: "Secure by default", description: "Passkeys, two-factor sign-in, roles and rate limits, switched on from day one." },
-    { icon: "layout-dashboard", title: "One place for your data", description: "Every record your team keeps, with search, filters and an admin built in." },
-    { icon: "users", title: "Built for teams", description: "Invite your team, give each person the right access, and see who changed what." },
-    { icon: "plug", title: "Connects to your tools", description: "A documented API for every record, ready for your scripts and integrations." },
-    { icon: "credit-card", title: "Billing when you need it", description: "Plans, checkout and invoices through Stripe, without building a billing system." },
-  ],
-  /** Placeholder names for the logo strip: replace them with your customers (or remove the strip). */
-  customers: ["Acme", "Globex", "Initech", "Vandelay", "Northwind", "Brightline"],
-  /** Shown beside the sign-up form. */
-  highlights: [
-    "Set up in minutes, with nothing to install",
-    "Secure sign-in with passkeys and two-factor",
-    "Your data stays yours: export it any time",
-  ],
-  /** Shown on the sign-in screen of themes with a quote panel. */
-  testimonial: {
-    quote: "We moved our whole workflow over in an afternoon. The team hasn't looked back.",
-    author: "Alex Rivera",
-    role: "Head of Operations",
-  },
-  links: {
-    terms: "/terms",
-    privacy: "/privacy",
-    support: "mailto:support@example.com",
-  },
-};
+import type { ThemeName } from "./theme";
+
+/**
+ * What the site says about itself: the home page, the sign-in screens' side panels and
+ * the page titles read from here. Edit freely.
+ */
+export const site = {
+  name: "__APP_NAME__",
+  tagline: "The fastest way to run your business",
+  description: "__APP_NAME__ keeps your team, your customers and your data in one place, and it's live on the edge in every region.",
+  /**
+   * The look of the whole app: sign-in screens, dashboard, admin and home page.
+   * One of: default, coral, amber, sky, mono, emerald. FLARE_THEME (shell or .env)
+   * overrides it when the app is built or run with `flare dev`.
+   */
+  theme: "__THEME__" as ThemeName,
+  /** How the dashboard behaves. */
+  dashboard: {
+    /**
+     * Where a record is created and edited: in a dialog over the list ("modal", the
+     * default, which keeps the list, its filters and your place in it), or on its own
+     * page ("page", better for long forms).
+     */
+    forms: "sheet" as "sheet" | "page",
+  },
+  /** The small pill above the home page headline; set to null to hide it. */
+  announcement: { label: "New", text: "Passkeys and two-factor sign-in are here", href: "/sign-up" } as { label: string; text: string; href: string } | null,
+  /** The home page's feature grid (icon names from lucide.dev). */
+  features: [
+    { icon: "zap", title: "Fast everywhere", description: "Served from the edge in every region, so pages load in milliseconds wherever your customers are." },
+    { icon: "shield-check", title: "Secure by default", description: "Passkeys, two-factor sign-in, roles and rate limits, switched on from day one." },
+    { icon: "layout-dashboard", title: "One place for your data", description: "Every record your team keeps, with search, filters and an admin built in." },
+    { icon: "users", title: "Built for teams", description: "Invite your team, give each person the right access, and see who changed what." },
+    { icon: "plug", title: "Connects to your tools", description: "A documented API for every record, ready for your scripts and integrations." },
+    { icon: "credit-card", title: "Billing when you need it", description: "Plans, checkout and invoices through Stripe, without building a billing system." },
+  ],
+  /** Placeholder names for the logo strip: replace them with your customers (or remove the strip). */
+  customers: ["Acme", "Globex", "Initech", "Vandelay", "Northwind", "Brightline"],
+  /** Shown beside the sign-up form. */
+  highlights: [
+    "Set up in minutes, with nothing to install",
+    "Secure sign-in with passkeys and two-factor",
+    "Your data stays yours: export it any time",
+  ],
+  /** Shown on the sign-in screen of themes with a quote panel. */
+  testimonial: {
+    quote: "We moved our whole workflow over in an afternoon. The team hasn't looked back.",
+    author: "Alex Rivera",
+    role: "Head of Operations",
+  },
+  links: {
+    terms: "/terms",
+    privacy: "/privacy",
+    support: "mailto:support@example.com",
+  },
+};

package/templates/app/lib/suggest.ts

@@ -0,0 +1,35 @@
+import { slugify, type StoredField } from "@flaredev/core";
+
+/**
+ * Values a form can make up for itself.
+ *
+ * A unique code — a SKU, a slug, a reference — is the shop's business, not something
+ * worth typing by hand, but it isn't something to impose either: these are offered
+ * behind a button, and whatever comes out can be typed over.
+ *
+ * Only unique, unformatted strings get one. An email or a URL is unique too, and
+ * inventing one would be nonsense.
+ */
+export function canSuggest(field: StoredField): boolean {
+  return field.kind === "string" && field.unique === true && (field.format === undefined || field.format === "slug");
+}
+
+/** Four digits, so two products added in the same minute don't collide. */
+const tail = () => String(Math.floor(Math.random() * 10_000)).padStart(4, "0");
+
+/**
+ * A code for `key`, derived from what's been typed so far.
+ *
+ * "Brushed steel desk lamp" gives the slug `brushed-steel-desk-lamp` and the SKU
+ * `BRU-4821` — recognisable at a glance in a list, which is the whole point of a code
+ * someone reads out over a counter.
+ */
+export function suggestValue(key: string, field: StoredField, title: string): string {
+  const source = title.trim();
+  const format = field.kind === "string" ? field.format : undefined;
+  if (format === "slug" || /slug/i.test(key)) {
+    return source ? slugify(source) : `item-${tail()}`;
+  }
+  const letters = source.replace(/[^A-Za-z0-9]/g, "").slice(0, 3).toUpperCase();
+  return `${letters || "REF"}-${tail()}`;
+}

package/templates/app/lib/usage.ts

@@ -0,0 +1,32 @@
+import { cached, TTL } from "@/lib/cache";
+import { storage } from "@/lib/storage";
+
+/**
+ * How much this app has put in R2.
+ *
+ * Listing a bucket is a Class A operation — the expensive kind — so it is cached for an
+ * hour. A bucket with more objects than one listing returns is reported as far as the
+ * cap and no further, because walking a million keys to draw one number would cost more
+ * than the number is worth.
+ */
+const MAX_KEYS = 1_000;
+
+export const storedBytes = cached(
+  async (): Promise<{ files: number; bytes: number; capped: boolean }> => {
+    try {
+      if (!storage.bucket.list) return { files: 0, bytes: 0, capped: false };
+      const listed = await storage.bucket.list({ limit: MAX_KEYS });
+      const objects = listed.objects ?? [];
+      return {
+        files: objects.length,
+        bytes: objects.reduce((sum, object) => sum + (object.size ?? 0), 0),
+        capped: Boolean(listed.truncated),
+      };
+    } catch {
+      // No bucket bound, or no permission to list it: report nothing rather than fail.
+      return { files: 0, bytes: 0, capped: false };
+    }
+  },
+  ["flare", "stored-bytes"],
+  { revalidate: TTL.long },
+);

package/templates/next/.env.example

@@ -0,0 +1,21 @@
+# Postgres, from your Neon project (Dashboard → Connection string).
+DATABASE_URL=
+
+# Sessions and signed upload URLs. Generate with: openssl rand -base64 32
+BETTER_AUTH_SECRET=
+BETTER_AUTH_URL=http://localhost:3000
+
+# File uploads, on an R2 bucket (Cloudflare → R2 → Manage API tokens).
+# R2 serves what it stores for free, which is why it's here rather than Blob storage.
+R2_ENDPOINT=https://<account-id>.r2.cloudflarestorage.com
+R2_BUCKET=
+R2_ACCESS_KEY_ID=
+R2_SECRET_ACCESS_KEY=
+
+# Optional. Rate limits and anything that has to be true across every instance.
+UPSTASH_REDIS_REST_URL=
+UPSTASH_REDIS_REST_TOKEN=
+
+# Optional. Without these, email is printed to the console instead of sent.
+RESEND_API_KEY=
+MAIL_FROM=

package/templates/next/README.md

@@ -0,0 +1,16 @@
+# __APP_NAME__
+
+A [Flare](https://flare-docs.codetotech.com) app on Next.js, Postgres and Prisma.
+
+```bash
+cp .env.example .env       # DATABASE_URL and BETTER_AUTH_SECRET, at least
+__PM__ run db:migrate      # prisma migrate dev: write and apply a migration
+__PM__ run dev             # start the dev server on http://localhost:3000
+__PM__ run build           # production build
+__PM__ run deploy          # deploy to Vercel
+```
+
+After `flare gen resource`, run `__PM__ run db:migrate` to turn the new models
+in `prisma/schema/resources.prisma` into a migration.
+
+Docs: https://flare-docs.codetotech.com

package/templates/next/app/api/health/route.ts

@@ -0,0 +1,7 @@
+import { prisma } from "@/lib/db";
+
+/** Is the app up, and can it reach the database? */
+export async function GET() {
+  const rows = (await prisma.$queryRaw`select 1 as ok`) as { ok: number }[];
+  return Response.json({ ok: true, database: rows[0]?.ok === 1 });
+}

package/templates/next/app/dashboard/account/password/page.tsx

@@ -0,0 +1,19 @@
+import { Password } from "@/components/account/sections";
+import { prisma } from "@/lib/db";
+import { requireSession } from "@/lib/session";
+
+export const metadata = { title: "Password" };
+
+/** Whether this person signs in with a password at all: social and passkey accounts have none. */
+async function hasPassword(userId: string) {
+  const credential = await prisma.account.findFirst({
+    where: { userId, providerId: "credential" },
+    select: { id: true },
+  });
+  return Boolean(credential);
+}
+
+export default async function PasswordPage() {
+  const { user } = await requireSession("/dashboard/account/password");
+  return <Password hasPassword={await hasPassword(user.id)} email={user.email} />;
+}

package/templates/next/app/dashboard/account/security/page.tsx

@@ -0,0 +1,31 @@
+import { ConnectedAccounts, Passkeys, TwoFactor } from "@/components/account/sections";
+import { prisma } from "@/lib/db";
+import { enabledSocialProviders } from "@/lib/auth";
+import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { requireSession } from "@/lib/session";
+
+export const metadata = { title: "Security" };
+
+/** Two-factor, passkeys and the accounts you can sign in with. */
+export default async function SecurityPage() {
+  const { user } = await requireSession("/dashboard/account/security");
+  const credential = await prisma.account.findFirst({
+    where: { userId: user.id, providerId: "credential" },
+    select: { id: true },
+  });
+  const providers = enabledSocialProviders();
+
+  return (
+    <>
+      {twoFactorAvailable && (
+        <TwoFactor
+          enabled={Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled)}
+          hasPassword={Boolean(credential)}
+          methods={authConfig.twoFactor}
+        />
+      )}
+      {authConfig.passkeys && <Passkeys />}
+      {providers.length > 0 && <ConnectedAccounts providers={providers} />}
+    </>
+  );
+}