@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/projects/lib/work.ts

@@ -65,6 +65,39 @@ export interface TimeEntry {
   spentOn?: string | null;
 }
 
+export interface ProjectTab {
+  id: string;
+  label: string;
+  /** Project status the tab shows; undefined shows every project. */
+  status?: string;
+}
+
+/** The project list's tabs, left to right. */
+export const PROJECT_TABS: ProjectTab[] = [
+  { id: "active", label: "Active", status: "active" },
+  { id: "paused", label: "Paused", status: "paused" },
+  { id: "complete", label: "Complete", status: "complete" },
+  { id: "all", label: "All" },
+];
+
+/** The tab the list opens on. The sidebar's Projects count is this tab's count. */
+export const DEFAULT_PROJECT_TAB = "active";
+
+export function inProjectTab(tabId: string, project: { status: string }): boolean {
+  const tab = PROJECT_TABS.find((t) => t.id === tabId);
+  return !tab?.status || project.status === tab.status;
+}
+
+/**
+ * How many projects each tab lists. The sidebar badge, the page header, and
+ * the tab counts all read this, so they always agree.
+ */
+export function projectTabCounts(projects: Array<{ status: string }>): Record<string, number> {
+  return Object.fromEntries(
+    PROJECT_TABS.map((tab) => [tab.id, projects.filter((p) => inProjectTab(tab.id, p)).length]),
+  );
+}
+
 export function taskStatusById(id: string): Status | undefined {
   return TASK_STATUSES.find((s) => s.id === id);
 }
@@ -231,3 +264,33 @@ export function parseDuration(input: string): number | null {
 
   return null;
 }
+
+export interface Portfolio {
+  /** Projects with status "active". */
+  activeCount: number;
+  /** Minutes logged against active projects. */
+  loggedMinutes: number;
+  /** What that time is worth at each project's rate. */
+  billableCents: number;
+  /** Active projects past their budget. */
+  overBudgetCount: number;
+}
+
+/** The numbers above the project list, over active projects only. */
+export function portfolio(projects: Project[], entries: TimeEntry[]): Portfolio {
+  const result: Portfolio = {
+    activeCount: 0,
+    loggedMinutes: 0,
+    billableCents: 0,
+    overBudgetCount: 0,
+  };
+  for (const project of projects) {
+    if (project.status !== "active") continue;
+    const minutes = minutesForProject(project.id, entries);
+    result.activeCount += 1;
+    result.loggedMinutes += minutes;
+    result.billableCents += billableCents(minutes, project.hourlyRateCents);
+    if (budgetState(project.budgetMinutes, minutes) === "over") result.overBudgetCount += 1;
+  }
+  return result;
+}

package/templates/projects/tests/demo-team.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { demoEmail, isDemoRow } from "../lib/demo-team";
+
+describe("demo teammates", () => {
+  test("the first address is the person's own, then numbered aliases", () => {
+    expect(demoEmail("maya.castillo@demo.invalid", 0)).toBe("maya.castillo@demo.invalid");
+    expect(demoEmail("maya.castillo@demo.invalid", 1)).toBe("maya.castillo+2@demo.invalid");
+    expect(demoEmail("maya.castillo@demo.invalid", 2)).toBe("maya.castillo+3@demo.invalid");
+  });
+
+  test("a registered account is never reused as a demo teammate", () => {
+    // Someone who registered a demo address first must not be handed the
+    // seeded records.
+    expect(isDemoRow({ email: "x@demo.invalid", passwordHash: "argon2id$..." })).toBe(false);
+    expect(isDemoRow({ email: "x@demo.invalid", emailVerified: "2026-07-01T00:00:00Z" })).toBe(false);
+    expect(isDemoRow({ email: "x@demo.invalid", displayName: "Maya Castillo" })).toBe(true);
+  });
+});

package/templates/projects/tests/work.test.ts

