@flaredev/cli 0.1.2 → 0.3.0

package/templates/app/components/{admin → dashboard}/row-actions.tsx

@@ -1,111 +1,144 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useTransition } from "react";
-import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
-import { toast } from "sonner";
-import { deleteRecordAction } from "@/app/admin/actions";
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/spinner";
-
-export function RowActions({
-  resourceName,
-  label,
-  id,
-  editHref,
-  canUpdate = true,
-  canDelete = true,
-}: {
-  resourceName: string;
-  label: string;
-  id: string;
-  editHref: string;
-  canUpdate?: boolean;
-  canDelete?: boolean;
-}) {
-  const router = useRouter();
-  const [confirming, setConfirming] = useState(false);
-  const [pending, startTransition] = useTransition();
-
-  function onDelete() {
-    startTransition(async () => {
-      const result = await deleteRecordAction(resourceName, id);
-      if (result.ok) {
-        toast.success(`${label} deleted.`);
-        setConfirming(false);
-        router.refresh();
-      } else {
-        toast.error(result.error);
-      }
-    });
-  }
-
-  if (!canUpdate && !canDelete) return null;
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" aria-label="Row actions">
-            <MoreHorizontalIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {canUpdate && (
-            <DropdownMenuGroup>
-              <DropdownMenuItem asChild>
-                <Link href={editHref}>
-                  <PencilIcon />
-                  Edit
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-          {canUpdate && canDelete && <DropdownMenuSeparator />}
-          {canDelete && (
-            <DropdownMenuGroup>
-              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
-                <Trash2Icon />
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <AlertDialog open={confirming} onOpenChange={setConfirming}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
-            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
-            <Button variant="destructive" onClick={onDelete} disabled={pending}>
-              {pending && <Spinner data-icon="inline-start" />}
-              Delete
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { toast } from "sonner";
+import type { Resource } from "@flaredev/core";
+import { deleteRecordAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+
+/**
+ * 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.
+ */
+export function RowActions({
+  resource,
+  id,
+  record,
+  relations = {},
+  listHref,
+  editHref,
+  canUpdate = true,
+  canDelete = true,
+}: {
+  resource: Resource;
+  id: string;
+  /** The record itself, when the form opens in a dialog. */
+  record?: Record<string, unknown>;
+  relations?: FormRelations;
+  listHref: string;
+  editHref: string;
+  canUpdate?: boolean;
+  canDelete?: boolean;
+}) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const { name: resourceName, label } = resource;
+
+  function onDelete() {
+    startTransition(async () => {
+      const result = await deleteRecordAction(resourceName, id);
+      if (result.ok) {
+        toast.success(`${label} deleted.`);
+        setConfirming(false);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  if (!canUpdate && !canDelete) return null;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" aria-label="Row actions">
+            <MoreHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {canUpdate && (
+            <DropdownMenuGroup>
+              {record ? (
+                <DropdownMenuItem onSelect={() => setEditing(true)}>
+                  <PencilIcon />
+                  Edit
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem asChild>
+                  <Link href={editHref}>
+                    <PencilIcon />
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuGroup>
+          )}
+          {canUpdate && canDelete && <DropdownMenuSeparator />}
+          {canDelete && (
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
+                <Trash2Icon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {record && canUpdate && (
+        <ResourceFormDialog
+          resource={resource}
+          relations={relations}
+          listHref={listHref}
+          mode="edit"
+          id={id}
+          record={record}
+          open={editing}
+          onOpenChange={setEditing}
+        />
+      )}
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={onDelete} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/templates/app/components/dashboard/stat-card.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { ArrowRightIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+export interface Stat {
+  label: string;
+  value: number | string;
+  /** Under the number: "12 this week", "3 need attention". */
+  hint?: string;
+  /** Change against the previous period, as a percentage. Up isn't always good — see `goodDirection`. */
+  change?: number;
+  goodDirection?: "up" | "down";
+  icon?: React.ComponentType<{ className?: string }>;
+  href?: string;
+}
+
+const format = (value: number | string) => (typeof value === "number" ? value.toLocaleString() : value);
+
+/** One number, what it means, and where to go for the detail behind it. */
+export function StatCard({ label, value, hint, change, goodDirection = "up", icon: Icon, href }: Stat) {
+  const rising = (change ?? 0) >= 0;
+  const good = rising === (goodDirection === "up");
+  const Trend = rising ? TrendingUpIcon : TrendingDownIcon;
+
+  const card = (
+    <Card className={cn("h-full gap-3", href && "transition-colors hover:border-primary/40")}>
+      <CardHeader className="pb-0">
+        <CardDescription className="flex items-center gap-2">
+          {Icon && <Icon className="size-4" />}
+          {label}
+        </CardDescription>
+        <CardTitle className="text-3xl font-semibold tabular-nums">{format(value)}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {change !== undefined && (
+            <span className={cn("inline-flex items-center gap-1 font-medium", good ? "text-success" : "text-danger")}>
+              <Trend className="size-3.5" />
+              {Math.abs(change).toFixed(change % 1 === 0 ? 0 : 1)}%
+            </span>
+          )}
+          {hint && <span>{hint}</span>}
+        </div>
+        {href && <ArrowRightIcon className="size-4 text-muted-foreground" aria-hidden="true" />}
+      </CardContent>
+    </Card>
+  );
+
+  return href ? (
+    <Link href={href} className="rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      {card}
+    </Link>
+  ) : (
+    card
+  );
+}
+
+/** A row of stats that wraps: four across on a desktop, two on a tablet, one on a phone. */
+export function StatCards({ stats }: { stats: Stat[] }) {
+  if (stats.length === 0) return null;
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+      {stats.map((stat) => (
+        <StatCard key={stat.label} {...stat} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,185 @@
+"use client";
+
+import { createContext, useCallback, useContext, useMemo, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { DownloadIcon, Trash2Icon, XIcon } from "lucide-react";
+import { toast } from "sonner";
+import { deleteManyAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
+import { toCsv } from "@/lib/csv";
+
+interface SelectionValue {
+  ids: string[];
+  selected: Set<string>;
+  toggle: (id: string) => void;
+  toggleAll: () => void;
+  clear: () => void;
+}
+
+const SelectionContext = createContext<SelectionValue | null>(null);
+
+function useSelection(): SelectionValue {
+  const value = useContext(SelectionContext);
+  if (!value) throw new Error("Selection components must be inside <TableSelection>.");
+  return value;
+}
+
+/**
+ * Selection for the rows on screen.
+ *
+ * Deliberately per page: a "select everything, all 40,000 of them" checkbox reads as
+ * harmless right up until the moment it isn't. To act on more than a page, filter down
+ * to what you mean first.
+ */
+export function TableSelection({ ids, children }: { ids: string[]; children: React.ReactNode }) {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const toggle = useCallback((id: string) => {
+    setSelected((current) => {
+      const next = new Set(current);
+      if (!next.delete(id)) next.add(id);
+      return next;
+    });
+  }, []);
+
+  const toggleAll = useCallback(() => {
+    setSelected((current) => (current.size === ids.length ? new Set() : new Set(ids)));
+  }, [ids]);
+
+  const clear = useCallback(() => setSelected(new Set()), []);
+  const value = useMemo(() => ({ ids, selected, toggle, toggleAll, clear }), [ids, selected, toggle, toggleAll, clear]);
+
+  return <SelectionContext.Provider value={value}>{children}</SelectionContext.Provider>;
+}
+
+export function SelectAllCheckbox({ label }: { label: string }) {
+  const { ids, selected, toggleAll } = useSelection();
+  const all = ids.length > 0 && selected.size === ids.length;
+  return (
+    <Checkbox
+      checked={all ? true : selected.size > 0 ? "indeterminate" : false}
+      onCheckedChange={toggleAll}
+      aria-label={all ? `Clear selection` : `Select all ${label} on this page`}
+    />
+  );
+}
+
+export function RowCheckbox({ id, label }: { id: string; label: string }) {
+  const { selected, toggle } = useSelection();
+  return <Checkbox checked={selected.has(id)} onCheckedChange={() => toggle(id)} aria-label={`Select ${label}`} />;
+}
+
+/** Highlights the row while it's selected, so the checkbox isn't the only signal. */
+export function useRowSelected(id: string): boolean {
+  return useSelection().selected.has(id);
+}
+
+interface BarProps {
+  resourceName: string;
+  label: string;
+  pluralLabel: string;
+  canDelete: boolean;
+  /** Rows as they're shown, for exporting what's selected without another round trip. */
+  rows: Record<string, unknown>[];
+  columns: { key: string; label: string }[];
+}
+
+/**
+ * What you can do with the rows you've ticked. Appears only when something is selected,
+ * pinned to the bottom so it's reachable in a long table.
+ */
+export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows, columns }: BarProps) {
+  const { selected, clear } = useSelection();
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const count = selected.size;
+  if (count === 0) return null;
+
+  const noun = count === 1 ? label.toLowerCase() : pluralLabel.toLowerCase();
+
+  const exportSelected = () => {
+    const chosen = rows.filter((row) => selected.has(String(row.id)));
+    downloadCsv(`${resourceName.toLowerCase()}-selection.csv`, toCsv(chosen, columns));
+  };
+
+  const remove = () => {
+    startTransition(async () => {
+      const result = await deleteManyAction(resourceName, [...selected]);
+      setConfirming(false);
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      const { deleted, failed } = result.data;
+      clear();
+      router.refresh();
+      if (failed > 0) toast.warning(`Deleted ${deleted}; ${failed} couldn't be deleted.`);
+      else toast.success(`Deleted ${deleted} ${deleted === 1 ? label.toLowerCase() : pluralLabel.toLowerCase()}.`);
+    });
+  };
+
+  return (
+    <>
+      <div className="sticky bottom-4 z-10 mx-auto flex w-fit items-center gap-2 rounded-full border bg-popover px-2 py-1.5 shadow-lg">
+        <span className="px-2 text-sm tabular-nums">
+          {count} {noun} selected
+        </span>
+        <Button variant="ghost" size="sm" onClick={exportSelected}>
+          <DownloadIcon data-icon="inline-start" />
+          Export
+        </Button>
+        {canDelete && (
+          <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={() => setConfirming(true)}>
+            <Trash2Icon data-icon="inline-start" />
+            Delete
+          </Button>
+        )}
+        <Button variant="ghost" size="icon" onClick={clear} aria-label="Clear selection">
+          <XIcon />
+        </Button>
+      </div>
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Delete {count} {noun}?
+            </AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone. Anything that belongs to them may be deleted too.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Keep them</AlertDialogCancel>
+            <AlertDialogAction onClick={(event) => { event.preventDefault(); remove(); }} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete {count}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+/** Hand the browser a file without a round trip to the server. */
+export function downloadCsv(filename: string, csv: string) {
+  // The BOM is what makes Excel read UTF-8 correctly.
+  const url = URL.createObjectURL(new Blob(["\ufeff" + csv], { type: "text/csv;charset=utf-8" }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}

package/templates/app/components/dashboard/traffic-chart.tsx

@@ -0,0 +1,32 @@
+import type { RequestPoint } from "@/lib/analytics";
+
+/**
+ * Requests a day, with the failing share in red.
+ *
+ * Bars in CSS rather than a charting library: seven numbers don't justify shipping one
+ * to the browser, and this renders on the server with the rest of the page.
+ */
+export function TrafficChart({ points }: { points: RequestPoint[] }) {
+  const peak = Math.max(1, ...points.map((point) => point.requests));
+  const day = new Intl.DateTimeFormat(undefined, { weekday: "short" });
+
+  return (
+    <div className="flex items-end gap-2" role="img" aria-label={`Requests a day for the last ${points.length} days`}>
+      {points.map((point) => {
+        const height = Math.max(2, Math.round((point.requests / peak) * 100));
+        const errorShare = point.requests > 0 ? (point.errors / point.requests) * 100 : 0;
+        return (
+          <div key={point.date} className="flex flex-1 flex-col items-center gap-2">
+            <span className="text-xs tabular-nums text-muted-foreground">{point.requests.toLocaleString()}</span>
+            <div className="flex h-32 w-full items-end" title={`${point.date}: ${point.requests.toLocaleString()} requests, ${point.errors.toLocaleString()} errors`}>
+              <div className="relative w-full overflow-hidden rounded-t-md bg-primary/80" style={{ height: `${height}%` }}>
+                {errorShare > 0 && <div className="absolute inset-x-0 bottom-0 bg-destructive" style={{ height: `${Math.max(4, errorShare)}%` }} />}
+              </div>
+            </div>
+            <span className="text-xs text-muted-foreground">{day.format(new Date(`${point.date}T00:00:00Z`))}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/app/components/marketing/product-preview.tsx

@@ -0,0 +1,70 @@
+import { site } from "@/lib/site";
+
+/**
+ * A drawing of the app in CSS, not a screenshot, so it takes the theme's colours and
+ * type. Replace it with a real screenshot of your product when you have one.
+ */
+export function ProductPreview() {
+  const rows = [
+    ["Northwind", "Active", "$4,200"],
+    ["Brightline", "Trial", "$1,150"],
+    ["Vandelay", "Active", "$9,800"],
+    ["Globex", "Paused", "$640"],
+  ];
+  const bars = [38, 52, 44, 68, 57, 76, 71, 88, 80, 94, 86, 100];
+  return (
+    <div aria-hidden="true" className="relative mx-auto w-full max-w-5xl">
+      <div className="absolute -inset-x-10 -top-10 -bottom-20 -z-10 rounded-[3rem] bg-gradient-to-b from-brand/15 via-brand/5 to-transparent blur-2xl" />
+      <div className="overflow-hidden rounded-[calc(var(--radius)+10px)] border border-border bg-surface shadow-2xl shadow-foreground/10">
+        <div className="flex items-center gap-2 border-b border-border px-4 py-3">
+          <span className="size-3 rounded-full bg-border" />
+          <span className="size-3 rounded-full bg-border" />
+          <span className="size-3 rounded-full bg-border" />
+          <span className="ml-3 h-6 flex-1 rounded-md bg-surface-muted" />
+        </div>
+        <div className="grid grid-cols-[180px_1fr] max-sm:grid-cols-1">
+          <div className="flex flex-col gap-1.5 border-r border-border bg-surface-muted/60 p-4 max-sm:hidden">
+            <span className="mb-3 flex items-center gap-2 text-sm font-semibold">
+              <span className="size-5 rounded-md bg-brand [background-image:var(--brand-gradient,none)]" />
+              {site.name}
+            </span>
+            {["Overview", "Customers", "Invoices", "Reports", "Settings"].map((item, index) => (
+              <span key={item} className={`rounded-md px-2.5 py-1.5 text-xs ${index === 0 ? "bg-surface font-medium text-foreground shadow-sm" : "text-foreground-muted"}`}>
+                {item}
+              </span>
+            ))}
+          </div>
+          <div className="flex flex-col gap-5 p-6">
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                ["Revenue", "$48,290", "+12%"],
+                ["Customers", "1,284", "+8%"],
+                ["Churn", "1.9%", "-0.4%"],
+              ].map(([label, value, change]) => (
+                <div key={label} className="rounded-[var(--radius)] border border-border p-3">
+                  <p className="text-[11px] text-foreground-muted">{label}</p>
+                  <p className="mt-1 text-lg font-semibold tabular-nums">{value}</p>
+                  <p className="text-[11px] text-success">{change}</p>
+                </div>
+              ))}
+            </div>
+            <div className="flex h-28 items-end gap-1.5 rounded-[var(--radius)] border border-border p-3">
+              {bars.map((height, index) => (
+                <span key={index} className="flex-1 rounded-t-sm bg-brand/80 [background-image:var(--brand-gradient,none)]" style={{ height: `${height}%`, opacity: 0.35 + index * 0.055 }} />
+              ))}
+            </div>
+            <div className="rounded-[var(--radius)] border border-border">
+              {rows.map(([name, status, amount]) => (
+                <div key={name} className="flex items-center justify-between border-b border-border px-3 py-2 text-xs last:border-b-0">
+                  <span className="font-medium">{name}</span>
+                  <span className="rounded-full bg-surface-muted px-2 py-0.5 text-foreground-muted">{status}</span>
+                  <span className="tabular-nums">{amount}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/app/components/marketing/site-header.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { BrandMark } from "@/components/auth/auth-shell";
+import { site } from "@/lib/site";
+
+/** The public site's top bar. Static on purpose: it doesn't read the session, so the home page can be cached. */
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-30 border-b border-border/60 bg-background/80 backdrop-blur-md">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-6 px-6">
+        <Link href="/" className="flex items-center gap-2.5 font-semibold">
+          <BrandMark link={false} className="[&_span_span]:size-8 [&_span_span]:text-base" />
+          {site.name}
+        </Link>
+        <nav aria-label="Main" className="hidden items-center gap-7 text-sm text-foreground-muted md:flex">
+          <a href="#features" className="hover:text-foreground">
+            Features
+          </a>
+          <a href="#customers" className="hover:text-foreground">
+            Customers
+          </a>
+          <a href={site.links.support} className="hover:text-foreground">
+            Contact
+          </a>
+        </nav>
+        <div className="flex items-center gap-2">
+          <Link href="/sign-in" className="rounded-[var(--button-radius)] px-3 py-2 text-sm font-medium text-foreground-muted hover:text-foreground">
+            Log in
+          </Link>
+          <Link
+            href="/sign-up"
+            className="rounded-[var(--button-radius)] bg-brand px-4 py-2 text-sm font-medium text-brand-foreground [background-image:var(--brand-gradient,none)] hover:brightness-95"
+          >
+            Sign up
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/app/components/sign-out-button.tsx

@@ -10,7 +10,7 @@ export function SignOutButton() {
         await authClient.signOut();
         window.location.assign("/sign-in");
       }}
-      className="rounded-md border border-[var(--border)] px-3 py-1.5 text-sm font-medium hover:bg-[var(--surface-muted)]"
+      className="rounded-[var(--button-radius)] border border-border bg-surface px-3 py-1.5 text-sm font-medium hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
     >
       Sign out
     </button>