@flaredev/cli 0.4.0 → 0.5.0

package/templates/app/components/dashboard/resource-stats.tsx

@@ -1,5 +1,5 @@
 import { storedFields, optionLabel, type Resource } from "@flaredev/core";
-import { recentCounts, recordCount, trend, valueCounts } from "@/lib/dashboard";
+import { resourceStats, trend } from "@/lib/dashboard";
 import { resourceIcon } from "./resource-icon";
 import { StatCards, type Stat } from "./stat-card";
 
@@ -11,7 +11,10 @@ import { StatCards, type Stat } from "./stat-card";
  * in practice is the status of the thing — a deal's stage, an invoice's state.
  */
 export async function ResourceStats({ resource }: { resource: Resource }) {
-  const [total, recent] = await Promise.all([recordCount(resource.name), recentCounts(resource.name)]);
+  // The status split is asked for up front so the totals, the trend and the split all
+  // come from the one grouped query rather than three.
+  const statusField = storedFields(resource).find(([, def]) => def.kind === "enum" && def.filterable !== false);
+  const { total, current, previous, values } = await resourceStats(resource.name, statusField?.[0]);
 
   const stats: Stat[] = [
     {
@@ -21,20 +24,18 @@ export async function ResourceStats({ resource }: { resource: Resource }) {
     },
     {
       label: "New this week",
-      value: recent.current,
-      change: trend(recent.current, recent.previous),
-      hint: `${recent.previous.toLocaleString()} the week before`,
+      value: current,
+      change: trend(current, previous),
+      hint: `${previous.toLocaleString()} the week before`,
     },
   ];
 
-  const statusField = storedFields(resource).find(([, def]) => def.kind === "enum" && def.filterable !== false);
   if (statusField && total > 0) {
-    const [key, def] = statusField;
+    const [, def] = statusField;
     if (def.kind === "enum") {
-      const counts = await valueCounts(resource.name, key);
       // Two options at most: a strip of eight cards is a wall, not a summary.
       for (const option of def.options.slice(0, 2)) {
-        const value = counts[option] ?? 0;
+        const value = values[option] ?? 0;
         stats.push({
           label: optionLabel(def, option),
           value,

package/templates/app/components/dashboard/resource-table-toolbar.tsx

@@ -3,7 +3,7 @@
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState, type FormEvent } from "react";
 import { SearchIcon, XIcon } from "lucide-react";
-import { optionLabel, storedFields, type Resource } from "@flaredev/core";
+import { optionLabel, storedFields, type ClientResource } from "@flaredev/core";
 import { Button } from "@/components/ui/button";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -12,7 +12,7 @@ import { hrefWith } from "./query";
 const ALL = "__all__";
 
 /** Search box and enum/boolean filters for ResourceTable; all state goes into the URL. */
-export function ResourceTableToolbar({ resource }: { resource: Resource }) {
+export function ResourceTableToolbar({ resource }: { resource: ClientResource }) {
   const router = useRouter();
   const pathname = usePathname();
   const params = new URLSearchParams(useSearchParams().toString());

package/templates/app/components/dashboard/resource-table.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
-import { formatValue, optionLabel, statusTone, storedFields, type Resource, type StoredField } from "@flaredev/core";
+import { clientResource, formatValue, optionLabel, statusTone, storedFields, type Resource, type StoredField } from "@flaredev/core";
 import { isSortable } from "@flaredev/core/server";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -26,7 +26,7 @@ import type { RelationMeta } from "./fields/field-widget";
 import { ImportDialog } from "./import-dialog";
 import { LocalTime } from "./local-time";
 import { hrefWith, toSearchParams, type SearchParams } from "./query";
-import { NewRecordButton } from "./resource-form-dialog";
+import { NewRecordButton } from "./resource-form-sheet";
 import { ResourceTableToolbar } from "./resource-table-toolbar";
 import { SaveViewButton } from "./save-view-button";
 import { RowActions } from "./row-actions";
@@ -44,6 +44,9 @@ const NUMERIC = new Set(["int", "float"]);
  */
 export async function ResourceTable({ resource, searchParams }: { resource: Resource; searchParams: SearchParams }) {
   await requireAccess(resource, "read");
+  // Hooks and computed values are functions, and a function can't be sent to the browser.
+  // This is the same resource without them, for the client components below.
+  const forClient = clientResource(resource);
   const basePath = resourcePath(resource);
   const permissions = await adminPermissions(resource.name);
   const params = toSearchParams(searchParams);
@@ -87,7 +90,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
     relations[key] = { name: target.name, label: target.label, pluralLabel: target.pluralLabel, slug: target.slug, titleField: target.titleField };
   }
 
-  const modalForms = site.dashboard.forms === "modal";
+  const overlayForms = site.dashboard.forms === "sheet";
   const rowIds = rows.map((row) => String(row.id));
   const exportColumns = [{ key: "id", label: "Id" }, ...fields.filter(([, def]) => def.kind !== "file").map(([key, def]) => ({ key, label: def.label }))];
 
@@ -102,15 +105,15 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
     <TableSelection ids={rowIds}>
       <div className="flex flex-col gap-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <ResourceTableToolbar resource={resource} />
+        <ResourceTableToolbar resource={forClient} />
         <div className="flex flex-wrap items-center gap-2">
           <SaveViewButton resourceName={resource.name} label={resource.pluralLabel} />
           <ColumnMenu columns={allColumns.map(({ key, label }) => ({ key, label }))} visible={columns.map((column) => column.key)} />
           <ExportButton resourceName={resource.name} pluralLabel={resource.pluralLabel} />
-          {permissions.create && <ImportDialog resource={resource} />}
+          {permissions.create && <ImportDialog resource={forClient} />}
           {permissions.create &&
-            (modalForms ? (
-              <NewRecordButton resource={resource} relations={relations} listHref={basePath} />
+            (overlayForms ? (
+              <NewRecordButton resource={forClient} relations={relations} listHref={basePath} />
             ) : (
               <Button asChild>
                 <Link href={resourcePath(resource, "new")}>
@@ -281,9 +284,9 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                     })}
                     <TableCell className="text-right">
                       <RowActions
-                        resource={resource}
+                        resource={forClient}
                         id={id}
-                        record={modalForms ? row : undefined}
+                        record={overlayForms ? row : undefined}
                         relations={relations}
                         listHref={basePath}
                         editHref={resourcePath(resource, id, "edit")}

package/templates/app/components/dashboard/row-actions.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { ExternalLinkIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
-import type { Resource } from "@flaredev/core";
+import type { ClientResource } from "@flaredev/core";
 import { deleteRecordAction } from "@/app/dashboard/actions";
 import {
   AlertDialog,
@@ -26,11 +26,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
-import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 
 /**
  * Edit and delete for one row. Edit opens a dialog when the row's record came with it
- * (site.dashboard.forms is "modal"), and otherwise goes to the form page.
+ * (site.dashboard.forms is "sheet"), and otherwise goes to the form page.
  */
 export function RowActions({
   resource,
@@ -43,7 +43,7 @@ export function RowActions({
   canUpdate = true,
   canDelete = true,
 }: {
-  resource: Resource;
+  resource: ClientResource;
   id: string;
   /** The record itself, when the form opens in a dialog. */
   record?: Record<string, unknown>;
@@ -124,7 +124,7 @@ export function RowActions({
       </DropdownMenu>
 
       {record && canUpdate && (
-        <ResourceFormDialog
+        <ResourceFormSheet
           resource={resource}
           relations={relations}
           listHref={listHref}

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",
+  },
+};