@@ -1,10 +1,13 @@
 import { describe, expect, test } from "bun:test";
 import {
+  DEFAULT_PROJECT_TAB,
+  PROJECT_TABS,
   TASK_STATUSES,
   billableCents,
   budgetState,
   duration,
   groupByStatus,
+  inProjectTab,
   isOpen,
   isValidProjectStatus,
   isValidTaskStatus,
@@ -13,10 +16,13 @@ import {
   minutesForTask,
   money,
   parseDuration,
+  portfolio,
   progress,
+  projectTabCounts,
   type Task,
   type TimeEntry,
 } from "../lib/work";
+import { SEED_TEAM, shapeSeed } from "../lib/seed";
 
 const task = (over: Partial<Task> = {}): Task => ({
   id: "t1",
@@ -236,3 +242,62 @@ describe("money", () => {
     expect(money(null)).toBe("$0.00");
   });
 });
+
+describe("project tabs", () => {
+  const projects = [
+    { id: "a", status: "active" },
+    { id: "b", status: "active" },
+    { id: "c", status: "paused" },
+    { id: "d", status: "complete" },
+  ];
+
+  test("the sidebar count is the default tab's row count", () => {
+    // The sidebar once counted active projects (2) while the list showed all
+    // of them (4). Both now read projectTabCounts for the default tab.
+    const counts = projectTabCounts(projects);
+    expect(counts[DEFAULT_PROJECT_TAB]).toBe(
+      projects.filter((p) => inProjectTab(DEFAULT_PROJECT_TAB, p)).length,
+    );
+    expect(counts[DEFAULT_PROJECT_TAB]).toBe(2);
+  });
+
+  test("each tab counts what it lists", () => {
+    const counts = projectTabCounts(projects);
+    for (const tab of PROJECT_TABS) {
+      expect(counts[tab.id]).toBe(projects.filter((p) => inProjectTab(tab.id, p)).length);
+    }
+    expect(counts).toEqual({ active: 2, paused: 1, complete: 1, all: 4 });
+  });
+});
+
+describe("seed", () => {
+  test("tasks are spread across the whole team, with some left unassigned", () => {
+    const tasks = shapeSeed(Date.parse("2026-07-27T12:00:00Z")).tasks;
+    const owners = new Set(tasks.map((t) => t.assignee));
+    for (let i = 0; i <= SEED_TEAM.length; i += 1) expect(owners.has(i)).toBe(true);
+    expect(owners.has(null)).toBe(true);
+    // Only work that hasn't started is unassigned.
+    for (const t of tasks) if (t.assignee === null) expect(t.row.status).toBe("todo");
+  });
+});
+
+describe("portfolio", () => {
+  test("totals active projects only and counts the ones over budget", () => {
+    const projects = [
+      { id: "a", name: "A", status: "active", budgetMinutes: 60, hourlyRateCents: 10_000 },
+      { id: "b", name: "B", status: "active", budgetMinutes: 600, hourlyRateCents: 0 },
+      { id: "c", name: "C", status: "complete", budgetMinutes: 60, hourlyRateCents: 10_000 },
+    ];
+    const entries = [
+      { id: "1", taskId: "t", projectId: "a", minutes: 90 },
+      { id: "2", taskId: "t", projectId: "b", minutes: 30 },
+      { id: "3", taskId: "t", projectId: "c", minutes: 500 },
+    ];
+    expect(portfolio(projects, entries)).toEqual({
+      activeCount: 2,
+      loggedMinutes: 120,
+      billableCents: 15_000,
+      overBudgetCount: 1,
+    });
+  });
+});

package/templates/restaurant/.env.example

@@ -10,3 +10,10 @@ PYLON_OWNER_EMAIL=you@yourrestaurant.com
 # ── Site URL (optional) ──────────────────────────────────────────────────────
 # Used by robots.txt + sitemap.xml. Point it at your real domain in production.
 # SITE_URL=https://yourrestaurant.com
+
+# ── Demo data ────────────────────────────────────────────────────────────────
+# `pylon dev` fills an empty reservation book with fictional tables. Seeding
+# runs only under `pylon dev` (it checks PYLON_DEV_MODE and
+# PYLON_DEV_WATCH_DIR), so `pylon start`, Docker, and Pylon Cloud deploys never
+# seed. Set 0 to start empty in development. Never set 1 on a deploy.
+# PYLON_DEMO_DATA=0

package/templates/restaurant/README.md

@@ -17,7 +17,7 @@ time in one tab and watch it change to "Full" in another without refreshing.
 
 ## How the realtime works
 
-- `app/reservation-widget.tsx` subscribes to the public, PII-free
+- `app/(marketing)/reservation-widget.tsx` subscribes to the public, PII-free
   `ReservationSlot` markers with `db.useQuery` and COUNTS them per seating, so
   "tables left" ticks down live across every tab.
 - `functions/createReservation.ts` is a public **mutation** that re-checks the
@@ -43,25 +43,51 @@ details, notes — with confirm/cancel, plus live covers + counts.
 Set `PYLON_OWNER_EMAIL` in `.env` (see `.env.example`) to the email you'll sign
 in with, then create that account at `/login`.
 
+## Demo data
+
+In `pylon dev`, an empty reservation book gets fictional tables from the past
+week and the next two weeks (`functions/seedDemo.ts`, `lib/demo.ts`). Each one
+writes a `Reservation` and its `ReservationSlot` marker, like a real
+reservation, so the public calendar shows fewer tables left and the dashboard
+lists the same guests. Seeding runs only when `PYLON_DEMO_DATA` is on, or when
+it is unset and the app runs under `pylon dev`, and only while the `Reservation` table
+is empty. `pylon start`, Docker, and Pylon Cloud deploys do not seed, because only `pylon dev` sets `PYLON_DEV_WATCH_DIR`. Set
+`PYLON_DEMO_DATA=0` to start empty in development. Delete both files once you
+take real reservations.
+
+## Map or hours card
+
+Set `location.mapEmbedUrl` in `lib/site.config.ts` to a Google Maps embed URL to
+show a map beside the address. Without one, the site shows the week's service
+hours (from `reservations.hours`, the same hours the calendar uses) and a
+directions link. The dashboard reminds you while the URL is empty.
+
 ## Rebrand + reconfigure it
 
 Brand, colors, the menu, seating hours, tables per seating, lead time, reviews,
 location, and FAQ content live in **`lib/site.config.ts`**. Editing or
 generating that file updates both the site and reservation engine.
 
+The tab icon is `app/icon.svg` (with `public/favicon.ico` for browsers that
+request `/favicon.ico`). Both carry this brand's letter and colors; replace
+them when you rename the brand.
+
 ## Layout
 
 ```
 app.ts                          Reservation + ReservationSlot + User + policies
 lib/site.config.ts              ALL copy + brand + menu + seating config
 lib/slots.ts                    pure seating math, shared by picker + server
+lib/hours.ts                    weekly hours rows + directions link
+lib/demo.ts                     demo reservations + the dev-only gate
+functions/seedDemo.ts           dev-only demo reservations (see Demo data)
 lib/reservation.ts              shared reservation-row types
 lib/owner.ts                    owner-email gate (PYLON_OWNER_EMAIL)
 functions/createReservation.ts  public mutation: capacity re-check + reserve
 functions/reservationsForOwner.ts  owner-only query: reservations + guest PII
 functions/{confirm,cancel}Reservation.ts  owner-only mutations
-app/page.tsx                    landing (hero + menu + reviews + location)
-app/reservation-widget.tsx      client island: live table picker + form
+app/(marketing)/page.tsx        landing (hero + menu + reviews + location)
+app/(marketing)/reservation-widget.tsx  client island: live table picker + form
 app/dashboard/                  owner dashboard (auth-gated, live)
 ```
 

package/templates/restaurant/app/(marketing)/layout.tsx

@@ -22,7 +22,9 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
   const { brand } = siteConfig;
 
   return (
-    <>
+    // The ink background sits behind the translucent nav, so the nav reads as
+    // dark glass over the page instead of grey over the white body.
+    <div className="flex min-h-screen flex-col bg-[var(--ink)]">
       {/* The nav sits over the hero photo: dark, translucent, cream type. */}
       <header className="sticky top-0 z-30 border-b border-white/10 bg-[var(--ink)]/80 text-[var(--cream)] backdrop-blur">
         <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
@@ -57,7 +59,7 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
       <main className="flex-1">{children}</main>
 
       <SiteFooter />
-    </>
+    </div>
   );
 }
 

package/templates/restaurant/app/(marketing)/page.tsx

@@ -3,6 +3,7 @@ import { type Metadata } from "@pylonsync/react";
 import { LiveBadge } from "@/components/marketing";
 import { ReservationWidget } from "./reservation-widget";
 import { siteConfig, type DayHours } from "@/lib/site.config";
+import { clock, directionsUrl, hoursRows } from "@/lib/hours";
 
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
@@ -24,7 +25,8 @@ export default function LandingPage() {
   return (
     <div className="bg-[var(--ink)] text-[var(--cream)]">
       {/* HERO: the room, full bleed, the words on top. */}
-      <section className="relative isolate min-h-[88vh] overflow-hidden">
+      {/* -mt-16 runs the photo up under the translucent nav. */}
+      <section className="relative isolate -mt-16 min-h-[88vh] overflow-hidden">
         <img src={hero.image} alt="" className="absolute inset-0 -z-20 size-full object-cover" />
         <div className="absolute inset-0 -z-10 bg-gradient-to-t from-[var(--ink)] via-[var(--ink)]/60 to-[var(--ink)]/20" />
         <div className={`${WRAP} flex min-h-[88vh] flex-col justify-end pb-16 pt-32`}>
@@ -155,29 +157,34 @@ export default function LandingPage() {
 
       {/* VISIT */}
       <section id="visit" className="border-t border-white/10">
-        <div className={`${WRAP} grid gap-10 py-16 lg:grid-cols-2`}>
-          <div>
+        <div className={`${WRAP} grid grid-cols-[minmax(0,1fr)] gap-10 py-16 lg:grid-cols-2`}>
+          <div className="min-w-0">
             <h2 className="font-display text-balance text-[2.25rem] leading-[1.08] sm:text-[3rem]">{location.headline}</h2>
-            <div className="mt-6 space-y-2 text-[15px] leading-relaxed text-[var(--cream-2)]">
-              <p className="text-[var(--cream)]">{location.address}</p>
-              <p>{location.hoursText}</p>
-              <p>
-                <a href={`tel:${location.phone}`} className="text-[var(--cream)] underline-offset-4 hover:underline">
-                  {location.phone}
-                </a>{" "}
-                · <a href={`mailto:${location.email}`} className="underline-offset-4 hover:underline">{location.email}</a>
-              </p>
+            <p className="font-display mt-6 max-w-sm text-[1.5rem] leading-snug sm:text-[1.75rem]">{location.address}</p>
+            <div className="mt-8 flex flex-wrap items-center gap-3">
+              <a
+                href={directionsUrl(location.address)}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-[14px] font-medium text-white transition-opacity hover:opacity-90"
+              >
+                Get directions
+              </a>
+              <a href={`tel:${location.phone}`} className="inline-flex items-center rounded-full border border-white/25 px-5 py-2.5 text-[14px] font-medium transition-colors hover:bg-white/10">
+                Call {location.phone}
+              </a>
             </div>
-            <a href="#reserve" className="mt-8 inline-flex items-center rounded-full border border-white/25 px-5 py-2.5 text-[14px] font-medium transition-colors hover:bg-white/10">
-              {hero.ctaLabel}
-            </a>
+            <p className="mt-6 text-[14px] text-[var(--cream-2)]">
+              Or write to{" "}
+              <a href={`mailto:${location.email}`} className="text-[var(--cream)] underline-offset-4 hover:underline">
+                {location.email}
+              </a>
+            </p>
           </div>
           {location.mapEmbedUrl ? (
-            <iframe title="Map" src={location.mapEmbedUrl} className="h-72 w-full rounded-[6px] border border-white/10 grayscale" loading="lazy" />
+            <iframe title={`Map to ${siteConfig.brand.name}`} src={location.mapEmbedUrl} className="h-80 w-full rounded-[6px] border border-white/10 grayscale" loading="lazy" />
           ) : (
-            <div className="grid h-72 place-items-center rounded-[6px] border border-white/10 bg-[var(--ink-2)] text-[13px] text-[var(--cream-2)]">
-              Set <code className="mx-1 font-mono">location.mapEmbedUrl</code> to show a map here
-            </div>
+            <HoursCard />
           )}
         </div>
       </section>
@@ -210,8 +217,25 @@ function hoursLabel(h: DayHours): string {
   return `${clock(h.open)} – ${clock(h.close)}`;
 }
 
-function clock(t: string): string {
-  const [hh, mm] = t.split(":").map(Number);
-  const h12 = ((hh + 11) % 12) + 1;
-  return `${h12}${mm ? `:${String(mm).padStart(2, "0")}` : ""}${hh < 12 ? "am" : "pm"}`;
+// The week's service hours on a cream card, from the same config the
+// reservation calendar reads. Shown in place of a map when
+// `location.mapEmbedUrl` is empty.
+function HoursCard() {
+  const rows = hoursRows(siteConfig.reservations.hours);
+  return (
+    <div className="rounded-[6px] bg-[var(--cream)] p-6 text-[var(--ink)] sm:p-8">
+      <h3 className="font-display text-[1.75rem] italic leading-none">Dinner service</h3>
+      <dl className="mt-6 divide-y divide-[var(--ink)]/10">
+        {rows.map((r) => (
+          <div key={r.days} className="flex items-baseline justify-between gap-4 py-3">
+            <dt className="text-[15px] font-medium">{r.days}</dt>
+            <dd className={"text-[15px] tabular-nums " + (r.closed ? "text-[var(--ink)]/45" : "")}>{r.time}</dd>
+          </div>
+        ))}
+      </dl>
+      <a href="#reserve" className="mt-6 inline-flex items-center text-[14px] font-medium text-brand underline-offset-4 hover:underline">
+        {siteConfig.hero.ctaLabel}
+      </a>
+    </div>
+  );
 }

package/templates/restaurant/app/(marketing)/reservation-widget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
 import { siteConfig } from "@/lib/site.config";
@@ -33,13 +33,38 @@ export function ReservationWidget() {
 function Picker() {
   const cfg = siteConfig.reservations;
   const { data: markers, loading } = db.useQuery<SlotMarker>("ReservationSlot");
+
+  // In `pylon dev` an empty book gets demo reservations (functions/seedDemo.ts),
+  // which show up here as fewer tables left. The call goes out only when no
+  // table is reserved, so a live site with reservations never makes it.
+  const empty = !loading && markers.length === 0;
+  const seedSent = useRef(false);
+  useEffect(() => {
+    if (!empty || seedSent.current) return;
+    seedSent.current = true;
+    void callFn("seedDemo", {}).catch(() => {});
+  }, [empty]);
   const [nowMs] = useState(() => Date.now());
 
   const openDays = useMemo(() => {
     const days: string[] = [];
     for (let i = 0; i < cfg.daysAhead; i++) {
       const key = localDateKey(i, nowMs);
-      if (cfg.hours[weekdayOf(key)]) days.push(key);
+      const hrs = cfg.hours[weekdayOf(key)];
+      if (!hrs) continue;
+      // Today drops out once its last seating is too soon to book.
+      if (i === 0) {
+        const left = seatingsForDay({
+          dayISODate: key,
+          open: hrs.open,
+          close: hrs.close,
+          slotMinutes: cfg.slotMinutes,
+          leadTimeHours: cfg.leadTimeHours,
+          nowMs,
+        }).some((s) => !s.past);
+        if (!left) continue;
+      }
+      days.push(key);
     }
     return days;
   }, [cfg.daysAhead, cfg.hours, nowMs]);
@@ -68,10 +93,13 @@ function Picker() {
       slotMinutes: cfg.slotMinutes,
       leadTimeHours: cfg.leadTimeHours,
       nowMs,
-    }).map((s) => {
-      const remaining = cfg.tablesPerSlot - (takenByTime.get(s.startsAt) ?? 0);
-      return { startsAt: s.startsAt, remaining, available: !s.past && remaining > 0 };
-    });
+    })
+      // Seatings too soon to book are left out, so "Full" only ever means full.
+      .filter((s) => !s.past)
+      .map((s) => {
+        const remaining = Math.max(0, cfg.tablesPerSlot - (takenByTime.get(s.startsAt) ?? 0));
+        return { startsAt: s.startsAt, remaining, available: remaining > 0 };
+      });
   }, [day, cfg, takenByTime, nowMs]);
 
   // Clear an in-progress selection if its seating just filled up (live).
@@ -142,8 +170,10 @@ function Picker() {
       <div className="mt-5 border-t border-zinc-100 pt-5">
         {loading ? (
           <SeatingsSkeleton />
+        ) : !cfg.hours[weekdayOf(day)] ? (
+          <p className="py-6 text-center text-sm text-zinc-500">Closed that day. Pick another.</p>
         ) : seatings.length === 0 ? (
-          <p className="py-6 text-center text-sm text-zinc-500">Closed that day — pick another.</p>
+          <p className="py-6 text-center text-sm text-zinc-500">No seatings left that day. Pick another.</p>
         ) : (
           <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
             {seatings.map((seat) => {

package/templates/restaurant/app/auth-form.tsx

@@ -51,7 +51,7 @@ export function AuthForm() {
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-4">
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <span className="mb-1.5 block text-[13px] font-medium text-[var(--cream-2)]">Email</span>
           <input
             type="email"
             value={email}
@@ -59,11 +59,11 @@ export function AuthForm() {
             required
             autoComplete="email"
             placeholder="you@yourbusiness.com"
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-11 w-full rounded-[6px] border border-white/15 bg-[var(--ink)] px-3.5 text-[15px] text-[var(--cream)] outline-none transition placeholder:text-[var(--cream-2)]/60 focus:border-brand"
           />
         </label>
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <span className="mb-1.5 block text-[13px] font-medium text-[var(--cream-2)]">Password</span>
           <input
             type="password"
             value={password}
@@ -71,24 +71,24 @@ export function AuthForm() {
             required
             autoComplete={mode === "login" ? "current-password" : "new-password"}
             placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-11 w-full rounded-[6px] border border-white/15 bg-[var(--ink)] px-3.5 text-[15px] text-[var(--cream)] outline-none transition placeholder:text-[var(--cream-2)]/60 focus:border-brand"
           />
         </label>
         {error ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+          <p className="rounded-[6px] border border-brand/40 bg-brand/10 px-3 py-2 text-[13px] leading-snug text-[var(--cream)]">
             {error}
           </p>
         ) : null}
         <button
           type="submit"
           disabled={pending}
-          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="inline-flex h-11 w-full items-center justify-center rounded-full bg-brand text-[14px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
         >
           {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
         </button>
       </form>
 
-      <p className="text-center text-[13px] text-zinc-500">
+      <p className="text-center text-[13px] text-[var(--cream-2)]">
         {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
         <button
           type="button"
@@ -96,7 +96,7 @@ export function AuthForm() {
             setMode(mode === "login" ? "signup" : "login");
             setError(null);
           }}
-          className="font-medium text-zinc-900 underline underline-offset-2"
+          className="font-medium text-[var(--cream)] underline underline-offset-4"
         >
           {mode === "login" ? "Create the owner account" : "Sign in"}
         </button>